fix: style collect and create a proposal buttons (#5927)

* Add responsive button styles

* Clean up responsive

* Use SmallButtonPrimary

* Allow button to accept padding props

* Fix vote padding and update link

* Hide position NFT in mobile

src/components/Button/index.tsx

@@ -97,7 +97,8 @@ export const ButtonPrimary = styled(BaseButton)`
 export const SmallButtonPrimary = styled(ButtonPrimary)`
   width: auto;
   font-size: 16px;
-  padding: 10px 16px;
+  padding: ${({ padding }) => padding ?? '8px 12px'};
+
   border-radius: 12px;
 `
 

src/pages/Pool/CTACards.tsx

@@ -97,7 +97,7 @@ export default function CTACards() {
 
   return (
     <CTASection>
-      <CTA1 href="https://support.uniswap.org/hc/en-us/articles/7423608592781">
+      <CTA1 href="https://support.uniswap.org/hc/en-us/categories/8122334631437-Providing-Liquidity-">
         <ResponsiveColumn>
           <HeaderText>
             <Trans>Learn about providing liquidity</Trans> ↗

src/pages/Pool/PositionPage.tsx

@@ -32,13 +32,14 @@ import { Link, useParams } from 'react-router-dom'
 import { Bound } from 'state/mint/v3/actions'
 import { useIsTransactionPending, useTransactionAdder } from 'state/transactions/hooks'
 import styled, { useTheme } from 'styled-components/macro'
-import { ExternalLink, HideExtraSmall, ThemedText } from 'theme'
+import { ExternalLink, HideExtraSmall, HideSmall, ThemedText } from 'theme'
 import { currencyId } from 'utils/currencyId'
 import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
 import { formatTickPrice } from 'utils/formatTickPrice'
 import { unwrappedToken } from 'utils/unwrappedToken'
 
 import RangeBadge from '../../components/Badge/RangeBadge'
+import { SmallButtonPrimary } from '../../components/Button/index'
 import { getPriceOrderingFromPositionForUI } from '../../components/PositionListItem'
 import RateToggle from '../../components/RateToggle'
 import { SwitchLocaleLink } from '../../components/SwitchLocaleLink'
@@ -49,38 +50,20 @@ import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
 import { LoadingRows } from './styleds'
 
 const PageWrapper = styled.div`
-  padding: 68px 8px 0px;
+  padding: 68px 16px 16px 16px;
 
   min-width: 800px;
   max-width: 960px;
 
   @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) {
-    padding: 48px 8px 0px;
+    min-width: 100%;
+    padding: 16px;
   }
 
   @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
-    padding-top: 20px;
+    min-width: 100%;
+    padding: 16px;
   }
-
-  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
-    min-width: 680px;
-    max-width: 680px;
-  `};
-
-  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
-    min-width: 600px;
-    max-width: 600px;
-  `};
-
-  @media only screen and (max-width: 620px) {
-    min-width: 500px;
-    max-width: 500px;
-  }
-
-  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToExtraSmall`
-    min-width: 340px;
-    max-width: 340px;
-  `};
 `
 
 const BadgeText = styled.div`
@@ -120,23 +103,40 @@ const DoubleArrow = styled.span`
   margin: 0 1rem;
 `
 const ResponsiveRow = styled(RowBetween)`
-  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
+  @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
     flex-direction: column;
     align-items: flex-start;
     row-gap: 16px;
-    width: 100%:
-  `};
+    width: 100%;
+  }
 `
 
-const ResponsiveButtonPrimary = styled(ButtonPrimary)`
+const ActionButtonResponsiveRow = styled(ResponsiveRow)`
+  width: 50%;
+  justify-content: flex-end;
+
+  @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
+    width: 100%;
+    flex-direction: row;
+    * {
+      width: 100%;
+    }
+  }
+`
+
+const ResponsiveButtonConfirmed = styled(ButtonConfirmed)`
   border-radius: 12px;
   padding: 6px 8px;
   width: fit-content;
   font-size: 16px;
-  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
-    flex: 1 1 auto;
-    width: 49%;
-  `};
+
+  @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) {
+    width: fit-content;
+  }
+
+  @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
+    width: fit-content;
+  }
 `
 
 const NFTGrid = styled.div`
