Fix #829 - Refactor CSS default message color

mozilla · May 11, 2021 · 2e48668 · 2e48668
1 parent 8160f86
commit 2e48668
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git a/privaterelay/templates/includes/messages.html b/privaterelay/templates/includes/messages.html
@@ -1,11 +1,13 @@
 {% if messages %}
 	{% for message in messages %}
 		<div class="messages home-messages">
-			<div{% if message.tags %} class="{{ message.tags }} js-notification" {% else %} class="" {% endif %}>
-				<span>{{ message }}</span>
-				<button class="flx center-value dismiss js-dismiss">
-					<svg class="x-close-icon fill-current text-gray hover:text-purple-800" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
-				</button>
+			<div{% if message.tags %} class="{{ message.tags }}" {% else %} class="" {% endif %}>
+				<div class="js-notification">
+					<span>{{ message }}</span>
+					<button class="flx center-value dismiss js-dismiss">
+						<svg class="x-close-icon fill-current text-gray hover:text-purple-800" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
+					</button>
+				</div>
 			</div>
 		</div>
 	{% endfor %}

diff --git a/static/css/style.css b/static/css/style.css
@@ -2275,8 +2275,12 @@ input.input-has-error {
   }
 }
 
-.messages.home-messages {
-  background: var(--warningRed);
+.messages .success {
+  background-color: var(--blue7);
+}
+
+.messages .error {
+  background-color: var(--warningRed);
 }
 
 ul.messages {
@@ -2306,7 +2310,7 @@ ul.messages {
   margin: auto;
   outline: none;
   border: none;
-  background: var(--lightestGray);
+  background: rgba(0, 0, 0, 0.5);
   height: 32px;
   width: 32px;
   border-radius: 50%;