refactor flex component

Author: 0xonramp

src/app/earn/components/earn-widget/components/selector-button.tsx

@@ -1,8 +1,7 @@
-import { Flex } from '@chakra-ui/react'
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
 import Image from 'next/image'
 
-import { colors } from '@/lib/styles/colors'
+import { cn } from '@/lib/utils/tailwind'
 
 type SelectorProps = {
   onClick: () => void
@@ -19,21 +18,17 @@ export const SelectorButton = ({
   showChevron,
   visible = true,
 }: SelectorProps) => (
-  <Flex
-    align='center'
-    bg={colors.ic.gray[100]}
-    borderRadius='32'
-    cursor='pointer'
+  <div
+    className={cn(
+      'bg-ic-gray-100 flex h-11 shrink-0 cursor-pointer items-center rounded-[32px] p-2.5',
+      visible ? 'visible' : 'invisible',
+    )}
     onClick={onClick}
-    p='10px'
-    h='44px'
-    shrink={0}
-    visibility={visible ? 'visible' : 'hidden'}
   >
     <Image alt={`${symbol} logo`} src={image} width={20} height={20} />
     <p className='text-ic-black mx-2 text-sm font-medium'>{symbol}</p>
     {showChevron !== false && (
       <ChevronDownIcon className='text-ic-gray-900 size-6' />
     )}
-  </Flex>
+  </div>
 )

src/app/globals.css

@@ -127,3 +127,21 @@ body,
   background-attachment: fixed;
   filter: blur(20px) opacity(20%) saturate(100%);
 }
+
+.swap-widget {
+  background:
+    linear-gradient(
+      33deg,
+      rgba(0, 189, 192, 0.05) -9.23%,
+      rgba(0, 249, 228, 0.05) 48.82%,
+      rgba(212, 0, 216, 0.05) 131.54%
+    ),
+    linear-gradient(
+      187deg,
+      rgb(252, 255, 255) -184.07%,
+      rgb(247, 248, 248) 171.05%
+    );
+  box-shadow:
+    rgba(44, 51, 51, 0.25) 0.5px 1px 2px 0px,
+    rgb(252, 255, 255) 2px 2px 1px 0px inset;
+}

src/app/swap/[[...path]]/page.tsx

@@ -1,30 +1,19 @@
 'use client'
 
-import { Flex } from '@chakra-ui/react'
-
 import { Swap } from '@/components/swap'
 import { useSelectedToken } from '@/lib/providers/selected-token-provider'
 
 export default function SwapPage() {
   const { inputToken, isMinting, outputToken } = useSelectedToken()
   return (
-    <Flex
-      direction={['column', 'column', 'column', 'row']}
-      mx='auto'
-      height='inherit'
-    >
-      <Flex
-        className='flex-col gap-8'
-        mb={[4, 4, 4, 12]}
-        mr={4}
-        w={['inherit', '500px']}
-      >
+    <div className='mx-auto flex h-full flex-col lg:flex-row'>
+      <div className='mb-4 mr-1 flex w-full max-w-lg flex-col gap-8 lg:mb-3'>
         <Swap
           isBuying={isMinting}
           inputToken={inputToken}
           outputToken={outputToken}
         />
-      </Flex>
-    </Flex>
+      </div>
+    </div>
   )
 }

src/app/swap/layout.tsx

@@ -1,5 +1,3 @@
-import { Flex } from '@chakra-ui/react'
-
 import { Footer } from '@/components/footer'
 import { Header } from '@/components/header'
 
