chore: remove theme store from Plane deploy

apps/space/components/issues/navbar/theme.tsx

@@ -1,42 +1,25 @@
 "use client";
 
-// react
-import { useEffect } from "react";
-
 // next theme
 import { useTheme } from "next-themes";
 
 // mobx react lite
 import { observer } from "mobx-react-lite";
-// mobx
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
 
 export const NavbarTheme = observer(() => {
-  const store: RootStore = useMobxStore();
-
-  const { setTheme, theme = "light" } = useTheme();
+  const { setTheme, theme } = useTheme();
 
   const handleTheme = () => {
-    store?.theme?.setTheme(store?.theme?.theme === "light" ? "dark" : "light");
     setTheme(theme === "light" ? "dark" : "light");
-    document?.documentElement.setAttribute("data-theme", theme ?? store?.theme?.theme);
   };
 
-  useEffect(() => {
-    document?.documentElement.setAttribute("data-theme", theme ?? store?.theme?.theme);
-  }, [theme, store]);
-
   return (
-    <div
-      className="relative w-[28px] h-[28px] flex justify-center items-center cursor-pointer bg-custom-background-100 hover:bg-custom-background-200 hover:bg-custom-background-200/60 text-custom-text-100 transition-all"
+    <button
+      type="button"
       onClick={handleTheme}
+      className="relative w-7 h-7 grid place-items-center bg-custom-background-100 hover:bg-custom-background-80 text-custom-text-100 rounded"
     >
-      {theme === "light" ? (
-        <span className={`material-symbols-rounded text-[18px]`}>dark_mode</span>
-      ) : (
-        <span className={`material-symbols-rounded text-[18px]`}>light_mode</span>
-      )}
-    </div>
+      <span className="material-symbols-rounded text-sm">{theme === "light" ? "dark_mode" : "light_mode"}</span>
+    </button>
   );
 });

apps/space/lib/mobx/store-init.tsx

@@ -13,13 +13,6 @@ const MobxStoreInit = () => {
   const router = useRouter();
   const { states, labels, priorities } = router.query as { states: string[]; labels: string[]; priorities: string[] };
 
-  useEffect(() => {
-    // theme
-    const _theme = localStorage && localStorage.getItem("app_theme") ? localStorage.getItem("app_theme") : "light";
-    if (_theme && store?.theme?.theme != _theme) store.theme.setTheme(_theme);
-    else localStorage.setItem("app_theme", _theme && _theme != "light" ? "dark" : "light");
-  }, [store?.theme]);
-
   // useEffect(() => {
   //   store.issue.userSelectedLabels = labels || [];
   //   store.issue.userSelectedPriorities = priorities || [];

apps/space/pages/_app.tsx

@@ -32,7 +32,7 @@ function MyApp({ Component, pageProps }: AppProps) {
         <link rel="shortcut icon" href="/favicon/favicon.ico" />
       </Head>
       <ToastContextProvider>
-        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+        <ThemeProvider themes={["light", "dark"]} defaultTheme="system" enableSystem>
           <Component {...pageProps} />
         </ThemeProvider>
       </ToastContextProvider>

apps/space/store/root.ts

@@ -2,25 +2,20 @@
 import { enableStaticRendering } from "mobx-react-lite";
 // store imports
 import UserStore from "./user";
-import ThemeStore from "./theme";
 import IssueStore, { IIssueStore } from "./issue";
 import ProjectStore, { IProjectStore } from "./project";
 import IssueDetailStore, { IIssueDetailStore } from "./issue_details";
-// types
-import { IThemeStore } from "types/theme";
 
 enableStaticRendering(typeof window === "undefined");
 
 export class RootStore {
   user: UserStore;
-  theme: IThemeStore;
   issue: IIssueStore;
   issueDetails: IIssueDetailStore;
   project: IProjectStore;
 
   constructor() {
     this.user = new UserStore(this);
-    this.theme = new ThemeStore(this);
     this.issue = new IssueStore(this);
     this.project = new ProjectStore(this);
     this.issueDetails = new IssueDetailStore(this);