From f49b38dddd2e2ff4e55e4d85765153e7b64ee606 Mon Sep 17 00:00:00 2001
From: Hazem Krimi <krimihazem1@gmail.com>
Date: Wed, 28 Apr 2021 21:30:33 +0100
Subject: [PATCH] Update icon button component

---
 src/components/IconButton/index.tsx | 18 ++++--------------
 src/components/IconButton/styles.ts | 24 ++++++++++++++----------
 2 files changed, 18 insertions(+), 24 deletions(-)

diff --git a/src/components/IconButton/index.tsx b/src/components/IconButton/index.tsx
index c672b3f..a6fe950 100644
--- a/src/components/IconButton/index.tsx
+++ b/src/components/IconButton/index.tsx
@@ -1,25 +1,15 @@
 import { Wrapper } from './styles';
 
-type IconButtonProps = Omit<
-  React.AllHTMLAttributes<HTMLButtonElement>,
-  'size'
-> & {
-  color:
-    | 'client'
-    | 'productOwner'
-    | 'developer'
-    | 'admin'
-    | 'success'
-    | 'warning'
-    | 'error';
-  size?: 'small' | 'big';
+type IconButtonProps = {
+  color?: 'client' | 'productOwner' | 'developer' | 'admin';
+  size?: 'small' | 'medium' | 'big';
   icon?: React.SVGProps<SVGSVGElement>;
   onClick: () => void;
 };
 
 const IconButton = ({
   color,
-  size = 'small',
+  size = 'medium',
   icon,
   onClick,
 }: IconButtonProps) => {
diff --git a/src/components/IconButton/styles.ts b/src/components/IconButton/styles.ts
index 6607ad9..ac7891a 100644
--- a/src/components/IconButton/styles.ts
+++ b/src/components/IconButton/styles.ts
@@ -1,15 +1,8 @@
 import styled, { css } from 'styled-components';
 
 type WrapperProps = {
-  color:
-    | 'client'
-    | 'productOwner'
-    | 'developer'
-    | 'admin'
-    | 'success'
-    | 'warning'
-    | 'error';
-  size?: 'small' | 'big';
+  color?: 'client' | 'productOwner' | 'developer' | 'admin';
+  size?: 'small' | 'medium' | '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;