Improve the appearance of the secret list

iamlogand · Jan 16, 2024 · 8fc7bb7 · 8fc7bb7
1 parent b424eba
commit 8fc7bb7
Showing 1 changed file with 15 additions and 5 deletions.
diff --git a/frontend/components/SecretList.tsx b/frontend/components/SecretList.tsx
@@ -1,3 +1,4 @@
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import Faction from "@/classes/Faction"
 import Secret from "@/classes/Secret"
 import { useGameContext } from "@/contexts/GameContext"
@@ -11,13 +12,22 @@ const SecretList = ({ faction }: { faction: Faction }) => {
   )
 
   return (
-    <div className="flex flex-col gap-2">
+    <ul className="flex flex-col gap-3 p-0 m-0">
       {secrets.map((secret: Secret) => (
-        <p>
-          <b>{capitalize(secret.type as string)}</b>: {secret.name}
-        </p>
+        <li className="list-none border border-solid border-red-600 rounded p-4 px-5 bg-stone-50 shadow-[inset_0_0_10px_0px_hsla(0,72%,51%,0.5)]">
+          <div className="flex flex-wrap justify-between gap-x-4 gap-y-2 text-sm">
+            <div>{capitalize(secret.type as string)} Secret</div>
+            <div className="flex justify-end items-center gap-1 text-red-600">
+              <VisibilityOffIcon fontSize="small" />{" "}
+              <i>Hidden from others</i>
+            </div>
+          </div>
+          <div className="flex items-center text-lg mt-2">
+            <b>{secret.name}</b>
+          </div>
+        </li>
       ))}
-    </div>
+    </ul>
   )
 }