Branding: Applied refresh logos

packages/client/public/index.html

@@ -12,7 +12,7 @@
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
-    <link rel="icon" type="image/x-icon" href="/logo.ashx?logotype=3" />
+    <link id="favicon" rel="icon" type="image/x-icon" href="/logo.ashx?logotype=3" />
 
     <link rel="manifest" href="/manifest.json" />
     <!-- Tell the browser it's a PWA -->

packages/client/src/pages/PortalSettings/categories/common/Branding/whitelabel.js

@@ -248,12 +248,12 @@ const WhiteLabel = (props) => {
 
   const isEqualLogo = isEqual(logoUrlsWhiteLabel, defaultWhiteLabelLogoUrls);
   const isEqualText = defaultLogoTextWhiteLabel === logoTextWhiteLabel;
-  const showReminder = !isEqualLogo || !isEqualText;
+  const saveButtonDisabled = isEqualLogo && isEqualText;
 
   return !isLoadedData ? (
     <LoaderWhiteLabel />
   ) : (
-    <WhiteLabelWrapper showReminder={showReminder}>
+    <WhiteLabelWrapper showReminder={!saveButtonDisabled}>
       <Text className="subtitle">{t("BrandingSubtitle")}</Text>
 
       <div className="header-container">
@@ -523,9 +523,9 @@ const WhiteLabel = (props) => {
         displaySettings={true}
         hasScroll={true}
         hideBorder={true}
-        showReminder={showReminder}
+        showReminder={!saveButtonDisabled}
         reminderText={t("YouHaveUnsavedChanges")}
-        saveButtonDisabled={isEqualLogo && isEqualText}
+        saveButtonDisabled={saveButtonDisabled}
         disableRestoreToDefault={!enableRestoreButton}
         isSaving={isSaving}
         additionalClassSaveButton="white-label-save"

packages/client/src/store/CommonStore.js

@@ -161,6 +161,8 @@ class CommonStore {
     const logos = await getWhiteLabelLogoUrls();
 
     this.setLogoUrlsWhiteLabel(Object.values(logos));
+
+    return logos;
   };
 
   getWhiteLabelLogoText = async () => {
@@ -170,13 +172,33 @@ class CommonStore {
     return res;
   };
 
-  saveWhiteLabelSettings = async (data) => {
-    const { getWhiteLabelLogoUrls } = this.settingsStore;
+  applyNewLogos = (logos) => {
+    const theme =
+      typeof window !== "undefined" &&
+      window.matchMedia &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches
+        ? "dark"
+        : "light";
 
+    const favicon = document.getElementById("favicon");
+    const logo = document.getElementsByClassName("logo-icon_svg")?.[0];
+    const logoBurger = document.getElementsByClassName("burger-logo")?.[0];
+
+    runInAction(() => {
+      favicon && (favicon.href = logos?.[2]?.path?.["light"]); // we have single favicon for both themes
+      logo && (logo.src = logos?.[0]?.path?.[theme]);
+      logoBurger && (logoBurger.src = logos?.[5]?.path?.[theme]);
+    });
+  };
+
+  saveWhiteLabelSettings = async (data) => {
     await this.setWhiteLabelSettings(data);
-    await getWhiteLabelLogoUrls();
-    this.getWhiteLabelLogoUrls();
+
+    const logos = await this.getWhiteLabelLogoUrls();
     this.getIsDefaultWhiteLabel();
+    this.getWhiteLabelLogoText();
+
+    this.applyNewLogos(logos);
   };
 
   getIsDefaultWhiteLabel = async () => {
@@ -186,12 +208,13 @@ class CommonStore {
   };
 
   restoreWhiteLabelSettings = async () => {
-    const { getWhiteLabelLogoUrls } = this.settingsStore;
-
     await api.settings.restoreWhiteLabelSettings(isManagement());
-    await getWhiteLabelLogoUrls();
-    this.getWhiteLabelLogoUrls();
+
+    const logos = await this.getWhiteLabelLogoUrls();
     this.getIsDefaultWhiteLabel();
+    this.getWhiteLabelLogoText();
+
+    this.applyNewLogos(logos);
   };
 
   getGreetingSettingsIsDefault = async () => {

packages/shared/components/article/sub-components/Header.tsx

@@ -78,7 +78,12 @@ const ArticleHeader = ({
     <>
       {currentDeviceType === DeviceType.tablet && (
         <StyledIconBox showText={showText}>
-          <img src={burgerLogo} alt="burger-logo" onClick={onLogoClick} />
+          <img
+            src={burgerLogo}
+            className="burger-logo"
+            alt="burger-logo"
+            onClick={onLogoClick}
+          />
         </StyledIconBox>
       )}
       <StyledHeading showText={showText}>