update(SuggestedEmoji): Improve Suggested Emoji UI (#1548)

Co-authored-by: Phill Wisniewski <93608357+phillsatellite@users.noreply.github.com> Co-authored-by: InfamousVague <infamousvaguerat@gmail.com> Co-authored-by: Sara Tavares <29093946+stavares843@users.noreply.github.com>
Satellite-im · Nov 28, 2023 · f87f6a5 · f87f6a5
1 parent f884017
commit f87f6a5
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 18 deletions.
diff --git a/common/locales/en-US/main.ftl b/common/locales/en-US/main.ftl
@@ -100,6 +100,7 @@ messages = Messages
     .pinned-max = You reached the maximum amount of pinned messages for this chat
     .missing-emoji-picker = Emoji extension is disabled
     .unknown-identity = User not found:
+    .suggested-emoji = Suggested Emoji
 
 favorites = Favorites
     .favorites = Favorites

diff --git a/kit/src/layout/chatbar/mod.rs b/kit/src/layout/chatbar/mod.rs
@@ -1,4 +1,3 @@
-use common::icons::outline::Shape as Icon;
 use dioxus::prelude::*;
 use dioxus_elements::input_data::keyboard_types::Code;
 use warp::constellation::file::File;
@@ -261,16 +260,18 @@ fn EmojiSuggesions<'a>(cx: Scope<'a, EmojiSuggestionProps<'a>>) -> Element<'a> {
             *cx.props.selected.write() = None;
         },
         Button {
+            small: true,
             aria_label: "emoji-suggestion-close-button".into(),
-            icon: Icon::XMark,
-            appearance: Appearance::Transparent,
-            onpress: move |_| {
-               cx.props.on_close.call(());
-            }
-        },
-        Label {
-            text: "Suggested Emoji".into()
+            appearance: Appearance::Secondary,
+            icon: icons::outline::Shape::XMark,
+            onpress: move |_| cx.props.on_close.call(()),
         },
+        div {
+            class: "emoji-suggestions-header",
+            Label {
+                text: get_local_text("messages.suggested-emoji"),
+            },
+        }
         cx.props.suggestions.iter().enumerate().map(|(num, (emoji,alias))| {
             cx.render(rsx!(div {
                 class: format_args!("{} {}", "emoji-suggestion", match cx.props.selected.read().as_ref() {

diff --git a/ui/src/layouts/chats/style.scss b/ui/src/layouts/chats/style.scss
@@ -731,12 +731,13 @@
   position: absolute; 
   bottom: 100%;
   color: var(--text-color); 
-  background-color: var(--secondary); 
-  padding: var(--gap-less) var(--gap); 
+  background: var(--secondary-dark);
+  padding: var(--gap); 
   border-radius: var(--border-radius);
+	border: 1px solid var(--border-subtle-color);
   max-height: 200px; 
-  width: calc(100% - var(--padding-more)); 
-  overflow: scroll;
+  width: calc(100% - var(--padding)); 
+  overflow-y: auto;
   &::-webkit-scrollbar-track {
     background: transparent;
   }
@@ -749,21 +750,33 @@
     background: var(--secondary-light);
   }
 
-
+  .emoji-suggestions-header {
+    height: var(--height-input);
+    display: inline-flex;
+    align-items: center;
+    width: 100%;
+  }
+
   .emoji-suggestion {
     display: flex;
     align-items: center;
     border-radius: var(--border-radius);
-    padding: var(--gap-less) var(--gap);
-    padding: var(--gap-less) var(--gap);
+    padding: var(--gap);
     width: 100%;
 
     &.emoji-selected {
-      background-color: var(--secondary-dark); 
+      background-color: var(--secondary-light); 
     }
     &:hover {
       cursor: pointer;
-      background-color: var(--secondary-dark); 
+      background-color: var(--secondary-light); 
     }
   }
+
+  .btn-wrap {
+    position: absolute;
+    top: var(--gap);
+    right: var(--gap);
+    z-index: 1;
+}
 }