-
Notifications
You must be signed in to change notification settings - Fork 0
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
28 change seek help page + styling #31
Conversation
5af7ecf
to
7ea16f3
Compare
<View style={styles.selectJurisdictionContainer}> | ||
{jurisdiction.map(level => ( | ||
<TouchableOpacity | ||
key={level} | ||
style={styles.checkButtonContainer} | ||
onPress={() => toggleSelection(level)} | ||
> | ||
<View | ||
style={[ | ||
styles.checkButton, | ||
selectedJurisdiction.includes(level) | ||
? styles.selectedCheckButton | ||
: null, | ||
]} | ||
> | ||
{selectedJurisdiction.includes(level) && <Check />} | ||
</View> | ||
<Text style={styles.buttonText}>{level}</Text> | ||
</TouchableOpacity> |
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.
I changed it for you - but I basically swapped the inner view and touchable opacity. generally we want buttons to take up as much space as possible in the container such that things are more clickable (and thereby accessible) - this is why I try and refrain from using margins and normally use padding! You can see that adding padding or simply swapping react components around can make the clickable area a lot bigger and more intuitive to use.
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.
looks pretty good overall! Just made one small comment. great work on the styling Arfa!
What's new in this PR
Description
Screenshots
How to review
Next steps
Relevant links
Online sources
Related PRs
CC: @philipye314