From a9e82588f6a62479d8af68e6c2013a388e4db94a Mon Sep 17 00:00:00 2001
From: Zeeshan Mehboob <zmahboob00@gmail.com>
Date: Mon, 27 Nov 2023 13:49:48 +0530
Subject: [PATCH] [FIXES] image issue comes from variables

Signed-off-by: Zeeshan Mehboob <zmahboob00@gmail.com>
---
 oidc-ui/public/images/brand_logo.svg | 51 ++++++++++++++++++++++++++++
 oidc-ui/public/variables.css         | 22 ++++++------
 oidc-ui/src/components/Background.js |  8 ++---
 3 files changed, 66 insertions(+), 15 deletions(-)
 create mode 100644 oidc-ui/public/images/brand_logo.svg

diff --git a/oidc-ui/public/images/brand_logo.svg b/oidc-ui/public/images/brand_logo.svg
new file mode 100644
index 000000000..51b922903
--- /dev/null
+++ b/oidc-ui/public/images/brand_logo.svg
@@ -0,0 +1,51 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="206" height="54.482" viewBox="0 0 206 54.482">
+  <defs>
+    <clipPath id="clip-path">
+      <path id="Path_8" data-name="Path 8" d="M52.293,0C49.759,6.314,30.938,9.89,18.887,12.923,11.036,14.9,1.914,18.868,6.7,32.45,11.109,44.992,0,54.482,0,54.482a33.888,33.888,0,0,0,16.692-6.568C10.5,44.058,13.734,30.3,17.3,25.548c4.815-6.407,9.632-7.382,22.555-12.5S52.293,0,52.293,0Z" fill="none"/>
+    </clipPath>
+    <linearGradient id="linear-gradient" y1="1" x2="0.017" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#ddc18e"/>
+      <stop offset="1" stop-color="#b1915d"/>
+    </linearGradient>
+    <clipPath id="clip-path-2">
+      <path id="Path_9" data-name="Path 9" d="M42.113,15.445c-2.084.825-3.976,1.552-5.647,2.192-8.7,3.333-12.294,4.713-15.956,9.585a21.911,21.911,0,0,0-3.106,7.77c2.286-4.074,9.556-5.605,20.422-8.194,15.6-3.715,17.33-22.6,17.33-22.6-1.27,3.271-4.561,7.89-13.042,11.25" transform="translate(-17.404 -4.195)" fill="none"/>
+    </clipPath>
+    <linearGradient id="linear-gradient-2" x1="-0.423" y1="1.644" x2="-0.398" y2="1.644" xlink:href="#linear-gradient"/>
+    <clipPath id="clip-path-3">
+      <path id="Path_10" data-name="Path 10" d="M38.291,30.8l-1.663.4C30.273,32.7,17.163,35.2,16.838,42.733h0c2.909-.691,7.624-.983,13.327-2.345,9.933-2.372,14.955-10.181,16.8-13.816A21.845,21.845,0,0,1,38.291,30.8" transform="translate(-16.838 -26.573)" fill="none"/>
+    </clipPath>
+    <linearGradient id="linear-gradient-3" x1="-0.513" y1="1.863" x2="-0.482" y2="1.863" xlink:href="#linear-gradient"/>
+    <clipPath id="clip-path-4">
+      <path id="Path_11" data-name="Path 11" d="M30.706,43.647c-3.432.82-6.533,1.266-9.024,1.623-1.789.257-3.359.482-4.49.768,2.04,7.124,17.14,1.8,21.9-6.072a25.616,25.616,0,0,1-8.387,3.68" transform="translate(-17.192 -39.967)" fill="none"/>
+    </clipPath>
+    <linearGradient id="linear-gradient-4" x1="-0.72" y1="1.345" x2="-0.678" y2="1.345" xlink:href="#linear-gradient"/>
+  </defs>
+  <g id="Group_3" data-name="Group 3" transform="translate(-139 -106.295)">
+    <g id="Group_2" data-name="Group 2" transform="translate(8 4)">
+      <text id="Eldoria_Authenication_Platform" data-name="Eldoria 
+Authenication Platform" transform="translate(193 130)" fill="#1c1c1c" font-size="22" font-family="Palatino-Bold, Palatino" font-weight="700"><tspan x="0" y="0">Eldoria </tspan><tspan fill="#7c7c7c" font-size="14" font-family="Roboto-Regular, Roboto" font-weight="400"><tspan x="0" y="18">Authenication Platform</tspan></tspan></text>
+    </g>
+    <g id="Group_29" data-name="Group 29" transform="translate(139 106.295)">
+      <g id="Group_22" data-name="Group 22">
+        <g id="Group_21" data-name="Group 21" clip-path="url(#clip-path)">
+          <rect id="Rectangle_16" data-name="Rectangle 16" width="52.78" height="54.482" transform="translate(0 0)" fill="url(#linear-gradient)"/>
+        </g>
+      </g>
+      <g id="Group_24" data-name="Group 24" transform="translate(15.96 3.847)">
+        <g id="Group_23" data-name="Group 23" clip-path="url(#clip-path-2)">
+          <rect id="Rectangle_17" data-name="Rectangle 17" width="37.752" height="30.798" transform="translate(0 0)" fill="url(#linear-gradient-2)"/>
+        </g>
+      </g>
+      <g id="Group_26" data-name="Group 26" transform="translate(15.441 24.369)">
+        <g id="Group_25" data-name="Group 25" clip-path="url(#clip-path-3)">
+          <rect id="Rectangle_18" data-name="Rectangle 18" width="30.129" height="16.161" transform="translate(0 0)" fill="url(#linear-gradient-3)"/>
+        </g>
+      </g>
+      <g id="Group_28" data-name="Group 28" transform="translate(15.766 36.652)">
+        <g id="Group_27" data-name="Group 27" clip-path="url(#clip-path-4)">
+          <rect id="Rectangle_19" data-name="Rectangle 19" width="21.901" height="13.196" transform="translate(0 0)" fill="url(#linear-gradient-4)"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/oidc-ui/public/variables.css b/oidc-ui/public/variables.css
index f93ad8e75..81ef0a3c2 100644
--- 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
index 91952c44f..f416b3a41 100644
--- 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"