diff --git a/new-lamassu-admin/src/App.jsx b/new-lamassu-admin/src/App.jsx index 1fd11d2b..4b8c92b3 100644 --- a/new-lamassu-admin/src/App.jsx +++ b/new-lamassu-admin/src/App.jsx @@ -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 = () => { - ); + ) } export default App diff --git a/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.styles.js b/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.styles.js index 91d1b720..28d588b5 100644 --- a/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.styles.js +++ b/new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.styles.js @@ -93,7 +93,8 @@ const styles = { flexGrow: 1 }, unreadIcon: { - marginTop: 2, + marginTop: 5, + marginLeft: spacer, width: '12px', height: '12px', backgroundColor: secondaryColor, diff --git a/new-lamassu-admin/src/styling/global/fonts.js b/new-lamassu-admin/src/styling/global/fonts.js index 6bab4c53..20ae0b18 100644 --- a/new-lamassu-admin/src/styling/global/fonts.js +++ b/new-lamassu-admin/src/styling/global/fonts.js @@ -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' - }, + @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 - { - fontFamily: 'BPmono', - src: 'url("/fonts/BPmono/BPmono.ttf") format("truetype")', - fontWeight: 500, - fontStyle: 'normal' - } - ] -} + /* 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"), + } +` diff --git a/new-lamassu-admin/src/styling/global/index.js b/new-lamassu-admin/src/styling/global/index.js index ceebff20..ab5ebed7 100644 --- a/new-lamassu-admin/src/styling/global/index.js +++ b/new-lamassu-admin/src/styling/global/index.js @@ -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' - } - }, - 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, - 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 - }, - // forcing styling onto inner container - '.ReactVirtualized__Grid__innerScrollContainer': { - overflow: 'inherit !important' - }, - '.ReactVirtualized__Grid.ReactVirtualized__List': { - overflowY: 'overlay !important' +export default ` + ${fonts} + body { + font-size: 0.875rem; + width: ${mainWidth}px; + display: flex; + min-height: ${fill}; + @media screen and (min-width: 1200px) { + width: auto; } } -} + + 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::-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; + } + + // forcing styling onto inner container + .ReactVirtualized__Grid__innerScrollContainer { + overflow: inherit !important; + }, + .ReactVirtualized__Grid.ReactVirtualized__List { + overflow-y: overlay !important; + } +` diff --git a/new-lamassu-admin/src/styling/theme.js b/new-lamassu-admin/src/styling/theme.js index 1230c550..10d4de28 100644 --- a/new-lamassu-admin/src/styling/theme.js +++ b/new-lamassu-admin/src/styling/theme.js @@ -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,10 +263,10 @@ theme = createTheme(theme, { borderTopLeftRadius: 8, borderBottomRightRadius: 8, borderBottomLeftRadius: 8 - }, + } } } } }) -export default theme \ No newline at end of file +export default theme