From 82a3cad3f5deb61c491553e1d0472f3a466031a7 Mon Sep 17 00:00:00 2001
From: Henry <henry_ball@hotmail.co.uk>
Date: Mon, 1 Apr 2024 12:23:39 +0100
Subject: [PATCH] feat: light mode styling

---
 src/app/boards/components/BoardsList.tsx |  4 ++--
 src/app/boards/page.tsx                  |  6 +++---
 src/app/components/FeedbackButton.tsx    |  2 +-
 src/app/components/ReactiveButton.tsx    |  6 ++----
 src/app/components/SideNavigation.tsx    |  2 +-
 src/app/components/UserMenu.tsx          |  1 -
 src/app/components/WorkspaceMenu.tsx     | 14 +++++++-------
 src/app/components/dashboard.tsx         |  4 ++--
 tailwind.config.ts                       | 11 ++++++-----
 9 files changed, 24 insertions(+), 26 deletions(-)

diff --git a/src/app/boards/components/BoardsList.tsx b/src/app/boards/components/BoardsList.tsx
index 2130681c..554bed93 100644
--- a/src/app/boards/components/BoardsList.tsx
+++ b/src/app/boards/components/BoardsList.tsx
@@ -19,7 +19,7 @@ export function BoardsList() {
     <div className="xxl:grid-cols-5 grid w-full grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
       {data?.map((board) => (
         <Link key={board.publicId} href={`boards/${board.publicId}`}>
-          <div className="align-center relative mr-5 flex h-[150px] w-full items-center justify-center rounded-md border border-dashed border-dark-600 bg-dark-100 hover:bg-dark-200">
+          <div className="align-center bg-light-100 border-light-600 hover:bg-light-200 relative mr-5 flex h-[150px] w-full items-center justify-center rounded-md border border-dashed dark:border-dark-600 dark:bg-dark-100 dark:hover:bg-dark-200">
             <div>
               <svg
                 style={{
@@ -56,7 +56,7 @@ export function BoardsList() {
                 ></rect>
               </svg>
             </div>
-            <p className="text-md px-4 font-medium text-dark-1000">
+            <p className="text-md px-4 font-medium text-neutral-900 dark:text-dark-1000">
               {board.name}
             </p>
           </div>
diff --git a/src/app/boards/page.tsx b/src/app/boards/page.tsx
index 0e213796..4c67bf4b 100644
--- a/src/app/boards/page.tsx
+++ b/src/app/boards/page.tsx
@@ -16,13 +16,13 @@ export default function BoardsPage() {
   return (
     <div className="p-8">
       <div className="mb-8 flex w-full justify-between">
-        <h1 className="font-medium tracking-tight text-dark-1000 sm:text-[1.2rem]">
+        <h1 className="font-medium tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
           Boards
         </h1>
         <div className="flex">
           <button
             type="button"
-            className="bg-dark-3000 mr-2 flex items-center gap-x-1.5 rounded-md border-[1px] border-dark-600 px-3 py-2 text-sm text-dark-1000 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+            className="bg-dark-3000 border-light-600 mr-2 flex items-center gap-x-1.5 rounded-md border-[1px] px-3 py-2 text-sm text-neutral-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:border-dark-600 dark:text-dark-1000"
             onClick={() => openModal("IMPORT_BOARDS")}
           >
             <div className="flex h-5 w-5 items-center">
@@ -32,7 +32,7 @@ export default function BoardsPage() {
           </button>
           <button
             type="button"
-            className="flex items-center gap-x-1.5 rounded-md bg-dark-1000 px-3 py-2 text-sm font-semibold text-dark-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+            className="bg-light-1000 text-light-50 flex items-center gap-x-1.5 rounded-md px-3 py-2 text-sm font-semibold focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:bg-dark-1000 dark:text-dark-50"
             onClick={() => openModal("NEW_BOARD")}
           >
             <div className="h-5 w-5 items-center">
diff --git a/src/app/components/FeedbackButton.tsx b/src/app/components/FeedbackButton.tsx
index a5ef0e24..46455de2 100644
--- a/src/app/components/FeedbackButton.tsx
+++ b/src/app/components/FeedbackButton.tsx
@@ -18,7 +18,7 @@ const FeedbackButton: React.FC = () => {
     <button
       type="button"
       onMouseEnter={handleMouseEnter}
-      className="flex items-center rounded-md border-[1px] border-dark-600 bg-dark-50 px-2.5 py-1.5 text-sm font-normal text-dark-1000 shadow-sm"
+      className="bg-light-50 border-light-600 flex items-center rounded-md border-[1px] px-2.5 py-1.5 text-sm font-normal text-neutral-900 shadow-sm dark:border-dark-600 dark:bg-dark-50 dark:text-dark-1000"
     >
       <LottieIcon index={index} json={chatIcon} isPlaying={isHovered} />
       <span className="ml-1">Feedback</span>
diff --git a/src/app/components/ReactiveButton.tsx b/src/app/components/ReactiveButton.tsx
index 4e4a5c61..e10075a9 100644
--- a/src/app/components/ReactiveButton.tsx
+++ b/src/app/components/ReactiveButton.tsx
@@ -28,10 +28,8 @@ const Button: React.FC<{
       href={href}
       onMouseEnter={handleMouseEnter}
       className={classNames(
-        current
-          ? "bg-dark-200 text-white"
-          : "bg-dark-50 text-white hover:bg-dark-200",
-        "group flex items-center gap-x-3 rounded-md p-1.5 text-sm font-normal leading-6 text-dark-1000",
+        current ? "bg-light-200  dark:bg-dark-200" : " dark:bg-dark-50",
+        "hover:bg-light-200 group flex items-center gap-x-3 rounded-md p-1.5 text-sm font-normal leading-6 text-neutral-900 dark:text-dark-1000 dark:hover:bg-dark-200",
       )}
     >
       <LottieIcon index={index} json={json} isPlaying={isHovered} />
diff --git a/src/app/components/SideNavigation.tsx b/src/app/components/SideNavigation.tsx
index ed3b77dd..0c5551a2 100644
--- a/src/app/components/SideNavigation.tsx
+++ b/src/app/components/SideNavigation.tsx
@@ -34,7 +34,7 @@ export default function SideNavigation({ user }: SideNavigationProps) {
 
   return (
     <>
-      <nav className="flex w-72 flex-col justify-between border-r border-dark-600 px-3 pb-3 pt-5">
+      <nav className="border-light-600 flex w-72 flex-col justify-between border-r px-3 pb-3 pt-5 dark:border-dark-600">
         <div>
           <WorkspaceMenu />
           <ul role="list" className="space-y-1">
diff --git a/src/app/components/UserMenu.tsx b/src/app/components/UserMenu.tsx
index 09b9f936..a94c6e79 100644
--- a/src/app/components/UserMenu.tsx
+++ b/src/app/components/UserMenu.tsx
@@ -4,7 +4,6 @@ import { Fragment } from "react";
 import Image from "next/image";
 import { signOut } from "next-auth/react";
 import { Menu, Transition } from "@headlessui/react";
-import { HiOutlineLogout } from "react-icons/hi";
 import { useTheme } from "~/app/providers/theme";
 
 interface UserMenuProps {
diff --git a/src/app/components/WorkspaceMenu.tsx b/src/app/components/WorkspaceMenu.tsx
index 23c6f8bc..46100313 100644
--- a/src/app/components/WorkspaceMenu.tsx
+++ b/src/app/components/WorkspaceMenu.tsx
@@ -15,13 +15,13 @@ export default function WorkspaceMenu() {
   return (
     <Menu as="div" className="relative inline-block w-full pb-3 text-left">
       <div>
-        <Menu.Button className="mb-1 flex w-full items-center rounded-[5px] p-1.5 hover:bg-dark-200">
+        <Menu.Button className="hover:bg-light-200 mb-1 flex w-full items-center rounded-[5px] p-1.5 dark:hover:bg-dark-200">
           <span className="inline-flex h-6 w-6 items-center justify-center rounded-[5px] bg-indigo-700">
             <span className="text-xs font-bold leading-none text-white">
               {workspace?.name.charAt(0).toUpperCase()}
             </span>
           </span>
-          <span className="ml-2 text-sm font-bold text-dark-1000">
+          <span className="ml-2 text-sm font-bold text-neutral-900 dark:text-dark-1000">
             {workspace?.name}
           </span>
         </Menu.Button>
@@ -36,14 +36,14 @@ export default function WorkspaceMenu() {
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Menu.Items className="absolute left-0 z-10 w-full origin-top-left rounded-md border border-dark-500 bg-dark-300 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+        <Menu.Items className="bg-light-50 border-light-600 absolute left-0 z-10 w-full origin-top-left rounded-md border shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-600 dark:bg-dark-300">
           <div className="p-1">
             {availableWorkspaces.map((availableWorkspace) => (
               <div key={availableWorkspace.publicId} className="flex">
                 <Menu.Item>
                   <button
                     onClick={() => switchWorkspace(availableWorkspace)}
-                    className="flex w-full items-center justify-between rounded-[5px] px-3 py-2 text-left text-sm text-dark-1000 hover:bg-dark-400"
+                    className="hover:bg-light-200 flex w-full items-center justify-between rounded-[5px] px-3 py-2 text-left text-sm text-neutral-900 dark:text-dark-1000 dark:hover:bg-dark-400"
                   >
                     <div>
                       <span className="inline-flex h-5 w-5 items-center justify-center rounded-[5px] bg-indigo-700">
@@ -51,7 +51,7 @@ export default function WorkspaceMenu() {
                           {availableWorkspace?.name.charAt(0).toUpperCase()}
                         </span>
                       </span>
-                      <span className="ml-2 text-xs font-medium text-dark-1000">
+                      <span className="ml-2 text-xs font-medium">
                         {availableWorkspace?.name}
                       </span>
                     </div>
@@ -65,11 +65,11 @@ export default function WorkspaceMenu() {
               </div>
             ))}
           </div>
-          <div className="border-t-[1px] border-dark-500 p-1">
+          <div className="border-light-600 border-t-[1px] p-1 dark:border-dark-500">
             <Menu.Item>
               <button
                 onClick={() => openModal("NEW_WORKSPACE")}
-                className="flex w-full items-center justify-between rounded-[5px] px-3 py-2 text-left text-xs text-dark-1000 hover:bg-dark-400"
+                className="hover:bg-light-200 flex w-full items-center justify-between rounded-[5px] px-3 py-2 text-left text-xs text-neutral-900 dark:text-dark-1000 dark:hover:bg-dark-400"
               >
                 Create workspace
               </button>
diff --git a/src/app/components/dashboard.tsx b/src/app/components/dashboard.tsx
index d17ae3da..a9ad8429 100644
--- a/src/app/components/dashboard.tsx
+++ b/src/app/components/dashboard.tsx
@@ -14,9 +14,9 @@ export default async function Dashboard(props: { children: React.ReactNode }) {
 
   return (
     <main className="bg-light-50 flex h-screen flex-col items-center dark:bg-dark-50">
-      <div className="m-auto flex h-16 w-full justify-between border-b border-dark-600 px-5 py-2 align-middle">
+      <div className="border-light-600 m-auto flex h-16 w-full justify-between border-b px-5 py-2 align-middle dark:border-dark-600">
         <div className="my-auto flex w-full items-center justify-between">
-          <h1 className="text-lg font-bold tracking-tight text-dark-1000">
+          <h1 className="text-lg font-bold tracking-tight text-neutral-900 dark:text-dark-1000">
             kan.bn
           </h1>
           <FeedbackButton />
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 44f9d0d7..467e09bf 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -33,11 +33,12 @@ export default {
         "light-300": "hsl(0deg 0% 92.9%)",
         "light-400": "hsl(0deg 0% 91%)",
         "light-500": "hsl(0deg 0% 88.6%)",
-        "light-700": "hsl(0deg 0% 85.9%)",
-        "light-800": "hsl(0deg 0% 78%)",
-        "light-900": "hsl(0deg 0% 56.1%)",
-        "light-950": "hsl(0deg 0% 52.2%)",
-        "light-1000": "hsl(0deg 0% 43.5%)",
+        "light-600": "hsl(0deg 0% 85.9%)",
+        "light-700": "hsl(0deg 0% 78%)",
+        "light-800": "hsl(0deg 0% 56.1%)",
+        "light-900": "hsl(0deg 0% 52.2%)",
+        "light-950": "hsl(0deg 0% 43.5%)",
+        "light-1000": "hsl(0deg 0% 9%)"
       },
       screens: {
         xxl: '1600px'