added button for deleting branding

Author: raheeliftikhar5

client/packages/lowcoder/src/app.tsx

@@ -85,7 +85,13 @@ const Wrapper = React.memo((props: {
     return {
       hashed: false,
       token: {
-        fontFamily: `${props.fontFamily ? props.fontFamily.split('+').join(' ') : 'Roboto'}, sans-serif`,
+        fontFamily: `${
+          props.fontFamily
+          ? props.fontFamily.split('+').join(' ')
+          : `-apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "Segoe UI", "PingFang SC",
+            "Microsoft Yahei", "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+            "Segoe UI Symbol", "Noto Color Emoji"`
+        }, sans-serif`,
       },
     }
   }, [props.fontFamily]);

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -3112,7 +3112,9 @@ export const en = {
     "whatsNewSection": "Documentation Settings",
     "whatsNewLink": "What's New Link",
     "whatsNewLinkPlaceholder": "Enter the URL for your documentation...",
-    "whatsNewLinkHelp": "Provide a valid URL that users can visit for your news."
+    "whatsNewLinkHelp": "Provide a valid URL that users can visit for your news.",
+    "deleteBranding": "Delete Branding",
+    "deleteBrandingContent": "Are you sure you want to delete \"{orgName}\" branding?"
   },
   "networkMessage": {
     "200": "Success",

client/packages/lowcoder/src/pages/editor/appEditorInternal.tsx

@@ -239,7 +239,9 @@ export const AppEditorInternalView = React.memo((props: AppEditorInternalViewPro
       locale={getAntdLocale(currentUser.uiLanguage)}
       theme={{
         token: {
-          fontFamily: 'Roboto, sans-serif',
+          fontFamily: `-apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "Segoe UI", "PingFang SC",
+            "Microsoft Yahei", "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+            "Segoe UI Symbol", "Noto Color Emoji"`,
         },
       }}
     >

client/packages/lowcoder/src/pages/setting/branding/BrandingSetting.tsx

@@ -1,6 +1,6 @@
 import { HelpText } from "components/HelpText";
 import { Upload, Switch, Card, Input, message, Divider } from "antd";
-import { TacoButton, CustomSelect, messageInstance, Dropdown, ResetIcon } from "lowcoder-design";
+import { TacoButton, CustomSelect, messageInstance, Dropdown, ResetIcon, CustomModal } from "lowcoder-design";
 import React, { useEffect, useMemo, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import styled from "styled-components";
@@ -21,7 +21,6 @@ import { getUser } from "@lowcoder-ee/redux/selectors/usersSelectors";
 import { Org } from "@lowcoder-ee/constants/orgConstants";
 import { BrandingConfig, BrandingSettings, createBranding, getBranding } from "@lowcoder-ee/api/enterpriseApi";
 import Flex from "antd/es/flex";
-import Button from "antd/es/button";
 import { fetchBrandingSetting } from "@lowcoder-ee/redux/reduxActions/enterpriseActions";
 import { Level1SettingPageTitle } from "../styled";
 
@@ -184,6 +183,7 @@ const beforeUpload = (file: RcFile) => {
 export function BrandingSetting() {
   const dispatch = useDispatch();
   const [configOrgId, setConfigOrgId] = useState<string>('');
+  const [configOrgName, setConfigOrgName] = useState<string | undefined>('Global');
   const [settings, setSettings] = useState<BrandingSettings>(defaultSettings);
   const [brandingConfig, setBrandingConfig] = useState<BrandingConfig>();
   const [defaultBrandingConfig, setDefaultBrandingConfig] = useState<BrandingConfig>();
@@ -273,7 +273,7 @@ export function BrandingSetting() {
     }
   }
 
-  const handleSave = async () => {
+  const handleSave = async (brandingConfig?: BrandingConfig) => {
     try {
       await createBranding({
         ...brandingConfig,
@@ -288,6 +288,26 @@ export function BrandingSetting() {
     }
   }
 
+  const handleDelete = (id: string) => {
+    CustomModal.confirm({
+      title: trans("branding.deleteBranding"),
+      content: trans("branding.deleteBrandingContent", {orgName: configOrgName}),
+      onConfirm: () => {
+        const newBrandingConfig = {
+          ...brandingConfig,
+          config_name: '',
+          config_description: '',
+          config_icon: '',
+          config_set: {},
+        }
+        setBrandingConfig(newBrandingConfig);
+        handleSave(newBrandingConfig);
+      },
+      confirmBtnType: "delete",
+      okText: trans("delete"),
+    })
+  }
+
   const uploadButton = (loading: boolean) => (
     <div>
       {loading ? <LoadingOutlined /> : <PlusOutlined />}
@@ -319,6 +339,7 @@ export function BrandingSetting() {
                 allowClear
                 onChange={(value) => {
                   setConfigOrgId(value);
+                  setConfigOrgName(orgsList.find(org => org.value === value)?.label)
                 }}
                 value={configOrgId}
               />
@@ -756,6 +777,13 @@ export function BrandingSetting() {
         </BrandingSettingContent>
 
         <Flex gap={10} style={{ marginTop: 20 }}>
+          <TacoButton
+            buttonType="delete"
+            disabled={!Boolean(brandingConfig?.id)}
+            onClick={() => handleDelete(brandingConfig?.id!)}
+          >
+            {trans("delete")}
+          </TacoButton>
           <TacoButton
             buttonType="normal"
             icon={<ResetIcon />}
@@ -767,7 +795,7 @@ export function BrandingSetting() {
           <TacoButton
             buttonType="primary"
             disabled={isBrandingNotChange()}
-            onClick={handleSave}
+            onClick={() => handleSave(brandingConfig)}
           >
             {trans("branding.saveButton")}
           </TacoButton>