[REF] web: rework calendar's style

This commit reworks the mini calendar's style to make it look like
the months in year mode.
It also reworks the style of the calendar's popover in modes day,
week and month to reduce the differences with the year popover.

Task: 2193921

2 files changed, 28 insertions, 8 deletions

diff --git a/addons/web/static/src/js/views/calendar/calendar_renderer.js b/addons/web/static/src/js/views/calendar/calendar_renderer.js
index 2df67e8892f..06a7ab7d84a 100644
--- a/addons/web/static/src/js/views/calendar/calendar_renderer.js
+++ b/addons/web/static/src/js/views/calendar/calendar_renderer.js
@@ -584,7 +584,7 @@ return AbstractRenderer.extend({
                 });
             },
             'showOtherMonths': true,
-            'dayNamesMin' : this.state.fc_options.dayNamesShort,
+            'dayNamesMin' : this.state.fc_options.dayNamesShort.map(x => x[0]),
             'monthNames': this.state.fc_options.monthNamesShort,
             'firstDay': this.state.fc_options.firstDay,
         });
diff --git a/addons/web/static/src/scss/web_calendar.scss b/addons/web/static/src/scss/web_calendar.scss
index b3ab7d7bf6f..8df6206cef1 100644
--- a/addons/web/static/src/scss/web_calendar.scss
+++ b/addons/web/static/src/scss/web_calendar.scss
@@ -476,18 +476,23 @@ $o-cw-filter-avatar-size: 20px;
         th {
             padding: .7em .2em;
             width: 14%;
+
+            > span {
+                color: #666666;
+            }
         }
 
         td {
             padding: 0;
 
             a, span {
-                padding: .2em .2em .1em;
-                float: right;
-                width: 22px;
+                padding: 5px 0;
                 background: none;
                 text-align: center;
-                color: gray('700');
+                vertical-align: middle;
+                font-size: 1.2rem;
+                color: gray('900');
+                font-weight: 400;
             }
 
             &.ui-datepicker-current-day a {
@@ -497,11 +502,11 @@ $o-cw-filter-avatar-size: 20px;
             }
 
             &.ui-datepicker-today a {
+                margin: auto;
                 border-radius: 100%;
-                padding-top: 0.3em;
+                padding: .1em;
                 width: 25px;
                 background: mix($o-cw-color-today-accent, white, 80%);
-                font-weight: bold;
                 color: white;
             }
 
@@ -517,6 +522,12 @@ $o-cw-filter-avatar-size: 20px;
         .ui-datepicker-header {
             border-radius: 0;
 
+            .ui-datepicker-title {
+                color: gray('600');
+                font-size: 1.2rem;
+                font-weight: normal;
+            }
+
             .ui-icon {
                 background-image: none;
                 text-indent: 0;
@@ -640,6 +651,10 @@ $o-cw-filter-avatar-size: 20px;
         line-height: 1;
     }
 
+    .card-footer {
+        background: none;
+    }
+
     .o_cw_popover_close {
         cursor: pointer;
     }
@@ -656,12 +671,12 @@ $o-cw-filter-avatar-size: 20px;
 
     .list-group-item {
         padding: 0.5rem 1rem;
+        border: none;
     }
 
     .o_cw_popover_fields_secondary {
         max-height: 170px; // Fallback for old browsers
         max-height: 25vh;
-        overflow-y: auto;
 
         &::-webkit-scrollbar {
             background: gray('200');
@@ -691,6 +706,11 @@ $o-cw-filter-avatar-size: 20px;
     $color: nth($o-colors-complete, $i);
 
     .o_calendar_view .fc-view {
+        .fc-bgevent.o_calendar_color_#{$i - 1} {
+            border-color: $color;
+            background-color: $color;
+            opacity: 0.2;
+        }
         .fc-event.o_calendar_color_#{$i - 1} {
             border-color: $color;
             color: darken($color, 35%);