@@ -14,11 +12,11 @@ export default function Layout({ children }: LayoutProps) {
     <div className='bg-ic-white dark:bg-ic-black h-full w-full'>
       <Providers>
         <Header />
-        <Flex direction='column' mb='50px'>
-          <Flex maxWidth='1024px' m={['0 auto']} p='60px 16px 0px 16px'>
+        <div className='mb-[50px] flex flex-col'>
+          <div className='mx-auto my-0 flex max-w-5xl px-4 pt-[60px]'>
             {children}
-          </Flex>
-        </Flex>
+          </div>
+        </div>
         <Footer />
       </Providers>
     </div>

src/components/settings/warning.tsx

@@ -1,4 +1,3 @@
-import { Flex } from '@chakra-ui/react'
 import { ExclamationCircleIcon } from '@heroicons/react/20/solid'
 
 type WarningProps = {
@@ -12,15 +11,15 @@ function getTexts(lowSlippage: boolean) {
 }
 
 export const Warning = (props: WarningProps) => (
-  <Flex direction={'column'}>
-    <Flex align={'center'} direction={'row'}>
+  <div className='flex flex-col'>
+    <div className='flex items-center'>
       <ExclamationCircleIcon className='text-ic-yellow size-4' />
       <p className='text-ic-gray-600 ml-1.5 text-base font-medium'>
         Slippage warning
       </p>
-    </Flex>
+    </div>
     <p className='text-ic-gray-600 mt-0.5 text-sm font-normal'>
       {getTexts(props.lowSlippage)}
     </p>
-  </Flex>
+  </div>
 )

src/components/swap/components/quote-result/available.tsx

@@ -1,8 +1,6 @@
-import { Flex } from '@chakra-ui/react'
 import Image from 'next/image'
 
 import { StyledSkeleton } from '@/components/skeleton'
-import { colors } from '@/lib/styles/colors'
 import { cn } from '@/lib/utils/tailwind'
 
 import { QuoteDisplay } from './types'
@@ -15,73 +13,58 @@ type QuoteAvailableProps = {
   onClick: () => void
 }
 
-function getBackgroundColor(isSelected: boolean, isBestQuote: boolean) {
-  // return for best quote (whether selected or not)
-  if (isBestQuote) return '#F0FEFF'
-  if (!isBestQuote && isSelected) return '#FFF5FA'
-  return colors.ic.gray[50]
-}
-
-function useHighlightColor(isSelected: boolean, isBestQuote: boolean) {
-  if (isBestQuote && isSelected) {
-    return { border: colors.ic.blue[600], text: 'text-ic-blue-600' }
-  }
-  if (isBestQuote && !isSelected) {
-    return { border: '#CFF5F6', text: 'text-[#CFF5F6]' }
-  }
-  if (!isBestQuote && isSelected) {
-    return {
-      border: '#F178B6',
-      text: 'text-[#F178B6]',
-    }
-  }
-  return {
-    border: colors.ic.gray[400],
-    text: 'text-ic-gray-400',
-  }
-}
-
 export const QuoteAvailable = (props: QuoteAvailableProps) => {
   const { type, isLoading, isSelected, onClick, quote } = props
-  const background = getBackgroundColor(isSelected, quote?.isBestQuote ?? false)
-  const highlight = useHighlightColor(isSelected, quote?.isBestQuote ?? false)
-  const borderWidth = isSelected ? 2 : 0
+  const isBestQuote = quote?.isBestQuote
   return (
-    <Flex
-      bg={background}
-      borderColor={highlight.border}
-      borderRadius='12'
-      borderWidth={borderWidth}
-      cursor='pointer'
-      direction={'column'}
-      p='16px'
-      w='100%'
-      h='110px'
+    <div
+      className={cn(
+        'border-ic-gray-400 flex h-[110px] w-full cursor-pointer flex-col rounded-xl p-4',
+        isSelected ? 'border' : 'border-0',
+        {
+          'bg-[#F0FEFF]': isBestQuote,
+          'border-[#F178B6] bg-[#FFF5FA]': !isBestQuote && isSelected,
+          'bg-ic-gray-50': !isBestQuote && !isSelected,
+          'border-ic-blue-600': isBestQuote && isSelected,
+          'border-[#CFF5F6]': isBestQuote && !isSelected,
+        },
+      )}
       onClick={onClick}
     >
-      <Flex align='space-between' direction='column' justify={'flex-start'}>
-        <Flex justify={'space-between'}>
+      <div className='flex flex-col justify-start'>
+        <div className='flex justify-between'>
           <p className='text-ic-gray-500 text-xs font-medium'>
             {isLoading && <StyledSkeleton width={50} />}
             {!isLoading && quote && quote.inputAmount}
           </p>
-          <Flex direction={'row'} gap={1}>
+          <div className='flex gap-1'>
             {quote?.isBestQuote && (
-              <Flex opacity={isSelected ? 1 : 0.2}>
+              <div
+                className={cn(
+                  'flex',
+                  isSelected ? 'opacity-100' : 'opacity-20',
+                )}
+              >
                 <Image
                   src={'/assets/icon-trophy.svg'}
                   alt={'token icon'}
                   width={12}
                   height={12}
                 />
-              </Flex>
+              </div>
             )}
-            <p className={cn('text-sm font-semibold', highlight.text)}>
+            <p
+              className={cn('text-ic-gray-400 text-sm font-semibold', {
+                'text-[#F178B6]': !isBestQuote && isSelected,
+                'text-ic-blue-600': isBestQuote && isSelected,
+                'text-[#CFF5F6]': isBestQuote && !isSelected,
+              })}
+            >
               {type.toUpperCase()}
             </p>
-          </Flex>
-        </Flex>
-      </Flex>
+          </div>
+        </div>
+      </div>
       <p
         className={cn(
           'text-2xl font-medium',
@@ -91,16 +74,13 @@ export const QuoteAvailable = (props: QuoteAvailableProps) => {
         {isLoading && <StyledSkeleton width={200} />}
         {!isLoading && quote && quote.outputAmount}
       </p>
-      <Flex
-        direction={['column', 'row']}
-        justify={['flex-start', 'space-between']}
-      >
+      <div className='xs:flex-row xs:justify-between flex flex-col justify-start'>
         <p className='text-ic-gray-500 text-xs font-medium'>
           {isLoading && <StyledSkeleton width={80} />}
           {!isLoading && quote && quote.feesTotal}
         </p>
         {quote && (
-          <Flex direction='row' gap='6px'>
+          <div className='flex flex-row gap-1.5'>
             <Image
               className='text-ic-gray-500'
               alt='Gas fees icon'
@@ -111,9 +91,9 @@ export const QuoteAvailable = (props: QuoteAvailableProps) => {
             <p className='text-ic-gray-500 text-xs font-medium'>
               {quote.feesGas}
             </p>
-          </Flex>
+          </div>
         )}
-      </Flex>
-    </Flex>
+      </div>
+    </div>
   )
 }

src/components/swap/components/quote-result/not-available.tsx

@@ -1,5 +1,3 @@
-import { Flex } from '@chakra-ui/react'
-
 type QuoteNotAvailableProps = {
   type: string
 }
@@ -8,26 +6,18 @@ export const QuoteNotAvailable = ({ type }: QuoteNotAvailableProps) => {
   const isFlashmint = type === 'Flash Mint'
   const text = isFlashmint ? 'flash minting' : 'swapping'
   return (
-    <Flex
-      className='bg-ic-gray-50'
-      borderRadius='12'
-      cursor='pointer'
-      direction={'column'}
-      p='16px'
-      w='100%'
-      h='110px'
-    >
-      <Flex justify='flex-end' direction='row'>
+    <div className='bg-ic-gray-50 flex h-[110px] w-full cursor-pointer flex-col rounded-xl p-4'>
+      <div className='flex justify-end'>
         <p className='text-ic-gray-400 text-sm font-semibold'>
           {type.toUpperCase()}
         </p>
-      </Flex>
+      </div>
       <p className='text-ic-gray-300 text-base font-medium'>
         {type} unavailable
       </p>
       <p className='text-ic-gray-300 text-sm font-normal'>
         {`This token is not available for ${text}.`}
       </p>
-    </Flex>
+    </div>
   )
 }

src/components/swap/components/trade-details/trade-price.tsx

@@ -1,17 +1,15 @@
-import { Flex } from '@chakra-ui/react'
-
 interface TradePriceProps {
   comparisonLabel: string
   usdLabel: string
 }
 
 export const TradePrice = ({ comparisonLabel, usdLabel }: TradePriceProps) => {
   return (
-    <Flex align='flex-start' direction={['column', 'row']}>
+    <div className='xs:flex-row flex flex-col items-start'>
       <p className='text-ic-gray-600 text-xs font-medium'>{comparisonLabel}</p>
       <p className='text-ic-gray-400 ml-0 text-xs font-medium sm:ml-1'>
         {usdLabel}
       </p>
-    </Flex>
+    </div>
   )
 }

src/components/swap/components/trade-output.tsx

@@ -1,8 +1,5 @@
-import { Flex } from '@chakra-ui/react'
-
 import { Token } from '@/constants/tokens'
 import { QuoteType } from '@/lib/hooks/use-best-quote/types'
-import { colors } from '@/lib/styles/colors'
 
 import { FormattedQuoteDisplay } from '../hooks/use-swap/formatters/result'
 
@@ -22,23 +19,16 @@ interface TradeOutputProps {
 export const TradeOutput = (props: TradeOutputProps) => {
   const { selectedQuote, selectedToken } = props
   return (
-    <Flex
-      className='bg-ic-white'
-      border={'1px solid'}
-      borderColor={colors.ic.gray[100]}
-      borderRadius={12}
-      direction={'column'}
-      p={'16px'}
-    >
+    <div className='bg-ic-white border-ic-gray-100 flex flex-col rounded-xl border p-4'>
       <Caption caption={props.caption} />
-      <Flex justify='flex-end' w='100%'>
+      <div className='flex w-full justify-end'>
         <SelectorButton
           image={selectedToken.image}
           symbol={selectedToken.symbol}
           onClick={props.onSelectToken}
         />
-      </Flex>
-      <Flex direction='column' gap='8px' mt='20px'>
+      </div>
+      <div className='flex flex-col gap-2 pt-5'>
         {props.quotes.length > 0 && (
           <p className='text-ic-gray-600 text-xs font-medium'>
             Select your preferred route
@@ -58,7 +48,7 @@ export const TradeOutput = (props: TradeOutputProps) => {
             }}
           />
         ))}
-      </Flex>
-    </Flex>
+      </div>
+    </div>
   )
 }