MM-40447: fixes minor styling issues in suggestions (#9496)

* MM-40447: fixes minor styling issues in suggestions

- Avatar in user auto complete has no space from text.
- Channel icon and name are not center aligned.
- Hovering a date and selected date are not circles but ellipses.

sass/components/_day-picker.scss

@@ -20,16 +20,36 @@
         }
 
         .DayPicker-Day {
+            position: relative;
+            z-index: 1;
             min-width: 32px;
             height: 32px;
             padding: 0;
             border-radius: 100%;
             font-weight: 600;
+
+            &:hover {
+                background: var(--center-channel-bg) !important;
+            }
+
+            &::before {
+                position: absolute;
+                z-index: -1;
+                top: 0;
+                left: 15px;
+                width: 32px;
+                height: 32px;
+                border-radius: 32px;
+                content: " ";
+            }
         }
 
         .DayPicker-Day--today {
-            background: rgba(var(--button-bg-rgb), 0.08);
             color: var(--button-bg);
+
+            &::before {
+                background: rgba(var(--button-bg-rgb), 0.08);
+            }
         }
 
         .DayPicker-wrapper {

sass/components/_suggestion-list.scss

@@ -207,6 +207,7 @@
     .suggestion-list__icon {
         display: inline-flex;
         flex: 0 0 1.6rem;
+        align-items: center;
         justify-content: center;
         fill: v(center-channel-color);
         opacity: 0.56;
@@ -255,10 +256,6 @@
         display: block;
         margin-right: 12px;
         text-align: center;
-
-        &.Avatar-sm {
-            margin: 0;
-        }
     }
 
     .status-wrapper {
@@ -267,8 +264,12 @@
         margin-top: 4px;
         margin-right: 12px;
 
+        .Avatar.Avatar-sm {
+            margin: 0;
+        }
+
         .status {
-            right: -2px;
+            right: -4px;
             bottom: -4px;
 
             svg {

utils/utils.jsx

@@ -523,7 +523,7 @@ export function applyTheme(theme) {
     }
 
     if (theme.buttonBg) {
-        changeCss('.app__body .modal .settings-modal .profile-img__remove:hover, .app__body .DayPicker:not(.DayPicker--interactionDisabled) .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover, .app__body .modal .settings-modal .team-img__remove:hover, .app__body .btn.btn-transparent:hover, .app__body .btn.btn-transparent:active, .app__body .post-image__details .post-image__download svg:hover, .app__body .file-view--single .file__download:hover, .app__body .new-messages__button div, .app__body .btn.btn-primary, .app__body .tutorial__circles .circle.active', 'background:' + theme.buttonBg);
+        changeCss('.app__body .modal .settings-modal .profile-img__remove:hover, .app__body .DayPicker:not(.DayPicker--interactionDisabled) .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover:before, .app__body .modal .settings-modal .team-img__remove:hover, .app__body .btn.btn-transparent:hover, .app__body .btn.btn-transparent:active, .app__body .post-image__details .post-image__download svg:hover, .app__body .file-view--single .file__download:hover, .app__body .new-messages__button div, .app__body .btn.btn-primary, .app__body .tutorial__circles .circle.active', 'background:' + theme.buttonBg);
         changeCss('.app__body .system-notice__logo svg', 'fill:' + theme.buttonBg);
         changeCss('.app__body .post-image__details .post-image__download svg:hover', 'border-color:' + theme.buttonBg);
         changeCss('.app__body .btn.btn-primary:hover, .app__body .btn.btn-primary:active, .app__body .btn.btn-primary:focus', 'background:' + changeColor(theme.buttonBg, -0.15));