Reactions: Add previews for new reactions

src/components/middle/message/ReactionSelector.tsx

@@ -55,12 +55,13 @@ const ReactionSelector: FC<OwnProps> = ({
       <div className={cn('bubble-small')} />
       <div className={cn('items-wrapper')}>
         <div className={cn('items', ['no-scrollbar'])} ref={itemsScrollRef}>
-          {availableReactions?.map((reaction) => {
+          {availableReactions?.map((reaction, i) => {
             if (reaction.isInactive
               || (!isPrivate && (!enabledReactions || !enabledReactions.includes(reaction.reaction)))) return undefined;
             return (
               <ReactionSelectorReaction
                 key={reaction.reaction}
+                previewIndex={i}
                 isReady={isReady}
                 onSendReaction={onSendReaction}
                 reaction={reaction}

src/components/middle/message/ReactionSelectorReaction.scss

@@ -16,50 +16,6 @@
     left: 0;
     background: url('../../../assets/reaction-thumbs.png') no-repeat;
     background-size: auto 100%;
-
-    &--reaction-👍 {
-      background-position-x: 0;
-    }
-
-    &--reaction-👎 {
-      background-position-x: -32px;
-    }
-
-    &--reaction-❤ {
-      background-position-x: -64px;
-    }
-
-    &--reaction-🔥 {
-      background-position-x: -96px;
-    }
-
-    &--reaction-🎉 {
-      background-position-x: -128px;
-    }
-
-    &--reaction-🤩 {
-      background-position-x: -160px;
-    }
-
-    &--reaction-😱 {
-      background-position-x: -192px;
-    }
-
-    &--reaction-😁 {
-      background-position-x: -224px;
-    }
-
-    &--reaction-😢 {
-      background-position-x: -256px;
-    }
-
-    &--reaction-💩 {
-      background-position-x: -288px;
-    }
-
-    &--reaction-🤮 {
-      background-position-x: -320px;
-    }
   }
 
   .AnimatedSticker {

src/components/middle/message/ReactionSelectorReaction.tsx

@@ -17,13 +17,14 @@ const REACTION_SIZE = 32;
 
 type OwnProps = {
   reaction: ApiAvailableReaction;
+  previewIndex: number;
   isReady?: boolean;
   onSendReaction: (reaction: string, x: number, y: number) => void;
 };
 
 const cn = createClassNameBuilder('ReactionSelectorReaction');
 
-const ReactionSelectorReaction: FC<OwnProps> = ({ reaction, onSendReaction, isReady }) => {
+const ReactionSelectorReaction: FC<OwnProps> = ({ reaction, previewIndex, onSendReaction, isReady }) => {
   // eslint-disable-next-line no-null/no-null
   const containerRef = useRef<HTMLDivElement>(null);
 
@@ -56,9 +57,10 @@ const ReactionSelectorReaction: FC<OwnProps> = ({ reaction, onSendReaction, isRe
         <div
           className={cn(
             'static',
-            `reaction-${reaction.reaction}`,
             isReady ? [staticClassNames] : undefined,
           )}
+          // @ts-ignore
+          style={`background-position-x: ${previewIndex * -32}px;`}
         />
       )}
       {shouldRenderAnimated && (