Merge pull request #1343 from gnmyt/updates/redesign

🎨 Redesign

Author: gnmyt

client/public/assets/locales/en.json

@@ -52,6 +52,7 @@
     "upload": "Optimal up-speed",
     "download": "Optimal down-speed",
     "recommendations": "Recommendations",
+    "optimal_values": "Optimal values",
     "change_provider": "Change provider",
     "password": "Change password",
     "cron": "Set frequency",
@@ -64,10 +65,18 @@
     "dark_mode": "Dark mode",
     "theme_switched_light": "Switched to light mode",
     "theme_switched_dark": "Switched to dark mode",
-    "info": "About the project",
     "provider": "About the provider",
     "integrations": "Integrations"
   },
+  "about": {
+    "title": "About MySpeed",
+    "description": "MySpeed is an open-source speedtest analysis software that records your internet speed for up to 30 days.",
+    "github": "GitHub",
+    "website": "Website",
+    "donate": "Donate",
+    "translate": "Translate",
+    "made_by": "Made with"
+  },
   "options": {
     "cron": {
       "continuous": "Continuous (every minute)",
@@ -122,6 +131,7 @@
     "paused": "Speedtests are currently paused. Please continue them if you want to do one.",
     "running": "A speedtest is already running. Please wait a moment.",
     "admin_login": "Admin Login",
+    "servers": "Servers",
     "beta": {
       "title": "Beta Version",
       "description": "This feature is still in beta. If you find any bugs, please report them <Link>here</Link>."
@@ -165,7 +175,6 @@
     "before": "before"
   },
   "info": {
-    "credits": "<MSpeed>MySpeed</MSpeed> is a open source project provided by GNMYT. Leave a star on <Github>GitHub</Github> or <Donate>donate</Donate> to support the project.",
     "recommendations_error": "You have to do at least 10 tests to get an average. It doesn't matter if the tests were done manually or automatically.",
     "recommendations_info": "Based on the last 10 tests, it was found that the optimal ping was <Bold>{{ping}} ms</Bold>, the download at <Bold>{{down}} Mbps</Bold> and the upload at <Bold>{{up}} Mbps</Bold>. It is best to orientate yourself on your internet contract and only adopt it if it matches that.",
     "update": "An update to version {{version}} is available. See <Changes>the changes</Changes> and <DLLink>download the update</DLLink>.",
@@ -217,11 +226,7 @@
       "automatic": "automatically"
     },
     "overview": {
-      "title": "Test overview of the last {{amount}}",
-      "1": "24 hours",
-      "2": "2 days",
-      "3": "7 days",
-      "4": "30 days"
+      "title_range": "Test overview from {{from}} to {{to}}"
     }
   },
   "errors": {
@@ -236,6 +241,7 @@
     "invalid_view": "Invalid view"
   },
   "statistics": {
+    "average": "Average",
     "overview": {
       "total_title": "Total tests",
       "total_description": "The number of executed tests",
@@ -268,8 +274,42 @@
       "avg": "Average",
       "down": "Download values",
       "up": "Upload values"
+    },
+    "hourly": {
+      "title": "Speed by Time of Day",
+      "sample_count": "Tests"
+    },
+    "consistency": {
+      "title": "Connection Stability",
+      "excellent": "Excellent",
+      "good": "Good",
+      "fair": "Fair",
+      "poor": "Poor",
+      "ping_variance": "Ping variance"
+    },
+    "aggregation": {
+      "daily": "Showing daily averages",
+      "weekly": "Showing weekly averages"
     }
   },
+  "calendar": {
+    "select_range": "Select date range",
+    "select_start": "Select start date",
+    "select_end": "Select end date",
+    "from": "From",
+    "to": "To",
+    "last_7_days": "Last 7 days",
+    "last_30_days": "Last 30 days",
+    "last_90_days": "Last 90 days",
+    "last_year": "Last year",
+    "mon": "Mon",
+    "tue": "Tue",
+    "wed": "Wed",
+    "thu": "Thu",
+    "fri": "Fri",
+    "sat": "Sat",
+    "sun": "Sun"
+  },
   "nodes": {
     "add": "Add server",
     "create": "Add",
@@ -392,5 +432,20 @@
   },
   "common": {
     "back_to_top": "Back to top"
+  },
+  "not_found": {
+    "title": "Page not found",
+    "description": "The page you're looking for doesn't exist or has been moved.",
+    "back_home": "Back to Home"
+  },
+  "route_error": {
+    "title": "Oops!",
+    "subtitle": "Something went wrong",
+    "description": "An unexpected error occurred. Please try again or go back to the home page.",
+    "reload": "Reload Page"
+  },
+  "optimal_values": {
+    "title": "Optimal Values",
+    "use_recommended": "Use recommended"
   }
 }

