From 29ab20068514ba16a3b4a21f5a3c150cda8ba4da Mon Sep 17 00:00:00 2001
From: Rahul Sain <rahulsain@luffy.local>
Date: Tue, 5 Nov 2024 00:19:58 +0530
Subject: [PATCH] 80% fixed

---
 app/auth/signin/page.tsx  | 185 ++++++++++++++--------------------
 app/auth/signup/page.tsx  | 207 ++++++--------------------------------
 app/contributor/page.tsx  |  49 +++++----
 app/popular/repo/page.tsx |   2 +-
 components/boomarkRow.tsx |  18 +---
 5 files changed, 144 insertions(+), 317 deletions(-)

diff --git a/app/auth/signin/page.tsx b/app/auth/signin/page.tsx
index ca609f7..7320c43 100644
--- a/app/auth/signin/page.tsx
+++ b/app/auth/signin/page.tsx
@@ -15,7 +15,6 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-  FormDescription,
 } from "@/components/ui/form";
 import { useToast } from "@/components/ui/use-toast";
 import Link from "next/link";
@@ -73,117 +72,82 @@ export default function SignInPage() {
   };
 
   return (
-<<<<<<< HEAD
-    <div className="flex flex-col items-center justify-center min-h-screen">
-<<<<<<< HEAD
-      <div className="w-full max-w-md p-6 bg-white dark:bg-black border rounded-lg">
-        <h2 className="text-xl font-bold text-[#425893] dark:text-blue-500 text- mb-4">
-=======
-      <div className="w-full max-w-md p-6 bg-white dark:bg-[#141414] border rounded-lg">
-        <h2 className="text-xl font-bold text-[#5469a2] text- mb-4">
->>>>>>> 659a15b4cdcdc3ff2a2e14f904eb60480af67792
-          Login into git-trace
-        </h2>
-        <div className="border-b dark:border-gray-700 border-gray-300 pb-4 mb-4">
-=======
-    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50">
-      <div className="w-full max-w-md p-8 bg-white rounded-lg shadow-md">
+    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-900">
+      <div className="w-full max-w-md p-8 bg-white dark:bg-gray-800 rounded-lg shadow-md">
         <div className="flex flex-col items-center mb-6">
           <Image src={theme === 'dark' ? '/git4.png' : '/git3.png'} alt="Logo" width={60} height={60} />
-          <h1 className="text-2xl font-bold text-gray-900">Welcome to git-trace</h1>
-          <p className="text-sm text-gray-600">Track all your github repositories here.</p>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Welcome to git-trace</h1>
+          <p className="text-sm text-gray-600 dark:text-gray-400">Track all your GitHub repositories here.</p>
         </div>
-        <div className="border-b border-gray-300 pb-4 mb-4">
->>>>>>> 383e7974f0a0fff21996aa91b2c8c87f53f89daa
-          <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-              <FormField
-                control={form.control}
-                name="email"
-                render={({ field }) => (
-                  <FormItem>
-<<<<<<< HEAD
-<<<<<<< HEAD
-                    <FormLabel>Email</FormLabel>
-                    <FormControl>
-                      <Input
-                        placeholder="Email"
-                        {...field}
-                        className="w-full"
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="text-gray-900 dark:text-white">Email</FormLabel>
+                  <FormControl>
+                    <div className="flex items-center">
+                      <Input 
+                        placeholder="Enter your email" 
+                        {...field} 
+                        className="w-full bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                       />
-=======
-                    <FormLabel className="dark:text-white text-black">
-                      Email
-                    </FormLabel>
-=======
-                    <FormLabel>Email</FormLabel>
->>>>>>> 383e7974f0a0fff21996aa91b2c8c87f53f89daa
-                    <FormControl>
-                      <div className="flex items-center">
-                        <Input placeholder="Enter your email" {...field} className="w-full dark:text-black" />
-                        <div className="ml-2 text-gray-500 focus:outline-none">
-                          <AtSign />
-                        </div>
+                      <div className="ml-2 text-gray-500">
+                        <AtSign />
                       </div>
->>>>>>> 659a15b4cdcdc3ff2a2e14f904eb60480af67792
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="password"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Password</FormLabel>
-                    <FormControl>
-<<<<<<< HEAD
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="password"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="text-gray-900 dark:text-white">Password</FormLabel>
+                  <FormControl>
+                    <div className="flex items-center">
                       <Input
-                        type="password"
-                        placeholder="Password"
+                        type={showPassword ? "text" : "password"}
+                        placeholder="Enter your password"
                         {...field}
-                        className="w-full"
+                        className="w-full bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                       />
-=======
-                      <div className="flex items-center">
-                        <Input
-                          type={showPassword ? "text" : "password"}
-                          placeholder="Enter your password"
-                          {...field}
-                          className="w-full dark:text-black"
-                        />
-                        <button
-                          type="button"
-                          onClick={() => setShowPassword(!showPassword)}
-                          className="ml-2 text-gray-500 focus:outline-none"
-                        >
-                          {showPassword ? <EyeOff /> : <Eye />}
-                        </button>
-                      </div>
->>>>>>> 659a15b4cdcdc3ff2a2e14f904eb60480af67792
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <Button type="submit" className="w-full bg-primary text-white hover:bg-blue-700">
-                {loading ? <Pageloader /> : "Log in"}
-              </Button>
-            </form>
-          </Form>
-        </div>
-<<<<<<< HEAD
-        <div className="flex justify-end border-gray-300">
-          <Link
-            href="/auth/signup"
-            className="text-sm text-[#425893] dark:text-blue-500 hover:text-gray-600 underline"
-          >
-            Register
-=======
+                      <button
+                        type="button"
+                        onClick={() => setShowPassword(!showPassword)}
+                        className="ml-2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
+                      >
+                        {showPassword ? <EyeOff /> : <Eye />}
+                      </button>
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <Button 
+              type="submit" 
+              className="w-full bg-blue-600 hover:bg-blue-700 text-white"
+            >
+              {loading ? <Pageloader /> : "Log in"}
+            </Button>
+          </form>
+        </Form>
+
         <div className="mt-4 text-center">
-          <p className="text-sm text-gray-600">Or continue with</p>
-          <Button variant="outline" className="w-full mt-2">
+          <p className="text-sm text-gray-600 dark:text-gray-400">Or continue with</p>
+          <Button 
+            variant="outline" 
+            className="w-full mt-2 text-gray-700 dark:text-gray-200 border-gray-300 dark:border-gray-600"
+          >
             <svg className="h-5 w-5 mr-2" viewBox="0 0 24 24">
               <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4" />
               <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
@@ -194,16 +158,23 @@ export default function SignInPage() {
             Sign in with Google
           </Button>
         </div>
+
         <div className="mt-6 flex justify-between text-sm">
-          <Link href="/auth/forgot-password" className="text-primary hover:underline">
+          <Link 
+            href="/auth/forgot-password" 
+            className="text-blue-600 hover:text-blue-700 hover:underline dark:text-blue-400 dark:hover:text-blue-300"
+          >
             Forgot your password?
           </Link>
-          <Link href="/auth/signup" className="text-primary hover:underline">
+          <Link 
+            href="/auth/signup" 
+            className="text-blue-600 hover:text-blue-700 hover:underline dark:text-blue-400 dark:hover:text-blue-300"
+          >
             Sign up for an account
->>>>>>> 383e7974f0a0fff21996aa91b2c8c87f53f89daa
           </Link>
         </div>
-        <p className="mt-8 text-xs text-center text-gray-500">
+
+        <p className="mt-8 text-xs text-center text-gray-500 dark:text-gray-400">
           © 2024 git-trace Inc. All rights reserved.
         </p>
       </div>
diff --git a/app/auth/signup/page.tsx b/app/auth/signup/page.tsx
index a567215..afd36cb 100644
--- a/app/auth/signup/page.tsx
+++ b/app/auth/signup/page.tsx
@@ -81,168 +81,6 @@ export default function SignUpPage() {
   };
 
   return (
-<<<<<<< HEAD
-    <div className="flex flex-col items-center justify-center min-h-screen ">
-<<<<<<< HEAD
-      <div className="w-full max-w-md p-6 bg-white dark:bg-black border rounded-lg">
-        <h2 className="text-xl font-bold text-[#425893] dark:text-blue-500 text- mb-4">
-=======
-      <div className="w-full max-w-md p-6 bg-white dark:bg-[#141414]  border rounded-lg">
-        <h2 className="text-xl font-bold text-[#5469a2] text- mb-4">
->>>>>>> 659a15b4cdcdc3ff2a2e14f904eb60480af67792
-          Register in git-trace
-        </h2>
-        <div className="border-b dark:border-gray-700 border-gray-300 pb-4 mb-4">
-          <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-              <FormField
-                control={form.control}
-                name="email"
-                render={({ field }) => (
-                  <FormItem>
-<<<<<<< HEAD
-                    <FormLabel>Email</FormLabel>
-                    <FormControl>
-                      <Input
-                        placeholder="Email"
-                        {...field}
-                        className="w-full"
-                      />
-=======
-                    <FormLabel className="dark:text-white text-black">
-                      Email
-                    </FormLabel>
-                    <FormControl>
-                      <div className="flex items-center">
-                        <Input
-                          placeholder="Email"
-                          {...field}
-                          className="w-full dark:text-black"
-                        />
-                        <div className="ml-2 text-gray-500 focus:outline-none">
-                          <AtSign />
-                        </div>
-                      </div>
->>>>>>> 659a15b4cdcdc3ff2a2e14f904eb60480af67792
-                    </FormControl>
-                    <FormDescription>
-                      This is the email address you will use to sign up.
-                    </FormDescription>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="password"
-                render={({ field }) => (
-                  <FormItem>
-<<<<<<< HEAD
-                    <FormLabel>Password</FormLabel>
-                    <FormControl>
-                      <Input
-                        type="password"
-                        placeholder="Password"
-                        {...field}
-                        className="w-full"
-                      />
-=======
-                    <FormLabel className="dark:text-white text-black">
-                      Password
-                    </FormLabel>
-                    <FormControl>
-                      <div className="flex items-center">
-                        <Input
-                          type={showPassword ? "text" : "password"}
-                          placeholder="Password"
-                          {...field}
-                          className="w-full dark:text-black"
-                        />
-                        <button
-                          type="button"
-                          onClick={() => setShowPassword(!showPassword)}
-                          className="ml-2 text-gray-500 focus:outline-none"
-                        >
-                          {showPassword ? <EyeOff /> : <Eye />}
-                        </button>
-                      </div>
->>>>>>> 659a15b4cdcdc3ff2a2e14f904eb60480af67792
-                    </FormControl>
-                    <FormDescription>
-                      Enter a strong password for your account.
-                    </FormDescription>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="confirmpassword"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel className="dark:text-white text-black">
-                      Confirm Password
-                    </FormLabel>
-                    <FormControl>
-                      <div className="flex items-center">
-                        <Input
-                          type={showConfirmPassword ? "text" : "password"}
-                          placeholder="Confirm Password"
-                          {...field}
-                          className="w-full dark:text-black"
-                        />
-                        <button
-                          type="button"
-                          onClick={() =>
-                            setShowConfirmPassword(!showConfirmPassword)
-                          }
-                          className="ml-2 text-gray-500 focus:outline-none"
-                        >
-                          {showConfirmPassword ? <EyeOff /> : <Eye />}
-                        </button>
-                      </div>
-                    </FormControl>
-                    <FormDescription>
-                      Confirm password by entering it again
-                    </FormDescription>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <Button
-                type="submit"
-                className="w-full bg-[#425893] text-white hover:text-black"
-              >
-                {Loading ? <Pageloader /> : "Register"}
-              </Button>
-            </form>
-          </Form>
-        </div>
-        <div className="flex justify-end border-gray-300">
-          <Link
-            href="/auth/signin"
-            className="text-sm text-[#425893] dark:text-blue-500 hover:text-gray-600 underline"
-          >
-            login
-          </Link>
-
-          {/* <div className="flex justify-end border-gray-300 ">
-            <Popover>
-              <PopoverContent className=" text-center">
-                Under Construction 🏗️ 🚧
-              </PopoverContent>
-              <Link
-                href=""
-                onClick={() => console.log("underconstruction")}
-                className="text-sm text-[#425893] hover:text-gray-600"
-              >
-                <PopoverTrigger className="underline">
-                  Use GitHub
-                </PopoverTrigger>
-              </Link>
-            </Popover>
-          </div> */}
-=======
     <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-900">
       <div className="w-full max-w-md p-8 bg-white dark:bg-gray-800 rounded-lg shadow-md">
         <div className="flex flex-col items-center mb-6">
@@ -250,6 +88,7 @@ export default function SignUpPage() {
           <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Register for git-trace</h1>
           <p className="text-sm text-gray-600 dark:text-gray-400">Create an account to track all your GitHub repositories.</p>
         </div>
+        
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
             <FormField
@@ -257,10 +96,14 @@ export default function SignUpPage() {
               name="email"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel className="dark:text-white text-black">Email</FormLabel>
+                  <FormLabel className="text-gray-900 dark:text-white">Email</FormLabel>
                   <FormControl>
                     <div className="flex items-center">
-                      <Input placeholder="Enter your email" {...field} className="w-full dark:text-black" />
+                      <Input 
+                        placeholder="Enter your email" 
+                        {...field} 
+                        className="w-full bg-white dark:bg-gray-700 text-gray-900 dark:text-white" 
+                      />
                       <div className="ml-2 text-gray-500">
                         <AtSign />
                       </div>
@@ -270,21 +113,26 @@ export default function SignUpPage() {
                 </FormItem>
               )}
             />
+            
             <FormField
               control={form.control}
               name="password"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel className="dark:text-white text-black">Password</FormLabel>
+                  <FormLabel className="text-gray-900 dark:text-white">Password</FormLabel>
                   <FormControl>
                     <div className="flex items-center">
                       <Input
                         type={showPassword ? "text" : "password"}
                         placeholder="Enter your password"
                         {...field}
-                        className="w-full dark:text-black"
+                        className="w-full bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                       />
-                      <button type="button" onClick={() => setShowPassword(!showPassword)} className="ml-2 text-gray-500">
+                      <button 
+                        type="button" 
+                        onClick={() => setShowPassword(!showPassword)} 
+                        className="ml-2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
+                      >
                         {showPassword ? <EyeOff /> : <Eye />}
                       </button>
                     </div>
@@ -293,24 +141,25 @@ export default function SignUpPage() {
                 </FormItem>
               )}
             />
+            
             <FormField
               control={form.control}
               name="confirmpassword"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel className="dark:text-white text-black">Confirm Password</FormLabel>
+                  <FormLabel className="text-gray-900 dark:text-white">Confirm Password</FormLabel>
                   <FormControl>
                     <div className="flex items-center">
                       <Input
                         type={showConfirmPassword ? "text" : "password"}
                         placeholder="Confirm your password"
                         {...field}
-                        className="w-full dark:text-black"
+                        className="w-full bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                       />
                       <button
                         type="button"
                         onClick={() => setShowConfirmPassword(!showConfirmPassword)}
-                        className="ml-2 text-gray-500"
+                        className="ml-2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
                       >
                         {showConfirmPassword ? <EyeOff /> : <Eye />}
                       </button>
@@ -320,11 +169,16 @@ export default function SignUpPage() {
                 </FormItem>
               )}
             />
-            <Button type="submit" className="w-full bg-primary text-white">
+            
+            <Button 
+              type="submit" 
+              className="w-full bg-blue-600 hover:bg-blue-700 text-white"
+            >
               {loading ? <Pageloader /> : "Register"}
             </Button>
           </form>
         </Form>
+
         <div className="mt-4 text-center">
           <p className="text-sm text-gray-600 dark:text-gray-400">Or sign up with</p>
           <Button variant="outline" className="w-full mt-2">
@@ -337,13 +191,18 @@ export default function SignUpPage() {
             </svg>
             Sign up with Google
           </Button>
->>>>>>> 383e7974f0a0fff21996aa91b2c8c87f53f89daa
         </div>
+
         <div className="mt-6 text-center text-sm">
           Already have an account?{" "}
-          <Link href="/auth/signin" className="text-primary hover:underline">Log in</Link>
+          <Link href="/auth/signin" className="text-blue-600 hover:text-blue-700 hover:underline">
+            Log in
+          </Link>
         </div>
-        <p className="mt-8 text-xs text-center text-gray-500 dark:text-gray-400">© 2024 git-trace Inc. All rights reserved.</p>
+
+        <p className="mt-8 text-xs text-center text-gray-500 dark:text-gray-400">
+          © 2024 git-trace Inc. All rights reserved.
+        </p>
       </div>
     </div>
   );
diff --git a/app/contributor/page.tsx b/app/contributor/page.tsx
index 868f462..7e9871a 100644
--- a/app/contributor/page.tsx
+++ b/app/contributor/page.tsx
@@ -2,6 +2,7 @@
 
 import React, { useEffect, useState } from 'react'
 import { motion, AnimatePresence } from 'framer-motion'
+import Image from 'next/image'
 
 interface Contributor {
   id: number
@@ -25,7 +26,15 @@ const ContributorCard: React.FC<Contributor> = ({ login, avatar_url, html_url, c
     className="bg-white dark:bg-black rounded-lg shadow-lg overflow-hidden"
   >
     <div className="p-6 text-center">
-      <img src={avatar_url} alt={login} className="w-24 h-24 rounded-full mx-auto mb-4 border-4 border-primary" />
+      <div className="relative w-24 h-24 mx-auto mb-4">
+        <Image
+          src={avatar_url}
+          alt={login}
+          fill
+          className="rounded-full border-4 border-primary object-cover"
+          sizes="(max-width: 96px) 100vw, 96px"
+        />
+      </div>
       <h3 className="font-bold text-xl text-gray-800 dark:text-slate-50">{login}</h3>
       <p className="text-sm text-primary mb-2">{type}</p>
       <div className="mt-4 bg-primary-foreground rounded-full py-2 px-4 inline-block">
@@ -75,33 +84,33 @@ const StatCard: React.FC<StatCardProps> = ({ label, value, icon }) => (
   </motion.div>
 )
 
-export default function Component() {
+export default function ContributorPage() {
   const [contributors, setContributors] = useState<Contributor[]>([])
   const [repoStats, setRepoStats] = useState<RepoStats>({ stars: 0, forks: 0, openIssues: 0 })
   const [loading, setLoading] = useState(true)
   const [email, setEmail] = useState('')
 
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const contributorsResponse = await fetch('https://api.github.com/repos/rahulsainlll/git-trace/contributors')
-        const contributorsData: Contributor[] = await contributorsResponse.json()
-        setContributors(contributorsData)
+  const fetchData = async () => {
+    try {
+      const contributorsResponse = await fetch('https://api.github.com/repos/rahulsainlll/git-trace/contributors')
+      const contributorsData: Contributor[] = await contributorsResponse.json()
+      setContributors(contributorsData)
 
-        const repoResponse = await fetch('https://api.github.com/repos/rahulsainlll/git-trace')
-        const repoData = await repoResponse.json()
-        setRepoStats({
-          stars: repoData.stargazers_count,
-          forks: repoData.forks_count,
-          openIssues: repoData.open_issues_count,
-        })
-      } catch (error) {
-        console.error('Error fetching data:', error)
-      } finally {
-        setLoading(false)
-      }
+      const repoResponse = await fetch('https://api.github.com/repos/rahulsainlll/git-trace')
+      const repoData = await repoResponse.json()
+      setRepoStats({
+        stars: repoData.stargazers_count,
+        forks: repoData.forks_count,
+        openIssues: repoData.open_issues_count,
+      })
+    } catch (error) {
+      console.error('Error fetching data:', error)
+    } finally {
+      setLoading(false)
     }
+  }
 
+  useEffect(() => {
     fetchData()
   }, [])
 
diff --git a/app/popular/repo/page.tsx b/app/popular/repo/page.tsx
index a405b49..ef7b8c0 100644
--- a/app/popular/repo/page.tsx
+++ b/app/popular/repo/page.tsx
@@ -60,7 +60,7 @@ const RepositoryStats = () => {
       setError("Failed to fetch commit history");
     }
   };
-
+  
   // Fetch top contributors
   const fetchContributors = async () => {
     try {
diff --git a/components/boomarkRow.tsx b/components/boomarkRow.tsx
index fee1406..5b7df24 100644
--- a/components/boomarkRow.tsx
+++ b/components/boomarkRow.tsx
@@ -49,7 +49,6 @@ export default function BookmarkRow({
       },
       body: JSON.stringify(newTodo),
     });
-    // console.log(response)
     const createdTodo = await response.json();
     setTodos((prev) => [...prev, createdTodo]);
   };
@@ -60,7 +59,6 @@ export default function BookmarkRow({
     });
 
     if (response.ok) {
-      // Update the local state to remove the deleted todo
       setTodos((prev) => prev.filter((todo) => todo.id !== todoId));
     } else {
       console.error("Failed to delete the todo.");
@@ -132,19 +130,13 @@ export default function BookmarkRow({
 
         <TableCell>
           <DropdownMenuTrigger asChild>
-            {/* <ChevronDown className="h-4 w-4" /> */}
-            <Button> Todos</Button>
+            <Button>Todos</Button>
           </DropdownMenuTrigger>
         </TableCell>
       </TableRow>
 
-<<<<<<< HEAD
-      <DropdownMenuContent className="w-screen max-w-lg p-4 dark:bg-gray-900 bg-gray-50 shadow-lg">
-        <h4 className="font-bold">Todos</h4>
-=======
-      <DropdownMenuContent className="w-screen max-w-lg p-4 bg-gray-100 shadow-lg text-black">
+      <DropdownMenuContent className="w-screen max-w-lg p-4 bg-gray-100 dark:bg-gray-900 shadow-lg text-black dark:text-white mb-2">
         <h4 className="font-bold mb-2">Todos</h4>
->>>>>>> 383e7974f0a0fff21996aa91b2c8c87f53f89daa
 
         {/* Todos List */}
         {todos.length ? (
@@ -155,7 +147,6 @@ export default function BookmarkRow({
               className="p-2 border-b flex justify-between items-center"
             >
               <div className="flex items-center">
-                {/* Checkbox for marking todo as completed */}
                 <input
                   type="checkbox"
                   checked={todo.completed}
@@ -187,7 +178,6 @@ export default function BookmarkRow({
               </div>
 
               <div className="flex gap-2">
-                {/* Edit button */}
                 <Button
                   variant={"secondary"}
                   size={"sm"}
@@ -199,7 +189,6 @@ export default function BookmarkRow({
                   <Edit className="h-4 w-4" />
                 </Button>
 
-                {/* Delete button */}
                 <Button
                   variant={"destructive"}
                   size={"sm"}
@@ -225,7 +214,6 @@ export default function BookmarkRow({
               setTitle(e.target.value);
             }}
           />
-          {/* Add Todo Button */}
           <Button
             size="sm"
             onClick={() => {
@@ -239,4 +227,4 @@ export default function BookmarkRow({
       </DropdownMenuContent>
     </DropdownMenu>
   );
-}
+}
\ No newline at end of file