From acfde325180e15ab6582b76044028a1782def3a7 Mon Sep 17 00:00:00 2001
From: Alexander <alexanderjoemc@gmail.com>
Date: Sun, 28 Apr 2024 00:54:05 -0400
Subject: [PATCH] theme match settings modal, fix home animation

---
 ui/src/components/settings.tsx | 19 +++++++++++++------
 ui/src/pages/Home.tsx          | 15 +++++++++------
 2 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/ui/src/components/settings.tsx b/ui/src/components/settings.tsx
index e27fd71..0714c65 100644
--- a/ui/src/components/settings.tsx
+++ b/ui/src/components/settings.tsx
@@ -28,23 +28,30 @@ export function Settings(props: SettingsProps) {
       <AlertDialogTrigger>
         <OcGear3 class="w-6 h-6" />
       </AlertDialogTrigger>
-      <AlertDialogContent>
-        <AlertDialogTitle>Settings</AlertDialogTitle>
+      <AlertDialogContent
+        class={`bg-primary dark:bg-blackout text-100 dark:text-white ${props.theme}`}
+      >
+        <AlertDialogTitle class="font-bold text-100 light:text-black underline underline-offset-2">
+          Settings
+        </AlertDialogTitle>
         <AlertDialogDescription>
-          <label class="block text-sm font-medium mb-2">Theme</label>
+          <label class="block text-sm font-medium mb-2 text-100 light:text-black">Theme</label>
           <Select
             value={props.theme}
             onChange={props.callback}
             options={availableThemes}
             placeholder="Select a theme"
             itemComponent={props => (
-              <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>
+              <SelectItem item={props.item} class="focus:bg-400 focus:font-bold light:focus:bg-800">
+                {props.item.rawValue}
+              </SelectItem>
             )}
+            class="text-100 light:text-black"
           >
-            <SelectTrigger aria-label="Theme" class="w-[180px]">
+            <SelectTrigger aria-label="Theme" class="w-[180px] bg-secondary">
               <SelectValue<string>>{state => state.selectedOption()}</SelectValue>
             </SelectTrigger>
-            <SelectContent />
+            <SelectContent class={`bg-secondary text-100 light:text-black ${props.theme}`} />
           </Select>
         </AlertDialogDescription>
       </AlertDialogContent>
diff --git a/ui/src/pages/Home.tsx b/ui/src/pages/Home.tsx
index 0dbf56e..10f64b3 100644
--- a/ui/src/pages/Home.tsx
+++ b/ui/src/pages/Home.tsx
@@ -2,6 +2,7 @@ import { Link } from "~/components/link.tsx";
 import { Motion } from "solid-motionone";
 import { Button } from "~/components/ui/button.tsx";
 import { AiFillGithub } from 'solid-icons/ai';
+import { AnimationDiv } from '~/components/animated-div.tsx';
 
 export const Home = () => {
   return (
@@ -11,10 +12,11 @@ export const Home = () => {
           <section class="w-full py-12 md:py-24 lg:py-32">
             <div class="container px-4 md:px-6">
               <div class="grid gap-6 lg:grid-cols-[1fr_400px] lg:gap-12 xl:grid-cols-[1fr_600px]">
-                <Motion.div
+                <AnimationDiv
                   class="flex flex-col justify-center space-y-4"
                   animate={{ x: [-200, 0], opacity: [0, 1] }}
-                  transition={{ duration: 1, easing: "ease-in-out" }}
+                  duration={1}
+                  easing={"ease-in-out"}
                 >
                   <div class="space-y-2">
                     <h1 class="text-3xl text-100 light:text-white font-bold tracking-tighter sm:text-5xl xl:text-6xl/none">
@@ -26,10 +28,11 @@ export const Home = () => {
                       predict the outcome.
                     </p>
                   </div>
-                </Motion.div>
-                <Motion.div
+                </AnimationDiv>
+                <AnimationDiv
                   animate={{ y: [-200, 0], opacity: [0, 1] }}
-                  transition={{ duration: 1, easing: "ease-in-out" }}
+                  duration={1}
+                  easing={"ease-in-out"}
                 >
                   <img
                     alt="Hero"
@@ -38,7 +41,7 @@ export const Home = () => {
                     src="https://placeholder.pics/svg/300/F97EFF-8589FF/Placedholder"
                     width="550"
                   />
-                </Motion.div>
+                </AnimationDiv>
               </div>
             </div>
           </section>