improvement(alert style): better alert style and increasing alert tim…

…eout (#21)
go-vela · Nov 14, 2019 · 27a1f6c · 27a1f6c
1 parent 7a949fc
commit 27a1f6c
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 7 deletions.
diff --git 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
@@ -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
@@ -1249,7 +1249,7 @@ button.-solid {
   bottom: 10px;
 
   width: 100%;
-  max-width: 500px;
+  max-width: 530px;
   margin: 0;
   padding: 0;
 
@@ -1261,18 +1261,18 @@ 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;
 
   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;