UX: Update signup cta styles (#12761)

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>

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%;
+        }
+      }
+    }
   }
 }
 

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) {

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 {

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:"