reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip: update color palette

Browse Source
This commit is contained in:
Ren Amamiya
2023-10-10 08:25:31 +07:00
parent d20ee26e22
commit 043c1b1220
104 changed files with 747 additions and 753 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/space/components/toggle.tsx
View File

@@ -9,17 +9,17 @@ export function ToggleWidgetList() {
const setWidget = useWidgets((state) => state.setWidget);
return (
<div className="flex h-full w-[420px] items-center justify-center border-r border-zinc-100 dark:border-zinc-900">
<div className="flex h-full w-[420px] items-center justify-center border-r border-neutral-100 dark:border-neutral-900">
<div className="relative">
<div className="absolute -top-44 left-1/2 -translate-x-1/2 transform">
<HandArrowDownIcon className="text-zinc-100 dark:text-zinc-900" />
<HandArrowDownIcon className="text-neutral-100 dark:text-neutral-900" />
</div>
<button
type="button"
onClick={() =>
setWidget(db, { kind: WidgetKinds.tmp.list, title: '', content: '' })
}
className="inline-flex h-9 items-center gap-2 rounded-full bg-zinc-200 px-3 text-zinc-900 hover:bg-zinc-300 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-700"
className="inline-flex h-9 items-center gap-2 rounded-full bg-neutral-200 px-3 text-neutral-900 hover:bg-neutral-300 dark:bg-neutral-800 dark:text-neutral-100 dark:hover:bg-neutral-700"
>
<PlusIcon className="h-4 w-4 text-white" />
<p className="text-sm font-semibold leading-none">Add widget</p>

50
src/app/space/components/widgetList.tsx
View File

@@ -33,22 +33,34 @@ export function WidgetList({ params }: { params: Widget }) {
(kind: number) => {
switch (kind) {
case WidgetKinds.tmp.xfeed:
return <GroupFeedsIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />;
return (
<GroupFeedsIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
);
case WidgetKinds.local.follows:
return <FollowsIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />;
return (
<FollowsIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
);
case WidgetKinds.local.files:
case WidgetKinds.global.files:
return <FileIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />;
return <FileIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />;
case WidgetKinds.local.articles:
case WidgetKinds.global.articles:
return <ArticleIcon className="h-5 w-5 text-zinc-900 dark:text-zinc-100" />;
return (
<ArticleIcon className="h-5 w-5 text-neutral-900 dark:text-neutral-100" />
);
case WidgetKinds.tmp.xhashtag:
return <HashtagIcon className="h-5 w-4 text-zinc-900 dark:text-zinc-100" />;
return (
<HashtagIcon className="h-5 w-4 text-neutral-900 dark:text-neutral-100" />
);
case WidgetKinds.nostrBand.trendingAccounts:
case WidgetKinds.nostrBand.trendingNotes:
return <TrendingIcon className="h-5 w-4 text-zinc-900 dark:text-zinc-100" />;
return (
<TrendingIcon className="h-5 w-4 text-neutral-900 dark:text-neutral-100" />
);
case WidgetKinds.other.learnNostr:
return <ThreadsIcon className="h-5 w-4 text-zinc-900 dark:text-zinc-100" />;
return (
<ThreadsIcon className="h-5 w-4 text-neutral-900 dark:text-neutral-100" />
);
default:
return null;
}
@@ -60,15 +72,15 @@ export function WidgetList({ params }: { params: Widget }) {
(row: WidgetGroup, index: number) => {
return (
<div key={index} className="flex flex-col gap-2">
<h3 className="text-sm font-semibold text-zinc-500 dark:text-zinc-300">
<h3 className="text-sm font-semibold text-neutral-500 dark:text-neutral-300">
{row.title}
</h3>
<div className="flex flex-col divide-y divide-zinc-200 overflow-hidden rounded-xl bg-zinc-100 dark:divide-zinc-800 dark:bg-zinc-900">
<div className="flex flex-col divide-y divide-neutral-200 overflow-hidden rounded-xl bg-neutral-100 dark:divide-neutral-800 dark:bg-neutral-900">
{row.data.map((item, index) => (
<button
onClick={() => openWidget(item)}
key={index}
className="group flex items-center gap-2.5 px-4 hover:bg-zinc-200 dark:hover:bg-zinc-800"
className="group flex items-center gap-2.5 px-4 hover:bg-neutral-200 dark:hover:bg-neutral-800"
>
{item.icon ? (
<div className="h-10 w-10 shrink-0 rounded-md">
@@ -79,15 +91,15 @@ export function WidgetList({ params }: { params: Widget }) {
/>
</div>
) : (
<div className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-zinc-200 group-hover:bg-zinc-300 dark:bg-zinc-800 dark:group-hover:bg-zinc-700">
<div className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-neutral-200 group-hover:bg-neutral-300 dark:bg-neutral-800 dark:group-hover:bg-neutral-700">
{renderIcon(item.kind)}
</div>
)}
<div className="inline-flex h-16 w-full flex-col items-start justify-center">
<h5 className="line-clamp-1 text-sm font-medium text-zinc-900 dark:text-zinc-100">
<h5 className="line-clamp-1 text-sm font-medium text-neutral-900 dark:text-neutral-100">
{item.title}
</h5>
<p className="line-clamp-1 text-xs text-zinc-500 dark:text-zinc-300">
<p className="line-clamp-1 text-xs text-neutral-500 dark:text-neutral-300">
{item.description}
</p>
</div>
@@ -101,22 +113,22 @@ export function WidgetList({ params }: { params: Widget }) {
);
return (
<div className="h-full w-[420px] border-r border-zinc-100 dark:border-zinc-900">
<div className="h-full w-[420px] border-r border-neutral-100 dark:border-neutral-900">
<TitleBar id={params.id} title="Add widget" />
<div className="scrollbar-none h-full overflow-y-auto pb-20">
<div className="h-full overflow-y-auto pb-20 scrollbar-none">
<div className="flex flex-col gap-6 px-3">
{DefaultWidgets.map((row: WidgetGroup, index: number) =>
renderItem(row, index)
)}
<div className="border-t border-zinc-200 pt-6 dark:border-zinc-800">
<div className="border-t border-neutral-200 pt-6 dark:border-neutral-800">
<button
type="button"
disabled
className="inline-flex h-14 w-full items-center justify-center gap-2.5 rounded-xl bg-zinc-100 text-sm font-medium text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100"
className="inline-flex h-14 w-full items-center justify-center gap-2.5 rounded-xl bg-neutral-100 text-sm font-medium text-neutral-900 dark:bg-neutral-900 dark:text-neutral-100"
>
Build your own widget{' '}
<div className="-rotate-3 transform-gpu rounded-md border border-zinc-300 bg-zinc-200 px-1.5 py-1 dark:border-zinc-700 dark:bg-zinc-800">
<span className="bg-gradient-to-t from-fuchsia-200 via-red-200 to-orange-300 bg-clip-text text-xs text-transparent">
<div className="-rotate-3 transform-gpu rounded-md border border-neutral-300 bg-neutral-200 px-1.5 py-1 dark:border-neutral-700 dark:bg-neutral-800">
<span className="bg-gradient-to-t from-blue-200 via-red-200 to-orange-300 bg-clip-text text-xs text-transparent">
Coming soon
</span>
</div>

4
src/app/space/index.tsx
View File

@@ -86,10 +86,10 @@ export function SpaceScreen() {
return (
<div className="h-full w-full">
<VList className="scrollbar-none h-full w-full" horizontal>
<VList className="h-full w-full scrollbar-none" horizontal>
{!widgets ? (
<div className="flex h-full w-full flex-col items-center justify-center">
<LoaderIcon className="h-5 w-5 animate-spin text-zinc-900 dark:text-zinc-100" />
<LoaderIcon className="h-5 w-5 animate-spin text-neutral-900 dark:text-neutral-100" />
</div>
) : (
widgets.map((widget) => renderItem(widget))