#955 - Improved the progress bar to match figma #1040
Conversation
Refactored the progress bar so that the UI would look better for hte user to look at. #955
| @@ -167,7 +168,7 @@ const FormHeader = () => { | |||
| return ( | |||
| <div className={classes.outerWrapper}> | |||
| <div className={classes.formHeader}> | |||
| <h3>{formTitle}</h3> | |||
| <h3 className="formTitle">{formTitle}</h3> | |||
There was a problem hiding this comment.
rather than importing an external css file and creating a 'formTitle' class inline, can you use Material UI and create a class that way?
There was a problem hiding this comment.
lets remove this and use material ui to style it.
There was a problem hiding this comment.
Hey @ramankala! Desktop looks great! Great job translating to material ui.
The progress bar should get a little smaller as the screen sizes get smaller. I noticed the original figma link I gave you doesn't work anymore, let me know if this is ever a problem again.
for the small breakpoint and below, can you reduce the padding/margin a little bit?
There was a problem hiding this comment.
@ramankala sorry I should have been clearer. I would like the size of the progress bar to remain the same at desktop, but at smaller screen sizes, I'd like to see these changes.
There was a problem hiding this comment.
Hey @ramankala!
Check #955 for the figma that design added before the break. There's a couple inconsistencies between your branch and the figma.
There was a problem hiding this comment.
Hey @ramankala,
Just a few comments below. I was also experiencing a responsiveness bug, but I think addressing the issues below might fix it.
| borderBottomLeftRadius: '64px', | ||
| maxWidth: '80%', | ||
| marginLeft: '10%', | ||
| '@media (max-height:759px)': { |
There was a problem hiding this comment.
can you refactor this to use breakpoints.down rather than this template literal?
There was a problem hiding this comment.
Also, should this be max-width instead of max-height?
There was a problem hiding this comment.
@ramankala I know you didn't get a tablet design. But between 400-767px, there are points when the progress bar is shorter than the rest of the content.
Can you apply the mobile styles (where the progress bar goes all the way across) starting at 767?
There was a problem hiding this comment.
@ramankala Visually, its perfect! Great job!
I just need you to run prettier using npm run lint:fix and we can get this merged 🎉
Refactored the progress bar so that the UI would look better for the user to look at.
#955