Skip to content

Commit 3195e94

Browse files
zakneslerzaknesler
committed
dark mode wip
1 parent 2ed7e25 commit 3195e94

File tree

10 files changed

+104
-54
lines changed

10 files changed

+104
-54
lines changed

‎ui/src/components/entry/entry-list.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -79,11 +79,11 @@ export const EntryList: Component<EntryListProps> = props => {
7979
<A
8080
data-index={index()}
8181
href={getUrl(entry.uuid)}
82-
activeClass="bg-gray-100"
83-
inactiveClass={cx('hover:bg-gray-100', entry.read_at && 'opacity-50')}
82+
activeClass="bg-gray-100 dark:bg-gray-950"
83+
inactiveClass={cx('hover:bg-gray-100 dark:hover:bg-gray-950', entry.read_at && 'opacity-50')}
8484
class={cx(
85-
'-mx-2 flex flex-col gap-1 rounded-lg p-2 ring-gray-300 transition',
86-
'focus:bg-gray-100 focus:outline-none focus:ring',
85+
'-mx-2 flex flex-col gap-1 rounded-lg p-2 ring-gray-300 transition dark:ring-gray-700',
86+
'focus:bg-gray-100 focus:outline-none focus:ring focus:dark:bg-gray-950',
8787
)}
8888
>
8989
<h4 class="text-base/5 md:text-sm xl:text-base/5">{entry.title}</h4>

‎ui/src/components/entry/entry.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,9 +54,9 @@ export const EntryView: ParentComponent<EntryViewProps> = props => {
5454
innerHTML={local.entry.content_html}
5555
/>
5656
) : (
57-
<div class="flex max-w-xs flex-col items-start gap-2 rounded-lg border border-gray-100 bg-gray-50 p-4">
57+
<div class="flex max-w-xs flex-col items-start gap-2 rounded-lg border border-gray-100 bg-gray-50 p-4 dark:border-gray-800 dark:bg-gray-950">
5858
<p>There is no content for this entry.</p>
59-
<Button size="xs">Try to scrape content</Button>
59+
<Button size="xs">Re-scrape content</Button>
6060
</div>
6161
)}
6262
</article>

‎ui/src/components/feed/feed-context-button.tsx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { Component, mergeProps } from 'solid-js';
2+
import { ContextButton, type ContextButtonProps } from '../ui/context-button';
3+
4+
export const FeedContextButton: Component<ContextButtonProps> = props => {
5+
const local = mergeProps(
6+
{
7+
triggerClass: 'h-5 w-5',
8+
triggerIconClass: 'w-4 h-4 text-gray-500',
9+
},
10+
props,
11+
);
12+
13+
return (
14+
<ContextButton {...local}>
15+
<ContextButton.Item onClick={() => alert('refresh')}>Refresh</ContextButton.Item>
16+
<ContextButton.Item onClick={() => alert('rename')}>Rename</ContextButton.Item>
17+
<ContextButton.Item onClick={() => alert('delete')}>Delete</ContextButton.Item>
18+
</ContextButton>
19+
);
20+
};

‎ui/src/components/feed/feed-info.tsx

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
11
import { createQuery } from '@tanstack/solid-query';
2-
import { Switch, Match, Component } from 'solid-js';
2+
import { Switch, Match, Component, createSignal } from 'solid-js';
33
import { getFeed } from '~/api/feeds';
44
import { QUERY_KEYS } from '~/constants/query';
55
import { FeedHeader } from './feed-header';
6+
import { FeedContextButton } from './feed-context-button';
67

78
type FeedInfoProps = {
89
uuid: string;
910
};
1011

