fix(ClusterInfo): increase fonts (#2299)

Author: Raubzeug

src/components/Tags/Tags.tsx

@@ -12,7 +12,12 @@ interface TagsProps {
 export const Tags = ({tags, className = '', gap = 1}: TagsProps) => {
     return (
         <Flex className={className} gap={gap} wrap="wrap" alignItems="center">
-            {tags && tags.map((tag, tagIndex) => <Label key={tagIndex}>{tag}</Label>)}
+            {tags &&
+                tags.map((tag, tagIndex) => (
+                    <Label size="s" key={tagIndex}>
+                        {tag}
+                    </Label>
+                ))}
         </Flex>
     );
 };

src/containers/Cluster/ClusterInfo/ClusterInfo.scss

@@ -4,6 +4,8 @@
     --g-definition-list-item-gap: var(--g-spacing-3);
     padding: var(--g-spacing-4) 0 var(--g-spacing-2);
 
+    @include mixins.body-2-typography();
+
     &__skeleton {
         margin-top: 5px;
     }

src/containers/Cluster/ClusterInfo/ClusterInfo.tsx

@@ -57,7 +57,7 @@ export const ClusterInfo = ({
                 })}
                 {linksList.length > 0 && (
                     <DefinitionList.Item name={i18n('title_links')}>
-                        <Flex direction="column" gap={1}>
+                        <Flex direction="column" gap={2}>
                             {linksList.map(({title, url}) => {
                                 return <LinkWithIcon key={title} title={title} url={url} />;
                             })}
@@ -79,7 +79,7 @@ export const ClusterInfo = ({
     const renderDetailSection = () => {
         return (
             <InfoSection>
-                <Text as="div" variant="subheader-1" className={b('section-title')}>
+                <Text as="div" variant="subheader-2" className={b('section-title')}>
                     {i18n('title_details')}
                 </Text>
                 {renderDetailsContent()}
@@ -96,9 +96,9 @@ export const ClusterInfo = ({
         }
         return (
             <InfoSection>
-                <Text as="div" variant="subheader-1" className={b('section-title')}>
+                <Text as="div" variant="subheader-2" className={b('section-title')}>
                     {i18n('title_storage-groups')}{' '}
-                    <Text variant="subheader-1" color="secondary">
+                    <Text variant="subheader-2" color="secondary">
                         {formatNumber(total)}
                     </Text>
                 </Text>

src/containers/Cluster/ClusterInfo/components/DiskGroupsStatsBars/DiskGroupsStats.scss

@@ -1,11 +1,16 @@
+@use '../../../../../styles/mixins.scss';
+
 .ydb-disk-groups-stats {
-    --g-definition-list-item-gap: var(--g-spacing-2);
+    --g-definition-list-item-gap: var(--g-spacing-3);
+
     width: 287px;
     padding: var(--g-spacing-3) var(--g-spacing-4);
 
     border-radius: var(--g-border-radius-s);
     background-color: var(--g-color-base-generic-ultralight);
 
+    @include mixins.body-2-typography();
+
     &__progress {
         display: inline-block;
 

src/containers/Cluster/ClusterInfo/components/DiskGroupsStatsBars/DiskGroupsStats.tsx

@@ -50,7 +50,7 @@ export function DiskGroupsStats({stats, storageType}: GroupsStatsPopupContentPro
         {
             name: i18n('usage'),
             content: (
-                <Flex gap={1} alignItems="center">
+                <Flex gap={2} alignItems="center">
                     <Progress
                         theme={
                             calculatedStatusToProgressTheme[
@@ -67,10 +67,10 @@ export function DiskGroupsStats({stats, storageType}: GroupsStatsPopupContentPro
         },
     ];
     return (
-        <Flex direction="column" gap={2} className={b()}>
-            <Text>
+        <Flex direction="column" gap={3} className={b()}>
+            <Text variant="body-2">
                 {storageType}{' '}
-                <Text color="secondary">
+                <Text color="secondary" variant="body-2">
                     {`${formatNumber(stats.createdGroups)} ${i18n('context_of')} ${formatNumber(stats.totalGroups)}`}
                 </Text>
             </Text>

src/containers/Cluster/ClusterInfo/utils/utils.tsx

@@ -42,7 +42,7 @@ export const getInfo = (cluster: TClusterInfo, additionalInfo: InfoItem[]) => {
     if (dataCenters?.length) {
         info.push({
             label: i18n('label_dc'),
-            value: <Tags tags={dataCenters} gap={1} className={b('dc')} />,
+            value: <Tags tags={dataCenters} gap={2} className={b('dc')} />,
         });
     }
 
@@ -55,7 +55,7 @@ export const getInfo = (cluster: TClusterInfo, additionalInfo: InfoItem[]) => {
                 <EntityStatus.Label
                     withStatusName={false}
                     status={state as EFlag}
-                    size="xs"
+                    size="s"
                     key={state}
                     iconSize={12}
                 >
@@ -65,7 +65,7 @@ export const getInfo = (cluster: TClusterInfo, additionalInfo: InfoItem[]) => {
         });
         info.push({
             label: i18n('label_nodes-state'),
-            value: <Flex gap={1}>{nodesStates}</Flex>,
+            value: <Flex gap={2}>{nodesStates}</Flex>,
         });
     }