Reorganize empty state code

frontend/src/pages/Common/BudgetEmptyState.js

@@ -0,0 +1,47 @@
+import { withStyles, withTheme } from "@material-ui/core/styles";
+import Typography from "@material-ui/core/Typography";
+import React from "react";
+
+import strings from "../../localizeStrings";
+
+const styles = theme => {
+  return {
+    subtitle: {
+      color: theme.palette.grey.dark
+    },
+    caption: {
+      color: theme.palette.grey.main
+    }
+  };
+};
+
+const BudgetEmptyState = withTheme()(
+  withStyles(styles)(props => {
+    const { text, classes } = props;
+    return (
+      <table style={{ alignItems: "center" }}>
+        <tbody>
+          <tr height="200vh">
+            <td max-width="200vw">
+              <img
+                src="/images-for-empty-state/project-budget-empty-state.png"
+                alt={strings.common.no_budget}
+                width="150vw"
+              />
+            </td>
+            <td>
+              <Typography variant="subtitle1" className={classes.subtitle}>
+                {strings.common.no_budget}
+              </Typography>
+              <Typography variant="caption" className={classes.caption}>
+                {text}
+              </Typography>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    );
+  })
+);
+
+export default BudgetEmptyState;

frontend/src/pages/Nodes/NodeVoting.js

@@ -12,7 +12,7 @@ import React from "react";
 
 import strings from "../../localizeStrings";
 import { canApproveNode } from "../../permissions";
-import { NewOrganizations as EmptyNewOrganizations, ExistingNodes as EmptyExistingNodes } from "../Common/EmptyStates";
+import { NewOrganizationsEmptyState, ExistingNodesEmptyState } from "./NodesEmptyStates";
 
 const styles = theme => ({
   container: {
@@ -120,14 +120,7 @@ const getListEntries = (nodes, canApprove, classes, cb) => {
   });
 };
 
-const NodeVoting = ({
-  nodes,
-  approveNewNodeForExistingOrganization,
-  allowedIntents,
-  classes,
-  isDataLoading,
-  ...props
-}) => {
+const NodeVoting = ({ nodes, approveNewNodeForExistingOrganization, allowedIntents, classes, isDataLoading }) => {
   const canApprove = canApproveNode(allowedIntents);
 
   const [_self, newOrgaNodes, existingOrgaNodes] = splitNodes(nodes);
@@ -147,7 +140,7 @@ const NodeVoting = ({
           <div />
         ) : (
           <CardContent style={styles.cardContent}>
-            <List>{newOrgaNodes.length ? newOrgaNodesListEntries : <EmptyNewOrganizations />}</List>
+            <List>{newOrgaNodes.length ? newOrgaNodesListEntries : <NewOrganizationsEmptyState />}</List>
           </CardContent>
         )}
       </Card>
@@ -157,7 +150,7 @@ const NodeVoting = ({
           <div />
         ) : (
           <CardContent className={classes.cardContent}>
-            <List>{existingOrgaNodes.length ? existingOrgaNodesListEntries : <EmptyExistingNodes />}</List>
+            <List>{existingOrgaNodes.length ? existingOrgaNodesListEntries : <ExistingNodesEmptyState />}</List>
           </CardContent>
         )}
       </Card>