add clear filters buttons

theopensystemslab · Jan 17, 2025 · e7d45da · e7d45da
1 parent c331a9e
commit e7d45da
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 5 deletions.
diff --git a/editor.planx.uk/src/pages/Filters.tsx b/editor.planx.uk/src/pages/Filters.tsx
@@ -78,7 +78,7 @@ const FiltersBody = styled(AccordionDetails)(({ theme }) => ({
 
 const FiltersContent = styled(Box)(({ theme }) => ({
   borderTop: `1px solid ${theme.palette.border.main}`,
-  padding: theme.spacing(2.5),
+  padding: theme.spacing(2.5, 2.5, 2, 2.5),
   display: "flex",
   flexDirection: "row",
   flexWrap: "wrap",

diff --git a/editor.planx.uk/src/pages/Team.tsx b/editor.planx.uk/src/pages/Team.tsx
@@ -520,7 +520,7 @@ const Team: React.FC = () => {
             formik={formik}
           />
         )}
-        {teamHasFlows && (
+        {teamHasFlows ? (
           <>
             <Box
               sx={{
@@ -530,9 +530,21 @@ const Team: React.FC = () => {
                 gap: 2,
               }}
             >
-              <Typography variant="h3" component="h2">
-                {listTitle}
-              </Typography>
+              <Box
+                sx={{
+                  display: "flex",
+                  justifyContent: "flex-start",
+                  alignItems: "center",
+                  gap: 2,
+                }}
+              >
+                <Typography variant="h3" component="h2">
+                  {listTitle}
+                </Typography>
+                {!haveFlowsBeenFiltered && (
+                  <Button variant="link">Clear filters</Button>
+                )}
+              </Box>
               {hasFeatureFlag("SORT_FLOWS") && flows && (
                 <Box sx={{ display: "flex", alignItems: "center", gap: 1.5 }}>
                   <Typography variant="body2">
@@ -562,6 +574,21 @@ const Team: React.FC = () => {
               ))}
             </DashboardList>
           </>
+        ) : (
+          <Box
+            sx={{
+              display: "flex",
+              justifyContent: "flex-start",
+              alignItems: "center",
+              gap: 2,
+              minHeight: "50px",
+            }}
+          >
+            <Typography variant="h3" textAlign="center">
+              No results
+            </Typography>
+            <Button variant="link">Clear filters</Button>
+          </Box>
         )}
         {flows && !flows.length && <GetStarted flows={flows} />}
       </Container>