Styling issue resolved (#33)

* Routing issue resolved

* response key mapping changes

* Style issues fixed

* Sonar issues resolved

* coderabbitai comments resolved

* Sonar cloud issue resolved

* Sonar cloud issue resolved

* style issues fixed

* style changed

src/App.tsx

@@ -25,6 +25,7 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import { useKeycloak } from "@react-keycloak/web";
 import { AuthProvider } from "./utils/context/checkToken";
 import "./assets/styles/App.css";
+import Layout from "./components/common/layout/Layout";
 
 function App() {
   const [loading, setLoading] = useState(true);
@@ -52,7 +53,7 @@ function App() {
   if (loading) {
     return (
       <ChakraProvider theme={theme}>
-        <Loader />
+        <Layout loading />
       </ChakraProvider>
     );
   }

src/assets/styles/App.css

@@ -82,7 +82,6 @@
 }
 
 .card-scroll {
-  height: 60vh;
   overflow-y: scroll;
 }
 
@@ -120,4 +119,4 @@ button:disabled {
   color: var(--theme-color);
   border: none !important;
   background: none;
-}
+}

src/components/ApplicationList.tsx

@@ -118,8 +118,6 @@ const ApplicationList: React.FC<ApplicationListProps> = ({
       as="section"
       aria-label="Applications list"
       style={{
-        height: "500px",
-        overflowY: "scroll",
         paddingBottom: "100px",
         padding: "16px",
         width: "100%",

src/components/common/Loader.tsx

@@ -1,12 +1,10 @@
 import { Spinner, Text, VStack } from "@chakra-ui/react";
-import { useTranslation } from "react-i18next";
 
 const Loader = () => {
-  const { t } = useTranslation();
   return (
     <VStack>
       <Spinner color="var(--theme-color)" />
-      <Text color="var(--theme-color)">{t("GENERAL_LOADING")}</Text>
+      <Text color="var(--theme-color)"> Loading...</Text>
     </VStack>
   );
 };

src/components/common/UploadDocumentEwallet.tsx

@@ -1,13 +1,15 @@
 import React, { useContext, useEffect, useRef } from "react";
-import OutlineButton from "./button/OutlineButton";
 import { processDocuments } from "../../utils/jsHelper/helper";
 import { uploadUserDocuments } from "../../services/user/User";
 import { getDocumentsList, getUser } from "../../services/auth/auth";
 import { AuthContext } from "../../utils/context/checkToken";
+import CommonButton from "./button/Button";
+import { useTranslation } from "react-i18next";
+
 const VITE_EWALLET_ORIGIN = import.meta.env.VITE_EWALLET_ORIGIN;
 const VITE_EWALLET_IFRAME_SRC = import.meta.env.VITE_EWALLET_IFRAME_SRC;
 const UploadDocumentEwallet = ({ userId }) => {
-  console.log("userId", userId);
+  const { t } = useTranslation();
   const { updateUserData } = useContext(AuthContext)!;
   const iframeRef = useRef(null);
 
@@ -63,9 +65,11 @@ const UploadDocumentEwallet = ({ userId }) => {
 
   return (
     <div>
-      <OutlineButton
-        label="Upload Missing Document"
+      <CommonButton
         onClick={sendMessageToIframe}
+        label={t("UPLOAD_DOCUMENT_EWALLET")}
+        mt={2}
+        variant="outline"
       />
 
       <iframe

src/components/common/UserDetails.tsx

@@ -92,21 +92,27 @@ const UserDetails: React.FC<UserDetailsProps> = ({ userData }) => {
           label={t("USER_DETAILS_MOTHER_NAME")}
           value={userData?.motherName}
         />
-        <Field label={t("USER_DETAILS_DOB")} value={userData?.dob} />
+        <Field label={t("USER_DETAILS_LAST_NAME")} value={userData?.lastName} />
       </VStack>
 
       <VStack spacing={6} align="stretch">
+        <HStack spacing={4}>
+          <Field label={t("USER_DETAILS_DOB")} value={userData?.dob} />{" "}
+          <Field
+            label={t("USER_DETAILS_DISABILITY")}
+            value={userData?.disabilityStatus}
+          />
+        </HStack>
         <HStack spacing={4}>
           <Field label={t("USER_DETAILS_GENDER")} value={userData?.gender} />
           <Field label={t("USER_DETAILS_CASTE")} value={userData?.caste} />
         </HStack>
-
         <HStack spacing={4}>
+          <Field label={t("USER_DETAILS_CLASS")} value={userData?.class} />
           <Field
-            label={t("USER_DETAILS_DISABILITY")}
-            value={userData?.disabilityStatus}
+            label={t("USER_DETAILS_PREVIOUS_YEAR_MARKS")}
+            value={userData?.previousYearMarks}
           />
-          <Field label={t("USER_DETAILS_CLASS")} value={userData?.class} />
         </HStack>
 
         <HStack spacing={4}>

src/components/common/i18n.tsx

@@ -1,4 +1,4 @@
-// src/i18n.ts
+// i18n.js
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
 

src/components/common/layout/BottomBar.tsx

@@ -1,10 +1,16 @@
 import React from "react";
-import { Box, Flex, IconButton, Text } from "@chakra-ui/react";
+import { Box, HStack, IconButton, Text } from "@chakra-ui/react";
 import { FaFileAlt } from "react-icons/fa";
 import { useNavigate, useLocation } from "react-router-dom";
 import { MdHome } from "react-icons/md";
 import { HiDocumentSearch } from "react-icons/hi";
-const BottomBar: React.FC = () => {
+import useDeviceSize from "./useDeviceSize";
+
+interface FooterProps {
+  setRef?: (ref: HTMLDivElement | null) => void;
+}
+const BottomBar: React.FC<FooterProps> = ({ setRef, ...props }) => {
+  const { width } = useDeviceSize();
   const navigate = useNavigate();
   const location = useLocation();
 
@@ -18,24 +24,28 @@ const BottomBar: React.FC = () => {
 
   return (
     <Box
-      bg="#EDEFFF"
-      borderRadius="lg"
-      shadow="lg"
-      borderWidth="1px"
-      background="#fff"
-      position="absolute"
-      bottom={0}
-      left="50%"
-      transform="translateX(-50%)"
-      width="100%"
-      maxW="550px"
-      height="85px"
-      paddingBottom="8"
+      width={width}
+      bg={"white"}
+      position="fixed"
+      bottom="0"
+      ref={(e) => typeof setRef === "function" && setRef(e)}
+      {...props}
+      zIndex={999}
+      pb={2}
     >
-      <Flex justify="space-around" align="center" py={2}>
-        <Flex
-          direction="column"
-          align="center"
+      <HStack
+        bg="primary.50"
+        alignItems="center"
+        borderTopWidth={"1px"}
+        borderTopColor={"#DDDDDD"}
+        shadow={"FooterShadow"}
+        justifyContent={"space-around"}
+      >
+        <Box
+          display="flex"
+          flexDirection="column"
+          alignItems="center"
+          justifyContent="center"
           onClick={() => handleNavigation("/home")}
         >
           <IconButton
@@ -48,11 +58,13 @@ const BottomBar: React.FC = () => {
           <Text fontSize="xs" color={getTabColor("/home")}>
             Home
           </Text>
-        </Flex>
+        </Box>
 
-        <Flex
-          direction="column"
-          align="center"
+        <Box
+          display="flex"
+          flexDirection="column"
+          alignItems="center"
+          justifyContent="center"
           onClick={() => handleNavigation("/explorebenefits")}
         >
           <IconButton
@@ -65,11 +77,13 @@ const BottomBar: React.FC = () => {
           <Text fontSize="xs" color={getTabColor("/explorebenefits")}>
             Search
           </Text>
-        </Flex>
+        </Box>
 
-        <Flex
-          direction="column"
-          align="center"
+        <Box
+          display="flex"
+          flexDirection="column"
+          alignItems="center"
+          justifyContent="center"
           onClick={() => handleNavigation("/applicationstatus")}
         >
           <IconButton
@@ -82,8 +96,8 @@ const BottomBar: React.FC = () => {
           <Text fontSize="xs" color={getTabColor("/applicationstatus")}>
             My Applications
           </Text>
-        </Flex>
-      </Flex>
+        </Box>
+      </HStack>
     </Box>
   );
 };

src/components/common/layout/Dialogue.tsx

@@ -15,7 +15,6 @@ import {
   AccordionPanel,
   AccordionIcon,
 } from "@chakra-ui/react";
-import OutlineButton from "../button/OutlineButton";
 import CommonButton from "../button/Button";
 import { useState } from "react";
 
@@ -49,17 +48,7 @@ const CommonDialogue: React.FC<CommonDialogueProps> = ({
           )}
         </ModalHeader>
         <ModalCloseButton />
-        {/* modal body for upload document component */}
-        {/* <ModalBody className="border-bottom">
-          <Text mt={4} mb={6} fontWeight="500" fontSize="20px">
-            Please upload the required documents to proceed with completing your
-            profile.
-          </Text>
-          <Text mt={2} mb={2} fontWeight="normal" fontSize="17px">
-            Upload the relevant document in .json or XML format.
-          </Text>
-          <UploadDocuments />
-        </ModalBody> */}
+
         <ModalBody className="border-bottom">
           {termsAndConditions ? (
             <>
@@ -97,10 +86,11 @@ const CommonDialogue: React.FC<CommonDialogueProps> = ({
         <ModalFooter>
           {termsAndConditions ? (
             <>
-              <OutlineButton
+              <CommonButton
+                variant="outline"
                 onClick={onClose}
                 label="Deny"
-                disabled={!isAccordionOpen}
+                isDisabled={!isAccordionOpen}
               />
               <Box ml={2}>
                 <CommonButton label="Accept" isDisabled={!isAccordionOpen} />

src/components/common/layout/HeadingText.tsx

@@ -28,6 +28,9 @@ const BackIcon: React.FC<{ onClick: () => void; iconSize?: number }> = ({
     onClick={onClick}
     variant="ghost"
     size="sm"
+    bg="white"
+    _hover={{ bg: "white" }}
+    _active={{ bg: "white" }}
   />
 );