forked from github/plane
4c2cb2368a
* chore: store various shades of accent color * refactor: custom theme selector * refactor: custom theme selector * chore: update custom theme input labels * fix: color generator function logic * fix: accent color preloaded data * chore: new theming structure * chore: update shades calculation logic * refactor: variable names * chore: update color scheming * chore: new color scheming * refactor: themes folder structure * chore: update classnames to the new ones * chore: update static colors * chore: sidebar link colors * chore: placeholder color * chore: update border classnames
79 lines
2.7 KiB
TypeScript
79 lines
2.7 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { useTheme } from "next-themes";
|
|
|
|
// 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";
|
|
|
|
const ProfilePreferences = () => {
|
|
const { user: myProfile } = useUserAuth();
|
|
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, customThemeSelectorOptions]);
|
|
|
|
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
|
|
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;
|