Stickers display improvements

ui/component/commentCreate/sticker-selector.jsx

@@ -33,6 +33,12 @@ export default function StickerSelector(props: Props) {
     }
   }
 
+  const StickerWrapper = (stickerProps: any) => {
+    const { price, children } = stickerProps;
+
+    return price ? <div className="stickerItem--paid">{children}</div> : children;
+  };
+
   const getListRow = (rowTitle: string, rowStickers: any) => (
     <div className="stickerSelector__listBody-row">
       <div id={rowTitle} className="stickerSelector__listBody-rowTitle">
@@ -47,10 +53,12 @@ export default function StickerSelector(props: Props) {
             className="button--file-action"
             onClick={() => onSelect(sticker)}
           >
+            <StickerWrapper price={sticker.price}>
               <OptimizedImage src={sticker.url} waitLoad loading="lazy" />
               {sticker.price && sticker.price > 0 && (
                 <CreditAmount superChatLight amount={sticker.price} size={2} isFiat />
               )}
+            </StickerWrapper>
           </Button>
         ))}
       </div>

ui/scss/component/_comments.scss

@@ -481,7 +481,7 @@ $thumbnailWidthSmall: 1rem;
 
 .sticker__comment {
   margin-left: var(--spacing-m);
-  height: 6rem;
+  height: 7rem;
   overflow: hidden;
 
   img {

ui/scss/component/_livestream.scss

@@ -147,6 +147,7 @@ $recent-msg-button__height: 2rem;
 
   .livestream-comment__info--sticker {
     display: flex;
+    flex-direction: column;
     margin: var(--spacing-xxs) 0;
   }
 

ui/scss/component/_sticker-selector.scss

@@ -47,25 +47,33 @@
   display: flex;
 
   .stickerSelector__listBody {
-    display: flex;
-    flex-wrap: wrap;
     overflow-y: scroll;
     overflow-x: hidden;
     max-height: 25vh;
     padding: var(--spacing-s);
 
+    .stickerSelector__listBody-rowItems {
+      display: flex;
+      flex-wrap: wrap;
+      overflow-y: scroll;
+      overflow-x: hidden;
+
       .button--file-action {
-      width: 5rem;
-      height: 5.3rem;
+        width: 5.5rem;
+        height: 6rem;
         overflow: hidden;
         margin: unset;
-      padding: var(--spacing-s);
+        padding: var(--spacing-xxs);
 
-      .button__content {
+        .stickerItem--paid {
           display: flex;
           flex-direction: column;
           align-items: center;
 
+          img {
+            margin-bottom: var(--spacing-s);
+          }
+
           .super-chat--light {
             position: absolute;
             display: inline;
@@ -73,9 +81,14 @@
           }
         }
 
+        img {
+          margin: auto;
+        }
+
         @media (max-width: $breakpoint-xsmall) {
-        width: 4rem;
-        height: 4.3rem;
+          width: 3.5rem;
+          height: 4rem;
+        }
       }
     }
   }