[ES-1908] UI fixes. (#1045)

Signed-off-by: GurukiranP <[email protected]>

oidc-ui/public/theme/variables.css

@@ -115,7 +115,7 @@
   --selected_login_id_focus_outline_color: var(--primary-color);
   --qr_code_title_color:  #696969;
   --resend_otp_button_color: var(--primary-color);
-  --login-client-logo-image-shadow: 0px 4px 15px 2px #EB6F2D4D;
+  --login-client-logo-image-shadow: 0px 4px 15px 2px #1262C94D;
   --caps-lock-text-color: #2D86BA;
   --login-header-text-color: rgb(0, 0, 0);
   --login-subheader-text-color: #838383;
@@ -245,16 +245,15 @@
 }
 
 [class="green"] {
-  --primary-color: #4CBB17;
-  --font-family: "Kantumruy Pro", sans-serif;
+  --primary-color: #32CD32;
   --login-card-box-color: #bcc0c7;
   --login-card-box-hover-color: var(--primary-color);
   --login-card-box-focus-color: var(--primary-color);
   --login-background: #f7f9fd;
   --login-background-image: url("/images/section-bg.png");
-  --login-background-min-height: calc(100vh - 157.6px) !important;
   --language-icon-color: #ffffff;
   --language-icon-bg-color: var(--primary-color);
+  --login-background-min-height: calc(100vh - 104.6px) !important;
   --brand-only-logo-url: url("/logo.png");
   --brand-logo-url: url("/images/brand_logo.png");
   --background-logo-url: url("/images/illustration_one.png");
@@ -265,9 +264,9 @@
   --primary-button-hover-color: #ffffff;
   --primary-button-hover-bg-color: var(--primary-color);
   --primary-button-hover-border-color: var(--primary-color);
-  --primary-button-disable-color: #94a3b8;
-  --primary-button-disable-bg-color: #ffffff;
-  --primary-button-disable-border-color: #94a3b8;
+  --primary-button-disable-color: #ffffff;
+  --primary-button-disable-bg-color: #cbcbcb;
+  --primary-button-disable-border-color: #cbcbcb;
   --secondary-button-color: green;
   --secondary-button-bg-color: #ffffff;
   --secondary-button-border-color: #ffffff;
@@ -284,27 +283,26 @@
   --info-icon-color: var(--primary-color);
   --toggle-button-inactive-bg-color: #ffffff;
   --toggle-button-inactive-border-color: #d8d8d8;
-  --toggle-button-active-bg-color: #ffffff;
-  --toggle-button-active-border-color: var(--primary-color);
-  --toggle-button-inactive-ball-color: #a7a8a9;
-  --toggle-button-inactive-ball-border-color: #a7a8a9;
+  --toggle-button-active-bg-color: #ffdecc;
+  --toggle-button-active-border-color: #ffffff;
+  --toggle-button-inactive-ball-color: #cbcbcb;
+  --toggle-button-inactive-ball-border-color: #cbcbcb;
   --toggle-button-active-ball-color: var(--primary-color);
   --toggle-button-active-ball-border-color: var(--primary-color);
   --toggle-button-ring-color: var(--primary-color);
-  --header-height: 70px;
-  --footer-height: 56px;
-  --signup-banner-background-color: #90EE90;
-  --signup-banner-bottom-radius: 20px;
+  --header-height: 55px;
+  --footer-height: 47px;
+  --signup-banner-background-color: #98FB98;
+  --signup-banner-bottom-radius: 10px;
   --signup-banner-padding-top: 20px;
   --signup-banner-padding-bottom: 20px;
   --signup-banner-margin-top: 16px;
   --signup-banner-signup-url-color: green;
   --signup-banner-signup-url-color-hover: var(--primary-color);
   --signup-banner-signup-url-color-focus: var(--primary-color);
-  --signup-banner-font: normal normal normal 15px/19px "Kantumruy Pro";
+  --signup-banner-font: normal normal normal 15px/19px Roboto;
   --multipurpose-login-card-border-radius: 20px;
   --multipurpose-login-card-background-color: #ffffff;
-  --side-section-bg-with: 226px;
   --top-left-bg-logo-url: url("/images/top_left_bg_logo.svg");
   --top-left-bg-logo-display: block;
   --bottom-left-bg-logo-url: url("/images/bg_bottom_left.png");
@@ -315,14 +313,14 @@
   --bottom-right-bg-logo-display: block;
   --login-client-logo-image-height: 3.25rem;
   --login-client-logo-image-width: 3.25rem;
-  --login-alternate-arrow: "\21CB";
-  --login-alternate-arrow-size: 3rem;
+  --login-alternate-arrow: "\21C4";
+  --login-alternate-arrow-size: 1.5rem;
   --login-text-color: #000000;
   --login-card-separator: linear-gradient(0deg, #ffffff 0%, #f7fcff 100%);
-  --login-card-separator-height: 20px;
-  --footer-text-color: #ffffff;
+  --login-card-separator-height: 1px;
+  --footer-text-color: #898989;
   --footer-text-size: 14px;
-  --footer-bg-color: var(--primary-color);
+  --footer-bg-color: #ffffff;
   --language-check-icon-color: var(--primary-color);
   --forgot-password-color: var(--primary-color);
   --forgot-password-font-size: small;
@@ -369,7 +367,7 @@
   --selected_login_id_focus_outline_color: var(--primary-color);
   --qr_code_title_color:  #696969;
   --resend_otp_button_color: var(--primary-color);
-  --login-client-logo-image-shadow: 0px 4px 15px 2px #EB6F2D4D;
+  --login-client-logo-image-shadow: 0px 4px 15px 2px #32CD324D;
   --caps-lock-text-color: #2D86BA;
   --login-header-text-color: rgb(0, 0, 0);
   --login-subheader-text-color: #838383;

oidc-ui/src/components/OtpVerify.js

@@ -405,7 +405,7 @@ export default function OtpVerify({
         )}
 
         <FormAction
-          disabled={otpValue.length !== otpLength}
+          disabled={otpValue.length !== otpLength || status.state === states.LOADING}
           type={buttonTypes.submit}
           text={t1("verify")}
           id="verify_otp"