From 430178baf62beaa8a9cbe40889a749dd29e4a3d3 Mon Sep 17 00:00:00 2001
From: v1rtl <hi@v1rtl.site>
Date: Wed, 7 Aug 2024 16:49:17 +0300
Subject: [PATCH] rewrite some styled components to ve

---
 .../molecules/Dropdown/ActionSheet.tsx        | 11 +++-----
 .../molecules/Dropdown/Dropdown.tsx           |  4 ++-
 .../organisms/Dialog/DialogContent.tsx        | 27 +++++++++++--------
 3 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/components/src/components/molecules/Dropdown/ActionSheet.tsx b/components/src/components/molecules/Dropdown/ActionSheet.tsx
index 62e3659d..c34ca875 100644
--- a/components/src/components/molecules/Dropdown/ActionSheet.tsx
+++ b/components/src/components/molecules/Dropdown/ActionSheet.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { Colors, breakpoints } from '@/src/tokens'
+import { breakpoints } from '@/src/tokens'
 
 import { actionSheeItem } from './styles.css'
 
@@ -50,11 +50,8 @@ const ActionSheetItem = (props: BoxProps) => (
   />
 )
 
-const ActionSheetLinkItem = styled.a<{ $color?: Colors }>(
-  ({ theme, $color = 'text' }) => css`
-    color: ${theme.colors[$color]};
-    font-weight: ${theme.fontWeights.normal};
-  `,
+const ActionSheetLinkItem = (props: BoxProps) => (
+  <Box {...props} color={props.color || '$text'} fontWeight="$normal" />
 )
 
 type Props = {
@@ -100,7 +97,7 @@ export const ActionSheet = React.forwardRef<HTMLDivElement, Props>(
               >
                 {icon}
                 {href ? (
-                  <ActionSheetLinkItem $color={color} href={href}>
+                  <ActionSheetLinkItem color={color} href={href}>
                     {label}
                   </ActionSheetLinkItem>
                 ) : (
diff --git a/components/src/components/molecules/Dropdown/Dropdown.tsx b/components/src/components/molecules/Dropdown/Dropdown.tsx
index dca5097b..a45255af 100644
--- a/components/src/components/molecules/Dropdown/Dropdown.tsx
+++ b/components/src/components/molecules/Dropdown/Dropdown.tsx
@@ -9,6 +9,8 @@ import { Colors, breakpoints } from '@/src/tokens'
 
 import { commonVars, modeVars } from '@/src/css/theme.css'
 
+import { Color } from '@/src/interfaces/withColor'
+
 import { DownChevronSVG, DynamicPopover, ScrollBox } from '../..'
 import { ActionSheet } from './ActionSheet'
 import { Box, BoxProps } from '../../atoms/Box/Box'
@@ -24,7 +26,7 @@ export type DropdownItemObject = {
   wrapper?: (children: React.ReactNode, key: React.Key) => JSX.Element
   icon?: React.ReactNode
   value?: string
-  color?: Colors
+  color?: Color
   disabled?: boolean
   showIndicator?: boolean | Colors
   href?: string
diff --git a/components/src/components/organisms/Dialog/DialogContent.tsx b/components/src/components/organisms/Dialog/DialogContent.tsx
index 4e8cba05..2b3c970d 100644
--- a/components/src/components/organisms/Dialog/DialogContent.tsx
+++ b/components/src/components/organisms/Dialog/DialogContent.tsx
@@ -5,7 +5,7 @@ import { Space } from '@/src/tokens'
 
 import { mq } from '@/src/utils/responsiveHelpers'
 
-import { ScrollBox } from '../..'
+import { Box, BoxProps, ScrollBox } from '../..'
 
 type NativeFromProps = React.FormHTMLAttributes<HTMLFormElement>
 
@@ -75,15 +75,20 @@ const Container = styled.div<{
   `,
 )
 
-const ScrollBoxContent = styled.div<{ $gap: Space }>(
-  ({ theme, $gap }) => css`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: flex-start;
-    width: ${theme.space.full};
-    gap: ${theme.space[$gap]};
-  `,
+const ScrollBoxContent = ({
+  gap,
+  children,
+}: Pick<BoxProps, 'gap' | 'children'>) => (
+  <Box
+    alignItems="center"
+    display="flex"
+    flexDirection="column"
+    gap={gap}
+    justifyContent="flex-start"
+    width="$full"
+  >
+    {children}
+  </Box>
 )
 
 export const DialogContent = React.forwardRef<
@@ -114,7 +119,7 @@ export const DialogContent = React.forwardRef<
         {...{ target, method, action, onSubmit }}
       >
         <ScrollBox {...props} horizontalPadding={horizontalPadding}>
-          <ScrollBoxContent $gap={gap}>{children}</ScrollBoxContent>
+          <ScrollBoxContent gap={gap}>{children}</ScrollBoxContent>
         </ScrollBox>
       </Container>
     )