From 444e35e58769fe0281ea78701796cc7b29514f99 Mon Sep 17 00:00:00 2001
From: Maria Luiza Ferreira <mlfaa@hotmail.com>
Date: Mon, 13 Dec 2021 12:25:09 -0300
Subject: [PATCH] TS173-RevisaoAlteracaoDesign (#234)

* #233 - Adjusting wikilegis cards and audiences

* #233 - Changing the color of apis cards

* #233 - Adjusting title spacing in wikilegis and audiences

* #233 - Adjusting spacing of criteria on about page
---
 src/components/Frames/TotalFrame/index.js | 10 ++++++----
 src/components/Frames/TotalFrame/style.js |  6 +++---
 src/containers/Audiencias/index.js        |  3 +++
 src/containers/Audiencias/style.js        | 15 +++++++++++++++
 src/containers/Wikilegis/index.js         |  3 +++
 src/containers/Wikilegis/style.js         | 15 +++++++++++++++
 src/styles/pages/apisPageStyle.js         |  2 +-
 src/styles/pages/audienciasPageStyle.js   |  3 ++-
 src/styles/pages/sobrePageStyle.js        |  8 ++++----
 src/styles/pages/wikilegisPageStyle.js    |  3 ++-
 10 files changed, 54 insertions(+), 14 deletions(-)

diff --git a/src/components/Frames/TotalFrame/index.js b/src/components/Frames/TotalFrame/index.js
index a6503e58..7ce086c6 100644
--- a/src/components/Frames/TotalFrame/index.js
+++ b/src/components/Frames/TotalFrame/index.js
@@ -13,11 +13,11 @@ function TotalsDataFrame(props) {
 
   const {
     // eslint-disable-next-line react/prop-types
-    height, children, title, toolTipText, toolTipColor, toolTipAriaLabel,
+    height, children, title, toolTipText, toolTipColor, toolTipAriaLabel, className,
   } = props;
 
   return (
-    <Grid container className={classes.root}>
+    <Grid container className={`${classes.root} ${className}`}>
       <Box className={classes.box}>
         <Box className={classes.header}>
           <Box marginLeft={2}>
@@ -49,12 +49,12 @@ function TotalsDataFrame(props) {
 export default function TotalFrame(props) {
   const {
     isLoaded, info, title, toolTipText, toolTipColor, toolTipAriaLabel,
-    subInformation,
+    subInformation, className,
   } = props;
   const hasSubInformation = (subInformation !== '');
 
   return (
-    <TotalsDataFrame height="15vh" paddingLeft="0.5rem" title={title} download={false} align="left" toolTipAriaLabel={toolTipAriaLabel} toolTipText={toolTipText} toolTipColor={toolTipColor}>
+    <TotalsDataFrame className={className} height="15vh" paddingLeft="0.5rem" title={title} download={false} align="left" toolTipAriaLabel={toolTipAriaLabel} toolTipText={toolTipText} toolTipColor={toolTipColor}>
       {isLoaded ? (
         <Box style={{ width: '100%', height: '100%' }} display="flex" alignItems="center" justifyContent="center" width="100%" flexDirection="column">
           <Box paddingTop={hasSubInformation ? '1vh' : ''}>
@@ -94,6 +94,7 @@ TotalFrame.propTypes = {
   toolTipColor: PropTypes.string,
   toolTipAriaLabel: PropTypes.string,
   subInformation: PropTypes.string,
+  className: PropTypes.object,
 };
 
 TotalFrame.defaultProps = {
@@ -104,4 +105,5 @@ TotalFrame.defaultProps = {
   toolTipColor: '',
   toolTipAriaLabel: '',
   subInformation: '',
+  className: {},
 };
diff --git a/src/components/Frames/TotalFrame/style.js b/src/components/Frames/TotalFrame/style.js
index 262eee6d..9722c005 100644
--- a/src/components/Frames/TotalFrame/style.js
+++ b/src/components/Frames/TotalFrame/style.js
@@ -5,13 +5,13 @@ export const useStyles = makeStyles((theme) => ({
   root: {
     display: 'flex',
     width: '100%',
-    padding: '0px 16px 0px 0px',
+    padding: '16px 16px 0px 0px',
 
     [theme.breakpoints.up('sm')]: {
-      padding: '0px 35px 0px 0px',
+      padding: '35px 35px 0px 0px',
     },
     [theme.breakpoints.up('md')]: {
-      padding: '0px 0px',
+      padding: '0px 20px 0px 0px',
     },
   },
   box: {
diff --git a/src/containers/Audiencias/index.js b/src/containers/Audiencias/index.js
index d7be9685..52aa11c9 100644
--- a/src/containers/Audiencias/index.js
+++ b/src/containers/Audiencias/index.js
@@ -573,6 +573,7 @@ function Audiencias(props) {
 
         <Grid item xs={12} sm={6} md={3} className={classes.spacing} style={{ padding: 0 }}>
           <TotalFrame
+            className={classes.totalFrame}
             isLoaded={totalsAreLoaded}
             info={`${audienciasTotalsData.users_total}`}
             title={
@@ -593,6 +594,7 @@ function Audiencias(props) {
 
         <Grid item xs={12} sm={6} md={3} className={classes.spacing} style={{ padding: 0 }}>
           <TotalFrame
+            className={classes.totalFrame}
             isLoaded={totalsAreLoaded}
             info={`${audienciasTotalsData.audiencias_total}`}
             title={
@@ -632,6 +634,7 @@ function Audiencias(props) {
 
         <Grid item xs={12} sm={6} md={3} className={classes.spacing} style={{ padding: 0 }}>
           <TotalFrame
+            className={classes.totalFrameDesktop}
             isLoaded={totalsAreLoaded}
             info={audienciasTotalsData.questions_total}
             title={
diff --git a/src/containers/Audiencias/style.js b/src/containers/Audiencias/style.js
index 4d8929bf..47357e64 100644
--- a/src/containers/Audiencias/style.js
+++ b/src/containers/Audiencias/style.js
@@ -53,4 +53,19 @@ export const useStyles = makeStyles((theme) => ({
       paddingTop: '48px',
     },
   },
+  totalFrame: {
+    padding: '0px 16px 0px 0px',
+
+    [theme.breakpoints.up('sm')]: {
+      padding: '0px 35px 0px 0px',
+    },
+    [theme.breakpoints.up('md')]: {
+      padding: '0px 20px 0px 0px',
+    },
+  },
+  totalFrameDesktop: {
+    [theme.breakpoints.up('md')]: {
+      padding: '0px 0px',
+    },
+  },
 }));
diff --git a/src/containers/Wikilegis/index.js b/src/containers/Wikilegis/index.js
index d18279ff..ac7baac4 100644
--- a/src/containers/Wikilegis/index.js
+++ b/src/containers/Wikilegis/index.js
@@ -462,6 +462,7 @@ function Wikilegis(props) {
 
         <Grid item xs={12} sm={6} md={3} className={classes.spacing} style={{ padding: 0 }}>
           <TotalFrame
+            className={classes.totalFrame}
             isLoaded={totalsAreLoaded}
             info={`${wikilegisTotalsData.participants_total}`}
             title={TEXTCONSTANTS.wikilegisTotalsSectionTexts.subSectionParticipantsTotals.title}
@@ -473,6 +474,7 @@ function Wikilegis(props) {
 
         <Grid item xs={12} sm={6} md={3} className={classes.spacing} style={{ padding: 0 }}>
           <TotalFrame
+            className={classes.totalFrame}
             isLoaded={totalsAreLoaded}
             info={`${wikilegisTotalsData.legis_propo_total}`}
             title={TEXTCONSTANTS.wikilegisTotalsSectionTexts.subSectionLegislativeProposalsTotals.title}
@@ -495,6 +497,7 @@ function Wikilegis(props) {
 
         <Grid item xs={12} sm={6} md={3} className={classes.spacing} style={{ padding: 0 }}>
           <TotalFrame
+            className={classes.totalFrameDesktop}
             isLoaded={totalsAreLoaded}
             info={wikilegisTotalsData.votes_total}
             title={TEXTCONSTANTS.wikilegisTotalsSectionTexts.subSectionVotesTotals.title}
diff --git a/src/containers/Wikilegis/style.js b/src/containers/Wikilegis/style.js
index 52eec205..da746064 100644
--- a/src/containers/Wikilegis/style.js
+++ b/src/containers/Wikilegis/style.js
@@ -53,4 +53,19 @@ export const useStyles = makeStyles((theme) => ({
       paddingTop: '48px',
     },
   },
+  totalFrame: {
+    padding: '0px 16px 0px 0px',
+
+    [theme.breakpoints.up('sm')]: {
+      padding: '0px 35px 0px 0px',
+    },
+    [theme.breakpoints.up('md')]: {
+      padding: '0px 20px 0px 0px',
+    },
+  },
+  totalFrameDesktop: {
+    [theme.breakpoints.up('md')]: {
+      padding: '0px 0px',
+    },
+  },
 }));
diff --git a/src/styles/pages/apisPageStyle.js b/src/styles/pages/apisPageStyle.js
index 5c9b7036..431fd56c 100644
--- a/src/styles/pages/apisPageStyle.js
+++ b/src/styles/pages/apisPageStyle.js
@@ -142,7 +142,7 @@ export const useStyles = makeStyles((theme) => ({
     fontSize: '1rem',
     letterSpacing: '0.1rem',
     paddingTop: '10px',
-    color: '#BFBFBF',
+    color: '#FFFF',
     '@media (max-width: 1100px)': {
       fontSize: '0.8rem',
     },
diff --git a/src/styles/pages/audienciasPageStyle.js b/src/styles/pages/audienciasPageStyle.js
index b32e405a..506f224a 100644
--- a/src/styles/pages/audienciasPageStyle.js
+++ b/src/styles/pages/audienciasPageStyle.js
@@ -46,10 +46,11 @@ export const useStyles = makeStyles((theme) => ({
     fontSize: '20px',
     fontWeight: 'bold',
     color: '#FFFFFF',
-    marginBottom: '8px',
+    marginBottom: '16px',
 
     [theme.breakpoints.up('sm')]: {
       fontSize: '25px',
+      marginBottom: '24px',
     },
     '@media (min-width: 1025px)': {
       fontSize: '39px',
diff --git a/src/styles/pages/sobrePageStyle.js b/src/styles/pages/sobrePageStyle.js
index 2862cbef..615ebdd5 100644
--- a/src/styles/pages/sobrePageStyle.js
+++ b/src/styles/pages/sobrePageStyle.js
@@ -147,13 +147,13 @@ export const useStyles = makeStyles((theme) => ({
     },
   },
   criteriesSection: {
-    paddingLeft: '2rem',
+    paddingLeft: '0px',
 
-    [theme.breakpoints.up('md')]: {
+    [theme.breakpoints.up('sm')]: {
       paddingLeft: '4rem',
     },
-    [theme.breakpoints.up('lg')]: {
-      paddingLeft: '6rem',
+    '@media (min-width: 1025px)': {
+      paddingLeft: '3rem',
     },
   },
   footerBox: {
diff --git a/src/styles/pages/wikilegisPageStyle.js b/src/styles/pages/wikilegisPageStyle.js
index 557a89d7..fd848238 100644
--- a/src/styles/pages/wikilegisPageStyle.js
+++ b/src/styles/pages/wikilegisPageStyle.js
@@ -68,10 +68,11 @@ export const useStyles = makeStyles((theme) => ({
     fontSize: '20px',
     fontWeight: 'bold',
     color: '#FFFFFF',
-    marginBottom: '8px',
+    marginBottom: '16px',
 
     [theme.breakpoints.up('sm')]: {
       fontSize: '25px',
+      marginBottom: '24px',
     },
     '@media (min-width: 1025px)': {
       fontSize: '39px',