From 35ca0fcbaa12e6969679568dfe2fd26f2b68c2cd Mon Sep 17 00:00:00 2001 From: ashik-75 Date: Mon, 2 Oct 2023 17:23:49 +0600 Subject: [PATCH 1/2] fix ui and refactor --- ui/CHANGELOG.md | 8 +++ .../General/CodeHighlightWithCopy/index.tsx | 5 +- .../General/PopupSearch/PopSearch.module.scss | 34 +++++---- .../components/General/PopupSearch/index.tsx | 17 +++-- .../Layouts/FloatingSearchBar/index.tsx | 5 +- ui/src/components/Layouts/Footer/index.tsx | 6 +- ui/src/components/Layouts/Header/index.tsx | 5 +- ui/src/components/Layouts/Sidebar/index.tsx | 5 +- ui/src/index.css | 1 + .../utils/context/DarkModeProvider/index.tsx | 17 +---- .../context/SearchModalProvider/index.tsx | 7 +- ui/src/lib/utils/hooks/useTheme.ts | 4 +- ui/src/pages/About/utils/constants.tsx | 5 ++ ui/src/pages/Home/components/Features.tsx | 6 +- ui/src/pages/Home/index.tsx | 5 +- .../pages/Markdown/MarkdownEditor/index.tsx | 6 +- .../pages/Markdown/MdTableGenerator/index.tsx | 6 +- ui/src/pages/Resource/Movie/index.tsx | 1 - .../Text/TextEditor/TextEditor.module.scss | 6 ++ ui/src/pages/Text/TextEditor/index.tsx | 21 ++++-- ui/src/pages/Tools/Diagramming/index.tsx | 5 +- ui/src/pages/Tools/Sorting/index.tsx | 72 ++++++++++--------- ui/src/styles/antd-overrides.css | 5 -- ui/src/styles/other-overrides.css | 11 +++ 24 files changed, 150 insertions(+), 113 deletions(-) create mode 100644 ui/src/styles/other-overrides.css diff --git a/ui/CHANGELOG.md b/ui/CHANGELOG.md index 65217e35..784063cb 100644 --- a/ui/CHANGELOG.md +++ b/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 diff --git a/ui/src/components/General/CodeHighlightWithCopy/index.tsx b/ui/src/components/General/CodeHighlightWithCopy/index.tsx index 5504b04b..af58d2c0 100644 --- a/ui/src/components/General/CodeHighlightWithCopy/index.tsx +++ b/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 = ({ codeString, language, }) => { - const { isDarkMode } = useContext(DarkModeContext); + const { isDarkMode } = useTheme(); return (
diff --git a/ui/src/components/General/PopupSearch/PopSearch.module.scss b/ui/src/components/General/PopupSearch/PopSearch.module.scss index d661867f..e3212d77 100644 --- a/ui/src/components/General/PopupSearch/PopSearch.module.scss +++ b/ui/src/components/General/PopupSearch/PopSearch.module.scss @@ -2,28 +2,34 @@ &__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); + + &_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); + } } } } diff --git a/ui/src/components/General/PopupSearch/index.tsx b/ui/src/components/General/PopupSearch/index.tsx index 5ad35ffe..7ca57491 100644 --- a/ui/src/components/General/PopupSearch/index.tsx +++ b/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/context/SearchModalProvider"; 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(""); const [filteredItems, setFilteredItems] = useState(items); @@ -73,7 +73,12 @@ const PopupSearch: React.FC = () => { {filteredItems.map((item) => (
handleClick(item.url)} > diff --git a/ui/src/components/Layouts/FloatingSearchBar/index.tsx b/ui/src/components/Layouts/FloatingSearchBar/index.tsx index 6ff936d3..e6bc31f1 100644 --- a/ui/src/components/Layouts/FloatingSearchBar/index.tsx +++ b/ui/src/components/Layouts/FloatingSearchBar/index.tsx @@ -1,8 +1,7 @@ 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 { useModal } from "lib/utils/context/SearchModalProvider"; import useUserAgent from "lib/utils/hooks/useUserAgent"; interface FloatingSearchBarProps { @@ -13,7 +12,7 @@ const FloatingSearchBar: React.FC = ({ styles }) => { const os = useUserAgent(); const addonCommand = os === "win" ? "ctrl + k" : "⌘ K"; - const { handleModalOpen } = useContext(SearchModalContext); + const { handleModalOpen } = useModal(); return ( { - const { isDarkMode } = useContext(DarkModeContext); + const { isDarkMode } = useTheme(); return (
{ const { token: { colorBgContainer }, } = theme.useToken(); - const { isDarkMode } = useContext(DarkModeContext); + const { isDarkMode } = useTheme(); return ( { const { collapsed, toggleCollapse } = useMenuCollapsed( MENU_COLLAPSED_STORAGE_KEY ); - const { toggleTheme, isDarkMode } = useContext(DarkModeContext); + const { toggleTheme, isDarkMode } = useTheme(); const { token: { colorBgContainer }, diff --git a/ui/src/index.css b/ui/src/index.css index 2d853766..5f18ba88 100644 --- a/ui/src/index.css +++ b/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; diff --git a/ui/src/lib/utils/context/DarkModeProvider/index.tsx b/ui/src/lib/utils/context/DarkModeProvider/index.tsx index e8ed12ad..6024dea6 100644 --- a/ui/src/lib/utils/context/DarkModeProvider/index.tsx +++ b/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( ); 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 ( diff --git a/ui/src/lib/utils/context/SearchModalProvider/index.tsx b/ui/src/lib/utils/context/SearchModalProvider/index.tsx index bbb672c7..12422857 100644 --- a/ui/src/lib/utils/context/SearchModalProvider/index.tsx +++ b/ui/src/lib/utils/context/SearchModalProvider/index.tsx @@ -2,6 +2,7 @@ import { ReactNode, createContext, useCallback, + useContext, useMemo, useState, } from "react"; @@ -32,4 +33,8 @@ const SearchModalProvider = ({ children }: { children: ReactNode }) => { ); }; -export { SearchModalContext, SearchModalProvider }; +const useModal = () => { + return useContext(SearchModalContext); +}; + +export { useModal, SearchModalProvider }; diff --git a/ui/src/lib/utils/hooks/useTheme.ts b/ui/src/lib/utils/hooks/useTheme.ts index 0800cf6d..a7f1a983 100644 --- a/ui/src/lib/utils/hooks/useTheme.ts +++ b/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)", diff --git a/ui/src/pages/About/utils/constants.tsx b/ui/src/pages/About/utils/constants.tsx index d1d8a811..a59836b5 100644 --- a/ui/src/pages/About/utils/constants.tsx +++ b/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 = [ diff --git a/ui/src/pages/Home/components/Features.tsx b/ui/src/pages/Home/components/Features.tsx index cce2139f..678da02e 100644 --- a/ui/src/pages/Home/components/Features.tsx +++ b/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/context/SearchModalProvider"; const Features: React.FC = () => { - const { handleModalOpen } = useContext(SearchModalContext); + const { handleModalOpen } = useModal(); return ( diff --git a/ui/src/pages/Home/index.tsx b/ui/src/pages/Home/index.tsx index 550d780e..3aaf1da9 100644 --- a/ui/src/pages/Home/index.tsx +++ b/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 ( <>
{ const [markdown, setMarkdown] = useState(""); - const { isDarkMode } = useContext(DarkModeContext); + const { isDarkMode } = useTheme(); useCombinedKeyPress(() => setMarkdown("# Hello, World!"), "KeyE"); useCombinedKeyPress(() => setMarkdown(""), "KeyR"); diff --git a/ui/src/pages/Markdown/MdTableGenerator/index.tsx b/ui/src/pages/Markdown/MdTableGenerator/index.tsx index d3cc58f6..99925cb9 100644 --- a/ui/src/pages/Markdown/MdTableGenerator/index.tsx +++ b/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, ""); }); diff --git a/ui/src/pages/Resource/Movie/index.tsx b/ui/src/pages/Resource/Movie/index.tsx index 6135ad90..8f36ebf8 100644 --- a/ui/src/pages/Resource/Movie/index.tsx +++ b/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" /> ); }; diff --git a/ui/src/pages/Text/TextEditor/TextEditor.module.scss b/ui/src/pages/Text/TextEditor/TextEditor.module.scss index 0eca3895..5fc61d51 100644 --- a/ui/src/pages/Text/TextEditor/TextEditor.module.scss +++ b/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) { diff --git a/ui/src/pages/Text/TextEditor/index.tsx b/ui/src/pages/Text/TextEditor/index.tsx index 1735bdd3..de19a19f 100644 --- a/ui/src/pages/Text/TextEditor/index.tsx +++ b/ui/src/pages/Text/TextEditor/index.tsx @@ -1,13 +1,14 @@ -import React, { useRef, useContext, useState } from "react"; +import React, { useRef, useState } from "react"; import { Col, Row } from "antd"; import { Editor } from "@tinymce/tinymce-react"; import { Editor as TinyMCEEditor } from "tinymce"; import style from "./TextEditor.module.scss"; -import { DarkModeContext } from "lib/utils/context/DarkModeProvider"; import Spin from "components/General/Spin"; +import { classNames } from "lib/utils/helper"; +import useTheme from "lib/utils/hooks/useTheme"; const TextEditor: React.FC = () => { - const { isDarkMode } = useContext(DarkModeContext); + const { isDarkMode } = useTheme(); const editorRef = useRef(null); @@ -71,8 +72,11 @@ const TextEditor: React.FC = () => { "fullscreen", ], - skin: isDarkMode ? "oxide-dark" : "oxide", - content_css: isDarkMode ? "dark" : "default", + skin: isDarkMode ? "tinymce-5-dark" : "oxide", + content_css: isDarkMode + ? "tinymce-5-dark" + : "default", + setup: function (editor) { editor.ui.registry.addButton("clearbutton", { text: "Clear", @@ -126,7 +130,12 @@ const TextEditor: React.FC = () => { }} /> {!isLoading && ( -
+
{wordCount} Words{" "} diff --git a/ui/src/pages/Tools/Diagramming/index.tsx b/ui/src/pages/Tools/Diagramming/index.tsx index 6c0eee79..aac4bbae 100644 --- a/ui/src/pages/Tools/Diagramming/index.tsx +++ b/ui/src/pages/Tools/Diagramming/index.tsx @@ -1,10 +1,9 @@ import { Excalidraw } from "@excalidraw/excalidraw"; import style from "./diagramming.module.scss"; -import { useContext } from "react"; -import { DarkModeContext } from "lib/utils/context/DarkModeProvider"; +import useTheme from "lib/utils/hooks/useTheme"; const Diagramming = () => { - const { isDarkMode } = useContext(DarkModeContext); + const { isDarkMode } = useTheme(); return (
diff --git a/ui/src/pages/Tools/Sorting/index.tsx b/ui/src/pages/Tools/Sorting/index.tsx index 0c922eb6..142e52a4 100644 --- a/ui/src/pages/Tools/Sorting/index.tsx +++ b/ui/src/pages/Tools/Sorting/index.tsx @@ -1,7 +1,7 @@ import style from "./Sorting.module.scss"; import { useEffect, useState } from "react"; import { detectData, sortData } from "./utils/helper"; -import { Input, Form, Card, Badge } from "antd"; +import { Input, Form, Card, Badge, Row, Col } from "antd"; import { OUTPUT_FORMAT } from "./utils/constants"; import Clipboard from "components/RenderProps/Clipboard"; import ClipboardButton from "components/General/ClipboardButton"; @@ -67,41 +67,45 @@ const Sorting: React.FC = () => { ) : ( <> - - - setOrder(value as string) - } - options={[ - { - label: "Ascending", - value: "Ascending", - }, - { - label: "Descending", - value: "Descending", - }, - ]} - /> - - { - setOutputFormat(option); - }} - options={OUTPUT_FORMAT} - defaultActiveFirstOption + + + + setOrder(value as string) + } + options={[ + { + label: "Ascending", + value: "Ascending", + }, + { + label: "Descending", + value: "Descending", + }, + ]} /> + + + + { + setOutputFormat(option); + }} + options={OUTPUT_FORMAT} + defaultActiveFirstOption + /> - - - + + + +