fix(console): styling conflicts with antd and tailwind (#186)

Author: arielweinberger

apps/console/postcss.config.js

@@ -2,6 +2,7 @@ const { join } = require("path");
 
 module.exports = {
   plugins: {
+    "postcss-nested": {},
     tailwindcss: {
       config: join(__dirname, "tailwind.config.js"),
     },

apps/console/src/app/antd-overrides.css

@@ -1,3 +1,5 @@
+@import "~antd/dist/reset.css";
+
 h1.ant-typography,
 h2.ant-typography,
 h3.ant-typography,
@@ -13,10 +15,6 @@ h5.ant-typography {
   font-weight: 400;
 }
 
-.ant-btn-primary {
-  background: #13A071 !important;
-}
-
 .ant-tabs-tab {
   font-family: "Brockmann", serif;
   font-weight: 300;

apps/console/src/app/app.tsx

@@ -2,6 +2,7 @@ import { Route, Routes, Navigate, Outlet } from "react-router-dom";
 import { hotjar } from "react-hotjar";
 import "./styles.css";
 import "./antd-overrides.css";
+import "./tailwind-overrides.css";
 
 import { ThemeProvider } from "./lib/providers/ThemeProvider";
 import { QueryClientProvider } from "@tanstack/react-query";

apps/console/src/app/pages/auth/AuthCallbackPage.tsx

@@ -21,8 +21,12 @@ export const AuthCallbackPage = () => {
   }, []);
 
   return (
-    <div className="flex h-full w-full items-center justify-center">
-      <Loader />
+    <div className="tailwind">
+      <div className="dark h-[100vh] w-[100vw] font-sans">
+        <div className="flex h-full w-full items-center justify-center bg-neutral-900 text-slate-300">
+          <Loader />
+        </div>
+      </div>
     </div>
   );
 };