Adapt css styles for Mantine

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,

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 }}>

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;

styles/globals.css

@@ -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;
-}