shiyue/kan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: light mode tweaks

Browse Source
This commit is contained in:
Henry
2024-04-02 20:20:41 +01:00
parent 63ca552e9e
commit 5cf93f4c83
15 changed files with 234 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/app/boards/[...boardId]/components/BoardDropdown.tsx
View File

@@ -11,8 +11,11 @@ export default function BoardDropdown() {
return ( return (
<Menu as="div" className="relative inline-block text-left"> <Menu as="div" className="relative inline-block text-left">
<div> <div>
<Menu.Button className="flex h-8 w-8 items-center justify-center rounded-[5px] hover:bg-dark-200"> <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-dark-900" /> <HiEllipsisHorizontal
size={25}
className="text-light-900 dark:text-dark-900"
/>
</Menu.Button> </Menu.Button>
</div> </div>
@@ -25,17 +28,15 @@ export default function BoardDropdown() {
leaveFrom="transform opacity-100 scale-100" leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95" 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"> <div className="flex">
<Menu.Item> <Menu.Item>
{() => ( <button
<button onClick={() => openModal("DELETE_BOARD")}
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"
className="m-1 w-full rounded-[5px] px-3 py-2 text-left text-sm text-dark-1000 hover:bg-dark-400" >
> Delete board
Delete board </button>
</button>
)}
</Menu.Item> </Menu.Item>
</div> </div>
</Menu.Items> </Menu.Items>

8
src/app/boards/[...boardId]/components/DeleteBoardConfirmation.tsx
View File

@@ -21,16 +21,16 @@ export function DeleteBoardConfirmation() {
return ( return (
<> <>
<div className="flex w-full flex-col justify-between pb-4"> <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? Are you sure you want to delete this board?
</h2> </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."} {"This action can't be undone."}
</p> </p>
</div> </div>
<div className="mt-5 flex justify-end sm:mt-6"> <div className="mt-5 flex justify-end sm:mt-6">
<button <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()} onClick={() => closeModal()}
> >
Cancel Cancel
@@ -41,7 +41,7 @@ export function DeleteBoardConfirmation() {
boardPublicId: boardData.publicId, 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 Delete
</button> </button>

8
src/app/boards/[...boardId]/components/DeleteListConfirmation.tsx
View File

@@ -28,16 +28,16 @@ export function DeleteListConfirmation({
return ( return (
<> <>
<div className="flex w-full flex-col justify-between pb-4"> <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? Are you sure you want to delete this list?
</h2> </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."} {"This action can't be undone."}
</p> </p>
</div> </div>
<div className="mt-5 flex justify-end sm:mt-6"> <div className="mt-5 flex justify-end sm:mt-6">
<button <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()} onClick={() => closeModal()}
> >
Cancel Cancel
@@ -48,7 +48,7 @@ export function DeleteListConfirmation({
listPublicId, 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 Delete
</button> </button>

34
src/app/boards/[...boardId]/components/NewCardForm.tsx
View File

@@ -137,13 +137,15 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) {
return ( return (
<> <>
<div className="flex w-full justify-between pb-4"> <div className="flex w-full items-center justify-between pb-4">
<h2 className="text-sm font-bold text-dark-1000">New card</h2> <h2 className="text-sm font-bold text-neutral-900 dark:text-dark-1000">
New card
</h2>
<button <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()} onClick={() => closeModal()}
> >
<HiXMark size={18} className="text-dark-900" /> <HiXMark size={18} className="text-light-900 dark:text-dark-900" />
</button> </button>
</div> </div>
@@ -151,7 +153,7 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) {
<div> <div>
<label <label
htmlFor="title" 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 Title
</label> </label>
@@ -159,7 +161,7 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) {
id="title" id="title"
type="text" type="text"
{...register("title")} {...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>
<div className="mt-2 flex space-x-1"> <div className="mt-2 flex space-x-1">
@@ -170,7 +172,7 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) {
handleSelectList(list.key) 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} {selectedList?.value}
</div> </div>
</CheckboxDropdown> </CheckboxDropdown>
@@ -182,7 +184,7 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) {
handleSelectMembers(list.key) 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 ? ( {!memberPublicIds.length ? (
"Members" "Members"
) : ( ) : (
@@ -195,7 +197,7 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) {
return ( return (
<span <span
key={member?.key} 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"> <span className="text-[8px] font-medium leading-none text-white">
{member?.value {member?.value
@@ -220,7 +222,7 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) {
handleSelectLabels(list.key) 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 ? ( {!labelPublicIds.length ? (
"Labels" "Labels"
) : ( ) : (
@@ -265,16 +267,20 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) {
</div> </div>
<div className="mt-3 flex items-center justify-end"> <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 <Switch
checked={isCreateAnotherEnabled} checked={isCreateAnotherEnabled}
onChange={handleToggleCreateAnother} onChange={handleToggleCreateAnother}
className={classNames( 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", "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 <span
aria-hidden="true" aria-hidden="true"
className={classNames( className={classNames(
@@ -288,7 +294,7 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) {
<div className="mt-5 sm:mt-6"> <div className="mt-5 sm:mt-6">
<button <button
type="submit" 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 Create card
</button> </button>

26
src/app/boards/[...boardId]/components/NewListForm.tsx
View File

@@ -51,13 +51,15 @@ export function NewListForm({ boardPublicId }: boardPublicId) {
return ( return (
<> <>
<div className="flex w-full justify-between pb-4"> <div className="flex w-full items-center justify-between pb-4">
<h2 className="text-sm font-bold text-dark-1000">New list</h2> <h2 className="text-sm font-bold text-neutral-900 dark:text-dark-1000">
New list
</h2>
<button <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()} onClick={() => closeModal()}
> >
<HiXMark size={18} className="text-dark-900" /> <HiXMark size={18} className="text-light-900 dark:text-dark-900" />
</button> </button>
</div> </div>
@@ -76,26 +78,30 @@ export function NewListForm({ boardPublicId }: boardPublicId) {
<Form> <Form>
<label <label
htmlFor="list-name" 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 Name
</label> </label>
<Field <Field
id="list-name" id="list-name"
name="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"> <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 <Switch
checked={isCreateAnotherEnabled} checked={isCreateAnotherEnabled}
onChange={setIsCreateAnotherEnabled} onChange={setIsCreateAnotherEnabled}
className={classNames( 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", "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 <span
aria-hidden="true" aria-hidden="true"
className={classNames( className={classNames(
@@ -108,7 +114,7 @@ export function NewListForm({ boardPublicId }: boardPublicId) {
<div className="mt-5 sm:mt-6"> <div className="mt-5 sm:mt-6">
<button <button
type="submit" 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 Create list
</button> </button>

4
src/app/boards/[...boardId]/page.tsx
View File

@@ -201,7 +201,7 @@ export default function BoardPage() {
</svg> </svg>
</div> </div>
<div className="z-10 flex w-full justify-between p-8 "> <div className="z-20 flex w-full justify-between p-8 ">
<form <form
onSubmit={formik.handleSubmit} onSubmit={formik.handleSubmit}
className="focus-visible:outline-none" className="focus-visible:outline-none"
@@ -232,7 +232,7 @@ export default function BoardPage() {
</div> </div>
</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}> <DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="all-lists" direction="horizontal" type="LIST"> <Droppable droppableId="all-lists" direction="horizontal" type="LIST">
{(provided) => ( {(provided) => (

8
src/app/cards/[cardId]/components/DeleteCardConfirmation.tsx
View File

@@ -26,16 +26,16 @@ export function DeleteCardConfirmation({
return ( return (
<> <>
<div className="flex w-full flex-col justify-between pb-4"> <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? Are you sure you want to delete this card?
</h2> </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."} {"This action can't be undone."}
</p> </p>
</div> </div>
<div className="mt-5 flex justify-end sm:mt-6"> <div className="mt-5 flex justify-end sm:mt-6">
<button <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()} onClick={() => closeModal()}
> >
Cancel Cancel
@@ -46,7 +46,7 @@ export function DeleteCardConfirmation({
cardPublicId, 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 Delete
</button> </button>

23
src/app/cards/[cardId]/components/Dropdown.tsx
View File

@@ -11,8 +11,11 @@ export default function Dropdown() {
return ( return (
<Menu as="div" className="relative inline-block text-left"> <Menu as="div" className="relative inline-block text-left">
<div> <div>
<Menu.Button className="flex h-8 w-8 items-center justify-center rounded-[5px] hover:bg-dark-200"> <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-dark-900" /> <HiEllipsisHorizontal
size={25}
className="text-light-900 dark:text-dark-900"
/>
</Menu.Button> </Menu.Button>
</div> </div>
@@ -25,17 +28,15 @@ export default function Dropdown() {
leaveFrom="transform opacity-100 scale-100" leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95" 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"> <div className="flex">
<Menu.Item> <Menu.Item>
{() => ( <button
<button onClick={() => openModal("DELETE_CARD")}
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"
className="m-1 w-full rounded-[5px] px-3 py-2 text-left text-sm text-dark-1000 hover:bg-dark-400" >
> Delete card
Delete </button>
</button>
)}
</Menu.Item> </Menu.Item>
</div> </div>
</Menu.Items> </Menu.Items>

12
src/app/cards/[cardId]/components/LabelSelector.tsx
View File

@@ -58,7 +58,7 @@ export default function LabelSelector({
{selectedLabels.map((label) => ( {selectedLabels.map((label) => (
<Menu.Button <Menu.Button
key={label.publicId} 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 <svg
fill={label.colourCode} fill={label.colourCode}
@@ -71,13 +71,13 @@ export default function LabelSelector({
<div>{label.name}</div> <div>{label.name}</div>
</Menu.Button> </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} /> <HiMiniPlus size={16} />
Add label Add label
</Menu.Button> </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" /> <HiMiniPlus size={22} className="pr-2" />
Add label Add label
</Menu.Button> </Menu.Button>
@@ -92,7 +92,7 @@ export default function LabelSelector({
leaveFrom="transform opacity-100 scale-100" leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95" 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"> <div className="p-2">
<form onSubmit={formik.handleSubmit}> <form onSubmit={formik.handleSubmit}>
{labels?.map((label) => ( {labels?.map((label) => (
@@ -100,7 +100,7 @@ export default function LabelSelector({
{() => ( {() => (
<div <div
key={label.publicId} 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) => { onClick={async (e) => {
e.preventDefault(); e.preventDefault();
await formik.setFieldValue( await formik.setFieldValue(
@@ -137,7 +137,7 @@ export default function LabelSelector({
))} ))}
<button <button
onClick={() => openModal("NEW_LABEL")} 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" /> <HiMiniPlus size={22} className="pr-2" />
Create new label Create new label

64
src/app/cards/[cardId]/components/ListSelector.tsx
View File

@@ -48,7 +48,7 @@ export default function ListSelector({
as="div" as="div"
className="relative flex w-full flex-wrap items-center text-left" 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} {selectedList?.name}
</Menu.Button> </Menu.Button>
@@ -61,44 +61,42 @@ export default function ListSelector({
leaveFrom="transform opacity-100 scale-100" leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95" 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"> <div className="p-2">
<form onSubmit={formik.handleSubmit}> <form onSubmit={formik.handleSubmit}>
{lists?.map((list) => ( {lists?.map((list) => (
<Menu.Item key={list.publicId}> <Menu.Item key={list.publicId}>
{() => ( <div
<div key={list.publicId}
key={list.publicId} className="hover:bg-light-200 flex items-center rounded-[5px] p-2 dark:hover:bg-dark-300"
className="flex items-center rounded-[5px] p-2 hover:bg-dark-300" onClick={async (e) => {
onClick={async (e) => { e.preventDefault();
e.preventDefault(); await formik.setFieldValue(
await formik.setFieldValue( list.publicId,
list.publicId, !formik.values[list.publicId],
!formik.values[list.publicId], );
);
updateCardList.mutate({ updateCardList.mutate({
cardId: cardPublicId, cardId: cardPublicId,
newListId: list.publicId, newListId: list.publicId,
}); });
await formik.submitForm(); await formik.submitForm();
}} }}
> >
<input <input
id={list.publicId} id={list.publicId}
name={list.publicId} name={list.publicId}
type="checkbox" type="checkbox"
className="h-[14px] w-[14px] rounded bg-transparent" className="h-[14px] w-[14px] rounded bg-transparent"
onClick={(event) => event.stopPropagation()} onClick={(event) => event.stopPropagation()}
onChange={formik.handleChange} onChange={formik.handleChange}
checked={formik.values[list.publicId]} checked={formik.values[list.publicId]}
/> />
<label htmlFor={list.publicId} className="ml-3 text-sm"> <label htmlFor={list.publicId} className="ml-3 text-sm">
{list.name} {list.name}
</label> </label>
</div> </div>
)}
</Menu.Item> </Menu.Item>
))} ))}
</form> </form>

69
src/app/cards/[cardId]/components/MemberSelector.tsx
View File

@@ -52,13 +52,13 @@ export default function LabelSelector({
as="div" as="div"
className="relative flex w-full flex-wrap items-center text-left" 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 ? ( {selectedMembers.length ? (
<div className="isolate flex -space-x-1 overflow-hidden"> <div className="isolate flex -space-x-1 overflow-hidden">
{selectedMembers.map((member) => ( {selectedMembers.map((member) => (
<span <span
key={member.publicId} 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"> <span className="text-[10px] font-medium leading-none text-white">
{member.user?.name {member.user?.name
@@ -88,47 +88,42 @@ export default function LabelSelector({
leaveFrom="transform opacity-100 scale-100" leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95" 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"> <div className="p-2">
<form onSubmit={formik.handleSubmit}> <form onSubmit={formik.handleSubmit}>
{members?.map((member) => ( {members?.map((member) => (
<Menu.Item key={member.publicId}> <Menu.Item key={member.publicId}>
{() => ( <div
<div key={member.publicId}
key={member.publicId} className="hover:bg-light-200 flex items-center rounded-[5px] p-2 dark:hover:bg-dark-300"
className="flex items-center rounded-[5px] p-2 hover:bg-dark-300" onClick={async (e) => {
onClick={async (e) => { e.preventDefault();
e.preventDefault(); await formik.setFieldValue(
await formik.setFieldValue( member.publicId,
member.publicId, !formik.values[member.publicId],
!formik.values[member.publicId], );
);
addOrRemoveMember.mutate({ addOrRemoveMember.mutate({
cardPublicId, cardPublicId,
workspaceMemberPublicId: member.publicId, workspaceMemberPublicId: member.publicId,
}); });
await formik.submitForm(); await formik.submitForm();
}} }}
> >
<input <input
id={member.publicId} id={member.publicId}
name={member.publicId} name={member.publicId}
type="checkbox" type="checkbox"
className="h-[14px] w-[14px] rounded bg-transparent" className="h-[14px] w-[14px] rounded bg-transparent"
onClick={(event) => event.stopPropagation()} onClick={(event) => event.stopPropagation()}
onChange={formik.handleChange} onChange={formik.handleChange}
checked={formik.values[member.publicId]} checked={formik.values[member.publicId]}
/> />
<label <label htmlFor={member.publicId} className="ml-3 text-sm">
htmlFor={member.publicId} {member?.user?.name}
className="ml-3 text-sm" </label>
> </div>
{member?.user?.name}
</label>
</div>
)}
</Menu.Item> </Menu.Item>
))} ))}
</form> </form>

22
src/app/cards/[cardId]/components/NewLabelForm.tsx
View File

@@ -55,13 +55,13 @@ export function NewLabelForm({ cardPublicId }: cardPublicId) {
return ( return (
<> <>
<div className="flex w-full justify-between pb-4"> <div className="flex w-full items-center justify-between pb-4 text-neutral-900 dark:text-dark-1000">
<h2 className="text-sm font-medium text-dark-1000">New label</h2> <h2 className="text-sm font-medium">New label</h2>
<button <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()} onClick={() => closeModal()}
> >
<HiXMark size={18} className="text-dark-900" /> <HiXMark size={18} className="text-light-900 dark:text-dark-900" />
</button> </button>
</div> </div>
@@ -83,20 +83,20 @@ export function NewLabelForm({ cardPublicId }: cardPublicId) {
<Form> <Form>
<label <label
htmlFor="name" 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 Name
</label> </label>
<Field <Field
id="name" id="name"
name="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}> <Listbox value={selected} onChange={setSelected}>
{({ open }) => ( {({ open }) => (
<> <>
<div className="relative mt-4"> <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 className="flex items-center">
<span <span
style={{ backgroundColor: selected?.code }} style={{ backgroundColor: selected?.code }}
@@ -121,16 +121,16 @@ export function NewLabelForm({ cardPublicId }: cardPublicId) {
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" 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) => ( {colours.map((colour, index) => (
<Listbox.Option <Listbox.Option
key={`colours_${index}`} 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} 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 <span
style={{ backgroundColor: colour?.code }} style={{ backgroundColor: colour?.code }}
className="ml-2 inline-block h-2 w-2 flex-shrink-0 rounded-full" 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"> <div className="mt-5 sm:mt-6">
<button <button
type="submit" 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 Create label
</button> </button>

13
src/app/cards/[cardId]/page.tsx
View File

@@ -98,12 +98,15 @@ export default function CardPage() {
<div className="w-full p-8"> <div className="w-full p-8">
<div className="mb-8 flex w-full items-center justify-between"> <div className="mb-8 flex w-full items-center justify-between">
<Link <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}`} href={`/boards/${board?.publicId}`}
> >
{board?.name} {board?.name}
</Link> </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"> <form onSubmit={formik.handleSubmit} className="w-full space-y-6">
<div> <div>
<input <input
@@ -113,7 +116,7 @@ export default function CardPage() {
value={formik.values.title} value={formik.values.title}
onChange={formik.handleChange} onChange={formik.handleChange}
onBlur={formik.submitForm} 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> </div>
</form> </form>
@@ -132,13 +135,13 @@ export default function CardPage() {
formik.setFieldValue("description", e.target.value) formik.setFieldValue("description", e.target.value)
} }
onBlur={formik.submitForm} 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> </div>
</form> </form>
</div> </div>
</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"> <div className="mb-4 flex w-full">
<p className="my-2 w-[100px] text-sm">List</p> <p className="my-2 w-[100px] text-sm">List</p>
<ListSelector cardPublicId={cardId} lists={formattedLists} /> <ListSelector cardPublicId={cardId} lists={formattedLists} />

4
src/app/components/CheckboxDropdown.tsx
View File

@@ -35,13 +35,13 @@ export default function CheckboxDropdown({
leaveFrom="transform opacity-100 scale-100" leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95" 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"> <div className="p-1">
{items?.map((item) => ( {items?.map((item) => (
<Menu.Item key={item.key}> <Menu.Item key={item.key}>
<div <div
key={item.key} 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) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
handleSelect({ key: item.key }); handleSelect({ key: item.key });

115
src/app/members/page.tsx
View File

@@ -5,12 +5,8 @@ import { useModal } from "~/app/providers/modal";
import { useWorkspace } from "~/app/providers/workspace"; import { useWorkspace } from "~/app/providers/workspace";
import Modal from "~/app/components/modal"; 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 { NewWorkspaceForm } from "~/app/components/NewWorkspaceForm";
import MemberDropdown from "./components/MemberDropdown";
import { api } from "~/trpc/react"; import { api } from "~/trpc/react";
export default function MembersPage() { export default function MembersPage() {
@@ -23,16 +19,16 @@ export default function MembersPage() {
); );
return ( return (
<div className="p-8"> <div className="px-28 py-12">
<div className="mb-8 flex w-full justify-between"> <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 Members
</h1> </h1>
<div className="flex"> <div className="flex">
<button <button
type="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")} // onClick={() => openModal("")}
> >
<div className="h-5 w-5 items-center"> <div className="h-5 w-5 items-center">
<HiOutlinePlusSmall <HiOutlinePlusSmall
@@ -40,52 +36,81 @@ export default function MembersPage() {
aria-hidden="true" aria-hidden="true"
/> />
</div> </div>
Add Invite
</button> </button>
</div> </div>
</div> </div>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3"> <div className="mt-8 flow-root">
{data?.members.map((member) => ( <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
key={member.publicId} <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
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" <table className="divide-light-600 min-w-full divide-y dark:divide-dark-600">
> <thead className="bg-light-300 dark:bg-dark-200">
<div className="flex-shrink-0"> <tr>
<span className="inline-flex h-9 w-9 items-center justify-center rounded-full bg-dark-400"> <th
<span className="text-sm font-medium leading-none text-white"> scope="col"
{member.user.name className="text-light-900 py-3.5 pl-4 pr-3 text-left text-sm font-semibold dark:text-dark-900 sm:pl-6"
?.split(" ") >
.map((namePart) => namePart.charAt(0).toUpperCase()) User
.join("")} </th>
</span> <th
</span> scope="col"
</div> className="text-light-900 px-3 py-3.5 text-left text-sm font-semibold dark:text-dark-900"
<div className="min-w-0 flex-1"> >
<div> Role
<div className="mb-1 flex items-center"> </th>
<p className="mr-2 text-sm font-medium text-dark-1000"> </tr>
{member.user.name} </thead>
</p> <tbody className="bg-light-50 divide-light-600 divide-y dark:divide-dark-600 dark:bg-dark-100">
<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"> {data?.members.map((member) => (
{member.role.charAt(0).toUpperCase() + member.role.slice(1)} <tr key={member.publicId}>
</span> <td>
</div> <div className="flex items-center p-4">
<p className="truncate text-sm text-dark-900"> <div className="flex-shrink-0">
{member.user.email} <span className="bg-light-1000 inline-flex h-9 w-9 items-center justify-center rounded-full dark:bg-dark-400">
</p> <span className="text-sm font-medium leading-none text-white">
</div> {member.user.name
</div> ?.split(" ")
<div className="flex-shrink-0"> .map((namePart) =>
<MemberDropdown /> 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>
))} </div>
</div> </div>
<Modal> <Modal>
{modalContentType === "NEW_BOARD" && <NewBoardForm />}
{modalContentType === "IMPORT_BOARDS" && <ImportBoardsForm />}
{modalContentType === "NEW_WORKSPACE" && <NewWorkspaceForm />} {modalContentType === "NEW_WORKSPACE" && <NewWorkspaceForm />}
</Modal> </Modal>
</div> </div>