@redneckz/wildless-cms-uni-blocks 0.3.28 → 0.3.31

package/mobile/src/ui-kit/Tabs/Tabs.tsx

@@ -19,7 +19,7 @@ const renderTab =
     return (
       <div
         key={String(index)}
-        className={`flex h-full flex-1 cursor-pointer mr-2 last:mr-0 ${
+        className={`flex h-full flex-1 cursor-pointer mr-2 last:mr-0 box-content ${
           isActive ? ACTIVE_TAB_STYLE : TAB_STYLE
         }`}
         role="tab"

package/mobile/src/utils/url.ts

@@ -13,3 +13,12 @@ export const getOrigin = (href?: string) => {
   const endOfOrigin = url.indexOf('/', endOfProto + protoSeparator.length);
   return endOfOrigin !== -1 ? url.substring(0, endOfOrigin) : url;
 };
+
+export const getHash = (href?: string) => {
+  if (!href || !isURL(href)) {
+    return undefined;
+  }
+
+  const hashIndex = href.indexOf('#');
+  return hashIndex !== -1 ? href.substring(hashIndex, href.length) : undefined;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.3.28",
+  "version": "0.3.31",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/common.css

@@ -1,5 +1,9 @@
 @import '../fonts/ubuntu/ubuntu.css';
 
+html {
+  scroll-behavior: smooth;
+}
+
 /* Private clients | Green */
 [data-theme='pc'] {
   --color-primary-main: 66, 171, 68;

package/src/components/Accordion/Accordion.example.json

@@ -3,6 +3,7 @@
   "accordionItems": [
     {
       "label": "Аккордеон 1",
+      "labelIcon": "CardIcon",
       "blocks": [
         {
           "blockListType": "TextBlock",
@@ -18,6 +19,7 @@
     },
     {
       "label": "Аккордеон 2",
+      "labelIcon": "CardIcon",
       "blocks": [
         {
           "blockListType": "TextBlock",
@@ -33,6 +35,7 @@
     },
     {
       "label": "Аккордеон 3",
+      "labelIcon": "CardIcon",
       "blocks": [
         {
           "blockListType": "TextBlock",

package/src/components/Accordion/Accordion.fixture.mobile.tsx

@@ -45,6 +45,7 @@ const propsTextBlock: AccordionProps = {
     },
     {
       label: 'Accordion label 2',
+      labelIcon: 'CardIcon',
       blocks: [PICTURE_TEXT_ACCORDION_BLOCK],
     },
     {

package/src/components/Accordion/Accordion.fixture.tsx

@@ -63,6 +63,8 @@ const MINI_GALLERY_ACCORDION_BLOCK: MiniGalleryBlockListDef = {
 
 const propsBlock: AccordionProps = {
   context,
+  title: 'Accordion title',
+  description: 'Accordion description',
   accordionItems: [
     {
       label: 'Accordion label 1',

package/src/components/Accordion/Accordion.tsx

@@ -1,5 +1,4 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import type { AccordionContent } from './AccordionContent';
@@ -7,25 +6,16 @@ import { AccordionItem } from './AccordionItem';
 
 export interface AccordionProps extends AccordionContent, UniBlockProps {}
 
-const accordionStyleMap: Record<BlockVersion, string> = {
-  primary: 'bg-white text-primary-text',
-  secondary: 'bg-primary-main text-white',
-};
-
 export const Accordion = JSX<AccordionProps>(
-  ({ title, accordionItems, context, className = '', version = 'primary' }) => {
+  ({ title, description, accordionItems, context, className = '', anchor = null }) => {
     return (
-      <section className={`p-[50px] font-sans ${className} ${accordionStyleMap[version]}`}>
+      <section className={`p-[50px] font-sans bg-white text-primary-text ${className}`} id={anchor}>
         {title ? <Heading headingType="h4" className="mb-2.5" title={title} /> : null}
+        {description ? <div className="mb-2.5 text-base">{description}</div> : null}
         {accordionItems?.length ? (
           <ul className="list-none m-0 p-0">
             {accordionItems.map((item, i) => (
-              <AccordionItem
-                key={`AccordionItem${i}`}
-                {...item}
-                version={version}
-                context={context}
-              />
+              <AccordionItem key={`AccordionItem${i}`} {...item} context={context} />
             ))}
           </ul>
         ) : null}

package/src/components/Accordion/AccordionContent.ts

@@ -1,5 +1,6 @@
-import type { BlockDef, ColumnsCount } from '../../ui-kit/BlocksList/BlocksListProps';
+import type { BlockDef } from '../../ui-kit/BlocksList/BlocksListProps';
 import type { BlockVersion } from '../../model/BlockVersion';
+import type { IconName } from '../../icons/IconName';
 /**
  * @title Элемент списка
  */
@@ -20,9 +21,7 @@ export interface AccordionItemCommonProps {
    * @default false
    */
   bordered?: boolean; // TODO: только для мобильной версии
-  version?: BlockVersion;
-
-  columns?: ColumnsCount;
+  labelIcon?: IconName; // TODO: только для мобильной версии
 }
 
 /**
@@ -35,7 +34,7 @@ export interface AccordionContent {
   /** @title Список */
   accordionItems?: AccordionItemCommonProps[];
   /** @title Описание */
-  description?: string; // TODO: только для мобильной версии
+  description?: string;
   /**
    * @title Отображать/скрывать обводку у элемента списка
    * @default false

package/src/components/Accordion/AccordionItem.mobile.tsx

@@ -7,34 +7,39 @@ import { useActiveHandler } from './useActiveHandler';
 
 export interface AccordionItemProps extends AccordionItemCommonProps, UniBlockProps {}
 
-export const AccordionItem = JSX<AccordionItemProps>(({ label, blocks, bordered, context }) => {
-  const { hasContent, icon, handleToggle } = useActiveHandler({
-    context,
-    blocks,
-  });
+export const AccordionItem = JSX<AccordionItemProps>(
+  ({ label, labelIcon, blocks, bordered, context }) => {
+    const { hasContent, icon, handleToggle } = useActiveHandler({
+      context,
+      blocks,
+    });
 
-  return (
-    <li
-      className={`${
-        bordered ? 'border p-4 rounded mb-4' : 'border-0 border-b last:border-b-0'
-      } border-solid border-main-divider`}
-    >
-      <button
-        className={`border-none bg-transparent flex justify-between text-left w-full font-sans text-primary-text
+    return (
+      <li className={`${borderedLiClass(bordered)} border-solid border-main-divider`}>
+        <button
+          className={`border-none bg-transparent flex justify-between text-left w-full font-sans text-primary-text
           ${bordered ? '' : 'py-[14px] px-0'}
           ${hasContent ? 'group cursor-pointer' : ''}`}
-        onClick={handleToggle}
-      >
-        <span
-          className={`text-m-title-xs pr-2.5 font-medium ${
-            hasContent ? 'group-hover:text-primary-main' : ''
-          }`}
+          onClick={handleToggle}
         >
-          {label}
-        </span>
-        {hasContent ? <Icon name={icon} width="24" height="24" asSVG /> : null}
-      </button>
-      {hasContent ? <AccordionItemInner blocks={blocks} context={context} /> : null}
-    </li>
-  );
-});
+          <span
+            className={`text-m-title-xs pr-2.5 font-medium flex ${
+              hasContent ? 'group-hover:text-primary-main' : ''
+            }`}
+          >
+            {labelIcon ? (
+              <Icon name={labelIcon} width="24" height="24" asSVG className="mr-3" />
+            ) : null}
+            {label}
+          </span>
+          {hasContent ? <Icon name={icon} width="24" height="24" asSVG /> : null}
+        </button>
+        {hasContent ? <AccordionItemInner blocks={blocks} context={context} /> : null}
+      </li>
+    );
+  },
+);
+
+function borderedLiClass(bordered) {
+  return bordered ? 'border p-4 rounded mb-4' : 'border-0 border-b last:border-b-0';
+}

