refactor

ui/src/components/General/ColorPickerWithInput/ColorPickerWithInput.module.scss

@@ -4,9 +4,11 @@
 		display: inline-block;
 		display: flex;
 		align-items: center;
-		justify-content: center;
 
 		&_dp {
+			background-color: rgb(68, 68, 68);
+			padding: 10px;
+			border-radius: 10px;
 			position: absolute;
 			top: 100%;
 			right: 10;

ui/src/components/General/Notification/components/NotificationList.tsx

@@ -3,10 +3,10 @@ import { Button, Skeleton } from "antd";
 import { Typography, Tag, Dropdown } from "antd";
 import Icon from "components/General/Icon";
 import { classNames } from "lib/utils/helper";
-import { NotificationListProps } from "components/General/Notification/utils/types";
+import { NotificationListPropsType } from "components/General/Notification/utils/types";
 const { Title } = Typography;
 
-const NotificationList: React.FC<NotificationListProps> = ({
+const NotificationList: React.FC<NotificationListPropsType> = ({
 	notifications,
 	colorText,
 	isLoading,

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

@@ -2,12 +2,18 @@
 	position: absolute;
 	top: var(--bt-size-8);
 	right: var(--bt-size-20);
-	padding: var(--bt-size-4) var(--bt-size-15) var(--bt-size-4)
-		var(--bt-size-10);
+	padding: var(--bt-size-4) 0 var(--bt-size-4) 0;
 	border-radius: var(--bt-size-10);
 	z-index: var(--bt-z-index-dropdown);
+	display: flex;
 
-	&__about {
+	&__button {
+		border: none;
+		box-shadow: none;
+		background-color: transparent;
 		cursor: pointer;
+		position: relative;
+		align-items: center;
+		display: flex;
 	}
 }

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

@@ -1,47 +1,29 @@
-import { Avatar, Dropdown, Space, theme } from "antd";
+import { Button, theme } from "antd";
 import style from "./FloatingHeader.module.scss";
-import { items } from "./utils/contants";
 import Notification from "components/General/Notification";
-import avatar1 from "assets/avatars/avatar-1.svg";
-import avatar2 from "assets/avatars/avatar-2.svg";
-import avatar3 from "assets/avatars/avatar-3.svg";
-
-const avatars = [avatar1, avatar2, avatar3];
-const randomIndex = Math.floor(Math.random() * avatars.length);
-const randomAvatar = avatars[randomIndex];
+import Icon from "components/General/Icon";
+import { openLink } from "lib/utils/helper";
 
 const FloatingHeader = () => {
 	const {
 		token: { colorBgContainer, colorText },
 	} = theme.useToken();
 
 	return (
-		<Space
+		<div
 			className={style.fb}
 			style={{
 				backgroundColor: colorBgContainer,
 			}}
 		>
 			<Notification colorText={colorText} />
-			<Dropdown
-				menu={{ items }}
-				placement="bottomLeft"
-				arrow={{ pointAtCenter: true }}
-				className={style.fb__about}
+			<Button
+				className={style.fb__button}
+				onClick={() => openLink("/feedback", false)}
 			>
-				<Avatar
-					size={{
-						xs: 38,
-						sm: 38,
-						md: 38,
-						lg: 38,
-						xl: 38,
-						xxl: 38,
-					}}
-					src={randomAvatar}
-				/>
-			</Dropdown>
-		</Space>
+				<Icon name="Megaphone" size={20} color={colorText} />
+			</Button>
+		</div>
 	);
 };
 

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

@@ -41,6 +41,9 @@ const Footer: React.FC = () => {
 							Status
 						</a>
 					</li>
+					<li>
+						<a href="/about">About</a>
+					</li>
 				</ul>
 			</div>
 

ui/src/lib/utils/helper.ts

@@ -38,10 +38,15 @@ const classNames = (...args: (string | undefined)[]) => {
 	return args.filter(Boolean).join(" ");
 };
 
+const openLink = (url: string, newTab: boolean = true) => {
+	window.open(url, newTab ? "_blank" : "_self", "noopener");
+};
+
 export {
 	setLocalstorageValue,
 	getLocalstorageValue,
 	classNames,
 	getTextColor,
 	isTransparent,
+	openLink,
 };

ui/src/pages/Data/Avatar/index.tsx

@@ -26,7 +26,7 @@ const Avatar = () => {
 	const [textColor, setTextColor] = useState<string>(
 		"rgba(255, 255, 255, 1)"
 	);
-	const [bgColor, setBgColor] = useState<string>("rgba(0, 0, 0, 0.25)");
+	const [bgColor, setBgColor] = useState<string>("rgba(0, 0, 0, 1)");
 	const [shapeType, setShapeType] = useState<AvatarShapeType>(
 		AvatarShape.Circle
 	);

ui/src/pages/Home/index.tsx

@@ -14,10 +14,7 @@ import Footer from "components/Layouts/Footer";
 import PageGrid from "components/Layouts/PageGrid";
 import { SEGMENTED_OPTIONS, DESCRIPTIONS } from "./utils/constants";
 import { useState } from "react";
-
-const onClick = (url: string) => {
-	window.open(url, "_blank", "noopener");
-};
+import { openLink } from "lib/utils/helper";
 
 const Home = () => {
 	const [feature, setFeature] = useState(SEGMENTED_OPTIONS[0].value);
@@ -131,13 +128,15 @@ const Home = () => {
 							<Space direction="horizontal">
 								<ResponsiveButton
 									type="primary"
-									onClick={() => onClick("converter/base-64")}
+									onClick={() =>
+										openLink("converter/base-64")
+									}
 								>
 									Base64 converter
 								</ResponsiveButton>
 								<ResponsiveButton
 									onClick={() =>
-										onClick(
+										openLink(
 											"https://github.com/lifeparticle/binarytree/issues"
 										)
 									}