fix: TT-312 [UI] Calendar the section titles is not responsive (#731)

* fix: TT-312 [UI] Calendar the section titles is not responsive

* fix: TT-312 [UI] Rebase from master

Author: ridouku

src/app/modules/time-entries/components/calendar/calendar.component.html

@@ -66,14 +66,14 @@
 
 <div>
     <div class="row justify-content-between ">
-      <div class="col-xs-12 col-sm-5 col-md-5 custom-left-buttons-group">
+      <div class="col-xs-12 col-sm-4 col-md-5 custom-left-buttons-group">
         <div class="btn-group" role="group" aria-label="Move date">
           <button
             mwlCalendarPreviousView
             type="button"
             [(view)]="calendarView"
             [(viewDate)]="currentDate"
-            class="btn btn-light btn-block m-0"
+            class="btn btn-navigation btn-light btn-block m-0"
             (click)="handleChangeDateEvent()"
           >
             Previous
@@ -83,7 +83,7 @@
             [ngClass]="{ active: isToday }"
             type="button"
             [(viewDate)]="currentDate"
-            class="btn btn-light btn-block m-0"
+            class="btn btn-navigation btn-light btn-block m-0"
             (click)="handleChangeDateEvent()"
           >
             Today
@@ -93,7 +93,7 @@
             type="button"
             [(view)]="calendarView"
             [(viewDate)]="currentDate"
-            class="btn btn-light btn-block m-0"
+            class="btn btn-navigation btn-light btn-block m-0"
             (click)="handleChangeDateEvent()"
             [disabled]="nextDateDisabled"
           >
@@ -102,7 +102,7 @@
         </div>
       </div>
       <div class="col-xs-12 col-sm-2 col-md-2 text-center currentDate">
-        <p class="font-weight-bold h4">
+        <p class="font-weight-bold h5">
           {{ currentDate | date: 'EEEE' }}
         </p>
         <P class="h5">
@@ -114,23 +114,23 @@
           <button
             [ngClass]="{ active: isVisibleForCurrentView(calendarView, [CALENDAR_VIEW_ENUM.Month]) }"
             type="button"
-            class="btn btn-light btn-block m-0"
+            class="btn btn-navigation btn-light btn-block m-0"
             (click)="changeCalendarView(CALENDAR_VIEW_ENUM.Month)"
           >
             Month
           </button>
           <button
             [ngClass]="{ active: isVisibleForCurrentView(calendarView, [CALENDAR_VIEW_ENUM.Week]) }"
             type="button"
-            class="btn btn-light btn-block m-0"
+            class="btn btn-navigation btn-light btn-block m-0"
             (click)="changeCalendarView(CALENDAR_VIEW_ENUM.Week)"
           >
             Week
           </button>
           <button
             [ngClass]="{ active: isVisibleForCurrentView(calendarView, [CALENDAR_VIEW_ENUM.Day]) }"
             type="button"
-            class="btn btn-light btn-block m-0"
+            class="btn btn-navigation btn-light btn-block m-0"
             (click)="changeCalendarView(CALENDAR_VIEW_ENUM.Day)"
           >
             Day

src/app/modules/time-entries/components/calendar/calendar.component.scss

@@ -133,6 +133,7 @@ $activity-text-size: $max-lines-activity * $line-height-base;
   p {
     margin: 0;
   }
+  padding-right: 0px;
 }
 
 @media (max-width: 576px) {
@@ -152,3 +153,18 @@ $activity-text-size: $max-lines-activity * $line-height-base;
     text-align: start;
   }
 }
+
+.btn-navigation{
+  padding-left: 6px;
+  padding-right: 6px;
+}
+
+@media only screen and (min-width : 576px) and (max-width : 767px) {
+  .currentDate{
+    margin-left: 14px;
+    p {
+      margin: 0;
+    }
+    padding-right: 0px;
+  }
+}