Feat: boxed class and tweek button

src/components/MonthPresentation.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="month-presentation">
+<div class="boxed month-presentation">
   <div class="date">
     <div class="month">
        {{ theMonth }} 
@@ -114,10 +114,7 @@ export default {
         display: grid;
         grid-template-columns: 140px 6fr;
 
-        box-shadow: 2px 2px 5px gray;
-        border-left: 1rem solid black;
         width: 100%;
-        border-radius: 10px;
         }
     .month-presentation > * {
         margin: 20px;

src/components/hightlights.vue

@@ -1,70 +1,70 @@
 <template>
 <div class="hightlights"> 
-    <div class="hightlight">
+    <div class="hightlight boxed">
         <ul>
             <li>{{ ca }} €</li>
             <li>CA</li>
         </ul>
     </div>
-    <div class="hightlight">
+    <div class="hightlight boxed">
         <ul>
             <li>{{ caMean }} €</li>
             <li>CA moyen</li>
         </ul>
     </div>
     <!--
-    <div class="hightlight">
+    <div class="hightlight boxed">
         <ul>
             <li>{{ caTheo }}</li>
             <li>CA des séances effectuées</li>
         </ul>
     </div>
     -->
-    <div class="hightlight">
+    <div class="hightlight boxed">
         <ul>
             <li>{{ caUnFactured }} €</li>
             <li>Non facturé</li>
         </ul>
     </div>
-    <div class="hightlight">
+    <div class="hightlight boxed">
         <ul>
             <li>{{ remuneration }} €</li>
             <li>Rémunération</li>
         </ul>
     </div>
-    <div class="hightlight">
+    <div class="hightlight boxed">
         <ul>
             <li>{{ remunerationMean }} €</li>
             <li>Rémunération moyenne</li>
         </ul>
     </div>
     <!--
-    <div class="hightlight">
+    <div class="hightlight boxed">
         <ul>
             <li>{{ retrocession }}</li>
             <li>Rétrocession</li>
         </ul>
     </div>
-    <div class="hightlight">
+    <div class="hightlight boxed">
         <ul>
             <li>{{ retrocessionMean }}</li>
             <li>Rétrocession moyenne</li>
         </ul>
     </div>
-    <div class="hightlight">
+    <div class="hightlight boxed">
         <ul>
             <li>{{ caPro }}</li>
             <li> CA pour la partie pro ({{ caProPercentage*100}}% du CA)</li>
         </ul>
     </div>
-    <div class="hightlight">
+    <div class="hightlight boxed">
         <ul>
             <li>{{ caPerso }}</li>
             <li> CA pour la partie perso</li>
         </ul>
     </div>
     -->
-    <div class="hightlight">
+    <div class="hightlight boxed">
         <ul>
             <li>{{ caPersoUntouch }} €</li>
             <li> CA perso non utilisé pour se rémunérer</li>
@@ -131,13 +131,10 @@ export default {
     list-style-type: none;
     display: flex;
     flex-flow: column wrap;
-    box-shadow: 2px 2px 5px gray;
-    border-left: 1rem solid black;
-    border-radius: 10px;
     padding-inline-start: 0;
 }
 .hightlight > ul > li {
-    margin: 3px;
+    margin: 5px;
     flex-direction: column-reverse;
 }
 .hightlight > ul  :first-child{

src/components/nav.vue

@@ -1,8 +1,11 @@
 <template>
+    <h1>Sous Margot</h1>
+    <!--
     <nav>
         <router-link to="/"> Home </router-link>
         <router-link to="/config"> Config </router-link>
     </nav>
+    -->
 </template>
 
 <script>
@@ -15,7 +18,4 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-nav {
-    background-color: green;
-}
 </style>

src/style.css

@@ -1,3 +1,6 @@
+body {
+    background-color: whitesmoke;
+}
 
 .actions {
     display: inline-flex;
@@ -14,8 +17,13 @@ button {
     width: 100%;
     font-size: 16px;
     border-radius: 5px;
-    color: white;
+    background-color: white;
+    transition: all 0.2s ease-out;
     }
+button:hover {
+    transition: all 0.2s ease-out;
+}
+
 .validate {
     border: 2px solid green;
     color: green;
@@ -40,3 +48,10 @@ button {
   background-color: orange;
   color: white;
 }
+
+.boxed {
+    box-shadow: 2px 2px 5px gray;
+    border-left: 1rem solid black;
+    border-radius: 10px;
+    background-color: white;
+}