Show icons on concession secrets

frontend/components/ConcessionTermLink.tsx

@@ -2,19 +2,25 @@ import TermLink from "@/components/TermLink"
 
 interface ConcessionTermLinkProps {
   name: string
+  includeIcon?: boolean
   hiddenUnderline?: boolean
+  size?: "small" | "medium" | "large"
 }
 
 const ConcessionTermLink = ({
   name,
+  includeIcon,
   hiddenUnderline,
+  size,
 }: ConcessionTermLinkProps) => {
   if (name.endsWith("Tax Farmer")) {
     return (
       <TermLink
         name="Tax Farmer"
         displayName={name}
+        includeIcon={includeIcon}
         hiddenUnderline={hiddenUnderline}
+        size={size}
       />
     )
   }
@@ -23,11 +29,20 @@ const ConcessionTermLink = ({
       <TermLink
         name="Grain"
         displayName={name}
+        includeIcon={includeIcon}
         hiddenUnderline={hiddenUnderline}
+        size={size}
       />
     )
   }
-  return <TermLink name={name} hiddenUnderline={hiddenUnderline} />
+  return (
+    <TermLink
+      name={name}
+      hiddenUnderline={hiddenUnderline}
+      includeIcon={includeIcon}
+      size={size}
+    />
+  )
 }
 
 export default ConcessionTermLink

frontend/components/SecretList.tsx

@@ -17,29 +17,41 @@ const SecretList = ({ faction }: { faction: Faction }) => {
   const secretRenderer = (secret: Secret) => {
     if (!secret.name || !secret.type) return null
 
-    const secretTypeTermLink = (secret: Secret) => {
+    const renderSecretType = (secret: Secret) => {
       if (secret.type === "concession") {
         return <TermLink name={capitalize(secret.type)} hiddenUnderline />
       }
       return capitalize(secret.type as string)
     }
 
+    const renderSecretName = (secret: Secret) => {
+      if (secret.type === "concession" && secret.name) {
+        return (
+          <ConcessionTermLink
+            name={secret.name}
+            size="large"
+            includeIcon
+            hiddenUnderline
+          />
+        )
+      }
+      return secret.name
+    }
+
     return (
       <li
         key={secret.id}
         className="list-none border-2 border-solid border-purple-500 rounded p-4 px-5 bg-neutral-50 dark:bg-neutral-600 shadow-[inset_0_0_10px_2px_hsla(286,72%,60%,0.6)]"
       >
         <div className="flex flex-wrap justify-between gap-x-4 gap-y-2 text-sm">
-          <div>{secretTypeTermLink(secret)}</div>
+          <div>{renderSecretType(secret)}</div>
           <div className="flex justify-end items-center gap-1 text-purple-600 dark:text-purple-300 my-[-6px]">
             <Image src={SecretsIcon} alt={"g"} width={26} height={26} />
             <i>Hidden from others</i>
           </div>
         </div>
         <div className="flex items-center text-lg mt-2">
-          <b>
-            <ConcessionTermLink name={secret.name} hiddenUnderline />
-          </b>
+          <b>{renderSecretName(secret)}</b>
         </div>
       </li>
     )

frontend/components/TalentsAmount.tsx

@@ -3,13 +3,20 @@ import TermLink from "@/components/TermLink"
 interface TalentsAmountProps {
   amount: number
   sign?: "+" | "-"
+  size?: "small" | "medium" | "large"
 }
 
-const TalentsAmount = ({ amount, sign }: TalentsAmountProps) => (
+const TalentsAmount = ({ amount, sign, size }: TalentsAmountProps) => (
   <span className="text-nowrap font-bold">
     {sign && sign}
     {amount}{" "}
-    <TermLink name="Talent" plural={amount !== 1} includeIcon hideText />
+    <TermLink
+      name="Talent"
+      plural={amount !== 1}
+      size={size}
+      includeIcon
+      hideText
+    />
   </span>
 )
 

frontend/components/TermLink.tsx

@@ -43,6 +43,7 @@ interface TermLinkProps {
   hiddenUnderline?: boolean
   plural?: boolean
   hideText?: boolean
+  size?: "small" | "medium" | "large"
 }
 
 // Icon link for a game term
@@ -54,6 +55,7 @@ const TermLink = ({
   hiddenUnderline,
   plural,
   hideText,
+  size,
 }: TermLinkProps) => {
   const { setSelectedDetail, setDialog } = useGameContext()
 
@@ -90,25 +92,45 @@ const TermLink = ({
     setSelectedDetail({ type: "Term", name: name } as SelectedDetail)
   }
 
-  const getContent = () => (
-    <>
-      {includeIcon && (
-        <Image
-          src={getIcon()}
-          height={24}
-          width={24}
-          alt={`${name} Icon`}
-          className="mt-[-5px] align-middle ml-[-2px] mx-px"
-        />
-      )}
-      {!hideText && (
-        <span>
-          {displayName ?? name}
-          {plural ? "s" : ""}
-        </span>
-      )}
-    </>
-  )
+  const getContent = () => {
+    let iconSize = 24
+    let tailwindTextSize = "inherit"
+    if (!hideText) {
+      switch (size) {
+        case "small":
+          iconSize = 20
+          tailwindTextSize = "sm"
+          break
+        case "medium":
+          iconSize = 24
+          tailwindTextSize = "base"
+          break
+        case "large":
+          iconSize = 28
+          tailwindTextSize = "lg"
+          break
+      }
+    }
+    return (
+      <>
+        {includeIcon && (
+          <Image
+            src={getIcon()}
+            height={iconSize}
+            width={iconSize}
+            alt={`${name} Icon`}
+            className="mt-[-5px] align-middle ml-[-2px] mx-px"
+          />
+        )}
+        {!hideText && (
+          <span className={`text-${tailwindTextSize}`}>
+            {displayName ?? name}
+            {plural ? "s" : ""}
+          </span>
+        )}
+      </>
+    )
+  }
 
   // Get the JSX for the link
   const getLink = () => {

frontend/components/actionDialogs/AssignConcessionsDialog.tsx

@@ -132,8 +132,8 @@ const AssignConcessionsDialog = ({
       amount = 3
     }
     return (
-      <span>
-        <TalentsAmount amount={amount} sign="+" />{" "}
+      <span className="text-sm">
+        <TalentsAmount amount={amount} sign="+" size="small" />{" "}
         {trigger ? (
           <span>per {trigger} Raised</span>
         ) : (
@@ -177,14 +177,15 @@ const AssignConcessionsDialog = ({
                   <div className="flex items-center justify-between gap-4">
                     <div
                       className={
-                        "px-4 h-[70px] box-border flex flex-col grow items-center justify-center gap-1 rounded \
+                        "px-4 py-3 box-border flex flex-col grow justify-center gap-2 rounded \
                         border-2 border-solid border-purple-500 shadow-[inset_0_0_10px_2px_hsla(286,72%,60%,0.6)]"
                       }
                     >
                       <b>
                         <ConcessionTermLink
                           name={secret.name}
                           hiddenUnderline
+                          includeIcon
                         />
                       </b>
                       {renderSecretDescription(secret.name)}