diff --git a/src/components/DataSubmissions/DataSubmissionBatchTable.tsx b/src/components/DataSubmissions/DataSubmissionBatchTable.tsx index 5943e50f..6f25ffe2 100644 --- a/src/components/DataSubmissions/DataSubmissionBatchTable.tsx +++ b/src/components/DataSubmissions/DataSubmissionBatchTable.tsx @@ -1,7 +1,5 @@ /* eslint-disable react/no-array-index-key */ import { - Box, - CircularProgress, Table, TableBody, TableCell, @@ -17,6 +15,7 @@ import { import { ElementType, forwardRef, useEffect, useImperativeHandle, useMemo, useState } from "react"; import { useAuthContext } from "../Contexts/AuthContext"; import PaginationActions from "./PaginationActions"; +import SuspenseLoader from '../SuspenseLoader'; const StyledTableContainer = styled(TableContainer)({ borderRadius: "8px", @@ -215,23 +214,7 @@ const DataSubmissionBatchTable = ({ return ( - {loading && ( - - - - )} + {loading && ()} diff --git a/src/components/Footer/FooterDesktop.tsx b/src/components/Footer/FooterDesktop.tsx index 57461f26..ea468e31 100644 --- a/src/components/Footer/FooterDesktop.tsx +++ b/src/components/Footer/FooterDesktop.tsx @@ -222,11 +222,6 @@ const BottomFooter = styled.div` } `; -const StyledAsterisk = styled("span")(() => ({ - color: "#D54309", - marginLeft: "2px", -})); - const FooterDesktop = () => { const [emailContent, setEmailContent] = useState(""); const emailForm = useRef(null); @@ -288,7 +283,6 @@ const FooterDesktop = () => {
diff --git a/src/components/Footer/FooterMobile.tsx b/src/components/Footer/FooterMobile.tsx index e6f1b2fa..cfbea842 100644 --- a/src/components/Footer/FooterMobile.tsx +++ b/src/components/Footer/FooterMobile.tsx @@ -74,7 +74,7 @@ const FooterLinksContainer = styled.div` display: flex; flex-direction: column; .footItem { - width: 253px; + width: 253px; } .footItemTitle { @@ -151,7 +151,7 @@ const FooterLinksContainer = styled.div` margin-right: 0.25rem; } .rotate{ - transform: rotate(90deg); + transform: rotate(90deg); } `; @@ -283,11 +283,6 @@ const BottomFooter = styled.div` } `; -const StyledAsterisk = styled("span")(() => ({ - color: "#D54309", - marginLeft: "2px", -})); - const FooterMobile = () => { const [emailContent, setEmailContent] = useState(""); const emailForm = useRef(null); @@ -358,7 +353,6 @@ const FooterMobile = () => {
diff --git a/src/components/Footer/FooterTablet.tsx b/src/components/Footer/FooterTablet.tsx index 7fd9ab61..512a9fd1 100644 --- a/src/components/Footer/FooterTablet.tsx +++ b/src/components/Footer/FooterTablet.tsx @@ -15,7 +15,7 @@ const FooterContainer = styled.div` padding: 2rem 1rem 0 1rem; max-width: 1420px; margin-left: auto; - margin-right: auto; + margin-right: auto; display: flex; justify-content: space-between; @@ -237,11 +237,6 @@ const BottomFooter = styled.div` } `; -const StyledAsterisk = styled("span")(() => ({ - color: "#D54309", - marginLeft: "2px", -})); - const FooterTablet = () => { const [emailContent, setEmailContent] = useState(""); const emailForm = useRef(null); @@ -304,7 +299,6 @@ const FooterTablet = () => {
diff --git a/src/components/SuspenseLoader/index.tsx b/src/components/SuspenseLoader/index.tsx index 97227d16..6c00c647 100644 --- a/src/components/SuspenseLoader/index.tsx +++ b/src/components/SuspenseLoader/index.tsx @@ -1,26 +1,37 @@ import { Box, CircularProgress, styled } from '@mui/material'; +import { FC } from 'react'; -const StyledBox = styled(Box)({ - position: 'fixed', +type Props = { + /** + * Defines whether the loader should be fullscreen or not. + * + * @default true + */ + fullscreen?: boolean; +}; + +const StyledBox = styled(Box, { shouldForwardProp: (p) => p !== "fullscreen" })(({ fullscreen }) => ({ + position: fullscreen ? 'fixed' : 'absolute', background: '#fff', left: 0, top: 0, width: '100%', height: '100%', zIndex: "9999", -}); +})); -const SuspenseLoader = () => ( +const SuspenseLoader: FC = ({ fullscreen = true }: Props) => ( ); diff --git a/src/content/dataSubmissions/DataSubmissionsListView.tsx b/src/content/dataSubmissions/DataSubmissionsListView.tsx index db46971e..cf3e7b32 100644 --- a/src/content/dataSubmissions/DataSubmissionsListView.tsx +++ b/src/content/dataSubmissions/DataSubmissionsListView.tsx @@ -5,7 +5,7 @@ import { Table, TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, - TableSortLabel, Typography, Box, CircularProgress, + TableSortLabel, Typography, Dialog, DialogTitle } from "@mui/material"; import { LoadingButton } from '@mui/lab'; @@ -22,6 +22,7 @@ import SelectInput from "../../components/Questionnaire/SelectInput"; import TextInput from "../../components/Questionnaire/TextInput"; import GenericAlert from '../../components/GenericAlert'; import { DataCommons } from '../../config/DataCommons'; +import SuspenseLoader from '../../components/SuspenseLoader'; type T = Submission; @@ -459,22 +460,7 @@ const ListingView: FC = () => { {loading && ( - - - + )} diff --git a/src/content/organizations/ListView.tsx b/src/content/organizations/ListView.tsx index 9e630cc2..bf26bc8c 100644 --- a/src/content/organizations/ListView.tsx +++ b/src/content/organizations/ListView.tsx @@ -1,8 +1,7 @@ import React, { ElementType, FC, useEffect, useMemo, useState } from "react"; import { - Alert, Box, Button, CircularProgress, - Container, FormControl, MenuItem, - OutlinedInput, + Alert, Box, Button, + Container, FormControl, MenuItem, OutlinedInput, Select, Stack, Table, TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, TableSortLabel, Typography, styled, @@ -12,6 +11,7 @@ import { Controller, useForm } from 'react-hook-form'; import PageBanner from "../../components/PageBanner"; import Tooltip from '../../components/Tooltip'; import { useOrganizationListContext, Status } from '../../components/Contexts/OrganizationListContext'; +import SuspenseLoader from '../../components/SuspenseLoader'; type T = Partial; @@ -392,22 +392,7 @@ const ListingView: FC = () => { {status === Status.LOADING && ( - - - + )} diff --git a/src/content/questionnaire/ListView.tsx b/src/content/questionnaire/ListView.tsx index 2ca88eb2..842aa37a 100644 --- a/src/content/questionnaire/ListView.tsx +++ b/src/content/questionnaire/ListView.tsx @@ -5,7 +5,7 @@ import { Table, TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, - TableSortLabel, Typography, Box, CircularProgress, + TableSortLabel, Typography, } from "@mui/material"; import { LoadingButton } from '@mui/lab'; import { useMutation, useQuery } from '@apollo/client'; @@ -15,6 +15,7 @@ import PageBanner from '../../components/PageBanner'; import { FormatDate } from '../../utils'; import { useAuthContext } from '../../components/Contexts/AuthContext'; import { mutation as SAVE_APP, Response as SaveAppResp } from '../../graphql/saveApplication'; +import SuspenseLoader from '../../components/SuspenseLoader'; type T = Omit; @@ -296,22 +297,7 @@ const ListingView: FC = () => { {loading && ( - - - + )} diff --git a/src/content/questionnaire/sections/D.tsx b/src/content/questionnaire/sections/D.tsx index a6e3db27..6320f9d7 100644 --- a/src/content/questionnaire/sections/D.tsx +++ b/src/content/questionnaire/sections/D.tsx @@ -503,6 +503,7 @@ const FormSectionD: FC = ({ SectionOption, refs }: FormSection startIcon={} iconColor="#E74040" disabled={readOnlyInputs || status === FormStatus.SAVING} + aria-label="Remove File Type" sx={{ minWidth: "0px !important" }} /> diff --git a/src/content/users/ListView.tsx b/src/content/users/ListView.tsx index 4d755fd3..89e294a5 100644 --- a/src/content/users/ListView.tsx +++ b/src/content/users/ListView.tsx @@ -4,7 +4,6 @@ import { Alert, Box, Button, - CircularProgress, Container, FormControl, MenuItem, @@ -22,6 +21,7 @@ import { Roles } from '../../config/AuthRoles'; import { LIST_USERS, ListUsersResp } from '../../graphql'; import { formatIDP } from '../../utils'; import { useAuthContext } from '../../components/Contexts/AuthContext'; +import SuspenseLoader from '../../components/SuspenseLoader'; type T = User; @@ -378,22 +378,7 @@ const ListingView: FC = () => { {loading && ( - - - + )}