start: redesign

apps/frontend/src/app.css

@@ -3,103 +3,137 @@
 @tailwind utilities;
 
 @font-face {
-	font-family: "Poppins";
-	src: url("/fonts/Poppins-Thin.ttf") format("truetype");
-	font-weight: 100;
-}
-
-@font-face {
-	font-family: "Poppins";
-	src: url("/fonts/Poppins-ExtraLight.ttf") format("truetype");
-	font-weight: 200;
-}
-
-@font-face {
-	font-family: "Poppins";
-	src: url("/fonts/Poppins-Light.ttf") format("truetype");
-	font-weight: 300;
-}
-
-@font-face {
-	font-family: "Poppins";
-	src: url("/fonts/Poppins-Regular.ttf") format("truetype");
-	font-weight: 400;
-}
-
-@font-face {
-	font-family: "Poppins";
-	src: url("/fonts/Poppins-Medium.ttf") format("truetype");
-	font-weight: 500;
-}
-
-@font-face {
-	font-family: "Poppins";
-	src: url("/fonts/Poppins-SemiBold.ttf") format("truetype");
-	font-weight: 600;
-}
-
-@font-face {
-	font-family: "Poppins";
-	src: url("/fonts/Poppins-Bold.ttf") format("truetype");
-	font-weight: 700;
-}
-
-@font-face {
-	font-family: "Poppins";
-	src: url("/fonts/Poppins-ExtraBold.ttf") format("truetype");
-	font-weight: 800;
-}
-
-@font-face {
-	font-family: "Poppins";
-	src: url("/fonts/Poppins-Black.ttf") format("truetype");
-	font-weight: 900;
+	font-family: "Fredoka";
+	src: url("/fonts/fredoka-variable.ttf") format("truetype");
 }
 
 @layer base {
 	:root {
-		--background: 338 28% 98%;
-		--foreground: 338 5% 10%;
-		--card: 338 28% 98%;
-		--card-foreground: 338 5% 15%;
-		--popover: 338 28% 98%;
-		--popover-foreground: 338 95% 10%;
-		--primary: 338 63% 55.5%;
+		--background: 24 33.3333% 97.0588%;
+		--foreground: 0 0% 10.1961%;
+		--card: 24 33.3333% 97.0588%;
+		--card-foreground: 0 0% 10.1961%;
+		--popover: 24 33.3333% 97.0588%;
+		--popover-foreground: 0 0% 10.1961%;
+		--primary: 0 55.7789% 39.0196%;
 		--primary-foreground: 0 0% 100%;
-		--secondary: 338 28% 90%;
-		--secondary-foreground: 0 0% 0%;
-		--muted: 300 28% 95%;
-		--muted-foreground: 338 5% 40%;
-		--accent: 300 28% 90%;
-		--accent-foreground: 338 5% 15%;
-		--destructive: 0 50% 50%;
-		--destructive-foreground: 338 5% 98%;
-		--border: 338 28% 82%;
-		--input: 338 28% 50%;
-		--ring: 338 63% 55.5%;
-		--radius: 0.75rem;
+		--secondary: 43.0769 90.6977% 91.5686%;
+		--secondary-foreground: 39.8438 100% 25.098%;
+		--muted: 22.5 21.0526% 92.549%;
+		--muted-foreground: 33.3333 5.4545% 32.3529%;
+		--accent: 48 96.4912% 88.8235%;
+		--accent-foreground: 0 62.8205% 30.5882%;
+		--destructive: 0 70% 35.2941%;
+		--destructive-foreground: 0 0% 100%;
+		--border: 37.7143 63.6364% 89.2157%;
+		--input: 37.7143 63.6364% 89.2157%;
+		--ring: 0 55.7789% 39.0196%;
+		--chart-1: 0 73.7089% 41.7647%;
+		--chart-2: 0 55.7789% 39.0196%;
+		--chart-3: 0 62.8205% 30.5882%;
+		--chart-4: 25.9649 90.4762% 37.0588%;
+		--chart-5: 22.7273 82.5% 31.3725%;
+		--sidebar: 22.5 21.0526% 92.549%;
+		--sidebar-foreground: 0 0% 10.1961%;
+		--sidebar-primary: 0 55.7789% 39.0196%;
+		--sidebar-primary-foreground: 0 0% 100%;
+		--sidebar-accent: 48 96.4912% 88.8235%;
+		--sidebar-accent-foreground: 0 62.8205% 30.5882%;
+		--sidebar-border: 37.7143 63.6364% 89.2157%;
+		--sidebar-ring: 0 55.7789% 39.0196%;
+		--font-sans: Poppins, sans-serif;
+		--font-serif: Libre Baskerville, serif;
+		--font-mono: IBM Plex Mono, monospace;
+		--radius: 0.375rem;
+		--shadow-x: 1px;
+		--shadow-y: 1px;
+		--shadow-blur: 16px;
+		--shadow-spread: -2px;
+		--shadow-opacity: 0.12;
+		--shadow-color: hsl(0 63% 18%);
+		--shadow-2xs: 1px 1px 16px -2px hsl(0 63% 18% / 0.06);
+		--shadow-xs: 1px 1px 16px -2px hsl(0 63% 18% / 0.06);
+		--shadow-sm:
+			1px 1px 16px -2px hsl(0 63% 18% / 0.12),
+			1px 1px 2px -3px hsl(0 63% 18% / 0.12);
+		--shadow:
+			1px 1px 16px -2px hsl(0 63% 18% / 0.12),
+			1px 1px 2px -3px hsl(0 63% 18% / 0.12);
+		--shadow-md:
+			1px 1px 16px -2px hsl(0 63% 18% / 0.12),
+			1px 2px 4px -3px hsl(0 63% 18% / 0.12);
+		--shadow-lg:
+			1px 1px 16px -2px hsl(0 63% 18% / 0.12),
+			1px 4px 6px -3px hsl(0 63% 18% / 0.12);
+		--shadow-xl:
+			1px 1px 16px -2px hsl(0 63% 18% / 0.12),
+			1px 8px 10px -3px hsl(0 63% 18% / 0.12);
+		--shadow-2xl: 1px 1px 16px -2px hsl(0 63% 18% / 0.3);
+		--tracking-normal: 0em;
+		--spacing: 0.25rem;
 	}
+
 	.dark {
-		--background: 338 28% 10%;
-		--foreground: 338 5% 98%;
-		--card: 338 28% 10%;
-		--card-foreground: 338 5% 98%;
-		--popover: 338 28% 5%;
-		--popover-foreground: 338 5% 98%;
-		--primary: 338 63% 55.5%;
-		--primary-foreground: 0 0% 100%;
-		--secondary: 338 28% 20%;
-		--secondary-foreground: 0 0% 100%;
-		--muted: 300 28% 25%;
-		--muted-foreground: 338 5% 65%;
-		--accent: 300 28% 25%;
-		--accent-foreground: 338 5% 95%;
-		--destructive: 0 50% 50%;
-		--destructive-foreground: 338 5% 98%;
-		--border: 338 28% 50%;
-		--input: 338 28% 50%;
-		--ring: 338 63% 55.5%;
-		--radius: 0.75rem;
+		--background: 24 9.8039% 10%;
+		--foreground: 60 4.7619% 95.8824%;
+		--card: 12 6.4935% 15.098%;
+		--card-foreground: 60 4.7619% 95.8824%;
+		--popover: 12 6.4935% 15.098%;
+		--popover-foreground: 60 4.7619% 95.8824%;
+		--primary: 0 73.7089% 41.7647%;
+		--primary-foreground: 24 33.3333% 97.0588%;
+		--secondary: 22.7273 82.5% 31.3725%;
+		--secondary-foreground: 48 96.4912% 88.8235%;
+		--muted: 24 8.7719% 11.1765%;
+		--muted-foreground: 24 5.7471% 82.9412%;
+		--accent: 25.9649 90.4762% 37.0588%;
+		--accent-foreground: 48 96.4912% 88.8235%;
+		--destructive: 0 84.2365% 60.1961%;
+		--destructive-foreground: 0 0% 100%;
+		--border: 30 6.25% 25.098%;
+		--input: 30 6.25% 25.098%;
+		--ring: 0 73.7089% 41.7647%;
+		--chart-1: 0 90.604% 70.7843%;
+		--chart-2: 0 84.2365% 60.1961%;
+		--chart-3: 0 72.2222% 50.5882%;
+		--chart-4: 43.2558 96.4126% 56.2745%;
+		--chart-5: 37.6923 92.126% 50.1961%;
+		--sidebar: 24 9.8039% 10%;
+		--sidebar-foreground: 60 4.7619% 95.8824%;
+		--sidebar-primary: 0 73.7089% 41.7647%;
+		--sidebar-primary-foreground: 24 33.3333% 97.0588%;
+		--sidebar-accent: 25.9649 90.4762% 37.0588%;
+		--sidebar-accent-foreground: 48 96.4912% 88.8235%;
+		--sidebar-border: 30 6.25% 25.098%;
+		--sidebar-ring: 0 73.7089% 41.7647%;
+		--font-sans: Poppins, sans-serif;
+		--font-serif: Libre Baskerville, serif;
+		--font-mono: IBM Plex Mono, monospace;
+		--radius: 0.375rem;
+		--shadow-x: 1px;
+		--shadow-y: 1px;
+		--shadow-blur: 16px;
+		--shadow-spread: -2px;
+		--shadow-opacity: 0.12;
+		--shadow-color: hsl(0 63% 18%);
+		--shadow-2xs: 1px 1px 16px -2px hsl(0 63% 18% / 0.06);
+		--shadow-xs: 1px 1px 16px -2px hsl(0 63% 18% / 0.06);
+		--shadow-sm:
+			1px 1px 16px -2px hsl(0 63% 18% / 0.12),
+			1px 1px 2px -3px hsl(0 63% 18% / 0.12);
+		--shadow:
+			1px 1px 16px -2px hsl(0 63% 18% / 0.12),
+			1px 1px 2px -3px hsl(0 63% 18% / 0.12);
+		--shadow-md:
+			1px 1px 16px -2px hsl(0 63% 18% / 0.12),
+			1px 2px 4px -3px hsl(0 63% 18% / 0.12);
+		--shadow-lg:
+			1px 1px 16px -2px hsl(0 63% 18% / 0.12),
+			1px 4px 6px -3px hsl(0 63% 18% / 0.12);
+		--shadow-xl:
+			1px 1px 16px -2px hsl(0 63% 18% / 0.12),
+			1px 8px 10px -3px hsl(0 63% 18% / 0.12);
+		--shadow-2xl: 1px 1px 16px -2px hsl(0 63% 18% / 0.3);
 	}
 }
 
