From d04c661ffdd1aeaa218955d504e0bddeb32a3dcb Mon Sep 17 00:00:00 2001
From: Charles Bochet <charlesBochet@users.noreply.github.com>
Date: Mon, 4 Sep 2023 17:52:03 +0200
Subject: [PATCH] Fix buttons and z-index (#1438)

* Fix buttons

* Remove useless code
---
 .../profile/components/DeleteAccount.tsx      |  1 -
 .../components/DropdownButton.tsx             |  8 ++-----
 .../SingleEntityFilterDropdownButton.tsx      |  1 -
 .../components/SortAndFilterBar.tsx           | 21 ++++++++++++-------
 .../ui/layout/components/PageHeader.tsx       |  1 +
 .../ui/table/components/EntityTable.tsx       |  5 -----
 .../ui/table/components/EntityTableHeader.tsx |  2 ++
 .../components/TableUpdateViewButtonGroup.tsx | 10 +++------
 front/src/modules/ui/top-bar/TopBar.tsx       |  1 +
 .../components/WorkspaceInviteLink.tsx        |  3 ++-
 10 files changed, 25 insertions(+), 28 deletions(-)

diff --git a/front/src/modules/settings/profile/components/DeleteAccount.tsx b/front/src/modules/settings/profile/components/DeleteAccount.tsx
index 8c5058dd7..14e72d942 100644
--- a/front/src/modules/settings/profile/components/DeleteAccount.tsx
+++ b/front/src/modules/settings/profile/components/DeleteAccount.tsx
@@ -39,7 +39,6 @@ export function DeleteAccount() {
 
       <Button
         accent="danger"
-        size="small"
         onClick={() => setIsDeleteAccountModalOpen(true)}
         variant="secondary"
         title="Delete account"
diff --git a/front/src/modules/ui/filter-n-sort/components/DropdownButton.tsx b/front/src/modules/ui/filter-n-sort/components/DropdownButton.tsx
index fdebeaaf3..0829fe792 100644
--- a/front/src/modules/ui/filter-n-sort/components/DropdownButton.tsx
+++ b/front/src/modules/ui/filter-n-sort/components/DropdownButton.tsx
@@ -56,10 +56,6 @@ const StyledDropdownButton = styled.div<StyledDropdownButtonProps>`
   }
 `;
 
-const StyledDropdownMenuContainer = styled(DropdownMenuContainer)`
-  z-index: 2;
-`;
-
 function DropdownButton({
   anchor,
   label,
@@ -101,9 +97,9 @@ function DropdownButton({
         {label}
       </StyledDropdownButton>
       {isUnfolded && (
-        <StyledDropdownMenuContainer anchor={anchor} onClose={onOutsideClick}>
+        <DropdownMenuContainer anchor={anchor} onClose={onOutsideClick}>
           {children}
-        </StyledDropdownMenuContainer>
+        </DropdownMenuContainer>
       )}
     </StyledDropdownButtonContainer>
   );
diff --git a/front/src/modules/ui/filter-n-sort/components/SingleEntityFilterDropdownButton.tsx b/front/src/modules/ui/filter-n-sort/components/SingleEntityFilterDropdownButton.tsx
index 597857801..50f38f002 100644
--- a/front/src/modules/ui/filter-n-sort/components/SingleEntityFilterDropdownButton.tsx
+++ b/front/src/modules/ui/filter-n-sort/components/SingleEntityFilterDropdownButton.tsx
@@ -25,7 +25,6 @@ const StyledDropdownButtonContainer = styled.div`
   display: flex;
   flex-direction: column;
   position: relative;
-  z-index: 1;
 `;
 
 export function SingleEntityFilterDropdownButton({
diff --git a/front/src/modules/ui/filter-n-sort/components/SortAndFilterBar.tsx b/front/src/modules/ui/filter-n-sort/components/SortAndFilterBar.tsx
index 6491b6f9e..90b69c832 100644
--- a/front/src/modules/ui/filter-n-sort/components/SortAndFilterBar.tsx
+++ b/front/src/modules/ui/filter-n-sort/components/SortAndFilterBar.tsx
@@ -37,6 +37,7 @@ const StyledBar = styled.div`
   flex-direction: row;
   height: 40px;
   justify-content: space-between;
+  z-index: 4;
 `;
 
 const StyledChipcontainer = styled.div`
@@ -93,6 +94,10 @@ const StyledSeperator = styled.div`
   width: 1px;
 `;
 
+const StyledAddFilterContainer = styled.div`
+  z-index: 5;
+`;
+
 function SortAndFilterBar<SortField>({
   canToggle,
   context,
@@ -189,13 +194,15 @@ function SortAndFilterBar<SortField>({
           })}
         </StyledChipcontainer>
         {hasFilterButton && (
-          <FilterDropdownButton
-            context={context}
-            HotkeyScope={FiltersHotkeyScope.FilterDropdownButton}
-            color={theme.font.color.tertiary}
-            icon={<IconPlus size={theme.icon.size.md} />}
-            label="Add filter"
-          />
+          <StyledAddFilterContainer>
+            <FilterDropdownButton
+              context={context}
+              HotkeyScope={FiltersHotkeyScope.FilterDropdownButton}
+              color={theme.font.color.tertiary}
+              icon={<IconPlus size={theme.icon.size.md} />}
+              label="Add filter"
+            />
+          </StyledAddFilterContainer>
         )}
       </StyledFilterContainer>
       {filters.length + sorts.length > 0 && (
diff --git a/front/src/modules/ui/layout/components/PageHeader.tsx b/front/src/modules/ui/layout/components/PageHeader.tsx
index dd5b5bc2a..93689463d 100644
--- a/front/src/modules/ui/layout/components/PageHeader.tsx
+++ b/front/src/modules/ui/layout/components/PageHeader.tsx
@@ -99,6 +99,7 @@ export function PageHeader({
             <StyledBackIconButton
               icon={<IconChevronLeft size={iconSize} />}
               onClick={navigateBack}
+              variant="tertiary"
             />
           </StyledTopBarButtonContainer>
         )}
diff --git a/front/src/modules/ui/table/components/EntityTable.tsx b/front/src/modules/ui/table/components/EntityTable.tsx
index c1bd05b70..96eb212c7 100644
--- a/front/src/modules/ui/table/components/EntityTable.tsx
+++ b/front/src/modules/ui/table/components/EntityTable.tsx
@@ -43,7 +43,6 @@ const StyledTable = styled.table`
       border-right-color: transparent;
     }
     :last-of-type {
-      min-width: fit-content;
       width: 100%;
     }
   }
@@ -63,10 +62,6 @@ const StyledTable = styled.table`
       border-left-color: transparent;
       border-right-color: transparent;
     }
-    :last-of-type {
-      min-width: fit-content;
-      width: 100%;
-    }
   }
 `;
 
diff --git a/front/src/modules/ui/table/components/EntityTableHeader.tsx b/front/src/modules/ui/table/components/EntityTableHeader.tsx
index 7ad889afc..d3fe088f1 100644
--- a/front/src/modules/ui/table/components/EntityTableHeader.tsx
+++ b/front/src/modules/ui/table/components/EntityTableHeader.tsx
@@ -198,8 +198,10 @@ export function EntityTableHeader() {
             <StyledAddIconButtonWrapper>
               <IconButton
                 size="medium"
+                variant="tertiary"
                 icon={<IconPlus />}
                 onClick={toggleColumnMenu}
+                position="middle"
               />
               {isColumnMenuOpen && (
                 <StyledEntityTableColumnMenu
diff --git a/front/src/modules/ui/table/options/components/TableUpdateViewButtonGroup.tsx b/front/src/modules/ui/table/options/components/TableUpdateViewButtonGroup.tsx
index ac93d5a83..9dacc1710 100644
--- a/front/src/modules/ui/table/options/components/TableUpdateViewButtonGroup.tsx
+++ b/front/src/modules/ui/table/options/components/TableUpdateViewButtonGroup.tsx
@@ -36,10 +36,6 @@ const StyledContainer = styled.div`
   position: relative;
 `;
 
-const StyledDropdownMenuContainer = styled(DropdownMenuContainer)`
-  z-index: 1;
-`;
-
 type TableUpdateViewButtonGroupProps = {
   onViewSubmit?: () => void;
   HotkeyScope: string;
@@ -139,7 +135,7 @@ export const TableUpdateViewButtonGroup = ({
 
   return (
     <StyledContainer>
-      <ButtonGroup size="small">
+      <ButtonGroup size="small" accent="blue">
         <Button
           title="Update view"
           disabled={
@@ -156,14 +152,14 @@ export const TableUpdateViewButtonGroup = ({
       </ButtonGroup>
 
       {isDropdownOpen && (
-        <StyledDropdownMenuContainer onClose={handleDropdownClose}>
+        <DropdownMenuContainer onClose={handleDropdownClose}>
           <StyledDropdownMenuItemsContainer>
             <DropdownMenuItem onClick={handleCreateViewButtonClick}>
               <IconPlus size={theme.icon.size.md} />
               Create view
             </DropdownMenuItem>
           </StyledDropdownMenuItemsContainer>
-        </StyledDropdownMenuContainer>
+        </DropdownMenuContainer>
       )}
     </StyledContainer>
   );
diff --git a/front/src/modules/ui/top-bar/TopBar.tsx b/front/src/modules/ui/top-bar/TopBar.tsx
index b56d95457..54d762e4a 100644
--- a/front/src/modules/ui/top-bar/TopBar.tsx
+++ b/front/src/modules/ui/top-bar/TopBar.tsx
@@ -26,6 +26,7 @@ const StyledTopBar = styled.div<{ displayBottomBorder: boolean }>`
   justify-content: space-between;
   padding-left: ${({ theme }) => theme.spacing(3)};
   padding-right: ${({ theme }) => theme.spacing(2)};
+  z-index: 5;
 `;
 
 const StyledLeftSection = styled.div`
diff --git a/front/src/modules/workspace/components/WorkspaceInviteLink.tsx b/front/src/modules/workspace/components/WorkspaceInviteLink.tsx
index fdf07983a..3908f5dff 100644
--- a/front/src/modules/workspace/components/WorkspaceInviteLink.tsx
+++ b/front/src/modules/workspace/components/WorkspaceInviteLink.tsx
@@ -33,7 +33,8 @@ export function WorkspaceInviteLink({ inviteLink }: OwnProps) {
       </StyledLinkContainer>
       <Button
         icon={<IconLink size={theme.icon.size.md} />}
-        variant={'primary'}
+        variant="primary"
+        accent="blue"
         title="Copy link"
         onClick={() => {
           enqueueSnackBar('Link copied to clipboard', {