refactor: remove the fixed global style component (#1772)

* chore: remove the fixed global style component * move it to a more appropriate place * move some css around * add an element that triggers the font to immediately load * some more nit refactoring * style * move the radial gradient into the index.css file * try overriding the font display attribute of the inter family * remove font-display rule

refactor: remove the fixed global style component (#1772)
* chore: remove the fixed global style component * move it to a more appropriate place * move some css around * add an element that triggers the font to immediately load * some more nit refactoring * style * move the radial gradient into the index.css file * try overriding the font display attribute of the inter family * remove font-display rule
c38771a6 · Moody Salem · GitHub · 8e364680 · c38771a6 · c38771a6
Commit c38771a6 authored May 31, 2021 by Moody Salem Committed by GitHub May 31, 2021
8 changed files
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
-import 'inter-ui'
+import '../src/index.css'
 import { Story } from '@storybook/react/types-6-0'
 import { createWeb3ReactRoot, Web3ReactProvider } from '@web3-react/core'
 import React from 'react'
@@ -6,7 +6,7 @@ import { Provider as StoreProvider } from 'react-redux'
 import { ThemeProvider as SCThemeProvider } from 'styled-components'
 import { NetworkContextName } from '../src/constants/misc'
 import store from '../src/state'
-import { FixedGlobalStyle, theme, ThemedGlobalStyle } from '../src/theme'
+import { theme, ThemedGlobalStyle } from '../src/theme'
 import getLibrary from '../src/utils/getLibrary'
 import * as storybookThemes from './theme'
@@ -75,7 +75,6 @@ const withProviders = (Component: Story, context: Record<string, any>) => {
        <Web3ProviderNetwork getLibrary={getLibrary}>
          <StoreProvider store={store}>
            <SCThemeProvider theme={THEME}>
-              <FixedGlobalStyle />
              <ThemedGlobalStyle />
              <main>
                <Component />

--- a/public/index.html
+++ b/public/index.html
@@ -28,7 +28,15 @@
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
+    <!-- The root is the container of the app -->
+    <div id="root">
+      <!-- Triggers the font to load immediately and then is replaced by the app -->
+      <div style="visibility: hidden">X</div>
+    </div>
+    <div id="background-radial-gradient"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

--- a/src/components/ErrorBoundary/index.tsx
+++ b/src/components/ErrorBoundary/index.tsx
 import { Trans } from '@lingui/macro'
 import React, { ErrorInfo } from 'react'
 import store, { AppState } from '../../state'
-import { ExternalLink, ThemedBackground, TYPE } from '../../theme'
+import { ExternalLink, TYPE } from '../../theme'
 import { AutoColumn } from '../Column'
 import styled from 'styled-components/macro'
 import ReactGA from 'react-ga'
@@ -70,7 +70,6 @@ export default class ErrorBoundary extends React.Component<unknown, ErrorBoundar
      const encodedBody = encodeURIComponent(issueBody(error))
      return (
        <FallbackWrapper>
-          <ThemedBackground />
          <BodyWrapper>
            <AutoColumn gap={'md'}>
              <SomethingWentWrongWrapper>

--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@@ -3,7 +3,6 @@ import styled, { css } from 'styled-components'
 import { animated, useTransition, useSpring } from 'react-spring'
 import { DialogOverlay, DialogContent } from '@reach/dialog'
 import { isMobile } from 'react-device-detect'
-import '@reach/dialog/styles.css'
 import { transparentize } from 'polished'
 import { useGesture } from 'react-use-gesture'

--- a/src/index.css
+++ b/src/index.css
+@import '~inter-ui';
+@import '~@reach/dialog/styles.css';
+* {
+    font-family: 'Inter', sans-serif;
+    box-sizing: border-box;
+}
+@supports (font-variation-settings: normal) {
+    * {
+        font-family: 'Inter var', sans-serif;
+    }
+}
+html,
+body {
+    margin: 0;
+    padding: 0;
+}
+button {
+    user-select: none;
+}
+html {
+    font-size: 16px;
+    font-variant: none;
+    -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 {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    pointer-events: none;
+    width: 200vw;
+    height: 200vh;
+    mix-blend-mode: color;
+    background: radial-gradient(50% 50% at 50% 50%, #fc077d10 0%, rgba(255, 255, 255, 0) 100%);
+    transform: translate(-50vw, -100vh);
+    z-index: -1;
+}
--- a/src/index.tsx
+++ b/src/index.tsx
+import './index.css'
 import { createWeb3ReactRoot, Web3ReactProvider } from '@web3-react/core'
-import 'inter-ui'
 import React, { StrictMode } from 'react'
 import { isMobile } from 'react-device-detect'
 import ReactDOM from 'react-dom'
@@ -17,7 +17,7 @@ import ListsUpdater from './state/lists/updater'
 import MulticallUpdater from './state/multicall/updater'
 import TransactionUpdater from './state/transactions/updater'
 import UserUpdater from './state/user/updater'
-import ThemeProvider, { FixedGlobalStyle, ThemedGlobalStyle } from './theme'
+import ThemeProvider, { ThemedGlobalStyle } from './theme'
 import getLibrary from './utils/getLibrary'
 const Web3ProviderNetwork = createWeb3ReactRoot(NetworkContextName)
@@ -63,7 +63,6 @@ ReactDOM.render(
    <Provider store={store}>
      <HashRouter>
        <LanguageProvider>
-          <FixedGlobalStyle />
          <Web3ReactProvider getLibrary={getLibrary}>
            <Web3ProviderNetwork getLibrary={getLibrary}>
              <Blocklist>

--- a/src/pages/App.tsx
+++ b/src/pages/App.tsx
@@ -28,7 +28,6 @@ import VotePage from './Vote/VotePage'
 import { RedirectDuplicateTokenIdsV2 } from './AddLiquidityV2/redirects'
 import { PositionPage } from './Pool/PositionPage'
 import AddLiquidity from './AddLiquidity'
-import { ThemedBackground } from '../theme'
 import ApeModeQueryParamReader from 'hooks/useApeModeQueryParamReader'
 const AppWrapper = styled.div`
@@ -83,7 +82,6 @@ export default function App() {
            <Header />
          </HeaderWrapper>
          <BodyWrapper>
-            <ThemedBackground />
            <Popups />
            <Polling />
            <TopLevelModals />

--- a/src/theme/index.tsx
+++ b/src/theme/index.tsx
@@ -188,74 +188,13 @@ export const TYPE = {
  },
 }
-export const ThemedBackground = styled.div<{ backgroundColor?: string | undefined }>`
-  position: fixed;
-  top: 0;
-  left: calc(-100vw / 2);
-  right: 0;
-  pointer-events: none;
-  /* max-width: 100vw !important; */
-  width: 200vw;
-  height: 200vh;
-  mix-blend-mode: color;
-  background: ${({ backgroundColor }) =>
-    `radial-gradient(50% 50% at 50% 50%, ${
-      backgroundColor ? backgroundColor : '#fc077d10'
-    } 0%, rgba(255, 255, 255, 0) 100%)`};
-  transform: translateY(-100vh);
-  will-change: background;
-  transition: background 450ms ease;
-`
-export const FixedGlobalStyle = createGlobalStyle`
-html, input, textarea, button {
-  font-family: 'Inter', sans-serif;
-}
-@supports (font-variation-settings: normal) {
-  html, input, textarea, button {
-    font-family: 'Inter var', sans-serif;
-  }
-}
-html,
-body {
-  margin: 0;
-  padding: 0;
-}
- a {
-   color: ${colors(false).blue1}; 
- }
-* {
-  box-sizing: border-box;
-}
-button {
-  user-select: none;
-}
-html {
-  font-size: 16px;
-  font-variant: none;
-  -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;
-}
-`
 export const ThemedGlobalStyle = createGlobalStyle`
 html {
  color: ${({ theme }) => theme.text1};
  background-color: ${({ theme }) => theme.bg1};
 }
-body {
+a {
-  min-height: 100vh;
+ color: ${({ theme }) => theme.blue1}; 
-  background-position: 0 -30vh;
-  background-repeat: no-repeat;
 }
 `