#RI-2062 update styles

Author: Artyom Podymov

redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/EnablementArea.tsx

@@ -76,8 +76,8 @@ const EnablementArea = ({ items, openScript, loading }: Props) => {
         )
       case EnablementAreaComponent.CodeButton:
         return args?.path
-          ? <LazyCodeButton label={label} {...args} />
-          : <CodeButton onClick={() => openScript(args?.content || '', '')} label={label} {...args} />
+          ? <div style={{ marginTop: '16px' }}><LazyCodeButton label={label} {...args} /></div>
+          : <div style={{ marginTop: '16px' }}><CodeButton onClick={() => openScript(args?.content || '', '')} label={label} {...args} /></div>
       case EnablementAreaComponent.InternalLink:
         return (
           <InternalLink testId={id || label} label={label} {...args}>
@@ -91,7 +91,7 @@ const EnablementArea = ({ items, openScript, loading }: Props) => {
 
   const renderTreeView = (elements: IEnablementAreaItem[]) => (
     elements?.map((item) => (
-      <div className={styles.item} key={item.id}>
+      <div className="fluid" key={item.id}>
         {renderSwitch(item)}
       </div>
     )))

redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Carousel/Carousel.spec.tsx

@@ -20,7 +20,7 @@
   .euiAccordion-isOpen {
     min-width: 100%;
     &.withBorder {
-      border-color: var(--separatorColor)
+      border-color: var(--separatorColor);
     }
   }
   .euiAccordion__triggerWrapper, .euiAccordion__childWrapper {
@@ -34,9 +34,15 @@
       button {
         padding: 3px 8px;
         line-height: 24px;
+        max-height: 30px;
+        &:hover {
+          background-color: var(--hoverInListColorLight);
+          color: var(--euiTextColor)
+        }
       }
       .euiListGroupItem__label {
-       line-height: 20px;
+        font: normal normal normal 14px/20px Graphik;
+        letter-spacing: -0.14px;
       }
     }
   }

redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Carousel/Carousel.tsx

@@ -31,4 +31,5 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  line-height: 24px;
 }

redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Carousel/index.ts

@@ -1,20 +1,16 @@
 import React, { useMemo, useRef, useEffect } from 'react'
 import {
-  EuiFlexGroup,
-  EuiFlexItem,
   EuiFlyoutHeader,
-  EuiTitle,
   EuiText,
-  EuiButtonIcon,
-  EuiLoadingContent,
+  EuiButtonEmpty,
+  EuiLoadingContent, EuiHorizontalRule,
 } from '@elastic/eui'
 import JsxParser from 'react-jsx-parser'
 import cx from 'classnames'
 import { debounce } from 'lodash'
 
 import {
   LazyCodeButton,
-  Carousel,
   InternalLink,
   Image,
   EmptyPrompt, Pagination
@@ -38,7 +34,7 @@ export interface Props {
 }
 const InternalPage = (props: Props) => {
   const { onClose, title, backTitle, isLoading, error, content, onScroll, scrollTop, pagination, id } = props
-  const components: any = { LazyCodeButton, Carousel, InternalLink, Image }
+  const components: any = { LazyCodeButton, InternalLink, Image }
   const containerRef = useRef<HTMLDivElement>(null)
   const handleScroll = debounce(() => {
     if (containerRef.current && onScroll) {
@@ -66,28 +62,23 @@ const InternalPage = (props: Props) => {
   return (
     <div className={styles.container} data-test-subj="internal-page">
       <EuiFlyoutHeader className={styles.header}>
-        <EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
-          <EuiFlexItem grow={false}>
-            <EuiButtonIcon
-              data-testid="enablement-area__page-close"
-              iconType="arrowLeft"
-              onClick={onClose}
-              aria-label="Back"
-            />
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <div>
-              <EuiText size="s" color="subdued" style={{ fontWeight: 'normal' }}>{backTitle}</EuiText>
-            </div>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-        <EuiFlexGroup style={{ padding: '0 8px' }} responsive={false} gutterSize="s" alignItems="center">
-          <EuiFlexItem grow={false}>
-            <EuiTitle>
-              <EuiText size="s" color="default" style={{ fontWeight: 'normal' }}>{title?.toUpperCase()}</EuiText>
-            </EuiTitle>
-          </EuiFlexItem>
-        </EuiFlexGroup>
+        <div style={{ padding: 0 }}>
+          <EuiButtonEmpty
+            data-testid="enablement-area__page-close"
+            iconType="arrowLeft"
+            onClick={onClose}
+            className={styles.backButton}
+            aria-label="Back"
+          >
+            {backTitle}
+          </EuiButtonEmpty>
+        </div>
+        <div>
+          <EuiHorizontalRule margin="xs" />
+        </div>
+        <div>
+          <EuiText className={styles.pageTitle} color="default">{title?.toUpperCase()}</EuiText>
+        </div>
       </EuiFlyoutHeader>
       <div ref={containerRef} className={cx(styles.content, 'enablement-area__page')} onScroll={handleScroll}>
         { isLoading && <EuiLoadingContent data-testid="enablement-area__page-loader" lines={3} /> }

redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Carousel/styles.module.scss

@@ -15,23 +15,47 @@
 }
 
 .header {
-  padding: 10px 4px;
+  padding: 6px 0;
   width: 100%;
   background-color: var(--euiColorEmptyShade);
+  & > div {
+    width: 100%;
+    padding: 0 18px;
+  }
 }
 
 .footer {
   width: 100%;
   background-color: var(--euiColorEmptyShade);
 }
-
-
+.pageTitle {
+  margin: 8px 0 4px;
+  font: normal normal 500 14px/24px Graphik, sans-serif;
+}
+.backButton {
+  padding: 0 4px;
+  max-height: 30px;
+  line-height: 24px;
+  width: 100%;
+  font: normal normal 14px/24px Graphik, sans-serif !important;
+  text-decoration: none;
+  color: var(--euiTextSubduedColor) !important;
+  & > span {
+    justify-content: flex-start;
+  }
+  &:hover {
+    background-color: var(--hoverInListColorLight);
+    color: var(--euiTextColor) !important;
+    text-decoration: none !important;
+  }
+}
 .content {
   @include euiScrollBar;
-  padding: 14px 12px 4px 12px !important;
+  padding: 8px 12px 4px 18px !important;
   overflow: auto;
   display: flex;
   flex-direction: column;
   flex: 1;
 }
 
+

redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/Group/styles.scss

@@ -1,13 +1,22 @@
+@mixin font{
+  font: normal normal normal 14px/24px Graphik;
+  letter-spacing: -0.14px;
+  @media only screen and (max-width: 992px) {
+    font: normal normal normal 12px/18px Graphik;
+    letter-spacing: -0.12px;
+  }
+}
+
 .enablement-area__page {
   height: 100%;
-  font: normal normal normal 12px/18px Graphik;
+  @include font;
   letter-spacing: -0.12px;
 
   h1, h2, h3, h4, h5, h6 {
     color: var(--euiColorGhost);
-    font: normal normal medium 12px/16px Graphik;
+    font: normal normal 500 14px/24px Graphik;
     margin-bottom: 12px;
-    letter-spacing: -0.12px;
+    letter-spacing: 0;
   }
 
   p {
@@ -22,7 +31,7 @@
     }
   }
   b, strong {
-    font: normal normal normal 12px/16px Graphik;
+    @include font;
     letter-spacing: -0.12px;
     color: var(--htmlColor);
   }