updated branding setting page

Author: raheeliftikhar5

client/packages/lowcoder/src/app.tsx

@@ -127,6 +127,7 @@ type AppIndexProps = {
   fetchServerSettings: () => void;
   favicon: string;
   brandName: string;
+  brandDescription: string;
   uiLanguage: string;
   brandingFontFamily?: string;
 };
@@ -183,7 +184,7 @@ class AppIndex extends React.Component<AppIndexProps, any> {
         <Helmet>
           {<title>{this.props.brandName}</title>}
           {<link rel="icon" href={this.props.favicon} />}
-          <meta name="description" content={trans('productDesc')} />
+          <meta name="description" content={this.props.brandDescription} />
           <meta
             name="keywords"
             content="Lowcoder, Applications, App Builder, Internal Applications, Websites, Dashboards, Data Visualization, Customer Applications, CRM, ERP, eCommerce, VideoMeeting, Rapid Development"
@@ -199,7 +200,7 @@ class AppIndex extends React.Component<AppIndexProps, any> {
           <meta
             key="og:description"
             property="og:description"
-            content={trans('productDesc')}
+            content={this.props.brandDescription}
           />
           <meta
             key="og:image"
@@ -222,7 +223,7 @@ class AppIndex extends React.Component<AppIndexProps, any> {
           <meta
             key="twitter:description"
             name="twitter:description"
-            content={trans('productDesc')}
+            content={this.props.brandDescription}
           />
           <meta
             key="twitter:image"
@@ -295,7 +296,7 @@ class AppIndex extends React.Component<AppIndexProps, any> {
             <meta
               key="iframely:description"
               property="iframely:description"
-              content={trans('productDesc')}
+              content={this.props.brandDescription}
             />,
             <link
               key="iframely"
@@ -489,7 +490,8 @@ const mapStateToProps = (state: AppState) => ({
   favicon: getBrandingConfig(state)?.favicon
     ? buildMaterialPreviewURL(getBrandingConfig(state)?.favicon!)
     : favicon,
-  brandName: getBrandingConfig(state)?.brandName ?? trans("productName"),
+  brandName: getBrandingSetting(state)?.config_set?.standardTitle ?? trans("productName"),
+  brandDescription: getBrandingSetting(state)?.config_set?.standardDescription ?? trans('productDesc'),
   uiLanguage: state.ui.users.user.uiLanguage,
   brandingFontFamily: getBrandingSetting(state)?.config_set?.font,
 });

client/packages/lowcoder/src/components/ErrorFallback.tsx

@@ -29,6 +29,7 @@ const StyledErrorIcon = styled(ExclamationCircleFilled)`
 
 const StyledErrorText = styled.h2`
   margin: 1rem 0;
+  text-align: center;
 `;
 
 const DefaultErrorMessage = 'Something went wrong while displaying this webpage';
@@ -45,7 +46,7 @@ const ErrorFallback = (props: {
   }, [props.errorMessage, brandingSettings?.config_set?.errorPageText]);
 
   const errorImage = useMemo(() => {
-    const imageUrl = brandingSettings?.config_set?.signUpPageImage || '';
+    const imageUrl = brandingSettings?.config_set?.errorPageImage || '';
     if (Boolean(brandingSettings?.orgId)) {
       return buildMaterialPreviewURL(imageUrl);
     }

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

@@ -3060,8 +3060,8 @@ export const en = {
     "colorFontSection": "Colors and Fonts",
     "mainBrandingColor": "Main Branding Color",
     "mainBrandingColorHelp": "Choose the primary color for your branding.",
-    "editorHeaderColor": "Editor Header Color",
-    "editorHeaderColorHelp": "Choose the color for the editor's header.",
+    "editorHeaderColor": "App Header Color",
+    "editorHeaderColorHelp": "Choose the color for the app's header.",
     "adminSidebarColor": "Admin Sidebar Color",
     "adminSidebarColorHelp": "Choose the color for the admin's sidebar.",
     "adminSidebarFontColor": "Admin Sidebar Font Color",
@@ -3114,7 +3114,8 @@ export const en = {
     "whatsNewLinkPlaceholder": "Enter the URL for your documentation...",
     "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?"
+    "deleteBrandingContent": "Are you sure you want to delete \"{orgName}\" branding?",
+    "fetchBrandingError": "Something went wrong while fetching branding details. Please try again."
   },
   "networkMessage": {
     "200": "Success",

client/packages/lowcoder/src/pages/common/header.tsx

@@ -440,11 +440,11 @@ export default function Header(props: HeaderProps) {
     <>
       <StyledLink onClick={() => history.push(ALL_APPLICATIONS_URL)}>
         {/* {REACT_APP_LOWCODER_SHOW_BRAND === 'true' ? REACT_APP_LOWCODER_CUSTOM_LOGO_SQUARE !== "" ? <img src={REACT_APP_LOWCODER_CUSTOM_LOGO_SQUARE } height={24} width={24} alt="logo" /> :<LogoIcon /> :  <LogoHome />} */}
-        { brandingSettings?.config_set?.squareLogo
+        { brandingSettings?.config_set?.logo
           ? (
             Boolean(brandingSettings?.orgId)
-            ? <BrandLogo src={buildMaterialPreviewURL(brandingSettings?.config_set?.squareLogo)} />
-            : <BrandLogo src={brandingSettings?.config_set?.squareLogo} />
+            ? <BrandLogo src={buildMaterialPreviewURL(brandingSettings?.config_set?.logo)} />
+            : <BrandLogo src={brandingSettings?.config_set?.logo} />
           ) : <LogoHome />
         }
       </StyledLink>
@@ -706,11 +706,11 @@ export function AppHeader() {
   const headerStart = (
     <StyledLink onClick={() => history.push(ALL_APPLICATIONS_URL)}>
       {/* {REACT_APP_LOWCODER_SHOW_BRAND === 'true' ?  REACT_APP_LOWCODER_CUSTOM_LOGO !== "" ? <img src={REACT_APP_LOWCODER_CUSTOM_LOGO}  height={28} alt="logo" /> :<LogoWithName branding={!user.orgDev} /> : <LogoHome />} */}
-      { brandingSettings?.config_set?.squareLogo
+      { brandingSettings?.config_set?.logo
         ? (
           Boolean(brandingSettings?.orgId)
-          ? <BrandLogo src={buildMaterialPreviewURL(brandingSettings?.config_set?.squareLogo)} />
-          : <BrandLogo src={brandingSettings?.config_set?.squareLogo} />
+          ? <BrandLogo src={buildMaterialPreviewURL(brandingSettings?.config_set?.logo)} />
+          : <BrandLogo src={brandingSettings?.config_set?.logo} />
         ) : <LogoHome />
       }
     </StyledLink>

client/packages/lowcoder/src/pages/common/previewHeader.tsx

@@ -163,11 +163,11 @@ const PreviewHeaderComp = () => {
     <>
       <StyledLink onClick={() => !isPublicApp && history.push(ALL_APPLICATIONS_URL)}>
         {/* <LogoIcon branding={true} /> */}
-        { brandingSettings?.config_set?.squareLogo
+        { brandingSettings?.config_set?.logo
           ? (
             Boolean(brandingSettings?.orgId)
-            ? <BrandLogo src={buildMaterialPreviewURL(brandingSettings?.config_set?.squareLogo)} />
-            : <BrandLogo src={brandingSettings?.config_set?.squareLogo} />
+            ? <BrandLogo src={buildMaterialPreviewURL(brandingSettings?.config_set?.logo)} />
+            : <BrandLogo src={brandingSettings?.config_set?.logo} />
           ) : <LogoIcon branding={true} />
         }
       </StyledLink>