diff --git a/ui/package-lock.json b/ui/package-lock.json index 5e61837..bd1f87d 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -24,6 +24,7 @@ "postcss": "^8.4.33", "prettier": "3.2.2", "tailwindcss": "^3.4.1", + "tw-colors": "^3.3.1", "vite": "^5.0.11", "vite-plugin-solid": "^2.8.0" } @@ -1942,6 +1943,19 @@ "node": ">=6" } }, + "node_modules/color": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz", + "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1", + "color-string": "^1.9.0" + }, + "engines": { + "node": ">=12.5.0" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -1958,6 +1972,16 @@ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" }, + "node_modules/color-string": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz", + "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==", + "dev": true, + "dependencies": { + "color-name": "^1.0.0", + "simple-swizzle": "^0.2.2" + } + }, "node_modules/commander": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", @@ -2136,6 +2160,15 @@ "node": ">=8" } }, + "node_modules/flat": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz", + "integrity": "sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==", + "dev": true, + "bin": { + "flat": "cli.js" + } + }, "node_modules/foreground-child": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz", @@ -2277,6 +2310,12 @@ "integrity": "sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA==", "dev": true }, + "node_modules/is-arrayish": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz", + "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==", + "dev": true + }, "node_modules/is-binary-path": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", @@ -2419,6 +2458,12 @@ "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" }, + "node_modules/lodash.foreach": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.foreach/-/lodash.foreach-4.5.0.tgz", + "integrity": "sha512-aEXTF4d+m05rVOAUG3z4vZZ4xVexLKZGF0lIxuHZ1Hplpk/3B6Z1+/ICICYRLm7c41Z2xiejbkCkJoTlypoXhQ==", + "dev": true + }, "node_modules/lru-cache": { "version": "10.1.0", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.1.0.tgz", @@ -2938,6 +2983,15 @@ "node": ">=8" } }, + "node_modules/simple-swizzle": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz", + "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==", + "dev": true, + "dependencies": { + "is-arrayish": "^0.3.1" + } + }, "node_modules/solid-icons": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/solid-icons/-/solid-icons-1.1.0.tgz", @@ -3197,6 +3251,20 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" }, + "node_modules/tw-colors": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/tw-colors/-/tw-colors-3.3.1.tgz", + "integrity": "sha512-PH6NShNtDzPCm6zjl0SZe3kmdYSfDS7Sk4mWa9+KzaeSH1ZmpLRrBjZoBJKaFcDB3o7iuFPPg9+HtW05pGPQyQ==", + "dev": true, + "dependencies": { + "color": "^4.2.3", + "flat": "^5.0.2", + "lodash.foreach": "^4.5.0" + }, + "peerDependencies": { + "tailwindcss": ">=3.0.0" + } + }, "node_modules/undici-types": { "version": "5.26.5", "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", diff --git a/ui/package.json b/ui/package.json index 17f83cf..d52e55c 100644 --- a/ui/package.json +++ b/ui/package.json @@ -21,6 +21,7 @@ "postcss": "^8.4.33", "prettier": "3.2.2", "tailwindcss": "^3.4.1", + "tw-colors": "^3.3.1", "vite": "^5.0.11", "vite-plugin-solid": "^2.8.0" }, diff --git a/ui/src/App.tsx b/ui/src/App.tsx index e42fa31..116c0cc 100644 --- a/ui/src/App.tsx +++ b/ui/src/App.tsx @@ -1,11 +1,22 @@ +import { Component, createSignal } from 'solid-js'; import { Navbar } from '~/components/navbar'; -const App = (props: any) => { +const App: Component = (props: any) => { + let preferredTheme = localStorage.getItem('theme'); + const [theme, setTheme] = createSignal( + preferredTheme ? preferredTheme : 'blackout', + ); + + const changeThemeCallback = (theme: string) => { + setTheme(theme); + localStorage.setItem('theme', theme); + }; + return ( <> -
- -
{props.children}
+
+ + {props.children}
); diff --git a/ui/src/components/display-card.tsx b/ui/src/components/display-card.tsx index 94268bd..bf51338 100644 --- a/ui/src/components/display-card.tsx +++ b/ui/src/components/display-card.tsx @@ -4,6 +4,12 @@ import { GameWithPrediction, Period, Team } from '~/interface'; import { FiClock } from 'solid-icons/fi'; import { IoLocationOutline } from 'solid-icons/io'; import { OcDotfill3 } from 'solid-icons/oc'; +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'; @@ -23,14 +29,8 @@ import { TableHeader, TableRow, } from '~/components/ui/table'; -import { Prediction } from '~/model/prediction.ts'; -import { - AlertDialog, - AlertDialogContent, - AlertDialogDescription, - AlertDialogTitle, -} from '~/components/ui/alert-dialog.tsx'; import { isLive, timeUntilGame } from '~/lib/utils.ts'; +import { Prediction } from '~/model/prediction.ts'; const logos = import.meta.glob('../assets/teams/*.svg', { eager: true }); @@ -67,7 +67,7 @@ const getColorFromStatusAndOutcome = ( return 'bg-red-600'; } } else { - return 'bg-shark-700'; + return 'bg-700'; } }; @@ -106,18 +106,18 @@ export const ScoreTable: Component = (props: ITeamProps) => { return ( - + {(period, _) => ( - + {formatPeriodType(period)} )} - + {(period, _) => ( @@ -136,7 +136,7 @@ export const ScoreTable: Component = (props: ITeamProps) => { export const KeyPlayer: Component = (props: ITeamProps) => { return ( -
+

Key Player - {props.team.name}

{props.team.leader.name}

Points: {props.team.leader.points}

@@ -202,7 +202,7 @@ export const DemoCard: Component = (props: IDisplayCard) => { const [injuryReportOpen, setInjuryReportOpen] = createSignal(false); return ( <> - +
= (props: IDisplayCard) => { prediction={props.game.prediction} game={props.game} /> - + vs = (props: IDisplayCard) => {
-
+
= (props: IDisplayCard) => {

{props.game.home_team.name}

-

+

{props.game.home_team.score.points}

-

{props.game.away_team.name}

-

+

{props.game.away_team.score.points}

@@ -311,7 +311,7 @@ export const DemoCard: Component = (props: IDisplayCard) => { )} >
-

Latest Predictions

+

+ Latest Predictions +

{/* Card components */}
-
-

Featured Games

+
+

+ Featured Games +

{/* Card components */}
-
+

NBA Predictor

- +

Follow Us

@@ -40,4 +46,4 @@ export const Home = () => {
); -}; \ No newline at end of file +}; diff --git a/ui/tailwind.config.ts b/ui/tailwind.config.ts index 6c1baee..2e9148d 100644 --- a/ui/tailwind.config.ts +++ b/ui/tailwind.config.ts @@ -1,26 +1,64 @@ import type { Config } from 'tailwindcss'; +const { createThemes } = require('tw-colors'); export default { darkMode: ['class'], content: ['./src/**/*.{html,js,jsx,md,mdx,ts,tsx}'], presets: [require('./ui.preset.js')], - theme: { - extend: { - colors: { - shark: { - '50': '#f2f2f2', - '100': '#d9d9d9', - '200': '#bfbfbf', - '300': '#a6a6a6', - '400': '#8c8c8c', - '500': '#737373', - '600': '#595959', - '700': '#404040', - '800': '#262626', - '900': '#0d0d0d', - '950': '#000000', - }, + plugins: [ + createThemes({ + light: { + primary: '#ffffff', + secondary: '#efefef', + '800': '#dcdcdc', + '700': '#bdbdbd', + '600': '#989898', + '500': '#7c7c7c', + '400': '#656565', + '300': '#525252', + '200': '#464646', + '100': '#3d3d3d', + '50': '#292929', }, - }, - }, -} satisfies Config; \ No newline at end of file + blackout: { + '50': '#f2f2f2', + '100': '#d9d9d9', + '200': '#bfbfbf', + '300': '#a6a6a6', + '400': '#8c8c8c', + '500': '#737373', + '600': '#595959', + '700': '#404040', + '800': '#262626', + secondary: '#0d0d0d', + primary: '#000000', + }, + logan: { + '50': '#f8f8fa', + '100': '#f2f3f5', + '200': '#e7e6ee', + '300': '#d3d3df', + '400': '#bbb9cc', + '500': '#aaa7bf', + '600': '#8984a3', + '700': '#777190', + '800': '#645e79', + secondary: '#534e64', + primary: '#353342', + }, + lavender: { + '50': '#fbf8fc', + '100': '#f6eef9', + '200': '#f0e0f4', + '300': '#e4c7eb', + '400': '#d2a2de', + '500': '#be7ece', + '600': '#b471c3', + '700': '#944da3', + '800': '#7c4386', + secondary: '#65376c', + primary: '#461e4d', + }, + }), + ], +} satisfies Config;