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,65 +234,67 @@ ${bodyValue}
 
   return (
     <Trace page={PageName.VOTE_PAGE} shouldLogImpression>
-      <AppBody {...{ maxWidth: '800px' }}>
-        <CreateProposalTabs />
-        <CreateProposalWrapper>
-          <BlueCard>
-            <AutoColumn gap="10px">
-              <ThemedText.DeprecatedLink fontWeight={400} color={'deprecated_primaryText1'}>
-                <Trans>
-                  <strong>Tip:</strong> Select an action and describe your proposal for the community. The proposal
-                  cannot be modified after submission, so please verify all information before submitting. The voting
-                  period will begin immediately and last for 7 days. To propose a custom action,{' '}
-                  <ExternalLink href="https://docs.uniswap.org/protocol/reference/Governance/governance-reference#propose">
-                    read the docs
-                  </ExternalLink>
-                  .
-                </Trans>
-              </ThemedText.DeprecatedLink>
-            </AutoColumn>
-          </BlueCard>
-
-          <ProposalActionSelector onClick={handleActionSelectorClick} proposalAction={proposalAction} />
-          <ProposalActionDetail
-            proposalAction={proposalAction}
-            currency={currencyValue}
-            amount={amountValue}
-            toAddress={toAddressValue}
-            onCurrencySelect={handleCurrencySelect}
-            onAmountInput={handleAmountInput}
-            onToAddressInput={handleToAddressInput}
-          />
-          <ProposalEditor
-            title={titleValue}
-            body={bodyValue}
-            onTitleInput={handleTitleInput}
-            onBodyInput={handleBodyInput}
-          />
-          <CreateProposalButton
-            proposalThreshold={proposalThreshold}
-            hasActiveOrPendingProposal={
-              latestProposalData?.status === ProposalState.ACTIVE ||
-              latestProposalData?.status === ProposalState.PENDING
-            }
-            hasEnoughVote={hasEnoughVote}
-            isFormInvalid={isFormInvalid}
-            handleCreateProposal={handleCreateProposal}
+      <PageWrapper>
+        <AppBody {...{ maxWidth: '800px' }}>
+          <CreateProposalTabs />
+          <CreateProposalWrapper>
+            <BlueCard>
+              <AutoColumn gap="10px">
+                <ThemedText.DeprecatedLink fontWeight={400} color={'deprecated_primaryText1'}>
+                  <Trans>
+                    <strong>Tip:</strong> Select an action and describe your proposal for the community. The proposal
+                    cannot be modified after submission, so please verify all information before submitting. The voting
+                    period will begin immediately and last for 7 days. To propose a custom action,{' '}
+                    <ExternalLink href="https://docs.uniswap.org/protocol/reference/Governance/governance-reference#propose">
+                      read the docs
+                    </ExternalLink>
+                    .
+                  </Trans>
+                </ThemedText.DeprecatedLink>
+              </AutoColumn>
+            </BlueCard>
+
+            <ProposalActionSelector onClick={handleActionSelectorClick} proposalAction={proposalAction} />
+            <ProposalActionDetail
+              proposalAction={proposalAction}
+              currency={currencyValue}
+              amount={amountValue}
+              toAddress={toAddressValue}
+              onCurrencySelect={handleCurrencySelect}
+              onAmountInput={handleAmountInput}
+              onToAddressInput={handleToAddressInput}
+            />
+            <ProposalEditor
+              title={titleValue}
+              body={bodyValue}
+              onTitleInput={handleTitleInput}
+              onBodyInput={handleBodyInput}
+            />
+            <CreateProposalButton
+              proposalThreshold={proposalThreshold}
+              hasActiveOrPendingProposal={
+                latestProposalData?.status === ProposalState.ACTIVE ||
+                latestProposalData?.status === ProposalState.PENDING
+              }
+              hasEnoughVote={hasEnoughVote}
+              isFormInvalid={isFormInvalid}
+              handleCreateProposal={handleCreateProposal}
+            />
+            {!hasEnoughVote ? (
+              <AutonomousProposalCTA>
+                Don’t have 2.5M votes? Anyone can create an autonomous proposal using{' '}
+                <ExternalLink href="https://fish.vote">fish.vote</ExternalLink>
+              </AutonomousProposalCTA>
+            ) : null}
+          </CreateProposalWrapper>
+          <ProposalActionSelectorModal
+            isOpen={modalOpen}
+            onDismiss={handleDismissActionSelector}
+            onProposalActionSelect={(proposalAction: ProposalAction) => handleActionChange(proposalAction)}
           />
-          {!hasEnoughVote ? (
-            <AutonomousProposalCTA>
-              Don’t have 2.5M votes? Anyone can create an autonomous proposal using{' '}
-              <ExternalLink href="https://fish.vote">fish.vote</ExternalLink>
-            </AutonomousProposalCTA>
-          ) : null}
-        </CreateProposalWrapper>
-        <ProposalActionSelectorModal
-          isOpen={modalOpen}
-          onDismiss={handleDismissActionSelector}
-          onProposalActionSelect={(proposalAction: ProposalAction) => handleActionChange(proposalAction)}
-        />
-        <ProposalSubmissionModal isOpen={attempting} hash={hash} onDismiss={handleDismissSubmissionModal} />
-      </AppBody>
+          <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)`