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 f6587b40439..9fbbf93fa6a 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 8bc8b85b041..553f05c4ccd 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 e309532b900..4ac37b8cdfc 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 368f959c006..03a2be87a8c 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 e1a0301edbb..2636bbf4868 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:"