Rem => Px

src/app/global-error.tsx

@@ -81,7 +81,7 @@ const GlobalError = ({ error, reset }: GlobalErrorViewProps) => {
           locales={languages as unknown as Intl.LanguagesKeys[]}
         >
           <div className='width-container flex flex-1'>
-            <div className="flex flex-col items-center justify-center m-auto max-w-[520rem]">
+            <div className="flex flex-col items-center justify-center m-auto max-w-[520px]">
               <Text
                 className="text-center"
                 message={messages.error.title}

src/components/AmountInput/AmountInput.tsx

@@ -29,7 +29,7 @@ const AmountInput: React.FC<AmountInputProps> = (props) => {
   } = props
 
   const controlId = useId()
-  const { isMobile } = device.useData()
+  const { isDesktop } = device.useData()
   const testId = dataTestId || `input-${controlId}`
   const inputRef = useRef<HTMLInputElement>(null)
 
@@ -38,8 +38,8 @@ const AmountInput: React.FC<AmountInputProps> = (props) => {
       className={cx(s.input, className, 'w-full', {
         'text-dark': !error,
         'text-error': error,
-        'text-h20': isMobile,
-        'text-t40m': !isMobile,
+        'text-h20': !isDesktop,
+        'text-t40m': isDesktop,
       })}
       ref={inputRef}
       placeholder="0"

src/components/AutoHeightToggle/AutoHeightToggle.tsx

@@ -35,14 +35,14 @@ const AutoHeightToggle: React.FC<AutoHeightToggleProps> = (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 ])

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%,

src/components/Bone/Bone.tsx

@@ -29,11 +29,11 @@ const Bone: React.FC<BoneProps> = (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

src/components/Button/Button.tsx

@@ -87,11 +87,11 @@ const Button: React.FC<ButtonProps> = (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({

src/components/ButtonRangePicker/ButtonRangePicker.module.scss

@@ -1,3 +1,3 @@
 .rounded {
-  border-radius: 11rem;
+  border-radius: 11px;
 }

src/components/Chart/Chart.tsx

@@ -43,7 +43,7 @@ const Chart: React.FC<ChartProps> = (props) => {
     <div
       ref={containerRef}
       className={cx(className, 'relative w-full')}
-      style={{ minHeight: `${height || 340}rem` }}
+      style={{ minHeight: `${height || 340}px` }}
       data-testid={dataTestId}
       onMouseOver={showLegend}
       onMouseLeave={hideLegend}

src/components/Chart/Legend/Percentage/Percentage.module.scss

@@ -1,3 +1,3 @@
 .value {
-  min-width: 70rem;
+  min-width: 70px;
 }

src/components/Chart/Skeleton/Skeleton.tsx

@@ -9,8 +9,8 @@ type SkeletonProps = {
 }
 
 const Skeleton: React.FC<SkeletonProps> = ({ className }) => {
-  const { isMobile } = device.useData()
-  const columns = isMobile ? 4 : 6
+  const { isDesktop } = device.useData()
+  const columns = isDesktop ? 6 : 4
 
   return (
     <div className={className}>
@@ -27,7 +27,7 @@ const Skeleton: React.FC<SkeletonProps> = ({ 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<SkeletonProps> = ({ className }) => {
         <Bone className="w-full h-20" />
       </div>
       <div className="absolute top-4 left-4 w-full">
-        <Bone className="w-[140rem] h-24" />
+        <Bone className="w-[140px] h-24" />
         <Bone className="mt-12 w-80 h-16" />
       </div>
     </div>

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;

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 {

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,

src/components/Input/InputButton/InputButton.module.scss

@@ -1,4 +1,4 @@
 .button {
-  height: 24rem;
+  height: 24px;
   background-color: rgba($color-dark-rgb, .06);
 }

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 {

src/components/MenuDropdown/Option/Option.module.scss

@@ -1,5 +1,5 @@
 .option {
-  min-width: 160rem;
+  min-width: 160px;
 
   @media (hover: hover) {
     &:hover {

src/components/MenuDropdown/Option/Option.tsx

@@ -39,7 +39,7 @@ const Option: React.FC<OptionProps> = (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}

src/components/Modal/Content/Buttons/Buttons.module.scss

@@ -1,5 +1,5 @@
 @include desktop {
   .button {
-    min-width: 210rem;
+    min-width: 210px;
   }
 }

src/components/Modal/Content/Content.tsx

@@ -43,7 +43,7 @@ const Content: React.FC<ContentProps> = (props) => {
     handleClose,
   } = props
 
-  const { isMobile } = device.useData()
+  const { isDesktop } = device.useData()
 
   const isWide = size === 'wide'
   const isNarrow = size === 'narrow'
@@ -119,7 +119,7 @@ const Content: React.FC<ContentProps> = (props) => {
       <Description
         as="div"
         className={cx(contentClassName, 'mt-24 relative h-full', {
-          'flex-1': isMobile,
+          'flex-1': !isDesktop,
         })}
       >
         {isNarrow && descriptionNode}

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;
   }
 }

src/components/Modal/Modal.tsx

@@ -29,7 +29,7 @@ const Modal: React.FC<ModalProps> = (props) => {
   // This state use for animation
   const [ isOpen, setIsOpen ] = useState(true)
 
-  const { isMobile, isDesktop } = device.useData()
+  const { isDesktop } = device.useData()
 
   useEffect(() => {
     // Headless UI Dialog sets the #global-wrapper to inert,
@@ -117,8 +117,8 @@ const Modal: React.FC<ModalProps> = (props) => {
           >
             <DialogPanel
               className={cx(className, s.modal, 'relative m-auto p-24 bg-modal', s[size], {
-                'rounded-16': !isMobile,
-                'flex flex-col': isMobile,
+                'rounded-16': isDesktop,
+                'flex flex-col': !isDesktop,
               })}
               data-testid={dataTestId}
             >

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;
 }

src/components/PercentInput/PercentInput.tsx

@@ -36,7 +36,7 @@ export type PercentInputProps = {
 }
 
 const PercentInput: React.FC<PercentInputProps> = ({ field, isDisabled, dataTestId }) => {
-  const { isMobile } = device.useData()
+  const { isDesktop } = device.useData()
 
   const { value, error } = forms.useFieldValue(field)
 
@@ -106,12 +106,12 @@ const PercentInput: React.FC<PercentInputProps> = ({ field, isDisabled, dataTest
 
   return (
     <div
-      className="pt-16 px-16 pb-12 flex flex-col justify-between bg-dark/5 rounded-8 h-[108rem]"
+      className="pt-16 px-16 pb-12 flex flex-col justify-between bg-dark/5 rounded-8 h-[108px]"
       data-testid={dataTestId}
     >
       <div
         className={cx('flex justify-between items-center w-full gap-8', {
-          'pt-8': isMobile,
+          'pt-8': !isDesktop,
         })}
       >
         <AmountInput

src/components/PopupInfo/PopupInfo.module.scss

@@ -1,12 +1,12 @@
 @include desktop {
   .container {
-    min-width: 347rem;
+    min-width: 347px;
   }
 }
 
 @include except-desktop {
   .container {
-    min-width: 270rem;
+    min-width: 270px;
     max-width: 100%;
   }
 }

src/components/PopupInfo/PopupInfo.tsx

@@ -30,12 +30,12 @@ export type PopupInfoProps = {
 const PopupInfo: React.FC<PopupInfoProps> = (props) => {
   const { className, buttonClassName, childClassName, headNode, children } = props
 
-  const { isMobile } = device.useData()
+  const { isDesktop } = device.useData()
   const [ isOpen, setIsOpen ] = useState(false)
 
   const { refs, floatingStyles, context } = useFloating({
     open: isOpen,
-    placement: isMobile ? 'top' : 'top-end',
+    placement: isDesktop ? 'top-end' : 'top',
     middleware: [
       offset(10),
       flip({
@@ -94,7 +94,7 @@ const PopupInfo: React.FC<PopupInfoProps> = (props) => {
                 {children}
               </div>
               {
-                isMobile && (
+                !isDesktop && (
                   <ButtonBase
                     className="absolute -top-40 right-0 rounded-full bg-background p-4 border border-dark/10"
                     ariaLabel={messages.closePopup}