diff --git a/src/components/common/styles/expandableCardStyles.js b/src/components/common/styles/expandableCardStyles.js new file mode 100644 index 0000000..4a63fea --- /dev/null +++ b/src/components/common/styles/expandableCardStyles.js @@ -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; diff --git a/src/features/about/components/AboutComponent.js b/src/features/about/components/AboutComponent.js index 29e7449..e5196f6 100644 --- a/src/features/about/components/AboutComponent.js +++ b/src/features/about/components/AboutComponent.js @@ -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(); diff --git a/src/features/about/components/TechnologiesComponent.js b/src/features/about/components/TechnologiesComponent.js index 4e99674..4411c99 100644 --- a/src/features/about/components/TechnologiesComponent.js +++ b/src/features/about/components/TechnologiesComponent.js @@ -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(); diff --git a/src/features/server/components/ActiveSessionComponent.js b/src/features/server/components/ActiveSessionComponent.js index bbad030..1d702bd 100644 --- a/src/features/server/components/ActiveSessionComponent.js +++ b/src/features/server/components/ActiveSessionComponent.js @@ -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 }) => { } action={ - - + + } title={Active session} @@ -59,21 +51,7 @@ const ActiveSessionComponent = ({ session }) => { - - - - - - - - + Method: diff --git a/src/features/server/components/ServerComponent.js b/src/features/server/components/ServerComponent.js index b69b898..99dfb12 100644 --- a/src/features/server/components/ServerComponent.js +++ b/src/features/server/components/ServerComponent.js @@ -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();