feat: compressed theme layout

src/BrutalTheme.res

@@ -90,6 +90,11 @@ let brutalRules = (theme: CardThemeType.themeClass) =>
       "color": theme.colorText,
       "borderRadius": theme.borderRadius,
     },
+    ".Input-Compressed": {
+      "border": `0.1em solid #000000`,
+      "boxShadow": "0.12em 0.12em",
+      "color": theme.colorText,
+    },
     ".Input:-webkit-autofill": {
       "transition": "background-color 5000s ease-in-out 0s",
       "-webkitTextFillColor": `${theme.colorText} !important`,
@@ -98,6 +103,10 @@ let brutalRules = (theme: CardThemeType.themeClass) =>
       "transform": "translate(0.05em, 0.05em)",
       "boxShadow": "0.02em 0.02em",
     },
+    ".Input-Compressed:focus": {
+      "transform": "translate(0.02em, 0.02em)",
+      "boxShadow": "0.01em 0.01em",
+    },
     ".Input--invalid": {
       "border": `0.1em solid ${theme.colorDangerText}`,
       "color": theme.colorDanger,

src/CardTheme.res

@@ -20,6 +20,14 @@ let getTheme = (val, logger) => {
     }
   }
 }
+
+let getInnerLayout = str => {
+  switch str {
+  | "compressed" => Compressed
+  | _ => Spaced
+  }
+}
+
 let getShowLoader = (str, logger) => {
   switch str {
   | "auto" => Auto
@@ -38,6 +46,7 @@ let defaultAppearance = {
   componentType: "payment",
   labels: Above,
   rules: Dict.make()->JSON.Encode.object,
+  innerLayout: Spaced,
 }
 let defaultFonts = {
   cssSrc: "",
@@ -305,7 +314,12 @@ let getAppearance = (
   ->Dict.get(str)
   ->Option.flatMap(JSON.Decode.object)
   ->Option.map(json => {
-    unknownKeysWarning(["theme", "variables", "rules", "labels"], json, "appearance", ~logger)
+    unknownKeysWarning(
+      ["theme", "variables", "rules", "labels", "innerLayout"],
+      json,
+      "appearance",
+      ~logger,
+    )
 
     let rulesJson = defaultRules(getVariables("variables", json, default, logger))
 
@@ -314,6 +328,7 @@ let getAppearance = (
       componentType: getWarningString(json, "componentType", "", ~logger),
       variables: getVariables("variables", json, default, logger),
       rules: mergeJsons(rulesJson, getJsonObjectFromDict(json, "rules")),
+      innerLayout: getWarningString(json, "innerLayout", "spaced", ~logger)->getInnerLayout,
       labels: switch getWarningString(json, "labels", "above", ~logger) {
       | "above" => Above
       | "floating" => Floating

src/CharcoalTheme.res

@@ -89,6 +89,11 @@ let charcoalRules = theme =>
       "color": theme.colorText,
       "borderRadius": theme.borderRadius,
     },
+    ".Input-Compressed": {
+      "border": `1px solid ${theme.colorBackground}`,
+      "fontWeight": theme.fontWeightLight,
+      "color": theme.colorText,
+    },
     ".Input:-webkit-autofill": {
       "transition": "background-color 5000s ease-in-out 0s",
       "-webkitTextFillColor": `${theme.colorText} !important`,
@@ -97,6 +102,12 @@ let charcoalRules = theme =>
       "border": `1px solid ${theme.colorPrimary}`,
       "boxShadow": `${theme.colorPrimary}4c 0px 0px 0px 3px`,
     },
+    ".Input-Compressed:focus": {
+      "border": `2px solid ${theme.colorPrimary}`,
+      "boxShadow": `${theme.colorPrimary}4c 0px 0px 0px 2px`,
+      "position": "relative",
+      "zIndex": "2",
+    },
     ".Input--invalid": {
       "color": theme.colorDanger,
       "border": `2px solid ${theme.colorDanger}`,

src/Components/BillingNamePaymentInput.res

@@ -4,7 +4,7 @@ open Utils
 
 @react.component
 let make = (~paymentType, ~customFieldName=None, ~requiredFields as optionalRequiredFields=?) => {
-  let {localeString} = Recoil.useRecoilValueFromAtom(configAtom)
+  let {config, localeString} = Recoil.useRecoilValueFromAtom(configAtom)
   let {fields} = Recoil.useRecoilValueFromAtom(optionAtom)
   let loggerState = Recoil.useRecoilValueFromAtom(loggerAtom)
 
@@ -74,6 +74,7 @@ let make = (~paymentType, ~customFieldName=None, ~requiredFields as optionalRequ
       name="name"
       inputRef=nameRef
       placeholder
+      className={config.appearance.innerLayout === Spaced ? "" : "!border-b-0"}
     />
   </RenderIf>
 }

src/Components/DropdownField.res

@@ -14,6 +14,7 @@ let make = (
   let dropdownRef = React.useRef(Nullable.null)
   let (inputFocused, setInputFocused) = React.useState(_ => false)
   let {parentURL} = Recoil.useRecoilValueFromAtom(keys)
+  let isSpacedInnerLayout = config.appearance.innerLayout === Spaced
 
   let handleFocus = _ => {
     setInputFocused(_ => true)
@@ -42,11 +43,15 @@ let make = (
   }
 
   let floatinglabelClass = inputFocused ? "Label--floating" : "Label--resting"
+  let inputClassStyles = isSpacedInnerLayout ? "Input" : "Input-Compressed"
 
   let cursorClass = !disabled ? "cursor-pointer" : "cursor-not-allowed"
   <RenderIf condition={options->Array.length > 0}>
     <div className="flex flex-col w-full">
-      <RenderIf condition={fieldName->String.length > 0 && appearance.labels == Above}>
+      <RenderIf
+        condition={fieldName->String.length > 0 &&
+        appearance.labels == Above &&
+        isSpacedInnerLayout}>
         <div
           className={`Label `}
           style={ReactDOMStyle.make(
@@ -74,7 +79,7 @@ let make = (
           disabled={readOnly || disabled}
           onChange=handleChange
           onFocus=handleFocus
-          className={`Input ${className} w-full appearance-none outline-none ${cursorClass}`}>
+          className={`${inputClassStyles} ${className} w-full appearance-none outline-none ${cursorClass}`}>
           {options
           ->Array.mapWithIndex((item: string, i) => {
             <option key={Int.toString(i)} value=item> {React.string(item)} </option>

src/Components/DynamicFields.res

@@ -65,6 +65,7 @@ let make = (
   }, (requiredFields, isAllStoredCardsHaveName, isSavedCardFlow))
 
   let {config, themeObj, localeString} = Recoil.useRecoilValueFromAtom(configAtom)
+  let isSpacedInnerLayout = config.appearance.innerLayout === Spaced
 
   let logger = Recoil.useRecoilValueFromAtom(loggerAtom)
 
@@ -314,6 +315,9 @@ let make = (
     dynamicFieldsToRenderInsideBilling->Array.length > 0 &&
       (dynamicFieldsToRenderInsideBilling->Array.length > 1 || !isOnlyInfoElementPresent)
 
+  let spacedStylesForBiilingDetails = isSpacedInnerLayout ? "p-2" : "my-2"
+  let spacedStylesForCity = isSpacedInnerLayout ? "p-2" : ""
+
   <RenderIf condition={fieldsArr->Array.length > 0}>
     {<>
       {dynamicFieldsToRenderOutsideBilling
@@ -435,11 +439,22 @@ let make = (
               options=currencyArr
             />
           | FullName =>
-            <FullNamePaymentInput
-              paymentType
-              customFieldName={item->getCustomFieldName}
-              optionalRequiredFields={Some(requiredFields)}
-            />
+            <>
+              <div
+                style={ReactDOMStyle.make(
+                  ~marginBottom="5px",
+                  ~fontSize=themeObj.fontSizeLg,
+                  ~opacity="0.6",
+                  (),
+                )}>
+                {item->getCustomFieldName->Option.getOr("")->React.string}
+              </div>
+              <FullNamePaymentInput
+                paymentType
+                customFieldName={item->getCustomFieldName}
+                optionalRequiredFields={Some(requiredFields)}
+              />
+            </>
           | Email
           | InfoElement
           | Country
@@ -463,15 +478,26 @@ let make = (
       ->React.array}
       <RenderIf condition={isRenderDynamicFieldsInsideBilling}>
         <div
-          className="p-2 w-full text-left"
+          className={`${spacedStylesForBiilingDetails} w-full text-left`}
           style={ReactDOMStyle.make(
-            ~border=`1px solid ${themeObj.borderColor}`,
-            ~borderRadius=themeObj.borderRadius,
-            ~margin=`10px 0`,
+            ~border={isSpacedInnerLayout ? `1px solid ${themeObj.borderColor}` : ""},
+            ~borderRadius={isSpacedInnerLayout ? themeObj.borderRadius : ""},
+            ~margin={isSpacedInnerLayout ? `10px 0` : ""},
             (),
           )}>
-          {React.string(localeString.billingDetailsText)}
-          <div className="p-2 flex flex-col gap-2">
+          <div
+            style={ReactDOMStyle.make(
+              ~marginBottom="5px",
+              ~fontSize=themeObj.fontSizeLg,
+              ~opacity="0.6",
+              (),
+            )}>
+            {React.string(localeString.billingDetailsText)}
+          </div>
+          <div
+            className={`${spacedStylesForCity} flex flex-col ${isSpacedInnerLayout
+                ? "gap-2"
+                : ""}`}>
             {dynamicFieldsToRenderInsideBilling
             ->Array.mapWithIndex((item, index) => {
               <div
@@ -482,7 +508,7 @@ let make = (
                 | Email => <EmailPaymentInput paymentType />
                 | PhoneNumber => <PhoneNumberPaymentInput />
                 | StateAndCity =>
-                  <div className="flex gap-1">
+                  <div className={`flex ${isSpacedInnerLayout ? "gap-1" : ""}`}>
                     <PaymentField
                       fieldName=localeString.cityLabel
                       setValue={setCity}
@@ -507,6 +533,7 @@ let make = (
                       name="city"
                       inputRef=cityRef
                       placeholder=localeString.cityLabel
+                      className={isSpacedInnerLayout ? "" : "!border-r-0"}
                     />
                     {switch stateJson {
                     | Some(options) =>
@@ -524,14 +551,15 @@ let make = (
                     }}
                   </div>
                 | CountryAndPincode(countryArr) =>
-                  <div className="flex gap-1">
+                  <div className={`flex ${isSpacedInnerLayout ? "gap-1" : ""}`}>
                     <DropdownField
                       appearance=config.appearance
                       fieldName=localeString.countryLabel
                       value=country
                       setValue={setCountry}
                       disabled=false
                       options=countryArr
+                      className={isSpacedInnerLayout ? "" : "!border-t-0 !border-r-0"}
                     />
                     <PaymentField
                       fieldName=localeString.postalCodeLabel
@@ -549,6 +577,7 @@ let make = (
                       name="postal"
                       inputRef=postalRef
                       placeholder=localeString.postalCodeLabel
+                      className={isSpacedInnerLayout ? "" : "!border-t-0"}
                     />
                   </div>
                 | AddressLine1 =>
@@ -576,6 +605,7 @@ let make = (
                     name="line1"
                     inputRef=line1Ref
                     placeholder=localeString.line1Placeholder
+                    className={isSpacedInnerLayout ? "" : "!border-b-0"}
                   />
                 | AddressLine2 =>
                   <PaymentField

src/Components/PaymentDropDownField.res

@@ -14,6 +14,7 @@ let make = (
   let dropdownRef = React.useRef(Nullable.null)
   let (inputFocused, setInputFocused) = React.useState(_ => false)
   let {parentURL} = Recoil.useRecoilValueFromAtom(keys)
+  let isSpacedInnerLayout = config.appearance.innerLayout === Spaced
 
   let getClassName = initialLabel => {
     if value.value->String.length == 0 {
@@ -58,6 +59,7 @@ let make = (
 
   let labelClass = getClassName("Label")
   let inputClass = getClassName("Input")
+  let inputClassStyles = isSpacedInnerLayout ? "Input" : "Input-Compressed"
 
   let handleChange = ev => {
     let target = ev->ReactEvent.Form.target
@@ -74,7 +76,10 @@ let make = (
   let cursorClass = !disabled ? "cursor-pointer" : "cursor-not-allowed"
   <RenderIf condition={options->Array.length > 0}>
     <div className="flex flex-col w-full" style={ReactDOMStyle.make(~color=themeObj.colorText, ())}>
-      <RenderIf condition={fieldName->String.length > 0 && config.appearance.labels == Above}>
+      <RenderIf
+        condition={fieldName->String.length > 0 &&
+        config.appearance.labels == Above &&
+        isSpacedInnerLayout}>
         <div
           className={`Label ${labelClass} `}
           style={ReactDOMStyle.make(
@@ -102,7 +107,7 @@ let make = (
           disabled={readOnly || disabled}
           onFocus={handleFocus}
           onChange=handleChange
-          className={`Input ${inputClass} ${className} w-full appearance-none outline-none ${cursorClass}`}>
+          className={`${inputClassStyles} ${inputClass} ${className} w-full appearance-none outline-none ${cursorClass}`}>
           {options
           ->Array.mapWithIndex((item: string, i) => {
             <option key={Int.toString(i)} value=item> {React.string(item)} </option>

src/Components/PaymentField.res

@@ -21,6 +21,7 @@ let make = (
   let {themeObj} = Recoil.useRecoilValueFromAtom(configAtom)
   let {readOnly} = Recoil.useRecoilValueFromAtom(optionAtom)
   let {parentURL} = Recoil.useRecoilValueFromAtom(keys)
+  let isSpacedInnerLayout = config.appearance.innerLayout === Spaced
 
   let (inputFocused, setInputFocused) = React.useState(_ => false)
 
@@ -75,9 +76,13 @@ let make = (
   }
   let labelClass = getClassName("Label")
   let inputClass = getClassName("Input")
+  let inputClassStyles = isSpacedInnerLayout ? "Input" : "Input-Compressed"
 
   <div className="flex flex-col w-full" style={ReactDOMStyle.make(~color=themeObj.colorText, ())}>
-    <RenderIf condition={fieldName->String.length > 0 && config.appearance.labels == Above}>
+    <RenderIf
+      condition={fieldName->String.length > 0 &&
+      config.appearance.labels == Above &&
+      isSpacedInnerLayout}>
       <div
         className={`Label ${labelClass}`}
         style={ReactDOMStyle.make(
@@ -105,7 +110,7 @@ let make = (
           name
           ?maxLength
           ?pattern
-          className={`Input ${inputClass} ${className} focus:outline-none transition-shadow ease-out duration-200`}
+          className={`${inputClassStyles} ${inputClass} ${className} focus:outline-none transition-shadow ease-out duration-200`}
           placeholder={config.appearance.labels == Above || config.appearance.labels == Never
             ? placeholder
             : ""}