chore(webapp): CPU refactor and styles

edenia · Oct 27, 2022 · 3768099 · 3768099
1 parent eb74347
commit 3768099
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 16 deletions.
diff --git a/webapp/src/routes/CPUBenchmark/index.js b/webapp/src/routes/CPUBenchmark/index.js
@@ -4,7 +4,6 @@ import { useLazyQuery } from '@apollo/client'
 import { useTranslation } from 'react-i18next'
 import Card from '@mui/material/Card'
 import CardContent from '@mui/material/CardContent'
-import Grid from '@mui/material/Grid'
 import Typography from '@mui/material/Typography'
 import LinearProgress from '@mui/material/LinearProgress'
 import Table from '@mui/material/Table'
@@ -13,17 +12,21 @@ import TableCell from '@mui/material/TableCell'
 import TableContainer from '@mui/material/TableContainer'
 import TableHead from '@mui/material/TableHead'
 import TableRow from '@mui/material/TableRow'
-import Box from '@mui/material/Box'
 import InputLabel from '@mui/material/InputLabel'
 import MenuItem from '@mui/material/MenuItem'
 import FormControl from '@mui/material/FormControl'
 import Select from '@mui/material/Select'
 import Highcharts from 'highcharts'
 import HighchartsReact from 'highcharts-react-official'
+import { makeStyles } from '@mui/styles'
+
+import styles from './styles'
 
 import { formatWithThousandSeparator, rangeOptions } from '../../utils'
 import { CPU_BENCHMARK } from '../../gql'
 
+const useStyles = makeStyles(styles)
+
 const options = {
   time: {
     timezoneOffset: new Date().getTimezoneOffset()
@@ -59,6 +62,7 @@ const CPUBenchmark = () => {
   const [series, setSeries] = useState([])
   const [producers, setProducers] = useState([])
   const [load, { loading, data }] = useLazyQuery(CPU_BENCHMARK)
+  const classes = useStyles()
 
   useEffect(() => {
     load({
@@ -117,17 +121,12 @@ const CPUBenchmark = () => {
   }, [data])
 
   return (
-    <Grid item xs={12}>
-      <Grid container spacing={2}>
-        <Grid item xs={12}>
-          <Card>
+    <div>
+      <div>
+        <div>
+          <Card className={classes.cardShadow}>
             <CardContent>
-              <Box
-                display="flex"
-                justifyContent="space-between"
-                alignItems="center"
-                p={1}
-              >
+              <div className={classes.textDiv}>
                 <Typography component="p" variant="h6">
                   {t('title')}
                 </Typography>
@@ -148,7 +147,7 @@ const CPUBenchmark = () => {
                     ))}
                   </Select>
                 </FormControl>
-              </Box>
+              </div>
               {loading && <LinearProgress />}
               {!loading && data?.items.length > 0 && (
                 <>
@@ -188,9 +187,9 @@ const CPUBenchmark = () => {
               )}
             </CardContent>
           </Card>
-        </Grid>
-      </Grid>
-    </Grid>
+        </div>
+      </div>
+    </div>
   )
 }
 

diff --git a/webapp/src/routes/CPUBenchmark/styles.js b/webapp/src/routes/CPUBenchmark/styles.js
@@ -0,0 +1,15 @@
+export default (theme) => ({
+  cardShadow: {
+    boxShadow: '0px 1px 5px rgba(0, 0, 0, 0.15) !important',
+  },
+  formControl: {
+    display: 'flex',
+    flexDirection: 'row-reverse',
+  },
+  textDiv:{
+    display:"flex",
+    justifyContent:"space-between",
+    alignItems:"center",
+    p:'{1} '
+  }
+})