From 0baab29c25d6aeca71c02f3feedd9e3fe5e1ca60 Mon Sep 17 00:00:00 2001
From: JD <jann.driessen@gmx.de>
Date: Mon, 23 Oct 2023 13:51:36 -0400
Subject: [PATCH] update container style

---
 src/components/trade/flashmint/DirectIssuance.tsx | 5 +----
 src/components/trade/flashmint/index.tsx          | 2 +-
 src/components/trade/index.tsx                    | 8 ++++----
 src/components/trade/swap/BetterQuoteView.tsx     | 2 +-
 src/components/trade/swap/trade-details/index.tsx | 6 ++----
 5 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/src/components/trade/flashmint/DirectIssuance.tsx b/src/components/trade/flashmint/DirectIssuance.tsx
index 0324b4618..be2bfaa3e 100644
--- a/src/components/trade/flashmint/DirectIssuance.tsx
+++ b/src/components/trade/flashmint/DirectIssuance.tsx
@@ -68,10 +68,7 @@ const DirectIssuance = ({
         </Flex>
       </Flex>
       <Flex justify='center' mt='4'></Flex>
-      <Box
-        borderColor={isDarkMode ? colors.icWhite : colors.black}
-        paddingTop='16px'
-      >
+      <Box borderColor={isDarkMode ? colors.icWhite : colors.black}>
         <TradeInputSelector
           caption=''
           config={{
diff --git a/src/components/trade/flashmint/index.tsx b/src/components/trade/flashmint/index.tsx
index 980fc276f..9bcf817c2 100644
--- a/src/components/trade/flashmint/index.tsx
+++ b/src/components/trade/flashmint/index.tsx
@@ -418,7 +418,7 @@ const FlashMint = (props: QuickTradeProps) => {
   }, [getTokenBalance, indexToken, isLoadingBalance])
 
   return (
-    <Box mt='32px'>
+    <Box mt='8px'>
       <DirectIssuance
         indexToken={indexToken}
         indexTokenAmountFormatted={indexTokenAmountFormatted}
diff --git a/src/components/trade/index.tsx b/src/components/trade/index.tsx
index a97c91832..3546514ba 100644
--- a/src/components/trade/index.tsx
+++ b/src/components/trade/index.tsx
@@ -38,11 +38,11 @@ const QuickTradeContainer = (props: QuickTradeProps) => {
   return (
     <SlippageProvider>
       <Flex
-        bgGradient={styles.backgroundGradient}
+        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, #FCFFFF -184.07%, #F7F8F8 171.05%)'
         border='1px solid'
-        borderColor={styles.border}
-        borderRadius='16px'
-        boxShadow='sm'
+        borderColor={colors.icGray1}
+        borderRadius='24px'
+        boxShadow='0.5px 1px 2px 0px rgba(44, 51, 51, 0.25), 2px 2px 1px 0px #FCFFFF inset'
         direction='column'
         p='8px 16px 16px'
         height={'100%'}
diff --git a/src/components/trade/swap/BetterQuoteView.tsx b/src/components/trade/swap/BetterQuoteView.tsx
index a8163525f..5026b51f9 100644
--- a/src/components/trade/swap/BetterQuoteView.tsx
+++ b/src/components/trade/swap/BetterQuoteView.tsx
@@ -23,7 +23,7 @@ export const BetterQuoteView = (props: BetterQuoteViewProps) => {
     props.state === BetterQuoteState.betterQuote || isBetterQuotePriceImpact
   return (
     <Flex
-      bg={colors.icGray1}
+      bg={colors.icWhite}
       border='1px solid'
       borderColor={colors.icGray1}
       borderRadius='16px'
diff --git a/src/components/trade/swap/trade-details/index.tsx b/src/components/trade/swap/trade-details/index.tsx
index 70d9334f8..630491caf 100644
--- a/src/components/trade/swap/trade-details/index.tsx
+++ b/src/components/trade/swap/trade-details/index.tsx
@@ -65,8 +65,7 @@ export const TradeDetails = (props: TradeDetailsProps) => {
                   borderRadius={12}
                   color={colors.icGray2}
                   _expanded={{
-                    bg: styles.background,
-                    borderBottomColor: styles.background,
+                    borderBottomColor: 'transparent',
                     borderBottomRadius: 0,
                     pb: '0px',
                   }}
@@ -100,11 +99,10 @@ export const TradeDetails = (props: TradeDetailsProps) => {
                 </AccordionButton>
               </h4>
               <AccordionPanel
-                bg={styles.background}
                 border='1px solid'
                 borderColor={styles.border}
                 borderRadius='0 0 12px 12px'
-                borderTopColor={styles.background}
+                borderTopColor={'transparent'}
                 p={'16px 20px'}
               >
                 <TradeInfoItemsContainer items={data} />