From a97ba427b472673acc938d40d2cd50f65d5f4787 Mon Sep 17 00:00:00 2001 From: Andrey Kopylov Date: Thu, 15 Jan 2026 16:32:37 +0500 Subject: [PATCH 1/4] [px-rem] replace rem to px --- src/app/global-error.tsx | 2 +- .../AutoHeightToggle/AutoHeightToggle.tsx | 4 +- src/components/Bone/Bone.module.scss | 2 +- src/components/Bone/Bone.tsx | 4 +- src/components/Button/Button.tsx | 6 +- .../ButtonRangePicker.module.scss | 2 +- src/components/Chart/Chart.tsx | 2 +- .../Legend/Percentage/Percentage.module.scss | 2 +- src/components/Chart/Skeleton/Skeleton.tsx | 4 +- src/components/Counter/Counter.module.scss | 4 +- .../Dropdown/Option/Option.module.scss | 6 +- src/components/Image/util/getImageStyle.ts | 2 +- .../Input/InputButton/InputButton.module.scss | 2 +- .../Input/InputView/InputView.module.scss | 14 +-- .../MenuDropdown/Option/Option.module.scss | 2 +- src/components/MenuDropdown/Option/Option.tsx | 2 +- .../Modal/Content/Buttons/Buttons.module.scss | 2 +- src/components/Modal/Modal.module.scss | 8 +- .../Notification/Notification.module.scss | 8 +- src/components/PercentInput/PercentInput.tsx | 2 +- .../PopupInfo/PopupInfo.module.scss | 4 +- .../RangeSliderView.module.scss | 42 ++++---- .../RangeSliderView/RangeSliderView.tsx | 2 +- .../RoundButton/RoundButton.module.scss | 8 +- .../SelectWithLabelButton.module.scss | 6 +- src/components/TabsView/TabsView.module.scss | 2 +- .../TokenOptions/Option/Option.module.scss | 2 +- .../TokenOptions/TokenOptions.tsx | 10 +- .../TokenOptions/TokenSearch/TokenSearch.tsx | 2 +- .../TooltipContent/TooltipContent.module.scss | 2 +- .../Transactions/Transactions.module.scss | 8 +- .../TransactionsModal/TransactionsModal.tsx | 2 +- .../BottomLoader/BottomLoader.module.scss | 4 +- .../BurgerButton/BurgerButton.module.scss | 6 +- .../Header/BurgerButton/BurgerButton.tsx | 2 +- .../Connect/Account/Account.module.scss | 6 +- .../Account/ClaimLabel/ClaimLabel.module.scss | 2 +- .../Header/MenuMobile/MenuMobile.module.scss | 6 +- .../Notifications/Notifications.module.scss | 12 +-- .../ConnectorButton.module.scss | 4 +- .../LedgerTransportView.tsx | 2 +- .../Slider/Content/Arrows/Arrows.module.scss | 6 +- .../Slider/Content/Content.module.scss | 2 +- .../GuideModal/Slider/Content/Content.tsx | 2 +- .../GuideModal/Slider/Slider.module.scss | 4 +- src/styles/globals.scss | 3 +- src/styles/mixins/_common.scss | 2 +- src/styles/scss/focus.scss | 6 +- src/styles/scss/resize.scss | 22 ----- src/styles/scss/shadow.scss | 4 +- src/styles/scss/size.scss | 14 +-- src/styles/tailwind/layers/base.css | 6 +- src/styles/tailwind/layers/components.css | 96 +++++++++---------- src/styles/tailwind/theme.css | 32 +++---- src/views/SwapView/SwapView.tsx | 2 +- .../Tabs/TabButton/TabButton.module.scss | 2 +- .../common/TimeRange/TimeRange.tsx | 2 +- .../common/ToggleBox/ToggleBox.module.scss | 6 +- 58 files changed, 201 insertions(+), 224 deletions(-) delete mode 100644 src/styles/scss/resize.scss diff --git a/src/app/global-error.tsx b/src/app/global-error.tsx index b2518d9b..adb4dbeb 100644 --- a/src/app/global-error.tsx +++ b/src/app/global-error.tsx @@ -81,7 +81,7 @@ const GlobalError = ({ error, reset }: GlobalErrorViewProps) => { locales={languages as unknown as Intl.LanguagesKeys[]} >
-
+
= (props) => { const marginTop = parseFloat(getComputedStyle(contentRef.current as HTMLDivElement).marginTop) if (containerRef.current) { - containerRef.current.style.height = `calc(${padding * 2}rem + ${contentHeight + containerHeight + marginTop}px)` + containerRef.current.style.height = `calc(${padding * 2}px + ${contentHeight + containerHeight + marginTop}px)` } } else { const height = childrenRef.current?.clientHeight if (containerRef.current) { - containerRef.current.style.height = `calc(${padding * 2}rem + ${height}px)` + containerRef.current.style.height = `calc(${padding * 2}px + ${height}px)` } } }, [ isOpen, toggleContent ]) diff --git a/src/components/Bone/Bone.module.scss b/src/components/Bone/Bone.module.scss index 8ce14960..8f9a5b1a 100644 --- a/src/components/Bone/Bone.module.scss +++ b/src/components/Bone/Bone.module.scss @@ -26,7 +26,7 @@ @keyframes bone { 0% { - transform: translateY(6rem) scale(0.98); + transform: translateY(6px) scale(0.98); opacity: .2; } 85%, diff --git a/src/components/Bone/Bone.tsx b/src/components/Bone/Bone.tsx index 25100c08..494d6254 100644 --- a/src/components/Bone/Bone.tsx +++ b/src/components/Bone/Bone.tsx @@ -29,11 +29,11 @@ const Bone: React.FC = (props: any) => { const style: any = styles if (width) { - style.width = style.minWidth = `${width}rem` + style.width = style.minWidth = `${width}px` } if (height) { - style.height = style.minHeight = `${height}rem` + style.height = style.minHeight = `${height}px` } return style diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index d1919b34..c1397c75 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -87,11 +87,11 @@ const Button: React.FC = (props) => { }, [ loading, disabled, color ]) const buttonSizeClassName = cx({ - 'min-w-[28rem] h-[28rem]': size === 'xs', + 'min-w-[28px] h-[28px]': size === 'xs', 'min-w-32 h-32': size === 's', - 'min-w-[44rem] h-[44rem]': size === 'm', + 'min-w-[44px] h-[44px]': size === 'm', 'min-w-60 h-60': size === 'l', - 'min-w-[70rem] h-[70rem]': size === 'xl', + 'min-w-[70px] h-[70px]': size === 'xl', }) const buttonPaddingClassName = cx({ diff --git a/src/components/ButtonRangePicker/ButtonRangePicker.module.scss b/src/components/ButtonRangePicker/ButtonRangePicker.module.scss index 628dd8f9..3f5466fb 100644 --- a/src/components/ButtonRangePicker/ButtonRangePicker.module.scss +++ b/src/components/ButtonRangePicker/ButtonRangePicker.module.scss @@ -1,3 +1,3 @@ .rounded { - border-radius: 11rem; + border-radius: 11px; } diff --git a/src/components/Chart/Chart.tsx b/src/components/Chart/Chart.tsx index 739fcb37..fee2fb30 100644 --- a/src/components/Chart/Chart.tsx +++ b/src/components/Chart/Chart.tsx @@ -43,7 +43,7 @@ const Chart: React.FC = (props) => {
= ({ className }) => { key={index} className="absolute bottom-4 mb-48" style={{ - height: `${50 + index * 30}rem`, + height: `${50 + index * 30}px`, left: `${Math.max(((index / columns) * 95), 4)}%`, width: `${50 / columns}%`, }} @@ -44,7 +44,7 @@ const Skeleton: React.FC = ({ className }) => {
- +
diff --git a/src/components/Counter/Counter.module.scss b/src/components/Counter/Counter.module.scss index a1fe5492..82edbed8 100644 --- a/src/components/Counter/Counter.module.scss +++ b/src/components/Counter/Counter.module.scss @@ -1,6 +1,6 @@ .counter { - min-width: 20rem; - height: 20rem; + min-width: 20px; + height: 20px; @include dark-theme { color: $color-dark; diff --git a/src/components/Dropdown/Option/Option.module.scss b/src/components/Dropdown/Option/Option.module.scss index 0576781f..1485c99a 100644 --- a/src/components/Dropdown/Option/Option.module.scss +++ b/src/components/Dropdown/Option/Option.module.scss @@ -1,6 +1,6 @@ .option { - min-width: 160rem; - height: 48rem; + min-width: 160px; + height: 48px; &:hover, &:focus { @@ -9,7 +9,7 @@ } .withSubTitle { - height: 52rem; + height: 52px; } .logo { diff --git a/src/components/Image/util/getImageStyle.ts b/src/components/Image/util/getImageStyle.ts index 480f639e..e224e33e 100644 --- a/src/components/Image/util/getImageStyle.ts +++ b/src/components/Image/util/getImageStyle.ts @@ -8,7 +8,7 @@ type Input = { } const getImageStyle = ({ size, color, imageUrl }: Input) => { - const remSize = size ? `${size}rem` : undefined + const remSize = size ? `${size}px` : undefined const dimensions: CSSProperties = { width: remSize, diff --git a/src/components/Input/InputButton/InputButton.module.scss b/src/components/Input/InputButton/InputButton.module.scss index a17e602f..31e5aa13 100644 --- a/src/components/Input/InputButton/InputButton.module.scss +++ b/src/components/Input/InputButton/InputButton.module.scss @@ -1,4 +1,4 @@ .button { - height: 24rem; + height: 24px; background-color: rgba($color-dark-rgb, .06); } diff --git a/src/components/Input/InputView/InputView.module.scss b/src/components/Input/InputView/InputView.module.scss index d05b6b1f..0fb52307 100644 --- a/src/components/Input/InputView/InputView.module.scss +++ b/src/components/Input/InputView/InputView.module.scss @@ -21,16 +21,16 @@ $bg-color-error-hover: rgba($color-error-rgb, .15); @include field-colors($border-color-default, $bg-color-default); &.isMultiline { - min-height: 20rem; + min-height: 20px; .crossButton { - top: 12rem; - right: 16rem; + top: 12px; + right: 16px; } } &:not(.isMultiline) { - height: 48rem; + height: 48px; } &:not(.disabled) { @@ -60,7 +60,7 @@ $bg-color-error-hover: rgba($color-error-rgb, .15); &.focused { .label { - top: 5rem; + top: 5px; } } @@ -74,7 +74,7 @@ $bg-color-error-hover: rgba($color-error-rgb, .15); } .label { - top: 14rem; + top: 14px; pointer-events: none; @include basic-transition(); } @@ -88,7 +88,7 @@ $bg-color-error-hover: rgba($color-error-rgb, .15); caret-color: $color-dark; &.isMultiline { - line-height: 20rem; + line-height: 20px; } &:focus { diff --git a/src/components/MenuDropdown/Option/Option.module.scss b/src/components/MenuDropdown/Option/Option.module.scss index 79a9de24..d3186013 100644 --- a/src/components/MenuDropdown/Option/Option.module.scss +++ b/src/components/MenuDropdown/Option/Option.module.scss @@ -1,5 +1,5 @@ .option { - min-width: 160rem; + min-width: 160px; @media (hover: hover) { &:hover { diff --git a/src/components/MenuDropdown/Option/Option.tsx b/src/components/MenuDropdown/Option/Option.tsx index 0168d24b..d197829d 100644 --- a/src/components/MenuDropdown/Option/Option.tsx +++ b/src/components/MenuDropdown/Option/Option.tsx @@ -39,7 +39,7 @@ const Option: React.FC = (props) => { className={cx(s.option, className, 'flex items-center pl-16 pr-24 cursor-pointer', { 'bg-primary/10': active, 'h-48': !subTitle, - 'h-[52rem]': subTitle, + 'h-[52px]': subTitle, })} data-testid={dataTestId} onClick={onClick} diff --git a/src/components/Modal/Content/Buttons/Buttons.module.scss b/src/components/Modal/Content/Buttons/Buttons.module.scss index 065d2880..a4ccd401 100644 --- a/src/components/Modal/Content/Buttons/Buttons.module.scss +++ b/src/components/Modal/Content/Buttons/Buttons.module.scss @@ -1,5 +1,5 @@ @include desktop { .button { - min-width: 210rem; + min-width: 210px; } } diff --git a/src/components/Modal/Modal.module.scss b/src/components/Modal/Modal.module.scss index 61c0352f..dd80d8bd 100644 --- a/src/components/Modal/Modal.module.scss +++ b/src/components/Modal/Modal.module.scss @@ -1,7 +1,7 @@ .overlay { overflow-y: auto; - -webkit-backdrop-filter: blur(28rem); - backdrop-filter: blur(28rem); + -webkit-backdrop-filter: blur(28px); + backdrop-filter: blur(28px); @include fade-in(animation, 300ms, ease); @include light-theme { @@ -51,10 +51,10 @@ @include desktop { .narrow { - width: 480rem; + width: 480px; } .wide { - width: 800rem; + width: 800px; } } diff --git a/src/components/Notification/Notification.module.scss b/src/components/Notification/Notification.module.scss index 4b2c4fc1..1d4fa44b 100644 --- a/src/components/Notification/Notification.module.scss +++ b/src/components/Notification/Notification.module.scss @@ -1,6 +1,6 @@ .notification { - min-width: 210rem; - max-width: 560rem; + min-width: 210px; + max-width: 560px; background-color: $color-light; animation: openNotification 500ms ease; @@ -34,8 +34,8 @@ .closeButton { top: 50%; - right: 16rem; - margin-top: -12rem; + right: 16px; + margin-top: -12px; background-color: rgba($color-dark-rgb, .05); pointer-events: auto; } diff --git a/src/components/PercentInput/PercentInput.tsx b/src/components/PercentInput/PercentInput.tsx index 548f5e0b..7359bc79 100644 --- a/src/components/PercentInput/PercentInput.tsx +++ b/src/components/PercentInput/PercentInput.tsx @@ -106,7 +106,7 @@ const PercentInput: React.FC = ({ field, isDisabled, dataTest return (
= (props: RangeSliderViewP }) const percent = Math.min((value - min) / (max - min) * 100, 100) - const thumbStyle = { left: `calc(${percent}% - ${25 * percent / 100}rem)` } + const thumbStyle = { left: `calc(${percent}% - ${25 * percent / 100}px)` } return (
= (props) => { <> = (props) => { className="overflow-y-auto" fadeClassName="fixed" style={{ - height: `calc(5 * 56rem - 28rem)`, + height: `calc(5 * 56px - 28px)`, }} >
@@ -85,8 +85,8 @@ const TokenOptions: React.FC = (props) => { fadeClassName="fixed" style={{ height: filteredTokens.length > 5 - ? `calc(5 * 56rem - 28rem)` - : `calc(${filteredTokens.length} * 56rem)`, + ? `calc(5 * 56px - 28px)` + : `calc(${filteredTokens.length} * 56px)`, }} >
diff --git a/src/components/TokenDropdown/TokenOptions/TokenSearch/TokenSearch.tsx b/src/components/TokenDropdown/TokenOptions/TokenSearch/TokenSearch.tsx index 140b222a..b06e04d8 100644 --- a/src/components/TokenDropdown/TokenOptions/TokenSearch/TokenSearch.tsx +++ b/src/components/TokenDropdown/TokenOptions/TokenSearch/TokenSearch.tsx @@ -24,7 +24,7 @@ const TokenSearch: React.FC = (props) => { return (
= ({ title, items, ... {...rest} > diff --git a/src/layouts/AppLayout/BottomLoader/BottomLoader.module.scss b/src/layouts/AppLayout/BottomLoader/BottomLoader.module.scss index b2a90e10..e2aa4432 100644 --- a/src/layouts/AppLayout/BottomLoader/BottomLoader.module.scss +++ b/src/layouts/AppLayout/BottomLoader/BottomLoader.module.scss @@ -1,5 +1,5 @@ .loader { - backdrop-filter: blur(30rem); + backdrop-filter: blur(30px); transition: all 0.3s ease-in-out; animation: openLoader 0.3s ease-in-out; @@ -34,7 +34,7 @@ @keyframes openLoader { from { - transform: translateX(calc(100% + 24rem)); + transform: translateX(calc(100% + 24px)); opacity: 0; } to { diff --git a/src/layouts/AppLayout/Header/BurgerButton/BurgerButton.module.scss b/src/layouts/AppLayout/Header/BurgerButton/BurgerButton.module.scss index fa0a4d0f..b35c997d 100644 --- a/src/layouts/AppLayout/Header/BurgerButton/BurgerButton.module.scss +++ b/src/layouts/AppLayout/Header/BurgerButton/BurgerButton.module.scss @@ -1,10 +1,10 @@ .wrapper { - width: 44rem; + width: 44px; } .container { - width: 24rem; - height: 24rem; + width: 24px; + height: 24px; } .line { diff --git a/src/layouts/AppLayout/Header/BurgerButton/BurgerButton.tsx b/src/layouts/AppLayout/Header/BurgerButton/BurgerButton.tsx index 62a4d065..8695a8c3 100644 --- a/src/layouts/AppLayout/Header/BurgerButton/BurgerButton.tsx +++ b/src/layouts/AppLayout/Header/BurgerButton/BurgerButton.tsx @@ -25,7 +25,7 @@ const BurgerButton: React.FC = (props) => { return ( = (props) => { const selectBLE = useCallback(() => wallet.connect(wallets.ledger.id, 'ble'), [ wallet ]) return ( -
+