From e7364e1abec78866d8f14be2c5acda0e2287408f Mon Sep 17 00:00:00 2001
From: Jack Sutton <jack.sutton@madetech.com>
Date: Thu, 12 Dec 2024 10:41:19 +0000
Subject: [PATCH] begins to move in line css style to classes in App.scss

---
 .../_arf/completeStage/CompleteStage.tsx      |  2 +-
 .../DocumentSearchResults.tsx                 |  4 ++-
 .../DocumentSearchResultsOptions.tsx          |  5 ++-
 .../_arf/uploadSummary/UploadSummary.tsx      | 13 +++----
 .../_arf/uploadingStage/UploadingStage.tsx    |  4 +--
 app/src/styles/App.scss                       | 36 +++++++++++++++++++
 6 files changed, 48 insertions(+), 16 deletions(-)

diff --git a/app/src/components/blocks/_arf/completeStage/CompleteStage.tsx b/app/src/components/blocks/_arf/completeStage/CompleteStage.tsx
index 430f40b8a..9c154baad 100644
--- a/app/src/components/blocks/_arf/completeStage/CompleteStage.tsx
+++ b/app/src/components/blocks/_arf/completeStage/CompleteStage.tsx
@@ -13,7 +13,7 @@ function CompleteStage({ documents }: Props) {
     return (
         <>
             <UploadSummary documents={documents} />
-            <p style={{ fontWeight: '600' }}>
+            <p className="complete-stage-paragraph">
                 If you want to upload another patient&apos;s health record
             </p>
             <Button
diff --git a/app/src/components/blocks/_arf/documentSearchResults/DocumentSearchResults.tsx b/app/src/components/blocks/_arf/documentSearchResults/DocumentSearchResults.tsx
index 5e308c12a..2948ad9c0 100644
--- a/app/src/components/blocks/_arf/documentSearchResults/DocumentSearchResults.tsx
+++ b/app/src/components/blocks/_arf/documentSearchResults/DocumentSearchResults.tsx
@@ -11,7 +11,9 @@ const DocumentSearchResults = (props: Props) => {
         new Date(a.created) < new Date(b.created) ? 1 : -1;
 
     const orderedResults = [...props.searchResults].sort(sortMethod);
-    const tableCaption = <h2 style={{ fontSize: 32 }}>List of documents available</h2>;
+    const tableCaption = (
+        <h2 className="document-search-table-caption">List of documents available</h2>
+    );
     return (
         <Table id="available-files-table-title" caption={tableCaption}>
             <Table.Head>
diff --git a/app/src/components/blocks/_arf/documentSearchResultsOptions/DocumentSearchResultsOptions.tsx b/app/src/components/blocks/_arf/documentSearchResultsOptions/DocumentSearchResultsOptions.tsx
index ae8e083f9..625ec09b1 100644
--- a/app/src/components/blocks/_arf/documentSearchResultsOptions/DocumentSearchResultsOptions.tsx
+++ b/app/src/components/blocks/_arf/documentSearchResultsOptions/DocumentSearchResultsOptions.tsx
@@ -74,7 +74,7 @@ const DocumentSearchResultsOptions = (props: Props) => {
                 Only permanently delete all documents for this patient if you have a valid reason
                 to. For example, if the retention period of these documents has been reached.
             </p>
-            <div style={{ display: 'flex' }}>
+            <div className="search-result-spinner-div">
                 {props.downloadState === SUBMISSION_STATE.PENDING ? (
                     <SpinnerButton
                         id="download-spinner"
@@ -96,9 +96,8 @@ const DocumentSearchResultsOptions = (props: Props) => {
                     Download Manifest URL
                 </a>
                 <Button
-                    className="nhsuk-button nhsuk-button--secondary"
+                    className="nhsuk-button nhsuk-button--secondary margin"
                     data-testid="delete-all-documents-btn"
-                    style={{ marginLeft: 72 }}
                     onClick={deleteAllDocuments}
                 >
                     Delete All Documents
diff --git a/app/src/components/blocks/_arf/uploadSummary/UploadSummary.tsx b/app/src/components/blocks/_arf/uploadSummary/UploadSummary.tsx
index 18aaff9fc..65914493a 100644
--- a/app/src/components/blocks/_arf/uploadSummary/UploadSummary.tsx
+++ b/app/src/components/blocks/_arf/uploadSummary/UploadSummary.tsx
@@ -54,13 +54,8 @@ const UploadSummary = ({ documents }: Props) => {
             )}
             <h1 id="upload-summary-header">{pageHeader}</h1>
             {failedUploads.length > 0 && (
-                <div className={'nhsuk-form-group--error'}>
-                    <Table
-                        responsive
-                        caption={tableCaption}
-                        style={tableMargin}
-                        id="failed-uploads"
-                    >
+                <div className={'nhsuk-form-group--error margin'}>
+                    <Table responsive caption={tableCaption} id="failed-uploads">
                         <Table.Body>
                             {failedUploads.map((document) => {
                                 return (
@@ -82,7 +77,7 @@ const UploadSummary = ({ documents }: Props) => {
                 </h2>
             )}
             {successfulUploads.length > 0 && (
-                <Details style={tableMargin}>
+                <Details className="details-margin">
                     <Details.Summary
                         id="successful-uploads-dropdown"
                         aria-label="View successfully uploaded documents"
@@ -122,7 +117,7 @@ const UploadSummary = ({ documents }: Props) => {
             )}
             <PatientSummary />
 
-            <WarningCallout style={{ marginTop: 75 }} id="close-page-warning">
+            <WarningCallout className="upload-callout-warning" id="close-page-warning">
                 <WarningCallout.Label>Before you close this page</WarningCallout.Label>
                 <ul>
                     <li>
diff --git a/app/src/components/blocks/_arf/uploadingStage/UploadingStage.tsx b/app/src/components/blocks/_arf/uploadingStage/UploadingStage.tsx
index be4f5ca6c..9bf7c5c6e 100644
--- a/app/src/components/blocks/_arf/uploadingStage/UploadingStage.tsx
+++ b/app/src/components/blocks/_arf/uploadingStage/UploadingStage.tsx
@@ -43,10 +43,10 @@ function UploadingStage({ documents }: Props) {
                         return (
                             <Table.Row key={document.id}>
                                 <Table.Cell>{document.file.name}</Table.Cell>
-                                <Table.Cell style={{ width: '140px' }}>
+                                <Table.Cell className="table-cell-uploading-cell-thin">
                                     {formatFileSize(document.file.size)}
                                 </Table.Cell>
-                                <Table.Cell style={{ width: '200px' }}>
+                                <Table.Cell className="table-cell-uploading-cell-wide">
                                     <progress
                                         aria-label={`Uploading ${document.file.name}`}
                                         max="100"
diff --git a/app/src/styles/App.scss b/app/src/styles/App.scss
index 096f72080..a1d9c1d6b 100644
--- a/app/src/styles/App.scss
+++ b/app/src/styles/App.scss
@@ -807,3 +807,39 @@ $hunit: '%';
 .nhs-warning-color {
     color: $color_nhsuk-red;
 }
+
+.complete-stage-paragraph {
+    font-weight: '600';
+}
+
+.document-search-table-caption {
+    font-size: 32;
+}
+
+.search-result-spinner-div {
+    display: flex;
+}
+
+.nhsuk-button.nhsuk-button--secondary.margin {
+    margin-left: 72;
+}
+
+.table-cell-uploading-cell-thin {
+    width: '140px';
+}
+
+.table-cell-uploading-cell-wide {
+    width: '200px';
+}
+
+.nhsuk-form-group--error.margin {
+    margin-bottom: 50;
+}
+
+.details-margin {
+    margin-bottom: 50;
+}
+
+.upload-callout-warning {
+    margin-top: 75;
+}