From ad9a101d586d75b78a6800c98ca5454610a4d4a4 Mon Sep 17 00:00:00 2001
From: Hazem Krimi <krimihazem1@gmail.com>
Date: Fri, 23 Apr 2021 18:25:09 +0100
Subject: [PATCH] Update text area component

---
 src/components/TextArea/index.tsx | 16 ++++++-----
 src/components/TextArea/styles.ts | 46 ++++++++++++-------------------
 2 files changed, 26 insertions(+), 36 deletions(-)

diff --git a/src/components/TextArea/index.tsx b/src/components/TextArea/index.tsx
index 2aefcef..655fd28 100644
--- a/src/components/TextArea/index.tsx
+++ b/src/components/TextArea/index.tsx
@@ -49,13 +49,15 @@ const TextArea = ({
         )}
       </div>
       <div className='textarea'>
-        <textarea
-          rows={10}
-          value={value}
-          name={name}
-          onChange={onChange}
-          placeholder={placeholder}
-        />
+        <div>
+          <textarea
+            rows={10}
+            value={value}
+            name={name}
+            onChange={onChange}
+            placeholder={placeholder}
+          />
+        </div>
       </div>
     </Wrapper>
   );
diff --git a/src/components/TextArea/styles.ts b/src/components/TextArea/styles.ts
index be08310..23a4b72 100644
--- a/src/components/TextArea/styles.ts
+++ b/src/components/TextArea/styles.ts
@@ -23,32 +23,20 @@ export const Wrapper = styled.div<WrapperProps>`
     width: inherit;
     height: inherit;
     border-radius: 5px;
-    padding: 1rem;
-    position: relative;
+    padding: 2px;
     color: ${({ theme }) => theme.colors.black.main};
-    background: ${({ theme }) => theme.colors.white.main};
-    background-clip: padding-box;
-    border: 2px solid transparent;
 
-    &:before {
-      content: '';
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      width: inherit;
-      height: inherit;
-      z-index: -1;
-      margin: -2px;
-      border-radius: inherit;
+    div {
+      background: ${({ theme }) => theme.colors.white.main};
+      padding: 1rem;
+      border-radius: 5px;
     }
   }
 
   .info {
     margin-bottom: 5px;
     display: grid;
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: 1fr auto;
     align-items: center;
 
     p {
@@ -78,61 +66,61 @@ export const Wrapper = styled.div<WrapperProps>`
     switch (color) {
       case 'client':
         return css`
-          .textarea:before {
+          .textarea {
             background: ${theme.colors.client.light};
           }
         `;
       case 'productOwner':
         return css`
-          .textarea:before {
+          .textarea {
             background: ${theme.colors.productOwner.light};
           }
         `;
       case 'developer':
         return css`
-          .textarea:before {
+          .textarea {
             background: ${theme.colors.developer.light};
           }
         `;
       case 'admin':
         return css`
-          .textarea:before {
+          .textarea {
             background: ${theme.colors.admin.light};
           }
         `;
       case 'success':
         return css`
-          .textarea:before {
+          .textarea {
             background: ${theme.colors.success.main};
           }
         `;
       case 'warning':
         return css`
-          .textarea:before {
+          .textarea {
             background: ${theme.colors.warning.main};
           }
         `;
       case 'error':
         return css`
-          .textarea:before {
+          .textarea {
             background: ${theme.colors.error.main};
           }
         `;
       case 'black':
         return css`
-          .textarea:before {
+          .textarea {
             background: ${theme.colors.black.main};
           }
         `;
       case 'white':
         return css`
-          .textarea:before {
+          .textarea {
             background: ${theme.colors.white.main};
           }
         `;
       default:
         return css`
-          .textarea:before {
+          .textarea {
             background: ${theme.colors.client.light};
           }
         `;
@@ -148,7 +136,7 @@ export const Wrapper = styled.div<WrapperProps>`
         -webkit-text-fill-color: transparent;
       }
 
-      .textarea:before {
+      .textarea {
         background: ${theme.colors.error.main};
       }
     `}