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

feat: light mode styling

Browse Source
This commit is contained in:
Henry
2024-04-01 12:23:39 +01:00
parent e1cc789531
commit 82a3cad3f5
9 changed files with 24 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/boards/components/BoardsList.tsx
View File

@@ -19,7 +19,7 @@ export function BoardsList() {
<div className="xxl:grid-cols-5 grid w-full grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
{data?.map((board) => (
<Link key={board.publicId} href={`boards/${board.publicId}`}>
<div className="align-center relative mr-5 flex h-[150px] w-full items-center justify-center rounded-md border border-dashed border-dark-600 bg-dark-100 hover:bg-dark-200">
<div className="align-center bg-light-100 border-light-600 hover:bg-light-200 relative mr-5 flex h-[150px] w-full items-center justify-center rounded-md border border-dashed dark:border-dark-600 dark:bg-dark-100 dark:hover:bg-dark-200">
<div>
<svg
style={{
@@ -56,7 +56,7 @@ export function BoardsList() {
></rect>
</svg>
</div>
<p className="text-md px-4 font-medium text-dark-1000">
<p className="text-md px-4 font-medium text-neutral-900 dark:text-dark-1000">
{board.name}
</p>
</div>

6
src/app/boards/page.tsx
View File

@@ -16,13 +16,13 @@ export default function BoardsPage() {
return (
<div className="p-8">
<div className="mb-8 flex w-full justify-between">
<h1 className="font-medium tracking-tight text-dark-1000 sm:text-[1.2rem]">
<h1 className="font-medium tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
Boards
</h1>
<div className="flex">
<button
type="button"
className="bg-dark-3000 mr-2 flex items-center gap-x-1.5 rounded-md border-[1px] border-dark-600 px-3 py-2 text-sm text-dark-1000 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
className="bg-dark-3000 border-light-600 mr-2 flex items-center gap-x-1.5 rounded-md border-[1px] px-3 py-2 text-sm text-neutral-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:border-dark-600 dark:text-dark-1000"
onClick={() => openModal("IMPORT_BOARDS")}
>
<div className="flex h-5 w-5 items-center">
@@ -32,7 +32,7 @@ export default function BoardsPage() {
</button>
<button
type="button"
className="flex items-center gap-x-1.5 rounded-md bg-dark-1000 px-3 py-2 text-sm font-semibold text-dark-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
className="bg-light-1000 text-light-50 flex items-center gap-x-1.5 rounded-md px-3 py-2 text-sm font-semibold focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:bg-dark-1000 dark:text-dark-50"
onClick={() => openModal("NEW_BOARD")}
>
<div className="h-5 w-5 items-center">

2
src/app/components/FeedbackButton.tsx
View File

@@ -18,7 +18,7 @@ const FeedbackButton: React.FC = () => {
<button
type="button"
onMouseEnter={handleMouseEnter}
className="flex items-center rounded-md border-[1px] border-dark-600 bg-dark-50 px-2.5 py-1.5 text-sm font-normal text-dark-1000 shadow-sm"
className="bg-light-50 border-light-600 flex items-center rounded-md border-[1px] px-2.5 py-1.5 text-sm font-normal text-neutral-900 shadow-sm dark:border-dark-600 dark:bg-dark-50 dark:text-dark-1000"
>
<LottieIcon index={index} json={chatIcon} isPlaying={isHovered} />
<span className="ml-1">Feedback</span>

6
src/app/components/ReactiveButton.tsx
View File

@@ -28,10 +28,8 @@ const Button: React.FC<{
href={href}
onMouseEnter={handleMouseEnter}
className={classNames(
current
? "bg-dark-200 text-white"
: "bg-dark-50 text-white hover:bg-dark-200",
"group flex items-center gap-x-3 rounded-md p-1.5 text-sm font-normal leading-6 text-dark-1000",
current ? "bg-light-200 dark:bg-dark-200" : " dark:bg-dark-50",
"hover:bg-light-200 group flex items-center gap-x-3 rounded-md p-1.5 text-sm font-normal leading-6 text-neutral-900 dark:text-dark-1000 dark:hover:bg-dark-200",
)}
>
<LottieIcon index={index} json={json} isPlaying={isHovered} />

2
src/app/components/SideNavigation.tsx
View File

@@ -34,7 +34,7 @@ export default function SideNavigation({ user }: SideNavigationProps) {
return (
<>
<nav className="flex w-72 flex-col justify-between border-r border-dark-600 px-3 pb-3 pt-5">
<nav className="border-light-600 flex w-72 flex-col justify-between border-r px-3 pb-3 pt-5 dark:border-dark-600">
<div>
<WorkspaceMenu />
<ul role="list" className="space-y-1">

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

@@ -4,7 +4,6 @@ import { Fragment } from "react";
import Image from "next/image";
import { signOut } from "next-auth/react";
import { Menu, Transition } from "@headlessui/react";
import { HiOutlineLogout } from "react-icons/hi";
import { useTheme } from "~/app/providers/theme";
interface UserMenuProps {

14
src/app/components/WorkspaceMenu.tsx
View File

@@ -15,13 +15,13 @@ export default function WorkspaceMenu() {
return (
<Menu as="div" className="relative inline-block w-full pb-3 text-left">
<div>
<Menu.Button className="mb-1 flex w-full items-center rounded-[5px] p-1.5 hover:bg-dark-200">
<Menu.Button className="hover:bg-light-200 mb-1 flex w-full items-center rounded-[5px] p-1.5 dark:hover:bg-dark-200">
<span className="inline-flex h-6 w-6 items-center justify-center rounded-[5px] bg-indigo-700">
<span className="text-xs font-bold leading-none text-white">
{workspace?.name.charAt(0).toUpperCase()}
</span>
</span>
<span className="ml-2 text-sm font-bold text-dark-1000">
<span className="ml-2 text-sm font-bold text-neutral-900 dark:text-dark-1000">
{workspace?.name}
</span>
</Menu.Button>
@@ -36,14 +36,14 @@ export default function WorkspaceMenu() {
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="absolute left-0 z-10 w-full origin-top-left rounded-md border border-dark-500 bg-dark-300 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<Menu.Items className="bg-light-50 border-light-600 absolute left-0 z-10 w-full origin-top-left rounded-md border shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-600 dark:bg-dark-300">
<div className="p-1">
{availableWorkspaces.map((availableWorkspace) => (
<div key={availableWorkspace.publicId} className="flex">
<Menu.Item>
<button
onClick={() => switchWorkspace(availableWorkspace)}
className="flex w-full items-center justify-between rounded-[5px] px-3 py-2 text-left text-sm text-dark-1000 hover:bg-dark-400"
className="hover:bg-light-200 flex w-full items-center justify-between rounded-[5px] px-3 py-2 text-left text-sm text-neutral-900 dark:text-dark-1000 dark:hover:bg-dark-400"
>
<div>
<span className="inline-flex h-5 w-5 items-center justify-center rounded-[5px] bg-indigo-700">
@@ -51,7 +51,7 @@ export default function WorkspaceMenu() {
{availableWorkspace?.name.charAt(0).toUpperCase()}
</span>
</span>
<span className="ml-2 text-xs font-medium text-dark-1000">
<span className="ml-2 text-xs font-medium">
{availableWorkspace?.name}
</span>
</div>
@@ -65,11 +65,11 @@ export default function WorkspaceMenu() {
</div>
))}
</div>
<div className="border-t-[1px] border-dark-500 p-1">
<div className="border-light-600 border-t-[1px] p-1 dark:border-dark-500">
<Menu.Item>
<button
onClick={() => openModal("NEW_WORKSPACE")}
className="flex w-full items-center justify-between rounded-[5px] px-3 py-2 text-left text-xs text-dark-1000 hover:bg-dark-400"
className="hover:bg-light-200 flex w-full items-center justify-between rounded-[5px] px-3 py-2 text-left text-xs text-neutral-900 dark:text-dark-1000 dark:hover:bg-dark-400"
>
Create workspace
</button>

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

@@ -14,9 +14,9 @@ export default async function Dashboard(props: { children: React.ReactNode }) {
return (
<main className="bg-light-50 flex h-screen flex-col items-center dark:bg-dark-50">
<div className="m-auto flex h-16 w-full justify-between border-b border-dark-600 px-5 py-2 align-middle">
<div className="border-light-600 m-auto flex h-16 w-full justify-between border-b px-5 py-2 align-middle dark:border-dark-600">
<div className="my-auto flex w-full items-center justify-between">
<h1 className="text-lg font-bold tracking-tight text-dark-1000">
<h1 className="text-lg font-bold tracking-tight text-neutral-900 dark:text-dark-1000">
kan.bn
</h1>
<FeedbackButton />

11
tailwind.config.ts
View File

@@ -33,11 +33,12 @@ export default {
"light-300": "hsl(0deg 0% 92.9%)",
"light-400": "hsl(0deg 0% 91%)",
"light-500": "hsl(0deg 0% 88.6%)",
"light-700": "hsl(0deg 0% 85.9%)",
"light-800": "hsl(0deg 0% 78%)",
"light-900": "hsl(0deg 0% 56.1%)",
"light-950": "hsl(0deg 0% 52.2%)",
"light-1000": "hsl(0deg 0% 43.5%)",
"light-600": "hsl(0deg 0% 85.9%)",
"light-700": "hsl(0deg 0% 78%)",
"light-800": "hsl(0deg 0% 56.1%)",
"light-900": "hsl(0deg 0% 52.2%)",
"light-950": "hsl(0deg 0% 43.5%)",
"light-1000": "hsl(0deg 0% 9%)"
},
screens: {
xxl: '1600px'