From 3800c35e5abbbdcf65c9168088acb49470e7c0f4 Mon Sep 17 00:00:00 2001 From: Tudor Stanciu Date: Fri, 15 May 2020 00:31:06 +0300 Subject: [PATCH] active session card --- .../about/components/AboutContainer.js | 1 - .../components/ActiveSessionComponent.js | 92 +++++++++++++++++++ .../system/components/SystemComponent.js | 9 +- .../system/components/SystemContainer.js | 10 +- 4 files changed, 106 insertions(+), 6 deletions(-) create mode 100644 src/features/system/components/ActiveSessionComponent.js diff --git a/src/features/about/components/AboutContainer.js b/src/features/about/components/AboutContainer.js index 81265d8..42b0bc5 100644 --- a/src/features/about/components/AboutContainer.js +++ b/src/features/about/components/AboutContainer.js @@ -8,7 +8,6 @@ import TechnologiesComponent from "./TechnologiesComponent"; const AboutContainer = () => { return ( <> -


diff --git a/src/features/system/components/ActiveSessionComponent.js b/src/features/system/components/ActiveSessionComponent.js new file mode 100644 index 0000000..4deaa52 --- /dev/null +++ b/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 ( + + + + + } + action={ + + + + } + title={Active session} + subheader="Expand to see forwards" + /> + + + 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. + + + + + + + + + + + + + Method: + + Tabel ca cel de pana acum cu redirectarile. From va fi link si la + click va deschide in tab nou aplicatia + + + + + ); +}; + +export default ActiveSessionComponent; diff --git a/src/features/system/components/SystemComponent.js b/src/features/system/components/SystemComponent.js index 8e79937..309201e 100644 --- a/src/features/system/components/SystemComponent.js +++ b/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 = () => { - R + } action={ @@ -51,8 +52,8 @@ const SystemComponent = () => { } - title="Shrimp and Chorizo Paella" - subheader="September 14, 2016" + title={Server} + subheader="Host: StaWebSrv" /> diff --git a/src/features/system/components/SystemContainer.js b/src/features/system/components/SystemContainer.js index a8469bb..30498cb 100644 --- a/src/features/system/components/SystemContainer.js +++ b/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 ; + return ( + <> + +
+
+ + + ); }; SystemContainer.propTypes = {