switch btn

src/Components/SwitchButton.jsx

@@ -11,36 +11,42 @@ const SwitchButton = ({ isSwitchOn, setIsSwitchOn }) => {
       <Box
         as="button"
         display="flex"
+        justifyContent="normal"
         alignItems="center"
-        justifyContent={isSwitchOn ? "flex-end" : "flex-start"}
-        width="100px"
-        height="40px"
+        // justifyContent={isSwitchOn ? "flex-end" : "flex-start"}
+        width="90px"
+        height="24px"
         borderRadius="20px"
-        backgroundColor={isSwitchOn ? "#707070" : "#4CCD8D"}
+        backgroundColor={isSwitchOn ? "#004118" : "#ef0000"}
         onClick={switch_onChange_handle}
         position="relative"
+        fontSize="13px"
+        fontWeight="100"
         transition="background-color 0.2s"
         _before={{
           content: '""',
           position: "absolute",
-          width: "40px",
-          height: "40px",
+          width: "20px",
+          height: "20px",
           borderRadius: "50%",
           backgroundColor: "#FFF",
           boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)",
-          transform: isSwitchOn ? "translateX(60px)" : "translateX(0)",
+          transform: isSwitchOn ? "translateX(65px)" : "translateX(0)",
           transition: "transform 0.2s",
+          left:'2px'
         }}
       >
         <Text
-          color="#FFF"
-          fontWeight="bold"
+          // color="#FFF"
+          fontWeight="400"
           zIndex={1}
           position="absolute"
+          mb={0}
+          color={isSwitchOn ? "#fff" : "#fff"}
           left={isSwitchOn ? "10px" : "auto"}
           right={isSwitchOn ? "auto" : "10px"}
         >
-          {isSwitchOn ? 'Active' : 'Inactive'}
+          {isSwitchOn ? 'Active' : 'InActive'}
         </Text>
       </Box>
     </Box>

src/Pages/Master/InvestmentType/AddInvestmentType.jsx

@@ -105,7 +105,7 @@ const AddInvestmentType = () => {
       name: "investmentName",
       type: "text",
       isRequired: true,
-      section: "Personal Details",
+      section: "Add Details",
     },
     {
       label: "Investment Name (Arabic)",
@@ -113,14 +113,14 @@ const AddInvestmentType = () => {
       type: "text",
       isRequired: true,
       arabic: true,
-      section: "Personal Details",
+      section: "Add Details",
     },
     {
       label: "Description Name", 
       name: "description",
       type: "text",
       isRequired: true,
-      section: "Personal Details",
+      section: "Add Details",
     },
     {
       label: "Description Name (Arabic)",
@@ -128,7 +128,7 @@ const AddInvestmentType = () => {
       type: "text",
       isRequired: true,
       arabic: true,
-      section: "Personal Details",
+      section: "Add Details",
     },
   ];
 
@@ -157,7 +157,9 @@ const AddInvestmentType = () => {
 
   return (
     <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14}>
-      <SwitchButton isSwitchOn={isSwitchOn} setIsSwitchOn={setIsSwitchOn} />
+      <Box mt={5} display={'flex'} justifyContent={'right'} mr={5}>
+        <SwitchButton isSwitchOn={isSwitchOn} setIsSwitchOn={setIsSwitchOn} />
+      </Box>
       <FormInputMain
         groupedFields={groupedFields}
         control={control}

src/Pages/Master/InvestmentType/InvestmentType.jsx

@@ -260,11 +260,11 @@ const InvestmentType = () => {
             <Link to={"/investment-type/add-investment"}>
               <Button
                 leftIcon={<AddIcon />}
-                colorScheme={"green"}
+                colorScheme={"forestGreen"}
                 rounded={"sm"}
                 size={"sm"}
               >
-                Add Investment
+                Add
               </Button>
             </Link>
           </HStack>