From 352f5468f73adf03a59ae4d82d66737ee35f3259 Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tudor.stanciu94@gmail.com>
Date: Mon, 18 May 2020 23:21:22 +0300
Subject: [PATCH] move cards styles to common file

---
 .../common/styles/expandableCardStyles.js     | 17 +++++++
 .../about/components/AboutComponent.js        | 17 +------
 .../about/components/TechnologiesComponent.js | 17 +------
 .../components/ActiveSessionComponent.js      | 46 +++++--------------
 .../server/components/ServerComponent.js      | 17 +------
 5 files changed, 35 insertions(+), 79 deletions(-)
 create mode 100644 src/components/common/styles/expandableCardStyles.js

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 }) => {
           </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>
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();