improve popup menu

repeekgg · Jan 23, 2024 · 5c1daf2 · 5c1daf2
1 parent 51c90fa
commit 5c1daf2
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 9 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -1,14 +1,15 @@
 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'
 
 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
@@ -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
@@ -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>
 )