partial: migrate global styles

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 { StylesProvider, jssPreset, makeStyles } from '@mui/styles'
-import { ThemeProvider, StyledEngineProvider } from '@mui/material/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

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,

new-lamassu-admin/src/styling/global/fonts.js

@@ -1,95 +1,82 @@
-export default {
+export default `
-  // /*!
+  /*!
-  //  * Web Fonts from Fontspring.com
+  * Web Fonts from Fontspring.com
-  //  *
+  *
-  //  * All OpenType features and all extended glyphs have been removed.
+  * All OpenType features and all extended glyphs have been removed.
-  //  * Fully installable fonts can be purchased at http://www.fontspring.com
+  * 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
+  * 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
+  * from Fontspring. The fonts are protected under domestic and international trademark and
-  //  * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
+  * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
-  //  * distributing this font software.
+  * distributing this font software.
-  //  *
+  *
-  //  * (c) 2010-2018 Fontspring
+  * (c) 2010-2018 Fontspring
-  //  *
+  *
-  //  *
+  *
-  //  *
+  *
-  //  *
+  *
-  //  * The fonts included are copyrighted by the vendor listed below.
+  * The fonts included are copyrighted by the vendor listed below.
-  //  *
+  *
-  //  * Vendor:      Fontfabric
+  * Vendor:      Fontfabric
-  //  * License URL: https://www.fontspring.com/licenses/fontfabric/webfont
+  * License URL: https://www.fontspring.com/licenses/fontfabric/webfont
-  //  *
+  *
-  //  *
+  *
-  //  */
+  */
 
-  '@font-face': [
+  @font-face {
-    {
+    font-family: 'Mont';
-      fontFamily: 'Mont',
+    font-weight: 900;
-      src: [
+    font-style: normal;
-        'url("/fonts/MontHeavy/mont-heavy-webfont.woff2") format("woff2")',
+    src: url('/fonts/MontHeavy/mont-heavy-webfont.woff2') format('woff2'), url('/fonts/MontHeavy/mont-heavy-webfont.woff') format('woff');
-        'url("/fonts/MontHeavy/mont-heavy-webfont.woff") format("woff")'
+  }
-      ],
+  @font-face {
-      fontWeight: 900,
+    font-family: 'Mont';
-      fontStyle: 'normal'
+    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');
-      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
+  /*!
-    {
+  * Web Fonts from Fontspring.com
-      fontFamily: 'BPmono',
+  *
-      src: 'url("/fonts/BPmono/BPmono.ttf") format("truetype")',
+  * All OpenType features and all extended glyphs have been removed.
-      fontWeight: 500,
+  * Fully installable fonts can be purchased at http://www.fontspring.com
-      fontStyle: 'normal'
+  *
-    }
+  * 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"),
+  }
+`

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 {
+export default `
-  '@global': {
+  ${fonts}
-    ...fonts,
+  body {
-    '#root': {
+    font-size: 0.875rem;
-      width: fill,
+    width: ${mainWidth}px;
-      minHeight: fill
+    display: flex;
-    },
+    min-height: ${fill};
-    '.root-notifcenter-open': {
+    @media screen and (min-width: 1200px) {
-      // for when notification center is open
+      width: auto;
-      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'
     }
   }
-}
+  
+  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;
+  }
+`

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,7 +263,7 @@ theme = createTheme(theme, {
           borderTopLeftRadius: 8,
           borderBottomRightRadius: 8,
           borderBottomLeftRadius: 8
-        },
+        }
       }
     }
   }