Skip to content

Commit 379eeb4

Browse files
shamscornerShamim
shamscorner
and
Shamim
authored
Improve UI (#6)
* chore!: change UI theme colors * chore: improve login UI * fix: footer missing button variant issue * feat: add dark mode --------- Co-authored-by: Shamim <shossain@secureship.ca>
1 parent 474f964 commit 379eeb4

File tree

15 files changed

+125
-67
lines changed

15 files changed

+125
-67
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,7 @@
8383
"dotenv": "^16.4.5",
8484
"formsnap": "^1.0.0",
8585
"lucide-svelte": "^0.363.0",
86+
"mode-watcher": "^0.3.0",
8687
"sharp": "^0.33.3",
8788
"tailwind-merge": "^2.2.2",
8889
"tailwind-variants": "^0.2.1"

‎pnpm-lock.yaml‎

Lines changed: 11 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/app.html‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!doctype html>
2-
<html lang="%lang%" dir="ltr" class="h-full scroll-smooth bg-white">
2+
<html lang="%lang%" dir="ltr" class="scroll-smooth">
33
<head>
44
<meta charset="utf-8" />
55
<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
@@ -41,10 +41,7 @@
4141
<meta name="msapplication-TileColor" content="#ffffff" />
4242
<meta name="theme-color" content="#ffffff" />
4343
</head>
44-
<body
45-
data-sveltekit-preload-data="hover"
46-
class="h-full overflow-x-hidden bg-background text-foreground antialiased selection:bg-accent selection:text-accent-foreground"
47-
>
44+
<body data-sveltekit-preload-data="hover" class="min-h-screen overflow-x-hidden antialiased">
4845
<!-- TODO: enable when gtag is ready -->
4946
<!-- <noscript>
5047
<iframe

‎src/app.postcss‎

Lines changed: 37 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -5,68 +5,66 @@
55
@layer base {
66
:root {
77
--background: 0 0% 100%;
8-
--foreground: 8 17% 26%;
8+
--foreground: 240 10% 3.9%;
99

10-
--muted: 210 40% 96.1%;
11-
--muted-foreground: 215.4 16.3% 46.9%;
10+
--muted: 240 4.8% 95.9%;
11+
--muted-foreground: 240 3.8% 46.1%;
1212

1313
--popover: 0 0% 100%;
14-
--popover-foreground: 222.2 84% 4.9%;
14+
--popover-foreground: 240 10% 3.9%;
1515

1616
--card: 0 0% 100%;
17-
--card-foreground: 222.2 84% 4.9%;
17+
--card-foreground: 240 10% 3.9%;
1818

19-
--border: 214.3 31.8% 91.4%;
20-
--input: 214.3 31.8% 91.4%;
19+
--border: 240 5.9% 90%;
20+
--input: 240 5.9% 90%;
2121

22-
--primary: 93 15% 38%;
23-
--primary-foreground: 0 0% 100%;
22+
--primary: 240 5.9% 10%;
23+
--primary-foreground: 0 0% 98%;
2424

25-
--secondary: 106 22% 81%;
26-
--secondary-foreground: 8 17% 26%;
27-
--secondary-light: 106 47% 92%;
25+
--secondary: 240 4.8% 95.9%;
26+
--secondary-foreground: 240 5.9% 10%;
2827

29-
--accent: 106 47% 92%;
30-
--accent-foreground: 8 17% 26%;
28+
--accent: 240 4.8% 95.9%;
29+
--accent-foreground: 240 5.9% 10%;
3130

3231
--destructive: 0 84.2% 60.2%;
33-
--destructive-foreground: 210 40% 98%;
32+
--destructive-foreground: 0 0% 98%;
3433

35-
--ring: 106 22% 81%;
34+
--ring: 240 5% 64.9%;
3635

3736
--radius: 0.5rem;
3837
}
3938

4039
.dark {
41-
--background: 222.2 84% 4.9%;
42-
--foreground: 210 40% 98%;
40+
--background: 240 10% 3.9%;
41+
--foreground: 0 0% 98%;
4342

44-
--muted: 217.2 32.6% 17.5%;
45-
--muted-foreground: 215 20.2% 65.1%;
43+
--muted: 240 3.7% 15.9%;
44+
--muted-foreground: 240 5% 64.9%;
4645

47-
--popover: 222.2 84% 4.9%;
48-
--popover-foreground: 210 40% 98%;
46+
--popover: 240 10% 3.9%;
47+
--popover-foreground: 0 0% 98%;
4948

50-
--card: 222.2 84% 4.9%;
51-
--card-foreground: 210 40% 98%;
49+
--card: 240 10% 3.9%;
50+
--card-foreground: 0 0% 98%;
5251

53-
--border: 217.2 32.6% 17.5%;
54-
--input: 217.2 32.6% 17.5%;
52+
--border: 240 3.7% 15.9%;
53+
--input: 240 3.7% 15.9%;
5554

56-
--primary: 210 40% 98%;
57-
--primary-foreground: 222.2 47.4% 11.2%;
55+
--primary: 0 0% 98%;
56+
--primary-foreground: 240 5.9% 10%;
5857

59-
--secondary: 217.2 32.6% 17.5%;
60-
--secondary-foreground: 210 40% 98%;
61-
--secondary-light: 106 37% 93%;
58+
--secondary: 240 3.7% 15.9%;
59+
--secondary-foreground: 0 0% 98%;
6260

63-
--accent: 217.2 32.6% 17.5%;
64-
--accent-foreground: 210 40% 98%;
61+
--accent: 240 3.7% 15.9%;
62+
--accent-foreground: 0 0% 98%;
6563

6664
--destructive: 0 62.8% 30.6%;
67-
--destructive-foreground: 210 40% 98%;
65+
--destructive-foreground: 0 85.7% 97.3%;
6866

69-
--ring: hsl(212.7, 26.8%, 83.9);
67+
--ring: 240 3.7% 15.9%;
7068
}
7169
}
7270

@@ -75,6 +73,9 @@
7573
@apply border-border;
7674
}
7775
body {
78-
@apply bg-background text-foreground;
76+
@apply bg-background text-foreground selection:bg-primary selection:text-primary-foreground;
77+
font-feature-settings:
78+
'rlig' 1,
79+
'calt' 1;
7980
}
8081
}

