Fix buttons and z-index (#1438)

* Fix buttons

* Remove useless code

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"

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>
   );

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({

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
+          <StyledAddFilterContainer>
-            context={context}
+            <FilterDropdownButton
-            HotkeyScope={FiltersHotkeyScope.FilterDropdownButton}
+              context={context}
-            color={theme.font.color.tertiary}
+              HotkeyScope={FiltersHotkeyScope.FilterDropdownButton}
-            icon={<IconPlus size={theme.icon.size.md} />}
+              color={theme.font.color.tertiary}
-            label="Add filter"
+              icon={<IconPlus size={theme.icon.size.md} />}
-          />
+              label="Add filter"
+            />
+          </StyledAddFilterContainer>
         )}
       </StyledFilterContainer>
       {filters.length + sorts.length > 0 && (

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>
         )}

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%;
-    }
   }
 `;
 

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

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>
   );

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`

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', {