cleaning up the carbon mess and adding mui again

2022-05-01 08:51:06 -05:00
parent fac5a0293a
commit a830ab006a
13 changed files with 343 additions and 196 deletions
@@ -107,9 +107,11 @@
    "webpack": "^5.72.0"
  },
  "dependencies": {
-    "@carbon/icons": "^11.2.0",
-    "@carbon/react": "^1.2.0",
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
    "@getstation/electron-google-oauth2": "^2.1.0",
+    "@mui/icons-material": "^5.6.2",
+    "@mui/material": "^5.6.3",
    "@nirvana/core": "*",
    "antd": "^4.19.2",
    "axios": "^0.26.1",
@@ -1,5 +1,4 @@
 import "./styles/index.css";
-import "./styles/carbon.scss";

 import * as React from "react";
 import * as ReactDOM from "react-dom";
@@ -2,7 +2,7 @@ import { Header, HeaderName } from "carbon-components-react";
 import { useEffect, useMemo, useRef, useState } from "react";

 import { Avatar } from "antd";
-import { Button } from "@carbon/react";
+import Button from "@mui/material/Button";
 import Logo from "../Logo";
 import { useGetUserDetails } from "../../controller/index";

@@ -30,9 +30,7 @@ export default function NirvanaHeader() {
      <Logo type="small" className="scale-[0.2]" />

      <div className="ml-auto">
-        <Button size="sm" kind="ghost">
-          flow state
-        </Button>
+        <Button>flow state</Button>
      </div>

      <video
@@ -2,7 +2,15 @@
 <html>
  <head>
    <meta charset="UTF-8" />
+
    <title>Nirvana</title>
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100&display=swap"
+      rel="stylesheet"
+    />
  </head>
  <body>
    <div id="root"></div>
@@ -1,17 +1,28 @@
 import { QueryClient, QueryClientProvider } from "react-query";

-import { GlobalTheme } from "@carbon/react/lib/components/Theme";
 import Login from "./Login";
 import NirvanaRouter from "./router";
 import ProtectedRoute from "../components/ProtectedRoute";
 import { ReactQueryDevtools } from "react-query/devtools";
 import { RecoilRoot } from "recoil";
 import { Toaster } from "react-hot-toast";
+import { createTheme } from "@mui/material";
 import io from "socket.io-client";
 import testConnection from "@nirvana/core";

 testConnection();

+const theme = createTheme({
+  palette: {
+    primary: {
+      main: "#438E86",
+    },
+    secondary: {
+      main: "#393939",
+    },
+  },
+});
+
 // Create a client
 export const queryClient = new QueryClient();

@@ -21,14 +32,12 @@ function NirvanaApp() {
  return (
    <>
      <QueryClientProvider client={queryClient}>
-        <GlobalTheme theme="white">
-          <RecoilRoot>
-            <ProtectedRoute>
-              <NirvanaRouter />
-            </ProtectedRoute>
-            <ReactQueryDevtools initialIsOpen={true} position={"bottom-left"} />
-          </RecoilRoot>
-        </GlobalTheme>
+        <RecoilRoot>
+          <ProtectedRoute>
+            <NirvanaRouter />
+          </ProtectedRoute>
+          <ReactQueryDevtools initialIsOpen={true} position={"bottom-left"} />
+        </RecoilRoot>
        <Toaster />
      </QueryClientProvider>
    </>
@@ -1,6 +1,3 @@
-import { Button, Search } from "@carbon/react";
-
-import { Add } from "@carbon/react/icons";
 import NirvanaHeader from "../../components/header";

 export default function NirvanaTerminal() {
@@ -8,24 +5,7 @@ export default function NirvanaTerminal() {
    <div className="flex flex-col flex-1">
      <NirvanaHeader />

-      <div className="flex flex-row m-2 gap-2">
-        <Search
-          closeButtonLabelText="Clear search input"
-          id="search-1"
-          placeholder={"search for anything someone said or shared"}
-          onChange={function noRefCheck() {}}
-          onKeyDown={function noRefCheck() {}}
-          size="sm"
-        />
-
-        <Button
-          size="sm"
-          kind="secondary"
-          hasIconOnly
-          renderIcon={Add}
-          iconDescription="New line"
-        />
-      </div>
+      <div className="flex flex-row m-2 gap-2"></div>
    </div>
  );
 }
@@ -1 +0,0 @@
-@use "@carbon/react";
@@ -1,5 +1,6 @@
 #root {
  padding: 0 !important;
+  font-family: "IBM Plex Sans", sans-serif;
 }

@tailwind base;
@@ -25,6 +25,6 @@ module.exports = {
  },
  plugins: plugins,
  resolve: {
-    extensions: [".js", ".ts", ".jsx", ".tsx", ".css", ".scss", ".sass"],
+    extensions: [".js", ".ts", ".jsx", ".tsx", ".css"],
  },
 };
@@ -29,15 +29,4 @@ module.exports = [
      },
    },
  },
-  {
-    test: /\.s[ac]ss$/i,
-    use: [
-      // Creates `style` nodes from JS strings
-      "style-loader",
-      // Translates CSS into CommonJS
-      "css-loader",
-      // Compiles Sass to CSS
-      "sass-loader",
-    ],
-  },
 ];
@@ -1,5 +1,4 @@
 import "../styles/globals.css";
-import "../styles/carbon.scss";
 import "react-toastify/dist/ReactToastify.css";

 import type { AppProps } from "next/app";