From c5052c3808f300511e1772107facf84ca35d99cd Mon Sep 17 00:00:00 2001 From: lifeparticle Date: Sun, 1 Oct 2023 13:30:17 +1100 Subject: [PATCH] refactor --- ui/src/App.tsx | 6 ++-- .../components/General/Notification/index.tsx | 4 +-- .../General/Notification/utils/types.ts | 6 +--- .../FloatingBar/FloatingBar.module.scss | 18 ++++++++++ .../components/Layouts/FloatingBar/index.tsx | 29 ++++++++++++++++ .../FloatingHeader/FloatingHeader.module.scss | 13 ++++--- .../Layouts/FloatingHeader/index.tsx | 23 +++++-------- .../FloatingSearchBar.module.scss | 20 +++++------ .../Layouts/FloatingSearchBar/index.tsx | 34 ++++++++----------- 9 files changed, 91 insertions(+), 62 deletions(-) create mode 100644 ui/src/components/Layouts/FloatingBar/FloatingBar.module.scss create mode 100644 ui/src/components/Layouts/FloatingBar/index.tsx diff --git a/ui/src/App.tsx b/ui/src/App.tsx index a54ff30c..cd2cbbd1 100644 --- a/ui/src/App.tsx +++ b/ui/src/App.tsx @@ -2,11 +2,10 @@ import { ConfigProvider, Layout } from "antd"; import { ErrorBoundary } from "react-error-boundary"; import RoutesWithPageTitle from "pages/Routes"; import Sidebar from "components/Layouts/Sidebar"; -import FloatingHeader from "components/Layouts/FloatingHeader"; import CookieConsent from "pages/Footer/CookieConsent"; import useTheme from "lib/utils/hooks/useTheme"; import PopupSearch from "components/General/PopupSearch"; -import FloatingSearchBar from "components/Layouts/FloatingSearchBar"; +import FloatingBar from "components/Layouts/FloatingBar"; const { Content } = Layout; @@ -21,8 +20,7 @@ const App: React.FC = () => { - - + diff --git a/ui/src/components/General/Notification/index.tsx b/ui/src/components/General/Notification/index.tsx index 05694a5a..fd76fa30 100644 --- a/ui/src/components/General/Notification/index.tsx +++ b/ui/src/components/General/Notification/index.tsx @@ -6,11 +6,10 @@ import { } from "./utils/constants"; import useGetNotifications from "lib/utils/hooks/useGetNotifications"; import NotificationList from "./components/NotificationList"; -import { NotificationProps } from "./utils/types"; import { getLocalstorageValue, setLocalstorageValue } from "lib/utils/helper"; import { compareDate } from "./utils/helper"; -const Notification: React.FC = ({ colorText }) => { +const Notification: React.FC = () => { const { notifications, isLoading, isError } = useGetNotifications( NOTIFICATION_KEY, NOTIFICATION_URL @@ -43,7 +42,6 @@ const Notification: React.FC = ({ colorText }) => { return ( void; } -export type { Markdown, NotificationProps, NotificationListProps }; +export type { Markdown, NotificationListProps }; diff --git a/ui/src/components/Layouts/FloatingBar/FloatingBar.module.scss b/ui/src/components/Layouts/FloatingBar/FloatingBar.module.scss new file mode 100644 index 00000000..bffc81df --- /dev/null +++ b/ui/src/components/Layouts/FloatingBar/FloatingBar.module.scss @@ -0,0 +1,18 @@ +.fb { + z-index: var(--bt-z-index-dropdown); + display: flex; + height: 64px; + align-items: center; + justify-content: flex-end; + flex-direction: row; + + &__container { + right: var(--bt-size-10); + position: sticky; + display: flex; + align-items: center; + justify-content: flex-end; + flex-direction: row; + gap: 10px; + } +} diff --git a/ui/src/components/Layouts/FloatingBar/index.tsx b/ui/src/components/Layouts/FloatingBar/index.tsx new file mode 100644 index 00000000..b445a1f3 --- /dev/null +++ b/ui/src/components/Layouts/FloatingBar/index.tsx @@ -0,0 +1,29 @@ +import React from "react"; +import styles from "./FloatingBar.module.scss"; +import FloatingSearchBar from "../FloatingSearchBar"; +import FloatingHeader from "../FloatingHeader"; +import { theme } from "antd"; +const FloatingBar: React.FC = () => { + const { + token: { colorBgContainer }, + } = theme.useToken(); + + return ( +
+
+ + +
+
+ ); +}; + +export default FloatingBar; diff --git a/ui/src/components/Layouts/FloatingHeader/FloatingHeader.module.scss b/ui/src/components/Layouts/FloatingHeader/FloatingHeader.module.scss index d1b52842..54aefe60 100644 --- a/ui/src/components/Layouts/FloatingHeader/FloatingHeader.module.scss +++ b/ui/src/components/Layouts/FloatingHeader/FloatingHeader.module.scss @@ -1,11 +1,10 @@ -.fb { - position: absolute; - top: var(--bt-size-8); - right: var(--bt-size-20); - padding: var(--bt-size-4) 0 var(--bt-size-4) 0; - border-radius: var(--bt-size-10); - z-index: var(--bt-z-index-dropdown); +.fh { display: flex; + align-items: center; + border-radius: var(--bt-size-10); + padding: var(--bt-size-4); + position: sticky; + flex-direction: row; &__button { border: none; diff --git a/ui/src/components/Layouts/FloatingHeader/index.tsx b/ui/src/components/Layouts/FloatingHeader/index.tsx index 54532823..269e201b 100644 --- a/ui/src/components/Layouts/FloatingHeader/index.tsx +++ b/ui/src/components/Layouts/FloatingHeader/index.tsx @@ -1,25 +1,20 @@ -import { Button, theme } from "antd"; +import { Button } from "antd"; import style from "./FloatingHeader.module.scss"; import Notification from "components/General/Notification"; import Icon from "components/General/Icon"; import { Link } from "react-router-dom"; -const FloatingHeader = () => { - const { - token: { colorBgContainer, colorText }, - } = theme.useToken(); +interface FloatingHeaderProps { + styles?: React.CSSProperties; +} +const FloatingHeader: React.FC = ({ styles }) => { return ( -
- +
+ -
diff --git a/ui/src/components/Layouts/FloatingSearchBar/FloatingSearchBar.module.scss b/ui/src/components/Layouts/FloatingSearchBar/FloatingSearchBar.module.scss index 96131fcc..1abede9a 100644 --- a/ui/src/components/Layouts/FloatingSearchBar/FloatingSearchBar.module.scss +++ b/ui/src/components/Layouts/FloatingSearchBar/FloatingSearchBar.module.scss @@ -1,17 +1,17 @@ .fsb { - position: absolute; - top: var(--bt-size-8); - right: 150px; - padding: var(--bt-size-4); - border-radius: var(--bt-size-10); - z-index: var(--bt-z-index-dropdown); - display: flex; - align-items: center; - justify-content: center; + &__input { + display: flex; + align-items: center; + position: sticky; + border-radius: var(--bt-size-10); + padding: var(--bt-size-4); + } } @media screen and (max-width: 900px) { .fsb { - display: none; + &__input { + display: none; + } } } diff --git a/ui/src/components/Layouts/FloatingSearchBar/index.tsx b/ui/src/components/Layouts/FloatingSearchBar/index.tsx index 53674a94..6ff936d3 100644 --- a/ui/src/components/Layouts/FloatingSearchBar/index.tsx +++ b/ui/src/components/Layouts/FloatingSearchBar/index.tsx @@ -1,35 +1,31 @@ -import { Input, theme } from "antd"; +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"; -const FloatingSearchBar = () => { +interface FloatingSearchBarProps { + styles?: React.CSSProperties; +} + +const FloatingSearchBar: React.FC = ({ styles }) => { const os = useUserAgent(); const addonCommand = os === "win" ? "ctrl + k" : "⌘ K"; - const { - token: { colorBgContainer }, - } = theme.useToken(); const { handleModalOpen } = useContext(SearchModalContext); return ( -
} + addonAfter={<>{addonCommand}} + placeholder="Search..." + value={""} + onChange={handleModalOpen} + className={style.fsb__input} onClick={handleModalOpen} - > - } - addonAfter={<>{addonCommand}} - placeholder="Search..." - value={""} - onChange={handleModalOpen} - /> -
+ /> ); };