From 223b40c9d62963f60e5a4fc83c40055b7f411f15 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Thu, 1 Jul 2021 14:23:00 +0100
Subject: [PATCH] Add dark theme support

---
 res/css/views/rooms/_EventBubbleTile.scss     | 21 ++++++++++++-------
 res/themes/dark/css/_dark.scss                |  6 ++++++
 .../legacy-light/css/_legacy-light.scss       |  6 ++++++
 res/themes/light/css/_light.scss              |  6 ++++++
 4 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss
index 284f9bb70f..6d11992e48 100644
--- a/res/css/views/rooms/_EventBubbleTile.scss
+++ b/res/css/views/rooms/_EventBubbleTile.scss
@@ -26,8 +26,13 @@ limitations under the License.
     margin-right: calc(var(--gutterSize) + var(--avatarSize));
     padding: 2px 0;
 
+    /* For replies */
+    .mx_EventTile {
+        padding-top: 0;
+    }
+
     &:hover {
-        background: rgb(242, 242, 242);
+        background: $eventbubble-bg-hover;
     }
 
     .mx_SenderProfile,
@@ -37,7 +42,7 @@ limitations under the License.
     }
 
     .mx_SenderProfile {
-        padding: var(--gutterSize) var(--gutterSize) 0 var(--gutterSize);
+        padding: 0 var(--gutterSize);
     }
 
     .mx_EventTile_line {
@@ -57,7 +62,7 @@ limitations under the License.
         top: 0;
         line-height: 1;
         img {
-            box-shadow: 0 0 0 2px #fff;
+            box-shadow: 0 0 0 2px $eventbubble-avatar-outline;
             border-radius: 50%;
         }
     }
@@ -83,7 +88,7 @@ limitations under the License.
             right: calc(-1 * var(--avatarSize));
         }
 
-        --backgroundColor: #F8FDFC;
+        --backgroundColor: $eventbubble-self-bg;
     }
 
     &[data-has-reply=true] {
@@ -93,8 +98,8 @@ limitations under the License.
 
         .mx_ReplyThread_show {
             order: 99999;
-            background: white;
-            box-shadow: 0 0 0 var(--gutterSize) white;
+            /* background: white;
+            box-shadow: 0 0 0 var(--gutterSize) white; */
         }
 
         .mx_ReplyThread {
@@ -120,12 +125,12 @@ limitations under the License.
         }
     }
 
-    &:not([data-self=true]) {
+    &[data-self=false] {
         .mx_EventTile_avatar {
             left: calc(-1 * var(--avatarSize));
         }
 
-        --backgroundColor: #F7F8F9;
+        --backgroundColor: $eventbubble-others-bg;
     }
 
     &.mx_EventTile_bubbleContainer,
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
index 8b5fde3bd1..e2ea8478d2 100644
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@@ -231,6 +231,12 @@ $groupFilterPanel-background-blur-amount: 30px;
 
 $composer-shadow-color: rgba(0, 0, 0, 0.28);
 
+// Bubble tiles
+$eventbubble-self-bg: rgba(141, 151, 165, 0.3);
+$eventbubble-others-bg: rgba(141, 151, 165, 0.3);
+$eventbubble-bg-hover: rgba(141, 151, 165, 0.1);
+$eventbubble-avatar-outline: #15191E;
+
 // ***** 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 a6b180bab4..6bfdad9e12 100644
--- a/res/themes/legacy-light/css/_legacy-light.scss
+++ b/res/themes/legacy-light/css/_legacy-light.scss
@@ -346,6 +346,12 @@ $appearance-tab-border-color: $input-darker-bg-color;
 
 $composer-shadow-color: tranparent;
 
+// Bubble tiles
+$eventbubble-self-bg: #F8FDFC;
+$eventbubble-others-bg: #F7F8F9;
+$eventbubble-bg-hover: rgb(242, 242, 242);
+$eventbubble-avatar-outline: #fff;
+
 // ***** Mixins! *****
 
 @define-mixin mx_DialogButton {
diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
index d8dab9c9c4..4b1c56bd51 100644
--- a/res/themes/light/css/_light.scss
+++ b/res/themes/light/css/_light.scss
@@ -351,6 +351,12 @@ $groupFilterPanel-background-blur-amount: 20px;
 
 $composer-shadow-color: rgba(0, 0, 0, 0.04);
 
+// Bubble tiles
+$eventbubble-self-bg: #F8FDFC;
+$eventbubble-others-bg: #F7F8F9;
+$eventbubble-bg-hover: rgb(242, 242, 242);
+$eventbubble-avatar-outline: #fff;
+
 // ***** Mixins! *****
 
 @define-mixin mx_DialogButton {