diff --git a/client/src/common/components/Header/HeaderComponent.jsx b/client/src/common/components/Header/HeaderComponent.jsx index 34e30afa..8feb84f0 100644 --- a/client/src/common/components/Header/HeaderComponent.jsx +++ b/client/src/common/components/Header/HeaderComponent.jsx @@ -5,7 +5,8 @@ import { faGaugeHigh, faGear, faLock, - faClose + faClose, + faServer } from "@fortawesome/free-solid-svg-icons"; import { useContext, useEffect, useState } from "react"; import DropdownComponent from "../Dropdown/DropdownComponent"; @@ -21,6 +22,7 @@ import { WEB_URL } from "@/index"; import { Trans } from "react-i18next"; import { useLocation, useNavigate } from "react-router-dom"; import Pagination from "./components/Pagination"; +import AboutDialog from "@/common/components/AboutDialog"; const HeaderComponent = () => { const findNode = useContext(NodeContext)[4]; @@ -35,6 +37,7 @@ const HeaderComponent = () => { const [config, reloadConfig, checkConfig] = useContext(ConfigContext); const [updateAvailable, setUpdateAvailable] = useState(""); const [isDropdownOpen, setIsDropdownOpen] = useState(false); + const [showAboutDialog, setShowAboutDialog] = useState(false); const switchDropdown = () => { setIsDropdownOpen(!isDropdownOpen); @@ -98,10 +101,11 @@ const HeaderComponent = () => { return (
+ {showAboutDialog && setShowAboutDialog(false)}/>}
{config.viewMode &&

{t("header.title")}

} - {!config.viewMode &&

navigate("/nodes")} className="h2-click">MySpeed Logo {getNodeName()}

} + {!config.viewMode &&

setShowAboutDialog(true)}>MySpeed Logo {getNodeName()}

} {config.previewMode &&

{t("preview.info")}

}
@@ -134,6 +138,11 @@ const HeaderComponent = () => { {t("header.download")}
: <>)} + {!config.viewMode &&
+ navigate("/nodes")} /> + {t("header.servers")} +
} +
{t("dropdown.settings")} diff --git a/client/src/common/components/Header/styles.sass b/client/src/common/components/Header/styles.sass index 413b8f0f..69902c3b 100644 --- a/client/src/common/components/Header/styles.sass +++ b/client/src/common/components/Header/styles.sass @@ -41,29 +41,25 @@ header margin: 0 .header-main h2 + display: flex + align-items: center + gap: 1rem padding: 0.5rem 1rem border-radius: 0.75rem margin: 0 -.header-main .h2-click - display: flex - gap: 1rem - align-items: center - cursor: pointer - user-select: none - transition: all 0.2s ease - - svg - margin-right: 0.3rem - .header-logo width: 32px height: 32px border-radius: 6px -.header-main .h2-click:hover - color: $accent-primary - background-color: $dark-gray +.header-about + cursor: help + user-select: none + transition: color 0.2s ease + + &:hover + color: $accent-primary .header-icon cursor: pointer @@ -109,29 +105,16 @@ header @media (max-width: 530px) .header-left div margin-right: 0 - .header-left .h2-click - margin-left: 0 - font-size: 22pt .header-icon width: 25px height: 25px @media (max-width: 480px) - .header-left .h2-click - font-size: 14pt - text-overflow: ellipsis - overflow: hidden - .header-left svg - font-size: 14pt .header-icon width: 20px height: 20px @media screen and (max-width: 365px) - .header-main .h2-click - gap: 0 - .header-left svg - margin-right: 0 .demo-info font-size: 12pt padding: 0 \ No newline at end of file