From dc98698e946264dfaf52844a47a0c9838d0381b8 Mon Sep 17 00:00:00 2001 From: "casio@sparcs.org" Date: Tue, 15 Oct 2024 00:13:18 +0900 Subject: [PATCH] feat: impl text input --- .../web/src/common/components/Forms/TextInput.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/web/src/common/components/Forms/TextInput.tsx b/packages/web/src/common/components/Forms/TextInput.tsx index f56cf7b..08c7429 100644 --- a/packages/web/src/common/components/Forms/TextInput.tsx +++ b/packages/web/src/common/components/Forms/TextInput.tsx @@ -21,8 +21,8 @@ const errorBorderStyle = css` `; const disabledStyle = css` - background-color: ${({ theme }) => theme.colors.GRAY[100]}; - border-color: ${({ theme }) => theme.colors.GRAY[200]}; + background-color: ${({ theme }) => theme.colors.GRAY[50]}; + border-color: ${({ theme }) => theme.colors.GRAY[100]}; `; const areaInputStyle = css` @@ -38,7 +38,7 @@ const Input = styled.input.attrs(({ area }) => ({ width: 100%; padding: 8px 12px 8px 12px; outline: none; - border: 1px solid ${({ theme }) => theme.colors.GRAY[200]}; + border: 1px solid ${({ theme }) => theme.colors.GRAY[100]}; border-radius: 4px; gap: 8px; font-family: ${({ theme }) => theme.fonts.FAMILY.PRETENDARD}; @@ -49,14 +49,14 @@ const Input = styled.input.attrs(({ area }) => ({ background-color: ${({ theme }) => theme.colors.WHITE}; &:focus { border-color: ${({ theme, hasError, disabled }) => - !hasError && !disabled && theme.colors.PRIMARY}; + !hasError && !disabled && theme.colors.GREEN[600]}; } &:hover:not(:focus) { border-color: ${({ theme, hasError, disabled }) => - !hasError && !disabled && theme.colors.GRAY[100]}; + !hasError && !disabled && theme.colors.GRAY[200]}; } &::placeholder { - color: ${({ theme }) => theme.colors.GRAY[200]}; + color: ${({ theme }) => theme.colors.GRAY[100]}; } ${({ disabled }) => disabled && disabledStyle} ${({ hasError }) => hasError && errorBorderStyle}