Vojtech Simetka
57f5a73f3a
* feat: info page redesign * style: headers and nesting for expandable lists * style: body typography * chore: bee version check * feat: key list item component * style: hover state for the key displaying component * style: left border on expanded items * fix: word break and splitting for hexstrings divisible by 6 * chore: moved the styles to classes * style: tooltips now have arrow * feat: indicate value has been copied * feat: removed the connectivity table in favor of info page * feat: added health tooltips for connectivity * refactor: simplified the topology into single component * fix: spacing between the bee version and the update button/chip * fix: spacing on devices not supporting rowGap
151 lines
3.5 KiB
TypeScript
151 lines
3.5 KiB
TypeScript
import { createMuiTheme, Theme } from '@material-ui/core/styles'
|
|
import { orange } from '@material-ui/core/colors'
|
|
|
|
declare module '@material-ui/core/styles/createPalette' {
|
|
interface TypeBackground {
|
|
appBar: string
|
|
}
|
|
}
|
|
|
|
// Overwriting default components styles
|
|
const componentsOverrides = (theme: Theme) => ({
|
|
MuiContainer: {
|
|
root: { padding: theme.spacing(8) },
|
|
maxWidthXs: { padding: theme.spacing(8) },
|
|
maxWidthSm: { padding: theme.spacing(8) },
|
|
maxWidthMd: { padding: theme.spacing(8) },
|
|
maxWidthLg: { padding: theme.spacing(8) },
|
|
maxWidthXl: { padding: theme.spacing(8) },
|
|
},
|
|
MuiButton: {
|
|
textSizeLarge: {
|
|
padding: theme.spacing(2),
|
|
},
|
|
containedSizeLarge: {
|
|
padding: theme.spacing(2),
|
|
boxShadow: 'none',
|
|
borderRadius: 0,
|
|
'&:hover': {
|
|
backgroundColor: theme.palette.primary.main,
|
|
color: 'white',
|
|
boxShadow: 'none',
|
|
// https://github.com/mui-org/material-ui/issues/22543
|
|
'@media (hover: none)': {
|
|
backgroundColor: theme.palette.primary.main,
|
|
color: 'white',
|
|
boxShadow: 'none',
|
|
},
|
|
},
|
|
},
|
|
contained: {
|
|
backgroundColor: 'white',
|
|
boxShadow: 'none',
|
|
'&:hover': {
|
|
backgroundColor: theme.palette.primary.main,
|
|
color: 'white',
|
|
// https://github.com/mui-org/material-ui/issues/22543
|
|
'@media (hover: none)': {
|
|
backgroundColor: theme.palette.primary.main,
|
|
color: 'white',
|
|
boxShadow: 'none',
|
|
},
|
|
},
|
|
'&:focus': {
|
|
backgroundColor: theme.palette.primary.main,
|
|
color: 'white',
|
|
},
|
|
'&:active': {
|
|
backgroundColor: theme.palette.primary.main,
|
|
color: 'white',
|
|
},
|
|
},
|
|
},
|
|
MuiTab: {
|
|
root: {
|
|
backgroundColor: 'transparent',
|
|
fontWeight: theme.typography.fontWeightRegular,
|
|
marginRight: theme.spacing(4),
|
|
fontFamily: [
|
|
'-apple-system',
|
|
'BlinkMacSystemFont',
|
|
'"Segoe UI"',
|
|
'Roboto',
|
|
'"Helvetica Neue"',
|
|
'Arial',
|
|
'sans-serif',
|
|
'"Apple Color Emoji"',
|
|
'"Segoe UI Emoji"',
|
|
'"Segoe UI Symbol"',
|
|
].join(','),
|
|
'&:hover': {
|
|
color: theme.palette.secondary,
|
|
opacity: 1,
|
|
},
|
|
'&$selected': {
|
|
color: theme.palette.secondary,
|
|
fontWeight: theme.typography.fontWeightMedium,
|
|
},
|
|
'&:focus': {
|
|
color: theme.palette.secondary,
|
|
},
|
|
},
|
|
},
|
|
MuiTabs: {
|
|
root: {
|
|
borderBottom: 'none',
|
|
},
|
|
indicator: {
|
|
backgroundColor: theme.palette.primary.main,
|
|
},
|
|
},
|
|
})
|
|
|
|
const propsOverrides = {
|
|
MuiTab: {
|
|
disableRipple: true,
|
|
},
|
|
MuiButtonBase: {
|
|
disableRipple: true,
|
|
},
|
|
}
|
|
|
|
export const theme = createMuiTheme({
|
|
palette: {
|
|
type: 'light',
|
|
background: {
|
|
default: '#efefef',
|
|
},
|
|
primary: {
|
|
light: orange.A200,
|
|
main: '#dd7700',
|
|
dark: orange[800],
|
|
},
|
|
secondary: {
|
|
main: '#333333',
|
|
},
|
|
},
|
|
typography: {
|
|
fontFamily: ['Work Sans', 'Montserrat', 'Nunito', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif'].join(','),
|
|
h1: {
|
|
fontSize: '1.3rem',
|
|
fontWeight: 500,
|
|
},
|
|
h2: {
|
|
fontSize: '1rem',
|
|
fontWeight: 500,
|
|
},
|
|
h3: {
|
|
fontSize: '0.8rem',
|
|
fontWeight: 500,
|
|
},
|
|
body2: {
|
|
fontFamily: '"IBM Plex Mono", monospace',
|
|
fontWeight: 500,
|
|
fontSize: '1rem',
|
|
},
|
|
},
|
|
})
|
|
|
|
theme.overrides = componentsOverrides(theme)
|
|
theme.props = propsOverrides
|