feat: #315 Highlighting selected month on time entries

Author: Juan Gabriel Guzman

src/app/modules/shared/components/month-picker/month-picker.component.html

@@ -1,10 +1,10 @@
-<div class="container-month d-flex">
+<div class="d-flex">
   <div
-    class="month w-100 text-center"
+    class="month w-100 text-center align-self-center d-flex flex-column"
     *ngFor="let month of months; let i = index"
     (click)="getMonth(i)"
     [ngClass]="{ active: activeMonth === i }"
   >
-    <div>{{ month }}</div>
+   <div class="p-2">{{ month }}</div>
   </div>
 </div>

src/app/modules/shared/components/month-picker/month-picker.component.scss

@@ -1,15 +1,25 @@
 @import '../../../../../styles/colors.scss';
 
+@mixin highlight {
+  opacity: 0.7;
+  line-height: 1.2em;
+  font-weight: bold;
+}
+
 .month {
   background: $primary;
   color: white;
   cursor: pointer;
+  line-height: 1em;
 
   &:hover {
-    opacity: 0.7;
+    @include highlight();
   }
 }
 
 .active {
-  background-color: $primary;
+  @include highlight();
+  border-radius: 0.2em;
+  text-decoration: underline;
+
 }