Update select component

src/components/Select/index.tsx

@@ -49,12 +49,16 @@ const Select = ({
         )}
       </div>
       <div className='select'>
+        <div>
           <select value={value} name={name} onChange={onChange}>
             {options.map((option) => (
-            <option value={option.value}>{option.label}</option>
+              <option key={value} value={option.value}>
+                {option.label}
+              </option>
             ))}
           </select>
         </div>
+      </div>
     </Wrapper>
   );
 };

src/components/Select/styles.ts

@@ -24,35 +24,23 @@ export const Wrapper = styled.div<WrapperProps>`
     width: inherit;
     height: inherit;
     border-radius: 5px;
-    padding: 1rem;
+    padding: 2px;
-    position: relative;
     color: ${({ theme }) => theme.colors.black.main};
+
+    div {
       background: ${({ theme }) => theme.colors.white.main};
-    background-clip: padding-box;
+      padding: 1rem;
-    border: 2px solid transparent;
+      border-radius: 5px;
       display: flex;
       flex-direction: row;
       align-items: center;
-
-    &:before {
-      content: '';
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      width: inherit;
-      height: inherit;
-      z-index: -1;
-      margin: -2px;
-      border-radius: inherit;
     }
   }
 
   .info {
     margin-bottom: 5px;
     display: grid;
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: 1fr auto;
     align-items: center;
 
     p {
@@ -78,117 +66,67 @@ export const Wrapper = styled.div<WrapperProps>`
     background-image: url('../../assets/icons/chevron-down.svg');
   }
 
-  .icon {
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-  }
-
-  .icon.left {
-    margin-right: 0.5rem;
-  }
-
   ${({ color, theme }) => {
     switch (color) {
       case 'client':
         return css`
-          .select:before {
+          .select {
             background: ${theme.colors.client.light};
           }
-
-          .icon svg path {
-            stroke: ${theme.colors.client.main};
-          }
         `;
       case 'productOwner':
         return css`
-          .select:before {
+          .select {
             background: ${theme.colors.productOwner.light};
           }
-
-          .icon svg path {
-            stroke: ${theme.colors.productOwner.main};
-          }
         `;
       case 'developer':
         return css`
-          .select:before {
+          .select {
             background: ${theme.colors.developer.light};
           }
-
-          .icon svg path {
-            stroke: ${theme.colors.developer.main};
-          }
         `;
       case 'admin':
         return css`
-          .select:before {
+          .select {
             background: ${theme.colors.admin.light};
           }
-
-          .icon svg path {
-            stroke: ${theme.colors.admin.main};
-          }
         `;
       case 'success':
         return css`
-          .select:before {
+          .select {
             background: ${theme.colors.success.main};
           }
-
-          .icon svg path {
-            stroke: ${theme.colors.success.main};
-          }
         `;
       case 'warning':
         return css`
-          .select:before {
+          .select {
             background: ${theme.colors.warning.main};
           }
-
-          .icon svg path {
-            stroke: ${theme.colors.warning.main};
-          }
         `;
       case 'error':
         return css`
-          .select:before {
+          .select {
             background: ${theme.colors.error.main};
           }
-
-          .icon svg path {
-            stroke: ${theme.colors.error.main};
-          }
         `;
       case 'black':
         return css`
-          .select:before {
+          .select {
             background: ${theme.colors.black.main};
           }
-
-          .icon svg path {
-            stroke: ${theme.colors.black.main};
-          }
         `;
       case 'white':
         return css`
-          .select:before {
+          .select {
             background: ${theme.colors.white.main};
           }
-
-          .icon svg path {
-            stroke: ${theme.colors.white.main};
-          }
         `;
       default:
         return css`
-          .select:before {
+          .select {
             background: ${theme.colors.client.light};
           }
-
-          .icon svg path {
-            stroke: ${theme.colors.client.main};
-          }
         `;
     }
   }}
@@ -202,13 +140,9 @@ export const Wrapper = styled.div<WrapperProps>`
         -webkit-text-fill-color: transparent;
       }
 
-      .select:before {
+      .select {
         background: ${theme.colors.error.main};
       }
-
-      .icon svg path {
-        stroke: ${theme.colors.error.main};
-      }
     `}
 
   ${({ fullWidth }) =>
@@ -216,10 +150,5 @@ export const Wrapper = styled.div<WrapperProps>`
     css`
       width: 100%;
       font-size: 1.25rem;
-
-      .icon svg {
-        width: 1.25rem;
-        height: 1.25rem;
-      }
     `};
 `;