Fix table layouts

tidy up exports

explorer/src/components/ConnectKeplrWallet.tsx

@@ -67,7 +67,11 @@ export const ConnectKeplrWallet = () => {
       );
     }
 
-    return <Button onClick={() => connect()}>Connect Wallet</Button>;
+    return (
+      <Button variant="outlined" onClick={() => connect()}>
+        Connect Wallet
+      </Button>
+    );
   };
 
   return <Box sx={{ mr: 2 }}>{getGlobalbutton()}</Box>;

explorer/src/components/Delegations/DelegateIconButton.tsx

@@ -1,22 +1,23 @@
 import * as React from 'react';
 import { IconButton, Tooltip } from '@mui/material';
 import { SxProps } from '@mui/system';
-import { DelegateIcon } from '../../../icons/DelevateSVG';
+import { DelegateIcon } from '../../icons/DelevateSVG';
 
 export const DelegateIconButton: FCWithChildren<{
+  size?: 'small' | 'medium';
   disabled?: boolean;
   tooltip?: React.ReactNode;
   sx?: SxProps;
   onDelegate: () => void;
-}> = ({ tooltip, onDelegate, sx, disabled }) => {
+}> = ({ tooltip, onDelegate, sx, disabled, size = 'medium' }) => {
   const handleOnDelegate = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
     onDelegate();
   };
   return (
     <Tooltip title={tooltip || undefined}>
-      <IconButton disabled={disabled} onClick={handleOnDelegate} sx={sx} color="primary">
-        <DelegateIcon />
+      <IconButton size={size} disabled={disabled} onClick={handleOnDelegate} sx={sx}>
+        <DelegateIcon fontSize={size} />
       </IconButton>
     </Tooltip>
   );

explorer/src/components/Delegations/DelegateModal.tsx

@@ -7,8 +7,8 @@ import { useChain } from '@cosmos-kit/react';
 import { SimpleModal } from './SimpleModal';
 import { ModalListItem } from './ModalListItem';
 import { DelegationModalProps } from './DelegationModal';
-import { unymToNym, validateAmount } from '../../../utils/currency';
-import { urls } from '../../../utils';
+import { unymToNym, validateAmount } from '../../utils/currency';
+import { urls } from '../../utils';
 
 const MIN_AMOUNT_TO_DELEGATE = 10;
 const MIXNET_CONTRACT_ADDRESS = 'n17srjznxl9dvzdkpwpw24gg668wc73val88a6m5ajg6ankwvz9wtst0cznr';

explorer/src/components/Delegations/SimpleModal.tsx

@@ -4,7 +4,7 @@ import CloseIcon from '@mui/icons-material/Close';
 import ErrorOutline from '@mui/icons-material/ErrorOutline';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
-import { useIsMobile } from '../../../hooks/useIsMobile';
+import { useIsMobile } from '../../hooks/useIsMobile';
 
 export const modalStyle = (width: number | string = 600) => ({
   position: 'absolute' as 'absolute',

explorer/src/components/Delegations/index.ts

@@ -0,0 +1,10 @@
+export * from './ConfirmationModal';
+export * from './DelegateIconButton';
+export * from './DelegationModal';
+export * from './DelegateModal';
+export * from './ErrorModal';
+export * from './LoadingModal';
+export * from './ModalDivider';
+export * from './ModalListItem';
+export * from './SimpleModal';
+export * from './styles';

explorer/src/components/Filters/Filters.tsx

@@ -1,5 +1,4 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { Tune } from '@mui/icons-material';
 import {
   Button,
   Dialog,
@@ -20,6 +19,7 @@ import { EnumFilterKey, TFilterItem, TFilters } from '../../typeDefs/filters';
 import { formatOnSave, generateFilterSchema } from './filterSchema';
 import { Api } from '../../api';
 import { useIsMobile } from '../../hooks/useIsMobile';
+import FiltersButton from './FiltersButton';
 
 const FilterItem = ({
   label,
@@ -150,15 +150,7 @@ export const Filters = () => {
           {mixnodes?.data?.length} mixnodes matched your criteria
         </Alert>
       </Snackbar>
-      <Button
-        size="large"
-        variant="contained"
-        endIcon={<Tune />}
-        onClick={handleToggleShowFilters}
-        sx={{ textTransform: 'none', width: isMobile ? '100%' : 'inherit' }}
-      >
-        Advanced filters
-      </Button>
+      <FiltersButton onClick={handleToggleShowFilters} fullWidth />
       <Dialog open={showFilters} onClose={handleToggleShowFilters} maxWidth="md" fullWidth>
         <DialogTitle>Mixnode filters</DialogTitle>
         <DialogContent dividers>

explorer/src/components/Filters/FiltersButton.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Button, IconButton } from '@mui/material';
+import { Tune } from '@mui/icons-material';
+
+type FiltersButtonProps = {
+  iconOnly?: boolean;
+  fullWidth?: boolean;
+  onClick: () => void;
+};
+
+const FiltersButton = ({ iconOnly, fullWidth, onClick }: FiltersButtonProps) => {
+  if (iconOnly) {
+    return (
+      <IconButton onClick={onClick} color="primary">
+        <Tune />
+      </IconButton>
+    );
+  }
+
+  return (
+    <Button
+      fullWidth={fullWidth}
+      size="large"
+      variant="contained"
+      endIcon={<Tune />}
+      onClick={onClick}
+      sx={{ textTransform: 'none' }}
+    >
+      Filters
+    </Button>
+  );
+};
+
+export default FiltersButton;

explorer/src/components/MixNodes/DetailSection.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { Box, Button, Grid, Typography, useTheme } from '@mui/material';
 import Identicon from 'react-identicons';
+import { useIsMobile } from '@src/hooks/useIsMobile';
 import { MixnodeRowType } from '.';
 import { getMixNodeStatusText, MixNodeStatus } from './Status';
 import { MixNodeDescriptionResponse } from '../../typeDefs/explorer-api';
-import { useIsMobile } from '../../hooks/useIsMobile';
 
 interface MixNodeDetailProps {
   mixNodeRow: MixnodeRowType;
@@ -16,7 +16,7 @@ export const MixNodeDetailSection: FCWithChildren<MixNodeDetailProps> = ({ mixNo
   const palette = [theme.palette.text.primary];
   const isMobile = useIsMobile();
   const statusText = React.useMemo(() => getMixNodeStatusText(mixNodeRow.status), [mixNodeRow.status]);
-  console.log('mixNodeRow :>> ', mixNodeRow);
+
   return (
     <Grid container>
       <Grid item xs={12} md={6}>

explorer/src/components/MixNodes/index.ts

@@ -0,0 +1,3 @@
+export * from './Status';
+export * from './StatusDropdown';
+export * from './mappings';

explorer/src/components/Universal-DataGrid.tsx

@@ -13,15 +13,13 @@ const useStyles = makeStyles({
 });
 
 export const cellStyles: SxProps = {
-  width: '100%',
   padding: 0,
   maxHeight: 100,
   color: 'inherit',
   textDecoration: 'none',
   fontWeight: 400,
-  fontSize: 12,
   lineHeight: 2,
-  textAlign: 'start',
+  fontSize: '12px',
   wordBreak: 'break-word',
   whiteSpace: 'break-spaces',
 };

explorer/src/components/index.ts

@@ -0,0 +1,9 @@
+export * from './CustomColumnHeading';
+export * from './Title';
+export * from './Universal-DataGrid';
+export * from './Tooltip';
+export { default as StyledLink } from './StyledLink';
+export * from './Delegations';
+export * from './MixNodes';
+export * from './TableToolbar';
+export * from './Icons';