Fix styles for theme

This commit is contained in:
Qweme Dev 2023-10-08 21:53:29 +03:00
parent 289625c851
commit 1a366893ec
2 changed files with 23 additions and 1 deletions

View File

@ -2,6 +2,26 @@ import styled from 'styled-components';
const StyledWrapper = styled.div`
color: ${(props) => props.theme.text};
div.input-container {
background-color: ${(props) => props.theme.modal.input.bg};
height: 2.3rem;
}
div.input-container {
border: solid 1px ${(props) => props.theme.modal.input.border};
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
input {
background-color: ${(props) => props.theme.modal.input.bg};
outline: none;
box-shadow: none;
&:focus {
outline: none !important;
box-shadow: none !important;
}
}
}
`;
export default StyledWrapper;

View File

@ -25,7 +25,9 @@ const Font = () => {
return (
<StyledWrapper>
<h2>Font in code area</h2>
<input type="text" id="first_name" onChange={handleInputChange} placeholder="Local font" defaultValue={codeFont} className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-1.5" />
<div className='input-container'>
<input type="text" onChange={handleInputChange} placeholder="Local font" defaultValue={codeFont} className="w-full px-3 py-1.5" />
</div>
</StyledWrapper>
);
};