fix dashboard , popsearch and add privacy policy page

ui/src/components/General/PopupSearch/index.tsx

@@ -1,19 +1,23 @@
-import { Input, Modal } from "antd";
+import { Input, InputRef, Modal } from "antd";
 import { MENU_ITEMS } from "components/Layouts/Menu/utils/constants";
-import React, { useState } from "react";
+import React, { useContext, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import style from "./PopSearch.module.scss";
 import Icon from "components/General/Icon";
 import { IconName } from "components/General/Icon/utils/types";
 import useCombinedKeyPress from "lib/utils/hooks/useCombinedKeyPress";
+import { classNames } from "lib/utils/helper";
+import { DarkModeContext } from "lib/utils/context/DarkModeProvider";
 
 const { Search } = Input;
 const items = MENU_ITEMS.map((item) => item.children).flat();
 
 const PopupSearch: React.FC = () => {
 	const navigate = useNavigate();
+	const { isDarkMode } = useContext(DarkModeContext);
 	const [input, setInput] = useState<string>("");
 	const [isModalOpen, setIsModalOpen] = useState(false);
+	const searchInputRef = useRef<InputRef | null>(null);
 
 	const handleCancel = () => {
 		setIsModalOpen(false);
@@ -24,6 +28,12 @@ const PopupSearch: React.FC = () => {
 		setIsModalOpen(false);
 	};
 
+	const handleAfterOpen = () => {
+		if (searchInputRef.current) {
+			searchInputRef.current.focus();
+		}
+	};
+
 	useCombinedKeyPress(
 		() => setIsModalOpen((open) => !open),
 		["ControlLeft", "KeyK"]
@@ -35,14 +45,23 @@ const PopupSearch: React.FC = () => {
 			title="Features"
 			open={isModalOpen}
 			footer={[]}
+			afterOpenChange={handleAfterOpen}
+			className={isDarkMode ? "dark" : "light"}
 		>
 			<Search
 				placeholder="What do you need?"
 				value={input}
 				onChange={(e) => setInput(e.target.value)}
+				ref={searchInputRef}
 				allowClear
+				autoFocus
 			/>
-			<div className={style.popsearch__container}>
+			<div
+				className={classNames(
+					style.popsearch__container,
+					"search_container"
+				)}
+			>
 				{items
 					.filter((item) =>
 						item.name.toLowerCase().includes(input.toLowerCase())

ui/src/components/Layouts/Footer/index.tsx

@@ -120,7 +120,7 @@ const Footer: React.FC = () => {
 						</Link>
 					</li>
 					<li>
-						<Link to={"/privacy"}>
+						<Link to={"/privacy-policy"}>
 							<a>Privacy</a>
 						</Link>
 					</li>

ui/src/index.css

@@ -59,6 +59,7 @@ h5 {
 
 .ant-layout-content,
 .notification-container,
+.search_container,
 .ant-menu {
 	&::-webkit-scrollbar {
 		width: var(--bt-size-8);
@@ -139,3 +140,45 @@ a:hover {
 .ant-typography p {
 	margin-bottom: 0px !important;
 }
+
+/* modal dark mode */
+.dark .ant-modal-content {
+	background-color: #383737 !important;
+	color: white;
+}
+
+.dark .ant-modal-content .ant-modal-header {
+	background-color: transparent !important;
+}
+
+.dark .ant-modal-content .ant-modal-header .ant-modal-title {
+	color: white;
+}
+
+.dark .search_container div:hover {
+	background-color: #817f7f !important;
+}
+
+.dark .ant-input-affix-wrapper {
+	background-color: transparent !important;
+	border-color: #afadad !important;
+}
+
+.dark .ant-input-affix-wrapper .ant-input {
+	background-color: transparent !important;
+	color: white !important;
+}
+
+.dark .ant-input-affix-wrapper .ant-input::placeholder {
+	color: rgb(143, 143, 143) !important;
+}
+
+.dark .ant-input-search-button {
+	background-color: transparent;
+	color: white !important;
+}
+
+.dark .anticon svg {
+	color: white !important;
+}
+/* end modal dark mode */

ui/src/pages/Footer/PrivacyPolicy/PrivacyPolicy.module.scss

@@ -15,4 +15,13 @@
 		padding: 10%;
 		margin-bottom: 64px;
 	}
+
+	&_activity_list {
+		list-style-type: circle;
+		color: red;
+	}
+
+	&_underline {
+		text-decoration: underline;
+	}
 }