package/src/components/Accordion/AccordionItem.tsx

@@ -1,5 +1,4 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../types';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import type { AccordionItemCommonProps } from './AccordionContent';
@@ -8,52 +7,27 @@ import { useActiveHandler } from './useActiveHandler';
 
 export interface AccordionItemProps extends AccordionItemCommonProps, UniBlockProps {}
 
-const buttonStyleMap: Record<BlockVersion, string> = {
-  primary: 'text-primary-text',
-  secondary: 'text-white',
-};
+export const AccordionItem = JSX<AccordionItemProps>(({ label, isExpanded, blocks, context }) => {
+  const { isActive, hasContent, icon, handleToggle } = useActiveHandler({
+    context,
+    blocks,
+    initialState: isExpanded,
+  });
 
-const buttonHoverStyleMap: Record<BlockVersion, string> = {
-  primary: 'group-hover:text-primary-main',
-  secondary: 'group-hover:text-white',
-};
-
-export const AccordionItem = JSX<AccordionItemProps>(
-  ({ label, isExpanded, blocks, columns, context, version = 'primary' }) => {
-    const { isActive, hasContent, icon, handleToggle } = useActiveHandler({
-      context,
-      blocks,
-      initialState: isExpanded,
-    });
-
-    return (
-      <li className="border-0 border-b border-solid border-main-divider last:border-b-0">
-        <button
-          className={`border-none bg-transparent px-0 py-5 flex justify-between text-left w-full font-sans ${
-            buttonStyleMap[version]
-          }
-        ${hasContent ? 'group cursor-pointer' : ''}`}
-          onClick={handleToggle}
-        >
-          <span
-            className={`text-xl pr-2.5 font-medium ${
-              hasContent ? buttonHoverStyleMap[version] : ''
-            }`}
-          >
-            {label}
-          </span>
-          {hasContent ? <Icon name={icon} width="24" height="24" asSVG /> : null}
-        </button>
-        {hasContent ? (
-          <AccordionItemInner
-            isExpanded={isActive}
-            columns={columns}
-            blocks={blocks}
-            version={version}
-            context={context}
-          />
-        ) : null}
-      </li>
-    );
-  },
-);
+  return (
+    <li className="border-0 border-b border-solid border-main-divider last:border-b-0">
+      <button
+        className={`border-none bg-transparent px-0 py-5 flex justify-between text-left w-full font-sans
+            ${hasContent ? 'group cursor-pointer' : ''}
+          `}
+        onClick={handleToggle}
+      >
+        <span className={`text-xl pr-2.5 font-medium`}>{label}</span>
+        {hasContent ? <Icon name={icon} width="24" height="24" asSVG /> : null}
+      </button>
+      {hasContent ? (
+        <AccordionItemInner isExpanded={isActive} blocks={blocks} context={context} />
+      ) : null}
+    </li>
+  );
+});

