From a02ea8e85d789d5acca9922b61222233bbc09ec6 Mon Sep 17 00:00:00 2001 From: Murillo Pinheiro de Oliveira Date: Tue, 6 Feb 2024 23:41:43 -0300 Subject: layout fixes --- src/app.css | 99 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 99 insertions(+) (limited to 'src/app.css') diff --git a/src/app.css b/src/app.css index 3f0cbbd0..307df282 100644 --- a/src/app.css +++ b/src/app.css @@ -1,6 +1,81 @@ @tailwind base; @tailwind components; @tailwind utilities; + +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 224 71.4% 4.1%; + + --muted: 220 14.3% 95.9%; + --muted-foreground: 220 8.9% 46.1%; + + --popover: 0 0% 100%; + --popover-foreground: 224 71.4% 4.1%; + + --card: 0 0% 100%; + --card-foreground: 224 71.4% 4.1%; + + --border: 220 13% 91%; + --input: 220 13% 91%; + + --primary: 220.9 39.3% 11%; + --primary-foreground: 210 20% 98%; + + --secondary: 220 14.3% 95.9%; + --secondary-foreground: 220.9 39.3% 11%; + + --accent: 220 14.3% 95.9%; + --accent-foreground: 220.9 39.3% 11%; + + --destructive: 0 72.2% 50.6%; + --destructive-foreground: 210 20% 98%; + + --ring: 224 71.4% 4.1%; + + --radius: 0.5rem; + } + + .dark { + --background: 224 71.4% 4.1%; + --foreground: 210 20% 98%; + + --muted: 215 27.9% 16.9%; + --muted-foreground: 217.9 10.6% 64.9%; + + --popover: 224 71.4% 4.1%; + --popover-foreground: 210 20% 98%; + + --card: 224 71.4% 4.1%; + --card-foreground: 210 20% 98%; + + --border: 215 27.9% 16.9%; + --input: 215 27.9% 16.9%; + + --primary: 210 20% 98%; + --primary-foreground: 220.9 39.3% 11%; + + --secondary: 215 27.9% 16.9%; + --secondary-foreground: 210 20% 98%; + + --accent: 215 27.9% 16.9%; + --accent-foreground: 210 20% 98%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 210 20% 98%; + + --ring: 216 12.2% 83.9%; + } +} + +@layer base { + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + } +} @font-face { font-family: "PublicSans"; @@ -29,6 +104,30 @@ html { background-color: white; } +/* SCROLL BAR */ +::-webkit-scrollbar { + width: 4px; + scrollbar-width: thin; + scrollbar-color: #f7f7f7; +} + +@media (min-width: 720px) { + ::-webkit-scrollbar { + width: 10px; + } +} + + +::-webkit-scrollbar-thumb { + background-color: #000; +} + +::-webkit-scrollbar-track { + background-color: #F9F9F9; +} + +/* SCROLL BAR */ + input, textarea { @apply block border rounded-2xl px-5 py-4 w-full; -- cgit v1.2.3 From 12609903a777413171ec71e646d4eb775414e6a3 Mon Sep 17 00:00:00 2001 From: Murillo Pinheiro de Oliveira Date: Sat, 10 Feb 2024 18:04:05 -0300 Subject: added: dark toggle working --- src/app.css | 6 +- src/components/buttons/ThemeToggle.svelte | 28 ++++++ src/hooks.server.js | 29 ++++++ src/lib/shadcn/components/ui/switch/index.js | 6 ++ src/lib/shadcn/components/ui/switch/switch.svelte | 22 +++++ src/routes/+page.server.js | 27 ++++- src/routes/+page.svelte | 114 ++++++++++++++-------- src/swapee/css/style.css | 3 +- src/swapee/img/map-dark.png | Bin 0 -> 89634 bytes static/images/logo-white.png | Bin 0 -> 1663 bytes static/style.css | 1 - tailwind.config.js | 10 +- 12 files changed, 198 insertions(+), 48 deletions(-) create mode 100644 src/components/buttons/ThemeToggle.svelte create mode 100644 src/hooks.server.js create mode 100644 src/lib/shadcn/components/ui/switch/index.js create mode 100644 src/lib/shadcn/components/ui/switch/switch.svelte create mode 100644 src/swapee/img/map-dark.png create mode 100644 static/images/logo-white.png (limited to 'src/app.css') diff --git a/src/app.css b/src/app.css index 307df282..e8627298 100644 --- a/src/app.css +++ b/src/app.css @@ -113,17 +113,17 @@ html { @media (min-width: 720px) { ::-webkit-scrollbar { - width: 10px; + width: 12px; } } ::-webkit-scrollbar-thumb { - background-color: #000; + background-color: #555; } ::-webkit-scrollbar-track { - background-color: #F9F9F9; + background-color: #000; } /* SCROLL BAR */ diff --git a/src/components/buttons/ThemeToggle.svelte b/src/components/buttons/ThemeToggle.svelte new file mode 100644 index 00000000..d62744c0 --- /dev/null +++ b/src/components/buttons/ThemeToggle.svelte @@ -0,0 +1,28 @@ + + \ No newline at end of file diff --git a/src/hooks.server.js b/src/hooks.server.js new file mode 100644 index 00000000..dca44977 --- /dev/null +++ b/src/hooks.server.js @@ -0,0 +1,29 @@ + +export const handle = (async ({ event, resolve }) => { + let theme = "dark"; + + const newTheme = event.url.searchParams.get("theme"); + const cookieTheme = event.cookies.get("colortheme"); + + if (newTheme) { + theme = newTheme; + } else if (cookieTheme) { + theme = cookieTheme; + } + + if (theme) { + return await resolve(event, { + transformPageChunk: ({ html }) => { + const modifiedHtml = html.replace(/]*>/, (match) => { + // Ensure the class attribute exists or add it if missing + return match.includes('class="') + ? match.replace(/class="[^"]*"/, `class="${theme}"`) + : match.replace('>', ` class="${theme}">`); + }); + return modifiedHtml; + } + }); + } + + return await resolve(event); +}) \ No newline at end of file diff --git a/src/lib/shadcn/components/ui/switch/index.js b/src/lib/shadcn/components/ui/switch/index.js new file mode 100644 index 00000000..7745ca39 --- /dev/null +++ b/src/lib/shadcn/components/ui/switch/index.js @@ -0,0 +1,6 @@ +import Root from "./switch.svelte"; +export { + Root, + // + Root as Switch, +}; diff --git a/src/lib/shadcn/components/ui/switch/switch.svelte b/src/lib/shadcn/components/ui/switch/switch.svelte new file mode 100644 index 00000000..69c08b03 --- /dev/null +++ b/src/lib/shadcn/components/ui/switch/switch.svelte @@ -0,0 +1,22 @@ + + + + + diff --git a/src/routes/+page.server.js b/src/routes/+page.server.js index 904e543d..aac596a2 100644 --- a/src/routes/+page.server.js +++ b/src/routes/+page.server.js @@ -1,4 +1,27 @@ // export const prerender = true; -export let load = async () => { - return { faqs: ["cost", "compatibility", "safety", "pos", "bitcoin"] }; +import { redirect } from "@sveltejs/kit"; + +export let load = async ({ cookies }) => { + let colorThemeSelected = "dark"; + if (cookies.get("colortheme")) { + colorThemeSelected = cookies.get("colortheme"); + } + + return { faqs: ["cost", "compatibility", "safety", "pos", "bitcoin"], colorThemeSelected: colorThemeSelected }; }; + +export const actions = { + setTheme: async ({ url, cookies }) => { + const theme = url.searchParams.get("theme"); + const redirectTo = url.searchParams.get("redirectTo"); + + if (theme) { + cookies.set("colortheme", theme, { + path: "/", + maxAge: 60 * 60 * 24 * 365, + }); + } + + throw redirect(303, redirectTo ?? "/"); + }, +}; \ No newline at end of file diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index f5df9d4f..1b1d8901 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,8 +1,12 @@ @@ -50,9 +75,15 @@ -