From 525230b25cc8041adf4cd0dcca62917ef7b8490e Mon Sep 17 00:00:00 2001
From: James Kachel <james@jkachel.com>
Date: Tue, 25 Jun 2024 12:08:09 -0500
Subject: [PATCH] Adds a separate pane for the filter CTAs, adds an apply
 button on mobile (#1144)

---
 .../SearchDisplay/SearchDisplay.tsx           | 38 ++++++++++++-------
 .../src/components/Button/Button.stories.tsx  | 15 +++++++-
 .../src/components/Button/Button.tsx          | 19 +++++++++-
 3 files changed, 57 insertions(+), 15 deletions(-)

diff --git a/frontends/mit-open/src/page-components/SearchDisplay/SearchDisplay.tsx b/frontends/mit-open/src/page-components/SearchDisplay/SearchDisplay.tsx
index 66dfa8c0a1..85850e2387 100644
--- a/frontends/mit-open/src/page-components/SearchDisplay/SearchDisplay.tsx
+++ b/frontends/mit-open/src/page-components/SearchDisplay/SearchDisplay.tsx
@@ -408,10 +408,13 @@ const StyledDrawer = styled(Drawer)`
   }
 `
 
-const MobileClearAllButton = styled(Button)`
-  background-color: white;
-  padding: 12px;
-  border-radius: 4px;
+const MobileFacetSearchButtons = styled.div`
+  display: flex;
+  gap: 12px;
+
+  & > button {
+    flex: 1;
+  }
 `
 
 const MobileDrawerCloseButton = styled(Button)`
@@ -659,15 +662,6 @@ const SearchDisplay: React.FC<SearchDisplayProps> = ({
                       <div>
                         <Typography variant="subtitle3">Filter</Typography>
                       </div>
-                      {hasFacets ? (
-                        <MobileClearAllButton
-                          variant="text"
-                          size="small"
-                          onClick={clearAllFacets}
-                        >
-                          Clear all
-                        </MobileClearAllButton>
-                      ) : null}
                     </div>
                     <MobileDrawerCloseButton
                       size="large"
@@ -678,6 +672,24 @@ const SearchDisplay: React.FC<SearchDisplayProps> = ({
                       <RiCloseLine fontSize="inherit" />
                     </MobileDrawerCloseButton>
                   </MobileFacetsTitleContainer>
+                  {hasFacets ? (
+                    <MobileFacetSearchButtons>
+                      <Button
+                        variant="primary"
+                        size="small"
+                        onClick={toggleMobileDrawer(false)}
+                      >
+                        Apply Filters
+                      </Button>
+                      <Button
+                        variant="noBorder"
+                        size="small"
+                        onClick={clearAllFacets}
+                      >
+                        Clear All
+                      </Button>
+                    </MobileFacetSearchButtons>
+                  ) : null}
                   {filterContents}
                 </StyledDrawer>
                 <MobileSortContainer>{sortDropdown}</MobileSortContainer>
diff --git a/frontends/ol-components/src/components/Button/Button.stories.tsx b/frontends/ol-components/src/components/Button/Button.stories.tsx
index 42e15ffa07..7d2872c4bb 100644
--- a/frontends/ol-components/src/components/Button/Button.stories.tsx
+++ b/frontends/ol-components/src/components/Button/Button.stories.tsx
@@ -27,7 +27,14 @@ const meta: Meta<typeof Button> = {
   component: Button,
   argTypes: {
     variant: {
-      options: ["primary", "secondary", "tertiary", "text"],
+      options: [
+        "primary",
+        "secondary",
+        "tertiary",
+        "text",
+        "inverted",
+        "text-secondary",
+      ],
       control: { type: "select" },
     },
     size: {
@@ -82,6 +89,12 @@ export const VariantStory: Story = {
       <Button {...args} variant="text">
         Text
       </Button>
+      <Button {...args} variant="noBorder">
+        Text Secondary
+      </Button>
+      <Button {...args} variant="inverted">
+        Inverted
+      </Button>
     </Stack>
   ),
 }
diff --git a/frontends/ol-components/src/components/Button/Button.tsx b/frontends/ol-components/src/components/Button/Button.tsx
index 15d75b65fc..21b775ec88 100644
--- a/frontends/ol-components/src/components/Button/Button.tsx
+++ b/frontends/ol-components/src/components/Button/Button.tsx
@@ -5,7 +5,13 @@ import tinycolor from "tinycolor2"
 import { Link } from "react-router-dom"
 import type { Theme } from "@mui/material/styles"
 
-type ButtonVariant = "primary" | "secondary" | "tertiary" | "text" | "inverted"
+type ButtonVariant =
+  | "primary"
+  | "secondary"
+  | "tertiary"
+  | "text"
+  | "noBorder"
+  | "inverted"
 type ButtonSize = "small" | "medium" | "large"
 type ButtonEdge = "circular" | "rounded" | "none"
 
@@ -133,6 +139,17 @@ const ButtonStyled = styled.button<ButtonStyleProps>((props) => {
         color: colors.silverGray,
       },
     },
+    variant === "noBorder" && {
+      backgroundColor: colors.white,
+      color: colors.darkGray2,
+      border: "none",
+      ":hover:not(:disabled)": {
+        backgroundColor: tinycolor(colors.darkGray1).setAlpha(0.06).toString(),
+      },
+      ":disabled": {
+        color: colors.silverGray,
+      },
+    },
     variant === "tertiary" && {
       color: colors.darkGray2,
       border: "none",