From 12ae084a9f457dce6943e7f04eaa1111cc593e1b Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Mon, 3 Jul 2023 10:08:53 +0200
Subject: [PATCH] fix: bg color

---
 src/element/live-chat.css | 14 +++++++++++++-
 src/element/live-chat.tsx |  4 +++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/element/live-chat.css b/src/element/live-chat.css
index 7f7e993..1a982bc 100644
--- a/src/element/live-chat.css
+++ b/src/element/live-chat.css
@@ -226,7 +226,7 @@
   justify-content: center;
   gap: 2px;
   border-radius: 8px;
-  background: #434343;
+  background: rgba(255, 255, 255, 0.10);
   width: fit-content;
 }
 
@@ -243,6 +243,18 @@
   margin-top: 4px;
 }
 
+.message-reaction-container {
+  display: flex;
+  width: 24px;
+  height: 24px;
+  padding: 0px 4px;
+  justify-content: center;
+  align-items: center;
+  gap: 2px;
+  border-radius: 100px;
+  background: rgba(255, 255, 255, 0.10);
+}
+
 .message-reaction {
   font-size: 16px;
   line-height: 18px;
diff --git a/src/element/live-chat.tsx b/src/element/live-chat.tsx
index f24e5cd..04f34a5 100644
--- a/src/element/live-chat.tsx
+++ b/src/element/live-chat.tsx
@@ -216,7 +216,9 @@ function ChatMessage({
               </div>
             )}
             {emojis.map((e) => (
-              <span className="message-reaction">{e}</span>
+              <div className="message-reaction-container">
+                <span className="message-reaction">{e}</span>
+              </div>
             ))}
           </div>
         )}