Merge pull request #482 from zesu22/bug/variable-image

[ES-403] image issue comes from variables
mosip · Nov 27, 2023 · 7d06a3e · 7d06a3e
2 parents a959b57 + a9e8258
commit 7d06a3e
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 15 deletions.
diff --git a/oidc-ui/public/images/brand_logo.svg b/oidc-ui/public/images/brand_logo.svg
diff --git a/oidc-ui/public/variables.css b/oidc-ui/public/variables.css
@@ -5,10 +5,10 @@
   --login-background: #FCFCFF;
   --language-icon-color: #FFFFFF;
   --language-icon-bg-color:  #1262C9;
-  --brand-only-logo-url: url("logo.png");
+  --brand-only-logo-url: url("/logo.png");
   --brand-logo-url: url("");
-  --background-logo-url: url("images/illustration_one.png");
-  --footer-brand-logo-url: url("images/footer_logo.png");
+  --background-logo-url: url("/images/illustration_one.png");
+  --footer-brand-logo-url: url("/images/footer_logo.png");
   --primary-button-color: #FFFFFF;
   --primary-button-bg-color: #0953FA;
   --primary-button-border-color: #0953FA;
@@ -53,8 +53,8 @@
   --signup-banner-signup-url-color-focus: #2F8EA3;
   --multipurpose-login-card-border-radius: 20px;
   --multipurpose-login-card-background-color: #FFFFFF;
-  --top-left-bg-logo-url: url("images/top_left_bg_logo.svg");
-  --bottom-right-bg-logo-url: url("images/bottom_right_bg_logo.svg");
+  --top-left-bg-logo-url: url("/images/top_left_bg_logo.svg");
+  --bottom-right-bg-logo-url: url("/images/bottom_right_bg_logo.svg");
   --login-client-logo-image-height: 5rem;
   --login-client-logo-image-width: 8rem;
   --login-alternate-arrow: "\21CB";
@@ -71,10 +71,10 @@
   --login-background: #F7F9FD;
   --language-icon-color: #ffffff;
   --language-icon-bg-color: #EB6F2D;
-  --brand-only-logo-url: url("logo.png");
-  --brand-logo-url: url("");
-  --background-logo-url: url("images/illustration_one.png");
-  --footer-brand-logo-url: url("images/footer_logo.png");
+  --brand-only-logo-url: url("/logo.png");
+  --brand-logo-url: url("/images/brand_logo.svg");
+  --background-logo-url: url("/images/illustration_one.png");
+  --footer-brand-logo-url: url("/images/footer_logo.png");
   --primary-button-color: #ffffff;
   --primary-button-bg-color: #EB6F2D;
   --primary-button-border-color: #EB6F2D;
@@ -119,8 +119,8 @@
   --signup-banner-signup-url-color-focus: #EB6F2D;
   --multipurpose-login-card-border-radius: 20px;
   --multipurpose-login-card-background-color: #ffffff;
-  --top-left-bg-logo-url: url("images/top_left_bg_logo.svg");
-  --bottom-right-bg-logo-url: url("images/bottom_right_bg_logo.svg");
+  --top-left-bg-logo-url: url("/images/top_left_bg_logo.svg");
+  --bottom-right-bg-logo-url: url("/images/bottom_right_bg_logo.svg");
   --login-client-logo-image-height: 2.75rem;
   --login-client-logo-image-width: 2.75rem;
   --login-alternate-arrow: "\21C4";

diff --git a/oidc-ui/src/components/Background.js b/oidc-ui/src/components/Background.js
@@ -40,8 +40,8 @@ export default function Background({
       </div>
     ) : (
       <>
-        <span className="top_left_bg_logo" alt="top left background"></span>
-        <span className="bottom_left_bg_logo" alt="bottom right background"></span>
+        <img className="top_left_bg_logo" alt="top left background" />
+        <img className="bottom_left_bg_logo" alt="bottom right background" />
       </>
     );
 
@@ -75,10 +75,10 @@ export default function Background({
                   alt={clientName}
                 />
                 <span className="flex mx-5 alternate-arrow"></span>
-                <span
+                <img
                   className="object-contain brand-only-logo client-logo-size"
                   alt={t("logo_alt")}
-                ></span>
+                />
               </div>
               <div
                 className="text-black lg:-mx-5 md:-mx-4 sm:-mx-3 -mx-3 mb-2 login-card-separator"