From be9642166b652e65c10da3061135b1669f24ae1e Mon Sep 17 00:00:00 2001
From: v1rtl <hi@v1rtl.site>
Date: Fri, 1 Nov 2024 15:10:43 +0200
Subject: [PATCH] more fixes

---
 components/src/components/atoms/Button/Button.tsx          | 2 +-
 components/src/components/molecules/Dropdown/Dropdown.tsx  | 2 +-
 components/src/components/molecules/Input/Input.tsx        | 2 +-
 components/src/components/molecules/Modal/Modal.tsx        | 2 +-
 .../components/molecules/Modal/utils/getValueForMode.ts    | 6 +++---
 components/src/components/molecules/Profile/Profile.tsx    | 1 -
 components/src/components/molecules/Profile/styles.css.ts  | 3 +++
 components/src/components/molecules/Select/Select.tsx      | 7 ++++---
 components/src/components/molecules/Select/styles.css.ts   | 4 ++++
 components/src/components/molecules/Slider/Slider.tsx      | 2 +-
 components/src/components/molecules/Toggle/Toggle.tsx      | 4 +++-
 components/src/components/organisms/Toast/Toast.tsx        | 4 ++--
 components/src/css/sprinkles.css.ts                        | 2 +-
 docs/src/components/NavBar.tsx                             | 5 ++---
 14 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/components/src/components/atoms/Button/Button.tsx b/components/src/components/atoms/Button/Button.tsx
