From b505441160029c449b95b3d7564e7ac1ef493993 Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Tue, 20 Jan 2026 22:02:55 +0100
Subject: [PATCH] Use icon instead of +- for jitter display

---
 .../Home/components/LatestTest/LatestTestComponent.jsx   | 4 ++--
 client/src/pages/Home/components/LatestTest/styles.sass  | 7 +++++++
 .../Home/components/Speedtest/SpeedtestComponent.jsx     | 4 ++--
 client/src/pages/Home/components/Speedtest/styles.sass   | 7 +++++++
 .../charts/LatestTestChart/LatestTestChart.jsx           | 2 +-
 .../pages/Statistics/charts/LatestTestChart/styles.sass  | 9 ++++++++-
 6 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/client/src/pages/Home/components/LatestTest/LatestTestComponent.jsx b/client/src/pages/Home/components/LatestTest/LatestTestComponent.jsx
index be092e12..02034855 100644
--- a/client/src/pages/Home/components/LatestTest/LatestTestComponent.jsx
+++ b/client/src/pages/Home/components/LatestTest/LatestTestComponent.jsx
@@ -1,5 +1,5 @@
 import {useContext, useEffect, useState, useRef, useMemo} from "react";
-import {faArrowDown, faArrowUp, faClockRotateLeft, faPingPongPaddleBall} from "@fortawesome/free-solid-svg-icons";
+import {faArrowDown, faArrowUp, faClockRotateLeft, faPingPongPaddleBall, faWaveSquare} from "@fortawesome/free-solid-svg-icons";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {generateRelativeTime} from "./utils";
 import {StatusContext} from "@/common/contexts/Status";
@@ -128,7 +128,7 @@ const LatestTestComponent = () => {
                         )}
                         {latest.jitter !== null && latest.jitter !== undefined && (
                             <span className="jitter-suffix" onClick={showJitterInfo} title={t("latest.jitter")}>
-                                ±{latest.jitter}
+                                <FontAwesomeIcon icon={faWaveSquare} className="jitter-icon" />{latest.jitter}
                             </span>
                         )}
                     </h2>
diff --git a/client/src/pages/Home/components/LatestTest/styles.sass b/client/src/pages/Home/components/LatestTest/styles.sass
index a5ab22af..9804a0b1 100644
--- a/client/src/pages/Home/components/LatestTest/styles.sass
+++ b/client/src/pages/Home/components/LatestTest/styles.sass
@@ -98,10 +98,17 @@ $purple-glow: rgba(139, 92, 246, 0.4)
   margin-left: 0.4rem
   border-left: 2px solid $light-gray
   opacity: 0.7
+  display: flex
+  align-items: center
+  gap: 0.25rem
 
   &:hover
     opacity: 1
 
+  .jitter-icon
+    width: 0.9rem
+    height: 0.9rem
+
 @media (max-width: 1351px)
   .inner-container
     margin-left: 1rem
diff --git a/client/src/pages/Home/components/Speedtest/SpeedtestComponent.jsx b/client/src/pages/Home/components/Speedtest/SpeedtestComponent.jsx
index e4e4e035..04f0987c 100644
--- a/client/src/pages/Home/components/Speedtest/SpeedtestComponent.jsx
+++ b/client/src/pages/Home/components/Speedtest/SpeedtestComponent.jsx
@@ -2,7 +2,7 @@ import React, {forwardRef, useContext, useRef, useImperativeHandle} from "react"
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {
     faArrowDown, faArrowUp, faClockRotateLeft, faClose,
-    faInfo, faPingPongPaddleBall, faTrashCan
+    faInfo, faPingPongPaddleBall, faTrashCan, faWaveSquare
 } from "@fortawesome/free-solid-svg-icons";
 import {useAlert} from "@/common/contexts/Alert";
 import {SpeedtestContext} from "@/common/contexts/Speedtests";
@@ -87,7 +87,7 @@ const SpeedtestComponent = forwardRef((props, forwardedRef) => {
                 <h2 className="speedtest-text">
                     {props.error ? "" : props.ping}
                     {!props.error && props.jitter !== null && props.jitter !== undefined && (
-                        <span className="jitter-suffix">±{props.jitter}</span>
+                        <span className="jitter-suffix"><FontAwesomeIcon icon={faWaveSquare} className="jitter-icon" />{props.jitter}</span>
                     )}
                 </h2>
             </div>
diff --git a/client/src/pages/Home/components/Speedtest/styles.sass b/client/src/pages/Home/components/Speedtest/styles.sass
index 4150ed6f..3e097c90 100644
--- a/client/src/pages/Home/components/Speedtest/styles.sass
+++ b/client/src/pages/Home/components/Speedtest/styles.sass
@@ -61,6 +61,13 @@
   margin-left: 0.4rem
   border-left: 2px solid $light-gray
   opacity: 0.7
+  display: flex
+  align-items: center
+  gap: 0.25rem
+
+  .jitter-icon
+    width: 0.9rem
+    height: 0.9rem
 
 @media (max-width: 605px)
   .speedtest
diff --git a/client/src/pages/Statistics/charts/LatestTestChart/LatestTestChart.jsx b/client/src/pages/Statistics/charts/LatestTestChart/LatestTestChart.jsx
index f8d333c1..9e33468d 100644
--- a/client/src/pages/Statistics/charts/LatestTestChart/LatestTestChart.jsx
+++ b/client/src/pages/Statistics/charts/LatestTestChart/LatestTestChart.jsx
@@ -24,7 +24,7 @@ export const LatestTestChart = (props) => {
                         <h2>{t("latest.ping")}</h2>
                         <p className={"icon-" + getIconBySpeed(props.test.ping, config.ping, false)}>
                             {(props.test.ping === -1 ? "N/A" : props.test.ping) + " " + t("latest.ping_unit")}
-                            {hasJitter && <span className="jitter-value"> ±{props.test.jitter}</span>}
+                            {hasJitter && <span className="jitter-value"><FontAwesomeIcon icon={faWaveSquare} className="jitter-icon" />{props.test.jitter}</span>}
                         </p>
                     </div>
                     <FontAwesomeIcon icon={faPingPongPaddleBall}
diff --git a/client/src/pages/Statistics/charts/LatestTestChart/styles.sass b/client/src/pages/Statistics/charts/LatestTestChart/styles.sass
index 4b39146e..3208653e 100644
--- a/client/src/pages/Statistics/charts/LatestTestChart/styles.sass
+++ b/client/src/pages/Statistics/charts/LatestTestChart/styles.sass
@@ -38,4 +38,11 @@ $purple: #8b5cf6
   padding-left: 0.35rem
   margin-left: 0.35rem
   border-left: 2px solid $light-gray
-  opacity: 0.7
\ No newline at end of file
+  opacity: 0.7
+  display: inline-flex
+  align-items: center
+  gap: 0.2rem
+
+  .jitter-icon
+    width: 0.7rem
+    height: 0.7rem
\ No newline at end of file