refactor: update icons and card styles in nodes metrics components

Author: kastov

src/pages/dashboard/nodes-metrics/ui/components/nodes-metrics.page.component.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import { PiChartLine } from 'react-icons/pi'
+import { PiSpeedometer } from 'react-icons/pi'
 
 import { EditNodeByUuidModalWidget } from '@widgets/dashboard/nodes/edit-node-by-uuid-modal'
 import { NodeMetricsWidget } from '@widgets/dashboard/nodes/nodes-metrics'
@@ -13,10 +13,7 @@ export default function NodesMetricsPageComponent(props: IProps) {
 
     return (
         <Page title={t('constants.nodes-metrics')}>
-            <PageHeaderShared
-                icon={<PiChartLine size={24} />}
-                title={t('constants.nodes-metrics')}
-            />
+            <PageHeaderShared icon={<PiSpeedometer size={24} />} title="Metrics Overview" />
 
             {isLoading ? <LoadingScreen height="80vh" /> : <NodeMetricsWidget />}
 

src/widgets/dashboard/nodes/nodes-metrics/node-details-card.tsx

@@ -171,7 +171,12 @@ export const NodeDetailsCard = memo(
 
                     <Grid align="flex-start" justify="flex-start">
                         <Grid.Col span={{ base: 12, lg: 6 }}>
-                            <Card p="md" style={{ backgroundColor: 'rgba(16, 185, 129, 0.1)' }}>
+                            <Card
+                                p="md"
+                                style={{
+                                    background: 'rgba(16, 185, 129, 0.1)'
+                                }}
+                            >
                                 <Group align="center" gap="xs" mb="xs" wrap="nowrap">
                                     <PiArrowDownDuotone
                                         color="var(--mantine-color-teal-4)"
@@ -270,7 +275,7 @@ export const NodeDetailsCard = memo(
                             </Card>
                         </Grid.Col>
                         <Grid.Col span={{ base: 12, lg: 6 }}>
-                            <Card p="md" style={{ backgroundColor: 'rgba(59, 130, 246, 0.1)' }}>
+                            <Card p="md" style={{ background: 'rgba(59, 130, 246, 0.1)' }}>
                                 <Group align="center" gap="xs" mb="xs" wrap="nowrap">
                                     <PiArrowUpDuotone
                                         color="var(--mantine-color-blue-4)"

src/widgets/dashboard/nodes/nodes-metrics/node-metrics.widget.tsx

@@ -11,22 +11,20 @@ import {
     SimpleGrid,
     Stack,
     Text,
-    ThemeIcon,
-    Title
+    ThemeIcon
 } from '@mantine/core'
 import {
     PiGlobeSimple,
     PiInfo,
     PiProhibitDuotone,
     PiPulseDuotone,
-    PiSpeedometer,
     PiUsersDuotone
 } from 'react-icons/pi'
 import { GetNodesMetricsCommand } from '@remnawave/backend-contract'
 import { VirtuosoMasonry } from '@virtuoso.dev/masonry'
-import { TbServer, TbServer2 } from 'react-icons/tb'
 import { memo, useCallback, useMemo } from 'react'
 import { useMediaQuery } from '@mantine/hooks'
+import { TbServer } from 'react-icons/tb'
 
 import { MODALS, useModalsStoreOpenWithData } from '@entities/dashboard/modal-store'
 import { MetricCard } from '@shared/ui/metrics/metric-card'
@@ -208,23 +206,6 @@ export const NodeMetricsWidget = () => {
             </Paper>
 
             <Box>
-                <Group align="center" gap="md" mb="lg" wrap="nowrap">
-                    <ThemeIcon color="indigo" size="lg" variant="light">
-                        <PiSpeedometer size="24px" />
-                    </ThemeIcon>
-                    <Title
-                        c="white"
-                        order={2}
-                        style={{
-                            whiteSpace: 'nowrap',
-                            overflow: 'hidden',
-                            textOverflow: 'ellipsis'
-                        }}
-                    >
-                        Metrics Overview
-                    </Title>
-                </Group>
-
                 <SimpleGrid cols={{ sm: 1, md: 2, lg: 4 }} spacing="md">
                     <StatCard
                         color="indigo"
@@ -258,15 +239,6 @@ export const NodeMetricsWidget = () => {
             </Box>
 
             <Box>
-                <Group align="center" gap="md" mb="lg">
-                    <ThemeIcon color="teal" size="lg" variant="light">
-                        <TbServer2 size="24px" />
-                    </ThemeIcon>
-                    <Title c="white" order={2}>
-                        Node Details
-                    </Title>
-                </Group>
-
                 <VirtuosoMasonry
                     columnCount={isMobile ? 1 : 2}
                     data={nodeMetrics?.nodes}