@@ -112,7 +146,7 @@
 		@apply bg-background text-foreground;
 		scroll-behavior: smooth;
 		font-family:
-			"Poppins",
+			"Fredoka",
 			system-ui,
 			-apple-system,
 			BlinkMacSystemFont,

apps/frontend/src/routes/(main)/+layout.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { onMount } from "svelte";
-	import { trpcApiStore, svTrpcApiStore } from "$lib/stores/api";
-	import { trpc, trpcRaw } from "$lib/trpc/trpc";
-	import { sessionInfo, sessionUserInfo } from "$lib/stores/session.info";
-	import type { LayoutData } from "./$types";
-	import Navbar from "$lib/components/molecules/navbar/navbar.svelte";
-	import Footer from "$lib/components/molecules/footer/footer.svelte";
-	import { currencyVM } from "$lib/domains/currency/view/currency.vm.svelte";
 	import Icon from "$lib/components/atoms/icon.svelte";
+	import Footer from "$lib/components/molecules/footer/footer.svelte";
+	import Navbar from "$lib/components/molecules/navbar/navbar.svelte";
+	import { currencyVM } from "$lib/domains/currency/view/currency.vm.svelte";
+	import { svTrpcApiStore, trpcApiStore } from "$lib/stores/api";
+	import { sessionInfo, sessionUserInfo } from "$lib/stores/session.info";
+	import { trpc, trpcRaw } from "$lib/trpc/trpc";
+	import { onMount } from "svelte";
 	import UpIcon from "~icons/material-symbols/keyboard-double-arrow-up-rounded";
+	import type { LayoutData } from "./$types";
 
 	let {
 		children,

apps/frontend/tailwind.config.ts

@@ -1,9 +1,9 @@
-import { fontFamily } from "tailwindcss/defaultTheme";
-import type { Config } from "tailwindcss";
-import twTypography from "@tailwindcss/typography";
 import twContainerQueries from "@tailwindcss/container-queries";
 import twForms from "@tailwindcss/forms";
+import twTypography from "@tailwindcss/typography";
+import type { Config } from "tailwindcss";
 import twAnimation from "tailwindcss-animate";
+import { fontFamily } from "tailwindcss/defaultTheme";
 
 const config: Config = {
 	darkMode: ["class"],
@@ -93,7 +93,7 @@ const config: Config = {
 				sm: "calc(var(--radius) - 4px)",
 			},
 			fontFamily: {
-				sans: [...fontFamily.sans],
+				sans: ["Fredoka", ...fontFamily.sans],
 			},
 			keyframes: {
 				"accordion-down": {