remove react-icons and chakra-icons

package.json

@@ -59,7 +59,6 @@
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "react-hook-form": "^7.0.0",
-    "react-icons": "^5.0.0",
     "react-select": "^5.0.0",
     "next-query-params": "^5.1.0",
     "use-query-params": "^2.2.2"
@@ -101,9 +100,6 @@
     "react-hook-form": {
       "optional": true
     },
-    "react-icons": {
-      "optional": true
-    },
     "react-select": {
       "optional": true
     },
@@ -128,7 +124,6 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-hook-form": "^7.0.0",
-    "react-icons": "^5.0.0",
     "react-select": "5",
     "vite": "5.4.19",
     "next-query-params": "^5.1.0",

src/icons/NavigationIcons.jsx

@@ -0,0 +1,46 @@
+import { forwardRef } from "react";
+
+const SvgIcon = forwardRef(
+  ({ title, children, width = "1em", height = "1em", ...props }, ref) => (
+    <svg
+      ref={ref}
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden={title ? undefined : true}
+      role={title ? "img" : undefined}
+      {...props}
+    >
+      {title && <title>{title}</title>}
+      {children}
+    </svg>
+  ),
+);
+
+SvgIcon.displayName = "SvgIcon";
+
+export const MoreHorizontalIcon = forwardRef((props, ref) => (
+  <SvgIcon ref={ref} strokeWidth="3" {...props}>
+    <circle cx="12" cy="12" r="1" />
+    <circle cx="19" cy="12" r="1" />
+    <circle cx="5" cy="12" r="1" />
+  </SvgIcon>
+));
+
+MoreHorizontalIcon.displayName = "MoreHorizontalIcon";
+
+export const ExitIcon = forwardRef((props, ref) => (
+  <SvgIcon ref={ref} strokeWidth="3" {...props}>
+    <path d="m16 17 5-5-5-5" />
+    <path d="M21 12H9" />
+    <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+  </SvgIcon>
+));
+
+ExitIcon.displayName = "ExitIcon";

src/layout/Header.jsx

