feat(html): make 'Write a review' button public

userstyles-world · Aug 10, 2021 · ae40992 · ae40992
1 parent a3958e7
commit ae40992
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 12 deletions.
diff --git a/scss/ui/_base.scss b/scss/ui/_base.scss
@@ -98,6 +98,11 @@ hr { border: none; border-top: 1px solid var(--bg-3)  }
         }
     }
 
+    &[disabled] {
+        color: var(--fg-4);
+        border-color: var(--bg-3);
+    }
+
     // Override light mode colors.
     [data-color-scheme="light"] & {
         &.primary, &.stylus {

diff --git a/typescript/page/view-style.ts b/typescript/page/view-style.ts
@@ -35,10 +35,6 @@ function checkIfStyleInstalled() {
         if ('usw-style-info-response' === type && 'installed' === data.requestType) {
             window.removeEventListener('message', onMessage);
             if (data.installed) {
-                const writeReviewButton: HTMLAnchorElement = document.querySelector('#write-review');
-                if (writeReviewButton) {
-                    writeReviewButton.style.display = '';
-                }
                 const installButton: HTMLAnchorElement = document.querySelector('#install');
                 if (installButton) {
                     // Need to user innerHTML to preserve the icon.

diff --git a/views/style/view.html b/views/style/view.html
@@ -83,14 +83,17 @@ <h1 class="mb:m">{{ .Style.Name -}}
                     href="https://github.com/openstyles/stylus/#readme"
                     id="stylus" class="btn icon stylus ml:s"
                 >{{ template "icons/brush" 16 }} Get Stylus</a>
-            {{ if .User.ID }}
-                <a 
-                    target="_blank"
-                    rel="noopener"
-                    href="/styles/review/{{ $.Style.ID }}"
-                    style="display: none"
-                    id="write-review" class="btn icon write-review ml:s">Write a review</a>
-            {{ end }}
+                <a
+                    id="write-review" class="btn icon write-review ml:s"
+                    {{ if not .User.ID }}
+                        disabled
+                        tooltip-data="An account is required in order to review userstyles."
+                    {{ else }}
+                        target="_blank"
+                        rel="noopener"
+                        href="/styles/review/{{ $.Style.ID }}"
+                    {{ end }}
+                >Write a review</a>
             </span>
         </div>