active session card

src/features/about/components/AboutContainer.js

@@ -8,7 +8,6 @@ import TechnologiesComponent from "./TechnologiesComponent";
 const AboutContainer = () => {
   return (
     <>
-      <br />
       <AboutComponent />
       <br />
       <br />

src/features/system/components/ActiveSessionComponent.js

@@ -0,0 +1,92 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import clsx from "clsx";
+import Card from "@material-ui/core/Card";
+import CardHeader from "@material-ui/core/CardHeader";
+import CardContent from "@material-ui/core/CardContent";
+import CardActions from "@material-ui/core/CardActions";
+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";
+
+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 ActiveSessionComponent = () => {
+  const classes = useStyles();
+  const [expanded, setExpanded] = React.useState(false);
+
+  const handleExpandClick = () => {
+    setExpanded(!expanded);
+  };
+
+  return (
+    <Card>
+      <CardHeader
+        avatar={
+          <Avatar aria-label="recipe" className={classes.avatar}>
+            <ShareRoundedIcon />
+          </Avatar>
+        }
+        action={
+          <IconButton aria-label="settings">
+            <MoreVertIcon />
+          </IconButton>
+        }
+        title={<strong>Active session</strong>}
+        subheader="Expand to see forwards"
+      />
+      <CardContent>
+        <Typography variant="body2" color="textSecondary" component="p">
+          This impressive paella is a perfect party dish and a fun meal to cook
+          together with your guests. Add 1 cup of frozen peas along with the
+          mussels, if you like.
+        </Typography>
+      </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>
+      <Collapse in={expanded} timeout="auto" unmountOnExit>
+        <CardContent>
+          <Typography paragraph>Method:</Typography>
+          <Typography paragraph>
+            Tabel ca cel de pana acum cu redirectarile. From va fi link si la
+            click va deschide in tab nou aplicatia
+          </Typography>
+        </CardContent>
+      </Collapse>
+    </Card>
+  );
+};
+
+export default ActiveSessionComponent;

src/features/system/components/SystemComponent.js

@@ -13,6 +13,7 @@ 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 DnsRoundedIcon from "@material-ui/icons/DnsRounded";
 
 const useStyles = makeStyles((theme) => ({
   expand: {
@@ -26,7 +27,7 @@ const useStyles = makeStyles((theme) => ({
     transform: "rotate(180deg)"
   },
   avatar: {
-    backgroundColor: "#F15B2A"
+    backgroundColor: theme.palette.primary.main
   }
 }));
 
@@ -43,7 +44,7 @@ const SystemComponent = () => {
       <CardHeader
         avatar={
           <Avatar aria-label="recipe" className={classes.avatar}>
-            R
+            <DnsRoundedIcon />
           </Avatar>
         }
         action={
@@ -51,8 +52,8 @@ const SystemComponent = () => {
             <MoreVertIcon />
           </IconButton>
         }
-        title="Shrimp and Chorizo Paella"
+        title={<strong>Server</strong>}
-        subheader="September 14, 2016"
+        subheader="Host: StaWebSrv"
       />
       <CardContent>
         <Typography variant="body2" color="textSecondary" component="p">

src/features/system/components/SystemContainer.js

@@ -4,6 +4,7 @@ import { bindActionCreators } from "redux";
 import PropTypes from "prop-types";
 import { loadSystemDateTime, loadSystemVersion } from "../actionCreators";
 import SystemComponent from "./SystemComponent";
+import ActiveSessionComponent from "./ActiveSessionComponent";
 
 const SystemContainer = ({ actions }) => {
   useEffect(() => {
@@ -11,7 +12,14 @@ const SystemContainer = ({ actions }) => {
     actions.loadSystemVersion();
   }, []);
 
-  return <SystemComponent />;
+  return (
+    <>
+      <SystemComponent />
+      <br />
+      <br />
+      <ActiveSessionComponent />
+    </>
+  );
 };
 
 SystemContainer.propTypes = {