From 5cf93f4c83b78dae362b4daac62f82d1b7f0de3f Mon Sep 17 00:00:00 2001
From: Henry <henry_ball@hotmail.co.uk>
Date: Tue, 2 Apr 2024 20:20:41 +0100
Subject: [PATCH] feat: light mode tweaks

---
 .../[...boardId]/components/BoardDropdown.tsx |  23 ++--
 .../components/DeleteBoardConfirmation.tsx    |   8 +-
 .../components/DeleteListConfirmation.tsx     |   8 +-
 .../[...boardId]/components/NewCardForm.tsx   |  34 +++---
 .../[...boardId]/components/NewListForm.tsx   |  26 ++--
 src/app/boards/[...boardId]/page.tsx          |   4 +-
 .../components/DeleteCardConfirmation.tsx     |   8 +-
 .../cards/[cardId]/components/Dropdown.tsx    |  23 ++--
 .../[cardId]/components/LabelSelector.tsx     |  12 +-
 .../[cardId]/components/ListSelector.tsx      |  64 +++++-----
 .../[cardId]/components/MemberSelector.tsx    |  69 +++++------
 .../[cardId]/components/NewLabelForm.tsx      |  22 ++--
 src/app/cards/[cardId]/page.tsx               |  13 +-
 src/app/components/CheckboxDropdown.tsx       |   4 +-
 src/app/members/page.tsx                      | 115 +++++++++++-------
 15 files changed, 234 insertions(+), 199 deletions(-)

