From 868ee717a6e33e3a266bc0e0fee3d8f8cb52c2d3 Mon Sep 17 00:00:00 2001
From: alter-eggo <anastas3993@gmail.com>
Date: Wed, 10 Apr 2024 16:32:38 +0400
Subject: [PATCH] fix: shimmer styles import

---
 src/app/components/account-total-balance.tsx              | 3 +--
 src/app/components/account/account-name.tsx               | 3 +--
 src/app/ui/components/skeleton-loader/skeleton-loader.tsx | 3 +--
 src/app/ui/shared/shimmer-styles.ts                       | 6 +++---
 4 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/app/components/account-total-balance.tsx b/src/app/components/account-total-balance.tsx
index de120b7122f..1e7cfcf6dac 100644
--- a/src/app/components/account-total-balance.tsx
+++ b/src/app/components/account-total-balance.tsx
@@ -1,6 +1,5 @@
 import { memo } from 'react';
 
-import { css } from 'leather-styles/css';
 import { styled } from 'leather-styles/jsx';
 
 import { useTotalBalance } from '@app/common/hooks/balance/use-total-balance';
@@ -24,7 +23,7 @@ export const AccountTotalBalance = memo(({ btcAddress, stxAddress }: AccountTota
   return (
     <SkeletonLoader height="20px" isLoading={isInitialLoading}>
       <styled.span
-        className={css(shimmerStyles)}
+        className={shimmerStyles}
         textStyle="label.02"
         data-state={isLoading ? 'loading' : undefined}
       >
diff --git a/src/app/components/account/account-name.tsx b/src/app/components/account/account-name.tsx
index c7040d8fa78..1fb567865e9 100644
--- a/src/app/components/account/account-name.tsx
+++ b/src/app/components/account/account-name.tsx
@@ -1,6 +1,5 @@
 import { memo } from 'react';
 
-import { css } from 'leather-styles/css';
 import { styled } from 'leather-styles/jsx';
 
 import { shimmerStyles } from '@app/ui/shared/shimmer-styles';
@@ -12,7 +11,7 @@ interface AccountNameLayoutProps {
 
 export const AccountNameLayout = memo(({ children, isLoading }: AccountNameLayoutProps) => (
   <styled.span
-    className={css(shimmerStyles)}
+    className={shimmerStyles}
     textStyle="label.02"
     aria-busy={isLoading}
     data-state={isLoading ? 'loading' : undefined}
diff --git a/src/app/ui/components/skeleton-loader/skeleton-loader.tsx b/src/app/ui/components/skeleton-loader/skeleton-loader.tsx
index 1896cf67d6a..940a5065727 100644
--- a/src/app/ui/components/skeleton-loader/skeleton-loader.tsx
+++ b/src/app/ui/components/skeleton-loader/skeleton-loader.tsx
@@ -1,4 +1,3 @@
-import { css } from 'leather-styles/css';
 import { Box } from 'leather-styles/jsx';
 
 import { shimmerStyles } from '@app/ui/shared/shimmer-styles';
@@ -24,7 +23,7 @@ export function SkeletonLoader({
         bgColor="ink.non-interactive"
         data-state="loading"
         borderRadius="sm"
-        className={css(shimmerStyles)}
+        className={shimmerStyles}
       />
     );
   }
diff --git a/src/app/ui/shared/shimmer-styles.ts b/src/app/ui/shared/shimmer-styles.ts
index 508a03e9390..f89a620d385 100644
--- a/src/app/ui/shared/shimmer-styles.ts
+++ b/src/app/ui/shared/shimmer-styles.ts
@@ -1,6 +1,6 @@
-import type { SystemStyleObject } from 'leather-styles/types';
+import { css } from 'leather-styles/css';
 
-export const shimmerStyles: SystemStyleObject = {
+export const shimmerStyles = css({
   '&[data-state=loading]': {
     display: 'inline-block',
     WebkitMask: 'linear-gradient(-60deg, #000 30%, #0005, #000 70%) right/300% 100%',
@@ -8,4 +8,4 @@ export const shimmerStyles: SystemStyleObject = {
     animation: 'shimmer 1.5s infinite',
     color: 'ink.text-subdued',
   },
-};
+});