Skip to content
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

Merged
merged 11 commits into from
Dec 7, 2024

Conversation

arfamomin
Copy link
Contributor

@arfamomin arfamomin commented Dec 5, 2024

What's new in this PR

Description

  • Updated styling to match Kevin's designs
  • Removed nav for California/National and made into buttons on main Seek Help page
  • Added logic for filtered by level
  • Updating some styling on right panel resource cards

Screenshots

Screenshot 2024-12-05 at 12 16 45 AM
Screenshot 2024-12-05 at 12 28 40 AM

How to review

  • SeekHelp folder for logic and styling updates
  • Resource component for styling updates on cards

Next steps

  • I didn't fully do what is on the figma for the fields (i.e. address, phone number, etc..) because it seems like different resources have different fields and that might affect how things are organized. Think we could talk about what this should look like a little more (so rn I just stacked the fields); Also I think Kevin is changing the design for the fields based on the comments in the Figma?
  • the collapsed summary text cutoff/splice is being hardcoded (so it looks different on different screen sizes); I didn't know if it's worth it to dynamically calculate the line width for the text since all the prison tablets are the same size? so I guess we could adjust that once we test on proper dimensions
  • didn't change the carrot thingy because I think we said that it was good?

Relevant links

Online sources

Related PRs

CC: @philipye314

@arfamomin arfamomin force-pushed the 28-change-seek-help-page-+-styling branch from 5af7ecf to 7ea16f3 Compare December 5, 2024 06:09
@arfamomin arfamomin marked this pull request as ready for review December 5, 2024 08:23
Comment on lines +103 to +121
<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>
Copy link
Collaborator

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.

Copy link
Collaborator

@philipye314 philipye314 left a 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!

@philipye314 philipye314 merged commit 45a4464 into main Dec 7, 2024
0 of 2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants