From 50b601533f92833be03cfbbbff8fe04de7121171 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ce=CC=81sar=20Del=20Solar?= <delsolar@gmail.com>
Date: Wed, 27 Nov 2024 08:37:04 -0500
Subject: [PATCH] more tile styles

---
 frontend/src/app_context.tsx      |  4 +++
 frontend/src/flashcard.module.css |  4 +--
 frontend/src/flashcard.tsx        | 52 +++++++++++++++++++++++++++++++
 frontend/src/settings.tsx         | 12 +++++++
 4 files changed, 70 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app_context.tsx b/frontend/src/app_context.tsx
index da227b61..945de864 100644
--- a/frontend/src/app_context.tsx
+++ b/frontend/src/app_context.tsx
@@ -21,6 +21,10 @@ export enum TileStyle {
    * Match the dark/light mode display setting by default
    */
   MatchDisplay = "match-display",
+
+  Blue = "blue",
+  Orange = "orange",
+  Yellow = "yellow",
 }
 
 export type DisplaySettings = {
diff --git a/frontend/src/flashcard.module.css b/frontend/src/flashcard.module.css
index fca41fd2..3098cf30 100644
--- a/frontend/src/flashcard.module.css
+++ b/frontend/src/flashcard.module.css
@@ -1,6 +1,6 @@
 .responsiveTileText {
-  font-size: var(--mantine-font-size-xl);
-  line-height: var(--mantine-line-height-xl);
+  font-size: var(--mantine-font-size-xxl);
+  line-height: var(--mantine-line-height-xxl);
 }
 
 .responsiveTilePaper {
diff --git a/frontend/src/flashcard.tsx b/frontend/src/flashcard.tsx
index 83a8fc3c..9eea1ecc 100644
--- a/frontend/src/flashcard.tsx
+++ b/frontend/src/flashcard.tsx
@@ -113,6 +113,58 @@ const QuestionDisplay: React.FC<QuestionDisplayProps> = ({
         />
       );
     }
+    case TileStyle.Yellow: {
+      return (
+        <TiledText
+          fw={700}
+          ff={fontStyle}
+          withBorder={!isDark}
+          shadow={isDark ? "xs" : undefined}
+          bg={theme.colors.yellow[4]}
+          c={theme.colors.gray[9]}
+          classNames={{
+            text: classes.responsiveTileText,
+            tile: classes.responsiveTilePaper,
+          }}
+          text={displayQuestion}
+        />
+      );
+    }
+    case TileStyle.Orange: {
+      return (
+        <TiledText
+          fw={700}
+          ff={fontStyle}
+          withBorder={!isDark}
+          shadow={isDark ? "xs" : undefined}
+          bg={theme.colors.orange[4]}
+          c={theme.colors.gray[9]}
+          classNames={{
+            text: classes.responsiveTileText,
+            tile: classes.responsiveTilePaper,
+          }}
+          text={displayQuestion}
+        />
+      );
+    }
+    case TileStyle.Blue: {
+      return (
+        <TiledText
+          fw={700}
+          ff={fontStyle}
+          withBorder={!isDark}
+          shadow={isDark ? "xs" : undefined}
+          bg={theme.colors.blue[8]}
+          c={theme.colors.gray[0]}
+          classNames={{
+            text: classes.responsiveTileText,
+            tile: classes.responsiveTilePaper,
+          }}
+          text={displayQuestion}
+        />
+      );
+    }
+
     case TileStyle.None:
     default: {
       return (
diff --git a/frontend/src/settings.tsx b/frontend/src/settings.tsx
index a9a16d2e..3827f83c 100644
--- a/frontend/src/settings.tsx
+++ b/frontend/src/settings.tsx
@@ -78,6 +78,18 @@ const Settings: React.FC = () => {
               value: TileStyle.MatchDisplay,
               label: "Match dark/light mode",
             },
+            {
+              value: TileStyle.Blue,
+              label: "Blue",
+            },
+            {
+              value: TileStyle.Orange,
+              label: "Orange",
+            },
+            {
+              value: TileStyle.Yellow,
+              label: "Yellow",
+            },
           ]}
           label="Question tile style"
           {...settingsForm.getInputProps("tileStyle")}