From 72baa1e5c36fae6f7317601ea33065362238402b Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Wed, 20 Mar 2024 12:06:50 +0100
Subject: [PATCH] [Glitch] Fix emoji picker dropdown background and borders

Port e36e7ea2432104d2e72ab71f1aa5d2d4ca5ad3c8 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../flavours/glitch/styles/components.scss        |  5 +++++
 .../flavours/glitch/styles/emoji_picker.scss      | 15 ---------------
 2 files changed, 5 insertions(+), 15 deletions(-)

diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss
index 47756b50ee..42a262c9fc 100644
--- a/app/javascript/flavours/glitch/styles/components.scss
+++ b/app/javascript/flavours/glitch/styles/components.scss
@@ -5234,6 +5234,11 @@ a.status-card {
   position: relative;
   margin-top: 5px;
   z-index: 2;
+  background: var(--dropdown-background-color);
+  backdrop-filter: var(--background-filter);
+  border: 1px solid var(--dropdown-border-color);
+  box-shadow: var(--dropdown-shadow);
+  border-radius: 5px;
 
   .emoji-mart-scroll {
     transition: opacity 200ms ease;
diff --git a/app/javascript/flavours/glitch/styles/emoji_picker.scss b/app/javascript/flavours/glitch/styles/emoji_picker.scss
index fec0c10ddb..14ce6a14b5 100644
--- a/app/javascript/flavours/glitch/styles/emoji_picker.scss
+++ b/app/javascript/flavours/glitch/styles/emoji_picker.scss
@@ -14,21 +14,9 @@
 }
 
 .emoji-mart-bar {
-  border: 0 solid var(--dropdown-border-color);
-
   &:first-child {
-    border-bottom-width: 1px;
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
     background: var(--dropdown-border-color);
   }
-
-  &:last-child {
-    border-top-width: 1px;
-    border-bottom-left-radius: 5px;
-    border-bottom-right-radius: 5px;
-    display: none;
-  }
 }
 
 .emoji-mart-anchors {
@@ -94,7 +82,6 @@
   height: 270px;
   max-height: 35vh;
   padding: 0 6px 6px;
-  background: var(--dropdown-background-color);
   will-change: transform;
 
   &::-webkit-scrollbar-track:hover,
@@ -106,7 +93,6 @@
 .emoji-mart-search {
   padding: 10px;
   padding-inline-end: 45px;
-  background: var(--dropdown-background-color);
   position: relative;
 
   input {
@@ -195,7 +181,6 @@
     width: 100%;
     font-weight: 500;
     padding: 5px 6px;
-    background: var(--dropdown-background-color);
   }
 }