diff --git a/web/src/app.css b/web/src/app.css index 5a96d95..64c3164 100644 --- a/web/src/app.css +++ b/web/src/app.css @@ -1,5 +1,15 @@ @import "tailwindcss"; +@theme { + --font-copernicus: "Copernicus", "sans-serif"; +} + +@font-face { + font-family: "Copernicus"; + font-style: normal; + src: url("/fonts/Copernicus-Regular-Latin.woff2") format("woff2"); +} + :root { --light-background: #f5f5f5; --light-foreground: #e0e0e0; @@ -54,11 +64,7 @@ } a { - @apply text-[var(--light-accent)] transition-colors duration-200; - } - - a:hover { - @apply underline; + @apply text-[var(--light-accent)] transition-colors duration-200 hover:underline; } .dark a { @@ -88,31 +94,11 @@ } button { - @apply cursor-pointer rounded-md bg-[var(--light-accent)] px-4 py-2 text-[var(--light-background)] transition-all duration-200; - } - - button:hover { - @apply bg-[var(--light-accent)]/80; - } - - button:focus { - @apply ring-2 ring-[var(--light-accent)]/50 outline-none; - } - - button:disabled { - @apply opacity-50; + @apply cursor-pointer rounded-md bg-[var(--light-accent)] px-4 py-2 text-[var(--light-background)] transition-all duration-200 hover:bg-[var(--light-accent)]/80 focus:ring-2 focus:ring-[var(--light-accent)]/50 focus:outline-none disabled:opacity-50; } .dark button { - @apply bg-[var(--dark-accent)] text-[var(--dark-background)]; - } - - .dark button:hover { - @apply bg-[var(--dark-accent)]/80; - } - - .dark button:focus { - @apply ring-[var(--dark-accent)]/50; + @apply bg-[var(--dark-accent)] text-[var(--dark-background)] hover:bg-[var(--dark-accent)]/80 focus:ring-[var(--dark-accent)]/50; } } @@ -157,7 +143,7 @@ } .btn-primary { - @apply bg-[var(--light-accent)] text-[var(--light-background)]; + @apply rounded-lg bg-[var(--light-accent)] text-[var(--light-background)]; } .dark .btn-primary { @@ -165,7 +151,7 @@ } .btn-secondary { - @apply border border-[var(--light-text)]/20 bg-[var(--light-foreground)] text-[var(--light-text)]; + @apply rounded-lg border border-[var(--light-text)]/20 bg-[var(--light-foreground)] text-[var(--light-text)]; } .dark .btn-secondary { @@ -201,14 +187,10 @@ @apply border-[var(--dark-foreground)] bg-[var(--dark-foreground)]; } - .sidebar-header { - /* Should align with the navbar height for visual consistency */ - @apply h-20; - } - .sidebar-header, .sidebar-footer { - @apply border-[var(--light-text)]/20 p-4; + /* Height should align with the navbar height for visual consistency */ + @apply flex h-20 items-center justify-center border-b border-[var(--light-text)]/20 p-2; } .dark .sidebar-header, @@ -216,10 +198,6 @@ @apply border-[var(--dark-text)]/20; } - .sidebar-header { - @apply border-b; - } - .sidebar-footer { @apply border-t; } @@ -273,11 +251,11 @@ } .search-bar { - @apply w-full rounded-md py-2 pr-3 pl-9; + @apply w-full rounded-lg py-2.5 pr-4 pl-11; } .search-bar-icon { - @apply absolute top-3 left-7 h-4 w-4 text-[var(--light-text)]/60; + @apply absolute top-3 left-8 h-5 w-5 text-[var(--light-text)]/60; } .dark .search-bar-icon { @@ -641,4 +619,20 @@ .dark .main-content { @apply bg-[var(--dark-background)]; } + + .greeting-container { + @apply flex h-full flex-col items-center justify-center; + } + + .greeting-message { + @apply font-copernicus mb-4 text-center text-4xl; + } + + .greeting-bottom-link { + @apply cursor-pointer text-[var(--light-accent)] transition-colors duration-200 hover:underline; + } + + .greeting-bottom-link { + @apply text-[var(--dark-accent)]; + } } diff --git a/web/src/app.html b/web/src/app.html index 79683ea..718fae9 100644 --- a/web/src/app.html +++ b/web/src/app.html @@ -17,6 +17,8 @@ if (darkMode) { document.documentElement.classList.add("dark") } + + localStorage.setItem("darkMode", darkMode) diff --git a/web/src/lib/components/AuthForm.svelte b/web/src/lib/components/AuthForm.svelte index 6a4dd3c..6e16367 100644 --- a/web/src/lib/components/AuthForm.svelte +++ b/web/src/lib/components/AuthForm.svelte @@ -45,40 +45,40 @@ } -
-
+
+
{#if $cError} -
+
{$cError}
{/if}
-
-
-
@@ -90,6 +90,8 @@
+ +
diff --git a/web/src/lib/components/NoteView.svelte b/web/src/lib/components/NoteView.svelte index 937585f..0cbcfa5 100644 --- a/web/src/lib/components/NoteView.svelte +++ b/web/src/lib/components/NoteView.svelte @@ -19,6 +19,8 @@ import VersionArrow from "$lib/icons/VersionArrow.svelte" import Close from "$lib/icons/Close.svelte" import { ERR_NOTIFICATION_DUR, SUC_NOTIFICATION_DUR } from "$lib/const" + import { generateGreeting } from "$lib/util/greetMessage" + import { get } from "svelte/store" // State let isComponentReady = false @@ -28,6 +30,7 @@ let isEditing = false let errorTimeout: ReturnType | null = null let successTimeout: ReturnType | null = null + let greetMessage = "What's up?" onMount(async (): Promise => { // The following fetch attempts to refresh any expired tokens automatically @@ -41,6 +44,8 @@ } await loadNotes() + const cUser = get(currentUser) + greetMessage = generateGreeting(cUser ? cUser.username : "friend") // Default to sidebar closed on mobile const handleResize = () => { @@ -274,7 +279,7 @@
+
+

{greetMessage}

+

+ Want to create a new note? + Click + + + here + +

{/if} diff --git a/web/src/lib/components/Sidebar.svelte b/web/src/lib/components/Sidebar.svelte index 7276817..86be9c5 100644 --- a/web/src/lib/components/Sidebar.svelte +++ b/web/src/lib/components/Sidebar.svelte @@ -1,7 +1,7 @@