Skip to content

Commit fd2c002

Browse files
frozenheliumfrozenhelium
committed
feat(ui-improvements): update Container to support centerd contents
1 parent 57e966b commit fd2c002

File tree

34 files changed

+569
-510
lines changed

34 files changed

+569
-510
lines changed

‎app/src/components/Navbar/index.tsx‎

Lines changed: 70 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -61,72 +61,79 @@ function Navbar(props: Props) {
6161
className={styles.top}
6262
contentClassName={styles.topContent}
6363
>
64-
<div className={styles.brand}>
65-
<Link to="home">
66-
<img
67-
className={styles.goIcon}
68-
src={goLogo}
69-
alt={strings.headerLogoAltText}
70-
/>
71-
</Link>
72-
{environment !== 'production' && (
73-
<div className={styles.env}>
74-
{environment}
75-
</div>
76-
)}
77-
</div>
78-
<NavigationTabList styleVariant="nav">
79-
<LanguageDropdown />
80-
{!isAuthenticated && (
81-
<>
82-
<NavigationTab
83-
to="login"
84-
className={styles.actionItem}
64+
<ListView
65+
withWrap
66+
withSpaceBetweenContents
67+
>
68+
<div className={styles.brand}>
69+
<Link to="home">
70+
<img
71+
className={styles.goIcon}
72+
src={goLogo}
73+
alt={strings.headerLogoAltText}
74+
/>
75+
</Link>
76+
{environment !== 'production' && (
77+
<div className={styles.env}>
78+
{environment}
79+
</div>
80+
)}
81+
</div>
82+
<NavigationTabList styleVariant="nav">
83+
<LanguageDropdown />
84+
{!isAuthenticated && (
85+
<>
86+
<NavigationTab
87+
to="login"
88+
className={styles.actionItem}
89+
>
90+
{strings.userMenuLogin}
91+
</NavigationTab>
92+
<NavigationTab
93+
to="register"
94+
className={styles.actionItem}
95+
>
96+
{strings.userMenuRegister}
97+
</NavigationTab>
98+
</>
99+
)}
100+
<AuthenticatedUserDropdown />
101+
<DropdownMenu
102+
label={strings.headerCreateAReportLabel}
103+
labelColorVariant="primary"
104+
labelSpacing="lg"
105+
>
106+
<DropdownMenuItem
107+
type="link"
108+
to="fieldReportFormNew"
85109
>
86-
{strings.userMenuLogin}
87-
</NavigationTab>
88-
<NavigationTab
89-
to="register"
90-
className={styles.actionItem}
110+
{strings.headerDropdownNewFieldReport}
111+
</DropdownMenuItem>
112+
<DropdownMenuItem
113+
type="link"
114+
to="newThreeWActivity"
91115
>
92-
{strings.userMenuRegister}
93-
</NavigationTab>
94-
</>
95-
)}
96-
<AuthenticatedUserDropdown />
97-
<DropdownMenu
98-
label={strings.headerCreateAReportLabel}
99-
labelColorVariant="primary"
100-
labelSpacing="lg"
101-
>
102-
<DropdownMenuItem
103-
type="link"
104-
to="fieldReportFormNew"
105-
>
106-
{strings.headerDropdownNewFieldReport}
107-
</DropdownMenuItem>
108-
<DropdownMenuItem
109-
type="link"
110-
to="newThreeWActivity"
111-
>
112-
{strings.headerDropdownNew3WActivity}
113-
</DropdownMenuItem>
114-
<DropdownMenuItem
115-
type="link"
116-
to="newDrefApplicationForm"
117-
>
118-
{strings.headerDropdownNewDrefApplication}
119-
</DropdownMenuItem>
120-
<DropdownMenuItem
121-
type="link"
122-
to="flashUpdateFormNew"
123-
>
124-
{strings.headerDropdownNewFlashUpdate}
125-
</DropdownMenuItem>
126-
</DropdownMenu>
127-
</NavigationTabList>
116+
{strings.headerDropdownNew3WActivity}
117+
</DropdownMenuItem>
118+
<DropdownMenuItem
119+
type="link"
120+
to="newDrefApplicationForm"
121+
>
122+
{strings.headerDropdownNewDrefApplication}
123+
</DropdownMenuItem>
124+
<DropdownMenuItem
125+
type="link"
126+
to="flashUpdateFormNew"
127+
>
128+
{strings.headerDropdownNewFlashUpdate}
129+
</DropdownMenuItem>
130+
</DropdownMenu>
131+
</NavigationTabList>
132+
</ListView>
128133
</PageContainer>
129-
<PageContainer>
134+
<PageContainer
135+
contentClassName={styles.bottomContent}
136+
>
130137
<ListView
131138
withWrap
132139
withSpaceBetweenContents

‎app/src/components/Navbar/styles.module.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -63,11 +63,7 @@
6363
border-bottom: var(--go-ui-width-separator-thin) solid var(--go-ui-color-primary-red);
6464

6565
.top-content {
66-
display: flex;
67-
align-items: center;
68-
gap: var(--go-ui-spacing-md) var(--go-ui-spacing-lg);
69-
flex-wrap: wrap;
70-
padding: var(--go-ui-spacing-md) var(--go-ui-spacing-lg);
66+
padding: var(--go-ui-spacing-sm) var(--go-ui-spacing-lg);
7167

7268
.brand {
7369
display: flex;
@@ -104,6 +100,10 @@
104100
}
105101
}
106102

103+
.bottom-content {
104+
padding: var(--go-ui-spacing-md) var(--go-ui-spacing-lg);
105+
}
106+
107107
.search-container {
108108
flex-basis: 30rem;
109109
}

‎app/src/components/Page/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@ function Page(props: Props) {
138138
>
139139
<ListView
140140
layout="block"
141-
spacing="xl"
141+
spacing="4xl"
142142
>
143143
{ children }
144144
</ListView>

‎app/src/components/Page/styles.module.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
}
2424

2525
.main-section {
26-
padding: var(--go-ui-spacing-xl) var(--go-ui-spacing-lg);
26+
padding: var(--go-ui-spacing-4xl) var(--go-ui-spacing-lg);
2727
}
2828
}
2929
}

