From 86698175fec3763308bad59bf71d4acffe0fbc97 Mon Sep 17 00:00:00 2001
From: Sinan <muhammedsinan7749@gmail.com>
Date: Fri, 23 Aug 2024 18:35:37 +0530
Subject: [PATCH] tabler icons removed with svg files

---
 .../new-appointment/success/page.tsx          | 82 ++++++++-----------
 client/{lib/redux => app}/StoreProvider.tsx   |  2 +-
 client/app/layout.tsx                         |  2 +-
 client/components/CustomFormField.tsx         |  4 +-
 client/components/NavBar.tsx                  | 14 +++-
 client/components/forms/SignupForm.tsx        |  5 +-
 client/components/forms/doctor/SigninForm.tsx |  4 +-
 client/components/ui/sidebar.tsx              | 67 +++++----------
 client/constants/index.tsx                    | 30 +++----
 client/package-lock.json                      | 25 ------
 client/package.json                           |  1 -
 client/public/assets/icons/calendar.svg       |  1 +
 client/public/assets/icons/email.svg          |  4 +
 client/public/assets/icons/user-filled.svg    |  4 +
 client/public/assets/icons/user.svg           |  3 +
 client/public/assets/icons/x.svg              |  3 +
 16 files changed, 95 insertions(+), 156 deletions(-)
 rename client/{lib/redux => app}/StoreProvider.tsx (82%)
 create mode 100644 client/public/assets/icons/calendar.svg
 create mode 100644 client/public/assets/icons/email.svg
 create mode 100644 client/public/assets/icons/user-filled.svg
 create mode 100644 client/public/assets/icons/user.svg
 create mode 100644 client/public/assets/icons/x.svg

diff --git a/client/app/(patient)/new-appointment/success/page.tsx b/client/app/(patient)/new-appointment/success/page.tsx
index f0b21996..57f4f256 100644
--- a/client/app/(patient)/new-appointment/success/page.tsx
+++ b/client/app/(patient)/new-appointment/success/page.tsx
@@ -1,54 +1,38 @@
-import { Button } from '@/components/ui/button'
-import Image from 'next/image'
-import Link from 'next/link'
-import React from 'react'
+import { Button } from "@/components/ui/button";
+import Image from "next/image";
+import Link from "next/link";
+import React from "react";
 
 const SuccessPage = () => {
   return (
-    <div className='flex h-screen max-h-screen px-[5%]'>
-        <div className="success-img">
-            <Link href='/'>
-                <Image
-                src={'/assets/icons/logo-full.svg'}
-                width={1000}
-                height={1000}
-                alt='Logo'
-                className='h-10 w-fit'
-                 />
-            </Link>
-            <section className='flex flex-col items-center'>
-            <Image
-            src={'/assets/gifs/success.gif'}
-            width={300}
-            height={280}
-            alt='Success'
-             />
-            <h2 className='header mb-6 max-w-[600px] text-center'>
-                Your <span className='text-green-500'>Appointment request</span> has been successfully submitted!.
-            </h2>
-            <p>We will be in touch shortly to confirm.</p>
-            </section>
-            <section className='request-details'>
-                <p>Request Appointment details</p>
-                <div className='flex  gap-3'>
-                    <Image
-                    src={'/assets/icons/calendar.svg'}
-                    width={24}
-                    height={24}
-                    alt='Calendar'
-                     />
-                    <p>Date: <span className='text-gray-300'>October 12, 2022, 3:00 PM </span></p>
-                </div>
-            </section>
-            <Button variant={'outline'} className='shad-primary-btn' asChild>
-                <Link href={'/patient/new-appointment'}>
-                    New Appointment
-                </Link>
-            </Button>
-                <p className='copyright'>© 2024 AVM  Ayurveda&apos;s</p>
-        </div>
+    <div className="flex h-screen max-h-screen px-[5%]">
+      <div className="success-img">
+        <Link href="/">
+          <Image src={"/assets/icons/logo-full.svg"} width={1000} height={1000} alt="Logo" className="h-10 w-fit" />
+        </Link>
+        <section className="flex flex-col items-center">
+          <Image src={"/assets/gifs/success.gif"} className="w-auto h-auto"  priority width={300} height={280} alt="Success" />
+          <h2 className="header mb-6 max-w-[600px] text-center">
+            Your <span className="text-green-500">Appointment request</span> has been successfully submitted!.
+          </h2>
+          <p>We will be in touch shortly to confirm.</p>
+        </section>
+        <section className="request-details">
+          <p>Request Appointment details</p>
+          <div className="flex  gap-3">
+            <Image src={"/assets/icons/calendar.svg"} width={24} height={24} alt="Calendar" />
+            <p>
+              Date: <span className="text-gray-300">October 12, 2022, 3:00 PM </span>
+            </p>
+          </div>
+        </section>
+        <Button variant={"outline"} className="shad-primary-btn" asChild>
+          <Link href={"/patient/new-appointment"}>New Appointment</Link>
+        </Button>
+        <p className="copyright">© 2024 AVM Ayurveda&apos;s</p>
+      </div>
     </div>
-  )
-}
+  );
+};
 
