From 5a9b97cc8460092cb99d0dc56e0ac8672445ba8e Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Tue, 28 Jan 2025 22:36:57 +0500 Subject: [PATCH 1/3] branding updates --- .../lowcoder/src/api/commonSettingApi.ts | 56 +- .../lowcoder/src/api/enterpriseApi.ts | 81 ++- .../lowcoder/src/components/layout/Layout.tsx | 4 +- .../src/components/layout/SideBarSection.tsx | 4 +- .../packages/lowcoder/src/i18n/locales/en.ts | 1 + .../lowcoder/src/pages/common/header.tsx | 6 +- .../lowcoder/src/pages/editor/editorView.tsx | 7 +- .../src/pages/setting/appUsage/AppUsage.tsx | 637 +----------------- .../setting/branding/BrandingSetting.tsx | 246 +++++-- .../setting/environments/Environments.tsx | 637 +----------------- .../redux/selectors/commonSettingSelectors.ts | 6 +- .../redux/selectors/enterpriseSelectors.ts | 14 +- 12 files changed, 305 insertions(+), 1394 deletions(-) diff --git a/client/packages/lowcoder/src/api/commonSettingApi.ts b/client/packages/lowcoder/src/api/commonSettingApi.ts index d549b1ff8..b704a25f9 100644 --- a/client/packages/lowcoder/src/api/commonSettingApi.ts +++ b/client/packages/lowcoder/src/api/commonSettingApi.ts @@ -82,34 +82,34 @@ export interface ThemeDetail { dataLoadingIndicator?: string; } -export interface BrandingSettings { - logo: string | null; - squareLogo: string | null; - mainBrandingColor: string; - appHeaderColor: string; - adminSidebarColor: string; - adminSidebarFontColor: string; - adminSidebarActiveBgColor: string; - adminSidebarActiveFontColor: string; - editorSidebarColor: string; - editorSidebarFontColor: string; - editorSidebarActiveBgColor: string; - editorSidebarActiveFontColor: string; - font: string; - errorPageText: string; - errorPageImage: string | null; - signUpPageText: string; - signUpPageImage: string | null; - loggedOutPageText: string; - loggedOutPageImage: string | null; - standardDescription: string; - standardTitle: string; - showDocumentation: boolean; - documentationLink: string | null; - submitIssue: boolean; - whatsNew: boolean; - whatsNewLink: string | null; -} +// export interface BrandingSettings { +// logo: string | null; +// squareLogo: string | null; +// mainBrandingColor: string; +// appHeaderColor: string; +// adminSidebarColor: string; +// adminSidebarFontColor: string; +// adminSidebarActiveBgColor: string; +// adminSidebarActiveFontColor: string; +// editorSidebarColor: string; +// editorSidebarFontColor: string; +// editorSidebarActiveBgColor: string; +// editorSidebarActiveFontColor: string; +// font: string; +// errorPageText: string; +// errorPageImage: string | null; +// signUpPageText: string; +// signUpPageImage: string | null; +// loggedOutPageText: string; +// loggedOutPageImage: string | null; +// standardDescription: string; +// standardTitle: string; +// showDocumentation: boolean; +// documentationLink: string | null; +// submitIssue: boolean; +// whatsNew: boolean; +// whatsNewLink: string | null; +// } export function getThemeDetailName(key: keyof ThemeDetail) { switch (key) { diff --git a/client/packages/lowcoder/src/api/enterpriseApi.ts b/client/packages/lowcoder/src/api/enterpriseApi.ts index 8301b6865..4b28828a2 100644 --- a/client/packages/lowcoder/src/api/enterpriseApi.ts +++ b/client/packages/lowcoder/src/api/enterpriseApi.ts @@ -1,45 +1,88 @@ import axios from 'axios'; +export interface BrandingSettings { + logo?: string | null; + squareLogo?: string | null; + mainBrandingColor?: string; + appHeaderColor?: string; + adminSidebarColor?: string; + adminSidebarFontColor?: string; + adminSidebarActiveBgColor?: string; + adminSidebarActiveFontColor?: string; + editorSidebarColor?: string; + editorSidebarFontColor?: string; + editorSidebarActiveBgColor?: string; + editorSidebarActiveFontColor?: string; + font?: string; + errorPageText?: string; + errorPageImage?: string | null; + signUpPageText?: string; + signUpPageImage?: string | null; + loggedOutPageText?: string; + loggedOutPageImage?: string | null; + standardDescription?: string; + standardTitle?: string; + showDocumentation?: boolean; + documentationLink?: string | null; + submitIssue?: boolean; + whatsNew?: boolean; + whatsNewLink?: string | null; +} +export interface BrandingConfig { + config_name?: string, + config_description?: string, + config_icon?: string, + config_set?: BrandingSettings, + org_id?: string, + user_id?: string, + id?: string, +} + // Existing functions export const getEnterpriseLicense = async () => { - const response = await axios.get('/api/plugins/enterprise/license'); - return response.data; + const response = await axios.get('/api/plugins/enterprise/license'); + return response.data; }; export const getAuditLogs = async (params = {}) => { - const query = new URLSearchParams(params).toString(); - const response = await axios.get(`/api/plugins/enterprise/audit-logs${query ? `?${query}` : ''}`); - return response.data; + const query = new URLSearchParams(params).toString(); + const response = await axios.get(`/api/plugins/enterprise/audit-logs${query ? `?${query}` : ''}`); + return response.data; }; export const getAuditLogStatistics = async (groupByParam : string) => { - const response = await axios.get(`/api/plugins/enterprise/audit-logs/statistics?groupByParam=${groupByParam}`); - return response.data; + const response = await axios.get(`/api/plugins/enterprise/audit-logs/statistics?groupByParam=${groupByParam}`); + return response.data; }; export const getAppUsageLogs = async (params = {}) => { - const query = new URLSearchParams(params).toString(); - const response = await axios.get(`/api/plugins/enterprise/app-usage-logs${query ? `?${query}` : ''}`); - return response.data; + const query = new URLSearchParams(params).toString(); + const response = await axios.get(`/api/plugins/enterprise/app-usage-logs${query ? `?${query}` : ''}`); + return response.data; }; export const getAppUsageStatistics = async (groupByParam : string) => { - const response = await axios.get(`/api/plugins/enterprise/app-usage-logs/statistics?groupByParam=${groupByParam}`); - return response.data; + const response = await axios.get(`/api/plugins/enterprise/app-usage-logs/statistics?groupByParam=${groupByParam}`); + return response.data; }; -export const getBranding = async () => { - const response = await axios.get('/api/plugins/enterprise/branding'); - return response.data; +export const getBranding = async (orgId: string = '') => { + const response = await axios.get('/api/plugins/enterprise/branding?orgId='+orgId); + return response.data; }; export const createBranding = async (brandingData : any) => { - const response = await axios.post('/api/plugins/enterprise/branding', brandingData); - return response.data; + let response; + if (brandingData.id) { + response = await axios.put(`/api/plugins/enterprise/branding?brandId=${brandingData.id}`, brandingData); + } else { + response = await axios.post('/api/plugins/enterprise/branding', brandingData); + } + return response.data; }; export const updateBranding = async (brandingData : any) => { - const response = await axios.put('/api/plugins/enterprise/branding', brandingData); - return response.data; + const response = await axios.put('/api/plugins/enterprise/branding', brandingData); + return response.data; }; diff --git a/client/packages/lowcoder/src/components/layout/Layout.tsx b/client/packages/lowcoder/src/components/layout/Layout.tsx index 3024fd9ce..a90919176 100644 --- a/client/packages/lowcoder/src/components/layout/Layout.tsx +++ b/client/packages/lowcoder/src/components/layout/Layout.tsx @@ -10,7 +10,7 @@ import { CNMainContent, CNSidebar } from "constants/styleSelectors"; import { SideBarSection, SideBarSectionProps } from "./SideBarSection"; import styled from "styled-components"; import { useSelector } from "react-redux"; -import { getBrandingSettings } from "@lowcoder-ee/redux/selectors/commonSettingSelectors"; +// import { getBrandingSettings } from "@lowcoder-ee/redux/selectors/commonSettingSelectors"; import { MenuOutlined } from "@ant-design/icons"; import { Drawer, Button } from "antd"; @@ -58,7 +58,7 @@ const DrawerContentWrapper = styled.div` `; export function Layout(props: LayoutProps) { - const brandingSettings = useSelector(getBrandingSettings); + const brandingSettings = {}; //useSelector(getBrandingSettings); const [drawerVisible, setDrawerVisible] = useState(false); const [isMobile, setIsMobile] = useState(false); diff --git a/client/packages/lowcoder/src/components/layout/SideBarSection.tsx b/client/packages/lowcoder/src/components/layout/SideBarSection.tsx index 3964ec420..3c2922f7b 100644 --- a/client/packages/lowcoder/src/components/layout/SideBarSection.tsx +++ b/client/packages/lowcoder/src/components/layout/SideBarSection.tsx @@ -11,7 +11,7 @@ import { getUser } from "../../redux/selectors/usersSelectors"; import { normalAppListSelector } from "../../redux/selectors/applicationSelector"; import { useLocation } from "react-router-dom"; import history from "../../util/history"; -import { getBrandingSettings } from "@lowcoder-ee/redux/selectors/commonSettingSelectors"; +// import { getBrandingSettings } from "@lowcoder-ee/redux/selectors/commonSettingSelectors"; const defaultOnSelectedFn = (routePath: string, currentPath: string) => routePath === currentPath; @@ -24,7 +24,7 @@ const Wrapper = styled.div` export const SideBarSection = (props: SideBarSectionProps) => { const user = useSelector(getUser); const applications = useSelector(normalAppListSelector); - const brandingSettings = useSelector(getBrandingSettings); + const brandingSettings = {}; //useSelector(getBrandingSettings); const currentPath = useLocation().pathname; const isShow = props.items .map((item) => (item.visible ? item.visible({ user: user, applications: applications }) : true)) diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index f3083aca1..22671e81b 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -2850,6 +2850,7 @@ export const en = { "branding": { "title": "Branding Settings", + "selectWorkspace": "Select Workspace", "logoSection": "Logos", "logo": "Logo", "logoHelp": "Upload your company's logo in SVG or PNG format.", diff --git a/client/packages/lowcoder/src/pages/common/header.tsx b/client/packages/lowcoder/src/pages/common/header.tsx index a2e865573..411a4aea5 100644 --- a/client/packages/lowcoder/src/pages/common/header.tsx +++ b/client/packages/lowcoder/src/pages/common/header.tsx @@ -64,7 +64,7 @@ import Avatar from 'antd/es/avatar'; import UserApi from "@lowcoder-ee/api/userApi"; import { validateResponse } from "@lowcoder-ee/api/apiUtils"; import ProfileImage from "./profileImage"; -import { getBrandingSettings } from "@lowcoder-ee/redux/selectors/commonSettingSelectors"; +// import { getBrandingSettings } from "@lowcoder-ee/redux/selectors/commonSettingSelectors"; import { buildMaterialPreviewURL } from "@lowcoder-ee/util/materialUtils"; const { Countdown } = Statistic; @@ -380,7 +380,7 @@ export default function Header(props: HeaderProps) { const dispatch = useDispatch(); const showAppSnapshot = useSelector(showAppSnapshotSelector); const {selectedSnapshot, isArchivedSnapshot} = useSelector(getSelectedAppSnapshot); - const brandingSettings = useSelector(getBrandingSettings); + const brandingSettings = {}; //useSelector(getBrandingSettings); const { appType } = useContext(ExternalEditorContext); const [editName, setEditName] = useState(false); const [editing, setEditing] = useState(false); @@ -694,7 +694,7 @@ export default function Header(props: HeaderProps) { // header in manager page export function AppHeader() { const user = useSelector(getUser); - const brandingSettings = useSelector(getBrandingSettings); + const brandingSettings = {}; //useSelector(getBrandingSettings); const headerStart = ( history.push(ALL_APPLICATIONS_URL)}> diff --git a/client/packages/lowcoder/src/pages/editor/editorView.tsx b/client/packages/lowcoder/src/pages/editor/editorView.tsx index a3d42c43a..5eab08e10 100644 --- a/client/packages/lowcoder/src/pages/editor/editorView.tsx +++ b/client/packages/lowcoder/src/pages/editor/editorView.tsx @@ -55,7 +55,10 @@ import { } from "util/localStorageUtil"; import { isAggregationApp } from "util/appUtils"; import EditorSkeletonView from "./editorSkeletonView"; -import { getBrandingSettings, getCommonSettings } from "@lowcoder-ee/redux/selectors/commonSettingSelectors"; +import { + // getBrandingSettings, + getCommonSettings +} from "@lowcoder-ee/redux/selectors/commonSettingSelectors"; import { isEqual, noop } from "lodash"; import { AppSettingContext, AppSettingType } from "@lowcoder-ee/comps/utils/appSettingContext"; // import { BottomSkeleton } from "./bottom/BottomContent"; @@ -314,7 +317,7 @@ function EditorView(props: EditorViewProps) { const locationState = useLocation().state; const showNewUserGuide = locationState?.showNewUserGuide; const showAppSnapshot = useSelector(showAppSnapshotSelector); - const brandingSettings = useSelector(getBrandingSettings); + const brandingSettings = {}; //useSelector(getBrandingSettings); const [showShortcutList, setShowShortcutList] = useState(false); const toggleShortcutList = useCallback( () => setShowShortcutList(!showShortcutList), diff --git a/client/packages/lowcoder/src/pages/setting/appUsage/AppUsage.tsx b/client/packages/lowcoder/src/pages/setting/appUsage/AppUsage.tsx index 413b71d77..5f65bfc19 100644 --- a/client/packages/lowcoder/src/pages/setting/appUsage/AppUsage.tsx +++ b/client/packages/lowcoder/src/pages/setting/appUsage/AppUsage.tsx @@ -1,638 +1,3 @@ -import { EmptyContent } from "components/EmptyContent"; -import { HelpText } from "components/HelpText"; -import { Upload, Switch, Card, Input, message, Divider } from "antd"; -import { TacoButton, CustomSelect, messageInstance } from "lowcoder-design"; -import React, { useEffect, useState } from "react"; -import { useDispatch, useSelector } from "react-redux"; -import styled from "styled-components"; -import { trans } from "i18n"; -import { default as ColorPicker } from "antd/es/color-picker"; -import { - DetailContainer, - DetailContent, - Header, - } from "../theme/styledComponents"; -import { HeaderBack } from "pages/setting/permission/styledComponents"; -import { LoadingOutlined, PlusOutlined } from '@ant-design/icons'; -import type { UploadChangeParam, RcFile } from "antd/es/upload"; -import MaterialApi, { MaterialUploadTypeEnum } from "@lowcoder-ee/api/materialApi"; -import { validateResponse } from "@lowcoder-ee/api/apiUtils"; -import { buildMaterialPreviewURL } from "@lowcoder-ee/util/materialUtils"; -import { getUser } from "@lowcoder-ee/redux/selectors/usersSelectors"; -import { fetchCommonSettings, setCommonSettings } from "@lowcoder-ee/redux/reduxActions/commonSettingsActions"; -import { useShallowEqualSelector } from "@lowcoder-ee/util/hooks"; -import { BrandingSettings } from "@lowcoder-ee/api/commonSettingApi"; -import { getBrandingSettings } from "@lowcoder-ee/redux/selectors/commonSettingSelectors"; - -const { TextArea } = Input; - -enum SettingsEnum { - LOGO = "logo", - SQUARE_LOGO = "squareLogo", - ERROR_PAGE_IMAGE = "errorPageImage", - LOGOUT_PAGE_IMAGE = "loggedOutPageImage", - SIGNUP_PAGE_IMAGE = "signUpPageImage", - MAIN_BRANDING_COLOR = "mainBrandingColor", - APP_HEADER_COLOR = "appHeaderColor", - ADMIN_SIDEBAR_COLOR = "adminSidebarColor", - ADMIN_SIDEBAR_FONT_COLOR = "adminSidebarFontColor", - ADMIN_SIDEBAR_ACTIVE_BG_COLOR = "adminSidebarActiveBgColor", - ADMIN_SIDEBAR_ACTIVE_FONT_COLOR = "adminSidebarActiveFontColor", - EDITOR_SIDEBAR_COLOR = "editorSidebarColor", - EDITOR_SIDEBAR_FONT_COLOR = "editorSidebarFontColor", - EDITOR_SIDEBAR_ACTIVE_BG_COLOR = "editorSidebarActiveBgColor", - EDITOR_SIDEBAR_ACTIVE_FONT_COLOR = "editorSidebarActiveFontColor", - FONT = "font", - ERROR_PAGE_TEXT = "errorPageText", - SIGNUP_PAGE_TEXT = "signUpPageText", - LOGGED_OUT_PAGE_TEXT = "loggedOutPageText", - STANDARD_DESCRIPTION = "standardDescription", - STANDARD_TITLE = "standardTitle", - SHOW_DOCUMENTATION = "showDocumentation", - DOCUMENTATION_LINK = "documentationLink", - SUBMIT_ISSUE = "submitIssue", - WHATS_NEW = "whatsNew", - WHATS_NEW_LINK = "whatsNewLink", -} - -const defaultSettings = { - logo: null, - squareLogo: null, - mainBrandingColor: "#FF5733", - appHeaderColor: "#2c2c2c", - adminSidebarColor: "#f7f9fc", - adminSidebarFontColor: "#000000e0", - adminSidebarActiveBgColor: "#ebf0f7", - adminSidebarActiveFontColor: "#4965f2", - editorSidebarColor: "#f4f4f4", - editorSidebarFontColor: "", - editorSidebarActiveBgColor: "", - editorSidebarActiveFontColor: "", - font: "Roboto", - errorPageText: "Oops! Something went wrong.", - errorPageImage: null, - signUpPageText: "Join us today to explore new opportunities!", - signUpPageImage: null, - loggedOutPageText: "You have been logged out successfully.", - loggedOutPageImage: null, - standardDescription: "This is a sample description for SEO.", - standardTitle: "Welcome to Our Application", - showDocumentation: true, - documentationLink: null, - submitIssue: true, - whatsNew: false, - whatsNewLink : null, -}; - -// type FileType = Parameters[0] | undefined; - -const BrandingSettingContent = styled.div` - font-size: 14px; - color: #8b8fa3; - flex-grow: 1; - padding-top: 0px; - padding-left: 0px; - max-width: 100%; -`; - -const StyleThemeSettingsCover = styled.div` - display: flex; - flex-direction: row; - background: linear-gradient(34deg, rgba(2, 0, 36, 1) 0%, rgba(102, 9, 121, 1) 35%, rgba(0, 255, 181, 1) 100%); - padding: 15px; - height: 80px; - border-radius: 10px 10px 0 0; -`; - -const StyledRectUploadContainer = styled.div` - .avatar-uploader { - width: 240px; - height: 100px; - display: flex; - justify-content: center; - align-items: center; - border: 1px dashed #d9d9d9; - border-radius: 8px; - overflow: hidden; - } - - img { - width: 240px; - height: 100px; - object-fit: cover; - border-radius: 8px; - } -`; - -const StyledSquareUploadContainer = styled.div` - .avatar-uploader { - width: 100px; - height: 100px; - display: flex; - justify-content: center; - align-items: center; - border: 1px dashed #d9d9d9; - border-radius: 8px; - overflow: hidden; - } - - img { - width: 100px; - height: 100px; - object-fit: cover; - border-radius: 8px; - } -`; - -const getBase64 = (file: File): Promise => { - return new Promise((resolve, reject) => { - const reader = new FileReader(); - reader.readAsBinaryString(file); // Read file as base64 - - reader.onload = () => resolve(reader.result as string); - reader.onerror = error => reject(error); - }); -}; - -const beforeUpload = (file: RcFile) => { - const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png" || file.type === "image/svg+xml"; - if (!isJpgOrPng) { - message.error("You can only upload JPG/PNG/SVG files!"); - return Upload.LIST_IGNORE; - } - const isLt2M = file.size / 1024 / 1024 < 2; - if (!isLt2M) { - message.error("Image must be smaller than 2MB!"); - return Upload.LIST_IGNORE; - } - return true; -}; - export function AppUsage() { - const [settings, setSettings] = useState(defaultSettings); - const [loading, setLoading] = useState({ - [SettingsEnum.LOGO]: false, - [SettingsEnum.SQUARE_LOGO]: false, - [SettingsEnum.ERROR_PAGE_IMAGE]: false, - [SettingsEnum.LOGOUT_PAGE_IMAGE]: false, - [SettingsEnum.SIGNUP_PAGE_IMAGE]: false, - }); - const currentUser = useSelector(getUser); - const dispatch = useDispatch(); - const brandingSettings = useShallowEqualSelector(getBrandingSettings); - - useEffect(() => { - setSettings(brandingSettings ?? defaultSettings); - }, [brandingSettings]); - - useEffect(() => { - dispatch(fetchCommonSettings({ orgId: currentUser.currentOrgId })); - }, [currentUser.currentOrgId, dispatch]); - - const updateSettings = (key: keyof BrandingSettings, value: any) => { - setSettings((prev) => ({ ...prev, [key]: value })); - }; - - const handleUpload = async (options: any, imageType: keyof BrandingSettings) => { - const { onSuccess, onError, file } = options; - - try { - setLoading((loading) => ({ - ...loading, - [imageType]: true, - })) - const base64File = await getBase64(file); - const resp = await MaterialApi.upload( - file.name, - MaterialUploadTypeEnum.COMMON, - btoa(base64File), - ); - if (validateResponse(resp)) { - onSuccess(trans("success")); - updateSettings(imageType, resp.data.data.id); - return; - } - throw new Error("Something went wrong"); - } catch (error: any) { - onError(error); - messageInstance.error(trans("home.fileUploadError")); - } finally { - setLoading((loading) => ({ - ...loading, - [imageType]: false, - })) - } - } - - const handleSave = () => { - dispatch( - setCommonSettings({ - orgId: currentUser.currentOrgId, - data: { - key: 'branding', - value: settings, - }, - onSuccess: () => { - messageInstance.success(trans("advanced.saveSuccess")); - }, - }) - ); - } - - const uploadButton = (loading: boolean) => ( -
- {loading ? : } -
Upload
-
- ); - - return ( - -
- - {trans("branding.title")} - -
- - - - -

{trans("branding.logoSection")}

- - -
-

{trans("branding.logo")}

- - handleUpload(options, SettingsEnum.LOGO)} - > - {Boolean(settings[SettingsEnum.LOGO]) - ? logo - : uploadButton(loading[SettingsEnum.LOGO]) - } - - {trans("branding.logoHelp")} - -
- -
-

