Update styling of proposed actions in export

Author: frozenhelium

app/src/views/DrefApplicationExport/i18n.json

@@ -110,8 +110,6 @@
         "proposedActions": "Proposed Actions",
         "proposedActionsActivities": "Activities",
         "priorityActionsBudget": "Budget (CHF)",
-        "proposedActionsEarlyActions": "Early Actions",
-        "priorityActionsEarlyResponse": "Early Response",
         "priorityActionsSubTotal": "Sub-total",
         "priorityActionsSurgeDeployment": "Surge Deployment (if applicable)",
         "priorityActionsIndirectCost": "Indirect Cost",

app/src/views/DrefApplicationExport/index.tsx

@@ -243,45 +243,51 @@
         page-break-inside: avoid;
     }
 
-    .actions-section {
+    .proposed-actions {
         display: grid;
         grid-gap: var(--go-ui-width-separator-md);
-        grid-template-columns: 1fr 1fr 1fr 1fr;
+        grid-template-columns: 6fr 5fr 5fr 4fr;
         page-break-inside: avoid;
 
-        .actions-title {
-            display: flex;
-            background-color: var(--pdf-element-bg);
+        .action-title-label {
+            background-color: var(--go-ui-color-element-background);
             padding: var(--go-ui-spacing-sm);
-            break-inside: avoid;
-            font-weight: var(--go-ui-font-weight-bold);
+            font-weight: var(--go-ui-font-weight-semibold);
         }
 
-        .actions-group {
+        .proposed-action {
             display: flex;
+            align-items: center;
+            gap: var(--go-ui-spacing-sm);
+            padding: var(--go-ui-spacing-md);
             background-color: var(--pdf-element-bg);
-            padding: var(--go-ui-spacing-sm);
-            break-inside: avoid;
 
-            .logo {
+            .proposed-action-icon {
                 height: 3rem;
             }
         }
 
-        .actions-item {
-            display: flex;
+        .sector,
+        .activity,
+        .budget {
             background-color: var(--pdf-element-bg);
             padding: var(--go-ui-spacing-sm);
             break-inside: avoid;
         }
 
-        .cost-item {
-            display: flex;
-            flex-direction: column;
+        .cost-label {
+            grid-column: span 3;
             background-color: var(--pdf-element-bg);
             padding: var(--go-ui-spacing-sm);
             break-inside: avoid;
             text-align: right;
+            font-weight: var(--go-ui-font-weight-semibold);
+        }
+
+        .cost-value {
+            background-color: var(--pdf-element-bg);
+            padding: var(--go-ui-spacing-sm);
+            break-inside: avoid;
         }
     }
 }

app/src/views/DrefApplicationExport/styles.module.css

@@ -31,7 +31,7 @@ import {
     type GoApiResponse,
     useRequest,
 } from '#utils/restRequest';
-import { EARLY_ACTIONS } from '#views/DrefApplicationForm/common';
+import { EARLY_ACTION } from '#views/DrefApplicationForm/common';
 
 import { type PartialDref } from '../../schema';
 import ActivitiesInput from './ActivitiesInput';
@@ -139,7 +139,7 @@ function ProposedActionsInput(props: Props) {
     return (
         <InputSection
             title={
-                value.proposed_type === EARLY_ACTIONS
+                value.proposed_type === EARLY_ACTION
                     ? (
                         <div className={styles.proposedAction}>
                             <img

app/src/views/DrefApplicationForm/Operation/ProposedActionsInput/index.tsx

@@ -57,7 +57,7 @@ import {
     DISASTER_FIRE,
     DISASTER_FLASH_FLOOD,
     DISASTER_FLOOD,
-    EARLY_ACTIONS,
+    EARLY_ACTION,
     EARLY_RESPONSE,
     ONSET_SUDDEN,
     OPERATION_TIMEFRAME_IMMINENT,
@@ -193,7 +193,7 @@ function Overview(props: Props) {
                         || oldValue.proposed_action.length < 1 ? [
                             {
                                 client_id: randomString(),
-                                proposed_type: EARLY_ACTIONS,
+                                proposed_type: EARLY_ACTION,
                             },
                             {
                                 client_id: randomString(),

app/src/views/DrefApplicationForm/Overview/index.tsx

@@ -35,7 +35,7 @@ export const SURGE_INDIRECT_COST = 5800;
 export const INDIRECT_COST = 5000;
 export const SUB_TOTAL = 75000;
 
-export const EARLY_ACTIONS = 1 satisfies ProposedActionOption['key'];
+export const EARLY_ACTION = 1 satisfies ProposedActionOption['key'];
 export const EARLY_RESPONSE = 2 satisfies ProposedActionOption['key'];
 export const OPERATION_TIMEFRAME_IMMINENT = 45; // 45 days
 

app/src/views/DrefApplicationForm/common.tsx

@@ -63,7 +63,7 @@ import {
 import Actions from './Actions';
 import {
     checkTabErrors,
-    EARLY_ACTIONS,
+    EARLY_ACTION,
     EARLY_RESPONSE,
     OPERATION_TIMEFRAME_IMMINENT,
     TYPE_IMMINENT,
@@ -335,7 +335,7 @@ export function Component() {
                 ).sort((a, b) => a.proposed_type - b.proposed_type) : [
                     {
                         client_id: randomString(),
-                        proposed_type: EARLY_ACTIONS,
+                        proposed_type: EARLY_ACTION,
                     },
                     {
                         client_id: randomString(),