Improve success message (#946)

* Fix #693 - Change sign in to sign in/up * Fix #871 - Implement new success message design * Fix #871 - Remove redudant media query * Fix #871 - Reset Sign In/Up change, remove whitespace * Fix #871 - Remove whitespace and commented out code * Fix #871 - Added protocol, removed whitespace * Add whitespace
mozilla · Jul 26, 2021 · 8db85cf · 8db85cf
1 parent 0a78915
commit 8db85cf
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 25 deletions.
diff --git a/privaterelay/templates/home.html b/privaterelay/templates/home.html
@@ -7,23 +7,24 @@
 
 {% block content %}
 
-{% include "includes/messages.html" %}
-
-<main data-landing-page="" class="flx row-full-width home-hero">
-	<div class="flx flx-row hero-content">
-		<div class="hero-left flx flx-col">
-        <h1 class="home-hero-headline">{% ftlmsg 'home-hero-headline' %}</h1>
-        <span class="sub-head hero-sub-head">{% ftlmsg 'home-hero-copy' %}</span>
-			{% include "includes/landing_ctas.html" with page_position="landing-hero" %}
-		</div>
-		<div class="hero-right flx flx-col">
-      <div class="hero-1 hero-slide"></div>
-      <div class="hero-2 hero-slide"></div>
-      <div class="hero-3 hero-slide"></div>
-      <div class="hero-4 hero-slide"></div>
-      <div class="hero-5 hero-slide"></div>
-		</div>
-	</div>
+<main data-landing-page="" class="row-full-width home-hero">
+    {% include "includes/messages.html" %}
+  <div class="flx">
+    <div class="flx flx-row hero-content">
+      <div class="hero-left flx flx-col">
+          <h1 class="home-hero-headline">{% ftlmsg 'home-hero-headline' %}</h1>
+          <span class="sub-head hero-sub-head">{% ftlmsg 'home-hero-copy' %}</span>
+        {% include "includes/landing_ctas.html" with page_position="landing-hero" %}
+      </div>
+      <div class="hero-right flx flx-col">
+        <div class="hero-1 hero-slide"></div>
+        <div class="hero-2 hero-slide"></div>
+        <div class="hero-3 hero-slide"></div>
+        <div class="hero-4 hero-slide"></div>
+        <div class="hero-5 hero-slide"></div>
+      </div>
+    </div>
+  </div>
 </main>
 	<div class="container flx al-cntr flx-col">
 		<div class="how-it-works-content txt-white flx flx-col al-cntr">

diff --git a/privaterelay/templates/includes/messages.html b/privaterelay/templates/includes/messages.html
@@ -5,7 +5,7 @@
 				<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>
+						<svg class="x-close-icon" 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>

diff --git a/privaterelay/templates/profile.html b/privaterelay/templates/profile.html
@@ -15,9 +15,9 @@
 
 {% get_social_accounts request.user as accounts %}
 
-{% include "includes/messages.html" with messages=messages %}
-
 <main id="profile-main" class=" bg-light dashboard-container " data-api-token="{{ user_profile.api_token }}">
+  {% include "includes/messages.html" %}
+
   {% if user_profile.has_unlimited %}
   <div class="mpp-dashbaord-header">
     <div class="mpp-dashbaord-header-container inset">

diff --git a/static/scss/partials/main.scss b/static/scss/partials/main.scss
@@ -31,6 +31,7 @@
   --violet3: #9059ff;
   --violet4: #7542e5;
   --warningRed: #d70022;
+  --successGreen: #3FE1B0; 
   --white: #fff;
   --background: #F5F7F9;
   --dashboardMaxWith: calc(830px + 3rem);
@@ -2371,12 +2372,20 @@ input.input-has-error {
   }
 }
 
+.messages {
+  width: 100%;
+  padding: $spacing-lg $spacing-md 0 $spacing-md;
+  margin: 0 auto;
+}
+
 .messages > div {
   background-color: var(--grey50);
 }
 
 .messages .success {
-  background-color: var(--blue7);
+  background-color: var(--successGreen);
+  border-radius: $border-radius-md;
+  box-shadow: var(--dropShadowLight);
 }
 
 .messages .error {
@@ -2396,10 +2405,8 @@ ul.messages {
   padding: 1rem;
   align-items: center;
   display: flex;
-
-  border-radius: 8px;
-  max-width: 960px;
   margin: 0 auto;
+  text-align: center;
 }
 
 .dismiss {
@@ -2410,15 +2417,23 @@ ul.messages {
   margin: auto;
   outline: none;
   border: none;
-  background: rgba(0, 0, 0, 0.5);
   height: 32px;
   width: 32px;
   border-radius: 50%;
   padding: 5px;
+  background-color: transparent;
+
+  .x-close-icon path {
+    fill: $color-white !important; 
+  }
+
 }
 
 .home-messages span {
   color: $color-white;
+  text-align: center;
+  width: 100%;
+  font-weight: 600;
 }
 
 .home-messages path {