feat: custom theming (#1028)

* chore: custom theme types and constants

* feat: custom theming

* feat: preferences tab added in profile settings

* feat: remove unneccessary file

* feat:theme apply on page load

* fix: theme switch dropdown fix

* feat: color picker input, theme icon added, chore: code refactor

* style: color picker icon added

* fix: mutation fix

* fix: palette sequence fix

* chore: default custom theme palette updated

* style: join project and not authorized page theming

* fix: merge conflict

* fix: build fix and preferences tab layout fix

apps/app/pages/[workspaceSlug]/me/profile/index.tsx

@@ -13,7 +13,7 @@ import useToast from "hooks/use-toast";
 // layouts
 import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
 // components
-import { ImageUploadModal, ThemeSwitch } from "components/core";
+import { ImageUploadModal } from "components/core";
 // ui
 import { CustomSelect, DangerButton, Input, SecondaryButton, Spinner } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
@@ -280,17 +280,6 @@ const Profile: NextPage = () => {
                 />
               </div>
             </div>
-            <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-brand-base">Theme</h4>
-                <p className="text-sm text-brand-secondary">
-                  Select or customize your interface color scheme.
-                </p>
-              </div>
-              <div className="col-span-12 sm:col-span-6">
-                <ThemeSwitch />
-              </div>
-            </div>
             <div className="sm:text-right">
               <SecondaryButton onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
                 {isSubmitting ? "Updating..." : "Update profile"}

apps/app/pages/[workspaceSlug]/me/profile/preferences.tsx

@@ -0,0 +1,81 @@
+import { useEffect, useState } from "react";
+import { useTheme } from "next-themes";
+
+// hooks
+import useUser from "hooks/use-user";
+// 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";
+
+const ProfilePreferences = () => {
+  const { user: myProfile } = useUser();
+  const { theme } = useTheme();
+  const [customThemeSelectorOptions, setCustomThemeSelectorOptions] = useState(false);
+  const [preLoadedData, setPreLoadedData] = useState<ICustomTheme | null>(null);
+
+  useEffect(() => {
+    if (theme === "custom") {
+      if (myProfile?.theme.palette) setPreLoadedData(myProfile.theme);
+      if (!customThemeSelectorOptions) setCustomThemeSelectorOptions(true);
+    }
+  }, [myProfile, theme]);
+
+  return (
+    <WorkspaceAuthorizationLayout
+      meta={{
+        title: "Plane - My Profile",
+      }}
+      breadcrumbs={
+        <Breadcrumbs>
+          <BreadcrumbItem title="My Profile Preferences" />
+        </Breadcrumbs>
+      }
+    >
+      {myProfile ? (
+        <div className="px-24 py-8">
+          <div className="mb-12 space-y-6">
+            <div>
+              <h3 className="text-3xl font-semibold">Profile Settings</h3>
+              <p className="mt-1 text-brand-secondary">
+                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-brand-base">Theme</h4>
+                <p className="text-sm text-brand-secondary">
+                  Select or customize your interface color scheme.
+                </p>
+              </div>
+              <div className="col-span-12 sm:col-span-6">
+                <ThemeSwitch
+                  user={myProfile}
+                  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;