diff --git a/assets/icons/bubbleQuestion_stroke2_corner0_rounded.svg b/assets/icons/bubbleQuestion_stroke2_corner0_rounded.svg new file mode 100644 index 0000000000..0bfcc48a0e --- /dev/null +++ b/assets/icons/bubbleQuestion_stroke2_corner0_rounded.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/filter_stroke2_corner0_rounded.svg b/assets/icons/filter_stroke2_corner0_rounded.svg new file mode 100644 index 0000000000..1fbcfc5711 --- /dev/null +++ b/assets/icons/filter_stroke2_corner0_rounded.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/speakerVolumeFull_stroke2_corner0_rounded.svg b/assets/icons/speakerVolumeFull_stroke2_corner0_rounded.svg new file mode 100644 index 0000000000..81357a12e3 --- /dev/null +++ b/assets/icons/speakerVolumeFull_stroke2_corner0_rounded.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/trash_stroke2_corner0_rounded.svg b/assets/icons/trash_stroke2_corner0_rounded.svg new file mode 100644 index 0000000000..d4b32f81fe --- /dev/null +++ b/assets/icons/trash_stroke2_corner0_rounded.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/warning_stroke2_corner0_rounded.svg b/assets/icons/warning_stroke2_corner0_rounded.svg new file mode 100644 index 0000000000..d5b6f13d5f --- /dev/null +++ b/assets/icons/warning_stroke2_corner0_rounded.svg @@ -0,0 +1 @@ + diff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html index 55447552ea..c7c5ec0f0b 100644 --- a/bskyweb/templates/base.html +++ b/bskyweb/templates/base.html @@ -43,6 +43,9 @@ height: calc(100% + env(safe-area-inset-top)); scrollbar-gutter: stable both-edges; } + html, body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + } /* Buttons and inputs have a font set by UA, so we'll have to reset that */ button, input, textarea { diff --git a/src/components/Button.tsx b/src/components/Button.tsx index 3dff417793..a8805c9c24 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -27,7 +27,7 @@ export type ButtonColor = | 'gradient_sunset' | 'gradient_nordic' | 'gradient_bonfire' -export type ButtonSize = 'tiny' | 'small' | 'large' +export type ButtonSize = 'tiny' | 'small' | 'medium' | 'large' export type ButtonShape = 'round' | 'square' | 'default' export type VariantProps = { /** @@ -274,6 +274,8 @@ export function Button({ if (shape === 'default') { if (size === 'large') { baseStyles.push({paddingVertical: 15}, a.px_2xl, a.rounded_sm, a.gap_md) + } else if (size === 'medium') { + baseStyles.push({paddingVertical: 12}, a.px_2xl, a.rounded_sm, a.gap_md) } else if (size === 'small') { baseStyles.push({paddingVertical: 9}, a.px_lg, a.rounded_sm, a.gap_sm) } else if (size === 'tiny') { diff --git a/src/components/Dialog/context.ts b/src/components/Dialog/context.ts index 9b571e8e9c..859f8edd77 100644 --- a/src/components/Dialog/context.ts +++ b/src/components/Dialog/context.ts @@ -21,8 +21,7 @@ export function useDialogControl(): DialogOuterProps['control'] { open: () => {}, close: () => {}, }) - const {activeDialogs, openDialogs} = useDialogStateContext() - const isOpen = openDialogs.includes(id) + const {activeDialogs} = useDialogStateContext() React.useEffect(() => { activeDialogs.current.set(id, control) @@ -36,7 +35,6 @@ export function useDialogControl(): DialogOuterProps['control'] { () => ({ id, ref: control, - isOpen, open: () => { control.current.open() }, @@ -44,6 +42,6 @@ export function useDialogControl(): DialogOuterProps['control'] { control.current.close(cb) }, }), - [id, control, isOpen], + [id, control], ) } diff --git a/src/components/Dialog/types.ts b/src/components/Dialog/types.ts index fa9398fe05..4fc60ec394 100644 --- a/src/components/Dialog/types.ts +++ b/src/components/Dialog/types.ts @@ -22,7 +22,7 @@ export type DialogControlRefProps = { export type DialogControlProps = DialogControlRefProps & { id: string ref: React.RefObject - isOpen: boolean + isOpen?: boolean } export type DialogContextProps = { diff --git a/src/components/Menu/index.web.tsx b/src/components/Menu/index.web.tsx index ca2e40566d..054e51b01e 100644 --- a/src/components/Menu/index.web.tsx +++ b/src/components/Menu/index.web.tsx @@ -92,10 +92,8 @@ export function Trigger({children, label, style}: TriggerProps) { accessibilityLabel={label} onFocus={onFocus} onBlur={onBlur} - style={flatten([style, web({outline: 0})])} - onPointerDown={() => { - control.open() - }} + style={flatten([style, focused && web({outline: 0})])} + onPointerDown={() => control.open()} {...web({ onMouseEnter, onMouseLeave, @@ -131,6 +129,7 @@ export function Outer({children}: React.PropsWithChildren<{}>) { {children} + {/* Disabled until we can fix positioning ) { .backgroundColor } /> + */} ) diff --git a/src/components/Prompt.tsx b/src/components/Prompt.tsx index 8e55bd8347..3b245c440f 100644 --- a/src/components/Prompt.tsx +++ b/src/components/Prompt.tsx @@ -3,7 +3,7 @@ import {View, PressableProps} from 'react-native' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {useTheme, atoms as a} from '#/alf' +import {useTheme, atoms as a, useBreakpoints} from '#/alf' import {Text} from '#/components/Typography' import {Button} from '#/components/Button' @@ -25,6 +25,7 @@ export function Outer({ }: React.PropsWithChildren<{ control: Dialog.DialogOuterProps['control'] }>) { + const {gtMobile} = useBreakpoints() const titleId = React.useId() const descriptionId = React.useId() @@ -38,12 +39,12 @@ export function Outer({ - + style={[gtMobile ? {width: 'auto', maxWidth: 400} : a.w_full]}> {children} - + ) @@ -71,8 +72,16 @@ export function Description({children}: React.PropsWithChildren<{}>) { } export function Actions({children}: React.PropsWithChildren<{}>) { + const {gtMobile} = useBreakpoints() + return ( - + {children} ) @@ -82,12 +91,13 @@ export function Cancel({ children, }: React.PropsWithChildren<{onPress?: PressableProps['onPress']}>) { const {_} = useLingui() + const {gtMobile} = useBreakpoints() const {close} = Dialog.useDialogContext() return (