From 93251e002953c2cdb869c79717778c4e20eaba99 Mon Sep 17 00:00:00 2001
From: Ajay Bura <ajbura@gmail.com>
Date: Thu, 30 Dec 2021 12:46:48 +0530
Subject: [PATCH] Show pack icon or first emoji as fallback in EmojiBoard
 sidebar

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

diff --git a/src/app/organisms/emoji-board/EmojiBoard.jsx b/src/app/organisms/emoji-board/EmojiBoard.jsx
index fa28b4d..74639ad 100644
--- a/src/app/organisms/emoji-board/EmojiBoard.jsx
+++ b/src/app/organisms/emoji-board/EmojiBoard.jsx
@@ -20,7 +20,6 @@ import Input from '../../atoms/input/Input';
 import ScrollView from '../../atoms/scroll/ScrollView';
 
 import SearchIC from '../../../../public/res/ic/outlined/search.svg';
-import StarIC from '../../../../public/res/ic/outlined/star.svg';
 import EmojiIC from '../../../../public/res/ic/outlined/emoji.svg';
 import DogIC from '../../../../public/res/ic/outlined/dog.svg';
 import CupIC from '../../../../public/res/ic/outlined/cup.svg';
@@ -65,7 +64,7 @@ function EmojiGroup({ name, groupEmojis }) {
                     alt={emoji.shortcode}
                     unicode={`:${emoji.shortcode}:`}
                     shortcodes={emoji.shortcode}
-                    src={initMatrix.matrixClient.mxcUrlToHttp(emoji.mxc, 38, 38, 'crop')}
+                    src={initMatrix.matrixClient.mxcUrlToHttp(emoji.mxc)}
                     data-mx-emoticon
                   />
                 )
@@ -263,18 +262,23 @@ function EmojiBoard({ onSelect }) {
       </div>
       <ScrollView invisible>
         <div className="emoji-board__nav">
-          {
-            availableEmojis.map((pack) => (
-              // TODO (future PR?):  Use the pack icon, and only use StarIC as a fallback
-              <IconButton
-                onClick={() => openGroup(pack.packIndex)}
-                src={StarIC}
-                key={pack.packIndex}
-                tooltip={pack.displayName}
-                tooltipPlacement="right"
-              />
-            ))
-          }
+          <div className="emoji-board__nav-custom">
+            {
+              availableEmojis.map((pack) => {
+                const src = initMatrix.matrixClient.mxcUrlToHttp(pack.avatar ?? pack.images[0].mxc);
+                return (
+                  <IconButton
+                    onClick={() => openGroup(pack.packIndex)}
+                    src={src}
+                    key={pack.packIndex}
+                    tooltip={pack.displayName}
+                    tooltipPlacement="right"
+                    isImage
+                  />
+                );
+              })
+            }
+          </div>
           {
             [
               [0, EmojiIC, 'Smilies'],
diff --git a/src/app/organisms/emoji-board/EmojiBoard.scss b/src/app/organisms/emoji-board/EmojiBoard.scss
index 752b074..5983d00 100644
--- a/src/app/organisms/emoji-board/EmojiBoard.scss
+++ b/src/app/organisms/emoji-board/EmojiBoard.scss
@@ -22,11 +22,26 @@
     background-color: var(--bg-surface-low);
     @include dir.side(border, 1px solid var(--bg-surface-border), none);
 
-    & > .ic-btn-surface {
+    & .ic-btn-surface {
       margin: calc(var(--sp-ultra-tight) / 2) 0;
       opacity: 0.8;
     }
   }
+  &__nav-custom {
+    @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);
+        }
+      }
+    }
+  }
 }
 
 .emoji-board__content__search {