Add more fixes based on requested changes

Author: deepjyoti30-st

lib/ts/recipe/webauthn/components/themes/signUp/featureBlocks.tsx

@@ -21,13 +21,23 @@ import { useTranslation } from "../../../../../translation/translationContext";
 
 import type { FeatureBlockDetailProps } from "../../../types";
 
-enum FeatureBlockIcon {
-    FingerPrint,
-    MultipleDevices,
-    Security,
-}
-
-const featureBlockIcons = [FingerPrintIcon, MultipleDevicesIcon, SecurityIcon];
+const blockDetails = [
+    {
+        title: "WEBAUTHN_FEATURE_BLOCK_NO_NEED_TO_REMEMBER_PASSWORD",
+        subText: "WEBAUTHN_FEATURE_BLOCK_NO_NEED_TO_REMEMBER_PASSWORD_DETAIL",
+        icon: <FingerPrintIcon />,
+    },
+    {
+        title: "WEBAUTHN_FEATURE_BLOCK_WORKS_ON_ALL_DEVICES",
+        subText: "WEBAUTHN_FEATURE_BLOCK_WORKS_ON_ALL_DEVICES_DETAIL",
+        icon: <MultipleDevicesIcon />,
+    },
+    {
+        title: "WEBAUTHN_FEATURE_BLOCK_KEEP_ACCOUNT_SAFER",
+        subText: "WEBAUTHN_FEATURE_BLOCK_KEEP_ACCOUNT_SAFER_DETAIL",
+        icon: <SecurityIcon />,
+    },
+];
 
 export const PasskeyFeatureBlock = withOverride(
     "PasskeyFeatureBlock",
@@ -46,27 +56,9 @@ export const PasskeyFeatureBlock = withOverride(
 );
 
 export const PasskeyFeatureBlocks = withOverride("PasskeyFeatureBlocks", function PasskeyFeatureBlocks(): JSX.Element {
-    const blockDetails: Record<FeatureBlockIcon, FeatureBlockDetailProps> = {
-        [FeatureBlockIcon.FingerPrint]: {
-            title: "WEBAUTHN_FEATURE_BLOCK_NO_NEED_TO_REMEMBER_PASSWORD",
-            subText: "WEBAUTHN_FEATURE_BLOCK_NO_NEED_TO_REMEMBER_PASSWORD_DETAIL",
-            icon: featureBlockIcons[0](),
-        },
-        [FeatureBlockIcon.MultipleDevices]: {
-            title: "WEBAUTHN_FEATURE_BLOCK_WORKS_ON_ALL_DEVICES",
-            subText: "WEBAUTHN_FEATURE_BLOCK_WORKS_ON_ALL_DEVICES_DETAIL",
-            icon: featureBlockIcons[1](),
-        },
-        [FeatureBlockIcon.Security]: {
-            title: "WEBAUTHN_FEATURE_BLOCK_KEEP_ACCOUNT_SAFER",
-            subText: "WEBAUTHN_FEATURE_BLOCK_KEEP_ACCOUNT_SAFER_DETAIL",
-            icon: featureBlockIcons[2](),
-        },
-    };
-
     return (
         <div data-supertokens="passkeyFeatureBlocksContainer">
-            {Object.values(blockDetails).map((blockDetail) => (
+            {blockDetails.forEach((blockDetail) => (
                 <PasskeyFeatureBlock {...blockDetail} />
             ))}
         </div>

lib/ts/recipe/webauthn/components/themes/styles.css

@@ -14,7 +14,6 @@
 }
 
 [data-supertokens~="continueWithoutPasskey"] [data-supertokens~="continueWithoutPasskeyLabel"] {
-    font-family: Arial;
     font-size: 14px;
     font-weight: 700;
     line-height: 21px;
@@ -29,7 +28,6 @@
     padding: 14px;
     background: #ff95001a;
     color: #7c603e;
-    font-family: Arial;
     font-size: 14px;
     font-weight: 400;
     line-height: 20px;
@@ -47,7 +45,6 @@
 [data-supertokens~="passkeyConfirmationContainer"]
     [data-supertokens~="passkeyConfirmationEmailContainer"]
     [data-supertokens~="continueWithLabel"] {
-    font-family: Arial;
     font-size: 12px;
     font-weight: 400;
     line-height: 13.8px;
@@ -60,7 +57,6 @@
 [data-supertokens~="passkeyConfirmationContainer"]
     [data-supertokens~="passkeyConfirmationEmailContainer"]
     [data-supertokens~="enteredEmailId"] {
-    font-family: Arial;
     font-size: 14px;
     font-weight: 700;
     line-height: 16.1px;
@@ -91,7 +87,6 @@
     [data-supertokens~="passkeyFeatureBlock"]
     [data-supertokens~="passkeyFeatureBlockDetails"]
     [data-supertokens~="passkeyFeatureBlockTitle"] {
-    font-family: Arial;
     font-size: 14px;
     font-weight: 700;
     line-height: 16.1px;
@@ -106,7 +101,6 @@
     [data-supertokens~="passkeyFeatureBlock"]
     [data-supertokens~="passkeyFeatureBlockDetails"]
     [data-supertokens~="passkeyFeatureBlockSubText"] {
-    font-family: Arial;
     font-size: 12px;
     font-weight: 400;
     line-height: 13.8px;
@@ -123,7 +117,6 @@
     background-color: #fceaeb;
     color: #cf3644;
     padding: 10px;
-    font-family: Arial;
     font-size: 14px;
     font-weight: 400;
     line-height: 16.59px;
@@ -140,7 +133,6 @@
     [data-supertokens~="somethingWentWrongErrorDetailsContainer"]
     [data-supertokens~="label"] {
     margin-top: 4px;
-    font-family: Arial;
     font-size: 24px;
     font-weight: 500;
     line-height: 40px;
@@ -154,7 +146,6 @@
 [data-supertokens~="somethingWentWrongContainer"]
     [data-supertokens~="somethingWentWrongErrorDetailsContainer"]
     [data-supertokens~="errorDetails"] {
-    font-family: Arial;
     font-size: 14px;
     font-weight: 400;
     line-height: 21px;
@@ -172,7 +163,6 @@
 [data-supertokens~="somethingWentWrongContainer"]
     [data-supertokens~="goBackButtonContainer"]
     [data-supertokens~="errorGoBackLabel"] {
-    font-family: Arial;
     font-size: 14px;
     font-weight: 500;
     line-height: 21px;
@@ -197,7 +187,6 @@
     [data-supertokens~="passkeyRecoverAccountFormSubHeader"] {
     width: 75%;
     margin: 0 auto;
-    font-family: Arial;
     font-size: 14px;
     font-weight: 400;
     line-height: 16.1px;
@@ -214,7 +203,6 @@
 
 [data-supertokens~="passkeyEmailSentContainer"] [data-supertokens~="emailSentDescription"] {
     margin: 0 auto;
-    font-family: Arial;
     font-size: 14px;
     font-weight: 400;
     line-height: 16.1px;
@@ -234,7 +222,6 @@
     [data-supertokens~="header"]
     [data-supertokens~="headerText"] {
     margin-top: 20px;
-    font-family: Poppins;
     font-size: 20px;
     font-weight: 700;
     line-height: 30px;

lib/ts/recipe/webauthn/components/themes/translations.ts

@@ -23,7 +23,7 @@ export const defaultTranslationsWebauthn = {
             "The request either timed out, was canceled or the device is already registered. Please try again or try using another device.",
         WEBAUTHN_ERROR_GO_BACK_BUTTON_LABEL: "Go back",
         WEBAUTHN_UNRECOVERABLE_ERROR: "Something went wrong",
-        WEBAUTHN_UNRECOVERABLE_ERROR_DETAILS: "something went wrong with your current session. please try again.",
+        WEBAUTHN_UNRECOVERABLE_ERROR_DETAILS: "Something went wrong with your current session. please try again.",
         WEBAUTHN_EMAIL_SENT_LABEL: "Email sent",
         WEBAUTHN_EMAIL_SENT_LABEL_PRE_EMAIL: "Account recovery email has been sent to ",
         WEBAUTHN_EMAIL_SENT_LABEL_POST_EMAIL: ", if it exists in our system.",