feat: #226 Add option to override logo url in the django settings

Author: payamnj

django_email_learning/platform/views.py

@@ -65,6 +65,22 @@ def get_shared_context(self) -> Dict[str, Any]:
                         and getattr(self.request.user, "has_platform_admin_role", False)
                     )
                 ),
+                "customLogo": {
+                    "horizontalLight": DJANGO_EMAIL_LEARNING_SETTINGS.get("LOGO", {})
+                    .get("HORIZONTAL_LOCKUP", {})
+                    .get("LIGHT_BACKGROUND"),
+                    "horizontalDark": DJANGO_EMAIL_LEARNING_SETTINGS.get("LOGO", {})
+                    .get("HORIZONTAL_LOCKUP", {})
+                    .get("DARK_BACKGROUND"),
+                    "verticalLight": DJANGO_EMAIL_LEARNING_SETTINGS.get("LOGO", {})
+                    .get("VERTICAL_LOCKUP", {})
+                    .get("LIGHT_BACKGROUND"),
+                    "verticalDark": DJANGO_EMAIL_LEARNING_SETTINGS.get("LOGO", {})
+                    .get("VERTICAL_LOCKUP", {})
+                    .get("DARK_BACKGROUND"),
+                }
+                if DJANGO_EMAIL_LEARNING_SETTINGS.get("LOGO")
+                else None,
                 "isOrganizationAdmin": (
                     self.request.user.is_superuser
                     or (

django_service/settings.py

@@ -110,6 +110,16 @@
             "COMPONENT_TAG": "<l-helix />",
         }
     },
+    "LOGO": {
+        "HORIZONTAL_LOCKUP": {
+            "LIGHT_BACKGROUND": None,
+            "DARK_BACKGROUND": None,
+        },
+        "VERTICAL_LOCKUP": {
+            "LIGHT_BACKGROUND": None,
+            "DARK_BACKGROUND": None,
+        },
+    },
 }
 
 

frontend/src/components/MenuBar.jsx

@@ -54,14 +54,23 @@ function MenuBar({activeOrganizationId, changeOrganizationCallback, showOrganiza
     const [organizations, setOrganizations] = useState([])
     const [deliverContentsJobStatus, setDeliverContentsJobStatus] = useState(null)
     const [chip, setChip] = useState(null)
-    const { localeMessages, isPlatformAdmin, isOrganizationAdmin, direction, apiBaseUrl, platformBaseUrl, sidebarCustomComponent } = useAppContext();
+    const { localeMessages, isPlatformAdmin, isOrganizationAdmin, direction, apiBaseUrl, platformBaseUrl, sidebarCustomComponent, customLogo } = useAppContext();
 
     const theme = useTheme();
     const isMdUpScreen = useMediaQuery(theme.breakpoints.up('md'));
 
     const drawerVariant = isMdUpScreen ? "permanent" : "temporary";
-    const logoHorizontalUrl = theme.palette.mode === 'light' ? logoHorizontalLightUrl : logoHorizontalDarkUrl;
-    const logoVerticalUrl = theme.palette.mode === 'light' ? logoVerticalLightUrl : logoVerticalDarkUrl;
+    let logoHorizontalUrl, logoVerticalUrl;
+    if (customLogo) {
+        logoHorizontalUrl = theme.palette.mode === 'light' ? (customLogo.horizontalLight ? customLogo.horizontalLight : customLogo.horizontalDark) : (customLogo.horizontalDark ? customLogo.horizontalDark : customLogo.horizontalLight);
+        logoVerticalUrl = theme.palette.mode === 'light' ? (customLogo.verticalLight ? customLogo.verticalLight : customLogo.verticalDark) : (customLogo.verticalDark ? customLogo.verticalDark : customLogo.verticalLight);
+    }
+    if (!logoHorizontalUrl) {
+        logoHorizontalUrl = theme.palette.mode === 'light' ? logoHorizontalLightUrl : logoHorizontalDarkUrl;
+    }
+    if (!logoVerticalUrl) {
+        logoVerticalUrl = theme.palette.mode === 'light' ? logoVerticalLightUrl : logoVerticalDarkUrl;
+    }
 
     const jobsStatusMap = {
         "healthy": {