Mastodon
/
Whalebird-desktop-client-mac-linux-windows
mirror of https://github.com/h3poteto/whalebird-desktop
1
0
Fork 0
Code Issues Releases Wiki Activity

refs #4887 Adjust dark mode design

This commit is contained in:
AkiraFukushima 2024-03-15 01:12:19 +09:00
parent d058a81be4
commit 82393aee73
No known key found for this signature in database
GPG Key ID: B6E51BAC4DE1A957
15 changed files with 352 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
renderer/app.scss
View File

@ -97,6 +97,19 @@
background-color: rgb(241 245 249);
}
.dark {
.timeline-scrollable::-webkit-scrollbar-thumb {
background-color: #616161;
border-radius: 4px !important;
opacity: 0;
}
.timeline-scrollable::-webkit-scrollbar-track {
border-radius: 4px !important;
background-color: #424242;
}
}
.timeline-scrollable:hover::-webkit-scrollbar-thumb {
opacity: 1;
}
@ -329,3 +342,9 @@ a {
@apply text-blue-gray-600;
}
}
.dark {
a {
@apply text-blue-400;
}
}

1
renderer/components/Jump.tsx
View File

@ -80,6 +80,7 @@ export default function Jump(props: Props) {
value={keyword}
onChange={e => setKeyword(e.target.value)}
size="lg"
color="blue-gray"
label={formatMessage({ id: 'search.placeholder' })}
ref={inputRef}
/>

8
renderer/components/Media.tsx
View File

@ -56,8 +56,8 @@ export default function Media(props: Props) {
<Dialog open={props.open} handler={props.close} size="lg">
<DialogBody className="max-h-full max-w-full">
<div className="flex">
<Button variant="text" onClick={previous} disabled={index < 1}>
<FaChevronLeft />
<Button variant="text" color="teal" onClick={previous} disabled={index < 1}>
<FaChevronLeft className="text-lg" />
</Button>
{props.media[index] && (
<img
@ -68,8 +68,8 @@ export default function Media(props: Props) {
style={{ maxWidth: '85%' }}
/>
)}
<Button variant="text" onClick={next} disabled={index >= props.media.length - 1}>
<FaChevronRight />
<Button variant="text" color="teal" onClick={next} disabled={index >= props.media.length - 1}>
<FaChevronRight className="text-lg" />
</Button>
</div>
</DialogBody>

8
renderer/components/Settings.tsx
View File

@ -124,7 +124,7 @@ export default function Settings(props: Props) {
</Typography>
</div>
<div>
<Input type="number" value={fontSize} onChange={fontSizeChanged} />
<Input type="number" color="blue-gray" value={fontSize} onChange={fontSizeChanged} />
</div>
</div>
<div>
@ -134,7 +134,7 @@ export default function Settings(props: Props) {
</Typography>
</div>
<div>
<Select id="language" onChange={languageChanged} value={language}>
<Select id="language" color="blue-gray" onChange={languageChanged} value={language}>
{languages.map(lang => (
<Option key={lang.value} value={lang.value}>
{lang.label}
@ -152,12 +152,14 @@ export default function Settings(props: Props) {
<div>
<Radio
name="mode"
color="blue"
label={<FormattedMessage id="settings.dark_mode" />}
onClick={() => modeChanged(true)}
defaultChecked={isDark}
/>
<Radio
name="mode"
color="blue"
label={<FormattedMessage id="settings.light_mode" />}
onClick={() => modeChanged(false)}
defaultChecked={!isDark}
@ -171,7 +173,7 @@ export default function Settings(props: Props) {
</Typography>
</div>
<div>
<Select id="theme" onChange={themeChanged} value={theme}>
<Select id="theme" color="blue-gray" onChange={themeChanged} value={theme}>
{themes.map(t => (
<Option key={t.value} value={t.value}>
{t.label}

4
renderer/components/accounts/New.tsx
View File

@ -160,7 +160,7 @@ export default function New(props: NewProps) {
<FormattedMessage id="accounts.new.domain" />
</Typography>
</div>
<Input type="text" id="domain" placeholder="mastodon.social" />
<Input type="text" color="blue-gray" id="domain" placeholder="mastodon.social" />
<Button onClick={checkDomain} loading={loading} color="blue">
<FormattedMessage id="accounts.new.sign_in" />
</Button>
@ -185,7 +185,7 @@ export default function New(props: NewProps) {
<FormattedMessage id="accounts.new.authorization_helper" />
</Typography>
</div>
<Input id="authorization" type="text" />
<Input id="authorization" color="blue-gray" type="text" />
</>
)}

8
renderer/components/compose/Compose.tsx
View File

@ -236,7 +236,7 @@ export default function Compose(props: Props) {
<Input
id="spoiler"
type="text"
color="blue"
color="blue-gray"
containerProps={{ className: 'mb-2' }}
value={spoiler}
onChange={ev => setSpoiler(ev.target.value)}
@ -246,7 +246,7 @@ export default function Compose(props: Props) {
<div className="relative">
<Textarea
id="body"
color="blue"
color="blue-gray"
className="resize-none focus:ring-0"
placeholder={formatMessage({ id: 'compose.placeholder' })}
rows={3}
@ -481,7 +481,7 @@ const PollForm = (props: PollProps) => {
)}
<Input
type="text"
color="blue"
color="blue-gray"
value={option}
onChange={ev => updateOption(index, ev.target.value)}
containerProps={{ className: 'h-8' }}
@ -495,7 +495,7 @@ const PollForm = (props: PollProps) => {
</Button>
<Select
id="expires"
color="blue"
color="blue-gray"
value={`${props.poll.expires_in}`}
onChange={e => changeExpire(parseInt(e))}
containerProps={{ className: 'h-8' }}

2
renderer/components/detail/Detail.tsx
View File

@ -45,7 +45,7 @@ export default function Detail(props: Props) {
return (
<>
{target && (
<div className={`bg-white ${props.className}`} style={props.style}>
<div className={`${props.className}`} style={props.style}>
<div className="theme-bg-secondary text-gray-200 flex justify-between p-2 items-center" style={{ height: '44px' }}>
<div className="flex gap-4 items-center">
<button className="text-lg" title={formatMessage({ id: 'detail.back' })}>

22
renderer/components/detail/Profile.tsx
View File

@ -153,7 +153,7 @@ export default function Profile(props: Props) {
)}
<Popover open={popoverDetail} handler={setPopoverDetail}>
<PopoverHandler>
<IconButton variant="outlined" title={formatMessage({ id: 'profile.detail' })}>
<IconButton variant="outlined" color="teal" title={formatMessage({ id: 'profile.detail' })}>
<FaEllipsisVertical />
</IconButton>
</PopoverHandler>
@ -230,19 +230,25 @@ export default function Profile(props: Props) {
</div>
</div>
<div className="pt-4">
<div className="font-bold" dangerouslySetInnerHTML={{ __html: emojify(user.display_name, user.emojis) }} />
<div className="text-gray-500">@{user.acct}</div>
<div
className="font-bold text-gray-950 dark:text-gray-300"
dangerouslySetInnerHTML={{ __html: emojify(user.display_name, user.emojis) }}
/>
<div className="text-gray-600 dark:text-gray-500">@{user.acct}</div>
<div className="mt-4 raw-html profile" onClick={profileClicked}>
<span
dangerouslySetInnerHTML={{ __html: emojify(user.note, user.emojis) }}
className="overflow-hidden break-all text-gray-800"
className="overflow-hidden break-all text-gray-800 dark:text-gray-400"
/>
</div>
<div className="bg-gray-100 overflow-hidden break-all raw-html mt-2 profile" onClick={profileClicked}>
<div className="bg-gray-100 dark:bg-gray-800 overflow-hidden break-all raw-html mt-2 profile" onClick={profileClicked}>
{user.fields.map((data, index) => (
<dl key={index} className="px-4 py-2 border-gray-200 border-b">
<dt className="text-gray-500">{data.name}</dt>
<dd className="text-gray-700" dangerouslySetInnerHTML={{ __html: emojify(data.value, user.emojis) }} />
<dl key={index} className="px-4 py-2 border-gray-200 dark:border-gray-600 border-b">
<dt className="text-gray-500 dark:text-gray-500">{data.name}</dt>
<dd
className="text-gray-700 dark:text-gray-400"
dangerouslySetInnerHTML={{ __html: emojify(data.value, user.emojis) }}
/>
</dl>
))}
</div>

7
renderer/components/detail/profile/User.tsx
View File

@ -15,13 +15,16 @@ export default function User(props: Props) {
}
return (
<div className="border-b mr-2 py-1">
<div className="border-b border-gray-200 dark:border-gray-700 mr-2 py-1">
<div className="flex" onClick={() => openUser(props.user.id)}>
<div className="p2 cursor-pointer" style={{ width: '56px' }}>
<Avatar src={props.user.avatar} />
</div>
<div>
<p className="text-gray-800" dangerouslySetInnerHTML={{ __html: emojify(props.user.display_name, props.user.emojis) }} />
<p
className="text-gray-800 dark:text-gray-200"
dangerouslySetInnerHTML={{ __html: emojify(props.user.display_name, props.user.emojis) }}
/>
<p className="text-gray-500">@{props.user.acct}</p>
</div>
</div>

2
renderer/components/report/Report.tsx
View File

@ -31,7 +31,7 @@ export default function Report(props: Props) {
<Typography>
<FormattedMessage id="report.detail" />
</Typography>
<Textarea id="comment" rows={4} />
<Textarea id="comment" color="blue-gray" rows={4} />
</div>
<Button className="mt-2" onClick={submit}>
<FormattedMessage id="report.submit" />

16
renderer/components/timelines/notification/Follow.tsx
View File

@ -18,12 +18,16 @@ export default function Follow(props: Props) {
}
return (
<div className="border-b mr-2 py-1">
<div className="border-b border-gray-200 dark:border-gray-800 mr-2 py-1">
<div className="flex items-center">
<div style={{ width: '56px' }}>
<FaUserPlus className="text-blue-600 w-4 mr-2 ml-auto" />
</div>
<div className="cursor-pointer" style={{ width: 'calc(100% - 56px)' }} onClick={() => openUser(props.notification.account.id)}>
<div
className="cursor-pointer text-gray-950 dark:text-gray-300"
style={{ width: 'calc(100% - 56px)' }}
onClick={() => openUser(props.notification.account.id)}
>
<span
dangerouslySetInnerHTML={{
__html: emojify(
@ -52,12 +56,14 @@ export default function Follow(props: Props) {
<div style={{ width: 'calc(100% - 56px)' }}>
<div className="flex cursor-pointer" onClick={() => openUser(props.notification.account.id)}>
<span
className="text-gray-950 text-ellipsis break-all overflow-hidden"
className="text-gray-950 dark:text-gray-300 text-ellipsis break-all overflow-hidden"
dangerouslySetInnerHTML={{ __html: emojify(props.notification.account.display_name, props.notification.account.emojis) }}
></span>
<span className="text-gray-600 text-ellipsis break-all overflow-hidden">@{props.notification.account.acct}</span>
<span className="text-gray-600 dark:text-gray-500 text-ellipsis break-all overflow-hidden">
@{props.notification.account.acct}
</span>
</div>
<div className="text-gray-600">
<div className="text-gray-600 dark:text-gray-500">
<FormattedMessage id="notification.follow.followers" values={{ num: props.notification.account.followers_count }} />
</div>
</div>

18
renderer/components/timelines/notification/Reaction.tsx
View File

@ -38,10 +38,14 @@ export default function Reaction(props: Props) {
}
return (
<div className="border-b mr-2 py-1">
<div className="border-b border-gray-200 dark:border-gray-800 mr-2 py-1">
<div className="flex items-center">
<div style={{ width: '56px' }}>{actionIcon(props.notification)}</div>
<div className="cursor-pointer" style={{ width: 'calc(100% - 56px)' }} onClick={() => openUser(props.notification.account.id)}>
<div
className="cursor-pointer text-gray-950 dark:text-gray-300"
style={{ width: 'calc(100% - 56px)' }}
onClick={() => openUser(props.notification.account.id)}
>
<span
dangerouslySetInnerHTML={{
__html: emojify(
@ -67,20 +71,20 @@ export default function Reaction(props: Props) {
alt={formatMessage({ id: 'timeline.status.avatar' }, { user: status.account.username })}
/>
</div>
<div className="text-gray-600 break-all overflow-hidden" style={{ width: 'calc(100% - 56px)' }}>
<div className="text-gray-600 dark:text-gray-500 break-all overflow-hidden" style={{ width: 'calc(100% - 56px)' }}>
<div className="flex justify-between">
<div className="flex cursor-pointer" onClick={() => openUser(status.account.id)}>
<span
className="text-gray-600 text-ellipsis break-all overflow-hidden"
className="text-ellipsis break-all overflow-hidden"
dangerouslySetInnerHTML={{ __html: emojify(status.account.display_name, status.account.emojis) }}
></span>
<span className="text-gray-600 text-ellipsis break-all overflow-hidden">@{status.account.acct}</span>
<span className="text-ellipsis break-all overflow-hidden">@{status.account.acct}</span>
</div>
<div className="text-gray-600 text-right cursor-pointer" onClick={openStatus}>
<div className="text-right cursor-pointer" onClick={openStatus}>
<time dateTime={status.created_at}>{dayjs(status.created_at).format('YYYY-MM-DD HH:mm:ss')}</time>
</div>
</div>
<Body status={status} className="text-gray-600" spoilered={spoilered} setSpoilered={setSpoilered} />
<Body status={status} className="text-gray-600 dark:text-gray-500" spoilered={spoilered} setSpoilered={setSpoilered} />
{!spoilered && (
<>
{status.poll && <Poll poll={status.poll} onRefresh={refresh} client={props.client} className="text-gray-600" />}

6
renderer/components/timelines/status/Poll.tsx
View File

@ -42,7 +42,7 @@ function SimplePoll(props: Props) {
</div>
))}
<div className="flex gap-2 items-center mt-2">
<Button size="sm" onClick={vote} variant="outlined">
<Button size="sm" color="teal" onClick={vote} variant="outlined">
<FormattedMessage id="timeline.status.poll.vote" />
</Button>
<div>
@ -79,7 +79,7 @@ function MultiplePoll(props: Props) {
</div>
))}
<div className="flex gap-2 items-center mt-2">
<Button size="sm" onClick={vote} variant="outlined">
<Button size="sm" color="teal" onClick={vote} variant="outlined">
<FormattedMessage id="timeline.status.poll.vote" />
</Button>
<div>
@ -104,7 +104,7 @@ function PollResult(props: Props) {
</div>
))}
<div className="flex gap-2 items-center mt-2">
<Button size="sm" onClick={props.onRefresh} variant="outlined">
<Button size="sm" color="teal" onClick={props.onRefresh} variant="outlined">
<FormattedMessage id="timeline.status.poll.refresh" />
</Button>
<div>

2
renderer/components/timelines/status/Status.tsx
View File

@ -79,7 +79,7 @@ export default function Status(props: Props) {
props.filters.map(f => f.phrase).filter(keyword => props.status.content.toLowerCase().includes(keyword.toLowerCase())).length > 0
) {
return (
<div className="border-b border-gray-200 dark:border-gray-800 mr-2 py-2 text-center">
<div className="border-b border-gray-200 dark:border-gray-800 text-gray-950 dark:text-gray-300 mr-2 py-2 text-center">
<FormattedMessage id="timeline.status.filtered" />
<span className="theme-text-subtle cursor-pointer pl-4" onClick={() => setIgnoreFilter(true)}>
<FormattedMessage id="timeline.status.show_anyway" />

273
renderer/pages/_app.tsx
View File

@ -13,7 +13,10 @@ export default function MyApp({ Component, pageProps }: AppProps) {
popover: {
styles: {
base: {
p: 'p-0'
bg: 'bg-white dark:bg-gray-900',
p: 'p-0',
border: 'border border-blue-gray-50 dark:border-blue-gray-800',
boxShadow: 'shadow-lg shadow-blue-gray-500/10 dark:shadow-blue-gray-200/10'
}
}
},
@ -23,8 +26,12 @@ export default function MyApp({ Component, pageProps }: AppProps) {
outlined: {
base: {
input: {
borderWidth: 'placeholder-shown:border dark:placeholder-shown:border',
borderColor:
'placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 dark:placeholder-shown:border-blue-gray-700 dark:placeholder-shown:border-t-blue-gray-700',
floated: {
borderWidth: 'border focus:border'
borderWidth: 'border focus:border dark:focus:border',
borderColor: 'border-t-transparent focus:border-t-transparent dark:border-t-transparent dark:focus:border-t-transparent'
}
},
label: {
@ -41,6 +48,15 @@ export default function MyApp({ Component, pageProps }: AppProps) {
}
}
}
},
colors: {
input: {
'blue-gray': {
color: 'text-blue-gray-900 dark:text-white',
borderColor: 'border-blue-gray-200',
borderColorFocused: 'focus:border-blue-gray-500 dark:focus:border-blue-gray-500'
}
}
}
}
}
@ -52,8 +68,12 @@ export default function MyApp({ Component, pageProps }: AppProps) {
outlined: {
base: {
textarea: {
borderWidth: 'placeholder-shown:border dark:placeholder-shown:border',
borderColor:
'placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 dark:placeholder-shown:border-blue-gray-700 dark:placeholder-shown:border-t-blue-gray-700',
floated: {
borderWidth: 'border focus:border'
borderWidth: 'border focus:border dark:focus:border',
borderColor: 'border-t-transparent focus:border-t-transparent dark:border-t-transparent dark:focus:border-t-transparent'
}
},
label: {
@ -70,6 +90,15 @@ export default function MyApp({ Component, pageProps }: AppProps) {
}
}
}
},
colors: {
textarea: {
'blue-gray': {
color: 'text-blue-gray-900 dark:text-white',
borderColor: 'border-blue-gray-200',
borderColorFocused: 'focus:border-blue-gray-500 dark:focus:border-blue-gray-500'
}
}
}
}
}
@ -77,6 +106,15 @@ export default function MyApp({ Component, pageProps }: AppProps) {
},
select: {
styles: {
base: {
select: {
color: 'text-blue-gray-700 dark:text-blue-gray-200'
},
menu: {
bg: 'bg-white dark:bg-gray-900',
border: 'border border-blue-gray-50 dark:border-blue-gray-800'
}
},
variants: {
outlined: {
states: {
@ -99,6 +137,235 @@ export default function MyApp({ Component, pageProps }: AppProps) {
}
}
}
},
radio: {
styles: {
base: {
label: {
color: 'text-gray-700 dark:text-gray-400'
}
}
}
},
dialog: {
styles: {
base: {
container: {
bg: 'bg-white dark:bg-gray-900',
color: 'text-blue-gray-500 dark:text-blue-gray-400'
}
}
}
},
dialogHeader: {
styles: {
base: {
color: 'text-blue-gray-900 dark:text-blue-gray-100'
}
}
},
dialogBody: {
defaultProps: {
className: '',
divider: false
},
styles: {
base: {
initial: {
color: 'text-blue-gray-500 dark:text-blue-gray-300'
}
}
}
},
list: {
styles: {
base: {
list: {
color: 'text-blue-gray-700 dark:text-blue-gray-300'
},
item: {
selected: {
color: 'text-blue-gray-700 dark:text-blue-gray-900'
}
}
}
}
},
button: {
styles: {
variants: {
outlined: {
white: {
focus: 'focus:ring-0'
},
'blue-gray': {
focus: 'focus:ring-0'
},
gray: {
focus: 'focus:ring-0'
},
brown: {
focus: 'focus:ring-0'
},
'deep-orange': {
focus: 'focus:ring-0'
},
orange: {
focus: 'focus:ring-0'
},
amber: {
focus: 'focus:ring-0'
},
yellow: {
focus: 'focus:ring-0'
},
lime: {
focus: 'focus:ring-0'
},
'light-green': {
focus: 'focus:ring-0'
},
green: {
focus: 'focus:ring-0'
},
teal: {
focus: 'focus:ring-0'
},
cyan: {
focus: 'focus:ring-0'
},
'light-blue': {
focus: 'focus:ring-0'
},
blue: {
focus: 'focus:ring-0'
},
indigo: {
focus: 'focus:ring-0'
},
'deep-purple': {
focus: 'focus:ring-0'
},
purple: {
focus: 'focus:ring-0'
},
pink: {
focus: 'focus:ring-0'
},
red: {
focus: 'focus:ring-0'
}
}
}
}
},
iconButton: {
styles: {
variants: {
outlined: {
white: {
focus: 'focus:ring-0'
},
'blue-gray': {
focus: 'focus:ring-0'
},
gray: {
focus: 'focus:ring-0'
},
brown: {
focus: 'focus:ring-0'
},
'deep-orange': {
focus: 'focus:ring-0'
},
orange: {
focus: 'focus:ring-0'
},
amber: {
focus: 'focus:ring-0'
},
yellow: {
focus: 'focus:ring-0'
},
lime: {
focus: 'focus:ring-0'
},
'light-green': {
focus: 'focus:ring-0'
},
green: {
focus: 'focus:ring-0'
},
teal: {
focus: 'focus:ring-0'
},
cyan: {
focus: 'focus:ring-0'
},
'light-blue': {
focus: 'focus:ring-0'
},
blue: {
focus: 'focus:ring-0'
},
indigo: {
focus: 'focus:ring-0'
},
'deep-purple': {
focus: 'focus:ring-0'
},
purple: {
focus: 'focus:ring-0'
},
pink: {
focus: 'focus:ring-0'
},
red: {
focus: 'focus:ring-0'
}
}
}
}
},
progress: {
styles: {
base: {
container: {
initial: {
bg: 'bg-blue-gray-50 dark:bg-blue-gray-800'
}
}
}
}
},
tabsHeader: {
defaultProps: {
className: ''
},
styles: {
base: {
bg: 'bg-blue-gray-50 dark:bg-blue-gray-800'
}
}
},
tab: {
defaultProps: {
className: '',
activeClassName: '',
disabled: false
},
styles: {
base: {
tab: {
initial: {
color: 'text-blue-gray-900 dark:text-blue-gray-200'
}
},
indicator: {
bg: 'bg-white dark:bg-gray-700'
}
}
}
}
}