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 }) {
- { - availableEmojis.map((pack) => ( - // TODO (future PR?): Use the pack icon, and only use StarIC as a fallback - openGroup(pack.packIndex)} - src={StarIC} - key={pack.packIndex} - tooltip={pack.displayName} - tooltipPlacement="right" - /> - )) - } +
+ { + availableEmojis.map((pack) => { + const src = initMatrix.matrixClient.mxcUrlToHttp(pack.avatar ?? pack.images[0].mxc); + return ( + openGroup(pack.packIndex)} + src={src} + key={pack.packIndex} + tooltip={pack.displayName} + tooltipPlacement="right" + isImage + /> + ); + }) + } +
{ [ [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 {