wip

Author: pawelangelow

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

@@ -0,0 +1,36 @@
+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.space025};
+
+  display: flex;
+  flex-direction: column;
+
+  position: relative;
+`
+
+export const StyledContainer = styled.div`
+  flex: 1;
+  width: 100%;
+  overflow: auto;
+  color: ${({ theme }) => theme.color.gray700};
+`
+
+// .container {
+//   @include eui.scrollBar;
+//   color: var(--euiTextSubduedColor) !important;
+
+//   flex: 1;
+//   width: 100%;
+//   overflow: auto;
+// }

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

@@ -16,6 +16,7 @@ import { collectTelemetryQueryReRun } from 'uiSrc/pages/vector-search/telemetry'
 import QueryCard from '../../QueryCard'
 
 import styles from './styles.module.scss'
+import { StyledContainer, StyledWrapper } from './CommandsView.styles'
 
 export interface Props {
   isResultsLoaded: boolean
@@ -80,7 +81,7 @@ const CommandsView = (props: Props) => {
   }
 
   return (
-    <div className={styles.wrapper}>
+    <StyledWrapper>
       {!isResultsLoaded && (
         <ProgressBarLoader color="primary" data-testid="progress-wb-history" />
       )}
@@ -98,7 +99,7 @@ const CommandsView = (props: Props) => {
           </EmptyButton>
         </div>
       )}
-      <div className={cx(styles.container)}>
+      <StyledContainer>
         <div ref={scrollDivRef} />
         {items?.length
           ? items.map(
@@ -161,8 +162,8 @@ const CommandsView = (props: Props) => {
             )
           : null}
         {isResultsLoaded && !items.length && (noResultsPlaceholder ?? null)}
-      </div>
-    </div>
+      </StyledContainer>
+    </StyledWrapper>
   )
 }