Fix export styling

Author: barshathakuri

app/src/components/domain/DrefExportModal/index.tsx

@@ -28,6 +28,7 @@ import {
 } from '#utils/restRequest';
 
 import i18n from './i18n.json';
+import styles from './styles.module.css';
 
 type ExportTypeEnum = components<'read'>['schemas']['ExportTypeEnum'];
 type ExportStatusEnum = components<'read'>['schemas']['ExportStatusEnum'];
@@ -240,15 +241,17 @@ function DrefExportModal(props: Props) {
                         )}
                     />
                 ) : (!exportStatusResponse && (
-                    <Button
-                        variant="secondary"
-                        name={undefined}
-                        onClick={handleDrefImminent}
-                    >
-                        {isPga
-                            ? strings.drefDownloadPDFWithPGA
-                            : strings.drefDownloadPDFwithoutPGA}
-                    </Button>
+                    <div className={styles.downloadButton}>
+                        <Button
+                            variant="secondary"
+                            name={undefined}
+                            onClick={handleDrefImminent}
+                        >
+                            {isPga
+                                ? strings.drefDownloadPDFWithPGA
+                                : strings.drefDownloadPDFwithoutPGA}
+                        </Button>
+                    </div>
                 ))
             )}
             {isDefined(exportStatusResponse)

app/src/components/domain/DrefExportModal/styles.module.css

@@ -0,0 +1,6 @@
+.download-button {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    padding: var(--go-ui-spacing-md);
+}

app/src/views/DrefApplicationExport/PgaExport/index.tsx

@@ -130,19 +130,23 @@ function PgaExport() {
                 <div className={styles.bankDetails}>
                     <BlockTextOutput
                         label={strings.nationalSocietyBankName}
+                        invalidText={null}
                     />
                     <BlockTextOutput
                         label={strings.nationalSocietyBankAccountNumber}
+                        invalidText={null}
                     />
                     <BlockTextOutput
                         label={strings.nationalSocietySwiftCode}
+                        invalidText={null}
                     />
                     <BlockTextOutput
                         label={strings.nationalSocietyAmount}
                         value={strings.nationalSocietyAmountCHF}
                     />
                     <BlockTextOutput
                         label={strings.nationalSocietyAdvancePayment}
+                        invalidText={null}
                     />
                 </div>
                 <i>{strings.nationalSocietyBankFooter}</i>

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

@@ -1,10 +1,13 @@
 .pga-export {
     margin: var(--go-ui-spacing-xl) auto;
 
+    .page-break {
+        break-before: page;
+    }
+
     .description {
         margin: 0;
-        padding: 0;
-        list-style-position: inside;
+        padding-left: var(--go-ui-spacing-sm);
     }
 
     .table-description {

app/src/views/DrefApplicationExport/index.tsx

@@ -571,6 +571,7 @@ export function Component() {
                     strongValue
                 />
             </Container>
+            <div className={styles.pageBreak} />
             {showScenarioAnalysis && (
                 <>
                     <Heading level={2}>
@@ -603,7 +604,6 @@ export function Component() {
             )}
             {showEventDescriptionSection && (
                 <>
-                    <div className={styles.pageBreak} />
                     {drefResponse?.disaster_category_analysis_details?.file
                         && drefResponse.type_of_dref !== DREF_TYPE_IMMINENT && (
                         <Container>