Boost Modal: Better design (#3913)

src/components/common/PickerSelectedItem.scss

@@ -16,10 +16,6 @@
 
   max-width: calc(50% - 0.5rem);
 
-  &.standalone {
-    max-width: 100%;
-  }
-
   &.minimized {
     padding-right: 0;
   }

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<OwnProps & StateProps> = ({
   icon,
   title,
   isMinimized,
-  isStandalone,
   canClose,
   clickArg,
   chat,
@@ -83,7 +81,6 @@ const PickerSelectedItem: FC<OwnProps & StateProps> = ({
     chat?.isForum && 'forum-avatar',
     isMinimized && 'minimized',
     canClose && 'closeable',
-    isStandalone && 'standalone',
   );
 
   return (

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);

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) {

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 {

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) {
+  const handleCloseClick = useLastCallback(() => {
-      closeBoostModal();
+    closeBoostModal();
-    }
   });
 
   function renderContent() {
@@ -199,14 +196,6 @@ const BoostModal = ({
 
     return (
       <>
-        {chat && (
-          <PickerSelectedItem
-            className={styles.chip}
-            peerId={chat.id}
-            isStandalone
-            onClick={handleOpenChat}
-          />
-        )}
         <PremiumProgress
           leftText={leftText}
           rightText={rightText}
@@ -214,25 +203,22 @@ const BoostModal = ({
           floatingBadgeText={value}
           floatingBadgeIcon="boost"
         />
-        <div className={buildClassName(styles.description, styles.textCenter)}>
+        <div className={styles.description}>
           {renderText(descriptionText, ['simple_markdown', 'emoji'])}
         </div>
-        <Button
+        <div className="dialog-buttons">
-          className={styles.button}
+          <Button isText className="confirm-dialog-button" disabled={!applyInfo} onClick={handleButtonClick}>
-          size="smaller"
+            {!isBoosted ? (
-          withPremiumGradient
+              <>
-          isShiny
+                <Icon name="boost" />
-          isLoading={!applyInfo}
+                {lang('ChannelBoost.BoostChannel')}
-          ripple
+              </>
-          onClick={handleButtonClick}
+            ) : lang('OK')}
-        >
+          </Button>
-          {!isBoosted ? (
+          <Button isText className="confirm-dialog-button" onClick={handleCloseClick}>
-            <>
+            {lang('Cancel')}
-              <Icon name="boost" />
+          </Button>
-              {lang('ChannelBoost.BoostChannel')}
+        </div>
-            </>
-          ) : lang('OK')}
-        </Button>
       </>
     );
   }
@@ -241,10 +227,9 @@ const BoostModal = ({
     <Modal
       isOpen={isOpen}
       title={title}
+      className={styles.modal}
       contentClassName={styles.content}
       onClose={closeBoostModal}
-      isSlim
-      hasCloseButton
     >
       {renderContent()}
       {applyInfo?.type === 'replace' && boostedChatTitle && (
@@ -262,7 +247,7 @@ const BoostModal = ({
             <Icon name="next" className={styles.arrow} />
             <Avatar peer={chat} size="large" />
           </div>
-          <div className={styles.textCenter}>
+          <div>
             {renderText(lang('ChannelBoost.ReplaceBoost', [boostedChatTitle, chatTitle]), ['simple_markdown', 'emoji'])}
           </div>
           <div className="dialog-buttons">

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;

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;