Merge pull request #342 from ashik-75/work

fix ui and refactor

ui/CHANGELOG.md

@@ -1,3 +1,11 @@
+### [6.1.0] - 2023-10-02
+
+-   Update Pop search modal color (light & dark)
+-   Fix sorting overlap design
+-   Remove credit from movie list and put into about page
+-   Update excalidraw top bar cut issue
+-   Use hooks to simplify logic
+
 ### [6.0.0] - 2023-09-28
 
 -   Add dashboard

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

@@ -5,16 +5,15 @@ import {
 	obsidian,
 	stackoverflowLight,
 } from "react-syntax-highlighter/dist/esm/styles/hljs";
-import { useContext } from "react";
-import { DarkModeContext } from "lib/utils/context/DarkModeProvider";
 import { CodeHighlightWithCopyProps } from "./utils/types";
 import style from "./CodeHighlightwithCopy.module.scss";
+import useTheme from "lib/utils/hooks/useTheme";
 
 const CodeHighlightWithCopy: React.FC<CodeHighlightWithCopyProps> = ({
 	codeString,
 	language,
 }) => {
-	const { isDarkMode } = useContext(DarkModeContext);
+	const { isDarkMode } = useTheme();
 	return (
 		<div className={style.codeHighlight}>
 			<div className={style.codeHighlight__copy__button}>

ui/src/components/General/PopupSearch/PopSearch.module.scss

@@ -2,28 +2,35 @@
 	&__container {
 		max-height: 200px;
 		overflow-y: auto;
-		margin-top: 10px;
+		margin-top: var(--bt-size-10);
 
 		&_item {
-			padding: 10px 5px;
+			padding: var(--bt-size-10) var(--bt-size-5);
 			cursor: pointer;
 			display: flex;
 			align-items: center;
-			gap: 10px;
-			margin: 5px;
-			&:hover {
-				background-color: aliceblue;
+			gap: var(--bt-size-10);
+			margin-top: var(--bt-size-5);
+
+			&_light:hover {
+				background-color: #e0e0e0;
+				border-radius: var(--bt-size-5);
 			}
-		}
 
-		&_item:first-child {
-			background-color: #b3b2b2;
-			border-radius: 5px;
-		}
+			&_light:first-child {
+				background-color: #e0e0e0;
+				border-radius: var(--bt-size-5);
+			}
 
-		&_item:hover {
-			background-color: #d9d9d9 !important;
-			border-radius: 5px;
+			&_dark:hover {
+				background-color: #646363;
+				border-radius: var(--bt-size-5);
+			}
+
+			&_dark:first-child {
+				background-color: #646363;
+				border-radius: var(--bt-size-5);
+			}
 		}
 	}
 }

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

@@ -1,22 +1,22 @@
 import { Input, InputRef, Modal } from "antd";
 import { MENU_ITEMS } from "components/Layouts/Menu/utils/constants";
-import React, { useContext, useEffect, useRef, useState } from "react";
+import React, { useEffect, 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";
-import { SearchModalContext } from "lib/utils/context/SearchModalProvider";
+import useTheme from "lib/utils/hooks/useTheme";
+import useModal from "lib/utils/hooks/useModal";
 
 const { Search } = Input;
 const items = MENU_ITEMS.map((item) => item.children).flat();
 
 const PopupSearch: React.FC = () => {
 	const navigate = useNavigate();
-	const { isDarkMode } = useContext(DarkModeContext);
-	const { handleModalOpen, isModalOpen } = useContext(SearchModalContext);
+	const { isDarkMode } = useTheme();
+	const { handleModalOpen, isModalOpen } = useModal();
 	const [input, setInput] = useState<string>("");
 	const [filteredItems, setFilteredItems] = useState(items);
 
@@ -73,7 +73,12 @@ const PopupSearch: React.FC = () => {
 				{filteredItems.map((item) => (
 					<div
 						key={item.url}
-						className={style.popsearch__container_item}
+						className={classNames(
+							style.popsearch__container_item,
+							isDarkMode
+								? style.popsearch__container_item_dark
+								: style.popsearch__container_item_light
+						)}
 						onClick={() => handleClick(item.url)}
 					>
 						<Icon name={item.icon as IconName} />

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

@@ -1,9 +1,8 @@
 import { Input } from "antd";
 import style from "./FloatingSearchBar.module.scss";
 import Icon from "components/General/Icon";
-import { useContext } from "react";
-import { SearchModalContext } from "lib/utils/context/SearchModalProvider";
 import useUserAgent from "lib/utils/hooks/useUserAgent";
+import useModal from "lib/utils/hooks/useModal";
 
 interface FloatingSearchBarProps {
 	styles?: React.CSSProperties;
@@ -13,7 +12,7 @@ const FloatingSearchBar: React.FC<FloatingSearchBarProps> = ({ styles }) => {
 	const os = useUserAgent();
 	const addonCommand = os === "win" ? "ctrl + k" : "⌘ K";
 
-	const { handleModalOpen } = useContext(SearchModalContext);
+	const { handleModalOpen } = useModal();
 
 	return (
 		<Input

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

@@ -1,16 +1,16 @@
-import React, { useContext } from "react";
+import React from "react";
 import style from "./Footer.module.scss";
 import Icon from "components/General/Icon";
 import { Space, Typography } from "antd";
 import { ResponsiveButton } from "components/General/FormComponents";
 import { Link } from "react-router-dom";
 import bt_light from "assets/bt_light.png";
 import bt_dark from "assets/bt_dark.png";
-import { DarkModeContext } from "lib/utils/context/DarkModeProvider";
 import { openLink } from "lib/utils/helper";
+import useTheme from "lib/utils/hooks/useTheme";
 
 const Footer: React.FC = () => {
-	const { isDarkMode } = useContext(DarkModeContext);
+	const { isDarkMode } = useTheme();
 
 	return (
 		<div

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

@@ -1,18 +1,17 @@
 import { Space, theme } from "antd";
 import { Link } from "react-router-dom";
 import style from "./header.module.scss";
-import { useContext } from "react";
-import { DarkModeContext } from "lib/utils/context/DarkModeProvider";
 import { classNames } from "lib/utils/helper";
 import logo_light from "assets/logo_light.svg";
 import logo_dark from "assets/logo_dark.svg";
+import useTheme from "lib/utils/hooks/useTheme";
 
 const Header: React.FC = () => {
 	const {
 		token: { colorBgContainer },
 	} = theme.useToken();
 
-	const { isDarkMode } = useContext(DarkModeContext);
+	const { isDarkMode } = useTheme();
 
 	return (
 		<Space

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

@@ -3,18 +3,17 @@ import Header from "components/Layouts/Header";
 import Menu from "components/Layouts/Menu";
 import { MENU_COLLAPSED_STORAGE_KEY } from "./utils/constants";
 import useMenuCollapsed from "lib/utils/hooks/useMenuCollapsed";
-import { useContext } from "react";
-import { DarkModeContext } from "lib/utils/context/DarkModeProvider";
 import Footer from "components/Layouts/Sidebar/Footer";
 import style from "./Sidebar.module.scss";
+import useTheme from "lib/utils/hooks/useTheme";
 
 const { Sider } = Layout;
 
 const Sidebar = () => {
 	const { collapsed, toggleCollapse } = useMenuCollapsed(
 		MENU_COLLAPSED_STORAGE_KEY
 	);
-	const { toggleTheme, isDarkMode } = useContext(DarkModeContext);
+	const { toggleTheme, isDarkMode } = useTheme();
 
 	const {
 		token: { colorBgContainer },

ui/src/index.css

@@ -6,6 +6,7 @@
 @import "./styles/shadows.css";
 @import "./styles/animations.css";
 @import "./styles/antd-overrides.css";
+@import "./styles/other-overrides.css";
 
 /* * {
 	outline: 1px red solid;

ui/src/lib/utils/context/DarkModeProvider/index.tsx

@@ -1,11 +1,5 @@
 import useDarkMode from "lib/utils/context/DarkModeProvider/utils/hooks/useDarkMode";
-import {
-	ReactNode,
-	createContext,
-	useCallback,
-	useMemo,
-	useState,
-} from "react";
+import { ReactNode, createContext, useMemo } from "react";
 import { DarkModeContextType } from "./utils/types";
 import { DARK_MODE_STORAGE_KEY } from "./utils/constant";
 
@@ -14,24 +8,17 @@ const DarkModeContext = createContext<DarkModeContextType>(
 );
 
 const DarkModeProvider = ({ children }: { children: ReactNode }) => {
-	const [isModalOpen, setIsModalOpen] = useState(false);
 	const { isDarkMode, algorithm, toggleTheme } = useDarkMode(
 		DARK_MODE_STORAGE_KEY
 	);
 
-	const handleModalOpen = useCallback(() => {
-		setIsModalOpen((prev) => !prev);
-	}, []);
-
 	const contextValue = useMemo(() => {
 		return {
 			isDarkMode,
 			algorithm,
 			toggleTheme,
-			isModalOpen,
-			handleModalOpen,
 		};
-	}, [isDarkMode, algorithm, toggleTheme, handleModalOpen, isModalOpen]);
+	}, [isDarkMode, algorithm, toggleTheme]);
 
 	return (
 		<DarkModeContext.Provider value={contextValue}>

ui/src/lib/utils/hooks/useModal.ts

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { SearchModalContext } from "lib/utils/context/SearchModalProvider";
+
+const useModal = () => {
+	return useContext(SearchModalContext);
+};
+
+export default useModal;

ui/src/lib/utils/hooks/useTheme.ts

@@ -2,10 +2,12 @@ import { useContext } from "react";
 import { DarkModeContext } from "lib/utils/context/DarkModeProvider";
 
 const useTheme = () => {
-	const { algorithm, isDarkMode } = useContext(DarkModeContext);
+	const { algorithm, isDarkMode, toggleTheme } = useContext(DarkModeContext);
 
 	const THEME = {
 		algorithm,
+		toggleTheme,
+		isDarkMode,
 		token: {
 			colorPrimaryHover: "var(--bt-color-hover)",
 			colorPrimaryTextHover: "var(--bt-color-hover)",

ui/src/pages/About/utils/constants.tsx

@@ -131,6 +131,11 @@ const OTHER_DATA: Other[] = [
 		name: "unDraw",
 		url: "https://undraw.co/",
 	},
+	{
+		key: "5",
+		name: "Movie for hackers",
+		url: "https://github.com/k4m4/movies-for-hackers",
+	},
 ];
 
 const FEATURE_COLUMNS: ColumnsType<Feature> = [

ui/src/pages/Home/components/Features.tsx

@@ -1,13 +1,13 @@
-import React, { useContext } from "react";
+import React from "react";
 import { Button, Card, Col, Row, Space, Typography } from "antd";
 import Icon from "components/General/Icon";
 import { FEATURES } from "pages/Home/utils/constants";
 import style from "pages/Home/Home.module.scss";
 import { Link } from "react-router-dom";
-import { SearchModalContext } from "lib/utils/context/SearchModalProvider";
+import useModal from "lib/utils/hooks/useModal";
 
 const Features: React.FC = () => {
-	const { handleModalOpen } = useContext(SearchModalContext);
+	const { handleModalOpen } = useModal();
 
 	return (
 		<Row gutter={[16, 16]}>

ui/src/pages/Home/index.tsx

@@ -5,11 +5,10 @@ import Hero from "./components/Hero";
 import Contribution from "./components/Contribution";
 import grid_light from "assets/grid_light.svg";
 import grid_dark from "assets/grid_dark.svg";
-import { useContext } from "react";
-import { DarkModeContext } from "lib/utils/context/DarkModeProvider";
+import useTheme from "lib/utils/hooks/useTheme";
 
 const Home = () => {
-	const { isDarkMode } = useContext(DarkModeContext);
+	const { isDarkMode } = useTheme();
 	return (
 		<>
 			<div

ui/src/pages/Markdown/MarkdownEditor/index.tsx

@@ -1,18 +1,18 @@
 import { Card, Space } from "antd";
 import { downloadPDFFile, downloadTextFile } from "lib/utils/files";
-import { useContext, useState } from "react";
+import { useState } from "react";
 import useCombinedKeyPress from "lib/utils/hooks/useCombinedKeyPress";
 import style from "./MarkdownEditor.module.scss";
-import { DarkModeContext } from "lib/utils/context/DarkModeProvider";
 import MDEditor from "@uiw/react-md-editor";
 import Clipboard from "components/RenderProps/Clipboard";
 import ClipboardButton from "components/General/ClipboardButton";
 import { ResponsiveButton } from "components/General/FormComponents";
+import useTheme from "lib/utils/hooks/useTheme";
 
 const MarkdownEditor: React.FC = () => {
 	const [markdown, setMarkdown] = useState("");
 
-	const { isDarkMode } = useContext(DarkModeContext);
+	const { isDarkMode } = useTheme();
 
 	useCombinedKeyPress(() => setMarkdown("# Hello, World!"), "KeyE");
 	useCombinedKeyPress(() => setMarkdown(""), "KeyR");

ui/src/pages/Markdown/MdTableGenerator/index.tsx

@@ -1,17 +1,17 @@
 import MDEditor from "@uiw/react-md-editor";
 import { Card, Form, Space, Spin } from "antd";
-import { useContext, useState, useTransition } from "react";
+import { useState, useTransition } from "react";
 import { generateTable } from "./util/utils";
 import { ResponsiveInputWithLabel } from "components/General/FormComponents";
-import { DarkModeContext } from "lib/utils/context/DarkModeProvider";
 import style from "./MdTableGenerator.module.scss";
 import Clipboard from "components/RenderProps/Clipboard";
 import ClipboardButton from "components/General/ClipboardButton";
+import useTheme from "lib/utils/hooks/useTheme";
 
 const TableGenerator: React.FC = () => {
 	const [row, setRow] = useState(10);
 	const [column, setColumn] = useState(10);
-	const { isDarkMode } = useContext(DarkModeContext);
+	const { isDarkMode } = useTheme();
 	const [output, setOutput] = useState(() => {
 		return generateTable(row, column, "");
 	});

ui/src/pages/Resource/Movie/index.tsx

@@ -13,7 +13,6 @@ const Movie: React.FC = () => {
 			itemComponent={Resource}
 			isLoading={isLoading}
 			isError={isError}
-			source="https://github.com/k4m4/movies-for-hackers"
 		/>
 	);
 };

ui/src/pages/Text/TextEditor/TextEditor.module.scss

@@ -13,6 +13,12 @@
 		border-left: 2px solid #eee;
 		border-bottom: 2px solid #eee;
 		border-right: 2px solid #eee;
+
+		&_dark {
+			background-color: rgba(34, 47, 62, 0.7);
+			color: white;
+			border-color: rgba(34, 47, 62, 0.7);
+		}
 	}
 
 	@media (max-width: 768px) {