From aad6fa488ade17bf38ffde125e66e4e2fa726d82 Mon Sep 17 00:00:00 2001
From: Illia Rudniev <cheskmr@gmail.com>
Date: Sun, 20 Oct 2024 12:05:16 +0300
Subject: [PATCH] Illiar/kyb/UI fixes (#2784)

* fix: fixed placeholder & labels on checkboxes

* fix: fixed various ui bugs

* fix: removed log

---------

Co-authored-by: Alon Peretz <8467965+alonp99@users.noreply.github.com>
---
 apps/kyb-app/CHANGELOG.md                              |  1 +
 apps/kyb-app/package.json                              |  2 +-
 .../JSONForm/components/CheckboxList/CheckboxList.tsx  |  2 +-
 .../JSONForm/components/RadioInput/RadioInput.tsx      |  2 +-
 .../JSONForm/components/TagsInput/TagsInput.tsx        |  4 ++++
 .../JSONForm/helpers/createFormSchemaFromUIElements.ts |  5 ++++-
 packages/react-pdf-toolkit/CHANGELOG.md                |  7 +++++++
 packages/react-pdf-toolkit/package.json                |  4 ++--
 packages/ui/CHANGELOG.md                               |  6 ++++++
 packages/ui/package.json                               |  2 +-
 .../ui/src/components/atoms/inputs/Input/Input.tsx     |  2 +-
 .../src/components/atoms/inputs/TextArea/TextArea.tsx  |  2 +-
 .../inputs/AutocompleteInput/AutocompleteInput.tsx     |  8 +++++++-
 .../inputs/DatePickerInput/DatePickerInput.tsx         |  8 +++++++-
 .../molecules/inputs/DropdownInput/DropdownInput.tsx   | 10 ++++++++--
 .../components/molecules/inputs/DropdownInput/types.ts |  1 +
 .../molecules/inputs/MultiSelect/MultiSelect.tsx       |  6 ++++--
 .../organisms/DynamicForm/DynamicForm.stories.tsx      |  3 +++
 .../AutocompleteTextInputAdapter.tsx                   |  1 +
 .../BooleanFieldAdapter/BooleanFieldAdapter.tsx        |  4 ++--
 .../DateInputAdapter/DateInputAdapter.tsx              |  1 +
 .../MultiselectInputAdapter.tsx                        |  2 ++
 .../RadioInputAdapter/RadioInputAdapter.tsx            |  8 ++++++--
 .../components/SelectField/SelectField.tsx             |  1 +
 .../components/TextField/TextField.tsx                 | 10 ++++++++--
 .../layouts/ArrayFieldsLayout/ArrayFieldsLayout.tsx    |  2 +-
 pnpm-lock.yaml                                         |  4 ++--
 services/workflows-service/prisma/data-migrations      |  2 +-
 28 files changed, 85 insertions(+), 25 deletions(-)

diff --git a/apps/kyb-app/CHANGELOG.md b/apps/kyb-app/CHANGELOG.md
index 8ae5dc540c..dae400b58b 100644
--- a/apps/kyb-app/CHANGELOG.md
+++ b/apps/kyb-app/CHANGELOG.md
@@ -21,6 +21,7 @@
 ### Patch Changes
 
 - Updated dependencies
+  - @ballerine/ui@0.5.39
   - @ballerine/common@0.9.41
   - @ballerine/workflow-browser-sdk@0.6.53
 
diff --git a/apps/kyb-app/package.json b/apps/kyb-app/package.json
index 6e4598c8ae..8c1576046c 100644
--- a/apps/kyb-app/package.json
+++ b/apps/kyb-app/package.json
@@ -16,8 +16,8 @@
   },
   "dependencies": {
     "@ballerine/blocks": "0.2.23",
+    "@ballerine/ui": "0.5.39",
     "@ballerine/common": "^0.9.43",
-    "@ballerine/ui": "0.5.38",
     "@ballerine/workflow-browser-sdk": "0.6.55",
     "@lukemorales/query-key-factory": "^1.0.3",
     "@radix-ui/react-icons": "^1.3.0",
diff --git a/apps/kyb-app/src/components/organisms/UIRenderer/elements/JSONForm/components/CheckboxList/CheckboxList.tsx b/apps/kyb-app/src/components/organisms/UIRenderer/elements/JSONForm/components/CheckboxList/CheckboxList.tsx
index 1d83dcf4e3..8a79d370d2 100644
--- a/apps/kyb-app/src/components/organisms/UIRenderer/elements/JSONForm/components/CheckboxList/CheckboxList.tsx
+++ b/apps/kyb-app/src/components/organisms/UIRenderer/elements/JSONForm/components/CheckboxList/CheckboxList.tsx
@@ -22,7 +22,7 @@ export const CheckboxList = (props: WithTestId<RJSFInputProps>) => {
       {options.map(option => (
         <label className="flex items-center gap-2" key={option.value}>
           <Checkbox
-            className="border-secondary data-[state=checked]:bg-secondary data-[state=checked]:text-secondary-foreground bg-white"
+            className="border bg-white data-[state=checked]:bg-white data-[state=checked]:text-black"
             color="primary"
             value={option.value}
             checked={Array.isArray(formData) && formData.includes(option.value)}
diff --git a/apps/kyb-app/src/components/organisms/UIRenderer/elements/JSONForm/components/RadioInput/RadioInput.tsx b/apps/kyb-app/src/components/organisms/UIRenderer/elements/JSONForm/components/RadioInput/RadioInput.tsx
index 5f9dc6dde2..431ff04399 100644
--- a/apps/kyb-app/src/components/organisms/UIRenderer/elements/JSONForm/components/RadioInput/RadioInput.tsx
+++ b/apps/kyb-app/src/components/organisms/UIRenderer/elements/JSONForm/components/RadioInput/RadioInput.tsx
@@ -30,7 +30,7 @@ export const RadioInputAdapter: RJSFInputAdapter<string> = ({
           data-testid={testId ? `${testId}-radio-group-item` : undefined}
         >
           <RadioGroupItem
-            className="border-secondary text-black"
+            className="border-secondary bg-white text-black"
             value={value}
             id={`radio-group-item-${value}`}
           ></RadioGroupItem>
diff --git a/apps/kyb-app/src/components/organisms/UIRenderer/elements/JSONForm/components/TagsInput/TagsInput.tsx b/apps/kyb-app/src/components/organisms/UIRenderer/elements/JSONForm/components/TagsInput/TagsInput.tsx
index e212c7dbce..d4a06d49a4 100644
--- a/apps/kyb-app/src/components/organisms/UIRenderer/elements/JSONForm/components/TagsInput/TagsInput.tsx
+++ b/apps/kyb-app/src/components/organisms/UIRenderer/elements/JSONForm/components/TagsInput/TagsInput.tsx
@@ -33,6 +33,10 @@ export const TagsInput: FunctionComponent<ITagsInputProps> = ({
       setActiveTagIndex={setActiveTagIndex}
       placeholder={uiSchema?.['ui:placeholder']}
       addTagsOnBlur
+      styleClasses={{
+        input:
+          'border-none outline-none focus:outline-none focus:ring-0 shadow-none placeholder:text-muted-foreground',
+      }}
     />
   );
 };
diff --git a/apps/kyb-app/src/components/organisms/UIRenderer/elements/JSONForm/helpers/createFormSchemaFromUIElements.ts b/apps/kyb-app/src/components/organisms/UIRenderer/elements/JSONForm/helpers/createFormSchemaFromUIElements.ts
index a37476776c..5ccf4c794c 100644
--- a/apps/kyb-app/src/components/organisms/UIRenderer/elements/JSONForm/helpers/createFormSchemaFromUIElements.ts
+++ b/apps/kyb-app/src/components/organisms/UIRenderer/elements/JSONForm/helpers/createFormSchemaFromUIElements.ts
@@ -79,7 +79,10 @@ export const createFormSchemaFromUIElements = (
 
       uiSchema.items[uiElement.name] = {
         ...uiElement?.options?.uiSchema,
-        'ui:label': Boolean(uiElement?.options?.label),
+        'ui:label':
+          (uiElement.options?.uiSchema || {})['ui:label'] === undefined
+            ? Boolean(uiElement?.options?.label)
+            : (uiElement.options?.uiSchema || {})['ui:label'],
         'ui:placeholder': uiElement?.options?.hint,
       };
     });
diff --git a/packages/react-pdf-toolkit/CHANGELOG.md b/packages/react-pdf-toolkit/CHANGELOG.md
index a75c807102..57deb448f1 100644
--- a/packages/react-pdf-toolkit/CHANGELOG.md
+++ b/packages/react-pdf-toolkit/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @ballerine/react-pdf-toolkit
 
+## 1.2.39
+
+### Patch Changes
+
+- Updated dependencies
+  - @ballerine/ui@0.5.39
+
 ## 1.2.38
 
 ### Patch Changes
diff --git a/packages/react-pdf-toolkit/package.json b/packages/react-pdf-toolkit/package.json
index 7e5a69757b..6cccec7e73 100644
--- a/packages/react-pdf-toolkit/package.json
+++ b/packages/react-pdf-toolkit/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@ballerine/react-pdf-toolkit",
   "private": false,
-  "version": "1.2.38",
+  "version": "1.2.39",
   "types": "./dist/build.d.ts",
   "main": "./dist/react-pdf-toolkit.js",
   "module": "./dist/react-pdf-toolkit.mjs",
@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@ballerine/config": "^1.1.21",
-    "@ballerine/ui": "0.5.38",
+    "@ballerine/ui": "0.5.39",
     "@react-pdf/renderer": "^3.1.14",
     "@sinclair/typebox": "^0.31.7",
     "ajv": "^8.12.0",
diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md
index e720ed49a2..24c7d113eb 100644
--- a/packages/ui/CHANGELOG.md
+++ b/packages/ui/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @ballerine/ui
 
+## 0.5.39
+
+### Patch Changes
+
+- Fixed styles in dynamic form
+
 ## 0.5.38
 
 ### Patch Changes
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 89610bd6b4..d049d40945 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@ballerine/ui",
   "private": false,
-  "version": "0.5.38",
+  "version": "0.5.39",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
diff --git a/packages/ui/src/components/atoms/inputs/Input/Input.tsx b/packages/ui/src/components/atoms/inputs/Input/Input.tsx
index 416007800b..24b1a1cdf1 100644
--- a/packages/ui/src/components/atoms/inputs/Input/Input.tsx
+++ b/packages/ui/src/components/atoms/inputs/Input/Input.tsx
@@ -9,7 +9,7 @@ const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLI
       <input
         type={type}
         className={ctw(
-          'border-input bg-background !placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border  px-2 py-1.5 align-middle text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
+          'border-input bg-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border  px-2 py-1.5 align-middle text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
           className,
         )}
         ref={ref}
diff --git a/packages/ui/src/components/atoms/inputs/TextArea/TextArea.tsx b/packages/ui/src/components/atoms/inputs/TextArea/TextArea.tsx
index d944551b05..3a5caefb87 100644
--- a/packages/ui/src/components/atoms/inputs/TextArea/TextArea.tsx
+++ b/packages/ui/src/components/atoms/inputs/TextArea/TextArea.tsx
@@ -8,7 +8,7 @@ export const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
     return (
       <textarea
         className={ctw(
-          'border-input ring-offset-background !placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[80px] w-full rounded-md border bg-white px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          'border-input ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[80px] w-full rounded-md border bg-white px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
           className,
         )}
         ref={ref}
diff --git a/packages/ui/src/components/molecules/inputs/AutocompleteInput/AutocompleteInput.tsx b/packages/ui/src/components/molecules/inputs/AutocompleteInput/AutocompleteInput.tsx
index 15f17e78d5..545aae3a75 100644
--- a/packages/ui/src/components/molecules/inputs/AutocompleteInput/AutocompleteInput.tsx
+++ b/packages/ui/src/components/molecules/inputs/AutocompleteInput/AutocompleteInput.tsx
@@ -1,3 +1,4 @@
+import { ctw } from '@/common';
 import { muiTheme } from '@/common/mui-theme';
 import { Paper } from '@/components/atoms/Paper';
 import { ThemeProvider } from '@mui/material';
@@ -21,6 +22,7 @@ export interface AutocompleteInputProps {
   name?: string;
   disabled?: boolean;
   testId?: string;
+  textInputClassName?: string;
   onChange: (event: AutocompleteChangeEvent) => void;
   onBlur?: (event: FocusEvent<any>) => void;
 }
@@ -32,6 +34,7 @@ export const AutocompleteInput = ({
   name,
   disabled,
   testId,
+  textInputClassName,
   onChange,
   onBlur,
 }: AutocompleteInputProps) => {
@@ -93,7 +96,10 @@ export const AutocompleteInput = ({
             InputProps={{
               ...params.InputProps,
               classes: {
-                root: 'border-input bg-background placeholder:text-muted-foreground rounded-md border text-sm transition-colors px-3 py-0 shadow-none',
+                root: ctw(
+                  'border-input bg-background placeholder:text-muted-foreground rounded-md border text-sm transition-colors px-3 py-0 shadow-none',
+                  textInputClassName,
+                ),
                 focused: 'border-input ring-ring ring-1',
                 disabled: 'opacity-50 cursor-not-allowed',
               },
diff --git a/packages/ui/src/components/molecules/inputs/DatePickerInput/DatePickerInput.tsx b/packages/ui/src/components/molecules/inputs/DatePickerInput/DatePickerInput.tsx
index 2041794a79..ae28ae9240 100644
--- a/packages/ui/src/components/molecules/inputs/DatePickerInput/DatePickerInput.tsx
+++ b/packages/ui/src/components/molecules/inputs/DatePickerInput/DatePickerInput.tsx
@@ -1,3 +1,4 @@
+import { ctw } from '@/common';
 import { muiTheme } from '@/common/mui-theme';
 import { Paper } from '@/components/atoms';
 import { TextField, TextFieldProps, ThemeProvider } from '@mui/material';
@@ -32,6 +33,7 @@ export interface DatePickerProps {
   disabled?: boolean;
   params?: DatePickerParams;
   testId?: string;
+  textInputClassName?: string;
   onChange: (event: DatePickerChangeEvent) => void;
   onBlur?: (event: FocusEvent<any>) => void;
 }
@@ -42,6 +44,7 @@ export const DatePickerInput = ({
   disabled = false,
   params,
   testId,
+  textInputClassName,
   onChange,
   onBlur,
 }: DatePickerProps) => {
@@ -131,7 +134,10 @@ export const DatePickerInput = ({
           InputProps={{
             ...props.InputProps,
             classes: {
-              root: 'shadow-none bg-background border-input rounded-md border text-sm shadow-sm transition-colors px-3 py-0',
+              root: ctw(
+                'bg-background border-input rounded-md border text-sm shadow-sm transition-colors px-3 py-0',
+                textInputClassName,
+              ),
               focused: 'border-input ring-ring ring-1',
               disabled: 'opacity-50 cursor-not-allowed',
             },
diff --git a/packages/ui/src/components/molecules/inputs/DropdownInput/DropdownInput.tsx b/packages/ui/src/components/molecules/inputs/DropdownInput/DropdownInput.tsx
index 028e0f051e..3c7e313556 100644
--- a/packages/ui/src/components/molecules/inputs/DropdownInput/DropdownInput.tsx
+++ b/packages/ui/src/components/molecules/inputs/DropdownInput/DropdownInput.tsx
@@ -3,6 +3,7 @@ import clsx from 'clsx';
 import { CheckIcon } from 'lucide-react';
 import React, { FocusEvent, FunctionComponent, useCallback, useMemo, useState } from 'react';
 
+import { ctw } from '@/common';
 import {
   Button,
   Command,
@@ -53,6 +54,7 @@ export const DropdownInput: FunctionComponent<DropdownInputProps> = ({
   onChange,
   onBlur,
   props,
+  textInputClassName,
 }) => {
   const { placeholder = '', searchPlaceholder = '' } = placeholdersParams;
   const [open, setOpen] = useState(false);
@@ -100,7 +102,7 @@ export const DropdownInput: FunctionComponent<DropdownInputProps> = ({
           disabled={disabled}
           data-testid={testId ? `${testId}-trigger` : undefined}
         >
-          <span className="flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-left">
+          <span className="flex-1 truncate text-left">
             {selectedOption ? selectedOption.label : placeholder}
           </span>
           {props?.trigger?.icon ?? <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />}
@@ -115,7 +117,11 @@ export const DropdownInput: FunctionComponent<DropdownInputProps> = ({
       >
         <Command className="w-full">
           {searchable ? (
-            <CommandInput onBlur={onBlur} placeholder={searchPlaceholder} className="h-9" />
+            <CommandInput
+              onBlur={onBlur}
+              placeholder={searchPlaceholder}
+              className={ctw('placeholder:text-muted-foreground h-9', textInputClassName)}
+            />
           ) : null}
           <CommandEmpty>{notFoundText || ''}</CommandEmpty>
           <ScrollArea orientation="both" className={clsx({ 'h-[200px]': options.length > 6 })}>
diff --git a/packages/ui/src/components/molecules/inputs/DropdownInput/types.ts b/packages/ui/src/components/molecules/inputs/DropdownInput/types.ts
index 8b065a5993..caa8ac76d0 100644
--- a/packages/ui/src/components/molecules/inputs/DropdownInput/types.ts
+++ b/packages/ui/src/components/molecules/inputs/DropdownInput/types.ts
@@ -32,4 +32,5 @@ export interface DropdownInputProps {
     };
   };
   testId?: string;
+  textInputClassName?: string;
 }
diff --git a/packages/ui/src/components/molecules/inputs/MultiSelect/MultiSelect.tsx b/packages/ui/src/components/molecules/inputs/MultiSelect/MultiSelect.tsx
index 8d0874f5b4..45a37c9080 100644
--- a/packages/ui/src/components/molecules/inputs/MultiSelect/MultiSelect.tsx
+++ b/packages/ui/src/components/molecules/inputs/MultiSelect/MultiSelect.tsx
@@ -1,8 +1,8 @@
+import { ctw } from '@/common/utils/ctw';
 import { Popover, PopoverContent, PopoverTrigger, ScrollArea } from '@/components/atoms';
 import { Command, CommandGroup, CommandInput, CommandItem } from '@/components/atoms/Command';
 import { UnselectButtonProps } from '@/components/molecules/inputs/MultiSelect/components/Chip/UnselectButton';
 import { SelectedElementParams } from '@/components/molecules/inputs/MultiSelect/types';
-import { ctw } from '@/common/utils/ctw';
 import { ClickAwayListener } from '@mui/material';
 import keyBy from 'lodash/keyBy';
 import { FocusEvent, useCallback, useMemo, useRef, useState } from 'react';
@@ -26,6 +26,7 @@ export interface MultiSelectProps {
   searchPlaceholder?: string;
   disabled?: boolean;
   testId?: string;
+  textInputClassName?: string;
   renderSelected: MultiSelectSelectedItemRenderer;
   onChange: (selected: MultiSelectValue[], inputName: string) => void;
   onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
@@ -38,6 +39,7 @@ export const MultiSelect = ({
   searchPlaceholder = 'Select more...',
   disabled,
   testId,
+  textInputClassName,
   renderSelected,
   onChange,
   onBlur,
@@ -171,7 +173,7 @@ export const MultiSelect = ({
                   onValueChange={setInputValue}
                   placeholder={searchPlaceholder}
                   style={{ border: 'none' }}
-                  className="h-6"
+                  className={ctw('placeholder:text-muted-foreground h-6', textInputClassName)}
                   onFocus={() => setOpen(true)}
                   onBlur={onBlur}
                   data-testid={testId ? `${testId}-search-input` : undefined}
diff --git a/packages/ui/src/components/organisms/DynamicForm/DynamicForm.stories.tsx b/packages/ui/src/components/organisms/DynamicForm/DynamicForm.stories.tsx
index 745a478267..0a63776218 100644
--- a/packages/ui/src/components/organisms/DynamicForm/DynamicForm.stories.tsx
+++ b/packages/ui/src/components/organisms/DynamicForm/DynamicForm.stories.tsx
@@ -18,6 +18,9 @@ const simpleFormSchema: RJSFSchema = {
       type: 'string',
       title: 'Last Name',
     },
+    confirm: {
+      type: 'boolean',
+    },
   },
 };
 
diff --git a/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/AutocompleteTextInputAdapter/AutocompleteTextInputAdapter.tsx b/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/AutocompleteTextInputAdapter/AutocompleteTextInputAdapter.tsx
index 2aebd026be..2851b1d91e 100644
--- a/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/AutocompleteTextInputAdapter/AutocompleteTextInputAdapter.tsx
+++ b/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/AutocompleteTextInputAdapter/AutocompleteTextInputAdapter.tsx
@@ -35,6 +35,7 @@ export const AutocompleteTextInputAdapter: RJSFInputAdapter = ({
       testId={testId}
       placeholder={placeholder || uiSchema?.['ui:placeholder']}
       onChange={event => void onChange(event.target.value || '')}
+      textInputClassName={'placeholder:text-gray-400'}
       onBlur={handleBlur}
     />
   );
diff --git a/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/BooleanFieldAdapter/BooleanFieldAdapter.tsx b/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/BooleanFieldAdapter/BooleanFieldAdapter.tsx
index 144d927c3f..3274eadb52 100644
--- a/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/BooleanFieldAdapter/BooleanFieldAdapter.tsx
+++ b/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/BooleanFieldAdapter/BooleanFieldAdapter.tsx
@@ -1,6 +1,6 @@
+import { ctw } from '@/common/utils/ctw';
 import { Checkbox } from '@/components/atoms';
 import { RJSFInputAdapter } from '@/components/organisms/DynamicForm/components/RSJVInputAdaters/types';
-import { ctw } from '@/common/utils/ctw';
 import { useCallback } from 'react';
 
 export const BooleanFieldAdapter: RJSFInputAdapter<boolean> = ({
@@ -24,7 +24,7 @@ export const BooleanFieldAdapter: RJSFInputAdapter<boolean> = ({
       })}
     >
       <Checkbox
-        className="border-secondary data-[state=checked]:bg-secondary data-[state=checked]:text-secondary-foreground bg-white"
+        className="border bg-white data-[state=checked]:bg-white data-[state=checked]:text-black"
         color="primary"
         checked={formData}
         disabled={disabled}
diff --git a/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/DateInputAdapter/DateInputAdapter.tsx b/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/DateInputAdapter/DateInputAdapter.tsx
index 1632f548bb..6aa3fb09fc 100644
--- a/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/DateInputAdapter/DateInputAdapter.tsx
+++ b/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/DateInputAdapter/DateInputAdapter.tsx
@@ -63,6 +63,7 @@ export const DateInputAdapter: RJSFInputAdapter<string | null> = ({
       disabled={disabled}
       onBlur={handleBlur}
       testId={testId}
+      textInputClassName={'placeholder:text-gray-400'}
     />
   );
 };
diff --git a/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/MultiselectInputAdapter/MultiselectInputAdapter.tsx b/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/MultiselectInputAdapter/MultiselectInputAdapter.tsx
index 2304ee22e2..94f1e5f01a 100644
--- a/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/MultiselectInputAdapter/MultiselectInputAdapter.tsx
+++ b/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/MultiselectInputAdapter/MultiselectInputAdapter.tsx
@@ -53,6 +53,7 @@ export const MultiselectInputAdapter: RJSFInputAdapter<MultiSelectValue[], Multi
         </Chip>
       );
     };
+
     return defaultRenderer;
   }, [renderSelected]);
 
@@ -67,6 +68,7 @@ export const MultiselectInputAdapter: RJSFInputAdapter<MultiSelectValue[], Multi
       onBlur={handleBlur}
       renderSelected={selectedItemRenderer}
       testId={testId}
+      textInputClassName={'placeholder:text-gray-400'}
     />
   );
 };
diff --git a/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/RadioInputAdapter/RadioInputAdapter.tsx b/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/RadioInputAdapter/RadioInputAdapter.tsx
index f9aca384fa..652dddfaf7 100644
--- a/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/RadioInputAdapter/RadioInputAdapter.tsx
+++ b/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/RadioInputAdapter/RadioInputAdapter.tsx
@@ -18,7 +18,7 @@ export const RadioInputAdapter: RJSFInputAdapter<string> = ({
     [schema],
   );
 
-  return !!options?.length ? (
+  return options?.length ? (
     <RadioGroup
       value={formData}
       onValueChange={onChange}
@@ -32,7 +32,11 @@ export const RadioInputAdapter: RJSFInputAdapter<string> = ({
           key={`radio-group-item-${value}`}
           data-testid={testId ? `${testId}-radio-group-item` : undefined}
         >
-          <RadioGroupItem value={value} id={`radio-group-item-${value}`}></RadioGroupItem>
+          <RadioGroupItem
+            value={value}
+            id={`radio-group-item-${value}`}
+            className="!bg-white"
+          ></RadioGroupItem>
           <Label htmlFor={`radio-group-item-${value}`}>{label}</Label>
         </div>
       ))}
diff --git a/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/components/SelectField/SelectField.tsx b/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/components/SelectField/SelectField.tsx
index 661a9d36a5..67fa13d14b 100644
--- a/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/components/SelectField/SelectField.tsx
+++ b/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/components/SelectField/SelectField.tsx
@@ -49,6 +49,7 @@ export const SelectField = ({
       value={formData}
       disabled={disabled}
       testId={testId}
+      textInputClassName="placeholder:text-gray-400"
       onChange={onChange}
       onBlur={handleBlur}
     />
diff --git a/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/components/TextField/TextField.tsx b/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/components/TextField/TextField.tsx
index 377982530c..bec4ca215d 100644
--- a/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/components/TextField/TextField.tsx
+++ b/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/components/TextField/TextField.tsx
@@ -1,4 +1,4 @@
-import { WithTestId } from '@/common';
+import { ctw, WithTestId } from '@/common';
 import { Input, TextArea } from '@/components/atoms';
 import { FieldProps } from '@rjsf/utils';
 import { useCallback } from 'react';
@@ -11,6 +11,7 @@ export const TextField = ({
   disabled,
   schema,
   testId,
+  className,
   onChange,
   onBlur,
 }: WithTestId<FieldProps<string | number>>) => {
@@ -44,12 +45,17 @@ export const TextField = ({
   };
 
   return uiSchema?.['ui:widget'] === 'textarea' ? (
-    <TextArea {...inputProps} data-testid={testId} />
+    <TextArea
+      {...inputProps}
+      data-testid={testId}
+      className={ctw('placeholder:text-gray-400', className)}
+    />
   ) : (
     <Input
       {...inputProps}
       type={schema.type === 'number' ? 'number' : 'text'}
       data-testid={testId}
+      className={ctw('placeholder:text-gray-400', className)}
     />
   );
 };
diff --git a/packages/ui/src/components/organisms/DynamicForm/components/layouts/ArrayFieldsLayout/ArrayFieldsLayout.tsx b/packages/ui/src/components/organisms/DynamicForm/components/layouts/ArrayFieldsLayout/ArrayFieldsLayout.tsx
index d1b822c095..4277d41763 100644
--- a/packages/ui/src/components/organisms/DynamicForm/components/layouts/ArrayFieldsLayout/ArrayFieldsLayout.tsx
+++ b/packages/ui/src/components/organisms/DynamicForm/components/layouts/ArrayFieldsLayout/ArrayFieldsLayout.tsx
@@ -44,7 +44,7 @@ export const ArrayFieldsLayout = ({
       <Button
         type="button"
         variant="outline"
-        className="flex gap-2"
+        className="flex gap-2 !bg-white"
         onClick={onAddClick}
         disabled={!canAdd}
       >
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 62bafc25b4..a3d947344e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -449,7 +449,7 @@ importers:
         specifier: ^0.9.43
         version: link:../../packages/common
       '@ballerine/ui':
-        specifier: 0.5.38
+        specifier: 0.5.39
         version: link:../../packages/ui
       '@ballerine/workflow-browser-sdk':
         specifier: 0.6.55
@@ -1414,7 +1414,7 @@ importers:
         specifier: ^1.1.21
         version: link:../config
       '@ballerine/ui':
-        specifier: 0.5.38
+        specifier: 0.5.39
         version: link:../ui
       '@react-pdf/renderer':
         specifier: ^3.1.14
diff --git a/services/workflows-service/prisma/data-migrations b/services/workflows-service/prisma/data-migrations
index 845deb4e38..d6f92b8106 160000
--- a/services/workflows-service/prisma/data-migrations
+++ b/services/workflows-service/prisma/data-migrations
@@ -1 +1 @@
-Subproject commit 845deb4e38e0c3219c614de56a6f7018bc0a3db1
+Subproject commit d6f92b8106b5bce47488d2d38bf0aca36647ece7