Update packages to latest version

.npmrc

@@ -0,0 +1 @@
+save-exact=true

.storybook/main.ts

@@ -6,31 +6,20 @@ const config: StorybookConfig = {
     "../components/**/*.stories.@(js|jsx|ts|tsx)",
     "../components/**/*.mdx",
   ],
-  addons: [
-    {
-      name: "@storybook/addon-essentials",
-      options: {
-        docs: false,
-      },
-    },
-    "@chromatic-com/storybook",
-    "@storybook/addon-interactions",
-    {
-      name: "@storybook/addon-docs",
-      options: {
-        csfPluginOptions: null,
-        mdxPluginOptions: {},
-      },
+  addons: ["@chromatic-com/storybook", {
+    name: "@storybook/addon-docs",
+    options: {
+      csfPluginOptions: null,
+      mdxPluginOptions: {},
     },
-    {
-      name: "@storybook/addon-postcss",
-      options: {
-        postcssLoaderOptions: {
-          implementation: postcss,
-        },
+  }, {
+    name: "@storybook/addon-postcss",
+    options: {
+      postcssLoaderOptions: {
+        implementation: postcss,
       },
     },
-  ],
+  }],
   framework: {
     name: "@storybook/nextjs",
     options: {},

.storybook/preview.ts

@@ -1,5 +1,5 @@
-import type { Preview } from "@storybook/react";
-import "!style-loader!css-loader!postcss-loader!tailwindcss/tailwind.css";
+import type { Preview } from "@storybook/nextjs";
+import "../app/globals.css"
 
 const preview: Preview = {
   tags: ["autodocs"],

app/globals.css

@@ -1,22 +1,76 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
 
-@layer utilities {
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+
+  --color-chart-1: hsl(var(--chart-1));
+  --color-chart-2: hsl(var(--chart-2));
+  --color-chart-3: hsl(var(--chart-3));
+  --color-chart-4: hsl(var(--chart-4));
+  --color-chart-5: hsl(var(--chart-5));
+
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+}
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
+
+@utility no-scrollbar {
   /* Hide scrollbar for Chrome, Safari, and Opera */
-  .no-scrollbar::-webkit-scrollbar {
+  &::-webkit-scrollbar {
     display: none;
   }
 
   /* Hide scrollbar for IE, Edge, and Firefox */
-  .no-scrollbar {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
-  }
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
 }
 
-
-
 @layer base {
   :root {
     --background: 0 0% 100%;

app/teams/create/InviteForm.tsx

@@ -157,7 +157,7 @@ export function InviteForm({ onBack, teamName }: InviteFormProps) {
             <Button
               variant="ghost"
               size="icon"
-              className="h-9 w-9 flex-shrink-0 hover:bg-gray-100"
+              className="h-9 w-9 shrink-0 hover:bg-gray-100"
               onClick={handleGoBack}
             >
               <ArrowLeft className="h-5 w-5" />
@@ -218,7 +218,7 @@ export function InviteForm({ onBack, teamName }: InviteFormProps) {
                         }}
                         onClick={() => handleAddUser(user)}
                       >
-                        <Avatar className="h-9 w-9 flex-shrink-0">
+                        <Avatar className="h-9 w-9 shrink-0">
                           <AvatarFallback className="text-xs bg-blue-100 text-blue-600 font-medium">
                             {getInitials(user.firstName, user.lastName)}
                           </AvatarFallback>
@@ -231,7 +231,7 @@ export function InviteForm({ onBack, teamName }: InviteFormProps) {
                             {user.email}
                           </div>
                         </div>
-                        <div className="text-xs text-blue-600 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0 font-medium">
+                        <div className="text-xs text-blue-600 opacity-0 group-hover:opacity-100 transition-opacity shrink-0 font-medium">
                           + Add
                         </div>
                       </div>
@@ -289,7 +289,7 @@ export function InviteForm({ onBack, teamName }: InviteFormProps) {
                       key={user.id}
                       className="flex items-center gap-3 p-3 bg-blue-50 rounded-lg group hover:bg-blue-100 transition-colors border border-blue-100"
                     >
-                      <Avatar className="h-9 w-9 flex-shrink-0">
+                      <Avatar className="h-9 w-9 shrink-0">
                         <AvatarFallback className="text-xs bg-blue-100 text-blue-600 font-medium">
                           {getInitials(user.firstName, user.lastName)}
                         </AvatarFallback>
@@ -324,7 +324,7 @@ export function InviteForm({ onBack, teamName }: InviteFormProps) {
 
             <div className="space-y-3 pt-6 border-t border-gray-100">
               <Button
-                className="w-full bg-black hover:bg-gray-800 text-white h-12 text-base font-medium transition-colors shadow-sm"
+                className="w-full bg-black hover:bg-gray-800 text-white h-12 text-base font-medium transition-colors shadow-xs"
                 onClick={handleCreateTeam}
               >
                 Create Team

app/teams/page.tsx

@@ -21,12 +21,12 @@ const TeamsPage = () => {
 
         <div className="flex flex-col justify-center gap-3 md:gap-4 mt-8 md:mt-12 items-center w-full px-4">
           <Button
-            className="w-full max-w-xs h-12 md:h-auto text-base md:text-sm"
+            className="w-full cursor-pointer max-w-xs h-12 md:h-auto text-base md:text-sm"
             onClick={() => router.push("/teams/create")}
           >
             Create a Team
           </Button>
-          <Button className="w-full max-w-xs h-12 md:h-auto bg-white text-black border border-black font-bold hover:bg-gray-50 text-base md:text-sm">
+          <Button className="w-full cursor-pointer max-w-xs h-12 md:h-auto bg-white text-black border border-black font-bold hover:bg-gray-50 text-base md:text-sm">
             Join an Existing Team
           </Button>
         </div>

components/NavBar.tsx

@@ -23,7 +23,7 @@ export const NavBar = () => {
 
   return (
     <>
-      <nav className="fixed top-0 left-0 md:left-56 lg:left-56 xl:left-64 right-0 bg-white h-16 flex items-center justify-between md:justify-end px-4 md:px-6 shadow-sm border-b border-gray-200 z-10">
+      <nav className="fixed top-0 left-0 md:left-56 lg:left-56 xl:left-64 right-0 bg-white h-16 flex items-center justify-between md:justify-end px-4 md:px-6 shadow-xs border-b border-gray-200 z-10">
         <button
           type="button"
           className="md:hidden p-2 text-gray-600 hover:text-gray-800 hover:bg-gray-100 rounded-lg transition-colors"
@@ -62,7 +62,7 @@ export const NavBar = () => {
 
           <button
             type="button"
-            className="relative p-2 text-gray-600 hover:text-gray-800 hover:bg-gray-100 rounded-lg transition-colors"
+            className="relative p-2 cursor-pointer text-gray-600 hover:text-gray-800 hover:bg-gray-100 rounded-lg transition-colors"
           >
             <Bell className="w-5 h-5 md:w-6 md:h-6" />
             <span className="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>

components/SearchComponent.tsx

@@ -58,7 +58,7 @@ export const SearchComponent = ({
           onChange={(e) => setQuery(e.target.value)}
           onFocus={() => setShowResults(true)}
           onBlur={() => setTimeout(() => setShowResults(false), 200)}
-          className="w-full pl-8 md:pl-10 pr-4 py-2 bg-gray-50 border border-gray-200 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-black placeholder-gray-500 text-sm md:text-base"
+          className="w-full pl-8 md:pl-10 pr-4 py-2 bg-gray-50 border border-gray-200 rounded-full focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:border-transparent text-black placeholder-gray-500 text-sm md:text-base"
         />
       </div>
 

components/Shimmer/ListShimmer.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import React from "react";
 import { ListShimmer } from "./ListShimmer";
 

components/Shimmer/Shimmer.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import { Shimmer } from "@/components/Shimmer";
 import React from "react";
 

components/TaskCard.tsx

@@ -48,7 +48,7 @@ export const TaskCard = ({ task, className, setActiveTask }: TaskCardProps) => {
         <h2 className="text-sm sm:text-base ml-2 font-medium">{task.title}</h2>
       </div>
 
-      <div className="flex items-center space-x-6">
+      <div className="flex items-center">
         <div className="flex text-[#74787E] items-center justify-center space-x-2">
           <div className="hidden md:flex px-2 py-[2px] rounded-full border border-[#4541C6] bg-[#F5F5FF] text-xs">
             {task.assignee.name}

components/TaskDetails.tsx

@@ -43,15 +43,15 @@ export function TaskDetails({ onAcknowledge, initialData, onClose }: Props) {
 
 
     return (
-        <div data-testid="task-details-1" className="w-full absolute rounded-none top-0 left-0 h-full mt-auto md:static md:max-w-2xl bg-white md:rounded-xl shadow-sm shadow-gray-400 border-gray-200 border-[1px] overflow-hidden">
+        <div data-testid="task-details-1" className="w-full absolute rounded-none top-0 left-0 h-full mt-auto md:static md:max-w-2xl bg-white md:rounded-xl shadow-xs shadow-gray-400 border-gray-200 border overflow-hidden">
             <div className="p-6 space-y-6">
                 <div className='flex flex-row justify-between items-center'>
                     <h2 className="text-xl font-semibold text-indigo-600">{title}</h2>
                     <div className='flex flex-row gap-2'>
                         <button
                             onClick={onAcknowledge}
                             data-testid='details-acknowledge-button'
-                            className=" flex flex-row justify-center items-center gap-2 px-4 py-2 bg-indigo-600 text-white rounded-md text-sm font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+                            className=" flex flex-row justify-center cursor-pointer items-center gap-2 px-4 py-2 bg-indigo-600 text-white rounded-md text-sm font-medium hover:bg-indigo-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                         >
                             <span className='text-2xl text-white'>+</span>
                             <p>
@@ -60,15 +60,15 @@ export function TaskDetails({ onAcknowledge, initialData, onClose }: Props) {
                         </button>
                         <button
                             data-testid='details-close-button'
-                            className="md:hidden flex flex-row items-center justify-center gap-2 w-fit py-2 px-4 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600"
+                            className="md:hidden flex flex-row items-center justify-center gap-2 w-fit py-2 px-4 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-md focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600"
                             onClick={onClose}
                         >X</button>
                     </div>
                 </div>
 
-                <div className="text-gray-600 text-sm mb-4 max-h-40 whitespace-pre-wrap overflow-y-scroll no-scrollbar ">{description}</div>
+                <div className="text-gray-600 text-sm mb-6 max-h-40 whitespace-pre-wrap overflow-y-scroll no-scrollbar ">{description}</div>
 
-                <hr className='mb-4' />
+                <hr className='mb-6' />
 
                 <div className="space-y-6 mb-4">
                     <h3 className="text-sm font-medium text-gray-900">Properties</h3>
@@ -83,7 +83,7 @@ export function TaskDetails({ onAcknowledge, initialData, onClose }: Props) {
                     </div>
                 </div>
 
-                <hr className='mb-4' />
+                <hr className='my-6' />
 
                 <div className="mt-4">
                     <h3 className="text-sm font-medium text-gray-900 mb-4">Activity</h3>
@@ -110,7 +110,7 @@ export function TaskDetails({ onAcknowledge, initialData, onClose }: Props) {
                         <div className="h-fit rounded-xl overflow-hidden bg-[#F5F5FF]">
                             <textarea
                                 placeholder="Leave a comment..."
-                                className="w-full h-full text-sm bg-[#F5F5FF] text-indigo-600 border-none p-2 placeholder-gray-400 focus:outline-none"
+                                className="w-full h-full text-sm bg-[#F5F5FF] text-indigo-600 border-none p-2 placeholder-gray-400 focus:outline-hidden"
                             />
                         </div>
                     </div>

components/TaskHeader.tsx

@@ -30,7 +30,7 @@ export const TaskHeader = ({
         </h2>
       </div>
 
-      <button onClick={onCreateTask}>
+      <button onClick={onCreateTask} className="cursor-pointer">
         <Image src="/assets/plus.svg" alt="plusIcon" width={20} height={20} />
       </button>
     </div>

components/dashboard/DashboardTasksTableTabs.tsx

@@ -28,8 +28,8 @@ export function DashboardTasksTableTabs({ tasks }: { tasks: Task[] }) {
 
       <Tabs value={currentTab} onValueChange={handleTabChange}>
         <TabsList>
-          <TabsTrigger value={TabsConstants.All}>{TabsConstants.All}</TabsTrigger>
-          <TabsTrigger value={TabsConstants.WatchList}>{TabsConstants.WatchList}</TabsTrigger>
+          <TabsTrigger value={TabsConstants.All} className="cursor-pointer">{TabsConstants.All}</TabsTrigger>
+          <TabsTrigger value={TabsConstants.WatchList} className="cursor-pointer">{TabsConstants.WatchList}</TabsTrigger>
         </TabsList>
         <TabsContent value={TabsConstants.All}>
             <DashboardTasksTable type={TabsConstants.All} tasks={tasks} />

components/dashboard/DashboardWeeklySummary.tsx

@@ -1,10 +1,10 @@
 export const DashboardWeeklySummary = () => {
   return (
     <div className="lg:col-span-1">
-    <div className="bg-white rounded-lg shadow-sm border p-4">
+    <div className="bg-white rounded-lg shadow-xs border p-4">
       <div className="flex justify-between items-center mb-4">
         <h3 className="text-lg font-semibold">Weekly Summary</h3>
-        <button className="text-sm text-blue-600 hover:text-blue-700">See all tasks</button>
+        <button className="text-sm text-blue-600 hover:text-blue-700 cursor-pointer">See all tasks</button>
       </div>
 
       <div className="space-y-4">

components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {

components/ui/card.tsx

@@ -9,7 +9,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      "rounded-lg border bg-card text-card-foreground shadow-xs",
       className
     )}
     {...props}

components/ui/dialog.tsx

@@ -44,7 +44,7 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>

components/ui/input.tsx

@@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           className
         )}
         ref={ref}

components/ui/table.tsx

@@ -43,7 +43,7 @@ const TableFooter = React.forwardRef<
   <tfoot
     ref={ref}
     className={cn(
-      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      "border-t bg-muted/50 font-medium last:[&>tr]:border-b-0",
       className
     )}
     {...props}