From c55a9c18b2ad1e740113910d83dcd2450abcc3dc Mon Sep 17 00:00:00 2001
From: Paul Cramer <paulccramer@gmail.com>
Date: Thu, 15 Aug 2024 11:29:02 -0700
Subject: [PATCH] docs: Fix Swap override styles example (#1061)

---
 site/docs/pages/swap/swap.mdx | 20 ++++++++------------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/site/docs/pages/swap/swap.mdx b/site/docs/pages/swap/swap.mdx
index 62532e3919..150b55811f 100644
--- a/site/docs/pages/swap/swap.mdx
+++ b/site/docs/pages/swap/swap.mdx
@@ -301,24 +301,22 @@ You can override component styles using `className`.
 ```tsx
 // omitted for brevity
 
-<Swap address={address} className='bg-gray-200'> // [!code focus]
+<Swap address={address}>
   <SwapAmountInput
     label="Sell"
     swappableTokens={swappableTokens}
     token={swappableTokens[1]}
     type="from"
-    className='bg-white' // [!code focus]
   />
-  <SwapToggleButton className='border-red-600 bg-white'/> // [!code focus]
+  <SwapToggleButton className='border-[#EA580C]'/> // [!code focus]
   <SwapAmountInput
     label="Buy"
     swappableTokens={swappableTokens}
     token={swappableTokens[2]}
     type="to"
-    className='bg-white' // [!code focus]
   />
-  <SwapButton className='bg-red-600'/> // [!code focus]
-  <SwapMessage className='text-red-600'/> // [!code focus]
+  <SwapButton className='bg-[#EA580C]'/> // [!code focus]
+  <SwapMessage />
 </Swap>
 ```
 
@@ -327,24 +325,22 @@ You can override component styles using `className`.
     {({ address, swappableTokens }) => {
       if (address) {
         return (
-          <Swap address={address} className='bg-gray-200'>
+          <Swap address={address} >
             <SwapAmountInput
               label="Sell"
               swappableTokens={swappableTokens}
               token={swappableTokens[1]}
               type="from"
-              className='bg-white'
             />
-            <SwapToggleButton className='border-red-600 bg-white'/>
+            <SwapToggleButton className='border-[#EA580C]' />
             <SwapAmountInput
               label="Buy"
               swappableTokens={swappableTokens}
               token={swappableTokens[2]}
               type="to"
-              className='bg-white'
             />
-            <SwapButton className='bg-red-600' disabled />
-            <SwapMessage className='text-red-600'/>
+            <SwapButton className='bg-[#EA580C]' disabled />
+            <SwapMessage/>
           </Swap>
         )
       }