fix(source-node): update filter souce and node sections

stakwork · Sep 19, 2024 · 0e69c60 · 0e69c60
1 parent bf45158
commit 0e69c60
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 8 deletions.
diff --git a/src/components/App/SideBar/FilterSearch/MaxResults/index.tsx b/src/components/App/SideBar/FilterSearch/MaxResults/index.tsx
@@ -1,5 +1,7 @@
 import { Slider } from '@mui/material'
 import { HeadingWrapper, PopoverBody, SourceNodesStepWrapper, SubHeading, VolumeControl } from '../index'
+import styled from 'styled-components'
+import { colors } from '~/utils'
 
 type MaxResultsProps = {
   maxResults: number
@@ -21,22 +23,29 @@ export const MaxResults = ({ maxResults, setMaxResults }: MaxResultsProps) => {
       </HeadingWrapper>
       <PopoverBody>
         <SourceNodesStepWrapper>
-          <span>1</span>
-          <span>{maxResults}</span>
+          <span>0</span>
+          <span>300</span>
         </SourceNodesStepWrapper>
         <VolumeControl direction="row">
-          <Slider
+          <CustomSlider
             className="volume-slider"
             data-testid="max-results-slider"
             max={300}
-            min={1}
+            min={0}
             onChange={MaxResultsChangeHandler}
             size="medium"
             step={1}
             value={maxResults}
+            valueLabelDisplay="on"
           />
         </VolumeControl>
       </PopoverBody>
     </>
   )
 }
+
+const CustomSlider = styled(Slider)({
+  '& .MuiSlider-valueLabel': {
+    backgroundColor: `${colors.primaryBlue}`,
+  },
+})
diff --git a/src/components/App/SideBar/FilterSearch/SourceNodes/index.tsx b/src/components/App/SideBar/FilterSearch/SourceNodes/index.tsx
@@ -1,4 +1,6 @@
 import { Slider } from '@mui/material'
+import styled from 'styled-components'
+import { colors } from '~/utils/colors'
 import { HeadingWrapper, PopoverBody, SourceNodesStepWrapper, SubHeading, VolumeControl } from '../index'
 
 type SourceNodesProps = {
@@ -21,22 +23,29 @@ export const SourceNodes = ({ sourceNodes, setSourceNodes }: SourceNodesProps) =
       </HeadingWrapper>
       <PopoverBody>
         <SourceNodesStepWrapper>
-          <span>1</span>
-          <span>{sourceNodes}</span>
+          <span>0</span>
+          <span>100</span>
         </SourceNodesStepWrapper>
         <VolumeControl direction="row">
-          <Slider
+          <CustomSlider
             className="volume-slider"
             data-testid="source-nodes-slider"
             max={100}
-            min={1}
+            min={0}
             onChange={SourceNodesChangeHandler}
             size="medium"
             step={1}
             value={sourceNodes}
+            valueLabelDisplay="on"
           />
         </VolumeControl>
       </PopoverBody>
     </>
   )
 }
+
+const CustomSlider = styled(Slider)({
+  '& .MuiSlider-valueLabel': {
+    backgroundColor: `${colors.primaryBlue}`,
+  },
+})