{trans("branding.squareLogo")}

- - handleUpload(options, SettingsEnum.SQUARE_LOGO)} - > - {Boolean(settings[SettingsEnum.SQUARE_LOGO]) - ? square_logo - : uploadButton(loading[SettingsEnum.SQUARE_LOGO]) - } - - {trans("branding.squareLogoHelp")} - -
- - - - - -

{trans("branding.colorFontSection")}

- - -
-

{trans("branding.mainBrandingColor")}

- node.parentNode} - value={settings.mainBrandingColor} - showText - allowClear - format="hex" - onChange={(_, hex) => updateSettings(SettingsEnum.MAIN_BRANDING_COLOR, hex)} - /> - {trans("branding.mainBrandingColorHelp")} -
- -
-

{trans("branding.editorHeaderColor")}

- node.parentNode} - value={settings.appHeaderColor} - showText - allowClear - format="hex" - onChange={(_, hex) => updateSettings(SettingsEnum.APP_HEADER_COLOR, hex)} - /> - {trans("branding.editorHeaderColorHelp")} -
- -
-

{trans("branding.adminSidebarColor")}

- node.parentNode} - value={settings.adminSidebarColor} - showText - allowClear - format="hex" - onChange={(_, hex) => updateSettings(SettingsEnum.ADMIN_SIDEBAR_COLOR, hex)} - /> - {trans("branding.adminSidebarColorHelp")} -
- -
-

