Minor tweaks to sv ui (#3243)

Signed-off-by: fayi-da <fayimora.femibalogun@digitalasset.com>

Author: fayi-da

apps/sv/frontend/src/__tests__/governance/action-required-section.test.tsx

@@ -9,6 +9,8 @@ import {
 import { ContractId } from '@daml/types';
 import { VoteRequest } from '@daml.js/splice-dso-governance/lib/Splice/DsoRules';
 import { MemoryRouter } from 'react-router-dom';
+import dayjs from 'dayjs';
+import { dateTimeFormatISO } from '@lfdecentralizedtrust/splice-common-frontend-utils';
 
 const requests: ActionRequiredData[] = [
   {
@@ -67,11 +69,13 @@ describe('Action Required', () => {
   });
 
   test('should render action required request details', () => {
+    const createdDate = dayjs().format(dateTimeFormatISO);
+    const closesDate = dayjs().add(10, 'days').format(dateTimeFormatISO);
     const actionRequired = {
       actionName: 'Feature Application',
       contractId: '2abcde123456' as ContractId<VoteRequest>,
-      votingCloses: '2029-09-25 11:00',
-      createdAt: '2029-09-25 11:00',
+      votingCloses: closesDate,
+      createdAt: createdDate,
       requester: 'sv1',
     };
 
@@ -91,7 +95,7 @@ describe('Action Required', () => {
 
     const votingCloses = screen.getByTestId('action-required-voting-closes-content');
     expect(votingCloses).toBeDefined();
-    expect(votingCloses.textContent).toBe(actionRequired.votingCloses);
+    expect(votingCloses.textContent).toBe('10 days');
 
     const requester = screen.getByTestId('action-required-requester-identifier-party-id');
     expect(requester).toBeDefined();

apps/sv/frontend/src/components/form-components/EffectiveDateField.tsx

@@ -62,7 +62,7 @@ export const EffectiveDateField: React.FC<EffectiveDateFieldProps> = props => {
         <FormControlLabel
           value="custom"
           control={<Radio />}
-          label={<Typography>Custom</Typography>}
+          label={<Typography>Date</Typography>}
         />
 
         {currentType === 'custom' && (
@@ -107,7 +107,7 @@ export const EffectiveDateField: React.FC<EffectiveDateFieldProps> = props => {
             <Box>
               <Typography>Make effective at threshold</Typography>
               <Typography variant="body2" color="text.secondary">
-                This will allow the vote proposal to take effect immediately when 2/3 vote in favor
+                Allow the vote proposal to take effect immediately when 2/3 vote in favor
               </Typography>
             </Box>
           }

apps/sv/frontend/src/components/governance/ActionRequiredSection.tsx

@@ -7,6 +7,10 @@ import { Alert, Box, Grid, Stack, Typography } from '@mui/material';
 import { Link as RouterLink } from 'react-router-dom';
 import { MemberIdentifier, PageSectionHeader } from '../../components/beta';
 import React from 'react';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+
+dayjs.extend(relativeTime);
 
 export interface ActionRequiredData {
   contractId: ContractId<VoteRequest>;
@@ -68,6 +72,7 @@ interface ActionCardProps {
 
 const ActionCard = (props: ActionCardProps) => {
   const { action, createdAt, contractId, votingEnds, requester, isYou } = props;
+  const remainingTime = dayjs(votingEnds).fromNow(true);
 
   return (
     <RouterLink to={`/governance-beta/proposals/${contractId}`} style={{ textDecoration: 'none' }}>
@@ -98,8 +103,8 @@ const ActionCard = (props: ActionCardProps) => {
           </Grid>
           <Grid size={2}>
             <ActionCardSegment
-              title="THRESHOLD DEADLINE"
-              content={votingEnds}
+              title="REMAINING TIME"
+              content={remainingTime}
               data-testid="action-required-voting-closes"
             />
           </Grid>