Fix #971 - Add border-radius and box shadow to error message (#980)

* Fix #971 - Add border-radius and drop shadow to error message * Clean up .messages code
mozilla · Aug 4, 2021 · 87b50b8 · 87b50b8
1 parent 54ce4cc
commit 87b50b8
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 25 deletions.
diff --git a/privaterelay/templates/includes/messages.html b/privaterelay/templates/includes/messages.html
@@ -1,7 +1,7 @@
 {% if messages %}
 	{% for message in messages %}
-		<div class="messages home-messages">
-			<div{% if message.tags %} class="{{ message.tags }}" {% else %} class="" {% endif %}>
+		<div class="messages">
+			<div{% if message.tags %} class="message-wrapper {{ message.tags }}" {% else %} class="" {% endif %}>
 				<div class="js-notification">
 					<span>{{ message }}</span>
 					<button class="flx center-value dismiss js-dismiss">

diff --git a/static/scss/partials/main.scss b/static/scss/partials/main.scss
@@ -2288,20 +2288,31 @@ input:focus::placeholder {
   width: 100%;
   padding: $spacing-lg $spacing-md 0 $spacing-md;
   margin: 0 auto;
-}
 
-.messages > div {
-  background-color: $color-grey-50
-}
+  span {
+    color: $color-white;
+    text-align: center;
+    width: 100%;
+    font-weight: 600;
+  }
 
-.messages .success {
-  background-color: $color-success;
-  border-radius: $border-radius-md;
-  box-shadow: var(--dropShadowLight);
-}
+  path {
+    fill: $color-white;
+  }
+
+  .message-wrapper {
+    border-radius: $border-radius-md;
+    box-shadow: var(--dropShadowLight);
+  }
+
+  .success {
+    background-color: $color-success;
+  }
+
+  .error {
+    background-color: $color-error;
+  }
 
-.messages .error {
-  background-color: $color-error;
 }
 
 ul.messages {
@@ -2339,15 +2350,4 @@ ul.messages {
     fill: $color-white !important; 
   }
 
-}
-
-.home-messages span {
-  color: $color-white;
-  text-align: center;
-  width: 100%;
-  font-weight: 600;
-}
-
-.home-messages path {
-  fill: $color-white;
-}
+}