diff --git a/packages/client/src/pages/PortalSettings/categories/common/Appearance/preview.js b/packages/client/src/pages/PortalSettings/categories/common/Appearance/preview.js
index c1bed245d0..baf584ca7a 100644
--- a/packages/client/src/pages/PortalSettings/categories/common/Appearance/preview.js
+++ b/packages/client/src/pages/PortalSettings/categories/common/Appearance/preview.js
@@ -12,7 +12,7 @@ import ButtonPlusIcon from "../../../../../../../../public/images/actions.button
const Preview = (props) => {
const {
- previewAccentColor,
+ previewAccent,
themePreview,
selectThemeId,
withBorder,
@@ -20,7 +20,7 @@ const Preview = (props) => {
floatingButtonClass,
} = props;
- const [colorPreview, setColorPreview] = useState(previewAccentColor);
+ const [colorPreview, setColorPreview] = useState(previewAccent);
const [isViewTablet, setIsViewTablet] = useState(false);
const onCheckView = () => {
@@ -30,8 +30,8 @@ const Preview = (props) => {
};
useEffect(() => {
- setColorPreview(previewAccentColor);
- }, [previewAccentColor]);
+ setColorPreview(previewAccent);
+ }, [previewAccent]);
useEffect(() => {
onCheckView();
diff --git a/packages/client/src/pages/PortalSettings/categories/common/appearance.js b/packages/client/src/pages/PortalSettings/categories/common/appearance.js
index c0da72964d..47d618ba0d 100644
--- a/packages/client/src/pages/PortalSettings/categories/common/appearance.js
+++ b/packages/client/src/pages/PortalSettings/categories/common/appearance.js
@@ -32,7 +32,7 @@ const Appearance = (props) => {
sendAppearanceTheme,
getAppearanceTheme,
currentColorScheme,
-
+ theme,
deleteAppearanceTheme,
tReady,
t,
@@ -73,8 +73,8 @@ const Appearance = (props) => {
const [isEditDialog, setIsEditDialog] = useState(false);
const [isAddThemeDialog, setIsAddThemeDialog] = useState(false);
- const [previewAccentColor, setPreviewAccentColor] = useState(
- currentColorScheme.accentColor
+ const [previewAccent, setPreviewAccent] = useState(
+ currentColorScheme.main.accent
);
const [selectThemeId, setSelectThemeId] = useState(selectedThemeId);
@@ -100,7 +100,7 @@ const Appearance = (props) => {
content: (
@@ -112,24 +112,24 @@ const Appearance = (props) => {
content: (
),
},
],
- [previewAccentColor, previewTheme, selectThemeId, tReady]
+ [previewAccent, previewTheme, selectThemeId, tReady]
);
useEffect(() => {
- if (appearanceTheme.length === 10) {
+ if (appearanceTheme.length === 11) {
setAbilityAddTheme(false);
} else {
setAbilityAddTheme(true);
}
- if (appearanceTheme.length === 7) {
+ if (appearanceTheme.length === 8) {
setIsShowDeleteButton(false);
} else {
setIsShowDeleteButton(true);
@@ -144,7 +144,7 @@ const Appearance = (props) => {
}, []);
useEffect(() => {
- if (selectThemeId < 8) {
+ if (appearanceTheme.find((theme) => theme.id == selectThemeId).name) {
setIsDisabledEditButton(true);
setIsDisabledDeleteButton(true);
return;
@@ -190,7 +190,7 @@ const Appearance = (props) => {
changeCurrentColorButtons,
isAddThemeDialog,
isEditDialog,
- previewAccentColor,
+ previewAccent,
]);
const onCheckView = () => {
@@ -202,7 +202,7 @@ const Appearance = (props) => {
};
const onColorSelection = (item) => {
- setPreviewAccentColor(item.accentColor);
+ setPreviewAccent(item.main.accent);
setSelectThemeId(item.id);
};
@@ -248,6 +248,18 @@ const Appearance = (props) => {
}
};
+ const onCheckStandardThemeRender = (item) => {
+ if (
+ !item.name ||
+ (theme.isBase && item.name === "grey") ||
+ (!theme.isBase && item.name === "black")
+ ) {
+ return false;
+ }
+
+ return true;
+ };
+
const onClickDeleteModal = useCallback(async () => {
try {
await deleteAppearanceTheme(selectThemeId);
@@ -255,12 +267,12 @@ const Appearance = (props) => {
if (selectedThemeId !== selectThemeId) {
setSelectThemeId(selectedThemeId);
- setPreviewAccentColor(currentColorScheme.accentColor);
+ setPreviewAccent(currentColorScheme.main.accent);
}
if (selectedThemeId === selectThemeId) {
setSelectThemeId(appearanceTheme[0].id);
- setPreviewAccentColor(appearanceTheme[0].accentColor);
+ setPreviewAccent(appearanceTheme[0].main.accent);
}
setVisibleDialog(false);
@@ -309,11 +321,11 @@ const Appearance = (props) => {
const onClickEdit = () => {
appearanceTheme.map((item) => {
if (item.id === selectThemeId) {
- setCurrentColorAccent(item.accentColor.toUpperCase());
- setCurrentColorButtons(item.buttonsMain.toUpperCase());
+ setCurrentColorAccent(item.main.accent.toUpperCase());
+ setCurrentColorButtons(item.main.buttons.toUpperCase());
- setAppliedColorAccent(item.accentColor.toUpperCase());
- setAppliedColorButtons(item.buttonsMain.toUpperCase());
+ setAppliedColorAccent(item.main.accent.toUpperCase());
+ setAppliedColorButtons(item.main.buttons.toUpperCase());
}
});
@@ -408,7 +420,7 @@ const Appearance = (props) => {
try {
await sendAppearanceTheme({ themes: [editTheme] });
await getAppearanceTheme();
- setPreviewAccentColor(editTheme.accentColor);
+ setPreviewAccent(editTheme.main.accent);
toastr.success(t("Settings:SuccessfullySaveSettingsMessage"));
} catch (error) {
@@ -419,14 +431,20 @@ const Appearance = (props) => {
);
const onSaveColorSchemeDialog = () => {
- const textColor = getTextColor(currentColorButtons);
+ const textColorAccent = getTextColor(currentColorAccent);
+ const textColorButtons = getTextColor(currentColorButtons);
if (isAddThemeDialog) {
// Saving a new custom theme
const theme = {
- accentColor: currentColorAccent,
- buttonsMain: currentColorButtons,
- textColor: textColor,
+ main: {
+ accent: currentColorAccent,
+ buttons: currentColorButtons,
+ },
+ text: {
+ accent: textColorAccent,
+ buttons: textColorButtons,
+ },
};
onSaveNewThemes(theme);
@@ -442,9 +460,14 @@ const Appearance = (props) => {
// Editing themes
const editTheme = {
id: selectThemeId,
- accentColor: currentColorAccent,
- buttonsMain: currentColorButtons,
- textColor: textColor,
+ main: {
+ accent: currentColorAccent,
+ buttons: currentColorButtons,
+ },
+ text: {
+ accent: textColorAccent,
+ buttons: textColorButtons,
+ },
};
onSaveChangedThemes(editTheme);
@@ -529,18 +552,21 @@ const Appearance = (props) => {
{appearanceTheme.map((item, index) => {
- if (index > 6) return;
- return (
-
onColorSelection(item)}
- >
- {onShowCheck(item.id)}
-
- );
+ {
+ return (
+ onCheckStandardThemeRender(item) && (
+
onColorSelection(item)}
+ >
+ {onShowCheck(item.id)}
+
+ )
+ );
+ }
})}
@@ -550,12 +576,12 @@ const Appearance = (props) => {
{appearanceTheme.map((item, index) => {
- if (index < 7) return;
+ if (item.name) return;
return (
onColorSelection(item)}
>
@@ -643,6 +669,7 @@ export default inject(({ auth }) => {
getAppearanceTheme,
currentColorScheme,
deleteAppearanceTheme,
+ theme,
} = settingsStore;
return {
@@ -652,6 +679,7 @@ export default inject(({ auth }) => {
getAppearanceTheme,
currentColorScheme,
deleteAppearanceTheme,
+ theme,
};
})(
withTranslation(["Profile", "Common", "Settings"])(
diff --git a/packages/client/src/pages/Profile/Section/Body/sub-components/interface-theme/index.js b/packages/client/src/pages/Profile/Section/Body/sub-components/interface-theme/index.js
index cccadde708..f53c37f6ee 100644
--- a/packages/client/src/pages/Profile/Section/Body/sub-components/interface-theme/index.js
+++ b/packages/client/src/pages/Profile/Section/Body/sub-components/interface-theme/index.js
@@ -107,7 +107,7 @@ const InterfaceTheme = (props) => {
label={t("LightTheme")}
isDisabled={isSystemTheme}
theme="Light"
- accentColor={currentColorScheme.accentColor}
+ accentColor={currentColorScheme.main.accent}
themeId={selectedThemeId}
value={ThemeKeys.BaseStr}
isChecked={currentTheme === ThemeKeys.BaseStr}
@@ -117,7 +117,7 @@ const InterfaceTheme = (props) => {
label={t("DarkTheme")}
isDisabled={isSystemTheme}
theme="Dark"
- accentColor={currentColorScheme.accentColor}
+ accentColor={currentColorScheme.main.accent}
themeId={selectedThemeId}
value={ThemeKeys.DarkStr}
isChecked={currentTheme === ThemeKeys.DarkStr}