diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx index 79802a9..939266e 100644 --- a/src/components/Input/index.tsx +++ b/src/components/Input/index.tsx @@ -19,7 +19,7 @@ type InputProps = { value: string; label?: string; name: string; - type?: 'text' | 'email' | 'password' | 'file' | 'number'; + type?: 'text' | 'email' | 'tel' | 'password' | 'file' | 'number'; placeholder?: string; fullWidth?: boolean; onChange: (event: React.ChangeEvent) => void; @@ -52,19 +52,21 @@ const Input = ({ )}
- {type === 'file' && ( - - - - )} - +
+ {type === 'file' && ( + + + + )} + +
); diff --git a/src/components/Input/styles.ts b/src/components/Input/styles.ts index 1496d56..bd732d8 100644 --- a/src/components/Input/styles.ts +++ b/src/components/Input/styles.ts @@ -14,7 +14,7 @@ type WrapperProps = { | 'white'; error?: boolean; errorMessage?: string; - type?: 'text' | 'email' | 'password' | 'file' | 'number'; + type?: 'text' | 'email' | 'tel' | 'password' | 'file' | 'number'; label?: string; fullWidth?: boolean; }; @@ -24,32 +24,20 @@ 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; - &: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 { @@ -85,7 +73,7 @@ export const Wrapper = styled.div` ${({ type }) => { if (type === 'file') return css` - .input { + .input div { display: flex; flex-direction: row; align-items: center; @@ -108,7 +96,7 @@ export const Wrapper = styled.div` switch (color) { case 'client': return css` - .input:before { + .input { background: ${theme.colors.client.light}; } @@ -122,7 +110,7 @@ export const Wrapper = styled.div` `; case 'productOwner': return css` - .input:before { + .input { background: ${theme.colors.productOwner.light}; } @@ -136,7 +124,7 @@ export const Wrapper = styled.div` `; case 'developer': return css` - .input:before { + .input { background: ${theme.colors.developer.light}; } @@ -150,7 +138,7 @@ export const Wrapper = styled.div` `; case 'admin': return css` - .input:before { + .input { background: ${theme.colors.admin.light}; } @@ -164,7 +152,7 @@ export const Wrapper = styled.div` `; case 'success': return css` - .input:before { + .input { background: ${theme.colors.success.main}; } @@ -178,7 +166,7 @@ export const Wrapper = styled.div` `; case 'warning': return css` - .input:before { + .input { background: ${theme.colors.warning.main}; } @@ -192,7 +180,7 @@ export const Wrapper = styled.div` `; case 'error': return css` - .input:before { + .input { background: ${theme.colors.error.main}; } @@ -206,7 +194,7 @@ export const Wrapper = styled.div` `; case 'black': return css` - .input:before { + .input { background: ${theme.colors.black.main}; } @@ -220,7 +208,7 @@ export const Wrapper = styled.div` `; case 'white': return css` - .input:before { + .input { background: ${theme.colors.white.main}; } @@ -234,7 +222,7 @@ export const Wrapper = styled.div` `; default: return css` - .input:before { + .input { background: ${theme.colors.client.light}; } @@ -258,7 +246,7 @@ export const Wrapper = styled.div` -webkit-text-fill-color: transparent; } - .input:before { + .input { background: ${theme.colors.error.main}; }