fix(webapp): overwrite styles (#840)

* fix(webapp): overwrite styles
eoscostarica · Oct 16, 2021 · 8dfb08b · 8dfb08b
1 parent f144b22
commit 8dfb08b
Show file tree

Hide file tree

Showing 4 changed files with 178 additions and 140 deletions.
diff --git a/webapp/package.json b/webapp/package.json
@@ -25,7 +25,7 @@
     "@date-io/date-fns": "^2.11.0",
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
-    "@eoscostarica/eoscr-components": "^3.5.4",
+    "@eoscostarica/eoscr-components": "^3.5.6",
     "@eoscostarica/ual-reactjs-renderer": "^0.3.1",
     "@mui/icons-material": "^5.0.1",
     "@mui/lab": "^5.0.0-alpha.48",

diff --git a/webapp/src/app.js b/webapp/src/app.js
@@ -2,6 +2,7 @@ import React, { Suspense, useMemo } from 'react'
 import { BrowserRouter, Route, Switch } from 'react-router-dom'
 import AdapterDateFns from '@mui/lab/AdapterDateFns'
 import LocalizationProvider from '@mui/lab/LocalizationProvider'
+import { StylesProvider, createGenerateClassName } from '@mui/styles'
 import { ThemeProvider } from '@mui/material/styles'
 import CssBaseline from '@mui/material/CssBaseline'
 
@@ -12,6 +13,10 @@ import { useSharedState } from './context/state.context'
 import getTheme from './theme'
 import './i18n'
 
+const generateClassName = createGenerateClassName({
+  productionPrefix: 'eosRate'
+})
+
 const App = () => {
   const [state] = useSharedState()
 
@@ -31,16 +36,18 @@ const App = () => {
 
   return (
     <BrowserRouter>
-      <ThemeProvider theme={theme}>
-        <CssBaseline />
-        <LocalizationProvider dateAdapter={AdapterDateFns}>
-          <DashboardLayout routes={userRoutes.sidebar}>
-            <Suspense fallback={<Loader />}>
-              <Switch>{userRoutes.browser.map(renderRoute)}</Switch>
-            </Suspense>
-          </DashboardLayout>
-        </LocalizationProvider>
-      </ThemeProvider>
+      <StylesProvider generateClassName={generateClassName}>
+        <ThemeProvider theme={theme}>
+          <CssBaseline />
+          <LocalizationProvider dateAdapter={AdapterDateFns}>
+            <DashboardLayout routes={userRoutes.sidebar}>
+              <Suspense fallback={<Loader />}>
+                <Switch>{userRoutes.browser.map(renderRoute)}</Switch>
+              </Suspense>
+            </DashboardLayout>
+          </LocalizationProvider>
+        </ThemeProvider>
+      </StylesProvider>
     </BrowserRouter>
   )
 }

diff --git a/webapp/src/components/Sidebar/styles.js b/webapp/src/components/Sidebar/styles.js
@@ -29,6 +29,7 @@ export default theme => ({
   listItem: {
     display: 'flex',
     flexDirection: 'column',
+    marginTop: '0 !important',
     '& p': {
       fonWeight: theme.typography.fontWeightBold,
       paddingLeft: theme.spacing(2),