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"> <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) => ( {data?.map((board) => (
<Link key={board.publicId} href={`boards/${board.publicId}`}> <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> <div>
<svg <svg
style={{ style={{
@@ -56,7 +56,7 @@ export function BoardsList() {
></rect> ></rect>
</svg> </svg>
</div> </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} {board.name}
</p> </p>
</div> </div>

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

@@ -16,13 +16,13 @@ export default function BoardsPage() {
return ( return (
<div className="p-8"> <div className="p-8">
<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]">
Boards Boards
</h1> </h1>
<div className="flex"> <div className="flex">
<button <button
type="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")} onClick={() => openModal("IMPORT_BOARDS")}
> >
<div className="flex h-5 w-5 items-center"> <div className="flex h-5 w-5 items-center">
@@ -32,7 +32,7 @@ export default function BoardsPage() {
</button> </button>
<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("NEW_BOARD")}
> >
<div className="h-5 w-5 items-center"> <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 <button
type="button" type="button"
onMouseEnter={handleMouseEnter} 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} /> <LottieIcon index={index} json={chatIcon} isPlaying={isHovered} />
<span className="ml-1">Feedback</span> <span className="ml-1">Feedback</span>

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

@@ -28,10 +28,8 @@ const Button: React.FC<{
href={href} href={href}
onMouseEnter={handleMouseEnter} onMouseEnter={handleMouseEnter}
className={classNames( className={classNames(
current current ? "bg-light-200 dark:bg-dark-200" : " dark:bg-dark-50",
? "bg-dark-200 text-white" "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",
: "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",
)} )}
> >
<LottieIcon index={index} json={json} isPlaying={isHovered} /> <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 ( 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> <div>
<WorkspaceMenu /> <WorkspaceMenu />
<ul role="list" className="space-y-1"> <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 Image from "next/image";
import { signOut } from "next-auth/react"; import { signOut } from "next-auth/react";
import { Menu, Transition } from "@headlessui/react"; import { Menu, Transition } from "@headlessui/react";
import { HiOutlineLogout } from "react-icons/hi";
import { useTheme } from "~/app/providers/theme"; import { useTheme } from "~/app/providers/theme";
interface UserMenuProps { interface UserMenuProps {

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

@@ -15,13 +15,13 @@ export default function WorkspaceMenu() {
return ( return (
<Menu as="div" className="relative inline-block w-full pb-3 text-left"> <Menu as="div" className="relative inline-block w-full pb-3 text-left">
<div> <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="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"> <span className="text-xs font-bold leading-none text-white">
{workspace?.name.charAt(0).toUpperCase()} {workspace?.name.charAt(0).toUpperCase()}
</span> </span>
</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} {workspace?.name}
</span> </span>
</Menu.Button> </Menu.Button>
@@ -36,14 +36,14 @@ export default function WorkspaceMenu() {
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 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"> <div className="p-1">
{availableWorkspaces.map((availableWorkspace) => ( {availableWorkspaces.map((availableWorkspace) => (
<div key={availableWorkspace.publicId} className="flex"> <div key={availableWorkspace.publicId} className="flex">
<Menu.Item> <Menu.Item>
<button <button
onClick={() => switchWorkspace(availableWorkspace)} 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> <div>
<span className="inline-flex h-5 w-5 items-center justify-center rounded-[5px] bg-indigo-700"> <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()} {availableWorkspace?.name.charAt(0).toUpperCase()}
</span> </span>
</span> </span>
<span className="ml-2 text-xs font-medium text-dark-1000"> <span className="ml-2 text-xs font-medium">
{availableWorkspace?.name} {availableWorkspace?.name}
</span> </span>
</div> </div>
@@ -65,11 +65,11 @@ export default function WorkspaceMenu() {
</div> </div>
))} ))}
</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> <Menu.Item>
<button <button
onClick={() => openModal("NEW_WORKSPACE")} 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 Create workspace
</button> </button>

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

@@ -14,9 +14,9 @@ export default async function Dashboard(props: { children: React.ReactNode }) {
return ( return (
<main className="bg-light-50 flex h-screen flex-col items-center dark:bg-dark-50"> <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"> <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 kan.bn
</h1> </h1>
<FeedbackButton /> <FeedbackButton />

11
tailwind.config.ts
View File

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