From 06009df05b95f420aa332b7e5a586a559a9edee4 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 19 Oct 2020 18:47:15 +0100
Subject: [PATCH] Update Widget paddings and background colours

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 res/css/views/rooms/_AppsDrawer.scss           | 15 +++++++++++----
 res/themes/dark/css/_dark.scss                 |  1 +
 res/themes/legacy-dark/css/_legacy-dark.scss   |  1 +
 res/themes/legacy-light/css/_legacy-light.scss |  1 +
 res/themes/light/css/_light.scss               |  1 +
 5 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss
index bc8a2927c0..fd100c8aed 100644
--- a/res/css/views/rooms/_AppsDrawer.scss
+++ b/res/css/views/rooms/_AppsDrawer.scss
@@ -64,6 +64,11 @@ $MiniAppTileHeight: 200px;
             opacity: 0.8;
         }
     }
+
+    .mx_AppTileBody, .mx_AppTile_persistedWrapper {
+        // match bg of border so that the cut corners have the right fill
+        background-color: $widget-menu-bar-bg-color;
+    }
 }
 
 .mx_AppsContainer_resizer {
@@ -170,8 +175,8 @@ $MinWidth: 240px;
     align-items: center;
     justify-content: space-between;
     width: 100%;
-    padding-top: 8px;
-    padding-bottom: 12px;
+    padding-top: 2px;
+    padding-bottom: 8px;
 }
 
 .mx_AppTileMenuBarTitle {
@@ -206,7 +211,7 @@ $MinWidth: 240px;
     margin: 0 3px;
 }
 
-.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_popout { // TODO replace icon
+.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_popout {
     mask-image: url('$(res)/img/feather-customised/widget/external-link.svg');
 }
 
@@ -248,17 +253,19 @@ $MinWidth: 240px;
     padding: 0;
     margin: 0;
     display: block;
+    border-radius: 8px;
 }
 
 .mx_AppPermissionWarning {
     text-align: center;
-    background-color: $widget-menu-bar-bg-color;
+    background-color: $widget-body-bg-color;
     display: flex;
     height: 100%;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     font-size: $font-16px;
+    border-radius: 8px;
 }
 
 .mx_AppPermissionWarning_row {
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
index 6e0c9acdfe..bd709473ef 100644
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@@ -131,6 +131,7 @@ $notice-secondary-color: $roomlist-header-color;
 $panel-divider-color: transparent;
 
 $widget-menu-bar-bg-color: $header-panel-bg-color;
+$widget-body-bg-color: rgba(141, 151, 165, 0.2);
 
 // event tile lifecycle
 $event-sending-color: $text-secondary-color;
diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss
index efde7b3747..60d44b1c31 100644
--- a/res/themes/legacy-dark/css/_legacy-dark.scss
+++ b/res/themes/legacy-dark/css/_legacy-dark.scss
@@ -126,6 +126,7 @@ $roomtile-selected-bg-color: #1A1D23;
 $panel-divider-color: $header-panel-border-color;
 
 $widget-menu-bar-bg-color: $header-panel-bg-color;
+$widget-body-bg-color: #1A1D23;
 
 // event tile lifecycle
 $event-sending-color: $text-secondary-color;
diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss
index f77226cbca..52fb1c8ef2 100644
--- a/res/themes/legacy-light/css/_legacy-light.scss
+++ b/res/themes/legacy-light/css/_legacy-light.scss
@@ -208,6 +208,7 @@ $panel-divider-color: #dee1f3;
 // ********************
 
 $widget-menu-bar-bg-color: $secondary-accent-color;
+$widget-body-bg-color: #fff;
 
 // ********************
 
diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
index d137373bd5..0c5e271860 100644
--- a/res/themes/light/css/_light.scss
+++ b/res/themes/light/css/_light.scss
@@ -208,6 +208,7 @@ $pinned-color: $notice-secondary-color;
 // ********************
 
 $widget-menu-bar-bg-color: $secondary-accent-color;
+$widget-body-bg-color: #FFF;
 
 // ********************