use sidebar style button for numeric filter by button (#5072)

voxel51 · Nov 8, 2024 · 2ca9d15 · 2ca9d15
1 parent 6b5eb4f
commit 2ca9d15
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 20 deletions.
diff --git a/app/packages/core/src/components/Filters/NumericFieldFilter/NumericFieldFilter.tsx b/app/packages/core/src/components/Filters/NumericFieldFilter/NumericFieldFilter.tsx
@@ -1,13 +1,13 @@
+import { LoadingDots } from "@fiftyone/components";
 import * as fos from "@fiftyone/state";
+import * as schemaAtoms from "@fiftyone/state/src/recoil/schema";
 import React, { Suspense } from "react";
 import { useRecoilValue } from "recoil";
 import styled from "styled-components";
 import FieldLabelAndInfo from "../../FieldLabelAndInfo";
+import { Button } from "../../utils";
 import RangeSlider from "./RangeSlider";
-import { Button } from "@mui/material";
-import { LoadingDots, useTheme } from "@fiftyone/components";
 import * as state from "./state";
-import * as schemaAtoms from "@fiftyone/state/src/recoil/schema";
 
 const Container = styled.div`
   margin: 3px;
@@ -20,16 +20,12 @@ const Header = styled.div`
 `;
 
 const Box = styled.div`
-  display: flex;
-  justify-content: space-between;
-  column-gap: 1rem;
   background: ${({ theme }) => theme.background.level2};
   border: 1px solid var(--fo-palette-divider);
   border-radius: 2px;
   color: ${({ theme }) => theme.text.secondary};
   margin-top: 0.25rem;
   padding: 0.25rem 0.5rem;
-  height: 30px;
 `;
 
 type Props = {
@@ -45,7 +41,6 @@ const NumericFieldFilter = ({ color, modal, named = true, path }: Props) => {
   const name = path.split(".").slice(-1)[0];
   const fieldType = useRecoilValue(schemaAtoms.filterFields(path));
   const isGroup = fieldType.length > 1;
-  const theme = useTheme();
   const [showRange, setShowRange] = React.useState(!isGroup);
   const field = fos.useAssertedRecoilValue(fos.field(path));
   const queryPerformance = useRecoilValue(fos.queryPerformance);
@@ -87,20 +82,16 @@ const NumericFieldFilter = ({ color, modal, named = true, path }: Props) => {
         {showButton ? (
           <Box>
             <Button
+              text={`Filter by ${name}`}
+              color={color}
               onClick={handleShowRange}
               style={{
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                width: "100%",
-                padding: "10px",
-                color: theme.text.secondary,
-                borderRadius: "8px",
-                border: "1px solid " + theme.secondary.main,
+                margin: "0.25rem -0.5rem",
+                height: "2rem",
+                borderRadius: 0,
+                textAlign: "center",
               }}
-            >
-              Filter by {name}
-            </Button>
+            />
           </Box>
         ) : (
           <RangeSlider color={color} modal={modal} path={path} />

diff --git a/app/packages/core/src/components/Filters/NumericFieldFilter/RangeSlider.tsx b/app/packages/core/src/components/Filters/NumericFieldFilter/RangeSlider.tsx
@@ -8,7 +8,6 @@ import FilterOption from "./FilterOption";
 import Nonfinites from "./Nonfinites";
 import Reset from "./Reset";
 import * as state from "./state";
-import Boxes from "./Boxes";
 
 const Container = styled.div`
   background: ${({ theme }) => theme.background.level2};