Skip to content

Commit 36e4316

Browse files
psykat1116psykat1116
committed
Add Dark Mode To All Models & Add Background
1 parent 85d314b commit 36e4316

File tree

20 files changed

+184
-73
lines changed

20 files changed

+184
-73
lines changed

‎app/(auth)/(routes)/sign-in/[[...sign-in]]/page.tsx

+7-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
import { SignIn } from "@clerk/nextjs";
2-
2+
33
export default function Page() {
4-
return <SignIn />;
5-
}
4+
return (
5+
<div className="h-full w-full bg-[url('/Background.png')] bg-cover bg-center bg-no-repeat z-1 flex justify-center items-center">
6+
<SignIn />
7+
</div>
8+
);
9+
}

‎app/(auth)/(routes)/sign-up/[[...sign-up]]/page.tsx

+7-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
import { SignUp } from "@clerk/nextjs";
2-
2+
33
export default function Page() {
4-
return <SignUp />;
5-
}
4+
return (
5+
<div className="h-full w-full bg-[url('/Background.png')] bg-cover bg-center bg-no-repeat z-1 flex justify-center items-center">
6+
<SignUp />
7+
</div>
8+
);
9+
}

‎app/(auth)/layout.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
import React from "react";
22

33
const AuthLayout = ({ children }: { children: React.ReactNode }) => {
4-
return <div className="h-full flex justify-center items-center">{children}</div>;
4+
return (
5+
<div className="h-full w-full flex justify-center items-center">
6+
{children}
7+
</div>
8+
);
59
};
610

711
export default AuthLayout;

‎app/(invite)/(routes)/invite/[inviteCode]/page.tsx

+15-13
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import InviteBox from "@/components/InviteBox";
12
import { currentProfile } from "@/lib/currentProfile";
23
import { db } from "@/lib/db";
34
import { RedirectToSignIn } from "@clerk/nextjs";
@@ -34,26 +35,27 @@ const Page: React.FC<InvitePageProps> = async ({ params }) => {
3435
return redirect(`/servers/${existingServer.id}`);
3536
}
3637

