@redneckz/wildless-cms-uni-blocks 0.13.2 → 0.13.4

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

@@ -0,0 +1,58 @@
+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';
+
+const cardBaseStyle = 'relative h-full';
+
+export const renderCarouselCards = ({
+  noCardBorder,
+  activeIndex,
+  ...rest
+}: UniBlockProps & { noCardBorder?: boolean; activeIndex?: number }) => {
+  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 }),
+          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 }: { someCardsHighlighted?: boolean; showBorder?: boolean },
+) =>
+  style(
+    cardBaseStyle,
+    'min-w-80 sm:min-w-96',
+    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/CarouselBankHistoryCard/CarouselBankHistoryCard.tsx

@@ -15,7 +15,7 @@ export const CarouselBankHistoryCard = JSX<CarouselBankHistoryCardProps>(
         description={description}
         align="text-left"
         className="text-primary-text"
-        isPadding={false}
+        isEmbedded={true}
       />
     </BlockWrapper>
   ),

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

@@ -14,21 +14,27 @@ const layerStyle = style(layerBaseStyle, 'absolute hidden sm:block border-transp
 
 export const CarouselCard = JSX<CarouselCardProps>(
   ({ className, title, description, button, ...rest }) => (
-    <BlockWrapper className={style('sm:pl-12 sm:pb-9', className)} defaultPadding="p-0" {...rest}>
+    <BlockWrapper
+      className={style('sm:pl-6xl sm:pb-4xl', className)}
+      defaultPadding="p-0"
+      {...rest}
+    >
       <div className="relative">
         <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-10 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}
             headlineVersion={titleSize}
             align="text-left"
-            isPadding={false}
+            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/CarouselCatalogCard/CarouselCatalogCard.tsx

@@ -28,7 +28,7 @@ export const CarouselCatalogCard = JSX<CarouselCatalogCardProps>(
         title={title}
         description={description}
         headlineVersion="XS"
-        isPadding={false}
+        isEmbedded={true}
         align="text-left"
         className="mb-m"
       />

package/mobile/src/components/CarouselInvestmentCard/CarouselInvestmentCard.tsx

@@ -14,11 +14,9 @@ import type {
 
 export interface CarouselInvestmentCardProps extends CarouselInvestmentCardContent, UniBlockProps {}
 
-const getItemListFontSize = (colValue?: number) => (colValue === 1 ? 'text-h6' : 'text-l');
-
 const cardColumnsModeStyleMap: Record<CardColumnsMode, string> = {
-  1: 'flex-col',
-  2: 'gap-x-10 flex-wrap',
+  1: 'grid-cols-1',
+  2: 'grid-cols-2',
 };
 
 export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
@@ -43,7 +41,7 @@ export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
         }
         backImage={image?.src ? <Img image={image} /> : null}
       >
-        <div className="flex justify-between mb-4">
+        <div className="flex justify-between mb-m">
           {description ? (
             <div className="w-1/3">
               <Text size="text-h6">{description}</Text>
@@ -57,12 +55,9 @@ export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
         </div>
         {cardsList.length ? (
           <ul
-            className={style(
-              'list-none m-0 p-0 flex gap-y-2',
-              cardColumnsModeStyleMap[columnsMode],
-            )}
+            className={style('list-none m-0 p-0 grid gap-xs', cardColumnsModeStyleMap[columnsMode])}
           >
-            {renderCardList(cardsList, columnsMode)}
+            {renderCardList(cardsList)}
           </ul>
         ) : null}
       </BaseTile>
@@ -70,17 +65,10 @@ export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
   ),
 );
 
-const renderCardList = (cardsList: CardsListItem[], columnsMode: number) => {
-  const CARDS_COUNT_MAP = [4, 9];
-  const visibleCardsList = cardsList.slice(0, CARDS_COUNT_MAP[columnsMode - 1]);
-
-  return visibleCardsList.map((item, i) => (
-    <li key={String(i)} className={columnsMode === 2 ? 'basis-[calc(50%-20px)]' : ''}>
-      {item?.parameter ? (
-        <div className="pr-2.5">
-          <Text size={getItemListFontSize(columnsMode)}>{item.parameter}</Text>
-        </div>
-      ) : null}
+const renderCardList = (cardsList: CardsListItem[]) =>
+  cardsList.map((item, i) => (
+    <li key={String(i)}>
+      {item?.parameter ? <Text size="text-h6">{item.parameter}</Text> : null}
       {item?.parameterDescription ? (
         <Text size="text-m" font="font-light" color="text-secondary-text">
           {item.parameterDescription}
@@ -88,4 +76,3 @@ const renderCardList = (cardsList: CardsListItem[], columnsMode: number) => {
       ) : null}
     </li>
   ));
-};

package/mobile/src/{ui-kit/LinkButton/LinkButton.tsx → components/CarouselLinks/CarouselLinkButton.tsx}

@@ -1,21 +1,20 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
 import type { LinkProps } from '../../model/LinkProps';
-import { Img } from '../Img/Img';
+import { Img } from '../../ui-kit/Img/Img';
 import { style } from '../../utils/style';
 
 const LINK_CLASS_NAME = `absolute border border-primary-main px-xl py-lg
   text-l font-light bg-white text-primary-text flex
   justify-between items-center group-hover/link:text-primary-main z-10`;
 
-const LINK_BORDER_CLASS_NAME =
-  'bg-transparent border-white border h-[70px] absolute w-[316px] top-0';
+const LINK_BORDER_CLASS_NAME = 'bg-transparent border-white border h-[70px] absolute w-80 top-0';
 
-export type LinkButtonProps = LinkProps & {
+export type CarouselLinkButtonProps = LinkProps & {
   className?: string;
 };
 
-export const LinkButton = JSX<LinkButtonProps>(
+export const CarouselLinkButton = JSX<CarouselLinkButtonProps>(
   ({ text, href = '', target = '', className = '' }) => {
     const link = useLink();
     const adjustedProps = link({ href, target });

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

@@ -2,11 +2,11 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import type { LinkProps } from '../../model/LinkProps';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
+import { style } from '../../utils/style';
 import { Carousel } from '../Carousel/Carousel';
 import { Headline } from '../Headline/Headline';
+import { CarouselLinkButton } from './CarouselLinkButton';
 import type { CarouselLinksContent } from './CarouselLinksContent';
-import { style } from '../../utils/style';
 
 export interface CarouselLinksProps extends CarouselLinksContent, UniBlockProps {
   maxLinksCount?: number;
@@ -28,7 +28,7 @@ export const CarouselLinks = JSX<CarouselLinksProps>(
     >
       <div className="mr-xl flex-auto">
         <Headline
-          isPadding={false}
+          isEmbedded={true}
           title={title}
           description={description}
           as="h1"
@@ -39,7 +39,7 @@ export const CarouselLinks = JSX<CarouselLinksProps>(
             className="pt-m"
             description={additionalDescription}
             align="text-left"
-            isPadding={false}
+            isEmbedded={true}
           />
         ) : null}
       </div>
@@ -53,21 +53,21 @@ const renderLinks = (links: LinkProps[], maxLinksCount: number) => {
 
   return (
     <Carousel
-      className="sm:w-2/3 w-full p-0 sm:p-2xl"
+      className="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)
             .map((link, index) => (
-              <LinkButton key={String(index)} className="sm:m-2xs" {...link} />
+              <CarouselLinkButton key={String(index)} className="sm:m-2xs" {...link} />
             ))}
         </div>
       ))}

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

@@ -27,24 +27,23 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
   }) => {
     return (
       <BlockWrapper
-        className={style('relative group-data-gray:bg-main-divider/50', className)}
+        className={style('relative group-data-gray:bg-main-divider/50 space-y-m', className)}
         defaultPadding="p-6xl"
         {...rest}
       >
         <LinkWrapper href={href} target={target}>
           <Headline
-            className="mb-xs"
             title={title}
             description={description}
             headlineVersion="S"
-            isPadding={false}
+            isEmbedded={true}
             align={align}
           />
           {items.length ? (
-            <List className="flex flex-col gap-2" items={items} listItemSize="S" />
+            <List className="flex flex-col gap-xs" items={items} listItemSize="S" />
           ) : null}
           {renderIcon(icon)}
-          {socialMedia.length ? <SocialMedia className="mt-5" media={socialMedia} /> : null}
+          {socialMedia.length ? <SocialMedia media={socialMedia} /> : null}
         </LinkWrapper>
       </BlockWrapper>
     );

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,14 +48,12 @@ 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 => (
   <button
-    className="w-full cursor-pointer text-primary-main pt-5 flex justify-between items-center"
+    className="w-full cursor-pointer text-primary-main pt-lg flex justify-between items-center"
     onClick={onToggle}
   >
     <div>{isUnfolded ? 'Скрыть' : 'Подробнее о тарифе'}</div>
@@ -83,12 +65,3 @@ const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode =>
     />
   </button>
 );
-
-const renderHitIcon = (): VNode => (
-  <div className="absolute -top-7 -right-4 h-[60px] w-[60px] 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="23" height="22" />
-    <Paragraph size="text-s" font="font-normal" align="text-center" color="text-primary-text">
-      ХИТ
-    </Paragraph>
-  </div>
-);

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

@@ -7,7 +7,7 @@ export const renderCardInfo = (cell: TariffsCardCellProps, i: number): VNode =>
   const { title, description, buttons } = cell;
 
   return (
-    <div key={String(i)} className="py-5 border-b border-main-divider">
+    <div key={String(i)} className="py-lg border-b border-main-divider">
       {title ? (
         <div className="opacity-80">
           <Text size="text-m" color="text-secondary-text">
@@ -16,7 +16,7 @@ export const renderCardInfo = (cell: TariffsCardCellProps, i: number): VNode =>
         </div>
       ) : null}
       {description ? (
-        <div className="mt-1">
+        <div className="mt-2xs">
           <Text size="text-xl" color="text-primary-text">
             {description}
           </Text>

package/mobile/src/components/ComparisonTable/TableCarouselContainer.tsx

@@ -8,7 +8,7 @@ export interface TableCarouselContainerProps {
 }
 
 const carouselContainerClassesMap: Record<TableVersion, string> = {
-  comparison: 'flex gap-4 duration-1000',
+  comparison: 'flex gap-m duration-1000',
   tariff: 'flex flex-grow duration-1000',
 };
 

package/mobile/src/components/ComparisonTable/TableCell.tsx

@@ -26,7 +26,7 @@ const renderCellInner =
   (isFillGradient: boolean, rowHeader?: string) =>
   ({ label, description }: CellData, i: number) =>
     (
-      <div key={String(i)} className="flex justify-between text-s py-3.5">
+      <div key={String(i)} className="flex justify-between text-s py-s">
         <div className={`${isFillGradient ? 'text-white/80' : 'text-secondary-text'}`}>
           {rowHeader}
         </div>

package/mobile/src/components/ComparisonTable/TableColumn.tsx

@@ -68,7 +68,7 @@ const renderToggleButton = ({
   isFillGradient,
   showRow,
 }: RenderToggleButtonProps) => (
-  <div className="mt-5" role="cell">
+  <div className="mt-lg" role="cell">
     <a
       role="link"
       onClick={onToggleColumn}

package/mobile/src/components/ComparisonTable/TableRow.tsx

@@ -20,7 +20,7 @@ export interface TableRowProps {
 }
 
 const titleStyle = (isLastRow = false) =>
-  `text-s py-7 ${DIVIDER_CLASSES} ${FIRST_CELL_CLASSES} ${
+  `text-s py-2xl ${DIVIDER_CLASSES} ${FIRST_CELL_CLASSES} ${
     isLastRow ? 'border-b-0' : 'border-solid'
   }`;
 

package/mobile/src/components/ComparisonTable/TableRowContainer.tsx

@@ -2,6 +2,6 @@ import { JSX } from '@redneckz/uni-jsx';
 
 export const TableRowContainer = JSX(({ children }) => (
   <div className="self-start flex flex-col" role="row">
-    <div className="flex">{children}</div>
+    <div className="flex gap-xl">{children}</div>
   </div>
 ));

package/mobile/src/components/ComparisonTable/constants.ts

@@ -1,6 +1,6 @@
 export const GRADIENT = 'bg-gradient-to-r from-main-gradient-start to-main-gradient-end';
 export const BORDER_CLASSES = 'border-gray border-solid border';
 export const DIVIDER_CLASSES = 'border-main-divider border border-t-0 border-x-0';
-export const FIRST_CELL_CLASSES = 'w-[200px] mr-6';
+export const FIRST_CELL_CLASSES = 'w-52';
 export const COLS_LENGTH_FOR_SCROLL = 3;
 export const COLUMN_WIDTH = 4 * 80 + 4 * 4; // w-80 + gap-4 = 336px

package/mobile/src/components/ContactsBlock/ContactsBlock.tsx

@@ -31,22 +31,22 @@ export const ContactsBlock = JSX<ContactsBlockProps>(
 );
 
 const renderBlocks = (info: ContactBlockProps[][]) => (
-  <div className="flex grow basis-0">
+  <div className="flex gap-5xl grow basis-0">
     {info.map((column, index) => renderBlocksColumn({ column, index }))}
   </div>
 );
 
 const renderBlocksColumn = ({ column, index }: RenderContactsColumnProps) =>
   column ? (
-    <div className="flex flex-col grow basis-0 pr-11 last:pr-0" key={`col-${String(index)}`}>
+    <div className="flex flex-col gap-xl grow basis-0" key={`col-${String(index)}`}>
       {column.map(({ title = '', description, additionalDescription, button }, key) => (
-        <div className="mt-xl first:mt-0" key={String(key)}>
+        <div key={String(key)}>
           <Headline
             title={title}
             description={description}
             headlineVersion="XS"
             align="text-left"
-            isPadding={false}
+            isEmbedded={true}
           />
           {additionalDescription ? (
             <div className="mt-xs opacity-80">

package/mobile/src/components/ContentPage/ContentPage.tsx

@@ -39,11 +39,11 @@ export const ContentPage: JSXBlock<ContentPageProps> = JSX<ContentPageProps>(
           data-theme={colorPalette}
         >
           {slots?.header ? (
-            <div className="relative z-10 mb-5 shadow-[0_8px_32px_0px_#00000014]">
+            <div className="relative z-10 mb-lg shadow-[0_8px_32px_0px_#00000014]">
               {renderBlocksList(slots?.header, { ...options, slotName: 'header' })}
             </div>
           ) : null}
-          <div className="container @lg:grid @lg:grid-cols-12 @lg:gap-1">
+          <div className="container @lg:grid @lg:grid-cols-12 @lg:gap-2xs">
             {renderChildren({ block: data, options, extraProps: { className: 'scroll-mt-12' } })}
             {renderBlocksList(slots?.footer, { ...options, slotName: 'footer' })}
           </div>

package/mobile/src/components/DepositFiltration/DepositFiltration.tsx

@@ -54,7 +54,7 @@ export const DepositFiltration: JSXBlock<DepositFiltrationProps> = JSX<DepositFi
 
     return (
       <BlockWrapper
-        className={style(className)}
+        className={style('space-y-2xs', className)}
         defaultPadding="p-0"
         version="transparent"
         {...rest}

package/mobile/src/components/ErrorBlock/ErrorBlock.tsx

@@ -22,20 +22,20 @@ const renderErrorContent = (error: ErrorBlockContent['error']) => {
   return null;
 };
 
-const getErrorBlockStyle = (text: string) => (text ? 'py-20 pt-3 pb-1' : 'mb-16 pb-2 mt-24 pt-3');
+const getErrorBlockStyle = (text: string) => (text ? 'py-20' : 'mb-16 mt-24');
 
 export const ErrorBlock = JSX<ErrorBlockProps>(
   ({ className = '', title, subtitle, error, button, ...rest }) => (
     <BlockWrapper
-      className={style('flex flex-col justify-center items-center', className)}
-      defaultPadding={getErrorBlockStyle(button?.text as string)}
+      className={style('flex flex-col gap-lg justify-center items-center', className)}
+      defaultPadding={style('py-xs', getErrorBlockStyle(button?.text as string))}
       version="transparent"
       {...rest}
     >
       <div className="flex justify-center py-20">{renderErrorContent(error)}</div>
-      {title ? <Heading headingType="h1" className="text-left mb-4" title={title} /> : null}
+      {title ? <Heading headingType="h1" className="text-left" title={title} /> : null}
       {subtitle ? (
-        <div className="mb-7 max-w-[613px] text-center">
+        <div className="max-w-[613px] text-center">
           <Text size="text-xl" font="font-light">
             {subtitle}
           </Text>

package/mobile/src/components/ExchangeRateOffice/renderCurrencies.tsx

@@ -23,8 +23,8 @@ export const renderCurrencyRow = ({
   sellOfficeName,
 }: CurrencyInformation) => {
   return (
-    <tr key={title} className="pb-1 text-h6">
-      <td className="pt-4">
+    <tr key={title} className="pb-2xs text-h6">
+      <td className="pt-m">
         <div className="flex items-center">
           {title ? (
             <Img image={{ icon: CURRENCY_ICONS_MAP[title] }} width="24" height="24" />

package/mobile/src/components/ExchangeRateTile/CurrencyTable.tsx

@@ -42,14 +42,9 @@ const renderCurrencyRow = (exchangeCurrencyItem: ExchangeCurrencyItem) => {
   return (
     <tr key={currency} className="pb-2xs text-h6">
       <td className="pt-m">
-        <div className="flex items-center">
+        <div className="flex items-center gap-xs">
           {currency ? (
-            <Img
-              image={{ icon: CURRENCY_ICONS_MAP[currency] }}
-              width="24"
-              height="24"
-              className="mr-2"
-            />
+            <Img image={{ icon: CURRENCY_ICONS_MAP[currency] }} width="24" height="24" />
           ) : null}
           <Text size="text-h6">{currency}</Text>
         </div>

package/mobile/src/components/ExchangeRateTile/ExchangeCurrencyCalculator.tsx

@@ -72,7 +72,7 @@ export const ExchangeCurrencyCalculator = JSX<ExchangeCurrencyCalculatorProps>(
             ),
         })}
         {button?.text ? (
-          <Button className="py-4" version={button?.version} {...button}>
+          <Button className="py-4 px-9" version={button?.version} {...button}>
             {button.text}
           </Button>
         ) : null}

package/mobile/src/components/ExchangeRateTile/renderInput.tsx

@@ -24,7 +24,7 @@ export function renderInput(props: InputProps) {
   return (
     <div className="relative flex">
       <Input
-        className="shrink-0 text-l w-full appearance-none mr-[-90px]"
+        className="shrink-0 text-l w-full appearance-none -mr-24"
         placeholder={placeholder}
         type="text"
         value={value}

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

@@ -6,6 +6,6 @@ export const buttonStylesWithText = (text: string, buttonSize: ButtonSize) =>
   text
     ? ''
     : style(
-        'group/media flex items-center justify-center box-border',
+        'py-m group/media flex items-center justify-center box-border',
         buttonSizeStyles[buttonSize],
       );

package/mobile/src/components/GracePeriod/GracePeriod.tsx

@@ -4,6 +4,7 @@ import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
 import { Headline } from '../Headline/Headline';
 import type { CalendarItem, GracePeriodContent } from './GracePeriodContent';
+import { style } from '../../utils/style';
 
 interface MappedCalendarItemProps extends CalendarItem {
   flexBasis?: string;
@@ -13,14 +14,8 @@ export interface GracePeriodProps extends GracePeriodContent, UniBlockProps {}
 
 export const GracePeriod = JSX<GracePeriodProps>(
   ({ className = '', title, description, calendar, ...rest }) => (
-    <BlockWrapper className={className} defaultPadding="p-6xl" {...rest}>
-      <Headline
-        className="mb-4"
-        title={title}
-        description={description}
-        headlineVersion="M"
-        isPadding={false}
-      />
+    <BlockWrapper className={style('space-y-m', className)} defaultPadding="p-6xl" {...rest}>
+      <Headline title={title} description={description} headlineVersion="M" isEmbedded={true} />
       {calendar ? renderCalendar(calendar) : null}
     </BlockWrapper>
   ),
@@ -44,19 +39,19 @@ const renderCalendar = (calendar: CalendarItem[]) => {
     }));
 
   return (
-    <div className="w-full flex flex-col justify-center mt-13">
-      <div className="flex w-full mb-3 text-h6 text-center">
+    <div className="w-full flex flex-col justify-center gap-s">
+      <div className="flex w-full text-h6 text-center">
         {mappedCalendar.map((_) => renderMonthNames(_, colSize))}
       </div>
       <div className="flex gap-s w-full">
         {mappedCalendar.map((_, ind) => (
           <div
             key={`monthItem-${ind}`}
-            className="pr-s border-r border-main-divider last:border-r-0 last:pr-0"
+            className="border-r border-main-divider last:border-r-0 space-y-s"
             style={{ flexBasis: _.flexBasis }}
           >
-            <div className="flex">{renderMonthImages(_)}</div>
-            <div className="text-s font-light text-primary-text mt-s">
+            <div className="flex gap-s">{renderMonthImages(_)}</div>
+            <div className="text-s font-light text-primary-text">
               <span>{_.text}</span>&thinsp;
               <span className="text-primary-main">{_.greenText}</span>
             </div>
@@ -79,7 +74,7 @@ const renderMonthImages = (item: MappedCalendarItemProps) =>
     _.image?.src ? (
       <div
         key={`monthImage-${_.image.src}`}
-        className="h-[207px] border-r pr-3 mr-3 border-main-divider last:border-r-0 last:pr-0 last:mr-0"
+        className="h-52 border-r pr-s border-main-divider last:border-r-0"
       >
         <Img image={_.image} className="flex" />
       </div>