Fix style

components/carte-etat/carte-etat-component.jsx

@@ -51,24 +51,6 @@ const styles = () => ({
   pom_verte: {
     color: "#00FF00",
   },
-  simpop: {
-    display: "flex",
-    flex: "1",
-    flexDirection: "column",
-    height: "25vh",
-    marginTop: "10px",
-    paddingLeft: "3px",
-    width: "50%",
-  },
-  sourceInsee: {
-    color: "#B1B1B1",
-    fontFamily: "Lato",
-    fontSize: "12px",
-    fontWeight: "regular",
-    marginBottom: "0px", //
-    marginLeft: "14px",
-    textAlign: "right",
-  },
   subtitleCarteEtat: {
     color: "#565656",
     fontFamily: "Lato",
@@ -151,7 +133,7 @@ class CarteEtat extends PureComponent {
                 <div className={styles2.mainChart}>
                   <BarChart deciles={deciles} />
                 </div>
-                <div className={classes.simpop}>
+                <div className={styles2.simpop}>
                   <div className={classNames({
                     [styles2.montantImpots]: true,
                     [styles2.noPLF]: !montrerPLF,
@@ -223,13 +205,12 @@ class CarteEtat extends PureComponent {
                   </div>
                 </div>
               </div>
-              <Typography className={classes.sourceInsee}>
+              <div className={styles2.sourceInsee}>
                 * Chiffrages indicatifs.
                 <br />
-                {" "}
                 Estimation à partir des données de l&apos;Enquête
                 Revenus Fiscaux et Sociaux (ERFS-FPR) de l&apos;Insee.
-              </Typography>
+              </div>
             </div>
           )}
         </CardContent>

components/carte-etat/carte-etat-component.module.scss

@@ -59,11 +59,20 @@
 .chartWrapper {
   height: 210px;
   display: flex;
-  width: 100%;
 }
 
 .mainChart{
-  flex: 3,
+  flex: 1;
+}
+
+.simpop {
+  margin-top: 10px;
+  padding-left: "3px";
+
+  > div {
+    display: flex;
+    align-items: baseline;
+  }
 }
 
 .titleWrapper {
@@ -74,3 +83,11 @@
   margin: 0px;
   overflow-x:scroll;
 }
+
+.sourceInsee {
+  color: #B1B1B1;
+  font-family: $default-font-family;
+  font-size: 12px;
+  text-align: right;
+  margin-left: 15px;
+}
\ No newline at end of file

components/cartes-impact/gagnants-perdants/gagnants-perdants-component.jsx

@@ -241,9 +241,9 @@ class GagnantsPerdantsCard extends PureComponent {
                     classes={{ root: classes.styleIconPerdant }}
                     fontSize="default"
                   />
-                  <Typography inline classes={{ root: classes.titleCard }}>
+                  <span className={styles2.titleCard}>
                     ayant une augmentation de l&apos;IR
-                  </Typography>
+                  </span>
 
                   <div className={classes.containerImpact}>
                     {
@@ -296,9 +296,10 @@ class GagnantsPerdantsCard extends PureComponent {
                     classes={{ root: classes.styleIconGagnant }}
                     fontSize="default"
                   />
-                  <Typography inline classes={{ root: classes.titleCard }}>
+                  <span className={styles2.titleCard}>
                     ayant une baisse de l&apos;IR
-                  </Typography>
+                  </span>
+
                   <div className={classes.containerImpact}>
                     {
                       montrerPLF
@@ -334,9 +335,10 @@ class GagnantsPerdantsCard extends PureComponent {
                     classes={{ root: classes.styleIconNeutre }}
                     fontSize="default"
                   />
-                  <Typography inline classes={{ root: classes.titleCard }}>
+                  <span className={styles2.titleCard}>
                     non concernés
-                  </Typography>
+                  </span>
+
                   <div className={classes.containerImpact}>
                     {
                       montrerPLF

components/cartes-impact/gagnants-perdants/gagnants-perdants-component.module.scss

@@ -58,3 +58,11 @@
   color: #000000;
   font-weight: bold;
 }
+
+.titleCard {
+  color: $dark-grey-text-color;
+  font-family: $default-font-family;
+  font-size: 18px;
+  font-weight: bold;
+  margin-left: 10px;
+}
\ No newline at end of file

styles/styles.scss

 @import "./variables";
 
+body {
+  font-size: 1rem !important;
+}
+
 h1 {
   font-family: $default-font-family;
   color: $dark-grey-text-color;

styles/theme.js

@@ -5,7 +5,6 @@ const theme = createMuiTheme({
   typography: {
     fontFamily: ["\"Lato\", sans-serif", "Lora"].join(","),
     fontWeightMedium: 500,
-    useNextVariants: true,
 
     // TYPOGRAPHIE SIMULATEUR
 
@@ -35,14 +34,6 @@ const theme = createMuiTheme({
       // fontWeight: 'light'
     },
 
-    subtitle1: {
-      fontSize: 12,
-    },
-
-    body1: {
-      fontWeight: 500,
-    },
-
     button: {
       fontStyle: "regular",
       fontWeight: 700,
@@ -63,17 +54,7 @@ const theme = createMuiTheme({
       fontSize: "24px",
       fontWeight: "bold",
     },
-    // h4: {},
-    // h6: {},
 
-    body2: {
-      fontFamily: "Lora",
-      fontSize: "18px",
-    },
-
-    subtitle2: {
-      fontSize: 12,
-    },
   },
 
   palette: {