diff --git a/src/components/CurrencyInput/index.jsx b/src/components/CurrencyInput/index.jsx index 94f5697..0318909 100644 --- a/src/components/CurrencyInput/index.jsx +++ b/src/components/CurrencyInput/index.jsx @@ -1,3 +1,4 @@ +import { Input } from '../../styles/Common.styles'; import * as S from '../../styles/CurrencyInput.styles'; function CurrencyInput({ value, setValue, autofocus }) { @@ -24,7 +25,8 @@ function CurrencyInput({ value, setValue, autofocus }) { return ( - theme.colors.gray900}; + font-size: 16px; + font-weight: 600; + border: none; + + &:focus, + &:active { + outline: none; + } + + &:placeholder-shown { + caret-color: ${({ theme }) => theme.colors.primary}; + } +`; diff --git a/src/styles/CurrencyInput.styles.js b/src/styles/CurrencyInput.styles.js index 5a507d9..93af433 100644 --- a/src/styles/CurrencyInput.styles.js +++ b/src/styles/CurrencyInput.styles.js @@ -5,26 +5,8 @@ export const CurrencyInput = styled.div` ${({ theme }) => theme.hoverBorder}; ${({ theme }) => theme.activeTransform}; padding: 0; -`; -export const CurrencyInputField = styled.input.attrs({ type: 'text' })` - width: 100%; - height: 100%; - padding: 20px; - border-radius: 10px; - box-sizing: border-box; - color: ${({ theme }) => theme.colors.gray900}; - font-size: 16px; - font-weight: 600; - caret-color: transparent; - border: none; - - &:focus, - &:active { - outline: none; - } - - &:placeholder-shown { - caret-color: ${({ theme }) => theme.colors.primary}; + & > input { + caret-color: transparent; } `;