From db435d9398505e501cc943466ea12c0a47e7a392 Mon Sep 17 00:00:00 2001
From: Vinicius Gabriel Machado <vgm18@inf.ufpr.br>
Date: Thu, 9 Sep 2021 15:51:52 -0300
Subject: [PATCH] Fixed text field error color and helper text color
---
src/App.js | 299 +-----------------
src/Components/FormInput.js | 36 ++-
.../PageProfessorComponents/PartOne.js | 51 +++
src/Components/ReportUserForm.js | 44 ++-
.../ResourcePageComponents/CommentForm.js | 60 +++-
src/Components/Stepper.js | 4 +-
.../UploadPageComponents/Forms/Keywords.js | 3 +-
.../UploadPageComponents/Stepper.js | 4 +-
.../UploadPageComponents/StyledComponents.js | 41 ++-
9 files changed, 212 insertions(+), 330 deletions(-)
diff --git a/src/App.js b/src/App.js
index d8cda19e..23a3cab8 100644
--- a/src/App.js
+++ b/src/App.js
@@ -182,7 +182,8 @@ export default function App() {
<>
{!awaitTest &&
<React.Suspense fallback={<LoadingScreen/>}>
- <BrowserRouter>
+ <BrowserRouter history={piwik.connectToHistory(customHistory)}>
+ {/*<BrowserRouter>*/}
<ContrastBar/>
<Header />
<div
@@ -477,300 +478,4 @@ export default function App() {
}
</>
);
-
- return (
- <>
- {!awaitTest &&
- <React.Suspense fallback={<LoadingScreen/>}>
- <BrowserRouter history={piwik.connectToHistory(customHistory)}>
- <Header />
- <div
- style={{
- backgroundImage:
- "linear-gradient(to right,#ff7f00,#e81f4f,#673ab7,#00bcd4)",
- height: "5px",
- }}
- ></div>
- <link
- href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap"
- rel="stylesheet"
- />
- <Switch>
- <Redirect from="/home" to="/" />
- <Route path="/" exact={true} component={Home} />
- <Route path="/busca" component={Search} />
- <Route path="/perfil" component={UserPage} />
- <Route path="/editarperfil" component={EditProfilePage} />
- <Route path="/recurso/:recursoId" component={ResourcePage} />
- <Route path="/termos-publicar-recurso" component={TermsPage} />
- <Route path="/permission" component={PublicationPermissionsPage} />
- {/*<Route path="termos-de-uso#publicacoes-de-usuario" component={}*/}
- <Route path="/ajuda" component={HelpCenter} />
- <Route path="/contato" component={Contact} />
- <Route path="/termos" component={UserTerms} />
- <Route path="/sobre" component={AboutPage} />
- <Route path="/mapa-site" component={SiteMap} />
- <Route path="/acessibilidade" component={Accessibility} />
- <Route path="/publicando-recurso" component={TabResoursePub} />
- <Route path="/encontrando-recurso" component={TabResourseFind} />
- <Route path="/participando-da-rede" component={TabNetPart} />
- <Route path="/gerenciando-conta" component={TabManageAc} />
- <Route path="/plataforma-mec" component={TabPlataformaMEC} />
- <Route path="/recuperar-senha/alterar-senha" component={ChangePasswordPage} />
- <Route path="/recuperar-senha" component={PasswordRecoveryPage} />
- <Route path="/usuario-publico/:userId" component={PublicUserPage} />
- <Route
- path="/editar-recurso/:recursoId"
- component={EditLearningObjectPage}
- />
- <Route path="/professor" component={PageProfessor} />
- <Route path="/upload" component={UploadPage} />
- <Route path="/loja" component={ItemStore} />
- <Route path="/colecao-do-usuario/:id" component={CollectionPage} />
- <Route path="/colecao" component={FormationMaterialPage} />
- <Route path="/topico" component={FormationMaterialPage} />
- <Route path="/iframe-colecao" component={FormationMaterialIframe} />
- <Route path="/material-formacao" component={MaterialPage} />
-
- <Route
- path="/admin/home"
- exact={true}
- render={() => {
- return <AdminTemplate inner={<Inframe/>}/>
- }}
- />
- <Route
- path="/admin/institutions"
- render={() => {
- return <AdminTemplate inner={<Institution />}/>
- }}
- />
- <Route
- path="/admin/institution"
- render={() => {
- return <AdminTemplate inner={<InstitutionCard />}/>
- }}
- />
- <Route
- path="/admin/institutionEdit"
- render={() => {
- return <AdminTemplate inner={<InstitutionsInput />}/>
- }}
- />
- <Route
- path="/admin/InstitutionCreate"
- render={() => {
- return <AdminTemplate inner={<CreateInstitution />}/>
- }}
- />
- <Route
- path="/admin/noteVars"
- render={() => {
- return <AdminTemplate inner={<NoteVariables />}/>
- }}
- />
- <Route
- path="/admin/noteVar"
- render={() => {
- return <AdminTemplate inner={<NoteVarCard />}/>
- }}
- />
- <Route
- path="/admin/noteVarEdit"
- render={() => {
- return <AdminTemplate inner={<NoteVarInputs />}/>
- }}
- />
- <Route
- path="/admin/languages"
- render={() => {
- return <AdminTemplate inner={<Languages />}/>
- }}
- />
- <Route
- path="/admin/languageEdit"
- render={() => {
- return <AdminTemplate inner={<EditLanguage />}/>
- }}
- />
- <Route
- path="/admin/languageCreate"
- render={() => {
- return <AdminTemplate inner={<CreateLanguage />}/>
- }}
- />
- <Route
- path="/admin/CommunityQuestions"
- render={() => {
- return <AdminTemplate inner={<CommunityQuestions />}/>
- }}
- />
- <Route
- path="/admin/CommunityQuestion"
- render={() => {
- return <AdminTemplate inner={<CommunityCard />}/>
- }}
- />
- <Route
- path="/admin/Collections"
- render={() => {
- return <AdminTemplate inner={<Collections />}/>
- }}
- />
- <Route
- path="/admin/Collection"
- render={() => {
- return <AdminTemplate inner={<CollectionCard />}/>
- }}
- />
- <Route
- path="/admin/EditCollection"
- render={() => {
- return <AdminTemplate inner={<EditCollection />}/>
- }}
- />
- <Route
- path="/admin/Ratings"
- render={() => {
- return <AdminTemplate inner={<Ratings />}/>
- }}
- />
- <Route
- path="/admin/Rating"
- render={() => {
- return <AdminTemplate inner={<RatingCard />}/>
- }}
- />
- <Route
- path="/admin/EditRating"
- render={() => {
- return <AdminTemplate inner={<EditRating />}/>
- }}
- />
- <Route
- path="/admin/CreateRating"
- render={() => {
- return <AdminTemplate inner={<CreateRating />}/>
- }}
- />
- <Route
- path="/admin/Questions"
- render={() => {
- return <AdminTemplate inner={<Questions />}/>
- }}
- />
- <Route
- path="/admin/CreateQuestion"
- render={() => {
- return <AdminTemplate inner={<CreateQuestions />}/>
- }}
- />
- <Route
- path="/admin/activities"
- render={() => {
- return <AdminTemplate inner={<Activity />}/>
- }}
- />
- <Route
- path="/admin/activity"
- render={() => {
- return <AdminTemplate inner={<ActivityCard />}/>
- }}
- />
- <Route
- path="/admin/learningObjects"
- render={() => {
- return <AdminTemplate inner={<EducationalObject />}/>
- }}
- />
- <Route
- path="/admin/learningObject"
- render={() => {
- return <AdminTemplate inner={<EducationalObjectCard />}/>
- }}
- />
- <Route
- path="/admin/learningObjectEdit"
- render={() => {
- return <AdminTemplate inner={<EducationalObjectEdit />}/>
- }}
- />
- <Route
- path="/admin/complaints"
- render={() => {
- return <AdminTemplate inner={<Complaints />}/>
- }}
- />
- <Route
- path="/admin/complaint"
- render={() => {
- return <AdminTemplate inner={<ComplaintCard />}/>
- }}
- />
- <Route
- path="/admin/users/teacher_requests"
- render={() => {
- return <AdminTemplate inner={<AproveTeacher />}/>
- }} />
- <Route
- path="/admin/usersList"
- render={() => {
- return <AdminTemplate inner={<UserList />}/>
- }}
- />
- <Route
- path="/admin/user"
- render={() => {
- return <AdminTemplate inner={<UserCard />}/>
- }}
- />
- <Route
- path="/admin/EditUser"
- render={() => {
- return <AdminTemplate inner={<EditUser />}/>
- }}
- />
- <Route
- path="/admin/permissions"
- render={() => {
- return <AdminTemplate inner={<UserPermissions />}/>
- }}
- />
- <Route
- path="/admin/EditPermissions"
- render={() => {
- return <AdminTemplate inner={<EditRole />}/>
- }}
- />
- <Route
- path="/admin/CreateRole"
- render={() => {
- return <AdminTemplate inner={<CreateRole />}/>
- }}
- />
- <Route
- path="/admin/BlockedUsers"
- render={() => {
- return <AdminTemplate inner={<BlockedUser />}/>
- }}
- />
- <Route
- path="/admin/sendEmail"
- render={() => {
- return <AdminTemplate inner={<SendEmail />}/>
- }}
- />
- <Route path='*' component={PageNotFound} />
- </Switch>
- {!hideFooter && (
- <div>
- <EcFooter />
- <GNUAGPLfooter />
- </div>
- )}
- </BrowserRouter>
- </React.Suspense>
- }
- </>
- );
}
\ No newline at end of file
diff --git a/src/Components/FormInput.js b/src/Components/FormInput.js
index 55c3e503..8ebbbe5f 100644
--- a/src/Components/FormInput.js
+++ b/src/Components/FormInput.js
@@ -25,18 +25,32 @@ const StyledTextField = styled(TextField)`
max-width: 100%;
font-size : 15px;
font-weight : lighter;
- color : white;
- width : 100% !important;
width : 100% !important;
+ .MuiFormHelperText-root {
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+
+ .MuiFormHelperText-root.Mui-error {
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
+ .MuiInput-underline::after {
+ border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ }
+
+ .MuiInput-underline.Mui-error::after {
+ border-color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
.MuiOutlinedInput-root {
- /* &.Mui-focused.Mui-error fieldset{
+ &.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"};
@@ -50,17 +64,25 @@ const StyledTextField = styled(TextField)`
color: ${props => props.contrast === "" ? "#666" : "white"};
}
+ .MuiFormLabel-asterisk {
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+
+ .MuiFormLabel-asterisk.Mui-error {
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
label.Mui-focused {
color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
}
label.Mui-focused.Mui-error {
- color: red;
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
}
- /* label.Mui-error {
+ label.Mui-error {
color: ${props => props.contrast === "" ? "red" : "#e75480"};
- } */
+ }
`
const useStyles = makeStyles(theme => ({
diff --git a/src/Components/PageProfessorComponents/PartOne.js b/src/Components/PageProfessorComponents/PartOne.js
index e46c4f87..3c3a48d7 100644
--- a/src/Components/PageProfessorComponents/PartOne.js
+++ b/src/Components/PageProfessorComponents/PartOne.js
@@ -245,7 +245,34 @@ export default function PartOne(props) {
}
const StyledTextField = styled(TextField)`
+
+ .MuiFormHelperText-root {
+ text-align : left;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+
+ .MuiFormHelperText-root.Mui-error {
+ text-align : left;
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
+ .MuiInput-underline::after {
+ border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ }
+
+ .MuiInput-underline.Mui-error::after {
+ border-color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
.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"};
}
@@ -253,6 +280,30 @@ const StyledTextField = styled(TextField)`
border-color: ${props => props.contrast === "" ? "#666" : "white"};
}
}
+
+ label{
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+
+ .MuiFormLabel-asterisk {
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+
+ .MuiFormLabel-asterisk.Mui-error {
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
+ label.Mui-focused {
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ }
+
+ label.Mui-focused.Mui-error {
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
+ label.Mui-error {
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
`
export const ButtonsArea = styled.div`
diff --git a/src/Components/ReportUserForm.js b/src/Components/ReportUserForm.js
index 28321b53..e4fce332 100644
--- a/src/Components/ReportUserForm.js
+++ b/src/Components/ReportUserForm.js
@@ -174,7 +174,34 @@ export const ButtonEnviar = styled(Button)`
export const StyledTextField = styled(TextField)`
padding: 20px 20px 20px 20px;
+
+ .MuiFormHelperText-root {
+ text-align : left;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+
+ .MuiFormHelperText-root.Mui-error {
+ text-align : left;
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
+ .MuiInput-underline::after {
+ border-color: ${props => props.contrast === "" ? "#ff7f00" : "yellow"};
+ }
+
+ .MuiInput-underline.Mui-error::after {
+ border-color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
.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 === "" ? "#ff7f00" : "yellow"};
}
@@ -187,17 +214,24 @@ export const StyledTextField = styled(TextField)`
color: ${props => props.contrast === "" ? "#666" : "white"};
}
+ .MuiFormLabel-asterisk {
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+
+ .MuiFormLabel-asterisk.Mui-error {
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
label.Mui-focused {
color: ${props => props.contrast === "" ? "#ff7f00" : "yellow"};
}
- .MuiFormHelperText-root {
- text-align : left;
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ label.Mui-focused.Mui-error {
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
}
- .MuiInput-underline::after {
- border-bottom: 2px solid ${props => props.contrast === "" ? "#ff7f00" : "yellow"};
+ label.Mui-error {
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
}
`
diff --git a/src/Components/ResourcePageComponents/CommentForm.js b/src/Components/ResourcePageComponents/CommentForm.js
index 7fe1093b..dbfb2bc5 100644
--- a/src/Components/ResourcePageComponents/CommentForm.js
+++ b/src/Components/ResourcePageComponents/CommentForm.js
@@ -235,22 +235,58 @@ const StyledTextField = styled(TextField)`
margin-bottom: 5px;
}
+ width: 95%;
+
+ .MuiFormHelperText-root {
+ text-align : left;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+
+ .MuiFormHelperText-root.Mui-error {
+ text-align : left;
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
+ .MuiInput-underline::after {
+ border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ }
+
+ .MuiInput-underline.Mui-error::after {
+ border-color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
.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 === ""
- ? props.colecao
- ? "#673ab7"
- : "rgb(255,127,0)"
- : "yellow"};
+ border-color: ${(props) =>
+ props.contrast === ""
+ ? props.colecao
+ ? "#673ab7"
+ : "rgb(255,127,0)"
+ : "yellow"};
}
fieldset {
- border-color: ${(props) => (props.contrast === "" ? "#666" : "white")};
+ border-color: ${props => props.contrast === "" ? "#666" : "white"};
}
}
- label {
- color: ${(props) => (props.contrast === "" ? "#666" : "white")};
+ label{
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+
+ .MuiFormLabel-asterisk {
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+
+ .MuiFormLabel-asterisk.Mui-error {
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
}
label.Mui-focused {
@@ -263,10 +299,12 @@ const StyledTextField = styled(TextField)`
}
label.Mui-focused.Mui-error {
- color: red;
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
}
- width: 95%;
+ label.Mui-error {
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
`;
const StyledForm = styled.form`
diff --git a/src/Components/Stepper.js b/src/Components/Stepper.js
index a50f700c..2ed12b9d 100644
--- a/src/Components/Stepper.js
+++ b/src/Components/Stepper.js
@@ -38,7 +38,7 @@ export default function CustomizedSteppers(props) {
<div className={props.activeStep === index ? "currStep" : "step"}>
{
index < props.activeStep ?
- <Check style={props.contrast === "" ? { color: "#00bcd4" } : { color: "white" }} /> : index
+ <Check style={props.contrast === "" ? { color: "#00bcd4" } : { color: "white" }} /> : <span>{index + 1}</span>
}
</div>
</Grid>
@@ -53,7 +53,7 @@ export default function CustomizedSteppers(props) {
index < props.activeStep ?
<Check style={{ color: 'white' }} /> :
<span style={{ color: 'white' }}>
- {index}
+ {index + 1}
</span>
}
</div>
diff --git a/src/Components/UploadPageComponents/Forms/Keywords.js b/src/Components/UploadPageComponents/Forms/Keywords.js
index 42804710..023765f8 100644
--- a/src/Components/UploadPageComponents/Forms/Keywords.js
+++ b/src/Components/UploadPageComponents/Forms/Keywords.js
@@ -98,8 +98,7 @@ function Keywords(props) {
handleSetKeywords([...keywords, keywordsBuffer])
setKeywordsBuffer('')
}
- }
- }
+ }}
fullWidth
onBlur={() => { props.onBlurCallback("tags", keywords, props.draftID) }}
/>
diff --git a/src/Components/UploadPageComponents/Stepper.js b/src/Components/UploadPageComponents/Stepper.js
index a4acce46..a788b1bb 100644
--- a/src/Components/UploadPageComponents/Stepper.js
+++ b/src/Components/UploadPageComponents/Stepper.js
@@ -38,7 +38,7 @@ export default function CustomizedSteppers(props) {
<div className={props.activeStep === index ? "currStep" : "step"}>
{
index < props.activeStep ?
- <Check style={props.contrast === "" ? { color: "#00bcd4" } : { color: "white" }} /> : index
+ <Check style={props.contrast === "" ? { color: "#00bcd4" } : { color: "white" }} /> : <span>{index + 1}</span>
}
</div>
</Grid>
@@ -53,7 +53,7 @@ export default function CustomizedSteppers(props) {
index < props.activeStep ?
<Check style={{ color: 'white' }} /> :
<span style={{ color: 'white' }}>
- {index}
+ {index + 1}
</span>
}
</div>
diff --git a/src/Components/UploadPageComponents/StyledComponents.js b/src/Components/UploadPageComponents/StyledComponents.js
index f09077ac..e7bc2521 100644
--- a/src/Components/UploadPageComponents/StyledComponents.js
+++ b/src/Components/UploadPageComponents/StyledComponents.js
@@ -378,7 +378,33 @@ export const StyledTextField = styled(TextField)`
font-size : 14px;
width : 100% !important;
+ .MuiFormHelperText-root {
+ text-align : left;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+
+ .MuiFormHelperText-root.Mui-error {
+ text-align : left;
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
+ .MuiInput-underline::after {
+ border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ }
+
+ .MuiInput-underline.Mui-error::after {
+ border-color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
.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"};
}
@@ -391,17 +417,24 @@ export const StyledTextField = styled(TextField)`
color: ${props => props.contrast === "" ? "#666" : "white"};
}
+ .MuiFormLabel-asterisk {
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+
+ .MuiFormLabel-asterisk.Mui-error {
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
label.Mui-focused {
color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
}
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"};
}
`
--
GitLab