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) => ({
+const useStyles = makeStyles(styles);
-  expand: {
-    transform: "rotate(0deg)",
-    marginLeft: "auto",
-    transition: theme.transitions.create("transform", {
-      duration: theme.transitions.duration.shortest
-    })
-  },
-  expandOpen: {
-    transform: "rotate(180deg)"
-  },
-  avatar: {
-    backgroundColor: "#F15B2A"
-  }
-}));
 
 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) => ({
+const useStyles = makeStyles(styles);
-  expand: {
-    transform: "rotate(0deg)",
-    marginLeft: "auto",
-    transition: theme.transitions.create("transform", {
-      duration: theme.transitions.duration.shortest
-    })
-  },
-  expandOpen: {
-    transform: "rotate(180deg)"
-  },
-  avatar: {
-    backgroundColor: "#F15B2A"
-  }
-}));
 
 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) => ({
+const useStyles = makeStyles(styles);
-  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 ActiveSessionComponent = ({ session }) => {
   const classes = useStyles();
@@ -49,8 +34,15 @@ const ActiveSessionComponent = ({ session }) => {
           </Avatar>
         }
         action={
-          <IconButton aria-label="settings">
+          <IconButton
-            <MoreVertIcon />
+            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>
+      <CardActions disableSpacing></CardActions>
-        <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>
       <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) => ({
+const useStyles = makeStyles(styles);
-  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 ServerComponent = () => {
   const classes = useStyles();