[ forget modal ]

src/Layouts/DefaultLayout.tsx

@@ -43,7 +43,7 @@ const DefaultLayout: FC<{ children: React.ReactNode }> = ({ children }) => {
 
 
       <VStack  gap={0} h="100%" w="85%" >
-        <HStack h={'12%'} w={'100%'} justifyContent={'flex-end'} pe={3} gap={6}>
+        <HStack h={'11%'} w={'100%'} justifyContent={'flex-end'} pe={3} gap={6}>
           <NavLink to={'/manage-notification'}><RiNotificationLine color="#013e3e" cursor={'pointer'} style={{ fontSize: '22px' }} /></NavLink>
           <HStack cursor={'pointer'} onClick={() => navigate('/profile')} >
             <Avatar size={'sm'} src="https://i.pinimg.com/736x/d6/cd/0f/d6cd0ffd4634b0763d3958a7325ce26e.jpg" />

src/Pages/ForgetPassword.tsx

@@ -0,0 +1,65 @@
+import { Field, Input, Stack, Text } from "@chakra-ui/react";
+import { Button } from "../components/ui/button";
+import {
+  DialogBody,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../components/ui/dialog";
+function ForgetPassword() {
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Text w={"100%"} textAlign={"end"} mt={2} cursor={"pointer"}>
+          Forgot password?
+        </Text>
+      </DialogTrigger>
+
+      <DialogContent
+        bg={"#fff"}
+        w={{ base: "90%", md: "400px" }}
+        p={2}
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white" pt={3} pb={2}>
+          <DialogTitle
+            alignSelf="center"
+            color="black"
+            fontSize="18px"
+            textAlign={"center"}
+          >
+            Forgot Password
+          </DialogTitle>
+        </DialogHeader>
+
+        <DialogBody bg="white" pt={5}>
+          <Stack p={2}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Please Enter Email Address
+              </Field.Label>
+              <Input
+                color="black"
+                p={2}
+                fontSize="sm"
+                type="text"
+                border="1px solid grey"
+                size={"sm"}
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" mt={2} p={2}>
+          <Button w="100%" bg="#02A0A0" color={"#fff"}>
+            Reset Password
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </DialogRoot>
+  );
+}
+
+export default ForgetPassword;

src/Pages/Login.tsx

@@ -1,4 +1,4 @@
-import { Center, HStack, Image, Input, Text, VStack } from "@chakra-ui/react";
+import { Box, Center, HStack, Image, Input, Text, VStack } from "@chakra-ui/react";
 import axios from "axios";
 import { useContext, useState } from "react";
 import { useForm } from "react-hook-form";
@@ -11,6 +11,7 @@ import { Field } from "../components/ui/field";
 import { Toaster } from "../components/ui/toaster";
 import { PasswordInput } from "../components/ui/password-input";
 import { useNavigate } from "react-router-dom";
+import ForgetPassword from "./ForgetPassword";
 
 interface FormValues {
   mobileNumber: number;
@@ -103,14 +104,14 @@ const Login = () => {
           <Image w={250} src={logo} />
         </Center>
 
-        <Center
+        <Box
           as={"form"}
           onSubmit={onSubmit}
           p={{ base: 4, md: 16 }}
           w={{ base: "100%", md: "50%" }}
           h={"100%"}
         >
-          <VStack gap={2} w={"100%"} alignItems={"flex-start"}>
+          <VStack gap={2} w={"100%"}>
             <Text
               w={"100%"}
               textAlign={"center"}
@@ -121,13 +122,14 @@ const Login = () => {
               LOGIN
             </Text>
 
-            <VStack mt={6} gap={4} w={"full"}>
+            <Box mt={6} gap={4} w={"full"}>
               <Field
                 color={"#313039"}
                 label={"Enter Mobile Number"}
                 w={"100%"}
                 invalid={!!errors.mobileNumber}
                 errorText={errors.mobileNumber?.message}
+                mb={4}
               >
                 <Input
                   type="number"
@@ -145,6 +147,7 @@ const Login = () => {
                 w={"100%"}
                 invalid={!!errors.password}
                 errorText={errors.password?.message}
+                mb={2}
               >
                 <PasswordInput
                   ps={3}
@@ -166,10 +169,10 @@ const Login = () => {
                 Login
               </Button>
 
-              <Text>Forgot password</Text>
-            </VStack>
+              <ForgetPassword />
+            </Box>
           </VStack>
-        </Center>
+        </Box>
         <Toaster />
       </HStack>
     </VStack>

src/components/MainFrame.tsx

@@ -13,7 +13,7 @@ interface MainFrameProps {
 
 const MainFrame: FC<MainFrameProps> = ({ children }) => {
   return (
-    <MotionVStack  rounded="lg" overflowY={'auto'} overflowX={'hidden'} {...OPACITY_ON_LOAD} w="100%" minH="93%" p={0}  pb={2}>
+    <MotionVStack  rounded="lg" overflowY={'auto'} overflowX={'hidden'} {...OPACITY_ON_LOAD} w="100%" minH="89%" p={0}  pb={2}>
       <Box
         w="100%"
         // h="100%"

src/components/ui/password-input.tsx

@@ -86,7 +86,7 @@ const VisibilityTrigger = React.forwardRef<HTMLButtonElement, ButtonProps>(
       <IconButton
         tabIndex={-1}
         ref={ref}
-        me="-2"
+        me="2"
         aspectRatio="square"
         size="sm"
         variant="ghost"