fix: icon size

Author: astandrik

src/components/DoughnutMetrics/DoughnutMetrics.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type {TextProps} from '@gravity-ui/uikit';
+import type {HelpMarkProps, TextProps} from '@gravity-ui/uikit';
 import {Flex, HelpMark, Text} from '@gravity-ui/uikit';
 
 import {cn} from '../../utils/cn';
@@ -17,16 +17,27 @@ interface LegendProps {
     variant?: TextProps['variant'];
     color?: TextProps['color'];
     note?: React.ReactNode;
+    noteIconSize?: HelpMarkProps['iconSize'];
 }
 
-function Legend({children, variant = 'subheader-3', color = 'primary', note}: LegendProps) {
+function Legend({
+    children,
+    variant = 'subheader-3',
+    color = 'primary',
+    note,
+    noteIconSize,
+}: LegendProps) {
     return (
         <Flex gap={1} alignItems="center">
             <Text variant={variant} color={color} className={b('legend')} as="div">
                 {children}
             </Text>
             {note && (
-                <HelpMark className={b('legend-note')} popoverProps={{placement: 'right'}}>
+                <HelpMark
+                    iconSize={noteIconSize || 'm'}
+                    className={b('legend-note')}
+                    popoverProps={{placement: 'right'}}
+                >
                     {note}
                 </HelpMark>
             )}

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

@@ -1,10 +1,6 @@
 .tenant-tab-card {
     border-radius: var(--g-border-radius-s);
 
-    &__help-icon {
-        color: var(--g-color-text-hint);
-    }
-
     &__card-container {
         padding: var(--g-spacing-4);
 

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

@@ -1,4 +1,4 @@
-import {Card, Flex, HelpMark, Text} from '@gravity-ui/uikit';
+import {Card, Flex} from '@gravity-ui/uikit';
 
 import {DoughnutMetrics} from '../../../../../components/DoughnutMetrics/DoughnutMetrics';
 import {formatBytes} from '../../../../../utils/bytesParsers';
@@ -64,17 +64,19 @@ export function TabCard({
                             {formattedPercentage}
                         </DoughnutMetrics.Value>
                     </DoughnutMetrics>
-                    <Flex direction="column" gap={1}>
-                        <Text variant="subheader-2" color="primary">
+                    <div className={b('legend-wrapper')}>
+                        <DoughnutMetrics.Legend variant="subheader-2">
                             {formattedValue}
-                        </Text>
-                        <Flex alignItems="center" gap={1}>
-                            <Text variant="body-1" color="secondary">
-                                {sublabel || label}
-                            </Text>
-                            {helpText && <HelpMark className={b('help-icon')}>{helpText}</HelpMark>}
-                        </Flex>
-                    </Flex>
+                        </DoughnutMetrics.Legend>
+                        <DoughnutMetrics.Legend
+                            variant="body-1"
+                            color="secondary"
+                            note={helpText}
+                            noteIconSize="s"
+                        >
+                            {sublabel || label}
+                        </DoughnutMetrics.Legend>
+                    </div>
                 </Flex>
             </Card>
         </div>