mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-14 09:13:31 +00:00
wip: new sidebar
This commit is contained in:
Ren Amamiya
parent
0946e9125e
commit
ced23341d2
@ -1,10 +1,10 @@
|
||||
<html lang="en" class="dark">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Lume</title>
|
||||
</head>
|
||||
<body class="relative cursor-default select-none overflow-hidden font-sans antialiased h-screen w-screen">
|
||||
<body class="relative cursor-default select-none overflow-hidden font-sans antialiased h-screen w-screen text-black dark:text-white">
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
|
||||
@ -19,7 +19,6 @@
|
||||
"minHeight": 800,
|
||||
"decorations": false,
|
||||
"resizable": true,
|
||||
"theme": "Dark",
|
||||
"title": "Lume",
|
||||
"transparent": false,
|
||||
"center": true,
|
||||
|
||||
@ -20,7 +20,6 @@
|
||||
"minWidth": 1080,
|
||||
"minHeight": 800,
|
||||
"resizable": true,
|
||||
"theme": "Dark",
|
||||
"title": "Lume",
|
||||
"titleBarStyle": "Overlay",
|
||||
"transparent": false,
|
||||
|
||||
@ -19,7 +19,6 @@
|
||||
"minHeight": 800,
|
||||
"decorations": false,
|
||||
"resizable": true,
|
||||
"theme": "Dark",
|
||||
"title": "Lume",
|
||||
"center": true,
|
||||
"fullscreen": false,
|
||||
|
||||
@ -7,17 +7,19 @@ export function AppLayout() {
|
||||
return (
|
||||
<div className="flex h-screen w-screen flex-col">
|
||||
<WindowTitlebar />
|
||||
<div className="flex h-full min-h-0 w-full bg-zinc-50 text-zinc-50 dark:bg-zinc-950 dark:text-zinc-950">
|
||||
<div className="h-full shrink-0">
|
||||
<div className="flex h-full min-h-0 w-full">
|
||||
<div data-tauri-drag-region className="h-full w-[64px] shrink-0 pt-2">
|
||||
<Navigation />
|
||||
</div>
|
||||
<div className="h-full flex-1">
|
||||
<Outlet />
|
||||
<ScrollRestoration
|
||||
getKey={(location) => {
|
||||
return location.pathname;
|
||||
}}
|
||||
/>
|
||||
<div className="flex h-full min-h-0 flex-1 rounded-tl-lg bg-white shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] dark:bg-black dark:shadow-[inset_0_0_0.5px_1px_hsla(0,0%,100%,0.075),0_0_0_1px_hsla(0,0%,0%,0.05),0_0.3px_0.4px_hsla(0,0%,0%,0.02),0_0.9px_1.5px_hsla(0,0%,0%,0.045),0_3.5px_6px_hsla(0,0%,0%,0.09)]">
|
||||
<div className="h-full flex-1">
|
||||
<Outlet />
|
||||
<ScrollRestoration
|
||||
getKey={(location) => {
|
||||
return location.pathname;
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -16,127 +16,149 @@ import {
|
||||
} from '@shared/icons';
|
||||
|
||||
export function Navigation() {
|
||||
const { db } = useStorage();
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div className="relative flex h-full w-[232px] flex-col border-r border-zinc-200 dark:border-zinc-800">
|
||||
<div
|
||||
data-tauri-drag-region
|
||||
className="inline-flex h-16 w-full items-center justify-between px-3"
|
||||
>
|
||||
<div className="inline-flex items-center gap-4 pl-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => navigate(-1)}
|
||||
className="inline-flex h-9 items-center justify-center text-zinc-400 hover:text-zinc-500 dark:text-zinc-500 dark:hover:text-zinc-100"
|
||||
>
|
||||
<ArrowLeftIcon className="h-5 w-5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => navigate(1)}
|
||||
className="inline-flex h-9 items-center justify-center text-zinc-400 hover:text-zinc-500 dark:text-zinc-500 dark:hover:text-zinc-100"
|
||||
>
|
||||
<ArrowRightIcon className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
<ComposerModal />
|
||||
</div>
|
||||
<div
|
||||
data-tauri-drag-region
|
||||
className="scrollbar-hide flex h-full flex-1 flex-col gap-6 overflow-y-auto pr-3"
|
||||
>
|
||||
<div className="flex flex-col">
|
||||
<NavLink
|
||||
to="/"
|
||||
preventScrollReset={true}
|
||||
className={({ isActive }) =>
|
||||
twMerge(
|
||||
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 px-3 font-medium',
|
||||
isActive
|
||||
? 'border-interor-600 bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100'
|
||||
: 'border-transparent text-zinc-500 dark:text-zinc-500'
|
||||
)
|
||||
}
|
||||
>
|
||||
<span className="inline-flex h-7 w-7 shrink-0 items-center justify-center">
|
||||
<HomeIcon className="h-5 w-5" />
|
||||
</span>
|
||||
Home
|
||||
</NavLink>
|
||||
<NavLink
|
||||
to="/chats"
|
||||
preventScrollReset={true}
|
||||
className={({ isActive }) =>
|
||||
twMerge(
|
||||
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 px-3 font-medium',
|
||||
isActive
|
||||
? 'border-interor-600 bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100'
|
||||
: 'border-transparent text-zinc-500 dark:text-zinc-500'
|
||||
)
|
||||
}
|
||||
>
|
||||
<span className="inline-flex h-7 w-7 shrink-0 items-center justify-center">
|
||||
<ChatsIcon className="h-5 w-5" />
|
||||
</span>
|
||||
Chats
|
||||
</NavLink>
|
||||
<NavLink
|
||||
to="/communities"
|
||||
preventScrollReset={true}
|
||||
className={({ isActive }) =>
|
||||
twMerge(
|
||||
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 px-3 font-medium',
|
||||
isActive
|
||||
? 'border-interor-600 bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100'
|
||||
: 'border-transparent text-zinc-500 dark:text-zinc-500'
|
||||
)
|
||||
}
|
||||
>
|
||||
<span className="inline-flex h-7 w-7 shrink-0 items-center justify-center">
|
||||
<CommunityIcon className="h-5 w-5" />
|
||||
</span>
|
||||
Communities
|
||||
</NavLink>
|
||||
<NavLink
|
||||
to="/relays"
|
||||
preventScrollReset={true}
|
||||
className={({ isActive }) =>
|
||||
twMerge(
|
||||
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 px-3 font-medium',
|
||||
isActive
|
||||
? 'border-interor-600 bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100'
|
||||
: 'border-transparent text-zinc-500 dark:text-zinc-500'
|
||||
)
|
||||
}
|
||||
>
|
||||
<span className="inline-flex h-7 w-7 shrink-0 items-center justify-center">
|
||||
<RelayIcon className="h-5 w-5" />
|
||||
</span>
|
||||
Relays
|
||||
</NavLink>
|
||||
<NavLink
|
||||
to="/explore"
|
||||
preventScrollReset={true}
|
||||
className={({ isActive }) =>
|
||||
twMerge(
|
||||
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 px-3 font-medium',
|
||||
isActive
|
||||
? 'border-interor-600 bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100'
|
||||
: 'border-transparent text-zinc-500 dark:text-zinc-500'
|
||||
)
|
||||
}
|
||||
>
|
||||
<span className="inline-flex h-7 w-7 shrink-0 items-center justify-center">
|
||||
<ExploreIcon className="h-5 w-5" />
|
||||
</span>
|
||||
Explore
|
||||
</NavLink>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative shrink-0">
|
||||
<ActiveAccount />
|
||||
<div className="flex h-full w-full flex-col justify-between p-3">
|
||||
<div className="flex flex-col gap-5">
|
||||
<NavLink
|
||||
to="/"
|
||||
preventScrollReset={true}
|
||||
className="inline-flex flex-col items-center justify-center text-sm font-medium"
|
||||
>
|
||||
{({ isActive }) => (
|
||||
<>
|
||||
<div
|
||||
className={twMerge(
|
||||
'inline-flex aspect-square h-full w-full items-center justify-center rounded-lg',
|
||||
isActive ? 'bg-black/20 text-white' : 'text-black/50 dark:text-white/50'
|
||||
)}
|
||||
>
|
||||
<HomeIcon className="h-6 w-6" />
|
||||
</div>{' '}
|
||||
<div
|
||||
className={twMerge(
|
||||
'',
|
||||
isActive
|
||||
? 'text-black dark:text-white'
|
||||
: 'text-black/50 dark:text-white/50'
|
||||
)}
|
||||
>
|
||||
Home
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</NavLink>
|
||||
<NavLink
|
||||
to="/chats"
|
||||
preventScrollReset={true}
|
||||
className="inline-flex flex-col items-center justify-center text-sm font-medium"
|
||||
>
|
||||
{({ isActive }) => (
|
||||
<>
|
||||
<div
|
||||
className={twMerge(
|
||||
'inline-flex aspect-square h-full w-full items-center justify-center rounded-lg',
|
||||
isActive ? 'bg-black/20 text-white' : 'text-black/50 dark:text-white/50'
|
||||
)}
|
||||
>
|
||||
<ChatsIcon className="h-6 w-6" />
|
||||
</div>{' '}
|
||||
<div
|
||||
className={twMerge(
|
||||
'',
|
||||
isActive
|
||||
? 'text-black dark:text-white'
|
||||
: 'text-black/50 dark:text-white/50'
|
||||
)}
|
||||
>
|
||||
Chats
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</NavLink>
|
||||
<NavLink
|
||||
to="/communities"
|
||||
preventScrollReset={true}
|
||||
className="inline-flex flex-col items-center justify-center text-sm font-medium"
|
||||
>
|
||||
{({ isActive }) => (
|
||||
<>
|
||||
<div
|
||||
className={twMerge(
|
||||
'inline-flex aspect-square h-full w-full items-center justify-center rounded-lg',
|
||||
isActive ? 'bg-black/20 text-white' : 'text-black/50 dark:text-white/50'
|
||||
)}
|
||||
>
|
||||
<CommunityIcon className="h-6 w-6" />
|
||||
</div>{' '}
|
||||
<div
|
||||
className={twMerge(
|
||||
'',
|
||||
isActive
|
||||
? 'text-black dark:text-white'
|
||||
: 'text-black/50 dark:text-white/50'
|
||||
)}
|
||||
>
|
||||
Groups
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</NavLink>
|
||||
<NavLink
|
||||
to="/relays"
|
||||
preventScrollReset={true}
|
||||
className="inline-flex flex-col items-center justify-center text-sm font-medium"
|
||||
>
|
||||
{({ isActive }) => (
|
||||
<>
|
||||
<div
|
||||
className={twMerge(
|
||||
'inline-flex aspect-square h-full w-full items-center justify-center rounded-lg',
|
||||
isActive ? 'bg-black/20 text-white' : 'text-black/50 dark:text-white/50'
|
||||
)}
|
||||
>
|
||||
<RelayIcon className="h-6 w-6" />
|
||||
</div>{' '}
|
||||
<div
|
||||
className={twMerge(
|
||||
'',
|
||||
isActive
|
||||
? 'text-black dark:text-white'
|
||||
: 'text-black/50 dark:text-white/50'
|
||||
)}
|
||||
>
|
||||
Relays
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</NavLink>
|
||||
<NavLink
|
||||
to="/explore"
|
||||
preventScrollReset={true}
|
||||
className="inline-flex flex-col items-center justify-center text-sm font-medium"
|
||||
>
|
||||
{({ isActive }) => (
|
||||
<>
|
||||
<div
|
||||
className={twMerge(
|
||||
'inline-flex aspect-square h-full w-full items-center justify-center rounded-lg',
|
||||
isActive ? 'bg-black/20 text-white' : 'text-black/50 dark:text-white/50'
|
||||
)}
|
||||
>
|
||||
<ExploreIcon className="h-6 w-6" />
|
||||
</div>{' '}
|
||||
<div
|
||||
className={twMerge(
|
||||
'',
|
||||
isActive
|
||||
? 'text-black dark:text-white'
|
||||
: 'text-black/50 dark:text-white/50'
|
||||
)}
|
||||
>
|
||||
Explore
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</NavLink>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -76,18 +76,22 @@ export const User = memo(function User({
|
||||
className="h-6 w-6 rounded"
|
||||
/>
|
||||
<Avatar.Fallback delayMs={300}>
|
||||
<img src={svgURI} alt={pubkey} className="h-6 w-6 rounded bg-black" />
|
||||
<img
|
||||
src={svgURI}
|
||||
alt={pubkey}
|
||||
className="h-6 w-6 rounded bg-black dark:bg-white"
|
||||
/>
|
||||
</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
<div className="flex flex-1 items-baseline gap-2">
|
||||
<h5 className="max-w-[10rem] truncate font-semibold text-white">
|
||||
<h5 className="max-w-[10rem] truncate font-semibold text-zinc-900 dark:text-zinc-100">
|
||||
{user?.name ||
|
||||
user?.display_name ||
|
||||
user?.displayName ||
|
||||
displayNpub(pubkey, 16)}
|
||||
</h5>
|
||||
<span className="text-white/50">·</span>
|
||||
<span className="text-white/50">{createdAt}</span>
|
||||
<span className="text-zinc-500 dark:text-zinc-300">·</span>
|
||||
<span className="text-zinc-500 dark:text-zinc-300">{createdAt}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@ -106,12 +110,16 @@ export const User = memo(function User({
|
||||
className="h-14 w-14 rounded-lg"
|
||||
/>
|
||||
<Avatar.Fallback delayMs={300}>
|
||||
<img src={svgURI} alt={pubkey} className="h-14 w-14 rounded-lg bg-black" />
|
||||
<img
|
||||
src={svgURI}
|
||||
alt={pubkey}
|
||||
className="h-14 w-14 rounded-lg bg-black dark:bg-white"
|
||||
/>
|
||||
</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
<div className="flex h-full flex-col items-start justify-between">
|
||||
<div className="flex flex-col items-start gap-1 text-start">
|
||||
<p className="max-w-[15rem] truncate text-lg font-semibold text-white">
|
||||
<p className="max-w-[15rem] truncate text-lg font-semibold text-zinc-900 dark:text-zinc-100">
|
||||
{user?.name || user?.display_name || user?.displayName}
|
||||
</p>
|
||||
<ReactMarkdown
|
||||
@ -129,7 +137,7 @@ export const User = memo(function User({
|
||||
<Link
|
||||
to={user?.website}
|
||||
target="_blank"
|
||||
className="inline-flex items-center gap-2 text-sm text-white/70"
|
||||
className="inline-flex items-center gap-2 text-sm text-zinc-900 dark:text-zinc-100/70"
|
||||
>
|
||||
<WorldIcon className="h-4 w-4" />
|
||||
<p className="max-w-[10rem] truncate">{user?.website}</p>
|
||||
@ -154,14 +162,18 @@ export const User = memo(function User({
|
||||
className="h-10 w-10 rounded-lg"
|
||||
/>
|
||||
<Avatar.Fallback delayMs={300}>
|
||||
<img src={svgURI} alt={pubkey} className="h-10 w-10 rounded-lg bg-black" />
|
||||
<img
|
||||
src={svgURI}
|
||||
alt={pubkey}
|
||||
className="h-10 w-10 rounded-lg bg-black dark:bg-white"
|
||||
/>
|
||||
</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
<div className="flex w-full flex-col items-start">
|
||||
<h3 className="max-w-[15rem] truncate font-medium text-white">
|
||||
<h3 className="max-w-[15rem] truncate font-medium text-zinc-900 dark:text-zinc-100">
|
||||
{user?.name || user?.display_name || user?.displayName}
|
||||
</h3>
|
||||
<p className="max-w-[10rem] truncate text-sm text-white/70">
|
||||
<p className="max-w-[10rem] truncate text-sm text-zinc-900 dark:text-zinc-100/70">
|
||||
{user?.nip05 || user?.username || displayNpub(pubkey, 16)}
|
||||
</p>
|
||||
</div>
|
||||
@ -181,7 +193,11 @@ export const User = memo(function User({
|
||||
className="h-12 w-12 rounded-lg"
|
||||
/>
|
||||
<Avatar.Fallback delayMs={300}>
|
||||
<img src={svgURI} alt={pubkey} className="h-12 w-12 rounded-lg bg-black" />
|
||||
<img
|
||||
src={svgURI}
|
||||
alt={pubkey}
|
||||
className="h-12 w-12 rounded-lg bg-black dark:bg-white"
|
||||
/>
|
||||
</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
);
|
||||
@ -202,7 +218,7 @@ export const User = memo(function User({
|
||||
<img
|
||||
src={svgURI}
|
||||
alt={pubkey}
|
||||
className="inline-block h-8 w-8 rounded-full bg-black ring-1 ring-black"
|
||||
className="inline-block h-8 w-8 rounded-full bg-black ring-1 ring-black dark:bg-white"
|
||||
/>
|
||||
</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
@ -226,11 +242,15 @@ export const User = memo(function User({
|
||||
className="h-6 w-6 rounded"
|
||||
/>
|
||||
<Avatar.Fallback delayMs={300}>
|
||||
<img src={svgURI} alt={pubkey} className="h-6 w-6 rounded bg-black" />
|
||||
<img
|
||||
src={svgURI}
|
||||
alt={pubkey}
|
||||
className="h-6 w-6 rounded bg-black dark:bg-white"
|
||||
/>
|
||||
</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
<div className="inline-flex items-baseline gap-1">
|
||||
<h5 className="max-w-[10rem] truncate font-medium text-white/80">
|
||||
<h5 className="max-w-[10rem] truncate font-medium text-zinc-900 dark:text-zinc-100/80">
|
||||
{user?.name ||
|
||||
user?.display_name ||
|
||||
user?.displayName ||
|
||||
@ -256,17 +276,23 @@ export const User = memo(function User({
|
||||
className="h-10 w-10 rounded-lg"
|
||||
/>
|
||||
<Avatar.Fallback delayMs={300}>
|
||||
<img src={svgURI} alt={pubkey} className="h-10 w-10 rounded-lg bg-black" />
|
||||
<img
|
||||
src={svgURI}
|
||||
alt={pubkey}
|
||||
className="h-10 w-10 rounded-lg bg-black dark:bg-white"
|
||||
/>
|
||||
</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
<div className="flex flex-1 flex-col gap-2">
|
||||
<h5 className="max-w-[15rem] truncate font-semibold text-white">
|
||||
<h5 className="max-w-[15rem] truncate font-semibold text-zinc-900 dark:text-zinc-100">
|
||||
{user?.name || user?.display_name || user?.displayName || 'Anon'}
|
||||
</h5>
|
||||
<div className="inline-flex items-center gap-2">
|
||||
<span className="text-white/50">{createdAt}</span>
|
||||
<span className="text-white/50">·</span>
|
||||
<span className="text-white/50">{displayNpub(pubkey, 16)}</span>
|
||||
<span className="text-zinc-500 dark:text-zinc-300">{createdAt}</span>
|
||||
<span className="text-zinc-500 dark:text-zinc-300">·</span>
|
||||
<span className="text-zinc-500 dark:text-zinc-300">
|
||||
{displayNpub(pubkey, 16)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -290,20 +316,20 @@ export const User = memo(function User({
|
||||
<img
|
||||
src={svgURI}
|
||||
alt={pubkey}
|
||||
className="h-10 w-10 rounded-lg border border-white/5 bg-black"
|
||||
className="h-10 w-10 rounded-lg border border-white/5 bg-black dark:bg-white"
|
||||
/>
|
||||
</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
</HoverCard.Trigger>
|
||||
<div className="flex flex-1 items-center gap-2">
|
||||
<h5 className="max-w-[15rem] truncate font-semibold text-white">
|
||||
<h5 className="max-w-[15rem] truncate font-semibold text-zinc-900 dark:text-zinc-100">
|
||||
{user?.name ||
|
||||
user?.display_name ||
|
||||
user?.displayName ||
|
||||
displayNpub(pubkey, 16)}
|
||||
</h5>
|
||||
<span className="text-white/50">·</span>
|
||||
<span className="text-white/50">{createdAt}</span>
|
||||
<span className="text-zinc-500 dark:text-zinc-300">·</span>
|
||||
<span className="text-zinc-500 dark:text-zinc-300">{createdAt}</span>
|
||||
</div>
|
||||
</div>
|
||||
<HoverCard.Portal>
|
||||
@ -325,7 +351,7 @@ export const User = memo(function User({
|
||||
<img
|
||||
src={svgURI}
|
||||
alt={pubkey}
|
||||
className="h-10 w-10 rounded-lg border border-white/5 bg-black"
|
||||
className="h-10 w-10 rounded-lg border border-white/5 bg-black dark:bg-white"
|
||||
/>
|
||||
</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
@ -341,16 +367,16 @@ export const User = memo(function User({
|
||||
<NIP05
|
||||
pubkey={pubkey}
|
||||
nip05={user?.nip05}
|
||||
className="max-w-[15rem] truncate text-sm text-white/50"
|
||||
className="max-w-[15rem] truncate text-sm text-zinc-500 dark:text-zinc-300"
|
||||
/>
|
||||
) : (
|
||||
<span className="max-w-[15rem] truncate text-sm text-white/50">
|
||||
<span className="max-w-[15rem] truncate text-sm text-zinc-500 dark:text-zinc-300">
|
||||
{displayNpub(pubkey, 16)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<p className="line-clamp-3 break-all text-sm leading-tight text-white">
|
||||
<p className="line-clamp-3 break-all text-sm leading-tight text-zinc-900 dark:text-zinc-100">
|
||||
{user?.about}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -57,7 +57,7 @@ export function EventLoader({ firstTime }: { firstTime: boolean }) {
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center">
|
||||
<h3 className="font-semibold leading-tight text-zinc-500">
|
||||
<h3 className="font-semibold leading-tight text-zinc-500 dark:text-zinc-300">
|
||||
Downloading all events while you're away...
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
@ -4,7 +4,6 @@ const defaultTheme = require('tailwindcss/defaultTheme');
|
||||
|
||||
module.exports = {
|
||||
content: ['./src/**/*.{js,ts,jsx,tsx}', 'index.html'],
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user