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 --- .../ui/accordion/accordion-content.svelte | 22 ++++++++++ .../components/ui/accordion/accordion-item.svelte | 11 +++++ .../ui/accordion/accordion-trigger.svelte | 22 ++++++++++ src/lib/shadcn/components/ui/accordion/index.js | 16 ++++++++ src/lib/shadcn/components/ui/separator/index.js | 6 +++ .../components/ui/separator/separator.svelte | 19 +++++++++ src/lib/shadcn/utils.js | 48 ++++++++++++++++++++++ src/lib/utils.js | 2 +- 8 files changed, 145 insertions(+), 1 deletion(-) create mode 100644 src/lib/shadcn/components/ui/accordion/accordion-content.svelte create mode 100644 src/lib/shadcn/components/ui/accordion/accordion-item.svelte create mode 100644 src/lib/shadcn/components/ui/accordion/accordion-trigger.svelte create mode 100644 src/lib/shadcn/components/ui/accordion/index.js create mode 100644 src/lib/shadcn/components/ui/separator/index.js create mode 100644 src/lib/shadcn/components/ui/separator/separator.svelte create mode 100644 src/lib/shadcn/utils.js (limited to 'src/lib') diff --git a/src/lib/shadcn/components/ui/accordion/accordion-content.svelte b/src/lib/shadcn/components/ui/accordion/accordion-content.svelte new file mode 100644 index 00000000..14328e88 --- /dev/null +++ b/src/lib/shadcn/components/ui/accordion/accordion-content.svelte @@ -0,0 +1,22 @@ + + + +
+ +
+ diff --git a/src/lib/shadcn/components/ui/accordion/accordion-item.svelte b/src/lib/shadcn/components/ui/accordion/accordion-item.svelte new file mode 100644 index 00000000..b0887d7e --- /dev/null +++ b/src/lib/shadcn/components/ui/accordion/accordion-item.svelte @@ -0,0 +1,11 @@ + + + + + diff --git a/src/lib/shadcn/components/ui/accordion/accordion-trigger.svelte b/src/lib/shadcn/components/ui/accordion/accordion-trigger.svelte new file mode 100644 index 00000000..8acf4675 --- /dev/null +++ b/src/lib/shadcn/components/ui/accordion/accordion-trigger.svelte @@ -0,0 +1,22 @@ + + + + svg]:rotate-180", + className + )} + {...$$restProps} + on:click + > + + + + diff --git a/src/lib/shadcn/components/ui/accordion/index.js b/src/lib/shadcn/components/ui/accordion/index.js new file mode 100644 index 00000000..d75ea273 --- /dev/null +++ b/src/lib/shadcn/components/ui/accordion/index.js @@ -0,0 +1,16 @@ +import { Accordion as AccordionPrimitive } from "bits-ui"; +import Content from "./accordion-content.svelte"; +import Item from "./accordion-item.svelte"; +import Trigger from "./accordion-trigger.svelte"; +const Root = AccordionPrimitive.Root; +export { + Root, + Content, + Item, + Trigger, + // + Root as Accordion, + Content as AccordionContent, + Item as AccordionItem, + Trigger as AccordionTrigger, +}; diff --git a/src/lib/shadcn/components/ui/separator/index.js b/src/lib/shadcn/components/ui/separator/index.js new file mode 100644 index 00000000..073c5c4c --- /dev/null +++ b/src/lib/shadcn/components/ui/separator/index.js @@ -0,0 +1,6 @@ +import Root from "./separator.svelte"; +export { + Root, + // + Root as Separator, +}; diff --git a/src/lib/shadcn/components/ui/separator/separator.svelte b/src/lib/shadcn/components/ui/separator/separator.svelte new file mode 100644 index 00000000..b07c93ea --- /dev/null +++ b/src/lib/shadcn/components/ui/separator/separator.svelte @@ -0,0 +1,19 @@ + + + diff --git a/src/lib/shadcn/utils.js b/src/lib/shadcn/utils.js new file mode 100644 index 00000000..08747b8f --- /dev/null +++ b/src/lib/shadcn/utils.js @@ -0,0 +1,48 @@ +import { clsx } from "clsx"; +import { twMerge } from "tailwind-merge"; +import { cubicOut } from "svelte/easing"; + +export function cn(...inputs) { + return twMerge(clsx(inputs)); +} + +export const flyAndScale = ( + node, + params = { y: -8, x: 0, start: 0.95, duration: 150 } +) => { + const style = getComputedStyle(node); + const transform = style.transform === "none" ? "" : style.transform; + + const scaleConversion = (valueA, scaleA, scaleB) => { + const [minA, maxA] = scaleA; + const [minB, maxB] = scaleB; + + const percentage = (valueA - minA) / (maxA - minA); + const valueB = percentage * (maxB - minB) + minB; + + return valueB; + }; + + const styleToString = (style) => { + return Object.keys(style).reduce((str, key) => { + if (style[key] === undefined) return str; + return str + `${key}:${style[key]};`; + }, ""); + }; + + return { + duration: params.duration ?? 200, + delay: 0, + css: (t) => { + const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]); + const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]); + const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]); + + return styleToString({ + transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`, + opacity: t + }); + }, + easing: cubicOut + }; +}; diff --git a/src/lib/utils.js b/src/lib/utils.js index 738413bf..434ca268 100644 --- a/src/lib/utils.js +++ b/src/lib/utils.js @@ -300,4 +300,4 @@ export let isLiquid = (text) => (text.startsWith("ert1q") && text.length === 43) || (text.startsWith("ex1q") && text.length === 42) || text.startsWith("el1qq") || - text.startsWith("lq1qq"); + text.startsWith("lq1qq"); \ No newline at end of file -- 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/lib') 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 @@ -