refactor: review comments addressed

src/CardSchemeComponent.res

@@ -11,9 +11,7 @@ module CoBadgeCardSchemeDropDown = {
       <option disabled=true> {"Select a card brand"->React.string} </option>
       {eligibleCardSchemes
       ->Array.mapWithIndex((item, i) => {
-        <option key={Int.toString(i)} value=item className="opacity-0 w-0 h-0">
-          {item->React.string}
-        </option>
+        <option key={Int.toString(i)} value=item> {item->React.string} </option>
       })
       ->React.array}
     </select>
@@ -24,8 +22,6 @@ module CoBadgeCardSchemeDropDown = {
 let make = (~cardNumber, ~paymentType, ~cardBrand, ~setCardBrand) => {
   let cardType = React.useMemo1(_ => cardBrand->CardUtils.getCardType, [cardBrand])
   let animate = cardType == NOTFOUND ? "animate-slideLeft" : "animate-slideRight"
-  let isCardCoBadged = Recoil.useRecoilValueFromAtom(RecoilAtoms.isCardCoBadged)
-  let setIsCardCoBadged = Recoil.useSetRecoilState(RecoilAtoms.isCardCoBadged)
   let cardBrandIcon = React.useMemo1(
     _ => CardUtils.getCardBrandIcon(cardType, paymentType),
     [cardBrand],
@@ -42,12 +38,11 @@ let make = (~cardNumber, ~paymentType, ~cardBrand, ~setCardBrand) => {
     ~enabledCardSchemes,
   )
 
-  React.useEffect1(() => {
-    setIsCardCoBadged(_ => eligibleCardSchemes->Array.length > 1)
-    None
-  }, [[eligibleCardSchemes]])
+  let isCardCoBadged = eligibleCardSchemes->Array.length > 1
 
-  <div className={`${animate} flex items-center`}>
+  let marginLeft = isCardCoBadged ? "-ml-2" : ""
+
+  <div className={`${animate} flex items-center ${marginLeft} hellow-rodl`}>
     cardBrandIcon
     <RenderIf condition={isCardCoBadged}>
       <CoBadgeCardSchemeDropDown eligibleCardSchemes setCardBrand />

src/Components/PaymentInputField.res

@@ -20,7 +20,6 @@ let make = (
   ~placeholder="",
   ~appearance: CardThemeType.appearance,
   ~className="",
-  ~rightIconClassName="-ml-10",
   ~inputRef,
 ) => {
   let {themeObj, config} = Recoil.useRecoilValueFromAtom(configAtom)
@@ -132,7 +131,7 @@ let make = (
           </div>
         </RenderIf>
       </div>
-      <div className={`relative flex ${rightIconClassName} items-center`}> {rightIcon} </div>
+      <div className="relative flex -ml-10 items-center"> {rightIcon} </div>
     </div>
     <RenderIf condition={innerLayout === Spaced}>
       {switch errorString {

src/Payments/CardPayment.res

@@ -20,7 +20,6 @@ let make = (
   let options = Recoil.useRecoilValueFromAtom(RecoilAtoms.optionAtom)
   let loggerState = Recoil.useRecoilValueFromAtom(RecoilAtoms.loggerAtom)
   let paymentMethodListValue = Recoil.useRecoilValueFromAtom(PaymentUtils.paymentMethodListValue)
-  let isCardCoBadged = Recoil.useRecoilValueFromAtom(RecoilAtoms.isCardCoBadged)
 
   let (nickname, setNickname) = React.useState(_ => "")
 
@@ -219,7 +218,6 @@ let make = (
     !isBancontact
 
   let nicknameFieldClassName = conditionsForShowingSaveCardCheckbox ? "pt-2" : "pt-5"
-  let cardInputRightIconClassName = isCardCoBadged ? "-ml-12" : "-ml-10"
 
   let compressedLayoutStyleForCvcError =
     innerLayout === Compressed && cvcError->String.length > 0 ? "!border-l-0" : ""
@@ -258,7 +256,6 @@ let make = (
                 ? "border-b-0"
                 : ""}
               name=TestUtils.cardNoInputTestId
-              rightIconClassName=cardInputRightIconClassName
             />
             <div
               className="flex flex-row w-full place-content-between"

src/Utilities/RecoilAtoms.res

@@ -73,7 +73,6 @@ let userVpaId = Recoil.atom("userVpaId", defaultFieldValues)
 let userPixKey = Recoil.atom("userPixKey", defaultFieldValues)
 let userPixCPF = Recoil.atom("userPixCPF", defaultFieldValues)
 let userPixCNPJ = Recoil.atom("userPixCNPJ", defaultFieldValues)
-let isCardCoBadged = Recoil.atom("isCardCoBadged", false)
 
 type areOneClickWalletsRendered = {
   isGooglePay: bool,