Merge pull request #261 from JdeRobot/add-info-popup

Add info popup
JdeRobot · Jan 24, 2025 · 9941843 · 9941843
2 parents 4dff1f6 + 113395c
commit 9941843
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 7 deletions.
diff --git a/frontend/src/components/error_popup/ErrorModal.css b/frontend/src/components/error_popup/ErrorModal.css
@@ -13,6 +13,11 @@
   }
 }
 
+#info-modal {
+  background-color: var(--background) !important;
+  border-color: var(--buttons) !important;
+}
+
 .bt-error-modal-buttons-container {
   display: flex;
   flex-direction: row;
@@ -53,6 +58,22 @@
   }
 }
 
+.bt-info-modal-button {
+  height: 45px;
+  width: 175px;
+  padding: 15px;
+  border-radius: 10px;
+  background-color: var(--buttons);
+  color: var(--text);
+  font-weight: 600;
+  text-align: center;
+  user-select: none;
+
+  &:hover {
+    background-color: var(--buttons-hover) !important;
+  }
+}
+
 .bt-modal-error-label {
   color: var(--text);
   font-weight: 600;
@@ -64,3 +85,9 @@
   font-weight: 600;
   text-align: center;
 }
+
+.bt-modal-info-label {
+  color: var(--text);
+  font-weight: 600;
+  text-align: center;
+}
diff --git a/frontend/src/components/error_popup/ErrorModal.tsx b/frontend/src/components/error_popup/ErrorModal.tsx
@@ -5,6 +5,7 @@ import Modal from "../Modal/Modal";
 enum ErrorType {
   ERROR,
   WARNING,
+  INFO,
 }
 
 const ErrorContext = createContext<ErrorData>({
@@ -13,6 +14,7 @@ const ErrorContext = createContext<ErrorData>({
   type: ErrorType.ERROR,
   error: (msg: string) => {},
   warning: (msg: string) => {},
+  info: (msg: string) => {},
   close: () => {},
 });
 
@@ -22,15 +24,37 @@ interface ErrorData {
   type: ErrorType;
   error: (msg: string) => void;
   warning: (msg: string) => void;
+  info: (msg: string) => void;
   close: () => void;
 }
 
 const ErrorModal = () => {
   const { isOpen, msg, type, close } = useError();
 
+  var type_str = "error";
+  var type_header = "Error";
+
+  switch (type) {
+    case ErrorType.ERROR:
+      type_str = "error";
+      type_header = "Error";
+      break;
+    case ErrorType.WARNING:
+      type_str = "warning";
+      type_header = "Warning";
+      break;
+    case ErrorType.INFO:
+      type_str = "info";
+      type_header = "Info";
+      break;
+
+    default:
+      break;
+  }
+
   return (
     <Modal
-      id={`${type === ErrorType.ERROR ? "error" : "warning"}-modal`}
+      id={`${type_str}-modal`}
       hasCloseBtn={true}
       isOpen={isOpen}
       onClose={close}
@@ -41,23 +65,20 @@ const ErrorModal = () => {
           htmlFor="actionName"
           style={{ textAlign: "center" }}
         >
-          {type === ErrorType.ERROR ? "Error" : "Warning"}
+          {type_header}
         </label>
       </div>
       <div className="bt-form-row">
         <div className="bt-error-modal-buttons-container">
-          <label
-            className={`bt-modal-${type === ErrorType.ERROR ? "error" : "warning"}-label`}
-            id="errorMsg"
-          >
+          <label className={`bt-modal-${type_str}-label`} id="errorMsg">
             {msg}
           </label>
         </div>
       </div>
       <div className="bt-form-row">
         <div className="bt-error-modal-buttons-container">
           <div
-            className={`bt-${type === ErrorType.ERROR ? "error" : "warning"}-modal-button`}
+            className={`bt-${type_str}-modal-button`}
             onClick={() => close()}
           >
             Close
@@ -85,6 +106,12 @@ export const ErrorProvider = ({ children }: { children: any }) => {
     open(true);
   };
 
+  const showInfo = (msg: string) => {
+    setMsg(msg);
+    setType(ErrorType.INFO);
+    open(true);
+  };
+
   const close = () => {
     open(false);
   };
@@ -95,6 +122,7 @@ export const ErrorProvider = ({ children }: { children: any }) => {
     type: type,
     error: (msg: string) => showError(msg),
     warning: (msg: string) => showWarning(msg),
+    info: (msg: string) => showInfo(msg),
     close: () => close(),
   };