Feat: styling for months

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 > * {

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;

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>

src/style.css

@@ -13,6 +13,7 @@ button {
   display: inline-block;
   width: 100%;
   font-size: 16px;
+  border-radius: 5px;
     }
 .validate {
   background-color: green;