diff --git a/src/app/boards/[...boardId]/components/BoardDropdown.tsx b/src/app/boards/[...boardId]/components/BoardDropdown.tsx
index 2b16dc35..3995c84e 100644
--- a/src/app/boards/[...boardId]/components/BoardDropdown.tsx
+++ b/src/app/boards/[...boardId]/components/BoardDropdown.tsx
@@ -11,8 +11,11 @@ export default function BoardDropdown() {
   return (
     <Menu as="div" className="relative inline-block text-left">
       <div>
-        <Menu.Button className="flex h-8 w-8 items-center justify-center rounded-[5px] hover:bg-dark-200">
-          <HiEllipsisHorizontal size={25} className="text-dark-900" />
+        <Menu.Button className="hover:bg-light-200 flex h-8 w-8 items-center justify-center rounded-[5px] dark:hover:bg-dark-200">
+          <HiEllipsisHorizontal
+            size={25}
+            className="text-light-900 dark:text-dark-900"
+          />
         </Menu.Button>
       </div>
 
@@ -25,17 +28,15 @@ export default function BoardDropdown() {
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Menu.Items className="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md border border-dark-400 bg-dark-300 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+        <Menu.Items className="bg-light-50 border-light-200 absolute right-0 z-30 mt-2 w-56 origin-top-right rounded-md border shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-400 dark:bg-dark-300">
           <div className="flex">
             <Menu.Item>
-              {() => (
-                <button
-                  onClick={() => openModal("DELETE_BOARD")}
-                  className="m-1 w-full rounded-[5px] px-3 py-2 text-left text-sm text-dark-1000 hover:bg-dark-400"
-                >
-                  Delete board
-                </button>
-              )}
+              <button
+                onClick={() => openModal("DELETE_BOARD")}
+                className="hover:bg-light-200 m-1 w-full rounded-[5px] px-3 py-2 text-left text-sm text-neutral-900 dark:text-dark-1000 dark:hover:bg-dark-400"
+              >
+                Delete board
+              </button>
             </Menu.Item>
           </div>
         </Menu.Items>
diff --git a/src/app/boards/[...boardId]/components/DeleteBoardConfirmation.tsx b/src/app/boards/[...boardId]/components/DeleteBoardConfirmation.tsx
index aafd45bf..060c81d8 100644
--- a/src/app/boards/[...boardId]/components/DeleteBoardConfirmation.tsx
+++ b/src/app/boards/[...boardId]/components/DeleteBoardConfirmation.tsx
@@ -21,16 +21,16 @@ export function DeleteBoardConfirmation() {
   return (
     <>
       <div className="flex w-full flex-col justify-between pb-4">
-        <h2 className="text-md pb-4 font-medium text-dark-1000">
+        <h2 className="text-md pb-4 font-medium text-neutral-900 dark:text-dark-1000">
           Are you sure you want to delete this board?
         </h2>
-        <p className="text-sm font-medium text-dark-900">
+        <p className="text-light-900 text-sm font-medium dark:text-dark-900">
           {"This action can't be undone."}
         </p>
       </div>
       <div className="mt-5 flex justify-end sm:mt-6">
         <button
-          className="mr-4 inline-flex justify-center rounded-md border-[1px] border-dark-600 bg-dark-300 px-3 py-2 text-sm font-semibold text-dark-1000 shadow-sm focus-visible:outline-none"
+          className="bg-light-50 border-light-600 mr-4 inline-flex justify-center rounded-md border-[1px] px-3 py-2 text-sm font-semibold text-neutral-900 shadow-sm focus-visible:outline-none dark:border-dark-600 dark:bg-dark-300 dark:text-dark-1000"
           onClick={() => closeModal()}
         >
           Cancel
@@ -41,7 +41,7 @@ export function DeleteBoardConfirmation() {
               boardPublicId: boardData.publicId,
             })
           }
-          className="inline-flex justify-center rounded-md bg-dark-1000 px-3 py-2 text-sm font-semibold text-dark-50 shadow-sm focus-visible:outline-none"
+          className="bg-light-1000 text-light-50 inline-flex justify-center rounded-md px-3 py-2 text-sm font-semibold shadow-sm focus-visible:outline-none dark:bg-dark-1000 dark:text-dark-50"
         >
           Delete
         </button>
diff --git a/src/app/boards/[...boardId]/components/DeleteListConfirmation.tsx b/src/app/boards/[...boardId]/components/DeleteListConfirmation.tsx
index 9971cb09..65f4da50 100644
--- a/src/app/boards/[...boardId]/components/DeleteListConfirmation.tsx
+++ b/src/app/boards/[...boardId]/components/DeleteListConfirmation.tsx
@@ -28,16 +28,16 @@ export function DeleteListConfirmation({
   return (
     <>
       <div className="flex w-full flex-col justify-between pb-4">
-        <h2 className="text-md pb-4 font-medium text-dark-1000">
+        <h2 className="text-md pb-4 font-medium text-neutral-900 dark:text-dark-1000">
           Are you sure you want to delete this list?
         </h2>
-        <p className="text-sm font-medium text-dark-900">
+        <p className="text-light-900 text-sm font-medium dark:text-dark-900">
           {"This action can't be undone."}
         </p>
       </div>
       <div className="mt-5 flex justify-end sm:mt-6">
         <button
-          className="mr-4 inline-flex justify-center rounded-md border-[1px] border-dark-600 bg-dark-300 px-3 py-2 text-sm font-semibold text-dark-1000 shadow-sm focus-visible:outline-none"
+          className="bg-light-50 border-light-600 mr-4 inline-flex justify-center rounded-md border-[1px] px-3 py-2 text-sm font-semibold text-neutral-900 shadow-sm focus-visible:outline-none dark:border-dark-600 dark:bg-dark-300 dark:text-dark-1000"
           onClick={() => closeModal()}
         >
           Cancel
@@ -48,7 +48,7 @@ export function DeleteListConfirmation({
               listPublicId,
             })
           }
-          className="inline-flex justify-center rounded-md bg-dark-1000 px-3 py-2 text-sm font-semibold text-dark-50 shadow-sm focus-visible:outline-none"
+          className="bg-light-1000 text-light-50 inline-flex justify-center rounded-md px-3 py-2 text-sm font-semibold shadow-sm focus-visible:outline-none dark:bg-dark-1000 dark:text-dark-50"
         >
           Delete
         </button>
diff --git a/src/app/boards/[...boardId]/components/NewCardForm.tsx b/src/app/boards/[...boardId]/components/NewCardForm.tsx
index c22bcded..cfc8fd83 100644
--- a/src/app/boards/[...boardId]/components/NewCardForm.tsx
+++ b/src/app/boards/[...boardId]/components/NewCardForm.tsx
@@ -137,13 +137,15 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) {
 
   return (
     <>
-      <div className="flex w-full justify-between pb-4">
-        <h2 className="text-sm font-bold text-dark-1000">New card</h2>
+      <div className="flex w-full items-center justify-between pb-4">
+        <h2 className="text-sm font-bold text-neutral-900 dark:text-dark-1000">
+          New card
+        </h2>
         <button
-          className="rounded p-1 hover:bg-dark-300 focus:outline-none"
+          className="hover:bg-light-200 rounded p-1 focus:outline-none dark:hover:bg-dark-300"
           onClick={() => closeModal()}
         >
-          <HiXMark size={18} className="text-dark-900" />
+          <HiXMark size={18} className="text-light-900 dark:text-dark-900" />
         </button>
       </div>
 
@@ -151,7 +153,7 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) {
         <div>
           <label
             htmlFor="title"
-            className="block pb-2 text-sm font-normal leading-6 text-dark-1000"
+            className="block pb-2 text-sm font-normal leading-6 text-neutral-900 dark:text-dark-1000"
           >
             Title
           </label>
@@ -159,7 +161,7 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) {
             id="title"
             type="text"
             {...register("title")}
-            className="block w-full rounded-md border-0 bg-dark-300 bg-white/5 py-1.5 text-dark-1000 shadow-sm ring-1 ring-inset ring-dark-700 focus:ring-2 focus:ring-inset focus:ring-dark-700 sm:text-sm sm:leading-6"
+            className="ring-light-600 focus:ring-light-600 block w-full rounded-md border-0 bg-dark-300 bg-white/5 py-1.5 text-neutral-900 shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6"
           />
         </div>
         <div className="mt-2 flex space-x-1">
@@ -170,7 +172,7 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) {
                 handleSelectList(list.key)
               }
             >
-              <div className="flex h-full w-full items-center rounded-[5px] border-[1px] border-dark-600 bg-dark-400 px-2 py-1 text-left text-xs text-dark-1000 hover:bg-dark-500">
+              <div className="border-light-600 bg-light-200 text-light-800 hover:bg-light-300 flex h-full w-full items-center rounded-[5px] border-[1px] px-2 py-1 text-left text-xs dark:border-dark-600 dark:bg-dark-400 dark:text-dark-1000 dark:hover:bg-dark-500">
                 {selectedList?.value}
               </div>
             </CheckboxDropdown>
@@ -182,7 +184,7 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) {
                 handleSelectMembers(list.key)
               }
             >
-              <div className="flex h-full w-full items-center rounded-[5px] border-[1px] border-dark-600 bg-dark-400 px-2 py-1 text-left text-xs text-dark-1000 hover:bg-dark-500">
+              <div className="border-light-600 bg-light-200 text-light-800 hover:bg-light-300 flex h-full w-full items-center rounded-[5px] border-[1px] px-2 py-1 text-left text-xs dark:border-dark-600 dark:bg-dark-400 dark:text-dark-1000 dark:hover:bg-dark-500">
                 {!memberPublicIds.length ? (
                   "Members"
                 ) : (
@@ -195,7 +197,7 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) {
                       return (
                         <span
                           key={member?.key}
-                          className="inline-flex h-4 w-4 items-center justify-center rounded-full bg-gray-400 ring-1 ring-dark-500"
+                          className="ring-light-200 inline-flex h-4 w-4 items-center justify-center rounded-full bg-gray-400 ring-1 dark:ring-dark-500"
                         >
                           <span className="text-[8px] font-medium leading-none text-white">
                             {member?.value
@@ -220,7 +222,7 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) {
                 handleSelectLabels(list.key)
               }
             >
-              <div className="flex h-full w-full items-center rounded-[5px] border-[1px] border-dark-600 bg-dark-400 px-2 py-1 text-left text-xs text-dark-1000 hover:bg-dark-500">
+              <div className="border-light-600 bg-light-200 text-light-800 hover:bg-light-300 flex h-full w-full items-center rounded-[5px] border-[1px] px-2 py-1 text-left text-xs dark:border-dark-600 dark:bg-dark-400 dark:text-dark-1000 dark:hover:bg-dark-500">
                 {!labelPublicIds.length ? (
                   "Labels"
                 ) : (
@@ -265,16 +267,20 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) {
         </div>
 
         <div className="mt-3 flex items-center justify-end">
-          <span className="mr-2 text-xs text-dark-900">Create more</span>
+          <span className="text-light-900 mr-2 text-xs dark:text-dark-900">
+            Create more
+          </span>
           <Switch
             checked={isCreateAnotherEnabled}
             onChange={handleToggleCreateAnother}
             className={classNames(
-              isCreateAnotherEnabled ? "bg-indigo-600" : "bg-dark-800",
+              isCreateAnotherEnabled
+                ? "bg-indigo-600"
+                : "bg-light-800 dark:bg-dark-800",
               "relative inline-flex h-4 w-6 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none",
             )}
           >
-            <span className="sr-only">Use setting</span>
+            <span className="sr-only">Create another</span>
             <span
               aria-hidden="true"
               className={classNames(
@@ -288,7 +294,7 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) {
         <div className="mt-5 sm:mt-6">
           <button
             type="submit"
-            className="inline-flex w-full justify-center rounded-md bg-dark-1000 px-3 py-2 text-sm font-semibold text-dark-50 shadow-sm focus-visible:outline-none"
+            className="bg-light-1000 text-light-50 inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold shadow-sm focus-visible:outline-none dark:bg-dark-1000 dark:text-dark-50"
           >
             Create card
           </button>
diff --git a/src/app/boards/[...boardId]/components/NewListForm.tsx b/src/app/boards/[...boardId]/components/NewListForm.tsx
index b87feb72..3f384f15 100644
--- a/src/app/boards/[...boardId]/components/NewListForm.tsx
+++ b/src/app/boards/[...boardId]/components/NewListForm.tsx
@@ -51,13 +51,15 @@ export function NewListForm({ boardPublicId }: boardPublicId) {
 
   return (
     <>
-      <div className="flex w-full justify-between pb-4">
-        <h2 className="text-sm font-bold text-dark-1000">New list</h2>
+      <div className="flex w-full items-center justify-between pb-4">
+        <h2 className="text-sm font-bold text-neutral-900 dark:text-dark-1000">
+          New list
+        </h2>
         <button
-          className="rounded p-1 hover:bg-dark-300 focus:outline-none"
+          className="hover:bg-light-200 rounded p-1 focus:outline-none dark:hover:bg-dark-300"
           onClick={() => closeModal()}
         >
-          <HiXMark size={18} className="text-dark-900" />
+          <HiXMark size={18} className="text-light-900 dark:text-dark-900" />
         </button>
       </div>
 
@@ -76,26 +78,30 @@ export function NewListForm({ boardPublicId }: boardPublicId) {
         <Form>
           <label
             htmlFor="list-name"
-            className="block pb-2 text-sm font-normal leading-6 text-dark-1000"
+            className="block pb-2 text-sm font-normal leading-6 text-neutral-900 dark:text-dark-1000"
           >
             Name
           </label>
           <Field
             id="list-name"
             name="name"
-            className="block w-full rounded-md border-0 bg-dark-300 bg-white/5 py-1.5 text-dark-1000 shadow-sm ring-1 ring-inset ring-dark-700 focus:ring-2 focus:ring-inset focus:ring-dark-700 sm:text-sm sm:leading-6"
+            className="ring-light-600 focus:ring-light-600 block w-full rounded-md border-0 bg-dark-300 bg-white/5 py-1.5 text-neutral-900 shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6"
           />
           <div className="mt-3 flex items-center justify-end">
-            <span className="mr-2 text-xs text-dark-900">Create more</span>
+            <span className="text-light-900 mr-2 text-xs dark:text-dark-900">
+              Create more
+            </span>
             <Switch
               checked={isCreateAnotherEnabled}
               onChange={setIsCreateAnotherEnabled}
               className={classNames(
-                isCreateAnotherEnabled ? "bg-indigo-600" : "bg-dark-800",
+                isCreateAnotherEnabled
+                  ? "bg-indigo-600"
+                  : "bg-light-800 dark:bg-dark-800",
                 "relative inline-flex h-4 w-6 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none",
               )}
             >
-              <span className="sr-only">Use setting</span>
+              <span className="sr-only">Create more</span>
               <span
                 aria-hidden="true"
                 className={classNames(
@@ -108,7 +114,7 @@ export function NewListForm({ boardPublicId }: boardPublicId) {
           <div className="mt-5 sm:mt-6">
             <button
               type="submit"
-              className="inline-flex w-full justify-center rounded-md bg-dark-1000 px-3 py-2 text-sm font-semibold text-dark-50 shadow-sm focus-visible:outline-none"
+              className="bg-light-1000 text-light-50 inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold shadow-sm focus-visible:outline-none dark:bg-dark-1000 dark:text-dark-50"
             >
               Create list
             </button>
diff --git a/src/app/boards/[...boardId]/page.tsx b/src/app/boards/[...boardId]/page.tsx
index 059ae66b..07cf5161 100644
--- a/src/app/boards/[...boardId]/page.tsx
+++ b/src/app/boards/[...boardId]/page.tsx
@@ -201,7 +201,7 @@ export default function BoardPage() {
         </svg>
       </div>
 
-      <div className="z-10 flex w-full justify-between p-8 ">
+      <div className="z-20 flex w-full justify-between p-8 ">
         <form
           onSubmit={formik.handleSubmit}
           className="focus-visible:outline-none"
@@ -232,7 +232,7 @@ export default function BoardPage() {
         </div>
       </div>
 
-      <div className="scrollbar-w-none z-10 flex-1 overflow-y-hidden overflow-x-scroll overscroll-contain pb-5 scrollbar scrollbar-track-dark-100 scrollbar-thumb-dark-300 scrollbar-track-rounded-[4px] scrollbar-thumb-rounded-[4px] scrollbar-h-[8px]">
+      <div className="scrollbar-w-none scrollbar-track-light-200 scrollbar-thumb-light-400 z-10 flex-1 overflow-y-hidden overflow-x-scroll overscroll-contain pb-5 scrollbar scrollbar-track-rounded-[4px] scrollbar-thumb-rounded-[4px] scrollbar-h-[8px] dark:scrollbar-track-dark-100 dark:scrollbar-thumb-dark-300">
         <DragDropContext onDragEnd={onDragEnd}>
           <Droppable droppableId="all-lists" direction="horizontal" type="LIST">
             {(provided) => (
diff --git a/src/app/cards/[cardId]/components/DeleteCardConfirmation.tsx b/src/app/cards/[cardId]/components/DeleteCardConfirmation.tsx
index a6fa2769..45c7ede5 100644
--- a/src/app/cards/[cardId]/components/DeleteCardConfirmation.tsx
+++ b/src/app/cards/[cardId]/components/DeleteCardConfirmation.tsx
@@ -26,16 +26,16 @@ export function DeleteCardConfirmation({
   return (
     <>
       <div className="flex w-full flex-col justify-between pb-4">
-        <h2 className="text-md pb-4 font-medium text-dark-1000">
+        <h2 className="text-md pb-4 font-medium text-neutral-900 dark:text-dark-1000">
           Are you sure you want to delete this card?
         </h2>
-        <p className="text-sm font-medium text-dark-900">
+        <p className="text-light-900 text-sm font-medium dark:text-dark-900">
           {"This action can't be undone."}
         </p>
       </div>
       <div className="mt-5 flex justify-end sm:mt-6">
         <button
-          className="mr-4 inline-flex justify-center rounded-md border-[1px] border-dark-600 bg-dark-300 px-3 py-2 text-sm font-semibold text-dark-1000 shadow-sm focus-visible:outline-none"
+          className="bg-light-50 border-light-600 mr-4 inline-flex justify-center rounded-md border-[1px] px-3 py-2 text-sm font-semibold text-neutral-900 shadow-sm focus-visible:outline-none dark:border-dark-600 dark:bg-dark-300 dark:text-dark-1000"
           onClick={() => closeModal()}
         >
           Cancel
@@ -46,7 +46,7 @@ export function DeleteCardConfirmation({
               cardPublicId,
             })
           }
-          className="inline-flex justify-center rounded-md bg-dark-1000 px-3 py-2 text-sm font-semibold text-dark-50 shadow-sm focus-visible:outline-none"
+          className="bg-light-1000 text-light-50 inline-flex justify-center rounded-md px-3 py-2 text-sm font-semibold shadow-sm focus-visible:outline-none dark:bg-dark-1000 dark:text-dark-50"
         >
           Delete
         </button>
diff --git a/src/app/cards/[cardId]/components/Dropdown.tsx b/src/app/cards/[cardId]/components/Dropdown.tsx
index 0dfc63ff..deb9dee1 100644
--- a/src/app/cards/[cardId]/components/Dropdown.tsx
+++ b/src/app/cards/[cardId]/components/Dropdown.tsx
@@ -11,8 +11,11 @@ export default function Dropdown() {
   return (
     <Menu as="div" className="relative inline-block text-left">
       <div>
-        <Menu.Button className="flex h-8 w-8 items-center justify-center rounded-[5px] hover:bg-dark-200">
-          <HiEllipsisHorizontal size={25} className="text-dark-900" />
+        <Menu.Button className="hover:bg-light-200 flex h-8 w-8 items-center justify-center rounded-[5px] dark:hover:bg-dark-200">
+          <HiEllipsisHorizontal
+            size={25}
+            className="text-light-900 dark:text-dark-900"
+          />
         </Menu.Button>
       </div>
 
@@ -25,17 +28,15 @@ export default function Dropdown() {
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Menu.Items className="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-dark-200 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+        <Menu.Items className="bg-light-50 border-light-200 absolute right-0 z-30 mt-2 w-56 origin-top-right rounded-md border shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-400 dark:bg-dark-300">
           <div className="flex">
             <Menu.Item>
-              {() => (
-                <button
-                  onClick={() => openModal("DELETE_CARD")}
-                  className="m-1 w-full rounded-[5px] px-3 py-2 text-left text-sm text-dark-1000 hover:bg-dark-400"
-                >
-                  Delete
-                </button>
-              )}
+              <button
+                onClick={() => openModal("DELETE_CARD")}
+                className="hover:bg-light-200 m-1 w-full rounded-[5px] px-3 py-2 text-left text-sm text-neutral-900 dark:text-dark-1000 dark:hover:bg-dark-400"
+              >
+                Delete card
+              </button>
             </Menu.Item>
           </div>
         </Menu.Items>
diff --git a/src/app/cards/[cardId]/components/LabelSelector.tsx b/src/app/cards/[cardId]/components/LabelSelector.tsx
index 4dfff403..db21f180 100644
--- a/src/app/cards/[cardId]/components/LabelSelector.tsx
+++ b/src/app/cards/[cardId]/components/LabelSelector.tsx
@@ -58,7 +58,7 @@ export default function LabelSelector({
             {selectedLabels.map((label) => (
               <Menu.Button
                 key={label.publicId}
-                className="my-1 mr-2 inline-flex w-fit items-center gap-x-1.5 rounded-full px-2 py-1 text-[12px] font-medium text-dark-1000 ring-1 ring-inset ring-dark-800"
+                className="text-light-800 ring-light-600 my-1 mr-2 inline-flex w-fit items-center gap-x-1.5 rounded-full px-2 py-1 text-[12px] font-medium ring-1 ring-inset dark:text-dark-1000 dark:ring-dark-800"
               >
                 <svg
                   fill={label.colourCode}
@@ -71,13 +71,13 @@ export default function LabelSelector({
                 <div>{label.name}</div>
               </Menu.Button>
             ))}
-            <Menu.Button className="my-1 inline-flex w-fit items-center gap-x-1.5 rounded-full py-1 pl-2 pr-4 text-[12px] font-medium text-dark-800 ring-inset ring-dark-800 hover:bg-dark-200">
+            <Menu.Button className="hover:bg-light-400 my-1 inline-flex w-fit items-center gap-x-1.5 rounded-full py-1 pl-2 pr-4 text-[12px] font-medium text-dark-800 ring-inset ring-dark-800 dark:hover:bg-dark-200">
               <HiMiniPlus size={16} />
               Add label
             </Menu.Button>
           </>
         ) : (
-          <Menu.Button className="flex h-full w-full items-center rounded-[5px] border-[1px] border-dark-100 pl-2 text-left text-sm hover:border-dark-300 hover:bg-dark-200">
+          <Menu.Button className="border-light-200 hover:bg-light-300 flex h-full w-full items-center rounded-[5px] border-[1px] pl-2 text-left text-sm text-neutral-900 dark:border-dark-100 dark:text-dark-1000 dark:hover:border-dark-300 dark:hover:bg-dark-200">
             <HiMiniPlus size={22} className="pr-2" />
             Add label
           </Menu.Button>
@@ -92,7 +92,7 @@ export default function LabelSelector({
           leaveFrom="transform opacity-100 scale-100"
           leaveTo="transform opacity-0 scale-95"
         >
-          <Menu.Items className="absolute right-[200px] top-[30px] z-10 mt-2 w-56 origin-top-right rounded-md border-[1px] border-dark-500 bg-dark-200 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+          <Menu.Items className="bg-light-50 border-light-600 absolute right-[200px] top-[30px] z-10 mt-2 w-56 origin-top-right rounded-md border-[1px] shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200">
             <div className="p-2">
               <form onSubmit={formik.handleSubmit}>
                 {labels?.map((label) => (
@@ -100,7 +100,7 @@ export default function LabelSelector({
                     {() => (
                       <div
                         key={label.publicId}
-                        className="flex items-center rounded-[5px] p-2 hover:bg-dark-300"
+                        className="hover:bg-light-200 flex items-center rounded-[5px] p-2 dark:hover:bg-dark-300"
                         onClick={async (e) => {
                           e.preventDefault();
                           await formik.setFieldValue(
@@ -137,7 +137,7 @@ export default function LabelSelector({
                 ))}
                 <button
                   onClick={() => openModal("NEW_LABEL")}
-                  className="flex w-full items-center rounded-[5px] p-1.5 px-2 text-sm hover:bg-dark-300"
+                  className="hover:bg-light-200 flex w-full items-center rounded-[5px] p-1.5 px-2 text-sm dark:hover:bg-dark-300"
                 >
                   <HiMiniPlus size={22} className="pr-2" />
                   Create new label
diff --git a/src/app/cards/[cardId]/components/ListSelector.tsx b/src/app/cards/[cardId]/components/ListSelector.tsx
index c677fa70..43aabd74 100644
--- a/src/app/cards/[cardId]/components/ListSelector.tsx
+++ b/src/app/cards/[cardId]/components/ListSelector.tsx
@@ -48,7 +48,7 @@ export default function ListSelector({
         as="div"
         className="relative flex w-full flex-wrap items-center text-left"
       >
-        <Menu.Button className="flex h-full w-full items-center rounded-[5px] border-[1px] border-dark-100 pl-2 text-left text-sm text-dark-1000 hover:border-dark-300 hover:bg-dark-200">
+        <Menu.Button className="border-light-200 hover:border-light-300 hover:bg-light-300 flex h-full w-full items-center rounded-[5px] border-[1px] pl-2 text-left text-sm text-neutral-900 dark:border-dark-100 dark:text-dark-1000 dark:hover:border-dark-300 dark:hover:bg-dark-200">
           {selectedList?.name}
         </Menu.Button>
 
@@ -61,44 +61,42 @@ export default function ListSelector({
           leaveFrom="transform opacity-100 scale-100"
           leaveTo="transform opacity-0 scale-95"
         >
-          <Menu.Items className="absolute right-[200px] top-[30px] z-10 mt-2 w-56 origin-top-right rounded-md border-[1px] border-dark-500 bg-dark-200 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+          <Menu.Items className="bg-light-50 border-light-600 absolute right-[200px] top-[30px] z-10 mt-2 w-56 origin-top-right rounded-md border-[1px] shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200">
             <div className="p-2">
               <form onSubmit={formik.handleSubmit}>
                 {lists?.map((list) => (
                   <Menu.Item key={list.publicId}>
-                    {() => (
-                      <div
-                        key={list.publicId}
-                        className="flex items-center rounded-[5px] p-2 hover:bg-dark-300"
-                        onClick={async (e) => {
-                          e.preventDefault();
-                          await formik.setFieldValue(
-                            list.publicId,
-                            !formik.values[list.publicId],
-                          );
+                    <div
+                      key={list.publicId}
+                      className="hover:bg-light-200 flex items-center rounded-[5px] p-2 dark:hover:bg-dark-300"
+                      onClick={async (e) => {
+                        e.preventDefault();
+                        await formik.setFieldValue(
+                          list.publicId,
+                          !formik.values[list.publicId],
+                        );
 
-                          updateCardList.mutate({
-                            cardId: cardPublicId,
-                            newListId: list.publicId,
-                          });
+                        updateCardList.mutate({
+                          cardId: cardPublicId,
+                          newListId: list.publicId,
+                        });
 
-                          await formik.submitForm();
-                        }}
-                      >
-                        <input
-                          id={list.publicId}
-                          name={list.publicId}
-                          type="checkbox"
-                          className="h-[14px] w-[14px] rounded bg-transparent"
-                          onClick={(event) => event.stopPropagation()}
-                          onChange={formik.handleChange}
-                          checked={formik.values[list.publicId]}
-                        />
-                        <label htmlFor={list.publicId} className="ml-3 text-sm">
-                          {list.name}
-                        </label>
-                      </div>
-                    )}
+                        await formik.submitForm();
+                      }}
+                    >
+                      <input
+                        id={list.publicId}
+                        name={list.publicId}
+                        type="checkbox"
+                        className="h-[14px] w-[14px] rounded bg-transparent"
+                        onClick={(event) => event.stopPropagation()}
+                        onChange={formik.handleChange}
+                        checked={formik.values[list.publicId]}
+                      />
+                      <label htmlFor={list.publicId} className="ml-3 text-sm">
+                        {list.name}
+                      </label>
+                    </div>
                   </Menu.Item>
                 ))}
               </form>
diff --git a/src/app/cards/[cardId]/components/MemberSelector.tsx b/src/app/cards/[cardId]/components/MemberSelector.tsx
index 7d1088d7..e0da84e1 100644
--- a/src/app/cards/[cardId]/components/MemberSelector.tsx
+++ b/src/app/cards/[cardId]/components/MemberSelector.tsx
@@ -52,13 +52,13 @@ export default function LabelSelector({
         as="div"
         className="relative flex w-full flex-wrap items-center text-left"
       >
-        <Menu.Button className="flex h-full w-full items-center rounded-[5px] border-[1px] border-dark-100 pl-2 text-left text-sm text-dark-1000 hover:border-dark-300 hover:bg-dark-200">
+        <Menu.Button className="border-light-200 hover:bg-light-300 flex h-full w-full items-center rounded-[5px] border-[1px] pl-2 text-left text-sm text-neutral-900 dark:border-dark-100 dark:text-dark-1000 dark:hover:border-dark-300 dark:hover:bg-dark-200">
           {selectedMembers.length ? (
             <div className="isolate flex -space-x-1 overflow-hidden">
               {selectedMembers.map((member) => (
                 <span
                   key={member.publicId}
-                  className="relative z-30 inline-flex h-6 w-6 items-center justify-center rounded-full bg-gray-500 ring-1 ring-dark-100"
+                  className="ring-light-200 relative z-30 inline-flex h-6 w-6 items-center justify-center rounded-full bg-gray-500 ring-1 dark:ring-dark-100"
                 >
                   <span className="text-[10px] font-medium leading-none text-white">
                     {member.user?.name
@@ -88,47 +88,42 @@ export default function LabelSelector({
           leaveFrom="transform opacity-100 scale-100"
           leaveTo="transform opacity-0 scale-95"
         >
-          <Menu.Items className="absolute right-[200px] top-[30px] z-10 mt-2 w-56 origin-top-right rounded-md border-[1px] border-dark-500 bg-dark-200 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+          <Menu.Items className="bg-light-50 border-light-600 absolute right-[200px] top-[30px] z-10 mt-2 w-56 origin-top-right rounded-md border-[1px] shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200">
             <div className="p-2">
               <form onSubmit={formik.handleSubmit}>
                 {members?.map((member) => (
                   <Menu.Item key={member.publicId}>
-                    {() => (
-                      <div
-                        key={member.publicId}
-                        className="flex items-center rounded-[5px] p-2 hover:bg-dark-300"
-                        onClick={async (e) => {
-                          e.preventDefault();
-                          await formik.setFieldValue(
-                            member.publicId,
-                            !formik.values[member.publicId],
-                          );
+                    <div
+                      key={member.publicId}
+                      className="hover:bg-light-200 flex items-center rounded-[5px] p-2 dark:hover:bg-dark-300"
+                      onClick={async (e) => {
+                        e.preventDefault();
+                        await formik.setFieldValue(
+                          member.publicId,
+                          !formik.values[member.publicId],
+                        );
 
-                          addOrRemoveMember.mutate({
-                            cardPublicId,
-                            workspaceMemberPublicId: member.publicId,
-                          });
+                        addOrRemoveMember.mutate({
+                          cardPublicId,
+                          workspaceMemberPublicId: member.publicId,
+                        });
 
-                          await formik.submitForm();
-                        }}
-                      >
-                        <input
-                          id={member.publicId}
-                          name={member.publicId}
-                          type="checkbox"
-                          className="h-[14px] w-[14px] rounded bg-transparent"
-                          onClick={(event) => event.stopPropagation()}
-                          onChange={formik.handleChange}
-                          checked={formik.values[member.publicId]}
-                        />
-                        <label
-                          htmlFor={member.publicId}
-                          className="ml-3 text-sm"
-                        >
-                          {member?.user?.name}
-                        </label>
-                      </div>
-                    )}
+                        await formik.submitForm();
+                      }}
+                    >
+                      <input
+                        id={member.publicId}
+                        name={member.publicId}
+                        type="checkbox"
+                        className="h-[14px] w-[14px] rounded bg-transparent"
+                        onClick={(event) => event.stopPropagation()}
+                        onChange={formik.handleChange}
+                        checked={formik.values[member.publicId]}
+                      />
+                      <label htmlFor={member.publicId} className="ml-3 text-sm">
+                        {member?.user?.name}
+                      </label>
+                    </div>
                   </Menu.Item>
                 ))}
               </form>
diff --git a/src/app/cards/[cardId]/components/NewLabelForm.tsx b/src/app/cards/[cardId]/components/NewLabelForm.tsx
index 7fac66aa..5cbb6a57 100644
--- a/src/app/cards/[cardId]/components/NewLabelForm.tsx
+++ b/src/app/cards/[cardId]/components/NewLabelForm.tsx
@@ -55,13 +55,13 @@ export function NewLabelForm({ cardPublicId }: cardPublicId) {
 
   return (
     <>
-      <div className="flex w-full justify-between pb-4">
-        <h2 className="text-sm font-medium text-dark-1000">New label</h2>
+      <div className="flex w-full items-center justify-between pb-4 text-neutral-900 dark:text-dark-1000">
+        <h2 className="text-sm font-medium">New label</h2>
         <button
-          className="rounded p-1 hover:bg-dark-300"
+          className="hover:bg-light-300 rounded p-1 focus:outline-none dark:hover:bg-dark-300"
           onClick={() => closeModal()}
         >
-          <HiXMark size={18} className="text-dark-900" />
+          <HiXMark size={18} className="text-light-900 dark:text-dark-900" />
         </button>
       </div>
 
@@ -83,20 +83,20 @@ export function NewLabelForm({ cardPublicId }: cardPublicId) {
         <Form>
           <label
             htmlFor="name"
-            className="block pb-2 text-sm font-normal leading-6 text-dark-1000"
+            className="block pb-2 text-sm font-normal leading-6 text-neutral-900 dark:text-dark-1000"
           >
             Name
           </label>
           <Field
             id="name"
             name="name"
-            className="block w-full rounded-md border-0 bg-dark-300 bg-white/5 py-1.5 text-dark-1000 shadow-sm ring-1 ring-inset ring-dark-700 focus:ring-2 focus:ring-inset focus:ring-dark-700 sm:text-sm sm:leading-6"
+            className="ring-light-600 focus:ring-light-600 block w-full rounded-md border-0 bg-white/5 py-1.5 text-neutral-900 shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset dark:bg-dark-300 dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6"
           />
           <Listbox value={selected} onChange={setSelected}>
             {({ open }) => (
               <>
                 <div className="relative mt-4">
-                  <Listbox.Button className="block w-full rounded-md border-0 bg-dark-300 bg-white/5 px-4 py-1.5 text-dark-1000 shadow-sm ring-1 ring-inset ring-dark-700 focus:ring-2 focus:ring-inset focus:ring-dark-700 sm:text-sm sm:leading-6">
+                  <Listbox.Button className="ring-light-600 focus:ring-light-600 block w-full rounded-md border-0 bg-white/5 px-4 py-1.5 shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset dark:bg-dark-300 dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6">
                     <span className="flex items-center">
                       <span
                         style={{ backgroundColor: selected?.code }}
@@ -121,16 +121,16 @@ export function NewLabelForm({ cardPublicId }: cardPublicId) {
                     leaveFrom="opacity-100"
                     leaveTo="opacity-0"
                   >
-                    <Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-dark-300 py-2 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+                    <Listbox.Options className="bg-light-50 absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md py-2 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-dark-300 sm:text-sm">
                       {colours.map((colour, index) => (
                         <Listbox.Option
                           key={`colours_${index}`}
-                          className="relative cursor-default select-none px-2 text-dark-1000 "
+                          className="relative cursor-default select-none px-2 text-neutral-900 dark:text-dark-1000 "
                           value={colour}
                         >
                           {() => (
                             <>
-                              <div className="flex items-center rounded-[5px] p-2 hover:bg-dark-400">
+                              <div className="hover:bg-light-200 flex items-center rounded-[5px] p-2 dark:hover:bg-dark-400">
                                 <span
                                   style={{ backgroundColor: colour?.code }}
                                   className="ml-2 inline-block h-2 w-2 flex-shrink-0 rounded-full"
@@ -153,7 +153,7 @@ export function NewLabelForm({ cardPublicId }: cardPublicId) {
           <div className="mt-5 sm:mt-6">
             <button
               type="submit"
-              className="inline-flex w-full justify-center rounded-md bg-dark-1000 px-3 py-2 text-sm font-semibold text-dark-50 shadow-sm focus-visible:outline-none"
+              className="bg-light-1000 text-light-50 inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold shadow-sm focus-visible:outline-none dark:bg-dark-1000 dark:text-dark-50"
             >
               Create label
             </button>
diff --git a/src/app/cards/[cardId]/page.tsx b/src/app/cards/[cardId]/page.tsx
index 4ad64b3e..81c75748 100644
--- a/src/app/cards/[cardId]/page.tsx
+++ b/src/app/cards/[cardId]/page.tsx
@@ -98,12 +98,15 @@ export default function CardPage() {
       <div className="w-full p-8">
         <div className="mb-8 flex w-full items-center justify-between">
           <Link
-            className="font-medium leading-[2.3rem] tracking-tight text-dark-900 sm:text-[1.2rem]"
+            className="text-light-900 font-medium leading-[2.3rem] tracking-tight dark:text-dark-900 sm:text-[1.2rem]"
             href={`/boards/${board?.publicId}`}
           >
             {board?.name}
           </Link>
-          <IoChevronForwardSharp size={18} className="mx-2 text-dark-900" />
+          <IoChevronForwardSharp
+            size={18}
+            className="text-light-900 mx-2 dark:text-dark-900"
+          />
           <form onSubmit={formik.handleSubmit} className="w-full space-y-6">
             <div>
               <input
@@ -113,7 +116,7 @@ export default function CardPage() {
                 value={formik.values.title}
                 onChange={formik.handleChange}
                 onBlur={formik.submitForm}
-                className="block w-full border-0 bg-transparent p-0 py-0 font-medium tracking-tight text-dark-1000 focus:ring-0 sm:text-[1.2rem]"
+                className="block w-full border-0 bg-transparent p-0 py-0 font-medium tracking-tight text-neutral-900 focus:ring-0 dark:text-dark-1000 sm:text-[1.2rem]"
               />
             </div>
           </form>
@@ -132,13 +135,13 @@ export default function CardPage() {
                   formik.setFieldValue("description", e.target.value)
                 }
                 onBlur={formik.submitForm}
-                className="block w-full border-0 bg-transparent py-1.5 text-dark-1000 focus-visible:outline-none sm:text-sm sm:leading-6"
+                className="text-light-900 block w-full border-0 bg-transparent py-1.5 focus-visible:outline-none dark:text-dark-1000 sm:text-sm sm:leading-6"
               />
             </div>
           </form>
         </div>
       </div>
-      <div className="min-w-[325px] border-l-[1px] border-dark-400 bg-dark-100 p-8 text-dark-900">
+      <div className="bg-light-200 border-light-600 text-light-900 min-w-[325px] border-l-[1px] p-8 dark:border-dark-400 dark:bg-dark-100 dark:text-dark-900">
         <div className="mb-4 flex w-full">
           <p className="my-2 w-[100px] text-sm">List</p>
           <ListSelector cardPublicId={cardId} lists={formattedLists} />
diff --git a/src/app/components/CheckboxDropdown.tsx b/src/app/components/CheckboxDropdown.tsx
index bb45998c..2e7381b4 100644
--- a/src/app/components/CheckboxDropdown.tsx
+++ b/src/app/components/CheckboxDropdown.tsx
@@ -35,13 +35,13 @@ export default function CheckboxDropdown({
           leaveFrom="transform opacity-100 scale-100"
           leaveTo="transform opacity-0 scale-95"
         >
-          <Menu.Items className="absolute left-0 top-[26px] z-10 mt-2 w-56 origin-top-left rounded-md border-[1px] border-dark-500 bg-dark-200 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+          <Menu.Items className="bg-light-50 border-light-200 absolute left-0 top-[26px] z-10 mt-2 w-56 origin-top-left rounded-md border-[1px] shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200">
             <div className="p-1">
               {items?.map((item) => (
                 <Menu.Item key={item.key}>
                   <div
                     key={item.key}
-                    className="flex items-center rounded-[5px] p-2 hover:bg-dark-300"
+                    className="hover:bg-light-200 flex items-center rounded-[5px] p-2 dark:hover:bg-dark-300"
                     onClick={(e) => {
                       e.preventDefault();
                       handleSelect({ key: item.key });
diff --git a/src/app/members/page.tsx b/src/app/members/page.tsx
index e1dc5ab3..dd6a28f5 100644
--- a/src/app/members/page.tsx
+++ b/src/app/members/page.tsx
@@ -5,12 +5,8 @@ import { useModal } from "~/app/providers/modal";
 import { useWorkspace } from "~/app/providers/workspace";
 import Modal from "~/app/components/modal";
 
-import { ImportBoardsForm } from "~/app/boards/components/ImportBoardsForm";
-import { NewBoardForm } from "~/app/boards/components/NewBoardForm";
 import { NewWorkspaceForm } from "~/app/components/NewWorkspaceForm";
 
-import MemberDropdown from "./components/MemberDropdown";
-
 import { api } from "~/trpc/react";
 
 export default function MembersPage() {
@@ -23,16 +19,16 @@ export default function MembersPage() {
   );
 
   return (
-    <div className="p-8">
+    <div className="px-28 py-12">
       <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]">
           Members
         </h1>
         <div className="flex">
           <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"
-            onClick={() => openModal("NEW_BOARD")}
+            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("")}
           >
             <div className="h-5 w-5 items-center">
               <HiOutlinePlusSmall
@@ -40,52 +36,81 @@ export default function MembersPage() {
                 aria-hidden="true"
               />
             </div>
-            Add
+            Invite
           </button>
         </div>
       </div>
 
-      <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
-        {data?.members.map((member) => (
-          <div
-            key={member.publicId}
-            className="relative flex items-center space-x-3 rounded-md border border-dashed border-dark-600 bg-dark-100 px-6 py-5 shadow-sm"
-          >
-            <div className="flex-shrink-0">
-              <span className="inline-flex h-9 w-9 items-center justify-center rounded-full bg-dark-400">
-                <span className="text-sm font-medium leading-none text-white">
-                  {member.user.name
-                    ?.split(" ")
-                    .map((namePart) => namePart.charAt(0).toUpperCase())
-                    .join("")}
-                </span>
-              </span>
-            </div>
-            <div className="min-w-0 flex-1">
-              <div>
-                <div className="mb-1 flex items-center">
-                  <p className="mr-2 text-sm font-medium text-dark-1000">
-                    {member.user.name}
-                  </p>
-                  <span className="inline-flex items-center rounded-md bg-emerald-500/10 px-1.5 py-0.5 text-[11px] font-medium text-emerald-400 ring-1 ring-inset ring-emerald-500/20">
-                    {member.role.charAt(0).toUpperCase() + member.role.slice(1)}
-                  </span>
-                </div>
-                <p className="truncate text-sm text-dark-900">
-                  {member.user.email}
-                </p>
-              </div>
-            </div>
-            <div className="flex-shrink-0">
-              <MemberDropdown />
+      <div className="mt-8 flow-root">
+        <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+          <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
+            <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
+              <table className="divide-light-600 min-w-full divide-y dark:divide-dark-600">
+                <thead className="bg-light-300 dark:bg-dark-200">
+                  <tr>
+                    <th
+                      scope="col"
+                      className="text-light-900 py-3.5 pl-4 pr-3 text-left text-sm font-semibold dark:text-dark-900 sm:pl-6"
+                    >
+                      User
+                    </th>
+                    <th
+                      scope="col"
+                      className="text-light-900 px-3 py-3.5 text-left text-sm font-semibold dark:text-dark-900"
+                    >
+                      Role
+                    </th>
+                  </tr>
+                </thead>
+                <tbody className="bg-light-50 divide-light-600 divide-y dark:divide-dark-600 dark:bg-dark-100">
+                  {data?.members.map((member) => (
+                    <tr key={member.publicId}>
+                      <td>
+                        <div className="flex items-center p-4">
+                          <div className="flex-shrink-0">
+                            <span className="bg-light-1000 inline-flex h-9 w-9 items-center justify-center rounded-full dark:bg-dark-400">
+                              <span className="text-sm font-medium leading-none text-white">
+                                {member.user.name
+                                  ?.split(" ")
+                                  .map((namePart) =>
+                                    namePart.charAt(0).toUpperCase(),
+                                  )
+                                  .join("")}
+                              </span>
+                            </span>
+                          </div>
+                          <div className="ml-2 min-w-0 flex-1">
+                            <div>
+                              <div className="flex items-center">
+                                <p className="mr-2 text-sm font-medium text-neutral-900 dark:text-dark-1000">
+                                  {member.user.name}
+                                </p>
+                              </div>
+                              <p className="truncate text-sm text-dark-900">
+                                {member.user.email}
+                              </p>
+                            </div>
+                          </div>
+                        </div>
+                      </td>
+                      <td>
+                        <div className="px-3">
+                          <span className="inline-flex items-center rounded-md bg-emerald-500/10 px-1.5 py-0.5 text-[11px] font-medium text-emerald-400 ring-1 ring-inset ring-emerald-500/20">
+                            {member.role.charAt(0).toUpperCase() +
+                              member.role.slice(1)}
+                          </span>
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
             </div>
           </div>
-        ))}
+        </div>
       </div>
 
       <Modal>
-        {modalContentType === "NEW_BOARD" && <NewBoardForm />}
-        {modalContentType === "IMPORT_BOARDS" && <ImportBoardsForm />}
         {modalContentType === "NEW_WORKSPACE" && <NewWorkspaceForm />}
       </Modal>
     </div>