Feat: goto grid display

src/components/CreateMonth.vue

@@ -95,7 +95,8 @@ export default {
     .month-presentation {
         display: inline-flex;
         flex-direction: row;
-        background-color: palegreen;
+        box-shadow: 5px 5px 10px gray;
+        border-left: 1rem solid green;
         align-items: center;
         justify-content: space-between;
         border-radius: 10px;

src/components/MonthPresentation.vue

@@ -112,7 +112,7 @@ export default {
         flex-direction: row;
         */
         display: grid;
-        grid-template-columns: 1fr 6fr;
+        grid-template-columns: 140px 6fr;
 
         box-shadow: 2px 2px 5px gray;
         border-left: 1rem solid black;

src/style.css

@@ -9,15 +9,16 @@ button {
     border: none;
     color: white;
     padding: 15px 32px;
+    box-shadow: 1px 1px 2px gray;
     text-align: center;
     display: inline-block;
     width: 100%;
     font-size: 16px;
     border-radius: 5px;
-    color: black;
+    color: white;
     }
 .validate {
-  background-color: green;
+    background-color: green;
 }
 .cancel {
   background-color: red;

src/views/home.vue

@@ -1,6 +1,5 @@
 <template>
-<h1>Home</h1>
-<revenus-chart/>
+<h1>Sous de Margot</h1>
 <section id="selector">
    <month-selector/> 
 </section>
@@ -11,8 +10,8 @@
         <months-list/>
     </section>
     <section id="stats">
-        <h2>Résumé</h2>
         <highlights/>
+        <revenus-chart/>
     </section>
 </div>
 </template>
@@ -44,22 +43,27 @@ export default {
         }),
     },
     mounted () {
-        //this.loadMonths()
+        this.loadMonths()
     }, 
 }
 </script>
 
 <style scoped>
+#selector {
+    display: none;
+    background-color: gray;
+    padding: 10px;
+}
 #content {
-    display: inline-flex;
-    flex-direction: row;
-    background-color: red;
+    display: grid;
+    grid-template-columns: 1fr 3fr;
     margin: 0;
 }
 #content > * {
-    margin: 10px;
+    margin: 20px;
 }
 #months {
-    flex-basis: 60%;
+}
+#stats {
 }
 </style>