-
Notifications
You must be signed in to change notification settings - Fork 23
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
refactor(onboarding): Enhanced checkbox visibility in the onboarding process #1444
refactor(onboarding): Enhanced checkbox visibility in the onboarding process #1444
Conversation
86ca487
to
72b6530
Compare
src/components/CheckButton.tsx
Outdated
<View style={checked ? styles.rightColumn : styles.noCheckRightColumn}> | ||
{checked && <Checkmark color={'brand'} height={20} width={20} />} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Instead of putting the styles on the container and adding fixed margin, rather add a new container for the checkbox and keep the flex layout. Also we want to use colors exported from the colors definition file as much as possible:
Add a color brand32
in src/styles/colors.ts
:
brand32: 'rgba(255, 102, 0, 0.32)'
import React, { memo, ReactElement, ReactNode } from 'react';
import {
View,
StyleSheet,
TouchableOpacity,
TouchableOpacityProps,
} from 'react-native';
import { Text01S, Caption13S } from '../styles/text';
import { View as StyledView } from '../styles/components';
import { Checkmark } from '../styles/icons';
interface CheckButtonProps extends TouchableOpacityProps {
label: ReactNode;
checked: boolean;
description?: ReactNode;
}
const CheckButton = memo(
({
label,
checked,
description,
style,
...props
}: CheckButtonProps): ReactElement => {
return (
<TouchableOpacity
style={[styles.item, style]}
activeOpacity={0.6}
{...props}>
<View style={styles.leftColumn}>
<View>
<Text01S color="white">{label}</Text01S>
{description && (
<Caption13S color="gray1">{description}</Caption13S>
)}
</View>
</View>
<View style={styles.rightColumn}>
<StyledView
style={[styles.checkbox, checked && styles.checked]}
color={checked ? 'brand32' : 'white1'}>
{checked && <Checkmark color="brand" height={20} width={20} />}
</StyledView>
</View>
</TouchableOpacity>
);
},
);
const styles = StyleSheet.create({
item: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingVertical: 14,
borderBottomColor: 'rgba(255, 255, 255, 0.1)',
borderBottomWidth: 1,
},
leftColumn: {
flex: 2.6,
flexDirection: 'row',
alignItems: 'center',
},
rightColumn: {
flex: 1,
justifyContent: 'center',
alignItems: 'flex-end',
marginLeft: 'auto',
},
checkbox: {
borderRadius: 8,
borderColor: '#515151',
borderWidth: 1,
alignItems: 'center',
justifyContent: 'center',
height: 32,
width: 32,
},
checked: {
borderColor: '#FF6600',
},
});
export default CheckButton;
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks 🙏
72b6530
to
2b232b6
Compare
2b232b6
to
172e57e
Compare
Description
Enhanced checkbox visibility in the onboarding process
Linked Issues/Tasks
https://app.asana.com/0/0/1205905791108238/f
Type of change
Tests
Screenshot / Video
checkboxes.mp4