@@ -8,22 +8,17 @@ function HeaderRoot({ children, ...props }) {
     <Box
       as="header"
       w="100%"
-      h={{ base: "64px", lg: "110px" }}
+      h="110px"
-      flexShrink={0}
       borderBottom="1px"
       borderColor="gray.200"
       bg="#4299E1"
-      px={{ base: 3, sm: 4, lg: "20px" }}
+      px="20px"
+      zIndex={10}
+      position="fixed"
       color="white"
       {...props}
     >
-      <HStack
+      <HStack h="100%" alignItems="center" justifyContent="space-between">
-        h="100%"
-        w="100%"
-        minW={0}
-        alignItems="center"
-        justifyContent="space-between"
-      >
         {children}
       </HStack>
     </Box>
@@ -32,33 +27,14 @@ function HeaderRoot({ children, ...props }) {
 
 function BrandSection({ children, ...props }) {
   return (
-    <HStack
+    <HStack alignItems="center" h="100%" py="10px" {...props}>
-      alignItems="center"
-      h="100%"
-      minW={0}
-      flex="1"
-      spacing={{ base: 2.5, lg: 3 }}
-      py={{ base: "6px", lg: "10px" }}
-      {...props}
-    >
       {children}
     </HStack>
   );
 }
 
 function Logo(props) {
-  return (
+  return <Image loading="lazy" alt="logo" maxW="80px" maxH="80px" {...props} />;
-    <Image
-      loading="lazy"
-      alt="logo"
-      w={{ base: "46px", lg: "80px" }}
-      maxW={{ base: "46px", lg: "80px" }}
-      maxH={{ base: "48px", lg: "80px" }}
-      objectFit="contain"
-      flexShrink={0}
-      {...props}
-    />
-  );
 }
 
 function Brand({ children, ...props }) {
@@ -67,9 +43,7 @@ function Brand({ children, ...props }) {
       alignItems="start"
       justifyContent="center"
       h="100%"
-      minW={0}
+      spacing={1}
-      flex="1"
-      spacing={{ base: 0, lg: 1 }}
       {...props}
     >
       {children}
@@ -79,60 +53,27 @@ function Brand({ children, ...props }) {
 
 function Title({ children, ...props }) {
   return (
-    <Text
+    <Text fontWeight="bold" fontSize="20px" {...props}>
-      w="100%"
-      fontWeight="bold"
-      fontSize={{ base: "15px", lg: "20px" }}
-      lineHeight="short"
-      noOfLines={1}
-      {...props}
-    >
       {children}
     </Text>
   );
 }
 
 function Description({ children, ...props }) {
-  return (
+  return <Text {...props}>{children}</Text>;
-    <Text
-      w="100%"
-      fontSize={{ base: "10px", sm: "11px", lg: "16px" }}
-      lineHeight={{ base: "shorter", lg: "normal" }}
-      noOfLines={1}
-      {...props}
-    >
-      {children}
-    </Text>
-  );
 }
 
 function Bi({ logoSrc = biLogo, ...props }) {
   return (
     <VStack
       w="fit-content"
-      flexShrink={0}
       alignItems="center"
       justifyContent="center"
-      spacing={{ base: 0, lg: 1 }}
+      py="10px"
-      py={{ base: "6px", lg: "10px" }}
       {...props}
     >
-      <Image
+      <Image src={logoSrc} loading="lazy" maxW="90px" />
-        src={logoSrc}
+      <Text fontSize="xs" fontWeight="bold" textAlign="center">
-        alt="نشان مؤسسه باقرالعلوم"
-        loading="lazy"
-        w={{ base: "38px", lg: "90px" }}
-        maxH={{ base: "46px", lg: "72px" }}
-        objectFit="contain"
-      />
-
-      <Text
-        display={{ base: "none", lg: "block" }}
-        fontSize="xs"
-        fontWeight="bold"
-        textAlign="center"
-        whiteSpace="nowrap"
-      >
         مؤسسه تولید سیستم‌های خبره و هوشمند اسلامی باقرالعلوم(ع)
       </Text>
     </VStack>

src/layout/Sidebar.jsx

@@ -20,8 +20,7 @@ import {
   useDisclosure,
 } from "@chakra-ui/react";
 import { Children, forwardRef, isValidElement, useRef } from "react";
-import { FiMoreHorizontal } from "react-icons/fi/index.js";
+import { ExitIcon, MoreHorizontalIcon } from "../icons/NavigationIcons.jsx";
-import { IoExit } from "react-icons/io5/index.js";
 import {
   logoutKeycloakFromRuntime,
   usePermission,
@@ -211,7 +210,7 @@ const SidebarRoot = ({
   );
   const hasExit = Boolean(exitElement);
   const logoutTitle = exitElement?.props?.title || "خروج";
-  const logoutIcon = exitElement?.props?.icon || IoExit;
+  const logoutIcon = exitElement?.props?.icon || ExitIcon;
 
 
   const resolvedCurrentPath =
@@ -355,7 +354,7 @@ const SidebarRoot = ({
                 color={isSecondaryItemActive ? "blue.600" : "gray.600"}
                 bg={isSecondaryItemActive ? "blue.50" : "transparent"}
               >
-                <Icon as={FiMoreHorizontal} boxSize={5} />
+                <Icon as={MoreHorizontalIcon} boxSize={5} />
                 <Text
                   fontSize="10px"
                   fontWeight={isSecondaryItemActive ? "bold" : "medium"}

vite.config.js

@@ -20,8 +20,6 @@ const externalPackages = [
   "@tanstack/react-query",
   "@tanstack/react-table",
 
-  "react-icons",
-
   "react-hook-form",
   "react-select",
   "chakra-react-select",
@@ -115,7 +113,6 @@ export default defineConfig(({ mode }) => {
           return (
             externalPackages.includes(id) ||
             id.startsWith("react-dom/") ||
-            id.startsWith("react-icons/") ||
             id.startsWith("@emotion/") ||
             id.startsWith("react-select/") ||
             id.startsWith("next-query-params/")

yarn.lock

@@ -1326,11 +1326,6 @@ react-hook-form@^7.0.0:
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.80.0.tgz#028e142324d592239599ab7cf1c0d82167696194"
   integrity sha512-4P+fk6oXsxY+6xSj7Euhc2sumQD8zQqCuVHoJwoyp9EchP+IUW9OESB7uHFJOKsIBQ4MQqYE84INJFqUCYNoOg==
 
-react-icons@^5.0.0:
-  version "5.6.0"
-  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.6.0.tgz#27bcc4acbc836e762548d76041cf9b9fef4e3837"
-  integrity sha512-RH93p5ki6LfOiIt0UtDyNg/cee+HLVR6cHHtW3wALfo+eOHTp8RnU2kRkI6E+H19zMIs03DyxUG/GfZMOGvmiA==
-
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"