From d34e159d64e79912a905965b7689787341cfe3cf Mon Sep 17 00:00:00 2001
From: vinceliuice <vinceliuice@hotmail.com>
Date: Sun, 27 Feb 2022 22:05:47 +0800
Subject: [PATCH] Fixed #178

---
 src/gnome-shell/sass/widgets/_calendar.scss   |  4 +--
 .../sass/widgets/_message-list.scss           | 25 ++++++++++-----
 .../shell-40-0/gnome-shell-compact.css        | 27 +++++++++++-----
 .../shell-40-0/gnome-shell-dark-compact.css   | 27 +++++++++++-----
 .../shell-40-0/gnome-shell-dark.css           | 31 +++++++++++++------
 src/gnome-shell/shell-40-0/gnome-shell.css    | 31 +++++++++++++------
 6 files changed, 103 insertions(+), 42 deletions(-)

diff --git a/src/gnome-shell/sass/widgets/_calendar.scss b/src/gnome-shell/sass/widgets/_calendar.scss
index 626f925..d08ceee 100644
--- a/src/gnome-shell/sass/widgets/_calendar.scss
+++ b/src/gnome-shell/sass/widgets/_calendar.scss
@@ -11,7 +11,7 @@
 
 // overall menu
 #calendarArea {
-  padding: $container_padding 0 !important;
+  padding: 8px 0;
 }
 
 .calendar {
@@ -221,7 +221,7 @@
 .world-clocks-button,
 .weather-button,
 .events-button {
-  padding: $container_padding 8px;
+  padding: $container_padding $container_padding * 2;
   border-radius: $material_radius;
   border: none;
   box-shadow: none;
diff --git a/src/gnome-shell/sass/widgets/_message-list.scss b/src/gnome-shell/sass/widgets/_message-list.scss
index 9ac3c79..bc3b267 100644
--- a/src/gnome-shell/sass/widgets/_message-list.scss
+++ b/src/gnome-shell/sass/widgets/_message-list.scss
@@ -44,29 +44,38 @@
 
   // icon container
   .message-icon-bin {
-    padding: $container_padding * 3 0;
-    margin-left: $container_padding * 2;
+    padding: $container_padding * 3;
+    padding-right: $container_padding;
+
+    &:rtl {
+      padding-right: $container_padding;
+    }
 
     // icon size and color
     > StIcon {
       icon-size: 36px;
-      // -st-icon-style: symbolic;
+      -st-icon-style: symbolic;
     }
 
     // fallback
     > .fallback-app-icon {
+      width: 16px;
+      height: 16px;
     }
   }
 
   // content
   .message-content {
-    padding: $container_padding * 2;
+    spacing: 4px;
+    padding: $container_padding * 1.5;
+    margin-bottom: $container_margin * 2;
     color: $secondary_fg_color;
   }
 
   // title
   .message-title {
     font-weight: bold;
+    padding-top: 0.57em;
     // margin-top: $container_padding;
   }
 
@@ -77,7 +86,7 @@
     // notification time stamp
     > .event-time {
       color: $secondary_fg_color;
-      font-size: 1em;
+      font-size: 0.9em;
       padding-bottom: 0.13em;
 
       &:ltr { text-align: right };
@@ -112,7 +121,7 @@
 /* Media Controls */
 .message-media-control {
   margin: ($container_padding * 2 + 10px) 4px;
-  padding: $container_padding * 1.5;
+  padding: $container_padding * 2;
   border-radius: $circular_radius;
   color: $secondary_fg_color;
   &:hover, &:focus { color: $fg_color; background-color: $divider_color; }
@@ -132,10 +141,10 @@
   // when there is no artwork
   &.fallback {
     background-color: $divider_color;
-    padding: 8px;
+    padding: $container_padding * 2;
     color: $hint_fg_color;
     border: none;
-    border-radius: $circular_radius;
+    border-radius: $buttons_radius;
     icon-size: 24px !important;
   }
 }
diff --git a/src/gnome-shell/shell-40-0/gnome-shell-compact.css b/src/gnome-shell/shell-40-0/gnome-shell-compact.css
index e15804f..98b7a45 100644
--- a/src/gnome-shell/shell-40-0/gnome-shell-compact.css
+++ b/src/gnome-shell/shell-40-0/gnome-shell-compact.css
@@ -574,7 +574,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
 }
 
 #calendarArea {
-  padding: 4px 0 !important;
+  padding: 8px 0;
 }
 
 .calendar {
@@ -991,21 +991,34 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
 }
 
 .message .message-icon-bin {
-  padding: 12px 0;
-  margin-left: 8px;
+  padding: 12px;
+  padding-right: 4px;
+}
+
+.message .message-icon-bin:rtl {
+  padding-right: 4px;
 }
 
 .message .message-icon-bin > StIcon {
   icon-size: 36px;
+  -st-icon-style: symbolic;
+}
+
+.message .message-icon-bin > .fallback-app-icon {
+  width: 16px;
+  height: 16px;
 }
 
 .message .message-content {
-  padding: 8px;
+  spacing: 4px;
+  padding: 6px;
+  margin-bottom: 4px;
   color: rgba(0, 0, 0, 0.54);
 }
 
 .message .message-title {
   font-weight: bold;
+  padding-top: 0.57em;
 }
 
 .message .message-secondary-bin {
@@ -1014,7 +1027,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
 
 .message .message-secondary-bin > .event-time {
   color: rgba(0, 0, 0, 0.54);
-  font-size: 1em;
+  font-size: 0.9em;
   padding-bottom: 0.13em;
 }
 
@@ -1059,7 +1072,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
 /* Media Controls */
 .message-media-control {
   margin: 18px 4px;
-  padding: 6px;
+  padding: 8px;
   border-radius: 9999px;
   color: rgba(0, 0, 0, 0.54);
 }
@@ -1097,7 +1110,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
   padding: 8px;
   color: rgba(0, 0, 0, 0.38);
   border: none;
-  border-radius: 9999px;
+  border-radius: 8px;
   icon-size: 24px !important;
 }
 
diff --git a/src/gnome-shell/shell-40-0/gnome-shell-dark-compact.css b/src/gnome-shell/shell-40-0/gnome-shell-dark-compact.css
index 71bedaf..1f0fa6b 100644
--- a/src/gnome-shell/shell-40-0/gnome-shell-dark-compact.css
+++ b/src/gnome-shell/shell-40-0/gnome-shell-dark-compact.css
@@ -574,7 +574,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
 }
 
 #calendarArea {
