Star Transactions: Redesign (#6662)

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

@@ -300,7 +300,24 @@
 
   z-index: 1;
   top: 3.5rem;
+
   padding-inline: 0;
+  border-bottom: 0.0625rem solid var(--color-light-shadow);
+
+  box-shadow: none;
+
+  transition: box-shadow 0.2s;
+
+  &.pinned {
+    box-shadow: 0 0.125rem 0.125rem var(--color-light-shadow);
+  }
+
+  :global(.Tab) {
+    padding: 0.75rem 1.125rem;
+    :global(.platform) {
+      bottom: -0.75rem;
+    }
+  }
 }
 
 .disclaimer {

src/components/modals/stars/StarsBalanceModal.tsx

@@ -428,7 +428,7 @@ const StarsBalanceModal = ({
             </div>
             <TabList
               ref={tabsRef}
-              className={styles.tabs}
+              className={buildClassName(styles.tabs, areTabsPinned && styles.pinned)}
               tabClassName={styles.tab}
               activeTab={selectedTabIndex}
               tabs={transactionTabs}

src/components/modals/stars/subscription/StarsSubscriptionItem.module.scss

@@ -6,7 +6,7 @@
   display: flex;
   gap: 0.75rem;
 
-  padding: 0.5rem 0.75rem 0.5rem 0.5rem;
+  padding: 0.5rem 0.75rem 0.4375rem 0.5rem;
   border-radius: 0.5rem;
 
   transition: background-color 0.25s ease-out;
@@ -42,22 +42,27 @@
 
 .title, .description, .subtitle {
   margin-bottom: 0;
-  line-height: 1.25;
+  line-height: 1.25rem;
 }
 
 .title {
-  font-size: 0.9375rem;
+  font-size: 1rem;
+  font-weight: var(--font-weight-semibold);
+  line-height: 1.3125rem;
+}
+
+.subtitle,
+.description {
+  font-size: 0.875rem;
 }
 
 .subtitle {
   display: flex;
   gap: 0.125rem;
   align-items: center;
-  font-size: 0.8125rem;
 }
 
 .description, .statusPeriod, .statusEnded {
-  font-size: 0.8125rem;
   color: var(--color-text-secondary);
 }
 
@@ -67,7 +72,8 @@
 
 .preview {
   position: relative;
-  align-self: center;
+  width: 2.625rem;
+  height: 2.625rem;
 }
 
 .subscriptionStar {

src/components/modals/stars/subscription/StarsSubscriptionItem.tsx

@@ -21,6 +21,8 @@ import StarIcon from '../../../common/icons/StarIcon';
 
 import styles from './StarsSubscriptionItem.module.scss';
 
+const AVATAR_SIZE = 42;
+
 type OwnProps = {
   subscription: ApiStarsSubscription;
 };
@@ -54,7 +56,7 @@ const StarsSubscriptionItem = ({ subscription }: OwnProps) => {
   return (
     <div className={styles.root} onClick={handleClick}>
       <div className={styles.preview}>
-        <Avatar size="medium" peer={peer} />
+        <Avatar size={AVATAR_SIZE} peer={peer} />
         <StarIcon className={styles.subscriptionStar} type="gold" size="small" />
       </div>
       <div className={styles.info}>

src/components/modals/stars/transaction/StarsTransactionItem.module.scss

@@ -6,7 +6,7 @@
   display: flex;
   gap: 0.75rem;
 
-  padding: 0.5rem 0.75rem 0.5rem 0.5rem;
+  padding: 0.5rem 0.75rem 0.4375rem 0.5rem;
   border-radius: 0.5rem;
 
   transition: background-color 0.25s ease-out;
@@ -35,15 +35,18 @@
 
 .title, .description, .date {
   margin-bottom: 0;
-  line-height: 1.25;
+  line-height: 1.25rem;
 }
 
 .title {
-  font-size: 0.9375rem;
+  font-size: 1rem;
+  font-weight: var(--font-weight-semibold);
+  line-height: 1.3125rem;
 }
 
-.description, .date {
-  font-size: 0.8125rem;
+.date,
+.description {
+  font-size: 0.875rem;
 }
 
 .date {
@@ -60,7 +63,8 @@
 
 .preview {
   position: relative;
-  align-self: center;
+  width: 2.625rem;
+  height: 2.625rem;
 }
 
 .subscriptionStar {

src/components/modals/stars/transaction/StarsTransactionItem.tsx

@@ -41,6 +41,7 @@ type OwnProps = {
 };
 
 const GIFT_STICKER_SIZE = 36;
+const AVATAR_SIZE = 42;
 
 const StarsTransactionItem = ({ transaction, className }: OwnProps) => {
   const { openStarsTransactionModal } = getActions();
@@ -157,7 +158,7 @@ const StarsTransactionItem = ({ transaction, className }: OwnProps) => {
 
     return (
       <>
-        <Avatar size="medium" webPhoto={photo} peer={data.avatarPeer} />
+        <Avatar size={AVATAR_SIZE} webPhoto={photo} peer={data.avatarPeer} />
         {Boolean(subscriptionPeriod) && (
           <StarIcon className={styles.subscriptionStar} type="gold" size="small" />
         )}