‎app/src/components/TabPage/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ function TabPage(props: Props) {
7878
)}
7979
<ListView
8080
layout="block"
81-
spacing="xl"
81+
spacing="3xl"
8282
>
8383
{mainContent}
8484
</ListView>

‎app/src/components/WikiLink/styles.module.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.wiki-link {
22
.icon {
33
line-height: 1;
4-
font-size: var(--go-ui-font-size-3xl);
4+
font-size: var(--go-ui-font-size-2xl);
55
}
66
}

‎app/src/components/domain/AppealsTable/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import DistrictSearchMultiSelectInput, { type DistrictItem } from '#components/d
3131
import useGlobalEnums from '#hooks/domain/useGlobalEnums';
3232
import useFilterState from '#hooks/useFilterState';
3333
import {
34+
createAppealCodeColumn,
3435
createBudgetColumn,
3536
createCountryColumn,
3637
createDisasterTypeColumn,
@@ -148,11 +149,10 @@ function AppealsTable(props: Props) {
148149
columnClassName: styles.appealType,
149150
},
150151
),
151-
createStringColumn<AppealListItem, string>(
152+
createAppealCodeColumn<AppealListItem, string>(
152153
'code',
153154
strings.appealsTableCode,
154155
(item) => item.code,
155-
{ columnClassName: styles.code },
156156
),
157157
createEventColumn<AppealListItem, string>(
158158
'operation',

‎app/src/utils/domain/tableHelpers/index.ts‎

Lines changed: 42 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,17 @@ import {
22
type Column,
33
HeaderCell,
44
type HeaderCellProps,
5+
type NumberOutputProps,
56
ReducedListDisplay,
67
type ReducedListDisplayProps,
78
type SortDirection,
89
type TableActionsProps,
9-
NumberOutputProps,
1010
} from '@ifrc-go/ui';
11-
import { createNumberColumn, createStringColumn, numericIdSelector } from '@ifrc-go/ui/utils';
11+
import {
12+
createNumberColumn,
13+
createStringColumn,
14+
numericIdSelector,
15+
} from '@ifrc-go/ui/utils';
1216
import { _cs } from '@togglecorp/fujs';
1317

1418
import Link, { type Props as LinkProps } from '#components/Link';
@@ -20,7 +24,6 @@ import type { Props as RegionLinkProps } from '../RegionLink';
2024
import RegionLink from '../RegionLink';
2125

2226
import styles from './styles.module.css';
23-
import { CellProps } from '../../../../../packages/ui/dist/components/Table/Cell';
2427

2528
type Options<D, K, CompProps, HeaderProps> = {
2629
sortable?: boolean,
@@ -168,7 +171,7 @@ export function createRegionListColumn<DATUM, KEY>(
168171
};
169172
},
170173
cellRendererClassName: options?.cellRendererClassName,
171-
columnClassName: options?.columnClassName,
174+
columnClassName: _cs(styles.regionList, options?.columnClassName),
172175
headerCellRendererClassName: options?.headerCellRendererClassName,
173176
cellContainerClassName: options?.cellContainerClassName,
174177
columnWidth: options?.columnWidth,
@@ -221,7 +224,7 @@ export function createDisasterTypeColumn<D, K extends string | number>(
221224
id: string,
222225
title: string,
223226
accessor: (item: D) => string | undefined | null,
224-
options?: Options<D, K, CellProps<string>, HeaderCellProps>,
227+
options?: Options<D, K, { value: string }, HeaderCellProps>,
225228
) {
226229
return createStringColumn<D, K>(
227230
id,
@@ -234,6 +237,40 @@ export function createDisasterTypeColumn<D, K extends string | number>(
234237
);
235238
}
236239

240+
export function createTitleColumn<D, K extends string | number>(
241+
id: string,
242+
title: string,
243+
accessor: (item: D) => string | undefined | null,
244+
options?: Options<D, K, { value: string }, HeaderCellProps>,
245+
) {
246+
return createStringColumn<D, K>(
247+
id,
248+
title,
249+
accessor,
250+
{
251+
...options,
252+
columnClassName: _cs(styles.title, options?.columnClassName),
253+
},
254+
);
255+
}
256+
257+
export function createAppealCodeColumn<D, K extends string | number>(
258+
id: string,
259+
title: string,
260+
accessor: (item: D) => string | undefined | null,
261+
options?: Options<D, K, { value: string }, HeaderCellProps>,
262+
) {
263+
return createStringColumn<D, K>(
264+
id,
265+
title,
266+
accessor,
267+
{
268+
...options,
269+
columnClassName: _cs(styles.appealCode, options?.columnClassName),
270+
},
271+
);
272+
}
273+
237274
export function createBudgetColumn<D, K extends string | number>(
238275
id: string,
239276
title: string,

‎app/src/utils/domain/tableHelpers/styles.module.css‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
.region-list {
2+
min-width: 8rem;
3+
}
4+
15
.country-list {
26
min-width: 8rem;
37
}
@@ -7,7 +11,15 @@
711
}
812

913
.event {
10-
min-width: 10rem;
14+
min-width: 14rem;
15+
}
16+
17+
.title {
18+
min-width: 14rem;
19+
}
20+
21+
.appeal-code {
22+
min-width: 8rem;
1123
}
1224

1325
.disaster-type {

‎app/src/views/AccountMyFormsDref/ActiveDrefTable/index.tsx‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,11 @@ import {
4242
DREF_TYPE_LOAN,
4343
type TypeOfDrefEnum,
4444
} from '#utils/constants';
45+
import {
46+
createAppealCodeColumn,
47+
createCountryColumn,
48+
createTitleColumn,
49+
} from '#utils/domain/tableHelpers';
4550
import { useRequest } from '#utils/restRequest';
4651

4752
import DrefTableActions, { type Props as DrefTableActionsProps } from '../DrefTableActions';
@@ -240,31 +245,31 @@ function ActiveDrefTable(props: Props) {
240245
'created_at',
241246
strings.activeDrefTableCreatedHeading,
242247
(item) => item.created_at,
243-
{ columnClassName: styles.date },
244248
),
245-
createStringColumn<LatestDref, Key>(
249+
createAppealCodeColumn<LatestDref, Key>(
246250
'appeal_code',
247251
strings.activeDrefTableAppealCodeHeading,
248252
(item) => item.appeal_code,
249-
{ columnClassName: styles.appealCode },
250253
),
251-
createStringColumn<LatestDref, Key>(
254+
createTitleColumn<LatestDref, Key>(
252255
'title',
253256
strings.activeDrefTableTitleHeading,
254257
(item) => item.title,
255-
{ columnClassName: styles.title },
256258
),
257259
createStringColumn<LatestDref, Key>(
258260
'type',
259261
strings.activeDrefTableStageHeading,
260262
(item) => item.application_type_display,
261263
{ columnClassName: styles.stage },
262264
),
263-
createStringColumn<LatestDref, Key>(
265+
createCountryColumn<LatestDref, Key>(
264266
'country',
265267
strings.activeDrefTableCountryHeading,
266268
(item) => item.country_details?.name,
267-
{ columnClassName: styles.country },
269+
(item) => ({
270+
to: 'countriesLayout',
271+
urlParams: { countryId: item.country },
272+
}),
268273
),
269274
createStringColumn<LatestDref, Key>(
270275
'type_of_dref',

0 commit comments

Comments
 (0)