From b6367e84628660183f6485e5379f163a28e1d260 Mon Sep 17 00:00:00 2001
From: Lyutskan Lyutskanov <lyutskan.lyutskanov@finoa.io>
Date: Tue, 14 Jul 2026 13:39:22 +0000
Subject: [PATCH 1/5] Implement governance form field styling (Fixes #2656,
 Fixes #2657, Fixes #2659) Align TextField, DateField, SelectField, and config
 inputs with Figma: grey (#363636) surfaces, uppercase section labels, and
 DateField picker pattern (KeyboardArrowDown, read-only display, YY-MM-DD
 HH:mm). - #2656: ProposalSummaryField / textarea styling - #2657: TextField
 single-line styling - #2659: ConfigField table entry styling

Signed-off-by: Lyutskan Lyutskanov <lyutskan.lyutskanov@finoa.io>
---
 .../form-components/ConfigField.tsx           |  11 +-
 .../components/form-components/DateField.tsx  |  37 +-
 .../form-components/EffectiveDateField.tsx    |  40 +--
 .../form-components/ProposalSummaryField.tsx  |  32 +-
 .../form-components/SelectField.tsx           |  17 +-
 .../components/form-components/TextField.tsx  |  20 +-
 ...UnallocatedUnclaimedActivityRecordForm.tsx |   2 +-
 .../forms/GrantRevokeFeaturedAppForm.tsx      |   2 +-
 .../src/components/forms/OffboardSvForm.tsx   |   2 +-
 .../forms/SetAmuletConfigRulesForm.tsx        |   2 +-
 .../forms/SetDsoConfigRulesForm.tsx           |   2 +-
 .../forms/UpdateSvRewardWeightForm.tsx        |   2 +-
 apps/sv/frontend/src/themes/fieldStyles.ts    | 319 ++++++++++++++++++
 13 files changed, 412 insertions(+), 76 deletions(-)
 create mode 100644 apps/sv/frontend/src/themes/fieldStyles.ts

diff --git a/apps/sv/frontend/src/components/form-components/ConfigField.tsx b/apps/sv/frontend/src/components/form-components/ConfigField.tsx
index 61a0216eaa..689d88c619 100644
--- a/apps/sv/frontend/src/components/form-components/ConfigField.tsx
+++ b/apps/sv/frontend/src/components/form-components/ConfigField.tsx
@@ -8,6 +8,7 @@ import relativeTime from 'dayjs/plugin/relativeTime';
 import { useFieldContext } from '../../hooks/formContext';
 import type { ConfigChange, PendingConfigFieldInfo } from '../../utils/types';
 import { nextScheduledSynchronizerUpgradeFormat } from '@canton-network/splice-common-frontend-utils';
+import { configFieldFieldSx, configFieldInputSx } from '../../themes/fieldStyles';
 
 dayjs.extend(relativeTime);
 
@@ -55,12 +56,16 @@ export const ConfigField: React.FC<ConfigFieldProps> = props => {
 
   const textFieldProps = {
     variant: 'outlined' as const,
-    size: 'small' as const,
     color: field.state.meta.isDefaultValue ? ('primary' as const) : ('secondary' as const),
     focused: !field.state.meta.isDefaultValue,
     autoComplete: 'off' as const,
+    sx: configFieldFieldSx,
+    slotProps: {
+      input: {
+        sx: configFieldInputSx,
+      },
+    },
     inputProps: {
-      sx: { textAlign: 'right' },
       'data-testid': `config-field-${configChange.fieldName}`,
     },
     disabled: isDisabled,
@@ -89,7 +94,7 @@ export const ConfigField: React.FC<ConfigFieldProps> = props => {
           </Typography>
         </Box>
 
-        <Box sx={{ width: 250 }}>
+        <Box sx={{ width: 238, maxWidth: '100%' }}>
           <MuiTextField
             {...textFieldProps}
             // We choose empty string to represent fields that could be undefined because their values have not been set.
diff --git a/apps/sv/frontend/src/components/form-components/DateField.tsx b/apps/sv/frontend/src/components/form-components/DateField.tsx
index 0e0bd7ba1f..1d8786bd89 100644
--- a/apps/sv/frontend/src/components/form-components/DateField.tsx
+++ b/apps/sv/frontend/src/components/form-components/DateField.tsx
@@ -2,12 +2,19 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { useMemo } from 'react';
+import { KeyboardArrowDown } from '@mui/icons-material';
 import { Box, Typography } from '@mui/material';
 import { DesktopDateTimePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import dayjs, { Dayjs } from 'dayjs';
 import { dateTimeFormatISO } from '@canton-network/splice-common-frontend-utils';
 import { useFieldContext } from '../../hooks/formContext';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import {
+  datePickerFieldSx,
+  fieldDescriptionSx,
+  fieldSectionSx,
+  fieldSectionTitleSx,
+} from '../../themes/fieldStyles';
 
 export interface DateFieldProps {
   title?: string;
@@ -23,18 +30,10 @@ export const DateField: React.FC<DateFieldProps> = props => {
   const dateValue = useMemo(() => dayjs(field.state.value), [field.state.value]);
 
   return (
-    <Box>
-      {title && (
-        <Typography variant="h5" gutterBottom>
-          {title}
-        </Typography>
-      )}
+    <Box sx={fieldSectionSx}>
+      {title && <Typography sx={fieldSectionTitleSx}>{title}</Typography>}
 
-      {description && (
-        <Typography variant="body2" color="text.secondary" gutterBottom>
-          {description}
-        </Typography>
-      )}
+      {description && <Typography sx={fieldDescriptionSx}>{description}</Typography>}
 
       <LocalizationProvider dateAdapter={AdapterDayjs}>
         <DesktopDateTimePicker
@@ -44,15 +43,31 @@ export const DateField: React.FC<DateFieldProps> = props => {
           ampm={false}
           onChange={newDate => field.handleChange(newDate?.format(dateTimeFormatISO)!)}
           enableAccessibleFieldDOMStructure={false}
+          slots={{
+            openPickerIcon: KeyboardArrowDown,
+          }}
           slotProps={{
             textField: {
               fullWidth: true,
               variant: 'outlined',
               id: `${id}-field`,
+              error: !field.state.meta.isValid,
               helperText: field.state.meta.errors?.[0],
               onBlur: field.handleBlur,
+              sx: datePickerFieldSx,
               inputProps: {
                 'data-testid': `${id}-field`,
+                readOnly: true,
+              },
+            },
+            openPickerButton: {
+              sx: {
+                color: 'text.light',
+                marginRight: 0,
+                padding: 0,
+                '& .MuiSvgIcon-root': {
+                  fontSize: 16,
+                },
               },
             },
           }}
diff --git a/apps/sv/frontend/src/components/form-components/EffectiveDateField.tsx b/apps/sv/frontend/src/components/form-components/EffectiveDateField.tsx
index 26c6b0216c..a61ba99dac 100644
--- a/apps/sv/frontend/src/components/form-components/EffectiveDateField.tsx
+++ b/apps/sv/frontend/src/components/form-components/EffectiveDateField.tsx
@@ -10,6 +10,7 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { EffectivityType } from '../../utils/types';
 import React, { useMemo } from 'react';
 import { RadioSelector } from './RadioSelector';
+import { datePickerFieldSx } from '../../themes/fieldStyles';
 
 const effectiveAtDisplayFormat = 'YYYY-MM-DD HH:mm';
 
@@ -106,46 +107,11 @@ export const EffectiveDateField: React.FC<EffectiveDateFieldProps> = props => {
                       error: !field.state.meta.isValid,
                       helperText: field.state.meta.errors?.[0],
                       onBlur: field.handleBlur,
+                      sx: datePickerFieldSx,
                       inputProps: {
                         'data-testid': `${id}-field`,
+                        readOnly: true,
                       },
-                      sx: theme => ({
-                        width: '100%',
-                        '& .MuiOutlinedInput-root': {
-                          backgroundColor: '#363636',
-                          borderRadius: '4px',
-                          display: 'flex',
-                          justifyContent: 'space-between',
-                          alignItems: 'center',
-                          alignSelf: 'stretch',
-                          flexWrap: 'nowrap',
-                          padding: '13px 16px',
-                          overflow: 'hidden',
-                          minHeight: 'unset',
-                          '& fieldset': {
-                            border: 'none',
-                            borderRadius: '4px',
-                          },
-                        },
-                        '& .MuiOutlinedInput-input': {
-                          ...theme.typography.body2,
-                          flex: 1,
-                          minWidth: 0,
-                          padding: 0,
-                          lineHeight: '22px',
-                          color: theme.palette.text.light,
-                          backgroundColor: 'transparent',
-                          borderRadius: 0,
-                          WebkitBoxShadow: 'none',
-                        },
-                        '& .MuiInputAdornment-root': {
-                          flexShrink: 0,
-                          marginLeft: theme.spacing(1.25),
-                        },
-                        '& .MuiFormHelperText-root': {
-                          mx: 0,
-                        },
-                      }),
                     },
                   }}
                 />
diff --git a/apps/sv/frontend/src/components/form-components/ProposalSummaryField.tsx b/apps/sv/frontend/src/components/form-components/ProposalSummaryField.tsx
index f6a7a83e53..0ff342eb9c 100644
--- a/apps/sv/frontend/src/components/form-components/ProposalSummaryField.tsx
+++ b/apps/sv/frontend/src/components/form-components/ProposalSummaryField.tsx
@@ -9,6 +9,12 @@ import {
   PROPOSAL_SUMMARY_SUBTITLE,
   PROPOSAL_SUMMARY_TITLE,
 } from '../../utils/constants';
+import {
+  fieldDescriptionSx,
+  fieldSectionSx,
+  fieldSectionTitleSx,
+  proposalSummaryFieldSx,
+} from '../../themes/fieldStyles';
 
 export interface ProposalSummaryFieldProps {
   id: string;
@@ -27,11 +33,17 @@ export const ProposalSummaryField: React.FC<ProposalSummaryFieldProps> = props =
   const currentLength = field.state.value.length;
 
   return (
-    <Box>
-      <Typography variant="h6" gutterBottom>
+    <Box sx={fieldSectionSx}>
+      <Typography sx={fieldSectionTitleSx}>
         {title || PROPOSAL_SUMMARY_TITLE}
         {optional && (
-          <Typography component="span" variant="body2" color="text.secondary" sx={{ ml: 1 }}>
+          <Typography
+            component="span"
+            fontSize={12}
+            lineHeight="22px"
+            color="text.light"
+            sx={{ ml: 1 }}
+          >
             optional
           </Typography>
         )}
@@ -39,32 +51,32 @@ export const ProposalSummaryField: React.FC<ProposalSummaryFieldProps> = props =
       <MuiTextField
         fullWidth
         multiline
-        rows={5}
         variant="outlined"
         autoComplete="off"
+        sx={proposalSummaryFieldSx}
+        id={id}
         value={field.state.value}
         onBlur={field.handleBlur}
         onChange={e => field.handleChange(e.target.value)}
         error={!field.state.meta.isValid}
         helperText={field.state.meta.errors?.[0]}
         inputProps={{ 'data-testid': id, maxLength }}
-        id={id}
       />
       <Box
         sx={{
           display: 'flex',
           justifyContent: 'space-between',
-          alignItems: 'center',
-          mt: 1,
+          alignItems: 'flex-start',
           gap: 2,
         }}
       >
-        <Typography variant="body2" data-testid={`${id}-subtitle`}>
+        <Typography sx={fieldDescriptionSx} data-testid={`${id}-subtitle`}>
           {subtitle || PROPOSAL_SUMMARY_SUBTITLE}
         </Typography>
         <Typography
-          variant="body2"
-          color={'text.secondary'}
+          fontSize={12}
+          lineHeight="22px"
+          color="text.secondary"
           data-testid={`${id}-character-counter`}
           sx={{ flexShrink: 0 }}
         >
diff --git a/apps/sv/frontend/src/components/form-components/SelectField.tsx b/apps/sv/frontend/src/components/form-components/SelectField.tsx
index 95bb6d8fb5..024f44a90f 100644
--- a/apps/sv/frontend/src/components/form-components/SelectField.tsx
+++ b/apps/sv/frontend/src/components/form-components/SelectField.tsx
@@ -1,6 +1,7 @@
 // Copyright (c) 2024 Digital Asset (Switzerland) GmbH and/or its affiliates. All rights reserved.
 // SPDX-License-Identifier: Apache-2.0
 
+import { KeyboardArrowDown } from '@mui/icons-material';
 import {
   Box,
   FormControl,
@@ -13,6 +14,7 @@ import {
 import type { FormEvent } from 'react';
 import { useFieldContext } from '../../hooks/formContext';
 import { scrollableSelectFieldSx } from '../beta/identifierStyles';
+import { fieldSectionSx, fieldSectionTitleSx, selectFieldSx } from '../../themes/fieldStyles';
 
 export type Option = { key: string; value: string };
 export interface SelectFieldProps {
@@ -38,13 +40,17 @@ export const SelectField: React.FC<SelectFieldProps> = props => {
   const isError = !field.state.meta.isValid && !showPlaceholder;
 
   return (
-    <Box data-testid={`${id}-select-component`}>
-      <Typography variant="h6" gutterBottom>
-        {title}
-      </Typography>
+    <Box sx={fieldSectionSx} data-testid={`${id}-select-component`}>
+      <Typography sx={fieldSectionTitleSx}>{title}</Typography>
 
-      <FormControl variant="outlined" error={isError} fullWidth>
+      <FormControl
+        variant="outlined"
+        error={isError}
+        fullWidth
+        sx={{ '& .MuiFormHelperText-root': { mx: 0, mt: 1 } }}
+      >
         <Select
+          IconComponent={KeyboardArrowDown}
           value={field.state.value}
           displayEmpty
           sx={scrollableIdentifier ? scrollableSelectFieldSx : undefined}
@@ -68,6 +74,7 @@ export const SelectField: React.FC<SelectFieldProps> = props => {
           disabled={disabled}
           id={`${id}-dropdown`}
           data-testid={id}
+          sx={selectFieldSx}
           inputProps={{
             'data-testid': `${id}-dropdown`,
             onChange: (e: FormEvent<HTMLInputElement | HTMLTextAreaElement>) => {
diff --git a/apps/sv/frontend/src/components/form-components/TextField.tsx b/apps/sv/frontend/src/components/form-components/TextField.tsx
index be820eb58f..78ca2740dd 100644
--- a/apps/sv/frontend/src/components/form-components/TextField.tsx
+++ b/apps/sv/frontend/src/components/form-components/TextField.tsx
@@ -9,6 +9,12 @@ import {
 } from '@mui/material';
 import { useFieldContext } from '../../hooks/formContext';
 import { scrollableTextFieldSx } from '../beta/identifierStyles';
+import {
+  fieldDescriptionSx,
+  fieldSectionSx,
+  fieldSectionTitleSx,
+  singleLineFieldSx,
+} from '../../themes/fieldStyles';
 
 export interface TextFieldProps {
   id: string;
@@ -32,8 +38,8 @@ export const TextField: React.FC<TextFieldProps> = props => {
   } = props;
   const field = useFieldContext<string>();
   return (
-    <Box>
-      <Typography variant="h6" id={`${id}-title`} data-testid={`${id}-title`} gutterBottom>
+    <Box sx={fieldSectionSx}>
+      <Typography sx={fieldSectionTitleSx} id={`${id}-title`} data-testid={`${id}-title`}>
         {title}
       </Typography>
 
@@ -41,6 +47,7 @@ export const TextField: React.FC<TextFieldProps> = props => {
         fullWidth
         variant="outlined"
         autoComplete="off"
+        sx={singleLineFieldSx}
         value={field.state.value}
         onBlur={() => {
           field.handleBlur();
@@ -48,7 +55,12 @@ export const TextField: React.FC<TextFieldProps> = props => {
         }}
         error={!field.state.meta.isValid}
         helperText={
-          <Typography variant="caption" id={`${id}-error`} data-testid={`${id}-error`}>
+          <Typography
+            component="span"
+            sx={fieldDescriptionSx}
+            id={`${id}-error`}
+            data-testid={`${id}-error`}
+          >
             {field.state.meta.errors?.[0]}
           </Typography>
         }
@@ -62,7 +74,7 @@ export const TextField: React.FC<TextFieldProps> = props => {
         {...muiTextFieldProps}
       />
       {subtitle && (
-        <Typography variant="body2" color="text.secondary" data-testid={`${id}-subtitle`} mt={1}>
+        <Typography sx={fieldDescriptionSx} data-testid={`${id}-subtitle`}>
           {subtitle}
         </Typography>
       )}
diff --git a/apps/sv/frontend/src/components/forms/CreateUnallocatedUnclaimedActivityRecordForm.tsx b/apps/sv/frontend/src/components/forms/CreateUnallocatedUnclaimedActivityRecordForm.tsx
index 6a303b2b50..81f722e465 100644
--- a/apps/sv/frontend/src/components/forms/CreateUnallocatedUnclaimedActivityRecordForm.tsx
+++ b/apps/sv/frontend/src/components/forms/CreateUnallocatedUnclaimedActivityRecordForm.tsx
@@ -227,7 +227,7 @@ export const CreateUnallocatedUnclaimedActivityRecordForm: React.FC = _ => {
             >
               {field => (
                 <field.TextField
-                  title="URL"
+                  title="SUPPORTING URL"
                   id="create-unallocated-unclaimed-activity-record-url"
                 />
               )}
diff --git a/apps/sv/frontend/src/components/forms/GrantRevokeFeaturedAppForm.tsx b/apps/sv/frontend/src/components/forms/GrantRevokeFeaturedAppForm.tsx
index 472174b800..042b0341c0 100644
--- a/apps/sv/frontend/src/components/forms/GrantRevokeFeaturedAppForm.tsx
+++ b/apps/sv/frontend/src/components/forms/GrantRevokeFeaturedAppForm.tsx
@@ -373,7 +373,7 @@ export const GrantRevokeFeaturedAppForm: React.FC<GrantRevokeFeaturedAppFormProp
                 onChange: ({ value }) => validateUrl(value),
               }}
             >
-              {field => <field.TextField title="URL" id={`${testIdPrefix}-url`} />}
+              {field => <field.TextField title="SUPPORTING URL" id={`${testIdPrefix}-url`} />}
             </form.AppField>
           </>
         )}
diff --git a/apps/sv/frontend/src/components/forms/OffboardSvForm.tsx b/apps/sv/frontend/src/components/forms/OffboardSvForm.tsx
index 3f93cdfcbd..722fe87d9b 100644
--- a/apps/sv/frontend/src/components/forms/OffboardSvForm.tsx
+++ b/apps/sv/frontend/src/components/forms/OffboardSvForm.tsx
@@ -175,7 +175,7 @@ export const OffboardSvForm: React.FC = _ => {
                 onChange: ({ value }) => validateUrl(value),
               }}
             >
-              {field => <field.TextField title="URL" id="offboard-sv-url" />}
+              {field => <field.TextField title="SUPPORTING URL" id="offboard-sv-url" />}
             </form.AppField>
           </>
         )}
diff --git a/apps/sv/frontend/src/components/forms/SetAmuletConfigRulesForm.tsx b/apps/sv/frontend/src/components/forms/SetAmuletConfigRulesForm.tsx
index 0af20b6170..56a7a311b9 100644
--- a/apps/sv/frontend/src/components/forms/SetAmuletConfigRulesForm.tsx
+++ b/apps/sv/frontend/src/components/forms/SetAmuletConfigRulesForm.tsx
@@ -288,7 +288,7 @@ export const SetAmuletConfigRulesForm: () => JSX.Element = () => {
               onChange: ({ value }) => validateUrl(value),
             }}
           >
-            {field => <field.TextField title="URL" id="set-amulet-config-rules-url" />}
+            {field => <field.TextField title="SUPPORTING URL" id="set-amulet-config-rules-url" />}
           </form.AppField>
         </>
       )}
diff --git a/apps/sv/frontend/src/components/forms/SetDsoConfigRulesForm.tsx b/apps/sv/frontend/src/components/forms/SetDsoConfigRulesForm.tsx
index 624e9c4daf..3d9b2be85d 100644
--- a/apps/sv/frontend/src/components/forms/SetDsoConfigRulesForm.tsx
+++ b/apps/sv/frontend/src/components/forms/SetDsoConfigRulesForm.tsx
@@ -304,7 +304,7 @@ export const SetDsoConfigRulesForm: () => JSX.Element = () => {
               onChange: ({ value }) => validateUrl(value),
             }}
           >
-            {field => <field.TextField title="URL" id="set-dso-config-rules-url" />}
+            {field => <field.TextField title="SUPPORTING URL" id="set-dso-config-rules-url" />}
           </form.AppField>
         </>
       )}
diff --git a/apps/sv/frontend/src/components/forms/UpdateSvRewardWeightForm.tsx b/apps/sv/frontend/src/components/forms/UpdateSvRewardWeightForm.tsx
index 8a535d255a..94838d058d 100644
--- a/apps/sv/frontend/src/components/forms/UpdateSvRewardWeightForm.tsx
+++ b/apps/sv/frontend/src/components/forms/UpdateSvRewardWeightForm.tsx
@@ -220,7 +220,7 @@ export const UpdateSvRewardWeightForm: React.FC = _ => {
                 onChange: ({ value }) => validateUrl(value),
               }}
             >
-              {field => <field.TextField title="URL" id="update-sv-reward-weight-url" />}
+              {field => <field.TextField title="SUPPORTING URL" id="update-sv-reward-weight-url" />}
             </form.AppField>
           </>
         )}
diff --git a/apps/sv/frontend/src/themes/fieldStyles.ts b/apps/sv/frontend/src/themes/fieldStyles.ts
new file mode 100644
index 0000000000..53c308d5b1
--- /dev/null
+++ b/apps/sv/frontend/src/themes/fieldStyles.ts
@@ -0,0 +1,319 @@
+// Copyright (c) 2024 Digital Asset (Switzerland) GmbH and/or its affiliates. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { SxProps, Theme } from '@mui/material/styles';
+
+const fieldSurfaceBackground = '#363636';
+
+export const fieldSectionTitleSx: SxProps<Theme> = {
+  fontSize: 12,
+  lineHeight: '22px',
+  fontWeight: 600,
+  textTransform: 'uppercase',
+  color: 'common.white',
+};
+
+export const fieldDescriptionSx: SxProps<Theme> = {
+  fontSize: 12,
+  lineHeight: '22px',
+  color: 'text.light',
+};
+
+export const fieldSectionSx: SxProps<Theme> = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 1,
+};
+
+const fieldHelperSx: SxProps<Theme> = {
+  '& .MuiFormHelperText-root': {
+    mx: 0,
+    mt: 1,
+  },
+};
+
+const inputTypographySx = (theme: Theme) => ({
+  fontSize: theme.typography.body2.fontSize,
+  fontWeight: theme.typography.body2.fontWeight,
+  fontFamily: theme.typography.body2.fontFamily,
+  lineHeight: '22px',
+  letterSpacing: 0,
+  color: theme.palette.text.light,
+  backgroundColor: 'transparent',
+  boxSizing: 'border-box' as const,
+  WebkitBoxShadow: 'none',
+});
+
+const fieldOutlineSx = (theme: Theme) => ({
+  '& .MuiOutlinedInput-notchedOutline, & fieldset': {
+    border: 'none',
+    borderRadius: '4px',
+  },
+  '&.Mui-error .MuiOutlinedInput-notchedOutline, &.Mui-error fieldset': {
+    border: `1px solid ${theme.palette.error.main}`,
+  },
+});
+
+const fieldAdornmentSx = {
+  '& .MuiInputAdornment-root': {
+    margin: 0,
+    maxHeight: '22px',
+    height: '22px',
+    alignSelf: 'center',
+  },
+  '& .MuiInputAdornment-positionEnd': {
+    marginLeft: 'auto',
+  },
+  '& .MuiInputAdornment-root .MuiIconButton-root': {
+    color: 'common.white',
+    padding: 0,
+    width: 16,
+    height: 16,
+    '& svg': {
+      fontSize: 16,
+    },
+  },
+  '& .MuiSelect-icon': {
+    color: 'common.white',
+    fontSize: 16,
+    top: 'calc(50% - 0.5em)',
+  },
+};
+
+const multilineSurfaceSx = (theme: Theme) => ({
+  display: 'flex',
+  padding: '13px 16px',
+  justifyContent: 'space-between',
+  alignItems: 'flex-start',
+  alignContent: 'flex-start',
+  flexWrap: 'wrap',
+  rowGap: '10px',
+  alignSelf: 'stretch',
+  backgroundColor: fieldSurfaceBackground,
+  borderRadius: '4px',
+  overflow: 'hidden',
+  ...fieldOutlineSx(theme),
+});
+
+const multilineInputSx = (theme: Theme) => ({
+  ...inputTypographySx(theme),
+  flex: 1,
+  width: '100%',
+  minWidth: '100%',
+  padding: 0,
+});
+
+export const singleLineInputRootSx: SxProps<Theme> = theme => ({
+  ...inputTypographySx(theme),
+  display: 'flex',
+  padding: '13px 16px',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  alignContent: 'center',
+  flexWrap: 'wrap',
+  rowGap: '10px',
+  alignSelf: 'stretch',
+  minHeight: 0,
+  height: 'auto',
+  backgroundColor: fieldSurfaceBackground,
+  borderRadius: '4px',
+  overflow: 'hidden',
+  ...fieldOutlineSx(theme),
+  ...fieldAdornmentSx,
+  '&.MuiInputBase-root, &.MuiOutlinedInput-root, &.MuiInputBase-adornedEnd': {
+    minHeight: 0,
+    height: 'auto',
+  },
+  // Override common MuiInputBase global `.MuiOutlinedInput-input` background (neutral[10]).
+  '& .MuiOutlinedInput-input, & .MuiInputBase-input, & input, & .MuiSelect-select': {
+    ...inputTypographySx(theme),
+    flex: 1,
+    minWidth: 0,
+    padding: 0,
+    minHeight: 0,
+    height: 'auto',
+  },
+  '&.MuiInputBase-sizeSmall': {
+    minHeight: 0,
+  },
+  '& .MuiOutlinedInput-inputSizeSmall': {
+    padding: 0,
+  },
+});
+
+const proposalSummaryInputRootSx: SxProps<Theme> = theme => ({
+  ...multilineSurfaceSx(theme),
+  height: '130px',
+  '& textarea, & .MuiOutlinedInput-input': {
+    ...multilineInputSx(theme),
+    alignSelf: 'stretch',
+    minHeight: 0,
+    height: '100%',
+    resize: 'none',
+    overflow: 'auto',
+  },
+});
+
+const configFieldInputRootSx: SxProps<Theme> = theme => ({
+  ...inputTypographySx(theme),
+  display: 'flex',
+  width: '238px',
+  maxWidth: '100%',
+  height: '48px',
+  padding: '14px 24px',
+  justifyContent: 'flex-end',
+  alignItems: 'center',
+  gap: '10px',
+  boxSizing: 'border-box',
+  minHeight: 0,
+  backgroundColor: fieldSurfaceBackground,
+  borderRadius: '4px',
+  overflow: 'hidden',
+  ...fieldOutlineSx(theme),
+  // Edited state: ConfigField sets focused when value differs from default (Figma: #F3FF97 border).
+  '&.Mui-focused .MuiOutlinedInput-notchedOutline, &.Mui-focused fieldset': {
+    border: `1px solid ${theme.palette.secondary.main}`,
+  },
+  '&.MuiInputBase-root, &.MuiOutlinedInput-root': {
+    minHeight: 0,
+    height: '48px',
+  },
+  '& .MuiOutlinedInput-input, & .MuiInputBase-input, & input': {
+    ...inputTypographySx(theme),
+    flex: 1,
+    minWidth: 0,
+    padding: 0,
+    minHeight: 0,
+    height: 'auto',
+    textAlign: 'right',
+  },
+});
+
+/** Single-line TextField wrapper — overrides common MuiInputBase global styles. */
+export const singleLineFieldSx: SxProps<Theme> = theme => ({
+  ...fieldHelperSx,
+  '& .MuiOutlinedInput-root':
+    typeof singleLineInputRootSx === 'function'
+      ? singleLineInputRootSx(theme)
+      : singleLineInputRootSx,
+});
+
+/** Proposal summary — fixed 130px height. */
+export const proposalSummaryFieldSx: SxProps<Theme> = theme => ({
+  ...fieldHelperSx,
+  '& .MuiOutlinedInput-root':
+    typeof proposalSummaryInputRootSx === 'function'
+      ? proposalSummaryInputRootSx(theme)
+      : proposalSummaryInputRootSx,
+});
+
+/** Date picker OutlinedInput root — single row; 16px inset for chevron via root padding. */
+const datePickerInputRootSx: SxProps<Theme> = theme => ({
+  ...inputTypographySx(theme),
+  display: 'flex',
+  flexWrap: 'nowrap',
+  padding: '13px 16px',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  alignSelf: 'stretch',
+  width: '100%',
+  minHeight: 0,
+  height: 'auto',
+  backgroundColor: fieldSurfaceBackground,
+  borderRadius: '4px',
+  overflow: 'hidden',
+  ...fieldOutlineSx(theme),
+  ...fieldAdornmentSx,
+  '&.MuiInputBase-root, &.MuiOutlinedInput-root, &.MuiInputBase-adornedEnd': {
+    minHeight: 0,
+    height: 'auto',
+  },
+  '& .MuiOutlinedInput-input, & .MuiInputBase-input, & input': {
+    ...inputTypographySx(theme),
+    flex: 1,
+    minWidth: 0,
+    padding: 0,
+    minHeight: 0,
+    height: 'auto',
+  },
+  '& .MuiInputAdornment-positionEnd': {
+    marginLeft: 'auto',
+    marginRight: 0,
+    flexShrink: 0,
+  },
+});
+
+/** Date picker TextField wrapper (helper text spacing + OutlinedInput surface). */
+export const datePickerFieldSx: SxProps<Theme> = theme => ({
+  ...fieldHelperSx,
+  width: '100%',
+  '& .MuiOutlinedInput-root':
+    typeof datePickerInputRootSx === 'function'
+      ? datePickerInputRootSx(theme)
+      : datePickerInputRootSx,
+});
+
+/** Date picker OutlinedInput root — apply via `slotProps.input.sx` when needed. */
+export const datePickerInputSx: SxProps<Theme> = datePickerInputRootSx;
+
+/** Select OutlinedInput root — single row; chevron inset matches date picker. */
+const selectInputRootSx: SxProps<Theme> = theme => ({
+  ...inputTypographySx(theme),
+  display: 'flex',
+  flexWrap: 'nowrap',
+  padding: '13px 16px',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  alignContent: 'center',
+  alignSelf: 'stretch',
+  minHeight: 0,
+  height: 'auto',
+  backgroundColor: fieldSurfaceBackground,
+  borderRadius: '4px',
+  overflow: 'hidden',
+  ...fieldOutlineSx(theme),
+  ...fieldAdornmentSx,
+  '&.MuiInputBase-root, &.MuiOutlinedInput-root, &.MuiInputBase-adornedEnd': {
+    minHeight: 0,
+    height: 'auto',
+  },
+  '& .MuiOutlinedInput-input, & .MuiInputBase-input, & input, & .MuiSelect-select': {
+    ...inputTypographySx(theme),
+    flex: 1,
+    minWidth: 0,
+    padding: 0,
+    minHeight: 0,
+    height: 'auto',
+  },
+  '&.MuiSelect-outlined .MuiSelect-select': {
+    paddingRight: 0,
+  },
+  '& .MuiSelect-icon': {
+    color: 'common.white',
+    fontSize: 16,
+    marginLeft: 'auto',
+    marginRight: 0,
+    flexShrink: 0,
+    position: 'static',
+    top: 'auto',
+    right: 'auto',
+  },
+  '&.MuiInputBase-sizeSmall': {
+    minHeight: 0,
+  },
+  '& .MuiOutlinedInput-inputSizeSmall': {
+    padding: 0,
+  },
+});
+
+export const selectFieldSx: SxProps<Theme> = selectInputRootSx;
+
+/** DSO config table TextField wrapper (helper text spacing). */
+export const configFieldFieldSx: SxProps<Theme> = {
+  ...fieldHelperSx,
+  width: '238px',
+  maxWidth: '100%',
+};
+
+/** DSO config table OutlinedInput root — apply via `slotProps.input.sx`. */
+export const configFieldInputSx: SxProps<Theme> = configFieldInputRootSx;

From 6f55740c67321a8270fc3f4e299cced1f8429c1a Mon Sep 17 00:00:00 2001
From: Tim Pelzer <tim.pelzer@finoa.io>
Date: Fri, 17 Jul 2026 12:01:19 +0000
Subject: [PATCH 2/5] Remove readOnly from date fields, add picker for on-click
 calendar open (same as EffectiveDateField)

Signed-off-by: Tim Pelzer <tim.pelzer@finoa.io>
---
 .../components/form-components/DateField.tsx  |  21 +-
 .../form-components/EffectiveDateField.tsx    | 213 ++++++++++++------
 apps/sv/frontend/src/themes/fieldStyles.ts    |   3 +
 3 files changed, 162 insertions(+), 75 deletions(-)

diff --git a/apps/sv/frontend/src/components/form-components/DateField.tsx b/apps/sv/frontend/src/components/form-components/DateField.tsx
index 1d8786bd89..655cf0907b 100644
--- a/apps/sv/frontend/src/components/form-components/DateField.tsx
+++ b/apps/sv/frontend/src/components/form-components/DateField.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) 2024 Digital Asset (Switzerland) GmbH and/or its affiliates. All rights reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { KeyboardArrowDown } from '@mui/icons-material';
 import { Box, Typography } from '@mui/material';
 import { DesktopDateTimePicker, LocalizationProvider } from '@mui/x-date-pickers';
@@ -16,6 +16,9 @@ import {
   fieldSectionTitleSx,
 } from '../../themes/fieldStyles';
 
+const isPickerTriggerButton = (target: EventTarget | null) =>
+  target instanceof Element && Boolean(target.closest('button'));
+
 export interface DateFieldProps {
   title?: string;
   description?: string;
@@ -28,6 +31,7 @@ export const DateField: React.FC<DateFieldProps> = props => {
   const field = useFieldContext<string>();
 
   const dateValue = useMemo(() => dayjs(field.state.value), [field.state.value]);
+  const [pickerOpen, setPickerOpen] = useState(false);
 
   return (
     <Box sx={fieldSectionSx}>
@@ -41,6 +45,12 @@ export const DateField: React.FC<DateFieldProps> = props => {
           format={dateTimeFormatISO}
           minDateTime={minDate || dayjs()}
           ampm={false}
+          open={pickerOpen}
+          onOpen={() => setPickerOpen(true)}
+          onClose={() => {
+            setPickerOpen(false);
+            field.handleBlur();
+          }}
           onChange={newDate => field.handleChange(newDate?.format(dateTimeFormatISO)!)}
           enableAccessibleFieldDOMStructure={false}
           slots={{
@@ -53,11 +63,15 @@ export const DateField: React.FC<DateFieldProps> = props => {
               id: `${id}-field`,
               error: !field.state.meta.isValid,
               helperText: field.state.meta.errors?.[0],
-              onBlur: field.handleBlur,
+              onClick: (event: React.MouseEvent<HTMLDivElement>) => {
+                if (isPickerTriggerButton(event.target)) {
+                  return;
+                }
+                setPickerOpen(true);
+              },
               sx: datePickerFieldSx,
               inputProps: {
                 'data-testid': `${id}-field`,
-                readOnly: true,
               },
             },
             openPickerButton: {
@@ -65,6 +79,7 @@ export const DateField: React.FC<DateFieldProps> = props => {
                 color: 'text.light',
                 marginRight: 0,
                 padding: 0,
+                cursor: 'pointer',
                 '& .MuiSvgIcon-root': {
                   fontSize: 16,
                 },
diff --git a/apps/sv/frontend/src/components/form-components/EffectiveDateField.tsx b/apps/sv/frontend/src/components/form-components/EffectiveDateField.tsx
index a61ba99dac..479b896315 100644
--- a/apps/sv/frontend/src/components/form-components/EffectiveDateField.tsx
+++ b/apps/sv/frontend/src/components/form-components/EffectiveDateField.tsx
@@ -2,18 +2,21 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { KeyboardArrowDown } from '@mui/icons-material';
+import { Box, FormControlLabel, Radio, RadioGroup, Typography } from '@mui/material';
 import { useFieldContext } from '../../hooks/formContext';
 import { DesktopDateTimePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import { dateTimeFormatISO } from '@canton-network/splice-common-frontend-utils';
 import dayjs from 'dayjs';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { EffectivityType } from '../../utils/types';
-import React, { useMemo } from 'react';
-import { RadioSelector } from './RadioSelector';
-import { datePickerFieldSx } from '../../themes/fieldStyles';
+import React, { useMemo, useState } from 'react';
+import { fieldDescriptionSx } from '../../themes/fieldStyles';
 
 const effectiveAtDisplayFormat = 'YYYY-MM-DD HH:mm';
 
+const isPickerTriggerButton = (target: EventTarget | null) =>
+  target instanceof Element && Boolean(target.closest('button'));
+
 export interface EffectiveDateFieldProps {
   title?: string;
   description?: string;
@@ -23,9 +26,10 @@ export interface EffectiveDateFieldProps {
 
 export const EffectiveDateField: React.FC<EffectiveDateFieldProps> = props => {
   const { initialEffectiveDate, id } = props;
-  const title = props.title ?? 'Effective At';
-  const dateDescription =
-    props.description ?? 'Select the block at which the proposal will take effect';
+  const title = props.title ? props.title : 'Vote Proposal Effectivity';
+  const description = props.description
+    ? props.description
+    : 'Select the date and time the proposal will take effect';
 
   const field = useFieldContext<{
     type: EffectivityType;
@@ -39,6 +43,8 @@ export const EffectiveDateField: React.FC<EffectiveDateFieldProps> = props => {
     [field.state.value.effectiveDate]
   );
 
+  const [pickerOpen, setPickerOpen] = useState(false);
+
   const handleTypeChange = (type: EffectivityType) => {
     if (type === 'custom') {
       const currentDate = field.state.value?.effectiveDate
@@ -58,75 +64,138 @@ export const EffectiveDateField: React.FC<EffectiveDateFieldProps> = props => {
   };
 
   return (
-    <RadioSelector
-      id={id}
-      title={title}
-      value={currentType}
-      onChange={value => handleTypeChange(value as EffectivityType)}
-      options={[
-        {
-          value: 'custom',
-          label: 'Date',
-          description: dateDescription,
-          extension:
-            currentType === 'custom' ? (
-              <LocalizationProvider dateAdapter={AdapterDayjs}>
-                <DesktopDateTimePicker
-                  value={dateValue}
-                  format={effectiveAtDisplayFormat}
-                  ampm={false}
-                  sx={{ width: '100%', display: 'block' }}
-                  onClose={() => field.handleBlur()}
-                  onChange={newDate => {
-                    field.handleChange({
-                      type: 'custom',
-                      effectiveDate: newDate?.format(dateTimeFormatISO) || undefined,
-                    });
-                  }}
-                  enableAccessibleFieldDOMStructure={false}
-                  slots={{
-                    openPickerIcon: KeyboardArrowDown,
-                  }}
-                  slotProps={{
-                    openPickerButton: {
-                      sx: {
-                        color: 'text.light',
-                        marginRight: 0,
-                        p: 0,
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+      <Typography variant="h5" gutterBottom>
+        {title}
+      </Typography>
+
+      <RadioGroup
+        value={currentType}
+        onChange={e => handleTypeChange(e.target.value as EffectivityType)}
+      >
+        <FormControlLabel
+          value="custom"
+          control={<Radio />}
+          label={<Typography>Date</Typography>}
+        />
+
+        {currentType === 'custom' && (
+          <>
+            <Typography sx={fieldDescriptionSx} gutterBottom>
+              {description}
+            </Typography>
+
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <DesktopDateTimePicker
+                value={dateValue}
+                format={effectiveAtDisplayFormat}
+                ampm={false}
+                open={pickerOpen}
+                sx={{ width: '100%', display: 'block' }}
+                onOpen={() => setPickerOpen(true)}
+                onClose={() => {
+                  setPickerOpen(false);
+                  field.handleBlur();
+                }}
+                onChange={newDate => {
+                  field.handleChange({
+                    type: 'custom',
+                    effectiveDate: newDate?.format(dateTimeFormatISO) || undefined,
+                  });
+                }}
+                enableAccessibleFieldDOMStructure={false}
+                slots={{
+                  openPickerIcon: KeyboardArrowDown,
+                }}
+                slotProps={{
+                  openPickerButton: {
+                    sx: {
+                      color: 'text.light',
+                      marginRight: 0,
+                      p: 0,
+                      cursor: 'pointer',
+                      '& .MuiSvgIcon-root': {
+                        fontSize: 16,
+                      },
+                    },
+                  },
+                  textField: {
+                    fullWidth: true,
+                    variant: 'outlined',
+                    id: `${id}-field`,
+                    className: 'effective-date-field',
+                    error: !field.state.meta.isValid,
+                    helperText: field.state.meta.errors?.[0],
+                    onClick: (event: React.MouseEvent<HTMLDivElement>) => {
+                      if (isPickerTriggerButton(event.target)) {
+                        return;
+                      }
+                      setPickerOpen(true);
+                    },
+                    inputProps: {
+                      'data-testid': `${id}-field`,
+                    },
+                    sx: theme => ({
+                      width: '100%',
+                      cursor: 'pointer',
+                      '& .MuiOutlinedInput-root': {
+                        backgroundColor: '#363636',
+                        borderRadius: '4px',
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                        alignSelf: 'stretch',
+                        flexWrap: 'nowrap',
+                        padding: '13px 16px',
+                        overflow: 'hidden',
+                        minHeight: 'unset',
                         cursor: 'pointer',
-                        '& .MuiSvgIcon-root': {
-                          fontSize: 16,
+                        '& fieldset': {
+                          border: 'none',
+                          borderRadius: '4px',
                         },
                       },
-                    },
-                    textField: {
-                      fullWidth: true,
-                      variant: 'outlined',
-                      id: `${id}-field`,
-                      className: 'effective-date-field',
-                      error: !field.state.meta.isValid,
-                      helperText: field.state.meta.errors?.[0],
-                      onBlur: field.handleBlur,
-                      sx: datePickerFieldSx,
-                      inputProps: {
-                        'data-testid': `${id}-field`,
-                        readOnly: true,
+                      '& .MuiOutlinedInput-input': {
+                        ...theme.typography.body2,
+                        flex: 1,
+                        minWidth: 0,
+                        padding: 0,
+                        lineHeight: '22px',
+                        color: theme.palette.text.light,
+                        backgroundColor: 'transparent',
+                        borderRadius: 0,
+                        cursor: 'pointer',
+                        WebkitBoxShadow: 'none',
                       },
-                    },
-                  }}
-                />
-              </LocalizationProvider>
-            ) : null,
-        },
-        {
-          value: 'threshold',
-          label: 'Make effective at threshold',
-          description:
-            'This will allow the vote proposal to take effect immediately when 2/3 vote in favor',
-          radioId: 'effective-at-threshold-radio',
-          testId: 'effective-at-threshold-radio',
-        },
-      ]}
-    />
+                      '& .MuiInputAdornment-root': {
+                        flexShrink: 0,
+                        marginLeft: theme.spacing(1.25),
+                      },
+                      '& .MuiFormHelperText-root': {
+                        mx: 0,
+                      },
+                    }),
+                  },
+                }}
+              />
+            </LocalizationProvider>
+          </>
+        )}
+
+        <FormControlLabel
+          value="threshold"
+          control={<Radio id="effective-at-threshold-radio" />}
+          label={
+            <Box>
+              <Typography>Make effective at threshold</Typography>
+              <Typography sx={fieldDescriptionSx}>
+                Allow the vote proposal to take effect immediately when 2/3 vote in favor
+              </Typography>
+            </Box>
+          }
+          sx={{ mt: 2 }}
+        />
+      </RadioGroup>
+    </Box>
   );
 };
diff --git a/apps/sv/frontend/src/themes/fieldStyles.ts b/apps/sv/frontend/src/themes/fieldStyles.ts
index 53c308d5b1..aa396f01aa 100644
--- a/apps/sv/frontend/src/themes/fieldStyles.ts
+++ b/apps/sv/frontend/src/themes/fieldStyles.ts
@@ -222,6 +222,7 @@ const datePickerInputRootSx: SxProps<Theme> = theme => ({
   backgroundColor: fieldSurfaceBackground,
   borderRadius: '4px',
   overflow: 'hidden',
+  cursor: 'pointer',
   ...fieldOutlineSx(theme),
   ...fieldAdornmentSx,
   '&.MuiInputBase-root, &.MuiOutlinedInput-root, &.MuiInputBase-adornedEnd': {
@@ -235,6 +236,7 @@ const datePickerInputRootSx: SxProps<Theme> = theme => ({
     padding: 0,
     minHeight: 0,
     height: 'auto',
+    cursor: 'pointer',
   },
   '& .MuiInputAdornment-positionEnd': {
     marginLeft: 'auto',
@@ -247,6 +249,7 @@ const datePickerInputRootSx: SxProps<Theme> = theme => ({
 export const datePickerFieldSx: SxProps<Theme> = theme => ({
   ...fieldHelperSx,
   width: '100%',
+  cursor: 'pointer',
   '& .MuiOutlinedInput-root':
     typeof datePickerInputRootSx === 'function'
       ? datePickerInputRootSx(theme)

From 8d521889673854fa75f5f447e7166073b302d663 Mon Sep 17 00:00:00 2001
From: Tim Pelzer <tim.pelzer@finoa.io>
Date: Mon, 20 Jul 2026 08:15:58 +0000
Subject: [PATCH 3/5] Remove custom picker logic due to MUI focus shft
 interfering with the integration tests

Signed-off-by: Tim Pelzer <tim.pelzer@finoa.io>
---
 .../components/form-components/DateField.tsx  | 20 +++-------------
 .../form-components/EffectiveDateField.tsx    | 24 +++----------------
 apps/sv/frontend/src/themes/fieldStyles.ts    |  3 ---
 3 files changed, 6 insertions(+), 41 deletions(-)

diff --git a/apps/sv/frontend/src/components/form-components/DateField.tsx b/apps/sv/frontend/src/components/form-components/DateField.tsx
index 655cf0907b..b783a2a27c 100644
--- a/apps/sv/frontend/src/components/form-components/DateField.tsx
+++ b/apps/sv/frontend/src/components/form-components/DateField.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) 2024 Digital Asset (Switzerland) GmbH and/or its affiliates. All rights reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import { useMemo, useState } from 'react';
+import { useMemo } from 'react';
 import { KeyboardArrowDown } from '@mui/icons-material';
 import { Box, Typography } from '@mui/material';
 import { DesktopDateTimePicker, LocalizationProvider } from '@mui/x-date-pickers';
@@ -16,9 +16,6 @@ import {
   fieldSectionTitleSx,
 } from '../../themes/fieldStyles';
 
-const isPickerTriggerButton = (target: EventTarget | null) =>
-  target instanceof Element && Boolean(target.closest('button'));
-
 export interface DateFieldProps {
   title?: string;
   description?: string;
@@ -31,7 +28,6 @@ export const DateField: React.FC<DateFieldProps> = props => {
   const field = useFieldContext<string>();
 
   const dateValue = useMemo(() => dayjs(field.state.value), [field.state.value]);
-  const [pickerOpen, setPickerOpen] = useState(false);
 
   return (
     <Box sx={fieldSectionSx}>
@@ -45,12 +41,7 @@ export const DateField: React.FC<DateFieldProps> = props => {
           format={dateTimeFormatISO}
           minDateTime={minDate || dayjs()}
           ampm={false}
-          open={pickerOpen}
-          onOpen={() => setPickerOpen(true)}
-          onClose={() => {
-            setPickerOpen(false);
-            field.handleBlur();
-          }}
+          onClose={() => field.handleBlur()}
           onChange={newDate => field.handleChange(newDate?.format(dateTimeFormatISO)!)}
           enableAccessibleFieldDOMStructure={false}
           slots={{
@@ -63,12 +54,7 @@ export const DateField: React.FC<DateFieldProps> = props => {
               id: `${id}-field`,
               error: !field.state.meta.isValid,
               helperText: field.state.meta.errors?.[0],
-              onClick: (event: React.MouseEvent<HTMLDivElement>) => {
-                if (isPickerTriggerButton(event.target)) {
-                  return;
-                }
-                setPickerOpen(true);
-              },
+              onBlur: field.handleBlur,
               sx: datePickerFieldSx,
               inputProps: {
                 'data-testid': `${id}-field`,
diff --git a/apps/sv/frontend/src/components/form-components/EffectiveDateField.tsx b/apps/sv/frontend/src/components/form-components/EffectiveDateField.tsx
index 479b896315..83c779107f 100644
--- a/apps/sv/frontend/src/components/form-components/EffectiveDateField.tsx
+++ b/apps/sv/frontend/src/components/form-components/EffectiveDateField.tsx
@@ -9,14 +9,11 @@ import { dateTimeFormatISO } from '@canton-network/splice-common-frontend-utils'
 import dayjs from 'dayjs';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { EffectivityType } from '../../utils/types';
-import React, { useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import { fieldDescriptionSx } from '../../themes/fieldStyles';
 
 const effectiveAtDisplayFormat = 'YYYY-MM-DD HH:mm';
 
-const isPickerTriggerButton = (target: EventTarget | null) =>
-  target instanceof Element && Boolean(target.closest('button'));
-
 export interface EffectiveDateFieldProps {
   title?: string;
   description?: string;
@@ -43,8 +40,6 @@ export const EffectiveDateField: React.FC<EffectiveDateFieldProps> = props => {
     [field.state.value.effectiveDate]
   );
 
-  const [pickerOpen, setPickerOpen] = useState(false);
-
   const handleTypeChange = (type: EffectivityType) => {
     if (type === 'custom') {
       const currentDate = field.state.value?.effectiveDate
@@ -90,13 +85,8 @@ export const EffectiveDateField: React.FC<EffectiveDateFieldProps> = props => {
                 value={dateValue}
                 format={effectiveAtDisplayFormat}
                 ampm={false}
-                open={pickerOpen}
                 sx={{ width: '100%', display: 'block' }}
-                onOpen={() => setPickerOpen(true)}
-                onClose={() => {
-                  setPickerOpen(false);
-                  field.handleBlur();
-                }}
+                onClose={() => field.handleBlur()}
                 onChange={newDate => {
                   field.handleChange({
                     type: 'custom',
@@ -126,18 +116,12 @@ export const EffectiveDateField: React.FC<EffectiveDateFieldProps> = props => {
                     className: 'effective-date-field',
                     error: !field.state.meta.isValid,
                     helperText: field.state.meta.errors?.[0],
-                    onClick: (event: React.MouseEvent<HTMLDivElement>) => {
-                      if (isPickerTriggerButton(event.target)) {
-                        return;
-                      }
-                      setPickerOpen(true);
-                    },
+                    onBlur: field.handleBlur,
                     inputProps: {
                       'data-testid': `${id}-field`,
                     },
                     sx: theme => ({
                       width: '100%',
-                      cursor: 'pointer',
                       '& .MuiOutlinedInput-root': {
                         backgroundColor: '#363636',
                         borderRadius: '4px',
@@ -149,7 +133,6 @@ export const EffectiveDateField: React.FC<EffectiveDateFieldProps> = props => {
                         padding: '13px 16px',
                         overflow: 'hidden',
                         minHeight: 'unset',
-                        cursor: 'pointer',
                         '& fieldset': {
                           border: 'none',
                           borderRadius: '4px',
@@ -164,7 +147,6 @@ export const EffectiveDateField: React.FC<EffectiveDateFieldProps> = props => {
                         color: theme.palette.text.light,
                         backgroundColor: 'transparent',
                         borderRadius: 0,
-                        cursor: 'pointer',
                         WebkitBoxShadow: 'none',
                       },
                       '& .MuiInputAdornment-root': {
diff --git a/apps/sv/frontend/src/themes/fieldStyles.ts b/apps/sv/frontend/src/themes/fieldStyles.ts
index aa396f01aa..53c308d5b1 100644
--- a/apps/sv/frontend/src/themes/fieldStyles.ts
+++ b/apps/sv/frontend/src/themes/fieldStyles.ts
@@ -222,7 +222,6 @@ const datePickerInputRootSx: SxProps<Theme> = theme => ({
   backgroundColor: fieldSurfaceBackground,
   borderRadius: '4px',
   overflow: 'hidden',
-  cursor: 'pointer',
   ...fieldOutlineSx(theme),
   ...fieldAdornmentSx,
   '&.MuiInputBase-root, &.MuiOutlinedInput-root, &.MuiInputBase-adornedEnd': {
@@ -236,7 +235,6 @@ const datePickerInputRootSx: SxProps<Theme> = theme => ({
     padding: 0,
     minHeight: 0,
     height: 'auto',
-    cursor: 'pointer',
   },
   '& .MuiInputAdornment-positionEnd': {
     marginLeft: 'auto',
@@ -249,7 +247,6 @@ const datePickerInputRootSx: SxProps<Theme> = theme => ({
 export const datePickerFieldSx: SxProps<Theme> = theme => ({
   ...fieldHelperSx,
   width: '100%',
-  cursor: 'pointer',
   '& .MuiOutlinedInput-root':
     typeof datePickerInputRootSx === 'function'
       ? datePickerInputRootSx(theme)

From 16a8ac92ea4b2bd1123b5841f59ac688afca70f0 Mon Sep 17 00:00:00 2001
From: Tim Pelzer <tim.pelzer@finoa.io>
Date: Fri, 24 Jul 2026 12:59:38 +0000
Subject: [PATCH 4/5] Combine sx props to prevent overwrite issues

Signed-off-by: Tim Pelzer <tim.pelzer@finoa.io>
---
 .../src/components/form-components/SelectField.tsx   | 10 ++++++++--
 .../src/components/form-components/TextField.tsx     | 12 ++++++++++--
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/apps/sv/frontend/src/components/form-components/SelectField.tsx b/apps/sv/frontend/src/components/form-components/SelectField.tsx
index 024f44a90f..354e4350d9 100644
--- a/apps/sv/frontend/src/components/form-components/SelectField.tsx
+++ b/apps/sv/frontend/src/components/form-components/SelectField.tsx
@@ -53,7 +53,6 @@ export const SelectField: React.FC<SelectFieldProps> = props => {
           IconComponent={KeyboardArrowDown}
           value={field.state.value}
           displayEmpty
-          sx={scrollableIdentifier ? scrollableSelectFieldSx : undefined}
           renderValue={selected => {
             if (!selected) {
               return showPlaceholder ? (
@@ -74,7 +73,14 @@ export const SelectField: React.FC<SelectFieldProps> = props => {
           disabled={disabled}
           id={`${id}-dropdown`}
           data-testid={id}
-          sx={selectFieldSx}
+          sx={
+            scrollableIdentifier
+              ? theme => ({
+                  ...(typeof selectFieldSx === 'function' ? selectFieldSx(theme) : selectFieldSx),
+                  ...scrollableSelectFieldSx,
+                })
+              : selectFieldSx
+          }
           inputProps={{
             'data-testid': `${id}-dropdown`,
             onChange: (e: FormEvent<HTMLInputElement | HTMLTextAreaElement>) => {
diff --git a/apps/sv/frontend/src/components/form-components/TextField.tsx b/apps/sv/frontend/src/components/form-components/TextField.tsx
index 78ca2740dd..fd1cfa7931 100644
--- a/apps/sv/frontend/src/components/form-components/TextField.tsx
+++ b/apps/sv/frontend/src/components/form-components/TextField.tsx
@@ -47,7 +47,6 @@ export const TextField: React.FC<TextFieldProps> = props => {
         fullWidth
         variant="outlined"
         autoComplete="off"
-        sx={singleLineFieldSx}
         value={field.state.value}
         onBlur={() => {
           field.handleBlur();
@@ -70,7 +69,16 @@ export const TextField: React.FC<TextFieldProps> = props => {
         }}
         inputProps={{ 'data-testid': id }}
         id={id}
-        sx={scrollableIdentifier ? scrollableTextFieldSx : undefined}
+        sx={
+          scrollableIdentifier
+            ? theme => ({
+                ...(typeof singleLineFieldSx === 'function'
+                  ? singleLineFieldSx(theme)
+                  : singleLineFieldSx),
+                ...scrollableTextFieldSx,
+              })
+            : singleLineFieldSx
+        }
         {...muiTextFieldProps}
       />
       {subtitle && (

From 5f832f2c9bbbda3f51ad0eb9aef04bd1d9c4f11c Mon Sep 17 00:00:00 2001
From: Tim Pelzer <tim.pelzer@finoa.io>
Date: Wed, 29 Jul 2026 09:49:29 +0000
Subject: [PATCH 5/5] Resolve merge conflicts

Signed-off-by: Tim Pelzer <tim.pelzer@finoa.io>
---
 .../form-components/EffectiveDateField.tsx    | 194 +++++++-----------
 1 file changed, 71 insertions(+), 123 deletions(-)

diff --git a/apps/sv/frontend/src/components/form-components/EffectiveDateField.tsx b/apps/sv/frontend/src/components/form-components/EffectiveDateField.tsx
index 83c779107f..fa09b9fc9b 100644
--- a/apps/sv/frontend/src/components/form-components/EffectiveDateField.tsx
+++ b/apps/sv/frontend/src/components/form-components/EffectiveDateField.tsx
@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { KeyboardArrowDown } from '@mui/icons-material';
-import { Box, FormControlLabel, Radio, RadioGroup, Typography } from '@mui/material';
 import { useFieldContext } from '../../hooks/formContext';
 import { DesktopDateTimePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import { dateTimeFormatISO } from '@canton-network/splice-common-frontend-utils';
@@ -10,7 +9,8 @@ import dayjs from 'dayjs';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { EffectivityType } from '../../utils/types';
 import React, { useMemo } from 'react';
-import { fieldDescriptionSx } from '../../themes/fieldStyles';
+import { RadioSelector } from './RadioSelector';
+import { datePickerFieldSx } from '../../themes/fieldStyles';
 
 const effectiveAtDisplayFormat = 'YYYY-MM-DD HH:mm';
 
@@ -23,10 +23,9 @@ export interface EffectiveDateFieldProps {
 
 export const EffectiveDateField: React.FC<EffectiveDateFieldProps> = props => {
   const { initialEffectiveDate, id } = props;
-  const title = props.title ? props.title : 'Vote Proposal Effectivity';
-  const description = props.description
-    ? props.description
-    : 'Select the date and time the proposal will take effect';
+  const title = props.title ?? 'Effective At';
+  const dateDescription =
+    props.description ?? 'Select the block at which the proposal will take effect';
 
   const field = useFieldContext<{
     type: EffectivityType;
@@ -59,125 +58,74 @@ export const EffectiveDateField: React.FC<EffectiveDateFieldProps> = props => {
   };
 
   return (
-    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-      <Typography variant="h5" gutterBottom>
-        {title}
-      </Typography>
-
-      <RadioGroup
-        value={currentType}
-        onChange={e => handleTypeChange(e.target.value as EffectivityType)}
-      >
-        <FormControlLabel
-          value="custom"
-          control={<Radio />}
-          label={<Typography>Date</Typography>}
-        />
-
-        {currentType === 'custom' && (
-          <>
-            <Typography sx={fieldDescriptionSx} gutterBottom>
-              {description}
-            </Typography>
-
-            <LocalizationProvider dateAdapter={AdapterDayjs}>
-              <DesktopDateTimePicker
-                value={dateValue}
-                format={effectiveAtDisplayFormat}
-                ampm={false}
-                sx={{ width: '100%', display: 'block' }}
-                onClose={() => field.handleBlur()}
-                onChange={newDate => {
-                  field.handleChange({
-                    type: 'custom',
-                    effectiveDate: newDate?.format(dateTimeFormatISO) || undefined,
-                  });
-                }}
-                enableAccessibleFieldDOMStructure={false}
-                slots={{
-                  openPickerIcon: KeyboardArrowDown,
-                }}
-                slotProps={{
-                  openPickerButton: {
-                    sx: {
-                      color: 'text.light',
-                      marginRight: 0,
-                      p: 0,
-                      cursor: 'pointer',
-                      '& .MuiSvgIcon-root': {
-                        fontSize: 16,
-                      },
-                    },
-                  },
-                  textField: {
-                    fullWidth: true,
-                    variant: 'outlined',
-                    id: `${id}-field`,
-                    className: 'effective-date-field',
-                    error: !field.state.meta.isValid,
-                    helperText: field.state.meta.errors?.[0],
-                    onBlur: field.handleBlur,
-                    inputProps: {
-                      'data-testid': `${id}-field`,
-                    },
-                    sx: theme => ({
-                      width: '100%',
-                      '& .MuiOutlinedInput-root': {
-                        backgroundColor: '#363636',
-                        borderRadius: '4px',
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                        alignItems: 'center',
-                        alignSelf: 'stretch',
-                        flexWrap: 'nowrap',
-                        padding: '13px 16px',
-                        overflow: 'hidden',
-                        minHeight: 'unset',
-                        '& fieldset': {
-                          border: 'none',
-                          borderRadius: '4px',
+    <RadioSelector
+      id={id}
+      title={title}
+      value={currentType}
+      onChange={value => handleTypeChange(value as EffectivityType)}
+      options={[
+        {
+          value: 'custom',
+          label: 'Date',
+          description: dateDescription,
+          extension:
+            currentType === 'custom' ? (
+              <LocalizationProvider dateAdapter={AdapterDayjs}>
+                <DesktopDateTimePicker
+                  value={dateValue}
+                  format={effectiveAtDisplayFormat}
+                  ampm={false}
+                  sx={{ width: '100%', display: 'block' }}
+                  onClose={() => field.handleBlur()}
+                  onChange={newDate => {
+                    field.handleChange({
+                      type: 'custom',
+                      effectiveDate: newDate?.format(dateTimeFormatISO) || undefined,
+                    });
+                  }}
+                  enableAccessibleFieldDOMStructure={false}
+                  slots={{
+                    openPickerIcon: KeyboardArrowDown,
+                  }}
+                  slotProps={{
+                    openPickerButton: {
+                      sx: {
+                        color: 'text.light',
+                        marginRight: 0,
+                        p: 0,
+                        cursor: 'pointer',
+                        '& .MuiSvgIcon-root': {
+                          fontSize: 16,
                         },
                       },
-                      '& .MuiOutlinedInput-input': {
-                        ...theme.typography.body2,
-                        flex: 1,
-                        minWidth: 0,
-                        padding: 0,
-                        lineHeight: '22px',
-                        color: theme.palette.text.light,
-                        backgroundColor: 'transparent',
-                        borderRadius: 0,
-                        WebkitBoxShadow: 'none',
-                      },
-                      '& .MuiInputAdornment-root': {
-                        flexShrink: 0,
-                        marginLeft: theme.spacing(1.25),
-                      },
-                      '& .MuiFormHelperText-root': {
-                        mx: 0,
+                    },
+                    textField: {
+                      fullWidth: true,
+                      variant: 'outlined',
+                      id: `${id}-field`,
+                      className: 'effective-date-field',
+                      error: !field.state.meta.isValid,
+                      helperText: field.state.meta.errors?.[0],
+                      onBlur: field.handleBlur,
+                      sx: datePickerFieldSx,
+                      inputProps: {
+                        'data-testid': `${id}-field`,
                       },
-                    }),
-                  },
-                }}
-              />
-            </LocalizationProvider>
-          </>
-        )}
-
-        <FormControlLabel
-          value="threshold"
-          control={<Radio id="effective-at-threshold-radio" />}
-          label={
-            <Box>
-              <Typography>Make effective at threshold</Typography>
-              <Typography sx={fieldDescriptionSx}>
-                Allow the vote proposal to take effect immediately when 2/3 vote in favor
-              </Typography>
-            </Box>
-          }
-          sx={{ mt: 2 }}
-        />
-      </RadioGroup>
-    </Box>
+                    },
+                  }}
+                />
+              </LocalizationProvider>
+            ) : null,
+        },
+        {
+          value: 'threshold',
+          label: 'Make effective at threshold',
+          description:
+            'This will allow the vote proposal to take effect immediately when 2/3 vote in favor',
+          radioId: 'effective-at-threshold-radio',
+          testId: 'effective-at-threshold-radio',
+        },
+      ]}
+    />
   );
 };