Make Help link noticeable

darkreader · Sep 25, 2023 · 0f91dab · 0f91dab
1 parent d50ee91
commit 0f91dab
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/src/ui/popup/components/body.tsx b/src/ui/popup/components/body.tsx
@@ -157,7 +157,7 @@ function Body(props: BodyProps & {fonts: string[]}) {
                     <a class="footer-links__link" href={PRIVACY_URL} target="_blank" rel="noopener noreferrer">{getLocalMessage('privacy')}</a>
                     <a class="footer-links__link" href={TWITTER_URL} target="_blank" rel="noopener noreferrer">Twitter</a>
                     <a class="footer-links__link" href={GITHUB_URL} target="_blank" rel="noopener noreferrer">GitHub</a>
-                    <a class="footer-links__link" href={getHelpURL()} target="_blank" rel="noopener noreferrer">{getLocalMessage('help')}</a>
+                    <a class="footer-links__link footer-help-link" href={getHelpURL()} target="_blank" rel="noopener noreferrer">{getLocalMessage('help')}</a>
                 </div>
                 <div class="footer-buttons">
                     <a class="donate-link" href={DONATE_URL} target="_blank" rel="noopener noreferrer">

diff --git a/src/ui/popup/style.less b/src/ui/popup/style.less
@@ -194,6 +194,21 @@ footer {
     }
 }
 
+.footer-help-link {
+    color: @color-control-fore;
+    font-weight: bold;
+
+    &::after {
+        background-color: @color-control-active;
+        border-radius: 50%;
+        content: "?";
+        display: inline-block;
+        height: @size-text-normal-height;
+        margin-left: 0.125rem;
+        width: @size-text-normal-height;
+    }
+}
+
 //
 // Make popup borders the same
 // across platforms and browser versions