feat: add CSS rules for SavedCardItem and CVC input

Author: aritro2002

src/Components/PaymentInputField.res

@@ -24,6 +24,7 @@ let make = (
   ~paymentType=?,
   ~isDisabled=false,
   ~autocomplete="on",
+  ~isSavedCardCVC=false,
 ) => {
   let {themeObj, config} = Recoil.useRecoilValueFromAtom(configAtom)
   let {innerLayout} = config.appearance
@@ -81,9 +82,16 @@ let make = (
     }
   }
   let labelClass = getClassName("Label")
-  let inputClass = getClassName("Input")
+  let inputClass =
+    (isSavedCardCVC ? getClassName("Input--saved-cvc") ++ " " : "") ++ getClassName("Input")
+
   let inputLogoClass = getClassName("InputLogo")
-  let inputClassStyles = innerLayout === Spaced ? "Input" : "Input-Compressed"
+  let inputClassStyles =
+    (
+      isSavedCardCVC
+        ? (innerLayout === Spaced ? "Input--saved-cvc" : "Input-Compressed--saved-cvc") ++ " "
+        : ""
+    ) ++ (innerLayout === Spaced ? "Input" : "Input-Compressed")
 
   <div className="flex flex-col w-full" style={color: themeObj.colorText}>
     <RenderIf

src/Components/SavedCardItem.res

@@ -209,7 +209,7 @@ let make = (
             <div className="flex flex-col items-start mx-8">
               <RenderIf condition={isActive && isRenderCvv}>
                 <div
-                  className={`flex flex-row items-start justify-start gap-2`}
+                  className={`flex flex-row items-start justify-start gap-2 SavedCardItem`}
                   style={fontSize: "14px", opacity: "0.5"}>
                   <div className="tracking-widest w-12 mt-6">
                     {React.string(`${localeString.cvcTextLabel}: `)}
@@ -234,6 +234,7 @@ let make = (
                       height="1.8rem"
                       name={TestUtils.cardCVVInputTestId}
                       autocomplete="cc-csc"
+                      isSavedCardCVC=true
                     />
                   </div>
                 </div>