fix: update Swap container padding (#4440)

* fix: update Swap container padding

* rm AlertWrapper

* empty

src/components/swap/SwapHeader.tsx

@@ -7,7 +7,8 @@ import { RowBetween, RowFixed } from '../Row'
 import SettingsTab from '../Settings'
 
 const StyledSwapHeader = styled.div`
-  padding: 1rem 1.25rem 0.5rem 1.25rem;
+  padding: 8px 12px;
+  margin-bottom: 8px;
   width: 100%;
   color: ${({ theme }) => theme.deprecated_text2};
 `

src/components/swap/styleds.tsx

@@ -4,12 +4,28 @@ import { ReactNode } from 'react'
 import { AlertTriangle } from 'react-feather'
 import { Text } from 'rebass'
 import styled, { css } from 'styled-components/macro'
+import { Z_INDEX } from 'theme'
 
 import { AutoColumn } from '../Column'
 
-export const Wrapper = styled.div`
+export const PageWrapper = styled.div<{ redesignFlag: boolean }>`
+  padding: 0 8px;
+  max-width: ${({ redesignFlag }) => (redesignFlag ? '420px' : '480px')};
+  width: 100%;
+`
+
+// Mostly copied from `AppBody` but it was getting too hard to maintain backwards compatibility.
+export const SwapWrapper = styled.main<{ margin?: string; maxWidth?: string; redesignFlag: boolean }>`
   position: relative;
+  background: ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundSurface : theme.deprecated_bg0)};
+  border-radius: ${({ redesignFlag }) => (redesignFlag ? '16px' : '24px')};
+  border: 1px solid ${({ theme, redesignFlag }) => (redesignFlag ? theme.backgroundOutline : 'transparent')};
   padding: 8px;
+  z-index: ${Z_INDEX.deprecated_content};
+  font-feature-settings: ${({ redesignFlag }) => redesignFlag && "'ss02' off"};
+  box-shadow: ${({ redesignFlag }) =>
+    !redesignFlag &&
+    '0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 24px 32px rgba(0, 0, 0, 0.01)'};
 `
 
 export const ArrowWrapper = styled.div<{ clickable: boolean; redesignFlag: boolean }>`

src/pages/Swap/index.tsx

@@ -44,7 +44,7 @@ import Loader from '../../components/Loader'
 import { AutoRow } from '../../components/Row'
 import confirmPriceImpactWithoutFee from '../../components/swap/confirmPriceImpactWithoutFee'
 import ConfirmSwapModal from '../../components/swap/ConfirmSwapModal'
-import { ArrowWrapper, SwapCallbackError, Wrapper } from '../../components/swap/styleds'
+import { ArrowWrapper, PageWrapper, SwapCallbackError, SwapWrapper } from '../../components/swap/styleds'
 import SwapHeader from '../../components/swap/SwapHeader'
 import { SwitchLocaleLink } from '../../components/SwitchLocaleLink'
 import TokenWarningModal from '../../components/TokenWarningModal'
@@ -70,12 +70,7 @@ import { computeFiatValuePriceImpact } from '../../utils/computeFiatValuePriceIm
 import { maxAmountSpend } from '../../utils/maxAmountSpend'
 import { computeRealizedPriceImpact, warningSeverity } from '../../utils/prices'
 import { supportedChainId } from '../../utils/supportedChainId'
-import AppBody from '../AppBody'
 
-const AlertWrapper = styled.div`
-  max-width: 460px;
-  width: 100%;
-`
 const ArrowContainer = styled.div`
   display: inline-block;
   margin-left: 6%;
@@ -508,7 +503,7 @@ export default function Swap() {
   return (
     <Trace page={PageName.SWAP_PAGE} shouldLogImpression>
       <>
-        {redesignFlag === RedesignVariant.Enabled ? (
+        {redesignFlagEnabled ? (
           <TokenSafetyModal
             isOpen={importTokensNotInDefault.length > 0 && !dismissTokenWarning}
             tokenAddress={importTokensNotInDefault[0]?.address}
@@ -524,9 +519,9 @@ export default function Swap() {
             onDismiss={handleDismissTokenWarning}
           />
         )}
-        <AppBody>
-          <SwapHeader allowedSlippage={allowedSlippage} />
-          <Wrapper id="swap-page">
+        <PageWrapper redesignFlag={redesignFlagEnabled}>
+          <SwapWrapper id="swap-page" redesignFlag={redesignFlagEnabled}>
+            <SwapHeader allowedSlippage={allowedSlippage} />
             <ConfirmSwapModal
               isOpen={showConfirm}
               trade={trade}
@@ -820,11 +815,9 @@ export default function Swap() {
                 </AutoColumn>
               </BottomWrapper>
             </AutoColumn>
-          </Wrapper>
-        </AppBody>
-        <AlertWrapper>
+          </SwapWrapper>
           <NetworkAlert />
-        </AlertWrapper>
+        </PageWrapper>
         <SwitchLocaleLink />
         {!swapIsUnsupported ? null : (
           <UnsupportedCurrencyFooter