mirror of
https://github.com/makeplane/plane.git
synced 2026-05-08 00:49:36 -05:00
[WEB-3998] feat: settings page revamp (#6959)
* chore: return workspace name and logo in profile settings api * chore: remove unwanted fields * fix: backend * feat: workspace settings * feat: workspce settings + layouting * feat: profile + workspace settings ui * chore: project settings + refactoring * routes * fix: handled no project * fix: css + build * feat: profile settings internal screens upgrade * fix: workspace settings internal screens * fix: external scrolling allowed * fix: css * fix: css * fix: css * fix: preferences settings * fix: css * fix: mobile interface * fix: profile redirections * fix: dark theme * fix: css * fix: css * feat: scroll * fix: refactor * fix: bug fixes * fix: refactor * fix: css * fix: routes * fix: first day of the week * fix: scrolling * fix: refactoring * fix: project -> projects * fix: refactoring * fix: refactor * fix: no authorized view consistency * fix: folder structure * fix: revert * fix: handled redirections * fix: scroll * fix: deleted old routes * fix: empty states * fix: headings * fix: settings description * fix: build --------- Co-authored-by: gakshita <akshitagoyal1516@gmail.com> Co-authored-by: Akshita Goyal <36129505+gakshita@users.noreply.github.com>
This commit is contained in:
Sangeetha
@@ -0,0 +1,7 @@
|
||||
import { StartOfWeekPreference } from "@/components/profile/start-of-week-preference";
|
||||
import { ThemeSwitcher } from "./theme-switcher";
|
||||
|
||||
export const PREFERENCE_COMPONENTS = {
|
||||
theme: ThemeSwitcher,
|
||||
start_of_week: StartOfWeekPreference,
|
||||
};
|
||||
@@ -0,0 +1,105 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState, useCallback } from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import { useTheme } from "next-themes";
|
||||
import { I_THEME_OPTION, THEME_OPTIONS } from "@plane/constants";
|
||||
import { useTranslation } from "@plane/i18n";
|
||||
import { IUserTheme } from "@plane/types";
|
||||
import { setPromiseToast } from "@plane/ui";
|
||||
|
||||
// components
|
||||
import { CustomThemeSelector, ThemeSwitch } from "@/components/core";
|
||||
// helpers
|
||||
import { PreferencesSection } from "@/components/preferences/section";
|
||||
import { applyTheme, unsetCustomCssVariables } from "@/helpers/theme.helper";
|
||||
// hooks
|
||||
import { useUserProfile } from "@/hooks/store";
|
||||
|
||||
export const ThemeSwitcher = observer(
|
||||
(props: {
|
||||
option: {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
};
|
||||
}) => {
|
||||
// hooks
|
||||
const { setTheme } = useTheme();
|
||||
const { data: userProfile, updateUserTheme } = useUserProfile();
|
||||
|
||||
// states
|
||||
const [currentTheme, setCurrentTheme] = useState<I_THEME_OPTION | null>(null);
|
||||
|
||||
const { t } = useTranslation();
|
||||
|
||||
// initialize theme
|
||||
useEffect(() => {
|
||||
if (!userProfile?.theme?.theme) return;
|
||||
|
||||
const userThemeOption = THEME_OPTIONS.find((t) => t.value === userProfile.theme.theme);
|
||||
|
||||
if (userThemeOption) {
|
||||
setCurrentTheme(userThemeOption);
|
||||
}
|
||||
}, [userProfile?.theme?.theme]);
|
||||
|
||||
// handlers
|
||||
const applyThemeChange = useCallback(
|
||||
(theme: Partial<IUserTheme>) => {
|
||||
const themeValue = theme?.theme || "system";
|
||||
setTheme(themeValue);
|
||||
|
||||
if (theme?.theme === "custom" && theme?.palette) {
|
||||
const defaultPalette = "#0d101b,#c5c5c5,#3f76ff,#0d101b,#c5c5c5";
|
||||
const palette = theme.palette !== ",,,," ? theme.palette : defaultPalette;
|
||||
applyTheme(palette, false);
|
||||
} else {
|
||||
unsetCustomCssVariables();
|
||||
}
|
||||
},
|
||||
[setTheme]
|
||||
);
|
||||
|
||||
const handleThemeChange = useCallback(
|
||||
async (themeOption: I_THEME_OPTION) => {
|
||||
try {
|
||||
applyThemeChange({ theme: themeOption.value });
|
||||
|
||||
const updatePromise = updateUserTheme({ theme: themeOption.value });
|
||||
setPromiseToast(updatePromise, {
|
||||
loading: "Updating theme...",
|
||||
success: {
|
||||
title: "Success!",
|
||||
message: () => "Theme updated successfully!",
|
||||
},
|
||||
error: {
|
||||
title: "Error!",
|
||||
message: () => "Failed to update the theme",
|
||||
},
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Error updating theme:", error);
|
||||
}
|
||||
},
|
||||
[applyThemeChange, updateUserTheme]
|
||||
);
|
||||
|
||||
if (!userProfile) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
<PreferencesSection
|
||||
title={t(props.option.title)}
|
||||
description={t(props.option.description)}
|
||||
control={
|
||||
<div className="">
|
||||
<ThemeSwitch value={currentTheme} onChange={handleThemeChange} />
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
{userProfile.theme?.theme === "custom" && <CustomThemeSelector applyThemeChange={applyThemeChange} />}
|
||||
</>
|
||||
);
|
||||
}
|
||||
);
|
||||
@@ -6,9 +6,11 @@ import {
|
||||
EProductSubscriptionEnum,
|
||||
SUBSCRIPTION_WITH_BILLING_FREQUENCY,
|
||||
} from "@plane/constants";
|
||||
import { useTranslation } from "@plane/i18n";
|
||||
import { TBillingFrequency, TProductBillingFrequency } from "@plane/types";
|
||||
import { cn } from "@plane/utils";
|
||||
// components
|
||||
import { SettingsHeading } from "@/components/settings";
|
||||
import { getSubscriptionTextColor } from "@/components/workspace/billing/subscription";
|
||||
// local imports
|
||||
import { PlansComparison } from "./comparison/root";
|
||||
@@ -20,6 +22,7 @@ export const BillingRoot = observer(() => {
|
||||
const [productBillingFrequency, setProductBillingFrequency] = useState<TProductBillingFrequency>(
|
||||
DEFAULT_PRODUCT_BILLING_FREQUENCY
|
||||
);
|
||||
const { t } = useTranslation();
|
||||
|
||||
/**
|
||||
* Retrieves the billing frequency for a given subscription type
|
||||
@@ -56,11 +59,10 @@ export const BillingRoot = observer(() => {
|
||||
|
||||
return (
|
||||
<section className="relative size-full flex flex-col overflow-y-auto scrollbar-hide">
|
||||
<div>
|
||||
<div className="flex items-center">
|
||||
<h3 className="text-xl font-medium flex gap-4">Billing and plans</h3>
|
||||
</div>
|
||||
</div>
|
||||
<SettingsHeading
|
||||
title={t("workspace_settings.settings.billing_and_plans.heading")}
|
||||
description={t("workspace_settings.settings.billing_and_plans.description")}
|
||||
/>
|
||||
|
||||
<div
|
||||
className={cn(
|
||||
|
||||
@@ -9,57 +9,57 @@ export const PROJECT_SETTINGS = {
|
||||
general: {
|
||||
key: "general",
|
||||
i18n_label: "common.general",
|
||||
href: `/settings`,
|
||||
href: ``,
|
||||
access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
|
||||
highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/`,
|
||||
highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/`,
|
||||
Icon: SettingIcon,
|
||||
},
|
||||
members: {
|
||||
key: "members",
|
||||
i18n_label: "members",
|
||||
href: `/settings/members`,
|
||||
href: `/members`,
|
||||
access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
|
||||
highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/members/`,
|
||||
highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/members/`,
|
||||
Icon: SettingIcon,
|
||||
},
|
||||
features: {
|
||||
key: "features",
|
||||
i18n_label: "common.features",
|
||||
href: `/settings/features`,
|
||||
href: `/features`,
|
||||
access: [EUserPermissions.ADMIN],
|
||||
highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/features/`,
|
||||
highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/features/`,
|
||||
Icon: SettingIcon,
|
||||
},
|
||||
states: {
|
||||
key: "states",
|
||||
i18n_label: "common.states",
|
||||
href: `/settings/states`,
|
||||
href: `/states`,
|
||||
access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
|
||||
highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/states/`,
|
||||
highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/states/`,
|
||||
Icon: SettingIcon,
|
||||
},
|
||||
labels: {
|
||||
key: "labels",
|
||||
i18n_label: "common.labels",
|
||||
href: `/settings/labels`,
|
||||
href: `/labels`,
|
||||
access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
|
||||
highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/labels/`,
|
||||
highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/labels/`,
|
||||
Icon: SettingIcon,
|
||||
},
|
||||
estimates: {
|
||||
key: "estimates",
|
||||
i18n_label: "common.estimates",
|
||||
href: `/settings/estimates`,
|
||||
href: `/estimates`,
|
||||
access: [EUserPermissions.ADMIN],
|
||||
highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/estimates/`,
|
||||
highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/estimates/`,
|
||||
Icon: SettingIcon,
|
||||
},
|
||||
automations: {
|
||||
key: "automations",
|
||||
i18n_label: "project_settings.automations.label",
|
||||
href: `/settings/automations`,
|
||||
href: `/automations`,
|
||||
access: [EUserPermissions.ADMIN],
|
||||
highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/automations/`,
|
||||
highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/automations/`,
|
||||
Icon: SettingIcon,
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user