@@ -624,13 +624,13 @@ export function PositionPage() {
                   <RangeBadge removed={removed} inRange={inRange} />
                 </RowFixed>
                 {ownsNFT && (
-                  <RowFixed>
+                  <ActionButtonResponsiveRow>
                     {currency0 && currency1 && feeAmount && tokenId ? (
                       <ButtonGray
                         as={Link}
                         to={`/increase/${currencyId(currency0)}/${currencyId(currency1)}/${feeAmount}/${tokenId}`}
-                        width="fit-content"
                         padding="6px 8px"
+                        width="fit-content"
                         $borderRadius="12px"
                         style={{ marginRight: '8px' }}
                       >
@@ -638,55 +638,58 @@ export function PositionPage() {
                       </ButtonGray>
                     ) : null}
                     {tokenId && !removed ? (
-                      <ResponsiveButtonPrimary
+                      <SmallButtonPrimary
                         as={Link}
                         to={`/remove/${tokenId}`}
-                        width="fit-content"
                         padding="6px 8px"
+                        width="fit-content"
                         $borderRadius="12px"
                       >
                         <Trans>Remove Liquidity</Trans>
-                      </ResponsiveButtonPrimary>
+                      </SmallButtonPrimary>
                     ) : null}
-                  </RowFixed>
+                  </ActionButtonResponsiveRow>
                 )}
               </ResponsiveRow>
               <RowBetween></RowBetween>
             </AutoColumn>
             <ResponsiveRow align="flex-start">
-              {'result' in metadata ? (
-                <DarkCard
-                  width="100%"
-                  height="100%"
-                  style={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    flexDirection: 'column',
-                    justifyContent: 'space-around',
-                    marginRight: '12px',
-                  }}
-                >
-                  <div style={{ marginRight: 12 }}>
+              <HideSmall
+                style={{
+                  marginRight: '12px',
+                }}
+              >
+                {'result' in metadata ? (
+                  <DarkCard
+                    width="100%"
+                    height="100%"
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      flexDirection: 'column',
+                      justifyContent: 'space-around',
+                      minWidth: '340px',
+                    }}
+                  >
                     <NFT image={metadata.result.image} height={400} />
-                  </div>
-                  {typeof chainId === 'number' && owner && !ownsNFT ? (
-                    <ExternalLink href={getExplorerLink(chainId, owner, ExplorerDataType.ADDRESS)}>
-                      <Trans>Owner</Trans>
-                    </ExternalLink>
-                  ) : null}
-                </DarkCard>
-              ) : (
-                <DarkCard
-                  width="100%"
-                  height="100%"
-                  style={{
-                    marginRight: '12px',
-                    minWidth: '340px',
-                  }}
-                >
-                  <Loader />
-                </DarkCard>
-              )}
+                    {typeof chainId === 'number' && owner && !ownsNFT ? (
+                      <ExternalLink href={getExplorerLink(chainId, owner, ExplorerDataType.ADDRESS)}>
+                        <Trans>Owner</Trans>
+                      </ExternalLink>
+                    ) : null}
+                  </DarkCard>
+                ) : (
+                  <DarkCard
+                    width="100%"
+                    height="100%"
+                    style={{
+                      minWidth: '340px',
+                    }}
+                  >
+                    <Loader />
+                  </DarkCard>
+                )}
+              </HideSmall>
               <AutoColumn gap="sm" style={{ width: '100%', height: '100%' }}>
                 <DarkCard>
                   <AutoColumn gap="md" style={{ width: '100%' }}>
@@ -714,7 +717,7 @@ export function PositionPage() {
                             </ThemedText.DeprecatedMain>
                             {typeof ratio === 'number' && !removed ? (
                               <Badge style={{ marginLeft: '10px' }}>
-                                <ThemedText.DeprecatedMain fontSize={11}>
+                                <ThemedText.DeprecatedMain color={theme.textSecondary} fontSize={11}>
                                   <Trans>{inverted ? ratio : 100 - ratio}%</Trans>
                                 </ThemedText.DeprecatedMain>
                               </Badge>
@@ -768,7 +771,7 @@ export function PositionPage() {
                         </AutoColumn>
                         {ownsNFT &&
                         (feeValue0?.greaterThan(0) || feeValue1?.greaterThan(0) || !!collectMigrationHash) ? (
-                          <ButtonConfirmed
+                          <ResponsiveButtonConfirmed
                             disabled={collecting || !!collectMigrationHash}
                             confirmed={!!collectMigrationHash && !isCollectPending}
                             width="fit-content"
@@ -794,7 +797,7 @@ export function PositionPage() {
                                 </ThemedText.DeprecatedMain>
                               </>
                             )}
-                          </ButtonConfirmed>
+                          </ResponsiveButtonConfirmed>
                         ) : null}
                       </RowBetween>
                     </AutoColumn>

src/pages/Vote/Landing.tsx

@@ -3,7 +3,7 @@ import { Trace } from '@uniswap/analytics'
 import { InterfacePageName } from '@uniswap/analytics-events'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
-import { ButtonPrimary } from 'components/Button'
+import { ButtonPrimary, SmallButtonPrimary } from 'components/Button'
 import { AutoColumn } from 'components/Column'
 import { CardBGImage, CardNoise, CardSection, DataCard } from 'components/earn/styled'
 import FormattedCurrencyAmount from 'components/FormattedCurrencyAmount'
@@ -106,12 +106,12 @@ const TextButton = styled(ThemedText.DeprecatedMain)`
 `
 
 const AddressButton = styled.div`
-  border: 1px solid ${({ theme }) => theme.deprecated_bg3};
   padding: 2px 4px;
   border-radius: 8px;
   display: flex;
   justify-content: center;
   align-items: center;
+  color: ${({ theme }) => theme.accentAction};
 `
 
 const StyledExternalLink = styled(ExternalLink)`
@@ -223,14 +223,14 @@ export default function Landing() {
                 ) : (
                   ''
                 )}
-                <ButtonPrimary
+                <SmallButtonPrimary
                   as={Link}
                   to="/create-proposal"
                   style={{ width: 'fit-content', borderRadius: '8px' }}
-                  padding="8px"
+                  padding="6px 8px"
                 >
                   <Trans>Create Proposal</Trans>
-                </ButtonPrimary>
+                </SmallButtonPrimary>
               </AutoRow>
             </WrapSmall>
             {!showUnlockVoting && (
@@ -263,6 +263,7 @@ export default function Landing() {
 
             {allProposals?.length > 0 && (
               <AutoColumn gap="md">
+                <RowBetween></RowBetween>
                 <RowBetween>
                   <ThemedText.DeprecatedMain>
                     <Trans>Show Cancelled</Trans>