begins to move in line css style to classes in App.scss

nhsconnect · Dec 12, 2024 · e7364e1 · e7364e1
1 parent 9e359f6
commit e7364e1
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
+}