fix: better styles

Author: astandrik

src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TenantCpu.scss

@@ -1,3 +1,5 @@
+@use '../../../../../styles/mixins.scss';
+
 .tenant-cpu {
     &__tabs-container {
         margin-top: var(--g-spacing-3);
@@ -6,4 +8,14 @@
     &__tab-content {
         margin-top: var(--g-spacing-3);
     }
+
+    &__all-nodes-link {
+        display: flex;
+        align-items: center;
+        gap: var(--g-spacing-1);
+
+        margin-right: var(--g-spacing-2);
+
+        @include mixins.body-1-typography();
+    }
 }

src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TenantCpu.tsx

@@ -1,15 +1,7 @@
 import React from 'react';
 
-import {ChevronRight} from '@gravity-ui/icons';
-import {
-    Button,
-    Flex,
-    Icon,
-    SegmentedRadioGroup,
-    Tab,
-    TabList,
-    TabProvider,
-} from '@gravity-ui/uikit';
+import {ArrowRight} from '@gravity-ui/icons';
+import {Flex, Icon, SegmentedRadioGroup, Tab, TabList, TabProvider} from '@gravity-ui/uikit';
 import {useLocation} from 'react-router-dom';
 
 import {InternalLink} from '../../../../../components/InternalLink';
@@ -25,6 +17,7 @@ import {useTypedDispatch, useTypedSelector} from '../../../../../utils/hooks';
 import {useDiagnosticsPageLinkGetter} from '../../../Diagnostics/DiagnosticsPages';
 import {TenantTabsGroups, getTenantPath} from '../../../TenantPages';
 import {TenantDashboard} from '../TenantDashboard/TenantDashboard';
+import i18n from '../i18n';
 
 import {TopNodesByCpu} from './TopNodesByCpu';
 import {TopNodesByLoad} from './TopNodesByLoad';
@@ -81,14 +74,13 @@ export function TenantCpu({tenantName, additionalNodesProps}: TenantCpuProps) {
         );
 
         const allNodesButton = (
-            <Button
-                view="flat-secondary"
-                size="s"
-                href={getDiagnosticsPageLink(TENANT_DIAGNOSTICS_TABS_IDS.nodes)}
+            <InternalLink
+                className={b('all-nodes-link')}
+                to={getDiagnosticsPageLink(TENANT_DIAGNOSTICS_TABS_IDS.nodes)}
             >
-                All Nodes
-                <Icon data={ChevronRight} size={16} />
-            </Button>
+                {i18n('action_all-nodes')}
+                <Icon data={ArrowRight} size={16} />
+            </InternalLink>
         );
 
         const nodesComponent =
@@ -105,7 +97,7 @@ export function TenantCpu({tenantName, additionalNodesProps}: TenantCpuProps) {
             );
 
         return (
-            <Flex direction="column" gap={3}>
+            <Flex direction="column" gap={2}>
                 <Flex justifyContent="space-between" alignItems="center">
                     {nodesModeControl}
                     {allNodesButton}

src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss

@@ -34,9 +34,7 @@
     &__title {
         margin-bottom: 10px;
 
-        font-weight: 700;
-
-        @include mixins.body-2-typography();
+        @include mixins.subheader-1-typography();
     }
 
     &__table {

src/containers/Tenant/Diagnostics/TenantOverview/i18n/en.json

@@ -16,6 +16,7 @@
   "by-memory": "by memory",
   "by-usage": "by usage",
   "by-size": "by size",
+  "action_all-nodes": "All Nodes",
   "cards.cpu-label": "CPU load",
   "cards.storage-label": "Storage",
   "cards.memory-label": "Memory used",