diff --git a/src/components/common/PickerSelectedItem.scss b/src/components/common/PickerSelectedItem.scss index ed1c51a2b..5deb3bebe 100644 --- a/src/components/common/PickerSelectedItem.scss +++ b/src/components/common/PickerSelectedItem.scss @@ -16,10 +16,6 @@ max-width: calc(50% - 0.5rem); - &.standalone { - max-width: 100%; - } - &.minimized { padding-right: 0; } diff --git a/src/components/common/PickerSelectedItem.tsx b/src/components/common/PickerSelectedItem.tsx index 2cec85655..d58d82433 100644 --- a/src/components/common/PickerSelectedItem.tsx +++ b/src/components/common/PickerSelectedItem.tsx @@ -21,7 +21,6 @@ type OwnProps = { icon?: IconName; title?: string; isMinimized?: boolean; - isStandalone?: boolean; canClose?: boolean; forceShowSelf?: boolean; clickArg?: any; @@ -39,7 +38,6 @@ const PickerSelectedItem: FC = ({ icon, title, isMinimized, - isStandalone, canClose, clickArg, chat, @@ -83,7 +81,6 @@ const PickerSelectedItem: FC = ({ chat?.isForum && 'forum-avatar', isMinimized && 'minimized', canClose && 'closeable', - isStandalone && 'standalone', ); return ( diff --git a/src/components/common/PremiumProgress.module.scss b/src/components/common/PremiumProgress.module.scss index f148f236f..b7d73f79c 100644 --- a/src/components/common/PremiumProgress.module.scss +++ b/src/components/common/PremiumProgress.module.scss @@ -9,7 +9,7 @@ } .withBadge { - margin-top: 2rem; + margin-top: 3rem; } .badgeContainer { @@ -102,7 +102,7 @@ top: 0; left: 0; bottom: 0; - width: var(--percent); + width: max(var(--percent), 0.625rem); border-top-left-radius: 0.625rem; border-bottom-left-radius: 0.625rem; background-image: var(--premium-gradient); diff --git a/src/components/main/GameModal.scss b/src/components/main/GameModal.scss index c0fcb7fcc..10118a545 100644 --- a/src/components/main/GameModal.scss +++ b/src/components/main/GameModal.scss @@ -21,7 +21,7 @@ width: 100%; height: 100%; border: 0; - border-radius: var(--border-radius-default); + border-radius: var(--border-radius-modal); } @media (max-width: 600px) { diff --git a/src/components/modals/boost/BoostModal.module.scss b/src/components/modals/boost/BoostModal.module.scss index 5f313d5b3..48fca70a6 100644 --- a/src/components/modals/boost/BoostModal.module.scss +++ b/src/components/modals/boost/BoostModal.module.scss @@ -2,22 +2,31 @@ display: flex; flex-direction: column; gap: 1rem; - padding-top: 0 !important; min-height: 14rem; overflow: hidden; } +.modal { + :global(.modal-dialog) { + max-width: 22.5rem; + } + + :global(.modal-title) { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + + padding-left: 0.5rem; + } +} + .loading { margin-block: auto; } -.text-center { - text-align: center; - text-wrap: balance -} - .description { - padding: 0 0.75rem; + padding: 0.5rem; + line-height: 1.25; } .chip { @@ -25,7 +34,7 @@ } .replaceModal :global(.modal-dialog) { - max-width: 22rem; + max-width: 20rem; } .replaceModalContent { diff --git a/src/components/modals/boost/BoostModal.tsx b/src/components/modals/boost/BoostModal.tsx index 6245bafca..90dbcb7e5 100644 --- a/src/components/modals/boost/BoostModal.tsx +++ b/src/components/modals/boost/BoostModal.tsx @@ -6,7 +6,6 @@ import type { TabState } from '../../../global/types'; import { getChatTitle } from '../../../global/helpers'; import { selectChat } from '../../../global/selectors'; -import buildClassName from '../../../util/buildClassName'; import { formatDateInFuture } from '../../../util/dateFormat'; import { getServerTime } from '../../../util/serverTime'; import { getBoostProgressInfo } from '../../common/helpers/boostInfo'; @@ -18,7 +17,6 @@ import useLastCallback from '../../../hooks/useLastCallback'; import Avatar from '../../common/Avatar'; import Icon from '../../common/Icon'; -import PickerSelectedItem from '../../common/PickerSelectedItem'; import PremiumProgress from '../../common/PremiumProgress'; import Button from '../../ui/Button'; import ConfirmDialog from '../../ui/ConfirmDialog'; @@ -60,7 +58,6 @@ const BoostModal = ({ boostedChat, }: OwnProps & StateProps) => { const { - openChat, applyBoost, closeBoostModal, requestConfetti, @@ -129,7 +126,7 @@ const BoostModal = ({ const currentStoriesPerDay = lang('ChannelBoost.StoriesPerDay', level); const nextLevelStoriesPerDay = lang('ChannelBoost.StoriesPerDay', level + 1); - const modalTitle = hasBoost ? lang('ChannelBoost.YouBoostedOtherChannel') + const modalTitle = hasBoost ? lang('YouBoostedChannel2', chatTitle) : level === 0 ? lang('lng_boost_channel_title_first') : lang('lng_boost_channel_title_more'); let description: string | undefined; @@ -163,11 +160,6 @@ const BoostModal = ({ }; }, [chat, chatTitle, info, lang]); - const handleOpenChat = useLastCallback(() => { - openChat({ id: chat!.id }); - closeBoostModal(); - }); - const handleApplyBoost = useLastCallback(() => { closeReplaceModal(); applyBoost({ chatId: chat!.id }); @@ -175,6 +167,11 @@ const BoostModal = ({ }); const handleButtonClick = useLastCallback(() => { + if (isBoosted) { + closeBoostModal(); + return; + } + if (applyInfo?.type === 'ok') { handleApplyBoost(); } @@ -186,10 +183,10 @@ const BoostModal = ({ if (applyInfo?.type === 'wait') { openWaitDialog(); } + }); - if (isBoosted) { - closeBoostModal(); - } + const handleCloseClick = useLastCallback(() => { + closeBoostModal(); }); function renderContent() { @@ -199,14 +196,6 @@ const BoostModal = ({ return ( <> - {chat && ( - - )} -
+
{renderText(descriptionText, ['simple_markdown', 'emoji'])}
- +
+ + +
); } @@ -241,10 +227,9 @@ const BoostModal = ({ {renderContent()} {applyInfo?.type === 'replace' && boostedChatTitle && ( @@ -262,7 +247,7 @@ const BoostModal = ({
-
+
{renderText(lang('ChannelBoost.ReplaceBoost', [boostedChatTitle, chatTitle]), ['simple_markdown', 'emoji'])}
diff --git a/src/components/ui/Modal.scss b/src/components/ui/Modal.scss index be0add448..a7e0cbe04 100644 --- a/src/components/ui/Modal.scss +++ b/src/components/ui/Modal.scss @@ -74,7 +74,7 @@ margin: 2rem auto; background-color: var(--color-background); box-shadow: 0 0.25rem 0.5rem 0.125rem var(--color-default-shadow); - border-radius: var(--border-radius-default); + border-radius: var(--border-radius-modal); transform: translate3d(0, -1rem, 0); transition: transform 0.2s ease, opacity 0.2s ease; diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index e5c4a04e8..f974ae5dc 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -202,6 +202,7 @@ $color-message-story-mention-to: #74bcff; --vh: 1vh; + --border-radius-modal: 1rem; --border-radius-default: 0.75rem; --border-radius-default-small: 0.625rem; --border-radius-default-tiny: 0.375rem;