use link

api/packages.json

@@ -1,41 +1 @@
-{
-	"packages": [
-		{
-			"key": "react",
-			"url": "https://www.npmjs.com/package/react",
-			"version": "18.2.0",
-			"new": true
-		},
-		{
-			"key": "svelte",
-			"url": "https://www.npmjs.com/package/svelte",
-			"version": "4.2.1",
-			"new": true
-		},
-		{
-			"key": "remix",
-			"url": "https://www.npmjs.com/package/remix",
-			"version": "2.0.1",
-			"new": true
-		},
-		{
-			"key": "gatsby",
-			"url": "https://www.npmjs.com/package/gatsby",
-			"version": "5.12.4",
-			"new": true
-		},
-		{
-			"key": "next",
-			"url": "https://www.npmjs.com/package/next",
-			"version": "13.5.2",
-			"new": true
-		},
-		{
-			"key": "vue",
-			"url": "https://www.npmjs.com/package/vue",
-			"version": "3.3.4",
-			"new": true
-		}
-	],
-	"lastDate": 1695467356040
-}
+{"packages":[{"key":"react","url":"https://www.npmjs.com/package/react","version":"18.2.0","new":false},{"key":"svelte","url":"https://www.npmjs.com/package/svelte","version":"4.2.1","new":false},{"key":"remix","url":"https://www.npmjs.com/package/remix","version":"2.0.1","new":false},{"key":"gatsby","url":"https://www.npmjs.com/package/gatsby","version":"5.12.4","new":false},{"key":"next","url":"https://www.npmjs.com/package/next","version":"13.5.3","new":false},{"key":"vue","url":"https://www.npmjs.com/package/vue","version":"3.3.4","new":false}],"lastDate":1695773724643}

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/Hoc/withPageTitle/withPageTitle.tsx

@@ -10,12 +10,17 @@ const NO_PADDING = [
 	"About",
 	"Terms",
 	"Cookie Policy",
+	"Privacy Policy",
+	"Feedback",
 ];
 
 const NO_TITLE = [
 	"BinaryTree: Developer Productivity Tools",
 	"Terms",
 	"Cookie Policy",
+	"Privacy Policy",
+	"About",
+	"Feedback",
 ];
 
 const withPageTitle = <T extends object>(

ui/src/components/Layouts/Footer/Footer.module.scss

@@ -3,6 +3,8 @@
 	display: grid;
 	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
 	box-shadow: inset 0px 1px 0px #e8e8e8;
+	position: sticky;
+	width: 100%;
 
 	&__left {
 		padding-right: 5vw;

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/About/About.module.scss

@@ -1,51 +1,55 @@
 .about {
-	margin: 0 auto;
-	max-width: var(--bt-converter-width);
-	margin-bottom: 100px;
-	padding-left: 10px;
-	padding-right: 10px;
+	padding: 64px 10% 64px 10%;
 
-	&__container {
-		display: flex;
-		flex-direction: column;
-		gap: var(--bt-size-20);
-	}
-
-	&__intro {
-		position: relative;
-		min-height: 250px;
+	&__card {
+		margin: 0 auto;
+		max-width: var(--bt-converter-width);
+		margin-bottom: 100px;
+		padding-left: 10px;
+		padding-right: 10px;
 
-		&_wrapper {
-			position: absolute;
-			top: 0;
-			bottom: 0;
-			left: 10%;
-			right: 10%;
+		&__container {
 			display: flex;
-			align-items: center;
-			justify-content: center;
-			z-index: 1;
+			flex-direction: column;
+			gap: var(--bt-size-20);
+		}
+
+		&__intro {
+			position: relative;
+			min-height: 250px;
+
+			&_wrapper {
+				position: absolute;
+				top: 0;
+				bottom: 0;
+				left: 10%;
+				right: 10%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				z-index: 1;
 
-			&_text {
-				background-color: var(--bt-color-bg);
-				padding: var(--bt-size-10);
-				text-align: center;
-				color: white;
-				max-width: 80vw;
+				&_text {
+					background-color: var(--bt-color-bg);
+					padding: var(--bt-size-10);
+					text-align: center;
+					color: white;
+					max-width: 80vw;
+				}
 			}
-		}
 
-		&_img {
-			width: 100%;
-			height: 250px;
-			object-fit: cover;
-			background-color: #71727e;
+			&_img {
+				width: 100%;
+				height: 250px;
+				object-fit: cover;
+				background-color: #71727e;
+			}
 		}
-	}
 
-	&__socials {
-		display: flex;
-		justify-content: center;
-		margin-top: var(--bt-size-20);
+		&__socials {
+			display: flex;
+			justify-content: center;
+			margin-top: var(--bt-size-20);
+		}
 	}
 }