fix: Button and Coloring QoLs and hovering problems (#24)

* 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 * fix: Button and Coloring QoLs and hovering problems --------- Co-authored-by: Pigeon <[email protected]>
dval-in · Jan 7, 2024 · 76c4003 · 76c4003
1 parent 03dc2d9
commit 76c4003
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 22 deletions.
diff --git a/src/lib/components/ui/button/index.ts b/src/lib/components/ui/button/index.ts
@@ -6,16 +6,16 @@ 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 group',
 	variants: {
 		variant: {
-			default: 'justify-center bg-primary text-primary-foreground hover:bg-primary/90',
+			default: 'justify-center bg-primary text-primary-foreground hover:bg-fill/20',
 			destructive:
-				'justify-center bg-destructive text-destructive-foreground hover:bg-destructive/90',
+				'justify-center bg-destructive text-destructive-foreground hover:bg-fill/20',
 			outline:
-				'justify-center border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-			secondary: 'justify-center bg-secondary text-secondary-foreground hover:bg-secondary/80',
+				'justify-center border border-input bg-background hover:bg-accent hover:bg-fill/20',
+			secondary: 'justify-center bg-secondary text-secondary-foreground hover:bg-fill/20',
 			ghost: 'justify-center hover:bg-accent hover:text-accent-foreground',
-			link: 'justify-center text-primary underline-offset-4 hover:underline',
+			link: 'justify-center text-primary underline-offset-4 hover:bg-fill/20',
 			sidebar:
-				'bg-sidebar justify-center ml-0 text-sidebarText 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-fill/20 w-full',
 			activeSidebar:
 				'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:
@@ -26,7 +26,7 @@ const buttonVariants = tv({
 			default: 'h-10 px-4 py-2',
 			sm: 'h-9 rounded-md px-3',
 			lg: 'h-11 rounded-md px-8',
-			icon: 'h-10 w-10'
+			icon: 'h-10 w-10',
 		}
 	},
 	defaultVariants: {

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1 +1,23 @@
-src/routes/homepage/+page.svelte
+<script lang="ts">
+	import * as Card from '$lib/components/ui/card';
+	import { Button } from '$lib/components/ui/button';
+	import { settings } from '$lib/store/global_state';
+	import { get } from 'svelte/store';
+	import { type Settings, Convert as SettingsConvertor } from '$lib/structs/settings';
+</script>
+
+<div class="col-span-2 row-span-2">
+         <Card.Root class="size-full text-white flex flex-col">
+             <Card.Header>
+                 <!--TODO: Replace this with i18n key-->
+                 <Card.Title>Changelog:</Card.Title>
+             </Card.Header>
+             <Card.Content class="flex-1">
+                 <p class="whitespace-pre-line">Changelog TXT</p>
+             </Card.Content>
+             <Card.Footer class="flex-1 items-end justify-end">
+                 <Button variant="default" class="rounded-xl border-2 border-gray-600">More</Button>
+                 <Button variant="link" class="rounded-xl border-2 border-gray-600 ml-5">Hide</Button>
+             </Card.Footer>
+         </Card.Root>
+</div>
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -3,7 +3,7 @@ import { createThemes } from 'tw-colors';
 /* eslint-disable @typescript-eslint/naming-convention */
 /** @type {import('tailwindcss').Config} */
 const config = {
-	darkMode: ['class'],
+    darkMode: ['class'],
 	content: ['./src/**/*.{html,js,svelte,ts}'],
 	corePlugins: {
 		preflight: true
@@ -27,8 +27,8 @@ const config = {
 			},
 			fontFamily: {
 				sans: [...fontFamily.sans]
-			}
-		}
+		    }
+        },
 	},
 	plugins: [
 		createThemes(
@@ -45,22 +45,22 @@ const config = {
 				},
 				t1: {
 					border: '#000000',
-					text: '#ffffff',
-					background: '#304b42',
-					foreground: '#13644d',
+					text: '#FFFFFF',
+					background: '#304B42',
+					foreground: '#13644D',
 					activeSidebar: '#000000',
-					sidebarText: '#97c9a1',
-					fill: '#b7e4c7',
-					sidebar: '#081c15'
+					sidebarText: '#97C9A1',
+					fill: '#B7E4C7',
+					sidebar: '#081C15'
 				},
 				t2: {
 					border: '#000000',
 					text: '#000000',
-					background: '#cdab4a',
-					foreground: '#d2b45e',
-					activeSidebar: '#c09b28',
-					sidebarText: '#27200b',
-					sidebar: '#9e812c'
+					background: '#CDAB4A',
+					foreground: '#D2B45E',
+					activeSidebar: '#C09B28',
+					sidebarText: '#27200B',
+					sidebar: '#9E812C'
 				}
 			},
 			{