From 57e966b4f1ff40d2a8922a83be0d3fa9a6d316ee Mon Sep 17 00:00:00 2001 From: frozenhelium Date: Wed, 10 Dec 2025 12:13:54 +0545 Subject: [PATCH 1/2] feat(ui-improvements): add more predefined columns for table --- .../Navbar/CountryDropdown/index.tsx | 56 +++++++------- .../Navbar/CountryDropdown/styles.module.css | 3 +- .../components/domain/AppealsTable/i18n.json | 10 +-- .../components/domain/AppealsTable/index.tsx | 25 +++--- .../domain/AppealsTable/styles.module.css | 11 +-- app/src/utils/domain/tableHelpers/index.ts | 77 ++++++++++++++++++- .../domain/tableHelpers/styles.module.css | 16 ++++ .../OngoingEruDeployments/index.tsx | 1 - .../OngoingEruDeployments/styles.module.css | 4 - .../OngoingRapidResponseDeployments/index.tsx | 1 - .../styles.module.css | 4 - .../RapidResponsePersonnelTable/index.tsx | 1 - .../styles.module.css | 4 - .../ui/src/components/Container/index.tsx | 19 ++++- .../ui/src/components/InlineView/index.tsx | 8 +- .../components/InlineView/styles.module.css | 44 ++++++++++- .../ui/src/components/PageHeader/index.tsx | 1 + .../ui/src/components/Popup/styles.module.css | 2 +- .../ui/src/components/TabListLayout/index.tsx | 1 + .../components/Table/ColumnShortcuts/index.ts | 4 +- .../Table/ColumnShortcuts/styles.module.css | 10 +++ .../Table/HeaderCell/styles.module.css | 1 - .../Table/TableBodyContent/styles.module.css | 2 +- .../ui/src/components/Table/styles.module.css | 2 +- 24 files changed, 221 insertions(+), 86 deletions(-) diff --git a/app/src/components/Navbar/CountryDropdown/index.tsx b/app/src/components/Navbar/CountryDropdown/index.tsx index c72a505766..98f5469ffd 100644 --- a/app/src/components/Navbar/CountryDropdown/index.tsx +++ b/app/src/components/Navbar/CountryDropdown/index.tsx @@ -152,37 +152,41 @@ function CountryDropdown() { className={styles.regionDetailContent} withHeaderBorder withContentOverflow - heading={( - - {/* FIXME: use translation */} - {`${region.value} Region`} - - )} - headingLevel={4} - headerActions={( - } - /> + + {/* FIXME: use translation */} + {`${region.value} Region`} + + } + /> + )} withPadding > {/* TODO: use RawList */} {countriesInSelectedRegion?.map( @@ -193,10 +197,10 @@ function CountryDropdown() { to="countriesLayout" urlParams={{ countryId: id }} styleVariant="action" - withLinkIcon spacing="sm" withoutFullWidth withoutPadding + textSize="sm" > {name} diff --git a/app/src/components/Navbar/CountryDropdown/styles.module.css b/app/src/components/Navbar/CountryDropdown/styles.module.css index df6eace3f5..7cffb16a59 100644 --- a/app/src/components/Navbar/CountryDropdown/styles.module.css +++ b/app/src/components/Navbar/CountryDropdown/styles.module.css @@ -3,10 +3,11 @@ flex-direction: row; max-width: 64rem; min-height: 16rem; + max-height: 70vh; overflow: auto; .region-list { - flex-basis: 10rem; + flex-basis: 9rem; flex-shrink: 0; padding: var(--go-ui-spacing-md) 0 0 var(--go-ui-spacing-md); } diff --git a/app/src/components/domain/AppealsTable/i18n.json b/app/src/components/domain/AppealsTable/i18n.json index 9009d21e0c..c0862bdc0c 100644 --- a/app/src/components/domain/AppealsTable/i18n.json +++ b/app/src/components/domain/AppealsTable/i18n.json @@ -4,12 +4,12 @@ "appealsTableStartDate": "Start Date", "appealsTableStartDateAfter": "Start After", "appealsTableStartDateBefore": "Start Before", - "appealsTableType": "Appeal Type", - "appealsTableCode": "Appeal Code", + "appealsTableType": "Type", + "appealsTableCode": "Code", "appealsTableOperation": "Active Operation", "appealsTableDisasterType": "Disaster Type", - "appealsTableRequestedAmount": "Funding Requirements", - "appealsTableFundedAmount": "Funding Coverage", + "appealsTableRequestedAmount": "Requested", + "appealsTableFundedAmount": "Funding", "appealsTableCountry": "Country", "appealsTableFilterTypePlaceholder": "All Appeal Types", "appealsTableFilterDisastersPlaceholder": "All Disaster Types", @@ -17,4 +17,4 @@ "appealsTableFilterDistrictPlaceholder": "All Provinces", "appealsTableProvinces": "Provinces" } -} \ No newline at end of file +} diff --git a/app/src/components/domain/AppealsTable/index.tsx b/app/src/components/domain/AppealsTable/index.tsx index 08c71f4df5..9019fe0305 100644 --- a/app/src/components/domain/AppealsTable/index.tsx +++ b/app/src/components/domain/AppealsTable/index.tsx @@ -15,7 +15,6 @@ import { SortContext } from '@ifrc-go/ui/contexts'; import { useTranslation } from '@ifrc-go/ui/hooks'; import { createDateColumn, - createNumberColumn, createProgressColumn, createStringColumn, getPercentage, @@ -31,7 +30,12 @@ import DisasterTypeSelectInput from '#components/domain/DisasterTypeSelectInput' import DistrictSearchMultiSelectInput, { type DistrictItem } from '#components/domain/DistrictSearchMultiSelectInput'; import useGlobalEnums from '#hooks/domain/useGlobalEnums'; import useFilterState from '#hooks/useFilterState'; -import { createLinkColumn } from '#utils/domain/tableHelpers'; +import { + createBudgetColumn, + createCountryColumn, + createDisasterTypeColumn, + createEventColumn, +} from '#utils/domain/tableHelpers'; import type { GoApiResponse, GoApiUrlQuery, @@ -148,11 +152,9 @@ function AppealsTable(props: Props) { 'code', strings.appealsTableCode, (item) => item.code, - { - columnClassName: styles.code, - }, + { columnClassName: styles.code }, ), - createLinkColumn( + createEventColumn( 'operation', strings.appealsTableOperation, (item) => item.name, @@ -161,20 +163,17 @@ function AppealsTable(props: Props) { urlParams: { emergencyId: item.event }, }), ), - createStringColumn( + createDisasterTypeColumn( 'dtype', strings.appealsTableDisasterType, (item) => item.dtype?.name, { sortable: true }, ), - createNumberColumn( + createBudgetColumn( 'amount_requested', strings.appealsTableRequestedAmount, (item) => item.amount_requested, - { - sortable: true, - suffix: ' CHF', - }, + { sortable: true }, ), createProgressColumn( 'amount_funded', @@ -188,7 +187,7 @@ function AppealsTable(props: Props) { { sortable: true }, ), variant !== 'country' - ? createLinkColumn( + ? createCountryColumn( 'country', strings.appealsTableCountry, (item) => item.country?.name, diff --git a/app/src/components/domain/AppealsTable/styles.module.css b/app/src/components/domain/AppealsTable/styles.module.css index 9fcb7cc6b0..9c744c1414 100644 --- a/app/src/components/domain/AppealsTable/styles.module.css +++ b/app/src/components/domain/AppealsTable/styles.module.css @@ -1,20 +1,13 @@ .appeals-table { - .filter-actions { - align-self: end; - } - .table { - .start-date { - width: 0%; - min-width: 9rem; - } - .appeal-type { width: 0%; + min-width: 6rem; } .code { width: 0%; + min-width: 6rem; } } } diff --git a/app/src/utils/domain/tableHelpers/index.ts b/app/src/utils/domain/tableHelpers/index.ts index 20a054269f..f2cd91bc39 100644 --- a/app/src/utils/domain/tableHelpers/index.ts +++ b/app/src/utils/domain/tableHelpers/index.ts @@ -6,8 +6,9 @@ import { type ReducedListDisplayProps, type SortDirection, type TableActionsProps, + NumberOutputProps, } from '@ifrc-go/ui'; -import { numericIdSelector } from '@ifrc-go/ui/utils'; +import { createNumberColumn, createStringColumn, numericIdSelector } from '@ifrc-go/ui/utils'; import { _cs } from '@togglecorp/fujs'; import Link, { type Props as LinkProps } from '#components/Link'; @@ -19,6 +20,7 @@ import type { Props as RegionLinkProps } from '../RegionLink'; import RegionLink from '../RegionLink'; import styles from './styles.module.css'; +import { CellProps } from '../../../../../packages/ui/dist/components/Table/Cell'; type Options = { sortable?: boolean, @@ -176,3 +178,76 @@ export function createRegionListColumn( return item; } + +export function createCountryColumn( + id: string, + title: string, + accessor: (item: D) => React.ReactNode, + rendererParams: (item: D) => LinkProps, + options?: Options, +) { + return createLinkColumn( + id, + title, + accessor, + rendererParams, + { + ...options, + columnClassName: _cs(styles.country, options?.columnClassName), + }, + ); +} + +export function createEventColumn( + id: string, + title: string, + accessor: (item: D) => React.ReactNode, + rendererParams: (item: D) => LinkProps, + options?: Options, +) { + return createLinkColumn( + id, + title, + accessor, + rendererParams, + { + ...options, + columnClassName: _cs(styles.event, options?.columnClassName), + }, + ); +} + +export function createDisasterTypeColumn( + id: string, + title: string, + accessor: (item: D) => string | undefined | null, + options?: Options, HeaderCellProps>, +) { + return createStringColumn( + id, + title, + accessor, + { + ...options, + columnClassName: _cs(styles.disasterType, options?.columnClassName), + }, + ); +} + +export function createBudgetColumn( + id: string, + title: string, + accessor: (item: D) => number | undefined | null, + options?: Options, +) { + return createNumberColumn( + id, + title, + accessor, + { + suffix: ' CHF', + ...options, + columnClassName: _cs(styles.budget, options?.columnClassName), + }, + ); +} diff --git a/app/src/utils/domain/tableHelpers/styles.module.css b/app/src/utils/domain/tableHelpers/styles.module.css index 510f61db01..aec997fd00 100644 --- a/app/src/utils/domain/tableHelpers/styles.module.css +++ b/app/src/utils/domain/tableHelpers/styles.module.css @@ -1,3 +1,19 @@ .country-list { min-width: 8rem; } + +.country { + min-width: 8rem; +} + +.event { + min-width: 10rem; +} + +.disaster-type { + min-width: 8rem; +} + +.budget { + min-width: 8rem; +} diff --git a/app/src/views/ActiveSurgeDeployments/OngoingEruDeployments/index.tsx b/app/src/views/ActiveSurgeDeployments/OngoingEruDeployments/index.tsx index 6af32e0865..4651f306d3 100644 --- a/app/src/views/ActiveSurgeDeployments/OngoingEruDeployments/index.tsx +++ b/app/src/views/ActiveSurgeDeployments/OngoingEruDeployments/index.tsx @@ -230,7 +230,6 @@ function OngoingEruDeployments() { startDate: item.start_date, endDate: item.end_date, }), - { columnClassName: styles.timeline }, ), createEmptyColumn(), ]), diff --git a/app/src/views/ActiveSurgeDeployments/OngoingEruDeployments/styles.module.css b/app/src/views/ActiveSurgeDeployments/OngoingEruDeployments/styles.module.css index 05a8dce702..c71722eb6f 100644 --- a/app/src/views/ActiveSurgeDeployments/OngoingEruDeployments/styles.module.css +++ b/app/src/views/ActiveSurgeDeployments/OngoingEruDeployments/styles.module.css @@ -15,10 +15,6 @@ width: 10rem; } - .timeline { - width: 22rem; - } - .actions { width: 3rem; } diff --git a/app/src/views/ActiveSurgeDeployments/OngoingRapidResponseDeployments/index.tsx b/app/src/views/ActiveSurgeDeployments/OngoingRapidResponseDeployments/index.tsx index aca479cf8f..68e7116df9 100644 --- a/app/src/views/ActiveSurgeDeployments/OngoingRapidResponseDeployments/index.tsx +++ b/app/src/views/ActiveSurgeDeployments/OngoingRapidResponseDeployments/index.tsx @@ -235,7 +235,6 @@ function OngoingRapidResponseDeployments() { startDate: item.start_date, endDate: item.end_date, }), - { columnClassName: styles.timeline }, ), createEmptyColumn(), ]), diff --git a/app/src/views/ActiveSurgeDeployments/OngoingRapidResponseDeployments/styles.module.css b/app/src/views/ActiveSurgeDeployments/OngoingRapidResponseDeployments/styles.module.css index 3a8bd9cc3a..eab10283b2 100644 --- a/app/src/views/ActiveSurgeDeployments/OngoingRapidResponseDeployments/styles.module.css +++ b/app/src/views/ActiveSurgeDeployments/OngoingRapidResponseDeployments/styles.module.css @@ -19,10 +19,6 @@ width: 10rem; } - .timeline { - width: 22rem; - } - .actions { width: 3rem; } diff --git a/app/src/views/EmergencySurge/RapidResponsePersonnelTable/index.tsx b/app/src/views/EmergencySurge/RapidResponsePersonnelTable/index.tsx index 34250e57cc..fe6c986c28 100644 --- a/app/src/views/EmergencySurge/RapidResponsePersonnelTable/index.tsx +++ b/app/src/views/EmergencySurge/RapidResponsePersonnelTable/index.tsx @@ -192,7 +192,6 @@ export default function RapidResponsePersonnelTable(props: Props) { startDate: item.start_date, endDate: item.end_date, }), - { columnClassName: styles.timeline }, ), ]), [ diff --git a/app/src/views/EmergencySurge/RapidResponsePersonnelTable/styles.module.css b/app/src/views/EmergencySurge/RapidResponsePersonnelTable/styles.module.css index f9ed491fd0..6aa6f0d738 100644 --- a/app/src/views/EmergencySurge/RapidResponsePersonnelTable/styles.module.css +++ b/app/src/views/EmergencySurge/RapidResponsePersonnelTable/styles.module.css @@ -3,9 +3,5 @@ width: 25rem; min-width: 15rem; } - - .timeline { - min-width: 25rem; - } } diff --git a/packages/ui/src/components/Container/index.tsx b/packages/ui/src/components/Container/index.tsx index d27eab7b14..af3c4b62e9 100644 --- a/packages/ui/src/components/Container/index.tsx +++ b/packages/ui/src/components/Container/index.tsx @@ -1,6 +1,7 @@ import { HTMLProps, RefObject, + useMemo, } from 'react'; import { _cs, @@ -12,7 +13,7 @@ import BlockView from '#components/BlockView'; import DefaultMessage from '#components/DefaultMessage'; import Description from '#components/Description'; import Heading, { type Props as HeadingProps } from '#components/Heading'; -import InlineView from '#components/InlineView'; +import InlineView, { Props as InlineViewProps } from '#components/InlineView'; import ListView from '#components/ListView'; import useSpacingToken from '#hooks/useSpacingToken'; import { @@ -78,7 +79,7 @@ function Container(props: Props) { heading, withEllipsizedHeading, - headingLevel, + headingLevel = 3, headerIcons, headerActions, headerDescription, @@ -174,6 +175,18 @@ function Container(props: Props) { ); + const wrapBreakpoint = useMemo(() => { + if (withoutWrapInHeader) { + return 'none'; + } + + if (headingLevel > 3) { + return 'sm'; + } + + return 'md'; + }, [headingLevel, withoutWrapInHeader]); + return ( diff --git a/packages/ui/src/components/InlineView/styles.module.css b/packages/ui/src/components/InlineView/styles.module.css index b107bf6efc..ff6961fb79 100644 --- a/packages/ui/src/components/InlineView/styles.module.css +++ b/packages/ui/src/components/InlineView/styles.module.css @@ -1,10 +1,48 @@ .inline-view { - &.with-wrap { + &.with-sm-wrap-breakpoint, + &.with-md-wrap-breakpoint, + &.with-lg-wrap-breakpoint { container-type: inline-size; } @container (max-width: 18rem) { - &.with-wrap { + &.with-sm-wrap-breakpoint { + >.inline-layout { + &:has(> .before-content) { + grid-template-columns: auto minmax(0, 1fr); + } + + &:not(:has(> .before-content)) { + grid-template-columns: minmax(0, 1fr); + } + + > .after-content { + grid-column: 1 / -1; + } + } + } + } + + @container (max-width: 24rem) { + &.with-md-wrap-breakpoint { + >.inline-layout { + &:has(> .before-content) { + grid-template-columns: auto minmax(0, 1fr); + } + + &:not(:has(> .before-content)) { + grid-template-columns: minmax(0, 1fr); + } + + > .after-content { + grid-column: 1 / -1; + } + } + } + } + + @container (max-width: 32rem) { + &.with-lg-wrap-breakpoint { >.inline-layout { &:has(> .before-content) { grid-template-columns: auto minmax(0, 1fr); @@ -15,9 +53,7 @@ } > .after-content { - grid-row-start: 1; grid-column: 1 / -1; - justify-self: end; } } } diff --git a/packages/ui/src/components/PageHeader/index.tsx b/packages/ui/src/components/PageHeader/index.tsx index 5145e43f31..769b9b2e31 100644 --- a/packages/ui/src/components/PageHeader/index.tsx +++ b/packages/ui/src/components/PageHeader/index.tsx @@ -56,6 +56,7 @@ function PageHeader(props: Props) { {wikiLink} )} + wrapBreakpoint="lg" > {breadCrumbs} diff --git a/packages/ui/src/components/Popup/styles.module.css b/packages/ui/src/components/Popup/styles.module.css index 5730905097..3eae3be78b 100644 --- a/packages/ui/src/components/Popup/styles.module.css +++ b/packages/ui/src/components/Popup/styles.module.css @@ -3,7 +3,7 @@ border-radius: var(--go-ui-spacing-xs); box-shadow: var(--go-ui-box-shadow-2xl); background-color: var(--go-ui-color-white); - max-height: 40vh; + max-height: 50vh; overflow: auto; &.top-orientation { diff --git a/packages/ui/src/components/TabListLayout/index.tsx b/packages/ui/src/components/TabListLayout/index.tsx index a68a24d150..c5a959f581 100644 --- a/packages/ui/src/components/TabListLayout/index.tsx +++ b/packages/ui/src/components/TabListLayout/index.tsx @@ -74,6 +74,7 @@ function TabListLayout(props: Props) { : spacing} role="tablist" withWrap={styleVariant === 'nav'} + withSpacingOpticalCorrection > {children} diff --git a/packages/ui/src/components/Table/ColumnShortcuts/index.ts b/packages/ui/src/components/Table/ColumnShortcuts/index.ts index 8fcbcd27a9..7fb9ae2a7f 100644 --- a/packages/ui/src/components/Table/ColumnShortcuts/index.ts +++ b/packages/ui/src/components/Table/ColumnShortcuts/index.ts @@ -96,7 +96,7 @@ export function createProgressColumn( } = { id, title, - columnClassName: options?.columnClassName, + columnClassName: _cs(styles.progressColumn, options?.columnClassName), headerCellRenderer: HeaderCell, headerCellRendererClassName: options?.headerCellRendererClassName, headerContainerClassName: options?.headerContainerClassName, @@ -421,7 +421,7 @@ export function createTimelineColumn( }), headerContainerClassName: options?.headerContainerClassName, cellRendererClassName: options?.cellRendererClassName, - columnClassName: options?.columnClassName, + columnClassName: _cs(styles.timelineColumn, options?.columnClassName), headerCellRendererClassName: options?.headerCellRendererClassName, cellContainerClassName: _cs( options?.cellContainerClassName, diff --git a/packages/ui/src/components/Table/ColumnShortcuts/styles.module.css b/packages/ui/src/components/Table/ColumnShortcuts/styles.module.css index 3d6c082322..d3605ef6c7 100644 --- a/packages/ui/src/components/Table/ColumnShortcuts/styles.module.css +++ b/packages/ui/src/components/Table/ColumnShortcuts/styles.module.css @@ -23,3 +23,13 @@ width: 0%; min-width: 3rem; } + +.progress-column { + width: 0%; + min-width: 8rem; +} + +.timeline-column { + width: 0%; + min-width: 22rem; +} diff --git a/packages/ui/src/components/Table/HeaderCell/styles.module.css b/packages/ui/src/components/Table/HeaderCell/styles.module.css index 5bfa21a695..7198aece8f 100644 --- a/packages/ui/src/components/Table/HeaderCell/styles.module.css +++ b/packages/ui/src/components/Table/HeaderCell/styles.module.css @@ -3,7 +3,6 @@ align-items: center; color: var(--go-ui-color-text-black); font-weight: var(--go-ui-font-weight-semibold); - gap: var(--go-ui-spacing-2xs); .sort-button { flex-shrink: 0; diff --git a/packages/ui/src/components/Table/TableBodyContent/styles.module.css b/packages/ui/src/components/Table/TableBodyContent/styles.module.css index eb0a51b09c..8939a3e238 100644 --- a/packages/ui/src/components/Table/TableBodyContent/styles.module.css +++ b/packages/ui/src/components/Table/TableBodyContent/styles.module.css @@ -1,6 +1,6 @@ .row { .cell { - padding: var(--go-ui-spacing-sm); + padding: var(--go-ui-spacing-xs); overflow: hidden; overflow-wrap: break-word; } diff --git a/packages/ui/src/components/Table/styles.module.css b/packages/ui/src/components/Table/styles.module.css index fc9afd77c0..072f6910f1 100644 --- a/packages/ui/src/components/Table/styles.module.css +++ b/packages/ui/src/components/Table/styles.module.css @@ -28,7 +28,7 @@ background-color: var(--go-ui-color-background); .header-component { - padding: var(--go-ui-spacing-xs) var(--go-ui-spacing-sm); + padding: var(--go-ui-spacing-xs); font-size: var(--go-ui-font-size-sm); } } From fd2c00232d5968d572d179f00dcde9d0e82309a9 Mon Sep 17 00:00:00 2001 From: frozenhelium Date: Mon, 15 Dec 2025 14:28:22 +0545 Subject: [PATCH 2/2] feat(ui-improvements): update Container to support centerd contents --- app/src/components/Navbar/index.tsx | 133 +++++---- app/src/components/Navbar/styles.module.css | 10 +- app/src/components/Page/index.tsx | 2 +- app/src/components/Page/styles.module.css | 2 +- app/src/components/TabPage/index.tsx | 2 +- app/src/components/WikiLink/styles.module.css | 2 +- .../components/domain/AppealsTable/index.tsx | 4 +- app/src/utils/domain/tableHelpers/index.ts | 47 ++- .../domain/tableHelpers/styles.module.css | 14 +- .../ActiveDrefTable/index.tsx | 19 +- .../views/AccountMyFormsFieldReport/index.tsx | 26 +- .../styles.module.css | 18 -- app/src/views/AccountMyFormsPer/index.tsx | 9 +- .../views/AccountMyFormsPer/styles.module.css | 4 + .../index.tsx | 21 +- .../ActivitiesInput/index.tsx | 1 - app/src/views/DrefFinalReportForm/index.tsx | 126 ++++---- .../EmergencyReportAndDocument/index.tsx | 27 +- app/src/views/Login/index.tsx | 26 +- .../OldDrefFinalReportForm/Overview/index.tsx | 2 +- .../AreaInput/ComponentInput/index.tsx | 3 + app/src/views/RecoverAccount/index.tsx | 64 ++-- .../RecentEmergenciesTable/index.tsx | 22 +- .../RecentEmergenciesTable/styles.module.css | 8 - app/src/views/Register/index.tsx | 280 +++++++++--------- app/src/views/ResendValidationEmail/index.tsx | 64 ++-- .../ResendValidationEmail/styles.module.css | 14 - go-api | 2 +- .../ui/src/components/BlockView/index.tsx | 12 +- .../ui/src/components/Container/index.tsx | 26 +- .../components/Container/styles.module.css | 6 + .../components/ExpandableContainer/index.tsx | 1 + packages/ui/src/index.css | 53 ++-- .../000063-1765977376504.json | 29 ++ 34 files changed, 569 insertions(+), 510 deletions(-) delete mode 100644 app/src/views/AccountMyFormsFieldReport/styles.module.css delete mode 100644 app/src/views/RegionOperations/RecentEmergenciesTable/styles.module.css delete mode 100644 app/src/views/ResendValidationEmail/styles.module.css create mode 100644 translationMigrations/000063-1765977376504.json diff --git a/app/src/components/Navbar/index.tsx b/app/src/components/Navbar/index.tsx index be067b2ef4..c4f42806ec 100644 --- a/app/src/components/Navbar/index.tsx +++ b/app/src/components/Navbar/index.tsx @@ -61,72 +61,79 @@ function Navbar(props: Props) { className={styles.top} contentClassName={styles.topContent} > -
- - {strings.headerLogoAltText} - - {environment !== 'production' && ( -
- {environment} -
- )} -
- - - {!isAuthenticated && ( - <> - +
+ + {strings.headerLogoAltText} + + {environment !== 'production' && ( +
+ {environment} +
+ )} +
+ + + {!isAuthenticated && ( + <> + + {strings.userMenuLogin} + + + {strings.userMenuRegister} + + + )} + + + - {strings.userMenuLogin} - - + - {strings.userMenuRegister} - - - )} - - - - {strings.headerDropdownNewFieldReport} - - - {strings.headerDropdownNew3WActivity} - - - {strings.headerDropdownNewDrefApplication} - - - {strings.headerDropdownNewFlashUpdate} - - - + {strings.headerDropdownNew3WActivity} + + + {strings.headerDropdownNewDrefApplication} + + + {strings.headerDropdownNewFlashUpdate} + + + + - + { children } diff --git a/app/src/components/Page/styles.module.css b/app/src/components/Page/styles.module.css index 343fe10629..02110e41f8 100644 --- a/app/src/components/Page/styles.module.css +++ b/app/src/components/Page/styles.module.css @@ -23,7 +23,7 @@ } .main-section { - padding: var(--go-ui-spacing-xl) var(--go-ui-spacing-lg); + padding: var(--go-ui-spacing-4xl) var(--go-ui-spacing-lg); } } } diff --git a/app/src/components/TabPage/index.tsx b/app/src/components/TabPage/index.tsx index a118e57631..d7a2782df2 100644 --- a/app/src/components/TabPage/index.tsx +++ b/app/src/components/TabPage/index.tsx @@ -78,7 +78,7 @@ function TabPage(props: Props) { )} {mainContent} diff --git a/app/src/components/WikiLink/styles.module.css b/app/src/components/WikiLink/styles.module.css index 2e655aa0ee..df2d7c1dc9 100644 --- a/app/src/components/WikiLink/styles.module.css +++ b/app/src/components/WikiLink/styles.module.css @@ -1,6 +1,6 @@ .wiki-link { .icon { line-height: 1; - font-size: var(--go-ui-font-size-3xl); + font-size: var(--go-ui-font-size-2xl); } } diff --git a/app/src/components/domain/AppealsTable/index.tsx b/app/src/components/domain/AppealsTable/index.tsx index 9019fe0305..665405b795 100644 --- a/app/src/components/domain/AppealsTable/index.tsx +++ b/app/src/components/domain/AppealsTable/index.tsx @@ -31,6 +31,7 @@ import DistrictSearchMultiSelectInput, { type DistrictItem } from '#components/d import useGlobalEnums from '#hooks/domain/useGlobalEnums'; import useFilterState from '#hooks/useFilterState'; import { + createAppealCodeColumn, createBudgetColumn, createCountryColumn, createDisasterTypeColumn, @@ -148,11 +149,10 @@ function AppealsTable(props: Props) { columnClassName: styles.appealType, }, ), - createStringColumn( + createAppealCodeColumn( 'code', strings.appealsTableCode, (item) => item.code, - { columnClassName: styles.code }, ), createEventColumn( 'operation', diff --git a/app/src/utils/domain/tableHelpers/index.ts b/app/src/utils/domain/tableHelpers/index.ts index f2cd91bc39..59cead6fc0 100644 --- a/app/src/utils/domain/tableHelpers/index.ts +++ b/app/src/utils/domain/tableHelpers/index.ts @@ -2,13 +2,17 @@ import { type Column, HeaderCell, type HeaderCellProps, + type NumberOutputProps, ReducedListDisplay, type ReducedListDisplayProps, type SortDirection, type TableActionsProps, - NumberOutputProps, } from '@ifrc-go/ui'; -import { createNumberColumn, createStringColumn, numericIdSelector } from '@ifrc-go/ui/utils'; +import { + createNumberColumn, + createStringColumn, + numericIdSelector, +} from '@ifrc-go/ui/utils'; import { _cs } from '@togglecorp/fujs'; import Link, { type Props as LinkProps } from '#components/Link'; @@ -20,7 +24,6 @@ import type { Props as RegionLinkProps } from '../RegionLink'; import RegionLink from '../RegionLink'; import styles from './styles.module.css'; -import { CellProps } from '../../../../../packages/ui/dist/components/Table/Cell'; type Options = { sortable?: boolean, @@ -168,7 +171,7 @@ export function createRegionListColumn( }; }, cellRendererClassName: options?.cellRendererClassName, - columnClassName: options?.columnClassName, + columnClassName: _cs(styles.regionList, options?.columnClassName), headerCellRendererClassName: options?.headerCellRendererClassName, cellContainerClassName: options?.cellContainerClassName, columnWidth: options?.columnWidth, @@ -221,7 +224,7 @@ export function createDisasterTypeColumn( id: string, title: string, accessor: (item: D) => string | undefined | null, - options?: Options, HeaderCellProps>, + options?: Options, ) { return createStringColumn( id, @@ -234,6 +237,40 @@ export function createDisasterTypeColumn( ); } +export function createTitleColumn( + id: string, + title: string, + accessor: (item: D) => string | undefined | null, + options?: Options, +) { + return createStringColumn( + id, + title, + accessor, + { + ...options, + columnClassName: _cs(styles.title, options?.columnClassName), + }, + ); +} + +export function createAppealCodeColumn( + id: string, + title: string, + accessor: (item: D) => string | undefined | null, + options?: Options, +) { + return createStringColumn( + id, + title, + accessor, + { + ...options, + columnClassName: _cs(styles.appealCode, options?.columnClassName), + }, + ); +} + export function createBudgetColumn( id: string, title: string, diff --git a/app/src/utils/domain/tableHelpers/styles.module.css b/app/src/utils/domain/tableHelpers/styles.module.css index aec997fd00..d7df63f3b0 100644 --- a/app/src/utils/domain/tableHelpers/styles.module.css +++ b/app/src/utils/domain/tableHelpers/styles.module.css @@ -1,3 +1,7 @@ +.region-list { + min-width: 8rem; +} + .country-list { min-width: 8rem; } @@ -7,7 +11,15 @@ } .event { - min-width: 10rem; + min-width: 14rem; +} + +.title { + min-width: 14rem; +} + +.appeal-code { + min-width: 8rem; } .disaster-type { diff --git a/app/src/views/AccountMyFormsDref/ActiveDrefTable/index.tsx b/app/src/views/AccountMyFormsDref/ActiveDrefTable/index.tsx index 9b91bb5d0d..6c6c7da303 100644 --- a/app/src/views/AccountMyFormsDref/ActiveDrefTable/index.tsx +++ b/app/src/views/AccountMyFormsDref/ActiveDrefTable/index.tsx @@ -42,6 +42,11 @@ import { DREF_TYPE_LOAN, type TypeOfDrefEnum, } from '#utils/constants'; +import { + createAppealCodeColumn, + createCountryColumn, + createTitleColumn, +} from '#utils/domain/tableHelpers'; import { useRequest } from '#utils/restRequest'; import DrefTableActions, { type Props as DrefTableActionsProps } from '../DrefTableActions'; @@ -240,19 +245,16 @@ function ActiveDrefTable(props: Props) { 'created_at', strings.activeDrefTableCreatedHeading, (item) => item.created_at, - { columnClassName: styles.date }, ), - createStringColumn( + createAppealCodeColumn( 'appeal_code', strings.activeDrefTableAppealCodeHeading, (item) => item.appeal_code, - { columnClassName: styles.appealCode }, ), - createStringColumn( + createTitleColumn( 'title', strings.activeDrefTableTitleHeading, (item) => item.title, - { columnClassName: styles.title }, ), createStringColumn( 'type', @@ -260,11 +262,14 @@ function ActiveDrefTable(props: Props) { (item) => item.application_type_display, { columnClassName: styles.stage }, ), - createStringColumn( + createCountryColumn( 'country', strings.activeDrefTableCountryHeading, (item) => item.country_details?.name, - { columnClassName: styles.country }, + (item) => ({ + to: 'countriesLayout', + urlParams: { countryId: item.country }, + }), ), createStringColumn( 'type_of_dref', diff --git a/app/src/views/AccountMyFormsFieldReport/index.tsx b/app/src/views/AccountMyFormsFieldReport/index.tsx index cd391ed4e6..f06d041054 100644 --- a/app/src/views/AccountMyFormsFieldReport/index.tsx +++ b/app/src/views/AccountMyFormsFieldReport/index.tsx @@ -9,7 +9,6 @@ import { SortContext } from '@ifrc-go/ui/contexts'; import { useTranslation } from '@ifrc-go/ui/hooks'; import { createDateColumn, - createStringColumn, numericIdSelector, resolveToComponent, } from '@ifrc-go/ui/utils'; @@ -20,7 +19,8 @@ import useUserMe from '#hooks/domain/useUserMe'; import useFilterState from '#hooks/useFilterState'; import { createCountryListColumn, - createLinkColumn, + createDisasterTypeColumn, + createEventColumn, } from '#utils/domain/tableHelpers'; import { type GoApiResponse, @@ -28,7 +28,6 @@ import { } from '#utils/restRequest'; import i18n from './i18n.json'; -import styles from './styles.module.css'; type FieldReportResponse = GoApiResponse<'/api/v2/field-report/'>; type FieldReportListItem = NonNullable[number]; @@ -71,12 +70,9 @@ export function Component() { 'created_at', strings.createdAtHeading, (item) => item.start_date, - { - sortable: true, - columnClassName: styles.createdAt, - }, + { sortable: true }, ), - createLinkColumn( + createEventColumn( 'summary', strings.nameHeading, (item) => item.summary, @@ -84,12 +80,9 @@ export function Component() { to: 'fieldReportDetails', urlParams: { fieldReportId: item.id }, }), - { - sortable: true, - columnClassName: styles.summary, - }, + { sortable: true }, ), - createLinkColumn( + createEventColumn( 'event_name', strings.emergencyHeading, (item) => item.event_details?.name, @@ -97,22 +90,19 @@ export function Component() { to: 'emergenciesLayout', urlParams: { emergencyId: item.event }, }), - { columnClassName: styles.event }, ), - createStringColumn( + createDisasterTypeColumn( 'dtype', strings.disasterTypeHeading, (item) => item.dtype_details?.name, { sortable: true, - columnClassName: styles.disasterType, }, ), createCountryListColumn( 'countries', strings.countryHeading, (item) => item.countries_details, - { columnClassName: styles.countries }, ), ]), [ @@ -140,7 +130,6 @@ export function Component() { return ( ([ - createLinkColumn( + createCountryColumn( 'country', strings.tableCountryTitle, (item) => item.country_details?.name, @@ -140,7 +140,10 @@ export function Component() { 'phase', strings.tablePerPhaseTitle, (item) => (isDefined(item.phase) ? `${item.phase} - ${item.phase_display}` : DEFAULT_INVALID_TEXT), - { sortable: true }, + { + sortable: true, + columnClassName: styles.phaseColumn, + }, ), createElementColumn( 'actions', diff --git a/app/src/views/AccountMyFormsPer/styles.module.css b/app/src/views/AccountMyFormsPer/styles.module.css index d7b046f1df..d74db68171 100644 --- a/app/src/views/AccountMyFormsPer/styles.module.css +++ b/app/src/views/AccountMyFormsPer/styles.module.css @@ -3,4 +3,8 @@ border-bottom: unset; background-color: var(--go-ui-color-gray-20); } + + .phase-column { + min-width: 9rem; + } } diff --git a/app/src/views/CountryOngoingActivitiesEmergencies/index.tsx b/app/src/views/CountryOngoingActivitiesEmergencies/index.tsx index 9bcb4c5de1..ed899e4aae 100644 --- a/app/src/views/CountryOngoingActivitiesEmergencies/index.tsx +++ b/app/src/views/CountryOngoingActivitiesEmergencies/index.tsx @@ -22,7 +22,6 @@ import { SortContext } from '@ifrc-go/ui/contexts'; import { useTranslation } from '@ifrc-go/ui/hooks'; import { createDateColumn, - createNumberColumn, createProgressColumn, createStringColumn, getPercentage, @@ -74,7 +73,12 @@ import { DEFAULT_MAP_PADDING, DURATION_MAP_ZOOM, } from '#utils/constants'; -import { createLinkColumn } from '#utils/domain/tableHelpers'; +import { + createAppealCodeColumn, + createBudgetColumn, + createDisasterTypeColumn, + createEventColumn, +} from '#utils/domain/tableHelpers'; import { type CountryOutletContext } from '#utils/outletContext'; import type { GoApiResponse, @@ -215,12 +219,12 @@ export function Component() { (item) => item.atype_display, { sortable: true }, ), - createStringColumn( + createAppealCodeColumn( 'code', strings.appealsTableCode, (item) => item.code, ), - createLinkColumn( + createEventColumn( 'operation', strings.appealsTableOperation, (item) => item.name, @@ -229,20 +233,17 @@ export function Component() { urlParams: { emergencyId: item.event }, }), ), - createStringColumn( + createDisasterTypeColumn( 'dtype', strings.appealsTableDisasterType, (item) => item.dtype?.name, { sortable: true }, ), - createNumberColumn( + createBudgetColumn( 'amount_requested', strings.appealsTableRequestedAmount, (item) => item.amount_requested, - { - sortable: true, - suffix: ' CHF', - }, + { sortable: true }, ), createProgressColumn( 'amount_funded', diff --git a/app/src/views/DrefFinalReportForm/Operation/ProposedActionsInput/ActivitiesInput/index.tsx b/app/src/views/DrefFinalReportForm/Operation/ProposedActionsInput/ActivitiesInput/index.tsx index e300c6571c..8b9f6bfc66 100644 --- a/app/src/views/DrefFinalReportForm/Operation/ProposedActionsInput/ActivitiesInput/index.tsx +++ b/app/src/views/DrefFinalReportForm/Operation/ProposedActionsInput/ActivitiesInput/index.tsx @@ -75,7 +75,6 @@ function ActivitiesInput(props: Props) { title={strings.drefFormProposedActionRemoveSector} ariaLabel={strings.drefFormProposedActionRemoveSector} round={false} - styleVariant="action" disabled={disabled || readOnly} > diff --git a/app/src/views/DrefFinalReportForm/index.tsx b/app/src/views/DrefFinalReportForm/index.tsx index eeee7fc736..773f2e4dbd 100644 --- a/app/src/views/DrefFinalReportForm/index.tsx +++ b/app/src/views/DrefFinalReportForm/index.tsx @@ -61,7 +61,6 @@ import { checkTabErrors, EARLY_ACTION, EARLY_RESPONSE, - TYPE_IMMINENT, } from './common'; import EventDetail from './EventDetail'; import ObsoletePayloadModal from './ObsoletePayloadModal'; @@ -77,43 +76,37 @@ type GetFinalReportResponse = GoApiResponse<'/api/v2/dref-final-report/{id}/'>; type TabKeys = 'overview' | 'eventDetail' | 'actions' | 'operation' | 'submission'; -function getNextStep(current: TabKeys, direction: 1 | -1, typeOfDref: TypeOfDrefEnum | '' | undefined) { - if (typeOfDref === TYPE_IMMINENT && direction === 1) { - const mapping: { [key in TabKeys]?: TabKeys } = { - overview: 'eventDetail', - eventDetail: 'operation', - operation: 'submission', - }; - return mapping[current]; +function getTabKeyList(typeOfDref: TypeOfDrefEnum | undefined | null) { + if (typeOfDref === DREF_TYPE_IMMINENT) { + return [ + 'overview', + 'eventDetail', + 'operation', + 'submission', + ] satisfies TabKeys[]; } - if (typeOfDref === TYPE_IMMINENT && direction === -1) { - const mapping: { [key in TabKeys]?: TabKeys } = { - submission: 'operation', - operation: 'eventDetail', - eventDetail: 'overview', - }; - return mapping[current]; - } - if (direction === 1) { - const mapping: { [key in TabKeys]?: TabKeys } = { - overview: 'eventDetail', - eventDetail: 'actions', - actions: 'operation', - operation: 'submission', - }; - return mapping[current]; - } - if (direction === -1) { - const mapping: { [key in TabKeys]?: TabKeys } = { - submission: 'operation', - operation: 'actions', - actions: 'eventDetail', - eventDetail: 'overview', - }; - return mapping[current]; - } - return undefined; + + return [ + 'overview', + 'eventDetail', + 'actions', + 'operation', + 'submission', + ] satisfies TabKeys[]; +} + +function getNextStep( + current: TabKeys, + direction: 1 | -1, + typeOfDref: TypeOfDrefEnum | undefined | null, +) { + const tabKeyList = getTabKeyList(typeOfDref); + + const currentIndex = tabKeyList.findIndex((key) => key === current); + + return tabKeyList[currentIndex + direction]; } + /** @knipignore */ // eslint-disable-next-line import/prefer-default-export export function Component() { @@ -424,6 +417,20 @@ export function Component() { const shouldHideForm = fetchingFinalReport || isDefined(finalReportResponseError); + const tabNameMap: Record = { + overview: strings.formTabOverviewLabel, + eventDetail: finalReportResponse?.type_of_dref === DREF_TYPE_IMMINENT + ? strings.formTabEventDevelopmentLabel + : strings.formTabEventDetailLabel, + actions: strings.formTabActionsLabel, + operation: finalReportResponse?.type_of_dref === DREF_TYPE_IMMINENT + ? strings.formTabImplementation + : strings.formTabOperationLabel, + submission: strings.formTabSubmissionLabel, + }; + + const tabKeyList = getTabKeyList(finalReportResponse?.type_of_dref); + return ( )} info={!shouldHideForm && ( - - - {strings.formTabOverviewLabel} - - - {finalReportResponse?.type_of_dref !== DREF_TYPE_IMMINENT - ? strings.formTabEventDetailLabel - : strings.formTabEventDevelopmentLabel} - - {finalReportResponse?.type_of_dref !== DREF_TYPE_IMMINENT && ( + + {tabKeyList.map((tabKey, i) => ( - {strings.formTabActionsLabel} + {tabNameMap[tabKey]} - )} - - {finalReportResponse?.type_of_dref !== DREF_TYPE_IMMINENT - ? strings.formTabOperationLabel - : strings.formTabImplementation} - - - {strings.formTabSubmissionLabel} - + ))} )} withBackgroundColorInMainSection diff --git a/app/src/views/EmergencyReportAndDocument/index.tsx b/app/src/views/EmergencyReportAndDocument/index.tsx index a50ca9d9c9..dac6b34195 100644 --- a/app/src/views/EmergencyReportAndDocument/index.tsx +++ b/app/src/views/EmergencyReportAndDocument/index.tsx @@ -16,6 +16,7 @@ import { import { SortContext } from '@ifrc-go/ui/contexts'; import { useTranslation } from '@ifrc-go/ui/hooks'; import { + createActionColumn, createDateColumn, createStringColumn, numericIdSelector, @@ -35,9 +36,11 @@ import { adminUrl } from '#config'; import useRegion, { type Region } from '#hooks/domain/useRegion'; import useFilterState from '#hooks/useFilterState'; import { + createAppealCodeColumn, createCountryListColumn, - createLinkColumn, + createEventColumn, createRegionListColumn, + createTitleColumn, } from '#utils/domain/tableHelpers'; import { type EmergencyOutletContext } from '#utils/outletContext'; import { resolveUrl } from '#utils/resolveUrl'; @@ -164,7 +167,7 @@ export function Component() { strings.fieldReportsTableCreatedAt, (item) => item.created_at, ), - createLinkColumn( + createEventColumn( 'summary', strings.fieldReportsTableName, (item) => item.summary, @@ -207,29 +210,33 @@ export function Component() { (item) => item.type, { sortable: true }, ), - createStringColumn( + createAppealCodeColumn( 'code', strings.appealDocumentCode, (item) => item.appeal.code, ), - createStringColumn( + createTitleColumn( 'description', strings.appealDocumentDescription, (item) => item.description, ), - createStringColumn( + createTitleColumn( 'name', strings.appealDocumentLink, (item) => item.name, { sortable: true }, ), - createLinkColumn( + createActionColumn( 'action', - '', - () => , (item) => ({ - external: true, - href: item.document ?? item.document_url ?? undefined, + children: ( + + + + ), }), ), ]), diff --git a/app/src/views/Login/index.tsx b/app/src/views/Login/index.tsx index cf9ad2166c..496810c2f3 100644 --- a/app/src/views/Login/index.tsx +++ b/app/src/views/Login/index.tsx @@ -149,14 +149,17 @@ export function Component() { heading={strings.loginHeader} description={strings.loginSubHeader} > - -
+ - + - + - -
+ + ); } diff --git a/app/src/views/OldDrefFinalReportForm/Overview/index.tsx b/app/src/views/OldDrefFinalReportForm/Overview/index.tsx index cce5b799f2..91a8c0432c 100644 --- a/app/src/views/OldDrefFinalReportForm/Overview/index.tsx +++ b/app/src/views/OldDrefFinalReportForm/Overview/index.tsx @@ -196,7 +196,7 @@ function Overview(props: Props) { - + )} withToggleButtonOnFooter + withoutWrapInFooter initiallyExpanded withBackground withPadding diff --git a/app/src/views/RecoverAccount/index.tsx b/app/src/views/RecoverAccount/index.tsx index 8963cb40b7..01e51bca5d 100644 --- a/app/src/views/RecoverAccount/index.tsx +++ b/app/src/views/RecoverAccount/index.tsx @@ -1,6 +1,8 @@ import { useMemo } from 'react'; import { Button, + Container, + ListView, TextInput, } from '@ifrc-go/ui'; import { useTranslation } from '@ifrc-go/ui/hooks'; @@ -20,7 +22,6 @@ import { useLazyRequest } from '#utils/restRequest'; import { transformObjectError } from '#utils/restRequest/error'; import i18n from './i18n.json'; -import styles from './styles.module.css'; interface FormFields { email?: string; @@ -103,37 +104,44 @@ export function Component() { return ( -
- - - + + + + + + + +
); diff --git a/app/src/views/RegionOperations/RecentEmergenciesTable/index.tsx b/app/src/views/RegionOperations/RecentEmergenciesTable/index.tsx index d03d2c927c..20660b9891 100644 --- a/app/src/views/RegionOperations/RecentEmergenciesTable/index.tsx +++ b/app/src/views/RegionOperations/RecentEmergenciesTable/index.tsx @@ -22,8 +22,10 @@ import { import Link from '#components/Link'; import useFilterState from '#hooks/useFilterState'; import { + createBudgetColumn, createCountryListColumn, - createLinkColumn, + createDisasterTypeColumn, + createEventColumn, } from '#utils/domain/tableHelpers'; import { type GoApiResponse, @@ -31,7 +33,6 @@ import { } from '#utils/restRequest'; import i18n from './i18n.json'; -import styles from './styles.module.css'; type EventResponse = GoApiResponse<'/api/v2/event/'>; type EventListItem = NonNullable[number]; @@ -73,12 +74,9 @@ function EventItemsTable(props: Props) { 'created_at', strings.regionEmergenciesTableDate, (item) => item.created_at, - { - sortable: true, - columnClassName: styles.createdAt, - }, + { sortable: true }, ), - createLinkColumn( + createEventColumn( 'name', strings.regionEmergenciesTableName, (item) => item.name, @@ -88,7 +86,7 @@ function EventItemsTable(props: Props) { }), { sortable: true }, ), - createStringColumn( + createDisasterTypeColumn( 'dtype', strings.regionEmergenciesTableDisasterType, (item) => item.dtype?.name, @@ -99,15 +97,12 @@ function EventItemsTable(props: Props) { (item) => item.glide, { sortable: true }, ), - createNumberColumn( + createBudgetColumn( 'amount_requested', strings.regionEmergenciesTableRequestedAmt, (item) => sumSafe( item.appeals.map((appeal) => appeal.amount_requested), ), - { - suffix: ' CHF', - }, ), createNumberColumn( 'num_affected', @@ -177,7 +172,6 @@ function EventItemsTable(props: Props) { return ( )} + withLargeBreakpointInHeader > )} > - - - - - - - - - - - -
- - + + + + + + - - {isNationalSociety ? ( - + - ) : ( - )} - - - - - {justificationNeeded && ( - <> - - {strings.registerJustify} - -