Gateway Visuals

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

packages/boba/gateway/src/components/pageTitle/PageTitle.js

@@ -1,14 +1,16 @@
 
-import { Typography } from '@mui/material'
+import { Typography, Box } from '@mui/material'
 import React from 'react'
 import * as S from './PageTitle.styles'
 
-const PageTitle = ({ title , sx}) => {
+const PageTitle = ({ title, sx }) => {
 
   return (
-    <S.Wrapper sx={sx}>
-      <Typography variant="h1">{title}</Typography>
-    </S.Wrapper>
+    <Box sx={{ my: 1 }}>
+      <S.Wrapper sx={sx}>
+        <Typography variant="h1">{title}</Typography>
+      </S.Wrapper>
+    </Box>
   )
 }
 

packages/boba/gateway/src/components/pulse/PulsingBadge.js

@@ -0,0 +1,156 @@
+import React from "react"
+
+import { Typography } from '@mui/material'
+import { makeStyles } from '@mui/styles'
+import { red, lightBlue, yellow, green } from '@mui/material/colors'
+
+import clsx from "clsx"
+
+const warningColor = yellow[200]
+
+const useStyles = makeStyles(theme => ({
+  container: {
+    position: "relative",
+    display: "inline-block"
+  },
+  badge: {
+    display: "flex",
+    direction: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingLeft: '5px'
+  },
+  dangerBadge: {
+    color: red[500]
+  },
+  warningBadge: {
+    color: warningColor
+  },
+  infoBadge: {
+    color: lightBlue[500]
+  },
+  successBadge: {
+    color: green[500]
+  },
+  badgeBorder: {
+    borderRadius: theme.shape.borderRadius + 15
+  },
+  dangerBadgeBorder: {
+    border: `1px solid ${red[500]}`
+  },
+  warningBadgeBorder: {
+    border: `1px solid ${warningColor}`
+  },
+  infoBadgeBorder: {
+    border: `1px solid ${lightBlue[500]}`
+  },
+  successBadgeBorder: {
+    border: `1px solid ${green[500]}`
+  },
+  text: {
+    marginRight: 5
+  },
+  circle: {
+    margin: 5,
+    width: 8,
+    height: 8,
+    borderRadius: "50%"
+  },
+  warningCircle: {
+    backgroundColor: warningColor,
+    boxShadow: `0 0 0 ${warningColor}`,
+    animation: `$pulsing-warning 1500ms ${
+      theme.transitions.easing.easeOut
+    } infinite`
+  },
+  dangerCircle: {
+    backgroundColor: red[500],
+    boxShadow: `0 0 0 ${red[500]}`,
+    animation: `$pulsing-danger 1500ms ${
+      theme.transitions.easing.easeOut
+    } infinite`
+  },
+  infoCircle: {
+    backgroundColor: lightBlue[500],
+    boxShadow: `0 0 0 ${lightBlue[500]}`,
+    animation: `$pulsing-info 1500ms ${
+      theme.transitions.easing.easeOut
+    } infinite`
+  },
+  successCircle: {
+    backgroundColor: green[500],
+    boxShadow: `0 0 0 ${green[500]}`,
+    animation: `$pulsing-success 1500ms ${
+      theme.transitions.easing.easeOut
+    } infinite`
+  },
+
+  "@keyframes pulsing-danger": {
+    "0%": {
+      boxShadow: `0 0 0 0 ${red[500]}`
+    },
+    "70%": {
+      boxShadow: `0 0 0 4px ${red[500]}`
+    },
+    "100%": {
+      boxShadow: `0 0 0 0 ${red[500]}`
+    }
+  },
+  "@keyframes pulsing-warning": {
+    "0%": {
+      boxShadow: `0 0 0 0 ${warningColor}`
+    },
+    "70%": {
+      boxShadow: `0 0 0 4px ${warningColor}`
+    },
+    "100%": {
+      boxShadow: `0 0 0 0 ${warningColor}`
+    }
+  },
+
+  "@keyframes pulsing-info": {
+    "0%": {
+      boxShadow: `0 0 0 0 ${lightBlue[500]}`
+    },
+    "70%": {
+      boxShadow: `0 0 0 4px ${lightBlue[500]}`
+    },
+    "100%": {
+      boxShadow: `0 0 0 0 ${lightBlue[500]}`
+    }
+  },
+  "@keyframes pulsing-success": {
+    "0%": {
+      boxShadow: `0 0 0 0 ${green[500]}`
+    },
+    "70%": {
+      boxShadow: `0 0 0 4px ${green[500]}`
+    },
+    "100%": {
+      boxShadow: `0 0 0 0 ${green[500]}`
+    }
+  }
+}));
+
+const PulsingBadge = ({
+  children,
+  withBorder = false,
+  badgeLabel = "",
+  variant = "info"
+}) => {
+  const classes = useStyles();
+  return (
+    <span className={classes.container}>
+      <div
+        className={clsx(classes.badge, classes[variant + "Badge"], {
+          [classes[variant + "BadgeBorder"]]: withBorder,
+          [classes.badgeBorder]: withBorder
+        })}
+      >
+        <div className={clsx(classes.circle, classes[variant + "Circle"])} />
+      </div>
+      {children}
+    </span>
+  );
+};
+export default PulsingBadge;

packages/boba/gateway/src/components/tabs/Tabs.js

@@ -13,11 +13,9 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. */
 
-import React from 'react';
-import * as S from './Tabs.styles';
+import React from 'react'
+import * as S from './Tabs.styles'
 
-// TODO @deprecated;
-// @deprecated;
 function Tabs ({ tabs, activeTab, onClick, className }) {
 
   return (
@@ -33,24 +31,6 @@ function Tabs ({ tabs, activeTab, onClick, className }) {
       })}
     </S.Tabs>
   );
-  // return (
-  //   <div className={[ styles.Tabs, className ].join(' ')}>
-  //     {tabs.map((i, index) => {
-  //       return (
-  //         <div
-  //           key={index}
-  //           onClick={() => onClick(i)}
-  //           className={[
-  //             styles.tab,
-  //             activeTab === i ? styles.active : ''
-  //           ].join(' ')}
-  //         >
-  //           {i}
-  //         </div>
-  //       );
-  //     })}
-  //   </div>
-  // );
 }
 
-export default React.memo(Tabs);
+export default React.memo(Tabs)

packages/boba/gateway/src/components/tabs/Tabs.styles.js

@@ -7,7 +7,7 @@ export const Tabs = styled(Box)(({theme})=>({
    justifyContent: 'flex-start',
    flex: 1,
    marginBottom: '20px',
-   borderBottom: '1px solid rgba(255, 255, 255, 0.06)',
+   borderBottom: theme.palette.primary.borderBottom,
    [theme.breakpoints.down('md')]:{
       width: '100%'
    }