Server.Thoughts

public/locales/en/translations.json

@@ -55,6 +55,7 @@
   "Server": {
     "Title": "Server",
     "Subtitle": "Expand to see details",
+    "Thoughts": "This reverse proxy is the only open gate to a secret creation land. There any impulse or thought can fly free and can be materialized without limits.",
     "ServerHostName": "Server host",
     "ApiHostName": "API host",
     "Domain": "Domain",
@@ -64,7 +65,8 @@
     "Actions": {
       "SendMessageToAuthor": "Send message to author"
     },
-    "MessageForAuthor": "Message for author"
+    "MessageForAuthor": "Message for author",
+    "Details": "Details"
   },
   "Charts": {
     "Server": {

public/locales/ro/translations.json

@@ -46,6 +46,7 @@
   "Server": {
     "Title": "Server",
     "Subtitle": "Extindeţi pentru a vedea detalii",
+    "Thoughts": "Acest reverse proxy este singura poartă deschisă către un teren secret al creației. Acolo orice impuls sau gând poate zbura liber și poate fi materializat fără limite.",
     "ServerHostName": "Gazdă server",
     "ApiHostName": "Gazdă API",
     "Domain": "Domeniu",
@@ -55,7 +56,8 @@
     "Actions": {
       "SendMessageToAuthor": "Trimite mesaj către autor"
     },
-    "MessageForAuthor": "Mesaj pentru autor"
+    "MessageForAuthor": "Mesaj pentru autor",
+    "Details": "Detalii"
   },
   "Charts": {
     "Server": {

src/features/server/components/ServerComponent.js

@@ -10,7 +10,9 @@ import {
   Collapse,
   Avatar,
   IconButton,
-  Tooltip
+  Tooltip,
+  Menu,
+  MenuItem
 } from "@material-ui/core";
 import ShareIcon from "@material-ui/icons/Share";
 import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
@@ -35,12 +37,36 @@ const ServerComponent = ({
   const { t } = useTranslation();
 
   const [expanded, setExpanded] = React.useState(false);
+  const [anchorEl, setAnchorEl] = React.useState(null);
 
   const handleExpandClick = () => {
     setExpanded(!expanded);
   };
 
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleDetailsClick = () => {
+    openAbout();
+    handleClose();
+  };
+
   return (
+    <>
+      <Menu
+        id="server-details-menu"
+        anchorEl={anchorEl}
+        keepMounted
+        open={Boolean(anchorEl)}
+        onClose={handleClose}
+      >
+        <MenuItem onClick={handleDetailsClick}>{t("Server.Details")}</MenuItem>
+      </Menu>
       <Card>
         <CardHeader
           avatar={
@@ -49,7 +75,11 @@ const ServerComponent = ({
             </Avatar>
           }
           action={
-          <IconButton aria-label="settings">
+            <IconButton
+              aria-label="settings"
+              onClick={handleClick}
+              color="primary"
+            >
               <MoreVertIcon />
             </IconButton>
           }
@@ -61,14 +91,16 @@ const ServerComponent = ({
             <ServerSummary
               data={data}
               serverHost={serverHost}
-            openAbout={openAbout}
               handleOpenInNewTab={handleOpenInNewTab}
             />
           )}
         </CardContent>
         <CardActions disableSpacing>
           <Tooltip title={t("Server.Actions.SendMessageToAuthor")}>
-          <IconButton aria-label="sent message" onClick={showMessageForAuthor}>
+            <IconButton
+              aria-label="sent message"
+              onClick={showMessageForAuthor}
+            >
               <MessageRoundedIcon />
             </IconButton>
           </Tooltip>
@@ -92,6 +124,7 @@ const ServerComponent = ({
           </CardContent>
         </Collapse>
       </Card>
+    </>
   );
 };
 

src/features/server/components/ServerSummary.js

@@ -7,7 +7,7 @@ import styles from "../../../components/common/styles/gridStyles";
 
 const useStyles = makeStyles(styles);
 
-const ServerSummary = ({ data, serverHost, openAbout, handleOpenInNewTab }) => {
+const ServerSummary = ({ data, serverHost, handleOpenInNewTab }) => {
   const classes = useStyles();
   const { t } = useTranslation();
 
@@ -41,12 +41,7 @@ const ServerSummary = ({ data, serverHost, openAbout, handleOpenInNewTab }) => {
 
       <Grid item xs={12} sm={12} md={12}>
         <Typography variant="body2" gutterBottom color="textSecondary">
-          {
+          {t("Server.Thoughts")}
-            "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>
@@ -56,7 +51,6 @@ const ServerSummary = ({ data, serverHost, openAbout, handleOpenInNewTab }) => {
 ServerSummary.propTypes = {
   data: PropTypes.object.isRequired,
   serverHost: PropTypes.string,
-  openAbout: PropTypes.func.isRequired,
   handleOpenInNewTab: PropTypes.func.isRequired
 };