Display images for empty states

Images for empty states on Nodes- and Notification-Page added

.gitignore

@@ -5,6 +5,7 @@ DOCKER_REGISTRY_PASSWORD
 *~
 *-audit.json
 .vscode/*
+.vs/*
 Untitled*
 node_modules
 yarn-error.log

frontend/src/pages/Common/EmptyStates.js

@@ -0,0 +1,53 @@
+import React from 'react';
+
+import Typography from "@material-ui/core/Typography";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemText from "@material-ui/core/ListItemText";
+import Divider from "@material-ui/core/Divider";
+import TableRow from "@material-ui/core/TableRow";
+import TableCell from "@material-ui/core/TableCell";
+
+import globalStyles from "../../styles";
+
+// open source for images for empty fields: https://undraw.co/
+// color-code: #53BBFE
+
+// icons from freepik: Icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon"> www.flaticon.com</a>
+
+
+export const GetNodesForOrgaEmptyState = () => {
+  return (
+    <div key="default">
+      <table style={{ alignItems: "center", textAlign: "center"}}>
+        <tr>
+          <td width="200vw"><img src="images-for-empty-state/nodes-for-orga-empty-state.png" alt="No notifications found" width="150vw"/></td>
+          <td><Typography variant="subtitle1" style={{ color: "#B1B0B0"}}>No additonal information found.</Typography></td>
+        </tr>
+      </table>
+    </div>
+
+  );
+};
+
+export const GetListEntriesEmptyState = () => {
+  return (
+    <div key="default">
+      <table style={{ alignItems: "center", textAlign: "center"}}>
+        <tr>
+          <td width="200vw"><img src="images-for-empty-state/organization-empty-state.png" alt="No notifications found" width="150vw"/></td>
+          <td><Typography variant="subtitle1" style={{ color: "#B1B0B0"}}>No organizations found.</Typography></td>
+        </tr>
+      </table>
+    </div>
+  );
+};
+
+export const GetNotificationEmptyState = () => {
+  return (
+    <div style={{ textAlign: "center" }}>
+      <img src="images-for-empty-state/notification-empty-state.png" alt="No notifications found" width="505vw"/>
+      <Typography variant="subtitle1" style={{ color: "#B1B0B0"}}>We couldn't find any notifications.</Typography>
+    </div>
+  );
+};
+

frontend/src/pages/Navbar/SideNavCard.js

@@ -120,22 +120,16 @@ const SideNavCard = ({
       </List>
     ) : null}
     <List>
-      <Subheader> {strings.users.groups} </Subheader>
-      {groups.length ? (groups.map(group => {
+      {groups.length ? <Subheader> {strings.users.groups} </Subheader> : undefined}
+      {groups.map(group => {
         return(
         <div key={group.groupId}>
           <ListItem>
             <ListItemText primary={group.displayName} secondary={strings.common.id + ": " + group.groupId} />
           </ListItem>
           <Divider />
         </div>);
-      })) : (
-        <div key="default">
-          <ListItem>
-            <ListItemText secondary={<i>No groups found</i>} />
-          </ListItem>
-        </div>
-      )}
+      })}
     </List>
     <div style={{ flexGrow: 1 }} />
     <VersionsTable versions={versions} />

frontend/src/pages/Nodes/NodeVoting.js

@@ -13,6 +13,7 @@ import Button from "@material-ui/core/Button";
 import { withStyles } from "@material-ui/core/styles";
 import strings from "../../localizeStrings";
 import { canApproveNode } from "../../permissions";
+import { GetNodesForOrgaEmptyState, GetListEntriesEmptyState } from "../Common/EmptyStates";
 
 const styles = theme => ({
   container: {
@@ -113,33 +114,11 @@ const getListEntries = (newNodesForExistingOrga, canApprove, classes, cb) => {
         </div>
       );
     });
-  } else{
-    return (
-      <div key="default">
-        <ListItem key="default">
-          <ListItemText
-            primary={
-              <div className={classes.listItem}>
-                <Typography variant="subtitle1"><i>No organization</i></Typography>
-              </div>
-            }
-            secondary={<i>Address: No address</i>}
-          />
-        </ListItem>
-        <Divider />
-      </div>
-    );
+  } else {
+    return <GetListEntriesEmptyState />;
   }
 };
 
-const getNodesForOrgaPlaceholder = (classes) => {
-  return (
-    <div className={classes.listItem}>
-      <Typography variant="subtitle1"><p><i>No additonal information found</i></p></Typography>
-    </div>
-  )
-}
-
 const NodeVoting = ({
   showErrorSnackbar,
   storeSnackbarMessage,
@@ -157,8 +136,7 @@ const NodeVoting = ({
     approveNewNodeForExistingOrganization(address)
   );
 
-  const nodesOrgaForPlaceholder = getNodesForOrgaPlaceholder(classes);
-  let nodesForOrga = nodesExistingOrga.length ? nodesExistingOrga : nodesOrgaForPlaceholder;
+  let nodesForOrga = nodesExistingOrga.length ? nodesExistingOrga : <GetNodesForOrgaEmptyState />;
 
   const newOrganizationNodes = getNewOrganizationNodes(nodes);
   const nodesNewOrga = getListEntries(newOrganizationNodes, canApprove, classes, ({ organization }) =>
@@ -184,4 +162,5 @@ const NodeVoting = ({
     </div>
   );
 };
+
 export default withStyles(styles)(NodeVoting);

frontend/src/pages/Nodes/NodesTable.js

@@ -49,35 +49,28 @@ const NodesTable = ({ nodes, classes }) => {
           {strings.nodesDashboard.network}
         </Typography>
       </div>
-      <Table>
-        <TableHead>
-          <TableRow>
-            <TableCell>{strings.common.organization}</TableCell>
-            <TableCell>{strings.nodesDashboard.nodes}</TableCell>
-            <TableCell>{strings.nodesDashboard.access}</TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-
-          {groupedNodes.length ? groupedNodes.map(nodeGroup => {
-            return (
-              <TableRow key={nodeGroup.organization}>
-                <TableCell component="th" scope="row">
-                  {nodeGroup.organization}
-                </TableCell>
-                <TableCell> {nodeGroup.count} </TableCell>
-                <TableCell> {nodeGroup.permissions}</TableCell>
-              </TableRow>
-            );
-          }) : 
-            <TableRow key="default">
-              <TableCell component="th" scope="row">
-                <i>No entries</i>
-              </TableCell>
-            </TableRow>}
-
-        </TableBody>
-      </Table>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell>{strings.common.organization}</TableCell>
+              <TableCell>{strings.nodesDashboard.nodes}</TableCell>
+              <TableCell>{strings.nodesDashboard.access}</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {groupedNodes.map(nodeGroup => {
+              return (
+                <TableRow key={nodeGroup.organization}>
+                  <TableCell component="th" scope="row">
+                    {nodeGroup.organization}
+                  </TableCell>
+                  <TableCell> {nodeGroup.count} </TableCell>
+                  <TableCell> {nodeGroup.permissions}</TableCell>
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
     </Paper>
   );
 };

frontend/src/pages/Notifications/NotificationListItems.js

@@ -11,6 +11,7 @@ import LaunchIcon from "@material-ui/icons/ZoomIn";
 import dayjs from "dayjs";
 import React from "react";
 import classNames from "classnames";
+import { GetNotificationEmptyState } from '../Common/EmptyStates';
 
 import { intentMapping, parseURI, getParentData, isAllowedToSee } from "./helper";
 import strings from "../../localizeStrings";
@@ -115,14 +116,7 @@ const NotificationListItems = ({
       );
     });
   }else{
-    return (
-      <div key="default">
-        <Divider />
-          <ListItemText
-          secondary={<p><i>We didn't find any notifications</i></p>}
-        />
-      </div>
-    );
+    return <GetNotificationEmptyState />;
   }
 };