From d9e2eb72c0d0746fa5e931a556bb27eb158a42dd Mon Sep 17 00:00:00 2001
From: Hazem Krimi <krimihazem1@gmail.com>
Date: Thu, 22 Apr 2021 01:53:09 +0100
Subject: [PATCH] Update avatar component

---
 src/components/Avatar/index.tsx | 5 +++--
 src/components/Avatar/styles.ts | 3 ++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/Avatar/index.tsx b/src/components/Avatar/index.tsx
index 4f09faf..cda51a0 100644
--- a/src/components/Avatar/index.tsx
+++ b/src/components/Avatar/index.tsx
@@ -1,14 +1,15 @@
 import { Wrapper } from './styles';
 
 type AvatarProps = {
+  className?: string;
   color?: 'client' | 'productOwner' | 'developer' | 'admin' | string;
   size?: 'small' | 'big';
   text: string;
 };
 
-const Avatar = ({ color, size = 'small', text }: AvatarProps) => {
+const Avatar = ({ color, size = 'small', text, className }: AvatarProps) => {
   return (
-    <Wrapper color={color} size={size}>
+    <Wrapper color={color} size={size} className={className}>
       {text}
     </Wrapper>
   );
diff --git a/src/components/Avatar/styles.ts b/src/components/Avatar/styles.ts
index 7604bf6..aa33bb6 100644
--- a/src/components/Avatar/styles.ts
+++ b/src/components/Avatar/styles.ts
@@ -6,11 +6,12 @@ type WrapperProps = {
 };
 
 export const Wrapper = styled.div<WrapperProps>`
+  user-select: none;
   border-radius: 50%;
   background: ${({ theme, color }) =>
     color ? theme.colors[color].main : theme.colors.client.main};
   color: ${({ theme }) => theme.colors.white.main};
-  display: grid;
+  display: inline-grid;
   justify-content: center;
   align-items: center;
   font-weight: bold;