Merge pull request #2155 from Web3Auth/fix/logo-ui

Connected logo fix

Author: chaitanyapotti

demo/vue-app-new/package-lock.json

@@ -45,15 +45,15 @@ function OtpInput(props: OtpInputProps) {
       </div>
       <div className="-w3a--mt-10 w3a--flex w3a--size-full w3a--flex-1 w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-4">
         <img src={getIcons(isMobileOtp ? "sms-otp-light" : "email-otp-light")} alt="otp" className="w3a--size-auto" />
-        <div className="-w3a--mt-6 w3a--flex w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-2">
+        <div className="w3a--mx-auto -w3a--mt-6 w3a--flex w3a--w-full w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-2">
           <p className="w3a--text-lg w3a--font-bold w3a--text-app-gray-900 dark:w3a--text-app-white">
             {isMobileOtp ? t("modal.otp.mobile-title") : t("modal.otp.email-title")}
           </p>
-          <div className="w3a--flex w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-1">
-            <p className="w3a--text-sm w3a--font-normal w3a--text-app-gray-500 dark:w3a--text-app-gray-300">
+          <div className="w3a--mx-auto w3a--flex w3a--w-full w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-1">
+            <p className="w3a--text-center w3a--text-sm w3a--font-normal w3a--text-app-gray-500 dark:w3a--text-app-gray-300">
               {isMobileOtp ? t("modal.otp.mobile-subtext") : t("modal.otp.email-subtext")}
             </p>
-            <p className="w3a--text-sm w3a--font-normal w3a--text-app-gray-500 dark:w3a--text-app-gray-300">
+            <p className="w3a--text-center w3a--text-sm w3a--font-normal w3a--text-app-gray-500 dark:w3a--text-app-gray-300">
               {isMobileOtp ? parsedLoginHint : t("modal.otp.email-subtext-example", { email: parsedLoginHint })}
             </p>
           </div>

packages/modal/src/ui/components/Login/LoginOtp/LoginOtp.tsx

@@ -57,6 +57,10 @@
     @apply w3a--w-[98%];
   }
 
+  .w3a--connected-logo {
+    @apply w3a--size-16 w3a--text-app-green-500 dark:w3a--text-app-green-400;
+  }
+
   .w3a--error-logo {
     @apply w3a--w-16 w3a--h-16 w3a--text-app-red-500 dark:w3a--text-app-red-400;
   }