#245 - Adjusting spacing in audiencies page

labhackercd · Dec 29, 2021 · 13485a9 · 13485a9
1 parent 6768cc5
commit 13485a9
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 16 deletions.
diff --git a/src/components/ChartDataFrame/style.js b/src/components/ChartDataFrame/style.js
@@ -5,7 +5,7 @@ export const useStyles = makeStyles((theme) => ({
   root: {
     display: 'flex',
     width: '100%',
-    padding: '0px 16px 0px 0px',
+    padding: '0px 16px 0px 16px',
 
     [theme.breakpoints.up('sm')]: {
       padding: '0px 35px 0px 0px',

diff --git a/src/components/Headers/SectionHeader/index.js b/src/components/Headers/SectionHeader/index.js
@@ -18,7 +18,7 @@ export default function SectionHeader(props) {
   const handleClose = () => setOpen(false);
 
   return (
-    <Box display="flex" flexFlow="wrap" justifyContent="space-between" alignItems="center">
+    <Box className={classes.sectionHeader} display="flex" flexFlow="wrap" justifyContent="space-between" alignItems="center">
       <Box display="flex">
         <Typography className={`${classes.typographyHeaderSection} ${classes.typography}`} component="div" variant="h2">
           <Box fontWeight="fontWeightBold">

diff --git a/src/components/Headers/SubSectionHeader/index.js b/src/components/Headers/SubSectionHeader/index.js
@@ -9,7 +9,7 @@ export default function SubSectionHeader(props) {
   const { title, style } = props;
 
   return (
-    <Typography component="div" variant="h3">
+    <Typography className={classes.subSectionHeader} component="div" variant="h3">
       <Box style={style} className={classes.typography}>
         {title}
       </Box>

diff --git a/src/components/Headers/SubSectionHeader/style.js b/src/components/Headers/SubSectionHeader/style.js
@@ -2,6 +2,13 @@
 import { makeStyles } from '@material-ui/core';
 
 export const useStyles = makeStyles((theme) => ({
+  subSectionHeader: {
+    padding: '0px 0px 0px 16px',
+
+    [theme.breakpoints.up('sm')]: {
+      padding: '0px',
+    },
+  },
   typography: {
     fontWeight: 'bold',
     fontSize: '16px',

diff --git a/src/containers/Audiencias/index.js b/src/containers/Audiencias/index.js
@@ -603,14 +603,14 @@ function Audiencias(props) {
         headerColors={headerColors}
         initialYear={audienceInitialYear}
       />
-      <Grid container spacing={1} className={classes.spacingContainer}>
+      <Grid container spacing={1} className={classes.spacingContainer} style={{ padding: 0 }}>
         {showCachedDataAlert && (
           <AlertCachedData apiLastCacheMade={apiLastCacheMade} />
         )}
 
         <AlertDataConsolidateInterval />
 
-        <Grid item xs={12}>
+        <Grid item xs={12} style={{ padding: 0 }}>
           <SectionHeader
             classes={classes}
             toolTipText={TEXTCONSTANTS.audiencesTotalsTexts.toolTip}
@@ -634,11 +634,10 @@ function Audiencias(props) {
             </Grid>
           ))
         }
-        <Grid className={classes.mobile} item xs={12}>
-          <Box className={classes.caroulselBox}>
-            <Box className={classes.caroulselInsideBox}>
+        <Grid className={classes.mobile} item xs={12} style={{ padding: 0 }}>
+          <Box className={classes.totalsGridBox}>
+            <Box className={classes.totalsGridInsideBox}>
               <TotalsGrid itens={audienciasData} />
-              {/* <CaroulselCards carouselItens={audienciasData} classes={classes} /> */}
             </Box>
           </Box>
         </Grid>
@@ -768,7 +767,7 @@ function Audiencias(props) {
           )}
         </Grid>
 
-        <Grid item xs={12} className={classes.spacing}>
+        <Grid item xs={12} className={classes.spacing} style={{ padding: 0 }}>
           <SectionHeader
             classes={classes}
             title={TEXTCONSTANTS.usersSectionTexts.title}
@@ -779,7 +778,7 @@ function Audiencias(props) {
 
         <Grid item xs={12} className={classes.spacing} style={{ padding: 0 }}>
           <SubSectionHeader
-            style={{ marginTop: '0px' }}
+            style={{ marginTop: '0px', padding: 0 }}
             title={TEXTCONSTANTS.usersSectionTexts.subSectionNewUsers.title}
           />
           {newUsersChartData !== undefined && newUsersChartData.length > 0 ? (

diff --git a/src/containers/Audiencias/style.js b/src/containers/Audiencias/style.js
@@ -76,11 +76,11 @@ export const useStyles = makeStyles((theme) => ({
       display: 'none',
     },
   },
-  caroulselBox: {
+  totalsGridBox: {
     width: '100%',
     minHeight: '100%',
     display: 'flex',
-    padding: '2px 0px 16px 0px',
+    padding: '2px 0px 0px 0px',
 
     [theme.breakpoints.up('sm')]: {
       padding: '0px 0px 19px 0px',
@@ -90,7 +90,14 @@ export const useStyles = makeStyles((theme) => ({
       justifyContent: 'center',
     },
   },
-  caroulselInsideBox: {
+  totalsGridInsideBox: {
     width: '100%',
   },
+  sectionHeader: {
+    padding: '0px 0px 0px 16px',
+
+    [theme.breakpoints.up('sm')]: {
+      padding: '0px',
+    },
+  },
 }));
diff --git a/src/styles/pages/audienciasPageStyle.js b/src/styles/pages/audienciasPageStyle.js
@@ -12,7 +12,6 @@ export const useStyles = makeStyles((theme) => ({
     maxWidth: '1280px',
     marginLeft: 'auto',
     marginRight: 'auto',
-    padding: '0px 0px 0px 16px',
     marginTop: '40px',
 
     // '@media (max-width: 1025px)': {
@@ -30,7 +29,7 @@ export const useStyles = makeStyles((theme) => ({
     },
   },
   boxTitle: {
-    padding: '0px 16px 0px 0px',
+    padding: '0px 16px 0px 16px',
 
     [theme.breakpoints.up('sm')]: {
       padding: '0px 35px 0px 0px',