Fe/feature/ri 7269 fix major discrepancies between the ds previews and the implementation around the main content under the new navigation (#4784)

* RI-7269 - Fix major discrepancies between the DS previews and the implementation around the main content under the new navigation - added border above the new navigation

* RI-7269 - Fix major discrepancies between the DS previews and the implementation around the main content under the new navigation - updated main content brackgrounds to use the proper colors

* RI-7269 - Fix major discrepancies between the DS previews and the implementation around the main content under the new navigation - added borders to the keys list and key details to mimic the new DS

* RI-7269 - Fix major discrepancies between the DS previews and the implementation around the main content under the new navigation - removed background for the bottom buttons (add, cancel, save, etc). In the new DS there is no different BG and it only makes it mroe complciated to keep track

* RI-7269 - Fix major discrepancies between the DS previews and the implementation around the main content under the new navigation - add padding on top of the search bar to distance it from the new navigation

* RI-7269 - Fix major discrepancies between the DS previews and the implementation around the main content under the new navigation - updated the cli row to look like the previews

* RI-7269 - Fix major discrepancies between the DS previews and the implementation around the main content under the new navigation - updated spacing under the navigation to be handled in one place

* RI-7269 - Fix major discrepancies between the DS previews and the implementation around the main content under the new navigation - fixed paddings for the CLI row

* RI-7269 - Fix major discrepancies between the DS previews and the implementation around the main content under the new navigation - Updated uses of theme to be through useTheme, instead of a direct import

Author: Kristiyan Ivanov

redisinsight/ui/src/components/bottom-group-components/styles.module.scss

@@ -1,7 +1,7 @@
 .groupComponentsWrapper {
   flex-grow: 1;
   height: 100%;
-  padding: 0 16px;
+  padding: 0 16px 16px 16px;
 }
 
 .groupComponents {
@@ -14,8 +14,7 @@
   display: flex;
   align-items: center;
   height: 26px;
-  line-height: 26px;
-  border: 1px solid var(--euiColorLightShade);
+  line-height: 26px;  
 
   .surveyLink {
     display: flex;

redisinsight/ui/src/components/instance-header/InstanceHeader.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory } from 'react-router-dom'
 import cx from 'classnames'
+import { useTheme } from '@redis-ui/styles'
 
 import { FeatureFlags, Pages } from 'uiSrc/constants'
 import { selectOnFocus } from 'uiSrc/utils'
@@ -54,6 +55,7 @@ export interface Props {
 }
 
 const InstanceHeader = ({ onChangeDbIndex }: Props) => {
+  const theme = useTheme()
   const {
     name = '',
     host = '',
@@ -130,7 +132,12 @@ const InstanceHeader = ({ onChangeDbIndex }: Props) => {
   }
 
   return (
-    <div className={cx(styles.container)}>
+    <div
+      className={cx(styles.container)}
+      style={{
+        borderBottom: theme.components.sideBar.collapsed.borderRight,
+      }}
+    >
       <Row
         responsive
         align="center"

redisinsight/ui/src/pages/browser/BrowserPage.tsx

@@ -4,6 +4,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import cx from 'classnames'
 
 import { isNumber } from 'lodash'
+import { useTheme } from '@redis-ui/styles'
 import {
   formatLongName,
   getDbIndex,
@@ -72,7 +73,7 @@ const isOneSideMode = (isInsightsOpen: boolean) =>
 
 const BrowserPage = () => {
   const { instanceId } = useParams<{ instanceId: string }>()
-
+  const theme = useTheme()
   const {
     name: connectedInstanceName,
     db = 0,
@@ -330,6 +331,10 @@ const BrowserPage = () => {
                 arePanelsCollapsed ||
                 (isBrowserFullScreen && !isRightPanelOpen),
             })}
+            style={{
+              border: `1px solid ${theme.semantic.color.border.neutral500}`,
+              borderRadius: `8px`,
+            }}
           >
             <UploadModal >{<div>test</div>}</UploadModal>
             <BrowserLeftPanel
@@ -353,6 +358,10 @@ const BrowserPage = () => {
               [styles.keyDetails]:
                 arePanelsCollapsed || (isRightPanelOpen && isBrowserFullScreen),
             })}
+            style={{
+              border: `1px solid ${theme.semantic.color.border.neutral500}`,
+              borderRadius: `5px`,
+            }}
           >
             <BrowserRightPanel
               arePanelsCollapsed={arePanelsCollapsed}

redisinsight/ui/src/styles/components/_forms.scss

@@ -13,7 +13,7 @@
 .formFooterBar {
   position: absolute;
   bottom: 0;
-  background: var(--browserTableRowEven);
+  // background: var(--browserTableRowEven);
   border-style: solid;
   border-width: 0;
   border-color: var(--euiColorLightShade);

redisinsight/ui/src/styles/themes/dark_theme/_theme_color.scss

@@ -44,7 +44,7 @@ $euiColorWarningText: #ce4841;
 $euiColorWarningLight: #d8ab52;
 $euiTextSubduedColor: #b5b6c0;
 $euiTextSubduedColorHover: #dfe5ef;
-$euiPageBackgroundColor: #010101;
+$euiPageBackgroundColor: #121212;
 $euiTooltipBackgroundColor: #333d4f;
 $euiTooltipTextColor: #ffffff;
 $euiTooltipTextSecondColor: #e4e9f1;

redisinsight/ui/src/styles/themes/light_theme/_theme_color.scss

@@ -11,7 +11,7 @@ $euiColorWarning: #9d6901;
 $euiColorWarningText: #9d6901;
 $euiTextSubduedColor: #415681;
 $euiTextSubduedColorHover: #173369;
-$euiPageBackgroundColor: #edf0f5;
+$euiPageBackgroundColor: #ffffff;
 $euiTooltipBackgroundColor: #ffffff;
 $euiTooltipTextColor: #173369;
 $euiTooltipTextSecondColor: #395b88;

redisinsight/ui/src/templates/instance-page-template/InstancePageTemplate.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { useSelector } from 'react-redux'
+import { useTheme } from '@redis-ui/styles'
 import InstanceHeader from 'uiSrc/components/instance-header'
 import { ExplorePanelTemplate } from 'uiSrc/templates'
 import BottomGroupComponents from 'uiSrc/components/bottom-group-components/BottomGroupComponents'
@@ -12,6 +13,7 @@ import {
   ResizableContainer,
   ResizablePanel,
   ResizablePanelHandle,
+  Spacer,
 } from 'uiSrc/components/base/layout'
 import { ImperativePanelGroupHandle } from 'uiSrc/components/base/layout/resize'
 import { AppNavigation } from 'uiSrc/components'
@@ -51,6 +53,7 @@ const roundUpSizes = (sizes: number[]) => [
 
 const InstancePageTemplate = (props: Props) => {
   const { children } = props
+  const theme = useTheme()
   const [sizes, setSizes] = useState<number[]>(getDefaultSizes())
 
   const { isShowCli, isShowHelper } = useSelector(cliSettingsSelector)
@@ -100,6 +103,7 @@ const InstancePageTemplate = (props: Props) => {
     <>
       <InstanceHeader />
       <AppNavigation actions={actions} onChange={() => setActions(null)} />
+      <Spacer size="m" />
       <ResizableContainer
         ref={ref}
         direction="vertical"
@@ -126,11 +130,15 @@ const InstancePageTemplate = (props: Props) => {
           data-testid="resize-btn-browser-cli"
           style={{ display: isShowBottomGroup ? 'inherit' : 'none' }}
         />
+        <Spacer size="m" />
         <ResizablePanel
           id={secondPanelId}
           defaultSize={isShowBottomGroup ? sizes[1] : sizeBottomCollapsed}
           minSize={isShowBottomGroup ? 20 : 0}
           data-testid={secondPanelId}
+          style={{
+            borderTop: `1px solid ${theme.semantic.color.border.neutral500}`,
+          }}
         >
           <BottomGroupComponents />
         </ResizablePanel>