IO-3624 Refresh shop config list rows and color UX

client/src/components/layout-form-row/layout-form-row.component.jsx

@@ -7,32 +7,37 @@ export default function LayoutFormRow({
   children,
   grow = false,
   noDivider = false,
-  gutter = [16, 16], // Responsive gutter: horizontal, vertical
+  gutter,
   rowProps,
 
   // Optional overrides if you ever need per-section customization
   surface = true,
   surfaceBg,
   surfaceHeaderBg,
+  surfaceBorderColor,
 
   ...cardProps
 }) {
   const items = Children.toArray(children).filter(Boolean);
   if (items.length === 0) return null;
+  const isCompactRow = noDivider;
 
   const title = !noDivider && header ? header : undefined;
+  const resolvedGutter = gutter ?? [16, isCompactRow ? 8 : 16];
 
   const bg = surfaceBg ?? (surface ? "var(--imex-form-surface)" : undefined);
   const headBg = surfaceHeaderBg ?? (surface ? "var(--imex-form-surface-head)" : undefined);
+  const borderColor = surfaceBorderColor ?? (surface ? "var(--imex-form-surface-border)" : undefined);
 
   const mergedStyles = mergeSemanticStyles(
     {
       header: {
-        paddingInline: 16,
-        background: headBg
+        paddingInline: isCompactRow ? 12 : 16,
+        background: headBg,
+        borderBottomColor: borderColor
       },
       body: {
-        padding: 16,
+        padding: isCompactRow ? 12 : 16,
         background: bg
       }
     },
@@ -40,8 +45,9 @@ export default function LayoutFormRow({
   );
 
   const baseCardStyle = {
-    marginBottom: ".8rem",
+    marginBottom: isCompactRow ? "8px" : ".8rem",
     ...(bg ? { background: bg } : null), // ensures the “circled area” is tinted
+    ...(borderColor ? { borderColor } : null),
     ...cardProps.style
   };
 
@@ -53,7 +59,9 @@ export default function LayoutFormRow({
         title={cardProps.title ?? title}
         size={cardProps.size ?? "small"}
         variant={cardProps.variant ?? "outlined"}
-        className={["imex-form-row", cardProps.className].filter(Boolean).join(" ")}
+        className={["imex-form-row", isCompactRow ? "imex-form-row--compact" : null, cardProps.className]
+          .filter(Boolean)
+          .join(" ")}
         style={baseCardStyle}
         styles={mergedStyles}
       >
@@ -128,11 +136,13 @@ export default function LayoutFormRow({
       title={cardProps.title ?? title}
       size={cardProps.size ?? "small"}
       variant={cardProps.variant ?? "outlined"}
-      className={["imex-form-row", cardProps.className].filter(Boolean).join(" ")}
+      className={["imex-form-row", isCompactRow ? "imex-form-row--compact" : null, cardProps.className]
+        .filter(Boolean)
+        .join(" ")}
       style={baseCardStyle}
       styles={mergedStyles}
     >
-      <Row gutter={gutter} wrap {...rowProps}>
+      <Row gutter={resolvedGutter} wrap {...rowProps}>
         {items.map((child, idx) => (
           <Col key={child?.key ?? idx} {...getColPropsForChild(child)}>
             {child}