Fixed top header to more dynamic

frontend/src/app/components/buttons/primarybutton/PrimaryButton.jsx

@@ -4,8 +4,8 @@ import AddIcon from "../../icons/add";
 const PrimaryButton = (props) => {
   return (
     <button className={styles.button} {...props}>
-      <AddIcon width={20} height={20} />
-      Add
+      {props?.icon}
+      {props.text}
     </button>
   );
 };

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

@@ -1,14 +1,14 @@
 .button {
   display: flex;
-  padding: 8px 24px;
+  padding: 7px 15px;
   justify-content: center;
   align-items: center;
-  gap: 8px;
-  font-family: inter;
+  gap: 10px;
+  border-radius: 6px;
   border-radius: 6px;
   border: 0.5px solid #8187ff;
   background: rgba(83, 89, 242, 0.25);
-  color: #fff;
+  color: white;
   font-size: 16px;
   font-style: normal;
   font-weight: 500;

frontend/src/app/components/icons/edit.jsx

@@ -0,0 +1,33 @@
+const EditIcon = ({ width = 20, height = 20, color = "white", ...props }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M5.83398 5.83301H5.00065C4.55862 5.83301 4.1347 6.0086 3.82214 6.32116C3.50958 6.63372 3.33398 7.05765 3.33398 7.49967V14.9997C3.33398 15.4417 3.50958 15.8656 3.82214 16.1782C4.1347 16.4907 4.55862 16.6663 5.00065 16.6663H12.5007C12.9427 16.6663 13.3666 16.4907 13.6792 16.1782C13.9917 15.8656 14.1673 15.4417 14.1673 14.9997V14.1663"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16.9875 5.48759C17.3157 5.15938 17.5001 4.71424 17.5001 4.25009C17.5001 3.78594 17.3157 3.34079 16.9875 3.01259C16.6593 2.68438 16.2142 2.5 15.75 2.5C15.2858 2.5 14.8407 2.68438 14.5125 3.01259L7.5 10.0001V12.5001H10L16.9875 5.48759Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M13.334 4.16699L15.834 6.66699"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default EditIcon;

frontend/src/app/components/icons/outlineDownload.jsx

@@ -0,0 +1,26 @@
+const OutlineDownloadIcon = ({
+  width = 24,
+  height = 24,
+  color = "#D2D3E0",
+  ...props
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M4.33398 16.7913V18.708C4.33398 19.2163 4.53592 19.7039 4.89536 20.0633C5.25481 20.4227 5.74232 20.6247 6.25065 20.6247H17.7507C18.259 20.6247 18.7465 20.4227 19.1059 20.0633C19.4654 19.7039 19.6673 19.2163 19.6673 18.708V16.7913M7.20898 11.0413L12.0007 15.833M12.0007 15.833L16.7923 11.0413M12.0007 15.833V4.33301"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default OutlineDownloadIcon;

frontend/src/app/components/icons/restart.jsx

@@ -0,0 +1,26 @@
+const RestartIcon = ({
+  width = 24,
+  height = 24,
+  color = "#D2D3E0",
+  ...props
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M19.6673 11.0417C19.4329 9.35521 18.6506 7.79259 17.4408 6.59452C16.2309 5.39645 14.6608 4.62938 12.9721 4.41149C11.2834 4.1936 9.56996 4.53697 8.09564 5.3887C6.62132 6.24043 5.46793 7.55328 4.81315 9.125M4.33398 5.29167V9.125H8.16732M4.33398 12.9583C4.56835 14.6448 5.35071 16.2074 6.56054 17.4055C7.77037 18.6036 9.34055 19.3706 11.0292 19.5885C12.7179 19.8064 14.4313 19.463 15.9057 18.6113C17.38 17.7596 18.5334 16.4467 19.1882 14.875M19.6673 18.7083V14.875H15.834"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default RestartIcon;

frontend/src/app/components/icons/update.jsx

@@ -0,0 +1,35 @@
+const UpdateIcon = ({
+  width = 20,
+  height = 20,
+  color = "white",
+  strokeWidth = 1.5,
+  ...props
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M16.25 9.2188C16.0589 7.84397 15.4211 6.57009 14.4349 5.5934C13.4486 4.61671 12.1686 3.99139 10.7919 3.81376C9.4153 3.63613 8.01845 3.91605 6.81656 4.61039C5.61467 5.30474 4.67441 6.375 4.14062 7.6563M3.75 4.5313V7.6563H6.875"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M3.75 10.7812C3.94106 12.1561 4.57885 13.43 5.56513 14.4066C6.5514 15.3833 7.83144 16.0087 9.20807 16.1863C10.5847 16.3639 11.9815 16.084 13.1834 15.3897C14.3853 14.6953 15.3256 13.6251 15.8594 12.3437M16.25 15.4687V12.3437H13.125"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default UpdateIcon;

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

@@ -13,6 +13,12 @@ import RobotIcon from "../icons/robot";
 import KeyIcon from "../icons/key";
 import ManageEnvIcon from "../icons/manageEnv";
 import Alert from "../alerts/Alert";
+import DownloadIcon from "../icons/download";
+import OutlineDownloadIcon from "../icons/outlineDownload";
+import RestartIcon from "../icons/restart";
+import PrimaryButton from "../buttons/primarybutton/PrimaryButton";
+import EditIcon from "../icons/edit";
+import UpdateIcon from "../icons/update";
 
 const TopHeader = (props) => {
   const [triggerDropDownMenu, setTriggerDropDownMenu] = useState(false);
@@ -28,9 +34,7 @@ const TopHeader = (props) => {
       {triggerAlert && <Alert setTriggerAlert={setTriggerAlert} />}
       <div className={styles.container}>
         <div className={styles.title}>
-          {((pathName.includes("/view") && props.state === "view") ||
-            params.usersId ||
-            params.rolesId) && (
+          {props.requiredButtons.includes("back") && (
             <div onClick={() => router.back()}>
               <BackIcon />
             </div>
@@ -38,35 +42,39 @@ const TopHeader = (props) => {
           <p>{props.topbarTitle}</p>
         </div>
         <div className={styles.actionBar}>
-          {(pathName === "/projects/view" || !props.state) && (
+          {props.requiredButtons.includes("search") && (
             <div className={styles.searchBarContainer}>
               <SearchIcon />
             </div>
           )}
-          {pathName === "/credentials" ? (
+          {props.requiredButtons.includes("env") && (
             <div className={styles.mngEnvKeyButton}>
               <EnviromentIcon />
               <p>Manage Env. Key</p>
             </div>
-          ) : (
-            ""
           )}
-          {pathName === "/projects/view" && (
-            <div
-              className={styles.button}
+          {props.requiredButtons.includes("add-services") && (
+            <PrimaryButton
+              icon={<AddIcon />}
+              text={props.buttonText}
               onClick={() => props.trigger(!props.triggerState)}
-            >
-              <AddIcon />
-              <p>{props.buttonText}</p>
-            </div>
+            />
           )}
-          {!props.state && (
-            <div className={styles.button} onClick={handleNavigateToAdd}>
-              <AddIcon />
-              <p>{props.buttonText}</p>
-            </div>
+          {props.requiredButtons.includes("edit") && (
+            <PrimaryButton
+              icon={<EditIcon />}
+              text="Edit"
+              onClick={() => props.trigger(!props.triggerState)}
+            />
           )}
-          {props.state === "add" ? (
+          {props.requiredButtons.includes("add") && (
+            <PrimaryButton
+              icon={<AddIcon />}
+              text={props.buttonText}
+              onClick={handleNavigateToAdd}
+            />
+          )}
+          {props.requiredButtons.includes("save") && (
             <>
               <div
                 className={styles.button}
@@ -82,11 +90,22 @@ const TopHeader = (props) => {
                 <p>{props.cancelButtonText}</p>
               </div>
             </>
-          ) : (
-            ""
           )}
-          {/* Projects 3 dots menu */}
-          {pathName === "/projects/view" && (
+          {props.requiredButtons.includes("update") && (
+            <>
+              <PrimaryButton
+                icon={<UpdateIcon color="white" />}
+                text="Update"
+              />
+              <div
+                className={styles.cancelButton}
+                onClick={() => router.back()}
+              >
+                <p>{props.cancelButtonText}</p>
+              </div>
+            </>
+          )}
+          {props?.requiredButtons?.includes("services-drop-down") && (
             <div
               className={styles.menu}
               onClick={() => setTriggerDropDownMenu(!triggerDropDownMenu)}
@@ -124,6 +143,39 @@ const TopHeader = (props) => {
               )}
             </div>
           )}
+
+          {props.requiredButtons.includes("download") && (
+            <div
+              className={styles.menu}
+              onClick={() => setTriggerDropDownMenu(!triggerDropDownMenu)}
+            >
+              <div className={styles.dotMenu}>
+                <MenuIcon />
+              </div>
+              {triggerDropDownMenu && (
+                <div className={styles.dropDown}>
+                  <div>
+                    <div>
+                      <OutlineDownloadIcon />
+                      <p>Download Compose</p>
+                    </div>
+                  </div>
+                  <div>
+                    <div>
+                      <OutlineDownloadIcon />
+                      <p>Download Config</p>
+                    </div>
+                  </div>
+                  <div>
+                    <div>
+                      <RestartIcon />
+                      <p>Restart</p>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
         </div>
       </div>
     </>

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

@@ -63,6 +63,7 @@
   border-radius: 6px;
   border: 0.5px solid #8187ff;
   background: rgba(83, 89, 242, 0.25);
+  color: white;
   cursor: pointer;
 }
 .button:hover {
@@ -126,7 +127,7 @@
 }
 .dotMenu {
   display: flex;
-  padding: 8px;
+  padding: 7px;
   align-items: center;
   gap: 12px;
   border-radius: 6px;
@@ -167,7 +168,6 @@
 .dropDown > div:hover {
   border-radius: 4px;
   background: #3c4159;
-  background: color(display-p3 0.2392 0.2549 0.3412);
   color: white;
 }
 .dropDown > div:hover p {