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
This commit is contained in:
Moody Salem
GitHub
parent
8e364680b6
commit
c38771a6aa
@ -1,4 +1,4 @@
|
||||
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 />
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
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>
|
||||
|
||||
@ -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'
|
||||
|
||||
|
||||
46
src/index.css
Normal file
46
src/index.css
Normal file
@ -0,0 +1,46 @@
|
||||
@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;
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
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>
|
||||
|
||||
@ -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 />
|
||||
|
||||
@ -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 {
|
||||
min-height: 100vh;
|
||||
background-position: 0 -30vh;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
a {
|
||||
color: ${({ theme }) => theme.blue1};
|
||||
}
|
||||
`
|
||||
|
||||
Loading…
Reference in New Issue
Block a user