-  padding: 4px 0 !important;
+  padding: 8px 0;
 }
 
 .calendar {
@@ -991,21 +991,34 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
 }
 
 .message .message-icon-bin {
-  padding: 12px 0;
-  margin-left: 8px;
+  padding: 12px;
+  padding-right: 4px;
+}
+
+.message .message-icon-bin:rtl {
+  padding-right: 4px;
 }
 
 .message .message-icon-bin > StIcon {
   icon-size: 36px;
+  -st-icon-style: symbolic;
+}
+
+.message .message-icon-bin > .fallback-app-icon {
+  width: 16px;
+  height: 16px;
 }
 
 .message .message-content {
-  padding: 8px;
+  spacing: 4px;
+  padding: 6px;
+  margin-bottom: 4px;
   color: rgba(255, 255, 255, 0.7);
 }
 
 .message .message-title {
   font-weight: bold;
+  padding-top: 0.57em;
 }
 
 .message .message-secondary-bin {
@@ -1014,7 +1027,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
 
 .message .message-secondary-bin > .event-time {
   color: rgba(255, 255, 255, 0.7);
-  font-size: 1em;
+  font-size: 0.9em;
   padding-bottom: 0.13em;
 }
 
@@ -1059,7 +1072,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
 /* Media Controls */
 .message-media-control {
   margin: 18px 4px;
-  padding: 6px;
+  padding: 8px;
   border-radius: 9999px;
   color: rgba(255, 255, 255, 0.7);
 }
@@ -1097,7 +1110,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
   padding: 8px;
   color: rgba(255, 255, 255, 0.5);
   border: none;
-  border-radius: 9999px;
+  border-radius: 8px;
   icon-size: 24px !important;
 }
 
diff --git a/src/gnome-shell/shell-40-0/gnome-shell-dark.css b/src/gnome-shell/shell-40-0/gnome-shell-dark.css
index b84c2c7..669b5dd 100644
--- a/src/gnome-shell/shell-40-0/gnome-shell-dark.css
+++ b/src/gnome-shell/shell-40-0/gnome-shell-dark.css
@@ -574,7 +574,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
 }
 
 #calendarArea {
