diff --git a/public/brand/dewee-mascot.png b/public/brand/dewee-mascot.png new file mode 100644 index 0000000..8e762c5 Binary files /dev/null and b/public/brand/dewee-mascot.png differ diff --git a/public/fonts/NOTICE.txt b/public/fonts/NOTICE.txt new file mode 100644 index 0000000..2504390 --- /dev/null +++ b/public/fonts/NOTICE.txt @@ -0,0 +1,8 @@ +Fonts bundled with the Dewee extension, the same families dewee.sh uses. +Each is licensed under the SIL Open Font License, Version 1.1 (https://openfontlicense.org). + +Be Vietnam Pro Copyright 2021 The Be Vietnam Pro Project Authors (https://github.com/bettergui/BeVietnamPro) +Newsreader Copyright 2020 The Newsreader Project Authors (https://github.com/productiontype/Newsreader) +JetBrains Mono Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono) + +The files are the Vietnamese, Latin Extended and Latin subsets served by Google Fonts. diff --git a/public/fonts/be-vietnam-pro-400-latin-ext.woff2 b/public/fonts/be-vietnam-pro-400-latin-ext.woff2 new file mode 100644 index 0000000..d0bf419 Binary files /dev/null and b/public/fonts/be-vietnam-pro-400-latin-ext.woff2 differ diff --git a/public/fonts/be-vietnam-pro-400-latin.woff2 b/public/fonts/be-vietnam-pro-400-latin.woff2 new file mode 100644 index 0000000..57e52bd Binary files /dev/null and b/public/fonts/be-vietnam-pro-400-latin.woff2 differ diff --git a/public/fonts/be-vietnam-pro-400-vietnamese.woff2 b/public/fonts/be-vietnam-pro-400-vietnamese.woff2 new file mode 100644 index 0000000..b3556b9 Binary files /dev/null and b/public/fonts/be-vietnam-pro-400-vietnamese.woff2 differ diff --git a/public/fonts/be-vietnam-pro-500-latin-ext.woff2 b/public/fonts/be-vietnam-pro-500-latin-ext.woff2 new file mode 100644 index 0000000..84ac3a1 Binary files /dev/null and b/public/fonts/be-vietnam-pro-500-latin-ext.woff2 differ diff --git a/public/fonts/be-vietnam-pro-500-latin.woff2 b/public/fonts/be-vietnam-pro-500-latin.woff2 new file mode 100644 index 0000000..75b8c25 Binary files /dev/null and b/public/fonts/be-vietnam-pro-500-latin.woff2 differ diff --git a/public/fonts/be-vietnam-pro-500-vietnamese.woff2 b/public/fonts/be-vietnam-pro-500-vietnamese.woff2 new file mode 100644 index 0000000..eb0d4bb Binary files /dev/null and b/public/fonts/be-vietnam-pro-500-vietnamese.woff2 differ diff --git a/public/fonts/be-vietnam-pro-600-latin-ext.woff2 b/public/fonts/be-vietnam-pro-600-latin-ext.woff2 new file mode 100644 index 0000000..023ccd6 Binary files /dev/null and b/public/fonts/be-vietnam-pro-600-latin-ext.woff2 differ diff --git a/public/fonts/be-vietnam-pro-600-latin.woff2 b/public/fonts/be-vietnam-pro-600-latin.woff2 new file mode 100644 index 0000000..2133e28 Binary files /dev/null and b/public/fonts/be-vietnam-pro-600-latin.woff2 differ diff --git a/public/fonts/be-vietnam-pro-600-vietnamese.woff2 b/public/fonts/be-vietnam-pro-600-vietnamese.woff2 new file mode 100644 index 0000000..07dc6e5 Binary files /dev/null and b/public/fonts/be-vietnam-pro-600-vietnamese.woff2 differ diff --git a/public/fonts/jetbrains-mono-400-latin.woff2 b/public/fonts/jetbrains-mono-400-latin.woff2 new file mode 100644 index 0000000..2ca6ac6 Binary files /dev/null and b/public/fonts/jetbrains-mono-400-latin.woff2 differ diff --git a/public/fonts/jetbrains-mono-400-vietnamese.woff2 b/public/fonts/jetbrains-mono-400-vietnamese.woff2 new file mode 100644 index 0000000..d37ea35 Binary files /dev/null and b/public/fonts/jetbrains-mono-400-vietnamese.woff2 differ diff --git a/public/fonts/newsreader-latin-ext.woff2 b/public/fonts/newsreader-latin-ext.woff2 new file mode 100644 index 0000000..f8ff740 Binary files /dev/null and b/public/fonts/newsreader-latin-ext.woff2 differ diff --git a/public/fonts/newsreader-latin.woff2 b/public/fonts/newsreader-latin.woff2 new file mode 100644 index 0000000..002e479 Binary files /dev/null and b/public/fonts/newsreader-latin.woff2 differ diff --git a/public/fonts/newsreader-vietnamese.woff2 b/public/fonts/newsreader-vietnamese.woff2 new file mode 100644 index 0000000..07dbd8b Binary files /dev/null and b/public/fonts/newsreader-vietnamese.woff2 differ diff --git a/public/icons/128.png b/public/icons/128.png index 89ffdbb..24cd532 100644 Binary files a/public/icons/128.png and b/public/icons/128.png differ diff --git a/public/icons/16.png b/public/icons/16.png index fcee3bf..0b31140 100644 Binary files a/public/icons/16.png and b/public/icons/16.png differ diff --git a/public/icons/32.png b/public/icons/32.png index 009219f..2eb0eff 100644 Binary files a/public/icons/32.png and b/public/icons/32.png differ diff --git a/public/icons/48.png b/public/icons/48.png index 02330f7..5d669dc 100644 Binary files a/public/icons/48.png and b/public/icons/48.png differ diff --git a/public/patterns/dong-son-drum-dark.svg b/public/patterns/dong-son-drum-dark.svg new file mode 100644 index 0000000..93919a7 --- /dev/null +++ b/public/patterns/dong-son-drum-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/patterns/dong-son-drum-light.svg b/public/patterns/dong-son-drum-light.svg new file mode 100644 index 0000000..a3324f2 --- /dev/null +++ b/public/patterns/dong-son-drum-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/patterns/dong-son-tile-dark.svg b/public/patterns/dong-son-tile-dark.svg new file mode 100644 index 0000000..a1d4692 --- /dev/null +++ b/public/patterns/dong-son-tile-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/patterns/dong-son-tile-light.svg b/public/patterns/dong-son-tile-light.svg new file mode 100644 index 0000000..87346fa --- /dev/null +++ b/public/patterns/dong-son-tile-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/credentials/ActionCard.tsx b/src/credentials/ActionCard.tsx index 893ce8d..d0f263c 100644 --- a/src/credentials/ActionCard.tsx +++ b/src/credentials/ActionCard.tsx @@ -6,6 +6,7 @@ import { useState } from 'react'; import { isUiActionOpen, type UiActionCard, type UiActionPayloadByKind } from '@/protocol/ui-action'; import { errorText, useI18n } from '@/shared/i18n'; +import { IconExternal } from '@/shared/icons'; import { CredentialsForm } from './CredentialsForm'; import type { RespondFn } from './respond-types'; @@ -112,7 +113,7 @@ function OAuthCard({ card, respond, deweeUrl }: CardProps & { card: Extract {deweeUrl ? ( - {t('oauth.openDewee')} + {t('oauth.openDewee')} ) : null} {adding ? ( @@ -110,7 +118,7 @@ export function Settings() {

{t('settings.preferences')}

-
+
-

{t('settings.privacy')}

+

+ + {t('settings.privacy')} +

diff --git a/src/options/options.css b/src/options/options.css index 660b5e3..8b7b2cc 100644 --- a/src/options/options.css +++ b/src/options/options.css @@ -1,54 +1,149 @@ @import '../shared/components.css'; +/* The drum relief rises from the top-right corner of the settings page. */ +body { + background-image: var(--drum-face); + background-repeat: no-repeat; + background-size: 520px; + background-position: right -260px top -260px; +} + .options { - max-width: 720px; + max-width: 680px; margin: 0 auto; - padding: 24px 16px 48px; + padding: 40px 20px 64px; display: grid; - gap: 24px; + gap: 32px; +} +.options-head { + display: flex; + align-items: center; + gap: 12px; } .options h1 { margin: 0; - font-size: 22px; + font-family: var(--font-display-stack); + font-size: 28px; + font-weight: 500; + line-height: 1.15; + letter-spacing: var(--tracking-display); } .options h2 { - margin: 0 0 10px; - font-size: 16px; + display: flex; + align-items: center; + gap: var(--space-2); + margin: 0 0 12px; + font: 400 11px/1.4 var(--font-mono-stack); + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--accent-ink); +} +.options h2::before { + content: ''; + width: 14px; + height: 1px; + background: currentColor; +} +.options section { + display: grid; } .section-head { display: flex; justify-content: space-between; align-items: center; + margin-bottom: 12px; +} +.section-head h2 { + margin: 0; } .panel { - padding: 14px; + padding: 16px; margin-bottom: 12px; - border: 1px solid var(--hairline); - border-radius: var(--radius); - background: var(--paper-2); + border: 1px solid var(--rule); + border-radius: var(--radius-3); + background: var(--surface); + box-shadow: var(--shadow-1); } .profile-list { list-style: none; margin: 0; padding: 0; - display: grid; - gap: 8px; + border: 1px solid var(--rule); + border-radius: var(--radius-3); + background: var(--surface); + box-shadow: var(--shadow-1); + overflow: hidden; +} +.profile-list:empty { + display: none; } .profile-row { display: grid; - gap: 10px; - padding: 12px; - border: 1px solid var(--hairline); - border-radius: var(--radius); - background: var(--paper-2); + grid-template-columns: minmax(0, 1fr) auto; + align-items: center; + gap: 12px 16px; + padding: 14px 16px; +} +.profile-row + .profile-row { + border-top: 1px solid var(--rule); +} +.profile-row > .connect-form { + grid-column: 1 / -1; + padding-top: 12px; + border-top: 1px dashed var(--rule); +} +.profile-main { + display: grid; + gap: 2px; + min-width: 0; +} +.profile-title { + display: flex; + align-items: center; + gap: 8px; + min-width: 0; +} +.profile-title .badge { + margin-left: 0; +} +.conn-dot { + width: 7px; + height: 7px; + flex: none; + border-radius: 50%; + background: var(--rule-strong); +} +.conn-dot.on { + background: var(--success); + box-shadow: 0 0 0 3px var(--success-soft); } .profile-actions { display: flex; flex-wrap: wrap; + justify-content: flex-end; gap: 6px; } .prefs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 12px; + gap: 14px; +} +.privacy { + display: flex; + align-items: flex-start; + gap: 8px; + margin: 4px 2px 0; +} +.privacy svg { + flex: none; + margin-top: 3px; +} + +@media (max-width: 520px) { + .profile-row { + grid-template-columns: minmax(0, 1fr); + } + .profile-actions { + justify-content: flex-start; + } } diff --git a/src/shared/ConnectForm.tsx b/src/shared/ConnectForm.tsx index cd046e6..87b793b 100644 --- a/src/shared/ConnectForm.tsx +++ b/src/shared/ConnectForm.tsx @@ -74,7 +74,7 @@ export function ConnectForm({ reconnect, onDone }: { reconnect?: Profile; onDone ))} )} -

{mode === 'cloud' ? t('connect.cloudHint') : t('connect.selfHostedHint')}

+

{mode === 'cloud' ? t('connect.cloudHint') : t('connect.selfHostedHint')}

{reconnect ? null : (