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 (
<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>

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

@@ -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>

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

@@ -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>

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

@@ -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>

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

@@ -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>

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

@@ -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) => (

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

@@ -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>

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

@@ -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>

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

@@ -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

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

@@ -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>

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

@@ -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>

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

@@ -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>

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="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} />

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

@@ -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 });

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 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>