-export default SuccessPage
\ No newline at end of file
+export default SuccessPage;
diff --git a/client/lib/redux/StoreProvider.tsx b/client/app/StoreProvider.tsx
similarity index 82%
rename from client/lib/redux/StoreProvider.tsx
rename to client/app/StoreProvider.tsx
index 67f69d68..a3cc78f2 100644
--- a/client/lib/redux/StoreProvider.tsx
+++ b/client/app/StoreProvider.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { Provider } from 'react-redux';
-import { store } from './store';
+import { store } from '@/lib/redux/store';
 
 export default function StoreProvider({ children }: { children: React.ReactNode }) {
   return <Provider store={store}>{children}</Provider>;
diff --git a/client/app/layout.tsx b/client/app/layout.tsx
index 9bbfcdd1..73259fac 100644
--- a/client/app/layout.tsx
+++ b/client/app/layout.tsx
@@ -3,7 +3,7 @@ import { Plus_Jakarta_Sans } from "next/font/google";
 import "../styles/globals.css";
 import { cn } from "@/lib/utils";
 import { ThemeProvider } from "@/components/theme-provider";
-import StoreProvider from "../lib/redux/StoreProvider";
+import StoreProvider from "./StoreProvider";
 import NavBar from "@/components/NavBar";
 
 const inter = Plus_Jakarta_Sans({
diff --git a/client/components/CustomFormField.tsx b/client/components/CustomFormField.tsx
index 6f6c15a6..e17c32fd 100644
--- a/client/components/CustomFormField.tsx
+++ b/client/components/CustomFormField.tsx
@@ -18,7 +18,7 @@ import { Select } from "@radix-ui/react-select";
 import { SelectContent, SelectTrigger, SelectValue } from "./ui/select";
 import { Checkbox } from "./ui/checkbox";
 import { Textarea } from "./ui/textarea";
-import { IconCalendar } from "@tabler/icons-react";
+
 
 const RenderField = ({ field, props }: { field: any; props: CustomProps }) => {
   const {
@@ -71,7 +71,7 @@ const RenderField = ({ field, props }: { field: any; props: CustomProps }) => {
     case FormFieldType.DATE_PICKER:
       return (
         <div className="flex rounded-md border border-dark-500 bg-dark-400">
-          <IconCalendar className="ml-2 mt-1" />
+          <Image src={'/assets/icons/calendar.svg'} alt="Calendar" width={22} height={22} className="ml-2 mt-1" />
           <FormControl>
             <ReactDatePicker
               showTimeSelect={props.showTimeSelect ?? false}
diff --git a/client/components/NavBar.tsx b/client/components/NavBar.tsx
index a1551413..e049411b 100644
--- a/client/components/NavBar.tsx
+++ b/client/components/NavBar.tsx
@@ -18,7 +18,7 @@ export default function Component() {
   return (
     <header className="sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6">
       <nav className="hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6">
-        <Link href="#" className="flex items-center gap-2 text-lg font-semibold md:text-base" prefetch={false}>
+        <Link href="/" className="flex items-center gap-2 text-lg font-semibold md:text-base" prefetch={false}>
           <Package2 className="h-6 w-6" />
           <span className="sr-only">Acme Inc</span>
         </Link>
@@ -44,8 +44,14 @@ export default function Component() {
             <span className="sr-only">Navigation Menu</span>
           </SheetTitle>
           <nav className="grid gap-6 text-lg font-medium">
-            <Link href="#" className="flex items-center gap-2 text-lg font-semibold" prefetch={false}>
-              <Package2 className="h-6 w-6" />
+            <Link href="/client" className="flex items-center gap-2 text-lg font-semibold" prefetch={false}>
+              <Image
+                src={"/assets/icons/logo-icon.svg"}
+                width={33}
+                height={33}
+                alt="Logo"
+                className="h-11 w-11"
+              />
               <span className="sr-only">Acme Inc</span>
             </Link>
             {NavLinks.map((link) => (
@@ -90,7 +96,7 @@ export default function Component() {
               <span className="sr-only">Toggle user menu</span>
             </Button>
           </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
+          <DropdownMenuContent align="end" className="mt-3">
             <DropdownMenuLabel>My Account</DropdownMenuLabel>
             <DropdownMenuSeparator />
             <DropdownMenuItem>Settings</DropdownMenuItem>
diff --git a/client/components/forms/SignupForm.tsx b/client/components/forms/SignupForm.tsx
index d96a670d..c83a8b66 100644
--- a/client/components/forms/SignupForm.tsx
+++ b/client/components/forms/SignupForm.tsx
@@ -10,7 +10,6 @@ import SubmitButton from "@/components/SubmitButton";
 import { signupFormValidation } from "@/lib/userValidation";
 import { FormFieldType } from "@/types/fromTypes";
 import Link from "next/link";
-import { IconMail, IconUser } from "@tabler/icons-react";
 
 const RegistrationForm = () => {
   const [isLoading, setIsLoading] = useState<boolean>(false);
@@ -57,7 +56,7 @@ const RegistrationForm = () => {
           name="name"
           label="Full Name *"
           placeholder="John Doe"
-          Icon={IconUser}
+          iconSrc="/assets/icons/user.svg"
         />
 
         {/* EMAIL & PHONE */}
@@ -68,7 +67,7 @@ const RegistrationForm = () => {
             name="email"
             label="Email address  *"
             placeholder="johndoe@gmail.com"
-            Icon={IconMail}
+            iconSrc={'/assets/icons/email.svg'}
           />
 
           <CustomFormField
diff --git a/client/components/forms/doctor/SigninForm.tsx b/client/components/forms/doctor/SigninForm.tsx
index 037ecef0..319d4aeb 100644
--- a/client/components/forms/doctor/SigninForm.tsx
+++ b/client/components/forms/doctor/SigninForm.tsx
@@ -8,9 +8,7 @@ import { Form } from "@/components/ui/form";
 import CustomFormField from "@/components/CustomFormField";
 import SubmitButton from "@/components/SubmitButton";
 import { signinFormValidation } from "@/lib/adminValidation";
-import Link from "next/link";
 import { FormFieldType } from "@/types/fromTypes";
-import { IconMail } from "@tabler/icons-react";
 
 const SigninForm = () => {
   const [isLoading, setIsLoading] = useState<boolean>(false);
@@ -44,7 +42,7 @@ const SigninForm = () => {
             name="email"
             label="Email address  *"
             placeholder="johndoe@gmail.com"
-            Icon={IconMail}
+            iconSrc={'/assets/icons/email.svg'}
           />
 
         <CustomFormField
diff --git a/client/components/ui/sidebar.tsx b/client/components/ui/sidebar.tsx
index ee5c5c59..2aa2354c 100644
--- a/client/components/ui/sidebar.tsx
+++ b/client/components/ui/sidebar.tsx
@@ -3,7 +3,7 @@ import { cn } from "@/lib/utils";
 import Link, { LinkProps } from "next/link";
 import React, { useState, createContext, useContext } from "react";
 import { AnimatePresence, motion } from "framer-motion";
-import { IconMenu2, IconX } from "@tabler/icons-react";
+import Image from "next/image";
 
 interface Links {
   label: string;
@@ -17,9 +17,7 @@ interface SidebarContextProps {
   animate: boolean;
 }
 
-const SidebarContext = createContext<SidebarContextProps | undefined>(
-  undefined
-);
+const SidebarContext = createContext<SidebarContextProps | undefined>(undefined);
 
 export const useSidebar = () => {
   const context = useContext(SidebarContext);
@@ -44,11 +42,7 @@ export const SidebarProvider = ({
   const open = openProp !== undefined ? openProp : openState;
   const setOpen = setOpenProp !== undefined ? setOpenProp : setOpenState;
 
-  return (
-    <SidebarContext.Provider value={{ open, setOpen, animate }}>
-      {children}
-    </SidebarContext.Provider>
-  );
+  return <SidebarContext.Provider value={{ open, setOpen, animate }}>{children}</SidebarContext.Provider>;
 };
 
 export const Sidebar = ({
@@ -78,11 +72,7 @@ export const SidebarBody = (props: React.ComponentProps<typeof motion.div>) => {
   );
 };
 
-export const DesktopSidebar = ({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof motion.div>) => {
+export const DesktopSidebar = ({ className, children, ...props }: React.ComponentProps<typeof motion.div>) => {
   const { open, setOpen, animate } = useSidebar();
   return (
     <>
@@ -96,19 +86,14 @@ export const DesktopSidebar = ({
         }}
         onMouseEnter={() => setOpen(true)}
         onMouseLeave={() => setOpen(false)}
-        {...props}
-      >
+        {...props}>
         {children}
       </motion.div>
     </>
   );
 };
 
-export const MobileSidebar = ({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<"div">) => {
+export const MobileSidebar = ({ className, children, ...props }: React.ComponentProps<"div">) => {
   const { open, setOpen } = useSidebar();
   return (
     <>
@@ -116,11 +101,14 @@ export const MobileSidebar = ({
         className={cn(
           "h-10 px-4 py-4 flex flex-row md:hidden  items-center justify-between bg-neutral-100 dark:bg-neutral-800 w-full"
         )}
-        {...props}
-      >
+        {...props}>
         <div className="flex justify-end z-20 w-full">
-          <IconMenu2
-            className="text-neutral-800 dark:text-neutral-200"
+          <Image
+            src={"/assets/icons/menu.svg"}
+            alt="Menu Icon"
+            width={28}
+            height={28}
+            className=""
             onClick={() => setOpen(!open)}
           />
         </div>
@@ -137,13 +125,11 @@ export const MobileSidebar = ({
               className={cn(
                 "fixed h-full w-full inset-0 bg-white dark:bg-neutral-900 p-10 z-[100] flex flex-col justify-between",
                 className
-              )}
-            >
+              )}>
               <div
                 className="absolute right-10 top-10 z-50 text-neutral-800 dark:text-neutral-200"
-                onClick={() => setOpen(!open)}
-              >
-                <IconX />
+                onClick={() => setOpen(!open)}>
+                <Image src="/assets/icons/x.svg" alt="X icon" width={23} height={23} />
               </div>
               {children}
             </motion.div>
@@ -154,25 +140,13 @@ export const MobileSidebar = ({
   );
 };
 
-export const SidebarLink = ({
-  link,
-  className,
-  ...props
-}: {
-  link: Links;
-  className?: string;
-  props?: LinkProps;
-}) => {
+export const SidebarLink = ({ link, className, ...props }: { link: Links; className?: string; props?: LinkProps }) => {
   const { open, animate } = useSidebar();
   return (
     <Link
       href={link.href}
-      className={cn(
-        "flex items-center justify-start gap-2  group/sidebar py-2",
-        className
-      )}
-      {...props}
-    >
+      className={cn("flex items-center justify-start gap-2  group/sidebar py-2", className)}
+      {...props}>
       {link.icon}
 
       <motion.span
@@ -180,8 +154,7 @@ export const SidebarLink = ({
           display: animate ? (open ? "inline-block" : "none") : "inline-block",
           opacity: animate ? (open ? 1 : 0) : 1,
         }}
-        className="text-neutral-700 dark:text-neutral-200 text-sm group-hover/sidebar:translate-x-1 transition duration-150 whitespace-pre inline-block !p-0 !m-0"
-      >
+        className="text-neutral-700 dark:text-neutral-200 text-sm group-hover/sidebar:translate-x-1 transition duration-150 whitespace-pre inline-block !p-0 !m-0">
         {link.label}
       </motion.span>
     </Link>
diff --git a/client/constants/index.tsx b/client/constants/index.tsx
index ffdcdd16..3f9ccc60 100644
--- a/client/constants/index.tsx
+++ b/client/constants/index.tsx
@@ -1,15 +1,5 @@
 import { DoctorType, NavLinkType } from "@/types";
-import {
-  IconArrowLeft,
-  IconBrandTabler,
-  IconSettings,
-  IconUserBolt,
-  IconBuildingStore,
-  IconHomeFilled,
-  IconMessageFilled,
-  IconCalendarPlus,
-  IconUserFilled,
-} from "@tabler/icons-react";
+import Image from "next/image";
 
 export const AppointmentTypes: { type: string; image: string }[] = [
   {
@@ -91,38 +81,38 @@ export const AdminSideBarLinks = [
     label: "Dashboard",
     href: "#",
     icon: (
-      <IconBrandTabler className="text-neutral-700 dark:text-neutral-200 h-5 w-5 flex-shrink-0" />
+      <Image src={'/assets/icons/user.svg'} width={21} height={23} alt='User Icon' className="text-neutral-700 dark:text-neutral-200 h-5 w-5 flex-shrink-0" />
     ),
   },
   {
     label: "Profile",
     href: "#",
     icon: (
-      <IconUserBolt className="text-neutral-700 dark:text-neutral-200 h-5 w-5 flex-shrink-0" />
+      <Image src={'/assets/icons/user.svg'} width={21} height={23} alt='User Icon' className="text-neutral-700 dark:text-neutral-200 h-5 w-5 flex-shrink-0" />
     ),
   },
   {
     label: "Settings",
     href: "#",
     icon: (
-      <IconSettings className="text-neutral-700 dark:text-neutral-200 h-5 w-5 flex-shrink-0" />
+      <Image src={'/assets/icons/user.svg'} width={21} height={23} alt='User Icon' className="text-neutral-700 dark:text-neutral-200 h-5 w-5 flex-shrink-0" />
     ),
   },
   {
     label: "Logout",
     href: "#",
     icon: (
-      <IconArrowLeft className="text-neutral-700 dark:text-neutral-200 h-5 w-5 flex-shrink-0" />
+      <Image src={'/assets/icons/user.svg'} width={21} height={23} alt='User Icon' className="text-neutral-700 dark:text-neutral-200 h-5 w-5 flex-shrink-0" />
     ),
   },
 ];
 
 export const NavLinks:NavLinkType[] = [
-    { href: "#", label: "Dashboard" },
-    { href: "#", label: "Orders" },
-    { href: "#", label: "Products" },
-    { href: "#", label: "Customers" },
-    { href: "#", label: "Settings" },
+    { href: "/", label: "Home" },
+    { href: "/consultation", label: "Consultation" },
+    { href: "/products", label: "Products" },
+    { href: "/contact", label: "Contact" },
+    { href: "/about", label: "About" },
   ];
 
 
diff --git a/client/package-lock.json b/client/package-lock.json
index c1626112..71830f28 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -18,7 +18,6 @@
         "@radix-ui/react-select": "^2.1.1",
         "@radix-ui/react-slot": "^1.1.0",
         "@reduxjs/toolkit": "^2.2.7",
-        "@tabler/icons-react": "^3.12.0",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "framer-motion": "^11.3.28",
@@ -1240,30 +1239,6 @@
         "tslib": "^2.4.0"
       }
     },
-    "node_modules/@tabler/icons": {
-      "version": "3.12.0",
-      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.12.0.tgz",
-      "integrity": "sha512-Im37ar/mQkqLb6XUXsU7nOc4/66VB9/3KLuZ+6tUsJKHHNLaDUkYfCTNG3pnGDI03laByxVf5+umSNK2yPTx8A==",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/codecalm"
-      }
-    },
-    "node_modules/@tabler/icons-react": {
-      "version": "3.12.0",
-      "resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-3.12.0.tgz",
-      "integrity": "sha512-RnJl3HrCqInuC8JJEUxWuYP4OFNYnY2EUtBqZFSpYatPKY3AnvJBIrShJLHf3fiLPpo6xEYAIoB7Qow93JX0fQ==",
-      "dependencies": {
-        "@tabler/icons": "3.12.0"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/codecalm"
-      },
-      "peerDependencies": {
-        "react": ">= 16"
-      }
-    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
diff --git a/client/package.json b/client/package.json
index 746a110e..2a3fb5eb 100644
--- a/client/package.json
+++ b/client/package.json
@@ -20,7 +20,6 @@
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-slot": "^1.1.0",
     "@reduxjs/toolkit": "^2.2.7",
-    "@tabler/icons-react": "^3.12.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "framer-motion": "^11.3.28",
diff --git a/client/public/assets/icons/calendar.svg b/client/public/assets/icons/calendar.svg
new file mode 100644
index 00000000..a92f95f7
--- /dev/null
+++ b/client/public/assets/icons/calendar.svg
@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="white"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-calendar"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z" /><path d="M16 3v4" /><path d="M8 3v4" /><path d="M4 11h16" /><path d="M11 15h1" /><path d="M12 15v3" /></svg>
\ No newline at end of file
diff --git a/client/public/assets/icons/email.svg b/client/public/assets/icons/email.svg
new file mode 100644
index 00000000..29637b4d
--- /dev/null
+++ b/client/public/assets/icons/email.svg
@@ -0,0 +1,4 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="white"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-mail">
+<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+<path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z" />
+<path d="M3 7l9 6l9 -6" /></svg>
\ No newline at end of file
diff --git a/client/public/assets/icons/user-filled.svg b/client/public/assets/icons/user-filled.svg
new file mode 100644
index 00000000..52c13792
--- /dev/null
+++ b/client/public/assets/icons/user-filled.svg
@@ -0,0 +1,4 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="white"  class="icon icon-tabler icons-tabler-filled icon-tabler-user">
+<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+<path d="M12 2a5 5 0 1 1 -5 5l.005 -.217a5 5 0 0 1 4.995 -4.783z" />
+<path d="M14 14a5 5 0 0 1 5 5v1a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-1a5 5 0 0 1 5 -5h4z" /></svg>
\ No newline at end of file
diff --git a/client/public/assets/icons/user.svg b/client/public/assets/icons/user.svg
new file mode 100644
index 00000000..0f431601
--- /dev/null
+++ b/client/public/assets/icons/user.svg
@@ -0,0 +1,3 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="white"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-user">
+<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+<path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0" /><path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" /></svg>
diff --git a/client/public/assets/icons/x.svg b/client/public/assets/icons/x.svg
new file mode 100644
index 00000000..fbd029c2
--- /dev/null
+++ b/client/public/assets/icons/x.svg
@@ -0,0 +1,3 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="white"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-x">
+<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+<path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>
\ No newline at end of file