{trans("branding.adminSidebarFontColor")}

- node.parentNode} - value={settings.adminSidebarFontColor} - showText - allowClear - format="hex" - onChange={(_, hex) => updateSettings(SettingsEnum.ADMIN_SIDEBAR_FONT_COLOR, hex)} - /> - {trans("branding.adminSidebarFontColorHelp")} -
- -
-

{trans("branding.adminSidebarActiveBgColor")}

- node.parentNode} - value={settings.adminSidebarActiveBgColor} - showText - allowClear - format="hex" - onChange={(_, hex) => updateSettings(SettingsEnum.ADMIN_SIDEBAR_ACTIVE_BG_COLOR, hex)} - /> - {trans("branding.adminSidebarActiveBgColorHelp")} -
- -
-

{trans("branding.adminSidebarActiveFontColor")}

- node.parentNode} - value={settings.adminSidebarActiveFontColor} - showText - allowClear - format="hex" - onChange={(_, hex) => updateSettings(SettingsEnum.ADMIN_SIDEBAR_ACTIVE_FONT_COLOR, hex)} - /> - {trans("branding.adminSidebarActiveFontColorHelp")} -
- -
-

{trans("branding.editorSidebarColor")}

- node.parentNode} - value={settings.editorSidebarColor} - showText - allowClear - format="hex" - onChange={(_, hex) => updateSettings(SettingsEnum.EDITOR_SIDEBAR_COLOR, hex)} - /> - {trans("branding.editorSidebarColorHelp")} -
- -
-

