Feat: use boxed for createMonth

src/components/CreateMonth.vue

@@ -1,8 +1,12 @@
 <template>
-<div id="create-month" >
-    <div class="month-presentation" id="new-month">
+    <div class="boxed-green month-presentation" id="new-month">
       <div class="date">
           <input type="month" v-model="monthDate">
+
+          <div class="actions">
+              <button class="validate" @click="save"> Valider </button>
+              <button class="cancel" @click="cancel"> Annuler </button>
+          </div>
       </div>
       <div class="datas">
         <ul>
@@ -32,12 +36,7 @@
             </li>
         </ul>
       </div>
-      <div class="actions">
-        <button class="validate" @click="save"> Valider </button>
-        <button class="cancel" @click="cancel"> Annuler </button>
-      </div>
     </div>
-</div>
 </template>
 
 <script>
@@ -93,14 +92,8 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
     .month-presentation {
-        display: inline-flex;
-        flex-direction: row;
-        box-shadow: 5px 5px 10px gray;
-        border-left: 1rem solid green;
-        align-items: center;
-        justify-content: space-between;
-        border-radius: 10px;
-        width: 100%;
+        display: grid;
+        grid-template-columns: 140px 1fr;
         }
     .month-presentation > * {
         margin: 20px;

src/components/MonthPresentation.vue

@@ -107,14 +107,8 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
     .month-presentation {
-        /*
-        display: inline-flex;
-        flex-direction: row;
-        */
         display: grid;
-        grid-template-columns: 140px 6fr;
-
-        width: 100%;
+        grid-template-columns: 140px 1fr;
         }
     .month-presentation > * {
         margin: 20px;

src/style.css

@@ -2,24 +2,20 @@ body {
     background-color: whitesmoke;
 }
 
-.actions {
-    display: inline-flex;
-    flex-direction: column;
-    width: 120px;
-}
-
 button {
     color: white;
-    padding: 15px 32px;
+    padding: 4px;
     box-shadow: 1px 1px 2px gray;
     text-align: center;
     display: inline-block;
-    width: 100%;
-    font-size: 16px;
     border-radius: 5px;
     background-color: white;
+    margin-top: 5px;
+    font-size: 0.8em;
+    width: auto;
     transition: all 0.2s ease-out;
-    }
+}
+
 button:hover {
     transition: all 0.2s ease-out;
 }
@@ -56,6 +52,13 @@ button:hover {
     background-color: white;
 }
 
+.boxed-green {
+    box-shadow: 2px 2px 5px gray;
+    border-left: 1rem solid green;
+    border-radius: 10px;
+    background-color: white;
+}
+
 .hightlights {
     display: grid;
     grid-template-columns: repeat(3, 1fr);