From 3371038f7d8b740f2415d3a54dc99b69e0598042 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Thu, 25 Jan 2024 22:22:40 -0600 Subject: New Onboarding (#2596) * Add round and square buttons * Allow some style for buttons, add icons * Change text selection color * Center button text, whoops * Outer layout, some primitive updates * WIP * onboarding feed prefs (#2590) * add `style` to toggle label to modify text style * Revert "add `style` to toggle label to modify text style" This reverts commit 8f4b517b8585ca64a4bf44f6cb40ac070ece8932. * following feed prefs * remove unnecessary memo * reusable divider component * org imports * add finished screen * Theme SelectedAccountCard * Require at least 3 interests * Placeholder save logic * WIP algo feeds * Improve lineHeight handling, add RichText, improve Link by adding InlineLink * Inherit lineHeight in heading comps * Algo feeds mostly good * Topical feeds ish * Layout cleanup * Improve button styles * moderation prefs for onboarding (#2594) * WIP algo feeds * modify controlalbelgroup typing for easy .map() * adjust padding on button * add moderation screen * add moderation screen * add moderation screen --------- Co-authored-by: Eric Bailey * Fix toggle button styles * A11y props on outer portal * Put it all on red * New data shape * Handle mock data * Bulk write (not yet) * Remove interests validation * Clean up interests * i18n layout and first step * Clean up suggested follows screen * Clean up following step * Clean up algo feeds step * Clean up topical feeds * Add skeleton for feed card * WIP moderation step * cleanup moderation styles (#2605) * cleanup moderation styles * fix(?) toggle button group styles * adjust toggle to fit any screen * Some more cleanup * Icons * ToggleButton tweaks * Reset * Hook up data * Better suggestions * Bulk write * Some logging * Use new api * Concat topical feeds * Metrics * Disable links in RichText, feedcards * Tweak primary feed cards * Update metrics * Fix layout shift * Fix ToggleButton again, whoops * Error state * Bump api package, ensure interests are saved * Better fix for autofill * i18n, button positions * Remove unused export * Add default prefs object * Fix overflow in user cards * Add 2 lines of bios to suggested accounts cards * Nits * Don't resolve facets by default * Update storybook * Disable flag for now * Remove age dialog from moderations step * Improvements and tweaks to new onboarding --------- Co-authored-by: Hailey <153161762+haileyok@users.noreply.github.com> Co-authored-by: Paul Frazee --- src/components/Button.tsx | 75 +++++++++++++++++++++++++++++++++-------------- 1 file changed, 53 insertions(+), 22 deletions(-) (limited to 'src/components/Button.tsx') diff --git a/src/components/Button.tsx b/src/components/Button.tsx index 7c682ac1a..f88fbcbde 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -9,10 +9,11 @@ import { View, TextStyle, StyleSheet, + StyleProp, } from 'react-native' import LinearGradient from 'react-native-linear-gradient' -import {useTheme, atoms as a, tokens, web, native} from '#/alf' +import {useTheme, atoms as a, tokens, android, flatten} from '#/alf' import {Props as SVGIconProps} from '#/components/icons/common' export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'gradient' @@ -27,6 +28,7 @@ export type ButtonColor = | 'gradient_nordic' | 'gradient_bonfire' export type ButtonSize = 'small' | 'large' +export type ButtonShape = 'round' | 'square' | 'default' export type VariantProps = { /** * The style variation of the button @@ -40,6 +42,10 @@ export type VariantProps = { * The size of the button */ size?: ButtonSize + /** + * The shape of the button + */ + shape?: ButtonShape } export type ButtonProps = React.PropsWithChildren< @@ -47,6 +53,7 @@ export type ButtonProps = React.PropsWithChildren< AccessibilityProps & VariantProps & { label: string + style?: StyleProp } > export type ButtonTextProps = TextProps & VariantProps & {disabled?: boolean} @@ -74,8 +81,10 @@ export function Button({ variant, color, size, + shape = 'default', label, disabled = false, + style, ...rest }: ButtonProps) { const t = useTheme() @@ -175,18 +184,18 @@ export function Button({ if (!disabled) { baseStyles.push({ backgroundColor: light - ? tokens.color.gray_100 + ? tokens.color.gray_50 : tokens.color.gray_900, }) hoverStyles.push({ backgroundColor: light - ? tokens.color.gray_200 + ? tokens.color.gray_100 : tokens.color.gray_950, }) } else { baseStyles.push({ backgroundColor: light - ? tokens.color.gray_300 + ? tokens.color.gray_200 : tokens.color.gray_950, }) } @@ -197,7 +206,7 @@ export function Button({ if (!disabled) { baseStyles.push(a.border, { - borderColor: light ? tokens.color.gray_500 : tokens.color.gray_500, + borderColor: light ? tokens.color.gray_300 : tokens.color.gray_700, }) hoverStyles.push(a.border, t.atoms.bg_contrast_50) } else { @@ -262,10 +271,28 @@ export function Button({ } } - if (size === 'large') { - baseStyles.push({paddingVertical: 15}, a.px_2xl, a.rounded_sm, a.gap_sm) - } else if (size === 'small') { - baseStyles.push({paddingVertical: 9}, a.px_md, a.rounded_sm, a.gap_sm) + if (shape === 'default') { + if (size === 'large') { + baseStyles.push({paddingVertical: 15}, 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 (shape === 'round' || shape === 'square') { + if (size === 'large') { + if (shape === 'round') { + baseStyles.push({height: 54, width: 54}) + } else { + baseStyles.push({height: 50, width: 50}) + } + } else if (size === 'small') { + baseStyles.push({height: 40, width: 40}) + } + + if (shape === 'round') { + baseStyles.push(a.rounded_full) + } else if (shape === 'square') { + baseStyles.push(a.rounded_sm) + } } return { @@ -278,7 +305,7 @@ export function Button({ } as ViewStyle, ], } - }, [t, variant, color, size, disabled]) + }, [t, variant, color, size, shape, disabled]) const {gradientColors, gradientHoverColors, gradientLocations} = React.useMemo(() => { @@ -334,8 +361,10 @@ export function Button({ disabled: disabled || false, }} style={[ + flatten(style), a.flex_row, a.align_center, + a.justify_center, a.overflow_hidden, a.justify_center, ...baseStyles, @@ -462,17 +491,9 @@ export function useSharedButtonTextStyles() { } if (size === 'large') { - baseStyles.push( - a.text_md, - web({paddingBottom: 1}), - native({marginTop: 2}), - ) + baseStyles.push(a.text_md, android({paddingBottom: 1})) } else { - baseStyles.push( - a.text_md, - web({paddingBottom: 1}), - native({marginTop: 2}), - ) + baseStyles.push(a.text_sm, android({paddingBottom: 1})) } return StyleSheet.flatten(baseStyles) @@ -491,14 +512,24 @@ export function ButtonText({children, style, ...rest}: ButtonTextProps) { export function ButtonIcon({ icon: Comp, + position, }: { icon: React.ComponentType + position?: 'left' | 'right' }) { - const {size} = useButtonContext() + const {size, disabled} = useButtonContext() const textStyles = useSharedButtonTextStyles() return ( - +