diff --git a/ui/src/assets/avatars/avatar-1.svg b/ui/src/assets/avatars/avatar-1.svg deleted file mode 100644 index 3e9db1d8..00000000 --- a/ui/src/assets/avatars/avatar-1.svg +++ /dev/null @@ -1 +0,0 @@ -"Adventurer Neutral" by "Lisa Wischofsky", licensed under "CC BY 4.0". / Remix of the original. - Created with dicebear.comAdventurer NeutralLisa Wischofskyhttps://www.figma.com/community/file/1184595184137881796 \ No newline at end of file diff --git a/ui/src/assets/avatars/avatar-2.svg b/ui/src/assets/avatars/avatar-2.svg deleted file mode 100644 index 0d3bf58e..00000000 --- a/ui/src/assets/avatars/avatar-2.svg +++ /dev/null @@ -1 +0,0 @@ -"Adventurer Neutral" by "Lisa Wischofsky", licensed under "CC BY 4.0". / Remix of the original. - Created with dicebear.comAdventurer NeutralLisa Wischofskyhttps://www.figma.com/community/file/1184595184137881796 \ No newline at end of file diff --git a/ui/src/assets/avatars/avatar-3.svg b/ui/src/assets/avatars/avatar-3.svg deleted file mode 100644 index f799d86a..00000000 --- a/ui/src/assets/avatars/avatar-3.svg +++ /dev/null @@ -1 +0,0 @@ -"Adventurer Neutral" by "Lisa Wischofsky", licensed under "CC BY 4.0". / Remix of the original. - Created with dicebear.comAdventurer NeutralLisa Wischofskyhttps://www.figma.com/community/file/1184595184137881796 \ No newline at end of file diff --git a/ui/src/components/General/ColorPickerWithInput/ColorPickerWithInput.module.scss b/ui/src/components/General/ColorPickerWithInput/ColorPickerWithInput.module.scss index abac6269..ae37b344 100644 --- a/ui/src/components/General/ColorPickerWithInput/ColorPickerWithInput.module.scss +++ b/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; diff --git a/ui/src/components/General/Notification/components/NotificationList.tsx b/ui/src/components/General/Notification/components/NotificationList.tsx index 2feb8630..034743a6 100644 --- a/ui/src/components/General/Notification/components/NotificationList.tsx +++ b/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 = ({ +const NotificationList: React.FC = ({ notifications, colorText, isLoading, diff --git a/ui/src/components/Layouts/FloatingHeader/FloatingHeader.module.scss b/ui/src/components/Layouts/FloatingHeader/FloatingHeader.module.scss index 4a0737f4..d1b52842 100644 --- a/ui/src/components/Layouts/FloatingHeader/FloatingHeader.module.scss +++ b/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; } } diff --git a/ui/src/components/Layouts/FloatingHeader/index.tsx b/ui/src/components/Layouts/FloatingHeader/index.tsx index f99cee88..7d8ee47e 100644 --- a/ui/src/components/Layouts/FloatingHeader/index.tsx +++ b/ui/src/components/Layouts/FloatingHeader/index.tsx @@ -1,14 +1,8 @@ -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 { @@ -16,32 +10,20 @@ const FloatingHeader = () => { } = theme.useToken(); return ( - - openLink("/feedback", false)} > - - - + + + ); }; diff --git a/ui/src/components/Layouts/FloatingHeader/utils/contants.tsx b/ui/src/components/Layouts/FloatingHeader/utils/contants.tsx deleted file mode 100644 index 5aae42cd..00000000 --- a/ui/src/components/Layouts/FloatingHeader/utils/contants.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { MenuProps } from "antd"; -import { Link } from "react-router-dom"; - -const items: MenuProps["items"] = [ - { - key: "1", - label: About, - }, - { - key: "2", - label: Feedback, - }, -]; - -export { items }; diff --git a/ui/src/components/Layouts/Footer/index.tsx b/ui/src/components/Layouts/Footer/index.tsx index 93b48931..1940c071 100644 --- a/ui/src/components/Layouts/Footer/index.tsx +++ b/ui/src/components/Layouts/Footer/index.tsx @@ -41,6 +41,9 @@ const Footer: React.FC = () => { Status +
  • + About +
    • diff --git a/ui/src/lib/utils/helper.ts b/ui/src/lib/utils/helper.ts index 2b1c7930..c2688882 100644 --- a/ui/src/lib/utils/helper.ts +++ b/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, }; diff --git a/ui/src/pages/Data/Avatar/index.tsx b/ui/src/pages/Data/Avatar/index.tsx index 25f9a284..28d0d40f 100644 --- a/ui/src/pages/Data/Avatar/index.tsx +++ b/ui/src/pages/Data/Avatar/index.tsx @@ -26,7 +26,7 @@ const Avatar = () => { const [textColor, setTextColor] = useState( "rgba(255, 255, 255, 1)" ); - const [bgColor, setBgColor] = useState("rgba(0, 0, 0, 0.25)"); + const [bgColor, setBgColor] = useState("rgba(0, 0, 0, 1)"); const [shapeType, setShapeType] = useState( AvatarShape.Circle ); diff --git a/ui/src/pages/Home/index.tsx b/ui/src/pages/Home/index.tsx index ab0ee6e7..58d5418d 100644 --- a/ui/src/pages/Home/index.tsx +++ b/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 = () => { onClick("converter/base-64")} + onClick={() => + openLink("converter/base-64") + } > Base64 converter - onClick( + openLink( "https://github.com/lifeparticle/binarytree/issues" ) }