From dd997d569a87dfab0efba31dbd82a0a367605a12 Mon Sep 17 00:00:00 2001
From: Bertrand Benjamin <benjamin.bertrand@opytex.org>
Date: Thu, 8 Jul 2021 20:24:32 +0200
Subject: [PATCH] Feat: styling for months

---
 src/components/CreateMonth.vue       |  3 ++-
 src/components/MonthForm.vue         |  4 ++--
 src/components/MonthPresentation.vue | 36 ++++++++++++++++++++++------
 src/style.css                        |  1 +
 4 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/src/components/CreateMonth.vue b/src/components/CreateMonth.vue
index 2bd7e0f..c76fd02 100644
--- a/src/components/CreateMonth.vue
+++ b/src/components/CreateMonth.vue
@@ -46,9 +46,10 @@ export default {
 .month-presentation {
     display: inline-flex;
     flex-direction: row;
-    background-color: darkgray;
+    background-color: palegreen;
     align-items: center;
     justify-content: space-between;
+    border-radius: 10px;
     width: 100%;
     }
 .month-presentation > * {
diff --git a/src/components/MonthForm.vue b/src/components/MonthForm.vue
index 458144e..10262e4 100644
--- a/src/components/MonthForm.vue
+++ b/src/components/MonthForm.vue
@@ -14,7 +14,7 @@
     <input type="number" id="ca-react">
     </li>
     <li>
-    <label for="nbr-seance">Nombre de séances</label>
+    <label for="nbr-seance">Nombre de séances effectuées</label>
     <input type="number" id="nbr-seance">
     </li>
     <li>
@@ -52,7 +52,7 @@ ul {
     flex-flow: row wrap;
 }
 li {
-    margin: 0px;
+    margin: 3px;
     width: 30%;
     display: flex;
     flex-direction: column-reverse;
diff --git a/src/components/MonthPresentation.vue b/src/components/MonthPresentation.vue
index 0160187..22075bf 100644
--- a/src/components/MonthPresentation.vue
+++ b/src/components/MonthPresentation.vue
@@ -5,12 +5,12 @@
   </div>
   <div class="infos">
     <ul>
-        <li> CA théorique {{ month.ca_theo ?? "∅"}}</li>
-        <li> CA à la rétrocession {{ month.ca_retro ?? "∅"}}</li>
-        <li> CA réactualisé {{ month.ca_react ?? "∅"}}</li>
-        <li> Nombre de séances {{ month.nbr_seances ?? "∅"}}</li>
-        <li> Montant de la rétrocession {{ month.retro ?? "∅"}}</li>
-        <li> Rémunération effectuée {{ month.remumeration ?? "∅"}}</li>
+        <li> <span class="label"> CA théorique </span> <span class="value">{{ month.ca_theo ?? "∅"}}€</span></li>
+        <li> <span class="label"> CA à la rétrocession </span> <span class="value">{{ month.ca_retro ?? "∅"}}€</span></li>
+        <li> <span class="label"> CA réactualisé </span> <span class="value">{{ month.ca_react ?? "∅"}}€</span></li>
+        <li> <span class="label"> Nombre de séances effectuée</span> <span class="value">{{ month.nbr_seances ?? "∅"}}</span></li>
+        <li> <span class="label"> Montant de la rétrocession </span> <span class="value">{{ month.retro ?? "∅"}}€</span></li>
+        <li> <span class="label"> Rémunération effectuée </span> <span class="value">{{ month.remumeration ?? "∅"}}€</span></li>
     </ul>
   </div>
   <div class="actions">
@@ -37,14 +37,36 @@ export default {
 .month-presentation {
     display: inline-flex;
     flex-direction: row;
-    background-color: grey;
+    background-color: mintcream;
     align-items: center;
     justify-content: space-between;
     width: 100%;
+    border-radius: 10px;
     }
 .month-presentation > * {
     margin: 20px;
 }
 
+.date {
+    font-size: 1.5em;
+    font-weight: bold;
+}
+
+ul {
+    list-style-type: none;
+    padding: 0;
+    display: flex;
+    flex-flow: row wrap;
+}
+li {
+    margin: 3px;
+    width: 30%;
+    display: flex;
+    flex-direction: column-reverse;
+}
+.value {
+    font-size: 1.5em;
+    font-weight: bold;
+}
 
 </style>
diff --git a/src/style.css b/src/style.css
index a3dd76a..18295a6 100644
--- a/src/style.css
+++ b/src/style.css
@@ -13,6 +13,7 @@ button {
   display: inline-block;
   width: 100%;
   font-size: 16px;
+  border-radius: 5px;
     }
 .validate {
   background-color: green;