[PMRP-1351] Remove inline CSS (#549)

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

* starts to remove inline css

* Moves inline css to App.scss for LG input stage

* Removes the rest of the inline css

* Removes unused variable

* Removes duplicated code in App.scss

* Adds units to new css classes

* Adds unit to all margins

---------

Co-authored-by: Jack Sutton <[email protected]>

Author: jack-nhs

app/.storybook/preview.tsx

@@ -19,15 +19,7 @@ const preview: Preview = {
         (Story) => (
             <PatientDetailsProvider patientDetails={{ ...buildPatientDetails() }}>
                 <MemoryRouter initialEntries={['/']}>
-                    <div
-                        className="nhsuk-width-container"
-                        style={{
-                            margin: `0 auto`,
-                            maxWidth: 960,
-                            padding: `0 1.0875rem 1.45rem`,
-                            minHeight: '75vh',
-                        }}
-                    >
+                    <div className="nhsuk-width-container preview">
                         <main
                             className="nhsuk-main-wrapper app-homepage"
                             id="maincontent"

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

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>

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 left-margin"
                     data-testid="delete-all-documents-btn"
-                    style={{ marginLeft: 72 }}
                     onClick={deleteAllDocuments}
                 >
                     Delete All Documents

app/src/components/blocks/_arf/uploadSummary/UploadSummary.tsx

@@ -24,7 +24,6 @@ const UploadSummary = ({ documents }: Props) => {
         );
     });
 
-    const tableMargin = { marginBottom: 50 };
     const tableCaption = (
         <>
             <h2 className="nhsuk-heading-m">
@@ -54,13 +53,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 +76,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 +116,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>

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"

app/src/components/blocks/_delete/deleteResultStage/DeleteResultStage.tsx

@@ -75,7 +75,7 @@ function DeleteResultStage({ numberOfFiles, setDownloadStage }: Props) {
                 provides a framework for consistent and effective records management, based on
                 established standards.
             </p>
-            <p style={{ marginTop: 40 }}>
+            <p className="paragraph-top-margin">
                 {isGP ? (
                     <ButtonLink onClick={handleClick} data-testid="lg-return-btn" href="#">
                         Return to patient's Lloyd George record page

app/src/components/blocks/_lloydGeorge/lloydGeorgeFileInputStage/LloydGeorgeFileInputStage.tsx

@@ -145,11 +145,11 @@ function LloydGeorgeFileInputStage({ documents, setDocuments, submitDocuments }:
                     <li>The patient details must match the record you are uploading</li>
                     <li>The patient record must be in a PDF file or multiple PDFs</li>
                     <li>Your PDF file(s) should be named in this format:</li>
-                    <p style={{ fontWeight: 600, margin: 20, marginRight: 0 }}>
+                    <p className="lg-input-format-paragraph">
                         [PDFnumber]_Lloyd_George_Record_[Patient Name]_[NHS Number]_[D.O.B].PDF
                     </p>
                 </ul>
-                <InsetText style={{ maxWidth: 'unset' }}>
+                <InsetText className="input-stage-inset-text">
                     <p>For example:</p>
                     <p>1of2_Lloyd_George_Record_[Joe Bloggs]_[1234567890]_[25-12-2019].PDF</p>
                     <p>2of2_Lloyd_George_Record_[Joe Bloggs]_[1234567890]_[25-12-2019].PDF</p>
@@ -174,10 +174,10 @@ function LloydGeorgeFileInputStage({ documents, setDocuments, submitDocuments }:
                     onDrop={onFileDrop}
                     className={'lloydgeorge_drag-and-drop'}
                 >
-                    <strong style={{ fontSize: '1.2rem' }}>
+                    <strong className="lg-input-bold">
                         Drag and drop a file or multiple files here
                     </strong>
-                    <div style={{ margin: '0 2rem' }}>
+                    <div className="lg-input-svg-display">
                         <FileSVG />
                     </div>
                     <div>
@@ -198,8 +198,7 @@ function LloydGeorgeFileInputStage({ documents, setDocuments, submitDocuments }:
                         <Button
                             data-testid={`upload-button-input`}
                             type={'button'}
-                            className={'nhsuk-button nhsuk-button--secondary'}
-                            style={{ marginBottom: 0 }}
+                            className={'nhsuk-button nhsuk-button--secondary bottom-margin'}
                             onClick={() => {
                                 fileInputRef.current?.click();
                             }}
@@ -213,8 +212,8 @@ function LloydGeorgeFileInputStage({ documents, setDocuments, submitDocuments }:
                 <Table caption="Chosen file(s)" id="selected-documents-table">
                     <Table.Head>
                         <Table.Row>
-                            <Table.Cell style={{ border: 'unset' }}>
-                                <div style={{ padding: '6px 0 12px 0', color: '#425563' }}>
+                            <Table.Cell table-cell-lg-input-cell-border>
+                                <div className="div-lg-input-cell">
                                     <strong>
                                         {`${documents.length}`} file
                                         {`${documents.length === 1 ? '' : 's'}`} chosen

app/src/components/blocks/_lloydGeorge/lloydGeorgeRetryUploadStage/LloydGeorgeRetryUploadStage.tsx

@@ -38,9 +38,8 @@ function LloydGeorgeRetryUploadStage() {
                     Try upload again
                 </Button>
                 <ButtonLink
-                    className="nhsuk-button nhsuk-button--secondary"
+                    className="nhsuk-button nhsuk-button--secondary small-left-margin"
                     data-testid="search-patient-btn"
-                    style={{ marginLeft: 18 }}
                     role="button"
                     href="#"
                     onClick={(e) => {

app/src/components/blocks/_lloydGeorge/lloydGeorgeUploadCompleteStage/LloydGeorgeUploadCompleteStage.tsx

@@ -74,7 +74,7 @@ function LloydGeorgeUploadCompleteStage({ documents }: Props) {
                     You can upload more files to their record if needed, but you cannot upload
                     duplicate files with the same name as previous uploads.
                 </p>
-                <p style={{ marginBottom: 50 }}>
+                <p className="lg-upload-paragraph">
                     If you need to replace a file, you will need to remove it and re-upload it
                     again.
                 </p>
@@ -93,9 +93,8 @@ function LloydGeorgeUploadCompleteStage({ documents }: Props) {
             </ButtonLink>
 
             <ButtonLink
-                className="nhsuk-button nhsuk-button--secondary"
+                className="nhsuk-button nhsuk-button--secondary small-left-margin"
                 data-testid="search-patient-btn"
-                style={{ marginLeft: 18 }}
                 role="button"
                 href="#"
                 onClick={(e) => {