diff --git a/src/components/Select/index.tsx b/src/components/Select/index.tsx
index 5e70037..0d4bf82 100644
--- a/src/components/Select/index.tsx
+++ b/src/components/Select/index.tsx
@@ -49,11 +49,15 @@ const Select = ({
)}
-
+
+
+
);
diff --git a/src/components/Select/styles.ts b/src/components/Select/styles.ts
index 0c16669..78f0aa5 100644
--- a/src/components/Select/styles.ts
+++ b/src/components/Select/styles.ts
@@ -24,35 +24,23 @@ export const Wrapper = styled.div`
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;
- 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;
+ div {
+ background: ${({ theme }) => theme.colors.white.main};
+ padding: 1rem;
+ border-radius: 5px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
}
}
.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`
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`
-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`
css`
width: 100%;
font-size: 1.25rem;
-
- .icon svg {
- width: 1.25rem;
- height: 1.25rem;
- }
`};
`;