Skip to content

I
interface
Commit c43c8de6 authored by Jack Short's avatar Jack Short Committed by GitHub
Browse files
Options

chore: updating breakpoints (#4465) 

* chore: updating breakpoints

* deprecating old breakpoints

* using breakpoints in theme instead of media queries
parent 9d40db5b
Show whitespace changes
Inline Side-by-side
Showing with 142 additions and 122 deletions
src/components/AccountDetails/index.tsx
View file @ c43c8de6
......@@ -24,7 +24,7 @@ const HeaderRow = styled.div`
padding: 1rem 1rem;
font-weight: 500;
color: ${(props) => (props.color === 'blue' ? ({ theme }) => theme.deprecated_primary1 : 'inherit')};
${({ theme }) => theme.mediaWidth.upToMedium`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
padding: 1rem;
`};
`
......@@ -74,7 +74,7 @@ const AccountGroupingRow = styled.div`
const AccountSection = styled.div`
padding: 0rem 1rem;
${({ theme }) => theme.mediaWidth.upToMedium`padding: 0rem 1rem 1.5rem 1rem;`};
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`padding: 0rem 1rem 1.5rem 1rem;`};
`
const YourAccount = styled.div`
......
src/components/FeeSelector/FeeOption.tsx
View file @ c43c8de6
......@@ -15,7 +15,7 @@ const ResponsiveText = styled(ThemedText.DeprecatedLabel)`
line-height: 16px;
font-size: 14px;
${({ theme }) => theme.mediaWidth.upToSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
font-size: 12px;
line-height: 12px;
`};
......
src/components/Header/ChainConnectivityWarning.tsx
View file @ c43c8de6
......@@ -39,7 +39,7 @@ const Wrapper = styled.div`
padding: 16px 20px;
position: absolute;
right: 16px;
@media screen and (min-width: ${MEDIA_WIDTHS.upToMedium}px) {
@media screen and (min-width: ${MEDIA_WIDTHS.deprecated_upToMedium}px) {
display: block;
}
`
......
src/components/Header/NetworkSelector.tsx
View file @ c43c8de6
......@@ -53,7 +53,7 @@ const FlyoutMenu = styled.div`
width: 272px;
z-index: 99;
padding-top: 10px;
@media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
@media screen and (min-width: ${MEDIA_WIDTHS.deprecated_upToSmall}px) {
top: 40px;
}
`
......@@ -112,7 +112,7 @@ const NetworkLabel = styled.div`
`
const SelectorLabel = styled(NetworkLabel)`
display: none;
@media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
@media screen and (min-width: ${MEDIA_WIDTHS.deprecated_upToSmall}px) {
display: block;
margin-right: 8px;
}
......@@ -126,7 +126,7 @@ const NetworkAlertLabel = styled(NetworkLabel)`
font-size: 1rem;
width: fit-content;
font-weight: 500;
@media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
@media screen and (min-width: ${MEDIA_WIDTHS.deprecated_upToSmall}px) {
display: block;
}
`
......@@ -153,12 +153,12 @@ const SelectorControls = styled.div<{ supportedChain: boolean }>`
}
`
const SelectorLogo = styled(Logo)`
@media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
@media screen and (min-width: ${MEDIA_WIDTHS.deprecated_upToSmall}px) {
margin-right: 8px;
}
`
const SelectorWrapper = styled.div`
@media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
@media screen and (min-width: ${MEDIA_WIDTHS.deprecated_upToSmall}px) {
position: relative;
}
`
......
src/components/Header/Polling.tsx
View file @ c43c8de6
......@@ -26,7 +26,7 @@ const StyledPolling = styled.div<{ warning: boolean }>`
color: ${({ theme, warning }) => (warning ? theme.deprecated_yellow3 : theme.deprecated_green1)};
transition: 250ms ease color;
${({ theme }) => theme.mediaWidth.upToMedium`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
display: none;
`}
`
......
src/components/Header/index.tsx
View file @ c43c8de6
......@@ -46,16 +46,16 @@ const HeaderFrame = styled.div<{ showBackground: boolean }>`
transition: background-position 0.1s, box-shadow 0.1s;
background-blend-mode: hard-light;
${({ theme }) => theme.mediaWidth.upToLarge`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToLarge`
grid-template-columns: 48px 1fr 1fr;
`};
${({ theme }) => theme.mediaWidth.upToMedium`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
padding: 1rem;
grid-template-columns: 1fr 1fr;
`};
${({ theme }) => theme.mediaWidth.upToSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
padding: 1rem;
grid-template-columns: 36px 1fr;
`};
......@@ -81,7 +81,7 @@ const HeaderElement = styled.div`
margin-left: 8px;
}
${({ theme }) => theme.mediaWidth.upToMedium`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
align-items: center;
`};
`
......@@ -97,13 +97,13 @@ const HeaderLinks = styled(Row)`
grid-gap: 10px;
overflow: auto;
align-items: center;
${({ theme }) => theme.mediaWidth.upToLarge`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToLarge`
justify-self: start;
`};
${({ theme }) => theme.mediaWidth.upToMedium`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
justify-self: center;
`};
${({ theme }) => theme.mediaWidth.upToMedium`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
flex-direction: row;
justify-content: space-between;
justify-self: center;
......@@ -157,7 +157,7 @@ const UNIWrapper = styled.span`
`
const BalanceText = styled(Text)`
${({ theme }) => theme.mediaWidth.upToExtraSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToExtraSmall`
display: none;
`};
`
......@@ -168,7 +168,7 @@ const Title = styled.a`
pointer-events: auto;
justify-self: flex-start;
margin-right: 12px;
${({ theme }) => theme.mediaWidth.upToSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
justify-self: center;
`};
:hover {
......
src/components/Identicon/StatusIcon.tsx
View file @ c43c8de6
......@@ -15,7 +15,7 @@ const IconWrapper = styled.div<{ size?: number }>`
height: ${({ size }) => (size ? size + 'px' : '32px')};
width: ${({ size }) => (size ? size + 'px' : '32px')};
}
${({ theme }) => theme.mediaWidth.upToMedium`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
align-items: flex-end;
`};
`
......
src/components/InputStepCounter/InputStepCounter.tsx
View file @ c43c8de6
......@@ -48,11 +48,11 @@ const StyledInput = styled(NumericalInput)<{ usePercent?: boolean }>`
font-weight: 500;
padding: 0 10px;
${({ theme }) => theme.mediaWidth.upToSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
font-size: 16px;
`};
${({ theme }) => theme.mediaWidth.upToExtraSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToExtraSmall`
font-size: 12px;
`};
`
......
src/components/Menu/index.tsx
View file @ c43c8de6
......@@ -110,7 +110,7 @@ const MenuFlyout = styled.span<{ flyoutAlignment?: FlyoutAlignment }>`
: css`
left: 0rem;
`};
${({ theme }) => theme.mediaWidth.upToMedium`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
bottom: unset;
right: 0;
left: unset;
......
src/components/Modal/index.tsx
View file @ c43c8de6
......@@ -59,11 +59,11 @@ const StyledDialogContent = styled(({ minHeight, maxHeight, mobile, isOpen, rede
`}
display: flex;
border-radius: 20px;
${({ theme }) => theme.mediaWidth.upToMedium`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
width: 65vw;
margin: 0;
`}
${({ theme, mobile }) => theme.mediaWidth.upToSmall`
${({ theme, mobile }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
width: 85vw;
${
mobile &&
......
src/components/NavigationTabs/index.tsx
View file @ c43c8de6
......@@ -23,7 +23,7 @@ const Tabs = styled.div`
const StyledHistoryLink = styled(HistoryLink)<{ flex: string | undefined }>`
flex: ${({ flex }) => flex ?? 'none'};
${({ theme }) => theme.mediaWidth.upToMedium`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
flex: none;
margin-right: 10px;
`};
......
src/components/Popups/PopupItem.tsx
View file @ c43c8de6
......@@ -30,7 +30,7 @@ const Popup = styled.div`
padding-right: 35px;
overflow: hidden;
${({ theme }) => theme.mediaWidth.upToSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
min-width: 290px;
&:not(:last-of-type) {
margin-right: 20px;
......
src/components/Popups/SurveyPopup.tsx
View file @ c43c8de6
......@@ -21,7 +21,7 @@ const Wrapper = styled(AutoColumn)`
color: ${({ theme }) => theme.deprecated_text1};
overflow: hidden;
${({ theme }) => theme.mediaWidth.upToSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
max-width: 100%;
`}
`
......
src/components/Popups/index.tsx
View file @ c43c8de6
......@@ -17,7 +17,7 @@ const MobilePopupWrapper = styled.div<{ height: string | number }>`
margin-bottom: ${({ height }) => (height ? '20px' : 0)};
display: none;
${({ theme }) => theme.mediaWidth.upToSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
display: block;
padding-top: 20px;
`};
......@@ -35,8 +35,8 @@ const MobilePopupInner = styled.div`
}
`
const StopOverflowQuery = `@media screen and (min-width: ${MEDIA_WIDTHS.upToMedium + 1}px) and (max-width: ${
MEDIA_WIDTHS.upToMedium + 500
const StopOverflowQuery = `@media screen and (min-width: ${MEDIA_WIDTHS.deprecated_upToMedium + 1}px) and (max-width: ${
MEDIA_WIDTHS.deprecated_upToMedium + 500
}px)`
const FixedPopupColumn = styled(AutoColumn)<{ extraPadding: boolean; xlPadding: boolean }>`
......@@ -47,7 +47,7 @@ const FixedPopupColumn = styled(AutoColumn)<{ extraPadding: boolean; xlPadding:
width: 100%;
z-index: 3;
${({ theme }) => theme.mediaWidth.upToSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
display: none;
`};
......
src/components/PositionList/index.tsx
View file @ c43c8de6
......@@ -12,7 +12,7 @@ const DesktopHeader = styled.div`
font-weight: 500;
padding: 8px;
@media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
@media screen and (min-width: ${MEDIA_WIDTHS.deprecated_upToSmall}px) {
align-items: center;
display: flex;
justify-content: space-between;
......@@ -32,11 +32,11 @@ const MobileHeader = styled.div`
justify-content: space-between;
align-items: center;
@media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
@media screen and (min-width: ${MEDIA_WIDTHS.deprecated_upToSmall}px) {
display: none;
}
@media screen and (max-width: ${MEDIA_WIDTHS.upToExtraSmall}px) {
@media screen and (max-width: ${MEDIA_WIDTHS.deprecated_upToExtraSmall}px) {
display: flex;
flex-direction: column;
align-items: start;
......@@ -55,7 +55,7 @@ const ToggleLabel = styled.div`
`
const MobileTogglePosition = styled.div`
@media screen and (max-width: ${MEDIA_WIDTHS.upToExtraSmall}px) {
@media screen and (max-width: ${MEDIA_WIDTHS.deprecated_upToExtraSmall}px) {
position: absolute;
right: 20px;
}
......
src/components/PositionListItem/index.tsx
View file @ c43c8de6
......@@ -48,11 +48,11 @@ const LinkRow = styled(Link)`
background-color: ${({ theme }) => theme.deprecated_bg2};
}
@media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
@media screen and (min-width: ${MEDIA_WIDTHS.deprecated_upToSmall}px) {
/* flex-direction: row; */
}
${({ theme }) => theme.mediaWidth.upToSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
flex-direction: column;
row-gap: 12px;
`};
......@@ -61,7 +61,7 @@ const LinkRow = styled(Link)`
const BadgeText = styled.div`
font-weight: 500;
font-size: 14px;
${({ theme }) => theme.mediaWidth.upToSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
font-size: 12px;
`};
`
......@@ -78,7 +78,7 @@ const RangeLineItem = styled(DataLineItem)`
margin-top: 4px;
width: 100%;
${({ theme }) => theme.mediaWidth.upToSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
background-color: ${({ theme }) => theme.deprecated_bg2};
border-radius: 12px;
padding: 8px 0;
......@@ -88,7 +88,7 @@ const RangeLineItem = styled(DataLineItem)`
const DoubleArrow = styled.span`
margin: 0 2px;
color: ${({ theme }) => theme.deprecated_text3};
${({ theme }) => theme.mediaWidth.upToSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
margin: 4px;
padding: 20px;
`};
......@@ -104,7 +104,7 @@ const ExtentsText = styled.span`
color: ${({ theme }) => theme.deprecated_text3};
font-size: 14px;
margin-right: 4px;
${({ theme }) => theme.mediaWidth.upToSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
display: none;
`};
`
......@@ -122,7 +122,7 @@ const DataText = styled.div`
font-weight: 600;
font-size: 18px;
${({ theme }) => theme.mediaWidth.upToSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
font-size: 14px;
`};
`
......
src/components/SearchModal/CommonBases.tsx
View file @ c43c8de6
......@@ -13,7 +13,7 @@ import styled from 'styled-components/macro'
import { currencyId } from 'utils/currencyId'
const MobileWrapper = styled(AutoColumn)`
${({ theme }) => theme.mediaWidth.upToSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
display: none;
`};
`
......
src/components/SearchModal/TokenImportCard.tsx
View file @ c43c8de6
......@@ -23,7 +23,7 @@ const AddressText = styled(ThemedText.DeprecatedBlue)`
font-size: 12px;
word-break: break-all;
${({ theme }) => theme.mediaWidth.upToSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
font-size: 10px;
`}
`
......
src/components/Settings/index.tsx
View file @ c43c8de6
......@@ -99,7 +99,7 @@ const MenuFlyout = styled.span<{ redesignFlag: boolean }>`
z-index: 100;
color: ${({ theme, redesignFlag }) => redesignFlag && theme.textPrimary};
${({ theme }) => theme.mediaWidth.upToMedium`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
min-width: 18.125rem;
`};
......
src/components/TransactionSettings/index.tsx
View file @ c43c8de6
......@@ -95,7 +95,7 @@ const OptionCustom = styled(FancyButton)<{ active?: boolean; warning?: boolean;
const SlippageEmojiContainer = styled.span`
color: #f3841e;
${({ theme }) => theme.mediaWidth.upToSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
display: none;
`}
`
......
src/components/WalletModal/Option.tsx
View file @ c43c8de6
......@@ -30,7 +30,7 @@ const CheckIcon = styled(Check)`
align-items: center;
justify-content: center;
color: ${({ theme }) => theme.accentAction};
${({ theme }) => theme.mediaWidth.upToMedium`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
align-items: flex-end;
`};
`
......@@ -112,7 +112,7 @@ const IconWrapperDeprecated = styled.div<{ size?: number | null }>`
height: ${({ size }) => (size ? size + 'px' : '24px')};
width: ${({ size }) => (size ? size + 'px' : '24px')};
}
${({ theme }) => theme.mediaWidth.upToMedium`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
align-items: flex-end;
`};
`
......@@ -127,7 +127,7 @@ const IconWrapper = styled.div<{ size?: number | null }>`
height: ${({ size }) => (size ? size + 'px' : '28px')};
width: ${({ size }) => (size ? size + 'px' : '28px')};
}
${({ theme }) => theme.mediaWidth.upToMedium`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
align-items: flex-end;
`};
`
......
src/components/WalletModal/index.tsx
View file @ c43c8de6
......@@ -71,7 +71,7 @@ const HeaderRow = styled.div<{ redesignFlag?: boolean }>`
font-weight: ${({ redesignFlag }) => (redesignFlag ? '600' : '500')};
size: ${({ redesignFlag }) => redesignFlag && '16px'};
color: ${(props) => (props.color === 'blue' ? ({ theme }) => theme.deprecated_primary1 : 'inherit')};
${({ theme }) => theme.mediaWidth.upToMedium`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
padding: 1rem;
`};
`
......@@ -82,7 +82,7 @@ const ContentWrapper = styled.div<{ redesignFlag?: boolean }>`
padding: 0 1rem 1rem 1rem;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
${({ theme }) => theme.mediaWidth.upToMedium`padding: 0 1rem 1rem 1rem`};
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`padding: 0 1rem 1rem 1rem`};
`
const UpperSection = styled.div`
......@@ -105,7 +105,7 @@ const UpperSection = styled.div`
const OptionGrid = styled.div`
display: grid;
grid-gap: 10px;
${({ theme }) => theme.mediaWidth.upToMedium`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
grid-template-columns: 1fr;
grid-gap: 10px;
`};
......
src/components/earn/PoolCard.tsx
View file @ c43c8de6
......@@ -26,7 +26,7 @@ const StatContainer = styled.div`
margin-bottom: 1rem;
margin-right: 1rem;
margin-left: 1rem;
${({ theme }) => theme.mediaWidth.upToSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
display: none;
`};
`
......@@ -57,7 +57,7 @@ const TopSection = styled.div`
align-items: center;
padding: 1rem;
z-index: 1;
${({ theme }) => theme.mediaWidth.upToSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
grid-template-columns: 48px 1fr 96px;
`};
`
......
src/components/swap/SwapDetailsDropdown.tsx
View file @ c43c8de6
......@@ -67,7 +67,7 @@ const StyledPolling = styled.div`
color: ${({ theme }) => theme.deprecated_text1};
transition: 250ms ease color;
${({ theme }) => theme.mediaWidth.upToMedium`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
display: none;
`}
`
......
src/components/swap/UnsupportedCurrencyFooter.tsx
View file @ c43c8de6
......@@ -40,7 +40,7 @@ const StyledButtonEmpty = styled(ButtonEmpty)`
const AddressText = styled(ThemedText.DeprecatedBlue)`
font-size: 12px;
${({ theme }) => theme.mediaWidth.upToSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
font-size: 10px;
`}
`
......
src/components/swap/styleds.tsx
View file @ c43c8de6
......@@ -154,7 +154,7 @@ export const ResponsiveTooltipContainer = styled(TooltipContainer)<{ origin?: st
padding: 1rem;
width: ${({ width }) => width ?? 'auto'};
${({ theme, origin }) => theme.mediaWidth.upToExtraSmall`
${({ theme, origin }) => theme.deprecated_mediaWidth.deprecated_upToExtraSmall`
transform: scale(0.8);
transform-origin: ${origin ?? 'top left'};
`}
......
src/pages/AddLiquidity/styled.tsx
View file @ c43c8de6
......@@ -10,7 +10,7 @@ export const PageWrapper = styled(BodyWrapper)<{ wide: boolean }>`
padding: ${({ wide }) => (wide ? '10px' : '0')};
${({ theme }) => theme.mediaWidth.upToMedium`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
max-width: 480px;
`};
`
......@@ -20,11 +20,11 @@ export const Wrapper = styled.div`
padding: 26px 16px;
min-width: 480px;
${({ theme }) => theme.mediaWidth.upToMedium`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
min-width: 400px;
`};
${({ theme }) => theme.mediaWidth.upToExtraSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToExtraSmall`
min-width: 340px;
`};
`
......@@ -33,7 +33,7 @@ export const ScrollablePage = styled.div`
position: relative;
display: flex;
flex-direction: column;
${({ theme }) => theme.mediaWidth.upToMedium`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
max-width: 480px;
margin: 0 auto;
padding: 0px 8px;
......@@ -69,7 +69,7 @@ export const ResponsiveTwoColumns = styled.div<{ wide: boolean }>`
border-top: 1px solid ${({ theme }) => theme.deprecated_bg2};
${({ theme }) => theme.mediaWidth.upToMedium`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
grid-template-columns: 1fr;
margin-top: 0;
......@@ -81,7 +81,7 @@ export const RightContainer = styled(AutoColumn)`
grid-column: 2;
height: fit-content;
${({ theme }) => theme.mediaWidth.upToMedium`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
grid-row: 2 / 3;
grid-column: 1;
`};
......@@ -99,7 +99,7 @@ export const StackedItem = styled.div<{ zIndex?: number }>`
`
export const MediumOnly = styled.div`
${({ theme }) => theme.mediaWidth.upToMedium`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
display: none;
`};
`
......@@ -107,7 +107,7 @@ export const MediumOnly = styled.div`
export const HideMedium = styled.div`
display: none;
${({ theme }) => theme.mediaWidth.upToMedium`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
display: block;
`};
`
src/pages/App.tsx
View file @ c43c8de6
......@@ -61,7 +61,7 @@ const BodyWrapper = styled.div<{ navBarFlag: NavBarVariant }>`
padding: ${({ navBarFlag }) => (navBarFlag === NavBarVariant.Enabled ? `72px 0px 0px 0px` : `120px 0px 0px 0px`)};
align-items: center;
flex: 1;
${({ theme }) => theme.mediaWidth.upToSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
padding: 52px 0px 16px 0px;
`};
`
......
src/pages/CreateProposal/index.tsx
View file @ c43c8de6
......@@ -34,7 +34,7 @@ import { ProposalEditor } from './ProposalEditor'
import { ProposalSubmissionModal } from './ProposalSubmissionModal'
const PageWrapper = styled(AutoColumn)`
${({ theme }) => theme.mediaWidth.upToMedium`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
padding: 0px 8px;
`};
`
......
src/pages/Earn/Manage.tsx
View file @ c43c8de6
......@@ -31,7 +31,7 @@ import { currencyId } from '../../utils/currencyId'
const PageWrapper = styled(AutoColumn)`
max-width: 640px;
width: 100%;
${({ theme }) => theme.mediaWidth.upToSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
padding: 0px 8px;
`};
`
......@@ -84,7 +84,7 @@ const DataRow = styled(RowBetween)`
justify-content: center;
gap: 12px;
${({ theme }) => theme.mediaWidth.upToSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
flex-direction: column;
gap: 12px;
`};
......
src/pages/Earn/index.tsx
View file @ c43c8de6
......@@ -17,7 +17,7 @@ import { Countdown } from './Countdown'
const PageWrapper = styled(AutoColumn)`
max-width: 640px;
width: 100%;
${({ theme }) => theme.mediaWidth.upToSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
padding: 0px 8px;
`};
`
......@@ -37,7 +37,7 @@ const PoolSection = styled.div`
`
const DataRow = styled(RowBetween)`
${({ theme }) => theme.mediaWidth.upToSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
flex-direction: column;
`};
`
......
src/pages/Pool/CTACards.tsx
View file @ c43c8de6
......@@ -13,7 +13,7 @@ const CTASection = styled.section`
gap: 8px;
opacity: 0.8;
${({ theme }) => theme.mediaWidth.upToSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
grid-template-columns: auto;
grid-template-rows: auto;
`};
......@@ -75,7 +75,7 @@ const HeaderText = styled(ThemedText.DeprecatedLabel)`
font-weight: 400;
font-size: 16px;
${({ theme }) => theme.mediaWidth.upToMedium`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
font-size: 16px;
`};
`
......@@ -85,7 +85,7 @@ const ResponsiveColumn = styled(AutoColumn)`
width: 100%;
gap: 8px;
${({ theme }) => theme.mediaWidth.upToMedium`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
gap: 8px;
`};
justify-content: space-between;
......
src/pages/Pool/PositionPage.tsx
View file @ c43c8de6
......@@ -52,12 +52,12 @@ const PageWrapper = styled.div`
min-width: 800px;
max-width: 960px;
${({ theme }) => theme.mediaWidth.upToMedium`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
min-width: 680px;
max-width: 680px;
`};
${({ theme }) => theme.mediaWidth.upToSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
min-width: 600px;
max-width: 600px;
`};
......@@ -67,7 +67,7 @@ const PageWrapper = styled.div`
max-width: 500px;
}
${({ theme }) => theme.mediaWidth.upToExtraSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToExtraSmall`
min-width: 340px;
max-width: 340px;
`};
......@@ -110,7 +110,7 @@ const DoubleArrow = styled.span`
margin: 0 1rem;
`
const ResponsiveRow = styled(RowBetween)`
${({ theme }) => theme.mediaWidth.upToSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
flex-direction: column;
align-items: flex-start;
row-gap: 16px;
......@@ -122,7 +122,7 @@ const ResponsiveButtonPrimary = styled(ButtonPrimary)`
border-radius: 12px;
padding: 6px 8px;
width: fit-content;
${({ theme }) => theme.mediaWidth.upToSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
flex: 1 1 auto;
width: 49%;
`};
......
src/pages/Pool/index.tsx
View file @ c43c8de6
......@@ -28,18 +28,18 @@ const PageWrapper = styled(AutoColumn)`
max-width: 870px;
width: 100%;
${({ theme }) => theme.mediaWidth.upToMedium`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
max-width: 800px;
padding: 0px 8px;
`};
${({ theme }) => theme.mediaWidth.upToSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
max-width: 500px;
`};
`
const TitleRow = styled(RowBetween)`
color: ${({ theme }) => theme.deprecated_text2};
${({ theme }) => theme.mediaWidth.upToSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
flex-wrap: wrap;
gap: 12px;
width: 100%;
......@@ -50,7 +50,7 @@ const ButtonRow = styled(RowFixed)`
margin-left: 8px;
}
${({ theme }) => theme.mediaWidth.upToSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
width: 100%;
flex-direction: row;
justify-content: space-between;
......@@ -59,7 +59,7 @@ const ButtonRow = styled(RowFixed)`
`
const Menu = styled(NewMenu)`
margin-left: 0;
${({ theme }) => theme.mediaWidth.upToSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
flex: 1 1 auto;
width: 49%;
right: 0px;
......@@ -118,7 +118,7 @@ const ResponsiveButtonPrimary = styled(ButtonPrimary)`
border-radius: 12px;
padding: 6px 8px;
width: fit-content;
${({ theme }) => theme.mediaWidth.upToSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
flex: 1 1 auto;
width: 100%;
`};
......
src/pages/Pool/styleds.tsx
View file @ c43c8de6
......@@ -19,7 +19,7 @@ export const MaxButton = styled.button<{ width: string }>`
border: 1px solid ${({ theme }) => theme.deprecated_primary5};
border-radius: 0.5rem;
font-size: 1rem;
${({ theme }) => theme.mediaWidth.upToSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
padding: 0.25rem 0.5rem;
`};
font-weight: 500;
......
src/pages/Pool/v2.tsx
View file @ c43c8de6
......@@ -30,7 +30,7 @@ const PageWrapper = styled(AutoColumn)`
max-width: 640px;
width: 100%;
${({ theme }) => theme.mediaWidth.upToSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
padding: 0px 8px;
`};
`
......@@ -41,7 +41,7 @@ const VoteCard = styled(DataCard)`
`
const TitleRow = styled(RowBetween)`
${({ theme }) => theme.mediaWidth.upToSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
flex-wrap: wrap;
gap: 12px;
width: 100%;
......@@ -51,7 +51,7 @@ const TitleRow = styled(RowBetween)`
const ButtonRow = styled(RowFixed)`
gap: 8px;
${({ theme }) => theme.mediaWidth.upToSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
width: 100%;
flex-direction: row-reverse;
justify-content: space-between;
......@@ -61,14 +61,14 @@ const ButtonRow = styled(RowFixed)`
const ResponsiveButtonPrimary = styled(ButtonPrimary)`
width: fit-content;
border-radius: 12px;
${({ theme }) => theme.mediaWidth.upToSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
width: 48%;
`};
`
const ResponsiveButtonSecondary = styled(ButtonSecondary)`
width: fit-content;
${({ theme }) => theme.mediaWidth.upToSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
width: 48%;
`};
`
......
src/pages/RemoveLiquidity/styled.ts
View file @ c43c8de6
......@@ -7,7 +7,7 @@ export const Wrapper = styled.div`
padding: 20px;
min-width: 460px;
${({ theme }) => theme.mediaWidth.upToExtraSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToExtraSmall`
min-width: 340px;
`};
`
......@@ -19,7 +19,7 @@ export const SmallMaxButton = styled(MaxButton)`
export const ResponsiveHeaderText = styled(Text)`
font-size: 40px;
font-weight: 500;
${({ theme }) => theme.mediaWidth.upToExtraSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToExtraSmall`
font-size: 24px
`};
`
src/pages/Vote/Landing.tsx
View file @ c43c8de6
......@@ -33,7 +33,7 @@ import { UNI } from '../../constants/tokens'
import { ProposalStatus } from './styled'
const PageWrapper = styled(AutoColumn)`
${({ theme }) => theme.mediaWidth.upToSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
padding: 0px 8px;
`};
`
......@@ -86,7 +86,7 @@ const VoteCard = styled(DataCard)`
const WrapSmall = styled(RowBetween)`
margin-bottom: 1rem;
${({ theme }) => theme.mediaWidth.upToSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
flex-wrap: wrap;
`};
`
......
src/pages/Vote/VotePage.tsx
View file @ c43c8de6
......@@ -57,7 +57,7 @@ import { ProposalStatus } from './styled'
const PageWrapper = styled(AutoColumn)`
width: 100%;
${({ theme }) => theme.mediaWidth.upToSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
padding: 0px 8px;
`};
`
......@@ -123,7 +123,7 @@ const MarkDownWrapper = styled.div`
`
const WrapSmall = styled(RowBetween)`
${({ theme }) => theme.mediaWidth.upToSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
align-items: flex-start;
flex-direction: column;
`};
......
src/theme/components.tsx
View file @ c43c8de6
......@@ -430,20 +430,20 @@ export const CustomLightSpinner = styled(Spinner)<{ size: string }>`
`
export const HideSmall = styled.span`
${({ theme }) => theme.mediaWidth.upToSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
display: none;
`};
`
export const HideExtraSmall = styled.span`
${({ theme }) => theme.mediaWidth.upToExtraSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToExtraSmall`
display: none;
`};
`
export const SmallOnly = styled.span`
display: none;
${({ theme }) => theme.mediaWidth.upToSmall`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
display: block;
`};
`
......
src/theme/index.tsx
View file @ c43c8de6
......@@ -21,10 +21,19 @@ export * from './components'
type TextProps = Omit<TextPropsOriginal, 'css'>
export const MEDIA_WIDTHS = {
upToExtraSmall: 500,
upToSmall: 720,
upToMedium: 960,
upToLarge: 1280,
deprecated_upToExtraSmall: 500,
deprecated_upToSmall: 720,
deprecated_upToMedium: 960,
deprecated_upToLarge: 1280,
}
const BREAKPOINTS = {
sm: 640,
md: 768,
lg: 1024,
xl: 1280,
xxl: 1536,
xxxl: 1920,
}
// Migrating to a standard z-index system https://getbootstrap.com/docs/5.0/layout/z-index/
......@@ -42,17 +51,16 @@ export enum Z_INDEX {
tooltip = 1080,
}
const mediaWidthTemplates: { [width in keyof typeof MEDIA_WIDTHS]: typeof css } = Object.keys(MEDIA_WIDTHS).reduce(
(accumulator, size) => {
const deprecated_mediaWidthTemplates: { [width in keyof typeof MEDIA_WIDTHS]: typeof css } = Object.keys(
MEDIA_WIDTHS
).reduce((accumulator, size) => {
;(accumulator as any)[size] = (a: any, b: any, c: any) => css`
@media (max-width: ${(MEDIA_WIDTHS as any)[size]}px) {
${css(a, b, c)}
}
`
return accumulator
},
{}
) as any
}, {}) as any
const deprecated_white = ColorsPalette.white
const deprecated_black = ColorsPalette.black
......@@ -257,7 +265,10 @@ function getTheme(darkMode: boolean, isNewColorsEnabled: boolean): DefaultTheme
shadow1: darkMode ? '#000' : '#2F80ED',
// media queries
mediaWidth: mediaWidthTemplates,
deprecated_mediaWidth: deprecated_mediaWidthTemplates,
//breakpoints
breakpoint: BREAKPOINTS,
// css snippets
flexColumnNoWrap: css`
......
src/theme/styled.d.ts
View file @ c43c8de6
......@@ -127,11 +127,20 @@ declare module 'styled-components/macro' {
shadow1: Color
// media queries
mediaWidth: {
upToExtraSmall: ThemedCssFunction<DefaultTheme>
upToSmall: ThemedCssFunction<DefaultTheme>
upToMedium: ThemedCssFunction<DefaultTheme>
upToLarge: ThemedCssFunction<DefaultTheme>
deprecated_mediaWidth: {
deprecated_upToExtraSmall: ThemedCssFunction<DefaultTheme>
deprecated_upToSmall: ThemedCssFunction<DefaultTheme>
deprecated_upToMedium: ThemedCssFunction<DefaultTheme>
deprecated_upToLarge: ThemedCssFunction<DefaultTheme>
}
breakpoint: {
sm: number
md: number
lg: number
xl: number
xxl: number
xxxl: number
}
// css snippets
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment