Skip to content

Commit 210e0de

Browse files
abhinavxdabhinavxd
committed
feat: dark mode
1 parent 1f8fdf2 commit 210e0de

File tree

96 files changed

+938
-881
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

96 files changed

+938
-881
lines changed

‎frontend/index.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<link rel="preconnect" href="https://fonts.googleapis.com">
88
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9-
<link
10-
href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap"
9+
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap"
1110
rel="stylesheet">
1211
</head>
1312

‎frontend/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
"@tiptap/vue-3": "^2.4.0",
3434
"@unovis/ts": "^1.4.4",
3535
"@unovis/vue": "^1.4.4",
36-
"@vee-validate/zod": "^4.13.2",
36+
"@vee-validate/zod": "^4.15.0",
3737
"@vueuse/core": "^12.4.0",
3838
"axios": "^1.8.2",
3939
"class-variance-authority": "^0.7.0",
@@ -47,7 +47,7 @@
4747
"radix-vue": "^1.9.17",
4848
"reka-ui": "^2.2.0",
4949
"tailwind-merge": "^2.3.0",
50-
"vee-validate": "^4.13.2",
50+
"vee-validate": "^4.15.0",
5151
"vue": "^3.4.37",
5252
"vue-dompurify-html": "^5.2.0",
5353
"vue-i18n": "9",
@@ -57,7 +57,7 @@
5757
"vue-sonner": "^1.3.0",
5858
"vue3-emoji-picker": "^1.1.8",
5959
"vuedraggable": "^4.1.0",
60-
"zod": "^3.23.8"
60+
"zod": "^3.24.1"
6161
},
6262
"devDependencies": {
6363
"@rushstack/eslint-patch": "^1.3.3",

‎frontend/pnpm-lock.yaml

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

‎frontend/src/App.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="flex w-full h-screen">
2+
<div class="flex w-full h-screen text-foreground">
33
<!-- Icon sidebar always visible -->
44
<SidebarProvider style="--sidebar-width: 3rem" class="w-auto z-50">
55
<ShadcnSidebar collapsible="none" class="border-r">

‎frontend/src/Root.vue

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
<template>
22
<TooltipProvider :delay-duration="150">
3-
<div class="!font-jakarta">
4-
<Toaster class="pointer-events-auto" position="top-center" richColors />
5-
<RouterView />
6-
</div>
3+
<Toaster class="pointer-events-auto" position="top-center" richColors />
4+
<RouterView />
75
</TooltipProvider>
86
</template>
97

‎frontend/src/assets/styles/main.scss

Lines changed: 44 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -61,10 +61,39 @@
6161
}
6262
}
6363
}
64-
}
64+
:root {
65+
--sidebar-background: 0 0% 99%;
66+
--sidebar-foreground: 240 5.3% 26.1%;
67+
--sidebar-primary: 240 5.9% 10%;
68+
--sidebar-primary-foreground: 0 0% 98%;
69+
--sidebar-accent: 240 4.8% 95.9%;
70+
--sidebar-accent-foreground: 240 5.9% 10%;
71+
--sidebar-border: 220 13% 91%;
72+
--sidebar-ring: 217.2 91.2% 59.8%;
73+
}
74+
.dark {
75+
--sidebar-background: 240 5.9% 10%;
76+
--sidebar-foreground: 240 4.8% 95.9%;
77+
--sidebar-primary: 224.3 76.3% 48%;
78+
--sidebar-primary-foreground: 0 0% 100%;
79+
--sidebar-accent: 240 3.7% 15.9%;
80+
--sidebar-accent-foreground: 240 4.8% 95.9%;
81+
--sidebar-border: 240 3.7% 15.9%;
82+
--sidebar-ring: 217.2 91.2% 59.8%;
83+
}
84+
85+
:root {
86+
--vis-tooltip-background-color: none !important;
87+
--vis-tooltip-border-color: none !important;
88+
--vis-tooltip-text-color: none !important;
89+
--vis-tooltip-shadow-color: none !important;
90+
--vis-tooltip-backdrop-filter: none !important;
91+
--vis-tooltip-padding: none !important;
92+
--vis-primary-color: var(--primary);
93+
--vis-secondary-color: 160 81% 40%;
94+
--vis-text-color: var(--muted-foreground);
95+
}
6596

66-
// Theme.
67-
@layer base {
6897
:root {
6998
--background: 0 0% 100%;
7099
--foreground: 240 10% 3.9%;
@@ -127,64 +156,8 @@
127156
}
128157
}
129158

