fix(eap): update eap section according to new UI

Author: shreeyash07

app/src/App/routes/index.tsx

@@ -763,7 +763,7 @@ const accountMyFormsEap = customWrapRoute({
     parent: accountMyFormsLayout,
     path: 'eap-applications',
     component: {
-        render: () => import('#views/EapApplications'),
+        render: () => import('#views/AccountMyFormsEap'),
         props: {},
     },
     context: {

…apApplications/EapTableActions/i18n.json …ountMyFormsEap/EapTableActions/i18n.jsonapp/src/views/EapApplications/EapTableActions/i18n.json renamed to app/src/views/AccountMyFormsEap/EapTableActions/i18n.json app/src/views/EapApplications/EapTableActions/i18n.json renamed to app/src/views/AccountMyFormsEap/EapTableActions/i18n.json

@@ -41,14 +41,16 @@ function EapTableActions(props: Props) {
             <Link
                 to="eapFullForm"
                 urlParams={{ eapId }}
-                variant="secondary"
+                styleVariant="outline"
+                colorVariant="primary"
             >
                 {strings.eapFormLink}
             </Link>
             <Link
                 to="simplifiedEapForm"
                 urlParams={{ eapId }}
-                variant="secondary"
+                styleVariant="outline"
+                colorVariant="primary"
             >
                 {strings.simplifiedEapLink}
             </Link>

…apApplications/EapTableActions/index.tsx …ountMyFormsEap/EapTableActions/index.tsxapp/src/views/EapApplications/EapTableActions/index.tsx renamed to app/src/views/AccountMyFormsEap/EapTableActions/index.tsx app/src/views/EapApplications/EapTableActions/index.tsx renamed to app/src/views/AccountMyFormsEap/EapTableActions/index.tsx

@@ -36,7 +36,6 @@ import EapTableActions, { type Props as EapTableActionProps } from './EapTableAc
 import Filters, { type FilterValue } from './Filters';
 
 import i18n from './i18n.json';
-import styles from './styles.module.css';
 
 type EapResponse = GoApiResponse<'/api/v2/eap-registration/'>;
 type EapListItem = NonNullable<EapResponse['results']>[number];
@@ -108,7 +107,6 @@ export function Component() {
                         ${item.disaster_type_details?.name}
                         ${baseYear} - ${addedYear}`;
                 },
-                { columnClassName: styles.title },
             ),
             createStringColumn<EapListItem, number>(
                 'eap_type_display',
@@ -119,7 +117,6 @@ export function Component() {
                 'status_display',
                 strings.eapStatus,
                 (item) => item.status_display,
-                { columnClassName: styles.status },
             ),
             createExpandColumn<EapListItem, Key>(
                 'expandRow',
@@ -147,7 +144,6 @@ export function Component() {
                 'title',
                 '',
                 () => strings.eapRegistration,
-                { columnClassName: styles.detailTitle },
             ),
             createEmptyColumn(),
             createElementColumn<EapListItem, number, EapTableActionProps>(
@@ -180,7 +176,6 @@ export function Component() {
                         keySelector={numericIdSelector}
                         data={subRows}
                         columns={detailColumns}
-                        cellClassName={styles.subCell}
                     />
                 </>
             );
@@ -194,7 +189,6 @@ export function Component() {
 
     return (
         <Container
-            childrenContainerClassName={styles.eapFormLinks}
             heading={strings.eapApplicationsHeading}
             withHeaderBorder
             filters={(eapResponse?.count ?? 0) > 0 && (
@@ -203,10 +197,11 @@ export function Component() {
                     onChange={setFilterField}
                 />
             )}
-            actions={(
+            headerActions={(
                 <Link
                     to="newEapDevelopmentRegistration"
-                    variant="secondary"
+                    styleVariant="outline"
+                    colorVariant="primary"
                 >
                     {strings.eapRegistrationLink}
                 </Link>
@@ -221,7 +216,6 @@ export function Component() {
             )}
         >
             <Table
-                className={styles.table}
                 data={eapResponse?.results}
                 columns={baseColumns}
                 rowModifier={rowModifier}

…/views/EapApplications/Filters/i18n.json …iews/AccountMyFormsEap/Filters/i18n.jsonapp/src/views/EapApplications/Filters/i18n.json renamed to app/src/views/AccountMyFormsEap/Filters/i18n.json app/src/views/EapApplications/Filters/i18n.json renamed to app/src/views/AccountMyFormsEap/Filters/i18n.json

@@ -1,54 +1,56 @@
-import { Container } from '@ifrc-go/ui';
+import {
+    Container,
+    ListView,
+} from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
 import SurgeContentContainer from '#components/domain/SurgeContentContainer';
 import Link from '#components/Link';
 
 import i18n from './i18n.json';
-import styles from './styles.module.css';
 
 /** @knipignore */
 // eslint-disable-next-line import/prefer-default-export
 export function Component() {
     const strings = useTranslation(i18n);
 
     return (
-        <Container
-            className={styles.drefDetail}
-            contentViewType="vertical"
-            childrenContainerClassName={styles.content}
-        >
-            <SurgeContentContainer
-                heading={strings.drefIntroHeading}
+        <Container>
+            <ListView
+                layout="block"
             >
-                <div>{strings.drefIntroDetailOne}</div>
-                <div>{strings.drefIntroDetailTwo}</div>
-            </SurgeContentContainer>
-            <SurgeContentContainer
-                heading={strings.drefProcessHeading}
-            >
-                <div>{strings.drefProcessSubHeading}</div>
-                <ul>
-                    <li>
-                        {strings.drefProcessListOne}
-                    </li>
-                    <li>
-                        {strings.drefProcessListTwo}
-                    </li>
-                </ul>
-                <div>
-                    {strings.drefProcessDetailOne}
-                </div>
-                <div>
-                    {strings.drefProcessDetailTwo}
-                </div>
-            </SurgeContentContainer>
-            <Link
-                to="newDrefApplicationForm"
-                withUnderline
-            >
-                {strings.drefDrefApplication}
-            </Link>
+                <SurgeContentContainer
+                    heading={strings.drefIntroHeading}
+                >
+                    <div>{strings.drefIntroDetailOne}</div>
+                    <div>{strings.drefIntroDetailTwo}</div>
+                </SurgeContentContainer>
+                <SurgeContentContainer
+                    heading={strings.drefProcessHeading}
+                >
+                    <div>{strings.drefProcessSubHeading}</div>
+                    <ul>
+                        <li>
+                            {strings.drefProcessListOne}
+                        </li>
+                        <li>
+                            {strings.drefProcessListTwo}
+                        </li>
+                    </ul>
+                    <div>
+                        {strings.drefProcessDetailOne}
+                    </div>
+                    <div>
+                        {strings.drefProcessDetailTwo}
+                    </div>
+                </SurgeContentContainer>
+                <Link
+                    to="newDrefApplicationForm"
+                    withUnderline
+                >
+                    {strings.drefDrefApplication}
+                </Link>
+            </ListView>
         </Container>
     );
 }