diff --git a/src/assets/font-icons/closed-gift.svg b/src/assets/font-icons/closed-gift.svg new file mode 100644 index 000000000..2fefc3363 --- /dev/null +++ b/src/assets/font-icons/closed-gift.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/font-icons/stars-refund.svg b/src/assets/font-icons/stars-refund.svg new file mode 100644 index 000000000..fc5ab8be0 --- /dev/null +++ b/src/assets/font-icons/stars-refund.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/font-icons/user-stars.svg b/src/assets/font-icons/user-stars.svg index 0954f398d..12e7ec236 100644 --- a/src/assets/font-icons/user-stars.svg +++ b/src/assets/font-icons/user-stars.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/components/common/PremiumProgress.module.scss b/src/components/common/PremiumProgress.module.scss index 9db1c5b58..eef90bf9e 100644 --- a/src/components/common/PremiumProgress.module.scss +++ b/src/components/common/PremiumProgress.module.scss @@ -2,7 +2,6 @@ .root { --percent: calc(var(--progress, 0.5) * 100%); - --color-negative-progress: #E05356; position: relative; diff --git a/src/components/modals/common/TableAboutModal.module.scss b/src/components/modals/common/TableAboutModal.module.scss index aaa151c82..ba8878ce2 100644 --- a/src/components/modals/common/TableAboutModal.module.scss +++ b/src/components/modals/common/TableAboutModal.module.scss @@ -3,10 +3,8 @@ width: 26.25rem; } -.title, .description { - padding-inline: 1.5rem; - text-align: center !important; - text-wrap: pretty; +.title { + font-weight: var(--font-weight-medium); } .secondary { diff --git a/src/components/modals/common/TableAboutModal.tsx b/src/components/modals/common/TableAboutModal.tsx index 5a4d29de4..55e1360c2 100644 --- a/src/components/modals/common/TableAboutModal.tsx +++ b/src/components/modals/common/TableAboutModal.tsx @@ -61,7 +61,7 @@ const TableAboutModal = ({ icon={icon} iconClassName={styles.listItemIcon} > - {title} + {title} {subtitle} ); diff --git a/src/components/modals/profileRating/ProfileRatingModal.module.scss b/src/components/modals/profileRating/ProfileRatingModal.module.scss index 3fa583751..dd66e486d 100644 --- a/src/components/modals/profileRating/ProfileRatingModal.module.scss +++ b/src/components/modals/profileRating/ProfileRatingModal.module.scss @@ -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 { width: 100%; padding-top: 0; - padding-bottom: 1rem; + padding-bottom: 0.9375rem; text-align: center; } .description { margin: 0; - padding-inline: 1rem; - line-height: 1.25; + padding-inline: 2rem; + line-height: 1.375rem; } .descriptionPreview { - margin-bottom: 1rem; - font-size: 0.875rem; - line-height: 1.25; + margin-bottom: 1.125rem; + font-size: 0.9375rem; + line-height: 1.375rem; color: var(--color-text-secondary); + &.negative { + color: var(--color-negative-progress); + } + p { margin-bottom: 0; - margin-inline: 1rem; + margin-inline: 2.25rem; } } @@ -36,23 +70,24 @@ } .title { - margin-bottom: 4.75rem; + margin-bottom: 0.5rem; font-size: 1.5rem; - font-weight: var(--font-weight-medium); + font-weight: var(--font-weight-semibold); line-height: 1.5rem; } .ratingProgress { margin: 0 auto; - margin-bottom: 0.75rem; + margin-top: 5.625rem; + margin-bottom: 1.5rem; &.withPreview { - margin-bottom: 0.5rem; + margin-bottom: 1rem; } } .subtitle { - line-height: 1.25; + line-height: 1.375rem; } .footer { @@ -66,9 +101,10 @@ display: inline-block; - margin-right: 0.25rem; - padding: 0.125rem 0.375rem; - border-radius: 0.375rem; + margin-right: 0.375rem; + padding-block: 0.0625rem; + padding-inline: 0.25rem; + border-radius: 0.3125rem; font-size: 0.6875rem; font-weight: var(--font-weight-medium); @@ -79,6 +115,12 @@ .understoodIcon { margin-right: 0.25rem; + font-size: 1.1875rem; +} + +.badgeAdded, +.badgeDeducted { + font-family: var(--font-family-condensed); } .badgeAdded { @@ -87,5 +129,6 @@ .badgeDeducted { color: var(--color-background); + opacity: 0.8; background-color: var(--color-text-secondary); } diff --git a/src/components/modals/profileRating/ProfileRatingModal.tsx b/src/components/modals/profileRating/ProfileRatingModal.tsx index 7d852a55c..d44469c38 100644 --- a/src/components/modals/profileRating/ProfileRatingModal.tsx +++ b/src/components/modals/profileRating/ProfileRatingModal.tsx @@ -111,7 +111,7 @@ const ProfileRatingModal = ({ return ( -
- {lang('TitleRating')} -
{renderPreviewDescription()} +
+ {lang('TitleRating')} +

{user?.id === currentUserId ? lang('RatingYourReflectsActivity') - : lang('RatingReflectsActivity', { name: getPeerTitle(lang, user) || userFallbackText })} + : lang('RatingReflectsActivity', { name: getPeerTitle(lang, user) || userFallbackText }, + { withMarkdown: true, withNodes: true })}

); @@ -192,7 +193,7 @@ const ProfileRatingModal = ({ lang, handleShowFuture, handleShowCurrent, isOpen]); const listItemData = [ - ['gift', lang('RatingGiftsFromTelegram'), ( + ['closed-gift', lang('RatingGiftsFromTelegram'), ( {renderBadge('added')} {lang('RatingGiftsFromTelegramDesc')} @@ -204,7 +205,7 @@ const ProfileRatingModal = ({ {lang('RatingGiftsAndPostsFromUsersDesc')} )], - ['refund', lang('RatingRefundsAndConversions'), ( + ['stars-refund', lang('RatingRefundsAndConversions'), ( {renderBadge('deducted')} {lang('RatingRefundsAndConversionsDesc')} @@ -217,7 +218,6 @@ const ProfileRatingModal = ({ return (