refactor(onboarding): Enhanced checkbox visibility in the onboarding process

[flaviomoceri]

Description

Enhanced checkbox visibility in the onboarding process

Linked Issues/Tasks

https://app.asana.com/0/0/1205905791108238/f

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Refactoring (improving code without creating new functionality)

Tests

• Detox test
• Unit test
• No test

Screenshot / Video

checkboxes.mp4

[pwltr]

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;

[flaviomoceri]

Thanks 🙏