Remove light theme and persiste with only dark theme

amitamrutiya · Jun 24, 2024 · 1d68ac2 · 1d68ac2
1 parent 3968840
commit 1d68ac2
Show file tree

Hide file tree

Showing 16 changed files with 92 additions and 148 deletions.
diff --git a/Readme.md b/Readme.md
@@ -37,7 +37,7 @@ This project is a real-time communication application offering various communica
 
 1. Clone the repository to your local machine.
 ```
-https://github.com/amitamrutiya2210/MeetnChat
+https://github.com/amitamrutiya/MeetnChat
 ```
 
 2. Navigate to the project directory.

diff --git a/frontend/package.json b/frontend/package.json
@@ -40,7 +40,6 @@
     "moment": "^2.30.1",
     "next": "14.1.3",
     "next-auth": "^5.0.0-beta.17",
-    "next-themes": "^0.2.1",
     "npx": "^10.2.2",
     "react": "^18",
     "react-dom": "^18",

diff --git a/frontend/src/app/context/ThemeProvider.tsx b/frontend/src/app/context/ThemeProvider.tsx
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
@@ -4,28 +4,27 @@
 
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-    --primary: 142.1 76.2% 36.3%;
-    --primary-foreground: 355.7 100% 97.3%;
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --ring: 142.1 76.2% 36.3%;
-    --radius: 0.5rem;
-    --warning: 36 100% 40%;
-    --hover: 201 90% 27%;
+    --background: 20 14.3% 4.1%;
+    --foreground: 0 0% 95%;
+    --card: 24 9.8% 10%; /* blck */
+    --card-foreground: 0 0% 95%; /*gray*/
+    --popover: 0 0% 9%;
+    --popover-foreground: 0 0% 95%;
+    --primary: 142.1 70.6% 45.3%; /* green */
+    --primary-foreground: 144.9 80.4% 10%; /*dark green */
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 15%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%; /* red */
+    --destructive-foreground: 0 85.7% 97.3%; /* light red */
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 142.4 71.8% 29.2%;
+    --warning: 36 100% 55%;
+    --hover: 200 98% 39%;
   }
 
   .dark {

diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -1,7 +1,6 @@
 import { MediaStreamProvider } from "@/app/context/MediaStream";
 import { MediaScreenStreamProvider } from "@/app/context/ScreenStream";
 import { SocketProvider } from "@/app/context/SocketContext";
-import { ThemeProvider } from "@/app/context/ThemeProvider";
 import { Toaster } from "@/components/ui/toaster";
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
@@ -45,15 +44,8 @@ export default function RootLayout({
       <AuthProvider>
         <AppProviders>
           <body className={inter.className}>
-            <ThemeProvider
-              attribute="class"
-              defaultTheme="system"
-              enableSystem
-              disableTransitionOnChange
-            >
-              {children}
-              <Toaster />
-            </ThemeProvider>
+            {children}
+            <Toaster />
           </body>
         </AppProviders>
       </AuthProvider>

diff --git a/frontend/src/components/Globe.tsx b/frontend/src/components/Globe.tsx
@@ -25,7 +25,7 @@ function GlobeSection() {
           }}
           className="div"
         >
-          <h2 className="text-center text-xl md:text-4xl font-bold text-black dark:text-white">
+          <h2 className="text-center text-xl md:text-4xl font-bold text-white dark:text-white">
             Best way to connect with people
           </h2>
           <p className="text-center text-base md:text-lg font-normal text-neutral-700 dark:text-neutral-200 max-w-md mt-2 mx-auto">

diff --git a/frontend/src/components/Icon-card-button.tsx b/frontend/src/components/Icon-card-button.tsx
@@ -15,7 +15,7 @@ const IconCardButton = () => {
     <Link key={i} href={user ? f.link : "/api/auth/login"} passHref>
       <PinContainer title={f.description}>
         <div className="text-center mx-5 my-5 px-2 py-2 flex h-[250px] w-[250px] cursor-pointer items-center justify-center rounded-md shadow-md hover:bg-hover sm:my-0">
-          <BackgroundGradient className="rounded-[22px] max-w-sm p-4 sm:p-10 bg-white dark:bg-zinc-900">
+          <BackgroundGradient className="rounded-[22px] max-w-sm p-4 sm:p-10 bg-secondary dark:bg-zinc-900">
             <div className="text-center">
               <div className="flex justify-center pb-2">
                 <span className="text-primary pr-4">

diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
@@ -5,7 +5,6 @@ import { AudioLines, ArrowLeftRightIcon } from "lucide-react";
 import { User } from "@/type";
 import UserAvatar from "./UserAvatar";
 import { useSession } from "next-auth/react";
-import { ModeToggle } from "./ui/mode-toggle";
 import LogoutButton from "./LogoutButton";
 
 export interface NavbarProps {
@@ -60,7 +59,6 @@ const Navbar: React.FC<NavbarProps> = (props) => {
             <LogoutButton />
           </>
         )}
-        <ModeToggle />
       </div>
     </nav>
   );

diff --git a/frontend/src/components/SignInForm.tsx b/frontend/src/components/SignInForm.tsx
@@ -49,10 +49,14 @@ function SignInForm() {
       duration={7}
       borderWidth={4}
     >
-      <div className="w-full max-w-md p-8 space-y-6 bg-background rounded-lg shadow-md">
+      <div className="w-full max-w-md p-8 space-y-6 bg-background rounded-lg shadow-md ">
         <div className="text-center">
-          <h1 className="text-2xl font-extrabold mb-6">Please Login to Use</h1>
-          <p className="mb-4">Sign in to start your anonymous adventure</p>
+          <h1 className="text-2xl font-extrabold mb-6 text-white">
+            Please Login to Use
+          </h1>
+          <p className="mb-4 text-white">
+            Sign in to start your anonymous adventure
+          </p>
         </div>
         <Form {...signinForm}>
           <form
@@ -65,7 +69,9 @@ function SignInForm() {
               render={({ field }) => (
                 <FormItem>
                   <LabelInputContainer>
-                    <FormLabel className="flex">Email/Username</FormLabel>
+                    <FormLabel className="flex">
+                      Email/Username
+                    </FormLabel>
                     <FormControl>
                       <Input placeholder="Email/Username" {...field} />
                     </FormControl>

diff --git a/frontend/src/components/SignupForm.tsx b/frontend/src/components/SignupForm.tsx
@@ -145,10 +145,12 @@ function SignupForm() {
       <div className="flex items-start justify-start">
         <div className="w-full max-w-md p-8 space-y-8 bg-background rounded-lg shadow-md">
           <div className="text-center">
-            <h1 className="text-2xl font-extrabold tracking-tighter mb-6">
+            <h1 className="text-2xl font-extrabold tracking-tighter mb-6 text-white">
               Please SignUp to Use
             </h1>
-            <p className="mb-4">Sign up to start your anonymous adventure</p>
+            <p className="mb-4 text-white">
+              Sign up to start your anonymous adventure
+            </p>
           </div>
           <Form {...sendVerificationEmailForm}>
             <form

diff --git a/frontend/src/components/ui/filp-word.tsx b/frontend/src/components/ui/filp-word.tsx
@@ -59,7 +59,7 @@ export const FlipWords = ({
           position: "absolute",
         }}
         className={cn(
-          "z-10 inline-block relative text-left text-neutral-900 dark:text-neutral-100 px-2",
+          "z-10 inline-block relative text-left text-white dark:text-neutral-100 px-2",
           className
         )}
         key={currentWord}

diff --git a/frontend/src/components/ui/form.tsx b/frontend/src/components/ui/form.tsx
@@ -1,30 +1,30 @@
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { Slot } from "@radix-ui/react-slot"
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
 import {
   Controller,
   ControllerProps,
   FieldPath,
   FieldValues,
   FormProvider,
   useFormContext,
-} from "react-hook-form"
+} from "react-hook-form";
 
-import { cn } from "@/lib/utils"
-import { Label } from "@/components/ui/label"
+import { cn } from "@/lib/utils";
+import { Label } from "@/components/ui/label";
 
-const Form = FormProvider
+const Form = FormProvider;
 
 type FormFieldContextValue<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 > = {
-  name: TName
-}
+  name: TName;
+};
 
 const FormFieldContext = React.createContext<FormFieldContextValue>(
   {} as FormFieldContextValue
-)
+);
 
 const FormField = <
   TFieldValues extends FieldValues = FieldValues,
@@ -36,21 +36,21 @@ const FormField = <
     <FormFieldContext.Provider value={{ name: props.name }}>
       <Controller {...props} />
     </FormFieldContext.Provider>
-  )
-}
+  );
+};
 
 const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext)
