move cards styles to common file

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;

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();

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();

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,20 +34,6 @@ const ActiveSessionComponent = ({ session }) => {
           </Avatar>
         }
         action={
-          <IconButton aria-label="settings">
-            <MoreVertIcon />
-          </IconButton>
-        }
-        title={<strong>Active session</strong>}
-        subheader="Expand to see forwards"
-      />
-      <CardContent>
-        <ActiveSessionSummary session={session} />
-      </CardContent>
-      <CardActions disableSpacing>
-        <IconButton aria-label="add to favorites">
-          <FavoriteIcon />
-        </IconButton>
           <IconButton
             className={clsx(classes.expand, {
               [classes.expandOpen]: expanded
@@ -73,7 +44,14 @@ const ActiveSessionComponent = ({ session }) => {
           >
             <ExpandMoreIcon />
           </IconButton>
-      </CardActions>
+        }
+        title={<strong>Active session</strong>}
+        subheader="Expand to see forwards"
+      />
+      <CardContent>
+        <ActiveSessionSummary session={session} />
+      </CardContent>
+      <CardActions disableSpacing></CardActions>
       <Collapse in={expanded} timeout="auto" unmountOnExit>
         <CardContent>
           <Typography paragraph>Method:</Typography>

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();