New Directory Setup (#2065)

* chore: moved app & space from apps to root * chore: modified workspace configuration * chore: modified dockerfiles for space and web * chore: modified icons for space * feat: updated files for new svg icons supported by next-images * chore: added /spaces base path for next * chore: added compose config for space * chore: updated husky configuration * chore: updated workflows for new configuration * chore: changed app name to web * fix: resolved build errors with web * chore: reset file tracing root for both projects * chore: added nginx config for deploy * fix: eslint and tsconfig settings for space app * husky setup fixes based on new dir * eslint fixes * prettier formatting --------- Co-authored-by: Henit Chobisa <chobisa.henit@gmail.com>
2023-09-03 18:50:30 +05:30 · 2023-09-03 18:50:30 +05:30 · 1e152c666c
commit 1e152c666c
parent 20e36194b4
1022 changed files with 1475 additions and 1240 deletions
--- a/web/pages/[workspaceSlug]/me/profile/preferences.tsx
+++ b/web/pages/[workspaceSlug]/me/profile/preferences.tsx
@ -0,0 +1,103 @@
+import { useEffect, useState } from "react";
+// hooks
+import useUserAuth from "hooks/use-user-auth";
+// layouts
+import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
+import SettingsNavbar from "layouts/settings-navbar";
+// components
+import { CustomThemeSelector, ThemeSwitch } from "components/core";
+// ui
+import { Spinner } from "components/ui";
+import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+// types
+import { ICustomTheme } from "types";
+// mobx react lite
+import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// next themes
+import { useTheme } from "next-themes";
+
+const ProfilePreferences = observer(() => {
+  const { user: myProfile } = useUserAuth();
+
+  const store: any = useMobxStore();
+  const { theme } = useTheme();
+
+  console.log("store", store?.theme?.theme);
+  console.log("theme", theme);
+
+  const [customThemeSelectorOptions, setCustomThemeSelectorOptions] = useState(false);
+
+  const [preLoadedData, setPreLoadedData] = useState<ICustomTheme | null>(null);
+
+  useEffect(() => {
+    if (store?.user && store?.theme?.theme === "custom") {
+      const currentTheme = store?.user?.currentUserSettings?.theme;
+      if (currentTheme.palette)
+        setPreLoadedData({
+          background: currentTheme.background !== "" ? currentTheme.background : "#0d101b",
+          text: currentTheme.text !== "" ? currentTheme.text : "#c5c5c5",
+          primary: currentTheme.primary !== "" ? currentTheme.primary : "#3f76ff",
+          sidebarBackground:
+            currentTheme.sidebarBackground !== "" ? currentTheme.sidebarBackground : "#0d101b",
+          sidebarText: currentTheme.sidebarText !== "" ? currentTheme.sidebarText : "#c5c5c5",
+          darkPalette: false,
+          palette:
+            currentTheme.palette !== ",,,,"
+              ? currentTheme.palette
+              : "#0d101b,#c5c5c5,#3f76ff,#0d101b,#c5c5c5",
+          theme: "custom",
+        });
+      setCustomThemeSelectorOptions((prevData) => true);
+    }
+  }, [store, store?.theme?.theme]);
+
+  return (
+    <WorkspaceAuthorizationLayout
+      breadcrumbs={
+        <Breadcrumbs>
+          <BreadcrumbItem title="My Profile Preferences" />
+        </Breadcrumbs>
+      }
+    >
+      {myProfile ? (
+        <div className="p-8">
+          <div className="mb-8 space-y-6">
+            <div>
+              <h3 className="text-3xl font-semibold">Profile Settings</h3>
+              <p className="mt-1 text-custom-text-200">
+                This information will be visible to only you.
+              </p>
+            </div>
+            <SettingsNavbar profilePage />
+          </div>
+          <div className="space-y-8 sm:space-y-12">
+            <div className="grid grid-cols-12 gap-4 sm:gap-16">
+              <div className="col-span-12 sm:col-span-6">
+                <h4 className="text-lg font-semibold text-custom-text-100">Theme</h4>
+                <p className="text-sm text-custom-text-200">
+                  Select or customize your interface color scheme.
+                </p>
+              </div>
+              <div className="col-span-12 sm:col-span-6">
+                <ThemeSwitch
+                  setPreLoadedData={setPreLoadedData}
+                  customThemeSelectorOptions={customThemeSelectorOptions}
+                  setCustomThemeSelectorOptions={setCustomThemeSelectorOptions}
+                />
+              </div>
+            </div>
+            {customThemeSelectorOptions && <CustomThemeSelector preLoadedData={preLoadedData} />}
+          </div>
+        </div>
+      ) : (
+        <div className="grid h-full w-full place-items-center px-4 sm:px-0">
+          <Spinner />
+        </div>
+      )}
+    </WorkspaceAuthorizationLayout>
+  );
+});
+
+export default ProfilePreferences;