package/src/components/Accordion/AccordionItemInner.mobile.tsx

@@ -2,14 +2,11 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { AccordionItemProps } from './AccordionItem';
 import { renderBlocksList } from '../../ui-kit/BlocksList/renderBlocksList';
 
-export const AccordionItemInner = JSX<AccordionItemProps>(
-  ({ blocks, context, version = 'primary' }) => {
-    const className = 'mb-5 last:mb-0 first:mt-2';
-    const columns = 1;
-    return (
-      <div className="transition-all duration-300 max-h-0 overflow-hidden group-last:last:pb-0">
-        {renderBlocksList({ context, className, columns, blocks, version })}
-      </div>
-    );
-  },
-);
+export const AccordionItemInner = JSX<AccordionItemProps>(({ blocks, context }) => {
+  const className = 'mb-5 last:mb-0 first:mt-2';
+  return (
+    <div className="transition-all duration-300 max-h-0 overflow-hidden group-last:last:pb-0">
+      {renderBlocksList({ context, className, blocks })}
+    </div>
+  );
+});

package/src/components/Accordion/AccordionItemInner.tsx

@@ -2,13 +2,11 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { AccordionItemProps } from './AccordionItem';
 import { renderBlocksList } from '../../ui-kit/BlocksList/renderBlocksList';
 
-export const AccordionItemInner = JSX<AccordionItemProps>(
-  ({ blocks, columns = 1, context, version = 'primary' }) => {
-    const className = 'mb-5 last:mb-0 pb-5';
-    return (
-      <div className="transition-all duration-300 max-h-0 overflow-hidden">
-        {renderBlocksList({ context, className, columns, blocks, version })}
-      </div>
-    );
-  },
-);
+export const AccordionItemInner = JSX<AccordionItemProps>(({ blocks, context }) => {
+  const className = 'mb-5 last:mb-0 pb-5';
+  return (
+    <div className="transition-all duration-300 max-h-0 overflow-hidden">
+      {renderBlocksList({ context, className, blocks })}
+    </div>
+  );
+});

