Increase size of kit avatar on Me kit list

AstroPlant · Jan 5, 2024 · 2701972 · 2701972
1 parent ac2e1fa
commit 2701972
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/astroplant-frontend/src/Components/KitAvatar.tsx b/astroplant-frontend/src/Components/KitAvatar.tsx
@@ -4,7 +4,13 @@ import style from "./KitAvatar.module.css";
 
 /** A kit avatar generated from its serial. This is used for quick visual identification. */
 // TODO: maybe take an "identicon"-style approach.
-export function KitAvatar({ serial }: { serial: string }) {
+export function KitAvatar({
+  serial,
+  fontSize = "1rem",
+}: {
+  serial: string;
+  fontSize?: string;
+}) {
   const initials = useMemo(() => {
     if (serial.length === 16 && serial[0] === "k" && serial[1] === "-") {
       return (serial[2]! + serial[3]!).toUpperCase();
@@ -15,7 +21,7 @@ export function KitAvatar({ serial }: { serial: string }) {
     }
   }, [serial]);
   return (
-    <div className={style.avatar} aria-hidden="true">
+    <div className={style.avatar} aria-hidden="true" style={{ fontSize }}>
       {initials}
     </div>
   );

diff --git a/astroplant-frontend/src/scenes/Me/index.tsx b/astroplant-frontend/src/scenes/Me/index.tsx
@@ -48,7 +48,7 @@ function Me({ me }: Props) {
                 const kitState = kitStates[serial];
                 return (
                   <li key={serial}>
-                    <KitAvatar serial={serial} />
+                    <KitAvatar serial={serial} fontSize="1.25rem" />
                     <div>
                       <header className={style.itemHeader}>
                         <Link to={`/kit/${serial}`}>