fix: use object syntax for keyframes

lifinance · Oct 11, 2023 · 8c2032f · 8c2032f
1 parent c0ac17d
commit 8c2032f
Showing 1 changed file with 12 additions and 12 deletions.
diff --git a/packages/widget/src/config/theme.ts b/packages/widget/src/config/theme.ts
@@ -91,16 +91,16 @@ const shape = {
   borderRadiusSecondary: 8,
 };
 
-const enterKeyframe = keyframes`
-  0% {
-    transform: scale(0);
-    opacity: 0.05;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 0.1;
-  }
-`;
+const enterKeyframe = keyframes({
+  '0%': {
+    transform: 'scale(0)',
+    opacity: 0.05,
+  },
+  '100%': {
+    transform: 'scale(1)',
+    opacity: 0.1,
+  },
+});
 
 export const createTheme = (mode: PaletteMode, theme: ThemeConfig = {}) => {
   const primaryMainColor =
@@ -186,12 +186,12 @@ export const createTheme = (mode: PaletteMode, theme: ThemeConfig = {}) => {
           root: {
             [`& .${touchRippleClasses.ripple}.${touchRippleClasses.rippleVisible}`]:
               {
-                animationName: `${enterKeyframe}`,
+                animationName: enterKeyframe,
               },
             [`& .${touchRippleClasses.ripple}.${touchRippleClasses.rippleVisible}`]:
               {
                 opacity: 0.1,
-                animationName: `${enterKeyframe}`,
+                animationName: enterKeyframe,
               },
           },
         },