@redneckz/wildless-cms-uni-blocks 0.12.10 → 0.12.12

package/mobile/src/components/CarouselProductCard/CarouselProductCard.tsx

@@ -1,25 +1,26 @@
 import type { CarouselProductCardContent, ListProps } from './CarouselProductCardContent';
 
+import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { HEADLINE_SMALL_VERSION } from '../Headline/headlineVersionStyles';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Img } from '../../ui-kit/Img/Img';
-import { JSX } from '@redneckz/uni-jsx';
 import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
 import { List } from '../../ui-kit/List/List';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
-import type { Picture } from '../../model/Picture';
 import { Text } from '../../ui-kit/Text/Text';
-import type { UniBlockProps } from '../../model/JSXBlock';
-import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { style } from '../../utils/style';
+import { HEADLINE_SMALL_VERSION } from '../Headline/headlineVersionStyles';
+import { alignTextStyle } from './alignTextStyle';
 
 export interface CarouselProductCardProps extends CarouselProductCardContent, UniBlockProps {}
 
 export const CarouselProductCard = JSX<CarouselProductCardProps>(
   ({
     additionalDescription,
-    align = 'text-center',
+    align = alignTextStyle,
     button = {},
     className = '',
     description,
@@ -27,7 +28,9 @@ export const CarouselProductCard = JSX<CarouselProductCardProps>(
     href,
     icon,
     isDotted = true,
-    isFullWidth = true,
+    isButtonFullWidth = true,
+    isImageFullWidth = false,
+    isTopPosition = false,
     items = [],
     target,
     title,
@@ -36,70 +39,66 @@ export const CarouselProductCard = JSX<CarouselProductCardProps>(
   }) => {
     return (
       <BlockWrapper
-        className={style(
-          'h-full flex flex-col justify-between min-w-[260px]',
-          'box-border border-solid border border-gray',
-          align,
-          className,
-        )}
+        className={style('flex flex-col justify-between', align, className)}
         defaultPadding="p-0"
         version={version}
         {...rest}
       >
-        <LinkWrapper className="p-s" href={href} target={target}>
-          {renderImage(icon)}
+        <LinkWrapper className="p-m flex flex-col gap-xs" href={href} target={target}>
           {renderCardTitle(headlineSmallVersion, title)}
-          {renderDescription(description, title)}
+          {renderDescription(description)}
           {renderItems(items, isDotted, version)}
           {renderAdditionalDescription(additionalDescription)}
+          {renderImage(icon, isImageFullWidth, isTopPosition)}
         </LinkWrapper>
         {renderButtonsSection([button], {
-          className: style('p-s pt-0', isFullWidth ? '' : 'self-center min-w-[158px]'),
-          isVertical: isFullWidth,
+          className: style('p-m pt-0', isButtonFullWidth ? '' : 'self-center'),
+          isVertical: isButtonFullWidth,
         })}
       </BlockWrapper>
     );
   },
 );
 
-const renderImage = (image?: Picture) => (
-  <div className="flex justify-center">
-    {image?.src ? <Img className="mb-5" image={image} /> : null}
-    {image?.icon ? <Img className={`w-8 h-8 min-w-8 mb-5`} image={image} /> : null}
+const renderImage = (image?: Picture, isImageFullWidth?: boolean, isTopPosition?: boolean) => (
+  <div
+    className={style(
+      'flex gap-lg',
+      isTopPosition ? 'order-first' : 'order-last',
+      !isImageFullWidth ? 'justify-center' : '',
+    )}
+  >
+    {image?.src ? <Img className="shrink-0" image={image} /> : null}
+    {image?.icon ? (
+      <Img
+        className={style('shrink-0', !isImageFullWidth ? 'w-8 h-8 min-w-8' : '')}
+        image={image}
+      />
+    ) : null}
   </div>
 );
 
 const renderCardTitle = (headlineSmallVersion: string, title?: string) =>
-  title ? (
-    <div>
-      <Text size={HEADLINE_SMALL_VERSION[headlineSmallVersion]}>{title}</Text>
-    </div>
-  ) : null;
+  title ? <Text size={HEADLINE_SMALL_VERSION[headlineSmallVersion]}>{title}</Text> : null;
 
-const renderDescription = (description?: string, title?: string) =>
-  description ? (
-    <div className={title ? 'mt-2' : ''}>
-      <Paragraph size="text-l">{description}</Paragraph>
-    </div>
-  ) : null;
+const renderDescription = (description?: string) =>
+  description ? <Paragraph size="text-l">{description}</Paragraph> : null;
 
 const renderAdditionalDescription = (additionalDescription?: string) =>
   additionalDescription ? (
-    <div className="mt-auto">
-      <Text
-        size="text-m"
-        font="font-light"
-        color="text-secondary-text group-data-secondary:text-white/80"
-      >
-        {additionalDescription}
-      </Text>
-    </div>
+    <Text
+      size="text-m"
+      font="font-light"
+      color="text-secondary-text group-data-secondary:text-white/80"
+    >
+      {additionalDescription}
+    </Text>
   ) : null;
 
 const renderItems = (items: ListProps[], isDotted: boolean, version: BlockVersion = 'primary') =>
   items?.length ? (
     <List
-      className={style('max-w-[308px] mt-2', version === 'primary' ? '!text-secondary-text' : '')}
+      className={style('text-s', version === 'primary' ? '!text-secondary-text' : '')}
       items={items.filter((item) => item?.text).map((item) => item.text as string)}
       isDotted={isDotted}
       listItemSize="S"

package/mobile/src/components/CarouselProductCard/CarouselProductCardContent.ts

@@ -27,8 +27,10 @@ export type CarouselProductCardContent = UniBlockContent &
     /** @title Список */
     items?: ListProps[];
     align?: TextAlign;
-    /**
-     * @title По всей ширине
-     */
-    isFullWidth?: boolean;
+    /** @title  Изображение на всю ширину */
+    isImageFullWidth?: boolean;
+    /**  @title  Картинка сверху над текстом */
+    isTopPosition?: boolean;
+    /** @title Кнопка по всей ширине */
+    isButtonFullWidth?: boolean;
   };

package/mobile/src/components/CarouselProductCard/alignTextStyle.tsx

@@ -0,0 +1 @@
+export const alignTextStyle = 'text-left';

package/mobile/src/components/CarouselProgramsCard/CarouselProgramsCard.tsx

@@ -7,38 +7,31 @@ import { Img } from '../../ui-kit/Img/Img';
 import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { Text } from '../../ui-kit/Text/Text';
-import { style } from '../../utils/style';
 import type { CarouselProgramsCardContent } from './CarouselProgramsCardContent';
 import { cardDescriptionColor, cardTitleFont } from './programCardStyles';
 
 export interface CarouselTariffsCardProps extends CarouselProgramsCardContent, UniBlockProps {}
 
 export const CarouselProgramsCard = JSX<CarouselTariffsCardProps>(
-  ({ className = '', title, icon, list = [], href, target, ...rest }) => {
-    return (
-      <BlockWrapper
-        className={style('border border-gray', className)}
-        defaultPadding="p-lg sm:p-0"
-        {...rest}
-      >
-        <LinkWrapper className="sm:flex sm:items-center" href={href} target={target}>
-          <div className="min-w-[200px] flex justify-center">
-            {icon?.src || icon?.icon ? <Img image={icon} /> : null}
-          </div>
-          <div className="sm:px-3 py-xl">
-            {title ? <Heading className="mb-2 sm:mb-3.5" headingType="h6" title={title} /> : null}
-            {list.length ? (
-              <div className="flex flex-col gap-2 sm:gap-3">{list?.map(renderList)}</div>
-            ) : null}
-          </div>
-        </LinkWrapper>
-      </BlockWrapper>
-    );
-  },
+  ({ className, title, icon, list = [], href, target, ...rest }) => (
+    <BlockWrapper className={className} defaultPadding="p-3xl sm:p-0" {...rest}>
+      <LinkWrapper className="sm:flex sm:items-center" href={href} target={target}>
+        <div className="flex justify-center px-xl">
+          {icon?.src || icon?.icon ? <Img image={icon} /> : null}
+        </div>
+        <div className="sm:px-s p-5xl">
+          {title ? <Heading className="mb-xs sm:mb-m" headingType="h6" title={title} /> : null}
+          {list.length ? (
+            <div className="flex flex-col gap-xs sm:gap-s">{list?.map(renderList)}</div>
+          ) : null}
+        </div>
+      </LinkWrapper>
+    </BlockWrapper>
+  ),
 );
 
 const renderList = (_: HeadlineCommonProps, i: number) => (
-  <div key={String(i)} className="flex flex-row-reverse justify-between gap-y-1 sm:flex-col">
+  <div key={String(i)} className="flex flex-row-reverse justify-between gap-y-2xs sm:flex-col">
     {_.title ? (
       <Text size="text-l" font={cardTitleFont}>
         {_.title}

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

@@ -8,7 +8,6 @@ import { List } from '../../ui-kit/List/List';
 import { style } from '../../utils/style';
 import { SocialMedia } from '../Footer/SocialMedia';
 import { Headline } from '../Headline/Headline';
-import { BORDER_STYLE } from './cardStyle';
 import type { CarouselRecommendationCardContent } from './CarouselRecommendationCardContent';
 
 export interface RecommendationCardProps extends CarouselRecommendationCardContent, UniBlockProps {}
@@ -28,17 +27,13 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
   }) => {
     return (
       <BlockWrapper
-        className={style(
-          'relative box-border group-data-gray:bg-main-divider/50',
-          BORDER_STYLE,
-          className,
-        )}
-        defaultPadding="p-default"
+        className={style('relative group-data-gray:bg-main-divider/50', className)}
+        defaultPadding="p-6xl"
         {...rest}
       >
         <LinkWrapper href={href} target={target}>
           <Headline
-            className="mb-2"
+            className="mb-xs"
             title={title}
             description={description}
             headlineVersion="S"

package/mobile/src/components/CarouselRichTextCard/CarouselRichTextCard.tsx

@@ -2,14 +2,13 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { RichText } from '../../ui-kit/RichText/RichText';
-import { style } from '../../utils/style';
 import type { CarouselRichTextCardContent } from './CarouselRichTextCardContent';
 
 export interface CarouselRichTextCardProps extends CarouselRichTextCardContent, UniBlockProps {}
 
 export const CarouselRichTextCard = JSX<CarouselRichTextCardProps>(
   ({ className = '', __html, richVersion = 'striped', ...rest }) => (
-    <BlockWrapper className={style('border border-gray h-full min-w-96', className)} {...rest}>
+    <BlockWrapper className={className} {...rest}>
       <RichText __html={__html} richVersion={richVersion} />
     </BlockWrapper>
   ),

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

@@ -37,7 +37,7 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
 
     return (
       <BlockWrapper
-        className={style('relative border border-gray flex flex-col', className)}
+        className={style('relative flex flex-col', className)}
         defaultPadding={getPaddingStyle(isHighlighting)}
         {...rest}
       >
@@ -46,7 +46,7 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
         {title ? (
           <Heading className={style('pt-xs', align)} headingType="h5" title={title} />
         ) : null}
-        {button ? <Button className="w-full mt-4" {...button} /> : null}
+        {button ? <Button className="w-full mt-m" {...button} /> : null}
         {cardCells.length ? (
           <Foldable
             renderFoldableSection={({ isUnfolded }) => (
@@ -64,7 +64,7 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
 );
 
 const renderIconBlock = (icon?: Picture) => (
-  <div className="w-[267px] min-w-[267px] self-center">
+  <div className="basis-full self-center">
     {icon?.src || icon?.icon ? <Img image={icon} /> : null}
   </div>
 );

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

@@ -1,2 +1,2 @@
 export const getPaddingStyle = (isHighlighting = false): string =>
-  isHighlighting ? 'p-default mt-6' : 'mt-6 p-default'; // Хак для мобильной версии т.к. контракт должен быть идентичный
+  isHighlighting ? 'p-6xl mt-6' : 'mt-6 p-6xl'; // Хак для мобильной версии т.к. контракт должен быть идентичный

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

@@ -13,12 +13,12 @@ export const ComparisonTable = JSX<ComparisonTableProps>((props) => {
 
   return (
     <section
-      className={`bg-white font-sans px-4 py-6 overflow-hidden text-primary-text relative ${
+      className={`bg-white font-sans p-6xl overflow-hidden text-primary-text relative space-y-lg ${
         className || ''
       }`}
     >
       {title ? (
-        <Heading headingType="h3" className="font-medium text-center m-0 mb-5" title={title} />
+        <Heading headingType="h3" className="font-medium text-center" title={title} />
       ) : null}
       <div role="table">
         <TableInner {...props} />

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

@@ -48,7 +48,7 @@ export const ComparisonTableBody = JSX<ComparisonTableBodyProps>(
           ) : null}
         </div>
         {isScrollAvailable ? (
-          <div className="absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" />
+          <div className="absolute top-0 right-0 bottom-0 w-20 bg-opacity-to-white" />
         ) : null}
       </div>
     );

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

@@ -31,7 +31,7 @@ export const ComparisonTableRows = JSX<ComparisonTableRowsProps>(
         {isScrollAvailable
           ? renderArrows({
               ...controls,
-              btnClass: ['top-[108px]', 'top-[44px]'],
+              btnClass: ['top-28', 'top-12'],
               className: 'right-7',
               isDisabled: true,
             })

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

@@ -16,21 +16,16 @@ export type HeaderCellProps = ImageContent &
 
 const headingStyle = (isFillGradient = false): string => (isFillGradient ? 'text-white' : '');
 const subtitleStyle = (isFillGradient = false): string =>
-  `text-s mb-3.5 ${isFillGradient ? 'text-white' : 'text-secondary-text/80'}`;
+  `text-s mb-m ${isFillGradient ? 'text-white' : 'text-secondary-text/80'}`;
 
 export const HeaderCell = JSX<HeaderCellProps>(
   ({ icon, image, title, subtitle, isFillGradient }) => (
-    <div role="columnheader">
+    <div className="space-y-4" role="columnheader">
       {icon ? (
-        <Img
-          className="h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4"
-          image={icon}
-          width="63"
-          height="63"
-        />
+        <Img className="h-16 w-16 min-w-16 min-h-16" image={icon} width="64" height="64" />
       ) : null}
       {image?.src && (
-        <div className="mb-3.5">
+        <div>
           <Img image={image} />
         </div>
       )}

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

@@ -28,7 +28,7 @@ export const TableColumn = JSX<TableColumnProps>(
     const buttonVersion: ButtonVersion = isFillGradient ? 'secondary' : 'primary';
 
     return (
-      <div className={`border border-gray rounded-md p-4 mb-3.5 ${gradientClassName}`} role="row">
+      <div className={`border border-gray rounded-md p-m mb-m ${gradientClassName}`} role="row">
         <HeaderCell {...header} isFillGradient={isFillGradient} />
         {columnDataView?.length
           ? columnDataView.map(({ rowHeader, cell }, i) => (
@@ -46,7 +46,7 @@ export const TableColumn = JSX<TableColumnProps>(
             href={header.link.href}
             target={header.link.target}
             version={buttonVersion}
-            className="text-s font-medium mt-4 py-[11px]"
+            className="text-s font-medium mt-m py-s"
           >
             {header.link.text}
           </Button>

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

@@ -20,7 +20,7 @@ export const ContactsBlock = JSX<ContactsBlockProps>(
   ({ className, contacts, info, version = 'secondary', ...rest }) => (
     <BlockWrapper
       className={style('flex', className)}
-      defaultPadding="p-default"
+      defaultPadding="p-6xl"
       version={version}
       {...rest}
     >
@@ -40,22 +40,22 @@ const renderBlocksColumn = ({ column, index }: RenderContactsColumnProps) =>
   column ? (
     <div className="flex flex-col grow basis-0 pr-11 last:pr-0" key={`col-${String(index)}`}>
       {column.map(({ title = '', description, additionalDescription, button }, key) => (
-        <div className="mt-6 first:mt-0" key={String(key)}>
+        <div className="mt-xl first:mt-0" key={String(key)}>
           <Headline
-            className="!p-0"
             title={title}
             description={description}
             headlineVersion="XS"
             align="text-left"
+            isPadding={false}
           />
           {additionalDescription ? (
-            <div className="mt-1.5 opacity-80">
+            <div className="mt-xs opacity-80">
               <Paragraph size="text-m" font="font-light">
                 {additionalDescription}
               </Paragraph>
             </div>
           ) : null}
-          {button?.href ? <Button className="mt-6" {...button} /> : null}
+          {button?.href ? <Button className="mt-xl" {...button} /> : null}
         </div>
       ))}
     </div>

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

@@ -1,14 +1,21 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 import { renderBlocksList } from '../../BlockRenderer/renderBlockList';
+import { renderChildren } from '../../BlockRenderer/renderChildren';
 import { useBool } from '../../hooks/useBool';
+import { useLocation } from '../../hooks/useLocation';
+import { useSWRResource } from '../../hooks/useSWRResource';
 import type { BlockDecorator } from '../../model/BlockDecorator';
 import type { BlocksRegistry } from '../../model/BlocksRegistry';
 import type { ContentPageDef } from '../../model/ContentPageDef';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
+import { projectSettings } from '../../ProjectSettings';
 import { useBlockRouterProvider } from '../../services/BlockRouter/useBlockRouterProvider';
+import type { SitemapData } from '../../services/sitemap/SitemapData';
 import { CookiePopup } from '../../ui-kit/CookiePopup/CookiePopup';
 import { useDialogHandlers } from '../../ui-kit/Dialog/useDialogHandlers';
+import { LocationDialog } from '../../ui-kit/LocationDialog/LocationDialog';
+import { SearchDialog } from '../../ui-kit/SearchDialog/SearchDialog';
 import { style } from '../../utils/style';
 import { LikeControl } from '../LikeControl/LikeControl';
 
@@ -18,64 +25,75 @@ interface ContentPageProps extends UniBlockProps {
   blockDecorator?: BlockDecorator;
 }
 
-export const ContentPage: JSXBlock<ContentPageProps> = JSX<ContentPageProps>((props) => {
-  const { className = '', blocksRegistry, blockDecorator, data = {} } = props;
+export const ContentPage: JSXBlock<ContentPageProps> = JSX<ContentPageProps>(
+  ({ className, blocksRegistry, blockDecorator, data = {} }) => {
+    const { style: pageStyle, slots, likeControl, colorPalette = 'pc' } = data;
 
-  const { style: pageStyle, blocks, slots, likeControl, colorPalette = 'pc' } = data;
+    const options: BlockRendererOptions = {
+      key: '',
+      page: data,
+      blocksRegistry,
+      blockDecorator,
+      parent: data,
+    };
 
-  const options: BlockRendererOptions = {
-    key: '',
-    page: data,
-    blocksRegistry,
-    blockDecorator,
-    parent: data,
-  };
+    const sitemap = useSWRResource<SitemapData>(
+      projectSettings.SITEMAP || 'sitemap',
+      data?.fallback,
+    );
+    const [location, onChangeLocation] = useLocation(sitemap?.defaultLocation);
 
-  useBlockRouterProvider();
+    useBlockRouterProvider();
+    const [isSomeDialogOpened, { setTrue: setSomeDialogOpened, setFalse: resetSomeDialogOpened }] =
+      useBool();
 
-  const [isSomeDialogOpened, { setTrue: setSomeDialogOpened, setFalse: resetSomeDialogOpened }] =
-    useBool();
+    useDialogHandlers({
+      onOpen: setSomeDialogOpened,
+      onClose: resetSomeDialogOpened,
+    });
 
-  useDialogHandlers({
-    onOpen: setSomeDialogOpened,
-    onClose: resetSomeDialogOpened,
-  });
-
-  return (
-    <section
-      className={style(
-        'relative',
-        pageStyle,
-        className,
-        isSomeDialogOpened ? 'overflow-hidden h-screen' : '',
-      )}
-      data-theme={colorPalette}
-    >
-      {slots?.header ? (
-        <div className="mb-5 shadow-[0_8px_32px_0px_#00000014]">
-          {renderBlocksList(slots?.header, {
+    return (
+      <section
+        className={style(
+          'relative',
+          pageStyle,
+          className,
+          isSomeDialogOpened ? 'overflow-hidden h-screen' : '',
+        )}
+        data-theme={colorPalette}
+      >
+        {slots?.header ? (
+          <div className="mb-5 shadow-[0_8px_32px_0px_#00000014]">
+            {renderBlocksList(slots?.header, {
+              ...options,
+              slotName: 'header',
+              extraProps: { sitemap, location },
+            })}
+          </div>
+        ) : null}
+        <div className="container grid grid-cols-12 gap-1">
+          {renderChildren({ block: data, options, extraProps: { className: 'scroll-mt-12' } })}
+          {renderBlocksList(slots?.footer, {
             ...options,
-            slotName: 'header',
+            slotName: 'footer',
+            extraProps: { sitemap, location },
           })}
         </div>
-      ) : null}
-      <div className="container grid grid-cols-12 gap-1">
-        {renderBlocksList(blocks, options)}
-        {slots?.footer
-          ? renderBlocksList(slots?.footer, {
-              ...options,
-              slotName: 'footer',
-            })
-          : null}
-      </div>
-      {likeControl ? renderLikeControl() : null}
-      <CookiePopup
-        termLink={{ href: '/pd-policy#cookie', target: '_blank' }}
-        personalDataPolicyLink={{ href: '/pd-policy', target: '_blank' }}
-      />
-    </section>
-  );
-});
+        {likeControl ? renderLikeControl() : null}
+        <CookiePopup
+          termLink={{ href: '/pd-policy#cookie', target: '_blank' }}
+          personalDataPolicyLink={{ href: '/pd-policy', target: '_blank' }}
+        />
+        <SearchDialog topItems={sitemap?.topItems} />
+        <LocationDialog
+          currentLocation={location}
+          foreignOffices={sitemap?.foreignOffices}
+          onChangeLocation={onChangeLocation}
+        />
+      </section>
+    );
+  },
+);
 
 ContentPage.childrenTypes = [];
 ContentPage.slots = () => ['header', 'footer'];
@@ -83,7 +101,7 @@ ContentPage.slots = () => ['header', 'footer'];
 function renderLikeControl() {
   return (
     <div className="flex items-end absolute bottom-0 right-0 h-full pointer-events-none">
-      <LikeControl className="rounded-tl-lg sticky bottom-0 pointer-events-auto" />
+      <LikeControl className="rounded-tl-3xl sticky bottom-0 pointer-events-auto" />
     </div>
   );
 }

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

@@ -15,20 +15,20 @@ export const ExchangeRateOffice = JSX<ExchangeRateOfficeProps>(
     const fourRates: CurrencyInformation[] = topNRates(currencies, 4);
 
     return (
-      <BlockWrapper className={className} {...rest}>
-        <div className="flex flex-row flex-grow-0 justify-between mb-8">
+      <BlockWrapper className={style('space-y-3xl', className)} {...rest}>
+        <div className="flex flex-row flex-grow-0 justify-between space-y-lg">
           <Heading
             headingType="h4"
             title={'Курс обмена валют в ' + officeName}
-            className="whitespace-pre-wrap text-h4 mb-5"
+            className="whitespace-pre-wrap text-h4"
           />
-          <div className="pl-11">
+          <div className="pl-6xl">
             <Text size="text-m" font="font-light" align="text-left" color="text-secondary-text">
               {actuality}
             </Text>
           </div>
         </div>
-        <div className="flex flex-row pt-4 text-left">
+        <div className="flex flex-row pt-m text-left">
           {fourRates.length > 0 ? (
             <table className={style('h-fit w-fit', className)}>
               <thead>

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

@@ -29,7 +29,7 @@ export const renderCurrencyRow = ({
           {title ? (
             <Img image={{ icon: CURRENCY_ICONS_MAP[title] }} width="24" height="24" />
           ) : null}
-          <span className="ml-2">{title}</span>
+          <span className="ml-xs">{title}</span>
         </div>
       </td>
       {renderCurrency(buyPrice, buyDifference)}
@@ -44,7 +44,7 @@ const formatCurrency = (value?: number) => (value ? currencyNumberFormat.format(
 
 const renderCurrency = (price?: number, difference?: number) => {
   return (
-    <td className="pt-4 pl-11">
+    <td className="pt-m pl-5xl">
       <div>{formatCurrency(price)}</div>
       <div
         className={style(
@@ -60,7 +60,7 @@ const renderCurrency = (price?: number, difference?: number) => {
 
 const renderOffice = (price?: number, officeName = '') => {
   return (
-    <td className="pt-4 pl-11">
+    <td className="pt-m pl-5xl">
       <div>{formatCurrency(price)}</div>
       <div className="font-normal text-sm text-green">{officeName}</div>
     </td>

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

@@ -2,7 +2,7 @@ import { Text } from '../../ui-kit/Text/Text';
 
 export const renderTableHeader = (title: string) => {
   return (
-    <th className="pl-11">
+    <th className="pl-5xl">
       <Text size="text-m" font="font-light" align="text-left" color="text-secondary-text">
         {title}
       </Text>