style: use vanilla css for keyframes

layerx-labs · Apr 4, 2024 · 24af521 · 24af521
1 parent cba43e3
commit 24af521
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 21 deletions.
diff --git a/src/atoms/spinner/styles.tsx b/src/atoms/spinner/styles.tsx
@@ -1,4 +1,4 @@
-import styled, { keyframes } from 'styled-components/macro';
+import styled from 'styled-components';
 import { rem } from 'polished';
 import { colors } from '../../ions/variables';
 
@@ -7,20 +7,20 @@ interface LoadingProps {
   size?: string;
 }
 
-const rotation = keyframes`
-  from {
+export const Loading = styled.div<LoadingProps>`
+  @keyframes rotation {
+    from {
       transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
   }
-  to {
-    transform: rotate(360deg);
-  }
-`;
 
-export const Loading = styled.div<LoadingProps>`
   border: ${rem('5px')} solid hsla(0, 0%, 48%, 0.5);
   border-top-color: ${props => props.fill || colors.white};
   border-radius: 50%;
   width: ${props => props.size || rem('20px')};
   height: ${props => props.size || rem('20px')};
-  animation: ${rotation} 0.8s ease infinite;
+  animation: rotation 0.8s ease infinite;
 `;
diff --git a/src/organisms/modal-drawer/styles.tsx b/src/organisms/modal-drawer/styles.tsx
@@ -1,4 +1,4 @@
-import styled, { keyframes } from 'styled-components/macro';
+import styled from 'styled-components';
 import { rem, rgba, timingFunctions } from 'polished';
 import { colors, typography } from '../../ions/variables';
 import { device } from '../../ions/breakpoints';
@@ -7,16 +7,6 @@ interface ModalStyleBaseProps {
   zIndex: number;
 }
 
-const slideInLeft = keyframes`
-  from {
-    transform: translateX(100%);
-  }
-
-  to {
-    transform: translateX(0);
-  }
-`;
-
 export const ModalOverlay = styled.div<ModalStyleBaseProps>`
   position: fixed;
   top: 0;
@@ -39,6 +29,16 @@ export const ModalWrapper = styled.div<ModalStyleBaseProps>`
 `;
 
 export const ModalContainer = styled.div<ModalStyleBaseProps>`
+  @keyframes slideInLeft {
+    from {
+      transform: translateX(100%);
+    }
+
+    to {
+      transform: translateX(0);
+    }
+  }
+
   margin-left: auto;
   background: ${colors.white};
   width: 100%;
@@ -51,7 +51,7 @@ export const ModalContainer = styled.div<ModalStyleBaseProps>`
   animation-duration: 1s;
   animation-fill-mode: forwards;
   transform: translateX(100%);
-  animation-name: ${slideInLeft};
+  animation-name: slideInLeft;
 
   @media ${device.s} {
     max-width: ${rem('400px')};