tudor.stanciu/reverse-proxy-frontend
tudor.stanciu/reverse-proxy-frontend
1
0
Fork 0
mirror of https://dev.azure.com/tstanciu94/ReverseProxy/_git/ReverseProxy_Frontend synced 2022-12-28 18:12:07 +02:00
Code Issues 3 Packages Projects Releases Wiki Activity

move cards styles to common file

Browse Source
This commit is contained in:
Tudor Stanciu 2020-05-18 23:21:22 +03:00
parent c155489a7d
commit 352f5468f7
5 changed files with 35 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/common/styles/expandableCardStyles.js Normal file
View File

@ -0,0 +1,17 @@
const styles = (theme) => ({
expand: {
transform: "rotate(0deg)",
marginLeft: "auto",
transition: theme.transitions.create("transform", {
duration: theme.transitions.duration.shortest
})
},
expandOpen: {
transform: "rotate(180deg)"
},
avatar: {
backgroundColor: theme.palette.primary.main
}
});
export default styles;

17
src/features/about/components/AboutComponent.js
View File

@ -13,22 +13,9 @@ import FavoriteIcon from "@material-ui/icons/Favorite";
import ShareIcon from "@material-ui/icons/Share";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import MoreVertIcon from "@material-ui/icons/MoreVert";
import styles from "../../../components/common/styles/expandableCardStyles";
const useStyles = makeStyles((theme) => ({
expand: {
transform: "rotate(0deg)",
marginLeft: "auto",
transition: theme.transitions.create("transform", {
duration: theme.transitions.duration.shortest
})
},
expandOpen: {
transform: "rotate(180deg)"
},
avatar: {
backgroundColor: "#F15B2A"
}
}));
const useStyles = makeStyles(styles);
const AboutComponent = () => {
const classes = useStyles();

17
src/features/about/components/TechnologiesComponent.js
View File

@ -13,22 +13,9 @@ import FavoriteIcon from "@material-ui/icons/Favorite";
import ShareIcon from "@material-ui/icons/Share";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import MoreVertIcon from "@material-ui/icons/MoreVert";
import styles from "../../../components/common/styles/expandableCardStyles";
const useStyles = makeStyles((theme) => ({
expand: {
transform: "rotate(0deg)",
marginLeft: "auto",
transition: theme.transitions.create("transform", {
duration: theme.transitions.duration.shortest
})
},
expandOpen: {
transform: "rotate(180deg)"
},
avatar: {
backgroundColor: "#F15B2A"
}
}));
const useStyles = makeStyles(styles);
const TechnologiesComponent = () => {
const classes = useStyles();

46
src/features/server/components/ActiveSessionComponent.js
View File

@ -10,27 +10,12 @@ import Collapse from "@material-ui/core/Collapse";
import Avatar from "@material-ui/core/Avatar";
import IconButton from "@material-ui/core/IconButton";
import Typography from "@material-ui/core/Typography";
import FavoriteIcon from "@material-ui/icons/Favorite";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import MoreVertIcon from "@material-ui/icons/MoreVert";
import ShareRoundedIcon from "@material-ui/icons/ShareRounded";
import ActiveSessionSummary from "./ActiveSessionSummary";
import styles from "../../../components/common/styles/expandableCardStyles";
const useStyles = makeStyles((theme) => ({
expand: {
transform: "rotate(0deg)",
marginLeft: "auto",
transition: theme.transitions.create("transform", {
duration: theme.transitions.duration.shortest
})
},
expandOpen: {
transform: "rotate(180deg)"
},
avatar: {
backgroundColor: theme.palette.primary.main
}
}));
const useStyles = makeStyles(styles);
const ActiveSessionComponent = ({ session }) => {
const classes = useStyles();
@ -49,8 +34,15 @@ const ActiveSessionComponent = ({ session }) => {
</Avatar>
}
action={
<IconButton aria-label="settings">
<MoreVertIcon />
<IconButton
className={clsx(classes.expand, {
[classes.expandOpen]: expanded
})}
onClick={handleExpandClick}
aria-expanded={expanded}
aria-label="show more"
>
<ExpandMoreIcon />
</IconButton>
}
title={<strong>Active session</strong>}
@ -59,21 +51,7 @@ const ActiveSessionComponent = ({ session }) => {
<CardContent>
<ActiveSessionSummary session={session} />
</CardContent>
<CardActions disableSpacing>
<IconButton aria-label="add to favorites">
<FavoriteIcon />
</IconButton>
<IconButton
className={clsx(classes.expand, {
[classes.expandOpen]: expanded
})}
onClick={handleExpandClick}
aria-expanded={expanded}
aria-label="show more"
>
<ExpandMoreIcon />
</IconButton>
</CardActions>
<CardActions disableSpacing></CardActions>
<Collapse in={expanded} timeout="auto" unmountOnExit>
<CardContent>
<Typography paragraph>Method:</Typography>

17
src/features/server/components/ServerComponent.js
View File

@ -14,22 +14,9 @@ import ShareIcon from "@material-ui/icons/Share";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import MoreVertIcon from "@material-ui/icons/MoreVert";
import DnsRoundedIcon from "@material-ui/icons/DnsRounded";
import styles from "../../../components/common/styles/expandableCardStyles";
const useStyles = makeStyles((theme) => ({
expand: {
transform: "rotate(0deg)",
marginLeft: "auto",
transition: theme.transitions.create("transform", {
duration: theme.transitions.duration.shortest
})
},
expandOpen: {
transform: "rotate(180deg)"
},
avatar: {
backgroundColor: theme.palette.primary.main
}
}));
const useStyles = makeStyles(styles);
const ServerComponent = () => {
const classes = useStyles();