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 @@
{{#if session.hideSignupCta}}
-
+
{{i18n "signup_cta.hidden_for_session"}}
-
+
{{else}}
-
{{replace-emoji (i18n "signup_cta.intro")}}
+
{{replace-emoji (i18n "signup_cta.intro")}}
{{replace-emoji (i18n "signup_cta.value_prop")}}
{{/if}}
-
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:"