convert to components

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

@@ -0,0 +1,37 @@
+.input {
+  display: flex;
+  padding: 12px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 10px;
+  width: 100%;
+  align-self: stretch;
+  border-radius: 6px;
+  border: 1px solid #616583;
+  background-color: transparent;
+  color: white;
+  font-family: Inter;
+  font-size: 16px;
+  outline: none;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  caret-color: #575bc7;
+}
+.input:focus {
+  border-radius: 6px;
+  border: 1px solid #a8aac1;
+  background: rgba(75, 79, 109, 0.25);
+}
+.input:hover {
+  background: rgba(75, 79, 109, 0.25);
+}
+.input::placeholder {
+  color: #85869b;
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}

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

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

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

@@ -0,0 +1,31 @@
+import React from "react";
+
+const CloseIcon = (props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="28"
+      height="28"
+      viewBox="0 0 28 28"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M20.7077 7.29199L7.29102 20.7087"
+        stroke="white"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7.29102 7.29199L20.7077 20.7087"
+        stroke="white"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default CloseIcon;

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

@@ -0,0 +1,35 @@
+.toastContainer {
+  display: flex;
+  padding: 14px 10px 14px 16px;
+  align-items: center;
+  gap: 16px;
+  border-radius: 10px;
+  border: 1px solid #a6facc;
+  background: #eefdf3;
+  position: absolute;
+  bottom: 25px;
+  z-index: 11;
+  right: 20px;
+}
+.messageContainer {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.iconContainer {
+  display: flex;
+  padding: 4px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 100px;
+  background: #a6facc;
+}
+.messageContainer p {
+  color: #006929;
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}

frontend/src/app/components/toast/success/successToast.jsx

@@ -0,0 +1,45 @@
+import React from "react";
+import styles from "./styles.module.css";
+const SuccessToast = ({ message }) => {
+  return (
+    <div className={styles.toastContainer}>
+      <div className={styles.messageContainer}>
+        <div className={styles.iconContainer}>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="none"
+          >
+            <path
+              d="M7.5 10L9.16667 11.6667L12.5 8.33333M2.5 10C2.5 10.9849 2.69399 11.9602 3.0709 12.8701C3.44781 13.7801 4.00026 14.6069 4.6967 15.3033C5.39314 15.9997 6.21993 16.5522 7.12987 16.9291C8.03982 17.306 9.01509 17.5 10 17.5C10.9849 17.5 11.9602 17.306 12.8701 16.9291C13.7801 16.5522 14.6069 15.9997 15.3033 15.3033C15.9997 14.6069 16.5522 13.7801 16.9291 12.8701C17.306 11.9602 17.5 10.9849 17.5 10C17.5 9.01509 17.306 8.03982 16.9291 7.12987C16.5522 6.21993 15.9997 5.39314 15.3033 4.6967C14.6069 4.00026 13.7801 3.44781 12.8701 3.0709C11.9602 2.69399 10.9849 2.5 10 2.5C9.01509 2.5 8.03982 2.69399 7.12987 3.0709C6.21993 3.44781 5.39314 4.00026 4.6967 4.6967C4.00026 5.39314 3.44781 6.21993 3.0709 7.12987C2.69399 8.03982 2.5 9.01509 2.5 10Z"
+              stroke="#016730"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </div>
+        <p>{message}</p>
+      </div>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+      >
+        <path
+          d="M15 5L5 15M5 5L15 15"
+          stroke="#016730"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </div>
+  );
+};
+
+export default SuccessToast;

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

@@ -1,19 +1,22 @@
 "use client";
 import React, { useState } from "react";
 import styles from "./styles.module.css";
-import { usePathname, useRouter } from "next/navigation";
+import { usePathname, useRouter, useParams } from "next/navigation";
 
 const TopHeader = (props) => {
   const [triggerDropDownMenu, setTriggerDropDownMenu] = useState(false);
   const pathName = usePathname();
   const router = useRouter();
+  const params = useParams();
   const handleNavigateToAdd = () => {
     router.push(`${pathName}/add`);
   };
   return (
     <div className={styles.container}>
       <div className={styles.title}>
-        {pathName.includes("/view") && props.state === "view" && (
+        {((pathName.includes("/view") && props.state === "view") ||
+          params.usersId ||
+          params.roleId) && (
           <div onClick={() => router.back()}>
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -25,7 +28,6 @@ const TopHeader = (props) => {
               <path
                 d="M5 12H19"
                 stroke="#8287FF"
-                style={{ stroke: "#8287FF", strokeOpacity: 1 }}
                 strokeWidth="2"
                 strokeLinecap="round"
                 strokeLinejoin="round"
@@ -33,7 +35,6 @@ const TopHeader = (props) => {
               <path
                 d="M5 12L11 18"
                 stroke="#8287FF"
-                style={{ stroke: "#8287FF", strokeOpacity: 1 }}
                 strokeWidth="2"
                 strokeLinecap="round"
                 strokeLinejoin="round"
@@ -41,7 +42,6 @@ const TopHeader = (props) => {
               <path
                 d="M5 12L11 6"
                 stroke="#8287FF"
-                style={{ stroke: "#8287FF", strokeOpacity: 1 }}
                 strokeWidth="2"
                 strokeLinecap="round"
                 strokeLinejoin="round"

frontend/src/app/globals.css

@@ -42,8 +42,8 @@ a {
   }
 }
 ::-webkit-scrollbar {
-  width: 8px; /* vertical */
+  width: 8px;
-  height: 8px; /* horizontal */
+  height: 8px;
   background-color: transparent;
 }
 

frontend/src/app/organization/add/page.jsx

@@ -4,6 +4,7 @@ import TopHeader from "@/app/components/topHeader/TopHeader";
 import styles from "./styles.module.css";
 import Image from "next/image";
 import TopToolTip from "@/app/components/topToolTip/TopToolTip";
+import TextField from "@/app/components/fields/textfield";
 const AddCredentials = () => {
   return (
     <div className={globalStyle.section}>
@@ -70,7 +71,7 @@ const AddCredentials = () => {
                   </p>
                 </div>
                 <div className={styles.inputField}>
-                  <input type="text" placeholder="Enter organization name" />
+                  <TextField placeHolder="Enter organization name" />
                   <div className={styles.prompts}>
                     <svg
                       xmlns="http://www.w3.org/2000/svg"

frontend/src/app/organization/add/styles.module.css

@@ -149,8 +149,7 @@
 }
 .inputField > input {
   display: flex;
-  height: 44px;
+  padding: 12px;
-  padding: 12px 16px;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;

frontend/src/app/organization/page.jsx

@@ -3,6 +3,7 @@ import React from "react";
 import styles from "./styles.module.css";
 import TopHeader from "../components/topHeader/TopHeader";
 import globalStyle from "../globalStyle.module.css";
+import SuccessToast from "../components/toast/success/successToast";
 
 const OrganizationPage = () => {
   const sampleData = [
@@ -54,6 +55,7 @@ const OrganizationPage = () => {
 
   return (
     <div className={globalStyle.section}>
+      <SuccessToast />
       <div className={globalStyle.mainContainer}>
         <div className={globalStyle.container}>
           <TopHeader buttonText="Add Organization" topbarTitle="Organization" />

frontend/src/app/projects/page.jsx

@@ -4,6 +4,7 @@ import TopHeader from "../components/topHeader/TopHeader";
 import globalStyle from "../globalStyle.module.css";
 import styles from "./styles.module.css";
 import { useRouter } from "next/navigation";
+import SuccessToast from "../components/toast/success/successToast";
 const ProjectsPage = () => {
   const router = useRouter();
   const sampleData = [
@@ -165,6 +166,7 @@ const ProjectsPage = () => {
 
   return (
     <div className={globalStyle.section}>
+      <SuccessToast message="Project successfully added!" />
       <div className={globalStyle.mainContainer}>
         <div className={globalStyle.container}>
           <TopHeader buttonText="Create Project" topbarTitle="Project" />

frontend/src/app/projects/view/AddServicesModal/AddServicesModal.jsx

@@ -2,6 +2,7 @@
 import React from "react";
 import styles from "./styles.module.css";
 import { useRouter, usePathname } from "next/navigation";
+import CloseIcon from "@/app/components/icons/close";
 
 const AddServicesModal = (props) => {
   const router = useRouter();
@@ -90,31 +91,8 @@ const AddServicesModal = (props) => {
               <p>Choose how you want to create your service</p>
             </div>
           </div>
-          <svg
+
-            onClick={() => props.trigger(!props.triggerState)}
+          <CloseIcon onClick={() => props.trigger(!props.triggerState)} />
-            xmlns="http://www.w3.org/2000/svg"
-            width="28"
-            height="28"
-            viewBox="0 0 28 28"
-            fill="none"
-          >
-            <path
-              d="M20.7077 7.29199L7.29102 20.7087"
-              stroke="white"
-              strokeOpacity="1"
-              strokeWidth="1.5"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-            <path
-              d="M7.29102 7.29199L20.7077 20.7087"
-              stroke="white"
-              strokeOpacity="1"
-              strokeWidth="1.5"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
         </div>
         <div className={styles.content}>
           {servicesList.map((service, key) => {

frontend/src/app/projects/view/add-from-scratch/page.jsx

@@ -4,6 +4,7 @@ import globalStyle from "@/app/globalStyle.module.css";
 import TopHeader from "@/app/components/topHeader/TopHeader";
 import styles from "./styles.module.css";
 import variableStyles from "./variableStyles.module.css";
+import TextField from "@/app/components/fields/textfield";
 const AddServices = () => {
   const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false);
 
@@ -37,11 +38,11 @@ const AddServices = () => {
                   <div>
                     <div>
                       <p>Name</p>
-                      <input type="text" placeholder="Enter service name" />
+                      <TextField placeHolder="Enter service name" />
                     </div>
                     <div>
                       <p>Version</p>
-                      <input type="text" placeholder="Service version" />
+                      <TextField placeHolder="Service version" />
                     </div>
                   </div>
                   <div>
@@ -49,13 +50,13 @@ const AddServices = () => {
                       <p>
                         Image <span>(Optional)</span>
                       </p>
-                      <input type="text" placeholder="Enter image name" />
+                      <TextField placeHolder="Enter image name" />
                     </div>
                   </div>
                   <div>
                     <div>
                       <p>Port</p>
-                      <input type="text" placeholder="Enter port" />
+                      <TextField placeHolder="Enter port" />
                     </div>
                   </div>
                   <div>
@@ -82,21 +83,21 @@ const AddServices = () => {
                   <div>
                     <div>
                       <p>CPU Request (MB)</p>
-                      <input type="text" placeholder="100" />
+                      <TextField placeHolder="250" />
                     </div>
                     <div>
                       <p>CPU Limit (MB)</p>
-                      <input type="text" placeholder="250" />
+                      <TextField placeHolder="250" />
                     </div>
                   </div>
                   <div>
                     <div>
                       <p>Memory Request (MB)</p>
-                      <input type="text" placeholder="250" />
+                      <TextField placeHolder="250" />
                     </div>
                     <div>
                       <p>Memory Limit (MB)</p>
-                      <input type="text" placeholder="500" />
+                      <TextField placeHolder="500" />
                     </div>
                   </div>
                 </div>
@@ -114,14 +115,12 @@ const AddServices = () => {
                         <div>
                           <div>
                             <p>Name</p>
-                            <input
+
-                              type="text"
+                            <TextField placeHolder="Enter service name" />
-                              placeholder="Enter service name"
-                            />
                           </div>
                           <div>
                             <p>Version</p>
-                            <input type="text" placeholder="Service version" />
+                            <TextField placeHolder="Services version" />
                           </div>
                         </div>
                       </div>
@@ -169,17 +168,12 @@ const AddServices = () => {
                         <div>
                           <div>
                             <p>Liveness Path</p>
-                            <input
+                            <TextField placeHolder="Enter liveness path" />
-                              type="text"
-                              placeholder="Enter liveness path"
-                            />
                           </div>
                           <div>
                             <p>Liveness Port</p>
-                            <input
+
-                              type="text"
+                            <TextField placeHolder="Enter liveness port" />
-                              placeholder="Enter liveness port"
-                            />
                           </div>
                         </div>
                       </div>

frontend/src/app/projects/view/add-from-scratch/variableModals/AddConfigMap/AddConfigMapModal.jsx

@@ -0,0 +1 @@
+

frontend/src/app/projects/view/add-from-scratch/variableModals/AddVariableModal/AddVariableModal.jsx

@@ -0,0 +1,45 @@
+import React from "react";
+import styles from "./styles.module.css";
+import CloseIcon from "@/app/components/icons/close";
+import TextField from "@/app/components/fields/textfield";
+const AddConfigMapModal = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.modal}>
+        <div className={styles.modalHeader}>
+          <p>Environment Variables</p>
+          <CloseIcon />
+        </div>
+        <div className={styles.contentContainer}>
+          <div>
+            <div className={styles.contentHeader}>
+              <div>
+                <p>Generic</p>
+              </div>
+              <div>
+                <p>Generic</p>
+              </div>
+            </div>
+            <div className={styles.fieldContainer}>
+              <div className={styles.fields}>
+                <div>
+                  <div>
+                    <div>
+                      <p>Key</p>
+                      <TextField placeHolder="Enter variable key" />
+                    </div>
+                    <div>
+                      <p>Value</p>
+                      <TextField placeHolder="Enter" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default AddConfigMapModal;

frontend/src/app/projects/view/page.jsx

@@ -144,6 +144,7 @@ const AddProject = () => {
           triggerState={triggerAddServicesModal}
         />
       )}
+
       <div className={globalStyle.section}>
         <div className={globalStyle.mainContainer}>
           <div className={globalStyle.container}>