From c743418351e215ffaf2210be12f2664f7cdeaae3 Mon Sep 17 00:00:00 2001
From: Alejandro-Vega <vegaalejandro15@gmail.com>
Date: Mon, 7 Oct 2024 10:18:03 -0400
Subject: [PATCH] Update column visibility button to include updated icon

---
 .../GenericTable/ColumnVisibilityButton.tsx   | 28 ++++++++++++++++---
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/components/GenericTable/ColumnVisibilityButton.tsx b/src/components/GenericTable/ColumnVisibilityButton.tsx
index 7edc2f885..698b469fb 100644
--- a/src/components/GenericTable/ColumnVisibilityButton.tsx
+++ b/src/components/GenericTable/ColumnVisibilityButton.tsx
@@ -1,8 +1,20 @@
 import React, { ReactNode, useState } from "react";
-import { IconButton } from "@mui/material";
+import { IconButton, Stack, styled } from "@mui/material";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import { ReactComponent as TableColumnsIcon } from "../../assets/icons/table_columns_icon.svg";
 import ColumnVisibilityPopper from "./ColumnVisibilityPopper";
 
+const StyledIconButton = styled(IconButton)({
+  padding: 0,
+  paddingLeft: "3px",
+});
+
+const StyledExpandMoreIcon = styled(ExpandMoreIcon)({
+  color: "#000",
+  fontSize: "18px",
+  alignSelf: "flex-end",
+});
+
 type ColumnVisibilityModel = { [key: string]: boolean };
 
 type Props<C extends { hideable?: boolean }> = {
@@ -44,13 +56,21 @@ const ColumnVisibilityButton = <C extends { hideable?: boolean }>({
 
   return (
     <>
-      <IconButton
+      <StyledIconButton
         onClick={handleOpenPopper}
         aria-label="Manage columns button"
         data-testid="column-visibility-button"
+        disableTouchRipple
+        disableRipple
+        disableFocusRipple
       >
-        {icon ?? <TableColumnsIcon />}
-      </IconButton>
+        {icon ?? (
+          <Stack direction="row">
+            <TableColumnsIcon />
+            <StyledExpandMoreIcon />
+          </Stack>
+        )}
+      </StyledIconButton>
       <ColumnVisibilityPopper
         anchorEl={anchorEl}
         open={Boolean(anchorEl)}