partial: migrate global styles
This commit is contained in:
Rafael Taranto
parent
c917fd3ca2
commit
866da2fc64
5 changed files with 171 additions and 173 deletions
|
|
@ -1,9 +1,9 @@
|
|||
import { useQuery, gql } from "@apollo/client";
|
||||
import { useQuery, gql } from '@apollo/client'
|
||||
import CssBaseline from '@mui/material/CssBaseline'
|
||||
import Grid from '@mui/material/Grid'
|
||||
import Slide from '@mui/material/Slide'
|
||||
import { StylesProvider, jssPreset, makeStyles } from '@mui/styles';
|
||||
import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
|
||||
import { StylesProvider, jssPreset, makeStyles } from '@mui/styles'
|
||||
import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles'
|
||||
import { create } from 'jss'
|
||||
import extendJss from 'jss-plugin-extend'
|
||||
import React, { useContext, useState } from 'react'
|
||||
|
|
@ -19,7 +19,6 @@ import { tree, hasSidebar, Routes, getParent } from 'src/routing/routes'
|
|||
import ApolloProvider from 'src/utils/apollo'
|
||||
|
||||
import AppContext from 'src/AppContext'
|
||||
import global from 'src/styling/global'
|
||||
import theme from 'src/styling/theme'
|
||||
import { backgroundColor, mainWidth } from 'src/styling/variables'
|
||||
|
||||
|
|
@ -31,7 +30,6 @@ const fill = '100%'
|
|||
const flexDirection = 'column'
|
||||
|
||||
const useStyles = makeStyles({
|
||||
...global,
|
||||
root: {
|
||||
backgroundColor,
|
||||
width: fill,
|
||||
|
|
@ -159,7 +157,7 @@ const App = () => {
|
|||
</ApolloProvider>
|
||||
</Router>
|
||||
</AppContext.Provider>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
|
|
|
|||
|
|
@ -93,7 +93,8 @@ const styles = {
|
|||
flexGrow: 1
|
||||
},
|
||||
unreadIcon: {
|
||||
marginTop: 2,
|
||||
marginTop: 5,
|
||||
marginLeft: spacer,
|
||||
width: '12px',
|
||||
height: '12px',
|
||||
backgroundColor: secondaryColor,
|
||||
|
|
|
|||
|
|
@ -1,95 +1,82 @@
|
|||
export default {
|
||||
// /*!
|
||||
// * Web Fonts from Fontspring.com
|
||||
// *
|
||||
// * All OpenType features and all extended glyphs have been removed.
|
||||
// * Fully installable fonts can be purchased at http://www.fontspring.com
|
||||
// *
|
||||
// * The fonts included in this stylesheet are subject to the End User License you purchased
|
||||
// * from Fontspring. The fonts are protected under domestic and international trademark and
|
||||
// * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
|
||||
// * distributing this font software.
|
||||
// *
|
||||
// * (c) 2010-2018 Fontspring
|
||||
// *
|
||||
// *
|
||||
// *
|
||||
// *
|
||||
// * The fonts included are copyrighted by the vendor listed below.
|
||||
// *
|
||||
// * Vendor: Fontfabric
|
||||
// * License URL: https://www.fontspring.com/licenses/fontfabric/webfont
|
||||
// *
|
||||
// *
|
||||
// */
|
||||
export default `
|
||||
/*!
|
||||
* Web Fonts from Fontspring.com
|
||||
*
|
||||
* All OpenType features and all extended glyphs have been removed.
|
||||
* Fully installable fonts can be purchased at http://www.fontspring.com
|
||||
*
|
||||
* The fonts included in this stylesheet are subject to the End User License you purchased
|
||||
* from Fontspring. The fonts are protected under domestic and international trademark and
|
||||
* copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
|
||||
* distributing this font software.
|
||||
*
|
||||
* (c) 2010-2018 Fontspring
|
||||
*
|
||||
*
|
||||
*
|
||||
*
|
||||
* The fonts included are copyrighted by the vendor listed below.
|
||||
*
|
||||
* Vendor: Fontfabric
|
||||
* License URL: https://www.fontspring.com/licenses/fontfabric/webfont
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
'@font-face': [
|
||||
{
|
||||
fontFamily: 'Mont',
|
||||
src: [
|
||||
'url("/fonts/MontHeavy/mont-heavy-webfont.woff2") format("woff2")',
|
||||
'url("/fonts/MontHeavy/mont-heavy-webfont.woff") format("woff")'
|
||||
],
|
||||
fontWeight: 900,
|
||||
fontStyle: 'normal'
|
||||
},
|
||||
{
|
||||
fontFamily: 'Mont',
|
||||
src: [
|
||||
'url("/fonts/MontHeavy/mont-bold-webfont.woff2") format("woff2")',
|
||||
'url("/fonts/MontHeavy/mont-bold-webfont.woff") format("woff")'
|
||||
],
|
||||
fontWeight: 700,
|
||||
fontStyle: 'normal'
|
||||
},
|
||||
// /*!
|
||||
// * Web Fonts from Fontspring.com
|
||||
// *
|
||||
// * All OpenType features and all extended glyphs have been removed.
|
||||
// * Fully installable fonts can be purchased at http://www.fontspring.com
|
||||
// *
|
||||
// * The fonts included in this stylesheet are subject to the End User License you purchased
|
||||
// * from Fontspring. The fonts are protected under domestic and international trademark and
|
||||
// * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
|
||||
// * distributing this font software.
|
||||
// *
|
||||
// * (c) 2010-2018 Fontspring
|
||||
// *
|
||||
// *
|
||||
// *
|
||||
// *
|
||||
// * The fonts included are copyrighted by the vendor listed below.
|
||||
// *
|
||||
// * Vendor: exljbris Font Foundry
|
||||
// * License URL: https://www.fontspring.com/licenses/exljbris/webfont
|
||||
// *
|
||||
// *
|
||||
// */
|
||||
{
|
||||
fontFamily: 'MuseoSans',
|
||||
src: [
|
||||
'url("/fonts/MuseoSans/MuseoSans_500-webfont.woff2") format("woff2")',
|
||||
'url("/fonts/MuseoSans/MuseoSans_500-webfont.woff") format("woff")'
|
||||
],
|
||||
fontWeight: 500,
|
||||
fontStyle: 'normal'
|
||||
},
|
||||
{
|
||||
fontFamily: 'MuseoSans',
|
||||
src: [
|
||||
'url("/fonts/MuseoSans/MuseoSans_700-webfont.woff2") format("woff2")',
|
||||
'url("/fonts/MuseoSans/MuseoSans_700-webfont.woff") format("woff")'
|
||||
],
|
||||
fontWeight: 700,
|
||||
fontStyle: 'normal'
|
||||
},
|
||||
|
||||
// // BP-mono Freely distributed at http://backpacker.gr/fonts/5
|
||||
{
|
||||
fontFamily: 'BPmono',
|
||||
src: 'url("/fonts/BPmono/BPmono.ttf") format("truetype")',
|
||||
fontWeight: 500,
|
||||
fontStyle: 'normal'
|
||||
@font-face {
|
||||
font-family: 'Mont';
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
src: url('/fonts/MontHeavy/mont-heavy-webfont.woff2') format('woff2'), url('/fonts/MontHeavy/mont-heavy-webfont.woff') format('woff');
|
||||
}
|
||||
]
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Mont';
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
src: url('/fonts/MontHeavy/mont-bold-webfont.woff2') format('woff2'), url('/fonts/MontHeavy/mont-bold-webfont.woff') format('woff');
|
||||
}
|
||||
|
||||
/*!
|
||||
* Web Fonts from Fontspring.com
|
||||
*
|
||||
* All OpenType features and all extended glyphs have been removed.
|
||||
* Fully installable fonts can be purchased at http://www.fontspring.com
|
||||
*
|
||||
* The fonts included in this stylesheet are subject to the End User License you purchased
|
||||
* from Fontspring. The fonts are protected under domestic and international trademark and
|
||||
* copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
|
||||
* distributing this font software.
|
||||
*
|
||||
* (c) 2010-2018 Fontspring
|
||||
*
|
||||
*
|
||||
*
|
||||
*
|
||||
* The fonts included are copyrighted by the vendor listed below.
|
||||
*
|
||||
* Vendor: exljbris Font Foundry
|
||||
* License URL: https://www.fontspring.com/licenses/exljbris/webfont
|
||||
*
|
||||
*
|
||||
*/
|
||||
@font-face {
|
||||
font-family: 'MuseoSans';
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
src: url("/fonts/MuseoSans/MuseoSans_500-webfont.woff2") format("woff2"), url("/fonts/MuseoSans/MuseoSans_500-webfont.woff") format("woff");
|
||||
},
|
||||
@font-face {
|
||||
font-family: 'MuseoSans';
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
src: url("/fonts/MuseoSans/MuseoSans_700-webfont.woff2") format("woff2"), url("/fonts/MuseoSans/MuseoSans_700-webfont.woff") format("woff");
|
||||
},
|
||||
|
||||
/* BP-mono Freely distributed at http://backpacker.gr/fonts/5 */
|
||||
@font-face {
|
||||
font-family: 'BPmono';
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
src: url("/fonts/BPmono/BPmono.ttf") format("truetype"),
|
||||
}
|
||||
`
|
||||
|
|
|
|||
|
|
@ -1,72 +1,80 @@
|
|||
import { mainWidth } from 'src/styling/variables'
|
||||
|
||||
import fonts from './fonts'
|
||||
|
||||
const fill = '100%'
|
||||
|
||||
export default {
|
||||
'@global': {
|
||||
...fonts,
|
||||
'#root': {
|
||||
width: fill,
|
||||
minHeight: fill
|
||||
},
|
||||
'.root-notifcenter-open': {
|
||||
// for when notification center is open
|
||||
overflowY: 'auto',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
left: 0
|
||||
},
|
||||
'.body-notifcenter-open': {
|
||||
// for when notification center is open
|
||||
overflow: 'hidden'
|
||||
},
|
||||
'.root-blur': {
|
||||
filter: 'blur(1px)',
|
||||
pointerEvents: 'none'
|
||||
},
|
||||
html: {
|
||||
height: fill,
|
||||
'@media screen and (max-height: 900px)': {
|
||||
scrollbarGutter: 'stable'
|
||||
export default `
|
||||
${fonts}
|
||||
body {
|
||||
font-size: 0.875rem;
|
||||
width: ${mainWidth}px;
|
||||
display: flex;
|
||||
min-height: ${fill};
|
||||
@media screen and (min-width: 1200px) {
|
||||
width: auto;
|
||||
}
|
||||
},
|
||||
body: {
|
||||
width: mainWidth,
|
||||
display: 'flex',
|
||||
minHeight: fill,
|
||||
'@media screen and (min-width: 1200px)': {
|
||||
width: 'auto'
|
||||
}
|
||||
},
|
||||
[`a::-moz-focus-inner,
|
||||
'input[type="submit"]::-moz-focus-inner,
|
||||
input[type="button"]::-moz-focus-inner`]: {
|
||||
border: 0
|
||||
},
|
||||
[`a::-moz-focus-inner,
|
||||
|
||||
html {
|
||||
height: ${fill};
|
||||
@media screen and (max-height: 900px) {
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
}
|
||||
|
||||
#root {
|
||||
width: ${fill};
|
||||
minHeight: ${fill};
|
||||
}
|
||||
|
||||
.root-notifcenter-open {
|
||||
// for when notification center is open
|
||||
overflow-y: 'auto';
|
||||
position: 'absolute';
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.body-notifcenter-open {
|
||||
// for when notification center is open
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.root-blur {
|
||||
filter: blur(1px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
a::-moz-focus-inner,
|
||||
input[type="submit"]::-moz-focus-inner,
|
||||
input[type="button"]::-moz-focus-inner`]: {
|
||||
border: 0
|
||||
},
|
||||
[`a,
|
||||
input[type="button"]::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
a::-moz-focus-inner,
|
||||
input[type="submit"]::-moz-focus-inner,
|
||||
input[type="button"]::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited,
|
||||
a:focus,
|
||||
a:active,
|
||||
a:hover`]: {
|
||||
outline: '0 none'
|
||||
},
|
||||
'button::-moz-focus-inner': {
|
||||
border: 0
|
||||
},
|
||||
a:hover {
|
||||
outline: 0 none;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// forcing styling onto inner container
|
||||
'.ReactVirtualized__Grid__innerScrollContainer': {
|
||||
overflow: 'inherit !important'
|
||||
.ReactVirtualized__Grid__innerScrollContainer {
|
||||
overflow: inherit !important;
|
||||
},
|
||||
'.ReactVirtualized__Grid.ReactVirtualized__List': {
|
||||
overflowY: 'overlay !important'
|
||||
.ReactVirtualized__Grid.ReactVirtualized__List {
|
||||
overflow-y: overlay !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { createTheme } from '@mui/material/styles';
|
||||
import { createTheme } from '@mui/material/styles'
|
||||
import global from './global'
|
||||
|
||||
import typographyStyles from 'src/components/typography/styles'
|
||||
|
||||
|
|
@ -23,7 +24,7 @@ const { p } = typographyStyles
|
|||
|
||||
let theme = createTheme({
|
||||
typography: {
|
||||
fontFamily: inputFontFamily,
|
||||
fontFamily: inputFontFamily
|
||||
},
|
||||
palette: {
|
||||
primary: {
|
||||
|
|
@ -39,15 +40,18 @@ let theme = createTheme({
|
|||
background: {
|
||||
default: backgroundColor
|
||||
}
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
theme = createTheme(theme, {
|
||||
components: {
|
||||
MuiCssBaseline: {
|
||||
styleOverrides: global
|
||||
},
|
||||
MuiTypography: {
|
||||
styleOverrides: {
|
||||
root: { ...p },
|
||||
body1: { ...p },
|
||||
body1: { ...p }
|
||||
}
|
||||
},
|
||||
MuiButtonBase: {
|
||||
|
|
@ -131,7 +135,7 @@ theme = createTheme(theme, {
|
|||
},
|
||||
'&[aria-selected="true"]': {
|
||||
backgroundColor: `${subheaderColor} !important`
|
||||
},
|
||||
}
|
||||
},
|
||||
paper: {
|
||||
color: fontColor,
|
||||
|
|
@ -234,7 +238,7 @@ theme = createTheme(theme, {
|
|||
vertical: {
|
||||
borderRadius: 8,
|
||||
border: 'none',
|
||||
borderColor: zircon,
|
||||
borderColor: zircon
|
||||
},
|
||||
firstButton: {
|
||||
borderTop: '1px solid',
|
||||
|
|
@ -259,7 +263,7 @@ theme = createTheme(theme, {
|
|||
borderTopLeftRadius: 8,
|
||||
borderBottomRightRadius: 8,
|
||||
borderBottomLeftRadius: 8
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue