ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: use font-feature-settings in AppWrapper (#4759)

Browse Source 
* font-feature-settings

* fix: use font-feature-settings across app

* move to appwrapper

* oops

* maybe better?

* fix
This commit is contained in:
vignesh mohankumar 2022-09-28 18:14:00 -04:00 committed by GitHub
parent ac8e59acba
commit 1601962f03
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 12 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/index.html
View File

@ -70,7 +70,6 @@
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
font-feature-settings: 'ss01' on, 'ss02' on, 'cv01' on, 'cv03' on;
}
#background-radial-gradient {

1
src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx
View File

@ -204,7 +204,6 @@ const StyledNumericalInput = styled(NumericalInput)<{ $loading: boolean; redesig
font-size: ${({ redesignFlag }) => redesignFlag && '36px'};
line-height: ${({ redesignFlag }) => redesignFlag && '44px'};
font-variant: ${({ redesignFlag }) => redesignFlag && 'small-caps'};
font-feature-settings: ${({ redesignFlag }) => redesignFlag && 'pnum on, lnum on'};
`
interface SwapCurrencyInputPanelProps {

1
src/components/swap/styleds.tsx
View File

@ -30,7 +30,6 @@ export const SwapWrapper = styled.main<{ margin?: string; maxWidth?: string; red
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)'};

16
src/pages/App.tsx
View File

@ -6,6 +6,7 @@ import TopLevelModals from 'components/TopLevelModals'
import { useFeatureFlagsIsLoaded } from 'featureFlags'
import { NavBarVariant, useNavBarFlag } from 'featureFlags/flags/navBar'
import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
import { TokensVariant, useTokensFlag } from 'featureFlags/flags/tokens'
import ApeModeQueryParamReader from 'hooks/useApeModeQueryParamReader'
import { lazy, Suspense, useEffect } from 'react'
@ -50,10 +51,12 @@ const Collection = lazy(() => import('nft/pages/collection'))
const Sell = lazy(() => import('nft/pages/sell/sell'))
const Asset = lazy(() => import('nft/pages/asset/Asset'))
const AppWrapper = styled.div`
const AppWrapper = styled.div<{ redesignFlagEnabled: boolean }>`
display: flex;
flex-flow: column;
align-items: flex-start;
font-feature-settings: ${({ redesignFlagEnabled }) =>
redesignFlagEnabled ? undefined : "'ss01' on, 'ss02' on, 'cv01' on, 'cv03' on"};
`
const BodyWrapper = styled.div<{ navBarFlag: NavBarVariant }>`
@ -115,6 +118,7 @@ export default function App() {
const tokensFlag = useTokensFlag()
const navBarFlag = useNavBarFlag()
const nftFlag = useNftFlag()
const redesignFlagEnabled = useRedesignFlag() === RedesignVariant.Enabled
const { pathname } = useLocation()
const currentPage = getCurrentPageFromLocation(pathname)
@ -134,10 +138,10 @@ export default function App() {
user.set(CUSTOM_USER_PROPERTIES.BROWSER, getBrowser())
user.set(CUSTOM_USER_PROPERTIES.SCREEN_RESOLUTION_HEIGHT, window.screen.height)
user.set(CUSTOM_USER_PROPERTIES.SCREEN_RESOLUTION_WIDTH, window.screen.width)
getCLS(({ delta, id }: Metric) => sendAnalyticsEvent(EventName.WEB_VITALS, { cumulative_layout_shift: delta }))
getFCP(({ delta, id }: Metric) => sendAnalyticsEvent(EventName.WEB_VITALS, { first_contentful_paint_ms: delta }))
getFID(({ delta, id }: Metric) => sendAnalyticsEvent(EventName.WEB_VITALS, { first_input_delay_ms: delta }))
getLCP(({ delta, id }: Metric) => sendAnalyticsEvent(EventName.WEB_VITALS, { largest_contentful_paint_ms: delta }))
getCLS(({ delta }: Metric) => sendAnalyticsEvent(EventName.WEB_VITALS, { cumulative_layout_shift: delta }))
getFCP(({ delta }: Metric) => sendAnalyticsEvent(EventName.WEB_VITALS, { first_contentful_paint_ms: delta }))
getFID(({ delta }: Metric) => sendAnalyticsEvent(EventName.WEB_VITALS, { first_input_delay_ms: delta }))
getLCP(({ delta }: Metric) => sendAnalyticsEvent(EventName.WEB_VITALS, { largest_contentful_paint_ms: delta }))
}, [])
useEffect(() => {
@ -152,7 +156,7 @@ export default function App() {
<ErrorBoundary>
<DarkModeQueryParamReader />
<ApeModeQueryParamReader />
<AppWrapper>
<AppWrapper redesignFlagEnabled={redesignFlagEnabled}>
<Trace page={currentPage}>
<HeaderWrapper>{navBarFlag === NavBarVariant.Enabled ? <NavBar /> : <Header />}</HeaderWrapper>
<BodyWrapper navBarFlag={navBarFlag}>

3
src/pages/AppBody.tsx
View File

@ -15,7 +15,8 @@ export const BodyWrapper = styled.main<{ margin?: string; maxWidth?: string; red
margin-left: auto;
margin-right: auto;
z-index: ${Z_INDEX.deprecated_content};
font-feature-settings: ${({ redesignFlag }) => redesignFlag && "'ss02' off"};
font-feature-settings: ${({ redesignFlag }) =>
redesignFlag ? "'ss01' on, 'ss02' on, 'cv01' on, 'cv03' on" : "'ss01' on, 'ss02' on, 'cv01' on, 'cv03' on"};
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)'};