From b0a1fc7b9785814aa205047e2956ff40e393a244 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Wed, 7 Jul 2021 11:23:38 +0200
Subject: [PATCH] Updated color scheme and spacing

---
 res/css/views/rooms/_EventBubbleTile.scss | 37 +++++++++++++++++------
 res/themes/dark/css/_dark.scss            |  8 ++---
 res/themes/light/css/_light.scss          |  4 +--
 3 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss
index c548bfae56..936092db7a 100644
--- a/res/css/views/rooms/_EventBubbleTile.scss
+++ b/res/css/views/rooms/_EventBubbleTile.scss
@@ -26,9 +26,12 @@ limitations under the License.
 
     position: relative;
     margin-top: var(--gutterSize);
-    margin-left: calc(var(--avatarSize) + var(--gutterSize));
-    margin-right: calc(var(--gutterSize) + var(--avatarSize));
-    padding: 2px 0;
+    margin-left: 50px;
+    margin-right: 50px;
+
+    &.mx_EventTile_continuation {
+        margin-top: 2px;
+    }
 
     /* For replies */
     .mx_EventTile {
@@ -36,7 +39,23 @@ limitations under the License.
     }
 
     &:hover {
-        background: $eventbubble-bg-hover;
+        &::before {
+            content: '';
+            position: absolute;
+            top: -1px;
+            bottom: -1px;
+            left: -60px;
+            right: -65px;
+            z-index: -1;
+            background: $eventbubble-bg-hover;
+            border-radius: 4px;
+        }
+
+        .mx_EventTile_avatar {
+            img {
+                box-shadow: 0 0 0 3px $eventbubble-bg-hover;
+            }
+        }
     }
 
     .mx_SenderProfile,
@@ -55,10 +74,10 @@ limitations under the License.
         background: var(--backgroundColor);
         display: flex;
         gap: var(--gutterSize);
-        margin: 0 calc(-2 * var(--gutterSize));
+        margin: 0 -12px 0 -22px;
         > a {
             position: absolute;
-            left: -50px;
+            left: -57px;
         }
     }
 
@@ -91,7 +110,7 @@ limitations under the License.
         }
         .mx_EventTile_avatar {
             top: -19px; // height of the sender block
-            right: calc(-1 * var(--avatarSize));
+            right: -45px;
         }
 
         --backgroundColor: $eventbubble-self-bg;
@@ -104,8 +123,6 @@ limitations under the License.
 
         .mx_ReplyThread_show {
             order: 99999;
-            /* background: white;
-            box-shadow: 0 0 0 var(--gutterSize) white; */
         }
 
         .mx_ReplyThread {
@@ -190,7 +207,7 @@ limitations under the License.
 
     .mx_EventTile_readAvatars {
         position: absolute;
-        right: -45px;
+        right: -60px;
         bottom: 0;
         top: auto;
     }
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
index e2ea8478d2..5ded90230b 100644
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@@ -232,10 +232,10 @@ $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;
+$eventbubble-self-bg: #143A34;
+$eventbubble-others-bg: #394049;
+$eventbubble-bg-hover: #433C23;
+$eventbubble-avatar-outline: $bg-color;
 
 // ***** Mixins! *****
 
diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
index 4b1c56bd51..c84126909e 100644
--- a/res/themes/light/css/_light.scss
+++ b/res/themes/light/css/_light.scss
@@ -354,8 +354,8 @@ $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;
+$eventbubble-bg-hover: #FEFCF5;
+$eventbubble-avatar-outline: $primary-bg-color;
 
 // ***** Mixins! *****