1112
export const FeedInfo: Component<FeedInfoProps> = props => {
13+
const [contextMenuOpen, setContextMenuOpen] = createSignal(false);
14+
1215
const feed = createQuery(() => ({
1316
queryKey: [QUERY_KEYS.FEEDS_VIEW, props.uuid],
1417
queryFn: () => getFeed(props.uuid),
@@ -25,7 +28,16 @@ export const FeedInfo: Component<FeedInfoProps> = props => {
2528
</Match>
2629

2730
<Match when={feed.isSuccess}>
28-
<FeedHeader title={feed.data?.title} subtitle={feed.data?.url_feed} />
31+
<div class="flex w-full items-start justify-between">
32+
<FeedHeader title={feed.data?.title} subtitle={feed.data?.url_feed} />
33+
<FeedContextButton
34+
open={contextMenuOpen()}
35+
setOpen={setContextMenuOpen}
36+
triggerClass="h-6 w-6"
37+
triggerIconClass="w-4 h-4 text-gray-500"
38+
gutter={4}
39+
/>
40+
</div>
2941
</Match>
3042
</Switch>
3143
);

‎ui/src/components/feed/feed-item.tsx

Lines changed: 17 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ import { cx } from 'class-variance-authority';
33
import { HiSolidRss } from 'solid-icons/hi';
44
import { Component, createMemo, createSignal } from 'solid-js';
55
import { Feed } from '~/types/bindings/feed';
6-
import { ContextButton } from '../layout/context-button';
76
import { createQuery } from '@tanstack/solid-query';
87
import { QUERY_KEYS } from '~/constants/query';
98
import { getFeedStats } from '~/api/feeds';
9+
import { FeedContextButton } from './feed-context-button';
1010

1111
type FeedItemProps = {
1212
feed: Feed;
@@ -30,34 +30,28 @@ export const FeedItem: Component<FeedItemProps> = props => {
3030
href={getPath()}
3131
class={cx(
3232
'group -mx-1 flex items-center gap-2 rounded-md border p-1 text-sm no-underline outline-none transition',
33-
'text-gray-600 ring-gray-200',
34-
'hover:border-gray-200 hover:bg-white hover:text-gray-900',
35-
'focus:border-gray-400 focus:ring-2',
36-
'focus-within:border-gray-300 focus-within:bg-white',
37-
isActive() || open() ? 'border-gray-200 bg-white' : 'border-transparent',
33+
'text-gray-600 ring-gray-200 dark:text-gray-300 dark:ring-gray-700',
34+
'hover:border-gray-200 hover:bg-white hover:text-gray-900 dark:hover:border-gray-700 dark:hover:bg-gray-800 dark:hover:text-white',
35+
'focus:border-gray-400 focus:ring-2 dark:focus:border-gray-600',
36+
'focus-within:border-gray-300 focus-within:bg-white dark:focus-within:border-gray-700 dark:focus-within:bg-gray-800',
37+
isActive() || open()
38+
? 'border-gray-200 bg-white text-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:text-white'
39+
: 'border-transparent',
3840
)}
3941
>
40-
<div class="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-gray-400">
41-
<HiSolidRss class="h-4 w-4 text-white" />
42+
<div class="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-gray-400 text-white dark:bg-gray-700 dark:text-gray-400">
43+
<HiSolidRss class="h-4 w-4" />
4244
</div>
4345

4446
<span class="flex-1 overflow-x-hidden truncate">{props.feed.title}</span>
4547

46-
{getStats()?.count_unread && <span class="shrink-0 text-sm text-gray-400">{getStats()?.count_unread}</span>}
47-
48-
<ContextButton
49-
onlyDisplayForGroup
50-
open={open()}
51-
setOpen={setOpen}
52-
shift={-6}
53-
gutter={8}
54-
triggerClass="h-5 w-5"
55-
triggerIconClass="w-4 h-4 text-gray-500"
56-
>
57-
<ContextButton.Item onClick={() => alert('refresh')}>Refresh</ContextButton.Item>
58-
<ContextButton.Item onClick={() => alert('rename')}>Rename</ContextButton.Item>
59-
<ContextButton.Item onClick={() => alert('delete')}>Delete</ContextButton.Item>
60-
</ContextButton>
48+
{getStats()?.count_unread && (
49+
<span class="-mx-1 -my-0.5 shrink-0 rounded-md bg-white px-1 py-0.5 text-xs/4 text-gray-500 dark:bg-gray-800 dark:text-gray-300">
50+
{getStats()?.count_unread}
51+
</span>
52+
)}
53+
54+
<FeedContextButton onlyDisplayForGroup open={open()} setOpen={setOpen} shift={-6} gutter={8} />
6155
</A>
6256
);
6357
};

‎ui/src/components/feed/feed-panel.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export const FeedPanel = () => {
3939
>
4040
<div
4141
class={cx(
42-
'sticky top-0 flex flex-col gap-2 bg-white/25 p-4 backdrop-blur-md',
42+
'sticky top-0 flex flex-col gap-2 bg-white/25 p-4 backdrop-blur-md dark:bg-gray-900/25',
4343
containerScroll.y > 0 && 'z-10 shadow',
4444
)}
4545
>
@@ -50,7 +50,7 @@ export const FeedPanel = () => {
5050
<Tabs
5151
value={getUnreadAsTab()}
5252
onChange={value => setUnreadFromTab(value as Tab)}
53-
class="flex w-full self-stretch rounded-lg bg-gray-200/40 text-xs font-medium text-gray-600 backdrop-blur-sm"
53+
class="flex w-full self-stretch rounded-lg bg-gray-200/40 text-xs font-medium text-gray-600 backdrop-blur-sm dark:bg-gray-400/25 dark:text-white"
5454
>
5555
<Tabs.List class="relative flex w-full -space-x-1">
5656
<For each={TABS}>
@@ -62,8 +62,10 @@ export const FeedPanel = () => {
6262
<div
6363
class={cx(
6464
'w-full rounded-md border border-transparent px-2 py-1.5 transition',
65-
'group-hover:bg-gray-50 group-focus:!border-gray-400 group-focus:ring-[2px] group-focus:ring-gray-200',
65+
'group-hover:bg-gray-50 group-focus:!border-gray-300 group-focus:ring-[2px] group-focus:ring-gray-200',
66+
'dark:group-hover:bg-gray-800 dark:group-focus:!border-gray-600 dark:group-focus:ring-gray-800',
6667
'ui-group-selected:bg-white ui-group-selected:shadow',
68+
'ui-group-selected:shadow ui-group-selected:dark:bg-gray-900',
6769
)}
6870
>
6971
{tab.label}

‎ui/src/components/layout/sidebar.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { type Component, createSignal } from 'solid-js';
22
import { Logo } from './logo';
33
import { CreateFeed } from '../modals/create-feed';
44
import { cx } from 'class-variance-authority';
5-
import { ContextButton } from './context-button';
5+
import { ContextButton } from '../ui/context-button';
66
import { TiCog } from 'solid-icons/ti';
77
import { FeedList } from '../feed/feed-list';
88

‎ui/src/components/layout/context-button.tsx renamed to ‎ui/src/components/ui/context-button.tsx

Lines changed: 26 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,22 @@ import { HiSolidEllipsisHorizontal } from 'solid-icons/hi';
55
import { type JSX, type ParentComponent, type Setter, createSignal, splitProps } from 'solid-js';
66
import { Dynamic } from 'solid-js/web';
77

8-
type ContextButton = Omit<PopoverRootProps, 'open' | 'onOpenChange'> & {
9-
open: boolean;
10-
setOpen: Setter<boolean>;
8+
type SharedContextProps = {
119
forceFocus?: boolean;
12-
triggerIcon?: IconTypes;
13-
returnFocusToTrigger?: boolean;
1410
onlyDisplayForGroup?: boolean;
15-
triggerClass?: string;
16-
triggerIconClass?: string;
1711
};
1812

19-
const ContextButtonRoot: ParentComponent<ContextButton> = props => {
13+
export type ContextButtonProps = Omit<PopoverRootProps, 'open' | 'onOpenChange'> &
14+
SharedContextProps & {
15+
open: boolean;
16+
setOpen: Setter<boolean>;
17+
triggerIcon?: IconTypes;
18+
returnFocusToTrigger?: boolean;
19+
triggerClass?: string;
20+
triggerIconClass?: string;
21+
};
22+
23+
const ContextButtonRoot: ParentComponent<ContextButtonProps> = props => {
2024
const [local, rest] = splitProps(props, [
2125
'children',
2226
'open',
@@ -63,7 +67,12 @@ const ContextButtonRoot: ParentComponent<ContextButton> = props => {
6367

6468
<Popover.Portal>
6569
<Popover.Content
66-
class="z-50 w-28 origin-[--kb-popover-content-transform-origin] animate-contentHide overflow-hidden rounded-md border border-gray-200 bg-white text-gray-600 shadow-sm ui-expanded:animate-contentShow"
70+
class={cx(
71+
'z-50 w-28 overflow-hidden rounded-md border shadow-sm',
72+
'border-gray-200 bg-white text-gray-600',
73+
'dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200',
74+
'origin-[--kb-popover-content-transform-origin] animate-contentHide ui-expanded:animate-contentShow',
75+
)}
6776
onCloseAutoFocus={local.returnFocusToTrigger ? handleReturnFocusToNavItem : undefined}
6877
>
6978
<div class="flex flex-col gap-0.5 p-1 text-sm">{local.children}</div>
@@ -73,10 +82,7 @@ const ContextButtonRoot: ParentComponent<ContextButton> = props => {
7382
);
7483
};
7584

76-
type ActionButtonProps = JSX.IntrinsicElements['button'] & {
77-
onlyDisplayForGroup: boolean;
78-
forceFocus?: boolean;
79-
};
85+
type ActionButtonProps = JSX.IntrinsicElements['button'] & SharedContextProps;
8086

8187
const ActionButton: ParentComponent<ActionButtonProps> = props => {
8288
const [local, rest] = splitProps(props, ['onlyDisplayForGroup', 'forceFocus', 'class']);
@@ -85,12 +91,12 @@ const ActionButton: ParentComponent<ActionButtonProps> = props => {
8591
<button
8692
{...rest}
8793
class={cx(
88-
'flex shrink-0 appearance-none items-center justify-center rounded border border-gray-200 transition',
89-
'focus:border-gray-400 focus:outline-none focus:ring-1 focus:ring-gray-200',
94+
'flex shrink-0 appearance-none items-center justify-center rounded border border-gray-200 transition dark:border-gray-700',
95+
'focus:border-gray-400 focus:outline-none focus:ring-1 focus:ring-gray-200 dark:focus:ring-gray-600',
9096
local.onlyDisplayForGroup && 'opacity-0 focus:opacity-100 group-focus:opacity-100',
9197
local.onlyDisplayForGroup && local.forceFocus
92-
? 'border-gray-500 bg-gray-100 opacity-100 outline-none ring-1 ring-gray-200'
93-
: 'bg-white hover:border-gray-300 hover:bg-gray-100 group-hover:opacity-100',
98+
? 'border-gray-500 bg-gray-100 opacity-100 outline-none ring-1 ring-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:ring-gray-600'
99+
: 'bg-white hover:border-gray-300 hover:bg-gray-100 group-hover:opacity-100 dark:bg-gray-800 dark:hover:border-gray-700 dark:hover:bg-gray-600',
94100
props.class,
95101
)}
96102
>
@@ -116,7 +122,9 @@ const ContextItem: ParentComponent<ContextItemProps> = props => {
116122
{...props}
117123
onClick={event => handleClick(event)}
118124
class={cx(
119-
'appearance-none rounded px-2 py-1 text-left hover:bg-gray-100 focus:bg-gray-100 focus:outline-none active:bg-gray-100',
125+
'appearance-none rounded px-2 py-1 text-left',
126+
'hover:bg-gray-100 focus:bg-gray-100 focus:outline-none active:bg-gray-100',
127+
'dark:hover:bg-gray-700 dark:focus:bg-gray-700 dark:focus:outline-none dark:active:bg-gray-700',
120128
)}
121129
>
122130
{props.children}

‎ui/src/css/app.css

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
@tailwind base;
2+
3+
*::selection {
4+
background: theme("colors.gray.300");
5+
}
6+
7+
@media (prefers-color-scheme: dark) {
8+
*::selection {
9+
background: theme("colors.gray.700");
10+
}
11+
}
12+
13+
@tailwind components;
14+
@tailwind utilities;

‎ui/src/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/solid-query';
22
import { SolidQueryDevtools } from '@tanstack/solid-query-devtools';
33
import { render } from 'solid-js/web';
44
import Router from './router';
5-
import 'tailwindcss/tailwind.css';
5+
import './css/app.css';
66

77
const queryClient = new QueryClient();
88

0 commit comments

Comments
 (0)