fix: Colors of text and cards failure, found config bugs (#17)

* fix: Colors of text and cards failure, found config bugs * feat: Add color and themes to site and fix theme bugs * feat: css bases, themes * css base * feat: sidebar icon colors * fix: Wording of import export buttons in settings --------- Co-authored-by: Pigeon <[email protected]>
dval-in · Jan 7, 2024 · 03dc2d9 · 03dc2d9
1 parent be70023
commit 03dc2d9
Show file tree

Hide file tree

Showing 10 changed files with 143 additions and 73 deletions.
diff --git a/src/lib/components/navigator/Sidebar.svelte b/src/lib/components/navigator/Sidebar.svelte
@@ -62,12 +62,14 @@
 
 <div
 	class={`sidebar hide-scrollbar scroll-smooth overflow-scroll fixed w-full lg:w-64 h-full flex-col items-center z-50 bg-sidebar ${
-	isMobile ? 'flex' : 'hidden lg:flex'
-}`}
+		isMobile ? 'flex' : 'hidden lg:flex'
+	}`}
 >
 	{#if !isMobile}
 		<a href="/" class="relative py-2 items-left w-full">
-			<h1 class="font-display text-3xl font-black text-white py-4 relative z-10">dval.in</h1>
+			<h1 class="font-display text-3xl font-black text-fill-sidebarText py-4 relative z-10">
+				dval.in
+			</h1>
 		</a>
 	{/if}
 	{#if isMobile}
@@ -77,85 +79,156 @@
 				class="cursor-pointer bg-transparent"
 				on:click={closeNavigator}
 			>
-				<Icon path={mdiCloseCircle} size={2} color="white" className="mb-8 mt-4 opacity-75" />
+				<Icon
+					path={mdiCloseCircle}
+					size={2}
+					color="fill-sidebarText group-hover:fill-white"
+					className="mb-8 mt-4 opacity-75"
+				/>
 			</Button>
 		</div>
 	{/if}
 	<Button variant={segment === 'wish' ? 'activeSidebar' : 'sidebar'} href="wish"
-		><Icon path={mdiStar} color="white" size={1} />Wish Counter</Button
+		><Icon path={mdiStar} color="fill-sidebarText group-hover:fill-white" size={1} />Wish Counter</Button
 	>
 	<Collapsible open={get(showSidebarSections)[0]} class="w-full">
 		<CollapsibleTrigger class="w-full">
 			<Button on:click={() => rightClicked(0)} variant={'headerSidebar'}
-				><Icon path={collapseStatusIcon[0]} color="white" size={1} />Your Collection</Button
+				><Icon
+					path={collapseStatusIcon[0]}
+					color="fill-sidebarText group-hover:fill-white"
+					size={1}
+				/>Your Collection</Button
 			>
 		</CollapsibleTrigger>
 		<CollapsibleContent>
 			<Button variant={segment === 'characters' ? 'activeSidebar' : 'sidebar'} href="characters"
-				><Icon path={mdiAccountMultiple} color="white" size={1} />Characters</Button
+				><Icon
+					path={mdiAccountMultiple}
+					color="fill-sidebarText group-hover:fill-white"
+					size={1}
+				/>Characters</Button
 			>
 			<Button variant={segment === 'weapons' ? 'activeSidebar' : 'sidebar'} href="weapons"
-				><Icon path={mdiSwordCross} color="white" size={1} />Weapons</Button
+				><Icon
+					path={mdiSwordCross}
+					color="fill-sidebarText group-hover:fill-white"
+					size={1}
+				/>Weapons</Button
 			>
 			<Button variant={segment === 'inventory' ? 'activeSidebar' : 'sidebar'} href="inventory"
-				><Icon path={mdiBagPersonal} color="white" size={1} />Inventory</Button
+				><Icon
+					path={mdiBagPersonal}
+					color="fill-sidebarText group-hover:fill-white"
+					size={1}
+				/>Inventory</Button
 			>
 		</CollapsibleContent>
 	</Collapsible>
 	<Collapsible open={get(showSidebarSections)[1]} class="w-full">
 		<CollapsibleTrigger class="w-full">
 			<Button on:click={() => rightClicked(1)} variant={'headerSidebar'}
-				><Icon path={collapseStatusIcon[1]} color="white" size={1} />Trackers</Button
+				><Icon
+					path={collapseStatusIcon[1]}
+					color="fill-sidebarText group-hover:fill-white"
+					size={1}
+				/>Trackers</Button
 			>
 		</CollapsibleTrigger>
 		<CollapsibleContent>
 			<Button variant={segment === 'todo' ? 'activeSidebar' : 'sidebar'} href="todo"
-				><Icon path={mdiClipboardTextOutline} color="white" size={1} />To-Do</Button
+				><Icon
+					path={mdiClipboardTextOutline}
+					color="fill-sidebarText group-hover:fill-white"
+					size={1}
+				/>To-Do</Button
 			>
 			<Button variant={segment === 'ascension' ? 'activeSidebar' : 'sidebar'} href="ascension"
-				><Icon path={mdiStarOutline} color="white" size={1} />Ascension</Button
+				><Icon
+					path={mdiStarOutline}
+					color="fill-sidebarText group-hover:fill-white"
+					size={1}
+				/>Ascension</Button
 			>
 			<Button variant={segment === 'fishing' ? 'activeSidebar' : 'sidebar'} href="fishing"
-				><Icon path={mdiFish} color="white" size={1} />Fishing</Button
+				><Icon
+					path={mdiFish}
+					color="fill-sidebarText group-hover:fill-white"
+					size={1}
+				/>Fishing</Button
 			>
 			<Button variant={segment === 'furnishing' ? 'activeSidebar' : 'sidebar'} href="furnishing"
-				><Icon path={mdiBedKing} color="white" size={1} />Furnishing</Button
+				><Icon
+					path={mdiBedKing}
+					color="fill-sidebarText group-hover:fill-white"
+					size={1}
+				/>Furnishing</Button
 			>
 			<Button variant={segment === 'achievement' ? 'activeSidebar' : 'sidebar'} href="achievement"
-				><Icon path={mdiPartyPopper} color="white" size={1} />Achievement</Button
+				><Icon
+					path={mdiPartyPopper}
+					color="fill-sidebarText group-hover:fill-white"
+					size={1}
+				/>Achievement</Button
 			>
 			<Button variant={segment === 'books' ? 'activeSidebar' : 'sidebar'} href="books"
-				><Icon path={mdiBookshelf} color="white" size={1} />Books</Button
+				><Icon
+					path={mdiBookshelf}
+					color="fill-sidebarText group-hover:fill-white"
+					size={1}
+				/>Books</Button
 			>
 			<Button variant={segment === 'recipes' ? 'activeSidebar' : 'sidebar'} href="recipes"
-				><Icon path={mdiFood} color="white" size={1} />Recipes</Button
+				><Icon
+					path={mdiFood}
+					color="fill-sidebarText group-hover:fill-white"
+					size={1}
+				/>Recipes</Button
 			>
 			<Button
 				variant={segment === 'spin-crystals' ? 'activeSidebar' : 'sidebar'}
-				href="spin-crystals"><Icon path={mdiDisc} color="white" size={1} />Spin Crystals</Button
+				href="spin-crystals"
+				><Icon path={mdiDisc} color="fill-sidebarText group-hover:fill-white" size={1} />Spin
+				Crystals</Button
 			>
 		</CollapsibleContent>
 	</Collapsible>
 	<Collapsible open={get(showSidebarSections)[2]} class="w-full">
 		<CollapsibleTrigger class="w-full">
 			<Button on:click={() => rightClicked(2)} variant={'headerSidebar'}
-				><Icon path={collapseStatusIcon[2]} color="white" size={1} />Tools</Button
+				><Icon
+					path={collapseStatusIcon[2]}
+					color="fill-sidebarText group-hover:fill-white"
+					size={1}
+				/>Tools</Button
 			>
 		</CollapsibleTrigger>
 		<CollapsibleContent>
 			<Button variant={segment === 'reminder' ? 'activeSidebar' : 'sidebar'} href="reminder"
-				><Icon path={mdiAlarm} color="white" size={1} />Reminder</Button
+				><Icon
+					path={mdiAlarm}
+					color="fill-sidebarText group-hover:fill-white"
+					size={1}
+				/>Reminder</Button
 			>
 			<Button variant={segment === 'timeline' ? 'activeSidebar' : 'sidebar'} href="timeline"
-				><Icon path={mdiChartTimeline} color="white" size={1} />Timeline</Button
+				><Icon
+					path={mdiChartTimeline}
+					color="fill-sidebarText group-hover:fill-white"
+					size={1}
+				/>Timeline</Button
 			>
 			<Button variant={segment === 'tcg' ? 'activeSidebar' : 'sidebar'} href="tcg"
-				><Icon path={mdiCards} color="white" size={1} />TCG</Button
+				><Icon
+					path={mdiCards}
+					color="fill-sidebarText group-hover:fill-white"
+					size={1}
+				/>TCG</Button
 			>
 		</CollapsibleContent>
 	</Collapsible>
 	<br />
 	<Button variant={segment === 'settings' ? 'activeSidebar' : 'sidebar'} href="settings"
-		><Icon path={mdiCog} color="white" size={1} />Settings</Button
+		><Icon path={mdiCog} color="fill-sidebarText group-hover:fill-white" size={1} />Settings</Button
 	>
-</div>
+</div>
diff --git a/src/lib/components/ui/button/index.ts b/src/lib/components/ui/button/index.ts
@@ -3,7 +3,7 @@ import { tv, type VariantProps } from 'tailwind-variants';
 import type { Button as ButtonPrimitive } from 'bits-ui';
 
 const buttonVariants = tv({
-	base: 'inline-flex items-center rounded-md text-sm font-medium whitespace-nowrap ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+	base: 'inline-flex items-center rounded-md text-sm font-medium whitespace-nowrap ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group',
 	variants: {
 		variant: {
 			default: 'justify-center bg-primary text-primary-foreground hover:bg-primary/90',
@@ -15,11 +15,11 @@ const buttonVariants = tv({
 			ghost: 'justify-center hover:bg-accent hover:text-accent-foreground',
 			link: 'justify-center text-primary underline-offset-4 hover:underline',
 			sidebar:
-				'bg-sidebar justify-center ml-0 text-fill lg:justify-start lg:ml-8 hover:text-white hover:bg-primary/90 w-full',
+				'bg-sidebar justify-center ml-0 text-sidebarText lg:justify-start lg:ml-8 hover:text-white hover:bg-primary/90 w-full',
 			activeSidebar:
-				'bg-activeSidebar justify-center ml-0 text-fill lg:justify-start lg:ml-8 hover:text-white hover:bg-primary/90 w-full',
+				'bg-activeSidebar justify-center ml-0 text-sidebarText/110 lg:justify-start lg:ml-8 hover:text-white hover:bg-primary/90 w-full',
 			headerSidebar:
-				'justify-center bg-sidebar text-fill/50 w-full lg:justify-start hover:text-fill/80',
+				'justify-center bg-black/10 text-sidebarText/80 w-full lg:justify-start hover:text-white',
 			navigatorClose: 'justify-center bg-transparent'
 		},
 		size: {
@@ -54,4 +54,4 @@ export {
 	type Props as ButtonProps,
 	type Events as ButtonEvents,
 	buttonVariants
-};
+};
diff --git a/src/lib/components/ui/card/card-description.svelte b/src/lib/components/ui/card/card-description.svelte
@@ -8,6 +8,6 @@
 	export { className as class };
 </script>
 
-<p class={cn('text-sm text-sidebar', className)} {...$$restProps}>
+<p class={cn('text-sm text-text', className)} {...$$restProps}>
 	<slot />
 </p>
diff --git a/src/lib/components/ui/card/card.svelte b/src/lib/components/ui/card/card.svelte
@@ -8,9 +8,6 @@
 	export { className as class };
 </script>
 
-<div
-	class={cn('rounded-lg border bg-foreground text-sidebar shadow-sm', className)}
-	{...$$restProps}
->
+<div class={cn('rounded-lg border bg-foreground text-text shadow-sm', className)} {...$$restProps}>
 	<slot />
-</div>
+</div>
diff --git a/src/lib/components/ui/icon/icon.svelte b/src/lib/components/ui/icon/icon.svelte
@@ -22,10 +22,7 @@
 			styles.push(['width', width]);
 			styles.push(['height', width]);
 		}
-		styles.push(['fill', color !== null ? color : 'currentColor']);
-		if (flip === true || flip === 'h') {
-			transform.push('scaleX(-1)');
-		}
+
 		if (flip === true || flip === 'v') {
 			transform.push('scaleY(-1)');
 		}
@@ -46,7 +43,7 @@
 	$: style = getStyles();
 </script>
 
-<svg viewBox="0 0 24 24" {style} class={className}>
+<svg viewBox="0 0 24 24" {style} class="{className} {color}">
 	{#if title}
 		<title>{title}</title>
 	{/if}

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -10,7 +10,7 @@
 	$: segment = $page.url.pathname.substring(1).split('/')[0];
 </script>
 
-<html lang="en" class="{themeClass} bg-background min-h-screen">
+<html lang="en" class="{themeClass} text-text bg-background min-h-screen">
 	<div id="main" class="h-full">
 		<Header />
 		<!--  Sidebar navigator for large screen-->
@@ -24,4 +24,4 @@
 			<slot />
 		</div>
 	</div>
-</html>
+</html>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,2 +1 @@
-<h1 class="text-3xl font-bold underline">Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+src/routes/homepage/+page.svelte
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
@@ -4,7 +4,6 @@
 	import { settings } from '$lib/store/global_state';
 	import { get } from 'svelte/store';
 	import { type Settings, Convert as SettingsConvertor } from '$lib/structs/settings';
-	let category_on: string
 
 	enum SettingFileMode {
 		Import,
@@ -54,29 +53,30 @@
 			n.global.theme = themeNumber;
 			return n;
 		});
-		location.reload()
+		location.reload();
 	}
 </script>
-{#key category_on}
+
 <div>
 	<div class="flex flex-col gap-y-3">
 		<!--Here is the User Settings region-->
 		<Card.Root>
 			<Card.Header>
 				<!--TODO: Replace this with i18n key-->
-				<Card.Title>User Settings</Card.Title>
+				<Card.Title style="font-size: 21px"><b><u>User Settings</u></b></Card.Title>
 			</Card.Header>
 			<Card.Content>
-				<div class="rounded-xl border-2 border-border">
+				<div class="rounded-xl border-2 border-border bg-black/20">
+					<p style="font-size: 18px"><b><u> Themes </u></b></p>
+					<br />
 					<input
 						type="radio"
 						id="option1"
 						name="theme"
 						value="option1"
 						on:click={() => themeChange(0)}
-						bind:group={category_on}
 					/>
-					<label for="option1">Blue</label>
+					<label for="option1">Fontaine</label>
 					<br />
 
 					<input
@@ -85,9 +85,8 @@
 						name="theme"
 						value="option2"
 						on:click={() => themeChange(1)}
-						bind:group={category_on}
 					/>
-					<label for="option2">Green</label>
+					<label for="option2">Sumeru</label>
 					<br />
 
 					<input
@@ -97,33 +96,39 @@
 						value="option3"
 						on:click={() => themeChange(2)}
 					/>
-					<label for="option3">Yellow</label>
+					<label for="option3">Liyue</label>
+				</div>
+			</Card.Content>
+			<Card.Content>
+				<div class="rounded-xl border-2 border-green-500 bg-black/20">
+					<p style="font-size: 18px"><b><u> Accessibility </u></b></p>
+					<br />
+					<label for="option1">Increase Font Size</label>
 				</div>
 			</Card.Content>
 		</Card.Root>
 		<!--Here is the Global Settings region-->
 		<Card.Root>
 			<Card.Header>
 				<!--TODO: Replace this with i18n key-->
-				<Card.Title>Global Settings</Card.Title>
+				<Card.Title style="font-size: 21px"><b><u>Global Settings</u></b></Card.Title>
 			</Card.Header>
 			<Card.Content>
-				<div class="rounded-xl border-2 border-red-500">
+				<div class="rounded-xl border-2 border-red-500 bg-black/20">
 					<Button
 						class="m-2"
 						variant="destructive"
 						on:click={() => handleSettingFileSelect(SettingFileMode.Import)}
-						>Import settings from file</Button
+						><u>Import Data</u></Button
 					>
 					<Button
 						class="m-2"
 						variant="default"
 						on:click={() => handleSettingFileSelect(SettingFileMode.Export)}
-						>Export settings to file</Button
+						><u>Export Data<u></u></u></Button
 					>
 				</div>
 			</Card.Content>
 		</Card.Root>
 	</div>
-</div>
-{/key}
+</div>