refactor

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 = () => {
 						<Sidebar />
 						<Layout>
 							<Content>
-								<FloatingSearchBar />
-								<FloatingHeader />
+								<FloatingBar />
 								<RoutesWithPageTitle />
 							</Content>
 						</Layout>

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<NotificationProps> = ({ colorText }) => {
+const Notification: React.FC = () => {
 	const { notifications, isLoading, isError } = useGetNotifications(
 		NOTIFICATION_KEY,
 		NOTIFICATION_URL
@@ -43,7 +42,6 @@ const Notification: React.FC<NotificationProps> = ({ colorText }) => {
 	return (
 		<NotificationList
 			notifications={notifications}
-			colorText={colorText}
 			isLoading={isLoading}
 			isError={isError}
 			showRedFlag={showRedFlag}

ui/src/components/General/Notification/utils/types.ts

@@ -4,10 +4,6 @@ interface Markdown {
 	features: string[];
 }
 
-interface NotificationProps {
-	colorText: string;
-}
-
 interface NotificationListProps {
 	notifications: Markdown[] | undefined;
 	showRedFlag: boolean;
@@ -17,4 +13,4 @@ interface NotificationListProps {
 	handleRedFlagNotification: () => void;
 }
 
-export type { Markdown, NotificationProps, NotificationListProps };
+export type { Markdown, NotificationListProps };

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;
+	}
+}

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 (
+		<div className={styles.fb}>
+			<div className={styles.fb__container}>
+				<FloatingSearchBar
+					styles={{
+						backgroundColor: colorBgContainer,
+					}}
+				/>
+				<FloatingHeader
+					styles={{
+						backgroundColor: colorBgContainer,
+					}}
+				/>
+			</div>
+		</div>
+	);
+};
+
+export default FloatingBar;

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;

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<FloatingHeaderProps> = ({ styles }) => {
 	return (
-		<div
-			className={style.fb}
-			style={{
-				backgroundColor: colorBgContainer,
-			}}
-		>
-			<Notification colorText={colorText} />
+		<div className={style.fh} style={styles}>
+			<Notification />
 			<Link to="/feedback">
-				<Button className={style.fb__button}>
-					<Icon name="Megaphone" size={20} color={colorText} />
+				<Button className={style.fh__button}>
+					<Icon name="Megaphone" size={20} />
 				</Button>
 			</Link>
 		</div>

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;
+		}
 	}
 }

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<FloatingSearchBarProps> = ({ styles }) => {
 	const os = useUserAgent();
 	const addonCommand = os === "win" ? "ctrl + k" : "⌘ K";
 
-	const {
-		token: { colorBgContainer },
-	} = theme.useToken();
 	const { handleModalOpen } = useContext(SearchModalContext);
 
 	return (
-		<div
-			className={style.fsb}
-			style={{
-				backgroundColor: colorBgContainer,
-			}}
+		<Input
+			style={styles}
+			addonBefore={<Icon name="Search" />}
+			addonAfter={<>{addonCommand}</>}
+			placeholder="Search..."
+			value={""}
+			onChange={handleModalOpen}
+			className={style.fsb__input}
 			onClick={handleModalOpen}
-		>
-			<Input
-				addonBefore={<Icon name="Search" />}
-				addonAfter={<>{addonCommand}</>}
-				placeholder="Search..."
-				value={""}
-				onChange={handleModalOpen}
-			/>
-		</div>
+		/>
 	);
 };