Added new component

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

@@ -0,0 +1,35 @@
+import React from "react";
+
+const FileIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M13.834 3.75V7.41667C13.834 7.65978 13.9306 7.89294 14.1025 8.06485C14.2744 8.23676 14.5075 8.33333 14.7507 8.33333H18.4173"
+        stroke="#969AF9"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16.584 20.25H7.41732C6.93109 20.25 6.46477 20.0568 6.12096 19.713C5.77714 19.3692 5.58398 18.9029 5.58398 18.4167V5.58333C5.58398 5.0971 5.77714 4.63079 6.12096 4.28697C6.46477 3.94315 6.93109 3.75 7.41732 3.75H13.834L18.4173 8.33333V18.4167C18.4173 18.9029 18.2242 19.3692 17.8803 19.713C17.5365 20.0568 17.0702 20.25 16.584 20.25Z"
+        stroke="#969AF9"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9.25 14.7503L11.0833 16.5837L14.75 12.917"
+        stroke="#969AF9"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default FileIcon;

frontend/src/app/components/toast/success/styles.module.css

@@ -10,6 +10,19 @@
   bottom: 25px;
   z-index: 11;
   right: 20px;
+  animation-name: showToast;
+  animation-duration: 0.15s;
+  animation-timing-function: ease-in-out;
+}
+@keyframes showToast {
+  0% {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0%);
+  }
 }
 .messageContainer {
   display: flex;

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

@@ -85,13 +85,11 @@ const TopHeader = (props) => {
           )}
           {editState || props?.requiredButtons?.includes("save") ? (
             <>
-              <div
-                className={styles.button}
+              <PrimaryButton
+                text="Save"
                 onClick={() => setTriggerAlert(!triggerAlert)}
-              >
-                <CheckIcon width={20} height={20} />
-                <p>Save</p>
-              </div>
+                icon={<CheckIcon width={20} height={20} />}
+              />
 
               <SecondaryButton
                 text="Cancel"

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

@@ -5,6 +5,7 @@
   align-items: center;
   align-self: stretch;
   background: #21232f;
+  transition: all 0.15s;
 }
 .title {
   display: flex;
@@ -53,22 +54,7 @@
   align-items: center;
   gap: 10px;
 }
-.button {
-  display: flex;
-  padding: 7px 15px;
-  justify-content: center;
-  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;
-  cursor: pointer;
-}
-.button:hover {
-  background: linear-gradient(180deg, #5359f2 0%, #2e3288 100%);
-}
+
 .mngEnvKeyButton {
   display: inline-flex;
   padding: 8px 12px;
@@ -99,22 +85,7 @@
 .mngEnvKeyButton:hover path {
   stroke: white;
 }
-.cancelButton {
-  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;
-}
-.cancelButton:hover {
-  border-radius: 6px;
-  border: 1px solid #8e98e7;
-  background: linear-gradient(180deg, #8e98e6 0%, #4d537e 100%);
-}
+
 .menu {
   display: flex;
   width: 36px;