Fixed

frontend/src/app/components/alerts/Alert.jsx

@@ -1,6 +1,8 @@
 import React, { useState } from "react";
 import styles from "./styles.module.css";
 import BoxedCheckIcon from "../icons/boxedCheck";
+import SecondaryButton from "../buttons/secondaryButton/SecondaryButton";
+import PrimaryButton from "../buttons/primarybutton/PrimaryButton";
 const Alert = (props) => {
   const [hide, setHide] = useState(false);
   const handleHide = () => {
@@ -27,8 +29,8 @@ const Alert = (props) => {
           </p>
         </div>
         <div className={styles.actionButtons}>
-          <button onClick={handleHide}>Confirm</button>
-          <button onClick={handleHide}>Cancel</button>
+          <PrimaryButton text="Confirm" onClick={handleHide} />
+          <SecondaryButton text="Cancel" onClick={handleHide} />
         </div>
       </div>
     </div>

frontend/src/app/components/alerts/styles.module.css

@@ -101,30 +101,10 @@
   padding-top: 12px;
   justify-content: center;
   align-items: flex-end;
+
   gap: 10px;
   align-self: stretch;
 }
 .actionButtons > button {
-  display: flex;
-  height: 36px;
-  padding: 8px 16px;
-  justify-content: center;
-  align-items: center;
-  gap: 10px;
-  flex: 1 0 0;
-  border-radius: 6px;
-  border: 0.5px solid #8187ff;
-  background: rgba(83, 89, 242, 0.25);
-  color: #fff;
-  font-family: Inter;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
-  cursor: pointer;
-}
-.actionButtons > button:nth-child(2) {
-  border-radius: 6px;
-  border: 0.5px solid #4e537e;
-  background-color: transparent;
+  width: 100%;
 }

frontend/src/app/components/buttons/primarybutton/styles.module.css

@@ -5,7 +5,6 @@
   align-items: center;
   gap: 10px;
   border-radius: 6px;
-  border-radius: 6px;
   border: 0.5px solid #8187ff;
   background: rgba(83, 89, 242, 0.25);
   color: white;

frontend/src/app/components/buttons/secondaryButton/SecondaryButton.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+import styles from "./styles.module.css";
+const SecondaryButton = (props) => {
+  return (
+    <button className={styles.button} {...props}>
+      <p>{props.text}</p>
+    </button>
+  );
+};
+
+export default SecondaryButton;

frontend/src/app/components/buttons/secondaryButton/styles.module.css

@@ -0,0 +1,25 @@
+.button {
+  display: flex;
+  height: 36px;
+  padding: 9px 12px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  border-radius: 6px;
+  border: 0.5px solid #4e537e;
+  cursor: pointer;
+  color: #d2d3e1;
+  font-size: 16px;
+
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  letter-spacing: 0.16px;
+  cursor: pointer;
+  background: transparent;
+}
+.button:hover {
+  border-radius: 6px;
+  border: 1px solid #8e98e7;
+  background: linear-gradient(180deg, #8e98e6 0%, #4d537e 100%);
+}

frontend/src/app/components/fields/textfield.jsx

@@ -1,8 +1,13 @@
 import React from "react";
 import styles from "./styles.module.css";
-const TextField = ({ placeHolder }) => {
+const TextField = ({ placeHolder, ...props }) => {
   return (
-    <input className={styles.input} type="text" placeholder={placeHolder} />
+    <input
+      className={styles.input}
+      type="text"
+      placeholder={placeHolder}
+      {...props}
+    />
   );
 };
 

frontend/src/app/components/select/styles.module.css

@@ -64,7 +64,7 @@
 .optionsContainer p {
   color: #acb0ff;
   font-family: Inter;
-  font-size: 18px;
+  font-size: 16px;
   font-style: normal;
   font-weight: 400;
   line-height: normal;

frontend/src/app/components/topHeader/TopHeader.jsx

@@ -19,19 +19,26 @@ import RestartIcon from "../icons/restart";
 import PrimaryButton from "../buttons/primarybutton/PrimaryButton";
 import EditIcon from "../icons/edit";
 import UpdateIcon from "../icons/update";
+import SecondaryButton from "../buttons/secondaryButton/SecondaryButton";
 
 const TopHeader = (props) => {
   const [triggerDropDownMenu, setTriggerDropDownMenu] = useState(false);
   const [triggerAlert, setTriggerAlert] = useState(false);
   const pathName = usePathname();
   const router = useRouter();
+  const [editState, setEditState] = useState(false);
   const params = useParams();
   const handleNavigateToAdd = () => {
     router.push(`${pathName}/add`);
   };
   return (
     <>
-      {triggerAlert && <Alert setTriggerAlert={setTriggerAlert} />}
+      {triggerAlert && (
+        <Alert
+          setTriggerAlert={setTriggerAlert}
+          onClick={() => setEditState(true)}
+        />
+      )}
       <div className={styles.container}>
         <div className={styles.title}>
           {props.requiredButtons.includes("back") && (
@@ -60,11 +67,13 @@ const TopHeader = (props) => {
               onClick={() => props?.trigger(!props?.triggerState)}
             />
           )}
-          {props?.requiredButtons.includes("edit") && (
+          {!editState && props?.requiredButtons.includes("edit") && (
             <PrimaryButton
               icon={<EditIcon />}
               text="Edit"
-              onClick={() => props?.trigger(!props?.triggerState)}
+              onClick={() => {
+                setEditState(true);
+              }}
             />
           )}
           {props?.requiredButtons.includes("add") && (
@@ -74,35 +83,33 @@ const TopHeader = (props) => {
               onClick={handleNavigateToAdd}
             />
           )}
-          {props?.requiredButtons.includes("save") && (
+          {editState || props?.requiredButtons?.includes("save") ? (
             <>
               <div
                 className={styles.button}
                 onClick={() => setTriggerAlert(!triggerAlert)}
               >
                 <CheckIcon width={20} height={20} />
-                <p>{props?.buttonText}</p>
-              </div>
-              <div
-                className={styles.cancelButton}
-                onClick={() => router.back()}
-              >
-                <p>{props?.cancelButtonText}</p>
+                <p>Save</p>
               </div>
+
+              <SecondaryButton
+                text="Cancel"
+                onClick={
+                  editState
+                    ? () => setEditState(!editState)
+                    : () => router.back()
+                }
+              />
             </>
-          )}
+          ) : null}
           {props?.requiredButtons.includes("update") && (
             <>
               <PrimaryButton
                 icon={<UpdateIcon color="white" />}
                 text="Update"
               />
-              <div
-                className={styles.cancelButton}
-                onClick={() => router.back()}
-              >
-                <p>{props.cancelButtonText}</p>
-              </div>
+              <SecondaryButton text="Cancel" onClick={() => router.back()} />
             </>
           )}
           {props?.requiredButtons?.includes("services-drop-down") && (
@@ -144,7 +151,7 @@ const TopHeader = (props) => {
             </div>
           )}
 
-          {props?.requiredButtons.includes("download") && (
+          {props?.requiredButtons.includes("download") && !editState && (
             <div
               className={styles.menu}
               onClick={() => setTriggerDropDownMenu(!triggerDropDownMenu)}