chore: placeholder ux improvements

This commit is contained in:
Anoop M D 2024-08-08 16:00:56 +05:30
parent edb8708dde
commit 29db85a916
6 changed files with 18 additions and 10 deletions

View File

@ -74,7 +74,7 @@ const PresetsSettings = ({ collection }) => {
id="request-url" id="request-url"
type="text" type="text"
name="requestUrl" name="requestUrl"
placeholder='Enter Request URL' placeholder='Request URL'
className="block textbox" className="block textbox"
autoComplete="off" autoComplete="off"
autoCorrect="off" autoCorrect="off"

View File

@ -229,7 +229,7 @@ const NewRequest = ({ collection, item, isEphemeral, onClose }) => {
id="request-name" id="request-name"
type="text" type="text"
name="requestName" name="requestName"
placeholder="Enter Request Name" placeholder="Request Name"
ref={inputRef} ref={inputRef}
className="block textbox mt-2 w-full" className="block textbox mt-2 w-full"
autoComplete="off" autoComplete="off"
@ -262,7 +262,7 @@ const NewRequest = ({ collection, item, isEphemeral, onClose }) => {
id="request-url" id="request-url"
type="text" type="text"
name="requestUrl" name="requestUrl"
placeholder="Enter Request URL" placeholder="Request URL"
className="px-3 w-full " className="px-3 w-full "
autoComplete="off" autoComplete="off"
autoCorrect="off" autoCorrect="off"

View File

@ -100,6 +100,11 @@ const GlobalStyle = createGlobalStyle`
} }
} }
input::placeholder {
color: ${(props) => props.theme.input.placeholder.color};
opacity: ${(props) => props.theme.input.placeholder.opacity};
}
@keyframes fade-in { @keyframes fade-in {
from { from {
opacity: 0; opacity: 0;

View File

@ -38,11 +38,6 @@ body {
overflow-x: hidden; overflow-x: hidden;
} }
input::placeholder {
color: #a2a2a2;
opacity: 50%;
}
body { body {
font-size: 0.875rem; font-size: 0.875rem;
} }

View File

@ -20,7 +20,11 @@ const darkTheme = {
input: { input: {
bg: 'rgb(65, 65, 65)', bg: 'rgb(65, 65, 65)',
border: 'rgb(65, 65, 65)', border: 'rgb(65, 65, 65)',
focusBorder: 'rgb(65, 65, 65)' focusBorder: 'rgb(65, 65, 65)',
placeholder: {
color: '#a2a2a2',
opacity: 0.75
}
}, },
variables: { variables: {

View File

@ -20,7 +20,11 @@ const lightTheme = {
input: { input: {
bg: 'white', bg: 'white',
border: '#ccc', border: '#ccc',
focusBorder: '#8b8b8b' focusBorder: '#8b8b8b',
placeholder: {
color: '#a2a2a2',
opacity: 0.8
}
}, },
menubar: { menubar: {