[gnome-shell] theme: Hide panel underline under the do not disturb icon

[Florian Müllner <fmuellner src gnome org>]

commit bc465ab0062ed897bea873dbcf31c61041a74f30
Author: Jonas Dreßler <verdre v0yd nl>
Date:   Thu Feb 20 20:10:54 2020 +0100

    theme: Hide panel underline under the do not disturb icon
    
    Hide the focused/active indicator of the panel underneath the
    do-not-disturb icon.
    
    https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/1037

 data/theme/gnome-shell-sass/widgets/_calendar.scss |  9 ++++++++-
 data/theme/gnome-shell-sass/widgets/_panel.scss    | 23 +++++++++++++++++++---
 js/ui/dateMenu.js                                  |  4 +++-
 3 files changed, 31 insertions(+), 5 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/widgets/_calendar.scss 
b/data/theme/gnome-shell-sass/widgets/_calendar.scss
index 207a30267d..8074b2106b 100644
--- a/data/theme/gnome-shell-sass/widgets/_calendar.scss
+++ b/data/theme/gnome-shell-sass/widgets/_calendar.scss
@@ -1,6 +1,13 @@
 /* Date/Time Menu */
 
-.clock-display-box { spacing: $base_spacing; }
+.clock-display-box {
+  spacing: $base_spacing / 2;
+
+  .clock {
+    padding-left: $base_padding;
+    padding-right: $base_padding;
+  }
+}
 
 // overall menu
 #calendarArea {
diff --git a/data/theme/gnome-shell-sass/widgets/_panel.scss b/data/theme/gnome-shell-sass/widgets/_panel.scss
index 222d68629b..56c445a743 100644
--- a/data/theme/gnome-shell-sass/widgets/_panel.scss
+++ b/data/theme/gnome-shell-sass/widgets/_panel.scss
@@ -54,9 +54,6 @@ $panel_height: 1.86em;
     }
 
     &:active, &:overview, &:focus, &:checked {
-      // Trick due to St limitations. It needs a background to draw a box-shadow
-      background-color: rgba(0, 0, 0, 0.01);
-      box-shadow: inset 0 -2px 0 0 lighten($selected_bg_color,5%);
       color: lighten($panel_fg_color, 20%);
     }
 
@@ -82,6 +79,26 @@ $panel_height: 1.86em;
     }
   }
 
+  .panel-button {
+    &:active, &:overview, &:focus, &:checked {
+      // Trick due to St limitations. It needs a background to draw a box-shadow
+      background-color: rgba(0, 0, 0, 0.01);
+      box-shadow: inset 0 -2px 0 0 lighten($selected_bg_color,5%);
+    }
+  }
+
+  .panel-button.clock-display {
+    // Move highlight from .panel-button to .clock
+    &:active, &:overview, &:focus, &:checked {
+      box-shadow: none;
+
+      .clock {
+        background-color: rgba(0, 0, 0, 0.01);
+        box-shadow: inset 0 -2px 0 0 lighten($selected_bg_color,5%);
+      }
+    }
+  }
+
   .panel-status-indicators-box,
   .panel-status-menu-box {
     spacing: 2px;
diff --git a/js/ui/dateMenu.js b/js/ui/dateMenu.js
index fbfccfc1b4..a517df4346 100644
--- a/js/ui/dateMenu.js
+++ b/js/ui/dateMenu.js
@@ -553,7 +553,9 @@ class DateMenuButton extends PanelMenu.Button {
             menuAlignment = 1.0 - menuAlignment;
         super._init(menuAlignment);
 
-        this._clockDisplay = new St.Label({ y_align: Clutter.ActorAlign.CENTER });
+        this._clockDisplay = new St.Label({ style_class: 'clock' });
+        this._clockDisplay.clutter_text.y_align = Clutter.ActorAlign.CENTER;
+
         this._indicator = new MessagesIndicator();
 
         const indicatorPad = new St.Widget();