client/src/App.jsx

@@ -16,6 +16,7 @@ import {ThemeProvider} from "@/common/contexts/Theme";
 import i18n from './i18n';
 import Loading from "@/pages/Loading";
 import Error from "@/pages/Error";
+import RouteError from "@/pages/RouteError";
 import {ToastNotificationProvider} from "@/common/contexts/ToastNotification";
 import {NodeProvider} from "@/common/contexts/Node";
 import {library} from '@fortawesome/fontawesome-svg-core';
@@ -65,6 +66,7 @@ const App = () => {
                     <main><Outlet/></main>
                 </Providers>
             ),
+            errorElement: <RouteError />,
             children: [
                 {path: "/", element: <Home/>},
                 {path: "/nodes", element: <Nodes/>},

client/src/common/components/AboutDialog/AboutDialog.jsx

@@ -0,0 +1,77 @@
+import {DialogContext, DialogProvider} from "@/common/contexts/Dialog";
+import "./styles.sass";
+import React, {useContext, useEffect, useState} from "react";
+import {t} from "i18next";
+import {Trans} from "react-i18next";
+import {faClose, faGlobe, faHeart, faLanguage} from "@fortawesome/free-solid-svg-icons";
+import {faGithub} from "@fortawesome/free-brands-svg-icons";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {jsonRequest} from "@/common/utils/RequestUtil";
+import {PROJECT_URL, WEB_URL, DONATION_URL} from "@/index";
+
+const Dialog = ({version}) => {
+    const close = useContext(DialogContext);
+
+    const links = [
+        {icon: faGithub, label: t("about.github"), url: PROJECT_URL},
+        {icon: faGlobe, label: t("about.website"), url: WEB_URL},
+        {icon: faHeart, label: t("about.donate"), url: DONATION_URL, accent: true},
+        {icon: faLanguage, label: t("about.translate"), url: "https://crowdin.com/project/myspeed"}
+    ];
+
+    return (
+        <>
+            <div className="dialog-header">
+                <h4 className="dialog-text">{t("about.title")}</h4>
+                <FontAwesomeIcon icon={faClose} className="dialog-text dialog-icon" onClick={() => close()}/>
+            </div>
+
+            <div className="about-wrapper">
+                <div className="about-hero">
+                    <img src="/assets/img/logo192.png" alt="MySpeed Logo" className="about-logo"/>
+                    <div className="about-title-section">
+                        <h1 className="about-title">MySpeed</h1>
+                        <span className="about-version">v{version}</span>
+                    </div>
+                </div>
+
+                <p className="about-description">
+                    <Trans i18nKey="about.description">
+                        MySpeed is an open-source speedtest analysis software that records your internet speed for up to 30 days.
+                    </Trans>
+                </p>
+
+                <div className="about-links">
+                    {links.map((link, index) => (
+                        <a key={index} href={link.url} target="_blank" rel="noopener noreferrer"
+                           className={"about-link" + (link.accent ? " about-link-accent" : "")}>
+                            <FontAwesomeIcon icon={link.icon}/>
+                            <span>{link.label}</span>
+                        </a>
+                    ))}
+                </div>
+
+                <p className="about-footer">
+                    {t("about.made_by")} <FontAwesomeIcon icon={faHeart} className="about-heart"/> by <a href="https://github.com/gnmyt" target="_blank" rel="noopener noreferrer">GNMYT</a>
+                </p>
+            </div>
+        </>
+    );
+};
+
+export const AboutDialog = (props) => {
+    const [version, setVersion] = useState(null);
+
+    useEffect(() => {
+        jsonRequest("/info/version").then(data => setVersion(data.local));
+    }, []);
+
+    return (
+        <DialogProvider close={props.onClose} customClass={!version ? "dialog-loading" : "about-dialog"}>
+            {!version && (
+                <div className="lds-ellipsis"><div/><div/><div/><div/></div>
+            )}
+            {version && <Dialog version={version}/>}
+        </DialogProvider>
+    );
+};

client/src/common/components/AboutDialog/index.js

@@ -0,0 +1 @@
+export {AboutDialog as default} from "./AboutDialog.jsx";

client/src/common/components/AboutDialog/styles.sass

@@ -0,0 +1,104 @@
+@use "@/common/styles/colors" as *
+
+.about-dialog
+  max-width: 26rem
+
+.about-wrapper
+  display: flex
+  flex-direction: column
+  gap: 1rem
+  margin-top: 1rem
+
+.about-hero
+  display: flex
+  align-items: center
+  gap: 1rem
+
+.about-logo
+  width: 56px
+  height: 56px
+
+.about-title-section
+  display: flex
+  flex-direction: column
+  gap: 0.15rem
+
+.about-title
+  margin: 0
+  font-size: 1.5rem
+  font-weight: 700
+  color: $white
+
+.about-version
+  font-size: 0.85rem
+  color: $accent-primary
+  font-weight: 600
+
+.about-description
+  margin: 0
+  font-size: 0.9rem
+  color: $subtext
+  line-height: 1.5
+
+.about-links
+  display: grid
+  grid-template-columns: 1fr 1fr
+  gap: 0.5rem
+
+.about-link
+  display: flex
+  align-items: center
+  gap: 0.6rem
+  padding: 0.6rem 0.85rem
+  border: 1px solid $light-gray
+  border-radius: 0.5rem
+  color: $white
+  text-decoration: none
+  font-size: 0.85rem
+  font-weight: 500
+  transition: all 0.2s ease
+
+  svg
+    color: $subtext
+    font-size: 1rem
+
+  &:hover
+    background: $darker-gray
+    
+    svg
+      color: $white
+
+.about-link-accent
+  svg
+    color: $accent-danger
+
+  &:hover    
+    svg
+      color: $accent-danger
+
+.about-footer
+  margin: 0
+  padding-top: 0.5rem
+  font-size: 0.8rem
+  color: $subtext
+  text-align: center
+  border-top: 1px solid $light-gray
+
+  a
+    color: $accent-primary
+    text-decoration: none
+
+    &:hover
+      text-decoration: underline
+
+.about-heart
+  color: $accent-danger
+  font-size: 0.7rem
+  margin: 0 0.1rem
+
+@media (max-width: 500px)
+  .about-dialog
+    max-width: 90vw
+
+  .about-links
+    grid-template-columns: 1fr

client/src/common/components/ChartModal/ChartModal.jsx

@@ -0,0 +1,44 @@
+import { useEffect, useCallback } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
+import "./styles.sass";
+
+export const ChartModal = ({ isOpen, onClose, isChart = false, children }) => {
+    const handleEscape = useCallback((e) => {
+        if (e.key === "Escape") {
+            onClose();
+        }
+    }, [onClose]);
+
+    useEffect(() => {
+        if (isOpen) {
+            document.addEventListener("keydown", handleEscape);
+            document.body.style.overflow = "hidden";
+        }
+        return () => {
+            document.removeEventListener("keydown", handleEscape);
+            document.body.style.overflow = "";
+        };
+    }, [isOpen, handleEscape]);
+
+    if (!isOpen) return null;
+
+    const handleBackdropClick = (e) => {
+        if (e.target === e.currentTarget) {
+            onClose();
+        }
+    };
+
+    return (
+        <div className="chart-modal-backdrop" onClick={handleBackdropClick}>
+            <div className={`chart-modal-content${isChart ? ' modal-chart' : ''}`}>
+                <button className="chart-modal-close" onClick={onClose}>
+                    <FontAwesomeIcon icon={faXmark} />
+                </button>
+                <div className={`chart-modal-body${isChart ? ' modal-body-chart' : ''}`}>
+                    {children}
+                </div>
+            </div>
+        </div>
+    );
+};

client/src/common/components/ChartModal/index.js

@@ -0,0 +1 @@
+export { ChartModal as default } from "./ChartModal";