UX: Update signup cta styles (#12761)

UX: Update signup cta styles (#12761)

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 f6587b4..9fbbf93 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 8bc8b85..553f05c 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 e309532..4ac37b8 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 368f959..03a2be8 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 e1a0301..2636bbf 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:"
 

GitHub sha: c7653d2e

This commit appears in #12761 which was approved by CvX. It was merged by awesomerobot.