Skip to content

I
interface
Commit c38771a6 authored by Moody Salem's avatar Moody Salem Committed by GitHub
Browse files
Options

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
parent 8e364680
Hide whitespace changes
Inline Side-by-side
Showing with 62 additions and 75 deletions
.storybook/preview.tsx
View file @ c38771a6
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 />
......
public/index.html
View file @ c38771a6
......@@ -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.
......
src/components/ErrorBoundary/index.tsx
View file @ c38771a6
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>
......
src/components/Modal/index.tsx
View file @ c38771a6
......@@ -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'
......
src/index.css 0 → 100644
View file @ c38771a6
@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;
}
src/index.tsx
View file @ c38771a6
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>
......
src/pages/App.tsx
View file @ c38771a6
......@@ -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 />
......
src/theme/index.tsx
View file @ c38771a6
......@@ -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};
}
`
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