chore: new rules for customization (#936)

Author: aritro2002

public/icons/orca.svg

@@ -3,17 +3,18 @@ let make = () => {
   let {themeObj, localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
   let selectedOption =
     Recoil.useRecoilValueFromAtom(RecoilAtoms.selectedOptionAtom)->PaymentModeType.paymentMode
-  <div className="flex flex-row w-full pr-3 gap-3" style={color: themeObj.colorText}>
+  <div
+    className="InfoElement flex flex-row w-full pr-3 gap-3"
+    style={
+      color: themeObj.colorText,
+      fontSize: themeObj.fontSizeLg,
+      opacity: "60%",
+      fontWeight: themeObj.fontWeightLight,
+    }>
     <div>
       <Icon name="redirect" size=55 shouldMirrorIcon={localeString.localeDirection === "rtl"} />
     </div>
-    <div
-      className="self-center"
-      style={
-        fontSize: themeObj.fontSizeLg,
-        opacity: "60%",
-        fontWeight: themeObj.fontWeightLight,
-      }>
+    <div className="self-center">
       {switch selectedOption {
       | ACHTransfer
       | BacsTransfer

src/Components/InfoElement.res

@@ -3,7 +3,8 @@ let make = () => {
   let {localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
   <div className="w-full w-max-[750px] relative flex flex-row my-4 " ariaHidden=true>
     <div className="relative top-[50%] h-[1px] bg-gray-400  w-full self-center" />
-    <div className="relative min-w-fit px-5 text-sm text-gray-400 flex justify-center">
+    <div
+      className="OrPayUsingLabel relative min-w-fit px-5 text-sm text-gray-400 flex justify-center">
       {React.string(localeString.orPayUsing)}
     </div>
     <div className="relative top-[50%] h-[1px] bg-gray-400 w-full self-center" />

src/Components/Or.res

@@ -18,7 +18,9 @@ let make = (~mode: PaymentModeType.payment) => {
   let (termsText, showTerm) = terms
 
   <RenderIf condition={showTerm == Auto || showTerm == Always}>
-    <div className="opacity-50 text-xs mb-2 text-left" style={color: themeObj.colorText}>
+    <div
+      className="TermsTextLabel opacity-50 text-xs mb-2 text-left"
+      style={color: themeObj.colorText}>
       {React.string(termsText)}
     </div>
   </RenderIf>