MAT-6431: update for 508 compliance

package.json

@@ -112,7 +112,7 @@
   },
   "dependencies": {
     "@madie/cql-antlr-parser": "^1.0.0",
-    "@madie/madie-design-system": "^1.2.0",
+    "@madie/madie-design-system": "^1.2.4",
     "@madie/madie-models": "^1.3.36",
     "@mui/x-date-pickers": "^6.6.0",
     "@tanstack/match-sorter-utils": "^8.8.4",

src/components/common/ElementSection.scss

@@ -8,7 +8,7 @@ $grey-19: #dddddd;
   margin-bottom: 48px;
   > .heading-row {
     display: flex;
-    border-bottom: solid 1px $grey-19;
+    border-bottom: solid 1px #8c8c8c;
     flex-direction: row;
     flex-grow: 1;
     justify-content: space-between;

src/components/createTestCase/CreateNewTestCaseDialog.tsx

@@ -29,10 +29,9 @@ interface navigationParams {
 
 const testCaseSeriesStyles = {
   width: "50%",
-  borderRadius: "3px",
-  borderWidth: "1px",
   // remove weird line break from legend
   "& .MuiOutlinedInput-notchedOutline": {
+    borderColor: "#8c8c8c",
     borderRadius: "3px",
     "& legend": {
       width: 0,
@@ -53,7 +52,9 @@ const testCaseSeriesStyles = {
     borderRadius: "3px",
     padding: "9px 14px",
     "&::placeholder": {
-      opacity: 0.6,
+      opacity: 1,
+      color: "#717171",
+      fontFamily: "Rubik",
       paddingLeft: "5px",
     },
   },

src/components/createTestCase/TextArea.tsx

@@ -95,7 +95,7 @@ const TextArea = ({
           // resize: "vertical",
           borderRadius: "3px",
           height: "auto",
-          border: "1px solid #DDDDDD",
+          border: "1px solid #8c8c8c",
           marginTop: "8px",
           // remove weird line break from legend
           "& .MuiOutlinedInput-notchedOutline": {

src/components/editTestCase/qdm/EditTestCase.scss

@@ -89,7 +89,7 @@
     position: sticky;
     bottom: 0;
     box-shadow: 0px 0px 2px 1px rgba(241, 242, 244, 0.25);
-    border-top: solid 1px #b0b0b0;
+    border-top: solid 1px #8c8c8c;
     padding-right: 48px;
     > .spacer {
       display: flex;

src/components/editTestCase/qdm/EditTestCase.tsx

@@ -416,15 +416,14 @@ const EditTestCase = () => {
               disabled={!formik.dirty || !canEdit}
               onClick={() => setDiscardDialogOpen(true)}
             >
-              {/* variant="outline-filled" */}
               Discard Changes
             </Button>
           </div>
           {hasObservationOrStratification && (
             <div
               style={{
                 textAlign: "center",
-                color: "grey",
+                color: "#717171",
                 fontSize: "14px",
                 paddingBottom: "30px",
               }}

src/components/editTestCase/qdm/LeftPanel/ElementsTab/Demographics/DemographicsSection.tsx

@@ -218,7 +218,6 @@ const DemographicsSection = ({ canEdit }) => {
                 <FormControl>
                   <LocalizationProvider dateAdapter={AdapterDayjs}>
                     <InputLabel
-                      required
                       htmlFor={"birth-date"}
                       style={{ marginBottom: 0, height: 16 }} // force a heignt
                       sx={birthDateLabelStyle}

src/components/editTestCase/qdm/LeftPanel/ElementsTab/Demographics/DemographicsSectionStyles.tsx

@@ -19,12 +19,11 @@ export const birthDateLabelStyle = [
   },
 ];
 export const textFieldStyle = {
-  borderRadius: "3px",
   height: 40,
-  border: "1px solid #DDDDDD",
   marginTop: "8px",
   "& .MuiOutlinedInput-notchedOutline": {
     borderRadius: "3px",
+    border: "1px solid #8c8c8c",
     "& legend": {
       width: 0,
     },
@@ -53,12 +52,11 @@ export const textFieldStyle = {
 };
 
 export const timeTextFieldStyle = {
-  borderRadius: "3px",
   height: 40,
-  border: "1px solid #DDD",
   width: "110px",
   marginTop: "8px",
   "& .MuiOutlinedInput-notchedOutline": {
+    border: "1px solid #8c8c8c",
     borderRadius: "3px",
     "& legend": {
       width: 0,

src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsCard/DataElementsCard.scss

@@ -1,7 +1,7 @@
 $grey-19: #ddd;
 
 .data-elements-card {
-  border: solid 1px $grey-19;
+  border: solid 1px #8c8c8c;
   margin-top: 16px;
   padding: 16px 16px 32px 16px;
   display: flex;

src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsTable/DataElementsTable.scss

@@ -36,7 +36,7 @@ $header-weight: 500;
 
   > thead {
     background-color: #ededed;
-    border-bottom: solid 1px #cacaca;
+    border-bottom: solid 1px #8c8c8c;
     // maybe overflow here.
 
     > tr > th {
@@ -45,7 +45,6 @@ $header-weight: 500;
       font-weight: $header-weight;
       padding: 16px;
       text-align: left;
-      border-bottom: 1px solid #cacaca;
       background-color: #ededed;
     }
 
@@ -79,7 +78,7 @@ $header-weight: 500;
 
     tr > td {
       padding: 16px;
-      border-bottom: 1px solid #cacaca;
+      border-bottom: 1px solid #8c8c8c;
 
       > .timing-cell-container {
         display: flex;
@@ -141,7 +140,7 @@ $header-weight: 500;
 
       .view-button {
         color: #242424;
-        border: 1px solid #b0b0b0;
+        border: 1px solid #8c8c8c;
         border-radius: 4px;
         background: #fff;
         font-family: Rubik;
@@ -155,7 +154,7 @@ $header-weight: 500;
         align-items: center;
 
         > div {
-          border-right: solid 1px #b0b0b0;
+          border-right: solid 1px #8c8c8c;
           padding: 8px 16px;
           flex-direction: row;
           flex-grow: 1;

src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/ElementsSection.scss

@@ -5,10 +5,7 @@ $grey-19: #dddddd;
   flex-direction: column;
   position: relative;
   > div:first-of-type {
-    border-bottom: solid 1px $grey-19;
-  }
-  .tabs-container {
-    border-bottom: solid 1px $grey-19;
+    border-bottom: solid 1px #8c8c8c;
   }
   .madie-icon {
     &.cyan {

src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/dataElementsList/DataElementsList.scss

@@ -6,7 +6,7 @@
   overflow: scroll;
   > div {
     > .data-types-button {
-      border: 1px solid #ddd;
+      border: 1px solid #8c8c8c;
       width: 224px;
       display: flex;
       margin-top: 16px;

src/components/editTestCase/qdm/RightPanel/DetailsTab/DetailsSectionStyles.tsx

@@ -14,7 +14,7 @@ export const InputLabelStyle = [
 ];
 
 export const seriesStyles = {
-  border: "1px solid #DDDDDD",
+  border: "1px solid #8c8c8c",
   "& .MuiOutlinedInput-notchedOutline": {
     borderRadius: "3px",
     "& legend": {

src/components/editTestCase/qiCore/EditTestCase.scss

@@ -150,7 +150,7 @@
     font-size: 15px;
     line-height: 20px;
     text-align: left;
-    border-bottom: solid 1px #ddd;
+    border-bottom: solid 1px #8c8c8c;
     padding: 16px 23px;
 
     .caption {
@@ -182,7 +182,7 @@
     td:nth-of-type(3),
     td:nth-of-type(4),
     tr:last-of-type > td:first-of-type {
-      border-bottom: solid 1px #ddd;
+      border-bottom: solid 1px #8c8c8c;
     }
   }
 
@@ -204,7 +204,7 @@
     }
 
     &:last-of-type {
-      border-bottom: solid 1px #ddd;
+      border-bottom: solid 1px #8c8c8c;
     }
   }
 }

src/components/editTestCase/qiCore/EditTestCase.tsx

@@ -100,13 +100,22 @@ interface navigationParams {
 }
 
 const styles = {
-  success: tw`bg-green-100 text-green-700`,
-  warning: tw`bg-yellow-100 text-yellow-700`,
-  error: tw`bg-red-100 text-red-700`,
+  success: `color #006400; background-color: #90EE90`,
+  warning: `color #B0350C; background-color: #ECDF27`,
+  error: `color #C03030; background-color: #FFF829`,
   meta: tw`bg-blue-100 text-black`,
-  default: tw`bg-blue-100 text-blue-700`,
+  default: `color #00688B; background-color: #E0FFFF`,
 };
 
+/*
+previous color system based off of tw.
+success #249A5B vs #A4FAA8, 3:1 fail dark green to light green
+warning #B87A06 vs #FCEB9D, 3:1 fail, orange yellow
+error: #BA1C32 vs #FBC4AB 4.1 fail red to red orange
+// meta: 000 #b0EEFF: pass 
+default: #2469B7 vs #b0EEFF  d-L  teal 4.4:1 
+*/
+
 const Alert = styled.div<AlertProps>(({ status = "default" }) => [
   styles[status],
   tw`rounded-lg p-2 m-2 text-base inline-flex items-center w-11/12`,
@@ -128,7 +137,7 @@ const StyledIcon = styled(FontAwesomeIcon)(
 );
 
 const testCaseSeriesStyles = {
-  border: "1px solid #DDDDDD",
+  border: "1px solid #8c8c8c",
   "& .MuiOutlinedInput-notchedOutline": {
     borderRadius: "3px",
     "& legend": {

src/components/editTestCase/qiCore/LeftPanel/ElementsTab/Demographics/DemographicsSection.tsx

@@ -165,6 +165,7 @@ const DemographicsSection = ({ canEdit }) => {
                     const formattedDate = `${year}-${month}-${day}`;
                     handleBirthDateChange(formattedDate);
                   }}
+                  required
                   disabled={!canEdit}
                   label="Date of Birth"
                 />

src/components/testCaseLanding/common/TestCase.scss

@@ -1,18 +1,24 @@
 .tcl-tr {
-  border-bottom: solid 1px #ddd;
+  border-bottom: solid 1px #8c8c8c;
 
   > td {
     padding: 10px;
     max-width: 10vw;
     white-space: normal;
     vertical-align: top;
-    border-bottom: solid 1px #ddd;
+    border-bottom: inherit;
   }
 }
 
 .tcl-table {
   border-collapse: collapse;
   border-spacing: 0 1em;
+  border: solid 1px #8c8c8c;
+  border-radius: 3px;
+  > .table-body {
+    border-top: inherit;
+    border-radius: 3px;
+  }
 }
 
 .chip-draft {
@@ -53,7 +59,7 @@
 
   .action {
     padding: 7px 21px;
-    border-right: solid 1px #c4c4c4;
+    border-right: solid 1px #8c8c8c;
   }
   .chevron-container {
     display: flex;

src/components/testCaseLanding/common/TestCase.tsx

@@ -115,7 +115,7 @@ const TestCase = ({
       <tr
         key={`test-case-row-${testCase.id}`}
         data-testid={`test-case-row-${testCase.id}`}
-        style={{ borderBottom: "solid 1px #DDD !important" }}
+        style={{ borderBottom: "solid 1px #8c8c8c !important" }}
         className="tcl-tr"
       >
         <td style={{ width: 140 }}>{TestCaseStatus(status)}</td>

src/components/testCaseLanding/common/TestCaseTable.tsx

@@ -25,15 +25,15 @@ const TestCaseTable = (props: TestCaseTableProps) => {
     exportTestCase,
     measure,
   } = props;
-  const TH = tw.th`p-3 border-b text-left text-sm font-bold capitalize`;
+  const TH = tw.th`p-3 text-left text-sm font-bold capitalize`;
 
   return (
     <table
       tw="min-w-full"
       data-testid="test-case-tbl"
       className="tcl-table"
       style={{
-        borderTop: "solid 1px #DDD",
+        borderTop: "solid 1px #8c8c8c",
         borderSpacing: "0 2em !important",
       }}
     >

src/components/testCaseLanding/common/import/TestCaseImportDialog.tsx

@@ -268,15 +268,20 @@ const TestCaseImportDialog = ({ dialogOpen, handleClose, onImport }) => {
         >
           <input data-testid="file-drop-input" {...getInputProps()} />
           <span tw="text-black">Drag 'n' drop file to upload </span>
-          <span tw="pb-3"> or </span>
+          <span tw="pb-3" style={{ color: "#666666" }}>
+            {" "}
+            or{" "}
+          </span>
           <Button
             variant="outline-filled"
             data-testid="select-file-button"
             onClick={open}
           >
             Select File
           </Button>
-          <span tw="pt-3">(.zip)</span>
+          <span tw="pt-3" style={{ color: "#666666" }}>
+            (.zip)
+          </span>
         </div>
         {uploadedFile && renderUploadedFileStatus()}
         {uploadingFileSpinner && (
@@ -294,7 +299,9 @@ const TestCaseImportDialog = ({ dialogOpen, handleClose, onImport }) => {
         tw="flex items-center ml-20"
         data-testid="test-case-import-error-div"
       >
-        {errorMessage && <small tw="text-red">{errorMessage}</small>}
+        {errorMessage && (
+          <small style={{ color: "#990000" }}>{errorMessage}</small>
+        )}
       </div>
       <Toast
         toastKey="import-tests-toast"

src/components/testCaseLanding/common/import/TestCaseImportFromBonnieDialog.tsx

@@ -120,7 +120,7 @@ const TestCaseImportFromBonnieDialog = ({ open, handleClose, onImport }) => {
           [{testCases?.length | 0}] Test Case
           {testCases?.length === 1 ? "" : "s"} from File: {file.name}
         </div>
-        <Divider />
+        <Divider style={{ borderColor: "#8c8c8c" }} />
         <div
           data-testid="test-case-preview-list"
           style={{ maxHeight: 450, overflowY: "scroll" }}