Add frontend component library daisyUI

JensForstmann · Oct 9, 2023 · de25364 · de25364
1 parent 5261d63
commit de25364
Show file tree

Hide file tree

Showing 32 changed files with 586 additions and 294 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -12,7 +12,7 @@
 		<link rel="manifest" href="/src/assets/site.webmanifest" />
 		<meta name="theme-color" content="#0c4a6e" />
 	</head>
-	<body class="bg-zinc-300 text-neutral-800 dark:bg-zinc-800 dark:text-neutral-200">
+	<body>
 		<noscript>You need to enable JavaScript to run this app.</noscript>
 		<div id="root"></div>
 		<script src="/src/index.tsx" type="module"></script>

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -13,7 +13,9 @@
 		"@formkit/auto-animate": "^0.8.0",
 		"@solid-primitives/scheduled": "^1.4.1",
 		"@solidjs/router": "^0.8.3",
+		"@tailwindcss/typography": "^0.5.10",
 		"autoprefixer": "^10.4.16",
+		"daisyui": "^3.9.2",
 		"postcss": "^8.4.31",
 		"solid-js": "^1.7.12",
 		"tailwindcss": "^3.3.3",

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,44 +1,35 @@
-import { Link, LinkProps, Route, Routes, useLocation } from '@solidjs/router';
+import { Link, LinkProps, Route, Routes } from '@solidjs/router';
 import { Component, Match, Switch, onMount } from 'solid-js';
-import { SvgComputer, SvgDarkMode, SvgFlagDE, SvgFlagUS, SvgLightMode } from './assets/Icons';
+import { SvgComputer, SvgDarkMode, SvgLightMode } from './assets/Icons';
 import logo from './assets/logo.svg';
 import { CreatePage } from './pages/create';
+import { GameServersPage } from './pages/gameServers';
 import { LoginPage } from './pages/login';
 import { LogoutPage } from './pages/logout';
 import { MatchPage } from './pages/match';
 import { MatchEditPage } from './pages/matchEdit';
 import { MatchesPage } from './pages/matches';
 import { NotFoundPage } from './pages/notFound';
 import { isLoggedIn } from './utils/fetcher';
-import { currentLocale, cycleLocale, t } from './utils/locale';
+import { t } from './utils/locale';
 import { currentTheme, cycleDarkMode, updateDarkClasses } from './utils/theme';
-import { GameServersPage } from './pages/gameServers';
 
 const NavLink = (props: LinkProps) => {
-	const l = useLocation();
-
 	return (
-		<Link
-			{...props}
-			class={
-				l.pathname === props.href
-					? 'rounded-md bg-gray-900 px-3 py-2 text-sm font-medium text-white'
-					: 'rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white'
-			}
-		>
+		<Link {...props} class="btn btn-ghost hover:no-underline">
 			{props.children}
 		</Link>
 	);
 };
 
 const NavBar: Component = () => {
 	return (
-		<nav class="flex h-12 items-center justify-center space-x-1 bg-gray-800 lg:space-x-10">
+		<nav class="bg-base-300 flex items-center justify-center space-x-1 p-2 lg:space-x-10">
 			<div class="w-1 lg:w-20"></div>
 			<div>
 				<img class="mr-1 inline-block h-10 w-auto align-middle" src={logo} alt="Logo" />
-				<div class="inline-block align-middle text-xs text-teal-400 lg:hidden">TMT</div>
-				<div class="hidden align-middle text-xs text-teal-400 lg:inline-block">
+				<div class="inline-block align-middle text-xs lg:hidden">TMT</div>
+				<div class="hidden align-middle text-xs lg:inline-block">
 					Tournament
 					<br />
 					MatchTracker
@@ -61,17 +52,17 @@ const NavBar: Component = () => {
 			<div onClick={() => cycleDarkMode()}>
 				<Switch>
 					<Match when={currentTheme() === 'system'}>
-						<SvgComputer class="cursor-pointer fill-gray-300 hover:fill-white" />
+						<SvgComputer class="fill-base-content cursor-pointer" />
 					</Match>
 					<Match when={currentTheme() === 'dark'}>
-						<SvgDarkMode class="cursor-pointer fill-gray-300 hover:fill-white" />
+						<SvgDarkMode class="fill-base-content cursor-pointer" />
 					</Match>
 					<Match when={currentTheme() === 'light'}>
-						<SvgLightMode class="cursor-pointer fill-gray-300 hover:fill-white" />
+						<SvgLightMode class="fill-base-content cursor-pointer" />
 					</Match>
 				</Switch>
 			</div>
-			<div onClick={() => cycleLocale()}>
+			{/* <div onClick={() => cycleLocale()}>
 				<Switch>
 					<Match when={currentLocale() === 'de'}>
 						<SvgFlagDE class="h-6 w-auto cursor-pointer" />
@@ -80,7 +71,7 @@ const NavBar: Component = () => {
 						<SvgFlagUS class="h-6 w-auto cursor-pointer" />
 					</Match>
 				</Switch>
-			</div>
+			</div> */}
 			<div class="w-1 lg:w-20"></div>
 		</nav>
 	);
@@ -90,7 +81,7 @@ export const App: Component = () => {
 	onMount(updateDarkClasses);
 	return (
 		<>
-			<header class="sticky top-0 z-10">
+			<header class="sticky top-0 z-10 pb-8">
 				<NavBar />
 			</header>
 			<main class="container mx-auto px-4">
@@ -105,7 +96,7 @@ export const App: Component = () => {
 					<Route path="/*" element={<NotFoundPage />} />
 				</Routes>
 			</main>
-			<footer></footer>
+			<footer class="pt-8"></footer>
 		</>
 	);
 };