Samuel Newman
c8f264b78b
* start building storybook * add title * add some styles * try out new icons * more settings list component parts * make text do the spacing * clean up storybook * gated new settings screen * switch account * add current profile * use Layout.Screen * Layout.Header and Layout.Content * translate helpdesk text thanks @surfdude29! Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * add account settings * undo changes to export car dialog * privacy and security screen * Translate protect account stuff Thanks @surfdude29! Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * content and media settings * about settings * 2fa copy Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * a11y and appearance * use new components for appearance settings * redesign accessibility settings * Update ContentAndMediaSettings.tsx Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * add divider * remove a11y and appearance middleman screen * fix web settingslist styles * new SettingsList.Group component * explain how portal magic works * hide pwioptout in old location * Update Settings.tsx Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * replace gate with `IS_INTERNAL` * add IS_INTERNAL to app-info.web * fix profile area growing * add close button to switch account --------- Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>
Application Layout Framework (ALF)
A set of UI primitives and components.
Usage
Naming conventions follow Tailwind — delimited with a _ instead of - to
enable object access — with a couple exceptions:
Spacing
Uses "t-shirt" sizes xxs, xs, sm, md, lg, xl and xxl instead of
increments of 4px. We only use a few common spacings, and otherwise typically
rely on many one-off values.
Text Size
Uses "t-shirt" sizes xxs, xs, sm, md, lg, xl and xxl to match our
type scale.
Line Height
The text size atoms also apply a line-height with the same value as the size,
for a 1:1 ratio. tight and normal are retained for use in the few places
where we need leading.
Atoms
An (mostly-complete) set of style definitions that match Tailwind CSS selectors. These are static and reused throughout the app.
import { atoms } from '#/alf'
<View style={[atoms.flex_row]} />
Theme
Any values that rely on the theme, namely colors.
const t = useTheme()
<View style={[atoms.flex_row, t.atoms.bg]} />
Breakpoints
const b = useBreakpoints()
if (b.gtMobile) {
// render tablet or desktop UI
}