fix: input theme inconsistency

team-offonoff · Jan 31, 2024 · 2a01b3a · 2a01b3a
1 parent 936d1a3
commit 2a01b3a
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 8 deletions.
diff --git a/src/components/commons/TextInput/TextInput.styles.tsx b/src/components/commons/TextInput/TextInput.styles.tsx
@@ -1,11 +1,11 @@
-import { css, styled } from 'styled-components';
+import { styled } from 'styled-components';
 
 import { TextInputTheme } from './theme';
 
 const StyledInput = styled.input<{ inputTheme: TextInputTheme }>`
   width: 100%;
-  font-size: 1.4rem;
-  font-weight: 700;
+  font-size: ${({ inputTheme }) => inputTheme.placeholderSize};
+  font-weight: ${({ inputTheme }) => inputTheme.fontWeight};
   line-height: 1.4;
   color: ${({ theme }) => theme.colors.white};
   appearance: none;
@@ -17,8 +17,9 @@ const StyledInput = styled.input<{ inputTheme: TextInputTheme }>`
   }
 
   &::placeholder {
+    font-size: ${({ inputTheme }) => inputTheme.placeholderSize};
+    font-weight: ${({ inputTheme }) => inputTheme.fontWeight};
     color: ${({ inputTheme }) => inputTheme.placeholderColor};
-    opacity: 0.6;
   }
 `;
 

diff --git a/src/components/commons/TextInput/theme.ts b/src/components/commons/TextInput/theme.ts
@@ -9,6 +9,7 @@ export interface TextInputTheme {
   fontWeight: CSSProperties['fontWeight'];
   backgroundColor: CSSProperties['backgroundColor'];
   placeholderColor: CSSProperties['color'];
+  placeholderSize?: CSSProperties['fontSize'];
 }
 
 export const theme1: TextInputTheme = {
@@ -26,7 +27,7 @@ export const theme2: TextInputTheme = {
   fontSize: '1.6rem',
   fontWeight: 500,
   backgroundColor: colors.navy2_40,
-  placeholderColor: colors.purple2,
+  placeholderColor: colors.purple,
 };
 
 export const theme3: TextInputTheme = {
@@ -35,5 +36,6 @@ export const theme3: TextInputTheme = {
   fontSize: '2rem',
   fontWeight: 400,
   backgroundColor: 'transparent',
-  placeholderColor: colors.purple2,
+  placeholderColor: colors.purple,
+  placeholderSize: '2rem',
 };
diff --git a/src/routes/Topic/BTopicCreate.tsx b/src/routes/Topic/BTopicCreate.tsx
@@ -1,12 +1,12 @@
-import React, { useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
-import { CONFIG, INPUT_TYPE } from 'src/constants/form';
 
 import { Col } from '@components/commons/Flex/Flex';
 import Text from '@components/commons/Text/Text';
 import TextInput from '@components/commons/TextInput/TextInput';
 import { theme2 } from '@components/commons/TextInput/theme';
 
+import { INPUT_TYPE, CONFIG } from '@constants/form';
+
 import { colors } from '@styles/theme';
 
 import { Container } from './ATopicCreate.styles';