diff --git a/src/features/metrics/components/disks/disk.stats-ring.tsx b/src/features/metrics/components/disks/disk.stats-ring.tsx index e19aa8cb..8d319a97 100644 --- a/src/features/metrics/components/disks/disk.stats-ring.tsx +++ b/src/features/metrics/components/disks/disk.stats-ring.tsx @@ -21,7 +21,7 @@ const DiskStatsRing: React.FC = ({}) => { const label = `Disk ${disk?.data?.at(-1)?.name}`; return ( - + ); }; diff --git a/src/features/metrics/components/global-cpu/global-cpu.area-chart.tsx b/src/features/metrics/components/global-cpu/global-cpu.area-chart.tsx index 08a4a2de..1c3d1534 100644 --- a/src/features/metrics/components/global-cpu/global-cpu.area-chart.tsx +++ b/src/features/metrics/components/global-cpu/global-cpu.area-chart.tsx @@ -3,6 +3,7 @@ import Card from "@/components/card"; import AreaChart, { useAreaChartState } from "@/components/area-chart"; import useServerEventsContext from "@/hooks/useServerEventsContext"; import { useEffect } from "react"; +import { useMantineTheme } from "@mantine/core"; // TODO: Remove Luxon and ChartJS // TODO: Make timestamp work automatically @@ -10,6 +11,7 @@ import { useEffect } from "react"; const GlobalCpuAreaChart: React.FC = ({}) => { const { globalCpu } = useServerEventsContext(); + const { other } = useMantineTheme(); const [chartOptions, setChartOptions] = useAreaChartState({ title: { text: "CPU Usage", @@ -34,13 +36,7 @@ const GlobalCpuAreaChart: React.FC = ({}) => { name: "CPU Usage", type: "area", data: globalCpu.map((cpu) => [cpu.timestamp, cpu.usage]), - color: { - linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 }, - stops: [ - [0, "rgba(255, 99, 132, 1)"], - [1, "rgba(255, 99, 132, 0.45)"], - ], - }, + color: other.charts.area.globalCpu.color, }, ], }); diff --git a/src/features/metrics/components/global-cpu/global-cpu.stats-ring.tsx b/src/features/metrics/components/global-cpu/global-cpu.stats-ring.tsx index 3f511521..81be25fc 100644 --- a/src/features/metrics/components/global-cpu/global-cpu.stats-ring.tsx +++ b/src/features/metrics/components/global-cpu/global-cpu.stats-ring.tsx @@ -13,7 +13,7 @@ const GlobalCpuStatsRing: React.FC = ({}) => { const progress = globalCpu.at(-1)?.usage || 0; const stats = React.useMemo(() => fromNumberToPercentageString(progress), [progress]); - return ; + return ; }; export default GlobalCpuStatsRing; diff --git a/src/features/metrics/components/memory/memory.area-chart.tsx b/src/features/metrics/components/memory/memory.area-chart.tsx index c10cb560..009be06d 100644 --- a/src/features/metrics/components/memory/memory.area-chart.tsx +++ b/src/features/metrics/components/memory/memory.area-chart.tsx @@ -3,9 +3,11 @@ import formatBytes from "@/features/metrics/utils/format-bytes"; import AreaChart, { useAreaChartState } from "@/components/area-chart"; import useServerEventsContext from "@/hooks/useServerEventsContext"; import { useEffect } from "react"; +import { useMantineTheme } from "@mantine/core"; const MemoryAreaChart: React.FC = ({}) => { const { memory } = useServerEventsContext(); + const { other } = useMantineTheme(); const [chartOptions, setChartOptions] = useAreaChartState({ title: { text: "Ram Usage", @@ -31,13 +33,7 @@ const MemoryAreaChart: React.FC = ({}) => { name: "RAM Usage", type: "area", data: memory.map((mem) => [mem.timestamp, mem.used]), - color: { - linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 }, - stops: [ - [0, "rgba(10, 167, 147, 1)"], - [1, "rgba(10, 167, 147, 0.45)"], - ], - }, + color: other.charts.area.memory.color, }, ], }); diff --git a/src/features/metrics/components/memory/memory.stats-ring.tsx b/src/features/metrics/components/memory/memory.stats-ring.tsx index c05ea260..6569d0ef 100644 --- a/src/features/metrics/components/memory/memory.stats-ring.tsx +++ b/src/features/metrics/components/memory/memory.stats-ring.tsx @@ -17,7 +17,7 @@ const MemoryStatsRing: React.FC = ({}) => { const stats = React.useMemo(() => formatOverallStats(used, available), [used, available]); return ( - + ); }; diff --git a/src/features/metrics/components/networks/networks.area-chart.tsx b/src/features/metrics/components/networks/networks.area-chart.tsx index 98c9119c..b88a23e1 100644 --- a/src/features/metrics/components/networks/networks.area-chart.tsx +++ b/src/features/metrics/components/networks/networks.area-chart.tsx @@ -4,6 +4,7 @@ import AreaChart, { useAreaChartState } from "@/components/area-chart"; import useServerEventsContext from "@/hooks/useServerEventsContext"; import { useEffect, useState } from "react"; import { SeriesOptionsType } from "highcharts"; +import { useMantineTheme } from "@mantine/core"; // TODO: Remove Luxon and ChartJS // TODO: Make timestamp work automatically @@ -11,6 +12,7 @@ import { SeriesOptionsType } from "highcharts"; const NetworksAreaChart: React.FC = ({}) => { const { networks } = useServerEventsContext(); + const { other } = useMantineTheme(); const [chartOptions, setChartOptions] = useAreaChartState({ title: { text: "Network Received", @@ -40,12 +42,11 @@ const NetworksAreaChart: React.FC = ({}) => { name: `${network.id}`, type: "area", data: network.data.map((net) => [net.timestamp, net.received]), + color: other.charts.area.networkReceived.color, })), }); }, [JSON.stringify(networks)]); - - return ( diff --git a/src/features/metrics/components/swap/swap.area-chart.tsx b/src/features/metrics/components/swap/swap.area-chart.tsx index a5be6b8e..34d16b7a 100644 --- a/src/features/metrics/components/swap/swap.area-chart.tsx +++ b/src/features/metrics/components/swap/swap.area-chart.tsx @@ -3,9 +3,11 @@ import formatBytes from "@/features/metrics/utils/format-bytes"; import AreaChart, { useAreaChartState } from "@/components/area-chart"; import useServerEventsContext from "@/hooks/useServerEventsContext"; import { useEffect } from "react"; +import { useMantineTheme } from "@mantine/core"; const SwapAreaChart: React.FC = ({}) => { const { swap } = useServerEventsContext(); + const { other } = useMantineTheme(); const [chartOptions, setChartOptions] = useAreaChartState({ title: { text: "Swap Memory Usage", @@ -31,13 +33,7 @@ const SwapAreaChart: React.FC = ({}) => { name: "Swap Usage", type: "area", data: swap.map((swap) => [swap.timestamp, swap.used]), - color: { - linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 }, - stops: [ - [0, "rgba(53, 162, 235, 0.45)"], - [1, "rgba(53, 162, 235)"], - ], - }, + color: other.charts.area.swap.color, }, ], }); diff --git a/src/features/metrics/components/swap/swap.stats-ring.tsx b/src/features/metrics/components/swap/swap.stats-ring.tsx index 4d10d2f6..014611c8 100644 --- a/src/features/metrics/components/swap/swap.stats-ring.tsx +++ b/src/features/metrics/components/swap/swap.stats-ring.tsx @@ -17,7 +17,7 @@ const SwapStatsRing: React.FC = ({}) => { const stats = React.useMemo(() => formatOverallStats(used, available), [used, available]); return ( - + ); }; diff --git a/src/features/settings/pages/settings.page.tsx b/src/features/settings/pages/settings.page.tsx index c6d688c8..5c90eb0c 100644 --- a/src/features/settings/pages/settings.page.tsx +++ b/src/features/settings/pages/settings.page.tsx @@ -1,20 +1,22 @@ import React from "react"; -import AutoStartSettingsView from "@/features/settings/views/autostart.view"; +import GeneralSettingsView from "@/features/settings/views/general.view"; import AboutView from "@/features/settings/views/about.view"; import PageWrapper from "@/components/page-wrapper"; import Card from "@/components/card"; -import { Icon24Hours, IconGitBranch } from "@tabler/icons-react"; -import { Center, Container, Grid, NavLink } from "@mantine/core"; +import { IconGitBranch, IconSettings2 } from "@tabler/icons-react"; +import { Center, Grid, NavLink } from "@mantine/core"; import { useState } from "react"; const settings = [ - { icon: Icon24Hours, label: "General", view: }, - { - icon: IconGitBranch, - label: "About", - view: , - }, + { icon: IconSettings2, label: "General", view: }, + + // TODO: FIX responsiveness + // { + // icon: IconGitBranch, + // label: "About", + // view: , + // }, ]; const SettingsPage = () => { diff --git a/src/features/settings/views/autostart.view.tsx b/src/features/settings/views/general.view.tsx similarity index 86% rename from src/features/settings/views/autostart.view.tsx rename to src/features/settings/views/general.view.tsx index 0e5cf201..d2249f0e 100644 --- a/src/features/settings/views/autostart.view.tsx +++ b/src/features/settings/views/general.view.tsx @@ -4,7 +4,7 @@ import { autostart } from "@/lib"; import { useTheme } from "@/hooks/useTheme"; import { THEME_OPTION } from "../../../providers/theme.provider"; -const AutoStartSettingsView = () => { +const GeneralSettingsView = () => { const [checked, setChecked] = useState(false); const [loading, setLoading] = useState(true); const checkAutoStart = async () => setChecked(await autostart.isEnabled()); @@ -37,22 +37,24 @@ const AutoStartSettingsView = () => { <> - - -