From 7cf1f913b0c8a951242402b5fe8d814312c25b45 Mon Sep 17 00:00:00 2001
From: Sammy Teillet <sammy.teillet@gmail.com>
Date: Mon, 24 Apr 2023 17:00:05 +0200
Subject: [PATCH] feature: add property isActive for dropdown buttons

---
 .../components/table/table-header/DropdownButton.tsx  | 11 +++++++++--
 .../src/components/table/table-header/TableHeader.tsx |  5 +++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/front/src/components/table/table-header/DropdownButton.tsx b/front/src/components/table/table-header/DropdownButton.tsx
index df7c1f952..30d244846 100644
--- a/front/src/components/table/table-header/DropdownButton.tsx
+++ b/front/src/components/table/table-header/DropdownButton.tsx
@@ -8,6 +8,7 @@ import { SortType } from './SortAndFilterBar';
 type OwnProps = {
   label: string;
   options: Array<SortType>;
+  isActive: boolean;
   onSortSelect?: (id: string) => void;
 };
 
@@ -20,6 +21,7 @@ const StyledDropdownButtonContainer = styled.div`
 
 type StyledDropdownButtonProps = {
   isUnfolded: boolean;
+  isActive: boolean;
 };
 
 const StyledDropdownButton = styled.div<StyledDropdownButtonProps>`
@@ -27,6 +29,7 @@ const StyledDropdownButton = styled.div<StyledDropdownButtonProps>`
   margin-left: ${(props) => props.theme.spacing(3)};
   cursor: pointer;
   background: ${(props) => props.theme.primaryBackground};
+  color: ${(props) => (props.isActive ? props.theme.blue : 'none')};
   padding: ${(props) => props.theme.spacing(1)};
   border-radius: 4px;
   filter: ${(props) => (props.isUnfolded ? 'brightness(0.95)' : 'none')};
@@ -85,7 +88,7 @@ const StyledIcon = styled.div`
   margin-right: ${(props) => props.theme.spacing(1)};
 `;
 
-function DropdownButton({ label, options, onSortSelect }: OwnProps) {
+function DropdownButton({ label, options, onSortSelect, isActive }: OwnProps) {
   const [isUnfolded, setIsUnfolded] = useState(false);
 
   const onButtonClick = () => {
@@ -101,7 +104,11 @@ function DropdownButton({ label, options, onSortSelect }: OwnProps) {
 
   return (
     <StyledDropdownButtonContainer>
-      <StyledDropdownButton isUnfolded={isUnfolded} onClick={onButtonClick}>
+      <StyledDropdownButton
+        isUnfolded={isUnfolded}
+        onClick={onButtonClick}
+        isActive={isActive}
+      >
         {label}
       </StyledDropdownButton>
       {isUnfolded && options.length > 0 && (
diff --git a/front/src/components/table/table-header/TableHeader.tsx b/front/src/components/table/table-header/TableHeader.tsx
index 8c3077df0..7c7c4620e 100644
--- a/front/src/components/table/table-header/TableHeader.tsx
+++ b/front/src/components/table/table-header/TableHeader.tsx
@@ -86,13 +86,14 @@ function TableHeader({
           {viewName}
         </StyledViewSection>
         <StyledFilters>
-          <DropdownButton label="Filter" options={[]} />
+          <DropdownButton label="Filter" options={[]} isActive={false} />
           <DropdownButton
             label="Sort"
             options={sortsAvailable}
             onSortSelect={onSortItemSelect}
+            isActive={sorts.length > 0}
           />
-          <DropdownButton label="Settings" options={[]} />
+          <DropdownButton label="Settings" options={[]} isActive={false} />
         </StyledFilters>
       </StyledTableHeader>
       {sorts.length > 0 && (