diff --git a/ui/component/commentCreate/sticker-selector.jsx b/ui/component/commentCreate/sticker-selector.jsx index c82aa9df8..11513af92 100644 --- a/ui/component/commentCreate/sticker-selector.jsx +++ b/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 ?
{children}
: children; + }; + const getListRow = (rowTitle: string, rowStickers: any) => (
@@ -47,10 +53,12 @@ export default function StickerSelector(props: Props) { className="button--file-action" onClick={() => onSelect(sticker)} > - - {sticker.price && sticker.price > 0 && ( - - )} + + + {sticker.price && sticker.price > 0 && ( + + )} + ))}
diff --git a/ui/scss/component/_comments.scss b/ui/scss/component/_comments.scss index e570fa93d..fdf7b76e4 100644 --- a/ui/scss/component/_comments.scss +++ b/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 { diff --git a/ui/scss/component/_livestream.scss b/ui/scss/component/_livestream.scss index 3c0650a5c..3132d63bd 100644 --- a/ui/scss/component/_livestream.scss +++ b/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; } diff --git a/ui/scss/component/_sticker-selector.scss b/ui/scss/component/_sticker-selector.scss index 543bbb7d1..629707844 100644 --- a/ui/scss/component/_sticker-selector.scss +++ b/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; + } } } }