@redneckz/wildless-cms-uni-blocks 0.13.3 → 0.13.5

package/mobile/src/components/ApplicationForm/PhoneInputControl.tsx

@@ -13,6 +13,7 @@ export const PhoneInputControl = JSX<InputControlProps>(
         value={value}
         onChange={onChange}
         onBlur={onBlur}
+        placeholder="+7 (___) ___-__-__"
       />
       <div className="h-2">
         {error ? (

package/mobile/src/components/ApplicationForm/renderCreditDataOrganization.tsx

@@ -11,7 +11,7 @@ export const renderCreditDataOrganization = (field: FormFieldRegisterer<CreditFo
       <InputControl
         className="shrink-0 w-full"
         label="Наименование организации"
-        {...field('fullName')}
+        {...withValidator(field('fullName'), defaultValidator)}
       />
       <InputControl
         className="shrink-0 w-full"

package/mobile/src/components/ApplicationForm/renderCreditParameters.tsx

@@ -16,7 +16,7 @@ export const renderCreditParameters = (field: FormFieldRegisterer<CreditFormStat
     <div className="sm:w-1/2">
       <label>
         <Text size="text-m" font="font-light">
-          Сумма кредита, ₽
+          Сумма, ₽
         </Text>
       </label>
       <InputRange
@@ -29,7 +29,7 @@ export const renderCreditParameters = (field: FormFieldRegisterer<CreditFormStat
     <div className="sm:w-1/2">
       <label>
         <Text size="text-m" font="font-light">
-          Срок кредита, месяцев
+          Срок, месяцев
         </Text>
       </label>
       <InputRange

package/mobile/src/components/ApplicationForm/renderRegion.tsx

@@ -15,6 +15,7 @@ export const renderRegion = ({ regions, field }: RegionProps) => (
     className="w-full"
     label="Регион"
     placeholder="Выберите регион"
+    isSearch
     options={regions.map(({ code = '', name = '' }) => ({ key: code, text: name }))}
     {...withValidator(field('region'), defaultValidator)}
   />

package/mobile/src/components/ApplicationForm/renderRegionDepartment.tsx

@@ -18,6 +18,7 @@ export const renderRegionDepartment = ({ regions, branches, field }: RegionDepar
       <SelectControl
         label="Регион"
         placeholder="Выберите регион"
+        isSearch
         options={regions.map(({ code = '', name = '' }) => ({ key: code, text: name }))}
         {...withValidator(field('region'), defaultValidator)}
       />

package/mobile/src/components/Bonus/Bonus.tsx

@@ -3,8 +3,8 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Img } from '../../ui-kit/Img/Img';
-import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { Text } from '../../ui-kit/Text/Text';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { Headline } from '../Headline/Headline';
 import type { BonusContent, BonusCountDef, BonusImageDef } from './BonusContent';
 
@@ -12,7 +12,7 @@ export interface BonusProps extends BonusContent, UniBlockProps {}
 
 export const Bonus = JSX<BonusProps>(
   ({ className = '', title, description, bonusItems = [], ...rest }) => (
-    <BlockWrapper className={className} defaultPadding="p-default" {...rest}>
+    <BlockWrapper className={className} defaultPadding="p-6xl" {...rest}>
       <div className="container">
         <Headline
           className="mb-xl"
@@ -26,20 +26,23 @@ export const Bonus = JSX<BonusProps>(
             ? bonusItems.map((_, i) => (
                 <div
                   key={String(i)}
-                  className="space-y-xs flex-grow w-full sm:w-[49%] border border-gray p-m"
+                  className="space-y-xs flex flex-col grow w-full sm:w-[49%] border border-gray p-m"
                 >
-                  {_?.title ? (
-                    <div>
-                      <Text size="text-h4">{_.title}</Text>
-                    </div>
-                  ) : null}
-                  {_?.description ? (
-                    <Paragraph size="text-xl" font="font-light">
-                      {_.description}
-                    </Paragraph>
-                  ) : null}
-
-                  <div className="flex justify-between items-end">
+                  <div className="grow">
+                    {_?.title ? (
+                      <div className="mb-xs last:mb-0">
+                        <Text size="text-h4">{_.title}</Text>
+                      </div>
+                    ) : null}
+                    {_?.description ? (
+                      <div className="mb-text last:mb-0">
+                        <Paragraph size="text-xl" font="font-light">
+                          {_.description}
+                        </Paragraph>
+                      </div>
+                    ) : null}
+                  </div>
+                  <div className="flex justify-center sm:justify-between sm:items-end">
                     <div className="hidden sm:block">{renderButtonsSection(_?.buttons)}</div>
                     {_.bonusItemContent?.bonusType
                       ? renderBonusItemContent(_.bonusItemContent)
@@ -56,18 +59,19 @@ export const Bonus = JSX<BonusProps>(
 
 const renderBonusItemContent = (bonusItemContent: BonusImageDef | BonusCountDef) =>
   bonusItemContent.bonusType === 'count'
-    ? renderBonusCount(bonusItemContent)
+    ? renderBonusCount(bonusItemContent as BonusCountDef)
     : renderBonusImage(bonusItemContent as BonusImageDef);
 
 const renderBonusCount = (_: BonusCountDef) => (
-  <div className="w-full pt-default mt-s flex items-end">
+  <div className="w-full pt-default mt-s flex justify-center sm:justify-end items-end">
     {_.bonusCount ? (
-      <span className="shrink-0 w-1/2 sm:w-auto font-mohave text-title-extra -tracking-[5px] bg-clip-text text-transparent bg-green-to-yellow mt-lg">
-        {_.bonusCount}
-      </span>
+      // -mb-10 добавлен для выравнивания bonusCount относительно bonusName, тк шрифт font-mohave неправильно высчитывает line-height
+      <div className="shrink-0 -mb-10">
+        <span className="font-mohave text-title-extra gradient-color-text">{_.bonusCount}</span>
+      </div>
     ) : null}
     {_.bonusName ? (
-      <div className="w-1/2 sm:w-auto bg-clip-text text-transparent bg-green-to-yellow">
+      <div className="shrink-0 gradient-color-text">
         <Text size="text-h2">{_.bonusName}</Text>
       </div>
     ) : null}

package/mobile/src/components/BonusBenefitsBlock/BonusBenefitsBlock.tsx

@@ -19,8 +19,7 @@ export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
   }) => (
     <BlockWrapper className={className} defaultPadding="p-6xl" {...rest}>
       <Headline
-        className="mb-m sm:mb-3xl"
-        isEmbedded={true}
+        className="mb-4xl sm:mb-3xl"
         title={title}
         description={subtitle}
         headlineVersion="M"

package/mobile/src/components/Calculator/BusinessDepositCalculatorForm.tsx

@@ -71,6 +71,7 @@ export const BusinessDepositCalculatorForm = JSX<BusinessDepositCalculatorProp>(
           {renderDepositResults(finalSum, income)}
           {renderButtonsSection(buttons, { isVertical: true })}
           {renderFootnote(footnote)}
+          {renderFootnote(bottomFootnote)}
         </div>
       </section>
     );

package/mobile/src/components/CardTransfer/CardTransfer.example.json

@@ -8,6 +8,7 @@
       "text": "Далее",
       "target": "_blank",
       "version": "primary"
-    }
+    },
+    "formType": "private"
   }
 }

package/mobile/src/components/CardTransfer/CardTransfer.tsx

@@ -14,10 +14,14 @@ const DEFAULT_TITLE = 'Укажите сумму перевода';
 const DEFAULT_LABEL = 'Сумма перевода';
 const DEFAULT_PLACEHOLDER = '1500';
 
-const FORM_URL = 'https://www.rshb.ru/p2p/';
-const AMOUNT_KEY = 'amount';
+const FORM_URL_MAP = {
+  private: 'https://old.rshb.ru/p2p/',
+  business: 'https://old.rshb.ru/smallbusiness/p2p/',
+};
+
 const INITIAL_FORM_STATE = {
-  [AMOUNT_KEY]: 1500,
+  amount: 1500,
+  _amount: 1500,
 };
 
 export interface CardTransferProps extends CardTransferContent, UniBlockProps {}
@@ -29,9 +33,10 @@ export const CardTransfer = JSX<CardTransferProps>(
     label = DEFAULT_LABEL,
     placeholder = DEFAULT_PLACEHOLDER,
     button,
+    formType = 'private',
     ...rest
   }) => {
-    const [{ amount }, { field }] = useForm(INITIAL_FORM_STATE);
+    const [{ amount, _amount }, { field }] = useForm(INITIAL_FORM_STATE);
 
     const isDisabled = amount <= 0;
 
@@ -54,14 +59,15 @@ export const CardTransfer = JSX<CardTransferProps>(
             title={title}
           />
         ) : null}
-        <form className="w-full xl:max-w-[468px]" method="POST" action={FORM_URL}>
+        <form className="w-full xl:max-w-[468px]" method="POST" action={FORM_URL_MAP[formType]}>
           <CurrencyInput
-            name={AMOUNT_KEY}
+            name="_amount"
             valid={!isDisabled}
             placeholder={placeholder}
             label={label}
-            {...field(AMOUNT_KEY, { parse: Number, format: String })}
+            {...field('_amount', { parse: Number, format: String })}
           />
+          <input type="hidden" name="amount" value={_amount} />
           {button?.text ? (
             <button
               type="submit"

package/mobile/src/components/CardTransfer/CardTransferContent.ts

@@ -11,4 +11,9 @@ export type CardTransferContent = UniBlockContent &
     /** @title Плейсхолдер */
     placeholder?: string;
     button?: ButtonContent;
+    /**
+     * @title Тип формы
+     * @enumNames ['Частные клиенты', 'Бизнес-клиенты']
+     */
+    formType?: 'private' | 'business';
   };

package/mobile/src/components/Carousel/Carousel.example.json

@@ -4,5 +4,6 @@
   "arrowsPadded": true,
   "isCycle": false,
   "isPadding": true,
-  "isAlignCenter": false
+  "isAlignCenter": false,
+  "cardSize": "normal"
 }

package/mobile/src/components/Carousel/Carousel.tsx

@@ -1,18 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { renderBlock } from '../../BlockRenderer/renderBlock';
-import { renderChildren } from '../../BlockRenderer/renderChildren';
 import { useCarouselControls } from '../../hooks/useCarouselControls';
+import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { SwipeListContainer } from '../../ui-kit/SwipeListControl/SwipeListContainer';
 import { SwipeListControlDots } from '../../ui-kit/SwipeListControl/SwipeListControlDots';
 import { useSwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListScroll';
 import { style } from '../../utils/style';
+import type { CarouselContent } from './CarouselContent';
 import { CarouselScrollButtons } from './CarouselScrollButtons';
 import { ITEMS_GAP } from './itemsGap';
-import type { CarouselContent } from './CarouselContent';
-import type { BlockDef } from '../../model/ContentPageDef';
-import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
-import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
+import { renderCarouselCards } from './renderCarouselCards';
 
 export interface CarouselProps extends CarouselContent, UniBlockProps {
   itemCount?: number;
@@ -29,6 +26,7 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
     showDots,
     arrowsPadded = true,
     isGap = true,
+    cardSize = 'normal',
     ...rest
   }) => {
     const { blocks: childBlocks = [] } = rest.block || {};
@@ -58,20 +56,7 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
             gap={isGap ? ITEMS_GAP : undefined}
             onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
           >
-            {renderChildren({
-              ...rest,
-              renderProps: (block: BlockDef, options: BlockRendererOptions, blockIndex) =>
-                renderBlock(block, options, {
-                  className: style(
-                    'h-full min-w-80 sm:min-w-96',
-                    noCardBorder
-                      ? ''
-                      : 'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider',
-                  ),
-                  blockIndex,
-                  isActive: activeIndex === blockIndex,
-                }),
-            })}
+            {renderCarouselCards({ noCardBorder, activeIndex, cardSize, ...rest })}
           </SwipeListContainer>
           <CarouselScrollButtons
             scroll={scroll}
@@ -109,3 +94,10 @@ Carousel.childrenTypes = [
   'CarouselInvestmentCard',
   'CarouselEventCard',
 ];
+
+Carousel.childSchema = () => ({
+  isHighlighting: {
+    title: 'Выделить карточку',
+    type: 'boolean',
+  },
+});

package/mobile/src/components/Carousel/CarouselContent.ts

@@ -1,5 +1,11 @@
 import type { UniBlockContent } from '../../model/JSXBlock';
 
+/**
+ * @title Размер карточек
+ * @enumNames ["Нормальный", "Большой"]
+ */
+export type CardSizeMode = 'normal' | 'big';
+
 /**
  * @title Карусель
  */
@@ -17,4 +23,5 @@ export type CarouselContent = UniBlockContent & {
   isGap?: boolean;
   /** @title Не показывать контур на карточках */
   noCardBorder?: boolean;
+  cardSize?: CardSizeMode;
 };

package/mobile/src/components/Carousel/renderCardHighlight.tsx

@@ -0,0 +1,22 @@
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { style } from '../../utils/style';
+
+interface CardHighlightProps {
+  className?: string;
+  text?: string;
+}
+
+export const renderCardHighlight = ({ className, text = 'ХИТ' }: CardHighlightProps = {}) => (
+  <div
+    className={style(
+      'w-14 h-14 bg-white flex flex-col items-center justify-center rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]',
+      className,
+    )}
+  >
+    <Icon iconVersion="black" name="HeartIcon" width="24" height="24" />
+    <Paragraph size="text-s" font="font-normal" align="text-center" color="text-primary-text">
+      {text}
+    </Paragraph>
+  </div>
+);

package/mobile/src/components/Carousel/renderCarouselCards.tsx

@@ -0,0 +1,74 @@
+import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
+import { renderBlock } from '../../BlockRenderer/renderBlock';
+import { renderChildren } from '../../BlockRenderer/renderChildren';
+import type { BlockDef } from '../../model/ContentPageDef';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { style } from '../../utils/style';
+import { renderCardHighlight } from './renderCardHighlight';
+import type { CardSizeMode } from './CarouselContent';
+
+const cardBaseStyle = 'relative h-full';
+
+const CARD_SIZE_MAP: Record<CardSizeMode, string> = {
+  normal: 'sm:min-w-96',
+  big: 'sm:min-w-[515px]',
+};
+
+export const renderCarouselCards = ({
+  noCardBorder,
+  activeIndex,
+  cardSize = 'normal',
+  ...rest
+}: UniBlockProps & { noCardBorder?: boolean; activeIndex?: number; cardSize?: CardSizeMode }) => {
+  const { blocks: childBlocks } = rest.block || {};
+  const someCardsHighlighted = childBlocks?.some(isCardHighlighted);
+
+  return renderChildren({
+    ...rest,
+    renderProps: (block: BlockDef, options: BlockRendererOptions, blockIndex) => (
+      <div className={cardWrapperStyle(block, { someCardsHighlighted })}>
+        {renderBlock(block, options, {
+          className: cardStyle(block, {
+            someCardsHighlighted,
+            showBorder: !noCardBorder,
+            cardSize,
+          }),
+          blockIndex,
+          isActive: blockIndex === activeIndex,
+        })}
+        {isCardHighlighted(block)
+          ? renderCardHighlight({ className: 'absolute top-0 -right-4 z-40' })
+          : null}
+      </div>
+    ),
+  });
+};
+
+const cardWrapperStyle = (
+  _: BlockDef | undefined,
+  { someCardsHighlighted }: { someCardsHighlighted?: boolean },
+) =>
+  style(
+    cardBaseStyle,
+    someCardsHighlighted && (isCardHighlighted(_) ? 'pt-3xl' : 'pt-3xl sm:pt-16'),
+  );
+
+const cardStyle = (
+  _: BlockDef | undefined,
+  {
+    someCardsHighlighted,
+    showBorder,
+    cardSize = 'normal',
+  }: { someCardsHighlighted?: boolean; showBorder?: boolean; cardSize?: CardSizeMode },
+) =>
+  style(
+    cardBaseStyle,
+    'min-w-80',
+    CARD_SIZE_MAP[cardSize], // TODO fix для RecommendationCard
+    someCardsHighlighted && (isCardHighlighted(_) ? 'pt-3xl sm:pt-16' : 'pt-3xl'),
+    showBorder &&
+      'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider',
+  );
+
+const isCardHighlighted = (_: BlockDef | undefined) =>
+  _?.content && 'isHighlighting' in _.content && _.content.isHighlighting;

package/mobile/src/components/Carousel/visibleItemCountStyle.tsx

@@ -0,0 +1 @@
+export const visibleItemCountStyle = 'auto';

package/mobile/src/components/CarouselCard/CarouselCard.tsx

@@ -23,7 +23,9 @@ export const CarouselCard = JSX<CarouselCardProps>(
         <div className={style(layerStyle, 'top-9 right-12 bg-green-dark')} />
         <div className={style(layerStyle, 'top-6 right-8 bg-green')} />
         <div className={style(layerStyle, 'top-3 right-4 bg-green-light')} />
-        <div className={style(layerBaseStyle, 'relative p-5xl bg-white border-green-light')}>
+        <div
+          className={style(layerBaseStyle, 'relative p-xl sm:p-5xl bg-white border-green-light')}
+        >
           <Headline
             title={title}
             description={description}
@@ -32,7 +34,7 @@ export const CarouselCard = JSX<CarouselCardProps>(
             isEmbedded={true}
           />
           {renderButtonsSection([button], {
-            className: 'mt-6xl sm:justify-center',
+            className: 'mt-m sm:mt-6xl sm:justify-center',
             isVertical: true,
           })}
         </div>

package/mobile/src/components/CarouselLinks/CarouselLinks.tsx

@@ -53,16 +53,16 @@ const renderLinks = (links: LinkProps[], maxLinksCount: number) => {
 
   return (
     <Carousel
-      className="@container-normal sm:w-2/3 w-full p-0 sm:p-2xl"
+      className="@container-normal sm:w-2/3 w-full p-0 sm:p-xs"
       version="secondary"
       itemCount={itemCount}
       arrowsPadded={false}
-      showDots={true}
+      showDots={false}
     >
       {new Array(itemCount).fill(null).map((_, groupIndex) => (
         <div
           key={String(groupIndex)}
-          className={style('flex flex-wrap self-start sm:w-[672px] w-full sm:mx-5xl')}
+          className={style('flex flex-wrap self-start w-full sm:w-[672px]')}
         >
           {links
             .slice(groupIndex * maxLinksCount, (groupIndex + 1) * maxLinksCount)

package/mobile/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -1,6 +1,4 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../model/JSXBlock';
-import type { Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
 import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
@@ -9,6 +7,8 @@ import { style } from '../../utils/style';
 import { SocialMedia } from '../Footer/SocialMedia';
 import { Headline } from '../Headline/Headline';
 import type { CarouselRecommendationCardContent } from './CarouselRecommendationCardContent';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { Picture } from '../../model/Picture';
 
 export interface RecommendationCardProps extends CarouselRecommendationCardContent, UniBlockProps {}
 
@@ -27,20 +27,20 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
   }) => {
     return (
       <BlockWrapper
-        className={style('relative group-data-gray:bg-main-divider/50 space-y-m', className)}
-        defaultPadding="p-6xl"
+        className={style('relative group-data-gray:bg-main-divider/50', className)}
+        defaultPadding="p-3xl"
         {...rest}
       >
-        <LinkWrapper href={href} target={target}>
+        <LinkWrapper href={href} target={target} className={'space-y-lg'}>
           <Headline
             title={title}
             description={description}
-            headlineVersion="S"
+            headlineVersion="XS"
             isEmbedded={true}
             align={align}
           />
           {items.length ? (
-            <List className="flex flex-col gap-xs" items={items} listItemSize="S" />
+            <List className="flex flex-col gap-xs" items={items} listItemSize="XS" />
           ) : null}
           {renderIcon(icon)}
           {socialMedia.length ? <SocialMedia media={socialMedia} /> : null}

package/mobile/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -10,10 +10,8 @@ import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
-import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { style } from '../../utils/style';
 import type { CarouselTariffsCardContent } from './CarouselTariffsCardContent';
-import { getPaddingStyle } from './getPaddingStyle';
 import { renderCardInfo } from './renderCardInfo';
 
 export interface CarouselTariffsCardProps extends CarouselTariffsCardContent, UniBlockProps {}
@@ -21,27 +19,13 @@ export interface CarouselTariffsCardProps extends CarouselTariffsCardContent, Un
 const VISIBLE_CELLS_COUNT = 1;
 
 export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
-  ({
-    className = '',
-    title,
-    align = 'text-center',
-    icon,
-    isHighlighting = false,
-    button,
-    cardCells = [],
-    ...rest
-  }) => {
+  ({ className = '', title, align = 'text-center', icon, button, cardCells = [], ...rest }) => {
     const cellsNode = cardCells.map(renderCardInfo);
     const visibleCells = cellsNode.slice(0, VISIBLE_CELLS_COUNT);
     const hiddenCells = cellsNode.slice(VISIBLE_CELLS_COUNT);
 
     return (
-      <BlockWrapper
-        className={style('relative flex flex-col', className)}
-        defaultPadding={getPaddingStyle(isHighlighting)}
-        {...rest}
-      >
-        {isHighlighting ? renderHitIcon() : null}
+      <BlockWrapper className={style('flex flex-col', className)} defaultPadding="p-3xl" {...rest}>
         {renderIconBlock(icon)}
         {title ? (
           <Heading className={style('pt-xs', align)} headingType="h5" title={title} />
@@ -64,9 +48,7 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
 );
 
 const renderIconBlock = (icon?: Picture) => (
-  <div className="basis-full self-center">
-    {icon?.src || icon?.icon ? <Img image={icon} /> : null}
-  </div>
+  <div className="self-center">{icon?.src || icon?.icon ? <Img image={icon} /> : null}</div>
 );
 
 const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode => (
@@ -83,12 +65,3 @@ const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode =>
     />
   </button>
 );
-
-const renderHitIcon = (): VNode => (
-  <div className="absolute -top-6 -right-4 h-14 w-14 bg-white flex flex-col items-center justify-center rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]">
-    <Icon iconVersion="black" name="HeartIcon" width="24" height="24" />
-    <Paragraph size="text-s" font="font-normal" align="text-center" color="text-primary-text">
-      ХИТ
-    </Paragraph>
-  </div>
-);

package/mobile/src/components/Footer/buttonSizeStyles.ts

@@ -1,6 +1,6 @@
 import { ButtonSize } from './MediaButton';
 
 export const buttonSizeStyles: { [key in ButtonSize]: string } = {
-  default: 'w-24 h-14',
+  default: 'w-14 h-14',
   stretched: 'flex-1 h-14',
 };

package/mobile/src/components/Headline/headlineVersionStyles.ts

@@ -43,7 +43,7 @@ export const headlineVersionStyles: Record<
   },
   XS: {
     title: { headingType: 'h5', as: 'h2' },
-    descriptionSize: 'text-l',
+    descriptionSize: 'text-m',
     descriptionWeight: 'font-light',
     descriptionStyle: 'mt-xs',
   },

package/mobile/src/components/MobileAppTile/MobileAppTile.tsx

@@ -3,13 +3,13 @@ import { AlignText } from '../../model/AlignText';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BaseTile } from '../../ui-kit/BaseTile/BaseTile';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { style } from '../../utils/style';
 import type { MobileAppTileContent } from './MobileAppTileContent';
 import { renderDescription } from './renderDescription';
 import { renderList } from './renderList';
+import { buttonsConditionStyle } from './buttonsConditionStyle';
 
 export interface MobileAppTileProps extends MobileAppTileContent, UniBlockProps {}
 
@@ -51,7 +51,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
             ) : null
           }
           rightImage={image?.src ? <Img className="hidden lg:block" image={image} /> : null}
-          buttons={renderButtonsSection(buttons, { isVertical: buttons.length > 4 })}
+          buttons={buttonsConditionStyle(buttons)}
         >
           {renderDescription(description)}
           <div className="flex flex-1 flex-wrap gap-m items-center">

package/mobile/src/components/MobileAppTile/buttonsConditionStyle.tsx

@@ -0,0 +1,12 @@
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import { style } from '../../utils/style';
+
+export const buttonsConditionStyle = (buttons: ButtonProps[]) => {
+  const buttonsLengthMoreThanTwo = buttons.length > 2;
+
+  return renderButtonsSection(buttons, {
+    className: style(buttonsLengthMoreThanTwo ? 'w-full' : 'flex-nowrap'),
+    isVertical: buttonsLengthMoreThanTwo,
+  });
+};