package/src/components/BaseTile/BaseTile.tsx

@@ -5,9 +5,9 @@ import type { BaseTileCommonProps } from './BaseTileProps';
 export interface BaseTileProps extends BaseTileCommonProps, UniBlockProps {}
 
 export const BaseTile = JSX<BaseTileProps>(
-  ({ className = '', title, children, buttons, image }) => {
+  ({ className = '', title, children, buttons, image, anchor = null }) => {
     return (
-      <div className={`font-sans flex flex-col grow h-full items-start ${className}`}>
+      <div className={`font-sans flex flex-col grow h-full items-start ${className}`} id={anchor}>
         {title}
         <div className="flex grow w-full justify-between">
           <div className="flex flex-col justify-between w-full">

package/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -6,22 +6,25 @@ import type { Benefit, BenefitsBlockContent } from './BenefitsBlockContent';
 
 export interface BenefitsBlockProps extends BenefitsBlockContent, UniBlockProps {}
 
-export const BenefitsBlock = JSX<BenefitsBlockProps>(({ className, title, benefits }) => {
-  return (
-    <section
-      className={`font-sans text-primary-text bg-white p-12 flex flex-col items-center ${
-        className || ''
-      }`}
-    >
-      {title ? (
-        <Heading headingType="h2" className="max-w-[47rem] text-center" title={title} />
-      ) : null}
-      {benefits?.length ? (
-        <div className="grid grid-cols-2 gap-8 mt-9">{benefits.map(renderStep)}</div>
-      ) : null}
-    </section>
-  );
-});
+export const BenefitsBlock = JSX<BenefitsBlockProps>(
+  ({ className, title, benefits, anchor = null }) => {
+    return (
+      <section
+        className={`font-sans text-primary-text bg-white p-12 flex flex-col items-center ${
+          className || ''
+        }`}
+        id={anchor}
+      >
+        {title ? (
+          <Heading headingType="h2" className="max-w-[47rem] text-center" title={title} />
+        ) : null}
+        {benefits?.length ? (
+          <div className="grid grid-cols-2 gap-8 mt-9">{benefits.map(renderStep)}</div>
+        ) : null}
+      </section>
+    );
+  },
+);
 
 const renderStep = (benefit: Benefit, i: number) => {
   return (

package/src/components/BlockContent.ts

@@ -5,8 +5,10 @@ import type { FooterContent } from './Footer/FooterContent';
 import type { GalleryContent } from './Gallery/GalleryContent';
 import type { HeaderContent } from './Header/HeaderContent';
 import type { LinkDocsContent } from './LinkDocs/LinkDocsContent';
+import type { LinkListContent } from './LinkList/LinkListContent';
 import type { MobileAppTileContent } from './MobileAppTile/MobileAppTileContent';
 import type { NavigationContent } from './Navigation/NavigationContent';
+import type { NavigatorTabsContent } from './NavigatorTabs/NavigatorTabsContent';
 import type { PictureTextContent } from './PictureText/PictureTextContent';
 import type { PlaceholderContent } from './Placeholder/PlaceholderContent';
 import type { ProductBlockContent } from './ProductBlock/ProductBlockContent';
@@ -17,7 +19,6 @@ import type { StepsBlockContent } from './StepsBlock/StepsBlockContent';
 import type { TariffsTableContent } from './TariffsTable/TariffsTableContent';
 import type { TextBlockContent } from './TextBlock/TextBlockContent';
 import type { TileContent } from './Tile/TileContent';
-import type { LinkListContent } from './LinkList/LinkListContent';
 
 /**
  * @hidden
@@ -31,6 +32,7 @@ export type BlockContent =
   | HeaderContent
   | LinkDocsContent
   | MobileAppTileContent
+  | NavigatorTabsContent
   | PictureTextContent
   | PlaceholderContent
   | ProductBlockContent

package/src/components/Blocks.ts

@@ -11,6 +11,7 @@ import { LinkDocs } from './LinkDocs/LinkDocs';
 import { MiniGallery } from './MiniGallery/MiniGallery';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
 import { Navigation } from './Navigation/Navigation';
+import { NavigatorTabs } from './NavigatorTabs/NavigatorTabs';
 import { PictureText } from './PictureText/PictureText';
 import { Placeholder } from './Placeholder/Placeholder';
 import { ProductBlock } from './ProductBlock/ProductBlock';
@@ -38,6 +39,7 @@ export const Blocks = {
   LinkDocs,
   MiniGallery,
   MobileAppTile,
+  NavigatorTabs,
   PictureText,
   ProductBlock,
   ProductGallery,

package/src/components/ComparisonTable/ComparisonTable.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import { FIRST_CELL_CLASSES } from './constants';
 import { ComparisonTableBody } from './ComparisonTableBody';
-import type { UniBlockProps } from '../../types';
 import type { ComparisonTableContent } from './ComparisonTableContent';
+import { FIRST_CELL_CLASSES } from './constants';
 
 export interface ComparisonTableProps extends ComparisonTableContent, UniBlockProps {}
 
@@ -16,6 +16,7 @@ export const ComparisonTable = JSX<ComparisonTableProps>(
     columns,
     visibleRowLength = 0,
     isColoredFirstColumn = false,
+    anchor = null,
   }) => {
     const [isShowAllRow, setIsShowAllRow] = context.useState(!visibleRowLength);
     const showToggle = () => setIsShowAllRow(!isShowAllRow);
@@ -25,6 +26,7 @@ export const ComparisonTable = JSX<ComparisonTableProps>(
         className={`bg-white font-sans py-[50px] pl-[50px] overflow-hidden text-primary-text relative ${
           className || ''
         }`}
+        id={anchor}
       >
         <Heading
           headingType="h2"

package/src/components/ContentPage/ContentPage.page.json

@@ -57,6 +57,34 @@
         ]
       }
     },
+    {
+      "type": "NavigatorTabs",
+      "style": ["col-span-12"],
+      "content": {
+        "navigatorTabs": [
+          {
+            "label": "Калькулятор",
+            "anchor": "calculator"
+          },
+          {
+            "label": "Преимущества",
+            "anchor": "advantages"
+          },
+          {
+            "label": "Как оформить",
+            "anchor": "howToApply"
+          },
+          {
+            "label": "Тарифы",
+            "anchor": "tariffs"
+          },
+          {
+            "label": "Документы",
+            "anchor": "documents"
+          }
+        ]
+      }
+    },
     {
       "type": "ProductGallery",
       "style": ["col-span-12"],
@@ -1400,6 +1428,7 @@
     {
       "type": "LinkDocs",
       "style": ["col-span-12"],
+      "anchor": "documents",
       "content": {
         "title": "Дополнительные документы",
         "subtitle": "Ответы на часто задаваемые вопросы",
@@ -1880,6 +1909,7 @@
     },
     {
       "type": "CreditCalculator",
+      "anchor": "calculator",
       "style": ["col-span-12"]
     },
     {

package/src/components/ContentPage/ContentPage.tsx

@@ -94,16 +94,16 @@ function renderBlock(
   const BlockComponent = blocksRegistry[type || 'Placeholder'] || Placeholder;
   return blockDecorator(
     {
-      blockClassName: style2className(block.style),
+      blockClassName: `scroll-mt-12 ${style2className(block.style)}`,
       block,
       render: (props) => {
-        const { version, content } = props.block;
+        const { version, content, anchor } = props.block;
         return (
           <BlockComponent
-            key={`${type}-${i}`}
             className={props.blockClassName}
             version={version}
             context={context}
+            anchor={anchor}
             {...content}
           />
         );

package/src/components/ContentPage/ContentPageContext.tsx

@@ -3,7 +3,8 @@ export interface Router {
   query: Record<string, string | string[] | undefined>;
   href?: string;
   basePath?: string;
-  push: (url: string) => void;
+  push: (url?: string) => void;
+  replace: (url?: string) => void;
 }
 
 export interface LikeService {

package/src/components/CreditCalculator/CreditCalculator.tsx

@@ -10,11 +10,11 @@ import { DEFAULT_TABS } from './defaultTabs';
 export interface CreditCalculatorProps extends CreditCalculatorContent, UniBlockProps {}
 
 export const CreditCalculator = JSX<CreditCalculatorProps>(
-  ({ className = '', context, tabs = DEFAULT_TABS }) => {
+  ({ className = '', context, tabs = DEFAULT_TABS, anchor = null }) => {
     const [currentTabIndex, setCurrentTabIndex] = context.useState(0);
 
     return (
-      <section className={`font-sans text-primary-text py-10 bg-white ${className}`}>
+      <section className={`font-sans text-primary-text py-10 bg-white ${className}`} id={anchor}>
         <Heading
           className="w-full text-center mb-8"
           headingType={getTileHeadingType(className)}

package/src/components/ExchangeRateTile/CurrencyTable.tsx

@@ -3,7 +3,7 @@ import { Icon } from '../../ui-kit/Icon/Icon';
 import type { ExchangeCurrencyItem } from './ExchangeRateTileContent';
 import { formatCurrency } from './formatCurrency';
 
-const TABLE_HEAD_STYLE = 'text-left font-normal text-sm text-secondary-text';
+const TABLE_HEAD_STYLE = 'font-light text-left font-normal text-sm text-secondary-text';
 
 const CURRENCY_ICONS_MAP = {
   USD: 'DollarIcon',
@@ -33,15 +33,19 @@ export const CurrencyTable = JSX<CurrencyTableProps>(({ className, exchangeCurre
 const renderCurrencyRow = (exchangeCurrencyItem: ExchangeCurrencyItem) => {
   const code = exchangeCurrencyItem?.currency?.currency;
   return (
-    <tr key={code}>
+    <tr key={code} className="pb-1">
       <td className="pt-4">
         <div className="flex items-center">
           {code ? <Icon name={CURRENCY_ICONS_MAP[code]} width="24" height="24" /> : null}
-          <span className="ml-2">{code}</span>
+          <span className="text-m-title-md ml-2">{code}</span>
         </div>
       </td>
-      <td className="pt-4 pl-11">{formatCurrency(exchangeCurrencyItem.buyExchangeRate)}</td>
-      <td className="pt-4 pl-11">{formatCurrency(exchangeCurrencyItem.saleExchangeRate)}</td>
+      <td className="pt-4 pl-11 m-title-md font-light">
+        {formatCurrency(exchangeCurrencyItem.buyExchangeRate)}
+      </td>
+      <td className="pt-4 pl-11 m-title-md font-light">
+        {formatCurrency(exchangeCurrencyItem.saleExchangeRate)}
+      </td>
     </tr>
   );
 };

package/src/components/ExchangeRateTile/CurrentLocation.tsx

@@ -11,8 +11,8 @@ export const CurrentLocation = JSX<CurrentLocationProps>(
   ({ className = '', address, distance }) => (
     <div className={`flex text-sm ${className}`}>
       <Icon className="min-w-fit" name="GpsIcon" width="24" height="24" asSVG />
-      <div className="ml-1.5">
-        {address ? <p className="m-0">{address}</p> : null}
+      <div className="ml-3 font-light">
+        {address ? <p className="m-0 mb-[3px]">{address}</p> : null}
         {distance ? (
           <p className="text-secondary-text m-0">Курс указан для ближайшего офиса - {distance}</p>
         ) : null}

package/src/components/ExchangeRateTile/ExchangeCurrencyCalculator.tsx

@@ -17,7 +17,7 @@ export const ExchangeCurrencyCalculator = JSX<ExchangeCurrencyCalculatorProps>(
       <div className={`grid gap-3.5 ${className}`}>
         {renderInput('Хочу продать', codes)}
         {renderInput('Получу', codes)}
-        <Button className="box-border mt-3.5 py-3 h-12 w-44" version="primary" href="#">
+        <Button className="box-border mt-3.5 py-3 h-12 w-full" version="primary" href="#">
           Купить валюту
         </Button>
       </div>
@@ -27,14 +27,14 @@ export const ExchangeCurrencyCalculator = JSX<ExchangeCurrencyCalculatorProps>(
 
 function renderInput(placeholder: string, codes: string[]) {
   return (
-    <div className="flex items-center">
+    <div className="relative flex items-center">
       <Input
-        className="h-10 border pl-2.5 rounded-md text-m-sm w-full appearance-none"
+        className="h-10 border pl-4 pt-[7px] pb-[7px] rounded-md text-m-sm w-full appearance-none -mr-12"
         type="number"
         placeholder={`${placeholder}`}
       />
       {codes.length ? (
-        <Select className="h-9 -translate-x-16">
+        <Select className="h-9 -translate-x-4">
           {codes.map((code, i) => (
             <SelectOption key={String(i)} value={code}>
               {code}