37-
const server = await db.server.update({
38+
const serverData = await db.server.findFirst({
3839
where: {
3940
inviteCode: params.inviteCode,
4041
},
41-
data: {
42-
members: {
43-
create: [
44-
{
45-
profileId: profile.id,
46-
},
47-
],
48-
},
49-
},
42+
include: {
43+
profile: true,
44+
}
5045
});
5146

52-
if (server) {
53-
return redirect(`/servers/${server.id}`);
47+
if (!serverData) {
48+
return redirect("/");
5449
}
5550

56-
return null;
51+
return (
52+
<div className="w-full h-full flex items-center justify-center bg-[url('/Background.png')] bg-cover bg-center bg-no-repeat">
53+
<InviteBox
54+
profile={profile}
55+
serverData={serverData}
56+
/>
57+
</div>
58+
);
5759
};
5860

5961
export default Page;

‎app/(setup)/page.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,11 @@ const Page = async () => {
1818
if (server) {
1919
return redirect(`/servers/${server.id}`);
2020
}
21-
return <InitialModal/>;
21+
return (
22+
<div className="h-full w-full flex justify-center items-center bg-[url('/Background.png')] bg-no-repeat bg-cover bg-center">
23+
<InitialModal />
24+
</div>
25+
);
2226
};
2327

2428
export default Page;

‎components/FileUpload.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ const FileUpload: React.FC<FileUploadProps> = ({
6565
onUploadError={(error: Error) => {
6666
console.log(error);
6767
}}
68+
className="border-dashed border-2 border-gray-300 dark:border-gray-700 rounded-md p-4 flex flex-col items-center justify-center text-center cursor-pointer hover:border-gray-400 dark:hover:border-gray-600 transition-colors"
6869
></UploadDropzone>
6970
);
7071
};

‎components/InviteBox.tsx

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
"use client";
2+
import { db } from "@/lib/db";
3+
import { Profile, Server } from "@prisma/client";
4+
import Image from "next/image";
5+
import { redirect, useParams } from "next/navigation";
6+
import React from "react";
7+
8+
interface InviteBoxProps {
9+
profile: Profile;
10+
serverData: Server & { profile: Profile };
11+
}
12+
13+
const InviteBox = ({ profile, serverData }: InviteBoxProps) => {
14+
const params = useParams();
15+
const { inviteCode } = params as { inviteCode: string };
16+
const handleClicked = async () => {
17+
try {
18+
const server = await db.server.update({
19+
where: {
20+
inviteCode: inviteCode,
21+
},
22+
data: {
23+
members: {
24+
create: [
25+
{
26+
profileId: profile.id,
27+
},
28+
],
29+
},
30+
},
31+
});
32+
if (server) {
33+
return redirect(`/servers/${server.id}`);
34+
}
35+
} catch (error) {
36+
console.log(error);
37+
}
38+
};
39+
40+
return (
41+
<div className="w-full sm:w-[500px] p-5 flex flex-col items-center bg-[#232323] gap-3 rounded-sm shadow-md">
42+
<Image
43+
src={serverData?.imageUrl}
44+
alt={serverData.name}
45+
height={70}
46+
width={70}
47+
className="object-cover rounded-sm"
48+
/>
49+
<p className="text-base text-neutral-400 capitalize">
50+
{serverData.profile.name} Invited you to join the Server
51+
</p>
52+
<p className="text-2xl mb-3">{serverData.name}</p>
53+
<button
54+
className="w-full bg-indigo-500 p-2.5 text-lg rounded-sm"
55+
onClick={handleClicked}
56+
>
57+
Accept Invite
58+
</button>
59+
</div>
60+
);
61+
};
62+
63+
export default InviteBox;

‎components/modals/CreateChannel.tsx

+18-8
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import { useParams, useRouter } from "next/navigation";
3232
import useModal from "@/hooks/useModal";
3333
import { ChannelType } from "@prisma/client";
3434
import qs from "query-string";
35+
import Image from "next/image";
3536

3637
const formSchema = z.object({
3738
name: z
@@ -91,10 +92,17 @@ const CreateChannel = () => {
9192

9293
return (
9394
<Dialog open={isModalOpen} onOpenChange={handleClose}>
94-
<DialogContent className="bg-white text-black p-0 overflow-hidden">
95+
<DialogContent className="bg-white dark:bg-[#1e1f22] text-black dark:text-white p-0 overflow-hidden">
9596
<DialogHeader className="pt-8 px-6">
96-
<DialogTitle className="text-2xl text-center font-bold">
97-
Create Channel
97+
<DialogTitle className="text-2xl text-left font-bold">
98+
<Image
99+
src="/logo.png"
100+
alt="logo"
101+
width={55}
102+
height={55}
103+
className="object-cover mb-5"
104+
/>
105+
Create New Channel
98106
</DialogTitle>
99107
</DialogHeader>
100108
<Form {...form}>
@@ -105,13 +113,13 @@ const CreateChannel = () => {
105113
name="name"
106114
render={({ field }) => (
107115
<FormItem>
108-
<FormLabel className="uppercase text-xs font-bold text-zinc-500 dark:text-secondary/70">
116+
<FormLabel className="uppercase text-xs font-bold text-zinc-800 dark:text-zinc-400">
109117
Channel Name
110118
</FormLabel>
111119
<FormControl>
112120
<Input
113121
disabled={isLoading}
114-
className="bg-zinc-300/50 border-0 focus-visible:ring-0 text-black focus-visible:ring-offset-0"
122+
className="bg-zinc-300/50 dark:bg-zinc-900 border-0 focus-visible:ring-0 text-black dark:text-white focus-visible:ring-offset-0"
115123
placeholder="Enter Channel name"
116124
{...field}
117125
/>
@@ -125,14 +133,16 @@ const CreateChannel = () => {
125133
name="type"
126134
render={({ field }) => (
127135
<FormItem>
128-
<FormLabel>Channel Type</FormLabel>
136+
<FormLabel className="uppercase text-xs font-bold text-zinc-800 dark:text-zinc-400">
137+
Channel Type
138+
</FormLabel>
129139
<Select
130140
disabled={isLoading}
131141
onValueChange={field.onChange}
132142
defaultValue={field.value}
133143
>
134144
<FormControl>
135-
<SelectTrigger className="bg-zinc-300/50 border-0 focus:ring-0 text-black ring-offset-0 capitalize focus:ring-offset-0 outline-none">
145+
<SelectTrigger className="bg-zinc-300/50 dark:bg-zinc-900 border-0 focus:ring-0 text-black dark:text-white ring-offset-0 capitalize focus:ring-offset-0 outline-none">
136146
<SelectValue placeholder="Select a channel type" />
137147
</SelectTrigger>
138148
</FormControl>
@@ -151,7 +161,7 @@ const CreateChannel = () => {
151161
)}
152162
/>
153163
</div>
154-
<DialogFooter className="bg-gray-100 px-6 py-4">
164+
<DialogFooter className="bg-gray-100 dark:bg-[#383338] px-6 py-4">
155165
<Button disabled={isLoading} variant="primary">
156166
Create
157167
</Button>

‎components/modals/CreateServer.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ const CreateServer = () => {
6464

6565
return (
6666
<Dialog open={isModalOpen} onOpenChange={handleClose}>
67-
<DialogContent className="bg-white text-black p-0 overflow-hidden">
67+
<DialogContent className="bg-white dark:bg-[#1e1f22] text-black dark:text-white p-0 overflow-hidden">
6868
<DialogHeader className="pt-8 px-6">
6969
<DialogTitle className="text-2xl text-center font-bold">
7070
Customize Your Server
@@ -99,13 +99,13 @@ const CreateServer = () => {
9999
name="name"
100100
render={({ field }) => (
101101
<FormItem>
102-
<FormLabel className="uppercase text-xs font-bold text-zinc-500 dark:text-secondary/70">
102+
<FormLabel className="uppercase text-xs font-bold text-zinc-800 dark:text-zinc-400">
103103
Server Name
104104
</FormLabel>
105105
<FormControl>
106106
<Input
107107
disabled={isLoading}
108-
className="bg-zinc-300/50 border-0 focus-visible:ring-0 text-black focus-visible:ring-offset-0"
108+
className="bg-zinc-300/50 dark:bg-zinc-900 border-0 focus-visible:ring-0 text-black dark:text-white focus-visible:ring-offset-0"
109109
placeholder="Enter server name"
110110
{...field}
111111
/>
@@ -115,7 +115,7 @@ const CreateServer = () => {
115115
)}
116116
/>
117117
</div>
118-
<DialogFooter className="bg-gray-100 px-6 py-4">
118+
<DialogFooter className="bg-gray-100 dark:bg-[#383338] px-6 py-4">
119119
<Button disabled={isLoading} variant="primary">
120120
Create
121121
</Button>

‎components/modals/DeleteChannel.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ const DeleteChannel = () => {
4343

4444
return (
4545
<Dialog open={isModalOpen} onOpenChange={onClose}>
46-
<DialogContent className="bg-white text-black p-0 overflow-hidden">
46+
<DialogContent className="bg-white dark:bg-[#1e1f22] text-black dark:text-white p-0 overflow-hidden">
4747
<DialogHeader className="pt-8 px-6">
4848
<DialogTitle className="text-2xl text-center font-bold">
4949
Delete Channel
@@ -57,7 +57,7 @@ const DeleteChannel = () => {
5757
will be permanently deleted.
5858
</DialogDescription>
5959
</DialogHeader>
60-
<DialogFooter className="bg-gray-100 px-6 py-4">
60+
<DialogFooter className="bg-gray-100 dark:bg-[#383338] px-6 py-4">
6161
<div className="flex items-center justify-between w-full">
6262
<Button disabled={loading} onClick={onClose} variant="ghost">
6363
Cancel

‎components/modals/DeleteMessage.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const DeleteMessage = () => {
3737

3838
return (
3939
<Dialog open={isModalOpen} onOpenChange={onClose}>
40-
<DialogContent className="bg-white text-black p-0 overflow-hidden">
40+
<DialogContent className="bg-white dark:bg-[#1e1f22] text-black dark:text-white p-0 overflow-hidden">
4141
<DialogHeader className="pt-8 px-6">
4242
<DialogTitle className="text-2xl text-center font-bold">
4343
Delete Message
@@ -48,7 +48,7 @@ const DeleteMessage = () => {
4848
The Message will be deleted permanently
4949
</DialogDescription>
5050
</DialogHeader>
51-
<DialogFooter className="bg-gray-100 px-6 py-4">
51+
<DialogFooter className="bg-gray-100 dark:bg-[#383338] px-6 py-4">
5252
<div className="flex items-center justify-between w-full">
5353
<Button disabled={loading} onClick={onClose} variant="ghost">
5454
Cancel

‎components/modals/DeleteServer.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ const DeleteServer = () => {
3636

3737
return (
3838
<Dialog open={isModalOpen} onOpenChange={onClose}>
39-
<DialogContent className="bg-white text-black p-0 overflow-hidden">
39+
<DialogContent className="bg-white dark:bg-[#1e1f22] text-black dark:text-white p-0 overflow-hidden">
4040
<DialogHeader className="pt-8 px-6">
4141
<DialogTitle className="text-2xl text-center font-bold">
4242
Delete Server
@@ -50,7 +50,7 @@ const DeleteServer = () => {
5050
will be permanently deleted.
5151
</DialogDescription>
5252
</DialogHeader>
53-
<DialogFooter className="bg-gray-100 px-6 py-4">
53+
<DialogFooter className="bg-gray-100 dark:bg-[#383338] px-6 py-4">
5454
<div className="flex items-center justify-between w-full">
5555
<Button disabled={loading} onClick={onClose} variant="ghost">
5656
Cancel

‎components/modals/EditChannel.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ const EditChannel = () => {
8888

8989
return (
9090
<Dialog open={isModalOpen} onOpenChange={handleClose}>
91-
<DialogContent className="bg-white text-black p-0 overflow-hidden">
91+
<DialogContent className="bg-white dark:bg-[#1e1f22] text-black dark:text-white p-0 overflow-hidden">
9292
<DialogHeader className="pt-8 px-6">
9393
<DialogTitle className="text-2xl text-center font-bold">
9494
Edit Channel
@@ -102,13 +102,13 @@ const EditChannel = () => {
102102
name="name"
103103
render={({ field }) => (
104104
<FormItem>
105-
<FormLabel className="uppercase text-xs font-bold text-zinc-500 dark:text-secondary/70">
105+
<FormLabel className="uppercase text-xs font-bold text-zinc-800 dark:text-zinc-400">
106106
Channel Name
107107
</FormLabel>
108108
<FormControl>
109109
<Input
110110
disabled={isLoading}
111-
className="bg-zinc-300/50 border-0 focus-visible:ring-0 text-black focus-visible:ring-offset-0"
111+
className="bg-zinc-300/50 dark:bg-zinc-900 border-0 focus-visible:ring-0 text-black dark:text-white focus-visible:ring-offset-0"
112112
placeholder="Enter Channel name"
113113
{...field}
114114
/>
@@ -122,14 +122,14 @@ const EditChannel = () => {
122122
name="type"
123123
render={({ field }) => (
124124
<FormItem>
125-
<FormLabel>Channel Type</FormLabel>
125+
<FormLabel className="uppercase text-xs font-bold text-zinc-800 dark:text-zinc-400">Channel Type</FormLabel>
126126
<Select
127127
disabled={isLoading}
128128
onValueChange={field.onChange}
129129
defaultValue={field.value}
130130
>
131131
<FormControl>
132-
<SelectTrigger className="bg-zinc-300/50 border-0 focus:ring-0 text-black ring-offset-0 capitalize focus:ring-offset-0 outline-none">
132+
<SelectTrigger className="bg-zinc-300/50 dark:bg-zinc-900 border-0 focus:ring-0 text-black dark:text-white ring-offset-0 capitalize focus:ring-offset-0 outline-none">
133133
<SelectValue placeholder="Select a channel type" />
134134
</SelectTrigger>
135135
</FormControl>
@@ -148,7 +148,7 @@ const EditChannel = () => {
148148
)}
149149
/>
150150
</div>
151-
<DialogFooter className="bg-gray-100 px-6 py-4">
151+
<DialogFooter className="bg-gray-100 dark:bg-[#383338] px-6 py-4">
152152
<Button disabled={isLoading} variant="primary">
153153
Save
154154
</Button>

0 commit comments

Comments
 (0)