diff --git a/src/pages/Analyse.js b/src/pages/Analyse.js index 1bbfd32..40b7bc8 100644 --- a/src/pages/Analyse.js +++ b/src/pages/Analyse.js @@ -125,12 +125,21 @@ const Analyse = () => {
-
- Tendances des ventes - +
+
+

Tendances des ventes

+
+
+ +
-
- Statistique n°2 +
+
+

coucou2

+
+
+ coucou21 +
diff --git a/src/styles/components/_analyse.scss b/src/styles/components/_analyse.scss index 166e983..bc02e28 100644 --- a/src/styles/components/_analyse.scss +++ b/src/styles/components/_analyse.scss @@ -161,36 +161,96 @@ body { .Analyse { display: flex; - flex-direction: column; - justify-content: space-evenly; + flex-direction: row; + justify-content: space-between; height: auto; width: 94.3%; margin: 5px 10px 10px 5px; - .Stat_1 { + .Stat-1 { display: flex; - width: auto; - height: 50%; - margin: 50px 50px 8px 50px; + flex-direction: column; + justify-content: space-between; + 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; - height: 50%; - margin: 8px 50px 50px 50px; + flex-direction: column; + justify-content: space-between; + 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%; + } } } } diff --git a/src/styles/components/_dashboard.scss b/src/styles/components/_dashboard.scss index 15c6f35..50e9ba7 100644 --- a/src/styles/components/_dashboard.scss +++ b/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; diff --git a/src/styles/components/_parametre.scss b/src/styles/components/_parametre.scss index 72b4c18..4ed35bd 100644 --- a/src/styles/components/_parametre.scss +++ b/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; } }