RI-7294: Fix borders style (#4834)

Author: pawelangelow

redisinsight/ui/src/pages/vector-search/components/commands-view/CommandsView/CommandsView.styles.ts

@@ -0,0 +1,39 @@
+import styled from 'styled-components'
+
+/* TODO: use theme when it supports theme.semantic.core.radius */
+// to replace var(--border-radius-medium)
+export const StyledWrapper = styled.div`
+  flex: 1;
+  height: calc(100% - var(--border-radius-medium));
+  width: 100%;
+  background-color: ${({ theme }) =>
+    theme.semantic?.color.background.neutral100};
+  border: 1px solid ${({ theme }) => theme.semantic.color.border.neutral500};
+  border-radius: var(--border-radius-medium);
+  // HACK: to fix rectangle like view in rounded borders wrapper
+  padding-bottom: ${({ theme }) => theme.core.space.space050};
+
+  display: flex;
+  flex-direction: column;
+
+  position: relative;
+`
+
+export const StyledContainer = styled.div`
+  flex: 1;
+  width: 100%;
+  overflow: auto;
+  color: ${({ theme }) => theme.color.gray700};
+`
+
+export const StyledHeader = styled.div`
+  height: 42px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 0 ${({ theme }) => theme.core.space.space150};
+
+  flex-shrink: 0;
+  border-bottom: 1px solid
+    ${({ theme }) => theme.semantic.color.border.neutral500};
+`

redisinsight/ui/src/pages/vector-search/components/commands-view/CommandsView/CommandsView.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import cx from 'classnames'
 import { useParams } from 'react-router-dom'
 
 import { CodeButtonParams } from 'uiSrc/constants'
@@ -15,7 +14,11 @@ import { ProgressBarLoader } from 'uiSrc/components/base/display'
 import { collectTelemetryQueryReRun } from 'uiSrc/pages/vector-search/telemetry'
 import QueryCard from '../../QueryCard'
 
-import styles from './styles.module.scss'
+import {
+  StyledContainer,
+  StyledHeader,
+  StyledWrapper,
+} from './CommandsView.styles'
 
 export interface Props {
   isResultsLoaded: boolean
@@ -80,25 +83,24 @@ const CommandsView = (props: Props) => {
   }
 
   return (
-    <div className={styles.wrapper}>
+    <StyledWrapper>
       {!isResultsLoaded && (
         <ProgressBarLoader color="primary" data-testid="progress-wb-history" />
       )}
       {!!items?.length && (
-        <div className={styles.header}>
+        <StyledHeader>
           <EmptyButton
             size="small"
             icon={DeleteIcon}
-            className={styles.clearAllBtn}
             onClick={() => onAllQueriesDelete?.()}
             disabled={clearing || processing}
             data-testid="clear-history-btn"
           >
             Clear Results
           </EmptyButton>
-        </div>
+        </StyledHeader>
       )}
-      <div className={cx(styles.container)}>
+      <StyledContainer>
         <div ref={scrollDivRef} />
         {items?.length
           ? items.map(
@@ -161,8 +163,8 @@ const CommandsView = (props: Props) => {
             )
           : null}
         {isResultsLoaded && !items.length && (noResultsPlaceholder ?? null)}
-      </div>
-    </div>
+      </StyledContainer>
+    </StyledWrapper>
   )
 }
 

redisinsight/ui/src/pages/vector-search/components/commands-view/CommandsView/styles.module.scss

@@ -12,7 +12,7 @@
 .container {
   display: flex;
   flex-direction: column;
-  padding: 8px 16px;
+  padding: 16px;
   width: 100%;
   height: 100%;
   word-break: break-word;
@@ -21,6 +21,7 @@
   background-color: var(--rsInputWrapperColor);
   color: var(--euiTextSubduedColor) !important;
   border: 1px solid var(--euiColorLightShade);
+  border-radius: var(--border-radius-medium);
 }
 
 .disabled {
@@ -62,7 +63,7 @@
   align-items: center;
   justify-content: space-between;
 
-  margin-top: 8px;
+  margin-top: 16px;
   flex-shrink: 0;
 }
 

redisinsight/ui/src/pages/workbench/components/query/Query/styles.module.scss

@@ -1,9 +1,12 @@
 .wrapper {
   flex: 1;
-  height: 100%;
+  height: calc(100% - var(--border-radius-medium));
   width: 100%;
   background-color: var(--euiColorEmptyShade);
   border: 1px solid var(--euiColorLightShade);
+  border-radius: var(--border-radius-medium);
+  // HACK: to fix rectangle like view in rounded borders wrapper
+  padding-bottom: var(--border-radius-medium);
 
   display: flex;
   flex-direction: column;

redisinsight/ui/src/pages/workbench/components/wb-results/WBResults/styles.module.scss

@@ -19,12 +19,6 @@
   width: 100%;
 }
 
-.queryResults {
-  & > div {
-    border-bottom-width: 0;
-  }
-}
-
 :global(.show-cli) {
   .queryResults {
     & > div {