From 580d393e24b2944d5b5dba2ae78fe5c838c8b000 Mon Sep 17 00:00:00 2001
From: Luis Felipe Risch <lfr20@inf.ufpr.br>
Date: Thu, 5 Aug 2021 14:53:38 -0300
Subject: [PATCH 01/15] add piwik
---
src/App.js | 4 +---
1 file changed, 1 insertion(+), 3 deletions(-)
diff --git a/src/App.js b/src/App.js
index c06b1193..95f5dff5 100644
--- a/src/App.js
+++ b/src/App.js
@@ -170,12 +170,10 @@ export default function App() {
);
return (
- // add piwik later
- // history={piwik.connectToHistory(customHistory)}
<>
{!awaitTest &&
<React.Suspense fallback={<LoadingScreen/>}>
- <BrowserRouter>
+ <BrowserRouter history={piwik.connectToHistory(customHistory)}>
<Header />
<div
style={{
--
GitLab
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 02/15] 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
From 26260ca43afa6f5ba36d826550bd6dc83918425c Mon Sep 17 00:00:00 2001
From: Vinicius Gabriel Machado <vgm18@inf.ufpr.br>
Date: Wed, 22 Sep 2021 14:09:34 -0300
Subject: [PATCH 03/15] Implemented contrast on snackbar
---
src/Components/Alert.js | 2 +-
src/Components/ButtonGuardarColecao.js | 20 +-
src/Components/CollectionCardFunction.js | 20 +-
src/Components/CollectionCommentSection.js | 43 +--
src/Components/CollectionDowloadButton.js | 22 +-
src/Components/ContactButtons/FollowButton.js | 30 +-
src/Components/ContactCardOptions.js | 18 +-
src/Components/ContactForm.js | 18 +-
src/Components/Firulas.js | 20 +-
src/Components/Header.js | 22 +-
src/Components/ItemCardAction.js | 59 ++--
src/Components/LoginModal.js | 18 +-
src/Components/ModalAvaliarRecurso.js | 11 +-
src/Components/ModalExcluirColecao.js | 4 +-
src/Components/ReportModal.js | 4 +-
src/Components/ResourceCardFunction.js | 20 +-
src/Components/ResourceCardOptions.js | 4 +-
src/Components/ResourceList.js | 23 +-
.../ResourcePageComponents/CommentsArea.js | 23 +-
.../ResourcePageComponents/Footer.js | 18 +-
.../ResourcePageComponents/Sobre.js | 20 +-
.../ResourcePageComponents/TextoObjeto.js | 18 +-
src/Components/SignUpModal.js | 18 +-
src/Components/SnackbarComponent.js | 12 +-
.../UserPageTabs/ModalExcluirConta.js | 4 +-
.../UploadPageComponents/UploadFileWrapper.js | 18 +-
src/Pages/ChangePasswordPage.js | 54 +--
src/Pages/EditLearningObjectPage.js | 18 +-
src/Pages/EditProfilePage.js | 15 +-
src/Pages/ResourcePage.js | 326 +++++++++---------
src/Pages/Search.js | 38 +-
31 files changed, 425 insertions(+), 515 deletions(-)
diff --git a/src/Components/Alert.js b/src/Components/Alert.js
index 747b8199..49bbd29e 100644
--- a/src/Components/Alert.js
+++ b/src/Components/Alert.js
@@ -20,5 +20,5 @@ import React from 'react'
import MuiAlert from '@material-ui/lab/Alert';
export default function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
+ return <MuiAlert elevation={6} variant="filled" {...props} />;
}
diff --git a/src/Components/ButtonGuardarColecao.js b/src/Components/ButtonGuardarColecao.js
index ca0729a2..eaa40ad7 100644
--- a/src/Components/ButtonGuardarColecao.js
+++ b/src/Components/ButtonGuardarColecao.js
@@ -6,8 +6,8 @@ import CreateNewFolderIcon from '@material-ui/icons/CreateNewFolder';
import GuardarModal from './GuardarModal'
import SignUpModal from './SignUpModal'
import LoginModal from './LoginModal.js'
-import Snackbar from '@material-ui/core/Snackbar';
-import MuiAlert from '@material-ui/lab/Alert';
+
+import SnackBar from './SnackbarComponent';
export default function ButtonGuardarColecao(props) {
const { state } = useContext(Store)
@@ -29,10 +29,6 @@ export default function ButtonGuardarColecao(props) {
setLogin(!loginOpen)
}
- function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
- }
-
function toggleLoginSnackbar(reason) {
if (reason === 'clickaway') {
return;
@@ -51,11 +47,13 @@ export default function ButtonGuardarColecao(props) {
<LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
/>
- <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleLoginSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
- >
- <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={successfulLoginOpen}
+ handleClose={toggleLoginSnackbar}
+ severity={"success"}
+ color={"#00acc1"}
+ text={"Você está conectado(a)!"}
+ />
<GuardarModal contrast={props.contrast} open={saveToCol} handleClose={() => { toggleSave(false) }}
thumb={props.thumb} title={props.title} recursoId={props.learningObjectId}
/>
diff --git a/src/Components/CollectionCardFunction.js b/src/Components/CollectionCardFunction.js
index 926de15f..632c522d 100644
--- a/src/Components/CollectionCardFunction.js
+++ b/src/Components/CollectionCardFunction.js
@@ -36,8 +36,8 @@ import { Link } from 'react-router-dom';
import { putRequest } from '../Components/HelperFunctions/getAxiosConfig'
import SignUpModal from './SignUpModal'
import LoginModal from './LoginModal.js'
-import Snackbar from '@material-ui/core/Snackbar';
-import MuiAlert from '@material-ui/lab/Alert';
+
+import SnackBar from './SnackbarComponent';
//Image Import
import { noAvatar } from "ImportImages.js";
@@ -168,10 +168,6 @@ export default function CollectionCardFunction(props) {
setLogin(!loginOpen)
}
- function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
- }
-
function toggleLoginSnackbar(reason) {
if (reason === 'clickaway') {
return;
@@ -186,11 +182,13 @@ export default function CollectionCardFunction(props) {
<LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
/>
- <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleLoginSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
- >
- <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={successfulLoginOpen}
+ handleClose={toggleLoginSnackbar}
+ severity={"success"}
+ color={"#00acc1"}
+ text={"Você está conectado(a)!"}
+ />
<StyledCard>
<CardDiv className={`${props.contrast}Border`}>
<CardReaDiv className={`${props.contrast}BackColor`}>
diff --git a/src/Components/CollectionCommentSection.js b/src/Components/CollectionCommentSection.js
index a317a429..8acd3a54 100644
--- a/src/Components/CollectionCommentSection.js
+++ b/src/Components/CollectionCommentSection.js
@@ -23,17 +23,16 @@ import Button from '@material-ui/core/Button';
import styled from 'styled-components';
import CommentForm from './ResourcePageComponents/CommentForm.js';
import Comment from './Comment.js';
-import Snackbar from '@material-ui/core/Snackbar';
-import MuiAlert from '@material-ui/lab/Alert';
import { getRequest } from '../Components/HelperFunctions/getAxiosConfig'
import ExitToAppIcon from '@material-ui/icons/ExitToApp';
import SignUpModal from './SignUpModal.js';
import LoginModal from './LoginModal.js';
-import SnackBarComponent from './SnackbarComponent';
import CircularProgress from '@material-ui/core/CircularProgress';
import IconButton from '@material-ui/core/IconButton';
import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
+import SnackBar from './SnackbarComponent';
+
//Image Import
import { Comentarios } from "ImportImages.js";
@@ -95,10 +94,6 @@ export default function CollectionCommentSection(props) {
setSignUpOpen(true)
}
- function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
- }
-
function handleLoadMoreReviews() {
if (reviews.length !== parseInt(totalReviews))
setCurrPageReviews((previous) => previous + 1)
@@ -196,7 +191,7 @@ export default function CollectionCommentSection(props) {
return (
<CommentAreaContainer contrast={props.contrast} container xs={12} direction="row" justify="center" alignItems="center">
- <SnackBarComponent
+ <SnackBar
snackbarOpen={snackInfo.open}
handleClose={handleCloseSnack}
severity={snackInfo.severity}
@@ -259,26 +254,18 @@ export default function CollectionCommentSection(props) {
}
</CommentAreaCard>
</Grid>
- <Snackbar
- open={post_snack_open}
- autoHideDuration={6000}
- onClose={handlePostSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- >
- <Alert onClose={handlePostSnackbar} severity="info">
- Seu comentário foi publicado com sucesso!
- </Alert>
- </Snackbar>
- <Snackbar
- open={delete_snack_open}
- autoHideDuration={6000}
- onClose={handleDeleteSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- >
- <Alert onClose={handleDeleteSnackbar} severity="info">
- Comentário deletado com sucesso.
- </Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={post_snack_open}
+ handleClose={handlePostSnackbar}
+ severity={"info"}
+ text={"Seu comentário foi publicado com sucesso!"}
+ />
+ <SnackBar
+ snackbarOpen={delete_snack_open}
+ handleClose={handleDeleteSnackbar}
+ severity={"info"}
+ text={"Comentário deletado com sucesso."}
+ />
</CommentAreaContainer>
);
}
diff --git a/src/Components/CollectionDowloadButton.js b/src/Components/CollectionDowloadButton.js
index 427b3464..ed934968 100644
--- a/src/Components/CollectionDowloadButton.js
+++ b/src/Components/CollectionDowloadButton.js
@@ -5,12 +5,8 @@ import Button from '@material-ui/core/Button';
import styled from 'styled-components';
import { apiUrl, apiDomain } from '../env';
import { getRequest } from './HelperFunctions/getAxiosConfig'
-import Snackbar from '@material-ui/core/Snackbar';
-import MuiAlert from '@material-ui/lab/Alert';
-function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
+import SnackBar from './SnackbarComponent';
const DowloadButton = (props) => {
const [download_url, setDownloadUrl] = useState('');
@@ -85,16 +81,12 @@ const DowloadButton = (props) => {
return (
<>
- <Snackbar
- open={snackInfo.open}
- autoHideDuration={6000}
- onClose={handleCloseSnack}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- >
- <Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
- {snackInfo.text}
- </Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={snackInfo.open}
+ handleClose={handleCloseSnack}
+ severity={snackInfo.severity}
+ text={snackInfo.text}
+ />
<DownloadButton
contrast={props.contrast}
variant="outlined"
diff --git a/src/Components/ContactButtons/FollowButton.js b/src/Components/ContactButtons/FollowButton.js
index 96c7794c..114028d7 100644
--- a/src/Components/ContactButtons/FollowButton.js
+++ b/src/Components/ContactButtons/FollowButton.js
@@ -23,13 +23,9 @@ import styled from 'styled-components'
import Button from '@material-ui/core/Button';
import { putRequest } from '../HelperFunctions/getAxiosConfig'
import LoginModal from './../LoginModal.js'
-import Snackbar from '@material-ui/core/Snackbar';
import SignUpModal from './../SignUpModal'
-import MuiAlert from '@material-ui/lab/Alert';
-function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
+import SnackBar from '../SnackbarComponent';
export default function FollowButton(props) {
@@ -67,11 +63,13 @@ export default function FollowButton(props) {
return (
<React.Fragment>
- <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
- >
- <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={successfulLoginOpen}
+ handleClose={toggleSnackbar}
+ severity={"success"}
+ color={"#00acc1"}
+ text={"Você está conectado(a)!"}
+ />
{/*-------------------------------MODALS---------------------------------------*/}
<LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
@@ -145,11 +143,13 @@ export function NoIcon(props) {
return (
<React.Fragment>
- <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
- >
- <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={successfulLoginOpen}
+ handleClose={toggleSnackbar}
+ severity={"success"}
+ color={"#00acc1"}
+ text={"Você está conectado(a)!"}
+ />
{/*-------------------------------MODALS---------------------------------------*/}
<LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
diff --git a/src/Components/ContactCardOptions.js b/src/Components/ContactCardOptions.js
index f347928a..4811e21a 100644
--- a/src/Components/ContactCardOptions.js
+++ b/src/Components/ContactCardOptions.js
@@ -31,13 +31,9 @@ import { putRequest } from './HelperFunctions/getAxiosConfig'
import ReportModal from './ReportModal.js'
import {Link} from 'react-router-dom'
import LoginModal from './LoginModal.js'
-import Snackbar from '@material-ui/core/Snackbar';
import SignUpModal from './SignUpModal'
-import MuiAlert from '@material-ui/lab/Alert';
-function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
+import SnackBar from './SnackbarComponent';
export default function SimpleMenu(props) {
const {state} = useContext(Store)
@@ -86,11 +82,13 @@ export default function SimpleMenu(props) {
return (
<React.Fragment>
- <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
- >
- <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={successfulLoginOpen}
+ handleClose={toggleSnackbar}
+ severity={"success"}
+ color={"#00acc1"}
+ text={"Você está conectado(a)!"}
+ />
{/*-------------------------------MODALS---------------------------------------*/}
<LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
diff --git a/src/Components/ContactForm.js b/src/Components/ContactForm.js
index e44460d3..8d7f120c 100644
--- a/src/Components/ContactForm.js
+++ b/src/Components/ContactForm.js
@@ -22,13 +22,9 @@ import styled from 'styled-components';
import FormInput from "../Components/FormInput.js"
import { postRequest } from './HelperFunctions/getAxiosConfig'
import LoginModal from './LoginModal.js'
-import Snackbar from '@material-ui/core/Snackbar';
import SignUpModal from './SignUpModal'
-import MuiAlert from '@material-ui/lab/Alert';
-function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
+import SnackBar from './SnackbarComponent';
const Button = styled.button`
background-color: ${props => props.contrast === "" ? "#00acc1" : "black"};
@@ -224,11 +220,13 @@ function Formulario(props) {
return (
<React.Fragment>
- <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
- >
- <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={successfulLoginOpen}
+ handleClose={toggleSnackbar}
+ severity={"success"}
+ color={"#00acc1"}
+ text={"Você está conectado(a)!"}
+ />
{/*-------------------------------MODALS---------------------------------------*/}
<LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
diff --git a/src/Components/Firulas.js b/src/Components/Firulas.js
index 72dd44f1..d54f369d 100644
--- a/src/Components/Firulas.js
+++ b/src/Components/Firulas.js
@@ -8,8 +8,8 @@ import FavoriteIcon from '@material-ui/icons/Favorite';
import { putRequest } from './HelperFunctions/getAxiosConfig'
import SignUpModal from './SignUpModal'
import LoginModal from './LoginModal.js'
-import Snackbar from '@material-ui/core/Snackbar';
-import MuiAlert from '@material-ui/lab/Alert';
+
+import SnackBar from './SnackbarComponent';
export default function Firulas(props) {
const { state } = useContext(Store);
@@ -20,10 +20,6 @@ export default function Firulas(props) {
const [loginOpen, setLogin] = useState(false)
const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
- function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
- }
-
function handleSuccessLike(data) {
toggleLiked(!liked)
setLikesCount(data.count)
@@ -62,11 +58,13 @@ export default function Firulas(props) {
<LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
/>
- <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleLoginSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
- >
- <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={successfulLoginOpen}
+ handleClose={toggleLoginSnackbar}
+ severity={"success"}
+ color={"#00acc1"}
+ text={"Você está conectado(a)!"}
+ />
<Rating
className={`${props.contrast}IconColor`}
name="customized-empty"
diff --git a/src/Components/Header.js b/src/Components/Header.js
index fb512f3c..b374379c 100644
--- a/src/Components/Header.js
+++ b/src/Components/Header.js
@@ -23,19 +23,11 @@ import SignUpModal from './SignUpModal'
import LoginModal from './LoginModal.js'
import { Store } from '../Store';
import ColaborarModal from './ColaborarModal.js'
-import Snackbar from '@material-ui/core/Snackbar';
-import MuiAlert from '@material-ui/lab/Alert';
import { useLocation, useHistory } from 'react-router-dom'
import MenuBarMobile from './MenuBarMobile.js'
import { getRequest, validateGoogleLoginToken } from './HelperFunctions/getAxiosConfig'
-//const StyledButton = styled(Button)`
-// background : #ffa54c !important;
-// boxShadow :none;
-//`
-function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
+import SnackBar from './SnackbarComponent';
export default function Header(props) {
const { state, dispatch } = useContext(Store)
@@ -123,11 +115,13 @@ export default function Header(props) {
return (
<React.Fragment>
- <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
- >
- <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={successfulLoginOpen}
+ handleClose={toggleSnackbar}
+ severity={"success"}
+ color={"#00acc1"}
+ text={"Você está conectado(a)!"}
+ />
{
windowWidth > 990 ?
(
diff --git a/src/Components/ItemCardAction.js b/src/Components/ItemCardAction.js
index ed1cc7dd..05ecb235 100644
--- a/src/Components/ItemCardAction.js
+++ b/src/Components/ItemCardAction.js
@@ -17,8 +17,6 @@ You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
import React, {useState} from 'react';
import styled from 'styled-components';
-import Snackbar from '@material-ui/core/Snackbar';
-import MuiAlert from '@material-ui/lab/Alert';
import Button from '@material-ui/core/Button';
import gem from '../img/gamification/gem.svg';
import Dialog from '@material-ui/core/Dialog';
@@ -29,9 +27,7 @@ import DialogTitle from '@material-ui/core/DialogTitle';
import axios from 'axios'
import {apiUrl} from '../env';
-function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
+import SnackBar from './SnackbarComponent';
const actionStyle = (operation) => {
var stl = {
@@ -124,42 +120,45 @@ export default function ItemCardAction (props) {
return (
<div>
- <Snackbar open={info} autoHideDuration={6000} onClose={() => handleClose('info')}>
- <Alert onClose={handleClose} severity="info">
- {message}
- </Alert>
- </Snackbar>
- <Snackbar open={success} autoHideDuration={6000} onClose={() => handleClose('success')}>
- <Alert onClose={handleClose} severity="success">
- {message}
- </Alert>
- </Snackbar>
- <Snackbar open={failure} autoHideDuration={6000} onClose={() => handleClose('failure')}>
- <Alert onClose={handleClose} severity="error">
- {message}
- </Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={info}
+ handleClose={() => handleClose('info')}
+ severity={"info"}
+ text={message}
+ />
+ <SnackBar
+ snackbarOpen={success}
+ handleClose={() => handleClose('success')}
+ severity={"success"}
+ text={message}
+ />
+ <SnackBar
+ snackbarOpen={failure}
+ handleClose={() => handleClose('failure')}
+ severity={"error"}
+ text={message}
+ />
<span style={actionStyle(props.operation)} onClick={handleClick}>
{props.operation === 'buy' ? <GemImg src={gem}/> : <span/>}
{props.operation === 'buy' ? "COMPRAR" :
props.operation === 'equip' ? "USAR" : "TIRAR"}
</span>
<Dialog
- open={open_dialog}
- onClose={handleClose}
- aria-labelledby="alert-dialog-title"
- aria-describedby="alert-dialog-description"
- >
+ open={open_dialog}
+ onClose={handleClose}
+ aria-labelledby="alert-dialog-title"
+ aria-describedby="alert-dialog-description"
+ >
<DialogTitle id="alert-dialog-title">{"Deseja realmente comprar este item?"}</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
- <strong>Esta compra não envolve nenhum dinheiro real.</strong>
+ <strong>Esta compra não envolve nenhum dinheiro real.</strong>
- <br/><br/>O item que você deseja comprar, <strong>NOME DO ITEM</strong>, custa
- <GemImg src={gem}/><GemSpan>PREÇO</GemSpan> gemas. Você possui
- <GemImg src={gem}/><GemSpan><strong>GEMAS</strong></GemSpan> gemas.
+ <br/><br/>O item que você deseja comprar, <strong>NOME DO ITEM</strong>, custa
+ <GemImg src={gem}/><GemSpan>PREÇO</GemSpan> gemas. Você possui
+ <GemImg src={gem}/><GemSpan><strong>GEMAS</strong></GemSpan> gemas.
- <br/><br/>Comprar este item lhe deixará com <GemImg src={gem}/><GemSpan><strong>TANTAS</strong></GemSpan> gemas.
+ <br/><br/>Comprar este item lhe deixará com <GemImg src={gem}/><GemSpan><strong>TANTAS</strong></GemSpan> gemas.
</DialogContentText>
</DialogContent>
<DialogActions>
diff --git a/src/Components/LoginModal.js b/src/Components/LoginModal.js
index eeb51a8c..8dc9da52 100644
--- a/src/Components/LoginModal.js
+++ b/src/Components/LoginModal.js
@@ -23,10 +23,10 @@ import Zoom from '@material-ui/core/Fade';
import styled from 'styled-components'
import LoginContainer from './LoginContainerFunction.js'
import { Store } from '../Store.js'
-import Snackbar from '@material-ui/core/Snackbar';
-import MuiAlert from '@material-ui/lab/Alert';
import { authentication } from './HelperFunctions/getAxiosConfig'
+import SnackBar from './SnackbarComponent';
+
const StyledLogin = styled(Modal)`
margin : 0 !important;
margin-left : 0 !important;
@@ -38,9 +38,6 @@ const StyledLogin = styled(Modal)`
border-radius : 4px;
`
-export function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
export default function LoginModal(props) {
const { state, dispatch } = useContext(Store)
@@ -81,11 +78,12 @@ export default function LoginModal(props) {
return (
<>
- <Snackbar open={snackbarOpened} autoHideDuration={1000} onClose={handleCloseSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- >
- <Alert severity="error">Ocorreu um erro ao se conectar!</Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={snackbarOpened}
+ handleClose={handleCloseSnackbar}
+ severity={"error"}
+ text={"Ocorreu um erro ao se conectar!"}
+ />
<StyledLogin
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
diff --git a/src/Components/ModalAvaliarRecurso.js b/src/Components/ModalAvaliarRecurso.js
index 4376cee7..8ba192b8 100644
--- a/src/Components/ModalAvaliarRecurso.js
+++ b/src/Components/ModalAvaliarRecurso.js
@@ -28,12 +28,13 @@ import Radio from '@material-ui/core/Radio';
import FormControl from '@material-ui/core/FormControl';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import CloseModalButton from './CloseModalButton'
-import Snackbar from '@material-ui/core/Snackbar';
import { withStyles } from '@material-ui/core/styles';
import { getRequest } from './HelperFunctions/getAxiosConfig'
import LoadingSpinner from '../Components/LoadingSpinner'
import {StyledTextField, useStyles} from './ReportUserForm.js'
+import SnackBar from './SnackbarComponent';
+
const StyledRadio = withStyles({
root: {
color: '#666',
@@ -118,9 +119,11 @@ export default function ModalAvaliarRecurso(props) {
return (
<>
- <Snackbar open={snackbarCancelar} autoHideDuration={1000} onClose={toggleSnackbarCancelar}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- message="Você cancelou a avaliação deste recurso."
+ <SnackBar
+ snackbarOpen={snackbarCancelar}
+ handleClose={toggleSnackbarCancelar}
+ severity={"info"}
+ text={"Você cancelou a avaliação deste recurso."}
/>
{
options ?
diff --git a/src/Components/ModalExcluirColecao.js b/src/Components/ModalExcluirColecao.js
index cb55a931..f4b2dafd 100644
--- a/src/Components/ModalExcluirColecao.js
+++ b/src/Components/ModalExcluirColecao.js
@@ -23,7 +23,7 @@ import Fade from '@material-ui/core/Fade';
import styled from 'styled-components'
import { ButtonCancelar, ButtonEnviar } from './EditarColecaoForm';
import CloseModalButton from './CloseModalButton'
-import SnackbarComponent from './SnackbarComponent'
+import Snackbar from './SnackbarComponent'
import {deleteRequest} from './HelperFunctions/getAxiosConfig'
export default function ModalExcluirColecao (props) {
@@ -56,7 +56,7 @@ export default function ModalExcluirColecao (props) {
>
<Fade in={props.open}>
<>
- <SnackbarComponent snackbarOpen={snackbarOpen} severity={"info"} handleClose={() => {toggleSnackbar(false)}} text={"Coleção excluída com sucesso"}/>
+ <Snackbar snackbarOpen={snackbarOpen} severity={"info"} handleClose={() => {toggleSnackbar(false)}} text={"Coleção excluída com sucesso"}/>
<Container contrast={props.contrast}>
<Header>
<h2>Tem certeza que deseja excluir esta Coleção?</h2>
diff --git a/src/Components/ReportModal.js b/src/Components/ReportModal.js
index 0bccdb08..d9cdd16d 100644
--- a/src/Components/ReportModal.js
+++ b/src/Components/ReportModal.js
@@ -28,7 +28,7 @@ import ReportUserForm from './ReportUserForm.js'
import ReportRecursoForm from './ReportRecursoForm.js'
import ReportColecaoForm from './ReportColecaoForm.js'
import {postRequest} from './HelperFunctions/getAxiosConfig'
-import SnackbarComponent from './SnackbarComponent.js'
+import Snackbar from './SnackbarComponent.js'
function CloseModalButton (props) {
return (
@@ -80,7 +80,7 @@ export default function ReportModal (props) {
return (
<React.Fragment>
- <SnackbarComponent snackbarOpen={snackbarOpen} severity={"success"} handleClose={() => {handleSnackbar(false)}} text={"Sua reclamação foi recebida."}/>
+ <Snackbar snackbarOpen={snackbarOpen} severity={"success"} handleClose={() => {handleSnackbar(false)}} text={"Sua reclamação foi recebida."}/>
<StyledModal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
diff --git a/src/Components/ResourceCardFunction.js b/src/Components/ResourceCardFunction.js
index 00931008..5cd567ed 100644
--- a/src/Components/ResourceCardFunction.js
+++ b/src/Components/ResourceCardFunction.js
@@ -36,8 +36,8 @@ import "./ResourceCard.css";
import { putRequest } from './HelperFunctions/getAxiosConfig'
import SignUpModal from './SignUpModal'
import LoginModal from './LoginModal.js'
-import Snackbar from '@material-ui/core/Snackbar';
-import MuiAlert from '@material-ui/lab/Alert';
+
+import SnackBar from './SnackbarComponent';
//Image Import
import { noAvatar } from "ImportImages.js";
@@ -58,10 +58,6 @@ export default function ResourceCardFunction(props) {
const [loginOpen, setLogin] = useState(false)
const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
- function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
- }
-
useEffect(() => {
//decide which thumbnail to use
if (props.thumbnail) {
@@ -149,11 +145,13 @@ export default function ResourceCardFunction(props) {
<LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
/>
- <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleLoginSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
- >
- <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={successfulLoginOpen}
+ handleClose={toggleLoginSnackbar}
+ severity={"success"}
+ color={"#00acc1"}
+ text={"Você está conectado(a)!"}
+ />
<StyledCard>
<CardDiv className={`${props.contrast}Text ${props.contrast}Border`}>
<CardReaDiv>
diff --git a/src/Components/ResourceCardOptions.js b/src/Components/ResourceCardOptions.js
index acec633b..6c1b1e36 100644
--- a/src/Components/ResourceCardOptions.js
+++ b/src/Components/ResourceCardOptions.js
@@ -33,7 +33,7 @@ import ShareIcon from '@material-ui/icons/Share';
import AddIcon from '@material-ui/icons/CreateNewFolder';
import GuardarModal from './GuardarModal'
import ShareModal from './ShareModal'
-import SnackbarComponent from './SnackbarComponent'
+import Snackbar from './SnackbarComponent'
import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser';
import { getRequest } from './HelperFunctions/getAxiosConfig'
@@ -126,7 +126,7 @@ export default function ResourceCardOptions(props) {
<ShareModal contrast={props.contrast} open={shareOpen} handleClose={() => { toggleShare(false) }}
thumb={props.thumb} title={props.title} link={getShareablePageLink()}
/>
- <SnackbarComponent snackbarOpen={snackbarOpen} severity={"info"} handleClose={() => { toggleSnackbar(false) }} text={"Baixando o Recurso... Lembre-se de relatar sua experiência após o uso do Recurso!"}
+ <Snackbar snackbarOpen={snackbarOpen} severity={"info"} handleClose={() => { toggleSnackbar(false) }} text={"Baixando o Recurso... Lembre-se de relatar sua experiência após o uso do Recurso!"}
/>
<div style={{ fontSize: "12px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
<ButtonNoWidth aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
diff --git a/src/Components/ResourceList.js b/src/Components/ResourceList.js
index e708c007..ce720dc7 100644
--- a/src/Components/ResourceList.js
+++ b/src/Components/ResourceList.js
@@ -26,14 +26,9 @@ import CheckBoxIcon from '@material-ui/icons/CheckBox';
import GetAppIcon from '@material-ui/icons/GetApp';
import ResourceCardFunction from './ResourceCardFunction.js';
import FloatingDownloadButton from './FloatingDownloadButton.js';
-import Snackbar from '@material-ui/core/Snackbar';
-import MuiAlert from '@material-ui/lab/Alert';
import { apiUrl } from '../env.js';
-function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
-
+import SnackBar from './SnackbarComponent';
export default function ResourceList(props) {
@@ -184,16 +179,12 @@ export default function ResourceList(props) {
);
})}
</Grid>
- <Snackbar
- open={snackInfo.open}
- autoHideDuration={6000}
- onClose={handleCloseSnack}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- >
- <Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
- {snackInfo.text}
- </Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={snackInfo.open}
+ handleClose={handleCloseSnack}
+ severity={snackInfo.severity}
+ text={snackInfo.text}
+ />
<FloatingDownloadButton
handleDownloadSelection={handleDownloadSelection}
/>
diff --git a/src/Components/ResourcePageComponents/CommentsArea.js b/src/Components/ResourcePageComponents/CommentsArea.js
index 990e6098..3da805e2 100644
--- a/src/Components/ResourcePageComponents/CommentsArea.js
+++ b/src/Components/ResourcePageComponents/CommentsArea.js
@@ -27,22 +27,17 @@ import CommentForm from './CommentForm.js'
import Comment from '../Comment.js'
import { getRequest } from '../HelperFunctions/getAxiosConfig'
import LoginModal from './../LoginModal.js'
-import Snackbar from '@material-ui/core/Snackbar';
import SignUpModal from './../SignUpModal'
-import MuiAlert from '@material-ui/lab/Alert';
import CircularProgress from '@material-ui/core/CircularProgress';
import IconButton from '@material-ui/core/IconButton';
import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
-import SnackBarComponent from '../../Components/SnackbarComponent';
+
+import SnackBar from '../SnackbarComponent';
//Image Import
import { Comentarios } from "ImportImages.js";
import { noAvatar } from "ImportImages.js";
-function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
-
export default function CommentsArea(props) {
const { state } = useContext(Store)
const [comentarios, setComentarios] = useState([])
@@ -193,18 +188,20 @@ export default function CommentsArea(props) {
return (
<React.Fragment>
- <SnackBarComponent
+ <SnackBar
snackbarOpen={snackInfo.open}
handleClose={handleCloseSnack}
severity={snackInfo.severity}
text={snackInfo.text}
color={snackInfo.color}
/>
- <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
- >
- <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={successfulLoginOpen}
+ handleClose={toggleSnackbar}
+ severity={"success"}
+ color={"#00acc1"}
+ text={"Você está conectado(a)!"}
+ />
{/*-------------------------------MODALS---------------------------------------*/}
<LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
diff --git a/src/Components/ResourcePageComponents/Footer.js b/src/Components/ResourcePageComponents/Footer.js
index f1bc7465..b4b0e386 100644
--- a/src/Components/ResourcePageComponents/Footer.js
+++ b/src/Components/ResourcePageComponents/Footer.js
@@ -34,14 +34,10 @@ import MoreVertIcon from '@material-ui/icons/MoreVert';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import LoginModal from './../LoginModal.js'
-import Snackbar from '@material-ui/core/Snackbar';
import SignUpModal from './../SignUpModal'
-import MuiAlert from '@material-ui/lab/Alert';
import { getRequest } from '../HelperFunctions/getAxiosConfig'
-function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
+import SnackBar from '../SnackbarComponent';
function ReportButton(props) {
return (
@@ -148,11 +144,13 @@ export default function Footer(props) {
return (
<React.Fragment>
- <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
- >
- <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={successfulLoginOpen}
+ handleClose={toggleSnackbar}
+ severity={"success"}
+ color={"#00acc1"}
+ text={"Você está conectado(a)!"}
+ />
{/*-------------------------------MODALS---------------------------------------*/}
<ReportModal contrast={props.contrast} open={reportOpen} handleClose={() => { toggleReport(false) }}
form="recurso"
diff --git a/src/Components/ResourcePageComponents/Sobre.js b/src/Components/ResourcePageComponents/Sobre.js
index 63f646ae..a13ff431 100644
--- a/src/Components/ResourcePageComponents/Sobre.js
+++ b/src/Components/ResourcePageComponents/Sobre.js
@@ -34,17 +34,13 @@ import UpdateIcon from '@material-ui/icons/Update';
import AssignmentIcon from '@material-ui/icons/Assignment';
import ContactCardOptions from '../ContactCardOptions.js'
import LoginModal from './../LoginModal.js'
-import Snackbar from '@material-ui/core/Snackbar';
import SignUpModal from './../SignUpModal'
-import MuiAlert from '@material-ui/lab/Alert';
+
+import SnackBar from '../SnackbarComponent';
//Image Import
import { License } from "ImportImages.js";
-function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
-
function AdditionalInfoItem(props) {
return (
<span className="meta-objeto">
@@ -171,11 +167,13 @@ export default function Sobre(props) {
return (
<React.Fragment>
- <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
- >
- <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={successfulLoginOpen}
+ handleClose={toggleSnackbar}
+ severity={"success"}
+ color={"#00acc1"}
+ text={"Você está conectado(a)!"}
+ />
{/*-------------------------------MODALS---------------------------------------*/}
<LoginModal contrast={state.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
diff --git a/src/Components/ResourcePageComponents/TextoObjeto.js b/src/Components/ResourcePageComponents/TextoObjeto.js
index f40324cf..96585e7b 100644
--- a/src/Components/ResourcePageComponents/TextoObjeto.js
+++ b/src/Components/ResourcePageComponents/TextoObjeto.js
@@ -27,10 +27,10 @@ import EditIcon from '@material-ui/icons/Edit';
import DeleteForeverIcon from '@material-ui/icons/DeleteForever';
import Button from '@material-ui/core/Button';
import {Link, Redirect} from 'react-router-dom'
-import Alert from '../Alert.js';
-import Snackbar from '@material-ui/core/Snackbar';
import {deleteRequest} from '../HelperFunctions/getAxiosConfig'
+import SnackBar from '../SnackbarComponent';
+
export default function TextoObjeto (props) {
const {state} = useContext(Store)
@@ -111,13 +111,13 @@ export default function TextoObjeto (props) {
}}
/>
}
- <Snackbar open={snackbarOpen} autoHideDuration={1000} onClose={() => {toggleSnackbar(false)}}
- anchorOrigin = {{ vertical:'top', horizontal:'right' }}
- >
- <Alert severity="info" style={{backgroundColor:"#00acc1"}}>
- Recurso excluido com sucesso!
- </Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={snackbarOpen}
+ handleClose={() => {toggleSnackbar(false)}}
+ severity={"info"}
+ color={"#00acc1"}
+ text={"Recurso excluido com sucesso!"}
+ />
<Grid container style={{paddingLeft : "15px"}}>
<Grid item xs={11}>
<h3>{props.name}</h3>
diff --git a/src/Components/SignUpModal.js b/src/Components/SignUpModal.js
index 3114f8e5..8a329fca 100644
--- a/src/Components/SignUpModal.js
+++ b/src/Components/SignUpModal.js
@@ -23,13 +23,8 @@ import styled from 'styled-components'
import SignUpContainer from './SignUpContainerFunction.js'
import { Store } from '../Store.js'
import { authentication } from './HelperFunctions/getAxiosConfig'
-import Snackbar from '@material-ui/core/Snackbar';
-import MuiAlert from '@material-ui/lab/Alert';
-//import {postRequest} from './HelperFunctions/getAxiosConfig'
-export function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
+import SnackBar from './SnackbarComponent';
export default function SignUpModal(props) {
const { state, dispatch } = useContext(Store)
@@ -73,11 +68,12 @@ export default function SignUpModal(props) {
return (
<>
- <Snackbar open={snackbarOpened} autoHideDuration={1000} onClose={handleCloseSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- >
- <Alert severity="error">Ocorreu um erro ao se conectar!</Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={snackbarOpened}
+ handleClose={handleCloseSnackbar}
+ severity={"error"}
+ text={"Ocorreu um erro ao se conectar!"}
+ />
<StyledModalSignUp
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
diff --git a/src/Components/SnackbarComponent.js b/src/Components/SnackbarComponent.js
index 9017c2dc..0250f3a5 100644
--- a/src/Components/SnackbarComponent.js
+++ b/src/Components/SnackbarComponent.js
@@ -16,19 +16,19 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { /*useContext*/ } from 'react'
-import Alert from '../Components/Alert.js';
+import React, { useContext } from 'react'
+import Alert from './Alert.js';
import Snackbar from '@material-ui/core/Snackbar';
-//import { Store } from '../Store.js'
+import { Store } from '../Store.js'
export default function SnackbarComponent(props) {
-// const { state } = useContext(Store)
+ const { state } = useContext(Store)
return (
- <Snackbar open={props.snackbarOpen} autoHideDuration={3000} onClose={props.handleClose}
+ <Snackbar open={props.snackbarOpen} autoHideDuration={2000} onClose={props.handleClose}
anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
>
- <Alert severity={props.severity}>
+ <Alert severity={props.severity} style={state.contrast === "" ? props.color ? { backgroundColor: props.color } : {} : { backgroundColor: "black", color: "white", border: "1px solid white" }}>
{props.text}
</Alert>
</Snackbar>
diff --git a/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js b/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js
index 19f4c6e4..e4e99bc6 100644
--- a/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js
+++ b/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js
@@ -27,7 +27,7 @@ import CloseIcon from '@material-ui/icons/Close';
import GreyButton from '../../GreyButton'
import FormInput from '../../FormInput'
import {Link} from 'react-router-dom'
-import SnackbarComponent from '../../SnackbarComponent.js'
+import Snackbar from '../../SnackbarComponent.js'
import {deleteRequest} from '../../HelperFunctions/getAxiosConfig'
//Image Import
@@ -78,7 +78,7 @@ export default function ModalExcluirConta (props) {
return (
<React.Fragment>
- <SnackbarComponent snackbarOpen={snackbarOpen} severity={"info"} handleClose={() => {toggleSnackbar(false)}} text={deletedAccountText}/>
+ <Snackbar snackbarOpen={snackbarOpen} severity={"info"} handleClose={() => {toggleSnackbar(false)}} text={deletedAccountText}/>
<StyledModal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
diff --git a/src/Components/UploadPageComponents/UploadFileWrapper.js b/src/Components/UploadPageComponents/UploadFileWrapper.js
index 866f0209..8aa1b13b 100644
--- a/src/Components/UploadPageComponents/UploadFileWrapper.js
+++ b/src/Components/UploadPageComponents/UploadFileWrapper.js
@@ -27,8 +27,8 @@ import axios from 'axios'
import { apiUrl } from '../../env';
import DoneIcon from '@material-ui/icons/Done';
import DeleteIcon from '@material-ui/icons/Delete';
-import Alert from '../Alert.js';
-import Snackbar from '@material-ui/core/Snackbar';
+
+import SnackBar from '../SnackbarComponent';
export default function UploadFileWrapper(props) {
/*-----------------------------------------------------------------
@@ -221,13 +221,13 @@ export default function UploadFileWrapper(props) {
case "choosingLink":
return (
<React.Fragment>
- <Snackbar open={snackbarOpen} autoHideDuration={1000} onClose={() => { toggleSnackbar(false) }}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- >
- <Alert severity="info" style={{ backgroundColor: "#00acc1" }}>
- Link salvo com sucesso!
- </Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={snackbarOpen}
+ handleClose={() => { toggleSnackbar(false) }}
+ severity={"info"}
+ color={"#00acc1"}
+ text={"Link salvo com sucesso!"}
+ />
<ChooseLink contrast={props.contrast} handleNextStage={handleNextStage} submit={handleChooseLink} />
</React.Fragment>
)
diff --git a/src/Pages/ChangePasswordPage.js b/src/Pages/ChangePasswordPage.js
index a7f90c22..c7a2d84b 100644
--- a/src/Pages/ChangePasswordPage.js
+++ b/src/Pages/ChangePasswordPage.js
@@ -7,17 +7,13 @@ import { CompletarCadastroButton } from '../Components/TabPanels/UserPageTabs/Pa
import ValidateUserInput from '../Components/HelperFunctions/FormValidationFunction.js'
import CustomizedBreadcrumbs from '../Components/TabPanels/Breadcrumbs.js'
import { putRequest } from '../Components/HelperFunctions/getAxiosConfig'
-import Snackbar from '@material-ui/core/Snackbar'
-import MuiAlert from '@material-ui/lab/Alert'
import Grid from '@material-ui/core/Grid'
import IconButton from '@material-ui/core/IconButton'
import VisibilityIcon from '@material-ui/icons/Visibility'
import VisibilityOffIcon from '@material-ui/icons/VisibilityOff'
import { Store } from '../Store'
-function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
+import SnackBar from '../Components/SnackbarComponent';
export default function ChangePasswordPage(props) {
const { state } = useContext(Store)
@@ -176,16 +172,12 @@ export default function ChangePasswordPage(props) {
if (error)
return (
<BackgroundDiv contrast={state.contrast}>
- <Snackbar
- open={snackInfo.open}
- autoHideDuration={6000}
- onClose={handleCloseSnack}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- >
- <Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
- {snackInfo.text}
- </Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={snackInfo.open}
+ handleClose={handleCloseSnack}
+ severity={snackInfo.severity}
+ text={snackInfo.text}
+ />
<div>
<CustomizedBreadcrumbs contrast={state.contrast}
values={["Recuperar senha", "Alterar senha"]}
@@ -207,16 +199,12 @@ export default function ChangePasswordPage(props) {
else if (success)
return (
<BackgroundDiv contrast={state.contrast}>
- <Snackbar
- open={snackInfo.open}
- autoHideDuration={6000}
- onClose={handleCloseSnack}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- >
- <Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
- {snackInfo.text}
- </Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={snackInfo.open}
+ handleClose={handleCloseSnack}
+ severity={snackInfo.severity}
+ text={snackInfo.text}
+ />
<div>
<CustomizedBreadcrumbs contrast={state.contrast}
values={["Recuperar senha", "Alterar senha"]}
@@ -238,16 +226,12 @@ export default function ChangePasswordPage(props) {
else
return (
<BackgroundDiv contrast={state.contrast}>
- <Snackbar
- open={snackInfo.open}
- autoHideDuration={6000}
- onClose={handleCloseSnack}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- >
- <Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
- {snackInfo.text}
- </Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={snackInfo.open}
+ handleClose={handleCloseSnack}
+ severity={snackInfo.severity}
+ text={snackInfo.text}
+ />
<div>
<CustomizedBreadcrumbs contrast={state.contrast}
values={["Recuperar senha", "Alterar senha"]}
diff --git a/src/Pages/EditLearningObjectPage.js b/src/Pages/EditLearningObjectPage.js
index e9b4da89..a8325bc0 100644
--- a/src/Pages/EditLearningObjectPage.js
+++ b/src/Pages/EditLearningObjectPage.js
@@ -22,8 +22,6 @@ import axios from 'axios'
import {apiUrl, apiDomain} from '../env';
import Grid from '@material-ui/core/Grid';
import UploadFileWrapper from '../Components/UploadPageComponents/UploadFileWrapper.js'
-import Alert from '../Components/Alert.js';
-import Snackbar from '@material-ui/core/Snackbar';
import {Redirect} from 'react-router-dom'
import {GreyButton, OrangeButton, InfoBox} from '../Components/UploadPageComponents/StyledComponents.js'
import {Background} from '../Components/UploadPageComponents/StyledComponents'
@@ -43,6 +41,8 @@ import DisplayThumbnail from '../Components/UploadPageComponents/PartTwoComponen
import DragAndDropThumbnail from '../Components/UploadPageComponents/PartTwoComponents/DragAndDropThumbnail'
import {getRequest, deleteRequest, putRequest, postRequest} from '../Components/HelperFunctions/getAxiosConfig.js'
+import SnackBar from '../Components/SnackbarComponent';
+
export default function EditLearningObjectPage (props) {
const recursoId = props.match.params.recursoId
const {state} = useContext(Store)
@@ -246,13 +246,13 @@ export default function EditLearningObjectPage (props) {
}}
/>
}
- <Snackbar open={snackbarOpen} autoHideDuration={1000} onClose={() => {toggleSnackbar(false)}}
- anchorOrigin = {{ vertical:'top', horizontal:'right' }}
- >
- <Alert severity="info" style={{backgroundColor:"#00acc1"}}>
- Recurso excluido com sucesso!
- </Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={snackbarOpen}
+ handleClose={() => {toggleSnackbar(false)}}
+ severity={"info"}
+ color={"#00acc1"}
+ text={"Recurso excluido com sucesso!"}
+ />
{
!loading ?
(
diff --git a/src/Pages/EditProfilePage.js b/src/Pages/EditProfilePage.js
index 6ed58aec..56a72c8c 100644
--- a/src/Pages/EditProfilePage.js
+++ b/src/Pages/EditProfilePage.js
@@ -6,13 +6,13 @@ import Paper from '@material-ui/core/Paper';
import TabPanelEditarPerfil from '../Components/TabPanels/UserPageTabs/PanelEditarPerfil.js'
import TabPanelSolicitarContaProfessor from '../Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js'
import TabPanelGerenciarConta from '../Components/TabPanels/UserPageTabs/PanelGerenciarConta.js'
-import Snackbar from '@material-ui/core/Snackbar';
-import { Alert } from '../Components/LoginModal.js'
import Grid from '@material-ui/core/Grid'
import CustomizedBreadcrumbs from '../Components/TabPanels/Breadcrumbs.js'
import { putRequest } from '../Components/HelperFunctions/getAxiosConfig'
import { Store } from '../Store.js'
+import SnackBar from '../Components/SnackbarComponent';
+
export default function EditProfilePage(props) {
const { state, dispatch } = useContext(Store)
const id = state.currentUser.id
@@ -120,11 +120,12 @@ export default function EditProfilePage(props) {
return (
<Main contrast={state.contrast}>
- <Snackbar open={snackbarOpened.open} autoHideDuration={1000} onClose={handleCloseSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- >
- <Alert severity={snackbarOpened.severity} >{snackbarOpened.text}</Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={snackbarOpened.open}
+ handleClose={handleCloseSnackbar}
+ severity={snackbarOpened.severity}
+ text={snackbarOpened.text}
+ />
<CustomizedBreadcrumbs
contrast={state.contrast}
diff --git a/src/Pages/ResourcePage.js b/src/Pages/ResourcePage.js
index 17cc07ad..290de7b7 100644
--- a/src/Pages/ResourcePage.js
+++ b/src/Pages/ResourcePage.js
@@ -25,8 +25,6 @@ import TextoObjeto from "../Components/ResourcePageComponents/TextoObjeto.js";
import Footer from "../Components/ResourcePageComponents/Footer.js";
import Sobre from "../Components/ResourcePageComponents/Sobre.js";
import CommentsArea from "../Components/ResourcePageComponents/CommentsArea.js";
-import Snackbar from "@material-ui/core/Snackbar";
-import Alert from "../Components/Alert.js";
import VideoPlayer from "../Components/ResourcePageComponents/VideoPlayer.js";
import LoadingSpinner from "../Components/LoadingSpinner.js";
import { makeStyles } from "@material-ui/core/styles";
@@ -38,6 +36,8 @@ import { getRequest } from "../Components/HelperFunctions/getAxiosConfig";
import Button from '@material-ui/core/Button';
import { Link } from 'react-router-dom';
+import SnackBar from '../Components/SnackbarComponent';
+
//Image Import
import { noAvatar } from "ImportImages.js";
@@ -166,183 +166,179 @@ export default function LearningObjectPage(props) {
else
return (
<React.Fragment>
- <Snackbar
- open={snackbarOpen}
- autoHideDuration={6000}
- onClose={toggleSnackbar}
- anchorOrigin={{ vertical: "top", horizontal: "right" }}
- >
- <Alert severity="info"
- style={{ backgroundColor: "#00acc1" }}>
- {snackbarText[snackbarIndex]}
- </Alert>
- </Snackbar>
-
- <ModalAvaliarRecurso
- contrast={state.contrast}
- open={modalCuradoriaOpen}
- handleClose={() => {
- handleModalCuradoria(false);
- }}
- title={recurso.name}
- confirm={handleConfirm}
- setCriteria={setReportCriteria}
- />
- <ModalConfirmarCuradoria
- contrast={state.contrast}
- aceito={submissionAccepted}
- reportCriteria={reportCriteria}
- justificativa={justificativa}
- open={modalConfirmarCuradoriaOpen}
- handleClose={() => {
- handleModalConfirmarCuradoria(false);
- }}
- cancel={() => {
- handleModalCuradoria(true);
- }}
- recursoId={recurso.submission_id}
- finalizeCuratorshipFlow={finalizeCuratorshipFlow}
- handleErrorAprove={() => {
- handleSnackbar(6)
- }}
- />
- <Background contrast={state.contrast}>
- {carregando ? (
- <LoadingSpinner contrast={state.contrast} text={"Carregando Recurso"} />
- ) : (
- <>
- <Grid container spacing={2}>
- {recurso.object_type === "Vídeo" && !recurso.link ? (
- <Grid item xs={12}>
- <Card contrast={state.contrast}>
- <VideoPlayer
+ <SnackBar
+ snackbarOpen={snackbarOpen}
+ handleClose={toggleSnackbar}
+ severity={"info"}
+ color={"#00acc1"}
+ text={snackbarText[snackbarIndex]}
+ />
+
+ <ModalAvaliarRecurso
+ contrast={state.contrast}
+ open={modalCuradoriaOpen}
+ handleClose={() => {
+ handleModalCuradoria(false);
+ }}
+ title={recurso.name}
+ confirm={handleConfirm}
+ setCriteria={setReportCriteria}
+ />
+ <ModalConfirmarCuradoria
+ contrast={state.contrast}
+ aceito={submissionAccepted}
+ reportCriteria={reportCriteria}
+ justificativa={justificativa}
+ open={modalConfirmarCuradoriaOpen}
+ handleClose={() => {
+ handleModalConfirmarCuradoria(false);
+ }}
+ cancel={() => {
+ handleModalCuradoria(true);
+ }}
+ recursoId={recurso.submission_id}
+ finalizeCuratorshipFlow={finalizeCuratorshipFlow}
+ handleErrorAprove={() => {
+ handleSnackbar(6)
+ }}
+ />
+ <Background contrast={state.contrast}>
+ {carregando ? (
+ <LoadingSpinner contrast={state.contrast} text={"Carregando Recurso"} />
+ ) : (
+ <>
+ <Grid container spacing={2}>
+ {recurso.object_type === "Vídeo" && !recurso.link ? (
+ <Grid item xs={12}>
+ <Card contrast={state.contrast}>
+ <VideoPlayer
+ contrast={state.contrast}
+ link={recurso.link}
+ urlVerified={false}
+ videoUrl={recurso.default_attachment_location}
+ videoType={recurso.default_mime_type}
+ />
+ </Card>
+ </Grid>
+ ) : (
+ urlVerify(recurso.link) && (
+ <Grid item xs={12}>
+ <Card contrast={state.contrast}>
+ <VideoPlayer contrast={state.contrast} link={recurso.link} urlVerified={true} />
+ </Card>
+ </Grid>
+ )
+ )}
+
+ <Grid item xs={12}>
+ <Card contrast={state.contrast}>
+ <div>
+ {recurso.thumbnail && (
+ <img alt="recurso" src={apiDomain + recurso.thumbnail} />
+ )}
+
+ <TextoObjeto
contrast={state.contrast}
- link={recurso.link}
- urlVerified={false}
- videoUrl={recurso.default_attachment_location}
- videoType={recurso.default_mime_type}
+ name={recurso.name}
+ rating={recurso.review_average}
+ recursoId={id}
+ likesCount={recurso.likes_count}
+ likedBool={recurso.liked}
+ objType={recurso.object_type}
+ subjects={recurso.subjects}
+ educationalStages={recurso.educational_stages}
+ viewCount={recurso.views_count}
+ downloadCount={recurso.downloads_count}
+ id={recurso.publisher ? recurso.publisher.id : undefined}
+ stateRecurso={recurso.state}
+ attachments={recurso.attachments}
+ audioUrl={recurso.default_attachment_location}
/>
- </Card>
- </Grid>
- ) : (
- urlVerify(recurso.link) && (
- <Grid item xs={12}>
- <Card contrast={state.contrast}>
- <VideoPlayer contrast={state.contrast} link={recurso.link} urlVerified={true} />
- </Card>
- </Grid>
- )
- )}
-
- <Grid item xs={12}>
- <Card contrast={state.contrast}>
- <div>
- {recurso.thumbnail && (
- <img alt="recurso" src={apiDomain + recurso.thumbnail} />
- )}
+ </div>
- <TextoObjeto
+ <Footer
contrast={state.contrast}
- name={recurso.name}
- rating={recurso.review_average}
recursoId={id}
- likesCount={recurso.likes_count}
- likedBool={recurso.liked}
- objType={recurso.object_type}
- subjects={recurso.subjects}
- educationalStages={recurso.educational_stages}
- viewCount={recurso.views_count}
- downloadCount={recurso.downloads_count}
- id={recurso.publisher ? recurso.publisher.id : undefined}
- stateRecurso={recurso.state}
- attachments={recurso.attachments}
- audioUrl={recurso.default_attachment_location}
+ downloadableLink={recurso.default_attachment_location}
+ handleSnackbar={handleSnackbar}
+ link={recurso.link}
+ title={recurso.name}
+ thumb={recurso.thumbnail}
+ currPageLink={window.location.href}
+ complained={recurso.complained}
/>
- </div>
-
- <Footer
- contrast={state.contrast}
- recursoId={id}
- downloadableLink={recurso.default_attachment_location}
- handleSnackbar={handleSnackbar}
- link={recurso.link}
- title={recurso.name}
- thumb={recurso.thumbnail}
- currPageLink={window.location.href}
- complained={recurso.complained}
- />
- </Card>
- </Grid>
-
- <Grid item xs={12}>
- <Card contrast={state.contrast}>
- {/*todo: change render method on additional item info*/}
- <Sobre
- avatar={
- recurso.publisher
- ? recurso.publisher.avatar
- ? apiDomain + recurso.publisher.avatar
- : noAvatar
- : noAvatar
- }
- publisher={
- recurso.publisher ? recurso.publisher.name : undefined
- }
- id={recurso.publisher ? recurso.publisher.id : undefined}
- description={recurso.description}
- author={recurso.author}
- tags={recurso.tags}
- attachments={recurso.attachments}
- language={recurso.language}
- mimeType={recurso.default_mime_type}
- createdAt={recurso.created_at}
- updatedAt={recurso.updated_at}
- license={recurso.license}
- followed={recurso.publisher ? recurso.publisher.followed : undefined}
- />
- </Card>
- </Grid>
+ </Card>
+ </Grid>
- {recurso.state !== "submitted" && (
<Grid item xs={12}>
<Card contrast={state.contrast}>
- {/*adicionar funcionalidade ao botao de entrar*/}
- <CommentsArea
- recursoId={id}
- handleSnackbar={handleSnackbar}
- objType={recurso.object_type}
- recurso={true}
+ {/*todo: change render method on additional item info*/}
+ <Sobre
+ avatar={
+ recurso.publisher
+ ? recurso.publisher.avatar
+ ? apiDomain + recurso.publisher.avatar
+ : noAvatar
+ : noAvatar
+ }
+ publisher={
+ recurso.publisher ? recurso.publisher.name : undefined
+ }
+ id={recurso.publisher ? recurso.publisher.id : undefined}
+ description={recurso.description}
+ author={recurso.author}
+ tags={recurso.tags}
+ attachments={recurso.attachments}
+ language={recurso.language}
+ mimeType={recurso.default_mime_type}
+ createdAt={recurso.created_at}
+ updatedAt={recurso.updated_at}
+ license={recurso.license}
+ followed={recurso.publisher ? recurso.publisher.followed : undefined}
/>
</Card>
</Grid>
- )}
- </Grid>
-
- {recurso.state === "submitted" && checkAccessLevel("curator") && (
- <AppBar
- position="fixed"
- className={classes.appBar}
- style={state.contrast === "" ? { backgroundColor: "white" } : { backgroundColor: "black", borderTop: "1px solid white" }}
- >
- <StyledAppBarContainer contrast={state.contrast}>
- <div className="container">
- <div className="botoes">
- <ButtonAvaliarRecurso
- contrast={state.contrast}
- callback={() => {
- handleModalCuradoria(true);
- }}
+
+ {recurso.state !== "submitted" && (
+ <Grid item xs={12}>
+ <Card contrast={state.contrast}>
+ {/*adicionar funcionalidade ao botao de entrar*/}
+ <CommentsArea
+ recursoId={id}
+ handleSnackbar={handleSnackbar}
+ objType={recurso.object_type}
+ recurso={true}
/>
+ </Card>
+ </Grid>
+ )}
+ </Grid>
+
+ {recurso.state === "submitted" && checkAccessLevel("curator") && (
+ <AppBar
+ position="fixed"
+ className={classes.appBar}
+ style={state.contrast === "" ? { backgroundColor: "white" } : { backgroundColor: "black", borderTop: "1px solid white" }}
+ >
+ <StyledAppBarContainer contrast={state.contrast}>
+ <div className="container">
+ <div className="botoes">
+ <ButtonAvaliarRecurso
+ contrast={state.contrast}
+ callback={() => {
+ handleModalCuradoria(true);
+ }}
+ />
+ </div>
</div>
- </div>
- </StyledAppBarContainer>
- </AppBar>
- )}
- </>
- )}
- </Background>
- </React.Fragment>
- );
+ </StyledAppBarContainer>
+ </AppBar>
+ )}
+ </>
+ )}
+ </Background>
+ </React.Fragment>
+ );
}
const useStyles = makeStyles((theme) => ({
diff --git a/src/Pages/Search.js b/src/Pages/Search.js
index cedd2612..89cff15f 100644
--- a/src/Pages/Search.js
+++ b/src/Pages/Search.js
@@ -36,13 +36,9 @@ import {
filtersStages,
filtersLanguages,
} from '../Components/SearchPageComponents/filters';
-import Snackbar from '@material-ui/core/Snackbar';
-import MuiAlert from '@material-ui/lab/Alert';
import { Store } from '../Store'
-function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
+import SnackBar from '../Components/SnackbarComponent';
export default function Search() {
const history = useHistory();
@@ -430,16 +426,12 @@ export default function Search() {
return (
<div style={state.contrast === "" ? {} : { backgroundColor: "black" }}>
<MainPageError>
- <Snackbar
- open={snackInfo.open}
- autoHideDuration={6000}
- onClose={handleCloseSnack}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- >
- <Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
- {snackInfo.text}
- </Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={snackInfo.open}
+ handleClose={handleCloseSnack}
+ severity={snackInfo.severity}
+ text={snackInfo.text}
+ />
<Error contrast={state.contrast} />
</MainPageError>
</div>
@@ -448,16 +440,12 @@ export default function Search() {
return (
<div style={state.contrast === "" ? {} : { backgroundColor: "black" }}>
<MainPage>
- <Snackbar
- open={snackInfo.open}
- autoHideDuration={6000}
- onClose={handleCloseSnack}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- >
- <Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
- {snackInfo.text}
- </Alert>
- </Snackbar>
+ <SnackBar
+ snackbarOpen={snackInfo.open}
+ handleClose={handleCloseSnack}
+ severity={snackInfo.severity}
+ text={snackInfo.text}
+ />
<StyledBreadCrumbs contrast={state.contrast}>
<Link to='/'>Página Inicial</Link>
<span>Busca</span>
--
GitLab
From eb73dde9b74280bba83cbbb7e31f5638f54ecc61 Mon Sep 17 00:00:00 2001
From: Vinicius Gabriel Machado <vgm18@inf.ufpr.br>
Date: Mon, 27 Sep 2021 17:46:42 -0300
Subject: [PATCH 04/15] Implementing contrast in admin
---
.../Components/Components/AdminTemplate.js | 24 +-
src/Admin/Components/Components/AppBar.js | 125 +-
.../Components/DataCards/ActivityCard.js | 20 +-
.../Components/DataCards/CollectionCard.js | 20 +-
.../DataCards/CommunityQuestionCard.js | 26 +-
.../Components/DataCards/ComplaintsCard.js | 61 +-
.../DataCards/EducationalObjectsCard.js | 23 +-
.../Components/DataCards/InstitutionsCard.js | 20 +-
.../Components/DataCards/NoteVarCard.js | 20 +-
.../Components/DataCards/RatingCard.js | 20 +-
.../Components/DataCards/UserCard.js | 125 +-
.../Components/Inputs/CreateInstitution.js | 11 +-
.../Components/Inputs/CreateLanguage.js | 11 +-
.../Components/Inputs/CreateQuestion.js | 13 +-
.../Components/Inputs/CreateRating.js | 11 +-
.../Components/Inputs/CreateRole.js | 11 +-
.../Components/Inputs/EditCollection.js | 11 +-
.../Components/Inputs/EditEducationalObect.js | 12 +-
.../Components/Inputs/EditLanguage.js | 11 +-
.../Components/Inputs/EditRating.js | 11 +-
.../Components/Components/Inputs/EditRoles.js | 12 +-
.../Components/Components/Inputs/EditUser.js | 12 +-
.../Components/Inputs/IntitutionsInputs.js | 11 +-
.../Components/Inputs/NoteVarInputs.js | 11 +-
.../MobileComponents/MobilePageHeader.js | 18 +-
src/Admin/Components/Components/PageHeader.js | 35 +-
.../Components/Components/Unauthorized.js | 8 +-
src/Admin/Components/Components/Welcome.js | 9 +-
src/Admin/Components/Styles/DataCard.js | 10 +-
src/Admin/Components/Styles/WelcomeStyle.js | 9 +-
src/Admin/Pages/Pages/SubPages/Activity.js | 7 -
.../Pages/Pages/SubPages/AproveTeacher.js | 9 -
.../Pages/Pages/SubPages/BlockedUsers.js | 5 -
src/Admin/Pages/Pages/SubPages/Collections.js | 1077 +++++++++--------
.../Pages/SubPages/CommunityQuestions.js | 5 -
src/Admin/Pages/Pages/SubPages/Complaints.js | 5 -
.../Pages/SubPages/EducationalObjects.js | 5 -
src/Admin/Pages/Pages/SubPages/Inframe.js | 30 +-
.../Pages/Pages/SubPages/Institutions.js | 5 -
src/Admin/Pages/Pages/SubPages/Languages.js | 5 -
.../Pages/Pages/SubPages/NoteVariables.js | 5 -
src/Admin/Pages/Pages/SubPages/Permissions.js | 5 -
src/Admin/Pages/Pages/SubPages/Questions.js | 5 -
src/Admin/Pages/Pages/SubPages/Rating.js | 5 -
src/Admin/Pages/Pages/SubPages/SendEmail.js | 15 +-
src/Admin/Pages/Pages/SubPages/Users.js | 5 -
src/App.js | 12 +-
src/Components/LoadingSpinner.js | 20 +-
48 files changed, 1026 insertions(+), 920 deletions(-)
diff --git a/src/Admin/Components/Components/AdminTemplate.js b/src/Admin/Components/Components/AdminTemplate.js
index 42be22cd..57fc2a28 100644
--- a/src/Admin/Components/Components/AdminTemplate.js
+++ b/src/Admin/Components/Components/AdminTemplate.js
@@ -18,6 +18,7 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, { useContext } from "react";
import { Store } from 'Store'
+import styled from 'styled-components'
const Unauthorized = React.lazy(() => import('./Unauthorized'));
const AppBarAdmin = React.lazy(() => import('./AppBar'));
@@ -33,10 +34,10 @@ const AdminTemplate = (props) => {
const roles = [...state.currentUser.roles];
for (let i = 0; i < roles.length; i++)
if (roles[i].name === 'admin' || roles[i].name === 'editor')
- canUserEdit = true;
+ canUserEdit = true;
}
else {
- canUserEdit = false;
+ canUserEdit = false;
}
return canUserEdit;
@@ -44,21 +45,26 @@ const AdminTemplate = (props) => {
if (CheckUserPermission())
return (
- <div style={{ backgroundColor: " #D3D3D3" }}>
- <AppBarAdmin />
- <div>
+ <StyledDiv contrast={state.contrast}>
+ <AppBarAdmin contrast={state.contrast}/>
+ <div style={{margin: "20px"}}>
{props.inner}
</div>
- </div>
+ </StyledDiv>
)
else
return (
- <div style={{ backgroundColor: " #D3D3D3" }}>
+ <StyledDiv contrast={state.contrast}>
<div>
- <Unauthorized />
+ <Unauthorized contrast={state.contrast}/>
</div>
- </div>
+ </StyledDiv>
)
}
+const StyledDiv = styled.div`
+ background-color: ${props => props.contrast === "" ? "white" : "black"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+`
+
export default AdminTemplate;
diff --git a/src/Admin/Components/Components/AppBar.js b/src/Admin/Components/Components/AppBar.js
index b596c35f..c93e8213 100644
--- a/src/Admin/Components/Components/AppBar.js
+++ b/src/Admin/Components/Components/AppBar.js
@@ -6,68 +6,87 @@ import AppBar from "@material-ui/core/AppBar";
import { Tab, Tabs } from "@material-ui/core";
import { Link } from 'react-router-dom'
import { TabsItens } from '../../Pages/AdminLabelTabs/LabelTabs'
+import styled from "styled-components";
function TabPanel(props) {
- const { children, value, index, ...other } = props;
+ const { children, value, index, ...other } = props;
- return (
- <div
- role="tabpanel"
- hidden={value !== index}
- id={`nav-tabpanel-${index}`}
- aria-labelledby={`nav-tab-${index}`}
- {...other}
- >
- {value === index && (
- <Box p={3}>
- <Typography>{children}</Typography>
- </Box>
- )}
- </div>
- );
+ return (
+ <div
+ role="tabpanel"
+ hidden={value !== index}
+ id={`nav-tabpanel-${index}`}
+ aria-labelledby={`nav-tab-${index}`}
+ {...other}
+ >
+ {value === index && (
+ <Box p={3}>
+ <Typography>{children}</Typography>
+ </Box>
+ )}
+ </div>
+ );
}
TabPanel.propTypes = {
- children: PropTypes.node,
- index: PropTypes.any.isRequired,
- value: PropTypes.any.isRequired,
+ children: PropTypes.node,
+ index: PropTypes.any.isRequired,
+ value: PropTypes.any.isRequired,
};
function a11yProps(index) {
- return {
- id: `nav-tab-${index}`,
- "aria-controls": `nav-tabpanel-${index}`,
- };
+ return {
+ id: `nav-tab-${index}`,
+ "aria-controls": `nav-tabpanel-${index}`,
+ };
}
-export default function AppBarAdmin() {
- const [value, setValue] = React.useState(0);
+export default function AppBarAdmin(props) {
+ const [value, setValue] = React.useState(0);
- const handleChange = (event, newValue) => {
- setValue(newValue);
- };
+ const handleChange = (event, newValue) => {
+ setValue(newValue);
+ };
- return (
- <AppBar position="sticky" color="default">
- <Tabs
- variant="scrollable"
- scrollButtons="on"
- value={value}
- onChange={handleChange}
- aria-label="nav tabs example"
- >
- {
- TabsItens.map((label, index) => (
- <Tab
- key={label.href}
- label={label.label}
- to={label.href}
- icon={label.icon}
- component={Link}
- {...a11yProps(index)}
- />
- ))
- }
- </Tabs>
- </AppBar>
- )
-}
\ No newline at end of file
+ return (
+ <StyledAppBar position="sticky" contrast={props.contrast}>
+ <Tabs
+ variant="scrollable"
+ scrollButtons="on"
+ value={value}
+ onChange={handleChange}
+ aria-label="nav tabs example"
+ TabIndicatorProps={{style: {background: props.contrast === "" ? "orange" : "yellow"}}}
+ >
+ {
+ TabsItens.map((label, index) => (
+ <StyledTab
+ contrast={props.contrast}
+ key={label.href}
+ label={label.label}
+ to={label.href}
+ icon={label.icon}
+ component={Link}
+ {...a11yProps(index)}
+ />
+ ))
+ }
+ </Tabs>
+ </StyledAppBar>
+ )
+}
+
+const StyledTab = styled(Tab)`
+ svg {
+ fill: ${props => props.contrast === "" ? "" : "white"} !important;
+ }
+
+ color: ${props => props.contrast === "" ? "" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "" : "underline yellow"} !important;
+`
+
+const StyledAppBar = styled(AppBar)`
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ color: ${props => props.contrast === "" ? "#666" : "white"} !important;
+ border-bottom: 1px solid ${props => props.contrast === "" ? "black" : "white"} !important;
+ box-shadow: none !important;
+`
\ No newline at end of file
diff --git a/src/Admin/Components/Components/DataCards/ActivityCard.js b/src/Admin/Components/Components/DataCards/ActivityCard.js
index 58497e2e..6cf4be11 100644
--- a/src/Admin/Components/Components/DataCards/ActivityCard.js
+++ b/src/Admin/Components/Components/DataCards/ActivityCard.js
@@ -16,15 +16,14 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
import moment from 'moment';
// Maerial ui components
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
import ListRoundedIcon from "@material-ui/icons/ListRounded";
-import { useStyles } from "../../Styles/DataCard";
+import { useStyles, StyledCard } from "../../Styles/DataCard";
import Grid from "@material-ui/core/Grid";
//imports from local files
import { GetAData } from "../../../Filters";
@@ -32,7 +31,12 @@ import { getRequest } from '../../../../Components/HelperFunctions/getAxiosConfi
import { Link } from 'react-router-dom'
import LoadingSpinner from '../../../../Components/LoadingSpinner';
+import { Store } from 'Store'
+
const ActivityCard = () => {
+
+ const { state } = useContext(Store);
+
const classes = useStyles();
const [error, setError] = useState(null); //Necessary to consult the API, catch errors
@@ -101,11 +105,11 @@ const ActivityCard = () => {
];
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<CardContent>
<Grid container xs={12} justify="space-between" alignItems="center" alignContent="center">
<Grid item>
- <Typography className={classes.title} color="inherit" gutterBottom>
+ <Typography className={classes.title} gutterBottom>
{item.id}
</Typography>
</Grid>
@@ -124,16 +128,16 @@ const ActivityCard = () => {
<div style={{ height: "1em" }} />
{DATA.map((info, index) => (
<div className={classes.displayColumn} key={index}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
{info.subTitle}
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{info.prop === null ? "Sem dados" : info.prop}
</Typography>
</div>
))}
</CardContent>
- </Card>
+ </StyledCard>
);
}
};
diff --git a/src/Admin/Components/Components/DataCards/CollectionCard.js b/src/Admin/Components/Components/DataCards/CollectionCard.js
index a4ef28da..402caaf1 100644
--- a/src/Admin/Components/Components/DataCards/CollectionCard.js
+++ b/src/Admin/Components/Components/DataCards/CollectionCard.js
@@ -16,15 +16,14 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
import moment from 'moment';
// Maerial ui components
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
import ListRoundedIcon from "@material-ui/icons/ListRounded";
-import { useStyles } from "../../Styles/DataCard";
+import { useStyles, StyledCard } from "../../Styles/DataCard";
import Grid from '@material-ui/core/Grid';
// Icons
import EditRoundedIcon from "@material-ui/icons/EditRounded";
@@ -36,7 +35,12 @@ import LoadingSpinner from '../../../../Components/LoadingSpinner';
import SnackBar from '../../../../Components/SnackbarComponent';
import { getRequest, deleteRequest } from '../../../../Components/HelperFunctions/getAxiosConfig';
+import { Store } from 'Store'
+
const CollectionCard = () => {
+
+ const { state } = useContext(Store);
+
let history = useHistory()
const classes = useStyles();
const urlParams = new URLSearchParams(window.location.search);
@@ -148,7 +152,7 @@ const CollectionCard = () => {
];
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -164,7 +168,7 @@ const CollectionCard = () => {
<CardContent>
<Grid xs={12} justify="space-between" alignItems="center" container>
<Grid item>
- <Typography className={classes.title} color="inherit" gutterBottom>
+ <Typography className={classes.title} gutterBottom>
{item.name}
</Typography>
</Grid>
@@ -202,16 +206,16 @@ const CollectionCard = () => {
<div style={{ height: "1em" }} />
{DATA.map((info, index) => (
<div className={classes.displayColumn} key={index}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
{info.subTitle}
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{info.prop === null ? "Sem dados" : info.prop}
</Typography>
</div>
))}
</CardContent>
- </Card>
+ </StyledCard>
);
}
};
diff --git a/src/Admin/Components/Components/DataCards/CommunityQuestionCard.js b/src/Admin/Components/Components/DataCards/CommunityQuestionCard.js
index 3a4b844e..92512fb2 100644
--- a/src/Admin/Components/Components/DataCards/CommunityQuestionCard.js
+++ b/src/Admin/Components/Components/DataCards/CommunityQuestionCard.js
@@ -16,16 +16,15 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
import moment from 'moment';
// Maerial ui components
-import Card from "@material-ui/core/Card";
import Grid from "@material-ui/core/Grid";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
import ListRoundedIcon from "@material-ui/icons/ListRounded";
-import { useStyles } from "../../Styles/DataCard";
+import { useStyles, StyledCard } from "../../Styles/DataCard";
// Icons
import EmailRoundedIcon from '@material-ui/icons/EmailRounded';
//imports from local files
@@ -34,7 +33,12 @@ import { Link } from 'react-router-dom'
import { getRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import LoadingSpinner from '../../../../Components/LoadingSpinner';
+import { Store } from 'Store'
+
const CommunityQuestions = () => {
+
+ const { state } = useContext(Store);
+
const classes = useStyles();
const [error, setError] = useState(null); //Necessary to consult the API, catch errors
@@ -83,11 +87,11 @@ const CommunityQuestions = () => {
subTitle: "Email",
prop:
item.email ?
- <Link to={`/admin/sendEmail/?email=${item.email}`} style={{ textDecoration: 'none' }}>
+ <Link to={`/admin/sendEmail/?email=${item.email}`} style={state.contrast === "" ? {textDecoration: "none"} : {textDecoration: "yellow underline", color: "yellow"}}>
<Button
variant='text'
- color='primary'
- startIcon={<EmailRoundedIcon />}
+ color='inherit'
+ startIcon={<EmailRoundedIcon style={{color: state.contrast === "" ? "" : "white"}}/>}
>
{item.email}
</Button>
@@ -104,11 +108,11 @@ const CommunityQuestions = () => {
];
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<CardContent>
<Grid direction="row" justify="space-between" alignContent="center" alignItems="center" container>
<Grid item>
- <Typography className={classes.title} color="inherit" gutterBottom>
+ <Typography className={classes.title} gutterBottom>
{item.name}
</Typography>
</Grid>
@@ -127,16 +131,16 @@ const CommunityQuestions = () => {
<div style={{ height: "1em" }} />
{DATA.map((info, index) => (
<div className={classes.displayColumn} key={index}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
{info.subTitle}
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{info.prop === null ? "Sem dados" : info.prop}
</Typography>
</div>
))}
</CardContent>
- </Card>
+ </StyledCard>
);
}
};
diff --git a/src/Admin/Components/Components/DataCards/ComplaintsCard.js b/src/Admin/Components/Components/DataCards/ComplaintsCard.js
index 4c3fc133..9530abea 100644
--- a/src/Admin/Components/Components/DataCards/ComplaintsCard.js
+++ b/src/Admin/Components/Components/DataCards/ComplaintsCard.js
@@ -16,10 +16,9 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
import moment from 'moment';
// Maerial ui components
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
@@ -31,7 +30,7 @@ import GetAppRoundedIcon from "@material-ui/icons/GetAppRounded";
import LaunchRoundedIcon from "@material-ui/icons/LaunchRounded";
import RemoveRoundedIcon from "@material-ui/icons/RemoveRounded";
import RestoreRoundedIcon from "@material-ui/icons/RestoreRounded";
-import { useStyles } from "../../Styles/DataCard";
+import { useStyles, StyledCard } from "../../Styles/DataCard";
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
@@ -47,16 +46,19 @@ import { apiDomain } from '../../../../env';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
import SnackBar from '../../../../Components/SnackbarComponent';
import { getRequest, postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
+import { Store } from 'Store'
//styles
const PORTAL_MEC = "https://plataformaintegrada.mec.gov.br/";
const CollectionCard = () => {
+
+ const { state } = useContext(Store);
+
const classes = useStyles();
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get("id");
-
const [error, setError] = useState(null); //Necessary to consult the API, catch errors
const [isLoaded, setIsLoaded] = useState(false); //Necessary to consult the API, wait until complete
const [item, setItem] = useState({}); //Necessary to consult the API, data
@@ -133,7 +135,8 @@ const CollectionCard = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#FA8072",
+ backgroundColor: state.contrast === "" ? "#FA8072" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -150,7 +153,8 @@ const CollectionCard = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#FF8C00",
+ backgroundColor: state.contrast === "" ? "#FF8C00" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -165,7 +169,8 @@ const CollectionCard = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#228B22",
+ backgroundColor: state.contrast === "" ? "#228B22" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -287,7 +292,6 @@ const CollectionCard = () => {
>
<Grid item>
<Typography
- color="initial"
className={classes.subTitle}
variant="h6"
>
@@ -323,7 +327,6 @@ const CollectionCard = () => {
>
<Grid item>
<Typography
- color="initial"
className={classes.subTitle}
variant="h6"
>
@@ -513,7 +516,8 @@ const CollectionCard = () => {
padding: "0.8em",
marginBottom: "1em",
marginRight: "1em",
- backgroundColor: "#D3D3D3",
+ backgroundColor: state.contrast === "" ? "#D3D3D3" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontSize: 14,
}}
>
@@ -542,10 +546,10 @@ const CollectionCard = () => {
) : null}
{importantData.map((info, index) => (
<Grid item className={classes.displayColumn} key={index}>
- <Typography color="textPrimary">
+ <Typography>
{info.subTitle}
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{info.prop === null ? "Sem dados" : info.prop}
</Typography>
</Grid>
@@ -668,20 +672,18 @@ const CollectionCard = () => {
md={6}
xs={12}
>
- <Card>
+ <StyledCard contrast={state.contrast}>
<CardContent>
<Grid container justify="space-between">
<Grid item>
<Typography
className={classes.title}
- color="inherit"
gutterBottom
>
Denuncia:
</Typography>
<Typography
className={classes.title}
- color="inherit"
gutterBottom
>
{
@@ -708,10 +710,10 @@ const CollectionCard = () => {
<div style={{ height: "1em" }} />
{DATA.map((info, index) => (
<div className={classes.displayColumn} key={index}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
{info.subTitle}
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{info.prop === null ? "Sem dados" : info.prop}
</Typography>
</div>
@@ -720,7 +722,7 @@ const CollectionCard = () => {
{
DisplayButtonsArea(item.complainable_type)
}
- </Card>
+ </StyledCard>
</Grid>
<Grid
@@ -729,7 +731,7 @@ const CollectionCard = () => {
xs={12}
>
<Grid item>
- <Card>
+ <StyledCard contrast={state.contrast}>
<CardContent>
<Typography variant="h5" component="h2">
Denúncia #{item.id}
@@ -740,13 +742,12 @@ const CollectionCard = () => {
<Grid container className={classes.marginTop}>
<Grid item>
<Typography
- color="textSecondary"
className={classes.subTitle}
variant="h6"
>
Descrição
</Typography>
- <Typography color="initial">{item.description}</Typography>
+ <Typography>{item.description}</Typography>
</Grid>
</Grid>
@@ -759,24 +760,22 @@ const CollectionCard = () => {
>
<Grid item>
<Typography
- color="textSecondary"
className={classes.subTitle}
>
Data
</Typography>
- <Typography color="initial">
+ <Typography>
{DisplayDate(item.created_at)}
</Typography>
</Grid>
<Grid item>
<Typography
- color="textSecondary"
className={classes.subTitle}
>
Denunciante
</Typography>
- <Typography color="initial">{item.user_id}</Typography>
+ <Typography>{item.user_id}</Typography>
</Grid>
</Grid>
@@ -785,13 +784,12 @@ const CollectionCard = () => {
<Grid container className={classes.marginTop}>
<Grid item>
<Typography
- color="textSecondary"
className={classes.subTitle}
variant="h6"
>
Motivo
</Typography>
- <Typography color="initial">
+ <Typography>
{item.complaint_reason.reason}
</Typography>
</Grid>
@@ -800,23 +798,22 @@ const CollectionCard = () => {
<Grid container className={classes.marginTop}>
<Grid item>
<Typography
- color="textSecondary"
className={classes.subTitle}
variant="h6"
>
Status
</Typography>
- <Typography color="initial">
+ <Typography>
{item.complaint_reason.status}
</Typography>
</Grid>
</Grid>
</CardContent>
- </Card>
+ </StyledCard>
</Grid>
<Grid item className={classes.marginTop}>
- <Card>
+ <StyledCard contrast={state.contrast}>
<CardContent>
<Typography variant="h5" component="h2">
Ações
@@ -825,7 +822,7 @@ const CollectionCard = () => {
Actions(item.state, item.complainable_type)
}
</CardContent>
- </Card>
+ </StyledCard>
</Grid>
</Grid>
diff --git a/src/Admin/Components/Components/DataCards/EducationalObjectsCard.js b/src/Admin/Components/Components/DataCards/EducationalObjectsCard.js
index 6f865726..8108385e 100644
--- a/src/Admin/Components/Components/DataCards/EducationalObjectsCard.js
+++ b/src/Admin/Components/Components/DataCards/EducationalObjectsCard.js
@@ -16,10 +16,9 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
import moment from "moment";
// Maerial ui components
-import Card from "@material-ui/core/Card";
import Paper from "@material-ui/core/Paper";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
@@ -27,7 +26,7 @@ import Button from "@material-ui/core/Button";
import ListRoundedIcon from "@material-ui/icons/ListRounded";
import VisibilityIcon from "@material-ui/icons/Visibility";
import EditRoundedIcon from "@material-ui/icons/EditRounded";
-import { useStyles } from "../../Styles/DataCard";
+import { useStyles, StyledCard } from "../../Styles/DataCard";
import DeleteRoundedIcon from "@material-ui/icons/DeleteRounded";
//imports from local files
import { GetAData, DeleteFilter } from "../../../Filters";
@@ -41,7 +40,12 @@ import {
} from "../../../../Components/HelperFunctions/getAxiosConfig";
import SnackBar from "../../../../Components/SnackbarComponent";
+import { Store } from 'Store'
+
const CommunityQuestions = () => {
+
+ const { state } = useContext(Store);
+
const classes = useStyles();
let history = useHistory();
const urlParams = new URLSearchParams(window.location.search);
@@ -189,7 +193,9 @@ const CommunityQuestions = () => {
padding: "0.8em",
marginBottom: "1em",
marginRight: "1em",
- backgroundColor: "#D3D3D3",
+ backgroundColor: state.contrast === "" ? "#D3D3D3" : "black",
+ color: state.contrast === "" ? "black" : "white",
+ border: state.contrast === "" ? "" : "1px solid white",
fontSize: 14,
}}
>
@@ -206,7 +212,7 @@ const CommunityQuestions = () => {
];
return (
- <Card variant="outlined">
+ <StyledCard contrast={state.contrast} variant="outlined">
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -233,7 +239,6 @@ const CommunityQuestions = () => {
<Grid item>
<Typography
className={classes.title}
- color="inherit"
gutterBottom
>
{item.name}
@@ -305,16 +310,16 @@ const CommunityQuestions = () => {
{DATA.map((info, index) => (
<div className={classes.displayColumn} key={index}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
{info.subTitle}
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{info.prop === null ? "Sem dados" : info.prop}
</Typography>
</div>
))}
</CardContent>
- </Card>
+ </StyledCard>
);
}
};
diff --git a/src/Admin/Components/Components/DataCards/InstitutionsCard.js b/src/Admin/Components/Components/DataCards/InstitutionsCard.js
index 1791b22d..5819713b 100644
--- a/src/Admin/Components/Components/DataCards/InstitutionsCard.js
+++ b/src/Admin/Components/Components/DataCards/InstitutionsCard.js
@@ -16,15 +16,14 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
import moment from 'moment'
// Maerial ui components
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
import ListRoundedIcon from "@material-ui/icons/ListRounded";
-import { useStyles } from "../../Styles/DataCard";
+import { useStyles, StyledCard } from "../../Styles/DataCard";
import Grid from '@material-ui/core/Grid';
// Icons
import EditRoundedIcon from "@material-ui/icons/EditRounded";
@@ -36,7 +35,12 @@ import { Link, useHistory } from 'react-router-dom';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
import SnackBar from '../../../../Components/SnackbarComponent';
+import { Store } from 'Store'
+
const InstitutionCard = () => {
+
+ const { state } = useContext(Store);
+
const classes = useStyles();
let history = useHistory();
const urlParams = new URLSearchParams(window.location.search);
@@ -147,7 +151,7 @@ const InstitutionCard = () => {
];
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -163,7 +167,7 @@ const InstitutionCard = () => {
<CardContent>
<Grid container xs={12} justify="space-between" alignItems="center" alignContent="center">
<Grid item>
- <Typography className={classes.title} color="inherit" gutterBottom>
+ <Typography className={classes.title} gutterBottom>
{item.name}
</Typography>
</Grid>
@@ -201,16 +205,16 @@ const InstitutionCard = () => {
<div style={{ height: "1em" }} />
{DATA.map((info, index) => (
<div className={classes.displayColumn} key={index}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
{info.subTitle}
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{info.prop === null ? "Sem dados" : info.prop}
</Typography>
</div>
))}
</CardContent>
- </Card>
+ </StyledCard>
);
}
};
diff --git a/src/Admin/Components/Components/DataCards/NoteVarCard.js b/src/Admin/Components/Components/DataCards/NoteVarCard.js
index 7c7b4356..95d77f98 100644
--- a/src/Admin/Components/Components/DataCards/NoteVarCard.js
+++ b/src/Admin/Components/Components/DataCards/NoteVarCard.js
@@ -16,16 +16,15 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
import moment from 'moment';
// Maerial ui components
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
import ListRoundedIcon from "@material-ui/icons/ListRounded";
import Grid from "@material-ui/core/Grid";
-import { useStyles } from "../../Styles/DataCard";
+import { useStyles, StyledCard } from "../../Styles/DataCard";
// Icons
import EditRoundedIcon from "@material-ui/icons/EditRounded";
//imports from local files
@@ -34,7 +33,12 @@ import { getRequest } from '../../../../Components/HelperFunctions/getAxiosConfi
import { Link } from 'react-router-dom';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
+import { Store } from 'Store'
+
const NoteCard = () => {
+
+ const { state } = useContext(Store);
+
const classes = useStyles();
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get("id");
@@ -98,11 +102,11 @@ const NoteCard = () => {
]
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<CardContent>
<Grid container xs={12} justify="space-between" alignContent="center" alignItems="center">
<Grid item>
- <Typography className={classes.title} color="inherit" gutterBottom>
+ <Typography className={classes.title} gutterBottom>
{item.name}
</Typography>
</Grid>
@@ -131,16 +135,16 @@ const NoteCard = () => {
<div style={{height: "1em"}}/>
{DATA.map((info, index) => (
<div className={classes.displayColumn} key={index}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
{info.subTitle}
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{info.prop === null ? "Sem dados" : info.prop}
</Typography>
</div>
))}
</CardContent>
- </Card>
+ </StyledCard>
);
}
};
diff --git a/src/Admin/Components/Components/DataCards/RatingCard.js b/src/Admin/Components/Components/DataCards/RatingCard.js
index b5f69a53..efe96c2d 100644
--- a/src/Admin/Components/Components/DataCards/RatingCard.js
+++ b/src/Admin/Components/Components/DataCards/RatingCard.js
@@ -16,16 +16,15 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
import moment from 'moment';
// Maerial ui components
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
import ListRoundedIcon from "@material-ui/icons/ListRounded";
import Grid from "@material-ui/core/Grid";
-import { useStyles } from "../../Styles/DataCard";
+import { useStyles, StyledCard } from "../../Styles/DataCard";
// Icons
import EditRoundedIcon from "@material-ui/icons/EditRounded";
import DeleteRoundedIcon from "@material-ui/icons/DeleteRounded";
@@ -36,7 +35,12 @@ import { Link, useHistory } from 'react-router-dom';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
import SnackBar from '../../../../Components/SnackbarComponent';
+import { Store } from 'Store'
+
const RatingCard = () => {
+
+ const { state } = useContext(Store);
+
const classes = useStyles();
let history = useHistory();
const urlParams = new URLSearchParams(window.location.search);
@@ -135,7 +139,7 @@ const RatingCard = () => {
];
return (
- <Card variant="outlined">
+ <StyledCard contrast={state.contrast} variant="outlined">
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -151,7 +155,7 @@ const RatingCard = () => {
<CardContent>
<Grid container xs={12} justify="space-between" alignItems="center" alignContent="center">
<Grid item>
- <Typography className={classes.title} color="inherit" gutterBottom>
+ <Typography className={classes.title} gutterBottom>
{item.name}
</Typography>
</Grid>
@@ -189,16 +193,16 @@ const RatingCard = () => {
<div style={{ height: "1em" }} />
{DATA.map((info, index) => (
<div className={classes.displayColumn} key={index}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
{info.subTitle}
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{info.prop === null ? "Sem dados" : info.prop}
</Typography>
</div>
))}
</CardContent>
- </Card>
+ </StyledCard>
);
}
};
diff --git a/src/Admin/Components/Components/DataCards/UserCard.js b/src/Admin/Components/Components/DataCards/UserCard.js
index 0e5563ec..203b45cb 100644
--- a/src/Admin/Components/Components/DataCards/UserCard.js
+++ b/src/Admin/Components/Components/DataCards/UserCard.js
@@ -16,10 +16,9 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
import moment from 'moment';
// Maerial ui components
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
@@ -28,7 +27,7 @@ import Grid from "@material-ui/core/Grid";
import RemoveCircleOutlineRoundedIcon from '@material-ui/icons/RemoveCircleOutlineRounded';
import ListRoundedIcon from "@material-ui/icons/ListRounded";
import Chip from '@material-ui/core/Chip';
-import { useStyles } from "../../Styles/DataCard";
+import { useStyles, StyledCard } from "../../Styles/DataCard";
import EmailRoundedIcon from '@material-ui/icons/EmailRounded';
import EditRoundedIcon from '@material-ui/icons/EditRounded';
import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
@@ -41,12 +40,16 @@ import { Link, useHistory } from "react-router-dom";
import LoadingSpinner from '../../../../Components/LoadingSpinner';
import SnackBar from '../../../../Components/SnackbarComponent';
import { getRequest, postRequest, deleteRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
+import { Store } from 'Store'
//styles
import styled from 'styled-components';
//Image Import
import { noAvatar } from "ImportImages.js";
const CollectionCard = () => {
+
+ const { state } = useContext(Store);
+
let history = useHistory()
const classes = useStyles();
const urlParams = new URLSearchParams(window.location.search);
@@ -71,7 +74,8 @@ const CollectionCard = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#228B22",
+ backgroundColor: state.contrast === "" ? "#228B22" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -85,7 +89,8 @@ const CollectionCard = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#FF8C00",
+ backgroundColor: state.contrast === "" ? "#FF8C00" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -99,7 +104,8 @@ const CollectionCard = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#FA8072",
+ backgroundColor: state.contrast === "" ? "#FA8072" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -113,7 +119,8 @@ const CollectionCard = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#797D7F ",
+ backgroundColor: state.contrast === "" ? "#797D7F" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -215,13 +222,14 @@ const CollectionCard = () => {
)
}
- const isBlocked = (state) => {
- if (state === "blocked" || state === "banished")
+ const isBlocked = (stateb) => {
+ if (stateb === "blocked" || stateb === "banished")
return <Paper
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "red",
+ backgroundColor: state.contrast === "" ? "red" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -230,8 +238,8 @@ const CollectionCard = () => {
</Paper>
}
- const actionsForBlockedUser = (state) => {
- if (state === "blocked" || state === "banished") {
+ const actionsForBlockedUser = (stateb) => {
+ if (stateb === "blocked" || stateb === "banished") {
return (
<Button
style={{ width: "100%", marginBottom: "0.5em" }}
@@ -244,9 +252,11 @@ const CollectionCard = () => {
</Button>
)
}
- return <Typography color="textSecondary">
- Usuário não bloqueado
- </Typography>
+ return (
+ <Typography>
+ Usuário não bloqueado
+ </Typography>
+ )
}
const actionsForStateTeacherRequest = (state) => {
@@ -288,9 +298,11 @@ const CollectionCard = () => {
</Grid>
)
}
- return <Typography color="textSecondary">
- Usuário não requisitou conta de professor
- </Typography>
+ return (
+ <Typography>
+ Usuário não requisitou conta de professor
+ </Typography>
+ )
}
const ReactiveUser = () => {
@@ -352,13 +364,12 @@ const CollectionCard = () => {
md={6}
xs={12}
>
- <Card>
+ <StyledCard contrast={state.contrast}>
<CardContent>
<Grid container justify="space-between">
<Grid item xs={12}>
<Typography
className={classes.title}
- color="inherit"
gutterBottom
>
Identificação do usuário
@@ -412,24 +423,24 @@ const CollectionCard = () => {
</Grid>
<Grid item>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
Nome
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{item.name === null ? "Sem dados" : item.name}
</Typography>
</div>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
Email
</Typography>
{
item.email ?
- <Link to={`/admin/sendEmail?email=${item.email}`} style={{ textDecoration: 'none' }}>
+ <Link to={`/admin/sendEmail?email=${item.email}`} style={state.contrast === "" ? {textDecoration: "none"} : {textDecoration: "yellow underline", color: "yellow"}}>
<Button
variant='text'
- color='primary'
- startIcon={<EmailRoundedIcon />}
+ color='inherit'
+ startIcon={<EmailRoundedIcon style={{color: state.contrast === "" ? "" : "white"}}/>}
>
{item.email}
</Button>
@@ -437,10 +448,10 @@ const CollectionCard = () => {
}
</div>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
Cpf
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{item.cpf === null ? "Sem dados" : item.cpf}
</Typography>
</div>
@@ -448,40 +459,40 @@ const CollectionCard = () => {
</Grid>
<Grid>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
Escola
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{item.school ? item.school.name : "Sem dados"}
</Typography>
</div>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
Telefone da escola
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{item.school ? item.school.phone : "Sem dados"}
</Typography>
</div>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
UF
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{item.school ? item.school.uf : "Sem dados"}
</Typography>
</div>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
Munícipo
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{item.school ? item.school.city : "Sem dados"}
</Typography>
</div>
</Grid>
</CardContent>
- </Card>
+ </StyledCard>
</Grid>
<Grid
@@ -490,7 +501,7 @@ const CollectionCard = () => {
xs={12}
>
<Grid item>
- <Card>
+ <StyledCard contrast={state.contrast}>
<CardContent>
<Typography variant="h5" component="h2">
Informações do perfil
@@ -505,10 +516,10 @@ const CollectionCard = () => {
<Grid container justify="flex-start">
<Grid item>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
Descrição
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{item.description}
</Typography>
</div>
@@ -517,10 +528,10 @@ const CollectionCard = () => {
<Grid container direction="row" justify="space-between" spacing={1} alignItems="center">
<Grid item>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
Criado em
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{DisplayDate(item.created_at)}
</Typography>
</div>
@@ -528,10 +539,10 @@ const CollectionCard = () => {
<Grid item>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
Atualizado em
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{DisplayDate(item.updated_at)}
</Typography>
</div>
@@ -540,7 +551,7 @@ const CollectionCard = () => {
<Grid item>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
Permissões
</Typography>
<Grid container direction="row">
@@ -548,7 +559,7 @@ const CollectionCard = () => {
item.roles.map((tag, index) => {
return (
<ChipDiv key={index}>
- <Chip label={tag.name} />
+ <Chip label={tag.name} style={state.contrast === "" ? {backgroundColor: "#ddd", color: "black"} : {backgroundColor: "black", color: "white", border: "1px solid white"}} />
</ChipDiv>
)
})
@@ -560,10 +571,10 @@ const CollectionCard = () => {
<Grid container direction="row" spacing={1} justify="space-between" alignItems="center">
<Grid item>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
Nota
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{item.score}
</Typography>
</div>
@@ -571,10 +582,10 @@ const CollectionCard = () => {
<Grid item>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
Seguidores
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{item.follows_count}
</Typography>
</div>
@@ -582,10 +593,10 @@ const CollectionCard = () => {
<Grid item>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
Likes
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{item.likes_count}
</Typography>
</div>
@@ -593,10 +604,10 @@ const CollectionCard = () => {
<Grid item>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
Objetos educacionais
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{item.learning_objects_count}
</Typography>
</div>
@@ -604,10 +615,10 @@ const CollectionCard = () => {
<Grid item>
<div className={classes.displayColumn}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
Coleções
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{item.collections_count}
</Typography>
</div>
@@ -637,7 +648,7 @@ const CollectionCard = () => {
</Grid>
</Grid>
</CardContent>
- </Card>
+ </StyledCard>
</Grid>
</Grid>
</Grid>
diff --git a/src/Admin/Components/Components/Inputs/CreateInstitution.js b/src/Admin/Components/Components/Inputs/CreateInstitution.js
index a0ba3c1a..9fb01a1d 100644
--- a/src/Admin/Components/Components/Inputs/CreateInstitution.js
+++ b/src/Admin/Components/Components/Inputs/CreateInstitution.js
@@ -16,9 +16,8 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
//imports material ui componets
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardAction from '@material-ui/core/CardActions';
import { Typography, TextField, Button, Grid } from '@material-ui/core';
@@ -28,11 +27,15 @@ import ListRoundedIcon from '@material-ui/icons/ListRounded';
//imports local files
import SnackBar from '../../../../Components/SnackbarComponent';
import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
+import { StyledCard } from "../../../Components/Styles/DataCard";
+import { Store } from 'Store'
//router
import { Link } from 'react-router-dom';
const CreateInstitution = (props) => {
+ const { state } = useContext(Store);
+
const [name, setName] = useState('Nova Instituição');
const [description, setDescription] = useState('');
const [adress, setAdress] = useState('');
@@ -184,7 +187,7 @@ const CreateInstitution = (props) => {
}
]
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -252,7 +255,7 @@ const CreateInstitution = (props) => {
}
</Button>
</CardAction>
- </Card>
+ </StyledCard>
);
}
diff --git a/src/Admin/Components/Components/Inputs/CreateLanguage.js b/src/Admin/Components/Components/Inputs/CreateLanguage.js
index 5cca9080..22fedb52 100644
--- a/src/Admin/Components/Components/Inputs/CreateLanguage.js
+++ b/src/Admin/Components/Components/Inputs/CreateLanguage.js
@@ -16,9 +16,8 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
//imports material ui componets
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardAction from '@material-ui/core/CardActions';
import { Typography, TextField, Button, Grid } from '@material-ui/core';
@@ -28,11 +27,15 @@ import ListRoundedIcon from '@material-ui/icons/ListRounded';
//imports local files
import SnackBar from '../../../../Components/SnackbarComponent';
import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
+import { StyledCard } from "../../../Components/Styles/DataCard";
+import { Store } from 'Store'
//router
import { Link } from 'react-router-dom';
const CreateLanguage = (props) => {
+ const { state } = useContext(Store);
+
const [name, setName] = useState('Nova linguagem');
const [code, setCode] = useState('');
@@ -161,7 +164,7 @@ const CreateLanguage = (props) => {
]
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -229,7 +232,7 @@ const CreateLanguage = (props) => {
}
</Button>
</CardAction>
- </Card>
+ </StyledCard>
)
}
diff --git a/src/Admin/Components/Components/Inputs/CreateQuestion.js b/src/Admin/Components/Components/Inputs/CreateQuestion.js
index 37f15756..30de7158 100644
--- a/src/Admin/Components/Components/Inputs/CreateQuestion.js
+++ b/src/Admin/Components/Components/Inputs/CreateQuestion.js
@@ -16,9 +16,8 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
//imports material ui componets
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardAction from '@material-ui/core/CardActions';
import { Typography, TextField, Button, Grid } from '@material-ui/core';
@@ -29,11 +28,15 @@ import ListRoundedIcon from '@material-ui/icons/ListRounded';
//imports local files
import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import SnackBar from '../../../../Components/SnackbarComponent';
+import { StyledCard } from "../../../Components/Styles/DataCard";
+import { Store } from 'Store'
//router
import { Link } from 'react-router-dom';
const CreateQuestion = (props) => {
+ const { state } = useContext(Store);
+
const [status, setStatus] = useState('');
const [description, setDescription] = useState('');
@@ -146,7 +149,7 @@ const CreateQuestion = (props) => {
];
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -163,7 +166,7 @@ const CreateQuestion = (props) => {
<Grid container direction='row' justify='space-between' alignContent="center" alignItems="center" xs={12}>
<Grid item>
<Typography variant='h4'>
- Nova question
+ Nova pergunta
</Typography>
</Grid>
<Grid item>
@@ -235,7 +238,7 @@ const CreateQuestion = (props) => {
}
</Button>
</CardAction>
- </Card>
+ </StyledCard>
);
}
diff --git a/src/Admin/Components/Components/Inputs/CreateRating.js b/src/Admin/Components/Components/Inputs/CreateRating.js
index 3837c9e3..e0c2b7de 100644
--- a/src/Admin/Components/Components/Inputs/CreateRating.js
+++ b/src/Admin/Components/Components/Inputs/CreateRating.js
@@ -16,9 +16,8 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
//imports material ui componets
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardAction from '@material-ui/core/CardActions';
import { Typography, TextField, Button, Grid } from '@material-ui/core';
@@ -27,6 +26,8 @@ import AddRoundedIcon from '@material-ui/icons/AddRounded';
import ListRoundedIcon from '@material-ui/icons/ListRounded';
//imports local files
import SnackBar from '../../../../Components/SnackbarComponent';
+import { StyledCard } from "../../../Components/Styles/DataCard";
+import { Store } from 'Store'
//imports services
import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
//router
@@ -34,6 +35,8 @@ import {Link} from 'react-router-dom';
const CreateRating = (props) => {
+ const { state } = useContext(Store);
+
const [name, setName] = useState('Novo rating');
const [description, setDescription] = useState('');
@@ -158,7 +161,7 @@ const CreateRating = (props) => {
]
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -226,7 +229,7 @@ const CreateRating = (props) => {
}
</Button>
</CardAction>
- </Card>
+ </StyledCard>
);
}
diff --git a/src/Admin/Components/Components/Inputs/CreateRole.js b/src/Admin/Components/Components/Inputs/CreateRole.js
index 421c8174..61a54e8f 100644
--- a/src/Admin/Components/Components/Inputs/CreateRole.js
+++ b/src/Admin/Components/Components/Inputs/CreateRole.js
@@ -16,9 +16,8 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
//imports material ui componets
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardAction from '@material-ui/core/CardActions';
import { Typography, TextField, Button, Grid } from '@material-ui/core';
@@ -28,11 +27,15 @@ import ListRoundedIcon from '@material-ui/icons/ListRounded';
//imports local files
import SnackBar from '../../../../Components/SnackbarComponent';
import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
+import { StyledCard } from "../../../Components/Styles/DataCard";
+import { Store } from 'Store'
//router
import { Link } from 'react-router-dom';
const CreateRole = (props) => {
+ const { state } = useContext(Store);
+
const [name, setName] = useState('Nova role');
const [desc, setDesc] = useState('');
@@ -151,7 +154,7 @@ const CreateRole = (props) => {
]
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -219,7 +222,7 @@ const CreateRole = (props) => {
}
</Button>
</CardAction>
- </Card>
+ </StyledCard>
)
}
diff --git a/src/Admin/Components/Components/Inputs/EditCollection.js b/src/Admin/Components/Components/Inputs/EditCollection.js
index 98b7a38f..86a8f980 100644
--- a/src/Admin/Components/Components/Inputs/EditCollection.js
+++ b/src/Admin/Components/Components/Inputs/EditCollection.js
@@ -16,11 +16,10 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
//imports material ui components
import { Typography, TextField, Button, Grid } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardAction from '@material-ui/core/CardActions';
import ListRoundedIcon from '@material-ui/icons/ListRounded';
@@ -31,6 +30,8 @@ import SnackBar from '../../../../Components/SnackbarComponent';
import { getRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import LoadingSpinner from '../../../../Components/LoadingSpinner';
import { EditFilter, GetAData } from '../../../Filters';
+import { StyledCard } from "../../../Components/Styles/DataCard";
+import { Store } from 'Store'
//routers
import { Link } from 'react-router-dom';
import ClassicEditor from "@ckeditor/ckeditor5-build-classic"
@@ -38,6 +39,8 @@ import { CKEditor } from '@ckeditor/ckeditor5-react';
const EditCollection = () => {
+ const { state } = useContext(Store);
+
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get("collection");
@@ -169,7 +172,7 @@ const EditCollection = () => {
return <LoadingSpinner text="Carregando..." />
} else {
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -265,7 +268,7 @@ const EditCollection = () => {
}
</Button>
</CardAction>
- </Card>
+ </StyledCard>
)
}
}
diff --git a/src/Admin/Components/Components/Inputs/EditEducationalObect.js b/src/Admin/Components/Components/Inputs/EditEducationalObect.js
index 0335f596..e3afb26d 100644
--- a/src/Admin/Components/Components/Inputs/EditEducationalObect.js
+++ b/src/Admin/Components/Components/Inputs/EditEducationalObect.js
@@ -16,14 +16,13 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from 'react';
import PropTypes from "prop-types";
import SwipeableViews from "react-swipeable-views";
import moment from "moment";
//imports material ui components
import { Typography, TextField, Button, Grid } from "@material-ui/core";
import CircularProgress from "@material-ui/core/CircularProgress";
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardAction from "@material-ui/core/CardActions";
import ListRoundedIcon from "@material-ui/icons/ListRounded";
@@ -42,6 +41,8 @@ import {
putRequest,
} from "../../../../Components/HelperFunctions/getAxiosConfig";
import { EditFilter } from "../../../Filters";
+import { StyledCard } from "../../../Components/Styles/DataCard";
+import { Store } from 'Store'
//routers
import { Link } from "react-router-dom";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic"
@@ -61,6 +62,9 @@ const useStyles = makeStyles((theme) => ({
let text;
const EditEducationalObject = () => {
+
+ const { state } = useContext(Store);
+
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get("learnObj");
@@ -429,7 +433,7 @@ const EditEducationalObject = () => {
return <LoadingSpinner text="Carregando..." />;
} else {
return (
- <Card variant="outlined">
+ <StyledCard contrast={state.contrast} variant="outlined">
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -606,7 +610,7 @@ const EditEducationalObject = () => {
{isLoading ? <CircularProgress size={24} /> : "Salvar"}
</Button>
</CardAction>
- </Card>
+ </StyledCard>
);
}
};
diff --git a/src/Admin/Components/Components/Inputs/EditLanguage.js b/src/Admin/Components/Components/Inputs/EditLanguage.js
index c0b71d0a..84963ec5 100644
--- a/src/Admin/Components/Components/Inputs/EditLanguage.js
+++ b/src/Admin/Components/Components/Inputs/EditLanguage.js
@@ -16,11 +16,10 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
//imports material ui components
import { Typography, TextField, Button, Grid, ButtonGroup } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardAction from '@material-ui/core/CardActions';
import ListRoundedIcon from '@material-ui/icons/ListRounded';
@@ -28,6 +27,8 @@ import SaveIcon from '@material-ui/icons/Save';
//imports local files
import SnackBar from '../../../../Components/SnackbarComponent';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
+import { StyledCard } from "../../../Components/Styles/DataCard";
+import { Store } from 'Store'
//imports services
import { getRequest, putRequest, deleteRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { EditFilter, GetAData, DeleteFilter } from '../../../Filters';
@@ -37,6 +38,8 @@ import { Link, useHistory } from 'react-router-dom';
const EditLanguage = () => {
+ const { state } = useContext(Store);
+
let history = useHistory()
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get("language");
@@ -215,7 +218,7 @@ const EditLanguage = () => {
return <LoadingSpinner text="Carregando..." />
} else {
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -289,7 +292,7 @@ const EditLanguage = () => {
}
</Button>
</CardAction>
- </Card>
+ </StyledCard>
)
}
}
diff --git a/src/Admin/Components/Components/Inputs/EditRating.js b/src/Admin/Components/Components/Inputs/EditRating.js
index e4e08aa1..8fc402de 100644
--- a/src/Admin/Components/Components/Inputs/EditRating.js
+++ b/src/Admin/Components/Components/Inputs/EditRating.js
@@ -16,11 +16,10 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
//imports material ui components
import { Typography, TextField, Button, Grid } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardAction from '@material-ui/core/CardActions';
import ListRoundedIcon from '@material-ui/icons/ListRounded';
@@ -28,6 +27,8 @@ import SaveIcon from '@material-ui/icons/Save';
//imports local files
import SnackBar from '../../../../Components/SnackbarComponent';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
+import { StyledCard } from "../../../Components/Styles/DataCard";
+import { Store } from 'Store'
//imports services
import { getRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { EditFilter, GetAData } from '../../../Filters';
@@ -36,6 +37,8 @@ import { Link } from 'react-router-dom';
const EditRating = () => {
+ const { state } = useContext(Store);
+
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get("rating");
@@ -194,7 +197,7 @@ const EditRating = () => {
return <LoadingSpinner text="Carregando..." />
} else {
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -262,7 +265,7 @@ const EditRating = () => {
}
</Button>
</CardAction>
- </Card>
+ </StyledCard>
)
}
}
diff --git a/src/Admin/Components/Components/Inputs/EditRoles.js b/src/Admin/Components/Components/Inputs/EditRoles.js
index c9c49f58..b1d4114e 100644
--- a/src/Admin/Components/Components/Inputs/EditRoles.js
+++ b/src/Admin/Components/Components/Inputs/EditRoles.js
@@ -16,11 +16,10 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
//imports material ui components
import { Typography, TextField, Button, Grid } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardAction from '@material-ui/core/CardActions';
import ListRoundedIcon from '@material-ui/icons/ListRounded';
@@ -30,6 +29,8 @@ import DeleteRoundedIcon from "@material-ui/icons/DeleteRounded";
//imports local files
import SnackBar from '../../../../Components/SnackbarComponent';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
+import { StyledCard } from "../../../Components/Styles/DataCard";
+import { Store } from 'Store'
//imports services
import { getRequest, putRequest, deleteRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { EditFilter, GetAData, DeleteFilter } from '../../../Filters';
@@ -37,6 +38,9 @@ import { EditFilter, GetAData, DeleteFilter } from '../../../Filters';
import { Link, useHistory } from 'react-router-dom';
const EditLanguage = () => {
+
+ const { state } = useContext(Store);
+
let history = useHistory()
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get("role");
@@ -208,7 +212,7 @@ const EditLanguage = () => {
return <LoadingSpinner text="Carregando..." />
} else {
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -282,7 +286,7 @@ const EditLanguage = () => {
}
</Button>
</CardAction>
- </Card>
+ </StyledCard>
)
}
}
diff --git a/src/Admin/Components/Components/Inputs/EditUser.js b/src/Admin/Components/Components/Inputs/EditUser.js
index d0953435..48f8ead0 100644
--- a/src/Admin/Components/Components/Inputs/EditUser.js
+++ b/src/Admin/Components/Components/Inputs/EditUser.js
@@ -16,11 +16,10 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
//imports material ui components
import { Typography, TextField, Button, Grid } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardAction from '@material-ui/core/CardActions';
import ListRoundedIcon from '@material-ui/icons/ListRounded';
@@ -35,6 +34,8 @@ import MenuItem from '@material-ui/core/MenuItem';
//imports local files
import SnackBar from '../../../../Components/SnackbarComponent';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
+import { StyledCard } from "../../../Components/Styles/DataCard";
+import { Store } from 'Store'
//imports services
import { getRequest, putRequest, deleteRequest, postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { EditFilter, GetAData } from '../../../Filters';
@@ -56,6 +57,9 @@ const useStyles = makeStyles((theme) => ({
}));
const EditUser = () => {
+
+ const { state } = useContext(Store);
+
const classes = useStyles();
let history = useHistory();
@@ -466,7 +470,7 @@ const EditUser = () => {
return <LoadingSpinner text="Carregando..." />
} else {
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -601,7 +605,7 @@ const EditUser = () => {
</Button>
}
</CardAction>
- </Card>
+ </StyledCard>
)
}
}
diff --git a/src/Admin/Components/Components/Inputs/IntitutionsInputs.js b/src/Admin/Components/Components/Inputs/IntitutionsInputs.js
index 874879d4..078e4345 100644
--- a/src/Admin/Components/Components/Inputs/IntitutionsInputs.js
+++ b/src/Admin/Components/Components/Inputs/IntitutionsInputs.js
@@ -16,12 +16,11 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
//imports material ui components
import { TextField, Button } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import SaveIcon from '@material-ui/icons/Save';
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
import ListRoundedIcon from "@material-ui/icons/ListRounded";
@@ -29,6 +28,8 @@ import Grid from "@material-ui/core/Grid";
//imports local files
import SnackBar from '../../../../Components/SnackbarComponent';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
+import { StyledCard } from "../../../Components/Styles/DataCard";
+import { Store } from 'Store'
//imports services
import { putRequest, getRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { EditFilter, GetAData } from '../../../Filters';
@@ -37,6 +38,8 @@ import { Link } from 'react-router-dom';
const EditInstitution = () => {
+ const { state } = useContext(Store);
+
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get("institution");
@@ -218,7 +221,7 @@ const EditInstitution = () => {
return <LoadingSpinner text="Carregando..." />
} else {
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -293,7 +296,7 @@ const EditInstitution = () => {
</div>
</CardContent>
- </Card>
+ </StyledCard>
);
}
}
diff --git a/src/Admin/Components/Components/Inputs/NoteVarInputs.js b/src/Admin/Components/Components/Inputs/NoteVarInputs.js
index 96b951f9..2437fe36 100644
--- a/src/Admin/Components/Components/Inputs/NoteVarInputs.js
+++ b/src/Admin/Components/Components/Inputs/NoteVarInputs.js
@@ -16,12 +16,11 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
//imports material ui components
import { TextField, Button } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import SaveIcon from '@material-ui/icons/Save';
-import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
import ListRoundedIcon from "@material-ui/icons/ListRounded";
@@ -29,6 +28,8 @@ import Grid from '@material-ui/core/Grid';
//imports local files
import SnackBar from '../../../../Components/SnackbarComponent';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
+import { StyledCard } from "../../../Components/Styles/DataCard";
+import { Store } from 'Store'
//imports services
import { getRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { EditFilter, GetAData } from '../../../Filters';
@@ -37,6 +38,8 @@ import { Link } from 'react-router-dom';
const NoteVarInputs = () => {
+ const { state } = useContext(Store);
+
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get("id");
@@ -222,7 +225,7 @@ const NoteVarInputs = () => {
return <LoadingSpinner text="Carregando..." />
} else {
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -295,7 +298,7 @@ const NoteVarInputs = () => {
</div>
</CardContent>
- </Card>
+ </StyledCard>
)
}
}
diff --git a/src/Admin/Components/Components/MobileComponents/MobilePageHeader.js b/src/Admin/Components/Components/MobileComponents/MobilePageHeader.js
index f3520c9f..fdc09e14 100644
--- a/src/Admin/Components/Components/MobileComponents/MobilePageHeader.js
+++ b/src/Admin/Components/Components/MobileComponents/MobilePageHeader.js
@@ -16,17 +16,20 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React from "react";
+import React, { useContext } from "react";
import Paper from "@material-ui/core/Paper"
import Grid from "@material-ui/core/Grid"
import Button from "@material-ui/core/Button"
import Typography from "@material-ui/core/Typography"
import CircularProgress from "@material-ui/core/CircularProgress"
+import styled from 'styled-components'
+import { Store } from 'Store'
const MobilePageHeader = (props) => {
+ const { state } = useContext(Store);
return (
- <Paper style={{ padding: "1em" }}>
- <Grid container spacing={3} direction="row" alignItems="center">
+ <Paper style={{marginBottom: "2em", marginTop: "2em", marginLeft: "1em", marginRight: "1em"}}>
+ <StyledGrid contrast={state.contrast} container spacing={3} direction="row" alignItems="center">
<Grid item xs={12}>
<Typography variant="h4">{props.title}</Typography>
</Grid>
@@ -52,10 +55,17 @@ const MobilePageHeader = (props) => {
})}
</Grid>
</Grid>
- </Grid>
+ </StyledGrid>
{props.children}
</Paper>
)
}
+const StyledGrid = styled(Grid)`
+ background-color: ${props => props.contrast === "" ? "white" : "black"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ border: 1px solid ${props => props.contrast === "" ? "#666" : "white"};
+ border-radius: 10px;
+`
+
export default MobilePageHeader;
\ No newline at end of file
diff --git a/src/Admin/Components/Components/PageHeader.js b/src/Admin/Components/Components/PageHeader.js
index beef3c04..8a1bad37 100644
--- a/src/Admin/Components/Components/PageHeader.js
+++ b/src/Admin/Components/Components/PageHeader.js
@@ -16,17 +16,20 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React from "react";
+import React, { useContext } from "react";
import Paper from "@material-ui/core/Paper"
import Grid from "@material-ui/core/Grid"
import Button from "@material-ui/core/Button"
import Typography from "@material-ui/core/Typography"
import CircularProgress from "@material-ui/core/CircularProgress"
+import styled from 'styled-components'
+import { Store } from 'Store'
const PageHeader = (props) => {
+ const { state } = useContext(Store);
return (
- <Paper style={{ padding: "1em" }}>
- <Grid container spacing={3} direction="row" alignItems="center">
+ <Paper style={{marginBottom: "2em", marginTop: "2em", marginLeft: "1em", marginRight: "1em"}}>
+ <StyledGrid contrast={state.contrast} container spacing={3} direction="row" alignItems="center">
<Grid item xs={6}>
<Typography variant="h4">{props.title}</Typography>
</Grid>
@@ -38,24 +41,40 @@ const PageHeader = (props) => {
{props.actions.map((act, index) => {
return (
<Grid item key={act.name}>
- <Button
+ <StyledButton
+ contrast={state.contrast}
variant="contained"
- color="secondary"
disabled={act.isLoading}
onClick={act.func}
startIcon={act.icon}
>
- {act.isLoading ? <CircularProgress size={24} /> : act.name}
- </Button>
+ <div style={state.contrast === "" ? {color: "white"} : {color: "yellow"}}>
+ {act.isLoading ? <CircularProgress size={24} /> : act.name}
+ </div>
+ </StyledButton>
</Grid>
)
})}
</Grid>
</Grid>
- </Grid>
+ </StyledGrid>
{props.children}
</Paper>
)
}
+const StyledGrid = styled(Grid)`
+ background-color: ${props => props.contrast === "" ? "white" : "black"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ border: 1px solid ${props => props.contrast === "" ? "#666" : "white"};
+ border-radius: 10px;
+`
+
+const StyledButton = styled(Button)`
+ background-color: ${props => props.contrast === "" ? "#ff7f00" : "black"} !important;
+ color: white !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline yellow"} !important;
+ border: 1px solid ${props => props.contrast === "" ? "" : "white"} !important;
+`
+
export default PageHeader;
\ No newline at end of file
diff --git a/src/Admin/Components/Components/Unauthorized.js b/src/Admin/Components/Components/Unauthorized.js
index 3408a576..558f3422 100644
--- a/src/Admin/Components/Components/Unauthorized.js
+++ b/src/Admin/Components/Components/Unauthorized.js
@@ -16,19 +16,17 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, {useState, useContext} from 'react';
+import React, {useState} from 'react';
import SnackBar from '../../../Components/SnackbarComponent';
import { Link } from 'react-router-dom';
import styled from "styled-components";
-import { Store } from '../../../Store'
-const Unauthorized = () => {
- const { state } = useContext(Store);
+const Unauthorized = (props) => {
const [openSnack, setOpenSnack] = useState(true);
return (
- <ContentDiv contrast={state.contrast} style={{ textAlign: 'center' }}>
+ <ContentDiv contrast={props.contrast} style={{ textAlign: 'center' }}>
<SnackBar
severity='warning'
text='Você não tem as permissões necessárias'
diff --git a/src/Admin/Components/Components/Welcome.js b/src/Admin/Components/Components/Welcome.js
index 47e4f942..4780d2bd 100644
--- a/src/Admin/Components/Components/Welcome.js
+++ b/src/Admin/Components/Components/Welcome.js
@@ -21,8 +21,8 @@ import {Styles} from '../Styles/WelcomeStyle';
// This file is a component that says welcome to the user
-const Welcome = () => {
- const classes = Styles();
+const Welcome = (props) => {
+ const classes = Styles(props.contrast);
return(
<div style={classes.welcomeContainer}>
<p style={classes.welcomeTitle}>
@@ -34,5 +34,8 @@ const Welcome = () => {
</div>
);
}
-
+/*
+ <div style={props.contrast === "" ? classes.welcomeContainer : classes.welcomeContainerContrast}>
+ <p style={props.contrast === "" ? classes.welcomeTitle : classes.welcomeTitleContrast}>
+*/
export default Welcome;
\ No newline at end of file
diff --git a/src/Admin/Components/Styles/DataCard.js b/src/Admin/Components/Styles/DataCard.js
index 17083da5..f0f98c07 100644
--- a/src/Admin/Components/Styles/DataCard.js
+++ b/src/Admin/Components/Styles/DataCard.js
@@ -16,7 +16,9 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
+import Card from "@material-ui/core/Card";
import { makeStyles } from "@material-ui/core/styles";
+import styled from 'styled-components'
const useStyles = makeStyles({
table: {
@@ -53,4 +55,10 @@ const useStyles = makeStyles({
}
});
-export { useStyles };
\ No newline at end of file
+const StyledCard = styled(Card)`
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ color: ${props => props.contrast === "" ? "#666" : "white"} !important;
+ border: 1px solid ${props => props.contrast === "" ? "#666" : "white"} !important;
+`
+
+export { useStyles, StyledCard };
\ No newline at end of file
diff --git a/src/Admin/Components/Styles/WelcomeStyle.js b/src/Admin/Components/Styles/WelcomeStyle.js
index 11364da8..508848db 100644
--- a/src/Admin/Components/Styles/WelcomeStyle.js
+++ b/src/Admin/Components/Styles/WelcomeStyle.js
@@ -16,12 +16,11 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-const Styles = () => ({
+const Styles = (contrast) => ({
welcomeContainer : {
- padding : '1em 1em',
- borderRadius : '22px',
- backgroundColor : 'white',
- boxShadow : '2px 2px 1px #A9A9A9'
+ padding: '1em',
+ borderRadius : '10px',
+ border: `1px solid ${contrast === "" ? "#666" : "white"}`
},
welcomeTitle : {
fontWeight : 'bold',
diff --git a/src/Admin/Pages/Pages/SubPages/Activity.js b/src/Admin/Pages/Pages/SubPages/Activity.js
index c87c1b25..379d9901 100644
--- a/src/Admin/Pages/Pages/SubPages/Activity.js
+++ b/src/Admin/Pages/Pages/SubPages/Activity.js
@@ -215,7 +215,6 @@ const Activity = () => {
>
{showFilter ? (
<>
- <div style={{ height: "1em" }}></div>
<div style={{ alignSelf: "flex-end" }}>
<TextField
@@ -240,8 +239,6 @@ const Activity = () => {
) : null}
</MobilePageHeader>
- <div style={{ height: "2em" }}></div>
-
{items.map((row, index) =>
index === items.length - 1 ? (
<StyledDivButton
@@ -295,7 +292,6 @@ const Activity = () => {
]
}
/>
- <div style={{ height: "0.5em" }} />
</>
)
)}
@@ -340,7 +336,6 @@ const Activity = () => {
>
{showFilter ? (
<>
- <div style={{ height: "1em" }}></div>
<div style={{ alignSelf: "flex-end" }}>
<TextField
@@ -365,8 +360,6 @@ const Activity = () => {
) : null}
</PageHeader>
- <div style={{ height: "2em" }}></div>
-
<TableData top={TOP_LABELS}>
<TableBody>
{items.map((row, index) =>
diff --git a/src/Admin/Pages/Pages/SubPages/AproveTeacher.js b/src/Admin/Pages/Pages/SubPages/AproveTeacher.js
index dca86692..84df27d4 100644
--- a/src/Admin/Pages/Pages/SubPages/AproveTeacher.js
+++ b/src/Admin/Pages/Pages/SubPages/AproveTeacher.js
@@ -397,7 +397,6 @@ const AproveTeacher = () => {
>
{showFilter ? (
<>
- <div style={{ height: "1em" }}></div>
{showFilter ? (
<Grid
container
@@ -451,8 +450,6 @@ const AproveTeacher = () => {
) : null}
</MobilePageHeader>
- <div style={{ height: "2em" }}></div>
-
{items.map((row, index) =>
index === items.length - 1 ? (
<StyledDivButton>
@@ -538,7 +535,6 @@ const AproveTeacher = () => {
>
Recusar
</Button>
- <div style={{ height: "0.5em" }} />
<Button
variant="contained"
color="primary"
@@ -559,7 +555,6 @@ const AproveTeacher = () => {
}
]}
/>
- <div style={{ height: "0.5em" }} />
</>
)
)}
@@ -606,7 +601,6 @@ const AproveTeacher = () => {
>
{showFilter ? (
<>
- <div style={{ height: "1em" }}></div>
{showFilter ? (
<Grid
container
@@ -660,8 +654,6 @@ const AproveTeacher = () => {
) : null}
</PageHeader>
- <div style={{ height: "2em" }}></div>
-
<Grid xs={12} container>
<TableData
top={TOP_LABELS}
@@ -733,7 +725,6 @@ const AproveTeacher = () => {
>
Recusar
</Button>
- <div style={{ height: "0.5em" }} />
<Button
variant="contained"
color="primary"
diff --git a/src/Admin/Pages/Pages/SubPages/BlockedUsers.js b/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
index ba077fda..7915870f 100644
--- a/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
+++ b/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
@@ -297,8 +297,6 @@ const BlockedUsers = () => {
</Grid>
</MobilePageHeader>
- <div style={{ height: '2em' }}></div>
-
{items.map((row, index) =>
index === items.length - 1 ? (
<StyledDivButton>
@@ -376,7 +374,6 @@ const BlockedUsers = () => {
]
}
/>
- <div style={{ height: "0.5em" }} />
</>
)
)}
@@ -431,8 +428,6 @@ const BlockedUsers = () => {
</Grid>
</PageHeader>
- <div style={{ height: '2em' }}></div>
-
<TableData
top={topTable}
onIconPressed={cleanArrayAndInvert}
diff --git a/src/Admin/Pages/Pages/SubPages/Collections.js b/src/Admin/Pages/Pages/SubPages/Collections.js
index dd15cbae..feec6ec2 100644
--- a/src/Admin/Pages/Pages/SubPages/Collections.js
+++ b/src/Admin/Pages/Pages/SubPages/Collections.js
@@ -16,7 +16,7 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useContext } from "react";
import moment from "moment";
//imports from local files
import TableData from "../../../Components/Components/Table";
@@ -44,560 +44,563 @@ import FilterListRoundedIcon from "@material-ui/icons/FilterListRounded";
import VisibilityIcon from "@material-ui/icons/Visibility";
import DeleteIcon from "@material-ui/icons/Delete";
import {
- deleteRequest,
- getRequest,
+ deleteRequest,
+ getRequest,
} from "../../../../Components/HelperFunctions/getAxiosConfig";
//routers
import { Link } from "react-router-dom";
import styled from 'styled-components'
+import { Store } from 'Store'
+
const StyledTableCell = withStyles((theme) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
+ head: {
+ backgroundColor: theme.palette.common.black,
+ color: theme.palette.common.white,
+ },
+ body: {
+ fontSize: 14,
+ },
}))(TableCell);
const StyledTableRow = withStyles((theme) => ({
- root: {
- "&:nth-of-type(odd)": {
- backgroundColor: theme.palette.action.hover,
+ root: {
+ "&:nth-of-type(odd)": {
+ backgroundColor: theme.palette.action.hover,
+ },
},
- },
}))(TableRow);
const Collections = () => {
- const ADD_ONE_LENGHT = [""];
- const TOP_LABELS = [
- "NOME",
- "DESCRIÇÃO",
- "DONO(A)",
- "CRIAÇÃO",
- "ATUALIZAÇÃO",
- "PRIVACIDADE",
- "VISUALIZAR",
- "DELETAR",
- ]; //Labels from Table
-
- const WINDOW_WIDTH = window.innerWidth;
-
- const [error, setError] = useState(null); //Necessary to consult the API, catch errors
- const [isLoaded, setIsLoaded] = useState(false); //Necessary to consult the API, wait until complete
- const [items, setItems] = useState([]); //Necessary to consult the API, data
-
- const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false); //controlls the state of loadind more data
-
- const [showFilter, setShowFilter] = useState(false);
- const [valueOfSearch, setValueOfSearch] = useState("")
- const [search, setSearch] = useState("");
- const [currPage, setCurrPage] = useState(0)
-
- const [openAlertDialog, setOpenAlertDialog] = useState(false);
- const [deleteItem, setDeleteItem] = useState({}); //Delete Item
- const [isLoadingToDelete, setIsLoadingToDelete] = useState(null);
- const [option, setOption] = useState(); //labels of the text field 'to'
-
- const [snackInfo, setSnackInfo] = useState({
- message: "",
- icon: "",
- open: false,
- color: "",
- });
-
- const privacyOptions = [
- { name: "private", value: "Privado" },
- { name: "public", value: "Público" }
- ];
-
-
- //handle snack info
- const HandleSnack = (message, state, icon, color) => {
- setSnackInfo({
- message: message,
- icon: icon,
- open: state,
- color: color,
+
+ const { state } = useContext(Store)
+
+ const ADD_ONE_LENGHT = [""];
+ const TOP_LABELS = [
+ "NOME",
+ "DESCRIÇÃO",
+ "DONO(A)",
+ "CRIAÇÃO",
+ "ATUALIZAÇÃO",
+ "PRIVACIDADE",
+ "VISUALIZAR",
+ "DELETAR",
+ ]; //Labels from Table
+
+ const WINDOW_WIDTH = window.innerWidth;
+
+ const [error, setError] = useState(null); //Necessary to consult the API, catch errors
+ const [isLoaded, setIsLoaded] = useState(false); //Necessary to consult the API, wait until complete
+ const [items, setItems] = useState([]); //Necessary to consult the API, data
+
+ const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false); //controlls the state of loadind more data
+
+ const [showFilter, setShowFilter] = useState(false);
+ const [valueOfSearch, setValueOfSearch] = useState("")
+ const [search, setSearch] = useState("");
+ const [currPage, setCurrPage] = useState(0)
+
+ const [openAlertDialog, setOpenAlertDialog] = useState(false);
+ const [deleteItem, setDeleteItem] = useState({}); //Delete Item
+ const [isLoadingToDelete, setIsLoadingToDelete] = useState(null);
+ const [option, setOption] = useState(); //labels of the text field 'to'
+
+ const [snackInfo, setSnackInfo] = useState({
+ message: "",
+ icon: "",
+ open: false,
+ color: "",
});
- };
-
- //Defines which row must show the circular progress
- const HandleStateCircularProgress = (i) => {
- setIsLoadingToDelete(i);
- };
-
- //Called when user want to delete one institution
- async function DeleteHandler() {
- const id = deleteItem.id;
- HandleStateAlertDialog(null);
- deleteRequest(
- DeleteFilter("collections", id),
- (data) => {
- if (data.errors)
- HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
- else {
- HandleSnack(
- "A Coleção foi deletada com sucesso",
- true,
- "success",
- "#228B22"
- );
- setCurrPage(0)
- HandleStateCircularProgress(null);
- removeItemFromList(id);
- }
- },
- (error) => {
- HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
- HandleStateCircularProgress(null);
- }
- );
- }
-
- //Controlls the state of the Alert Dialog
- const HandleStateAlertDialog = (i) => {
- const obj = { ...items[i] };
- setDeleteItem(obj);
- setOpenAlertDialog(!openAlertDialog);
- };
-
- // handle change of privacy
- const handleChange = (e) => {
- setOption(e.target.value);
- };
-
- const HandleSearch = (e) => {
- setValueOfSearch(e.target.value)
- }
-
- const DisplayDate = (date) => {
- const convertedData = moment.utc(date);
- return moment(convertedData)
- .format("LLL")
- .toString();
- };
-
- const buildUrl = (privacyOpt, name) => {
- if (privacyOpt && name)
- return Url("collections", `"privacy" : "${privacyOpt}", "name" : "${name}"`, currPage, "DESC")
- else if (privacyOpt)
- return Url("collections", `"privacy" : "${privacyOpt}"`, currPage, "DESC")
- else if (name)
- return Url("collections", `"name" : "${name}"`, currPage, "DESC")
- else
- return Url("collections", "", currPage, "DESC")
- }
-
- const removeItemFromList = (itemId) => {
- let index = -1;
- for (let i = 0; i < items.length; i++) {
- const element = items[i];
- if (element.id === itemId) {
- index = i
- break
- }
+
+ const privacyOptions = [
+ { name: "private", value: "Privado" },
+ { name: "public", value: "Público" }
+ ];
+
+
+ //handle snack info
+ const HandleSnack = (message, state, icon, color) => {
+ setSnackInfo({
+ message: message,
+ icon: icon,
+ open: state,
+ color: color,
+ });
+ };
+
+ //Defines which row must show the circular progress
+ const HandleStateCircularProgress = (i) => {
+ setIsLoadingToDelete(i);
+ };
+
+ //Called when user want to delete one institution
+ async function DeleteHandler() {
+ const id = deleteItem.id;
+ HandleStateAlertDialog(null);
+ deleteRequest(
+ DeleteFilter("collections", id),
+ (data) => {
+ if (data.errors)
+ HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+ else {
+ HandleSnack(
+ "A Coleção foi deletada com sucesso",
+ true,
+ "success",
+ "#228B22"
+ );
+ setCurrPage(0)
+ HandleStateCircularProgress(null);
+ removeItemFromList(id);
+ }
+ },
+ (error) => {
+ HandleSnack("Ocorreu algum erro", true, "warning", "#FA8072");
+ HandleStateCircularProgress(null);
+ }
+ );
}
- if (index !== -1) {
- const cpyItems = [...items]
- cpyItems.splice(index, 1)
- setItems(cpyItems)
+
+ //Controlls the state of the Alert Dialog
+ const HandleStateAlertDialog = (i) => {
+ const obj = { ...items[i] };
+ setDeleteItem(obj);
+ setOpenAlertDialog(!openAlertDialog);
+ };
+
+ // handle change of privacy
+ const handleChange = (e) => {
+ setOption(e.target.value);
+ };
+
+ const HandleSearch = (e) => {
+ setValueOfSearch(e.target.value)
}
- }
-
- useEffect(() => {
- if (currPage === 0)
- setIsLoaded(false)
- else
- setIsLoadingMoreItems(true)
- getRequest(
- buildUrl(option, search),
- (data, header) => {
- const arrData = [...data]
- if (arrData.length === 0) {
- HandleSnack('Não há mais dados para serem carregados', true, 'warning', '#FFC125')
- } else {
- const arrItems = [...items]
- if (currPage === 0) {
- setItems(arrData.concat(ADD_ONE_LENGHT))
- }
- else {
- arrItems.pop(); //Deleting the last position, that was used to display the button of load more items
- const arrResult = arrItems.concat(arrData)
- setItems(arrResult.concat(ADD_ONE_LENGHT))
- }
- }
- setIsLoaded(true)
- setIsLoadingMoreItems(false)
- },
- (error) => {
- HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
- setIsLoadingMoreItems(false)
- setIsLoaded(true)
- setError(true)
- }
- )
- }, [currPage, search, option])
-
- useEffect(() => {
- setCurrPage(0)
- setOption()
- setSearch("")
- setValueOfSearch("")
- }, [showFilter])
-
- if (error) {
- return <div>Error: {error.message}</div>;
- } else if (!isLoaded) {
- return <LoadingSpinner text="Carregando..." />;
- } else {
- if (WINDOW_WIDTH <= 1024) {
- return (
- <>
- <SnackBar
- severity={snackInfo.icon}
- text={snackInfo.message}
- snackbarOpen={snackInfo.open}
- color={snackInfo.color}
- handleClose={() =>
- setSnackInfo({
- message: "",
- icon: "",
- open: false,
- color: "",
- })
+
+ const DisplayDate = (date) => {
+ const convertedData = moment.utc(date);
+ return moment(convertedData)
+ .format("LLL")
+ .toString();
+ };
+
+ const buildUrl = (privacyOpt, name) => {
+ if (privacyOpt && name)
+ return Url("collections", `"privacy" : "${privacyOpt}", "name" : "${name}"`, currPage, "DESC")
+ else if (privacyOpt)
+ return Url("collections", `"privacy" : "${privacyOpt}"`, currPage, "DESC")
+ else if (name)
+ return Url("collections", `"name" : "${name}"`, currPage, "DESC")
+ else
+ return Url("collections", "", currPage, "DESC")
+ }
+
+ const removeItemFromList = (itemId) => {
+ let index = -1;
+ for (let i = 0; i < items.length; i++) {
+ const element = items[i];
+ if (element.id === itemId) {
+ index = i
+ break
}
- />
- <AlertDialog
- open={openAlertDialog}
- OnDelete={DeleteHandler}
- deleteItem={deleteItem}
- HandleClose={() => {
- setOpenAlertDialog(false);
- HandleStateCircularProgress(null);
- }}
- />
- <MobilePageHeader
- title="Coleções"
- actions={[
- {
- name: "Atualizar",
- isLoading: false,
- func: () => {
- setCurrPage(0)
- },
- icon: <UpdateRoundedIcon />
- },
- {
- name: "Filtrar",
- isLoading: false,
- func: () => {
- setShowFilter(!showFilter);
- },
- icon: <FilterListRoundedIcon />
- }
- ]}
- >
- {showFilter ? (
- <>
- <div style={{ height: "1em" }}></div>
-
- <Grid
- container
- alignItems="center"
- alignContent="center"
- xs={12}
- direction="row"
- justify="space-between"
- >
- <Grid item>
- <TextField
- select
- label="Filtro"
- value={option}
- onChange={handleChange}
- helperText="Por favor, selecione uma das opções"
- >
- {privacyOptions.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
- </Grid>
-
- <Grid item>
- <TextField
- label="Pesquisa"
- value={valueOfSearch}
- helperText="Ao digitar, tire o foco do campo de texto"
- onChange={(event) => HandleSearch(event)}
- onBlur={(event) => setSearch(event.target.value)}
- ></TextField>
- </Grid>
- </Grid>
- </>
- ) : null}
- </MobilePageHeader>
-
- <div style={{ height: "2em" }}></div>
-
- {items.map((row, index) =>
- index === items.length - 1 ? (
- <StyledDivButton
- key={new Date().toISOString() + row.created_at}
- >
- <Button
- color="primary"
- variant="text"
- // disabled={isLoadingMoreItems}
- startIcon={<AddRoundedIcon />}
- disabled={isLoadingMoreItems}
- onClick={() => {
- setCurrPage(currPage + 1)
- }}
- >
- {isLoadingMoreItems ? (
- <CircularProgress size={24} />
- ) : (
- "Carregar mais itens"
- )}
- </Button>
- </StyledDivButton>
- ) : (
- <>
- <MobileList
- key={new Date().toISOString() + row.created_at}
- title={row.name}
- subtitle={row.privacy}
- backColor={"#e81f4f"}
- avatar={<PeopleRoundedIcon />}
- href={`/admin/Collection?collection=${row.id}`}
- reset={() => {
-
- }}
- data={
- [
- {
- title: "ID",
- subtitle: row.id
-
- },
- {
- title: "Dono(a)",
- subtitle: row.owner ? row.owner.name : "Sem dados"
-
- },
- {
- title: "Criado em",
- subtitle: DisplayDate(row.created_at)
- },
- {
- title: "Atualizado em",
- subtitle: DisplayDate(row.updated_at)
- },
- {
- title: "Deletar",
- subtitle:
- <Button
- variant="contained"
- color="secondary"
- onClick={() => {
- HandleStateAlertDialog(index);
- HandleStateCircularProgress(index);
- }}
- startIcon={<DeleteIcon />}
- >
- Deletar
- </Button>
- }
- ]
- }
- />
- <div style={{ height: "0.5em" }} />
- </>
- )
- )}
- </>
- );
+ }
+ if (index !== -1) {
+ const cpyItems = [...items]
+ cpyItems.splice(index, 1)
+ setItems(cpyItems)
+ }
}
- else {
- return (
- <>
- <SnackBar
- severity={snackInfo.icon}
- text={snackInfo.message}
- snackbarOpen={snackInfo.open}
- color={snackInfo.color}
- handleClose={() =>
- setSnackInfo({
- message: "",
- icon: "",
- open: false,
- color: "",
- })
+
+ useEffect(() => {
+ if (currPage === 0)
+ setIsLoaded(false)
+ else
+ setIsLoadingMoreItems(true)
+ getRequest(
+ buildUrl(option, search),
+ (data, header) => {
+ const arrData = [...data]
+ if (arrData.length === 0) {
+ HandleSnack('Não há mais dados para serem carregados', true, 'warning', '#FFC125')
+ } else {
+ const arrItems = [...items]
+ if (currPage === 0) {
+ setItems(arrData.concat(ADD_ONE_LENGHT))
+ }
+ else {
+ arrItems.pop(); //Deleting the last position, that was used to display the button of load more items
+ const arrResult = arrItems.concat(arrData)
+ setItems(arrResult.concat(ADD_ONE_LENGHT))
+ }
+ }
+ setIsLoaded(true)
+ setIsLoadingMoreItems(false)
+ },
+ (error) => {
+ HandleSnack('Erro ao carregar os dados', true, 'warning', '#FA8072')
+ setIsLoadingMoreItems(false)
+ setIsLoaded(true)
+ setError(true)
}
- />
-
- <PageHeader
- title="Coleções"
- actions={[
- {
- name: "Atualizar",
- isLoading: false,
- func: () => {
- setCurrPage(0)
- },
- icon: <UpdateRoundedIcon />
- },
- {
- name: "Filtrar",
- isLoading: false,
- func: () => {
- setShowFilter(!showFilter);
- },
- icon: <FilterListRoundedIcon />
- }
- ]}
- >
- {showFilter ? (
- <>
- <div style={{ height: "1em" }}></div>
-
- <Grid
- container
- alignItems="center"
- alignContent="center"
- xs={12}
- direction="row"
- justify="space-between"
- >
- <Grid item>
- <TextField
- select
- label="Filtro"
- value={option}
- onChange={handleChange}
- helperText="Por favor, selecione uma das opções"
- >
- {privacyOptions.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
- </Grid>
-
- <Grid item>
- <TextField
- label="Pesquisa"
- value={valueOfSearch}
- helperText="Ao digitar, tire o foco do campo de texto"
- onChange={(event) => HandleSearch(event)}
- onBlur={(event) => setSearch(event.target.value)}
- ></TextField>
- </Grid>
- </Grid>
- </>
- ) : null}
- </PageHeader>
-
- <div style={{ height: "2em" }}></div>
-
- <TableData top={TOP_LABELS}>
- <TableBody>
- {items.map((row, index) =>
- index === items.length - 1 ? (
- <StyledTableRow key={new Date().toISOString() + row.created_at}>
- <StyledTableCell>
- <Button
- color="primary"
- variant="text"
- // disabled={isLoadingMoreItems}
- startIcon={<AddRoundedIcon />}
- disabled={isLoadingMoreItems}
- onClick={() => {
- setCurrPage(currPage + 1)
- }}
- >
- {isLoadingMoreItems ? (
- <CircularProgress size={24} />
- ) : (
- "Carregar mais itens"
- )}
- </Button>
- </StyledTableCell>
- </StyledTableRow>
- ) : (
- <StyledTableRow key={new Date().toISOString() + index}>
- <StyledTableCell component="th" scope="row">
- {row.name}
- </StyledTableCell>
- <StyledTableCell align="right">
- <div
- dangerouslySetInnerHTML={{ __html: row.description }}
- ></div>
- </StyledTableCell>
- <StyledTableCell align="right">
- {row.owner ? row.owner.name : "Sem dados"}
- </StyledTableCell>
- <StyledTableCell align="right">
- {DisplayDate(row.created_at)}
- </StyledTableCell>
- <StyledTableCell align="right">
- {DisplayDate(row.updated_at)}
- </StyledTableCell>
- <StyledTableCell align="right">{row.privacy}</StyledTableCell>
- <StyledTableCell align="right">
- <Link to={`/admin/Collection?collection=${row.id}`}>
- <IconButton>
- <VisibilityIcon style={{ fill: "#00bcd4" }} />
- </IconButton>
- </Link>
- </StyledTableCell>
- <StyledTableCell align="right">
- {isLoadingToDelete === index ? (
- <CircularProgress size={24} color="primary" />
- ) : (
- <IconButton
- onClick={() => {
- HandleStateAlertDialog(index);
- HandleStateCircularProgress(index);
- }}
+ )
+ }, [currPage, search, option])
+
+ useEffect(() => {
+ setCurrPage(0)
+ setOption()
+ setSearch("")
+ setValueOfSearch("")
+ }, [showFilter])
+
+ return (
+ <StyledContent contrast={state.contrast}>
+ {
+ error ? (
+ <div>Error: {error.message}</div>
+ )
+ :
+ (
+ !isLoaded ? (
+ <LoadingSpinner text="Carregando..." />
+ )
+ :
+ (
+ WINDOW_WIDTH <= 1024 ? (
+ <>
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() =>
+ setSnackInfo({
+ message: "",
+ icon: "",
+ open: false,
+ color: "",
+ })
+ }
+ />
+ <AlertDialog
+ open={openAlertDialog}
+ OnDelete={DeleteHandler}
+ deleteItem={deleteItem}
+ HandleClose={() => {
+ setOpenAlertDialog(false);
+ HandleStateCircularProgress(null);
+ }}
+ />
+ <MobilePageHeader
+ title="Coleções"
+ actions={[
+ {
+ name: "Atualizar",
+ isLoading: false,
+ func: () => {
+ setCurrPage(0)
+ },
+ icon: <UpdateRoundedIcon />
+ },
+ {
+ name: "Filtrar",
+ isLoading: false,
+ func: () => {
+ setShowFilter(!showFilter);
+ },
+ icon: <FilterListRoundedIcon />
+ }
+ ]}
>
- <DeleteIcon style={{ fill: "#FF0000" }} />
- </IconButton>
- )}
- </StyledTableCell>
- </StyledTableRow>
- )
- )}
- </TableBody>
- </TableData>
-
- {/* This alert will be displayed if the user click to delete an institution */}
- <AlertDialog
- open={openAlertDialog}
- OnDelete={DeleteHandler}
- deleteItem={deleteItem}
- HandleClose={() => {
- setOpenAlertDialog(false);
- HandleStateCircularProgress(null);
- }}
- />
- </>
- );
- }
- }
+ {showFilter ? (
+ <>
+ <Grid
+ container
+ alignItems="center"
+ alignContent="center"
+ xs={12}
+ direction="row"
+ justify="space-between"
+ >
+ <Grid item>
+ <TextField
+ select
+ label="Filtro"
+ value={option}
+ onChange={handleChange}
+ helperText="Por favor, selecione uma das opções"
+ >
+ {privacyOptions.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ </TextField>
+ </Grid>
+
+ <Grid item>
+ <TextField
+ label="Pesquisa"
+ value={valueOfSearch}
+ helperText="Ao digitar, tire o foco do campo de texto"
+ onChange={(event) => HandleSearch(event)}
+ onBlur={(event) => setSearch(event.target.value)}
+ ></TextField>
+ </Grid>
+ </Grid>
+ </>
+ ) : null}
+ </MobilePageHeader>
+
+ {items.map((row, index) =>
+ index === items.length - 1 ? (
+ <StyledDivButton
+ key={new Date().toISOString() + row.created_at}
+ >
+ <Button
+ color="primary"
+ variant="text"
+ // disabled={isLoadingMoreItems}
+ startIcon={<AddRoundedIcon />}
+ disabled={isLoadingMoreItems}
+ onClick={() => {
+ setCurrPage(currPage + 1)
+ }}
+ >
+ {isLoadingMoreItems ? (
+ <CircularProgress size={24} />
+ ) : (
+ "Carregar mais itens"
+ )}
+ </Button>
+ </StyledDivButton>
+ ) : (
+ <>
+ <MobileList
+ key={new Date().toISOString() + row.created_at}
+ title={row.name}
+ subtitle={row.privacy}
+ backColor={"#e81f4f"}
+ avatar={<PeopleRoundedIcon />}
+ href={`/admin/Collection?collection=${row.id}`}
+ reset={() => {
+
+ }}
+ data={
+ [
+ {
+ title: "ID",
+ subtitle: row.id
+ },
+ {
+ title: "Dono(a)",
+ subtitle: row.owner ? row.owner.name : "Sem dados"
+ },
+ {
+ title: "Criado em",
+ subtitle: DisplayDate(row.created_at)
+ },
+ {
+ title: "Atualizado em",
+ subtitle: DisplayDate(row.updated_at)
+ },
+ {
+ title: "Deletar",
+ subtitle:
+ <Button
+ variant="contained"
+ color="secondary"
+ onClick={() => {
+ HandleStateAlertDialog(index);
+ HandleStateCircularProgress(index);
+ }}
+ startIcon={<DeleteIcon />}
+ >
+ Deletar
+ </Button>
+ }
+ ]
+ }
+ />
+ </>
+ )
+ )}
+ </>
+ )
+ :
+ (
+ <>
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() =>
+ setSnackInfo({
+ message: "",
+ icon: "",
+ open: false,
+ color: "",
+ })
+ }
+ />
+
+ <PageHeader
+ title="Coleções"
+ actions={[
+ {
+ name: "Atualizar",
+ isLoading: false,
+ func: () => {
+ setCurrPage(0)
+ },
+ icon: <UpdateRoundedIcon />
+ },
+ {
+ name: "Filtrar",
+ isLoading: false,
+ func: () => {
+ setShowFilter(!showFilter);
+ },
+ icon: <FilterListRoundedIcon />
+ }
+ ]}
+ >
+ {showFilter ? (
+ <>
+ <Grid
+ container
+ alignItems="center"
+ alignContent="center"
+ xs={12}
+ direction="row"
+ justify="space-between"
+ >
+ <Grid item>
+ <TextField
+ select
+ label="Filtro"
+ value={option}
+ onChange={handleChange}
+ helperText="Por favor, selecione uma das opções"
+ >
+ {privacyOptions.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ </TextField>
+ </Grid>
+
+ <Grid item>
+ <TextField
+ label="Pesquisa"
+ value={valueOfSearch}
+ helperText="Ao digitar, tire o foco do campo de texto"
+ onChange={(event) => HandleSearch(event)}
+ onBlur={(event) => setSearch(event.target.value)}
+ />
+ </Grid>
+ </Grid>
+ </>
+ ) : null}
+ </PageHeader>
+
+ <TableData top={TOP_LABELS}>
+ <TableBody>
+ {items.map((row, index) =>
+ index === items.length - 1 ? (
+ <StyledTableRow key={new Date().toISOString() + row.created_at}>
+ <StyledTableCell>
+ <Button
+ color="primary"
+ variant="text"
+ // disabled={isLoadingMoreItems}
+ startIcon={<AddRoundedIcon />}
+ disabled={isLoadingMoreItems}
+ onClick={() => {
+ setCurrPage(currPage + 1)
+ }}
+ >
+ {isLoadingMoreItems ? (
+ <CircularProgress size={24} />
+ ) : (
+ "Carregar mais itens"
+ )}
+ </Button>
+ </StyledTableCell>
+ </StyledTableRow>
+ ) : (
+ <StyledTableRow key={new Date().toISOString() + index}>
+ <StyledTableCell component="th" scope="row">
+ {row.name}
+ </StyledTableCell>
+ <StyledTableCell align="right">
+ <div
+ dangerouslySetInnerHTML={{ __html: row.description }}
+ ></div>
+ </StyledTableCell>
+ <StyledTableCell align="right">
+ {row.owner ? row.owner.name : "Sem dados"}
+ </StyledTableCell>
+ <StyledTableCell align="right">
+ {DisplayDate(row.created_at)}
+ </StyledTableCell>
+ <StyledTableCell align="right">
+ {DisplayDate(row.updated_at)}
+ </StyledTableCell>
+ <StyledTableCell align="right">{row.privacy}</StyledTableCell>
+ <StyledTableCell align="right">
+ <Link to={`/admin/Collection?collection=${row.id}`}>
+ <IconButton>
+ <VisibilityIcon style={{ fill: "#00bcd4" }} />
+ </IconButton>
+ </Link>
+ </StyledTableCell>
+ <StyledTableCell align="right">
+ {isLoadingToDelete === index ? (
+ <CircularProgress size={24} color="primary" />
+ ) : (
+ <IconButton
+ onClick={() => {
+ HandleStateAlertDialog(index);
+ HandleStateCircularProgress(index);
+ }}
+ >
+ <DeleteIcon style={{ fill: "#FF0000" }} />
+ </IconButton>
+ )}
+ </StyledTableCell>
+ </StyledTableRow>
+ )
+ )}
+ </TableBody>
+ </TableData>
+
+ {/* This alert will be displayed if the user click to delete an institution */}
+ <AlertDialog
+ open={openAlertDialog}
+ OnDelete={DeleteHandler}
+ deleteItem={deleteItem}
+ HandleClose={() => {
+ setOpenAlertDialog(false);
+ HandleStateCircularProgress(null);
+ }}
+ />
+ </>
+ )
+ )
+ )
+ }
+ </StyledContent>
+ );
};
export default Collections;
@@ -608,3 +611,7 @@ const StyledDivButton = styled(Paper)`
align-items : center;
`
+const StyledContent = styled.div`
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+`
\ No newline at end of file
diff --git a/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js b/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js
index 4c93b941..3d71db8d 100644
--- a/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js
+++ b/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js
@@ -298,8 +298,6 @@ const CommunityQuestion = () => {
) : null}
</MobilePageHeader>
- <div style={{ height: "2em" }}></div>
-
{items.map((row, index) =>
index === items.length - 1 ? (
<StyledDivButton
@@ -362,7 +360,6 @@ const CommunityQuestion = () => {
]
}
/>
- <div style={{ height: "0.5em" }} />
</>
)
)}
@@ -451,8 +448,6 @@ const CommunityQuestion = () => {
) : null}
</PageHeader>
- <div style={{ height: "2em" }}></div>
-
<TableData top={TOP_LABELS} onIconPressed={cleanArrayAndInvert}>
<TableBody>
{items.map((row, index) =>
diff --git a/src/Admin/Pages/Pages/SubPages/Complaints.js b/src/Admin/Pages/Pages/SubPages/Complaints.js
index d03514dc..ee359ffc 100644
--- a/src/Admin/Pages/Pages/SubPages/Complaints.js
+++ b/src/Admin/Pages/Pages/SubPages/Complaints.js
@@ -382,8 +382,6 @@ const Complaints = () => {
) : null}
</MobilePageHeader>
- <div style={{ height: "2em" }}></div>
-
{items.map((row, index) =>
index === items.length - 1 ? (
<StyledDivButton
@@ -440,7 +438,6 @@ const Complaints = () => {
]
}
/>
- <div style={{ height: "0.5em" }} />
</>
)
)}
@@ -541,8 +538,6 @@ const Complaints = () => {
) : null}
</PageHeader>
- <div style={{ height: "2em" }}></div>
-
<Grid xs={12} container>
<TableData
top={TOP_LABELS}
diff --git a/src/Admin/Pages/Pages/SubPages/EducationalObjects.js b/src/Admin/Pages/Pages/SubPages/EducationalObjects.js
index 69d0dfc3..3218221c 100644
--- a/src/Admin/Pages/Pages/SubPages/EducationalObjects.js
+++ b/src/Admin/Pages/Pages/SubPages/EducationalObjects.js
@@ -362,8 +362,6 @@ const EducationalObjects = () => {
</MobilePageHeader>
{/************** End of the header **************/}
- <div style={{ height: "2em" }}></div>
-
{/************** Start of display data in table **************/}
{items.map((row, index) =>
index === items.length - 1 ? (
@@ -434,7 +432,6 @@ const EducationalObjects = () => {
]
}
/>
- <div style={{ height: "0.5em" }} />
</>
)
)}
@@ -504,8 +501,6 @@ const EducationalObjects = () => {
</PageHeader>
{/************** End of the header **************/}
- <div style={{ height: "2em" }}></div>
-
{/************** Start of display data in table **************/}
<TableData top={TOP_TABLE}>
<TableBody>
diff --git a/src/Admin/Pages/Pages/SubPages/Inframe.js b/src/Admin/Pages/Pages/SubPages/Inframe.js
index f2979dbb..9fec9f16 100644
--- a/src/Admin/Pages/Pages/SubPages/Inframe.js
+++ b/src/Admin/Pages/Pages/SubPages/Inframe.js
@@ -16,24 +16,42 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React from 'react';
+import React, { useContext } from 'react';
import Welcome from '../../../Components/Components/Welcome';
+import { Store } from 'Store'
+import styled from 'styled-components'
+
const IframeComponent = () => {
+ const { state } = useContext(Store)
+
return (
- <div>
- <Welcome />
+ <StyledDiv contrast={state.contrast}>
+ <Welcome contrast={state.contrast}/>
<div style={{ height: '1em' }}></div>
- <iframe
+ <StyledIframe
title="Métricas portal MEC"
src='https://metabase.c3sl.ufpr.br/public/dashboard/8ada315d-b8df-4b18-b7fb-d06b0ac64623'
height='800px'
width='100%'
// allowTransparency={true}
frameBorder={0}
+ contrast={state.contrast}
>
- </iframe>
- </div>
+ </StyledIframe>
+ </StyledDiv>
)
}
+
+const StyledDiv = styled.div`
+ background-color: ${props => props.contrast === "" ? "white" : "black"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+`
+
+const StyledIframe = styled.iframe`
+ background-color: ${props => props.contrast === "" ? "white" : "black"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ border: 1px solid ${props => props.contrast === "" ? "#666" : "white"};
+`
+
export default IframeComponent;
diff --git a/src/Admin/Pages/Pages/SubPages/Institutions.js b/src/Admin/Pages/Pages/SubPages/Institutions.js
index 7f713b9e..baf583e7 100644
--- a/src/Admin/Pages/Pages/SubPages/Institutions.js
+++ b/src/Admin/Pages/Pages/SubPages/Institutions.js
@@ -370,8 +370,6 @@ const Institutions = () => {
</MobilePageHeader>
{/************** End of the header **************/}
- <div style={{ height: "2em" }}></div>
-
{/************** Start of display data in table **************/}
{items.map((row, index) =>
index === items.length - 1 ? (
@@ -441,7 +439,6 @@ const Institutions = () => {
]
}
/>
- <div style={{ height: "0.5em" }} />
</>
)
)}
@@ -520,8 +517,6 @@ const Institutions = () => {
</PageHeader>
{/************** End of the header **************/}
- <div style={{ height: "2em" }}></div>
-
{/************** Start of display data in table **************/}
<TableData top={topTable} onIconPressed={cleanArrayAndInvert}>
<TableBody>
diff --git a/src/Admin/Pages/Pages/SubPages/Languages.js b/src/Admin/Pages/Pages/SubPages/Languages.js
index c38ac1e1..84ced080 100644
--- a/src/Admin/Pages/Pages/SubPages/Languages.js
+++ b/src/Admin/Pages/Pages/SubPages/Languages.js
@@ -246,8 +246,6 @@ const Languages = () => {
>
</MobilePageHeader>
- <div style={{ height: '2em' }}></div>
-
{items.map((row, index) =>
index === items.length - 1 ? (
<StyledDivButton key={new Date().toISOString() + row.created_at}>
@@ -304,7 +302,6 @@ const Languages = () => {
]
}
/>
- <div style={{ height: "0.5em" }} />
</>
)
)}
@@ -350,8 +347,6 @@ const Languages = () => {
>
</PageHeader>
- <div style={{ height: '2em' }}></div>
-
<TableData
top={TOP_LABELS}
onIconPressed={cleanArrayAndInvert}
diff --git a/src/Admin/Pages/Pages/SubPages/NoteVariables.js b/src/Admin/Pages/Pages/SubPages/NoteVariables.js
index 1ad35f99..4f2c6c3c 100644
--- a/src/Admin/Pages/Pages/SubPages/NoteVariables.js
+++ b/src/Admin/Pages/Pages/SubPages/NoteVariables.js
@@ -178,8 +178,6 @@ const NoteVariables = () => {
>
</MobilePageHeader>
- <div style={{ height: '2em' }}></div>
-
{items.map((row, index) =>
index === items.length - 1 ? (
<StyledDivButton key={new Date().toISOString() + row.created_at}>
@@ -230,7 +228,6 @@ const NoteVariables = () => {
]
}
/>
- <div style={{ height: "0.5em" }} />
</>
)
)}
@@ -267,8 +264,6 @@ const NoteVariables = () => {
>
</PageHeader>
- <div style={{ height: '2em' }}></div>
-
<TableData
top={topTable}
onIconPressed={cleanArrayAndInvert}
diff --git a/src/Admin/Pages/Pages/SubPages/Permissions.js b/src/Admin/Pages/Pages/SubPages/Permissions.js
index 787ac0de..f0456fd6 100644
--- a/src/Admin/Pages/Pages/SubPages/Permissions.js
+++ b/src/Admin/Pages/Pages/SubPages/Permissions.js
@@ -250,8 +250,6 @@ const UserPermissions = () => {
>
</MobilePageHeader>
- <div style={{ height: '2em' }}></div>
-
{items.map((row, index) =>
index === items.length - 1 ? (
<StyledDivButton key={new Date().toISOString() + row.created_at}>
@@ -307,7 +305,6 @@ const UserPermissions = () => {
]
}
/>
- <div style={{ height: "0.5em" }} />
</>
)
)}
@@ -353,8 +350,6 @@ const UserPermissions = () => {
>
</PageHeader>
- <div style={{ height: '2em' }}></div>
-
<TableData
top={TOP_LABELS}
onIconPressed={cleanArrayAndInvert}
diff --git a/src/Admin/Pages/Pages/SubPages/Questions.js b/src/Admin/Pages/Pages/SubPages/Questions.js
index ca32e0cd..078cda4c 100644
--- a/src/Admin/Pages/Pages/SubPages/Questions.js
+++ b/src/Admin/Pages/Pages/SubPages/Questions.js
@@ -248,8 +248,6 @@ const Questions = () => {
>
</MobilePageHeader>
- <div style={{ height: '2em' }}></div>
-
{items.map((row, index) =>
index === items.length - 1 ? (
<StyledDivButton
@@ -314,7 +312,6 @@ const Questions = () => {
]
}
/>
- <div style={{ height: "0.5em" }} />
</>
)
)}
@@ -360,8 +357,6 @@ const Questions = () => {
>
</PageHeader>
- <div style={{ height: '2em' }}></div>
-
<TableData
top={TOP_LABELS}
onIconPressed={cleanArrayAndInvert}
diff --git a/src/Admin/Pages/Pages/SubPages/Rating.js b/src/Admin/Pages/Pages/SubPages/Rating.js
index 22d57d40..24b861b0 100644
--- a/src/Admin/Pages/Pages/SubPages/Rating.js
+++ b/src/Admin/Pages/Pages/SubPages/Rating.js
@@ -247,8 +247,6 @@ const Ratings = () => {
>
</MobilePageHeader>
- <div style={{ height: '2em' }}></div>
-
{items.map((row, index) =>
index === items.length - 1 ? (
<StyledDivButton key={new Date().toISOString() + row.created_at}>
@@ -305,7 +303,6 @@ const Ratings = () => {
]
}
/>
- <div style={{ height: "0.5em" }} />
</>
)
)}
@@ -350,8 +347,6 @@ const Ratings = () => {
>
</PageHeader>
- <div style={{ height: '2em' }}></div>
-
<TableData
top={topTable}
onIconPressed={cleanArrayAndInvert}
diff --git a/src/Admin/Pages/Pages/SubPages/SendEmail.js b/src/Admin/Pages/Pages/SubPages/SendEmail.js
index aff09bc8..a5a4a940 100644
--- a/src/Admin/Pages/Pages/SubPages/SendEmail.js
+++ b/src/Admin/Pages/Pages/SubPages/SendEmail.js
@@ -18,12 +18,14 @@ You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React from 'react';
-import Card from "@material-ui/core/Card";
+import React, { useContext } from 'react';
import CardContent from "@material-ui/core/CardContent";
import { makeStyles } from "@material-ui/core/styles";
import { Typography } from '@material-ui/core';
import EmailInputs from '../../../Components/Components/Inputs/EmailInputs';
+import { StyledCard } from "../../../Components/Styles/DataCard";
+
+import { Store } from 'Store'
const useStyles = makeStyles({
root: {
@@ -56,12 +58,15 @@ const useStyles = makeStyles({
const SendEmail = ({ match }) => {
+
+ const { state } = useContext(Store);
+
const classes = useStyles();
const urlParams = new URLSearchParams(window.location.search);
const email = urlParams.get("email");
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<CardContent>
<Typography
className={classes.title}
@@ -70,9 +75,9 @@ const SendEmail = ({ match }) => {
>
Enviar email
</Typography>
- <EmailInputs email={email} />
+ <EmailInputs email={email} contrast={state.contrast}/>
</CardContent>
- </Card>
+ </StyledCard>
);
}
diff --git a/src/Admin/Pages/Pages/SubPages/Users.js b/src/Admin/Pages/Pages/SubPages/Users.js
index dfb320d8..e13ad9d6 100644
--- a/src/Admin/Pages/Pages/SubPages/Users.js
+++ b/src/Admin/Pages/Pages/SubPages/Users.js
@@ -320,8 +320,6 @@ const Users = () => {
}
</MobilePageHeader>
- <div style={{ height: '2em' }}></div>
-
{items.map((row, index) =>
index === items.length - 1 ? (
<StyledDivButton key={new Date().toISOString() + row.created_at}>
@@ -411,7 +409,6 @@ const Users = () => {
]}
/>
- <div style={{ height: "0.5em" }} />
</>
)
)}
@@ -488,8 +485,6 @@ const Users = () => {
}
</PageHeader>
- <div style={{ height: '2em' }}></div>
-
<TableData
top={topTable}
onIconPressed={cleanArrayAndInvert}
diff --git a/src/App.js b/src/App.js
index 23a3cab8..c7574a07 100644
--- a/src/App.js
+++ b/src/App.js
@@ -182,10 +182,10 @@ export default function App() {
<>
{!awaitTest &&
<React.Suspense fallback={<LoadingScreen/>}>
- <BrowserRouter history={piwik.connectToHistory(customHistory)}>
- {/*<BrowserRouter>*/}
+ {/*<BrowserRouter history={piwik.connectToHistory(customHistory)}>*/}
+ <BrowserRouter>
<ContrastBar/>
- <Header />
+ <Header/>
<div
style={{
backgroundImage:
@@ -465,12 +465,12 @@ export default function App() {
return <AdminTemplate inner={<SendEmail />}/>
}}
/>
- <Route path='*' component={PageNotFound} />
+ <Route path='*' component={PageNotFound}/>
</Switch>
{!hideFooter && (
<div id="Rodape_scroll">
- <EcFooter contrast={state.contrast} />
- <GNUAGPLfooter contrast={state.contrast} />
+ <EcFooter contrast={state.contrast}/>
+ <GNUAGPLfooter contrast={state.contrast}/>
</div>
)}
</BrowserRouter>
diff --git a/src/Components/LoadingSpinner.js b/src/Components/LoadingSpinner.js
index e2559974..391a5086 100644
--- a/src/Components/LoadingSpinner.js
+++ b/src/Components/LoadingSpinner.js
@@ -1,11 +1,17 @@
-import React from 'react';
+import React, { useContext } from 'react';
+import { Store } from 'Store'
+
import LoadingGif from '../img/loading_busca.gif'
-const LoadingSpinner = (props) => (
- <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }}>
- <img alt="" src={LoadingGif} />
- <span style={props.contrast === "" ? { textTransform: "uppercase" } : { textTransform: "uppercase", color: "white" }}>{props.text}</span>
- </div>
-);
+const LoadingSpinner = (props) => {
+ const { state } = useContext(Store);
+
+ return (
+ <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", backgroundColor: "inherit" }}>
+ <img alt="" src={LoadingGif} />
+ <span style={state.contrast === "" ? { textTransform: "uppercase" } : { textTransform: "uppercase", color: "white" }}>{props.text}</span>
+ </div>
+ )
+}
export default LoadingSpinner;
--
GitLab
From 6a3f93009476ecd3e1a3598d20bec1f2cf44260b Mon Sep 17 00:00:00 2001
From: Vinicius Gabriel Machado <vgm18@inf.ufpr.br>
Date: Mon, 27 Sep 2021 19:45:13 -0300
Subject: [PATCH 05/15] Implementing contrast in admin
---
.../Components/Inputs/CreateInstitution.js | 16 ++++++++-------
.../Components/Inputs/CreateLanguage.js | 16 ++++++++-------
.../Components/Inputs/CreateQuestion.js | 14 +++++++------
.../Components/Inputs/CreateRating.js | 16 ++++++++-------
.../Components/Inputs/CreateRole.js | 16 ++++++++-------
.../Components/Inputs/EditCollection.js | 16 ++++++++-------
.../Components/Inputs/EditLanguage.js | 20 ++++++++++---------
.../Components/Components/Inputs/EditRoles.js | 20 ++++++++++---------
.../Components/Inputs/IntitutionsInputs.js | 19 ++++++++++--------
.../Components/Inputs/NoteVarInputs.js | 18 +++++++++--------
src/Components/FormInput.js | 2 ++
11 files changed, 98 insertions(+), 75 deletions(-)
diff --git a/src/Admin/Components/Components/Inputs/CreateInstitution.js b/src/Admin/Components/Components/Inputs/CreateInstitution.js
index 9fb01a1d..2ff90b68 100644
--- a/src/Admin/Components/Components/Inputs/CreateInstitution.js
+++ b/src/Admin/Components/Components/Inputs/CreateInstitution.js
@@ -20,7 +20,7 @@ import React, { useState, useContext } from 'react';
//imports material ui componets
import CardContent from "@material-ui/core/CardContent";
import CardAction from '@material-ui/core/CardActions';
-import { Typography, TextField, Button, Grid } from '@material-ui/core';
+import { Typography, Button, Grid } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import AddRoundedIcon from '@material-ui/icons/AddRounded';
import ListRoundedIcon from '@material-ui/icons/ListRounded';
@@ -29,6 +29,7 @@ import SnackBar from '../../../../Components/SnackbarComponent';
import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { StyledCard } from "../../../Components/Styles/DataCard";
import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
//router
import { Link } from 'react-router-dom';
@@ -225,17 +226,18 @@ const CreateInstitution = (props) => {
<form style={{ display: 'flex', flexDirection: 'column' }}>
{fields.map((field, index) => (
- <TextField
+ <FormInput
+ contrast={state.contrast}
key={index}
required={field.required}
error={field.error}
- helperText={field.error ? field.errorMessage : ''}
+ help={field.error ? field.errorMessage : ''}
style={{ width: '250px', marginBottom: '1em' }}
- label={field.label}
+ placeholder={field.label}
value={field.value}
- onChange={field.onChange}
- type="search"
- multiline={true}
+ handleChange={field.onChange}
+ inputType="search"
+ multi={true}
/>
))}
</form>
diff --git a/src/Admin/Components/Components/Inputs/CreateLanguage.js b/src/Admin/Components/Components/Inputs/CreateLanguage.js
index 22fedb52..45764323 100644
--- a/src/Admin/Components/Components/Inputs/CreateLanguage.js
+++ b/src/Admin/Components/Components/Inputs/CreateLanguage.js
@@ -20,7 +20,7 @@ import React, { useState, useContext } from 'react';
//imports material ui componets
import CardContent from "@material-ui/core/CardContent";
import CardAction from '@material-ui/core/CardActions';
-import { Typography, TextField, Button, Grid } from '@material-ui/core';
+import { Typography, Button, Grid } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import AddRoundedIcon from '@material-ui/icons/AddRounded';
import ListRoundedIcon from '@material-ui/icons/ListRounded';
@@ -29,6 +29,7 @@ import SnackBar from '../../../../Components/SnackbarComponent';
import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { StyledCard } from "../../../Components/Styles/DataCard";
import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
//router
import { Link } from 'react-router-dom';
@@ -202,17 +203,18 @@ const CreateLanguage = (props) => {
<form style={{ display: 'flex', flexDirection: 'column' }}>
{fields.map((field, index) => (
- <TextField
+ <FormInput
+ contrast={state.contrast}
key={index}
required={field.required}
error={field.error}
- helperText={field.error ? field.errorMessage : ''}
+ help={field.error ? field.errorMessage : ''}
style={{ width: '250px', marginBottom: '1em' }}
- label={field.label}
+ placeholder={field.label}
value={field.value}
- onChange={field.onChange}
- type="search"
- multiline={true}
+ handleChange={field.onChange}
+ inputType="search"
+ multi={true}
/>
))}
</form>
diff --git a/src/Admin/Components/Components/Inputs/CreateQuestion.js b/src/Admin/Components/Components/Inputs/CreateQuestion.js
index 30de7158..6bd5b688 100644
--- a/src/Admin/Components/Components/Inputs/CreateQuestion.js
+++ b/src/Admin/Components/Components/Inputs/CreateQuestion.js
@@ -30,6 +30,7 @@ import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConf
import SnackBar from '../../../../Components/SnackbarComponent';
import { StyledCard } from "../../../Components/Styles/DataCard";
import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
//router
import { Link } from 'react-router-dom';
@@ -207,17 +208,18 @@ const CreateQuestion = (props) => {
))}
</TextField>
{fields.map((field, index) => (
- <TextField
+ <FormInput
+ contrast={state.contrast}
key={index}
required={field.required}
error={field.error}
- helperText={field.error ? field.errorMessage : ''}
+ help={field.error ? field.errorMessage : ''}
style={{ width: '250px', marginBottom: '1em' }}
- label={field.label}
+ placeholder={field.label}
value={field.value}
- onChange={field.onChange}
- type="search"
- multiline={true}
+ handleChange={field.onChange}
+ inputType="search"
+ multi={true}
/>
))}
</>
diff --git a/src/Admin/Components/Components/Inputs/CreateRating.js b/src/Admin/Components/Components/Inputs/CreateRating.js
index e0c2b7de..0b068c76 100644
--- a/src/Admin/Components/Components/Inputs/CreateRating.js
+++ b/src/Admin/Components/Components/Inputs/CreateRating.js
@@ -20,7 +20,7 @@ import React, { useState, useContext } from 'react';
//imports material ui componets
import CardContent from "@material-ui/core/CardContent";
import CardAction from '@material-ui/core/CardActions';
-import { Typography, TextField, Button, Grid } from '@material-ui/core';
+import { Typography, Button, Grid } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import AddRoundedIcon from '@material-ui/icons/AddRounded';
import ListRoundedIcon from '@material-ui/icons/ListRounded';
@@ -28,6 +28,7 @@ import ListRoundedIcon from '@material-ui/icons/ListRounded';
import SnackBar from '../../../../Components/SnackbarComponent';
import { StyledCard } from "../../../Components/Styles/DataCard";
import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
//imports services
import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
//router
@@ -199,17 +200,18 @@ const CreateRating = (props) => {
<form style={{ display: 'flex', flexDirection: 'column' }}>
{fields.map((field, index) => (
- <TextField
+ <FormInput
+ contrast={state.contrast}
key={index}
required={field.required}
error={field.error}
- helperText={field.error ? field.errorMessage : ''}
+ help={field.error ? field.errorMessage : ''}
style={{ width: '250px', marginBottom: '1em' }}
- label={field.label}
+ placeholder={field.label}
value={field.value}
- onChange={field.onChange}
- type="search"
- multiline={true}
+ handleChange={field.onChange}
+ inputType="search"
+ multi={true}
/>
))}
</form>
diff --git a/src/Admin/Components/Components/Inputs/CreateRole.js b/src/Admin/Components/Components/Inputs/CreateRole.js
index 61a54e8f..8af5f8ad 100644
--- a/src/Admin/Components/Components/Inputs/CreateRole.js
+++ b/src/Admin/Components/Components/Inputs/CreateRole.js
@@ -20,7 +20,7 @@ import React, { useState, useContext } from 'react';
//imports material ui componets
import CardContent from "@material-ui/core/CardContent";
import CardAction from '@material-ui/core/CardActions';
-import { Typography, TextField, Button, Grid } from '@material-ui/core';
+import { Typography, Button, Grid } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import AddRoundedIcon from '@material-ui/icons/AddRounded';
import ListRoundedIcon from '@material-ui/icons/ListRounded';
@@ -29,6 +29,7 @@ import SnackBar from '../../../../Components/SnackbarComponent';
import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { StyledCard } from "../../../Components/Styles/DataCard";
import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
//router
import { Link } from 'react-router-dom';
@@ -192,17 +193,18 @@ const CreateRole = (props) => {
<form style={{ display: 'flex', flexDirection: 'column' }}>
{fields.map((field, index) => (
- <TextField
+ <FormInput
+ contrast={state.contrast}
key={index}
required={field.required}
error={field.error}
- helperText={field.error ? field.errorMessage : ''}
+ help={field.error ? field.errorMessage : ''}
style={{ width: '250px', marginBottom: '1em' }}
- label={field.label}
+ placeholder={field.label}
value={field.value}
- onChange={field.onChange}
- type="search"
- multiline={true}
+ handleChange={field.onChange}
+ inputType="search"
+ multi={true}
/>
))}
</form>
diff --git a/src/Admin/Components/Components/Inputs/EditCollection.js b/src/Admin/Components/Components/Inputs/EditCollection.js
index 86a8f980..26999ce2 100644
--- a/src/Admin/Components/Components/Inputs/EditCollection.js
+++ b/src/Admin/Components/Components/Inputs/EditCollection.js
@@ -32,6 +32,7 @@ import LoadingSpinner from '../../../../Components/LoadingSpinner';
import { EditFilter, GetAData } from '../../../Filters';
import { StyledCard } from "../../../Components/Styles/DataCard";
import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
//routers
import { Link } from 'react-router-dom';
import ClassicEditor from "@ckeditor/ckeditor5-build-classic"
@@ -209,18 +210,19 @@ const EditCollection = () => {
<form style={{ display: 'flex', flexDirection: 'column' }}>
{fields.map((field, index) => (
- <TextField
+ <FormInput
+ contrast={state.contrast}
key={index}
required={field.required}
- disabled={field.default}
+ disableField={field.default}
error={field.error}
- helperText={field.error ? field.errorMessage : ''}
+ help={field.error ? field.errorMessage : ''}
style={{ marginBottom: '1em' }}
- label={field.label}
+ placeholder={field.label}
value={field.value}
- onChange={field.onChange}
- type="search"
- multiline={true}
+ handleChange={field.onChange}
+ inputType="search"
+ multi={true}
/>
))}
<TextField
diff --git a/src/Admin/Components/Components/Inputs/EditLanguage.js b/src/Admin/Components/Components/Inputs/EditLanguage.js
index 84963ec5..d3d48eef 100644
--- a/src/Admin/Components/Components/Inputs/EditLanguage.js
+++ b/src/Admin/Components/Components/Inputs/EditLanguage.js
@@ -18,7 +18,7 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, { useState, useEffect, useContext } from 'react';
//imports material ui components
-import { Typography, TextField, Button, Grid, ButtonGroup } from '@material-ui/core';
+import { Typography, Button, Grid, ButtonGroup } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import CardContent from "@material-ui/core/CardContent";
import CardAction from '@material-ui/core/CardActions';
@@ -29,6 +29,7 @@ import SnackBar from '../../../../Components/SnackbarComponent';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
import { StyledCard } from "../../../Components/Styles/DataCard";
import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
//imports services
import { getRequest, putRequest, deleteRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { EditFilter, GetAData, DeleteFilter } from '../../../Filters';
@@ -261,18 +262,19 @@ const EditLanguage = () => {
<form style={{ display: 'flex', flexDirection: 'column' }}>
{fields.map((field, index) => (
- <TextField
+ <FormInput
+ contrast={state.contrast}
key={index}
required={field.required}
- disabled={field.default}
+ disableField={field.default}
error={field.error}
- helperText={field.error ? field.errorMessage : ''}
- style={{ width: '250px', marginBottom: '1em' }}
- label={field.label}
+ help={field.error ? field.errorMessage : ''}
+ style={{ marginBottom: '1em' }}
+ placeholder={field.label}
value={field.value}
- onChange={field.onChange}
- type="search"
- multiline={true}
+ handleChange={field.onChange}
+ inputType="search"
+ multi={true}
/>
))}
</form>
diff --git a/src/Admin/Components/Components/Inputs/EditRoles.js b/src/Admin/Components/Components/Inputs/EditRoles.js
index b1d4114e..be2e1688 100644
--- a/src/Admin/Components/Components/Inputs/EditRoles.js
+++ b/src/Admin/Components/Components/Inputs/EditRoles.js
@@ -18,7 +18,7 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, { useState, useEffect, useContext } from 'react';
//imports material ui components
-import { Typography, TextField, Button, Grid } from '@material-ui/core';
+import { Typography, Button, Grid } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import CardContent from "@material-ui/core/CardContent";
import CardAction from '@material-ui/core/CardActions';
@@ -31,6 +31,7 @@ import SnackBar from '../../../../Components/SnackbarComponent';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
import { StyledCard } from "../../../Components/Styles/DataCard";
import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
//imports services
import { getRequest, putRequest, deleteRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { EditFilter, GetAData, DeleteFilter } from '../../../Filters';
@@ -255,18 +256,19 @@ const EditLanguage = () => {
<form style={{ display: 'flex', flexDirection: 'column' }}>
{fields.map((field, index) => (
- <TextField
+ <FormInput
+ contrast={state.contrast}
key={index}
required={field.required}
- disabled={field.default}
+ disableField={field.default}
error={field.error}
- helperText={field.error ? field.errorMessage : ''}
- style={{ width: '250px', marginBottom: '1em' }}
- label={field.label}
+ help={field.error ? field.errorMessage : ''}
+ style={{ marginBottom: '1em' }}
+ placeholder={field.label}
value={field.value}
- onChange={field.onChange}
- type="search"
- multiline={true}
+ handleChange={field.onChange}
+ inputType="search"
+ multi={true}
/>
))}
</form>
diff --git a/src/Admin/Components/Components/Inputs/IntitutionsInputs.js b/src/Admin/Components/Components/Inputs/IntitutionsInputs.js
index 078e4345..a94c6f70 100644
--- a/src/Admin/Components/Components/Inputs/IntitutionsInputs.js
+++ b/src/Admin/Components/Components/Inputs/IntitutionsInputs.js
@@ -18,7 +18,7 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, { useState, useEffect, useContext } from 'react';
//imports material ui components
-import { TextField, Button } from '@material-ui/core';
+import { Button } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import SaveIcon from '@material-ui/icons/Save';
import CardContent from "@material-ui/core/CardContent";
@@ -30,6 +30,7 @@ import SnackBar from '../../../../Components/SnackbarComponent';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
import { StyledCard } from "../../../Components/Styles/DataCard";
import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
//imports services
import { putRequest, getRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { EditFilter, GetAData } from '../../../Filters';
@@ -263,17 +264,19 @@ const EditInstitution = () => {
<div>
<form style={{ display: 'flex', flexDirection: 'column' }}>
{fields.map((field, index) => (
- <TextField
+ <FormInput
+ contrast={state.contrast}
key={index}
required={field.required}
+ disableField={field.default}
error={field.error}
- helperText={field.error ? field.errorMessage : ''}
- style={{ width: '250px', marginBottom: '1em' }}
- label={field.label}
+ help={field.error ? field.errorMessage : ''}
+ style={{ marginBottom: '1em' }}
+ placeholder={field.label}
value={field.value}
- onChange={field.onChange}
- type="search"
- multiline={true}
+ handleChange={field.onChange}
+ inputType="search"
+ multi={true}
/>
))}
</form>
diff --git a/src/Admin/Components/Components/Inputs/NoteVarInputs.js b/src/Admin/Components/Components/Inputs/NoteVarInputs.js
index 2437fe36..1f608305 100644
--- a/src/Admin/Components/Components/Inputs/NoteVarInputs.js
+++ b/src/Admin/Components/Components/Inputs/NoteVarInputs.js
@@ -18,7 +18,7 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, { useState, useEffect, useContext } from 'react';
//imports material ui components
-import { TextField, Button } from '@material-ui/core';
+import { Button } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import SaveIcon from '@material-ui/icons/Save';
import CardContent from "@material-ui/core/CardContent";
@@ -30,6 +30,7 @@ import SnackBar from '../../../../Components/SnackbarComponent';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
import { StyledCard } from "../../../Components/Styles/DataCard";
import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
//imports services
import { getRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { EditFilter, GetAData } from '../../../Filters';
@@ -266,17 +267,18 @@ const NoteVarInputs = () => {
<form style={{ display: 'flex', flexDirection: 'column' }}>
{fields.map((field, index) => (
- <TextField
+ <FormInput
+ contrast={state.contrast}
key={index}
+ disableField={field.default}
error={field.error}
- disabled={field.default}
- helperText={field.error ? field.errorMessage : ''}
+ help={field.error ? field.errorMessage : ''}
style={{ width: '250px', marginBottom: '1em' }}
- label={field.label}
+ placeholder={field.label}
value={field.value}
- onChange={field.onChange}
- type={field.type}
- multiline={true}
+ handleChange={field.onChange}
+ inputType={field.type}
+ multi={true}
/>
))}
</form>
diff --git a/src/Components/FormInput.js b/src/Components/FormInput.js
index 8ebbbe5f..45e38a05 100644
--- a/src/Components/FormInput.js
+++ b/src/Components/FormInput.js
@@ -113,7 +113,9 @@ export default function FormInput(props) {
return (
<StyledTextField
contrast={props.contrast}
+ key={props.key}
label={props.placeholder}
+ disabled={props.disableField}
margin="normal"
id={props.id}
name={props.name}
--
GitLab
From 634abb465e1067ac0c489834cacbf67595522b7a Mon Sep 17 00:00:00 2001
From: Vinicius Gabriel Machado <vgm18@inf.ufpr.br>
Date: Tue, 28 Sep 2021 23:48:29 -0300
Subject: [PATCH 06/15] Implementing contrast in admin pages
---
.../Components/Inputs/EditEducationalObect.js | 53 ++++----
.../Components/Inputs/EditRating.js | 18 +--
.../Components/Components/Inputs/EditUser.js | 18 ++-
.../Components/Inputs/EmailInputs.js | 47 ++++---
src/Admin/Components/Components/PageHeader.js | 9 ++
src/Admin/Pages/Pages/SubPages/Activity.js | 24 ++--
.../Pages/Pages/SubPages/AproveTeacher.js | 95 ++++++-------
.../Pages/Pages/SubPages/BlockedUsers.js | 30 ++--
src/Admin/Pages/Pages/SubPages/Collections.js | 48 ++++---
.../Pages/SubPages/CommunityQuestions.js | 128 +++++++++---------
src/Admin/Pages/Pages/SubPages/Complaints.js | 48 +++++--
.../Pages/SubPages/EducationalObjects.js | 72 +++++-----
src/Admin/Pages/Pages/SubPages/Inframe.js | 63 ++++++---
.../Pages/Pages/SubPages/Institutions.js | 67 ++++-----
src/Admin/Pages/Pages/SubPages/Languages.js | 27 ++--
.../Pages/Pages/SubPages/NoteVariables.js | 26 ++--
src/Admin/Pages/Pages/SubPages/Permissions.js | 27 ++--
src/Admin/Pages/Pages/SubPages/Questions.js | 25 ++--
src/Admin/Pages/Pages/SubPages/Rating.js | 24 ++--
src/Admin/Pages/Pages/SubPages/Users.js | 84 ++++++------
src/Components/FormInput.js | 11 +-
21 files changed, 514 insertions(+), 430 deletions(-)
diff --git a/src/Admin/Components/Components/Inputs/EditEducationalObect.js b/src/Admin/Components/Components/Inputs/EditEducationalObect.js
index e3afb26d..a8e5be6c 100644
--- a/src/Admin/Components/Components/Inputs/EditEducationalObect.js
+++ b/src/Admin/Components/Components/Inputs/EditEducationalObect.js
@@ -28,7 +28,7 @@ import CardAction from "@material-ui/core/CardActions";
import ListRoundedIcon from "@material-ui/icons/ListRounded";
import Chip from "@material-ui/core/Chip";
import MenuItem from "@material-ui/core/MenuItem";
-import { useTheme, makeStyles } from "@material-ui/core/styles";
+import { useTheme } from "@material-ui/core/styles";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import Box from "@material-ui/core/Box";
@@ -43,22 +43,12 @@ import {
import { EditFilter } from "../../../Filters";
import { StyledCard } from "../../../Components/Styles/DataCard";
import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
//routers
import { Link } from "react-router-dom";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic"
import { CKEditor } from '@ckeditor/ckeditor5-react';
-const useStyles = makeStyles((theme) => ({
- root: {
- width: "100%",
- maxWidth: 250,
- backgroundColor: theme.palette.background.paper,
- position: "relative",
- overflow: "auto",
- maxHeight: 300,
- },
-}));
-
let text;
const EditEducationalObject = () => {
@@ -69,7 +59,6 @@ const EditEducationalObject = () => {
const id = urlParams.get("learnObj");
const theme = useTheme();
- const classes = useStyles();
const [error, setError] = useState(null); //Necessary to consult the API, catch errors
const [isLoaded, setIsLoaded] = useState(false); //Necessary to consult the API, wait until complete
@@ -480,9 +469,10 @@ const EditEducationalObject = () => {
value={value}
onChange={handleChangeTab}
indicatorColor="primary"
- textColor="primary"
+ textColor="inherit"
variant="fullWidth"
aria-label="full width tabs example"
+ TabIndicatorProps={{style: {background: state.contrast === "" ? "orange" : "yellow"}}}
>
<Tab label="Resumo" {...a11yProps(0)} />
<Tab label="Descrição" {...a11yProps(1)} />
@@ -497,18 +487,19 @@ const EditEducationalObject = () => {
<TabPanel value={value} index={0} dir={theme.direction}>
<form style={{ display: "flex", flexDirection: "column" }}>
{fields.map((field, index) => (
- <TextField
+ <FormInput
+ contrast={state.contrast}
key={index}
required={field.required}
- disabled={field.default}
+ disableField={field.default}
error={field.error}
- helperText={field.error ? field.errorMessage : ""}
- style={{ width: "250px", marginBottom: "1em" }}
- label={field.label}
- defaultValue={field.value}
- onBlur={field.onChange}
- type="search"
- multiline
+ help={field.error ? field.errorMessage : ''}
+ style={{ width: '250px', marginBottom: '1em' }}
+ placeholder={field.label}
+ value={field.value}
+ handleChange={field.onChange}
+ inputType="search"
+ multi={true}
/>
))}
{languagesID.map((data) => {
@@ -522,7 +513,8 @@ const EditEducationalObject = () => {
onDelete={
data === "React" ? undefined : handleDeleteLan(data)
}
- className={classes.chip}
+ color="primary"
+ style={state.contrast === "" ? {backgroundColor: "#ddd", color: "black"} : {backgroundColor: "black", color: "white", border: "1px solid white"}}
/>
</li>
);
@@ -547,7 +539,7 @@ const EditEducationalObject = () => {
</TextField>
<li style={{ listStyleType: "none", marginBottom: "0.5em" }}>
- <Chip label={objectType.name} className={classes.chip} />
+ <Chip label={objectType.name} style={state.contrast === "" ? {backgroundColor: "#ddd", color: "black"} : {backgroundColor: "black", color: "white", border: "1px solid white"}} />
</li>
<TextField
id="standard-select-currency"
@@ -584,12 +576,13 @@ const EditEducationalObject = () => {
<TabPanel value={value} index={2} dir={theme.direction}>
<form style={{ display: "flex", flexDirection: "column" }}>
{Imutables.map((field, index) => (
- <TextField
+ <FormInput
+ contrast={state.contrast}
key={index}
- disabled={field.default}
- style={{ width: "250px", marginBottom: "1em" }}
- label={field.label}
- defaultValue={field.value}
+ disableField={field.default}
+ style={{ width: '250px', marginBottom: '1em' }}
+ placeholder={field.label}
+ value={field.value}
/>
))}
</form>
diff --git a/src/Admin/Components/Components/Inputs/EditRating.js b/src/Admin/Components/Components/Inputs/EditRating.js
index 8fc402de..7a585baa 100644
--- a/src/Admin/Components/Components/Inputs/EditRating.js
+++ b/src/Admin/Components/Components/Inputs/EditRating.js
@@ -18,7 +18,7 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, { useState, useEffect, useContext } from 'react';
//imports material ui components
-import { Typography, TextField, Button, Grid } from '@material-ui/core';
+import { Typography, Button, Grid } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import CardContent from "@material-ui/core/CardContent";
import CardAction from '@material-ui/core/CardActions';
@@ -29,6 +29,7 @@ import SnackBar from '../../../../Components/SnackbarComponent';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
import { StyledCard } from "../../../Components/Styles/DataCard";
import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
//imports services
import { getRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { EditFilter, GetAData } from '../../../Filters';
@@ -234,18 +235,19 @@ const EditRating = () => {
<form style={{ display: 'flex', flexDirection: 'column' }}>
{fields.map((field, index) => (
- <TextField
+ <FormInput
+ contrast={state.contrast}
key={index}
required={field.required}
- disabled={field.default}
+ disableField={field.default}
error={field.error}
- helperText={field.error ? field.errorMessage : ''}
+ help={field.error ? field.errorMessage : ''}
style={{ width: '250px', marginBottom: '1em' }}
- label={field.label}
+ placeholder={field.label}
value={field.value}
- onChange={field.onChange}
- type="search"
- multiline={true}
+ handleChange={field.onChange}
+ inputType="search"
+ multi={true}
/>
))}
</form>
diff --git a/src/Admin/Components/Components/Inputs/EditUser.js b/src/Admin/Components/Components/Inputs/EditUser.js
index 48f8ead0..b3225b0a 100644
--- a/src/Admin/Components/Components/Inputs/EditUser.js
+++ b/src/Admin/Components/Components/Inputs/EditUser.js
@@ -36,6 +36,7 @@ import SnackBar from '../../../../Components/SnackbarComponent';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
import { StyledCard } from "../../../Components/Styles/DataCard";
import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
//imports services
import { getRequest, putRequest, deleteRequest, postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { EditFilter, GetAData } from '../../../Filters';
@@ -523,18 +524,19 @@ const EditUser = () => {
<form style={{ display: 'flex', flexDirection: 'column' }}>
{fields.map((field, index) => (
field.value !== "-1" ?
- <TextField
+ <FormInput
+ contrast={state.contrast}
key={index}
required={field.required}
- disabled={field.default}
+ disableField={field.default}
error={field.error}
- helperText={field.error ? field.errorMessage : ''}
+ help={field.error ? field.errorMessage : ''}
style={{ width: '250px', marginBottom: '1em' }}
- label={field.label}
+ placeholder={field.label}
value={field.value}
- onChange={field.onChange}
- type="search"
- multiline={true}
+ handleChange={field.onChange}
+ inputType="search"
+ multi={true}
/> : null
))}
{userRoles.map((data) => {
@@ -543,6 +545,8 @@ const EditUser = () => {
<Chip
label={data.name}
onDelete={data === 'React' ? undefined : handleDelete(data)}
+ color="primary"
+ style={state.contrast === "" ? {backgroundColor: "#ddd", color: "black"} : {backgroundColor: "black", color: "white", border: "1px solid white"}}
className={classes.chip}
/>
</li>
diff --git a/src/Admin/Components/Components/Inputs/EmailInputs.js b/src/Admin/Components/Components/Inputs/EmailInputs.js
index f75e8b48..5ef59d34 100644
--- a/src/Admin/Components/Components/Inputs/EmailInputs.js
+++ b/src/Admin/Components/Components/Inputs/EmailInputs.js
@@ -16,7 +16,7 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState } from "react";
+import React, { useState, useContext } from "react";
//material ui components
import TextField from "@material-ui/core/TextField";
import MenuItem from "@material-ui/core/MenuItem";
@@ -33,6 +33,8 @@ import SnackBar from "../../../../Components/SnackbarComponent";
import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import ClassicEditor from "@ckeditor/ckeditor5-build-classic"
import { CKEditor } from '@ckeditor/ckeditor5-react';
+import { Store } from 'Store'
+import FormInput from "Components/FormInput.js"
const useStyles = makeStyles((theme) => ({
root: {
@@ -49,6 +51,9 @@ const useStyles = makeStyles((theme) => ({
}));
const EmailInputs = (props) => {
+
+ const { state } = useContext(Store);
+
const classes = useStyles();
const [option, setOption] = useState(props.email ? "Emails" : "All"); //labels of the text field 'to'
const [isToEmails, setIsToEmails] = useState(props.email ? true : false)
@@ -371,13 +376,13 @@ const EmailInputs = (props) => {
}
/>
- <TextField
+ <FormInput
+ contrast={state.contrast}
id="outlined-input"
- label="De *"
- defaultValue="integrada.contato@mec.gov.br"
- variant="outlined"
- disabled={true}
- />
+ disableField={true}
+ placeholder="De *"
+ value="integrada.contato@mec.gov.br"
+ />
<div style={{ height: "1em" }} />
<TextField
@@ -433,36 +438,35 @@ const EmailInputs = (props) => {
<Chip
label={email}
onDelete={() => HandleDelete(index)}
+ color="primary"
+ style={state.contrast === "" ? {backgroundColor: "#ddd", color: "black"} : {backgroundColor: "black", color: "white", border: "1px solid white"}}
classes={classes.chip}
/>
</li>
))}
</div>
- <TextField
+ <FormInput
+ contrast={state.contrast}
id="outlined-input"
- label="Emails"
- rows={1}
error={errorInEmails.error}
- helperText={errorInEmails.message}
+ help={errorInEmails.message}
value={emails}
onKeyPress={(key) => OnKeyPressHandler(key.which)}
- onChange={EmailsHandler}
- // onBlur={ShowEmails}
+ handleChange={EmailsHandler}
placeholder="Digite um email por vez e pressione Enter"
- variant="outlined"
style={{ marginBottom: "1em" }}
/>
</>
}
- <TextField
+ <FormInput
+ contrast={state.contrast}
id="outlined-input"
- label="Assunto"
- value={subject}
error={errorInSubject.error}
- helperText={errorInSubject.message}
+ help={errorInSubject.message}
+ value={subject}
+ onKeyPress={(key) => OnKeyPressHandler(key.which)}
+ handleChange={SubjectHandler}
placeholder="Digite o assunto do email"
- onChange={SubjectHandler}
- variant="outlined"
/>
</form >
@@ -478,10 +482,11 @@ const EmailInputs = (props) => {
}}
/>
</div>
-
+ {/*
<div style={{ fontSize: 14 }}>
* Se você deseja enviar foto da sua máquina, é preciso <a href="mailto:name@email.com">Clicar aqui</a>
</div>
+ */}
<div style={{ marginTop: 18 }}>
<Button
diff --git a/src/Admin/Components/Components/PageHeader.js b/src/Admin/Components/Components/PageHeader.js
index 8a1bad37..b2110129 100644
--- a/src/Admin/Components/Components/PageHeader.js
+++ b/src/Admin/Components/Components/PageHeader.js
@@ -77,4 +77,13 @@ const StyledButton = styled(Button)`
border: 1px solid ${props => props.contrast === "" ? "" : "white"} !important;
`
+export const StyledFilter = styled.div`
+ background-color: ${props => props.contrast === "" ? "white" : "black"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ border: 1px solid ${props => props.contrast === "" ? "#666" : "white"};
+ border-radius: 0 0 10px 10px;
+ padding: 10px;
+ margin-top: 10px;
+`
+
export default PageHeader;
\ No newline at end of file
diff --git a/src/Admin/Pages/Pages/SubPages/Activity.js b/src/Admin/Pages/Pages/SubPages/Activity.js
index 379d9901..a436d75c 100644
--- a/src/Admin/Pages/Pages/SubPages/Activity.js
+++ b/src/Admin/Pages/Pages/SubPages/Activity.js
@@ -16,7 +16,7 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useEffect, useState } from "react"
+import React, { useEffect, useState, useContext } from "react"
import moment from 'moment'
//imports from local files
import TableData from "../../../Components/Components/Table"
@@ -26,6 +26,7 @@ import { getRequest } from '../../../../Components/HelperFunctions/getAxiosConfi
import LoadingSpinner from '../../../../Components/LoadingSpinner'
import MobilePageHeader from '../../../Components/Components/MobileComponents/MobilePageHeader'
import PageHeader from '../../../Components/Components/PageHeader'
+import { StyledLoadMoreButton, StyledDivButton } from "./Collections.js";
//imports from material ui
import { withStyles } from "@material-ui/core/styles"
import TableBody from "@material-ui/core/TableBody"
@@ -34,7 +35,7 @@ import MenuItem from "@material-ui/core/MenuItem"
import TableRow from "@material-ui/core/TableRow"
import TextField from "@material-ui/core/TextField"
import IconButton from "@material-ui/core/IconButton"
-import { Button, Paper } from "@material-ui/core"
+import { Button } from "@material-ui/core"
import CircularProgress from "@material-ui/core/CircularProgress"
import AddRoundedIcon from "@material-ui/icons/AddRounded"
import UpdateRoundedIcon from "@material-ui/icons/UpdateRounded"
@@ -44,7 +45,8 @@ import AllOutIcon from "@material-ui/icons/AllOut"
//routers
import { Link } from 'react-router-dom'
import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
-import styled from "styled-components"
+
+import { Store } from 'Store'
const StyledTableCell = withStyles((theme) => ({
head: {
@@ -65,6 +67,9 @@ const StyledTableRow = withStyles((theme) => ({
}))(TableRow);
const Activity = () => {
+
+ const { state } = useContext(Store)
+
const ADD_ONE_LENGHT = [""];
const TOP_LABELS = [
"CRIADO EM",
@@ -242,9 +247,11 @@ const Activity = () => {
{items.map((row, index) =>
index === items.length - 1 ? (
<StyledDivButton
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
>
- <Button
+ <StyledLoadMoreButton
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
color="primary"
variant="text"
@@ -260,7 +267,7 @@ const Activity = () => {
) : (
"Carregar mais itens"
)}
- </Button>
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
<>
@@ -419,10 +426,3 @@ const Activity = () => {
export default Activity;
-const StyledDivButton = styled(Paper)`
- width : 100%;
- display : flex;
- justify-content : center;
- align-items : center;
-`
-
diff --git a/src/Admin/Pages/Pages/SubPages/AproveTeacher.js b/src/Admin/Pages/Pages/SubPages/AproveTeacher.js
index 84df27d4..3eb5cc9a 100644
--- a/src/Admin/Pages/Pages/SubPages/AproveTeacher.js
+++ b/src/Admin/Pages/Pages/SubPages/AproveTeacher.js
@@ -16,9 +16,8 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useContext } from "react";
import moment from "moment";
-import styled from "styled-components";
//imports from local files
import TableData from "../../../Components/Components/Table";
import SnackBar from "../../../../Components/SnackbarComponent";
@@ -30,8 +29,11 @@ import {
} from "../../../../Components/HelperFunctions/getAxiosConfig";
import MobileList from "../../../Components/Components/MobileComponents/SimpleList";
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader";
-import PageHeader from "../../../Components/Components/PageHeader";
+import PageHeader, { StyledFilter } from "../../../Components/Components/PageHeader";
import { apiDomain } from '../../../../env';
+import FormInput from "Components/FormInput.js"
+import { Store } from 'Store'
+import { StyledLoadMoreButton, StyledDivButton } from "./Collections.js";
//imports from material ui
import { withStyles } from "@material-ui/core/styles";
import TableBody from "@material-ui/core/TableBody";
@@ -75,6 +77,9 @@ const StyledTableRow = withStyles((theme) => ({
}))(TableRow);
const AproveTeacher = () => {
+
+ const { state } = useContext(Store);
+
const WINDOW_WIDTH = window.innerWidth
const ADD_ONE_LENGHT = [""];
const TOP_LABELS = [
@@ -396,7 +401,7 @@ const AproveTeacher = () => {
]}
>
{showFilter ? (
- <>
+ <StyledFilter contrast={state.contrast}>
{showFilter ? (
<Grid
container
@@ -427,33 +432,36 @@ const AproveTeacher = () => {
</TextField>
</Grid>
<Grid item>
- <TextField
- label="Nome"
- onChange={NameHandler}
- value={nameValue}
- onBlur={(event) => { setName(event.target.value) }}
- helperText="Retire o foco do campo de texto ao terminar de digitar"
- />
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Nome"
+ handleChange={NameHandler}
+ value={nameValue}
+ onBlur={(event) => { setName(event.target.value) }}
+ help="Retire o foco do campo de texto ao terminar de digitar"
+ />
</Grid>
<Grid item>
- <TextField
- label="Email"
- onChange={EmailHandler}
- value={emailValue}
- onBlur={(event) => { setEmail(event.target.value) }}
- helperText="Retire o foco do campo de texto ao terminar de digitar"
- />
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Email"
+ handleChange={EmailHandler}
+ value={emailValue}
+ onBlur={(event) => { setEmail(event.target.value) }}
+ help="Retire o foco do campo de texto ao terminar de digitar"
+ />
</Grid>
</Grid>
) : null}
- </>
+ </StyledFilter>
) : null}
</MobilePageHeader>
{items.map((row, index) =>
index === items.length - 1 ? (
- <StyledDivButton>
- <Button
+ <StyledDivButton contrast={state.contrast}>
+ <StyledLoadMoreButton
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
color="primary"
variant="text"
@@ -469,7 +477,7 @@ const AproveTeacher = () => {
) : (
"Carregar mais itens"
)}
- </Button>
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
<>
@@ -600,7 +608,7 @@ const AproveTeacher = () => {
]}
>
{showFilter ? (
- <>
+ <StyledFilter contrast={state.contrast}>
{showFilter ? (
<Grid
container
@@ -631,26 +639,28 @@ const AproveTeacher = () => {
</TextField>
</Grid>
<Grid item>
- <TextField
- label="Nome"
- onChange={NameHandler}
- value={nameValue}
- onBlur={(event) => { setName(event.target.value) }}
- helperText="Retire o foco do campo de texto ao terminar de digitar"
- />
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Nome"
+ handleChange={NameHandler}
+ value={nameValue}
+ onBlur={(event) => { setName(event.target.value) }}
+ help="Retire o foco do campo de texto ao terminar de digitar"
+ />
</Grid>
<Grid item>
- <TextField
- label="Email"
- onChange={EmailHandler}
- value={emailValue}
- onBlur={(event) => { setEmail(event.target.value) }}
- helperText="Retire o foco do campo de texto ao terminar de digitar"
- />
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Email"
+ handleChange={EmailHandler}
+ value={emailValue}
+ onBlur={(event) => { setEmail(event.target.value) }}
+ help="Retire o foco do campo de texto ao terminar de digitar"
+ />
</Grid>
</Grid>
) : null}
- </>
+ </StyledFilter>
) : null}
</PageHeader>
@@ -753,11 +763,4 @@ const AproveTeacher = () => {
}
}
};
-export default AproveTeacher;
-
-const StyledDivButton = styled(Paper)`
- width: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
-`;
+export default AproveTeacher;
\ No newline at end of file
diff --git a/src/Admin/Pages/Pages/SubPages/BlockedUsers.js b/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
index 7915870f..1e60e612 100644
--- a/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
+++ b/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
@@ -15,9 +15,8 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
import moment from "moment";
-import styled from "styled-components"
//Material ui componets
import { withStyles } from '@material-ui/core/styles';
import TableBody from '@material-ui/core/TableBody';
@@ -41,7 +40,9 @@ import LoadingSpinner from '../../../../Components/LoadingSpinner';
import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
import { apiDomain } from '../../../../env';
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
-import PageHeader from "../../../Components/Components/PageHeader"
+import PageHeader, { StyledFilter } from "../../../Components/Components/PageHeader"
+import { StyledLoadMoreButton, StyledDivButton } from "./Collections.js";
+import { Store } from 'Store'
//Services
import { getRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { Url } from '../../../Filters';
@@ -70,6 +71,9 @@ const StyledTableRow = withStyles((theme) => ({
}))(TableRow);
const BlockedUsers = () => {
+
+ const { state } = useContext(Store)
+
const ADD_ONE_LENGHT = [''];
const WINDOW_WIDTH = window.innerWidth
@@ -277,6 +281,7 @@ const BlockedUsers = () => {
},
]}
>
+ <StyledFilter contrast={state.contrast}>
<Grid item>
<TextField
select
@@ -295,12 +300,14 @@ const BlockedUsers = () => {
))}
</TextField>
</Grid>
+ </StyledFilter>
</MobilePageHeader>
{items.map((row, index) =>
index === items.length - 1 ? (
- <StyledDivButton>
- <Button
+ <StyledDivButton contrast={state.contrast}>
+ <StyledLoadMoreButton
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
color="primary"
variant="text"
@@ -316,7 +323,7 @@ const BlockedUsers = () => {
) : (
"Carregar mais itens"
)}
- </Button>
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
<>
@@ -408,6 +415,7 @@ const BlockedUsers = () => {
},
]}
>
+ <StyledFilter contrast={state.contrast}>
<Grid item>
<TextField
select
@@ -426,6 +434,7 @@ const BlockedUsers = () => {
))}
</TextField>
</Grid>
+ </StyledFilter>
</PageHeader>
<TableData
@@ -511,11 +520,4 @@ const BlockedUsers = () => {
}
-export default BlockedUsers;
-
-const StyledDivButton = styled(Paper)`
- width : 100%;
- display : flex;
- justify-content : center;
- align-items : center;
-`
\ No newline at end of file
+export default BlockedUsers;
\ No newline at end of file
diff --git a/src/Admin/Pages/Pages/SubPages/Collections.js b/src/Admin/Pages/Pages/SubPages/Collections.js
index feec6ec2..c35bbaac 100644
--- a/src/Admin/Pages/Pages/SubPages/Collections.js
+++ b/src/Admin/Pages/Pages/SubPages/Collections.js
@@ -26,7 +26,8 @@ import AlertDialog from "../../../Components/Components/AlertDialog";
import LoadingSpinner from "../../../../Components/LoadingSpinner";
import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
-import PageHeader from "../../../Components/Components/PageHeader"
+import PageHeader, { StyledFilter } from "../../../Components/Components/PageHeader"
+import FormInput from "Components/FormInput.js"
//imports from material ui
import { withStyles } from "@material-ui/core/styles";
import TableBody from "@material-ui/core/TableBody";
@@ -312,7 +313,7 @@ const Collections = () => {
]}
>
{showFilter ? (
- <>
+ <StyledFilter contrast={state.contrast}>
<Grid
container
alignItems="center"
@@ -342,25 +343,28 @@ const Collections = () => {
</Grid>
<Grid item>
- <TextField
- label="Pesquisa"
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Pesquisa"
+ handleChange={(event) => HandleSearch(event)}
value={valueOfSearch}
- helperText="Ao digitar, tire o foco do campo de texto"
- onChange={(event) => HandleSearch(event)}
onBlur={(event) => setSearch(event.target.value)}
- ></TextField>
+ help="Retire o foco do campo de texto ao terminar de digitar"
+ />
</Grid>
</Grid>
- </>
+ </StyledFilter>
) : null}
</MobilePageHeader>
{items.map((row, index) =>
index === items.length - 1 ? (
<StyledDivButton
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
>
- <Button
+ <StyledLoadMoreButton
+ contrast={state.contrast}
color="primary"
variant="text"
// disabled={isLoadingMoreItems}
@@ -375,7 +379,7 @@ const Collections = () => {
) : (
"Carregar mais itens"
)}
- </Button>
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
<>
@@ -470,7 +474,7 @@ const Collections = () => {
]}
>
{showFilter ? (
- <>
+ <StyledFilter contrast={state.contrast}>
<Grid
container
alignItems="center"
@@ -500,16 +504,17 @@ const Collections = () => {
</Grid>
<Grid item>
- <TextField
- label="Pesquisa"
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Pesquisa"
+ handleChange={(event) => HandleSearch(event)}
value={valueOfSearch}
- helperText="Ao digitar, tire o foco do campo de texto"
- onChange={(event) => HandleSearch(event)}
onBlur={(event) => setSearch(event.target.value)}
+ help="Retire o foco do campo de texto ao terminar de digitar"
/>
</Grid>
</Grid>
- </>
+ </StyledFilter>
) : null}
</PageHeader>
@@ -604,11 +609,20 @@ const Collections = () => {
};
export default Collections;
-const StyledDivButton = styled(Paper)`
+export const StyledLoadMoreButton = styled(Button)`
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ color: ${props => props.contrast === "" ? "" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "" : "underline yellow"} !important;
+`
+
+export const StyledDivButton = styled(Paper)`
width : 100%;
display : flex;
justify-content : center;
align-items : center;
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ color: ${props => props.contrast === "" ? "#666" : "white"} !important;
+ border: 1px solid ${props => props.contrast === "" ? "#666" : "white"} !important;
`
const StyledContent = styled.div`
diff --git a/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js b/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js
index 3d71db8d..81b29756 100644
--- a/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js
+++ b/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js
@@ -16,7 +16,7 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useContext } from "react";
import moment from 'moment';
//imports from local files
import TableData from "../../../Components/Components/Table";
@@ -26,15 +26,17 @@ import LoadingSpinner from '../../../../Components/LoadingSpinner';
import { getRequest } from '../../../../Components/HelperFunctions/getAxiosConfig';
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
-import PageHeader from "../../../Components/Components/PageHeader"
+import PageHeader, { StyledFilter } from "../../../Components/Components/PageHeader"
+import FormInput from "Components/FormInput.js"
+import { Store } from 'Store'
+import { StyledLoadMoreButton, StyledDivButton } from "./Collections.js";
//imports from material ui
import { withStyles } from "@material-ui/core/styles";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableRow from "@material-ui/core/TableRow";
-import TextField from "@material-ui/core/TextField";
import IconButton from "@material-ui/core/IconButton";
-import { Button, Paper, Grid } from "@material-ui/core";
+import { Button, Grid } from "@material-ui/core";
import CircularProgress from "@material-ui/core/CircularProgress";
import AddRoundedIcon from "@material-ui/icons/AddRounded";
import UpdateRoundedIcon from "@material-ui/icons/UpdateRounded";
@@ -44,7 +46,6 @@ import EmailRoundedIcon from '@material-ui/icons/EmailRounded';
import ContactSupportRoundedIcon from "@material-ui/icons/ContactSupportRounded";
//routers
import { Link } from 'react-router-dom';
-import styled from "styled-components"
const StyledTableCell = withStyles((theme) => ({
head: {
@@ -66,6 +67,8 @@ const StyledTableRow = withStyles((theme) => ({
const CommunityQuestion = () => {
+ const { state } = useContext(Store)
+
const ADD_ONE_LENGHT = [""];
const TOP_LABELS = [
"ID",
@@ -255,6 +258,7 @@ const CommunityQuestion = () => {
]}
>
{showFilter ? (
+ <StyledFilter contrast={state.contrast}>
<Grid
container
direction="row"
@@ -265,45 +269,48 @@ const CommunityQuestion = () => {
xs={12}
>
<Grid item>
- <TextField
- label="Email"
- value={valueOfEmailField}
- onChange={valueOfEmailHandler}
- onBlur={(e) => { setEmail(e.target.value) }}
- helperText="Por favor, ao digitar o email que você quer filtar, retire o foco do campo de texto"
- >
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Email"
+ handleChange={valueOfEmailHandler}
+ value={valueOfEmailField}
+ onBlur={(event) => setEmail(event.target.value)}
+ help="Por favor, ao digitar o email que você quer filtar, retire o foco do campo de texto"
+ />
</Grid>
<Grid item>
- <TextField
- label="Mensagem"
- value={valueOfMessageField}
- onChange={valueOfMessageHandler}
- onBlur={(e) => { setMessage(e.target.value) }}
- helperText="Por favor, ao digitar a mensagem que você quer filtar, retire o foco do campo de texto"
- >
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Mensagem"
+ handleChange={valueOfMessageHandler}
+ value={valueOfMessageField}
+ onBlur={(event) => setMessage(event.target.value)}
+ help="Por favor, ao digitar a mensagem que você quer filtar, retire o foco do campo de texto"
+ />
</Grid>
<Grid item>
- <TextField
- label="Nome"
- value={valueOfNameField}
- onChange={valueOfNameHandler}
- onBlur={(e) => { setName(e.target.value) }}
- helperText="Por favor, ao digitar o nome que você quer filtar, retire o foco do campo de texto"
- >
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Nome"
+ handleChange={valueOfNameHandler}
+ value={valueOfNameField}
+ onBlur={(event) => setName(event.target.value)}
+ help="Por favor, ao digitar o nome que você quer filtar, retire o foco do campo de texto"
+ />
</Grid>
</Grid>
+ </StyledFilter>
) : null}
</MobilePageHeader>
{items.map((row, index) =>
index === items.length - 1 ? (
<StyledDivButton
+ contrast={state.contrast}
key="Load more"
>
- <Button
+ <StyledLoadMoreButton
+ contrast={state.contrast}
color="primary"
variant="text"
// disabled={isLoadingMoreItems}
@@ -318,7 +325,7 @@ const CommunityQuestion = () => {
) : (
"Carregar mais itens"
)}
- </Button>
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
<>
@@ -405,6 +412,7 @@ const CommunityQuestion = () => {
]}
>
{showFilter ? (
+ <StyledFilter contrast={state.contrast}>
<Grid
container
direction="row"
@@ -415,36 +423,37 @@ const CommunityQuestion = () => {
xs={12}
>
<Grid item>
- <TextField
- label="Email"
- value={valueOfEmailField}
- onChange={valueOfEmailHandler}
- onBlur={(e) => { setEmail(e.target.value) }}
- helperText="Por favor, ao digitar o email que você quer filtar, retire o foco do campo de texto"
- >
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Email"
+ handleChange={valueOfEmailHandler}
+ value={valueOfEmailField}
+ onBlur={(event) => setEmail(event.target.value)}
+ help="Por favor, ao digitar o email que você quer filtar, retire o foco do campo de texto"
+ />
</Grid>
<Grid item>
- <TextField
- label="Mensagem"
- value={valueOfMessageField}
- onChange={valueOfMessageHandler}
- onBlur={(e) => { setMessage(e.target.value) }}
- helperText="Por favor, ao digitar a mensagem que você quer filtar, retire o foco do campo de texto"
- >
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Mensagem"
+ handleChange={valueOfMessageHandler}
+ value={valueOfMessageField}
+ onBlur={(event) => setMessage(event.target.value)}
+ help="Por favor, ao digitar a mensagem que você quer filtar, retire o foco do campo de texto"
+ />
</Grid>
<Grid item>
- <TextField
- label="Nome"
- value={valueOfNameField}
- onChange={valueOfNameHandler}
- onBlur={(e) => { setName(e.target.value) }}
- helperText="Por favor, ao digitar o nome que você quer filtar, retire o foco do campo de texto"
- >
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Nome"
+ handleChange={valueOfNameHandler}
+ value={valueOfNameField}
+ onBlur={(event) => setName(event.target.value)}
+ help="Por favor, ao digitar o nome que você quer filtar, retire o foco do campo de texto"
+ />
</Grid>
</Grid>
+ </StyledFilter>
) : null}
</PageHeader>
@@ -517,12 +526,3 @@ const CommunityQuestion = () => {
}
}
export default CommunityQuestion;
-
-
-const StyledDivButton = styled(Paper)`
- width : 100%;
- display : flex;
- justify-content : center;
- align-items : center;
-`
-
diff --git a/src/Admin/Pages/Pages/SubPages/Complaints.js b/src/Admin/Pages/Pages/SubPages/Complaints.js
index ee359ffc..1eb512f6 100644
--- a/src/Admin/Pages/Pages/SubPages/Complaints.js
+++ b/src/Admin/Pages/Pages/SubPages/Complaints.js
@@ -16,7 +16,7 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useContext } from "react";
import moment from "moment";
//imports from local files
import TableData from "../../../Components/Components/Table";
@@ -26,7 +26,10 @@ import LoadingSpinner from '../../../../Components/LoadingSpinner';
import { getRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
-import PageHeader from "../../../Components/Components/PageHeader"
+import PageHeader, { StyledFilter } from "../../../Components/Components/PageHeader"
+import FormInput from "Components/FormInput.js"
+import { Store } from 'Store'
+import { StyledLoadMoreButton, StyledDivButton } from "./Collections.js";
//imports from material ui
import { withStyles } from "@material-ui/core/styles";
import TableBody from "@material-ui/core/TableBody";
@@ -66,6 +69,9 @@ const StyledTableRow = withStyles((theme) => ({
}))(TableRow);
const Complaints = () => {
+
+ const { state } = useContext(Store)
+
const WINDOW_WIDTH = window.innerWidth
const ADD_ONE_LENGHT = [""];
const PORTAL_MEC = "https://plataformaintegrada.mec.gov.br/";
@@ -328,6 +334,7 @@ const Complaints = () => {
]}
>
{showFilter ? (
+ <StyledFilter contrast={state.contrast}>
<Grid
container
direction="row"
@@ -376,18 +383,28 @@ const Complaints = () => {
</TextField>
</Grid>
<Grid item>
- <TextField label="Descrição" helperText="Ao digitar a descrição, retire o foco do campo de texto" onChange={DescriptionHandler} value={valueOfDescField} onBlur={e => setDescription(e.target.value)} />
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Descrição"
+ handleChange={DescriptionHandler}
+ value={valueOfDescField}
+ onBlur={(event) => setDescription(event.target.value)}
+ help="Ao digitar a descrição, retire o foco do campo de texto"
+ />
</Grid>
</Grid>
+ </StyledFilter>
) : null}
</MobilePageHeader>
{items.map((row, index) =>
index === items.length - 1 ? (
<StyledDivButton
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
>
- <Button
+ <StyledLoadMoreButton
+ contrast={state.contrast}
color="primary"
variant="text"
// disabled={isLoadingMoreItems}
@@ -402,7 +419,7 @@ const Complaints = () => {
) : (
"Carregar mais itens"
)}
- </Button>
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
<>
@@ -484,6 +501,7 @@ const Complaints = () => {
]}
>
{showFilter ? (
+ <StyledFilter contrast={state.contrast}>
<Grid
container
direction="row"
@@ -532,9 +550,17 @@ const Complaints = () => {
</TextField>
</Grid>
<Grid item>
- <TextField label="Descrição" helperText="Ao digitar a descrição, retire o foco do campo de texto" onChange={DescriptionHandler} value={valueOfDescField} onBlur={e => setDescription(e.target.value)} />
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Descrição"
+ handleChange={DescriptionHandler}
+ value={valueOfDescField}
+ onBlur={(event) => setDescription(event.target.value)}
+ help="Ao digitar a descrição, retire o foco do campo de texto"
+ />
</Grid>
</Grid>
+ </StyledFilter>
) : null}
</PageHeader>
@@ -636,12 +662,4 @@ const Complaints = () => {
}
}
};
-export default Complaints;
-
-const StyledDivButton = styled(Paper)`
- width : 100%;
- display : flex;
- justify-content : center;
- align-items : center;
-`
-
+export default Complaints;
\ No newline at end of file
diff --git a/src/Admin/Pages/Pages/SubPages/EducationalObjects.js b/src/Admin/Pages/Pages/SubPages/EducationalObjects.js
index 3218221c..cf6397b6 100644
--- a/src/Admin/Pages/Pages/SubPages/EducationalObjects.js
+++ b/src/Admin/Pages/Pages/SubPages/EducationalObjects.js
@@ -16,7 +16,7 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
import moment from 'moment';
// Imports from local file
import TableData from "../../../Components/Components/Table";
@@ -25,7 +25,10 @@ import AlertDialog from "../../../Components/Components/AlertDialog";
import LoadingSpinner from '../../../../Components/LoadingSpinner';
import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
-import PageHeader from "../../../Components/Components/PageHeader"
+import PageHeader, { StyledFilter } from "../../../Components/Components/PageHeader"
+import FormInput from "Components/FormInput.js"
+import { Store } from 'Store'
+import { StyledLoadMoreButton, StyledDivButton } from './Collections';
// Imports about icon
import FilterListRoundedIcon from "@material-ui/icons/FilterListRounded";
import AddRoundedIcon from "@material-ui/icons/AddRounded";
@@ -38,18 +41,15 @@ import VisibilityIcon from "@material-ui/icons/Visibility";
import DeleteIcon from "@material-ui/icons/Delete";
// Import from material-ui
import { withStyles } from "@material-ui/core/styles";
-import Paper from "@material-ui/core/Paper";
import Button from "@material-ui/core/Button";
import Grid from "@material-ui/core/Grid";
import { CircularProgress } from "@material-ui/core";
-import TextField from "@material-ui/core/TextField";
// services
import { getRequest, deleteRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
//Filters
import { Url, DeleteFilter } from "../../../Filters";
//router
import { Link } from 'react-router-dom';
-import styled from 'styled-components'
import MenuBookRoundedIcon from "@material-ui/icons/MenuBookRounded";
const StyledTableCell = withStyles((theme) => ({
@@ -71,6 +71,9 @@ const StyledTableRow = withStyles((theme) => ({
}))(TableRow);
const EducationalObjects = () => {
+
+ const { state } = useContext(Store)
+
const WINDOW_WIDTH = window.innerWidth
const ADD_ONE_LENGHT = [""];
@@ -341,23 +344,26 @@ const EducationalObjects = () => {
>
{
showFilter &&
+ <StyledFilter contrast={state.contrast}>
<Grid item xs={12}>
<Grid container justify="space-between" spacing={3}>
{TextFieldOfTheFilter.map((field, index) => (
<Grid item key={field.label}>
- <TextField
- id={index}
- label={field.label}
- type="search"
- onChange={field.onChange}
- onBlur={field.onBlur}
- value={field.value}
- helperText={field.helperText}
- />
+ <FormInput
+ contrast={state.contrast}
+ id={index}
+ placeholder={field.label}
+ inputType="search"
+ handleChange={field.onChange}
+ onBlur={field.onBlur}
+ value={field.value}
+ help={field.helperText}
+ />
</Grid>
))}
</Grid>
</Grid>
+ </StyledFilter>
}
</MobilePageHeader>
{/************** End of the header **************/}
@@ -365,8 +371,9 @@ const EducationalObjects = () => {
{/************** Start of display data in table **************/}
{items.map((row, index) =>
index === items.length - 1 ? (
- <StyledDivButton>
- <Button
+ <StyledDivButton contrast={state.contrast}>
+ <StyledLoadMoreButton
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
color="primary"
variant="text"
@@ -382,7 +389,7 @@ const EducationalObjects = () => {
) : (
"Carregar mais itens"
)}
- </Button>
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
<>
@@ -480,23 +487,26 @@ const EducationalObjects = () => {
>
{
showFilter &&
+ <StyledFilter contrast={state.contrast}>
<Grid item xs={12}>
<Grid container justify="space-between" spacing={3}>
{TextFieldOfTheFilter.map((field, index) => (
<Grid item key={field.label}>
- <TextField
- id={index}
- label={field.label}
- type="search"
- onChange={field.onChange}
- onBlur={field.onBlur}
- value={field.value}
- helperText={field.helperText}
- />
+ <FormInput
+ contrast={state.contrast}
+ id={index}
+ placeholder={field.label}
+ inputType="search"
+ handleChange={field.onChange}
+ onBlur={field.onBlur}
+ value={field.value}
+ help={field.helperText}
+ />
</Grid>
))}
</Grid>
</Grid>
+ </StyledFilter>
}
</PageHeader>
{/************** End of the header **************/}
@@ -589,12 +599,4 @@ const EducationalObjects = () => {
}
};
-export default EducationalObjects;
-
-const StyledDivButton = styled(Paper)`
- width : 100%;
- display : flex;
- justify-content : center;
- align-items : center;
-`
-
+export default EducationalObjects;
\ No newline at end of file
diff --git a/src/Admin/Pages/Pages/SubPages/Inframe.js b/src/Admin/Pages/Pages/SubPages/Inframe.js
index 9fec9f16..cfda1e29 100644
--- a/src/Admin/Pages/Pages/SubPages/Inframe.js
+++ b/src/Admin/Pages/Pages/SubPages/Inframe.js
@@ -16,30 +16,61 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
import Welcome from '../../../Components/Components/Welcome';
+import LoadingSpinner from 'Components/LoadingSpinner';
import { Store } from 'Store'
import styled from 'styled-components'
const IframeComponent = () => {
- const { state } = useContext(Store)
+ const { state } = useContext(Store);
+
+ const [srcMetabase, setSrcMetabase] = useState('');
+ const [loading, setLoading] = useState(false);
+
+ const changeMetabase = () => {
+ if (state.contrast !== "")
+ setSrcMetabase("https://metabase.c3sl.ufpr.br/public/dashboard/8ada315d-b8df-4b18-b7fb-d06b0ac64623#theme=night");
+ else
+ setSrcMetabase("https://metabase.c3sl.ufpr.br/public/dashboard/8ada315d-b8df-4b18-b7fb-d06b0ac64623");
+ }
+
+ useEffect(() => {
+ if (loading === true) {
+ changeMetabase();
+ setLoading(false);
+ }
+ }, [ loading ])
+
+ useEffect(() => {
+ setLoading(true);
+ }, [ state.contrast ])
return (
- <StyledDiv contrast={state.contrast}>
- <Welcome contrast={state.contrast}/>
- <div style={{ height: '1em' }}></div>
- <StyledIframe
- title="Métricas portal MEC"
- src='https://metabase.c3sl.ufpr.br/public/dashboard/8ada315d-b8df-4b18-b7fb-d06b0ac64623'
- height='800px'
- width='100%'
- // allowTransparency={true}
- frameBorder={0}
- contrast={state.contrast}
- >
- </StyledIframe>
- </StyledDiv>
+ <>
+ {!loading ? (
+ <StyledDiv contrast={state.contrast}>
+ <Welcome contrast={state.contrast}/>
+ <div style={{ height: '1em' }}></div>
+ <StyledIframe
+ title="Métricas portal MEC"
+ src={srcMetabase}
+ height='800px'
+ width='100%'
+ // allowTransparency={true}
+ frameBorder={0}
+ contrast={state.contrast}
+ >
+ </StyledIframe>
+ </StyledDiv>
+ )
+ :
+ (
+ <LoadingSpinner/>
+ )
+ }
+ </>
)
}
diff --git a/src/Admin/Pages/Pages/SubPages/Institutions.js b/src/Admin/Pages/Pages/SubPages/Institutions.js
index baf583e7..43114af6 100644
--- a/src/Admin/Pages/Pages/SubPages/Institutions.js
+++ b/src/Admin/Pages/Pages/SubPages/Institutions.js
@@ -16,7 +16,7 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
// Imports from local files
import TableData from "../../../Components/Components/Table";
import SnackBar from "../../../../Components/SnackbarComponent";
@@ -24,7 +24,9 @@ import AlertDialog from "../../../Components/Components/AlertDialog";
import LoadingSpinner from '../../../../Components/LoadingSpinner';
import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
-import PageHeader from "../../../Components/Components/PageHeader"
+import PageHeader, { StyledFilter } from "../../../Components/Components/PageHeader"
+import { StyledLoadMoreButton, StyledDivButton } from "./Collections.js";
+import { Store } from 'Store'
// Imports about icon
import FilterListRoundedIcon from "@material-ui/icons/FilterListRounded";
import AddRoundedIcon from "@material-ui/icons/AddRounded";
@@ -37,18 +39,16 @@ import VisibilityIcon from "@material-ui/icons/Visibility";
import DeleteIcon from "@material-ui/icons/Delete";
// Import from material-ui
import { withStyles } from "@material-ui/core/styles";
-import Paper from "@material-ui/core/Paper";
import Button from "@material-ui/core/Button";
import Grid from "@material-ui/core/Grid";
import { CircularProgress } from "@material-ui/core";
-import TextField from "@material-ui/core/TextField";
+import FormInput from "Components/FormInput.js"
// services
import { getRequest, deleteRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
//Filters
import { Url, DeleteFilter } from "../../../Filters";
//router
import { Link, useHistory } from 'react-router-dom';
-import styled from "styled-components"
import AccountBalanceRoundedIcon from "@material-ui/icons/AccountBalanceRounded";
const StyledTableCell = withStyles((theme) => ({
@@ -70,6 +70,9 @@ const StyledTableRow = withStyles((theme) => ({
}))(TableRow);
const Institutions = () => {
+
+ const { state } = useContext(Store)
+
const WINDOW_WIDTH = window.innerWidth
const ADD_ONE_LENGHT = [""];
@@ -350,22 +353,25 @@ const Institutions = () => {
>
{
showFilter &&
+ <StyledFilter contrast={state.contrast}>
<Grid item xs={12}>
<Grid container justify="space-between" spacing={3}>
{TextFieldOfTheFilter.map((field, index) => (
<Grid item key={field.label}>
- <TextField
- id={index}
- label={field.label}
- value={field.value}
- helperText={field.helperText}
- onChange={field.onChange}
- onBlur={field.onBlur}
- />
+ <FormInput
+ contrast={state.contrast}
+ id={index}
+ placeholder={field.label}
+ handleChange={field.onChange}
+ onBlur={field.onBlur}
+ value={field.value}
+ help={field.helperText}
+ />
</Grid>
))}
</Grid>
</Grid>
+ </StyledFilter>
}
</MobilePageHeader>
{/************** End of the header **************/}
@@ -374,9 +380,11 @@ const Institutions = () => {
{items.map((row, index) =>
index === items.length - 1 ? (
<StyledDivButton
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
>
- <Button
+ <StyledLoadMoreButton
+ contrast={state.contrast}
color="primary"
variant="text"
// disabled={isLoadingMoreItems}
@@ -391,7 +399,7 @@ const Institutions = () => {
) : (
"Carregar mais itens"
)}
- </Button>
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
<>
@@ -497,22 +505,25 @@ const Institutions = () => {
>
{
showFilter &&
+ <StyledFilter contrast={state.contrast}>
<Grid item xs={12}>
<Grid container justify="space-between" spacing={3}>
{TextFieldOfTheFilter.map((field, index) => (
<Grid item key={field.label}>
- <TextField
- id={index}
- label={field.label}
- value={field.value}
- helperText={field.helperText}
- onChange={field.onChange}
- onBlur={field.onBlur}
- />
+ <FormInput
+ contrast={state.contrast}
+ id={index}
+ placeholder={field.label}
+ handleChange={field.onChange}
+ onBlur={field.onBlur}
+ value={field.value}
+ help={field.helperText}
+ />
</Grid>
))}
</Grid>
</Grid>
+ </StyledFilter>
}
</PageHeader>
{/************** End of the header **************/}
@@ -599,12 +610,4 @@ const Institutions = () => {
}
};
-export default Institutions;
-
-const StyledDivButton = styled(Paper)`
- width : 100%;
- display : flex;
- justify-content : center;
- align-items : center;
-`
-
+export default Institutions;
\ No newline at end of file
diff --git a/src/Admin/Pages/Pages/SubPages/Languages.js b/src/Admin/Pages/Pages/SubPages/Languages.js
index 84ced080..49d69ce8 100644
--- a/src/Admin/Pages/Pages/SubPages/Languages.js
+++ b/src/Admin/Pages/Pages/SubPages/Languages.js
@@ -16,7 +16,7 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useContext } from 'react'
//imports from local files
import TableData from '../../../Components/Components/Table';
import SnackBar from '../../../../Components/SnackbarComponent';
@@ -28,13 +28,15 @@ import { getRequest, deleteRequest } from '../../../../Components/HelperFunction
import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
import PageHeader from "../../../Components/Components/PageHeader"
+import { Store } from 'Store'
+import { StyledLoadMoreButton, StyledDivButton } from './Collections';
//imports from material ui
import { withStyles } from '@material-ui/core/styles';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableRow from '@material-ui/core/TableRow';
import IconButton from '@material-ui/core/IconButton';
-import { Button, Paper } from '@material-ui/core';
+import { Button } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import AddRoundedIcon from '@material-ui/icons/AddRounded';
import UpdateRoundedIcon from '@material-ui/icons/UpdateRounded';
@@ -42,7 +44,6 @@ import EditRoundedIcon from '@material-ui/icons/EditRounded';
import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
//router
import { Link, useHistory } from 'react-router-dom';
-import styled from "styled-components"
import LanguageRoundedIcon from "@material-ui/icons/LanguageRounded";
const StyledTableCell = withStyles((theme) => ({
@@ -64,6 +65,9 @@ const StyledTableRow = withStyles((theme) => ({
}))(TableRow);
const Languages = () => {
+
+ const { state } = useContext(Store)
+
const ADD_ONE_LENGHT = [""];
const TOP_LABELS = ['ID', 'NOME', 'CODE', 'EDITAR', 'DELETAR'] //Labels from Table
const WINDOW_WIDTH = window.innerWidth
@@ -248,8 +252,9 @@ const Languages = () => {
{items.map((row, index) =>
index === items.length - 1 ? (
- <StyledDivButton key={new Date().toISOString() + row.created_at}>
- <Button
+ <StyledDivButton contrast={state.contrast} key={new Date().toISOString() + row.created_at}>
+ <StyledLoadMoreButton
+ contrast={state.contrast}
color="primary"
variant="text"
// disabled={isLoadingMoreItems}
@@ -264,7 +269,7 @@ const Languages = () => {
) : (
"Carregar mais itens"
)}
- </Button>
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
<>
@@ -421,12 +426,4 @@ const Languages = () => {
}
}
}
-export default Languages;
-
-const StyledDivButton = styled(Paper)`
- width : 100%;
- display : flex;
- justify-content : center;
- align-items : center;
-`
-
+export default Languages;
\ No newline at end of file
diff --git a/src/Admin/Pages/Pages/SubPages/NoteVariables.js b/src/Admin/Pages/Pages/SubPages/NoteVariables.js
index 4f2c6c3c..44276e4b 100644
--- a/src/Admin/Pages/Pages/SubPages/NoteVariables.js
+++ b/src/Admin/Pages/Pages/SubPages/NoteVariables.js
@@ -15,11 +15,10 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
//Material ui componets
import { withStyles } from '@material-ui/core/styles';
import TableBody from '@material-ui/core/TableBody';
-import Paper from "@material-ui/core/Paper";
import TableCell from '@material-ui/core/TableCell';
import TableRow from '@material-ui/core/TableRow';
import CheckRoundedIcon from "@material-ui/icons/CheckRounded";
@@ -37,13 +36,13 @@ import LoadingSpinner from '../../../../Components/LoadingSpinner';
import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
import PageHeader from "../../../Components/Components/PageHeader"
-
+import { StyledLoadMoreButton, StyledDivButton } from './Collections';
+import { Store } from 'Store'
//Services
import { getRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { Url } from '../../../Filters';
//routers
import { Link } from 'react-router-dom';
-import styled from "styled-components"
import TrendingUpRoundedIcon from "@material-ui/icons/TrendingUpRounded";
const StyledTableCell = withStyles((theme) => ({
@@ -65,6 +64,9 @@ const StyledTableRow = withStyles((theme) => ({
}))(TableRow);
const NoteVariables = () => {
+
+ const { state } = useContext(Store)
+
const WINDOW_WIDTH = window.innerWidth
const ADD_ONE_LENGHT = [""];
@@ -180,8 +182,9 @@ const NoteVariables = () => {
{items.map((row, index) =>
index === items.length - 1 ? (
- <StyledDivButton key={new Date().toISOString() + row.created_at}>
- <Button
+ <StyledDivButton contrast={state.contrast} key={new Date().toISOString() + row.created_at}>
+ <StyledLoadMoreButton
+ contrast={state.contrast}
color="primary"
variant="text"
// disabled={isLoadingMoreItems}
@@ -196,7 +199,7 @@ const NoteVariables = () => {
) : (
"Carregar mais itens"
)}
- </Button>
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
<>
@@ -329,11 +332,4 @@ const NoteVariables = () => {
}
-export default NoteVariables;
-
-const StyledDivButton = styled(Paper)`
- width : 100%;
- display : flex;
- justify-content : center;
- align-items : center;
-`
+export default NoteVariables;
\ No newline at end of file
diff --git a/src/Admin/Pages/Pages/SubPages/Permissions.js b/src/Admin/Pages/Pages/SubPages/Permissions.js
index f0456fd6..b6f3a489 100644
--- a/src/Admin/Pages/Pages/SubPages/Permissions.js
+++ b/src/Admin/Pages/Pages/SubPages/Permissions.js
@@ -16,7 +16,7 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useContext } from 'react'
//imports from local files
import TableData from '../../../Components/Components/Table';
import SnackBar from '../../../../Components/SnackbarComponent';
@@ -28,12 +28,14 @@ import { getRequest, deleteRequest } from '../../../../Components/HelperFunction
import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
import PageHeader from "../../../Components/Components/PageHeader"
+import { StyledLoadMoreButton, StyledDivButton } from './Collections';
+import { Store } from 'Store'
//imports from material ui
import { withStyles } from '@material-ui/core/styles';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableRow from '@material-ui/core/TableRow';
-import { Button, Paper } from '@material-ui/core';
+import { Button } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import AddRoundedIcon from '@material-ui/icons/AddRounded';
import UpdateRoundedIcon from '@material-ui/icons/UpdateRounded';
@@ -41,7 +43,6 @@ import EditRoundedIcon from '@material-ui/icons/EditRounded';
import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
//router
import { Link, useHistory } from 'react-router-dom';
-import styled from "styled-components"
import AccountCircleRoundedIcon from "@material-ui/icons/AccountCircleRounded"
const StyledTableCell = withStyles((theme) => ({
@@ -63,6 +64,9 @@ const StyledTableRow = withStyles((theme) => ({
}))(TableRow);
const UserPermissions = () => {
+
+ const { state } = useContext(Store)
+
const ADD_ONE_LENGHT = [""];
const TOP_LABELS = ['ID', 'NOME', 'DESCRIÇÃO', 'AÇÕES'] //Labels from Table
const WINDOW_WIDTH = window.innerWidth
@@ -252,8 +256,9 @@ const UserPermissions = () => {
{items.map((row, index) =>
index === items.length - 1 ? (
- <StyledDivButton key={new Date().toISOString() + row.created_at}>
- <Button
+ <StyledDivButton contrast={state.contrast} key={new Date().toISOString() + row.created_at}>
+ <StyledLoadMoreButton
+ contrast={state.contrast}
color="primary"
variant="text"
// disabled={isLoadingMoreItems}
@@ -268,7 +273,7 @@ const UserPermissions = () => {
) : (
"Carregar mais itens"
)}
- </Button>
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
<>
@@ -433,12 +438,4 @@ const UserPermissions = () => {
}
}
}
-export default UserPermissions;
-
-const StyledDivButton = styled(Paper)`
- width : 100%;
- display : flex;
- justify-content : center;
- align-items : center;
-`
-
+export default UserPermissions;
\ No newline at end of file
diff --git a/src/Admin/Pages/Pages/SubPages/Questions.js b/src/Admin/Pages/Pages/SubPages/Questions.js
index 078cda4c..bd7a444a 100644
--- a/src/Admin/Pages/Pages/SubPages/Questions.js
+++ b/src/Admin/Pages/Pages/SubPages/Questions.js
@@ -16,7 +16,7 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useContext } from 'react'
import moment from 'moment';
//imports from local files
import TableData from '../../../Components/Components/Table';
@@ -27,19 +27,20 @@ import { getRequest, putRequest } from '../../../../Components/HelperFunctions/g
import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
import PageHeader from "../../../Components/Components/PageHeader"
+import { StyledLoadMoreButton, StyledDivButton } from './Collections';
+import { Store } from 'Store'
//imports from material ui
import { withStyles } from '@material-ui/core/styles';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableRow from '@material-ui/core/TableRow';
-import { Button, Paper } from '@material-ui/core';
+import { Button } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import AddRoundedIcon from '@material-ui/icons/AddRounded';
import UpdateRoundedIcon from '@material-ui/icons/UpdateRounded';
import Switch from '@material-ui/core/Switch';
//router
import { useHistory } from 'react-router-dom';
-import styled from "styled-components"
import HelpRoundedIcon from "@material-ui/icons/HelpRounded";
const StyledTableCell = withStyles((theme) => ({
@@ -62,6 +63,8 @@ const StyledTableRow = withStyles((theme) => ({
const Questions = () => {
+ const { state } = useContext(Store)
+
const ADD_ONE_LENGHT = [""];
const WINDOW_WIDTH = window.innerWidth
const TOP_LABELS = ['ID', 'CRIAÇÃO EM', 'DESCRIÇÃO', 'STATUS', 'ATUALIZAÇÃO EM'] //Labels from Table
@@ -251,9 +254,11 @@ const Questions = () => {
{items.map((row, index) =>
index === items.length - 1 ? (
<StyledDivButton
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
>
- <Button
+ <StyledLoadMoreButton
+ contrast={state.contrast}
color="primary"
variant="text"
// disabled={isLoadingMoreItems}
@@ -268,7 +273,7 @@ const Questions = () => {
) : (
"Carregar mais itens"
)}
- </Button>
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
<>
@@ -419,12 +424,4 @@ const Questions = () => {
}
}
}
-export default Questions;
-
-const StyledDivButton = styled(Paper)`
- width : 100%;
- display : flex;
- justify-content : center;
- align-items : center;
-`
-
+export default Questions;
\ No newline at end of file
diff --git a/src/Admin/Pages/Pages/SubPages/Rating.js b/src/Admin/Pages/Pages/SubPages/Rating.js
index 24b861b0..c7872d7e 100644
--- a/src/Admin/Pages/Pages/SubPages/Rating.js
+++ b/src/Admin/Pages/Pages/SubPages/Rating.js
@@ -16,11 +16,10 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
//Material ui componets
import { withStyles } from '@material-ui/core/styles';
import TableBody from '@material-ui/core/TableBody';
-import Paper from "@material-ui/core/Paper";
import TableCell from '@material-ui/core/TableCell';
import TableRow from '@material-ui/core/TableRow';
import IconButton from '@material-ui/core/IconButton';
@@ -37,6 +36,8 @@ import LoadingSpinner from '../../../../Components/LoadingSpinner';
import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
import PageHeader from "../../../Components/Components/PageHeader"
+import { StyledLoadMoreButton, StyledDivButton } from './Collections';
+import { Store } from 'Store'
//Services
import AlertDialog from "../../../Components/Components/AlertDialog";
import { Url } from '../../../Filters';
@@ -45,7 +46,6 @@ import { getRequest, deleteRequest } from '../../../../Components/HelperFunction
//routers
import { Link, useHistory } from 'react-router-dom';
import StarRoundedIcon from "@material-ui/icons/StarRounded";
-import styled from "styled-components"
const StyledTableCell = withStyles((theme) => ({
head: {
@@ -66,6 +66,9 @@ const StyledTableRow = withStyles((theme) => ({
}))(TableRow);
const Ratings = () => {
+
+ const { state } = useContext(Store)
+
const WINDOW_WIDTH = window.innerWidth
const ADD_ONE_LENGHT = [""];
@@ -249,8 +252,9 @@ const Ratings = () => {
{items.map((row, index) =>
index === items.length - 1 ? (
- <StyledDivButton key={new Date().toISOString() + row.created_at}>
- <Button
+ <StyledDivButton contrast={state.contrast} key={new Date().toISOString() + row.created_at}>
+ <StyledLoadMoreButton
+ contrast={state.contrast}
color="primary"
variant="text"
// disabled={isLoadingMoreItems}
@@ -265,7 +269,7 @@ const Ratings = () => {
) : (
"Carregar mais itens"
)}
- </Button>
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
<>
@@ -423,11 +427,3 @@ const Ratings = () => {
export default Ratings;
-
-const StyledDivButton = styled(Paper)`
- width : 100%;
- display : flex;
- justify-content : center;
- align-items : center;
-`
-
diff --git a/src/Admin/Pages/Pages/SubPages/Users.js b/src/Admin/Pages/Pages/SubPages/Users.js
index e13ad9d6..f7ef6971 100644
--- a/src/Admin/Pages/Pages/SubPages/Users.js
+++ b/src/Admin/Pages/Pages/SubPages/Users.js
@@ -15,7 +15,7 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
//Material ui componets
import { withStyles } from '@material-ui/core/styles';
import TableBody from '@material-ui/core/TableBody';
@@ -28,7 +28,6 @@ import VisibilityIcon from '@material-ui/icons/Visibility';
import { Button, Chip } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import AddRoundedIcon from '@material-ui/icons/AddRounded';
-import TextField from '@material-ui/core/TextField';
import UpdateRoundedIcon from '@material-ui/icons/UpdateRounded'
import FilterListRoundedIcon from "@material-ui/icons/FilterListRounded";
//Local files
@@ -37,7 +36,10 @@ import SnackBar from '../../../../Components/SnackbarComponent';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
-import PageHeader from "../../../Components/Components/PageHeader"
+import PageHeader, { StyledFilter } from "../../../Components/Components/PageHeader"
+import FormInput from "Components/FormInput.js"
+import { Store } from 'Store'
+import { StyledLoadMoreButton, StyledDivButton } from './Collections';
//Services
import { getRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { Url } from '../../../Filters';
@@ -70,6 +72,9 @@ const StyledTableRow = withStyles((theme) => ({
}))(TableRow);
const Users = () => {
+
+ const { state } = useContext(Store)
+
const ADD_ONE_LENGHT = [''];
const WINDOW_WIDTH = window.innerWidth
@@ -296,34 +301,39 @@ const Users = () => {
>
{
showFilter ? (
+ <StyledFilter contrast={state.contrast}>
<Grid container direction="row" justify="space-between" alignItems="center">
<Grid item>
- <TextField
- label="Name"
- value={nameValue}
- onChange={(e) => { NameHandler(e) }}
- onBlur={(e) => { setEmail(e.target.value) }}
- helperText="Ao digitar, retire o foco do campo"
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Name"
+ handleChange={(e) => { NameHandler(e) }}
+ onBlur={(e) => { setName(e.target.value) }}
+ value={nameValue}
+ help="Ao digitar, retire o foco do campo"
/>
</Grid>
<Grid item>
- <TextField
- label="Email"
- value={emailValue}
- onChange={(e) => { EmailHandler(e) }}
- onBlur={(e) => { setEmail(e.target.value) }}
- helperText="Ao digitar, retire o foco do campo"
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Email"
+ handleChange={(e) => { EmailHandler(e) }}
+ onBlur={(e) => { setEmail(e.target.value) }}
+ value={emailValue}
+ help="Ao digitar, retire o foco do campo"
/>
</Grid>
</Grid>
+ </StyledFilter>
) : null
}
</MobilePageHeader>
{items.map((row, index) =>
index === items.length - 1 ? (
- <StyledDivButton key={new Date().toISOString() + row.created_at}>
- <Button
+ <StyledDivButton contrast={state.contrast} key={new Date().toISOString() + row.created_at}>
+ <StyledLoadMoreButton
+ contrast={state.contrast}
color="primary"
variant="text"
// disabled={isLoadingMoreItems}
@@ -338,7 +348,7 @@ const Users = () => {
) : (
"Carregar mais itens"
)}
- </Button>
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
<>
@@ -461,26 +471,30 @@ const Users = () => {
>
{
showFilter ? (
+ <StyledFilter contrast={state.contrast}>
<Grid container direction="row" justify="space-between" alignItems="center">
<Grid item>
- <TextField
- label="Name"
- value={nameValue}
- onChange={(e) => { NameHandler(e) }}
- onBlur={(e) => { setEmail(e.target.value) }}
- helperText="Ao digitar, retire o foco do campo"
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Name"
+ handleChange={(e) => { NameHandler(e) }}
+ onBlur={(e) => { setName(e.target.value) }}
+ value={nameValue}
+ help="Ao digitar, retire o foco do campo"
/>
</Grid>
<Grid item>
- <TextField
- label="Email"
- value={emailValue}
- onChange={(e) => { EmailHandler(e) }}
- onBlur={(e) => { setEmail(e.target.value) }}
- helperText="Ao digitar, retire o foco do campo"
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Email"
+ handleChange={(e) => { EmailHandler(e) }}
+ onBlur={(e) => { setEmail(e.target.value) }}
+ value={emailValue}
+ help="Ao digitar, retire o foco do campo"
/>
</Grid>
</Grid>
+ </StyledFilter>
) : null
}
</PageHeader>
@@ -561,12 +575,4 @@ export default Users;
const ChipDiv = styled.div`
margin-top : 0.5em;
-`
-
-const StyledDivButton = styled(Paper)`
- width : 100%;
- display : flex;
- justify-content : center;
- align-items : center;
-`
-
+`
\ No newline at end of file
diff --git a/src/Components/FormInput.js b/src/Components/FormInput.js
index 45e38a05..e1f7cef1 100644
--- a/src/Components/FormInput.js
+++ b/src/Components/FormInput.js
@@ -30,6 +30,13 @@ const StyledTextField = styled(TextField)`
.MuiFormHelperText-root {
color: ${props => props.contrast === "" ? "#666" : "white"};
}
+ .Mui-disabled{
+ color: ${props => props.contrast === "" ? "#999" : "white"} !important;
+ fieldset {
+ border-color: ${props => props.contrast === "" ? "#999" : "white"} !important;
+ }
+
+ }
.MuiFormHelperText-root.Mui-error {
color: ${props => props.contrast === "" ? "red" : "#e75480"};
@@ -115,23 +122,25 @@ export default function FormInput(props) {
contrast={props.contrast}
key={props.key}
label={props.placeholder}
+ select={props.selectable ? props.selectable : false}
disabled={props.disableField}
margin="normal"
id={props.id}
name={props.name}
type={props.inputType}
value={props.value}
+ onBlur={props.onBlur}
onChange={props.handleChange}
onKeyDown={props.onKeyDown}
variant="outlined"
rows={props.rows}
+ onKeyPress={props.onKeyPress}
error={props.error}
rowsMax={props.rowsMax}
InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
required={props.required}
// helperText={<span style={props.contrast === "" ? { color: "red" } : { color: "#e75480" }}>{props.help}</span>}
helperText={props.help}
- style={{ width: "100%" }}
mask={props.mask}
multiline={props.multi}
/>
--
GitLab
From c15259a1d9ac34110b0dabfef0d887ab3059a66d Mon Sep 17 00:00:00 2001
From: Vinicius Gabriel Machado <vgm18@inf.ufpr.br>
Date: Wed, 29 Sep 2021 04:34:51 -0300
Subject: [PATCH 07/15] Contrast in admin
---
.../Components/MobileComponents/SimpleList.js | 39 +++++----
src/Admin/Components/Components/Table.js | 3 +-
src/Admin/Pages/Pages/SubPages/Activity.js | 58 +++++--------
.../Pages/Pages/SubPages/AproveTeacher.js | 82 ++++++++-----------
.../Pages/Pages/SubPages/BlockedUsers.js | 64 ++++++---------
src/Admin/Pages/Pages/SubPages/Collections.js | 79 ++++++++++--------
.../Pages/SubPages/CommunityQuestions.js | 72 +++++++---------
src/Admin/Pages/Pages/SubPages/Complaints.js | 80 ++++++++----------
.../Pages/SubPages/EducationalObjects.js | 70 +++++++---------
.../Pages/Pages/SubPages/Institutions.js | 66 ++++++---------
src/Admin/Pages/Pages/SubPages/Languages.js | 56 +++++--------
.../Pages/Pages/SubPages/NoteVariables.js | 62 ++++++--------
src/Admin/Pages/Pages/SubPages/Permissions.js | 48 ++++-------
src/Admin/Pages/Pages/SubPages/Questions.js | 50 ++++-------
src/Admin/Pages/Pages/SubPages/Rating.js | 56 +++++--------
src/Admin/Pages/Pages/SubPages/Users.js | 74 +++++++----------
16 files changed, 404 insertions(+), 555 deletions(-)
diff --git a/src/Admin/Components/Components/MobileComponents/SimpleList.js b/src/Admin/Components/Components/MobileComponents/SimpleList.js
index f7afb24b..6f787e41 100644
--- a/src/Admin/Components/Components/MobileComponents/SimpleList.js
+++ b/src/Admin/Components/Components/MobileComponents/SimpleList.js
@@ -31,13 +31,10 @@ import VisibilityIcon from "@material-ui/icons/Visibility";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import { Link } from "react-router-dom";
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles({
expand: {
transform: "rotate(0deg)",
marginLeft: "auto",
- transition: theme.transitions.create("transform", {
- duration: theme.transitions.duration.shortest,
- }),
},
expandOpen: {
transform: "rotate(180deg)",
@@ -51,10 +48,18 @@ const useStyles = makeStyles((theme) => ({
fontSize: 14,
fontWeight: "500",
},
-}));
+ subColor: {
+ color: props => props.contrast === "" ? "#666" : "white",
+ },
+ root: {
+ backgroundColor: props => props.contrast === "" ? "" : "black",
+ color: props => props.contrast === "" ? "#666" : "white",
+ border: props => props.contrast === "" ? "1px solid #666" : "1px solid white",
+ }
+});
export default function MobileList(props) {
- const classes = useStyles();
+ const classes = useStyles(props);
const [expanded, setExpanded] = React.useState(false);
const handleExpandClick = () => {
@@ -68,16 +73,22 @@ export default function MobileList(props) {
<Avatar
aria-label="avatar"
style={
- props.backColor
- ? { backgroundColor: props.backColor }
- : { backgroundColor: "grey" }
+ props.contrast === "" ? (
+ props.backColor
+ ? { backgroundColor: props.backColor }
+ : { backgroundColor: "gray" }
+ )
+ :
+ (
+ {backgroundColor: "black"}
+ )
}
>
{props.avatar}
</Avatar>
}
title={props.title}
- subheader={props.subtitle}
+ subheader={<Typography className={classes.subColor}>{props.subtitle}</Typography>}
action={
<>
{
@@ -86,7 +97,7 @@ export default function MobileList(props) {
<IconButton
onClick={props.reset}
>
- <VisibilityIcon style={{ fill: "#00bcd4" }} />
+ <VisibilityIcon style={{fill: props.contrast === "" ? "#00bcd4" : "yellow"}} />
</IconButton>
</Link> : null
}
@@ -99,7 +110,7 @@ export default function MobileList(props) {
aria-expanded={expanded}
aria-label="show more"
>
- <ExpandMoreIcon />
+ <ExpandMoreIcon style={{fill: props.contrast === "" ? "#666" : "yellow"}}/>
</IconButton>
</>
}
@@ -108,10 +119,10 @@ export default function MobileList(props) {
<CardContent>
{props.data.map((info, index) => (
<div className={classes.displayColumn} key={index}>
- <Typography color="initial" className={classes.subTitle}>
+ <Typography className={classes.subTitle}>
{info.title}
</Typography>
- <Typography color="textSecondary">
+ <Typography>
{info.subtitle}
</Typography>
</div>
diff --git a/src/Admin/Components/Components/Table.js b/src/Admin/Components/Components/Table.js
index ddb7a377..3fbba67f 100644
--- a/src/Admin/Components/Components/Table.js
+++ b/src/Admin/Components/Components/Table.js
@@ -23,7 +23,8 @@ const StyledTableCell = withStyles((theme) => ({
const useStyles = makeStyles({
table: {
minWidth: 700,
- width: "100%"
+ width: "99.99%",
+ overflow: "hidden"
},
});
diff --git a/src/Admin/Pages/Pages/SubPages/Activity.js b/src/Admin/Pages/Pages/SubPages/Activity.js
index a436d75c..0fe5f9c1 100644
--- a/src/Admin/Pages/Pages/SubPages/Activity.js
+++ b/src/Admin/Pages/Pages/SubPages/Activity.js
@@ -26,9 +26,8 @@ import { getRequest } from '../../../../Components/HelperFunctions/getAxiosConfi
import LoadingSpinner from '../../../../Components/LoadingSpinner'
import MobilePageHeader from '../../../Components/Components/MobileComponents/MobilePageHeader'
import PageHeader from '../../../Components/Components/PageHeader'
-import { StyledLoadMoreButton, StyledDivButton } from "./Collections.js";
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from "./Collections.js";
//imports from material ui
-import { withStyles } from "@material-ui/core/styles"
import TableBody from "@material-ui/core/TableBody"
import TableCell from "@material-ui/core/TableCell"
import MenuItem from "@material-ui/core/MenuItem"
@@ -48,28 +47,13 @@ import MobileList from "../../../Components/Components/MobileComponents/SimpleLi
import { Store } from 'Store'
-const StyledTableCell = withStyles((theme) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
-
-const StyledTableRow = withStyles((theme) => ({
- root: {
- "&:nth-of-type(odd)": {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
-
const Activity = () => {
const { state } = useContext(Store)
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
+
const ADD_ONE_LENGHT = [""];
const TOP_LABELS = [
"CRIADO EM",
@@ -272,6 +256,7 @@ const Activity = () => {
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.id}
subtitle={row.privacy}
@@ -371,9 +356,9 @@ const Activity = () => {
<TableBody>
{items.map((row, index) =>
index === items.length - 1 ? (
- <StyledTableRow key={new Date().toISOString() + row.created_at} style={{ padding: "1em" }}>
+ <TableRow className={classesRow.root} key={new Date().toISOString() + row.created_at} style={{ padding: "1em" }}>
{/* Button to load more data */}
- <StyledTableCell>
+ <TableCell className={classesCell.root} colspan={5}>
<Button
color="primary"
variant="text"
@@ -383,6 +368,7 @@ const Activity = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
>
{isLoadingMoreItems ? (
<CircularProgress size={24} />
@@ -390,30 +376,30 @@ const Activity = () => {
"Carregar mais itens"
)}
</Button>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
) : (
- <StyledTableRow key={new Date().toISOString() + index}>
- <StyledTableCell component="th" scope="row">
+ <TableRow className={classesRow.root} key={new Date().toISOString() + index}>
+ <TableCell className={classesCell.root} component="th" scope="row">
{DisplayDate(row.created_at)}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{
row.owner ? row.owner.name : ""
}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{row.activity}
- </StyledTableCell>
- <StyledTableCell align="right">{row.privacy}</StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">{row.privacy}</TableCell>
+ <TableCell className={classesCell.root} align="right">
<Link to={`/admin/activity?activity=${row.id}`}>
<IconButton>
- <VisibilityIcon style={{ fill: "#00bcd4" }} />
+ <VisibilityIcon style={{ fill: state.contrast === "" ? "#00bcd4" : "yellow" }} />
</IconButton>
</Link>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
)
)}
</TableBody>
diff --git a/src/Admin/Pages/Pages/SubPages/AproveTeacher.js b/src/Admin/Pages/Pages/SubPages/AproveTeacher.js
index 3eb5cc9a..afc90e4f 100644
--- a/src/Admin/Pages/Pages/SubPages/AproveTeacher.js
+++ b/src/Admin/Pages/Pages/SubPages/AproveTeacher.js
@@ -33,9 +33,8 @@ import PageHeader, { StyledFilter } from "../../../Components/Components/PageHea
import { apiDomain } from '../../../../env';
import FormInput from "Components/FormInput.js"
import { Store } from 'Store'
-import { StyledLoadMoreButton, StyledDivButton } from "./Collections.js";
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from "./Collections.js";
//imports from material ui
-import { withStyles } from "@material-ui/core/styles";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import MenuItem from "@material-ui/core/MenuItem";
@@ -57,29 +56,13 @@ import { Link } from "react-router-dom";
//Image Import
import { noAvatar } from "ImportImages.js";
-
-const StyledTableCell = withStyles((theme) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
-
-const StyledTableRow = withStyles((theme) => ({
- root: {
- "&:nth-of-type(odd)": {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
-
const AproveTeacher = () => {
const { state } = useContext(Store);
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
+
const WINDOW_WIDTH = window.innerWidth
const ADD_ONE_LENGHT = [""];
const TOP_LABELS = [
@@ -167,7 +150,8 @@ const AproveTeacher = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#228B22",
+ backgroundColor: state.contrast === "" ? "#228B22" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -181,7 +165,8 @@ const AproveTeacher = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#FF8C00",
+ backgroundColor: state.contrast === "" ? "#FF8C00" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -195,7 +180,8 @@ const AproveTeacher = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#FA8072",
+ backgroundColor: state.contrast === "" ? "#FA8072" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -209,7 +195,8 @@ const AproveTeacher = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#797D7F ",
+ backgroundColor: state.contrast === "" ? "#797D7F" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -482,6 +469,7 @@ const AproveTeacher = () => {
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.name}
subtitle={row.id}
@@ -509,7 +497,8 @@ const AproveTeacher = () => {
<Button
variant='text'
color='primary'
- startIcon={<EmailRoundedIcon />}
+ style={state.contrast === "" ? {} : {color: "yellow", textDecoration: "underline yellow"}}
+ startIcon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
>
{row.email}
</Button>
@@ -672,9 +661,9 @@ const AproveTeacher = () => {
<TableBody>
{items.map((row, index) =>
index === items.length - 1 ? (
- <StyledTableRow key={new Date().toISOString() + row.created_at}>
+ <TableRow className={classesRow.root} key={new Date().toISOString() + row.created_at}>
{/* Button to load more data */}
- <StyledTableCell>
+ <TableCell className={classesCell.root} colspan={7}>
<Button
color="primary"
variant="text"
@@ -684,6 +673,7 @@ const AproveTeacher = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
>
{isLoadingMoreItems ? (
<CircularProgress size={24} />
@@ -691,34 +681,34 @@ const AproveTeacher = () => {
"Carregar mais itens"
)}
</Button>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
) : (
- <StyledTableRow
+ <TableRow className={classesRow.root}
key={new Date().toISOString() + index}
style={{ flex: 1, width: "100%" }}
>
- <StyledTableCell component="th" scope="row">
+ <TableCell className={classesCell.root} component="th" scope="row">
{ComplaintStatus(row.submitter_request)}
- </StyledTableCell>
- <StyledTableCell align="right">{row.id}</StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">{row.id}</TableCell>
+ <TableCell className={classesCell.root} align="right">
{row.name}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{row.email}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{DisplayDate(row.created_at)}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
<Link to={`/admin/user?id=${row.id}`}>
<IconButton>
- <VisibilityIcon style={{ fill: "#00bcd4" }} />
+ <VisibilityIcon style={{ fill: state.contrast === "" ? "#00bcd4" : "yellow" }} />
</IconButton>
</Link>
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
<Button
variant="contained"
color="secondary"
@@ -751,8 +741,8 @@ const AproveTeacher = () => {
>
Aceitar
</Button>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
)
)}
</TableBody>
diff --git a/src/Admin/Pages/Pages/SubPages/BlockedUsers.js b/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
index 1e60e612..9cad24d0 100644
--- a/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
+++ b/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
@@ -18,7 +18,6 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, { useEffect, useState, useContext } from 'react';
import moment from "moment";
//Material ui componets
-import { withStyles } from '@material-ui/core/styles';
import TableBody from '@material-ui/core/TableBody';
import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";
@@ -41,7 +40,7 @@ import MobileList from "../../../Components/Components/MobileComponents/SimpleLi
import { apiDomain } from '../../../../env';
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
import PageHeader, { StyledFilter } from "../../../Components/Components/PageHeader"
-import { StyledLoadMoreButton, StyledDivButton } from "./Collections.js";
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from "./Collections.js";
import { Store } from 'Store'
//Services
import { getRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
@@ -52,28 +51,13 @@ import { Link } from 'react-router-dom';
//Image Import
import { noAvatar } from "ImportImages.js";
-const StyledTableCell = withStyles((theme) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
-
-const StyledTableRow = withStyles((theme) => ({
- root: {
- '&:nth-of-type(odd)': {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
-
const BlockedUsers = () => {
const { state } = useContext(Store)
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
+
const ADD_ONE_LENGHT = [''];
const WINDOW_WIDTH = window.innerWidth
@@ -328,6 +312,7 @@ const BlockedUsers = () => {
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.name}
subtitle={row.id}
@@ -355,7 +340,8 @@ const BlockedUsers = () => {
<Button
variant='text'
color='primary'
- startIcon={<EmailRoundedIcon />}
+ style={state.contrast === "" ? {} : {color: "yellow", textDecoration: "underline yellow"}}
+ startIcon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
>
{row.email}
</Button>
@@ -444,9 +430,9 @@ const BlockedUsers = () => {
<TableBody>
{items.map((row, index) => (
index === items.length - 1 ?
- <StyledTableRow key={new Date().toISOString() + row.created_at}>
+ <TableRow className={classesRow.root} key={new Date().toISOString() + row.created_at}>
{/* Button to load more data */}
- <StyledTableCell>
+ <TableCell className={classesCell.root} colpsan={6}>
<Button
color='primary'
variant='text'
@@ -455,40 +441,42 @@ const BlockedUsers = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
>
{
isLoadingMoreItems ? <CircularProgress size={24} /> : 'Carregar mais itens'
}
</Button>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
:
- <StyledTableRow key={new Date().toISOString() + index}>
- <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
- <StyledTableCell align="right">
+ <TableRow className={classesRow.root} key={new Date().toISOString() + index}>
+ <TableCell className={classesCell.root} component="th" scope="row">{row.id}</TableCell>
+ <TableCell className={classesCell.root} align="right">
{BlockStatus(row.state)}
- </StyledTableCell>
- <StyledTableCell align="right">{row.name}</StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">{row.name}</TableCell>
+ <TableCell className={classesCell.root} align="right">
{
row.email ?
<Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
<Button
variant='text'
color='primary'
- startIcon={<EmailRoundedIcon />}
+ style={state.contrast === "" ? {} : {color: "yellow", textDecoration: "underline yellow"}}
+ startIcon={<EmailRoundedIcon style={{ fill: state.contrast === "" ? "#666" : "white" }}/>}
>
{row.email}
</Button>
</Link> : null
}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{DisplayDate(row.suspended_at)}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
<Button
style={{ width: "100%", marginBottom: "0.5em" }}
variant="contained"
@@ -508,8 +496,8 @@ const BlockedUsers = () => {
Visualizar
</Button>
</Link>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
))}
</TableBody>
</TableData>
diff --git a/src/Admin/Pages/Pages/SubPages/Collections.js b/src/Admin/Pages/Pages/SubPages/Collections.js
index c35bbaac..524ee882 100644
--- a/src/Admin/Pages/Pages/SubPages/Collections.js
+++ b/src/Admin/Pages/Pages/SubPages/Collections.js
@@ -29,7 +29,7 @@ import MobilePageHeader from "../../../Components/Components/MobileComponents/Mo
import PageHeader, { StyledFilter } from "../../../Components/Components/PageHeader"
import FormInput from "Components/FormInput.js"
//imports from material ui
-import { withStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
import TableBody from "@material-ui/core/TableBody";
import PeopleRoundedIcon from "@material-ui/icons/PeopleRounded";
import TableCell from "@material-ui/core/TableCell";
@@ -54,28 +54,33 @@ import styled from 'styled-components'
import { Store } from 'Store'
-const StyledTableCell = withStyles((theme) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
+export const useStylesCell = makeStyles((theme) => ({
+ root: {
+ color: props => props.contrast === "" ? "#666" : "white",
+ border: props => props.contrast === "" ? "1px solid #666" : "1px solid white",
+ "MuiTableRow-root": {
+ backgroundColor: props => props.contrast === "" ? "#eee" : "black",
+ }
+ }
+}));
-const StyledTableRow = withStyles((theme) => ({
+export const useStylesRow = makeStyles((theme) => ({
root: {
"&:nth-of-type(odd)": {
- backgroundColor: theme.palette.action.hover,
+ backgroundColor: props => props.contrast === "" ? "#eee" : "black",
},
+ backgroundColor: props => props.contrast === "" ? "" : "black",
+ border: props => props.contrast === "" ? "1px solid #666" : "1px solid white",
},
-}))(TableRow);
+}));
const Collections = () => {
const { state } = useContext(Store)
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
+
const ADD_ONE_LENGHT = [""];
const TOP_LABELS = [
"NOME",
@@ -384,6 +389,7 @@ const Collections = () => {
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.name}
subtitle={row.privacy}
@@ -522,8 +528,8 @@ const Collections = () => {
<TableBody>
{items.map((row, index) =>
index === items.length - 1 ? (
- <StyledTableRow key={new Date().toISOString() + row.created_at}>
- <StyledTableCell>
+ <TableRow className={classesRow.root} key={new Date().toISOString() + row.created_at}>
+ <TableCell className={classesCell.root} colSpan={8}>
<Button
color="primary"
variant="text"
@@ -533,6 +539,7 @@ const Collections = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
>
{isLoadingMoreItems ? (
<CircularProgress size={24} />
@@ -540,36 +547,36 @@ const Collections = () => {
"Carregar mais itens"
)}
</Button>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
) : (
- <StyledTableRow key={new Date().toISOString() + index}>
- <StyledTableCell component="th" scope="row">
+ <TableRow className={classesRow.root} key={new Date().toISOString() + index}>
+ <TableCell className={classesCell.root} component="th" scope="row">
{row.name}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
<div
dangerouslySetInnerHTML={{ __html: row.description }}
></div>
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{row.owner ? row.owner.name : "Sem dados"}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{DisplayDate(row.created_at)}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{DisplayDate(row.updated_at)}
- </StyledTableCell>
- <StyledTableCell align="right">{row.privacy}</StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">{row.privacy}</TableCell>
+ <TableCell className={classesCell.root} align="right">
<Link to={`/admin/Collection?collection=${row.id}`}>
<IconButton>
- <VisibilityIcon style={{ fill: "#00bcd4" }} />
+ <VisibilityIcon style={{ fill: state.contrast === "" ? "#00bcd4" : "yellow" }} />
</IconButton>
</Link>
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{isLoadingToDelete === index ? (
<CircularProgress size={24} color="primary" />
) : (
@@ -579,11 +586,11 @@ const Collections = () => {
HandleStateCircularProgress(index);
}}
>
- <DeleteIcon style={{ fill: "#FF0000" }} />
+ <DeleteIcon style={{ fill: state.contrast === "" ? "#FF0000" : "yellow" }} />
</IconButton>
)}
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
)
)}
</TableBody>
diff --git a/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js b/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js
index 81b29756..69f9b9c4 100644
--- a/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js
+++ b/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js
@@ -29,9 +29,8 @@ import MobileList from "../../../Components/Components/MobileComponents/SimpleLi
import PageHeader, { StyledFilter } from "../../../Components/Components/PageHeader"
import FormInput from "Components/FormInput.js"
import { Store } from 'Store'
-import { StyledLoadMoreButton, StyledDivButton } from "./Collections.js";
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from "./Collections.js";
//imports from material ui
-import { withStyles } from "@material-ui/core/styles";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableRow from "@material-ui/core/TableRow";
@@ -47,28 +46,13 @@ import ContactSupportRoundedIcon from "@material-ui/icons/ContactSupportRounded"
//routers
import { Link } from 'react-router-dom';
-const StyledTableCell = withStyles((theme) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
-
-const StyledTableRow = withStyles((theme) => ({
- root: {
- "&:nth-of-type(odd)": {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
-
const CommunityQuestion = () => {
const { state } = useContext(Store)
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
+
const ADD_ONE_LENGHT = [""];
const TOP_LABELS = [
"ID",
@@ -330,6 +314,7 @@ const CommunityQuestion = () => {
) : (
<>
<MobileList
+ contrast={state.contrast}
key={index}
title={row.name}
subtitle={row.id}
@@ -347,8 +332,9 @@ const CommunityQuestion = () => {
<Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
<Button
variant='text'
- color='primary'
- startIcon={<EmailRoundedIcon />}
+ color="primary"
+ style={state.contrast === "" ? {} : {color: "yellow", textDecoration: "underline yellow"}}
+ startIcon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
>
{row.email}
</Button>
@@ -461,9 +447,9 @@ const CommunityQuestion = () => {
<TableBody>
{items.map((row, index) =>
index === items.length - 1 ? (
- <StyledTableRow key={row.created_at} style={{ padding: "1em" }}>
+ <TableRow className={classesRow.root} key={row.created_at} style={{ padding: "1em" }}>
{/* Button to load more data */}
- <StyledTableCell>
+ <TableCell className={classesCell.root} colspan={7}>
<Button
color="primary"
variant="text"
@@ -472,6 +458,7 @@ const CommunityQuestion = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
>
{isLoadingMoreItems ? (
<CircularProgress size={24} />
@@ -479,44 +466,45 @@ const CommunityQuestion = () => {
"Carregar mais itens"
)}
</Button>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
) : (
- <StyledTableRow key={new Date().toISOString() + index}>
- <StyledTableCell component="th" scope="row">
+ <TableRow className={classesRow.root} key={new Date().toISOString() + index}>
+ <TableCell className={classesCell.root} component="th" scope="row">
{row.id}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{DisplayDate(row.created_at)}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{row.name}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{
row.email ?
<Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
<Button
variant='text'
color='primary'
- startIcon={<EmailRoundedIcon />}
+ style={state.contrast === "" ? {} : {color: "yellow", textDecoration: "underline yellow"}}
+ startIcon={<EmailRoundedIcon style={{ fill: state.contrast === "" ? "#666" : "white" }}/>}
>
{row.email}
</Button>
</Link> : null
}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{row.message}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
<Link to={`/admin/CommunityQuestion?question=${row.id}`}>
<IconButton>
- <VisibilityIcon style={{ fill: "#00bcd4" }} />
+ <VisibilityIcon style={{ fill: state.contrast === "" ? "#00bcd4" : "yellow" }} />
</IconButton>
</Link>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
)
)}
</TableBody>
diff --git a/src/Admin/Pages/Pages/SubPages/Complaints.js b/src/Admin/Pages/Pages/SubPages/Complaints.js
index 1eb512f6..de0eaa44 100644
--- a/src/Admin/Pages/Pages/SubPages/Complaints.js
+++ b/src/Admin/Pages/Pages/SubPages/Complaints.js
@@ -29,9 +29,8 @@ import MobilePageHeader from "../../../Components/Components/MobileComponents/Mo
import PageHeader, { StyledFilter } from "../../../Components/Components/PageHeader"
import FormInput from "Components/FormInput.js"
import { Store } from 'Store'
-import { StyledLoadMoreButton, StyledDivButton } from "./Collections.js";
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from "./Collections.js";
//imports from material ui
-import { withStyles } from "@material-ui/core/styles";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import MenuItem from "@material-ui/core/MenuItem";
@@ -47,31 +46,15 @@ import VisibilityIcon from "@material-ui/icons/Visibility";
import LaunchRoundedIcon from "@material-ui/icons/LaunchRounded";
//routers
import { Link } from "react-router-dom";
-import styled from "styled-components"
import AnnouncementRoundedIcon from "@material-ui/icons/AnnouncementRounded";
-const StyledTableCell = withStyles((theme) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
-
-const StyledTableRow = withStyles((theme) => ({
- root: {
- "&:nth-of-type(odd)": {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
-
const Complaints = () => {
const { state } = useContext(Store)
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
+
const WINDOW_WIDTH = window.innerWidth
const ADD_ONE_LENGHT = [""];
const PORTAL_MEC = "https://plataformaintegrada.mec.gov.br/";
@@ -164,7 +147,8 @@ const Complaints = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#FA8072",
+ backgroundColor: state.contrast === "" ? "#FA8072" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -180,7 +164,8 @@ const Complaints = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#FF8C00",
+ backgroundColor: state.contrast === "" ? "#FF8C00" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -194,7 +179,8 @@ const Complaints = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#228B22",
+ backgroundColor: state.contrast === "" ? "#228B22" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -424,6 +410,7 @@ const Complaints = () => {
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.complainable_type}
subtitle={row.id}
@@ -572,9 +559,9 @@ const Complaints = () => {
<TableBody>
{items.map((row, index) =>
index === items.length - 1 ? (
- <StyledTableRow key={new Date().toISOString() + row.created_at}>
+ <TableRow className={classesRow.root} key={new Date().toISOString() + row.created_at}>
{/* Button to load more data */}
- <StyledTableCell>
+ <TableCell className={classesCell.root} colspan={8}>
<Button
color="primary"
variant="text"
@@ -584,6 +571,7 @@ const Complaints = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
>
{isLoadingMoreItems ? (
<CircularProgress size={24} />
@@ -591,40 +579,40 @@ const Complaints = () => {
"Carregar mais itens"
)}
</Button>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
) : (
- <StyledTableRow
+ <TableRow className={classesRow.root}
key={new Date().toISOString() + index}
style={{ flex: 1, width: "100%" }}
>
- <StyledTableCell component="th" scope="row">
+ <TableCell className={classesCell.root} component="th" scope="row">
{ComplaintStatus(row.state, row.complainable_type)}
- </StyledTableCell>
- <StyledTableCell align="right">{row.id}</StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">{row.id}</TableCell>
+ <TableCell className={classesCell.root} align="right">
{row.description}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{row.complainable_id}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{row.complainable_type}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{DisplayDate(row.created_at)}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
<Link to={`/admin/complaint?id=${row.id}`}>
<IconButton
onClick={() => {
}}
>
- <VisibilityIcon style={{ fill: "#00bcd4" }} />
+ <VisibilityIcon style={{ fill: state.contrast === "" ? "#00bcd4" : "yellow" }} />
</IconButton>
</Link>
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
<Button
variant="text"
secondary={true}
@@ -650,8 +638,8 @@ const Complaints = () => {
MEC RED
</a>
</Button>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
)
)}
</TableBody>
diff --git a/src/Admin/Pages/Pages/SubPages/EducationalObjects.js b/src/Admin/Pages/Pages/SubPages/EducationalObjects.js
index cf6397b6..f13b791f 100644
--- a/src/Admin/Pages/Pages/SubPages/EducationalObjects.js
+++ b/src/Admin/Pages/Pages/SubPages/EducationalObjects.js
@@ -28,7 +28,7 @@ import MobilePageHeader from "../../../Components/Components/MobileComponents/Mo
import PageHeader, { StyledFilter } from "../../../Components/Components/PageHeader"
import FormInput from "Components/FormInput.js"
import { Store } from 'Store'
-import { StyledLoadMoreButton, StyledDivButton } from './Collections';
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from './Collections';
// Imports about icon
import FilterListRoundedIcon from "@material-ui/icons/FilterListRounded";
import AddRoundedIcon from "@material-ui/icons/AddRounded";
@@ -40,7 +40,6 @@ import IconButton from "@material-ui/core/IconButton";
import VisibilityIcon from "@material-ui/icons/Visibility";
import DeleteIcon from "@material-ui/icons/Delete";
// Import from material-ui
-import { withStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import Grid from "@material-ui/core/Grid";
import { CircularProgress } from "@material-ui/core";
@@ -52,28 +51,13 @@ import { Url, DeleteFilter } from "../../../Filters";
import { Link } from 'react-router-dom';
import MenuBookRoundedIcon from "@material-ui/icons/MenuBookRounded";
-const StyledTableCell = withStyles((theme) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
-
-const StyledTableRow = withStyles((theme) => ({
- root: {
- "&:nth-of-type(odd)": {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
-
const EducationalObjects = () => {
const { state } = useContext(Store)
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
+
const WINDOW_WIDTH = window.innerWidth
const ADD_ONE_LENGHT = [""];
@@ -394,6 +378,7 @@ const EducationalObjects = () => {
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.name}
subtitle={row.id}
@@ -516,9 +501,9 @@ const EducationalObjects = () => {
<TableBody>
{items.map((row, index) =>
index === items.length - 1 ? (
- <StyledTableRow key={new Date().toISOString() + row.created_at}>
+ <TableRow className={classesRow.root} key={new Date().toISOString() + row.created_at}>
{/* Button to load more data */}
- <StyledTableCell>
+ <TableCell className={classesCell.root} colspan={7}>
<Button
color="primary"
variant="text"
@@ -529,6 +514,7 @@ const EducationalObjects = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
>
{isLoadingMoreItems ? (
<CircularProgress size={24} />
@@ -536,33 +522,33 @@ const EducationalObjects = () => {
"Carregar mais itens"
)}
</Button>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
) : (
- <StyledTableRow key={new Date().toISOString() + index}>
- <StyledTableCell component="th" scope="row">
+ <TableRow className={classesRow.root} key={new Date().toISOString() + index}>
+ <TableCell className={classesCell.root} component="th" scope="row">
{DisplayDate(row.created_at)}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{row.name}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{row.description}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{row.author}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{row.score}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
<Link to={`/admin/learningObject?learnObj=${row.id}`}>
<IconButton>
- <VisibilityIcon style={{ fill: "#00bcd4" }} />
+ <VisibilityIcon style={{ fill: state.contrast === "" ? "#00bcd4" : "yellow" }} />
</IconButton>
</Link>
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{isLoadingToDelete === index ? (
<CircularProgress size={24} color="primary" />
) : (
@@ -572,11 +558,11 @@ const EducationalObjects = () => {
HandleStateCircularProgress(index);
}}
>
- <DeleteIcon style={{ fill: "#FF0000" }} />
+ <DeleteIcon style={{ fill: state.contrast === "" ? "#FF0000" : "yellow" }}/>
</IconButton>
)}
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
)
)}
</TableBody>
diff --git a/src/Admin/Pages/Pages/SubPages/Institutions.js b/src/Admin/Pages/Pages/SubPages/Institutions.js
index 43114af6..b578806d 100644
--- a/src/Admin/Pages/Pages/SubPages/Institutions.js
+++ b/src/Admin/Pages/Pages/SubPages/Institutions.js
@@ -25,7 +25,7 @@ import LoadingSpinner from '../../../../Components/LoadingSpinner';
import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
import PageHeader, { StyledFilter } from "../../../Components/Components/PageHeader"
-import { StyledLoadMoreButton, StyledDivButton } from "./Collections.js";
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from "./Collections.js";
import { Store } from 'Store'
// Imports about icon
import FilterListRoundedIcon from "@material-ui/icons/FilterListRounded";
@@ -38,7 +38,6 @@ import IconButton from "@material-ui/core/IconButton";
import VisibilityIcon from "@material-ui/icons/Visibility";
import DeleteIcon from "@material-ui/icons/Delete";
// Import from material-ui
-import { withStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import Grid from "@material-ui/core/Grid";
import { CircularProgress } from "@material-ui/core";
@@ -51,28 +50,13 @@ import { Url, DeleteFilter } from "../../../Filters";
import { Link, useHistory } from 'react-router-dom';
import AccountBalanceRoundedIcon from "@material-ui/icons/AccountBalanceRounded";
-const StyledTableCell = withStyles((theme) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
-
-const StyledTableRow = withStyles((theme) => ({
- root: {
- "&:nth-of-type(odd)": {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
-
const Institutions = () => {
const { state } = useContext(Store)
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
+
const WINDOW_WIDTH = window.innerWidth
const ADD_ONE_LENGHT = [""];
@@ -404,6 +388,7 @@ const Institutions = () => {
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.name}
subtitle={row.id}
@@ -533,9 +518,9 @@ const Institutions = () => {
<TableBody>
{items.map((row, index) =>
index === items.length - 1 ? (
- <StyledTableRow key={new Date().toISOString() + row.created_at}>
+ <TableRow className={classesRow.root} key={new Date().toISOString() + row.created_at}>
{/* Button to load more data */}
- <StyledTableCell>
+ <TableCell className={classesCell.root} colspan={7}>
<Button
color="primary"
variant="text"
@@ -544,6 +529,7 @@ const Institutions = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
>
{isLoadingMoreItems ? (
<CircularProgress size={24} />
@@ -551,29 +537,29 @@ const Institutions = () => {
"Carregar mais itens"
)}
</Button>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
) : (
- <StyledTableRow key={new Date().toISOString() + index}>
- <StyledTableCell component="th" scope="row">
+ <TableRow className={classesRow.root} key={new Date().toISOString() + index}>
+ <TableCell className={classesCell.root} component="th" scope="row">
{row.id}
- </StyledTableCell>
- <StyledTableCell align="right">{row.name}</StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">{row.name}</TableCell>
+ <TableCell className={classesCell.root} align="right">
{row.description}
- </StyledTableCell>
- <StyledTableCell align="right">{row.city}</StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">{row.city}</TableCell>
+ <TableCell className={classesCell.root} align="right">
{row.country}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
<Link to={`/admin/institution?institution=${row.id}`}>
<IconButton>
- <VisibilityIcon style={{ fill: "#00bcd4" }} />
+ <VisibilityIcon style={{ fill: state.contrast === "" ? "#00bcd4" : "yellow" }} />
</IconButton>
</Link>
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{isLoadingToDelete === index ? (
<CircularProgress size={24} color="primary" />
) : (
@@ -583,11 +569,11 @@ const Institutions = () => {
HandleStateCircularProgress(index);
}}
>
- <DeleteIcon style={{ fill: "#FF0000" }} />
+ <DeleteIcon style={{ fill: state.contrast === "" ? "#FF0000" : "yellow" }} />
</IconButton>
)}
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
)
)}
</TableBody>
diff --git a/src/Admin/Pages/Pages/SubPages/Languages.js b/src/Admin/Pages/Pages/SubPages/Languages.js
index 49d69ce8..a82e0d0d 100644
--- a/src/Admin/Pages/Pages/SubPages/Languages.js
+++ b/src/Admin/Pages/Pages/SubPages/Languages.js
@@ -29,9 +29,8 @@ import MobileList from "../../../Components/Components/MobileComponents/SimpleLi
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
import PageHeader from "../../../Components/Components/PageHeader"
import { Store } from 'Store'
-import { StyledLoadMoreButton, StyledDivButton } from './Collections';
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from './Collections';
//imports from material ui
-import { withStyles } from '@material-ui/core/styles';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableRow from '@material-ui/core/TableRow';
@@ -46,28 +45,13 @@ import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
import { Link, useHistory } from 'react-router-dom';
import LanguageRoundedIcon from "@material-ui/icons/LanguageRounded";
-const StyledTableCell = withStyles((theme) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
-
-const StyledTableRow = withStyles((theme) => ({
- root: {
- '&:nth-of-type(odd)': {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
-
const Languages = () => {
const { state } = useContext(Store)
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
+
const ADD_ONE_LENGHT = [""];
const TOP_LABELS = ['ID', 'NOME', 'CODE', 'EDITAR', 'DELETAR'] //Labels from Table
const WINDOW_WIDTH = window.innerWidth
@@ -274,6 +258,7 @@ const Languages = () => {
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.name}
subtitle={row.id}
@@ -359,9 +344,9 @@ const Languages = () => {
<TableBody>
{items.map((row, index) => (
index === items.length - 1 ?
- <StyledTableRow key={new Date().toISOString() + row.created_at}>
+ <TableRow className={classesRow.root} key={new Date().toISOString() + row.created_at}>
{/* Button to load more data */}
- <StyledTableCell>
+ <TableCell className={classesCell.root} colspan={5}>
<Button
color='primary'
variant='text'
@@ -371,28 +356,29 @@ const Languages = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
>
{
isLoadingMoreItems ? <CircularProgress size={24} /> : 'Carregar mais itens'
}
</Button>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
:
- <StyledTableRow key={new Date().toISOString() + index}>
- <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
- <StyledTableCell align="right">{row.name}</StyledTableCell>
- <StyledTableCell align="right">{row.code}</StyledTableCell>
- <StyledTableCell align="right">
+ <TableRow className={classesRow.root} key={new Date().toISOString() + index}>
+ <TableCell className={classesCell.root} component="th" scope="row">{row.id}</TableCell>
+ <TableCell className={classesCell.root} align="right">{row.name}</TableCell>
+ <TableCell className={classesCell.root} align="right">{row.code}</TableCell>
+ <TableCell className={classesCell.root} align="right">
<Link to={`/admin/languageEdit?language=${row.id}`}>
<IconButton>
- <EditRoundedIcon style={{ fill: '#00bcd4' }} />
+ <EditRoundedIcon style={{ fill: state.contrast === "" ? "#00bcd4" : "yellow" }} />
</IconButton>
</Link>
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{isLoadingToDelete === index ? (
<CircularProgress size={24} color="primary" />
) : (
@@ -402,11 +388,11 @@ const Languages = () => {
HandleStateCircularProgress(index);
}}
>
- <DeleteRoundedIcon style={{ fill: "#FF0000" }} />
+ <DeleteRoundedIcon style={{ fill: state.contrast === "" ? "#FF0000" : "yellow" }} />
</IconButton>
)}
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
))}
</TableBody>
</TableData>
diff --git a/src/Admin/Pages/Pages/SubPages/NoteVariables.js b/src/Admin/Pages/Pages/SubPages/NoteVariables.js
index 44276e4b..beca23ce 100644
--- a/src/Admin/Pages/Pages/SubPages/NoteVariables.js
+++ b/src/Admin/Pages/Pages/SubPages/NoteVariables.js
@@ -17,7 +17,6 @@ You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
import React, { useEffect, useState, useContext } from 'react';
//Material ui componets
-import { withStyles } from '@material-ui/core/styles';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableRow from '@material-ui/core/TableRow';
@@ -36,7 +35,7 @@ import LoadingSpinner from '../../../../Components/LoadingSpinner';
import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
import PageHeader from "../../../Components/Components/PageHeader"
-import { StyledLoadMoreButton, StyledDivButton } from './Collections';
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from './Collections';
import { Store } from 'Store'
//Services
import { getRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
@@ -45,28 +44,13 @@ import { Url } from '../../../Filters';
import { Link } from 'react-router-dom';
import TrendingUpRoundedIcon from "@material-ui/icons/TrendingUpRounded";
-const StyledTableCell = withStyles((theme) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
-
-const StyledTableRow = withStyles((theme) => ({
- root: {
- '&:nth-of-type(odd)': {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
-
const NoteVariables = () => {
const { state } = useContext(Store)
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
+
const WINDOW_WIDTH = window.innerWidth
const ADD_ONE_LENGHT = [""];
@@ -204,6 +188,7 @@ const NoteVariables = () => {
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.name}
subtitle={row.id}
@@ -274,9 +259,9 @@ const NoteVariables = () => {
<TableBody>
{items.map((row, index) => (
index === items.length - 1 ?
- <StyledTableRow key={new Date().toISOString() + row.created_at}>
+ <TableRow className={classesRow.root} key={new Date().toISOString() + row.created_at}>
{/* Button to load more data */}
- <StyledTableCell>
+ <TableCell className={classesCell.root} colspan={7}>
<Button
color='primary'
variant='text'
@@ -285,27 +270,28 @@ const NoteVariables = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
>
{
isLoadingMoreItems ? <CircularProgress /> : 'Carregar mais itens'
}
</Button>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
:
- <StyledTableRow key={new Date().toISOString() + index}>
- <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
- <StyledTableCell align="right">{row.name}</StyledTableCell>
- <StyledTableCell align="right">{row.code}</StyledTableCell>
- <StyledTableCell align="right">{row.weight}</StyledTableCell>
- <StyledTableCell align="right">
+ <TableRow className={classesRow.root} key={new Date().toISOString() + index}>
+ <TableCell className={classesCell.root} component="th" scope="row">{row.id}</TableCell>
+ <TableCell className={classesCell.root} align="right">{row.name}</TableCell>
+ <TableCell className={classesCell.root} align="right">{row.code}</TableCell>
+ <TableCell className={classesCell.root} align="right">{row.weight}</TableCell>
+ <TableCell className={classesCell.root} align="right">
{
- row.active ? <CheckRoundedIcon style={{ fill: '#3CB371' }} /> : <BlockRoundedIcon style={{ fill: '#FA8072' }} />
+ row.active ? <CheckRoundedIcon style={{ fill: state.contrast === "" ? "#3CB371" : "white" }} /> : <BlockRoundedIcon style={{ fill: state.contrast === "" ? "#FA8072" : "white" }} />
}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{
row['score_type'].map((item) => (
<Typography key={item} style={{ fontSize: 14 }}>
@@ -313,15 +299,15 @@ const NoteVariables = () => {
</Typography>
))
}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
<Link to={`/admin/noteVar?id=${row.id}`}>
<IconButton>
- <VisibilityIcon style={{ fill: '#00bcd4' }} />
+ <VisibilityIcon style={{ fill: state.contrast === "" ? "#00bcd4" : "yellow" }} />
</IconButton>
</Link>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
))}
</TableBody>
</TableData>
diff --git a/src/Admin/Pages/Pages/SubPages/Permissions.js b/src/Admin/Pages/Pages/SubPages/Permissions.js
index b6f3a489..da28aae8 100644
--- a/src/Admin/Pages/Pages/SubPages/Permissions.js
+++ b/src/Admin/Pages/Pages/SubPages/Permissions.js
@@ -28,10 +28,9 @@ import { getRequest, deleteRequest } from '../../../../Components/HelperFunction
import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
import PageHeader from "../../../Components/Components/PageHeader"
-import { StyledLoadMoreButton, StyledDivButton } from './Collections';
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from './Collections';
import { Store } from 'Store'
//imports from material ui
-import { withStyles } from '@material-ui/core/styles';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableRow from '@material-ui/core/TableRow';
@@ -45,28 +44,13 @@ import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
import { Link, useHistory } from 'react-router-dom';
import AccountCircleRoundedIcon from "@material-ui/icons/AccountCircleRounded"
-const StyledTableCell = withStyles((theme) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
-
-const StyledTableRow = withStyles((theme) => ({
- root: {
- '&:nth-of-type(odd)': {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
-
const UserPermissions = () => {
const { state } = useContext(Store)
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
+
const ADD_ONE_LENGHT = [""];
const TOP_LABELS = ['ID', 'NOME', 'DESCRIÇÃO', 'AÇÕES'] //Labels from Table
const WINDOW_WIDTH = window.innerWidth
@@ -278,6 +262,7 @@ const UserPermissions = () => {
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.name}
subtitle={row.id}
@@ -362,9 +347,9 @@ const UserPermissions = () => {
<TableBody>
{items.map((row, index) => (
index === items.length - 1 ?
- <StyledTableRow key={new Date().toISOString() + row.created_at}>
+ <TableRow className={classesRow.root} key={new Date().toISOString() + row.created_at}>
{/* Button to load more data */}
- <StyledTableCell>
+ <TableCell className={classesCell.root} colspan={4}>
<Button
color='primary'
variant='text'
@@ -374,21 +359,22 @@ const UserPermissions = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
>
{
isLoadingMoreItems ? <CircularProgress size={24} /> : 'Carregar mais itens'
}
</Button>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
:
- <StyledTableRow key={new Date().toISOString() + index}>
- <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
- <StyledTableCell align="right">{row.name}</StyledTableCell>
- <StyledTableCell align="right">{row.description}</StyledTableCell>
- <StyledTableCell align="right">
+ <TableRow className={classesRow.root} key={new Date().toISOString() + index}>
+ <TableCell className={classesCell.root} component="th" scope="row">{row.id}</TableCell>
+ <TableCell className={classesCell.root} align="right">{row.name}</TableCell>
+ <TableCell className={classesCell.root} align="right">{row.description}</TableCell>
+ <TableCell className={classesCell.root} align="right">
<Link to={`/admin/EditPermissions?role=${row.id}`}>
<Button
style={{ width: "100%", marginBottom: "0.5em" }}
@@ -417,8 +403,8 @@ const UserPermissions = () => {
</Button>
)}
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
))}
</TableBody>
</TableData>
diff --git a/src/Admin/Pages/Pages/SubPages/Questions.js b/src/Admin/Pages/Pages/SubPages/Questions.js
index bd7a444a..0bb7416b 100644
--- a/src/Admin/Pages/Pages/SubPages/Questions.js
+++ b/src/Admin/Pages/Pages/SubPages/Questions.js
@@ -27,10 +27,9 @@ import { getRequest, putRequest } from '../../../../Components/HelperFunctions/g
import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
import PageHeader from "../../../Components/Components/PageHeader"
-import { StyledLoadMoreButton, StyledDivButton } from './Collections';
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from './Collections';
import { Store } from 'Store'
//imports from material ui
-import { withStyles } from '@material-ui/core/styles';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableRow from '@material-ui/core/TableRow';
@@ -43,28 +42,13 @@ import Switch from '@material-ui/core/Switch';
import { useHistory } from 'react-router-dom';
import HelpRoundedIcon from "@material-ui/icons/HelpRounded";
-const StyledTableCell = withStyles((theme) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
-
-const StyledTableRow = withStyles((theme) => ({
- root: {
- '&:nth-of-type(odd)': {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
-
const Questions = () => {
const { state } = useContext(Store)
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
+
const ADD_ONE_LENGHT = [""];
const WINDOW_WIDTH = window.innerWidth
const TOP_LABELS = ['ID', 'CRIAÇÃO EM', 'DESCRIÇÃO', 'STATUS', 'ATUALIZAÇÃO EM'] //Labels from Table
@@ -278,6 +262,7 @@ const Questions = () => {
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.id}
subtitle={DisplayDate(row.created_at)}
@@ -369,9 +354,9 @@ const Questions = () => {
<TableBody>
{items.map((row, index) => (
index === items.length - 1 ?
- <StyledTableRow key={new Date().toISOString() + row.created_at}>
+ <TableRow className={classesRow.root} key={new Date().toISOString() + row.created_at}>
{/* Button to load more data */}
- <StyledTableCell>
+ <TableCell className={classesCell.root} colspan={5}>
<Button
color='primary'
variant='text'
@@ -381,21 +366,22 @@ const Questions = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
>
{
isLoadingMoreItems ? <CircularProgress size={24} /> : 'Carregar mais itens'
}
</Button>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell >
+ </TableRow>
:
- <StyledTableRow key={new Date().toISOString() + index}>
- <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
- <StyledTableCell align="right">{DisplayDate(row.created_at)}</StyledTableCell>
- <StyledTableCell align="right">{row.description}</StyledTableCell>
- <StyledTableCell align="right">
+ <TableRow className={classesRow.root} key={new Date().toISOString() + index}>
+ <TableCell className={classesCell.root} component="th" scope="row">{row.id}</TableCell >
+ <TableCell className={classesCell.root} align="right">{DisplayDate(row.created_at)}</TableCell >
+ <TableCell className={classesCell.root} align="right">{row.description}</TableCell >
+ <TableCell className={classesCell.root} align="right">
{
row.status === 'active' ?
<Switch
@@ -413,9 +399,9 @@ const Questions = () => {
color="primary"
/>
}
- </StyledTableCell>
- <StyledTableCell align="right">{DisplayDate(row.updated_at)}</StyledTableCell>
- </StyledTableRow>
+ </TableCell >
+ <TableCell className={classesCell.root} align="right">{DisplayDate(row.updated_at)}</TableCell >
+ </TableRow>
))}
</TableBody>
</TableData>
diff --git a/src/Admin/Pages/Pages/SubPages/Rating.js b/src/Admin/Pages/Pages/SubPages/Rating.js
index c7872d7e..5c2d6189 100644
--- a/src/Admin/Pages/Pages/SubPages/Rating.js
+++ b/src/Admin/Pages/Pages/SubPages/Rating.js
@@ -18,7 +18,6 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, { useEffect, useState, useContext } from 'react';
//Material ui componets
-import { withStyles } from '@material-ui/core/styles';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableRow from '@material-ui/core/TableRow';
@@ -36,7 +35,7 @@ import LoadingSpinner from '../../../../Components/LoadingSpinner';
import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
import PageHeader from "../../../Components/Components/PageHeader"
-import { StyledLoadMoreButton, StyledDivButton } from './Collections';
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from './Collections';
import { Store } from 'Store'
//Services
import AlertDialog from "../../../Components/Components/AlertDialog";
@@ -47,28 +46,13 @@ import { getRequest, deleteRequest } from '../../../../Components/HelperFunction
import { Link, useHistory } from 'react-router-dom';
import StarRoundedIcon from "@material-ui/icons/StarRounded";
-const StyledTableCell = withStyles((theme) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
-
-const StyledTableRow = withStyles((theme) => ({
- root: {
- '&:nth-of-type(odd)': {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
-
const Ratings = () => {
const { state } = useContext(Store)
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
+
const WINDOW_WIDTH = window.innerWidth
const ADD_ONE_LENGHT = [""];
@@ -274,6 +258,7 @@ const Ratings = () => {
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.name}
subtitle={row.id}
@@ -358,9 +343,9 @@ const Ratings = () => {
<TableBody>
{items.map((row, index) => (
index === items.length - 1 ?
- <StyledTableRow key={new Date().toISOString() + row.created_at}>
+ <TableRow className={classesRow.root} key={new Date().toISOString() + row.created_at}>
{/* Button to load more data */}
- <StyledTableCell>
+ <TableCell className={classesCell.root} colspan={5}>
<Button
color='primary'
variant='text'
@@ -369,28 +354,29 @@ const Ratings = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
>
{
isLoadingMoreItems ? <CircularProgress size={24} /> : 'Carregar mais itens'
}
</Button>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
:
- <StyledTableRow key={new Date().toISOString() + index}>
- <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
- <StyledTableCell align="right">{row.name}</StyledTableCell>
- <StyledTableCell align="right">{row.description}</StyledTableCell>
- <StyledTableCell align="right">
+ <TableRow className={classesRow.root} key={new Date().toISOString() + index}>
+ <TableCell className={classesCell.root} component="th" scope="row">{row.id}</TableCell>
+ <TableCell className={classesCell.root} align="right">{row.name}</TableCell>
+ <TableCell className={classesCell.root} align="right">{row.description}</TableCell>
+ <TableCell className={classesCell.root} align="right">
<Link to={`/admin/Rating?rating=${row.id}`}>
<IconButton>
- <VisibilityIcon style={{ fill: '#00bcd4' }} />
+ <VisibilityIcon style={{ fill: state.contrast === "" ? "#00bcd4" : "yellow" }} />
</IconButton>
</Link>
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
{isLoadingToDelete === index ? (
<CircularProgress size={24} color="primary" />
) : (
@@ -400,11 +386,11 @@ const Ratings = () => {
HandleStateCircularProgress(index);
}}
>
- <DeleteRoundedIcon style={{ fill: "#FF0000" }} />
+ <DeleteRoundedIcon style={{ fill: state.contrast === "" ? "#FF0000" : "yellow" }} />
</IconButton>
)}
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
))}
</TableBody>
</TableData>
diff --git a/src/Admin/Pages/Pages/SubPages/Users.js b/src/Admin/Pages/Pages/SubPages/Users.js
index f7ef6971..b9ac0df0 100644
--- a/src/Admin/Pages/Pages/SubPages/Users.js
+++ b/src/Admin/Pages/Pages/SubPages/Users.js
@@ -17,10 +17,8 @@ You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
import React, { useEffect, useState, useContext } from 'react';
//Material ui componets
-import { withStyles } from '@material-ui/core/styles';
import TableBody from '@material-ui/core/TableBody';
import Grid from "@material-ui/core/Grid";
-import Paper from "@material-ui/core/Paper";
import TableCell from '@material-ui/core/TableCell';
import TableRow from '@material-ui/core/TableRow';
import IconButton from '@material-ui/core/IconButton';
@@ -39,7 +37,7 @@ import MobilePageHeader from "../../../Components/Components/MobileComponents/Mo
import PageHeader, { StyledFilter } from "../../../Components/Components/PageHeader"
import FormInput from "Components/FormInput.js"
import { Store } from 'Store'
-import { StyledLoadMoreButton, StyledDivButton } from './Collections';
+import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from './Collections';
//Services
import { getRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { Url } from '../../../Filters';
@@ -53,28 +51,13 @@ import { apiDomain } from '../../../../env';
//Image Import
import { noAvatar } from "ImportImages.js";
-const StyledTableCell = withStyles((theme) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
-
-const StyledTableRow = withStyles((theme) => ({
- root: {
- '&:nth-of-type(odd)': {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
-
const Users = () => {
const { state } = useContext(Store)
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
+
const ADD_ONE_LENGHT = [''];
const WINDOW_WIDTH = window.innerWidth
@@ -353,6 +336,7 @@ const Users = () => {
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.name}
subtitle={row.id}
@@ -378,8 +362,9 @@ const Users = () => {
<Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
<Button
variant='text'
- color='primary'
- startIcon={<EmailRoundedIcon />}
+ color="primary"
+ style={state.contrast === "" ? {} : {color: "yellow", textDecoration: "underline yellow"}}
+ startIcon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
>
{row.email}
</Button>
@@ -506,9 +491,9 @@ const Users = () => {
<TableBody>
{items.map((row, index) => (
index === items.length - 1 ?
- <StyledTableRow key={new Date().toISOString() + row.created_at}>
+ <TableRow className={classesRow.root} key={new Date().toISOString() + row.created_at}>
{/* Button to load more data */}
- <StyledTableCell>
+ <TableCell className={classesCell.root} colspan={8}>
<Button
color='primary'
variant='text'
@@ -517,34 +502,37 @@ const Users = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
>
{
isLoadingMoreItems ? <CircularProgress size={24} /> : 'Carregar mais itens'
}
</Button>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
:
- <StyledTableRow key={new Date().toISOString() + index}>
- <StyledTableCell component="th" scope="row">{row.id}</StyledTableCell>
- <StyledTableCell align="right">{row.name}</StyledTableCell>
- <StyledTableCell align="right">{row.email ? row.email : ""}</StyledTableCell>
- <StyledTableCell align="right">
+ <TableRow className={classesRow.root} key={new Date().toISOString() + index}>
+ <TableCell className={classesCell.root} component="th" scope="row">{row.id}</TableCell>
+ <TableCell className={classesCell.root} align="right">{row.name}</TableCell>
+ <TableCell className={classesCell.root} align="right">{row.email ? row.email : ""}</TableCell>
+ <TableCell className={classesCell.root} align="right">
{DisplayDate(row.created_at)}
- </StyledTableCell>
- <StyledTableCell align="right">{row.score}</StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">{row.score}</TableCell>
+ <TableCell className={classesCell.root} align="right">
{
row.roles.map((chip) => (
<ChipDiv>
- <Chip label={chip.name} key={chip.id} />
+ <Chip label={chip.name} key={chip.id}
+ style={state.contrast === "" ? {backgroundColor: "#ddd", color: "black"} : {backgroundColor: "black", color: "white", border: "1px solid white"}}
+ />
</ChipDiv>
))
}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
<Button
variant="contained"
color="primary"
@@ -553,15 +541,15 @@ const Users = () => {
>
Tornar publicador
</Button>
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
<Link to={`/admin/user?id=${row.id}`}>
<IconButton>
- <VisibilityIcon style={{ fill: '#00bcd4' }} />
+ <VisibilityIcon style={{ fill: state.contrast === "" ? "#00bcd4" : "yellow" }} />
</IconButton>
</Link>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
))}
</TableBody>
</TableData>
--
GitLab
From db35a55405dcaf81ecd31d9ec9b196b80bb3a61c Mon Sep 17 00:00:00 2001
From: Luis Felipe Risch <lfr20@inf.ufpr.br>
Date: Wed, 29 Sep 2021 11:03:41 -0300
Subject: [PATCH 08/15] implementing acessibility in admin buttons
---
src/Admin/Components/Components/Button.js | 46 ++++
.../Components/DataCards/ActivityCard.js | 10 +-
.../Components/DataCards/CollectionCard.js | 30 +--
.../DataCards/CommunityQuestionCard.js | 21 +-
.../Components/DataCards/InstitutionsCard.js | 29 +--
.../Components/Inputs/EditCollection.js | 27 +-
.../Components/Inputs/EditLanguage.js | 30 +--
.../Components/Inputs/IntitutionsInputs.js | 23 +-
.../MobileComponents/MobilePageHeader.js | 19 +-
src/Admin/Pages/Pages/SubPages/Collections.js | 9 +-
.../Pages/Pages/SubPages/Institutions.js | 242 +++++++++---------
src/Admin/Pages/Pages/SubPages/Languages.js | 106 ++++----
12 files changed, 318 insertions(+), 274 deletions(-)
create mode 100644 src/Admin/Components/Components/Button.js
diff --git a/src/Admin/Components/Components/Button.js b/src/Admin/Components/Components/Button.js
new file mode 100644
index 00000000..ac542554
--- /dev/null
+++ b/src/Admin/Components/Components/Button.js
@@ -0,0 +1,46 @@
+import React, { useContext } from 'react';
+import styled from 'styled-components';
+import Button from '@material-ui/core/Button';
+import { Store } from 'Store';
+
+
+function ButtonComponent({ text, color, icon, variant, onClick, disabled }) {
+ const { state } = useContext(Store);
+
+ if (state.contrast === "") {
+ return (
+ <Button
+ startIcon={icon}
+ color={color}
+ variant={variant}
+ onClick={onClick}
+ disabled={disabled}
+ >
+ {text}
+ </Button>
+ )
+ }
+ else {
+ return (
+ <ContrastButton
+ startIcon={icon}
+ onClick={onClick}
+ disabled={disabled}
+ >
+ {text}
+ </ContrastButton>
+ );
+ }
+}
+
+const ContrastButton = styled(Button)`
+ background-color: black !important;
+ border: 1px solid white !important;
+ color: yellow !important;
+ text-decoration: underline !important;
+ :hover {
+ background-color: rgba(255,255,0,0.24) !important;
+ }
+ `
+
+export default ButtonComponent
diff --git a/src/Admin/Components/Components/DataCards/ActivityCard.js b/src/Admin/Components/Components/DataCards/ActivityCard.js
index 6cf4be11..be4ef88c 100644
--- a/src/Admin/Components/Components/DataCards/ActivityCard.js
+++ b/src/Admin/Components/Components/DataCards/ActivityCard.js
@@ -30,6 +30,7 @@ import { GetAData } from "../../../Filters";
import { getRequest } from '../../../../Components/HelperFunctions/getAxiosConfig';
import { Link } from 'react-router-dom'
import LoadingSpinner from '../../../../Components/LoadingSpinner';
+import StyledButton from '../Button';
import { Store } from 'Store'
@@ -115,13 +116,12 @@ const ActivityCard = () => {
</Grid>
<Grid item>
<Link style={{ textDecoration: 'none' }} to={`/admin/activities`}>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
color="primary"
variant="outlined"
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
</Grid>
</Grid>
diff --git a/src/Admin/Components/Components/DataCards/CollectionCard.js b/src/Admin/Components/Components/DataCards/CollectionCard.js
index 402caaf1..7929d260 100644
--- a/src/Admin/Components/Components/DataCards/CollectionCard.js
+++ b/src/Admin/Components/Components/DataCards/CollectionCard.js
@@ -21,7 +21,6 @@ import moment from 'moment';
// Maerial ui components
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
-import Button from "@material-ui/core/Button";
import ListRoundedIcon from "@material-ui/icons/ListRounded";
import { useStyles, StyledCard } from "../../Styles/DataCard";
import Grid from '@material-ui/core/Grid';
@@ -34,7 +33,7 @@ import { Link, useHistory } from 'react-router-dom'
import LoadingSpinner from '../../../../Components/LoadingSpinner';
import SnackBar from '../../../../Components/SnackbarComponent';
import { getRequest, deleteRequest } from '../../../../Components/HelperFunctions/getAxiosConfig';
-
+import StyledButton from '../Button';
import { Store } from 'Store'
const CollectionCard = () => {
@@ -174,33 +173,30 @@ const CollectionCard = () => {
</Grid>
<Grid item>
<Link style={{ textDecoration: 'none' }} to={`/admin/Collections`}>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
color="primary"
variant="outlined"
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
<Link style={{ textDecoration: 'none' }} to={`/admin/EditCollection?collection=${item.id}`}>
- <Button
- startIcon={<EditRoundedIcon />}
+ <StyledButton
+ icon={<EditRoundedIcon />}
color="primary"
variant="outlined"
- >
- Editar
- </Button>
+ text="Editar"
+ />
</Link>
- <Button
- startIcon={<DeleteRoundedIcon />}
+ <StyledButton
+ icon={<DeleteRoundedIcon />}
color="secondary"
variant="outlined"
+ text="Deletar"
onClick={DeleteHandler}
- >
- Deletar
- </Button>
+ />
</Grid>
</Grid>
<div style={{ height: "1em" }} />
diff --git a/src/Admin/Components/Components/DataCards/CommunityQuestionCard.js b/src/Admin/Components/Components/DataCards/CommunityQuestionCard.js
index 92512fb2..b9b368d0 100644
--- a/src/Admin/Components/Components/DataCards/CommunityQuestionCard.js
+++ b/src/Admin/Components/Components/DataCards/CommunityQuestionCard.js
@@ -22,7 +22,6 @@ import moment from 'moment';
import Grid from "@material-ui/core/Grid";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
-import Button from "@material-ui/core/Button";
import ListRoundedIcon from "@material-ui/icons/ListRounded";
import { useStyles, StyledCard } from "../../Styles/DataCard";
// Icons
@@ -32,6 +31,7 @@ import { GetAData } from "../../../Filters";
import { Link } from 'react-router-dom'
import { getRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import LoadingSpinner from '../../../../Components/LoadingSpinner';
+import StyledButton from '../Button';
import { Store } from 'Store'
@@ -87,14 +87,14 @@ const CommunityQuestions = () => {
subTitle: "Email",
prop:
item.email ?
- <Link to={`/admin/sendEmail/?email=${item.email}`} style={state.contrast === "" ? {textDecoration: "none"} : {textDecoration: "yellow underline", color: "yellow"}}>
- <Button
+ <Link to={`/admin/sendEmail/?email=${item.email}`} style={state.contrast === "" ? { textDecoration: "none" } : { textDecoration: "yellow underline", color: "yellow" }}>
+ <StyledButton
variant='text'
color='inherit'
- startIcon={<EmailRoundedIcon style={{color: state.contrast === "" ? "" : "white"}}/>}
+ icon={<EmailRoundedIcon style={{ color: state.contrast === "" ? "" : "white" }} />}
+ text={item.email}
>
- {item.email}
- </Button>
+ </StyledButton>
</Link> : null
},
{
@@ -118,13 +118,12 @@ const CommunityQuestions = () => {
</Grid>
<Grid>
<Link style={{ textDecoration: 'none' }} to={`/admin/CommunityQuestions`}>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
color="primary"
variant="outlined"
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
</Grid>
</Grid>
diff --git a/src/Admin/Components/Components/DataCards/InstitutionsCard.js b/src/Admin/Components/Components/DataCards/InstitutionsCard.js
index 5819713b..cf8b6da4 100644
--- a/src/Admin/Components/Components/DataCards/InstitutionsCard.js
+++ b/src/Admin/Components/Components/DataCards/InstitutionsCard.js
@@ -21,7 +21,6 @@ import moment from 'moment'
// Maerial ui components
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
-import Button from "@material-ui/core/Button";
import ListRoundedIcon from "@material-ui/icons/ListRounded";
import { useStyles, StyledCard } from "../../Styles/DataCard";
import Grid from '@material-ui/core/Grid';
@@ -34,6 +33,7 @@ import { getRequest, deleteRequest } from '../../../../Components/HelperFunction
import { Link, useHistory } from 'react-router-dom';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
import SnackBar from '../../../../Components/SnackbarComponent';
+import StyledButton from '../Button';
import { Store } from 'Store'
@@ -173,33 +173,30 @@ const InstitutionCard = () => {
</Grid>
<Grid item>
<Link style={{ textDecoration: 'none' }} to={`/admin/institutions`}>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
color="primary"
variant="outlined"
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
<Link style={{ textDecoration: 'none' }} to={`/admin/institutionEdit?institution=${item.id}`}>
- <Button
- startIcon={<EditRoundedIcon />}
+ <StyledButton
+ icon={<EditRoundedIcon />}
color="primary"
variant="outlined"
- >
- Editar
- </Button>
+ text="Editar"
+ />
</Link>
- <Button
- startIcon={<DeleteRoundedIcon />}
+ <StyledButton
+ icon={<DeleteRoundedIcon />}
color="secondary"
variant="outlined"
onClick={DeleteHandler}
- >
- Deletar
- </Button>
+ text="Deletar"
+ />
</Grid>
</Grid>
<div style={{ height: "1em" }} />
diff --git a/src/Admin/Components/Components/Inputs/EditCollection.js b/src/Admin/Components/Components/Inputs/EditCollection.js
index 26999ce2..25af11cf 100644
--- a/src/Admin/Components/Components/Inputs/EditCollection.js
+++ b/src/Admin/Components/Components/Inputs/EditCollection.js
@@ -18,7 +18,7 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, { useState, useEffect, useContext } from 'react';
//imports material ui components
-import { Typography, TextField, Button, Grid } from '@material-ui/core';
+import { Typography, TextField, Grid } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import CardContent from "@material-ui/core/CardContent";
import CardAction from '@material-ui/core/CardActions';
@@ -33,6 +33,7 @@ import { EditFilter, GetAData } from '../../../Filters';
import { StyledCard } from "../../../Components/Styles/DataCard";
import { Store } from 'Store'
import FormInput from "Components/FormInput.js"
+import StyledButton from '../Button';
//routers
import { Link } from 'react-router-dom';
import ClassicEditor from "@ckeditor/ckeditor5-build-classic"
@@ -195,13 +196,12 @@ const EditCollection = () => {
</Grid>
<Grid item>
<Link style={{ textDecoration: 'none' }} to={'/admin/Collections'}>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
variant='outlined'
color='primary'
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
</Grid>
</Grid>
@@ -256,19 +256,14 @@ const EditCollection = () => {
</CardContent>
<CardAction>
- <Button
- onClick={() => {
- onSubmit();
- }}
+ <StyledButton
variant="contained"
color="primary"
disabled={isLoading}
- startIcon={isLoading ? null : <SaveIcon />}
- >
- {
- isLoading ? <CircularProgress size={24} /> : 'Salvar'
- }
- </Button>
+ icon={isLoading ? null : <SaveIcon />}
+ onClick={onSubmit}
+ text={isLoading ? <CircularProgress size={24} /> : 'Salvar'}
+ />
</CardAction>
</StyledCard>
)
diff --git a/src/Admin/Components/Components/Inputs/EditLanguage.js b/src/Admin/Components/Components/Inputs/EditLanguage.js
index d3d48eef..f90ad3a6 100644
--- a/src/Admin/Components/Components/Inputs/EditLanguage.js
+++ b/src/Admin/Components/Components/Inputs/EditLanguage.js
@@ -30,6 +30,7 @@ import LoadingSpinner from '../../../../Components/LoadingSpinner';
import { StyledCard } from "../../../Components/Styles/DataCard";
import { Store } from 'Store'
import FormInput from "Components/FormInput.js"
+import StyledButton from '../Button';
//imports services
import { getRequest, putRequest, deleteRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { EditFilter, GetAData, DeleteFilter } from '../../../Filters';
@@ -239,22 +240,20 @@ const EditLanguage = () => {
</Typography>
<ButtonGroup>
<Link style={{ textDecoration: 'none' }} to={'/admin/languages'}>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
variant='outlined'
color='primary'
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
- <Button
- startIcon={<DeleteRoundedIcon />}
+ <StyledButton
+ icon={<DeleteRoundedIcon />}
color="secondary"
variant="outlined"
onClick={DeleteHandler}
- >
- Deletar
- </Button>
+ text="Deletar"
+ />
</ButtonGroup>
</Grid>
@@ -280,19 +279,20 @@ const EditLanguage = () => {
</form>
</CardContent>
<CardAction>
- <Button
+ <StyledButton
onClick={() => {
onSubmit();
}}
variant="contained"
color="primary"
disabled={isLoading}
- startIcon={isLoading ? null : <SaveIcon />}
- >
- {
+ icon={isLoading ? null : <SaveIcon />}
+ text={
isLoading ? <CircularProgress size={24} /> : 'Salvar'
}
- </Button>
+ >
+
+ </StyledButton>
</CardAction>
</StyledCard>
)
diff --git a/src/Admin/Components/Components/Inputs/IntitutionsInputs.js b/src/Admin/Components/Components/Inputs/IntitutionsInputs.js
index a94c6f70..52bc5cb3 100644
--- a/src/Admin/Components/Components/Inputs/IntitutionsInputs.js
+++ b/src/Admin/Components/Components/Inputs/IntitutionsInputs.js
@@ -30,7 +30,8 @@ import SnackBar from '../../../../Components/SnackbarComponent';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
import { StyledCard } from "../../../Components/Styles/DataCard";
import { Store } from 'Store'
-import FormInput from "Components/FormInput.js"
+import FormInput from "Components/FormInput.js";
+import StyledButton from '../Button';
//imports services
import { putRequest, getRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { EditFilter, GetAData } from '../../../Filters';
@@ -249,13 +250,12 @@ const EditInstitution = () => {
<Grid item>
<Link style={{ textDecoration: 'none' }} to={`/admin/institutions`}>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
color="primary"
variant="outlined"
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
</Grid>
</Grid>
@@ -282,19 +282,16 @@ const EditInstitution = () => {
</form>
</div>
<div>
- <Button
+ <StyledButton
onClick={() => {
onSubmit();
}}
variant="contained"
color="primary"
disabled={isLoading}
- startIcon={isLoading ? null : <SaveIcon />}
- >
- {
- isLoading ? <CircularProgress size={24} /> : 'Salvar'
- }
- </Button>
+ icon={isLoading ? null : <SaveIcon />}
+ text={isLoading ? <CircularProgress size={24} /> : 'Salvar'}
+ />
</div>
</div>
diff --git a/src/Admin/Components/Components/MobileComponents/MobilePageHeader.js b/src/Admin/Components/Components/MobileComponents/MobilePageHeader.js
index fdc09e14..56255c2b 100644
--- a/src/Admin/Components/Components/MobileComponents/MobilePageHeader.js
+++ b/src/Admin/Components/Components/MobileComponents/MobilePageHeader.js
@@ -28,7 +28,7 @@ import { Store } from 'Store'
const MobilePageHeader = (props) => {
const { state } = useContext(Store);
return (
- <Paper style={{marginBottom: "2em", marginTop: "2em", marginLeft: "1em", marginRight: "1em"}}>
+ <Paper style={{ marginBottom: "2em", marginTop: "2em", marginLeft: "1em", marginRight: "1em" }}>
<StyledGrid contrast={state.contrast} container spacing={3} direction="row" alignItems="center">
<Grid item xs={12}>
<Typography variant="h4">{props.title}</Typography>
@@ -41,7 +41,8 @@ const MobilePageHeader = (props) => {
{props.actions.map((act, index) => {
return (
<Grid item key={act.name}>
- <Button
+ <StyledButton
+ contrast={state.contrast}
variant="contained"
color="secondary"
disabled={act.isLoading}
@@ -49,7 +50,7 @@ const MobilePageHeader = (props) => {
startIcon={act.icon}
>
{act.isLoading ? <CircularProgress size={24} /> : act.name}
- </Button>
+ </StyledButton>
</Grid>
)
})}
@@ -66,6 +67,18 @@ const StyledGrid = styled(Grid)`
color: ${props => props.contrast === "" ? "#666" : "white"};
border: 1px solid ${props => props.contrast === "" ? "#666" : "white"};
border-radius: 10px;
+ border-radius: 10px;
+`
+
+const StyledButton = styled(Button)`
+ background-color: ${props => props.contrast === "" ? "" : "black !important"};
+ color: ${props => props.contrast === "" ? "" : "yellow !important"};
+ border: 1px solid ${props => props.contrast === "" ? "" : "white !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
+ :hover {
+ background-color: rgba(255,255,0,0.24) !important;
+ }
`
+
export default MobilePageHeader;
\ No newline at end of file
diff --git a/src/Admin/Pages/Pages/SubPages/Collections.js b/src/Admin/Pages/Pages/SubPages/Collections.js
index 524ee882..bf276295 100644
--- a/src/Admin/Pages/Pages/SubPages/Collections.js
+++ b/src/Admin/Pages/Pages/SubPages/Collections.js
@@ -28,6 +28,7 @@ import MobileList from "../../../Components/Components/MobileComponents/SimpleLi
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
import PageHeader, { StyledFilter } from "../../../Components/Components/PageHeader"
import FormInput from "Components/FormInput.js"
+import StyledButton from '../../../Components/Components/Button';
//imports from material ui
import { makeStyles } from "@material-ui/core/styles";
import TableBody from "@material-ui/core/TableBody";
@@ -420,17 +421,17 @@ const Collections = () => {
{
title: "Deletar",
subtitle:
- <Button
+ <StyledButton
variant="contained"
color="secondary"
onClick={() => {
HandleStateAlertDialog(index);
HandleStateCircularProgress(index);
}}
- startIcon={<DeleteIcon />}
+ icon={<DeleteIcon />}
+ text="Deletar"
>
- Deletar
- </Button>
+ </StyledButton>
}
]
}
diff --git a/src/Admin/Pages/Pages/SubPages/Institutions.js b/src/Admin/Pages/Pages/SubPages/Institutions.js
index b578806d..78984734 100644
--- a/src/Admin/Pages/Pages/SubPages/Institutions.js
+++ b/src/Admin/Pages/Pages/SubPages/Institutions.js
@@ -26,7 +26,8 @@ import MobileList from "../../../Components/Components/MobileComponents/SimpleLi
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
import PageHeader, { StyledFilter } from "../../../Components/Components/PageHeader"
import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from "./Collections.js";
-import { Store } from 'Store'
+import { Store } from 'Store';
+import StyledButton from '../../../Components/Components/Button';
// Imports about icon
import FilterListRoundedIcon from "@material-ui/icons/FilterListRounded";
import AddRoundedIcon from "@material-ui/icons/AddRounded";
@@ -52,10 +53,10 @@ import AccountBalanceRoundedIcon from "@material-ui/icons/AccountBalanceRounded"
const Institutions = () => {
- const { state } = useContext(Store)
+ const { state } = useContext(Store)
- const classesCell = useStylesCell(state);
- const classesRow = useStylesRow(state);
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
const WINDOW_WIDTH = window.innerWidth
const ADD_ONE_LENGHT = [""];
@@ -338,23 +339,23 @@ const Institutions = () => {
{
showFilter &&
<StyledFilter contrast={state.contrast}>
- <Grid item xs={12}>
- <Grid container justify="space-between" spacing={3}>
- {TextFieldOfTheFilter.map((field, index) => (
- <Grid item key={field.label}>
+ <Grid item xs={12}>
+ <Grid container justify="space-between" spacing={3}>
+ {TextFieldOfTheFilter.map((field, index) => (
+ <Grid item key={field.label}>
<FormInput
- contrast={state.contrast}
- id={index}
- placeholder={field.label}
- handleChange={field.onChange}
- onBlur={field.onBlur}
- value={field.value}
- help={field.helperText}
+ contrast={state.contrast}
+ id={index}
+ placeholder={field.label}
+ handleChange={field.onChange}
+ onBlur={field.onBlur}
+ value={field.value}
+ help={field.helperText}
/>
- </Grid>
- ))}
+ </Grid>
+ ))}
+ </Grid>
</Grid>
- </Grid>
</StyledFilter>
}
</MobilePageHeader>
@@ -368,7 +369,7 @@ const Institutions = () => {
key={new Date().toISOString() + row.created_at}
>
<StyledLoadMoreButton
- contrast={state.contrast}
+ contrast={state.contrast}
color="primary"
variant="text"
// disabled={isLoadingMoreItems}
@@ -381,59 +382,58 @@ const Institutions = () => {
{isLoadingMoreItems ? (
<CircularProgress size={24} />
) : (
- "Carregar mais itens"
- )}
+ "Carregar mais itens"
+ )}
</StyledLoadMoreButton>
</StyledDivButton>
) : (
- <>
- <MobileList
- contrast={state.contrast}
- key={new Date().toISOString() + row.created_at}
- title={row.name}
- subtitle={row.id}
- backColor={"#ff7f00"}
- avatar={<AccountBalanceRoundedIcon />}
- href={`/admin/institution?institution=${row.id}`}
- reset={() => {
-
- }}
- data={
- [
- {
- title: "Descrição",
- subtitle: row.description ? row.description : "Sem dado"
-
- },
- {
- title: "Cidade",
- subtitle: row.city ? row.city : "Sem dado"
-
- },
- {
- title: "País",
- subtitle: row.country ? row.country : "Sem dado"
- },
- {
- title: "Deletar",
- subtitle:
- <Button
- variant="contained"
- color="secondary"
- onClick={() => {
- HandleStateAlertDialog(index);
- HandleStateCircularProgress(index);
- }}
- startIcon={<DeleteIcon />}
- >
- Deletar
- </Button>
- }
- ]
- }
- />
- </>
- )
+ <>
+ <MobileList
+ contrast={state.contrast}
+ key={new Date().toISOString() + row.created_at}
+ title={row.name}
+ subtitle={row.id}
+ backColor={"#ff7f00"}
+ avatar={<AccountBalanceRoundedIcon />}
+ href={`/admin/institution?institution=${row.id}`}
+ reset={() => {
+
+ }}
+ data={
+ [
+ {
+ title: "Descrição",
+ subtitle: row.description ? row.description : "Sem dado"
+
+ },
+ {
+ title: "Cidade",
+ subtitle: row.city ? row.city : "Sem dado"
+
+ },
+ {
+ title: "País",
+ subtitle: row.country ? row.country : "Sem dado"
+ },
+ {
+ title: "Deletar",
+ subtitle:
+ <StyledButton
+ variant="contained"
+ color="secondary"
+ onClick={() => {
+ HandleStateAlertDialog(index);
+ HandleStateCircularProgress(index);
+ }}
+ icon={<DeleteIcon />}
+ text="Deletar"
+ />
+ }
+ ]
+ }
+ />
+ </>
+ )
)}
{/************** End of display data in table **************/}
@@ -491,23 +491,23 @@ const Institutions = () => {
{
showFilter &&
<StyledFilter contrast={state.contrast}>
- <Grid item xs={12}>
- <Grid container justify="space-between" spacing={3}>
- {TextFieldOfTheFilter.map((field, index) => (
- <Grid item key={field.label}>
+ <Grid item xs={12}>
+ <Grid container justify="space-between" spacing={3}>
+ {TextFieldOfTheFilter.map((field, index) => (
+ <Grid item key={field.label}>
<FormInput
- contrast={state.contrast}
- id={index}
- placeholder={field.label}
- handleChange={field.onChange}
- onBlur={field.onBlur}
- value={field.value}
- help={field.helperText}
+ contrast={state.contrast}
+ id={index}
+ placeholder={field.label}
+ handleChange={field.onChange}
+ onBlur={field.onBlur}
+ value={field.value}
+ help={field.helperText}
/>
- </Grid>
- ))}
+ </Grid>
+ ))}
+ </Grid>
</Grid>
- </Grid>
</StyledFilter>
}
</PageHeader>
@@ -529,52 +529,52 @@ const Institutions = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
- style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
+ style={state.contrast === "" ? { width: "100%" } : { width: "100%", color: "yellow", textDecoration: "underline yellow" }}
>
{isLoadingMoreItems ? (
<CircularProgress size={24} />
) : (
- "Carregar mais itens"
- )}
+ "Carregar mais itens"
+ )}
</Button>
</TableCell>
</TableRow>
) : (
- <TableRow className={classesRow.root} key={new Date().toISOString() + index}>
- <TableCell className={classesCell.root} component="th" scope="row">
- {row.id}
- </TableCell>
- <TableCell className={classesCell.root} align="right">{row.name}</TableCell>
- <TableCell className={classesCell.root} align="right">
- {row.description}
- </TableCell>
- <TableCell className={classesCell.root} align="right">{row.city}</TableCell>
- <TableCell className={classesCell.root} align="right">
- {row.country}
- </TableCell>
- <TableCell className={classesCell.root} align="right">
- <Link to={`/admin/institution?institution=${row.id}`}>
- <IconButton>
- <VisibilityIcon style={{ fill: state.contrast === "" ? "#00bcd4" : "yellow" }} />
- </IconButton>
- </Link>
- </TableCell>
- <TableCell className={classesCell.root} align="right">
- {isLoadingToDelete === index ? (
- <CircularProgress size={24} color="primary" />
- ) : (
- <IconButton
- onClick={() => {
- HandleStateAlertDialog(index);
- HandleStateCircularProgress(index);
- }}
- >
- <DeleteIcon style={{ fill: state.contrast === "" ? "#FF0000" : "yellow" }} />
- </IconButton>
- )}
- </TableCell>
- </TableRow>
- )
+ <TableRow className={classesRow.root} key={new Date().toISOString() + index}>
+ <TableCell className={classesCell.root} component="th" scope="row">
+ {row.id}
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">{row.name}</TableCell>
+ <TableCell className={classesCell.root} align="right">
+ {row.description}
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">{row.city}</TableCell>
+ <TableCell className={classesCell.root} align="right">
+ {row.country}
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
+ <Link to={`/admin/institution?institution=${row.id}`}>
+ <IconButton>
+ <VisibilityIcon style={{ fill: state.contrast === "" ? "#00bcd4" : "yellow" }} />
+ </IconButton>
+ </Link>
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
+ {isLoadingToDelete === index ? (
+ <CircularProgress size={24} color="primary" />
+ ) : (
+ <IconButton
+ onClick={() => {
+ HandleStateAlertDialog(index);
+ HandleStateCircularProgress(index);
+ }}
+ >
+ <DeleteIcon style={{ fill: state.contrast === "" ? "#FF0000" : "yellow" }} />
+ </IconButton>
+ )}
+ </TableCell>
+ </TableRow>
+ )
)}
</TableBody>
</TableData>
diff --git a/src/Admin/Pages/Pages/SubPages/Languages.js b/src/Admin/Pages/Pages/SubPages/Languages.js
index a82e0d0d..02192640 100644
--- a/src/Admin/Pages/Pages/SubPages/Languages.js
+++ b/src/Admin/Pages/Pages/SubPages/Languages.js
@@ -30,6 +30,7 @@ import MobilePageHeader from "../../../Components/Components/MobileComponents/Mo
import PageHeader from "../../../Components/Components/PageHeader"
import { Store } from 'Store'
import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from './Collections';
+import StyledButton from '../../../Components/Components/Button';
//imports from material ui
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
@@ -47,10 +48,10 @@ import LanguageRoundedIcon from "@material-ui/icons/LanguageRounded";
const Languages = () => {
- const { state } = useContext(Store)
+ const { state } = useContext(Store)
- const classesCell = useStylesCell(state);
- const classesRow = useStylesRow(state);
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
const ADD_ONE_LENGHT = [""];
const TOP_LABELS = ['ID', 'NOME', 'CODE', 'EDITAR', 'DELETAR'] //Labels from Table
@@ -238,7 +239,7 @@ const Languages = () => {
index === items.length - 1 ? (
<StyledDivButton contrast={state.contrast} key={new Date().toISOString() + row.created_at}>
<StyledLoadMoreButton
- contrast={state.contrast}
+ contrast={state.contrast}
color="primary"
variant="text"
// disabled={isLoadingMoreItems}
@@ -251,49 +252,48 @@ const Languages = () => {
{isLoadingMoreItems ? (
<CircularProgress size={24} />
) : (
- "Carregar mais itens"
- )}
+ "Carregar mais itens"
+ )}
</StyledLoadMoreButton>
</StyledDivButton>
) : (
- <>
- <MobileList
- contrast={state.contrast}
- key={new Date().toISOString() + row.created_at}
- title={row.name}
- subtitle={row.id}
- backColor={"#e81f4f"}
- avatar={<LanguageRoundedIcon />}
- href={`/admin/languageEdit?language=${row.id}`}
- reset={() => {
+ <>
+ <MobileList
+ contrast={state.contrast}
+ key={new Date().toISOString() + row.created_at}
+ title={row.name}
+ subtitle={row.id}
+ backColor={"#e81f4f"}
+ avatar={<LanguageRoundedIcon />}
+ href={`/admin/languageEdit?language=${row.id}`}
+ reset={() => {
- }}
- data={
- [
- {
- title: "Code",
- subtitle: row.code
- },
- {
- title: "Deletar",
- subtitle:
- <Button
- variant="contained"
- color="secondary"
- onClick={() => {
- HandleStateAlertDialog(index);
- HandleStateCircularProgress(index);
- }}
- startIcon={<DeleteRoundedIcon />}
- >
- Deletar
- </Button>
- }
- ]
- }
- />
- </>
- )
+ }}
+ data={
+ [
+ {
+ title: "Code",
+ subtitle: row.code
+ },
+ {
+ title: "Deletar",
+ subtitle:
+ <StyledButton
+ variant="contained"
+ color="secondary"
+ onClick={() => {
+ HandleStateAlertDialog(index);
+ HandleStateCircularProgress(index);
+ }}
+ icon={<DeleteRoundedIcon />}
+ text="Deletar"
+ />
+ }
+ ]
+ }
+ />
+ </>
+ )
)}
</>
);
@@ -356,7 +356,7 @@ const Languages = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
- style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
+ style={state.contrast === "" ? { width: "100%" } : { width: "100%", color: "yellow", textDecoration: "underline yellow" }}
>
{
isLoadingMoreItems ? <CircularProgress size={24} /> : 'Carregar mais itens'
@@ -382,15 +382,15 @@ const Languages = () => {
{isLoadingToDelete === index ? (
<CircularProgress size={24} color="primary" />
) : (
- <IconButton
- onClick={() => {
- HandleStateAlertDialog(index);
- HandleStateCircularProgress(index);
- }}
- >
- <DeleteRoundedIcon style={{ fill: state.contrast === "" ? "#FF0000" : "yellow" }} />
- </IconButton>
- )}
+ <IconButton
+ onClick={() => {
+ HandleStateAlertDialog(index);
+ HandleStateCircularProgress(index);
+ }}
+ >
+ <DeleteRoundedIcon style={{ fill: state.contrast === "" ? "#FF0000" : "yellow" }} />
+ </IconButton>
+ )}
</TableCell>
</TableRow>
))}
--
GitLab
From 923e2505fccb21907642d500875ca19bba84b9be Mon Sep 17 00:00:00 2001
From: Vinicius Gabriel Machado <vgm18@inf.ufpr.br>
Date: Wed, 29 Sep 2021 15:14:46 -0300
Subject: [PATCH 09/15] Contrast in admin buttons
---
src/Admin/Components/Components/Button.js | 76 +++++++++++--------
.../Components/DataCards/ActivityCard.js | 1 -
.../DataCards/CommunityQuestionCard.js | 2 +-
.../DataCards/EducationalObjectsCard.js | 60 ++++++---------
.../Components/DataCards/NoteVarCard.js | 20 +++--
.../Components/DataCards/RatingCard.js | 29 ++++---
.../Components/DataCards/UserCard.js | 73 ++++++++----------
.../Components/Inputs/EditEducationalObect.js | 23 +++---
.../Components/Inputs/EditLanguage.js | 6 +-
.../Components/Inputs/EditRating.js | 21 +++--
.../Components/Components/Inputs/EditRoles.js | 30 ++++----
.../Components/Components/Inputs/EditUser.js | 43 +++++------
.../Components/Inputs/IntitutionsInputs.js | 1 -
.../Components/Inputs/NoteVarInputs.js | 20 +++--
.../Pages/Pages/SubPages/AproveTeacher.js | 59 +++++++-------
.../Pages/Pages/SubPages/BlockedUsers.js | 65 +++++++---------
.../Pages/SubPages/CommunityQuestions.js | 26 +++----
src/Admin/Pages/Pages/SubPages/Complaints.js | 33 +++-----
src/Admin/Pages/Pages/SubPages/Permissions.js | 30 ++++----
src/Admin/Pages/Pages/SubPages/Users.js | 39 ++++++----
20 files changed, 314 insertions(+), 343 deletions(-)
diff --git a/src/Admin/Components/Components/Button.js b/src/Admin/Components/Components/Button.js
index ac542554..dd2aedd0 100644
--- a/src/Admin/Components/Components/Button.js
+++ b/src/Admin/Components/Components/Button.js
@@ -5,42 +5,52 @@ import { Store } from 'Store';
function ButtonComponent({ text, color, icon, variant, onClick, disabled }) {
- const { state } = useContext(Store);
+ const { state } = useContext(Store);
- if (state.contrast === "") {
- return (
- <Button
- startIcon={icon}
- color={color}
- variant={variant}
- onClick={onClick}
- disabled={disabled}
- >
- {text}
- </Button>
- )
- }
- else {
- return (
- <ContrastButton
- startIcon={icon}
- onClick={onClick}
- disabled={disabled}
- >
- {text}
- </ContrastButton>
- );
- }
+ if (state.contrast === "") {
+ return (
+ <Button
+ startIcon={icon}
+ color={color}
+ variant={variant}
+ onClick={onClick}
+ disabled={disabled}
+ style={{margin: "5px"}}
+ >
+ {text}
+ </Button>
+ )
+ }
+ else {
+ return (
+ <ContrastButton
+ startIcon={icon}
+ onClick={onClick}
+ variant={variant}
+ disabled={disabled}
+ >
+ {text}
+ </ContrastButton>
+ );
+ }
}
const ContrastButton = styled(Button)`
- background-color: black !important;
- border: 1px solid white !important;
- color: yellow !important;
- text-decoration: underline !important;
- :hover {
- background-color: rgba(255,255,0,0.24) !important;
- }
- `
+ background-color: black !important;
+ border: 1px solid white !important;
+ color: yellow !important;
+ text-decoration: underline !important;
+ :hover {
+ background-color: rgba(255,255,0,0.24) !important;
+ }
+ :disabled {
+ color: white !important;
+ text-decoration: none !important;
+ }
+ svg {
+ fill: white !important;
+ }
+ margin: 5px !important;
+`
export default ButtonComponent
diff --git a/src/Admin/Components/Components/DataCards/ActivityCard.js b/src/Admin/Components/Components/DataCards/ActivityCard.js
index be4ef88c..3a0e6985 100644
--- a/src/Admin/Components/Components/DataCards/ActivityCard.js
+++ b/src/Admin/Components/Components/DataCards/ActivityCard.js
@@ -21,7 +21,6 @@ import moment from 'moment';
// Maerial ui components
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
-import Button from "@material-ui/core/Button";
import ListRoundedIcon from "@material-ui/icons/ListRounded";
import { useStyles, StyledCard } from "../../Styles/DataCard";
import Grid from "@material-ui/core/Grid";
diff --git a/src/Admin/Components/Components/DataCards/CommunityQuestionCard.js b/src/Admin/Components/Components/DataCards/CommunityQuestionCard.js
index b9b368d0..e0d1cb4e 100644
--- a/src/Admin/Components/Components/DataCards/CommunityQuestionCard.js
+++ b/src/Admin/Components/Components/DataCards/CommunityQuestionCard.js
@@ -91,7 +91,7 @@ const CommunityQuestions = () => {
<StyledButton
variant='text'
color='inherit'
- icon={<EmailRoundedIcon style={{ color: state.contrast === "" ? "" : "white" }} />}
+ icon={<EmailRoundedIcon style={{ color: state.contrast === "" ? "#666" : "white" }} />}
text={item.email}
>
</StyledButton>
diff --git a/src/Admin/Components/Components/DataCards/EducationalObjectsCard.js b/src/Admin/Components/Components/DataCards/EducationalObjectsCard.js
index 8108385e..ec634293 100644
--- a/src/Admin/Components/Components/DataCards/EducationalObjectsCard.js
+++ b/src/Admin/Components/Components/DataCards/EducationalObjectsCard.js
@@ -22,7 +22,6 @@ import moment from "moment";
import Paper from "@material-ui/core/Paper";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
-import Button from "@material-ui/core/Button";
import ListRoundedIcon from "@material-ui/icons/ListRounded";
import VisibilityIcon from "@material-ui/icons/Visibility";
import EditRoundedIcon from "@material-ui/icons/EditRounded";
@@ -31,7 +30,7 @@ import DeleteRoundedIcon from "@material-ui/icons/DeleteRounded";
//imports from local files
import { GetAData, DeleteFilter } from "../../../Filters";
import { Link, useHistory } from "react-router-dom";
-import { apiUrl, apiDomain } from "../../../../env";
+import { apiDomain } from "../../../../env";
import { Grid } from "@material-ui/core";
import LoadingSpinner from "../../../../Components/LoadingSpinner";
import {
@@ -39,6 +38,7 @@ import {
deleteRequest,
} from "../../../../Components/HelperFunctions/getAxiosConfig";
import SnackBar from "../../../../Components/SnackbarComponent";
+import StyledButton from '../Button';
import { Store } from 'Store'
@@ -249,53 +249,43 @@ const CommunityQuestions = () => {
style={{ textDecoration: "none" }}
to={`/admin/learningObjects`}
>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
color="primary"
variant="outlined"
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
- <Button
- startIcon={<VisibilityIcon />}
- color="primary"
- variant="outlined"
+ <Link
+ style={{ textDecoration: "none" }}
+ to={"/recurso/" + id}
>
- <a
- style={{ textDecoration: "none" }}
- rel="noreferrer"
- target="_blank"
- href={
- apiUrl +
- "/learning_objects/" +
- id +
- "/download"
- }
- >
- Ver recurso
- </a>
- </Button>
+ <StyledButton
+ icon={<VisibilityIcon />}
+ color="primary"
+ variant="outlined"
+ text="Ver recurso"
+ />
+ </Link>
+
<Link
style={{ textDecoration: "none" }}
to={`/admin/learningObjectEdit?learnObj=${item.id}`}
>
- <Button
- startIcon={<EditRoundedIcon />}
+ <StyledButton
+ icon={<EditRoundedIcon />}
color="primary"
variant="outlined"
- >
- Editar
- </Button>
+ text="Editar"
+ />
</Link>
- <Button
- startIcon={<DeleteRoundedIcon />}
+ <StyledButton
+ icon={<DeleteRoundedIcon />}
color="secondary"
variant="outlined"
onClick={DeleteHandler}
- >
- Deletar
- </Button>
+ text="Deletar"
+ />
</Grid>
</Grid>
<div style={{ height: "1em" }} />
diff --git a/src/Admin/Components/Components/DataCards/NoteVarCard.js b/src/Admin/Components/Components/DataCards/NoteVarCard.js
index 95d77f98..d179bdeb 100644
--- a/src/Admin/Components/Components/DataCards/NoteVarCard.js
+++ b/src/Admin/Components/Components/DataCards/NoteVarCard.js
@@ -21,7 +21,6 @@ import moment from 'moment';
// Maerial ui components
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
-import Button from "@material-ui/core/Button";
import ListRoundedIcon from "@material-ui/icons/ListRounded";
import Grid from "@material-ui/core/Grid";
import { useStyles, StyledCard } from "../../Styles/DataCard";
@@ -32,6 +31,7 @@ import { GetAData } from "../../../Filters";
import { getRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { Link } from 'react-router-dom';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
+import StyledButton from '../Button';
import { Store } from 'Store'
@@ -112,23 +112,21 @@ const NoteCard = () => {
</Grid>
<Grid item>
<Link style={{ textDecoration: 'none' }} to={`/admin/noteVars`}>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
color="primary"
variant="outlined"
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
<Link style={{ textDecoration: 'none' }} to={`/admin/noteVarEdit?id=${item.id}`}>
- <Button
- startIcon={<EditRoundedIcon />}
+ <StyledButton
+ icon={<EditRoundedIcon />}
color="primary"
variant="outlined"
- >
- Editar
- </Button>
+ text="Editar"
+ />
</Link>
</Grid>
</Grid>
diff --git a/src/Admin/Components/Components/DataCards/RatingCard.js b/src/Admin/Components/Components/DataCards/RatingCard.js
index efe96c2d..c103f58c 100644
--- a/src/Admin/Components/Components/DataCards/RatingCard.js
+++ b/src/Admin/Components/Components/DataCards/RatingCard.js
@@ -21,7 +21,6 @@ import moment from 'moment';
// Maerial ui components
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
-import Button from "@material-ui/core/Button";
import ListRoundedIcon from "@material-ui/icons/ListRounded";
import Grid from "@material-ui/core/Grid";
import { useStyles, StyledCard } from "../../Styles/DataCard";
@@ -34,6 +33,7 @@ import { getRequest, deleteRequest } from '../../../../Components/HelperFunction
import { Link, useHistory } from 'react-router-dom';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
import SnackBar from '../../../../Components/SnackbarComponent';
+import StyledButton from '../Button';
import { Store } from 'Store'
@@ -161,33 +161,30 @@ const RatingCard = () => {
</Grid>
<Grid item>
<Link style={{ textDecoration: 'none' }} to={`/admin/Ratings`}>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
color="primary"
variant="outlined"
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
<Link style={{ textDecoration: 'none' }} to={`/admin/EditRating?rating=${item.id}`}>
- <Button
- startIcon={<EditRoundedIcon />}
+ <StyledButton
+ icon={<EditRoundedIcon />}
color="primary"
variant="outlined"
- >
- Editar
- </Button>
+ text="Editar"
+ />
</Link>
- <Button
- startIcon={<DeleteRoundedIcon />}
+ <StyledButton
+ icon={<DeleteRoundedIcon />}
color="secondary"
variant="outlined"
onClick={DeleteHandler}
- >
- Deletar
- </Button>
+ text="Deletar"
+ />
</Grid>
</Grid>
<div style={{ height: "1em" }} />
diff --git a/src/Admin/Components/Components/DataCards/UserCard.js b/src/Admin/Components/Components/DataCards/UserCard.js
index 203b45cb..0799b4fd 100644
--- a/src/Admin/Components/Components/DataCards/UserCard.js
+++ b/src/Admin/Components/Components/DataCards/UserCard.js
@@ -21,7 +21,6 @@ import moment from 'moment';
// Maerial ui components
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
-import Button from "@material-ui/core/Button";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";
import RemoveCircleOutlineRoundedIcon from '@material-ui/icons/RemoveCircleOutlineRounded';
@@ -41,6 +40,7 @@ import LoadingSpinner from '../../../../Components/LoadingSpinner';
import SnackBar from '../../../../Components/SnackbarComponent';
import { getRequest, postRequest, deleteRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { Store } from 'Store'
+import StyledButton from '../Button';
//styles
import styled from 'styled-components';
//Image Import
@@ -241,15 +241,14 @@ const CollectionCard = () => {
const actionsForBlockedUser = (stateb) => {
if (stateb === "blocked" || stateb === "banished") {
return (
- <Button
+ <StyledButton
style={{ width: "100%", marginBottom: "0.5em" }}
variant="contained"
color="secondary"
- startIcon={<RemoveCircleOutlineRoundedIcon />}
+ icon={<RemoveCircleOutlineRoundedIcon />}
onClick={() => ReactiveUser()}
- >
- Desbloquear
- </Button>
+ text="Desbloquear"
+ />
)
}
return (
@@ -264,36 +263,34 @@ const CollectionCard = () => {
return (
<Grid container direction="row" spacing={1}>
<Grid item>
- <Button
+ <StyledButton
variant="contained"
color="secondary"
style={{ width: "100%" }}
disabled={
item.submitter_request === "requested" ? false : true
}
- startIcon={
+ icon={
<CloseRoundedIcon style={{ fill: "#FFFAFA" }} />
}
onClick={() => { handleReject(item.id, item.name) }}
- >
- Recusar
- </Button>
+ text="Recusar"
+ />
</Grid>
<Grid item>
- <Button
+ <StyledButton
variant="contained"
color="primary"
style={{ width: "100%" }}
disabled={
item.submitter_request === "requested" ? false : true
}
- startIcon={
+ icon={
<CheckRoundedIcon style={{ fill: "#FFFAFA" }} />
}
onClick={() => { handleAprove(item.id, item.name) }}
- >
- Aceitar
- </Button>
+ text="Aceitar"
+ />
</Grid>
</Grid>
)
@@ -381,34 +378,31 @@ const CollectionCard = () => {
style={{ textDecoration: "none" }}
to={`/admin/usersList`}
>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
color="primary"
variant="outlined"
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
</Grid>
<Grid item>
- <Button
- startIcon={<DeleteRoundedIcon />}
+ <StyledButton
+ icon={<DeleteRoundedIcon />}
color="secondary"
variant="outlined"
onClick={() => { deleteUser(item.id) }}
- >
- Deletar
- </Button>
+ text="Deletar"
+ />
</Grid>
<Grid item>
<Link to={`/admin/EditUser?id=${item.id}`} style={{ textDecoration: "none" }}>
- <Button
- startIcon={<EditRoundedIcon />}
+ <StyledButton
+ icon={<EditRoundedIcon />}
color="primary"
variant="outlined"
- >
- Editar
- </Button>
+ text="Editar"
+ />
</Link>
</Grid>
</Grid>
@@ -436,15 +430,14 @@ const CollectionCard = () => {
</Typography>
{
item.email ?
- <Link to={`/admin/sendEmail?email=${item.email}`} style={state.contrast === "" ? {textDecoration: "none"} : {textDecoration: "yellow underline", color: "yellow"}}>
- <Button
- variant='text'
- color='inherit'
- startIcon={<EmailRoundedIcon style={{color: state.contrast === "" ? "" : "white"}}/>}
- >
- {item.email}
- </Button>
- </Link> : null
+ <Link to={`/admin/sendEmail?email=${item.email}`} style={{ textDecoration: 'none' }}>
+ <StyledButton
+ variant='text'
+ color='primary'
+ icon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
+ text={item.email}
+ />
+ </Link> : null
}
</div>
<div className={classes.displayColumn}>
diff --git a/src/Admin/Components/Components/Inputs/EditEducationalObect.js b/src/Admin/Components/Components/Inputs/EditEducationalObect.js
index a8e5be6c..a129b7b6 100644
--- a/src/Admin/Components/Components/Inputs/EditEducationalObect.js
+++ b/src/Admin/Components/Components/Inputs/EditEducationalObect.js
@@ -21,7 +21,7 @@ import PropTypes from "prop-types";
import SwipeableViews from "react-swipeable-views";
import moment from "moment";
//imports material ui components
-import { Typography, TextField, Button, Grid } from "@material-ui/core";
+import { Typography, TextField, Grid } from "@material-ui/core";
import CircularProgress from "@material-ui/core/CircularProgress";
import CardContent from "@material-ui/core/CardContent";
import CardAction from "@material-ui/core/CardActions";
@@ -44,6 +44,7 @@ import { EditFilter } from "../../../Filters";
import { StyledCard } from "../../../Components/Styles/DataCard";
import { Store } from 'Store'
import FormInput from "Components/FormInput.js"
+import StyledButton from '../Button';
//routers
import { Link } from "react-router-dom";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic"
@@ -454,13 +455,12 @@ const EditEducationalObject = () => {
style={{ textDecoration: "none" }}
to={"/admin/learningObjects"}
>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
variant="outlined"
color="primary"
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
</Grid>
</Grid>
@@ -591,17 +591,18 @@ const EditEducationalObject = () => {
</CardContent>
<CardAction>
- <Button
+ <StyledButton
onClick={() => {
onSubmit();
}}
variant="contained"
color="primary"
disabled={isLoading}
- startIcon={isLoading ? null : <SaveIcon />}
- >
- {isLoading ? <CircularProgress size={24} /> : "Salvar"}
- </Button>
+ icon={isLoading ? null : <SaveIcon />}
+ text={
+ isLoading ? <CircularProgress size={24} /> : 'Salvar'
+ }
+ />
</CardAction>
</StyledCard>
);
diff --git a/src/Admin/Components/Components/Inputs/EditLanguage.js b/src/Admin/Components/Components/Inputs/EditLanguage.js
index f90ad3a6..cbb3204f 100644
--- a/src/Admin/Components/Components/Inputs/EditLanguage.js
+++ b/src/Admin/Components/Components/Inputs/EditLanguage.js
@@ -18,7 +18,7 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, { useState, useEffect, useContext } from 'react';
//imports material ui components
-import { Typography, Button, Grid, ButtonGroup } from '@material-ui/core';
+import { Typography, Grid, ButtonGroup } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import CardContent from "@material-ui/core/CardContent";
import CardAction from '@material-ui/core/CardActions';
@@ -290,9 +290,7 @@ const EditLanguage = () => {
text={
isLoading ? <CircularProgress size={24} /> : 'Salvar'
}
- >
-
- </StyledButton>
+ />
</CardAction>
</StyledCard>
)
diff --git a/src/Admin/Components/Components/Inputs/EditRating.js b/src/Admin/Components/Components/Inputs/EditRating.js
index 7a585baa..9133c7a5 100644
--- a/src/Admin/Components/Components/Inputs/EditRating.js
+++ b/src/Admin/Components/Components/Inputs/EditRating.js
@@ -18,7 +18,7 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, { useState, useEffect, useContext } from 'react';
//imports material ui components
-import { Typography, Button, Grid } from '@material-ui/core';
+import { Typography, Grid } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import CardContent from "@material-ui/core/CardContent";
import CardAction from '@material-ui/core/CardActions';
@@ -30,6 +30,7 @@ import LoadingSpinner from '../../../../Components/LoadingSpinner';
import { StyledCard } from "../../../Components/Styles/DataCard";
import { Store } from 'Store'
import FormInput from "Components/FormInput.js"
+import StyledButton from '../Button';
//imports services
import { getRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { EditFilter, GetAData } from '../../../Filters';
@@ -220,13 +221,12 @@ const EditRating = () => {
</Grid>
<Grid item>
<Link style={{ textDecoration: 'none' }} to={'/admin/Ratings'}>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
variant='outlined'
color='primary'
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
</Grid>
</Grid>
@@ -253,19 +253,18 @@ const EditRating = () => {
</form>
</CardContent>
<CardAction>
- <Button
+ <StyledButton
onClick={() => {
onSubmit();
}}
variant="contained"
color="primary"
disabled={isLoading}
- startIcon={isLoading ? null : <SaveIcon />}
- >
- {
+ icon={isLoading ? null : <SaveIcon />}
+ text={
isLoading ? <CircularProgress size={24} /> : 'Salvar'
}
- </Button>
+ />
</CardAction>
</StyledCard>
)
diff --git a/src/Admin/Components/Components/Inputs/EditRoles.js b/src/Admin/Components/Components/Inputs/EditRoles.js
index be2e1688..d7ceb5bd 100644
--- a/src/Admin/Components/Components/Inputs/EditRoles.js
+++ b/src/Admin/Components/Components/Inputs/EditRoles.js
@@ -18,7 +18,7 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, { useState, useEffect, useContext } from 'react';
//imports material ui components
-import { Typography, Button, Grid } from '@material-ui/core';
+import { Typography, Grid } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import CardContent from "@material-ui/core/CardContent";
import CardAction from '@material-ui/core/CardActions';
@@ -32,6 +32,7 @@ import LoadingSpinner from '../../../../Components/LoadingSpinner';
import { StyledCard } from "../../../Components/Styles/DataCard";
import { Store } from 'Store'
import FormInput from "Components/FormInput.js"
+import StyledButton from '../Button';
//imports services
import { getRequest, putRequest, deleteRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { EditFilter, GetAData, DeleteFilter } from '../../../Filters';
@@ -233,22 +234,20 @@ const EditLanguage = () => {
</Typography>
<ButtonGroup>
<Link style={{ textDecoration: 'none' }} to={'/admin/permissions'}>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
variant='outlined'
color='primary'
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
- <Button
- startIcon={<DeleteRoundedIcon />}
+ <StyledButton
+ icon={<DeleteRoundedIcon />}
color="secondary"
variant="outlined"
onClick={DeleteHandler}
- >
- Deletar
- </Button>
+ text="Deletar"
+ />
</ButtonGroup>
</Grid>
@@ -274,19 +273,18 @@ const EditLanguage = () => {
</form>
</CardContent>
<CardAction>
- <Button
+ <StyledButton
onClick={() => {
onSubmit();
}}
variant="contained"
color="primary"
disabled={isLoading}
- startIcon={isLoading ? null : <SaveIcon />}
- >
- {
+ icon={isLoading ? null : <SaveIcon />}
+ text={
isLoading ? <CircularProgress size={24} /> : 'Salvar'
}
- </Button>
+ />
</CardAction>
</StyledCard>
)
diff --git a/src/Admin/Components/Components/Inputs/EditUser.js b/src/Admin/Components/Components/Inputs/EditUser.js
index b3225b0a..a13fdb06 100644
--- a/src/Admin/Components/Components/Inputs/EditUser.js
+++ b/src/Admin/Components/Components/Inputs/EditUser.js
@@ -18,7 +18,7 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, { useState, useEffect, useContext } from 'react';
//imports material ui components
-import { Typography, TextField, Button, Grid } from '@material-ui/core';
+import { Typography, TextField, Grid } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import CardContent from "@material-ui/core/CardContent";
import CardAction from '@material-ui/core/CardActions';
@@ -37,6 +37,7 @@ import LoadingSpinner from '../../../../Components/LoadingSpinner';
import { StyledCard } from "../../../Components/Styles/DataCard";
import { Store } from 'Store'
import FormInput from "Components/FormInput.js"
+import StyledButton from '../Button';
//imports services
import { getRequest, putRequest, deleteRequest, postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { EditFilter, GetAData } from '../../../Filters';
@@ -495,26 +496,24 @@ const EditUser = () => {
<Grid container direction="row">
<Grid item>
<Link style={{ textDecoration: 'none' }} to={'/admin/usersList'}>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
variant='outlined'
color='primary'
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
</Grid>
{
id !== "-1" ?
<Grid item>
- <Button
- startIcon={<DeleteRoundedIcon />}
+ <StyledButton
+ icon={<DeleteRoundedIcon />}
color="secondary"
variant="outlined"
onClick={() => { deleteUser(id) }}
- >
- Deletar
- </Button>
+ text="Deletar"
+ />
</Grid> : null
}
</Grid>
@@ -580,33 +579,27 @@ const EditUser = () => {
<CardAction>
{
id !== "-1" ?
- <Button
+ <StyledButton
onClick={() => {
onSubmit();
}}
variant="contained"
color="primary"
disabled={isLoading}
- startIcon={isLoading ? null : <SaveIcon />}
- >
- {
- isLoading ? <CircularProgress size={24} /> : 'Salvar'
- }
- </Button>
+ icon={isLoading ? null : <SaveIcon />}
+ text={isLoading ? <CircularProgress size={24} /> : 'Salvar'}
+ />
:
- <Button
+ <StyledButton
onClick={() => {
onCreate();
}}
variant="contained"
color="primary"
disabled={isLoading}
- startIcon={isLoading ? null : <AddRoundedIcon />}
- >
- {
- isLoading ? <CircularProgress size={24} /> : 'Criar'
- }
- </Button>
+ icon={isLoading ? null : <AddRoundedIcon />}
+ text={isLoading ? <CircularProgress size={24} /> : 'Criar'}
+ />
}
</CardAction>
</StyledCard>
diff --git a/src/Admin/Components/Components/Inputs/IntitutionsInputs.js b/src/Admin/Components/Components/Inputs/IntitutionsInputs.js
index 52bc5cb3..eacbd7f0 100644
--- a/src/Admin/Components/Components/Inputs/IntitutionsInputs.js
+++ b/src/Admin/Components/Components/Inputs/IntitutionsInputs.js
@@ -18,7 +18,6 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, { useState, useEffect, useContext } from 'react';
//imports material ui components
-import { Button } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import SaveIcon from '@material-ui/icons/Save';
import CardContent from "@material-ui/core/CardContent";
diff --git a/src/Admin/Components/Components/Inputs/NoteVarInputs.js b/src/Admin/Components/Components/Inputs/NoteVarInputs.js
index 1f608305..69ee311e 100644
--- a/src/Admin/Components/Components/Inputs/NoteVarInputs.js
+++ b/src/Admin/Components/Components/Inputs/NoteVarInputs.js
@@ -18,7 +18,6 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, { useState, useEffect, useContext } from 'react';
//imports material ui components
-import { Button } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import SaveIcon from '@material-ui/icons/Save';
import CardContent from "@material-ui/core/CardContent";
@@ -31,6 +30,7 @@ import LoadingSpinner from '../../../../Components/LoadingSpinner';
import { StyledCard } from "../../../Components/Styles/DataCard";
import { Store } from 'Store'
import FormInput from "Components/FormInput.js"
+import StyledButton from '../Button';
//imports services
import { getRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { EditFilter, GetAData } from '../../../Filters';
@@ -254,13 +254,12 @@ const NoteVarInputs = () => {
<Grid>
<Link style={{ textDecoration: 'none' }} to={`/admin/noteVars`}>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
color="primary"
variant="outlined"
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
</Grid>
</Grid>
@@ -284,19 +283,18 @@ const NoteVarInputs = () => {
</form>
<div>
- <Button
+ <StyledButton
onClick={() => {
onSubmit();
}}
variant="contained"
color="primary"
disabled={isLoading}
- startIcon={isLoading ? null : <SaveIcon />}
- >
- {
+ icon={isLoading ? null : <SaveIcon />}
+ text={
isLoading ? <CircularProgress size={24} /> : 'Salvar'
}
- </Button>
+ />
</div>
</CardContent>
diff --git a/src/Admin/Pages/Pages/SubPages/AproveTeacher.js b/src/Admin/Pages/Pages/SubPages/AproveTeacher.js
index afc90e4f..28d4d95e 100644
--- a/src/Admin/Pages/Pages/SubPages/AproveTeacher.js
+++ b/src/Admin/Pages/Pages/SubPages/AproveTeacher.js
@@ -34,6 +34,7 @@ import { apiDomain } from '../../../../env';
import FormInput from "Components/FormInput.js"
import { Store } from 'Store'
import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from "./Collections.js";
+import StyledButton from '../../../Components/Components/Button';
//imports from material ui
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
@@ -494,14 +495,13 @@ const AproveTeacher = () => {
title: "Email",
subtitle: row.email ?
<Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
- <Button
+ <StyledButton
variant='text'
color='primary'
style={state.contrast === "" ? {} : {color: "yellow", textDecoration: "underline yellow"}}
- startIcon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
- >
- {row.email}
- </Button>
+ icon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
+ text={row.email}
+ />
</Link> : null
},
@@ -516,38 +516,36 @@ const AproveTeacher = () => {
{
title: "Ações rápidas",
subtitle: <>
- <Button
+ <StyledButton
variant="contained"
color="secondary"
style={{ width: "100%" }}
disabled={
row.submitter_request === "requested" ? false : true
}
- startIcon={
+ icon={
<CloseRoundedIcon style={{ fill: "#FFFAFA" }} />
}
onClick={() => {
handleReject(row.id, row.name);
}}
- >
- Recusar
- </Button>
- <Button
+ text="Recusar"
+ />
+ <StyledButton
variant="contained"
color="primary"
style={{ width: "100%" }}
disabled={
row.submitter_request === "requested" ? false : true
}
- startIcon={
+ icon={
<CheckRoundedIcon style={{ fill: "#FFFAFA" }} />
}
onClick={() => {
handleAprove(row.id, row.name);
}}
- >
- Aceitar
- </Button>
+ text="Aceitar"
+ />
</>
}
]}
@@ -696,7 +694,18 @@ const AproveTeacher = () => {
{row.name}
</TableCell>
<TableCell className={classesCell.root} align="right">
- {row.email}
+ {
+ row.email ?
+ <Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
+ <StyledButton
+ variant='text'
+ color='primary'
+ style={state.contrast === "" ? {} : {color: "yellow", textDecoration: "underline yellow"}}
+ icon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
+ text={row.email}
+ />
+ </Link> : null
+ }
</TableCell>
<TableCell className={classesCell.root} align="right">
{DisplayDate(row.created_at)}
@@ -709,38 +718,36 @@ const AproveTeacher = () => {
</Link>
</TableCell>
<TableCell className={classesCell.root} align="right">
- <Button
+ <StyledButton
variant="contained"
color="secondary"
style={{ width: "100%" }}
disabled={
row.submitter_request === "requested" ? false : true
}
- startIcon={
+ icon={
<CloseRoundedIcon style={{ fill: "#FFFAFA" }} />
}
onClick={() => {
handleReject(row.id, row.name);
}}
- >
- Recusar
- </Button>
- <Button
+ text="Recusar"
+ />
+ <StyledButton
variant="contained"
color="primary"
style={{ width: "100%" }}
disabled={
row.submitter_request === "requested" ? false : true
}
- startIcon={
+ icon={
<CheckRoundedIcon style={{ fill: "#FFFAFA" }} />
}
onClick={() => {
handleAprove(row.id, row.name);
}}
- >
- Aceitar
- </Button>
+ text="Aceitar"
+ />
</TableCell>
</TableRow>
)
diff --git a/src/Admin/Pages/Pages/SubPages/BlockedUsers.js b/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
index 9cad24d0..005917e1 100644
--- a/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
+++ b/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
@@ -42,6 +42,7 @@ import MobilePageHeader from "../../../Components/Components/MobileComponents/Mo
import PageHeader, { StyledFilter } from "../../../Components/Components/PageHeader"
import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from "./Collections.js";
import { Store } from 'Store'
+import StyledButton from '../../../Components/Components/Button';
//Services
import { getRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { Url } from '../../../Filters';
@@ -337,16 +338,13 @@ const BlockedUsers = () => {
title: "Email",
subtitle: row.email ?
<Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
- <Button
+ <StyledButton
variant='text'
- color='primary'
- style={state.contrast === "" ? {} : {color: "yellow", textDecoration: "underline yellow"}}
- startIcon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
- >
- {row.email}
- </Button>
+ color="primary"
+ icon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
+ text={row.email}
+ />
</Link> : null
-
},
{
title: "Estado",
@@ -354,15 +352,14 @@ const BlockedUsers = () => {
},
{
title: "Ações rápidas",
- subtitle: <Button
+ subtitle: <StyledButton
style={{ width: "100%", marginBottom: "0.5em" }}
variant="contained"
color="secondary"
- startIcon={<RemoveCircleOutlineRoundedIcon />}
+ icon={<RemoveCircleOutlineRoundedIcon />}
onClick={() => ReactiveUser(row.id, index)}
- >
- Desbloquear
- </Button>
+ text="Desbloquear"
+ />
}
]
}
@@ -459,42 +456,38 @@ const BlockedUsers = () => {
</TableCell>
<TableCell className={classesCell.root} align="right">{row.name}</TableCell>
<TableCell className={classesCell.root} align="right">
- {
- row.email ?
- <Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
- <Button
- variant='text'
- color='primary'
- style={state.contrast === "" ? {} : {color: "yellow", textDecoration: "underline yellow"}}
- startIcon={<EmailRoundedIcon style={{ fill: state.contrast === "" ? "#666" : "white" }}/>}
- >
- {row.email}
- </Button>
- </Link> : null
- }
+ {
+ row.email ?
+ <Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
+ <StyledButton
+ variant='text'
+ color="primary"
+ icon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
+ text={row.email}
+ />
+ </Link> : null
+ }
</TableCell>
<TableCell className={classesCell.root} align="right">
{DisplayDate(row.suspended_at)}
</TableCell>
<TableCell className={classesCell.root} align="right">
- <Button
+ <StyledButton
style={{ width: "100%", marginBottom: "0.5em" }}
variant="contained"
color="secondary"
- startIcon={<RemoveCircleOutlineRoundedIcon />}
+ icon={<RemoveCircleOutlineRoundedIcon />}
onClick={() => ReactiveUser(row.id, index)}
- >
- Desbloquear
- </Button>
+ text="Desbloquear"
+ />
<Link to={`/admin/user?id=${row.id}`}>
- <Button
+ <StyledButton
style={{ width: "100%" }}
variant="contained"
color="primary"
- startIcon={<VisibilityIcon />}
- >
- Visualizar
- </Button>
+ icon={<VisibilityIcon />}
+ text="Visualizar"
+ />
</Link>
</TableCell>
</TableRow>
diff --git a/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js b/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js
index 69f9b9c4..ec78c01f 100644
--- a/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js
+++ b/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js
@@ -30,6 +30,7 @@ import PageHeader, { StyledFilter } from "../../../Components/Components/PageHea
import FormInput from "Components/FormInput.js"
import { Store } from 'Store'
import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from "./Collections.js";
+import StyledButton from '../../../Components/Components/Button';
//imports from material ui
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
@@ -480,19 +481,18 @@ const CommunityQuestion = () => {
{row.name}
</TableCell>
<TableCell className={classesCell.root} align="right">
- {
- row.email ?
- <Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
- <Button
- variant='text'
- color='primary'
- style={state.contrast === "" ? {} : {color: "yellow", textDecoration: "underline yellow"}}
- startIcon={<EmailRoundedIcon style={{ fill: state.contrast === "" ? "#666" : "white" }}/>}
- >
- {row.email}
- </Button>
- </Link> : null
- }
+ {
+ row.email ?
+ <Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
+ <StyledButton
+ variant='text'
+ color='primary'
+ style={state.contrast === "" ? {} : {color: "yellow", textDecoration: "underline yellow"}}
+ icon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
+ text={row.email}
+ />
+ </Link> : null
+ }
</TableCell>
<TableCell className={classesCell.root} align="right">
{row.message}
diff --git a/src/Admin/Pages/Pages/SubPages/Complaints.js b/src/Admin/Pages/Pages/SubPages/Complaints.js
index de0eaa44..b323b27f 100644
--- a/src/Admin/Pages/Pages/SubPages/Complaints.js
+++ b/src/Admin/Pages/Pages/SubPages/Complaints.js
@@ -29,6 +29,7 @@ import MobilePageHeader from "../../../Components/Components/MobileComponents/Mo
import PageHeader, { StyledFilter } from "../../../Components/Components/PageHeader"
import FormInput from "Components/FormInput.js"
import { Store } from 'Store'
+import StyledButton from '../../../Components/Components/Button';
import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from "./Collections.js";
//imports from material ui
import TableBody from "@material-ui/core/TableBody";
@@ -613,31 +614,21 @@ const Complaints = () => {
</Link>
</TableCell>
<TableCell className={classesCell.root} align="right">
- <Button
- variant="text"
- secondary={true}
- startIcon={
- <LaunchRoundedIcon style={{ fill: "#FA8072" }} />
- }
- >
- <a
- style={{
- textDecoration: "none",
- color: "#FA8072",
- }}
- target="_blank"
- rel="noreferrer"
- href={
- PORTAL_MEC +
+ <a href={PORTAL_MEC +
convertToLink(
row.complainable_type,
row.complainable_id
- )
- }
+ )}
>
- MEC RED
- </a>
- </Button>
+ <StyledButton
+ variant="text"
+ secondary={true}
+ icon={
+ <LaunchRoundedIcon style={{ fill: "#FA8072" }} />
+ }
+ text="MEC RED"
+ />
+ </a>
</TableCell>
</TableRow>
)
diff --git a/src/Admin/Pages/Pages/SubPages/Permissions.js b/src/Admin/Pages/Pages/SubPages/Permissions.js
index da28aae8..b6a3d9ad 100644
--- a/src/Admin/Pages/Pages/SubPages/Permissions.js
+++ b/src/Admin/Pages/Pages/SubPages/Permissions.js
@@ -25,11 +25,12 @@ import { Url } from '../../../Filters';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
import { DeleteFilter } from '../../../Filters';
import { getRequest, deleteRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
-import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
+import MobileList from "../../../Components/Components/MobileComponents/SimpleList"
import MobilePageHeader from "../../../Components/Components/MobileComponents/MobilePageHeader"
import PageHeader from "../../../Components/Components/PageHeader"
import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from './Collections';
import { Store } from 'Store'
+import StyledButton from '../../../Components/Components/Button';
//imports from material ui
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
@@ -280,17 +281,16 @@ const UserPermissions = () => {
},
{
title: "Ações",
- subtitle: <Button
+ subtitle: <StyledButton
variant="contained"
color="secondary"
onClick={() => {
HandleStateAlertDialog(index)
HandleStateCircularProgress(index)
}}
- startIcon={<DeleteRoundedIcon />}
- >
- Deletar
- </Button>
+ icon={<DeleteRoundedIcon />}
+ text="Deletar"
+ />
},
]
}
@@ -376,20 +376,19 @@ const UserPermissions = () => {
<TableCell className={classesCell.root} align="right">{row.description}</TableCell>
<TableCell className={classesCell.root} align="right">
<Link to={`/admin/EditPermissions?role=${row.id}`}>
- <Button
+ <StyledButton
style={{ width: "100%", marginBottom: "0.5em" }}
variant="contained"
color="primary"
- startIcon={<EditRoundedIcon />}
- >
- Editar
- </Button>
+ icon={<EditRoundedIcon />}
+ text="Editar"
+ />
</Link>
{isLoadingToDelete === index ? (
<CircularProgress size={24} color="primary" />
) : (
- <Button
+ <StyledButton
style={{ width: "100%" }}
variant="contained"
color="secondary"
@@ -397,10 +396,9 @@ const UserPermissions = () => {
HandleStateAlertDialog(index)
HandleStateCircularProgress(index)
}}
- startIcon={<DeleteRoundedIcon />}
- >
- Deletar
- </Button>
+ icon={<DeleteRoundedIcon />}
+ text="Deletar"
+ />
)}
</TableCell>
diff --git a/src/Admin/Pages/Pages/SubPages/Users.js b/src/Admin/Pages/Pages/SubPages/Users.js
index b9ac0df0..25fae4cb 100644
--- a/src/Admin/Pages/Pages/SubPages/Users.js
+++ b/src/Admin/Pages/Pages/SubPages/Users.js
@@ -38,6 +38,7 @@ import PageHeader, { StyledFilter } from "../../../Components/Components/PageHea
import FormInput from "Components/FormInput.js"
import { Store } from 'Store'
import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from './Collections';
+import StyledButton from '../../../Components/Components/Button';
//Services
import { getRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { Url } from '../../../Filters';
@@ -360,14 +361,12 @@ const Users = () => {
title: "Email",
subtitle: row.email ?
<Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
- <Button
+ <StyledButton
variant='text'
color="primary"
- style={state.contrast === "" ? {} : {color: "yellow", textDecoration: "underline yellow"}}
- startIcon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
- >
- {row.email}
- </Button>
+ icon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
+ text={row.email}
+ />
</Link> : null
},
{
@@ -392,14 +391,13 @@ const Users = () => {
},
{
title: "Ações rápidas",
- subtitle: <Button
+ subtitle: <StyledButton
variant="contained"
color="primary"
disabled={isUserPublisher(row.roles)}
onClick={() => { turnUserPublisher(row.roles, row.id) }}
- >
- Tornar publicador
- </Button>
+ text="Tornar publicador"
+ />
}
]}
@@ -516,7 +514,19 @@ const Users = () => {
<TableRow className={classesRow.root} key={new Date().toISOString() + index}>
<TableCell className={classesCell.root} component="th" scope="row">{row.id}</TableCell>
<TableCell className={classesCell.root} align="right">{row.name}</TableCell>
- <TableCell className={classesCell.root} align="right">{row.email ? row.email : ""}</TableCell>
+ <TableCell className={classesCell.root} align="right">
+ {
+ row.email ?
+ <Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
+ <StyledButton
+ variant='text'
+ color="primary"
+ icon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
+ text={row.email}
+ />
+ </Link> : null
+ }
+ </TableCell>
<TableCell className={classesCell.root} align="right">
{DisplayDate(row.created_at)}
</TableCell>
@@ -533,14 +543,13 @@ const Users = () => {
}
</TableCell>
<TableCell className={classesCell.root} align="right">
- <Button
+ <StyledButton
variant="contained"
color="primary"
disabled={isUserPublisher(row.roles)}
onClick={() => { turnUserPublisher(row.roles, row.id) }}
- >
- Tornar publicador
- </Button>
+ text="Tornar publicador"
+ />
</TableCell>
<TableCell className={classesCell.root} align="right">
<Link to={`/admin/user?id=${row.id}`}>
--
GitLab
From 5ddb28042c06e957b777c0176bd3b6084b774fbb Mon Sep 17 00:00:00 2001
From: Vinicius Gabriel Machado <vgm18@inf.ufpr.br>
Date: Wed, 29 Sep 2021 18:08:08 -0300
Subject: [PATCH 10/15] contrast in admin
---
.../Components/DataCards/ComplaintsCard.js | 165 +++++++++---------
.../Components/Inputs/CreateInstitution.js | 23 ++-
.../Components/Inputs/CreateLanguage.js | 23 ++-
.../Components/Inputs/CreateQuestion.js | 23 ++-
.../Components/Inputs/CreateRating.js | 23 ++-
.../Components/Inputs/CreateRole.js | 23 ++-
.../Components/Inputs/EmailInputs.js | 11 +-
src/Admin/Pages/Pages/SubPages/Activity.js | 10 +-
8 files changed, 146 insertions(+), 155 deletions(-)
diff --git a/src/Admin/Components/Components/DataCards/ComplaintsCard.js b/src/Admin/Components/Components/DataCards/ComplaintsCard.js
index 9530abea..9a35bdcd 100644
--- a/src/Admin/Components/Components/DataCards/ComplaintsCard.js
+++ b/src/Admin/Components/Components/DataCards/ComplaintsCard.js
@@ -47,6 +47,7 @@ import LoadingSpinner from '../../../../Components/LoadingSpinner';
import SnackBar from '../../../../Components/SnackbarComponent';
import { getRequest, postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { Store } from 'Store'
+import StyledButton from '../Button';
//styles
const PORTAL_MEC = "https://plataformaintegrada.mec.gov.br/";
@@ -236,9 +237,11 @@ const CollectionCard = () => {
<Button
style={{
width: "100%",
- color: "#FFFAFA",
- backgroundColor: "#FFA07A",
+ color: state.contrast === "" ? "#FFFAFA" : "yellow",
+ backgroundColor: state.contrast === "" ? "#FFA07A" : "black",
fontWeight: "500",
+ border: state.contrast === "" ? "" : "1px solid white",
+ textDecoration: state.contrast === "" ? "none" : "underline yellow"
}}
variant="contained"
onClick={() => {
@@ -252,9 +255,11 @@ const CollectionCard = () => {
<Button
style={{
width: "100%",
- color: "#FFFAFA",
- backgroundColor: "#FA8072",
+ color: state.contrast === "" ? "#FFFAFA" : "yellow",
+ backgroundColor: state.contrast === "" ? "#FA8072" : "black",
fontWeight: "500",
+ border: state.contrast === "" ? "" : "1px solid white",
+ textDecoration: state.contrast === "" ? "none" : "underline yellow"
}}
variant="contained"
onClick={() => {
@@ -268,9 +273,11 @@ const CollectionCard = () => {
<Button
style={{
width: "100%",
- color: "#FFFAFA",
- backgroundColor: "red",
+ color: state.contrast === "" ? "#FFFAFA" : "yellow",
+ backgroundColor: state.contrast === "" ? "red" : "black",
fontWeight: "500",
+ border: state.contrast === "" ? "" : "1px solid white",
+ textDecoration: state.contrast === "" ? "none" : "underline yellow"
}}
variant="contained"
onClick={() => {
@@ -299,20 +306,20 @@ const CollectionCard = () => {
</Typography>
</Grid>
<Grid item>
- <Button
+ <StyledButton
style={{
color: "#FFFAFA",
backgroundColor: "#FA8072",
fontWeight: "500",
}}
+ color="secondary"
variant="contained"
onClick={() => HandleComplainObj("accept")}
- startIcon={
+ icon={
<RemoveRoundedIcon style={{ fill: "#FFFAFA" }} />
}
- >
- Remover
- </Button>
+ text="Remover"
+ />
</Grid>
</Grid>
@@ -334,26 +341,26 @@ const CollectionCard = () => {
</Typography>
</Grid>
<Grid item>
- <Button
+ <StyledButton
style={{
color: "#FFFAFA",
backgroundColor: "#228B22",
fontWeight: "500",
}}
+ color="primary"
variant="contained"
onClick={() => HandleComplainObj("reject")}
- startIcon={
+ icon={
<RestoreRoundedIcon style={{ fill: "#FFFAFA" }} />
}
- >
- Ativar
- </Button>
+ text="Ativar"
+ />
</Grid>
</Grid>
</>
);
default:
- return "Essa denúncia já foi avaliado!";
+ return "Essa denúncia já foi avaliada!";
}
}
@@ -363,73 +370,72 @@ const CollectionCard = () => {
return (
<CardActions>
<Link to={`/admin/user?id=${item.complainable_id}`}>
- <Button
+ <StyledButton
variant="contained"
color="primary"
- startIcon={<VisibilityIcon />}
- >
- Visualizar usuário
- </Button>
+ icon={<VisibilityIcon />}
+ text="Visualizar usuário"
+ />
</Link>
- <Button
- style={{
- fontWeight: "500",
- backgroundColor: "#FA8072"
- }}
- variant="contained"
- startIcon={<LaunchRoundedIcon style={{ fill: "#FFFAFA" }} />}
+
+ <a
+ style={{ textDecoration: "none", color: "#FFFAFA" }}
+ target="_blank"
+ rel="noreferrer"
+ href={
+ PORTAL_MEC +
+ convertToLink(
+ item.complainable_type,
+ item.complainable_id
+ )
+ }
>
- <a
- style={{ textDecoration: "none", color: "#FFFAFA" }}
- target="_blank"
- rel="noreferrer"
- href={
- PORTAL_MEC +
- convertToLink(
- item.complainable_type,
- item.complainable_id
- )
- }
- >
- MEC RED
- </a>
- </Button>
+ <StyledButton
+ style={{
+ fontWeight: "500",
+ backgroundColor: "#FA8072"
+ }}
+ variant="contained"
+ color="secondary"
+ icon={<LaunchRoundedIcon style={{ fill: "#FFFAFA" }} />}
+ text="MEC RED"
+ />
+ </a>
</CardActions>
)
default:
return (
<CardActions>
- <Button
+ <StyledButton
variant="contained"
color="primary"
- startIcon={<GetAppRoundedIcon />}
+ icon={<GetAppRoundedIcon />}
onClick={handleClickOpen('paper')}
+ text="Veja o recurso"
+ />
+ <a
+ style={{ textDecoration: "none", color: "#FFFAFA" }}
+ target="_blank"
+ rel="noreferrer"
+ href={
+ PORTAL_MEC +
+ convertToLink(
+ item.complainable_type,
+ item.complainable_id
+ )
+ }
>
- Veja o recurso
- </Button>
- <Button
- style={{
- fontWeight: "500",
- backgroundColor: "#FA8072"
- }}
- variant="contained"
- startIcon={<LaunchRoundedIcon style={{ fill: "#FFFAFA" }} />}
- >
- <a
- style={{ textDecoration: "none", color: "#FFFAFA" }}
- target="_blank"
- rel="noreferrer"
- href={
- PORTAL_MEC +
- convertToLink(
- item.complainable_type,
- item.complainable_id
- )
- }
- >
- MEC RED
- </a>
- </Button>
+ <StyledButton
+ style={{
+ fontWeight: "500",
+ backgroundColor: "#FA8072"
+ }}
+ variant="contained"
+ color="secondary"
+ icon={<LaunchRoundedIcon style={{ fill: "#FFFAFA" }} />}
+ text="MEC RED"
+ />
+ </a>
</CardActions>
)
}
@@ -697,13 +703,12 @@ const CollectionCard = () => {
style={{ textDecoration: "none" }}
to={`/admin/complaints`}
>
- <Button
- startIcon={<ListRoundedIcon />}
+ <StyledButton
+ icon={<ListRoundedIcon />}
color="primary"
variant="outlined"
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
</Grid>
</Grid>
@@ -850,9 +855,11 @@ const CollectionCard = () => {
</DialogContentText>
</DialogContent>
<DialogActions>
- <Button onClick={handleClose} color="primary">
- Fechar
- </Button>
+ <StyledButton
+ color="primary"
+ onClick={handleClose}
+ text="Fechar"
+ />
</DialogActions>
</Dialog>
</Grid>
diff --git a/src/Admin/Components/Components/Inputs/CreateInstitution.js b/src/Admin/Components/Components/Inputs/CreateInstitution.js
index 2ff90b68..e3979c65 100644
--- a/src/Admin/Components/Components/Inputs/CreateInstitution.js
+++ b/src/Admin/Components/Components/Inputs/CreateInstitution.js
@@ -20,7 +20,7 @@ import React, { useState, useContext } from 'react';
//imports material ui componets
import CardContent from "@material-ui/core/CardContent";
import CardAction from '@material-ui/core/CardActions';
-import { Typography, Button, Grid } from '@material-ui/core';
+import { Typography, Grid } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import AddRoundedIcon from '@material-ui/icons/AddRounded';
import ListRoundedIcon from '@material-ui/icons/ListRounded';
@@ -30,6 +30,7 @@ import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConf
import { StyledCard } from "../../../Components/Styles/DataCard";
import { Store } from 'Store'
import FormInput from "Components/FormInput.js"
+import StyledButton from '../Button';
//router
import { Link } from 'react-router-dom';
@@ -210,14 +211,13 @@ const CreateInstitution = (props) => {
</Grid>
<Grid item>
<Link style={{ textDecoration: 'none' }} to={'/admin/institutions'}>
- <Button
+ <StyledButton
onClick={props.BackToList}
- startIcon={<ListRoundedIcon />}
+ icon={<ListRoundedIcon />}
variant='outlined'
color='primary'
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
</Grid>
</Grid>
@@ -243,19 +243,16 @@ const CreateInstitution = (props) => {
</form>
</CardContent>
<CardAction>
- <Button
+ <StyledButton
onClick={() => {
onSubmit();
}}
variant="contained"
color="primary"
disabled={isLoading}
- startIcon={isLoading ? null : <AddRoundedIcon />}
- >
- {
- isLoading ? <CircularProgress size={24} /> : 'Adicionar'
- }
- </Button>
+ icon={isLoading ? null : <AddRoundedIcon />}
+ text={isLoading ? <CircularProgress size={24} /> : 'Adicionar'}
+ />
</CardAction>
</StyledCard>
);
diff --git a/src/Admin/Components/Components/Inputs/CreateLanguage.js b/src/Admin/Components/Components/Inputs/CreateLanguage.js
index 45764323..5187839e 100644
--- a/src/Admin/Components/Components/Inputs/CreateLanguage.js
+++ b/src/Admin/Components/Components/Inputs/CreateLanguage.js
@@ -20,7 +20,7 @@ import React, { useState, useContext } from 'react';
//imports material ui componets
import CardContent from "@material-ui/core/CardContent";
import CardAction from '@material-ui/core/CardActions';
-import { Typography, Button, Grid } from '@material-ui/core';
+import { Typography, Grid } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import AddRoundedIcon from '@material-ui/icons/AddRounded';
import ListRoundedIcon from '@material-ui/icons/ListRounded';
@@ -30,6 +30,7 @@ import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConf
import { StyledCard } from "../../../Components/Styles/DataCard";
import { Store } from 'Store'
import FormInput from "Components/FormInput.js"
+import StyledButton from '../Button';
//router
import { Link } from 'react-router-dom';
@@ -187,14 +188,13 @@ const CreateLanguage = (props) => {
</Grid>
<Grid item>
<Link to={'/admin/languages'} style={{ textDecoration: 'none' }}>
- <Button
+ <StyledButton
onClick={props.BackToList}
- startIcon={<ListRoundedIcon />}
+ icon={<ListRoundedIcon />}
variant='outlined'
color='primary'
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
</Grid>
</Grid>
@@ -220,19 +220,16 @@ const CreateLanguage = (props) => {
</form>
</CardContent>
<CardAction>
- <Button
+ <StyledButton
onClick={() => {
onSubmit();
}}
variant="contained"
color="primary"
disabled={isLoading}
- startIcon={isLoading ? null : <AddRoundedIcon />}
- >
- {
- isLoading ? <CircularProgress size={24} /> : 'Adicionar'
- }
- </Button>
+ icon={isLoading ? null : <AddRoundedIcon />}
+ text={isLoading ? <CircularProgress size={24} /> : 'Adicionar'}
+ />
</CardAction>
</StyledCard>
)
diff --git a/src/Admin/Components/Components/Inputs/CreateQuestion.js b/src/Admin/Components/Components/Inputs/CreateQuestion.js
index 6bd5b688..af878216 100644
--- a/src/Admin/Components/Components/Inputs/CreateQuestion.js
+++ b/src/Admin/Components/Components/Inputs/CreateQuestion.js
@@ -20,7 +20,7 @@ import React, { useState, useContext } from 'react';
//imports material ui componets
import CardContent from "@material-ui/core/CardContent";
import CardAction from '@material-ui/core/CardActions';
-import { Typography, TextField, Button, Grid } from '@material-ui/core';
+import { Typography, TextField, Grid } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import AddRoundedIcon from '@material-ui/icons/AddRounded';
import MenuItem from "@material-ui/core/MenuItem";
@@ -31,6 +31,7 @@ import SnackBar from '../../../../Components/SnackbarComponent';
import { StyledCard } from "../../../Components/Styles/DataCard";
import { Store } from 'Store'
import FormInput from "Components/FormInput.js"
+import StyledButton from '../Button';
//router
import { Link } from 'react-router-dom';
@@ -172,14 +173,13 @@ const CreateQuestion = (props) => {
</Grid>
<Grid item>
<Link to={'/admin/Questions'} style={{ textDecoration: 'none' }}>
- <Button
+ <StyledButton
onClick={props.BackToList}
- startIcon={<ListRoundedIcon />}
+ icon={<ListRoundedIcon />}
variant='outlined'
color='primary'
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
</Grid>
</Grid>
@@ -226,19 +226,16 @@ const CreateQuestion = (props) => {
</form>
</CardContent>
<CardAction>
- <Button
+ <StyledButton
onClick={() => {
onSubmit();
}}
variant="contained"
color="primary"
disabled={isLoading}
- startIcon={isLoading ? null : <AddRoundedIcon />}
- >
- {
- isLoading ? <CircularProgress size={24} /> : 'Adicionar'
- }
- </Button>
+ icon={isLoading ? null : <AddRoundedIcon />}
+ text={isLoading ? <CircularProgress size={24} /> : 'Adicionar'}
+ />
</CardAction>
</StyledCard>
);
diff --git a/src/Admin/Components/Components/Inputs/CreateRating.js b/src/Admin/Components/Components/Inputs/CreateRating.js
index 0b068c76..41384ba1 100644
--- a/src/Admin/Components/Components/Inputs/CreateRating.js
+++ b/src/Admin/Components/Components/Inputs/CreateRating.js
@@ -20,7 +20,7 @@ import React, { useState, useContext } from 'react';
//imports material ui componets
import CardContent from "@material-ui/core/CardContent";
import CardAction from '@material-ui/core/CardActions';
-import { Typography, Button, Grid } from '@material-ui/core';
+import { Typography, Grid } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import AddRoundedIcon from '@material-ui/icons/AddRounded';
import ListRoundedIcon from '@material-ui/icons/ListRounded';
@@ -29,6 +29,7 @@ import SnackBar from '../../../../Components/SnackbarComponent';
import { StyledCard } from "../../../Components/Styles/DataCard";
import { Store } from 'Store'
import FormInput from "Components/FormInput.js"
+import StyledButton from '../Button';
//imports services
import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
//router
@@ -184,14 +185,13 @@ const CreateRating = (props) => {
</Grid>
<Grid item>
<Link to={'/admin/Ratings'} style={{textDecoration: 'none'}}>
- <Button
+ <StyledButton
onClick={props.BackToList}
- startIcon={<ListRoundedIcon />}
+ icon={<ListRoundedIcon />}
variant='outlined'
color='primary'
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
</Grid>
</Grid>
@@ -217,19 +217,16 @@ const CreateRating = (props) => {
</form>
</CardContent>
<CardAction>
- <Button
+ <StyledButton
onClick={() => {
onSubmit();
}}
variant="contained"
color="primary"
disabled={isLoading}
- startIcon={isLoading ? null : <AddRoundedIcon />}
- >
- {
- isLoading ? <CircularProgress size={24} /> : 'Adicionar'
- }
- </Button>
+ icon={isLoading ? null : <AddRoundedIcon />}
+ text={isLoading ? <CircularProgress size={24} /> : 'Adicionar'}
+ />
</CardAction>
</StyledCard>
);
diff --git a/src/Admin/Components/Components/Inputs/CreateRole.js b/src/Admin/Components/Components/Inputs/CreateRole.js
index 8af5f8ad..9018399b 100644
--- a/src/Admin/Components/Components/Inputs/CreateRole.js
+++ b/src/Admin/Components/Components/Inputs/CreateRole.js
@@ -20,7 +20,7 @@ import React, { useState, useContext } from 'react';
//imports material ui componets
import CardContent from "@material-ui/core/CardContent";
import CardAction from '@material-ui/core/CardActions';
-import { Typography, Button, Grid } from '@material-ui/core';
+import { Typography, Grid } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import AddRoundedIcon from '@material-ui/icons/AddRounded';
import ListRoundedIcon from '@material-ui/icons/ListRounded';
@@ -30,6 +30,7 @@ import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConf
import { StyledCard } from "../../../Components/Styles/DataCard";
import { Store } from 'Store'
import FormInput from "Components/FormInput.js"
+import StyledButton from '../Button';
//router
import { Link } from 'react-router-dom';
@@ -177,14 +178,13 @@ const CreateRole = (props) => {
</Grid>
<Grid item>
<Link to={'/admin/permissions'} style={{ textDecoration: 'none' }}>
- <Button
+ <StyledButton
onClick={props.BackToList}
- startIcon={<ListRoundedIcon />}
+ icon={<ListRoundedIcon />}
variant='outlined'
color='primary'
- >
- Listar
- </Button>
+ text="Listar"
+ />
</Link>
</Grid>
</Grid>
@@ -210,19 +210,16 @@ const CreateRole = (props) => {
</form>
</CardContent>
<CardAction>
- <Button
+ <StyledButton
onClick={() => {
onSubmit();
}}
variant="contained"
color="primary"
disabled={isLoading}
- startIcon={isLoading ? null : <AddRoundedIcon />}
- >
- {
- isLoading ? <CircularProgress size={24} /> : 'Adicionar'
- }
- </Button>
+ icon={isLoading ? null : <AddRoundedIcon />}
+ text={isLoading ? <CircularProgress size={24} /> : 'Adicionar'}
+ />
</CardAction>
</StyledCard>
)
diff --git a/src/Admin/Components/Components/Inputs/EmailInputs.js b/src/Admin/Components/Components/Inputs/EmailInputs.js
index 5ef59d34..7ea38af2 100644
--- a/src/Admin/Components/Components/Inputs/EmailInputs.js
+++ b/src/Admin/Components/Components/Inputs/EmailInputs.js
@@ -25,7 +25,6 @@ import FormControlLabel from "@material-ui/core/FormControlLabel";
import CircularProgress from "@material-ui/core/CircularProgress";
import Checkbox from "@material-ui/core/Checkbox";
import SendRoundedIcon from "@material-ui/icons/SendRounded";
-import Button from "@material-ui/core/Button";
import { makeStyles } from '@material-ui/core/styles';
import Chip from '@material-ui/core/Chip';
//imports from local files
@@ -35,6 +34,7 @@ import ClassicEditor from "@ckeditor/ckeditor5-build-classic"
import { CKEditor } from '@ckeditor/ckeditor5-react';
import { Store } from 'Store'
import FormInput from "Components/FormInput.js"
+import StyledButton from '../Button';
const useStyles = makeStyles((theme) => ({
root: {
@@ -489,17 +489,16 @@ const EmailInputs = (props) => {
*/}
<div style={{ marginTop: 18 }}>
- <Button
+ <StyledButton
onClick={() => {
submitRequest();
}}
variant="contained"
disabled={isSending}
color="primary"
- startIcon={<SendRoundedIcon />}
- >
- {isSending ? <CircularProgress size={24} /> : "Enviar"}
- </Button>
+ icon={<SendRoundedIcon />}
+ text={isSending ? <CircularProgress size={24} /> : "Enviar"}
+ />
</div>
</div >
);
diff --git a/src/Admin/Pages/Pages/SubPages/Activity.js b/src/Admin/Pages/Pages/SubPages/Activity.js
index 0fe5f9c1..3c82a90f 100644
--- a/src/Admin/Pages/Pages/SubPages/Activity.js
+++ b/src/Admin/Pages/Pages/SubPages/Activity.js
@@ -25,7 +25,7 @@ import { Url } from "../../../Filters"
import { getRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import LoadingSpinner from '../../../../Components/LoadingSpinner'
import MobilePageHeader from '../../../Components/Components/MobileComponents/MobilePageHeader'
-import PageHeader from '../../../Components/Components/PageHeader'
+import PageHeader, { StyledFilter } from '../../../Components/Components/PageHeader'
import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from "./Collections.js";
//imports from material ui
import TableBody from "@material-ui/core/TableBody"
@@ -203,7 +203,7 @@ const Activity = () => {
]}
>
{showFilter ? (
- <>
+ <StyledFilter contrast={state.contrast}>
<div style={{ alignSelf: "flex-end" }}>
<TextField
@@ -224,7 +224,7 @@ const Activity = () => {
))}
</TextField>
</div>
- </>
+ </StyledFilter>
) : null}
</MobilePageHeader>
@@ -327,7 +327,7 @@ const Activity = () => {
]}
>
{showFilter ? (
- <>
+ <StyledFilter contrast={state.contrast}>
<div style={{ alignSelf: "flex-end" }}>
<TextField
@@ -348,7 +348,7 @@ const Activity = () => {
))}
</TextField>
</div>
- </>
+ </StyledFilter>
) : null}
</PageHeader>
--
GitLab
From c4e2fb3713669365d17c6ac866b922ec4ad16d9b Mon Sep 17 00:00:00 2001
From: Vinicius Gabriel Machado <vgm18@inf.ufpr.br>
Date: Wed, 29 Sep 2021 19:40:22 -0300
Subject: [PATCH 11/15] implementing contrast in admin
---
.../Components/Components/AlertDialog.js | 49 ++++++++++++-------
.../Pages/SubPages/CommunityQuestions.js | 9 ++--
.../Pages/SubPages/EducationalObjects.js | 10 ++--
.../Pages/Pages/SubPages/NoteVariables.js | 2 +-
src/Admin/Pages/Pages/SubPages/Rating.js | 10 ++--
src/Admin/Pages/Pages/SubPages/Users.js | 4 +-
6 files changed, 49 insertions(+), 35 deletions(-)
diff --git a/src/Admin/Components/Components/AlertDialog.js b/src/Admin/Components/Components/AlertDialog.js
index 14861d97..d2a252ad 100644
--- a/src/Admin/Components/Components/AlertDialog.js
+++ b/src/Admin/Components/Components/AlertDialog.js
@@ -15,15 +15,20 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React from 'react';
-import Button from '@material-ui/core/Button';
+import React, { useContext } from 'react';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
+import styled from 'styled-components';
+import { Store } from 'Store'
+import StyledButton from './Button';
const AlertDialog = ( props ) => {
+
+ const { state } = useContext(Store)
+
return (
<div>
<Dialog
@@ -32,25 +37,33 @@ const AlertDialog = ( props ) => {
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
- <DialogTitle id="alert-dialog-title">
- Deseja deletar o dado de id: {props.deleteItem.id}
- </DialogTitle>
- <DialogContent>
- <DialogContentText id="alert-dialog-description">
- Se você deletar essa dado, todas as informações desse dado serão deletas para sempre
- </DialogContentText>
- </DialogContent>
- <DialogActions>
- <Button onClick={props.HandleClose} color="primary">
- Não deletar
- </Button>
- <Button onClick={props.OnDelete} color="secondary" autoFocus>
- Deletar
- </Button>
- </DialogActions>
+ <StyledDiv contrast={state.contrast}>
+ <DialogTitle id="alert-dialog-title">
+ Deseja deletar o dado de id: {props.deleteItem.id}
+ </DialogTitle>
+ <DialogContent>
+ <DialogContentText id="alert-dialog-description">
+ Se você deletar essa dado, todas as informações desse dado serão deletas para sempre
+ </DialogContentText>
+ </DialogContent>
+ <DialogActions>
+ <StyledButton onClick={props.HandleClose} color="primary" text="Não deletar"/>
+ <StyledButton onClick={props.OnDelete} color="secondary" autoFocus text="Deletar"/>
+ </DialogActions>
+ </StyledDiv>
</Dialog>
</div>
);
}
+const StyledDiv = styled.div`
+ background-color: ${props => props.contrast === "" ? "white" : "black"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ border: 1px solid ${props => props.contrast === "" ? "#666" : "white"};
+
+ #alert-dialog-description {
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+`
+
export default AlertDialog;
\ No newline at end of file
diff --git a/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js b/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js
index ec78c01f..b6bd621a 100644
--- a/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js
+++ b/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js
@@ -331,14 +331,13 @@ const CommunityQuestion = () => {
subtitle:
row.email ?
<Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
- <Button
+ <StyledButton
variant='text'
color="primary"
style={state.contrast === "" ? {} : {color: "yellow", textDecoration: "underline yellow"}}
- startIcon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
- >
- {row.email}
- </Button>
+ icon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
+ text={row.email}
+ />
</Link> : null
},
diff --git a/src/Admin/Pages/Pages/SubPages/EducationalObjects.js b/src/Admin/Pages/Pages/SubPages/EducationalObjects.js
index f13b791f..3d720067 100644
--- a/src/Admin/Pages/Pages/SubPages/EducationalObjects.js
+++ b/src/Admin/Pages/Pages/SubPages/EducationalObjects.js
@@ -29,6 +29,7 @@ import PageHeader, { StyledFilter } from "../../../Components/Components/PageHea
import FormInput from "Components/FormInput.js"
import { Store } from 'Store'
import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from './Collections';
+import StyledButton from '../../../Components/Components/Button';
// Imports about icon
import FilterListRoundedIcon from "@material-ui/icons/FilterListRounded";
import AddRoundedIcon from "@material-ui/icons/AddRounded";
@@ -409,17 +410,16 @@ const EducationalObjects = () => {
{
title: "Deletar",
subtitle:
- <Button
+ <StyledButton
variant="contained"
color="secondary"
onClick={() => {
HandleStateAlertDialog(index);
HandleStateCircularProgress(index);
}}
- startIcon={<DeleteIcon />}
- >
- Deletar
- </Button>
+ icon={<DeleteIcon />}
+ text="Deletar"
+ />
}
]
}
diff --git a/src/Admin/Pages/Pages/SubPages/NoteVariables.js b/src/Admin/Pages/Pages/SubPages/NoteVariables.js
index beca23ce..520f826e 100644
--- a/src/Admin/Pages/Pages/SubPages/NoteVariables.js
+++ b/src/Admin/Pages/Pages/SubPages/NoteVariables.js
@@ -211,7 +211,7 @@ const NoteVariables = () => {
},
{
title: "Ativo",
- subtitle: row.active ? <CheckRoundedIcon style={{ fill: '#3CB371' }} /> : <BlockRoundedIcon style={{ fill: '#FA8072' }} />
+ subtitle: row.active ? <CheckRoundedIcon style={{ fill: state.contrast === "" ? "#3CB371" : "white" }} /> : <BlockRoundedIcon style={{ fill: state.contrast === "" ? "#FA8072" : "white" }} />
},
]
}
diff --git a/src/Admin/Pages/Pages/SubPages/Rating.js b/src/Admin/Pages/Pages/SubPages/Rating.js
index 5c2d6189..00a667d9 100644
--- a/src/Admin/Pages/Pages/SubPages/Rating.js
+++ b/src/Admin/Pages/Pages/SubPages/Rating.js
@@ -37,6 +37,7 @@ import MobilePageHeader from "../../../Components/Components/MobileComponents/Mo
import PageHeader from "../../../Components/Components/PageHeader"
import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from './Collections';
import { Store } from 'Store'
+import StyledButton from '../../../Components/Components/Button';
//Services
import AlertDialog from "../../../Components/Components/AlertDialog";
import { Url } from '../../../Filters';
@@ -277,17 +278,16 @@ const Ratings = () => {
{
title: "Deletar",
subtitle:
- <Button
+ <StyledButton
variant="contained"
color="secondary"
onClick={() => {
HandleStateAlertDialog(index);
HandleStateCircularProgress(index);
}}
- startIcon={<DeleteRoundedIcon />}
- >
- Deletar
- </Button>
+ icon={<DeleteRoundedIcon />}
+ text="Deletar"
+ />
}
]
}
diff --git a/src/Admin/Pages/Pages/SubPages/Users.js b/src/Admin/Pages/Pages/SubPages/Users.js
index 25fae4cb..d426d97c 100644
--- a/src/Admin/Pages/Pages/SubPages/Users.js
+++ b/src/Admin/Pages/Pages/SubPages/Users.js
@@ -381,7 +381,9 @@ const Users = () => {
title: "Permissão",
subtitle: row.roles.map((chip) => (
<ChipDiv>
- <Chip label={chip.name} key={chip.id} />
+ <Chip label={chip.name} key={chip.id}
+ style={state.contrast === "" ? {backgroundColor: "#ddd", color: "black"} : {backgroundColor: "black", color: "white", border: "1px solid white"}}
+ />
</ChipDiv>
))
},
--
GitLab
From 544c44bc9d1a894a2e61cdcd3dff7411322fe7dd Mon Sep 17 00:00:00 2001
From: Vinicius Gabriel Machado <vgm18@inf.ufpr.br>
Date: Wed, 29 Sep 2021 22:33:17 -0300
Subject: [PATCH 12/15] contrast in admin
---
.../Components/Inputs/CreateQuestion.js | 19 ++-
.../Components/Inputs/EditCollection.js | 19 ++-
.../Components/Inputs/EditEducationalObect.js | 33 ++--
.../Components/Components/Inputs/EditUser.js | 23 +--
.../Components/Inputs/EmailInputs.js | 19 ++-
src/Admin/Pages/Pages/SubPages/Activity.js | 72 ++++-----
.../Pages/Pages/SubPages/AproveTeacher.js | 71 ++++-----
.../Pages/Pages/SubPages/BlockedUsers.js | 68 +++++----
src/Admin/Pages/Pages/SubPages/Collections.js | 67 +++++----
src/Admin/Pages/Pages/SubPages/Complaints.js | 141 +++++++++---------
src/Components/FormInput.js | 6 +-
11 files changed, 275 insertions(+), 263 deletions(-)
diff --git a/src/Admin/Components/Components/Inputs/CreateQuestion.js b/src/Admin/Components/Components/Inputs/CreateQuestion.js
index af878216..0c4e0369 100644
--- a/src/Admin/Components/Components/Inputs/CreateQuestion.js
+++ b/src/Admin/Components/Components/Inputs/CreateQuestion.js
@@ -20,7 +20,7 @@ import React, { useState, useContext } from 'react';
//imports material ui componets
import CardContent from "@material-ui/core/CardContent";
import CardAction from '@material-ui/core/CardActions';
-import { Typography, TextField, Grid } from '@material-ui/core';
+import { Typography, Grid } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import AddRoundedIcon from '@material-ui/icons/AddRounded';
import MenuItem from "@material-ui/core/MenuItem";
@@ -188,25 +188,24 @@ const CreateQuestion = (props) => {
<form style={{ display: 'flex', flexDirection: 'column' }}>
<>
- <TextField
- select
- label="Status"
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Status"
value={status ? status : ""}
- style={{ width: '250px', marginBottom: '1em' }}
- onChange={handleChange}
- >
- {STATUS_OPTIONS.map((option, index) => (
+ handleChange={handleChange}
+ items={STATUS_OPTIONS.map((option, index) => (
<MenuItem
key={option.value}
value={option.value}
- style={option.value === status ? { color: 'blue' } : { color: 'black' }}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
>
{
option.label
}
</MenuItem>
))}
- </TextField>
+ />
{fields.map((field, index) => (
<FormInput
contrast={state.contrast}
diff --git a/src/Admin/Components/Components/Inputs/EditCollection.js b/src/Admin/Components/Components/Inputs/EditCollection.js
index 25af11cf..b1fdcedc 100644
--- a/src/Admin/Components/Components/Inputs/EditCollection.js
+++ b/src/Admin/Components/Components/Inputs/EditCollection.js
@@ -18,7 +18,7 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, { useState, useEffect, useContext } from 'react';
//imports material ui components
-import { Typography, TextField, Grid } from '@material-ui/core';
+import { Typography, Grid } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import CardContent from "@material-ui/core/CardContent";
import CardAction from '@material-ui/core/CardActions';
@@ -225,25 +225,24 @@ const EditCollection = () => {
multi={true}
/>
))}
- <TextField
- select
- label="Privacidade"
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Privacidade"
value={privacy ? privacy : ""}
- style={{ marginBottom: '1em' }}
- onChange={handleChange}
- >
- {privacyOptions.map((option, index) => (
+ handleChange={handleChange}
+ items={privacyOptions.map((option, index) => (
<MenuItem
key={option.value}
value={option.value}
- style={option.value === privacy ? { color: 'blue' } : { color: 'black' }}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
>
{
option.value
}
</MenuItem>
))}
- </TextField>
+ />
<CKEditor
editor={ClassicEditor}
data={description}
diff --git a/src/Admin/Components/Components/Inputs/EditEducationalObect.js b/src/Admin/Components/Components/Inputs/EditEducationalObect.js
index a129b7b6..9054db98 100644
--- a/src/Admin/Components/Components/Inputs/EditEducationalObect.js
+++ b/src/Admin/Components/Components/Inputs/EditEducationalObect.js
@@ -21,7 +21,7 @@ import PropTypes from "prop-types";
import SwipeableViews from "react-swipeable-views";
import moment from "moment";
//imports material ui components
-import { Typography, TextField, Grid } from "@material-ui/core";
+import { Typography, Grid } from "@material-ui/core";
import CircularProgress from "@material-ui/core/CircularProgress";
import CardContent from "@material-ui/core/CardContent";
import CardAction from "@material-ui/core/CardActions";
@@ -519,46 +519,45 @@ const EditEducationalObject = () => {
</li>
);
})}
- <TextField
- id="standard-select-currency"
- select
- label="Línguas"
- style={{ width: "250px", marginBottom: "1em" }}
- >
- {listOfLanguages.map((option) => (
+ <FormInput
+ contrast={state.contrast}
+
+ selectable={true}
+ placeholder="Línguas"
+ items={listOfLanguages.map((option) => (
<MenuItem
key={option.id}
value={option.name}
onClick={() => {
handleChangeLan(option.id, option.name);
}}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
>
{option.name}
</MenuItem>
))}
- </TextField>
+ />
<li style={{ listStyleType: "none", marginBottom: "0.5em" }}>
<Chip label={objectType.name} style={state.contrast === "" ? {backgroundColor: "#ddd", color: "black"} : {backgroundColor: "black", color: "white", border: "1px solid white"}} />
</li>
- <TextField
- id="standard-select-currency"
- select
- label="Object type"
- style={{ width: "250px", marginBottom: "1em" }}
- >
- {listOfObjectTypes.map((option) => (
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Object type"
+ items={listOfObjectTypes.map((option) => (
<MenuItem
key={option.id}
value={option.name}
onClick={() => {
handleChangeObj(option.id, option.name);
}}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
>
{option.name}
</MenuItem>
))}
- </TextField>
+ />
</form>
</TabPanel>
diff --git a/src/Admin/Components/Components/Inputs/EditUser.js b/src/Admin/Components/Components/Inputs/EditUser.js
index a13fdb06..90490de2 100644
--- a/src/Admin/Components/Components/Inputs/EditUser.js
+++ b/src/Admin/Components/Components/Inputs/EditUser.js
@@ -18,7 +18,7 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, { useState, useEffect, useContext } from 'react';
//imports material ui components
-import { Typography, TextField, Grid } from '@material-ui/core';
+import { Typography, Grid } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import CardContent from "@material-ui/core/CardContent";
import CardAction from '@material-ui/core/CardActions';
@@ -551,18 +551,21 @@ const EditUser = () => {
</li>
);
})}
- <TextField
- id="standard-select-currency"
- select
- label="Permissões"
- style={{ width: '250px', marginBottom: '1em' }}
- >
- {rolesList.map((option) => (
- <MenuItem key={option.id} value={option.value} onClick={() => { handleChange(option.id, option.value) }}>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Permissões"
+ items={rolesList.map((option) => (
+ <MenuItem
+ key={option.id}
+ value={option.value}
+ onClick={() => { handleChange(option.id, option.value) }}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
{option.value}
</MenuItem>
))}
- </TextField>
+ />
<FormControlLabel
control={
<Switch
diff --git a/src/Admin/Components/Components/Inputs/EmailInputs.js b/src/Admin/Components/Components/Inputs/EmailInputs.js
index 7ea38af2..2ce92580 100644
--- a/src/Admin/Components/Components/Inputs/EmailInputs.js
+++ b/src/Admin/Components/Components/Inputs/EmailInputs.js
@@ -18,7 +18,6 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, { useState, useContext } from "react";
//material ui components
-import TextField from "@material-ui/core/TextField";
import MenuItem from "@material-ui/core/MenuItem";
import FormGroup from "@material-ui/core/FormGroup";
import FormControlLabel from "@material-ui/core/FormControlLabel";
@@ -384,23 +383,23 @@ const EmailInputs = (props) => {
value="integrada.contato@mec.gov.br"
/>
<div style={{ height: "1em" }} />
-
- <TextField
- select
- label="Para *"
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Para *"
value={option ? option : ""}
- onChange={handleChange}
- helperText="Por favor, selecione uma das opções"
- >
- {options.map((option, index) => (
+ handleChange={handleChange}
+ help="Por favor, selecione uma das opções"
+ items={options.map((option, index) => (
<MenuItem
key={option.value}
value={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
>
{option.label}
</MenuItem>
))}
- </TextField>
+ />
<div style={{ height: "1em" }} />
{
isToRoles &&
diff --git a/src/Admin/Pages/Pages/SubPages/Activity.js b/src/Admin/Pages/Pages/SubPages/Activity.js
index 3c82a90f..ec2c0bd9 100644
--- a/src/Admin/Pages/Pages/SubPages/Activity.js
+++ b/src/Admin/Pages/Pages/SubPages/Activity.js
@@ -27,12 +27,12 @@ import LoadingSpinner from '../../../../Components/LoadingSpinner'
import MobilePageHeader from '../../../Components/Components/MobileComponents/MobilePageHeader'
import PageHeader, { StyledFilter } from '../../../Components/Components/PageHeader'
import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from "./Collections.js";
+import FormInput from "Components/FormInput.js"
//imports from material ui
import TableBody from "@material-ui/core/TableBody"
import TableCell from "@material-ui/core/TableCell"
import MenuItem from "@material-ui/core/MenuItem"
import TableRow from "@material-ui/core/TableRow"
-import TextField from "@material-ui/core/TextField"
import IconButton from "@material-ui/core/IconButton"
import { Button } from "@material-ui/core"
import CircularProgress from "@material-ui/core/CircularProgress"
@@ -206,23 +206,24 @@ const Activity = () => {
<StyledFilter contrast={state.contrast}>
<div style={{ alignSelf: "flex-end" }}>
- <TextField
- select
- label="Filtro"
- value={option ? option : ""}
- onChange={handleChange}
- helperText="Por favor, selecione uma das opções"
- >
- {options.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Filtro"
+ value={option ? option : ""}
+ handleChange={handleChange}
+ help="Por favor, selecione uma das opções"
+ items={options.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
</div>
</StyledFilter>
) : null}
@@ -330,23 +331,24 @@ const Activity = () => {
<StyledFilter contrast={state.contrast}>
<div style={{ alignSelf: "flex-end" }}>
- <TextField
- select
- label="Filtro"
- value={option ? option : ""}
- onChange={handleChange}
- helperText="Por favor, selecione uma das opções"
- >
- {options.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Filtro"
+ value={option ? option : ""}
+ handleChange={handleChange}
+ help="Por favor, selecione uma das opções"
+ items={options.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
</div>
</StyledFilter>
) : null}
diff --git a/src/Admin/Pages/Pages/SubPages/AproveTeacher.js b/src/Admin/Pages/Pages/SubPages/AproveTeacher.js
index 28d4d95e..338110a0 100644
--- a/src/Admin/Pages/Pages/SubPages/AproveTeacher.js
+++ b/src/Admin/Pages/Pages/SubPages/AproveTeacher.js
@@ -40,7 +40,6 @@ import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import MenuItem from "@material-ui/core/MenuItem";
import TableRow from "@material-ui/core/TableRow";
-import TextField from "@material-ui/core/TextField";
import IconButton from "@material-ui/core/IconButton";
import { Button, Paper, Grid } from "@material-ui/core";
import CircularProgress from "@material-ui/core/CircularProgress";
@@ -401,23 +400,24 @@ const AproveTeacher = () => {
xs={12}
>
<Grid item>
- <TextField
- select
- label="Estado"
- value={option ? option : ""}
- onChange={handleChange}
- helperText="Por favor, selecione uma das opções"
- >
- {StateOptions.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Estado"
+ value={option ? option : ""}
+ handleChange={handleChange}
+ help="Por favor, selecione uma das opções"
+ items={StateOptions.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
</Grid>
<Grid item>
<FormInput
@@ -607,23 +607,24 @@ const AproveTeacher = () => {
xs={12}
>
<Grid item>
- <TextField
- select
- label="Estado"
- value={option ? option : ""}
- onChange={handleChange}
- helperText="Por favor, selecione uma das opções"
- >
- {StateOptions.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Estado"
+ value={option ? option : ""}
+ handleChange={handleChange}
+ help="Por favor, selecione uma das opções"
+ items={StateOptions.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
</Grid>
<Grid item>
<FormInput
diff --git a/src/Admin/Pages/Pages/SubPages/BlockedUsers.js b/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
index 005917e1..90f929ac 100644
--- a/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
+++ b/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
@@ -23,7 +23,6 @@ import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";
import MenuItem from "@material-ui/core/MenuItem";
import TableRow from "@material-ui/core/TableRow";
-import TextField from "@material-ui/core/TextField";
import TableCell from '@material-ui/core/TableCell';
import RemoveCircleOutlineRoundedIcon from '@material-ui/icons/RemoveCircleOutlineRounded';
import VisibilityIcon from '@material-ui/icons/Visibility';
@@ -43,6 +42,7 @@ import PageHeader, { StyledFilter } from "../../../Components/Components/PageHea
import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from "./Collections.js";
import { Store } from 'Store'
import StyledButton from '../../../Components/Components/Button';
+import FormInput from "Components/FormInput.js"
//Services
import { getRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { Url } from '../../../Filters';
@@ -268,22 +268,23 @@ const BlockedUsers = () => {
>
<StyledFilter contrast={state.contrast}>
<Grid item>
- <TextField
- select
- label="Estado de bloqueio"
- onChange={handleChange}
- helperText="Por favor, selecione uma das opções"
- >
- {StateOptions.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Estado de bloqueio"
+ handleChange={handleChange}
+ help="Por favor, selecione uma das opções"
+ items={StateOptions.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
</Grid>
</StyledFilter>
</MobilePageHeader>
@@ -400,22 +401,23 @@ const BlockedUsers = () => {
>
<StyledFilter contrast={state.contrast}>
<Grid item>
- <TextField
- select
- label="Estado de bloqueio"
- onChange={handleChange}
- helperText="Por favor, selecione uma das opções"
- >
- {StateOptions.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Estado de bloqueio"
+ handleChange={handleChange}
+ help="Por favor, selecione uma das opções"
+ items={StateOptions.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
</Grid>
</StyledFilter>
</PageHeader>
diff --git a/src/Admin/Pages/Pages/SubPages/Collections.js b/src/Admin/Pages/Pages/SubPages/Collections.js
index bf276295..8ecb15f1 100644
--- a/src/Admin/Pages/Pages/SubPages/Collections.js
+++ b/src/Admin/Pages/Pages/SubPages/Collections.js
@@ -36,7 +36,6 @@ import PeopleRoundedIcon from "@material-ui/icons/PeopleRounded";
import TableCell from "@material-ui/core/TableCell";
import MenuItem from "@material-ui/core/MenuItem";
import TableRow from "@material-ui/core/TableRow";
-import TextField from "@material-ui/core/TextField";
import IconButton from "@material-ui/core/IconButton";
import { Button, Paper, Grid } from "@material-ui/core";
import CircularProgress from "@material-ui/core/CircularProgress";
@@ -329,23 +328,24 @@ const Collections = () => {
justify="space-between"
>
<Grid item>
- <TextField
- select
- label="Filtro"
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Filtro"
value={option}
- onChange={handleChange}
- helperText="Por favor, selecione uma das opções"
- >
- {privacyOptions.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
+ handleChange={handleChange}
+ help="Por favor, selecione uma das opções"
+ items={privacyOptions.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
</Grid>
<Grid item>
@@ -491,23 +491,24 @@ const Collections = () => {
justify="space-between"
>
<Grid item>
- <TextField
- select
- label="Filtro"
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Filtro"
value={option}
- onChange={handleChange}
- helperText="Por favor, selecione uma das opções"
- >
- {privacyOptions.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
+ handleChange={handleChange}
+ help="Por favor, selecione uma das opções"
+ items={privacyOptions.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
</Grid>
<Grid item>
diff --git a/src/Admin/Pages/Pages/SubPages/Complaints.js b/src/Admin/Pages/Pages/SubPages/Complaints.js
index b323b27f..64c46939 100644
--- a/src/Admin/Pages/Pages/SubPages/Complaints.js
+++ b/src/Admin/Pages/Pages/SubPages/Complaints.js
@@ -36,7 +36,6 @@ import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import MenuItem from "@material-ui/core/MenuItem";
import TableRow from "@material-ui/core/TableRow";
-import TextField from "@material-ui/core/TextField";
import IconButton from "@material-ui/core/IconButton";
import { Button, Paper, Grid } from "@material-ui/core";
import CircularProgress from "@material-ui/core/CircularProgress";
@@ -332,42 +331,44 @@ const Complaints = () => {
xs={12}
>
<Grid item>
- <TextField
- select
- label="Motivo"
- value={complainOption}
- onChange={handleChangeComplain}
- helperText="Por favor, selecione uma das opções"
- >
- {ComplaintReasons.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Motivo"
+ value={complainOption}
+ handleChange={handleChangeComplain}
+ help="Por favor, selecione uma das opções"
+ items={ComplaintReasons.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
</Grid>
<Grid item>
- <TextField
- select
- label="Estado"
- value={stateOption}
- onChange={handleChangeState}
- helperText="Por favor, selecione uma das opções"
- >
- {stateOptions.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Estado"
+ value={stateOption}
+ handleChange={handleChangeState}
+ help="Por favor, selecione uma das opções"
+ items={stateOptions.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
</Grid>
<Grid item>
<FormInput
@@ -500,42 +501,44 @@ const Complaints = () => {
xs={12}
>
<Grid item>
- <TextField
- select
- label="Motivo"
- value={complainOption}
- onChange={handleChangeComplain}
- helperText="Por favor, selecione uma das opções"
- >
- {ComplaintReasons.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Motivo"
+ value={complainOption}
+ handleChange={handleChangeComplain}
+ help="Por favor, selecione uma das opções"
+ items={ComplaintReasons.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
</Grid>
<Grid item>
- <TextField
- select
- label="Estado"
- value={stateOption}
- onChange={handleChangeState}
- helperText="Por favor, selecione uma das opções"
- >
- {stateOptions.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Estado"
+ value={stateOption}
+ handleChange={handleChangeState}
+ help="Por favor, selecione uma das opções"
+ items={stateOptions.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ />
</Grid>
<Grid item>
<FormInput
diff --git a/src/Components/FormInput.js b/src/Components/FormInput.js
index e1f7cef1..d6dda2b5 100644
--- a/src/Components/FormInput.js
+++ b/src/Components/FormInput.js
@@ -122,6 +122,7 @@ export default function FormInput(props) {
contrast={props.contrast}
key={props.key}
label={props.placeholder}
+ placeholder={props.placeholder}
select={props.selectable ? props.selectable : false}
disabled={props.disableField}
margin="normal"
@@ -143,6 +144,9 @@ export default function FormInput(props) {
helperText={props.help}
mask={props.mask}
multiline={props.multi}
- />
+ >
+
+ {props.items}
+ </StyledTextField>
);
}
--
GitLab
From c3326ef41af1bdd08e0c317bed8bfe6b26614cf3 Mon Sep 17 00:00:00 2001
From: Vinicius Gabriel Machado <vgm18@inf.ufpr.br>
Date: Thu, 30 Sep 2021 18:42:30 -0300
Subject: [PATCH 13/15] Contrast in admin
---
.../Components/Inputs/EditCollection.js | 18 +++++----
.../Components/Inputs/EditEducationalObect.js | 34 +++++++++--------
.../Components/Components/Inputs/EditUser.js | 12 ++----
.../Components/Inputs/EmailInputs.js | 34 ++++++++++++-----
src/Admin/Pages/Pages/SubPages/Questions.js | 38 +++----------------
src/Admin/Pages/Pages/SubPages/SendEmail.js | 1 -
6 files changed, 60 insertions(+), 77 deletions(-)
diff --git a/src/Admin/Components/Components/Inputs/EditCollection.js b/src/Admin/Components/Components/Inputs/EditCollection.js
index b1fdcedc..3cba5e36 100644
--- a/src/Admin/Components/Components/Inputs/EditCollection.js
+++ b/src/Admin/Components/Components/Inputs/EditCollection.js
@@ -243,14 +243,16 @@ const EditCollection = () => {
</MenuItem>
))}
/>
- <CKEditor
- editor={ClassicEditor}
- data={description}
- onBlur={(event, editor) => {
- const data = editor.getData();
- setDescription(data)
- }}
- />
+ <div style={{color: "#666"}}>
+ <CKEditor
+ editor={ClassicEditor}
+ data={description}
+ onBlur={(event, editor) => {
+ const data = editor.getData();
+ setDescription(data)
+ }}
+ />
+ </div>
</form>
</CardContent>
diff --git a/src/Admin/Components/Components/Inputs/EditEducationalObect.js b/src/Admin/Components/Components/Inputs/EditEducationalObect.js
index 9054db98..3c4aead4 100644
--- a/src/Admin/Components/Components/Inputs/EditEducationalObect.js
+++ b/src/Admin/Components/Components/Inputs/EditEducationalObect.js
@@ -484,7 +484,7 @@ const EditEducationalObject = () => {
index={value}
onChangeIndex={handleChangeIndex}
>
- <TabPanel value={value} index={0} dir={theme.direction}>
+
<form style={{ display: "flex", flexDirection: "column" }}>
{fields.map((field, index) => (
<FormInput
@@ -559,20 +559,22 @@ const EditEducationalObject = () => {
))}
/>
</form>
- </TabPanel>
-
- <TabPanel value={value} index={1} dir={theme.direction}>
- <CKEditor
- editor={ClassicEditor}
- data={description}
- onBlur={(event, editor) => {
- const data = editor.getData();
- setDescription(data)
- }}
- />
- </TabPanel>
-
- <TabPanel value={value} index={2} dir={theme.direction}>
+
+
+
+ <div style={{color: "#666"}}>
+ <CKEditor
+ editor={ClassicEditor}
+ data={description}
+ onBlur={(event, editor) => {
+ const data = editor.getData();
+ setDescription(data)
+ }}
+ />
+ </div>
+
+
+
<form style={{ display: "flex", flexDirection: "column" }}>
{Imutables.map((field, index) => (
<FormInput
@@ -585,7 +587,7 @@ const EditEducationalObject = () => {
/>
))}
</form>
- </TabPanel>
+
</SwipeableViews>
</CardContent>
diff --git a/src/Admin/Components/Components/Inputs/EditUser.js b/src/Admin/Components/Components/Inputs/EditUser.js
index 90490de2..fd84adb8 100644
--- a/src/Admin/Components/Components/Inputs/EditUser.js
+++ b/src/Admin/Components/Components/Inputs/EditUser.js
@@ -28,9 +28,9 @@ import { makeStyles } from '@material-ui/core/styles';
import SaveIcon from '@material-ui/icons/Save';
import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Switch from '@material-ui/core/Switch';
import AddRoundedIcon from '@material-ui/icons/AddRounded';
import MenuItem from '@material-ui/core/MenuItem';
+
//imports local files
import SnackBar from '../../../../Components/SnackbarComponent';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
@@ -38,6 +38,7 @@ import { StyledCard } from "../../../Components/Styles/DataCard";
import { Store } from 'Store'
import FormInput from "Components/FormInput.js"
import StyledButton from '../Button';
+import { BlueCheckBox, ContrastCheckBox } from "./EmailInputs.js"
//imports services
import { getRequest, putRequest, deleteRequest, postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { EditFilter, GetAData } from '../../../Filters';
@@ -567,14 +568,7 @@ const EditUser = () => {
))}
/>
<FormControlLabel
- control={
- <Switch
- checked={switchState}
- onChange={() => { setSwitchState(!switchState) }}
- name="checkedB"
- color="primary"
- />
- }
+ control={state.contrast === "" ? <BlueCheckBox checked={switchState} onChange={() => { setSwitchState(!switchState) }} name="checkedB"/> : <ContrastCheckBox checked={switchState} onChange={() => { setSwitchState(!switchState) }} name="checkedB"/>}
label="Concorda com os termos de serviço?"
/>
</form>
diff --git a/src/Admin/Components/Components/Inputs/EmailInputs.js b/src/Admin/Components/Components/Inputs/EmailInputs.js
index 2ce92580..0a5df002 100644
--- a/src/Admin/Components/Components/Inputs/EmailInputs.js
+++ b/src/Admin/Components/Components/Inputs/EmailInputs.js
@@ -24,8 +24,9 @@ import FormControlLabel from "@material-ui/core/FormControlLabel";
import CircularProgress from "@material-ui/core/CircularProgress";
import Checkbox from "@material-ui/core/Checkbox";
import SendRoundedIcon from "@material-ui/icons/SendRounded";
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, withStyles } from '@material-ui/core/styles';
import Chip from '@material-ui/core/Chip';
+import { yellow, blue } from "@material-ui/core/colors";
//imports from local files
import SnackBar from "../../../../Components/SnackbarComponent";
import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
@@ -49,6 +50,26 @@ const useStyles = makeStyles((theme) => ({
},
}));
+export const BlueCheckBox = withStyles({
+ root: {
+ color: blue[400],
+ '&$checked': {
+ color: blue[600],
+ },
+ },
+ checked: {},
+})((props) => <Checkbox color="default" {...props} />);
+
+export const ContrastCheckBox = withStyles({
+ root: {
+ color: yellow[400],
+ '&$checked': {
+ color: yellow[600],
+ },
+ },
+ checked: {},
+})((props) => <Checkbox color="default" {...props} />);
+
const EmailInputs = (props) => {
const { state } = useContext(Store);
@@ -407,14 +428,7 @@ const EmailInputs = (props) => {
{roles.map((role, index) => (
<FormControlLabel
key={index}
- control={
- <Checkbox
- checked={role.isChecked}
- onChange={() => handleChangeCheckBox(index)}
- name={role.label}
- color="primary"
- />
- }
+ control={props.contrast === "" ? <BlueCheckBox checked={role.isChecked} onChange={() => handleChangeCheckBox(index)} name={role.label}/> : <ContrastCheckBox checked={role.isChecked} onChange={() => handleChangeCheckBox(index)} name={role.label}/>}
label={role.label}
/>
))}
@@ -471,7 +485,7 @@ const EmailInputs = (props) => {
<div style={{ height: "1em" }} />
- <div style={{ flex: 1 }}>
+ <div style={{ flex: 1, color: "#666" }}>
<CKEditor
editor={ClassicEditor}
data={message}
diff --git a/src/Admin/Pages/Pages/SubPages/Questions.js b/src/Admin/Pages/Pages/SubPages/Questions.js
index 0bb7416b..7a9f110f 100644
--- a/src/Admin/Pages/Pages/SubPages/Questions.js
+++ b/src/Admin/Pages/Pages/SubPages/Questions.js
@@ -29,6 +29,7 @@ import MobilePageHeader from "../../../Components/Components/MobileComponents/Mo
import PageHeader from "../../../Components/Components/PageHeader"
import { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from './Collections';
import { Store } from 'Store'
+import { BlueCheckBox, ContrastCheckBox } from "../../../Components/Components/Inputs/EmailInputs"
//imports from material ui
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
@@ -37,7 +38,6 @@ import { Button } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
import AddRoundedIcon from '@material-ui/icons/AddRounded';
import UpdateRoundedIcon from '@material-ui/icons/UpdateRounded';
-import Switch from '@material-ui/core/Switch';
//router
import { useHistory } from 'react-router-dom';
import HelpRoundedIcon from "@material-ui/icons/HelpRounded";
@@ -279,21 +279,7 @@ const Questions = () => {
{
title: "Status",
subtitle:
- row.status === 'active' ?
- <Switch
- checked={true}
- onChange={() => handleChange(index, row.status)}
- name="checkedB"
- color="primary"
- />
- :
-
- <Switch
- checked={false}
- onChange={() => handleChange(index, row.status)}
- name="checkedB"
- color="primary"
- />
+ state.contrast === "" ? <BlueCheckBox checked={row.status === "active"} onChange={() => handleChange(index, row.status)} name="checkedB"/> : <ContrastCheckBox checked={row.status === "active"} onChange={() => handleChange(index, row.status)} name="checkedB"/>
},
{
title: "Atualizado em",
@@ -382,23 +368,9 @@ const Questions = () => {
<TableCell className={classesCell.root} align="right">{DisplayDate(row.created_at)}</TableCell >
<TableCell className={classesCell.root} align="right">{row.description}</TableCell >
<TableCell className={classesCell.root} align="right">
- {
- row.status === 'active' ?
- <Switch
- checked={true}
- onChange={() => handleChange(index, row.status)}
- name="checkedB"
- color="primary"
- />
- :
-
- <Switch
- checked={false}
- onChange={() => handleChange(index, row.status)}
- name="checkedB"
- color="primary"
- />
- }
+ {
+ state.contrast === "" ? <BlueCheckBox checked={row.status === "active"} onChange={() => handleChange(index, row.status)} name="checkedB"/> : <ContrastCheckBox checked={row.status === "active"} onChange={() => handleChange(index, row.status)} name="checkedB"/>
+ }
</TableCell >
<TableCell className={classesCell.root} align="right">{DisplayDate(row.updated_at)}</TableCell >
</TableRow>
diff --git a/src/Admin/Pages/Pages/SubPages/SendEmail.js b/src/Admin/Pages/Pages/SubPages/SendEmail.js
index a5a4a940..92db3b65 100644
--- a/src/Admin/Pages/Pages/SubPages/SendEmail.js
+++ b/src/Admin/Pages/Pages/SubPages/SendEmail.js
@@ -56,7 +56,6 @@ const useStyles = makeStyles({
},
});
-
const SendEmail = ({ match }) => {
const { state } = useContext(Store);
--
GitLab
From aeac5c60d8c0c0f1d5c4709eaa44eca3235305f3 Mon Sep 17 00:00:00 2001
From: Vinicius Gabriel Machado <vgm18@inf.ufpr.br>
Date: Tue, 5 Oct 2021 01:58:23 -0300
Subject: [PATCH 14/15] Contrast
---
src/Admin/Pages/Pages/SubPages/BlockedUsers.js | 11 +++++++----
src/Components/AreasSubPagesFunction.js | 4 ++--
src/Components/carousel.css | 13 +++++++++----
3 files changed, 18 insertions(+), 10 deletions(-)
diff --git a/src/Admin/Pages/Pages/SubPages/BlockedUsers.js b/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
index 90f929ac..8ca50cff 100644
--- a/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
+++ b/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
@@ -111,7 +111,8 @@ const BlockedUsers = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#FF8C00",
+ backgroundColor: state.contrast === "" ? "#FF8C00" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -125,7 +126,8 @@ const BlockedUsers = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "red",
+ backgroundColor: state.contrast === "" ? "red" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -139,7 +141,8 @@ const BlockedUsers = () => {
style={{
textAlign: "center",
padding: "0.5em",
- backgroundColor: "#797D7F",
+ backgroundColor: state.contrast === "" ? "#797D7F" : "black",
+ border: state.contrast === "" ? "" : "1px solid white",
fontWeight: "500",
color: "#FFFAFA",
}}
@@ -431,7 +434,7 @@ const BlockedUsers = () => {
index === items.length - 1 ?
<TableRow className={classesRow.root} key={new Date().toISOString() + row.created_at}>
{/* Button to load more data */}
- <TableCell className={classesCell.root} colpsan={6}>
+ <TableCell className={classesCell.root} colspan={6}>
<Button
color='primary'
variant='text'
diff --git a/src/Components/AreasSubPagesFunction.js b/src/Components/AreasSubPagesFunction.js
index 7078cb08..f3f3a60a 100644
--- a/src/Components/AreasSubPagesFunction.js
+++ b/src/Components/AreasSubPagesFunction.js
@@ -95,7 +95,7 @@ function ReqResources(props) {
</Grid>
</Grid>
:
- <Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
+ <Carousel className={`${props.contrast}Carousel`} showThumbs={false} infiniteLoop={true} showStatus={false}>
{
rows.length >= 1 ?
rows.map((row, index) => (
@@ -164,7 +164,7 @@ function ReqCollections(props) {
</Grid>
:
rows.length >= 1 ?
- <Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
+ <Carousel className={`${props.contrast}Carousel`} showThumbs={false} infiniteLoop={true} showStatus={false}>
{
rows.map((row, index) => (
<Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center", minHeight: "50px" }} key={(index + 1)}>
diff --git a/src/Components/carousel.css b/src/Components/carousel.css
index 3a4c6336..929ac9e3 100644
--- a/src/Components/carousel.css
+++ b/src/Components/carousel.css
@@ -26,12 +26,16 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
position: inherit !important;
}
-.carousel .control-arrow {
+.Carousel .control-arrow {
background: orange !important;
- /* position: relative !important; */
- -webkit-box-shadow: 0 8px 17px 2px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
- box-shadow: 0 8px 17px 2px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
+ -webkit-box-shadow: 0px 0px 30px -10px #000000;
+ box-shadow: 0px 0px 15px -5px #000000;
+}
+
+.ContrastCarousel .control-arrow {
+ background: black !important;
+ border: 1px solid white !important;
}
.MuiPaper-elevation1-209{
@@ -48,4 +52,5 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
vertical-align: middle;
height: 50px;
width: 50px;
+ margin: 10px;
}
--
GitLab
From 2ef8ef0c99b1585a80ec9d6355cf6f738fdfaad5 Mon Sep 17 00:00:00 2001
From: Vinicius Gabriel Machado <vgm18@inf.ufpr.br>
Date: Mon, 18 Oct 2021 13:52:10 -0300
Subject: [PATCH 15/15] Fixing admin appbar scroll button and button atualizar
when on page 0
---
src/Admin/Components/Components/AppBar.js | 16 ++++++++++++++--
src/Admin/Pages/Pages/SubPages/Activity.js | 5 ++++-
src/Admin/Pages/Pages/SubPages/AproveTeacher.js | 5 ++++-
src/Admin/Pages/Pages/SubPages/BlockedUsers.js | 5 ++++-
src/Admin/Pages/Pages/SubPages/Collections.js | 5 ++++-
.../Pages/Pages/SubPages/CommunityQuestions.js | 5 ++++-
src/Admin/Pages/Pages/SubPages/Complaints.js | 5 ++++-
.../Pages/Pages/SubPages/EducationalObjects.js | 5 ++++-
src/Admin/Pages/Pages/SubPages/Institutions.js | 5 ++++-
src/Admin/Pages/Pages/SubPages/Languages.js | 5 ++++-
src/Admin/Pages/Pages/SubPages/NoteVariables.js | 5 ++++-
src/Admin/Pages/Pages/SubPages/Permissions.js | 5 ++++-
src/Admin/Pages/Pages/SubPages/Questions.js | 5 ++++-
src/Admin/Pages/Pages/SubPages/Rating.js | 5 ++++-
src/Admin/Pages/Pages/SubPages/Users.js | 5 ++++-
15 files changed, 70 insertions(+), 16 deletions(-)
diff --git a/src/Admin/Components/Components/AppBar.js b/src/Admin/Components/Components/AppBar.js
index c93e8213..2531b3e2 100644
--- a/src/Admin/Components/Components/AppBar.js
+++ b/src/Admin/Components/Components/AppBar.js
@@ -49,7 +49,7 @@ export default function AppBarAdmin(props) {
return (
<StyledAppBar position="sticky" contrast={props.contrast}>
- <Tabs
+ <StyledTabs
variant="scrollable"
scrollButtons="on"
value={value}
@@ -70,7 +70,7 @@ export default function AppBarAdmin(props) {
/>
))
}
- </Tabs>
+ </StyledTabs>
</StyledAppBar>
)
}
@@ -89,4 +89,16 @@ const StyledAppBar = styled(AppBar)`
color: ${props => props.contrast === "" ? "#666" : "white"} !important;
border-bottom: 1px solid ${props => props.contrast === "" ? "black" : "white"} !important;
box-shadow: none !important;
+`
+
+const StyledTabs = styled(Tabs)`
+ /*workaround because scrollButtons = on does not work*/
+ .MuiTabScrollButton-root.Mui-disabled {
+ opacity: 1 !important;
+ }
+
+ .MuiButtonBase-root.Mui-disabled {
+ cursor: pointer !important;
+ pointer-events: auto !important;
+ }
`
\ No newline at end of file
diff --git a/src/Admin/Pages/Pages/SubPages/Activity.js b/src/Admin/Pages/Pages/SubPages/Activity.js
index ec2c0bd9..c6259b38 100644
--- a/src/Admin/Pages/Pages/SubPages/Activity.js
+++ b/src/Admin/Pages/Pages/SubPages/Activity.js
@@ -72,6 +72,7 @@ const Activity = () => {
const [showFilter, setShowFilter] = useState(false);
const [option, setOption] = useState(); //labels of the text field 'to'
const [currPage, setCurrPage] = useState(0)
+ const [forceUpdate, setForceUpdate] = useState(false)
const [snackInfo, setSnackInfo] = useState({
message: "",
@@ -151,7 +152,7 @@ const Activity = () => {
setError(true)
}
)
- }, [currPage, option])
+ }, [currPage, option, forceUpdate])
useEffect(() => {
setOption()
@@ -189,6 +190,7 @@ const Activity = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -314,6 +316,7 @@ const Activity = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
diff --git a/src/Admin/Pages/Pages/SubPages/AproveTeacher.js b/src/Admin/Pages/Pages/SubPages/AproveTeacher.js
index 338110a0..6b69fed2 100644
--- a/src/Admin/Pages/Pages/SubPages/AproveTeacher.js
+++ b/src/Admin/Pages/Pages/SubPages/AproveTeacher.js
@@ -89,6 +89,7 @@ const AproveTeacher = () => {
const [nameValue, setNameValue] = useState("")
const [email, setEmail] = useState("");
const [emailValue, setEmailValue] = useState("")
+ const [forceUpdate, setForceUpdate] = useState(false)
const [snackInfo, setSnackInfo] = useState({
message: "",
@@ -327,7 +328,7 @@ const AproveTeacher = () => {
setError(true)
}
)
- }, [currPage, option, email, name, invertList])
+ }, [currPage, option, email, name, invertList, forceUpdate])
useEffect(() => {
setOption("requested")
@@ -367,6 +368,7 @@ const AproveTeacher = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -581,6 +583,7 @@ const AproveTeacher = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
diff --git a/src/Admin/Pages/Pages/SubPages/BlockedUsers.js b/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
index 8ca50cff..9eac1d9a 100644
--- a/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
+++ b/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
@@ -69,6 +69,7 @@ const BlockedUsers = () => {
const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false)
const [stateOpt, setStateOpt] = useState(1)
const [currPage, setCurrPage] = useState(0)
+ const [forceUpdate, setForceUpdate] = useState(false)
const [snackInfo, setSnackInfo] = useState({
message: '',
@@ -224,7 +225,7 @@ const BlockedUsers = () => {
setError(true)
}
)
- }, [currPage, stateOpt, invertList])
+ }, [currPage, stateOpt, invertList, forceUpdate])
if (error) {
return <div>Error: {error.message}</div>;
@@ -257,6 +258,7 @@ const BlockedUsers = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -397,6 +399,7 @@ const BlockedUsers = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
diff --git a/src/Admin/Pages/Pages/SubPages/Collections.js b/src/Admin/Pages/Pages/SubPages/Collections.js
index 8ecb15f1..f7ab54cc 100644
--- a/src/Admin/Pages/Pages/SubPages/Collections.js
+++ b/src/Admin/Pages/Pages/SubPages/Collections.js
@@ -110,6 +110,7 @@ const Collections = () => {
const [deleteItem, setDeleteItem] = useState({}); //Delete Item
const [isLoadingToDelete, setIsLoadingToDelete] = useState(null);
const [option, setOption] = useState(); //labels of the text field 'to'
+ const [forceUpdate, setForceUpdate] = useState(false)
const [snackInfo, setSnackInfo] = useState({
message: "",
@@ -249,7 +250,7 @@ const Collections = () => {
setError(true)
}
)
- }, [currPage, search, option])
+ }, [currPage, search, option, forceUpdate])
useEffect(() => {
setCurrPage(0)
@@ -304,6 +305,7 @@ const Collections = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -467,6 +469,7 @@ const Collections = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
diff --git a/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js b/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js
index b6bd621a..b6be7e21 100644
--- a/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js
+++ b/src/Admin/Pages/Pages/SubPages/CommunityQuestions.js
@@ -81,6 +81,7 @@ const CommunityQuestion = () => {
const [email, setEmail] = useState("");
const [valueOfNameField, setValueOfNameField] = useState("")
const [name, setName] = useState("");
+ const [forceUpdate, setForceUpdate] = useState(false)
const [snackInfo, setSnackInfo] = useState({
message: "",
@@ -180,7 +181,7 @@ const CommunityQuestion = () => {
setError(true)
}
)
- }, [currPage, message, email, name, invertList])
+ }, [currPage, message, email, name, invertList, forceUpdate])
useEffect(() => {
setCurrPage(0)
@@ -222,6 +223,7 @@ const CommunityQuestion = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -384,6 +386,7 @@ const CommunityQuestion = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
diff --git a/src/Admin/Pages/Pages/SubPages/Complaints.js b/src/Admin/Pages/Pages/SubPages/Complaints.js
index 64c46939..0da9bdf1 100644
--- a/src/Admin/Pages/Pages/SubPages/Complaints.js
+++ b/src/Admin/Pages/Pages/SubPages/Complaints.js
@@ -82,6 +82,7 @@ const Complaints = () => {
const [description, setDescription] = useState("");
const [valueOfDescField, setValueOfDescField] = useState("")
const [currPage, setCurrPage] = useState(0)
+ const [forceUpdate, setForceUpdate] = useState(false)
const [snackInfo, setSnackInfo] = useState({
message: "",
@@ -259,7 +260,7 @@ const Complaints = () => {
setError(true)
}
)
- }, [currPage, complainOption, stateOption, description, invertList])
+ }, [currPage, complainOption, stateOption, description, invertList, forceUpdate])
useEffect(() => {
setComplainOption()
@@ -299,6 +300,7 @@ const Complaints = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -476,6 +478,7 @@ const Complaints = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
diff --git a/src/Admin/Pages/Pages/SubPages/EducationalObjects.js b/src/Admin/Pages/Pages/SubPages/EducationalObjects.js
index 3d720067..64a49388 100644
--- a/src/Admin/Pages/Pages/SubPages/EducationalObjects.js
+++ b/src/Admin/Pages/Pages/SubPages/EducationalObjects.js
@@ -71,6 +71,7 @@ const EducationalObjects = () => {
const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false);
const [showFilter, setShowFilter] = useState(false)
const [openAlertDialog, setOpenAlertDialog] = useState(false);
+ const [forceUpdate, setForceUpdate] = useState(false)
const [snackInfo, setSnackInfo] = useState({
message: "",
@@ -225,7 +226,7 @@ const EducationalObjects = () => {
setError(true)
}
)
- }, [currPage, search, description, author])
+ }, [currPage, search, description, author, forceUpdate])
useEffect(() => {
setCurrPage(0)
@@ -314,6 +315,7 @@ const EducationalObjects = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -457,6 +459,7 @@ const EducationalObjects = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
diff --git a/src/Admin/Pages/Pages/SubPages/Institutions.js b/src/Admin/Pages/Pages/SubPages/Institutions.js
index 78984734..4fa613c5 100644
--- a/src/Admin/Pages/Pages/SubPages/Institutions.js
+++ b/src/Admin/Pages/Pages/SubPages/Institutions.js
@@ -72,6 +72,7 @@ const Institutions = () => {
const [deleteItem, setDeleteItem] = useState({}); //Delete Item
const [isLoadingToDelete, setIsLoadingToDelete] = useState(null);
const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false);
+ const [forceUpdate, setForceUpdate] = useState(false)
const [openAlertDialog, setOpenAlertDialog] = useState(false);
@@ -216,7 +217,7 @@ const Institutions = () => {
setError(true)
}
)
- }, [currPage, description, country, search, city, invertList])
+ }, [currPage, description, country, search, city, invertList, forceUpdate])
useEffect(() => {
setSeacrh("")
@@ -315,6 +316,7 @@ const Institutions = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -467,6 +469,7 @@ const Institutions = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
diff --git a/src/Admin/Pages/Pages/SubPages/Languages.js b/src/Admin/Pages/Pages/SubPages/Languages.js
index 02192640..55dca43d 100644
--- a/src/Admin/Pages/Pages/SubPages/Languages.js
+++ b/src/Admin/Pages/Pages/SubPages/Languages.js
@@ -69,6 +69,7 @@ const Languages = () => {
const [deleteItem, setDeleteItem] = useState({}); //Delete Item
const [isLoadingToDelete, setIsLoadingToDelete] = useState(null);
+ const [forceUpdate, setForceUpdate] = useState(false)
const [snackInfo, setSnackInfo] = useState({
message: '',
@@ -181,7 +182,7 @@ const Languages = () => {
setError(true)
}
)
- }, [currPage, invertList])
+ }, [currPage, invertList, forceUpdate])
if (error) {
return <div>Error: {error.message}</div>;
@@ -220,6 +221,7 @@ const Languages = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -322,6 +324,7 @@ const Languages = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
diff --git a/src/Admin/Pages/Pages/SubPages/NoteVariables.js b/src/Admin/Pages/Pages/SubPages/NoteVariables.js
index 520f826e..865a2901 100644
--- a/src/Admin/Pages/Pages/SubPages/NoteVariables.js
+++ b/src/Admin/Pages/Pages/SubPages/NoteVariables.js
@@ -60,6 +60,7 @@ const NoteVariables = () => {
const [currPage, setCurrPage] = useState(0)
const [items, setItems] = useState([]); //Necessary to consult the API, data
const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false)
+ const [forceUpdate, setForceUpdate] = useState(false)
const [snackInfo, setSnackInfo] = useState({
message: '',
@@ -116,7 +117,7 @@ const NoteVariables = () => {
setError(true)
}
)
- }, [currPage, invertList])
+ }, [currPage, invertList, forceUpdate])
if (error) {
return <div>Error: {error.message}</div>;
@@ -150,6 +151,7 @@ const NoteVariables = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -245,6 +247,7 @@ const NoteVariables = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
diff --git a/src/Admin/Pages/Pages/SubPages/Permissions.js b/src/Admin/Pages/Pages/SubPages/Permissions.js
index b6a3d9ad..0623ea00 100644
--- a/src/Admin/Pages/Pages/SubPages/Permissions.js
+++ b/src/Admin/Pages/Pages/SubPages/Permissions.js
@@ -68,6 +68,7 @@ const UserPermissions = () => {
const [deleteItem, setDeleteItem] = useState({}); //Delete Item
const [isLoadingToDelete, setIsLoadingToDelete] = useState(null);
+ const [forceUpdate, setForceUpdate] = useState(false)
const [snackInfo, setSnackInfo] = useState({
message: '',
@@ -178,7 +179,7 @@ const UserPermissions = () => {
setError(true)
}
)
- }, [currPage, invertList])
+ }, [currPage, invertList, forceUpdate])
if (error) {
return <div>Error: {error.message}</div>;
@@ -217,6 +218,7 @@ const UserPermissions = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -325,6 +327,7 @@ const UserPermissions = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
diff --git a/src/Admin/Pages/Pages/SubPages/Questions.js b/src/Admin/Pages/Pages/SubPages/Questions.js
index 7a9f110f..706a93cc 100644
--- a/src/Admin/Pages/Pages/SubPages/Questions.js
+++ b/src/Admin/Pages/Pages/SubPages/Questions.js
@@ -60,6 +60,7 @@ const Questions = () => {
const [items, setItems] = useState([]); //Necessary to consult the API, data
const [currPage, setCurrPage] = useState(0)
const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false) //controlls the state of loadind more data
+ const [forceUpdate, setForceUpdate] = useState(false)
const [snackInfo, setSnackInfo] = useState({
message: '',
@@ -181,7 +182,7 @@ const Questions = () => {
setError(true)
}
)
- }, [currPage, invertList])
+ }, [currPage, invertList, forceUpdate])
if (error) {
@@ -213,6 +214,7 @@ const Questions = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -318,6 +320,7 @@ const Questions = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
diff --git a/src/Admin/Pages/Pages/SubPages/Rating.js b/src/Admin/Pages/Pages/SubPages/Rating.js
index 00a667d9..92742617 100644
--- a/src/Admin/Pages/Pages/SubPages/Rating.js
+++ b/src/Admin/Pages/Pages/SubPages/Rating.js
@@ -68,6 +68,7 @@ const Ratings = () => {
const [openAlertDialog, setOpenAlertDialog] = useState(false); //controlls the state od alert dialog
const [deleteItem, setDeleteItem] = useState({}); //Delete Item
const [isLoadingToDelete, setIsLoadingToDelete] = useState(null);
+ const [forceUpdate, setForceUpdate] = useState(false)
const [snackInfo, setSnackInfo] = useState({
message: '',
@@ -178,7 +179,7 @@ const Ratings = () => {
setError(true)
}
)
- }, [currPage, invertList])
+ }, [currPage, invertList, forceUpdate])
if (error) {
return <div>Error: {error.message}</div>;
@@ -220,6 +221,7 @@ const Ratings = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -321,6 +323,7 @@ const Ratings = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
diff --git a/src/Admin/Pages/Pages/SubPages/Users.js b/src/Admin/Pages/Pages/SubPages/Users.js
index d426d97c..55d5b5c9 100644
--- a/src/Admin/Pages/Pages/SubPages/Users.js
+++ b/src/Admin/Pages/Pages/SubPages/Users.js
@@ -71,6 +71,7 @@ const Users = () => {
const [isLoadingMoreItems, setIsLoadingMoreItems] = useState(false)
const [showFilter, setShowFilter] = useState(false)
const [currPage, setCurrPage] = useState(0)
+ const [forceUpdate, setForceUpdate] = useState(false)
const [name, setName] = useState("");
const [nameValue, setNameValue] = useState("")
@@ -215,7 +216,7 @@ const Users = () => {
setIsLoadingMoreItems(false)
}
)
- }, [currPage, email, name, invertList])
+ }, [currPage, email, name, invertList, forceUpdate])
useEffect(() => {
setNameValue("")
@@ -255,6 +256,7 @@ const Users = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -433,6 +435,7 @@ const Users = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
--
GitLab