From 12631b2d40ec93cdb27aef9c0b24b169ddc7092e Mon Sep 17 00:00:00 2001
From: Saad Ahmed Siddiqui <saadahm.siddiqui@gmail.com>
Date: Tue, 29 Oct 2024 12:07:22 +0100
Subject: [PATCH] fix: minor design changes

---
 .../ExplorerTable/ExplorerTable.tsx           | 18 ++++-------
 src/components/ExplorerTable/styles.ts        |  1 +
 src/components/Header/Header.tsx              | 32 +++++++------------
 src/components/Header/styles.ts               |  1 +
 .../TopBarNetworkConnect.tsx                  |  6 ++--
 src/index.css                                 |  6 ++--
 src/pages/ExplorerPage/ExplorerPage.tsx       |  8 ++---
 7 files changed, 29 insertions(+), 43 deletions(-)

diff --git a/src/components/ExplorerTable/ExplorerTable.tsx b/src/components/ExplorerTable/ExplorerTable.tsx
index 738c9d9..836f471 100644
--- a/src/components/ExplorerTable/ExplorerTable.tsx
+++ b/src/components/ExplorerTable/ExplorerTable.tsx
@@ -2,15 +2,7 @@ import React from "react"
 import { Table, TableHead, TableCell, TableBody, TableRow, CircularProgress } from "@mui/material"
 import clsx from "clsx"
 import { Link } from "react-router-dom"
