Implement governance form field styling (Fixes #2656, #2657, #2659)

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.

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,38 +30,47 @@ 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
           value={dateValue}
           format={dateTimeFormatISO}
           minDateTime={minDate || dayjs()}
           ampm={false}
+          onClose={() => field.handleBlur()}
           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`,
               },
             },
+            openPickerButton: {
+              sx: {
+                color: 'text.light',
+                marginRight: 0,
+                padding: 0,
+                cursor: 'pointer',
+                '& .MuiSvgIcon-root': {
+                  fontSize: 16,
+                },
+              },
+            },
           }}
         />
       </LocalizationProvider>

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,10 @@ 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`,
                       },
-                      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,
-                        },
-                      }),
                     },
                   }}
                 />

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,44 +33,50 @@ 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>
         )}
       </Typography>
       <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 }}
         >

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,16 +40,19 @@ 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}
           renderValue={selected => {
             if (!selected) {
               return showPlaceholder ? (
@@ -68,6 +73,14 @@ export const SelectField: React.FC<SelectFieldProps> = props => {
           disabled={disabled}
           id={`${id}-dropdown`}
           data-testid={id}
+          sx={
+            scrollableIdentifier
+              ? theme => ({
+                  ...(typeof selectFieldSx === 'function' ? selectFieldSx(theme) : selectFieldSx),
+                  ...scrollableSelectFieldSx,
+                })
+              : selectFieldSx
+          }
           inputProps={{
             'data-testid': `${id}-dropdown`,
             onChange: (e: FormEvent<HTMLInputElement | HTMLTextAreaElement>) => {

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>
 
@@ -48,7 +54,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>
         }
@@ -58,11 +69,20 @@ 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 && (
-        <Typography variant="body2" color="text.secondary" data-testid={`${id}-subtitle`} mt={1}>
+        <Typography sx={fieldDescriptionSx} data-testid={`${id}-subtitle`}>
           {subtitle}
         </Typography>
       )}

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"
                 />
               )}

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>
           </>
         )}

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>
           </>
         )}

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>
         </>
       )}