feat(ui): update Disk indicators visual design across console

src/components/DiskStateProgressBar/DiskStateProgressBar.scss

@@ -4,10 +4,12 @@
     $block: &;
 
     $border-width: 1px;
-    $outer-border-radius: 4px;
+    $outer-border-radius: var(--g-border-radius-s);
     $inner-border-radius: $outer-border-radius - $border-width;
+    $outer-compact-border-radius: var(--g-border-radius-xs);
+    $inner-compact-border-radius: $outer-compact-border-radius - $border-width;
 
-    --progress-bar-full-height: var(--g-text-body-3-line-height);
+    --progress-bar-full-height: var(--g-text-subheader-2-line-height);
     --progress-bar-compact-height: 12px;
 
     --stripe-width: 4px;
@@ -16,22 +18,31 @@
     position: relative;
     z-index: 0;
 
+    overflow: hidden;
+
     min-width: 50px;
     height: var(--progress-bar-full-height);
 
     text-align: center;
 
+    opacity: 0.7;
     color: var(--g-color-text-primary);
     border: $border-width solid var(--entity-state-border-color);
     border-radius: $outer-border-radius;
     background-color: var(--entity-state-background-color);
-    @include mixins.entity-state-colors();
+
+    @include mixins.entity-state-colors($block);
+
+    &:hover,
+    &_highlighted {
+        opacity: 1;
+    }
 
     &_compact {
         min-width: 0;
         height: var(--progress-bar-compact-height);
 
-        border-radius: 2px;
+        border-radius: $outer-compact-border-radius;
     }
 
     &_faded {
@@ -78,7 +89,7 @@
         }
 
         &_compact {
-            border-radius: 1px;
+            border-radius: $inner-compact-border-radius;
         }
 
         &_inverted {
@@ -93,9 +104,10 @@
         position: relative;
         z-index: 2;
 
-        margin-right: var(--g-spacing-1);
+        margin-right: var(--g-spacing-half);
 
-        font-size: var(--g-text-body-1-font-size);
+        font-family: var(--g-text-caption-font-family);
+        font-size: var(--g-text-caption-1-font-size);
         // bar height minus borders
         line-height: calc(var(--progress-bar-full-height) - #{$border-width * 2});
 
@@ -106,7 +118,7 @@
         position: relative;
         z-index: 2;
 
-        margin-left: var(--g-spacing-1);
+        margin-left: calc(var(--g-spacing-1) - $border-width);
 
         color: var(--entity-state-border-color);
     }

src/components/DiskStateProgressBar/DiskStateProgressBar.tsx

@@ -24,6 +24,7 @@ interface DiskStateProgressBarProps {
     className?: string;
     isDonor?: boolean;
     withIcon?: boolean;
+    highlighted?: boolean;
 }
 
 export function DiskStateProgressBar({
@@ -38,6 +39,7 @@ export function DiskStateProgressBar({
     className,
     isDonor,
     withIcon,
+    highlighted,
 }: DiskStateProgressBarProps) {
     const [inverted] = useSetting<boolean | undefined>(SETTING_KEYS.INVERTED_DISKS);
 
@@ -48,6 +50,7 @@ export function DiskStateProgressBar({
         empty,
         inactive,
         striped,
+        highlighted,
     };
 
     if (isDonor) {

src/components/VDisk/VDisk.tsx

@@ -64,6 +64,7 @@ export const VDisk = ({
                         isDonor={isHealthyDonor}
                         className={progressBarClassName}
                         withIcon={withIcon}
+                        highlighted={showPopup}
                     />
                 </InternalLink>
             </div>

src/containers/Storage/Disks/Disks.scss

@@ -2,7 +2,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: 20px;
+    gap: var(--g-spacing-4);
 
     width: max-content;
 
@@ -19,13 +19,13 @@
         flex-shrink: 0;
     }
     &__vdisk-progress-bar {
-        --progress-bar-compact-height: 18px;
+        --progress-bar-compact-height: 20px;
 
-        border-radius: 4px;
+        border-radius: var(--g-border-radius-m);
     }
 
     &__pdisk-item {
-        min-width: 80px;
+        min-width: 55px;
         margin-right: 4px;
 
         &_with-dc-margin {
@@ -39,6 +39,6 @@
     &__pdisk-progress-bar {
         --progress-bar-full-height: 20px;
 
-        text-align: left;
+        border-radius: var(--g-border-radius-m);
     }
 }

src/containers/Storage/Disks/Disks.tsx

@@ -16,7 +16,7 @@ import './Disks.scss';
 
 const b = cn('ydb-storage-disks');
 
-const VDISKS_CONTAINER_WIDTH = 300;
+const VDISKS_CONTAINER_WIDTH = 316;
 
 interface DisksProps {
     vDisks?: PreparedVDisk[];

src/containers/Storage/PDisk/PDisk.tsx

@@ -107,6 +107,7 @@ export const PDisk = ({
                         diskAllocatedPercent={data.AllocatedPercent}
                         severity={data.Severity}
                         className={progressBarClassName}
+                        highlighted={showPopup}
                     />
                 </InternalLink>
             </HoverPopup>

src/containers/Storage/PaginatedStorageGroupsTable/columns/columns.tsx

@@ -247,7 +247,7 @@ const getVDisksColumn = (data?: GetStorageColumnsData): StorageGroupsColumn => (
         />
     ),
     align: DataTable.CENTER,
-    width: 780, // usually 8-9 vdisks, this width corresponds to 8 vdisks, column is expanded if more
+    width: 475, // usually 8-9 vdisks, this width corresponds to 8 vdisks, column is expanded if more
     resizeable: false,
     sortable: false,
 });
@@ -267,7 +267,7 @@ const getDisksColumn = (data?: GetStorageColumnsData): StorageGroupsColumn => ({
         );
     },
     align: DataTable.CENTER,
-    width: 900,
+    width: 800,
     resizeable: false,
     sortable: false,
 });

src/containers/Storage/VDisks/VDisks.scss

@@ -4,8 +4,8 @@
     }
 
     &__item {
-        width: 90px;
-        margin-right: 6px;
+        width: 55px;
+        margin-right: var(--g-spacing-1);
 
         &_with-dc-margin {
             margin-right: 12px;

src/containers/Storage/utils/useStorageColumnsSettings.ts

@@ -5,7 +5,7 @@ import type {StorageNodesPaginatedTableData} from '../types';
 
 const PDISK_VDISK_WIDTH = 3;
 const PDISK_GAP_WIDTH = 2;
-const PDISK_MIN_WIDTH = 120;
+const PDISK_MIN_WIDTH = 165;
 const PDISK_MARGIN = 10;
 const MAX_SLOTS_DEFAULT = 1;
 const PAGNATED_TABLE_CELL_HORIZONTAL_PADDING = 10;

src/styles/mixins.scss

@@ -240,39 +240,68 @@
     }
 }
 
-@mixin entity-state-colors {
+@mixin entity-state-colors($block: null) {
     --entity-state-border-color: var(--g-color-base-misc-heavy);
     --entity-state-background-color: var(--g-color-base-misc-light);
     --entity-state-fill-color: var(--g-color-base-misc-medium);
     --entity-state-font-color: var(--g-color-text-primary);
 
     &_green {
         --entity-state-font-color: var(--g-color-text-positive);
-        --entity-state-border-color: var(--g-color-base-positive-heavy);
+        --entity-state-border-color: var(--g-color-base-positive-medium);
         --entity-state-background-color: var(--g-color-base-positive-light);
         --entity-state-fill-color: var(--g-color-base-positive-medium);
+
+        &:hover,
+        &#{$block}_highlighted {
+            --entity-state-border-color: var(--g-color-base-positive-medium-hover);
+            --entity-state-background-color: var(--g-color-base-positive-light-hover);
+            --entity-state-fill-color: var(--g-color-base-positive-heavy);
+        }
     }
 
     &_blue {
         --entity-state-font-color: var(--g-color-text-info);
         --entity-state-border-color: var(--g-color-base-info-heavy);
-        --entity-state-shadow-color: var(--g-color-base-info-light);
+        --entity-state-shadow-color: var(--g-color-base-info-medium);
         --entity-state-background-color: var(--g-color-base-info-light);
         --entity-state-fill-color: var(--g-color-base-info-medium);
+
+        &:hover,
+        &#{$block}_highlighted {
+            --entity-state-border-color: var(--g-color-base-info-heavy-hover);
+            --entity-state-shadow-color: var(--g-color-base-info-heavy);
+            --entity-state-background-color: var(--g-color-base-info-light-hover);
+            --entity-state-fill-color: var(--g-color-base-info-medium-hover);
+        }
     }
 
     &_yellow {
         --entity-state-font-color: var(--g-color-text-warning);
-        --entity-state-border-color: var(--g-color-base-warning-heavy);
-        --entity-state-background-color: var(--g-color-base-yellow-light);
-        --entity-state-fill-color: var(--g-color-base-yellow-medium);
+        --entity-state-border-color: var(--g-color-base-warning-medium);
+        --entity-state-background-color: var(--g-color-base-warning-light);
+        --entity-state-fill-color: var(--g-color-base-warning-medium);
+
+        &:hover,
+        &#{$block}_highlighted {
+            --entity-state-border-color: var(--g-color-base-warning-medium-hover);
+            --entity-state-background-color: var(--g-color-base-warning-light-hover);
+            --entity-state-fill-color: var(--g-color-base-warning-medium-hover);
+        }
     }
 
     &_red {
         --entity-state-font-color: var(--g-color-text-danger);
         --entity-state-border-color: var(--g-color-base-danger-heavy);
         --entity-state-background-color: var(--g-color-base-danger-light);
         --entity-state-fill-color: var(--g-color-base-danger-medium);
+
+        &:hover,
+        &#{$block}_highlighted {
+            --entity-state-border-color: var(--g-color-base-danger-heavy-hover);
+            --entity-state-background-color: var(--g-color-base-danger-light);
+            --entity-state-fill-color: var(--g-color-base-danger-medium-hover);
+        }
     }
 
     &_darkgrey {
@@ -281,10 +310,23 @@
         --entity-state-shadow-color: var(--g-color-base-neutral-light);
         --entity-state-fill-color: var(--g-color-base-neutral-light);
         --entity-state-background-color: transparent;
+
+        &:hover,
+        &#{$block}_highlighted {
+            --entity-state-border-color: var(--g-color-base-neutral-heavy-hover);
+            --entity-state-shadow-color: var(--g-color-base-neutral-light-hover);
+            --entity-state-fill-color: var(--g-color-base-neutral-light-hover);
+            --entity-state-background-color: transparent;
+        }
     }
 
     &__grey {
         --entity-state-font-color: var(--g-color-text-secondary);
-        --entity-state-border-color: var(--g-color-line-generic-hover);
+        --entity-state-background-color: var(--g-color-base-neutral-light-hover);
+
+        &:hover,
+        &#{$block}_highlighted {
+            --entity-state-background-color: var(--g-color-base-neutral-medium);
+        }
     }
 }