Refactor buttons (#1257)

* Refactor buttons

* Complete components creation

* Complete refactoring

* fix lint

* Complete button work

front/src/modules/ui/table/components/EntityTableColumnMenu.tsx

@@ -46,12 +46,12 @@ export const EntityTableColumnMenu = ({
         {hiddenColumns.map((column) => (
           <DropdownMenuItem
             key={column.id}
-            actions={
+            actions={[
               <IconButton
                 icon={<IconPlus size={theme.icon.size.sm} />}
                 onClick={() => onAddColumn(column.id)}
-              />
-            }
+              />,
+            ]}
           >
             {column.columnIcon &&
               cloneElement(column.columnIcon, {

front/src/modules/ui/table/components/EntityTableHeader.tsx

@@ -1,5 +1,4 @@
 import { useCallback, useState } from 'react';
-import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useRecoilCallback, useRecoilState } from 'recoil';
 
@@ -64,10 +63,6 @@ const StyledAddIconButtonWrapper = styled.div`
   position: relative;
 `;
 
-const StyledAddIconButton = styled(IconButton)`
-  border-radius: 0;
-`;
-
 const StyledEntityTableColumnMenu = styled(EntityTableColumnMenu)`
   position: absolute;
   right: 0;
@@ -76,8 +71,6 @@ const StyledEntityTableColumnMenu = styled(EntityTableColumnMenu)`
 `;
 
 export function EntityTableHeader() {
-  const theme = useTheme();
-
   const [offset, setOffset] = useRecoilState(resizeFieldOffsetState);
   const [columns, setColumns] = useRecoilScopedState(
     tableColumnsScopedState,
@@ -207,9 +200,9 @@ export function EntityTableHeader() {
         <th>
           {hiddenColumns.length > 0 && (
             <StyledAddIconButtonWrapper>
-              <StyledAddIconButton
-                size="large"
-                icon={<IconPlus size={theme.icon.size.md} />}
+              <IconButton
+                size="medium"
+                icon={<IconPlus />}
                 onClick={toggleColumnMenu}
               />
               {isColumnMenuOpen && (

front/src/modules/ui/table/editable-cell/components/EditableCell.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import { IconPencil } from '@tabler/icons-react';
 import { motion } from 'framer-motion';
 
-import { IconButton } from '@/ui/button/components/IconButton';
+import { FloatingIconButton } from '@/ui/button/components/FloatingIconButton';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 
 import { CellHotkeyScopeContext } from '../../contexts/CellHotkeyScopeContext';
@@ -114,8 +114,7 @@ export function EditableCell({
                 transition={{ duration: 0.1 }}
                 whileHover={{ scale: 1.04 }}
               >
-                <IconButton
-                  variant="shadow"
+                <FloatingIconButton
                   size="small"
                   onClick={handlePenClick}
                   icon={<IconPencil size={14} />}

front/src/modules/ui/table/options/components/TableOptionsDropdownContent.tsx

@@ -109,20 +109,22 @@ export function TableOptionsDropdownContent({
   const renderFieldActions = useCallback(
     (column: ViewFieldDefinition<ViewFieldMetadata>) =>
       // Do not allow hiding last visible column
-      !column.isVisible || visibleColumns.length > 1 ? (
-        <IconButton
-          icon={
-            column.isVisible ? (
-              <IconMinus size={theme.icon.size.sm} />
-            ) : (
-              <IconPlus size={theme.icon.size.sm} />
-            )
-          }
-          onClick={() =>
-            handleColumnVisibilityChange(column.id, !column.isVisible)
-          }
-        />
-      ) : undefined,
+      !column.isVisible || visibleColumns.length > 1
+        ? [
+            <IconButton
+              icon={
+                column.isVisible ? (
+                  <IconMinus size={theme.icon.size.sm} />
+                ) : (
+                  <IconPlus size={theme.icon.size.sm} />
+                )
+              }
+              onClick={() =>
+                handleColumnVisibilityChange(column.id, !column.isVisible)
+              }
+            />,
+          ]
+        : undefined,
     [handleColumnVisibilityChange, theme.icon.size.sm, visibleColumns.length],
   );
 

front/src/modules/ui/table/options/components/TableUpdateViewButtonGroup.tsx

@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { Key } from 'ts-key-enum';
 
-import { Button, ButtonSize } from '@/ui/button/components/Button';
+import { Button } from '@/ui/button/components/Button';
 import { ButtonGroup } from '@/ui/button/components/ButtonGroup';
 import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem';
 import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
@@ -136,7 +136,7 @@ export const TableUpdateViewButtonGroup = ({
 
   return (
     <StyledContainer>
-      <ButtonGroup size={ButtonSize.Small}>
+      <ButtonGroup size="small">
         <Button
           title="Update view"
           disabled={
@@ -146,7 +146,7 @@ export const TableUpdateViewButtonGroup = ({
           onClick={handleViewSubmit}
         />
         <Button
-          size={ButtonSize.Small}
+          size="small"
           icon={<IconChevronDown />}
           onClick={handleArrowDownButtonClick}
         />