MadHouse-Labs/file-uploader
2
0
Fork 0
Code Issues Pull requests Packages Activity Actions

NEW THEMES. looks pretty

Browse source
This commit is contained in:
cirroskais 2024-04-25 01:54:39 -04:00
parent dfbb6a6d9c
commit 4301584467
No known key found for this signature in database
GPG key ID: 5FC73EBF2678E33D
15 changed files with 68 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -10,6 +10,7 @@
"format": "prettier --write ."
},
"devDependencies": {
"@catppuccin/tailwindcss": "^0.1.6",
"@sveltejs/adapter-node": "^5.0.1",
"@sveltejs/kit": "^2.0.0",
"@sveltejs/vite-plugin-svelte": "^3.0.0",

15
src/app.css
View file

@ -4,18 +4,15 @@
@tailwind components;
@tailwind utilities;
html {
@apply dark:bg-neutral-950;
@apply dark:text-neutral-200;
@apply transition-colors;
html,
body {
@apply bg-base;
@apply text-text;
@apply transition-all;
font-family: 'Nunito', sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}
strong {
@apply dark:text-white;
@apply transition-colors;
}

6
src/lib/components/Dropdown.svelte
View file

@ -14,11 +14,11 @@
<Menu class="w-5 h-5"></Menu>
</button>
{#if visible}
<button
<div
transition:slide
class="w-[12rem] z-10 h-fit translate-y-12 py-2 bg-neutral-200 dark:bg-neutral-900 rounded-lg origin-top right-0 absolute transition-all"
class="w-[12rem] z-10 h-fit translate-y-12 py-2 bg-crust rounded-lg origin-top right-0 absolute transition-all shadow-md"
>
<slot />
</button>
</div>
{/if}
</div>

5
src/lib/components/DropdownButton.svelte
View file

@ -2,9 +2,6 @@
export let href = '';
</script>
<a
{href}
class="flex px-3 py-1.5 space-x-1 transition-all hover:bg-neutral-300 hover:dark:bg-neutral-800"
>
<a {href} class="flex px-3 py-1.5 space-x-1 transition-all hover:bg-overlay0">
<slot />
</a>

2
src/lib/components/Forms/RegisterForm.svelte
View file

@ -113,7 +113,7 @@
<ButtonText>Register</ButtonText>
</Button>
</div>
<p class="text-xs text-center text-neutral-500/50 dark:text-white/30">
<p class="text-xs text-center text-overlay1">
By registering an account you agree to the <br />
<a class="underline" href="/terms" data-sveltekit-reload>Terms of Service</a> and
<a class="underline" href="/privacy" data-sveltekit-reload>Privacy Policy</a>.

9
src/lib/components/Header.svelte
View file

@ -10,7 +10,7 @@
</script>
<div
class="flex place-content-between px-4 my-2 w-full h-full rounded-xl transition-colors py-auto bg-neutral-200 dark:bg-neutral-900"
class="flex place-content-between px-4 w-full h-full rounded-xl shadow-md transition-colors py-auto bg-crust"
>
<div class="flex my-auto space-x-6">
<a
@ -30,7 +30,7 @@
<Dropdown>
<div>
<button
class="flex px-3 py-1.5 space-x-1.5 w-full transition-all hover:bg-neutral-300 hover:dark:bg-neutral-800"
class="flex px-3 py-1.5 space-x-1.5 w-full transition-all hover:bg-overlay0"
on:click={() => {
$darkMode = !$darkMode;
}}
@ -43,10 +43,7 @@
<p>Theme</p>
</button>
</div>
<DropdownButton>
<p class="my-auto">ShareX Profile</p>
</DropdownButton>
<DropdownButton>
<DropdownButton href="/settings">
<p class="my-auto">Settings</p>
</DropdownButton>
<DropdownButton href="/api/auth/logout">

2
src/lib/components/Inputs/Button.svelte
View file

@ -11,7 +11,7 @@
{disabled}
>
<div
class="flex p-2 space-x-2 rounded-lg border-b-2 transition-colors border-neutral-400 bg-neutral-200 hover:border-neutral-500 hover:group-disabled/button:border-neutral-400 dark:border-neutral-700 dark:bg-neutral-900 hover:dark:border-neutral-500 hover:group-disabled/button:dark:border-neutral-700"
class="flex p-2 space-x-2 rounded-lg border-b-2 transition-colors hadow-md bg-crust border-overlay2"
>
<slot />
</div>

36
src/lib/components/Inputs/FormInput.svelte
View file

@ -7,14 +7,12 @@
<!-- insane that i have to do this because -->
<!-- 'type' attribute cannot be dynamic if input uses two-way binding -->
{#if type === 'username'}
<div class="flex p-2 space-x-1 rounded-lg transition-colors bg-neutral-200 dark:bg-neutral-900">
<div
class="py-0.5 pr-1 border-r-2 transition-colors border-neutral-400 dark:border-neutral-700"
>
<div class="flex p-2 space-x-1 rounded-lg shadow-md transition-colors bg-crust">
<div class="py-0.5 pr-1 border-r-2 transition-colors border-overlay2">
<slot />
</div>
<input
class="py-0.5 transition-colors bg-neutral-200 dark:bg-neutral-900 peer"
class="py-0.5 transition-colors bg-crust peer placeholder:text-overlay1"
type="username"
{name}
{id}
@ -22,22 +20,20 @@
{required}
bind:value
/>
<div class="peer-invalid:flex hidden my-auto">
<div class="hidden my-auto peer-invalid:flex">
<CircleAlert />
</div>
<div class="peer-invalid:hidden my-auto">
<div class="my-auto peer-invalid:hidden">
<Check />
</div>
</div>
{:else if type === 'email'}
<div class="flex p-2 space-x-1 rounded-lg transition-colors bg-neutral-200 dark:bg-neutral-900">
<div
class="py-0.5 pr-1 border-r-2 transition-colors border-neutral-400 dark:border-neutral-700"
>
<div class="flex p-2 space-x-1 rounded-lg shadow-md transition-colors bg-crust">
<div class="py-0.5 pr-1 border-r-2 transition-colors border-overlay2">
<slot />
</div>
<input
class="py-0.5 transition-colors bg-neutral-200 dark:bg-neutral-900 peer"
class="py-0.5 transition-colors bg-crust peer placeholder:text-overlay1"
type="email"
{name}
{id}
@ -45,22 +41,20 @@
{required}
bind:value
/>
<div class="peer-invalid:flex hidden my-auto">
<div class="hidden my-auto peer-invalid:flex">
<CircleAlert />
</div>
<div class="peer-invalid:hidden my-auto">
<div class="my-auto peer-invalid:hidden">
<Check />
</div>
</div>
{:else if type === 'password'}
<div class="flex p-2 space-x-1 rounded-lg transition-colors bg-neutral-200 dark:bg-neutral-900">
<div
class="py-0.5 pr-1 border-r-2 transition-colors border-neutral-400 dark:border-neutral-700"
>
<div class="flex p-2 space-x-1 rounded-lg shadow-md transition-colors bg-crust">
<div class="py-0.5 pr-1 border-r-2 transition-colors border-overlay2">
<slot />
</div>
<input
class="py-0.5 transition-colors bg-neutral-200 dark:bg-neutral-900 peer"
class="py-0.5 transition-colors bg-crust peer placeholder:text-overlay1"
type="password"
{name}
{id}
@ -68,10 +62,10 @@
{required}
bind:value
/>
<div class="peer-invalid:flex hidden my-auto">
<div class="hidden my-auto peer-invalid:flex">
<CircleAlert />
</div>
<div class="peer-invalid:hidden my-auto">
<div class="my-auto peer-invalid:hidden">
<Check />
</div>
</div>

1
src/lib/components/Logo.svelte
View file

@ -2,6 +2,7 @@
viewBox="0 0 1200 628"
version="1.1"
id="svg1"
class="transition-colors fill-text"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:
xmlns="http://www.w3.org/2000/svg"

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 291 KiB

After

Width:  |  Height:  |  Size: 291 KiB

4
src/lib/components/ThemeHandler.svelte
View file

@ -15,9 +15,11 @@
if ($darkMode) {
console.log('[ThemeHandler.svelte] Setting dark mode from store');
html.classList.add('dark');
html.classList.add('frappe');
} else {
console.log('[ThemeHandler.svelte] Setting light mode from store');
html.classList.remove('dark');
html.classList.remove('frappe');
}
});
}
@ -31,9 +33,11 @@
if (darkMode) {
console.log('[ThemeHandler.svelte] Setting dark mode from localStorage');
html.classList.add('dark');
html.classList.add('frappe');
} else {
console.log('[ThemeHandler.svelte] Setting light mode from localStorage');
html.classList.remove('dark');
html.classList.remove('frappe');
}
</script>
</svelte:head>

2
src/routes/(app)/+layout.svelte
View file

@ -3,7 +3,7 @@
import Footer from '$lib/components/Footer.svelte';
</script>
<div class="w-full min-h-screen">
<div class="my-2 w-full min-h-screen">
<div class="w-full h-12">
<Header></Header>
</div>

21
src/routes/+layout.svelte
View file

@ -2,6 +2,7 @@
import '../app.css';
import { Toaster } from 'svelte-sonner';
import { CircleAlert, TriangleAlert, Info, Check, Loader } from 'lucide-svelte';
import { darkMode, user } from '$lib/stores.js';
import ThemeHandler from '$lib/components/ThemeHandler.svelte';
@ -14,7 +15,25 @@
<PageMeta title="cirro's file uploader" />
<ThemeHandler />
<Toaster theme={$darkMode ? 'dark' : 'light'} position={'bottom-center'} />
<Toaster
position={'bottom-center'}
toastOptions={{
classes: {
toast: '!bg-crust !fill-text !border-crust',
title: '!text-text',
description: '!text-subtext0',
actionButton: 'bg-zinc-400',
cancelButton: 'bg-orange-400',
closeButton: 'bg-lime-400'
}
}}
>
<Loader size="20" class="animate-spin text-text" slot="loading-icon" />
<Check size="20" class="text-text" slot="success-icon" />
<CircleAlert size="20" class="text-text" slot="error-icon" />
<Info size="20" class="text-text" slot="info-icon" />
<TriangleAlert size="20" class="text-text" slot="warning-icon" />
</Toaster>
<div class="container">
<slot />

2
src/routes/+page.svelte
View file

@ -30,9 +30,7 @@
<div in:blur={{ amount: 1 }} class="flex justify-center items-center h-full">
<div class="flex flex-col space-y-1.5">
<div>
<div class="transition-colors fill-black dark:fill-white">
<Logo />
</div>
<p>Currently hosting <strong>0</strong> files.</p>
<p class="italic">The best file uploader <strong>ever!!!</strong></p>
</div>

6
tailwind.config.js
View file

@ -6,5 +6,9 @@ export default {
extend: {},
container: { center: true }
},
plugins: []
plugins: [
require('@catppuccin/tailwindcss')({
defaultFlavour: 'latte'
})
]
};

5
yarn.lock
View file

@ -15,6 +15,11 @@
"@jridgewell/gen-mapping" "^0.3.5"
"@jridgewell/trace-mapping" "^0.3.24"
"@catppuccin/tailwindcss@^0.1.6":
version "0.1.6"
resolved "https://registry.yarnpkg.com/@catppuccin/tailwindcss/-/tailwindcss-0.1.6.tgz#d97c491e1523ead83009e32d0a34c364c2a0ca5b"
integrity sha512-V+Y0AwZ5SSyvOVAcDl7Ng30xy+m82OKnEJ+9+kcZZ7lRyXuZrAb2GScdq9XR3v+ggt8qiZ/G4TvaC9cJ88AAXA==
"@esbuild/aix-ppc64@0.19.12":
version "0.19.12"
resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz#d1bc06aedb6936b3b6d313bf809a5a40387d2b7f"