Integrate AlertDialog into HeaderComponent

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 (
         <header>
+            {showAboutDialog && <AboutDialog onClose={() => setShowAboutDialog(false)}/>}
             <div className="header-main">
                 <div className="header-left">
                     {config.viewMode && <h2>{t("header.title")}</h2>}
-                    {!config.viewMode && <h2 onClick={() => navigate("/nodes")} className="h2-click"><img src="/assets/img/logo192.png" alt="MySpeed Logo" className="header-logo" /> {getNodeName()}</h2>}
+                    {!config.viewMode && <h2 className="header-about" onClick={() => setShowAboutDialog(true)}><img src="/assets/img/logo192.png" alt="MySpeed Logo" className="header-logo" /> {getNodeName()}</h2>}
 
                     {config.previewMode && <h2 className="demo-info" onClick={showDemoDialog}>{t("preview.info")}</h2>}
                 </div>
@@ -134,6 +138,11 @@ const HeaderComponent = () => {
                         <span className="tooltip">{t("header.download")}</span>
                     </div> : <></>)}
 
+                    {!config.viewMode && <div className="tooltip-element tooltip-bottom">
+                        <FontAwesomeIcon icon={faServer} className="header-icon" onClick={() => navigate("/nodes")} />
+                        <span className="tooltip">{t("header.servers")}</span>
+                    </div>}
+
                     <div className="tooltip-element tooltip-bottom" id="open-header">
                         <FontAwesomeIcon icon={icon} className="header-icon" onClick={switchDropdown} />
                         <span className="tooltip">{t("dropdown.settings")}</span>

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