Merge branch 'feature/ui-revamp' of github.com:day-mon/sports-betting…

…-ai into feature/ui-revamp
day-mon · May 13, 2024 · e01f153 · e01f153
2 parents 6bb72a7 + 8b03333
commit e01f153
Show file tree

Hide file tree

Showing 10 changed files with 328 additions and 311 deletions.
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
@@ -1,6 +1,7 @@
 import { Component, useContext } from "solid-js";
 import { Navbar } from "~/components/navbar";
 import { IThemeContext, ThemeContext } from "~/context/ThemeContext.tsx";
+import { Footer } from "~/components/footer.tsx";
 
 const App: Component = (props: any) => {
   const themeContext: IThemeContext = useContext(ThemeContext);
@@ -10,6 +11,7 @@ const App: Component = (props: any) => {
       <div class={`flex flex-col min-h-screen bg-primary ${themeContext.theme}`}>
         <Navbar />
         {props.children}
+        <Footer />
       </div>
     </>
   );

diff --git a/ui/src/components/dialog-modal.tsx b/ui/src/components/dialog-modal.tsx
@@ -0,0 +1,36 @@
+import { ComponentProps, JSX, useContext } from "solid-js";
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+  AlertDialogTrigger
+} from "~/components/ui/alert-dialog";
+import { Button } from "~/components/ui/button";
+import { IThemeContext, ThemeContext } from "~/context/ThemeContext.tsx";
+
+export interface DialogModalProps extends ComponentProps<"div"> {
+  children?: JSX.Element;
+  title?: string;
+  trigger?: JSX.Element;
+}
+
+export function DialogModal(props: DialogModalProps) {
+  const themeContext: IThemeContext = useContext(ThemeContext);
+
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger>{props.trigger || <Button>Open Dialog</Button>}</AlertDialogTrigger>
+      <AlertDialogContent
+        class={`bg-primary dark:bg-blackout text-100 dark:text-white ${themeContext.theme}`}
+      >
+        <AlertDialogTitle
+          class={`font-bold text-100 light:text-black underline underline-offset-2`}
+        >
+          {props.title}
+        </AlertDialogTitle>
+        <AlertDialogDescription>{props.children}</AlertDialogDescription>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
diff --git a/ui/src/components/display-card.tsx b/ui/src/components/display-card.tsx
@@ -1,15 +1,9 @@
-import { Component, createSignal, For, Show } from "solid-js";
+import { Component, For, Show } from "solid-js";
 import { Game, GameWithPrediction, Period, Team } from "~/interface";
 import { FiClock } from "solid-icons/fi";
 import { IoLocationOutline } from "solid-icons/io";
 import { OcDotfill3 } from "solid-icons/oc";
 import { Motion } from "solid-motionone";
-import {
-  AlertDialog,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogTitle
-} from "~/components/ui/alert-dialog.tsx";
 import { Avatar, AvatarImage } from "~/components/ui/avatar";
 import { Badge } from "~/components/ui/badge";
 import { Button } from "~/components/ui/button";
@@ -31,7 +25,8 @@ import {
 } from "~/components/ui/table";
 import { isLive, timeUntilGame } from "~/lib/utils.ts";
 import { Prediction } from "~/model/prediction.ts";
-import { AnimationDiv } from '~/components/animated-div.tsx';
+import { AnimationDiv } from "~/components/animated-div.tsx";
+import { DialogModal } from "~/components/dialog-modal.tsx";
 
 const logos = import.meta.glob("../assets/teams/*.svg", { eager: true });
 
@@ -168,14 +163,14 @@ export const TeamInfo: Component<ITeamInfoProps> = (props: ITeamInfoProps) => {
             }
           >
             <AnimationDiv animate={{ x: [0, 0], opacity: [0, 1] }}>
-            <Badge
-              class={`ml-2 ${getColorFromStatusAndOutcome(
-                props.game.status,
-                props.winner === props.team.id
-              )} text-white`}
-            >
-              Projected Winner
-            </Badge>
+              <Badge
+                class={`ml-2 ${getColorFromStatusAndOutcome(
+                  props.game.status,
+                  props.winner === props.team.id
+                )} text-white`}
+              >
+                Projected Winner
+              </Badge>
             </AnimationDiv>
           </Show>
         </span>
@@ -241,7 +236,6 @@ export const AdvancedGameCard: Component<ITeamProps> = (props: ITeamProps) => {
 };
 
 export const DemoCard: Component<IDisplayCard> = (props: IDisplayCard) => {
-  const [injuryReportOpen, setInjuryReportOpen] = createSignal(false);
   return (
     <div>
       <Card
@@ -318,7 +312,6 @@ export const DemoCard: Component<IDisplayCard> = (props: IDisplayCard) => {
                       <span class="text-white light:text-black">{props.game.home_team.name}</span>
                       <span class="text-white light:text-200 bg-700 py-2 px-4 rounded inline-block">
                         {props.game.home_team.score.points}
-
                       </span>
                     </div>
                     <span class="text-sm text-gray-400"> - </span>
@@ -361,54 +354,39 @@ export const DemoCard: Component<IDisplayCard> = (props: IDisplayCard) => {
                 team => team.injuries.length > 0
               )}
             >
-              <Button
-                class="bg-700 text-white light:text-black"
-                variant="default"
-                onClick={() => setInjuryReportOpen(true)}
-              >
-                View Injury Report
-              </Button>
-              <AlertDialog
-                open={injuryReportOpen()}
-                onOpenChange={setInjuryReportOpen}
-                preventScroll={true}
+              <DialogModal
+                title="Injury Report"
+                trigger={
+                  <Button class="bg-700 text-white light:text-black" variant="default">
+                    View Injury Report
+                  </Button>
+                }
               >
-                <AlertDialogContent class="bg-primary opacity-100  p-4 rounded-lg">
-                  <AlertDialogTitle class="flex flex-row justify-center items-center text-2xl font-bold mb-2">
-                    Injury Report
-                  </AlertDialogTitle>
-                  <AlertDialogDescription>
-                    <Table class="mt-2">
-                      <TableHeader>
-                        <TableRow class="bg-700 text-300">
-                          <TableHead class="text-center font-semibold">Team</TableHead>
-                          <TableHead class="text-center font-semibold">Player</TableHead>
-                          <TableHead class="text-center font-semibold">Status</TableHead>
-                        </TableRow>
-                      </TableHeader>
-                      <TableBody>
-                        <For each={[props.game.home_team, props.game.away_team]}>
-                          {(team, _) => (
-                            <For each={team.injuries}>
-                              {(injury, _) => (
-                                <TableRow>
-                                  <TableCell class="text-center text-100">{team.name}</TableCell>
-                                  <TableCell class="text-center text-100">
-                                    {injury.player}
-                                  </TableCell>
-                                  <TableCell class="text-center text-100">
-                                    {injury.status}
-                                  </TableCell>
-                                </TableRow>
-                              )}
-                            </For>
+                <Table class="mt-2">
+                  <TableHeader>
+                    <TableRow class="bg-700 text-100 hover:bg-600">
+                      <TableHead class="text-center text-200 font-semibold">Team</TableHead>
+                      <TableHead class="text-center text-200 font-semibold">Player</TableHead>
+                      <TableHead class="text-center text-200 font-semibold">Status</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    <For each={[props.game.home_team, props.game.away_team]}>
+                      {(team, _) => (
+                        <For each={team.injuries}>
+                          {(injury, _) => (
+                            <TableRow>
+                              <TableCell class="text-center text-100">{team.name}</TableCell>
+                              <TableCell class="text-center text-100">{injury.player}</TableCell>
+                              <TableCell class="text-center text-100">{injury.status}</TableCell>
+                            </TableRow>
                           )}
                         </For>
-                      </TableBody>
-                    </Table>
-                  </AlertDialogDescription>
-                </AlertDialogContent>
-              </AlertDialog>
+                      )}
+                    </For>
+                  </TableBody>
+                </Table>
+              </DialogModal>
             </Show>
           </div>
         </CardFooter>

diff --git a/ui/src/components/footer.tsx b/ui/src/components/footer.tsx
@@ -0,0 +1,34 @@
+import { AiFillGithub } from "solid-icons/ai";
+
+export function Footer() {
+  return (
+    <>
+      <footer class="flex flex-col gap-2 sm:flex-row py-6 w-full shrink-0 items-center px-4 md:px-6 bg-primary light:bg-primary text-100 light:text-black font-monserrat">
+        <p class="mt-2 sm:mt-auto text-xs text-100 light:text-black order-last sm:order-first">
+          &copy;&nbsp;{new Date().getFullYear()}&nbsp;Accuribet. All rights reserved.
+        </p>
+        <nav class="sm:ml-auto flex flex-col items-center sm:items-end gap-4 sm:gap-6">
+          <a
+            href="https://github.com/day-mon/sports-betting-ai"
+            class="text-xs flex flex-row hover:underline underline-offset-4"
+            target="_blank"
+          >
+            <AiFillGithub class="w-4 h-4 mx-2" />
+            Github
+          </a>
+          <p class="text-xs">
+            Some assets from{" "}
+            <a href="https://solid-icons.vercel.app/" class="hover:underline" target="_blank">
+              Solid Icons
+            </a>{" "}
+            and{" "}
+            <a href="https://www.solid-ui.com/" class="hover:underline" target="_blank">
+              Solid-UI
+            </a>
+            .
+          </p>
+        </nav>
+      </footer>
+    </>
+  );
+}
diff --git a/ui/src/components/settings.tsx b/ui/src/components/settings.tsx
@@ -1,11 +1,4 @@
-import { ComponentProps, useContext } from "solid-js";
-import {
-  AlertDialog,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogTitle,
-  AlertDialogTrigger
-} from "~/components/ui/alert-dialog";
+import { useContext } from "solid-js";
 import {
   Select,
   SelectContent,
@@ -14,44 +7,32 @@ import {
   SelectValue
 } from "~/components/ui/select.tsx";
 import { OcGear3 } from "solid-icons/oc";
-import { IThemeContext, ThemeContext } from "~/context/ThemeContext.tsx";
+import { IThemeContext, ThemeContext, themeOptions } from "~/context/ThemeContext.tsx";
+import { DialogModal } from "~/components/dialog-modal.tsx";
 
 export function Settings() {
-  const availableThemes = ["blackout", "logan", "lavender", "light", "blue"];
   const themeContext: IThemeContext = useContext(ThemeContext);
 
   return (
-    <AlertDialog>
-      <AlertDialogTrigger>
-        <OcGear3 class="w-6 h-6" />
-      </AlertDialogTrigger>
-      <AlertDialogContent
-        class={`bg-primary dark:bg-blackout text-100 dark:text-white ${themeContext.theme}`}
+    <DialogModal title="Settings" trigger={<OcGear3 class="w-6 h-6" />}>
+      <label class="block text-sm font-medium mb-2 text-100 light:text-black">Theme</label>
+      <Select
+        value={themeContext.theme}
+        onChange={themeContext.setTheme}
+        options={themeOptions}
+        placeholder="Select a theme"
+        itemComponent={props => (
+          <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"
       >
-        <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 text-100 light:text-black">Theme</label>
-          <Select
-            value={themeContext.theme}
-            onChange={themeContext.setTheme}
-            options={availableThemes}
-            placeholder="Select a theme"
-            itemComponent={props => (
-              <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] bg-secondary">
-              <SelectValue<string>>{state => state.selectedOption()}</SelectValue>
-            </SelectTrigger>
-            <SelectContent class={`bg-secondary text-100 light:text-black ${themeContext.theme}`} />
-          </Select>
-        </AlertDialogDescription>
-      </AlertDialogContent>
-    </AlertDialog>
+        <SelectTrigger aria-label="Theme" class="w-[180px] bg-secondary">
+          <SelectValue<string>>{state => state.selectedOption()}</SelectValue>
+        </SelectTrigger>
+        <SelectContent class={`bg-secondary text-100 light:text-black ${themeContext.theme}`} />
+      </Select>
+    </DialogModal>
   );
 }
diff --git a/ui/src/context/ThemeContext.tsx b/ui/src/context/ThemeContext.tsx
@@ -6,19 +6,23 @@ export interface ThemeContextProviderProps {
 }
 
 export interface IThemeContext {
-  theme: string;
-  setTheme: (theme: string) => void;
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
 }
 
+export type Theme = "blackout" | "logan" | "lavender" | "light" | "blue";
+export const themeOptions: Theme[] = ["blackout", "logan", "lavender", "light", "blue"];
+
 export const ThemeContext = createContext({} as IThemeContext);
 
 const ACCURIBET_THEME_KEY: string = "accuribet-theme";
 
 export function ThemeContextProvider(props: ThemeContextProviderProps) {
-  let preferredTheme = localStorage.getItem(ACCURIBET_THEME_KEY);
+  let storedTheme: Theme | undefined = localStorage.getItem(ACCURIBET_THEME_KEY) as Theme;
+  let preferredTheme: Theme = themeOptions.includes(storedTheme) ? storedTheme : "blackout";
   const [themeStore, setThemeStore] = createStore<IThemeContext>({
-    theme: preferredTheme ? preferredTheme : "blackout",
-    setTheme(theme: string) {
+    theme: preferredTheme,
+    setTheme(theme: Theme) {
       localStorage.setItem(ACCURIBET_THEME_KEY, theme);
       setThemeStore("theme", theme);
     }

diff --git a/ui/src/index.css b/ui/src/index.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:wght@700&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;