[UI] Run Wizard. Styles was fixed

Author: olgenn

frontend/src/pages/Offers/List/helpers.ts …ontend/src/pages/Offers/List/helpers.tsxfrontend/src/pages/Offers/List/helpers.ts renamed to frontend/src/pages/Offers/List/helpers.tsx frontend/src/pages/Offers/List/helpers.ts renamed to frontend/src/pages/Offers/List/helpers.tsx

@@ -1,5 +1,9 @@
+import React from 'react';
+
 import { RequestParam } from '../../../libs/filters';
 
+import styles from './styles.module.scss';
+
 const rangeSeparator = '..';
 
 export function convertMiBToGB(mib: number) {
@@ -46,6 +50,20 @@ export const renderRange = (range: { min?: number; max?: number }) => {
     return range.min?.toString() ?? range.max?.toString();
 };
 
+export const renderRangeJSX = (range: { min?: number; max?: number }) => {
+    if (typeof range.min === 'number' && typeof range.max === 'number' && range.max != range.min) {
+        return (
+            <>
+                {round(range.min)}
+                <span className={styles.greyText}>{rangeSeparator}</span>
+                {round(range.max)}
+            </>
+        );
+    }
+
+    return range.min?.toString() ?? range.max?.toString();
+};
+
 export const rangeToObject = (range: RequestParam): { min?: number; max?: number } | undefined => {
     if (!range) return;
 

frontend/src/pages/Offers/List/index.tsx

@@ -8,7 +8,7 @@ import { useGetGpusListQuery } from 'services/gpu';
 
 import { useEmptyMessages } from './hooks/useEmptyMessages';
 import { useFilters } from './hooks/useFilters';
-import { convertMiBToGB, rangeToObject, renderRange, round } from './helpers';
+import { convertMiBToGB, rangeToObject, renderRange, renderRangeJSX, round } from './helpers';
 
 import styles from './styles.module.scss';
 
@@ -133,13 +133,19 @@ export const OfferList: React.FC<OfferListProps> = ({ withSearchParams, onChange
         {
             id: 'memory_mib',
             // header: t('offer.memory_mib'),
-            content: (gpu: IGpu) => `${round(convertMiBToGB(gpu.memory_mib))}GB:${renderRange(gpu.count)}`,
+            content: (gpu: IGpu) => (
+                <div>
+                    {round(convertMiBToGB(gpu.memory_mib))}GB
+                    <span className={styles.greyText}>:</span>
+                    {renderRange(gpu.count)}
+                </div>
+            ),
             width: 50,
         },
         {
             id: 'price',
             // header: t('offer.price'),
-            content: (gpu: IGpu) => <span className={styles.greenText}>${renderRange(gpu.price) ?? '-'}</span>,
+            content: (gpu: IGpu) => <span className={styles.greenText}>${renderRangeJSX(gpu.price) ?? '-'}</span>,
             width: 50,
         },
         // {

frontend/src/pages/Offers/List/styles.module.scss

@@ -17,6 +17,10 @@
   }
 }
 
+.greyText {
+  color: awsui.$color-text-status-inactive;
+}
+
 .greenText {
   color: awsui.$color-text-status-success;
 }