Added Basic Darkmode and Fixed Small Bugs

components/activity-item.tsx

@@ -16,7 +16,7 @@ export const ActivityItem = ({ data }: ActivityItemProps) => {
       </Avatar>
       <div className='flex flex-col space-y-0.5'>
         <p className='text-sm text-muted-foreground'>
-          <span className='font-semibold lowercase text-neutral-700'>
+          <span className='font-semibold lowercase text-neutral-700 dark:text-neutral-200'>
             {data.userName}
           </span>{' '}
           {generateLogMessage(data)}

components/form/form-input.tsx

@@ -45,7 +45,7 @@ export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
           {label ? (
             <Label
               htmlFor={id}
-              className='text-xs font-semibold text-neutral-700'
+              className='text-xs font-semibold text-neutral-700 dark:text-neutral-200'
             >
               {label}
             </Label>

components/form/form-picker.tsx

@@ -74,7 +74,7 @@ export const FormPicker = ({ id, errors }: FormPickerProps) => {
               id={id}
               name={id}
               className='hidden'
-              checked={selectedImageId === image.id}
+              defaultChecked={selectedImageId === image.id}
               disabled={pending}
               value={`${image.id}|${image.urls.thumb}|${image.urls.full}|${image.links.html}|${image.user.name}|${image.links.download_location}`}
             />

components/form/form-popover.tsx

@@ -66,12 +66,12 @@ export const FormPopover = ({
         side={side}
         sideOffset={sideOffset}
       >
-        <div className='pb-4 text-center text-sm font-medium text-neutral-600'>
+        <div className='pb-4 text-center text-sm font-medium text-neutral-600 dark:text-neutral-300'>
           Create board
         </div>
         <PopoverClose ref={closeRef} asChild>
           <Button
-            className='absolute right-2 top-2 h-auto w-auto p-2 text-neutral-600'
+            className='absolute right-2 top-2 h-auto w-auto p-2 text-neutral-600 dark:text-neutral-300'
             variant='ghost'
           >
             <X className='h-4 w-4' />
@@ -79,10 +79,10 @@ export const FormPopover = ({
         </PopoverClose>
         <form action={onSubmit} className='space-y-4'>
           <div className='space-y-4'>
-            <p className='text-center text-xs font-medium italic text-neutral-700'>
+            <p className='text-center text-xs font-medium italic text-neutral-700 dark:text-neutral-200'>
               Images Provided by{' '}
               <Link
-                className='text-sky-900 underline'
+                className='text-sky-900 underline dark:text-sky-600'
                 href='https://unsplash.com/'
               >
                 Unsplash

components/logo.tsx

@@ -1,13 +1,21 @@
+'use client';
+
 import Image from 'next/image';
 import Link from 'next/link';
+import { useTheme } from 'next-themes';
 
 export const Logo = () => {
+  const { theme } = useTheme();
+
   return (
     // TODO: Make this go back to the organization page if you are logged in
     <Link href='/'>
-      <div className='hidden items-center gap-x-2 transition hover:opacity-75 md:flex'>
+      <div
+        className='hidden items-center gap-x-2 transition hover:opacity-75 md:flex'
+        suppressHydrationWarning
+      >
         <Image
-          src='/logo-transparent.svg'
+          src={`/logo-${theme === 'light' ? 'light' : 'dark'}.svg`}
           alt='logo'
           height={100}
           width={100}

components/modals/card-modal/actions.tsx

@@ -82,7 +82,7 @@ export const Actions = ({ data }: ActionsProps) => {
       <DatePicker
         type='dueDate'
         variant='gray'
-        className='w-full justify-start text-black'
+        className='w-full justify-start text-black dark:text-white'
         size='inline'
         placeholder='Add Due Date'
         afterSelectText='Due '
@@ -92,7 +92,7 @@ export const Actions = ({ data }: ActionsProps) => {
       <DatePicker
         type='startedAtDate'
         variant='gray'
-        className='w-full justify-start text-black'
+        className='w-full justify-start text-black dark:text-white'
         size='inline'
         placeholder='Add Started Date'
         afterSelectText='Started '
@@ -103,7 +103,7 @@ export const Actions = ({ data }: ActionsProps) => {
         onClick={onDelete}
         disabled={isLoadingDelete}
         variant='gray'
-        className='w-full justify-start text-destructive'
+        className='w-full justify-start text-destructive dark:text-red-500'
         size='inline'
       >
         <Trash className='mr-2 h-4 w-4' />

components/modals/card-modal/activity.tsx

@@ -13,9 +13,11 @@ interface ActivityProps {
 export const Activity = ({ items }: ActivityProps) => {
   return (
     <div className='flex w-full items-start gap-x-3'>
-      <ActivityIcon className='mt-0.5 h-5 w-5 text-neutral-700' />
+      <ActivityIcon className='mt-0.5 h-5 w-5 text-neutral-700 dark:text-neutral-100' />
       <div className='w-full'>
-        <p className='mb-2 font-semibold text-neutral-700'>Activity</p>
+        <p className='mb-2 font-semibold text-neutral-700 dark:text-neutral-100'>
+          Activity
+        </p>
         <ol className='mt-2 space-y-4'>
           {items.map((item) => (
             <ActivityItem key={item.id} data={item} />

components/modals/card-modal/description.tsx

@@ -74,9 +74,11 @@ export const Description = ({ data }: DescriptionProps) => {
 
   return (
     <div className='flex w-full items-start gap-x-3'>
-      <AlignLeft className='mt-0.5 h-5 w-5 text-neutral-700' />
+      <AlignLeft className='mt-0.5 h-5 w-5 text-neutral-700 dark:text-neutral-100' />
       <div className='w-full'>
-        <p className='mb-2 font-semibold text-neutral-700'>Description</p>
+        <p className='mb-2 font-semibold text-neutral-700 dark:text-neutral-100'>
+          Description
+        </p>
         {isEditing ? (
           <form ref={formRef} className='space-y-2' action={onSubmit}>
             <FormTextarea
@@ -103,7 +105,7 @@ export const Description = ({ data }: DescriptionProps) => {
           <div
             onClick={enaleEditing}
             role='button'
-            className='min-h-[78px] rounded-md bg-neutral-200 px-3.5 py-3 text-sm font-medium'
+            className='min-h-[78px] rounded-md bg-neutral-200 px-3.5 py-3 text-sm font-medium dark:bg-neutral-800'
           >
             {data.description ?? 'Add a more detailed description...'}
           </div>

components/modals/card-modal/header.tsx

@@ -61,7 +61,7 @@ export const Header = ({ data }: HeaderProps) => {
 
   return (
     <div className='mb-6 flex w-full items-start gap-x-3'>
-      <Layout className='mt-1 h-5 w-5 text-neutral-700' />
+      <Layout className='mt-1 h-5 w-5 text-neutral-700 dark:text-neutral-100' />
       <div className='w-full'>
         <form action={onSubmit}>
           <FormInput
@@ -69,7 +69,7 @@ export const Header = ({ data }: HeaderProps) => {
             ref={inputRef}
             onBlur={onBlur}
             defaultValue={title}
-            className='font-semi-bold relative -left-1 mb-0.5 w-[95%] truncate border-transparent bg-transparent px-1 text-xl text-neutral-700 focus-visible:border-input focus-visible:bg-white'
+            className='font-semi-bold relative -left-1 mb-0.5 w-[95%] truncate border-transparent bg-transparent px-1 text-xl text-neutral-700 focus-visible:border-input focus-visible:bg-white dark:text-neutral-100 dark:focus-visible:bg-black'
           />
         </form>
         <p className='text-sm text-muted-foreground'>

components/modals/pro-modal.tsx

@@ -37,9 +37,9 @@ export const ProModal = () => {
         <div className='relative flex aspect-video items-center justify-center'>
           <Image src='/hero.svg' alt='hero' className='object-cover' fill />
         </div>
-        <div className='mx-auto space-y-6 p-6 text-neutral-700'>
+        <div className='mx-auto space-y-6 p-6 text-neutral-700 dark:text-neutral-200'>
           <h1 className='text-xl font-semibold'>Upgrade to Tasko Pro Today!</h1>
-          <p className='text-xs font-semibold text-neutral-600'>
+          <p className='text-xs font-semibold text-neutral-600 dark:text-neutral-300'>
             Explore the best of Tasko
           </p>
           <div className='pl-3'>

components/theme-provider.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+import * as React from 'react';
+import { ThemeProvider as NextThemesProvider } from 'next-themes';
+
+export function ThemeProvider({
+  children,
+  ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}

components/ui/button.tsx

@@ -18,9 +18,10 @@ const buttonVariants = cva(
           'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
-        primary: 'bg-sky-700 text-primary-foreground hover:bg-sky-700/90',
+        primary:
+          'bg-sky-700 text-primary-foreground hover:bg-sky-700/90 dark:text-neutral-200',
         transparent: 'bg-transparent text-white hover:bg-white/20',
-        gray: 'bg-neutral-200 text-secondary-foreground hover:bg-neutral-300',
+        gray: 'bg-neutral-200 text-secondary-foreground hover:bg-neutral-300 dark:bg-neutral-700 dark:text-neutral-200 dark:hover:bg-neutral-600',
       },
       size: {
         default: 'h-10 px-4 py-2',

components/ui/dropdown-menu.tsx

@@ -0,0 +1,200 @@
+'use client';
+
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { Check, ChevronRight, Circle } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      'flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className='ml-auto' />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className='h-4 w-4' />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    {...props}
+  >
+    <span className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className='h-2 w-2 fill-current' />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      'px-2 py-1.5 text-sm font-semibold',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
+      {...props}
+    />
+  );
+};
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};

components/ui/mode-toggle.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+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-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0' />
+          <Moon className='absolute h-4 w-4 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>
+  );
+}