From 4bf88cf76913119acc604276df790a1f3df2b1ec Mon Sep 17 00:00:00 2001
From: JoaoSaIvador <j.salvador@kigroup.de>
Date: Thu, 26 Jan 2023 16:30:57 +0000
Subject: [PATCH 1/8] fix: unify button primitive behaviour

---
 .../src/components/Board/AddCardOrComment.tsx | 48 ++++------
 .../src/components/Board/Card/CardFooter.tsx  | 50 ++++------
 .../src/components/Board/Settings/styles.tsx  | 14 ---
 .../SplitBoard/AlertMergeIntoMain/index.tsx   | 11 +--
 .../Boards/Filters/FilterBoards.tsx           |  8 +-
 frontend/src/components/Primitives/Button.tsx | 93 +++++++++++--------
 .../Primitives/Dialog/DialogFooter.tsx        | 14 +--
 .../Primitives/Dialog/DialogHeader.tsx        |  9 +-
 .../CreateTeam/ListCardsMembers/index.tsx     |  2 +-
 .../CreateTeam/ListMembersDialog/index.tsx    | 21 ++---
 .../src/components/Teams/CreateTeam/index.tsx |  4 +-
 .../UserEdit/partials/UserHeader/index.tsx    |  8 +-
 .../auth/ForgotPassword/EmailSent.tsx         |  4 -
 .../auth/ForgotPassword/ResetPassword.tsx     |  9 +-
 .../auth/ForgotPassword/TroubleLogin.tsx      |  9 +-
 .../components/auth/LoginForm/LoginSSO.tsx    |  5 +-
 .../src/components/auth/LoginForm/index.tsx   |  7 +-
 .../src/components/auth/LoginForm/styles.tsx  | 11 +--
 .../components/auth/SignUp/RegisterForm.tsx   |  6 --
 .../src/components/auth/SignUp/SignUpForm.tsx | 13 +--
 .../auth/SignUp/SignUpOptionsForm.tsx         |  6 --
 .../layouts/DashboardLayout/index.tsx         | 15 +--
 .../layouts/DashboardLayout/styles.tsx        | 12 +--
 frontend/src/pages/404.tsx                    | 12 +--
 frontend/src/pages/500.tsx                    | 12 +--
 frontend/src/pages/board-deleted.tsx          | 12 +--
 frontend/src/pages/boards/[boardId].tsx       |  2 +-
 frontend/src/pages/boards/new.tsx             |  4 +-
 frontend/src/pages/boards/newRegularBoard.tsx |  4 +-
 frontend/src/pages/boards/newSplitBoard.tsx   |  4 +-
 .../src/styles/pages/boards/new.styles.tsx    | 10 --
 .../pages/boards/newSplitBoard.styles.tsx     | 15 ---
 frontend/src/styles/pages/error.styles.tsx    |  3 -
 .../src/styles/stitches/partials/sizes.ts     |  2 +
 34 files changed, 158 insertions(+), 301 deletions(-)

diff --git a/frontend/src/components/Board/AddCardOrComment.tsx b/frontend/src/components/Board/AddCardOrComment.tsx
index 88136f322..42b7d2e00 100644
--- a/frontend/src/components/Board/AddCardOrComment.tsx
+++ b/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)}
         >
@@ -229,7 +219,7 @@ const AddCard = React.memo<AddCardProps>(
               }}
             />
           )}
