Skip to content

Fix: profile ui improvements #372

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.

Sign up for GitHub

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

Open
rajatgupta24 wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Fix: profile ui improvements #372

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2e2b676
Fix: profile ui improvements
rajatgupta24 Jun 28, 2021
6af546d
Lint fixes
rajatgupta24 Jun 28, 2021
3e8dc3e
Lint fixes
rajatgupta24 Jun 28, 2021
08b6bc8
Revert perv changes, center align the tabs
rajatgupta24 Jul 3, 2021
845568d
Merge branch 'main' of https://github.com/codeforcauseorg/edu-client …
rajatgupta24 Jul 3, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion src/components/ProfileComponents/ProfileTabComponent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ function ProfileTabComponent() {
<AppBar position="static" color="default" className={classes.appBar}>
<Tabs value={value} onChange={handleChange} variant="scrollable" scrollButtons="auto">
{tabElements.map((items, index) => (
<Tab key={index} label={items.title} />
<Tab className={classes.bar} key={index} label={items.title} />
))}
</Tabs>
</AppBar>
Expand All @@ -75,6 +75,9 @@ const useStyles = makeStyles((theme) => ({
borderRadius: theme.spacing(0),
},
},
bar: {
width: "33%",
},
Copy link
Collaborator

@adarsh-technocrat adarsh-technocrat Jul 1, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

fix

Copy link
Collaborator

@adarsh-technocrat adarsh-technocrat Jul 1, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sss

we can reduce the gap here!

}));

export default ProfileTabComponent;
25 changes: 18 additions & 7 deletions src/components/ProfileComponents/SubComponents/ActivityCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { makeStyles, Grid, Card, CardContent, Typography, Link, Hidden } from "@material-ui/core";
import React from "react";
import KeyboardArrowRightIcon from "@material-ui/icons/KeyboardArrowRight";
import { makeStyles, Grid, Card, CardContent, Typography, Link, Hidden } from "@material-ui/core";

function ActivityCard({ props }) {
const classes = useStyles();
Expand All @@ -10,9 +11,16 @@ function ActivityCard({ props }) {
<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>
Copy link
Collaborator

@adarsh-technocrat adarsh-technocrat Jul 1, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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!

Capture11

<Typography variant="h4" className={classes.margin} gutterBottom>
{subtitle}
</Typography>
Expand All @@ -21,9 +29,6 @@ function ActivityCard({ props }) {
{description}
</Typography>
</Hidden>
<Typography variant="body2" className={classes.margin} gutterBottom>
<Link>View</Link>
</Typography>
</CardContent>
</Card>
</Grid>
Expand All @@ -35,6 +40,12 @@ const useStyles = makeStyles((theme) => ({
maxWidth: 400,
boxShadow: "0px 4px 15px rgba(55, 64, 161, 0.25)",
textAlign: "left",
[theme.breakpoints.down("sm")]: {
height: 70,
},
},
titleCont: {
display: "flex",
},
title: {
textTransform: "uppercase",
Expand Down
6 changes: 3 additions & 3 deletions src/pages/ProfilePage/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Container, makeStyles, Typography } from "@material-ui/core";
import { Container, makeStyles } from "@material-ui/core";
import React from "react";
import ProfileHero from "../../components/ProfileComponents/ProfileHero";
import ProfileTabComponent from "../../components/ProfileComponents/ProfileTabComponent";
Expand All @@ -9,9 +9,9 @@ function ProfilePage() {
return (
<Container className={classes.root}>
<ProfileHero />
<Typography className={classes.title} variant="h2" color="textPrimary">
{/* <Typography className={classes.title} variant="h2" color="textPrimary">
Profile & settings
</Typography>
</Typography> */}
Copy link
Collaborator

@adarsh-technocrat adarsh-technocrat Jul 1, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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 =)

Copy link
Contributor Author

@rajatgupta24 rajatgupta24 Jul 2, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @adarsh-technocrat, should I add the "profile & setting" heading again, I removed it.

Copy link
Collaborator

@adarsh-technocrat adarsh-technocrat Jul 2, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @adarsh-technocrat, should I add the "profile & setting" heading again, I removed it.

@rajatgupta24 well it's looking good remove that!

Copy link
Collaborator

@adarsh-technocrat adarsh-technocrat Jul 3, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey, @rajatgupta24 keep this "profile & setting" I have made few changes to it !!

<ProfileTabComponent />
</Container>
);
Expand Down