chore(webapp): geo distribution style

edenia · Oct 24, 2022 · 6233c3e · 6233c3e
1 parent 7e39e5a
commit 6233c3e
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 5 deletions.
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/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',
+    },
+  },
+})