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

* font-feature-settings

* fix: use font-feature-settings across app

* move to appwrapper

* oops

* maybe better?

* fix

public/index.html

@@ -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 {

src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx

@@ -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 {

src/components/swap/styleds.tsx

@@ -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)'};

src/pages/App.tsx

@@ -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}>

src/pages/AppBody.tsx

@@ -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)'};