modification bouton parametre + amélioration page analyse

src/pages/Analyse.js

@@ -125,12 +125,21 @@ const Analyse = () => {
                 <div className="bas_de_page">
                     <NavigationDashboard />   
                     <div className="Analyse">
-                        <div className="Stat_1">
+                        <div className="Stat-1">
-                            Tendances des ventes
+                            <div className="Stat-1_titre">
-                            <Pie data={data}/>
+                                <p>Tendances des ventes</p>
+                            </div>
+                            <div className='camenbert'>
+                                <Pie data={data}/>
+                            </div>
                         </div>
-                        <div className="Stat_2">
+                        <div className="Stat-2">
-                            Statistique n°2
+                            <div className="Stat-2_titre">
+                                <p>coucou2</p>
+                            </div>
+                            <div className="histogramme">
+                                coucou21
+                            </div>
                         </div>
                     </div>                       
                 </div>

src/styles/components/_analyse.scss

@@ -161,36 +161,96 @@ body {
 
             .Analyse {
                 display: flex;
-                flex-direction: column;
+                flex-direction: row;
-                justify-content: space-evenly;
+                justify-content: space-between;
                 height: auto;
                 width: 94.3%;
                 margin: 5px 10px 10px 5px;
 
-                .Stat_1 {
+                .Stat-1 {
                     display: flex;
-                    width: auto;
+                    flex-direction: column;
-                    height: 50%;
+                    justify-content: space-between;
-                    margin: 50px 50px 8px 50px;
+                    width: 49.75%;
+                    height: auto;
 
                     background: rgba(255, 255, 255, 0.3);
                     border-radius: 15px;
                     box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
                     backdrop-filter: blur(3px);
                     -webkit-backdrop-filter: blur(15px);
+
+                    .Stat-1_titre {
+                        display: flex;
+                        width: auto;
+                        height: 25%;
+
+                    }
+
+                    .Stat-1_titre p {
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: space-around;
+                        margin: auto;
+                        padding: 25px;
+                        font-size: 40px;
+
+                        background: rgba(255, 255, 255, 0.3);
+                        border-radius: 15px;
+                        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+                        backdrop-filter: blur(3px);
+                        -webkit-backdrop-filter: blur(15px);
+                    }
+
+                    .camenbert {
+                        display: flex;
+                        margin-left: auto;
+                        margin-right: auto;
+                        margin-bottom: 20px;
+                        width: auto;
+                        height: 74%;
+                    }
                 }
 
-                .Stat_2 {
+                .Stat-2 {
                     display: flex;
-                    width: auto;
+                    flex-direction: column;
-                    height: 50%;
+                    justify-content: space-between;
-                    margin: 8px 50px 50px 50px;
+                    width: 49.75%;
+                    height: auto;
 
                     background: rgba(255, 255, 255, 0.3);
                     border-radius: 15px;
                     box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
                     backdrop-filter: blur(3px);
                     -webkit-backdrop-filter: blur(15px);
+
+                    .Stat-2_titre {
+                        display: flex;
+                        width: auto;
+                        height: 25%;
+                    }
+
+                    .Stat-2_titre p {
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: space-around;
+                        margin: auto;
+                        padding: 30px;
+                        font-size: 40px;
+
+                        background: rgba(255, 255, 255, 0.3);
+                        border-radius: 15px;
+                        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+                        backdrop-filter: blur(3px);
+                        -webkit-backdrop-filter: blur(15px);
+                    }
+
+                    .histogramme {
+                        display: flex;
+                        width: auto;
+                        height: 74%;
+                    }
                 }
             }
         }

src/styles/components/_dashboard.scss

@@ -227,7 +227,7 @@ body {
                             display: flex;
                             flex-direction: row;
                             justify-content: space-between;
-                            width: 53%;
+                            width: 53.5%;
                             height: auto;
 
                             .Ch_Clé_gauche {
@@ -252,7 +252,7 @@ body {
                                 .Ch_Clé_gauche_bas {
                                     display: flex;
                                     width: auto;
-                                    height: 42%;
+                                    height: 43%;
 
                                     background: rgba(255, 255, 255, 0.3);
                                     border-radius: 15px;
@@ -266,7 +266,7 @@ body {
                                 display: flex;
                                 flex-direction: column;
                                 justify-content: space-between;
-                                width: 51%;
+                                width: 52%;
                                 height: auto;
 
                                 .Ch_Clé_droite_haut {
@@ -284,7 +284,7 @@ body {
                                 .Ch_Clé_droite_bas {
                                     display: flex;
                                     width: auto;
-                                    height: 49%;
+                                    height: 50%;
 
                                     background: rgba(255, 255, 255, 0.3);
                                     border-radius: 15px;

src/styles/components/_parametre.scss

@@ -313,7 +313,7 @@ body {
                                 width: 18px;
                                 height: 18px;
                                 border-radius: 20px;
-                                top: 3.25pt;
+                                top: 2.75pt;
                                 left: 10%;
                                 background-color: white;
                                 transform: scale(1.1);
@@ -322,7 +322,7 @@ body {
                             }
 
                             input:checked[type="checkbox"]:before {
-                                top: 3.25pt;
+                                top: 2.75pt;
                                 left: 27px;
                             }
                         }