Settings rail: 'You' becomes 'Personal', a rule under each heading, About set apart by a rule above (#327)
Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
This commit is contained in:
@@ -9842,7 +9842,7 @@ video.lightbox-media {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
margin-bottom: var(--spacing-s);
|
||||
margin-bottom: var(--spacing-m);
|
||||
padding: 0 var(--spacing-s);
|
||||
height: 32px;
|
||||
border: 1px solid var(--outline-medium);
|
||||
@@ -9873,7 +9873,10 @@ video.lightbox-media {
|
||||
}
|
||||
|
||||
.settings-rail-heading {
|
||||
padding: var(--spacing-xs) var(--spacing-s) 0;
|
||||
/* A rule under each heading, so the sections read as sections. */
|
||||
margin-bottom: var(--spacing-xxs);
|
||||
padding: var(--spacing-xs) var(--spacing-s);
|
||||
border-bottom: 1px solid var(--outline-medium);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: var(--weight-bold);
|
||||
letter-spacing: 0.06em;
|
||||
@@ -10127,3 +10130,11 @@ html[data-reduce-motion] *::after {
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
||||
/* About on its own, set off from the rest by a rule above it. */
|
||||
.settings-rail-group.apart {
|
||||
margin-top: var(--spacing-s);
|
||||
padding-top: var(--spacing-s);
|
||||
border-top: 1px solid var(--outline-medium);
|
||||
}
|
||||
|
||||
@@ -111,9 +111,9 @@ function GlobalHighlightKeywords(): JSX.Element {
|
||||
* regardless.
|
||||
*/
|
||||
const CATEGORIES: { id: string; label: string; group: string; icon?: string; service?: Account['service'] }[] = [
|
||||
// You: the two things that are about you rather than about the app.
|
||||
{ id: 'accounts', label: 'Accounts', group: 'You', icon: 'manage_accounts' },
|
||||
{ id: 'downloads', label: 'Downloads', group: 'You', icon: 'download' },
|
||||
// Personal: the two things that are about you rather than about the app.
|
||||
{ id: 'accounts', label: 'Accounts', group: 'Personal', icon: 'manage_accounts' },
|
||||
{ id: 'downloads', label: 'Downloads', group: 'Personal', icon: 'download' },
|
||||
// The app itself.
|
||||
{ id: 'general', label: 'General', group: 'App' },
|
||||
{ id: 'appearance', label: 'Appearance', group: 'App' },
|
||||
@@ -333,7 +333,7 @@ export function SettingsPanel({ page = 'settings' }: { page?: 'settings' | 'acco
|
||||
)}
|
||||
</label>
|
||||
{groups.map((group) => (
|
||||
<div key={group} className="settings-rail-group">
|
||||
<div key={group} className={`settings-rail-group${group === 'About' ? ' apart' : ''}`}>
|
||||
{group !== 'About' && <div className="settings-rail-heading small muted">{group}</div>}
|
||||
{shown
|
||||
.filter((c) => c.group === group)
|
||||
|
||||
Reference in New Issue
Block a user