refactor: removes BodyWrapper padding (#4375)

* fix: removing bodywrapper padding for phase1

* reverting to previous version and adjusting padding across pages appropriately

* adjusting padding on add liquidity page

* prettier changes

* missed semicolon

src/pages/AddLiquidity/styled.tsx

@@ -36,6 +36,7 @@ export const ScrollablePage = styled.div`
   ${({ theme }) => theme.mediaWidth.upToMedium`
     max-width: 480px;
     margin: 0 auto;
+    padding: 0px 8px;
   `};
 `
 

src/pages/App.tsx

@@ -55,11 +55,11 @@ const BodyWrapper = styled.div<{ navBarFlag: NavBarVariant }>`
   display: flex;
   flex-direction: column;
   width: 100%;
-  padding: ${({ navBarFlag }) => (navBarFlag === NavBarVariant.Enabled ? `72px 16px 0px 16px` : `120px 16px 0px 16px`)};
+  padding: ${({ navBarFlag }) => (navBarFlag === NavBarVariant.Enabled ? `72px 0px 0px 0px` : `120px 0px 0px 0px`)};
   align-items: center;
   flex: 1;
   ${({ theme }) => theme.mediaWidth.upToSmall`
-    padding: 52px 8px 16px 8px;
+    padding: 52px 0px 16px 0px;
   `};
 `
 

src/pages/CreateProposal/index.tsx

@@ -33,6 +33,12 @@ import { ProposalAction, ProposalActionSelector, ProposalActionSelectorModal } f
 import { ProposalEditor } from './ProposalEditor'
 import { ProposalSubmissionModal } from './ProposalSubmissionModal'
 
+const PageWrapper = styled(AutoColumn)`
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+    padding: 0px 8px;
+  `};
+`
+
 const CreateProposalButton = ({
   proposalThreshold,
   hasActiveOrPendingProposal,
@@ -228,6 +234,7 @@ ${bodyValue}
 
   return (
     <Trace page={PageName.VOTE_PAGE} shouldLogImpression>
+      <PageWrapper>
         <AppBody {...{ maxWidth: '800px' }}>
           <CreateProposalTabs />
           <CreateProposalWrapper>
@@ -287,6 +294,7 @@ ${bodyValue}
           />
           <ProposalSubmissionModal isOpen={attempting} hash={hash} onDismiss={handleDismissSubmissionModal} />
         </AppBody>
+      </PageWrapper>
     </Trace>
   )
 }

src/pages/Earn/Manage.tsx

@@ -31,6 +31,9 @@ import { currencyId } from '../../utils/currencyId'
 const PageWrapper = styled(AutoColumn)`
   max-width: 640px;
   width: 100%;
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    padding: 0px 8px;
+  `};
 `
 
 const PositionInfo = styled(AutoColumn)<{ dim: any }>`

src/pages/Earn/index.tsx

@@ -17,6 +17,9 @@ import { Countdown } from './Countdown'
 const PageWrapper = styled(AutoColumn)`
   max-width: 640px;
   width: 100%;
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    padding: 0px 8px;
+  `};
 `
 
 const TopSection = styled(AutoColumn)`

src/pages/Pool/index.tsx

@@ -30,6 +30,7 @@ const PageWrapper = styled(AutoColumn)`
 
   ${({ theme }) => theme.mediaWidth.upToMedium`
     max-width: 800px;
+    padding: 0px 8px;
   `};
 
   ${({ theme }) => theme.mediaWidth.upToSmall`

src/pages/Pool/v2.tsx

@@ -29,6 +29,10 @@ import { ExternalLink, HideSmall, ThemedText } from '../../theme'
 const PageWrapper = styled(AutoColumn)`
   max-width: 640px;
   width: 100%;
+
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    padding: 0px 8px;
+  `};
 `
 
 const VoteCard = styled(DataCard)`

src/pages/Vote/Landing.tsx

@@ -32,7 +32,11 @@ import { ZERO_ADDRESS } from '../../constants/misc'
 import { UNI } from '../../constants/tokens'
 import { ProposalStatus } from './styled'
 
-const PageWrapper = styled(AutoColumn)``
+const PageWrapper = styled(AutoColumn)`
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    padding: 0px 8px;
+  `};
+`
 
 const TopSection = styled(AutoColumn)`
   max-width: 640px;

src/pages/Vote/VotePage.tsx

@@ -57,6 +57,9 @@ import { ProposalStatus } from './styled'
 
 const PageWrapper = styled(AutoColumn)`
   width: 100%;
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    padding: 0px 8px;
+  `};
 `
 
 const ProposalInfo = styled(AutoColumn)`