Profile Rating Modal: Redesign (#6264)
This commit is contained in:
Alexander Zinchuk
parent
9dad8f96a9
commit
2208d967fd
1
src/assets/font-icons/closed-gift.svg
Normal file
1
src/assets/font-icons/closed-gift.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="M18.5 4.1c1.9 0 3.5 1.6 3.5 3.5q0 .75-.3 1.5h2c.4 0 .9.1 1.3.3.7.3 1.3.9 1.7 1.7.2.4.3.8.3 1.3V15c0 .3-.1.6-.2.9-.2.5-.6.8-1 1.1v7.7c0 .5-.1.9-.3 1.4-.3.7-.9 1.2-1.5 1.5-.4.2-.9.3-1.4.3H9.7c-.5 0-.9-.1-1.4-.3-.8-.4-1.3-.9-1.7-1.6-.2-.4-.3-.9-.3-1.4v-7.7c-.4-.3-.8-.6-1-1.1-.2-.2-.3-.5-.3-.8v-2.6c0-.4.1-.9.3-1.3.4-.8 1-1.4 1.7-1.7.4-.2.8-.3 1.3-.3h2q-.3-.75-.3-1.5c0-1.9 1.6-3.5 3.5-3.5 1 0 1.9.4 2.5 1.1.6-.7 1.5-1.1 2.5-1.1m5.2 13.2H17v8.6h5.4c.4 0 .5-.1.6-.1.3-.1.5-.4.7-.7.1-.1.1-.3.1-.6v-1.6zM8.2 22.9v1.5c0 .4.1.5.1.6.1.3.4.5.7.7.1.1.3.1.6.1H15v-8.6H8.2zm8.8-7.6h7.7c.1 0 .2-.1.2-.2v-2.5c0-.3-.1-.5-.1-.6-.1-.3-.4-.6-.7-.7-.1 0-.3-.1-.6-.1H17zm-7.1-4.2H8.4c-.3 0-.5.1-.6.1-.3.1-.6.4-.7.7 0 .1-.1.3-.1.6V15c0 .1.1.2.2.2H15V11H9.9zm3.6-5c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5H15V7.6c0-.9-.7-1.5-1.5-1.5m5 0c-.8 0-1.5.7-1.5 1.5v1.5h1.5c.8 0 1.5-.7 1.5-1.5 0-.9-.7-1.5-1.5-1.5"/></svg>
|
||||||
|
After Width: | Height: | Size: 974 B |
1
src/assets/font-icons/stars-refund.svg
Normal file
1
src/assets/font-icons/stars-refund.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" x="0" y="0" version="1.1" viewBox="0 0 32 32"><path d="M12.5 27.1c-.5-.3-.6-.9-.2-1.4l2.7-3.9c.3-.5.9-.6 1.4-.2.5.3.6.9.2 1.4l-1.4 2c3.4.2 6.8-1.2 8.9-4.2 3.2-4.5 2.1-10.7-2.4-13.9C17.2 3.6 11 4.7 7.8 9.2s-2.1 10.7 2.4 13.9c.5.3.6.9.2 1.4-.3.5-.9.6-1.4.2-5.3-3.8-6.6-11.2-2.8-16.6s11.2-6.7 16.7-3c5.4 3.8 6.7 11.2 2.9 16.6-2.4 3.4-6.2 5.2-10.1 5.1l1.9 1.3c.5.3.6.9.2 1.4-.3.5-.9.6-1.4.2z" class="st3"/><path d="M19.1 21.5c-.5 0-.9-.1-1.3-.4l-1.8-1-1.7 1c-1.2.7-2.7.3-3.5-.8-.4-.6-.5-1.3-.3-2l.4-1.4c0-.1.1-.2.1-.4-.2-.1-.4-.2-.6-.4l-.9-.8c-.5-.4-.9-1.1-.9-1.7-.1-.7.2-1.4.6-1.9s1.1-.8 1.7-.9l2-.2.9-2c.6-1 1.8-1.5 2.9-1.2l.4.2c.5.2.9.6 1.1 1l.1.2.8 1.8 2 .2q1.05.15 1.8.9c.4.5.6 1.2.6 1.8-.1.7-.4 1.3-.9 1.7l-1.5 1.2.5 1.8c.2.7.1 1.3-.3 1.9s-.9 1-1.6 1.2c-.3.2-.5.2-.6.2M16 17.8l2.8 1.6c.1.1.3.1.4.1s.3-.1.3-.2c.1-.1.1-.2.1-.4l-.8-3 2.5-2c.1-.1.2-.2.2-.4 0-.1 0-.3-.1-.4s-.2-.2-.4-.2l-3.3-.2-1.3-3-.2-.2-.1-.1c-.2 0-.4 0-.6.2l-.1.1-1.2 2.8-3.2.3c-.1 0-.3.1-.4.2s-.1.3-.1.4.1.3.2.4l.9.8c.3.2.6.4 1 .4l4.1-.5-3.5 2.2c-.2.2-.3.5-.4.7l-.4 1.4c0 .1 0 .3.1.4.2.2.5.3.8.2z" class="st3"/><path d="m12.6 15 4.2-.7c.1 0 .2.1.1.2l-3.7 2.1"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -1 +1 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path d="M19.5 26.4c-.5 0-.9-.4-1-.8-.4-2.1-2.2-3.6-4.4-3.6H7.6c-2.2 0-4 1.6-4.4 3.6-.1.5-.5.8-1 .8-.6 0-1.1-.6-1-1.2.5-3 3.2-5.3 6.4-5.3h6.6c3.2 0 5.8 2.3 6.4 5.3 0 .7-.5 1.2-1.1 1.2m10.3 0c-.5 0-.9-.4-1-.8-.4-2.1-2.2-3.6-4.4-3.6h-2.8l-1.5-2h4.3c3.2 0 5.8 2.3 6.4 5.3.1.6-.4 1.1-1 1.1M15.9 9.3h-2.3c-.2 0-.4-.1-.4-.3l-.7-2.2c-.2-.7-.8-1.1-1.6-1.1s-1.4.3-1.6 1l-.7 2.2c-.1.2-.2.4-.4.4H5.8c-.7 0-1.3.5-1.6 1.1s0 1.4.6 1.8l1.9 1.4c.2.1.2.3.2.5l-.7 2.2c-.2.7 0 1.4.6 1.8s1.3.4 1.9 0l1.9-1.4c.2-.1.4-.1.5 0l1.9 1.4c.3.2.6.3 1 .3s.7-.1 1-.3c.6-.4.8-1.1.6-1.8l-.7-2.2c-.1-.2 0-.4.2-.5l1.9-1.4c.6-.4.8-1.1.6-1.8s-1-1.1-1.7-1.1m-2.3 3.1c-.6.4-.8 1.2-.6 1.8l.7 2.2-1.9-1.4c-.3-.2-.6-.3-1-.3s-.7.1-1 .3L8 16.3l.6-1.7c.1-.2.2-.4.3-.5l1.9-1.6-2.3.1-.4-.2-1.8-1.3h2.3c.7 0 1.3-.5 1.6-1.1l.7-2.2.7 2.2c.2.7.8 1.1 1.6 1.1h2.3zm16-.6c-.2-.6-.8-1-1.4-1h-1.4c-.3 0-.6-.2-.6-.5L25.7 9c-.2-.6-.8-1-1.4-1s-1.2.4-1.4 1l-.4 1.3c-.1.3-.4.5-.6.5h-1.4c-.6 0-1.2.4-1.4 1s0 1.3.5 1.6l1.1.8c.2.2.3.5.2.8l-.4 1.3c-.2.6 0 1.3.5 1.6q.45.3.9.3c.45 0 .6-.1.9-.3L24 17c.2-.2.5-.2.7 0l1.2.9c.5.4 1.2.4 1.7 0s.7-1 .5-1.6l-.4-1.3c-.1-.3 0-.6.2-.8l1.1-.8c.5-.3.7-1 .6-1.6"/><path d="M25.8 13.6c-.3.2-.4.6-.3.9L26 16l-1.3-.9c-.3-.2-.7-.2-1 0l-1.2.9.4-1.4c0-.1.1-.2.2-.3l1.2-1-1.4.1c-.1 0-.3 0-.4-.1l-1.1-.8H23c.4 0 .7-.2.8-.6l.5-1.5.5 1.5c.1.3.4.6.8.6h1.6z"/></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" x="0" y="0" version="1.1" viewBox="0 0 32 32"><path d="M11.9 17.7c-6.2 0-8.4 3.6-9.2 5.7-.3.8-.2 1.7.3 2.5.6.8 1.6 1.3 2.6 1.3h12.5c1.1 0 2.1-.5 2.6-1.3.5-.7.6-1.6.3-2.5-.7-2.1-2.9-5.7-9.1-5.7m7.2 7c-.2.3-.6.5-1 .5H5.6c-.4 0-.8-.2-1-.5-.1-.2-.2-.4-.1-.6.7-2 2.6-4.4 7.3-4.4s6.6 2.4 7.3 4.4q.3.3 0 .6M29.3 22.7c-.6-1.9-2.6-5.2-8.1-5.2h-.7c-.6 0-1 .5-1 1 0 .6.5 1 1 1h.6c4.1 0 5.6 2.1 6.2 3.8v.4c-.1.2-.4.3-.6.3h-3.6c-.6 0-1 .4-1 1s.4 1 1 1h3.6c.9 0 1.8-.4 2.3-1.1s.6-1.5.3-2.2M6.4 12l.8.6c.1.1.2.1.3.2L7.1 14c-.2.7-.1 1.3.3 1.9.7 1.1 2.2 1.5 3.3.8l1.2-.7 1.3.7q.6.3 1.2.3c.2 0 .4 0 .6-.1.6-.1 1.2-.6 1.5-1.1q.45-.9.3-1.8l-.3-1.3.6-.5c.1.3.4.6.6.9l.4.3-.1.4c-.2.6-.1 1.3.3 1.8.7 1 2 1.4 3.1.7l.5-.3.5.3q.6.3 1.2.3c.2 0 .3 0 .5-.1.6-.1 1.1-.5 1.4-1s.4-1.1.3-1.7l-.1-.4.4-.3c.5-.4.8-1 .8-1.6s-.1-1.2-.5-1.7-1-.8-1.6-.8h-.6l-.2-.6c-.3-.5-.7-.8-1.2-1-1.1-.4-2.3 0-2.9 1l-.3.6H19c-.3 0-.5.1-.8.2-.1-.3-.2-.5-.4-.8-.4-.5-1-.8-1.7-.9l-1.5-.1-.5-1.2c-.3-.6-.7-1.1-1.3-1.3-1.2-.5-2.6.1-3.2 1.3l-.4 1.3-1.5.1c-.6 0-1.1.3-1.5.7l-.1.2q-.75.75-.6 1.8c0 .6.4 1.2.9 1.7m12.6-.8c.1-.1.2-.1.2-.1L21 11l.7-1.6c.1-.1.2-.2.4-.1.1 0 .1.1.1.1l.7 1.6 1.8.1c.1 0 .2 0 .2.1s.1.1.1.2-.1.2-.1.2l-1.4 1.1.4 1.7v.2c0 .1-.1.1-.2.1h-.2l-1.5-.9-1.5.9c-.1.1-.3.1-.4-.1 0-.1-.1-.1 0-.2l.3-1.1h.1l1.8-1c.1 0 0-.2-.1-.2l-2.1.1H20c-.1 0-.1-.1-.2-.1l-.5-.4c-.3-.2-.3-.3-.3-.3zM7.5 9.8c.1-.1.2-.2.3-.2l2.6-.2 1-2.4c.1-.2.4-.3.6-.2.1 0 .2.1.2.2l1 2.4 2.8.2c.1 0 .2.1.3.2s.1.2.1.3-.1.2-.2.3l-2 1.7.6 2.5v.3c-.1.1-.2.2-.3.2s-.2 0-.3-.1l-2.3-1.3L9.7 15c-.2.1-.5.1-.6-.1-.1-.1-.1-.3-.1-.4l.3-1.2c0-.2.1-.3.2-.5l3.3-1.7c.1-.1.1-.2-.1-.2l-3.7.4-.6-.3-.8-.6c-.1-.1-.2-.2-.2-.3.1-.1.1-.2.1-.3"/></svg>
|
||||||
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.7 KiB |
@ -2,7 +2,6 @@
|
|||||||
|
|
||||||
.root {
|
.root {
|
||||||
--percent: calc(var(--progress, 0.5) * 100%);
|
--percent: calc(var(--progress, 0.5) * 100%);
|
||||||
--color-negative-progress: #E05356;
|
|
||||||
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
|||||||
@ -3,10 +3,8 @@
|
|||||||
width: 26.25rem;
|
width: 26.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title, .description {
|
.title {
|
||||||
padding-inline: 1.5rem;
|
font-weight: var(--font-weight-medium);
|
||||||
text-align: center !important;
|
|
||||||
text-wrap: pretty;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.secondary {
|
.secondary {
|
||||||
|
|||||||
@ -61,7 +61,7 @@ const TableAboutModal = ({
|
|||||||
icon={icon}
|
icon={icon}
|
||||||
iconClassName={styles.listItemIcon}
|
iconClassName={styles.listItemIcon}
|
||||||
>
|
>
|
||||||
<span className="title">{title}</span>
|
<span className={buildClassName('title', styles.title)}>{title}</span>
|
||||||
<span className="subtitle">{subtitle}</span>
|
<span className="subtitle">{subtitle}</span>
|
||||||
</ListItem>
|
</ListItem>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -1,25 +1,59 @@
|
|||||||
|
.content {
|
||||||
|
:global(.ListItem-main-icon) {
|
||||||
|
margin-top: 0.6875rem !important;
|
||||||
|
margin-right: 0.625rem !important;
|
||||||
|
font-size: 1.875rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.ListItem-button) {
|
||||||
|
align-items: flex-start;
|
||||||
|
padding-inline: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.modal-content) {
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
padding-inline: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.ListItem) {
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
|
||||||
|
:global(.title) {
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.subtitle) {
|
||||||
|
margin-top: 0.125rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
padding-bottom: 1rem;
|
padding-bottom: 0.9375rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.description {
|
.description {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding-inline: 1rem;
|
padding-inline: 2rem;
|
||||||
line-height: 1.25;
|
line-height: 1.375rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.descriptionPreview {
|
.descriptionPreview {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1.125rem;
|
||||||
font-size: 0.875rem;
|
font-size: 0.9375rem;
|
||||||
line-height: 1.25;
|
line-height: 1.375rem;
|
||||||
color: var(--color-text-secondary);
|
color: var(--color-text-secondary);
|
||||||
|
|
||||||
|
&.negative {
|
||||||
|
color: var(--color-negative-progress);
|
||||||
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
margin-inline: 1rem;
|
margin-inline: 2.25rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -36,23 +70,24 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
margin-bottom: 4.75rem;
|
margin-bottom: 0.5rem;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
font-weight: var(--font-weight-medium);
|
font-weight: var(--font-weight-semibold);
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ratingProgress {
|
.ratingProgress {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
margin-bottom: 0.75rem;
|
margin-top: 5.625rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
|
||||||
&.withPreview {
|
&.withPreview {
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.subtitle {
|
.subtitle {
|
||||||
line-height: 1.25;
|
line-height: 1.375rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
@ -66,9 +101,10 @@
|
|||||||
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
||||||
margin-right: 0.25rem;
|
margin-right: 0.375rem;
|
||||||
padding: 0.125rem 0.375rem;
|
padding-block: 0.0625rem;
|
||||||
border-radius: 0.375rem;
|
padding-inline: 0.25rem;
|
||||||
|
border-radius: 0.3125rem;
|
||||||
|
|
||||||
font-size: 0.6875rem;
|
font-size: 0.6875rem;
|
||||||
font-weight: var(--font-weight-medium);
|
font-weight: var(--font-weight-medium);
|
||||||
@ -79,6 +115,12 @@
|
|||||||
|
|
||||||
.understoodIcon {
|
.understoodIcon {
|
||||||
margin-right: 0.25rem;
|
margin-right: 0.25rem;
|
||||||
|
font-size: 1.1875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badgeAdded,
|
||||||
|
.badgeDeducted {
|
||||||
|
font-family: var(--font-family-condensed);
|
||||||
}
|
}
|
||||||
|
|
||||||
.badgeAdded {
|
.badgeAdded {
|
||||||
@ -87,5 +129,6 @@
|
|||||||
|
|
||||||
.badgeDeducted {
|
.badgeDeducted {
|
||||||
color: var(--color-background);
|
color: var(--color-background);
|
||||||
|
opacity: 0.8;
|
||||||
background-color: var(--color-text-secondary);
|
background-color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -111,7 +111,7 @@ const ProfileRatingModal = ({
|
|||||||
return (
|
return (
|
||||||
<Transition
|
<Transition
|
||||||
name="fade"
|
name="fade"
|
||||||
className={styles.descriptionPreview}
|
className={buildClassName(styles.descriptionPreview, isNegative && styles.negative)}
|
||||||
activeKey={showFutureRating ? 1 : 0}
|
activeKey={showFutureRating ? 1 : 0}
|
||||||
shouldCleanup
|
shouldCleanup
|
||||||
shouldRestoreHeight
|
shouldRestoreHeight
|
||||||
@ -164,9 +164,6 @@ const ProfileRatingModal = ({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.header}>
|
<div className={styles.header}>
|
||||||
<div className={styles.title}>
|
|
||||||
{lang('TitleRating')}
|
|
||||||
</div>
|
|
||||||
<PremiumProgress
|
<PremiumProgress
|
||||||
leftText={isNegative ? undefined : lang('RatingLevel', { level: currentLevel })}
|
leftText={isNegative ? undefined : lang('RatingLevel', { level: currentLevel })}
|
||||||
rightText={isNegative ? lang('RatingNegativeLevel') : lang('RatingLevel', { level: nextLevel })}
|
rightText={isNegative ? lang('RatingNegativeLevel') : lang('RatingLevel', { level: nextLevel })}
|
||||||
@ -180,10 +177,14 @@ const ProfileRatingModal = ({
|
|||||||
className={buildClassName(styles.ratingProgress, shouldShowPreview && styles.withPreview)}
|
className={buildClassName(styles.ratingProgress, shouldShowPreview && styles.withPreview)}
|
||||||
/>
|
/>
|
||||||
{renderPreviewDescription()}
|
{renderPreviewDescription()}
|
||||||
|
<div className={styles.title}>
|
||||||
|
{lang('TitleRating')}
|
||||||
|
</div>
|
||||||
<p className={styles.description}>
|
<p className={styles.description}>
|
||||||
{user?.id === currentUserId
|
{user?.id === currentUserId
|
||||||
? lang('RatingYourReflectsActivity')
|
? lang('RatingYourReflectsActivity')
|
||||||
: lang('RatingReflectsActivity', { name: getPeerTitle(lang, user) || userFallbackText })}
|
: lang('RatingReflectsActivity', { name: getPeerTitle(lang, user) || userFallbackText },
|
||||||
|
{ withMarkdown: true, withNodes: true })}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@ -192,7 +193,7 @@ const ProfileRatingModal = ({
|
|||||||
lang, handleShowFuture, handleShowCurrent, isOpen]);
|
lang, handleShowFuture, handleShowCurrent, isOpen]);
|
||||||
|
|
||||||
const listItemData = [
|
const listItemData = [
|
||||||
['gift', lang('RatingGiftsFromTelegram'), (
|
['closed-gift', lang('RatingGiftsFromTelegram'), (
|
||||||
<span className={styles.subtitle}>
|
<span className={styles.subtitle}>
|
||||||
{renderBadge('added')}
|
{renderBadge('added')}
|
||||||
{lang('RatingGiftsFromTelegramDesc')}
|
{lang('RatingGiftsFromTelegramDesc')}
|
||||||
@ -204,7 +205,7 @@ const ProfileRatingModal = ({
|
|||||||
{lang('RatingGiftsAndPostsFromUsersDesc')}
|
{lang('RatingGiftsAndPostsFromUsersDesc')}
|
||||||
</span>
|
</span>
|
||||||
)],
|
)],
|
||||||
['refund', lang('RatingRefundsAndConversions'), (
|
['stars-refund', lang('RatingRefundsAndConversions'), (
|
||||||
<span className={styles.subtitle}>
|
<span className={styles.subtitle}>
|
||||||
{renderBadge('deducted')}
|
{renderBadge('deducted')}
|
||||||
{lang('RatingRefundsAndConversionsDesc')}
|
{lang('RatingRefundsAndConversionsDesc')}
|
||||||
@ -217,7 +218,6 @@ const ProfileRatingModal = ({
|
|||||||
return (
|
return (
|
||||||
<div className={styles.footer}>
|
<div className={styles.footer}>
|
||||||
<Button
|
<Button
|
||||||
size="smaller"
|
|
||||||
onClick={handleClose}
|
onClick={handleClose}
|
||||||
>
|
>
|
||||||
<Icon name="understood" className={styles.understoodIcon} />
|
<Icon name="understood" className={styles.understoodIcon} />
|
||||||
@ -229,6 +229,7 @@ const ProfileRatingModal = ({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<TableAboutModal
|
<TableAboutModal
|
||||||
|
contentClassName={styles.content}
|
||||||
isOpen={isOpen}
|
isOpen={isOpen}
|
||||||
header={header}
|
header={header}
|
||||||
listItemData={listItemData}
|
listItemData={listItemData}
|
||||||
|
|||||||
@ -207,6 +207,8 @@ $color-message-story-mention-to: #74bcff;
|
|||||||
--color-stars: #FFAA00;
|
--color-stars: #FFAA00;
|
||||||
--color-heart: #ff3c32;
|
--color-heart: #ff3c32;
|
||||||
|
|
||||||
|
--color-negative-progress: #CE4C47;
|
||||||
|
|
||||||
--vh: 1vh;
|
--vh: 1vh;
|
||||||
|
|
||||||
--border-radius-modal: 1rem;
|
--border-radius-modal: 1rem;
|
||||||
|
|||||||
@ -86,247 +86,249 @@ $icons-map: (
|
|||||||
"close-circle": "\f131",
|
"close-circle": "\f131",
|
||||||
"close-topic": "\f132",
|
"close-topic": "\f132",
|
||||||
"close": "\f133",
|
"close": "\f133",
|
||||||
"cloud-download": "\f134",
|
"closed-gift": "\f134",
|
||||||
"collapse-modal": "\f135",
|
"cloud-download": "\f135",
|
||||||
"collapse": "\f136",
|
"collapse-modal": "\f136",
|
||||||
"colorize": "\f137",
|
"collapse": "\f137",
|
||||||
"comments-sticker": "\f138",
|
"colorize": "\f138",
|
||||||
"comments": "\f139",
|
"comments-sticker": "\f139",
|
||||||
"copy-media": "\f13a",
|
"comments": "\f13a",
|
||||||
"copy": "\f13b",
|
"copy-media": "\f13b",
|
||||||
"crown-take-off-outline": "\f13c",
|
"copy": "\f13c",
|
||||||
"crown-take-off": "\f13d",
|
"crown-take-off-outline": "\f13d",
|
||||||
"crown-wear-outline": "\f13e",
|
"crown-take-off": "\f13e",
|
||||||
"crown-wear": "\f13f",
|
"crown-wear-outline": "\f13f",
|
||||||
"darkmode": "\f140",
|
"crown-wear": "\f140",
|
||||||
"data": "\f141",
|
"darkmode": "\f141",
|
||||||
"delete-filled": "\f142",
|
"data": "\f142",
|
||||||
"delete-left": "\f143",
|
"delete-filled": "\f143",
|
||||||
"delete-user": "\f144",
|
"delete-left": "\f144",
|
||||||
"delete": "\f145",
|
"delete-user": "\f145",
|
||||||
"diamond": "\f146",
|
"delete": "\f146",
|
||||||
"document": "\f147",
|
"diamond": "\f147",
|
||||||
"double-badge": "\f148",
|
"document": "\f148",
|
||||||
"down": "\f149",
|
"double-badge": "\f149",
|
||||||
"download": "\f14a",
|
"down": "\f14a",
|
||||||
"dropdown-arrows": "\f14b",
|
"download": "\f14b",
|
||||||
"eats": "\f14c",
|
"dropdown-arrows": "\f14c",
|
||||||
"edit": "\f14d",
|
"eats": "\f14d",
|
||||||
"email": "\f14e",
|
"edit": "\f14e",
|
||||||
"enter": "\f14f",
|
"email": "\f14f",
|
||||||
"expand-modal": "\f150",
|
"enter": "\f150",
|
||||||
"expand": "\f151",
|
"expand-modal": "\f151",
|
||||||
"eye-crossed-outline": "\f152",
|
"expand": "\f152",
|
||||||
"eye-crossed": "\f153",
|
"eye-crossed-outline": "\f153",
|
||||||
"eye-outline": "\f154",
|
"eye-crossed": "\f154",
|
||||||
"eye": "\f155",
|
"eye-outline": "\f155",
|
||||||
"favorite-filled": "\f156",
|
"eye": "\f156",
|
||||||
"favorite": "\f157",
|
"favorite-filled": "\f157",
|
||||||
"file-badge": "\f158",
|
"favorite": "\f158",
|
||||||
"flag": "\f159",
|
"file-badge": "\f159",
|
||||||
"folder-badge": "\f15a",
|
"flag": "\f15a",
|
||||||
"folder": "\f15b",
|
"folder-badge": "\f15b",
|
||||||
"fontsize": "\f15c",
|
"folder": "\f15c",
|
||||||
"forums": "\f15d",
|
"fontsize": "\f15d",
|
||||||
"forward": "\f15e",
|
"forums": "\f15e",
|
||||||
"fragment": "\f15f",
|
"forward": "\f15f",
|
||||||
"frozen-time": "\f160",
|
"fragment": "\f160",
|
||||||
"fullscreen": "\f161",
|
"frozen-time": "\f161",
|
||||||
"gifs": "\f162",
|
"fullscreen": "\f162",
|
||||||
"gift-transfer-inline": "\f163",
|
"gifs": "\f163",
|
||||||
"gift": "\f164",
|
"gift-transfer-inline": "\f164",
|
||||||
"group-filled": "\f165",
|
"gift": "\f165",
|
||||||
"group": "\f166",
|
"group-filled": "\f166",
|
||||||
"grouped-disable": "\f167",
|
"group": "\f167",
|
||||||
"grouped": "\f168",
|
"grouped-disable": "\f168",
|
||||||
"hand-stop": "\f169",
|
"grouped": "\f169",
|
||||||
"hashtag": "\f16a",
|
"hand-stop": "\f16a",
|
||||||
"hd-photo": "\f16b",
|
"hashtag": "\f16b",
|
||||||
"heart-outline": "\f16c",
|
"hd-photo": "\f16c",
|
||||||
"heart": "\f16d",
|
"heart-outline": "\f16d",
|
||||||
"help": "\f16e",
|
"heart": "\f16e",
|
||||||
"info-filled": "\f16f",
|
"help": "\f16f",
|
||||||
"info": "\f170",
|
"info-filled": "\f170",
|
||||||
"install": "\f171",
|
"info": "\f171",
|
||||||
"italic": "\f172",
|
"install": "\f172",
|
||||||
"key": "\f173",
|
"italic": "\f173",
|
||||||
"keyboard": "\f174",
|
"key": "\f174",
|
||||||
"lamp": "\f175",
|
"keyboard": "\f175",
|
||||||
"language": "\f176",
|
"lamp": "\f176",
|
||||||
"large-pause": "\f177",
|
"language": "\f177",
|
||||||
"large-play": "\f178",
|
"large-pause": "\f178",
|
||||||
"link-badge": "\f179",
|
"large-play": "\f179",
|
||||||
"link-broken": "\f17a",
|
"link-badge": "\f17a",
|
||||||
"link": "\f17b",
|
"link-broken": "\f17b",
|
||||||
"location": "\f17c",
|
"link": "\f17c",
|
||||||
"lock-badge": "\f17d",
|
"location": "\f17d",
|
||||||
"lock": "\f17e",
|
"lock-badge": "\f17e",
|
||||||
"logout": "\f17f",
|
"lock": "\f17f",
|
||||||
"loop": "\f180",
|
"logout": "\f180",
|
||||||
"mention": "\f181",
|
"loop": "\f181",
|
||||||
"message-failed": "\f182",
|
"mention": "\f182",
|
||||||
"message-pending": "\f183",
|
"message-failed": "\f183",
|
||||||
"message-read": "\f184",
|
"message-pending": "\f184",
|
||||||
"message-succeeded": "\f185",
|
"message-read": "\f185",
|
||||||
"message": "\f186",
|
"message-succeeded": "\f186",
|
||||||
"microphone-alt": "\f187",
|
"message": "\f187",
|
||||||
"microphone": "\f188",
|
"microphone-alt": "\f188",
|
||||||
"monospace": "\f189",
|
"microphone": "\f189",
|
||||||
"more-circle": "\f18a",
|
"monospace": "\f18a",
|
||||||
"more": "\f18b",
|
"more-circle": "\f18b",
|
||||||
"move-caption-down": "\f18c",
|
"more": "\f18c",
|
||||||
"move-caption-up": "\f18d",
|
"move-caption-down": "\f18d",
|
||||||
"mute": "\f18e",
|
"move-caption-up": "\f18e",
|
||||||
"muted": "\f18f",
|
"mute": "\f18f",
|
||||||
"my-notes": "\f190",
|
"muted": "\f190",
|
||||||
"new-chat-filled": "\f191",
|
"my-notes": "\f191",
|
||||||
"next": "\f192",
|
"new-chat-filled": "\f192",
|
||||||
"nochannel": "\f193",
|
"next": "\f193",
|
||||||
"noise-suppression": "\f194",
|
"nochannel": "\f194",
|
||||||
"non-contacts": "\f195",
|
"noise-suppression": "\f195",
|
||||||
"one-filled": "\f196",
|
"non-contacts": "\f196",
|
||||||
"open-in-new-tab": "\f197",
|
"one-filled": "\f197",
|
||||||
"password-off": "\f198",
|
"open-in-new-tab": "\f198",
|
||||||
"pause": "\f199",
|
"password-off": "\f199",
|
||||||
"permissions": "\f19a",
|
"pause": "\f19a",
|
||||||
"phone-discard-outline": "\f19b",
|
"permissions": "\f19b",
|
||||||
"phone-discard": "\f19c",
|
"phone-discard-outline": "\f19c",
|
||||||
"phone": "\f19d",
|
"phone-discard": "\f19d",
|
||||||
"photo": "\f19e",
|
"phone": "\f19e",
|
||||||
"pin-badge": "\f19f",
|
"photo": "\f19f",
|
||||||
"pin-list": "\f1a0",
|
"pin-badge": "\f1a0",
|
||||||
"pin": "\f1a1",
|
"pin-list": "\f1a1",
|
||||||
"pinned-chat": "\f1a2",
|
"pin": "\f1a2",
|
||||||
"pinned-message": "\f1a3",
|
"pinned-chat": "\f1a3",
|
||||||
"pip": "\f1a4",
|
"pinned-message": "\f1a4",
|
||||||
"play-story": "\f1a5",
|
"pip": "\f1a5",
|
||||||
"play": "\f1a6",
|
"play-story": "\f1a6",
|
||||||
"poll": "\f1a7",
|
"play": "\f1a7",
|
||||||
"previous": "\f1a8",
|
"poll": "\f1a8",
|
||||||
"privacy-policy": "\f1a9",
|
"previous": "\f1a9",
|
||||||
"proof-of-ownership": "\f1aa",
|
"privacy-policy": "\f1aa",
|
||||||
"quote-text": "\f1ab",
|
"proof-of-ownership": "\f1ab",
|
||||||
"quote": "\f1ac",
|
"quote-text": "\f1ac",
|
||||||
"radial-badge": "\f1ad",
|
"quote": "\f1ad",
|
||||||
"rating-icons-level1": "\f1ae",
|
"radial-badge": "\f1ae",
|
||||||
"rating-icons-level10": "\f1af",
|
"rating-icons-level1": "\f1af",
|
||||||
"rating-icons-level2": "\f1b0",
|
"rating-icons-level10": "\f1b0",
|
||||||
"rating-icons-level20": "\f1b1",
|
"rating-icons-level2": "\f1b1",
|
||||||
"rating-icons-level3": "\f1b2",
|
"rating-icons-level20": "\f1b2",
|
||||||
"rating-icons-level30": "\f1b3",
|
"rating-icons-level3": "\f1b3",
|
||||||
"rating-icons-level4": "\f1b4",
|
"rating-icons-level30": "\f1b4",
|
||||||
"rating-icons-level40": "\f1b5",
|
"rating-icons-level4": "\f1b5",
|
||||||
"rating-icons-level5": "\f1b6",
|
"rating-icons-level40": "\f1b6",
|
||||||
"rating-icons-level50": "\f1b7",
|
"rating-icons-level5": "\f1b7",
|
||||||
"rating-icons-level6": "\f1b8",
|
"rating-icons-level50": "\f1b8",
|
||||||
"rating-icons-level60": "\f1b9",
|
"rating-icons-level6": "\f1b9",
|
||||||
"rating-icons-level7": "\f1ba",
|
"rating-icons-level60": "\f1ba",
|
||||||
"rating-icons-level70": "\f1bb",
|
"rating-icons-level7": "\f1bb",
|
||||||
"rating-icons-level8": "\f1bc",
|
"rating-icons-level70": "\f1bc",
|
||||||
"rating-icons-level80": "\f1bd",
|
"rating-icons-level8": "\f1bd",
|
||||||
"rating-icons-level9": "\f1be",
|
"rating-icons-level80": "\f1be",
|
||||||
"rating-icons-level90": "\f1bf",
|
"rating-icons-level9": "\f1bf",
|
||||||
"rating-icons-negative": "\f1c0",
|
"rating-icons-level90": "\f1c0",
|
||||||
"readchats": "\f1c1",
|
"rating-icons-negative": "\f1c1",
|
||||||
"recent": "\f1c2",
|
"readchats": "\f1c2",
|
||||||
"refund": "\f1c3",
|
"recent": "\f1c3",
|
||||||
"reload": "\f1c4",
|
"refund": "\f1c4",
|
||||||
"remove-quote": "\f1c5",
|
"reload": "\f1c5",
|
||||||
"remove": "\f1c6",
|
"remove-quote": "\f1c6",
|
||||||
"reopen-topic": "\f1c7",
|
"remove": "\f1c7",
|
||||||
"replace": "\f1c8",
|
"reopen-topic": "\f1c8",
|
||||||
"replies": "\f1c9",
|
"replace": "\f1c9",
|
||||||
"reply-filled": "\f1ca",
|
"replies": "\f1ca",
|
||||||
"reply": "\f1cb",
|
"reply-filled": "\f1cb",
|
||||||
"revenue-split": "\f1cc",
|
"reply": "\f1cc",
|
||||||
"revote": "\f1cd",
|
"revenue-split": "\f1cd",
|
||||||
"save-story": "\f1ce",
|
"revote": "\f1ce",
|
||||||
"saved-messages": "\f1cf",
|
"save-story": "\f1cf",
|
||||||
"schedule": "\f1d0",
|
"saved-messages": "\f1d0",
|
||||||
"scheduled": "\f1d1",
|
"schedule": "\f1d1",
|
||||||
"sd-photo": "\f1d2",
|
"scheduled": "\f1d2",
|
||||||
"search": "\f1d3",
|
"sd-photo": "\f1d3",
|
||||||
"select": "\f1d4",
|
"search": "\f1d4",
|
||||||
"sell-outline": "\f1d5",
|
"select": "\f1d5",
|
||||||
"sell": "\f1d6",
|
"sell-outline": "\f1d6",
|
||||||
"send-outline": "\f1d7",
|
"sell": "\f1d7",
|
||||||
"send": "\f1d8",
|
"send-outline": "\f1d8",
|
||||||
"settings-filled": "\f1d9",
|
"send": "\f1d9",
|
||||||
"settings": "\f1da",
|
"settings-filled": "\f1da",
|
||||||
"share-filled": "\f1db",
|
"settings": "\f1db",
|
||||||
"share-screen-outlined": "\f1dc",
|
"share-filled": "\f1dc",
|
||||||
"share-screen-stop": "\f1dd",
|
"share-screen-outlined": "\f1dd",
|
||||||
"share-screen": "\f1de",
|
"share-screen-stop": "\f1de",
|
||||||
"show-message": "\f1df",
|
"share-screen": "\f1df",
|
||||||
"sidebar": "\f1e0",
|
"show-message": "\f1e0",
|
||||||
"skip-next": "\f1e1",
|
"sidebar": "\f1e1",
|
||||||
"skip-previous": "\f1e2",
|
"skip-next": "\f1e2",
|
||||||
"smallscreen": "\f1e3",
|
"skip-previous": "\f1e3",
|
||||||
"smile": "\f1e4",
|
"smallscreen": "\f1e4",
|
||||||
"sort-by-date": "\f1e5",
|
"smile": "\f1e5",
|
||||||
"sort-by-number": "\f1e6",
|
"sort-by-date": "\f1e6",
|
||||||
"sort-by-price": "\f1e7",
|
"sort-by-number": "\f1e7",
|
||||||
"sort": "\f1e8",
|
"sort-by-price": "\f1e8",
|
||||||
"speaker-muted-story": "\f1e9",
|
"sort": "\f1e9",
|
||||||
"speaker-outline": "\f1ea",
|
"speaker-muted-story": "\f1ea",
|
||||||
"speaker-story": "\f1eb",
|
"speaker-outline": "\f1eb",
|
||||||
"speaker": "\f1ec",
|
"speaker-story": "\f1ec",
|
||||||
"spoiler-disable": "\f1ed",
|
"speaker": "\f1ed",
|
||||||
"spoiler": "\f1ee",
|
"spoiler-disable": "\f1ee",
|
||||||
"sport": "\f1ef",
|
"spoiler": "\f1ef",
|
||||||
"star": "\f1f0",
|
"sport": "\f1f0",
|
||||||
"stars-lock": "\f1f1",
|
"star": "\f1f1",
|
||||||
"stats": "\f1f2",
|
"stars-lock": "\f1f2",
|
||||||
"stealth-future": "\f1f3",
|
"stars-refund": "\f1f3",
|
||||||
"stealth-past": "\f1f4",
|
"stats": "\f1f4",
|
||||||
"stickers": "\f1f5",
|
"stealth-future": "\f1f5",
|
||||||
"stop-raising-hand": "\f1f6",
|
"stealth-past": "\f1f6",
|
||||||
"stop": "\f1f7",
|
"stickers": "\f1f7",
|
||||||
"story-caption": "\f1f8",
|
"stop-raising-hand": "\f1f8",
|
||||||
"story-expired": "\f1f9",
|
"stop": "\f1f9",
|
||||||
"story-priority": "\f1fa",
|
"story-caption": "\f1fa",
|
||||||
"story-reply": "\f1fb",
|
"story-expired": "\f1fb",
|
||||||
"strikethrough": "\f1fc",
|
"story-priority": "\f1fc",
|
||||||
"tag-add": "\f1fd",
|
"story-reply": "\f1fd",
|
||||||
"tag-crossed": "\f1fe",
|
"strikethrough": "\f1fe",
|
||||||
"tag-filter": "\f1ff",
|
"tag-add": "\f1ff",
|
||||||
"tag-name": "\f200",
|
"tag-crossed": "\f200",
|
||||||
"tag": "\f201",
|
"tag-filter": "\f201",
|
||||||
"timer": "\f202",
|
"tag-name": "\f202",
|
||||||
"toncoin": "\f203",
|
"tag": "\f203",
|
||||||
"trade": "\f204",
|
"timer": "\f204",
|
||||||
"transcribe": "\f205",
|
"toncoin": "\f205",
|
||||||
"truck": "\f206",
|
"trade": "\f206",
|
||||||
"unarchive": "\f207",
|
"transcribe": "\f207",
|
||||||
"underlined": "\f208",
|
"truck": "\f208",
|
||||||
"understood": "\f209",
|
"unarchive": "\f209",
|
||||||
"unique-profile": "\f20a",
|
"underlined": "\f20a",
|
||||||
"unlist-outline": "\f20b",
|
"understood": "\f20b",
|
||||||
"unlist": "\f20c",
|
"unique-profile": "\f20c",
|
||||||
"unlock-badge": "\f20d",
|
"unlist-outline": "\f20d",
|
||||||
"unlock": "\f20e",
|
"unlist": "\f20e",
|
||||||
"unmute": "\f20f",
|
"unlock-badge": "\f20f",
|
||||||
"unpin": "\f210",
|
"unlock": "\f210",
|
||||||
"unread": "\f211",
|
"unmute": "\f211",
|
||||||
"up": "\f212",
|
"unpin": "\f212",
|
||||||
"user-filled": "\f213",
|
"unread": "\f213",
|
||||||
"user-online": "\f214",
|
"up": "\f214",
|
||||||
"user-stars": "\f215",
|
"user-filled": "\f215",
|
||||||
"user": "\f216",
|
"user-online": "\f216",
|
||||||
"video-outlined": "\f217",
|
"user-stars": "\f217",
|
||||||
"video-stop": "\f218",
|
"user": "\f218",
|
||||||
"video": "\f219",
|
"video-outlined": "\f219",
|
||||||
"view-once": "\f21a",
|
"video-stop": "\f21a",
|
||||||
"voice-chat": "\f21b",
|
"video": "\f21b",
|
||||||
"volume-1": "\f21c",
|
"view-once": "\f21c",
|
||||||
"volume-2": "\f21d",
|
"voice-chat": "\f21d",
|
||||||
"volume-3": "\f21e",
|
"volume-1": "\f21e",
|
||||||
"warning": "\f21f",
|
"volume-2": "\f21f",
|
||||||
"web": "\f220",
|
"volume-3": "\f220",
|
||||||
"webapp": "\f221",
|
"warning": "\f221",
|
||||||
"word-wrap": "\f222",
|
"web": "\f222",
|
||||||
"zoom-in": "\f223",
|
"webapp": "\f223",
|
||||||
"zoom-out": "\f224",
|
"word-wrap": "\f224",
|
||||||
|
"zoom-in": "\f225",
|
||||||
|
"zoom-out": "\f226",
|
||||||
);
|
);
|
||||||
|
|
||||||
.icon-active-sessions::before {
|
.icon-active-sessions::before {
|
||||||
@ -482,6 +484,9 @@ $icons-map: (
|
|||||||
.icon-close::before {
|
.icon-close::before {
|
||||||
content: map.get($icons-map, "close");
|
content: map.get($icons-map, "close");
|
||||||
}
|
}
|
||||||
|
.icon-closed-gift::before {
|
||||||
|
content: map.get($icons-map, "closed-gift");
|
||||||
|
}
|
||||||
.icon-cloud-download::before {
|
.icon-cloud-download::before {
|
||||||
content: map.get($icons-map, "cloud-download");
|
content: map.get($icons-map, "cloud-download");
|
||||||
}
|
}
|
||||||
@ -1052,6 +1057,9 @@ $icons-map: (
|
|||||||
.icon-stars-lock::before {
|
.icon-stars-lock::before {
|
||||||
content: map.get($icons-map, "stars-lock");
|
content: map.get($icons-map, "stars-lock");
|
||||||
}
|
}
|
||||||
|
.icon-stars-refund::before {
|
||||||
|
content: map.get($icons-map, "stars-refund");
|
||||||
|
}
|
||||||
.icon-stats::before {
|
.icon-stats::before {
|
||||||
content: map.get($icons-map, "stats");
|
content: map.get($icons-map, "stats");
|
||||||
}
|
}
|
||||||
|
|||||||
Binary file not shown.
Binary file not shown.
@ -50,6 +50,7 @@ export type FontIconName =
|
|||||||
| 'close-circle'
|
| 'close-circle'
|
||||||
| 'close-topic'
|
| 'close-topic'
|
||||||
| 'close'
|
| 'close'
|
||||||
|
| 'closed-gift'
|
||||||
| 'cloud-download'
|
| 'cloud-download'
|
||||||
| 'collapse-modal'
|
| 'collapse-modal'
|
||||||
| 'collapse'
|
| 'collapse'
|
||||||
@ -240,6 +241,7 @@ export type FontIconName =
|
|||||||
| 'sport'
|
| 'sport'
|
||||||
| 'star'
|
| 'star'
|
||||||
| 'stars-lock'
|
| 'stars-lock'
|
||||||
|
| 'stars-refund'
|
||||||
| 'stats'
|
| 'stats'
|
||||||
| 'stealth-future'
|
| 'stealth-future'
|
||||||
| 'stealth-past'
|
| 'stealth-past'
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user