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-01 23:11:56 +01:00
parent 61edeeb33b
commit c982bd7330
8 changed files with 64 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/boards/[...boardId]/components/List.tsx
View File

@@ -66,7 +66,7 @@ export default function List({
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
className="mr-5 h-fit min-w-[18rem] max-w-[18rem] rounded-md border border-dark-400 bg-dark-200 py-2 pl-2 pr-1"
className="bg-light-300 border-light-400 dark-text-dark-1000 mr-5 h-fit min-w-[18rem] max-w-[18rem] rounded-md border py-2 pl-2 pr-1 text-neutral-900 dark:border-dark-400 dark:bg-dark-200"
>
<div className="flex justify-between">
<form
@@ -80,12 +80,12 @@ export default function List({
value={formik.values.name}
onChange={formik.handleChange}
onBlur={formik.submitForm}
className="mb-4 block border-0 bg-transparent px-4 pt-1 text-sm font-medium text-dark-1000 focus:ring-0 focus-visible:outline-none"
className="font-mediumfocus:ring-0 mb-4 block border-0 bg-transparent px-4 pt-1 text-sm focus-visible:outline-none"
/>
</form>
<div>
<button
className="mx-1 inline-flex h-fit items-center rounded-md p-1 px-1 text-sm font-semibold text-dark-50 hover:bg-dark-400"
className="hover:bg-light-400 mx-1 inline-flex h-fit items-center rounded-md p-1 px-1 text-sm font-semibold text-dark-50 dark:hover:bg-dark-400"
onClick={() => openNewCardForm(list.publicId)}
>
<HiOutlinePlusSmall

18
src/app/boards/[...boardId]/components/ListDropdown.tsx
View File

@@ -22,7 +22,7 @@ export default function ListDropdown({
return (
<Menu as="div" className="relative inline-block text-left">
<div>
<Menu.Button className="mr-1 inline-flex h-fit items-center rounded-md p-1 px-1 text-sm font-semibold text-dark-50 hover:bg-dark-400">
<Menu.Button className="hover:bg-light-400 mr-1 inline-flex h-fit items-center rounded-md p-1 px-1 text-sm font-semibold text-dark-50 dark:hover:bg-dark-400">
<HiEllipsisHorizontal className="h-5 w-5 text-dark-900" />
</Menu.Button>
</div>
@@ -36,17 +36,15 @@ export default function ListDropdown({
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 dark-text-dark-1000 border-light-400 absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md border text-neutral-900 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={handleOpenDeleteListConfirmation}
className="m-1 w-full rounded-[5px] px-3 py-2 text-left text-sm text-dark-1000 hover:bg-dark-400"
>
Delete list
</button>
)}
<button
onClick={handleOpenDeleteListConfirmation}
className="hover:bg-light-400 m-1 w-full rounded-[5px] px-3 py-2 text-left text-sm dark:hover:bg-dark-400"
>
Delete list
</button>
</Menu.Item>
</div>
</Menu.Items>

12
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-10 flex w-full justify-between p-8 ">
<form
onSubmit={formik.handleSubmit}
className="focus-visible:outline-none"
@@ -213,13 +213,13 @@ export default function BoardPage() {
value={formik.values.name}
onChange={formik.handleChange}
onBlur={formik.submitForm}
className="block border-0 bg-transparent p-0 py-0 font-medium leading-[2.3rem] tracking-tight text-dark-1000 focus:ring-0 focus-visible:outline-none sm:text-[1.2rem]"
className="dark-text-dark-1000 block border-0 bg-transparent p-0 py-0 font-medium leading-[2.3rem] tracking-tight text-neutral-900 focus:ring-0 focus-visible:outline-none sm:text-[1.2rem]"
/>
</form>
<div className="flex items-center">
<button
type="button"
className="mr-2 inline-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 mr-2 inline-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={() => openNewListForm(boardId)}
>
<HiOutlinePlusSmall
@@ -268,7 +268,7 @@ export default function BoardPage() {
<Link
key={card.publicId}
href={`/cards/${card.publicId}`}
className="mb-2 flex !cursor-pointer flex-col rounded-md border border-dark-200 bg-dark-500 px-3 py-2 text-sm text-dark-1000"
className="bg-light-50 border-light-200 mb-2 flex !cursor-pointer flex-col rounded-md border px-3 py-2 text-sm text-neutral-900 dark:border-dark-200 dark:bg-dark-500 dark:text-dark-1000"
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
@@ -280,7 +280,7 @@ export default function BoardPage() {
{card.labels?.map(({ label }) => (
<span
key={label.publicId}
className="inline-flex w-fit items-center gap-x-1.5 rounded-full px-2 py-1 text-[10px] font-medium text-dark-1000 ring-1 ring-inset ring-dark-800"
className="ring-light-600 inline-flex w-fit items-center gap-x-1.5 rounded-full px-2 py-1 text-[10px] font-medium text-neutral-600 ring-1 ring-inset dark:text-dark-1000 dark:ring-dark-800"
>
<svg
fill={label.colourCode}
@@ -297,7 +297,7 @@ export default function BoardPage() {
{card.members?.map(({ member }) => (
<span
key={member.publicId}
className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-gray-500 ring-2 ring-dark-500"
className="ring-light-50 bg-light-900 inline-flex h-6 w-6 items-center justify-center rounded-full ring-2 dark:bg-gray-500 dark:ring-dark-500"
>
<span className="text-[10px] font-medium leading-none text-white">
{member.user.name

43
src/app/boards/components/ImportBoardsForm.tsx
View File

@@ -33,7 +33,7 @@ const SelectSource = ({ handleNextStep }: { handleNextStep: () => void }) => {
<form onSubmit={formik.handleSubmit}>
<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"
>
Source
</label>
@@ -41,7 +41,7 @@ const SelectSource = ({ handleNextStep }: { handleNextStep: () => void }) => {
{({ open }) => (
<>
<div className="relative">
<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-700 block w-full rounded-md border-0 bg-dark-300 bg-white/5 px-4 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">
<span className="flex items-center">
<FaTrello />
<span className="ml-2 block truncate">
@@ -63,21 +63,19 @@ const SelectSource = ({ handleNextStep }: { handleNextStep: () => void }) => {
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 ring-light-600 absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md py-1 text-base text-neutral-900 shadow-lg ring-1 ring-opacity-5 focus:outline-none dark:bg-dark-300 dark:text-dark-1000 sm:text-sm">
{sources.map(({ source }, index) => (
<Listbox.Option
key={`source_${index}`}
className="relative cursor-default select-none px-2 text-dark-1000 "
className="relative cursor-default select-none px-1"
value={source}
>
{() => (
<div className="flex items-center rounded-[5px] p-2 hover:bg-dark-400">
<FaTrello />
<span className="ml-2 block truncate font-normal">
{source}
</span>
</div>
)}
<div className="hover:bg-light-200 flex items-center rounded-[5px] p-1 dark:hover:bg-dark-400">
<FaTrello className="ml-1" />
<span className="ml-2 block truncate font-normal">
{source}
</span>
</div>
</Listbox.Option>
))}
</Listbox.Options>
@@ -89,7 +87,7 @@ const SelectSource = ({ handleNextStep }: { handleNextStep: () => void }) => {
<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"
>
Select source
</button>
@@ -208,37 +206,40 @@ const ImportTrello: React.FC = () => {
);
return (
<form onSubmit={formik.handleSubmit}>
<form
onSubmit={formik.handleSubmit}
className="text-neutral-900 dark:text-dark-1000"
>
<label
htmlFor="apiKey"
className="block pb-2 text-sm font-normal leading-6 text-dark-1000"
className="block pb-2 text-sm font-normal leading-6"
>
API Key
</label>
<input
id="apiKey"
name="apiKey"
className="mb-2 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-700 mb-2 block w-full rounded-md border-0 bg-dark-300 bg-white/5 py-1.5 shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6"
value={formik.values.apiKey}
onChange={formik.handleChange}
/>
<label
htmlFor="token"
className="block pb-2 text-sm font-normal leading-6 text-dark-1000"
className="block pb-2 text-sm font-normal leading-6"
>
Token
</label>
<input
id="token"
name="token"
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-700 mb-2 block w-full rounded-md border-0 bg-dark-300 bg-white/5 py-1.5 shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6"
value={formik.values.token}
onChange={formik.handleChange}
/>
<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"
>
Fetch boards
</button>
@@ -254,7 +255,9 @@ export function ImportBoardsForm() {
return (
<>
<div className="flex w-full justify-between pb-4">
<h2 className="text-sm font-medium text-dark-1000">New import</h2>
<h2 className="text-sm font-medium text-neutral-900 dark:text-dark-1000">
New import
</h2>
<button
className="rounded p-1 hover:bg-dark-300"
onClick={() => closeModal()}

14
src/app/boards/components/NewBoardForm.tsx
View File

@@ -29,13 +29,13 @@ export function NewBoardForm() {
return (
<>
<div className="flex w-full justify-between pb-4">
<h2 className="text-sm font-bold text-dark-1000">New board</h2>
<div className="flex w-full items-center justify-between pb-4 text-neutral-900 dark:text-dark-1000">
<h2 className="text-sm font-bold">New board</h2>
<button
className="rounded p-1 hover:bg-dark-300 focus:outline-none"
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>
@@ -53,19 +53,19 @@ export function NewBoardForm() {
<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"
/>
<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 board
</button>

26
src/app/components/UserMenu.tsx
View File

@@ -21,7 +21,7 @@ export default function UserMenu({ imageUrl, email }: UserMenuProps) {
return (
<Menu as="div" className="relative inline-block w-full text-left">
<div>
<Menu.Button className="flex w-full items-center rounded-md p-1.5 text-dark-900 hover:bg-dark-200 hover:text-dark-1000">
<Menu.Button className="hover:bg-light-200 flex w-full items-center rounded-md p-1.5 text-neutral-900 dark:text-dark-900 dark:hover:bg-dark-200 dark:hover:text-dark-1000">
{imageUrl ? (
<Image
src={imageUrl ?? ""}
@@ -31,7 +31,7 @@ export default function UserMenu({ imageUrl, email }: UserMenuProps) {
alt=""
/>
) : (
<span className="inline-block h-6 w-6 overflow-hidden rounded-full bg-dark-400">
<span className="bg-light-400 inline-block h-6 w-6 overflow-hidden rounded-full dark:bg-dark-400">
<svg
className="h-full w-full text-dark-700"
fill="currentColor"
@@ -54,21 +54,21 @@ export default function UserMenu({ imageUrl, email }: UserMenuProps) {
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="absolute bottom-[40px] left-0 z-10 mt-2 w-full origin-top-left rounded-md border border-dark-500 bg-dark-300 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<div className="flex flex-col">
<Menu.Items className="border-light-600 bg-light-50 absolute bottom-[40px] left-0 z-10 mt-2 w-full origin-top-left rounded-md border shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-600 dark:bg-dark-300">
<div className="flex flex-col text-neutral-900 dark:text-dark-1000">
<div className="p-1">
<div className="flex w-full items-center px-3 py-2 text-left text-xs text-dark-1000">
<div className="flex w-full items-center px-3 py-2 text-left text-xs">
<span>Theme</span>
</div>
<Menu.Item>
<button
onClick={() => switchTheme("system")}
className="flex w-full items-center rounded-[5px] px-3 py-2 text-left text-xs text-dark-1000 hover:bg-dark-400"
className="hover:bg-light-200 flex w-full items-center rounded-[5px] px-3 py-2 text-left text-xs dark:hover:bg-dark-400"
>
<span
className={classNames(
theme === "system" ? "visible" : "invisible",
"mr-4 h-[6px] w-[6px] rounded-full bg-dark-900",
"bg-light-900 mr-4 h-[6px] w-[6px] rounded-full dark:bg-dark-900",
)}
/>
System
@@ -77,12 +77,12 @@ export default function UserMenu({ imageUrl, email }: UserMenuProps) {
<Menu.Item>
<button
onClick={() => switchTheme("dark")}
className="flex w-full items-center rounded-[5px] px-3 py-2 text-left text-xs text-dark-1000 hover:bg-dark-400"
className="hover:bg-light-200 flex w-full items-center rounded-[5px] px-3 py-2 text-left text-xs dark:hover:bg-dark-400"
>
<span
className={classNames(
theme === "dark" ? "visible" : "invisible",
"mr-4 h-[6px] w-[6px] rounded-full bg-dark-900",
"bg-light-900 mr-4 h-[6px] w-[6px] rounded-full dark:bg-dark-900",
)}
/>
Dark
@@ -91,23 +91,23 @@ export default function UserMenu({ imageUrl, email }: UserMenuProps) {
<Menu.Item>
<button
onClick={() => switchTheme("light")}
className="flex w-full items-center rounded-[5px] px-3 py-2 text-left text-xs text-dark-1000 hover:bg-dark-400"
className="hover:bg-light-200 flex w-full items-center rounded-[5px] px-3 py-2 text-left text-xs dark:hover:bg-dark-400"
>
<span
className={classNames(
theme === "light" ? "visible" : "invisible",
"mr-4 h-[6px] w-[6px] rounded-full bg-dark-900",
"bg-light-900 mr-4 h-[6px] w-[6px] rounded-full dark:bg-dark-900",
)}
/>
Light
</button>
</Menu.Item>
</div>
<div className="border-t-[1px] border-dark-500 p-1">
<div className="light-border-600 border-t-[1px] p-1 dark:border-dark-600">
<Menu.Item>
<button
onClick={() => signOut({ callbackUrl: "/boards" })}
className=" flex w-full items-center rounded-[5px] px-3 py-2 text-left text-xs text-dark-1000 hover:bg-dark-400"
className=" hover:bg-light-200 flex w-full items-center rounded-[5px] px-3 py-2 text-left text-xs dark:hover:bg-dark-400"
>
Logout
</button>

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

@@ -24,7 +24,7 @@ const Modal: React.FC<Props> = ({ children }) => {
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-dark-50 bg-opacity-40 transition-opacity" />
<div className="bg-light-50 fixed inset-0 bg-opacity-40 transition-opacity dark:bg-dark-50 dark:bg-opacity-40" />
</Transition.Child>
<div className="fixed inset-0 z-10 w-screen overflow-y-auto">
@@ -38,7 +38,7 @@ const Modal: React.FC<Props> = ({ children }) => {
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="shadow-3xl relative mt-[25vh] transform rounded-lg border border-dark-400 bg-dark-100/20 px-4 pb-4 pt-5 text-left backdrop-blur-lg transition-all sm:mb-8 sm:w-full sm:max-w-sm sm:p-6">
<Dialog.Panel className="shadow-3xl-light dark:shadow-3xl-dark bg-light-50 border-light-600 relative mt-[25vh] transform rounded-lg border px-4 pb-4 pt-5 text-left transition-all dark:border-dark-600 dark:bg-dark-100/20 dark:backdrop-blur-lg sm:mb-8 sm:w-full sm:max-w-sm sm:p-6">
{children}
</Dialog.Panel>
</Transition.Child>

3
tailwind.config.ts
View File

@@ -12,7 +12,8 @@ export default {
sm: "0.8rem",
},
boxShadow: {
'3xl': '0px 16px 70px rgba(0, 0, 0, 0.5)',
'3xl-dark': '0px 16px 70px rgba(0, 0, 0, 0.5)',
'3xl-light': 'rgba(0, 0, 0, 0.12) 0px 4px 30px, rgba(0, 0, 0, 0.04) 0px 3px 17px, rgba(0, 0, 0, 0.04) 0px 2px 8px, rgba(0, 0, 0, 0.04) 0px 1px 1px'
},
colors: {
"dark-50": "#161616",