-          <Flex css={{ width: '100%' }} gap="4" justify="end">
+          <Flex css={{ width: '100%' }} justify="end">
             {!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>
diff --git a/frontend/src/components/Board/Card/CardFooter.tsx b/frontend/src/components/Board/Card/CardFooter.tsx
index e772d62ff..46df7b36c 100644
--- a/frontend/src/components/Board/Card/CardFooter.tsx
+++ b/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>
diff --git a/frontend/src/components/Board/Settings/styles.tsx b/frontend/src/components/Board/Settings/styles.tsx
index 46d6a6251..55bdda834 100644
--- a/frontend/src/components/Board/Settings/styles.tsx
+++ b/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,
diff --git a/frontend/src/components/Board/SplitBoard/AlertMergeIntoMain/index.tsx b/frontend/src/components/Board/SplitBoard/AlertMergeIntoMain/index.tsx
index 81d644634..62f2baf46 100644
--- a/frontend/src/components/Board/SplitBoard/AlertMergeIntoMain/index.tsx
+++ b/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>
diff --git a/frontend/src/components/Boards/Filters/FilterBoards.tsx b/frontend/src/components/Boards/Filters/FilterBoards.tsx
index c354954b9..f31698d8e 100644
--- a/frontend/src/components/Boards/Filters/FilterBoards.tsx
+++ b/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,6 +34,7 @@ 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')}
@@ -45,6 +42,7 @@ const FilterBoards: React.FC<FilterBoardsProps> = ({ teamNames }) => {
         All
       </StyledButton>
       <StyledButton
+        size="sm"
         data-active={filterState === 'personal'}
         onClick={() => setFilterState('personal')}
       >
diff --git a/frontend/src/components/Primitives/Button.tsx b/frontend/src/components/Primitives/Button.tsx
index 50fc89eeb..af70a106c 100644
--- a/frontend/src/components/Primitives/Button.tsx
+++ b/frontend/src/components/Primitives/Button.tsx
@@ -3,7 +3,6 @@ import { styled } from '@/styles/stitches/stitches.config';
 const Button = styled('button', {
   fontFamily: '$body',
   borderRadius: '$12',
-  height: '$56',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
@@ -18,7 +17,7 @@ const Button = styled('button', {
   '&:disabled': {
     '@hover': {
       '&:hover': {
-        cursor: 'default',
+        cursor: 'not-allowed',
       },
     },
     '&:active': {
@@ -28,7 +27,7 @@ const Button = styled('button', {
   variants: {
     variant: {
       primary: {
-        color: 'white',
+        color: '$white',
         backgroundColor: '$primaryBase',
         '@hover': {
           '&:hover': {
@@ -39,32 +38,35 @@ const Button = styled('button', {
           backgroundColor: '$primary600',
           boxShadow: 'inset 0px 2px 4px rgba(0, 0, 0, 0.8)',
         },
-
         '&:disabled': {
           backgroundColor: '$primary200',
         },
       },
       primaryOutline: {
-        backgroundColor: 'transparent',
+        color: '$primaryBase',
+        backgroundColor: '$transparent',
         border: '2px solid $primaryBase',
-        boxSizing: 'border-box',
         '@hover': {
           '&:hover': {
             color: 'white',
-            border: '2px solid $primary600',
+            borderColor: '$primary600',
             backgroundColor: '$primary600',
           },
         },
         '&:active': {
           color: 'white',
           backgroundColor: '$primary600',
+          borderColor: '$primary600',
           boxShadow: 'inset 0px 2px 4px rgba(0, 0, 0, 0.5)',
         },
         '&:disabled': {
-          backgroundColor: '2px solid $primary100',
+          color: '$primary200',
+          borderColor: '$primary200',
+          backgroundColor: '$transparent',
         },
       },
       light: {
+        color: '$primaryBase',
         backgroundColor: '$primary100',
         '@hover': {
           '&:hover': {
@@ -75,34 +77,38 @@ const Button = styled('button', {
           backgroundColor: '$primary200',
           boxShadow: 'inset 0px 2px 4px rgba(0, 0, 0, 0.1)',
         },
-
         '&:disabled': {
+          color: '$primary200',
           backgroundColor: '$primary50',
           opacity: 0.8,
         },
       },
       lightOutline: {
-        backgroundColor: 'transparent',
         color: '$primary300',
-        border: '2px solid $primary200',
-        boxSizing: 'border-box',
+        backgroundColor: '$transparent',
+        border: '2px solid $primary100',
         '@hover': {
           '&:hover': {
+            color: '$primaryBase',
+            borderColor: '$primary200',
             backgroundColor: '$primary200',
-            color: '$primary800',
           },
         },
         '&:active': {
+          color: '$primaryBase',
           backgroundColor: '$primary200',
+          borderColor: '$primary200',
           boxShadow: 'inset 0px 2px 4px rgba(0, 0, 0, 0.1)',
         },
         '&:disabled': {
-          backgroundColor: '2px solid $primary100',
+          color: '$primary600',
+          backgroundColor: '$transparent',
+          borderColor: '$primary100',
           opacity: 0.3,
         },
       },
       danger: {
-        color: 'white',
+        color: '$white',
         backgroundColor: '$dangerBase',
         '@hover': {
           '&:hover': {
@@ -111,9 +117,8 @@ const Button = styled('button', {
         },
         '&:active': {
           backgroundColor: '$danger700',
-          boxShadow: 'inset 0px 2px 4px rgba(0, 0, 0, 0.1)',
+          boxShadow: 'inset 0px 2px 4px rgba(0, 0, 0, 0.2)',
         },
-
         '&:disabled': {
           backgroundColor: '$danger400',
           opacity: 0.3,
@@ -121,44 +126,47 @@ const Button = styled('button', {
       },
       dangerOutline: {
         color: '$dangerBase',
-        backgroundColor: 'transparent',
-        border: '2px solid $danger500',
-        boxSizing: 'border-box',
+        backgroundColor: '$transparent',
+        border: '2px solid $dangerBase',
         '@hover': {
           '&:hover': {
-            color: 'white',
-            border: '2px solid $danger700',
+            color: '$white',
+            borderColor: '$danger700',
             backgroundColor: '$danger700',
           },
         },
         '&:active': {
           color: 'white',
           backgroundColor: '$danger700',
-          border: '2px solid $danger700',
+          borderColor: '$danger700',
           boxShadow: 'inset 0px 2px 4px rgba(0, 0, 0, 0.1)',
         },
         '&:disabled': {
-          backgroundColor: '1px solid $dangerBase',
+          color: '$danger500',
+          backgroundColor: '$transparent',
+          borderColor: '$danger500',
           opacity: 0.3,
         },
       },
     },
     isIcon: {
       true: {
-        padding: '0',
-        backgroundColor: 'transparent',
+        padding: '0 !important',
+        width: 'auto !important',
+        height: 'auto !important',
+        backgroundColor: '$transparent !important',
         '@hover': {
           '&:hover': {
-            backgroundColor: '$transparent',
+            backgroundColor: '$transparent !important',
           },
         },
         '&:active': {
-          backgroundColor: '$transparent',
+          backgroundColor: '$transparent !important',
           boxShadow: 'none',
         },
-
         '&:disabled': {
-          backgroundColor: '$transparent',
+          backgroundColor: '$transparent !important',
+          border: 'none',
         },
       },
     },
@@ -179,7 +187,7 @@ const Button = styled('button', {
     size: {
       lg: {
         height: '$56',
-        fontWeight: '$bold',
+        fontWeight: '$medium',
         fontSize: '$18',
         lineHeight: '$24',
         px: '$24',
@@ -195,7 +203,7 @@ const Button = styled('button', {
       },
       md: {
         height: '$48',
-        fontWeight: '$bold',
+        fontWeight: '$medium',
         fontSize: '$16',
         lineHeight: '$20',
         px: '$24',
@@ -211,7 +219,7 @@ const Button = styled('button', {
       },
       sm: {
         height: '$36',
-        fontWeight: '$bold',
+        fontWeight: '$medium',
         fontSize: '$14',
         lineHeight: '$16',
         px: '$16',
@@ -220,10 +228,6 @@ const Button = styled('button', {
           height: '$16 !important',
           width: '$16 !important',
         },
-        '& span': {
-          height: '$16 !important',
-          width: '$16 !important',
-        },
       },
     },
   },
@@ -232,21 +236,30 @@ const Button = styled('button', {
       size: 'lg',
       isIcon: 'true',
       css: {
-        p: '$16',
+        '& svg': {
+          height: '$40 !important',
+          width: '$40 !important',
+        },
       },
     },
     {
       size: 'md',
       isIcon: 'true',
       css: {
-        p: '$14',
+        '& svg': {
+          height: '$24 !important',
+          width: '$24 !important',
+        },
       },
     },
     {
       size: 'sm',
       isIcon: 'true',
       css: {
-        p: '$10',
+        '& svg': {
+          height: '$20 !important',
+          width: '$20 !important',
+        },
       },
     },
   ],
diff --git a/frontend/src/components/Primitives/Dialog/DialogFooter.tsx b/frontend/src/components/Primitives/Dialog/DialogFooter.tsx
index 2cc0b5217..ae6c92fb8 100644
--- a/frontend/src/components/Primitives/Dialog/DialogFooter.tsx
+++ b/frontend/src/components/Primitives/Dialog/DialogFooter.tsx
@@ -30,21 +30,11 @@ const Footer: React.FC<FooterProps> = (props) => {
       }}
     >
       {children}
-      <Button
-        css={{ margin: '0 $24 0 auto', padding: '$16 $24' }}
-        variant="primaryOutline"
-        onClick={() => setIsOpen(false)}
-        type="button"
-      >
+      <Button variant="primaryOutline" onClick={() => setIsOpen(false)} type="button">
         Cancel
       </Button>
       {(handleAffirmative || affirmativeLabel) && (
-        <Button
-          css={{ marginRight: '$32', padding: '$16 $24' }}
-          variant="primary"
-          onClick={handleAffirmative}
-          ref={buttonRef}
-        >
+        <Button onClick={handleAffirmative} ref={buttonRef}>
           {affirmativeLabel}
         </Button>
       )}
diff --git a/frontend/src/components/Primitives/Dialog/DialogHeader.tsx b/frontend/src/components/Primitives/Dialog/DialogHeader.tsx
index 9b87b54ab..e39887924 100644
--- a/frontend/src/components/Primitives/Dialog/DialogHeader.tsx
+++ b/frontend/src/components/Primitives/Dialog/DialogHeader.tsx
@@ -1,15 +1,16 @@
-import { StyledDialogCloseButton, StyledDialogTitle } from '@/components/Board/Settings/styles';
+import { StyledDialogTitle } from '@/components/Board/Settings/styles';
 import Icon from '@/components/icons/Icon';
 import { DialogClose } from '@radix-ui/react-dialog';
+import Button from '../Button';
 import Flex from '../Flex';
 
 const DialogHeader: React.FC = ({ children }) => (
   <StyledDialogTitle>
     <Flex css={{ flex: 1 }}>{children}</Flex>
     <DialogClose asChild>
-      <StyledDialogCloseButton isIcon size="lg">
-        <Icon css={{ color: '$primary400' }} name="close" size={24} />
-      </StyledDialogCloseButton>
+      <Button isIcon size="md">
+        <Icon css={{ color: '$primary400' }} name="close" />
+      </Button>
     </DialogClose>
   </StyledDialogTitle>
 );
diff --git a/frontend/src/components/Teams/CreateTeam/ListCardsMembers/index.tsx b/frontend/src/components/Teams/CreateTeam/ListCardsMembers/index.tsx
index efc66b0f6..270cf8e86 100644
--- a/frontend/src/components/Teams/CreateTeam/ListCardsMembers/index.tsx
+++ b/frontend/src/components/Teams/CreateTeam/ListCardsMembers/index.tsx
@@ -41,7 +41,7 @@ const TeamMembersList = () => {
           </Text>
         </ButtonAddMember>
       </Flex>
-      <ScrollableContent direction="column" justify="start">
+      <ScrollableContent direction="column" justify="start" gap="8">
         {membersList?.map((member) => (
           <CardMember
             key={member.user._id}
diff --git a/frontend/src/components/Teams/CreateTeam/ListMembersDialog/index.tsx b/frontend/src/components/Teams/CreateTeam/ListMembersDialog/index.tsx
index 2a695348d..b9e6a0efa 100644
--- a/frontend/src/components/Teams/CreateTeam/ListMembersDialog/index.tsx
+++ b/frontend/src/components/Teams/CreateTeam/ListMembersDialog/index.tsx
@@ -5,7 +5,6 @@ import Icon from '@/components/icons/Icon';
 import Text from '@/components/Primitives/Text';
 import {
   ButtonsContainer,
-  StyledDialogCloseButton,
   StyledDialogContainer,
   StyledDialogContent,
   StyledDialogOverlay,
@@ -132,9 +131,9 @@ const ListMembersDialog = React.memo<ListMembersDialogProps>(
               <StyledDialogTitle>
                 <Text heading="4">{btnTitle}</Text>
                 <DialogClose asChild>
-                  <StyledDialogCloseButton isIcon size="lg">
-                    <Icon css={{ color: '$primary400' }} name="close" size={24} />
-                  </StyledDialogCloseButton>
+                  <Button isIcon size="md">
+                    <Icon css={{ color: '$primary400' }} name="close" />
+                  </Button>
                 </DialogClose>
               </StyledDialogTitle>
               <Flex css={{ padding: '$24 $32 $40' }} direction="column" gap={16}>
@@ -179,7 +178,7 @@ const ListMembersDialog = React.memo<ListMembersDialogProps>(
                   ))}
                 </Flex>
               </ScrollableContent>
-              <ButtonsContainer gap={24} justify="end">
+              <ButtonsContainer gap={24} justify="end" align="center">
                 {searchMember.length <= 0 && (
                   <Checkbox
                     checked={isCheckAll}
@@ -190,18 +189,10 @@ const ListMembersDialog = React.memo<ListMembersDialogProps>(
                     hasSelectAll
                   />
                 )}
-                <Button
-                  css={{ margin: '0 $24 0 auto', padding: '$16 $24' }}
-                  variant="primaryOutline"
-                  onClick={handleClose}
-                >
+                <Button variant="primaryOutline" onClick={handleClose}>
                   Cancel
                 </Button>
-                <Button
-                  css={{ marginRight: '$32', padding: '$16 $24' }}
-                  variant="primary"
-                  onClick={handleUpdateUsers}
-                >
+                <Button variant="primary" onClick={handleUpdateUsers}>
                   Update
                 </Button>
               </ButtonsContainer>
diff --git a/frontend/src/components/Teams/CreateTeam/index.tsx b/frontend/src/components/Teams/CreateTeam/index.tsx
index 40afdeab5..b4669457a 100644
--- a/frontend/src/components/Teams/CreateTeam/index.tsx
+++ b/frontend/src/components/Teams/CreateTeam/index.tsx
@@ -89,8 +89,8 @@ const CreateTeam = () => {
         <Text color="primary800" heading={3} weight="bold">
           Create New Team
         </Text>
-        <Button isIcon disabled={isBackButtonDisable} onClick={handleBack}>
-          <Icon name="close" />
+        <Button isIcon size="lg" disabled={isBackButtonDisable} onClick={handleBack}>
+          <Icon css={{ color: '$primaryBase' }} name="close" />
         </Button>
       </PageHeader>
       <ContentWrapper>
diff --git a/frontend/src/components/Users/UserEdit/partials/UserHeader/index.tsx b/frontend/src/components/Users/UserEdit/partials/UserHeader/index.tsx
index 2bf15d521..761541795 100644
--- a/frontend/src/components/Users/UserEdit/partials/UserHeader/index.tsx
+++ b/frontend/src/components/Users/UserEdit/partials/UserHeader/index.tsx
@@ -3,8 +3,8 @@ import Flex from '@/components/Primitives/Flex';
 import Text from '@/components/Primitives/Text';
 import { BreadcrumbType } from '@/types/board/Breadcrumb';
 import { useState } from 'react';
-import { AddNewBoardButton } from '@/components/layouts/DashboardLayout/styles';
 import Icon from '@/components/icons/Icon';
+import Button from '@/components/Primitives/Button';
 import { TitleSection } from './styles';
 import { ListTeams } from '../TeamsDialog';
 
@@ -73,10 +73,10 @@ const UserHeader = ({
               </Text>
             )}
           </Flex>
-          <AddNewBoardButton size="sm" onClick={handleOpen}>
-            <Icon css={{ color: 'white' }} name="plus" />
+          <Button size="sm" onClick={handleOpen}>
+            <Icon name="plus" />
             Add user to new team
-          </AddNewBoardButton>
+          </Button>
         </TitleSection>
       </Flex>
       <Flex justify="end" css={{ mt: '$40' }}>
diff --git a/frontend/src/components/auth/ForgotPassword/EmailSent.tsx b/frontend/src/components/auth/ForgotPassword/EmailSent.tsx
index ec93b0157..73c63a9fa 100644
--- a/frontend/src/components/auth/ForgotPassword/EmailSent.tsx
+++ b/frontend/src/components/auth/ForgotPassword/EmailSent.tsx
@@ -95,10 +95,6 @@ const EmailSent: FC<EmailSentProps> = ({ userEmail }) => {
       <Button
         size="lg"
         type="button"
-        css={{
-          fontWeight: '$medium',
-          fontSize: '$18',
-        }}
         onClick={() => {
           handleRecoverPassword(userEmail);
         }}
diff --git a/frontend/src/components/auth/ForgotPassword/ResetPassword.tsx b/frontend/src/components/auth/ForgotPassword/ResetPassword.tsx
index f65366ac5..306230ae8 100644
--- a/frontend/src/components/auth/ForgotPassword/ResetPassword.tsx
+++ b/frontend/src/components/auth/ForgotPassword/ResetPassword.tsx
@@ -91,14 +91,7 @@ const ResetPassword: React.FC<ResetPasswordProps> = ({ token }) => {
           placeholder="Repeat password"
           type="password"
         />
-        <Button
-          size="lg"
-          type="submit"
-          css={{
-            fontWeight: '$medium',
-            fontSize: '$18',
-          }}
-        >
+        <Button size="lg" type="submit">
           Recover password
         </Button>
       </FormProvider>
diff --git a/frontend/src/components/auth/ForgotPassword/TroubleLogin.tsx b/frontend/src/components/auth/ForgotPassword/TroubleLogin.tsx
index be104dd71..0057c6ba9 100644
--- a/frontend/src/components/auth/ForgotPassword/TroubleLogin.tsx
+++ b/frontend/src/components/auth/ForgotPassword/TroubleLogin.tsx
@@ -84,14 +84,7 @@ const TroubleLogin: React.FC<TroubleLoginProps> = ({ setShowTroubleLogin }) => {
           password.
         </Text>
         <Input css={{ mt: '$32' }} id="email" placeholder="Email address" type="text" />
-        <Button
-          size="lg"
-          type="submit"
-          css={{
-            fontWeight: '$medium',
-            fontSize: '$18',
-          }}
-        >
+        <Button size="lg" type="submit">
           Recover password
         </Button>
         <GoBackWrapper align="center" gap="8" onClick={handleShowTroubleLogginIn}>
diff --git a/frontend/src/components/auth/LoginForm/LoginSSO.tsx b/frontend/src/components/auth/LoginForm/LoginSSO.tsx
index 67bafb466..4868c7a7e 100644
--- a/frontend/src/components/auth/LoginForm/LoginSSO.tsx
+++ b/frontend/src/components/auth/LoginForm/LoginSSO.tsx
@@ -23,10 +23,11 @@ const LoginSSO = ({ handleLoginAzure }: LoginSSOProps) => (
       {NEXT_PUBLIC_ENABLE_AZURE && (
         <Button
           variant="primaryOutline"
+          size="lg"
           onClick={handleLoginAzure}
-          css={{ display: 'flex', width: '100%', fontWeight: '$regular' }}
+          css={{ display: 'flex', width: '100%' }}
         >
-          <Icon css={{ width: '$60', height: '$60' }} name="microsoft" />
+          <Icon name="microsoft" />
           Login with Microsoft
         </Button>
       )}
diff --git a/frontend/src/components/auth/LoginForm/index.tsx b/frontend/src/components/auth/LoginForm/index.tsx
index 7487399aa..bd792e0c0 100644
--- a/frontend/src/components/auth/LoginForm/index.tsx
+++ b/frontend/src/components/auth/LoginForm/index.tsx
@@ -24,7 +24,8 @@ import {
 } from '@/utils/constants';
 import { ToastStateEnum } from '@/utils/enums/toast-types';
 import { DASHBOARD_ROUTE } from '@/utils/routes';
-import { LoginButton, OrSeparator, StyledForm, StyledHoverIconFlex } from './styles';
+import Button from '@/components/Primitives/Button';
+import { OrSeparator, StyledForm, StyledHoverIconFlex } from './styles';
 import LoginSSO from './LoginSSO';
 
 interface LoginFormProps {
@@ -127,10 +128,10 @@ const LoginForm: React.FC<LoginFormProps> = ({ setShowTroubleLogin }) => {
           type="password"
         />
 
-        <LoginButton disabled={loading.credentials} size="lg" type="submit">
+        <Button disabled={loading.credentials} size="lg" type="submit">
           {loading.credentials && <DotsLoading color="primary800" size={10} />}
           {!loading.credentials && 'Log in'}
-        </LoginButton>
+        </Button>
         <Text
           data-testid="forgot-password-button"
           size="sm"
diff --git a/frontend/src/components/auth/LoginForm/styles.tsx b/frontend/src/components/auth/LoginForm/styles.tsx
index 62dda9946..1d6f0472c 100644
--- a/frontend/src/components/auth/LoginForm/styles.tsx
+++ b/frontend/src/components/auth/LoginForm/styles.tsx
@@ -1,18 +1,9 @@
 import { styled } from '@/styles/stitches/stitches.config';
 
-import Button from '@/components/Primitives/Button';
 import Flex from '@/components/Primitives/Flex';
 
 const StyledForm = styled('form', Flex, { width: '100%' });
 
-const LoginButton = styled(Button, {
-  fontWeight: '$medium',
-  '& svg': {
-    height: '$40 !important',
-    width: '$40 !important',
-  },
-});
-
 const StyledHoverIconFlex = styled('div', Flex, {
   '&:hover': {
     '&[data-loading="true"]': {
@@ -47,4 +38,4 @@ const OrSeparator = styled('div', {
   },
 });
 
-export { LoginButton, OrSeparator, StyledForm, StyledHoverIconFlex };
+export { OrSeparator, StyledForm, StyledHoverIconFlex };
diff --git a/frontend/src/components/auth/SignUp/RegisterForm.tsx b/frontend/src/components/auth/SignUp/RegisterForm.tsx
index 5f500c86f..0e8a83c51 100644
--- a/frontend/src/components/auth/SignUp/RegisterForm.tsx
+++ b/frontend/src/components/auth/SignUp/RegisterForm.tsx
@@ -144,12 +144,6 @@ const RegisterForm: React.FC<RegisterFormProps> = ({
           type="submit"
           css={{
             mt: '$24',
-            fontWeight: '$medium',
-            fontSize: '$18',
-            '& svg': {
-              height: '$40 !important',
-              width: '$40 !important',
-            },
           }}
         >
           Sign up
diff --git a/frontend/src/components/auth/SignUp/SignUpForm.tsx b/frontend/src/components/auth/SignUp/SignUpForm.tsx
index 012f99c0e..7ec6ad74f 100644
--- a/frontend/src/components/auth/SignUp/SignUpForm.tsx
+++ b/frontend/src/components/auth/SignUp/SignUpForm.tsx
@@ -115,18 +115,7 @@ const SignUpForm: React.FC<SignUpFormProps> = ({ setShowSignUp, setEmailName, em
           type="text"
         />
 
-        <Button
-          size="lg"
-          type="submit"
-          css={{
-            fontWeight: '$medium',
-            fontSize: '$18',
-            '& svg': {
-              height: '$40 !important',
-              width: '$40 !important',
-            },
-          }}
-        >
+        <Button size="lg" type="submit">
           Get Started
         </Button>
       </StyledForm>
diff --git a/frontend/src/components/auth/SignUp/SignUpOptionsForm.tsx b/frontend/src/components/auth/SignUp/SignUpOptionsForm.tsx
index ad56c3090..25a4ff3e5 100644
--- a/frontend/src/components/auth/SignUp/SignUpOptionsForm.tsx
+++ b/frontend/src/components/auth/SignUp/SignUpOptionsForm.tsx
@@ -43,12 +43,6 @@ const SignUpOptionsForm: React.FC<SignUpOptionsFormProps> = ({
         type="submit"
         css={{
           mt: '$32',
-          fontWeight: '$medium',
-          fontSize: '$18',
-          '& svg': {
-            height: '$40 !important',
-            width: '$40 !important',
-          },
         }}
         onClick={loginAzure}
       >
diff --git a/frontend/src/components/layouts/DashboardLayout/index.tsx b/frontend/src/components/layouts/DashboardLayout/index.tsx
index e8283a628..bc675fd79 100644
--- a/frontend/src/components/layouts/DashboardLayout/index.tsx
+++ b/frontend/src/components/layouts/DashboardLayout/index.tsx
@@ -4,7 +4,8 @@ import Link from 'next/link';
 import Icon from '@/components/icons/Icon';
 import Flex from '@/components/Primitives/Flex';
 import Text from '@/components/Primitives/Text';
-import { AddNewBoardButton, ContentSection } from './styles';
+import Button from '@/components/Primitives/Button';
+import { ContentSection } from './styles';
 
 type DashboardLayoutProps = {
   children: ReactNode;
@@ -28,18 +29,18 @@ const DashboardLayout = (props: DashboardLayoutProps) => {
           {isUsers && <Text heading="1">Users</Text>}
           {(isDashboard || isBoards) && (
             <Link href="/boards/new">
-              <AddNewBoardButton size={isDashboard ? 'sm' : 'md'}>
-                <Icon css={{ color: 'white' }} name="plus" />
+              <Button size={isDashboard ? 'sm' : 'md'}>
+                <Icon name="plus" />
                 Add new board
-              </AddNewBoardButton>
+              </Button>
             </Link>
           )}
           {isTeams && (
             <Link href="/teams/new">
-              <AddNewBoardButton size={isDashboard ? 'sm' : 'md'}>
-                <Icon css={{ color: 'white' }} name="plus" />
+              <Button size="md">
+                <Icon name="plus" />
                 Create new team
-              </AddNewBoardButton>
+              </Button>
             </Link>
           )}
         </Flex>
diff --git a/frontend/src/components/layouts/DashboardLayout/styles.tsx b/frontend/src/components/layouts/DashboardLayout/styles.tsx
index 104a54f7e..99c76b3a4 100644
--- a/frontend/src/components/layouts/DashboardLayout/styles.tsx
+++ b/frontend/src/components/layouts/DashboardLayout/styles.tsx
@@ -1,6 +1,5 @@
 import { styled } from '@/styles/stitches/stitches.config';
 
-import Button from '@/components/Primitives/Button';
 import Flex from '@/components/Primitives/Flex';
 
 const ContentSection = styled('section', Flex, {
@@ -8,13 +7,4 @@ const ContentSection = styled('section', Flex, {
   height: '100%',
 });
 
-const AddNewBoardButton = styled('button', Button, {
-  width: 'fit-content',
-  display: 'flex',
-  position: 'relative',
-  height: '$48',
-  fontWeight: '$medium !important',
-  lineHeight: '$20 !important',
-});
-
-export { AddNewBoardButton, ContentSection };
+export { ContentSection };
diff --git a/frontend/src/pages/404.tsx b/frontend/src/pages/404.tsx
index 8b397bd0a..c4dd9a866 100644
--- a/frontend/src/pages/404.tsx
+++ b/frontend/src/pages/404.tsx
@@ -1,15 +1,11 @@
 import Link from 'next/link';
 
-import {
-  BannerContainer,
-  ContainerSection,
-  GoBackButton,
-  ImageBackground,
-} from '@/styles/pages/error.styles';
+import { BannerContainer, ContainerSection, ImageBackground } from '@/styles/pages/error.styles';
 
 import LogoIcon from '@/components/icons/Logo';
 import Text from '@/components/Primitives/Text';
 import SecondaryBanner from '@/components/icons/SecondaryBanner';
+import Button from '@/components/Primitives/Button';
 
 export default function Custom404() {
   return (
@@ -32,9 +28,9 @@ export default function Custom404() {
           The page you are looking for might have been removed or is temporarily unavailable
         </Text>
         <Link href="/">
-          <GoBackButton css={{ mt: '$26' }} size="md" style={{ width: '100%' }} variant="primary">
+          <Button css={{ mt: '$26' }} size="md">
             Go to Home
-          </GoBackButton>
+          </Button>
         </Link>
       </ContainerSection>
     </ImageBackground>
diff --git a/frontend/src/pages/500.tsx b/frontend/src/pages/500.tsx
index 9adef8414..016514923 100644
--- a/frontend/src/pages/500.tsx
+++ b/frontend/src/pages/500.tsx
@@ -1,15 +1,11 @@
 import Link from 'next/link';
 
-import {
-  BannerContainer,
-  ContainerSection,
-  GoBackButton,
-  ImageBackground,
-} from '@/styles/pages/error.styles';
+import { BannerContainer, ContainerSection, ImageBackground } from '@/styles/pages/error.styles';
 
 import LogoIcon from '@/components/icons/Logo';
 import Text from '@/components/Primitives/Text';
 import SecondaryBanner from '@/components/icons/SecondaryBanner';
+import Button from '@/components/Primitives/Button';
 
 const Custom500 = () => (
   <ImageBackground>
@@ -31,9 +27,9 @@ const Custom500 = () => (
         Try to refresh this page or feel free to contact us if the problem persists.
       </Text>
       <Link href="/">
-        <GoBackButton css={{ mt: '$26' }} size="md" style={{ width: '100%' }} variant="primary">
+        <Button css={{ mt: '$26' }} size="md">
           Go to Home
-        </GoBackButton>
+        </Button>
       </Link>
     </ContainerSection>
   </ImageBackground>
diff --git a/frontend/src/pages/board-deleted.tsx b/frontend/src/pages/board-deleted.tsx
index 0c2437c7c..5beaf48fb 100644
--- a/frontend/src/pages/board-deleted.tsx
+++ b/frontend/src/pages/board-deleted.tsx
@@ -1,15 +1,11 @@
 import Link from 'next/link';
 
-import {
-  BannerContainer,
-  ContainerSection,
-  GoBackButton,
-  ImageBackground,
-} from '@/styles/pages/error.styles';
+import { BannerContainer, ContainerSection, ImageBackground } from '@/styles/pages/error.styles';
 
 import Banner from '@/components/icons/Banner';
 import LogoIcon from '@/components/icons/Logo';
 import Text from '@/components/Primitives/Text';
+import Button from '@/components/Primitives/Button';
 
 export default function Custom404() {
   return (
@@ -32,9 +28,9 @@ export default function Custom404() {
           The board was deleted by a board admin
         </Text>
         <Link href="/dashboard">
-          <GoBackButton css={{ mt: '$26' }} size="md" style={{ width: '100%' }} variant="primary">
+          <Button css={{ mt: '$26' }} size="md">
             Go to Dashboard
-          </GoBackButton>
+          </Button>
         </Link>
       </ContainerSection>
     </ImageBackground>
diff --git a/frontend/src/pages/boards/[boardId].tsx b/frontend/src/pages/boards/[boardId].tsx
index 19bf7a46d..5ec2e562d 100644
--- a/frontend/src/pages/boards/[boardId].tsx
+++ b/frontend/src/pages/boards/[boardId].tsx
@@ -218,7 +218,7 @@ const Board: NextPage<Props> = ({ boardId, mainBoardId }) => {
 
           {hasAdminRole && !board?.submitedAt && (
             <>
-              <Button onClick={handleOpen} variant="primaryOutline" css={{ fontWeight: '$medium' }}>
+              <Button onClick={handleOpen} variant="primaryOutline">
                 <Icon name="settings" />
                 Board settings
                 <Icon name="arrow-down" />
diff --git a/frontend/src/pages/boards/new.tsx b/frontend/src/pages/boards/new.tsx
index e1cdf1a2f..a33c46ec8 100644
--- a/frontend/src/pages/boards/new.tsx
+++ b/frontend/src/pages/boards/new.tsx
@@ -38,8 +38,8 @@ const NewBoard: NextPage = () => {
         <Text color="primary800" heading={3} weight="bold">
           Add new board
         </Text>
-        <Button isIcon disabled={isBackButtonDisable} onClick={handleBack}>
-          <Icon name="close" />
+        <Button isIcon size="lg" disabled={isBackButtonDisable} onClick={handleBack}>
+          <Icon css={{ color: '$primaryBase' }} name="close" />
         </Button>
       </PageHeader>
 
diff --git a/frontend/src/pages/boards/newRegularBoard.tsx b/frontend/src/pages/boards/newRegularBoard.tsx
index 5113d48c0..df95b1c32 100644
--- a/frontend/src/pages/boards/newRegularBoard.tsx
+++ b/frontend/src/pages/boards/newRegularBoard.tsx
@@ -269,8 +269,8 @@ const NewRegularBoard: NextPage = () => {
               Add new Regular board
             </Text>
 
-            <Button isIcon disabled={isBackButtonDisable} onClick={handleBack}>
-              <Icon name="close" />
+            <Button isIcon size="lg" disabled={isBackButtonDisable} onClick={handleBack}>
+              <Icon css={{ color: '$primaryBase' }} name="close" />
             </Button>
           </PageHeader>
           {createBoard ? (
diff --git a/frontend/src/pages/boards/newSplitBoard.tsx b/frontend/src/pages/boards/newSplitBoard.tsx
index 1fc7e0cf7..606189c80 100644
--- a/frontend/src/pages/boards/newSplitBoard.tsx
+++ b/frontend/src/pages/boards/newSplitBoard.tsx
@@ -242,8 +242,8 @@ const NewSplitBoard: NextPage = () => {
               Add new SPLIT board
             </Text>
 
-            <Button isIcon disabled={isBackButtonDisable} onClick={handleBack}>
-              <Icon name="close" />
+            <Button isIcon size="lg" disabled={isBackButtonDisable} onClick={handleBack}>
+              <Icon css={{ color: '$primaryBase' }} name="close" />
             </Button>
           </PageHeader>
           <ContentWrapper>
diff --git a/frontend/src/styles/pages/boards/new.styles.tsx b/frontend/src/styles/pages/boards/new.styles.tsx
index 599b9f65c..f4bb7ba02 100644
--- a/frontend/src/styles/pages/boards/new.styles.tsx
+++ b/frontend/src/styles/pages/boards/new.styles.tsx
@@ -17,16 +17,6 @@ const PageHeader = styled('header', {
   justifyContent: 'space-between',
   padding: '$32 $40',
   backgroundColor: '$white',
-  button: {
-    '& svg': {
-      size: '$40 !important',
-      color: '$primary800',
-    },
-    transition: 'background-color 0.2s ease-in-out',
-    '&:hover': {
-      backgroundColor: '$primaryLightest',
-    },
-  },
 });
 
 const ContentContainer = styled('section', {
diff --git a/frontend/src/styles/pages/boards/newSplitBoard.styles.tsx b/frontend/src/styles/pages/boards/newSplitBoard.styles.tsx
index 2324c837b..02a0c8f90 100644
--- a/frontend/src/styles/pages/boards/newSplitBoard.styles.tsx
+++ b/frontend/src/styles/pages/boards/newSplitBoard.styles.tsx
@@ -17,23 +17,8 @@ const PageHeader = styled('header', {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
-
   padding: '$32 $40',
-
   backgroundColor: '$white',
-
-  button: {
-    '& svg': {
-      size: '$40 !important',
-      color: '$primary800',
-    },
-
-    transition: 'background-color 0.2s ease-in-out',
-
-    '&:hover': {
-      backgroundColor: '$primaryLightest',
-    },
-  },
 });
 
 const ContentWrapper = styled('section', {
diff --git a/frontend/src/styles/pages/error.styles.tsx b/frontend/src/styles/pages/error.styles.tsx
index 0a02c83bb..ab1aff423 100644
--- a/frontend/src/styles/pages/error.styles.tsx
+++ b/frontend/src/styles/pages/error.styles.tsx
@@ -1,6 +1,5 @@
 import { styled } from '@/styles/stitches/stitches.config';
 
-import Button from '@/components/Primitives/Button';
 import Flex from '@/components/Primitives/Flex';
 
 export const ContainerSection = styled('div', {
@@ -39,5 +38,3 @@ export const BannerContainer = styled(Flex, {
   left: '112px',
   top: '72px',
 });
-
-export const GoBackButton = styled('a', Button, {});
diff --git a/frontend/src/styles/stitches/partials/sizes.ts b/frontend/src/styles/stitches/partials/sizes.ts
index 07899c6fa..60b06f3fd 100644
--- a/frontend/src/styles/stitches/partials/sizes.ts
+++ b/frontend/src/styles/stitches/partials/sizes.ts
@@ -15,6 +15,7 @@ const sizes = {
   20: '1.25rem',
   21: '1.3125rem',
   24: '1.50rem',
+  28: '1.75rem',
   32: '2rem',
   34: '2.125rem',
   35: '2.1875rem',
@@ -23,6 +24,7 @@ const sizes = {
   40: '2.5rem',
   42: '2.625rem',
   48: '3rem',
+  52: '3.25rem',
   56: '3.5rem',
   58: '3.625rem',
   60: '3.75rem',

From 51a77ac2558d651ad622702bbac1c5be61b1a27e Mon Sep 17 00:00:00 2001
From: Guido <stereopt@gmail.com>
Date: Thu, 26 Jan 2023 17:01:03 +0000
Subject: [PATCH 2/8] fix: button sizes

---
 frontend/src/components/layouts/DashboardLayout/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/layouts/DashboardLayout/index.tsx b/frontend/src/components/layouts/DashboardLayout/index.tsx
index bc675fd79..96d38824c 100644
--- a/frontend/src/components/layouts/DashboardLayout/index.tsx
+++ b/frontend/src/components/layouts/DashboardLayout/index.tsx
@@ -29,7 +29,7 @@ const DashboardLayout = (props: DashboardLayoutProps) => {
           {isUsers && <Text heading="1">Users</Text>}
           {(isDashboard || isBoards) && (
             <Link href="/boards/new">
-              <Button size={isDashboard ? 'sm' : 'md'}>
+              <Button size="sm">
                 <Icon name="plus" />
                 Add new board
               </Button>
@@ -37,7 +37,7 @@ const DashboardLayout = (props: DashboardLayoutProps) => {
           )}
           {isTeams && (
             <Link href="/teams/new">
-              <Button size="md">
+              <Button size="sm">
                 <Icon name="plus" />
                 Create new team
               </Button>

From 7aeb8859e0cef69bb290a19a46ef382eb7262b3c Mon Sep 17 00:00:00 2001
From: Guido <stereopt@gmail.com>
Date: Thu, 26 Jan 2023 17:01:48 +0000
Subject: [PATCH 3/8] fix: comment button alignment

---
 .../src/components/Board/AddCardOrComment.tsx | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/Board/AddCardOrComment.tsx b/frontend/src/components/Board/AddCardOrComment.tsx
index 42b7d2e00..365e847b6 100644
--- a/frontend/src/components/Board/AddCardOrComment.tsx
+++ b/frontend/src/components/Board/AddCardOrComment.tsx
@@ -208,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%' }} justify="end">
+            {!isCard && (
+              <Checkbox
+                id={colId + cardId}
+                label="Add anonymously"
+                size="16"
+                checked={anonymous}
+                setCheckedTerms={() => {
+                  setIsCommentAnonymous(!isCommentAnonymous);
+                }}
+              />
+            )}
             {!isEditing && (
               <Checkbox
                 id={colId}

From 0e0a64dc85dcb7287c278d8db36d3318e3aa1d62 Mon Sep 17 00:00:00 2001
From: Guido <stereopt@gmail.com>
Date: Fri, 27 Jan 2023 11:15:04 +0000
Subject: [PATCH 4/8] fix: link button styles

---
 .../Boards/MyBoards/ListBoards/index.tsx      | 43 +++----------------
 .../SelectParticipants/index.tsx              | 20 +++------
 .../SubTeamsTab/QuickEditSubTeams.tsx         | 31 +++----------
 frontend/src/components/Primitives/Button.tsx | 17 ++++++++
 .../components/Primitives/Dialog/styles.tsx   | 16 +------
 .../Teams/CreateTeam/AddMemberBtn/index.tsx   | 19 --------
 .../Teams/CreateTeam/AddMemberBtn/styles.tsx  | 16 -------
 .../CreateTeam/ListCardsMembers/index.tsx     | 19 +++-----
 .../CreateTeam/ListMembersDialog/styles.tsx   | 15 +------
 .../Teams/Team/ListCardMembers/index.tsx      | 19 +++-----
 .../UserEdit/partials/TeamsDialog/styles.tsx  | 16 +------
 frontend/src/stories/Button.stories.tsx       |  1 +
 frontend/src/stories/types/PrimitiveTypes.tsx |  3 +-
 13 files changed, 50 insertions(+), 185 deletions(-)
 delete mode 100644 frontend/src/components/Teams/CreateTeam/AddMemberBtn/index.tsx
 delete mode 100644 frontend/src/components/Teams/CreateTeam/AddMemberBtn/styles.tsx

diff --git a/frontend/src/components/Boards/MyBoards/ListBoards/index.tsx b/frontend/src/components/Boards/MyBoards/ListBoards/index.tsx
index d2844dcdf..186525ec7 100644
--- a/frontend/src/components/Boards/MyBoards/ListBoards/index.tsx
+++ b/frontend/src/components/Boards/MyBoards/ListBoards/index.tsx
@@ -11,6 +11,7 @@ import { Socket } from 'socket.io-client';
 import { Team } from '@/types/team/team';
 import Link from 'next/link';
 import { TeamUserRoles } from '@/utils/enums/team.user.roles';
+import Button from '@/components/Primitives/Button';
 import { ScrollableContent } from '../styles';
 import TeamHeader from '../../TeamHeader';
 
@@ -79,42 +80,12 @@ const ListBoards = React.memo<ListBoardsProps>(
                       query: { team: teamId },
                     }}
                   >
-                    <Flex
-                      css={{
-                        position: 'relative',
-                        zIndex: '9',
-                        '& svg': { size: '$16' },
-                        right: 0,
-                        top: '-$12',
-                      }}
-                      gap="8"
-                    >
-                      <Icon
-                        name="plus"
-                        css={{
-                          width: '$16',
-                          height: '$32',
-                          marginRight: '$5',
-                        }}
-                      />
-                      <Text
-                        heading="6"
-                        css={{
-                          width: 'fit-content',
-                          display: 'flex',
-                          alignItems: 'center',
-                          '@hover': {
-                            '&:hover': {
-                              cursor: 'pointer',
-                            },
-                          },
-                        }}
-                      >
-                        {!Array.from(dataByTeamAndDate.teams.keys()).includes(teamId)
-                          ? 'Add new personal board'
-                          : 'Add new team board'}
-                      </Text>
-                    </Flex>
+                    <Button variant="link" size="sm" css={{ zIndex: '9' }}>
+                      <Icon name="plus" />
+                      {!Array.from(dataByTeamAndDate.teams.keys()).includes(teamId)
+                        ? 'Add new personal board'
+                        : 'Add new team board'}
+                    </Button>
                   </Link>
                 )}
               </Flex>
diff --git a/frontend/src/components/CreateBoard/RegularBoard/ParticipantsTab/SelectParticipants/index.tsx b/frontend/src/components/CreateBoard/RegularBoard/ParticipantsTab/SelectParticipants/index.tsx
index 6e5d1e04a..c6a0387be 100644
--- a/frontend/src/components/CreateBoard/RegularBoard/ParticipantsTab/SelectParticipants/index.tsx
+++ b/frontend/src/components/CreateBoard/RegularBoard/ParticipantsTab/SelectParticipants/index.tsx
@@ -6,9 +6,8 @@ import { createBoardDataState } from '@/store/createBoard/atoms/create-board.ato
 import { usersListState } from '@/store/team/atom/team.atom';
 import { useSession } from 'next-auth/react';
 import { BoardUserRoles } from '@/utils/enums/board.user.roles';
-import { ButtonAddMember } from '@/components/Primitives/Dialog/styles';
 import Icon from '@/components/icons/Icon';
-import Text from '@/components/Primitives/Text';
+import Button from '@/components/Primitives/Button';
 import ListParticipants from '../ListParticipants';
 
 const SelectParticipants = () => {
@@ -57,19 +56,10 @@ const SelectParticipants = () => {
     <Flex direction="column" css={{ width: '100%' }}>
       <UsersBox haveError={false} participants={usersListNames} title="Participants" />
       <Flex justify="end" css={{ mt: '$10' }}>
-        <ButtonAddMember onClick={handleOpen}>
-          <Icon css={{ width: '$16', height: '$16' }} name="plus" />{' '}
-          <Text
-            weight="medium"
-            css={{
-              ml: '$10',
-              fontSize: '$14',
-              lineHeight: '$18',
-            }}
-          >
-            Add/remove participants
-          </Text>
-        </ButtonAddMember>
+        <Button variant="link" size="sm" onClick={handleOpen}>
+          <Icon name="plus" />
+          Add/remove participants
+        </Button>
       </Flex>
       <ListParticipants isOpen={isOpen} setIsOpen={setIsOpen} />
     </Flex>
diff --git a/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/QuickEditSubTeams.tsx b/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/QuickEditSubTeams.tsx
index 7d8af061c..14f8fec53 100644
--- a/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/QuickEditSubTeams.tsx
+++ b/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/QuickEditSubTeams.tsx
@@ -16,6 +16,7 @@ import Text from '@/components/Primitives/Text';
 import useCreateBoard from '@/hooks/useCreateBoard';
 import { Team } from '@/types/team/team';
 import isEmpty from '@/utils/isEmpty';
+import Button from '@/components/Primitives/Button';
 
 interface QuickEditSubTeamsProps {
   team: Team;
@@ -165,32 +166,10 @@ const QuickEditSubTeams = ({ team }: QuickEditSubTeamsProps) => {
   return (
     <AlertDialog>
       <AlertDialogTrigger asChild>
-        <Flex
-          align="center"
-          gap="8"
-          justify="end"
-          css={{
-            py: '$14',
-            cursor: 'pointer',
-            transition: 'text-decoration 0.2s ease-in-out',
-            '&:hover': {
-              '&>span': {
-                textDecoration: 'underline',
-              },
-            },
-          }}
-        >
-          <Icon
-            name="edit"
-            css={{
-              width: '$16',
-              height: '$16',
-            }}
-          />
-          <Text size="sm" weight="medium">
-            Quick edit sub-teams configurations
-          </Text>
-        </Flex>
+        <Button variant="link" size="sm" css={{ py: '$24' }}>
+          <Icon name="edit" />
+          Quick edit sub-teams configurations
+        </Button>
       </AlertDialogTrigger>
       <AlertDialogContent css={{ left: '35% !important', top: '200px', flexDirection: 'column' }}>
         <Flex align="center" css={{ px: '$32', py: '$24' }} justify="between">
diff --git a/frontend/src/components/Primitives/Button.tsx b/frontend/src/components/Primitives/Button.tsx
index af70a106c..232d8067c 100644
--- a/frontend/src/components/Primitives/Button.tsx
+++ b/frontend/src/components/Primitives/Button.tsx
@@ -148,6 +148,23 @@ const Button = styled('button', {
           opacity: 0.3,
         },
       },
+      link: {
+        color: '$primaryBase',
+        backgroundColor: '$transparent',
+        border: 'none',
+        '@hover': {
+          '&:hover': {
+            textDecoration: 'underline',
+          },
+        },
+        '&:active': {
+          textDecoration: 'underline',
+        },
+        '&:disabled': {
+          color: '$primary200',
+          backgroundColor: '$transparent',
+        },
+      },
     },
     isIcon: {
       true: {
diff --git a/frontend/src/components/Primitives/Dialog/styles.tsx b/frontend/src/components/Primitives/Dialog/styles.tsx
index d305b7532..437119b79 100644
--- a/frontend/src/components/Primitives/Dialog/styles.tsx
+++ b/frontend/src/components/Primitives/Dialog/styles.tsx
@@ -2,20 +2,6 @@ import { styled } from '@/styles/stitches/stitches.config';
 import Flex from '@/components/Primitives/Flex';
 import Text from '@/components/Primitives/Text';
 
-const ButtonAddMember = styled('button', {
-  color: 'black',
-  display: 'flex',
-  alignItems: 'center',
-  backgroundColor: 'transparent',
-  border: 0,
-  fontSize: '13px',
-  '&:hover': {
-    cursor: 'pointer',
-    textDecoration: 'underline',
-  },
-  marginTop: '10px',
-});
-
 const ScrollableContent = styled(Flex, {
   mt: '$24',
   height: 'calc(100vh - 390px)',
@@ -177,4 +163,4 @@ const StyledInput = styled('input', {
   },
 });
 
-export { ButtonAddMember, IconWrapper, PlaceholderText, ScrollableContent, StyledInput };
+export { IconWrapper, PlaceholderText, ScrollableContent, StyledInput };
diff --git a/frontend/src/components/Teams/CreateTeam/AddMemberBtn/index.tsx b/frontend/src/components/Teams/CreateTeam/AddMemberBtn/index.tsx
deleted file mode 100644
index cdc53dc56..000000000
--- a/frontend/src/components/Teams/CreateTeam/AddMemberBtn/index.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
-import Icon from '@/components/icons/Icon';
-import { ButtonAddMember } from './styles';
-
-const AddMemberBtn = () => (
-  <Flex css={{ width: '100%', mt: '$10' }} direction="column" gap="8">
-    <Flex align="center" css={{ justifyContent: 'end' }}>
-      <ButtonAddMember>
-        <Icon css={{ width: '$16', height: '$16' }} name="plus" />{' '}
-        <Text css={{ ml: '$10', fontSize: '$14', lineHeight: '$18' }} weight="bold">
-          Add new member
-        </Text>
-      </ButtonAddMember>
-    </Flex>
-  </Flex>
-);
-
-export default AddMemberBtn;
diff --git a/frontend/src/components/Teams/CreateTeam/AddMemberBtn/styles.tsx b/frontend/src/components/Teams/CreateTeam/AddMemberBtn/styles.tsx
deleted file mode 100644
index 98d7fea8e..000000000
--- a/frontend/src/components/Teams/CreateTeam/AddMemberBtn/styles.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { styled } from '@/styles/stitches/stitches.config';
-
-const ButtonAddMember = styled('button', {
-  color: 'black',
-  display: 'flex',
-  alignItems: 'center',
-  backgroundColor: 'transparent',
-  border: 0,
-  fontSize: '13px',
-  '&:hover': {
-    cursor: 'pointer',
-    textDecoration: 'underline',
-  },
-});
-
-export { ButtonAddMember };
diff --git a/frontend/src/components/Teams/CreateTeam/ListCardsMembers/index.tsx b/frontend/src/components/Teams/CreateTeam/ListCardsMembers/index.tsx
index 270cf8e86..e809d1686 100644
--- a/frontend/src/components/Teams/CreateTeam/ListCardsMembers/index.tsx
+++ b/frontend/src/components/Teams/CreateTeam/ListCardsMembers/index.tsx
@@ -5,10 +5,10 @@ import Flex from '@/components/Primitives/Flex';
 import Text from '@/components/Primitives/Text';
 import { membersListState } from '@/store/team/atom/team.atom';
 import Icon from '@/components/icons/Icon';
+import Button from '@/components/Primitives/Button';
 import CardMember from '../CardMember';
 import { ListMembers } from '../ListMembers';
 import { ScrollableContent } from './styles';
-import { ButtonAddMember } from '../ListMembersDialog/styles';
 
 const TeamMembersList = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -27,19 +27,10 @@ const TeamMembersList = () => {
         <Text css={{ flex: 1 }} heading="3">
           Team Members
         </Text>
-        <ButtonAddMember onClick={handleOpen}>
-          <Icon css={{ width: '$16', height: '$16' }} name="plus" />{' '}
-          <Text
-            weight="medium"
-            css={{
-              ml: '$10',
-              fontSize: '$14',
-              lineHeight: '$18',
-            }}
-          >
-            Add/remove members
-          </Text>
-        </ButtonAddMember>
+        <Button variant="link" size="sm" onClick={handleOpen}>
+          <Icon name="plus" />
+          Add/remove members
+        </Button>
       </Flex>
       <ScrollableContent direction="column" justify="start" gap="8">
         {membersList?.map((member) => (
diff --git a/frontend/src/components/Teams/CreateTeam/ListMembersDialog/styles.tsx b/frontend/src/components/Teams/CreateTeam/ListMembersDialog/styles.tsx
index aa971238f..71c991978 100644
--- a/frontend/src/components/Teams/CreateTeam/ListMembersDialog/styles.tsx
+++ b/frontend/src/components/Teams/CreateTeam/ListMembersDialog/styles.tsx
@@ -2,19 +2,6 @@ import { styled } from '@/styles/stitches/stitches.config';
 import Flex from '@/components/Primitives/Flex';
 import Text from '@/components/Primitives/Text';
 
-const ButtonAddMember = styled('button', {
-  color: 'black',
-  display: 'flex',
-  alignItems: 'center',
-  backgroundColor: 'transparent',
-  border: 0,
-  fontSize: '13px',
-  '&:hover': {
-    cursor: 'pointer',
-    textDecoration: 'underline',
-  },
-});
-
 const ScrollableContent = styled(Flex, {
   mt: '$24',
   height: 'calc(100vh - 390px)',
@@ -186,4 +173,4 @@ const StyledInput = styled('input', {
   },
 });
 
-export { ButtonAddMember, IconWrapper, PlaceholderText, ScrollableContent, StyledInput };
+export { IconWrapper, PlaceholderText, ScrollableContent, StyledInput };
diff --git a/frontend/src/components/Teams/Team/ListCardMembers/index.tsx b/frontend/src/components/Teams/Team/ListCardMembers/index.tsx
index e2da161ba..88b121076 100644
--- a/frontend/src/components/Teams/Team/ListCardMembers/index.tsx
+++ b/frontend/src/components/Teams/Team/ListCardMembers/index.tsx
@@ -8,8 +8,8 @@ import { membersListState } from '@/store/team/atom/team.atom';
 import { TeamUserRoles } from '@/utils/enums/team.user.roles';
 
 import CardMember from '@/components/Teams/CreateTeam/CardMember';
-import { ButtonAddMember } from '@/components/Primitives/Dialog/styles';
 import Icon from '@/components/icons/Icon';
+import Button from '@/components/Primitives/Button';
 import { ListMembers } from '../../CreateTeam/ListMembers';
 import { ScrollableContent } from './styles';
 
@@ -51,19 +51,10 @@ const TeamMembersList = ({ handleMembersList }: TeamMemberListProps) => {
           Team Members
         </Text>
         {(!isTeamMember || isSAdmin) && (
-          <ButtonAddMember onClick={handleOpen}>
-            <Icon css={{ width: '$16', height: '$16' }} name="plus" />{' '}
-            <Text
-              weight="medium"
-              css={{
-                ml: '$10',
-                fontSize: '$14',
-                lineHeight: '$18',
-              }}
-            >
-              Add/remove members
-            </Text>
-          </ButtonAddMember>
+          <Button variant="link" size="sm" onClick={handleOpen}>
+            <Icon name="plus" />
+            Add/remove members
+          </Button>
         )}
       </Flex>
       <ScrollableContent
diff --git a/frontend/src/components/Users/UserEdit/partials/TeamsDialog/styles.tsx b/frontend/src/components/Users/UserEdit/partials/TeamsDialog/styles.tsx
index d305b7532..437119b79 100644
--- a/frontend/src/components/Users/UserEdit/partials/TeamsDialog/styles.tsx
+++ b/frontend/src/components/Users/UserEdit/partials/TeamsDialog/styles.tsx
@@ -2,20 +2,6 @@ import { styled } from '@/styles/stitches/stitches.config';
 import Flex from '@/components/Primitives/Flex';
 import Text from '@/components/Primitives/Text';
 
-const ButtonAddMember = styled('button', {
-  color: 'black',
-  display: 'flex',
-  alignItems: 'center',
-  backgroundColor: 'transparent',
-  border: 0,
-  fontSize: '13px',
-  '&:hover': {
-    cursor: 'pointer',
-    textDecoration: 'underline',
-  },
-  marginTop: '10px',
-});
-
 const ScrollableContent = styled(Flex, {
   mt: '$24',
   height: 'calc(100vh - 390px)',
@@ -177,4 +163,4 @@ const StyledInput = styled('input', {
   },
 });
 
-export { ButtonAddMember, IconWrapper, PlaceholderText, ScrollableContent, StyledInput };
+export { IconWrapper, PlaceholderText, ScrollableContent, StyledInput };
diff --git a/frontend/src/stories/Button.stories.tsx b/frontend/src/stories/Button.stories.tsx
index 0563d5a2f..d59cca728 100644
--- a/frontend/src/stories/Button.stories.tsx
+++ b/frontend/src/stories/Button.stories.tsx
@@ -14,6 +14,7 @@ const VARIANT_OPTIONS: ButtonVariantType[] = [
   'lightOutline',
   'danger',
   'dangerOutline',
+  'link',
 ];
 
 const SIZE_OPTIONS: SizeType[] = ['sm', 'md', 'lg'];
diff --git a/frontend/src/stories/types/PrimitiveTypes.tsx b/frontend/src/stories/types/PrimitiveTypes.tsx
index 3d0d01205..abee6b25f 100644
--- a/frontend/src/stories/types/PrimitiveTypes.tsx
+++ b/frontend/src/stories/types/PrimitiveTypes.tsx
@@ -9,7 +9,8 @@ export type ButtonVariantType =
   | 'light'
   | 'lightOutline'
   | 'danger'
-  | 'dangerOutline';
+  | 'dangerOutline'
+  | 'link';
 export type SizeType = 'sm' | 'md' | 'lg';
 
 // Primitive/Flex

From 92503eea47fc3e5062803c2ab39f212841a07cd2 Mon Sep 17 00:00:00 2001
From: Guido <stereopt@gmail.com>
Date: Fri, 27 Jan 2023 11:28:17 +0000
Subject: [PATCH 5/8] feat: button with icon story

---
 frontend/src/stories/Button.stories.tsx | 62 ++++++++++++++-----------
 1 file changed, 35 insertions(+), 27 deletions(-)

diff --git a/frontend/src/stories/Button.stories.tsx b/frontend/src/stories/Button.stories.tsx
index d59cca728..86b6fab62 100644
--- a/frontend/src/stories/Button.stories.tsx
+++ b/frontend/src/stories/Button.stories.tsx
@@ -19,6 +19,21 @@ const VARIANT_OPTIONS: ButtonVariantType[] = [
 
 const SIZE_OPTIONS: SizeType[] = ['sm', 'md', 'lg'];
 
+const DISABLE_ARG_TYPES = {
+  variant: {
+    control: false,
+  },
+  isIcon: {
+    control: false,
+  },
+  textSize: {
+    control: false,
+  },
+  size: {
+    control: false,
+  },
+};
+
 export default {
   title: 'Primitives/Button',
   component: Button,
@@ -109,6 +124,23 @@ export const Variants: ComponentStory<typeof Button> = ({ children, disabled })
   </Flex>
 );
 
+export const IconButton: ComponentStory<typeof Button> = ({ children, disabled }) => (
+  <Flex justify="evenly" wrap="wrap">
+    <Sprite />
+    {VARIANT_OPTIONS.map((variant) => (
+      <Flex direction="column" justify="center" align="center" gap={20} key={variant}>
+        <h4>Variant {variant}</h4>
+        {SIZE_OPTIONS.map((size) => (
+          <Button variant={variant} size={size} disabled={disabled} key={size}>
+            <Icon name="plus" />
+            {children}
+          </Button>
+        ))}
+      </Flex>
+    ))}
+  </Flex>
+);
+
 /* eslint-disable @typescript-eslint/no-unused-vars */
 export const Icons: ComponentStory<typeof Button> = ({ ...args }) => (
   <Flex justify="evenly" wrap="wrap">
@@ -124,35 +156,11 @@ export const Icons: ComponentStory<typeof Button> = ({ ...args }) => (
   </Flex>
 );
 
-Variants.argTypes = {
-  variant: {
-    control: false,
-  },
-  isIcon: {
-    control: false,
-  },
-  textSize: {
-    control: false,
-  },
-  size: {
-    control: false,
-  },
-};
-
+Variants.argTypes = DISABLE_ARG_TYPES;
+IconButton.argTypes = DISABLE_ARG_TYPES;
 Icons.argTypes = {
+  ...DISABLE_ARG_TYPES,
   children: {
     control: false,
   },
-  variant: {
-    control: false,
-  },
-  isIcon: {
-    control: false,
-  },
-  textSize: {
-    control: false,
-  },
-  size: {
-    control: false,
-  },
 };

From ec58d4ec731d7d1f017316463a17dc61bc2eff57 Mon Sep 17 00:00:00 2001
From: Guido <stereopt@gmail.com>
Date: Fri, 27 Jan 2023 11:39:12 +0000
Subject: [PATCH 6/8] fix: regular board, add new column button

---
 .../src/components/Board/Settings/index.tsx   | 13 ++++--
 .../partials/Columns/AddColumnButton.tsx      | 46 -------------------
 2 files changed, 9 insertions(+), 50 deletions(-)
 delete mode 100644 frontend/src/components/Board/Settings/partials/Columns/AddColumnButton.tsx

diff --git a/frontend/src/components/Board/Settings/index.tsx b/frontend/src/components/Board/Settings/index.tsx
index 6f8afd61b..4d9a2f050 100644
--- a/frontend/src/components/Board/Settings/index.tsx
+++ b/frontend/src/components/Board/Settings/index.tsx
@@ -22,11 +22,11 @@ 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 { ConfigurationSwitchSettings } from './partials/ConfigurationSettings/ConfigurationSwitch';
 import { ConfigurationSettings } from './partials/ConfigurationSettings';
 import { TeamResponsibleSettings } from './partials/TeamResponsible';
 import { ColumnSettings } from './partials/Columns';
-import { AddColumnButton } from './partials/Columns/AddColumnButton';
 import { ColumnBoxAndDelete } from './partials/Columns/ColumnBoxAndDelete';
 
 const DEFAULT_MAX_VOTES = 6;
@@ -514,9 +514,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>
                   )}
diff --git a/frontend/src/components/Board/Settings/partials/Columns/AddColumnButton.tsx b/frontend/src/components/Board/Settings/partials/Columns/AddColumnButton.tsx
deleted file mode 100644
index 0fc7029e6..000000000
--- a/frontend/src/components/Board/Settings/partials/Columns/AddColumnButton.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import Text from '@/components/Primitives/Text';
-import Flex from '@/components/Primitives/Flex';
-import Icon from '@/components/icons/Icon';
-
-interface Props {
-  onAddColumn: () => void;
-}
-
-const AddColumnButton = ({ onAddColumn }: Props) => (
-  <Flex
-    css={{
-      position: 'relative',
-      zIndex: '9',
-      '& svg': { size: '$16' },
-      right: 0,
-    }}
-    gap="8"
-    onClick={onAddColumn}
-  >
-    <Icon
-      name="plus"
-      css={{
-        width: '$16',
-        height: '$32',
-        marginRight: '$5',
-      }}
-    />
-    <Text
-      heading="6"
-      css={{
-        width: 'fit-content',
-        display: 'flex',
-        alignItems: 'center',
-        '@hover': {
-          '&:hover': {
-            cursor: 'pointer',
-          },
-        },
-      }}
-    >
-      Add new column
-    </Text>
-  </Flex>
-);
-
-export { AddColumnButton };

From 47b8212f6a827ad00232394eee60bf03b4f56836 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Salvador?=
 <24455614+JoaoSaIvador@users.noreply.github.com>
Date: Fri, 27 Jan 2023 12:11:20 +0000
Subject: [PATCH 7/8] fix: remove duplicate import

---
 frontend/src/components/Board/Settings/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/components/Board/Settings/index.tsx b/frontend/src/components/Board/Settings/index.tsx
index e6de0b56f..92047bcad 100644
--- a/frontend/src/components/Board/Settings/index.tsx
+++ b/frontend/src/components/Board/Settings/index.tsx
@@ -29,7 +29,6 @@ import { ConfigurationSettings } from './partials/ConfigurationSettings';
 import { TeamResponsibleSettings } from './partials/TeamResponsible';
 import { ColumnBoxAndDelete } from './partials/Columns/ColumnBoxAndDelete';
 import { ColumnSettings } from './partials/Columns';
-import { ColumnBoxAndDelete } from './partials/Columns/ColumnBoxAndDelete';
 import { colors } from '../Column/partials/OptionsMenu';
 
 const DEFAULT_MAX_VOTES = 6;

From 6f53e881a19894a6c4d3aced72c5fdefe5f4ee14 Mon Sep 17 00:00:00 2001
From: JoaoSaIvador <j.salvador@kigroup.de>
Date: Fri, 27 Jan 2023 16:32:11 +0000
Subject: [PATCH 8/8] fix: remove text decoration on disable

---
 frontend/src/components/Primitives/Button.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/components/Primitives/Button.tsx b/frontend/src/components/Primitives/Button.tsx
index 232d8067c..6190d4fa8 100644
--- a/frontend/src/components/Primitives/Button.tsx
+++ b/frontend/src/components/Primitives/Button.tsx
@@ -163,6 +163,7 @@ const Button = styled('button', {
         '&:disabled': {
           color: '$primary200',
           backgroundColor: '$transparent',
+          textDecoration: 'none',
         },
       },
     },