From 34862f9aceb758905337ab6b6a398d6a6c837971 Mon Sep 17 00:00:00 2001
From: Ajay Bura <ajbura@gmail.com>
Date: Thu, 30 Dec 2021 14:17:55 +0530
Subject: [PATCH] Fix EmojiBoard styling

Signed-off-by: Ajay Bura <ajbura@gmail.com>
---
 src/app/organisms/emoji-board/EmojiBoard.jsx  | 44 ++++++++++---------
 src/app/organisms/emoji-board/EmojiBoard.scss | 34 +++++++-------
 2 files changed, 40 insertions(+), 38 deletions(-)

diff --git a/src/app/organisms/emoji-board/EmojiBoard.jsx b/src/app/organisms/emoji-board/EmojiBoard.jsx
index 74639ad..b2a5e29 100644
--- a/src/app/organisms/emoji-board/EmojiBoard.jsx
+++ b/src/app/organisms/emoji-board/EmojiBoard.jsx
@@ -64,7 +64,7 @@ function EmojiGroup({ name, groupEmojis }) {
                     alt={emoji.shortcode}
                     unicode={`:${emoji.shortcode}:`}
                     shortcodes={emoji.shortcode}
-                    src={initMatrix.matrixClient.mxcUrlToHttp(emoji.mxc)}
+                    src={initMatrix.matrixClient.mxcUrlToHttp(emoji.mxc, 38, 38, 'crop')}
                     data-mx-emoticon
                   />
                 )
@@ -279,26 +279,28 @@ function EmojiBoard({ onSelect }) {
               })
             }
           </div>
-          {
-            [
-              [0, EmojiIC, 'Smilies'],
-              [1, DogIC, 'Animals'],
-              [2, CupIC, 'Food'],
-              [3, BallIC, 'Activities'],
-              [4, PhotoIC, 'Travel'],
-              [5, BulbIC, 'Objects'],
-              [6, PeaceIC, 'Symbols'],
-              [7, FlagIC, 'Flags'],
-            ].map(([indx, ico, name]) => (
-              <IconButton
-                onClick={() => openGroup(availableEmojis.length + indx)}
-                key={indx}
-                src={ico}
-                tooltip={name}
-                tooltipPlacement="right"
-              />
-            ))
-          }
+          <div className="emoji-board__nav-twemoji">
+            {
+              [
+                [0, EmojiIC, 'Smilies'],
+                [1, DogIC, 'Animals'],
+                [2, CupIC, 'Food'],
+                [3, BallIC, 'Activities'],
+                [4, PhotoIC, 'Travel'],
+                [5, BulbIC, 'Objects'],
+                [6, PeaceIC, 'Symbols'],
+                [7, FlagIC, 'Flags'],
+              ].map(([indx, ico, name]) => (
+                <IconButton
+                  onClick={() => openGroup(availableEmojis.length + indx)}
+                  key={indx}
+                  src={ico}
+                  tooltip={name}
+                  tooltipPlacement="right"
+                />
+              ))
+            }
+          </div>
         </div>
       </ScrollView>
     </div>
diff --git a/src/app/organisms/emoji-board/EmojiBoard.scss b/src/app/organisms/emoji-board/EmojiBoard.scss
index 5983d00..1bc4553 100644
--- a/src/app/organisms/emoji-board/EmojiBoard.scss
+++ b/src/app/organisms/emoji-board/EmojiBoard.scss
@@ -3,44 +3,44 @@
 @use '../../partials/dir';
 
 .emoji-board {
+  --emoji-board-height: 390px;
+  --emoji-board-width: 286px;
   display: flex;
+  
   &__content {
     @extend .cp-fx__item-one;
     @extend .cp-fx__column;
-    height: 400px;
-    width: 286px;
+    height: var(--emoji-board-height);
+    width: var(--emoji-board-width);
   }
   & > .scrollbar {
     width: initial;
-    height: 400px;
+    height: var(--emoji-board-height);
   }
   &__nav {
     @extend .cp-fx__column;
     justify-content: center;
 
+    min-height: 100%;
     padding: 4px 6px;
     background-color: var(--bg-surface-low);
     @include dir.side(border, 1px solid var(--bg-surface-border), none);
 
+    position: relative;
+    
     & .ic-btn-surface {
-      margin: calc(var(--sp-ultra-tight) / 2) 0;
       opacity: 0.8;
     }
   }
-  &__nav-custom {
+  &__nav-custom,
+  &__nav-twemoji {
     @extend .cp-fx__column;
-    border-bottom: 1px solid var(--bg-surface-border);
-    
-    & .ic-btn-surface {
-      & .ic-raw {
-        filter: grayscale(1);
-      }
-      &:hover, &:active, &:focus {
-        & .ic-raw {
-          filter: grayscale(0);
-        }
-      }
-    }
+  }
+  &__nav-twemoji {
+    background: inherit;
+    position: sticky;
+    bottom: -70%;
+    z-index: 999;
   }
 }