Fix styles

alexbrazier · Jul 15, 2023 · b416e13 · b416e13
1 parent c929713
commit b416e13
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 17 deletions.
diff --git a/frontend/next.config.js b/frontend/next.config.js
@@ -6,6 +6,7 @@
 const config = {
   output: 'standalone',
   poweredByHeader: false,
+  compress: false,
 };
 
 module.exports = config;
diff --git a/frontend/src/pages/_app.tsx b/frontend/src/pages/_app.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import Head from 'next/head';
+import { StyledEngineProvider } from '@mui/material/styles';
 import { ThemeProvider, CssBaseline, createTheme } from '@mui/material';
 import Header from '../components/Header';
 import Footer from '../components/Footer';
@@ -29,6 +30,13 @@ const darkTheme = createTheme({
       fontSize: '1.75rem',
     },
   },
+  components: {
+    MuiLink: {
+      defaultProps: {
+        underline: 'hover',
+      },
+    },
+  },
 });
 
 // @ts-ignore
@@ -38,23 +46,25 @@ const App = ({ Component, pageProps }) => {
       <Head>
         <title>PayMate - Send money instantly through a link</title>
       </Head>
-      <ThemeProvider theme={darkTheme}>
-        <CssBaseline />
-        <Header />
-        <main
-          style={{
-            flex: 1,
-            display: 'flex',
-            flexDirection: 'column',
-            margin: 15,
-            width: '100%',
-            alignItems: 'center',
-          }}
-        >
-          <Component {...pageProps} />
-        </main>
-        <Footer />
-      </ThemeProvider>
+      <StyledEngineProvider injectFirst>
+        <ThemeProvider theme={darkTheme}>
+          <CssBaseline />
+          <Header />
+          <main
+            style={{
+              flex: 1,
+              display: 'flex',
+              flexDirection: 'column',
+              margin: 15,
+              width: '100%',
+              alignItems: 'center',
+            }}
+          >
+            <Component {...pageProps} />
+          </main>
+          <Footer />
+        </ThemeProvider>
+      </StyledEngineProvider>
     </div>
   );
 };