Add learn more button for casual mode linking the wiki

ajayyy · Feb 13, 2025 · 42bea31 · 42bea31
1 parent 57b22b6
commit 42bea31
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 3 deletions.
diff --git a/public/content.css b/public/content.css
@@ -699,6 +699,10 @@ ytd-compact-playlist-renderer .ytd-compact-playlist-renderer #video-title:not(.c
     padding: 5px;
 }
 
+.cbCasualVoteDescription a {
+    color: inherit;
+}
+
 .casualOnboarding .cbVoteButton {
     font-size: 18px;
 }

diff --git a/src/options/CasualChoiceComponent.tsx b/src/options/CasualChoiceComponent.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { FormattedText } from "../popup/FormattedTextComponent";
-import Config from "../config/config";
-import { casualVoteCategories, CasualVoteCategory } from "../submission/casualVote.const";
+import Config, { TitleFormatting } from "../config/config";
+import { casualVoteCategories, CasualVoteCategory, casualWikiLink } from "../submission/casualVote.const";
 import { ToggleOptionComponent } from "../popup/ToggleOptionComponent";
 
 export const CasualChoiceComponent = () => {
@@ -61,6 +61,17 @@ export const CasualChoiceComponent = () => {
                     {chrome.i18n.getMessage("CasualModeDescription").split("\n").map((line, index) => (
                         <div key={index}>{line}</div>
                     ))}
+
+                    <a style={{textDecoration: "underline"}} 
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            onClick={(e) => e.stopPropagation()}
+                            href={casualWikiLink}>
+                        <FormattedText
+                            langKey="LearnMore"
+                            titleFormatting={TitleFormatting.SentenceCase}
+                        />
+                    </a>
                 </div>
 
                 <div className="casualChoiceCategories">

diff --git a/src/submission/CasualVoteOnboardingComponent.tsx b/src/submission/CasualVoteOnboardingComponent.tsx
@@ -1,5 +1,7 @@
 import * as React from "react";
 import { FormattedText } from "../popup/FormattedTextComponent";
+import { casualWikiLink } from "./casualVote.const";
+import { TitleFormatting } from "../config/config";
 
 export interface CasualVoteComponentProps {
     close: () => void;
@@ -29,6 +31,18 @@ export const CasualVoteOnboardingComponent = (props: CasualVoteComponentProps) =
                 {chrome.i18n.getMessage("CasualModeDescription").split("\n").map((line, index) => (
                     <div key={index}>{line}</div>
                 ))}
+
+                <div>
+                    <a
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        href={casualWikiLink}>
+                        <FormattedText
+                            langKey="LearnMore"
+                            titleFormatting={TitleFormatting.SentenceCase}
+                        />
+                    </a>
+                </div>
             </div>
 
             <div className="cbVoteButtonContainer">

diff --git a/src/submission/casualVote.const.ts b/src/submission/casualVote.const.ts
@@ -18,4 +18,6 @@ export const casualVoteCategories: CasualVoteCategory[] = [{
 }, {
     id: "other",
     key: "dearrow_category_other"
-}];
+}];
+
+export const casualWikiLink = "https://wiki.sponsor.ajay.app/w/DeArrow/Casual_mode";