From 4f2f6922cd5edfdf9f40b21d27763bd2feb8aee8 Mon Sep 17 00:00:00 2001
From: Evan Gray <battledingo@gmail.com>
Date: Tue, 26 Oct 2021 20:35:56 -0400
Subject: [PATCH] bridge_ui: nft stats style fixes pt 2

Change-Id: Ie2552764f4d4b0dff3a50909a635d957b0c4d6a3
---
 bridge_ui/src/components/Stats/NFTStats.tsx   |  2 +-
 bridge_ui/src/components/Stats/index.tsx      |  1 -
 .../Stats/tableComponents/MuiReactTable.jsx   | 39 +++++++------------
 .../components/TokenSelectors/NFTViewer.tsx   | 12 +++---
 4 files changed, 21 insertions(+), 33 deletions(-)

diff --git a/bridge_ui/src/components/Stats/NFTStats.tsx b/bridge_ui/src/components/Stats/NFTStats.tsx
index ea81d100..7eff2e21 100644
--- a/bridge_ui/src/components/Stats/NFTStats.tsx
+++ b/bridge_ui/src/components/Stats/NFTStats.tsx
@@ -61,7 +61,7 @@ const useStyles = makeStyles((theme) => ({
   },
   tableBox: {
     display: "flex",
-    justifyContent: "flex-start",
+    justifyContent: "center",
     "& > *": {
       margin: theme.spacing(1),
     },
diff --git a/bridge_ui/src/components/Stats/index.tsx b/bridge_ui/src/components/Stats/index.tsx
index 74665100..e1c6c938 100644
--- a/bridge_ui/src/components/Stats/index.tsx
+++ b/bridge_ui/src/components/Stats/index.tsx
@@ -43,7 +43,6 @@ const useStyles = makeStyles((theme) => ({
       margin: ".5rem",
     },
     marginBottom: theme.spacing(2),
-    overflow: "auto",
   },
   flexBox: {
     display: "flex",
diff --git a/bridge_ui/src/components/Stats/tableComponents/MuiReactTable.jsx b/bridge_ui/src/components/Stats/tableComponents/MuiReactTable.jsx
index e5de006b..c1b0ce6a 100644
--- a/bridge_ui/src/components/Stats/tableComponents/MuiReactTable.jsx
+++ b/bridge_ui/src/components/Stats/tableComponents/MuiReactTable.jsx
@@ -1,4 +1,4 @@
-import { IconButton, TableFooter } from "@material-ui/core";
+import { IconButton } from "@material-ui/core";
 import MaUTable from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
@@ -151,31 +151,22 @@ const EnhancedTable = ({ columns, data, skipPageReset, initialState = {} }) => {
               );
             })}
           </TableBody>
-          <TableFooter>
-            <TableRow>
-              <TablePagination
-                rowsPerPageOptions={[
-                  5,
-                  10,
-                  25,
-                  { label: "All", value: rows.length },
-                ]}
-                colSpan={columns.length}
-                count={rows.length}
-                rowsPerPage={pageSize}
-                page={pageIndex}
-                SelectProps={{
-                  inputProps: { "aria-label": "rows per page" },
-                  native: true,
-                }}
-                onPageChange={handlePageChange}
-                onRowsPerPageChange={handleRowsPerPageChange}
-                ActionsComponent={TablePaginationActions}
-              />
-            </TableRow>
-          </TableFooter>
         </MaUTable>
       </TableContainer>
+      <TablePagination
+        component="div"
+        rowsPerPageOptions={[5, 10, 25, { label: "All", value: rows.length }]}
+        count={rows.length}
+        rowsPerPage={pageSize}
+        page={pageIndex}
+        SelectProps={{
+          inputProps: { "aria-label": "rows per page" },
+          native: true,
+        }}
+        onPageChange={handlePageChange}
+        onRowsPerPageChange={handleRowsPerPageChange}
+        ActionsComponent={TablePaginationActions}
+      />
     </>
   );
 };
diff --git a/bridge_ui/src/components/TokenSelectors/NFTViewer.tsx b/bridge_ui/src/components/TokenSelectors/NFTViewer.tsx
index f76a0bba..500654d3 100644
--- a/bridge_ui/src/components/TokenSelectors/NFTViewer.tsx
+++ b/bridge_ui/src/components/TokenSelectors/NFTViewer.tsx
@@ -44,6 +44,7 @@ const LogoIcon = ({ chainId }: { chainId: ChainId }) =>
         height: "1em",
         width: "1em",
         marginLeft: "4px",
+        padding: "4px",
       }}
       src={solanaIcon}
       alt="Solana"
@@ -183,6 +184,9 @@ const useStyles = makeStyles((theme) => ({
     display: "none",
   },
   skeleton: {
+    height: "500px",
+    width: "400px",
+    maxWidth: "100%",
     borderRadius: 9,
     display: "grid",
     placeItems: "center",
@@ -216,13 +220,7 @@ const ViewerLoader = () => {
 
   return (
     <div className={classes.wormholePositioner}>
-      <Skeleton
-        width="400px"
-        height="500px"
-        variant="rect"
-        animation="wave"
-        className={classes.skeleton}
-      />
+      <Skeleton variant="rect" animation="wave" className={classes.skeleton} />
       <img src={Wormhole} alt="Wormhole" className={classes.wormholeIcon} />
     </div>
   );