diff --git a/ts/components/SessionHeaderSearchInput.tsx b/ts/components/SessionHeaderSearchInput.tsx index 5df208b17..da7e355af 100644 --- a/ts/components/SessionHeaderSearchInput.tsx +++ b/ts/components/SessionHeaderSearchInput.tsx @@ -19,13 +19,13 @@ export const SessionHeaderSearchInput = styled.input<{ darkMode: boolean }>` position: relative; border-radius: '4px'; - ::placeholder { + &::placeholder { color: var(--search-bar-text-control-color); } &:focus { border: solid 1px - var(${props => (props.darkMode ? '--primary-color' : '--search-bar-text-user-color')}); + ${props => (props.darkMode ? 'var(--primary-color)' : 'var(--search-bar-text-user-color)')}; color: var(--search-bar-text-user-color); outline: none; } diff --git a/ts/components/inputs/SessionInput.tsx b/ts/components/inputs/SessionInput.tsx index 45de3a15d..d5895bbff 100644 --- a/ts/components/inputs/SessionInput.tsx +++ b/ts/components/inputs/SessionInput.tsx @@ -27,7 +27,7 @@ const StyledInput = styled(motion.input)<{ padding: var(--margins-lg); ${props => props.centerText && 'text-align: center;'} - ::placeholder { + &::placeholder { color: var(--input-text-placeholder-color); ${props => props.centerText && 'text-align: center;'} } @@ -68,14 +68,14 @@ const StyledTextAreaContainer = styled(motion.div)<{ ${props => props.centerText && 'text-align: center;'} - :placeholder-shown { + &:placeholder-shown { font-family: ${props => (props.monospaced ? 'var(--font-mono)' : 'var(--font-default)')}; font-size: 12px; height: 48px; margin: var(--margins-md) 0; } - ::placeholder { + &::placeholder { color: var(--input-text-placeholder-color); ${props => props.centerText && 'text-align: center;'} } @@ -121,7 +121,7 @@ const StyledInputContainer = styled(Flex)<{ error: boolean; biggerText?: boolean line-height: 18px; textarea { - :placeholder-shown { + &:placeholder-shown { font-size: var(--font-size-md); height: 56px; }