From ca68fa4cec4fd176cb56cfac595725a8f023b6d4 Mon Sep 17 00:00:00 2001
From: Logan Davidson <iamlogandavidson@gmail.com>
Date: Tue, 3 Oct 2023 13:43:26 +0100
Subject: [PATCH] Replace senator links for non-selectable list item

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.
---
 frontend/components/FactionLink.tsx            | 2 +-
 frontend/components/SenatorLink.tsx            | 2 +-
 frontend/components/SenatorListItem.tsx        | 2 +-
 frontend/components/SenatorPortrait.module.css | 8 ++++----
 frontend/components/SenatorPortrait.tsx        | 2 +-
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/components/FactionLink.tsx b/frontend/components/FactionLink.tsx
index 8841a67a..9f8bf7f1 100644
--- 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
index 32d12853..e6ccf0b1 100644
--- 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
index 38c72736..4148f80c 100644
--- 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
index 7433df51..4f9154fb 100644
--- 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
index 8f000379..fcf50881 100644
--- 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 {