-  padding: 6px 0 !important;
+  padding: 8px 0;
 }
 
 .calendar {
@@ -817,7 +817,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
 .world-clocks-button,
 .weather-button,
 .events-button {
-  padding: 6px 8px;
+  padding: 6px 12px;
   border-radius: 8px;
   border: none;
   box-shadow: none;
@@ -991,21 +991,34 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
 }
 
 .message .message-icon-bin {
-  padding: 18px 0;
-  margin-left: 12px;
+  padding: 18px;
+  padding-right: 6px;
+}
+
+.message .message-icon-bin:rtl {
+  padding-right: 6px;
 }
 
 .message .message-icon-bin > StIcon {
   icon-size: 36px;
+  -st-icon-style: symbolic;
+}
+
+.message .message-icon-bin > .fallback-app-icon {
+  width: 16px;
+  height: 16px;
 }
 
 .message .message-content {
-  padding: 12px;
+  spacing: 4px;
+  padding: 9px;
+  margin-bottom: 8px;
   color: rgba(255, 255, 255, 0.7);
 }
 
 .message .message-title {
   font-weight: bold;
+  padding-top: 0.57em;
 }
 
 .message .message-secondary-bin {
@@ -1014,7 +1027,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
 
 .message .message-secondary-bin > .event-time {
   color: rgba(255, 255, 255, 0.7);
-  font-size: 1em;
+  font-size: 0.9em;
   padding-bottom: 0.13em;
 }
 
@@ -1059,7 +1072,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
 /* Media Controls */
 .message-media-control {
   margin: 22px 4px;
-  padding: 9px;
+  padding: 12px;
   border-radius: 9999px;
   color: rgba(255, 255, 255, 0.7);
 }
@@ -1094,10 +1107,10 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
 
 .media-message-cover-icon.fallback {
   background-color: rgba(255, 255, 255, 0.06);
-  padding: 8px;
+  padding: 12px;
   color: rgba(255, 255, 255, 0.5);
   border: none;
-  border-radius: 9999px;
+  border-radius: 8px;
   icon-size: 24px !important;
 }
 
diff --git a/src/gnome-shell/shell-40-0/gnome-shell.css b/src/gnome-shell/shell-40-0/gnome-shell.css
index f5a8e9f..05accf0 100644
--- a/src/gnome-shell/shell-40-0/gnome-shell.css
+++ b/src/gnome-shell/shell-40-0/gnome-shell.css
@@ -574,7 +574,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
 }
 
 #calendarArea {
-  padding: 6px 0 !important;
+  padding: 8px 0;
 }
 
 .calendar {
@@ -817,7 +817,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
 .world-clocks-button,
 .weather-button,
 .events-button {
-  padding: 6px 8px;
+  padding: 6px 12px;
   border-radius: 8px;
   border: none;
   box-shadow: none;
@@ -991,21 +991,34 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
 }
 
 .message .message-icon-bin {
-  padding: 18px 0;
-  margin-left: 12px;
+  padding: 18px;
+  padding-right: 6px;
+}
+
+.message .message-icon-bin:rtl {
+  padding-right: 6px;
 }
 
 .message .message-icon-bin > StIcon {
   icon-size: 36px;
+  -st-icon-style: symbolic;
+}
+
+.message .message-icon-bin > .fallback-app-icon {
+  width: 16px;
+  height: 16px;
 }
 
 .message .message-content {
-  padding: 12px;
+  spacing: 4px;
+  padding: 9px;
+  margin-bottom: 8px;
   color: rgba(0, 0, 0, 0.54);
 }
 
 .message .message-title {
   font-weight: bold;
+  padding-top: 0.57em;
 }
 
 .message .message-secondary-bin {
@@ -1014,7 +1027,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
 
 .message .message-secondary-bin > .event-time {
   color: rgba(0, 0, 0, 0.54);
-  font-size: 1em;
+  font-size: 0.9em;
   padding-bottom: 0.13em;
 }
 
@@ -1059,7 +1072,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
 /* Media Controls */
 .message-media-control {
   margin: 22px 4px;
-  padding: 9px;
+  padding: 12px;
   border-radius: 9999px;
   color: rgba(0, 0, 0, 0.54);
 }
@@ -1094,10 +1107,10 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
 
 .media-message-cover-icon.fallback {
   background-color: rgba(0, 0, 0, 0.12);
-  padding: 8px;
+  padding: 12px;
   color: rgba(0, 0, 0, 0.38);
   border: none;
-  border-radius: 9999px;
+  border-radius: 8px;
   icon-size: 24px !important;
 }