Flexibleidealist/applicants screen styling #72
Conversation
flexibleidealist
commented
Jun 20, 2022
•
flexibleidealist
commented
- adds styling to Applicants screen to approximate the Figma design
- makes small changes to JSX to reflect the Figma design more, including updating text
- makes changes to route params to pass information about the current project and applicants to the Applicants screen in order to avoid additional API calls (needs review -- main question is which screens can navigate to this screen? currently only from SingleProject screen via the link to see all the applicants)
…to eliminate API call for project and allows OwnerView component to pass project and applicants via route params; tweaks layout to create additional View elements to apply different styles to different sections of the screen
| if (!route.params) { | ||
| fetchedProject = soloProject; | ||
| setCurrProject(soloProject); // ultimately we shouldn't need this, since this screen only comes from SingleProject screen |
There was a problem hiding this comment.
Discussed over stand-up; decided on reolcating applicant logic to backend instead
New flow would look like:
Owner views their project ->
Clicks on "all applicants" ->
On navigation to Applicants, projectID is passed in as a prop ->
Applicants screen uses the project ID to call an "applicants only" endpoint ->
backend will fetch the applicants list from DB then fetch each individual user's object mainly for their name, image, and role ->
then filter through these users to separate them by role ->
package the response as an object with a property for each role (each role will have an array as a value full of those role-specific users) ->
Frontend will use this response to generate the lists again
| @@ -74,7 +68,7 @@ const RoleList = ({ applicants, navigation, role, currProject }) => { | |||
| return ( | |||
| <View> | |||
| {loadMore && <Button title="Show less" onPress={() => handleToggle(toggleLoadMore)} />} | |||
| <Text>{role}</Text> | |||
| <Text style={styles.largerText}>{role}</Text> | |||
There was a problem hiding this comment.
The styling for this text box is not the same color (#505050) , size (18), or margin (centered with 15px on the left + right) as depicted on the figma
| @@ -74,7 +68,7 @@ const RoleList = ({ applicants, navigation, role, currProject }) => { | |||
| return ( | |||
| <View> | |||
There was a problem hiding this comment.
The container for each RoleList should have at least a 40px between each RoleList component, drew a line on figma to measure the distance
There was a problem hiding this comment.
Hey @flexibleidealist this was a good go at it! Main things I want to touch on are:
- What we discussed about how we'd handle the applicants list but this can actually be part of a separate ticket instead since it 's concerned mostly with logic instead of styling
- As a result please create the helper ticket and revert any changes to logic in this PR for now, we'll keep it just styling for this branch
Style objects look good and delectably organized! I left some conversations regarding the styling but they should be easy enough to fix! Re-request when this is ready
…placeholders and adjusting font colors
…er and adjusts margin of load more button