-  const itemContext = React.useContext(FormItemContext)
-  const { getFieldState, formState } = useFormContext()
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
 
-  const fieldState = getFieldState(fieldContext.name, formState)
+  const fieldState = getFieldState(fieldContext.name, formState);
 
   if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>")
+    throw new Error("useFormField should be used within <FormField>");
   }
 
-  const { id } = itemContext
+  const { id } = itemContext;
 
   return {
     id,
@@ -59,53 +59,54 @@ const useFormField = () => {
     formDescriptionId: `${id}-form-item-description`,
     formMessageId: `${id}-form-item-message`,
     ...fieldState,
-  }
-}
+  };
+};
 
 type FormItemContextValue = {
-  id: string
-}
+  id: string;
+};
 
 const FormItemContext = React.createContext<FormItemContextValue>(
   {} as FormItemContextValue
-)
+);
 
 const FormItem = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => {
-  const id = React.useId()
+  const id = React.useId();
 
   return (
     <FormItemContext.Provider value={{ id }}>
       <div ref={ref} className={cn("space-y-4", className)} {...props} />
     </FormItemContext.Provider>
-  )
-})
-FormItem.displayName = "FormItem"
+  );
+});
+FormItem.displayName = "FormItem";
 
 const FormLabel = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
 >(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField()
+  const { error, formItemId } = useFormField();
 
   return (
     <Label
       ref={ref}
-      className={cn(error && "text-destructive", className)}
+      className={cn(error ? "text-destructive" : "text-white", className)}
       htmlFor={formItemId}
       {...props}
     />
-  )
-})
-FormLabel.displayName = "FormLabel"
+  );
+});
+FormLabel.displayName = "FormLabel";
 
 const FormControl = React.forwardRef<
   React.ElementRef<typeof Slot>,
   React.ComponentPropsWithoutRef<typeof Slot>
 >(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
 
   return (
     <Slot
@@ -119,15 +120,15 @@ const FormControl = React.forwardRef<
       aria-invalid={!!error}
       {...props}
     />
-  )
-})
-FormControl.displayName = "FormControl"
+  );
+});
+FormControl.displayName = "FormControl";
 
 const FormDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField()
+  const { formDescriptionId } = useFormField();
 
   return (
     <p
@@ -136,19 +137,19 @@ const FormDescription = React.forwardRef<
       className={cn("text-[0.8rem] text-muted-foreground", className)}
       {...props}
     />
-  )
-})
-FormDescription.displayName = "FormDescription"
+  );
+});
+FormDescription.displayName = "FormDescription";
 
 const FormMessage = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField()
-  const body = error ? String(error?.message) : children
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : children;
 
   if (!body) {
-    return null
+    return null;
   }
 
   return (
@@ -160,9 +161,9 @@ const FormMessage = React.forwardRef<
     >
       {body}
     </p>
-  )
-})
-FormMessage.displayName = "FormMessage"
+  );
+});
+FormMessage.displayName = "FormMessage";
 
 export {
   useFormField,
@@ -173,4 +174,4 @@ export {
   FormDescription,
   FormMessage,
   FormField,
-}
+};