RI-7400: Change font size/colors across the app #1 (#4992)

* RI-7400: key details for all key types

* RI-7400: fix color for set members

* RI-7400: resolve review comments

Author: ArtemHoruzhenko

redisinsight/ui/src/components/virtual-grid/VirtualGrid.tsx

@@ -153,7 +153,11 @@ const VirtualGrid = (props: IProps) => {
     preventSelect = true
   }
 
-  const renderNotEmptyContent = (text: string) => text || <div>&nbsp;</div>
+  const renderNotEmptyContent = (text: string) => (
+    <Text color="primary" component="span" variant="semiBold">
+      {text || <>&nbsp;</>}
+    </Text>
+  )
 
   const Cell = ({
     columnIndex,
@@ -371,7 +375,7 @@ const VirtualGrid = (props: IProps) => {
         </AutoSizer>
       )}
       {items.length === 1 && (
-        <Text className={styles.noItems} color="subdued">
+        <Text className={styles.noItems}>
           {loading ? loadingMsg : noItemsMessage}
         </Text>
       )}

redisinsight/ui/src/components/virtual-table/VirtualTable.tsx

@@ -383,7 +383,7 @@ const VirtualTable = (props: IProps) => {
           className={styles.tableRowCell}
           style={{ justifyContent: column.alignment, whiteSpace: 'normal' }}
         >
-          <Text color="subdued" style={{ maxWidth: '100%' }}>
+          <Text style={{ maxWidth: '100%' }}>
             <div
               style={{ display: 'flex' }}
               className={column.truncateText ? 'truncateText' : ''}
@@ -436,7 +436,7 @@ const VirtualTable = (props: IProps) => {
               data-testid="score-button"
               style={{ justifyContent: column.alignment }}
             >
-              <Text size="m" className={cellClass}>
+              <Text size="m" className={cellClass}  variant="semiBold">
                 <span>{column.label}</span>
               </Text>
             </button>
@@ -454,7 +454,7 @@ const VirtualTable = (props: IProps) => {
                 flex: '1',
               }}
             >
-              <Text size="m" className={cellClass}>
+              <Text size="m" className={cellClass} variant="semiBold">
                 <span>{column.label}</span>
               </Text>
             </div>

redisinsight/ui/src/pages/browser/modules/key-details/components/hash-details/hash-details-table/HashDetailsTable.tsx

@@ -382,8 +382,7 @@ const HashDetailsTable = (props: Props) => {
         )
 
         return (
-          <Text
-            size="s"
+          <Text color="secondary"
             style={{ maxWidth: '100%', whiteSpace: 'break-spaces' }}
             component="div"
           >

redisinsight/ui/src/pages/browser/modules/key-details/components/list-details/list-details-table/ListDetailsTable.tsx

@@ -262,7 +262,7 @@ const ListDetailsTable = () => {
         const cellContent = index?.toString().substring(0, 200)
         const tooltipContent = formatLongName(index?.toString())
         return (
-          <Text color="subdued" size="s" style={{ maxWidth: '100%' }}>
+          <Text color="secondary" style={{ maxWidth: '100%' }}>
             <div
               style={{ display: 'flex' }}
               className="truncateText"

redisinsight/ui/src/pages/browser/modules/key-details/components/set-details/set-details-table/SetDetailsTable.tsx

@@ -242,9 +242,8 @@ const SetDetailsTable = (props: Props) => {
 
         return (
           <Text
+            color="secondary"
             component="div"
-            color="subdued"
-            size="s"
             style={{ maxWidth: '100%', whiteSpace: 'break-spaces' }}
           >
             <div

redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/consumers-view/ConsumersViewWrapper.tsx

@@ -127,7 +127,7 @@ const ConsumersViewWrapper = (props: Props) => {
         const cellContent = viewName.substring(0, 200)
         const tooltipContent = formatLongName(viewName)
         return (
-          <Text color="subdued" size="s" style={{ maxWidth: '100%' }}>
+          <Text style={{ maxWidth: '100%' }} color="secondary">
             <div
               style={{ display: 'flex' }}
               className="truncateText"
@@ -156,6 +156,7 @@ const ConsumersViewWrapper = (props: Props) => {
       isSortable: true,
       headerClassName: 'streamItemHeader',
       headerCellClassName: 'truncateText',
+      render: (cellData: number) => <Text color="secondary">{cellData}</Text>,
     },
     {
       id: 'idle',
@@ -168,7 +169,7 @@ const ConsumersViewWrapper = (props: Props) => {
       className: styles.cell,
       headerClassName: 'streamItemHeader',
       headerCellClassName: 'truncateText',
-      render: (cellData: number) => numberWithSpaces(cellData),
+      render: (cellData: number) => <Text color="secondary">{numberWithSpaces(cellData)}</Text>,
     },
     {
       id: 'actions',

redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/groups-view/GroupsViewWrapper.tsx

@@ -221,7 +221,7 @@ const GroupsViewWrapper = (props: Props) => {
         const cellContent = viewName.substring(0, 200)
         const tooltipContent = formatLongName(viewName)
         return (
-          <Text color="subdued" size="s" style={{ maxWidth: '100%' }}>
+          <Text style={{ maxWidth: '100%' }} color="secondary">
             <div
               style={{ display: 'flex' }}
               className="truncateText"
@@ -250,6 +250,14 @@ const GroupsViewWrapper = (props: Props) => {
       isSortable: true,
       headerClassName: 'streamItemHeader',
       headerCellClassName: 'truncateText',
+      render: function Name(_name: string, { consumers }: IConsumerGroup) {
+        return (
+          <Text color="secondary">
+            {consumers}
+          </Text>
+        )
+      },
+
     },
     {
       id: 'pending',
@@ -278,7 +286,7 @@ const GroupsViewWrapper = (props: Props) => {
         )
 
         return (
-          <Text size="s" style={{ maxWidth: '100%' }}>
+          <Text style={{ maxWidth: '100%' }} color="secondary">
             <div
               style={{ display: 'flex' }}
               className="truncateText"
@@ -324,7 +332,7 @@ const GroupsViewWrapper = (props: Props) => {
             content={
               <div className={styles.editableCell}>
                 <Text
-                  color="subdued"
+                  color="secondary"
                   size="s"
                   style={{ maxWidth: '100%' }}
                   component="div"

redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/messages-view/MessagesViewWrapper.tsx

@@ -126,7 +126,7 @@ const MessagesViewWrapper = (props: Props) => {
         return (
           <FlexItem>
             <Text
-              color="subdued"
+              color="secondary"
               size="s"
               style={{ maxWidth: '100%' }}
               className="truncateText streamItem"
@@ -159,7 +159,7 @@ const MessagesViewWrapper = (props: Props) => {
         return (
           <Text
             className="truncateText streamItem"
-            color="subdued"
+            color="secondary"
             size="s"
             data-testid={`stream-message-${id}-idle`}
             style={{ maxWidth: '100%' }}
@@ -176,6 +176,7 @@ const MessagesViewWrapper = (props: Props) => {
       truncateText: true,
       headerClassName: cx('streamItemHeader', styles.deliveredHeaderCell),
       headerCellClassName: 'truncateText',
+      render: (cellData: number) => <Text color="secondary">{cellData}</Text>,
     },
     {
       id: 'actions',

redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/stream-data-view/StreamDataViewWrapper.tsx

@@ -153,15 +153,17 @@ const StreamDataViewWrapper = (props: Props) => {
                       }}
                       data-testid={`stream-field-name-${field}`}
                     >
-                      <FormattedValue
-                        value={formattedValue}
-                        title={
-                          isValid
-                            ? 'Field'
-                            : TEXT_FAILED_CONVENT_FORMATTER(viewFormatProp)
-                        }
-                        tooltipContent={tooltipContent}
-                      />
+                      <Text variant="semiBold" color="primary">
+                        <FormattedValue
+                          value={formattedValue}
+                          title={
+                            isValid
+                              ? 'Field'
+                              : TEXT_FAILED_CONVENT_FORMATTER(viewFormatProp)
+                          }
+                          tooltipContent={tooltipContent}
+                        />
+                      </Text>
                     </div>
                   ) : (
                     <div>&nbsp;</div>
@@ -281,9 +283,9 @@ const StreamDataViewWrapper = (props: Props) => {
 
       return (
         <Text
-          size="s"
           style={{ maxWidth: '100%', minHeight: '36px' }}
           component="div"
+          color="secondary"
         >
           <div
             style={{ display: 'flex', whiteSpace: 'break-spaces' }}
@@ -324,8 +326,8 @@ const StreamDataViewWrapper = (props: Props) => {
         <div style={{ minHeight: '38px' }}>
           {id.length < MAX_VISIBLE_LENGTH_STREAM_TIMESTAMP && (
             <Text
-              color="subdued"
               size="s"
+              color="secondary"
               style={{ maxWidth: '100%' }}
               component="div"
             >

redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/stream-details-body/styles.module.scss

@@ -82,7 +82,6 @@ $cellPaddingWidth: 12px;
 }
 
 :global(.streamItem) {
-  color: var(--euiTextSubduedColor) !important;
   white-space: normal;
   max-width: 100%;
   word-break: break-all;