diff --git a/src/views/CountryNsOverviewCapacity/CountryNsOrganisationalCapacity/index.tsx b/src/views/CountryNsOverviewCapacity/CountryNsOrganisationalCapacity/index.tsx index 5ee3f2ba1..8c1bb8049 100644 --- a/src/views/CountryNsOverviewCapacity/CountryNsOrganisationalCapacity/index.tsx +++ b/src/views/CountryNsOverviewCapacity/CountryNsOrganisationalCapacity/index.tsx @@ -1,3 +1,4 @@ +import { isDefined } from '@togglecorp/fujs'; import { useOutletContext } from 'react-router-dom'; import Container from '#components/Container'; @@ -12,67 +13,57 @@ function CountryNsOrganisationalCapacity() { const { countryResponse } = useOutletContext(); - const leaderCapacity = countryResponse?.organizational_capacity.map( - (capacity) => capacity.leadership_capacity, - ); - - const youthCapacity = countryResponse?.organizational_capacity.map( - (capacity) => capacity.youth_capacity, - ); - - const volunteerCapacity = countryResponse?.organizational_capacity.map( - (capacity) => capacity.volunteer_capacity, - ); - - const financialCapacity = countryResponse?.organizational_capacity.map( - (capacity) => capacity.financial_capacity, - ); + const [organizationalCapacity] = countryResponse?.organizational_capacity ?? []; return ( - {/* // TODO: Hide if there is null value for capacity */} - - {leaderCapacity} - - - {youthCapacity} - - - {volunteerCapacity} - - - {financialCapacity} - + {isDefined(organizationalCapacity?.leadership_capacity) && ( + + {organizationalCapacity.leadership_capacity} + + )} + {isDefined(organizationalCapacity?.youth_capacity) && ( + + {organizationalCapacity.youth_capacity} + + )} + {isDefined(organizationalCapacity?.volunteer_capacity) && ( + + {organizationalCapacity.volunteer_capacity} + + )} + {isDefined(organizationalCapacity?.financial_capacity) && ( + + {organizationalCapacity.financial_capacity} + + )} ); } diff --git a/src/views/CountryNsOverviewCapacity/CountryNsOrganisationalCapacity/styles.module.css b/src/views/CountryNsOverviewCapacity/CountryNsOrganisationalCapacity/styles.module.css index c923844fa..5ab69a0b4 100644 --- a/src/views/CountryNsOverviewCapacity/CountryNsOrganisationalCapacity/styles.module.css +++ b/src/views/CountryNsOverviewCapacity/CountryNsOrganisationalCapacity/styles.module.css @@ -1,14 +1,8 @@ .organisational-capacity { - .capacity-card { - border-radius: var(--go-ui-border-radius-lg); - box-shadow: var(--go-ui-box-shadow-md); - padding: var(--go-ui-spacing-lg); - - .figures { - display: flex; - flex-direction: column; - gap: var(--go-ui-spacing-xs); - + .content { + .capacity-card { + border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator); + padding: var(--go-ui-spacing-lg); } } } diff --git a/src/views/CountryNsOverviewCapacity/i18n.json b/src/views/CountryNsOverviewCapacity/i18n.json index 1cf0eda7a..e1ad48f17 100644 --- a/src/views/CountryNsOverviewCapacity/i18n.json +++ b/src/views/CountryNsOverviewCapacity/i18n.json @@ -1,7 +1,7 @@ { "namespace": "countryNsOverviewCapacity", "strings": { - "nsPreparednessHeading": "NS Preparedness and Response Capcity", + "nsPreparednessHeading": "NS Preparedness and Response Capacity", "nsPreparednessDescription": "The National Society Preparedness for an Effective Response (PER) Approach interact with National Societies' processes in a structured way to contribute to their preparedness and response capacities", "perCycleHeading": "Cycle {cycle}: {countryName} PER process", "perPhaseLabel": "PER phase", @@ -9,6 +9,6 @@ "perStartPerProcess": "Start PER Process", "perViewLink": "View", "nSOverviewCapacityDescription": "This following are various processes and assessment that the NS has done with IFRC that address National Society development, capacity, preparedness, and others.", - "nsOverviewCapacityLink": "IFRC Evaluations database" + "nsOverviewCapacityLink": "IFRC Evaluations Database" } } diff --git a/src/views/CountryNsOverviewCapacity/index.tsx b/src/views/CountryNsOverviewCapacity/index.tsx index 99e9ef3d4..ae440905c 100644 --- a/src/views/CountryNsOverviewCapacity/index.tsx +++ b/src/views/CountryNsOverviewCapacity/index.tsx @@ -47,11 +47,11 @@ export function Component() { headerDescription={strings.nSOverviewCapacityDescription} headerDescriptionContainerClassName={styles.nsOverviewCapacity} actions={( - // TODO: Add IFRC Evaluation Database Link } > {strings.nsOverviewCapacityLink}