From c7653d2e7826d2a07a05ab8948c5e8cc19323f7d Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Tue, 20 Apr 2021 13:00:39 -0400
Subject: [PATCH] UX: Update signup cta styles (#12761)

---
 .../app/templates/components/signup-cta.hbs   |  7 ++--
 .../stylesheets/common/base/topic-post.scss   | 34 +++++++++++++++++--
 .../stylesheets/desktop/topic-post.scss       |  4 ---
 app/assets/stylesheets/mobile/topic-post.scss | 12 -------
 config/locales/client.en.yml                  |  2 +-
 5 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/templates/components/signup-cta.hbs b/app/assets/javascripts/discourse/app/templates/components/signup-cta.hbs
index f6587b4043..9fbbf93fa6 100644
--- a/app/assets/javascripts/discourse/app/templates/components/signup-cta.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/signup-cta.hbs
@@ -1,10 +1,10 @@
 <div class="signup-cta alert alert-info">
   {{#if session.hideSignupCta}}
-    <p>
+    <h3>
       {{i18n "signup_cta.hidden_for_session"}}
-    </p>
+    </h3>
   {{else}}
-    <p>{{replace-emoji (i18n "signup_cta.intro")}}</p>
+    <h3>{{replace-emoji (i18n "signup_cta.intro")}}</h3>
     <p>{{replace-emoji (i18n "signup_cta.value_prop")}}</p>
 
     <div class="buttons">
@@ -13,5 +13,4 @@
       <a href {{action "neverShow"}}>{{i18n "signup_cta.hide_forever"}}</a>
     </div>
   {{/if}}
-  <div class="clearfix"></div>
 </div>
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index 8bc8b85b04..553f05c4cc 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -1062,12 +1062,42 @@ a.mention-group {
 }
 
 .signup-cta {
+  box-sizing: border-box;
+  max-width: calc(#{$topic-body-width} + 4.5em);
+  padding: 3em 5em 2em 56px; // 45px (topic avatar) + 11px (margin) = 56px
+  @include breakpoint(mobile-extra-large) {
+    padding: 1.5em 1.5em 0.25em;
+  }
+  h3 {
+    margin-bottom: 0.5em;
+  }
   a {
-    float: right;
     text-decoration: underline;
   }
   .buttons {
-    margin-bottom: 1em;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    margin: 1.5em 0 1em;
+    > * {
+      margin-bottom: 0.5em;
+    }
+    .btn {
+      margin-right: 0.5em;
+      white-space: nowrap;
+      &.btn-remind {
+        background: var(--primary-very-low);
+        margin-right: auto;
+        @include hover {
+          background: var(--primary-medium);
+        }
+      }
+      @include breakpoint(mobile-extra-large) {
+        &.btn-primary {
+          margin-right: 100%;
+        }
+      }
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index e309532b90..4ac37b8cdf 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -765,10 +765,6 @@ span.highlighted {
   transition: visibility 1s, opacity ease-out 1s;
 }
 
-.signup-cta {
-  width: $topic-body-width;
-}
-
 /* Tablet (portrait) ----------- */
 
 @media all and (max-width: 790px) {
diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss
index 368f959c00..03a2be87a8 100644
--- a/app/assets/stylesheets/mobile/topic-post.scss
+++ b/app/assets/stylesheets/mobile/topic-post.scss
@@ -427,18 +427,6 @@ span.highlighted {
   display: none;
 }
 
-.signup-cta {
-  margin-left: auto;
-  margin-right: auto;
-  width: calc(100% - 50px);
-  a {
-    margin-top: 7px;
-  }
-  button {
-    margin-right: 7px;
-  }
-}
-
 .post-notice {
   margin-bottom: 1em;
   &.old {
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index e1a0301edb..2636bbf486 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -1707,7 +1707,7 @@ en:
       sign_up: "Sign Up"
       hide_session: "Remind me tomorrow"
       hide_forever: "no thanks"
-      hidden_for_session: "OK, I'll ask you tomorrow. You can always use 'Log In' to create an account, too."
+      hidden_for_session: "OK, we'll ask you tomorrow. You can always use 'Log In' to create an account, too."
       intro: "Hello! Looks like you’re enjoying the discussion, but you haven’t signed up for an account yet."
       value_prop: "When you create an account, we remember exactly what you’ve read, so you always come right back where you left off. You also get notifications, here and via email, whenever someone replies to you. And you can like posts to share the love. :heartpulse:"