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)}
           >
-            <OptimizedImage src={sticker.url} waitLoad loading="lazy" />
-            {sticker.price && sticker.price > 0 && (
-              <CreditAmount superChatLight amount={sticker.price} size={2} isFiat />
-            )}
+            <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,35 +47,48 @@
   display: flex;
 
   .stickerSelector__listBody {
-    display: flex;
-    flex-wrap: wrap;
     overflow-y: scroll;
     overflow-x: hidden;
     max-height: 25vh;
     padding: var(--spacing-s);
 
-    .button--file-action {
-      width: 5rem;
-      height: 5.3rem;
-      overflow: hidden;
-      margin: unset;
-      padding: var(--spacing-s);
+    .stickerSelector__listBody-rowItems {
+      display: flex;
+      flex-wrap: wrap;
+      overflow-y: scroll;
+      overflow-x: hidden;
 
-      .button__content {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
+      .button--file-action {
+        width: 5.5rem;
+        height: 6rem;
+        overflow: hidden;
+        margin: unset;
+        padding: var(--spacing-xxs);
 
-        .super-chat--light {
-          position: absolute;
-          display: inline;
-          bottom: 0;
+        .stickerItem--paid {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+
+          img {
+            margin-bottom: var(--spacing-s);
+          }
+
+          .super-chat--light {
+            position: absolute;
+            display: inline;
+            bottom: 0;
+          }
         }
-      }
 
-      @media (max-width: $breakpoint-xsmall) {
-        width: 4rem;
-        height: 4.3rem;
+        img {
+          margin: auto;
+        }
+
+        @media (max-width: $breakpoint-xsmall) {
+          width: 3.5rem;
+          height: 4rem;
+        }
       }
     }
   }