From ddee04d17c15f6f694216efad8d499dd10fe766f Mon Sep 17 00:00:00 2001
From: Gabriel Montes <gabriel@bloq.com>
Date: Wed, 21 Feb 2024 15:16:50 -0500
Subject: [PATCH] Fix CSS class names

---
 theme/components/Modal.ts             | 2 +-
 theme/global.ts                       | 4 ++--
 theme/utils/getOutlinedFieldStyles.ts | 2 +-
 ui/shared/Tabs/AdaptiveTabsList.tsx   | 6 +++---
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/theme/components/Modal.ts b/theme/components/Modal.ts
index d2e291f8d5..1978a897c5 100644
--- a/theme/components/Modal.ts
+++ b/theme/components/Modal.ts
@@ -21,7 +21,7 @@ const baseStyleDialog = defineStyle((props) => {
 
 const baseStyleDialogContainer = defineStyle({
   '::-webkit-scrollbar': { display: 'none' },
-  'scrollbar-width': 'none',
+  scrollbarWidth: 'none',
   // '@supports (height: -webkit-fill-available)': { height: '-webkit-fill-available' },
 });
 
diff --git a/theme/global.ts b/theme/global.ts
index 5ddff6bcf7..65380d01fb 100644
--- a/theme/global.ts
+++ b/theme/global.ts
@@ -8,8 +8,8 @@ const global = (props: StyleFunctionProps) => ({
   body: {
     bg: mode('white', 'black')(props),
     ...getDefaultTransitionProps(),
-    '-webkit-tap-highlight-color': 'transparent',
-    'font-variant-ligatures': 'no-contextual',
+    WebkitTapHighlightColor: 'transparent',
+    fontVariantLigatures: 'no-contextual',
   },
   mark: {
     bgColor: mode('green.100', 'green.800')(props),
diff --git a/theme/utils/getOutlinedFieldStyles.ts b/theme/utils/getOutlinedFieldStyles.ts
index cae5060e4e..e5c6f554d3 100644
--- a/theme/utils/getOutlinedFieldStyles.ts
+++ b/theme/utils/getOutlinedFieldStyles.ts
@@ -32,7 +32,7 @@ export default function getOutlinedFieldStyles(props: StyleFunctionProps) {
       },
       ':-webkit-autofill': {
         // background color for disabled input which value was selected from browser autocomplete popup
-        '-webkit-box-shadow': `0 0 0px 1000px ${ mode('rgba(16, 17, 18, 0.08)', 'rgba(255, 255, 255, 0.08)')(props) } inset`,
+        WebkitBoxShadow: `0 0 0px 1000px ${ mode('rgba(16, 17, 18, 0.08)', 'rgba(255, 255, 255, 0.08)')(props) } inset`,
       },
     },
     _invalid: {
diff --git a/ui/shared/Tabs/AdaptiveTabsList.tsx b/ui/shared/Tabs/AdaptiveTabsList.tsx
index 5f5ff81f1f..fc93643ebc 100644
--- a/ui/shared/Tabs/AdaptiveTabsList.tsx
+++ b/ui/shared/Tabs/AdaptiveTabsList.tsx
@@ -51,13 +51,13 @@ const AdaptiveTabsList = (props: Props) => {
       overflowX={{ base: 'auto', lg: 'initial' }}
       overscrollBehaviorX="contain"
       css={{
-        'scroll-snap-type': 'x mandatory',
+        scrollSnapType: 'x mandatory',
         // hide scrollbar
         '&::-webkit-scrollbar': { /* Chromiums */
           display: 'none',
         },
-        '-ms-overflow-style': 'none', /* IE and Edge */
-        'scrollbar-width': 'none', /* Firefox */
+        MsOverflowStyle: 'none', /* IE and Edge */
+        scrollbarWidth: 'none', /* Firefox */
       }}
       bgColor={ listBgColor }
       transitionProperty="top,box-shadow,background-color,color"