Fix: profile ui improvements #372
Conversation
|
Please review @adarsh-technocrat |
Sure @Abhishek-kumar09 :) |
| }, | ||
| bar: { | ||
| width: "33%", | ||
| }, |
There was a problem hiding this comment.
Hey, @rajatgupta24 for mobile view the tab section is looking grate but by defining the width the tab component has lost its responsiveness as a tab variant is scrollable. so instead of defining the width, we can use the native CSS class for the component by that it will not lose its responsiveness. and can we reduce the width on the web and tab around 15px by adding breakpoints?
There was a problem hiding this comment.
we can reduce the gap here!
| <Card className={classes.card}> | ||
| <CardContent className={classes.cardContent}> | ||
| <img src={icon} className={classes.image} /> | ||
| <Typography variant="h6" color="textSecondary" gutterBottom className={classes.title}> | ||
| {title} | ||
| </Typography> | ||
| <div className={classes.titleCont}> | ||
| <Typography variant="h6" color="textSecondary" gutterBottom className={classes.title}> | ||
| {title} | ||
| </Typography> | ||
| <Typography variant="body2" gutterBottom> | ||
| <Link> | ||
| <KeyboardArrowRightIcon style={{ marginLeft: ".05rem" }} /> | ||
| </Link> | ||
| </Typography> | ||
| </div> |
There was a problem hiding this comment.
Hey, @rajatgupta24 I think we can revert this change and go with the previous one as it's kind of breaking the UI of the Activity card and the placement of the arrow doesn't seem right!
src/pages/ProfilePage/index.js
Outdated
| <Typography className={classes.title} variant="h2" color="textPrimary"> | ||
| {/* <Typography className={classes.title} variant="h2" color="textPrimary"> | ||
| Profile & settings | ||
| </Typography> | ||
| </Typography> */} |
There was a problem hiding this comment.
@rajatgupta24 please remove this comment! and related CSS implementation if there. and @rajatgupta24 small suggestion if you make any changes in any component please check for its responsiveness for all screens =)
There was a problem hiding this comment.
Hi @adarsh-technocrat, should I add the "profile & setting" heading again, I removed it.
There was a problem hiding this comment.
Hi @adarsh-technocrat, should I add the "profile & setting" heading again, I removed it.
@rajatgupta24 well it's looking good remove that!
There was a problem hiding this comment.
Hey, @rajatgupta24 keep this "profile & setting" I have made few changes to it !!
There was a problem hiding this comment.
@rajatgupta24 I reviewed your code and there are some changes that I want to suggest
- the nav is perfectly center for the mobile view but its alignment gets affected in the web view which looks a bit distorted (not centered not left).
- I think that the "view" button looks better than the "forward arrow" in web view but it looks fine in mobile view.
- I think you mistakenly commented "Profile and settings " heading on the profile page
|
@adarsh-technocrat I mistakenly reviewed it too 😅 I don't know that you already reviewed this, maybe I was typing that time sorry my bad :( |
|
Hey @adarsh-technocrat, And the changes in package & package-lock.json are because I ran npm audit fix. |
|
Desktop View
|
Issue Number
fixes #
UI Improvements in profile section
Describe the changes you've made
Describe if there is any unusual behavior (Any Warning) of your code(Write
NAif there isn't)Additional context (OPTIONAL)
Test plan (OPTIONAL)
A good test plan should give instructions that someone else can easily follow.
Checklist
Provide a Deployed link of route/page that needs to review
Preview: Deploy preview link here with the appropriate route