Replace senator links for non-selectable list item (#289)

Replace senator link with just the senators name in bold when the senator item is part of a non-selectable list, like in an action dialog. Also fix some CSS `user-select` things.
iamlogand · Oct 3, 2023 · 26b5fb4 · 26b5fb4
1 parent 655520e
commit 26b5fb4
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 8 deletions.
diff --git a/frontend/components/FactionLink.tsx b/frontend/components/FactionLink.tsx
@@ -18,7 +18,7 @@ const FactionLink = (props: FactionLinkProps) => {
   }
 
   return (
-    <Link component="button" onClick={handleClick} sx={{ verticalAlign: "baseline" }}>
+    <Link component="button" onClick={handleClick} sx={{ verticalAlign: "baseline", userSelect: 'auto' }}>
       {props.includeIcon && <span style={{ marginRight: 4 }}><FactionIcon faction={props.faction} size={17} /></span>}
       {props.faction.getName()} Faction
     </Link>

diff --git a/frontend/components/SenatorLink.tsx b/frontend/components/SenatorLink.tsx
@@ -16,7 +16,7 @@ const SenatorLink = (props: SenatorLinkProps) => {
   }
 
   return (
-    <Link component="button" onClick={handleClick} sx={{ verticalAlign: "baseline" }}>{props.senator.displayName}</Link>
+    <Link component="button" onClick={handleClick} sx={{ verticalAlign: "baseline", userSelect: 'auto' }}>{props.senator.displayName}</Link>
   )
 }
 

diff --git a/frontend/components/SenatorListItem.tsx b/frontend/components/SenatorListItem.tsx
@@ -65,7 +65,7 @@ const SenatorListItem = ({ senator, ...props }: SenatorListItemProps) => {
     <div key={senator.id} className={`${styles.senatorListItem} ${props.radioSelected ? styles.radioSelected : ''}`}>
       <SenatorPortrait senator={senator} size={80} selectable={props.selectableSenators} />
       <div className={styles.primaryArea}>
-        <p><b><SenatorLink senator={senator} /></b></p>
+        <p><b>{props.selectableSenators ? <SenatorLink senator={senator} /> : <span>{senator.displayName}</span>}</b></p>
         <p>
           {faction ?
             (props.selectableFactions &&

diff --git a/frontend/components/SenatorPortrait.module.css b/frontend/components/SenatorPortrait.module.css
@@ -1,3 +1,7 @@
+.senatorPortrait {
+  user-select: none;
+}
+
 .senatorPortrait.selectable {
   cursor: pointer;
 
@@ -23,10 +27,6 @@
   margin-inline-end: 0;
 }
 
-.senatorPortrait>figure {
-  background-color: var(--foreground-color);
-}
-
 .bg {
   position: absolute;
 }

diff --git a/frontend/components/SenatorPortrait.tsx b/frontend/components/SenatorPortrait.tsx
@@ -192,6 +192,7 @@ const SenatorPortrait = ({ senator, size, ...props }: SenatorPortraitProps) => {
   }
 
   // Get JSX for the portrait
+  const PortraitElement = props.selectable ? 'button' : 'div'
   const getPortrait = () => {
     return (
       <PortraitElement
@@ -234,7 +235,6 @@ const SenatorPortrait = ({ senator, size, ...props }: SenatorPortraitProps) => {
     )
   }
 
-  const PortraitElement = props.selectable ? 'button' : 'div'
   if (props.nameTooltip) {
     return <Tooltip key={key} title={`${senator.displayName}`} enterDelay={500} arrow>{getPortrait()}</Tooltip>
   } else {
-Original file line number
+Diff line change
@@ Expand Up / @@ -16,7 +16,7 @@ const SenatorLink = (props: SenatorLinkProps) => { @@
       }
       return (
-        <Link component="button" onClick={handleClick} sx={{ verticalAlign: "baseline" }}>{props.senator.displayName}</Link>
+        <Link component="button" onClick={handleClick} sx={{ verticalAlign: "baseline", userSelect: 'auto' }}>{props.senator.displayName}</Link>
       )
     }
@@ Expand Down @@