feat: adds components for displaying issues, modifies popup (#370)

* feat: (partial) adds components for displaying issues, modifies popup * -feat: new issues component working as expected with errors and warnings split up * -adds issue type to detail ie 'warning name' or 'error name'
bcgov · Jul 19, 2024 · 6424ca9 · 6424ca9
1 parent c32f45b
commit 6424ca9
Show file tree

Hide file tree

Showing 6 changed files with 436 additions and 72 deletions.
diff --git a/frontend/src/app/components/AlertDialog.js b/frontend/src/app/components/AlertDialog.js
@@ -6,6 +6,7 @@ import DialogActions from "@mui/material/DialogActions";
 import DialogContent from "@mui/material/DialogContent";
 import DialogContentText from "@mui/material/DialogContentText";
 import DialogTitle from "@mui/material/DialogTitle";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
 
 const AlertDialog = (props) => {
   const {
@@ -31,11 +32,13 @@ const AlertDialog = (props) => {
         aria-labelledby="alert-dialog-title"
         aria-describedby="alert-dialog-description"
       >
-        <DialogTitle id="alert-dialog-title">{title}</DialogTitle>
+        <DialogTitle id="alert-dialog-title">
+          <InfoOutlinedIcon className="error" /> {title}
+        </DialogTitle>
         <DialogContent>
-          <DialogContentText id="alert-dialog-description">
+          <DialogContent id="alert-dialog-description">
             {dialogue}
-          </DialogContentText>
+          </DialogContent>
         </DialogContent>
         <DialogActions>
           <Button
@@ -45,14 +48,16 @@ const AlertDialog = (props) => {
           >
             {cancelText}
           </Button>
-          <Button
-            onClick={() => {
-              handleConfirm();
-            }}
-            autoFocus
-          >
-            {confirmText}
-          </Button>
+          {confirmText && (
+            <Button
+              onClick={() => {
+                handleConfirm();
+              }}
+              autoFocus
+            >
+              {confirmText}
+            </Button>
+          )}
         </DialogActions>
       </Dialog>
     </div>
@@ -62,14 +67,17 @@ const AlertDialog = (props) => {
 AlertDialog.defaultProps = {
   dialogue: "",
   title: "",
+  cancelText: "cancel",
+  confirmText: "",
 };
 AlertDialog.propTypes = {
   open: PropTypes.bool.isRequired,
   title: PropTypes.string,
-  dialogue: PropTypes.string,
-  cancelText: PropTypes.string.isRequired,
+  dialogue: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
+    .isRequired,
+  cancelText: PropTypes.string,
   handleCancel: PropTypes.func.isRequired,
-  confirmText: PropTypes.string.isRequired,
+  confirmText: PropTypes.string,
   handleConfirm: PropTypes.func.isRequired,
 };
 

diff --git a/frontend/src/app/styles/App.scss b/frontend/src/app/styles/App.scss
@@ -14,6 +14,9 @@ $default-link-blue: #568dba;
 $default-background-grey: #f2f2f2;
 $md: 991px;
 $button-background-blue: #003366;
+$error-red: #ce3e39;
+$warning-yellow: #fcba19;
+$default-blue: #003366;
 
 .App {
   background-color: $default-background-grey;
@@ -63,7 +66,7 @@ h2,
 h3,
 h4 {
   font-family: "Roboto", "Open Sans", sans-serif;
-  color: #003366;
+  color: $default-blue;
   font-weight: 500;
 }
 
@@ -110,3 +113,14 @@ h4 {
 .page-content {
   flex-grow: 1;
 }
+
+.error {
+  color: $error-red;
+}
+.warning {
+  color: $warning-yellow;
+}
+.showMore {
+  color: $default-link-blue;
+  text-decoration: underline;
+}
diff --git a/frontend/src/app/styles/FileUpload.scss b/frontend/src/app/styles/FileUpload.scss
@@ -43,3 +43,9 @@
     background-color: $default-background-grey;
   }
 }
+.cancel-button {
+  color: $default-blue !important;
+}
+.confirm-button {
+  background-color: $default-blue !important;
+}