From 71671a4db886f9f1f2b9a62129c90f8986d9bc59 Mon Sep 17 00:00:00 2001
From: v1rtl <hi@v1rtl.site>
Date: Thu, 7 Nov 2024 00:18:23 +0200
Subject: [PATCH] fix up some styles

---
 .../src/components/molecules/Modal/Modal.tsx  | 33 +++++++++++--------
 .../components/molecules/Modal/styles.css.ts  | 21 ++++++++++++
 .../components/organisms/Dialog/Dialog.tsx    |  4 +--
 .../src/components/organisms/Toast/Toast.tsx  |  2 +-
 4 files changed, 44 insertions(+), 16 deletions(-)
 create mode 100644 components/src/components/molecules/Modal/styles.css.ts

diff --git a/components/src/components/molecules/Modal/Modal.tsx b/components/src/components/molecules/Modal/Modal.tsx
index 2bf26d08..5e211e79 100644
--- a/components/src/components/molecules/Modal/Modal.tsx
+++ b/components/src/components/molecules/Modal/Modal.tsx
@@ -6,6 +6,9 @@ import type { BoxProps } from '../../atoms/Box/Box'
 import { Box } from '../../atoms/Box/Box'
 import { getValueForMode } from './utils/getValueForMode'
 import { Backdrop } from '../Backdrop/Backdrop'
+import { clsx } from 'clsx'
+import * as styles from './styles.css'
+import { assignInlineVars } from '@vanilla-extract/dynamic'
 
 type ContainerProps = {
   $state: TransitionState['status']
@@ -17,6 +20,8 @@ const Container: React.FC<BoxProps & ContainerProps> = ({
   $state,
   $alignTop,
   $mobileOnly,
+  className,
+  style,
   ...props
 }) => {
   const mobileMode = $alignTop ? 'mobileTop' : 'mobileBottom'
@@ -41,26 +46,28 @@ const Container: React.FC<BoxProps & ContainerProps> = ({
         base: getValueForMode(mobileMode, 'top'),
         sm: getValueForMode(desktopMode, 'top'),
       }}
-      transform={{
-        base: entered
-          ? 'translateY(0px)'
-          : getValueForMode(mobileMode, 'transform'),
-        sm: entered
-          ? 'translateY(0px)'
-          : getValueForMode(desktopMode, 'transform'),
-      }}
+
       transitionDuration={300}
       transitionProperty="all"
       transitionTimingFunction="popIn"
-      translate={{
-        base: getValueForMode(mobileMode, 'translate'),
-        sm: getValueForMode(desktopMode, 'translate'),
-      }}
       width={{
         base: getValueForMode(mobileMode, 'width'),
         sm: getValueForMode(desktopMode, 'width'),
       }}
       zIndex={9999}
+      className={clsx(styles.container, className)}
+      style={{
+        ...style, ...assignInlineVars({
+          [styles.transformBase]: entered
+            ? 'translateY(0px)'
+            : getValueForMode(mobileMode, 'transform'),
+          [styles.translateBase]: getValueForMode(mobileMode, 'translate'),
+          [styles.transformSm]: entered
+            ? 'translateY(0px)'
+            : getValueForMode(desktopMode, 'transform'),
+          [styles.translateSm]: getValueForMode(desktopMode, 'translate'),
+        }),
+      }}
     />
   )
 }
@@ -81,7 +88,7 @@ export type ModalProps = {
   renderCallback?: () => void
   /** if true, modal will remain centered to bottom of page */
   mobileOnly?: boolean
-} & NativeDivProps
+} & Omit<NativeDivProps, 'color'>
 
 export const Modal = ({
   children,
diff --git a/components/src/components/molecules/Modal/styles.css.ts b/components/src/components/molecules/Modal/styles.css.ts
new file mode 100644
index 00000000..40e36b89
--- /dev/null
+++ b/components/src/components/molecules/Modal/styles.css.ts
@@ -0,0 +1,21 @@
+import { responsiveConditions } from '@/src/css/sprinkles.css'
+import { createVar, style } from '@vanilla-extract/css'
+
+export const transformBase = createVar()
+
+export const transformSm = createVar()
+
+export const translateBase = createVar()
+
+export const translateSm = createVar()
+
+export const container = style({
+  'transform': transformBase,
+  'translate': translateBase,
+  '@media': {
+    [responsiveConditions.sm['@media']]: {
+      transform: transformSm,
+      translate: translateSm,
+    },
+  },
+})
diff --git a/components/src/components/organisms/Dialog/Dialog.tsx b/components/src/components/organisms/Dialog/Dialog.tsx
index 71f7d432..a996e3a7 100644
--- a/components/src/components/organisms/Dialog/Dialog.tsx
+++ b/components/src/components/organisms/Dialog/Dialog.tsx
@@ -35,7 +35,7 @@ const CloseButton = ({ className, ...props }: BoxProps) => (
     transitionTimingFunction="inOut"
     wh="8"
   >
-    <Box as={<CrossSVG />} color="greyPrimary" display="block" wh="4" />
+    <Box as={CrossSVG} color="greyPrimary" display="block" wh="4" />
   </Box>
 )
 
@@ -63,7 +63,7 @@ const StyledCard = ({ className, ...props }: BoxProps) => (
 type NonNullableAlert = NonNullable<WithAlert['alert']>
 
 const Icon = ({ $alert, className, ...props }: BoxProps & { $alert: NonNullableAlert }) => {
-  const Icon = ['error', 'warning'].includes($alert) ? <AlertSVG /> : <EthSVG />
+  const Icon = ['error', 'warning'].includes($alert) ? AlertSVG : EthSVG
   return (
     <Box
       {...props}
diff --git a/components/src/components/organisms/Toast/Toast.tsx b/components/src/components/organisms/Toast/Toast.tsx
index 993a2c92..e3d4faa0 100644
--- a/components/src/components/organisms/Toast/Toast.tsx
+++ b/components/src/components/organisms/Toast/Toast.tsx
@@ -18,7 +18,7 @@ import clsx from 'clsx'
 const CloseIcon = (props: BoxProps) => (
   <Box
     {...props}
-    as={<CrossSVG />}
+    as={CrossSVG}
     cursor="pointer"
     opacity={{ base: '0.5', hover: '0.7' }}
     padding="1.5"