From 27a1f6c1b37fa1889948f24b49f6b7ab213079b8 Mon Sep 17 00:00:00 2001
From: David Vader <48764154+davidvader@users.noreply.github.com>
Date: Thu, 14 Nov 2019 12:39:07 -0600
Subject: [PATCH] improvement(alert style): better alert style and increasing
 alert timeout (#21)

---
 cypress/integration/build.spec.js |  4 ++--
 src/elm/Alerts.elm                |  2 +-
 src/scss/style.scss               | 10 ++++++----
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/cypress/integration/build.spec.js b/cypress/integration/build.spec.js
index 88bb13a2f..73782fe8d 100644
--- a/cypress/integration/build.spec.js
+++ b/cypress/integration/build.spec.js
@@ -138,8 +138,8 @@ context("org/repo/build View Build Page", () => {
       });
 
       it("clicking restarted build link should redirect to Build page", () => {
-        cy.get("@restartBuild").click();
-        cy.get("[data-test=alert-hyperlink]").click();
+        cy.get("@restartBuild").click({ force: true });
+        cy.get("[data-test=alert-hyperlink]").click({ force: true });
         cy.location("pathname").should("eq", "/someorg/somerepo/2");
       });
     });
diff --git a/src/elm/Alerts.elm b/src/elm/Alerts.elm
index 4838ee369..5128248bb 100644
--- a/src/elm/Alerts.elm
+++ b/src/elm/Alerts.elm
@@ -90,7 +90,7 @@ wrapAlert variantClass title message link =
 config : Alerting.Config msg
 config =
     Alerts.config
-        |> Alerting.delay (Util.oneSecondMillis * 15)
+        |> Alerting.delay (Util.oneSecondMillis * 30)
         |> Alerting.containerAttrs [ class "alert-container-attributes" ]
         |> Alerting.itemAttrs [ Util.testAttribute "alert", class "alert-item-attributes" ]
 
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 5f5b32f1b..898c4ffcd 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -1249,7 +1249,7 @@ button.-solid {
   bottom: 10px;
 
   width: 100%;
-  max-width: 500px;
+  max-width: 530px;
   margin: 0;
   padding: 0;
 
@@ -1261,11 +1261,10 @@ button.-solid {
   margin: 1em 1em 0 1em;
 
   transition: max-height 1.2s, margin-top 1.2s;
-
-  background-color: var(--color-bg-darker);
 }
 
 .alert-container {
+  width: 500px;
   padding: 1em;
 
   cursor: pointer;
@@ -1273,6 +1272,7 @@ button.-solid {
   color: white;
   border-radius: 5px;
   border-radius: 0px;
+  background-color: var(--color-bg-darker);
   box-shadow: 0 5px 5px -5px hsla(0, 0%, 0%, 0.5);
 
   font-size: 14px;
@@ -1286,10 +1286,12 @@ button.-solid {
 
 .alert-container .-message {
   display: flex;
+  overflow-y: auto;
   flex-direction: row;
   justify-content: space-between;
 
-  margin-top: 0.5em;
+  max-height: 3.25em;
+  margin-top: 0.25em;
   margin-bottom: 0;
 
   font-size: 0.9em;