feat: Dark mode

visualcookie · Aug 27, 2024 · 4c1ccb0 · 4c1ccb0
1 parent a4099bd
commit 4c1ccb0
Show file tree

Hide file tree

Showing 12 changed files with 925 additions and 69 deletions.
diff --git a/apps/frontend/app/layout.tsx b/apps/frontend/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
+import { ThemeProvider } from "@/providers/ThemeProvider";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -17,7 +18,16 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          {children}
+        </ThemeProvider>
+      </body>
     </html>
   );
 }
diff --git a/apps/frontend/app/page.tsx b/apps/frontend/app/page.tsx
@@ -59,33 +59,39 @@ const IndexPage: React.FC = () => {
   };
 
   return (
-    <div className="container">
-      <div className="w-96 mx-auto mt-8">
-        <Form {...form}>
-          <form
-            onSubmit={form.handleSubmit(onSubmit)}
-            className="flex flex-col space-y-2"
-          >
-            <FormField
-              control={form.control}
-              name="name"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>How should I call you?</FormLabel>
-                  <FormControl>
-                    <Input placeholder="John Doe" {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <Button type="submit" disabled={form.formState.isSubmitting}>
-              {!form.formState.isSubmitting
-                ? "Start session"
-                : "Starting session..."}
-            </Button>
-          </form>
-        </Form>
+    <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-b from-gray-50 to-white dark:from-gray-950 dark:to-gray-900 p-4 sm:p-6 md:p-8">
+      <div className="w-full max-w-md mx-auto">
+        <div className="flex justify-center mb-6 sm:mb-8">
+          <h1 className="text-2xl font-semibold">Refinr</h1>
+        </div>
+        <div className="bg-white dark:bg-gray-950 rounded-lg shadow-lg border border-gray-200 dark:border-gray-800 p-6 sm:p-8">
+          <p className="text-center text-gray-600 dark:text-gray-400 mb-6">
+            Enter your name to start a new Refinr session.
+          </p>
+
+          <Form {...form}>
+            <form
+              onSubmit={form.handleSubmit(onSubmit)}
+              className="flex flex-col space-y-2"
+            >
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormControl>
+                      <Input placeholder="Your name" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <Button type="submit" disabled={form.formState.isSubmitting}>
+                Start a session
+              </Button>
+            </form>
+          </Form>
+        </div>
       </div>
     </div>
   );

diff --git a/apps/frontend/app/room/[id]/page.tsx b/apps/frontend/app/room/[id]/page.tsx
@@ -8,6 +8,7 @@ import UserList from "@/components/UserList";
 import Tools from "@/components/Tools";
 import Results from "@/components/Results";
 import FormUsername from "@/components/FormUsername";
+import { ModeToggle } from "@/components/ModeToggle";
 
 let socket: Socket;
 
@@ -159,10 +160,11 @@ export default function RoomPage({ params }: { params: { id: string } }) {
       {!hasUsername ? (
         <FormUsername handleSubmit={handleSubmit} />
       ) : (
-        <div className="flex flex-col h-screen bg-background">
-          <header className="flex justify-between items-center p-4 border-b dark:border-gray-700">
+        <div className="flex flex-col h-screen bg-gradient-to-b from-gray-50 to-white dark:from-gray-950 dark:to-gray-900">
+          <header className="flex justify-between items-center p-4 border-b dark:border-gray-800">
             <h1 className="text-2xl font-bold dark:text-white">Refinr</h1>
             <div className="flex items-center gap-4">
+              <ModeToggle />
               <Button
                 variant="ghost"
                 size="icon"
@@ -175,7 +177,7 @@ export default function RoomPage({ params }: { params: { id: string } }) {
           </header>
           <div className="flex flex-1 overflow-hidden">
             <aside
-              className={`fixed inset-y-0 left-0 z-50 w-64 md:w-64 p-4 border-r bg-background transform transition-transform duration-200 ease-in-out ${sidebarOpen ? "translate-x-0" : "-translate-x-full"} md:relative md:translate-x-0 dark:border-gray-700`}
+              className={`fixed inset-y-0 left-0 z-50 w-64 md:w-64 p-4 border-r bg-background transform transition-transform duration-200 ease-in-out ${sidebarOpen ? "translate-x-0" : "-translate-x-full"} md:relative md:translate-x-0 dark:border-gray-800`}
             >
               <UserList users={transformedUsers} />
             </aside>

diff --git a/apps/frontend/components/FormUsername.tsx b/apps/frontend/components/FormUsername.tsx
@@ -1,3 +1,7 @@
+import React from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { Button } from "@/components/ui/button";
 import {
   Form,
@@ -8,10 +12,6 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { zodResolver } from "@hookform/resolvers/zod";
-import React from "react";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
 
 interface FormUsernameProps {
   handleSubmit: (data: any) => void;
@@ -34,29 +34,38 @@ const FormUsername: React.FC<FormUsernameProps> = ({ handleSubmit }) => {
   const onSubmit = (values: z.infer<typeof formSchema>) => handleSubmit(values);
 
   return (
-    <div className="container">
-      <div className="w-96 mx-auto mt-8">
-        <Form {...form}>
-          <form
-            onSubmit={form.handleSubmit(onSubmit)}
-            className="flex flex-col space-y-2"
-          >
-            <FormField
-              control={form.control}
-              name="name"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>How should I call you?</FormLabel>
-                  <FormControl>
-                    <Input placeholder="John Doe" {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <Button type="submit">Set name</Button>
-          </form>
-        </Form>
+    <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-b from-gray-50 to-white dark:from-gray-950 dark:to-gray-900 p-4 sm:p-6 md:p-8">
+      <div className="w-full max-w-md mx-auto">
+        <div className="flex justify-center mb-6 sm:mb-8">
+          <h1 className="text-2xl font-semibold">Refinr</h1>
+        </div>
+        <div className="bg-white dark:bg-gray-950 rounded-lg shadow-lg border border-gray-200 dark:border-gray-800 p-6 sm:p-8">
+          <p className="text-center text-gray-600 dark:text-gray-400 mb-6">
+            You are about to join a room with other people. Please enter your
+            name to continue.
+          </p>
+
+          <Form {...form}>
+            <form
+              onSubmit={form.handleSubmit(onSubmit)}
+              className="flex flex-col space-y-2"
+            >
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormControl>
+                      <Input placeholder="Your name" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <Button type="submit">Join room</Button>
+            </form>
+          </Form>
+        </div>
       </div>
     </div>
   );

diff --git a/apps/frontend/components/ModeToggle.tsx b/apps/frontend/components/ModeToggle.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import * as React from "react";
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+export function ModeToggle() {
+  const { setTheme } = useTheme();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/apps/frontend/components/Results.tsx b/apps/frontend/components/Results.tsx
@@ -8,7 +8,7 @@ interface ResultsProps {
 
 const Results: React.FC<ResultsProps> = ({ results }) => {
   return (
-    <Card className="mt-8 dark:bg-gray-800">
+    <Card className="bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 mt-6">
       <CardContent className="pt-6">
         <h2 className="text-xl font-bold mb-4 dark:text-white">
           Voting Results

diff --git a/apps/frontend/components/Tools.tsx b/apps/frontend/components/Tools.tsx
@@ -16,19 +16,16 @@ const Tools: React.FC<Props> = ({
   onResetVotes,
 }) => {
   return (
-    <Card className="mb-6 dark:bg-gray-800">
+    <Card className="bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 mb-6">
       <CardContent className="pt-6">
-        <h2 className="text-xl font-bold mb-4 dark:text-white">
-          Moderator Controls
-        </h2>
         <div className="flex gap-4">
           <Button onClick={onStartVoting} disabled={votingPhase === "voting"}>
             <PlayIcon className="mr-2 h-4 w-4" /> Start Voting
           </Button>
           <Button onClick={onEndVoting} disabled={votingPhase !== "voting"}>
             <TimerIcon className="mr-2 h-4 w-4" /> Show results
           </Button>
-          <Button onClick={onResetVotes}>
+          <Button onClick={onResetVotes} className="ml-auto">
             <RotateCcwIcon className="mr-2 h-4 w-4" /> Reset
           </Button>
         </div>

diff --git a/apps/frontend/components/UserList.tsx b/apps/frontend/components/UserList.tsx
@@ -15,23 +15,26 @@ type UserListProps = {
 const UserList: React.FC<UserListProps> = ({ users }) => {
   return (
     <div className="space-y-4">
-      <h2 className="text-xl font-bold">Participants</h2>
+      <h2 className="font-bold">Participants</h2>
       {users.map((user) => (
         <div key={user.clientId} className="flex items-center gap-2">
           <div className="relative">
-            <Avatar>
+            <Avatar className="pointer-events-none select-none">
               <AvatarFallback>
                 {user.name
                   .split(" ")
                   .map((n) => n[0])
                   .join("")}
               </AvatarFallback>
             </Avatar>
-            {user.isModerator && (
-              <CrownIcon className="absolute -top-1 -right-1 w-4 h-4 text-yellow-500" />
-            )}
           </div>
           <span className="text-sm font-medium">{user.name}</span>
+          {user.isModerator && (
+            <div className="flex items-center justify-center rounded-full bg-yellow-500 w-6 h-6 ml-auto">
+              <CrownIcon className="w-3 h-3" />
+              <span className="sr-only">is a moderator</span>
+            </div>
+          )}
           {user.votes && (
             <div className="flex items-center justify-center w-6 h-6 bg-green-100 rounded-full ml-auto">
               <CheckIcon className="w-4 h-4 text-green-500" />