frontend/src/app/components/checkbox/CheckBox.jsx

@@ -0,0 +1,42 @@
+"use client";
+import { useState } from "react";
+import CheckIcon from "../icons/check";
+import styles from "./styles.module.css";
+import CloseIcon from "../icons/close";
+import CheckedIcon from "../icons/switchIcons/checked";
+import UnCheckedIcon from "../icons/switchIcons/unchecked";
+
+const CustomCheckbox = ({ checked, onChange, id }) => {
+  const [isChecked, setIsChecked] = useState(false);
+  return (
+    <>
+      <input
+        type="checkbox"
+        id={id}
+        className={styles.check}
+        checked={checked}
+        onChange={() => {
+          setIsChecked(!isChecked);
+          onChange;
+        }}
+      />
+
+      <label htmlFor={id} className={styles.switch}>
+        <span className={styles.knob}>
+          {isChecked ? (
+            <CheckedIcon
+              width={16}
+              height={16}
+              color="#4F378A"
+              viewBox="0 0 20 20"
+            />
+          ) : (
+            <UnCheckedIcon width={16} height={16} color="#fff" />
+          )}
+        </span>
+      </label>
+    </>
+  );
+};
+
+export default CustomCheckbox;

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

@@ -0,0 +1,46 @@
+.switch {
+  display: flex;
+  width: 53px;
+
+  height: 33px;
+  align-items: center;
+  background-color: white;
+  cursor: pointer;
+  padding: 0 2px;
+  border-radius: 150px;
+  position: relative;
+  border: 2px solid #6d6d6d;
+  overflow: hidden;
+}
+
+.check {
+  display: none;
+}
+
+/* The knob (replaces ::before) */
+.knob {
+  width: 25px;
+  height: 25px;
+  background-color: #6d6d6d;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  transition: all 0.15s ease-in-out;
+}
+.knob:hover {
+  box-shadow: 0 0 0px 5px #33333327;
+  background-color: #333;
+}
+
+.check:checked + .switch .knob {
+  transform: translateX(75%);
+  background-color: white;
+}
+
+/* Optional background change */
+.check:checked + .switch {
+  background-color: #8187ff;
+  border: 2px solid #8187ff;
+}

frontend/src/app/components/icons/switchIcons/checked.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+const CheckedIcon = ({
+  width = 20,
+  height = 20,
+  color = "white",
+  strokeWidth = 1.5,
+  ...props
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={20}
+      height={20}
+      viewBox="0 0 28 28"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M4.53125 10L8.4375 13.9062L16.25 6.09375"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default CheckedIcon;

frontend/src/app/components/icons/switchIcons/unchecked.jsx

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

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

@@ -65,7 +65,7 @@ const TopHeader = (props) => {
         {props.state === "add" ? (
           <>
             <div className={styles.button}>
-              <CheckIcon />
+              <CheckIcon width={20} height={20} />
               <p>{props.buttonText}</p>
             </div>
             <div className={styles.cancelButton} onClick={() => router.back()}>

frontend/src/app/projects/view/AddServicesModal/styles.module.css

@@ -18,10 +18,10 @@
   gap: 48px;
   border-radius: 8px;
   background: #21232f;
-  animation-name: dropDownAnimation;
+  animation-name: modalAnimation;
   animation-duration: 200ms;
 }
-@keyframes dropDownAnimation {
+@keyframes modalAnimation {
   0% {
     opacity: 0;
     transform: translateY(-10%);

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

@@ -9,11 +9,12 @@ import AddVariableModal from "./variableModals/AddVariableModal/AddVariableModal
 import AddVolumeModal from "./variableModals/AddVolumes/AddVolumeModal";
 import AddConfigMapModal from "./variableModals/AddConfigMap/AddConfigMapModal";
 import DeleteIcon from "@/app/components/icons/delete";
+import CustomCheckbox from "@/app/components/checkbox/CheckBox";
 const AddServices = () => {
   const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false);
   const [triggerAddVariable, setTriggerAddVariable] = useState(false);
   const [triggerAddVolume, setTriggerAddVolume] = useState(false);
-  const [triggeAddConfigMap, setTriggerAddConfigMap] = useState(true);
+  const [triggeAddConfigMap, setTriggerAddConfigMap] = useState(false);
   return (
     <div className={globalStyle.section}>
       {triggerAddVariable && (
@@ -123,6 +124,7 @@ const AddServices = () => {
                     <div className={styles.additionalDetailsHeader}>
                       <div>
                         <p>Auto Scaling</p>
+                        <CustomCheckbox id="scalingCheckBox" />
                       </div>
                     </div>
                     <div className={styles.additionalDetailsFields}>
@@ -147,6 +149,7 @@ const AddServices = () => {
                     <div className={styles.additionalDetailsHeader}>
                       <div>
                         <p>Readiness</p>
+                        <CustomCheckbox id="readiNessCheckBox" />
                       </div>
                     </div>
                     <div className={styles.additionalDetailsFields}>
@@ -176,6 +179,7 @@ const AddServices = () => {
                     <div className={styles.additionalDetailsHeader}>
                       <div>
                         <p>Liveness</p>
+                        <CustomCheckbox id="liveNessCheckBox" />
                       </div>
                     </div>
                     <div className={styles.additionalDetailsFields}>

frontend/src/app/projects/view/add-from-scratch/styles.module.css

@@ -18,7 +18,7 @@
 }
 .projectDetails {
   display: flex;
-  padding: 0 24px;
+  padding: 0 36px;
   flex-direction: column;
   align-items: flex-start;
   gap: 10px;
@@ -146,7 +146,7 @@
 }
 .additionalDetails {
   display: flex;
-  padding: 0 36px 50px 36px;
+  padding: 20px;
   flex-direction: column;
   align-items: flex-start;
   gap: 16px;
@@ -154,7 +154,7 @@
 }
 .additionalDetails > div {
   display: flex;
-  padding: 24px;
+  padding: 20px;
   flex-direction: column;
   align-items: flex-start;
   gap: 10px;

frontend/src/app/projects/view/add-from-scratch/variableStyles.module.css

@@ -138,7 +138,7 @@
 }
 .variablesContent {
   display: flex;
-  padding-bottom: 50px;
+  padding-bottom: auto;
   flex-direction: column;
   align-items: flex-start;
   align-self: stretch;
@@ -167,7 +167,8 @@
 }
 .environmentVariablesContainer {
   display: flex;
-  padding-bottom: 50px;
+  min-height: 200px;
+  padding-bottom: auto;
   flex-direction: column;
   align-items: flex-start;
   align-self: stretch;