fix: button primitive component normalization

frontend/src/components/Board/AddCardOrComment.tsx

@@ -16,15 +16,6 @@ import UpdateCommentDto from '@/types/comment/updateComment.dto';
 import { styled } from '@/styles/stitches/stitches.config';
 import Icon from '../icons/Icon';
 
-const ActionButton = styled(Button, {
-  padding: '$10 $14 !important',
-
-  svg: {
-    width: '$16',
-    height: '$16',
-  },
-});
-
 const StyledForm = styled('form', Flex, { width: '100%' });
 
 type AddCardProps = {
@@ -175,7 +166,6 @@ const AddCard = React.memo<AddCardProps>(
           css={{
             mx: '$20',
             display: 'flex',
-            fontWeight: '$medium',
           }}
           onClick={() => setIsOpen(true)}
         >
@@ -218,18 +208,18 @@ const AddCard = React.memo<AddCardProps>(
             id="text"
             placeholder={!isDefaultText ? placeholder : 'Write your comment here...'}
           />
-          {!isCard && (
-            <Checkbox
-              id={colId + cardId}
-              label="Add anonymously"
-              size="16"
-              checked={anonymous}
-              setCheckedTerms={() => {
-                setIsCommentAnonymous(!isCommentAnonymous);
-              }}
-            />
-          )}
-          <Flex css={{ width: '100%' }} gap="4" justify="end">
+          <Flex css={{ width: '100%' }} justify="end">
+            {!isCard && (
+              <Checkbox
+                id={colId + cardId}
+                label="Add anonymously"
+                size="16"
+                checked={anonymous}
+                setCheckedTerms={() => {
+                  setIsCommentAnonymous(!isCommentAnonymous);
+                }}
+              />
+            )}
             {!isEditing && (
               <Checkbox
                 id={colId}
@@ -241,23 +231,25 @@ const AddCard = React.memo<AddCardProps>(
                 }}
               />
             )}
-            <ActionButton
-              css={{ width: '$48', height: '$36' }}
-              size="sm"
-              variant={!isUpdate && isCard ? 'lightOutline' : 'primaryOutline'}
-              onClick={handleClear}
-            >
-              <Icon name="close" />
-            </ActionButton>
-            <ActionButton
-              css={{ width: '$48', height: '$36' }}
-              disabled={disabledButton}
-              size="sm"
-              type="submit"
-              variant="primary"
-            >
-              <Icon name="check" />
-            </ActionButton>
+            <Flex gap="8">
+              <Button
+                css={{ width: '$52', height: '$36' }}
+                size="sm"
+                variant={!isUpdate && isCard ? 'lightOutline' : 'primaryOutline'}
+                onClick={handleClear}
+              >
+                <Icon name="close" />
+              </Button>
+              <Button
+                css={{ width: '$52', height: '$36' }}
+                disabled={disabledButton}
+                size="sm"
+                type="submit"
+                variant="primary"
+              >
+                <Icon name="check" />
+              </Button>
+            </Flex>
           </Flex>
         </FormProvider>
       </StyledForm>

frontend/src/components/Board/Card/CardFooter.tsx

@@ -1,7 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
 
-import { styled } from '@/styles/stitches/stitches.config';
-
 import Icon from '@/components/icons/Icon';
 import Avatar from '@/components/Primitives/Avatar';
 import Button from '@/components/Primitives/Button';
@@ -31,30 +29,6 @@ interface FooterProps {
   hideCards: boolean;
 }
 
-const StyledButtonIcon = styled(Button, {
-  m: '0 !important',
-  p: '0 !important',
-  lineHeight: '0 !important',
-  height: 'fit-content !important',
-  backgroundColor: 'transparent !important',
-  '& svg': {
-    color: '$primary500',
-  },
-  '@hover': {
-    '&:hover': {
-      backgroundColor: 'transparent !important',
-    },
-  },
-  '&:active': {
-    boxShadow: 'none !important',
-  },
-  '&:disabled': {
-    svg: {
-      opacity: '0.2',
-    },
-  },
-});
-
 const CardFooter = ({
   boardId,
   userId,
@@ -206,7 +180,11 @@ const CardFooter = ({
               filter: cardFooterBlur(hideCards, createdBy, userId),
             }}
           >
-            <StyledButtonIcon
+            <Button
+              isIcon
+              variant="light"
+              size="sm"
+              css={{ color: '$primary500' }}
               disabled={
                 !isMainboard ||
                 (maxVotes && user?.votesCount === maxVotes) ||
@@ -215,7 +193,7 @@ const CardFooter = ({
               onClick={handleAddVote}
             >
               <Icon name="thumbs-up" />
-            </StyledButtonIcon>
+            </Button>
             <Text
               size="xs"
               css={{
@@ -235,7 +213,11 @@ const CardFooter = ({
               filter: cardFooterBlur(hideCards, createdBy, userId),
             }}
           >
-            <StyledButtonIcon
+            <Button
+              isIcon
+              variant="light"
+              size="sm"
+              css={{ color: '$primary500' }}
               disabled={
                 !isMainboard ||
                 votesInThisCard.length === 0 ||
@@ -246,7 +228,7 @@ const CardFooter = ({
               onClick={handleDeleteVote}
             >
               <Icon name="thumbs-down" />
-            </StyledButtonIcon>
+            </Button>
           </Flex>
 
           <Flex
@@ -256,12 +238,16 @@ const CardFooter = ({
               filter: cardFooterBlur(hideCards, createdBy, userId),
             }}
           >
-            <StyledButtonIcon
+            <Button
+              isIcon
+              variant="light"
+              size="sm"
+              css={{ color: '$primary500' }}
               disabled={hideCards && createdBy?._id !== userId}
               onClick={setOpenComments}
             >
               <Icon name={isCommentsOpened ? 'comment-filled' : 'comment'} />
-            </StyledButtonIcon>
+            </Button>
             <Text css={{ visibility: comments.length > 0 ? 'visible' : 'hidden' }} size="xs">
               {comments.length}
             </Text>

frontend/src/components/Board/Settings/index.tsx

@@ -22,13 +22,13 @@ import isEmpty from '@/utils/isEmpty';
 import Dialog from '@/components/Primitives/Dialog';
 import { styled } from '@/styles/stitches/stitches.config';
 import { ScrollableContent } from '@/components/Boards/MyBoards/ListBoardMembers/styles';
+import Button from '@/components/Primitives/Button';
 import ColumnType, { CreateColumn } from '@/types/column';
 import { ConfigurationSwitchSettings } from './partials/ConfigurationSettings/ConfigurationSwitch';
 import { ConfigurationSettings } from './partials/ConfigurationSettings';
 import { TeamResponsibleSettings } from './partials/TeamResponsible';
 import { ColumnBoxAndDelete } from './partials/Columns/ColumnBoxAndDelete';
 import { ColumnSettings } from './partials/Columns';
-import { AddColumnButton } from './partials/Columns/AddColumnButton';
 import { colors } from '../Column/partials/OptionsMenu';
 
 const DEFAULT_MAX_VOTES = 6;
@@ -531,9 +531,14 @@ const BoardSettings = ({
                             disableDeleteColumn={editColumns.length === 1}
                           />
                         ))}
-                        {editColumns.length < 4 && (
-                          <AddColumnButton onAddColumn={handleAddColumn} />
-                        )}
+                        <Flex direction="row" justify="start">
+                          {editColumns.length < 4 && (
+                            <Button variant="link" size="sm" onClick={handleAddColumn}>
+                              <Icon name="plus" />
+                              Add new column
+                            </Button>
+                          )}
+                        </Flex>
                       </Flex>
                     </ColumnSettings>
                   )}

frontend/src/components/Board/Settings/styles.tsx

@@ -4,7 +4,6 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { keyframes, styled } from '@/styles/stitches/stitches.config';
 
 import Icon from '@/components/icons/Icon';
-import Button from '@/components/Primitives/Button';
 import Flex from '@/components/Primitives/Flex';
 
 /**
@@ -71,18 +70,6 @@ const StyledDialogTitle = styled('div', DialogPrimitive.Title, {
   },
 });
 
-const StyledDialogCloseButton = styled(Button, {
-  color: '$primary400',
-  height: '40px !important',
-  padding: '10px !important',
-
-  transition: 'all 0.25s ease-in-out',
-
-  '&:hover': {
-    backgroundColor: '$primary50 !important',
-  },
-});
-
 /**
  * Accordion Animations
  */
@@ -205,7 +192,6 @@ export {
   StyledAccordionIcon,
   StyledAccordionItem,
   StyledAccordionTrigger,
-  StyledDialogCloseButton,
   StyledDialogContainer,
   StyledDialogContent,
   StyledDialogOverlay,

frontend/src/components/Board/SplitBoard/AlertMergeIntoMain/index.tsx

@@ -1,3 +1,4 @@
+import Icon from '@/components/icons/Icon';
 import AlertCustomDialog from '@/components/Primitives/AlertCustomDialog';
 import { AlertDialogTrigger } from '@/components/Primitives/AlertDialog';
 import Button from '@/components/Primitives/Button';
@@ -23,15 +24,9 @@ const AlertMergeIntoMain: React.FC<Props> = ({ boardId, socketId }) => {
       }}
     >
       <AlertDialogTrigger asChild>
-        <Button
-          size="sm"
-          variant="primaryOutline"
-          css={{
-            fontWeight: '$medium',
-            width: '$206',
-          }}
-        >
+        <Button size="sm" variant="primaryOutline">
           Merge into main board
+          <Icon name="merge" />
         </Button>
       </AlertDialogTrigger>
     </AlertCustomDialog>

frontend/src/components/Boards/Filters/FilterBoards.tsx

@@ -12,14 +12,10 @@ export interface OptionType {
 }
 
 const StyledButton = styled(Button, {
-  border: '1px solid $colors$primary100',
+  border: '1px solid $primary100',
   borderRadius: '0px',
-  height: '$36 !important',
   backgroundColor: '$white !important',
   color: '$primary300 !important',
-  fontSize: '$14 !important',
-  lineHeight: '$20 !important',
-  fontWeight: '$medium !important',
   '&[data-active="true"]': {
     borderColor: '$primary800',
     color: '$primary800 !important',
@@ -38,13 +34,15 @@ const FilterBoards: React.FC<FilterBoardsProps> = ({ teamNames }) => {
   return (
     <Flex css={{ zIndex: '10' }} justify="end">
       <StyledButton
+        size="sm"
         css={{ borderRadius: '12px 0 0 12px' }}
         data-active={filterState === 'all'}
         onClick={() => setFilterState('all')}
       >
         All
       </StyledButton>
       <StyledButton
+        size="sm"
         data-active={filterState === 'personal'}
         onClick={() => setFilterState('personal')}
       >