From 0792e6644de87fe19b7176f490665132eed1a2bc Mon Sep 17 00:00:00 2001
From: ellaestigoy <ella.estigoy@gmail.com>
Date: Tue, 5 Apr 2022 15:03:17 -0600
Subject: [PATCH] add a little bit of styling

---
 common/common.scss                            | 37 +++++++++++++++++--
 ...s-prompt.js => topic-in-gated-category.js} |  0
 .../need-access-prompt.hbs                    |  1 -
 .../topic-in-gated-category.hbs               |  1 +
 .../components/need-access-prompt.hbs         |  6 ---
 .../components/topic-in-gated-category.hbs    | 21 +++++++++++
 settings.yml                                  | 16 ++++++--
 7 files changed, 67 insertions(+), 15 deletions(-)
 rename javascripts/discourse/components/{need-access-prompt.js => topic-in-gated-category.js} (100%)
 delete mode 100644 javascripts/discourse/connectors/topic-above-post-stream/need-access-prompt.hbs
 create mode 100644 javascripts/discourse/connectors/topic-above-post-stream/topic-in-gated-category.hbs
 delete mode 100644 javascripts/discourse/templates/components/need-access-prompt.hbs
 create mode 100644 javascripts/discourse/templates/components/topic-in-gated-category.hbs

diff --git a/common/common.scss b/common/common.scss
index 2a145b2..afa12e2 100644
--- a/common/common.scss
+++ b/common/common.scss
@@ -1,20 +1,49 @@
-.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;
   }
-
+  
   .post-stream {
     max-height: 150vh;
     overflow: hidden;
diff --git a/javascripts/discourse/components/need-access-prompt.js b/javascripts/discourse/components/topic-in-gated-category.js
similarity index 100%
rename from javascripts/discourse/components/need-access-prompt.js
rename to javascripts/discourse/components/topic-in-gated-category.js
diff --git a/javascripts/discourse/connectors/topic-above-post-stream/need-access-prompt.hbs b/javascripts/discourse/connectors/topic-above-post-stream/need-access-prompt.hbs
deleted file mode 100644
index 3d14350..0000000
--- a/javascripts/discourse/connectors/topic-above-post-stream/need-access-prompt.hbs
+++ /dev/null
@@ -1 +0,0 @@
-{{need-access-prompt categoryId=model.category_id}}
\ No newline at end of file
diff --git a/javascripts/discourse/connectors/topic-above-post-stream/topic-in-gated-category.hbs b/javascripts/discourse/connectors/topic-above-post-stream/topic-in-gated-category.hbs
new file mode 100644
index 0000000..4263472
--- /dev/null
+++ b/javascripts/discourse/connectors/topic-above-post-stream/topic-in-gated-category.hbs
@@ -0,0 +1 @@
+{{topic-in-gated-category categoryId=model.category_id}}
\ No newline at end of file
diff --git a/javascripts/discourse/templates/components/need-access-prompt.hbs b/javascripts/discourse/templates/components/need-access-prompt.hbs
deleted file mode 100644
index a63490d..0000000
--- a/javascripts/discourse/templates/components/need-access-prompt.hbs
+++ /dev/null
@@ -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}}
diff --git a/javascripts/discourse/templates/components/topic-in-gated-category.hbs b/javascripts/discourse/templates/components/topic-in-gated-category.hbs
new file mode 100644
index 0000000..6b7882f
--- /dev/null
+++ b/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}}
diff --git a/settings.yml b/settings.yml
index 38d929a..7e4527f 100644
--- a/settings.yml
+++ b/settings.yml
@@ -2,12 +2,20 @@ enabled_categories:
   type: list
   list_type: category
   default: ""
-  description: "Choose which categories that users need to sign up"
-prompt_heading:
+  description: "Choose which categories that users need to sign up for."
+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: ""