adjust web styles of footer

This commit is contained in:
Hailey
2024-06-14 13:16:19 -07:00
parent d30734f138
commit 617639cd7e
+20 -18
View File
@@ -559,7 +559,7 @@ function Footer({
t.atoms.bg, t.atoms.bg,
t.atoms.border_contrast_medium, t.atoms.border_contrast_medium,
{ {
height: 224, height: isNative ? 224 : 200,
paddingBottom: 20 + bottomInset, paddingBottom: 20 + bottomInset,
}, },
isNative && [ isNative && [
@@ -641,26 +641,13 @@ function Footer({
)} )}
</Text> </Text>
)} )}
{state.currentStep === 'Profiles' && items.length < 8 ? (
<Text
style={[
a.font_bold,
textStyles,
t.atoms.text_contrast_medium,
{marginTop: 'auto'},
]}>
<Trans>
Add {8 - items.length} more{' '}
<Plural value={8 - items.length} one="person" other="people" /> to
continue
</Trans>
</Text>
) : (
<View <View
style={[ style={[
a.flex_row, a.flex_row,
a.w_full, a.w_full,
a.justify_between, a.justify_between,
a.align_center,
{marginTop: 'auto'}, {marginTop: 'auto'},
]}> ]}>
{isEditEnabled ? ( {isEditEnabled ? (
@@ -669,26 +656,41 @@ function Footer({
variant="ghost" variant="ghost"
color="primary" color="primary"
size="small" size="small"
style={{width: 50}}
onPress={editDialogControl.open}> onPress={editDialogControl.open}>
<ButtonText> <ButtonText>
<Trans>Edit</Trans> <Trans>Edit</Trans>
</ButtonText> </ButtonText>
</Button> </Button>
) : ( ) : (
<View /> <View style={{width: 50}} />
)} )}
{state.currentStep === 'Profiles' && items.length < 8 ? (
<>
<Text
style={[a.font_bold, textStyles, t.atoms.text_contrast_medium]}>
<Trans>
Add {8 - items.length} more{' '}
<Plural value={8 - items.length} one="person" other="people" />{' '}
to continue
</Trans>
</Text>
<View style={{width: 50}} />
</>
) : (
<Button <Button
label={nextBtnText} label={nextBtnText}
variant="solid" variant="solid"
color="primary" color="primary"
size="small" size="small"
style={{width: 50}}
onPress={onNext} onPress={onNext}
disabled={!state.canNext}> disabled={!state.canNext}>
<ButtonText>{nextBtnText}</ButtonText> <ButtonText>{nextBtnText}</ButtonText>
{state.processing && <Loader size="xs" style={{color: 'white'}} />} {state.processing && <Loader size="xs" style={{color: 'white'}} />}
</Button> </Button>
</View>
)} )}
</View>
<WizardEditListDialog <WizardEditListDialog
control={editDialogControl} control={editDialogControl}