‎src/lib/components/common/AppBackground.svelte‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<li />
1212
</ul>
1313

14-
<style>
14+
<style lang="postcss">
1515
@keyframes animate {
1616
0% {
1717
transform: translateY(0) rotate(0deg);
@@ -36,12 +36,13 @@
3636
overflow: hidden;
3737
}
3838
ul li {
39+
@apply bg-[#eef9eb] dark:bg-[#0f1219];
40+
3941
position: absolute;
4042
display: block;
4143
list-style: none;
4244
width: 20px;
4345
height: 20px;
44-
background-color: #eef9eb;
4546
animation: animate 19s linear infinite;
4647
}
4748

‎src/lib/components/common/ThemeToggle.svelte‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<script lang="ts">
2+
import { LL } from '$lib/i18n/i18n-svelte';
3+
import { Button } from '$lib/components/ui/button';
4+
import Sun from 'lucide-svelte/icons/sun';
5+
import Moon from 'lucide-svelte/icons/moon';
6+
7+
import { toggleMode } from 'mode-watcher';
8+
</script>
9+
10+
<Button on:click={toggleMode} variant="outline" size="icon">
11+
<Sun
12+
class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
13+
/>
14+
<Moon
15+
class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
16+
/>
17+
<span class="sr-only">{$LL.common.toggleTheme()}</span>
18+
</Button>

‎src/lib/components/icons/index.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@ import {
1515
Twitter,
1616
Github,
1717
Linkedin,
18-
Home
18+
Home,
19+
TriangleAlert
1920
} from 'lucide-svelte';
2021

2122
import Google from './google.svelte';
@@ -39,7 +40,8 @@ export const Icons = {
3940
twitter: Twitter,
4041
github: Github,
4142
linkedin: Linkedin,
42-
home: Home
43+
home: Home,
44+
triangleAlert: TriangleAlert
4345
};
4446

4547
export type IconType = any;

‎src/lib/components/ui/form/form-error.svelte‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,24 @@
11
<script lang="ts">
2+
import { Icons } from '$lib/components/icons';
23
import { cn } from '$lib/utils';
34
import type { HTMLAttributes } from 'svelte/elements';
45
5-
type $$Props = HTMLAttributes<HTMLParagraphElement>;
6+
type $$Props = HTMLAttributes<HTMLParagraphElement> & {
7+
show?: boolean;
8+
};
9+
let show: $$Props['show'] = false;
610
let className: string | undefined | null = undefined;
7-
export { className as class };
11+
export { className as class, show };
812
</script>
913

10-
<p class={cn('mx-auto max-w-xs text-center text-sm text-destructive', className)} {...$$restProps}>
14+
<p
15+
class={cn(
16+
'flex items-center gap-x-2 rounded-md bg-destructive/15 p-2 text-xs text-destructive',
17+
{ invisible: !show },
18+
className
19+
)}
20+
{...$$restProps}
21+
>
22+
<Icons.triangleAlert class="h-4 w-4" />
1123
<slot />
1224
</p>

‎src/lib/i18n/en/index.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@ const common = {
1010
signup: 'Sign up',
1111
show: 'Show',
1212
hide: 'Hide',
13-
or: 'Or'
13+
or: 'Or',
14+
toggleTheme: 'Toggle theme'
1415
};
1516

1617
const en: BaseTranslation = {
@@ -79,7 +80,7 @@ const en: BaseTranslation = {
7980
},
8081

8182
loginPage: {
82-
title: 'Welcome back',
83+
title: 'Welcome back!',
8384
pageTitle: 'Log in',
8485
description: 'Login to your account and start accepting donations, memberships, and more.',
8586
keywords: 'Login, Sign in, Log in, Sign up, Register',

‎src/lib/i18n/i18n-types.ts‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,10 @@ type RootTranslation = {
5959
* O​r
6060
*/
6161
or: string
62+
/**
63+
* T​o​g​g​l​e​ ​t​h​e​m​e
64+
*/
65+
toggleTheme: string
6266
}
6367
appLogo: {
6468
/**
@@ -191,7 +195,7 @@ type RootTranslation = {
191195
}
192196
loginPage: {
193197
/**
194-
* W​e​l​c​o​m​e​ ​b​a​c​k
198+
* W​e​l​c​o​m​e​ ​b​a​c​k​!
195199
*/
196200
title: string
197201
/**
@@ -295,6 +299,10 @@ export type TranslationFunctions = {
295299
* Or
296300
*/
297301
or: () => LocalizedString
302+
/**
303+
* Toggle theme
304+
*/
305+
toggleTheme: () => LocalizedString
298306
}
299307
appLogo: {
300308
/**
@@ -427,7 +435,7 @@ export type TranslationFunctions = {
427435
}
428436
loginPage: {
429437
/**
430-
* Welcome back
438+
* Welcome back!
431439
*/
432440
title: () => LocalizedString
433441
/**

0 commit comments

Comments
 (0)