bridge_ui: nft stats style fixes pt 2

Change-Id: Ie2552764f4d4b0dff3a50909a635d957b0c4d6a3

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),
     },

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

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}
+      />
     </>
   );
 };

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
+      <Skeleton variant="rect" animation="wave" className={classes.skeleton} />
-        width="400px"
-        height="500px"
-        variant="rect"
-        animation="wave"
-        className={classes.skeleton}
-      />
       <img src={Wormhole} alt="Wormhole" className={classes.wormholeIcon} />
     </div>
   );