Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 88f89ed

Browse files
[feat]: Implement theme switching
[feat]: Updated app dependencies [style]: Improved application user interface
1 parent cc8562d commit 88f89ed

19 files changed

+875
-664
lines changed

‎components/app/Header.tsx‎

Lines changed: 27 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,24 +8,41 @@ import { UserButton } from "@clerk/nextjs";
88
import { ChangeEvent, Dispatch, SetStateAction } from "react";
99
import { typeUpldState } from "@/types/appx";
1010

11+
import LightImage from "@/public/assets/TransparentBlob White.png";
12+
import DarkImage from "@/public/assets/TransparentBlob Color.png";
13+
1114
type HeaderProp = {
1215
uploadFile: (event: ChangeEvent<HTMLInputElement>) => Promise<void>;
13-
setOpen: Dispatch<SetStateAction<boolean>>
14-
open: boolean
15-
uploadState: typeUpldState
16-
}
16+
setOpen: Dispatch<SetStateAction<boolean>>;
17+
open: boolean;
18+
uploadState: typeUpldState;
19+
};
1720

18-
export default function Header({ uploadFile, setOpen, open, uploadState }:HeaderProp) {
21+
export default function Header({
22+
uploadFile,
23+
setOpen,
24+
open,
25+
uploadState,
26+
}: HeaderProp) {
1927
return (
20-
<header className="fixed top-0 w-full z-10 md:p-3 md:px-10 lg:p-3 lg:px-10 p-4 bg-darkestbg/70 backdrop-blur-md border border-transparent border-b-borderbtm flex items-center justify-between">
28+
<header className="fixed top-0 w-full z-10 md:p-3 md:px-10 lg:p-3 lg:px-10 p-4 bg-white/30 dark:bg-darkestbg/70 backdrop-blur-md border border-transparent border-b-borderbtm/20 dark:border-b-borderbtm flex items-center justify-between">
2129
<div className="">
2230
<Link href="/dashboard">
2331
<Image
24-
src="/assets/TransparentBlob White.png"
32+
src={DarkImage}
33+
width={150}
34+
height={42}
35+
placeholder="blur"
36+
className="md:w-[150px] lg:w-[150px] w-[120px] block dark:hidden"
37+
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII="
38+
alt="forget logo"
39+
/>
40+
<Image
41+
src={LightImage}
2542
width={150}
2643
height={42}
2744
placeholder="blur"
28-
className="md:w-[150px] lg:w-[150px] w-[120px]"
45+
className="md:w-[150px] lg:w-[150px] w-[120px] hidden dark:block"
2946
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII="
3047
alt="forget logo"
3148
/>
@@ -57,7 +74,7 @@ export default function Header({ uploadFile, setOpen, open, uploadState }:Header
5774
</span>
5875
</Label>
5976
<Button
60-
className="bg-white hover:bg-midwhite text-darkestbg rounded md:flex lg:flex hidden items-center gap-1"
77+
className="bg-darkestbg dark:bg-darkbtn hover:bg-thirdprop hover:dark:bg-borderbtm text-white dark:text-white rounded md:flex lg:flex hidden items-center gap-1"
6178
onClick={() => setOpen(!open)}
6279
>
6380
Menu
@@ -66,4 +83,4 @@ export default function Header({ uploadFile, setOpen, open, uploadState }:Header
6683
</nav>
6784
</header>
6885
);
69-
}
86+
}

‎components/app/bill/Header.tsx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import Link from "next/link";
2+
import Image from "next/image";
3+
import LightImage from "@/public/assets/TransparentBlob White.png";
4+
import DarkImage from "@/public/assets/TransparentBlob Color.png";
5+
import { UserButton } from "@clerk/nextjs";
6+
import { useRouter } from "next/router";
7+
8+
export default function Header() {
9+
const router = useRouter();
10+
const getPath = router.pathname;
11+
return (
12+
<header className="fixed top-0 w-full z-10 md:p-3 md:px-10 lg:p-3 lg:px-10 p-4 bg-white/70 dark:bg-darkestbg/70 backdrop-blur-md border border-transparent border-b-whitebg dark:border-b-borderbtm flex items-center justify-between">
13+
<div className="">
14+
<Link href="/dashboard">
15+
<Image
16+
src={DarkImage}
17+
width={150}
18+
height={42}
19+
placeholder="blur"
20+
className="md:w-[150px] lg:w-[150px] w-[120px] block dark:hidden"
21+
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII="
22+
alt="forget logo"
23+
/>
24+
<Image
25+
src={LightImage}
26+
width={150}
27+
height={42}
28+
placeholder="blur"
29+
className="md:w-[150px] lg:w-[150px] w-[120px] hidden dark:block"
30+
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII="
31+
alt="forget logo"
32+
/>
33+
</Link>
34+
</div>
35+
<nav className="flex items-center md:gap-4 lg:gap-4">
36+
{/* account */}
37+
<Link
38+
href="/dashboard"
39+
className="flex items-center gap-1 text-blackmid dark:text-lightgrey bg-transparent transition-colors hover:text-thirdprop hover:dark:text-white p-2 rounded-md"
40+
>
41+
Dashboard
42+
</Link>
43+
{getPath === "/billing" ? (
44+
<Link
45+
href="/settings"
46+
className="flex items-center gap-1 text-blackmid dark:text-lightgrey bg-transparent transition-colors hover:text-thirdprop hover:dark:text-white p-2 rounded-md"
47+
>
48+
Settings
49+
</Link>
50+
) : (
51+
getPath === "/settings" && (
52+
<Link
53+
href="/billing"
54+
className="flex items-center gap-1 text-blackmid dark:text-lightgrey bg-transparent transition-colors hover:text-thirdprop hover:dark:text-white p-2 rounded-md"
55+
>
56+
Billing
57+
</Link>
58+
)
59+
)}
60+
61+
<UserButton />
62+
</nav>
63+
</header>
64+
);
65+
}

‎components/app/command-bx.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -22,36 +22,36 @@ export function CommandBx({ open, setOpen }: CommandProp) {
2222
<CommandDialog open={open} onOpenChange={setOpen}>
2323
<CommandInput
2424
placeholder="Type a command or search..."
25-
className="text-white"
25+
className="dark:text-white text-blackmid"
2626
/>
2727
<CommandList>
28-
<CommandEmpty className="text-white p-4 flex items-center justify-center">
28+
<CommandEmpty className="dark:text-white text-blackmid p-4 flex items-center justify-center">
2929
No results found.
3030
</CommandEmpty>
31-
<CommandGroup heading="Suggestions" className="text-white/50">
31+
<CommandGroup heading="Suggestions" className="dark:text-white/50 text-hovergrey">
3232
<Link href="/settings/2FA">
3333
<CommandItem>
34-
<span className="text-white text-base">Enable 2FA</span>
34+
<span className="dark:text-white text-blackmid text-base">Enable 2FA</span>
3535
</CommandItem>
3636
</Link>
3737
</CommandGroup>
3838
<CommandSeparator />
39-
<CommandGroup heading="App" className="text-white/50">
39+
<CommandGroup heading="App" className="dark:text-white/50 text-hovergrey">
4040
<Link href="/profifle">
4141
<CommandItem>
42-
<span className="text-white text-base">Profile</span>
42+
<span className="dark:text-white text-blackmid text-base">Profile</span>
4343
<CommandShortcut>⌘P</CommandShortcut>
4444
</CommandItem>
4545
</Link>
4646
<Link href="/billing">
4747
<CommandItem>
48-
<span className="text-white text-base">Billing</span>
48+
<span className="dark:text-white text-blackmid text-base">Billing</span>
4949
<CommandShortcut>⌘B</CommandShortcut>
5050
</CommandItem>
5151
</Link>
5252
<Link href="/settings">
5353
<CommandItem>
54-
<span className="text-white text-base">Settings</span>
54+
<span className="dark:text-white text-blackmid text-base">Settings</span>
5555
<CommandShortcut>⌘S</CommandShortcut>
5656
</CommandItem>
5757
</Link>

‎components/studio/Files.tsx‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@ export default function Files({
128128
return (
129129
<section className="flex flex-col gap-8 mt-8">
130130
<article>
131-
<h3 className="text-white md:text-2xl lg:text-2xl text-xl">
131+
<h3 className="dark:text-white text-darkestbg md:text-2xl lg:text-2xl text-xl">
132132
Your files
133133
</h3>
134134
</article>
@@ -137,17 +137,17 @@ export default function Files({
137137
) : (
138138
<Table>
139139
{files.length !== 0 && isErr && (
140-
<TableCaption className="text-lightgrey/70">
140+
<TableCaption className="dark:text-lightgrey/70 text-darkestbg">
141141
A list of your uploaded files.
142142
</TableCaption>
143143
)}
144144
<TableHeader>
145-
<TableRow className="border border-transparent border-b-borderbtm/80 bg-[#282c34]/50 hover:bg-[#282c34]/50">
146-
<TableHead className="text-white">Name</TableHead>
147-
<TableHead className="text-white">Type</TableHead>
148-
<TableHead className="text-white">Size</TableHead>
149-
<TableHead className="text-white">Created</TableHead>
150-
<TableHead className="text-white"></TableHead>
145+
<TableRow className="border border-transparent dark:border-b-borderbtm/80 border-b-hashtext dark:bg-[#282c34]/50 bg-white hover:dark:bg-[#282c34]/50 hover:bg-white">
146+
<TableHead className="dark:text-white">Name</TableHead>
147+
<TableHead className="dark:text-white">Type</TableHead>
148+
<TableHead className="dark:text-white">Size</TableHead>
149+
<TableHead className="dark:text-white">Created</TableHead>
150+
<TableHead className="dark:text-white"></TableHead>
151151
</TableRow>
152152
</TableHeader>
153153
<TableBody>
@@ -156,18 +156,18 @@ export default function Files({
156156
return (
157157
<TableRow
158158
key={item.uploadID}
159-
className="cursor-pointer border border-transparent border-b-borderbtm/80 bg-[#282c34]/50 hover:bg-[#282c34]/30"
159+
className="cursor-pointer border border-transparent dark:border-b-borderbtm/80 border-b-hashtext dark:bg-[#282c34]/50 bg-white hover:dark:bg-[#282c34]/30 hover:bg-[#bfbfbf]/20"
160160
>
161161
<TableCell
162-
className="text-midwhite2"
162+
className="dark:text-midwhite2 text-blackmid dark:font-normal font-medium"
163163
onClick={() =>
164164
router.push(`/file/${item.uploadID}`)
165165
}
166166
>
167167
{item.filename.substring(0, 10) + "..."}
168168
</TableCell>
169169
<TableCell
170-
className="text-midwhite2"
170+
className="dark:text-midwhite2 text-blackmid dark:font-normal font-medium"
171171
onClick={() =>
172172
router.push(`/file/${item.uploadID}`)
173173
}
@@ -176,15 +176,15 @@ export default function Files({
176176
</TableCell>
177177

178178
<TableCell
179-
className="text-midwhite2"
179+
className="dark:text-midwhite2 text-blackmid dark:font-normal font-medium"
180180
onClick={() =>
181181
router.push(`/file/${item.uploadID}`)
182182
}
183183
>
184184
{item.filesize}
185185
</TableCell>
186186
<TableCell
187-
className="text-midwhite2"
187+
className="dark:text-midwhite2 text-blackmid dark:font-normal font-medium"
188188
onClick={() =>
189189
router.push(`/file/${item.uploadID}`)
190190
}
@@ -197,12 +197,12 @@ export default function Files({
197197
>
198198
<DropdownMenu>
199199
<DropdownMenuTrigger asChild>
200-
<MoreHorizontal className="cursor-pointer w-4 h-4 text-white" />
200+
<MoreHorizontal className="cursor-pointer w-4 h-4 dark:text-white text-black" />
201201
</DropdownMenuTrigger>
202-
<DropdownMenuContent className="bg-[#111213] border border-darkbtn p-4 w-48 rounded-md">
202+
<DropdownMenuContent className="dark:bg-[#111213] bg-white shadow-lg dark:shadow-none border border-[#bfbfbf] dark:border-hovergrey p-4 w-48 rounded-md">
203203
<nav className="flex flex-col gap-2">
204204
<DropdownMenuItem
205-
className="p-3 bg-transparent transition-colors hover:bg-hovergrey cursor-pointer select-none rounded-md text-midwhite border-none outline-none flex items-center justify-between gap-2"
205+
className="p-3 bg-transparent transition-colors hover:bg-[#bfbfbf]/30 hover:dark:bg-hovergrey cursor-pointer select-none rounded-md text-blackmid dark:text-midwhite border-none outline-none flex items-center justify-between gap-2"
206206
onClick={() =>
207207
OpenModal(item.filename, item.uploadID)
208208
}
@@ -212,7 +212,7 @@ export default function Files({
212212
<Forward className="w-4 h-4" />
213213
</DropdownMenuItem>
214214
<DropdownMenuItem
215-
className="p-3 bg-transparent transition-colors hover:bg-hovergrey cursor-pointer select-none rounded-md text-midwhite border-none outline-none flex items-center justify-between gap-2"
215+
className="p-3 bg-transparent transition-colors hover:bg-[#bfbfbf]/30 hover:dark:bg-hovergrey cursor-pointer select-none rounded-md text-blackmid dark:text-midwhite border-none outline-none flex items-center justify-between gap-2"
216216
onClick={() =>
217217
deleteFile(item.filename, item.uploadID)
218218
}

‎components/studio/uploadSection.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export default function UploadSection({ uploadFile }:upxType) {
1313
return (
1414
<section className="mt-8">
1515
<article>
16-
<h3 className="text-white md:text-2xl lg:text-2xl text-xl">
16+
<h3 className="text-blackmid dark:text-white md:text-2xl lg:text-2xl text-xl">
1717
Upload files
1818
</h3>
1919
</article>
@@ -26,16 +26,16 @@ export default function UploadSection({ uploadFile }:upxType) {
2626
onChange={uploadFile}
2727
/>
2828
<Label htmlFor="upload-file">
29-
<div className="cursor-pointer flex flex-col gap-4 items-center justify-center text-center border-2 border-dashed border-containerBG p-4 transition-all rounded-lg hover:rounded mt-4">
30-
<div className="w-12 h-12 flex items-center justify-center rounded-full bg-fileicon">
31-
<FileUp className="w-9 h-9 text-darkerblue" />
29+
<div className="cursor-pointer flex flex-col gap-4 items-center justify-center text-center border-2 border-dashed border-borderbtm/40 dark:border-containerBG p-4 transition-all rounded-lg hover:rounded mt-4">
30+
<div className="w-12 h-12 flex items-center justify-center rounded-full dark:bg-fileicon">
31+
<FileUp className="w-9 h-9 dark:text-darkerblue text-royalglue" />
3232
</div>
3333

3434
<article className="flex flex-col gap-2">
35-
<p className="md:text-3xl lg:text-3xl text-xl font-normal text-white">
36-
<span className="text-gradedtext">Browse</span> File
35+
<p className="md:text-3xl lg:text-3xl text-xl font-normal dark:text-white text-blackmid">
36+
<span className="dark:text-gradedtext text-[#214fad]">Browse</span> File
3737
</p>
38-
<span className="md:text-sm lg:text-sm text-xs text-hashtext">
38+
<span className="md:text-sm lg:text-sm text-xs dark:text-hashtext text-darkbtn">
3939
Max: 20MB, Supports: PNG, JPEG, JPG, AVIF, MP4
4040
</span>
4141
</article>

‎components/theme-provider.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import * as React from "react"
2+
import { ThemeProvider as NextThemesProvider } from "next-themes"
3+
import { type ThemeProviderProps } from "next-themes/dist/types"
4+
5+
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
6+
return <NextThemesProvider {...props}>{children}</NextThemesProvider>
7+
}

‎components/ui/command.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const Command = React.forwardRef<
1313
<CommandPrimitive
1414
ref={ref}
1515
className={cn(
16-
"flex h-full w-full flex-col overflow-hidden rounded-md bg-blackmid/40 backdrop-blur-md shadow-md text-white",
16+
"flex h-full w-full flex-col overflow-hidden rounded-md dark:bg-blackmid/40 bg-white/40 backdrop-blur-md shadow-md dark:text-white text-blackmid",
1717
className
1818
)}
1919
{...props}
@@ -115,7 +115,7 @@ const CommandItem = React.forwardRef<
115115
<CommandPrimitive.Item
116116
ref={ref}
117117
className={cn(
118-
"relative flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none aria-selected:bg-darkbtn aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
118+
"relative flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none aria-selected:dark:bg-darkbtn aria-selected:bg-borderbtm/10 aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
119119
className
120120
)}
121121
{...props}

‎components/ui/toast.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const toastVariants = cva(
2727
{
2828
variants: {
2929
variant: {
30-
default: "border border-borderbtm/70 bg-darkestbg/70 backdrop-blur-md text-white",
30+
default: "border dark:border-borderbtm/70 border-borderbtm/40 dark:bg-darkestbg/70 bg-white backdrop-blur-md dark:text-white text-blackmid",
3131
destructive:
3232
"border border-danger_red/50 bg-danger_red text-danger_forground",
3333
},

‎package.json‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "stashblob",
3-
"version": "0.4.2",
3+
"version": "0.5.2",
44
"private": true,
55
"scripts": {
66
"dev": "next dev",
@@ -9,7 +9,7 @@
99
"lint": "next lint"
1010
},
1111
"dependencies": {
12-
"@clerk/nextjs": "^4.26.1",
12+
"@clerk/nextjs": "^4.27.1",
1313
"@clerk/themes": "^1.7.9",
1414
"@radix-ui/react-alert-dialog": "^1.0.5",
1515
"@radix-ui/react-dialog": "^1.0.5",
@@ -21,26 +21,27 @@
2121
"@radix-ui/react-toast": "^1.1.5",
2222
"@supabase/supabase-js": "^2.38.4",
2323
"appwrite": "^13.0.0",
24-
"axios": "^1.6.0",
24+
"axios": "^1.6.1",
2525
"class-variance-authority": "^0.7.0",
2626
"clsx": "^2.0.0",
2727
"cmdk": "^0.2.0",
28-
"lucide-react": "^0.290.0",
29-
"next": "14.0.0",
28+
"lucide-react": "^0.292.0",
29+
"next": "14.0.2",
30+
"next-themes": "^0.2.1",
3031
"react": "^18.2.0",
3132
"react-dom": "^18.2.0",
3233
"react-loader-spinner": "^5.4.5",
3334
"react-player": "^2.13.0",
34-
"tailwind-merge": "^1.14.0",
35+
"tailwind-merge": "^2.0.0",
3536
"tailwindcss-animate": "^1.0.7"
3637
},
3738
"devDependencies": {
38-
"@types/node": "^20.8.9",
39-
"@types/react": "^18.2.33",
40-
"@types/react-dom": "^18.2.14",
39+
"@types/node": "^20.9.0",
40+
"@types/react": "^18.2.37",
41+
"@types/react-dom": "^18.2.15",
4142
"autoprefixer": "^10.4.16",
42-
"eslint": "^8.52.0",
43-
"eslint-config-next": "14.0.0",
43+
"eslint": "^8.53.0",
44+
"eslint-config-next": "14.0.2",
4445
"postcss": "^8.4.31",
4546
"tailwindcss": "^3.3.5",
4647
"typescript": "^5.2.2"

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /