Telegram Stars: Fix bugs in Stars Gifting Modal (#5046)

src/components/main/premium/StarsGiftModal.module.scss

@@ -9,7 +9,6 @@
 }
 
 .root :global(.modal-dialog) {
-  height: min(calc(55vh + 41px + 193px), 90vh);
   max-width: 26.25rem;
   overflow: hidden;
 }

src/components/main/premium/StarsGiftModal.tsx

@@ -130,18 +130,7 @@ const StarsGiftModal: FC<OwnProps & StateProps> = ({
     return user ? oldLang('GiftStarsTitle') : oldLang('Star.List.GetStars');
   }
 
-  function renderStarOptionList() {
-    return (
-      <StarTopupOptionList
-        options={starsGiftOptions}
-        onClick={handleClick}
-      />
-    );
-  }
-
   const bottomText = useMemo(() => {
-    if (!isOpen) return undefined;
-
     const text = oldLang('lng_credits_summary_options_about');
     const parts = text.split('{link}');
     return [
@@ -149,7 +138,7 @@ const StarsGiftModal: FC<OwnProps & StateProps> = ({
       <SafeLink url={oldLang('StarsTOSLink')} text={oldLang('lng_credits_summary_options_about_link')} />,
       parts[1],
     ];
-  }, [isOpen, oldLang]);
+  }, [oldLang]);
 
   return (
     <Modal
@@ -201,7 +190,12 @@ const StarsGiftModal: FC<OwnProps & StateProps> = ({
           ) : oldLang('Stars.Purchase.GetStarsInfo')}
         </p>
         <div className={styles.section}>
-          {renderStarOptionList()}
+          {starsGiftOptions && (
+            <StarTopupOptionList
+              options={starsGiftOptions}
+              onClick={handleClick}
+            />
+          )}
           <div className={styles.secondaryInfo}>
             {bottomText}
           </div>

src/components/modals/stars/StarTopupOptionList.tsx

@@ -53,9 +53,7 @@ const StarTopupOptionList: FC<OwnProps> = ({
   }, [isActive]);
 
   const [renderingOptions, canExtend] = useMemo(() => {
-    if (!options) {
+    if (!options) return [undefined, false];
-      return [undefined, false];
-    }
 
     const maxOption = options.reduce((max, option) => (
       max.stars > option.stars ? max : option

src/components/modals/stars/StarsBalanceModal.module.scss

@@ -38,8 +38,9 @@
   position: relative;
 
   @include mixins.adapt-padding-to-scrollbar(0.5rem);
-
   @include mixins.side-panel-section;
+
+  border-bottom: 0;
 }
 
 .sectionTitle {
@@ -148,7 +149,7 @@
 
 .starButton {
   grid-column: 1/-1;
-  gap: 1rem;
+  gap: 0.5rem;
   margin-top: 0.5rem;
 }
 
@@ -218,6 +219,7 @@
   --border-radius-messages-small: 0;
 
   top: 3.5rem;
+  padding-inline: 0;
 }
 
 .disclaimer {

src/components/modals/stars/StarsBalanceModal.tsx

@@ -253,6 +253,7 @@ const StarsBalanceModal = ({
             </div>
             <TabList
               className={styles.tabs}
+              tabClassName={styles.tab}
               activeTab={selectedTabIndex}
               tabs={TRANSACTION_TABS}
               onSwitchTab={setSelectedTabIndex}

src/components/payment/PaymentModal.scss

@@ -56,7 +56,6 @@ $modalHeaderAndFooterHeight: 8.375rem;
     overflow: auto;
     overflow-x: hidden;
     width: 100%;
-    height: 100%;
     position: relative;
   }
 
@@ -84,6 +83,11 @@ $modalHeaderAndFooterHeight: 8.375rem;
     padding: 0;
     overflow: hidden;
   }
+
+  .ListItem-main-icon {
+    margin-inline-end: 1.125rem !important;
+    margin-inline-start: 0.375rem;
+  }
 }
 
 @media screen and (max-device-width: 640px) and (max-height: 640px) and (orientation: landscape) {

src/components/ui/TabList.tsx

@@ -30,6 +30,7 @@ type OwnProps = {
   areFolders?: boolean;
   activeTab: number;
   className?: string;
+  tabClassName?: string;
   onSwitchTab: (index: number) => void;
   contextRootElementSelector?: string;
 };
@@ -40,7 +41,7 @@ const SCROLL_DURATION = IS_IOS ? 450 : IS_ANDROID ? 400 : 300;
 
 const TabList: FC<OwnProps> = ({
   tabs, areFolders, activeTab, onSwitchTab,
-  contextRootElementSelector, className,
+  contextRootElementSelector, className, tabClassName,
 }) => {
   // eslint-disable-next-line no-null/no-null
   const containerRef = useRef<HTMLDivElement>(null);
@@ -94,6 +95,7 @@ const TabList: FC<OwnProps> = ({
           clickArg={i}
           contextActions={tab.contextActions}
           contextRootElementSelector={contextRootElementSelector}
+          className={tabClassName}
         />
       ))}
     </div>