#237 - Adjusting styles of the TotalFrame component

labhackercd · Dec 15, 2021 · 0fce78e · 0fce78e
1 parent 1a0ef1d
commit 0fce78e
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 10 deletions.
diff --git a/src/components/Frames/TotalFrame/index.js b/src/components/Frames/TotalFrame/index.js
@@ -17,7 +17,7 @@ function TotalsDataFrame(props) {
   } = props;
 
   return (
-    <Grid container className={`${classes.root} ${className}`}>
+    <Grid container className={`${classes.root} ${className}`} style={{ height: 'auto', minHeight: '130px' }}>
       <Box className={classes.box}>
         <Box className={classes.header}>
           <Box marginLeft={2}>
@@ -27,7 +27,7 @@ function TotalsDataFrame(props) {
               </Box>
             </Typography>
           </Box>
-          <Box flexGrow={1} display="flex" alignItems="center" marginTop={1}>
+          <Box display="flex" alignItems="center">
             {(toolTipText !== null && toolTipText !== undefined)
               && (
               <Tooltips

diff --git a/src/components/Frames/TotalFrame/style.js b/src/components/Frames/TotalFrame/style.js
@@ -5,17 +5,14 @@ export const useStyles = makeStyles((theme) => ({
   root: {
     display: 'flex',
     width: '100%',
-    padding: '16px 16px 0px 0px',
+    padding: '0px 14px 0px 0px',
 
-    [theme.breakpoints.up('sm')]: {
-      padding: '35px 35px 0px 0px',
-    },
     [theme.breakpoints.up('md')]: {
       padding: '0px 20px 0px 0px',
     },
   },
   box: {
-    height: '4vh',
+    height: 'auto',
     borderRadius: '15px 15px 0 0',
     width: '100%',
     backgroundColor: theme.palette.black.secondary,
@@ -27,11 +24,13 @@ export const useStyles = makeStyles((theme) => ({
   },
   text: {
     color: theme.palette.white.main,
-    marginTop: '1vh',
+    alignItems: 'center',
+    padding: '9px',
   },
   header: {
-    height: '3vh',
     display: 'flex',
+    alignItems: 'center',
+    flexDirection: 'row',
     width: '100%',
   },
 }));
diff --git a/src/components/ToolTip/index.js b/src/components/ToolTip/index.js
@@ -31,7 +31,7 @@ export default function Tooltips(props) {
   return (
     <div>
       <HtmlTooltip title={toolTipHtmlTitle(toolTipText)} backgroundcolor={toolTipColor}>
-        <IconButton aria-label={toolTipAriaLabel}>
+        <IconButton aria-label={toolTipAriaLabel} style={{ padding: 0 }}>
           <InfoIcon aria-label={toolTipAriaLabel} style={{ color: toolTipColor }} />
         </IconButton>
       </HtmlTooltip>