From 576294e7ce33bbb6985fddbdd248d973257edc41 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 16 Jul 2020 15:26:25 +0100
Subject: [PATCH] Add shadow to the reply preview and autocomplete composer
 panes

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 res/css/views/rooms/_Autocomplete.scss         | 3 ++-
 res/css/views/rooms/_ReplyPreview.scss         | 3 ++-
 res/themes/dark/css/_dark.scss                 | 2 ++
 res/themes/legacy-dark/css/_legacy-dark.scss   | 2 ++
 res/themes/legacy-light/css/_legacy-light.scss | 2 ++
 res/themes/light/css/_light.scss               | 1 +
 6 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/res/css/views/rooms/_Autocomplete.scss b/res/css/views/rooms/_Autocomplete.scss
index a4aebdb708..f8e0a382b1 100644
--- a/res/css/views/rooms/_Autocomplete.scss
+++ b/res/css/views/rooms/_Autocomplete.scss
@@ -6,9 +6,10 @@
     border: 1px solid $primary-hairline-color;
     background: $primary-bg-color;
     border-bottom: none;
-    border-radius: 4px 4px 0 0;
+    border-radius: 8px 8px 0 0;
     max-height: 50vh;
     overflow: auto;
+    box-shadow: 0px -16px 32px $composer-shadow-color;
 }
 
 .mx_Autocomplete_ProviderSection {
diff --git a/res/css/views/rooms/_ReplyPreview.scss b/res/css/views/rooms/_ReplyPreview.scss
index 4dc4cb2c40..9feb337042 100644
--- a/res/css/views/rooms/_ReplyPreview.scss
+++ b/res/css/views/rooms/_ReplyPreview.scss
@@ -22,9 +22,10 @@ limitations under the License.
     border: 1px solid $primary-hairline-color;
     background: $primary-bg-color;
     border-bottom: none;
-    border-radius: 4px 4px 0 0;
+    border-radius: 8px 8px 0 0;
     max-height: 50vh;
     overflow: auto;
+    box-shadow: 0px -16px 32px $composer-shadow-color;
 }
 
 .mx_ReplyPreview_section {
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
index 990debb0a4..370c30d4f2 100644
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@@ -211,6 +211,8 @@ $appearance-tab-border-color: $room-highlight-color;
 $roomlist-background-blur-amount: 60px;
 $tagpanel-background-blur-amount: 30px;
 
+$composer-shadow-color: rgba(0, 0, 0, 0.28);
+
 // ***** Mixins! *****
 
 @define-mixin mx_DialogButton {
diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss
index a6a85edfe1..6671afb929 100644
--- a/res/themes/legacy-dark/css/_legacy-dark.scss
+++ b/res/themes/legacy-dark/css/_legacy-dark.scss
@@ -203,6 +203,8 @@ $user-tile-hover-bg-color: $header-panel-bg-color;
 // Appearance tab colors
 $appearance-tab-border-color: $room-highlight-color;
 
+$composer-shadow-color: tranparent;
+
 // ***** Mixins! *****
 
 @define-mixin mx_DialogButton {
diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss
index 991abdefff..822b65d57d 100644
--- a/res/themes/legacy-light/css/_legacy-light.scss
+++ b/res/themes/legacy-light/css/_legacy-light.scss
@@ -331,6 +331,8 @@ $user-tile-hover-bg-color: $header-panel-bg-color;
 // FontSlider colors
 $appearance-tab-border-color: $input-darker-bg-color;
 
+$composer-shadow-color: tranparent;
+
 // ***** Mixins! *****
 
 @define-mixin mx_DialogButton {
diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
index 3737d21a0f..657d3bfd13 100644
--- a/res/themes/light/css/_light.scss
+++ b/res/themes/light/css/_light.scss
@@ -335,6 +335,7 @@ $appearance-tab-border-color: $input-darker-bg-color;
 $roomlist-background-blur-amount: 40px;
 $tagpanel-background-blur-amount: 20px;
 
+$composer-shadow-color: rgba(0, 0, 0, 0.04);
 
 // ***** Mixins! *****