added branding fonts

Author: raheeliftikhar5

client/packages/lowcoder/src/app.tsx

@@ -31,7 +31,7 @@ import {
   ADMIN_AUTH_URL,
   PUBLIC_APP_EDITOR_URL,
 } from "constants/routesURL";
-import React from "react";
+import React, { useMemo } from "react";
 import { createRoot } from "react-dom/client";
 import { Helmet } from "react-helmet";
 import { connect, Provider } from "react-redux";
@@ -63,6 +63,7 @@ import { packageMetaReadyAction, setLowcoderCompsLoading } from "./redux/reduxAc
 import { fetchBrandingSetting } from "./redux/reduxActions/enterpriseActions";
 import { EnterpriseProvider } from "./util/context/EnterpriseContext";
 import { SimpleSubscriptionContextProvider } from "./util/context/SimpleSubscriptionContext";
+import { getBrandingSetting } from "./redux/selectors/enterpriseSelectors";
 
 const LazyUserAuthComp = React.lazy(() => import("pages/userAuth"));
 const LazyInviteLanding = React.lazy(() => import("pages/common/inviteLanding"));
@@ -75,18 +76,33 @@ const LazyApplicationHome = React.lazy(() => import("pages/ApplicationV2"));
 const LazyDebugComp = React.lazy(() => import("./debug"));
 const LazyDebugNewComp = React.lazy(() => import("./debugNew"));
 
-const Wrapper = (props: { children: React.ReactNode, language: string }) => (
-  <ConfigProvider
-    theme={{ hashed: false }}
-    wave={{ disabled: true }}
-    locale={getAntdLocale(props.language)}
-  >
-    <App>
-      <GlobalInstances />
-      {props.children}
-    </App>
-  </ConfigProvider>
-);
+const Wrapper = React.memo((props: {
+  children: React.ReactNode,
+  language: string,
+  fontFamily?: string
+}) => {
+  const theme = useMemo(() => {
+    return {
+      hashed: false,
+      token: {
+        fontFamily: `${props.fontFamily ? props.fontFamily.split('+').join(' ') : 'Roboto'}, sans-serif`,
+      },
+    }
+  }, [props.fontFamily]);
+
+  return (
+    <ConfigProvider
+      theme={theme}
+      wave={{ disabled: true }}
+      locale={getAntdLocale(props.language)}
+    >
+      <App>
+        <GlobalInstances />
+        {props.children}
+      </App>
+    </ConfigProvider>
+  );
+});
 
 type AppIndexProps = {
   isFetchUserFinished: boolean;
@@ -106,6 +122,7 @@ type AppIndexProps = {
   favicon: string;
   brandName: string;
   uiLanguage: string;
+  brandingFontFamily?: string;
 };
 
 class AppIndex extends React.Component<AppIndexProps, any> {
@@ -156,7 +173,7 @@ class AppIndex extends React.Component<AppIndexProps, any> {
     localStorage.setItem('lowcoder_uiLanguage', this.props.uiLanguage);
 
     return (
-      <Wrapper language={this.props.uiLanguage}>
+      <Wrapper language={this.props.uiLanguage} fontFamily={this.props.brandingFontFamily}>
         <Helmet>
           {<title>{this.props.brandName}</title>}
           {<link rel="icon" href={this.props.favicon} />}
@@ -281,7 +298,8 @@ class AppIndex extends React.Component<AppIndexProps, any> {
               href={window.location.href}
               media="(aspect-ratio: 1280/720)"
             />,
-
+          ]}
+          {((isLowCoderDomain || isLocalhost) && !Boolean(this.props.brandingFontFamily)) && [
             <link
               key="preconnect-googleapis"
               rel="preconnect"
@@ -299,6 +317,24 @@ class AppIndex extends React.Component<AppIndexProps, any> {
               rel="stylesheet"
             />
           ]}
+          {Boolean(this.props.brandingFontFamily) && [
+            <link
+              key="preconnect-googleapis"
+              rel="preconnect"
+              href="https://fonts.googleapis.com"
+            />,
+            <link
+              key="preconnect-gstatic"
+              rel="preconnect"
+              href="https://fonts.gstatic.com"
+              crossOrigin="anonymous"
+            />,
+            <link
+              key={this.props.brandingFontFamily}
+              href={`https://fonts.googleapis.com/css2?family=${this.props.brandingFontFamily}&display=swap`}
+              rel="stylesheet"
+            />
+          ]}
         </Helmet>
         <SystemWarning />
           <Router history={history}>
@@ -449,6 +485,7 @@ const mapStateToProps = (state: AppState) => ({
     : favicon,
   brandName: getBrandingConfig(state)?.brandName ?? trans("productName"),
   uiLanguage: state.ui.users.user.uiLanguage,
+  brandingFontFamily: getBrandingSetting(state)?.config_set?.font,
 });
 
 const mapDispatchToProps = (dispatch: any) => ({

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

@@ -707,8 +707,11 @@ export function AppHeader() {
     <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
-        ? <BrandLogo src={buildMaterialPreviewURL(brandingSettings?.config_set?.squareLogo)} />
-        : <LogoHome />
+        ? (
+          Boolean(brandingSettings?.orgId)
+          ? <BrandLogo src={buildMaterialPreviewURL(brandingSettings?.config_set?.squareLogo)} />
+          : <BrandLogo src={brandingSettings?.config_set?.squareLogo} />
+        ) : <LogoHome />
       }
     </StyledLink>
   );

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

@@ -235,7 +235,14 @@ export const AppEditorInternalView = React.memo((props: AppEditorInternalViewPro
     window.location.pathname.split("/")[3] === "admin" ? <div></div> : 
     <EditorSkeletonView />
   ) : (
-    <ConfigProvider locale={getAntdLocale(currentUser.uiLanguage)}>
+    <ConfigProvider
+      locale={getAntdLocale(currentUser.uiLanguage)}
+      theme={{
+        token: {
+          fontFamily: 'Roboto, sans-serif',
+        },
+      }}
+    >
       <ExternalEditorContext.Provider value={externalEditorState}>
         {compInstance?.comp?.getView()}
       </ExternalEditorContext.Provider>

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

@@ -84,6 +84,18 @@ const defaultSettings = {
   whatsNewLink : null,
 };
 
+const fonts = [
+  {label: 'Roboto', value: 'Roboto'},
+  {label: 'Open Sans', value: 'Open+Sans'},
+  {label: 'Lato', value: 'Lato'},
+  {label: 'Montserrat', value: 'Montserrat'},
+  {label: 'Poppins', value: 'Poppins'},
+  {label: 'Inter', value: 'Inter'},
+  {label: 'Merriweather', value: 'Merriweather'},
+  {label: 'Playfair Display', value: 'Playfair+Display'},
+  {label: 'Raleway', value: 'Raleway'},
+  {label: 'Nunito', value: 'Nunito'},
+]
 // type FileType = Parameters<UploadProps["beforeUpload"]>[0] | undefined;
 
 const BrandingSettingContent = styled.div`
@@ -558,7 +570,7 @@ export function BrandingSetting() {
             <div style={{marginTop : "20px"}}>
               <h3>{trans("branding.font")}</h3>
               <CustomSelect
-                options={[] /* Dynamically populate Google Fonts */}
+                options={fonts}
                 value={brandingConfig?.config_set?.font}
                 onChange={(font) => updateSettings(SettingsEnum.FONT, font)}
               />