-import {
-  EnvironmentMetadata,
-  EvmBridgeConfig,
-  ExplorerContextState,
-  ResourceTypes,
-  SharedConfigDomain,
-  Transfer,
-  TransferStatus,
-} from "../../types"
+import { EnvironmentMetadata, EvmBridgeConfig, ExplorerContextState, ResourceTypes, SharedConfigDomain, Transfer, TransferStatus } from "../../types"
 import { renderNetworkIcon, renderStatusIcon } from "../../utils/renderUtils"
 import {
   filterTransfers,
@@ -44,7 +36,7 @@ const ExplorerTable: React.FC<ExplorerTable> = ({ state, domainMetadata }: Explo
       const { deposit, amount, resource, fromDomainId, toDomainId, id, resourceID, fee, usdValue, timestamp } = transfer
       let { status } = transfer
 
-      if (deposit && deposit.timestamp && status === "pending" && isAfter(Date.now(), add(new Date(deposit.timestamp), {hours: 2}))) {
+      if (deposit && deposit.timestamp && status === "pending" && isAfter(Date.now(), add(new Date(deposit.timestamp), { hours: 2 }))) {
         status = "failed" as TransferStatus
       }
 
@@ -90,7 +82,7 @@ const ExplorerTable: React.FC<ExplorerTable> = ({ state, domainMetadata }: Explo
           </TableCell>
           <TableCell className={clsx(classes.row, classes.dataRow)}>
             <div className={classes.accountAddress}>
-              <span className={classes.statusPill}>
+              <span>
                 {renderStatusIcon(status, classes)} {displayStatus(status)}
               </span>
             </div>
@@ -112,7 +104,9 @@ const ExplorerTable: React.FC<ExplorerTable> = ({ state, domainMetadata }: Explo
           <TableCell className={clsx(classes.row, classes.dataRow)}>
             <span className={classes.amountInfo}>
               <span>
-                {type !== undefined ? formatTransferType(resourceID !== VITE_NATIVE_TOKEN_TRANSFER_RESOURCE_ID ? (type as ResourceTypes) : ResourceTypes.NATIVE) : "-"}
+                {type !== undefined
+                  ? formatTransferType(resourceID !== VITE_NATIVE_TOKEN_TRANSFER_RESOURCE_ID ? (type as ResourceTypes) : ResourceTypes.NATIVE)
+                  : "-"}
               </span>
             </span>
           </TableCell>
diff --git a/src/components/ExplorerTable/styles.ts b/src/components/ExplorerTable/styles.ts
index aa6e21c..15b9d3f 100644
--- a/src/components/ExplorerTable/styles.ts
+++ b/src/components/ExplorerTable/styles.ts
@@ -12,6 +12,7 @@ export const useStyles = makeStyles()(theme => {
       },
     },
     row: {
+      padding: "20px",
       fontWeight: 400,
       fontSize: 14,
       verticalAlign: "middle",
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 52f6015..f0837fe 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,33 +1,25 @@
 import { AppBar, Box, Container, Toolbar, Typography } from "@mui/material"
+import { useStyles } from "./styles"
 import TopBarNetworkConnect from "../TopBarNetworkComponent"
 import { useExplorer } from "../../context"
-import { useStyles } from "./styles"
 
 export default function Header() {
   const { classes } = useStyles()
   const explorerContext = useExplorer()
   const { explorerContextState } = explorerContext
+
   return (
     <AppBar position="static" color="transparent" className={classes.root}>
       <Container maxWidth="xl" className={classes.mainAppBar}>
-        <Toolbar disableGutters className={classes.toolBar}>
-          <div className={classes.title}>
-            <a href="/" className={classes.logo}>
-              <img src="/assets/images/logo1.svg" alt="logo" />
-            </a>
-            <Box
-              sx={{
-                display: { xs: "flex", sm: "flex", md: "flex" },
-                height: 70,
-              }}
-            >
-              <Typography variant="h3" className={classes.titleContent}>
-                Sygma Protocol Explorer
-              </Typography>
-            </Box>
-          </div>
-        </Toolbar>
-        <div className={classes.connectButtonContainer}>
+        <Box display={"flex"} flexGrow={"2"}>
+          <a href="/" className={classes.logo}>
+            <img src="/assets/images/logo1.svg" alt="logo" />
+          </a>
+          <Typography marginTop={"5px"} variant="h5" className={classes.titleContent}>
+            Sygma Protocol Explorer
+          </Typography>
+        </Box>
+        <Box display={"flex"} flexGrow={"1"} justifyContent={"end"}>
           <TopBarNetworkConnect
             walletConnecting={false}
             homeConfig={undefined}
@@ -39,7 +31,7 @@ export default function Header() {
             explorerContextDispatcher={explorerContext.explorerContextDispatcher}
             explorerContextState={explorerContextState}
           />
-        </div>
+        </Box>
       </Container>
     </AppBar>
   )
diff --git a/src/components/Header/styles.ts b/src/components/Header/styles.ts
index 15b61c6..7209559 100644
--- a/src/components/Header/styles.ts
+++ b/src/components/Header/styles.ts
@@ -11,6 +11,7 @@ export const useStyles = makeStyles()(theme => {
       flexDirection: "row",
       justifyContent: "space-between",
       marginTop: 25,
+      marginBottom: 25,
     },
     toolBar: {
       display: "flex",
diff --git a/src/components/TopBarNetworkComponent/TopBarNetworkConnect.tsx b/src/components/TopBarNetworkComponent/TopBarNetworkConnect.tsx
index f76626f..388a5c5 100644
--- a/src/components/TopBarNetworkComponent/TopBarNetworkConnect.tsx
+++ b/src/components/TopBarNetworkComponent/TopBarNetworkConnect.tsx
@@ -68,7 +68,7 @@ export default function TopBarNetworkConnect({ getAccount, getChainId, chainId,
       <section className={classes.state}>
         {window.ethereum !== undefined &&
           (!isReady ? (
-            <Button fullWidth variant="contained" onClick={handleClickOpen} sx={{ px: 3, fontSize: 18 }}>
+            <Button fullWidth variant="contained" onClick={handleClickOpen} sx={{ px: 3 }}>
               Connect Wallet
             </Button>
           ) : (
@@ -82,13 +82,13 @@ export default function TopBarNetworkConnect({ getAccount, getChainId, chainId,
                   borderRadius: 10,
                 }}
               >
-                <Typography variant="h6" className={classes.address}>
+                <Typography variant="button" className={classes.address}>
                   {currentChainId !== undefined && (
                     <img src={`/assets/icons/${getIconNamePerChainId(currentChainId)}`} alt={"native token icon"} className={classes.indicator} />
                   )}
                 </Typography>
                 <div className={classes.accountInfo}>
-                  <Typography variant="h6" className={classes.address}>
+                  <Typography variant="button" textTransform={"lowercase"} className={classes.address}>
                     {shortenAddress(localAddress!)}
                   </Typography>
                   <div className={classes.logoutContainer}>
diff --git a/src/index.css b/src/index.css
index ec2585e..26c328e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,13 +1,11 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
 }
diff --git a/src/pages/ExplorerPage/ExplorerPage.tsx b/src/pages/ExplorerPage/ExplorerPage.tsx
index c1c94cf..9d59704 100644
--- a/src/pages/ExplorerPage/ExplorerPage.tsx
+++ b/src/pages/ExplorerPage/ExplorerPage.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react"
-import { Alert, Button, Container, Paper } from "@mui/material"
+import { Alert, Box, Button, Container, Paper } from "@mui/material"
 
 import { ethers } from "ethers"
 import { ExplorerTable } from "../../components"
@@ -38,11 +38,11 @@ const ExplorerPage = (): JSX.Element => {
 
   return (
     <Container sx={{ display: "grid", gridTemplateRows: "1fr 15fr" }}>
-      <div>
-        <Button variant="contained" className={classes.refreshTableButton} onClick={handleRefreshTable}>
+      <Box display={"flex"} justifyContent={"end"} marginBottom={"10px"}>
+        <Button variant="contained" onClick={handleRefreshTable}>
           Refresh Table
         </Button>
-      </div>
+      </Box>
       <Paper
         elevation={3}
         sx={{