diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/forms/HostingProvider.tsx | 143 | ||||
| -rw-r--r-- | src/components/icons/Ticket.tsx | 2 |
2 files changed, 84 insertions, 61 deletions
diff --git a/src/components/forms/HostingProvider.tsx b/src/components/forms/HostingProvider.tsx index 6cbabe291..4732434b0 100644 --- a/src/components/forms/HostingProvider.tsx +++ b/src/components/forms/HostingProvider.tsx @@ -6,21 +6,23 @@ import {useLingui} from '@lingui/react' import {toNiceDomain} from '#/lib/strings/url-helpers' import {isAndroid} from '#/platform/detection' import {ServerInputDialog} from '#/view/com/auth/server-input' -import {atoms as a, useTheme} from '#/alf' -import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe' -import {PencilLine_Stroke2_Corner0_Rounded as Pencil} from '#/components/icons/Pencil' -import {Button} from '../Button' -import {useDialogControl} from '../Dialog' -import {Text} from '../Typography' +import {atoms as a, tokens, useTheme} from '#/alf' +import {Button, ButtonIcon, ButtonText} from '#/components/Button' +import {useDialogControl} from '#/components/Dialog' +import {Globe_Stroke2_Corner0_Rounded as GlobeIcon} from '#/components/icons/Globe' +import {PencilLine_Stroke2_Corner0_Rounded as PencilIcon} from '#/components/icons/Pencil' +import {Text} from '#/components/Typography' export function HostingProvider({ serviceUrl, onSelectServiceUrl, onOpenDialog, + minimal, }: { serviceUrl: string onSelectServiceUrl: (provider: string) => void onOpenDialog?: () => void + minimal?: boolean }) { const serverInputControl = useDialogControl() const t = useTheme() @@ -29,9 +31,7 @@ export function HostingProvider({ const onPressSelectService = React.useCallback(() => { Keyboard.dismiss() serverInputControl.open() - if (onOpenDialog) { - onOpenDialog() - } + onOpenDialog?.() }, [onOpenDialog, serverInputControl]) return ( @@ -40,57 +40,80 @@ export function HostingProvider({ control={serverInputControl} onSelect={onSelectServiceUrl} /> - <Button - testID="selectServiceButton" - label={toNiceDomain(serviceUrl)} - accessibilityHint={_(msg`Press to change hosting provider`)} - variant="solid" - color="secondary" - style={[ - a.w_full, - a.flex_row, - a.align_center, - a.rounded_sm, - a.px_md, - a.pr_sm, - a.gap_xs, - {paddingVertical: isAndroid ? 14 : 9}, - ]} - onPress={onPressSelectService}> - {({hovered, pressed}) => { - const interacted = hovered || pressed - return ( - <> - <View style={a.pr_xs}> - <Globe - size="md" - fill={ - interacted ? t.palette.contrast_800 : t.palette.contrast_500 - } - /> - </View> - <Text style={[a.text_md]}>{toNiceDomain(serviceUrl)}</Text> - <View - style={[ - a.rounded_sm, - interacted - ? t.atoms.bg_contrast_300 - : t.atoms.bg_contrast_100, - {marginLeft: 'auto', padding: 6}, - ]}> - <Pencil - size="sm" - style={{ - color: interacted - ? t.palette.contrast_800 - : t.palette.contrast_500, - }} - /> - </View> - </> - ) - }} - </Button> + {minimal ? ( + <View style={[a.flex_row, a.align_center, a.flex_wrap]}> + <Text style={[a.text_sm, t.atoms.text_contrast_medium]}> + You are creating an account on{' '} + </Text> + <Button + label={toNiceDomain(serviceUrl)} + accessibilityHint={_(msg`Press to change hosting provider`)} + onPress={onPressSelectService} + variant="ghost" + color="secondary" + size="tiny" + style={[a.px_xs, {marginLeft: tokens.space.xs * -1}]}> + <ButtonText style={[a.text_sm]}> + {toNiceDomain(serviceUrl)} + </ButtonText> + <ButtonIcon icon={PencilIcon} /> + </Button> + </View> + ) : ( + <Button + testID="selectServiceButton" + label={toNiceDomain(serviceUrl)} + accessibilityHint={_(msg`Press to change hosting provider`)} + variant="solid" + color="secondary" + style={[ + a.w_full, + a.flex_row, + a.align_center, + a.rounded_sm, + a.px_md, + a.pr_sm, + a.gap_xs, + {paddingVertical: isAndroid ? 14 : 9}, + ]} + onPress={onPressSelectService}> + {({hovered, pressed}) => { + const interacted = hovered || pressed + return ( + <> + <View style={a.pr_xs}> + <GlobeIcon + size="md" + fill={ + interacted + ? t.palette.contrast_800 + : t.palette.contrast_500 + } + /> + </View> + <Text style={[a.text_md]}>{toNiceDomain(serviceUrl)}</Text> + <View + style={[ + a.rounded_sm, + interacted + ? t.atoms.bg_contrast_300 + : t.atoms.bg_contrast_100, + {marginLeft: 'auto', padding: 6}, + ]}> + <PencilIcon + size="sm" + style={{ + color: interacted + ? t.palette.contrast_800 + : t.palette.contrast_500, + }} + /> + </View> + </> + ) + }} + </Button> + )} </> ) } diff --git a/src/components/icons/Ticket.tsx b/src/components/icons/Ticket.tsx index 1a8059c2a..d4cfe7e47 100644 --- a/src/components/icons/Ticket.tsx +++ b/src/components/icons/Ticket.tsx @@ -1,5 +1,5 @@ import {createSinglePathSVG} from './TEMPLATE' export const Ticket_Stroke2_Corner0_Rounded = createSinglePathSVG({ - path: 'M4 5.5a.5.5 0 0 0-.5.5v2.535a.5.5 0 0 0 .25.433A3.498 3.498 0 0 1 5.5 12a3.498 3.498 0 0 1-1.75 3.032.5.5 0 0 0-.25.433V18a.5.5 0 0 0 .5.5h16a.5.5 0 0 0 .5-.5v-2.535a.5.5 0 0 0-.25-.433A3.498 3.498 0 0 1 18.5 12a3.5 3.5 0 0 1 1.75-3.032.5.5 0 0 0 .25-.433V6a.5.5 0 0 0-.5-.5H4ZM2.5 6A1.5 1.5 0 0 1 4 4.5h16A1.5 1.5 0 0 1 21.5 6v3.17a.5.5 0 0 1-.333.472 2.501 2.501 0 0 0 0 4.716.5.5 0 0 1 .333.471V18a1.5 1.5 0 0 1-1.5 1.5H4A1.5 1.5 0 0 1 2.5 18v-3.17a.5.5 0 0 1 .333-.472 2.501 2.501 0 0 0 0-4.716.5.5 0 0 1-.333-.471V6Zm12 2a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Zm0 4a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Zm0 4a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Z', + path: 'M3 4a1 1 0 0 0-1 1v4.17a1 1 0 0 0 .667.944 2.001 2.001 0 0 1 0 3.772A1 1 0 0 0 2 14.83V19a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1v-4.17a1 1 0 0 0-.667-.944 2.001 2.001 0 0 1 0-3.772A1 1 0 0 0 22 9.17V5a1 1 0 0 0-1-1H3Zm1 4.535V6h16v2.535A4 4 0 0 0 18 12c0 1.482.805 2.773 2 3.465V18H4v-2.535A4 4 0 0 0 6 12a4 4 0 0 0-2-3.465ZM15 15a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm-1-3a1 1 0 1 1 2 0 1 1 0 0 1-2 0Zm1-5a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z', }) |