From 5f7e959a9ce9a264e713fab0874823194f538e7b Mon Sep 17 00:00:00 2001
From: Elias Schneider <login@eliasschneider.com>
Date: Mon, 16 May 2022 13:11:51 +0200
Subject: [PATCH] Adapt css styles for Mantine

---
 src/components/mantine/ThemeProvider.tsx         |  2 +-
 src/pages/_app.tsx                               |  5 +++--
 src/styles/global.style.tsx                      | 15 +++++++++++++++
 src/styles/{global.style.ts => mantine.style.ts} |  0
 styles/globals.css                               | 16 ----------------
 5 files changed, 19 insertions(+), 19 deletions(-)
 create mode 100644 src/styles/global.style.tsx
 rename src/styles/{global.style.ts => mantine.style.ts} (100%)
 delete mode 100644 styles/globals.css

diff --git a/src/components/mantine/ThemeProvider.tsx b/src/components/mantine/ThemeProvider.tsx
index aed3778..38c4884 100644
--- a/src/components/mantine/ThemeProvider.tsx
+++ b/src/components/mantine/ThemeProvider.tsx
@@ -6,7 +6,7 @@ import {
 import { ModalsProvider } from "@mantine/modals";
 import { setCookies } from "cookies-next";
 import { Dispatch, ReactNode, SetStateAction } from "react";
-import mantineTheme from "../../styles/global.style";
+import mantineTheme from "../../styles/mantine.style";
 
 const ThemeProvider = ({
   children,
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index cfe50be..2b11e77 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -11,11 +11,11 @@ import { getCookie } from "cookies-next";
 import { GetServerSidePropsContext } from "next";
 import type { AppProps } from "next/app";
 import { useEffect, useState } from "react";
-import "../../styles/globals.css";
 import Footer from "../components/Footer";
 import ThemeProvider from "../components/mantine/ThemeProvider";
 import Header from "../components/navBar/NavBar";
-import globalStyle from "../styles/global.style";
+import GlobalStyle from "../styles/global.style";
+import globalStyle from "../styles/mantine.style";
 import aw from "../utils/appwrite.util";
 import authUtil, { IsSignedInContext } from "../utils/auth.util";
 import configUtil, { ConfigContext } from "../utils/config.util";
@@ -49,6 +49,7 @@ function App(
   return (
     <MantineProvider withGlobalStyles withNormalizeCSS theme={globalStyle}>
       <ThemeProvider colorScheme={colorScheme} setColorScheme={setColorScheme}>
+        <GlobalStyle />
         <NotificationsProvider>
           <ModalsProvider>
             <GlobalLoadingContext.Provider value={{ isLoading, setIsLoading }}>
diff --git a/src/styles/global.style.tsx b/src/styles/global.style.tsx
new file mode 100644
index 0000000..e989287
--- /dev/null
+++ b/src/styles/global.style.tsx
@@ -0,0 +1,15 @@
+import { Global } from "@mantine/core";
+
+const GlobalStyle = () => {
+  return (
+    <Global
+      styles={(theme) => ({
+        a: {
+          color: "inherit",
+          textDecoration: "none",
+        },
+      })}
+    />
+  );
+};
+export default GlobalStyle;
diff --git a/src/styles/global.style.ts b/src/styles/mantine.style.ts
similarity index 100%
rename from src/styles/global.style.ts
rename to src/styles/mantine.style.ts
diff --git a/styles/globals.css b/styles/globals.css
deleted file mode 100644
index e5e2dcc..0000000
--- a/styles/globals.css
+++ /dev/null
@@ -1,16 +0,0 @@
-html,
-body {
-  padding: 0;
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-* {
-  box-sizing: border-box;
-}