theme: Adapt screenshield to mockups

data/theme/_common.scss

@@ -1147,7 +1147,7 @@ StScrollBar {
   .app-well-app-running-dot { //running apps indicator
     width: 10px; height: 3px;
     background-color: $selected_bg_color;
-    margin-bottom: 2px; //FIXME will happen :)
+    margin-bottom: 2px;
   }
   
   %icon_tile {
@@ -1654,8 +1654,6 @@ StScrollBar {
     -arrow-shadow: 0 1px 1px rgba(0,0,0,0.4);
 }
 
-.screen-shield-contents-box { spacing: 48px; }
-
 .screen-shield-clock {
   color: white;
   text-shadow: 0px 1px 2px rgba(0,0,0,0.6);
@@ -1672,6 +1670,7 @@ StScrollBar {
 .screen-shield-clock-date { font-size: 28pt; }
 
 .screen-shield-notifications-container {
+  spacing: 20px;
   width: 30em;
   background-color: transparent;
   max-height: 500px;
@@ -1691,7 +1690,11 @@ StScrollBar {
 }
 
 .screen-shield-notification-source {
-  padding: 3px 6px;
+  padding: 12px 6px;
+  border-width: 2px;
+  border-radius: 5px;
+  border-color: white;
+  background-color: transparentize($bg_color,0.7);
   spacing: 5px;
 }
 

data/theme/gnome-shell-high-contrast.css

@@ -1541,9 +1541,6 @@ StScrollBar {
   -arrow-thickness: 12px;
   -arrow-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); }
 
-.screen-shield-contents-box {
-  spacing: 48px; }
-
 .screen-shield-clock {
   color: white;
   text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.6);
@@ -1559,6 +1556,7 @@ StScrollBar {
   font-size: 28pt; }
 
 .screen-shield-notifications-container {
+  spacing: 20px;
   width: 30em;
   background-color: transparent;
   max-height: 500px; }
@@ -1576,7 +1574,11 @@ StScrollBar {
     spacing: 24px; }
 
 .screen-shield-notification-source {
-  padding: 3px 6px;
+  padding: 12px 6px;
+  border-width: 2px;
+  border-radius: 5px;
+  border-color: white;
+  background-color: rgba(0, 0, 0, 0.3);
   spacing: 5px; }
 
 .screen-shield-notification-label {
@@ -1685,3 +1687,5 @@ StScrollBar {
 
 stage {
   -st-icon-style: symbolic; }
+
+/*# sourceMappingURL=gnome-shell-high-contrast.css.map */

data/theme/gnome-shell.css

@@ -1533,9 +1533,6 @@ StScrollBar {
   -arrow-thickness: 12px;
   -arrow-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); }
 
-.screen-shield-contents-box {
-  spacing: 48px; }
-
 .screen-shield-clock {
   color: white;
   text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.6);
@@ -1551,6 +1548,7 @@ StScrollBar {
   font-size: 28pt; }
 
 .screen-shield-notifications-container {
+  spacing: 20px;
   width: 30em;
   background-color: transparent;
   max-height: 500px; }
@@ -1568,7 +1566,11 @@ StScrollBar {
     spacing: 24px; }
 
 .screen-shield-notification-source {
-  padding: 3px 6px;
+  padding: 12px 6px;
+  border-width: 2px;
+  border-radius: 5px;
+  border-color: white;
+  background-color: rgba(57, 63, 63, 0.3);
   spacing: 5px; }
 
 .screen-shield-notification-label {
@@ -1674,3 +1676,5 @@ StScrollBar {
   border: 2px solid grey;
   border-radius: 4px;
   padding: 6px; }
+
+/*# sourceMappingURL=gnome-shell.css.map */

js/ui/screenShield.js

@@ -106,7 +106,7 @@ const NotificationsBox = new Lang.Class({
         this._scrollView = new St.ScrollView({ x_fill: false, x_align: St.Align.START,
                                                hscrollbar_policy: Gtk.PolicyType.NEVER });
         this._notificationBox = new St.BoxLayout({ vertical: true,
-                                                   style_class: 'screen-shield-notifications-box' });
+                                                   style_class: 'screen-shield-notifications-container' });
         this._scrollView.add_actor(this._notificationBox);
 
         this.actor.add(this._scrollView, { x_fill: true, x_align: St.Align.START });
@@ -230,7 +230,8 @@ const NotificationsBox = new Lang.Class({
             countLabel: null,
         };
 
-        obj.sourceBox = new St.BoxLayout({ style_class: 'screen-shield-notification-source' });
+        obj.sourceBox = new St.BoxLayout({ style_class: 'screen-shield-notification-source',
+                                           x_expand: true });
         this._showSource(source, obj, obj.sourceBox);
         this._notificationBox.add(obj.sourceBox, { x_fill: false, x_align: St.Align.START });