Update icon button component

src/components/IconButton/index.tsx

@@ -1,25 +1,15 @@
 import { Wrapper } from './styles';
 
-type IconButtonProps = Omit<
+type IconButtonProps = {
-  React.AllHTMLAttributes<HTMLButtonElement>,
+  color?: 'client' | 'productOwner' | 'developer' | 'admin';
-  'size'
+  size?: 'small' | 'medium' | 'big';
-> & {
-  color:
-    | 'client'
-    | 'productOwner'
-    | 'developer'
-    | 'admin'
-    | 'success'
-    | 'warning'
-    | 'error';
-  size?: 'small' | 'big';
   icon?: React.SVGProps<SVGSVGElement>;
   onClick: () => void;
 };
 
 const IconButton = ({
   color,
-  size = 'small',
+  size = 'medium',
   icon,
   onClick,
 }: IconButtonProps) => {

src/components/IconButton/styles.ts

@@ -1,15 +1,8 @@
 import styled, { css } from 'styled-components';
 
 type WrapperProps = {
-  color:
+  color?: 'client' | 'productOwner' | 'developer' | 'admin';
-    | 'client'
+  size?: 'small' | 'medium' | 'big';
-    | 'productOwner'
-    | 'developer'
-    | 'admin'
-    | 'success'
-    | 'warning'
-    | 'error';
-  size?: 'small' | 'big';
   icon?: React.SVGProps<SVGSVGElement>;
 };
 
@@ -20,7 +13,8 @@ export const Wrapper = styled.button<WrapperProps>`
   border-radius: 50%;
   background: none;
   font-weight: bold;
-  background: ${({ theme, color }) => theme.colors[color].main};
+  background: ${({ theme, color }) =>
+    color ? theme.colors[color].main : theme.colors.client.main};
   display: grid;
   justify-content: center;
   align-items: center;
@@ -46,6 +40,16 @@ export const Wrapper = styled.button<WrapperProps>`
             height: 12.5px;
           }
         `;
+      case 'medium':
+        return css`
+          width: 35px;
+          height: 35px;
+
+          svg {
+            width: 17.5px;
+            height: 17.5px;
+          }
+        `;
       case 'big':
         return css`
           width: 50px;