edenia · xavier506 · Oct 24, 2022 · Oct 24, 2022 · Oct 24, 2022 · Oct 24, 2022
diff --git a/webapp/src/components/GeoMap/styles.js b/webapp/src/components/GeoMap/styles.js
@@ -1,7 +1,7 @@
 export default (theme) => ({
   mapWrapper: {
     backgroundColor: theme.palette.common.white,
-    marginTop: theme.spacing(3)
+    marginTop: theme.spacing(3),
   },
   goBackBtnHidden: {
     display: 'none !important'
@@ -11,6 +11,8 @@ export default (theme) => ({
     marginLeft: theme.spacing(1)
   },
   divRef: {
-    height: '100vh'
+    height: '100vh',
+    boxShadow: '0px 1px 5px rgba(0, 0, 0, 0.15)',
+
   }
 })
diff --git a/webapp/src/components/HealthCheck/styles.js b/webapp/src/components/HealthCheck/styles.js
@@ -40,4 +40,7 @@ export default (theme) => ({
   redLight: {
     color: 'darkred',
   },
+  test: {
+    boxShadow: '10px 5px 5px red !important'
+  }
 })
diff --git a/webapp/src/components/Tooltip/styles.js b/webapp/src/components/Tooltip/styles.js
@@ -1,18 +1,19 @@
 export default (theme) => ({
   paper: {
-    border: '1px solid rgba(0, 0, 0, 0.12)'
+    border: '1px solid rgba(0, 0, 0, 0.12)',
+    boxShadow: '0px 1px 5px rgba(0, 0, 0, 0.15) !important',
   },
   popover: {
     padding: theme.spacing(2),
-    paddingTop: 0
+    paddingTop: 0,
   },
   popoverClose: {
     textAlign: 'right',
     position: 'sticky',
     paddingTop: theme.spacing(2),
-    top: 0
+    top: 0,
   },
   popoverCloseIcon: {
-    cursor: 'pointer'
-  }
+    cursor: 'pointer',
+  },
 })
diff --git a/webapp/src/routes/About/index.js b/webapp/src/routes/About/index.js
@@ -2,7 +2,6 @@ import React from 'react'
 import Typography from '@mui/material/Typography'
 import { makeStyles } from '@mui/styles'
 import { useTranslation } from 'react-i18next'
-import Grid from '@mui/material/Grid'
 import Card from '@mui/material/Card'
 import CardContent from '@mui/material/CardContent'
 
@@ -16,10 +15,9 @@ const About = () => {
   const { t } = useTranslation('aboutRoute')
 
   return (
-    <Card>
+    <Card className={classes.cardShadow}>
       <CardContent>
-        <Grid container spacing={3}>
-          <Grid item xs={12} sm={7}>
+        <div className={classes.mainText}>
             <div>
               <div className={classes.boxInfo}>
                 <Typography variant="body2" align="justify" paragraph>
@@ -57,12 +55,11 @@ const About = () => {
                   {t('body3.paragraph2')}
                 </Typography>
               </div>
-            </div>
-          </Grid>
-          <Grid item xs={12} sm={5}>
+          </div>
+          <div>
             <Logo className={classes.logo} />
-          </Grid>
-        </Grid>
+          </div>
+        </div>
       </CardContent>
     </Card>
   )

diff --git a/webapp/src/routes/About/styles.js b/webapp/src/routes/About/styles.js
@@ -3,21 +3,31 @@ export default (theme) => ({
     '& p': {
       fontSize: 14,
       lineHeight: '21px',
-      letterSpacing: '0.07875px'
+      letterSpacing: '0.07875px',
     },
     '& h4': {
       fontWeight: '600',
       fontSize: 20,
       lineHeight: '24px',
       textAlign: 'justify',
-      marginBottom: theme.spacing(4)
-    }
+      marginBottom: theme.spacing(4),
+    },
   },
   logo: {
-    width: '100%',
-    [theme.breakpoints.up('sm')]: {
-      width: 569,
-      height: 498
-    }
+    width: 569,
+    height: 498,
+    [theme.breakpoints.down('md')]: {
+      width: '85%',
+    },
+  },
+  cardShadow: {
+    boxShadow: '0px 1px 5px rgba(0, 0, 0, 0.15) !important',
+  },
+  mainText: {
+    display: 'flex',
+    flexDirection: 'row',
+    [theme.breakpoints.down('md')]: {
+      flexDirection: 'column'
+    },
   }
 })
diff --git a/webapp/src/routes/BPJson/index.js b/webapp/src/routes/BPJson/index.js
@@ -9,15 +9,20 @@ import { useTranslation } from 'react-i18next'
 import Typography from '@mui/material/Typography'
 import Alert from '@mui/material/Alert'
 import { BPJsonGenerator } from '@eoscostarica/eoscr-components'
+import { makeStyles } from '@mui/styles'
 
 import { eosConfig, ualConfig } from '../../config'
 
+import styles from './styles'
+
 const eosApi = EosApi({
   httpEndpoint: eosConfig.endpoint,
   verbose: false,
   fetchConfiguration: {},
 })
 
+const useStyles = makeStyles(styles)
+
 const getBPJsonUrl = async (producer = {}) => {
   let producerUrl = producer.url || ''
 
@@ -88,6 +93,7 @@ const BPJson = ({ ual }) => {
   const [error, setError] = useState(null)
   const [inconsistencyMessage, setInconsistencyMessage] = useState(null)
   const { t } = useTranslation('bpJsonRoute')
+  const classes = useStyles()
 
   const initData = {
     account_name: '',
@@ -207,7 +213,7 @@ const BPJson = ({ ual }) => {
   }, [ual.activeUser, t])
 
   return (
-    <Card>
+    <Card className={classes.cardShadow}>
       <CardContent>
         {loading && (
           <>

diff --git a/webapp/src/routes/BPJson/styles.js b/webapp/src/routes/BPJson/styles.js
@@ -0,0 +1,5 @@
+export default (theme) => ({
+  cardShadow: {
+    boxShadow: '0px 1px 5px rgba(0, 0, 0, 0.15) !important',
+  },
+})
diff --git a/webapp/src/routes/BlockProducers/index.js b/webapp/src/routes/BlockProducers/index.js
@@ -46,24 +46,13 @@ PaginationWrapper.propTypes = {
 const Producers = () => {
   const classes = useStyles()
   const [
-    {
-      filters,
-      chips,
-      items,
-      loading,
-      totalPages,
-      missedBlocks,
-      pagination,
-    },
-    {
-      handleOnSearch,
-      handleOnPageChange,
-    },
+    { filters, chips, items, loading, totalPages, missedBlocks, pagination },
+    { handleOnSearch, handleOnPageChange },
   ] = useBlockProducerState()
 
   return (
     <>
-      <div className={classes.searchWrapper}>
+      <div className={`${classes.searchWrapper} ${classes.cardShadow}`}>
         <SearchBar
           filters={filters}
           onChange={handleOnSearch}

diff --git a/webapp/src/routes/BlockProducers/styles.js b/webapp/src/routes/BlockProducers/styles.js
@@ -7,7 +7,6 @@ export default (theme) => ({
   card: {
     width: '100%',
     display: 'flex',
-    marginRight: theme.spacing(2),
     [theme.breakpoints.up('sm')]: {
       justifyContent: 'center',
       flex: 'content',
@@ -19,6 +18,9 @@ export default (theme) => ({
   searchWrapper: {
     marginTop: theme.spacing(3),
     marginBottom: theme.spacing(3),
+    '& .MuiGrid-root': {
+      paddingTop: '0px !important',
+    },
   },
   pagination: {
     padding: theme.spacing(3),
@@ -28,4 +30,7 @@ export default (theme) => ({
   formControl: {
     width: '100%',
   },
+  cardShadow: {
+    boxShadow: '0px 1px 5px rgba(0, 0, 0, 0.15)',
+  },
 })
diff --git a/webapp/src/routes/EndpointsList/index.js b/webapp/src/routes/EndpointsList/index.js
@@ -34,7 +34,7 @@ const EndpointsList = () => {
   ] = useEndpointsState()
 
   return (
-    <Card>
+    <Card className={classes.cardShadow}>
       <CardContent>
         <div className={classes.titleContainer}>
           <div className={classes.dateContainer}>

diff --git a/webapp/src/routes/EndpointsList/styles.js b/webapp/src/routes/EndpointsList/styles.js
@@ -25,4 +25,7 @@ export default (theme) => ({
     padding: theme.spacing(4),
     justifyContent: 'center',
   },
+  cardShadow: {
+    boxShadow: '0px 1px 5px rgba(0, 0, 0, 0.15) !important',
+  },
 })
diff --git a/webapp/src/routes/Help/index.js b/webapp/src/routes/Help/index.js
@@ -18,7 +18,7 @@ const Help = () => {
   const { t } = useTranslation('helpRoute')
 
   return (
-    <Card>
+    <Card className={classes.cardShadow}>
       <CardContent>
         <Typography variant="h4" className={classes.title}>
           {t('title')}

diff --git a/webapp/src/routes/Help/styles.js b/webapp/src/routes/Help/styles.js
@@ -1,21 +1,24 @@
 export default (theme) => ({
   title: {
     marginBottom: theme.spacing(1),
-    fontWeight: 400
+    fontWeight: 400,
   },
   boxLinks: {
     display: 'flex',
     marginTop: theme.spacing(3),
     '& a': {
       '&:hover': {
-        textDecoration: 'none'
-      }
+        textDecoration: 'none',
+      },
     },
     '& svg': {
-      marginRight: theme.spacing(3)
+      marginRight: theme.spacing(3),
     },
     '& p': {
-      marginTop: 0
-    }
-  }
+      marginTop: 0,
+    },
+  },
+  cardShadow: {
+    boxShadow: '0px 1px 5px rgba(0, 0, 0, 0.15) !important',
+  },
 })
diff --git a/webapp/src/routes/Nodes/index.js b/webapp/src/routes/Nodes/index.js
@@ -22,13 +22,15 @@ const Nodes = () => {
   ] = useNodeState()
 
   return (
-    <div>
-      <SearchBar
-        filters={filters}
-        onChange={handleOnSearch}
-        chips={chips}
-        translationScope="nodeSearchComponent"
-      />
+    <>
+      <div className={`${classes.searchWrapper} ${classes.cardShadow}`}>
+        <SearchBar
+          filters={filters}
+          onChange={handleOnSearch}
+          chips={chips}
+          translationScope="nodeSearchComponent"
+        />
+      </div>
       {loading ? (
         <LinearProgress />
       ) : (
@@ -59,7 +61,7 @@ const Nodes = () => {
           )}
         </>
       )}
-    </div>
+    </>
   )
 }
 

diff --git a/webapp/src/routes/Nodes/styles.js b/webapp/src/routes/Nodes/styles.js
@@ -22,4 +22,14 @@ export default (theme) => ({
     display: 'flex',
     justifyContent: 'center',
   },
+  cardShadow: {
+    boxShadow: '0px 1px 5px rgba(0, 0, 0, 0.15)',
+  },
+  searchWrapper: {
+    marginTop: theme.spacing(3),
+    marginBottom: theme.spacing(1),
+    '& .MuiGrid-root': {
+      paddingTop: '0px !important',
+    },
+  },
 })
diff --git a/webapp/src/routes/NodesDistribution/index.js b/webapp/src/routes/NodesDistribution/index.js
@@ -1,26 +1,34 @@
 /* eslint camelcase: 0 */
 import React, { lazy } from 'react'
 import LinearProgress from '@mui/material/LinearProgress'
+import { makeStyles } from '@mui/styles'
 
 import useNodeDistributionState from '../../hooks/customHooks/useNodeDistributionState'
 
+import styles from './styles'
+
 const SearchBar = lazy(() => import('../../components/SearchBar'))
 const GeoMap = lazy(() => import('../../components/GeoMap'))
+const useStyles = makeStyles(styles)
 
 const Nodes = () => {
+  const classes = useStyles()
+
   const [{ filters, chips, nodes, loading }, { handleOnFiltersChange }] = useNodeDistributionState()
 
   return (
-    <div>
-      <SearchBar
+    <>
+    <div className={`${classes.searchWrapper} ${classes.cardShadow}`}>
+      <SearchBar 
         filters={filters}
         onChange={handleOnFiltersChange}
         chips={chips}
         translationScope="nodeSearchComponent"
       />
+      </div>
       {loading && <LinearProgress />}
       {!loading && <GeoMap data={nodes || []} />}
-    </div>
+    </>
   )
 }
 

diff --git a/webapp/src/routes/NodesDistribution/styles.js b/webapp/src/routes/NodesDistribution/styles.js
@@ -0,0 +1,12 @@
+export default (theme) => ({
+  cardShadow: {
+    boxShadow: '0px 1px 5px rgba(0, 0, 0, 0.15)',
+  },
+  searchWrapper: {
+    marginTop: theme.spacing(3),
+    marginBottom: theme.spacing(2),
+    '& .MuiGrid-root': {
+      paddingTop: '0px !important',
+    },
+  },
+})