index 4a925f6c..25f106a2 100644
--- a/components/src/components/atoms/Button/Button.tsx
+++ b/components/src/components/atoms/Button/Button.tsx
@@ -210,7 +210,7 @@ const CounterIconBox = ({
     height="6"
     justifyContent="center"
     minWidth="6"
-    opacity={$visible ? 1 : 0}
+    opacity={$visible ? '1' : '0'}
     pointerEvents="none"
     px="1"
     transitionDuration={300}
diff --git a/components/src/components/molecules/Dropdown/Dropdown.tsx b/components/src/components/molecules/Dropdown/Dropdown.tsx
index 74650cb5..68eac5d6 100644
--- a/components/src/components/molecules/Dropdown/Dropdown.tsx
+++ b/components/src/components/molecules/Dropdown/Dropdown.tsx
@@ -144,7 +144,7 @@ const DropdownMenuBox = React.forwardRef<
       bottom={$direction === 'up' ? 'full' : 'unset'}
       marginBottom={$direction === 'up' ? '1.5' : 'unset'}
       marginTop={$direction === 'down' ? '1.5' : 'unset'}
-      opacity={1}
+      opacity="1"
       padding="1.5"
       ref={ref}
       // transform={match([$state, $direction, $shortThrow])
diff --git a/components/src/components/molecules/Input/Input.tsx b/components/src/components/molecules/Input/Input.tsx
index 183aad70..ebab3d37 100644
--- a/components/src/components/molecules/Input/Input.tsx
+++ b/components/src/components/molecules/Input/Input.tsx
@@ -215,7 +215,7 @@ const ActionButton = ({
       flexShrink={0}
       justifyContent="flex-start"
       // marginLeft={`calc(-1 * ${getValueForSize($size, 'iconPadding')})`}
-      opacity={1}
+      opacity="1"
       // paddingRight={getValueForSize($size, 'outerPadding')}
       transform={scale(1)}
       transition="all 0.1s ease-in-out"
diff --git a/components/src/components/molecules/Modal/Modal.tsx b/components/src/components/molecules/Modal/Modal.tsx
index 7d5c3182..2bf26d08 100644
--- a/components/src/components/molecules/Modal/Modal.tsx
+++ b/components/src/components/molecules/Modal/Modal.tsx
@@ -35,7 +35,7 @@ const Container: React.FC<BoxProps & ContainerProps> = ({
         base: getValueForMode(mobileMode, 'left'),
         sm: getValueForMode(desktopMode, 'left'),
       }}
-      opacity={entered ? 1 : 0}
+      opacity={entered ? '1' : '0'}
       position="fixed"
       top={{
         base: getValueForMode(mobileMode, 'top'),
diff --git a/components/src/components/molecules/Modal/utils/getValueForMode.ts b/components/src/components/molecules/Modal/utils/getValueForMode.ts
index 933be8d2..34498be9 100644
--- a/components/src/components/molecules/Modal/utils/getValueForMode.ts
+++ b/components/src/components/molecules/Modal/utils/getValueForMode.ts
@@ -8,7 +8,7 @@ type Properties = {
   left: Space
   translate: string
   transform: string
-  bottom: string
+  bottom: Space
 }
 
 type Property = keyof Properties
@@ -28,7 +28,7 @@ const modeMap: { [key in Mode]: Properties } = {
     left: '0',
     transform: 'translateY(-128px)',
     translate: 'unset',
-    bottom: 'uset',
+    bottom: 'unset',
   },
   desktop: {
     width: 'min',
@@ -39,6 +39,6 @@ const modeMap: { [key in Mode]: Properties } = {
     bottom: 'unset',
   },
 }
-export const getValueForMode = (mode: Mode, property: Property) => {
+export const getValueForMode = <P extends Property>(mode: Mode, property: P) => {
   return modeMap[mode]?.[property] || modeMap.desktop[property]
 }
diff --git a/components/src/components/molecules/Profile/Profile.tsx b/components/src/components/molecules/Profile/Profile.tsx
index 07660a6a..d243c6fa 100644
--- a/components/src/components/molecules/Profile/Profile.tsx
+++ b/components/src/components/molecules/Profile/Profile.tsx
@@ -72,7 +72,6 @@ const Container = React.forwardRef<HTMLElement, BoxProps & ContainerProps>(
         hover: translateY($hasDropdown ? -1 : 0),
       }}
       transitionDuration={150}
-      transitionProperty="color, border-color, background-color, transform, filter"
       transitionTimingFunction="inOut"
       zIndex={10}
       {...props}
diff --git a/components/src/components/molecules/Profile/styles.css.ts b/components/src/components/molecules/Profile/styles.css.ts
index d54c2018..b3c18891 100644
--- a/components/src/components/molecules/Profile/styles.css.ts
+++ b/components/src/components/molecules/Profile/styles.css.ts
@@ -2,6 +2,9 @@ import { sprinkles } from '@/src/css/sprinkles.css'
 import { recipe } from '@vanilla-extract/recipes'
 
 export const variants = recipe({
+  base: {
+    transitionProperty: 'color, border-color, background-color, transform, filter',
+  },
   variants: {
     size: {
       small: sprinkles({
diff --git a/components/src/components/molecules/Select/Select.tsx b/components/src/components/molecules/Select/Select.tsx
index 1f55adbd..8c7611d2 100644
--- a/components/src/components/molecules/Select/Select.tsx
+++ b/components/src/components/molecules/Select/Select.tsx
@@ -27,6 +27,7 @@ import { getValueForTransitionState } from './utils/getValueForTransitionState'
 import { cssVars } from '@/src/css/theme.css'
 import { uniqueId } from '@/src/utils/uniqueId'
 import { ScrollBox } from '../../atoms'
+import clsx from 'clsx'
 
 const CREATE_OPTION_VALUE = 'CREATE_OPTION_VALUE'
 
@@ -101,10 +102,10 @@ const SelectContainer = ({
   />
 )
 
-const RootInput = React.forwardRef<HTMLInputElement, BoxProps>((props, ref) => (
+const RootInput = React.forwardRef<HTMLInputElement, BoxProps>(({ className, ...props }, ref) => (
   <Box
     {...props}
-    appearance="none"
+    className={clsx(styles.rootInput, className)}
     as="input"
     overflow="hidden"
     position="absolute"
@@ -222,7 +223,7 @@ const ToggleMenuButton = ({
         display="block"
         fill="currentColor"
         transform={rotate(rotation)}
-        transitionDuration="200"
+        transitionDuration={200}
         transitionProperty="all"
         transitionTimingFunction="inOut"
         wh={getValueForSize($size, 'iconWidth')}
diff --git a/components/src/components/molecules/Select/styles.css.ts b/components/src/components/molecules/Select/styles.css.ts
index 43ec574a..eb52fef9 100644
--- a/components/src/components/molecules/Select/styles.css.ts
+++ b/components/src/components/molecules/Select/styles.css.ts
@@ -9,3 +9,7 @@ export const input = style({
     },
   },
 })
+
+export const rootInput = style({
+  appearance: 'none',
+})
diff --git a/components/src/components/molecules/Slider/Slider.tsx b/components/src/components/molecules/Slider/Slider.tsx
index 5f6d77ab..c9897c4d 100644
--- a/components/src/components/molecules/Slider/Slider.tsx
+++ b/components/src/components/molecules/Slider/Slider.tsx
@@ -49,7 +49,7 @@ const SliderComponent = React.forwardRef<HTMLElement, BoxProps>(
       className={clsx(styles.slider, className)}
       cursor={{ base: 'pointer', disabled: 'not-allowed' }}
       height="1.5"
-      opacity={1}
+      opacity="1"
       ref={ref}
       type="range"
       width="full"
diff --git a/components/src/components/molecules/Toggle/Toggle.tsx b/components/src/components/molecules/Toggle/Toggle.tsx
index 43c1141f..d89ae42f 100644
--- a/components/src/components/molecules/Toggle/Toggle.tsx
+++ b/components/src/components/molecules/Toggle/Toggle.tsx
@@ -33,7 +33,9 @@ const CheckBox = React.forwardRef<
     justifyContent="center"
     position="relative"
     ref={ref}
-    transition="background-color 0.1s ease-in-out"
+    transitionProperty="background-color"
+    transitionDuration={100}
+    transitionTimingFunction="ease-in-out"
     type="checkbox"
   />
 ))
diff --git a/components/src/components/organisms/Toast/Toast.tsx b/components/src/components/organisms/Toast/Toast.tsx
index c34bd6d1..993a2c92 100644
--- a/components/src/components/organisms/Toast/Toast.tsx
+++ b/components/src/components/organisms/Toast/Toast.tsx
@@ -20,7 +20,7 @@ const CloseIcon = (props: BoxProps) => (
     {...props}
     as={<CrossSVG />}
     cursor="pointer"
-    opacity={{ base: 0.5, hover: 0.7 }}
+    opacity={{ base: '0.5', hover: '0.7' }}
     padding="1.5"
     position="absolute"
     right="2.5"
@@ -80,7 +80,7 @@ const Container = React.forwardRef<HTMLElement, BoxProps & ContainerProps>(
       maxWidth={match($mobile)
         .with(true, () => 'unset' as const)
         .otherwise(() => '112')}
-      opacity={$state.status === 'entered' ? 1 : 0}
+      opacity={$state.status === 'entered' ? '1' : '0'}
       padding="4.5"
       position="fixed"
       ref={ref}
diff --git a/components/src/css/sprinkles.css.ts b/components/src/css/sprinkles.css.ts
index 7d278534..e595906b 100644
--- a/components/src/css/sprinkles.css.ts
+++ b/components/src/css/sprinkles.css.ts
@@ -26,7 +26,7 @@ const colorProperties = defineProperties({
     borderTopColor: colorPropertiesObject,
     borderLeftColor: colorPropertiesObject,
     borderRightColor: colorPropertiesObject,
-    opacity: [0, 1, 0.5, 0.7, 0.9, 0.95, 1, 'inherit', 'initial'],
+    opacity: ['0', '1', '0.5', '0.7', '0.9', '0.95', '1', 'inherit', 'initial'],
   },
   shorthands: {
     bg: ['backgroundColor'],
diff --git a/docs/src/components/NavBar.tsx b/docs/src/components/NavBar.tsx
index 295a3192..9ded7ada 100644
--- a/docs/src/components/NavBar.tsx
+++ b/docs/src/components/NavBar.tsx
@@ -3,7 +3,6 @@ import LogoSVG from '~/assets/ENSLogo.svg'
 import GithubSVG from '~/assets/Github.svg'
 import FigmaSVG from '~/assets/Figma.svg'
 import { Link } from './Link'
-import { Tag } from '@ensdomains/thorin'
 
 export const NavBar = ({
   open,
@@ -42,14 +41,14 @@ export const NavBar = ({
               as={CrossSVG}
               wh="full"
               position="absolute"
-              opacity={open ? 1 : 0}
+              opacity={open ? '1' : '0'}
               // transition="opacity 0.2s ease-in-out"
             />
             <Box
               as={MenuSVG}
               position="absolute"
               wh="full"
-              opacity={open ? 0 : 1}
+              opacity={open ? '0' : '1'}
               transition="opacity 0.2s ease-in-out"
             />
           </Box>