From 2e0edd4d7689596a6ad9126a961677110a356f35 Mon Sep 17 00:00:00 2001 From: Luis Felipe Risch <lfr20@inf.ufpr.br> Date: Thu, 2 Sep 2021 11:59:27 -0300 Subject: [PATCH] pink colors for error in contrast --- src/Components/FormInput.js | 17 ++++++++++++----- src/Components/LoginContainerFunction.js | 2 +- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/src/Components/FormInput.js b/src/Components/FormInput.js index feae566c..935404a8 100644 --- a/src/Components/FormInput.js +++ b/src/Components/FormInput.js @@ -30,6 +30,14 @@ const StyledTextField = styled(TextField)` width : 100% !important; .MuiOutlinedInput-root { + &.Mui-focused.Mui-error fieldset{ + border-color: ${props => props.contrast === "" ? "red" : "#e75480"}; + } + + &.Mui-error fieldset{ + border-color: ${props => props.contrast === "" ? "red" : "#e75480"}; + } + &.Mui-focused fieldset { border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"}; } @@ -47,12 +55,11 @@ const StyledTextField = styled(TextField)` } label.Mui-focused.Mui-error { - color : red; + color: ${props => props.contrast === "" ? "red" : "#e75480"}; } - .MuiFormHelperText-root { - text-align : left; - color: ${props => props.contrast === "" ? "#666" : "white"}; + label.Mui-error { + color: ${props => props.contrast === "" ? "red" : "#e75480"}; } ` @@ -98,7 +105,7 @@ export default function FormInput(props) { rowsMax={props.rowsMax} InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }} required={props.required} - helperText={props.help} + helperText={<span style={props.contrast === "" ? { color: "red" } : { color: "#e75480" }}>{props.help}</span>} style={{ width: "100%" }} mask={props.mask} multiline={props.multi} diff --git a/src/Components/LoginContainerFunction.js b/src/Components/LoginContainerFunction.js index 8769e809..6fc620e9 100644 --- a/src/Components/LoginContainerFunction.js +++ b/src/Components/LoginContainerFunction.js @@ -149,7 +149,7 @@ export default function LoginContainer(props) { handleChange={e => handleChange(e, 'email')} required={true} error={formEmail.key} - help={formEmail.key ? (formEmail.value.length === 0 ? "Faltou preencher seu e-mail." : <span>Insira um endereço de e-mail válido.<br />Por exemplo: seunome@gmail.com, seunome@hotmail.com</span>) : ""} + help={formEmail.key ? (formEmail.value.length === 0 ? "Faltou preencher seu e-mail." : "Insira um endereço de e-mail válido") : ""} /> <br /> <FormInput -- GitLab