Gateway Visuals (#117)

* increase legibility

* remove stale code; create global style file

* further simplification

* fix bridging status indicator

* connect flow improvments

* almost done

* debug switching

* complete rewrite of the gateway<>MM interactions

* rewrite of the connection, switching, and layer system

packages/boba/gateway/src/actions/setupAction.js

@@ -68,3 +68,21 @@ export function getETHMetaTransaction() {
 export async function addBobaFee ( bobaFee ) {
   store.dispatch({ type: 'BOBAFEE/ADD/SUCCESS', payload: bobaFee })
 }
+
+export function setConnectETH( state ) {
+  return function (dispatch) {
+    return dispatch({ type: 'SETUP/CONNECT_ETH', payload: state })
+  }
+}
+
+export function setConnectBOBA( state ) {
+  return function (dispatch) {
+    return dispatch({ type: 'SETUP/CONNECT_BOBA', payload: state })
+  }
+}
+
+export function setConnect( state ) {
+  return function (dispatch) {
+    return dispatch({ type: 'SETUP/CONNECT', payload: state })
+  }
+}

packages/boba/gateway/src/components/listToken/listToken.js

@@ -22,6 +22,7 @@ function ListToken({
   const [ sliderValue_v1, setSliderValue_v1 ] = useState(55)
 
   const theme = useTheme()
+
   const isMobile = useMediaQuery(theme.breakpoints.down('md'))
   const dispatch = useDispatch();
   const enabled = (networkLayer === chain) ? true : false

packages/boba/gateway/src/components/listToken/listToken.styles.js

@@ -1,20 +1,15 @@
 import { styled } from '@mui/material/styles'
-import { Box, Typography } from '@mui/material';
+import { Box, Typography } from '@mui/material'
 
 export const Content = styled(Box)(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
   gap: '20px',
-  marginBottom: '5px',
   width: '100%',
   padding: '10px',
-  borderBottom: '1px solid rgba(255, 255, 255, 0.04)',
-  [ theme.breakpoints.down('sm') ]: {
-    padding: '10px 5px',
-  }
+  borderBottom: theme.palette.primary.borderBottom
 }))
 
-
 export const TableBody = styled(Box)(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
@@ -36,13 +31,11 @@ export const TableCell = styled(Box)(({ theme, isMobile }) => ({
   }
 }));
 
-
 export const TextTableCell = styled(Typography)`
   opacity: ${(props) => !props.enabled ? "0.4" : "1.0"};
   font-weight: 700;
 `;
 
-
 export const DropdownWrapper = styled(Box)(({ theme }) => ({
   display: 'flex',
   justifyContent: 'center',