server card text

src/features/server/components/ServerComponent.js

@@ -21,7 +21,7 @@ import { useTranslation } from "react-i18next";
 
 const useStyles = makeStyles(styles);
 
-const ServerComponent = ({ data }) => {
+const ServerComponent = ({ data, openAbout }) => {
   const classes = useStyles();
   const { t } = useTranslation();
 
@@ -49,7 +49,9 @@ const ServerComponent = ({ data }) => {
           data.hosts ? data.hosts.server : ""
         }`}
       />
-      <CardContent>{data.loaded && <ServerSummary data={data} />}</CardContent>
+      <CardContent>
+        {data.loaded && <ServerSummary data={data} openAbout={openAbout} />}
+      </CardContent>
       <CardActions disableSpacing>
         <IconButton aria-label="add to favorites">
           <FavoriteIcon />
@@ -104,7 +106,8 @@ const ServerComponent = ({ data }) => {
 };
 
 ServerComponent.propTypes = {
-  data: PropTypes.object.isRequired
+  data: PropTypes.object.isRequired,
+  openAbout: PropTypes.func.isRequired
 };
 
 export default ServerComponent;

src/features/server/components/ServerContainer.js

@@ -4,14 +4,20 @@ import { bindActionCreators } from "redux";
 import PropTypes from "prop-types";
 import { loadServerData, loadSystemVersion } from "../actionCreators";
 import ServerComponent from "./ServerComponent";
+import { withRouter } from "react-router-dom";
 
-const ServerContainer = ({ actions, data }) => {
+const ServerContainer = ({ actions, data, history }) => {
   useEffect(() => {
     actions.loadServerData();
     actions.loadSystemVersion();
   }, []);
 
-  return <ServerComponent data={data} />;
+  const openAbout = (event) => {
+    history.push("/about");
+    event.preventDefault();
+  };
+
+  return <ServerComponent data={data} openAbout={openAbout} />;
 };
 
 ServerContainer.propTypes = {
@@ -31,4 +37,7 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(ServerContainer);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(withRouter(ServerContainer));

src/features/server/components/ServerSummary.js

@@ -3,36 +3,52 @@ import PropTypes from "prop-types";
 import { Grid } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
 import { useTranslation } from "react-i18next";
+import Typography from "@material-ui/core/Typography";
+import Link from "@material-ui/core/Link";
 import styles from "../../../components/common/styles/gridStyles";
 
 const useStyles = makeStyles(styles);
 
-const ServerSummary = ({ data }) => {
+const ServerSummary = ({ data, openAbout }) => {
   const classes = useStyles();
   const { t } = useTranslation();
 
   return (
     <Grid container>
-      <Grid item xs={12} sm={4} md={4}>
+      <Grid item xs={6} sm={4} md={4}>
         {`${t("Server.Domain")}: `}
         <span className={classes.value}>{data.domain}</span>
       </Grid>
 
-      <Grid item xs={12} sm={4} md={4}>
+      <Grid item xs={6} sm={4} md={4}>
         {`${t("Server.ServerHostName")}: `}
         <span className={classes.value}>{data.hosts.server}</span>
       </Grid>
 
-      <Grid item xs={12} sm={4} md={4}>
+      <Grid item xs={6} sm={4} md={4}>
         {`${t("Server.ApiHostName")}: `}
         <span className={classes.value}>{data.hosts.api}</span>
       </Grid>
+
+      <Grid item xs={6} sm={4} md={4}></Grid>
+
+      <Grid item xs={12} sm={12} md={12}>
+        <Typography variant="body2" gutterBottom color="textSecondary">
+          {
+            "Bla bla bla, bla bla bla, bla bla bla, Bla bla bla, bla bla bla, bla bla bla, Bla bla bla, bla bla bla. Pentru mai multe detalii click "
+          }
+          <Link href="#" onClick={openAbout} variant="body2">
+            {"aici"}
+          </Link>
+        </Typography>
+      </Grid>
     </Grid>
   );
 };
 
 ServerSummary.propTypes = {
-  data: PropTypes.object.isRequired
+  data: PropTypes.object.isRequired,
+  openAbout: PropTypes.func.isRequired
 };
 
 export default ServerSummary;