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

Fix: profile ui improvements #372

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 3 commits
Commits
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
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

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

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
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

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
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

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

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

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

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