wip 2

Author: pawelangelow

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

@@ -11,7 +11,7 @@ export const StyledWrapper = styled.div`
   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.space025};
+  padding-bottom: ${({ theme }) => theme.core.space.space050};
 
   display: flex;
   flex-direction: column;
@@ -24,13 +24,17 @@ export const StyledContainer = styled.div`
   width: 100%;
   overflow: auto;
   color: ${({ theme }) => theme.color.gray700};
+  //   @include eui.scrollBar;
 `
 
-// .container {
-//   @include eui.scrollBar;
-//   color: var(--euiTextSubduedColor) !important;
+export const StyledHeader = styled.div`
+  height: 42px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 0 ${({ theme }) => theme.core.space.space150};
 
-//   flex: 1;
-//   width: 100%;
-//   overflow: auto;
-// }
+  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,8 +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, StyledWrapper } from './CommandsView.styles'
+import {
+  StyledContainer,
+  StyledHeader,
+  StyledWrapper,
+} from './CommandsView.styles'
 
 export interface Props {
   isResultsLoaded: boolean
@@ -86,18 +88,17 @@ const CommandsView = (props: Props) => {
         <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>
       )}
       <StyledContainer>
         <div ref={scrollDivRef} />