{trans("branding.editorSidebarFontColor")}

- node.parentNode} - value={settings.editorSidebarFontColor} - showText - allowClear - format="hex" - onChange={(_, hex) => updateSettings(SettingsEnum.EDITOR_SIDEBAR_FONT_COLOR, hex)} - /> - {trans("branding.editorSidebarFontColorHelp")} -
- -
-

{trans("branding.editorSidebarActiveBgColor")}

- node.parentNode} - value={settings.editorSidebarActiveBgColor} - showText - allowClear - format="hex" - onChange={(_, hex) => updateSettings(SettingsEnum.EDITOR_SIDEBAR_ACTIVE_BG_COLOR, hex)} - /> - {trans("branding.editorSidebarActiveBgColorHelp")} -
- -
-

{trans("branding.editorSidebarActiveFontColor")}

- node.parentNode} - value={settings.editorSidebarActiveFontColor} - showText - allowClear - format="hex" - onChange={(_, hex) => updateSettings(SettingsEnum.EDITOR_SIDEBAR_ACTIVE_FONT_COLOR, hex)} - /> - {trans("branding.editorSidebarActiveFontColorHelp")} -
- -
-

{trans("branding.font")}

- updateSettings(SettingsEnum.FONT, font)} - /> - {trans("branding.fontHelp")} -
- - - - - -

{trans("branding.textSection")}

- - -
-

{trans("branding.errorPage")}

-