style: implement Overview design

src/common/components/data-display/LabeledRow.tsx

@@ -1,47 +1,91 @@
-import { Divider, Grid, makeStyles } from "@material-ui/core";
-import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined";
+import { Grid, makeStyles } from "@material-ui/core";
 import React, { ReactElement } from "react";
 import { copyToClipboard } from "../../utils/appUtil";
-import IconButton from "../input/buttons/IconButton";
+import { copyIcon } from "../../../common/utils/svgIcons";
+import ButtonBase from "@material-ui/core/ButtonBase";
 
 type LabeledRowProps = {
   label: string;
   value: string | number;
-  paddingSpacing?: number;
   showCopyIcon?: boolean;
+  padding?: string;
   reserveSpaceForCopyIcon?: boolean;
+  statusIcon?: string;
 };
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(() => ({
   cell: (props: LabeledRowProps) => ({
-    padding: theme.spacing(props.paddingSpacing ?? 2),
-    textAlign: "center",
+    padding: props.padding ? props.padding : "15px 40px",
     wordWrap: "break-word",
     whiteSpace: "pre-wrap",
+    fontSize: "16px",
   }),
+  textLabel: {
+    color: "#979797",
+  },
+  textValue: {
+    color: "#f2f2f2",
+  },
+  copyIcon: {
+    paddingRight: "5px",
+  },
+  copyContainer: {
+    cursor: "pointer",
+    color: "#f15a24",
+    fontSize: "14px",
+    display: "flex",
+    justifyContent: "flex-end",
+  },
+  statusContainer: {
+    display: "flex",
+    alignItems: "center",
+  },
+  statusIcon: {
+    marginRight: "10px",
+  },
 }));
 
 const LabeledRow = (props: LabeledRowProps): ReactElement => {
   const { label, value, showCopyIcon, reserveSpaceForCopyIcon } = props;
   const classes = useStyles(props);
 
   return (
-    <Grid container item justify="space-between" alignItems="center">
-      <Grid item xs={reserveSpaceForCopyIcon ? 3 : 4} className={classes.cell}>
+    <Grid container item alignItems="center">
+      <Grid
+        item
+        xs={reserveSpaceForCopyIcon ? 2 : 3}
+        className={`${classes.cell} ${classes.textLabel}`}
+      >
         {label}
       </Grid>
-      <Divider orientation="vertical" flexItem />
-      <Grid item xs={reserveSpaceForCopyIcon ? 6 : 7} className={classes.cell}>
-        {value}
+
+      <Grid
+        item
+        xs={reserveSpaceForCopyIcon ? 6 : 7}
+        className={`${classes.cell} ${classes.textValue}`}
+      >
+        {props.statusIcon ? (
+          <div className={classes.statusContainer}>
+            <img
+              src={props.statusIcon}
+              className={classes.statusIcon}
+              alt="status"
+            />
+            {value}
+          </div>
+        ) : (
+          <div>{value}</div>
+        )}
       </Grid>
       {reserveSpaceForCopyIcon && (
         <Grid item xs={2} className={classes.cell}>
           {showCopyIcon && (
-            <IconButton
-              icon={<FileCopyOutlinedIcon fontSize="small" />}
-              tooltipTitle="Copy to clipboard"
-              onClick={() => copyToClipboard(value)}
-            />
+            <div className={classes.copyContainer}>
+              <ButtonBase onClick={() => copyToClipboard(value)}>
+                <img src={copyIcon} alt="copy" className={classes.copyIcon} />
+                Copy
+              </ButtonBase>
+            </div>
           )}
         </Grid>
       )}

src/common/components/data-display/text/PageTitle.tsx

@@ -0,0 +1,47 @@
+import React, { ReactElement } from "react";
+import { Icon } from "@material-ui/core";
+import { makeStyles } from "@material-ui/core";
+import { notificationIcon } from "../../../utils/svgIcons";
+
+type PageTitleProps = {
+  title: string;
+};
+
+const useStyles = makeStyles(() => ({
+  headingContainer: {
+    display: "flex",
+    alignItems: "center",
+  },
+  heading: {
+    fontSize: "30px",
+    fontWeight: 500,
+  },
+  notificationIconContainer: {
+    marginLeft: "auto",
+  },
+  notificationIcon: {
+    cursor: "pointer",
+  },
+}));
+
+const PageTitle = (props: PageTitleProps): ReactElement => {
+  const { title } = props;
+  const classes = useStyles();
+
+  return (
+    <div className={classes.headingContainer}>
+      <h1 className={classes.heading}>{title}</h1>
+      {false && (
+        <Icon className={classes.notificationIconContainer}>
+          <img
+            src={notificationIcon}
+            alt="notifications"
+            className={classes.notificationIcon}
+          />
+        </Icon>
+      )}
+    </div>
+  );
+};
+
+export default PageTitle;

src/common/utils/svgIcons.ts

@@ -1,3 +1,21 @@
 import openDexLogo from "../../assets/OpenDEXLogo.svg";
+import expandIcon from "../../assets/icon-expand.svg";
+import readyIcon from "../../assets/icon-ready.svg";
+import syncingIcon from "../../assets/icon-syncing.svg";
+import copyIcon from "../../assets/icon-copy.svg";
+import notificationIcon from "../../assets/icon-notification.svg";
+import notificationActiveIcon from "../../assets/icon-notification-active.svg";
+import downloadIcon from "../../assets/icon-download-log.svg";
+import collapseIcon from "../../assets/icon-collapse.svg";
 
-export { openDexLogo };
+export {
+  openDexLogo,
+  expandIcon,
+  readyIcon,
+  syncingIcon,
+  copyIcon,
+  notificationIcon,
+  notificationActiveIcon,
+  downloadIcon,
+  collapseIcon,
+};

src/dashboard/Dashboard.tsx

@@ -44,7 +44,7 @@ const useStyles = makeStyles((theme: Theme) =>
     content: {
       marginLeft: drawerWidth,
       backgroundColor: theme.palette.background.default,
-      padding: theme.spacing(3),
+      padding: theme.spacing(4),
       height: "100vh",
       display: "flex",
       flexDirection: "column",