style: implement Overview design

Author: scorebreaker

src/assets/icon-copy.svg

@@ -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;
   reserveSpaceForCopyIcon?: boolean;
+  statusIcon?: string;
 };
 
 const useStyles = makeStyles((theme) => ({
   cell: (props: LabeledRowProps) => ({
     padding: theme.spacing(props.paddingSpacing ?? 2),
-    textAlign: "center",
     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/assets/icon-download-log.svg

@@ -1,3 +1,19 @@
 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";
 
-export { openDexLogo };
+export {
+  openDexLogo,
+  expandIcon,
+  readyIcon,
+  syncingIcon,
+  copyIcon,
+  notificationIcon,
+  notificationActiveIcon,
+  downloadIcon,
+};

src/assets/icon-expand.svg

@@ -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",