From 688f6740627f6cdb421849d1fb012420be1d9d10 Mon Sep 17 00:00:00 2001 From: "Siddhesh.More" Date: Wed, 12 Feb 2025 11:54:21 +0530 Subject: [PATCH] update --- src/Layouts/DefaultLayout.tsx | 15 +++++++--- src/Pages/Dashboard/Dashboard.tsx | 2 ++ src/Pages/Login.tsx | 6 +++- src/Pages/ManageCMS/FAQ/FAQ.tsx | 2 +- src/Pages/ManageContact/ManageContact.tsx | 4 +-- src/Pages/ManageGroups/ManageGroups.tsx | 4 +-- src/Pages/ManageJobs/ManageJobs.tsx | 4 +-- src/Pages/ManagePost/ManagePost.tsx | 4 +-- .../DeactivatedAccounts.tsx | 2 +- .../RegisterUsers/RegisterUsers.tsx | 4 +-- .../AgencyMaster/AgencyMaster.tsx | 2 +- src/Pages/MasterModule/Country/Country.tsx | 4 +-- .../MasterModule/JobStatus/JobStatus.tsx | 4 +-- src/Pages/MasterModule/JobType/JobType.tsx | 4 +-- .../TemplateMaster/TemplateMaster.tsx | 4 +-- .../WorkspaceMode/WorkspaceMode.tsx | 4 +-- src/Pages/SubAdmin/SubAdmin.tsx | 2 +- src/Routes/Routes.ts | 3 ++ src/components/MainFrame.tsx | 3 +- src/components/ProgressBar/ProgessBar.css | 20 +++++++++++++ src/components/ProgressBar/ProgressBar.tsx | 12 ++++++++ src/components/Sipnner/Spinner.css | 28 ++++++++++++++++++ src/components/Sipnner/Spinner.tsx | 7 +++++ src/components/ui/toaster.tsx | 6 ++-- src/index.css | 29 +++---------------- 25 files changed, 121 insertions(+), 58 deletions(-) create mode 100644 src/components/ProgressBar/ProgessBar.css create mode 100644 src/components/ProgressBar/ProgressBar.tsx create mode 100644 src/components/Sipnner/Spinner.css create mode 100644 src/components/Sipnner/Spinner.tsx diff --git a/src/Layouts/DefaultLayout.tsx b/src/Layouts/DefaultLayout.tsx index e398ae7..ac7cd29 100644 --- a/src/Layouts/DefaultLayout.tsx +++ b/src/Layouts/DefaultLayout.tsx @@ -11,6 +11,7 @@ import { logout } from "../Redux/Service/authSlice"; import { useDispatch } from "react-redux"; import GlobalStateContext from "../Contexts/GlobalStateContext"; import { useLogOutMutation } from "../Redux/Service/apiSlice"; +import ProgressBar from "../components/ProgressBar/ProgressBar"; const DefaultLayout: FC<{ children: React.ReactNode }> = ({ children }) => { @@ -46,12 +47,15 @@ const DefaultLayout: FC<{ children: React.ReactNode }> = ({ children }) => { }; return ( - - - + + + + + + - + {nav?.map(({ title, path, Icon, type, children }, index) => type === 'single' ? {title} : @@ -66,7 +70,9 @@ const DefaultLayout: FC<{ children: React.ReactNode }> = ({ children }) => { + + navigate('/profile')} > @@ -79,6 +85,7 @@ const DefaultLayout: FC<{ children: React.ReactNode }> = ({ children }) => { {children} + ); }; diff --git a/src/Pages/Dashboard/Dashboard.tsx b/src/Pages/Dashboard/Dashboard.tsx index 10539a7..a01dcf6 100644 --- a/src/Pages/Dashboard/Dashboard.tsx +++ b/src/Pages/Dashboard/Dashboard.tsx @@ -26,6 +26,7 @@ import { SelectValueText } from "../../components/ui/select"; import AgencyName from "./AgencyName"; +import { Spinner } from "../../components/Sipnner/Spinner"; const Dashboard = () => { const frameworks = createListCollection({ @@ -186,6 +187,7 @@ const Dashboard = () => { + ); }; diff --git a/src/Pages/Login.tsx b/src/Pages/Login.tsx index 23f08c8..585aada 100644 --- a/src/Pages/Login.tsx +++ b/src/Pages/Login.tsx @@ -5,6 +5,7 @@ import { Image, Input, Text, + Theme, VStack, } from "@chakra-ui/react"; import axios from "axios"; @@ -78,6 +79,8 @@ const Login = () => { console.log("===================================="); } } catch (error) { + console.log('error', error); + if (error) { toaster.create({ // title: error?.response?.data?.message, @@ -91,7 +94,8 @@ const Login = () => { }); return ( - + + { colorPalette={"blue"} _focus={{ border: "1px solid #02A0A0" }} rounded={"md"} - size={"2xs"} + size={"xs"} fontSize={"2sm"} placeholder="Search..." bgColor={'#EEEEEE'} diff --git a/src/Pages/ManageContact/ManageContact.tsx b/src/Pages/ManageContact/ManageContact.tsx index d4d44ed..9861955 100644 --- a/src/Pages/ManageContact/ManageContact.tsx +++ b/src/Pages/ManageContact/ManageContact.tsx @@ -60,8 +60,8 @@ const ManageContact = () => { colorPalette={"blue"} _focus={{ border: "1px solid #02A0A0" }} rounded={"md"} - size={"2xs"} - fontSize={"2sm"} + size={"xs"} + fontSize={"sm"} placeholder="Search..." bgColor={'#EEEEEE'} ps={8} diff --git a/src/Pages/ManageGroups/ManageGroups.tsx b/src/Pages/ManageGroups/ManageGroups.tsx index 7cb4b8f..5824d73 100644 --- a/src/Pages/ManageGroups/ManageGroups.tsx +++ b/src/Pages/ManageGroups/ManageGroups.tsx @@ -82,8 +82,8 @@ const ManageGroups = () => { colorPalette={"blue"} _focus={{ border: "1px solid #02A0A0" }} rounded={"md"} - size={"2xs"} - fontSize={"2sm"} + size={"xs"} + fontSize={"sm"} placeholder="Search..." bgColor={'#EEEEEE'} ps={8} diff --git a/src/Pages/ManageJobs/ManageJobs.tsx b/src/Pages/ManageJobs/ManageJobs.tsx index 06ec2bf..3d408ab 100644 --- a/src/Pages/ManageJobs/ManageJobs.tsx +++ b/src/Pages/ManageJobs/ManageJobs.tsx @@ -83,8 +83,8 @@ const ManageJobs = () => { colorPalette={"blue"} _focus={{ border: "1px solid #02A0A0" }} rounded={"md"} - size={"2xs"} - fontSize={"2sm"} + size={"xs"} + fontSize={"sm"} placeholder="Search..." bgColor={'#EEEEEE'} ps={8} diff --git a/src/Pages/ManagePost/ManagePost.tsx b/src/Pages/ManagePost/ManagePost.tsx index fe4709e..8f63a58 100644 --- a/src/Pages/ManagePost/ManagePost.tsx +++ b/src/Pages/ManagePost/ManagePost.tsx @@ -90,8 +90,8 @@ const ManagePost = () => { colorPalette={"blue"} _focus={{ border: "1px solid #02A0A0" }} rounded={"md"} - size={"2xs"} - fontSize={"2sm"} + size={"xs"} + fontSize={"sm"} placeholder="Search..." bgColor={'#EEEEEE'} ps={8} diff --git a/src/Pages/ManageUsers/DeactivatedAccounts/DeactivatedAccounts.tsx b/src/Pages/ManageUsers/DeactivatedAccounts/DeactivatedAccounts.tsx index 8daf4f8..93c5727 100644 --- a/src/Pages/ManageUsers/DeactivatedAccounts/DeactivatedAccounts.tsx +++ b/src/Pages/ManageUsers/DeactivatedAccounts/DeactivatedAccounts.tsx @@ -57,7 +57,7 @@ const DeactivatedAccounts = () => { _focus={{ border: "1px solid #02A0A0" }} rounded={"md"} size={"2xs"} - fontSize={"2sm"} + fontSize={"sm"} placeholder="Search..." bgColor={'#EEEEEE'} ps={8} diff --git a/src/Pages/ManageUsers/RegisterUsers/RegisterUsers.tsx b/src/Pages/ManageUsers/RegisterUsers/RegisterUsers.tsx index 95965a9..c552fe3 100644 --- a/src/Pages/ManageUsers/RegisterUsers/RegisterUsers.tsx +++ b/src/Pages/ManageUsers/RegisterUsers/RegisterUsers.tsx @@ -84,8 +84,8 @@ const RegisterUsers = () => { colorPalette={"blue"} _focus={{ border: "1px solid #02A0A0" }} rounded={"md"} - size={"2xs"} - fontSize={"2sm"} + size={"xs"} + fontSize={"sm"} placeholder="Search..." bgColor={'#EEEEEE'} ps={8} diff --git a/src/Pages/MasterModule/AgencyMaster/AgencyMaster.tsx b/src/Pages/MasterModule/AgencyMaster/AgencyMaster.tsx index 2390a39..2bac861 100644 --- a/src/Pages/MasterModule/AgencyMaster/AgencyMaster.tsx +++ b/src/Pages/MasterModule/AgencyMaster/AgencyMaster.tsx @@ -77,7 +77,7 @@ const AgencyMaster = () => { _focus={{ border: "1px solid #02A0A0" }} rounded={"md"} size={"xs"} - fontSize={"2sm"} + fontSize={"sm"} placeholder="Search..." bgColor={'#EEEEEE'} ps={8} diff --git a/src/Pages/MasterModule/Country/Country.tsx b/src/Pages/MasterModule/Country/Country.tsx index 063eb7d..96afe6e 100644 --- a/src/Pages/MasterModule/Country/Country.tsx +++ b/src/Pages/MasterModule/Country/Country.tsx @@ -63,8 +63,8 @@ const Country = () => { colorPalette={"blue"} _focus={{ border: "1px solid #02A0A0" }} rounded={"md"} - size={"2xs"} - fontSize={"2sm"} + size={"xs"} + fontSize={"sm"} placeholder="Search..." bgColor={'#EEEEEE'} ps={8} diff --git a/src/Pages/MasterModule/JobStatus/JobStatus.tsx b/src/Pages/MasterModule/JobStatus/JobStatus.tsx index 409dfc1..403509a 100644 --- a/src/Pages/MasterModule/JobStatus/JobStatus.tsx +++ b/src/Pages/MasterModule/JobStatus/JobStatus.tsx @@ -63,8 +63,8 @@ const JobStatus = () => { colorPalette={"blue"} _focus={{ border: "1px solid #02A0A0" }} rounded={"md"} - size={"2xs"} - fontSize={"2sm"} + size={"xs"} + fontSize={"sm"} placeholder="Search..." bgColor={'#EEEEEE'} ps={8} diff --git a/src/Pages/MasterModule/JobType/JobType.tsx b/src/Pages/MasterModule/JobType/JobType.tsx index 353387f..6c7b3d4 100644 --- a/src/Pages/MasterModule/JobType/JobType.tsx +++ b/src/Pages/MasterModule/JobType/JobType.tsx @@ -63,8 +63,8 @@ const JobType = () => { colorPalette={"blue"} _focus={{ border: "1px solid #02A0A0" }} rounded={"md"} - size={"2xs"} - fontSize={"2sm"} + size={"xs"} + fontSize={"sm"} placeholder="Search..." bgColor={'#EEEEEE'} ps={8} diff --git a/src/Pages/MasterModule/TemplateMaster/TemplateMaster.tsx b/src/Pages/MasterModule/TemplateMaster/TemplateMaster.tsx index 0fec845..a26c28f 100644 --- a/src/Pages/MasterModule/TemplateMaster/TemplateMaster.tsx +++ b/src/Pages/MasterModule/TemplateMaster/TemplateMaster.tsx @@ -76,8 +76,8 @@ const TemplateMaster = () => { colorPalette={"blue"} _focus={{ border: "1px solid #02A0A0" }} rounded={"md"} - size={"2xs"} - fontSize={"2sm"} + size={"xs"} + fontSize={"sm"} placeholder="Search..." bgColor={'#EEEEEE'} ps={8} diff --git a/src/Pages/MasterModule/WorkspaceMode/WorkspaceMode.tsx b/src/Pages/MasterModule/WorkspaceMode/WorkspaceMode.tsx index c5a2a21..ffc6939 100644 --- a/src/Pages/MasterModule/WorkspaceMode/WorkspaceMode.tsx +++ b/src/Pages/MasterModule/WorkspaceMode/WorkspaceMode.tsx @@ -63,8 +63,8 @@ const WorkspaceMode = () => { colorPalette={"blue"} _focus={{ border: "1px solid #02A0A0" }} rounded={"md"} - size={"2xs"} - fontSize={"2sm"} + size={"xs"} + fontSize={"sm"} placeholder="Search..." bgColor={'#EEEEEE'} ps={8} diff --git a/src/Pages/SubAdmin/SubAdmin.tsx b/src/Pages/SubAdmin/SubAdmin.tsx index 51a01b2..b48a452 100644 --- a/src/Pages/SubAdmin/SubAdmin.tsx +++ b/src/Pages/SubAdmin/SubAdmin.tsx @@ -80,7 +80,7 @@ const SubAdmin = () => { _focus={{ border: "1px solid #02A0A0" }} rounded={"md"} size={"xs"} - fontSize={"2sm"} + fontSize={"sm"} placeholder="Search..." bgColor={'#EEEEEE'} ps={8} diff --git a/src/Routes/Routes.ts b/src/Routes/Routes.ts index 084cc1b..c014a40 100644 --- a/src/Routes/Routes.ts +++ b/src/Routes/Routes.ts @@ -22,6 +22,7 @@ import Country from "../Pages/MasterModule/Country/Country"; import JobStatus from "../Pages/MasterModule/JobStatus/JobStatus"; import RegisterUsers from "../Pages/ManageUsers/RegisterUsers/RegisterUsers"; import DeactivatedAccounts from "../Pages/ManageUsers/DeactivatedAccounts/DeactivatedAccounts"; +import { Spinner } from "../components/Sipnner/Spinner"; export const RouteLink = [ { path: "/", Component: Dashboard }, @@ -47,4 +48,6 @@ export const RouteLink = [ { path: "/workspace-mode", Component: WorkspaceMode}, { path: "/country", Component: Country}, { path: "/job-status", Component: JobStatus}, + // { path: "/job-status", Component: Spinner}, + ] \ No newline at end of file diff --git a/src/components/MainFrame.tsx b/src/components/MainFrame.tsx index e486ade..d6a3404 100644 --- a/src/components/MainFrame.tsx +++ b/src/components/MainFrame.tsx @@ -13,7 +13,7 @@ interface MainFrameProps { const MainFrame: FC = ({ children }) => { return ( - + = ({ children }) => { rounded="lg" boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} pt={3} + > {children} diff --git a/src/components/ProgressBar/ProgessBar.css b/src/components/ProgressBar/ProgessBar.css new file mode 100644 index 0000000..4c270b8 --- /dev/null +++ b/src/components/ProgressBar/ProgessBar.css @@ -0,0 +1,20 @@ +/* HTML:
*/ +.progressbar { + height: 4px; + width: 100%; + --c: no-repeat linear-gradient(#02A0A0 0 0); + background: var(--c), var(--c), #B8F8F8; + background-size: 60% 100%; + animation: l16 3s infinite; +} + +@keyframes l16 { + 0% {background-position: -150% 0, -150% 0} + 66% {background-position: 250% 0, -150% 0} + 100% {background-position: 250% 0, 250% 0} +} + +.progressbarInactive{ + height: 4px; + width: 100%; +} \ No newline at end of file diff --git a/src/components/ProgressBar/ProgressBar.tsx b/src/components/ProgressBar/ProgressBar.tsx new file mode 100644 index 0000000..f5ff9ac --- /dev/null +++ b/src/components/ProgressBar/ProgressBar.tsx @@ -0,0 +1,12 @@ +import React from "react"; +import './ProgessBar.css'; + +interface ProgressBarProps { + isLoading: boolean; +} + +const ProgressBar: React.FC = ({ isLoading }) => { + return ; +}; + +export default ProgressBar; diff --git a/src/components/Sipnner/Spinner.css b/src/components/Sipnner/Spinner.css new file mode 100644 index 0000000..b6df8cd --- /dev/null +++ b/src/components/Sipnner/Spinner.css @@ -0,0 +1,28 @@ +/* HTML:
*/ +.loader { + width: 25px; + aspect-ratio: 1; + display: grid; + border-radius: 50%; + background: + linear-gradient(0deg, rgba(2, 160, 160, 0.5) 30%, transparent 0 70%, rgba(2, 160, 160, 1) 0) 50% / 8% 100%, + linear-gradient(90deg, rgba(2, 160, 160, 0.25) 30%, transparent 0 70%, rgba(2, 160, 160, 0.75) 0) 50% / 100% 8%; + background-repeat: no-repeat; + animation: l23 1s infinite steps(12); + } + .loader::before, + .loader::after { + content: ""; + grid-area: 1/1; + border-radius: 50%; + background: inherit; + opacity: 0.915; + transform: rotate(30deg); + } + .loader::after { + opacity: 0.83; + transform: rotate(60deg); + } + @keyframes l23 { + 100% {transform: rotate(1turn)} + } \ No newline at end of file diff --git a/src/components/Sipnner/Spinner.tsx b/src/components/Sipnner/Spinner.tsx new file mode 100644 index 0000000..12dc49d --- /dev/null +++ b/src/components/Sipnner/Spinner.tsx @@ -0,0 +1,7 @@ +import { Center } from '@chakra-ui/react' +import './Spinner.css' +export const Spinner = () =>
+ + + + diff --git a/src/components/ui/toaster.tsx b/src/components/ui/toaster.tsx index a4251eb..9101dbf 100644 --- a/src/components/ui/toaster.tsx +++ b/src/components/ui/toaster.tsx @@ -17,16 +17,16 @@ export const toaster = createToaster({ export const Toaster = () => { return ( - + {(toast) => ( - + {toast.type === "loading" ? ( ) : ( )} - + {toast.title && {toast.title}} {toast.description && ( {toast.description} diff --git a/src/index.css b/src/index.css index 862601a..a7a0c7c 100644 --- a/src/index.css +++ b/src/index.css @@ -147,32 +147,10 @@ body { } -/* Style the scrollbar */ -::-webkit-scrollbar { - width: 6px; - /* Width of the vertical scrollbar */ - height: 12px; - /* Height of the horizontal scrollbar */ -} - -/* Style the scrollbar track (the background area) */ -::-webkit-scrollbar-track { - background-color: #f1f1f1; - border-radius: 10px; -} - -/* Style the scrollbar thumb (the draggable part) */ -::-webkit-scrollbar-thumb { - background-color: #c8c8c8cf; - /* Gray color for the thumb */ - border-radius: 10px; - border: 1px solid #f1f1f1; - /* Border around the thumb */ -} /* Scrollbar width */ ::-webkit-scrollbar { - width: 8px; + width: 6px; height: 8px; cursor: pointer; } @@ -184,14 +162,15 @@ body { /* Scrollbar thumb (the draggable part) */ ::-webkit-scrollbar-thumb { - background: rgba(0, 0, 0, 0.3); /* Light black (30% opacity) */ + background: rgba(0, 0, 0, 0.2); /* Light black (30% opacity) */ border-radius: 10px; /* Rounded edges */ transition: background 0.3s; } /* On hover, make it darker */ ::-webkit-scrollbar-thumb:hover { - background: rgba(0, 0, 0, 0.5); + background: rgba(0, 0, 0, 0.411); + cursor: pointer; }