From 5c1daf21111c7287dec677972bdb4005e719b4d5 Mon Sep 17 00:00:00 2001
From: Tim Cheung <tim@cheung.io>
Date: Mon, 22 Jan 2024 14:32:55 +0000
Subject: [PATCH] improve popup menu

---
 package-lock.json                      |  9 +++++++++
 package.json                           |  1 +
 src/popup/components/list-item-link.js | 15 ++++++++++++++-
 src/popup/sections/about.js            |  9 +++++++--
 src/popup/sections/general.js          |  7 ++++---
 src/popup/sections/help.js             |  5 ++---
 6 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 91c45fb7..d6d7aa65 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "js-cookie": "^2.2.1",
         "ky": "^0.11.1",
         "lodash": "^4.17.10",
+        "lucide-react": "^0.314.0",
         "mem": "^4.0.0",
         "p-memoize": "^1.0.0",
         "p-retry": "^1.0.0",
@@ -10247,6 +10248,14 @@
         "node": ">=10"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.314.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.314.0.tgz",
+      "integrity": "sha512-c2zOW7TOyKxPCaSs1og2lFdoI3SR4iii3yrZJU2Zpdc78nOw4fUmrcFNultaCiwZcr4CyiKdzjMdvKNlBBk+UQ==",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/lz-string": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
diff --git a/package.json b/package.json
index 9d4da017..7b76790e 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "js-cookie": "^2.2.1",
     "ky": "^0.11.1",
     "lodash": "^4.17.10",
+    "lucide-react": "^0.314.0",
     "mem": "^4.0.0",
     "p-memoize": "^1.0.0",
     "p-retry": "^1.0.0",
diff --git a/src/popup/components/list-item-link.js b/src/popup/components/list-item-link.js
index f2dbaaf7..e6b04a20 100644
--- a/src/popup/components/list-item-link.js
+++ b/src/popup/components/list-item-link.js
@@ -1,8 +1,16 @@
 import ListItem from '@material-ui/core/ListItem'
 import ListItemText from '@material-ui/core/ListItemText'
+import { ExternalLink } from 'lucide-react'
 import React from 'react'
 
-export default ({ href, faceit, steamCommunity, subreddit, ...props }) => {
+export default ({
+  href,
+  faceit,
+  steamCommunity,
+  subreddit,
+  twitter,
+  ...props
+}) => {
   let link = href
 
   if (faceit) {
@@ -13,11 +21,16 @@ export default ({ href, faceit, steamCommunity, subreddit, ...props }) => {
     link = `https://www.reddit.com/r/repeekgg/${
       typeof subreddit === 'string' ? subreddit : ''
     }`
+  } else if (twitter) {
+    link = `https://www.twitter.com/${twitter}`
   }
 
   return (
     <ListItem button component="a" href={link} target="_blank">
       <ListItemText {...props} />
+      <div style={{ marginLeft: 16 }}>
+        <ExternalLink size={16} color="#999b9d" />
+      </div>
     </ListItem>
   )
 }
diff --git a/src/popup/sections/about.js b/src/popup/sections/about.js
index 72f8df1b..627061e8 100644
--- a/src/popup/sections/about.js
+++ b/src/popup/sections/about.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import { version } from '../../manifest'
 import ListItemLink from '../components/list-item-link'
+import ListItemText from '../components/list-item-text'
 import ListSubheader from '../components/list-subheader'
 
 export const ABOUT = 'About'
@@ -8,7 +9,7 @@ export const ABOUT = 'About'
 export default () => (
   <React.Fragment>
     <ListSubheader>About</ListSubheader>
-    <ListItemLink primary="Version" secondary={version} />
+    <ListItemText primary="Version" secondary={version} />
     <ListItemLink
       primary="Website"
       secondary="repeek.gg"
@@ -28,6 +29,10 @@ export default () => (
     />
     <ListItemLink primary="Steam" steamCommunity="groups/repeekdotgg" />
     <ListSubheader divider>Team</ListSubheader>
-    <ListItemLink primary="azn" secondary="Creator & Developer" faceit="azn" />
+    <ListItemLink
+      primary="timche"
+      secondary="Creator & Developer"
+      twitter="timche_"
+    />
   </React.Fragment>
 )
diff --git a/src/popup/sections/general.js b/src/popup/sections/general.js
index 7e566ed4..63f4e6ae 100644
--- a/src/popup/sections/general.js
+++ b/src/popup/sections/general.js
@@ -33,11 +33,12 @@ export default ({ getSwitchProps }) => {
         secondary="FACEIT will be enhanced."
         {...getSwitchProps('extensionEnabled')}
       />
+      <ListSubheader>FACEIT Beta</ListSubheader>
       {typeof hasFaceitBetaHostPermission === 'boolean' &&
         typeof extensionEnabledFaceitBeta === 'boolean' && (
           <ListItemSwitch
-            primary="Enabled on FACEIT Beta"
-            secondary="FACEIT Beta (beta.faceit.com) will be enhanced. Please note that the FACEIT Beta is considered unstable, so Repeek will be as well. If you experience any issues with Repeek, please report them on Reddit or Twitter."
+            primary="Enabled"
+            secondary="FACEIT Beta (beta.faceit.com) will be enhanced. Please note that the FACEIT Beta may contain errors or inaccuracies and may not function as well as standard FACEIT (www.faceit.com). If you experience any issues with Repeek, please report them on Reddit or Twitter."
             onClick={async () => {
               if (!hasFaceitBetaHostPermission) {
                 await requestFaceitBetaHostPermission()
@@ -56,7 +57,7 @@ export default ({ getSwitchProps }) => {
         )}
       <ListItemLink
         primary="FACEIT Beta FAQ"
-        secondary="Read more about the FACEIT Beta and how to opt-in/out of it."
+        secondary="Read more about the FACEIT Beta, how to opt-in/out of it and provide feedback or report any issues."
         href="https://support.faceit.com/hc/en-us/articles/11287180980124-Public-BETA-FAQs"
       />
     </React.Fragment>
diff --git a/src/popup/sections/help.js b/src/popup/sections/help.js
index 26dd6c92..20437c0e 100644
--- a/src/popup/sections/help.js
+++ b/src/popup/sections/help.js
@@ -11,7 +11,7 @@ export const HELP = 'Help'
 
 export default () => (
   <React.Fragment>
-    <ListSubheader>Issues?</ListSubheader>
+    <ListSubheader>Issues/Questions?</ListSubheader>
     <ListItemLink
       primary="Report an Issue"
       subreddit={encodeURI(
@@ -20,8 +20,7 @@ export default () => (
         }\nBrowser: ${capitalize(userBrowser.name)} (${userBrowser.version})`,
       )}
     />
-    <ListSubheader divider>Questions?</ListSubheader>
     <ListItemLink primary="Ask on Reddit" subreddit="submit?selftext=true" />
-    <ListItemLink primary="Tweet Us" href="https://twitter.com/repeekgg" />
+    <ListItemLink primary="Tweet Us" twitter="repeekgg" />
   </React.Fragment>
 )