add a little bit of styling

common/common.scss

@@ -1,16 +1,45 @@
-.custom-need-access-prompt {
+.custom-gated-topic-container {
   background: var(--tertiary-low);
-  display: block;
+  border-top: 5px solid var(--tertiary);
   position: fixed;
   width: 100%;
   bottom: 0;
   left: 0;
   right: 0;
-  padding: 2em;
   z-index: 999;
+  min-height: 65%;
+
+  // align content in the middle
+  display: grid;
+  place-items: center;
+}
+
+.custom-gated-topic-content {
+  text-align: center;
+
+  &--header {
+    font-size: var(--font-up-5);
+    margin-bottom: 1rem;
+    font-weight: 700;
+  }
+
+  &--text {
+    font-size: var(--font-up-2);
+  }
+
+  &--cta {
+    margin-top: 2rem;
+    
+    &__signup {
+      margin-bottom: 1rem;
+    }
+  }
 }
 
 .topic-in-gated-category {
+  overflow-y: hidden;
+  height: 100%;
+
   .topic-navigation {
     visibility: hidden;
   }

javascripts/discourse/connectors/topic-above-post-stream/need-access-prompt.hbs

@@ -1 +0,0 @@
-{{need-access-prompt categoryId=model.category_id}}

javascripts/discourse/connectors/topic-above-post-stream/topic-in-gated-category.hbs

@@ -0,0 +1 @@
+{{topic-in-gated-category categoryId=model.category_id}}

javascripts/discourse/templates/components/need-access-prompt.hbs

@@ -1,6 +0,0 @@
-{{#if shouldShow}}
-  <div class="custom-need-access-prompt">
-    <h1>{{theme-setting "prompt_heading"}}</h1>
-    {{d-button action=(route-action "showCreateAccount") class="btn-primary sign-up-button" translatedLabel=(theme-setting "prompt_cta_label")}}
-  </div>
-{{/if}}

javascripts/discourse/templates/components/topic-in-gated-category.hbs

@@ -0,0 +1,21 @@
+{{#if shouldShow}}
+  <div class="custom-gated-topic-container">
+    <div class="custom-gated-topic-content">
+      <div class="custom-gated-topic-content--header">
+        {{theme-setting "heading_text"}}
+      </div>
+      <p class="custom-gated-topic-content--text">
+        {{theme-setting "subheading_text"}}
+      </p>
+
+      <div class="custom-gated-topic-content--cta">
+        <div class="custom-gated-topic-content--cta__signup">
+          {{d-button action=(route-action "showCreateAccount") class="btn-primary btn-large sign-up-button" translatedLabel=(theme-setting "signup_cta_label")}}
+        </div>
+        <div class="custom-gated-topic-content--cta__login">
+          {{d-button action=(route-action "showLogin") id="login-link" class="btn btn-text login-button" translatedLabel=(theme-setting "login_cta_label")}}
+        </div>
+      </div>
+    </div>
+  </div>
+{{/if}}

settings.yml

@@ -2,12 +2,20 @@ enabled_categories:
   type: list
   list_type: category
   default: ""
-  description: "Choose which categories that users need to sign up"
+  description: "Choose which categories that users need to sign up for."
-prompt_heading:
+heading_text:
   type: string
-  default: "Sign up to read the rest of the post"
+  default: "This area is for members only"
   description: ""
-prompt_cta_label:
+subheading_text:
+  type: string
+  default: "Create an account to view this content"
+  description: ""
+signup_cta_label:
   type: string
   default: "Sign Up"
   description: ""
+login_cta_label:
+  type: string
+  default: "Already have an account? Sign in"
+  description: ""