YasinOnm08/interstellar_ai
0
0
Fork 0
forked from React-Group/interstellar_ai
Code Pull requests Activity

Input fields now do update the text color

Browse source
This commit is contained in:
sageTheDM 2024-10-08 07:33:02 +02:00
parent 601b0324b8
commit d1602e3ad7
3 changed files with 7 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/components/InputFrontend.tsx
View file

@ -47,6 +47,7 @@ const InputFrontend = React.forwardRef<HTMLDivElement, InputProps>(
value={inputValue} value={inputValue}
onChange={handleInputChange} onChange={handleInputChange}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
className='textInputField'
/> />
<button type="button" onClick={handleSendClick} disabled={inputDisabled ? true : false}> <button type="button" onClick={handleSendClick} disabled={inputDisabled ? true : false}>
<svg style={{ fill: "var(--text-color)" }} viewBox="0 0 512 512" width={20}><path d="M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480l0-83.6c0-4 1.5-7.8 4.2-10.8L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z" /></svg> <svg style={{ fill: "var(--text-color)" }} viewBox="0 0 512 512" width={20}><path d="M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480l0-83.6c0-4 1.5-7.8 4.2-10.8L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z" /></svg>

1
app/components/settings/TextSettings.tsx
View file

@ -22,6 +22,7 @@ const TextSetting: React.FC<TextSettingProps> = ({ label, value, setValue, type,
value={value} // Set the current value value={value} // Set the current value
onChange={handleTextChange} // Handle input changes onChange={handleTextChange} // Handle input changes
placeholder={placeholder} // Set the placeholder text placeholder={placeholder} // Set the placeholder text
className='textInputField'
/> />
</div> </div>
); );

5
app/styles/input.css
View file

@ -33,6 +33,11 @@
height: 7vh; height: 7vh;
} }
.textInputField::placeholder {
color: var(--text-color); /* Change to desired placeholder color */
opacity: 1; /* Ensures full opacity (optional) */
}
.input input:focus { .input input:focus {
border-color: var(--input-button-hover-color); border-color: var(--input-button-hover-color);
} }