Enhance logo handling in Login and LandingPage components.

ohcnetwork · Dec 17, 2024 · cdb3558 · cdb3558
1 parent f9d7fbd
commit cdb3558
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 20 deletions.
diff --git a/src/components/Auth/Login.tsx b/src/components/Auth/Login.tsx
@@ -306,6 +306,8 @@ const Login = (props: { forgot?: boolean }) => {
     sendOtpMutation.isPending ||
     verifyOtpMutation.isPending;
 
+  const logos = [stateLogo, customLogo].filter((logo) => logo?.light);
+
   return (
     <div className="relative flex md:h-screen flex-col-reverse md:flex-row">
       {!forgotPassword && <BrowserWarning />}
@@ -315,28 +317,31 @@ const Login = (props: { forgot?: boolean }) => {
         <div></div>
         <div className="mt-4 flex flex-col items-start rounded-lg py-4 md:mt-12">
           <div className="mb-4 hidden items-center gap-6 md:flex">
-            {(customLogo || stateLogo) && (
-              <>
+            {logos.map((logo, index) =>
+              logo && logo.light ? (
+                <div key={index} className="flex items-center">
+                  <img
+                    src={logo.light}
+                    className="h-16 rounded-lg py-3"
+                    alt="state logo"
+                  />
+                </div>
+              ) : null,
+            )}
+            {logos.length === 0 && (
+              <a
+                href={urls.ohcn}
+                className="inline-block"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
                 <img
-                  src={customLogo?.light ?? stateLogo?.light}
-                  className="h-16 rounded-lg py-3"
-                  alt="state logo"
+                  src={customLogoAlt?.light ?? "/images/ohc_logo_light.svg"}
+                  className="h-8"
+                  alt="Open Healthcare Network logo"
                 />
-                <div className="h-10 w-0.5 rounded-full bg-white/50" />
-              </>
+              </a>
             )}
-            <a
-              href={urls.ohcn}
-              className="inline-block"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <img
-                src={customLogoAlt?.light ?? "/images/ohc_logo_light.svg"}
-                className="h-8"
-                alt="Open Healthcare Network logo"
-              />
-            </a>
           </div>
           <div className="max-w-lg">
             <h1 className="text-4xl font-black leading-tight tracking-wider text-white lg:text-5xl">

diff --git a/src/pages/Landing/LandingPage.tsx b/src/pages/Landing/LandingPage.tsx
@@ -19,7 +19,7 @@ import routes from "@/Utils/request/api";
 import request from "@/Utils/request/request";
 import { RequestResult } from "@/Utils/request/types";
 
-const { customLogo, mainLogo } = careConfig;
+const { customLogo, stateLogo, mainLogo } = careConfig;
 
 // Todo: Lets read the default state ID from ENV.
 const STATE_ID = "1"; // Kerala's state ID
@@ -114,6 +114,12 @@ export function LandingPage() {
       {/* Main Content */}
       <main className="flex-1 flex flex-col items-center pt-24">
         {/* Logo Section */}
+        {stateLogo && stateLogo.dark && (
+          <div className="mb-2">
+            <img src={stateLogo.dark} alt="Logo" className="h-28 w-auto" />
+          </div>
+        )}
+
         <div className="mb-8">
           {(customLogo || mainLogo) && (
             <>