130-
@layer base {
131-
:root {
132-
--vis-tooltip-background-color: none !important;
133-
--vis-tooltip-border-color: none !important;
134-
--vis-tooltip-text-color: none !important;
135-
--vis-tooltip-shadow-color: none !important;
136-
--vis-tooltip-backdrop-filter: none !important;
137-
--vis-tooltip-padding: none !important;
138-
--vis-primary-color: var(--primary);
139-
--vis-secondary-color: 160 81% 40%;
140-
--vis-text-color: var(--muted-foreground);
141-
}
142-
}
143-
144-
// Shake animation
145-
@keyframes shake {
146-
0% {
147-
transform: translateX(0);
148-
}
149-
15% {
150-
transform: translateX(-5px);
151-
}
152-
25% {
153-
transform: translateX(5px);
154-
}
155-
35% {
156-
transform: translateX(-5px);
157-
}
158-
45% {
159-
transform: translateX(5px);
160-
}
161-
55% {
162-
transform: translateX(-5px);
163-
}
164-
65% {
165-
transform: translateX(5px);
166-
}
167-
75% {
168-
transform: translateX(-5px);
169-
}
170-
85% {
171-
transform: translateX(5px);
172-
}
173-
95% {
174-
transform: translateX(-5px);
175-
}
176-
100% {
177-
transform: translateX(0);
178-
}
179-
}
180-
181-
.animate-shake {
182-
animation: shake 0.5s infinite;
183-
}
184-
185159
.message-bubble {
186-
@apply flex flex-col px-4 pt-2 pb-3 w-fit min-w-[30%] max-w-full border overflow-x-auto rounded-xl;
187-
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
160+
@apply flex flex-col px-4 pt-2 pb-3 w-fit min-w-[30%] max-w-full border overflow-x-auto rounded shadow-sm;
188161
table {
189162
width: 100% !important;
190163
table-layout: fixed !important;
@@ -200,7 +173,7 @@
200173
}
201174

202175
.box {
203-
@apply border shadow rounded-lg;
176+
@apply border shadow rounded;
204177
}
205178

206179
// Scrollbar start
@@ -227,84 +200,9 @@
227200
// End Scrollbar
228201

229202
.code-editor {
230-
@apply rounded-md border shadow h-[65vh] min-h-[250px] w-full relative;
231-
}
232-
233-
.ql-container {
234-
margin: 0 !important;
235-
}
236-
237-
.ql-container .ql-editor {
238-
height: 300px !important;
239-
border-radius: var(--radius) !important;
240-
@apply rounded-lg rounded-t-none;
241-
}
242-
243-
.ql-toolbar {
244-
@apply rounded-t-lg;
245-
}
246-
247-
.blinking-dot {
248-
display: inline-block;
249-
width: 8px;
250-
height: 8px;
251-
background-color: red;
252-
border-radius: 50%;
253-
animation: blink 2s infinite;
254-
}
255-
256-
@keyframes blink {
257-
0%,
258-
100% {
259-
opacity: 1;
260-
}
261-
50% {
262-
opacity: 0;
263-
}
203+
@apply rounded border shadow h-[65vh] min-h-[250px] w-full relative;
264204
}
265205

266-
// Sidebar start
267-
@layer base {
268-
:root {
269-
--sidebar-background: 0 0% 96%;
270-
--sidebar-foreground: 240 5.3% 26.1%;
271-
--sidebar-primary: 240 5.9% 10%;
272-
--sidebar-primary-foreground: 0 0% 98%;
273-
--sidebar-accent: 240 4.8% 95.9%;
274-
--sidebar-accent-foreground: 240 5.9% 10%;
275-
--sidebar-border: 220 13% 91%;
276-
--sidebar-ring: 217.2 91.2% 59.8%;
277-
}
278-
279-
.dark {
280-
--sidebar-background: 240 5.9% 10%;
281-
--sidebar-foreground: 240 4.8% 95.9%;
282-
--sidebar-primary: 224.3 76.3% 48%;
283-
--sidebar-primary-foreground: 0 0% 100%;
284-
--sidebar-accent: 240 3.7% 15.9%;
285-
--sidebar-accent-foreground: 240 4.8% 95.9%;
286-
--sidebar-border: 240 3.7% 15.9%;
287-
--sidebar-ring: 217.2 91.2% 59.8%;
288-
}
289-
}
290-
a[data-active='true'] {
291-
background-color: hsl(var(--sidebar-background)) !important;
292-
color: hsl(var(--sidebar-accent-foreground)) !important;
293-
font-weight: 500;
294-
transition:
295-
background-color 0.2s,
296-
color 0.2s;
297-
}
298-
a[data-active='false']:hover {
299-
background-color: hsl(var(--sidebar-accent)) !important;
300-
color: hsl(var(--sidebar-accent-foreground)) !important;
301-
font-weight: 500;
302-
transition:
303-
background-color 0.2s,
304-
color 0.2s;
305-
}
306-
// Sidebar end
307-
308206
.show-quoted-text {
309207
blockquote {
310208
@apply block;
@@ -358,3 +256,12 @@ a[data-active='false']:hover {
358256
@apply text-blue-500 hover:underline;
359257
}
360258
}
259+
260+
@layer base {
261+
* {
262+
@apply border-border;
263+
}
264+
body {
265+
@apply bg-background text-foreground;
266+
}
267+
}

‎frontend/src/components/datatable/DataTable.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div class="w-full">
3-
<div class="rounded-md border shadow">
3+
<div class="rounded border shadow">
44
<Table>
55
<TableHeader>
66
<TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">

‎frontend/src/components/layout/MenuCard.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div
3-
class="flex flex-col p-4 border rounded-lg shadow-sm hover:shadow transition-colors cursor-pointer max-w-xs"
3+
class="flex flex-col p-4 border rounded shadow-sm hover:shadow transition-colors cursor-pointer max-w-xs"
44
@click="handleClick">
55
<div class="flex items-center mb-2">
66
<component :is="icon" size="24" class="mr-2 text-primary" />

‎frontend/src/components/layout/PageHeader.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<template>
22
<div v-if="!isHidden">
33
<div class="flex items-center space-x-4 h-12 px-2">
4-
<SidebarTrigger class="cursor-pointer w-4 h-4" />
5-
<span class="text-xl font-semibold text-gray-800">
4+
<SidebarTrigger class="cursor-pointer" />
5+
<span class="text-xl font-semibold">
66
{{ title }}
77
</span>
88
</div>

0 commit comments

Comments
 (0)