From f9fbc30a6ce94f46051bd3ce3290f5ca3cb4f999 Mon Sep 17 00:00:00 2001
From: Luis Felipe Risch <lfr20@inf.ufpr.br>
Date: Fri, 3 Sep 2021 10:37:35 -0300
Subject: [PATCH 1/3] Revert "Merge branch
'Develop_copy_to_implement_acessibility' into 'Develop'"
This reverts commit 181facfe1f1c07d8ee36a6e7fa381136cec3c6d2, reversing
changes made to a2ba75c2cafb6cb327bbb2605a0512b9894e2be0.
---
package-lock.json | 12 +-
package.json | 2 +-
.../Components/Components/AdminTemplate.js | 4 +-
.../Components/DataCards/ActivityCard.js | 1 +
.../DataCards/CommunityQuestionCard.js | 25 +-
.../DataCards/EducationalObjectsCard.js | 1 +
.../Components/Inputs/CreateInstitution.js | 161 +--
.../Components/Inputs/CreateLanguage.js | 163 +--
.../Components/Inputs/CreateQuestion.js | 203 ++--
.../Components/Inputs/CreateRating.js | 163 +--
.../Components/Inputs/CreateRole.js | 164 +--
.../Components/Inputs/EditCollection.js | 27 +-
.../Components/Inputs/EditEducationalObect.js | 25 +-
.../Components/Inputs/EditLanguage.js | 27 +-
.../Components/Inputs/EditRating.js | 27 +-
.../Components/Components/Inputs/EditRoles.js | 26 +-
.../Components/Components/Inputs/EditUser.js | 26 +-
.../Components/Inputs/IntitutionsInputs.js | 26 +-
.../Components/Inputs/NoteVarInputs.js | 27 +-
.../Components/Components/Unauthorized.js | 22 +-
src/App.css | 41 -
src/App.js | 643 ++++++------
src/Components/AGPLFooter.js | 12 +-
src/Components/AboutCarousel.js | 60 +-
src/Components/AboutCarouselPartner.js | 71 +-
src/Components/Accessibility/ContrastBar.js | 209 ----
src/Components/ActivityListItem.js | 31 +-
src/Components/AreasSubPagesFunction.js | 702 +++++++------
src/Components/ButtonAvaliarRecurso.js | 14 +-
src/Components/ButtonGuardarColecao.js | 16 +-
src/Components/Carousel.js | 665 +++++++++++++
src/Components/Checkbox.js | 47 +-
src/Components/CloseModalButton.js | 2 +-
src/Components/ColCardOwnerOptions.js | 116 +--
src/Components/ColCardPublicOptions.js | 46 +-
src/Components/CollectionAuthor.js | 24 +-
src/Components/CollectionCardFunction.js | 554 ++++++-----
src/Components/CollectionCommentSection.js | 90 +-
src/Components/CollectionDescription.js | 6 +-
src/Components/CollectionDowloadButton.js | 5 -
src/Components/CollectionReview.js | 21 +-
src/Components/Comment.js | 485 ++++-----
src/Components/ContactButtons/FollowButton.js | 139 +--
.../ContactButtons/FollowersCountButton.js | 5 +-
.../ContactButtons/FollowingButton.js | 163 +--
src/Components/ContactCard.js | 67 +-
src/Components/ContactCardOptions.js | 47 +-
src/Components/ContactForm.js | 402 ++++----
src/Components/CriarColecaoForm.js | 113 ++-
src/Components/CriarColecaoModal.js | 27 +-
src/Components/Cropper.js | 167 ++--
src/Components/Dropdown.js | 115 ++-
src/Components/EcFooter.js | 30 +-
src/Components/EditarColecaoForm.js | 59 +-
src/Components/ExpandedMaterials.js | 9 +-
src/Components/ExpansionPanels.js | 604 ++++++------
src/Components/Firulas.js | 86 +-
src/Components/FollowCollectionButton.js | 8 +-
src/Components/FormInput.js | 109 +-
.../FormationMaterialDescription.js | 60 +-
src/Components/FormationMaterialHeader.js | 70 +-
src/Components/Funcionalities.js | 55 +-
src/Components/GreyButton.js | 9 +-
src/Components/GuardarModal.js | 55 +-
src/Components/Header.js | 222 ++---
.../HelpCenter/Cards/CardEncontrando.js | 143 ++-
.../HelpCenter/Cards/CardGerenciando.js | 143 ++-
.../HelpCenter/Cards/CardParticipando.js | 145 ++-
.../HelpCenter/Cards/CardPublicando.js | 36 +-
.../HelpCenter/TabsManageAc/Forget.js | 118 +--
.../HelpCenter/TabsManageAc/HowToAccess.js | 11 +-
.../HelpCenter/TabsManageAc/HowToChange.js | 11 +-
.../HelpCenter/TabsManageAc/HowToDo.js | 29 +-
src/Components/HelpCenter/TabsManageAc/Why.js | 8 +-
src/Components/HelpCenter/TabsNetPart/How.js | 8 +-
src/Components/HelpCenter/TabsNetPart/What.js | 8 +-
.../HelpCenter/TabsPlataformaMEC/How.js | 41 +-
.../HelpCenter/TabsPlataformaMEC/Software.js | 31 +-
.../HelpCenter/TabsPlataformaMEC/Types.js | 25 +-
.../TabsPlataformaMEC/Understand.js | 24 +-
.../HelpCenter/TabsPlataformaMEC/What.js | 23 +-
.../HelpCenter/TabsPlataformaMEC/Which.js | 23 +-
.../HelpCenter/TabsResourseFind/HowToDo.js | 19 +-
.../TabsResourseFind/HowToFilter.js | 8 +-
.../HelpCenter/TabsResourseFind/HowToRank.js | 8 +-
.../HelpCenter/TabsResoursePub/How.js | 11 +-
.../HelpCenter/TabsResoursePub/Which.js | 8 +-
.../HelpCenter/TabsResoursePub/Why.js | 38 +-
.../HelperFunctions/getAxiosConfig.js | 1 +
src/Components/HomeScreenSearchBar.js | 141 +--
src/Components/IframeOverlay/DrawerContent.js | 4 +
src/Components/LoadingSpinner.js | 12 +-
src/Components/LoginContainerFunction.js | 264 +++--
src/Components/LoginModal.js | 74 +-
src/Components/MaterialCard.js | 66 +-
src/Components/MenuBar.js | 226 +++--
src/Components/MenuBarMobile.js | 17 +-
src/Components/MenuList.js | 159 ++-
src/Components/MobileDrawerMenu.js | 56 +-
src/Components/Modal.js | 100 ++
src/Components/ModalAbout.js | 339 +++----
.../ComponentAlterarAvatar.js | 143 +--
.../ModalAlterarAvatar/ModalAlterarAvatar.js | 6 +-
.../ComponentAlterarCover.js | 109 +-
.../ModalAlterarCover/ModalAlterarCover.js | 8 +-
src/Components/ModalAvaliarRecurso.js | 75 +-
src/Components/ModalConfirmarCuradoria.js | 36 +-
src/Components/ModalConfirmarUnfollow.js | 29 +-
src/Components/ModalEditarColecao.js | 11 +-
src/Components/ModalExcluirColecao.js | 24 +-
src/Components/ModalExcluirComentario.js | 62 +-
.../ModalLearningObjectPublished.js | 31 +-
src/Components/Notifications.js | 79 +-
.../ModalConfirmarProfessor.js | 23 +-
.../PageProfessorComponents/PartOne.js | 280 +++---
.../PageProfessorComponents/PartThree.js | 144 ++-
.../PageProfessorComponents/PartTwo.js | 93 +-
.../SuccessfulRequest.js | 16 +-
.../PasswordRecoveryComponents/Default.js | 23 +-
.../PasswordRecoveryComponents/Error.js | 42 +-
.../PasswordRecoveryComponents/Success.js | 43 +-
.../PublicationPermissionsContent.js | 138 ++-
src/Components/PurpleButton.js | 52 +
src/Components/RedirectModal.js | 38 +-
src/Components/ReportButton.js | 55 +-
src/Components/ReportColecaoForm.js | 52 +-
src/Components/ReportModal.js | 24 +-
src/Components/ReportRecursoForm.js | 40 +-
src/Components/ReportUserForm.js | 85 +-
src/Components/ResourceCardFunction.js | 93 +-
src/Components/ResourceCardOptions.js | 48 +-
src/Components/ResourceList.js | 21 +-
.../ResourcePageComponents/CommentForm.js | 290 ++----
.../ResourcePageComponents/CommentsArea.js | 160 ++-
.../ResourcePageComponents/Footer.js | 109 +-
.../ResourcePageComponents/Sobre.js | 162 ++-
.../ResourcePageComponents/TextoObjeto.js | 24 +-
.../ResourcePageComponents/VideoPlayer.js | 4 +-
src/Components/SearchBar.js | 352 +++----
.../SearchEPCompCurriculum.js | 83 +-
.../SearchExpansionPanel/SearchEPIdiomas.js | 89 +-
.../SearchExpansionPanel/SearchEPTiposRec.js | 89 +-
.../SearchExpansionPanel.js | 403 ++++----
.../SearchExpansionPanel/SesrchEPEtapasEns.js | 89 +-
.../CollectionTemplate.js | 214 ++--
src/Components/SearchPageComponents/Error.js | 25 +-
.../SearchPageComponents/FilterSummary.js | 262 +++--
.../SearchPageComponents/HeaderFilters.js | 262 +++--
.../SearchPageComponents/ResourceTemplate.js | 214 ++--
.../SearchPageComponents/UserTemplate.js | 152 ++-
src/Components/SearchSectionFunction.js | 119 ++-
src/Components/ShareModal.js | 37 +-
src/Components/SignUpContainerFunction.js | 213 ++--
src/Components/SignUpModal.js | 29 +-
src/Components/SnackbarComponent.js | 5 +-
src/Components/StatsBarFunction.js | 13 +-
src/Components/Stepper.js | 138 +--
src/Components/TabPanels/Breadcrumbs.js | 22 +-
.../TabPanels/PanelComponents/ButtonsArea.js | 71 +-
.../TabPanels/PanelComponents/NoContent.js | 15 +-
.../TabPanels/PanelComponents/PanelTitle.js | 10 +-
.../PanelComponents/TemplateColecao.js | 17 +-
.../PanelComponents/TemplateCuradoria.js | 12 +-
.../PanelComponents/TemplateRecurso.js | 12 +-
.../TabPanels/PanelComponents/TemplateRede.js | 14 +-
.../PublicUserPageTabs/TabColecoes.js | 181 ++--
.../TabPanels/PublicUserPageTabs/TabInicio.js | 6 +-
.../PublicUserPageTabs/TabRecursos.js | 5 +-
.../TabPanels/PublicUserPageTabs/TabRede.js | 286 +++---
.../PublicUserPageTabs/UserDescription.js | 23 +-
src/Components/TabPanels/StyledComponents.js | 90 +-
.../UserPageTabs/ContainerRedeVazia.js | 45 +-
.../UserPageTabs/ModalExcluirConta.js | 40 +-
.../TabPanels/UserPageTabs/PanelAtividades.js | 224 ++---
.../TabPanels/UserPageTabs/PanelColecoes.js | 73 +-
.../TabPanels/UserPageTabs/PanelCuradoria.js | 3 +-
.../UserPageTabs/PanelEditarPerfil.js | 36 +-
.../TabPanels/UserPageTabs/PanelFavoritos.js | 4 +-
.../UserPageTabs/PanelGerenciarConta.js | 261 +++--
.../UserPageTabs/PanelMeusRecursos.js | 11 +-
.../TabPanels/UserPageTabs/PanelRede.js | 6 +-
.../PanelSolicitarContaProfessor.js | 81 +-
src/Components/Table.js | 124 +--
src/Components/TermsPageContent.js | 179 ++--
src/Components/TopicCard.js | 21 +-
src/Components/TopicFooter.js | 5 +-
src/Components/TopicList.js | 14 +-
.../UploadPageComponents/ButtonsDiv.js | 15 +-
.../UploadPageComponents/ChooseLinkSection.js | 160 ++-
.../UploadPageComponents/Forms/Autor.js | 81 +-
.../UploadPageComponents/Forms/Idioma.js | 95 +-
.../UploadPageComponents/Forms/Keywords.js | 81 +-
.../UploadPageComponents/Forms/NewTitle.js | 63 +-
.../Forms/SobreORecurso.js | 26 +-
.../Forms/TipoDeRecurso.js | 22 +-
.../UploadPageComponents/GetIconByName.js | 3 +-
.../UploadPageComponents/ModalCancelar.js | 24 +-
.../UploadPageComponents/PartOne.js | 104 +-
.../UploadPageComponents/PartThree.js | 599 ++++++-----
.../UploadPageComponents/PartTwo.js | 200 ++--
.../CustomCircularProgress.js | 9 +-
.../PartTwoComponents/DisplayThumbnail.js | 48 +-
.../PartTwoComponents/DragAndDropThumbnail.js | 47 +-
.../PartTwoComponents/EditThumbnail.js | 31 +-
.../PartTwoComponents/EducationalStage.js | 40 +-
.../PartTwoComponents/Licenca.js | 68 +-
.../PartTwoComponents/SubjectsAndThemes.js | 139 ++-
.../UploadPageComponents/Stepper.js | 226 +++--
.../UploadPageComponents/StyledComponents.js | 308 +++---
.../UploadPageComponents/UploadFileWrapper.js | 134 +--
src/Components/UserPageComponents/Avatar.js | 1 -
src/Components/UserPageComponents/Cover.js | 3 +-
.../UserPageComponents/EditProfileButton.js | 68 +-
.../UserPageComponents/SubmitterStatus.js | 38 +-
src/Components/UserPageComponents/UserInfo.js | 14 +-
.../ContrastBar.css => VerticalRuler.js} | 52 +-
src/Components/carousel.css | 40 +-
src/Pages/AboutPage.js | 104 +-
src/Pages/ChangePasswordPage.js | 42 +-
src/Pages/CollectionPage.js | 98 +-
src/Pages/Contact.js | 281 +++---
src/Pages/EditLearningObjectPage.js | 60 +-
src/Pages/EditProfilePage.js | 69 +-
src/Pages/FormationMaterialPage.js | 35 +-
src/Pages/HelpCenter.js | 66 +-
src/Pages/MaterialPage.js | 144 ++-
src/Pages/PageNotFound.js | 35 +-
src/Pages/PageProfessor.js | 177 ++--
src/Pages/PasswordRecoveryPage.js | 55 +-
src/Pages/PublicUserPage.js | 679 ++++++-------
src/Pages/PublicationPermissionsPage.js | 327 +++---
src/Pages/ResourcePage.js | 693 +++++++------
src/Pages/Search.js | 933 +++++++++---------
src/Pages/SummarizedUserTerms.js | 399 --------
src/Pages/TabsHelp/TabManageAc.js | 423 ++++----
src/Pages/TabsHelp/TabNetPart.js | 80 +-
src/Pages/TabsHelp/TabPlataformaMEC.js | 313 +++---
src/Pages/TabsHelp/TabResourseFind.js | 423 ++++----
src/Pages/TabsHelp/TabResoursePub.js | 79 +-
src/Pages/TermsPage.js | 169 ++--
src/Pages/UploadPage.js | 139 ++-
src/Pages/UserPage.js | 400 ++++----
src/Pages/UserTerms.js | 438 ++++----
src/Store.js | 296 +++---
src/img/OffContrastIcon.png | Bin 17242 -> 0 bytes
src/img/OnContrastIcon.png | Bin 17257 -> 0 bytes
src/img/termos/handshake.svg | 8 +-
247 files changed, 13059 insertions(+), 13987 deletions(-)
delete mode 100644 src/Components/Accessibility/ContrastBar.js
create mode 100644 src/Components/Carousel.js
create mode 100644 src/Components/Modal.js
create mode 100644 src/Components/PurpleButton.js
rename src/Components/{Accessibility/ContrastBar.css => VerticalRuler.js} (52%)
delete mode 100644 src/Pages/SummarizedUserTerms.js
delete mode 100644 src/img/OffContrastIcon.png
delete mode 100644 src/img/OnContrastIcon.png
diff --git a/package-lock.json b/package-lock.json
index 968b369c..5fdb3179 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11285,9 +11285,9 @@
"integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A="
},
"path-parse": {
- "version": "1.0.7",
- "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
- "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
+ "version": "1.0.6",
+ "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
+ "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw=="
},
"path-to-regexp": {
"version": "1.8.0",
@@ -17491,9 +17491,9 @@
}
},
"url-parse": {
- "version": "1.5.3",
- "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.3.tgz",
- "integrity": "sha512-IIORyIQD9rvj0A4CLWsHkBBJuNqWpFQe224b6j9t/ABmquIS0qDU2pY6kl6AuOrL5OkCXHMCFNe1jBcuAggjvQ==",
+ "version": "1.5.1",
+ "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.1.tgz",
+ "integrity": "sha512-HOfCOUJt7iSYzEx/UqgtwKRMC6EU91NFhsCHMv9oM03VJcVo2Qrp8T8kI9D7amFf1cu+/3CEhgb3rF9zL7k85Q==",
"requires": {
"querystringify": "^2.1.1",
"requires-port": "^1.0.0"
diff --git a/package.json b/package.json
index e772e41c..b2d73017 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
},
"scripts": {
"analyze": "NODE_PATH=src/ source-map-explorer 'build/static/js/*.js'",
- "start": "NODE_PATH=src/ PORT=5000 react-scripts start watch",
+ "start": "NODE_PATH=src/ PORT=4000 react-scripts start watch",
"build": "NODE_PATH=src/ react-scripts build",
"test": "NODE_PATH=src/ react-scripts test",
"eject": "NODE_PATH=src/ react-scripts eject"
diff --git a/src/Admin/Components/Components/AdminTemplate.js b/src/Admin/Components/Components/AdminTemplate.js
index 42be22cd..e0affe5c 100644
--- a/src/Admin/Components/Components/AdminTemplate.js
+++ b/src/Admin/Components/Components/AdminTemplate.js
@@ -46,7 +46,7 @@ const AdminTemplate = (props) => {
return (
<div style={{ backgroundColor: " #D3D3D3" }}>
<AppBarAdmin />
- <div>
+ <div style={{ padding: "2em" }}>
{props.inner}
</div>
</div>
@@ -54,7 +54,7 @@ const AdminTemplate = (props) => {
else
return (
<div style={{ backgroundColor: " #D3D3D3" }}>
- <div>
+ <div style={{ padding: "2em" }}>
<Unauthorized />
</div>
</div>
diff --git a/src/Admin/Components/Components/DataCards/ActivityCard.js b/src/Admin/Components/Components/DataCards/ActivityCard.js
index 58497e2e..915df2f9 100644
--- a/src/Admin/Components/Components/DataCards/ActivityCard.js
+++ b/src/Admin/Components/Components/DataCards/ActivityCard.js
@@ -68,6 +68,7 @@ const ActivityCard = () => {
} else if (!isLoaded) {
return <LoadingSpinner text="Carregando..." />
} else {
+ console.log(item)
const DATA = [
{
subTitle: "ID",
diff --git a/src/Admin/Components/Components/DataCards/CommunityQuestionCard.js b/src/Admin/Components/Components/DataCards/CommunityQuestionCard.js
index 3a4b844e..b8ae952c 100644
--- a/src/Admin/Components/Components/DataCards/CommunityQuestionCard.js
+++ b/src/Admin/Components/Components/DataCards/CommunityQuestionCard.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';
// Maerial ui components
import Card from "@material-ui/core/Card";
@@ -30,11 +30,14 @@ import { useStyles } from "../../Styles/DataCard";
import EmailRoundedIcon from '@material-ui/icons/EmailRounded';
//imports from local files
import { GetAData } from "../../../Filters";
+import { Store } from '../../../../Store';
import { Link } from 'react-router-dom'
+import Unauthorized from "../Unauthorized";
import { getRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import LoadingSpinner from '../../../../Components/LoadingSpinner';
const CommunityQuestions = () => {
+ const { state } = useContext(Store);
const classes = useStyles();
const [error, setError] = useState(null); //Necessary to consult the API, catch errors
@@ -48,6 +51,22 @@ const CommunityQuestions = () => {
.toString();
};
+ const CheckUserPermission = () => {
+ let canUserEdit = false;
+
+ if (state.userIsLoggedIn) {
+ const roles = [...state.currentUser.roles];
+ for (let i = 0; i < roles.length; i++)
+ if (roles[i].name === 'admin' || roles[i].name === 'editor')
+ canUserEdit = true;
+ }
+ else {
+ canUserEdit = false;
+ }
+
+ return canUserEdit;
+ }
+
useEffect(() => {
const urlParams = new URLSearchParams(window.location.search);
const query = urlParams.get("question");
@@ -69,7 +88,7 @@ const CommunityQuestions = () => {
return <div>Houve um erro</div>;
} else if (!isLoaded) {
return <LoadingSpinner text="Carregando..." />
- } else {
+ } else if (CheckUserPermission()) {
const DATA = [
{
subTitle: "ID",
@@ -138,7 +157,7 @@ const CommunityQuestions = () => {
</CardContent>
</Card>
);
- }
+ } else return <Unauthorized />
};
export default CommunityQuestions;
diff --git a/src/Admin/Components/Components/DataCards/EducationalObjectsCard.js b/src/Admin/Components/Components/DataCards/EducationalObjectsCard.js
index 6f865726..08a8f325 100644
--- a/src/Admin/Components/Components/DataCards/EducationalObjectsCard.js
+++ b/src/Admin/Components/Components/DataCards/EducationalObjectsCard.js
@@ -116,6 +116,7 @@ const CommunityQuestions = () => {
} else if (!isLoaded) {
return <LoadingSpinner text="Carregando..." />;
} else {
+ console.log(item);
const DATA = [
{
subTitle: "ID",
diff --git a/src/Admin/Components/Components/Inputs/CreateInstitution.js b/src/Admin/Components/Components/Inputs/CreateInstitution.js
index a0ba3c1a..378c0960 100644
--- a/src/Admin/Components/Components/Inputs/CreateInstitution.js
+++ b/src/Admin/Components/Components/Inputs/CreateInstitution.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';
//imports material ui componets
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
@@ -27,11 +27,14 @@ import AddRoundedIcon from '@material-ui/icons/AddRounded';
import ListRoundedIcon from '@material-ui/icons/ListRounded';
//imports local files
import SnackBar from '../../../../Components/SnackbarComponent';
+import { Store } from '../../../../Store';
import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
+import Unauthorized from '../Unauthorized';
//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('');
@@ -98,6 +101,23 @@ const CreateInstitution = (props) => {
})
}
+ const CheckUserPermission = () => {
+ let canUserEdit = false;
+
+ if (state.userIsLoggedIn) {
+ const roles = [...state.currentUser.roles];
+ for (let i = 0; i < roles.length; i++)
+ if (roles[i].name === 'admin' || roles[i].name === 'editor')
+ canUserEdit = true;
+ }
+ else {
+ canUserEdit = false;
+ }
+
+ return canUserEdit;
+ }
+
+
//Handle submit
async function onSubmit() {
setIsLoading(true)
@@ -183,77 +203,80 @@ const CreateInstitution = (props) => {
onChange: (event) => CountryHandler(event)
}
]
- return (
- <Card>
- <SnackBar
- severity={snackInfo.icon}
- text={snackInfo.message}
- snackbarOpen={snackInfo.open}
- color={snackInfo.color}
- handleClose={() => setSnackInfo({
- message: '',
- icon: '',
- open: false,
- color: ''
- })}
- />
- <CardContent>
- <Grid container direction='row' justify='space-between' alignContent="center" alignItems="center" xs={12}>
- <Grid item>
- <Typography variant='h4'>
- {name}
- </Typography>
- </Grid>
- <Grid item>
- <Link style={{ textDecoration: 'none' }} to={'/admin/institutions'}>
- <Button
- onClick={props.BackToList}
- startIcon={<ListRoundedIcon />}
- variant='outlined'
- color='primary'
- >
- Listar
- </Button>
- </Link>
+
+ if (CheckUserPermission()) {
+ return (
+ <Card>
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() => setSnackInfo({
+ message: '',
+ icon: '',
+ open: false,
+ color: ''
+ })}
+ />
+ <CardContent>
+ <Grid container direction='row' justify='space-between' alignContent="center" alignItems="center" xs={12}>
+ <Grid item>
+ <Typography variant='h4'>
+ {name}
+ </Typography>
+ </Grid>
+ <Grid item>
+ <Link style={{ textDecoration: 'none' }} to={'/admin/institutions'}>
+ <Button
+ onClick={props.BackToList}
+ startIcon={<ListRoundedIcon />}
+ variant='outlined'
+ color='primary'
+ >
+ Listar
+ </Button>
+ </Link>
+ </Grid>
</Grid>
- </Grid>
- <div style={{ height: '1em' }}></div>
+ <div style={{ height: '1em' }}></div>
- <form style={{ display: 'flex', flexDirection: 'column' }}>
- {fields.map((field, index) => (
- <TextField
- key={index}
- required={field.required}
- error={field.error}
- helperText={field.error ? field.errorMessage : ''}
- style={{ width: '250px', marginBottom: '1em' }}
- label={field.label}
- value={field.value}
- onChange={field.onChange}
- type="search"
- multiline={true}
- />
- ))}
- </form>
- </CardContent>
- <CardAction>
- <Button
- onClick={() => {
- onSubmit();
- }}
- variant="contained"
- color="primary"
- disabled={isLoading}
- startIcon={isLoading ? null : <AddRoundedIcon />}
- >
- {
- isLoading ? <CircularProgress size={24} /> : 'Adicionar'
- }
- </Button>
- </CardAction>
- </Card>
- );
+ <form style={{ display: 'flex', flexDirection: 'column' }}>
+ {fields.map((field, index) => (
+ <TextField
+ key={index}
+ required={field.required}
+ error={field.error}
+ helperText={field.error ? field.errorMessage : ''}
+ style={{ width: '250px', marginBottom: '1em' }}
+ label={field.label}
+ value={field.value}
+ onChange={field.onChange}
+ type="search"
+ multiline={true}
+ />
+ ))}
+ </form>
+ </CardContent>
+ <CardAction>
+ <Button
+ onClick={() => {
+ onSubmit();
+ }}
+ variant="contained"
+ color="primary"
+ disabled={isLoading}
+ startIcon={isLoading ? null : <AddRoundedIcon />}
+ >
+ {
+ isLoading ? <CircularProgress size={24} /> : 'Adicionar'
+ }
+ </Button>
+ </CardAction>
+ </Card>
+ );
+ } else return <Unauthorized />
}
export default CreateInstitution;
\ No newline at end of file
diff --git a/src/Admin/Components/Components/Inputs/CreateLanguage.js b/src/Admin/Components/Components/Inputs/CreateLanguage.js
index 5cca9080..c9a65901 100644
--- a/src/Admin/Components/Components/Inputs/CreateLanguage.js
+++ b/src/Admin/Components/Components/Inputs/CreateLanguage.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';
//imports material ui componets
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
@@ -27,11 +27,14 @@ import AddRoundedIcon from '@material-ui/icons/AddRounded';
import ListRoundedIcon from '@material-ui/icons/ListRounded';
//imports local files
import SnackBar from '../../../../Components/SnackbarComponent';
+import { Store } from '../../../../Store';
import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
//router
import { Link } from 'react-router-dom';
+import Unauthorized from '../Unauthorized';
const CreateLanguage = (props) => {
+ const { state } = useContext(Store);
const [name, setName] = useState('Nova linguagem');
const [code, setCode] = useState('');
@@ -87,6 +90,22 @@ const CreateLanguage = (props) => {
})
}
+ const CheckUserPermission = () => {
+ let canUserEdit = false;
+
+ if (state.userIsLoggedIn) {
+ const roles = [...state.currentUser.roles];
+ for (let i = 0; i < roles.length; i++)
+ if (roles[i].name === 'admin' || roles[i].name === 'editor')
+ canUserEdit = true;
+ }
+ else {
+ canUserEdit = false;
+ }
+
+ return canUserEdit;
+ }
+
//Handle submit
async function onSubmit() {
setIsLoading(true)
@@ -160,77 +179,79 @@ const CreateLanguage = (props) => {
}
]
- return (
- <Card>
- <SnackBar
- severity={snackInfo.icon}
- text={snackInfo.message}
- snackbarOpen={snackInfo.open}
- color={snackInfo.color}
- handleClose={() => setSnackInfo({
- message: '',
- icon: '',
- open: false,
- color: ''
- })}
- />
- <CardContent>
- <Grid container direction='row' justify='space-between' alignItems="center" alignContent="center" xs={12}>
- <Grid item>
- <Typography variant='h4'>
- {name}
- </Typography>
+ if (CheckUserPermission()) {
+ return (
+ <Card>
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() => setSnackInfo({
+ message: '',
+ icon: '',
+ open: false,
+ color: ''
+ })}
+ />
+ <CardContent>
+ <Grid container direction='row' justify='space-between' alignItems="center" alignContent="center" xs={12}>
+ <Grid item>
+ <Typography variant='h4'>
+ {name}
+ </Typography>
+ </Grid>
+ <Grid item>
+ <Link to={'/admin/languages'} style={{ textDecoration: 'none' }}>
+ <Button
+ onClick={props.BackToList}
+ startIcon={<ListRoundedIcon />}
+ variant='outlined'
+ color='primary'
+ >
+ Listar
+ </Button>
+ </Link>
+ </Grid>
</Grid>
- <Grid item>
- <Link to={'/admin/languages'} style={{ textDecoration: 'none' }}>
- <Button
- onClick={props.BackToList}
- startIcon={<ListRoundedIcon />}
- variant='outlined'
- color='primary'
- >
- Listar
- </Button>
- </Link>
- </Grid>
- </Grid>
-
- <div style={{ height: '1em' }}></div>
-
- <form style={{ display: 'flex', flexDirection: 'column' }}>
- {fields.map((field, index) => (
- <TextField
- key={index}
- required={field.required}
- error={field.error}
- helperText={field.error ? field.errorMessage : ''}
- style={{ width: '250px', marginBottom: '1em' }}
- label={field.label}
- value={field.value}
- onChange={field.onChange}
- type="search"
- multiline={true}
- />
- ))}
- </form>
- </CardContent>
- <CardAction>
- <Button
- onClick={() => {
- onSubmit();
- }}
- variant="contained"
- color="primary"
- disabled={isLoading}
- startIcon={isLoading ? null : <AddRoundedIcon />}
- >
- {
- isLoading ? <CircularProgress size={24} /> : 'Adicionar'
- }
- </Button>
- </CardAction>
- </Card>
- )
+
+ <div style={{ height: '1em' }}></div>
+
+ <form style={{ display: 'flex', flexDirection: 'column' }}>
+ {fields.map((field, index) => (
+ <TextField
+ key={index}
+ required={field.required}
+ error={field.error}
+ helperText={field.error ? field.errorMessage : ''}
+ style={{ width: '250px', marginBottom: '1em' }}
+ label={field.label}
+ value={field.value}
+ onChange={field.onChange}
+ type="search"
+ multiline={true}
+ />
+ ))}
+ </form>
+ </CardContent>
+ <CardAction>
+ <Button
+ onClick={() => {
+ onSubmit();
+ }}
+ variant="contained"
+ color="primary"
+ disabled={isLoading}
+ startIcon={isLoading ? null : <AddRoundedIcon />}
+ >
+ {
+ isLoading ? <CircularProgress size={24} /> : 'Adicionar'
+ }
+ </Button>
+ </CardAction>
+ </Card>
+ )
+ } else return <Unauthorized />
}
export default CreateLanguage;
\ No newline at end of file
diff --git a/src/Admin/Components/Components/Inputs/CreateQuestion.js b/src/Admin/Components/Components/Inputs/CreateQuestion.js
index 37f15756..89fd3f85 100644
--- a/src/Admin/Components/Components/Inputs/CreateQuestion.js
+++ b/src/Admin/Components/Components/Inputs/CreateQuestion.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';
//imports material ui componets
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
@@ -27,12 +27,15 @@ import AddRoundedIcon from '@material-ui/icons/AddRounded';
import MenuItem from "@material-ui/core/MenuItem";
import ListRoundedIcon from '@material-ui/icons/ListRounded';
//imports local files
+import { Store } from '../../../../Store';
import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
+import Unauthorized from '../Unauthorized';
import SnackBar from '../../../../Components/SnackbarComponent';
//router
import { Link } from 'react-router-dom';
const CreateQuestion = (props) => {
+ const { state } = useContext(Store);
const [status, setStatus] = useState('');
const [description, setDescription] = useState('');
@@ -77,6 +80,23 @@ const CreateQuestion = (props) => {
})
}
+ const CheckUserPermission = () => {
+ let canUserEdit = false;
+
+ if (state.userIsLoggedIn) {
+ const roles = [...state.currentUser.roles];
+ for (let i = 0; i < roles.length; i++)
+ if (roles[i].name === 'admin')
+ canUserEdit = true;
+ }
+ else {
+ canUserEdit = false;
+ }
+
+ return canUserEdit;
+ }
+
+
//Handle submit
async function onSubmit() {
if (!isEmpty(description)) {
@@ -120,6 +140,7 @@ const CreateQuestion = (props) => {
const handleChange = (e) => {
const value = e.target.value;
setStatus(value);
+ console.log(status)
};
// Fields
@@ -145,98 +166,100 @@ const CreateQuestion = (props) => {
},
];
- return (
- <Card>
- <SnackBar
- severity={snackInfo.icon}
- text={snackInfo.message}
- snackbarOpen={snackInfo.open}
- color={snackInfo.color}
- handleClose={() => setSnackInfo({
- message: '',
- icon: '',
- open: false,
- color: ''
- })}
- />
- <CardContent>
- <Grid container direction='row' justify='space-between' alignContent="center" alignItems="center" xs={12}>
- <Grid item>
- <Typography variant='h4'>
- Nova question
- </Typography>
- </Grid>
- <Grid item>
- <Link to={'/admin/Questions'} style={{ textDecoration: 'none' }}>
- <Button
- onClick={props.BackToList}
- startIcon={<ListRoundedIcon />}
- variant='outlined'
- color='primary'
- >
- Listar
- </Button>
- </Link>
- </Grid>
- </Grid>
-
- <div style={{ height: '1em' }}></div>
-
- <form style={{ display: 'flex', flexDirection: 'column' }}>
- <>
- <TextField
- select
- label="Status"
- value={status ? status : ""}
- style={{ width: '250px', marginBottom: '1em' }}
- onChange={handleChange}
- >
- {STATUS_OPTIONS.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.value}
- style={option.value === status ? { color: 'blue' } : { color: 'black' }}
+ if (CheckUserPermission()) {
+ return (
+ <Card>
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() => setSnackInfo({
+ message: '',
+ icon: '',
+ open: false,
+ color: ''
+ })}
+ />
+ <CardContent>
+ <Grid container direction='row' justify='space-between' alignContent="center" alignItems="center" xs={12}>
+ <Grid item>
+ <Typography variant='h4'>
+ Nova question
+ </Typography>
+ </Grid>
+ <Grid item>
+ <Link to={'/admin/Questions'} style={{ textDecoration: 'none' }}>
+ <Button
+ onClick={props.BackToList}
+ startIcon={<ListRoundedIcon />}
+ variant='outlined'
+ color='primary'
>
- {
- option.label
- }
- </MenuItem>
- ))}
- </TextField>
- {fields.map((field, index) => (
+ Listar
+ </Button>
+ </Link>
+ </Grid>
+ </Grid>
+
+ <div style={{ height: '1em' }}></div>
+
+ <form style={{ display: 'flex', flexDirection: 'column' }}>
+ <>
<TextField
- key={index}
- required={field.required}
- error={field.error}
- helperText={field.error ? field.errorMessage : ''}
+ select
+ label="Status"
+ value={status ? status : ""}
style={{ width: '250px', marginBottom: '1em' }}
- label={field.label}
- value={field.value}
- onChange={field.onChange}
- type="search"
- multiline={true}
- />
- ))}
- </>
- </form>
- </CardContent>
- <CardAction>
- <Button
- onClick={() => {
- onSubmit();
- }}
- variant="contained"
- color="primary"
- disabled={isLoading}
- startIcon={isLoading ? null : <AddRoundedIcon />}
- >
- {
- isLoading ? <CircularProgress size={24} /> : 'Adicionar'
- }
- </Button>
- </CardAction>
- </Card>
- );
+ onChange={handleChange}
+ >
+ {STATUS_OPTIONS.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.value}
+ style={option.value === status ? { color: 'blue' } : { color: 'black' }}
+ >
+ {
+ option.label
+ }
+ </MenuItem>
+ ))}
+ </TextField>
+ {fields.map((field, index) => (
+ <TextField
+ key={index}
+ required={field.required}
+ error={field.error}
+ helperText={field.error ? field.errorMessage : ''}
+ style={{ width: '250px', marginBottom: '1em' }}
+ label={field.label}
+ value={field.value}
+ onChange={field.onChange}
+ type="search"
+ multiline={true}
+ />
+ ))}
+ </>
+ </form>
+ </CardContent>
+ <CardAction>
+ <Button
+ onClick={() => {
+ onSubmit();
+ }}
+ variant="contained"
+ color="primary"
+ disabled={isLoading}
+ startIcon={isLoading ? null : <AddRoundedIcon />}
+ >
+ {
+ isLoading ? <CircularProgress size={24} /> : 'Adicionar'
+ }
+ </Button>
+ </CardAction>
+ </Card>
+ );
+ } else return <Unauthorized />
}
export default CreateQuestion;
\ No newline at end of file
diff --git a/src/Admin/Components/Components/Inputs/CreateRating.js b/src/Admin/Components/Components/Inputs/CreateRating.js
index 3837c9e3..3a8907f9 100644
--- a/src/Admin/Components/Components/Inputs/CreateRating.js
+++ b/src/Admin/Components/Components/Inputs/CreateRating.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';
//imports material ui componets
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
@@ -26,13 +26,16 @@ import CircularProgress from '@material-ui/core/CircularProgress';
import AddRoundedIcon from '@material-ui/icons/AddRounded';
import ListRoundedIcon from '@material-ui/icons/ListRounded';
//imports local files
+import { Store } from '../../../../Store';
import SnackBar from '../../../../Components/SnackbarComponent';
//imports services
import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
//router
import {Link} from 'react-router-dom';
+import Unauthorized from '../Unauthorized';
const CreateRating = (props) => {
+ const { state } = useContext(Store);
const [name, setName] = useState('Novo rating');
const [description, setDescription] = useState('');
@@ -93,6 +96,22 @@ const CreateRating = (props) => {
})
}
+ const CheckUserPermission = () => {
+ let canUserEdit = false;
+
+ if (state.userIsLoggedIn) {
+ const roles = [...state.currentUser.roles];
+ for (let i = 0; i < roles.length; i++)
+ if (roles[i].name === 'admin' || roles[i].name === 'editor')
+ canUserEdit = true;
+ }
+ else {
+ canUserEdit = false;
+ }
+
+ return canUserEdit;
+ }
+
//Handle submit
async function onSubmit() {
setIsLoading(true)
@@ -157,77 +176,79 @@ const CreateRating = (props) => {
}
]
- return (
- <Card>
- <SnackBar
- severity={snackInfo.icon}
- text={snackInfo.message}
- snackbarOpen={snackInfo.open}
- color={snackInfo.color}
- handleClose={() => setSnackInfo({
- message: '',
- icon: '',
- open: false,
- color: ''
- })}
- />
- <CardContent>
- <Grid container direction='row' justify='space-between' alignItems="center" alignContent="center" xs={12}>
- <Grid item>
- <Typography variant='h4'>
- {name}
- </Typography>
- </Grid>
- <Grid item>
- <Link to={'/admin/Ratings'} style={{textDecoration: 'none'}}>
- <Button
- onClick={props.BackToList}
- startIcon={<ListRoundedIcon />}
- variant='outlined'
- color='primary'
- >
- Listar
- </Button>
- </Link>
+ if(CheckUserPermission()) {
+ return (
+ <Card>
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() => setSnackInfo({
+ message: '',
+ icon: '',
+ open: false,
+ color: ''
+ })}
+ />
+ <CardContent>
+ <Grid container direction='row' justify='space-between' alignItems="center" alignContent="center" xs={12}>
+ <Grid item>
+ <Typography variant='h4'>
+ {name}
+ </Typography>
+ </Grid>
+ <Grid item>
+ <Link to={'/admin/Ratings'} style={{textDecoration: 'none'}}>
+ <Button
+ onClick={props.BackToList}
+ startIcon={<ListRoundedIcon />}
+ variant='outlined'
+ color='primary'
+ >
+ Listar
+ </Button>
+ </Link>
+ </Grid>
</Grid>
- </Grid>
-
- <div style={{ height: '1em' }}></div>
-
- <form style={{ display: 'flex', flexDirection: 'column' }}>
- {fields.map((field, index) => (
- <TextField
- key={index}
- required={field.required}
- error={field.error}
- helperText={field.error ? field.errorMessage : ''}
- style={{ width: '250px', marginBottom: '1em' }}
- label={field.label}
- value={field.value}
- onChange={field.onChange}
- type="search"
- multiline={true}
- />
- ))}
- </form>
- </CardContent>
- <CardAction>
- <Button
- onClick={() => {
- onSubmit();
- }}
- variant="contained"
- color="primary"
- disabled={isLoading}
- startIcon={isLoading ? null : <AddRoundedIcon />}
- >
- {
- isLoading ? <CircularProgress size={24} /> : 'Adicionar'
- }
- </Button>
- </CardAction>
- </Card>
- );
+
+ <div style={{ height: '1em' }}></div>
+
+ <form style={{ display: 'flex', flexDirection: 'column' }}>
+ {fields.map((field, index) => (
+ <TextField
+ key={index}
+ required={field.required}
+ error={field.error}
+ helperText={field.error ? field.errorMessage : ''}
+ style={{ width: '250px', marginBottom: '1em' }}
+ label={field.label}
+ value={field.value}
+ onChange={field.onChange}
+ type="search"
+ multiline={true}
+ />
+ ))}
+ </form>
+ </CardContent>
+ <CardAction>
+ <Button
+ onClick={() => {
+ onSubmit();
+ }}
+ variant="contained"
+ color="primary"
+ disabled={isLoading}
+ startIcon={isLoading ? null : <AddRoundedIcon />}
+ >
+ {
+ isLoading ? <CircularProgress size={24} /> : 'Adicionar'
+ }
+ </Button>
+ </CardAction>
+ </Card>
+ );
+ } else return <Unauthorized/>
}
export default CreateRating;
\ No newline at end of file
diff --git a/src/Admin/Components/Components/Inputs/CreateRole.js b/src/Admin/Components/Components/Inputs/CreateRole.js
index 421c8174..94afb024 100644
--- a/src/Admin/Components/Components/Inputs/CreateRole.js
+++ b/src/Admin/Components/Components/Inputs/CreateRole.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';
//imports material ui componets
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
@@ -27,11 +27,14 @@ import AddRoundedIcon from '@material-ui/icons/AddRounded';
import ListRoundedIcon from '@material-ui/icons/ListRounded';
//imports local files
import SnackBar from '../../../../Components/SnackbarComponent';
+import { Store } from '../../../../Store';
import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
//router
import { Link } from 'react-router-dom';
+import Unauthorized from '../Unauthorized';
const CreateRole = (props) => {
+ const { state } = useContext(Store);
const [name, setName] = useState('Nova role');
const [desc, setDesc] = useState('');
@@ -87,6 +90,23 @@ const CreateRole = (props) => {
})
}
+ const CheckUserPermission = () => {
+ let canUserEdit = false;
+
+ if (state.userIsLoggedIn) {
+ const roles = [...state.currentUser.roles];
+ for (let i = 0; i < roles.length; i++)
+ if (roles[i].name === 'admin' || roles[i].name === 'editor')
+ canUserEdit = true;
+ }
+ else {
+ canUserEdit = false;
+ }
+
+ return canUserEdit;
+ }
+
+
//Handle submit
async function onSubmit() {
setIsLoading(true)
@@ -150,77 +170,79 @@ const CreateRole = (props) => {
}
]
- return (
- <Card>
- <SnackBar
- severity={snackInfo.icon}
- text={snackInfo.message}
- snackbarOpen={snackInfo.open}
- color={snackInfo.color}
- handleClose={() => setSnackInfo({
- message: '',
- icon: '',
- open: false,
- color: ''
- })}
- />
- <CardContent>
- <Grid container direction='row' justify='space-between' alignItems="center" alignContent="center" xs={12}>
- <Grid item>
- <Typography variant='h4'>
- {name}
- </Typography>
- </Grid>
- <Grid item>
- <Link to={'/admin/permissions'} style={{ textDecoration: 'none' }}>
- <Button
- onClick={props.BackToList}
- startIcon={<ListRoundedIcon />}
- variant='outlined'
- color='primary'
- >
- Listar
- </Button>
- </Link>
+ if (CheckUserPermission()) {
+ return (
+ <Card>
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() => setSnackInfo({
+ message: '',
+ icon: '',
+ open: false,
+ color: ''
+ })}
+ />
+ <CardContent>
+ <Grid container direction='row' justify='space-between' alignItems="center" alignContent="center" xs={12}>
+ <Grid item>
+ <Typography variant='h4'>
+ {name}
+ </Typography>
+ </Grid>
+ <Grid item>
+ <Link to={'/admin/permissions'} style={{ textDecoration: 'none' }}>
+ <Button
+ onClick={props.BackToList}
+ startIcon={<ListRoundedIcon />}
+ variant='outlined'
+ color='primary'
+ >
+ Listar
+ </Button>
+ </Link>
+ </Grid>
</Grid>
- </Grid>
-
- <div style={{ height: '1em' }}></div>
-
- <form style={{ display: 'flex', flexDirection: 'column' }}>
- {fields.map((field, index) => (
- <TextField
- key={index}
- required={field.required}
- error={field.error}
- helperText={field.error ? field.errorMessage : ''}
- style={{ width: '250px', marginBottom: '1em' }}
- label={field.label}
- value={field.value}
- onChange={field.onChange}
- type="search"
- multiline={true}
- />
- ))}
- </form>
- </CardContent>
- <CardAction>
- <Button
- onClick={() => {
- onSubmit();
- }}
- variant="contained"
- color="primary"
- disabled={isLoading}
- startIcon={isLoading ? null : <AddRoundedIcon />}
- >
- {
- isLoading ? <CircularProgress size={24} /> : 'Adicionar'
- }
- </Button>
- </CardAction>
- </Card>
- )
+
+ <div style={{ height: '1em' }}></div>
+
+ <form style={{ display: 'flex', flexDirection: 'column' }}>
+ {fields.map((field, index) => (
+ <TextField
+ key={index}
+ required={field.required}
+ error={field.error}
+ helperText={field.error ? field.errorMessage : ''}
+ style={{ width: '250px', marginBottom: '1em' }}
+ label={field.label}
+ value={field.value}
+ onChange={field.onChange}
+ type="search"
+ multiline={true}
+ />
+ ))}
+ </form>
+ </CardContent>
+ <CardAction>
+ <Button
+ onClick={() => {
+ onSubmit();
+ }}
+ variant="contained"
+ color="primary"
+ disabled={isLoading}
+ startIcon={isLoading ? null : <AddRoundedIcon />}
+ >
+ {
+ isLoading ? <CircularProgress size={24} /> : 'Adicionar'
+ }
+ </Button>
+ </CardAction>
+ </Card>
+ )
+ } else return <Unauthorized />
}
export default CreateRole;
\ No newline at end of file
diff --git a/src/Admin/Components/Components/Inputs/EditCollection.js b/src/Admin/Components/Components/Inputs/EditCollection.js
index 98b7a38f..13aabcf1 100644
--- a/src/Admin/Components/Components/Inputs/EditCollection.js
+++ b/src/Admin/Components/Components/Inputs/EditCollection.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 material ui components
import { Typography, TextField, Button, Grid } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
@@ -28,7 +28,9 @@ import SaveIcon from '@material-ui/icons/Save';
import MenuItem from "@material-ui/core/MenuItem";
//imports local files
import SnackBar from '../../../../Components/SnackbarComponent';
+import Unauthorized from '../Unauthorized';
import { getRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
+import { Store } from '../../../../Store';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
import { EditFilter, GetAData } from '../../../Filters';
//routers
@@ -37,7 +39,7 @@ import ClassicEditor from "@ckeditor/ckeditor5-build-classic"
import { CKEditor } from '@ckeditor/ckeditor5-react';
const EditCollection = () => {
-
+ const { state } = useContext(Store);
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get("collection");
@@ -105,6 +107,7 @@ const EditCollection = () => {
const handleChange = (e) => {
const value = e.target.value;
setPrivacy(value);
+ console.log(privacy)
};
// Handle snack infos
@@ -117,6 +120,22 @@ const EditCollection = () => {
})
}
+ const CheckUserPermission = () => {
+ let canUserEdit = false;
+
+ if (state.userIsLoggedIn) {
+ const roles = [...state.currentUser.roles];
+ for (let i = 0; i < roles.length; i++)
+ if (roles[i].name === 'admin' || roles[i].name === 'editor')
+ canUserEdit = true;
+ }
+ else {
+ canUserEdit = false;
+ }
+
+ return canUserEdit;
+ }
+
const onSubmit = async () => {
setIsLoading(true)
const api = EditFilter('collections', id)
@@ -167,7 +186,7 @@ const EditCollection = () => {
return <div> Houve um erro... </div>
} else if (!isLoaded) {
return <LoadingSpinner text="Carregando..." />
- } else {
+ } else if (CheckUserPermission()) {
return (
<Card>
<SnackBar
@@ -267,7 +286,7 @@ const EditCollection = () => {
</CardAction>
</Card>
)
- }
+ } else return <Unauthorized />
}
export default EditCollection;
\ No newline at end of file
diff --git a/src/Admin/Components/Components/Inputs/EditEducationalObect.js b/src/Admin/Components/Components/Inputs/EditEducationalObect.js
index 0335f596..59963830 100644
--- a/src/Admin/Components/Components/Inputs/EditEducationalObect.js
+++ b/src/Admin/Components/Components/Inputs/EditEducationalObect.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 PropTypes from "prop-types";
import SwipeableViews from "react-swipeable-views";
import moment from "moment";
@@ -36,6 +36,8 @@ import Box from "@material-ui/core/Box";
import SaveIcon from "@material-ui/icons/Save";
//imports local files
import SnackBar from "../../../../Components/SnackbarComponent";
+import { Store } from "../../../../Store";
+import Unauthorized from "../Unauthorized";
import LoadingSpinner from "../../../../Components/LoadingSpinner";
import {
fetchAllRequest,
@@ -61,6 +63,7 @@ const useStyles = makeStyles((theme) => ({
let text;
const EditEducationalObject = () => {
+ const { state } = useContext(Store);
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get("learnObj");
@@ -259,6 +262,7 @@ const EditEducationalObject = () => {
"language_ids": languagesID,
},
};
+ console.log(text)
putRequest(
api,
body,
@@ -378,6 +382,21 @@ const EditEducationalObject = () => {
},
];
+ const CheckUserPermission = () => {
+ let canUserEdit = false;
+
+ if (state.userIsLoggedIn) {
+ const roles = [...state.currentUser.roles];
+ for (let i = 0; i < roles.length; i++)
+ if (roles[i].name === "admin" || roles[i].name === "editor")
+ canUserEdit = true;
+ } else {
+ canUserEdit = false;
+ }
+
+ return canUserEdit;
+ };
+
useEffect(() => {
const urls = [
`/learning_objects/${id}`,
@@ -427,7 +446,7 @@ const EditEducationalObject = () => {
return <div> Houve um erro... </div>;
} else if (!isLoaded) {
return <LoadingSpinner text="Carregando..." />;
- } else {
+ } else if (CheckUserPermission()) {
return (
<Card variant="outlined">
<SnackBar
@@ -608,7 +627,7 @@ const EditEducationalObject = () => {
</CardAction>
</Card>
);
- }
+ } else return <Unauthorized />;
};
export default EditEducationalObject;
diff --git a/src/Admin/Components/Components/Inputs/EditLanguage.js b/src/Admin/Components/Components/Inputs/EditLanguage.js
index c0b71d0a..44df71ce 100644
--- a/src/Admin/Components/Components/Inputs/EditLanguage.js
+++ b/src/Admin/Components/Components/Inputs/EditLanguage.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 material ui components
import { Typography, TextField, Button, Grid, ButtonGroup } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
@@ -27,6 +27,7 @@ import ListRoundedIcon from '@material-ui/icons/ListRounded';
import SaveIcon from '@material-ui/icons/Save';
//imports local files
import SnackBar from '../../../../Components/SnackbarComponent';
+import { Store } from '../../../../Store';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
//imports services
import { getRequest, putRequest, deleteRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
@@ -34,9 +35,10 @@ import { EditFilter, GetAData, DeleteFilter } from '../../../Filters';
import DeleteRoundedIcon from "@material-ui/icons/DeleteRounded";
//routers
import { Link, useHistory } from 'react-router-dom';
+import Unauthorized from '../Unauthorized';
const EditLanguage = () => {
-
+ const { state } = useContext(Store);
let history = useHistory()
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get("language");
@@ -145,6 +147,23 @@ const EditLanguage = () => {
})
}
+ const CheckUserPermission = () => {
+ let canUserEdit = false;
+
+ if (state.userIsLoggedIn) {
+ const roles = [...state.currentUser.roles];
+ for (let i = 0; i < roles.length; i++)
+ if (roles[i].name === 'admin' || roles[i].name === 'editor')
+ canUserEdit = true;
+ }
+ else {
+ canUserEdit = false;
+ }
+
+ return canUserEdit;
+ }
+
+
const onSubmit = async () => {
setIsLoading(true)
const api = EditFilter('languages', id)
@@ -213,7 +232,7 @@ const EditLanguage = () => {
return <div> Houve um erro... </div>
} else if (!isLoaded) {
return <LoadingSpinner text="Carregando..." />
- } else {
+ } else if (CheckUserPermission()) {
return (
<Card>
<SnackBar
@@ -291,7 +310,7 @@ const EditLanguage = () => {
</CardAction>
</Card>
)
- }
+ } else return <Unauthorized />
}
export default EditLanguage;
\ No newline at end of file
diff --git a/src/Admin/Components/Components/Inputs/EditRating.js b/src/Admin/Components/Components/Inputs/EditRating.js
index e4e08aa1..1b8e0e6f 100644
--- a/src/Admin/Components/Components/Inputs/EditRating.js
+++ b/src/Admin/Components/Components/Inputs/EditRating.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 material ui components
import { Typography, TextField, Button, Grid } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
@@ -27,15 +27,17 @@ import ListRoundedIcon from '@material-ui/icons/ListRounded';
import SaveIcon from '@material-ui/icons/Save';
//imports local files
import SnackBar from '../../../../Components/SnackbarComponent';
+import { Store } from '../../../../Store';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
//imports services
import { getRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { EditFilter, GetAData } from '../../../Filters';
//routers
import { Link } from 'react-router-dom';
+import Unauthorized from '../Unauthorized';
const EditRating = () => {
-
+ const { state } = useContext(Store);
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get("rating");
@@ -129,6 +131,23 @@ const EditRating = () => {
})
}
+ const CheckUserPermission = () => {
+ let canUserEdit = false;
+
+ if (state.userIsLoggedIn) {
+ const roles = [...state.currentUser.roles];
+ for (let i = 0; i < roles.length; i++)
+ if (roles[i].name === 'admin' || roles[i].name === 'editor')
+ canUserEdit = true;
+ }
+ else {
+ canUserEdit = false;
+ }
+
+ return canUserEdit;
+ }
+
+
const onSubmit = async () => {
setIsLoading(true)
if (!isEmpty(name) && !isEmpty(description)) {
@@ -192,7 +211,7 @@ const EditRating = () => {
return <div> Houve um erro... </div>
} else if (!isLoaded) {
return <LoadingSpinner text="Carregando..." />
- } else {
+ } else if (CheckUserPermission()) {
return (
<Card>
<SnackBar
@@ -264,7 +283,7 @@ const EditRating = () => {
</CardAction>
</Card>
)
- }
+ } else return <Unauthorized />
}
export default EditRating;
\ No newline at end of file
diff --git a/src/Admin/Components/Components/Inputs/EditRoles.js b/src/Admin/Components/Components/Inputs/EditRoles.js
index c9c49f58..4b3aa488 100644
--- a/src/Admin/Components/Components/Inputs/EditRoles.js
+++ b/src/Admin/Components/Components/Inputs/EditRoles.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 material ui components
import { Typography, TextField, Button, Grid } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
@@ -29,14 +29,17 @@ import ButtonGroup from "@material-ui/core/ButtonGroup";
import DeleteRoundedIcon from "@material-ui/icons/DeleteRounded";
//imports local files
import SnackBar from '../../../../Components/SnackbarComponent';
+import { Store } from '../../../../Store';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
//imports services
import { getRequest, putRequest, deleteRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { EditFilter, GetAData, DeleteFilter } from '../../../Filters';
//routers
import { Link, useHistory } from 'react-router-dom';
+import Unauthorized from '../Unauthorized';
const EditLanguage = () => {
+ const { state } = useContext(Store);
let history = useHistory()
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get("role");
@@ -122,6 +125,23 @@ const EditLanguage = () => {
},
]
+ const CheckUserPermission = () => {
+ let canUserEdit = false;
+
+ if (state.userIsLoggedIn) {
+ const roles = [...state.currentUser.roles];
+ for (let i = 0; i < roles.length; i++)
+ if (roles[i].name === 'admin' || roles[i].name === 'editor')
+ canUserEdit = true;
+ }
+ else {
+ canUserEdit = false;
+ }
+
+ return canUserEdit;
+ }
+
+
const onSubmit = async () => {
setIsLoading(true)
const api = EditFilter('roles', id)
@@ -206,7 +226,7 @@ const EditLanguage = () => {
return <div> Houve um erro... </div>
} else if (!isLoaded) {
return <LoadingSpinner text="Carregando..." />
- } else {
+ } else if (CheckUserPermission()) {
return (
<Card>
<SnackBar
@@ -284,7 +304,7 @@ const EditLanguage = () => {
</CardAction>
</Card>
)
- }
+ } else return <Unauthorized />
}
export default EditLanguage;
\ No newline at end of file
diff --git a/src/Admin/Components/Components/Inputs/EditUser.js b/src/Admin/Components/Components/Inputs/EditUser.js
index d0953435..fe9a61c8 100644
--- a/src/Admin/Components/Components/Inputs/EditUser.js
+++ b/src/Admin/Components/Components/Inputs/EditUser.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 material ui components
import { Typography, TextField, Button, Grid } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
@@ -34,12 +34,14 @@ import AddRoundedIcon from '@material-ui/icons/AddRounded';
import MenuItem from '@material-ui/core/MenuItem';
//imports local files
import SnackBar from '../../../../Components/SnackbarComponent';
+import { Store } from '../../../../Store';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
//imports services
import { getRequest, putRequest, deleteRequest, postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { EditFilter, GetAData } from '../../../Filters';
//routers
import { Link, useHistory } from 'react-router-dom';
+import Unauthorized from '../Unauthorized';
const useStyles = makeStyles((theme) => ({
root: {
@@ -58,7 +60,7 @@ const useStyles = makeStyles((theme) => ({
const EditUser = () => {
const classes = useStyles();
let history = useHistory();
-
+ const { state } = useContext(Store)
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get("id");
@@ -260,6 +262,22 @@ const EditUser = () => {
})
}
+ const CheckUserPermission = () => {
+ let canUserEdit = false;
+
+ if (state.userIsLoggedIn) {
+ const roles = [...state.currentUser.roles];
+ for (let i = 0; i < roles.length; i++)
+ if (roles[i].name === 'admin' || roles[i].name === 'editor')
+ canUserEdit = true;
+ }
+ else {
+ canUserEdit = false;
+ }
+
+ return canUserEdit;
+ }
+
const handleDelete = (chipToDelete) => () => {
const currRolesList = [...rolesList];
currRolesList.push({
@@ -464,7 +482,7 @@ const EditUser = () => {
return <div> Houve um erro... </div>
} else if (!isLoaded) {
return <LoadingSpinner text="Carregando..." />
- } else {
+ } else if (CheckUserPermission()) {
return (
<Card>
<SnackBar
@@ -603,7 +621,7 @@ const EditUser = () => {
</CardAction>
</Card>
)
- }
+ } else return <Unauthorized />
}
export default EditUser;
diff --git a/src/Admin/Components/Components/Inputs/IntitutionsInputs.js b/src/Admin/Components/Components/Inputs/IntitutionsInputs.js
index 874879d4..ca1ea9df 100644
--- a/src/Admin/Components/Components/Inputs/IntitutionsInputs.js
+++ b/src/Admin/Components/Components/Inputs/IntitutionsInputs.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 material ui components
import { TextField, Button } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
@@ -27,7 +27,9 @@ import Typography from "@material-ui/core/Typography";
import ListRoundedIcon from "@material-ui/icons/ListRounded";
import Grid from "@material-ui/core/Grid";
//imports local files
+import Unauthorized from '../Unauthorized';
import SnackBar from '../../../../Components/SnackbarComponent';
+import { Store } from '../../../../Store';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
//imports services
import { putRequest, getRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
@@ -36,7 +38,7 @@ import { EditFilter, GetAData } from '../../../Filters';
import { Link } from 'react-router-dom';
const EditInstitution = () => {
-
+ const { state } = useContext(Store);
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get("institution");
@@ -107,6 +109,22 @@ const EditInstitution = () => {
})
}
+ const CheckUserPermission = () => {
+ let canUserEdit = false;
+
+ if (state.userIsLoggedIn) {
+ const roles = [...state.currentUser.roles];
+ for (let i = 0; i < roles.length; i++)
+ if (roles[i].name === 'admin' || roles[i].name === 'editor')
+ canUserEdit = true;
+ }
+ else {
+ canUserEdit = false;
+ }
+
+ return canUserEdit;
+ }
+
//Handle submit
async function onSubmit() {
setIsLoading(true)
@@ -216,7 +234,7 @@ const EditInstitution = () => {
return <div> Erro... </div>
} else if (!isLoaded) {
return <LoadingSpinner text="Carregando..." />
- } else {
+ } else if (CheckUserPermission()) {
return (
<Card>
<SnackBar
@@ -295,6 +313,8 @@ const EditInstitution = () => {
</CardContent>
</Card>
);
+ } else {
+ return <Unauthorized />
}
}
diff --git a/src/Admin/Components/Components/Inputs/NoteVarInputs.js b/src/Admin/Components/Components/Inputs/NoteVarInputs.js
index 96b951f9..3c1542ec 100644
--- a/src/Admin/Components/Components/Inputs/NoteVarInputs.js
+++ b/src/Admin/Components/Components/Inputs/NoteVarInputs.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 material ui components
import { TextField, Button } from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
@@ -28,15 +28,17 @@ import ListRoundedIcon from "@material-ui/icons/ListRounded";
import Grid from '@material-ui/core/Grid';
//imports local files
import SnackBar from '../../../../Components/SnackbarComponent';
+import { Store } from '../../../../Store';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
//imports services
import { getRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { EditFilter, GetAData } from '../../../Filters';
//Routers
import { Link } from 'react-router-dom';
+import Unauthorized from '../Unauthorized';
const NoteVarInputs = () => {
-
+ const { state } = useContext(Store);
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get("id");
@@ -200,6 +202,23 @@ const NoteVarInputs = () => {
)
}
+ const CheckUserPermission = () => {
+ let canUserEdit = false;
+
+ if (state.userIsLoggedIn) {
+ const roles = [...state.currentUser.roles];
+ for (let i = 0; i < roles.length; i++)
+ if (roles[i].name === 'admin' || roles[i].name === 'editor')
+ canUserEdit = true;
+ }
+ else {
+ canUserEdit = false;
+ }
+
+ return canUserEdit;
+ }
+
+
useEffect(() => {
getRequest(
GetAData("scores", id),
@@ -220,7 +239,7 @@ const NoteVarInputs = () => {
return <div>Houve um erro...</div>
} else if (!isLoaded) {
return <LoadingSpinner text="Carregando..." />
- } else {
+ } else if (CheckUserPermission()) {
return (
<Card>
<SnackBar
@@ -297,7 +316,7 @@ const NoteVarInputs = () => {
</CardContent>
</Card>
)
- }
+ } else return <Unauthorized />
}
export default NoteVarInputs;
\ No newline at end of file
diff --git a/src/Admin/Components/Components/Unauthorized.js b/src/Admin/Components/Components/Unauthorized.js
index 3408a576..245a219b 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 [openSnack, setOpenSnack] = useState(true);
return (
- <ContentDiv contrast={state.contrast} style={{ textAlign: 'center' }}>
+ <div style={{ textAlign: 'center' }}>
<SnackBar
severity='warning'
text='Você não tem as permissões necessárias'
@@ -50,25 +48,17 @@ const Unauthorized = () => {
</Link>
</StyledDiv>
</>
- </ContentDiv>
+ </div>
);
}
-const ContentDiv = styled('div')`
- background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
- color: ${props => props.contrast === "" ? "#666" : "white"} !important;
- a {
- color: ${props => props.contrast === "" ? "" : "yellow"} !important;
- text-decoration: ${props => props.contrast === "" ? "none" : "underline yellow"} !important;
- }
-`
-
const StyledDiv = styled('div')`
width: 100%;
- padding-top: 70px;
- padding-bottom: 70px;
+ margin-top: 70px;
+ margin-bottom: 70px;
justify-content : space-evenly;
display: flex;
+ color: #757575;
text-align:center;
`
diff --git a/src/App.css b/src/App.css
index d1221de1..c8cb4a80 100644
--- a/src/App.css
+++ b/src/App.css
@@ -16,44 +16,3 @@ 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/>.*/
-.ContrastBackColor {
- background-color: black !important;
-}
-
-.BackColor {
- background-color: white !important;
-}
-
-.ContrastText{
- color: white !important;
-}
-
-.Text{
- color: #666 !important;
-}
-
-.ContrastTextColor {
- color: white !important;
-}
-
-.ContrastLinkColor {
- color: yellow !important;
- text-decoration: underline !important;
- cursor: pointer;
-}
-
-.ContrastIconColor {
- color: white !important;
-}
-
-.ContrastBorder {
- border: 1px solid white !important;
-}
-
-.Border {
- border: 1px solid #666 !important;
-}
-
-.MuiListNoPadding {
- padding: 0 !important;
-}
diff --git a/src/App.js b/src/App.js
index 458d25ce..c06b1193 100644
--- a/src/App.js
+++ b/src/App.js
@@ -23,8 +23,6 @@ import { Store } from './Store'
import LoadingSpinner from './Components/LoadingSpinner';
import { BrowserRouter, Switch, Route, Redirect } from "react-router-dom";
import createBrowserHistory from 'history/createBrowserHistory'
-import './App.css';
-import ContrastBar from './Components/Accessibility/ContrastBar';
const AdminTemplate = React.lazy(() => import('./Admin/Components/Components/AdminTemplate'));
const Header = React.lazy(() => import("./Components/Header"));
@@ -34,7 +32,6 @@ const EcFooter = React.lazy(() => import("./Components/EcFooter"));
const GNUAGPLfooter = React.lazy(() => import("./Components/AGPLFooter"));
const UserPage = React.lazy(() => import("./Pages/UserPage"));
const UserTerms = React.lazy(() => import("./Pages/UserTerms"));
-const SummarizedUserTerms = React.lazy(() => import("./Pages/SummarizedUserTerms"));
const Contact = React.lazy(() => import("./Pages/Contact"));
const AboutPage = React.lazy(() => import("./Pages/AboutPage"));
const HelpCenter = React.lazy(() => import("./Pages/HelpCenter"));
@@ -101,25 +98,6 @@ const EditRole = React.lazy(() => import("./Admin/Components/Components/Inputs/E
const CreateRole = React.lazy(() => import("./Admin/Components/Components/Inputs/CreateRole"));
const BlockedUser = React.lazy(() => import("./Admin/Pages/Pages/SubPages/BlockedUsers"));
-async function supportsWebp() {
- if (!createImageBitmap) return false;
-
- const webpData = 'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=';
- const blob = await fetch(webpData).then(r => r.blob());
- return createImageBitmap(blob).then(() => true, () => false);
-}
-
-const LoadingScreen = () => (
- <div style={{
- position: "absolute",
- top: "50%",
- left: "50%",
- transform: "translate(-50%, -50%)"
- }}>
- <LoadingSpinner/>
- </div>
-);
-
export default function App() {
// eslint-disable-next-line
const { state, dispatch } = useContext(Store);
@@ -131,7 +109,15 @@ export default function App() {
siteId: 5
});
const customHistory = createBrowserHistory()
-
+
+ async function supportsWebp() {
+ if (!createImageBitmap) return false;
+
+ const webpData = 'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=';
+ const blob = await fetch(webpData).then(r => r.blob());
+ return createImageBitmap(blob).then(() => true, () => false);
+ }
+
async function testWebpSupport() {
if(await supportsWebp()) {
localStorage.setItem('webpSupport', 'True');
@@ -156,10 +142,6 @@ export default function App() {
testWebpSupport();
}, []);
- useEffect(() => {
- state.contrast === "" ? document.body.style.backgroundColor = "white" : document.body.style.backgroundColor = "black"
- }, [ state.contrast ]);
-
useEffect(() => {
const setWindowSize = () => {
dispatch({
@@ -176,305 +158,312 @@ export default function App() {
return () => window.removeEventListener("resize", setWindowSize);
}, [window.innerWidth, window.innerHeight]);
- return (
- // add piwik later
- // history={piwik.connectToHistory(customHistory)}
- <>
- {!awaitTest &&
- <React.Suspense fallback={<LoadingScreen/>}>
- <BrowserRouter>
- <ContrastBar/>
- <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"
- />
- <div id="Conteudo_scroll"></div>
- <Switch style={state.contrast === "" ? {backgroundColor: "white"} : {backgroundColor: "black"}}>
- <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-resumido" component={SummarizedUserTerms} />
- <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 id="Rodape_scroll">
- <EcFooter contrast={state.contrast} />
- <GNUAGPLfooter contrast={state.contrast} />
- </div>
- )}
- </BrowserRouter>
- </React.Suspense>
- }
- </>
+ const LoadingScreen = () => (
+ <div style={{
+ position: "absolute",
+ top: "50%",
+ left: "50%",
+ transform: "translate(-50%, -50%)"
+ }}>
+ <LoadingSpinner/>
+ </div>
);
+
+ return (
+ // add piwik later
+ // history={piwik.connectToHistory(customHistory)}
+ <>
+ {!awaitTest &&
+ <React.Suspense fallback={<LoadingScreen/>}>
+ <BrowserRouter>
+ <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/AGPLFooter.js b/src/Components/AGPLFooter.js
index 7058ac74..f4633420 100644
--- a/src/Components/AGPLFooter.js
+++ b/src/Components/AGPLFooter.js
@@ -29,20 +29,10 @@ const grayFooter={
paddingTop: "20px",
paddingBottom: "10px"
};
-
-const blackFooter={
- backgroundColor: "black",
- color: "white",
- textAlign: "center",
- display: "block",
- paddingTop: "20px",
- paddingBottom: "10px"
-};
-
class AGPLFooter extends Component{
render(){
return(
- <div style={this.props.contrast === '' ? grayFooter : blackFooter}>
+ <div style={grayFooter}>
<Container>
<Row justify="around">
<Col md={1}>
diff --git a/src/Components/AboutCarousel.js b/src/Components/AboutCarousel.js
index a3c1bf7f..204e5de6 100644
--- a/src/Components/AboutCarousel.js
+++ b/src/Components/AboutCarousel.js
@@ -19,7 +19,7 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React from 'react';
import "react-responsive-carousel/lib/styles/carousel.min.css";
-import { Carousel } from "react-responsive-carousel";
+import { Carousel } from 'react-responsive-carousel';
import styled from 'styled-components';
import "./AboutCarousel.css"
@@ -71,56 +71,56 @@ const CarouselAbout = styled(Carousel)`
text-align: center;
display: block;
margin: auto;
- /* padding-inline: 235px */
+ // padding-inline: 235px
}
}
`
-function AboutCarousel({ contrast }) {
+function AboutCarousel(props) {
return (
<div id={"You-Can-Caroussel"}>
- <CarouselAbout showThumbs={true}
- showStatus={false}
- showIndicators={false}
- interval={8000}
- transitionTime={1000}
- autoPlay
- infiniteLoop
+ <CarouselAbout showThumbs= {true}
+ showStatus= {false}
+ showIndicators = {false}
+ interval={8000}
+ transitionTime={1000}
+ autoPlay
+ infiniteLoop
>
- <div className={`${contrast}BackColor`}>
- <img src={Img1} alt="Slide 1" />
- <span className={`${contrast}TextColor`}>Buscar e Baixar Recursos</span>
- <p className={`${contrast}TextColor`} style={{ margin: 0, padding: 0 }}>São mais de 20 mil recursos educacionais à sua disposição. São recursos de portais parceiros do MEC e de professores que, como você, atuam na Educação Básica!</p>
+ <div>
+ <img src={Img1} alt="Slide 1"/>
+ <span>Buscar e Baixar Recursos</span>
+ <p>São mais de 20 mil recursos educacionais à sua disposição. São recursos de portais parceiros do MEC e de professores que, como você, atuam na Educação Básica!</p>
</div>
- <div className={`${contrast}BackColor`}>
- <img src={Img2} alt="Slide 2" />
- <span className={`${contrast}TextColor`}>Guardar Recursos em Coleções</span>
- <p className={`${contrast}TextColor`} style={{ margin: 0, padding: 0 }}>Guarde e organize em coleções aqueles recursos que você considera ser interessantes para elaborar a sua aula. Aproveite e indique aos colegas pelas redes sociais ou e-mail.</p>
+ <div>
+ <img src={Img2} alt="Slide 2"/>
+ <span>Guardar Recursos em Coleções</span>
+ <p>Guarde e organize em coleções aqueles recursos que você considera ser interessantes para elaborar a sua aula. Aproveite e indique aos colegas pelas redes sociais ou e-mail.</p>
</div>
- <div className={`${contrast}BackColor`}>
- <img src={Img3} alt="Slide 3" />
+ <div>
+ <img src={Img3} alt="Slide 3"/>
- <span className={`${contrast}TextColor`}>Compartilhar suas Experiências</span>
- <p className={`${contrast}TextColor`} style={{ margin: 0, padding: 0 }}>Você pode relatar suas experiências sobre o uso de recursos no seu cotidiano escolar. Aproveite esse espaço para sugerir e conhecer novos usos para um mesmo recurso.</p>
+ <span>Compartilhar suas Experiências</span>
+ <p>Você pode relatar suas experiências sobre o uso de recursos no seu cotidiano escolar. Aproveite esse espaço para sugerir e conhecer novos usos para um mesmo recurso.</p>
</div>
- <div className={`${contrast}BackColor`}>
- <img src={Img4} alt="Slide 4" />
+ <div>
+ <img src={Img4} alt="Slide 4"/>
- <span className={`${contrast}TextColor`}>Publicar o seu Recurso</span>
- <p className={`${contrast}TextColor`} style={{ margin: 0, padding: 0 }}>Colabore e ajude a fortalecer a plataforma publicando um recurso educacional desenvolvido por você ou pelo coletivo da escola do qual faz parte. Compartilhe seu conhecimento e dê visibilidade ao seu recurso, torne-o público enriquecendo o conhecimento partilhado!</p>
+ <span>Publicar o seu Recurso</span>
+ <p>Colabore e ajude a fortalecer a plataforma publicando um recurso educacional desenvolvido por você ou pelo coletivo da escola do qual faz parte. Compartilhe seu conhecimento e dê visibilidade ao seu recurso, torne-o público enriquecendo o conhecimento partilhado!</p>
</div>
- <div className={`${contrast}BackColor`}>
- <img src={Img5} alt="Slide 5" />
+ <div>
+ <img src={Img5} alt="Slide 5"/>
- <span className={`${contrast}TextColor`}>Encontrar Materiais de Formação</span>
- <p className={`${contrast}TextColor`} style={{ margin: 0, padding: 0 }}>A plataforma disponibiliza um conjunto de materiais de formação desenvolvidos pelo Ministério da Educação com diversidade de temas e recursos educacionais.</p>
+ <span>Encontrar Materiais de Formação</span>
+ <p>A plataforma disponibiliza um conjunto de materiais de formação desenvolvidos pelo Ministério da Educação com diversidade de temas e recursos educacionais.</p>
</div>
diff --git a/src/Components/AboutCarouselPartner.js b/src/Components/AboutCarouselPartner.js
index 7c1eef5d..ba4800d6 100644
--- a/src/Components/AboutCarouselPartner.js
+++ b/src/Components/AboutCarouselPartner.js
@@ -39,12 +39,12 @@ import { Impulsiona } from "ImportImages.js";
import { InstPeninsula } from "ImportImages.js";
import { Telefonica } from "ImportImages.js";
-function AboutCarouselPartner() {
+function AboutCarouselPartner(props) {
const items = [
<a href="http://portaldoprofessor.mec.gov.br/index.html" rel="noreferrer" target="_blank">
- <img src={LogoPortalDoProfessor} alt="LogoPortalDoProfessor" />
+ <img src={LogoPortalDoProfessor} alt="LogoPortalDoProfessor"/>
</a>,
<a href="http://objetoseducacionais2.mec.gov.br/" rel="noreferrer" target="_blank">
<img src={LogoBioe} alt="LogoBioe" />
@@ -55,8 +55,8 @@ function AboutCarouselPartner() {
<a href="https://tvescola.org.br/" rel="noreferrer" target="_blank">
<img src={LogoTvEscola} alt="LogoTvEscola" />
</a>,
- <a href="http://www.fundacaolemann.org.br/" rel="noreferrer" target="_blank">
- <img style={{ align: "middle" }} src={FundacaoLemann} alt="FundacaoLemann" />
+ <a href="http://www.fundacaolemann.org.br/" rel="noreferrer" target="_blank">
+ <img style={{align: "middle"}} src={FundacaoLemann} alt="FundacaoLemann" />
</a>,
<a href="http://new.safernet.org.br/" rel="noreferrer" target="_blank">
<img src={Safer} alt="Safer" />
@@ -71,7 +71,7 @@ function AboutCarouselPartner() {
<img src={Educagital} alt="Educagital" />
</a>,
<a href="http://www.aefbrasil.org.br" rel="noreferrer" target="_blank">
- <img style={{ filter: "grayscale(1)" }} src={EnefAef} alt="EnefAef" />
+ <img style={{filter: "grayscale(1)"}} src={EnefAef} alt="EnefAef" />
</a>,
<a href="https://impa.br/" rel="noreferrer" target="_blank">
<img src={Impa} alt="Impa" />
@@ -89,12 +89,12 @@ function AboutCarouselPartner() {
<img src={Telefonica} alt="Telefonica" />
</a>
]
- const partnerPerPage = (() => {
+ const partnerPerPage = (()=> {
var pageWidth = window.innerWidth
- if (pageWidth >= 1200) {
+ if (pageWidth >= 1200){
return 3
}
- else {
+ else{
return 1
}
})
@@ -106,35 +106,34 @@ function AboutCarouselPartner() {
return (
<div id="Partner-Caroussel">
- <Carousel
- showThumbs={false}
- showStatus={false}
- showIndicators={true}
- interval={4500}
- transitionTime={1000}
- autoPlay
- infiniteLoop
+ <Carousel showThumbs= {false}
+ showStatus= {false}
+ showIndicators = {true}
+ interval={4500}
+ transitionTime={1000}
+ autoPlay
+ infiniteLoop
- >
- {
- rows.map((row, index) => (
- <div key={(index + 1)} style={{ display: 'inline-flex', paddingTop: 100 }}>
- {
- row.map((partner, index2) => (
- <div
- key={index + (index2 * 10)}
- style={{ marginLeft: 10, display: 'flex', maxWidth: 300 }}
- >
- {
- partner
- }
- </div>
- ))
- }
- </div>
- ))
- }
- </Carousel>
+ >
+ {
+ rows.map((row, index) => (
+ <div key={(index+1)} style={{display:'inline-flex', paddingTop:100}}>
+ {
+ row.map((partner, index2) => (
+ <div
+ key={index + (index2*10)}
+ style={{marginLeft:10, display: 'flex', maxWidth:300}}
+ >
+ {
+ partner
+ }
+ </div>
+ ))
+ }
+ </div>
+ ))
+ }
+ </Carousel>
</div>
);
diff --git a/src/Components/Accessibility/ContrastBar.js b/src/Components/Accessibility/ContrastBar.js
deleted file mode 100644
index 0596af0f..00000000
--- a/src/Components/Accessibility/ContrastBar.js
+++ /dev/null
@@ -1,209 +0,0 @@
-/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
-Departamento de Informatica - Universidade Federal do Parana
-
-This file is part of Plataforma Integrada MEC.
-
-Plataforma Integrada MEC is free software: you can redistribute it and/or modify
-it under the terxs of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-Plataforma Integrada MEC is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-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 } from 'react';
-import './ContrastBar.css';
-import ContrastImageOn from '../../img/OnContrastIcon.png';
-import ContrastImageOff from '../../img/OffContrastIcon.png';
-import { Store } from '../../Store';
-import Grid from "@material-ui/core/Grid"
-import { Button } from '@material-ui/core';
-import styled from 'styled-components';
-
-/**
- * Bar allowing for the toggle of the high contrast mode on the page.
- */
-function ContrastBar() {
- /* eslint-disable */
-
- // Hook to set contrast context
- const { state, dispatch } = React.useContext(Store);
-
- const handleScrollTo = (location) => {
- if (location === "Pesquisa_scroll")
- dispatch({
- type: 'HANDLE_SEARCH_BAR',
- opened: !state.searchOpen
- })
- document.getElementById(location).scrollIntoView({ behavior: 'smooth' });
- }
-
- useEffect(() => {
- const testContrast = localStorage.getItem('@portalmec/contrast');
- if (testContrast) {
- setContrastAction(testContrast);
- } else {
- setContrastAction('');
- }
- }, []);
-
- const setContrastAction = (newContrast) => {
- localStorage.setItem('@portalmec/contrast', newContrast)
- return dispatch({
- type: 'SET_CONTRAST',
- payload: newContrast
- })
- }
-
- const setFontSizeAction = (newFontSize) => {
- return dispatch({
- type: 'SET_FONT_SIZE',
- payload: newFontSize
- })
- }
-
- const toggleContrast = () => {
- var status = (state.contrast === '' ? 'Contrast' : '')
-
- setContrastAction(status)
- }
- const incrementFontSize = () => {
- document.getElementsByTagName("body")[0].style.fontSize = (parseInt(state.fontSize, 10) + 1) + "px";
- setFontSizeAction(parseInt(state.fontSize, 10) + 1);
- }
- const decrementFontSize = () => {
- document.getElementsByTagName("body")[0].style.fontSize = (parseInt(state.fontSize, 10) - 1) + "px";
- setFontSizeAction(parseInt(state.fontSize, 10) - 1);
- }
- const defaultFontSize = () => {
- setFontSizeAction(15);
- document.getElementsByTagName("body")[0].style.fontSize = "15px";
- }
-
- return (
- <React.Fragment>
- <StyledGrid contrast={state.contrast} xs={12}>
- {
- window.innerWidth > 750 ?
- (
- <>
- <Grid xs={8}>
- <StyledButton style={{justifyContent: "flex-start"}}>
- <a href="/" accessKey="1" title="Ir para a página principal alt + 1">
- <span className={`${state.contrast}text`}>Plataforma MEC de Recursos Educacionais Digitais</span>
- </a>
- </StyledButton>
- </Grid>
- <Grid xs={4} style={{display: "flex"}}>
- <Grid xs={3}>
- <StyledButton onClick={() => handleScrollTo("Conteudo_scroll")}>
- <a className={`${state.contrast}text`} accessKey="2" title="Ir para o conteúdo alt + 2">
- Conteúdo
- </a>
- </StyledButton>
- </Grid>
- <Grid xs={3}>
- <StyledButton onClick={() => handleScrollTo("Pesquisa_scroll")}>
- <a className={`${state.contrast}text`} accessKey="3" title="Ir para o menu e a barra de pesquisa alt + 3">
- Menu
- </a>
- </StyledButton>
- </Grid>
- <Grid xs={3}>
- <StyledButton onClick={() => handleScrollTo("Rodape_scroll")}>
- <a className={`${state.contrast}text`} accessKey="4" title="Ir para o rodapé alt + 4">
- Rodapé
- </a>
- </StyledButton>
- </Grid>
- <Grid xs={3}>
- <StyledButton onClick={toggleContrast}>
- <a className={`${state.contrast}text`} title={state.contrast === "" ? "Ativar alto contraste" : "Desativar alto contraste"}>
- <img className='Constrasticon' src={state.contrast === "" ? ContrastImageOff : ContrastImageOn} style={{ paddingRight: "15px" }} alt="Ãcone de contraste" />
- </a>
- </StyledButton>
- </Grid>
- </Grid>
- </>
- )
- :
- (
- <>
- <Grid xs={12} style={{display: "flex"}}>
- <Grid xs={3}>
- <StyledButton>
- <a href="/" accessKey="1" title="Ir para a página principal alt + 1">
- <span className={`${state.contrast}text`}>MEC RED</span>
- </a>
- </StyledButton>
- </Grid>
- <Grid xs={3}>
- <StyledButton onClick={() => handleScrollTo("Conteudo_scroll")}>
- <a className={`${state.contrast}text`} accessKey="2" title="Ir para o conteúdo alt + 2">
- Conteúdo
- </a>
- </StyledButton>
- </Grid>
- <Grid xs={2}>
- <StyledButton onClick={() => handleScrollTo("Pesquisa_scroll")}>
- <a className={`${state.contrast}text`} accessKey="3" title="Ir para o menu e a barra de pesquisa alt + 3">
- Menu
- </a>
- </StyledButton>
- </Grid>
- <Grid xs={3}>
- <StyledButton onClick={() => handleScrollTo("Rodape_scroll")}>
- <a className={`${state.contrast}text`} accessKey="4" title="Ir para o rodapé alt + 4">
- Rodapé
- </a>
- </StyledButton>
- </Grid>
- <Grid xs={1}>
- <StyledButton onClick={toggleContrast}>
- <a className={`${state.contrast}text`} title={state.contrast === "" ? "Ativar alto contraste" : "Desativar alto contraste"}>
- <img className='Constrasticon' src={state.contrast === "" ? ContrastImageOff : ContrastImageOn} style={{ paddingRight: "15px" }} alt="Ãcone de contraste" />
- </a>
- </StyledButton>
- </Grid>
- </Grid>
- </>
- )
- }
- </StyledGrid>
- </React.Fragment>
- );
-
-}
-
-const StyledGrid = styled(Grid) `
- display: flex;
- padding-left: 15px;
- padding-right: 15px;
- background: ${props => props.contrast === "" ? "white" : "black"};
- border-bottom: ${props => props.contrast === "" ? "1px solid #666" : "1px solid white"};
-`
-
-const StyledButton = styled(Button)`
- width: 100%;
-`
-
-/*
-<div>
- <a className={`${state.contrast}text`} onClick={incrementFontSize} title="Aumentar tamanho da fonte">
- A+
- </a>
- <a className={`${state.contrast}text`} onClick={decrementFontSize} title="Diminuir tamanho da fonte">
- A-
- </a>
- <a className={`${state.contrast}text`} onClick={defaultFontSize} title="Restaurar tamanho da fonte">
- A
- </a>
-</div>
-*/
-
-export default ContrastBar;
\ No newline at end of file
diff --git a/src/Components/ActivityListItem.js b/src/Components/ActivityListItem.js
index fe0a4086..43402a8e 100644
--- a/src/Components/ActivityListItem.js
+++ b/src/Components/ActivityListItem.js
@@ -117,7 +117,7 @@ export default function ActivityListItem(props) {
}, [])
return (
- <StyledListItem onMenuBar={props.onMenuBar} contrast={props.contrast}>
+ <StyledListItem onMenuBar={props.onMenuBar}>
{
!props.onMenuBar &&
<>
@@ -140,11 +140,10 @@ export default function ActivityListItem(props) {
}
secondary={
<div>
-
- <span style={props.contrast === "" ? { color: "#666" } : {color: "white"}}>
-
+
+ <span>
<Link to={{
- pathname: props.ownerHref,
+ pathname: props.ownerHref,
state: '0',
}} className="owner-name-a" >{props.ownerName}</Link> {activity.text} <Link to={props.recipientHref} className="recipient-name-a">{props.recipientName}</Link> {activity.text2}
</span>
@@ -170,24 +169,22 @@ const StyledListItem = styled(ListItem)`
.time-ago-span {
font-size : 12px;
- font-family : 'Lato', medium;
- color: ${props => props.contrast === '' ? "#787380" : "white"};
+ font-family : 'Lato', medium;
+ color : #787380;
}
.owner-name-a {
- color: ${props => props.contrast === '' ? "#00bcd4" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
+ color : #00bcd4;
}
.recipient-name-a {
cursor : pointer;
- color: ${props => props.contrast === '' ? "#337ab7" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
+ color : #337ab7;
}
.icon {
padding-right : 10px;
- color: ${props => props.contrast === '' ? "#666" : "white"};
+ color : #666;
}
.tag-object {
@@ -211,18 +208,16 @@ const StyledListItem = styled(ListItem)`
}
.recurso-color {
- background-color: ${props => props.contrast === '' ? "orange" : ""};
- border: ${props => props.contrast === '' ? "" : "1px solid #d4d4d4"};
+ background-color : orange;
}
.colecao-color {
- background-color: ${props => props.contrast === '' ? "blue" : ""};
- border: ${props => props.contrast === '' ? "" : "1px solid #d4d4d4"};
+ background-color : blue;
}
.curadoria-color {
- background-color: ${props => props.contrast === '' ? "red" : ""};
- border: ${props => props.contrast === '' ? "" : "1px solid #d4d4d4"};
+ background-color : red;
}
+
`
diff --git a/src/Components/AreasSubPagesFunction.js b/src/Components/AreasSubPagesFunction.js
index 7078cb08..86701785 100644
--- a/src/Components/AreasSubPagesFunction.js
+++ b/src/Components/AreasSubPagesFunction.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, useContext } from "react";
+import React, { useState, useEffect } from "react";
import "./carousel.css";
import { Col, Row, Container, Hidden, Visible } from "react-grid-system";
import styled from 'styled-components'
@@ -40,16 +40,6 @@ import { materiais } from "ImportImages.js";
import { colecoes } from "ImportImages.js";
import { ColecaoVazia } from "ImportImages.js";
import { RecursoVazio } from "ImportImages.js";
-import { Store } from '../Store'
-import { makeStyles } from '@material-ui/core/styles'
-
-const useStyles = makeStyles(theme => ({
- contrastTextField: {
- border: "1px solid white",
- borderRadius: theme.shape.borderRadius,
- backgroundColor: "black",
- }
-}))
function objectsPerPage() {
var pageWidth = window.innerWidth
@@ -74,7 +64,7 @@ function ReqResources(props) {
var aux = []
var resources_per_page = objectsPerPage()
for (let i = 0; i < 12 / resources_per_page; i++) {
- aux.push(data.slice(i * resources_per_page, resources_per_page * (i + 1)))
+ aux.push(data.slice(i * resources_per_page, resources_per_page * (i + 1)))
}
setRows(aux)
setIsLoading(false)
@@ -91,7 +81,7 @@ function ReqResources(props) {
isLoading ?
<Grid container justify="center" alignItems="center" style={{ margin: "2em" }} >
<Grid item>
- <CircularProgress size={24} style={props.contrast === "" ? { color: "#ff7f00" } : { color: "yellow" }} />
+ <CircularProgress size={24} color="#ff7f00" />
</Grid>
</Grid>
:
@@ -99,34 +89,33 @@ function ReqResources(props) {
{
rows.length >= 1 ?
rows.map((row, index) => (
- <Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center", minHeight: "50px" }} key={(index + 1)}>
- {row.map((card) => (
- <div style={{ marginLeft: 10, display: 'flex' }} key={card.id * (index + 1)}>
- <ResourceCardFunction
- contrast={props.contrast}
- avatar={card.publisher.avatar}
- id={card.id}
- thumbnail={card.thumbnail}
- type={card.object_type ? card.object_type : "Outros"}
- title={card.name}
- published={card.state === "published" ? true : false}
- likeCount={card.likes_count}
- liked={card.liked}
- rating={card.review_average}
- author={card.publisher.name}
- tags={card.tags}
- href={"/recurso/" + card.id}
- downloadableLink={card.default_attachment_location}
- />
- </div>
- ))}
- </Row>
+ <Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center", minHeight: "50px" }} key={(index + 1)}>
+ {row.map((card) => (
+ <div style={{ marginLeft: 10, display: 'flex' }} key={card.id * (index + 1)}>
+ <ResourceCardFunction
+ avatar={card.publisher.avatar}
+ id={card.id}
+ thumbnail={card.thumbnail}
+ type={card.object_type ? card.object_type : "Outros"}
+ title={card.name}
+ published={card.state === "published" ? true : false}
+ likeCount={card.likes_count}
+ liked={card.liked}
+ rating={card.review_average}
+ author={card.publisher.name}
+ tags={card.tags}
+ href={"/recurso/" + card.id}
+ downloadableLink={card.default_attachment_location}
+ />
+ </div>
+ ))}
+ </Row>
))
:
<Grid container justify="center" alignItems="center">
- <Grid item>
- <img src={RecursoVazio} alt="Não há recursos" />
- </Grid>
+ <Grid item>
+ <img src={RecursoVazio} alt="Não há recursos" />
+ </Grid>
</Grid>
}
</Carousel>
@@ -142,7 +131,7 @@ function ReqCollections(props) {
var aux = []
var collections_per_page = objectsPerPage()
for (let i = 0; i < 12 / collections_per_page; i++) {
- aux.push(data.slice(i * collections_per_page, collections_per_page * (i + 1)))
+ aux.push(data.slice(i * collections_per_page, collections_per_page * (i + 1)))
}
setIsLoading(false)
setRows(aux)
@@ -158,51 +147,86 @@ function ReqCollections(props) {
return (
isLoading ?
<Grid container justify="center" alignItems="center" style={{ marginTop: "2em" }}>
- <Grid item>
- <CircularProgress size={24} style={props.contrast === "" ? { color: "#673ab7" } : { color: "yellow" }} />
- </Grid>
+ <Grid item>
+ <CircularProgress size={24} color="#673ab7" />
+ </Grid>
</Grid>
:
rows.length >= 1 ?
<Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
{
- rows.map((row, index) => (
+ rows.map((row, index) => (
<Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center", minHeight: "50px" }} key={(index + 1)}>
- {row.map((card) => (
- <div style={{ marginLeft: 10, display: 'flex' }} key={card.id * (index + 1)}>
- <CollectionCardFunction
- contrast={props.contrast}
- name={card.name}
- tags={card.tags}
- rating={card.score}
- id={card.id}
- author={card.owner ? card.owner.name : ""}
- description={card.description}
- thumbnails={card.items_thumbnails}
- avatar={card.owner ? card.owner.avatar : ""}
- likeCount={card.likes_count}
- followed={card.followed}
- liked={card.liked}
- collections={card.collection_items}
- authorID={card.owner ? card.owner.id : ""}
- />
- </div>
- ))}
+ {row.map((card) => (
+ <div style={{ marginLeft: 10, display: 'flex' }} key={card.id * (index + 1)}>
+ <CollectionCardFunction
+ name={card.name}
+ tags={card.tags}
+ rating={card.score}
+ id={card.id}
+ author={card.owner ? card.owner.name : ""}
+ description={card.description}
+ thumbnails={card.items_thumbnails}
+ avatar={card.owner ? card.owner.avatar : ""}
+ likeCount={card.likes_count}
+ followed={card.followed}
+ liked={card.liked}
+ collections={card.collection_items}
+ authorID={card.owner ? card.owner.id : ""}
+ />
+ </div>
+ ))}
</Row>
- ))
- }
+ ))}
</Carousel>
- :
+ :
<Grid container justify="center" alignItems="center">
<Grid item>
- <img src={ColecaoVazia} alt="Não há coleções" />
+ <img src={ColecaoVazia} alt="Não há coleções" />
</Grid>
</Grid>
)
}
-function TabRecurso({ contrast }) {
- const classes = useStyles()
+function ReqMaterials(props) {
+ const materials = colecoes_obj();
+
+ const handleExpandMaterial = (id) => {
+ if (id !== props.currMaterial.material.id)
+ props.setCurrMaterial({
+ open: true,
+ material: { ...materials[id] }
+ })
+ else
+ props.setCurrMaterial({
+ open: false,
+ material: {}
+ })
+ }
+
+ return (
+ <Row>
+ {
+ materials.map((material, index) => {
+ return (
+ <Col md={3} key={index}>
+ <MaterialCard
+ name={material.name}
+ thumb={material.img}
+ score={material.score}
+ modules={material.topics}
+ handleExpand={handleExpandMaterial}
+ id={index}
+ />
+ </Col>
+ )
+ })
+ }
+ </Row>
+ )
+}
+
+function TabRecurso() {
const text = "Nesta área, você tem acesso a Recursos Educacionais Digitais, isto é, a vÃdeos, animações e a outros recursos destinados à educação. São Recursos de portais parceiros do MEC e de professores que, como você, atuam na Educação Básica!"
const [currOrder, setCurrOrder] = useState("Mais Relevante");
const [currValue, setCurrValue] = useState("score");
@@ -217,111 +241,105 @@ function TabRecurso({ contrast }) {
return (
<React.Fragment>
- <div style={{ backgroundColor: contrast === "" ? "#ff7f00" : "black", position: "relative" }}>
- <StyledTab container contrast={contrast}>
- <Grid item md={3} xs={12}>
- <img
- src={recursos}
- alt="aba recursos"
- style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
- />
- </Grid>
+ <div style={{ backgroundColor: "#ff7f00", position: "relative" }}>
+ <StyledTab container>
+ <Grid item md={3} xs={12}>
+ <img
+ src={recursos}
+ alt="aba recursos"
+ style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
+ />
+ </Grid>
+ {
+ window.innerWidth <= 501 &&
+ <h4>
+ Recursos Educacionais Digitais
+ </h4>
+ }
+ <Grid item md={6} xs={12}>
+ <p>
+ {text}
+ </p>
+ </Grid>
+ {
+ window.innerWidth <= 501 &&
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ <Link to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=LearningObject`} className="button-ver">VER RECURSOS</Link>
+ </div>
+ }
+ </StyledTab>
+ </div>
+ {
+ window.innerWidth > 501 &&
+ <Container style={{ padding: "20px" }}>
+ <Grid
+ container
+ direction="row"
+ justify="space-between"
+ alignItems="center"
+ style={{
+ paddingBottom: "5px",
+ borderBottom: "1px solid #ff7f00",
+ color: "#ff7f00",
+ }}
+ >
+ <Grid item>
+ <p
+ style={{ margin: 0, padding: 0 }}
+ >
{
- window.innerWidth <= 501 &&
- <h4>
- Recursos Educacionais Digitais
- </h4>
+ `Recursos ${currOrder}`
}
- <Grid item md={6} xs={12}>
- <p>
- {text}
- </p>
+ </p>
+ </Grid>
+
+ <Grid item>
+ <Grid container direction="row" alignItems="center" spacing={1}>
+ <Grid item>
+ <p style={{ margin: 0, padding: 0 }}>
+ Ordenar por:
+ </p>
</Grid>
- {
- window.innerWidth <= 501 &&
- <div style={{ display: "flex", justifyContent: "center" }}>
- <Link to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=LearningObject`} className="button-ver">VER RECURSOS</Link>
- </div>
- }
- </StyledTab>
- </div>
- {
- window.innerWidth > 501 &&
- <div className={`${contrast}BackColor`}>
- <Container style={{ padding: "20px" }}>
- <Grid
- container
- direction="row"
- justify="space-between"
- alignItems="center"
- style={{
- paddingBottom: "5px",
- borderBottom: contrast === "" ? "1px solid #ff7f00" : "1px solid white",
- color: contrast === "" ? "#ff7f00" : "white",
+ <Grid item>
+ <TextField
+ select
+ fullWidth
+ value={currValue}
+ variant="outlined"
+ >
+ {ordenar.map((option) => (
+ <MenuItem
+ key={option.value}
+ value={option.value}
+ name={option.value}
+ onClick={() => {
+ setCurrOrder(option.label)
+ setCurrValue(option.value)
}}
>
- <Grid item>
- <p
- style={{ margin: 0, padding: 0 }}
- >
- {
- `Recursos ${currOrder}`
- }
- </p>
- </Grid>
-
- <Grid item>
- <Grid container direction="row" alignItems="center" spacing={1}>
- <Grid item>
- <p style={{ margin: 0, padding: 0 }}>
- Ordenar por:
- </p>
- </Grid>
- <Grid item>
- <StyledTextField
- contrast={contrast}
- select
- fullWidth
- value={currValue}
- variant="outlined"
- className={contrast === "Contrast" && classes.contrastTextField}
- >
- {ordenar.map((option) => (
- <StyledMenuItem
- contrast={contrast}
- key={option.value}
- value={option.value}
- name={option.value}
- onClick={() => {
- setCurrOrder(option.label)
- setCurrValue(option.value)
- }}
- >
- <span style={currValue === option.value ? { color: contrast === "" ? "#ff7f00" : "yellow", textDecoration: contrast === "" ? "none" : "underline", fontWeight: "500" } : { color: contrast === "" ? "" : "yellow", textDecoration: contrast === "" ? "none" : "underline", fontWeight: "lighter" }} >
- {option.label}
- </span>
- </StyledMenuItem>
- ))}
- </StyledTextField>
- </Grid>
- </Grid>
- </Grid>
- </Grid>
- <Hidden sm xs>
- <ReqResources order={currValue} contrast={contrast} />
- </Hidden>
- <Visible sm xs>
- <ReqResources order={currValue} contrast={contrast} />
- </Visible>
- </Container>
- </div>
- }
+ <span style={currValue === option.value ? { color: "#ff7f00" } : null} >
+ {option.label}
+ </span>
+ </MenuItem>
+ ))}
+ </TextField>
+ </Grid>
+ </Grid>
+ </Grid>
+ </Grid>
+ <Hidden sm xs>
+ <ReqResources order={currValue} />
+ </Hidden>
+ <Visible sm xs>
+ <ReqResources order={currValue} />
+ </Visible>
+ </Container>
+ }
</React.Fragment>
)
}
-function TabColecoes({ contrast }) {
- const classes = useStyles()
+function TabColecoes() {
const text = "Nesta área, você tem acesso às coleções criadas e organizadas pelos usuários da plataforma. É mais uma possibilidade de buscar recursos educacionais para sua aula!"
const [currOrder, setCurrOrder] = useState("Mais Relevante");
const [currValue, setCurrValue] = useState("score");
@@ -336,223 +354,179 @@ function TabColecoes({ contrast }) {
return (
<React.Fragment>
- <div style={{ backgroundColor: "#673ab7", position: "relative" }}>
- <StyledTab container contrast={contrast}>
- <Grid item md={3} xs={12}>
- <img
- src={colecoes}
- alt="aba recursos"
- style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
- />
- </Grid>
+ <div style={{ backgroundColor: "#673ab7", position: "relative" }}>
+ <StyledTab container>
+ <Grid item md={3} xs={12}>
+ <img
+ src={colecoes}
+ alt="aba recursos"
+ style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
+ />
+ </Grid>
+ {
+ window.innerWidth <= 501 &&
+ <h4>
+ Coleções dos Usuários
+ </h4>
+ }
+ <Grid item md={6} xs={12}>
+ <p>
+ {text}
+ </p>
+ </Grid>
+ {
+ window.innerWidth <= 501 &&
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ <Link to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=Collection`} className="button-ver">VER COLEÇÕES</Link>
+ </div>
+ }
+ </StyledTab>
+ </div>
+ {
+ window.innerWidth > 501 &&
+ <Container style={{ padding: "20px" }}>
+ <Grid
+ container
+ direction="row"
+ justify="space-between"
+ alignItems="center"
+ style={{
+ paddingBottom: "5px",
+ borderBottom: "1px solid #673ab7",
+ color: "#673ab7",
+ }}
+ >
+ <Grid item>
+ <p
+ style={{ margin: 0, padding: 0 }}
+ >
{
- window.innerWidth <= 501 &&
- <h4>
- Coleções dos Usuários
- </h4>
+ `Coleções ${currOrder}`
}
- <Grid item md={6} xs={12}>
- <p>
- { text}
- </p>
+ </p>
+ </Grid>
+
+ <Grid item>
+ <Grid container direction="row" alignItems="center" spacing={1}>
+ <Grid item>
+ <p style={{ margin: 0, padding: 0 }}>
+ Ordenar por:
+ </p>
</Grid>
- {
- window.innerWidth <= 501 &&
- <div style={{ display: "flex", justifyContent: "center" }}>
- <Link to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=Collection`} className="button-ver">VER COLEÇÕES</Link>
- </div>
- }
- </StyledTab>
- </div>
- {
- window.innerWidth > 501 &&
- <div className={`${contrast}BackColor`}>
- <Container style={{ padding: "20px" }}>
- <Grid
- container
- direction="row"
- justify="space-between"
- alignItems="center"
- style={{
- paddingBottom: "5px",
- borderBottom: contrast === "" ? "1px solid #673ab7" : "1px solid white",
- color: contrast === "" ? "#673ab7" : "white",
+ <Grid item>
+ <TextField
+ select
+ fullWidth
+ value={currValue}
+ variant="outlined"
+ >
+ {ordenar.map((option) => (
+ <MenuItem
+ key={option.value}
+ value={option.value}
+ name={option.value}
+ onClick={() => {
+ setCurrOrder(option.label)
+ setCurrValue(option.value)
}}
>
- <Grid item>
- <p
- style={{ margin: 0, padding: 0 }}
- >
- {
- `Coleções ${currOrder}`
- }
- </p>
- </Grid>
-
- <Grid item>
- <Grid container direction="row" alignItems="center" spacing={1}>
- <Grid item>
- <p style={{ margin: 0, padding: 0 }}>
- Ordenar por:
- </p>
- </Grid>
- <Grid item>
- <StyledTextField
- contrast={contrast}
- select
- fullWidth
- value={currValue}
- variant="outlined"
- className={contrast === "Contrast" && classes.contrastTextField}
- >
- {ordenar.map((option) => (
- <StyledMenuItem
- contrast={contrast}
- key={option.value}
- value={option.value}
- name={option.value}
- style={contrast === "" ? {} : { backgroundColor: "black" }}
- onClick={() => {
- setCurrOrder(option.label)
- setCurrValue(option.value)
- }}
- >
- <span style={currValue === option.value ? { color: contrast === "" ? "#673ab7" : "yellow", textDecoration: contrast === "" ? "none" : "underline", fontWeight: "500" } : { color: contrast === "" ? "" : "yellow", textDecoration: contrast === "" ? "none" : "underline", fontWeight: "lighter" }} >
- {option.label}
- </span>
- </StyledMenuItem>
- ))}
- </StyledTextField>
- </Grid>
- </Grid>
- </Grid>
- </Grid>
- <ReqCollections order={currValue} contrast={contrast} />
- </Container>
- </div>
- }
+ <span style={currValue === option.value ? { color: "#673ab7" } : null} >
+ {option.label}
+ </span>
+ </MenuItem>
+ ))}
+ </TextField>
+ </Grid>
+ </Grid>
+ </Grid>
+ </Grid>
+ <ReqCollections order={currValue} />
+ </Container>
+ }
</React.Fragment>
)
}
-function TabMateriais({ contrast }) {
+function TabMateriais() {
const text = "Nesta área, você acessa livremente materiais completos de formação, como cursos já oferecidos pelo MEC e seus parceiros. São conteúdos elaborados por equipes multidisciplinares e de autoria de pesquisadores e educadores renomados nas áreas."
- const materials = colecoes_obj()
-
const [currMaterial, setCurrMaterial] = useState({
open: false,
material: {}
})
- const handleExpandMaterial = (id) => {
- if (id !== currMaterial.material.id)
- setCurrMaterial({
- open: true,
- material: { ...materials[id] }
- })
- else {
- setCurrMaterial({
- open: false,
- material: {}
- })
- }
- }
-
return (
<React.Fragment>
<div style={{ backgroundColor: "#e81f4f", position: "relative" }}>
- <StyledTab container contrast={contrast}>
- <Grid item md={3} xs={12}>
- <img
- src={materiais}
- alt="aba recursos"
- style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
- />
- </Grid>
- {
- window.innerWidth <= 501 &&
- <h4>
- Materiais de formação
- </h4>
- }
- <Grid item md={6} xs={12}>
- <p>
- {text}
- </p>
- </Grid>
- {
- window.innerWidth <= 501 &&
- <div style={{ display: "flex", justifyContent: "center" }}>
- <Link to={`/material-formacao`} className="button-ver">VER MATERIAIS</Link>
- </div>
- }
+ <StyledTab container>
+ <Grid item md={3} xs={12}>
+ <img
+ src={materiais}
+ alt="aba recursos"
+ style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
+ />
+ </Grid>
+ {
+ window.innerWidth <= 501 &&
+ <h4>
+ Materiais de formação
+ </h4>
+ }
+ <Grid item md={6} xs={12}>
+ <p>
+ {text}
+ </p>
+ </Grid>
+ {
+ window.innerWidth <= 501 &&
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ <Link to={`/material-formacao`} className="button-ver">VER MATERIAIS</Link>
+ </div>
+ }
</StyledTab>
</div>
{
- window.innerWidth > 501 &&
- <div className={`${contrast}BackColor`}>
- <Container style={{ padding: "20px" }}>
- <p
- style={{
- paddingBottom: "5px",
- borderBottom: contrast === "" ? "1px solid #e81f4f" : "1px solid white",
- color: contrast === "" ? "#e81f4f" : "white",
- }}
- >
- Materiais mais recentes{" "}
- </p>
- <Carousel
- style={{ padding: "20px" }}
- showThumbs={false}
- infiniteLoop={true}
- showStatus={false}
- >
- <Row>
- {
- materials.map((material, index) => {
- return (
- <Col md={3} key={index}>
- <MaterialCard
- contrast={contrast}
- name={material.name}
- thumb={material.img}
- score={material.score}
- modules={material.topics}
- handleExpand={handleExpandMaterial}
- id={index}
- />
- </Col>
- )
- })
- }
- </Row>
- </Carousel>
- {
- currMaterial.open ?
- <ExpandedMaterial contrast={contrast} material={currMaterial.material} />
- :
- null
- }
- </Container>
- </div>
- }
- </React.Fragment >
- )
+ window.innerWidth > 501 &&
+ <Container style={{ padding: "20px" }}>
+ <p
+ style={{
+ paddingBottom: "5px",
+ borderBottom: "1px solid #e81f4f",
+ color: "#e81f4f",
+ }}
+ >
+ Materiais mais recentes{" "}
+ </p>
+ <Carousel
+ style={{ padding: "20px" }}
+ showThumbs={false}
+ infiniteLoop={true}
+ showStatus={false}
+ >
+ <ReqMaterials currMaterial={currMaterial} setCurrMaterial={setCurrMaterial} />
+ </Carousel>
+ {
+ currMaterial.open ?
+ <ExpandedMaterial material={currMaterial.material} />
+ :
+ null
+ }
+ </Container>
+ }
+ </React.Fragment >
+ )
}
export default function AreasSubPages(props) {
- const { state } = useContext(Store)
-
const areaRender = () => {
switch (props.banner) {
case "Recursos":
- return <TabRecurso contrast={state.contrast} />
+ return <TabRecurso />
case "Materiais":
- return <TabMateriais contrast={state.contrast} />
+ return <TabMateriais />
case "Colecoes":
- return <TabColecoes contrast={state.contrast} />
+ return <TabColecoes />
default:
return null
}
@@ -563,9 +537,9 @@ export default function AreasSubPages(props) {
{
window.innerWidth <= 501 ? (
<React.Fragment>
- <TabRecurso contrast={state.contrast} />
- <TabMateriais contrast={state.contrast} />
- <TabColecoes contrast={state.contrast} />
+ <TabRecurso />
+ <TabMateriais />
+ <TabColecoes />
</React.Fragment>
) : (
areaRender()
@@ -587,7 +561,6 @@ const StyledTab = styled(Grid)`
color : #fff;
min-height : 190px;
padding : 20px 10px 20px 10px;
- background: ${props => props.contrast === "" ? "" : "black"};
img {
float : left;
@@ -613,24 +586,9 @@ const StyledTab = styled(Grid)`
padding: 5px 10px;
border: solid 2px #fff;
border-radius: 7px;
- color: ${props => props.contrast === "" ? "#fff" : "yellow"};
+ color: #fff;
cursor: pointer;
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ text-decoration: none;
}
`
-
-const StyledMenuItem = styled(MenuItem)`
- background-color: ${props => props.contrast === "" ? "" : "black !important"};
-`
-
-const StyledTextField = styled(TextField)`
- .MuiOutlinedInput-root {
- &.Mui-focused fieldset {
- border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- }
- fieldset {
- border-color: ${props => props.contrast === "" ? "#666" : "white"};
- }
- }
-`
\ No newline at end of file
diff --git a/src/Components/ButtonAvaliarRecurso.js b/src/Components/ButtonAvaliarRecurso.js
index 06d63059..8b307048 100644
--- a/src/Components/ButtonAvaliarRecurso.js
+++ b/src/Components/ButtonAvaliarRecurso.js
@@ -6,20 +6,18 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
export default function ButtonAvaliarRecurso (props) {
return (
- <StyledButton contrast={props.contrast} onClick={props.callback}>
- <ExpandMoreIcon style={{color: "white"}}/> AVALIAR RECURSO
+ <StyledButton onClick={props.callback}>
+ <ExpandMoreIcon/> AVALIAR RECURSO
</StyledButton>
)
}
-export const StyledButton = styled(Button)`
+const StyledButton = styled(Button)`
&:hover {
- background-color: ${props => props.contrast === "" ? "#ed6f00" : "black"} !important;
+ background-color : #ed6f00 !important;
}
- background-color: ${props => props.contrast === "" ? "#ff7f00" : "black"} !important;
- border: ${props => props.contrast === "" ? "none" : "1px solid white"} !important;
- color : ${props => props.contrast === "" ? "white" : "yellow"} !important;
- text-decoration : ${props => props.contrast === "" ? "none" : "underline"} !important;
+ background-color : #ff7f00 !important;
+ color : #fff !important;
font-weight : 600 !important;
box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
.MuiSvgIcon-root {
diff --git a/src/Components/ButtonGuardarColecao.js b/src/Components/ButtonGuardarColecao.js
index ca0729a2..564c0718 100644
--- a/src/Components/ButtonGuardarColecao.js
+++ b/src/Components/ButtonGuardarColecao.js
@@ -46,9 +46,9 @@ export default function ButtonGuardarColecao(props) {
return (
<>
- <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}
+ <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}
/>
- <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
/>
<Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleLoginSnackbar}
@@ -56,28 +56,28 @@ export default function ButtonGuardarColecao(props) {
>
<Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
</Snackbar>
- <GuardarModal contrast={props.contrast} open={saveToCol} handleClose={() => { toggleSave(false) }}
+ <GuardarModal open={saveToCol} handleClose={() => { toggleSave(false) }}
thumb={props.thumb} title={props.title} recursoId={props.learningObjectId}
/>
- <StyledButton onClick={handleGuardar} className={`${props.contrast}LinkColor`}
- style={props.contrast === "" ? {border: "2px solid #f07e05", borderRadius : "5px", color :"#f07e05"} : {border: "1px solid white", borderRadius : "5px", color :"#f07e05"}}
- >
- <CreateNewFolderIcon className={`${props.contrast}IconColor`}/><span>GUARDAR</span>
+ <StyledButton onClick={handleGuardar}>
+ <CreateNewFolderIcon /> GUARDAR
</StyledButton>
</>
)
}
const StyledButton = styled(Button)`
+ color : #666 !important;
background-color : transparent !important;
font-size : 14px important;
font-weight : 500 !important;
.MuiSvgIcon-root {
font-size : 24px;
+ color : inherit;
}
&:hover {
- color: rgb(107, 35, 142);
+ color: rgb(107, 35, 142) !important;
}
`
diff --git a/src/Components/Carousel.js b/src/Components/Carousel.js
new file mode 100644
index 00000000..dde54bd2
--- /dev/null
+++ b/src/Components/Carousel.js
@@ -0,0 +1,665 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+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, { Component } from 'react';
+import "react-responsive-carousel/lib/styles/carousel.min.css";
+import { Carousel } from 'react-responsive-carousel';
+import styled from 'styled-components';
+import Grid from '@material-ui/core/Grid';
+
+
+
+/*Importação de imagens para o componente*/
+import Handshake from "../img/termos/handshake.svg"
+import Pessoa from "../img/termos/Pessoa.svg"
+import Email from "../img/termos/Email.svg"
+import Seguranca from "../img/termos/Seguranca.svg"
+import Arrow_down from "../img/termos/Arrow_down.svg";
+import Arrow_double from "../img/termos/Arrow_double.svg";
+import Like from "../img/termos/Like.svg";
+import Unlike from "../img/termos/Unlike.svg";
+import Line from "../img/termos/Line.svg";
+import Entenda from "../img/termos/Entenda.svg";
+import V from "../img/termos/V.svg";
+//Image Import
+import { Aberto } from "ImportImages.js";
+import { Fechado } from "ImportImages.js";
+import { Arrow_O } from "ImportImages.js";
+import { Arrow_O_1 } from "ImportImages.js";
+import { OrthogonalLineUp } from "ImportImages.js";
+import { OrthogonalLineDown } from "ImportImages.js";
+
+const Slide = styled.div`
+
+position: absolute;
+height: 500px;
+width: 1366px;
+
+h2{
+ font-family: "Pompiere", regular;
+ font-size: 44px;
+ line-height: 120%;
+ color: #FFFFFF;
+}
+
+h3{
+ font-family: "Roboto", regular;
+ font-size: 27px;
+ line-height: 120%;
+ color: #FFFFFF;
+}
+
+p{
+ font-family: "Roboto", regular;
+ font-size: 20px;
+ line-height: 120%;
+ color: #FFFFFF;
+ text-align: left;
+}
+
+.container{
+ position: absolute;
+ height: auto;
+ width: auto;
+ margin: 70px 180px 90px;
+}
+
+
+.tmpl1{
+ background-color: #00BCD4;
+ height: inherit;
+ width: inherit;
+ display: flex;
+ align-items: center;
+
+
+ .box-text{
+ position: relative;
+ float: left;
+ padding-right: 10px;
+ padding-left: 10px;
+
+ p {
+ margin: 0 0 10px;
+ }
+ }
+
+ .box-image{
+ position: relative;
+ float: right;
+ }
+}
+
+.tmpl2{
+ height: inherit;
+ width: inherit;
+ display: flex;
+ align-items: center;
+ background-color: #673AB7;
+
+ .title{
+ padding-bottom: 50px;
+ }
+
+ .images{
+ position: absolute;
+ display: table-row;
+ }
+
+ .arrow{
+ display: table-row;
+ position: absolute;
+ margin-left: 55px;
+ margin-top: -15px;
+ width: 282px;
+ }
+
+ .circle{
+ display: table-row;
+ position: absolute;
+ margin-top: -100px;
+ margin-left: 795px;
+ width: 191px;
+ }
+
+ h2 {
+ margin-top: 20px;
+ margin-bottom: 10px;
+ font-weight: 500;
+ }
+
+ .box-text{
+ p{
+ font-size: 18px;
+ line-height: 25px;
+ }
+
+ position: relative;
+
+ }
+
+
+}
+
+.tmpl3{
+ height: inherit;
+ width: inherit;
+ display: flex;
+ align-items: center;
+ background-color: #E81F4F;
+
+ .title{
+ position: relative;
+ padding-left: 10px;
+ h3{
+ line-height: 40px;
+ }
+ }
+
+ .box-text1{
+ .text{
+ padding-top: 20px;
+ }
+
+ .content{
+ display: table-row;
+
+ p{
+ display: table-cell;
+ font-size: 18px;
+ line-height: 25px;
+ vertical-align: middle;
+ }
+
+ img{
+ position: relative;
+ left: 0;
+ margin-right: 20px;
+ display: table-cell;
+ vertical-align: middle;
+ margin: 10px 20px 10px -10px;
+ }
+ }
+
+ }
+
+ .box-text2{
+ top: -50px;
+ .content{
+ p{
+ padding-bottom: 20px;
+ }
+
+ img{
+ margin-left: -65px;
+ margin-top: 25px;
+ }
+
+ .twoArrow{
+ margin-top: -5px;
+ }
+ }
+
+
+ }
+
+
+
+}
+
+.tmpl4{
+ height: inherit;
+ width: inherit;
+ display: flex;
+ align-items: center;
+ background-color: #FF7F00;
+
+ h2{
+ padding-bottom: 20px;
+ }
+
+ p{
+ font-size: 20px;
+ line-height: 25px;
+ vertical-align: middle;
+ }
+
+ .box-images{
+ height: inherit;
+ display: table-row;
+ padding-top: 50px;
+ }
+
+ img{
+ display: table-cell;
+ vertical-align: middle;
+ top: 40px;
+ }
+
+
+}
+
+.tmpl5{
+ height: inherit;
+ width: inherit;
+ display: flex;
+ align-items: center;
+ background-color: #1AB9DE;
+
+ .title{
+ display: table-row;
+ align-items: center;
+
+ img{
+ display: table-cell;
+ margin-right: 30px;
+ }
+
+ h2{
+ display: table-cell;
+ text-align: center;
+ vertical-align: middle;
+ }
+ }
+
+ .box-text {
+ margin-top: 20px;
+ p{
+ font-size: 17px;
+ font-weight: 15px;
+ }
+ }
+
+}
+
+.tmpl6{
+ height: inherit;
+ width: inherit;
+ display: flex;
+ align-items: center;
+ background-color: #673AB7;
+
+ .box-text-1{
+ h3{
+ margin-bottom: 20px;
+ font-size: 27px;
+ }
+ p{
+ margin-bottom: 20px;
+ font-size: 18px;
+ margin-top: 0px;
+ }
+
+
+ .licences{
+ padding: 35px 150px 50px 35px;
+ margin-top: 50pz;
+ background-image: url(${Entenda});
+ background-repeat: no-repeat;
+ background-size: cover;
+ p::before{
+ content: url(${V});
+ }
+ p{
+ padding-left: 20px;
+ font-family: "Kalam", regular;
+ font-size: 24px;
+ white-space: nowrap;
+ }
+ .row{
+ padding-bottom: 5px;
+
+
+ }
+ }
+ }
+
+
+ .box-text-2{
+ background-image: url(${OrthogonalLineUp}),url(${OrthogonalLineDown});
+ background-repeat: no-repeat;
+ background-position: left top, right bottom;
+ padding-top: 30px;
+ padding-left: 50px;
+ p{
+ font-size: 15px;
+ padding-bottom: 15px;
+ }
+
+ .licenses_type{
+ margin-left: -20px;
+ font-size: 22px;
+ font-weight: bold;
+ text-align: right;
+ white-space: nowrap;
+ }
+ .row {
+ margin-right: -15px;
+ margin-left: -15px;
+
+ p {
+ padding-left: 15px;
+ }
+ }
+ }
+
+}
+
+.tmpl7{
+ height: inherit;
+ width: inherit;
+ display: flex;
+ align-items: center;
+ background-color: #E81F4F;
+
+ .title{
+ h2{
+ font-family: Roboto;
+ font-size: 44px;
+ }
+ }
+
+ .box-text{
+ margin-top: 20px;
+ p{
+ line-height: 20px;
+ font-family: "Roboto";
+ font-size: 18px;
+ }
+ }
+
+ .rodape{
+ margin-top: 40px;
+ p{
+ line-height: 20px;
+ font-family: "Pompiere", regular;
+ font-size: 28px;
+ text-align: center;
+ }
+ span{
+ text-decoration: underline;
+ font-family: "Pompiere", regular;
+ line-height: 20px;
+ font-size: 28px;
+ cursor: pointer;
+ }
+ }
+}
+
+`
+
+const CarouselStyled = styled(Carousel)`
+
+ .carousel.carousel-slider {
+ height: 500px !important;
+ }
+
+ .carousel .slider-wrapper.axis-horizontal {
+ height: 500px !important;
+ }
+ .carousel .control-dots {
+ position: absolute !important;
+ padding-bottom: 20px;
+ }
+
+ .carousel .control-arrow:before, .carousel.carousel-slider .control-arrow:before {
+ margin: 0 5px;
+ display: inline-block;
+ border-top: 8px solid transparent;
+ border-bottom: 8px solid transparent;
+ content: ' ';
+ }
+ .carousel .control-arrow {
+ background: transparent !important;
+ }
+ .m4d-icons {
+ size: 50px
+ }
+
+
+`
+
+
+class TermsCarousel extends Component {
+ render() {
+ return (
+ <CarouselStyled
+ showThumbs= {false}
+ showStatus= {false}
+ transitionTime={1000}
+
+ width={"1366px"}
+
+ >
+ <div >
+ <Slide>
+ <div className="tmpl1">
+ <div className="container">
+ <Grid container spacing={0}>
+ <Grid item xs={6} >
+ <div className="box-text">
+ <p>A Plataforma Integrada MEC RED é parte do Compromisso 6 do 3º Plano de Ação da Parceria para Governo Aberto (OGP-Brasil), que tem por objetivo “incorporar na polÃtica educacional o potencial da cultura digital, de modo a fomentar a autonomia para uso, reuso e adaptação de recursos educacionais digitais, valorizando a pluralidade e a diversidade da educação brasileiraâ€.</p>
+ </div>
+ </Grid>
+ <Grid style={{display:"flex",justifyContent:"center"}} item xs={6}>
+ <div className="box-image">
+ <img src={Handshake} alt="handshake"/>
+ </div>
+ </Grid>
+ </Grid>
+ </div>
+ </div>
+ </Slide>
+
+ </div>
+ <div>
+ <Slide>
+ <div className="tmpl2">
+ <div className="container">
+ <div className="title">
+ <h2>O que é a Plataforma Integrada MEC RED e como ela está organizada?</h2>
+ <div className="images">
+ <div className="arrow">
+ <img src={Arrow_O} alt="Arrow_O"/>
+ </div>
+ <div className="circle">
+ <img src={Arrow_O_1} alt="Arrow_O_1"/>
+ </div>
+ </div>
+ </div>
+ <Grid container>
+ <Grid className="box-text" item xs={6}>
+ <p>Uma plataforma interativa, colaborativa e criada em software livre, que disponibiliza conteúdos do acervo do MEC e indica conteúdos de parceiros com o objetivo de formar uma rede ativa de educadores interessados em usar, criar e compartilhar recursos educacionais digitais.</p>
+ </Grid>
+ <Grid className="box-text" item xs={6}>
+ <p><strong>Repositório</strong> de recursos educacionais digitais que permite aos usuários cadastrados a publicação de seus materiais e <strong>Referatório</strong> que aponta links para conteúdos em sites externos.</p>
+ </Grid>
+ </Grid>
+ </div>
+ </div>
+ </Slide>
+ </div>
+ <div>
+ <Slide>
+ <div className="tmpl3">
+ <div className="container">
+ <Grid className="title" container spacing={1}>
+ <Grid item xs={12}>
+ <h3>Os recursos educacionais disponibilizados<br/> podem ser de dois tipos:</h3>
+ </Grid>
+ </Grid>
+ <Grid className="box-text1" container spacing={1}>
+ <Grid className="text" item xs={8}>
+ <div className="content">
+ <img src={Aberto} alt="Aberto"/>
+ <p><strong>Abertos</strong>: recursos sem nenhuma restrição de acesso e<br/> com flexibilidade quanto ao uso ou reuso.</p>
+ </div>
+ <div className="content">
+ <img src={Fechado} alt="Fechado"/>
+ <p><strong>Fechados</strong>: recursos com alguma restrição de acesso, uso<br/> ou reuso, como aqueles que, para acesso, há demanda de<br/> cadastro ou que têm licenças restritivas.</p>
+ </div>
+ </Grid>
+ <Grid className="box-text2" item xs={4}>
+ <div className="content">
+ <img src={Arrow_down} alt="Arrow_down"/>
+ <p>Como repositório, a Plataforma hospeda somente Recursos Educacionais Abertos (REA). Todo conteúdo inserido por usuários deve ser aberto.</p>
+ </div>
+ <div className="content">
+ <img alt="" className="twoArrow" src={Arrow_double}/>
+ <p>Como referatório, a Plataforma aponta links para parceiros, e<br/> esses recursos podem ser abertos ou fechados.</p>
+ </div>
+ </Grid>
+ </Grid>
+ </div>
+ </div>
+ </Slide>
+ </div>
+ <div>
+ <Slide>
+ <div class="tmpl4">
+ <div class="container">
+ <Grid container spacing={5}>
+ <Grid item xs={6}>
+ <h2>Como se cadastrar?</h2>
+ <div>
+ <p>Para criar uma conta, o usuário deverá clicar no botão “Cadastre-se†na página inicial da Plataforma e fazer um cadastro utilizando um endereço de e-mail e criando uma senha.</p>
+ </div>
+ </Grid>
+ <Grid item xs={2} style={{alignSelf:"center"}}> <img style={{width:"150px",height:"150px"}} src={Pessoa} alt="Pessoa" /> </Grid>
+ <Grid item xs={2} style={{alignSelf:"center"}}> <img style={{width:"150px",height:"150px"}} src={Email} alt="Email" /> </Grid>
+ <Grid item xs={2} style={{alignSelf:"center"}}> <img style={{width:"150px",height:"150px"}} src={Seguranca} alt="Seguranca" /> </Grid>
+ </Grid>
+ </div>
+ </div>
+ </Slide>
+ </div>
+ <div>
+ <Slide>
+ <div class="tmpl5">
+ <div class="container">
+ <Grid container justify="space-evenly" spacing={12}>
+ <Grid style={{paddingRight: "40px"}} item xs={6}>
+ <div class="title">
+ <img src={Like} alt= "Like"/>
+ <h2>O que publicar?</h2>
+ </div>
+ <img src={Line} alt="Line"/>
+ <div class="box-text">
+ <p>Conteúdos de cunho educacional e pertinentes ao assunto no qual estão inseridos, de autoria do usuário, de autoria coletiva (com consentimento dos demais autores) ou que estejam no domÃnio público. </p>
+ </div>
+ </Grid>
+ <Grid item xs={6}>
+ <div class= "title">
+ <img src={Unlike} alt="Unlike"/>
+ <h2>O que não publicar?</h2>
+ </div>
+ <img src={Line} alt="Line"/>
+ <div class="box-text">
+ <p>Materiais ofensivos, pornográficos, relacionados a atividades ilegais, que invadam a privacidade de terceiros, que violem a legislação de Direito Autoral ou os Direitos Humanos. Propagandas, conteúdos com vÃrus, spam ou comentários abusivos.</p>
+ </div>
+ </Grid>
+ </Grid>
+ </div>
+ </div>
+ </Slide>
+ </div>
+ <div>
+ <Slide>
+ <div className="tmpl6">
+ <div className="container">
+ <Grid container>
+ <Grid className="box-text-1" item xs={7}>
+ <h3>Direitos do autor e licenças de uso</h3>
+ <p>Ao inserir um novo material de sua autoria no Repositório, o usuário deverá escolher um dos tipos de licença aberta disponÃveis na Plataforma:</p>
+ <div className="licences">
+ <Grid className="row" container>
+ <Grid item xs={6}>
+ <p>CC-BY</p>
+ </Grid>
+ <Grid item xs={6}>
+ <p>CC-BY-SA</p>
+ </Grid>
+ </Grid>
+ <Grid className="row" container>
+ <Grid item xs={6}>
+ <p>CC-BY-NC</p>
+ </Grid>
+ <Grid item xs={6}>
+ <p>CC-BY-NC-SA</p>
+ </Grid>
+ </Grid>
+ </div>
+ </Grid>
+ <Grid className="box-text-2" item xs={5}>
+ <Grid className="row" container>
+ <Grid item xs={2}>
+ <p className="licenses_type">CC-BY</p>
+ </Grid>
+ <Grid item xs={10}>
+ <p> significa que o autor permite que distribuam, remixem, adaptem e criem a partir do seu trabalho, desde que lhe atribuam o devido crédito pela criação original</p>
+ </Grid>
+ </Grid>
+ <Grid className="row" container>
+ <Grid item xs={2}>
+ <p className="licenses_type">NC</p>
+ </Grid>
+ <Grid item xs={10}>
+ <p> indica que as criações elaboradas a partir do trabalho do autor podem ser utilizadas somente para fins não comerciais (se não houver esta especificação, o novo recurso poderá ser utilizado para fins comerciais)</p>
+ </Grid>
+ </Grid>
+ <Grid className="row" container>
+ <Grid item xs={2}>
+ <p className="licenses_type">SA</p>
+ </Grid>
+ <Grid item xs={10}>
+ <p> quer dizer que as novas criações devem ser licenciadas sob termos idênticos aos do trabalho original</p>
+ </Grid>
+ </Grid>
+ </Grid>
+ </Grid>
+ </div>
+ </div>
+ </Slide>
+ </div>
+ <div>
+ <Slide>
+ <div class="tmpl7">
+ <div class="container">
+ <Grid container>
+ <Grid className="title" item xs={4}>
+ <h2>Respeitamos<br/> a sua privacidade</h2>
+ </Grid>
+ <Grid className="box-text" item xs={8}>
+ <p>Além de solicitar alguns dados pessoais para o cadastro, a Plataforma coleta, de forma automática, os dados não pessoais relativos à interação dos usuários no sistema. Esses dados nunca serão fornecidos para fins comerciais, assim como nunca serão compartilhados quaisquer dados pessoais que possam identificar o usuário.</p>
+ <p>Os dados anônimos poderão ser utilizados para fins de melhoria da plataforma, transparência e para o uso em pesquisas.</p>
+ </Grid>
+ </Grid>
+ <div class="rodape col-md-12">
+ <p>Dúvidas? Leia a Ãntegra dos <span ng-click="hide()">Termos de Uso</span> ou fale conosco por meio do <a style={{color: "#fff"}} href="contato">formulário de contato</a>.</p>
+ </div>
+ </div>
+ </div>
+ </Slide>
+ </div>
+ </CarouselStyled>
+ )
+ }
+}
+
+export default TermsCarousel;
diff --git a/src/Components/Checkbox.js b/src/Components/Checkbox.js
index 6aaa04c7..3e0be625 100644
--- a/src/Components/Checkbox.js
+++ b/src/Components/Checkbox.js
@@ -19,54 +19,29 @@ import React from 'react';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import styled from 'styled-components'
-import { yellow, blue } from "@material-ui/core/colors";
-import { withStyles } from '@material-ui/core/styles';
const StyledFormControlLabel = styled(FormControlLabel)`
font-size : 12px !important;
.label {
font-size : 12px !important;
}
+ .MuiCheckbox-colorSecondary.Mui-checked {
+ color : #00bcd4 !important;
+ }
`
-const ContrastCheckBox = withStyles({
- root: {
- color: yellow[400],
- '&$checked': {
- color: yellow[600],
- },
- },
- checked: {},
-})((props) => <Checkbox color="default" {...props} />);
-
-const NormalCheckBox = withStyles({
- root: {
- color: blue[400],
- '&$checked': {
- color: blue[600],
- },
- },
- checked: {},
-})((props) => <Checkbox color="default" {...props} />);
export default function LabeledCheckbox(props) {
return (
- <StyledFormControlLabel
- contrast={props.contrast}
- control={
- props.contrast === "" ?
- <NormalCheckBox
- value={props.checked}
- onChange={props.handleChange}
- />
- :
- <ContrastCheckBox
- value={props.checked}
- onChange={props.handleChange}
+ <StyledFormControlLabel
+ control={
+ <Checkbox
+ value = {props.checked}
+ onChange = {props.handleChange}
/>
- }
- label={<span style={{ fontSize: '12px' }}>{props.label}</span>}
- />
+ }
+ label={<span style={{ fontSize: '12px' }}>{props.label}</span>}
+ />
);
}
diff --git a/src/Components/CloseModalButton.js b/src/Components/CloseModalButton.js
index 186f36f0..00e8b3c3 100644
--- a/src/Components/CloseModalButton.js
+++ b/src/Components/CloseModalButton.js
@@ -6,7 +6,7 @@ import CloseIcon from '@material-ui/icons/Close';
export default function CloseModalButton (props) {
return (
<StyledCloseModalButton onClick={props.handleClose}>
- <CloseIcon style={props.contrast === "" ? { color: "#666" } : { color: "white" }}/>
+ <CloseIcon/>
</StyledCloseModalButton>
)
}
diff --git a/src/Components/ColCardOwnerOptions.js b/src/Components/ColCardOwnerOptions.js
index 0d1f9e4b..a0757806 100644
--- a/src/Components/ColCardOwnerOptions.js
+++ b/src/Components/ColCardOwnerOptions.js
@@ -31,71 +31,71 @@ import ModalExcluirColecao from './ModalExcluirColecao.js'
import ModalEditarColecao from './ModalEditarColecao.js'
export default function ColCardOwnerOptions (props) {
- const [anchorEl, setAnchorEl] = React.useState(null);
-
- function handleClick(event) {
- setAnchorEl(event.currentTarget);
- }
-
- function handleClose() {
- setAnchorEl(null);
- }
-
- const [modalExcluirOpen, toggleModalExcluir] = useState(false)
-
- const [modalEditarOpen, toggleModalEditar] = useState(false)
-
-
- return (
- <>
- <ModalExcluirColecao id={props.id}
- contrast={props.contrast} open={modalExcluirOpen} handleClose={() => {toggleModalExcluir(false)}} removeColl={props.removeColl}
- />
- <ModalEditarColecao id={props.id}
- contrast={props.contrast} open={modalEditarOpen} handleClose={() => {toggleModalEditar(false)}}
- changeColName={props.changeColName} changeColPrivacy={props.changeColPrivacy}
- />
-
- <div style={{fontSize: "12px"}}>
- <Button className={`${props.contrast}LinkColor`} aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{color : "#666"}}>
- OPÇÕES <MoreVertIcon className={`${props.contrast}IconColor`}/>
- </Button>
- <Menu
- id="simple-menu"
- anchorEl={anchorEl}
- keepMounted
- open={Boolean(anchorEl)}
- onClose={handleClose}
- MenuListProps={{
- disablePadding: true
- }}
- >
- <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast}>
- <Link to={"/colecao-do-usuario/" + props.id}>
- <ListItemIcon className={`${props.contrast}IconColor`}><OpenIcon /></ListItemIcon>Abrir
- </Link>
- </StyledMenuItem>
-
- <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => {toggleModalEditar(true)}}>
- <ListItemIcon className={`${props.contrast}IconColor`}><CreateIcon /></ListItemIcon>Editar
- </StyledMenuItem>
-
- <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => {toggleModalExcluir(true)}} >
- <ListItemIcon className={`${props.contrast}IconColor`}><DeleteForeverIcon /></ListItemIcon>Excluir
- </StyledMenuItem>
- </Menu>
- </div>
- </>
- )
+ const [anchorEl, setAnchorEl] = React.useState(null);
+
+ function handleClick(event) {
+ setAnchorEl(event.currentTarget);
+ }
+
+ function handleClose() {
+ setAnchorEl(null);
+ }
+
+ const [modalExcluirOpen, toggleModalExcluir] = useState(false)
+
+ const [modalEditarOpen, toggleModalEditar] = useState(false)
+
+
+ return (
+ <>
+ <ModalExcluirColecao id={props.id}
+ open={modalExcluirOpen} handleClose={() => {toggleModalExcluir(false)}} removeColl={props.removeColl}
+ />
+ <ModalEditarColecao id={props.id}
+ open={modalEditarOpen} handleClose={() => {toggleModalEditar(false)}}
+ changeColName={props.changeColName} changeColPrivacy={props.changeColPrivacy}
+ />
+
+ <div style={{fontSize: "12px"}}>
+ <Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{color : "#666"}}>
+ OPÇÕES <MoreVertIcon style={{color : "inherit"}}/>
+ </Button>
+ <Menu
+ id="simple-menu"
+ anchorEl={anchorEl}
+ keepMounted
+ open={Boolean(anchorEl)}
+ onClose={handleClose}
+ >
+ <StyledMenuItem>
+ <Link to={"/colecao-do-usuario/" + props.id}>
+ <ListItemIcon><OpenIcon /></ListItemIcon>Abrir
+ </Link>
+ </StyledMenuItem>
+
+ <StyledMenuItem onClick={() => {toggleModalEditar(true)}}>
+ <ListItemIcon><CreateIcon /></ListItemIcon>Editar
+ </StyledMenuItem>
+
+ <StyledMenuItem onClick={() => {toggleModalExcluir(true)}} >
+ <ListItemIcon><DeleteForeverIcon /></ListItemIcon>Excluir
+ </StyledMenuItem>
+
+
+ </Menu>
+ </div>
+ </>
+ )
}
export const StyledMenuItem = styled(MenuItem)`
- background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ color : #666 !important;
.MuiSvgIcon-root {
vertical-align : middle !important;
}
a {
- color : inherit !important;
+ text-decoration : none !important;
+ color : #666 !important;
}
`
diff --git a/src/Components/ColCardPublicOptions.js b/src/Components/ColCardPublicOptions.js
index 63b4d864..2b58c70f 100644
--- a/src/Components/ColCardPublicOptions.js
+++ b/src/Components/ColCardPublicOptions.js
@@ -32,7 +32,7 @@ import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser';
import AddIcon from '@material-ui/icons/Add';
import ExitToAppIcon from '@material-ui/icons/ExitToApp';
-export default function ColCardPublicOptions({ contrast, id, userFollowingCol, handleLike, handleFollow, currentUserId, handleLogin, liked }) {
+export default function ColCardPublicOptions({ id, userFollowingCol, handleLike, handleFollow, currentUserId, handleLogin, liked }) {
const [anchorEl, setAnchorEl] = React.useState(null);
function handleClick(event) {
@@ -49,7 +49,6 @@ export default function ColCardPublicOptions({ contrast, id, userFollowingCol, h
return (
<>
<ReportModal
- contrast={contrast}
open={reportModalOpen}
handleClose={() => handleReportModal(false)}
form="colecao"
@@ -63,7 +62,7 @@ export default function ColCardPublicOptions({ contrast, id, userFollowingCol, h
onClick={handleClick}
style={{ color: "#666" }}
>
- <MoreVertIcon className={`${contrast}IconColor`} style={{ color: "inherit" }} />
+ <MoreVertIcon style={{ color: "inherit" }} />
</Button>
<Menu
id="simple-menu"
@@ -71,13 +70,10 @@ export default function ColCardPublicOptions({ contrast, id, userFollowingCol, h
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
- MenuListProps={{
- disablePadding: true
- }}
>
- <StyledMenuItem className={`${contrast}LinkColor ${contrast}Text`} contrast={contrast}>
+ <StyledMenuItem>
<Link to={"/colecao-do-usuario/" + id}>
- <ListItemIcon className={`${contrast}IconColor`}>
+ <ListItemIcon>
<OpenIcon />
</ListItemIcon>
Abrir
@@ -85,23 +81,21 @@ export default function ColCardPublicOptions({ contrast, id, userFollowingCol, h
</StyledMenuItem>
<StyledMenuItem
- className={`${contrast}LinkColor ${contrast}Text`}
- contrast={contrast}
onClick={() =>
window.open("/colecao-do-usuario/" + id, "_blank")
}
>
- <ListItemIcon className={`${contrast}IconColor ${contrast}Text`}>
+ <ListItemIcon>
<OpenInBrowserIcon />
</ListItemIcon>
Abrir em nova guia
</StyledMenuItem>
- <StyledMenuItem className={`${contrast}LinkColor ${contrast}Text`} contrast={contrast} onClick={handleLike}>
- <ListItemIcon className={`${contrast}IconColor`}>
+ <StyledMenuItem onClick={handleLike}>
+ <ListItemIcon>
{
liked ?
- <FavoriteIcon /> : <FavoriteIcon />
+ <FavoriteIcon style={{ fill: 'red' }} /> : <FavoriteIcon style={{ fill: '#666' }} />
}
</ListItemIcon>
{
@@ -110,8 +104,8 @@ export default function ColCardPublicOptions({ contrast, id, userFollowingCol, h
}
</StyledMenuItem>
- <StyledMenuItem className={`${contrast}LinkColor ${contrast}Text`} contrast={contrast} onClick={handleFollow}>
- <ListItemIcon className={`${contrast}IconColor`}>
+ <StyledMenuItem onClick={handleFollow}>
+ <ListItemIcon>
{
userFollowingCol ?
<ExitToAppIcon /> : <AddIcon />
@@ -124,8 +118,6 @@ export default function ColCardPublicOptions({ contrast, id, userFollowingCol, h
</StyledMenuItem>
<StyledMenuItem
- className={`${contrast}LinkColor ${contrast}Text`}
- contrast={contrast}
onClick={() => {
if (currentUserId)
handleReportModal(true);
@@ -133,7 +125,7 @@ export default function ColCardPublicOptions({ contrast, id, userFollowingCol, h
handleLogin()
}}
>
- <ListItemIcon className={`${contrast}IconColor`}>
+ <ListItemIcon>
<ReportProblemIcon />
</ListItemIcon>
Reportar
@@ -145,11 +137,13 @@ export default function ColCardPublicOptions({ contrast, id, userFollowingCol, h
}
export const StyledMenuItem = styled(MenuItem)`
- background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
- .MuiSvgIcon-root {
- vertical-align: middle !important;
- }
- a {
- color: inherit !important;
- }
+ color: #666 !important;
+
+ .MuiSvgIcon-root {
+ vertical-align: middle !important;
+ }
+ a {
+ text-decoration: none !important;
+ color: #666 !important;
+ }
`;
diff --git a/src/Components/CollectionAuthor.js b/src/Components/CollectionAuthor.js
index 3d5c4231..c6c299cf 100644
--- a/src/Components/CollectionAuthor.js
+++ b/src/Components/CollectionAuthor.js
@@ -30,20 +30,19 @@ export default function CollectionAuthor(props) {
justify="center"
alignItems="center">
{props.imgsrc ?
- <Link
+ <UserLink
to={`/usuario-publico/${props.author_id}`}
- contrast={props.contrast}
>
<UserAvatar src={props.imgsrc} />
- </Link>
+ </UserLink>
:
<CircularProgress color="secondary" />
}
- <InfoText contrast={props.contrast}>Coleção organizada por:</InfoText>
+ <InfoText>Coleção organizada por:</InfoText>
{props.name ?
- <Link to={`/usuario-publico/${props.author_id}`} contrast={props.contrast}>
- <UserName contrast={props.contrast}>{props.name}</UserName>
- </Link>
+ <UserLink to={`/usuario-publico/${props.author_id}`} >
+ <UserName>{props.name}</UserName>
+ </UserLink>
:
<CircularProgress />
}
@@ -59,10 +58,15 @@ const UserAvatar = styled.img`
const InfoText = styled.p`
margin-bottom: 0;
padding-bottom: 0;
- color: ${props => props.contrast === "" ? "#666 !important" : "white !important"};
+ color: #666;
`
const UserName = styled.h2`
margin-top: 10px;
- color: ${props => props.contrast === "" ? "#673ab7 !important" : "yellow !important"};
- text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"};
+ color: #673ab7;
+`
+const UserLink = styled(Link)`
+ text-decoration: none;
+ &:focus, &:hover, &:visited, &:link, &:active {
+ text-decoration: none;
+ }
`
diff --git a/src/Components/CollectionCardFunction.js b/src/Components/CollectionCardFunction.js
index 926de15f..1a3057dd 100644
--- a/src/Components/CollectionCardFunction.js
+++ b/src/Components/CollectionCardFunction.js
@@ -43,291 +43,283 @@ import MuiAlert from '@material-ui/lab/Alert';
import { noAvatar } from "ImportImages.js";
export default function CollectionCardFunction(props) {
- const { state } = useContext(Store)
-
- // eslint-disable-next-line
- const [userAvatar] = useState(props.avatar ? (`${apiDomain}` + props.avatar) : noAvatar)
- const [userFollowingCol, toggleUserFollowingCol] = useState(props.followed)
- const handleToggleUserFollowingCol = () => { toggleUserFollowingCol(!userFollowingCol) }
-
- const [name, setName] = useState(props.name)
- const changeColName = (newName) => { setName(newName) }
-
- const [privacy, setPrivacy] = useState(props.privacy)
- const changeColPrivacy = (newPrivacy) => { setPrivacy(newPrivacy) }
-
- const [likesCount, setLikesCount] = useState(props.likeCount)
- const [liked, toggleLiked] = useState(props.liked)
-
- const [signUpOpen, setSignUp] = useState(false)
- const [loginOpen, setLogin] = useState(false)
- const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
-
+ const { state } = useContext(Store)
+
+ // eslint-disable-next-line
+ const [userAvatar] = useState(props.avatar ? (`${apiDomain}` + props.avatar) : noAvatar)
+ const [userFollowingCol, toggleUserFollowingCol] = useState(props.followed)
+ const handleToggleUserFollowingCol = () => { toggleUserFollowingCol(!userFollowingCol) }
+
+ const [name, setName] = useState(props.name)
+ const changeColName = (newName) => { setName(newName) }
+
+ const [privacy, setPrivacy] = useState(props.privacy)
+ const changeColPrivacy = (newPrivacy) => { setPrivacy(newPrivacy) }
+
+ const [likesCount, setLikesCount] = useState(props.likeCount)
+ const [liked, toggleLiked] = useState(props.liked)
+
+ const [signUpOpen, setSignUp] = useState(false)
+ const [loginOpen, setLogin] = useState(false)
+ const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
+
+
+ function handleSuccessLike(data) {
+ toggleLiked(!liked)
+ setLikesCount(data.count)
+ }
+ const handleLike = () => {
+ if (state.currentUser.id)
+ putRequest(`/collections/${props.id}/like`, {}, handleSuccessLike, (error) => { console.log(error) })
+ else
+ handleLogin()
+ }
+
+ const [followingHover, handleFollowingHover] = useState(false)
+ const toggleFollowingHover = (value) => { handleFollowingHover(value) }
+
+ const [slideIn, setSlide] = useState(false)
+ const controlSlide = () => { setSlide(!slideIn) }
+
+ function handleSuccessFollow(data) {
+ handleToggleUserFollowingCol()
+ }
+ const handleFollow = () => {
+ if (state.currentUser.id)
+ putRequest(`/collections/${props.id}/follow`, {}, handleSuccessFollow, (error) => { console.log(error) })
+ else
+ handleLogin()
+ }
+
+ const RenderFollowButton = () => {
+ return (
+ <FollowButton onClick={handleFollow}>
+ <AddIcon /><span>SEGUIR</span>
+ </FollowButton>
+ )
+ }
- function handleSuccessLike(data) {
- toggleLiked(!liked)
- setLikesCount(data.count)
- }
- const handleLike = () => {
- if (state.currentUser.id)
- putRequest(`/collections/${props.id}/like`, {}, handleSuccessLike, (error) => { console.log(error) })
- else
- handleLogin()
+ useEffect(() => {
+ if (!state.currentUser.id) {
+ toggleLiked(false);
+ toggleUserFollowingCol(false);
}
+ }, [state.currentUser.id])
- const [followingHover, handleFollowingHover] = useState(false)
- const toggleFollowingHover = (value) => { handleFollowingHover(value) }
+ const RenderFollowingButton = () => {
+ return (
+ <FollowingButton onMouseOver={() => toggleFollowingHover(true)}
+ onMouseLeave={() => toggleFollowingHover(false)} onClick={handleFollow}>
+ {
+ followingHover ?
+ (
+ [
+ <span>DEIXAR DE SEGUIR</span>
+ ]
+ )
+ :
+ (
+ [
+ <React.Fragment>
+ <CheckIcon /><span>SEGUINDO</span>
+ </React.Fragment>
+ ]
+ )
+ }
+ </FollowingButton>
+ )
+ }
- const [slideIn, setSlide] = useState(false)
- const controlSlide = () => { setSlide(!slideIn) }
+ const SlideAnimationContent = () => {
+ return (
+ <SlideContentDiv>
+ <HeaderContainer container="row" justify="flex-start" alignItems="center">
+ <AvatarDiv item xs={2}>
+ <img className="img" src={userAvatar} alt="user avatar" />
+ </AvatarDiv>
+ <EnviadoPor item xs={10}>
+ Enviado por:
+ <br />
+ <p>{props.author}</p>
+ </EnviadoPor>
+ </HeaderContainer>
+ {
+ props.tags ?
+ <TagContainer container direction="row">
+ {
+ props.tags.map((tag) =>
+ <Grid item key={tag.id}>
+ <span >{tag.name}</span>
+ </Grid>
+ )
+ }
+ </TagContainer> :
+ null
+ }
+ </SlideContentDiv>
+ )
+ }
- function handleSuccessFollow(data) {
- handleToggleUserFollowingCol()
- }
- const handleFollow = () => {
- if (state.currentUser.id)
- putRequest(`/collections/${props.id}/follow`, {}, handleSuccessFollow, (error) => { console.log(error) })
- else
- handleLogin()
- }
+ const handleSignUp = () => {
+ setSignUp(!signUpOpen)
+ }
- const RenderFollowButton = () => {
- return (
- <FollowButton className={`${props.contrast}LinkColor`} style={props.contrast === "" ? {border: "2px solid #503096", borderRadius : "5px", color :"#503096" } : {border: "1px solid white", borderRadius : "5px", color :"#503096"}} onClick={handleFollow}>
- <AddIcon className={`${props.contrast}IconColor`}/><span>SEGUIR</span>
- </FollowButton>
- )
- }
+ const handleLogin = () => {
+ setLogin(!loginOpen)
+ }
- useEffect(() => {
- if (!state.currentUser.id) {
- toggleLiked(false);
- toggleUserFollowingCol(false);
- }
- }, [state.currentUser.id])
+ function Alert(props) {
+ return <MuiAlert elevation={6} variant="filled" {...props} />;
+ }
- const RenderFollowingButton = () => {
- return (
- <FollowingButton className={`${props.contrast}LinkColor`} style={props.contrast === "" ? {border: "2px solid #503096", borderRadius : "5px", color :"#fff", backgroundColor : "#503096" } : {border: "1px solid white", borderRadius : "5px", color :"#503096"}}onMouseOver={() => toggleFollowingHover(true)}
- onMouseLeave={() => toggleFollowingHover(false)} onClick={handleFollow}>
- {
- followingHover ?
- (
- [
- <span>DEIXAR DE SEGUIR</span>
- ]
- )
- :
- (
- [
- <React.Fragment>
- <CheckIcon className={`${props.contrast}IconColor`}/><span>SEGUINDO</span>
- </React.Fragment>
- ]
- )
- }
- </FollowingButton>
- )
+ function toggleLoginSnackbar(reason) {
+ if (reason === 'clickaway') {
+ return;
}
-
- const SlideAnimationContent = (contrast) => {
- return (
- <SlideContentDiv style={contrast === '' ? {backgroundColor: "#7e57c2"} : {backgroundColor: "inherit"}}>
- <HeaderContainer container="row" justify="flex-start" alignItems="center">
- <AvatarDiv item xs={2}>
- <img className="img" src={userAvatar} alt="user avatar" />
- </AvatarDiv>
- <EnviadoPor item xs={10}>
- Enviado por:
- <br />
- <p>{props.author}</p>
- </EnviadoPor>
- </HeaderContainer>
- {
- props.tags ?
- <TagContainer container direction="row">
+ handleSuccessfulLogin(false);
+ }
+
+ return (
+ <>
+ <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}
+ />
+ <LoginModal 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>
+ <StyledCard>
+ <CardDiv>
+ <CardReaDiv>
+ <Link to={"/colecao-do-usuario/" + props.id}>
+ <Header onMouseEnter={controlSlide} onMouseLeave={controlSlide}>
+ <div className={`slideContentLinkBeforeActive${slideIn}`} style={{ width: '272.5px', height: '230px' }}>
+ <UserInfo style={{ width: '272.5px'}}>
+ {/* I(Luis) dont know why, but if i use styled components, sometimes the avatar will be deconfigured */}
+ <img src={userAvatar} alt="user avatar" style={{
+ height: "70px", width: "70px", borderRadius: "50%",
+ zIndex: 1, border: "2px solid white",
+ boxShadow: "0 1px 3px rgba(0,0,0,.45)"
+ }} />
+ <UserAndTitle>
+ <span>{props.author}</span>
+ <span className={"col-name"}>{name}</span>
+ </UserAndTitle>
+ </UserInfo>
+ <StyledGrid container direction="row" style={{ width: '272.5px' }}>
{
- props.tags.map((tag) =>
- <Grid item key={tag.id}>
- <span className={`${props.contrast}BackColor ${props.contrast}Text`}>{tag.name}</span>
+ props.thumbnails.map((thumb) =>
+ <Grid item xs={props.thumbnails.length <= 3 && props.thumbnails.length > 0 ? 12 / props.thumbnails.length : 6}>
+ <div style={{ backgroundImage: `url(${`${apiDomain}` + thumb})`, height: `${props.thumbnails.length <= 3 ? '230px' : '100%'}`, width: "100%", backgroundSize: "cover", backgroundPosition: "center" }} />
</Grid>
- )
+ )
}
- </TagContainer> :
- null
- }
- </SlideContentDiv>
- )
- }
-
- const handleSignUp = () => {
- setSignUp(!signUpOpen)
- }
-
- const handleLogin = () => {
- setLogin(!loginOpen)
- }
-
- function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
- }
-
- function toggleLoginSnackbar(reason) {
- if (reason === 'clickaway') {
- return;
- }
- handleSuccessfulLogin(false);
- }
-
- return (
- <>
- <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}
- />
- <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>
- <StyledCard>
- <CardDiv className={`${props.contrast}Border`}>
- <CardReaDiv className={`${props.contrast}BackColor`}>
- <Link to={"/colecao-do-usuario/" + props.id}>
- <Header onMouseEnter={controlSlide} onMouseLeave={controlSlide}>
- <div className={`slideContentLinkBeforeActive${slideIn}`} style={{ width: '272.5px', height: '230px' }}>
- <UserInfo style={{ width: '272.5px'}}>
- {/* I(Luis) dont know why, but if i use styled components, sometimes the avatar will be deconfigured */}
- <img src={userAvatar} alt="user avatar" style={{
- height: "70px", width: "70px", borderRadius: "50%",
- zIndex: 1, border: "2px solid white",
- boxShadow: "0 1px 3px rgba(0,0,0,.45)"
- }} />
- <UserAndTitle>
- <span>{props.author}</span>
- <span className={"col-name"}>{name}</span>
- </UserAndTitle>
- </UserInfo>
- <StyledGrid container direction="row" style={{ width: '272.5px' }}>
- {
- props.thumbnails.map((thumb) =>
- <Grid item xs={props.thumbnails.length <= 3 && props.thumbnails.length > 0 ? 12 / props.thumbnails.length : 6}>
- <div style={{ backgroundImage: `url(${`${apiDomain}` + thumb})`, height: `${props.thumbnails.length <= 3 ? '230px' : '100%'}`, width: "100%", backgroundSize: "cover", backgroundPosition: "center" }} />
- </Grid>
- )
- }
- </StyledGrid>
- </div>
- {
- <div className={`slideContentLinkAfterActive${slideIn}`}>
- <div className="Text" style={{ width: "100%" }}>
- {SlideAnimationContent(props.contrast)}
- </div>
- </div>
- }
- </Header>
- </Link>
-
- <Description className={`${props.contrast}BackColor`}> {/*renders rating, number of learning objects and likes count*/}
- {
- props.authorID !== state.currentUser.id &&
- <Rating
- style={props.contrast === "" ? {} : {color: "white"}}
- name="customized-empty"
- value={props.rating}
- readOnly
- emptyIcon={<StarBorderIcon className={`${props.contrast}Text`} fontSize="inherit" />}
- />
- }
-
- <Footer className={`${props.contrast}Text`}>
- <Type>
- <FolderIcon style={props.contrast === "" ? {} : {color: "white"}} />
- <span style={{ fontWeight: "bold" }}>{props.collections ? props.collections.length : 0} </span>
- <span>{props.collections ? props.collections.length !== 1 ? "Recursos" : "Recurso" : 0}</span>
- </Type>
- <LikeCounter>
- <span>{likesCount}</span>
- <ButtonNoWidth onClick={handleLike}>
- <FavoriteIcon className={`${props.contrast}LinkColor`} style={ props.contrast === "" ? {color: liked ? "red" : "#666"} : {color: liked ? "red" : "white"} } />
- </ButtonNoWidth>
- </LikeCounter>
- </Footer>
- </Description>
-
- </CardReaDiv>
-
+ </StyledGrid>
+ </div>
{
- props.authorID === state.currentUser.id ?
- (
- <CardReaFooter className={`${props.contrast}BackColor`} style={{ justifyContent: "space-between" }}> {/*renders following/unfollow and follow button*/}
- <Grid container>
- <Grid item xs={6} style={{ display: "flex", justifyContent: "center" }}>
- {
- privacy === 'private' &&
- <LockIcon className={`${props.contrast}IconColor`} />
- }
- </Grid>
- <Grid item xs={6} style={{ display: "flex", justifyContent: "flex-end" }}>
- <ColCardOwnerOptions
- contrast={props.contrast}
- id={props.id}
- changeColName={changeColName}
- changeColPrivacy={changeColPrivacy}
- removeColl={props.removeColl}
- />
- </Grid>
- </Grid>
- </CardReaFooter>
- )
- :
- (
- <CardReaFooter className={`${props.contrast}BackColor`}> {/*renders following/unfollow and follow button*/}
- <Grid container>
- <Grid item xs={2}></Grid>
- <Grid item xs={8} style={{ display: "flex", justifyContent: "center" }}>
- {
- userFollowingCol ?
- (
- [
- RenderFollowingButton()
- ]
- )
- :
- (
- [
- RenderFollowButton()
- ]
- )
- }
- </Grid>
- <Grid item xs={2} style={{ display: "flex", justifyContent: "flex-end" }}>
- <ColCardPublicOptions
- contrast={props.contrast}
- id={props.id}
- userFollowingCol={userFollowingCol}
- handleLike={handleLike}
- handleFollow={handleFollow}
- liked={liked}
- handleLogin={handleLogin}
- currentUserId={state.currentUser.id}
- />
- </Grid>
- </Grid>
- </CardReaFooter>
- )
+ <div className={`slideContentLinkAfterActive${slideIn}`} style={{ width: '272.5px', height: '230px' }}>
+ <div className="text" >
+ {SlideAnimationContent()}
+ </div>
+ </div>
}
-
- </CardDiv>
- </StyledCard>
- </>
- )
+ </Header>
+ </Link>
+
+ <Description> {/*renders rating, number of learning objects and likes count*/}
+ {
+ props.authorID !== state.currentUser.id &&
+ <Rating
+ name="customized-empty"
+ value={props.rating}
+ readOnly
+ style={{ color: "#666" }}
+ emptyIcon={<StarBorderIcon fontSize="inherit" />}
+ />
+ }
+
+ <Footer>
+ <Type>
+ <FolderIcon />
+ <span style={{ fontWeight: "bold" }}>{props.collections ? props.collections.length : 0} </span>
+ <span>{props.collections ? props.collections.length !== 1 ? "Recursos" : "Recurso" : 0}</span>
+ </Type>
+ <LikeCounter>
+ <span>{likesCount}</span>
+ <ButtonNoWidth onClick={handleLike}>
+ <FavoriteIcon style={{ color: liked ? "red" : "#666" }} />
+ </ButtonNoWidth>
+ </LikeCounter>
+ </Footer>
+ </Description>
+
+ </CardReaDiv>
+
+ {
+ props.authorID === state.currentUser.id ?
+ (
+ <CardReaFooter style={{ justifyContent: "space-between" }}> {/*renders following/unfollow and follow button*/}
+ <Grid container>
+ <Grid item xs={6} style={{ display: "flex", justifyContent: "center" }}>
+ {
+ privacy === 'private' &&
+ <LockIcon style={{ color: "#666" }} />
+ }
+ </Grid>
+ <Grid item xs={6} style={{ display: "flex", justifyContent: "flex-end" }}>
+ <ColCardOwnerOptions
+ id={props.id}
+ changeColName={changeColName}
+ changeColPrivacy={changeColPrivacy}
+ removeColl={props.removeColl}
+ />
+ </Grid>
+ </Grid>
+ </CardReaFooter>
+ )
+ :
+ (
+ <CardReaFooter> {/*renders following/unfollow and follow button*/}
+ {
+ userFollowingCol ?
+ (
+ [
+ RenderFollowingButton()
+ ]
+ )
+ :
+ (
+ [
+ RenderFollowButton()
+ ]
+ )
+ }
+ <ColCardPublicOptions
+ id={props.id}
+ userFollowingCol={userFollowingCol}
+ handleLike={handleLike}
+ handleFollow={handleFollow}
+ liked={liked}
+ handleLogin={handleLogin}
+ currentUserId={state.currentUser.id}
+ />
+ </CardReaFooter>
+ )
+ }
+
+ </CardDiv>
+ </StyledCard>
+ </>
+ )
}
const SlideContentDiv = styled.div`
+ background-color : #7e57c2;
padding : 10px;
width : 272.5px;
height : 230px;
@@ -377,6 +369,7 @@ const CardReaFooter = styled.div`
display : flex;
justify-content : center;
align-items : center;
+ border-top : 1px solid #e5e5e5;
.MuiSvgIcon-root {
font-family: 'Material Icons';
@@ -411,6 +404,8 @@ const StyledGrid = styled(Grid)`
height : 136px;
width 130px;
background : #f9f9f9;
+ border : 1px solid #f4f4f4;
+ border-color : #f4f4f4;
}
`
@@ -430,6 +425,12 @@ const Description = styled.div`
padding : 15px;
`
const FollowButton = styled(Button)`
+ border : 2px solid #503096 !important;
+ border-radius : 5px !important;
+ margin : 10px !important;
+ color :#503096 !important;
+ min-width : 150px !important;
+ min-height : 36px !important;
text-align : center !important;
vertical-align : middle !important;
background : transparent !important;
@@ -442,11 +443,22 @@ const FollowButton = styled(Button)`
white-space : nowrap !important;
font-weight: 500;
+ &:hover {
+ background-color : rgba(158,158,158,0.2) !important;
+
+ }
+
`
const FollowingButton = styled(Button)`
+ border : 2px solid #503096 !important;
+ border-radius : 5px !important;
+ margin : 10px !important;
+ color :#fff !important;
+ min-width : 150px !important;
+ min-height : 36px !important;
text-align : center !important;
vertical-align : middle !important;
-
+ background-color : #503096 !important;
text-transform : uppercase !important;
font-family : inherit !important;
overflow : hidden !important;
@@ -456,4 +468,10 @@ const FollowingButton = styled(Button)`
white-space : nowrap !important;
font-weight: 500;
-`
\ No newline at end of file
+ &:hover {
+ background-color : rgba(158,158,158,0.2) !important;
+ color : #503096 !important;
+ box-shadow : none !important;
+ }
+
+`
diff --git a/src/Components/CollectionCommentSection.js b/src/Components/CollectionCommentSection.js
index a317a429..4f16d012 100644
--- a/src/Components/CollectionCommentSection.js
+++ b/src/Components/CollectionCommentSection.js
@@ -20,6 +20,7 @@ import React, { useRef, useState, useEffect, Fragment } from 'react';
import { Grid } from '@material-ui/core';
import Card from '@material-ui/core/Card';
import Button from '@material-ui/core/Button';
+import EditIcon from '@material-ui/icons/Edit';
import styled from 'styled-components';
import CommentForm from './ResourcePageComponents/CommentForm.js';
import Comment from './Comment.js';
@@ -40,7 +41,7 @@ import { Comentarios } from "ImportImages.js";
export default function CollectionCommentSection(props) {
const [post_snack_open, setPostSnackOpen] = useState(false);
const [delete_snack_open, setDeleteSnackOpen] = useState(false);
- const [render_state, setRenderState] = useState(0);
+ const [render_state, setRenderState] = useState(false);
const [sign_up_open, setSignUpOpen] = useState(false);
const [log_in_open, setLoginOpen] = useState(false);
const [is_loading, setIsLoading] = useState(false);
@@ -55,7 +56,7 @@ export default function CollectionCommentSection(props) {
const [currPageReviews, setCurrPageReviews] = useState(0);
const comment_ref = useRef(null);
- const forceUpdate = () => { setCurrPageReviews(0); setRenderState(render_state + 1); }
+ const forceUpdate = () => { setRenderState(!render_state); }
const handlePostSnackbar = () => {
setPostSnackOpen(!post_snack_open);
@@ -65,6 +66,10 @@ export default function CollectionCommentSection(props) {
setDeleteSnackOpen(!delete_snack_open);
}
+ const handleScrollToCommentForm = () => {
+ window.scrollTo(0, comment_ref.current.offsetTop);
+ }
+
function handleOpenSnackSignIn() {
const info = {
open: true,
@@ -113,37 +118,47 @@ export default function CollectionCommentSection(props) {
}
}
- const NoCommentsMessage = (contrast) => {
+ const NoCommentsMessage = () => {
const NoCommentsContainer = styled.div`
text-align: center;
margin-left: 9vw;
margin-right: 9vw;
`
const BlueTitle = styled.h2`
- color: ${props => props.contrast === "" ? "#673ab7" : "white"};
+ color: #673ab7;
`
const Secondary = styled.h3`
font-weight: 100;
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ `
+ const ButtonText = styled.span`
+ font-weight: 900;
`
const Image = styled.img`
`
return (
<NoCommentsContainer>
<Image src={Comentarios} style={{ width: "100%", maxWidth: 234 }} />
- <BlueTitle contrast={contrast}>Compartilhe sua opinião com a rede!</BlueTitle>
- <Secondary contrast={contrast}>Gostou desta coleção? Comente e compartilhe com a rede sua opinião. Interagindo com a rede, você contribui para que mais coleções como esta sejam criadas.</Secondary>
+ <BlueTitle>Compartilhe sua opinião com a rede!</BlueTitle>
+ <Secondary>Gostou desta coleção? Comente e compartilhe com a rede sua opinião. Interagindo com a rede, você contribui para que mais coleções como esta sejam criadas.</Secondary>
+ <Button
+ variant="contained"
+ color="primary"
+ startIcon={<EditIcon />}
+ onClick={handleScrollToCommentForm}
+ >
+ <ButtonText>Relatar experiência</ButtonText>
+ </Button>
</NoCommentsContainer>
);
}
- const CollectionComments = (contrast) => {
+ const CollectionComments = () => {
return (
- <ComentariosBox contrast={contrast}>
+ <ComentariosBox>
+ <h3>{totalReviews} {totalReviews !== 1 ? 'Relatos' : 'Relato'} sobre o uso do Recurso</h3>
{reviews.map(r => {
return (
<div className="comentario-template" key={r.created_at}>
<Comment
- contrast={contrast}
isCollection={false}
rerenderCallback={forceUpdate}
objectID={props.id}
@@ -172,10 +187,7 @@ export default function CollectionCommentSection(props) {
}
function handleSuccessGet(data, headers) {
- if (currPageReviews !== 0)
- setReviews((previousState) => previousState.concat(data));
- else
- setReviews(data);
+ setReviews((previousState) => previousState.concat(data));
if (headers.has('X-Total-Count'))
setTotalReviews(headers.get('X-Total-Count'))
setIsLoading(false);
@@ -195,7 +207,7 @@ export default function CollectionCommentSection(props) {
}, [render_state, currPageReviews]);
return (
- <CommentAreaContainer contrast={props.contrast} container xs={12} direction="row" justify="center" alignItems="center">
+ <CommentAreaContainer container xs={12} direction="row" justify="center" alignItems="center">
<SnackBarComponent
snackbarOpen={snackInfo.open}
handleClose={handleCloseSnack}
@@ -204,24 +216,22 @@ export default function CollectionCommentSection(props) {
color={snackInfo.color}
/>
<SignUpModal
- contrast={props.contrast}
open={sign_up_open}
handleClose={() => setSignUpOpen(false)}
openLogin={() => setLoginOpen(true)}
/>
<LoginModal
- contrast={props.contrast}
openSnackbar={handleOpenSnackSignIn}
open={log_in_open}
handleClose={() => setLoginOpen(false)}
openSignUp={handleOpenSignUp}
/>
<Grid item xs={12} ref={comment_ref}>
- <CommentAreaCard contrast={props.contrast}>
+ <CommentAreaCard>
{
props.currentUserId ?
<Fragment>
- <Title contrast={props.contrast}>Conte sua experiência com a coleção</Title>
+ <Title>Conte sua experiência com a coleção</Title>
<Grid container style={{ paddingTop: "20px" }} spacing={1}>
<Grid item xs={12} sm={2} style={{ paddingLeft: "15px", paddingRight: "15px" }}>
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
@@ -230,7 +240,6 @@ export default function CollectionCommentSection(props) {
</Grid>
<Grid item xs={12} sm={10}>
<CommentForm
- contrast={props.contrast}
colecao
recursoId={props.id}
handleSnackbar={handlePostSnackbar}
@@ -241,11 +250,11 @@ export default function CollectionCommentSection(props) {
</Fragment>
:
<Grid item xs={12}>
- <LogInToComment contrast={props.contrast}>
+ <LogInToComment>
<span className="span-purple">Você precisa entrar para comentar</span>
- <Button onClick={() => setSignUpOpen(true)} style={props.contrast === "" ? { textTransform: "uppercase", color: "#666", fontWeight: "700" } : { textTransform: "uppercase", color: "yellow", fontWeight: "700", textDecoration: "underline" }}>
+ <Button onClick={() => setSignUpOpen(true)} style={{ textTransform: "uppercase", color: "#666", fontWeight: "700" }}>
<ExitToAppIcon />ENTRAR
- </Button>
+ </Button>
</LogInToComment>
</Grid>
}
@@ -255,7 +264,7 @@ export default function CollectionCommentSection(props) {
<CircularProgress className="loading" />
</LoadingDiv>
:
- reviews.length ? CollectionComments(props.contrast) : NoCommentsMessage(props.contrast)
+ reviews.length ? CollectionComments() : NoCommentsMessage()
}
</CommentAreaCard>
</Grid>
@@ -267,7 +276,7 @@ export default function CollectionCommentSection(props) {
>
<Alert onClose={handlePostSnackbar} severity="info">
Seu comentário foi publicado com sucesso!
- </Alert>
+ </Alert>
</Snackbar>
<Snackbar
open={delete_snack_open}
@@ -293,7 +302,7 @@ const ComentariosBox = styled.div`
font-family: 'Roboto Light','Roboto Regular',Roboto;
font-weight: 300;
font-style: normal;
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color:#666;
font-size: 1.857em;
margin: 15px 2%;
text-align : flex-start;
@@ -305,17 +314,17 @@ const ComentariosBox = styled.div`
border-bottom : 1px solid #f4f4f4;
}
- .load-more{
- width: 100%;
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- }
-
- .button{
- box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
- }
+ .load-more{
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .button{
+ box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+ }
`
const Avatar = styled.img`
@@ -348,7 +357,7 @@ const LogInToComment = styled.div`
font-size : 24px;
font-weight : 700;
padding-bottom : 5px;
- color: ${props => props.contrast === "" ? "#673ab7" : "white"};
+ color : #673ab7;
}
img {
@@ -359,15 +368,12 @@ const LogInToComment = styled.div`
const CommentAreaContainer = styled(Grid)`
padding: 10px;
- background: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
`
const CommentAreaCard = styled(Card)`
padding: 45px;
- background: ${props => props.contrast === "" ? "#f4f4f4" : "black !important"};
- border: ${props => props.contrast === "" ? "" : "1px solid white !important"};
`
const Title = styled.h1`
text-align: center;
font-weight: 100;
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color: #666;
`
diff --git a/src/Components/CollectionDescription.js b/src/Components/CollectionDescription.js
index a8eedcbc..60de747f 100644
--- a/src/Components/CollectionDescription.js
+++ b/src/Components/CollectionDescription.js
@@ -43,9 +43,7 @@ export default function CollectionDescription(props) {
}, [props.collection_id]);
return (
- <Grid container direction="column" justify="center" alignItems="center" spacing={5}
- style={props.contrast === "" ? {color: "#666"} : {color: "white"}}
- >
+ <Grid container direction="column" justify="center" alignItems="center" spacing={5}>
<Grid
item
justify="center"
@@ -61,7 +59,6 @@ export default function CollectionDescription(props) {
>
<Grid item>
<CollectionReview
- contrast={props.contrast}
stars={props.stars}
liked={props.liked}
likes={props.likes}
@@ -95,5 +92,6 @@ export default function CollectionDescription(props) {
const Title = styled.h1`
font-size: 2.5em;
+ color: rgb(102, 102, 102);
text-align: center
`
\ No newline at end of file
diff --git a/src/Components/CollectionDowloadButton.js b/src/Components/CollectionDowloadButton.js
index 427b3464..bda45946 100644
--- a/src/Components/CollectionDowloadButton.js
+++ b/src/Components/CollectionDowloadButton.js
@@ -96,7 +96,6 @@ const DowloadButton = (props) => {
</Alert>
</Snackbar>
<DownloadButton
- contrast={props.contrast}
variant="outlined"
color="primary"
startIcon={<GetAppIcon fontSize="large" />}
@@ -114,10 +113,6 @@ const ButtonText = styled.span`
font-size: 1.2em;
`
const DownloadButton = styled(Button)`
- color: ${props => props.contrast === "" ? "#3f51b5 !important" : "yellow !important"};
- background-color: ${props => props.contrast === "" ? "white !important" : "black !important"};
- text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
- border: ${props => props.contrast === "" ? "1px solid #3f51b5 !important" : "1px solid white !important"};
padding-left: 10;
padding-right: 10;
width: 250px;
diff --git a/src/Components/CollectionReview.js b/src/Components/CollectionReview.js
index bd35d031..0d94757b 100644
--- a/src/Components/CollectionReview.js
+++ b/src/Components/CollectionReview.js
@@ -107,7 +107,7 @@ export default function CollectionReview(props) {
}, [props])
return (
- <Grid container direction="column" style={props.contrast === "" ? {color: "#666"} : {color: "white"}}>
+ <Grid container direction="column">
<SnackBarComponent
snackbarOpen={snackInfo.open}
handleClose={handleCloseSnack}
@@ -115,34 +115,31 @@ export default function CollectionReview(props) {
text={snackInfo.text}
color={snackInfo.color}
/>
- <Grid sm={12} container direction="row" alignItems="center"
- style={{justifyContent: "center"}}
- >
+ <Grid sm={12} container direction="row" alignItems="center">
<Grid item>
<Rating
- style={props.contrast === "" ? {} : {color: "white"}}
name="customized-empty"
value={Number(stars)}
readOnly
onClick={props.scrollToComment}
- emptyIcon={<StarBorderIcon className={`${props.contrast}Text`} fontSize="inherit" />}
+ style={{ color: "#666" }}
+ emptyIcon={<StarBorderIcon fontSize="inherit" />}
/>
</Grid>
<Grid item justify="center" alignItems="center">
- <IconButton style={{color: "inherit"}} aria-label="like" onClick={handleLikeClick}>
- {likes}<FavoriteIcon style={props.contrast === "" ? {fill: liked ? "red" : null} : {fill: "yellow"}} />
+ <IconButton aria-label="like" onClick={handleLikeClick}>
+ {likes}<FavoriteIcon style={{ fill: liked ? "red" : null }} />
</IconButton>
</Grid>
</Grid>
<Grid item sm={12}>
<IconButton
aria-label="report"
- style={{ fontSize: 'medium' }}
+ style={{ fontSize: 'small' }}
onClick={handleClickReport}>
- <InfoIcon style={props.contrast === "" ? {color: "#666"} : {color: "white"}}/><span style={props.contrast === "" ? {color: "#666"} : {color: "yellow", textDecoration: "underline"}}>Reportar erro ou abuso</span>
+ <InfoIcon />Reportar erro ou abuso
</IconButton>
<ReportModal
- contrast={props.contrast}
open={reportOpen}
handleClose={handleCloseModal}
form="colecao"
@@ -151,13 +148,11 @@ export default function CollectionReview(props) {
/>
</Grid>
<SignUpModal
- contrast={props.contrast}
open={sign_up_open}
handleClose={() => setSignUpOpen(false)}
openLogin={() => setLoginOpen(true)}
/>
<LoginModal
- contrast={props.contrast}
openSnackbar={handleOpenSnackSignIn}
open={log_in_open}
handleClose={() => setLoginOpen(false)}
diff --git a/src/Components/Comment.js b/src/Components/Comment.js
index f6ca3f2c..b3e1df7a 100644
--- a/src/Components/Comment.js
+++ b/src/Components/Comment.js
@@ -27,425 +27,296 @@ import Rating from '@material-ui/lab/Rating';
import StarBorderIcon from '@material-ui/icons/StarBorder';
import EditIcon from '@material-ui/icons/Edit';
import TextField from "@material-ui/core/TextField";
-import Menu from "@material-ui/core/Menu";
-import MenuItem from "@material-ui/core/MenuItem";
-import ModalExcluir from "./ModalExcluirComentario.js";
-import { putRequest, deleteRequest } from "./HelperFunctions/getAxiosConfig";
-import { makeStyles } from "@material-ui/styles";
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import ModalExcluir from './ModalExcluirComentario.js'
+import { putRequest, deleteRequest } from './HelperFunctions/getAxiosConfig'
+
//Image Import
import { noAvatar } from "ImportImages.js";
-const useStyles = makeStyles((theme) => ({
- darkTextField: {
- maxWidth: "100%",
- fontSize: "15px",
- fontWeight: "lighter",
- color: "white",
- width: "100%",
- },
- lightTextField: {
- maxWidth: "100%",
- fontSize: "15px",
- fontWeight: "lighter",
- color: "black",
- width: "100%",
- },
-}));
-
-
export default function Comment(props) {
- var moment = require("moment");
- const classes = useStyles();
- const { state } = useContext(Store);
- const [displayedComment, setDisplayedComment] = useState(props.description);
- const [editando, setEditando] = useState(false);
+ console.log(props)
+ /*
+ Required props:
+ rerenderCallback = callback function to trigger re-render on parent component
+ reviewRatings = required to update comment even though the user cannot update their rating score...
+ objectID = collection/learning object id
+ reviewID = self-explanatory I hope
+ authorID = author id; links to public user page
+ authorAvatar = either a string denoting the author's avatar file location or null
+ rating = star rating
+ name = title (?)
+ authorName = author username
+ description = the user comment itself
+ createdAt
+ recurso : boolean; determines whether to display orange or purple font
+ */
+ var moment = require('moment')
+
+ const { state } = useContext(Store)
+ const [displayedComment, setDisplayedComment] = useState(props.description)
+ const [editando, setEditando] = useState(false)
const [anchorEl, setAnchorEl] = React.useState(null);
-
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
- const [modalOpen, toggleModal] = useState(false);
+ const [modalOpen, toggleModal] = useState(false)
const [comment, setComment] = useState({
error: false,
- value: props.description,
- });
+ value: props.description
+ })
const handleChange = (e) => {
- const userInput = e.target.value;
- const flag = userInput.length === 0 ? true : false;
- setComment({ ...comment, error: flag, value: userInput });
- };
+ const userInput = e.target.value
+ const flag = (userInput.length === 0 ? true : false);
+ setComment({ ...comment, error: flag, value: userInput })
+ }
function handleOnSuccessfulComment(data) {
- setDisplayedComment(comment.value);
- setEditando(false);
- props.handlePost();
+ setDisplayedComment(comment.value)
+ setEditando(false)
+ props.handlePost()
}
const updateComment = () => {
- const finalComment = comment;
+ const finalComment = comment
let url;
if (props.isCollection)
- url = `/collections/${props.objectID}/reviews/${props.reviewID}`;
- else url = `/learning_objects/${props.objectID}/reviews/${props.reviewID}`;
+ url = `/collections/${props.objectID}/reviews/${props.reviewID}`
+ else
+ url = `/learning_objects/${props.objectID}/reviews/${props.reviewID}`
if (!finalComment.error) {
+
let payload = {
- review: {
- description: finalComment.value,
- review_ratings_attributes: props.reviewRatings,
- },
- };
- putRequest(url, payload, handleOnSuccessfulComment, (error) => {
- console.log(error);
- });
+ "review": {
+ "description": finalComment.value,
+ "review_ratings_attributes": props.reviewRatings
+ }
+ }
+ putRequest(url, payload, handleOnSuccessfulComment, (error) => { console.log(error) })
+
}
- };
+ }
function handleSuccessDeleteComment(data) {
- props.rerenderCallback();
- props.handleSnackbar(3);
+ props.rerenderCallback()
+ props.handleSnackbar(3)
}
const deleteComment = () => {
let url;
if (props.isCollection)
- url = `/collections/${props.objectID}/reviews/${props.reviewID}`;
- else url = `/learning_objects/${props.objectID}/reviews/${props.reviewID}`;
+ url = `/collections/${props.objectID}/reviews/${props.reviewID}`
+ else
+ url = `/learning_objects/${props.objectID}/reviews/${props.reviewID}`
- deleteRequest(url, handleSuccessDeleteComment, (error) => {
- console.log(error);
- });
+ deleteRequest(url, handleSuccessDeleteComment, (error) => { console.log(error) })
- toggleModal(false);
- };
+ toggleModal(false)
+ }
if (props.authorID)
return (
<React.Fragment>
<ModalExcluir
- contrast={state.contrast}
- open={modalOpen}
- handleClose={() => {
- toggleModal(false);
- }}
+ open={modalOpen} handleClose={() => { toggleModal(false) }}
handleConfirm={deleteComment}
/>
<Grid container style={{ paddingLeft: "20px" }}>
+
<Grid item xs={1}>
- {props.authorID && (
- <AvatarDiv>
- <Link to={"/usuario-publico/" + props.authorID}>
- <img
- src={
- props.authorAvatar
- ? apiDomain + props.authorAvatar
- : noAvatar
- }
- alt="author avatar"
- />
- </Link>
- </AvatarDiv>
- )}
+ {
+ props.authorID &&
+ <AvatarDiv>
+ <Link to={'/usuario-publico/' + props.authorID}>
+ <img src={props.authorAvatar ? apiDomain + props.authorAvatar : noAvatar} alt="author avatar" />
+ </Link>
+ </AvatarDiv>
+ }
</Grid>
<Grid item xs={10}>
- <Comentario contrast={state.contrast}>
+ <Comentario>
<div className="star-rating-container">
<Rating
name="read-only"
value={props.rating}
readOnly
size="small"
- style={
- state.contrast === ""
- ? { color: "#666" }
- : { color: "yellow" }
- }
- emptyIcon={
- <StarBorderIcon
- fontSize="inherit"
- style={
- state.contrast === ""
- ? { color: "#a5a5a5" }
- : { color: "yellow" }
- }
- />
- }
+ style={{ color: "#666" }}
+ emptyIcon={<StarBorderIcon fontSize="inherit" style={{ color: "#a5a5a5" }} />}
/>
</div>
- {props.name && <strong>{props.name}</strong>}
+ {
+ props.name &&
+ <strong>{props.name}</strong>
+ }
<div>
- {editando ? (
- <React.Fragment>
- <div style={{ marginTop: "5%", padding: "2px" }}>
- <StyledTextField
- contrast={props.contrast}
- colecao={!props.recurso}
- id="input-comentario"
- label={"Editar Comentário"}
- margin="normal"
- value={comment.value}
- InputProps={
- props.contrast === ""
- ? { className: classes.lightTextField }
- : { className: classes.darkTextField }
- }
- variant="outlined"
- multiline={true}
- rows="5"
- onChange={(e) => {
- handleChange(e);
- }}
- style={{ width: "100%" }}
- />
- </div>
- <div style={{ float: "right" }}>
- <StyledButton
- contrast={state.contrast}
- style={
- state.contrast === ""
- ? props.recurso
- ? { backgroundColor: "#ff7f00" }
- : { backgroundColor: "#673ab7" }
- : {
- backgroundColor: "black",
- border: "1px solid white",
- textDecoration: "underline",
- }
- }
- onClick={() => {
- setEditando(false);
- }}
- >
- Fechar
- </StyledButton>
- <StyledButton
- contrast={state.contrast}
- style={
- state.contrast === ""
- ? props.recurso
- ? { backgroundColor: "#ff7f00" }
- : { backgroundColor: "#673ab7" }
- : {
- backgroundColor: "black",
- border: "1px solid white",
- textDecoration: "underline",
+ {
+ editando ?
+ (
+ <React.Fragment>
+ <div style={{ marginTop: "5%", padding: "2px" }}>
+ <StyledTextField
+ colecao={!props.recurso}
+ id="input-comentario"
+ label={"Editar Comentário"}
+ margin="normal"
+ value={comment.value}
+ multiline={true}
+ rows="5"
+ onChange={(e) => { handleChange(e) }}
+ style={{ width: "100%" }}
+ />
+ </div>
+ <div style={{ float: "right" }}>
+ <StyledButton
+ style={props.recurso ? { backgroundColor: "#ff7f00" } : { backgroundColor: "#673ab7" }}
+ onClick={() => { setEditando(false) }}
+ >
+ Fechar
+ </StyledButton>
+ <StyledButton
+ style={props.recurso ? { backgroundColor: "#ff7f00" } : { backgroundColor: "#673ab7" }}
+ onClick={() => updateComment()}
+ >
+ Salvar
+ </StyledButton>
+ </div>
+ </React.Fragment>
+ )
+ :
+ (
+ <React.Fragment>
+ <p>
+ {
+ props.authorID &&
+ <Link
+ to={'/usuario-publico/' + props.authorID}
+ style={{
+ fontWeight: "bolder",
+ color: props.recurso ? "#ff7f00" : "#673ab7"
+ }}
+ >
+ {props.authorName}
+ </Link>
}
- }
- onClick={() => updateComment()}
- >
- Salvar
- </StyledButton>
- </div>
- </React.Fragment>
- ) : (
- <React.Fragment>
- <p>
- {props.authorID && (
- <Link
- to={"/usuario-publico/" + props.authorID}
- style={{
- fontWeight: "bolder",
- color:
- state.contrast === ""
- ? props.recurso
- ? "#ff7f00"
- : "#673ab7"
- : "white",
- }}
- >
- {props.authorName}
- </Link>
- )}
- : {displayedComment}
- </p>
- <span className="date">
- {moment(props.createdAt).format("DD/MM/YYYY")}
- </span>
- </React.Fragment>
- )}
+ : {displayedComment}
+ </p>
+ <span className="date">
+ {moment(props.createdAt).format("DD/MM/YYYY")}
+ </span>
+ </React.Fragment>
+ )
+ }
</div>
+
</Comentario>
</Grid>
- {props.authorID === state.currentUser.id && (
+ {
+ props.authorID === state.currentUser.id &&
<Grid item xs={1}>
<StyledDiv>
- <Button onClick={handleClick}>
- <EditIcon
- style={state.contrast === "" ? {} : { color: "white" }}
- />
- </Button>
+ <Button onClick={handleClick}><EditIcon /></Button>
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
- MenuListProps={{
- disablePadding: true
- }}
>
- <MenuItem
- style={
- state.contrast === ""
- ? {}
- : {
- backgroundColor: "black",
- color: "yellow",
- textDecoration: "underline",
- }
- }
- onClick={() => {
- setEditando(true);
- handleClose();
- }}
- >
- Editar
- </MenuItem>
- <MenuItem
- style={
- state.contrast === ""
- ? {}
- : {
- backgroundColor: "black",
- color: "yellow",
- textDecoration: "underline",
- }
- }
- onClick={() => {
- toggleModal(true);
- handleClose();
- }}
- >
- Excluir
- </MenuItem>
+ <MenuItem onClick={() => { setEditando(true); handleClose() }}>Editar</MenuItem>
+ <MenuItem onClick={() => { toggleModal(true); handleClose() }}>Excluir</MenuItem>
</Menu>
</StyledDiv>
</Grid>
- )}
+ }
</Grid>
</React.Fragment>
- );
+ )
else
return (
- <Grid
- container
- style={{ paddingLeft: "20px" }}
- justify="center"
- alignItems="center "
- >
+ <Grid container style={{ paddingLeft: "20px" }} justify='center' alignItems='center '>
+
<Grid item xs={1}>
- {
- <AvatarDiv>
- <img src={noAvatar} alt="author avatar" />
- </AvatarDiv>
- }
+ {
+ <AvatarDiv>
+ <img src={noAvatar} alt="author avatar" />
+ </AvatarDiv>
+ }
</Grid>
<Grid item xs={10}>
- <Comentario contrast={state.contrast}>
- <p>O usuário que fez esse comentário deletou a conta.</p>
+ <Comentario>
+ <p>
+ O usuário que fez esse comentário deletou a conta.
+ </p>
</Comentario>
</Grid>
</Grid>
- );
+ )
}
const StyledTextField = styled(TextField)`
- .MuiInputBase-root {
- margin-bottom: 5px;
- }
-
- .MuiOutlinedInput-root {
- &.Mui-focused fieldset {
- border-color: ${(props) =>
- props.contrast === ""
- ? props.colecao
- ? "#673ab7"
- : "rgb(255,127,0)"
- : "yellow"};
- }
- fieldset {
- border-color: ${(props) => (props.contrast === "" ? "#666" : "white")};
- }
- }
-
- label {
- color: ${(props) => (props.contrast === "" ? "#666" : "white")};
- }
-
label.Mui-focused {
- color: ${(props) =>
- props.contrast === ""
- ? props.colecao
- ? "#673ab7"
- : "rgb(255,127,0)"
- : "yellow"};
+ color : ${props => props.colecao ? "rgb(103,58,183)" : "rgb(255,127,0)"};
}
- label.Mui-focused.Mui-error {
- color: red;
+ .MuiInput-underline::after {
+ border-bottom: ${props => props.colecao ? "2px solid rgb(103,58,183)" : "2px solid rgb(255,127,0)"};
}
- width: 95%;
-`;
+`
const StyledDiv = styled.div`
- text-align: center;
- .MuiButton-root {
- @media screen and (max-width: 990px) {
- padding-right: 35px !important;
- }
- }
-`;
+ text-align : center;
+ .MuiButton-root {
+ @media screen and (max-width: 990px) {
+ padding-right : 35px !important;
+ }
+ }
+`
const StyledButton = styled(Button)`
- color: ${(props) =>
- props.contrast === ""
- ? "rgba(255,255,255,0.87) !important"
- : "yellow !important"};
- box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26) !important;
- margin: 6px 8px !important;
- font-weight: 600 !important;
- :hover {
- background-color: ${(props) =>
- props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
- }
-`;
+ color : rgba(255,255,255,0.87) !important;
+ box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
+ margin : 6px 8px !important;
+ font-weight : 600 !important;
+`
const Comentario = styled.div`
- padding-left: 55px !important;
- font-size: 14px;
- color: ${(props) => (props.contrast === "" ? "#ababab" : "white")};
+ padding-left : 55px !important;
+ font-size : 14px;
.star-rating-container {
- width: 100px;
+ width : 100px;
}
p {
- margin: 0 0 10px;
- padding-left: 2px;
+ margin : 0 0 10px;
+ padding-left : 2px
}
a {
- text-decoration: none !important;
+ text-decoration : none !important;
}
.date {
- color: ${(props) => (props.contrast === "" ? "#ababab" : "white")};
- font-size: 12px;
- font-weight: lighter;
- padding-left: 3px;
+ color : #ababab;
+ font-size : 12px;
+ font-weight : lighter;
+ padding-left : 3px;
}
-`;
+`
const AvatarDiv = styled.div`
text-align : center;
@@ -463,4 +334,4 @@ const AvatarDiv = styled.div`
border-radius : 100%
vertical-align : middle;
}
-`;
+`
diff --git a/src/Components/ContactButtons/FollowButton.js b/src/Components/ContactButtons/FollowButton.js
index 96c7794c..245eecbc 100644
--- a/src/Components/ContactButtons/FollowButton.js
+++ b/src/Components/ContactButtons/FollowButton.js
@@ -16,12 +16,12 @@ 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, useState } from 'react'
-import { Store } from '../../Store'
+import React, {useContext, useState} from 'react'
+import {Store} from '../../Store'
import PersonAddIcon from '@material-ui/icons/PersonAdd';
import styled from 'styled-components'
import Button from '@material-ui/core/Button';
-import { putRequest } from '../HelperFunctions/getAxiosConfig'
+import {putRequest} from '../HelperFunctions/getAxiosConfig'
import LoginModal from './../LoginModal.js'
import Snackbar from '@material-ui/core/Snackbar';
import SignUpModal from './../SignUpModal'
@@ -31,9 +31,9 @@ function Alert(props) {
return <MuiAlert elevation={6} variant="filled" {...props} />;
}
-export default function FollowButton(props) {
+export default function FollowButton (props) {
- const { state } = useContext(Store)
+ const {state} = useContext(Store)
const [loginOpen, setLogin] = useState(false)
const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
const [signUpOpen, setSignUp] = useState(false)
@@ -50,18 +50,18 @@ export default function FollowButton(props) {
if (reason === 'clickaway') {
return;
}
-
- handleSuccessfulLogin(false);
+
+ handleSuccessfulLogin(false);
}
- function handleSuccess(data) {
+ function handleSuccess (data) {
props.toggleFollowed()
}
const handleFollow = (followerID) => {
if (followerID !== undefined) {
const url = `/users/${followerID}/follow/`
- putRequest(url, {}, handleSuccess, (error) => { console.log(error) })
+ putRequest(url, {}, handleSuccess, (error) => {console.log(error)})
}
}
@@ -73,49 +73,38 @@ export default function FollowButton(props) {
<Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
</Snackbar>
{/*-------------------------------MODALS---------------------------------------*/}
- <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
/>
- <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
+ <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
{/*----------------------------------------------------------------------------*/}
{
state.currentUser.id !== '' ? (
- <StyledButton className={`${props.contrast}LinkColor`}
- style={props.contrast === "" ? {border: "2px solid #00bcd4", borderRadius : "5px", color :"#00bcd4", backgroundColor: "white"} : {border: "1px solid white", borderRadius : "5px", color :"#00bcd4"}}
- onClick={() => handleFollow(props.followerID)}>
- <PersonAddIcon
- className={`${props.contrast}IconColor`}
- style={{
- fontSize: "24px",
- display: "inline-block",
- verticalAlign: "middle",
- }} />
+ <StyledButton onClick={() => handleFollow(props.followerID)}>
+ <PersonAddIcon style={{fontSize : "24px",
+ display : "inline-block",
+ verticalAlign : "middle",
+ color : "#00bcd4"}}/>
SEGUIR
</StyledButton>
)
- :
- (
- <StyledButton className={`${props.contrast}LinkColor `}
- style={props.contrast === "" ? {border: "2px solid #00bcd4", borderRadius : "5px", color :"#00bcd4", backgroundColor: "white"} : {border: "1px solid white", borderRadius : "5px", color :"#00bcd4"}}
- onClick={() => handleLogin(true)}>
- <PersonAddIcon
- className={`${props.contrast}IconColor`}
- style={{
- fontSize: "24px",
- display: "inline-block",
- verticalAlign: "middle",
-
- }} />
+ :
+ (
+ <StyledButton onClick={() => handleLogin(true)}>
+ <PersonAddIcon style={{fontSize : "24px",
+ display : "inline-block",
+ verticalAlign : "middle",
+ color : "#00bcd4"}}/>
SEGUIR
- </StyledButton>
- )
+ </StyledButton>
+ )
}
</React.Fragment>
)
}
-export function NoIcon(props) {
- const { state } = useContext(Store)
+export function NoIcon (props) {
+ const {state} = useContext(Store)
const [loginOpen, setLogin] = useState(false)
const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
const [signUpOpen, setSignUp] = useState(false)
@@ -132,14 +121,14 @@ export function NoIcon(props) {
if (reason === 'clickaway') {
return;
}
-
- handleSuccessfulLogin(false);
+
+ handleSuccessfulLogin(false);
}
const handleFollow = (followerID) => {
if (followerID !== undefined) {
const url = `/users/${followerID}/follow/`
- putRequest(url, {}, (data) => { props.toggleFollowed() }, (error) => { console.log(error) })
+ putRequest(url, {}, (data) => {props.toggleFollowed()}, (error) => {console.log(error)})
}
}
@@ -151,58 +140,72 @@ export function NoIcon(props) {
<Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
</Snackbar>
{/*-------------------------------MODALS---------------------------------------*/}
- <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
/>
- <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
+ <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
{/*----------------------------------------------------------------------------*/}
{
state.currentUser.id !== '' ? (
- <NoIconButton contrast={state.contrast} onClick={() => handleFollow(props.followableID)}>seguir</NoIconButton>
+ <NoIconButton onClick={() => handleFollow(props.followableID)}>seguir</NoIconButton>
+ )
+ :
+ (
+ <NoIconButton onClick={() => handleLogin(true)}>seguir</NoIconButton>
)
- :
- (
- <NoIconButton contrast={state.contrast} className={`${props.contrast}LinkColor`}
- style={props.contrast === "" ? {border: "2px solid #00bcd4", borderRadius : "5px", color :"#00bcd4", backgroundColor: "white"} : {border: "1px solid white", borderRadius : "5px", color :"#00bcd4"}}
- onClick={() => handleLogin(true)}>seguir</NoIconButton>
- )
}
</React.Fragment>
)
}
const NoIconButton = styled(Button)`
- &:hover {
- background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
- }
.MuiButton-label {
- color: ${props => props.contrast === "" ? "#00bcd4 !important" : "yellow !important"};
+ color : #00bcd4 !important;
}
- background-color: ${props => props.contrast === "" ? "#fff !important" : "black !important"};
- border: ${props => props.contrast === "" ? "solid 1px rgba(0,188,212,.85) !important" : "solid 1px white !important"};
+ background-color : #fff !important;
+ border : solid 1px rgba(0,188,212,.85) !important;
font-size : 14px !important;
border-radius : 3px !important;
height : 36px !important;
min-width : 88px !important;
vertical-align : middle !important;
+ text-color : #00bcd4 !important;
align-items : center !important;
text-align : center !important;
padding : 0 6px !important;
margin : 6px 8px !important;
- color: ${props => props.contrast === "" ? "#00bcd4 !important" : "yellow !important"};
- text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
`
const StyledButton = styled(Button)`
- font-size : 14px important;
- font-weight : 500 !important;
-
- .MuiSvgIcon-root {
- font-size : 24px;
- }
-
- &:hover {
- color: rgb(107, 35, 142);
- }
+ background-color : #fff !important;
+ border : 1px solid #00bcd4 !important;
+ color : #00bcd4 !important;
+ font-size : 14px !important;
+ display : inline-block !important;
+ position : relative !important;
+ cursor : pointer !important;
+ height : 36px !important;
+ min-width : 88px !important;
+ line-height : 36px !important;
+ vertical-align : middle !important;
+ -webkit-box-align : center !important;
+ -webkit-align-items : center !important;
+ -ms-grid-row-align : center !important;
+ align-items : center !important;
+ text-align : center !important;
+ border-radius : 3px !important;
+ -webkit-user-select : none !important;
+ -moz-user-select : none !important;
+ -ms-user-select : none !important;
+ user-select : none !important;
+ padding : 0 6px !important;
margin : 6px 8px !important;
+ white-space : nowrap !important;
+ text-transform : uppercase !important;
+ font-weight : 500 !important;
+ font-style : inherit !important;
+ font-variant : inherit !important;
+ font-family : inherit !important;
+ text-decoration : none !important;
+ overflow : hidden !important;
`
diff --git a/src/Components/ContactButtons/FollowersCountButton.js b/src/Components/ContactButtons/FollowersCountButton.js
index f40a0337..43dfbfb8 100644
--- a/src/Components/ContactButtons/FollowersCountButton.js
+++ b/src/Components/ContactButtons/FollowersCountButton.js
@@ -11,7 +11,7 @@ export default function FollowersCountButton (props) {
}
return (
- <FollowersButton className={`${props.contrast}BackColor ${props.contrast}Border ${props.contrast}LinkColor`}>
+ <FollowersButton>
{FollowerButtonSpan()}
</FollowersButton>
)
@@ -21,6 +21,7 @@ export default function FollowersCountButton (props) {
const FollowersButton = styled(Button)`
right : 0 !important;
text-transform : none !important;
+ color : #666 !important;
font-size : 13px !important;
font-weight : 400 !important;
box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
@@ -30,5 +31,7 @@ const FollowersButton = styled(Button)`
min-height : 36px !important;
vertical-align : middle !important;
text-align : center !important;
+ border : 0 !important;
border-radius : 3px !important;
+ background-color : rgb(250,250,250) !important;
`
diff --git a/src/Components/ContactButtons/FollowingButton.js b/src/Components/ContactButtons/FollowingButton.js
index cee2ddda..87ad2cba 100644
--- a/src/Components/ContactButtons/FollowingButton.js
+++ b/src/Components/ContactButtons/FollowingButton.js
@@ -16,20 +16,22 @@ 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} from 'react'
import styled from 'styled-components'
import Button from '@material-ui/core/Button';
-import GroupIcon from '@material-ui/icons/Group';
import ModalConfirmarUnfollow from '../ModalConfirmarUnfollow.js'
-import { putRequest } from '../HelperFunctions/getAxiosConfig'
+import {putRequest} from '../HelperFunctions/getAxiosConfig'
-export default function FollowingButton(props) {
+//Image Import
+import { FollowingIcon } from "ImportImages.js";
+
+export default function FollowingButton (props) {
const [modalOpen, toggleModal] = useState(false)
const [unfollowID, setUnfollowID] = useState(-1)
const [followingHover, handleFollowingHover] = useState(false)
- const toggleFollowingHover = (value) => { handleFollowingHover(value) }
+ const toggleFollowingHover = (value) => {handleFollowingHover(value)}
const handleUnfollowPartOne = (followedID) => {
setUnfollowID(followedID)
@@ -37,65 +39,53 @@ export default function FollowingButton(props) {
}
- function handleSuccess(data) {
+ function handleSuccess (data) {
props.toggleFollowed()
toggleModal(false)
}
const handleUnfollowPartTwo = () => {
const url = `/users/${unfollowID}/follow/`
- putRequest(url, {}, handleSuccess, (error) => { console.log(error) })
+ putRequest(url, {}, handleSuccess, (error) => {console.log(error)})
}
return (
<React.Fragment>
- <ModalConfirmarUnfollow contrast={props.contrast} open={modalOpen}
- handleClose={() => { toggleModal(false) }}
- handleConfirm={handleUnfollowPartTwo}
+ <ModalConfirmarUnfollow open={modalOpen}
+ handleClose={() => {toggleModal(false)}}
+ handleConfirm = {handleUnfollowPartTwo}
/>
<StyledButton
- contrast={props.contrast}
- className={`${props.contrast}LinkColor`}
onMouseOver={() => toggleFollowingHover(true)}
onMouseLeave={() => toggleFollowingHover(false)}
onClick={() => handleUnfollowPartOne(props.followedID)}
>
{
- followingHover ?
- (
- [
- <div className={`${props.contrast}LinkColor`}>
- DEIXAR DE SEGUIR
- </div>
- ]
- )
- : (
- [
- <div className={`${props.contrast}LinkColor`}>
- <GroupIcon
- className={`${props.contrast}IconColor`}
- style={{
- fontSize: "24px",
- display: "inline-block",
- verticalAlign: "middle",
- }}
- />
- SEGUINDO
- </div>
- ]
- )
- }
+ followingHover?
+ (
+ [
+ <span>DEIXAR DE SEGUIR</span>
+ ]
+ )
+ : (
+ [
+ <>
+ <img src={FollowingIcon} alt='Ãcone seguindo'/><span>Seguindo</span>
+ </>
+ ]
+ )
+ }
</StyledButton>
</React.Fragment>
)
}
-export function NoIconFollowing(props) {
+export function NoIconFollowing (props) {
const [modalOpen, toggleModal] = useState(false)
const [unfollowID, setUnfollowID] = useState(-1)
const [followingHover, handleFollowingHover] = useState(false)
- const toggleFollowingHover = (value) => { handleFollowingHover(value) }
+ const toggleFollowingHover = (value) => {handleFollowingHover(value)}
const handleUnfollowPartOne = (followedID) => {
setUnfollowID(followedID)
@@ -103,41 +93,40 @@ export function NoIconFollowing(props) {
}
- function handleSuccess(data) {
+ function handleSuccess (data) {
props.toggleFollowed()
toggleModal(false)
}
const handleUnfollowPartTwo = () => {
const url = `/users/${unfollowID}/follow/`
- putRequest(url, {}, handleSuccess, (error) => { console.log(error) })
+ putRequest(url, {}, handleSuccess, (error) => {console.log(error)})
}
return (
<React.Fragment>
- <ModalConfirmarUnfollow contrast={props.contrast} open={modalOpen}
- handleClose={() => { toggleModal(false) }}
- handleConfirm={handleUnfollowPartTwo}
+ <ModalConfirmarUnfollow open={modalOpen}
+ handleClose={() => {toggleModal(false)}}
+ handleConfirm = {handleUnfollowPartTwo}
/>
<NoIconButton
- contrast={props.contrast}
onMouseOver={() => toggleFollowingHover(true)}
onMouseLeave={() => toggleFollowingHover(false)}
onClick={() => handleUnfollowPartOne(props.followedID)}
>
{
- followingHover ?
- (
- [
- <span>DEIXAR DE SEGUIR</span>
- ]
- )
- : (
- [
- <span>SEGUINDO</span>
- ]
- )
- }
+ followingHover?
+ (
+ [
+ <span>DEIXAR DE SEGUIR</span>
+ ]
+ )
+ : (
+ [
+ <span>SEGUINDO</span>
+ ]
+ )
+ }
</NoIconButton>
</React.Fragment>
)
@@ -145,38 +134,64 @@ export function NoIconFollowing(props) {
export const StyledButton = styled(Button)`
- border : 1px solid white !important;
- background-color: ${props => props.contrast === "" ? "#00bcd4" : "black"} !important;
- color: white !important;
- font-size : 14px important;
+ background-color : #00bcd4 !important;
+ color : #fff !important;
+ display : inline-block !important;
+ position : relative !important;
+ cursor : pointer !important;
+ min-height : 36px !important;
+ min-width : 88px !important;
+ line-height : 36px !important;
+ vertical-align : middle !important;
+ -webkit-box-align : center !important;
+ -webkit-align-items : center !important;
+ -ms-grid-row-align : center !important;
+ align-items : center !important;
+ text-align : center !important;
+ border-radius : 3px !important;
+ -webkit-user-select : none !important;
+ -moz-user-select : none !important;
+ -ms-user-select : none !important;
+ user-select : none !important;
+ border : 0 !important;
+ padding : 0 6px !important;
+ margin : 6px 8px !important;
+ white-space : nowrap !important;
+ text-transform : uppercase !important;
font-weight : 500 !important;
-
- .MuiSvgIcon-root {
- font-size : 24px;
+ font-size : 14px !important;
+ font-style : inherit !important;
+ font-variant : inherit !important;
+ font-family : inherit !important;
+ text-decoration : none !important;
+ overflow : hidden !important;
+ &:hover {
+ background-color : #fff !important;
+ color : #00bcd4 !important;
+ border : 1px solid #00bcd4 !important;
+ }
+ img {
+ height : 24px;
+ display : inline-block;
+ vertical-align : middle;
+ color : #fff !important;
}
-
`
const NoIconButton = styled(Button)`
- &:hover {
- background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
- }
.MuiButton-label {
- color: ${props => props.contrast === "" ? "#00bcd4 !important" : "yellow !important"};
+ color : #00bcd4 !important;
}
- background-color: ${props => props.contrast === "" ? "#fff !important" : "black !important"};
- border: ${props => props.contrast === "" ? "solid 1px rgba(0,188,212,.85) !important" : "solid 1px white !important"};
+ background-color : #fff !important;
+ border : solid 1px rgba(0,188,212,.85) !important;
font-size : 14px !important;
border-radius : 3px !important;
height : 36px !important;
min-width : 88px !important;
vertical-align : middle !important;
+ text-color : #00bcd4 !important;
align-items : center !important;
text-align : center !important;
padding : 0 6px !important;
margin : 6px 8px !important;
-
- span{
- text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
- }
`
diff --git a/src/Components/ContactCard.js b/src/Components/ContactCard.js
index a854ce77..fa51ee8d 100644
--- a/src/Components/ContactCard.js
+++ b/src/Components/ContactCard.js
@@ -18,7 +18,6 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, { useState } from 'react';
import Card from '@material-ui/core/Card';
-import Grid from '@material-ui/core/Grid';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import styled from 'styled-components'
@@ -37,14 +36,14 @@ export default function ImgMediaCard(props) {
const toggleFollowed = () => { setFollowedBoolean(!followedBoolean) }
return (
<StyledCard>
- <CardDiv className={`${props.contrast}BackColor ${props.contrast}Border ${props.contrast}Text`}>
+ <CardDiv>
<CardAreaDiv>
{/*Top part of contat card (background image, number of followers and avatar)*/}
<Header>
<StyledCardMedia image={props.cover}>
<div style={{ display: "flex", backgroundColor: "inherit", float: "right" }}>
<Link to={props.href} style={{textDecoration : "none"}}>
- <FollowersCountButton contrast={props.contrast} followCount={props.follow_count} />
+ <FollowersCountButton followCount={props.follow_count} />
</Link>
<Link to={props.href}>
<AvatarDiv>
@@ -57,63 +56,52 @@ export default function ImgMediaCard(props) {
</Header>
{/*Rest of the card content. Button to be rendered depends on whether the contact is followed by the user*/}
- <CardContent style={{height: "148px", padding: "0", bottom: "0"}}>
+ <CardContent>
<UserInfo>
- <Link to={props.href} className={`${props.contrast}LinkColor`}>
+ <Link to={props.href}>
<p className="p1">
{props.name}
</p>
</Link>
- <Link to={props.href} className={`${props.contrast}LinkColor`}>
+ <Link to={props.href}>
<span style={{ fontSize: "14px", fontWeight: "normal" }}>
<b>{props.numCollections}</b> {props.numCollections !== 1 ? "Coleções" : "Coleção"} | <b>{props.numLearningObjects}</b> {props.numLearningObjects !== 1 ? "Recursos" : "Recurso"}
</span>
</Link>
- </UserInfo>
- </CardContent>
- <CardContent style={{padding: "0"}}>
- <Grid container>
- <Grid item xs={2}></Grid>
- {
- followedBoolean ?
- (
- <>
- <Grid item xs={8} style={{ display: "flex", justifyContent: "center" }}>
+
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ {
+ followedBoolean ?
+ (
+ <React.Fragment>
<FollowingButton
- contrast={props.contrast}
followedID={props.followerID ? props.followerID : props.followedID}
toggleFollowed={toggleFollowed} />
- </Grid>
- <Grid item xs={2} style={{ display: "flex", justifyContent: "flex-start" }}>
+
<Options
- contrast={props.contrast}
followableID={props.followerID ? props.followerID : props.followedID}
followed={followedBoolean}
toggleFollowed={toggleFollowed} />
- </Grid>
- </>
- )
- :
- (
- <>
- <Grid item xs={8} style={{ display: "flex", justifyContent: "center" }}>
+ </React.Fragment>
+ )
+ :
+ (
+ <React.Fragment>
<FollowButton
- contrast={props.contrast}
followerID={props.followedID ? props.followedID : props.followerID}
toggleFollowed={toggleFollowed} />
- </Grid>
- <Grid item xs={2} style={{ display: "flex", justifyContent: "flex-start" }}>
+
<Options
- contrast={props.contrast}
followableID={props.followedID ? props.followedID : props.followerID}
followed={followedBoolean}
toggleFollowed={toggleFollowed} />
- </Grid>
- </>
- )
- }
- </Grid>
+ </React.Fragment>
+ )
+ }
+
+ </div>
+ </UserInfo>
</CardContent>
</CardAreaDiv>
</CardDiv>
@@ -137,8 +125,10 @@ export const CardAreaDiv = styled.div`
margin : 0 auto;
`
export const CardDiv = styled.div`
+ background-color : #fff;
text-align : start;
font-family : 'Roboto', sans serif;
+ color : #666;
`
/*----------------------------------------------------------------------------*/
@@ -147,7 +137,7 @@ export const CardDiv = styled.div`
/*Override Material UI styling -----------------------------------------------*/
const StyledCardMedia = styled(CardMedia)`
height : 100%;
- width : 270.5px;
+ width : 100%;
background-size : cover;
background-position : center;
@@ -167,7 +157,10 @@ const StyledCard = styled(Card)`
const UserInfo = styled.div`
text-align : center;
margin-top : 50px;
+ color : #666;
+
a {
+ text-decoration : none !important;
color : #666;
}
diff --git a/src/Components/ContactCardOptions.js b/src/Components/ContactCardOptions.js
index f347928a..2cf3555c 100644
--- a/src/Components/ContactCardOptions.js
+++ b/src/Components/ContactCardOptions.js
@@ -73,6 +73,7 @@ export default function SimpleMenu(props) {
const handleFollow = (followerID) => {
putRequest(`/users/${followerID}/follow`, {}, (data) => {
+ console.log(data);
props.toggleFollowed()
}, (error) => { console.log(error) })
@@ -92,22 +93,22 @@ export default function SimpleMenu(props) {
<Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
</Snackbar>
{/*-------------------------------MODALS---------------------------------------*/}
- <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
/>
- <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
+ <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
{/*----------------------------------------------------------------------------*/}
<>
{
reportModal &&
- <ReportModal contrast={props.contrast} open={reportModal} handleClose={() => handleModal(false)}
+ <ReportModal open={reportModal} handleClose={() => handleModal(false)}
form="user" complainableId={props.followableID}
complainableType={"User"}
{...props}/>
}
<div style={{fontSize: "12px", display : "flex", flexDirection : "column", justifyContent : "center"}}>
- <ButtonNoWidth aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
- <MoreVertIcon className={`${props.contrast}LinkColor ${props.contrast}Text`} />
+ <ButtonNoWidth aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{color : "#666"}}>
+ <MoreVertIcon style={{color : "#666"}}/>
</ButtonNoWidth>
<Menu
id="simple-menu"
@@ -115,34 +116,31 @@ export default function SimpleMenu(props) {
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
- MenuListProps={{
- disablePadding: true
- }}
>
- <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={handleClose}>
+ <StyledMenuItem onClick={handleClose}>
<Link to={"/usuario-publico/" + props.followableID}>
- <ListItemIcon className={`${props.contrast}IconColor`}><OpenIcon /></ListItemIcon>Abrir
+ <ListItemIcon><OpenIcon /></ListItemIcon>Abrir
</Link>
</StyledMenuItem>
{
props.followed ?
(
- <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => {handleFollow(props.followableID)}}>
- <ListItemIcon className={`${props.contrast}IconColor`}><ReportIcon /></ListItemIcon>Deixar de Seguir
+ <StyledMenuItem onClick={() => {handleFollow(props.followableID)}}>
+ <ListItemIcon><ReportIcon /></ListItemIcon>Deixar de Seguir
</StyledMenuItem>
)
:
(
state.currentUser.id !== '' ? (
- <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => {handleFollow(props.followableID)}}>
- <ListItemIcon className={`${props.contrast}IconColor`}><PersonAddIcon /></ListItemIcon>Seguir
+ <StyledMenuItem onClick={() => {handleFollow(props.followableID)}}>
+ <ListItemIcon><PersonAddIcon /></ListItemIcon>Seguir
</StyledMenuItem>
)
:
(
- <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => {handleLogin(props.followableID)}}>
- <ListItemIcon className={`${props.contrast}IconColor`}><PersonAddIcon /></ListItemIcon>Seguir
+ <StyledMenuItem onClick={() => {handleLogin(props.followableID)}}>
+ <ListItemIcon><PersonAddIcon /></ListItemIcon>Seguir
</StyledMenuItem>
)
)
@@ -150,14 +148,14 @@ export default function SimpleMenu(props) {
{
state.currentUser.id !== '' ? (
- <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => {handleModal(true); handleClose()}}>
- <ListItemIcon className={`${props.contrast}IconColor`}><ReportIcon /></ListItemIcon>Reportar
+ <StyledMenuItem onClick={() => {handleModal(true); handleClose()}}>
+ <ListItemIcon><ReportIcon /></ListItemIcon>Reportar
</StyledMenuItem>
)
:
(
- <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => {handleLogin(true)}}>
- <ListItemIcon className={`${props.contrast}IconColor`}><ReportIcon /></ListItemIcon>Reportar
+ <StyledMenuItem onClick={() => {handleLogin(true)}}>
+ <ListItemIcon><ReportIcon /></ListItemIcon>Reportar
</StyledMenuItem>
)
}
@@ -173,6 +171,8 @@ const ButtonNoWidth = styled(Button)`
min-width : 24px !important;
max-height : 24px !important;
padding : 0 !important;
+ background-color : #fff !important;
+ color : #a5a5a5 !important;
border : 0 !important;
.MuiButton-root {
@@ -191,11 +191,12 @@ const ButtonNoWidth = styled(Button)`
`
const StyledMenuItem = styled(MenuItem)`
- background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ color : #666 !important;
.MuiSvgIcon-root {
vertical-align : middle !important;
}
a {
- color : inherit !important;
+ text-decoration : none !important;
+ color : #666 !important;
}
-`
\ No newline at end of file
+`
diff --git a/src/Components/ContactForm.js b/src/Components/ContactForm.js
index e44460d3..3eb206b9 100644
--- a/src/Components/ContactForm.js
+++ b/src/Components/ContactForm.js
@@ -16,189 +16,190 @@ 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 { Store } from '../Store.js'
+import React, {useState, useContext} from 'react'
+import {Store} from '../Store.js'
import styled from 'styled-components';
import FormInput from "../Components/FormInput.js"
-import { postRequest } from './HelperFunctions/getAxiosConfig'
+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} />;
+ return <MuiAlert elevation={6} variant="filled" {...props} />;
}
const Button = styled.button`
- background-color: ${props => props.contrast === "" ? "#00acc1" : "black"};
- color: ${props => props.contrast === "" ? "#fff" : "yellow"};
- font-family: Roboto,sans-serif;
- font-size: 14px;
- font-weight: 500;
- height: 36px;
- padding-left: 16px;
- padding-right: 16px;
- box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
- outline: none;
- position: relative;
- cursor: pointer;
- min-height: 36px;
- min-width: 88px;
- line-height: 36px;
- vertical-align: middle;
- align-items: center;
- text-align: center;
- border-radius: 3px;
- box-sizing: border-box;
- user-select: none;
- border: ${props => props.contrast === "" ? 0 : "1px solid white"};
- padding: 0 6px;
- padding-right: 6px;
- padding-left: 6px;
- margin: 6px 8px;
-
- white-space: nowrap;
- text-transform: uppercase;
- font-weight: 500;
- font-size: 14px;
- font-style: inherit;
- font-variant: inherit;
- font-family: inherit;
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- overflow: hidden;
- transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1);
- :hover{
- background-color: ${props => props.contrast === "" ? "rgba(0, 172, 193, 0.65)" : "rgba(255,255,0,0.24)"};
- }
+
+ background-color: #00acc1;
+ color:#fff;
+ font-family: Roboto,sans-serif;
+ font-size: 14px;
+ font-weight: 500;
+ height: 36px;
+ border-radius: 3px;
+ padding-left: 16px;
+ padding-right: 16px;
+ box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
+ outline: none;
+ position: relative;
+ cursor: pointer;
+ min-height: 36px;
+ min-width: 88px;
+ line-height: 36px;
+ vertical-align: middle;
+ align-items: center;
+ text-align: center;
+ border-radius: 3px;
+ box-sizing: border-box;
+ user-select: none;
+ border: 0;
+ padding: 0 6px;
+ padding-right: 6px;
+ padding-left: 6px;
+ margin: 6px 8px;
+
+ white-space: nowrap;
+ text-transform: uppercase;
+ font-weight: 500;
+ font-size: 14px;
+ font-style: inherit;
+ font-variant: inherit;
+ font-family: inherit;
+ text-decoration: none;
+ overflow: hidden;
+ transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1);
+
`
-function validateNome(nome) {
- let flag = false
- if (nome.length === 0) {
- flag = true
- }
+ function validateNome (nome) {
+ let flag = false
+ if(nome.length === 0) {
+ flag = true
+ }
- return flag
-}
+ return flag
+ }
-function validateMensagem(mensagem) {
- let flag = false
- if (mensagem.length === 0) {
- flag = true
- }
+ function validateMensagem (mensagem) {
+ let flag = false
+ if(mensagem.length === 0) {
+ flag = true
+ }
- return flag
-}
+ return flag
+ }
-function validateEmail(email) {
+ function validateEmail (email) {
let flag = false
if (email.split("").filter(x => x === "@").length !== 1 || email.length < 7) {
- flag = true
+ flag = true
}
return flag
-}
+ }
-function Formulario(props) {
- const { state } = useContext(Store)
+ function Formulario (props){
+ const {state} = useContext(Store)
const [loginOpen, setLogin] = useState(false)
const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
const [signUpOpen, setSignUp] = useState(false)
- const [nome, handleNome] = useState({
- dict: {
- key: false,
- value: ""
- }
- })
- const [email, handleEmail] = useState({
- dict: {
- key: false,
- value: ""
- }
- })
- const [mensagem, handleMensagem] = useState({
- dict: {
- key: false,
- value: ""
- }
+ const [nome, handleNome] = useState(
+ {
+ dict : {
+ key:false,
+ value:""
+ }
+ })
+ const [email, handleEmail] = useState(
+ {
+ dict : {
+ key:false,
+ value:""
+ }
})
+ const [mensagem, handleMensagem] = useState(
+ {
+ dict : {
+ key: false,
+ value:""
+ }
+ })
const preencheNome = (e) => {
- const aux2 = e.target.value
- const flag = validateNome(aux2)
- handleNome({
- ...nome, dict: {
- key: flag,
- value: e.target.value
- }
- })
+ const aux2 = e.target.value
+ const flag = validateNome(aux2)
+ handleNome({...nome, dict : {
+ key : flag,
+ value : e.target.value
+ }})
+ console.log(nome)
}
const preencheEmail = (e) => {
- const aux = e.target.value
- const flag = validateEmail(aux)
- handleEmail({
- ...email, dict: {
- key: flag,
- value: e.target.value
- }
- })
+ const aux = e.target.value
+ const flag = validateEmail(aux)
+ handleEmail({...email, dict : {
+ key : flag,
+ value : e.target.value
+ }})
+ console.log(email)
}
const preencheMensagem = (e) => {
- const msg = e.target.value
- let flag = validateMensagem(msg)
- handleMensagem({
- ...mensagem, dict: {
- key: flag,
- value: msg
- }
- })
+ const msg = e.target.value
+ console.log(msg)
+ let flag = validateMensagem(msg)
+ handleMensagem({...mensagem, dict : {
+ key : flag,
+ value : msg
+ }})
+ console.log(mensagem)
}
const limpaTudo = () => {
- handleNome({
- dict: {
- key: false,
- value: ""
- }
- });
-
- handleEmail({
- dict: {
- key: false,
- value: ""
- }
- })
-
- handleMensagem({
- dict: {
- key: false,
- value: ""
- }
- })
+ handleNome({
+ dict : {
+ key: false,
+ value:""
+ }}
+ );
+
+ handleEmail({
+ dict : {
+ key: false,
+ value:""
+ }}
+ )
+
+ handleMensagem({
+ dict : {
+ key: false,
+ value:""
+ }}
+ )
}
const handleSignUp = () => {
- setSignUp(!signUpOpen)
+ setSignUp(!signUpOpen)
}
const handleLogin = () => {
- setLogin(!loginOpen)
+ setLogin(!loginOpen)
}
const toggleSnackbar = (event, reason) => {
- if (reason === 'clickaway') {
- return;
- }
+ if (reason === 'clickaway') {
+ return;
+ }
handleSuccessfulLogin(false);
}
@@ -206,90 +207,89 @@ function Formulario(props) {
const onSubmit = (e) => {
//on submit we should prevent the page from refreshing
e.preventDefault(); //though this is arguable
+ console.log(!(nome.dict.key && email.dict.key && mensagem.dict.key ))
// Se não houver erro em nunhum dos campos E nenhum dos campos for vazio: a página faz o contato com o backend e os campos ficam em branco no formulário
- if (!(nome.dict.key || email.dict.key || mensagem.dict.key)) {
+ if (!(nome.dict.key || email.dict.key || mensagem.dict.key )) {
let payload = {
- contact: {
+ contact : {
name: nome.dict.value,
email: email.dict.value,
message: mensagem.dict.value
}
- }
- postRequest(`/contacts`, payload, (data) => { limpaTudo() }, (error) => { console.log(error) })
+ }
+ postRequest(`/contacts`, payload, (data) => {limpaTudo()}, (error) => {console.log(error)})
}
}
- 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>
- {/*-------------------------------MODALS---------------------------------------*/}
- <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
- openSnackbar={() => { handleSuccessfulLogin(true) }}
- />
- <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
- {/*----------------------------------------------------------------------------*/}
- <div>
- <form onSubmit={e => onSubmit(e)}>
- <FormInput
- contrast={props.contrast}
-
- inputType={"text"}
- name={"nome"}
- value={nome.dict.value}
- placeholder={"Nome *"}
- error={nome.dict.key}
- help={nome.dict.key ? "insira seu nome para o contato " : ""}
- handleChange={e => preencheNome(e)}
- />
- <br />
- <FormInput
- contrast={props.contrast}
- inputType={"text"}
- name={"email"}
- value={email.dict.value}
- placeholder={"E-mail *"}
- error={email.dict.key}
- help={email.dict.key ? "Formato de e-mail incorreto ou vazio, tente : usuario@provedor.com" : ""}
- handleChange={e => preencheEmail(e)}
- />
- <br />
- <br />
- <FormInput
- contrast={props.contrast}
- inputType={"text"}
- name={"mensagem"}
- value={mensagem.dict.value}
- placeholder={"Mensagem *"}
- multi={true}
- rows="5"
- rowsMax="6"
- error={mensagem.dict.key}
- help={mensagem.dict.key ? "Faltou escrever sua mensagem de sugestão, crÃtica ou dúvida." : "Escreva sua mensagem no campo acima."}
- handleChange={e => preencheMensagem(e)}
- />
- <br />
- <br />
- <div style={{ display: "flex", justifyContent: "center" }}>
- {
- state.currentUser.id !== '' ? (
- <Button contrast={props.contrast} onClick={e => onSubmit(e)} >ENVIAR MENSAGEM</Button>
- )
- :
- (
- <Button contrast={props.contrast} onClick={e => { e.preventDefault(); handleLogin(true); }} >ENVIAR MENSAGEM</Button>
- )
- }
- </div>
- </form>
- </div>
- </React.Fragment>
+ 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>
+ {/*-------------------------------MODALS---------------------------------------*/}
+ <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ openSnackbar={() => { handleSuccessfulLogin(true) }}
+ />
+ <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
+ {/*----------------------------------------------------------------------------*/}
+
+
+ <form onSubmit={e => onSubmit(e)}>
+ <FormInput
+ inputType={"text"}
+ name={"nome"}
+ value={nome.dict.value}
+ placeholder={"Nome *"}
+ error = {nome.dict.key}
+ help = {nome.dict.key ? "insira seu nome para o contato " : ""}
+ handleChange={e => preencheNome(e)}
+ />
+ <br/>
+ <FormInput
+ inputType={"text"}
+ name={"email"}
+ value={email.dict.value}
+ placeholder={"E-mail *"}
+ error = {email.dict.key}
+ help = {email.dict.key ? "Formato de e-mail incorreto ou vazio, tente : usuario@provedor.com" : ""}
+ handleChange={e => preencheEmail(e)}
+ />
+ <br/>
+ <br/>
+ <FormInput
+ inputType={"text"}
+ name={"mensagem"}
+ value={mensagem.dict.value}
+ placeholder={"Mensagem *"}
+ multi = {true}
+ rows = "5"
+ rowsMax = "6"
+ error = {mensagem.dict.key}
+ help = {mensagem.dict.key ? "Faltou escrever sua mensagem de sugestão, crÃtica ou dúvida." : "Escreva sua mensagem no campo acima."}
+ handleChange={e => preencheMensagem(e)}
+ />
+ <br/>
+ <br/>
+ <div style={{display: "flex", justifyContent: "center"}}>
+ {
+ state.currentUser.id !== '' ? (
+ <Button onClick={e => onSubmit(e)} >ENVIAR MENSAGEM</Button>
+ )
+ :
+ (
+ <Button onClick={e => {e.preventDefault(); handleLogin(true);}} >ENVIAR MENSAGEM</Button>
+ )
+ }
+ </div>
+ </form>
+ </React.Fragment>
+
+
);
}
diff --git a/src/Components/CriarColecaoForm.js b/src/Components/CriarColecaoForm.js
index f5c9b4d3..ea8c0507 100644
--- a/src/Components/CriarColecaoForm.js
+++ b/src/Components/CriarColecaoForm.js
@@ -16,28 +16,26 @@ 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 { Store } from '../Store.js'
+import React, {useContext} from 'react'
+import {Store} from '../Store.js'
import { Button } from '@material-ui/core';
import styled from 'styled-components'
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormControl from '@material-ui/core/FormControl';
-import {StyledTextField, useStyles} from './ReportUserForm.js'
-import { postRequest } from './HelperFunctions/getAxiosConfig'
+import TextField from '@material-ui/core/TextField';
+import {postRequest} from './HelperFunctions/getAxiosConfig'
-export default function CriarColecaoForm(props) {
- const { state } = useContext(Store)
-
- const classes = useStyles();
+export default function CriarColecaoForm (props) {
+ const {state} = useContext(Store)
const [value, setValue] = React.useState(-1);
/*values are set according to backend complaint id*/
const [options] = React.useState([
- { value: "pública", text: 'Pública (Sua coleção estará disponÃvel para todos)' },
- { value: "privada", text: 'Privada (Somente você poderá visualizar esta coleção)' }
+ {value : "pública", text :'Pública (Sua coleção estará disponÃvel para todos)'},
+ {value : "privada", text : 'Privada (Somente você poderá visualizar esta coleção)'}
])
const handleChange = (event) => {
@@ -45,8 +43,8 @@ export default function CriarColecaoForm(props) {
};
const [colName, setColName] = React.useState({
- key: false,
- value: "",
+ key : false,
+ value : "",
})
const handleColName = (e) => {
@@ -54,14 +52,13 @@ export default function CriarColecaoForm(props) {
const flag = userInput.length === 0 ? true : false
- setColName({
- ...colName,
- key: flag,
- value: userInput
+ setColName({...colName,
+ key : flag,
+ value : userInput
})
}
- function handleSuccess(data) {
+ function handleSuccess (data) {
props.finalize(data.id)
}
const formSubmit = (e) => {
@@ -71,52 +68,51 @@ export default function CriarColecaoForm(props) {
const finalRadioValue = value === 'pública' ? 'public' : 'private'
const finalColName = colName
- if (!(finalColName.key)) {
+ if(!(finalColName.key)) {
let payload = {
- "collection": {
- "name": finalColName.value,
- "owner_id": state.currentUser.id,
- "owner_type": "User",
- "privacy": finalRadioValue
+ "collection" : {
+ "name" : finalColName.value,
+ "owner_id" : state.currentUser.id,
+ "owner_type" : "User",
+ "privacy" : finalRadioValue
}
}
- postRequest(`/collections/`, payload, handleSuccess, (error) => { console.log(error) })
+ postRequest( `/collections/`, payload, handleSuccess, (error) =>{console.log(error)})
}
}
return (
- <form onSubmit={(e) => { formSubmit(e) }} style={{ textAlign: "left" }}>
+ <form onSubmit={(e) => {formSubmit(e)}} style={{textAlign : "left"}}>
<StyledTextField
- id={"col-name"}
+ id = {"col-name"}
label={"Nome da coleção"}
- type={"text"}
- value={colName.value}
- onChange={e => handleColName(e)}
- error={colName.key}
- InputProps={state.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
- contrast={state.contrast}
- helperText={colName.key ? <span>O nome é importante para identificar a sua coleção na plataforma.<br />Ex: Matemática Ensino Médio </span> : ""}
- required={true}
- style={{ width: "100%" }}
+ type = {"text"}
+ value = {colName.value}
+ onChange = {e => handleColName(e)}
+ error = {colName.key}
+
+ helperText = {colName.key ? <span>O nome é importante para identificar a sua coleção na plataforma.<br/>Ex: Matemática Ensino Médio </span> : ""}
+ required = {true}
+ style={{width:"100%"}}
/>
- <span style={{ fontSize: "12px" }}>Esta coleção é:</span>
+ <span style={{fontSize : "12px", color : "#b3b3b3"}}>Esta coleção é:</span>
- <StyledFormControl contrast={state.contrast} component="fieldset">
+ <StyledFormControl component="fieldset">
<RadioGroup value={value} onChange={handleChange}>
{
options.map(option =>
- <FormControlLabel key={option.value} value={option.value} control={<Radio color="#673ab7" />} label={option.text} />
+ <FormControlLabel key={option.value} value={option.value} control={<Radio color="#673ab7"/>} label={option.text} />
)
}
</RadioGroup>
</StyledFormControl>
<ButtonsDiv>
- <ButtonCancelar contrast={state.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar>
- <ButtonEnviar contrast={state.contrast} type="submit">CRIAR COLEÇÃO</ButtonEnviar>
+ <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar>
+ <ButtonEnviar type="submit">CRIAR COLEÇÃO</ButtonEnviar>
</ButtonsDiv>
</form>
);
@@ -130,21 +126,23 @@ export const ButtonsDiv = styled.div`
`
export const ButtonCancelar = styled(Button)`
+ &:hover {
+ background-color : rgba(158,158,158,0.2) !important;
+ }
height : 36px !important;
padding-left : 16px !important;
padding-right : 16px !important;
font-weight : 500 !important;
border-radius : 3px !important;
- color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
- text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
+ color :#666 !important;
background-color: transparent;
min-width : 88px !important;
height : 36px !important;
`
export const ButtonEnviar = styled(Button)`
- background-color: ${props => props.contrast === "" ? "#673ab7" : "black"} !important;
- color: ${props => props.contrast === "" ? "#fff" : "yellow"} !important;
+ background-color : #673ab7 !important;
+ color : #fff !important;
font-size: 14px !important;
font-weight: 500 !important;
height: 36px !important;
@@ -156,24 +154,41 @@ export const ButtonEnviar = styled(Button)`
min-width : 88px !important;
vertical-align : middle !important;
margin : 6px 8px !important;
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
- border: ${props => props.contrast === "" ? "" : "1px solid white !important"};
+ text-decoration : none !important;
+
.MuiButton-label {
padding-right : 16px;
padding-left : 16px;
}
`
+export const StyledTextField = styled(TextField)`
+ margin : 18px 0 !important;
+ .MuiFormHelperText-root {
+ text-align : right;
+ }
+
+ label.Mui-focused {
+ color : #673ab7;
+ }
+
+ label.Mui-focused.Mui-error {
+ color : red;
+ }
+
+ .MuiInput-underline::after {
+ border-bottom: 2px solid #673ab7;
+ }
+`
export const StyledFormControl = styled(FormControl)`
display : block !important;
.MuiFormControlLabel-root {
- color: ${props => props.contrast === "" ? "#666" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ color : #666;
}
.MuiIconButton-label {
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color : #666;
}
.PrivateRadioButtonIcon-checked {
color : orange;
diff --git a/src/Components/CriarColecaoModal.js b/src/Components/CriarColecaoModal.js
index 82b6749b..73e7384f 100644
--- a/src/Components/CriarColecaoModal.js
+++ b/src/Components/CriarColecaoModal.js
@@ -25,21 +25,22 @@ import styled from 'styled-components'
import CriarColecaoForm from './CriarColecaoForm.js'
import CloseIcon from '@material-ui/icons/Close';
-function CloseModalButton(props) {
+function CloseModalButton (props) {
return (
<StyledCloseModalButton onClick={props.handleClose}>
- <CloseIcon style={props.contrast === "" ? { color: "#666" } : { color: "white" }} />
+ <CloseIcon/>
</StyledCloseModalButton>
)
}
-export default function CriarColecaoModal(props) {
+export default function CriarColecaoModal (props) {
return (
<StyledModal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
open={props.open}
+
centered="true"
onClose={props.handleClose}
closeAfterTransition
@@ -49,14 +50,14 @@ export default function CriarColecaoModal(props) {
}}
>
<Fade in={props.open}>
- <Container contrast={props.contrast}>
- <Header contrast={props.contrast}>
- <span style={{ width: "32px" }} />
+ <Container>
+ <Header>
+ <span style={{width:"32px"}}/>
<h2>Criar Coleção</h2>
- <CloseModalButton handleClose={props.handleClose} contrast={props.contrast} />
+ <CloseModalButton handleClose={props.handleClose}/>
</Header>
- <Content style={{ paddingTop: "0" }}>
- <CriarColecaoForm handleClose={props.handleClose} finalize={props.handleClose} />
+ <Content style={{paddingTop : "0"}}>
+ <CriarColecaoForm handleClose={props.handleClose} finalize={props.handleClose}/>
</Content>
</Container>
</Fade>
@@ -81,13 +82,14 @@ const Header = styled.div`
h2 {
font-size : 26px;
font-weight : lighter;
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color : #666
}
`
const StyledCloseModalButton = styled(Button)`
display : inline-block;
position : relative;
+ float : right !important;
margin-right : -8px !important;
background : transparent !important;
min-width: 0 !important;
@@ -110,9 +112,8 @@ const StyledModal = styled(Modal)`
const Container = styled.div`
box-sizing : border-box;
box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
- background-color: ${props => props.contrast === "" ? "white" : "black"};
- border: ${props => props.contrast === "" ? "" : "1px solid white"};
- align-items : center;
+ background-color : white;
+ align : center;
display : flex;
flex-direction : column;
min-width : 240px;
diff --git a/src/Components/Cropper.js b/src/Components/Cropper.js
index 277b5c31..ccccc4c2 100644
--- a/src/Components/Cropper.js
+++ b/src/Components/Cropper.js
@@ -20,92 +20,97 @@ import React, { PureComponent } from 'react';
import ReactCrop from 'react-image-crop';
import 'react-image-crop/dist/ReactCrop.css';
+
export default class Cropper extends PureComponent {
- state = {
- src: this.props.src,
- crop:this.props.crop
- };
-
- // If you setState the crop in here you should return false.
- onImageLoaded = image => {
- this.imageRef = image;
- };
-
- onCropComplete = crop => {
- this.makeClientCrop(crop);
- };
-
- onCropChange = (crop, percentCrop) => {
- // You could also use percentCrop:
- // this.setState({ crop: percentCrop });
- this.setState({ crop });
- };
-
- async makeClientCrop(crop) {
- if (this.imageRef && crop.width && crop.height) {
- // eslint-disable-next-line
- const croppedImageUrl = await this.getCroppedImg(
- this.imageRef,
- crop,
- 'newFile.jpeg'
- );
- }
- }
+ state = {
+ src: this.props.src,
+ crop:this.props.crop
+ };
- getCroppedImg(image, crop, fileName) {
- const canvas = document.createElement('canvas');
- const scaleX = image.naturalWidth / image.width;
- const scaleY = image.naturalHeight / image.height;
- canvas.width = crop.width;
- canvas.height = crop.height;
- const ctx = canvas.getContext('2d');
-
- ctx.drawImage(
- image,
- crop.x * scaleX,
- crop.y * scaleY,
- crop.width * scaleX,
- crop.height * scaleY,
- 0,
- 0,
- crop.width,
- crop.height
- );
- const reader = new FileReader();
- canvas.toBlob(blob => {
- reader.readAsDataURL(blob)
- reader.onloadend = () => {
- // {/*this.dataURLtoFile(reader.result, 'cropped.jpg')*/}
- this.props.update(reader.result)
- }
- })
- }
+ // If you setState the crop in here you should return false.
+ onImageLoaded = image => {
+ this.imageRef = image;
+ };
+
+ onCropComplete = crop => {
+ this.makeClientCrop(crop);
+ };
+
+ onCropChange = (crop, percentCrop) => {
+ // You could also use percentCrop:
+ // this.setState({ crop: percentCrop });
+ this.setState({ crop });
+ };
+
+ async makeClientCrop(crop) {
+ if (this.imageRef && crop.width && crop.height) {
+ // eslint-disable-next-line
+ const croppedImageUrl = await this.getCroppedImg(
+ this.imageRef,
+ crop,
+ 'newFile.jpeg'
+ );
+
- render() {
- // eslint-disable-next-line
- const { crop, croppedImageUrl, src } = this.state;
-
- return (
- <>
- {src && (
- <ReactCrop
- src={src}
- crop={crop}
- circularCrop={this.props.circularCrop}
- onImageLoaded={this.onImageLoaded}
- onComplete={this.onCropComplete}
- onChange={this.onCropChange}
- style={{maxHeight : "100%", maxWidth : "100%"}}
- imageStyle={{maxHeight : "100%", maxWidth : "100%"}}
- />
- )}
- {/*croppedImageUrl && (
- <img alt="Crop" style={{ maxWidth: '100%', maxHeight : "100%"}} src={croppedImageUrl} />
- )*/}
- </>
- );
}
+ }
+
+
+
+ getCroppedImg(image, crop, fileName) {
+ const canvas = document.createElement('canvas');
+ const scaleX = image.naturalWidth / image.width;
+ const scaleY = image.naturalHeight / image.height;
+ canvas.width = crop.width;
+ canvas.height = crop.height;
+ const ctx = canvas.getContext('2d');
+
+ ctx.drawImage(
+ image,
+ crop.x * scaleX,
+ crop.y * scaleY,
+ crop.width * scaleX,
+ crop.height * scaleY,
+ 0,
+ 0,
+ crop.width,
+ crop.height
+ );
+ const reader = new FileReader();
+ canvas.toBlob(blob => {
+ reader.readAsDataURL(blob)
+ reader.onloadend = () => {
+ // {/*this.dataURLtoFile(reader.result, 'cropped.jpg')*/}
+ this.props.update(reader.result)
+ }
+ })
+
+ }
+
+ render() {
+ // eslint-disable-next-line
+ const { crop, croppedImageUrl, src } = this.state;
+
+ return (
+ <>
+ {src && (
+ <ReactCrop
+ src={src}
+ crop={crop}
+ circularCrop={this.props.circularCrop}
+ onImageLoaded={this.onImageLoaded}
+ onComplete={this.onCropComplete}
+ onChange={this.onCropChange}
+ style={{maxHeight : "300px", maxWidth : "100%"}}
+ />
+ )}
+ {/*croppedImageUrl && (
+ <img alt="Crop" style={{ maxWidth: '100%', maxHeight : "100%"}} src={croppedImageUrl} />
+ )*/}
+ </>
+ );
+ }
}
diff --git a/src/Components/Dropdown.js b/src/Components/Dropdown.js
index ea1a161b..cc064489 100644
--- a/src/Components/Dropdown.js
+++ b/src/Components/Dropdown.js
@@ -28,72 +28,71 @@ import { Store } from '../Store';
import { HashLink as Link } from 'react-router-hash-link';
const useStyles = makeStyles((theme) => ({
- typography: {
- padding: theme.spacing(2),
- },
+ typography: {
+ padding: theme.spacing(2),
+ },
}));
export default function PositionedPopper(props) {
- const [anchorEl, setAnchorEl] = React.useState(null);
- const [open, setOpen] = React.useState(false);
- //const [placement, setPlacement] = React.useState();
- const classes = useStyles();
- const { state, dispatch } = React.useContext(Store)
- const innerDropdown = React.useRef(null)
+ const [anchorEl, setAnchorEl] = React.useState(null);
+ const [open, setOpen] = React.useState(false);
+ const [placement, setPlacement] = React.useState();
+ const classes = useStyles();
+ const { state, dispatch } = React.useContext(Store)
+ const innerDropdown = React.useRef(null)
- const handleClick = (newPlacement) => (event) => {
- if (state.searchOpen)
- dispatch({
- type: 'HANDLE_SEARCH_BAR',
- opened: false
- })
- setAnchorEl(event.currentTarget);
- setOpen(!open);
- //setPlacement(newPlacement);
- };
+ const handleClick = (newPlacement) => (event) => {
+ if (state.searchOpen)
+ dispatch({
+ type: 'HANDLE_SEARCH_BAR',
+ opened: false
+ })
+ setAnchorEl(event.currentTarget);
+ setOpen((prev) => placement !== newPlacement || !prev);
+ setPlacement(newPlacement);
+ };
- const handleItemClicked = () => {
- setOpen(false)
- }
+ const handleItemClicked = () => {
+ setOpen(false)
+ }
- useEffect(() => {
- const handleClickOutside = (event) => {
- innerDropdown.current && !innerDropdown.current.contains(event.target) && setOpen(false)
- }
+ useEffect(() => {
+ const handleClickOutside = (event) => {
+ innerDropdown.current && !innerDropdown.current.contains(event.target) && setOpen(false)
+ }
- document.addEventListener('mousedown', handleClickOutside)
+ document.addEventListener('mousedown', handleClickOutside)
- return () => document.removeEventListener('mousedown', handleClickOutside)
+ return () => document.removeEventListener('mousedown', handleClickOutside)
- }, [])
+ }, [])
- return (
- <div className={classes.root}>
- <Popper open={open} anchorEl={anchorEl} placement="bottom" transition ref={innerDropdown}>
- {({ TransitionProps }) => (
- <Fade {...TransitionProps} timeout={350}>
- <Paper>
- <MenuList className={`${state.contrast}BackColor`}>
- {
- props.items.map((item) =>
- <Link onClick={handleItemClicked} className={`${state.contrast}LinkColor`} style={{ textDecoration: "none", color: "black" }} key={`${item.name}_${new Date().toString()}`} to={item.href} ><MenuItem>{item.name}</MenuItem></Link>
- )
- }
- </MenuList>
- </Paper>
- </Fade>
- )}
- </Popper>
- <Button
- className={`${state.contrast}LinkColor`}
- style={{ textTransform: "none" }}
- aria-controls="menu-list-grow"
- aria-haspopup="true"
- onClick={handleClick('bottom')}
- >
- {props.name}
- <ExpandMoreIcon className={`${state.contrast}IconColor`}/>
- </Button>
- </div>
- );
+ return (
+ <div className={classes.root}>
+ <Popper open={open} anchorEl={anchorEl} placement="bottom" transition ref={innerDropdown}>
+ {({ TransitionProps }) => (
+ <Fade {...TransitionProps} timeout={350}>
+ <Paper>
+ <MenuList>
+ {
+ props.items.map((item) =>
+ <Link onClick={handleItemClicked} style={{ textDecoration: "none", color: "black" }} key={`${item.name}_${new Date().toString()}`} to={item.href} ><MenuItem>{item.name}</MenuItem></Link>
+ )
+ }
+ </MenuList>
+ </Paper>
+ </Fade>
+ )}
+ </Popper>
+ <Button
+ style={{ textTransform: "none", fontSize: "14px" }}
+ aria-controls="menu-list-grow"
+ aria-haspopup="true"
+ onClick={handleClick('bottom')}
+ >
+ {props.name}
+ <ExpandMoreIcon />
+ </Button>
+ </div>
+ );
}
\ No newline at end of file
diff --git a/src/Components/EcFooter.js b/src/Components/EcFooter.js
index f0abfb6e..2b23f622 100644
--- a/src/Components/EcFooter.js
+++ b/src/Components/EcFooter.js
@@ -25,10 +25,8 @@ import { HashLink as Link } from 'react-router-hash-link';
import { eduConectada } from "ImportImages.js";
const BlueFooter = styled.div`
- border-top: ${props => props.contrast === '' ? "none" : "1px solid white"};
- border-bottom: ${props => props.contrast === '' ? "none" : "1px solid white"};
- background-color: ${props => props.contrast === '' ? "#00bcd4" : "black"};
- color: white;
+ background-color : #00bcd4;
+ color : white;
display : block;
padding-top : 2em;
@media screen and (min-width : 502px) {
@@ -44,33 +42,33 @@ const listStyle = {
lineHeight: "1.6",
}
const WhiteLink = styled(Link)`
- text-decoration: ${props => props.contrast === '' ? "none" : "underline"};;
- color: ${props => props.contrast === '' ? "white" : "yellow"};
+ text-decoration: none;
+ color: white;
`
class EcFooter extends Component {
render() {
return (
- <BlueFooter contrast={this.props.contrast}>
+ <BlueFooter>
<Container>
<Row>
<Col md={4} sm={6} xs={6} style={window.innerWidth < 502 && { textAlign: "center" }}>
<h4>Sobre</h4>
<ul style={listStyle}>
- <li> <WhiteLink contrast={this.props.contrast} to="/sobre">Sobre a Plataforma</WhiteLink> </li>
- <li> <WhiteLink contrast={this.props.contrast} to="/sobre#portaisparceiros">Portais Parceiros</WhiteLink> </li>
- <li> <WhiteLink contrast={this.props.contrast} to="/termos">Termos de Uso</WhiteLink> </li>
- <li> <WhiteLink contrast={this.props.contrast} to="/contato">Contato</WhiteLink> </li>
+ <li> <WhiteLink to="/sobre">Sobre a Plataforma</WhiteLink> </li>
+ <li> <WhiteLink to="/sobre#portaisparceiros">Portais Parceiros</WhiteLink> </li>
+ <li> <WhiteLink to="/termos">Termos de Uso</WhiteLink> </li>
+ <li> <WhiteLink to="/contato">Contato</WhiteLink> </li>
</ul>
</Col>
<Col md={4} sm={6} xs={6} style={window.innerWidth < 502 && { textAlign: "center" }}>
<h4>Ajuda</h4>
<ul style={listStyle}>
- <li> <WhiteLink contrast={this.props.contrast} to="/ajuda">Central de Ajuda</WhiteLink> </li>
- <li> <WhiteLink contrast={this.props.contrast} to="/publicando-recurso">Publicando Recursos</WhiteLink> </li>
- <li> <WhiteLink contrast={this.props.contrast} to="/encontrando-recurso">Encontrando Recursos</WhiteLink> </li>
- <li> <WhiteLink contrast={this.props.contrast} to="/participando-da-rede">Participando da Rede</WhiteLink> </li>
- <li> <WhiteLink contrast={this.props.contrast} to="/gerenciando-conta">Gerenciando a Conta</WhiteLink> </li>
+ <li> <WhiteLink to="/ajuda">Central de Ajuda</WhiteLink> </li>
+ <li> <WhiteLink to="/publicando-recurso">Publicando Recursos</WhiteLink> </li>
+ <li> <WhiteLink to="/encontrando-recurso">Encontrando Recursos</WhiteLink> </li>
+ <li> <WhiteLink to="/participando-da-rede">Participando da Rede</WhiteLink> </li>
+ <li> <WhiteLink to="/gerenciando-conta">Gerenciando a Conta</WhiteLink> </li>
</ul>
</Col>
<Col md={4} sm={12} xs={12} style={window.innerWidth < 502 && { textAlign: "center" }}>
diff --git a/src/Components/EditarColecaoForm.js b/src/Components/EditarColecaoForm.js
index 67b1e4d9..f0ea1fdc 100644
--- a/src/Components/EditarColecaoForm.js
+++ b/src/Components/EditarColecaoForm.js
@@ -24,14 +24,12 @@ import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormControl from '@material-ui/core/FormControl';
-import {StyledTextField, useStyles} from './ReportUserForm.js'
+import TextField from '@material-ui/core/TextField';
import {getRequest, putRequest} from './HelperFunctions/getAxiosConfig'
export default function EditarColecaoForm (props) {
const {state} = useContext(Store)
- const classes = useStyles();
-
function handleSuccessfulGet (data) {
setColName({key : false, value : data.name})
setValue( data.privacy === 'public' ? 'pública' : 'privada')
@@ -101,37 +99,33 @@ export default function EditarColecaoForm (props) {
<form onSubmit={(e) => {formSubmit(e)}} style={{textAlign : "left"}}>
<StyledTextField
- contrast={props.contrast}
id = {"col-name"}
label={"Nome"}
type = {"text"}
value = {colName.value}
onChange = {e => handleColName(e)}
error = {colName.key}
- InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
required = {true}
style={{width:"100%"}}
/>
<StyledTextField
- contrast={props.contrast}
id = {"col-description"}
label={"Descrição"}
type = {"text"}
value = {colDescription}
multiline
- InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
rows={5}
onChange = {e => setColDescription(e)}
style={{width:"100%"}}
/>
- <span style={{fontSize : "12px"}}>Esta coleção é:</span>
- <StyledFormControl contrast={props.contrast} component="fieldset">
+ <span style={{fontSize : "12px", color : "#b3b3b3"}}>Esta coleção é:</span>
+ <StyledFormControl component="fieldset">
<RadioGroup value={value} onChange={handleChange}>
{
options.map(option =>
- <FormControlLabel key={option.value} value={option.value} control={<Radio/>} label={option.text} />
+ <FormControlLabel key={option.value} value={option.value} control={<Radio color="#673ab7"/>} label={option.text} />
)
}
</RadioGroup>
@@ -139,8 +133,8 @@ export default function EditarColecaoForm (props) {
<ButtonsDiv>
- <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar>
- <ButtonEnviar contrast={props.contrast} type="submit">SALVAR</ButtonEnviar>
+ <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar>
+ <ButtonEnviar type="submit">SALVAR</ButtonEnviar>
</ButtonsDiv>
</form>
);
@@ -154,23 +148,23 @@ export const ButtonsDiv = styled.div`
`
export const ButtonCancelar = styled(Button)`
- color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
- text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
+ &:hover {
+ background-color : rgba(158,158,158,0.2) !important;
+ }
height : 36px !important;
padding-left : 16px !important;
padding-right : 16px !important;
font-weight : 500 !important;
border-radius : 3px !important;
+ color :#666 !important;
background-color: transparent;
min-width : 88px !important;
height : 36px !important;
`
export const ButtonEnviar = styled(Button)`
- color: ${props => props.contrast === "" ? "white" : "yellow"} !important;
- background-color: ${props => props.contrast === "" ? "#673ab7" : "black"} !important;
- text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
- border: ${props => props.contrast === "" ? "none" : "1px solid white"} !important;
+ background-color : #673ab7 !important;
+ color : #fff !important;
font-size: 14px !important;
font-weight: 500 !important;
height: 36px !important;
@@ -182,23 +176,42 @@ export const ButtonEnviar = styled(Button)`
min-width : 88px !important;
vertical-align : middle !important;
margin : 6px 8px !important;
+ text-decoration : none !important;
.MuiButton-label {
padding-right : 16px;
padding-left : 16px;
}
`
+export const StyledTextField = styled(TextField)`
+ margin : 18px 0 !important;
+
+ .MuiFormHelperText-root {
+ text-align : right;
+ }
+
+ label.Mui-focused {
+ color : #673ab7;
+ }
+
+ label.Mui-focused.Mui-error {
+ color : red;
+ }
+
+ .MuiInput-underline::after {
+ border-bottom: 2px solid #673ab7;
+ }
+`
export const StyledFormControl = styled(FormControl)`
+ display : block !important;
+
.MuiFormControlLabel-root {
- color: ${props => props.contrast === "" ? "#666" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ color : #666;
}
.MuiIconButton-label {
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color : #666;
}
- display : block !important;
-
.PrivateRadioButtonIcon-checked {
color : orange;
}
diff --git a/src/Components/ExpandedMaterials.js b/src/Components/ExpandedMaterials.js
index 767f0a0f..603ec4ed 100644
--- a/src/Components/ExpandedMaterials.js
+++ b/src/Components/ExpandedMaterials.js
@@ -24,7 +24,7 @@ const ExpandedMaterial = (props) => {
const classes = useStyles();
return (
- <Paper className={`${props.contrast}Border`} elevation={3} style={props.contrast === "" ? { backgroundColor: "#444444", padding: "20px" } : { backgroundColor: "black", padding: "20px" }}>
+ <Paper elevation={3} style={{ backgroundColor: "#444444", padding: "20px" }}>
<Grid container direction="row" spacing={2}>
<Grid item direction="column" xs={12} md={4}>
<Grid item>
@@ -40,7 +40,7 @@ const ExpandedMaterial = (props) => {
{
material.tags.map((tag, index) => {
return (
- <Chip className={`${props.contrast}Text ${props.contrast}BackColor`} label={tag.name} key={index} style={props.contrast === "" ? { padding: "0.5px" } : {border: "1px solid white"}} />
+ <Chip color="default" label={tag.name} key={index} style={{ padding: "0.5px" }} />
)
})
}
@@ -55,7 +55,7 @@ const ExpandedMaterial = (props) => {
</DevelopedByDiv>
<SizedHeightBox3 />
<StyledLink to={`/colecao?colecao=${material.id}`}>
- <Button className={`${props.contrast}LinkColor ContrastText`} variant="contained" style={props.contrast === "" ? { background: "#e8224f" } : { background: "black" }}>
+ <Button variant="contained" color="secondary">
Ver todos
</Button>
</StyledLink>
@@ -73,21 +73,18 @@ const ExpandedMaterial = (props) => {
<Grid container direction="row" justify="center" alignItems="center" spacing={3}>
<Grid item md={4}>
<TopicCard
- contrast={props.contrast}
topic={material.topics[0]}
colecao_id={material.id}
/>
</Grid>
<Grid item md={4}>
<TopicCard
- contrast={props.contrast}
topic={material.topics[1]}
colecao_id={material.id}
/>
</Grid>
<Grid item md={4}>
<TopicCard
- contrast={props.contrast}
topic={material.topics[2]}
colecao_id={material.id}
/>
diff --git a/src/Components/ExpansionPanels.js b/src/Components/ExpansionPanels.js
index 4582b138..017816eb 100644
--- a/src/Components/ExpansionPanels.js
+++ b/src/Components/ExpansionPanels.js
@@ -37,8 +37,10 @@ const ExpansionPanelTeste = styled(ExpansionPanel)`
`
const ExpansionPanelSummaryColorido = styled(ExpansionPanelSummary)`
- background-color: ${props => props.contrast === "" ? "#e5e5e5 !important" : "black !important"};
- border: ${props => props.contrast === "" ? 0 : "1px solid white !important"};
+
+
+ background-color:#e5e5e5 !important;
+
.MuiExpansionPanel-root {
background-color: #00BCD4 !important;
}
@@ -46,46 +48,46 @@ const ExpansionPanelSummaryColorido = styled(ExpansionPanelSummary)`
`
const ExpansionPanelDetailsColorido = styled(ExpansionPanelDetails)`
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+
+ background-color: #fff;
font-size: 15px;
- p{
- color: ${props => props.contrast === "" ? "" : "white"};
- }
`
const TypographyColorido = styled(Typography)`
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color: #666 !important;
font-size: 16px !important;
font-weight: 400 !important;
`
const AColorido = styled.a`
- color: ${props => props.contrast === "" ? "#00BCD4" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ color: #00BCD4;
+ text-decoration:none;
+
`
-export default function SimpleExpansionPanel({ contrast }) {
+export default function SimpleExpansionPanel() {
+
+
return (
<div >
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
- contrast={contrast}
- expandIcon={<ExpandMoreIcon style={contrast === "" ? {} : { color: "white" }} />}
+ expandIcon={<ExpandMoreIcon/>}
aria-controls="panel1a-content"
id="panel1a-header"
>
- <TypographyColorido contrast={contrast} >1. CaracterÃsticas da <strong>Plataforma Integrada de RED do MEC</strong></TypographyColorido>
+ <TypographyColorido >1. CaracterÃsticas da <strong>Plataforma Integrada de RED do MEC</strong></TypographyColorido>
</ExpansionPanelSummaryColorido>
- <ExpansionPanelDetailsColorido contrast={contrast} >
+ <ExpansionPanelDetailsColorido >
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div>
<p>A <strong>Plataforma Integrada de RED do MEC</strong> é um é sÃtio (website) em formato de plataforma
- interativa colaborativa para propiciar a formação de uma rede de pessoas interessadas em usar, criar e compartilhar recursos e materiais educacionais. Seu objetivo é reunir e disponibilizar conteúdos do acervo do MEC, antes distribuÃdos em diferentes portais (Portal do Professor, Banco Internacional de Objetos Educacionais, DomÃnio Público e TV Escola), conteúdo de organizações parceiras, bem como fomentar espaços de participação, criação e compartilhamento de conhecimento entre usuários para temas relacionados à educação básica brasileira. A <strong>Plataforma Integrada de RED do MEC</strong> foi criada em software livre, cujas informações para desenvolvedores estão disponÃveis em <AColorido contrast={contrast} href="https://gitlab.c3sl.ufpr.br/portalmec" target="_blank">gitlab.c3sl.ufpr.br/portalmec</AColorido>.</p>
+ interativa colaborativa para propiciar a formação de uma rede de pessoas interessadas em usar, criar e compartilhar recursos e materiais educacionais. Seu objetivo é reunir e disponibilizar conteúdos do acervo do MEC, antes distribuÃdos em diferentes portais (Portal do Professor, Banco Internacional de Objetos Educacionais, DomÃnio Público e TV Escola), conteúdo de organizações parceiras, bem como fomentar espaços de participação, criação e compartilhamento de conhecimento entre usuários para temas relacionados à educação básica brasileira. A <strong>Plataforma Integrada de RED do MEC</strong> foi criada em software livre, cujas informações para desenvolvedores estão disponÃveis em <AColorido href="https://gitlab.c3sl.ufpr.br/portalmec" target="_blank">gitlab.c3sl.ufpr.br/portalmec</AColorido>.</p>
<p>A <strong>Plataforma Integrada de RED do MEC</strong> funciona ao mesmo tempo como repositório e referatório:</p>
<ul>
<li>
@@ -97,12 +99,12 @@ export default function SimpleExpansionPanel({ contrast }) {
</ul>
<p>No que se refere ao Repositório, a <strong>Plataforma Integrada de RED do MEC</strong> disponibiliza recursos educacionais digitais e materiais de formação de seu acervo e também permite que usuários (pessoas fÃsicas) depositem (publiquem, façam upload) seus recursos e materiais para serem armazenados, desde que façam seu cadastro, disponibilizem as informações necessárias no momento da publicação e respeitem as regras estabelecidas neste Termo.</p>
<p>Os usuários terão acesso a uma variedade de recursos on-line. Para além, mediante cadastro, terão a sua disposição um maior número de funcionalidades, incluindo ferramentas de comunicação e interação, mecanismos de consulta, poderão fazer upload e download de recursos educacionais digitais. Poderão utilizar serviços relacionados à criação, à consulta e ao acompanhamento de coleções de recursos educacionais digitais de outros usuários, dentre outras funcionalidades. Professores cadastrados e identificados poderão ainda fazer upload de RED.</p>
- <p>No que se refere ao Referatório, a <strong>Plataforma Integrada de RED do MEC</strong> indica e organiza links externos para recursos e materiais de terceiros. Os recursos serão disponibilizados mediante a adesão aos critérios especÃficos levantados pelo MEC. Para mais informações, utilize a página de <AColorido contrast={contrast} href="contato">Contato</AColorido> da plataforma.</p>
+ <p>No que se refere ao Referatório, a <strong>Plataforma Integrada de RED do MEC</strong> indica e organiza links externos para recursos e materiais de terceiros. Os recursos serão disponibilizados mediante a adesão aos critérios especÃficos levantados pelo MEC. Para mais informações, utilize a página de <AColorido href="contato">Contato</AColorido> da plataforma.</p>
</div>
</Grid>
- <Grid item xs={12} md={1}></Grid>
+ <Grid item xs={12} md={1}></Grid>
<Grid item xs={12} md={4}>
- <div style={{ color: "#00BCD4", fontSize: "18px" }}>
+ <div style={{color:"#00BCD4",fontSize:"18px"}}>
<p>BASICAMENTE,</p>
<p>A Plataforma MEC RED reúne e disponibiliza conteúdos do acervo do MEC que antes estavam distribuÃdos em diferentes portais.</p>
<p>Esses conteúdos podem estar armazenados na própria Plataforma, ou podem estar em sites externos, sendo indicados pela Plataforma e acessados por meio dela. </p>
@@ -114,223 +116,217 @@ export default function SimpleExpansionPanel({ contrast }) {
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
- contrast={contrast}
- expandIcon={<ExpandMoreIcon style={contrast === "" ? {} : { color: "white" }} />}
+ expandIcon={<ExpandMoreIcon />}
aria-controls="panel2a-content"
id="panel2a-header"
>
- <TypographyColorido contrast={contrast}>2. Cadastro e segurança</TypographyColorido>
+ <TypographyColorido >2. Cadastro e segurança</TypographyColorido>
</ExpansionPanelSummaryColorido>
- <ExpansionPanelDetailsColorido contrast={contrast}>
- <Grid container spacing={3}>
- <Grid item xs={12} md={7}>
- <div>
- <p>A realização de cadastro pode ser exigida como condição para a utilização de determinados ambientes, recursos ou ferramentas. O cadastramento de um usuário só será finalizado ao serem preenchidos todos os campos indicados como obrigatórios. Para o registro de sua conta, o usuário deverá indicar uma senha e uma identificação, tornando-se responsável por mantê-las em sigilo, assumindo a total responsabilidade pelas atividades que se realizam por meio dela. O usuário compromete-se igualmente em sair ("deslogar") de sua conta ao final de cada sessão.</p>
- <p>Além das informações básicas, aos professores que quiserem ter a sua identidade verificada - o que o permitirá depositar recursos na plataforma (fazer upload) - será necessário identificar a escola da rede em que atua. A mesma informação será verificada a partir dos dados do Censo Escolar.</p>
- <p>A <strong>Plataforma Integrada de RED do MEC</strong> não se responsabiliza pelas informações inseridas por seus usuários. Os usuários garantem e respondem, em qualquer caso, pela veracidade, exatidão e autenticidade dos dados pessoais cadastrados. A <strong>Plataforma Integrada de RED do MEC</strong> se reserva o direito de conferir a identificação de seus usuários, bem como de solicitar dados adicionais e documentos que julgue pertinentes, a fim de verificar os dados pessoais informados caso julgue necessário.</p>
- <p>Para acessar sua conta, o usuário deverá identificar-se por meio de e-mail e senha. O usuário compromete-se a não informar a terceiros sua senha, responsabilizando-se integral e exclusivamente pelo uso que dela seja feito e pelas operações efetuadas em sua conta.</p>
- <p>O usuário compromete-se a notificar a <strong>Plataforma Integrada de RED do MEC</strong>, por meio da funcionalidade “Contatoâ€, sobre qualquer uso não autorizado de sua conta, assim como sobre o seu acesso por terceiros não autorizados.</p>
- <p>Contas de usuários com informações consideradas inadequadas pela <strong>Plataforma Integrada de RED do MEC</strong>, conforme as cláusulas destes Termos de Uso, poderão ser desativadas, removidas ou ter seu conteúdo bloqueado por decisão do Ministério da Educação. O usuário será notificado através do seu e-mail de cadastro.</p>
- <p>A criação de conta ou a disponibilização de conteúdo na <strong>Plataforma Integrada de RED do MEC</strong> não geram nenhum direito de suporte técnico ou de indenização por dificuldades técnicas ou falhas nos sistemas. O cancelamento, a suspensão, a perda de dados armazenados, a indisponibilidade ou outra situação adversa que afete o acesso, os dados ou o conteúdo do usuário não ensejarão qualquer tipo de reparação, compensação ou outra obrigação.</p>
- <p>A <strong>Plataforma Integrada de RED do MEC</strong> não se responsabiliza por qualquer dano, prejuÃzo ou perda no equipamento do usuário causado por falhas no sistema, no servidor ou na internet decorrentes de condutas de terceiros, de vÃrus por acesso, da utilização ou navegação na internet ou da transferência de dados.</p>
- </div>
- </Grid>
- <Grid item xs={12} md={1}></Grid>
- <Grid item xs={12} md={4}>
- <div style={{ color: "#00BCD4", fontSize: "18px" }}>
- <p>BASICAMENTE,</p>
- <p>Para utilizar determinados recursos e ferramentas, o usuário precisa efetuar o cadastro no sistema, informando um e-mail válido e cadastrando uma senha.</p>
- <p>O usuário é o único responsável pelas informações que fornece. E a Plataforma MEC RED se reserva o direito de conferir a veracidade desses dados, caso julgue necessário.</p>
- <p>Se houver qualquer tipo de acesso e uso não autorizado em sua conta, o usuário compromete-se a notificar a Plataforma por meio da funcionalidade “Reportarâ€.</p>
- <p>A criação de conta não gera direito à suporte técnico ou indenização por dificuldades técnicas ou falhas no sistema.</p>
- </div>
- </Grid>
+ <ExpansionPanelDetailsColorido>
+ <Grid container spacing={3}>
+ <Grid item xs={12} md={7}>
+ <div>
+ <p>A realização de cadastro pode ser exigida como condição para a utilização de determinados ambientes, recursos ou ferramentas. O cadastramento de um usuário só será finalizado ao serem preenchidos todos os campos indicados como obrigatórios. Para o registro de sua conta, o usuário deverá indicar uma senha e uma identificação, tornando-se responsável por mantê-las em sigilo, assumindo a total responsabilidade pelas atividades que se realizam por meio dela. O usuário compromete-se igualmente em sair ("deslogar") de sua conta ao final de cada sessão.</p>
+ <p>Além das informações básicas, aos professores que quiserem ter a sua identidade verificada - o que o permitirá depositar recursos na plataforma (fazer upload) - será necessário identificar a escola da rede em que atua. A mesma informação será verificada a partir dos dados do Censo Escolar.</p>
+ <p>A <strong>Plataforma Integrada de RED do MEC</strong> não se responsabiliza pelas informações inseridas por seus usuários. Os usuários garantem e respondem, em qualquer caso, pela veracidade, exatidão e autenticidade dos dados pessoais cadastrados. A <strong>Plataforma Integrada de RED do MEC</strong> se reserva o direito de conferir a identificação de seus usuários, bem como de solicitar dados adicionais e documentos que julgue pertinentes, a fim de verificar os dados pessoais informados caso julgue necessário.</p>
+ <p>Para acessar sua conta, o usuário deverá identificar-se por meio de e-mail e senha. O usuário compromete-se a não informar a terceiros sua senha, responsabilizando-se integral e exclusivamente pelo uso que dela seja feito e pelas operações efetuadas em sua conta.</p>
+ <p>O usuário compromete-se a notificar a <strong>Plataforma Integrada de RED do MEC</strong>, por meio da funcionalidade “Contatoâ€, sobre qualquer uso não autorizado de sua conta, assim como sobre o seu acesso por terceiros não autorizados.</p>
+ <p>Contas de usuários com informações consideradas inadequadas pela <strong>Plataforma Integrada de RED do MEC</strong>, conforme as cláusulas destes Termos de Uso, poderão ser desativadas, removidas ou ter seu conteúdo bloqueado por decisão do Ministério da Educação. O usuário será notificado através do seu e-mail de cadastro.</p>
+ <p>A criação de conta ou a disponibilização de conteúdo na <strong>Plataforma Integrada de RED do MEC</strong> não geram nenhum direito de suporte técnico ou de indenização por dificuldades técnicas ou falhas nos sistemas. O cancelamento, a suspensão, a perda de dados armazenados, a indisponibilidade ou outra situação adversa que afete o acesso, os dados ou o conteúdo do usuário não ensejarão qualquer tipo de reparação, compensação ou outra obrigação.</p>
+ <p>A <strong>Plataforma Integrada de RED do MEC</strong> não se responsabiliza por qualquer dano, prejuÃzo ou perda no equipamento do usuário causado por falhas no sistema, no servidor ou na internet decorrentes de condutas de terceiros, de vÃrus por acesso, da utilização ou navegação na internet ou da transferência de dados.</p>
+ </div>
</Grid>
+ <Grid item xs={12} md={1}></Grid>
+ <Grid item xs={12} md={4}>
+ <div style={{color:"#00BCD4",fontSize:"18px"}}>
+ <p>BASICAMENTE,</p>
+ <p>Para utilizar determinados recursos e ferramentas, o usuário precisa efetuar o cadastro no sistema, informando um e-mail válido e cadastrando uma senha.</p>
+ <p>O usuário é o único responsável pelas informações que fornece. E a Plataforma MEC RED se reserva o direito de conferir a veracidade desses dados, caso julgue necessário.</p>
+ <p>Se houver qualquer tipo de acesso e uso não autorizado em sua conta, o usuário compromete-se a notificar a Plataforma por meio da funcionalidade “Reportarâ€.</p>
+ <p>A criação de conta não gera direito à suporte técnico ou indenização por dificuldades técnicas ou falhas no sistema.</p>
+ </div>
+ </Grid>
+ </Grid>
</ExpansionPanelDetailsColorido>
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
- contrast={contrast}
- expandIcon={<ExpandMoreIcon style={contrast === "" ? {} : { color: "white" }} />}
+ expandIcon={<ExpandMoreIcon />}
aria-controls="panel3a-content"
id="panel3a-header"
>
- <TypographyColorido contrast={contrast}>3. Publicações de usuários</TypographyColorido>
+ <TypographyColorido >3. Publicações de usuários</TypographyColorido>
</ExpansionPanelSummaryColorido>
- <ExpansionPanelDetailsColorido contrast={contrast}>
- <Grid container spacing={3}>
- <Grid item xs={12} md={7}>
- <div>
- <p>O conteúdo disponibilizado pelo usuário é de inteira responsabilidade do usuário, não sendo a <strong>Plataforma Integrada de RED do MEC</strong> responsável por quaisquer fatos decorrentes de sua utilização.</p>
- <p>Os recursos publicados devem ter cunho educacional, mantendo-se dentro do assunto em que estão inseridos, em conformidade com estes Termos de Uso.</p>
- <p>Todas as informações publicadas na <strong>Plataforma Integrada de RED do MEC</strong>, como os metadados (descritivos dos recursos), comentários e discussões inseridas são consideradas públicas, visÃveis por qualquer pessoa, sem nenhum tipo de confidencialidade. Não serão aceitos materiais que contenham vocabulário ofensivo ou desrespeitoso a terceiros, incluindo ofensas, calúnias, injúrias e difamações. Também não serão permitidos materiais que invadam a privacidade de terceiros, que sejam ameaçadoras, preconceituosas ou racistas.</p>
- <p>Caso o usuário entenda que alguma postagem, material, notÃcia, comentário ou outro conteúdo disponibilizado na <strong>Plataforma Integrada de RED do MEC</strong> violem algum direito seu, a legislação aplicável ou as cláusulas deste Termos de Uso, deverá notificar a <strong>Plataforma Integrada de RED do MEC</strong> por meio da funcionalidade “Reportar†ou, quando não houver, através do formulário de Contato.</p>
- <p>O spam (mensagens não solicitadas) ou o abuso em comentários poderão ser ativamente prevenidos através do bloqueio de palavras e expressões predeterminadas, ou excluÃdos posteriormente, sendo cabÃvel a remoção da conta do usuário, no caso de tentativas de violação sistemática e repetitiva destes Termos de Uso, incluindo a reintrodução de material que já tenha sido previamente bloqueado ou excluÃdo.</p>
- <p>Conteúdos com informações consideradas inadequadas pela <strong>Plataforma Integrada de RED do MEC</strong>, conforme as cláusulas destes Termos de Uso, poderão ser removidos por decisão do Ministério da Educação e o usuário será notificado através do seu e-mail de cadastro.</p>
- <h6 style={{ fontSize: "18px", marginBlock: "10px" }} >3.1 É permitido ao usuário:</h6>
- <ul>
- <li>
- <p>Depositar (publicar) recurso ou material de sua autoria ou de autoria coletiva, com anuência dos demais autores, que esteja em domÃnio público, ou para o qual há anuência dos autores originais, desde que os dados sejam corretamente preenchidos nos campos descritivos (metadados) indicados para preenchimento das informações sobre os recursos;</p>
- </li>
- <li>
- <p>Nos comentários, contatos e comunicações, é fundamental ser cortês e tratar os demais usuários com respeito;</p>
- </li>
- <li>
- <p>O usuário poderá sugerir links para outros sites, desde que tenham relação direta com o assunto abordado.</p>
- </li>
- </ul>
- <h6 style={{ fontSize: "18px", marginBlock: "10px" }}>3.2 É vedado ao usuário:</h6>
- <ul>
- <li>
- <p>Transmitir, exibir, enviar, ou de qualquer outra forma, disponibilizar conteúdo que contenha material pornográfico e/ou atividades ilegais relativas a menores de 18 anos (consoante o <AColorido contrast={contrast} href="http://www.planalto.gov.br/ccivil_03/leis/L8069.htm" target="_blank">Estatuto da Criança e do Adolescente</AColorido>), que invada a privacidade de terceiros, que tenha cunho comercial, viole os <AColorido contrast={contrast} href="https://www.ohchr.org/EN/UDHR/Pages/Language.aspx?LangID=por" target="_blank">Direitos Humanos</AColorido> ou seja ilegal, ofensivo, ameaçador, que incite a violência, seja vulgar, preconceituoso ou racista (como descrito nos artigos 138-140 do Código Penal Brasileiro), ou de qualquer forma seja contrário às cláusulas destes Termos de Uso;</p>
- </li>
- <li>
- <p>Assumir a identidade de outra pessoa, fÃsica ou jurÃdica; forjar cabeçalhos, ou de qualquer outra forma manipular identificadores, a fim de disfarçar a origem de qualquer material contido na plataforma, com sentido de desmoralizar, desprestigiar ou se fazer passar pela <strong>Plataforma Integrada de RED do MEC</strong>;</p>
- </li>
- <li>
- <p>Disponibilizar conteúdo em desconformidade com a <AColorido contrast={contrast} href="http://www.planalto.gov.br/ccivil_03/leis/L9610.htm" target="_blank">legislação de Direito Autoral</AColorido>, incluindo conteúdo que viole marca registrada, patente, segredo de negócio, direito autoral ou qualquer outro direito de terceiro; disponibilizar conteúdo com qualquer tipo de propaganda, material promocional, spam (mensagens não solicitadas), correntes ou esquemas de pirâmide;</p>
- </li>
- <li>
- <p>Disponibilizar conteúdo que contenha vÃrus ou qualquer outro código, arquivo ou programa de computador, com o propósito de interromper, destruir ou limitar a funcionalidade de qualquer software, hardware ou equipamento de telecomunicações;</p>
- </li>
- <li>
- <p>Interferir ou interromper os serviços, as redes ou os servidores conectados à plataforma de modo a dificultar a utilização e o aproveitamento dos serviços por outros usuários, bem como obter ou tentar obter acesso não autorizado à plataforma;</p>
- </li>
- <li>
- <p>Pedir votos, mencionar número de candidato ou expressar qualquer outra manifestação que se caracterize como propaganda polÃtica ou que viole as normas eleitorais.</p>
- </li>
- </ul>
- </div>
- </Grid>
- <Grid item xs={12} md={1}></Grid>
- <Grid item xs={12} md={4}>
- <div style={{ color: "#00BCD4", fontSize: "18px" }}>
- <p>BASICAMENTE,</p>
- <p>O conteúdo disponibilizado pelo usuário é de sua inteira responsabilidade. Os recursos publicados tevem ter cunho educacional, em conformidade com estes Termos.</p>
- <p>Todas informações publicadas na Plataforma MEC RED são cosideradas públicas, visÃveis por qualquer pessoa.</p>
- <p>Não serão aceitos materiais com vocabulário ofensivo ou que invadam a privacidade de terceiros.</p>
- <p>Caso o usuário entenda que algum conteúdo disponibilizado viole um direito ou as cláusulas deste Termo de Uso, deverá notificar a Plataforma por meio da funcionalidade “Reportarâ€.</p>
- <p>O usuário poderá ter a sua conta removida em casos de violações sistemáticas destes Termos de Uso.</p>
- </div>
- </Grid>
+ <ExpansionPanelDetailsColorido>
+ <Grid container spacing={3}>
+ <Grid item xs={12} md={7}>
+ <div>
+ <p>O conteúdo disponibilizado pelo usuário é de inteira responsabilidade do usuário, não sendo a <strong>Plataforma Integrada de RED do MEC</strong> responsável por quaisquer fatos decorrentes de sua utilização.</p>
+ <p>Os recursos publicados devem ter cunho educacional, mantendo-se dentro do assunto em que estão inseridos, em conformidade com estes Termos de Uso.</p>
+ <p>Todas as informações publicadas na <strong>Plataforma Integrada de RED do MEC</strong>, como os metadados (descritivos dos recursos), comentários e discussões inseridas são consideradas públicas, visÃveis por qualquer pessoa, sem nenhum tipo de confidencialidade. Não serão aceitos materiais que contenham vocabulário ofensivo ou desrespeitoso a terceiros, incluindo ofensas, calúnias, injúrias e difamações. Também não serão permitidos materiais que invadam a privacidade de terceiros, que sejam ameaçadoras, preconceituosas ou racistas.</p>
+ <p>Caso o usuário entenda que alguma postagem, material, notÃcia, comentário ou outro conteúdo disponibilizado na <strong>Plataforma Integrada de RED do MEC</strong> violem algum direito seu, a legislação aplicável ou as cláusulas deste Termos de Uso, deverá notificar a <strong>Plataforma Integrada de RED do MEC</strong> por meio da funcionalidade “Reportar†ou, quando não houver, através do formulário de Contato.</p>
+ <p>O spam (mensagens não solicitadas) ou o abuso em comentários poderão ser ativamente prevenidos através do bloqueio de palavras e expressões predeterminadas, ou excluÃdos posteriormente, sendo cabÃvel a remoção da conta do usuário, no caso de tentativas de violação sistemática e repetitiva destes Termos de Uso, incluindo a reintrodução de material que já tenha sido previamente bloqueado ou excluÃdo.</p>
+ <p>Conteúdos com informações consideradas inadequadas pela <strong>Plataforma Integrada de RED do MEC</strong>, conforme as cláusulas destes Termos de Uso, poderão ser removidos por decisão do Ministério da Educação e o usuário será notificado através do seu e-mail de cadastro.</p>
+ <h6 style={{fontSize:"18px",marginBlock:"10px"}} >3.1 É permitido ao usuário:</h6>
+ <ul>
+ <li>
+ <p>Depositar (publicar) recurso ou material de sua autoria ou de autoria coletiva, com anuência dos demais autores, que esteja em domÃnio público, ou para o qual há anuência dos autores originais, desde que os dados sejam corretamente preenchidos nos campos descritivos (metadados) indicados para preenchimento das informações sobre os recursos;</p>
+ </li>
+ <li>
+ <p>Nos comentários, contatos e comunicações, é fundamental ser cortês e tratar os demais usuários com respeito;</p>
+ </li>
+ <li>
+ <p>O usuário poderá sugerir links para outros sites, desde que tenham relação direta com o assunto abordado.</p>
+ </li>
+ </ul>
+ <h6 style={{fontSize:"18px",marginBlock: "10px"}}>3.2 É vedado ao usuário:</h6>
+ <ul>
+ <li>
+ <p>Transmitir, exibir, enviar, ou de qualquer outra forma, disponibilizar conteúdo que contenha material pornográfico e/ou atividades ilegais relativas a menores de 18 anos (consoante o <AColorido href="http://www.planalto.gov.br/ccivil_03/leis/L8069.htm" target="_blank">Estatuto da Criança e do Adolescente</AColorido>), que invada a privacidade de terceiros, que tenha cunho comercial, viole os <AColorido href="https://www.ohchr.org/EN/UDHR/Pages/Language.aspx?LangID=por" target="_blank">Direitos Humanos</AColorido> ou seja ilegal, ofensivo, ameaçador, que incite a violência, seja vulgar, preconceituoso ou racista (como descrito nos artigos 138-140 do Código Penal Brasileiro), ou de qualquer forma seja contrário às cláusulas destes Termos de Uso;</p>
+ </li>
+ <li>
+ <p>Assumir a identidade de outra pessoa, fÃsica ou jurÃdica; forjar cabeçalhos, ou de qualquer outra forma manipular identificadores, a fim de disfarçar a origem de qualquer material contido na plataforma, com sentido de desmoralizar, desprestigiar ou se fazer passar pela <strong>Plataforma Integrada de RED do MEC</strong>;</p>
+ </li>
+ <li>
+ <p>Disponibilizar conteúdo em desconformidade com a <AColorido href="http://www.planalto.gov.br/ccivil_03/leis/L9610.htm" target="_blank">legislação de Direito Autoral</AColorido>, incluindo conteúdo que viole marca registrada, patente, segredo de negócio, direito autoral ou qualquer outro direito de terceiro; disponibilizar conteúdo com qualquer tipo de propaganda, material promocional, spam (mensagens não solicitadas), correntes ou esquemas de pirâmide;</p>
+ </li>
+ <li>
+ <p>Disponibilizar conteúdo que contenha vÃrus ou qualquer outro código, arquivo ou programa de computador, com o propósito de interromper, destruir ou limitar a funcionalidade de qualquer software, hardware ou equipamento de telecomunicações;</p>
+ </li>
+ <li>
+ <p>Interferir ou interromper os serviços, as redes ou os servidores conectados à plataforma de modo a dificultar a utilização e o aproveitamento dos serviços por outros usuários, bem como obter ou tentar obter acesso não autorizado à plataforma;</p>
+ </li>
+ <li>
+ <p>Pedir votos, mencionar número de candidato ou expressar qualquer outra manifestação que se caracterize como propaganda polÃtica ou que viole as normas eleitorais.</p>
+ </li>
+ </ul>
+ </div>
+ </Grid>
+ <Grid item xs={12} md={1}></Grid>
+ <Grid item xs={12} md={4}>
+ <div style={{color:"#00BCD4",fontSize:"18px"}}>
+ <p>BASICAMENTE,</p>
+ <p>O conteúdo disponibilizado pelo usuário é de sua inteira responsabilidade. Os recursos publicados tevem ter cunho educacional, em conformidade com estes Termos.</p>
+ <p>Todas informações publicadas na Plataforma MEC RED são cosideradas públicas, visÃveis por qualquer pessoa.</p>
+ <p>Não serão aceitos materiais com vocabulário ofensivo ou que invadam a privacidade de terceiros.</p>
+ <p>Caso o usuário entenda que algum conteúdo disponibilizado viole um direito ou as cláusulas deste Termo de Uso, deverá notificar a Plataforma por meio da funcionalidade “Reportarâ€.</p>
+ <p>O usuário poderá ter a sua conta removida em casos de violações sistemáticas destes Termos de Uso.</p>
+ </div>
</Grid>
+ </Grid>
</ExpansionPanelDetailsColorido>
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
- contrast={contrast}
- expandIcon={<ExpandMoreIcon style={contrast === "" ? {} : { color: "white" }} />}
+ expandIcon={<ExpandMoreIcon />}
aria-controls="panel4a-content"
id="panel4a-header"
>
- <TypographyColorido contrast={contrast}>4. Licença de uso do conteúdo</TypographyColorido>
+ <TypographyColorido >4. Licença de uso do conteúdo</TypographyColorido>
</ExpansionPanelSummaryColorido>
- <ExpansionPanelDetailsColorido contrast={contrast}>
- <Grid container spacing={3}>
- <Grid item xs={12} md={7}>
- <div>
- <p>A <strong>Plataforma Integrada de RED do MEC</strong>, entendida como obra intelectual em seu conjunto, é de titularidade do Ministério da Educação. Sua disponibilização ocorrerá de acordo com os termos da <AColorido contrast={contrast} href="https://creativecommons.org/licenses/by-sa/4.0/deed.pt_BR" target="_blank">Licença Pública Creative Commons do tipo CC BY-SA</AColorido>, exceto nos casos em que for indicado de outra forma.</p>
- <p>A licença CC BY SA é uma licença aberta e permite que seja feita cópia, redistribuição, adaptação e criação de obras derivadas, inclusive uso comercial, desde que o autor seja referenciado e que a licença da obra derivada seja também CC BY SA, garantindo o constante caráter aberto das produções.</p>
- <p>Aplica-se aos códigos de software desenvolvidos pela <strong>Plataforma Integrada de RED do MEC</strong> a <AColorido contrast={contrast} href="https://www.gnu.org/licenses/gpl.html" target="_blank">Licença Pública Geral Affero GNU GPL</AColorido> (veja a tradução livre <AColorido contrast={contrast} href="https://creativecommons.org/licenses/GPL/2.0/legalcode.pt" target="_blank">aqui</AColorido>), que visa garantir a liberdade de compartilhar e de modificar softwares livres.</p>
- <p>O usuário que utilizar a <strong>Plataforma Integrada de RED do MEC</strong> como repositório, ou seja, para armazenamento de conteúdo, garante que detém todos os direitos e autorizações para a publicação do conteúdo e deverá escolher uma das licenças Creative Commons elencadas no formulário no momento de cadastro do material. As licenças Creative Commons relacionadas abaixo serão aceitas na <strong>Plataforma Integrada de RED do MEC</strong>, pois garantem o devido crédito pela criação original do usuário e permitem as seguintes ações de uso:</p>
- <ul>
- <li>
- <p><strong>CC-BY</strong>: esta licença permite que outros distribuam, remixem, adaptem e criem a partir do seu trabalho, mesmo para fins comerciais, desde que lhe atribuam o devido crédito pela criação original.</p>
- </li>
- <li>
- <p><strong>CC-BY-SA</strong>: esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho, mesmo para fins comerciais, desde que lhe atribuam o devido crédito e que licenciem as novas criações sob termos idênticos.</p>
- </li>
- <li>
- <p><strong>CC-BY-NC</strong>: esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho para fins não comerciais e, embora os novos trabalhos tenham de lhe atribuir o devido crédito e não possam ser usados para fins comerciais, os usuários não têm de licenciar esses trabalhos derivados sob os mesmos termos.</p>
- </li>
- <li>
- <p><strong>CC-BY-NC-SA</strong>: esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho para fins não comerciais, desde que atribuam o devido crédito e que licenciem as novas criações sob termos idênticos.</p>
- </li>
- </ul>
- <p>Cabe ao Usuário verificar a compatibilidade da licença do material obtido na <strong>Plataforma Integrada de RED do MEC</strong> para utilizar em outras produções. Para consultar a compatibilidade das licenças Creative Commons, há uma ferramenta disponÃvel no site <AColorido contrast={contrast} href="http://aberta.org.br/compatibilidade/" target="_blank">Iniciativa Educação Aberta</AColorido>.</p>
- <p>O usuário da <strong>Plataforma Integrada de RED do MEC</strong> responde por todo o conteúdo publicado por meio de seu perfil, inclusive no que diz respeito à violação dos direitos autorais relacionados a tais postagens. Ao inserir um conteúdo de sua autoria para armazenamento, o usuário concorda e autoriza o licenciamento ao escolher uma das licenças abertas descritas no formulário de publicação, de forma a permitir não só o seu reconhecimento pleno de autoria, como também a possibilidade de replicação, reedição e reformulação de suas postagens por terceiros, com o objetivo de possibilitar o compartilhamento e a reutilização de conteúdo educacional.</p>
- <p>A <strong>Plataforma Integrada de RED do MEC</strong> poderá disponibilizar endereços eletrônicos de outros sÃtios externos, por meio de links, o que não significa que estes sejam de sua propriedade ou por ele operados. A presença de links para outros sites não implica relação de sociedade ou de supervisão da <strong>Plataforma Integrada de RED do MEC</strong> com esses sites e seus conteúdos. Os campos descritivos de cada recurso conterão informações especÃficas sobre as licenças dos mesmos. Cabe ao usuário verificar a licença de cada recurso.</p>
- <p>É vedado o uso não autorizado da obra ou seu uso em desconformidade com a legislação autoral e com os termos da licença mencionada.</p>
- </div>
- </Grid>
- <Grid item xs={12} md={1}></Grid>
- <Grid item xs={12} md={4}>
- <div style={{ color: "#00BCD4", fontSize: "18px" }}>
- <p>BASICAMENTE.</p>
- <p>A Plataforma MEC RED, por ser entendida como obra intelectual, possui uma licença aberta de uso que permite a reutilização e o compartilhamento do conteúdo, inclusive para uso comercial, desde que o autor seja referenciado. Além disso, no caso de obras derivadas, a licença deverá ser a mesma da obra original.</p>
- <p>Os códigos de software desenvolvidos para a Plataforma, possuem uma licença pública, de software livre, que garante a liberdade de compartilhamento e modificação dos mesmos.</p>
- <p>Os conteúdos publicados e armazenados na Plataforma pelos usuários, serão sempre abertos, sendo permitidas ações de edição e compartilhamento desde que o autor seja referenciado. Cabe ao usuário decidir se o recurso poderá ser utilizado somente para fins não comerciais e se os trabalhos derivados deverão ter os termos idênticos ao original, selecionando uma das opções de licença disponÃveis no momento de upload do recurso.</p>
- </div>
- </Grid>
+ <ExpansionPanelDetailsColorido>
+ <Grid container spacing={3}>
+ <Grid item xs={12} md={7}>
+ <div>
+ <p>A <strong>Plataforma Integrada de RED do MEC</strong>, entendida como obra intelectual em seu conjunto, é de titularidade do Ministério da Educação. Sua disponibilização ocorrerá de acordo com os termos da <AColorido href="https://creativecommons.org/licenses/by-sa/4.0/deed.pt_BR" target="_blank">Licença Pública Creative Commons do tipo CC BY-SA</AColorido>, exceto nos casos em que for indicado de outra forma.</p>
+ <p>A licença CC BY SA é uma licença aberta e permite que seja feita cópia, redistribuição, adaptação e criação de obras derivadas, inclusive uso comercial, desde que o autor seja referenciado e que a licença da obra derivada seja também CC BY SA, garantindo o constante caráter aberto das produções.</p>
+ <p>Aplica-se aos códigos de software desenvolvidos pela <strong>Plataforma Integrada de RED do MEC</strong> a <AColorido href="https://www.gnu.org/licenses/gpl.html" target="_blank">Licença Pública Geral Affero GNU GPL</AColorido> (veja a tradução livre <AColorido href="https://creativecommons.org/licenses/GPL/2.0/legalcode.pt" target="_blank">aqui</AColorido>), que visa garantir a liberdade de compartilhar e de modificar softwares livres.</p>
+ <p>O usuário que utilizar a <strong>Plataforma Integrada de RED do MEC</strong> como repositório, ou seja, para armazenamento de conteúdo, garante que detém todos os direitos e autorizações para a publicação do conteúdo e deverá escolher uma das licenças Creative Commons elencadas no formulário no momento de cadastro do material. As licenças Creative Commons relacionadas abaixo serão aceitas na <strong>Plataforma Integrada de RED do MEC</strong>, pois garantem o devido crédito pela criação original do usuário e permitem as seguintes ações de uso:</p>
+ <ul>
+ <li>
+ <p><strong>CC-BY</strong>: esta licença permite que outros distribuam, remixem, adaptem e criem a partir do seu trabalho, mesmo para fins comerciais, desde que lhe atribuam o devido crédito pela criação original.</p>
+ </li>
+ <li>
+ <p><strong>CC-BY-SA</strong>: esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho, mesmo para fins comerciais, desde que lhe atribuam o devido crédito e que licenciem as novas criações sob termos idênticos.</p>
+ </li>
+ <li>
+ <p><strong>CC-BY-NC</strong>: esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho para fins não comerciais e, embora os novos trabalhos tenham de lhe atribuir o devido crédito e não possam ser usados para fins comerciais, os usuários não têm de licenciar esses trabalhos derivados sob os mesmos termos.</p>
+ </li>
+ <li>
+ <p><strong>CC-BY-NC-SA</strong>: esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho para fins não comerciais, desde que atribuam o devido crédito e que licenciem as novas criações sob termos idênticos.</p>
+ </li>
+ </ul>
+ <p>Cabe ao Usuário verificar a compatibilidade da licença do material obtido na <strong>Plataforma Integrada de RED do MEC</strong> para utilizar em outras produções. Para consultar a compatibilidade das licenças Creative Commons, há uma ferramenta disponÃvel no site <AColorido href="http://aberta.org.br/compatibilidade/" target="_blank">Iniciativa Educação Aberta</AColorido>.</p>
+ <p>O usuário da <strong>Plataforma Integrada de RED do MEC</strong> responde por todo o conteúdo publicado por meio de seu perfil, inclusive no que diz respeito à violação dos direitos autorais relacionados a tais postagens. Ao inserir um conteúdo de sua autoria para armazenamento, o usuário concorda e autoriza o licenciamento ao escolher uma das licenças abertas descritas no formulário de publicação, de forma a permitir não só o seu reconhecimento pleno de autoria, como também a possibilidade de replicação, reedição e reformulação de suas postagens por terceiros, com o objetivo de possibilitar o compartilhamento e a reutilização de conteúdo educacional.</p>
+ <p>A <strong>Plataforma Integrada de RED do MEC</strong> poderá disponibilizar endereços eletrônicos de outros sÃtios externos, por meio de links, o que não significa que estes sejam de sua propriedade ou por ele operados. A presença de links para outros sites não implica relação de sociedade ou de supervisão da <strong>Plataforma Integrada de RED do MEC</strong> com esses sites e seus conteúdos. Os campos descritivos de cada recurso conterão informações especÃficas sobre as licenças dos mesmos. Cabe ao usuário verificar a licença de cada recurso.</p>
+ <p>É vedado o uso não autorizado da obra ou seu uso em desconformidade com a legislação autoral e com os termos da licença mencionada.</p>
+ </div>
</Grid>
+ <Grid item xs={12} md={1}></Grid>
+ <Grid item xs={12} md={4}>
+ <div style={{color:"#00BCD4",fontSize:"18px"}}>
+ <p>BASICAMENTE.</p>
+ <p>A Plataforma MEC RED, por ser entendida como obra intelectual, possui uma licença aberta de uso que permite a reutilização e o compartilhamento do conteúdo, inclusive para uso comercial, desde que o autor seja referenciado. Além disso, no caso de obras derivadas, a licença deverá ser a mesma da obra original.</p>
+ <p>Os códigos de software desenvolvidos para a Plataforma, possuem uma licença pública, de software livre, que garante a liberdade de compartilhamento e modificação dos mesmos.</p>
+ <p>Os conteúdos publicados e armazenados na Plataforma pelos usuários, serão sempre abertos, sendo permitidas ações de edição e compartilhamento desde que o autor seja referenciado. Cabe ao usuário decidir se o recurso poderá ser utilizado somente para fins não comerciais e se os trabalhos derivados deverão ter os termos idênticos ao original, selecionando uma das opções de licença disponÃveis no momento de upload do recurso.</p>
+ </div>
+ </Grid>
+ </Grid>
</ExpansionPanelDetailsColorido>
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
- contrast={contrast}
- expandIcon={<ExpandMoreIcon style={contrast === "" ? {} : { color: "white" }} />}
+ expandIcon={<ExpandMoreIcon />}
aria-controls="panel5a-content"
id="panel5a-header"
>
- <TypographyColorido contrast={contrast}>5. Práticas de uso e armazenamento</TypographyColorido>
- </ExpansionPanelSummaryColorido >
- <ExpansionPanelDetailsColorido contrast={contrast}>
- <Grid container spacing={3}>
- <Grid item xs={12} md={7}>
- <div>
- <p>A depender da capacidade de espaço no servidor, a <strong>Plataforma Integrada de RED do MEC</strong> poderá retirar conteúdos armazenados na plataforma, observados os critérios de antiguidade e do tamanho dos arquivos disponibilizados, mediante notificação e justificativa ao usuário.</p>
- </div>
- </Grid>
- <Grid item xs={12} md={1}></Grid>
- <Grid item xs={12} md={4}>
- <div style={{ color: "#00BCD4", fontSize: "18px" }}>
- <p>BASICAMENTE,</p>
- <p>O usuário será notificado caso algum conteúdo tenha que ser retirado da Plataforma por falta de espaço no servidor.</p>
- </div>
- </Grid>
+ <TypographyColorido >5. Práticas de uso e armazenamento</TypographyColorido>
+ </ExpansionPanelSummaryColorido>
+ <ExpansionPanelDetailsColorido>
+ <Grid container spacing={3}>
+ <Grid item xs={12} md={7}>
+ <div>
+ <p>A depender da capacidade de espaço no servidor, a <strong>Plataforma Integrada de RED do MEC</strong> poderá retirar conteúdos armazenados na plataforma, observados os critérios de antiguidade e do tamanho dos arquivos disponibilizados, mediante notificação e justificativa ao usuário.</p>
+ </div>
</Grid>
+ <Grid item xs={12} md={1}></Grid>
+ <Grid item xs={12} md={4}>
+ <div style={{color:"#00BCD4",fontSize:"18px"}}>
+ <p>BASICAMENTE,</p>
+ <p>O usuário será notificado caso algum conteúdo tenha que ser retirado da Plataforma por falta de espaço no servidor.</p>
+ </div>
+ </Grid>
+ </Grid>
</ExpansionPanelDetailsColorido>
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
- contrast={contrast}
- expandIcon={<ExpandMoreIcon style={contrast === "" ? {} : { color: "white" }} />}
+ expandIcon={<ExpandMoreIcon />}
aria-controls="panel6a-content"
id="panel6a-header"
>
- <TypographyColorido contrast={contrast}>6. Privacidade da informação</TypographyColorido>
+ <TypographyColorido >6. Privacidade da informação</TypographyColorido>
</ExpansionPanelSummaryColorido>
- <ExpansionPanelDetailsColorido contrast={contrast}>
- <Grid container spacing={3}>
- <Grid item xs={12} md={7}>
- <div >
- <p>A <strong>Plataforma Integrada de RED do MEC</strong> tomará todas as medidas possÃveis para manter a confidencialidade e a segurança de suas informações. No entanto, a <strong>Plataforma Integrada de RED do MEC</strong> não responderá por prejuÃzos que possam ser derivados da violação dessas medidas por parte de terceiros que subvertam os sistemas de segurança para acessar as informações de Usuários.</p>
- <p>A <strong>Plataforma Integrada de RED do MEC</strong> solicitará alguns dados pessoais para seu cadastro. Além disso, dados sobre a interação dos usuários e seu comportamento na plataforma são coletados de maneira automática. Esses dados nunca serão vendidos, alugados, trocados ou fornecidos para fins comerciais. No entanto, o MEC poderá colaborar com instituições públicas parceiras, como universidades, para análise desses dados bem como de qualquer conteúdo da plataforma para para fins de pesquisa, divulgação e melhoria dos serviços. Dados pessoais que possam identificá-lo nunca serão compartilhados.</p>
- <p>Dados que não identificam o usuário serão armazenados indefinidamente para fins de pesquisa.</p>
- </div>
- </Grid>
- <Grid item xs={12} md={1}></Grid>
- <Grid item xs={12} md={4}>
- <div style={{ color: "#00BCD4", fontSize: "18px" }}>
- <p>BASICAMENTE,</p>
- <p>Para manter a confidencialidade e a segurança dos dados, a Plataforma MEC RED tomará todas as medidas possÃveis.</p>
- <p>Os dados sobre interação e comportamento dos usuários nunca serão comercializados, mas poderão ser analisados para fins de pesquisa, divulgação e melhorias, sem a identificação dos usuários.</p>
- </div>
- </Grid>
+ <ExpansionPanelDetailsColorido>
+ <Grid container spacing={3}>
+ <Grid item xs={12} md={7}>
+ <div >
+ <p>A <strong>Plataforma Integrada de RED do MEC</strong> tomará todas as medidas possÃveis para manter a confidencialidade e a segurança de suas informações. No entanto, a <strong>Plataforma Integrada de RED do MEC</strong> não responderá por prejuÃzos que possam ser derivados da violação dessas medidas por parte de terceiros que subvertam os sistemas de segurança para acessar as informações de Usuários.</p>
+ <p>A <strong>Plataforma Integrada de RED do MEC</strong> solicitará alguns dados pessoais para seu cadastro. Além disso, dados sobre a interação dos usuários e seu comportamento na plataforma são coletados de maneira automática. Esses dados nunca serão vendidos, alugados, trocados ou fornecidos para fins comerciais. No entanto, o MEC poderá colaborar com instituições públicas parceiras, como universidades, para análise desses dados bem como de qualquer conteúdo da plataforma para para fins de pesquisa, divulgação e melhoria dos serviços. Dados pessoais que possam identificá-lo nunca serão compartilhados.</p>
+ <p>Dados que não identificam o usuário serão armazenados indefinidamente para fins de pesquisa.</p>
+ </div>
+ </Grid>
+ <Grid item xs={12} md={1}></Grid>
+ <Grid item xs={12} md={4}>
+ <div style={{color:"#00BCD4",fontSize:"18px"}}>
+ <p>BASICAMENTE,</p>
+ <p>Para manter a confidencialidade e a segurança dos dados, a Plataforma MEC RED tomará todas as medidas possÃveis.</p>
+ <p>Os dados sobre interação e comportamento dos usuários nunca serão comercializados, mas poderão ser analisados para fins de pesquisa, divulgação e melhorias, sem a identificação dos usuários.</p>
+ </div>
</Grid>
+ </Grid>
</ExpansionPanelDetailsColorido>
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
- contrast={contrast}
- expandIcon={<ExpandMoreIcon style={contrast === "" ? {} : { color: "white" }} />}
+ expandIcon={<ExpandMoreIcon />}
aria-controls="panel7a-content"
id="panel7a-header"
>
- <TypographyColorido contrast={contrast}>7. Violação no sistema ou na base de dados</TypographyColorido>
+ <TypographyColorido >7. Violação no sistema ou na base de dados</TypographyColorido>
</ExpansionPanelSummaryColorido>
- <ExpansionPanelDetailsColorido contrast={contrast}>
+ <ExpansionPanelDetailsColorido>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div >
@@ -339,7 +335,7 @@ export default function SimpleExpansionPanel({ contrast }) {
</Grid>
<Grid item xs={12} md={1}></Grid>
<Grid item xs={12} md={4}>
- <div style={{ color: "#00BCD4", fontSize: "18px" }}>
+ <div style={{color:"#00BCD4",fontSize:"18px"}}>
<p>BASICAMENTE,</p>
<p>Serão aplicadas as sanções previstas ou as ações legais ao responsável por intromissão, ou tentativa de intromissão, na Plataforma MEC RED.</p>
</div>
@@ -349,178 +345,172 @@ export default function SimpleExpansionPanel({ contrast }) {
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
- contrast={contrast}
- expandIcon={<ExpandMoreIcon style={contrast === "" ? {} : { color: "white" }} />}
+ expandIcon={<ExpandMoreIcon />}
aria-controls="panel8a-content"
id="panel8a-header"
>
- <TypographyColorido contrast={contrast}>8. Sanções</TypographyColorido>
+ <TypographyColorido >8. Sanções</TypographyColorido>
</ExpansionPanelSummaryColorido>
- <ExpansionPanelDetailsColorido contrast={contrast}>
- <Grid container spacing={3}>
- <Grid item xs={12} md={7}>
- <div >
- <p>Sem prejuÃzo de outras medidas, a <strong>Plataforma Integrada de RED do MEC</strong> poderá advertir, bloquear, desativar ou remover, temporária ou definitivamente, a conta e conteúdos disponibilizados por um usuário, em qualquer momento, e iniciar as ações legais cabÃveis caso:</p>
- <ul>
- <li>
- <p>o usuário não cumprir qualquer dispositivo destes Termos de Uso;</p>
- </li>
- <li>
- <p>o usuário praticar atos fraudulentos ou dolosos;</p>
- </li>
- <li>
- <p>o MEC entender que as postagens, o conteúdo disponibilizado ou qualquer atitude do usuário tenham causado algum dano a terceiros ou à própria Plataforma, ou tenham a potencialidade de assim o fazer.</p>
- </li>
- </ul>
- </div>
- </Grid>
- <Grid item xs={12} md={1}></Grid>
- <Grid item xs={12} md={4}>
- <div style={{ color: "#00BCD4", fontSize: "18px" }}>
- <p>BASICAMENTE,</p>
- <p>No caso do usuário não cumprir qualquer item destes Termos, praticar atos fraudulentos ou dolosos ou causar dano a alguém ou à Plataforma MEC RED, sua conta poderá ser bloqueada, desativada ou removida, em caráter temporário ou definitivo.</p>
- </div>
- </Grid>
+ <ExpansionPanelDetailsColorido>
+ <Grid container spacing={3}>
+ <Grid item xs={12} md={7}>
+ <div >
+ <p>Sem prejuÃzo de outras medidas, a <strong>Plataforma Integrada de RED do MEC</strong> poderá advertir, bloquear, desativar ou remover, temporária ou definitivamente, a conta e conteúdos disponibilizados por um usuário, em qualquer momento, e iniciar as ações legais cabÃveis caso:</p>
+ <ul>
+ <li>
+ <p>o usuário não cumprir qualquer dispositivo destes Termos de Uso;</p>
+ </li>
+ <li>
+ <p>o usuário praticar atos fraudulentos ou dolosos;</p>
+ </li>
+ <li>
+ <p>o MEC entender que as postagens, o conteúdo disponibilizado ou qualquer atitude do usuário tenham causado algum dano a terceiros ou à própria Plataforma, ou tenham a potencialidade de assim o fazer.</p>
+ </li>
+ </ul>
+ </div>
+ </Grid>
+ <Grid item xs={12} md={1}></Grid>
+ <Grid item xs={12} md={4}>
+ <div style={{color:"#00BCD4",fontSize:"18px"}}>
+ <p>BASICAMENTE,</p>
+ <p>No caso do usuário não cumprir qualquer item destes Termos, praticar atos fraudulentos ou dolosos ou causar dano a alguém ou à Plataforma MEC RED, sua conta poderá ser bloqueada, desativada ou removida, em caráter temporário ou definitivo.</p>
+ </div>
</Grid>
+ </Grid>
</ExpansionPanelDetailsColorido>
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
- contrast={contrast}
- expandIcon={<ExpandMoreIcon style={contrast === "" ? {} : { color: "white" }} />}
+ expandIcon={<ExpandMoreIcon />}
aria-controls="panel9a-content"
id="panel9a-header"
>
- <TypographyColorido contrast={contrast}>9. Limitações de responsabilidade</TypographyColorido>
+ <TypographyColorido >9. Limitações de responsabilidade</TypographyColorido>
</ExpansionPanelSummaryColorido>
- <ExpansionPanelDetailsColorido contrast={contrast}>
- <Grid container spacing={3}>
- <Grid item xs={12} md={7}>
- <div >
- <p>Em nenhuma situação a <strong>Plataforma Integrada de RED do MEC</strong> e o Ministério da Educação serão responsáveis por quaisquer danos, prejuÃzos ou outro efeito, direto ou indireto, relacionados ao uso, por parte de seus usuários, leitores ou de qualquer outra pessoa, deste sÃtio, de seu conteúdo ou de qualquer outro website mencionado.</p>
- <p>O usuário reconhece que será integralmente responsável pelos materiais enviados à <strong>Plataforma Integrada de RED do MEC</strong> e se compromete a responder por quaisquer reivindicações, demandas, penalidades e todos os danos, perdas e despesas, causados à <strong>Plataforma Integrada de RED do MEC</strong>.</p>
- <p>Todo autor de conteúdo exibido na <strong>Plataforma Integrada de RED do MEC</strong> retém os seus direitos e responsabilidades autorais, nos termos da Lei n. 9.610/1998, sem prejuÃzo dos termos de licenciamento de livre uso, conforme exposto nestes Termos de Uso, no item “Licença de uso do conteúdoâ€.</p>
- <p>Se o usuário verificar que qualquer comentário ou participação na <strong>Plataforma Integrada de RED do MEC</strong> infringem um direito de sua titularidade ou de um terceiro, deverá entrar em contato imediatamente na forma indicada neste mesmo documento, no item “Como reportar violaçõesâ€.</p>
- </div>
- </Grid>
- <Grid item xs={12} md={1}></Grid>
- <Grid item xs={12} md={4}>
- <div style={{ color: "#00BCD4", fontSize: "18px" }}>
- <p>BASICAMENTE,</p>
- <p>A Plataforma MEC RED e o Ministério da Educação não serão responsáveis por danos, prejuÃzos ou outro efeito relacionados ao uso da Plataforma por parte de qualquer pessoa.</p>
- <p>O usuário é integralmente responsável pelos materiais enviados e por qualquer conteúdo publicado, se comprometendo a responder por eles, quando necessário.</p>
- </div>
- </Grid>
+ <ExpansionPanelDetailsColorido>
+ <Grid container spacing={3}>
+ <Grid item xs={12} md={7}>
+ <div >
+ <p>Em nenhuma situação a <strong>Plataforma Integrada de RED do MEC</strong> e o Ministério da Educação serão responsáveis por quaisquer danos, prejuÃzos ou outro efeito, direto ou indireto, relacionados ao uso, por parte de seus usuários, leitores ou de qualquer outra pessoa, deste sÃtio, de seu conteúdo ou de qualquer outro website mencionado.</p>
+ <p>O usuário reconhece que será integralmente responsável pelos materiais enviados à <strong>Plataforma Integrada de RED do MEC</strong> e se compromete a responder por quaisquer reivindicações, demandas, penalidades e todos os danos, perdas e despesas, causados à <strong>Plataforma Integrada de RED do MEC</strong>.</p>
+ <p>Todo autor de conteúdo exibido na <strong>Plataforma Integrada de RED do MEC</strong> retém os seus direitos e responsabilidades autorais, nos termos da Lei n. 9.610/1998, sem prejuÃzo dos termos de licenciamento de livre uso, conforme exposto nestes Termos de Uso, no item “Licença de uso do conteúdoâ€.</p>
+ <p>Se o usuário verificar que qualquer comentário ou participação na <strong>Plataforma Integrada de RED do MEC</strong> infringem um direito de sua titularidade ou de um terceiro, deverá entrar em contato imediatamente na forma indicada neste mesmo documento, no item “Como reportar violaçõesâ€.</p>
+ </div>
</Grid>
+ <Grid item xs={12} md={1}></Grid>
+ <Grid item xs={12} md={4}>
+ <div style={{color:"#00BCD4",fontSize:"18px"}}>
+ <p>BASICAMENTE,</p>
+ <p>A Plataforma MEC RED e o Ministério da Educação não serão responsáveis por danos, prejuÃzos ou outro efeito relacionados ao uso da Plataforma por parte de qualquer pessoa.</p>
+ <p>O usuário é integralmente responsável pelos materiais enviados e por qualquer conteúdo publicado, se comprometendo a responder por eles, quando necessário.</p>
+ </div>
+ </Grid>
+ </Grid>
</ExpansionPanelDetailsColorido>
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
- contrast={contrast}
- expandIcon={<ExpandMoreIcon style={contrast === "" ? {} : { color: "white" }} />}
+ expandIcon={<ExpandMoreIcon />}
aria-controls="panel10a-content"
id="panel10a-header"
>
- <TypographyColorido contrast={contrast}>10.Inexistência de vÃnculo</TypographyColorido>
+ <TypographyColorido >10.Inexistência de vÃnculo</TypographyColorido>
</ExpansionPanelSummaryColorido>
- <ExpansionPanelDetailsColorido contrast={contrast}>
- <Grid container spacing={3}>
- <Grid item xs={12} md={7}>
- <div >
- <p>A adesão a estes Termos de Uso pelo usuário não gera nenhum contrato, mandato, franquia ou vÃnculo de tipo trabalhista, societário, de parceria ou associativo entre a <strong>Plataforma Integrada de RED do MEC</strong> e o usuário.</p>
- </div>
- </Grid>
- <Grid item xs={12} md={1}></Grid>
- <Grid item xs={12} md={4}>
- <div style={{ color: "#00BCD4", fontSize: "18px" }}>
- <p>BASICAMENTE,</p>
- <p>Não há nenhum tipo de vÃnculo (trabalhista, parceria, etc) entre a Plataforma e o usuário.</p>
- </div>
- </Grid>
+ <ExpansionPanelDetailsColorido>
+ <Grid container spacing={3}>
+ <Grid item xs={12} md={7}>
+ <div >
+ <p>A adesão a estes Termos de Uso pelo usuário não gera nenhum contrato, mandato, franquia ou vÃnculo de tipo trabalhista, societário, de parceria ou associativo entre a <strong>Plataforma Integrada de RED do MEC</strong> e o usuário.</p>
+ </div>
</Grid>
+ <Grid item xs={12} md={1}></Grid>
+ <Grid item xs={12} md={4}>
+ <div style={{color:"#00BCD4",fontSize:"18px"}}>
+ <p>BASICAMENTE,</p>
+ <p>Não há nenhum tipo de vÃnculo (trabalhista, parceria, etc) entre a Plataforma e o usuário.</p>
+ </div>
+ </Grid>
+ </Grid>
</ExpansionPanelDetailsColorido>
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
- contrast={contrast}
- expandIcon={<ExpandMoreIcon style={contrast === "" ? {} : { color: "white" }} />}
+ expandIcon={<ExpandMoreIcon />}
aria-controls="panel11a-content"
id="panel11a-header"
>
- <TypographyColorido contrast={contrast}>11. Como reportar violações</TypographyColorido>
+ <TypographyColorido >11. Como reportar violações</TypographyColorido>
</ExpansionPanelSummaryColorido>
- <ExpansionPanelDetailsColorido contrast={contrast}>
- <Grid container spacing={3}>
- <Grid item xs={12} md={7}>
- <div >
- <p>Nem todo o conteúdo disponibilizado pelo usuário nas áreas de comentário e debates é lido pela administração da <strong>Plataforma Integrada de RED do MEC</strong>.</p>
- <p>Se algum artigo, notÃcia, comentário ou outro conteúdo da <strong>Plataforma Integrada de RED do MEC</strong> violar qualquer direito do usuário, de terceiros ou a legislação aplicável, o usuário poderá usar a funcionalidade "Reportar" nas páginas que houver essa opção ou, quando não houver, entrar em contato com a administração da <strong>Plataforma Integrada de RED do MEC</strong> pelo formulário de “Contatoâ€, mencionando de forma especÃfica e detalhada a violação.</p>
- <p>De posse das informações, a <strong>Plataforma Integrada de RED do MEC</strong> poderá analisar e resolver a questão tão breve quanto possÃvel. Caso a informação esteja incompleta, ou com detalhamento insuficiente, a <strong>Plataforma Integrada de RED do MEC</strong> poderá entrar em contato para solicitar a complementação, possivelmente atrasando a providência desejada.</p>
- </div>
- </Grid>
- <Grid item xs={12} md={1}></Grid>
- <Grid item xs={12} md={4}>
- <div style={{ color: "#00BCD4", fontSize: "18px" }}>
- <p>BASICAMENTE,</p>
- <p>O usuário poderá reportar,utilizando a funcionalidade “Reportar†ou pelo formulário de “Contatoâ€, qualquer tipo de conteúdo publicado na Plataforma MEC RED que viole os direitos dos usuários, de terceiros ou a legislação aplicável.</p>
- </div>
- </Grid>
+ <ExpansionPanelDetailsColorido>
+ <Grid container spacing={3}>
+ <Grid item xs={12} md={7}>
+ <div >
+ <p>Nem todo o conteúdo disponibilizado pelo usuário nas áreas de comentário e debates é lido pela administração da <strong>Plataforma Integrada de RED do MEC</strong>.</p>
+ <p>Se algum artigo, notÃcia, comentário ou outro conteúdo da <strong>Plataforma Integrada de RED do MEC</strong> violar qualquer direito do usuário, de terceiros ou a legislação aplicável, o usuário poderá usar a funcionalidade "Reportar" nas páginas que houver essa opção ou, quando não houver, entrar em contato com a administração da <strong>Plataforma Integrada de RED do MEC</strong> pelo formulário de “Contatoâ€, mencionando de forma especÃfica e detalhada a violação.</p>
+ <p>De posse das informações, a <strong>Plataforma Integrada de RED do MEC</strong> poderá analisar e resolver a questão tão breve quanto possÃvel. Caso a informação esteja incompleta, ou com detalhamento insuficiente, a <strong>Plataforma Integrada de RED do MEC</strong> poderá entrar em contato para solicitar a complementação, possivelmente atrasando a providência desejada.</p>
+ </div>
</Grid>
+ <Grid item xs={12} md={1}></Grid>
+ <Grid item xs={12} md={4}>
+ <div style={{color:"#00BCD4",fontSize:"18px"}}>
+ <p>BASICAMENTE,</p>
+ <p>O usuário poderá reportar,utilizando a funcionalidade “Reportar†ou pelo formulário de “Contatoâ€, qualquer tipo de conteúdo publicado na Plataforma MEC RED que viole os direitos dos usuários, de terceiros ou a legislação aplicável.</p>
+ </div>
+ </Grid>
+ </Grid>
</ExpansionPanelDetailsColorido>
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
- contrast={contrast}
- expandIcon={<ExpandMoreIcon style={contrast === "" ? {} : { color: "white" }} />}
+ expandIcon={<ExpandMoreIcon />}
aria-controls="panel12a-content"
id="panel12a-header"
>
- <TypographyColorido contrast={contrast}>12. Modificações nos Termos de Uso</TypographyColorido>
+ <TypographyColorido >12. Modificações nos Termos de Uso</TypographyColorido>
</ExpansionPanelSummaryColorido>
- <ExpansionPanelDetailsColorido contrast={contrast}>
- <Grid container spacing={3}>
- <Grid item xs={12} md={7}>
- <div >
- <p>A <strong>Plataforma Integrada de RED do MEC</strong> poderá alterar, a qualquer tempo, estes Termos de Uso, mediante declaração pública no site, visando seu aprimoramento e melhoria dos serviços prestados. Os novos Termos de Uso entrarão em vigor a partir de sua publicação na plataforma. Usuários cadastrados receberão notificação dessa alteração no e-mail de cadastro e haverá divulgação/chamada na página principal do Sistema. No prazo de 72 (setenta e duas) horas, contadas a partir da publicação das modificações, o usuário poderá comunicar-se com a <strong>Plataforma Integrada de RED do MEC</strong>, caso não concorde com os novos Termos de Uso. Nesse caso, a conta do usuário será desativada. Não havendo manifestações no prazo estipulado, entender-se-á que o Usuário aceitou tacitamente os novos Termos de Uso.</p>
- </div>
- </Grid>
- <Grid item xs={12} md={1}></Grid>
- <Grid item xs={12} md={4}>
- <div style={{ color: "#00BCD4", fontSize: "18px" }}>
- <p>BASICAMENTE,</p>
- <p>Com o objetivo de melhorar os serviços prestados, estes Termos podem ser alterados, a qualquer tempo. Caso ocorra, os usuários serão notificados e terão um perÃodo para se manifestar em relação à s alterações.</p>
- </div>
- </Grid>
+ <ExpansionPanelDetailsColorido>
+ <Grid container spacing={3}>
+ <Grid item xs={12} md={7}>
+ <div >
+ <p>A <strong>Plataforma Integrada de RED do MEC</strong> poderá alterar, a qualquer tempo, estes Termos de Uso, mediante declaração pública no site, visando seu aprimoramento e melhoria dos serviços prestados. Os novos Termos de Uso entrarão em vigor a partir de sua publicação na plataforma. Usuários cadastrados receberão notificação dessa alteração no e-mail de cadastro e haverá divulgação/chamada na página principal do Sistema. No prazo de 72 (setenta e duas) horas, contadas a partir da publicação das modificações, o usuário poderá comunicar-se com a <strong>Plataforma Integrada de RED do MEC</strong>, caso não concorde com os novos Termos de Uso. Nesse caso, a conta do usuário será desativada. Não havendo manifestações no prazo estipulado, entender-se-á que o Usuário aceitou tacitamente os novos Termos de Uso.</p>
+ </div>
+ </Grid>
+ <Grid item xs={12} md={1}></Grid>
+ <Grid item xs={12} md={4}>
+ <div style={{color:"#00BCD4",fontSize:"18px"}}>
+ <p>BASICAMENTE,</p>
+ <p>Com o objetivo de melhorar os serviços prestados, estes Termos podem ser alterados, a qualquer tempo. Caso ocorra, os usuários serão notificados e terão um perÃodo para se manifestar em relação à s alterações.</p>
+ </div>
</Grid>
+ </Grid>
</ExpansionPanelDetailsColorido>
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
- contrast={contrast}
- expandIcon={<ExpandMoreIcon style={contrast === "" ? {} : { color: "white" }} />}
+ expandIcon={<ExpandMoreIcon />}
aria-controls="panel13a-content"
id="panel13a-header"
>
- <TypographyColorido contrast={contrast}>13. Foro</TypographyColorido>
+ <TypographyColorido >13. Foro</TypographyColorido>
</ExpansionPanelSummaryColorido>
- <ExpansionPanelDetailsColorido contrast={contrast}>
- <Grid container spacing={3}>
- <Grid item xs={12} md={7}>
- <div >
- <p>Para dirimir dúvidas ou litÃgios referentes à interpretação e ao cumprimento destes Termos de Uso, as partes se submeterão ao Foro da Justiça Federal, Seção Judiciária do Distrito Federal.</p>
- </div>
- </Grid>
- <Grid item xs={12} md={1}></Grid>
- <Grid item xs={12} md={4}>
- <div style={{ color: "#00BCD4", fontSize: "18px" }}>
- <p>BASICAMENTE,</p>
- <p>Em caso de dúvidas ou litÃgios, é preciso recorrer ao Foro da Justiça Federal.</p>
- </div>
- </Grid>
+ <ExpansionPanelDetailsColorido>
+ <Grid container spacing={3}>
+ <Grid item xs={12} md={7}>
+ <div >
+ <p>Para dirimir dúvidas ou litÃgios referentes à interpretação e ao cumprimento destes Termos de Uso, as partes se submeterão ao Foro da Justiça Federal, Seção Judiciária do Distrito Federal.</p>
+ </div>
+ </Grid>
+ <Grid item xs={12} md={1}></Grid>
+ <Grid item xs={12} md={4}>
+ <div style={{color:"#00BCD4",fontSize:"18px"}}>
+ <p>BASICAMENTE,</p>
+ <p>Em caso de dúvidas ou litÃgios, é preciso recorrer ao Foro da Justiça Federal.</p>
+ </div>
</Grid>
+ </Grid>
</ExpansionPanelDetailsColorido>
</ExpansionPanelTeste>
- </div >
+ </div>
);
}
diff --git a/src/Components/Firulas.js b/src/Components/Firulas.js
index 72dd44f1..6a368a11 100644
--- a/src/Components/Firulas.js
+++ b/src/Components/Firulas.js
@@ -1,84 +1,38 @@
-import React, { useState, useContext } from 'react';
-import { Store } from '../Store'
+import React, {useState} from 'react'
import styled from 'styled-components'
import Rating from '@material-ui/lab/Rating';
import StarBorderIcon from '@material-ui/icons/StarBorder';
-import { LikeCounter, ButtonNoWidth } from '../Components/ResourceCardFunction.js'
+import {LikeCounter, ButtonNoWidth} from '../Components/ResourceCardFunction.js'
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 {putRequest} from './HelperFunctions/getAxiosConfig'
-export default function Firulas(props) {
- const { state } = useContext(Store);
- const [liked, toggleLiked] = useState(props.liked)
- const [likesCount, setLikesCount] = useState(props.likesCount)
+export default function Firulas (props) {
+ const [liked, setLiked] = useState(props.liked)
- const [signUpOpen, setSignUp] = useState(false)
- 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)
+ function handleSuccess (data) {
+ setLiked(!liked)
}
-
const handleLike = () => {
- if (!state.currentUser.id) {
- handleLogin()
- }
- else {
- const url = `/learning_objects/${props.recursoId}/like/`
-
- putRequest(url, {}, handleSuccessLike, (error) => { console.log(error) })
- }
- }
-
- const handleLogin = () => {
- setLogin(!loginOpen)
- }
-
- const handleSignUp = () => {
- setSignUp(!signUpOpen)
- }
-
- function toggleLoginSnackbar(reason) {
- if (reason === 'clickaway') {
- return;
- }
- handleSuccessfulLogin(false);
+ putRequest(`/learning_objects/${props.recursoId}/like/`, {}, handleSuccess, (error) => {console.log(error)})
}
return (
- <ConteinerFirulas style={props.contrast === "" ? {} : {color: "white"}}>
- <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}
- />
- <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>
+ <ConteinerFirulas>
<Rating
- className={`${props.contrast}IconColor`}
- name="customized-empty"
- value={props.rating}
- readOnly
- emptyIcon={<StarBorderIcon className={`${props.contrast}IconColor`} fontSize="inherit"/>}
+ name="customized-empty"
+ value={props.rating*10}
+ precision={0.5}
+ readOnly
+ style={{color:"#666", marginRight : "20px"}}
+ emptyIcon={<StarBorderIcon fontSize="inherit" />}
/>
- <LikeCounter>
- <span>{likesCount}</span>
+ <LikeCounter style={{marginLeft : "-3px", display : "flex", alignItems : "center"}}>
+ <span>{props.likesCount}</span>
+
<ButtonNoWidth onClick={handleLike}>
- <FavoriteIcon className={`${props.contrast}LinkColor`} style={ props.contrast === "" ? {color: liked ? "red" : "#666"} : {color: liked ? "red" : "white"} } />
+ <FavoriteIcon style={{color : liked ? "red" : "#666" }}/>
</ButtonNoWidth>
+
</LikeCounter>
</ConteinerFirulas>
)
diff --git a/src/Components/FollowCollectionButton.js b/src/Components/FollowCollectionButton.js
index dd85205b..e89f8901 100644
--- a/src/Components/FollowCollectionButton.js
+++ b/src/Components/FollowCollectionButton.js
@@ -188,8 +188,8 @@ export default function FollowCollectionButton(props) {
color={snackInfo.color}
/>
<FollowButton
- contrast={props.contrast}
variant={variant}
+ color="primary"
startIcon={icon}
size="small"
onMouseEnter={handleMouseEnter}
@@ -199,13 +199,11 @@ export default function FollowCollectionButton(props) {
<ButtonText>{button_text}</ButtonText>
</FollowButton>
<SignUpModal
- contrast={props.contrast}
open={sign_up_open}
handleClose={() => setSignUpOpen(false)}
openLogin={handleOpenLogin}
/>
<LoginModal
- contrast={props.contrast}
openSnackbar={handleOpenSnackSignIn}
open={open_login}
handleClose={() => setOpenLogin(false)}
@@ -221,10 +219,6 @@ const ButtonText = styled.span`
font-size: 1.2em;
`
const FollowButton = styled(Button)`
- color: ${props => props.contrast === "" ? "white !important" : "yellow !important"};
- background-color: ${props => props.contrast === "" ? "#3f51b5 !important" : "black !important"};
- text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
- border: ${props => props.contrast === "" ? "none !important" : "1px solid white !important"};
padding-left: 10;
padding-right: 10;
width: 250px;
diff --git a/src/Components/FormInput.js b/src/Components/FormInput.js
index 55c3e503..813877ed 100644
--- a/src/Components/FormInput.js
+++ b/src/Components/FormInput.js
@@ -25,91 +25,60 @@ const StyledTextField = styled(TextField)`
max-width: 100%;
font-size : 15px;
font-weight : lighter;
- color : white;
+ color : inherit;
width : 100% !important;
- width : 100% !important;
-
- .MuiOutlinedInput-root {
- /* &.Mui-focused.Mui-error fieldset{
- border-color: ${props => props.contrast === "" ? "red" : "#e75480"};
- }
-
- &.Mui-error fieldset{
- border-color: ${props => props.contrast === "" ? "red" : "#e75480"};
- } */
-
- &.Mui-focused fieldset {
- border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- }
- fieldset {
- border-color: ${props => props.contrast === "" ? "#666" : "white"};
- }
- }
-
- label{
- color: ${props => props.contrast === "" ? "#666" : "white"};
- }
+ full-width : 100% !important;
label.Mui-focused {
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ color : #00bcd4;
}
label.Mui-focused.Mui-error {
- color: red;
+ color : red;
}
- /* label.Mui-error {
- color: ${props => props.contrast === "" ? "red" : "#e75480"};
- } */
+ .MuiInput-underline::after {
+ border-bottom: 2px solid #00bcd4;
+ }
`
const useStyles = makeStyles(theme => ({
- container: {
- display: "flex",
- flexWrap: "wrap",
- padding: "2px"
- },
- darkTextField: {
- maxWidth: "100%",
- fontSize: "15px",
- fontWeight: "lighter",
- color: "white",
- width: "100%"
- },
- lightTextField: {
- maxWidth: "100%",
- fontSize: "15px",
- fontWeight: "lighter",
- color: "black",
- width: "100%"
- }
+ container: {
+ display: "flex",
+ flexWrap: "wrap",
+ padding: "2px"
+ },
+ textField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "inherit",
+ width: "100%"
+ }
}));
export default function FormInput(props) {
- const classes = useStyles();
+ const classes = useStyles();
+
+ return (
- return (
<StyledTextField
- contrast={props.contrast}
- label={props.placeholder}
- margin="normal"
- id={props.id}
- name={props.name}
- type={props.inputType}
- value={props.value}
- onChange={props.handleChange}
- onKeyDown={props.onKeyDown}
- variant="outlined"
- rows={props.rows}
- 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}
+ label={props.placeholder}
+ margin="normal"
+ id = {props.name}
+ name = {props.name}
+ type = {props.inputType}
+ value = {props.value}
+ onChange = {props.handleChange}
+ rows = {props.rows}
+ error = {props.error}
+ rowsMax = {props.rowsMax}
+ InputProps={{className: classes.input}}
+ required = {props.required}
+ helperText ={props.help}
+ style={{width:"100%"}}
+ mask={props.mask}
+ multiline={props.multi}
/>
- );
+ );
}
diff --git a/src/Components/FormationMaterialDescription.js b/src/Components/FormationMaterialDescription.js
index f3487714..dc984d1f 100644
--- a/src/Components/FormationMaterialDescription.js
+++ b/src/Components/FormationMaterialDescription.js
@@ -25,32 +25,31 @@ export default function FormationMaterialDescription(props) {
const topico_obj = props.topico_obj;
return (
- <WrappingCard contrast={props.contrast}>
+ <WrappingCard>
<Grid container
- style={props.contrast === "" ? {} : {backgroundColor: "black"}}
direction="row"
justify="flex-start"
alignItems="center"
>
<Grid item xs={12} md={8}>
- <TextContainer contrast={props.contrast}>
- <Title contrast={props.contrast}>
+ <TextContainer>
+ <Title>
{colecao ?
"Sobre o Material"
: "Resumo do " + props.colecao_obj.topic_name.slice(0, -1)
}
</Title>
- <Description contrast={props.contrast}>
+ <Description>
{colecao ?
colecao_obj.description
: topico_obj.description
}
</Description>
{colecao ?
- <SubTitle contrast={props.contrast}>Histórico do Curso</SubTitle>
- : <Strong contrast={props.contrast}>Autoria (autores):</Strong>
+ <SubTitle>Histórico do Curso</SubTitle>
+ : <Strong>Autoria (autores):</Strong>
}
- <Description contrast={props.contrast}>
+ <Description>
{colecao ?
colecao_obj.historic
: topico_obj.author
@@ -59,17 +58,17 @@ export default function FormationMaterialDescription(props) {
</TextContainer>
</Grid>
<Grid item xs={12} md={3}>
- <IconList contrast={props.contrast}>
- <IconItem contrast={props.contrast}>
+ <IconList>
+ <IconItem>
<LibraryBooksIcon />
- <Strong contrast={props.contrast}>Tipo de recurso: </Strong>
+ <Strong>Tipo de recurso: </Strong>
Material de Formação
<br />
</IconItem>
- <IconItem contrast={props.contrast}>
+ <IconItem>
<MoveToInboxIcon />
- <Strong contrast={props.contrast}>Ano de publicação: </Strong>
+ <Strong>Ano de publicação: </Strong>
{colecao ?
colecao_obj.created_at.split('-')[0]
: topico_obj.created_at.split('-')[0]
@@ -86,24 +85,24 @@ export default function FormationMaterialDescription(props) {
topico_obj.language[i].name
: '')
return (
- <IconItem contrast={props.contrast}>
+ <IconItem>
<TranslateIcon />
- <Strong contrast={props.contrast}>Idioma: </Strong>
+ <Strong>Idioma: </Strong>
{content}
<br />
</IconItem>
);
})}
- <IconItem contrast={props.contrast}>
- <Strong contrast={props.contrast}>{colecao ? "Criado" : "Enviado"} por:</Strong>
+ <IconItem>
+ <Strong>{colecao ? "Criado" : "Enviado"} por:</Strong>
<br />
<StyledAnchor href={colecao_obj.developedurl}>
{
colecao_obj.id === 3 ? <LongUserIcon src={IcNute} />
: <div>
<UserIcon src={IcPeninsula} />
- <Red contrast={props.contrast}>
+ <Red>
{colecao_obj.developed}
</Red>
</div>
@@ -119,14 +118,12 @@ export default function FormationMaterialDescription(props) {
const Title = styled.h1`
font-weight: 100;
- color: ${props => props.contrast === "" ? "#666" : "white"};
-
+ color: rgb(102, 102, 102);
`
const SubTitle = styled.h3`
font-weight: 900;
padding-top: 10px;
- color: ${props => props.contrast === "" ? "#666" : "white"};
-
+ color: rgb(102, 102, 102);
`
const UserIcon = styled.img`
width: 50px;
@@ -139,10 +136,9 @@ const LongUserIcon = styled.img`
margin: 10px;
`
const Description = styled.p`
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color: #666;
`
const TextContainer = styled.div`
- background: ${props => props.contrast === "" ? "white" : "black"};
margin: 15px;
height: 100%;
@media screen and (max-width: 768px) {
@@ -163,14 +159,12 @@ const TextContainer = styled.div`
padding : 0 15px 0 0
}
`
-export const WrappingCard = styled(Card)`
- background: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
- border: ${props => props.contrast === "" ? "none" : "1px solid white"};
+
+const WrappingCard = styled(Card)`
border-radius: 0;
margin-right : auto;
margin-left : auto;
margin-bottom: 30px;
- margin-top: 30px;
@media screen and (max-width: 768px) {
width : 100% !important;
@@ -182,21 +176,18 @@ export const WrappingCard = styled(Card)`
width : 970px !important;
}
`
-
const IconList = styled.div`
margin: 15px;
- background: ${props => props.contrast === "" ? "white" : "black"};
`
const IconItem = styled.span`
width: 100%;
display: inline-block;
margin-bottom: 15px;
font-size : 14px;
- color: ${props => props.contrast === "" ? "#666" : "white"};
.MuiSvgIcon-root {
vertical-align : middle
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color: #666;
}
img {
@@ -206,11 +197,10 @@ const IconItem = styled.span`
`
const Strong = styled.span`
font-weight: bold;
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color: #666;
`
const Red = styled.span`
- color: ${props => props.contrast === "" ? "#e81f4f" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ color: #e81f4f;
`
const StyledAnchor = styled.a`
text-decoration: none !important;
diff --git a/src/Components/FormationMaterialHeader.js b/src/Components/FormationMaterialHeader.js
index b231cd0f..0c497723 100644
--- a/src/Components/FormationMaterialHeader.js
+++ b/src/Components/FormationMaterialHeader.js
@@ -38,13 +38,13 @@ export default function FormationMaterialHeader(props) {
}
const getThumb = () => {
- return colecao ?
+ return colecao ?
require(`../../public/${colecao_obj.img}`)
: require(`../../public/${topico_obj.img}`)
}
return (
- <WrappingCard contrast={props.contrast}>
+ <WrappingCard>
<Grid container
direction="row"
justify="flex-start"
@@ -57,42 +57,38 @@ export default function FormationMaterialHeader(props) {
direction="column"
justify="flex-start"
alignItems="stretch"
- style={props.contrast === "" ? { padding: "8px 10px" } : { backgroundColor: "black" }}
+ style={{ padding: "8px 10px" }}
>
<Grid item>
- <Title contrast={props.contrast}>{get_title()}</Title>
+ <Title>{get_title()}</Title>
</Grid>
<Grid item>
- <SubTitle contrast={props.contrast}>
+ <SubTitle>
{colecao ?
get_subtitle()
- : <StyledLink contrast={props.contrast} to={'/colecao?id=' + colecao_obj.id}>{get_subtitle()}</StyledLink>}
+ : <StyledLink to={'/colecao?id=' + colecao_obj.id}>{get_subtitle()}</StyledLink>}
</SubTitle>
</Grid>
<Grid item>
<ChipsDiv className={classes.root}>
{colecao_obj.tags.map((t, index) => {
- return (<Chip color="default" label={t.name} key={index} style={props.contrast === "" ? { padding: "0.5px" } : { border: "1px solid white", padding: "0.5px", backgroundColor: "black", color: "white" }} />);
+ return (<Chip color="default" label={t.name} key={index} style={{ padding: "0.5px" }} />);
})}
</ChipsDiv>
</Grid>
<Grid item>
{colecao ?
- <StyledDiv contrast={props.contrast}>
- <Button
- className="button"
- variant="contained"
- color="secondary"
- style={{ marginLeft: '15px' }}
- onClick={props.handleClick}
- >
- {props.colecao ? "Ver todos os módulos" : "Iniciar leitura"}
- </Button>
- </StyledDiv>
+ <Button
+ variant="contained"
+ color="secondary"
+ style={{ marginLeft: '15px' }}
+ onClick={props.handleClick}
+ >
+ {props.colecao ? "Ver todos os módulos" : "Iniciar leitura"}
+ </Button>
:
- <StyledLink contrast={props.contrast} to={'/iframe-colecao?colecao=' + colecao_obj.id + '&topico=' + topico_obj.id}>
+ <StyledLink to={'/iframe-colecao?colecao=' + colecao_obj.id + '&topico=' + topico_obj.id}>
<Button
- className="button"
variant="contained"
color="secondary"
style={{ marginLeft: '15px', marginTop: '10px' }}
@@ -123,18 +119,15 @@ const Img = styled.img`
const Title = styled.h2`
font-weight: 100;
margin: 15px;
- color: ${props => props.contrast === "" ? "rgb(102, 102, 102)" : "white"};
-
+ color: rgb(102, 102, 102);
`
const SubTitle = styled.h4`
font-weight: 50;
margin: 15px;;
margin-top: 0;
- color: ${props => props.contrast === "" ? "rgb(102, 102, 102)" : "white"};
+ color: rgb(102, 102, 102);
`
export const WrappingCard = styled(Card)`
- background: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
- border: ${props => props.contrast === "" ? "none" : "1px solid white"};
border-radius: 0;
margin-right : auto;
margin-left : auto;
@@ -153,29 +146,6 @@ export const WrappingCard = styled(Card)`
`
const StyledLink = styled(Link)`
- color: ${props => props.contrast === "" ? "#e81f4f !important" : "yellow !important"};
- text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
-
- .button{
- background-color: ${props => props.contrast === "" ? "" : "black "};
- color: ${props => props.contrast === "" ? "white" : "yellow"};
- border: ${props => props.contrast === "" ? "0" : "1px solid white"};
- :hover{
- background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24)"};
- }
- }
-`
-
-const StyledDiv = styled.div`
- color: ${props => props.contrast === "" ? "#e81f4f !important" : "yellow !important"};
- text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
-
- .button{
- background-color: ${props => props.contrast === "" ? "" : "black "};
- color: ${props => props.contrast === "" ? "white" : "yellow"};
- border: ${props => props.contrast === "" ? "0" : "1px solid white"};
- :hover{
- background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24)"};
- }
- }
+ text-decoration: none !important;
+ color: #e81f4f !important;
`
diff --git a/src/Components/Funcionalities.js b/src/Components/Funcionalities.js
index eeaa81c9..5a1750b9 100644
--- a/src/Components/Funcionalities.js
+++ b/src/Components/Funcionalities.js
@@ -16,8 +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, { useContext } from 'react';
-import { Row, Col, Container } from 'react-grid-system';
+import React, {Component} from 'react';
+import {Row, Col, Container} from 'react-grid-system';
//Image Import
import { acessar } from "ImportImages.js";
@@ -26,103 +26,100 @@ import { compartilhar } from "ImportImages.js";
import { relatar } from "ImportImages.js";
import { seguir } from "ImportImages.js";
import { guardar } from "ImportImages.js";
-import { Store } from '../Store';
-const imgRow = {
+const imgRow={
textAlign: "center",
padding: "1%",
fontFamily: "Roboto, sans-serif"
};
-const title = {
+const title={
display: "block",
fontSize: "1.1em",
fontWeight: "Bold",
fontFamily: "Roboto, sans-serif",
- textAlign: "center"
+ textAlign: "center"
};
-const caption = {
+const caption={
fontSize: "1.07em",
fontWeight: "lighter",
};
-
-export default function Funcionalities() {
- const { state } = useContext(Store)
-
- return (
- <div className={`${state.contrast}BackColor`}>
- <Container style={{ textAlign: "center", paddingTop: "40px", paddingBottom: "40px", color: state.contrast === "" ? "#666" : "white" }}>
- <h2 style={{ margin: 0, paddingBottom: 40 }}>Aqui na Plataforma você pode:</h2>
+class Funcionalities extends Component{
+ render(){
+ return(
+ <Container style={{textAlign: "center", paddingBottom : "20px", color : "#666"}}>
+ <h2>Aqui na Plataforma você pode:</h2>
<Row style={imgRow}>
<Col sm={4} md={4}>
- <img src={compartilhar} height="150px" alt="compartilhar recursos" />
+ <img src={compartilhar} height="150px" alt="compartilhar recursos"/>
<span>
<span style={title}>
Compartilhar
</span>
<span style={caption}>
- com os colegas
+ com os colegas
</span>
</span>
</Col>
<Col sm={4} md={4}>
- <img src={relatar} height="150px" alt="relatar experiências" />
+ <img src={relatar} height="150px" alt="relatar experiências"/>
<span>
<span style={title}>
Relatar experiências,
</span>
<span>
- curtir e avaliar
+ curtir e avaliar
</span>
</span>
</Col>
<Col sm={4} md={4}>
- <img src={guardar} height="150px" alt="guardar recursos" />
+ <img src={guardar} height="150px" alt="guardar recursos"/>
<span>
<span style={title}>
Guardar recursos
</span>
<span>
- em coleções
+ em coleções
</span>
</span>
</Col>
<Col sm={4} md={4}>
- <img src={seguir} height="150px" alt="seguir usuários" />
+ <img src={seguir} height="150px" alt="seguir usuários"/>
<span>
<span style={title}>
Seguir usuários
</span>
<span>
- e suas coleções
+ e suas coleções
</span>
</span>
</Col>
<Col sm={4} md={4}>
- <img src={baixar} height="150px" alt="baixar recursos" />
+ <img src={baixar} height="150px" alt="baixar recursos"/>
<span>
<span style={title}>
Baixar
</span>
<span>
- recursos
+ recursos
</span>
</span>
</Col>
<Col sm={4} md={4}>
- <img src={acessar} height="150px" alt="acessar materiais" />
+ <img src={acessar} height="150px" alt="acessar materiais"/>
<span>
<span style={title}>
Acessar materiais
</span>
<span>
- de formação
+ de formação
</span>
</span>
</Col>
</Row>
</Container>
- </div>
- )
+ )
+ }
}
+export default Funcionalities;
diff --git a/src/Components/GreyButton.js b/src/Components/GreyButton.js
index 10123e02..a2d687d5 100644
--- a/src/Components/GreyButton.js
+++ b/src/Components/GreyButton.js
@@ -22,18 +22,21 @@ import styled from 'styled-components'
export default function GreyButton (props) {
return (
- <StyledButton onClick={props.callback} contrast={props.contrast}>
+ <StyledButton onClick={props.callback}>
{props.text}
</StyledButton>
)
}
const StyledButton = styled(Button)`
+ &:hover {
+ background-color : rgba(158,158,158,0.2) !important;
+ }
max-height : 36px !important;
background-color : transparent !important;
- color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
- text-decoration : ${props => props.contrast === "" ? "none" : "underline yellow"} !important;
+ color : #666 !important;
+ text-decoration : none !important;
outline : none !important;
text-align : center !important;
diff --git a/src/Components/GuardarModal.js b/src/Components/GuardarModal.js
index f08774ee..075f74d6 100644
--- a/src/Components/GuardarModal.js
+++ b/src/Components/GuardarModal.js
@@ -35,7 +35,7 @@ import { getRequest, postRequest } from './HelperFunctions/getAxiosConfig'
function CloseModalButton(props) {
return (
<StyledCloseModalButton onClick={props.handleClose}>
- <CloseIcon style={props.contrast === "" ? { color: "#666" } : { color: "white" }}/>
+ <CloseIcon />
</StyledCloseModalButton>
)
}
@@ -132,23 +132,23 @@ export default function GuardarModal(props) {
onRendered={() => { getCols() }}
>
<Fade in={props.open}>
- <Container className={`${props.contrast}BackColor ${props.contrast}Text ${props.contrast}Border`}>
+ <Container>
<Header>
<span style={{ width: "32px" }} />
<h2>Guardar recurso</h2>
- <CloseModalButton contrast={props.contrast} handleClose={props.handleClose} />
+ <CloseModalButton handleClose={props.handleClose} />
</Header>
<Content style={{ paddingTop: "0" }}>
<ResourceInfo>
<img src={props.thumb ? apiDomain + props.thumb : require('../img/logo_small.svg')} alt="thumbnail recurso" />
- <div>
+ <div className="text">
<h3>{props.title}</h3>
</div>
</ResourceInfo>
{
loading ?
(
- <LoadingSpinner contrast={props.contrast} text="Carregando coleções" />
+ <LoadingSpinner text="Carregando coleções" />
)
:
(
@@ -157,7 +157,6 @@ export default function GuardarModal(props) {
creatingCol ?
(
<CriarColecaoForm
- contrast={props.contrast}
handleClose={() => setCreating(false)}
finalize={postToCol}
/>
@@ -170,15 +169,7 @@ export default function GuardarModal(props) {
<div classname="no-cols">
<h2>Você não possui coleções ainda.</h2>
</div>
- <div style={{ display: "flex", justifyContent: "center" }}>
- <CriarColButton className={`${props.contrast}LinkColor ${props.contrast}Border ContrastText`}
- style={{backgroundColor: props.contrast === "" ? "#673ab7" : "black"}}
- onClick={() => { setCreating(true) }}
- >
- CRIAR COLEÇÃO
- </CriarColButton>
- </div>
- </>
+ </>
)
:
(
@@ -197,25 +188,12 @@ export default function GuardarModal(props) {
}
<h5>{collection.name}</h5>
</div>
- <GuardarBotao className={`${props.contrast}LinkColor ${props.contrast}Border ContrastText`}
- style={{backgroundColor: props.contrast === "" ? "#673ab7" : "black"}}
- onClick={() => { postToCol(collection.id) }}
- >
- GUARDAR
- </GuardarBotao>
+ <GuardarBotao onClick={() => { postToCol(collection.id) }}>GUARDAR</GuardarBotao>
</div>
)
}
</div>
</ChooseCol>
- <div style={{ display: "flex", justifyContent: "center" }}>
- <CriarColButton className={`${props.contrast}LinkColor ${props.contrast}Border ContrastText`}
- style={{backgroundColor: props.contrast === "" ? "#673ab7" : "black"}}
- onClick={() => { setCreating(true) }}
- >
- CRIAR COLEÇÃO
- </CriarColButton>
- </div>
</>
)
@@ -225,6 +203,9 @@ export default function GuardarModal(props) {
)
}
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ <CriarColButton onClick={() => { setCreating(true) }}>CRIAR COLEÇÃO</CriarColButton>
+ </div>
</Content>
</Container>
</Fade>
@@ -234,7 +215,12 @@ export default function GuardarModal(props) {
}
const GuardarBotao = styled(Button)`
+ &:hover {
+ background-color : #503096 !important;
+ }
max-height : 36px !important;
+ background-color : #673ab7 !important;
+ color : #fff !important;
box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
padding-left : 32px !important;
padding-right : 32px !important;
@@ -293,8 +279,10 @@ const ChooseCol = styled.div`
const CriarColButton = styled(Button)`
width : 200px !important;
margin-top : 16px !important;
+ background-color : #673ab7 !important;
margin-left : auto !important;
margin-right : auto !important;
+ color : #fff !important;
font-weight : 600 !important;
box-shadow : !important;
padding-left : 0 2px 5px 0 rgba(0,0,0,.26) 16px !important;
@@ -304,6 +292,7 @@ const CriarColButton = styled(Button)`
const ChooseColContainer = styled.div`
display : flex;
flex-direction : column;
+ color : #666;
.no-cols {
align-self : center;
@@ -316,18 +305,19 @@ const ChooseColContainer = styled.div`
const ResourceInfo = styled.div`
margin-top : 0;
+ background-color : #f4f4f4;
overflow : hidden;
border-radius : 5px;
display : flex;
flex-direction : column;
align-items : center;
align-content : center;
- max-width : 100%;
+ max-wdith : 100%;
justify-content : space-between;
.text {
max-height : 100%;
- max-width : 100%;
+ max-width : 66.66%;
display : flex;
flex-direction : column;
text-align : center;
@@ -375,6 +365,7 @@ const Header = styled.div`
h2 {
font-size : 26px;
font-weight : lighter;
+ color : #666
}
`
@@ -404,6 +395,7 @@ const StyledModal = styled(Modal)`
const Container = styled.div`
box-sizing : border-box;
box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
+ background-color : white;
align : center;
display : flex;
flex-direction : column;
@@ -420,5 +412,6 @@ const Container = styled.div`
@media screen and (max-width : 699px) {
width : 100%;
+ height : 100%;
}
`
diff --git a/src/Components/Header.js b/src/Components/Header.js
index fb512f3c..54e02fea 100644
--- a/src/Components/Header.js
+++ b/src/Components/Header.js
@@ -33,131 +33,123 @@ import { getRequest, validateGoogleLoginToken } from './HelperFunctions/getAxios
// boxShadow :none;
//`
function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
+ return <MuiAlert elevation={6} variant="filled" {...props} />;
}
export default function Header(props) {
- const { state, dispatch } = useContext(Store)
- const [signUpOpen, setSignUp] = useState(false)
- const [loginOpen, setLogin] = useState(false)
- const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
- const [modalColaborar, setModalColaborar] = useState(false)
-
- function handleSuccessValidateToken(data) {
- dispatch({
- type: "USER_LOGGED_IN",
- userLoggedIn: !state.userIsLoggedIn,
- login: data.data
- })
+ const { state, dispatch } = useContext(Store)
+ const [signUpOpen, setSignUp] = useState(false)
+ const [loginOpen, setLogin] = useState(false)
+ const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
+ const [modalColaborar, setModalColaborar] = useState(false)
+
+ function handleSuccessValidateToken(data) {
+ dispatch({
+ type: "USER_LOGGED_IN",
+ userLoggedIn: !state.userIsLoggedIn,
+ login: data.data
}
+ )
+ }
- useEffect(() => {
- if (localStorage.getItem('@portalmec/auth_headers')) {
- const url = `/auth/validate_token/`
- getRequest(url, handleSuccessValidateToken, (error) => { console.log(error) })
- }
- const newContrast = localStorage.getItem("@portalmec/contrast");
-
- return dispatch({
- type: 'SET_CONTRAST',
- payload: newContrast
- })
- }, [])
-
- let loc = useLocation()
- let history = useHistory()
- useEffect(() => {
- const url = `/auth/validate_token/`
-
- let query = new URLSearchParams(loc.search)
-
- if (query.get("auth_token")) {
- let config = {
- headers: {
- "access-token": query.get("auth_token"),
- "client": query.get("client_id"),
- "uid": query.get("uid"),
- "expiry": query.get("expiry"),
- "token-type": 'Bearer'
- }
- }
- validateGoogleLoginToken(url, config, handleSuccessValidateToken, (error) => { console.log(error) })
- history.push("/")
- }
- }, [loc])
-
- useEffect(() => {
- if (state.currentUser.askTeacherQuestion === true) {
- dispatch({
- type: "TOGGLE_MODAL_COLABORAR_PLATAFORMA",
- modalColaborarPlataformaOpen: true
- });
- }
- }, [state.currentUser.askTeacherQuestion])
-
- const toggleSnackbar = (event, reason) => {
- if (reason === 'clickaway') {
- return;
- }
-
- handleSuccessfulLogin(false);
+ useEffect(() => {
+ if (localStorage.getItem('@portalmec/auth_headers')) {
+ const url = `/auth/validate_token/`
+ getRequest(url, handleSuccessValidateToken, (error) => { console.log(error) })
}
-
- const handleSignUp = () => {
- setSignUp(!signUpOpen)
+ }, [])
+
+ let loc = useLocation()
+ let history = useHistory()
+ useEffect(() => {
+ const url = `/auth/validate_token/`
+
+ let query = new URLSearchParams(loc.search)
+
+ if (query.get("auth_token")) {
+ let config = {
+ headers: {
+ "access-token": query.get("auth_token"),
+ "client": query.get("client_id"),
+ "uid": query.get("uid"),
+ "expiry": query.get("expiry"),
+ "token-type": 'Bearer'
+ }
+ }
+ validateGoogleLoginToken(url, config, handleSuccessValidateToken, (error) => { console.log(error) })
+ history.push("/")
}
-
- const handleLogin = () => {
- setLogin(!loginOpen)
+ }, [loc])
+
+ useEffect(() => {
+ if (state.currentUser.askTeacherQuestion === true) {
+ dispatch({
+ type: "TOGGLE_MODAL_COLABORAR_PLATAFORMA",
+ modalColaborarPlataformaOpen: true
+ });
}
+ }, [state.currentUser.askTeacherQuestion])
- const handleClickSearch = (open) => {
- dispatch({
- type: "HANDLE_SEARCH_BAR",
- opened: !state.searchOpen
- })
+ const toggleSnackbar = (event, reason) => {
+ if (reason === 'clickaway') {
+ return;
}
- let windowWidth = window.innerWidth
-
- 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>
- {
- windowWidth > 990 ?
- (
- <React.Fragment>
- <div id="Pesquisa_scroll"></div>
- <MenuBar openSearchBar={handleClickSearch} openSignUp={handleSignUp} openLogin={handleLogin} />
- {
- state.searchOpen &&
- <SearchBar />
- }
- </React.Fragment>
-
- )
- :
- (
- <React.Fragment>
- <div id="Pesquisa_scroll"></div>
- <MenuBarMobile contrast={state.contrast} openSearchBar={handleClickSearch} openSignUp={handleSignUp} openLogin={handleLogin} />
- {
- state.searchOpen &&
- <SearchBar />
- }
- </React.Fragment>
- )
- }
- <SignUpModal contrast={state.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
- <LoginModal contrast={state.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
- openSnackbar={() => { handleSuccessfulLogin(true) }}
- />
- <ColaborarModal contrast={state.contrast} open={modalColaborar} handleClose={() => { setModalColaborar(!modalColaborar) }} />
- </React.Fragment>
- )
+ handleSuccessfulLogin(false);
+ }
+
+ const handleSignUp = () => {
+ setSignUp(!signUpOpen)
+ }
+
+ const handleLogin = () => {
+ setLogin(!loginOpen)
+ }
+
+ const handleClickSearch = (open) => {
+ dispatch({
+ type: "HANDLE_SEARCH_BAR",
+ opened: !state.searchOpen
+ })
+ }
+
+ let windowWidth = window.innerWidth
+
+ 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>
+ {
+ windowWidth > 990 ?
+ (
+ <React.Fragment>
+ <MenuBar openSearchBar={handleClickSearch} openSignUp={handleSignUp} openLogin={handleLogin} />
+ {
+ state.searchOpen &&
+ <SearchBar />
+ }
+ </React.Fragment>
+
+ )
+ :
+ (
+ <React.Fragment>
+ <MenuBarMobile openSearchBar={handleClickSearch} openSignUp={handleSignUp} openLogin={handleLogin} />
+ {
+ state.searchOpen &&
+ <SearchBar />
+ }
+ </React.Fragment>
+ )
+ }
+ <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
+ <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ openSnackbar={() => { handleSuccessfulLogin(true) }} />
+ <ColaborarModal open={modalColaborar} handleClose={() => { setModalColaborar(!modalColaborar) }} />
+ </React.Fragment>
+ )
}
diff --git a/src/Components/HelpCenter/Cards/CardEncontrando.js b/src/Components/HelpCenter/Cards/CardEncontrando.js
index efc92251..fd8aa929 100644
--- a/src/Components/HelpCenter/Cards/CardEncontrando.js
+++ b/src/Components/HelpCenter/Cards/CardEncontrando.js
@@ -24,9 +24,9 @@ import { Link } from "react-router-dom";
//Image Import
import { EncontrandoRecurso } from "ImportImages.js";
-export default function CardEncontrando({ contrast }) {
+export default function CardEncontrando(props) {
return (
- <CardAjuda contrast={contrast}>
+ <CardAjuda>
<div className="card">
<img src={EncontrandoRecurso} alt="" />
<h3>Encontrando Recursos</h3>
@@ -75,86 +75,83 @@ export default function CardEncontrando({ contrast }) {
const CardAjuda = styled.div`
-height: 360px;
-margin-bottom: 20px;
-width: 100%;
-
-.card {
- height: 280px;
- padding: 40px 15px;
- text-align: center;
- font-size: 14px;
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
- box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.24),0 1px 2px rgba(254,254,254,.48)"};
- margin-top:30px
- h3 {
- font-size: 23px;
- font-weight: 400;
- color: ${props => props.contrast === "" ? "#666" : "white"};
- margin-top: 20px;
- margin-bottom: 10px;
- line-height: 1.1;
- }
-
- hr {
- margin-top: 20px;
- margin-bottom: 20px;
- border: 0;
- border-top: 1px solid #eee;
- color: #a5a5a5;
- }
+ height: 360px;
+ margin-bottom: 20px;
+ width: 100%
- a {
- font-size: 15px;
- color: ${props => props.contrast === "" ? "#666" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- font-weight: lighter;
+ .card {
+ height: 280px;
+ padding: 40px 15px;
text-align: center;
- :hover {
- color: ${props => props.contrast === "" ? "#000" : "yellow"};
- font-weight: 500;
+ font-size: 14px;
+ background-color:#fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ margin-top:30px
+ h3 {
+ font-size: 23px;
+ font-weight: 400;
+ color: #666;
+ margin-top: 20px;
+ margin-bottom: 10px;
+ line-height: 1.1;
}
- }
+ hr {
+ margin-top: 20px;
+ margin-bottom: 20px;
+ border: 0;
+ border-top: 1px solid #eee;
+ color: #a5a5a5;
+ }
- img {
- height: 62px ;
- width: 62px ;
- }
+ a {
+ font-size: 15px;
+ color: #666;
+ text-decoration: none;
+ text-align: center;
+ :hover {
+ color: #000;
+ }
-}
+ }
+
+ img {
+ height: 62px ;
+ width: 62px ;
+ }
-.card-rodape {
- box-sizing: border-box;
-
- a {
- border-radius: 0;
- width: 100%;
- font-size: 13px;
- font-weight: 700;
- color: ${props => props.contrast === "" ? "#fff" : "yellow"};
- transition: .2s ease;
- border: ${props => props.contrast === "" ? "none" : "1px solid white"};
- height: 40px;
- line-height: 40px;
- background-color: ${props => props.contrast === "" ? "#00bcd4" : "black"};
- touch-action: manipulation;
- cursor: pointer;
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- display: inline-block;
- margin-bottom: 0;
- text-align: center;
- white-space: nowrap;
- vertical-align: middle;
- touch-action: manipulation;
- cursor: pointer;
- user-select: none;
- box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
}
- &:hover{
- a{
- background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24)"};
+
+ .card-rodape {
+ box-sizing: border-box;
+
+ a {
+ border-radius: 0;
+ width: 100%;
+ font-size: 13px;
+ font-weight: 700;
+ color: #fff;
+ transition: .2s ease;
+ border: none;
+ height: 40px;
+ line-height: 40px;
+ background-color: #00bcd4;
+ touch-action: manipulation;
+ cursor: pointer;
+ text-decoration: none;
+ display: inline-block;
+ margin-bottom: 0;
+ text-align: center;
+ white-space: nowrap;
+ vertical-align: middle;
+ touch-action: manipulation;
+ cursor: pointer;
+ user-select: none;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+
}
}
+
}
+
`;
diff --git a/src/Components/HelpCenter/Cards/CardGerenciando.js b/src/Components/HelpCenter/Cards/CardGerenciando.js
index 10487e95..3f4da6b0 100644
--- a/src/Components/HelpCenter/Cards/CardGerenciando.js
+++ b/src/Components/HelpCenter/Cards/CardGerenciando.js
@@ -24,9 +24,9 @@ import { Link } from "react-router-dom";
//Image Import
import { GerenciandoConta } from "ImportImages.js";
-export default function CardGerenciando({ contrast }) {
+export default function CardGerenciando(props) {
return (
- <CardAjuda contrast={contrast}>
+ <CardAjuda>
<div className="card">
<img src={GerenciandoConta} alt="" />
<h3>Gerenciando Conta</h3>
@@ -93,87 +93,84 @@ export default function CardGerenciando({ contrast }) {
const CardAjuda = styled.div`
-height: 360px;
-margin-bottom: 20px;
-width: 100%;
-
-.card {
- height: 280px;
- padding: 40px 15px;
- text-align: center;
- font-size: 14px;
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
- box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.24),0 1px 2px rgba(254,254,254,.48)"};
- margin-top:30px
- h3 {
- font-size: 23px;
- font-weight: 400;
- color: ${props => props.contrast === "" ? "#666" : "white"};
- margin-top: 20px;
- margin-bottom: 10px;
- line-height: 1.1;
- }
-
- hr {
- margin-top: 20px;
- margin-bottom: 20px;
- border: 0;
- border-top: 1px solid #eee;
- color: #a5a5a5;
- }
+ height: 360px;
+ margin-bottom: 20px;
+ width: 100%
- a {
- font-size: 15px;
- color: ${props => props.contrast === "" ? "#666" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- font-weight: lighter;
+ .card {
+ height: 280px;
+ padding: 40px 15px;
text-align: center;
- :hover {
- color: ${props => props.contrast === "" ? "#000" : "yellow"};
- font-weight: 500;
+ font-size: 14px;
+ background-color:#fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ margin-top:30px
+
+ h3 {
+ font-size: 23px;
+ font-weight: 400;
+ color: #666;
+ margin-top: 20px;
+ margin-bottom: 10px;
+ line-height: 1.1;
}
- }
+ hr {
+ margin-top: 20px;
+ margin-bottom: 20px;
+ border: 0;
+ border-top: 1px solid #eee;
+ color: #a5a5a5;
+ }
- img {
- height: 62px ;
- width: 62px ;
- }
+ a {
+ font-size: 15px;
+ color: #666;
+ text-decoration: none;
+ text-align: center;
+ :hover {
+ color: #000;
+ }
-}
+ }
+
+ img {
+ height: 62px ;
+ width: 62px ;
+ }
-.card-rodape {
- box-sizing: border-box;
-
- a {
- border-radius: 0;
- width: 100%;
- font-size: 13px;
- font-weight: 700;
- color: ${props => props.contrast === "" ? "#fff" : "yellow"};
- transition: .2s ease;
- border: ${props => props.contrast === "" ? "none" : "1px solid white"};
- height: 40px;
- line-height: 40px;
- background-color: ${props => props.contrast === "" ? "#00bcd4" : "black"};
- touch-action: manipulation;
- cursor: pointer;
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- display: inline-block;
- margin-bottom: 0;
- text-align: center;
- white-space: nowrap;
- vertical-align: middle;
- touch-action: manipulation;
- cursor: pointer;
- user-select: none;
- box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
}
- &:hover{
- a{
- background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24)"};
+
+ .card-rodape {
+ box-sizing: border-box;
+
+ a {
+ border-radius: 0;
+ width: 100%;
+ font-size: 13px;
+ font-weight: 700;
+ color: #fff;
+ transition: .2s ease;
+ border: none;
+ height: 40px;
+ line-height: 40px;
+ background-color: #00bcd4;
+ touch-action: manipulation;
+ cursor: pointer;
+ text-decoration: none;
+ display: inline-block;
+ margin-bottom: 0;
+ text-align: center;
+ white-space: nowrap;
+ vertical-align: middle;
+ touch-action: manipulation;
+ cursor: pointer;
+ user-select: none;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+
}
}
+
}
`;
diff --git a/src/Components/HelpCenter/Cards/CardParticipando.js b/src/Components/HelpCenter/Cards/CardParticipando.js
index ab2fc83c..31f0ad95 100644
--- a/src/Components/HelpCenter/Cards/CardParticipando.js
+++ b/src/Components/HelpCenter/Cards/CardParticipando.js
@@ -24,9 +24,9 @@ import { Link } from "react-router-dom";
//Image Import
import { ParticipandoRede } from "ImportImages.js";
-export default function CardParticipando({ contrast }) {
+export default function CardParticipando(props) {
return (
- <CardAjuda contrast={contrast}>
+ <CardAjuda>
<div className="card">
<img src={ParticipandoRede} alt="" />
<h3>Participando da Rede</h3>
@@ -66,87 +66,86 @@ export default function CardParticipando({ contrast }) {
const CardAjuda = styled.div`
-height: 360px;
-margin-bottom: 20px;
-width: 100%;
-
-.card {
- height: 280px;
- padding: 40px 15px;
- text-align: center;
- font-size: 14px;
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
- box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.24),0 1px 2px rgba(254,254,254,.48)"};
- margin-top:30px
- h3 {
- font-size: 23px;
- font-weight: 400;
- color: ${props => props.contrast === "" ? "#666" : "white"};
- margin-top: 20px;
- margin-bottom: 10px;
- line-height: 1.1;
- }
-
- hr {
- margin-top: 20px;
- margin-bottom: 20px;
- border: 0;
- border-top: 1px solid #eee;
- color: #a5a5a5;
- }
+ height: 360px;
+ margin-bottom: 20px;
+ width: 100%
+
- a {
- font-size: 15px;
- color: ${props => props.contrast === "" ? "#666" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- font-weight: lighter;
+ .card {
+ height: 280px;
+ padding: 40px 15px;
text-align: center;
- :hover {
- color: ${props => props.contrast === "" ? "#000" : "yellow"};
- font-weight: 500;
+ font-size: 14px;
+ background-color:#fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ margin-top:30px
+
+
+ h3 {
+ font-size: 23px;
+ font-weight: 400;
+ color: #666;
+ margin-top: 20px;
+ margin-bottom: 10px;
+ line-height: 1.1;
}
- }
+ hr {
+ margin-top: 20px;
+ margin-bottom: 20px;
+ border: 0;
+ border-top: 1px solid #eee;
+ color: #a5a5a5;
+ }
- img {
- height: 62px ;
- width: 62px ;
- }
+ a {
+ font-size: 15px;
+ color: #666;
+ text-decoration: none;
+ text-align: center;
+ :hover {
+ color: #000;
+ }
-}
+ }
+
+ img {
+ height: 62px ;
+ width: 62px ;
+ }
-.card-rodape {
- box-sizing: border-box;
-
- a {
- border-radius: 0;
- width: 100%;
- font-size: 13px;
- font-weight: 700;
- color: ${props => props.contrast === "" ? "#fff" : "yellow"};
- transition: .2s ease;
- border: ${props => props.contrast === "" ? "none" : "1px solid white"};
- height: 40px;
- line-height: 40px;
- background-color: ${props => props.contrast === "" ? "#00bcd4" : "black"};
- touch-action: manipulation;
- cursor: pointer;
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- display: inline-block;
- margin-bottom: 0;
- text-align: center;
- white-space: nowrap;
- vertical-align: middle;
- touch-action: manipulation;
- cursor: pointer;
- user-select: none;
- box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
}
- &:hover{
- a{
- background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24)"};
+
+ .card-rodape {
+ box-sizing: border-box;
+
+ a {
+ border-radius: 0;
+ width: 100%;
+ font-size: 13px;
+ font-weight: 700;
+ color: #fff;
+ transition: .2s ease;
+ border: none;
+ height: 40px;
+ line-height: 40px;
+ background-color: #00bcd4;
+ touch-action: manipulation;
+ cursor: pointer;
+ text-decoration: none;
+ display: inline-block;
+ margin-bottom: 0;
+ text-align: center;
+ white-space: nowrap;
+ vertical-align: middle;
+ touch-action: manipulation;
+ cursor: pointer;
+ user-select: none;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+
}
}
+
}
`;
diff --git a/src/Components/HelpCenter/Cards/CardPublicando.js b/src/Components/HelpCenter/Cards/CardPublicando.js
index 303cf2db..0c6f489d 100644
--- a/src/Components/HelpCenter/Cards/CardPublicando.js
+++ b/src/Components/HelpCenter/Cards/CardPublicando.js
@@ -23,9 +23,9 @@ import { Link } from "react-router-dom";
//Image Import
import { PublicandoRecursos } from "ImportImages.js";
-export default function CardPublicando({ contrast }) {
+export default function CardPublicando(props) {
return (
- <CardAjuda contrast={contrast}>
+ <CardAjuda>
<div className="card">
<img src={PublicandoRecursos} alt="" />
<h3>Publicando Recursos</h3>
@@ -76,20 +76,20 @@ const CardAjuda = styled.div`
height: 360px;
margin-bottom: 20px;
-width: 100%;
+width: 100%
.card {
height: 280px;
padding: 40px 15px;
text-align: center;
font-size: 14px;
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
- box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.24),0 1px 2px rgba(254,254,254,.48)"};
+ background-color:#fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
margin-top:30px
h3 {
font-size: 23px;
font-weight: 400;
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color: #666;
margin-top: 20px;
margin-bottom: 10px;
line-height: 1.1;
@@ -105,13 +105,11 @@ width: 100%;
a {
font-size: 15px;
- color: ${props => props.contrast === "" ? "#666" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- font-weight: lighter;
+ color: #666;
+ text-decoration: none;
text-align: center;
:hover {
- color: ${props => props.contrast === "" ? "#000" : "yellow"};
- font-weight: 500;
+ color: #000;
}
}
@@ -131,15 +129,15 @@ width: 100%;
width: 100%;
font-size: 13px;
font-weight: 700;
- color: ${props => props.contrast === "" ? "#fff" : "yellow"};
+ color: #fff;
transition: .2s ease;
- border: ${props => props.contrast === "" ? "none" : "1px solid white"};
+ border: none;
height: 40px;
line-height: 40px;
- background-color: ${props => props.contrast === "" ? "#00bcd4" : "black"};
+ background-color: #00bcd4;
touch-action: manipulation;
cursor: pointer;
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ text-decoration: none;
display: inline-block;
margin-bottom: 0;
text-align: center;
@@ -149,12 +147,10 @@ width: 100%;
cursor: pointer;
user-select: none;
box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+
}
- &:hover{
- a{
- background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24)"};
- }
- }
+}
+
}
`;
diff --git a/src/Components/HelpCenter/TabsManageAc/Forget.js b/src/Components/HelpCenter/TabsManageAc/Forget.js
index ad0a69ad..21d598d3 100644
--- a/src/Components/HelpCenter/TabsManageAc/Forget.js
+++ b/src/Components/HelpCenter/TabsManageAc/Forget.js
@@ -24,68 +24,76 @@ import { LoginImg } from "ImportImages.js";
import { RecuperarSenhaImg } from "ImportImages.js";
export default function Forget(props) {
- return(
- <Card contrast={props.contrast}>
- <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
- <div style={{marginBottom: "9px"}}>
- <span>{props.title}</span>
- </div>
- <p>Para redefinir a senha da sua conta, siga essas instruções:</p>
- <ol>
- <li>
- Acesse a <a href="/" target="_blank">Página Inicial</a> e clique em
- “Entrar†no canto superior direito da página.
- </li>
- <li>Clique em “Esqueceu a senha? Clique Aqui!â€.</li>
- <img className="primeira" src={LoginImg} alt="primeira imagem"/>
- <li>Preencha com o seu endereço de e-mail e clique em “Buscarâ€.</li>
- <img className="segunda" src={RecuperarSenhaImg} alt="segunda imagem"/>
- <li>Você receberá um e-mail no endereço informado, contendo as instruções para redefinir sua senha.</li>
- </ol>
- </Card>
- );
+ return(
+ <Card>
+ <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
+ <div style={{marginBottom: "9px"}}>
+ <span>{props.title}</span>
+ </div>
+ <p>Para redefinir a senha da sua conta, siga essas instruções:</p>
+
+ <ol>
+ <li>
+ Acesse a <a href="/" target="_blank">Página Inicial</a> e clique em
+ “Entrar†no canto superior direito da página.
+ </li>
+ <li>Clique em “Esqueceu a senha? Clique Aqui!â€.</li>
+ <img className="primeira" src={LoginImg} alt="primeira imagem"/>
+ <li>Preencha com o seu endereço de e-mail e clique em “Buscarâ€.</li>
+ <img className="segunda" src={RecuperarSenhaImg} alt="segunda imagem"/>
+ <li>Você receberá um e-mail no endereço informado, contendo as instruções para redefinir sua senha.</li>
+ </ol>
+
+ </Card>
+ );
}
const Card = styled.div`
- margin-bottom: 5px;
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
- box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"};
- padding: 30px;
- color: ${props => props.contrast === "" ? "#666" : "white"};
- span {
- font-size: 14px;
- font-weight: bold;
- }
+ margin-bottom: 5px;
+ background-color: #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ padding: 30px;
+ color: #666;
+ span {
+ font-size: 14px;
+ font-weight: bold;
+ }
- a {
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- :hover {
- text-decoration: underline;
- }
+ a {
+ color: #00bcd4;
+ text-decoration: none;
+ :hover {
+ text-decoration: underline;
}
+ }
- ol {
- margin-top: 0;
- margin-bottom: 10px;
- line-height: 1.42857143;
- .primeira {
- height: 300px;
- margin-right: 40px;
- vertical-align: middle;
- }
- .segunda {
- height: 150px;
- margin-right: 40px;
- vertical-align: middle;
- }
+ ol {
+ margin-top: 0;
+ margin-bottom: 10px;
+ line-height: 1.42857143;
+ .primeira {
+
+ height: 300px;
+ margin-right: 40px;
+ vertical-align: middle;
}
-
- li {
- font-size: 14px;
+ .segunda {
+ height: 150px;
+ margin-right: 40px;
+ vertical-align: middle;
+
}
+ }
+ li {
+ font-size: 14px;
+ }
+
+
+ p {
+ margin: 0 0 10px;
+ font-size: 15px;
+ }
+
+
- p {
- margin: 0 0 10px;
- font-size: 15px;
- }
`
\ No newline at end of file
diff --git a/src/Components/HelpCenter/TabsManageAc/HowToAccess.js b/src/Components/HelpCenter/TabsManageAc/HowToAccess.js
index 8abce58d..aa060356 100644
--- a/src/Components/HelpCenter/TabsManageAc/HowToAccess.js
+++ b/src/Components/HelpCenter/TabsManageAc/HowToAccess.js
@@ -24,7 +24,7 @@ import styled from 'styled-components';
export default function HowtoAccess(props) {
return(
- <Card contrast={props.contrast}>
+ <Card>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
<div style={{marginBottom: "9px"}}>
<span>{props.title}</span>
@@ -48,16 +48,17 @@ export default function HowtoAccess(props) {
const Card = styled.div`
margin-bottom: 5px;
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
- box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"};
+ background-color: #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
padding: 30px;
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color: #666;
span {
font-size: 14px;
font-weight: bold;
}
a {
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ color: #00bcd4;
+ text-decoration: none;
:hover {
text-decoration: underline;
}
diff --git a/src/Components/HelpCenter/TabsManageAc/HowToChange.js b/src/Components/HelpCenter/TabsManageAc/HowToChange.js
index acaf53e5..1b119e99 100644
--- a/src/Components/HelpCenter/TabsManageAc/HowToChange.js
+++ b/src/Components/HelpCenter/TabsManageAc/HowToChange.js
@@ -24,7 +24,7 @@ import styled from 'styled-components';
export default function HowToDo(props) {
return(
- <Card contrast={props.contrast}>
+ <Card>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
<div style={{marginBottom: "9px"}}>
<span>{props.title}</span>
@@ -49,16 +49,17 @@ export default function HowToDo(props) {
const Card = styled.div`
margin-bottom: 5px;
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
- box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"};
+ background-color: #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
padding: 30px;
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color: #666;
span {
font-size: 14px;
font-weight: bold;
}
a {
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ color: #00bcd4;
+ text-decoration: none;
:hover {
text-decoration: underline;
}
diff --git a/src/Components/HelpCenter/TabsManageAc/HowToDo.js b/src/Components/HelpCenter/TabsManageAc/HowToDo.js
index 23fbc07e..f2df2d29 100644
--- a/src/Components/HelpCenter/TabsManageAc/HowToDo.js
+++ b/src/Components/HelpCenter/TabsManageAc/HowToDo.js
@@ -16,49 +16,50 @@ 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 from 'react';
import styled from 'styled-components';
export default function HowTodo(props) {
- return (
- <Card contrast={props.contrast}>
- <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet" />
- <div style={{ marginBottom: "9px" }}>
+ return(
+ <Card>
+ <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
+ <div style={{marginBottom: "9px"}}>
<span>{props.title}</span>
</div>
<p> Para fazer o cadastro é rapidinho: </p>
<ol>
<li>Acesse a <a href="/" target="_blank">Página Inicial</a> da Plataforma.</li>
-
+
<li>Clique em “Cadastre-se†no canto superior direito da página.</li>
-
+
<li> Preencha os campos solicitados.</li>
-
+
<li>Clique em “Cadastrarâ€.</li>
</ol>
-
+
<p>Pronto! Você será conectado automaticamente.</p>
<p>Nas próximas vezes que acessar a Plataforma, clique em “Entrar†e faça o login com seus dados de cadastro.</p>
-
+
</Card>
);
}
const Card = styled.div`
margin-bottom: 5px;
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
- box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"};
+ background-color: #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
padding: 30px;
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color: #666;
span {
font-size: 14px;
font-weight: bold;
}
a {
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ color: #00bcd4;
+ text-decoration: none;
:hover {
text-decoration: underline;
}
diff --git a/src/Components/HelpCenter/TabsManageAc/Why.js b/src/Components/HelpCenter/TabsManageAc/Why.js
index 327481ad..09c243b0 100644
--- a/src/Components/HelpCenter/TabsManageAc/Why.js
+++ b/src/Components/HelpCenter/TabsManageAc/Why.js
@@ -25,7 +25,7 @@ import styled from 'styled-components';
export default function Why(props) {
return(
- <Card contrast={props.contrast}>
+ <Card>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
<div style={{marginBottom: "9px"}}>
<span>{props.title}</span>
@@ -48,10 +48,10 @@ export default function Why(props) {
const Card = styled.div`
margin-bottom: 5px;
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
- box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"};
+ background-color: #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
padding: 30px;
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color: #666;
span {
font-size: 14px;
font-weight: bold;
diff --git a/src/Components/HelpCenter/TabsNetPart/How.js b/src/Components/HelpCenter/TabsNetPart/How.js
index b110d153..221667e3 100644
--- a/src/Components/HelpCenter/TabsNetPart/How.js
+++ b/src/Components/HelpCenter/TabsNetPart/How.js
@@ -25,7 +25,7 @@ import styled from 'styled-components';
export default function How(props) {
return(
- <Card contrast={props.contrast}>
+ <Card>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
<div style={{marginBottom: "9px"}}>
<span>{props.title}</span>
@@ -51,10 +51,10 @@ export default function How(props) {
const Card = styled.div`
margin-bottom: 5px;
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
- box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"};
+ background-color: #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
padding: 30px;
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color: #666;
span {
font-size: 14px;
font-weight: bold;
diff --git a/src/Components/HelpCenter/TabsNetPart/What.js b/src/Components/HelpCenter/TabsNetPart/What.js
index d68e07f9..8171c7e4 100644
--- a/src/Components/HelpCenter/TabsNetPart/What.js
+++ b/src/Components/HelpCenter/TabsNetPart/What.js
@@ -25,7 +25,7 @@ import styled from 'styled-components';
export default function What(props) {
return(
- <Card contrast={props.contrast}>
+ <Card>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
<div style={{marginBottom: "9px"}}>
<span>{props.title}</span>
@@ -52,10 +52,10 @@ export default function What(props) {
const Card = styled.div`
margin-bottom: 5px;
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
- box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"};
+ background-color: #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
padding: 30px;
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color: #666;
span {
font-size: 14px;
font-weight: bold;
diff --git a/src/Components/HelpCenter/TabsPlataformaMEC/How.js b/src/Components/HelpCenter/TabsPlataformaMEC/How.js
index dfb466be..9834d939 100644
--- a/src/Components/HelpCenter/TabsPlataformaMEC/How.js
+++ b/src/Components/HelpCenter/TabsPlataformaMEC/How.js
@@ -21,7 +21,7 @@ import styled from "styled-components";
export default function How(props) {
return (
- <Card contrast={props.contrast}>
+ <Card>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
rel="stylesheet"
@@ -29,11 +29,11 @@ export default function How(props) {
<div style={{ marginBottom: "9px" }}>
<span>{props.title}</span>
</div>
- <div>
+ <div style={{ width: "640px", height: "360px" }}>
<iframe
title="Video Página Ajuda"
- width="100%"
- height={window.innerHeight}
+ width="640"
+ height="360"
src="https://www.youtube.com/embed/CRW5h2pHugM"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
@@ -45,29 +45,36 @@ export default function How(props) {
}
const Card = styled.div`
- background: ${props => props.contrast === "" ? "#fff" : "black"};
+ margin-bottom: 5px;
+ background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
- padding: 2em 1.5em;
- border: ${props => props.contrast === "" ? "none" : "1px solid white"};
- color: ${props => props.contrast === "" ? "#666" : "white"};
- font-weight: lighter;
-
+ padding: 30px;
+ color: #666;
span {
font-size: 14px;
font-weight: bold;
}
a {
- font-weight: lighter;
- font-family: 'Roboto', 'sans-serif';
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- :hover{
- cursor: pointer;
- font-weight: 500;
+ color: #00bcd4;
+ text-decoration: none;
+ :hover {
+ text-decoration: underline;
}
}
+ ul {
+ padding-left: 0 !important;
+ margin-top: 0;
+ margin-bottom: 10px;
+ line-height: 1.42857143;
+ }
+
+ li {
+ list-style-type: none;
+ font-size: 14px;
+ }
+
p {
margin: 0 0 10px;
font-size: 15px;
diff --git a/src/Components/HelpCenter/TabsPlataformaMEC/Software.js b/src/Components/HelpCenter/TabsPlataformaMEC/Software.js
index 4bd51797..9da4c8bd 100644
--- a/src/Components/HelpCenter/TabsPlataformaMEC/Software.js
+++ b/src/Components/HelpCenter/TabsPlataformaMEC/Software.js
@@ -87,7 +87,7 @@ const softwares = [
export default function Software(props) {
return (
- <Card contrast={props.contrast}>
+ <Card>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
rel="stylesheet"
@@ -134,18 +134,24 @@ export default function Software(props) {
}
const Card = styled.div`
- background: ${props => props.contrast === "" ? "#fff" : "black"};
+ margin-bottom: 5px;
+ background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
- padding: 2em 1.5em;
- border: ${props => props.contrast === "" ? "none" : "1px solid white"};
- color: ${props => props.contrast === "" ? "#666" : "white"};
- font-weight: lighter;
-
+ padding: 30px;
+ color: #666;
span {
font-size: 14px;
font-weight: bold;
}
+ a {
+ color: #00bcd4;
+ text-decoration: none;
+ :hover {
+ text-decoration: underline;
+ }
+ }
+
ul {
padding-left: 0 !important;
margin-top: 0;
@@ -158,17 +164,6 @@ const Card = styled.div`
font-size: 14px;
}
- a {
- font-weight: lighter;
- font-family: 'Roboto', 'sans-serif';
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- :hover{
- cursor: pointer;
- font-weight: 500;
- }
- }
-
p {
margin: 0 0 10px;
font-size: 15px;
diff --git a/src/Components/HelpCenter/TabsPlataformaMEC/Types.js b/src/Components/HelpCenter/TabsPlataformaMEC/Types.js
index 0858c1f9..1d30662b 100644
--- a/src/Components/HelpCenter/TabsPlataformaMEC/Types.js
+++ b/src/Components/HelpCenter/TabsPlataformaMEC/Types.js
@@ -30,7 +30,7 @@ const tipos = [
export default function Types(props) {
return (
- <Card contrast={props.contrast}>
+ <Card>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
rel="stylesheet"
@@ -57,13 +57,11 @@ export default function Types(props) {
}
const Card = styled.div`
- background: ${props => props.contrast === "" ? "#fff" : "black"};
+ margin-bottom: 5px;
+ background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
- padding: 2em 1.5em;
- border: ${props => props.contrast === "" ? "none" : "1px solid white"};
- color: ${props => props.contrast === "" ? "#666" : "white"};
- font-weight: lighter;
-
+ padding: 30px;
+ color: #666;
span {
font-size: 14px;
font-weight: bold;
@@ -81,19 +79,8 @@ const Card = styled.div`
font-size: 14px;
}
- a {
- font-weight: lighter;
- font-family: 'Roboto', 'sans-serif';
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- :hover{
- cursor: pointer;
- font-weight: 500;
- }
- }
-
p {
margin: 0 0 10px;
font-size: 15px;
}
-`;
\ No newline at end of file
+`;
diff --git a/src/Components/HelpCenter/TabsPlataformaMEC/Understand.js b/src/Components/HelpCenter/TabsPlataformaMEC/Understand.js
index d267d182..4696bce0 100644
--- a/src/Components/HelpCenter/TabsPlataformaMEC/Understand.js
+++ b/src/Components/HelpCenter/TabsPlataformaMEC/Understand.js
@@ -21,7 +21,7 @@ import styled from "styled-components";
export default function Understand(props) {
return (
- <Card contrast={props.contrast}>
+ <Card>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
rel="stylesheet"
@@ -59,32 +59,18 @@ export default function Understand(props) {
}
const Card = styled.div`
- background: ${props => props.contrast === "" ? "#fff" : "black"};
+ margin-bottom: 5px;
+ background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
- padding: 2em 1.5em;
- border: ${props => props.contrast === "" ? "none" : "1px solid white"};
- color: ${props => props.contrast === "" ? "#666" : "white"};
- font-weight: lighter;
-
+ padding: 30px;
+ color: #666;
span {
font-size: 14px;
font-weight: bold;
}
- a {
- font-weight: lighter;
- font-family: 'Roboto', 'sans-serif';
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- :hover{
- cursor: pointer;
- font-weight: 500;
- }
- }
-
p {
margin: 0 0 10px;
font-size: 15px;
}
`;
-
diff --git a/src/Components/HelpCenter/TabsPlataformaMEC/What.js b/src/Components/HelpCenter/TabsPlataformaMEC/What.js
index 07415662..8bab746b 100644
--- a/src/Components/HelpCenter/TabsPlataformaMEC/What.js
+++ b/src/Components/HelpCenter/TabsPlataformaMEC/What.js
@@ -21,7 +21,7 @@ import styled from "styled-components";
export default function What(props) {
return (
- <Card contrast={props.contrast}>
+ <Card>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
rel="stylesheet"
@@ -92,26 +92,21 @@ export default function What(props) {
}
const Card = styled.div`
- background: ${props => props.contrast === "" ? "#fff" : "black"};
+ margin-bottom: 5px;
+ background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
- padding: 2em 1.5em;
- border: ${props => props.contrast === "" ? "none" : "1px solid white"};
- color: ${props => props.contrast === "" ? "#666" : "white"};
- font-weight: lighter;
-
+ padding: 30px;
+ color: #666;
span {
font-size: 14px;
font-weight: bold;
}
a {
- font-weight: lighter;
- font-family: 'Roboto', 'sans-serif';
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- :hover{
- cursor: pointer;
- font-weight: 500;
+ color: #00bcd4;
+ text-decoration: none;
+ :hover {
+ text-decoration: underline;
}
}
diff --git a/src/Components/HelpCenter/TabsPlataformaMEC/Which.js b/src/Components/HelpCenter/TabsPlataformaMEC/Which.js
index a03cc587..b1fe77ed 100644
--- a/src/Components/HelpCenter/TabsPlataformaMEC/Which.js
+++ b/src/Components/HelpCenter/TabsPlataformaMEC/Which.js
@@ -28,7 +28,7 @@ const parcas = [
export default function Which(props) {
return (
- <Card contrast={props.contrast}>
+ <Card>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
rel="stylesheet"
@@ -50,13 +50,11 @@ export default function Which(props) {
}
const Card = styled.div`
- background: ${props => props.contrast === "" ? "#fff" : "black"};
+ margin-bottom: 5px;
+ background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
- padding: 2em 1.5em;
- border: ${props => props.contrast === "" ? "none" : "1px solid white"};
- color: ${props => props.contrast === "" ? "#666" : "white"};
- font-weight: lighter;
-
+ padding: 30px;
+ color: #666;
span {
font-size: 14px;
font-weight: bold;
@@ -74,17 +72,6 @@ const Card = styled.div`
font-size: 14px;
}
- a {
- font-weight: lighter;
- font-family: 'Roboto', 'sans-serif';
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- :hover{
- cursor: pointer;
- font-weight: 500;
- }
- }
-
p {
margin: 0 0 10px;
font-size: 15px;
diff --git a/src/Components/HelpCenter/TabsResourseFind/HowToDo.js b/src/Components/HelpCenter/TabsResourseFind/HowToDo.js
index abdfa089..204ca709 100644
--- a/src/Components/HelpCenter/TabsResourseFind/HowToDo.js
+++ b/src/Components/HelpCenter/TabsResourseFind/HowToDo.js
@@ -24,7 +24,7 @@ import { Busca } from "ImportImages.js";
export default function HowToDo(props) {
return(
- <Card contrast={props.contrast}>
+ <Card>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
<div style={{marginBottom: "9px"}}>
<span>{props.title}</span>
@@ -52,21 +52,26 @@ export default function HowToDo(props) {
const Card = styled.div`
margin-bottom: 5px;
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
- box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"};
+ background-color: #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
padding: 30px;
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color: #666;
span {
font-size: 14px;
font-weight: bold;
}
+
+ img {
+ height: auto;
+ width: 100%;
+ }
a {
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ color: #00bcd4;
+ text-decoration: none;
:hover {
text-decoration: underline;
}
}
-
ol {
margin-top: 0;
margin-bottom: 10px;
@@ -82,4 +87,6 @@ const Card = styled.div`
font-size: 15px;
}
+
+
`
\ No newline at end of file
diff --git a/src/Components/HelpCenter/TabsResourseFind/HowToFilter.js b/src/Components/HelpCenter/TabsResourseFind/HowToFilter.js
index 5cbf2a4c..7ea8e558 100644
--- a/src/Components/HelpCenter/TabsResourseFind/HowToFilter.js
+++ b/src/Components/HelpCenter/TabsResourseFind/HowToFilter.js
@@ -24,7 +24,7 @@ import { Filtros } from "ImportImages.js";
export default function HowToFilter(props) {
return(
- <Card contrast={props.contrast}>
+ <Card>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
<div style={{marginBottom: "9px"}}>
<span>{props.title}</span>
@@ -45,10 +45,10 @@ export default function HowToFilter(props) {
const Card = styled.div`
margin-bottom: 5px;
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
- box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"};
+ background-color: #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
padding: 30px;
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color: #666;
span {
font-size: 14px;
font-weight: bold;
diff --git a/src/Components/HelpCenter/TabsResourseFind/HowToRank.js b/src/Components/HelpCenter/TabsResourseFind/HowToRank.js
index 47f8cfce..cb2a04b6 100644
--- a/src/Components/HelpCenter/TabsResourseFind/HowToRank.js
+++ b/src/Components/HelpCenter/TabsResourseFind/HowToRank.js
@@ -25,7 +25,7 @@ import styled from 'styled-components';
export default function HowToRank(props) {
return(
- <Card contrast={props.contrast}>
+ <Card>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
<div style={{marginBottom: "9px"}}>
<span>{props.title}</span>
@@ -46,10 +46,10 @@ export default function HowToRank(props) {
const Card = styled.div`
margin-bottom: 5px;
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
- box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"};
+ background-color: #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
padding: 30px;
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color: #666;
span {
font-size: 14px;
font-weight: bold;
diff --git a/src/Components/HelpCenter/TabsResoursePub/How.js b/src/Components/HelpCenter/TabsResoursePub/How.js
index 86a03146..a84cd304 100644
--- a/src/Components/HelpCenter/TabsResoursePub/How.js
+++ b/src/Components/HelpCenter/TabsResoursePub/How.js
@@ -24,7 +24,7 @@ import styled from 'styled-components';
export default function How(props) {
return(
- <Card contrast={props.contrast}>
+ <Card>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
<div style={{marginBottom: "9px"}}>
<span>{props.title}</span>
@@ -62,16 +62,17 @@ export default function How(props) {
const Card = styled.div`
margin-bottom: 5px;
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
- box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"};
+ background-color: #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
padding: 30px;
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color: #666;
span {
font-size: 14px;
font-weight: bold;
}
a {
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ color: #00bcd4;
+ text-decoration: none;
:hover {
text-decoration: underline;
}
diff --git a/src/Components/HelpCenter/TabsResoursePub/Which.js b/src/Components/HelpCenter/TabsResoursePub/Which.js
index e3a19420..49a5e1f1 100644
--- a/src/Components/HelpCenter/TabsResoursePub/Which.js
+++ b/src/Components/HelpCenter/TabsResoursePub/Which.js
@@ -24,7 +24,7 @@ import styled from 'styled-components';
export default function Which(props) {
return(
- <Card contrast={props.contrast}>
+ <Card>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
<div style={{marginBottom: "9px"}}>
<span>{props.title}</span>
@@ -55,10 +55,10 @@ export default function Which(props) {
const Card = styled.div`
margin-bottom: 5px;
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
- box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"};
+ background-color: #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
padding: 30px;
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color: #666;
span {
font-size: 14px;
font-weight: bold;
diff --git a/src/Components/HelpCenter/TabsResoursePub/Why.js b/src/Components/HelpCenter/TabsResoursePub/Why.js
index 349875cc..ca1a16b9 100644
--- a/src/Components/HelpCenter/TabsResoursePub/Why.js
+++ b/src/Components/HelpCenter/TabsResoursePub/Why.js
@@ -23,31 +23,31 @@ import styled from 'styled-components';
export default function Why(props) {
- return (
- <Card contrast={props.contrast}>
- <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet" />
- <div style={{ marginBottom: "9px" }}>
+ return(
+ <Card>
+ <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
+ <div style={{marginBottom: "9px"}}>
<span>{props.title}</span>
</div>
<p>
- Ao enviar um recurso você estará ajudando a fortalecer a distribuição
- de recursos educacionais digitais para o ensino básico brasileiro e
- contribuindo na valorização da pluralidade e da diversidade da educação
+ Ao enviar um recurso você estará ajudando a fortalecer a distribuição
+ de recursos educacionais digitais para o ensino básico brasileiro e
+ contribuindo na valorização da pluralidade e da diversidade da educação
brasileira.
</p>
-
+
<p>
- A Plataforma MEC é um meio seguro e um site de referência para a
- publicação e disseminação de Recursos Educacionais Digitais. Aproveite
- esse espaço para compartilhar com professores de todo o Brasil recursos
- criados por você ou aquele recurso de outro autor que você usou em aula
+ A Plataforma MEC é um meio seguro e um site de referência para a
+ publicação e disseminação de Recursos Educacionais Digitais. Aproveite
+ esse espaço para compartilhar com professores de todo o Brasil recursos
+ criados por você ou aquele recurso de outro autor que você usou em aula
e seus alunos gostaram!
</p>
<p>
- A partir do momento que seu recurso estiver publicado na Plataforma, os
- usuários poderão interagir com seu recurso e você receberá as
- notificações dos comentários, avaliações e curtidas. Cada uma dessas
- interações contam para que seu recurso ganhe uma posição de destaque
+ A partir do momento que seu recurso estiver publicado na Plataforma, os
+ usuários poderão interagir com seu recurso e você receberá as
+ notificações dos comentários, avaliações e curtidas. Cada uma dessas
+ interações contam para que seu recurso ganhe uma posição de destaque
na Plataforma.
</p>
<p>Participe dessa rede de colaboração de fomento da qualidade da educação básica!</p>
@@ -57,10 +57,10 @@ export default function Why(props) {
const Card = styled.div`
margin-bottom: 5px;
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
- box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"};
+ background-color: #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
padding: 30px;
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color: #666;
span {
font-size: 14px;
font-weight: bold;
diff --git a/src/Components/HelperFunctions/getAxiosConfig.js b/src/Components/HelperFunctions/getAxiosConfig.js
index b987089a..8ced7d5b 100644
--- a/src/Components/HelperFunctions/getAxiosConfig.js
+++ b/src/Components/HelperFunctions/getAxiosConfig.js
@@ -284,6 +284,7 @@ export const validateGoogleLoginToken = (url, config, onSuccess, onError) => {
})
})
.then(data => {
+ console.log(data)
onSuccess(data)
})
.catch(error => {
diff --git a/src/Components/HomeScreenSearchBar.js b/src/Components/HomeScreenSearchBar.js
index ab276143..634b625e 100644
--- a/src/Components/HomeScreenSearchBar.js
+++ b/src/Components/HomeScreenSearchBar.js
@@ -24,28 +24,10 @@ import Menu from '@material-ui/core/Menu';
import { Store } from '../Store';
import { List, ListItem, ListItemIcon, ListItemText, MenuItem, Button, TextField } from '@material-ui/core'
import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
-import { makeStyles } from '@material-ui/core/styles';
import SearchIcon from '@material-ui/icons/Search';
+/*import {Link} from 'react-router-dom'*/
-export const useStyles = makeStyles(theme => ({
- darkTextField: {
- maxWidth: "100%",
- fontSize: "15px",
- color: "white",
- width: "100%"
- },
- lightTextField: {
- maxWidth: "100%",
- fontSize: "15px",
- color: "black",
- width: "100%"
- }
-}));
-
-export default function HomeScreenSearchBar() {
-
- const classes = useStyles();
-
+export default function HomeScreenSearchBar(props) {
const [query, setQuery] = useState("")
const [searchClass, setSearchClass] = useState('LearningObject')
@@ -85,9 +67,9 @@ export default function HomeScreenSearchBar() {
}
const options = [
- { text: "Recursos", value: "LearningObject", color: state.contrast === "" ? "#ff7f00" : "yellow", backColor: state.contrast === "" ? "#ff7f00" : "black"},
- { text: "Coleções", value: "Collection", color: state.contrast === "" ? "#673ab7" : "yellow", backColor: state.contrast === "" ? "#673ab7" : "black"},
- { text: "Usuários", value: "User", color: state.contrast === "" ? "#00bcd4" : "yellow", backColor: state.contrast === "" ? "#00bcd4" : "black"},
+ { text: "Recursos", value: "LearningObject", color: "#ff7f00" },
+ { text: "Coleções", value: "Collection", color: "#673ab7" },
+ { text: "Usuários", value: "User", color: "#00bcd4" },
]
const [anchorEl, setAnchorEl] = React.useState(null);
const [selectedIndex, setSelectedIndex] = React.useState(0);
@@ -97,6 +79,7 @@ export default function HomeScreenSearchBar() {
};
const handleMenuItemClick = (event, index, value) => {
+ console.log(value)
setSelectedIndex(index);
setSearchClass(value)
setAnchorEl(null);
@@ -106,26 +89,26 @@ export default function HomeScreenSearchBar() {
setAnchorEl(null);
};
- return (
+ const WIDTH = window.innerWidth;
- <StyledGrid container contrast={state.contrast}>
+ return (
+
+ <StyledGrid container>
{goSearch && <Redirect to={`/busca?page=0&results_per_page=12&order=review_average&query=${state.search.query}&search_class=${state.search.class}`} />}
- <Grid item md={7} xs={12} className={state.contrast === "" ? "first white" : "first black"}>
+ <Grid item md={7} xs={12} className="first white">
<StyledTextField
- contrast={state.contrast}
id="standard-search"
placeholder="O que está buscando?"
type="search"
margin="normal"
value={query}
- InputProps={state.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
onChange={handleChange}
onKeyPress={handleKeyDown}
fullwidth
/>
</Grid>
<Grid item md={3} xs={12} className="second white">
- <List component="nav" aria-label="Recurso" className={`${state.contrast}BackColor`} >
+ <List component="nav" aria-label="Recurso">
<ListItem
button
aria-haspopup="true"
@@ -138,7 +121,7 @@ export default function HomeScreenSearchBar() {
primary={options[selectedIndex].text}
/>
<ListItemIcon>
- <ArrowDropDownIcon className={`${state.contrast}IconColor`} />
+ <ArrowDropDownIcon />
</ListItemIcon>
</ListItem>
</List>
@@ -148,28 +131,27 @@ export default function HomeScreenSearchBar() {
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
- MenuListProps={{
- disablePadding: true
- }}
>
- <div className={`${state.contrast}BackColor`}>
- {options.map((option, index) => (
- <MenuItem
- key={option.value}
- selected={index === selectedIndex}
- onClick={(event) => handleMenuItemClick(event, index, option.value)}
- style={{ color: option.color, textDecoration: state.contrast === "" ? "none" : "underline" }}
- >
- {option.text}
- </MenuItem>
- ))}
- </div>
+ {options.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ selected={index === selectedIndex}
+ onClick={(event) => handleMenuItemClick(event, index, option.value)}
+ style={{ color: option.color }}
+ >
+ {option.text}
+ </MenuItem>
+ ))}
</Menu>
</Grid>
<Grid item md={2} xs={12}>
<div style={{ height: "100%" }}>
- <Button title="Pesquisar" onClick={handleKeyDown} className="custom-button" style={{ backgroundColor: options[selectedIndex].backColor, color: "#fff" }}>
- <SearchIcon fontSize="large" style={state.contrast === "" ? {color: "white"} : {color: "yellow"}}/>
+ <Button onClick={handleKeyDown} className="custom-button" style={{ backgroundColor: options[selectedIndex].color, color: "#fff" }}>
+ {
+ WIDTH < 503 &&
+ <span>Buscar</span>
+ }
+ <SearchIcon fontSize="large" />
</Button>
</div>
</Grid>
@@ -178,65 +160,35 @@ export default function HomeScreenSearchBar() {
}
const StyledTextField = styled(TextField)`
- background-color: ${props => props.contrast === "" ? "white" : "black"};
max-width: 100%;
font-size : 15px;
font-weight : lighter;
+ color : inherit;
width : 90% !important;
margin-right : 10px !important;
margin-left : 10px !important;
-
- .MuiOutlinedInput-root {
- &.Mui-focused fieldset {
- border-color: ${props => props.contrast === "" ? "#ff7f00" : "yellow"};
- }
- fieldset {
- border-color: ${props => props.contrast === "" ? "#666" : "white"};
- }
- }
-
- label{
- color: ${props => props.contrast === "" ? "#666" : "white"};
- }
-
- label.Mui-focused {
- color: ${props => props.contrast === "" ? "#ff7f00" : "yellow"};
- }
-
- .MuiFormHelperText-root {
- text-align : left;
- color: ${props => props.contrast === "" ? "#666" : "white"};
- }
-
.MuiInput-underline::after {
- border-bottom: 2px solid ${props => props.contrast === "" ? "#ff7f00" : "yellow"};
+ border-bottom : none !important;
}
-
`
const StyledGrid = styled(Grid)`
- margin-top : 20px;
+ padding-top : 20px;
- .first {
- border: ${props => props.contrast === "" ? "" : "1px solid white"};
+ .MuiGrid-item {
@media screen and (max-width : 502px) {
- border-top-left-radius : 5px;
- border-top-right-radius : 5px;
- }
- @media screen and (min-width : 502px) {
- border-top-left-radius : 5px;
- border-bottom-left-radius : 5px;
+ border-radius : 5px;
+ margin-bottom : 10px !important;
}
}
- .second {
+ .first {
@media screen and (max-width : 502px) {
- border-left: ${props => props.contrast === "" ? "" : "1px solid white"};
- border-right: ${props => props.contrast === "" ? "" : "1px solid white"};
+ margin-top : 10px;
}
@media screen and (min-width : 502px) {
- border-top: ${props => props.contrast === "" ? "" : "1px solid white"};
- border-bottom: ${props => props.contrast === "" ? "" : "1px solid white"};
+ border-top-left-radius : 5px;
+ border-bottom-left-radius : 5px;
}
}
@@ -244,10 +196,12 @@ const StyledGrid = styled(Grid)`
background-color : #fff;
}
- .black {
- background-color : black;
- }
+ .MuiList-root {
+ @media screen and (min-width : 502px) {
+ border-left: 1px solid #ccc !important;
+ }
+ }
.MuiPaper-root {
width : 100% !important;
}
@@ -256,7 +210,6 @@ const StyledGrid = styled(Grid)`
}
.custom-button {
- border: ${props => props.contrast === "" ? "" : "1px solid white"};
height: 100% !important;
width: 100% !important;
margin: 0 !important;
@@ -264,10 +217,8 @@ const StyledGrid = styled(Grid)`
align-items : center !important;
@media screen and (max-width : 502px) {
- border-top-left-radius : 0 !important;
- border-top-right-radius : 0 !important;
- border-bottom-left-radius : 5px !important;
- border-bottom-right-radius : 5px !important;
+ padding-top : 10px;
+ border-radius : 5px;
}
@media screen and (min-width : 502px) {
diff --git a/src/Components/IframeOverlay/DrawerContent.js b/src/Components/IframeOverlay/DrawerContent.js
index 8936cfd8..72c1d659 100644
--- a/src/Components/IframeOverlay/DrawerContent.js
+++ b/src/Components/IframeOverlay/DrawerContent.js
@@ -26,6 +26,10 @@ export default function DrawerContent(props) {
search(props.tag);
}, [props.tag]);
+ useEffect(() => {
+ console.log(resources);
+ }, [resources]);
+
return(
<Wrapper container
direction="row"
diff --git a/src/Components/LoadingSpinner.js b/src/Components/LoadingSpinner.js
index e2559974..68c447c4 100644
--- a/src/Components/LoadingSpinner.js
+++ b/src/Components/LoadingSpinner.js
@@ -1,11 +1,11 @@
import React from 'react';
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>
+ const LoadingSpinner = (props) => (
+ <div style={{display:"flex", flexDirection:"column", alignItems:"center", justifyContent:"center"}}>
+ <img alt="" src={LoadingGif} />
+ <span style={{textTransform:"uppercase"}}>{props.text}</span>
</div>
-);
+ );
-export default LoadingSpinner;
+ export default LoadingSpinner;
diff --git a/src/Components/LoginContainerFunction.js b/src/Components/LoginContainerFunction.js
index 086cca3d..0e79abf1 100644
--- a/src/Components/LoginContainerFunction.js
+++ b/src/Components/LoginContainerFunction.js
@@ -15,39 +15,40 @@ 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} from "react";
import GoogleLogin from 'react-google-login'
import { Button } from '@material-ui/core';
//import FacebookLogin from 'react-facebook-login';
import CloseIcon from '@material-ui/icons/Close';
import styled from 'styled-components'
-import { device } from './device.js'
+import {device} from './device.js'
import LabeledCheckbox from './Checkbox.js'
import FormInput from "./FormInput.js"
import GoogleLogo from "../img/logo_google.svg"
import ValidateUserInput from './HelperFunctions/FormValidationFunction.js'
-import { Link } from 'react-router-dom'
-import { apiUrl } from '../env.js'
+import {Link} from 'react-router-dom'
+import {apiUrl} from '../env.js'
-async function handleGoogleAttempt() {
- let request_url = (
+async function handleGoogleAttempt () {
+ console.log("handleGoogleAttempt")
+ let request_url = (
`${apiUrl}/omniauth/google_oauth2?auth_origin_url=` + window.location.href + '&omniauth_window_type=sameWindow&resource_class=User'
)
window.location.replace(request_url)
}
-export default function LoginContainer(props) {
+export default function LoginContainer (props) {
const [formEmail, setEmail] = useState(
{
- key: false,
- value: localStorage.getItem("@portalmec/uid") || "",
+ key : false,
+ value : localStorage.getItem("@portalmec/uid") || "",
}
)
const [formSenha, setSenha] = useState(
{
- key: false,
- value: localStorage.getItem("@portalmec/senha") || ""
+ key : false,
+ value : localStorage.getItem("@portalmec/senha") ||""
}
)
@@ -63,39 +64,37 @@ export default function LoginContainer(props) {
const userInput = e.target.value
const flag = ValidateUserInput(type, userInput)
- if (type === 'email') {
- setEmail({
- ...formEmail,
- key: flag,
- value: userInput
+ if(type === 'email') {
+ setEmail({...formEmail,
+ key : flag,
+ value : userInput
})
+ // {/*console.log(formEmail)*/}
}
- else if (type === 'password') {
- setSenha({
- ...formSenha,
- key: flag,
- value: userInput
+ else if(type === 'password') {
+ setSenha({...formSenha,
+ key : flag,
+ value : userInput
})
+ // {/*console.log(formSenha)*/}
}
}
const limpaCamposForm = () => {
- setEmail({
- ...formEmail,
- key: false,
- value: ''
+ setEmail({...formEmail,
+ key : false,
+ value : ''
});
- setSenha({
- ...formSenha,
- key: false,
- value: ''
+ setSenha({...formSenha,
+ key : false,
+ value : ''
})
}
const onSubmit = (e) => {
e.preventDefault()
- const login = { email: formEmail.value, senha: formSenha.value, checkboxChecked: checkboxControl }
+ const login = {email : formEmail.value, senha : formSenha.value, checkboxChecked : checkboxControl}
if (!(formEmail.key || formSenha.key)) {
props.handleLoginInfo(login)
@@ -106,76 +105,70 @@ export default function LoginContainer(props) {
return (
<div>
- <ContainerStyled contrast={props.contrast}>
+ <ContainerStyled >
<DialogHeaderStyled>
- <span style={{ width: "32px" }} />
- <H2Styled contrast={props.contrast}>
- Entrar
+ <span style={{width:"32px"}}/>
+ <H2Styled> Entrar
</H2Styled>
- <StyledCloseModalButton
- onClick={props.handleClose}
- contrast={props.contrast}
- >
- <CloseIcon className="icon" />
+ <StyledCloseModalButton onClick={props.handleClose}>
+ <CloseIcon/>
</StyledCloseModalButton>
</DialogHeaderStyled>
<DialogContentDiv>
<SocialConnectDiv>
- <GoogleLoginButton contrast={props.contrast} onClick={handleGoogleAttempt}>
- <img src={GoogleLogo} alt="google-logo" className="google-logo" />
- <span>Usando o Google</span>
- </GoogleLoginButton>
+ <GoogleLoginButton onClick={handleGoogleAttempt}>
+ <img src={GoogleLogo} alt="google-logo" className="google-logo"/>
+ <span>Usando o Google</span>
+ </GoogleLoginButton>
</SocialConnectDiv>
<H3Div>
- <H3Styled contrast={props.contrast}>
- <RightSideStrikedH3 contrast={props.contrast} />
- <span style={{ verticalAlign: "middle" }}>ou</span>
- <LeftSideStrikedH3 contrast={props.contrast} />
+ <H3Styled>
+ <RightSideStrikedH3/>
+ <span style={{verticalAlign:"middle"}}>ou</span>
+ <LeftSideStrikedH3/>
</H3Styled>
</H3Div>
<form onSubmit={e => onSubmit(e)}>
<FormInput
- contrast={props.contrast}
inputType={"text"}
name={"email"}
value={formEmail.value}
placeholder={"E-mail"}
handleChange={e => handleChange(e, 'email')}
required={true}
- error={formEmail.key}
- help={formEmail.key ? (formEmail.value.length === 0 ? "Faltou preencher seu e-mail." : "Insira um endereço de e-mail válido") : ""}
+ error = {formEmail.key}
+ help = {formEmail.key ? ( formEmail.value.length === 0 ? "Faltou preencher seu e-mail." : <span>Insira um endereço de e-mail válido.<br/>Por exemplo: seunome@gmail.com, seunome@hotmail.com</span>) : ""}
/>
- <br />
+ <br/>
<FormInput
- contrast={props.contrast}
inputType={"password"}
name={"senha"}
value={formSenha.value}
placeholder={"Senha"}
handleChange={e => handleChange(e, 'password')}
required={true}
- error={formSenha.key}
- help={formSenha.key ? (formSenha.value.length === 0 ? "Faltou digitar sua senha." : "A senha precisa ter no mÃnimo 8 caracteres.") : ""}
+ error = {formSenha.key}
+ help = {formSenha.key ? (formSenha.value.length === 0 ? "Faltou digitar sua senha." : "A senha precisa ter no mÃnimo 8 caracteres.") : ""}
/>
- <br />
+ <br/>
- <RememberRecover contrast={props.contrast}>
- <LabeledCheckbox contrast={props.contrast} label={<StyledLabel contrast={props.contrast}><StyledSpan>Lembrar-me</StyledSpan></StyledLabel>} handleChange={() => setCheckbox(!checkboxControl)} />
- <UserForgotTheirPasswordSpan contrast={props.contrast}>Esqueceu a senha? <Link to={"/recuperar-senha"} style={props.contrast === "" ? { textAlign: "right", color: "#4cd0e1" } : { textAlign: "right", color: "yellow", textDecoration: "underline" }} onClick={props.handleClose}>Clique aqui!</Link></UserForgotTheirPasswordSpan>
+ <RememberRecover>
+ <LabeledCheckbox label={<StyledLabel><StyledSpan>Lembrar-me</StyledSpan></StyledLabel>} handleChange={() => setCheckbox(!checkboxControl)}/>
+ <UserForgotTheirPasswordSpan>Esqueceu a senha? <Link to={"/recuperar-senha"} style={{textAlign: "right", color:"#4cd0e1"}} onClick={props.handleClose}>Clique aqui!</Link></UserForgotTheirPasswordSpan>
</RememberRecover>
<ConfirmContainerStyled>
- <StyledLoginButton contrast={props.contrast} type="submit" variant="contained">
- <span style={props.contrast === "" ? { borderRadius: "3px", boxSizing: "border-box", fontFamily: "Roboto, sans serif", fontWeight: "500", color: "#fff" } : { borderRadius: "3px", boxSizing: "border-box", fontFamily: "Roboto, sans serif", fontWeight: "500", color: "yellow" }}>ENTRAR</span>
+ <StyledLoginButton type="submit" variant="contained">
+ <span style={{borderRadius:"3px", boxSizing:"border-box", fontFamily:"Roboto, sans serif", fontWeight:"500", color:"#fff"}}>ENTRAR</span>
</StyledLoginButton>
</ConfirmContainerStyled>
</form>
- <DialogFooterStyled contrast={props.contrast}>
- <span style={props.contrast === "" ? { textAlign: "center", fontSize: "14px", color: "rgb(102, 102, 102)" } : { textAlign: "center", fontSize: "14px", color: "white" }}>Ainda não tem cadastro? <StyledAnchor contrast={props.contrast} href="" onClick={e => switchModal(e)}>CADASTRE-SE</StyledAnchor></span>
+ <DialogFooterStyled>
+ <span style={{textAlign:"center", fontSize: "14px", color:"rgb(102, 102, 102)"}}>Ainda não tem cadastro? <StyledAnchor href="" onClick={e => switchModal(e)}>CADASTRE-SE</StyledAnchor></span>
</DialogFooterStyled>
</DialogContentDiv>
</ContainerStyled>
@@ -184,14 +177,13 @@ export default function LoginContainer(props) {
}
-const ContainerStyled = styled.div`
+ const ContainerStyled = styled.div`
box-sizing : border-box;
- background-color: ${props => props.contrast === "" ? "white" : "black"};
+ background-color : white;
max-width : none;
display : flex;
flex-direction : column;
min-width : 440px;
- border: 1px solid ${props => props.contrast === "" ? "#666" : "white"};
align : center;
padding : 10px;
@@ -205,28 +197,28 @@ const ContainerStyled = styled.div`
min-width : unset !important;
}
-`
+ `
-export const DialogHeaderStyled = styled.div`
+ export const DialogHeaderStyled = styled.div`
text-align : center;
display : flex;
flex-direction : row;
justify-content : space-between;
padding : 10px 26px 0 26px;
height : 64px;
-`
-const H2Styled = styled.h2`
+ `
+ const H2Styled = styled.h2`
align-self : center;
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color : #666;
font-size : 26px;
font-weight : 100;
font-family: 'Roboto', sans serif, 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
justify-content: space-between;
text-align: center;
letter-spacing: .005em;
-`
+ `
-export const StyledCloseModalButton = styled(Button)`
+ export const StyledCloseModalButton = styled(Button)`
display : inline-block;
position : relative;
float : right !important;
@@ -234,87 +226,85 @@ export const StyledCloseModalButton = styled(Button)`
background : transparent !important;
min-width: 0 !important;
width : 40px;
-
- .icon{
- color: ${props => props.contrast === "" ? "#666" : "white"};
- }
-`
-export const DialogContentDiv = styled.div`
+ `
+ export const DialogContentDiv = styled.div`
padding : 20px 30px;
overflow : visible !important;
-`
+ `
-export const SocialConnectDiv = styled.div`
- margin: auto;
-
-`
-export const StyledGoogleLoginButton = styled(GoogleLogin)`
+ export const SocialConnectDiv = styled.div`
+ margin-top : 0;
+ display : flex;
+ flex-direction : row;
+ `
+ export const StyledGoogleLoginButton = styled(GoogleLogin)`
background-color : #fff !important;
color : #666 !important;
border : 1px solid rgb(66, 133, 244);
box-shadow: 0 0 0 1px #4285f4 !important;
-`
+ :hover {
+ background-color: #f4f4f4 !important;
+ }
+ `
-const DialogFooterStyled = styled.div`
+ const DialogFooterStyled = styled.div`
box-sizing : border-box;
font-family : 'Roboto', sans serif;
margin : 20px -20px;
padding-top : 20px;
- border-top: ${props => props.contrast === "" ? "1px #e5e5e5 solid" : "1px white solid"};
+ border-top : 1px #e5e5e5 solid;
justify-content : center;
text-align : center;
line-height : 1.42857143
-`
+ `
export const RightSideStrikedH3 = styled.div`
display : inline-block;
- border-bottom: ${props => props.contrast === "" ? "1px dotted #666" : "1px dotted white"};
+ border-bottom: 1px dotted #666;
vertical-align : middle;
font-weight : 500;
margin-right : 5px;
width : 44%;
-`
+ `
-export const LeftSideStrikedH3 = styled.div`
+ export const LeftSideStrikedH3 = styled.div`
display : inline-block;
- border-bottom: ${props => props.contrast === "" ? "1px dotted #666" : "1px dotted white"};
+ border-bottom: 1px dotted #666;
vertical-align : middle;
font-weight : 500;
margin-left : 5px;
width : 44%;
-`
+ `
-export const H3Div = styled.div`
+ export const H3Div = styled.div`
margin-top : 0;
margin-bottom : 10px;
-`
+ `
-const H3Styled = styled.h3`
+ const H3Styled = styled.h3`
overflow : hidden;
text-align : center;
font-size : 14px;
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color : #666;
margin : 10px 0;
-`
+ `
-const StyledAnchor = styled.a`
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
-`
-const ConfirmContainerStyled = styled.div`
+ const StyledAnchor = styled.a`
+ color : #00bcd4;
+ text-decoration : none;
+ `
+ const ConfirmContainerStyled = styled.div`
display : flex;
margin-top : 10px;
align-items : center;
justify-content : center;
-`
-const StyledLoginButton = styled(Button)`
- background-color: ${props => props.contrast === "" ? "#00bcd4 !important" : "black !important"};
+ `
+ const StyledLoginButton = styled(Button)`
+ background-color : #00bcd4 !important;
box-shadow : none !important;
outline: none !important;
- border: ${props => props.contrast === "" ? 0 : "1px solid white !important"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
- color: ${props => props.contrast === "" ? "" : "yellow !important"};
+ border : 0 !important;
overflow : hidden !important;
width : 35% !important;
display : inline-block !important;
@@ -324,48 +314,52 @@ const StyledLoginButton = styled(Button)`
align-items : center !important;
border-radius: 3px !important;
align-self : 50% !important;
-`
+ :hover {
+ background-color : #00acc1 !important;
+ }
+ `
-const RememberRecover = styled.div`
+ const RememberRecover = styled.div`
display : flex;
justify-content : space-between;
font-size: 12px;
font-weight : 400;
-`
+ `
-const StyledLabel = styled.div`
+ const StyledLabel = styled.div`
box-sizing : border-box;
position : relative;
vertical-align : middle !important;
- color: ${props => props.contrast === "" ? "#666" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
-`
-
-const UserForgotTheirPasswordSpan = styled.span`
- margin-top : 1em;
- font-size : 12px;
- font-weight : 400;
- text-align : right;
- color: ${props => props.contrast === "" ? "#666" : "white"};
-`
-
-const StyledSpan = styled.span`
- font-size : 12px;
- font-weight : 400;
- padding-top : 2px;
-`
+ color : #666;
+ `
+
+ const UserForgotTheirPasswordSpan = styled.span`
+ margin-top : 1em;
+ font-size : 12px;
+ font-weight : 400;
+ text-align : right;
+ color : #666;
+ `
+
+ const StyledSpan = styled.span`
+ font-size : 12px;
+ font-weight : 400;
+ padding-top : 2px;
+ `
export const GoogleLoginButton = styled(Button)`
- background-color: ${props => props.contrast === "" ? "#fff !important" : "black !important"};
- box-shadow: ${props => props.contrast === "" ? "0 0 0 1px #4285f4 !important" : "0 0 0 1px white !important"};
- color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
- text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
-
+ background-color : #fff;
+ box-shadow : 0 0 0 1px #4285f4 !important;
+ color : #666 !important;
font-weight : bolder !important;
font-size : 12px !important;
text-transform: none !important;
width: 40%;
+ ${'' /* .MuiButton-root {
+ min-width : 88px;
+ } */}
+
.google-logo {
max-height : 18px ;
padding-right : 5px;
diff --git a/src/Components/LoginModal.js b/src/Components/LoginModal.js
index eeb51a8c..9ebce191 100644
--- a/src/Components/LoginModal.js
+++ b/src/Components/LoginModal.js
@@ -16,16 +16,16 @@ 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, useState } from 'react';
+import React, {useContext, useState} from 'react';
import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop';
import Zoom from '@material-ui/core/Fade';
import styled from 'styled-components'
import LoginContainer from './LoginContainerFunction.js'
-import { Store } from '../Store.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 {authentication} from './HelperFunctions/getAxiosConfig'
const StyledLogin = styled(Modal)`
margin : 0 !important;
@@ -39,11 +39,11 @@ const StyledLogin = styled(Modal)`
`
export function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
+ return <MuiAlert elevation={6} variant="filled" {...props} />;
}
-export default function LoginModal(props) {
- const { state, dispatch } = useContext(Store)
+export default function LoginModal (props){
+ const {state, dispatch} = useContext(Store)
const [snackbarOpened, handleSnackbar] = useState(false)
@@ -55,24 +55,24 @@ export default function LoginModal(props) {
handleSnackbar(false);
}
- function handleSuccess(data) {
- dispatch({
+ function handleSuccess (data) {
+ dispatch ({
type: "USER_LOGGED_IN",
userLoggedIn: !state.userIsLoggedIn,
login: data.data
- }
+ }
)
props.handleClose();
props.openSnackbar();
}
- function handleError(error) {
+ function handleError (error) {
handleSnackbar(true)
}
const handleLoginInfo = (login) => {
const url = `/auth/sign_in`
const payload = {
- email: login.email,
- password: login.senha
+ email : login.email,
+ password : login.senha
}
authentication(url, payload, handleSuccess, handleError)
@@ -81,32 +81,30 @@ 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>
- <StyledLogin
- aria-labelledby="transition-modal-title"
- aria-describedby="transition-modal-description"
- open={props.open}
- centered="true"
- onClose={props.handleClose}
- closeAfterTransition
- BackdropComponent={Backdrop}
- BackdropProps={{
- timeout: 500,
- }}
- >
- <Zoom in={props.open} style={{ transitionDelay: "0.2ms" }}>
- <LoginContainer
- contrast={state.contrast}
- handleClose={props.handleClose}
- openSignUp={props.openSignUp}
- handleLoginInfo={handleLoginInfo}
- />
- </Zoom>
- </StyledLogin>
+ <Snackbar open={snackbarOpened} autoHideDuration={1000} onClose={handleCloseSnackbar}
+ anchorOrigin = {{ vertical:'top', horizontal:'right' }}
+ >
+ <Alert severity="error">Ocorreu um erro ao se conectar!</Alert>
+ </Snackbar>
+ <StyledLogin
+ aria-labelledby="transition-modal-title"
+ aria-describedby="transition-modal-description"
+ open={props.open}
+ centered="true"
+ onClose={props.handleClose}
+ closeAfterTransition
+ BackdropComponent={Backdrop}
+ BackdropProps={{
+ timeout: 500,
+ }}
+ >
+ <Zoom in={props.open} style={{ transitionDelay :"0.2ms"}}>
+ <LoginContainer handleClose={props.handleClose}
+ openSignUp={props.openSignUp}
+ handleLoginInfo={handleLoginInfo}
+ />
+ </Zoom>
+ </StyledLogin>
</>
)
diff --git a/src/Components/MaterialCard.js b/src/Components/MaterialCard.js
index 9806251b..8f18cd3c 100644
--- a/src/Components/MaterialCard.js
+++ b/src/Components/MaterialCard.js
@@ -41,54 +41,53 @@ export default function MaterialCard(props) {
const width = window.innerWidth;
return (
- <Card className={`${props.contrast}BackColor ${props.contrast}Border ${props.contrast}Text`}>
+ <Card>
<img src={thumb} alt="thumbnail do recurso" />
- <div>
- <CardContent style={{ height: "60px", textAlign: "left", paddingBottom: "0px", width: "100%" }}>
- <Title>
- {props.name}
- </Title>
- </CardContent>
- <CardActions>
- <Grid container direction="column" justify="flex-start" alignItems="flex-start" style={{ marginLeft: "5px" }}>
- <Grid item>
- <Rating
- style={ props.contrast === "" ? { color: "#666" } : { color: "white" }}
- name="customized-empty"
- value={props.score}
- precision={0.5}
- emptyIcon={<StarBorderIcon fontSize="inherit" />}
- readOnly
- />
- </Grid>
- <Grid container direction="row" alignItems="center">
- <Library style={ props.contrast === "" ? { color: "#e81f4f" } : { color: "white" }} />
- <SizedBox />
- <Typography variant="body2" component="p" style={{ overflow: "hidden", fontSize: "0.8em" }}>
- {props.modules.length} módulos
- </Typography>
- </Grid>
+ <CardContent style={{ height: "60px", textAlign: "left", paddingBottom: "0px", width: "100%" }}>
+ <Title>
+ {props.name}
+ </Title>
+ </CardContent>
+ <CardActions>
+ <Grid container direction="column" justify="flex-start" alignItems="flex-start" style={{ marginLeft: "5px" }}>
+ <Grid item>
+ <Rating
+ name="customized-empty"
+ value={props.score}
+ precision={0.5}
+ style={{ color: "#666" }}
+ emptyIcon={<StarBorderIcon fontSize="inherit" />}
+ readOnly
+ />
</Grid>
- </CardActions>
- </div>
- <CardActions className={`${props.contrast}LinkColor`} style={{ borderTop: "1px solid #e5e5e5", justifyContent: "center" }}>
+ <Grid container direction="row" alignItems="center">
+ <Library style={{ color: "#e81f4f" }} />
+ <SizedBox />
+ <Typography variant="body2" color="textSecondary" component="p" style={{ overflow: "hidden", fontSize: "0.8em" }}>
+ {props.modules.length} módulos
+ </Typography>
+ </Grid>
+ </Grid>
+ </CardActions>
+ <CardActions style={{ borderTop: "1px solid #e5e5e5", justifyContent: "center" }}>
{
width <= 767 ?
- <Link className={`${props.contrast}LinkColor`} to={`/colecao?colecao=${props.id}`}>
+ <Link style={{textDecoration : "none"}} to={`/colecao?colecao=${props.id}`}>
<Button
- style={ props.contrast === "" ? { color: "#e81f4f" } : { color: "yellow" }}
+ color="secondary"
endIcon={<ExpandMoreRoundedIcon />}
>
+
Ver módulos
</Button>
</Link>
:
<Button
- className={`${props.contrast}LinkColor`}
- style={ props.contrast === "" ? { color: "#e81f4f" } : { color: "yellow" }}
+ color="secondary"
endIcon={<ExpandMoreRoundedIcon />}
onClick={HandleButtonPressed}
>
+
Ver módulos
</Button>
}
@@ -102,6 +101,7 @@ const SizedBox = styled.div`
`
const Title = styled(Typography)`
font-weight: 500;
+ color: rgb(102, 102, 102);
font-size: 0.9em;
margin-left: 10px;
margin-right: 10px;
diff --git a/src/Components/MenuBar.js b/src/Components/MenuBar.js
index 3cf316ad..c79d52b6 100644
--- a/src/Components/MenuBar.js
+++ b/src/Components/MenuBar.js
@@ -44,24 +44,18 @@ export const ButtonStyled = styled(Button)`
text-transform: capitalize !important;
margin : 0 8px !important;
font-weight : normal !important;
- color: ${props => props.contrast === "" ? "black !important" : "yellow !important"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
`
const ButtonPublicarRecurso = styled(Button)`
font-family : 'Roboto', sans serif;
box-shadow : none !important;
- border: ${props => props.contrast === '' ? "1px transparent solid" : "1px white solid !important"};
- background-color: ${(props) => props.contrast === "" ? "#ff7f00 !important" : "black !important"};
- color: white !important;
+ border : 1px transparent solid;
+ background-color : #ff7f00 !important;
align-content : center;
font-weight : 500 !important;
text-transform: capitalize !important;
font-stretch : expanded;
max-width: 200 !important;
- :hover {
- background-color: ${(props) => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
- }
.MuiSvgIcon-root {
vertical-align : middle !important;
margin-right : 5px !important;
@@ -69,7 +63,7 @@ const ButtonPublicarRecurso = styled(Button)`
`
const IconSearchStyled = styled(IconSearch)`
- color: ${props => props.contrast === "" ? "#16b8dd !important" : "white !important"};
+ color: #16b8dd;
`
const ImageStyled = styled.img`
height: 50px;
@@ -94,122 +88,124 @@ const Left = styled.span`
export const ButtonPubRecursoStyled = styled(Button)`
font-weight : 500 !important;
+ border : 1.5px #666 solid !important;
+ color: #666;
box-shadow: none;
margin : 0 8px !important;
font-weight : normal !important;
- :hover {
- background-color: ${(props) =>
- props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
- }
`
export default function MenuBar(props) {
- const { state } = useContext(Store)
-
- const buildMyAreaTabs = () => {
- const minhaArea = [
- { name: "Perfil e Atividades", href: "/perfil", value: '0' },
- { name: "Recursos Publicados", href: "/perfil", value: '1' },
- { name: "Favoritos", href: "/perfil", value: '2' },
- { name: "Coleções", href: "/perfil", value: '3' },
- { name: "Rede", href: "/perfil", value: '4' },
- { name: "Configurações", href: "/editarperfil", value: '5' },
- ]
-
- if (state.currentUser.roles) {
- let canUserAdmin = false;
- let index = 0;
- const userRoles = [...state.currentUser.roles]
-
- while (!canUserAdmin && index < userRoles.length) {
- if (userRoles[index].id === 3 || userRoles[index].id === 7)
- canUserAdmin = true
- index++
- }
-
- if (canUserAdmin)
- minhaArea.push({
- name: "Administrador",
- href: "/admin/home",
- value: '6',
- })
-
- const canUserCurator = (elem) => elem.id === 4
- if (userRoles.some(canUserCurator))
- minhaArea.push({
- name: "Curadoria",
- href: "/perfil",
- value: '5',
- })
- }
-
- return minhaArea;
- }
+ const { state } = useContext(Store)
- const menuSobre = [
- { name: "Sobre a Plataforma", href: "/sobre" },
- { name: "Portais Parceiros", href: "/sobre#portaisparceiros" },
- { name: "Termos de Uso", href: "/termos" },
- { name: "Contato", href: "/contato" }
+ const buildMyAreaTabs = () => {
+ const minhaArea = [
+ { name: "Perfil e Atividades", href: "/perfil", value: '0' },
+ { name: "Recursos Publicados", href: "/perfil", value: '1' },
+ { name: "Favoritos", href: "/perfil", value: '2' },
+ { name: "Coleções", href: "/perfil", value: '3' },
+ { name: "Rede", href: "/perfil", value: '4' },
+ { name: "Configurações", href: "/editarperfil", value: '5' },
]
- const menuAjuda = [
- { name: "Central de Ajuda", href: "/ajuda" },
- { name: "Publicando Recursos", href: "/publicando-recurso" },
- { name: "Encontrando Recursos", href: "/encontrando-recurso" },
- { name: "Participando da Rede", href: "/participando-da-rede" },
- { name: "Gerenciando a Conta", href: "/gerenciando-conta" }
- ]
+ if (state.currentUser.roles) {
+ let canUserAdmin = false;
+ let index = 0;
+ const userRoles = [...state.currentUser.roles]
+
+ while (!canUserAdmin && index < userRoles.length) {
+ if (userRoles[index].id === 3 || userRoles[index].id === 7)
+ canUserAdmin = true
+ index++
+ }
+
+ if (canUserAdmin)
+ minhaArea.push({
+ name: "Administrador",
+ href: "/admin/home",
+ value: '6',
+ })
+
+ const canUserCurator = (elem) => elem.id === 4
+ if (userRoles.some(canUserCurator))
+ minhaArea.push({
+ name: "Curadoria",
+ href: "/perfil",
+ value: '5',
+ })
+ }
+
+ return minhaArea;
+ }
+
+ const menuSobre = [
+ { name: "Sobre a Plataforma", href: "/sobre" },
+ { name: "Portais Parceiros", href: "/sobre#portaisparceiros" },
+ { name: "Termos de Uso", href: "/termos" },
+ { name: "Contato", href: "/contato" }
+ ]
+
+ const menuAjuda = [
+ { name: "Central de Ajuda", href: "/ajuda" },
+ { name: "Publicando Recursos", href: "/publicando-recurso" },
+ { name: "Encontrando Recursos", href: "/encontrando-recurso" },
+ { name: "Participando da Rede", href: "/participando-da-rede" },
+ { name: "Gerenciando a Conta", href: "/gerenciando-conta" }
+ ]
+
+ const minhaArea = buildMyAreaTabs()
+
+ return (
+ <ContainerStyled fluid={true} >
+ <Left>
+ <Link to="/"> <ImageStyled src={logo} alt="Plataforma Integrada" /> </Link>
+ <Dropdown name="Sobre" items={menuSobre} />
+ <Dropdown name="Ajuda" items={menuAjuda} />
+ <a href="http://educacaoconectada.mec.gov.br/" rel="noopener noreferrer" target="_blank" >
+ <ButtonStyled >Educação Conectada</ButtonStyled>
+ </a>
+ {/*<Link to="/loja">
+ <ButtonStyled>Lojinha</ButtonStyled>
+ </Link>*/}
+ <ButtonStyled onClick={props.openSearchBar} ><IconSearchStyled />Buscar</ButtonStyled>
+
+ </Left>
+ <Right>
+ {
+ state.userIsLoggedIn
+ ? (
+ <>
+ <div style={{ boxSizing: "border-box" }}>
+ <Link to="/termos-publicar-recurso">
+ <ButtonPublicarRecurso>
+ <CloudUploadIcon style={{ color: "white", marginLeft: "0" }} />
+ <span style={{ color: "#fff", textAlign: "center", alignSelf: "center", fontWeight: "500" }} >
+ PUBLICAR RECURSO
+ </span>
+ </ButtonPublicarRecurso>
+ </Link>
+ </div>
+
+ <div>
+ <Notifications />
+ </div>
+
+ <MenuList items={minhaArea} />
+
+ </>
+ )
+ : (
+ <React.Fragment>
+ <ButtonPubRecursoStyled onClick={props.openLogin}>PUBLICAR RECURSO?</ButtonPubRecursoStyled>
+ <ButtonStyled onClick={props.openLogin}><ExitToAppIcon style={{ color: "#00bcd4" }} />Entrar</ButtonStyled>
+ <ButtonStyled onClick={props.openSignUp}>Cadastre-<span style={{textTransform: 'lowercase'}}>se</span></ButtonStyled>
+ </React.Fragment>
+ )
+ }
- const minhaArea = buildMyAreaTabs()
-
- return (
- <ContainerStyled fluid={true} className={`${state.contrast}BackColor`}>
- <Left>
- <Link to="/"> <ImageStyled src={logo} alt="Plataforma Integrada" /> </Link>
- <Dropdown name="Sobre" items={menuSobre} />
- <Dropdown name="Ajuda" items={menuAjuda} />
- <a href="http://educacaoconectada.mec.gov.br/" rel="noopener noreferrer" target="_blank" >
- <ButtonStyled contrast={state.contrast} >Educação Conectada</ButtonStyled>
- </a>
- {/*<Link to="/loja">
- <ButtonStyled>Lojinha</ButtonStyled>
- </Link>*/}
- <ButtonStyled contrast={state.contrast} onClick={props.openSearchBar} ><IconSearchStyled contrast={state.contrast}/>Buscar</ButtonStyled>
-
- </Left>
- <Right>
- {
- state.userIsLoggedIn
- ? (
- <>
- <div style={{ boxSizing: "border-box" }}>
- <Link to="/termos-publicar-recurso">
- <ButtonPublicarRecurso contrast={state.contrast} className={`${state.contrast}LinkColor`}>
- <CloudUploadIcon className={`${state.contrast}IconColor`} style={{ marginLeft: "0" }} />
- <span className={`${state.contrast}LinkColor`} style={{textAlign: "center", alignSelf: "center", fontWeight: "500" }} >
- PUBLICAR RECURSO
- </span>
- </ButtonPublicarRecurso>
- </Link>
- </div>
- <div>
- <Notifications />
- </div>
- <MenuList items={minhaArea} />
- </>
- )
- : (
- <React.Fragment>
- <ButtonPubRecursoStyled contrast={state.contrast} className={`${state.contrast}LinkColor ${state.contrast}Border`} onClick={props.openLogin}>PUBLICAR RECURSO?</ButtonPubRecursoStyled>
- <ButtonStyled contrast={state.contrast} className={`${state.contrast}LinkColor`} onClick={props.openLogin}><ExitToAppIcon className={`${state.contrast}IconColor`} style={{ color: "#00bcd4" }} />Entrar</ButtonStyled>
- <ButtonStyled contrast={state.contrast} className={`${state.contrast}LinkColor`} onClick={props.openSignUp}>Cadastre-<span style={{ textTransform: 'lowercase' }}>se</span></ButtonStyled>
- </React.Fragment>
- )
- }
- </Right>
- </ContainerStyled>
- );
+ </Right>
+ </ContainerStyled>
+ );
}
diff --git a/src/Components/MenuBarMobile.js b/src/Components/MenuBarMobile.js
index e6e21aaa..0e263606 100644
--- a/src/Components/MenuBarMobile.js
+++ b/src/Components/MenuBarMobile.js
@@ -27,6 +27,7 @@ import IconSearch from '@material-ui/icons/Search'
export default function MenuBarMobile(props) {
+
const [drawerOpen, setDrawerStatus] = React.useState(false);
@@ -39,15 +40,12 @@ export default function MenuBarMobile(props) {
return (
<>
- <MobileDrawerMenu
- contrast={props.contrast}
- anchor={'left'}
- open={drawerOpen}
+ <MobileDrawerMenu anchor={'left'} open={drawerOpen}
onClose={toggleDrawer(false)}
openSignUp={props.openSignUp} openLogin={props.openLogin}
/>
- <OuterDiv contrast={props.contrast}>
- <Button title="Menu" style={props.contrast === "" ? { color: "#00bcd4" } : { color: "white " }} onClick={toggleDrawer(true)}>
+ <OuterDiv>
+ <Button style={{ color: "#00bcd4" }} onClick={toggleDrawer(true)}>
<MenuIcon className="icon" />
</Button>
<DrawerButtonDiv>
@@ -55,8 +53,8 @@ export default function MenuBarMobile(props) {
<img src={logo} alt="logo" style={{ border: "0", verticalAlign: "middle" }} />
</Link>
</DrawerButtonDiv>
- <Button title="Pesquisar" style={{ position: "absolute", right: 0 }} onClick={props.openSearchBar}>
- <IconSearchStyled style={props.contrast === "" ? { color: "#00bcd4" } : { color: "white " }} />
+ <Button style={{ color: "#00bcd4", position: "absolute", right: 0}} onClick={props.openSearchBar}>
+ <IconSearchStyled/>
</Button>
</OuterDiv>
</>
@@ -66,12 +64,11 @@ export default function MenuBarMobile(props) {
const OuterDiv = styled.div`
height : 48px;
width : 100%;
- background: ${props => props.contrast === "" ? "" : "black"};
+ ${'' /* position : relative; */}
display : flex;
direction : row;
align-items : center;
-
img {
height : 38px;
overflow : hidden;
diff --git a/src/Components/MenuList.js b/src/Components/MenuList.js
index ee79f724..b5b920c8 100644
--- a/src/Components/MenuList.js
+++ b/src/Components/MenuList.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, { useContext } from 'react';
+import React, {useContext} from 'react';
import Button from '@material-ui/core/Button';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
@@ -25,91 +25,90 @@ import { Link } from 'react-router-dom'
import ExitToAppIcon from '@material-ui/icons/ExitToApp';
import { Store } from '../Store';
import styled from 'styled-components'
-import { apiDomain } from '../env.js'
-import { deleteRequest } from './HelperFunctions/getAxiosConfig'
+import {apiDomain} from '../env.js'
+import {deleteRequest} from './HelperFunctions/getAxiosConfig'
//Image Import
import { Profile } from "ImportImages.js";
+
const OverrideButton = styled(Button)`
text-transform : none !important;
`
export default function MenuList(props) {
- const [anchorEl, setAnchorEl] = React.useState(null);
- const { state, dispatch } = useContext(Store)
-
- const handleClick = event => {
- setAnchorEl(event.currentTarget);
- };
-
- const handleClose = () => {
- setAnchorEl(null);
- };
-
- function handleSuccessSignOut(data) {
- dispatch({
- type: 'USER_LOGGED_OUT',
- userLoggedOut: !state.userIsLoggedIn,
- })
- }
- const handleLogout = () => {
- const url = `/auth/sign_out`
- deleteRequest(url, handleSuccessSignOut, (error) => { console.log(error) })
- }
-
- return (
- <div >
- <OverrideButton
- aria-controls="customized-menu"
- aria-haspopup="true"
- onClick={handleClick}
- >
- <div style={{ borderRadius: "50%", border: "2px solid #fff", background: "#fff", overflow: "hidden", maxWidth: "50px", maxHeight: "50px" }}>
- {
- state.currentUser.avatar === '' || state.currentUser.avatar === null || state.currentUser.avatar === undefined ?
- (
- <img src={Profile} alt={'user avatar'} style={{ width: "100%", height: "100%", verticalAlign: "middle", marginLeft: "0" }} />
- ) :
- (
- <img src={apiDomain + state.currentUser.avatar} alt={'user avatar'} style={{ width: "100%", height: "100%", verticalAlign: "middle", marginLeft: "0" }} />
- )
- }
- </div>
- <span className={`${state.contrast}LinkColor`} style={{ fontFamily: "inherit", fontWeight: "400", color: "#666" }}>Minha Ãrea </span> <KeyboardArrowDownIcon className={`${state.contrast}IconColor`}/>
- </OverrideButton>
- <Menu
- anchorEl={anchorEl}
- open={Boolean(anchorEl)}
- onClose={handleClose}
- elevation={0}
- getContentAnchorEl={null}
- anchorOrigin={{
- vertical: 'bottom',
- horizontal: 'center',
- }}
- transformOrigin={{
- vertical: 'top',
- horizontal: 'center',
- }}
- MenuListProps={{
- disablePadding: true
- }}
- >
- <div className={`${state.contrast}BackColor`}>
- {
- props.items.map((item) =>
- <Link to={{
- pathname: item.href,
- state: item.value
- }} style={{ textDecoration: "none" }} key={item.value}><MenuItem className={`${state.contrast}LinkColor`} style={{ fontSize: "14px", padding: "5px 20px", color: "#666" }} key={item.value}>{item.name}</MenuItem></Link>
- )
- }
- <StyledButtonSair contrast={state.contrast} className={`${state.contrast}BackColor`} onClick={handleLogout}> <StyledMenuItem className={`${state.contrast}LinkColor`} disableGutters={true}>Sair<StyledExitToAppIcon className={`${state.contrast}IconColor`}/></StyledMenuItem></StyledButtonSair>
- </div>
- </Menu>
+ const [anchorEl, setAnchorEl] = React.useState(null);
+ const { state, dispatch } = useContext(Store)
+
+ const handleClick = event => {
+ setAnchorEl(event.currentTarget);
+ };
+
+ const handleClose = () => {
+ setAnchorEl(null);
+ };
+
+ function handleSuccessSignOut (data) {
+ dispatch( {
+ type: 'USER_LOGGED_OUT',
+ userLoggedOut: !state.userIsLoggedIn,
+ })
+ }
+ const handleLogout = () => {
+ const url = `/auth/sign_out`
+ deleteRequest(url, handleSuccessSignOut, (error) => {console.log(error)})
+ }
+
+ return (
+ <div >
+
+ <OverrideButton
+ aria-controls="customized-menu"
+ aria-haspopup="true"
+ onMouseOver={handleClick}
+ >
+ <div style={{borderRadius: "50%", border: "2px solid #fff", background: "#fff", overflow: "hidden", maxWidth : "50px", maxHeight : "50px"}}>
+ {
+ state.currentUser.avatar === '' || state.currentUser.avatar === null || state.currentUser.avatar === undefined ?
+ (
+
+ <img src={Profile} alt={'user avatar'} style={{width:"100%", height:"100%", verticalAlign : "middle", marginLeft : "0"}}/>
+ ):
+ (
+ <img src={apiDomain + state.currentUser.avatar} alt={'user avatar'} style={{width:"100%", height:"100%", verticalAlign : "middle", marginLeft : "0"}}/>
+ )
+ }
</div>
- );
+ <span style={{fontFamily:"inherit", fontWeight:"400", color:"#666"}}>Minha Ãrea </span> <KeyboardArrowDownIcon/>
+ </OverrideButton>
+
+ <Menu
+ anchorEl={anchorEl}
+ open={Boolean(anchorEl)}
+ onClose={handleClose}
+ elevation={0}
+ getContentAnchorEl={null}
+ anchorOrigin={{
+ vertical: 'bottom',
+ horizontal: 'center',
+ }}
+ transformOrigin={{
+ vertical: 'top',
+ horizontal: 'center',
+ }}>
+
+ {
+ props.items.map((item)=>
+ <Link to={{
+ pathname : item.href,
+ state : item.value
+ }} style={{textDecoration:"none"}} key={item.value}><MenuItem style= {{fontSize:"14px", padding:"5px 20px", color:"#666"}} key={item.value}>{item.name}</MenuItem></Link>
+ )
+ }
+ <StyledButtonSair onClick={handleLogout}> <StyledMenuItem disableGutters={true}>Sair<StyledExitToAppIcon/></StyledMenuItem></StyledButtonSair>
+ </Menu>
+ </div>
+ );
}
const StyledButtonSair = styled(Button)`
@@ -122,14 +121,12 @@ const StyledButtonSair = styled(Button)`
display : flex !important;
justify-content: space-between !important;
font-size : 14px !important;
+ color : #a5a5a5 !important;
padding : 5px 20px !important;
}
- color : #666;
-
- overflow-y: hidden;
`
-const StyledExitToAppIcon = styled(ExitToAppIcon)`
+const StyledExitToAppIcon = styled(ExitToAppIcon) `
fontSize : 24px;
color : rgb(162,165,165);
align : right;
@@ -141,6 +138,6 @@ const StyledMenuItem = styled(MenuItem)`
justify-content: space-between !important;
width : 100% !important;
font-size : 14px !important;
- color : #666;
+ color : #a5a5a5 !important;
padding : 5px 20px !important;
`
diff --git a/src/Components/MobileDrawerMenu.js b/src/Components/MobileDrawerMenu.js
index 66db915e..317b46b2 100644
--- a/src/Components/MobileDrawerMenu.js
+++ b/src/Components/MobileDrawerMenu.js
@@ -47,6 +47,7 @@ export default function MobileDrawerMenu(props) {
{ name: "Favoritos", href: "/perfil", value: '2' },
{ name: "Coleções", href: "/perfil", value: '3' },
{ name: "Rede", href: "/perfil", value: '4' },
+ { name: "Configurações", href: "/editarperfil", value: '5' },
]
if (state.currentUser.roles) {
@@ -59,7 +60,7 @@ export default function MobileDrawerMenu(props) {
canUserAdmin = true
index++
}
-
+
if (canUserAdmin)
minhaArea.push({
name: "Administrador",
@@ -118,7 +119,7 @@ export default function MobileDrawerMenu(props) {
}
return (
- <StyledDrawer contrast={state.contrast} anchor={props.anchor} open={props.open} onClose={props.onClose}>
+ <StyledDrawer anchor={props.anchor} open={props.open} onClose={props.onClose}>
<MenuBody>
{/*Renders menuSobre array options*/}
{
@@ -136,18 +137,20 @@ export default function MobileDrawerMenu(props) {
{
/*If user is logged in, render user actions menu; else render log in/sign in buttons*/
state.userIsLoggedIn ?
- (
+ (
<>
<div style={{ display: "flex", justifyContent: "left", marginBottom: "10px" }}>
<Link to="/termos-publicar-recurso">
- <ButtonPublicarRecurso contrast={props.contrast}>
+ <ButtonPublicarRecurso>
<CloudUploadIcon style={{ color: "white", marginRight: "10px" }} />
- PUBLICAR RECURSO
+ <span style={{ color: "white", textAlign: "center", alignSelf: "center", fontWeight: "500" }} >
+ PUBLICAR RECURSO
+ </span>
</ButtonPublicarRecurso>
</Link>
</div>
- <div style={{ borderTop: "1px solid #e5e5e5", display: "flex", flexDirection: "column", marginTop: "10px", paddingTop: "10px", paddingBottom: "10px" }}>
- <MyArea contrast={props.contrast}>
+ <div style={{ borderTop: "1px solid #e5e5e5", display: "flex", flexDirection: "column", marginTop: "10px", paddingTop: "10px", color: "#666", paddingBottom: "10px" }}>
+ <MyArea>
<div className="user-avatar">
<img alt="user-avatar"
src={getUserAvatar()}
@@ -176,22 +179,22 @@ export default function MobileDrawerMenu(props) {
(
<React.Fragment>
<div style={{ display: "flex", justifyContent: "center", marginTop: "10px" }}>
- <ButtonPublicarRecurso contrast={props.contrast} onClick={props.openLogin}>
+ <ButtonPublicarRecurso onClick={props.openLogin}>
PUBLICAR RECURSO?
</ButtonPublicarRecurso>
</div>
<div style={{ display: "flex", flexDirection: "row", margin: "10px 0", justifyContent: "center" }}>
<div style={{ borderRight: "1px solid #e5e5e5" }}>
- <ButtonStyled onClick={props.openLogin} contrast={props.contrast}>
- <ExitToAppIcon style={props.contrast === "" ? { color: "#00bcd4" } : { color: "white" }} />Entrar
- </ButtonStyled>
+ <ButtonStyled onClick={props.openLogin}>
+ <ExitToAppIcon style={{ color: "#00bcd4" }} />Entrar
+ </ButtonStyled>
</div>
<div>
- <ButtonStyled contrast={props.contrast} onClick={props.openSignUp}>
- Cadastre-<span style={{ textTransform: 'lowercase' }}>se</span>
- </ButtonStyled>
+ <ButtonStyled onClick={props.openSignUp}>
+ Cadastre-<span style={{textTransform: 'lowercase'}}>se</span>
+ </ButtonStyled>
</div>
</div>
</React.Fragment>
@@ -222,7 +225,7 @@ const MyArea = styled.div`
.text {
font-size : 16px;
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color : #666;
align-self : center;
}
@@ -245,21 +248,18 @@ const MyArea = styled.div`
const ButtonPublicarRecurso = styled(Button)`
font-weight : 500 !important;
- background-color: ${props => props.contrast === "" ? "#ff7f00 !important" : "black !important"};
- color: ${props => props.contrast === "" ? "white !important" : "yellow !important"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
- border: ${props => props.contrast === "" ? "" : "1px solid white !important"};
+ border : 1.5px #666 solid !important;
+ background-color : #ff7f00 !important;
+ color: #666;
box-shadow: none;
margin : 0 8px !important;
padding : 6px 25px !important;
- :hover{
- background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
- }
+
`
const StyledDrawer = styled(Drawer)`
.MuiPaper-root {
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ width : 65% !important;
}
.menu-buttons {
@@ -268,13 +268,13 @@ const StyledDrawer = styled(Drawer)`
font-weight : 500;
cursor : pointer;
outline : 0;
- color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
- text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
+ color : #666 !important;
+ text-decoration : none !important;
background-color : transparent;
font-family : 'Roboto', sans serif;
.MuiSvgIcon-root {
- color: ${props => props.contrast === "" ? "#a5a5a5 !important" : "white !important"};
+ color : #a5a5a5 !important;
margin-right : 20px;
vertical-align : middle !important;
font-weight : normal !important;
@@ -292,7 +292,7 @@ const StyledDrawer = styled(Drawer)`
.selected {
color : #fff !important;
- background-color: ${props => props.contrast === "" ? "#00bcd4" : "rgba(255,255,0,0.24)"};
+ background-color : #00bcd4;
.MuiSvgIcon-root {
color : #fff !important;
}
@@ -303,5 +303,5 @@ const MenuBody = styled.div`
margin-top : 20px;
display : flex;
flex-direction : column;
-
+ color : #666;
`
diff --git a/src/Components/Modal.js b/src/Components/Modal.js
new file mode 100644
index 00000000..dd2de1bc
--- /dev/null
+++ b/src/Components/Modal.js
@@ -0,0 +1,100 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+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 { makeStyles } from '@material-ui/styles';
+import Modal from '@material-ui/core/Modal';
+
+import TermsCarousel from './Carousel';
+
+import Backdrop from '@material-ui/core/Backdrop';
+import Fade from '@material-ui/core/Fade';
+import VisibilityOutlinedIcon from '@material-ui/icons/VisibilityOutlined';
+
+
+
+/*Importação de imagens para o componente*/
+
+
+
+
+const useStyles = makeStyles(theme => ({
+ modal: {
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center"
+ },
+ paper: {
+ border: '2px solid #000',
+ boxShadow: " 0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)"
+ },
+ carousel: {
+ width: "750px",
+ height:"370px",
+
+ }
+}));
+
+
+
+
+
+export default function TransitionsModal() {
+ const classes = useStyles();
+ const [open, setOpen] = React.useState(false);
+
+ const handleOpen = () => {
+ setOpen(true);
+ };
+
+ const handleClose = () => {
+ setOpen(false);
+ };
+
+ return (
+
+
+ <div style={{display:"flex", justifyContent: "center"}}>
+ <link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap" rel="stylesheet"/>
+
+ <button style = {{background: "none",border: "none", color:"#fff",verticalAlign:"center"}} type="button" onClick={handleOpen}>
+ <VisibilityOutlinedIcon style={{verticalAlign:"middle"}}/> <spam style={{verticalAlign: "middle",fontWeight: "600",fontSize:"14px"}}>VEJA A VERSÃO RESUMIDA</spam>
+ </button>
+ <Modal
+ aria-labelledby="transition-modal-title"
+ aria-describedby="transition-modal-description"
+ className={classes.modal}
+ open={open}
+ onClose={handleClose}
+ closeAfterTransition
+ BackdropComponent={Backdrop}
+ BackdropProps={{
+ timeout: 500,
+ }}
+ >
+ <Fade in={open}>
+
+ <div>
+ <TermsCarousel/>
+ </div>
+
+ </Fade>
+ </Modal>
+ </div>
+ );
+}
diff --git a/src/Components/ModalAbout.js b/src/Components/ModalAbout.js
index 377ab6cd..84998e7c 100644
--- a/src/Components/ModalAbout.js
+++ b/src/Components/ModalAbout.js
@@ -16,185 +16,188 @@ 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 { makeStyles } from "@material-ui/styles";
-import Modal from "@material-ui/core/Modal";
+import React from 'react';
+import { makeStyles } from '@material-ui/styles';
+import Modal from '@material-ui/core/Modal';
import Formulario from "./ContactForm";
-import Backdrop from "@material-ui/core/Backdrop";
-import Fade from "@material-ui/core/Fade";
+import Backdrop from '@material-ui/core/Backdrop';
+import Fade from '@material-ui/core/Fade';
+
+import styled from 'styled-components'
-import styled from "styled-components";
/*Importação de imagens para o componente*/
-const useStyles = makeStyles((theme) => ({
- modal: {
- display: "flex",
- alignItems: "center",
- justifyContent: "center",
- },
- paper: {
- border: "2px solid #000",
- boxShadow:
- " 0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
- },
- carousel: {
- width: "750px",
- height: "370px",
- },
+
+
+
+const useStyles = makeStyles(theme => ({
+ modal: {
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center"
+ },
+ paper: {
+ border: '2px solid #000',
+ boxShadow: " 0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)"
+ },
+ carousel: {
+ width: "750px",
+ height:"370px",
+
+ }
}));
const Button = styled.button`
- background-color: ${(props) =>
- props.contrast === "" ? "#00bcd4" : "black !important"};
- color: ${(props) => (props.contrast === "" ? "#fff" : "yellow !important")};
- font-family: Roboto, sans-serif;
+
+background-color: #00bcd4;
+color: #fff;
+font-family: Roboto,sans-serif;
+font-size: 14px;
+font-weight: 700;
+height: 36px;
+border-radius: 3px;
+padding-left: 16px;
+padding-right: 16px;
+box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
+display: inline-block;
+position: relative;
+cursor: pointer;
+min-height: 36px;
+min-width: 88px;
+line-height: 36px;
+vertical-align: middle;
+-webkit-box-align: center;
+outline: none;
+text-align: center;
+border: 0;
+padding: 0 16px !important;
+hite-space: nowrap;
+text-decoration: none;
+
+`
+
+const Formulário = styled.div `
+ background-color: #fff;
+ padding: 40px;
+
+ border-radius: 4px;
+
+
+ color: #666 !important;
+
+ h2 {
+ font-size: 26px;
+ font-weight: lighter;
+ margin-top: 20px;
+ margin-bottom: 10px;
+ }
+
+ form .inputBlock {
+ margin-block: 22px;
+
+ }
+
+ form .inputBlock label {
+ font-size: 14px;
+ font-weight: bold;
+ display: block;
+
+ }
+
+ form .inputBlock input {
+ width: 100%;
+ height: 32px;
font-size: 14px;
- font-weight: 700;
- height: 36px;
- border-radius: 3px;
- padding-left: 16px;
- padding-right: 16px;
- box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
- display: inline-block;
- position: relative;
+ border: 0;
+ border-bottom: 1px solid #eee;
+
+ }
+
+ form .inputBlock.Message input {
+ height: 131px;
+ }
+
+ form buttom[type=submit] {
+ width: 100%;
+ border: 0;
+ margin-top: 30px;
+ background: #7d40e7
+ border-radius: 2px;
+ padding: 15px 20px;
+ font-size: 16px;
+ font-weight: bold;
+ color: #fff;
cursor: pointer;
- min-height: 36px;
- min-width: 88px;
- line-height: 36px;
- vertical-align: middle;
- -webkit-box-align: center;
- outline: none;
+ transition: background 0.5s;
+
+ }
+
+ form buttom[type=submit]:hover {
+ background: #6931ac
+ }
+
+
+ h2 {
+ font-size: 24px;
+ font-weight: lighter;
+ margin-bottom: 50px;
+ margin-top: 20px;
text-align: center;
- border: ${(props) =>
- props.contrast === "" ? "0" : "1px solid white !important"};
- padding: 0 16px !important;
- text-decoration: ${(props) =>
- props.contrast === "" ? "none" : "underline !important"};
- :hover {
- background-color: ${(props) =>
- props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
- }
-`;
-
-const Formulário = styled.div`
- background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
- padding: 40px;
-
- border-radius: 4px;
-
-
- color: ${props => props.contrast === "" ? "#666" : "white"} !important;
-
- border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
-
- h2 {
- font-size: 26px;
- font-weight: lighter;
- margin-top: 20px;
- margin-bottom: 10px;
- }
-
- form .inputBlock {
- margin-block: 22px;
-
- }
-
- form .inputBlock label {
- font-size: 14px;
- font-weight: bold;
- display: block;
-
- }
-
- form .inputBlock input {
- width: 100%;
- height: 32px;
- font-size: 14px;
- border: 0;
- border-bottom: 1px solid #eee;
-
- }
-
- form .inputBlock.Message input {
- height: 131px;
- }
-
- form buttom[type=submit] {
- width: 100%;
- border: 0;
- margin-top: 30px;
- background: #7d40e7
- border-radius: 2px;
- padding: 15px 20px;
- font-size: 16px;
- font-weight: bold;
- color: #fff;
- cursor: pointer;
- transition: background 0.5s;
-
- }
-
- form buttom[type=submit]:hover {
- background: #6931ac
- }
-
-
- h2 {
- font-size: 24px;
- font-weight: lighter;
- margin-bottom: 50px;
- margin-top: 20px;
- text-align: center;
-
- }
-`;
-
-export default function TransitionsModal({ contrast }) {
-
- const classes = useStyles();
- const [open, setOpen] = React.useState(false);
-
- const handleOpen = () => {
- setOpen(true);
- };
-
- const handleClose = () => {
- setOpen(false);
- };
-
- return (
- <div style={{ display: "flex", justifyContent: "center" }}>
- <link
- href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap"
- rel="stylesheet"
- />
- <Button type="button" onClick={handleOpen} contrast={contrast}>
- SUGERIR OUTRO SITE
- </Button>
- <Modal
- aria-labelledby="transition-modal-title"
- aria-describedby="transition-modal-description"
- className={classes.modal}
- open={open}
- onClose={handleClose}
- closeAfterTransition
- BackdropComponent={Backdrop}
- BackdropProps={{
- timeout: 500,
- }}
- >
- <Fade in={open}>
- <div>
- <Formulário contrast={contrast}>
- <h2>Sugerir site de Recursos Educacionais Digitais</h2>
- <Formulario contrast={contrast}/>
- </Formulário>
- </div>
- </Fade>
- </Modal>
- </div>
- );
+
+ }
+`
+
+
+
+
+export default function TransitionsModal() {
+ const classes = useStyles();
+ const [open, setOpen] = React.useState(false);
+
+ const handleOpen = () => {
+ setOpen(true);
+ };
+
+ const handleClose = () => {
+ setOpen(false);
+ };
+
+ return (
+
+
+ <div style={{display:"flex", justifyContent: "center"}}>
+ <link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap" rel="stylesheet"/>
+
+ <Button type="button" onClick={handleOpen}>
+ SUGERIR OUTRO SITE
+ </Button>
+ <Modal
+ aria-labelledby="transition-modal-title"
+ aria-describedby="transition-modal-description"
+ className={classes.modal}
+ open={open}
+ onClose={handleClose}
+ closeAfterTransition
+ BackdropComponent={Backdrop}
+ BackdropProps={{
+ timeout: 500,
+ }}
+ >
+ <Fade in={open}>
+
+ <div>
+ <Formulário>
+ <h2>Sugerir site de Recursos Educacionais Digitais</h2>
+ <Formulario/>
+ </Formulário>
+
+ </div>
+
+ </Fade>
+ </Modal>
+ </div>
+ );
}
diff --git a/src/Components/ModalAlterarAvatar/ComponentAlterarAvatar.js b/src/Components/ModalAlterarAvatar/ComponentAlterarAvatar.js
index 9af51a6c..a3e6a895 100644
--- a/src/Components/ModalAlterarAvatar/ComponentAlterarAvatar.js
+++ b/src/Components/ModalAlterarAvatar/ComponentAlterarAvatar.js
@@ -37,13 +37,13 @@ function ChooseImage (props) {
<img src={props.avatar}
alt="user avatar" style={{height:"inherit", width:"inherit", objectFit:"cover"}}
/>
- <input accept="image/*" id="avatar-file"
- type="file"
- onChange={(e) => props.handleFile(e.target.files)}
- style={{display : "none"}}
+ <input accept="image/*" id="avatar-file"
+ type="file"
+ onChange={(e) => props.handleFile(e.target.files)}
+ style={{display : "none"}}
/>
<label for="avatar-file" style={{width:"inherit"}}>
- <ChangeAvatarDiv contrast={props.contrast}>
+ <ChangeAvatarDiv >
<span>Alterar</span>
</ChangeAvatarDiv>
</label>
@@ -55,9 +55,12 @@ function ChooseImage (props) {
<img alt="" src={props.tempImg}/>
}
<ButtonsDiv>
- <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>
+ <ButtonCancelar onClick={props.handleClose}>
<span>Cancelar</span>
</ButtonCancelar>
+ <ButtonConfirmar>
+ <span>Salvar Alterações</span>
+ </ButtonConfirmar>
</ButtonsDiv>
</div>
)
@@ -70,6 +73,7 @@ export default function ComponentAlterarAvatar (props) {
const handleFile = (selectorFiles) => {
const objectURL = URL.createObjectURL(selectorFiles[0])
+ console.log(objectURL)
setTempImg(objectURL)
setUploading(true)
}
@@ -106,12 +110,12 @@ export default function ComponentAlterarAvatar (props) {
}
return (
- <ModalDiv contrast={props.contrast}>
+ <ModalDiv>
<HeaderDiv>
<span style={{width:"32px"}}/>
<StyledH2>{uploadingImage ? 'Alterar foto do perfil' : 'Editar Foto'}</StyledH2>
<StyledCloseModalButton onClick={props.handleClose}>
- <CloseIcon style={props.contrast === "" ? { color: "#666" } : { color: "white" }}/>
+ <CloseIcon style={{color : "#666"}}/>
</StyledCloseModalButton>
</HeaderDiv>
<DialogDiv>
@@ -120,7 +124,7 @@ export default function ComponentAlterarAvatar (props) {
(
[
<>
- <EditarDiv contrast={props.contrast}>
+ <EditarDiv>
<TextoEditarDiv>
Clique nos Ãcones e arraste para selecionar a parte que você quer da foto
</TextoEditarDiv>
@@ -129,8 +133,11 @@ export default function ComponentAlterarAvatar (props) {
</div>
</EditarDiv>
<FooterButtonsDiv>
- <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar>
- <ButtonConfirmar contrast={props.contrast} onClick={() => {completeSelection()}}>SELECIONAR FOTO</ButtonConfirmar>
+ <ButtonCancelar>ESCOLHER OUTRA</ButtonCancelar>
+ <div>
+ <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar>
+ <ButtonConfirmar onClick={() => {completeSelection()}}>SELECIONAR FOTO</ButtonConfirmar>
+ </div>
</FooterButtonsDiv>
</>
]
@@ -140,12 +147,11 @@ export default function ComponentAlterarAvatar (props) {
[
<>
<ChooseImage
- contrast={props.contrast}
avatar={props.userAvatar === '' || props.userAvatar == null ? Profile : `${apiDomain}` + props.userAvatar}
handleFile={handleFile}
handleClose={props.handleClose}
tempImg={tempImgURL}
- />
+ />
</>
]
)
@@ -161,9 +167,9 @@ const FooterButtonsDiv = styled.div`
display : flex;
flex-direction : row;
align-content : center;
- justify-content : flex-end;
+ justify-content : space-between;
Button {
- margin-left: 15px;
+ margin-top : 20px;
}
`
@@ -175,15 +181,13 @@ const TextoEditarDiv = styled.div`
`
const EditarDiv = styled.div`
- background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
position : relative;
background-color : #f4f4f4;
padding : 20px 30px 40px;
`
const ChangeAvatarDiv = styled.div`
- color: ${props => props.contrast === "" ? "rgba(255,255,255,.7)" : "yellow"} !important;
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
+ color : rgba(255,255,255,.7);
background-color:rgba(0,0,0,.5);
position: absolute;
bottom: 0;
@@ -200,92 +204,91 @@ const ChangeAvatarDiv = styled.div`
`
const ModalDiv = styled.div`
- background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
- border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
- color: ${props => props.contrast === "" ? "#666" : "white"} !important;
+ background-color : #fff;
border-radius : 4px;
+ min-width : 560px;
+ color : #666;
display: flex;
flex-direction : column;
@media screen and (max-width: 959px) {
+ height : 100%;
width : 100%;
}
`
const ButtonConfirmar = styled(Button)`
- background-color: ${props => props.contrast === "" ? "#00bcd4" : "black"} !important;
- color: ${props => props.contrast === "" ? "#fff" : "yellow"} !important;
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
- border: ${props => props.contrast === "" ? "" : "1px solid white !important"};
+ background-color : #00bcd4 !important;
+ color : #fff !important;
border-radius : 3px !important;
`
const ButtonCancelar = styled(Button)`
- color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
- text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
- background-color: transparent;
+ &:hover {
+ background-color : rgba(158,158,158,0.2) !important;
+ }
+ background-color : #fff !important;
+ color : #666 !important;
+ text-decoration : none !important;
outline : none !important;
text-align : center !important;
`
const ButtonsDiv = styled.div`
- Button {
- margin-left: 15px;
- }
- display : flex;
- justify-content:flex-end;
+display : flex;
+justify-content:flex-end;
`
const AvatarCircleDiv = styled.div`
- margin-bottom : 0;
- border-radius : 50%;
- height : 150px;
- width : 150px;
- position : relative;
- overflow: hidden;
+margin-bottom : 0;
+border-radius : 50%;
+height : 150px;
+width : 150px;
+position : relative;
+overflow: hidden;
`
const DivFlowHolder =styled.div`
- align-self : auto;
+align-self : auto;
`
const DivAlterarFoto = styled.div`
- display : flex;
- margin-bottom : 30px;
- flex-direction : row;
- align-items : center;
- justify-content :center;
+display : flex;
+margin-bottom : 30px;
+flex-direction : row;
+align-items : center;
+justify-content :center;
`
const DialogDiv = styled.div`
- padding : 20px 30px;
- overflow : visible !important;
+padding : 20px 30px;
+overflow : visible !important;
`
const HeaderDiv = styled.div`
- display : flex;
- flex-direction : row;
- align-items : center;
- align-content : center;
- justify-content : space-between;
- max-width : 100%;
+display : flex;
+flex-direction : row;
+align-items : center;
+align-content : center;
+justify-content : space-between;
+max-width : 100%;
`
const StyledH2 = styled.h2`
- font-size : 26px;
- font-weight : normal;
- margin-top : 20px;
- margin-bottom : 10px;
- font-family: inherit;
- line-height: 1.1;
- color: inherit;
+font-size : 26px;
+font-weight : normal;
+margin-top : 20px;
+margin-bottom : 10px;
+font-family: inherit;
+line-height: 1.1;
+color: inherit;
`
const StyledCloseModalButton = styled(Button)`
- display : inline-block;
- position : relative;
- float : right !important;
- background : transparent !important;
- min-width: 0 !important;
- width : 40px;
- border-radius : 50%;
- padding : 8px;
- height : 40px;
- margin : 0 6px;
+display : inline-block;
+position : relative;
+float : right !important;
+background : transparent !important;
+min-width: 0 !important;
+width : 40px;
+border-radius : 50%;
+padding : 8px;
+height : 40px;
+margin : 0 6px;
`
diff --git a/src/Components/ModalAlterarAvatar/ModalAlterarAvatar.js b/src/Components/ModalAlterarAvatar/ModalAlterarAvatar.js
index 59fb07c7..73583204 100644
--- a/src/Components/ModalAlterarAvatar/ModalAlterarAvatar.js
+++ b/src/Components/ModalAlterarAvatar/ModalAlterarAvatar.js
@@ -31,8 +31,10 @@ const StyledModal = styled(Modal)`
padding : 10px !important;
`
-export default function ModalAlterarAvatar (props){
+export default function ModarAlterarAvatar (props){
+
return (
+
<StyledModal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
@@ -49,12 +51,12 @@ export default function ModalAlterarAvatar (props){
<Fade in={props.open} style={{ transitionDelay :"0.4ms"}}>
<ComponentAlterarAvatar
- contrast={props.contrast}
userAvatar={props.userAvatar}
handleClose={props.handleClose}
id={props.id}
/>
</Fade>
</StyledModal>
+
)
}
diff --git a/src/Components/ModalAlterarCover/ComponentAlterarCover.js b/src/Components/ModalAlterarCover/ComponentAlterarCover.js
index 72ad9886..a4059ecf 100644
--- a/src/Components/ModalAlterarCover/ComponentAlterarCover.js
+++ b/src/Components/ModalAlterarCover/ComponentAlterarCover.js
@@ -34,7 +34,7 @@ export default function ComponentAlterarCover (props) {
const [crop] = useState({
unit: "%" ,
width : 100,
- aspect: 16 / 3.2
+ aspect: 16 / 9
});
function handleSuccess (data) {
@@ -58,47 +58,49 @@ export default function ComponentAlterarCover (props) {
}
return (
- <ModalDiv contrast={props.contrast}>
+ <ModalDiv>
<HeaderDiv>
<span style={{width:"32px"}}/>
<StyledH2>Editar Capa do Perfil</StyledH2>
<StyledCloseModalButton onClick={props.handleClose}>
- <CloseIcon style={props.contrast === "" ? { color: "#666" } : { color: "white" }}/>
+ <CloseIcon style={{color : "#666"}}/>
</StyledCloseModalButton>
</HeaderDiv>
<DialogDiv>
- <EditarDiv contrast={props.contrast}>
+ <EditarDiv>
<TextoEditarDiv>
Clique nos Ãcones e arraste para selecionar a parte que você quer da foto
</TextoEditarDiv>
- <div style={{maxWidth : "100%", maxHeight : "100%"}}>
+ <div style={{maxWidth : "500px", maxHeight : "300px"}}>
<Cropper src={tempImgURL} crop={crop} update={updateCover}/>
</div>
</EditarDiv>
<FooterButtonsDiv>
+ <ButtonCancelar>ESCOLHER OUTRA</ButtonCancelar>
<div>
- <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar>
- <ButtonConfirmar contrast={props.contrast} onClick={() => {completeSelection()}}>SELECIONAR FOTO</ButtonConfirmar>
+ <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar>
+ <ButtonConfirmar onClick={() => {completeSelection()}}>SELECIONAR FOTO</ButtonConfirmar>
</div>
</FooterButtonsDiv>
</DialogDiv>
- </ModalDiv>
- )
+ </ModalDiv>
+ )
}
const ButtonCancelar = styled(Button)`
- color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
- text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
- background-color: transparent;
+ &:hover {
+ background-color : rgba(158,158,158,0.2) !important;
+ }
+ background-color : #fff !important;
+ color : #666 !important;
+ text-decoration : none !important;
outline : none !important;
text-align : center !important;
`
const ButtonConfirmar = styled(Button)`
- background-color: ${props => props.contrast === "" ? "#00bcd4" : "black"} !important;
- color: ${props => props.contrast === "" ? "#fff" : "yellow"} !important;
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
- border: ${props => props.contrast === "" ? "" : "1px solid white !important"};
+ background-color : #00bcd4 !important;
+ color : #fff !important;
border-radius : 3px !important;
`
@@ -107,12 +109,13 @@ const FooterButtonsDiv = styled.div`
display : flex;
flex-direction : row;
align-content : center;
- justify-content : flex-end;
+ justify-content : space-between;
Button {
margin-top : 20px;
}
`
+
const TextoEditarDiv = styled.div`
margin-bottom : 15px;
align-self : center;
@@ -121,55 +124,55 @@ const TextoEditarDiv = styled.div`
`
const EditarDiv = styled.div`
- background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
position : relative;
background-color : #f4f4f4;
+ padding : 20px 30px 40px;
`
const ModalDiv = styled.div`
- background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
- border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
- color: ${props => props.contrast === "" ? "#666" : "white"} !important;
- border-radius : 4px;
- width : 560px;
- display: flex;
- flex-direction : column;
- @media screen and (max-width: 959px) {
- width : 100%;
- }
+background-color : #fff;
+border-radius : 4px;
+min-width : 560px;
+color : #666;
+display: flex;
+flex-direction : column;
+@media screen and (max-width: 959px) {
+ height : 100%;
+ width : 100%;
+}
`
const DialogDiv = styled.div`
- padding : 20px 30px;
- overflow : visible !important;
+padding : 20px 30px;
+overflow : visible !important;
`
const HeaderDiv = styled.div`
- display : flex;
- flex-direction : row;
- align-items : center;
- align-content : center;
- justify-content : space-between;
- max-width : 100%;
+display : flex;
+flex-direction : row;
+align-items : center;
+align-content : center;
+justify-content : space-between;
+max-width : 100%;
`
const StyledH2 = styled.h2`
- font-size : 26px;
- font-weight : normal;
- margin-top : 20px;
- margin-bottom : 10px;
- font-family: inherit;
- line-height: 1.1;
- color: inherit;
+font-size : 26px;
+font-weight : normal;
+margin-top : 20px;
+margin-bottom : 10px;
+font-family: inherit;
+line-height: 1.1;
+color: inherit;
`
const StyledCloseModalButton = styled(Button)`
- display : inline-block;
- position : relative;
- float : right !important;
- background : transparent !important;
- min-width: 0 !important;
- width : 40px;
- border-radius : 50%;
- padding : 8px;
- height : 40px;
- margin : 0 6px;
+display : inline-block;
+position : relative;
+float : right !important;
+background : transparent !important;
+min-width: 0 !important;
+width : 40px;
+border-radius : 50%;
+padding : 8px;
+height : 40px;
+margin : 0 6px;
`
diff --git a/src/Components/ModalAlterarCover/ModalAlterarCover.js b/src/Components/ModalAlterarCover/ModalAlterarCover.js
index d572530f..7e971f58 100644
--- a/src/Components/ModalAlterarCover/ModalAlterarCover.js
+++ b/src/Components/ModalAlterarCover/ModalAlterarCover.js
@@ -32,11 +32,14 @@ const StyledModal = styled(Modal)`
`
export default function ModarAlterarCover (props){
+
return (
+
<StyledModal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
open={props.open}
+
centered="true"
onClose={props.handleClose}
closeAfterTransition
@@ -44,15 +47,16 @@ export default function ModarAlterarCover (props){
BackdropProps={{
timeout: 500,
}}
- >
+ >
<Fade in={props.open} style={{ transitionDelay :"0.4ms"}}>
+
<ComponentAlterarCover
- contrast={props.contrast}
cover={props.cover}
handleClose={props.handleClose}
id={props.id}
/>
</Fade>
</StyledModal>
+
)
}
diff --git a/src/Components/ModalAvaliarRecurso.js b/src/Components/ModalAvaliarRecurso.js
index 4376cee7..7795876d 100644
--- a/src/Components/ModalAvaliarRecurso.js
+++ b/src/Components/ModalAvaliarRecurso.js
@@ -29,10 +29,10 @@ 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 TextField from '@material-ui/core/TextField';
import { withStyles } from '@material-ui/core/styles';
import { getRequest } from './HelperFunctions/getAxiosConfig'
import LoadingSpinner from '../Components/LoadingSpinner'
-import {StyledTextField, useStyles} from './ReportUserForm.js'
const StyledRadio = withStyles({
root: {
@@ -46,8 +46,6 @@ const StyledRadio = withStyles({
export default function ModalAvaliarRecurso(props) {
- const classes = useStyles();
-
const [options, setOptions] = useState([])
const [avaliacao, setAvaliacao] = useState([null, null, null, null])
@@ -138,12 +136,12 @@ export default function ModalAvaliarRecurso(props) {
>
<Fade in={props.open}>
- <Container contrast={props.contrast}>
- <Header contrast={props.contrast}>
+ <Container>
+ <Header>
<h2>Você está avaliando o recurso
- <span style={{ fontWeight: "bolder" }}> {props.title}</span>
+ <span style={{ fontWeight: "bolder" }}> {props.title}</span>
</h2>
- <CloseModalButton contrast={props.contrast} handleClose={props.handleClose} />
+ <CloseModalButton handleClose={props.handleClose} />
</Header>
<Content>
@@ -164,8 +162,8 @@ export default function ModalAvaliarRecurso(props) {
</Grid>
<Grid item xs={2}>
<RadioGroup row onChange={(e) => { handleRadios(e, option.id) }}>
- <FormControlLabel className={`${props.contrast}LinkColor`} value={"Sim"} control={<StyledRadio style={props.contrast === "" ? {} : {color: "white"}}/>} label="Não" />
- <FormControlLabel className={`${props.contrast}LinkColor`} value={"Não"} control={<StyledRadio style={props.contrast === "" ? {} : {color: "white"}}/>} label="Sim" />
+ <FormControlLabel value={"Sim"} control={<StyledRadio />} label="Não" />
+ <FormControlLabel value={"Não"} control={<StyledRadio />} label="Sim" />
</RadioGroup>
</Grid>
</Grid>
@@ -177,12 +175,10 @@ export default function ModalAvaliarRecurso(props) {
<Grid item xs={12}>
<FormControl style={{ width: "100%", height: "100px" }}>
<StyledTextField
- contrast={props.contrast}
id={"title-form"}
label={"Justificativa (opcional)"}
type={"text"}
value={justificativa}
- InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
onChange={e => { handleChangeJustificativa(e) }}
multiline
fullWidth
@@ -192,8 +188,8 @@ export default function ModalAvaliarRecurso(props) {
<Grid item xs={12}>
<ButtonsDiv>
- <ButtonEnviarAvaliar contrast={props.contrast} disabled={buttonDisabled} onClick={() => { handleAvaliar() }}>ENVIAR AVALIAÇÂO</ButtonEnviarAvaliar>
- <GreyButton contrast={props.contrast} onClick={() => { handleCancel() }}>CANCELAR</GreyButton>
+ <ButtonEnviarAvaliar disabled={buttonDisabled} onClick={() => { handleAvaliar() }}>ENVIAR AVALIAÇÂO</ButtonEnviarAvaliar>
+ <GreyButton onClick={() => { handleCancel() }}>CANCELAR</GreyButton>
</ButtonsDiv>
</Grid>
</Grid>
@@ -210,9 +206,10 @@ export default function ModalAvaliarRecurso(props) {
}
const Content = styled.div`
- padding : 0 30px 20px 30px;
+ padding : 10px 75px 0 75px;
overflow : visible;
max-width : 100%;
+ color : #666;
font-size : 16px;
.main-content-text {
@@ -230,10 +227,10 @@ const Content = styled.div`
const Header = styled.div`
display : flex;
flex-direction : row;
- padding : 20px 20px 20px 20px;
+ padding : 20px 75px 0 75px;
align-items : center;
justify-content : space-between;
- color: ${props => props.contrast === "" ? "#666" : "white"} !important;
+ color : #666;
@media screen and (min-width : 990px) {
height : 64px;
@@ -265,23 +262,47 @@ const StyledModal = styled(Modal)`
const Container = styled.div`
box-sizing : border-box;
box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
- border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ background-color : #fff;
align : center;
display : flex;
flex-direction : column;
min-width : 240px;
- max-height : 90%;
+ max-height : none;
position : relative;
border-radius : 4px;
max-width : 100%;
- overflow-y : scroll;
+
+ @media screen and (max-width : 699px) {
+ overflow : scroll;
+ width : 100%;
+ height : 100%;
+ }
p {
margin : 0 0 10px;
}
`
+const StyledTextField = styled(TextField)`
+ font-size : 14px;
+ width : 100% !important;
+ full-width : 100% !important;
+
+ .MuiFormControl-root {
+ margin : 18px 0 !important;
+ }
+
+ label.Mui-focused {
+ color : #ff7f00;
+ }
+
+ label.Mui-focused.Mui-error {
+ color : red;
+ }
+
+ .MuiInput-underline::after {
+ border-bottom: 2px solid #ff7f00;
+ }
+`
const ButtonsDiv = styled.div`
display : flex;
@@ -299,13 +320,13 @@ const ButtonsDiv = styled.div`
`
const GreyButton = styled(Button)`
&:hover {
- background-color : ${props => props.contrast === "" ? "rgba(158,158,158,0.2)" : ""} !important;
+ background-color : rgba(158,158,158,0.2) !important;
}
max-height : 36px !important;
background-color : transparent !important;
- color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
- text-decoration : ${props => props.contrast === "" ? "none" : "underline"} !important;
+ color : #666 !important;
+ text-decoration : none !important;
outline : none !important;
text-align : center !important;
font-weight : 600 !important;
@@ -314,12 +335,10 @@ const GreyButton = styled(Button)`
`
const ButtonEnviarAvaliar = styled(Button)`
- color : ${props => props.contrast === "" ? `${props.disabled ? `rgba(0,0,0,0.38)` : `rgba(255,255,255,0.87)`}` : `${props.disabled ? `white` : `yellow`}`} !important;
+ color : ${(props) => props.disabled ? "rgba(0,0,0,0.38)" : "rgba(255,255,255,0.87) !important"};
box-shadow : ${(props) => props.disabled ? "none !important" : "0 2px 5px 0 rgba(0,0,0,.26) !important"};
font-weight : 600 !important;
- background-color : ${props => props.contrast === "" ? `${props.disabled ? "#e9e9e9 !important" : "#ff7f00 !important"}` : "black !important"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
- border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
+ background-color : ${(props) => props.disabled ? "#e9e9e9 !important" : "#ff7f00 !important"};
margin-left : 8px !important;
margin-right : 8px !important;
diff --git a/src/Components/ModalConfirmarCuradoria.js b/src/Components/ModalConfirmarCuradoria.js
index 8acc01ad..046106be 100644
--- a/src/Components/ModalConfirmarCuradoria.js
+++ b/src/Components/ModalConfirmarCuradoria.js
@@ -76,7 +76,7 @@ export default function ModalConfirmarCuradoriaOpen(props) {
}}
>
<Fade in={props.open}>
- <Container contrast={props.contrast} recusado={!props.aceito}>
+ <Container recusado={!props.aceito}>
<Header>
<span style={{ width: "32px" }} />
<h2>Recurso a ser {props.aceito ? 'aprovado' : 'recusado'}</h2>
@@ -104,8 +104,17 @@ export default function ModalConfirmarCuradoriaOpen(props) {
)
}
<ButtonsDiv>
- <ButtonEnviarAvaliar contrast={props.contrast} onClick={() => { handleConfirmation() }}>SIM, CONFIRMAR</ButtonEnviarAvaliar>
- <GreyButton contrast={props.contrast} onClick={handleCancel}>NÃO, ALTERAR AVALIAÇÃO</GreyButton>
+ {
+ props.aceito ?
+ (
+ <ButtonEnviarAvaliar onClick={() => { handleConfirmation() }}>SIM, CONFIRMAR</ButtonEnviarAvaliar>
+ )
+ :
+ (
+ <ButtonEnviarAvaliar onClick={() => { handleConfirmation() }}>SIM, CONFIRMAR</ButtonEnviarAvaliar>
+ )
+ }
+ <GreyButton onClick={handleCancel}>NÃO, ALTERAR AVALIAÇÃO</GreyButton>
</ButtonsDiv>
</Content>
</Container>
@@ -119,7 +128,7 @@ const Content = styled.div`
padding : 30px;
overflow : visible;
max-width : 100%;
- color : inherit;
+ color : #666;
font-size : 16px;
text-align : start;
.reason-offensive {
@@ -137,7 +146,7 @@ const Header = styled.div`
align-items : center;
max-height : none;
justify-content : space-between;
- color : inherit;
+ color : #666;
h2 {
font-size : 30px;
@@ -163,8 +172,7 @@ const StyledModal = styled(Modal)`
const Container = styled.div`
box-sizing : border-box;
box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
- background-color : ${props => props.contrast === "" ? "white" : "black"} !important;
- color : ${props => props.contrast === "" ? "#666" : "white"} !important;
+ background-color : #fff;
align : center;
display : flex;
flex-direction : column;
@@ -172,7 +180,6 @@ const Container = styled.div`
position : relative;
border-radius : 4px;
max-width : 100%;
- border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
max-height : ${props => props.recusado ? 'none' : '370px'};
@media screen and (max-width : 699px) {
@@ -202,13 +209,13 @@ const ButtonsDiv = styled.div`
`
const GreyButton = styled(Button)`
&:hover {
- background-color : ${props => props.contrast === "" ? "rgba(158,158,158,0.2)" : ""} !important;
+ background-color : rgba(158,158,158,0.2) !important;
}
max-height : 36px !important;
background-color : transparent !important;
- color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
- text-decoration : ${props => props.contrast === "" ? "none" : "underline"} !important;
+ color : #666 !important;
+ text-decoration : none !important;
outline : none !important;
text-align : center !important;
font-weight : 600 !important;
@@ -222,11 +229,10 @@ const GreyButton = styled(Button)`
`
const ButtonEnviarAvaliar = styled(Button)`
- color : ${props => props.contrast === "" ? `rgba(255,255,255,0.87)` : `yellow`} !important;
+ color : rgba(255,255,255,0.87) !important;
+ box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
font-weight : 600 !important;
- background-color : ${props => props.contrast === "" ? "#ff7f00" : "black"} !important;
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
- border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
+ background-color : #ff7f00 !important;
margin-left : 8px !important;
margin-right : 8px !important;
diff --git a/src/Components/ModalConfirmarUnfollow.js b/src/Components/ModalConfirmarUnfollow.js
index a7951b70..7d349e08 100644
--- a/src/Components/ModalConfirmarUnfollow.js
+++ b/src/Components/ModalConfirmarUnfollow.js
@@ -31,14 +31,12 @@ const HeaderDiv = styled.div`
margin-top : 20px;
margin-bottpm : 10px
font-weight : normal;
+ color : #666
}
`
const ContentContainer = styled.div`
-color: ${props => props.contrast === "" ? "#666" : "white"} !important;
-background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
-border: ${props => props.contrast === "" ? "1px solid black" : "1px solid white"} !important;
-
box-sizing : border-box;
+ background-color : white;
max-width : none;
align : center;
display : flex;
@@ -48,6 +46,7 @@ border: ${props => props.contrast === "" ? "1px solid black" : "1px solid white"
position : relative;
padding : 10px;
border-radius : 4px;
+ color : #666;
@media screen and (max-width : 899px) {
width : 100%;
@@ -55,21 +54,19 @@ border: ${props => props.contrast === "" ? "1px solid black" : "1px solid white"
}
`
const ButtonCancelar = styled(Button)`
-color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
-text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
-
&:hover {
background-color : rgba(158,158,158,0.2) !important;
}
+ background-color : #fff !important;
+ color : #666 !important;
+ text-decoration : none !important;
outline : none !important;
text-align : center !important;
`
const ButtonConfirmar = styled(Button)`
- color: ${props => props.contrast === "" ? "white" : "yellow"} !important;
- background-color: ${props => props.contrast === "" ? "#00bcd4" : "black"} !important;
- text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
- border: ${props => props.contrast === "" ? "none" : "1px solid white"} !important;
+ background-color : #00bcd4 !important;
+ color : #fff !important;
border-radius : 3px !important;
`
@@ -94,21 +91,21 @@ export default function ModalConfirmarUnfollow (props) {
}}
>
<Fade in={props.open}>
- <ContentContainer contrast={props.contrast}>
+ <ContentContainer>
<HeaderDiv>
<span style={{width:"32px"}}/>
<h3>
{text.header}
</h3>
- <CloseModalButton contrast={props.contrast} handleClose={props.handleClose}/>
+ <CloseModalButton handleClose={props.handleClose}/>
</HeaderDiv>
<div style={{display : "flex", flexDirection : "column", padding : "20px 30px"}}>
<div style={{marginTop : "0", textAlign : "center", marginBottom : "20px"}}>
- <span style={{fontSize : "14px"}}>{text.explanation}</span>
+ <span style={{fontSize : "14px", color : "#666"}}>{text.explanation}</span>
</div>
<div style={{display : "flex", flexDirection : "row", justifyContent: "space-evenly"}}>
- <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar>
- <ButtonConfirmar contrast={props.contrast} onClick={props.handleConfirm}>DEIXAR DE SEGUIR </ButtonConfirmar>
+ <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar>
+ <ButtonConfirmar onClick={props.handleConfirm}>DEIXAR DE SEGUIR </ButtonConfirmar>
</div>
</div>
</ContentContainer>
diff --git a/src/Components/ModalEditarColecao.js b/src/Components/ModalEditarColecao.js
index 52c7d5c4..bd8511f2 100644
--- a/src/Components/ModalEditarColecao.js
+++ b/src/Components/ModalEditarColecao.js
@@ -36,6 +36,7 @@ export default function ModalEditarColecao (props) {
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
open={props.open}
+
centered="true"
onClose={props.handleClose}
closeAfterTransition
@@ -45,14 +46,14 @@ export default function ModalEditarColecao (props) {
}}
>
<Fade in={props.open}>
- <Container contrast={props.contrast}>
+ <Container>
<Header>
<span style={{width:"32px"}}/>
<h2>Editar Coleção</h2>
<CloseModalButton handleClose={props.handleClose} id={props.id}/>
</Header>
<Content style={{paddingTop : "0"}}>
- <EditarColecaoForm contrast={props.contrast} id={props.id} handleClose={props.handleClose} finalize={finalize}/>
+ <EditarColecaoForm id={props.id} handleClose={props.handleClose} finalize={finalize}/>
</Content>
</Container>
</Fade>
@@ -77,6 +78,7 @@ const Header = styled.div`
h2 {
font-size : 26px;
font-weight : lighter;
+ color : #666
}
`
@@ -96,9 +98,7 @@ const StyledModal = styled(Modal)`
const Container = styled.div`
box-sizing : border-box;
box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
- background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
- color: ${props => props.contrast === "" ? "#666" : "white"} !important;
- border: 1px solid ${props => props.contrast === "" ? "#666" : "white"} !important;
+ background-color : white;
align : center;
display : flex;
flex-direction : column;
@@ -114,5 +114,6 @@ const Container = styled.div`
@media screen and (max-width : 699px) {
width : 100%;
+ height : 100%;
}
`
diff --git a/src/Components/ModalExcluirColecao.js b/src/Components/ModalExcluirColecao.js
index cb55a931..f23b819d 100644
--- a/src/Components/ModalExcluirColecao.js
+++ b/src/Components/ModalExcluirColecao.js
@@ -21,8 +21,8 @@ import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop';
import Fade from '@material-ui/core/Fade';
import styled from 'styled-components'
-import { ButtonCancelar, ButtonEnviar } from './EditarColecaoForm';
-import CloseModalButton from './CloseModalButton'
+import GreyButton from './GreyButton.js'
+import PurpleButton from './PurpleButton.js'
import SnackbarComponent from './SnackbarComponent'
import {deleteRequest} from './HelperFunctions/getAxiosConfig'
@@ -57,17 +57,22 @@ export default function ModalExcluirColecao (props) {
<Fade in={props.open}>
<>
<SnackbarComponent snackbarOpen={snackbarOpen} severity={"info"} handleClose={() => {toggleSnackbar(false)}} text={"Coleção excluÃda com sucesso"}/>
- <Container contrast={props.contrast}>
+ <Container>
<Header>
<h2>Tem certeza que deseja excluir esta Coleção?</h2>
- <CloseModalButton contrast={props.contrast} handleClose={props.handleClose} id={props.id}/>
</Header>
<Content>
<p>A exclusão de uma coleção é permanente. Não é possÃvel desfazer.</p>
<ButtonsDiv>
- <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar>
- <ButtonEnviar contrast={props.contrast} onClick={handleDelete}>EXCLUIR</ButtonEnviar>
+ <GreyButton
+ callback={props.handleClose}
+ text={"CANCELAR"}
+ />
+ <PurpleButton
+ callback={handleDelete}
+ text={"EXCLUIR"}
+ />
</ButtonsDiv>
</Content>
</Container>
@@ -107,6 +112,7 @@ const Header = styled.div`
h2 {
font-size : 26px;
font-weight : lighter;
+ color : #666
}
`
@@ -125,10 +131,7 @@ const StyledModal = styled(Modal)`
const Container = styled.div`
box-sizing : border-box;
- background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
- color: ${props => props.contrast === "" ? "#666" : "white"} !important;
- border: 1px solid ${props => props.contrast === "" ? "#666" : "white"} !important;
-
+ background-color : white;
max-width : none;
align : center;
display : flex;
@@ -138,6 +141,7 @@ const Container = styled.div`
position : relative;
padding : 10px;
border-radius : 4px;
+ color : #666;
@media screen and (max-width : 899px) {
width : 100%;
diff --git a/src/Components/ModalExcluirComentario.js b/src/Components/ModalExcluirComentario.js
index 2217e2eb..1345ee36 100644
--- a/src/Components/ModalExcluirComentario.js
+++ b/src/Components/ModalExcluirComentario.js
@@ -4,7 +4,6 @@ import Fade from '@material-ui/core/Fade';
import styled from 'styled-components'
import { Button } from '@material-ui/core';
import Backdrop from '@material-ui/core/Backdrop';
-import CloseIcon from '@material-ui/icons/Close';
const StyledModal = styled(Modal)`
margin : 0 !important;
@@ -30,9 +29,7 @@ const HeaderDiv = styled.div`
`
const ContentContainer = styled.div`
box-sizing : border-box;
- background-color: ${props => props.contrast === "" ? "white" : "black"};
- border: ${props => props.contrast === "" ? "" : "1px solid white"};
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ background-color : white;
max-width : none;
min-wdith : 240px;
align : center;
@@ -41,8 +38,9 @@ const ContentContainer = styled.div`
box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12)!important;
`
const ButtonCancelar = styled(Button)`
- color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
+ background-color : rgba(158,158,158,0.2) !important;
+ color : #666 !important;
+ text-decoration : none !important;
outline : none !important;
text-align : center !important;
margin : 0 8px !important;
@@ -50,32 +48,13 @@ const ButtonCancelar = styled(Button)`
`
const ButtonConfirmar = styled(Button)`
- background-color: ${props => props.contrast === "" ? "#ff7f00" : "black"} !important;
- color: ${props => props.contrast === "" ? "#fff" : "yellow"} !important;
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
- border: ${props => props.contrast === "" ? "" : "1px solid white !important"};
+ background-color : #ff7f00 !important;
+ color : #fff !important;
border-radius : 3px !important;
margin : 0 8px !important;
font-weight : 600 !important;
`
-const StyledCloseModalButton = styled(Button)`
- display : inline-block;
- position : relative;
- margin-right : -8px !important;
- background : transparent !important;
- min-width: 0 !important;
- width : 40px;
-`
-
-function CloseModalButton(props) {
- return (
- <StyledCloseModalButton onClick={props.handleClose}>
- <CloseIcon style={props.contrast === "" ? { color: "#666" } : { color: "white" }} />
- </StyledCloseModalButton>
- )
-}
-
export default function ModalExcluir (props) {
const text = {
header : "Tem certeza que deseja excluir este comentário?",
@@ -84,33 +63,32 @@ export default function ModalExcluir (props) {
return (
<StyledModal
- aria-labelledby="transition-modal-title"
- aria-describedby="transition-modal-description"
- open={props.open}
+ aria-labelledby="transition-modal-title"
+ aria-describedby="transition-modal-description"
+ open={props.open}
- centered="true"
- onClose={props.handleClose}
- closeAfterTransition
- BackdropComponent={Backdrop}
- BackdropProps={{
- timeout: 500,
- }}
+ centered="true"
+ onClose={props.handleClose}
+ closeAfterTransition
+ BackdropComponent={Backdrop}
+ BackdropProps={{
+ timeout: 500,
+ }}
>
<Fade in={props.open}>
- <ContentContainer contrast={props.contrast}>
+ <ContentContainer>
<HeaderDiv>
<h3 style={{fontSize : "24px", margin : "20px 15px 10px", fontWeight : "normal"}}>
{text.header}
</h3>
- <CloseModalButton handleClose={props.handleClose} contrast={props.contrast} />
</HeaderDiv>
<div style={{display : "flex", flexDirection : "column", padding : "20px 30px"}}>
<div style={{marginTop : "0", textAlign : "center", marginBottom : "20px"}}>
- <span style={{fontSize : "14px"}}>{text.explanation}</span>
+ <span style={{fontSize : "14px", color : "#666"}}>{text.explanation}</span>
</div>
<div style={{display : "flex", flexDirection : "row", justifyContent: "center"}}>
- <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar>
- <ButtonConfirmar contrast={props.contrast} onClick={props.handleConfirm}> EXCLUIR </ButtonConfirmar>
+ <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar>
+ <ButtonConfirmar onClick={props.handleConfirm}> EXCLUIR </ButtonConfirmar>
</div>
</div>
</ContentContainer>
diff --git a/src/Components/ModalLearningObjectPublished.js b/src/Components/ModalLearningObjectPublished.js
index 8421e0d8..566460be 100644
--- a/src/Components/ModalLearningObjectPublished.js
+++ b/src/Components/ModalLearningObjectPublished.js
@@ -28,9 +28,6 @@ import Twitter from '../img/twitter.svg'
import LinkIcon from '../img/link_icon.svg'
import CloseModalButton from './CloseModalButton.js'
-//Image Import
-import { Publicar } from "ImportImages.js";
-
export default function ModalLearningObjectPublished (props) {
// const refContainer = useRef(props.link);
@@ -53,11 +50,11 @@ export default function ModalLearningObjectPublished (props) {
}}
>
<Fade in={props.open}>
- <Container contrast={props.contrast}>
+ <Container>
<Header>
<span style={{width:"32px"}}/>
<h2>O seu recurso foi para a curadoria!</h2>
- <CloseModalButton contrast={props.contrast} handleClose={props.handleClose}/>
+ <CloseModalButton handleClose={props.handleClose}/>
</Header>
<Content >
@@ -72,7 +69,7 @@ export default function ModalLearningObjectPublished (props) {
</Grid>
</Grid>
</Content>
- <ShareContainer contrast={props.contrast}>
+ <ShareContainer>
<p>Gostaria de convidar o seus amigos para conhecer o recurso?</p>
<p>Compartilhe nas redes sociais:</p>
<div className="logos-shared">
@@ -80,7 +77,7 @@ export default function ModalLearningObjectPublished (props) {
href={"https://www.facebook.com/sharer/sharer.php?u=https://plataformaintegrada.mec.gov.br/recurso/" + props.draftID}
rel="noreferrer"
target="_blank">
- <ShareButton contrast={props.contrast}>
+ <ShareButton>
<img src={Facebook} alt="facebook-logo"/>
</ShareButton>
</a>
@@ -89,12 +86,12 @@ export default function ModalLearningObjectPublished (props) {
href={"https://www.twitter.com/intent/tweet?url=https://plataformaintegrada.mec.gov.br/recurso/" + props.draftID}
rel="noreferrer"
target="_blank">
- <ShareButton contrast={props.contrast}>
+ <ShareButton>
<img src={Twitter} alt="twitter-logo"/>
</ShareButton>
</a>
- <ShareButton contrast={props.contrast}>
+ <ShareButton >
<img src={LinkIcon} alt="link-icon"/>
</ShareButton>
</div>
@@ -126,18 +123,18 @@ const ShareButton = styled(Button)`
p {
margin : 0 0 10px;
}
-
- border: ${props => props.contrast === "" ? "" : "1px solid yellow"} !important;
`
const ShareContainer = styled.div`
padding-top : 20px;
+ background-color : #f1f1f1;
width : 100%;
height : 215px;
font-size : 18px;
line-height : 30px;
text-align : center;
max-width : 600px;
+ color : #666;
border-radius : 4px;
.logos-shared {
@@ -148,18 +145,16 @@ const ShareContainer = styled.div`
flex-direction : row;
justify-content : center;
}
-
- background-color: ${props => props.contrast === "" ? "#f1f1f1" : "black"};
- border-top: ${props => props.contrast === "" ? "" : "1px solid white"};
`
const Content = styled.div`
padding : 20px 30px;
overflow : visible;
max-width : 600px;
+ color : #666;
.backgroundImg {
- background-image : url(${Publicar});
+ background-image : url(https://plataformaintegrada.mec.gov.br/img/Publicar.png);
width : 145px;
height : 125px;
background-repeat : no-repeat;
@@ -185,6 +180,7 @@ const Header = styled.div`
h2 {
font-size : 26px;
font-weight : lighter;
+ color : #666
}
`
@@ -204,6 +200,7 @@ const StyledModal = styled(Modal)`
const Container = styled.div`
box-sizing : border-box;
box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
+ background-color : #fff;
align : center;
display : flex;
flex-direction : column;
@@ -224,8 +221,4 @@ const Container = styled.div`
p {
margin : 0 0 10px;
}
-
- color: ${props => props.contrast === "" ? "#666" : "white"};
- background-color: ${props => props.contrast === "" ? "white" : "black"};
- border: ${props => props.contrast === "" ? "" : "1px solid white"};
`
diff --git a/src/Components/Notifications.js b/src/Components/Notifications.js
index 3765b779..d6973d15 100644
--- a/src/Components/Notifications.js
+++ b/src/Components/Notifications.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, { useState, useEffect, useContext } from 'react';
+import React, { useState, useEffect } from 'react';
import NotificationsIcon from '@material-ui/icons/Notifications';
import { Button } from '@material-ui/core';
import Badge from '@material-ui/core/Badge';
@@ -28,7 +28,6 @@ import { withStyles } from '@material-ui/core/styles';
import { Link } from 'react-router-dom'
import { getRecipientHref } from './Activities/getRecipientHref.js'
import SnackBar from '../Components/SnackbarComponent'
-import { Store } from '../Store';
const StyledBadge = styled(Badge)`
.MuiBadge-dot-45{
@@ -59,24 +58,23 @@ const StyledMenu = withStyles({
border: '1px solid #d3d4d5',
},
})((props) => (
- <Menu
- elevation={0}
- getContentAnchorEl={null}
- anchorOrigin={{
- horizontal: 'center',
- vertical: "bottom",
- }}
- transformOrigin={{
- vertical: 'top',
- horizontal: 'center',
- }}
- {...props}
- />
+ <Menu
+ elevation={0}
+ getContentAnchorEl={null}
+ anchorOrigin={{
+ horizontal: 'center',
+ vertical: "bottom",
+ }}
+ transformOrigin={{
+ vertical: 'top',
+ horizontal: 'center',
+ }}
+ {...props}
+ />
));
export default function Notification(props) {
const [anchorEl, setAnchorEl] = React.useState(null);
- const { state } = useContext(Store);
const [notifications, setNotifications] = useState([]);
const [snack, setSnack] = useState({
open: false,
@@ -117,6 +115,7 @@ export default function Notification(props) {
function handleClick(event) {
+ console.log('event.currentTarget: ', event.currentTarget)
setAnchorEl(event.currentTarget);
}
@@ -186,19 +185,10 @@ export default function Notification(props) {
color={snack.color}
text={snack.text}
/>
- <StyledNotificationButton title="Notificações" onClick={handleClick}>
- {
- notifications.some((notification) => (notification.recipient !== null) && (notification.viewed === false) && (notification.recipient_type !== "NilClass")) ?
- (
- <StyledBadge badgeContent={1} color="secondary" variant="dot" overlap="circle" className="badge">
- <StyledNotificationsIcon className={` ${state.contrast}LinkColor`} />
- </StyledBadge>
- )
- :
- (
- <StyledNotificationsIcon className={` ${state.contrast}LinkColor`} />
- )
- }
+ <StyledNotificationButton onClick={handleClick}>
+ <StyledBadge badgeContent={1} color="secondary" variant="dot" overlap="circle" className="badge">
+ <StyledNotificationsIcon />
+ </StyledBadge>
</StyledNotificationButton>
<StyledMenu
id="simple-menu"
@@ -206,23 +196,17 @@ export default function Notification(props) {
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
- contrast={state.contrast}
- MenuListProps={{
- disablePadding: true
- }}
>
- <ContainerDiv contrast={state.contrast}>
+ <ContainerDiv>
<div className="cabecalho">
- <span style={{ fontSize: "15px" }}>NOTIFICAÇÕES</span>
+ <span style={{ fontSize: "15px" }}>NOTIFICAÇÕES •</span>
<span className="cabecalho-marcar" onClick={handleClickNotification}>Marcar todas como lidas</span>
</div>
{
notifications.map((notification) =>
(notification.recipient !== null) &&
(notification.viewed === false) &&
- (notification.recipient_type !== "NilClass") &&
<ActivityListItem
- contrast={state.contrast}
onMenuBar={true}
avatar={notification.owner.avatar ? apiDomain + notification.owner.avatar : null}
activity={notification.activity}
@@ -238,7 +222,7 @@ export default function Notification(props) {
}
<div style={{ padding: "0 15px", borderTop: "1px solid #dadada" }}>
<Link to="/perfil">
- <NoPadButton contrast={state.contrast}>
+ <NoPadButton>
MOSTRAR TODAS
</NoPadButton>
</Link>
@@ -250,32 +234,33 @@ export default function Notification(props) {
}
-const NoPadButton = styled.div`
+const NoPadButton = styled(Button)`
padding : 6px 0 !important;
- color: ${props => props.contrast === '' ? "#71409E" : "yellow"} !important;
- text-decoration: ${props => props.contrast === '' ? "none" : "yellow underline"} !important;
`
const ContainerDiv = styled.div`
+ margin-top : 10px;
right : 5%;
width : 360px;
max-height : 400px;
+ box-shadow : 8px 8px 8px 8px
rgba(0,0,0,.1);
- overflow-y : auto;
+ overflow-y : scroll;
padding : 5px 5px 5px 5px;
min-width : 160px;
- background-color: ${props => props.contrast === '' ? "white" : "black"};
+ background-color : #f1f1f1;
.cabecalho {
border-bottom : 1px solid #dadada;
padding : 10px 15px;
- color: ${props => props.contrast === '' ? "#666" : "yellow"};
.cabecalho-marcar {
- font-size: 15px;
+ font-family: Lato,bold;
+ font-size: 12px;
+ -webkit-text-decoration-line: underline;
+ text-decoration-line: underline;
float: right;
- cursor: pointer;
- color: ${props => props.contrast === '' ? "#71409E" : "yellow"} !important;
+ cursor: pointer;s
}
}
`
diff --git a/src/Components/PageProfessorComponents/ModalConfirmarProfessor.js b/src/Components/PageProfessorComponents/ModalConfirmarProfessor.js
index 87d1a05b..f8bceee1 100644
--- a/src/Components/PageProfessorComponents/ModalConfirmarProfessor.js
+++ b/src/Components/PageProfessorComponents/ModalConfirmarProfessor.js
@@ -17,12 +17,12 @@ 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';
import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop';
import Fade from '@material-ui/core/Fade';
import styled from 'styled-components'
-import CloseModalButton from '../CloseModalButton';
-import { ButtonCancelar, ButtonEnviar } from '../ReportUserForm';
+import CloseIcon from '@material-ui/icons/Close';
const StyledModal = styled(Modal)`
display : flex;
@@ -50,11 +50,13 @@ export default function ModalConfirmarProfessor (props){
>
<Fade in={props.open} style={{ transitionDelay :"0.4ms"}}>
<>
- <ConfirmarProfessorComponent contrast={props.contrast}>
+ <ConfirmarProfessorComponent>
<HeaderDiv>
<span style={{width:"32px"}}/>
<h2>Confirme os Dados</h2>
- <CloseModalButton contrast={props.contrast} handleClose={props.handleClose}/>
+ <Button style={{marginRight:"-8px", color:"000"}} onClick={props.handleClose}>
+ <CloseIcon style={{color:"#666", cursor:"pointer", verticalAlign:"middle"}}/>
+ </Button>
</HeaderDiv>
<DialogContentDiv>
@@ -64,8 +66,8 @@ export default function ModalConfirmarProfessor (props){
<p><strong>Telefone da Escola:</strong> {props.info.school_phone}</p>
<p><strong>Seu CPF:</strong> {props.info.teacher_cpf}</p>
<ButtonsDiv>
- <ButtonEnviar contrast={props.contrast} onClick={props.confirmar}>CONFIRMAR</ButtonEnviar>
- <ButtonCancelar contrast={props.contrast} onClick={props.cancelar}>CANCELAR</ButtonCancelar>
+ <ConfirmButton onClick ={props.confirmar}>CONFIRMAR</ConfirmButton>
+ <CancelButton onClick = {props.cancelar}>CANCELAR</CancelButton>
</ButtonsDiv>
</ContainerCentralized>
</DialogContentDiv>
@@ -76,7 +78,7 @@ export default function ModalConfirmarProfessor (props){
)
}
-/*
+
const CancelButton = styled(Button)`
width : 140px !important;
color :#666 !important;
@@ -107,7 +109,7 @@ const ConfirmButton = styled(Button)`
margin : 6px 8px !important;
display : inline-block !important;
`
-*/
+
const ButtonsDiv = styled.div`
margin-top : 10px;
display : flex;
@@ -146,7 +148,6 @@ const HeaderDiv = styled.div`
const ConfirmarProfessorComponent = styled.div`
min-width : 600px;
border-radius : 4px;
- background-color: ${props => props.contrast === "" ? "white" : "black"};
- color: ${props => props.contrast === "" ? "#666" : "white"};
- border: ${props => props.contrast === "" ? "" : "1px solid white"};
+ background-color : #fff;
+ color : #666;
`
diff --git a/src/Components/PageProfessorComponents/PartOne.js b/src/Components/PageProfessorComponents/PartOne.js
index e46c4f87..ad8fcf9a 100644
--- a/src/Components/PageProfessorComponents/PartOne.js
+++ b/src/Components/PageProfessorComponents/PartOne.js
@@ -1,35 +1,18 @@
-import React, { useState, useEffect } from 'react'
+import React, {useState, useEffect} from 'react'
import styled from 'styled-components'
import Stepper from '../Stepper.js'
import FormControl from '@material-ui/core/FormControl';
import MenuItem from '@material-ui/core/MenuItem';
-import { Button } from '@material-ui/core'
-import { RightSideStrikedH3, LeftSideStrikedH3 } from '../LoginContainerFunction.js'
-import { ButtonCancelar } from './PartTwo.js'
+import Select from '@material-ui/core/Select';
+import InputLabel from '@material-ui/core/InputLabel';
+import {Button} from '@material-ui/core'
+import {RightSideStrikedH3, LeftSideStrikedH3} from '../LoginContainerFunction.js'
+import Divider from '@material-ui/core/Divider';
+import {ButtonCancelar} from './PartTwo.js'
import axios from 'axios'
import FormInput from '../FormInput.js'
-import TextField from '@material-ui/core/TextField';
-import { makeStyles } from "@material-ui/styles";
-
-const useStyles = makeStyles(theme => ({
- darkTextField: {
- maxWidth: "100%",
- fontSize: "15px",
- fontWeight: "lighter",
- color: "white",
- width: "100%"
- },
- lightTextField: {
- maxWidth: "100%",
- fontSize: "15px",
- fontWeight: "lighter",
- color: "black",
- width: "100%"
- }
-}));
-
-export function sortDict(dict) {
+export function sortDict (dict) {
const newDict = dict.sort((a, b) => (a.name) > (b.name) ? 1 : -1)
return newDict
@@ -44,14 +27,13 @@ const extractUFInfo = (ufs, name) => {
abbreviation = obj.abbreviation
}
}
- return { id: id, abbreviation: abbreviation }
+ return {id : id, abbreviation : abbreviation}
}
-export default function PartOne(props) {
- const classes = useStyles();
+export default function PartOne (props) {
//stores initial get response (list of states, sorted alphabetically)
const [ufList, setStates] = useState([])
- const handleSetStates = (states) => { setStates(states) }
+ const handleSetStates = (states) => {setStates(states)}
//stores list of cities sorted alphabetically
const [municipioList, setMunicipioList] = useState([])
@@ -60,34 +42,33 @@ export default function PartOne(props) {
//stores a single user selected state
const [uf, setUF] = useState(
{
- algumFoiEscolhido: false,
- name: '',
- abbreviation: ''
+ algumFoiEscolhido : false,
+ name : '',
+ abbreviation : ''
}
)
//stores a single user selected city
const [municipio, setMunicipio] = useState(
{
- algumFoiEscolhido: false,
- name: ''
+ algumFoiEscolhido : false,
+ name : ''
}
)
const [codigoINEP, setCodigoINEP] = useState(
{
- codigoInvalido: false,
- value: ''
+ codigoInvalido : false,
+ value : ''
}
)
const handleCodigoINEP = (event) => {
const code = event.target.value
- setCodigoINEP({
- ...codigoINEP,
- codigoInvalido: false,
- value: code
+ setCodigoINEP({...codigoINEP,
+ codigoInvalido : false,
+ value : code
})
}
@@ -95,13 +76,12 @@ export default function PartOne(props) {
const code = codigoINEP.value
axios.get(('https://www.simcaq.c3sl.ufpr.br/api/v1/portal_mec_inep?filter=school_cod:' + code)
- ).then((response) => {
+ ).then( (response) => {
handleSubmit()
}, (error) => {
- setCodigoINEP({
- ...codigoINEP,
- codigoInvalido: true,
- value: ''
+ setCodigoINEP({...codigoINEP,
+ codigoInvalido : true,
+ value : ''
})
}
)
@@ -112,149 +92,128 @@ export default function PartOne(props) {
}
//on render component, call simcaq api and update ufList
- useEffect(() => {
+ useEffect ( () => {
axios.get(('https://simcaq.c3sl.ufpr.br/api/v1/state')
- ).then((response) => {
+ ).then( (response) => {
+ console.log(sortDict(response.data.result))
handleSetStates(sortDict(response.data.result))
},
- (error) => console.log('erro acessando api do simcaq (estados)'))
+ (error) => console.log('erro acessando api do simcaq (estados)'))
}, [])
const handleChooseUF = (event) => {
const ufName = event.target.value
- const { id, abbreviation } = extractUFInfo(ufList, ufName)
+ const {id, abbreviation} = extractUFInfo(ufList, ufName)
+ console.log(id, abbreviation)
- setUF({
- ...uf,
- algumFoiEscolhido: true,
- name: ufName,
- abbreviation: abbreviation
- }
+ setUF({...uf,
+ algumFoiEscolhido : true,
+ name : ufName,
+ abbreviation : abbreviation
+ }
)
axios.get(('https://simcaq.c3sl.ufpr.br/api/v1/city?filter=state:' + id)
- ).then((response) => {
+ ).then( (response) => {
handleSetMunicipioList(sortDict(response.data.result))
- }, (error) => console.log('erro acessando api do simcaq (cidades)')
+ }, (error) => console.log('erro acessando api do simcaq (cidades)')
)
}
const handleChooseCity = (event) => {
const cityName = event.target.value
- setMunicipio({
- ...municipio,
- algumFoiEscolhido: true,
- name: cityName
- }
+ console.log(cityName)
+ setMunicipio({...municipio,
+ algumFoiEscolhido : true,
+ name : cityName
+ }
)
}
return (
<>
- {/*/////////////////////////////PRIMEIRA PARTE/////////////////////////////*/}
- <Content>
- <h4>Vamos localizar o seu cadastro:</h4>
- <Stepper contrast={props.contrast} activeStep={props.activeStep}/>
- <form style={{ textAlign: "start" }}>
- <p>Localize pelo menos uma escola em que você tenha atuado até maio de 2017:</p>
- <FormControl required style={{ width: "100%", marginTop: '1em' }}>
- <h5> Procure sua UF </h5>
- <StyledTextField
- helperText={<span style={props.contrast === "" ? {} : { color: "white" }}>Clique aqui para selecionar sua UF</span>}
- contrast={props.contrast}
- select
- fullWidth
- value={uf.name}
- onChange={handleChooseUF}
- variant="outlined"
- InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
- >
- {
- ufList.map((ufs) =>
- <MenuItem style={props.contrast === "" ? {} : { backgroundColor: "black", color: "yellow", textDecoration: "underline" }} key={ufs.name} value={ufs.name}>{ufs.name}</MenuItem>
- )
- }
- </StyledTextField>
- </FormControl>
- <FormControl required style={{ width: "100%", marginTop: '1em' }}>
- <h5> Busque o seu municÃpio </h5>
- <StyledTextField
- helperText={<span style={props.contrast === "" ? {} : { color: "white" }}>Clique aqui para selecionar seu municÃpio</span>}
- contrast={props.contrast}
- select
- fullWidth
- value={municipio.name}
- onChange={handleChooseCity}
- variant="outlined"
- InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
- >
- {
- municipioList.map((cidades) =>
- <MenuItem style={props.contrast === "" ? {} : { backgroundColor: "black", color: "yellow", textDecoration: "underline" }} key={cidades.name} value={cidades.name}>{cidades.name}</MenuItem>
- )
- }
- </StyledTextField>
- </FormControl>
- <div style={{ display: "flex", justifyContent: "center", paddingTop: "10px", paddingBottom: "10px" }}>
- <ButtonConfirmar
- contrast={props.contrast}
- onClick={((uf.algumFoiEscolhido && municipio.algumFoiEscolhido) ? handleSubmit : '')}
- >
- BUSCAR</ButtonConfirmar>
- </div>
- </form>
+ {/*/////////////////////////////PRIMEIRA PARTE/////////////////////////////*/}
+ <Content>
+ <h4>Vamos localizar o seu cadastro:</h4>
+ <Stepper items={props.stepper}/>
+ <form style={{textAlign:"start"}}>
+ <p>Localize pelo menos uma escola em que você tenha atuado até maio de 2017:</p>
+ <FormControl required style={{width:"100%"}}>
+ <InputLabel>Procure sua UF</InputLabel>
+ <Select
+ labelId="demo-simple-select-label"
+ id="demo-simple-select"
+ value={uf.name}
+ onChange={handleChooseUF}
+ >
+ {
+ ufList.map( (ufs)=>
+ <MenuItem key={ufs.name} value={ufs.name}>{ufs.name}</MenuItem>
+ )
+ }
+ </Select>
+ </FormControl>
+ <FormControl required style={{width:"100%"}}>
+ <InputLabel>Busque o seu municÃpio</InputLabel>
+ <Select
+ labelId="demo-simple-select-label"
+ id="demo-simple-select"
+ value={municipio.name}
+ onChange={handleChooseCity}
+ >
+ {
+ municipioList.map( (cidades)=>
+ <MenuItem key={cidades.name} value={cidades.name}>{cidades.name}</MenuItem>
+ )
+ }
+ </Select>
+ </FormControl>
+ <div style={{display:"flex", justifyContent:"center",paddingTop:"10px", paddingBottom:"10px"}}>
+ <ButtonConfirmar
+ onClick={ ( (uf.algumFoiEscolhido && municipio.algumFoiEscolhido) ? handleSubmit : '')}
+ >
+ BUSCAR</ButtonConfirmar>
+ </div>
+ </form>
</Content>
- <div style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
- <LeftSideStrikedH3 contrast={props.contrast} /><StrikeSpan>ou</StrikeSpan><RightSideStrikedH3 contrast={props.contrast} />
+ <div style={{display:"flex", justifyContent:"center", alignItems:"center"}}>
+ <LeftSideStrikedH3/><StrikeSpan>ou</StrikeSpan><RightSideStrikedH3/>
</div>
{/*/////////////////////////////SEGUNDA PARTE/////////////////////////////*/}
<Content>
<form>
<p>Localize pelo código INEP da escola:</p>
- <FormControl required style={{ width: "100%" }}>
- <FormInput
- contrast={props.contrast}
- inputType={'text'}
- name={'Código INEP'}
- value={codigoINEP.value}
- handleChange={handleCodigoINEP}
- placeholder={'Código INEP'}
- required={true}
- error={codigoINEP.codigoInvalido}
- help={codigoINEP.codigoInvalido ? <span style={{ color: 'red' }}>código INEP inválido</span> : ''}
- >
- </FormInput>
+ <FormControl required style={{width:"100%"}}>
+ <FormInput
+ inputType={'text'}
+ name={'Código INEP'}
+ value={codigoINEP.value}
+ handleChange = {handleCodigoINEP}
+ placeholder={'Código INEP'}
+ required={true}
+ error={codigoINEP.codigoInvalido}
+ help={codigoINEP.codigoInvalido ? <span style={{color:'red'}}>código INEP inválido</span> : ''}
+ >
+ </FormInput>
</FormControl>
- <div style={{ display: "flex", justifyContent: "center", paddingTop: "10px", paddingBottom: "10px" }}>
+ <div style={{display:"flex", justifyContent:"center",paddingTop:"10px", paddingBottom:"10px"}}>
<ButtonConfirmar
- contrast={props.contrast}
- onClick={validateINEP}
+ onClick={validateINEP}
>
- BUSCAR</ButtonConfirmar>
+ BUSCAR</ButtonConfirmar>
</div>
</form>
</Content>
- <hr style={props.contrast === "" ? { color: "#666" } : { color: "white" }} />
+ <Divider/>
<ButtonsArea>
- <ButtonCancelar contrast={props.contrast} onClick={props.handleCancelar}>CANCELAR VERIFICAÇÃO</ButtonCancelar>
+ <ButtonCancelar onClick={props.handleCancelar}>CANCELAR VERIFICAÇÃO</ButtonCancelar>
</ButtonsArea>
</>
)
}
-const StyledTextField = styled(TextField)`
- .MuiOutlinedInput-root {
- &.Mui-focused fieldset {
- border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- }
- fieldset {
- border-color: ${props => props.contrast === "" ? "#666" : "white"};
- }
- }
-`
-
export const ButtonsArea = styled.div`
display : flex;
justify-content : center;
@@ -298,19 +257,34 @@ export const Content = styled.div`
}
`
export const ButtonConfirmar = styled(Button)`
- :hover{
- background: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
- }
- background: ${props => props.contrast === "" ? "#00bcd4 !important" : "black !important"};
- border: ${props => props.contrast === "" ? "0 !important" : "1px solid white !important"};
- color: ${props => props.contrast === "" ? "#fff !important" : "yellow !important"};
- text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
+ background-color : #00bcd4 !important;
+ color : #fff !important;
font-family : 'Roboto',sans-serif !important;
+ font-size : 14px !important;
+ font-weight : bolder !important;
+ padding-left : 16px !important;
+ padding-right : 16px !important;
outline : none !important;
margin : 6px 8px !important;
white-space : nowrap !important;
text-transform : uppercase !important;
font-weight : bold !important;
+ font-size : 14px !important;
+ font-style : inherit !important;
+ font-variant : inherit !important;
+ font-family : inherit !important;
+ text-decoration : none !important;
+ overflow : hidden !important;
+ display : inline-block !important;
+ position : relative !important;
cursor : pointer !important;
+ min-height : 36px !important;
+ min-width : 88px !important;
+ line-height : 36px !important;
+ vertical-align : middle !important;
+ align-items : center !important;
text-align : center !important;
+ border-radius : 3px !important;
+ box-sizing : border-box !important;
+ border : 0 !important;
`
diff --git a/src/Components/PageProfessorComponents/PartThree.js b/src/Components/PageProfessorComponents/PartThree.js
index a65b424b..4dc30604 100644
--- a/src/Components/PageProfessorComponents/PartThree.js
+++ b/src/Components/PageProfessorComponents/PartThree.js
@@ -1,38 +1,36 @@
-import React, { useState } from 'react'
-import { Content } from './PartOne.js'
-import { ButtonCancelar, ButtonGrey } from './PartTwo.js'
+import React, {useState} from 'react'
+import {Content} from './PartOne.js'
+import {ButtonCancelar, ButtonGrey} from './PartTwo.js'
import FormControl from '@material-ui/core/FormControl';
import Stepper from '../Stepper.js'
import FormInput from '../FormInput.js'
import styled from 'styled-components'
-import { Button } from '@material-ui/core'
+import {Button} from '@material-ui/core'
-export default function PartThree(props) {
+export default function PartThree (props) {
const [phoneNumber, setPhoneNumber] = useState(
{
- flagInvalid: false,
- number: ''
+ flagInvalid : false,
+ number : ''
}
)
const handleChangePhoneNumber = (event) => {
- const input = event.target.value;
- setPhoneNumber({
- ...phoneNumber,
- flagInvalid: (input.length < 10 ? true : false),
- number: (input.length > 10 ? phoneNumber.number : input),
+ const input = event.target.value.replace(/\D/,'')
+ setPhoneNumber({...phoneNumber,
+ flagInvalid : (input.length < 10 ? true : false),
+ number : (input.length > 10 ? phoneNumber.number : input),
})
}
- const [cpf, setCpf] = useState({
- flagInvalid: false,
- number: ''
+ const [cpf, setCpf] = useState( {
+ flagInvalid : false,
+ number : ''
})
const handleChangeCpf = (event) => {
- const input = event.target.value;
- setCpf({
- ...cpf,
- flagInvalid: (input.length < 11 ? true : false),
- number: (input.length > 11 ? cpf.number : input),
+ const input = event.target.value.replace(/\D/,'')
+ setCpf({...cpf,
+ flagInvalid : (input.length < 11 ? true : false),
+ number : (input.length > 11 ? cpf.number : input),
})
}
@@ -45,69 +43,65 @@ export default function PartThree(props) {
return (
<>
- <Content>
- <h4>Vamos localizar o seu cadastro:</h4>
- <Stepper contrast={props.contrast} activeStep={props.activeStep}/>
- <form style={{ textAlign: "start" }}>
- <FormControl required style={{ width: "100%" }}>
- <p>Inserir o telefone da escola:</p>
- <FormInput
- contrast={props.contrast}
- variant='outlined'
- inputType={'text'}
- pattern="[0-9]"
- name={'DDD e Número'}
- placeholder={'Exemplo: 4112345678'}
- value={phoneNumber.number}
- handleChange={handleChangePhoneNumber}
- error={phoneNumber.flagInvalid}
- >
- </FormInput>
- </FormControl>
- <FormControl required style={{ width: "100%" }}>
- <p>Inserir o seu CPF</p>
- <FormInput
- contrast={props.contrast}
- variant='outlined'
- inputType={'text'}
- name={'11 dÃgitos'}
- placeholder={'11 dÃgitos'}
- value={cpf.number}
- handleChange={handleChangeCpf}
- mask={'999.999.999-99'}
- error={cpf.flagInvalid}
- >
- </FormInput>
- </FormControl>
- <div style={{ display: "flex", justifyContent: "space-evenly", paddingTop: "10px", paddingBottom: "10px" }}>
- <div style={{ display: "flex", justifyContent: "center" }}>
- <ButtonConfirmar contrast={props.contrast} onClick={((cpf.flagInvalid || phoneNumber.flagInvalid) ? () => { console.log('cpf.flagInvalid: ', cpf.flagInvalid, 'phoneNumber.flagInvalid: ', phoneNumber.flagInvalid) } : handleSubmit)}>BUSCAR</ButtonConfirmar>
- </div>
- <div style={{ display: "flex", justifyContent: "center" }}>
- <ButtonGrey contrast={props.contrast} onClick={() => props.goBack(false, true, false)}>VOLTAR</ButtonGrey>
- <ButtonCancelar contrast={props.contrast} onClick={props.handleCancelar}>CANCELAR</ButtonCancelar>
- </div>
+ {console.log(props)}
+ <Content>
+ <h4>Vamos localizar o seu cadastro:</h4>
+ <Stepper items={props.stepper}/>
+ <form style={{textAlign:"start"}}>
+ <FormControl required style={{width:"100%"}}>
+ <p>Inserir o telefone da escola:</p>
+ <FormInput
+ inputType={'text'}
+ pattern="[0-9]"
+ name={'DDD e Número'}
+ placeholder={'Exemplo: 4112345678'}
+ value={phoneNumber.number}
+ handleChange={handleChangePhoneNumber}
+ error={phoneNumber.flagInvalid}
+ >
+ </FormInput>
+ </FormControl>
+ <FormControl required style={{width:"100%"}}>
+ <p>Inserir o seu CPF</p>
+ <FormInput
+ inputType={'text'}
+ name={'11 dÃgitos'}
+ placeholder={'11 dÃgitos'}
+ value={cpf.number}
+ handleChange={handleChangeCpf}
+ mask={'999.999.999-99'}
+ error={cpf.flagInvalid}
+ >
+ </FormInput>
+ </FormControl>
+ <div style={{display:"flex", justifyContent:"space-evenly",paddingTop:"10px", paddingBottom:"10px"}}>
+ <div style={{display:"flex", justifyContent:"center"}}>
+ <ButtonConfirmar onClick={( (cpf.flagInvalid || phoneNumber.flagInvalid) ? () => {console.log('cpf.flagInvalid: ', cpf.flagInvalid, 'phoneNumber.flagInvalid: ', phoneNumber.flagInvalid)} : handleSubmit)}>BUSCAR</ButtonConfirmar>
</div>
- </form>
+ <div style={{display:"flex", justifyContent:"center"}}>
+ <ButtonGrey onClick={() => props.goBack(false, true, false)}>VOLTAR</ButtonGrey>
+ <ButtonCancelar onClick={props.handleCancelar}>CANCELAR</ButtonCancelar>
+ </div>
+ </div>
+ </form>
</Content>
</>
)
}
const ButtonConfirmar = styled(Button)`
- :hover{
- background: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
- }
- background: ${props => props.contrast === "" ? "#00bcd4 !important" : "black !important"};
- border: ${props => props.contrast === "" ? "0 !important" : "1px solid white !important"};
- color: ${props => props.contrast === "" ? "#fff !important" : "yellow !important"};
- text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
+ background-color : #00bcd4 !important;
+ color : #fff !important;
+ box-shadow : none !important;
font-family : 'Roboto',sans-serif !important;
- outline : none !important;
- margin : 6px 8px !important;
- white-space : nowrap !important;
- text-transform : uppercase !important;
+ font-size : 14px !important;
font-weight : bold !important;
- cursor : pointer !important;
+ height : 36px !important;
+ border-radius : 3px !important;
+ padding-left : 16px !important;
+ padding-right : 16px !important;
+ vertical-align : middle !important;
text-align : center !important;
+ align-items : center !important;
+
`
diff --git a/src/Components/PageProfessorComponents/PartTwo.js b/src/Components/PageProfessorComponents/PartTwo.js
index a2b325cf..a4e68d4a 100644
--- a/src/Components/PageProfessorComponents/PartTwo.js
+++ b/src/Components/PageProfessorComponents/PartTwo.js
@@ -1,40 +1,37 @@
-import React, { useState, useEffect } from 'react'
-import { Content, ButtonsArea } from './PartOne.js'
+import React, {useState, useEffect} from 'react'
+import {Content, ButtonsArea} from './PartOne.js'
+import Divider from '@material-ui/core/Divider';
import Stepper from '../Stepper.js'
import CustomizedTables from '../Table.js'
import styled from 'styled-components'
-import { Button } from '@material-ui/core'
+import {Button} from '@material-ui/core'
import axios from 'axios'
-import { simcaqAPIurl } from '../../env'
-import { sortDict } from './PartOne.js'
+import {simcaqAPIurl} from '../../env'
+import {sortDict} from './PartOne.js'
-export default function PartTwo(props) {
+export default function PartTwo (props) {
const [schoolList, setSchoolList] = useState([])
- const [state, setState] = useState('');
- const [city, setCity] = useState('');
- useEffect(() => {
+ useEffect ( () => {
const code = (props.info.inep_code || '')
const uf = (props.info.school_uf.abbreviation || '')
const municipio = (props.info.school_city || '')
-
- setState(uf);
- setCity(municipio);
+ //console.log(code, uf, municipio)
+ //if user searched by inep code
if (code !== '') {
axios.get((`${simcaqAPIurl}/portal_mec_inep?filter=school_cod:` + code)
- ).then((response) => {
- setSchoolList(sortDict(response.data.result))
- }, (error) => console.log('erro ao dar get na escola por inep code')
- )
- }
+ ).then ((response) => {
+ setSchoolList(sortDict(response.data.result))
+ }, (error) => console.log('erro ao dar get na escola por inep code')
+ )}
else if (uf !== '' && municipio !== '') {
axios.get((`${simcaqAPIurl}/school?search=state_name:"` + uf + '",city_name:"' + municipio + '"&filter=year:2017')
- ).then((response) => {
- setSchoolList(sortDict(response.data.result))
- }, (error) => console.log('erro ao dar get na escola por uf e municipio', code, uf, municipio)
- )
- }
+ ).then((response)=> {
+ //console.log(response.data.result)
+ setSchoolList(sortDict(response.data.result))
+ }, (error) => console.log('erro ao dar get na escola por uf e municipio', code, uf, municipio)
+ )}
}, [])
const onClickTable = (city_name, id, name, state_name) => {
@@ -43,54 +40,58 @@ export default function PartTwo(props) {
return (
<>
+ {console.log(props)}
<Content>
<h4>Vamos localizar o seu cadastro:</h4>
- <Stepper contrast={props.contrast} activeStep={props.activeStep}/>
+ <Stepper items={props.stepper}/>
</Content>
<Content>
<InputContainer>
- <p>Selecione a sua escola da UF: {state} e do municÃpio: {city}:</p>
+ <p>Selecione a sua escola:</p>
- <CustomizedTables
- contrast={props.contrast}
- columns={['Codigo INEP', 'Escola', 'UF', 'Cidade']}
- rows={schoolList} onClickTable={onClickTable}
- />
+ <CustomizedTables
+ columns={['Codigo INEP', 'Escola', 'UF', 'Cidade']}
+ rows={schoolList} onClickTable={onClickTable}
+ />
</InputContainer>
</Content>
- <hr style={props.contrast === "" ? { color: '#666' } : { color: "white" }} />
+ <Divider/>
<ButtonsArea>
- <ButtonGrey contrast={props.contrast} onClick={() => props.goBack(true, false, false)}>VOLTAR</ButtonGrey>
- <ButtonCancelar contrast={props.contrast} onClick={props.handleCancelar}>CANCELAR VERIFICAÇÃO</ButtonCancelar>
+ <ButtonGrey onClick={() => props.goBack(true, false, false)}>VOLTAR</ButtonGrey>
+ <ButtonCancelar onClick={props.handleCancelar}>CANCELAR VERIFICAÇÃO</ButtonCancelar>
</ButtonsArea>
</>
)
}
export const ButtonCancelar = styled(Button)`
- :hover{
- background: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
- }
- background: ${props => props.contrast === "" ? "" : "black !important"};
- border: ${props => props.contrast === "" ? "0 !important" : "1px solid white !important"};
- color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
- text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
+ color: #666 !important;
font-family: 'Roboto',sans-serif !important;
+ font-size: 14px !important;
font-weight: bold !important;
+ height: 36px !important;
border-radius: 3px !important;
+ padding-left: 16px !important;
+ padding-right: 16px !important;
`
export const ButtonGrey = styled(Button)`
- :hover{
- background: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
- }
- background: ${props => props.contrast === "" ? "#fff !important" : "black !important"};
- border: ${props => props.contrast === "" ? "1.5px #666 solid !important" : "1px solid white !important"};
- color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
- text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
+ background-color : #fff !important;
+ border : 1.5px #666 solid !important;
+ color : #666 !important;
+ box-shadow : none !important;
font-family : 'Roboto',sans-serif !important;
+ font-size : 14px !important;
+ font-weight : bold !important;
+ height : 36px !important;
+ border-radius : 3px !important;
+ padding-left : 16px !important;
+ padding-right : 16px !important;
+ vertical-align : middle !important;
text-align : center !important;
+ align-items : center !important;
+
`
const InputContainer = styled.div`
diff --git a/src/Components/PageProfessorComponents/SuccessfulRequest.js b/src/Components/PageProfessorComponents/SuccessfulRequest.js
index 8d243f76..ffd481b4 100644
--- a/src/Components/PageProfessorComponents/SuccessfulRequest.js
+++ b/src/Components/PageProfessorComponents/SuccessfulRequest.js
@@ -1,29 +1,29 @@
import React from 'react'
import styled from 'styled-components'
-import { ButtonConfirmar } from './PartOne.js'
+import {ButtonConfirmar} from './PartOne.js'
//Image Import
import { Comentarios } from "ImportImages.js";
-export default function SuccessfulRequest(props) {
+export default function SuccessfulRequest (props) {
const h4Text = 'Obrigado por fazer parte dessa rede!'
const pText = 'Em breve você poderá publicar os seus próprios reursos educacionais digitais. O MEC analisará as suas informações junto a escola e você será avisada(o) aqui na plataforma e em seu email: '
const redirect = () => {
props.history.push('/')
}
-
+
return (
- <div style={{ maxWidth: "575px", padding: "0 36px" }}>
- <div style={{ display: "flex", flexDirection: "column" }}>
+ <div style={{maxWidth:"575px", padding : "0 36px"}}>
+ <div style={{display : "flex", flexDirection : "column"}}>
<StyledH4>{h4Text}</StyledH4>
<TextDiv>
<p>{pText} <b>{props.email}</b>.</p>
</TextDiv>
- <div style={{ display: 'flex', flexDirection: 'row', justifyContent: "center" }}>
- <ButtonConfirmar contrast={props.contrast} onClick={redirect}>VOLTAR À PAGINA INICIAL</ButtonConfirmar>
+ <div style={{display : 'flex', flexDirection : 'row', justifyContent : "center"}}>
+ <ButtonConfirmar onClick={redirect}>VOLTAR À PAGINA INICIAL</ButtonConfirmar>
</div>
- <ImageDiv />
+ <ImageDiv/>
</div>
</div>
)
diff --git a/src/Components/PasswordRecoveryComponents/Default.js b/src/Components/PasswordRecoveryComponents/Default.js
index a11262fa..e7a45389 100644
--- a/src/Components/PasswordRecoveryComponents/Default.js
+++ b/src/Components/PasswordRecoveryComponents/Default.js
@@ -1,34 +1,25 @@
import React from 'react'
-import { CompletarCadastroButton } from '../TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js'
+import {CompletarCadastroButton} from '../TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js'
import FormInput from "../FormInput.js"
-import styled from 'styled-components'
-export default function Default(props) {
+export default function Default (props) {
return (
- <div style={{ overflow: "hidden", display: "inline-block" }}>
- <Title contrast={props.contrast}>Vamos encontrar a sua conta</Title>
+ <div style={{overflow:"hidden", display:"inline-block"}}>
+ <h2 style={{fontSize:"32px", fontWeight:"200", marginBottom:"20px"}}>Vamos encontrar a sua conta</h2>
<form onSubmit={(e) => { e.preventDefault(); props.onSubmit(e); }}>
<FormInput
- contrast={props.contrast}
inputType={"text"}
name={"email"}
value={props.value}
placeholder={"E-mail"}
handleChange={e => props.handleChange(e)}
required={true}
- error={props.error}
+ error = {props.error}
/>
- <div style={{ display: "flex", justifyContent: "center" }}>
- <CompletarCadastroButton contrast={props.contrast} type="submit" >BUSCAR</CompletarCadastroButton>
+ <div style={{display:"flex", justifyContent:"center"}}>
+ <CompletarCadastroButton type="submit" >BUSCAR</CompletarCadastroButton>
</div>
</form>
</div>
)
}
-
-const Title = styled.h2`
- color: ${props => props.contrast === "" ? "" : "white"};
- font-size: 32px;
- font-weight: 200;
- margin-bottom: 20px;
-`
diff --git a/src/Components/PasswordRecoveryComponents/Error.js b/src/Components/PasswordRecoveryComponents/Error.js
index 6223f3a4..38ea3937 100644
--- a/src/Components/PasswordRecoveryComponents/Error.js
+++ b/src/Components/PasswordRecoveryComponents/Error.js
@@ -1,49 +1,27 @@
import React from 'react'
-import { CompletarCadastroButton } from '../TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js'
+import {CompletarCadastroButton} from '../TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js'
import FormInput from "../FormInput.js"
-import styled from 'styled-components'
-export default function Error(props) {
+export default function Error (props) {
return (
- <StyledDiv contrast={props.contrast}>
- <h2 className="title">Ops! Não encontramos essa conta</h2>
- <p className="paragraph">{props.value}</p>
- <p className="paragraph">Verifique se o e-mail foi digitado corretamente ou se você utilizou algum outro e-mail.</p>
+ <div style={{overflow:"hidden", display:"inline-block"}}>
+ <h2 style={{fontSize:"32px", fontWeight:"200", marginBottom:"20px"}}>Ops! Não encontramos essa conta</h2>
+ <p>{props.value}</p>
+ <p>Verifique se o e-mail foi digitado corretamente ou se você utilizou algum outro e-mail.</p>
<form onSubmit={(e) => props.onSubmit(e)}>
<FormInput
- contrast={props.contrast}
inputType={"text"}
name={"email"}
value={props.value}
placeholder={"E-mail"}
handleChange={e => props.handleChange(e)}
required={true}
- error={props.error}
+ error = {props.error}
/>
- <div style={{ display: "flex", justifyContent: "center" }}>
- <CompletarCadastroButton contrast={props.contrast} type="submit" >BUSCAR</CompletarCadastroButton>
+ <div style={{display:"flex", justifyContent:"center"}}>
+ <CompletarCadastroButton type="submit" >BUSCAR</CompletarCadastroButton>
</div>
</form>
- </StyledDiv>
+ </div>
)
}
-
-
-const StyledDiv = styled.div`
- overflow: hidden;
- display: inline-block;
- font-size: 14px;
- text-align: start;
-
- .paragraph{
- color: ${props => props.contrast === "" ? "" : "white"};
- }
-
- .title{
- color: ${props => props.contrast === "" ? "" : "white"};
- font-size: 32px;
- font-weight: 200;
- margin-bottom: 20px;
- line-height : 30px;
- }
-`
diff --git a/src/Components/PasswordRecoveryComponents/Success.js b/src/Components/PasswordRecoveryComponents/Success.js
index 1f4790bd..34feb617 100644
--- a/src/Components/PasswordRecoveryComponents/Success.js
+++ b/src/Components/PasswordRecoveryComponents/Success.js
@@ -1,41 +1,12 @@
import React from 'react'
-import styled from 'styled-components'
-export default function Default(props) {
+export default function Default (props) {
return (
- <StyledDiv contrast={props.contrast}>
- <h2 className="title">Feito! Confira seu e-mail</h2>
- <p className="paragraph"> Enviamos um link para <span className="email">{String(props.email)}</span> que permite alterar sua senha. </p>
- <p className="paragraph" style={{ marginBottom: "30px" }}> Caso não chegue em sua caixa de entrada, dê uma olhada em outras pastas, como lixo eletrônico ou spam. </p>
- <p className="paragraph"> Não é o seu e-mail? <span className="link" onClick={() => { props.changeSwitch('default') }}> Tente Novamente.</span></p>
- </StyledDiv>
+ <div style={{overflow:"hidden", display:"inline-block", fontSize:"14px", textAlign:"start"}}>
+ <h2 style={{fontSize:"32px", fontWeight:"200", marginBottom:"20px"}}>Feito! Confira seu e-mail</h2>
+ <p> Enviamos um link para <span style={{color:"#00bcd4"}}>{String(props.email)}</span> que permite alterar sua senha. </p>
+ <p style={{marginBottom:"30px"}}> Caso não chegue em sua caixa de entrada, dê uma olhada em outras pastas, como lixo eletrônico ou spam. </p>
+ <p> Não é o seu e-mail? <span style={{color:"#00bcd4", cursor:"pointer"}} onClick={() => {props.changeSwitch('default')}}> Tente Novamente.</span></p>
+ </div>
)
}
-
-const StyledDiv = styled.div`
- overflow: hidden;
- display: inline-block;
- font-size: 14px;
- text-align: start;
-
- .paragraph{
- color: ${props => props.contrast === "" ? "" : "white"};
- }
-
- .title{
- color: ${props => props.contrast === "" ? "" : "white"};
- font-size: 32px;
- font-weight: 200;
- margin-bottom: 20px;
- }
-
- .email{
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- }
-
- .link{
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- text-decoration: ${ props => props.contrast === "" ? "none" : "underline"};
- cursor: pointer;
- }
-`
diff --git a/src/Components/PublicationPermissionsContent.js b/src/Components/PublicationPermissionsContent.js
index 13894ecf..2f404e49 100644
--- a/src/Components/PublicationPermissionsContent.js
+++ b/src/Components/PublicationPermissionsContent.js
@@ -1,5 +1,6 @@
-import React, { useState } from 'react';
+import React, {useState, useEffect} from 'react';
import Typography from '@material-ui/core/Typography';
+import CardContent from '@material-ui/core/CardContent';
import styled from 'styled-components'
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
@@ -7,7 +8,7 @@ import Radio from '@material-ui/core/Radio';
import FormControl from '@material-ui/core/FormControl';
import Grid from '@material-ui/core/Grid';
import { withStyles } from '@material-ui/core/styles';
-import { yellow } from "@material-ui/core/colors";
+import {getRequest} from './HelperFunctions/getAxiosConfig'
const StyledFormControl = styled(FormControl)`
display: "block ruby";
@@ -15,72 +16,109 @@ const StyledFormControl = styled(FormControl)`
`
const BlueRadio = withStyles({
- root: {
- color: '#666',
- '&$checked': {
- color: '#00bcd4',
- },
+ root: {
+ color: '#666',
+ '&$checked': {
+ color: '#00bcd4',
},
- checked: {},
+ },
+ checked: {},
})((props) => <Radio color="default" {...props} />);
-const ContrastRadio = withStyles({
- root: {
- color: yellow[400],
- '&$checked': {
- color: yellow[600],
- },
- },
- checked: {},
-})((props) => <Radio color="default" {...props} />);
+export default function PublicationPermissionsContent (props) {
+
+ const [questionsArr, setQuestionsArr] = useState([])
+ const handleSetQuestionsArr = (newArr) => {setQuestionsArr(newArr)}
-export default function PublicationPermissionsContent(props) {
+ function handleSuccess (data) {
+ handleSetQuestionsArr(data)
+ }
- const [questionsArr] = useState(props.questionsArr);
+ useEffect(() => {
+ const url = `/questions/`
+
+ getRequest(url, handleSuccess, (error) => {console.log(error)})
+
+ }, [])
return (
- <div style={props.contrast === "" ? { textAlign: "start", lineHeight: "21px", color: "rgb(102, 102, 102)", padding: "65px" } : { textAlign: "start", lineHeight: "21px", color: "white", padding: "65px", backgroundColor: "black" }}>
- <Typography variant="h4" style={props.contrast === "" ? { textAlign: "center", color: "rgb(102, 102, 102)", fontSize: "26px" } : { textAlign: "center", color: "white", fontSize: "26px" }}> É necessário que você declare a permissão de publicação do seu Recurso:</Typography>
- <div classname="texto-termos">
- <div classname="title">
- <Typography variant="h3" style={props.contrast === "" ? { textAlign: "center", fontSize: "30px", marginTop: "20px", marginBottom: "10px", color: "rgb(102, 102, 102)" } : { textAlign: "center", fontSize: "30px", marginTop: "20px", marginBottom: "10px", color: "white" }}>
- PERMISSÃO DE PUBLICAÇÃO
- </Typography>
- </div>
- <p>Ao prosseguir você concede a permissão de publicação do seu recurso ao nosso portal e se compromete a não infringir as polÃticas de conteúdos, estando então,
+ <CardContent style={{textAlign: "start", marginBottom: "10px", lineHeight:"21px", color:"rgb(102, 102, 102)", padding:"65px"}}>
+ <Typography variant="h4" style={{textAlign:"center", color:"rgb(102, 102, 102)", fontSize:"26px"}}> É necessário que você declare a permissão de publicação do seu Recurso:</Typography>
+ <div classname="texto-termos">
+ <div classname="title">
+ <Typography variant = "h3" style={{textAlign:"center", fontSize:"30px", marginTop:"20px", marginBottom:"10px", color:"rgb(102, 102, 102)"}}>
+ PERMISSÃO DE PUBLICAÇÃO
+ </Typography>
+ </div>
+ <p>Ao prosseguir você concede a permissão de publicação do seu recurso ao nosso portal e se compromete a não infringir as polÃticas de conteúdos, estando então,
a partir desse momento passÃvel de responsabilização pelo conteúdo a ser integrado a nossa rede. Para tanto atente-se as pontuações abaixo e verifique se o seu
recurso está de acordo, antecipadamente, com as nossas condições. É recomendável a leitura das polÃticas de conteúdo estabelecidas
- (<a href="/termos" style={props.contrast === "" ? { color: "initial" } : { color: "yellow", textDecoration: "underline" }}><strong>PolÃticas de Conteúdo</strong></a>)
- </p>
- <Typography variant="h5" style={props.contrast === "" ? { fontWeight: "300", color: "rgb(102, 102, 102)", fontSize: "22px" } : { fontWeight: "300", color: "white", fontSize: "22px" }}>
+ (<a href="/termos" style={{color:"initial"}}><strong>PolÃticas de Conteúdo</strong></a>)
+ </p>
+ <Typography variant="h5" style={{fontWeight:"300", color:"rgb(102, 102, 102)", fontSize:"22px"}}>
Para que o recurso seja publicado na plataforma é preciso que ele esteja de acordo com as diretrizes abaixo, a presença de quaisquer dos itens a seguir
inviabiliza a publicação do recurso em nossa rede.
- </Typography>
- <p><strong>No seu recurso está presente algum destes itens abaixo?</strong></p>
+ </Typography>
+ <p><strong>No seu recurso está presente algum destes itens abaixo?</strong></p>
- <StyledFormControl component="fieldset" style={{ display: "BlockRuby" }} margin='dense' fullWidth={true}>
- <Grid container>
+ <StyledFormControl component="fieldset" style={{display:"BlockRuby"}} margin='dense' fullWidth={true}>
+ <Grid container>
{
questionsArr.map((question, index) =>
- (question.status === 'active' && question.id !== 4) &&
- <React.Fragment key={question.id}>
- <Grid item xs={10}>
- <p>{question.description}</p>
- </Grid>
- <Grid item xs={2}>
- <RadioGroup row name={(question.id)} onChange={props.handleRadios}>
- <FormControlLabel value="Sim" control={props.contrast === "" ? <BlueRadio /> : <ContrastRadio />} label={<span style={props.contrast === "" ? {} : { color: "yellow", textDecoration: "underline" }}>Sim</span>} /> <FormControlLabel value="Não" control={props.contrast === "" ? <BlueRadio /> : <ContrastRadio />} label={<span style={props.contrast === "" ? {} : { color: "yellow", textDecoration: "underline" }}>Não</span>} />
- </RadioGroup>
- </Grid>
- </React.Fragment>
+ (question.status === 'active' && question.id !== 4) &&
+ <React.Fragment key={question.id}>
+ <Grid item xs={10}>
+ <p>{question.description}</p>
+ </Grid>
+ <Grid item xs={2}>
+ <RadioGroup row name={"radio" + (question.id)} onChange={props.handleRadios}>
+ <FormControlLabel value="Sim" control={<BlueRadio/>} label="Sim"/> <FormControlLabel value="Não" control={<BlueRadio/>} label="Não"/>
+ </RadioGroup>
+ </Grid>
+ </React.Fragment>
- )
+ )
}
</Grid>
- </StyledFormControl>
- </div>
- </div>
+ </StyledFormControl>
+ </div>
+ </CardContent>
)
}
+
+// {/*
+// <Grid item xs={10}>
+// <p>
+// O recurso apresenta conteúdo de cunho polÃtico-partidário? (Ex: o conteúdo expressa qualquer forma de manifestação que se caracterize como propaganda polÃtica)?
+// </p>
+// </Grid>
+// <Grid item xs={2}>
+// <RadioGroup row name="radio1" onChange={props.handleRadios}>
+// <FormControlLabel value="Sim" control={<BlueRadio/>} label="Sim"/> <FormControlLabel value="Não" control={<BlueRadio/>} label="Não"/>
+// </RadioGroup>
+// </Grid>
+
+// <Grid item xs={10}>
+// <p>
+// O recurso apresenta conteúdo ofensivo? (Ex: material pornográfico e/ou que invada a privacidade de terceiros, viole os Direitos Humanos ou seja ilegal, ofensivo, e que incite a violência)?
+// </p>
+// </Grid>
+// <Grid item xs={2}>
+// <RadioGroup row name="radio2" onChange={props.handleRadios}>
+// <FormControlLabel value="Sim" control={<BlueRadio/>} label="Sim"/> <FormControlLabel value="Não" control={<BlueRadio/>} label="Não"/>
+// </RadioGroup>
+// </Grid>
+// <Grid item xs={10}>
+// <p>
+// O recurso apresenta algum tipo de propaganda ou marca? (Ex: o conteúdo tem cunho comercial)?
+// </p>
+// </Grid>
+// <Grid item xs={2}>
+// <RadioGroup row name="radio3" onChange={props.handleRadios}>
+// <FormControlLabel value="Sim" control={<BlueRadio/>} label="Sim"/> <FormControlLabel value="Não" control={<BlueRadio/>} label="Não"/>
+// </RadioGroup>
+// </Grid>
+// </Grid>
+// */}
diff --git a/src/Components/PurpleButton.js b/src/Components/PurpleButton.js
new file mode 100644
index 00000000..1b57b823
--- /dev/null
+++ b/src/Components/PurpleButton.js
@@ -0,0 +1,52 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+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';
+import styled from 'styled-components'
+
+export default function PurpleButton (props) {
+ return (
+ <StyledButton onClick={props.callback}>
+ {props.text}
+ </StyledButton>
+ )
+}
+
+const StyledButton = styled(Button)`
+ max-height : 36px !important;
+ background-color : #673ab7 !important;
+ color : #fff !important;
+ text-decoration : none !important;
+ outline : none !important;
+ text-align : center !important;
+
+ .button-text {
+ cursor : pointer;
+ line-height : 36px;
+ text-align : center;
+ color : currentColor;
+ white-space : nowrap;
+ text-transform : uppercase;
+ font-weight : 600 !important;
+ font-size : 14px;
+ font-style : inherit;
+ font-variant : inherit;
+ padding : 6px 16px !important;
+ }
+`
diff --git a/src/Components/RedirectModal.js b/src/Components/RedirectModal.js
index 525e65fa..f826b54e 100644
--- a/src/Components/RedirectModal.js
+++ b/src/Components/RedirectModal.js
@@ -27,7 +27,7 @@ import CloseIcon from '@material-ui/icons/Close';
function CloseModalButton (props) {
return (
<StyledCloseModalButton onClick={props.handleClose}>
- <CloseIcon style={props.contrast === "" ? { color: "#666" } : { color: "white" }} />
+ <CloseIcon/>
</StyledCloseModalButton>
)
}
@@ -62,8 +62,8 @@ export default function RedirectModal (props) {
}}
>
<Fade in={props.open}>
- <Container contrast={props.contrast}>
- <CloseModalButton contrast={props.contrast} handleClose={props.handleClose}/>
+ <Container>
+ <CloseModalButton handleClose={props.handleClose}/>
<Header>
<span style={{width:"32px"}}/>
<h2>Você será redirecionado para outro site</h2>
@@ -74,14 +74,8 @@ export default function RedirectModal (props) {
Lembre-se de que você pode reportar caso considere o conteúdo abusivo/ofensivo ou caso a página não corresponda a descrição apresentada.
</div>
<section style={{display : "flex", flexDirection : "row", justifyContent : "center"}}>
- <ButtonGrey contrast={props.contrast} onClick={props.handleClose}>
- CANCELAR
- </ButtonGrey>
- <a href={props.link} target="_blank" rel="noreferrer noopener" style={{textDecoration : "none !important"}}>
- <ButtonOrange contrast={props.contrast}>
- CONTINUAR
- </ButtonOrange>
- </a>
+ <ButtonGrey onClick={props.handleClose}>CANCELAR</ButtonGrey>
+ <a href={props.link} target="_blank" rel="noreferrer noopener" style={{textDecoration : "none !important"}}><ButtonOrange>CONTINUAR</ButtonOrange></a>
</section>
</Content>
</Container>
@@ -91,11 +85,10 @@ export default function RedirectModal (props) {
}
const ButtonOrange = styled(Button)`
- color: ${props => props.contrast === "" ? "white" : "yellow"} !important;
- background-color: ${props => props.contrast === "" ? "#ff7f00" : "black"} !important;
- text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
- border: ${props => props.contrast === "" ? "none" : "1px solid white"} !important;
box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
+ background-color : #ff7f00 !important;
+ color : #fff !important;
+ text-decoration : none !important;
text-transform : uppercase !important;
outline : none !important;
text-align : center !important;
@@ -107,15 +100,14 @@ const ButtonOrange = styled(Button)`
const ButtonGrey = styled(Button)`
- color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
- background-color: inherit !important;
- text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
-
&:hover {
- background-color : ${props => props.contrast === "" ? "rgba(158,158,158,0.2)" : ""} !important;
+ background-color : rgba(158,158,158,0.2) !important;
}
margin-top : 5px !important;
margin-right : 15px !important;
+ background-color : transparent !important;
+ color : #666 !important;
+ text-decoration : none !important;
outline : none !important;
text-align : center !important;
font-size : 14px !important;
@@ -124,6 +116,7 @@ const ButtonGrey = styled(Button)`
`
const Content = styled.div`
+ color : #666;
padding : 20px 30px;
overflow : visible;
text-align : center;
@@ -137,6 +130,7 @@ const Header = styled.div`
h2 {
font-size : 26px;
font-weight : lighter;
+ color : #666
padding : 10px 20px 0 20px;
}
@@ -156,10 +150,8 @@ const StyledModal = styled(Modal)`
`
const Container = styled.div`
box-sizing : border-box;
- background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
- color: ${props => props.contrast === "" ? "#666" : "white"} !important;
- border: ${props => props.contrast === "" ? "none" : "1px solid white"} !important;
box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px gba(0,0,0,.12);
+ background-color : white;
align : center;
display : flex;
flex-direction : column;
diff --git a/src/Components/ReportButton.js b/src/Components/ReportButton.js
index d9f02978..654780a7 100644
--- a/src/Components/ReportButton.js
+++ b/src/Components/ReportButton.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, useContext } from 'react'
+import React, {useState, useContext} from 'react'
import styled from 'styled-components'
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
@@ -24,10 +24,10 @@ import ReportIcon from '@material-ui/icons/Error';
import Button from '@material-ui/core/Button';
import MoreVertIcon from '@material-ui/icons/MoreVert';
import ReportModal from './ReportModal.js'
-import { Store } from '../Store.js'
+import {Store} from '../Store.js'
-export default function ReportButton(props) {
- const { state } = useContext(Store)
+export default function ReportButton (props) {
+ const {state} = useContext(Store)
/*Menu control variables-----------------------------*/
const [anchorEl, setAnchorEl] = React.useState(null);
@@ -57,36 +57,33 @@ export default function ReportButton(props) {
return (
<>
- {
- reportModal &&
- <ReportModal contrast={state.contrast} open={reportModal} handleClose={() => handleModal()}
+ {
+ reportModal &&
+ <ReportModal open={reportModal} handleClose={() => handleModal()}
form="user" complainableId={props.complainableId}
complainableType={props.complainableType}
- {...props} />
- }
- {/*
+ {...props}/>
+ }
+ {/*
loginModal &&
<LoginModal open={loginModal} handleClose={() => {toggleLoginModal(false)}}/>
*/}
- <Button onClick={handleClick}>
- <MoreVertIcon style={state.contrast === "" ? { color: "#666" } : { color: "yellow" }} />
- </Button>
- <StyledMenu
- id="simple-menu"
- anchorEl={anchorEl}
- keepMounted
- open={Boolean(anchorEl)}
- onClose={handleClose}
- style={{ borderRadius: "0" }}
- MenuListProps={{
- disablePadding: true
- }}
- >
- <MenuItem onClick={() => { handleModal() }} style={state.contrast === "" ? { color: "#666", backgroundColor: "white" } : { color: "white", backgroundColor: "black" }}>
- <ReportIcon />
- <span style={state.contrast === "" ? { paddingLeft: "3px" } : { paddingLeft: "3px", color: "yellow", textDecoration: "underline" }}>Reportar</span>
- </MenuItem>
- </StyledMenu>
+ <Button onClick={handleClick}>
+ <MoreVertIcon style={{color : "#666"}}/>
+ </Button>
+ <StyledMenu
+ id="simple-menu"
+ anchorEl={anchorEl}
+ keepMounted
+ open={Boolean(anchorEl)}
+ onClose={handleClose}
+ style={{borderRadius : "0"}}
+ >
+ <MenuItem onClick={() => {handleModal()}} style={{color : "#666"}}>
+ <ReportIcon/>
+ <span style={{paddingLeft : "3px"}}>Reportar</span>
+ </MenuItem>
+ </StyledMenu>
</>
)
}
diff --git a/src/Components/ReportColecaoForm.js b/src/Components/ReportColecaoForm.js
index 56141563..37c4a773 100644
--- a/src/Components/ReportColecaoForm.js
+++ b/src/Components/ReportColecaoForm.js
@@ -21,24 +21,23 @@ import styled from 'styled-components'
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
-import {StyledFormControl, ButtonsDiv, ButtonCancelar, StyledTextField, useStyles} from './ReportUserForm.js'
+import TextField from '@material-ui/core/TextField';
+import {StyledFormControl, ButtonsDiv, ButtonCancelar} from './ReportUserForm.js'
import { withStyles } from '@material-ui/core/styles';
const StyledRadio = withStyles({
- root: {
- color: '#666',
- '&$checked': {
- color: '#673ab7',
- },
+ root: {
+ color: '#666',
+ '&$checked': {
+ color: '#673ab7',
},
- checked: {},
+ },
+ checked: {},
})((props) => <Radio color="default" {...props} />);
export default function ReportColecaoForm (props) {
const [value, setValue] = React.useState(-1);
- const classes = useStyles();
-
const handleChange = (event) => {
setValue(event.target.value);
};
@@ -74,11 +73,14 @@ export default function ReportColecaoForm (props) {
if( finalRadioValue !== -1 && !(finalMoreInfo.key)) {
props.handleSubmit(finalRadioValue, finalMoreInfo.value)
}
+ else {
+ console.log('oops')
+ }
}
return (
<form onSubmit={(e) => handleSubmit(e)} style={{textAlign : "left"}}>
- <StyledFormControl contrast={props.contrast} component="fieldset">
+ <StyledFormControl component="fieldset">
<RadioGroup value={value} onChange={handleChange}>
{
options.map(option =>
@@ -89,7 +91,6 @@ export default function ReportColecaoForm (props) {
</StyledFormControl>
<StyledTextField
- contrast={props.contrast}
id = {"report-text-field"}
label={"Escreva mais sobre o problema"}
value = {moreInfo.value}
@@ -98,24 +99,38 @@ export default function ReportColecaoForm (props) {
multiline={true}
rowsMax = {"5"}
error = {moreInfo.key}
- InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
required = {false}
style={{width : "100%"}}
/>
<ButtonsDiv>
- <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar>
- <ButtonEnviar contrast={props.contrast} type="submit">ENVIAR</ButtonEnviar>
+ <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar>
+ <ButtonEnviar type="submit">ENVIAR</ButtonEnviar>
</ButtonsDiv>
</form>
)
}
+const StyledTextField = styled(TextField)`
+ .MuiFormHelperText-root {
+ text-align : left;
+ }
+
+ label.Mui-focused {
+ color : #673ab7;
+ }
+
+ label.Mui-focused.Mui-error {
+ color : red;
+ }
+
+ .MuiInput-underline::after {
+ border-bottom: 2px solid #673ab7;
+ }
+`
const ButtonEnviar = styled(Button)`
- color: ${props => props.contrast === "" ? "white" : "yellow"} !important;
- background-color: ${props => props.contrast === "" ? "#673ab7" : "black"} !important;
- text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
- border: ${props => props.contrast === "" ? "none" : "1px solid white"} !important;
+ background-color : #673ab7 !important;
+ color : #fff !important;
font-size: 14px !important;
font-weight: 500 !important;
height: 36px !important;
@@ -127,6 +142,7 @@ const ButtonEnviar = styled(Button)`
min-width : 88px !important;
vertical-align : middle !important;
margin : 6px 8px !important;
+ text-decoration : none !important;
.MuiButton-label {
padding-right : 16px;
diff --git a/src/Components/ReportModal.js b/src/Components/ReportModal.js
index 0bccdb08..079ca75f 100644
--- a/src/Components/ReportModal.js
+++ b/src/Components/ReportModal.js
@@ -33,7 +33,7 @@ import SnackbarComponent from './SnackbarComponent.js'
function CloseModalButton (props) {
return (
<StyledCloseModalButton onClick={props.handleClose}>
- <CloseIcon style={props.contrast === "" ? { color: "#666" } : { color: "white" }}/>
+ <CloseIcon/>
</StyledCloseModalButton>
)
}
@@ -55,6 +55,7 @@ export default function ReportModal (props) {
}
postRequest(url, payload, (data) => {
+ console.log(data)
props.handleClose();
handleSnackbar(true);
}, (error) => {console.log(error)})
@@ -65,22 +66,23 @@ export default function ReportModal (props) {
switch (formType) {
case 'colecao':
return (
- <ReportColecaoForm contrast={props.contrast} handleClose={props.handleClose} handleSubmit={handleSubmit}/>
+ <ReportColecaoForm handleClose={props.handleClose} handleSubmit={handleSubmit}/>
)
case 'recurso':
- return (
- <ReportRecursoForm contrast={props.contrast} handleClose={props.handleClose} handleSubmit={handleSubmit}/>
+ return (
+ <ReportRecursoForm handleClose={props.handleClose} handleSubmit={handleSubmit}/>
)
default:
return (
- <ReportUserForm contrast={props.contrast} handleClose={props.handleClose} handleSubmit={handleSubmit}/>
+ <ReportUserForm handleClose={props.handleClose} handleSubmit={handleSubmit}/>
)
}
}
return (
<React.Fragment>
- <SnackbarComponent snackbarOpen={snackbarOpen} severity={"success"} handleClose={() => {handleSnackbar(false)}} text={"Sua reclamação foi recebida."}/>
+ <SnackbarComponent snackbarOpen={snackbarOpen} severity={"success"} handleClose={() => {handleSnackbar(false)}} text={"Sua reclamação foi recebida."}
+ />
<StyledModal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
@@ -95,11 +97,11 @@ export default function ReportModal (props) {
}}
>
<Fade in={props.open}>
- <ReportContainer className={`${props.contrast}BackColor ${props.contrast}Text ${props.contrast}Border`}>
+ <ReportContainer>
<Header>
<span style={{width:"32px"}}/>
<h2>O que está acontecendo?</h2>
- <CloseModalButton contrast={props.contrast} handleClose={props.handleClose}/>
+ <CloseModalButton handleClose={props.handleClose}/>
</Header>
<Content>
@@ -118,10 +120,10 @@ export default function ReportModal (props) {
const Content = styled.div`
padding : 20px 30px;
overflow : visible;
+ max-width : 470px;
`
const Header = styled.div`
- text-align : center;
display : flex;
flex-direction : row;
padding : 10px 26px 0 26px;
@@ -132,6 +134,7 @@ const Header = styled.div`
h2 {
font-size : 26px;
font-weight : lighter;
+ color : #666
}
`
@@ -152,6 +155,7 @@ const StyledModal = styled(Modal)`
display : flex;
align-items: center;
justify-content : center;
+ text-align : center;
padding : 10px !important;
max-width : none;
max-height : none;
@@ -159,6 +163,7 @@ const StyledModal = styled(Modal)`
const ReportContainer = styled.div`
box-sizing : border-box;
+ background-color : white;
max-width : none;
align : center;
display : flex;
@@ -171,5 +176,6 @@ const ReportContainer = styled.div`
@media screen and (max-width : 899px) {
width : 100%;
+ height : 100%;
}
`
diff --git a/src/Components/ReportRecursoForm.js b/src/Components/ReportRecursoForm.js
index 34de4547..a1c73127 100644
--- a/src/Components/ReportRecursoForm.js
+++ b/src/Components/ReportRecursoForm.js
@@ -16,12 +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 from 'react';
-import { Button } from '@material-ui/core';
-import styled from 'styled-components'
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
-import {StyledFormControl, StyledTextField, ButtonsDiv, ButtonCancelar, useStyles} from './ReportUserForm.js'
+import {StyledFormControl, StyledTextField, ButtonsDiv, ButtonCancelar, ButtonEnviar} from './ReportUserForm.js'
import { withStyles } from '@material-ui/core/styles';
const StyledRadio = withStyles({
@@ -37,8 +35,6 @@ const StyledRadio = withStyles({
export default function ReportRecursoForm (props) {
const [value, setValue] = React.useState(-1);
- const classes = useStyles();
-
const handleChange = (event) => {
setValue(event.target.value);
};
@@ -74,11 +70,14 @@ export default function ReportRecursoForm (props) {
if( finalRadioValue !== -1 && !(finalMoreInfo.key)) {
props.handleSubmit(finalRadioValue, finalMoreInfo.value)
}
+ else {
+ console.log('oops')
+ }
}
return (
<form onSubmit={(e) => handleSubmit(e)} style={{textAlign : "left"}}>
- <StyledFormControl contrast={props.contrast} component="fieldset">
+ <StyledFormControl component="fieldset">
<RadioGroup value={value} onChange={handleChange}>
{
options.map(option =>
@@ -89,7 +88,6 @@ export default function ReportRecursoForm (props) {
</StyledFormControl>
<StyledTextField
- contrast={props.contrast}
id = {"report-text-field"}
label={"Escreva mais sobre o problema"}
value = {moreInfo.value}
@@ -98,38 +96,14 @@ export default function ReportRecursoForm (props) {
multiline={true}
rowsMax = {"5"}
error = {moreInfo.key}
- InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
required = {false}
style={{width : "100%"}}
/>
<ButtonsDiv>
- <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar>
- <ButtonEnviar contrast={props.contrast} type="submit">ENVIAR</ButtonEnviar>
+ <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar>
+ <ButtonEnviar type="submit">ENVIAR</ButtonEnviar>
</ButtonsDiv>
</form>
)
}
-
-export const ButtonEnviar = styled(Button)`
- color: ${props => props.contrast === "" ? "white !important" : "yellow !important"};
- background-color: ${props => props.contrast === "" ? "#f07e05 !important" : "black !important"};
- text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
- border: ${props => props.contrast === "" ? "none !important" : "1px solid white !important"};
- font-size: 14px !important;
- font-weight: 500 !important;
- height: 36px !important;
- border-radius: 3px !important;
- padding-left: 16px !important;
- padding-right: 16px !important;
- box-shadow: 0 2px 5px 0 rgba(0,0,0,.26) !important;
- outline : none !important;
- min-width : 88px !important;
- vertical-align : middle !important;
- margin : 6px 8px !important;
-
- .MuiButton-label {
- padding-right : 16px;
- padding-left : 16px;
- }
-`
\ No newline at end of file
diff --git a/src/Components/ReportUserForm.js b/src/Components/ReportUserForm.js
index 28321b53..37086572 100644
--- a/src/Components/ReportUserForm.js
+++ b/src/Components/ReportUserForm.js
@@ -23,37 +23,20 @@ import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormControl from '@material-ui/core/FormControl';
import TextField from '@material-ui/core/TextField';
-import { withStyles, makeStyles } from '@material-ui/core/styles';
+import { withStyles } from '@material-ui/core/styles';
const StyledRadio = withStyles({
- root: {
- '&$checked': {
- color: '#ff7f00 !important',
- },
+ root: {
+ '&$checked': {
+ color: '#ff7f00 !important',
},
- checked: {},
-})((props) => <Radio {...props} />);
-
-export const useStyles = makeStyles(theme => ({
- darkTextField: {
- maxWidth: "100%",
- fontSize: "15px",
- color: "white",
- width: "100%"
- },
- lightTextField: {
- maxWidth: "100%",
- fontSize: "15px",
- color: "black",
- width: "100%"
- }
-}));
+ },
+ checked: {},
+})((props) => <Radio color="default" {...props} />);
export default function ReportForm (props) {
const [value, setValue] = useState(-1);
- const classes = useStyles();
-
const handleChange = (event) => {
setValue(event.target.value);
};
@@ -95,18 +78,17 @@ export default function ReportForm (props) {
return (
<form onSubmit={(e) => {formSubmit(e)}}>
- <StyledFormControl contrast={props.contrast} component="fieldset">
+ <StyledFormControl component="fieldset">
<RadioGroup value={value} onChange={handleChange}>
{
options.map(option =>
- <FormControlLabel value={option.value} control={<StyledRadio contrast={props.contrast}/>} label={option.text} />
+ <FormControlLabel value={option.value} control={<StyledRadio/>} label={option.text} />
)
}
</RadioGroup>
</StyledFormControl>
<StyledTextField
- contrast={props.contrast}
id = {"Escreva mais sobre o problema"}
label={"Escreva mais sobre o problema"}
type = {"text"}
@@ -116,14 +98,13 @@ export default function ReportForm (props) {
multiline={true}
rowsMax = {"5"}
error = {moreInfo.key}
- InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
required = {false}
style={{width:"100%"}}
/>
<ButtonsDiv>
- <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar>
- <ButtonEnviar contrast={props.contrast} type="submit">ENVIAR</ButtonEnviar>
+ <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar>
+ <ButtonEnviar type="submit">ENVIAR</ButtonEnviar>
</ButtonsDiv>
</form>
);
@@ -137,23 +118,23 @@ export const ButtonsDiv = styled.div`
`
export const ButtonCancelar = styled(Button)`
- color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
- text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
+ &:hover {
+ background-color : rgba(158,158,158,0.2) !important;
+ }
height : 36px !important;
padding-left : 16px !important;
padding-right : 16px !important;
font-weight : 500 !important;
border-radius : 3px !important;
+ color :#666 !important;
background-color: transparent;
min-width : 88px !important;
height : 36px !important;
`
export const ButtonEnviar = styled(Button)`
- color: ${props => props.contrast === "" ? "white" : "yellow"} !important;
- background-color: ${props => props.contrast === "" ? "#00bcd4" : "black"} !important;
- text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
- border: ${props => props.contrast === "" ? "none" : "1px solid white"} !important;
+ background-color : #ff7f00 !important;
+ color : #fff !important;
font-size: 14px !important;
font-weight: 500 !important;
height: 36px !important;
@@ -165,6 +146,7 @@ export const ButtonEnviar = styled(Button)`
min-width : 88px !important;
vertical-align : middle !important;
margin : 6px 8px !important;
+ text-decoration : none !important;
.MuiButton-label {
padding-right : 16px;
@@ -172,43 +154,26 @@ export const ButtonEnviar = styled(Button)`
}
`
export const StyledTextField = styled(TextField)`
-
- padding: 20px 20px 20px 20px;
- .MuiOutlinedInput-root {
- &.Mui-focused fieldset {
- border-color: ${props => props.contrast === "" ? "#ff7f00" : "yellow"};
- }
- fieldset {
- border-color: ${props => props.contrast === "" ? "#666" : "white"};
- }
- }
-
- label{
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ .MuiFormHelperText-root {
+ text-align : left;
}
label.Mui-focused {
- color: ${props => props.contrast === "" ? "#ff7f00" : "yellow"};
+ color : orange;
}
- .MuiFormHelperText-root {
- text-align : left;
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ label.Mui-focused.Mui-error {
+ color : red;
}
.MuiInput-underline::after {
- border-bottom: 2px solid ${props => props.contrast === "" ? "#ff7f00" : "yellow"};
+ border-bottom: 2px solid orange;
}
-
`
export const StyledFormControl = styled(FormControl)`
.MuiFormControlLabel-root {
- color: ${props => props.contrast === "" ? "#666" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- }
- .MuiIconButton-label {
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color : #666;
}
.PrivateRadioButtonIcon-checked {
diff --git a/src/Components/ResourceCardFunction.js b/src/Components/ResourceCardFunction.js
index 00931008..d81a0ade 100644
--- a/src/Components/ResourceCardFunction.js
+++ b/src/Components/ResourceCardFunction.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, useEffect, useContext } from 'react';
-import { Store } from '../Store'
-import "./carousel.css";
+import React, { useState, useContext, useEffect } from 'react';
+import { Store } from '../Store.js'
import Card from '@material-ui/core/Card';
import { apiDomain } from '../env';
import ResourceCardOptions from './ResourceCardOptions'
@@ -44,7 +43,7 @@ import { noAvatar } from "ImportImages.js";
import { IcDefault } from "ImportImages.js";
export default function ResourceCardFunction(props) {
- const { state } = useContext(Store);
+ const { state } = useContext(Store)
const [thumbnail, setThumbnail] = useState(null)
// eslint-disable-next-line
const [label, setLabel] = useState(props.type)
@@ -68,7 +67,7 @@ export default function ResourceCardFunction(props) {
setThumbnail(`${apiDomain}` + props.thumbnail)
}
else {
- setThumbnail(getDefaultThumbnail(label))
+ setThumbnail(getDefaultThumbnail(label))
}
if (props.avatar) {
@@ -86,14 +85,10 @@ export default function ResourceCardFunction(props) {
}
const handleLike = () => {
- if (!state.currentUser.id) {
+ if (state.currentUser.id)
+ putRequest(`/learning_objects/${props.id}/like/`, {}, handleSuccessLike, (error) => { console.log(error) })
+ else
handleLogin()
- }
- else {
- const url = `/learning_objects/${props.id}/like/`
-
- putRequest(url, {}, handleSuccessLike, (error) => { console.log(error) })
- }
}
const handleLogin = () => {
@@ -111,9 +106,9 @@ export default function ResourceCardFunction(props) {
handleSuccessfulLogin(false);
}
- const SlideAnimationContent = (contrast) => {
+ const SlideAnimationContent = () => {
return (
- <SlideContentDiv style={contrast === '' ? { backgroundColor: "#ff9226" } : { backgroundColor: "inherit" }}>
+ <SlideContentDiv>
<div style={{ padding: 7 }}>
<HeaderContainer container="row" justify="flex-start" alignItems="center" >{/*marginBottom:10px*/}
<AvatarDiv item xs={2}>
@@ -124,13 +119,13 @@ export default function ResourceCardFunction(props) {
<p>{props.author}</p>
</EnviadoPor>
</HeaderContainer>
- { //className={`${props.contrast}BackColor`} ---
+ {
props.tags ?
<TagContainer container direction="row">
{
props.tags.map((tag) =>
<Grid item key={tag.id}>
- <span className={`${props.contrast}BackColor ${props.contrast}Text`}>{tag.name}</span>
+ <span >{tag.name}</span>
</Grid>
)
}
@@ -144,9 +139,9 @@ export default function ResourceCardFunction(props) {
return (
<React.Fragment>
- <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}
+ <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}
/>
- <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
/>
<Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleLoginSnackbar}
@@ -155,7 +150,7 @@ export default function ResourceCardFunction(props) {
<Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
</Snackbar>
<StyledCard>
- <CardDiv className={`${props.contrast}Text ${props.contrast}Border`}>
+ <CardDiv>
<CardReaDiv>
<Link to={props.href}>
<Header onMouseEnter={controlSlide} onMouseLeave={controlSlide}>
@@ -164,25 +159,25 @@ export default function ResourceCardFunction(props) {
</div>
{
<div className={`slideContentLinkAfterActive${slideIn}`}>
- <div className={`${props.contrast}Text ${props.contrast}BackColor`} style={{ width: "100%" }}>
- {SlideAnimationContent(props.contrast)}
+ <div className="text" >
+ {SlideAnimationContent()}
</div>
</div>
}
</Header>
</Link>
- <Description className={`${props.contrast}BackColor`}>
- <Link to={props.href} className={`${props.contrast}Text`} style={{ height: '45px', width: "100%" }}> {/*add link to learningObject*/}
- <Title className={`${props.contrast}LinkColor`}>
+ <Description>
+ <Link to={props.href} className="text" style={{ height: '45px' }}> {/*add link to learningObject*/}
+ <Title>
{props.title}
</Title>
</Link>
<Rating
- style={props.contrast === "" ? {} : { color: "white" }}
name="customized-empty"
value={props.rating}
readOnly
- emptyIcon={<StarBorderIcon className={`${props.contrast}Text`} fontSize="inherit" />}
+ style={{ color: "#666" }}
+ emptyIcon={<StarBorderIcon fontSize="inherit" />}
/>
<Footer>
<Type>
@@ -192,29 +187,24 @@ export default function ResourceCardFunction(props) {
<LikeCounter>
<span>{likesCount}</span>
<ButtonNoWidth onClick={handleLike}>
- <FavoriteIcon className={`${props.contrast}LinkColor`} style={props.contrast === "" ? { color: liked ? "red" : "#666" } : { color: liked ? "red" : "white" }} />
+ <FavoriteIcon style={{ color: liked ? "red" : "#666" }} />
</ButtonNoWidth>
</LikeCounter>
</Footer>
</Description>
</CardReaDiv>
- <CardReaFooter className={`${props.contrast}BackColor`}>
- <Grid container>
- <Grid item xs={2}></Grid>
- <Grid item xs={8} style={{ display: "flex", justifyContent: "center" }}>
- <ButtonGuardarColecao contrast={props.contrast} thumb={props.thumbnail} title={props.title} learningObjectId={props.id} />
- </Grid>
- <Grid item xs={2} style={{ display: "flex", justifyContent: "flex-end" }}>
- <ResourceCardOptions
- contrast={props.contrast}
- learningObjectId={props.id}
- downloadableLink={props.downloadableLink}
- thumb={props.thumbnail}
- title={props.title}
- handleLogin={handleLogin}
- />
- </Grid>
- </Grid>
+ <CardReaFooter>
+ <div style={{ display: "flex", height: "100%" }}>
+ <ButtonGuardarColecao thumb={props.thumbnail} title={props.title} learningObjectId={props.id}
+ />
+ </div>
+ <ResourceCardOptions
+ learningObjectId={props.id}
+ downloadableLink={props.downloadableLink}
+ thumb={props.thumbnail}
+ title={props.title}
+ handleLogin={handleLogin}
+ />
</CardReaFooter>
</CardDiv>
</StyledCard>
@@ -233,16 +223,18 @@ export const TagContainer = styled(Grid)`
${'' /* border : 2px solid red; */}
span {
word-wrap: break-word;
+ background-color : #fff;
display : flex;
justify-content : center;
align-items : center;
height : 22px;
- text-align: center;
+ tet-align : center;
margin: 3px;
-webkit-box-direction: normal;
overflow : hidden;
padding : 1px 8px;
border-radius : 10px;
+ color : #666;
font-size : 11px;
}
`
@@ -277,6 +269,7 @@ export const AvatarDiv = styled(Grid)`
`
const SlideContentDiv = styled.div`
+ background-color : #ff9226;
${'' /* padding : 10px; */}
width : 272.5px;
height : 189px;
@@ -287,6 +280,8 @@ const CardReaFooter = styled.div`
height : 60px;
display : flex;
justify-content : space-between;
+ border-top : 1px solid #e5e5e5;
+ border-bottom : 1px solid #e5e5e5;
align-items : center;
padding : 0 15px 0 15px;
`
@@ -297,6 +292,7 @@ export const ButtonNoWidth = styled(Button)`
min-width : 24px !important;
max-height : 24px !important;
padding : 0 !important;
+ background-color : #fff !important;
color : #a5a5a5 !important;
border : 0 !important;
@@ -319,6 +315,7 @@ export const LikeCounter = styled.div`
.btn-like {
padding : 0 !important;
+ background-color : #fff !important;
border : 0 !important;
min-width : min-content;
}
@@ -337,7 +334,7 @@ const Type = styled.div`
height : 27px;
width : 27px;
padding-right : .4em;
- vertical-align : middle;
+ vertical-align : middle
align-self : center;
.st1 {
@@ -356,6 +353,7 @@ export const Footer = styled.div`
const Description = styled.div`
display : flex;
flex : 1;
+ background-color : #fff;
flex-direction : column;
justify-content: space-between;
padding : 15px;
@@ -404,6 +402,7 @@ export const CardReaDiv = styled.div`
`
export const CardDiv = styled.div`
+ background-color : #fff;
text-align : start;
font-family : 'Roboto', sans serif;
color : #666;
@@ -411,7 +410,7 @@ export const CardDiv = styled.div`
export const StyledCard = styled(Card)`
width : 272.5px;
- min-height : 380px;
+ max-height : 380px;
margin-top : 10px;
margin-bottom : 10px;
${'' /* max-width : 345px; */}
diff --git a/src/Components/ResourceCardOptions.js b/src/Components/ResourceCardOptions.js
index acec633b..1ac22f4a 100644
--- a/src/Components/ResourceCardOptions.js
+++ b/src/Components/ResourceCardOptions.js
@@ -115,61 +115,57 @@ export default function ResourceCardOptions(props) {
<>
<React.Fragment>
- <ReportModal contrast={props.contrast} open={reportModal} handleClose={() => handleModalReportar(false)}
+ <ReportModal open={reportModal} handleClose={() => handleModalReportar(false)}
form="recurso" complainableId={props.learningObjectId}
complainableType={"LearningObject"}
{...props}
/>
- <GuardarModal contrast={props.contrast} open={saveToCol} handleClose={() => { toggleSave(false) }}
+ <GuardarModal open={saveToCol} handleClose={() => { toggleSave(false) }}
thumb={props.thumb} title={props.title} recursoId={props.learningObjectId}
/>
- <ShareModal contrast={props.contrast} open={shareOpen} handleClose={() => { toggleShare(false) }}
+ <ShareModal 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!"}
/>
<div style={{ fontSize: "12px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
- <ButtonNoWidth aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
- <MoreVertIcon className={`${props.contrast}LinkColor ${props.contrast}Text`} />
+ <ButtonNoWidth aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{ color: "#666" }}>
+ <MoreVertIcon style={{ color: "#666" }} />
</ButtonNoWidth>
<Menu
- className={`${props.contrast}Text`}
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
- MenuListProps={{
- disablePadding: true
- }}
- >
- <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={handleClose}>
+ >
+ <StyledMenuItem>
<Link to={"/recurso/" + props.learningObjectId}>
- <ListItemIcon className={`${props.contrast}IconColor`}><OpenIcon /></ListItemIcon>Abrir
+ <ListItemIcon><OpenIcon /></ListItemIcon>Abrir
</Link>
</StyledMenuItem>
- <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => window.open("/recurso/" + props.learningObjectId, "_blank")}>
- <ListItemIcon className={`${props.contrast}IconColor`}><OpenInBrowserIcon /></ListItemIcon> Abrir em nova guia
+ <StyledMenuItem onClick={() => window.open("/recurso/" + props.learningObjectId, "_blank")}>
+ <ListItemIcon><OpenInBrowserIcon /></ListItemIcon> Abrir em nova guia
</StyledMenuItem>
{
props.downloadableLink &&
- <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => { enableDownload(); handleClose() }}>
- <ListItemIcon className={`${props.contrast}IconColor`}><DownloadIcon /></ListItemIcon>Baixar
+ <StyledMenuItem onClick={() => { enableDownload(); handleClose() }}>
+ <ListItemIcon><DownloadIcon /></ListItemIcon>Baixar
</StyledMenuItem>
}
- <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={handleShare}>
- <ListItemIcon className={`${props.contrast}IconColor`}><ShareIcon /></ListItemIcon>Compartilhar
+ <StyledMenuItem onClick={handleShare}>
+ <ListItemIcon><ShareIcon /></ListItemIcon>Compartilhar
</StyledMenuItem>
- <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={handleGuardar}>
- <ListItemIcon className={`${props.contrast}IconColor`}><AddIcon /></ListItemIcon>Guardar
+ <StyledMenuItem onClick={handleGuardar}>
+ <ListItemIcon><AddIcon /></ListItemIcon>Guardar
</StyledMenuItem>
- <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => { handleReport() }}>
- <ListItemIcon className={`${props.contrast}IconColor`}><ReportIcon /></ListItemIcon>Reportar
+ <StyledMenuItem onClick={() => { handleReport() }}>
+ <ListItemIcon><ReportIcon /></ListItemIcon>Reportar
</StyledMenuItem>
</Menu>
@@ -184,6 +180,9 @@ const ButtonNoWidth = styled(Button)`
min-width : 24px !important;
max-height : 24px !important;
padding : 0 !important;
+ background-color : #fff !important;
+ color : #a5a5a5 !important;
+ border : 0 !important;
.MuiButton-root {
width : 24px !important;
@@ -201,11 +200,12 @@ const ButtonNoWidth = styled(Button)`
`
const StyledMenuItem = styled(MenuItem)`
- background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ color : #666 !important;
.MuiSvgIcon-root {
vertical-align : middle !important;
}
a {
- color: inherit !important;
+ text-decoration : none !important;
+ color : #666 !important;
}
`
diff --git a/src/Components/ResourceList.js b/src/Components/ResourceList.js
index e708c007..e32176c7 100644
--- a/src/Components/ResourceList.js
+++ b/src/Components/ResourceList.js
@@ -124,27 +124,27 @@ export default function ResourceList(props) {
<ResourceListContainer>
<Grid container direction="row" justify="space-around" alignItems="center">
<Grid item>
- <Title contrast={props.contrast}>
+ <Title>
{props.resources.length ?
props.resources.length + " recurso" + (props.resources.length === 1 ? "" : "s")
- : "Nenhum recurso encontrado"}
+ : "Carregando coleção"}
</Title>
</Grid>
<Grid item>
- <Button onClick={() => setSelectable(!selectable)}>
- <PanelButtonText contrast={props.contrast}>
+ <Button color="primary" onClick={() => setSelectable(!selectable)}>
+ <PanelButtonText>
{selectable ? "Desativar" : "Ativar"} seleção
</PanelButtonText>
</Button>
</Grid>
<Grid item>
<Button
- style={props.contrast === "" ? {color: "#3f51b5", border: "1px solid #3f51b5"} : {color: "white", border: "1px solid white"}}
+ color="primary"
variant="outlined"
startIcon={<GetAppIcon fontSize="large" />}
onClick={handleDownloadSelection}
>
- <PanelButtonText contrast={props.contrast}>baixar seleção</PanelButtonText>
+ <PanelButtonText>baixar seleção</PanelButtonText>
</Button>
</Grid>
</Grid>
@@ -153,7 +153,6 @@ export default function ResourceList(props) {
return (
<ResourceGrid item key={card.title}>
<ResourceCardFunction
- contrast={props.contrast}
avatar={card.avatar}
id={card.id}
thumbnail={card.thumbnail}
@@ -170,8 +169,8 @@ export default function ResourceList(props) {
/>
{selectable ?
(<SelectButton
- contrast={props.contrast}
variant="outline"
+ color="primary"
startIcon={checkBoxIcon(selected[props.resources.indexOf(card)])}
onClick={() => updateSelected(props.resources.indexOf(card))}
>
@@ -206,19 +205,15 @@ const ResourceListContainer = styled.div`
margin-right: 20;
`
const Title = styled.p`
- color: ${props => props.contrast === "" ? "#666 !important" : "white !important"};
+ color: rgb(102, 102, 102);
font-size: 2em;
font-weigth: 300;
`
const SelectButton = styled(Button)`
width: 100%;
- color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
- text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
`
const PanelButtonText = styled.span`
font-weight: 900;
- color: ${props => props.contrast === "" ? "#3f51b5 !important" : "yellow !important"};
- text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
`
const ResourceGrid = styled(Grid)`
padding-right: 7px;
diff --git a/src/Components/ResourcePageComponents/CommentForm.js b/src/Components/ResourcePageComponents/CommentForm.js
index 7fe1093b..0272d76f 100644
--- a/src/Components/ResourcePageComponents/CommentForm.js
+++ b/src/Components/ResourcePageComponents/CommentForm.js
@@ -1,86 +1,65 @@
-import React, { useState } from "react";
-import styled from "styled-components";
-import Rating from "@material-ui/lab/Rating";
-import StarIcon from "@material-ui/icons/Star";
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import Rating from '@material-ui/lab/Rating';
+import StarIcon from '@material-ui/icons/Star';
import TextField from "@material-ui/core/TextField";
-import { Button } from "@material-ui/core";
-import EditIcon from "@material-ui/icons/Edit";
-import Grid from "@material-ui/core/Grid";
-import { postRequest } from "../HelperFunctions/getAxiosConfig";
-import { makeStyles } from "@material-ui/styles";
-
-const useStyles = makeStyles((theme) => ({
- darkTextField: {
- maxWidth: "100%",
- fontSize: "15px",
- fontWeight: "lighter",
- color: "white",
- width: "100%",
- },
- lightTextField: {
- maxWidth: "100%",
- fontSize: "15px",
- fontWeight: "lighter",
- color: "black",
- width: "100%",
- },
-}));
+import { Button } from '@material-ui/core';
+import EditIcon from '@material-ui/icons/Edit';
+import Grid from '@material-ui/core/Grid';
+import { postRequest } from '../HelperFunctions/getAxiosConfig'
export default function CommentForm(props) {
- const classes = useStyles();
-
const [rating, setRating] = useState({
error: true,
- value: 0,
- });
+ value: 0
+ })
const [comment, setComment] = useState({
error: false,
- value: "",
- });
+ value: ''
+ })
const handleChange = (e) => {
- const userInput = e.target.value;
- const flag = userInput.length === 0 ? true : false;
- setComment({ ...comment, error: flag, value: userInput });
- };
+ const userInput = e.target.value
+ const flag = (userInput.length === 0 ? true : false);
+ setComment({ ...comment, error: flag, value: userInput })
+ }
- const [attemptedSubmit, setAttempt] = useState(false);
+ const [attemptedSubmit, setAttempt] = useState(false)
function handleSuccess(data) {
- props.handleSnackbar(1);
- props.rerenderCallback();
+ props.handleSnackbar(1)
+ props.rerenderCallback()
}
const handleSubmit = (e) => {
- e.preventDefault();
- const finalRating = rating;
- const finalComment = comment;
+ e.preventDefault()
+ const finalRating = rating
+ const finalComment = comment
if (!(finalRating.error || finalComment.error)) {
- let type = props.recurso ? "learning_objects" : "collections";
- const url = `/${type}/${props.recursoId}/reviews`;
+ let type = props.recurso ? 'learning_objects' : 'collections'
+ const url = `/${type}/${props.recursoId}/reviews`
let payload = {
- review: {
- description: finalComment.value,
- review_ratings_attributes: [
+ "review": {
+ "description": finalComment.value,
+ "review_ratings_attributes": [
{
- rating_id: 1,
- value: finalRating.value,
- },
- ],
- },
- };
+ "rating_id": 1,
+ "value": finalRating.value
+ }
+ ]
+ }
+ }
- postRequest(url, payload, handleSuccess, (error) => {
- console.log(error);
- });
- } else {
- setAttempt(true);
+ postRequest(url, payload, handleSuccess, (error) => { console.log(error) })
+ }
+ else {
+ setAttempt(true)
}
- };
+ }
return (
- <StyledForm onSubmit={handleSubmit} contrast={props.contrast}>
+ <StyledForm onSubmit={handleSubmit}>
<label htmlFor="avaliacao-estrelas" className="start-label">
{props.recurso ? "Este recurso foi útil?*" : "Esta coleção foi útil?*"}
</label>
@@ -89,185 +68,96 @@ export default function CommentForm(props) {
name="avaliacao-estrelas"
value={rating.value}
precision={0.5}
- style={
- props.contrast === "" ? { color: "#ff9226" } : { color: "yellow" }
- }
- onChange={(e, newValue) => {
- setRating({
- ...rating,
- error: newValue === null ? true : false,
- value: newValue,
- });
- }}
- emptyIcon={
- <StarIcon
- fontSize="inherit"
- style={
- props.contrast === "" ? { color: "#666" } : { color: "white" }
- }
- />
- }
- getLabelText={(value) => {
- return value + " Estrela" + (value !== 1 ? "s" : "");
- }}
+ style={{ color: "#ff9226" }}
+ onChange={(e, newValue) => { setRating({ ...rating, error: newValue === null ? true : false, value: newValue }) }}
+ emptyIcon={<StarIcon fontSize="inherit" style={{ color: "#666" }} />}
+ getLabelText={(value) => { return (value + ' Estrela' + (value !== 1 ? 's' : '')) }}
/>
</div>
- <div
- className="star-alert"
- style={
- attemptedSubmit ? { visibility: "visible" } : { visibility: "hidden" }
- }
- >
- {props.recurso
- ? "Avalie se o recurso foi útil."
- : "Avalie se esta coleção foi útil."}
- </div>
+ <div className="star-alert" style={attemptedSubmit ? { visibility: "visible" } : { visibility: "hidden" }}>{props.recurso ? "Avalie se o recurso foi útil." : "Avalie se esta coleção foi útil."}</div>
<Grid container>
<Grid item xs={12} md={9}>
<StyledTextField
- contrast={props.contrast}
colecao={!props.recurso}
value={comment.value}
- InputProps={
- props.contrast === ""
- ? { className: classes.lightTextField }
- : { className: classes.darkTextField }
- }
multiline
rows="5"
- variant="outlined"
error={comment.error}
label="Relate sua experiência"
- onChange={(e) => handleChange(e)}
+ onChange={e => handleChange(e)}
required={true}
- help={
- comment.error
- ? props.recurso
- ? "Escreva aqui a sua experiência com este Recurso"
- : "Escreva aqui a sua experiência com esta Coleção"
- : ""
- }
+ help={comment.error ? (props.recurso ? "Escreva aqui a sua experiência com este Recurso" : "Escreva aqui a sua experiência com esta Coleção") : ''}
/>
</Grid>
<Grid item xs={12} md={3}>
- <div
- style={{
- height: "100%",
- display: "flex",
- flexDirection: "column",
- justifyContent: "flex-end",
- }}
- >
- {props.recurso ? (
- <OrangeButton contrast={props.contrast} type="submit">
- Publicar
- </OrangeButton>
- ) : (
- <PurpleButton contrast={props.contrast} type="submit">
- <EditIcon style={props.contrast === "" ? { marginRight: "0.3em" } : { color: "white", marginRight: "0.3em" }} />
- Enviar
- </PurpleButton>
- )}
+ <div style={{ height: "100%", display: "flex", flexDirection: "column", justifyContent: "flex-end" }}>
+ {
+ props.recurso ?
+ (
+ <OrangeButton type="submit">Publicar</OrangeButton>
+ )
+ :
+ (
+ <PurpleButton type="submit"><EditIcon />Enviar</PurpleButton>
+ )
+ }
</div>
</Grid>
<div className="campos-obrigatorios">* Campos obrigatórios.</div>
- </Grid>
+ </Grid >
</StyledForm>
- );
+ )
}
const PurpleButton = styled(Button)`
- color: ${(props) =>
- props.contrast === ""
- ? "rgba(255,255,255,0.87) !important"
- : "yellow !important"};
- text-decoration: ${(props) =>
- props.contrast === "" ? "none !important" : "underline !important"};
- box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26) !important;
- font-weight: 600 !important;
- background-color: ${(props) =>
- props.contrast === "" ? "#673ab7 !important" : "black !important"};
- border: ${(props) =>
- props.contrast === "" ? "0 !important" : "1px solid white !important"};
- :hover {
- background-color: ${(props) =>
- props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
- }
+ background-color : #673ab7 !important;
+ box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
+ font-weight : 600 !important;
+ color : #fff !important;
.icon {
- vertical-align: middle !important;
- font-weight: normal !important;
- font-style: normal !important;
- font-size: 24px !important;
- line-height: 1 !important;
- letter-spacing: normal !important;
- text-transform: none !important;
- display: inline-block !important;
- white-space: nowrap !important;
- word-wrap: normal !important;
- direction: ltr !important;
- padding-right: 2px;
+ vertical-align : middle !important;
+ font-weight : normal !important;
+ font-style : normal !important;
+ font-size : 24px !important;
+ line-height : 1 !important;
+ letter-spacing : normal !important;
+ text-transform : none !important;
+ display : inline-block !important;
+ white-space : nowrap !important;
+ word-wrap : normal !important;
+ direction : ltr !important;
+ padding-right : 2px;
}
-`;
+`
const OrangeButton = styled(Button)`
- color: ${(props) =>
- props.contrast === ""
- ? "rgba(255,255,255,0.87) !important"
- : "yellow !important"};
- text-decoration: ${(props) =>
- props.contrast === "" ? "none !important" : "underline !important"};
- box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26) !important;
- font-weight: 600 !important;
- background-color: ${(props) =>
- props.contrast === "" ? "#ff7f00 !important" : "black !important"};
- border: ${(props) =>
- props.contrast === "" ? "0 !important" : "1px solid white !important"};
- :hover {
- background-color: ${(props) =>
- props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
- }
-`;
+ color : rgba(255,255,255,0.87) !important;
+ box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
+ font-weight : 600 !important;
+ background-color : #ff7f00 !important;
+`
const StyledTextField = styled(TextField)`
.MuiInputBase-root {
- margin-bottom: 5px;
- }
-
- .MuiOutlinedInput-root {
- &.Mui-focused fieldset {
- border-color: ${(props) =>
- props.contrast === ""
- ? props.colecao
- ? "#673ab7"
- : "rgb(255,127,0)"
- : "yellow"};
- }
- fieldset {
- border-color: ${(props) => (props.contrast === "" ? "#666" : "white")};
- }
+ margin-bottom : 5px;
}
- label {
- color: ${(props) => (props.contrast === "" ? "#666" : "white")};
+ label.Mui-focused {
+ color : ${props => props.colecao ? "#673ab7" : "rgb(255,127,0)"}
}
- label.Mui-focused {
- color: ${(props) =>
- props.contrast === ""
- ? props.colecao
- ? "#673ab7"
- : "rgb(255,127,0)"
- : "yellow"};
+ .MuiInput-underline::after {
+ border-bottom: ${props => props.colecao ? "2px solid #673ab7" : "2px solid rgb(255,127,0)"};
}
label.Mui-focused.Mui-error {
- color: red;
+ color : red;
}
width: 95%;
-`;
+`
const StyledForm = styled.form`
display : flex;
@@ -279,7 +169,7 @@ const StyledForm = styled.form`
max-width : 100%;
display : inline-block;
margin-bottom : 0;
- color : ${(props) => (props.contrast === "" ? "#666" : "white")}
+ color : #a5a5a5;
font-weight : 400;
}
@@ -304,4 +194,4 @@ const StyledForm = styled.form`
font-size : 12px;
color :#a5a5a5;
}
-`;
+`
diff --git a/src/Components/ResourcePageComponents/CommentsArea.js b/src/Components/ResourcePageComponents/CommentsArea.js
index 990e6098..1ee202d9 100644
--- a/src/Components/ResourcePageComponents/CommentsArea.js
+++ b/src/Components/ResourcePageComponents/CommentsArea.js
@@ -49,7 +49,7 @@ export default function CommentsArea(props) {
const [totalReviews, setTotalReviews] = useState(0);
const [currPageReviews, setCurrPageReviews] = useState(0);
const [gambiarra, setState] = useState(0)
- const forceUpdate = () => { setCurrPageReviews(0); setState(gambiarra + 1); }
+ const forceUpdate = () => { setState(gambiarra + 1) }
const [loginOpen, setLogin] = useState(false)
const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
const [signUpOpen, setSignUp] = useState(false)
@@ -96,71 +96,6 @@ export default function CommentsArea(props) {
handleSuccessfulLogin(false);
}
- const NoCommentsMessage = (contrast) => {
- const NoCommentsContainer = styled.div`
- text-align: center;
- margin-left: 9vw;
- margin-right: 9vw;
- `
- const BlueTitle = styled.h2`
- color: ${props => props.contrast === "" ? "#F07E05" : "white"};
- `
- const Secondary = styled.h3`
- font-weight: 100;
- color: ${props => props.contrast === "" ? "#666" : "white"};
- `
- const Image = styled.img`
- margin: auto;
- object-fit : contain !important;
- background-color : transparent !important;
- `
- return (
- <>
- <Image src={Comentarios} style={{ width: "100%", height: "45%", maxWidth: 234 }} />
- <NoCommentsContainer>
- <BlueTitle contrast={contrast}>Compartilhe sua opinião com a rede!</BlueTitle>
- <Secondary contrast={contrast}>Gostou deste recurso? Comente e compartilhe com a rede sua opinião. Interagindo com a rede, você contribui para que mais recursos como este sejam criados.</Secondary>
- </NoCommentsContainer>
- </>
- );
- }
-
- const ResourceComments = (contrast) => {
- return (
- <ComentariosBox contrast={contrast}>
- {
- comentarios.map(comentario =>
- <div className="comentario-template" key={comentario.id}>
- <Comment
- contrast={contrast}
- isCollection={false}
- authorID={comentario.user ? comentario.user.id : null}
- authorAvatar={comentario.user ? comentario.user.avatar : null}
- authorName={comentario.user ? comentario.user.name : null}
- name={comentario.name}
- rating={comentario.rating_average}
- reviewRatings={comentario.review_ratings}
- description={comentario.description}
- createdAt={comentario.created_at}
- recurso={true}
- reviewID={comentario.id}
- objectID={props.recursoId}
- handlePost={handlePost}
- rerenderCallback={forceUpdate}
- handleSnackbar={props.handleSnackbar}
- />
- </div>
- )
- }
- <div className="load-more">
- <IconButton className="button" onClick={handleLoadMoreReviews}>
- <KeyboardArrowDownIcon className="icon" />
- </IconButton>
- </div>
- </ComentariosBox>
- );
- }
-
function handleLoadMoreReviews() {
if (comentarios.length !== parseInt(totalReviews))
setCurrPageReviews((previous) => previous + 1)
@@ -177,10 +112,7 @@ export default function CommentsArea(props) {
function handleSuccess(data, headers) {
setIsLoading(false)
- if (currPageReviews !== 0)
- setComentarios((previous) => previous.concat(data.sort((a, b) => a.updated_at > b.updated_at ? -1 : 1)))
- else
- setComentarios(data.sort((a, b) => a.updated_at > b.updated_at ? -1 : 1))
+ setComentarios((previous) => previous.concat(data.sort((a, b) => a.updated_at > b.updated_at ? -1 : 1)))
if (headers.has('X-Total-Count'))
setTotalReviews(headers.get('X-Total-Count'))
}
@@ -206,17 +138,17 @@ export default function CommentsArea(props) {
<Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
</Snackbar>
{/*-------------------------------MODALS---------------------------------------*/}
- <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
/>
- <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
+ <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
{/*----------------------------------------------------------------------------*/}
<Grid container spacing={2} style={{ padding: "10px" }}>
{
(state.currentUser.id !== '') ?
(
<Grid item xs={12} >
- <GrayContainer contrast={state.contrast}>
+ <GrayContainer>
<h3>Conte sua experiência com o Recurso</h3>
<Grid container style={{ paddingTop: "20px" }} spacing={1}>
<Grid item xs={12} sm={2} style={{ paddingLeft: "15px", paddingRight: "15px" }}>
@@ -226,7 +158,6 @@ export default function CommentsArea(props) {
</Grid>
<Grid item xs={12} sm={10}>
<CommentForm
- contrast={state.contrast}
recursoId={props.recursoId}
handleSnackbar={props.handleSnackbar}
rerenderCallback={forceUpdate}
@@ -240,10 +171,10 @@ export default function CommentsArea(props) {
:
(
<Grid item xs={12}>
- <LogInToComment contrast={state.contrast}>
+ <LogInToComment>
<span className="span-laranja">Você precisa entrar para comentar</span>
- <Button onClick={() => handleLogin(true)} style={state.contrast === "" ? { textTransform: "uppercase", color: "#666", fontWeight: "700" } : { textTransform: "uppercase", color: "yellow", fontWeight: "700", textDecoration: "underline" }}>
- <ExitToAppIcon style={state.contrast === "" ? { color: "inherit" } : { color: "white" }} />ENTRAR
+ <Button onClick={() => handleLogin(true)} style={{ textTransform: "uppercase", color: "#666", fontWeight: "700" }}>
+ <ExitToAppIcon />ENTRAR
</Button>
</LogInToComment>
</Grid>
@@ -251,11 +182,56 @@ export default function CommentsArea(props) {
}
{
isLoading ?
- <LoadingDiv contrast={state.contrast}>
+ <LoadingDiv>
<CircularProgress className="loading" />
</LoadingDiv>
:
- totalReviews !== "0" ? ResourceComments(state.contrast) : NoCommentsMessage(state.contrast)
+ totalReviews !== 0 ?
+ (
+ <ComentariosBox>
+ <h3>{totalReviews} {totalReviews !== 1 ? 'Relatos' : 'Relato'} sobre o uso do Recurso</h3>
+ {
+ comentarios.map(comentario =>
+ <div className="comentario-template" key={comentario.id}>
+ <Comment
+ isCollection={false}
+ authorID={comentario.user ? comentario.user.id : null}
+ authorAvatar={comentario.user ? comentario.user.avatar : null}
+ authorName={comentario.user ? comentario.user.name : null}
+ name={comentario.name}
+ rating={comentario.rating_average}
+ reviewRatings={comentario.review_ratings}
+ description={comentario.description}
+ createdAt={comentario.created_at}
+ recurso={true}
+ reviewID={comentario.id}
+ objectID={props.recursoId}
+ handlePost={handlePost}
+ rerenderCallback={forceUpdate}
+ handleSnackbar={props.handleSnackbar}
+ />
+ </div>
+ )
+ }
+ <div className="load-more">
+ <IconButton className="button" onClick={handleLoadMoreReviews}>
+ <KeyboardArrowDownIcon />
+ </IconButton>
+ </div>
+ </ComentariosBox>
+ )
+ :
+ (
+ <Grid item xs={12}>
+ <LogInToComment>
+ <img alt="" src={Comentarios} />
+ <span className="span-laranja">Compartilhe sua experiência com a Rede!</span>
+ <AoRelatar>
+ Ao relatar sua experiência de uso do Recurso você estará auxiliando professores de todo paÃs.
+ </AoRelatar>
+ </LogInToComment>
+ </Grid>
+ )
}
</Grid>
</React.Fragment>
@@ -270,7 +246,7 @@ const LoadingDiv = styled.div`
align-items: center;
.loading{
align-self: center;
- color: ${props => props.contrast === "" ? "#ff7f00" : "white"};
+ color: #ff7f00;
size: 24px;
}
`
@@ -285,7 +261,7 @@ const ComentariosBox = styled.div`
font-family: 'Roboto Light','Roboto Regular',Roboto;
font-weight: 300;
font-style: normal;
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color:#666;
font-size: 1.857em;
margin: 15px 2%;
text-align : flex-start;
@@ -298,7 +274,6 @@ const ComentariosBox = styled.div`
}
.load-more{
- margin-top : 10px;
width: 100%;
display: flex;
flex-direction: row;
@@ -307,16 +282,15 @@ const ComentariosBox = styled.div`
}
.button{
- border: ${props => props.contrast === "" ? "0" : "1px solid white"};
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
- :hover{
- background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24)"};
- }
}
-
- .icon{
- color: ${props => props.contrast === "" ? "#666" : "yellow"};
- }
+`
+const AoRelatar = styled.div`
+ width : 70%;
+ font-size : 20px;
+ font-weight : 300;
+ text-align : center;
+ padding-bottom : 20px;
`
const LogInToComment = styled.div`
@@ -330,7 +304,7 @@ const LogInToComment = styled.div`
font-size : 24px;
font-weight : 700;
padding-bottom : 5px;
- color: ${props => props.contrast === "" ? "#ff7f00" : "white"};
+ color : #ff7f00;
}
img {
@@ -340,7 +314,7 @@ const LogInToComment = styled.div`
`
const GrayContainer = styled.div`
- background-color: ${props => props.contrast === "" ? "white" : "black"};
+ background-color : #fafafa;
font-weight : 400;
font-size : 14px;
padding-bottom : 20px;
@@ -357,7 +331,7 @@ const GrayContainer = styled.div`
text-align: center;
font-weight: 300;
font-style: normal;
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color: #666;
font-size: 1.857em;
margin-bottom : 10px;
margin-left : 2%;
diff --git a/src/Components/ResourcePageComponents/Footer.js b/src/Components/ResourcePageComponents/Footer.js
index f1bc7465..98e7fcd1 100644
--- a/src/Components/ResourcePageComponents/Footer.js
+++ b/src/Components/ResourcePageComponents/Footer.js
@@ -47,17 +47,17 @@ function ReportButton(props) {
return (
!props.complained ?
(
- <ButtonGrey contrast={props.contrast} onClick={props.userLoggedIn ? props.toggleReport : props.openLogin}>
+ <ButtonGrey onClick={props.userLoggedIn ? props.toggleReport : props.openLogin}>
<span className="button-text">
- <ErrorIcon className="icon" />Reportar abuso ou erro
+ <ErrorIcon className="icon" /> Reportar abuso ou erro
</span>
</ButtonGrey>
)
:
(
- <ButtonGrey contrast={props.contrast}>
+ <ButtonGrey>
<span className="button-text-report">
- <ErrorIcon className="icon" />Você já reportou este recurso
+ <ErrorIcon className="icon" /> Você já reportou este recurso
</span>
</ButtonGrey>
)
@@ -68,28 +68,24 @@ function DownloadButton(props) {
return (
props.downloadableLink ?
(
- <ButtonOrange contrast={props.contrast} onClick={props.enableDownload}>
- <span>
- <GetAppIcon className="icon" />Baixar Recurso
- </span>
+ <ButtonOrange onClick={props.enableDownload}>
+ <span className="text">
+ <GetAppIcon className="icon" /> Baixar Recurso
+ </span>
</ButtonOrange>
)
:
props.link ?
(
- <ButtonOrange contrast={props.contrast} onClick={props.toggleRedirect}>
- <span >
- <CallMadeIcon className="icon" />Abrir Recurso
- </span>
+ <ButtonOrange onClick={props.toggleRedirect}>
+ <span className="text">
+ <CallMadeIcon className="icon" /> Abrir Recurso
+ </span>
</ButtonOrange>
)
:
(
- <ButtonOrange contrast={props.contrast}>
- <span>
- Erro
- </span>
- </ButtonOrange>
+ <React.Fragment />
)
)
}
@@ -154,29 +150,29 @@ export default function Footer(props) {
<Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
</Snackbar>
{/*-------------------------------MODALS---------------------------------------*/}
- <ReportModal contrast={props.contrast} open={reportOpen} handleClose={() => { toggleReport(false) }}
+ <ReportModal open={reportOpen} handleClose={() => { toggleReport(false) }}
form="recurso"
complainableId={props.recursoId}
complainableType={"LearningObject"}
/>
- <ShareModal contrast={props.contrast} open={shareOpen} handleClose={() => { toggleShare(false) }}
+ <ShareModal open={shareOpen} handleClose={() => { toggleShare(false) }}
thumb={props.thumb} title={props.title} link={props.currPageLink}
/>
- <GuardarModal contrast={props.contrast} open={saveToCol} handleClose={() => { toggleSave(false) }}
+ <GuardarModal open={saveToCol} handleClose={() => { toggleSave(false) }}
thumb={props.thumb} title={props.title} recursoId={props.recursoId}
/>
- <RedirectModal contrast={props.contrast} open={redirectOpen} handleClose={() => { toggleRedirect(false) }}
+ <RedirectModal open={redirectOpen} handleClose={() => { toggleRedirect(false) }}
link={props.link}
/>
- <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
/>
- <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
+ <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
{/*----------------------------------------------------------------------------*/}
{/*-----------------------------BUTTONS----------------------------------------*/}
- <OpcoesDiv contrast={props.contrast}>
+ <OpcoesDiv>
<StyledGrid container>
{
windowWidth > 990 ?
@@ -185,7 +181,6 @@ export default function Footer(props) {
{/*Botao Reportar*/}
<Grid item xs={3}>
<ReportButton
- contrast={props.contrast}
userLoggedIn={state.currentUser.id === '' ? false : true}
toggleReport={() => { toggleReport(true) }}
openLogin={handleLogin}
@@ -195,25 +190,24 @@ export default function Footer(props) {
{/*Botao Compartilhar*/}
<Grid item xs={3}>
- <ButtonGrey contrast={props.contrast} onClick={state.currentUser.id === '' ? () => handleLogin(true) : () => toggleShare(true)}>
+ <ButtonGrey onClick={state.currentUser.id === '' ? () => handleLogin(true) : () => toggleShare(true)}>
<span className="button-text">
- <ShareIcon className="icon" />Compartilhar
- </span>
+ <ShareIcon className="icon" /> Compartilhar
+ </span>
</ButtonGrey>
</Grid>
{/*Botao Guardar*/}
<Grid item xs={3}>
- <ButtonGrey contrast={props.contrast} onClick={state.currentUser.id === '' ? () => handleLogin(true) : () => toggleSave(true)}>
+ <ButtonGrey onClick={state.currentUser.id === '' ? () => handleLogin(true) : () => toggleSave(true)}>
<span className="button-text">
<FolderIcon className="icon" />Guardar
- </span>
+ </span>
</ButtonGrey>
</Grid>
<Grid item xs={3} style={{ justifyContent: "right !important" }}>
<DownloadButton
- contrast={props.contrast}
downloadableLink={props.downloadableLink}
link={props.link}
enableDownload={enableDownload}
@@ -227,16 +221,15 @@ export default function Footer(props) {
<React.Fragment>
{/*Botao Guardar*/}
<Grid item xs={4}>
- <ButtonGrey contrast={props.contrast} onClick={state.currentUser.id === '' ? () => handleLogin(true) : () => toggleSave(true)}>
+ <ButtonGrey onClick={state.currentUser.id === '' ? () => handleLogin(true) : () => toggleSave(true)}>
<span className="button-text">
<FolderIcon className="icon" />Guardar
- </span>
+ </span>
</ButtonGrey>
</Grid>
<Grid item xs={7}>
<DownloadButton
- contrast={props.contrast}
downloadableLink={props.downloadableLink}
link={props.link}
enableDownload={enableDownload}
@@ -245,7 +238,7 @@ export default function Footer(props) {
</Grid>
<Grid item xs={1}>
- <Button aria-haspopup="true" onClick={handleClick} style={props.contrast === "" ? { color: "#666" } : {color: "yellow"}}>
+ <Button aria-haspopup="true" onClick={handleClick} style={{ color: "#666" }}>
<MoreVertIcon />
</Button>
<Menu
@@ -254,24 +247,20 @@ export default function Footer(props) {
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
- MenuListProps={{
- disablePadding: true
- }}
>
- <MenuItem className={`${props.contrast}BackColor`}>
+ <MenuItem>
<ReportButton
- contrast={props.contrast}
userLoggedIn={state.currentUser.id === '' ? false : true}
toggleReport={() => { toggleReport(true) }}
openLogin={handleLogin}
complained={props.complained}
/>
</MenuItem>
- <MenuItem className={`${props.contrast}BackColor`}>
- <ButtonGrey contrast={props.contrast} onClick={state.currentUser.id === '' ? () => handleLogin(true) : () => toggleShare(true)}>
+ <MenuItem>
+ <ButtonGrey onClick={state.currentUser.id === '' ? () => handleLogin(true) : () => toggleShare(true)}>
<span className="button-text">
<ShareIcon className="icon" /> Compartilhar
- </span>
+ </span>
</ButtonGrey>
</MenuItem>
</Menu>
@@ -288,21 +277,20 @@ export default function Footer(props) {
}
const OpcoesDiv = styled.div`
- margin: 1em 0em;
display : flex;
align-items : center;
height : 65px;
- background-color: ${props => props.contrast === "" ? "white" : "black"};
+ background-color : #fafafa;
`
const StyledGrid = styled(Grid)`
@media screen and (min-width: 990px) {
- padding-left : 12px !important;
+ padding-left : 15px !important;
}
.MuiGrid-item {
- padding-right : 12px;
- padding-left : 12px;
+ padding-right : 15px;
+ padding-left : 15px;
display : flex;
justify-content : center;
}
@@ -310,16 +298,15 @@ const StyledGrid = styled(Grid)`
const ButtonGrey = styled(Button)`
&:hover {
- background-color: ${props => props.contrast === "" ? "rgba(158,158,158,0.2)" : "rgba(255,255,0,0.24)"} !important;
+ background-color : rgba(158,158,158,0.2) !important;
}
- background-color : ${props => props.contrast === "" ? "transparent" : "black"} !important;
- color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
+ background-color : transparent !important;
+ color : #666 !important;
+ text-decoration : none !important;
outline : none !important;
text-align : center !important;
.icon {
- color: ${props => props.contrast === "" ? "inherit" : "white"} !important;
vertical-align : middle !important;
font-weight : normal !important;
font-style : normal !important;
@@ -332,12 +319,14 @@ const ButtonGrey = styled(Button)`
word-wrap : normal !important;
direction : ltr !important;
padding-right : 2px;
+ color : inherit !important;
}
.button-text {
cursor : pointer;
line-height : 36px;
text-align : center;
+ color : currentColor;
white-space : nowrap;
text-transform : uppercase;
font-weight : 600;
@@ -360,22 +349,17 @@ const ButtonGrey = styled(Button)`
`
const ButtonOrange = styled(Button)`
- &:hover {
- background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
- }
box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
- background-color: ${props => props.contrast === "" ? "#ff7f00" : "black"} !important;
- color: ${props => props.contrast === "" ? "white" : "yellow"} !important;
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
- border: ${props => props.contrast === "" ? "0" : "1px solid white"} !important;
+ background-color : #ff7f00 !important;
+ color : #fff !important;
+ text-decoration : none !important;
text-transform : uppercase !important;
outline : none !important;
- /* max-height: 36px !important; */
text-align : center !important;
+ max-height : 36px;
margin-top : 5px !important;
.icon {
- color: white !important;
vertical-align : middle !important;
font-weight : normal !important;
font-style : normal !important;
@@ -391,7 +375,6 @@ const ButtonOrange = styled(Button)`
}
.text {
- color: ${props => props.contrast === "" ? "white" : "yellow"} !important;
font-size : 14px;
font-weight : 600;
}
diff --git a/src/Components/ResourcePageComponents/Sobre.js b/src/Components/ResourcePageComponents/Sobre.js
index 63f646ae..f1e20fa4 100644
--- a/src/Components/ResourcePageComponents/Sobre.js
+++ b/src/Components/ResourcePageComponents/Sobre.js
@@ -16,13 +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, { useContext, useState, useEffect } from 'react'
-import { Store } from '../../Store'
+import React, {useContext, useState, useEffect} from 'react'
+import {Store} from '../../Store'
import styled from 'styled-components'
import Grid from '@material-ui/core/Grid';
-import { Link } from 'react-router-dom'
-import { NoIcon } from '../ContactButtons/FollowButton.js'
-import { NoIconFollowing } from '../ContactButtons/FollowingButton.js'
+import {Link} from 'react-router-dom'
+import {NoIcon} from '../ContactButtons/FollowButton.js'
+import {NoIconFollowing} from '../ContactButtons/FollowingButton.js'
import Collapse from '@material-ui/core/Collapse';
import SdCardIcon from '@material-ui/icons/SdCard';
import TranslateIcon from '@material-ui/icons/Translate';
@@ -45,7 +45,7 @@ function Alert(props) {
return <MuiAlert elevation={6} variant="filled" {...props} />;
}
-function AdditionalInfoItem(props) {
+function AdditionalInfoItem (props) {
return (
<span className="meta-objeto">
{props.icon}
@@ -55,11 +55,11 @@ function AdditionalInfoItem(props) {
)
}
-export default function Sobre(props) {
- const { state } = useContext(Store)
+export default function Sobre (props) {
+ const {state} = useContext(Store)
const [collapsed, setCollapsed] = useState(false)
- const toggleCollapsed = () => { setCollapsed(!collapsed) };
+ const toggleCollapsed = () => {setCollapsed(!collapsed)};
const [loginOpen, setLogin] = useState(false)
const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
const [signUpOpen, setSignUp] = useState(false)
@@ -76,8 +76,8 @@ export default function Sobre(props) {
if (reason === 'clickaway') {
return;
}
-
- handleSuccessfulLogin(false);
+
+ handleSuccessfulLogin(false);
}
var moment = require('moment')
@@ -87,58 +87,58 @@ export default function Sobre(props) {
useEffect(() => {
let aux = []
- if (props.attachments && props.attachments[0]) {
+ if (props.attachments && props.attachments[0]){
aux.push(<AdditionalInfoItem
- icon={<SdCardIcon />}
+ icon={<SdCardIcon/>}
label={'Tamanho: '}
value={(props.attachments[0].size / 1000000).toFixed(2) + ' Mb'}
key={props.attachments[0].id}
- />)
+ />)
}
- if (props.language) {
- props.language.map((lang) =>
+ if(props.language){
+ props.language.map( (lang) =>
aux.push(<AdditionalInfoItem
- icon={<TranslateIcon />}
+ icon={<TranslateIcon/>}
label={'Idioma: '}
value={lang.name}
key={lang.id}
- />
- ))
+ />
+ ))
}
- if (props.mimeType) {
+ if (props.mimeType){
aux.push(<AdditionalInfoItem
- icon={<InsertDriveFileIcon />}
+ icon={<InsertDriveFileIcon/>}
label={'Formato: '}
value={props.mimeType}
key={props.mimeType}
- />)
+ />)
}
if (props.createdAt) {
aux.push(<AdditionalInfoItem
- icon={<DateRangeIcon />}
+ icon={<DateRangeIcon/>}
label={'Data de Envio: '}
value={moment(props.createdAt).format("DD/MM/YYYY")}
key={"dateCreatedAt"}
- />)
+ />)
}
if (props.updatedAt) {
aux.push(<AdditionalInfoItem
- icon={<UpdateIcon />}
+ icon={<UpdateIcon/>}
label={'Modificado em: '}
value={moment(props.createdAt).format("DD/MM/YYYY")}
key={"dateUpdatedAt"}
- />)
+ />)
}
if (props.license) {
aux.push(<AdditionalInfoItem
- icon={<AssignmentIcon />}
+ icon={<AssignmentIcon/>}
label={'Tipo de licença: '}
value={
<div className="license-link">
<a href={props.license.url}>
- <img src={License} alt="license" />
+ <img src={License} alt="license"/>
</a>
<p>
{props.license.name}
@@ -146,11 +146,11 @@ export default function Sobre(props) {
</div>
}
key={props.license.id}
- />)
+ />)
}
else {
aux.push(<AdditionalInfoItem
- icon={<AssignmentIcon />}
+ icon={<AssignmentIcon/>}
label={'Tipo de licença: '}
value={
<div className="license-link">
@@ -159,7 +159,7 @@ export default function Sobre(props) {
</p>
</div>
}
- key={"no-license"} />)
+ key={"no-license"}/>)
}
setAdditionalInfo(aux)
}, [])
@@ -167,7 +167,7 @@ export default function Sobre(props) {
let windowWidth = window.innerWidth
const [followed, setFollowed] = useState(props.followed)
- const toggleFollowed = () => { setFollowed(!followed) }
+ const toggleFollowed = () => {setFollowed(!followed)}
return (
<React.Fragment>
@@ -177,16 +177,16 @@ export default function Sobre(props) {
<Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
</Snackbar>
{/*-------------------------------MODALS---------------------------------------*/}
- <LoginModal contrast={state.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
/>
- <SignUpModal contrast={state.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
+ <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
{/*----------------------------------------------------------------------------*/}
- <Grid container style={{ paddingRight: "15px", paddingLeft: "15px" }}>
+ <Grid container style={{paddingRight : "15px", paddingLeft : "15px"}}>
- <Grid item xs={windowWidth > 990 ? 9 : 12} style={{ paddingRight: "15px" }}>
+ <Grid item xs={windowWidth > 990 ? 9 : 12} style={{paddingRight : "15px"}}>
<Collapse in={collapsed} collapsedHeight={338}>
- <SobreDiv contrast={state.contrast}>
+ <SobreDiv>
<div className="titulo">
Sobre o Recurso
</div>
@@ -195,7 +195,7 @@ export default function Sobre(props) {
<div className="tags-container">
{
props.tags &&
- props.tags.map((tag) =>
+ props.tags.map( (tag) =>
<span key={tag.name}>{tag.name}</span>
)
}
@@ -222,7 +222,7 @@ export default function Sobre(props) {
</Grid>
<Grid item xs={windowWidth > 990 ? 3 : 12}>
- <MetasObjeto contrast={state.contrast}>
+ <MetasObjeto>
<div className="enviado-por">
Enviado por:
</div>
@@ -230,54 +230,54 @@ export default function Sobre(props) {
<div className="foto-autor">
<Link to={"/usuario-publico/" + props.id}>
- <img src={props.avatar} alt="user avatar" />
+ <img src={props.avatar} alt="user avatar"/>
</Link>
</div>
<div className="nome-autor">
- <Link to={"/usuario-publico/" + props.id} style={{ textDecoration: "none" }}>
+ <Link to={"/usuario-publico/" + props.id} style={{textDecoration : "none"}}>
<span className="span-st">{props.publisher}</span>
</Link>
</div>
- <div style={{ paddingTop: "0.75em", display: "flex", justifyContent: "center" }}>
- {
- (props.id !== state.currentUser.id) &&
- followed ? (
- <>
- <NoIconFollowing contrast={state.contrast} followedID={props.id} toggleFollowed={toggleFollowed} />
- <ContactCardOptions contrast={state.contrast} followed={followed} followableID={props.id} toggleFollowed={toggleFollowed} />
- </>
- )
- :
- (
- <>
- <NoIcon contrast={state.contrast} followableID={props.id} toggleFollowed={toggleFollowed} />
- <ContactCardOptions contrast={state.contrast} followed={followed} followableID={props.id} toggleFollowed={toggleFollowed} />
- </>
- )
- }
+ <div style={{paddingTop : "0.75em", display : "flex", justifyContent : "center"}}>
+ {
+ (props.id !== state.currentUser.id) &&
+ followed ? (
+ <>
+ <NoIconFollowing followedID={props.id} toggleFollowed={toggleFollowed}/>
+ <ContactCardOptions followed={followed} followableID={props.id} toggleFollowed={toggleFollowed}/>
+ </>
+ )
+ :
+ (
+ <>
+ <NoIcon followableID={props.id} toggleFollowed={toggleFollowed}/>
+ <ContactCardOptions followed={followed} followableID={props.id} toggleFollowed={toggleFollowed}/>
+ </>
+ )
+ }
</div>
</MetasObjeto>
</Grid>
- <Grid item xs={12} style={{ paddingTop: "15px" }}>
- <CollapseControl onClick={() => { toggleCollapsed() }}>
+ <Grid item xs={12} style={{paddingTop : "15px"}}>
+ <CollapseControl onClick={() => {toggleCollapsed()}}>
{
collapsed ?
- (
+ (
<React.Fragment>
- <span style={state.contrast === "" ? { color: "#666" } : { color: "yellow", textDecoration: "underline" }}>VER MENOS</span>
- <ExpandLessIcon style={state.contrast === "" ? { color: "#666" } : { color: "white" }} />
+ <span>VER MENOS</span>
+ <ExpandLessIcon/>
</React.Fragment>
- )
- :
- (
+ )
+ :
+ (
<React.Fragment>
- <span style={state.contrast === "" ? { color: "#666" } : { color: "yellow", textDecoration: "underline" }}>VER MAIS</span>
- <ExpandMoreIcon style={state.contrast === "" ? { color: "#666" } : { color: "white" }} />
+ <span>VER MAIS</span>
+ <ExpandMoreIcon/>
</React.Fragment>
- )
+ )
}
</CollapseControl>
</Grid>
@@ -308,7 +308,6 @@ const CollapseControl = styled.div`
`
const SobreDiv = styled.div`
- background-color: ${props => props.contrast === "" ? "white" : "black"};
padding-left : 3% !important;
padding-top : 3% !important;
.titulo {
@@ -318,7 +317,7 @@ const SobreDiv = styled.div`
font-family : 'Roboto Light','Roboto Regular',Roboto;
font-weight : 300;
font-style : normal;
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color : #666;
font-size : 1.857em;
}
@@ -334,13 +333,12 @@ const SobreDiv = styled.div`
text-transform : capitalize;
display : inline-flex;
border-radius : 15px;
- background-color: ${props => props.contrast === "" ? "#e5e5e5" : "black"};
- border: ${props => props.contrast === "" ? "none" : "1px solid white"};
+ background-color : #e5e5e5;
margin-right : 3px;
padding : 3px 7px;
line-height : 18px;
margin-bottom : 3px;
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color : #666;
font-size : .8em
}
}
@@ -348,13 +346,11 @@ const SobreDiv = styled.div`
.conteudo {
font-size : 14px;
.descricao-objeto {
- color: ${props => props.contrast === "" ? "#666" : "white"};
text-align: justify;
margin-bottom: 20px;
margin-top: 20px;
}
.autoria {
- color: ${props => props.contrast === "" ? "#666" : "white"};
margin-bottom : 30px;
}
@@ -369,14 +365,12 @@ const SobreDiv = styled.div`
display: inline-block;
margin-bottom: 15px;
font-size : 14px;
- color: ${props => props.contrast === "" ? "#666" : "white !important"};
.MuiSvgIcon-root {
- vertical-align : middle;
+ vertical-align : middle
}
span {
- color: ${props => props.contrast === "" ? "#666" : "white"};
margin-left : 2%;
font-weight : 700;
}
@@ -386,8 +380,8 @@ const SobreDiv = styled.div`
display : inline-grid;
a {
- text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
- color: ${props => props.contrast === "" ? "initial" : "yellow"};
+ text-decoration : none !important;
+ color : initial;
img {
vertical-align : middle;
@@ -415,7 +409,6 @@ const MetasObjeto = styled.div`
justify-content : flex-start;
padding : 20px;
text-align : center;
- color: ${props => props.contrast === "" ? "#666" : "white"};
@media screen and (min-width : 990px) {
border-left : 1px solid #e5e5e5;
@@ -424,13 +417,12 @@ const MetasObjeto = styled.div`
.span-st {
position : relative;
font-size : 14px;
- color: ${props => props.contrast === "" ? "#666" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ color: #666;
}
.enviado-por {
font-size : 14px;
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color :#666;
font-weight : 500;
margin-bottom : 5px;
margin-top : 20px;
diff --git a/src/Components/ResourcePageComponents/TextoObjeto.js b/src/Components/ResourcePageComponents/TextoObjeto.js
index f40324cf..f19b82e1 100644
--- a/src/Components/ResourcePageComponents/TextoObjeto.js
+++ b/src/Components/ResourcePageComponents/TextoObjeto.js
@@ -102,7 +102,7 @@ export default function TextoObjeto (props) {
}
return (
- <TextoObjetoDiv contrast={props.contrast}>
+ <TextoObjetoDiv>
{ publisherDeletedObject &&
<Redirect
to={{
@@ -124,7 +124,6 @@ export default function TextoObjeto (props) {
{
props.stateRecurso !== "submitted" &&
<Firulas
- contrast={state.contrast}
rating={props.rating}
likesCount={props.likesCount}
liked={props.likedBool}
@@ -186,10 +185,10 @@ export default function TextoObjeto (props) {
{
(checkAccessLevel('publisher') || props.stateRecurso === "draft") &&
<Link to={"/editar-recurso/" + props.recursoId}>
- <Button className={`${props.contrast}LinkColor`} style={{color : "#666"}}><EditIcon/></Button>
+ <Button style={{color : "#666"}}><EditIcon/></Button>
</Link>
}
- <Button className={`${props.contrast}LinkColor`} style={{color : "#666"}} onClick={() => {handleDelete()}}><DeleteForeverIcon/></Button>
+ <Button style={{color : "#666"}} onClick={() => {handleDelete()}}><DeleteForeverIcon/></Button>
</React.Fragment>
}
@@ -200,7 +199,6 @@ export default function TextoObjeto (props) {
}
const TextoObjetoDiv = styled.div`
- background-color: ${props => props.contrast === "" ? "white" : "black"};
padding : 20px 20px 0 20px;
display : flex;
flex-direction : column;
@@ -210,7 +208,6 @@ const TextoObjetoDiv = styled.div`
align-items : flex-start;
h3 {
- color: ${props => props.contrast === "" ? "#666" : "white"};
font-size : 26px;
font-weight : 400;
margin : 0;
@@ -218,7 +215,6 @@ const TextoObjetoDiv = styled.div`
}
.info-recurso {
- color: ${props => props.contrast === "" ? "#666" : "white"};
display : inline-block;
width : 100%;
font-size : 15px;
@@ -227,35 +223,33 @@ const TextoObjetoDiv = styled.div`
}
.info-cabecalho-recurso {
- color: ${props => props.contrast === "" ? "#666" : "white"};
font-size : 15px;
}
.dado-recurso {
- color: ${props => props.contrast === "" ? "#666" : "white"};
font-size : 15px;
font-weight : 600;
}
.views-downloads {
- color: ${props => props.contrast === "" ? "#666" : "white"};
font-size : 15px;
font-weight : lighter;
margin-bottom : 12px;
}
.icon {
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color : #666;
vertical-align : middle;
margin-right : 2px;
}
.alert-warning {
- color: ${props => props.contrast === "" ? "#8a6d3b" : "white"};
- background-color : ${props => props.contrast === "" ? "#fcf8e3" : "black"};
- border: 1px solid ${props => props.contrast === "" ? "#faebcc" : "white"};
+ color : #8a6d3b;
+ background-color : #fcf8e3;
+ border-color : #faebcc;
padding: 15px;
margin-bottom: 20px;
+ border: 1px solid transparent;
border-radius: 4px;
font-size : 14px;
}
@@ -268,7 +262,7 @@ const TextoObjetoDiv = styled.div`
height : 32px;
width : 100%;
margin : 10px 0 8px 0;
- background-color: ${props => props.contrast === "" ? "#e5e5e5" : "black"};
+ background-color : #e5e5e5;
}
.audio {
diff --git a/src/Components/ResourcePageComponents/VideoPlayer.js b/src/Components/ResourcePageComponents/VideoPlayer.js
index 6b5a9822..57b1b06c 100644
--- a/src/Components/ResourcePageComponents/VideoPlayer.js
+++ b/src/Components/ResourcePageComponents/VideoPlayer.js
@@ -37,6 +37,7 @@ function GetEmbeddedLink(link) {
}
else if (link.indexOf("vimeo") !== -1) { //if the 13th character = o (vimeo videos)
link_id = link.split("?")[0].split("/")
+ console.log(link_id) //key # = from 19th character on
embed = "https://player.vimeo.com/video/" + link_id.pop(); //Add vimeo link before key #
}
return embed
@@ -68,7 +69,7 @@ export default function VideoPlayer(props) {
</video>
</VideoContainer>
:
- <ErrorParagraph contrast={props.contrast}>
+ <ErrorParagraph>
Seu navegador não permite a exibição deste vÃdeo. É necessário baixar o vÃdeo para poder visualizá-lo.
</ErrorParagraph>
)
@@ -94,5 +95,4 @@ const VideoContainer = styled.div`
const ErrorParagraph = styled.p`
text-align: center;
- color: ${props => props.contrast === "" ? "#666" : "white"};
`
diff --git a/src/Components/SearchBar.js b/src/Components/SearchBar.js
index aa074394..8e0ea969 100644
--- a/src/Components/SearchBar.js
+++ b/src/Components/SearchBar.js
@@ -26,18 +26,18 @@ import styled from 'styled-components'
import { Store } from '../Store';
import { v4 as uuidv4 } from 'uuid'
import Grid from "@material-ui/core/Grid"
-import {useStyles} from './ReportUserForm.js'
+
const dividerStyled = {
- background: '#e0e0e0',
- width: '1px',
- content: "",
- display: 'block',
- top: '0',
- bottom: '0',
- right: '0',
- minHeight: '70px',
- margin: '0 20px'
+ background: '#e0e0e0',
+ width: '1px',
+ content: "",
+ display: 'block',
+ top: '0',
+ bottom: '0',
+ right: '0',
+ minHeight: '70px',
+ margin: '0 20px'
}
const DividerVertical = () => <em style={dividerStyled}></em>
@@ -46,212 +46,178 @@ const ButtonStyled = styled(Button)`
text-transform: capitalize !important;
`
const IconSearchStyled = styled(IconSearch)`
- color: ${props => props.contrast === "" ? "#16b8dd" : "yellow"};
+ color: #16b8dd;
`
const TextFieldStyled = styled(TextField)`
- flex-grow: 2;
- margin: 0 2vw !important;
-
- .MuiOutlinedInput-root {
- &.Mui-focused fieldset {
- border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- }
- fieldset {
- border-color: ${props => props.contrast === "" ? "#666" : "white"};
- }
- }
-
- label{
- color: ${props => props.contrast === "" ? "#666" : "white"};
- }
-
- label.Mui-focused {
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- }
-
- label.Mui-focused.Mui-error {
- color : red;
- }
-`
-
-const FormLearnObjControlLabelStyled = styled(FormControlLabel)`
- *{
- text-transform: uppercase;
- color: ${props => props.contrast === "" ? "#ff8a17 !important" : "yellow !important"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- font-weight: bolder;
- }
+ flex-grow: 2;
+ margin: 0 2vw !important;
`
-const FormCollectionControlLabelStyled = styled(FormControlLabel)`
- *{
- text-transform: uppercase;
- color: ${props => props.contrast === "" ? "#673ab7 !important" : "yellow !important"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- font-weight: bolder;
- }
+/*
+const RadioGroupStyled = styled(RadioGroup)`
+ display: flex;
+ flex-direction: row;
+ flex-grow: 1;
`
+*/
-const FormUserControlLabelStyled = styled(FormControlLabel)`
- *{
- text-transform: uppercase;
- color: ${props => props.contrast === "" ? "#00bcd4 !important" : "yellow !important"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- font-weight: bolder;
- }
+const FormControlLabelStyled = styled(FormControlLabel)`
+ *{
+ text-transform: uppercase;
+ color: #ff8a17 !important;
+ fontWeight: bolder;
+ }
`
-const RadioLearnObjStyled = styled(Radio)`
- color: #ff8a17;
-`
-const RadioCollectionStyled = styled(Radio)`
- color: #673ab7;
-`
-const RadioUserStyled = styled(Radio)`
- color: #00bcd4;
+const RadioStyled = styled(Radio)`
+ color: #ff8a17;
`
const SelectStyled = styled(Select)`
- margin-right: 2vw;
- *{
- text-transform: uppercase;
- color: ${props => props.contrast === "" ? "#ff8a17 !important" : "yellow !important"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- font-weight: bolder;
- }
+ margin-right: 2vw;
+ *{
+ text-transform: uppercase;
+ color: #ff8a17 !important;
+ fontWeight: bolder;
+ }
`
const MenuItemStyled = styled(MenuItem)`
text-transform: uppercase;
- font-weight: bolder;
+ fontWeight: bolder;
`
-export default function SearchBar(props) {
- const [query, setQuery] = useState('')
-
- const classes = useStyles();
+/*const Bar = styled.div`
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ border-top: 1px rgba(0,0,0,.1) solid;
+`
+const Flex = styled.span`
+ display: flex;
+ align-items: center;
+ color: #787380;
+`*/
- const [searchClass, setSearchClass] = useState('LearningObject')
+export default function SearchBar(props) {
+ const [query, setQuery] = useState('')
+ const [searchClass, setSearchClass] = useState('LearningObject')
+
+ const { state, dispatch } = useContext(Store)
+
+ const [goSearch, setGoSearch] = useState(false)
+
+ useEffect(() => {
+ if (window.location.pathname.includes('busca')) {
+ const urlParams = new URLSearchParams(window.location.search)
+ const urlQuery = urlParams.get('query')
+ const urlSearchClass = urlParams.get('search_class')
+ if (searchClass !== urlSearchClass || query !== urlQuery) {
+ setQuery(urlQuery)
+ setSearchClass(urlSearchClass)
+ }
+ }
+ }, [])
- const { state, dispatch } = useContext(Store)
+ useEffect(() => setGoSearch(false), [goSearch])
- const [goSearch, setGoSearch] = useState(false)
+ const handleChange = (event) => {
+ setQuery(event.target.value)
+ }
- useEffect(() => {
- if (window.location.pathname.includes('busca')) {
- const urlParams = new URLSearchParams(window.location.search)
- const urlQuery = urlParams.get('query')
- const urlSearchClass = urlParams.get('search_class')
- if (searchClass !== urlSearchClass || query !== urlQuery) {
- setQuery(urlQuery)
- setSearchClass(urlSearchClass)
- }
+ const handleKeyDown = (event) => {
+ if (event.key === 'Enter' || event.type === 'click') {
+ dispatch({
+ type: 'SAVE_SEARCH',
+ newSearch: {
+ query: query !== '' ? query : '*',
+ class: searchClass
}
- }, [])
-
- useEffect(() => setGoSearch(false), [goSearch])
-
- const handleChange = (event) => {
- setQuery(event.target.value)
+ })
+ setGoSearch(true)
}
+ }
- const handleKeyDown = (event) => {
- if (event.key === 'Enter' || event.type === 'click') {
- dispatch({
- type: 'SAVE_SEARCH',
- newSearch: {
- query: query !== '' ? query : '*',
- class: searchClass
- }
- })
- setGoSearch(true)
- }
+ const linkTarget = {
+ pathname: `/busca?page=0&results_per_page=12&order=review_average&query=${state.search.query}&search_class=${state.search.class}`,
+ key: uuidv4(), // we could use Math.random, but that's not guaranteed unique.
+ state: {
+ applied: true
}
-
- const linkTarget = {
- pathname: `/busca?page=0&results_per_page=12&order=review_average&query=${state.search.query}&search_class=${state.search.class}`,
- key: uuidv4(), // we could use Math.random, but that's not guaranteed unique.
- state: {
- applied: true
- }
- };
-
- return (
- <Grid container style={state.contrast === "" ? { paddingTop: "1em" } : { backgroundColor: "black", paddingTop: "1em" }}>
- <Grid container item xs={12} sm={6} md={6} lg={6} xl={6}>
- {goSearch && <Redirect to={`/busca?page=0&results_per_page=12&order=review_average&query=${state.search.query}&search_class=${state.search.class}`} />}
- <TextFieldStyled
- contrast={state.contrast}
- id="standard-search"
- label="O que você está buscando?"
- type="search"
- margin="normal"
- variant="outlined"
- value={query}
- InputProps={state.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
- onChange={handleChange}
- onKeyPress={handleKeyDown}
- />
- </Grid>
- <Grid container item justify="center" alignItems="center" xs={12} sm={6} md={6} lg={6} xl={6}>
- {state.windowSize.width >= 960 ?
- <React.Fragment>
- <Grid container item justify="center" alignItems="center" xs={12} sm={1} md={1} lg={1} xl={1}>
- <Link
- to={linkTarget}
- >
- <ButtonStyled title="Pesquisar" onClick={handleKeyDown} ><IconSearchStyled contrast={state.contrast} /></ButtonStyled>
- </Link>
- </Grid>
- <Grid container item justify="center" alignItems="center" xs={12} sm={3} md={3} lg={3} xl={3}>
- <span style={state.contrast === "" ? {} : { color: "white" }}>Pressione "Enter" ou click na lupa</span>
- </Grid>
- <Grid container item justify="center" alignItems="center" xs={12} sm={1} md={1} lg={1} xl={1}>
- <DividerVertical />
- </Grid>
- <Grid container item justify="center" alignItems="center" xs={12} sm={7} md={7} lg={7} xl={7}>
- <RadioGroup row={true}
- aria-label="Tipo"
- name="types" value={searchClass}
- onChange={
- (event) => setSearchClass(event.target.value)
- }
- justify="center" alignItems="center"
- >
- <FormLearnObjControlLabelStyled contrast={state.contrast} value="LearningObject" control={<RadioLearnObjStyled contrast={state.contrast} />} label="Recursos" />
- <FormCollectionControlLabelStyled contrast={state.contrast} value="Collection" control={<RadioCollectionStyled contrast={state.contrast} />} label="Coleções" />
- <FormUserControlLabelStyled contrast={state.contrast} value="User" control={<RadioUserStyled contrast={state.contrast} />} label="Usuários" />
- </RadioGroup>
- </Grid>
- </React.Fragment>
- :
- <React.Fragment>
- <Grid container item justify="center" alignItems="center" xs={5} sm={5} md={5} lg={5} xl={5}>
- <FormControl>
- <SelectStyled
- contrast={state.contrast}
- value={searchClass}
- onChange={(event) => setSearchClass(event.target.value)}
- >
- <MenuItemStyled style={state.contrast === "" ? { color: "#ff7f00" } : { color: "yellow", backgroundColor: "black", textDecoration: "underline" }} value="LearningObject" aria-label="Recursos">Recursos</MenuItemStyled>
- <MenuItemStyled style={state.contrast === "" ? { color: "#673ab7" } : { color: "yellow", backgroundColor: "black", textDecoration: "underline" }} value="Collection" aria-label="Coleções">Coleções</MenuItemStyled>
- <MenuItemStyled style={state.contrast === "" ? { color: "#00bcd4" } : { color: "yellow", backgroundColor: "black", textDecoration: "underline" }} value="User" aria-label="Usuários">Usuários</MenuItemStyled>
- </SelectStyled>
- </FormControl>
- </Grid>
- <Grid container item justify="center" alignItems="center" xs={2} sm={2} md={2} lg={2} xl={2}>
- <DividerVertical />
- </Grid>
- <Grid container item justify="center" alignItems="center" xs={5} sm={5} md={5} lg={5} xl={5}>
- <Link
- to={linkTarget}
- >
- <ButtonStyled title="Pesquisar" onClick={handleKeyDown} ><IconSearchStyled contrast={state.contrast} /></ButtonStyled>
- </Link>
- </Grid>
- </React.Fragment>
- }
- </Grid>
- </Grid >
- )
+ };
+
+ return (
+ <Grid container>
+ <Grid container item xs={12} sm={6} md={6} lg={6} xl={6}>
+ {goSearch && <Redirect to={`/busca?page=0&results_per_page=12&order=review_average&query=${state.search.query}&search_class=${state.search.class}`} />}
+ <TextFieldStyled
+ id="standard-search"
+ label="O que você está buscando"
+ type="search"
+ margin="normal"
+ value={query}
+ onChange={handleChange}
+ onKeyPress={handleKeyDown}
+ />
+ </Grid>
+ <Grid container item justify="center" alignItems="center" xs={12} sm={6} md={6} lg={6} xl={6}>
+ {state.windowSize.width >= 960 ?
+ <React.Fragment>
+ <Grid container item justify="center" alignItems="center" xs={12} sm={1} md={1} lg={1} xl={1}>
+ <Link
+ to={linkTarget}
+ >
+ <ButtonStyled onClick={handleKeyDown} ><IconSearchStyled /></ButtonStyled>
+ </Link>
+ </Grid>
+ <Grid container item justify="center" alignItems="center" xs={12} sm={3} md={3} lg={3} xl={3}>
+ <span>Pressione "Enter" ou click na lupa</span>
+ </Grid>
+ <Grid container item justify="center" alignItems="center" xs={12} sm={1} md={1} lg={1} xl={1}>
+ <DividerVertical />
+ </Grid>
+ <Grid container item justify="center" alignItems="center" xs={12} sm={7} md={7} lg={7} xl={7}>
+ <RadioGroup row={true}
+ aria-label="Tipo"
+ name="types" value={searchClass}
+ onChange={
+ (event) => setSearchClass(event.target.value)
+ }
+ justify="center" alignItems="center"
+ >
+ <FormControlLabelStyled value="LearningObject" control={<RadioStyled />} label="Recursos" />
+ <FormControlLabelStyled value="Collection" control={<RadioStyled />} label="Coleções" />
+ <FormControlLabelStyled value="User" control={<RadioStyled />} label="Usuários" />
+ </RadioGroup>
+ </Grid>
+ </React.Fragment>
+ :
+ <React.Fragment>
+ <Grid container item justify="center" alignItems="center" xs={5} sm={5} md={5} lg={5} xl={5}>
+ <FormControl>
+ <SelectStyled
+ value={searchClass}
+ onChange={(event) => setSearchClass(event.target.value)}
+ >
+ <MenuItemStyled style={{color : "#ff7f00"}} value="LearningObject" aria-label="Recursos">Recursos</MenuItemStyled>
+ <MenuItemStyled style={{color : "#673ab7"}} value="Collection" aria-label="Coleções">Coleções</MenuItemStyled>
+ <MenuItemStyled style={{color : "#00bcd4"}} value="User" aria-label="Usuários">Usuários</MenuItemStyled>
+ </SelectStyled>
+ </FormControl>
+ </Grid>
+ <Grid container item justify="center" alignItems="center" xs={2} sm={2} md={2} lg={2} xl={2}>
+ <DividerVertical />
+ </Grid>
+ <Grid container item justify="center" alignItems="center" xs={5} sm={5} md={5} lg={5} xl={5}>
+ <Link
+ to={linkTarget}
+ >
+ <ButtonStyled onClick={handleKeyDown} ><IconSearchStyled /></ButtonStyled>
+ </Link>
+ </Grid>
+ </React.Fragment>
+ }
+ </Grid>
+ </Grid>
+ )
}
\ No newline at end of file
diff --git a/src/Components/SearchExpansionPanel/SearchEPCompCurriculum.js b/src/Components/SearchExpansionPanel/SearchEPCompCurriculum.js
index ed4a026e..43941d03 100644
--- a/src/Components/SearchExpansionPanel/SearchEPCompCurriculum.js
+++ b/src/Components/SearchExpansionPanel/SearchEPCompCurriculum.js
@@ -1,34 +1,26 @@
import React from "react";
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from "@material-ui/core/styles";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
+import ListItemText from "@material-ui/core/ListItemText";
import Checkbox from "@material-ui/core/Checkbox";
-import { yellow, orange } from "@material-ui/core/colors";
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import FormGroup from '@material-ui/core/FormGroup';
+import IconButton from "@material-ui/core/IconButton";
-const OrangeCheckBox = withStyles({
+const useStyles = makeStyles(theme => ({
root: {
- color: orange[400],
- '&$checked': {
- color: orange[600],
- },
- },
- checked: {},
-})((props) => <Checkbox color="default" {...props} />);
+ width: "100%",
+ maxWidth: 360,
+ backgroundColor: theme.palette.background.paper,
+ color: "#666"
+ }
+}));
-const ContrastCheckBox = withStyles({
- root: {
- color: yellow[400],
- '&$checked': {
- color: yellow[600],
- },
- },
- checked: {},
-})((props) => <Checkbox color="default" {...props} />);
-
-export default function SearchEPCompCurriculum({ curriculumComponents, setCurriculum, contrast }) {
+export default function SearchEPCompCurriculum({ onChange, curriculumComponents, setCurriculum }) {
+ const classes = useStyles();
- const handleChange = (event) => {
- const index = event.target.name;
+ const handleToggle = (index) => () => {
const newCurriculumComponents = [...curriculumComponents];
newCurriculumComponents[index].isChecked = !newCurriculumComponents[index].isChecked
setCurriculum(newCurriculumComponents);
@@ -36,17 +28,34 @@ export default function SearchEPCompCurriculum({ curriculumComponents, setCurric
if (curriculumComponents)
return (
- <FormGroup row>
- {
- curriculumComponents.map((item, index) => {
- return <FormControlLabel
- name={index}
+ <List className={classes.root}>
+ {curriculumComponents.map((item, index) => {
+ const labelId = `checkbox-list-label-${item.value}`;
+
+ return (
+ <ListItem
key={item.exemplo}
- control={contrast === "" ? <OrangeCheckBox checked={item.isChecked} onChange={handleChange} /> : <ContrastCheckBox checked={item.isChecked} onChange={handleChange} />}
- label={<span style={contrast === "" ? {} : { color: "yellow", textDecoration: "underline" }}>{item.exemplo}</span>}
- />
- })
- }
- </FormGroup>
- )
+ role={undefined}
+ dense
+ button
+ onClick={handleToggle(index)}
+ >
+ <ListItemIcon>
+ <Checkbox
+ edge="start"
+ checked={item.isChecked}
+ tabIndex={-1}
+ disableRipple
+ inputProps={{ "aria-labelledby": labelId }}
+ />
+ </ListItemIcon>
+ <ListItemText id={labelId} primary={item.exemplo} />
+ <ListItemSecondaryAction>
+ <IconButton edge="end" aria-label="comments"></IconButton>
+ </ListItemSecondaryAction>
+ </ListItem>
+ );
+ })}
+ </List>
+ );
}
diff --git a/src/Components/SearchExpansionPanel/SearchEPIdiomas.js b/src/Components/SearchExpansionPanel/SearchEPIdiomas.js
index fcb1c65c..06715e46 100644
--- a/src/Components/SearchExpansionPanel/SearchEPIdiomas.js
+++ b/src/Components/SearchExpansionPanel/SearchEPIdiomas.js
@@ -1,52 +1,61 @@
import React from "react";
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from "@material-ui/core/styles";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
+import ListItemText from "@material-ui/core/ListItemText";
import Checkbox from "@material-ui/core/Checkbox";
-import { yellow, orange } from "@material-ui/core/colors";
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import FormGroup from '@material-ui/core/FormGroup';
+import IconButton from "@material-ui/core/IconButton";
-const OrangeCheckBox = withStyles({
+const useStyles = makeStyles(theme => ({
root: {
- color: orange[400],
- '&$checked': {
- color: orange[600],
- },
- },
- checked: {},
-})((props) => <Checkbox color="default" {...props} />);
+ width: "100%",
+ maxWidth: 360,
+ backgroundColor: theme.palette.background.paper,
+ color: "#666"
+ }
+}));
-const ContrastCheckBox = withStyles({
- root: {
- color: yellow[400],
- '&$checked': {
- color: yellow[600],
- },
- },
- checked: {},
-})((props) => <Checkbox color="default" {...props} />);
-
-export default function SearchEPCompCurriculum({ languages, setLanguages, contrast }) {
+export default function SearchEPIdiomas({ languages, setLanguages }) {
+ const classes = useStyles();
- const handleChange = (event) => {
- const index = event.target.name;
- const newCurriculumComponents = [...languages];
- newCurriculumComponents[index].isChecked = !newCurriculumComponents[index].isChecked
- setLanguages(newCurriculumComponents);
+ const handleToggle = (index) => () => {
+ const newLanguages = [...languages];
+ newLanguages[index].isChecked = !newLanguages[index].isChecked
+ setLanguages(newLanguages);
};
if (languages)
return (
- <FormGroup row>
- {
- languages.map((item, index) => {
- return <FormControlLabel
- name={index}
+ <List className={classes.root}>
+ {languages.map((item, index) => {
+ const labelId = `checkbox-list-label-${item.value}`;
+
+ return (
+ <ListItem
key={item.exemplo}
- control={contrast === "" ? <OrangeCheckBox checked={item.isChecked} onChange={handleChange} /> : <ContrastCheckBox checked={item.isChecked} onChange={handleChange} />}
- label={<span style={contrast === "" ? {} : { color: "yellow", textDecoration: "underline" }}>{item.exemplo}</span>}
- />
- })
- }
- </FormGroup>
- )
+ role={undefined}
+ dense
+ button
+ onClick={handleToggle(index)}
+ >
+ <ListItemIcon>
+ <Checkbox
+ edge="start"
+ checked={item.isChecked}
+ tabIndex={-1}
+ disableRipple
+ inputProps={{ "aria-labelledby": labelId }}
+ />
+ </ListItemIcon>
+ <ListItemText id={labelId} primary={item.exemplo} />
+ <ListItemSecondaryAction>
+ <IconButton edge="end" aria-label="comments"></IconButton>
+ </ListItemSecondaryAction>
+ </ListItem>
+ );
+ })}
+ </List>
+ );
}
diff --git a/src/Components/SearchExpansionPanel/SearchEPTiposRec.js b/src/Components/SearchExpansionPanel/SearchEPTiposRec.js
index 9aedc9a5..41b77adf 100644
--- a/src/Components/SearchExpansionPanel/SearchEPTiposRec.js
+++ b/src/Components/SearchExpansionPanel/SearchEPTiposRec.js
@@ -1,52 +1,61 @@
import React from "react";
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from "@material-ui/core/styles";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
+import ListItemText from "@material-ui/core/ListItemText";
import Checkbox from "@material-ui/core/Checkbox";
-import { yellow, orange } from "@material-ui/core/colors";
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import FormGroup from '@material-ui/core/FormGroup';
+import IconButton from "@material-ui/core/IconButton";
-const OrangeCheckBox = withStyles({
+const useStyles = makeStyles(theme => ({
root: {
- color: orange[400],
- '&$checked': {
- color: orange[600],
- },
- },
- checked: {},
-})((props) => <Checkbox color="default" {...props} />);
+ width: "100%",
+ maxWidth: 360,
+ backgroundColor: theme.palette.background.paper,
+ color: "#666"
+ }
+}));
-const ContrastCheckBox = withStyles({
- root: {
- color: yellow[400],
- '&$checked': {
- color: yellow[600],
- },
- },
- checked: {},
-})((props) => <Checkbox color="default" {...props} />);
-
-export default function SearchEPCompCurriculum({ typeOfResources, setTypeRes, contrast }) {
+export default function SearchEPCompCurriculum({ onChange, typeOfResources, setTypeRes }) {
+ const classes = useStyles();
- const handleChange = (event) => {
- const index = event.target.name;
- const newCurriculumComponents = [...typeOfResources];
- newCurriculumComponents[index].isChecked = !newCurriculumComponents[index].isChecked
- setTypeRes(newCurriculumComponents);
+ const handleToggle = (index) => () => {
+ const newTypeOfRes = [...typeOfResources];
+ newTypeOfRes[index].isChecked = !newTypeOfRes[index].isChecked
+ setTypeRes(newTypeOfRes);
};
if (typeOfResources)
return (
- <FormGroup row>
- {
- typeOfResources.map((item, index) => {
- return <FormControlLabel
- name={index}
+ <List className={classes.root}>
+ {typeOfResources.map((item, index) => {
+ const labelId = `checkbox-list-label-${item.value}`;
+
+ return (
+ <ListItem
key={item.exemplo}
- control={contrast === "" ? <OrangeCheckBox checked={item.isChecked} onChange={handleChange} /> : <ContrastCheckBox checked={item.isChecked} onChange={handleChange} />}
- label={<span style={contrast === "" ? {} : { color: "yellow", textDecoration: "underline" }}>{item.exemplo}</span>}
- />
- })
- }
- </FormGroup>
- )
+ role={undefined}
+ dense
+ button
+ onClick={handleToggle(index)}
+ >
+ <ListItemIcon>
+ <Checkbox
+ edge="start"
+ checked={item.isChecked}
+ tabIndex={-1}
+ disableRipple
+ inputProps={{ "aria-labelledby": labelId }}
+ />
+ </ListItemIcon>
+ <ListItemText id={labelId} primary={item.exemplo} />
+ <ListItemSecondaryAction>
+ <IconButton edge="end" aria-label="comments"></IconButton>
+ </ListItemSecondaryAction>
+ </ListItem>
+ );
+ })}
+ </List>
+ );
}
diff --git a/src/Components/SearchExpansionPanel/SearchExpansionPanel.js b/src/Components/SearchExpansionPanel/SearchExpansionPanel.js
index e36e564b..8df336aa 100644
--- a/src/Components/SearchExpansionPanel/SearchExpansionPanel.js
+++ b/src/Components/SearchExpansionPanel/SearchExpansionPanel.js
@@ -9,223 +9,236 @@ import SearchEPCompCurriculum from "./SearchEPCompCurriculum";
import SearchEPTiposRec from "./SearchEPTiposRec";
import SearchEPEtapasEns from "./SesrchEPEtapasEns";
import SearchEPIdiomas from "./SearchEPIdiomas";
+import { TextField } from "@material-ui/core";
+import Grid from '@material-ui/core/Grid';
+import CircularProgress from '@material-ui/core/CircularProgress';
import Paper from '@material-ui/core/Paper';
import styled from 'styled-components';
import './ExpansionPanel.css'
-import FormInput from "../FormInput";
const ExpansionPanel = withStyles({
- root: {
- border: "1px solid rgba(0, 0, 0, .125)",
- boxShadow: "none",
- '.MuiButtonBase-root': {
- paddingInline: "0 !important"
- },
- "&:not(:last-child)": {
- borderBottom: 0
- },
- "&:before": {
- display: "none"
- },
- "&$expanded": {
- margin: "auto"
- }
+ root: {
+ border: "1px solid rgba(0, 0, 0, .125)",
+ boxShadow: "none",
+ '.MuiButtonBase-root': {
+ paddingInline: "0 !important"
},
- expanded: {}
+ "&:not(:last-child)": {
+ borderBottom: 0
+ },
+ "&:before": {
+ display: "none"
+ },
+ "&$expanded": {
+ margin: "auto"
+ }
+ },
+ expanded: {}
})(MuiExpansionPanel);
const ExpansionPanelSummary = withStyles({
- root: {
- color: "#666",
- marginBottom: -1,
- minHeight: 56,
- backgroundColor: "#fff",
+ root: {
+ color: "#666",
+ marginBottom: -1,
+ minHeight: 56,
+ backgroundColor: "#fff",
- "&$expanded": {
- minHeight: 56,
- backgroundColor: "#fff"
- }
- },
- content: {
- "&$expanded": {
- margin: "12px 0"
- }
- },
- expanded: {}
+ "&$expanded": {
+ minHeight: 56,
+ backgroundColor: "#fff"
+ }
+ },
+ content: {
+ "&$expanded": {
+ margin: "12px 0"
+ }
+ },
+ expanded: {}
})(MuiExpansionPanelSummary);
+const TesteTypography = withStyles({
+ root: {
+ fontSize: "17px"
+ }
+})(Typography);
const ExpansionPanelDetails = withStyles(theme => ({
- root: {
- // padding: theme.spacing(2)
- }
+ root: {
+ // padding: theme.spacing(2)
+ }
}))(MuiExpansionPanelDetails);
export default function SearchExpansionPanel(props) {
- const [keyWords, setKeyWords] = useState("");
- const [errorInKeyWord, setErrorInKeyWord] = useState({
- message: "",
- state: false
- })
-
- const onKeyPressed = (e) => {
- if (e.key === "Enter") {
- if (keyWords.length === 0) {
- setErrorInKeyWord({
- state: true,
- message: "Preencha o campo"
- })
- }
- else
- props.setTag(keyWords)
- }
- }
-
- const HandleChangeText = (e) => {
- if (errorInKeyWord.state)
- setErrorInKeyWord({
- state: false,
- message: ""
- })
- setKeyWords(e.target.value);
+ const [keyWords, setKeyWords] = useState("");
+ const [errorInKeyWord, setErrorInKeyWord] = useState({
+ message: "",
+ state: false
+ })
+
+ const onKeyPressed = (e) => {
+ if (e.key === "Enter") {
+ if (keyWords.length === 0) {
+ setErrorInKeyWord({
+ state: true,
+ message: "Preencha o campo"
+ })
+ }
+ else
+ props.setTag(keyWords)
}
-
- return (
- <MainPaper square elevation={4} contrast={props.contrast}>
- <link
- href="https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap"
- rel="stylesheet"
+ }
+
+ const HandleChangeText = (e) => {
+ if (errorInKeyWord.state)
+ setErrorInKeyWord({
+ state: false,
+ message: ""
+ })
+ setKeyWords(e.target.value);
+ }
+
+ return (
+ <MainPaper square elevation={4}>
+ <link
+ href="https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap"
+ rel="stylesheet"
+ />
+
+ <ExpansionPanel square>
+ <ExpansionPanelSummary
+ aria-controls="panel1d-content"
+ id="panel1d-header"
+ >
+ <Grid
+ container
+ direction="row"
+ justify="space-between"
+ >
+ <Grid item >
+ <Typography
+ style={{
+ fontSize: "18px",
+ textTransform: "uppercase",
+ fontWeight: "500",
+ }}
+ >
+ Filtros
+ </Typography>
+ </Grid>
+ <Grid item>
+ {
+ props.onFiltering ? <CircularProgress size={24} color="secondary" /> : null
+ }
+ </Grid>
+ </Grid>
+ </ExpansionPanelSummary>
+ </ExpansionPanel>
+
+ <ExpansionPanel square>
+ <ExpansionPanelSummary
+ expandIcon={<ExpandMoreIcon />}
+
+ aria-controls="panel2d-content"
+ id="panel2d-header"
+ >
+ <TesteTypography>Componentes Curriculares</TesteTypography>
+ </ExpansionPanelSummary>
+ <ExpansionPanelDetails>
+ <div>
+ <SearchEPCompCurriculum
+ onChange={props.onChange}
+ curriculumComponents={props.curriculumComponents}
+ setCurriculum={props.setCurriculum}
/>
- <ExpansionPanel square>
- <ExpansionPanelSummary
- aria-controls="panel1d-content"
- id="panel1d-header"
- style={props.contrast === "" ? {} : { backgroundColor: "black" }}
- >
- <Typography
- style={props.contrast === "" ? {
- fontSize: "18px",
- textTransform: "uppercase",
- fontWeight: "500",
- } : {
- fontSize: "18px",
- textTransform: "uppercase",
- fontWeight: "500",
- color: "white"
- }}
- >
- Filtros
- </Typography>
- </ExpansionPanelSummary>
- </ExpansionPanel>
-
- <ExpansionPanel square>
- <ExpansionPanelSummary
- expandIcon={<ExpandMoreIcon style={props.contrast === "" ? {} : { color: "white" }} />}
- style={props.contrast === "" ? {} : { backgroundColor: "black" }}
- aria-controls="panel2d-content"
- id="panel2d-header"
- >
- <Typography style={props.contrast === "" ? {} : { color: "white" }}>Componentes Curriculares</Typography>
- </ExpansionPanelSummary>
- <ExpansionPanelDetails style={props.contrast === "" ? {} : { backgroundColor: "black" }}>
- <SearchEPCompCurriculum
- contrast={props.contrast}
- curriculumComponents={props.curriculumComponents}
- setCurriculum={props.setCurriculum}
- />
- </ExpansionPanelDetails>
- </ExpansionPanel>
-
- <ExpansionPanel square>
- <ExpansionPanelSummary
- style={props.contrast === "" ? {} : { backgroundColor: "black" }}
- expandIcon={<ExpandMoreIcon style={props.contrast === "" ? {} : { color: "white" }} />}
- aria-controls="panel3d-content"
- id="panel3d-header"
- >
- <Typography style={props.contrast === "" ? {} : { color: "white" }}>Tipos de Recurso</Typography>
- </ExpansionPanelSummary>
- <ExpansionPanelDetails style={props.contrast === "" ? {} : { backgroundColor: "black" }}>
- <SearchEPTiposRec
- contrast={props.contrast}
- typeOfResources={props.typeOfResources}
- setTypeRes={props.setTypeRes}
- />
- </ExpansionPanelDetails>
- </ExpansionPanel>
-
- <ExpansionPanel square>
- <ExpansionPanelSummary
- style={props.contrast === "" ? {} : { backgroundColor: "black" }}
- aria-controls="panel4d-content"
- expandIcon={<ExpandMoreIcon style={props.contrast === "" ? {} : { color: "white" }} />}
- id="panel4d-header"
- >
- <Typography style={props.contrast === "" ? {} : { color: "white" }}>Etapas de Ensino</Typography>
- </ExpansionPanelSummary>
- <ExpansionPanelDetails style={props.contrast === "" ? {} : { backgroundColor: "black" }}>
- <SearchEPEtapasEns
- contrast={props.contrast}
- teachingStage={props.teachingStage}
- setTeachingStage={props.setTeachingStage}
- />
- </ExpansionPanelDetails>
- </ExpansionPanel>
-
- <ExpansionPanel square>
- <ExpansionPanelSummary
- style={props.contrast === "" ? {} : { backgroundColor: "black" }}
- aria-controls="panel5d-content"
- expandIcon={<ExpandMoreIcon style={props.contrast === "" ? {} : { color: "white" }} />}
- id="panel5d-header"
- >
- <Typography style={props.contrast === "" ? {} : { color: "white" }}>Idiomas</Typography>
- </ExpansionPanelSummary>
- <ExpansionPanelDetails style={props.contrast === "" ? {} : { backgroundColor: "black" }}>
- <SearchEPIdiomas
- contrast={props.contrast}
- languages={props.languages}
- setLanguages={props.setLanguages}
- />
- </ExpansionPanelDetails>
- </ExpansionPanel>
-
- <ExpansionPanel square>
- <ExpansionPanelSummary
- style={props.contrast === "" ? {} : { backgroundColor: "black", borderBottom: "1px solid white" }}
- aria-controls="panel6d-content"
- expandIcon={<ExpandMoreIcon style={props.contrast === "" ? {} : { color: "white" }} />}
- id="panel6d-header"
- >
- <Typography style={props.contrast === "" ? {} : { color: "white" }}>Palavra-Chave</Typography>
- </ExpansionPanelSummary>
- <ExpansionPanelDetails style={props.contrast === "" ? {} : { backgroundColor: "black" }}>
- <FormInput
- contrast={props.contrast}
- placeholder="Palavra chave + enter "
- id="outlined-margin-dense"
- variant="outlined"
- handleChange={e => HandleChangeText(e)}
- onKeyDown={e => onKeyPressed(e)}
- error={errorInKeyWord.state}
- helperText={errorInKeyWord.state ? errorInKeyWord.message : ""}
- />
- </ExpansionPanelDetails>
- </ExpansionPanel>
- </MainPaper>
- );
+ </div>
+ </ExpansionPanelDetails>
+ </ExpansionPanel>
+
+ <ExpansionPanel square>
+ <ExpansionPanelSummary
+ expandIcon={<ExpandMoreIcon />}
+ aria-controls="panel3d-content"
+ id="panel3d-header"
+ >
+ <Typography>Tipos de Recurso</Typography>
+ </ExpansionPanelSummary>
+ <ExpansionPanelDetails>
+ <SearchEPTiposRec
+ onChange={props.onChange}
+ typeOfResources={props.typeOfResources}
+ setTypeRes={props.setTypeRes}
+ />
+ </ExpansionPanelDetails>
+ </ExpansionPanel>
+
+ <ExpansionPanel square>
+ <ExpansionPanelSummary
+ aria-controls="panel4d-content"
+ expandIcon={<ExpandMoreIcon />}
+ id="panel4d-header"
+ >
+ <Typography>Etapas de Ensino</Typography>
+ </ExpansionPanelSummary>
+ <ExpansionPanelDetails>
+ <SearchEPEtapasEns
+ onChange={props.onChange}
+ teachingStage={props.teachingStage}
+ setTeachingStage={props.setTeachingStage}
+ />
+ </ExpansionPanelDetails>
+ </ExpansionPanel>
+
+ <ExpansionPanel square>
+ <ExpansionPanelSummary
+ aria-controls="panel5d-content"
+ expandIcon={<ExpandMoreIcon />}
+ id="panel5d-header"
+ >
+ <Typography>Idiomas</Typography>
+ </ExpansionPanelSummary>
+ <ExpansionPanelDetails>
+ <SearchEPIdiomas
+ onChange={props.onChange}
+ languages={props.languages}
+ setLanguages={props.setLanguages}
+ />
+ </ExpansionPanelDetails>
+ </ExpansionPanel>
+
+ <ExpansionPanel square>
+ <ExpansionPanelSummary
+ aria-controls="panel6d-content"
+ expandIcon={<ExpandMoreIcon />}
+ id="panel6d-header"
+ >
+ <Typography>Palavra-Chave</Typography>
+ </ExpansionPanelSummary>
+ <ExpansionPanelDetails>
+ <TextField
+ label="Palavra chave + enter "
+ id="outlined-margin-dense"
+ variant="outlined"
+ onChange={e => HandleChangeText(e)}
+ onKeyDown={e => onKeyPressed(e)}
+ error={errorInKeyWord.state}
+ helperText={errorInKeyWord.state ? errorInKeyWord.message : ""}
+ />
+ </ExpansionPanelDetails>
+ </ExpansionPanel>
+ </MainPaper>
+ );
}
const MainPaper = styled(Paper)`
- text-align: center;
- margin-top: 5px;
- margin-bottom: 30px;
- color: #666;
-
- .textInfo{
- text-align: start;
- }
+ /* height: 150px; */
+ text-align: center;
+ background-color: #fff;
+ margin-top: 5px;
+ margin-bottom: 30px;
+ color: #666;
+ .textInfo{
+ text-align: start;
+ }
`;
diff --git a/src/Components/SearchExpansionPanel/SesrchEPEtapasEns.js b/src/Components/SearchExpansionPanel/SesrchEPEtapasEns.js
index e5c88bad..632009ae 100644
--- a/src/Components/SearchExpansionPanel/SesrchEPEtapasEns.js
+++ b/src/Components/SearchExpansionPanel/SesrchEPEtapasEns.js
@@ -1,52 +1,61 @@
import React from "react";
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from "@material-ui/core/styles";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
+import ListItemText from "@material-ui/core/ListItemText";
import Checkbox from "@material-ui/core/Checkbox";
-import { yellow, orange } from "@material-ui/core/colors";
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import FormGroup from '@material-ui/core/FormGroup';
+import IconButton from "@material-ui/core/IconButton";
-const OrangeCheckBox = withStyles({
+const useStyles = makeStyles(theme => ({
root: {
- color: orange[400],
- '&$checked': {
- color: orange[600],
- },
- },
- checked: {},
-})((props) => <Checkbox color="default" {...props} />);
+ width: "100%",
+ maxWidth: 360,
+ backgroundColor: theme.palette.background.paper,
+ color: "#666"
+ }
+}));
-const ContrastCheckBox = withStyles({
- root: {
- color: yellow[400],
- '&$checked': {
- color: yellow[600],
- },
- },
- checked: {},
-})((props) => <Checkbox color="default" {...props} />);
-
-export default function SearchEPCompCurriculum({ teachingStage, setTeachingStage, contrast }) {
+export default function SearchEPEtapasEns({ teachingStage, setTeachingStage }) {
+ const classes = useStyles();
- const handleChange = (event) => {
- const index = event.target.name;
- const newCurriculumComponents = [...teachingStage];
- newCurriculumComponents[index].isChecked = !newCurriculumComponents[index].isChecked
- setTeachingStage(newCurriculumComponents);
+ const handleToggle = (index) => () => {
+ const newTypeTeachingStage = [...teachingStage];
+ newTypeTeachingStage[index].isChecked = !newTypeTeachingStage[index].isChecked
+ setTeachingStage(newTypeTeachingStage);
};
if (teachingStage)
return (
- <FormGroup row>
- {
- teachingStage.map((item, index) => {
- return <FormControlLabel
- name={index}
+ <List className={classes.root}>
+ {teachingStage.map((item, index) => {
+ const labelId = `checkbox-list-label-${item.value}`;
+
+ return (
+ <ListItem
key={item.exemplo}
- control={contrast === "" ? <OrangeCheckBox checked={item.isChecked} onChange={handleChange} /> : <ContrastCheckBox checked={item.isChecked} onChange={handleChange} />}
- label={<span style={contrast === "" ? {} : { color: "yellow", textDecoration: "underline" }}>{item.exemplo}</span>}
- />
- })
- }
- </FormGroup>
- )
+ role={undefined}
+ dense
+ button
+ onClick={handleToggle(index)}
+ >
+ <ListItemIcon>
+ <Checkbox
+ edge="start"
+ checked={item.isChecked}
+ tabIndex={-1}
+ disableRipple
+ inputProps={{ "aria-labelledby": labelId }}
+ />
+ </ListItemIcon>
+ <ListItemText id={labelId} primary={item.exemplo} />
+ <ListItemSecondaryAction>
+ <IconButton edge="end" aria-label="comments"></IconButton>
+ </ListItemSecondaryAction>
+ </ListItem>
+ );
+ })}
+ </List>
+ );
}
diff --git a/src/Components/SearchPageComponents/CollectionTemplate.js b/src/Components/SearchPageComponents/CollectionTemplate.js
index b2038c24..d75c13a4 100644
--- a/src/Components/SearchPageComponents/CollectionTemplate.js
+++ b/src/Components/SearchPageComponents/CollectionTemplate.js
@@ -9,134 +9,118 @@ import ArrowBackIcon from '@material-ui/icons/ArrowBack';
import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
//Image Import
-import { ColecaoVazia } from "ImportImages.js";
+import { ColecaoVazia } from "ImportImages.js";
-export default function ResourceTemplate({ isLoading, resources, totalResources, currPage, handlePreviousPage, handleNextPage, contrast }) {
- const topRef = React.useRef();
- const totalPages = parseInt(totalResources) === 0 ? 0 : Math.ceil(totalResources / 12) - 1; //Dividing by 12 because i want to cath total pages, and results per page is 12
+export default function ResourceTemplate({ isLoading, resources, totalResources, currPage, handlePreviousPage, handleNextPage }) {
+ const topRef = React.useRef();
+ const totalPages = parseInt(totalResources) === 0 ? 0 : Math.ceil(totalResources / 12) - 1; //Dividing by 12 because i want to cath total pages, and results per page is 12
- useEffect(() => {
- topRef.current.scrollIntoView()
- }, [isLoading])
+ useEffect(() => {
+ topRef.current.scrollIntoView()
+ }, [isLoading])
- return (
- <ResourcePaper elevation={4} square contrast={contrast}>
- <div ref={topRef} />
- <div className="main">
- <Title contrast={contrast}>
- Coleções encontradas ({totalResources})
- </Title>
- {
- isLoading ?
- <LoadingSpinner contrast={contrast} text='Carregando Coleções...' />
- :
- <Grid container justify='center' alignItems='center' spacing={3}>
- {
- resources.length >= 1 ?
- resources.map((card) => {
- return (
- <Grid item key={new Date().toISOString() + card.id} >
- <CollectionCardFunction
- contrast={contrast}
- name={card.name}
- tags={card.tags}
- rating={card.review_average}
- id={card.id}
- author={card.owner ? card.owner.name : ""}
- description={card.description}
- thumbnails={card.items_thumbnails}
- avatar={card.owner ? card.owner.avatar : ""}
- likeCount={card.likes_count}
- followed={card.followed}
- liked={card.liked}
- collections={card.collection_items}
- authorID={card.owner.id}
- />
- </Grid>
- )
- })
- :
- <NoContentDiv contrast={contrast}>
- <h3>
- Desculpe, não há dados nessa página.
- </h3>
- <img src={ColecaoVazia} alt='No cards' />
- </NoContentDiv>
- }
- </Grid>
- }
- {
- !isLoading &&
- <Grid container direction='row' alignItems='center' justify='center' spacing={3}>
- <Grid item>
- <StyledIconButton contrast={contrast} elevation={4} disabled={currPage === 0}>
- <IconButton onClick={handlePreviousPage} disabled={currPage === 0}>
- <ArrowBackIcon className='icon' />
- </IconButton>
- </StyledIconButton>
- </Grid>
- <Grid item>
- <ActualPage contrast={contrast}>
- {currPage + 1}
- </ActualPage>
- <TotalPages contrast={contrast}>
- ...{totalPages + 1}
- </TotalPages>
- </Grid>
- <Grid item>
- <StyledIconButton contrast={contrast} elevation={4} disabled={currPage === totalPages}>
- <IconButton onClick={handleNextPage} disabled={currPage === totalPages}>
- <ArrowForwardIcon className='icon' />
- </IconButton>
- </StyledIconButton>
- </Grid>
- </Grid>
- }
- </div >
- </ResourcePaper >
- )
+ return (
+ <ResourcePaper elevation={4} square>
+ <div ref={topRef} />
+ <Title>
+ Coleções encontradas ({totalResources})
+ </Title>
+ {
+ isLoading ?
+ <LoadingSpinner text='Carregando Coleções...' />
+ :
+ <Grid container justify='center' alignItems='center' spacing={3}>
+ {
+ resources.length >= 1 ?
+ resources.map((card) => {
+ return <Grid item key={new Date().toISOString() + card.id} >
+ <CollectionCardFunction
+ name={card.name}
+ tags={card.tags}
+ rating={card.review_average}
+ id={card.id}
+ author={card.owner ? card.owner.name : ""}
+ description={card.description}
+ thumbnails={card.items_thumbnails}
+ avatar={card.owner ? card.owner.avatar : ""}
+ likeCount={card.likes_count}
+ followed={card.followed}
+ liked={card.liked}
+ collections={card.collection_items}
+ authorID={card.owner.id}
+ />
+ </Grid>
+ })
+ :
+ <NoContentDiv>
+ <h3>
+ Desculpe, não há dados nessa página.
+ </h3>
+ <img src={ColecaoVazia} alt='No cards' />
+ </NoContentDiv>
+ }
+ </Grid>
+ }
+ {
+ !isLoading &&
+ <Grid container direction='row' alignItems='center' justify='center' spacing={3}>
+ <Grid item>
+ <StyledIconButton elevation={4} disabled={currPage === 0}>
+ <IconButton onClick={handlePreviousPage} disabled={currPage === 0}>
+ <ArrowBackIcon className='icon' />
+ </IconButton>
+ </StyledIconButton>
+ </Grid>
+ <Grid item>
+ <ActualPage>
+ {currPage}
+ </ActualPage>...{totalPages}
+ </Grid>
+ <Grid item>
+ <StyledIconButton elevation={4} disabled={currPage === totalPages}>
+ <IconButton onClick={handleNextPage} disabled={currPage === totalPages}>
+ <ArrowForwardIcon className='icon' />
+ </IconButton>
+ </StyledIconButton>
+ </Grid>
+ </Grid>
+ }
+ </ResourcePaper>
+ )
};
const Title = styled.h4`
- text-transform: uppercase;
- font-weight: 500;
- text-align: left;
- color: ${props => props.contrast === "" ? "#673ab7" : "white"};
+ text-transform: uppercase;
+ font-weight: 500;
+ text-align: left;
+ color: #673ab7;
`
const NoContentDiv = styled.div`
- h3{
- color: ${props => props.contrast === "" ? "#673ab7" : "white"};
- text-align: center;
- }
+ >h3{
+ color: #673ab7;
+ text-align: center;
+ }
`
const ActualPage = styled.span`
- color: ${props => props.contrast === "" ? "#666" : "white"};
-`
-const TotalPages = styled.span`
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color: #673ab7;
`
const StyledIconButton = styled(Paper)`
- border-radius: 50% !important;
- background-color: ${props => props.contrast === "" ? props.disabled ? "#666" : "#673ab7" : "black"} !important;
- .icon{
- color: ${props => props.contrast === "" ? "white": props.disabled ? "white" : "yellow"} !important;
- }
- border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
+ border-radius: 50% !important;
+ background-color: ${props => props.disabled ? "#666" : "#673ab7"} !important;
+ .icon{
+ color: ${props => props.disabled ? "#d4d4d4" : "white"};
+ }
`
const ResourcePaper = styled(Paper)`
- /* height: 150px; */
- text-align: center;
- margin-top: 5px;
- margin-bottom: 30px;
- border: ${props => props.contrast === "" ? 0 : "1px solid white"};
-
- .main{
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
- padding: 0.5em 1em;
- }
-
- .textInfo{
- text-align: start;
- }
+ /* height: 150px; */
+ text-align: center;
+ background-color: #fff;
+ margin-top: 5px;
+ margin-bottom: 30px;
+ padding: 0.5em 1em;
+ color: #666;
+ .textInfo{
+ text-align: start;
+ }
`;
\ No newline at end of file
diff --git a/src/Components/SearchPageComponents/Error.js b/src/Components/SearchPageComponents/Error.js
index 523bae93..7cb9d98c 100644
--- a/src/Components/SearchPageComponents/Error.js
+++ b/src/Components/SearchPageComponents/Error.js
@@ -2,32 +2,29 @@ import React from 'react';
import styled from 'styled-components';
import Paper from '@material-ui/core/Paper';
-export default function Error({ contrast }) {
- return <ResourcePaper square elevation={4} contrast={contrast}>
- <div className="div">
- <Title contrast={contrast}>
- Houve um erro durante a obtenção de dados :(
- </Title>
- </div>
+export default function Error() {
+ return <ResourcePaper square elevation={4}>
+ <Title>
+ Houve um erro durante a obtenção de dados :(
+ </Title>
</ResourcePaper>
}
const ResourcePaper = styled(Paper)`
- border: ${props => props.contrast === "" ? 0 : "1px solid white"};
+ /* height: 150px; */
text-align: center;
+ background-color: #fff;
+ margin-top: 5px;
+ margin-bottom: 30px;
+ padding: 0.5em 1em;
color: #666;
width: 100%;
-
- .div{
- padding: 0.5em 1em;
- background: ${props => props.contrast === "" ? "" : "black"};
- }
`;
const Title = styled.h4`
text-transform: uppercase;
font-weight: 500;
text-align: left;
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color: #666;
text-align: center;
`
\ No newline at end of file
diff --git a/src/Components/SearchPageComponents/FilterSummary.js b/src/Components/SearchPageComponents/FilterSummary.js
index 3c0790bf..9cc1a9ae 100644
--- a/src/Components/SearchPageComponents/FilterSummary.js
+++ b/src/Components/SearchPageComponents/FilterSummary.js
@@ -3,160 +3,128 @@ import styled from 'styled-components';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import Chip from '@material-ui/core/Chip';
+import Button from "@material-ui/core/Button";
-export default function FilterSummary({ curriculumComponents, typeOfResources, languages, teachingStage, tag, onButtonClicked, contrast }) {
- return (
- <FilterSummaryPaper square elevation={4} contrast={contrast}>
- <div className="main">
- <h3 className="title">
- Resumo dos filtros selecionados
- </h3>
- <Grid container direction='column' spacing={2}>
- <Grid item>
- <Grid container direction='row' spacing={1} alignItems='center'>
- <Grid item className="subtitle">
- Componentes curriculares:
- </Grid>
- <Grid item>
- {
- curriculumComponents.map((item) => {
- return (
- item.isChecked &&
- <StyledChip contrast={contrast} key={new Date().toISOString() + item.value} size="small" label={item.exemplo} />
- );
+export default function FilterSummary
+ ({ curriculumComponents, typeOfResources, languages, teachingStage, tag, onButtonClicked }) {
+ return (
+ <FilterSummaryPaper square elevation={4}>
+ <h3 className="title">
+ Resumo dos filtros selecionados
+ </h3>
+ <Grid container direction='column' spacing={2}>
+ <Grid item>
+ <Grid container direction='row' spacing={1} alignItems='center'>
+ <Grid item>
+ Componentes curriculares:
+ </Grid>
+ <Grid item>
+ {
+ curriculumComponents.map((item) => {
+ return (
+ item.isChecked &&
+ <StyledChip key={new Date().toISOString() + item.value} size="small" label={item.exemplo} />
+ );
- })
- }
- </Grid>
- </Grid>
- </Grid>
- <Grid item>
- <Grid container direction='row' spacing={1} alignItems='center'>
- <Grid item className="subtitle">
- Tipos de recursos:
- </Grid>
- <Grid item>
- {
- typeOfResources.map((item) => {
- return (
- item.isChecked &&
- <StyledChip contrast={contrast} key={new Date().toISOString() + item.value} size="small" label={item.exemplo} />
- );
- })
- }
- </Grid>
- </Grid>
- </Grid>
- <Grid item>
- <Grid container direction='row' spacing={1} alignItems='center'>
- <Grid item className="subtitle">
- Etapas de ensino:
- </Grid>
- <Grid item>
- {
- teachingStage.map((item) => {
- return (
- item.isChecked &&
- <StyledChip contrast={contrast} key={new Date().toISOString() + item.value} size="small" label={item.exemplo} />
- );
- })
- }
- </Grid>
- </Grid>
- </Grid>
- <Grid item>
- <Grid container direction='row' spacing={1} alignItems='center'>
- <Grid item className="subtitle">
- Idiomas:
- </Grid>
- <Grid item>
- {
- languages.map((item) => {
- return (
- item.isChecked &&
- <StyledChip contrast={contrast} key={new Date().toISOString() + item.value} size="small" label={item.exemplo} />
- );
- })
- }
- </Grid>
- </Grid>
- </Grid>
- <Grid item>
- <Grid container direction='row' spacing={1} alignItems='center'>
- <Grid item className="subtitle">
- Palavra chave:
- </Grid>
- <Grid item>
- {
- tag &&
- <StyledChip contrast={contrast} size="small" label={tag} />
- }
- </Grid>
- </Grid>
- </Grid>
- <Grid item>
- <Button contrast={contrast} variant="contained" onClick={onButtonClicked}>
- Aplicar filtro
- </Button>
- </Grid>
- </Grid>
- </div>
- </FilterSummaryPaper>
- )
+ })
+ }
+ </Grid>
+ </Grid>
+ </Grid>
+ <Grid item>
+ <Grid container direction='row' spacing={1} alignItems='center'>
+ <Grid item>
+ Tipos de recursos:
+ </Grid>
+ <Grid item>
+ {
+ typeOfResources.map((item) => {
+ return (
+ item.isChecked &&
+ <StyledChip key={new Date().toISOString() + item.value} size="small" label={item.exemplo} />
+ );
+ })
+ }
+ </Grid>
+ </Grid>
+ </Grid>
+ <Grid item>
+ <Grid container direction='row' spacing={1} alignItems='center'>
+ <Grid item>
+ Etapas de ensino:
+ </Grid>
+ <Grid item>
+ {
+ teachingStage.map((item) => {
+ return (
+ item.isChecked &&
+ <StyledChip key={new Date().toISOString() + item.value} size="small" label={item.exemplo} />
+ );
+ })
+ }
+ </Grid>
+ </Grid>
+ </Grid>
+ <Grid item>
+ <Grid container direction='row' spacing={1} alignItems='center'>
+ <Grid item>
+ Idiomas:
+ </Grid>
+ <Grid item>
+ {
+ languages.map((item) => {
+ return (
+ item.isChecked &&
+ <StyledChip key={new Date().toISOString() + item.value} size="small" label={item.exemplo} />
+ );
+ })
+ }
+ </Grid>
+ </Grid>
+ </Grid>
+ <Grid item>
+ <Grid container direction='row' spacing={1} alignItems='center'>
+ <Grid item>
+ Palavra chave:
+ </Grid>
+ <Grid item>
+ {
+ tag &&
+ <StyledChip size="small" label={tag} />
+ }
+ </Grid>
+ </Grid>
+ </Grid>
+ <Grid item>
+ <StyledButton variant="contained" onClick={onButtonClicked}>
+ <span className="text">
+ Aplicar filtro
+ </span>
+ </StyledButton>
+ </Grid>
+ </Grid>
+ </FilterSummaryPaper>
+ )
}
const FilterSummaryPaper = styled(Paper)`
- margin-top: 5px;
- margin-bottom: 30px;
- border: ${props => props.contrast === "" ? 0 : "1px solid white"};
-
- .title{
- text-transform: uppercase;
- color: ${props => props.contrast === "" ? "#666" : "white"};
- font-weight: 500;
- }
-
- .main{
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
- padding: 0.5em 1em;
- }
-
- .subtitle{
- color: ${props => props.contrast === "" ? "#666" : "white"};
- }
-`
-const Button = styled.button`
- background: ${props => props.contrast === "" ? "#ff7f00" : "black"};
+ background-color: #fff;
+ margin-top: 5px;
+ margin-bottom: 30px;
+ padding: 0.5em 1em;
+ .title{
text-transform: uppercase;
- color: ${props => props.contrast === "" ? "white" : "yellow"};
- font-family: Roboto,sans-serif;
- font-size: 14px;
- font-weight: 500;
- height: 36px;
- border-radius: 3px;
- border: ${props => props.contrast === "" ? 0 : "1px solid white"};
- box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
- display: inline-block;
- position: relative;
- cursor: pointer;
- min-height: 36px;
- min-width: 88px;
- line-height: 36px;
- vertical-align: middle;
- -webkit-box-align: center;
- outline: none;
- text-align: center;
- padding: 0em 1em;
- white-space: nowrap;
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- :active{
- transform: translateY(2px);
- }
+ color: #666;
+ font-weight: 500;
+ }
+`
+const StyledButton = styled(Button)`
+ background-color: #ff7f00 !important;
+ .text{
+ color: white;
+ }
`
const StyledChip = styled(Chip)`
- margin: 0.2em;
- background-color: ${props => props.contrast === "" ? 0 : "black !important"};
- border: ${props => props.contrast === "" ? 0 : "1px solid white !important"};
- color: ${props => props.contrast === "" ? 0 : "white !important"};
+ margin: 0.2em
`
diff --git a/src/Components/SearchPageComponents/HeaderFilters.js b/src/Components/SearchPageComponents/HeaderFilters.js
index b9ae795d..21bcc78c 100644
--- a/src/Components/SearchPageComponents/HeaderFilters.js
+++ b/src/Components/SearchPageComponents/HeaderFilters.js
@@ -5,158 +5,128 @@ import Grid from '@material-ui/core/Grid';
import TextField from '@material-ui/core/TextField';
import MenuItem from '@material-ui/core/MenuItem';
-export default function HeaderFilters({ options, contrast, orders, currOption, currOrder, handleChangeOption, handleChangeOrder }) {
- if (currOption !== 'User')
- return (
- <FiltersPaper contrast={contrast} elevation={4} square>
- <Grid className="gridStyle" container direction='row' alignItems='center'>
- <Grid item xs={12} sm={6}>
- <Grid container alignItems='center'>
- <Grid item xs={12} md={2}>
- <Label contrast={contrast}>
- Buscar por:
- </Label>
- </Grid>
- <Grid item xs={12} md={10}>
- <StyledTextField
- contrast={contrast}
- select
- fullWidth
- value={currOption}
- onChange={handleChangeOption}
- variant="outlined"
- >
- {options.map((option) => (
- <StyledMenuItem
- contrast={contrast}
- key={option.value}
- value={option.name}
- name={option.value}
- >
- <span style={currOption === option.name ? { color: option.color, fontWeight: "500" } : { color: option.color, fontWeight: "lighter" }}>
- {option.value}
- </span>
- </StyledMenuItem>
- ))}
- </StyledTextField>
- </Grid>
- </Grid>
- </Grid>
+export default function HeaderFilters({ options, orders, currOption, currOrder, handleChangeOption, handleChangeOrder }) {
- <Grid item xs={12} sm={6}>
- <Grid container alignItems='center'>
- <Grid item xs={12} md={2}>
- <Label contrast={contrast}>
- Ordenar por:
- </Label>
- </Grid>
- <Grid item xs={12} md={10}>
- <StyledTextField
- contrast={contrast}
- select
- fullWidth
- value={currOrder}
- onChange={handleChangeOrder}
- variant="outlined"
- >
- {orders.map((option) => (
- <StyledMenuItem
- contrast={contrast}
- color={option.color}
- key={option.value}
- value={option.name}
- name={option.value}
- >
- <span style={currOrder === option.name ? { color: option.color, fontWeight: "500" } : { color: option.color, fontWeight: "lighter" }}>
- {option.value}
- </span>
- </StyledMenuItem>
- ))}
- </StyledTextField>
- </Grid>
- </Grid>
- </Grid>
- </Grid >
- </FiltersPaper >
- )
- else
- return (
- <FiltersPaper contrast={contrast} elevation={4} square>
- <Grid className="gridStyle" container direction='row' alignItems='center'>
- <Grid item xs={12}>
- <Grid container alignItems='center'>
- <Grid item xs={12} md={2}>
- <Label contrast={contrast}>
- Buscar por:
- </Label>
- </Grid>
- <Grid item xs={12} md={10}>
- <StyledTextField
- contrast={contrast}
- select
- fullWidth
- value={currOption}
- onChange={handleChangeOption}
- variant="outlined"
- >
- {options.map((option) => (
- <StyledMenuItem
- contrast={contrast}
- color={option.color}
- key={option.value}
- value={option.name}
- name={option.value}
- >
- <span style={currOption === option.name ? { color: option.color, fontWeight: "500" } : { color: option.color, fontWeight: "lighter" }}>
- {option.value}
- </span>
- </StyledMenuItem>
- ))}
- </StyledTextField>
- </Grid>
- </Grid>
- </Grid>
- </Grid>
- </FiltersPaper >
- )
+ if (currOption !== 'User')
+ return (
+ <FiltersPaper elevation={4} square>
+ <Grid container direction='row' spacing={2} alignItems='center'>
+ <Grid item xs={12} sm={6}>
+ <Grid container alignItems='center'>
+ <Grid item xs={12} md={2}>
+ <Label>
+ Buscar por:
+ </Label>
+ </Grid>
+ <Grid item xs={12} md={10}>
+ <TextField
+ select
+ fullWidth
+ value={currOption}
+ onChange={handleChangeOption}
+ variant="outlined"
+ >
+ {options.map((option) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ >
+ <span style={{ color: option.color }}>
+ {option.value}
+ </span>
+ </MenuItem>
+ ))}
+ </TextField>
+ </Grid>
+ </Grid>
+ </Grid>
+
+ <Grid item xs={12} sm={6}>
+ <Grid container alignItems='center'>
+ <Grid item xs={12} md={2}>
+ <Label>
+ Ordenar por:
+ </Label>
+ </Grid>
+ <Grid item xs={12} md={10}>
+ <TextField
+ select
+ fullWidth
+ value={currOrder}
+ onChange={handleChangeOrder}
+ variant="outlined"
+ >
+ {orders.map((option) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ >
+ {option.value}
+ </MenuItem>
+ ))}
+ </TextField>
+ </Grid>
+ </Grid>
+ </Grid>
+ </Grid>
+ </FiltersPaper>
+ )
+ else
+ return (
+ <FiltersPaper elevation={4} square>
+ <Grid container direction='row' alignItems='center'>
+ <Grid item xs={12}>
+ <Grid container alignItems='center'>
+ <Grid item xs={12} md={2}>
+ <Label>
+ Buscar por:
+ </Label>
+ </Grid>
+ <Grid item xs={12} md={10}>
+ <TextField
+ select
+ fullWidth
+ value={currOption}
+ onChange={handleChangeOption}
+ variant="outlined"
+ >
+ {options.map((option) => (
+ <MenuItem
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ >
+ <span style={{ color: option.color }}>
+ {option.value}
+ </span>
+ </MenuItem>
+ ))}
+ </TextField>
+ </Grid>
+ </Grid>
+ </Grid>
+ </Grid>
+ </FiltersPaper>
+ )
}
const Label = styled.p`
- text-align: center;
- font-weight: 600;
- color: ${props => props.contrast === "" ? "" : "white"};
-`
-
-const StyledTextField = styled(TextField)`
- .MuiOutlinedInput-root {
- &.Mui-focused fieldset {
- border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- }
- fieldset {
- border-color: ${props => props.contrast === "" ? "#666" : "white"};
- }
- }
- text-decoration: ${props => props.contrast === "" ? "none" : "underline yellow !important"};
+ text-align: center;
+ font-weight: 600;
`
-const StyledMenuItem = styled(MenuItem)`
- background-color: ${props => props.contrast === "" ? "" : "black !important"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline yellow !important"};
-`
const FiltersPaper = styled(Paper)`
- text-align: center;
- margin-top: 5px;
- margin-bottom: 30px;
- color: ${props => props.contrast === "" ? "#666" : "white"};
- border: ${props => props.contrast === "" ? 0 : "1px solid white"};
-
- .textInfo{
- text-align: start;
- }
-
- .gridStyle{
- padding: 0.5em 1em;
- background: ${props => props.contrast === "" ? "#fff" : "black"};
- }
+ /* height: 150px; */
+ text-align: center;
+ background-color: #fff;
+ margin-top: 5px;
+ margin-bottom: 30px;
+ padding: 0.5em 1em;
+ color: #666;
+ .textInfo{
+ text-align: start;
+ }
`;
\ No newline at end of file
diff --git a/src/Components/SearchPageComponents/ResourceTemplate.js b/src/Components/SearchPageComponents/ResourceTemplate.js
index d5a0a226..362bf17d 100644
--- a/src/Components/SearchPageComponents/ResourceTemplate.js
+++ b/src/Components/SearchPageComponents/ResourceTemplate.js
@@ -9,134 +9,118 @@ import ArrowBackIcon from '@material-ui/icons/ArrowBack';
import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
//Image Import
-import { RecursoVazio } from "ImportImages.js";
+import { RecursoVazio } from "ImportImages.js";
-export default function ResourceTemplate({ isLoading, resources, totalResources, currPage, handlePreviousPage, handleNextPage, contrast }) {
- const totalPages = parseInt(totalResources) === 0 ? 0 : Math.ceil(totalResources / 12) - 1; //Dividing by 12 because i want to cath total pages, and results per page is 12
- const topRef = React.useRef();
+export default function ResourceTemplate({ isLoading, resources, totalResources, currPage, handlePreviousPage, handleNextPage }) {
+ const totalPages = parseInt(totalResources) === 0 ? 0 : Math.ceil(totalResources / 12) - 1; //Dividing by 12 because i want to cath total pages, and results per page is 12
+ const topRef = React.useRef();
- useEffect(() => {
- topRef.current.scrollIntoView();
- }, [isLoading])
+ useEffect(() => {
+ topRef.current.scrollIntoView();
+ }, [isLoading])
- return (
- <ResourcePaper elevation={4} square contrast={contrast}>
- <div ref={topRef} />
- <div className="main">
- <Title contrast={contrast}>
- Recursos encontrados ({totalResources})
- </Title>
- {
- isLoading ?
- <LoadingSpinner text='Carregando recursos...' contrast={contrast} />
- :
- <Grid container justify='center' alignItems='center' spacing={3}>
- {
- resources.length >= 1 ?
- resources.map((card) => {
- return (
- <Grid item key={new Date().toISOString() + card.id} >
- <ResourceCardFunction
- contrast={contrast}
- avatar={card.publisher ? card.publisher.avatar : ""}
- id={card.id}
- thumbnail={card.thumbnail}
- type={card.object_type ? card.object_type : "Outros"}
- title={card.name}
- published={card.state === "published" ? true : false}
- likeCount={card.likes_count}
- liked={card.liked}
- rating={card.review_average}
- author={card.author}
- tags={card.tags}
- href={"/recurso/" + card.id}
- downloadableLink={card.default_attachment_location}
- />
- </Grid>
- )
- })
- :
- <NoContentDiv contrast={contrast}>
- <h3>
- Desculpe, não há dados nessa página.
- </h3>
- <img src={RecursoVazio} alt='No cards' />
- </NoContentDiv>
- }
- </Grid>
- }
- {
- !isLoading &&
- <Grid container direction='row' alignItems='center' justify='center' spacing={3}>
- <Grid item>
- <StyledIconButton contrast={contrast} elevation={4} disabled={currPage === 0}>
- <IconButton onClick={handlePreviousPage} disabled={currPage === 0}>
- <ArrowBackIcon className='icon' />
- </IconButton>
- </StyledIconButton>
- </Grid>
- <Grid item>
- <ActualPage contrast={contrast}>
- {currPage + 1}
- </ActualPage>
- <TotalPages contrast={contrast}>
- ...{totalPages + 1}
- </TotalPages>
- </Grid>
- <Grid item>
- <StyledIconButton contrast={contrast} elevation={4} disabled={currPage === totalPages}>
- <IconButton onClick={handleNextPage} disabled={currPage === totalPages}>
- <ArrowForwardIcon className='icon' />
- </IconButton>
- </StyledIconButton>
- </Grid>
- </Grid>
- }
- </div>
- </ResourcePaper>
- )
+ return (
+ <ResourcePaper elevation={4} square>
+ <div ref={topRef} />
+ <Title>
+ Recursos encontrados ({totalResources})
+ </Title>
+ {
+ isLoading ?
+ <LoadingSpinner text='Carregando recursos...' />
+ :
+ <Grid container justify='center' alignItems='center' spacing={3}>
+ {
+ resources.length >= 1 ?
+ resources.map((card) => {
+ return <Grid item key={new Date().toISOString() + card.id} >
+ <ResourceCardFunction
+ avatar={card.publisher ? card.publisher.avatar : ""}
+ id={card.id}
+ thumbnail={card.thumbnail}
+ type={card.object_type ? card.object_type : "Outros"}
+ title={card.name}
+ published={card.state === "published" ? true : false}
+ likeCount={card.likes_count}
+ liked={card.liked}
+ rating={card.review_average}
+ author={card.author}
+ tags={card.educational_stages}
+ href={"/recurso/" + card.id}
+ downloadableLink={card.default_attachment_location}
+ />
+ </Grid>
+ })
+ :
+ <NoContentDiv>
+ <h3>
+ Desculpe, não há dados nessa página.
+ </h3>
+ <img src={RecursoVazio} alt='No cards' />
+ </NoContentDiv>
+ }
+ </Grid>
+ }
+ {
+ !isLoading &&
+ <Grid container direction='row' alignItems='center' justify='center' spacing={3}>
+ <Grid item>
+ <StyledIconButton elevation={4} disabled={currPage === 0}>
+ <IconButton onClick={handlePreviousPage} disabled={currPage === 0}>
+ <ArrowBackIcon className='icon' />
+ </IconButton>
+ </StyledIconButton>
+ </Grid>
+ <Grid item>
+ <ActualPage>
+ {currPage}
+ </ActualPage>...{totalPages}
+ </Grid>
+ <Grid item>
+ <StyledIconButton elevation={4} disabled={currPage === totalPages}>
+ <IconButton onClick={handleNextPage} disabled={currPage === totalPages}>
+ <ArrowForwardIcon className='icon' />
+ </IconButton>
+ </StyledIconButton>
+ </Grid>
+ </Grid>
+ }
+ </ResourcePaper>
+ )
};
const Title = styled.h4`
- text-transform: uppercase;
- font-weight: 500;
- text-align: left;
- color: ${props => props.contrast === "" ? "#ff7f00" : "white"};
+ text-transform: uppercase;
+ font-weight: 500;
+ text-align: left;
+ color: #ff7f00;
`
const NoContentDiv = styled.div`
- h3{
- color: ${props => props.contrast === "" ? "#ff7f00" : "white"};
- text-align: center;
- }
+ >h3{
+ color: #ff7f00;
+ text-align: center;
+ }
`
const ActualPage = styled.span`
- color: ${props => props.contrast === "" ? "#666" : "white"};
-`
-const TotalPages = styled.span`
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color: #ff7f00;
`
const StyledIconButton = styled(Paper)`
- border-radius: 50% !important;
- background-color: ${props => props.contrast === "" ? props.disabled ? "#666" : "orange" : "black"} !important;
- .icon{
- color: ${props => props.contrast === "" ? "white": props.disabled ? "white" : "yellow"} !important;
- }
- border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
+ border-radius: 50% !important;
+ background-color: ${props => props.disabled ? "#666" : "#ff7f00"} !important;
+ .icon{
+ color: ${props => props.disabled ? "#d4d4d4" : "white"};
+ }
`
const ResourcePaper = styled(Paper)`
- /* height: 150px; */
- text-align: center;
- margin-top: 5px;
- margin-bottom: 30px;
- border: ${props => props.contrast === "" ? 0 : "1px solid white"};
-
- .main{
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
- padding: 0.5em 1em;
- }
-
- .textInfo{
- text-align: start;
- }
+ /* height: 150px; */
+ text-align: center;
+ background-color: #fff;
+ margin-top: 5px;
+ margin-bottom: 30px;
+ padding: 0.5em 1em;
+ color: #666;
+ .textInfo{
+ text-align: start;
+ }
`;
\ No newline at end of file
diff --git a/src/Components/SearchPageComponents/UserTemplate.js b/src/Components/SearchPageComponents/UserTemplate.js
index cd61d982..991a31d3 100644
--- a/src/Components/SearchPageComponents/UserTemplate.js
+++ b/src/Components/SearchPageComponents/UserTemplate.js
@@ -9,7 +9,7 @@ import ArrowBackIcon from '@material-ui/icons/ArrowBack';
import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
import { apiDomain } from '../../env';
-export default function ResourceTemplate({ isLoading, resources, totalResources, currPage, handlePreviousPage, handleNextPage, contrast }) {
+export default function ResourceTemplate({ isLoading, resources, totalResources, currPage, handlePreviousPage, handleNextPage }) {
const totalPages = parseInt(totalResources) === 0 ? 0 : Math.ceil(totalResources / 12) - 1; //Dividing by 12 because i want to cath total pages, and results per page is 12
const topRef = React.useRef();
@@ -18,72 +18,66 @@ export default function ResourceTemplate({ isLoading, resources, totalResources,
}, [isLoading])
return (
- <ResourcePaper elevation={4} square contrast={contrast}>
+ <ResourcePaper elevation={4} square>
<div ref={topRef} />
- <div className="main">
- <Title contrast={contrast}>
- Usuários encontrados ({totalResources})
- </Title>
- {
- isLoading ?
- <LoadingSpinner contrast={contrast} text='Carregando recursos...' />
- :
- <Grid container justify='center' alignItems='center' spacing={3}>
- {
- resources.length >= 1 ?
- resources.map((card) => {
- return <Grid item key={new Date().toISOString() + card.id} >
- <ContactCard
- contrast={contrast}
- name={card.name}
- avatar={card.avatar ? apiDomain + card.avatar : null}
- cover={card.cover ? apiDomain + card.cover : null}
- numCollections={card.collections_count}
- numLearningObjects={card.learning_objects_count}
- follow_count={card.follows_count}
- followed={card.followed || null}
- followerID={card.id}
- href={'/usuario-publico/' + card.id}
- />
- </Grid>
- })
- :
- <NoContentDiv contrast={contrast}>
- <h3>
- Desculpe, não há dados nessa página.
+ <Title>
+ Usuários encontrados ({totalResources})
+ </Title>
+ {
+ isLoading ?
+ <LoadingSpinner text='Carregando recursos...' />
+ :
+ <Grid container justify='center' alignItems='center' spacing={3}>
+ {
+ resources.length >= 1 ?
+ resources.map((card) => {
+ return <Grid item key={new Date().toISOString() + card.id} >
+ <ContactCard
+ name={card.name}
+ avatar={card.avatar ? apiDomain + card.avatar : null}
+ cover={card.cover ? apiDomain + card.cover : null}
+ numCollections={card.collections_count}
+ numLearningObjects={card.learning_objects_count}
+ follow_count={card.follows_count}
+ followed={card.followed || null}
+ followerID={card.id}
+ href={'/usuario-publico/' + card.id}
+ />
+ </Grid>
+ })
+ :
+ <NoContentDiv>
+ <h3>
+ Desculpe, não há dados nessa página.
</h3>
- </NoContentDiv>
- }
- </Grid>
- }
- {
- !isLoading &&
- <Grid container direction='row' alignItems='center' justify='center' spacing={3}>
- <Grid item>
- <StyledIconButton contrast={contrast} elevation={4} disabled={currPage === 0}>
- <IconButton onClick={handlePreviousPage} disabled={currPage === 0}>
- <ArrowBackIcon className='icon' />
- </IconButton>
- </StyledIconButton>
- </Grid>
- <Grid item>
- <ActualPage contrast={contrast}>
- {currPage + 1}
- </ActualPage>
- <TotalPages contrast={contrast}>
- ...{totalPages + 1}
- </TotalPages>
- </Grid>
- <Grid item>
- <StyledIconButton contrast={contrast} elevation={4} disabled={currPage === totalPages}>
- <IconButton onClick={handleNextPage} disabled={currPage === totalPages}>
- <ArrowForwardIcon className='icon' />
- </IconButton>
- </StyledIconButton>
- </Grid>
+ </NoContentDiv>
+ }
</Grid>
- }
- </div>
+ }
+ {
+ !isLoading &&
+ <Grid container direction='row' alignItems='center' justify='center' spacing={3}>
+ <Grid item>
+ <StyledIconButton elevation={4} disabled={currPage === 0}>
+ <IconButton onClick={handlePreviousPage} disabled={currPage === 0}>
+ <ArrowBackIcon className='icon' />
+ </IconButton>
+ </StyledIconButton>
+ </Grid>
+ <Grid item>
+ <ActualPage>
+ {currPage}
+ </ActualPage>...{totalPages}
+ </Grid>
+ <Grid item>
+ <StyledIconButton elevation={4} disabled={currPage === totalPages}>
+ <IconButton onClick={handleNextPage} disabled={currPage === totalPages}>
+ <ArrowForwardIcon className='icon' />
+ </IconButton>
+ </StyledIconButton>
+ </Grid>
+ </Grid>
+ }
</ResourcePaper>
)
};
@@ -92,41 +86,33 @@ const Title = styled.h4`
text-transform: uppercase;
font-weight: 500;
text-align: left;
- color: ${props => props.contrast === "" ? "#00bcd4" : "white"};
+ color: #00bcd4;
`
const NoContentDiv = styled.div`
>h3{
- color: ${props => props.contrast === "" ? "#00bcd4" : "white"};
+ color: #00bcd4;
text-align: center;
}
`
const ActualPage = styled.span`
- color: ${props => props.contrast === "" ? "#666" : "white"};
-`
-const TotalPages = styled.span`
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color: #00bcd4;
`
const StyledIconButton = styled(Paper)`
- border-radius: 50% !important;
- background-color: ${props => props.contrast === "" ? props.disabled ? "#666" : "#00bcd4" : "black"} !important;
- .icon{
- color: ${props => props.contrast === "" ? "white": props.disabled ? "white" : "yellow"} !important;
- }
- border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
+ border-radius: 50% !important;
+ background-color: ${props => props.disabled ? "#666" : "#00bcd4"} !important;
+ .icon{
+ color: ${props => props.disabled ? "#d4d4d4" : "white"};
+ }
`
const ResourcePaper = styled(Paper)`
/* height: 150px; */
text-align: center;
+ background-color: #fff;
margin-top: 5px;
margin-bottom: 30px;
- border: ${props => props.contrast === "" ? 0 : "1px solid white"};
-
- .main{
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
- padding: 0.5em 1em;
- }
-
+ padding: 0.5em 1em;
+ color: #666;
.textInfo{
text-align: start;
}
diff --git a/src/Components/SearchSectionFunction.js b/src/Components/SearchSectionFunction.js
index 6362110e..7921c9ff 100644
--- a/src/Components/SearchSectionFunction.js
+++ b/src/Components/SearchSectionFunction.js
@@ -16,82 +16,81 @@ 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 '../App.css';
import styled from 'styled-components'
// import SearchBar from './SearchBar';
-import { Row } from 'react-grid-system';
-import { MdInfoOutline } from "react-icons/md"
-import { FaRegPlayCircle } from "react-icons/fa";
+import {Row} from 'react-grid-system';
+import {MdInfoOutline} from "react-icons/md"
+import { FaRegPlayCircle} from "react-icons/fa";
import ModalVideoApresentacao from "./ModalVideoApresentacao.js"
-import { Link } from 'react-router-dom'
+import {Link} from 'react-router-dom'
import Grid from '@material-ui/core/Grid';
import HomeScreenSearchBar from './HomeScreenSearchBar'
-import { Store } from '../Store'
//Image Import
import { banner } from "ImportImages.js";
import { bannerMobile } from "ImportImages.js";
-export default function SearchSection(props) {
- const { state } = useContext(Store)
+export default function SearchSection (props) {
const [modalOpen, handleModal] = useState(false)
- const toggleModal = () => { handleModal(!modalOpen) }
+ const toggleModal = () => {handleModal(!modalOpen)}
const WIDTH = window.innerWidth;
return (
<React.Fragment>
- <ModalVideoApresentacao open={modalOpen} handleClose={toggleModal} />
- <Banner contrast={state.contrast}>
- <StyledGrid container direction="row" justify="center">
- <Grid item style={{ paddingRight: "15px", paddingLeft: "15px", paddingBottom: "120px" }}>
- <div className="title">
- <h2>
- Plataforma MEC de Recursos Educacionais Digitais
- </h2>
- <h3>
- Encontre e compartilhe vÃdeos, animações e muitos outros Recursos
- </h3>
- </div>
- <HomeScreenSearchBar />
- <div className="links">
- <Link to="/sobre">
- <MdInfoOutline size="24px" style={{ verticalAlign: "middle", paddingRight: "5px", color: "white" }} />
- {WIDTH <= 501 ? <span className={`${state.contrast}LinkColor`}>SOBRE</span> : <span className={`${state.contrast}LinkColor`}>SOBRE A PLATAFORMA</span>}
- </Link>
- <span onClick={toggleModal} className={`${state.contrast}LinkColor`} style={{ cursor: "pointer" }}>
- <FaRegPlayCircle size="20px" style={{ verticalAlign: "middle", paddingRight: "5px", color: "white" }} />
+ <ModalVideoApresentacao open={modalOpen} handleClose={toggleModal}/>
+ <Banner>
+ <StyledGrid container direction="row" justify="center">
+ <Grid item style={{paddingRight : "15px", paddingLeft : "15px", paddingBottom : "120px"}}>
+ <div className="title">
+ <h2>
+ Plataforma MEC de Recursos Educacionais Digitais
+ </h2>
+ <h3>
+ Encontre e compartilhe vÃdeos, animações e muitos outros Recursos
+ </h3>
+ </div>
+ <HomeScreenSearchBar/>
+ <div className="links">
+ <Link to="/sobre">
+ <MdInfoOutline size="24px" style={{verticalAlign: "middle", paddingRight : "5px"}}/>
+ {WIDTH <= 501 ? ("SOBRE") : ("SOBRE A PLATAFORMA")}
+ </Link>
+ <span onClick={toggleModal} style={{cursor : "pointer"}}>
+ <FaRegPlayCircle size="20px" style={{verticalAlign: "middle", paddingRight : "5px"}}/>
{WIDTH <= 501 ? ("VÃDEO") : ("VÃDEO DE APRESENTAÇÃO")}
- </span>
- </div>
- </Grid>
- </StyledGrid>
- {
- WIDTH > 501 &&
- <Row justify="center" style={{ marginLeft: 0, marginRight: 0 }}>
- <button className="recurso"
- onClick={() => { props.function("Recursos") }}>
- Recursos Educacionais Digitais
- </button>
-
- <button className="material-formacao"
- onClick={() => { props.function("Materiais") }}>
- Materiais de Formação
- </button>
-
- <button className="colecao"
- onClick={() => { props.function("Colecoes") }}>
- Coleções dos Usuários
- </button>
- </Row>
- }
- </Banner>
- </React.Fragment>
+ </span>
+ </div>
+ </Grid>
+ </StyledGrid>
+ {
+ WIDTH > 501 &&
+ <Row justify="center" style={{marginLeft:0, marginRight:0}}>
+ <button className="recurso"
+ onClick={() => {props.function("Recursos")}}>
+ Recursos Educacionais Digitais
+ </button>
+
+ <button className="material-formacao"
+ onClick={() => {props.function("Materiais")}}>
+ Materiais de Formação
+ </button>
+
+ <button className="colecao"
+ onClick={() => {props.function("Colecoes")}}>
+ Coleções dos Usuários
+ </button>
+ </Row>
+ }
+ </Banner>
+ </React.Fragment>
)
}
const StyledGrid = styled(Grid)`
- margin: 0 auto !important;
+ margin-right : auto !important;
+ margin-left auto !important;
color : #fff !important;
text-align : center !important;
`
@@ -148,9 +147,7 @@ const Banner = styled.div`
line-height: 1.42857143;
width: 25%;
margin-top: 1%;
- color: ${props => props.contrast === "" ? "white" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- border: ${props => props.contrast === "" ? "none" : "1px solid white"};
+ color: white;
padding: 1.2%;
border-width: 5%;
border-style: none;
@@ -159,12 +156,12 @@ const Banner = styled.div`
}
.recurso {
- background-color: ${props => props.contrast === "" ? "#ff7f00" : "black"};
+ background-color : #ff7f00;
}
.material-formacao {
- background-color: ${props => props.contrast === "" ? "#e81f4f" : "black"};
+ background-color : #e81f4f;
}
.colecao {
- background-color: ${props => props.contrast === "" ? "#673ab7" : "black"};
+ background-color : #673ab7;
}
`
diff --git a/src/Components/ShareModal.js b/src/Components/ShareModal.js
index 9e6835e9..f721b4ca 100644
--- a/src/Components/ShareModal.js
+++ b/src/Components/ShareModal.js
@@ -29,7 +29,7 @@ import Twitter from '../img/twitter.svg'
import LinkIcon from '../img/link_icon.svg'
import CloseModalButton from './CloseModalButton.js'
-export default function ShareModal (props) {
+export default function ReportModal (props) {
const textAreaRef = useRef(props.link);
const copyToClipboard = (e) => {
@@ -54,32 +54,30 @@ export default function ShareModal (props) {
}}
>
<Fade in={props.open}>
- <Container className={`${props.contrast}BackColor ${props.contrast}Text ${props.contrast}Border`}>
+ <Container>
<Header>
<span style={{width:"32px"}}/>
- <h2>Compartilhar recurso</h2>
+ <h2>Compartilhar este recurso</h2>
<CloseModalButton handleClose={props.handleClose}/>
</Header>
<Content style={{paddingTop : "0"}}>
<ResourceInfo>
<img src={props.thumb ? apiDomain + props.thumb : require('../img/logo_small.svg')} alt="thumbnail recurso"/>
- <div>
+ <div className="text">
<strong>{props.title}</strong>
+ <span>{props.link}</span>
</div>
</ResourceInfo>
- <div style={{marginTop: "10px"}}>
- <span>{props.link}</span>
- </div>
<ShareInfo>
<Grid container style={{paddingRight : "15px", paddingLeft : "15px"}}>
{/*Share to facebook*/}
- <Grid item xs={6} md={4}>
+ <Grid item xs={4}>
<StyledLink
href={"https://www.facebook.com/sharer/sharer.php?u=" + props.link}
rel="noreferrer"
target="_blank">
- <ShareButton className={`${props.contrast}LinkColor`}>
+ <ShareButton>
<img src={Facebook} alt="facebook-logo"/>
<p>FACEBOOK</p>
</ShareButton>
@@ -87,12 +85,12 @@ export default function ShareModal (props) {
</Grid>
{/*Share to Twitter*/}
- <Grid item xs={6} md={4}>
+ <Grid item xs={4}>
<StyledLink
href={"https://www.twitter.com/intent/tweet?url=" + props.link}
rel="noreferrer"
target="_blank">
- <ShareButton className={`${props.contrast}LinkColor`}>
+ <ShareButton>
<img src={Twitter} alt="twitter-logo"/>
<p>TWITTER</p>
</ShareButton>
@@ -100,10 +98,10 @@ export default function ShareModal (props) {
</Grid>
{/*Get shareable link*/}
- <Grid item xs={12} md={4}>
+ <Grid item xs={4}>
{
document.queryCommandSupported('copy') &&
- <ShareButton className={`${props.contrast}LinkColor`} onClick={copyToClipboard}>
+ <ShareButton onClick={copyToClipboard}>
<img src={LinkIcon} alt="link-icon"/>
<p>COPIAR LINK</p>
<textarea ref={textAreaRef} value={props.link} readOnly style={{height: "0", position: "absolute",zIndex: "-1"}}/>
@@ -145,10 +143,12 @@ const ShareButton = styled(Button)`
const ShareInfo = styled.div`
padding-top : 20px;
+ color : #000;
`
const ResourceInfo = styled.div`
- margin-top : 15px;
+ margin-top : 0;
+ background-color : #f4f4f4;
overflow : hidden;
border-radius : 5px;
display : flex;
@@ -175,7 +175,7 @@ const ResourceInfo = styled.div`
float : left;
padding : 0;
- @media screen and (min-width : 769px) {
+ @media screen and (min-width : 600px) {
margin-right : 20px;
margin-bottom : 0;
}
@@ -184,10 +184,6 @@ const ResourceInfo = styled.div`
}
}
- @media screen and (max-width : 768px) {
- flex-direction : column;
- }
-
`
const Content = styled.div`
@@ -207,6 +203,7 @@ const Header = styled.div`
h2 {
font-size : 26px;
font-weight : lighter;
+ color : #666
}
`
@@ -226,6 +223,7 @@ const StyledModal = styled(Modal)`
const Container = styled.div`
box-sizing : border-box;
box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
+ background-color : white;
align : center;
display : flex;
flex-direction : column;
@@ -241,6 +239,7 @@ const Container = styled.div`
@media screen and (max-width : 699px) {
width : 100%;
+ height : 100%;
}
`
const StyledLink = styled.a`
diff --git a/src/Components/SignUpContainerFunction.js b/src/Components/SignUpContainerFunction.js
index c66d3d43..15974aee 100644
--- a/src/Components/SignUpContainerFunction.js
+++ b/src/Components/SignUpContainerFunction.js
@@ -16,54 +16,55 @@ 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} from "react";
import { Button } from '@material-ui/core';
//import FacebookLogin from 'react-facebook-login';
import CloseIcon from '@material-ui/icons/Close';
import styled from 'styled-components'
-import { device } from './device.js'
+import {device} from './device.js'
import FormInput from "./FormInput.js"
-import { StyledCloseModalButton, DialogContentDiv, DialogHeaderStyled, SocialConnectDiv, H3Div } from './LoginContainerFunction.js'
-import { apiUrl } from '../env.js'
-import { GoogleLoginButton } from './LoginContainerFunction'
+import {StyledCloseModalButton, DialogContentDiv, DialogHeaderStyled, SocialConnectDiv, H3Div} from './LoginContainerFunction.js'
+import {apiUrl} from '../env.js'
+import {GoogleLoginButton} from './LoginContainerFunction'
import ValidateUserInput from './HelperFunctions/FormValidationFunction.js'
import GoogleLogo from "../img/logo_google.svg"
import ReCaptcha from 'react-recaptcha'
-async function handleGoogleAttempt() {
- let request_url = (
+async function handleGoogleAttempt () {
+ console.log("handleGoogleAttempt")
+ let request_url = (
`${apiUrl}/omniauth/google_oauth2?auth_origin_url=` + window.location.href + '&omniauth_window_type=sameWindow&resource_class=User'
)
window.location.replace(request_url)
}
-export default function SignUpContainer(props) {
+export default function SignUpContainer (props) {
const [unavailableButton, setButtonAvailability] = useState(true);
const [formNome, setNome] = useState(
{
- key: false,
- value: "",
+ key : false,
+ value : "",
}
)
const [formEmail, setEmail] = useState(
{
- key: false,
- value: "",
+ key : false,
+ value : "",
}
)
const [formSenha, setSenha] = useState(
{
- key: false,
- value: ""
+ key : false,
+ value : ""
}
)
const [formConfirmation, setConfirmation] = useState(
{
- key: false,
- value: ""
+ key : false,
+ value : ""
}
)
@@ -72,58 +73,54 @@ export default function SignUpContainer(props) {
const flag = ValidateUserInput(type, userInput, confirmation)
if (type === 'username') {
- setNome({
- ...formNome,
- key: flag,
- value: userInput
+ setNome({...formNome,
+ key : flag,
+ value : userInput
})
+ console.log(formNome)
}
- else if (type === 'email') {
- setEmail({
- ...formEmail,
- key: flag,
- value: userInput
+ else if(type === 'email') {
+ setEmail({...formEmail,
+ key : flag,
+ value : userInput
})
+ console.log(formEmail)
}
- else if (type === 'password') {
- setSenha({
- ...formSenha,
- key: flag,
- value: userInput
+ else if(type === 'password') {
+ setSenha({...formSenha,
+ key : flag,
+ value : userInput
})
+ console.log(formSenha)
}
- else if (type === 'confirmation') {
- setConfirmation({
- ...formConfirmation,
- key: flag,
- value: userInput
+ else if(type === 'confirmation') {
+ setConfirmation({...formConfirmation,
+ key : flag,
+ value : userInput
})
+ console.log(formConfirmation)
}
}
const limpaCamposForm = () => {
- setNome({
- ...formNome,
- key: false,
- value: ''
+ setNome({...formNome,
+ key : false,
+ value : ''
})
- setEmail({
- ...formEmail,
- key: false,
- value: ''
+ setEmail({...formEmail,
+ key : false,
+ value : ''
});
- setSenha({
- ...formSenha,
- key: false,
- value: ''
+ setSenha({...formSenha,
+ key : false,
+ value : ''
})
- setConfirmation({
- ...formConfirmation,
- key: false,
- value: ''
+ setConfirmation({...formConfirmation,
+ key : false,
+ value : ''
})
}
@@ -135,7 +132,7 @@ export default function SignUpContainer(props) {
const onSubmit = (e) => {
e.preventDefault();
- const newLogin = { name: formNome.value, email: formEmail.value, password: formSenha.value, senha: formConfirmation.value }
+ const newLogin = {name : formNome.value, email : formEmail.value, password : formSenha.value, senha : formConfirmation.value}
if (!(formNome.key || formEmail.key || formSenha.key || formConfirmation.key)) {
props.handleLoginInfo(newLogin)
@@ -143,42 +140,41 @@ export default function SignUpContainer(props) {
}
}
- function captchaVerified(response) {
+ function captchaVerified (response) {
if (response) {
setButtonAvailability(false)
}
}
return (
- <ContainerStyled contrast={props.contrast}>
+ <ContainerStyled >
<DialogHeaderStyled>
- <span style={{ width: "32px" }} />
- <H2Styled contrast={props.contrast}> Cadastrar-se
+ <span style={{width:"32px"}}/>
+ <H2Styled> Cadastrar-se
</H2Styled>
- <StyledCloseModalButton contrast={props.contrast} onClick={props.handleClose} >
- <CloseIcon className="icon" />
+ <StyledCloseModalButton onClick={props.handleClose} >
+ <CloseIcon />
</StyledCloseModalButton>
</DialogHeaderStyled>
<DialogContentDiv>
<SocialConnectDiv>
- <GoogleLoginButton contrast={props.contrast} onClick={handleGoogleAttempt}>
- <img src={GoogleLogo} alt="google-logo" className="google-logo" />
- <span>Usando o Google</span>
- </GoogleLoginButton>
+ <GoogleLoginButton onClick={handleGoogleAttempt}>
+ <img src={GoogleLogo} alt="google-logo" className="google-logo"/>
+ <span>Usando o Google</span>
+ </GoogleLoginButton>
</SocialConnectDiv>
<H3Div>
- <H3Styled contrast={props.contrast}>
- <RightSideStrikedH3 contrast={props.contrast} />
- <span style={{ verticalAlign: "middle" }}>ou</span>
- <LeftSideStrikedH3 contrast={props.contrast} />
+ <H3Styled>
+ <RightSideStrikedH3/>
+ <span style={{verticalAlign:"middle"}}>ou</span>
+ <LeftSideStrikedH3/>
</H3Styled>
</H3Div>
<form onSubmit={onSubmit}>
<FormInput
- contrast={props.contrast}
inputType={"text"}
name={"name"}
value={formNome.value}
@@ -187,9 +183,8 @@ export default function SignUpContainer(props) {
required={true}
error={formNome.key}
/>
- <br />
+ <br/>
<FormInput
- contrast={props.contrast}
inputType={"text"}
name={"email"}
value={formEmail.value}
@@ -197,11 +192,10 @@ export default function SignUpContainer(props) {
handleChange={e => handleChange(e, 'email')}
required={true}
error={formEmail.key}
- help={formEmail.key ? (formEmail.value.length === 0 ? "Faltou preencher seu e-mail." : <span>Insira um endereço de e-mail válido.<br />Por exemplo: seunome@gmail.com, seunome@hotmail.com</span>) : ""}
- />
- <br />
+ help = {formEmail.key ? (formEmail.value.length === 0 ? "Faltou preencher seu e-mail." : <span>Insira um endereço de e-mail válido.<br/>Por exemplo: seunome@gmail.com, seunome@hotmail.com</span>) : ""}
+ />
+ <br/>
<FormInput
- contrast={props.contrast}
inputType={"password"}
name={"password"}
value={formSenha.value}
@@ -209,11 +203,10 @@ export default function SignUpContainer(props) {
handleChange={e => handleChange(e, 'password')}
required={true}
error={formSenha.key}
- help={formSenha.key ? (formSenha.value.length === 0 ? "Faltou digitar sua senha." : "A senha precisa ter no mÃnimo 8 caracteres.") : ""}
- />
- <br />
+ help = {formSenha.key ? (formSenha.value.length === 0 ? "Faltou digitar sua senha." : "A senha precisa ter no mÃnimo 8 caracteres.") : ""}
+ />
+ <br/>
<FormInput
- contrast={props.contrast}
inputType={"password"}
name={"confirmation"}
value={formConfirmation.value}
@@ -221,10 +214,10 @@ export default function SignUpContainer(props) {
handleChange={e => handleChange(e, 'confirmation', formSenha.value)}
required={true}
error={formConfirmation.key}
- help={formConfirmation.key ? (formConfirmation.value.length === 0 ? "Faltou digitar sua senha." : (formConfirmation.value !== formSenha.value ? "As senhas precisam ser iguais" : "A senha precisa ter no mÃnimo 8 caracteres.")) : ""}
- />
- <br />
- <div style={{ margin: "0 auto", width: "304px" }}>
+ help = {formConfirmation.key ? (formConfirmation.value.length === 0 ? "Faltou digitar sua senha." : (formConfirmation.value !== formSenha.value ? "As senhas precisam ser iguais" : "A senha precisa ter no mÃnimo 8 caracteres.")) : ""}
+ />
+ <br/>
+ <div style={{margin:"0 auto", width: "304px"}}>
{
//<ReCaptcha sitekey={process.env.REACT_APP_SITE_KEY} verifyCallback={captchaVerified} /> //when key set in env
<ReCaptcha sitekey="6LfxuKUUAAAAAIzYpCzEtJyeE8QRjBYa44dvHlTX" verifyCallback={captchaVerified} /> //use this one on production
@@ -232,34 +225,26 @@ export default function SignUpContainer(props) {
}
</div>
<ConfirmContainerStyled>
- {
- !unavailableButton &&
- <StyledSignUpButton contrast={props.contrast} type="submit" variant="contained" disabled={unavailableButton}
- style={unavailableButton ? { backgroundColor: "#e9e9e9" } : props.contrast === "" ? { backgroundColor: "#00bcd4" } : { backgroundColor: "black", color: "yellow", textDecoration: "underline" }}
+ <StyledSignUpButton type="submit" variant="contained" disabled={unavailableButton}
+ style={unavailableButton ? { backgroundColor: "#e9e9e9" } : { backgroundColor: "#00bcd4" }}
+ >
+ <span
+ style={{paddingLeft:"16px", paddingRight:"16px", borderRadius:"3px", boxSizing:"border-box",
+ fontFamily:"Roboto, sans serif", fontWeight:"500", color:"#fff"}}
>
- <span
- style={props.contrast === "" ? {
- paddingLeft: "16px", paddingRight: "16px", borderRadius: "3px", boxSizing: "border-box",
- fontFamily: "Roboto, sans serif", fontWeight: "500", color: "#fff"
- } : {
- paddingLeft: "16px", paddingRight: "16px", borderRadius: "3px", boxSizing: "border-box",
- fontFamily: "Roboto, sans serif", fontWeight: "500", color: "yellow"
- }}
- >
- CADASTRAR
+ CADASTRAR
</span>
- </StyledSignUpButton>
- }
+ </StyledSignUpButton>
</ConfirmContainerStyled>
</form>
- <TermosDeUsoStyled contrast={props.contrast}>
+ <TermosDeUsoStyled>
<p>Ao se cadastrar, você está aceitando os Termos de Uso e de PolÃtica
de Privacidade. <a href="/termos">Ler Termos</a>.</p>
</TermosDeUsoStyled>
<DialogFooterStyled>
- <span style={props.contrast === "" ? { textAlign: "center", fontSize: "14px" } : { textAlign: "center", fontSize: "14px", color: "white" }}>Já possui cadastro? <StyledAnchor contrast={props.contrast} href="" onClick={e => switchModal(e)}>ENTRAR</StyledAnchor></span>
+ <span style={{textAlign:"center", fontSize: "14px"}}>Já possui cadastro? <StyledAnchor href="" onClick={e => switchModal(e)}>ENTRAR</StyledAnchor></span>
</DialogFooterStyled>
</DialogContentDiv>
</ContainerStyled>
@@ -268,22 +253,20 @@ export default function SignUpContainer(props) {
const ContainerStyled = styled.div`
box-sizing : border-box;
- background: ${props => props.contrast === "" ? "white" : "black"};
+ background-color : white;
max-width : none;
align : center;
display : flex;
flex-direction : column;
min-width : 450px;
- border: 1px solid ${props => props.contrast === "" ? "#666" : "white"};
- overflow-y: auto;
- max-height : 90%;
+ max-height : none;
position : relative;
padding : 10px;
@media ${device.mobileM} {
width : 100%;
min-width : unset;
- height : 90%;
+ height : 100%;
min-width : unset !important;
}
@@ -302,21 +285,17 @@ const DialogFooterStyled = styled.div`
const TermosDeUsoStyled = styled.div`
font-family: 'Roboto', sans serif, 'Helvetica Neue', Helvetica, Arial, sans-serif;
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color : #666;
font-size : 13px;
margin : 0 0 10px;
max-width : 350px;
margin-top : 10px;
text-align : start;
- a{
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"}
- }
`
const H2Styled = styled.h2`
align-self : center;
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color : #666;
font-size : 26px;
font-weight : lighter;
justify-content: space-between;
@@ -329,12 +308,12 @@ const H3Styled = styled.h3`
overflow : hidden;
text-align : center;
font-size : 14px;
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color : #666;
margin : 10px 0;
`
const RightSideStrikedH3 = styled.div`
display : inline-block;
- border-bottom: ${props => props.contrast === "" ? "1px dotted #666" : "1px dotted white"};
+ border-bottom: 1px dotted #666;
vertical-align : middle;
font-weight : 500;
margin-right : 5px;
@@ -343,7 +322,7 @@ const RightSideStrikedH3 = styled.div`
const LeftSideStrikedH3 = styled.div`
display : inline-block;
- border-bottom: ${props => props.contrast === "" ? "1px dotted #666" : "1px dotted white"};
+ border-bottom: 1px dotted #666;
vertical-align : middle;
font-weight : 500;
margin-left : 5px;
@@ -351,8 +330,8 @@ const LeftSideStrikedH3 = styled.div`
`
const StyledAnchor = styled.a`
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"}
+ color : #00bcd4;
+ text-decoration : none;
`
//const StyledCloseModalButton = styled(Button)`
// display : inline-block;
@@ -376,7 +355,7 @@ const ConfirmContainerStyled = styled.div`
const StyledSignUpButton = styled(Button)`
box-shadow : none !important;
outline: none !important;
- border: ${props => props.contrast === "" ? "0 !important" : "1px solid white !important"};
+ border : 0 !important;
overflow : hidden !important;
width : 50% !important;
display : inline-block !important;
@@ -387,6 +366,6 @@ const StyledSignUpButton = styled(Button)`
border-radius: 3px !important;
align-self : 50% !important;
:hover {
- background-color: ${props => props.contrast === "" ? "#00acc1 !important" : "rgba(255,255,0,0.24) !important"};
+ background-color : #00acc1 !important;
}
`
diff --git a/src/Components/SignUpModal.js b/src/Components/SignUpModal.js
index 3114f8e5..61c4fb28 100644
--- a/src/Components/SignUpModal.js
+++ b/src/Components/SignUpModal.js
@@ -15,14 +15,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, { useContext, useState } from 'react';
+import React, {useContext, useState} from 'react';
import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop';
import Fade from '@material-ui/core/Fade';
import styled from 'styled-components'
import SignUpContainer from './SignUpContainerFunction.js'
-import { Store } from '../Store.js'
-import { authentication } from './HelperFunctions/getAxiosConfig'
+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'
@@ -31,7 +31,7 @@ export function Alert(props) {
return <MuiAlert elevation={6} variant="filled" {...props} />;
}
-export default function SignUpModal(props) {
+export default function SignUpModal (props) {
const { state, dispatch } = useContext(Store)
const [snackbarOpened, handleSnackbar] = useState(false)
@@ -44,8 +44,8 @@ export default function SignUpModal(props) {
handleSnackbar(false);
}
- function handleSuccess(data) {
- dispatch({
+ function handleSuccess (data) {
+ dispatch ({
type: 'USER_SIGNED_UP',
userLoggedIn: !state.userIsLoggedIn,
user: data.data
@@ -53,17 +53,17 @@ export default function SignUpModal(props) {
props.handleClose()
}
- function handleError(error) {
+ function handleError (error) {
handleSnackbar(true)
}
const handleLoginInfo = (newLogin) => {
const url = `/auth`
const payload = {
- name: newLogin.name,
+ name : newLogin.name,
email: newLogin.email,
- password: newLogin.password,
- password_confirmation: newLogin.senha //,
+ password : newLogin.password,
+ password_confirmation : newLogin.senha //,
// terms_of_service : true,
// avatar: ""
}
@@ -74,7 +74,7 @@ export default function SignUpModal(props) {
return (
<>
<Snackbar open={snackbarOpened} autoHideDuration={1000} onClose={handleCloseSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+ anchorOrigin = {{ vertical:'top', horizontal:'right' }}
>
<Alert severity="error">Ocorreu um erro ao se conectar!</Alert>
</Snackbar>
@@ -93,10 +93,9 @@ export default function SignUpModal(props) {
>
<Fade in={props.open}>
<SignUpContainer
- contrast={state.contrast}
- handleClose={props.handleClose}
- openLogin={props.openLogin}
- handleLoginInfo={handleLoginInfo}
+ handleClose={props.handleClose}
+ openLogin={props.openLogin}
+ handleLoginInfo = {handleLoginInfo}
/>
</Fade>
</StyledModalSignUp>
diff --git a/src/Components/SnackbarComponent.js b/src/Components/SnackbarComponent.js
index 9017c2dc..60692e9c 100644
--- a/src/Components/SnackbarComponent.js
+++ b/src/Components/SnackbarComponent.js
@@ -16,14 +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, { /*useContext*/ } from 'react'
+import React from 'react'
import Alert from '../Components/Alert.js';
import Snackbar from '@material-ui/core/Snackbar';
-//import { Store } from '../Store.js'
export default function SnackbarComponent(props) {
-// const { state } = useContext(Store)
-
return (
<Snackbar open={props.snackbarOpen} autoHideDuration={3000} onClose={props.handleClose}
anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
diff --git a/src/Components/StatsBarFunction.js b/src/Components/StatsBarFunction.js
index 1c5c465e..857c7393 100644
--- a/src/Components/StatsBarFunction.js
+++ b/src/Components/StatsBarFunction.js
@@ -16,17 +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, useContext } from 'react';
+import React, { useState, useEffect } from 'react';
import styled from 'styled-components'
import { apiUrl } from "../env";
import axios from "axios";
import mapaBrasil from '../img/mapa-brasil-line-icon.svg';
import Grid from '@material-ui/core/Grid';
-import { Store } from '../Store';
export default function (props) {
- const { state } = useContext(Store)
-
const [available_resources, setAvailableResources] = useState(0)
const [month_publications, setMonthPublications] = useState(0)
const [month_downloads, setMonthDownloads] = useState(0)
@@ -44,7 +41,7 @@ export default function (props) {
}, [])
return (
- <StatsTab contrast={state.contrast}>
+ <StatsTab>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet" />
<Grid container direction={WINDOW_WIDTH <= 670 ? "column" : "row"} justify="center" alignItems="center" spacing={3}>
<Grid item>
@@ -64,7 +61,7 @@ export default function (props) {
</Grid>
</Grid>
</Grid>
- <Grid item style={WINDOW_WIDTH <= 670 ? { width: "100%" } : null}>
+ <Grid item style={WINDOW_WIDTH <= 670 ? {width: "100%"} : null}>
<StyledDivider />
</Grid>
<Grid item>
@@ -105,9 +102,7 @@ export default function (props) {
const StatsTab = styled.div`
padding : 20px 0;
color : #fff;
- border-top: ${props => props.contrast === "" ? "none" : "1px solid white"};
- border-bottom: ${props => props.contrast === "" ? "none" : "1px solid white"};
- background-color: ${props => props.contrast === "" ? "#00bcd4" : "black"};
+ background-color : #00bcd4;
font-family: 'Roboto', sans-serif;
`
const StyledDivider = styled.div`
diff --git a/src/Components/Stepper.js b/src/Components/Stepper.js
index a50f700c..b1315b98 100644
--- a/src/Components/Stepper.js
+++ b/src/Components/Stepper.js
@@ -1,107 +1,53 @@
-/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
-Departamento de Informatica - Universidade Federal do Parana
-
-This file is part of Plataforma Integrada MEC.
-
-Plataforma Integrada MEC is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-Plataforma Integrada MEC is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-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 from 'react'
import styled from 'styled-components'
-import Check from '@material-ui/icons/Check';
-import Grid from '@material-ui/core/Grid';
-
-export default function CustomizedSteppers(props) {
- function isInFinalSTep(step) {
- return step === 3;
- }
+export default function Stepper (props) {
return (
- <MainGrid contrast={props.contrast} container direction='row' justify='space-between' alignItems='center'>
+ <div style={{display:"flex",justifyContent:"center", marginBottom:"50px"}}>
+ <FeedbackUpload>
{
- !isInFinalSTep(props.activeStep) ?
-
- [0, 1, 2, 3].map((index) => {
- return (
- <Grid item key={new Date().toISOString() + index}>
- <div className={props.activeStep === index ? "currStep" : "step"}>
- {
- index < props.activeStep ?
- <Check style={props.contrast === "" ? { color: "#00bcd4" } : { color: "white" }} /> : index
- }
- </div>
- </Grid>
- )
- })
- :
- [0, 1, 2, 3].map((index) => {
- return (
- <Grid item key={new Date().toISOString() + index}>
- <div className={props.activeStep === index ? "currStep" : "finalStep"}>
- {
- index < props.activeStep ?
- <Check style={{ color: 'white' }} /> :
- <span style={{ color: 'white' }}>
- {index}
- </span>
- }
- </div>
- </Grid>
- )
- })
+ props.items.map((item)=>
+ <div className={"page-selector " + (item.selected ? 'selected' : '')} >
+ {item.value}
+ </div>
+ )
}
- </MainGrid >
- );
+ </FeedbackUpload>
+ </div>
+ )
}
-const MainGrid = styled(Grid)`
- padding: 1em;
- border-radius: 50px;
- width: 90%;
- margin: 0 auto;
- border: ${props => props.contrast === "" ? "2px solid #d4d4d4" : "2px solid white"};
- color: ${props => props.contrast === "" ? "#666" : "white"};
-
- .currStep{
- height: 30px;
- width: 30px;
- display: flex;
- justify-content: center;
- align-items: center;
- border: 2px solid rgba(255, 255, 255, 0.6);
- border-radius: 50%;
+const FeedbackUpload = styled.div`
+ width : 280px;
+ display : flex;
+ background :#e5e5e5;
+ flex-direction : row;
+ justify-content : space-between;
+ height : 50px;
+ align-items : center;
+ padding : 7px;
+ border-radius : 50px;
+ margin-top : 20px;
+
+ .page-selector {
+ height : 36px;
+ width : 36px;
+ background : #fff;
+ border-radius : 50%;
+ color : #00bcd4;
+ line-height : 32px;
+ font-size : 20px;
+ font-weight : 500;
+ border: solid 3px #00bcd4;
+ text-align: center;
+ align-items : center;
+ vertical-align:middle;
}
- .step{
- height: 30px;
- width: 30px;
- display: flex;
- justify-content: center;
- align-items: center;
- border: ${props => props.contrast === "" ? "2px solid #00bcd4" : "2px solid white"};
- border-radius: 50%;
- }
-
- .finalStep{
- height: 30px;
- width: 30px;
- display: flex;
- justify-content: center;
- align-items: center;
- border: 2px solid white;
- border-radius: 50%;
- color: white;
- }
+ .selected {
+ background : #00bcd4;
+ color : #fff;
+ border-color : #00bcd4;
+ }
`
-
diff --git a/src/Components/TabPanels/Breadcrumbs.js b/src/Components/TabPanels/Breadcrumbs.js
index b8d3abe6..1d208986 100644
--- a/src/Components/TabPanels/Breadcrumbs.js
+++ b/src/Components/TabPanels/Breadcrumbs.js
@@ -20,23 +20,29 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React from 'react'
import styled from 'styled-components'
import Breadcrumbs from '@material-ui/core/Breadcrumbs';
-import { Link } from 'react-router-dom';
+import {Link} from 'react-router-dom';
-export default function CustomizedBreadcrumbs(props) {
+export default function CustomizedBreadcrumbs (props) {
return (
<BreadcrumbsDiv>
- <StyledBreadcrumbs contrast={props.contrast}>
- <Link to="/">
+ <StyledBreadcrumbs>
+ <Link to="/" style={{color:"#00bcd4", textDecoration:"none"}}>
Página Inicial
</Link>
{
- props.values.map((value, i) =>
+ props.values.map( (value, i) =>
<span key={i}>
{value}
</span>
)
}
+ {/*<span>
+ {props.currentPage}
+ </span>
+ <span>
+ {props.value}
+ </span> */}
</StyledBreadcrumbs>
</BreadcrumbsDiv>
)
@@ -55,11 +61,7 @@ const StyledBreadcrumbs = styled(Breadcrumbs)`
display : flex;
justify-content : flex-start;
max-width : 1170px;
- a{
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- }
span {
- color: ${props => props.contrast === "" ? "#a5a5a5" : "white"};
+ color : #a5a5a5;
}
`
diff --git a/src/Components/TabPanels/PanelComponents/ButtonsArea.js b/src/Components/TabPanels/PanelComponents/ButtonsArea.js
index ac5ad926..1b8633ae 100644
--- a/src/Components/TabPanels/PanelComponents/ButtonsArea.js
+++ b/src/Components/TabPanels/PanelComponents/ButtonsArea.js
@@ -23,19 +23,19 @@ import Button from '@material-ui/core/Button';
export function ButtonsAreaRecurso(props) {
return (
- <Carregados contrast={props.contrast}>
- <p className="total">
+ <Carregados>
+ <p style={{ margin: "0 0 10px", fontSize: "14px" }}>
{props.sliceLength} recursos carregados de {props.total}
</p>
{
!props.end &&
<React.Fragment>
- <ButtonMostrarMaisRecurso contrast={props.contrast} onClick={() => props.showMore(4)}>
- <span>MOSTRAR MAIS 4</span>
+ <ButtonMostrarMaisRecurso onClick={() => props.showMore(4)}>
+ <span style={{ color: "#fff", fontSize: "14px", fontWeight: "500" }}>MOSTRAR MAIS 4</span>
</ButtonMostrarMaisRecurso>
- <ButtonMostrarTodos contrast={props.contrast} onClick={() => { props.showMore(20) }}>
- <span>MOSTRAR MAIS 20</span>
+ <ButtonMostrarTodos onClick={() => { props.showMore(20) }}>
+ <span style={{ color: "#666", fontSize: "14px", fontWeight: "500" }}>MOSTRAR MAIS 20</span>
</ButtonMostrarTodos>
</React.Fragment>
}
@@ -46,19 +46,19 @@ export function ButtonsAreaRecurso(props) {
export function ButtonsAreaColecao(props) {
return (
- <Carregados contrast={props.contrast}>
- <p className="total">
+ <Carregados>
+ <p style={{ margin: "0 0 10px", fontSize: "14px" }}>
{props.sliceLength} coleções carregadas de {props.total}
</p>
{
!props.end &&
<React.Fragment>
- <ButtonMostrarMaisColecao contrast={props.contrast} onClick={() => { props.showMore(4) }}>
- <span>MOSTRAR MAIS 4</span>
+ <ButtonMostrarMaisColecao onClick={() => { props.showMore(4) }}>
+ <span style={{ color: "#fff", fontSize: "14px", fontWeight: "500" }}>MOSTRAR MAIS 4</span>
</ButtonMostrarMaisColecao>
- <ButtonMostrarTodos contrast={props.contrast} onClick={() => { props.showMore(20) }}>
- <span>MOSTRAR MAIS 20</span>
+ <ButtonMostrarTodos onClick={() => { props.showMore(20) }}>
+ <span style={{ color: "#666", fontSize: "14px", fontWeight: "500" }}>MOSTRAR MAIS 20</span>
</ButtonMostrarTodos>
</React.Fragment>
}
@@ -68,20 +68,20 @@ export function ButtonsAreaColecao(props) {
export function ButtonsAreaRede(props) {
return (
- <Carregados contrast={props.contrast}>
- <p className="total">
+ <Carregados>
+ <p style={{ margin: "0 0 10px", fontSize: "14px" }}>
{props.sliceLength} usuários carregados {props.total}
</p>
{
!props.end &&
<React.Fragment>
- <ButtonMostrarMaisRede contrast={props.contrast} onClick={() => { props.showMore(4) }}>
- <span>MOSTRAR MAIS 4</span>
+ <ButtonMostrarMaisRede onClick={() => { props.showMore(4) }}>
+ <span style={{ color: "#fff", fontSize: "14px", fontWeight: "500" }}>MOSTRAR MAIS 4</span>
</ButtonMostrarMaisRede>
- <ButtonMostrarTodos contrast={props.contrast} onClick={() => { props.showMore(20) }}>
- <span>MOSTRAR MAIS 20</span>
+ <ButtonMostrarTodos onClick={() => { props.showMore(20) }}>
+ <span style={{ color: "#666", fontSize: "14px", fontWeight: "500" }}>MOSTRAR MAIS 20</span>
</ButtonMostrarTodos>
</React.Fragment>
}
@@ -92,29 +92,21 @@ export function ButtonsAreaRede(props) {
const ButtonMostrarTodos = styled(Button)`
&:hover {
- background-color: ${props => props.contrast === "" ? "#d5d5d5 !important" : "rgba(255,255,0,0.24) !important"};
+ background-color : #d5d5d5 !important;
}
height : 36px !important;
padding-left : 16px !important;
padding-right : 16px !important;
font-weight : 500 !important;
border-radius : 3px !important;
- color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
- background-color: ${props => props.contrast === "" ? "#e8e8e8 !important" : "black !important"};
- border: ${props => props.contrast === "" ? 0 : "1px solid white !important"};
+ color :#666 !important;
+ background-color: #e8e8e8 !important;
min-width : 88px !important;
height : 36px !important;
`
const ButtonMostrarMaisRede = styled(Button)`
- &:hover {
- background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
- }
- color: ${props => props.contrast === "" ? "#fff !important" : "yellow !important"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
- background-color: ${props => props.contrast === "" ? "#00bcd4 !important" : "black !important"};
- border: ${props => props.contrast === "" ? 0 : "1px solid white !important"};
+ background-color : #00bcd4 !important;
font-size: 14px !important;
font-weight: 500 !important;
height: 36px !important;
@@ -126,16 +118,11 @@ const ButtonMostrarMaisRede = styled(Button)`
min-width : 88px !important;
vertical-align : middle !important;
margin : 6px 8px !important;
+ text-decoration : none !important;
`
export const ButtonMostrarMaisColecao = styled(Button)`
- &:hover {
- background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
- }
- color: ${props => props.contrast === "" ? "#fff !important" : "yellow !important"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
- background-color: ${props => props.contrast === "" ? "#503096 !important" : "black !important"};
- border: ${props => props.contrast === "" ? 0 : "1px solid white !important"};
+ background-color : #503096 !important;
font-size: 14px !important;
font-weight: 500 !important;
height: 36px !important;
@@ -147,16 +134,11 @@ export const ButtonMostrarMaisColecao = styled(Button)`
min-width : 88px !important;
vertical-align : middle !important;
margin : 6px 8px !important;
+ text-decoration : none !important;
`
export const ButtonMostrarMaisRecurso = styled(Button)`
- &:hover {
- background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
- }
- color: ${props => props.contrast === "" ? "#fff !important" : "yellow !important"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
- background-color: ${props => props.contrast === "" ? "#ff7f00 !important" : "black !important"};
- border: ${props => props.contrast === "" ? 0 : "1px solid white !important"};
+ background-color : #ff7f00 !important;
font-size: 14px !important;
font-weight: 500 !important;
height: 36px !important;
@@ -168,4 +150,5 @@ export const ButtonMostrarMaisRecurso = styled(Button)`
min-width : 88px !important;
vertical-align : middle !important;
margin : 6px 8px !important;
+ text-decoration : none !important;
`
diff --git a/src/Components/TabPanels/PanelComponents/NoContent.js b/src/Components/TabPanels/PanelComponents/NoContent.js
index e0c4be69..f23eb76c 100644
--- a/src/Components/TabPanels/PanelComponents/NoContent.js
+++ b/src/Components/TabPanels/PanelComponents/NoContent.js
@@ -22,16 +22,16 @@ import styled from 'styled-components'
//Image Import
import { defaultNoContent } from "ImportImages.js";
-export default function NoContent({ text, image, contrast }) {
+export default function NoContent({text, image}) {
return (
<DivTextoNoPublications>
<InnerDiv>
<ImgDiv>
- <img alt="" src={image || defaultNoContent} style={{ width: "130px", verticalAlign: "middle", border: "0" }} />
+ <img alt="" src={image || defaultNoContent } style={{ width: "130px", verticalAlign: "middle", border: "0" }} />
</ImgDiv>
<TextDiv>
- <NoPubSpan contrast={contrast}>{text}</NoPubSpan>
+ <NoPubSpan>{text}</NoPubSpan>
</TextDiv>
</InnerDiv>
</DivTextoNoPublications>
@@ -39,7 +39,6 @@ export default function NoContent({ text, image, contrast }) {
}
const NoPubSpan = styled.span`
- color: ${props => props.contrast === "" ? "#666" : "white"};
margin-top : 10px;
font-size : 24px;
font-family : Roboto;
@@ -65,4 +64,10 @@ export const DivTextoNoPublications = styled.div`
padding-left : 15px;
padding-right : 15px;
text-align : center;
-`
\ No newline at end of file
+`
+
+// {/*const DivConteudoNaoPublicado = styled.div`
+// position : relative;
+// top : 50%;
+// transform : translateY(-50%);
+// `*/}
diff --git a/src/Components/TabPanels/PanelComponents/PanelTitle.js b/src/Components/TabPanels/PanelComponents/PanelTitle.js
index 9214c68b..cb139b40 100644
--- a/src/Components/TabPanels/PanelComponents/PanelTitle.js
+++ b/src/Components/TabPanels/PanelComponents/PanelTitle.js
@@ -2,12 +2,12 @@ import React from 'react'
import styled from 'styled-components'
import Grid from '@material-ui/core/Grid';
-export default function PanelTitle(props) {
+export default function PanelTitle (props) {
return (
- <Header container contrast={props.contrast}>
+ <Header container>
<Grid item xs={12}>
- <p className="titulo">{props.title} <b style={{ fontWeight: "500", fontSize: "20px" }}>({props.length})</b></p>
- <hr />
+ <p className="titulo">{props.title} <b style={{fontWeight:"500", fontSize : "20px"}}>({props.length})</b></p>
+ <hr/>
</Grid>
</Header>
)
@@ -21,7 +21,7 @@ const Header = styled(Grid)`
margin : 0;
line-height: normal;
font-style : normal;
- color: ${props => props.contrast === "" ? "#757575" : "white"};
+ color : #757575;
font-size : 1.857em;
padding-left : 15px;
padding-right : 15px;
diff --git a/src/Components/TabPanels/PanelComponents/TemplateColecao.js b/src/Components/TabPanels/PanelComponents/TemplateColecao.js
index f6be7522..b335fbd5 100644
--- a/src/Components/TabPanels/PanelComponents/TemplateColecao.js
+++ b/src/Components/TabPanels/PanelComponents/TemplateColecao.js
@@ -33,7 +33,6 @@ export default function PanelTemplateColecao(props) {
if (followerBoolean) {
return (
<CollectionCardFunction
- contrast={props.contrast}
name={card.name}
collections={card.followable.collection_items}
rating={card.followable.review_average}
@@ -55,7 +54,6 @@ export default function PanelTemplateColecao(props) {
else {
return (
<CollectionCardFunction
- contrast={props.contrast}
name={card.name}
tags={card.tags}
rating={card.review_average}
@@ -75,9 +73,8 @@ export default function PanelTemplateColecao(props) {
}
return (
- <WhiteContainer contrast={props.contrast}>
+ <WhiteContainer>
<Title
- contrast={props.contrast}
title={props.title}
length={props.end}
/>
@@ -85,18 +82,17 @@ export default function PanelTemplateColecao(props) {
{
props.error ?
<p
- className="errorText"
+ style={{ fontSize: "15px", fontWeight: "lighter", margin: "0 0 10px", display: "flex", justifyContent: "center", textAlign: "center" }}
>
Erro ao tentar obter os dados
</p>
:
props.length === 0 ?
(
- <NoContent
- contrast={props.contrast}
- text={props.noContentText}
+ <NoContent
+ text={props.noContentText}
image={ColecaoVazia}
- />
+ />
)
:
(
@@ -112,10 +108,9 @@ export default function PanelTemplateColecao(props) {
</StyledGrid>
{
props.loadingMore ?
- <LoadingSpinner contrast={props.contrast} text={'Carregando coleções...'} />
+ <LoadingSpinner text={'Carregando Recursos...'} />
:
<ButtonsAreaColecao
- contrast={props.contrast}
sliceLength={props.sliceArr.length}
length={props.length}
showMore={props.showMore}
diff --git a/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js b/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js
index b6da514b..d0341573 100644
--- a/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js
+++ b/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js
@@ -26,10 +26,10 @@ import { ButtonsAreaRecurso } from './ButtonsArea'
import LoadingSpinner from '../../LoadingSpinner.js';
export default function Template(props) {
+ console.log(props.sliceArr);
return (
- <WhiteContainer contrast={props.contrast}>
+ <WhiteContainer>
<Title
- contrast={props.contrast}
title={props.titleText}
length={props.end}
/>
@@ -37,7 +37,7 @@ export default function Template(props) {
{
props.error ?
<p
- className="errorText"
+ style={{ fontSize: "15px", fontWeight: "lighter", margin: "0 0 10px", display: "flex", justifyContent: "center", textAlign: "center" }}
>
Erro ao tentar obter os dados
</p>
@@ -45,7 +45,7 @@ export default function Template(props) {
props.length === 0 ?
(
[
- <NoContent contrast={props.contrast} text={props.noContentText} />
+ <NoContent text={props.noContentText} />
]
)
:
@@ -57,7 +57,6 @@ export default function Template(props) {
props.sliceArr.map((card) =>
<Grid item xs={12} sm={6} md={'auto'} lg={3} key={card.id}>
<ResourceCardFunction
- contrast={props.contrast}
avatar={card.submitter.avatar}
id={card.learning_object.id}
thumbnail={card.learning_object.thumbnail}
@@ -78,10 +77,9 @@ export default function Template(props) {
</StyledGrid>
{
props.loadingMore ?
- <LoadingSpinner contrast={props.contrast} text="Carregando recurso..." />
+ <LoadingSpinner text="Carregando recurso..." />
:
<ButtonsAreaRecurso
- contrast={props.contrast}
sliceLength={props.sliceArr.length}
length={props.length}
showMore={props.showMore}
diff --git a/src/Components/TabPanels/PanelComponents/TemplateRecurso.js b/src/Components/TabPanels/PanelComponents/TemplateRecurso.js
index 1243c015..68e1de28 100644
--- a/src/Components/TabPanels/PanelComponents/TemplateRecurso.js
+++ b/src/Components/TabPanels/PanelComponents/TemplateRecurso.js
@@ -31,9 +31,8 @@ import { RecursoVazio } from "ImportImages.js";
export default function Template(props) {
return (
- <WhiteContainer contrast={props.contrast}>
+ <WhiteContainer>
<Title
- contrast={props.contrast}
title={props.titleText}
length={props.end}
/>
@@ -41,7 +40,7 @@ export default function Template(props) {
{
props.error ?
<p
- className="errorText"
+ style={{ fontSize: "15px", fontWeight: "lighter", margin: "0 0 10px", display: "flex", justifyContent: "center", textAlign: "center" }}
>
Erro ao tentar obter os dados
</p>
@@ -49,7 +48,6 @@ export default function Template(props) {
props.length === 0 ?
(
<NoContent
- contrast={props.contrast}
text={props.noContentText}
image={RecursoVazio}
/>
@@ -57,12 +55,11 @@ export default function Template(props) {
:
(
<React.Fragment>
- <StyledGrid container spacing={1} style={{ paddingLeft: "30px", paddingRight: "30px" }}>
+ <StyledGrid container spacing={1} style={{ paddingLeft: "30px", paddingRight: "15px" }}>
{
props.slice.map((card) =>
<Grid item xs={12} sm={6} md={'auto'} lg={3} key={card.id}>
<ResourceCardFunction
- contrast={props.contrast}
key={card.id}
avatar={card.publisher.avatar}
id={card.id}
@@ -84,10 +81,9 @@ export default function Template(props) {
</StyledGrid>
{
props.loadingMore ?
- <LoadingSpinner contrast={props.contrast} text={'Carregando Recursos...'} />
+ <LoadingSpinner text={'Carregando Recursos...'} />
:
<ButtonsAreaRecurso
- contrast={props.contrast}
sliceLength={props.slice.length}
length={props.length}
showMore={props.showMore}
diff --git a/src/Components/TabPanels/PanelComponents/TemplateRede.js b/src/Components/TabPanels/PanelComponents/TemplateRede.js
index 076d525e..e5d2a845 100644
--- a/src/Components/TabPanels/PanelComponents/TemplateRede.js
+++ b/src/Components/TabPanels/PanelComponents/TemplateRede.js
@@ -13,7 +13,6 @@ export default function PanelTemplateRede(props) {
if (followerBoolean) {
return (
<ContactCard
- contrast={props.contrast}
name={card.follower.name}
avatar={card.follower.avatar !== undefined && card.follower.avatar !== "" ? apiDomain + card.follower.avatar : null}
cover={card.follower.cover !== undefined && card.follower.cover !== "" ? apiDomain + card.follower.cover : null}
@@ -29,7 +28,6 @@ export default function PanelTemplateRede(props) {
else {
return (
<ContactCard
- contrast={props.contrast}
name={card.followable.name ? card.followable.name : null}
avatar={card.followable.avatar !== undefined && card.followable.avatar !== "" ? apiDomain + '/' + card.followable.avatar : null}
cover={card.followable.cover !== undefined && card.followable.cover !== "" ? apiDomain + card.followable.cover : null}
@@ -45,10 +43,9 @@ export default function PanelTemplateRede(props) {
}
return (
- <WhiteContainer contrast={props.contrast}>
+ <WhiteContainer>
<Title
- contrast={props.contrast}
title={props.title}
length={props.end}
/>
@@ -59,7 +56,7 @@ export default function PanelTemplateRede(props) {
{
props.error ?
<p
- className="errorText"
+ style={{ fontSize: "15px", fontWeight: "lighter", margin: "0 0 10px", display: "flex", justifyContent: "center", textAlign: "center" }}
>
Erro ao tentar obter os dados
</p>
@@ -67,7 +64,7 @@ export default function PanelTemplateRede(props) {
props.length === 0 ?
(
[
- <NoContent contrast={props.contrast} text={props.noContentText} />
+ <NoContent text={props.noContentText} />
]
)
:
@@ -90,10 +87,9 @@ export default function PanelTemplateRede(props) {
</StyledGrid>
{
props.loadingMore ?
- <LoadingSpinner contrast={props.contrast} text={'Carregando Recursos...'} />
+ <LoadingSpinner text={'Carregando Recursos...'} />
:
<ButtonsAreaRede
- contrast={props.contrast}
sliceLength={props.sliceArr.length}
length={props.length}
showMore={props.showMore}
@@ -106,6 +102,6 @@ export default function PanelTemplateRede(props) {
)
}
- </WhiteContainer >
+ </WhiteContainer>
)
}
diff --git a/src/Components/TabPanels/PublicUserPageTabs/TabColecoes.js b/src/Components/TabPanels/PublicUserPageTabs/TabColecoes.js
index 7f636fcd..9b987347 100644
--- a/src/Components/TabPanels/PublicUserPageTabs/TabColecoes.js
+++ b/src/Components/TabPanels/PublicUserPageTabs/TabColecoes.js
@@ -21,101 +21,100 @@ import { fetchAllRequest, getRequest } from '../../HelperFunctions/getAxiosConfi
import PanelTemplateColecao from '../PanelComponents/TemplateColecao.js'
import LoadingSpinner from '../../LoadingSpinner.js'
-export default function TabColecoes({ id, username, contrast }) {
- const [loading, handleLoading] = useState(true)
-
- const [errorInUserColl, setErrorInUserColl] = useState(false)
-
- const [userCollections, setUserCollections] = useState([])
-
- const [currLimitUserColl, setCurrLimitUserColl] = useState(4)
-
- const [loadingMoreUserColl, setLoadingMoreUserColl] = useState(false);
-
- const [endOfUserColl, setEndOfUserColl] = useState(false);
-
- function handleSuccess(responseArr, headersArr) {
- setErrorInUserColl(responseArr[0].errors ? true : false)
-
- handleLoading(false)
- setUserCollections(responseArr[0])
-
- if (headersArr[0].has('X-Total-Count')) {
- setEndOfUserColl(headersArr[0].get('X-Total-Count'));
+export default function TabColecoes({id, username}) {
+ const [loading, handleLoading] = useState(true)
+
+ const [errorInUserColl, setErrorInUserColl] = useState(false)
+
+ const [userCollections, setUserCollections] = useState([])
+
+ const [currLimitUserColl, setCurrLimitUserColl] = useState(4)
+
+ const [loadingMoreUserColl, setLoadingMoreUserColl] = useState(false);
+
+ const [endOfUserColl, setEndOfUserColl] = useState(false);
+
+ function handleSuccess(responseArr, headersArr) {
+ setErrorInUserColl(responseArr[0].errors ? true : false)
+
+ handleLoading(false)
+ setUserCollections(responseArr[0])
+
+ if (headersArr[0].has('X-Total-Count')) {
+ setEndOfUserColl(headersArr[0].get('X-Total-Count'));
+ }
}
- }
-
- function handleError(error) {
- handleLoading(false)
- setErrorInUserColl(true)
- }
-
- const getInfo = () => {
- const urls = [
- `/users/${id}/collections?offset=0&limit=4`,
- ]
- fetchAllRequest(urls, handleSuccess, handleError)
- }
-
- useEffect(() => {
- handleLoading(true)
- getInfo()
- }, [])
-
- const showMoreUserCollections = (limite) => {
- const limit = limite;
- setLoadingMoreUserColl(true);
- setCurrLimitUserColl(currLimitUserColl + limit)
- const url = `/users/${id}/collections?offset=${currLimitUserColl}&limit=${limit}`;
- getRequest(url,
- (data) => {
- if (data.errors) {
+
+ function handleError(error) {
+ handleLoading(false)
+ setErrorInUserColl(true)
+ }
+
+ const getInfo = () => {
+ const urls = [
+ `/users/${id}/collections?offset=0&limit=4`,
+ ]
+ fetchAllRequest(urls, handleSuccess, handleError)
+ }
+
+ useEffect(() => {
+ handleLoading(true)
+ getInfo()
+ }, [])
+
+ const showMoreUserCollections = (limite) => {
+ const limit = limite;
+ setLoadingMoreUserColl(true);
+ setCurrLimitUserColl(currLimitUserColl + limit)
+ const url = `/users/${id}/collections?offset=${currLimitUserColl}&limit=${limit}`;
+ getRequest(url,
+ (data) => {
+ if (data.errors) {
+ setLoadingMoreUserColl(false);
+ setEndOfUserColl(true)
+ setErrorInUserColl(true)
+ }
+ else if (data.length >= 1) {
+ let currData = [...userCollections];
+ currData = [...currData.concat(data)];
+ setLoadingMoreUserColl(false);
+ setUserCollections(currData);
+ }
+ else {
+ setLoadingMoreUserColl(false);
+ setEndOfUserColl(true)
+ }
+ },
+ (error) => {
setLoadingMoreUserColl(false);
setEndOfUserColl(true)
setErrorInUserColl(true)
}
- else if (data.length >= 1) {
- let currData = [...userCollections];
- currData = [...currData.concat(data)];
- setLoadingMoreUserColl(false);
- setUserCollections(currData);
- }
- else {
- setLoadingMoreUserColl(false);
- setEndOfUserColl(true)
- }
- },
- (error) => {
- setLoadingMoreUserColl(false);
- setEndOfUserColl(true)
- setErrorInUserColl(true)
- }
- )
- }
+ )
+ }
- return (
- <>
- {
- loading ?
- (
- <LoadingSpinner contrast={contrast} text={`Carregando coleções de ${username}`} />
- )
- :
- (
- <PanelTemplateColecao
- contrast={contrast}
- title={"Coleções Públicas"}
- length={userCollections.length}
- noContentText={username + " não possui nenhuma coleção."}
- sliceArr={userCollections}
- showMore={showMoreUserCollections}
- loadingMore={loadingMoreUserColl}
- end={endOfUserColl}
- followed={false}
- error={errorInUserColl}
- />
- )
- }
- </>
- )
+ return (
+ <>
+ {
+ loading ?
+ (
+ <LoadingSpinner text={`Carregando coleções de ${username}`} />
+ )
+ :
+ (
+ <PanelTemplateColecao
+ title={"Coleções Públicas"}
+ length={userCollections.length}
+ noContentText={username + " não possui nenhuma coleção."}
+ sliceArr={userCollections}
+ showMore={showMoreUserCollections}
+ loadingMore={loadingMoreUserColl}
+ end={endOfUserColl}
+ followed={false}
+ error={errorInUserColl}
+ />
+ )
+ }
+ </>
+ )
}
diff --git a/src/Components/TabPanels/PublicUserPageTabs/TabInicio.js b/src/Components/TabPanels/PublicUserPageTabs/TabInicio.js
index ceba6bcb..7965d58e 100644
--- a/src/Components/TabPanels/PublicUserPageTabs/TabInicio.js
+++ b/src/Components/TabPanels/PublicUserPageTabs/TabInicio.js
@@ -60,16 +60,15 @@ export function NoContent(props) {
)
}
-export default function TabInicio({ id, user, learningObjs, collections, contrast }) {
+export default function TabInicio({ id, user, learningObjs, collections }) {
return (
<React.Fragment>
{/*display user description*/}
{
user.description &&
- <UserDescription contrast={contrast} text={user.description} />
+ <UserDescription text={user.description} />
}
<Template
- contrast={contrast}
length={learningObjs.length}
titleText={learningObjs.length === 1 ? `Último Recurso de ${user.name}` : `Últimos recursos de ${user.name}`}
noContentText={`${user.name} não publicou nenhum recursos ainda`}
@@ -80,7 +79,6 @@ export default function TabInicio({ id, user, learningObjs, collections, contras
error={false}
/>
<PanelTemplateColecao
- contrast={contrast}
title={`Últimas coleçoes de ${user.name}`}
length={collections.length}
noContentText={`${user.name} não publicou nenhuma coleção ainda`}
diff --git a/src/Components/TabPanels/PublicUserPageTabs/TabRecursos.js b/src/Components/TabPanels/PublicUserPageTabs/TabRecursos.js
index 70f07ced..b8f38e36 100644
--- a/src/Components/TabPanels/PublicUserPageTabs/TabRecursos.js
+++ b/src/Components/TabPanels/PublicUserPageTabs/TabRecursos.js
@@ -21,7 +21,7 @@ import LoadingSpinner from '../../LoadingSpinner.js'
import Template from '../PanelComponents/TemplateRecurso.js'
import { getRequest } from '../../HelperFunctions/getAxiosConfig'
-export default function TabPanelAtividades({ id, username, contrast }) {
+export default function TabPanelAtividades({id, username}) {
const [loading, handleLoading] = useState(true)
const [errorInLearnObj, setErrorInLearnObj] = useState(false)
@@ -83,14 +83,13 @@ export default function TabPanelAtividades({ id, username, contrast }) {
{
loading ?
(
- <LoadingSpinner contrast={contrast} text={`Carregando os recursos de ${username}`} />
+ <LoadingSpinner text={`Carregando os recursos de ${username}`} />
)
:
(
[
<React.Fragment>
<Template
- contrast={contrast}
length={learningObjects.length}
titleText={learningObjects.length === 1 ? `Recurso publicado de ${username}` : `Recursos publicados ${username}`}
noContentText={`${username} ainda não publicou nenhum Recurso!`}
diff --git a/src/Components/TabPanels/PublicUserPageTabs/TabRede.js b/src/Components/TabPanels/PublicUserPageTabs/TabRede.js
index 15492323..81334d46 100644
--- a/src/Components/TabPanels/PublicUserPageTabs/TabRede.js
+++ b/src/Components/TabPanels/PublicUserPageTabs/TabRede.js
@@ -16,162 +16,160 @@ 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} from 'react'
import PanelTemplateRede from '../PanelComponents/TemplateRede.js'
import { fetchAllRequest, getRequest } from '../../HelperFunctions/getAxiosConfig'
import LoadingSpinner from '../../LoadingSpinner.js'
-export default function TabRede({ id, username, contrast }) {
- const [loading, handleLoading] = useState(true)
-
- const [errorInFollowing, setErrorInFollowing] = useState(false)
- const [errorInFollowers, setErrorInFollowers] = useState(false)
-
- const [followingList, setFollowing] = useState([])
- const [currFollowingLimit, setCurrFollowingLimit] = useState(12)
- const [loadingMoreFollowing, setLoadingFollowing] = useState(false)
- const [endOfFollowing, setEndOfFollowing] = useState(false)
+export default function TabRede ({id, username}) {
+ const [loading, handleLoading] = useState(true)
+
+ const [errorInFollowing, setErrorInFollowing] = useState(false)
+ const [errorInFollowers, setErrorInFollowers] = useState(false)
+
+ const [followingList, setFollowing] = useState([])
+ const [currFollowingLimit, setCurrFollowingLimit] = useState(12)
+ const [loadingMoreFollowing, setLoadingFollowing] = useState(false)
+ const [endOfFollowing, setEndOfFollowing] = useState(false)
+
+ const [followersList, setFollowers] = useState([])
+ const [currFollowerLimit, setFollowersLimit] = useState(12)
+ const [loadingMoreFollowers, setLoadingMoreFollowers] = useState(false)
+ const [endOfFollowers, setEndOfFollowers] = useState(false)
+
+ const showMoreFollowing = (limite) => {
+ setLoadingFollowing(true);
+ const limit = limite;
+ setCurrFollowingLimit(currFollowingLimit + limit)
+ const url = `/users/${id}/following/User?offset=${currFollowingLimit}&limit=${limit}`;
+ getRequest(url,
+ (data) => {
+ if (data.errors) {
+ setLoadingFollowing(false);
+ setEndOfFollowing(true);
+ setErrorInFollowing(true);
+ }
+ else if (data.length >= 1) {
+ let currData = [...followingList];
+ currData = [...currData.concat(data)];
+ setLoadingFollowing(false);
+ setFollowing(currData);
+ }
+ else {
+ setLoadingFollowing(false);
+ setEndOfFollowing(true);
+ }
+ },
+ (error) => {
+ setLoadingFollowing(false);
+ setEndOfFollowing(true);
+ setErrorInFollowing(true);
+ }
+ )
+ }
+
+ const showMoreFollowers = (limite) => {
+ setLoadingMoreFollowers(true);
+ const limit = limite;
+ setFollowersLimit(currFollowerLimit + limit)
+ const url = `/users/${id}/followers?offset=${currFollowerLimit}&limit=${limit}`;
+ getRequest(url,
+ (data) => {
+ if (data.errors) {
+ setLoadingMoreFollowers(false);
+ setEndOfFollowers(true);
+ setErrorInFollowers(true);
+ }
+ else {
+ if (data.length >= 1) {
+ let currData = [...followersList];
+ currData = [...currData.concat(data)];
+ setLoadingMoreFollowers(false);
+ setFollowers(currData);
+ }
+ else {
+ setLoadingMoreFollowers(false);
+ setEndOfFollowers(true)
+ }
+ }
+ },
+ (error) => {
+ setLoadingMoreFollowers(false);
+ setEndOfFollowers(true);
+ setErrorInFollowers(true);
+ }
+ )
+ }
- const [followersList, setFollowers] = useState([])
- const [currFollowerLimit, setFollowersLimit] = useState(12)
- const [loadingMoreFollowers, setLoadingMoreFollowers] = useState(false)
- const [endOfFollowers, setEndOfFollowers] = useState(false)
+ async function handleSuccess (responseArr, headersArr) {
+ setErrorInFollowing(responseArr[0].errors ? true : false) // prevent of crashing the portal, do not remove it
+ setErrorInFollowers(responseArr[1].errors ? true : false) // prevent of crashing the portal, do not remove it
+ setFollowers(responseArr[0])
+ setFollowing(responseArr[1])
- const showMoreFollowing = (limite) => {
- setLoadingFollowing(true);
- const limit = limite;
- setCurrFollowingLimit(currFollowingLimit + limit)
- const url = `/users/${id}/following/User?offset=${currFollowingLimit}&limit=${limit}`;
- getRequest(url,
- (data) => {
- if (data.errors) {
- setLoadingFollowing(false);
- setEndOfFollowing(true);
- setErrorInFollowing(true);
- }
- else if (data.length >= 1) {
- let currData = [...followingList];
- currData = [...currData.concat(data)];
- setLoadingFollowing(false);
- setFollowing(currData);
+ if (headersArr[1].has('X-Total-Count')) {
+ setEndOfFollowing(headersArr[1].get('X-Total-Count'));
}
- else {
- setLoadingFollowing(false);
- setEndOfFollowing(true);
+ if (headersArr[0].has('X-Total-Count')) {
+ setEndOfFollowers(headersArr[0].get('X-Total-Count'));
}
- },
- (error) => {
- setLoadingFollowing(false);
- setEndOfFollowing(true);
- setErrorInFollowing(true);
- }
- )
- }
+ handleLoading(false)
+ }
- const showMoreFollowers = (limite) => {
- setLoadingMoreFollowers(true);
- const limit = limite;
- setFollowersLimit(currFollowerLimit + limit)
- const url = `/users/${id}/followers?offset=${currFollowerLimit}&limit=${limit}`;
- getRequest(url,
- (data) => {
- if (data.errors) {
- setLoadingMoreFollowers(false);
- setEndOfFollowers(true);
- setErrorInFollowers(true);
- }
- else {
- if (data.length >= 1) {
- let currData = [...followersList];
- currData = [...currData.concat(data)];
- setLoadingMoreFollowers(false);
- setFollowers(currData);
- }
- else {
- setLoadingMoreFollowers(false);
- setEndOfFollowers(true)
- }
- }
- },
- (error) => {
+ function handleErrors() {
setLoadingMoreFollowers(false);
setEndOfFollowers(true);
setErrorInFollowers(true);
- }
- )
- }
-
- async function handleSuccess(responseArr, headersArr) {
- setErrorInFollowing(responseArr[0].errors ? true : false) // prevent of crashing the portal, do not remove it
- setErrorInFollowers(responseArr[1].errors ? true : false) // prevent of crashing the portal, do not remove it
- setFollowers(responseArr[0])
- setFollowing(responseArr[1])
-
- if (headersArr[1].has('X-Total-Count')) {
- setEndOfFollowing(headersArr[1].get('X-Total-Count'));
- }
- if (headersArr[0].has('X-Total-Count')) {
- setEndOfFollowers(headersArr[0].get('X-Total-Count'));
}
- handleLoading(false)
- }
- function handleErrors() {
- setLoadingMoreFollowers(false);
- setEndOfFollowers(true);
- setErrorInFollowers(true);
- }
-
- useEffect(() => {
- handleLoading(true)
-
- const urls = [`/users/${id}/followers`, `/users/${id}/following/User`]
-
- fetchAllRequest(urls, handleSuccess, handleErrors)
- }, [])
-
- return (
- <>
- {
- loading ?
- (
- [
- <LoadingSpinner contrast={contrast} text={`Carregando dados de ${username}`} />
- ]
- )
- :
- (
- [
- <React.Fragment>
- <PanelTemplateRede
- contrast={contrast}
- title={`Seguidores de ${username}`}
- length={followersList.length}
- sliceArr={followersList}
- showMore={showMoreFollowers}
- follower={true}
- end={endOfFollowers}
- loadingMore={loadingMoreFollowers}
- error={errorInFollowers}
- noContentText={username + ' não possui nenhum seguidor'}
- />
-
- <PanelTemplateRede
- contrast={contrast}
- title={`${username} está seguindo`}
- length={followingList.length}
- sliceArr={followingList}
- showMore={showMoreFollowing}
- follower={false}
- end={endOfFollowing}
- loadingMore={loadingMoreFollowing}
- error={errorInFollowing}
- noContentText={username + ' não segue nenhum usuário'}
- />
- </React.Fragment>
- ]
- )
- }
- </>
- )
+ useEffect( () => {
+ handleLoading(true)
+
+ const urls = [`/users/${id}/followers`, `/users/${id}/following/User`]
+
+ fetchAllRequest(urls, handleSuccess, handleErrors)
+ }, [])
+
+ return (
+ <>
+ {
+ loading ?
+ (
+ [
+ <LoadingSpinner text={`Carregando dados de ${username}`} />
+ ]
+ )
+ :
+ (
+ [
+ <React.Fragment>
+ <PanelTemplateRede
+ title={`Seguidores de ${username}`}
+ length={followersList.length}
+ sliceArr={followersList}
+ showMore={showMoreFollowers}
+ follower={true}
+ end={endOfFollowers}
+ loadingMore={loadingMoreFollowers}
+ error={errorInFollowers}
+ noContentText={username + ' não possui nenhum seguidor'}
+ />
+
+ <PanelTemplateRede
+ title={`${username} está seguindo`}
+ length={followingList.length}
+ sliceArr={followingList}
+ showMore={showMoreFollowing}
+ follower={false}
+ end={endOfFollowing}
+ loadingMore={loadingMoreFollowing}
+ error={errorInFollowing}
+ noContentText={username + ' não segue nenhum usuário'}
+ />
+ </React.Fragment>
+ ]
+ )
+ }
+ </>
+ )
}
diff --git a/src/Components/TabPanels/PublicUserPageTabs/UserDescription.js b/src/Components/TabPanels/PublicUserPageTabs/UserDescription.js
index df5fcde9..4fcc273f 100644
--- a/src/Components/TabPanels/PublicUserPageTabs/UserDescription.js
+++ b/src/Components/TabPanels/PublicUserPageTabs/UserDescription.js
@@ -19,15 +19,15 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React from 'react'
import styled from 'styled-components'
-export default function UserDescription(props) {
+export default function UserDescription (props) {
return (
- <NoPadBox contrast={props.contrast}>
- <ContainerDiv>
- <DivSobre contrast={props.contrast}>
- <h3>Sobre</h3>
- <p>{props.text}</p>
- </DivSobre>
- </ContainerDiv>
+ <NoPadBox>
+ <ContainerDiv>
+ <DivSobre>
+ <h3>Sobre</h3>
+ <p>{props.text}</p>
+ </DivSobre>
+ </ContainerDiv>
</NoPadBox>
)
}
@@ -49,13 +49,11 @@ const DivSobre = styled.div`
font-family : inherit;
font-weight: 500;
line-height: 1.1;
- color: ${(props) => (props.contrast === "" ? "#666" : "white")};
-
+ color: inherit;
}
p {
margin : 0 0 10px;
- color: ${(props) => (props.contrast === "" ? "#666" : "white")};
}
`
@@ -78,10 +76,9 @@ const NoPadBox = styled.div`
margin-right : auto;
margin-left : auto;
padding : 0;
- background-color: ${(props) => (props.contrast === "" ? "#f4f4f4" : "black")};
+ background-color : #fff;
box-shadow : 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
margin-bottom : 30px;
- border: ${(props) => (props.contrast === "" ? "0" : "1px solid white")};
@media screen and (min-width: 768px) {
width : max-content;
diff --git a/src/Components/TabPanels/StyledComponents.js b/src/Components/TabPanels/StyledComponents.js
index 88b12113..182fd013 100644
--- a/src/Components/TabPanels/StyledComponents.js
+++ b/src/Components/TabPanels/StyledComponents.js
@@ -61,8 +61,7 @@ export const WhiteContainer = styled.div`
flex-direction : column;
margin-left : auto;
margin-right : auto;
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
- border: ${props => props.contrast === "" ? 0 : "1px solid white"};
+ background-color : #fff;
box-shadow : 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
margin-bottom : 30px;
@@ -79,16 +78,6 @@ export const WhiteContainer = styled.div`
@media screen and (max-width: 768px) {
width : auto;
}
-
- .errorText{
- font-size: 15px;
- color: ${props => props.contrast === "" ? "" : "white"}
- font-weight: lighter;
- margin: 0 0 10px;
- display: flex;
- justify-content: center;
- text-align: center;
- }
`
export const StyledGrid = styled(Grid)`
@@ -104,11 +93,6 @@ export const Carregados = styled.div`
position : relative;
margin-right : -15px;
margin-left : -15px;
- .total{
- margin: 0 0 10px;
- font-size: 14px;
- color: ${props => props.contrast === "" ? "" : "white"};
- }
`
export const HeaderGrid = styled(Grid)`
@@ -162,8 +146,7 @@ export const ContainerStyled = styled.div`
/*User page and Public User page components: */
export const HeaderContainer = styled.div`
- background-color: ${props => props.contrast === "" ? "#afeeee" : "black"};
- border: ${props => props.contrast === "" ? 0 : "1px solid white"};
+ background-color : #afeeee;
position : relative;
`
@@ -185,42 +168,22 @@ export const UserProfileContainer = styled.div`
@media screen and (min-width: 768px) and (max-width : 991px) {
width : 750px;
}
- @media screen and (max-width: 600px) {
- width : 100%;
- }
`
export const CoverContainer = styled.div`
- position : relative;
-
- @media screen and (min-width: 1200px) {
- height : 234px;
- }
- @media screen and (min-width: 992px) and (max-width : 1199px){
- height : 194px;
- }
- @media screen and (min-width: 768px) and (max-width : 991px) {
- height : 150px;
- }
- @media screen and (max-width: 600px) {
- height : 128px
- }
+ height : 230px;
+ position : relative;
+ @media screen and (max-width: 600px) {
+ height : 128px
+ }
`
export const UserProfileInfoDiv = styled.div`
- position : absolute;
- bottom : 0;
- left : 260px;
- overflow : hidden;
- margin-bottom : 20px;
- p {
- font-size: 28px;
- color: #fff;
- padding: 5px 10px;
- font-weight: 500;
- border-radius: 5px;
- text-shadow: 0 1px 2px rgba(0,0,0,.45);
- }
+ position : absolute;
+ bottom : 0;
+ left : 260px;
+ overflow : hidden;
+ margin-bottom : 20px;
`
export const CheckTeacherDiv = styled.div`
@@ -228,9 +191,6 @@ export const CheckTeacherDiv = styled.div`
padding-left : 250px;
margin-bottom : -10px;
display : absolute;
- background-color: ${props => props.contrast === "" ? "" : "black"};
- border-left: ${props => props.contrast === "" ? 0 : "1px solid white"};
- border-right: ${props => props.contrast === "" ? 0 : "1px solid white"};
p {
margin : 0 0 10px;
@@ -238,7 +198,6 @@ export const CheckTeacherDiv = styled.div`
font-size: 15px;
line-height: 22px;
text-align: left;
- color: ${props => props.contrast === "" ? "" : "white"};
span {
padding-right : 5px;
@@ -253,20 +212,11 @@ export const CheckTeacherDiv = styled.div`
`
export const StyledTabs = styled(Tabs)`
- .MuiTab-textColorPrimary{
- color: ${props => props.contrast === "" ? "#666" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- font-weight: 400;
- }
.MuiTab-textColorPrimary.Mui-selected {
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- text-decoration: none;
- font-weight: 500;
+ color : #00bcd4;
}
- .MuiTab-textColorPrimary.Mui-disabled {
- color: ${props => props.contrast === "" ? "#bdbdbd" : "white"};
- text-decoration: none;
- font-weight: 400;
+ .PrivateTabIndicator-colorPrimary-4 {
+ background-color : #00bcd4 !important;
}
`
@@ -275,10 +225,6 @@ export const RodapeDiv = styled.div`
flex-direction : row;
justify-content : flex-end;
padding-right : 15px;
- background-color: ${props => props.contrast === "" ? "transparent" : "black"};
- border-left: ${props => props.contrast === "" ? 0 : "1px solid white"};
- border-right: ${props => props.contrast === "" ? 0 : "1px solid white"};
- border-bottom: ${props => props.contrast === "" ? 0 : "1px solid white"};
.report-button {
@media screen and (max-width: 768px) {
@@ -289,7 +235,7 @@ export const RodapeDiv = styled.div`
`
export const NavBarContentContainer = styled(Container)`
- background-color: ${props => props.contrast === "" ? "transparent" : "black"};
+ background-color : transparent;
padding-bottom : 0;
overflow-x : hidden !important;
overflow-y : hiddden !important;
@@ -297,10 +243,10 @@ export const NavBarContentContainer = styled(Container)`
`
export const BackgroundDiv = styled.div`
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color : #666;
font-family : 'Roboto', sans serif;
font-size : 14px;
padding-bottom : 50px;
line-height : 20px;
- background-color: ${props => props.contrast === "" ? " #f4f4f4" : "black"};
+ background : #f4f4f4;
`
diff --git a/src/Components/TabPanels/UserPageTabs/ContainerRedeVazia.js b/src/Components/TabPanels/UserPageTabs/ContainerRedeVazia.js
index 9243b0fb..7a1451b2 100644
--- a/src/Components/TabPanels/UserPageTabs/ContainerRedeVazia.js
+++ b/src/Components/TabPanels/UserPageTabs/ContainerRedeVazia.js
@@ -19,7 +19,7 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React from 'react'
import styled from 'styled-components'
import TabRedeImgDiv from './TabRedeImgDiv.js'
-import { WhiteContainer } from '../StyledComponents.js'
+import {WhiteContainer} from '../StyledComponents.js'
import Grid from '@material-ui/core/Grid';
//Image Import
@@ -30,27 +30,26 @@ import { NoRede3 } from "ImportImages.js";
export default function ContainerRedeVazia (props) {
return (
<React.Fragment>
- <WhiteContainer contrast={props.contrast}>
- <RedeVaziaBoxContainer contrast={props.contrast}>
- <StyledSpan contrast={props.contrast}>
- Você ainda não tem uma rede.
- <br />
- Veja como começar:
+ <WhiteContainer>
+ <RedeVaziaBoxContainer>
+ <StyledSpan>Você ainda não tem uma rede.
+ <br/>
+ Veja como começar:
</StyledSpan>
- <StyledSpan contrast={props.contrast}>
- <StyledHr />
- <Grid container style={{ paddingLeft: "30px", paddingRight: "15px" }}>
- <Grid item md={4} xs={12}>
- <TabRedeImgDiv img={NoRede1} text={"Para encontrar um usuário especÃfico, você pode utilizar a barra de busca e selecionar a busca por \"pessoas\""} />
- </Grid>
+ <StyledSpan>
+ <StyledHr/>
+ <Grid container style={{paddingLeft : "30px", paddingRight : "15px"}}>
+ <Grid item md={4} xs={12}>
+ <TabRedeImgDiv img={NoRede1} text={"Para encontrar um usuário especÃfico, você pode utilizar a barra de busca e selecionar a busca por \"pessoas\""}/>
+ </Grid>
- <Grid item md={4} xs={12}>
- <TabRedeImgDiv img={NoRede2} text={"Você pode começar a seguir uma pessoa clicando no botão \"seguir\" no card (A) ou na página dela (B)"} />
- </Grid>
+ <Grid item md={4} xs={12}>
+ <TabRedeImgDiv img={NoRede2} text={"Você pode começar a seguir uma pessoa clicando no botão \"seguir\" no card (A) ou na página dela (B)"}/>
+ </Grid>
- <Grid item md={4} xs={12}>
- <TabRedeImgDiv img={NoRede3} text={"Pronto! Agora você poderá acompanhar os novos recursos e coleções dessa pessoas na sua página, na aba \"Perfil e Atividades\""} />
- </Grid>
+ <Grid item md={4} xs={12}>
+ <TabRedeImgDiv img={NoRede3} text={"Pronto! Agora você poderá acompanhar os novos recursos e coleções dessa pessoas na sua página, na aba \"Perfil e Atividades\""}/>
+ </Grid>
</Grid>
</StyledSpan>
</RedeVaziaBoxContainer>
@@ -67,7 +66,7 @@ const StyledHr = styled.hr`
`
const RedeVaziaBoxContainer = styled.div`
- background: ${props => props.contrast === "" ? "#fff" : "black"};
+ background-color : #fff;
padding: 30px;
padding-right: 30px;
padding-left: 30px;
@@ -77,16 +76,14 @@ const RedeVaziaBoxContainer = styled.div`
padding-left: 0 !important;
padding-right: 0 !important;
margin-top: 20px;
-`;
-
+}
+`
const StyledSpan = styled.span`
- color: ${props => props.contrast === "" ? "" : "white"};
font-weight : lighter;
margin-top: 0;
font-family: Roboto;
font-size: 24px;
p {
- color: ${props => props.contrast === "" ? "" : "white"};
font-weight : normal;
}
`
diff --git a/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js b/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js
index 19f4c6e4..f8cf40d0 100644
--- a/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js
+++ b/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js
@@ -36,7 +36,7 @@ import { ExcluirAvatar } from "ImportImages.js";
function CloseModalButton (props) {
return (
<StyledCloseModalButton onClick={props.handleClose}>
- <CloseIcon style={props.contrast === "" ? { color: "#666" } : { color: "white" }}/>
+ <CloseIcon/>
</StyledCloseModalButton>
)
}
@@ -46,8 +46,8 @@ export default function ModalExcluirConta (props) {
const [formEmail, setEmail] = useState(
{
- key : true,
- value : "",
+ key : false,
+ value : "",
}
)
const handleChange = (e) => {
@@ -92,19 +92,19 @@ export default function ModalExcluirConta (props) {
}}
>
<Fade in={props.open}>
- <Container contrast={props.contrast}>
+ <Container>
<Header>
<span style={{width:"32px"}}/>
<h2>Excluir a Conta Definitivamente</h2>
<CloseModalButton handleClose={props.handleClose}/>
</Header>
<Content>
- <div style={{display : "flex", flexDirection : "column", textAlign : "left"}}>
+ <div style={{display : "flex", flexDirection : "column", color : "#666", textAlign : "left"}}>
<div style={{display : "flex", flexDirection : "row", margin : "0 30px", justifyContent : "center", alignContent : "center"}}>
<div style={{height : "90px", position : "relative"}}>
<img src={ExcluirAvatar} alt="excluir-avatar" style={{height : "inherit", objectFit : "contain", verticalAlign : "middle"}}/>
</div>
- <p style={{paddingLeft : "10px"}}>Você é muito importante para a rede, ficarÃamos felizes se você ficasse. Quer contar o que aconteceu? Talvez possamos ajudar. <StyledLink to="/contato" className={`${props.contrast}LinkColor`}>Entre em contato.</StyledLink></p>
+ <p style={{paddingLeft : "10px"}}>Você é muito importante para a rede, ficarÃamos felizes se você ficasse. Quer contar o que aconteceu? Talvez possamos ajudar. <StyledLink to="/contato">Entre em contato.</StyledLink></p>
</div>
<p style={{marginTop : "20px"}}>
Saiba que a exclusão da conta removerá o seu perfil permanentemente. Se você publicou algum recurso, ele ainda ficará disponÃvel para os usuários da plataforma.
@@ -113,7 +113,6 @@ export default function ModalExcluirConta (props) {
É necessário que você digite seu e-mail para confirmar a exclusão:
</p>
<FormInput
- contrast={props.contrast}
inputType={"text"}
name={"email"}
value={formEmail.value}
@@ -123,9 +122,9 @@ export default function ModalExcluirConta (props) {
error = {formEmail.key}
help = {formEmail.key ? ( formEmail.value.length === 0 ? "Faltou preencher seu e-mail." : "O e-mail deve ser o mesmo no qual você cadastrou esta conta") : ""}
/>
- <div style={{display : "flex", flexDirection : "row", justifyContent : "space-evenly", paddingTop : "15px"}}>
- <GreyButton contrast={props.contrast} callback={props.handleClose} text={"Cancelar"}/>
- <RedButton contrast={props.contrast} disabled={formEmail.key} onClick = {() => {deleteAccount()}}>EXCLUIR PERMANENTEMENTE</RedButton>
+ <div style={{display : "flex", flexDirection : "row", justifyContent : "space-evenly", paddingTop : "15px"}}>
+ <GreyButton callback={props.handleClose} text={"Cancelar"}/>
+ <RedButton disabled={formEmail.key} onClick = {() => {deleteAccount()}}>EXCLUIR PERMANENTEMENTE</RedButton>
</div>
</div>
</Content>
@@ -137,17 +136,10 @@ export default function ModalExcluirConta (props) {
}
const RedButton = styled(Button)`
- color: ${props => props.contrast === "" ? "white" : "yellow"} !important;
- text-decoration : ${props => props.contrast === "" ? "none" : "underline yellow"} !important;
- background-color : ${props => props.contrast === "" ? "rgb(230,60,60)" : "black"} !important;
+ background-color : rgb(230,60,60) !important;
+ color : #fff !important;
font-weight : bolder;
box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
-
- :disabled {
- color: ${props => props.contrast === "" ? "white" : "white"} !important;
- text-decoration : none !important;
- background-color : ${props => props.contrast === "" ? "#666" : "black"} !important;
- }
`
const Content = styled.div`
@@ -166,6 +158,7 @@ const Header = styled.div`
h2 {
font-size : 26px;
font-weight : lighter;
+ color : #666
}
`
@@ -193,12 +186,9 @@ const StyledModal = styled(Modal)`
`
const Container = styled.div`
- background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
- color: ${props => props.contrast === "" ? "#666" : "white"} !important;
- border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
-
box-sizing : border-box;
box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
+ background-color : white;
align : center;
display : flex;
flex-direction : column;
@@ -220,6 +210,6 @@ const Container = styled.div`
}
`
const StyledLink = styled(Link)`
- text-decoration : none;
- color : #00bcd4;
+ text-decoration : none !important;
+ color : #00bcd4 !important;
`
diff --git a/src/Components/TabPanels/UserPageTabs/PanelAtividades.js b/src/Components/TabPanels/UserPageTabs/PanelAtividades.js
index 7e771677..ff2126a3 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelAtividades.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelAtividades.js
@@ -122,7 +122,6 @@ export default function TabPanelAtividades(props) {
}
}
}
-
useEffect(() => {
const url = `/feed?offset=0&limit=30`
@@ -130,7 +129,7 @@ export default function TabPanelAtividades(props) {
}, [])
return (
- <MainContainerDesktop contrast={props.contrast}>
+ <MainContainerDesktop>
<SnackBar
snackbarOpen={snackInfo.open}
handleClose={handleCloseSnackBar}
@@ -139,133 +138,110 @@ export default function TabPanelAtividades(props) {
text={snackInfo.text}
/>
<Paper elevation={3}>
- <div style={props.contrast === "" ? {} : { backgroundColor: "black" }}>
+ <div>
<DivTitulo>
<InnerDivTitulo>
- <TituloContent contrast={props.contrast}>
+ <TituloContent>
<p style={{ margin: "0 0 10px", marginBottom: "40px" }}>Todas Notificações</p>
</TituloContent>
</InnerDivTitulo>
</DivTitulo>
{
loading ?
- (
- <LoadingSpinner text={'Carregando Atividades'} contrast={props.contrast} />
- )
- :
- (
- [
- <div>
- {
- error ?
- <ErrorP
- contrast={props.contrast}
- >
- Erro ao tentar obter as notificações
- </ErrorP>
- :
- notificatonsLength === 0 ?
- (
+ (
+ <LoadingSpinner text={'Carregando Atividades'} />
+ )
+ :
+ (
+ [
+ <div>
+ {
+ error ?
+ <p
+ style={{ fontSize: "15px", fontWeight: "lighter", margin: "0 0 10px", display: "flex", justifyContent: "center", textAlign: "center" }}
+ >
+ Erro ao tentar obter as notificações
+ </p>
+ :
+ notificatonsLength === 0 ?
+ (
- <NoNotificationsDiv>
- <div>
- <div>
- <img src={Bolo} alt='bolo' style={{ width: "23px", display: "block", marginLeft: "auto", marginRight: "auto" }} />
- <H3Styled contrast={props.contrast}>Você se cadastrou na Plataforma</H3Styled>
- </div>
- <InfoP
- contrast={props.contrast}
- >Construa conosco a plataforma e amplie sua rede de conhecimento interagindo
- <br />com pessoas envolvidas com experiências que ocorrem em todo o Brasil!
- </InfoP>
- </div>
- </NoNotificationsDiv>
+ <NoNotificationsDiv>
+ <div>
+ <div>
+ <img src={Bolo} alt='bolo' style={{ width: "23px", display: "block", marginLeft: "auto", marginRight: "auto" }} />
+ <H3Styled>Você se cadastrou na Plataforma</H3Styled>
+ </div>
+ <p
+ style={{ fontSize: "15px", fontWeight: "lighter", margin: "0 0 10px", display: "flex", justifyContent: "center", textAlign: "center" }}
+ >Construa conosco a plataforma e amplie sua rede de conhecimento interagindo
+ <br />
+ com pessoas envolvidas com experiências que ocorrem em todo o Brasil!
+ </p>
+ </div>
+ </NoNotificationsDiv>
- )
- :
- (
- <>
- <List height={400} width={300}>
- {
- notifications.map((notification, id) =>
- (notification.recipient_type !== "NilClass") &&
- <ActivityListItem
- contrast={props.contrast}
- key={id}
- onMenuBar={false}
- avatar={notification.owner.avatar ? apiDomain + notification.owner.avatar : noAvatar}
- activity={notification.activity}
- actionType={notification.trackable_type}
- objectType={notification.recipient_type}
- createdAt={notification.created_at}
- ownerName={notification.owner.name}
- ownerHref={'/usuario-publico/' + notification.owner.id}
- recipientName={notification.recipient.name}
- recipientHref={"/recurso/" + notification.recipient.id}
- />
- )
- }
- </List>
- {
- loadingMore ?
- <LoadingSpinner contrast={props.contrast} text="Carregando mais atividades..." />
- :
- <Grid container direction="row" alignItems="center" spacing={1}>
- <Grid xs={12} md={12} item style={{ fontSize: "14px", color: "#666" }}>
- <ShowData disabled={true} contrast={props.contrast}>
- Mostrando {notificatonsLength} {notificatonsLength === 1 ? "Atividade " : "Atividades "}de {totalResults}
- </ShowData>
- </Grid>
- <StyledGrid item xs={12} md={12}>
- <LoadMoreButton contrast={props.contrast} onClick={() => { showMore(4) }}>CARREGAR MAIS 4</LoadMoreButton>
- <LoadMoreButton contrast={props.contrast} onClick={() => { showMore(20) }}>CARREGAR MAIS 20</LoadMoreButton>
- </StyledGrid>
- </Grid>
+ )
+ :
+ (
+ <>
+ <List height={400} width={300}>
+ {
+ notifications.map((notification, id) =>
+ (notification.recipient !== null) &&
+ <ActivityListItem
+ key={id}
+ onMenuBar={false}
+ avatar={notification.owner.avatar ? apiDomain + notification.owner.avatar : noAvatar}
+ activity={notification.activity}
+ actionType={notification.trackable_type}
+ objectType={notification.recipient_type}
+ createdAt={notification.created_at}
+ ownerName={notification.owner.name}
+ ownerHref={'/usuario-publico/' + notification.owner.id}
+ recipientName={notification.recipient.name}
+ recipientHref={"/recurso/" + notification.recipient.id}
+ />
+ )
+ }
+ </List>
+ {
+ loadingMore ?
+ <LoadingSpinner text="Carregando mais atividades..." />
+ :
+ <Grid container direction="row" alignItems="center" justify="flex-start">
+ <Grid item xs={12} md={4}>
+ <LoadMoreButton onClick={() => { showMore(4) }}>CARREGAR MAIS 4</LoadMoreButton>
+ </Grid>
+ <Grid item xs={12} md={4}>
+ <LoadMoreButton onClick={() => { showMore(20) }}>CARREGAR MAIS 20</LoadMoreButton>
+ </Grid>
+ <Grid xs={12} md={4} item style={{ fontSize: "14px", color: "#666" }}>
+ <ShowData disabled={true}>
+ Mostrando {notificatonsLength} {notificatonsLength === 1 ? "Atividade " : "Atividades "}
+ de {totalResults}
+ </ShowData>
+ </Grid>
+ </Grid>
+ }
+ </>
+ )
}
- </>
- )
- }
- </div>
- ]
- )
+ </div>
+
+ ]
+ )
}
</div>
</Paper>
</MainContainerDesktop>
)
}
-const StyledGrid = styled(Grid)`
- display: flex;
- align-items: center;
- justify-content: center;
-`
-
-const InfoP = styled.p`
- font-size: "15px";
- font-weight: "lighter";
- margin: "0 0 10px";
- display: "flex";
- justify-content: "center";
- text-align: "center";
- color: ${props => props.contrast === "" ? "" : "white"};
-`
-
-const ErrorP = styled.p`
- font-size: "15px";
- font-weight: "lighter";
- margin: "0 0 10px";
- display: "flex";
- justify-content: "center";
- text-align: "center";
- color: ${props => props.contrast === "" ? "" : "white"};
-`
const MainContainerDesktop = styled.div`
padding : 10px 0 8px 0;
margin-left : auto;
margin-right : auto;
- background-color: ${props => props.contrast === "" ? "" : "black"};
- border: ${props => props.contrast === "" ? "" : "1px solid white"};
@media screen and (min-width: 1200px) {
width : 1170px;
@@ -281,7 +257,7 @@ const MainContainerDesktop = styled.div`
const H3Styled = styled.h3`
font-size: 24px;
font-weight : lighter;
- color: ${props => props.contrast === "" ? "#00bcd4" : "white"};
+ color : #00bcd4;
margin-top : 20px;
margin-bottom : 10px;
display : flex;
@@ -298,34 +274,35 @@ const NoNotificationsDiv = styled.div`
`
const LoadMoreButton = styled(Button)`
- margin-left: 6px !important;
- margin-right: 6px !important;
outline : none !important;
- cursor : pointer !important;
- max-height : 36px !important;
- min-width : 88px !important;
+ display : block !important;
+ cusor : pointer !important;
+ min-height : 36px !important;
+ min-widht : 88px !important;
+ line-height: 36px !important;
vertical-align: middle !important;
- border: ${props => props.contrast === "" ? "" : "1px solid white !important"};
+ border : 0 !important;
padding : 0 px !important;
-
- text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
+ margin : auto !important;
+ text-decoration : none !important;
font-weight : 500 !important;
overflow : hidden !important;
text-transform : uppercase !important;
font-size : 14px !important;
- background : transparent !important;
- color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
+ background : transparent !important;
+ color : #666 !important
&:hover {
- background-color: ${props => props.contrast === "" ? "rgba(158,158,158,0.2) !important" : "rgba(255,255,0,0.24) !important"};
+ background : rgba(158,158,158,0.2) !important
}
`
const ShowData = styled(Button)`
outline : none !important;
display : block !important;
- cursor : pointer !important;
- max-height : 36px !important;
- min-width : 88px !important;
+ cusor : pointer !important;
+ min-height : 36px !important;
+ min-widht : 88px !important;
+ line-height: 36px !important;
vertical-align: middle !important;
border : 0 !important;
padding : 0 px !important;
@@ -336,7 +313,7 @@ const ShowData = styled(Button)`
text-transform : none !important;
font-size : 14px !important;
background : transparent !important;
- color: ${props => props.contrast === "" ? "#666" : "white"} !important;
+ color : #666 !important
&:hover {
background : rgba(158,158,158,0.2) !important
}
@@ -348,7 +325,6 @@ const TituloContent = styled.div`
position : relative;
font-family: Roboto, sans-serif;
font-weight : ligther;
- color: ${props => props.contrast === "" ? "" : "white"};
`
const InnerDivTitulo = styled.div`
diff --git a/src/Components/TabPanels/UserPageTabs/PanelColecoes.js b/src/Components/TabPanels/UserPageTabs/PanelColecoes.js
index 3adaa32c..427a7d5c 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelColecoes.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelColecoes.js
@@ -153,34 +153,33 @@ export default function TabPanelColecoes(props) {
{
loading ?
(
- <LoadingSpinner contrast={props.contrast} text={'CARREGANDO COLEÇÕES'} />
+ <LoadingSpinner text={'CARREGANDO COLEÇÕES'} />
)
:
(
[
<React.Fragment>
<Tentativa
- contrast={props.contrast}
title={"Minhas Coleções"}
length={userCollections.length}
noContentText={
- <StyledNewGrid contrast={props.contrast} direction='column' justify='center' alignItems='center'>
+ <Grid direction='column' justify='center' alignItems='center'>
<Grid item>
<img src={ColecaoVazia} alt="ColecaoVazia" style={{ height: "150px", width: "150px", verticalAlign: "middle", border: "0" }} />
</Grid>
<Grid>
- <span className="title">
- Crie a sua primeira Coleção!
+ <span style={{ fontFamily: "Roboto", fontWeight: "lighter", fontSize: "24px", textAlign: 'center' }}>
+ Criamos a sua primeira Coleção!
</span>
</Grid>
<Grid>
- <p className="explication">
+ <p style={{ fontFamily: "Roboto", fontSize: "16px", margin: "10px 0 0", fontWeight: "normal" }}>
Adicione nela recursos que você queira acessar mais tarde.
<br />
Crie novas coleções clicando no cartão roxo "Criar Colecão".
</p>
</Grid>
- </StyledNewGrid>
+ </Grid>
}
sliceArr={userCollections}
showMore={showMoreUserCollections}
@@ -192,7 +191,6 @@ export default function TabPanelColecoes(props) {
/>
<PanelTemplateColecao
- contrast={props.contrast}
title={"Coleções que você segue"}
length={followedCollections.length}
noContentText={"Você ainda não segue nenhuma coleção."}
@@ -217,36 +215,34 @@ function Tentativa(props) {
if (props.error)
return (
- <WhiteContainer contrast={props.contrast}>
+ <WhiteContainer>
<Title
- contrast={props.contrast}
title={props.title}
length={props.length}
/>
<p
- className="errorText"
+ style={{ fontSize: "15px", fontWeight: "lighter", margin: "0 0 10px", display: "flex", justifyContent: "center", textAlign: "center" }}
>
Erro ao tentar obter os dados
- </p>
+ </p>
</WhiteContainer>
)
else
return (
- <WhiteContainer contrast={props.contrast}>
- <CriarColecaoModal contrast={props.contrast} open={modalOpen} handleClose={() => { handleModal(); props.callback() }} />
+ <WhiteContainer>
+ <CriarColecaoModal open={modalOpen} handleClose={() => { handleModal(); props.callback() }} />
<Title
- contrast={props.contrast}
title={props.title}
length={props.end}
/>
<StyledGrid container spacing={1} style={{ paddingLeft: "30px", paddingRight: "15px" }}>
<Grid item xs={12} sm={6} md={'auto'} lg={3}>
- <CardDiv contrast={props.contrast} onClick={() => { handleModal() }}>
- <div className="background">
+ <CardDiv onClick={() => { handleModal() }}>
+ <div style={{ backgroundColor: "#673ab7", display: "flex", height: "100%", width: "100%", justifyContent: "center", alignItems: "center", cursor: "pointer" }}>
<CreateNewFolderIcon style={{ color: "#fff", fontSize: "70px" }} />
- <p className="action">
+ <p style={{ fontSize: "16px", margin: "0 0 10px", color: "#fff" }}>
CRIAR COLEÇÃO
</p>
</div>
@@ -272,7 +268,6 @@ function Tentativa(props) {
props.sliceArr.map((card) =>
<Grid item xs={12} sm={6} md={'auto'} lg={3} key={card.id}>
<CollectionCardFunction
- contrast={props.contrast}
name={card.name}
tags={card.tags}
rating={card.review_average}
@@ -298,10 +293,9 @@ function Tentativa(props) {
</StyledGrid>
{
props.loadingMore ?
- <LoadingSpinner contrast={props.contrast} text={'Carregando Recursos...'} />
+ <LoadingSpinner text={'Carregando Recursos...'} />
:
<ButtonsAreaColecao
- contrast={props.contrast}
sliceLength={props.sliceArr.length}
length={props.length}
showMore={props.showMore}
@@ -313,45 +307,10 @@ function Tentativa(props) {
)
}
-const StyledNewGrid = styled(Grid)`
-
- .title{
- font-family: Roboto;
- font-weight: lighter;
- font-size: 24px;
- text-align: center;
- color: ${props => props.contrast === "" ? "" : "white"};
- }
- .explication{
- font-family: Roboto;
- font-size: 16px;
- margin: 10px 0 0;
- color: ${props => props.contrast === "" ? "" : "white"};
- font-weight: normal;
- }
-
-`
-
const CardDiv = styled(Card)`
margin-top : 10px;
margin-bottom : 10px;
height : 381px;
width : 272.5px;
- border: ${props => props.contrast === "" ? 0 : "1px solid white"};
-
- .background{
- background-color: ${props => props.contrast === "" ? "#673ab7" : "black"};
- display: flex;
- height: 100%;
- width: 100%;
- justify-content: center;
- align-items: center;
- cursor: pointer;
- }
- .action{
- font-size: 16px;
- margin: 0 0 10px;
- color: ${props => props.contrast === "" ? "#fff" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- }
+ ${'' /* float : left; */}
`
diff --git a/src/Components/TabPanels/UserPageTabs/PanelCuradoria.js b/src/Components/TabPanels/UserPageTabs/PanelCuradoria.js
index d2196091..084f865b 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelCuradoria.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelCuradoria.js
@@ -90,14 +90,13 @@ export default function TabPanelCuradoria(props) {
{
loading ?
(
- <LoadingSpinner contrast={props.contrast} text={"Carregando Recursos"} />
+ <LoadingSpinner text={"Carregando Recursos"} />
)
:
(
[
<React.Fragment>
<TemplateCuradoria
- contrast={props.contrast}
length={curating.length}
titleText={curating.length === 1 ? "Recurso sendo avaliado pela curadoria" : "Recursos sendo avaliados pela curadoria"}
noContentText={"Você não tem nenhum recurso sendo avaliado pelos curadores."}
diff --git a/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js b/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js
index cd49d1a7..3857508b 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js
@@ -117,24 +117,22 @@ export default function TabPanelEditarPerfil(props) {
return (
<React.Fragment>
<ModalAlterarCover
- contrast={state.contrast}
open={open}
handleClose={controlModal}
cover={tempCover}
id={state.currentUser.id}
/>
<ModalAlterarAvatar
- contrast={state.contrast}
open={alterarAvatatarOpen}
handleClose={controlModalAvatar}
userAvatar={state.currentUser.avatar}
id={state.currentUser.id}
/>
<div className="card-config">
- <h1 className="title">Editar Perfil </h1>
+ <h1 style={{ fontWeight: "300" }}>Editar Perfil </h1>
<div className='content-div'>
<div style={{ padding: "0", display: "flex", flexDirection: "column" }}>
- <HeaderContainer contrast={state.contrast}>
+ <HeaderContainer>
<div style={{ position: "relative", height: "100%" }}>
<img src={state.currentUser.cover ? `${apiDomain}` + state.currentUser.cover : null} alt={state.currentUser.cover ? "user cover avatar" : ""} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
<input accept="image/*" style={{ display: "none" }} id="icon-button-file" type="file" onChange={(e) => updateCover(e.target.files)} />
@@ -160,7 +158,6 @@ export default function TabPanelEditarPerfil(props) {
<div style={{ display: "flex", flexDirection: "row", justifyContent: "center" }}>
<form onSubmit={e => handleSubmit(e)}>
<FormInput
- contrast={state.contrast}
inputType={"text"}
name={"Nome Completo"}
value={formNome.value}
@@ -170,7 +167,6 @@ export default function TabPanelEditarPerfil(props) {
error={formNome.key}
/>
<FormInput
- contrast={state.contrast}
inputType={"text"}
name={"Sobre Mim"}
value={formAboutMe.value}
@@ -186,8 +182,8 @@ export default function TabPanelEditarPerfil(props) {
</form>
</div>
<ButtonsDiv>
- <Link to="perfil" ><ButtonCancelar contrast={state.contrast} >CANCELAR</ButtonCancelar></Link>
- <ButtonConfirmar contrast={state.contrast} onClick={e => handleSubmit(e)}>SALVAR ALTERAÇÕES</ButtonConfirmar>
+ <Link to="perfil" ><ButtonCancelar ><span>CANCELAR</span></ButtonCancelar></Link>
+ <ButtonConfirmar onClick={e => handleSubmit(e)}><span>SALVAR ALTERAÇÕES</span></ButtonConfirmar>
</ButtonsDiv>
</div>
</div >
@@ -197,8 +193,10 @@ export default function TabPanelEditarPerfil(props) {
}
const ButtonConfirmar = styled(Button)`
- background-color: ${props => props.contrast === "" ? "#00bcd4 !important" : "black !important"};
+ background-color : #00bcd4 !important;
+ color : #fff !important;
font-family : 'Roboto',sans-serif !important;
+ font-size : 14px !important;
font-weight : 500 !important;
padding-left : 16px !important;
padding-right : 16px !important;
@@ -211,7 +209,7 @@ const ButtonConfirmar = styled(Button)`
font-style : inherit !important;
font-variant : inherit !important;
font-family : inherit !important;
- text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
+ text-decoration : none !important;
overflow : hidden !important;
display : inline-block !important;
position : relative !important;
@@ -224,11 +222,7 @@ const ButtonConfirmar = styled(Button)`
text-align : center !important;
border-radius : 3px !important;
box-sizing : border-box !important;
- color: ${props => props.contrast === "" ? "white !important" : "yellow !important"};
- border: ${props => props.contrast === "" ? "0 !important" : "1px solid white !important"};
- :hover{
- background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
- }
+ border : 0 !important;
`
export const ButtonCancelar = styled(Button)`
@@ -244,7 +238,7 @@ export const ButtonCancelar = styled(Button)`
font-style : inherit !important;
font-variant : inherit !important;
font-family : inherit !important;
- text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
+ text-decoration : none !important;
overflow : hidden !important;
display : inline-block !important;
position : relative !important;
@@ -258,17 +252,18 @@ export const ButtonCancelar = styled(Button)`
border-radius : 3px !important;
box-sizing : border-box !important;
user-select : none !important;
- color: ${props => props.contrast === "" ? "#666" : "yellow !important"};
- background-color: ${props => props.contrast === "" ? "" : "transparent !important"};
+ border : 0 !important;
padding : 0 6px !important;
margin : 6px 8px !important;
+ :hover{
+ background-color : #f1f1f1 !important;
+ }
`
const ButtonsDiv = styled.div`
text-align : right;
margin-top : 80px;
- text-decoration: underline;
`
const ChangeAvatarDiv = styled.div`
@@ -318,8 +313,7 @@ const ProfileAvatarDiv = styled.div`
`
const HeaderContainer = styled.div`
- background: ${props => props.contrast === "" ? "#afeeee" : "black"};
- border: ${props => props.contrast === "" ? "1px solid #afeeee" : "1px solid white"};
+ background-color : #afeeee;
position : relative;
height : 150px;
border-radius : 8px;
diff --git a/src/Components/TabPanels/UserPageTabs/PanelFavoritos.js b/src/Components/TabPanels/UserPageTabs/PanelFavoritos.js
index 4ac34bc7..9cf48988 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelFavoritos.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelFavoritos.js
@@ -134,14 +134,13 @@ export default function TabPanelFavoritos(props) {
{
loading ?
(
- <LoadingSpinner contrast={props.contrast} text={'CARREGANDO...'} />
+ <LoadingSpinner text={'CARREGANDO...'} />
)
:
(
[
<React.Fragment>
<Template
- contrast={props.contrast}
length={likedLearnObjs.length}
titleText={likedLearnObjs.length === 1 ? "Recurso favoritado" : "Recursos favoritados"}
noContentText={"Você não favoritou nenhum recurso ainda"}
@@ -153,7 +152,6 @@ export default function TabPanelFavoritos(props) {
/>
<PanelTemplateColecao
- contrast={props.contrast}
title={"Coleções favoritadas"}
length={likedCollections.length}
noContentText={"Você ainda não curtiu nenhuma coleção."}
diff --git a/src/Components/TabPanels/UserPageTabs/PanelGerenciarConta.js b/src/Components/TabPanels/UserPageTabs/PanelGerenciarConta.js
index 502a5e04..29edb847 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelGerenciarConta.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelGerenciarConta.js
@@ -16,64 +16,59 @@ 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 Paper from '@material-ui/core/Paper';
import FormInput from "../../FormInput.js"
-import { CompletarCadastroButton } from './PanelSolicitarContaProfessor.js'
-import { ButtonCancelar } from './PanelEditarPerfil.js'
+import {CompletarCadastroButton} from './PanelSolicitarContaProfessor.js'
+import {ButtonCancelar} from './PanelEditarPerfil.js'
import ValidateUserInput from '../../HelperFunctions/FormValidationFunction.js'
import ModalExcluirConta from './ModalExcluirConta.js'
-import { Store } from '../../../Store'
-export default function TabPanelGerenciarConta(props) {
- const { state } = useContext(Store)
+export default function TabPanelGerenciarConta (props) {
const [senhaAtual, setSenhaAtual] = useState(
{
- key: false,
- value: localStorage.getItem("@portalmec/senha") || ""
- })
+ key : false,
+ value : localStorage.getItem("@portalmec/senha") || ""
+ })
const [novaSenha, setNovaSenha] = useState(
{
- key: false,
- value: ""
- })
+ key : false,
+ value : ""
+ })
const [novaSenhaConfirmacao, setNovaSenhaConfirmacao] = useState(
{
- key: false,
- value: ""
- })
+ key : false,
+ value : ""
+ })
const [novoEmail, setNovoEmail] = useState(
{
- key: false,
- value: ""
- })
+ key : false,
+ value : ""
+ })
const handleChangeSenha = (e, type) => {
const userInput = e.target.value
const flag = (type === 'confirmacao' ? ValidateUserInput('confirmation', userInput, novaSenha.value) : ValidateUserInput('password', userInput))
- if (type === 'senhaAtual') {
- setSenhaAtual({
- ...senhaAtual,
- key: flag,
- value: userInput
+ if(type === 'senhaAtual') {
+ setSenhaAtual({...senhaAtual,
+ key : flag,
+ value : userInput
})
}
- else if (type === 'novaSenha') {
- setNovaSenha({
- ...novaSenha,
- key: flag,
- value: userInput
+ else if(type === 'novaSenha') {
+ setNovaSenha({...novaSenha,
+ key : flag,
+ value : userInput
})
}
- else if (type === 'confirmacao') {
- setNovaSenhaConfirmacao({
- ...novaSenhaConfirmacao,
- key: flag,
- value: userInput
+ else if (type === 'confirmacao'){
+ setNovaSenhaConfirmacao({...novaSenhaConfirmacao,
+ key : flag,
+ value : userInput
})
}
}
@@ -82,47 +77,43 @@ export default function TabPanelGerenciarConta(props) {
const userInput = e.target.value
const flag = ValidateUserInput('email', userInput)
- setNovoEmail({
- ...novoEmail,
- key: flag,
- value: userInput
+ setNovoEmail({...novoEmail,
+ key : flag,
+ value : userInput
})
}
const limpaCamposForm = () => {
- setSenhaAtual({
- ...senhaAtual,
- key: false,
- value: ''
+ setSenhaAtual({...senhaAtual,
+ key : false,
+ value : ''
})
- setNovaSenha({
- ...novaSenha,
- key: false,
- value: ''
+ setNovaSenha({...novaSenha,
+ key : false,
+ value : ''
})
- setNovaSenhaConfirmacao({
- ...novaSenhaConfirmacao,
- key: false,
- value: ''
+ setNovaSenhaConfirmacao({...novaSenhaConfirmacao,
+ key : false,
+ value : ''
})
}
const onSubmit = (e, type) => {
e.preventDefault()
- if (type === 'senha') {
+ if (type === 'senha'){
if (!(senhaAtual.key || novaSenha.key || novaSenhaConfirmacao.key)) {
- const info = { user: { password: novaSenha.value } }
+ const info = {user : {password : novaSenha.value}}
props.updateUserPassword(info)
limpaCamposForm()
}
}
else {
- const info = { user: { email: novoEmail.value } }
+ const info = {user : {email : novoEmail.value}}
props.updateUserEmail(info)
@@ -134,96 +125,92 @@ export default function TabPanelGerenciarConta(props) {
return (
<>
- <Paper elevation={3} style={{ width: "100%" }}>
- <div className='card-config'>
- <div className='content-div'>
- <h1 className="title">Gerenciar Conta</h1>
- <div style={{ display: "flex", flexDirection: "column" }}>
- <form style={{ margin: "0 0 20px 0" }} onSubmit={e => onSubmit(e, 'senha')}>
- <h4 className="subtitle">Alterar Senha</h4>
- <FormInput
- contrast={state.contrast}
- inputType={"password"}
- name={"Senha Atual"}
- value={senhaAtual.value}
- placeholder={"Senha atual"}
- handleChange={e => handleChangeSenha(e, 'senhaAtual')}
- required={true}
- error={senhaAtual.key}
- help={senhaAtual.key ? "Faltou inserir sua senha atual" : ""}
- />
- <FormInput
- contrast={state.contrast}
- inputType={"password"}
- name={"Nova senha"}
- value={novaSenha.value}
- placeholder={"Nova senha"}
- handleChange={e => handleChangeSenha(e, 'novaSenha')}
- required={true}
- error={novaSenha.key}
- help={novaSenha.key ? (novaSenha.value.length === 0 ? "Faltou definir uma nova senha" : "A senha precisa ter no mÃnimo 8 caracteres.") : ""}
- />
- <FormInput
- contrast={state.contrast}
- inputType={"password"}
- name={"Digite novamente a nova senha"}
- value={novaSenhaConfirmacao.value}
- placeholder={"Digite novamente a nova senha"}
- handleChange={e => handleChangeSenha(e, 'confirmacao')}
- required={true}
- error={novaSenhaConfirmacao.key}
- help={novaSenhaConfirmacao.key ? "As senhas devem ser iguais" : ""}
- />
- <div style={{ display: "flex", flexDirection: "row", justifyContent: "space-evenly" }}>
- <span style={{ paddingTop: "0.7em" }}><a href="recuperar-senha" className="link">Esqueceu a senha?</a></span>
- <div style={{ margin: "0" }}>
- <ButtonCancelar contrast={state.contrast} onClick={limpaCamposForm}>Limpar Campos</ButtonCancelar>
- <CompletarCadastroButton contrast={state.contrast} type="submit">Alterar Senha</CompletarCadastroButton>
- </div>
- </div>
- </form>
+ <Paper elevation={3} style= {{width:"100%"}}>
+ <div className='card-config'>
+ <div className='content-div'>
+ <h1>Gerenciar Conta</h1>
+ <div style={{display : "flex", flexDirection : "column"}}>
+ <form style={{margin : "0 0 20px 0"}} onSubmit={e => onSubmit(e, 'senha')}>
+ <h4 style={{display:"flex", justifyContent:"flex-start", fontSize:"18px"}}>Alterar Senha</h4>
+ <FormInput
+ inputType={"password"}
+ name={"Senha Atual"}
+ value={senhaAtual.value}
+ placeholder={"Senha atual"}
+ handleChange={e => handleChangeSenha(e, 'senhaAtual')}
+ required={true}
+ error={senhaAtual.key}
+ help={ senhaAtual.key ? "Faltou inserir sua senha atual" : ""}
+ />
+ <FormInput
+ inputType={"password"}
+ name={"Nova senha"}
+ value={novaSenha.value}
+ placeholder={"Nova senha"}
+ handleChange={e => handleChangeSenha(e, 'novaSenha')}
+ required={true}
+ error={novaSenha.key}
+ help={ novaSenha.key ? (novaSenha.value.length === 0 ? "Faltou definir uma nova senha" : "A senha precisa ter no mÃnimo 8 caracteres.") : ""}
+ />
+ <FormInput
+ inputType={"password"}
+ name={"Digite novamente a nova senha"}
+ value={novaSenhaConfirmacao.value}
+ placeholder={"Digite novamente a nova senha"}
+ handleChange={e => handleChangeSenha(e, 'confirmacao')}
+ required={true}
+ error={novaSenhaConfirmacao.key}
+ help={ novaSenhaConfirmacao.key ? "As senhas devem ser iguais" : ""}
+ />
+ <div style={{display:"flex", flexDirection:"row", justifyContent:"space-evenly"}}>
+ <span style={{paddingTop:"0.7em"}}><a href="recuperar-senha" style={{textAlign: "flex-start", color:"#00bcd4"}}>Esqueceu a senha?</a></span>
+ <div style={{margin:"0"}}>
+ <ButtonCancelar onClick={limpaCamposForm}>Limpar Campos</ButtonCancelar>
+ <CompletarCadastroButton type="submit">Alterar Senha</CompletarCadastroButton>
+ </div>
</div>
- </div>
+ </form>
</div>
- </Paper>
- <Paper elevation={3} style={{ width: "100%" }}>
- <div className='card-config'>
- <div className='content-div'>
- <div style={{ display: "flex", flexDirection: "column" }}>
- <form onSubmit={(e) => onSubmit(e, 'email')}>
- <h4 className="subtitle">Alterar e-mail</h4>
- <FormInput
- contrast={state.contrast}
- inputType={"text"}
- name={"email"}
- value={novoEmail.value}
- placeholder={"E-mail"}
- handleChange={e => handleChangeEmail(e)}
- required={true}
- error={novoEmail.key}
- />
- <div style={{ margin: "0", display: "flex", justifyContent: "flex-start" }}>
- <CompletarCadastroButton contrast={state.contrast} type="submit">SALVAR ALTERAÇÕES</CompletarCadastroButton>
- </div>
- </form>
+ </div>
+ </div>
+ </Paper>
+ <Paper elevation={3} style= {{width:"100%"}}>
+ <div className='card-config'>
+ <div className='content-div'>
+ <div style={{display : "flex", flexDirection : "column"}}>
+ <form onSubmit={(e) => onSubmit(e, 'email')}>
+ <h4 style={{display:"flex", justifyContent:"flex-start", fontSize:"18px"}}>Alterar e-mail</h4>
+ <FormInput
+ inputType={"text"}
+ name={"email"}
+ value={novoEmail.value}
+ placeholder={"E-mail"}
+ handleChange={e => handleChangeEmail(e)}
+ required={true}
+ error = {novoEmail.key}
+ />
+ <div style={{margin:"0", display:"flex", justifyContent:"flex-start"}}>
+ <CompletarCadastroButton type="submit">SALVAR ALTERAÇÕES</CompletarCadastroButton>
</div>
- </div>
+ </form>
</div>
- </Paper>
- <Paper elevation={3} style={{ width: "100%" }}>
- <div className='card-config'>
- <div className='content-div'>
- <div>
- <h4 className="subtitle">Conta</h4>
- <span style={state.contrast === "" ? { margin: "0", display: "flex", justifyContent: "flex-start" } : { margin: "0", display: "flex", justifyContent: "flex-start", color: "white" }}>Antes de excluir a sua conta, saiba que ela será removida permanentemente.</span>
- </div>
- <div style={{ margin: "0", display: "flex", justifyContent: "flex-start" }}>
- <ModalExcluirConta contrast={state.contrast} open={modalExcluir} handleClose={() => { setModalExcluir(false) }} />
- <ButtonCancelar contrast={state.contrast} style={{backgroundColor: "red", color: "white"}} onClick={() => { setModalExcluir(true) }}>EXCLUIR CONTA</ButtonCancelar>
- </div>
- </div>
+ </div>
+ </div>
+ </Paper>
+ <Paper elevation={3} style= {{width:"100%"}}>
+ <div className='card-config'>
+ <div className='content-div'>
+ <div>
+ <h4 style={{display:"flex", justifyContent:"flex-start", fontSize:"18px"}}>Conta</h4>
+ <span style={{margin:"0", display:"flex", justifyContent:"flex-start"}}>Antes de excluir a sua conta, saiba que ela será removida permanentemente.</span>
+ </div>
+ <div style={{margin:"0", display:"flex", justifyContent:"flex-start"}}>
+ <ModalExcluirConta open={modalExcluir} handleClose={() => {setModalExcluir(false)}}/>
+ <ButtonCancelar style={{color:'#eb4034'}} onClick={() => {setModalExcluir(true)}}>EXCLUIR CONTA</ButtonCancelar>
</div>
- </Paper>
+ </div>
+ </div>
+ </Paper>
</>
)
}
diff --git a/src/Components/TabPanels/UserPageTabs/PanelMeusRecursos.js b/src/Components/TabPanels/UserPageTabs/PanelMeusRecursos.js
index c4cabfee..46400fa1 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelMeusRecursos.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelMeusRecursos.js
@@ -45,7 +45,7 @@ export default function TabPanelAtividades(props) {
const [drafts, setDrafts] = useState([]);
const [curating, setCurating] = useState([]);
- function handleSuccess(responseArr, headersArr) {
+ function handleSuccess(responseArr, headersArr) {
setErrorInLearnObj(responseArr[0].errors ? true : false)
setErrorInDrafts(responseArr[1].errors ? true : false)
setErrorInCurating(responseArr[2].errors ? true : false)
@@ -116,6 +116,7 @@ export default function TabPanelAtividades(props) {
const showMoreDrafts = (limite) => {
setLoadingMoreDrafts(true);
+ console.log(limite);
const limit = limite;
setcurrLimitDrafts(currLimitDrafts + limit)
const url = `/users/${props.id}/drafts?offset=${currLimitDrafts}&limit=${limit}`;
@@ -128,6 +129,7 @@ export default function TabPanelAtividades(props) {
else if (data.length >= 1) {
let currData = [...drafts];
currData = [...currData.concat(data)];
+ console.log('drafs: ', currData);
setLoadingMoreDrafts(false);
setDrafts([...currData]);
}
@@ -176,14 +178,13 @@ export default function TabPanelAtividades(props) {
{
loading ?
(
- <LoadingSpinner contrast={props.contrast} text={'Carregando Recursos'} />
+ <LoadingSpinner text={'Carregando Recursos'} />
)
:
(
[
<React.Fragment>
- <Template
- contrast={props.contrast}
+ <Template
length={learningObjects.length}
titleText={learningObjects.length === 1 ? "Recurso Publicado" : "Recursos Publicados"}
noContentText={"Você ainda não publicou nenhum Recurso!"}
@@ -195,7 +196,6 @@ export default function TabPanelAtividades(props) {
/>
<Template
- contrast={props.contrast}
length={drafts.length}
titleText={drafts.length === 1 ? "Rascunho Publicado" : "Rascunhos Publicados"}
noContentText={"Você não tem nenhum recurso sendo editado."}
@@ -207,7 +207,6 @@ export default function TabPanelAtividades(props) {
/>
<TemplateCuradoria
- contrast={props.contrast}
length={curating.length}
titleText={curating.length === 1 ? "Recurso sendo avaliado pela curadoria" : "Recursos sendo avaliados pela curadoria"}
noContentText={"Você não tem nenhum recurso sendo avaliado pelos curadores."}
diff --git a/src/Components/TabPanels/UserPageTabs/PanelRede.js b/src/Components/TabPanels/UserPageTabs/PanelRede.js
index 5077f98c..ba5741a5 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelRede.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelRede.js
@@ -131,7 +131,7 @@ export default function TabPanelRede(props) {
loading ?
(
[
- <LoadingSpinner contrast={props.contrast} text={'CARREGANDO...'} />
+ <LoadingSpinner text={'CARREGANDO...'} />
]
)
:
@@ -143,7 +143,7 @@ export default function TabPanelRede(props) {
(
[
<>
- <ContainerRedeVazia contrast={props.contrast} />
+ <ContainerRedeVazia />
</>
]
)
@@ -151,7 +151,6 @@ export default function TabPanelRede(props) {
(
<React.Fragment>
<PanelTemplateRede
- contrast={props.contrast}
title={followersList.length === 1 ? "Seguidor" : "Seguidores"}
length={followersList.length}
sliceArr={followersList}
@@ -164,7 +163,6 @@ export default function TabPanelRede(props) {
/>
<PanelTemplateRede
- contrast={props.contrast}
title={"Seguindo"}
length={followingList.length}
sliceArr={followingList}
diff --git a/src/Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js b/src/Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js
index fd0e59f1..6a7aa888 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js
@@ -16,33 +16,30 @@ 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} from 'react'
import { Store } from '../../../Store.js';
import styled from 'styled-components'
import Button from '@material-ui/core/Button';
-import { Link } from 'react-router-dom';
-
-//Image Import
-import { Publicar } from "ImportImages.js";
+import {Link} from 'react-router-dom';
//3 casos
-//Professor nao cadastrado (nao pediu OU submitter_request = rejected)
-//Professor em análise (submitter_request = requested)
-//Professor aceito (submitter_request = accepted)
-export default function TabPanelSolicitarContaProfessor(props) {
+ //Professor nao cadastrado (nao pediu OU submitter_request = rejected)
+ //Professor em análise (submitter_request = requested)
+ //Professor aceito (submitter_request = accepted)
+export default function TabPanelSolicitarContaProfessor (props) {
// eslint-disable-next-line
- const { state, dispatch } = useContext(Store)
+ const {state, dispatch} = useContext(Store)
return (
<div className='card-config'>
<div className='content-div'>
{
- !state.currentUser.roles.some(role => role.name === "teacher") && (state.currentUser.submitter_request === 'default') ?
- (
+ !state.currentUser.roles.some(role => role.name === "teacher") && ( state.currentUser.submitter_request === 'default' || state.currentUser.submitter_request === 'rejected' ) ?
+ (
<div>
- <ImageDiv />
- <StyledH2 contrast={state.contrast}>Você é professor(a) da educação básica e gostaria de colaborar com a Plataforma?</StyledH2>
- <StyledP contrast={state.contrast}>Ao ser identificado como professor(a), você poderá publicar e compartilhar recursos educacionais
+ <ImageDiv/>
+ <StyledH2>Você é professor(a) da educação básica e gostaria de colaborar com a Plataforma?</StyledH2>
+ <StyledP>Ao ser identificado como professor(a), você poderá publicar e compartilhar recursos educacionais
digitais na plataforma com toda a comunidade escolar do paÃs.
</StyledP>
<div>
@@ -50,37 +47,28 @@ export default function TabPanelSolicitarContaProfessor(props) {
pathname: '/termos-publicar-recurso',
state: true
}}>
- <CompletarCadastroButton contrast={state.contrast}>
+ <CompletarCadastroButton >
SIM, COMPLETAR CADASTRO
</CompletarCadastroButton>
</Link>
</div>
</div>
- )
- :
- (
+ )
+ :
+ (
<>
- {
- (() => {
- switch (state.currentUser.submitter_request) {
- case 'requested':
- return (
- <h1 className="title">A sua conta de Professor foi solicitada</h1>
- )
- case 'rejected':
- return (
- <h1 className="title">Sua solicitação foi negada</h1>
- )
- default:
- return (
- <h1 className="title">Você já possui uma conta de Professor</h1>
- )
-
- }
- })()
- }
+ {
+ state.currentUser.submitter_request === 'requested' ?
+ (
+ <h1>A sua conta de Professor foi solicitada</h1>
+ )
+ :
+ (
+ <h1>Você já possui uma conta de Professor</h1>
+ )
+ }
</>
- )
+ )
}
</div>
</div>
@@ -88,8 +76,8 @@ export default function TabPanelSolicitarContaProfessor(props) {
}
export const CompletarCadastroButton = styled(Button)`
- background-color: ${props => props.contrast === "" ? "#00bcd4 !important" : "black !important"};
- color: ${props => props.contrast === "" ? "#fff !important" : "yellow !important"};
+ background-color : #00bcd4 !important;
+ color : #fff !important;
font-family : 'Roboto',sans-serif !important;
font-size : 14px !important;
font-weight : bold !important;
@@ -106,7 +94,7 @@ export const CompletarCadastroButton = styled(Button)`
font-style : inherit !important;
font-variant : inherit !important;
font-family : inherit !important;
- text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
+ text-decoration : none !important;
overflow : hidden !important;
display : inline-block !important;
position : relative !important;
@@ -117,10 +105,7 @@ export const CompletarCadastroButton = styled(Button)`
align-items : center !important;
text-align : center !important;
box-sizing : border-box !important;
- border: ${props => props.contrast === "" ? "0 !important" : "1px solid white !important"};
- :hover{
- background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
- }
+ border : 0 !important;
`
const StyledP = styled.p`
@@ -128,11 +113,9 @@ const StyledP = styled.p`
line-height : 22px;
text-align : left;
padding-bottom : 20px;
- color: ${props => props.contrast === "" ? "" : "white"};
`
const StyledH2 = styled.h2`
- color: ${props => props.contrast === "" ? "" : "white"};
font-weight : 200;
font-size : 26px;
line-height : 36px;
@@ -141,7 +124,7 @@ const StyledH2 = styled.h2`
`
const ImageDiv = styled.div`
- background-image : url(${Publicar});
+ background-image : url(https://plataformaintegrada.mec.gov.br/img/Publicar.png);
display : block;
height : 114px;
background-size : contain;
diff --git a/src/Components/Table.js b/src/Components/Table.js
index e9aca6cc..773a5fff 100644
--- a/src/Components/Table.js
+++ b/src/Components/Table.js
@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import React from 'react';
+import { withStyles, makeStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
@@ -23,97 +23,59 @@ const StyledTableCell = withStyles(theme => ({
},
}))(TableCell);
-const ContrastStyledTableCell = withStyles(theme => ({
- head: {
- backgroundColor: 'black',
- color: '#ffffff',
- border: '1px solid white',
- fontFamily: 'Roboto',
- fontStyle: 'normal',
- fontWeight: 500,
- fontSize: 15,
- letterSpacing: .01
+const StyledTableRow = withStyles(theme => ({
+ root: {
+ '&:nth-of-type(odd)': {
+ backgroundColor: theme.palette.background.default,
+ },
},
- body: {
- fontSize: 14,
- },
-}))(TableCell);
-
-const ContrastStyledTableCellBody = withStyles(theme => ({
- body: {
- fontSize: 14,
- backgroundColor: 'black',
- color: '#ffffff',
- border: '1px solid white',
- fontFamily: 'Roboto',
- fontStyle: 'normal',
- fontWeight: 500,
- letterSpacing: .01
- },
-}))(TableCell);
+}))(TableRow);
+const useStyles = makeStyles({
+ table: {
+ minWidth: 970,
+ },
+});
export default function CustomizedTables(props) {
- const [columns, setColumns] = useState([]);
+ const classes = useStyles();
const onClick = (row) => {
- const { city_name, id, name, state_name } = row
- props.onClickTable(city_name, id, name, state_name)
+ const {city_name, id, name, state_name} = row
+ props.onClickTable(city_name, id, name, state_name)
}
- useEffect(() => {
- const updatedColumns = [...props.columns];
- updatedColumns.splice(2, 2);
- setColumns(updatedColumns);
- }, [])
-
return (
- <>
- <TableContainer component={Paper}>
- <Table aria-label="customized table">
- <TableHead>
- <TableRow>
- {
- columns.map((column) =>
- props.contrast === "" ?
- <StyledTableCell align="left">{column}</StyledTableCell>
- :
- <ContrastStyledTableCell align="left">{column}</ContrastStyledTableCell>
- )
- }
- </TableRow>
- </TableHead>
- <TableBody>
+ <>
+ <TableContainer component={Paper}>
+ <Table className={classes.table} aria-label="customized table">
+ <TableHead>
+ <TableRow>
{
- props.contrast === "" ?
- props.rows.map((row) => {
- return <TableRow onClick={() => onClick(row)} key={row.id}>
- <StyledTableCell component="th" scope="row">
- {row.id}
- </StyledTableCell>
- <StyledTableCell align="left">{row.name}</StyledTableCell>
- {/* <StyledTableCell align="left">{row.state_name}</StyledTableCell>
- <StyledTableCell align="left">{row.city_name}</StyledTableCell> */}
- </TableRow>
- })
- :
- props.rows.map((row) => {
- return <TableRow onClick={() => onClick(row)} key={row.id}>
- <ContrastStyledTableCellBody component="th" scope="row">
- {row.id}
- </ContrastStyledTableCellBody>
- <ContrastStyledTableCellBody align="left">{row.name}</ContrastStyledTableCellBody>
- {/* <ContrastStyledTableCellBody align="left">{row.state_name}</ContrastStyledTableCellBody>
- <ContrastStyledTableCellBody align="left">{row.city_name}</ContrastStyledTableCellBody> */}
- </TableRow>
- })
+ props.columns.map( (column)=>
+ <StyledTableCell align="left">{column}</StyledTableCell>
+ )
}
- </TableBody>
- </Table>
- </TableContainer>
+ </TableRow>
+ </TableHead>
+ <TableBody>
+ {props.rows.map(row => (
+ <>
+ {console.log(row)}
+ <StyledTableRow onClick={() => onClick(row)} key={row.id}>
+ <StyledTableCell component="th" scope="row">
+ {row.id}
+ </StyledTableCell>
+ <StyledTableCell align="left">{row.name}</StyledTableCell>
+ <StyledTableCell align="left">{row.state_name}</StyledTableCell>
+ <StyledTableCell align="left">{row.city_name}</StyledTableCell>
+ </StyledTableRow>
+ </>
+ ))}
+ </TableBody>
+ </Table>
+ </TableContainer>
</>
);
}
-
-
diff --git a/src/Components/TermsPageContent.js b/src/Components/TermsPageContent.js
index bcdcad41..918e040b 100644
--- a/src/Components/TermsPageContent.js
+++ b/src/Components/TermsPageContent.js
@@ -1,168 +1,169 @@
import React from 'react';
import Typography from '@material-ui/core/Typography';
+import CardContent from '@material-ui/core/CardContent';
-export default function TermsPageContent({ contrast }) {
+export default function TermsPageContent () {
return (
- <div style={contrast === "" ? { textAlign: "start", lineHeight: "21px", color: "rgb(102, 102, 102)", padding: "65px" } : { textAlign: "start", lineHeight: "21px", color: "white", padding: "65px", backgroundColor: "black" }}>
- <Typography variant="h4" style={contrast === "" ? { textAlign: "center", color: "rgb(102, 102, 102)" } : { textAlign: "center", color: "white" }}> Antes de Prosseguir, é importante que você leia os <strong>Termos de Uso</strong></Typography>
- <div>
- <div>
- <Typography variant="h3" style={{ textAlign: "center", fontSize: "23px", marginTop: "20px", marginBottom: "10px" }}>
+ <CardContent style={{textAlign: "start", marginBottom: "10px", lineHeight:"21px", color:"rgb(102, 102, 102)", padding:"65px"}}>
+ <Typography variant="h4" style={{textAlign:"center", color:"rgb(102, 102, 102)"}}> Antes de Prosseguir, é importante que você leia os <strong>Termos de Uso</strong></Typography>
+ <div classname="texto-termos">
+ <div classname="title">
+ <Typography variant = "h3" style={{textAlign:"center", fontSize:"23px", marginTop:"20px", marginBottom:"10px"}}>
<strong>TERMOS DE USO </strong>
</Typography>
- <Typography variant="body2" style={contrast === "" ? { textAlign: "center", color: "rgb(102, 102, 102)" } : { textAlign: "center", color: "white" }}>InÃcio da vigência: agosto de 2017</Typography>
+ <Typography variant="body2" style={{fontSize:"15px",textAlign:"center", color:"rgb(102, 102, 102)"}}>InÃcio da vigência: agosto de 2017</Typography>
</div>
<p>Aqui estão os “Termos de Uso†da <strong>Plataforma Integrada de RED do MEC</strong>, isto é, as regras de funcionamento da Plataforma e seus serviços,
- e o que se espera de seus usuários. Por “usuárioâ€, entende-se qualquer pessoa que acesse o domÃnio portal.mec.gov.br, tanto para pesquisa
- (acesso) como para a inclusão de dados e informações (participação) mediante cadastro</p>
+ e o que se espera de seus usuários. Por “usuárioâ€, entende-se qualquer pessoa que acesse o domÃnio portal.mec.gov.br, tanto para pesquisa
+ (acesso) como para a inclusão de dados e informações (participação) mediante cadastro</p>
<p>Fazem parte dos Termos de Uso as polÃticas de responsabilidade, de privacidade e confidencialidade, a licença de uso do conteúdo e as
- informações sobre como reportar violações.</p>
+ informações sobre como reportar violações.</p>
<p>Ao utilizar a <strong>Plataforma Integrada de RED do MEC</strong>, o usuário aceita todas as condições aqui estabelecidas. O uso da Plataforma Integrada de
- RED do MEC implica aceite das condições aqui elencadas.</p>
+ RED do MEC implica aceite das condições aqui elencadas.</p>
<p>Por “serviçoâ€, entende-se qualquer funcionalidade ou ferramenta que permita a interatividade com o usuário, como, por exemplo, usuário subir
- um recurso, postar um comentário, criar uma coleção ou enviar uma mensagem.</p>
+ um recurso, postar um comentário, criar uma coleção ou enviar uma mensagem.</p>
<p>A aceitação destes "Termos de Uso" é indispensável à utilização da <strong>Plataforma Integrada de RED do MEC</strong>. Todos os usuários deverão ler,
- certificar-se de tê-los entendido e aceitar todas as condições neles estabelecidas. Dessa forma, deve ficar claro que a utilização desta
- "<strong>Plataforma Integrada de RED do MEC</strong>" implica aceitação completa deste documento intitulado Termos de Uso. Caso tenha dúvidas sobre os termos,
- utilize o formulário disponÃvel em “Contato†para saná-las.</p>
- <Typography variant="h4" style={contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>
- 1.CaracterÃsticas da <strong>Plataforma Integrada de RED do MEC</strong>
+ certificar-se de tê-los entendido e aceitar todas as condições neles estabelecidas. Dessa forma, deve ficar claro que a utilização desta
+ "<strong>Plataforma Integrada de RED do MEC</strong>" implica aceitação completa deste documento intitulado Termos de Uso. Caso tenha dúvidas sobre os termos,
+ utilize o formulário disponÃvel em “Contato†para saná-las.</p>
+ <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>
+ 1.CaracterÃsticas da <strong>Plataforma Integrada de RED do MEC</strong>
</Typography>
<p>A <strong>Plataforma Integrada de RED do MEC</strong> é um é sÃtio (website) em formato de plataforma interativa colaborativa para propiciar a formação de uma
- rede de pessoas interessadas em usar, criar e compartilhar recursos e materiais educacionais. Seu objetivo é reunir e disponibilizar conteúdos do
- acervo do MEC, antes distribuÃdos em diferentes portais (Portal do Professor, Banco Internacional de Objetos Educacionais, DomÃnio Público e TV Escola),
- conteúdo de organizações parceiras, bem como fomentar espaços de participação, criação e compartilhamento de conhecimento entre usuários para temas
- relacionados à educação básica brasileira.</p>
+ rede de pessoas interessadas em usar, criar e compartilhar recursos e materiais educacionais. Seu objetivo é reunir e disponibilizar conteúdos do
+ acervo do MEC, antes distribuÃdos em diferentes portais (Portal do Professor, Banco Internacional de Objetos Educacionais, DomÃnio Público e TV Escola),
+ conteúdo de organizações parceiras, bem como fomentar espaços de participação, criação e compartilhamento de conhecimento entre usuários para temas
+ relacionados à educação básica brasileira.</p>
<p>A <strong>Plataforma Integrada de RED do MEC</strong> foi criada em software livre, cujas informações para desenvolvedores estão disponÃveis em gitlab.c3sl.ufpr.br/portalmec/portalmec.
- A <strong>Plataforma Integrada de RED do MEC</strong> funciona ao mesmo tempo como repositório e referatório:</p>
+ A <strong>Plataforma Integrada de RED do MEC</strong> funciona ao mesmo tempo como repositório e referatório:</p>
<ul>
- <li style={{ listStyleType: "disc" }}>Repositório: sÃtio na web que armazena conteúdos diversos (texto, áudio, vÃdeo, multimÃdia, etc.). Ou seja, um repositório efetivamente guarda uma cópia do recurso
- educacional. Todos os conteúdos depositados na <strong>Plataforma Integrada de RED do MEC</strong> têm uma licença livre e são considerados Recursos Educacionais Abertos.
- (Veja a seção 4 “Licença de uso do conteúdoâ€).
+ <li style={{listStyleType:"disc"}}>Repositório: sÃtio na web que armazena conteúdos diversos (texto, áudio, vÃdeo, multimÃdia, etc.). Ou seja, um repositório efetivamente guarda uma cópia do recurso
+ educacional. Todos os conteúdos depositados na <strong>Plataforma Integrada de RED do MEC</strong> têm uma licença livre e são considerados Recursos Educacionais Abertos.
+ (Veja a seção 4 “Licença de uso do conteúdoâ€).
</li>
- <li style={{ listStyleType: "disc" }}>Referatório: sÃtio na web que indica ou aponta para conteúdos diversos em sites externos, sem armazená-los.
- Nesse caso, o conteúdo não está armazenado na <strong>Plataforma Integrada de RED do MEC</strong>, que somente indica a localização do recurso através de um link.
- Os conteúdos referenciados podem ser fechados ou abertos. (Veja a seção 4, “Licença de uso do conteúdoâ€).
+ <li style={{listStyleType:"disc"}}>Referatório: sÃtio na web que indica ou aponta para conteúdos diversos em sites externos, sem armazená-los.
+ Nesse caso, o conteúdo não está armazenado na <strong>Plataforma Integrada de RED do MEC</strong>, que somente indica a localização do recurso através de um link.
+ Os conteúdos referenciados podem ser fechados ou abertos. (Veja a seção 4, “Licença de uso do conteúdoâ€).
</li>
</ul>
<p>No que se refere ao Repositório, a <strong>Plataforma Integrada de RED do MEC</strong> disponibiliza recursos educacionais digitais e materiais de formação de seu acervo e
- também permite que usuários (pessoas fÃsicas) depositem (publiquem, façam upload) seus recursos e materiais para serem armazenados, desde que façam seu cadastro,
- disponibilizem as informações necessárias no momento da publicação e respeitem as regras estabelecidas neste Termo.</p>
+ também permite que usuários (pessoas fÃsicas) depositem (publiquem, façam upload) seus recursos e materiais para serem armazenados, desde que façam seu cadastro,
+ disponibilizem as informações necessárias no momento da publicação e respeitem as regras estabelecidas neste Termo.</p>
<p>Os usuários terão acesso a uma variedade de recursos on-line. Para além, mediante cadastro, terão a sua disposição um maior número de funcionalidades, incluindo
- ferramentas de comunicação e interação, mecanismos de consulta, poderão fazer upload e download de recursos educacionais digitais. Poderão utilizar serviços relacionados
- à criação, à consulta e ao acompanhamento de coleções de recursos educacionais digitais de outros usuários, dentre outras funcionalidades. Professores cadastrados e
- identificados poderão ainda fazer upload de RED.</p>
+ ferramentas de comunicação e interação, mecanismos de consulta, poderão fazer upload e download de recursos educacionais digitais. Poderão utilizar serviços relacionados
+ à criação, à consulta e ao acompanhamento de coleções de recursos educacionais digitais de outros usuários, dentre outras funcionalidades. Professores cadastrados e
+ identificados poderão ainda fazer upload de RED.</p>
<p>No que se refere ao Referatório, a <strong>Plataforma Integrada de RED do MEC</strong> indica e organiza links externos para recursos e materiais de terceiros. Os recursos serão
- disponibilizados mediante a adesão aos critérios especÃficos levantados pelo MEC. Para mais informações, utilize a página de Contato da plataforma.</p>
- <Typography variant="h4" style={contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>
- 2. Cadastro e segurança
+ disponibilizados mediante a adesão aos critérios especÃficos levantados pelo MEC. Para mais informações, utilize a página de Contato da plataforma.</p>
+ <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>
+ 2. Cadastro e segurança
</Typography>
<p>A realização de cadastro pode ser exigida como condição para a utilização de determinados ambientes, recursos ou ferramentas.
- O cadastramento de um usuário só será finalizado ao serem preenchidos todos os campos indicados como obrigatórios. Para o registro de sua conta,
- o usuário deverá indicar uma senha e uma identificação, tornando-se responsável por mantê-las em sigilo, assumindo a total responsabilidade pelas atividades
- que se realizam por meio dela. O usuário compromete-se igualmente em sair ("deslogar") de sua conta ao final de cada sessão.</p>
+ O cadastramento de um usuário só será finalizado ao serem preenchidos todos os campos indicados como obrigatórios. Para o registro de sua conta,
+ o usuário deverá indicar uma senha e uma identificação, tornando-se responsável por mantê-las em sigilo, assumindo a total responsabilidade pelas atividades
+ que se realizam por meio dela. O usuário compromete-se igualmente em sair ("deslogar") de sua conta ao final de cada sessão.</p>
<p>Além das informações básicas, aos professores que quiserem ter a sua identidade verificada - o que o permitirá depositar recursos na plataforma (fazer upload) -
- será necessário identificar a escola da rede em que atua. A mesma informação será verificada a partir dos dados do Censo Escolar.</p>
+ será necessário identificar a escola da rede em que atua. A mesma informação será verificada a partir dos dados do Censo Escolar.</p>
<p>A <strong>Plataforma Integrada de RED do MEC</strong> não se responsabiliza pelas informações inseridas por seus usuários. Os usuários garantem e respondem,
- em qualquer caso, pela veracidade, exatidão e autenticidade dos dados pessoais cadastrados. A <strong>Plataforma Integrada de RED do MEC</strong> se reserva o direito de conferir a
- identificação de seus usuários, bem como de solicitar dados adicionais e documentos que julgue pertinentes, a fim de verificar os dados pessoais informados caso julgue necessário.</p>
+ em qualquer caso, pela veracidade, exatidão e autenticidade dos dados pessoais cadastrados. A <strong>Plataforma Integrada de RED do MEC</strong> se reserva o direito de conferir a
+ identificação de seus usuários, bem como de solicitar dados adicionais e documentos que julgue pertinentes, a fim de verificar os dados pessoais informados caso julgue necessário.</p>
<p>Para acessar sua conta, o usuário deverá identificar-se por meio de e-mail e senha. O usuário compromete-se a não informar a terceiros sua senha, responsabilizando-se integral e
- exclusivamente pelo uso que dela seja feito e pelas operações efetuadas em sua conta.</p>
+ exclusivamente pelo uso que dela seja feito e pelas operações efetuadas em sua conta.</p>
<p>O usuário compromete-se a notificar a <strong>Plataforma Integrada de RED do MEC</strong>, por meio da funcionalidade “Contatoâ€, sobre qualquer uso não autorizado de sua conta, assim como sobre o seu
- acesso por terceiros não autorizados.</p>
+ acesso por terceiros não autorizados.</p>
<p>Contas de usuários com informações consideradas inadequadas pela <strong>Plataforma Integrada de RED do MEC</strong>, conforme as cláusulas destes Termos de Uso, poderão ser desativadas, removidas ou
- ter seu conteúdo bloqueado por decisão do Ministério da Educação. O usuário será notificado através do seu e-mail de cadastro.</p>
+ ter seu conteúdo bloqueado por decisão do Ministério da Educação. O usuário será notificado através do seu e-mail de cadastro.</p>
<p>A criação de conta ou a disponibilização de conteúdo na <strong>Plataforma Integrada de RED do MEC</strong> não geram nenhum direito de suporte técnico ou de indenização por dificuldades
- técnicas ou falhas nos sistemas. O cancelamento, a suspensão, a perda de dados armazenados, a indisponibilidade ou outra situação adversa que afete o acesso, os dados ou o conteúdo do usuário não ensejarão qualquer tipo de reparação, compensação ou outra obrigação.</p>
+ técnicas ou falhas nos sistemas. O cancelamento, a suspensão, a perda de dados armazenados, a indisponibilidade ou outra situação adversa que afete o acesso, os dados ou o conteúdo do usuário não ensejarão qualquer tipo de reparação, compensação ou outra obrigação.</p>
<p>A <strong>Plataforma Integrada de RED do MEC</strong> não se responsabiliza por qualquer dano, prejuÃzo ou perda no equipamento do usuário causado por falhas no sistema, no servidor ou na
- internet decorrentes de condutas de terceiros, de vÃrus por acesso, da utilização ou navegação na internet ou da transferência de dados.</p>
- <Typography variant="h4" style={contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>
- 3. Publicações de usuários
- </Typography>
+ internet decorrentes de condutas de terceiros, de vÃrus por acesso, da utilização ou navegação na internet ou da transferência de dados.</p>
+ <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>
+ 3. Publicações de usuários
+ </Typography>
<p>O conteúdo disponibilizado pelo usuário é de inteira responsabilidade do usuário, não sendo a <strong>Plataforma Integrada de RED do MEC</strong> responsável por quaisquer fatos decorrentes de sua utilização.</p>
<p>Os recursos publicados devem ter cunho educacional, mantendo-se dentro do assunto em que estão inseridos, em conformidade com estes Termos de Uso.</p>
<p>Todas as informações publicadas na <strong>Plataforma Integrada de RED do MEC</strong>, como os metadados (descritivos dos recursos), comentários e discussões inseridas são consideradas públicas, visÃveis por qualquer pessoa, sem nenhum tipo de confidencialidade. Não serão aceitos materiais que contenham vocabulário ofensivo ou desrespeitoso a terceiros, incluindo ofensas, calúnias, injúrias e difamações. Também não serão permitidos materiais que invadam a privacidade de terceiros, que sejam ameaçadoras, preconceituosas ou racistas.</p>
<p>Caso o usuário entenda que alguma postagem, material, notÃcia, comentário ou outro conteúdo disponibilizado na <strong>Plataforma Integrada de RED do MEC</strong> violem algum direito seu, a legislação aplicável ou as cláusulas deste Termos de Uso, deverá notificar a <strong>Plataforma Integrada de RED do MEC</strong> por meio da funcionalidade “Reportar†ou, quando não houver, através do formulário de Contato.</p>
<p>O spam (mensagens não solicitadas) ou o abuso em comentários poderão ser ativamente prevenidos através do bloqueio de palavras e expressões predeterminadas, ou excluÃdos posteriormente, sendo cabÃvel a remoção da conta do usuário, no caso de tentativas de violação sistemática e repetitiva destes Termos de Uso, incluindo a reintrodução de material que já tenha sido previamente bloqueado ou excluÃdo.</p>
<p>Conteúdos com informações consideradas inadequadas pela <strong>Plataforma Integrada de RED do MEC</strong>, conforme as cláusulas destes Termos de Uso, poderão ser removidos por decisão do Ministério da Educação e o usuário será notificado através do seu e-mail de cadastro.</p>
- <Typography variant="h5" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>
- 3.1 É permitido ao usuário:
+ <Typography variant="h5" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>
+ 3.1 É permitido ao usuário:
</Typography>
<ul>
- <li style={{ listStyleType: "disc" }}>Depositar (publicar) recurso ou material de sua autoria ou de autoria coletiva, com anuência dos demais autores, que esteja em domÃnio público, ou para o qual há anuência dos autores originais, desde que os dados sejam corretamente preenchidos nos campos descritivos (metadados) indicados para preenchimento das informações sobre os recursos;</li>
- <li style={{ listStyleType: "disc" }}>Nos comentários, contatos e comunicações, é fundamental ser cortês e tratar os demais usuários com respeito;</li>
- <li style={{ listStyleType: "disc" }}>O usuário poderá sugerir links para outros sites, desde que tenham relação direta com o assunto abordado.</li>
+ <li style={{listStyleType:"disc"}}>Depositar (publicar) recurso ou material de sua autoria ou de autoria coletiva, com anuência dos demais autores, que esteja em domÃnio público, ou para o qual há anuência dos autores originais, desde que os dados sejam corretamente preenchidos nos campos descritivos (metadados) indicados para preenchimento das informações sobre os recursos;</li>
+ <li style={{listStyleType:"disc"}}>Nos comentários, contatos e comunicações, é fundamental ser cortês e tratar os demais usuários com respeito;</li>
+ <li style={{listStyleType:"disc"}}>O usuário poderá sugerir links para outros sites, desde que tenham relação direta com o assunto abordado.</li>
</ul>
- <Typography variant="h5" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>
- 3.2 É vedado ao usuário:
+ <Typography variant="h5" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>
+ 3.2 É vedado ao usuário:
</Typography>
<ul>
- <li style={{ listStyleType: "disc" }}>Transmitir, exibir, enviar, ou de qualquer outra forma, disponibilizar conteúdo que contenha material pornográfico e/ou atividades ilegais relativas a menores de 18 anos (consoante o Estatuto da Criança e do Adolescente), que invada a privacidade de terceiros, que tenha cunho comercial, viole os Direitos Humanos ou seja ilegal, ofensivo, ameaçador, que incite a violência, seja vulgar, preconceituoso ou racista (como descrito nos artigos 138-140 do Código Penal Brasileiro), ou de qualquer forma seja contrário às cláusulas destes Termos de Uso;</li>
- <li style={{ listStyleType: "disc" }}>Assumir a identidade de outra pessoa, fÃsica ou jurÃdica; forjar cabeçalhos, ou de qualquer outra forma manipular identificadores, a fim de disfarçar a origem de qualquer material contido na plataforma, com sentido de desmoralizar, desprestigiar ou se fazer passar pela <strong>Plataforma Integrada de RED do MEC</strong>;</li>
- <li style={{ listStyleType: "disc" }}>Disponibilizar conteúdo em desconformidade com a legislação de Direito Autoral, incluindo conteúdo que viole marca registrada, patente, segredo de negócio, direito autoral ou qualquer outro direito de terceiro; disponibilizar conteúdo com qualquer tipo de propaganda, material promocional, spam (mensagens não solicitadas), correntes ou esquemas de pirâmide;</li>
- <li style={{ listStyleType: "disc" }}>Disponibilizar conteúdo que contenha vÃrus ou qualquer outro código, arquivo ou programa de computador, com o propósito de interromper, destruir ou limitar a funcionalidade de qualquer software, hardware ou equipamento de telecomunicações;</li>
- <li style={{ listStyleType: "disc" }}>Interferir ou interromper os serviços, as redes ou os servidores conectados à plataforma de modo a dificultar a utilização e o aproveitamento dos serviços por outros usuários, bem como obter ou tentar obter acesso não autorizado à plataforma;</li>
- <li style={{ listStyleType: "disc" }}>Pedir votos, mencionar número de candidato ou expressar qualquer outra manifestação que se caracterize como propaganda polÃtica ou que viole as normas eleitorais.</li>
+ <li style={{listStyleType:"disc"}}>Transmitir, exibir, enviar, ou de qualquer outra forma, disponibilizar conteúdo que contenha material pornográfico e/ou atividades ilegais relativas a menores de 18 anos (consoante o Estatuto da Criança e do Adolescente), que invada a privacidade de terceiros, que tenha cunho comercial, viole os Direitos Humanos ou seja ilegal, ofensivo, ameaçador, que incite a violência, seja vulgar, preconceituoso ou racista (como descrito nos artigos 138-140 do Código Penal Brasileiro), ou de qualquer forma seja contrário às cláusulas destes Termos de Uso;</li>
+ <li style={{listStyleType:"disc"}}>Assumir a identidade de outra pessoa, fÃsica ou jurÃdica; forjar cabeçalhos, ou de qualquer outra forma manipular identificadores, a fim de disfarçar a origem de qualquer material contido na plataforma, com sentido de desmoralizar, desprestigiar ou se fazer passar pela <strong>Plataforma Integrada de RED do MEC</strong>;</li>
+ <li style={{listStyleType:"disc"}}>Disponibilizar conteúdo em desconformidade com a legislação de Direito Autoral, incluindo conteúdo que viole marca registrada, patente, segredo de negócio, direito autoral ou qualquer outro direito de terceiro; disponibilizar conteúdo com qualquer tipo de propaganda, material promocional, spam (mensagens não solicitadas), correntes ou esquemas de pirâmide;</li>
+ <li style={{listStyleType:"disc"}}>Disponibilizar conteúdo que contenha vÃrus ou qualquer outro código, arquivo ou programa de computador, com o propósito de interromper, destruir ou limitar a funcionalidade de qualquer software, hardware ou equipamento de telecomunicações;</li>
+ <li style={{listStyleType:"disc"}}>Interferir ou interromper os serviços, as redes ou os servidores conectados à plataforma de modo a dificultar a utilização e o aproveitamento dos serviços por outros usuários, bem como obter ou tentar obter acesso não autorizado à plataforma;</li>
+ <li style={{listStyleType:"disc"}}>Pedir votos, mencionar número de candidato ou expressar qualquer outra manifestação que se caracterize como propaganda polÃtica ou que viole as normas eleitorais.</li>
</ul>
- <Typography variant="h4" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>
- 4. Licença de uso do conteúdo
+ <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>
+ 4. Licença de uso do conteúdo
</Typography>
<p>A <strong>Plataforma Integrada de RED do MEC</strong>, entendida como obra intelectual em seu conjunto, é de titularidade do Ministério da Educação. Sua disponibilização ocorrerá de acordo com os termos da Licença Pública Creative Commons do tipo CC BY-SA, exceto nos casos em que for indicado de outra forma.</p>
<p>A licença CC BY SA é uma licença aberta e permite que seja feita cópia, redistribuição, adaptação e criação de obras derivadas, inclusive uso comercial, desde que o autor seja referenciado e que a licença da obra derivada seja também CC BY SA, garantindo o constante caráter aberto das produções.</p>
<p>Aplica-se aos códigos de software desenvolvidos pela <strong>Plataforma Integrada de RED do MEC</strong> a Licença Pública Geral Affero GNU GPL (veja a tradução livre aqui), que visa garantir a liberdade de compartilhar e de modificar softwares livres.</p>
<p>O usuário que utilizar a <strong>Plataforma Integrada de RED do MEC</strong> como repositório, ou seja, para armazenamento de conteúdo, garante que detém todos os direitos e autorizações para a publicação do conteúdo e deverá escolher uma das licenças Creative Commons elencadas no formulário no momento de cadastro do material. As licenças Creative Commons relacionadas abaixo serão aceitas na <strong>Plataforma Integrada de RED do MEC</strong>, pois garantem o devido crédito pela criação original do usuário e permitem as seguintes ações de uso:</p>
<ul>
- <li style={{ listStyleType: "disc" }}>CC-BY: esta licença permite que outros distribuam, remixem, adaptem e criem a partir do seu trabalho, mesmo para fins comerciais, desde que lhe atribuam o devido crédito pela criação original.</li>
- <li style={{ listStyleType: "disc" }}>CC-BY-SA: esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho, mesmo para fins comerciais, desde que lhe atribuam o devido crédito e que licenciem as novas criações sob termos idênticos</li>
- <li style={{ listStyleType: "disc" }}>CC-BY-NC: esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho para fins não comerciais e, embora os novos trabalhos tenham de lhe atribuir o devido crédito e não possam ser usados para fins comerciais, os usuários não têm de licenciar esses trabalhos derivados sob os mesmos termos.</li>
- <li style={{ listStyleType: "disc" }}>CC-BY-NC-SA: esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho para fins não comerciais, desde que atribuam o devido crédito e que licenciem as novas criações sob termos idênticos.</li>
+ <li style={{listStyleType:"disc"}}>CC-BY: esta licença permite que outros distribuam, remixem, adaptem e criem a partir do seu trabalho, mesmo para fins comerciais, desde que lhe atribuam o devido crédito pela criação original.</li>
+ <li style={{listStyleType:"disc"}}>CC-BY-SA: esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho, mesmo para fins comerciais, desde que lhe atribuam o devido crédito e que licenciem as novas criações sob termos idênticos</li>
+ <li style={{listStyleType:"disc"}}>CC-BY-NC: esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho para fins não comerciais e, embora os novos trabalhos tenham de lhe atribuir o devido crédito e não possam ser usados para fins comerciais, os usuários não têm de licenciar esses trabalhos derivados sob os mesmos termos.</li>
+ <li style={{listStyleType:"disc"}}>CC-BY-NC-SA: esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho para fins não comerciais, desde que atribuam o devido crédito e que licenciem as novas criações sob termos idênticos.</li>
</ul>
<p>Cabe ao Usuário verificar a compatibilidade da licença do material obtido na <strong>Plataforma Integrada de RED do MEC</strong> para utilizar em outras produções. Para consultar a compatibilidade das licenças Creative Commons, há uma ferramenta disponÃvel no site Iniciativa Educação Aberta</p>
<p>O usuário da <strong>Plataforma Integrada de RED do MEC</strong> responde por todo o conteúdo publicado por meio de seu perfil, inclusive no que diz respeito à violação dos direitos autorais relacionados a tais postagens. Ao inserir um conteúdo de sua autoria para armazenamento, o usuário concorda e autoriza o licenciamento ao escolher uma das licenças abertas descritas no formulário de publicação, de forma a permitir não só o seu reconhecimento pleno de autoria, como também a possibilidade de replicação, reedição e reformulação de suas postagens por terceiros, com o objetivo de possibilitar o compartilhamento e a reutilização de conteúdo educacional.</p>
<p>A <strong>Plataforma Integrada de RED do MEC</strong> poderá disponibilizar endereços eletrônicos de outros sÃtios externos, por meio de links, o que não significa que estes sejam de sua propriedade ou por ele operados. A presença de links para outros sites não implica relação de sociedade ou de supervisão da <strong>Plataforma Integrada de RED do MEC</strong> com esses sites e seus conteúdos. Os campos descritivos de cada recurso conterão informações especÃficas sobre as licenças dos mesmos. Cabe ao usuário verificar a licença de cada recurso.</p>
<p>É vedado o uso não autorizado da obra ou seu uso em desconformidade com a legislação autoral e com os termos da licença mencionada.</p>
- <Typography variant="h4" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>
- 5. Práticas de uso e armazenamento
+ <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>
+ 5. Práticas de uso e armazenamento
</Typography>
<p>A depender da capacidade de espaço no servidor, a <strong>Plataforma Integrada de RED do MEC</strong> poderá retirar conteúdos armazenados na plataforma, observados os critérios de antiguidade e do tamanho dos arquivos disponibilizados, mediante notificação e justificativa ao usuário.</p>
- <Typography variant="h4" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>
- 6. Privacidade da informação
+ <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>
+ 6. Privacidade da informação
</Typography>
<p>A <strong>Plataforma Integrada de RED do MEC</strong> tomará todas as medidas possÃveis para manter a confidencialidade e a segurança de suas informações. No entanto, a <strong>Plataforma Integrada de RED do MEC</strong> não responderá por prejuÃzos que possam ser derivados da violação dessas medidas por parte de terceiros que subvertam os sistemas de segurança para acessar as informações de Usuários. A <strong>Plataforma Integrada de RED do MEC</strong> solicitará alguns dados pessoais para seu cadastro. Além disso, dados sobre a interação dos usuários e seu comportamento na plataforma são coletados de maneira automática. Esses dados nunca serão vendidos, alugados, trocados ou fornecidos para fins comerciais. No entanto, o MEC poderá colaborar com instituições públicas parceiras, como universidades, para análise desses dados bem como de qualquer conteúdo da plataforma para para fins de pesquisa, divulgação e melhoria dos serviços. Dados pessoais que possam identificá-lo nunca serão compartilhados. Dados que não identificam o usuário serão armazenados indefinidamente para fins de pesquisa.</p>
- <Typography variant="h4" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>
- 7. Violação no sistema ou na base de dados
+ <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>
+ 7. Violação no sistema ou na base de dados
</Typography>
<p>O responsável por qualquer intromissão, ou tentativa de intromissão, na <strong>Plataforma Integrada de RED do MEC</strong> ou por atividade que viole ou contrarie as disposições legais aplicáveis ou as cláusulas destes Termos de Uso estará sujeito à aplicação das sanções previstas neste instrumento, das ações legais pertinentes e de indenizações por eventuais danos causados.</p>
- <Typography variant="h4" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>8. Sanções</Typography>
+ <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>8. Sanções</Typography>
<p>Sem prejuÃzo de outras medidas, a <strong>Plataforma Integrada de RED do MEC</strong> poderá advertir, bloquear, desativar ou remover, temporária ou definitivamente, a conta e conteúdos disponibilizados por um usuário, em qualquer momento, e iniciar as ações legais cabÃveis caso:</p>
<ul>
- <li style={{ listStyleType: "disc" }}>o usuário não cumprir qualquer dispositivo destes Termos de Uso;</li>
- <li style={{ listStyleType: "disc" }}>o usuário praticar atos fraudulentos ou dolosos;</li>
- <li style={{ listStyleType: "disc" }}>o MEC entender que as postagens, o conteúdo disponibilizado ou qualquer atitude do usuário tenham causado algum dano a terceiros ou à própria Plataforma, ou tenham a potencialidade de assim o fazer.</li>
+ <li style={{listStyleType:"disc"}}>o usuário não cumprir qualquer dispositivo destes Termos de Uso;</li>
+ <li style={{listStyleType:"disc"}}>o usuário praticar atos fraudulentos ou dolosos;</li>
+ <li style={{listStyleType:"disc"}}>o MEC entender que as postagens, o conteúdo disponibilizado ou qualquer atitude do usuário tenham causado algum dano a terceiros ou à própria Plataforma, ou tenham a potencialidade de assim o fazer.</li>
</ul>
- <Typography variant="h4" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>9. Limitação de responsabilidade</Typography>
+ <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>9. Limitação de responsabilidade</Typography>
<p>Em nenhuma situação a <strong>Plataforma Integrada de RED do MEC</strong> e o Ministério da Educação serão responsáveis por quaisquer danos, prejuÃzos ou outro efeito, direto ou indireto, relacionados ao uso, por parte de seus usuários, leitores ou de qualquer outra pessoa, deste sÃtio, de seu conteúdo ou de qualquer outro website mencionado.</p>
<p>O usuário reconhece que será integralmente responsável pelos materiais enviados à <strong>Plataforma Integrada de RED do MEC</strong> e se compromete a responder por quaisquer reivindicações, demandas, penalidades e todos os danos, perdas e despesas, causados à <strong>Plataforma Integrada de RED do MEC</strong>.</p>
<p>Todo autor de conteúdo exibido na <strong>Plataforma Integrada de RED do MEC</strong> retém os seus direitos e responsabilidades autorais, nos termos da Lei n. 9.610/1998, sem prejuÃzo dos termos de licenciamento de livre uso, conforme exposto nestes Termos de Uso, no item “Licença de uso do conteúdoâ€.</p>
<p>Se o usuário verificar que qualquer comentário ou participação na <strong>Plataforma Integrada de RED do MEC</strong> infringem um direito de sua titularidade ou de um terceiro, deverá entrar em contato imediatamente na forma indicada neste mesmo documento, no item “Como reportar violaçõesâ€.</p>
- <Typography variant="h4" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>
- 10. Inexistência de vÃnculo
+ <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>
+ 10. Inexistência de vÃnculo
</Typography>
<p>A adesão a estes Termos de Uso pelo usuário não gera nenhum contrato, mandato, franquia ou vÃnculo de tipo trabalhista, societário, de parceria ou associativo entre a <strong>Plataforma Integrada de RED do MEC</strong> e o usuário.</p>
- <Typography variant="h4" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>11. Como reportar violações</Typography>
+ <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>11. Como reportar violações</Typography>
<p>Nem todo o conteúdo disponibilizado pelo usuário nas áreas de comentário e debates é lido pela administração da <strong>Plataforma Integrada de RED do MEC</strong>.</p>
<p>Se algum artigo, notÃcia, comentário ou outro conteúdo da <strong>Plataforma Integrada de RED do MEC</strong> violar qualquer direito do usuário, de terceiros ou a legislação aplicável, o usuário poderá usar a funcionalidade "Reportar" nas páginas que houver essa opção ou, quando não houver, entrar em contato com a administração da <strong>Plataforma Integrada de RED do MEC</strong> pelo formulário de “Contatoâ€, mencionando de forma especÃfica e detalhada a violação.</p>
<p>De posse das informações, a <strong>Plataforma Integrada de RED do MEC</strong> poderá analisar e resolver a questão tão breve quanto possÃvel. Caso a informação esteja incompleta, ou com detalhamento insuficiente, a <strong>Plataforma Integrada de RED do MEC</strong> poderá entrar em contato para solicitar a complementação, possivelmente atrasando a providência desejada.</p>
- <Typography variant="h4" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>
- 12. Modificações nos Termos de Uso
+ <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>
+ 12. Modificações nos Termos de Uso
</Typography>
<p>A <strong>Plataforma Integrada de RED do MEC</strong> poderá alterar, a qualquer tempo, estes Termos de Uso, mediante declaração pública no site, visando seu aprimoramento e melhoria dos serviços prestados. Os novos Termos de Uso entrarão em vigor a partir de sua publicação na plataforma. Usuários cadastrados receberão notificação dessa alteração no e-mail de cadastro e haverá divulgação/chamada na página principal do Sistema. No prazo de 72 (setenta e duas) horas,
- contadas a partir da publicação das modificações, o usuário poderá comunicar-se com a <strong>Plataforma Integrada de RED do MEC</strong>, caso não concorde com os novos Termos de Uso. Nesse caso, a conta do usuário será desativada. Não havendo manifestações no prazo estipulado, entender-se-á que o Usuário aceitou tacitamente os novos Termos de Uso.</p>
- <Typography variant="h4" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>
- 13. Foro
+ contadas a partir da publicação das modificações, o usuário poderá comunicar-se com a <strong>Plataforma Integrada de RED do MEC</strong>, caso não concorde com os novos Termos de Uso. Nesse caso, a conta do usuário será desativada. Não havendo manifestações no prazo estipulado, entender-se-á que o Usuário aceitou tacitamente os novos Termos de Uso.</p>
+ <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>
+ 13. Foro
</Typography>
<p>Para dirimir dúvidas ou litÃgios referentes à interpretação e ao cumprimento destes Termos de Uso, as partes se submeterão ao Foro da Justiça Federal, Seção Judiciária do Distrito Federal.</p>
</div>
- </div >
+ </CardContent>
)
}
diff --git a/src/Components/TopicCard.js b/src/Components/TopicCard.js
index 0ec3baf9..1f3bb10f 100644
--- a/src/Components/TopicCard.js
+++ b/src/Components/TopicCard.js
@@ -26,22 +26,24 @@ import Button from '@material-ui/core/Button';
import { Link } from 'react-router-dom';
export default function MaterialCard(props) {
+ console.log(props);
const thumb = require(`../../public/${props.topic.img}`)
return (
- <Card className={`${props.contrast}BackColor ${props.contrast}Border`} style={{ maxHeight: "100%", maxWidth: "300px" }}>
+ <Card style={{ maxHeight: "100%", maxWidth: "300px" }}>
<img style={{ maxHeight: "100%", maxWidth: "100%" }} src={thumb} alt="thumbnail do recurso" />
- <CardContent className={`${props.contrast}Text`} style={{ height: "50px" }}>
+ <CardContent style={{ height: "50px" }}>
<Title>
- {props.topic.pre_title}
+ <BoldTitle>
+ {props.topic.pre_title}
+ </BoldTitle>
{props.topic.title}
</Title>
</CardContent>
- <CardActions style={{ justifyContent: "center" }}>
- <StyledLink className={`${props.contrast}LinkColor`} to={"topico?colecao=" + props.colecao_id + "&topico=" + props.topic.id}>
+ <CardActions style={{ borderTop: "1px solid #e5e5e5", justifyContent: "center" }}>
+ <StyledLink to={"topico?colecao=" + props.colecao_id + "&topico=" + props.topic.id}>
<Button
- className={`${props.contrast}LinkColor`}
- style={props.contrast === "" ? {color: "#e8224f"} : {color: "white"}}
+ color="secondary"
>
Ver módulo
</Button>
@@ -53,6 +55,7 @@ export default function MaterialCard(props) {
const Title = styled(Typography)`
font-weight: 500;
+ color: rgb(102, 102, 102);
font-size: 0.9em;
margin-left: 10px;
margin-right: 10px;
@@ -62,6 +65,10 @@ const Title = styled(Typography)`
-webkit-box-orient: vertical;
overflow: hidden;
`
+const BoldTitle = styled.span`
+ font-weight: bold;
+`
const StyledLink = styled(Link)`
+ text-decoration: none !important;
color: inherit !important;
`
\ No newline at end of file
diff --git a/src/Components/TopicFooter.js b/src/Components/TopicFooter.js
index d6e33341..c6ce8ea4 100644
--- a/src/Components/TopicFooter.js
+++ b/src/Components/TopicFooter.js
@@ -4,7 +4,7 @@ import Grid from '@material-ui/core/Grid';
export default function TopicFooter(props) {
return (
- <Container contrast={props.contrast}>
+ <Container>
<Wrapper>
<Grid
container
@@ -30,8 +30,7 @@ export default function TopicFooter(props) {
const Container=styled.div`
margin-top: 15px;
- background: ${props => props.contrast === "" ? "#e81f4f" : "black"};
- border-top: ${props => props.contrast === "" ? "0" : "1px solid white"};
+ background-color: #e81f4f;
height: auto;
padding: 0;
`
diff --git a/src/Components/TopicList.js b/src/Components/TopicList.js
index ba5d8eed..e965adad 100644
--- a/src/Components/TopicList.js
+++ b/src/Components/TopicList.js
@@ -15,7 +15,7 @@ export default function TopicList(props) {
return (
<Wrapper>
- <Title contrast={props.contrast}>Módulos</Title>
+ <Title>Módulos</Title>
<Grid
container
spacing={3}
@@ -25,7 +25,7 @@ export default function TopicList(props) {
{props.topicos.slice(0, (expanded ? -1 : 5)).map((t, index) => {
return (
<Grid item key={index} md={3}>
- <TopicCard contrast={props.contrast} topic={t} colecao_id={props.colecao_id} />
+ <TopicCard topic={t} colecao_id={props.colecao_id} />
</Grid>
);
})
@@ -38,12 +38,12 @@ export default function TopicList(props) {
alignItems="center"
>
<Grid item>
- <Fab size="medium" color="secondary" aria-label="edit" onClick={handleFabClick} style={props.contrast === "" ? { marginTop: "1em" } : { backgroundColor: "black", border: "1px solid yellow", marginTop: "1em" }}>
- {expanded ? <ExpandLessIcon style={props.contrast === "" ? {color: "white"} : {color: "yellow"}} /> : <ExpandMoreIcon style={props.contrast === "" ? {color: "white"} : {color: "yellow"}}/>}
+ <Fab size="medium" color="secondary" aria-label="edit" onClick={handleFabClick}>
+ {expanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
</Fab>
</Grid>
<Grid item>
- <FabText contrast={props.contrast}>
+ <FabText>
{expanded ? "VER MENOS" : "VER TODOS OS MÓDULOS"}
</FabText>
</Grid>
@@ -55,14 +55,14 @@ export default function TopicList(props) {
}
const FabText = styled.span`
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color: #666;
font-weight: 900;
line-height: 2em;
`
const Title = styled.h1`
font-weight: 100;
margin-left: 30px;
- color: ${props => props.contrast === "" ? "rgb(102, 102, 102)" : "white"};
+ color: rgb(102, 102, 102);
`
const Wrapper = styled.div`
margin-right : auto;
diff --git a/src/Components/UploadPageComponents/ButtonsDiv.js b/src/Components/UploadPageComponents/ButtonsDiv.js
index a1ac74f0..8e4d1945 100644
--- a/src/Components/UploadPageComponents/ButtonsDiv.js
+++ b/src/Components/UploadPageComponents/ButtonsDiv.js
@@ -28,7 +28,6 @@ export default function ButtonsDiv(props) {
return (
<>
<ModalCancelar
- contrast={props.contrast}
open={modalCancelar}
handleClose={() => { toggleModalCancelar(false) }}
draftID={props.draftID}
@@ -42,34 +41,34 @@ export default function ButtonsDiv(props) {
{/*botao excluir na pagina de editar*/}
<Grid item>
- <GreyButton contrast={props.contrast} onClick={() => { toggleModalCancelar(true) }}>
+ <GreyButton onClick={() => { toggleModalCancelar(true) }}>
<span className="button-text">
CANCELAR
- </span>
+ </span>
</GreyButton>
</Grid>
{
props.onPartTwo &&
<Grid item>
- <GreyButton contrast={props.contrast} onClick={() => { props.stepperControl(-1) }}>
+ <GreyButton onClick={() => { props.stepperControl(-1) }}>
<span className="button-text">
VOLTAR
- </span>
+ </span>
</GreyButton>
</Grid>
}
<Grid item>
- <GreyButton contrast={props.contrast} onClick={() => { if (window.confirm('O seu recurso em edição foi salvo.')) toggleRedirect(true) }}>
+ <GreyButton onClick={() => { if (window.confirm('O seu recurso em edição foi salvo.')) toggleRedirect(true) }}>
<span className="button-text">
CONTINUAR MAIS TARDE
- </span>
+ </span>
</GreyButton>
</Grid>
<Grid item>
- <OrangeButton contrast={props.contrast} type="submit">
+ <OrangeButton type="submit">
SALVAR E AVANÇAR
</OrangeButton>
</Grid>
diff --git a/src/Components/UploadPageComponents/ChooseLinkSection.js b/src/Components/UploadPageComponents/ChooseLinkSection.js
index 19186952..52a14ae2 100644
--- a/src/Components/UploadPageComponents/ChooseLinkSection.js
+++ b/src/Components/UploadPageComponents/ChooseLinkSection.js
@@ -16,107 +16,81 @@ 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} from 'react'
import UndoIcon from '@material-ui/icons/Undo';
-import { WrapperBox, StyledTextField, BlueButton, GrayButton } from './StyledComponents.js'
-import { makeStyles } from "@material-ui/styles";
+import {WrapperBox, StyledTextField, BlueButton, GrayButton} from './StyledComponents.js'
-const useStyles = makeStyles(theme => ({
- darkTextField: {
- maxWidth: "100%",
- fontSize: "15px",
- fontWeight: "lighter",
- color: "white",
- width: "100%"
- },
- lightTextField: {
- maxWidth: "100%",
- fontSize: "15px",
- fontWeight: "lighter",
- color: "black",
- width: "100%"
- }
-}));
-
-export default function ChooseLink(props) {
- const classes = useStyles();
- const [linkSent, setLinkSent] = useState(false)
- const [link, setLink] = useState({ flag: false, value: "" })
- const handleLink = (e) => {
- let userInput = e.target.value
- const urlRegex = new RegExp(
- // eslint-disable-next-line
- "(?:(?:(?:https?|ftp):\/\/))(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,}))\.?)(?::\d{2,5})*(?:[/?#]\S*)?", "i"
- )
- let flag = !(urlRegex.test(userInput))
- setLink({
- ...link,
- flag: flag,
- value: userInput
+export default function ChooseLink (props) {
+ const [linkSent, setLinkSent] = useState(false)
+ const [link, setLink] = useState({flag : false, value : ""})
+ const handleLink = (e) => {
+ let userInput = e.target.value
+ const urlRegex = new RegExp(
+ // eslint-disable-next-line
+ "(?:(?:(?:https?|ftp):\/\/))(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,}))\.?)(?::\d{2,5})*(?:[/?#]\S*)?", "i"
+ )
+ let flag = !(urlRegex.test(userInput))
+ setLink({...link,
+ flag : flag,
+ value : userInput}
+ )
}
- )
- }
- const handleSubmit = (e) => {
- e.preventDefault()
- if (!link.flag) {
- props.submit(link.value)
- setLinkSent(true)
+ const handleSubmit = (e) => {
+ e.preventDefault()
+ console.log(link.flag)
+ if (!link.flag) {
+ props.submit(link.value)
+ setLinkSent(true)
+ }
}
- }
- return (
- <WrapperBox contrast={props.contrast}>
- <div className="inner">
- <div className="upload-title"> Enviar Link</div>
+ return (
+ <WrapperBox>
+ <div className="inner">
+ <div className="upload-title"> Enviar Link</div>
- <div className="flex-column">
- <p>Insira o link da página do recurso abaixo:</p>
- {
- !linkSent ?
- <form onSubmit={(e) => { handleSubmit(e) }}>
- <StyledTextField
- contrast={props.contrast}
- InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
- id={"choose-link-form"}
- label={"Exemplo: http://google.com"}
- type={"text"}
- variant="outlined"
- value={link.value}
- onChange={e => { handleLink(e) }}
- helperText={link.flag ? "Faltou inserir um endereço eletrônico" : ""}
- multiline={true}
- rowsMax={"10"}
- rows={1}
- error={link.flag}
- required={true}
- />
+ <div className="flex-column">
+ <p>Insira o link da página do recurso abaixo:</p>
+ <form onSubmit={(e) => {handleSubmit(e)}}>
+ <StyledTextField
+ id = {"choose-link-form"}
+ label={"Exemplo: http://google.com"}
+ type = {"text"}
+ value = {link.value}
+ onChange = {e => {handleLink(e)}}
+ helperText = {link.flag ? "Faltou inserir um endereço eletrônico" : ""}
+ multiline={true}
+ rowsMax = {"10"}
+ rows={1}
+ error = {link.flag}
+ required = {true}
+ disabled={linkSent}
+ />
- <div className="buttons-div">
- <>
- <GrayButton contrast={props.contrast} onClick={() => { props.handleNextStage("default") }}>
- <span className="button-text">
- <UndoIcon className="icon" />Voltar
- </span>
- </GrayButton>
- <BlueButton contrast={props.contrast} type="submit">SALVAR</BlueButton>
- </>
+ <div className="buttons-div">
+ {
+ linkSent ?
+ (
+ <BlueButton onClick={() => {setLinkSent(false)}}>Editar</BlueButton>
+ )
+ :
+ (
+ <>
+ <GrayButton onClick={() => {props.handleNextStage("default")}}>
+ <span className="button-text">
+ <UndoIcon className="icon"/>Voltar
+ </span>
+ </GrayButton>
+ <BlueButton type="submit">SALVAR</BlueButton>
+ </>
+ )
+ }
+ </div>
+ </form>
</div>
- </form>
- :
- <>
- <p>
- O link salvado foi: <a style={props.contrast === "" ? {} : { color: "yellow", textDecoration: "underline" }} href={link.value}>{link.value}</a>
- </p>
- <div className="buttons-div">
- <BlueButton contrast={props.contrast} onClick={() => { setLinkSent(false) }}>Editar</BlueButton>
- </div>
- </>
-
- }
- </div>
- </div>
- </WrapperBox >
- )
+ </div>
+ </WrapperBox>
+ )
}
diff --git a/src/Components/UploadPageComponents/Forms/Autor.js b/src/Components/UploadPageComponents/Forms/Autor.js
index 5dec5827..4ab8bde9 100644
--- a/src/Components/UploadPageComponents/Forms/Autor.js
+++ b/src/Components/UploadPageComponents/Forms/Autor.js
@@ -16,56 +16,28 @@ 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, memo, useContext } from 'react'
-import { Store } from '../../../Store.js'
+import React, {useState, memo, useContext} from 'react'
+import {Store} from '../../../Store.js'
import { withStyles } from '@material-ui/core/styles';
-import { yellow, blue } from "@material-ui/core/colors";
+
import FormControl from '@material-ui/core/FormControl';
-import { StyledFormLabel, OutroAutorTextField } from '../StyledComponents.js'
+import { StyledFormLabel, OutroAutorTextField} from '../StyledComponents.js'
import RadioGroup from '@material-ui/core/RadioGroup';
import Radio from '@material-ui/core/Radio';
import FormControlLabel from '@material-ui/core/FormControlLabel';
-import { makeStyles } from "@material-ui/styles";
-
-const useStyles = makeStyles(theme => ({
- darkTextField: {
- maxWidth: "100%",
- fontSize: "15px",
- fontWeight: "lighter",
- color: "white",
- width: "100%",
- },
- lightTextField: {
- maxWidth: "100%",
- fontSize: "15px",
- fontWeight: "lighter",
- color: "black",
- width: "100%",
- }
-}));
const BlueRadio = withStyles({
- root: {
- color: blue[400],
- '&$checked': {
- color: blue[600],
- },
- },
-})((props) => <Radio color="default" {...props} />);
-
-const ContrastRadio = withStyles({
- root: {
- color: yellow[400],
- '&$checked': {
- color: yellow[600],
- },
+ root: {
+ color: '#666',
+ '&$checked': {
+ color: '#00bcd4',
},
- checked: {},
+ },
+ checked: {},
})((props) => <Radio color="default" {...props} />);
-function Autor(props) {
- const classes = useStyles();
- const { state } = useContext(Store)
+function Autor (props) {
+ const {state} = useContext(Store)
const [authorValue, setAuthorValue] = useState(props.initialValue ? props.initialValue : -1)
const [outroAutor, setOutroAutor] = useState(props.initialOutroAutor ? props.initialOutroAutor : '')
@@ -74,29 +46,26 @@ function Autor(props) {
}
return (
- <FormControl required={true} style={{ width: "100%" }} onBlur={() => { props.onBlurCallback("author", getAuthor(), props.draftID) }}>
- <StyledFormLabel contrast={props.contrast} component="legend" style={{ fontSize: "14px", marginBottom: "10px" }}>
+ <FormControl required={true} style={{width : "100%"}} onBlur={() => {props.onBlurCallback("author", getAuthor(), props.draftID)}}>
+ <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
<b>Autor do recurso</b>
</StyledFormLabel>
- <RadioGroup ara-label="Autor do Recurso" name="Autor do Recurso" value={authorValue} onChange={(e) => { setAuthorValue(e.target.value) }}>
- <FormControlLabel value="0" control={props.contrast === "" ? <BlueRadio /> : <ContrastRadio />} label="Sou o(a) autor(a) deste recurso" />
- <FormControlLabel value="1" control={props.contrast === "" ? <BlueRadio /> : <ContrastRadio />}
+ <RadioGroup ara-label="Autor do Recurso" name="Autor do Recurso" value={authorValue} onChange={(e) => {setAuthorValue(e.target.value)}}>
+ <FormControlLabel value="0" control={<BlueRadio />} label="Sou o(a) autor(a) deste recurso"/>
+ <FormControlLabel value="1" control={<BlueRadio/>}
label={
- <div style={{ display: "flex", alignItems: "center" }}>
+ <div style={{display : "flex", alignItems : "center"}}>
Outro:
<OutroAutorTextField
- variant="outlined"
- InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
- contrast={props.contrast}
- id={"outro-autor-form"}
- label={"Nome dos autores"}
- type={"text"}
- value={outroAutor}
- onChange={e => { setOutroAutor(e.target.value) }}
+ id = {"outro-autor-form"}
+ placeholder={"Nome dos autores"}
+ type = {"text"}
+ value = {outroAutor}
+ onChange = {e => {setOutroAutor(e.target.value)}}
fullWidth
multiline
- disabled={authorValue === "0"}
- style={{ paddingLeft: "5px", width: "100%" }}
+ disabled = {authorValue === "0"}
+ style={{paddingLeft : "5px", width : "100%"}}
/>
</div>}
/>
diff --git a/src/Components/UploadPageComponents/Forms/Idioma.js b/src/Components/UploadPageComponents/Forms/Idioma.js
index bf8b875f..79de2d04 100644
--- a/src/Components/UploadPageComponents/Forms/Idioma.js
+++ b/src/Components/UploadPageComponents/Forms/Idioma.js
@@ -16,105 +16,56 @@ 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} from 'react'
import FormControl from '@material-ui/core/FormControl';
-import { StyledFormLabel } from '../StyledComponents.js'
+import {StyledFormLabel} from '../StyledComponents.js'
+import ListItemText from '@material-ui/core/ListItemText';
import Checkbox from '@material-ui/core/Checkbox';
-import { withStyles } from '@material-ui/core/styles';
-import { yellow, blue } from "@material-ui/core/colors";
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import FormGroup from '@material-ui/core/FormGroup';
+import MenuItem from '@material-ui/core/MenuItem';
+import Select from '@material-ui/core/Select';
-const BlueCheckBox = withStyles({
- root: {
- color: blue[400],
- '&$checked': {
- color: blue[600],
- },
- },
- checked: {},
-})((props) => <Checkbox color="default" {...props} />);
-
-const ContrastCheckBox = withStyles({
- root: {
- color: yellow[400],
- '&$checked': {
- color: yellow[600],
- },
- },
- checked: {},
-})((props) => <Checkbox color="default" {...props} />);
-
-export default function Idioma(props) {
+export default function Idioma (props) {
const [chosenLanguage, setChosenLanguage] = useState(props.initialValue ? props.initialValue : [])
const [ids, setIds] = useState(props.initialIDValue ? props.initialIDValue : [])
- const handleChangeLanguage = (language) => {
- const languageIndex = chosenLanguage.indexOf(language.name);
- const copyChosenLanguages = [...chosenLanguage];
- const copyIds = [...ids]
-
- if (languageIndex > -1) {
- copyChosenLanguages.splice(languageIndex, 1);
- copyIds.splice(languageIndex, 1);
+ const handleChangeLanguage = (event) => {
+ let newLanguage = event.target.value.pop()
+ if (!chosenLanguage.some(language => language === newLanguage.name)) {
+ setChosenLanguage(chosenLanguage => [...chosenLanguage, newLanguage.name]);
+ setIds(ids => [...ids, newLanguage.id])
}
- else {
- copyChosenLanguages.push(language.name);
- copyIds.push(language.id);
+ else
+ {
+ if (chosenLanguage.length > 0) {
+ setChosenLanguage(chosenLanguage.filter((language) => {return language !== newLanguage.name}));
+ setIds(ids.filter((id) => {return id !== newLanguage.id}))
+ }
}
-
- setChosenLanguage(copyChosenLanguages);
- setIds(copyIds);
-
- // if (!chosenLanguage.some(language => language === newLanguage.name)) {
- // setChosenLanguage(chosenLanguage => [...chosenLanguage, newLanguage.name]);
- // setIds(ids => [...ids, newLanguage.id])
- // }
- // else {
- // if (chosenLanguage.length > 0) {
- // setChosenLanguage(chosenLanguage.filter((language) => { return language !== newLanguage.name }));
- // setIds(ids.filter((id) => { return id !== newLanguage.id }))
- // }
- // }
};
return (
- <FormControl style={{ minWidth: "30%" }}>
- <StyledFormLabel contrast={props.contrast} component="legend" style={{ fontSize: "14px", marginBottom: "10px" }}>
+ <FormControl style={{minWidth : "30%"}}>
+ <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
<b>Idioma</b><span>*</span>
</StyledFormLabel>
-
- <FormGroup row onBlur={() => { props.onBlurCallback("language_ids", ids, props.draftID) }}>
- {
- props.languages.map((language) => {
- return <FormControlLabel
- value={language}
- key={language.name}
- control={props.contrast === "" ? <BlueCheckBox checked={chosenLanguage.indexOf(language.name) > -1} onChange={() => handleChangeLanguage(language)} /> : <ContrastCheckBox checked={chosenLanguage.indexOf(language.name) > -1} onChange={() => handleChangeLanguage(language)} />}
- label={<span style={props.contrast === "" ? {} : { color: "yellow", textDecoration: "underline" }}>{language.name}</span>}
- />
- })
- }
- </FormGroup>
-
- {/* <Select
+ <Select
value={chosenLanguage}
multiple
renderValue={(selected) => selected.join(', ')}
name="Idioma"
onChange={handleChangeLanguage}
- onBlur={() => { props.onBlurCallback("language_ids", ids, props.draftID) }}
+ onBlur={() => {props.onBlurCallback("language_ids", ids, props.draftID)}}
>
{
- props.languages.map(language =>
+ props.languages.map( language =>
<MenuItem key={language.name} value={language}>
<Checkbox checked={chosenLanguage.indexOf(language.name) > -1} />
<ListItemText primary={language.name} />
</MenuItem>
)
}
- </Select> */}
+ </Select>
</FormControl>
)
}
diff --git a/src/Components/UploadPageComponents/Forms/Keywords.js b/src/Components/UploadPageComponents/Forms/Keywords.js
index 42804710..fa2418b7 100644
--- a/src/Components/UploadPageComponents/Forms/Keywords.js
+++ b/src/Components/UploadPageComponents/Forms/Keywords.js
@@ -16,36 +16,16 @@ 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, memo, useEffect, useRef } from 'react'
+import React, {useState, memo, useEffect, useRef} from 'react'
import FormControl from '@material-ui/core/FormControl';
-import { StyledTextField, StyledFormLabel } from '../StyledComponents.js'
-import styled from 'styled-components';
-import DeleteIcon from '@material-ui/icons/Delete';
+import {StyledTextField, StyledFormLabel} from '../StyledComponents.js'
+import FormHelperText from '@material-ui/core/FormHelperText';
+import Chip from '@material-ui/core/Chip';
-import { makeStyles } from "@material-ui/styles";
-import { Chip } from '@material-ui/core';
+function Keywords (props) {
-const useStyles = makeStyles(theme => ({
- darkTextField: {
- maxWidth: "100%",
- fontSize: "15px",
- fontWeight: "lighter",
- color: "white",
- width: "100%",
- },
- lightTextField: {
- maxWidth: "100%",
- fontSize: "15px",
- fontWeight: "lighter",
- color: "black",
- width: "100%",
- }
-}));
-
-function Keywords(props) {
- const classes = useStyles();
const [keywords, setKeywords] = useState(props.initialValue ? props.initialValue : [])
- const handleSetKeywords = (newKeyword) => { setKeywords(newKeyword) }
+ const handleSetKeywords = (newKeyword) => {setKeywords(newKeyword)}
const deleteKeyword = (keywordToDelete) => {
handleSetKeywords(keywords.filter((keyword) => keyword !== keywordToDelete))
}
@@ -53,19 +33,19 @@ function Keywords(props) {
const resettingRef = useRef(false);
useEffect(() => {
- if (resettingRef.current) { //used to ensure that keywords are updated before sending (after a delete)
- resettingRef.current = false;
- props.onBlurCallback("tags", keywords, props.draftID);
+ if(resettingRef.current){ //used to ensure that keywords are updated before sending (after a delete)
+ resettingRef.current = false;
+ props.onBlurCallback("tags", keywords, props.draftID);
}
- }, [keywords])
+ },[keywords])
const [keywordsBuffer, setKeywordsBuffer] = useState('')
const handleKeywords = (event) => {
let userInput = event.target.value;
- if (userInput.indexOf(',') !== -1) {
- if (userInput.length > 1) {
+ if(userInput.indexOf(',') !== -1 ) {
+ if(userInput.length > 1) {
handleSetKeywords([...keywords, userInput.split(',')[0]])
}
setKeywordsBuffer('')
@@ -78,45 +58,40 @@ function Keywords(props) {
return (
<React.Fragment>
- <FormControl required={true} style={{ width: "100%" }}>
- <StyledFormLabel contrast={props.contrast} component="legend" style={{ fontSize: "14px", marginBottom: "10px" }}>
+ <FormControl required={true} style={{width : "100%"}}>
+ <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
<b>Palavras-chave para buscar o Recurso</b>
- <span style={props.contrast === "" ? { color: "#a5a5a5", paddingLeft: "10px" } : { color: "white", paddingLeft: "10px" }}>
- (Use vÃrgula ou enter para separar as palavras-chave)</span>
+ <span style={{color : "#a5a5a5", paddingLeft : "10px"}}>
+ (Use vÃrgula ou enter para separar as palavras-chave)</span>
</StyledFormLabel>
<StyledTextField
- contrast={props.contrast}
- variant='outlined'
- InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
- id={"text-form"}
+ id = {"text-form"}
placeholder={"Ex: Biomas, Geografia, ..."}
- type={"text"}
+ type = {"text"}
value={keywordsBuffer}
onChange={handleKeywords}
onKeyDown={(event) => {
- if (event.keyCode === 13) {
+ if(event.keyCode === 13){
handleSetKeywords([...keywords, keywordsBuffer])
setKeywordsBuffer('')
- }
- }
+ }}
}
fullWidth
- onBlur={() => { props.onBlurCallback("tags", keywords, props.draftID) }}
+ onBlur={() => {props.onBlurCallback("tags", keywords, props.draftID)}}
/>
</FormControl>
- <SizedBox />
{
keywords.length !== 0 &&
- keywords.map((keyword) =>
- <Chip style={props.contrast === "" ? { margin: "0.3em 0.5em" } : { border: "1px solid white", backgroundColor: "black", margin: "0.3em 0.5em", color: "white" }} label={keyword} key={keyword} onDelete={() => deleteKeyword(keyword)} deleteIcon={<DeleteIcon style={props.contrast === "" ? {} : { color: "white" }} />} />
- )
+ <FormHelperText>
+ {
+ keywords.map( (keyword) =>
+ <Chip label={keyword} key={keyword} onDelete={() => {resettingRef.current = true; deleteKeyword(keyword);}} />
+ )
+ }
+ </FormHelperText>
}
</React.Fragment>
)
}
-const SizedBox = styled.div`
- height: 2em;
-`
-
export default memo(Keywords)
diff --git a/src/Components/UploadPageComponents/Forms/NewTitle.js b/src/Components/UploadPageComponents/Forms/NewTitle.js
index c1e5f897..b5d27708 100644
--- a/src/Components/UploadPageComponents/Forms/NewTitle.js
+++ b/src/Components/UploadPageComponents/Forms/NewTitle.js
@@ -16,65 +16,46 @@ 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, memo } from 'react'
+import React, {useState, memo} from 'react'
import FormControl from '@material-ui/core/FormControl';
-import { StyledTextField, StyledFormLabel } from '../StyledComponents.js'
-import { makeStyles } from "@material-ui/styles";
+import {StyledTextField, StyledFormLabel} from '../StyledComponents.js'
+import FormHelperText from '@material-ui/core/FormHelperText';
-const useStyles = makeStyles(theme => ({
- darkTextField: {
- maxWidth: "100%",
- fontSize: "15px",
- fontWeight: "lighter",
- color: "white",
- width: "100%",
- },
- lightTextField: {
- maxWidth: "100%",
- fontSize: "15px",
- fontWeight: "lighter",
- color: "black",
- width: "100%",
- }
-}));
+function NewTitle (props) {
-function NewTitle(props) {
- const classes = useStyles();
const [objTitle, setFormValue] = useState({
- error: false,
- value: props.initialValue ? props.initialValue : ""
+ error : false,
+ value : props.initialValue ? props.initialValue : ""
})
const handleChangeTitle = (e) => {
let userInput = e.target.value
let flag = (userInput.length > 100 || userInput.length === 0 ? true : false)
- setFormValue({
- ...objTitle,
- error: flag,
- value: userInput
+ setFormValue({...objTitle,
+ error : flag,
+ value : userInput
})
}
return (
- <FormControl required={true} style={{ width: "100%", height: "100px" }}>
- <StyledFormLabel contrast={props.contrast} component="legend" style={{ fontSize: "14px", marginBottom: "10px" }}>
+ <FormControl required={true} style={{width : "100%", height : "100px"}}>
+ <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
<b>TÃtulo do Recurso</b>
</StyledFormLabel>
<StyledTextField
- contrast={props.contrast}
- id={"title-form"}
- placeholder="Ex: Jogo Virtual sobre os Biomas do Brasil"
- type={"text"}
- value={objTitle.value}
- variant="outlined"
- onChange={e => { handleChangeTitle(e) }}
- helperText={objTitle.value.length + "/100"}
- InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
- error={objTitle.error}
+ id = {"title-form"}
+ placeholder={"Ex: Jogo Virtual sobre os Biomas do Brasil"}
+ type = {"text"}
+ value = {objTitle.value}
+ onChange = {e => {handleChangeTitle(e)}}
+ helperText = {objTitle.value.length + "/100"}
+ error = {objTitle.error}
fullWidth
multiline
- onBlur={() => { props.onBlurCallback("name", objTitle.value, props.draftID) }}
- />
+ onBlur={() => {props.onBlurCallback("name", objTitle.value, props.draftID)}}
+ />
+ {objTitle.value.length === 0 && objTitle.error &&
+ <FormHelperText style={{fontSize : "14px", position : "relative", top : "-26px"}}>Faltou definir um tÃtulo.</FormHelperText>}
</FormControl>
)
}
diff --git a/src/Components/UploadPageComponents/Forms/SobreORecurso.js b/src/Components/UploadPageComponents/Forms/SobreORecurso.js
index f0c43d9e..ff82f818 100644
--- a/src/Components/UploadPageComponents/Forms/SobreORecurso.js
+++ b/src/Components/UploadPageComponents/Forms/SobreORecurso.js
@@ -19,42 +19,20 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, {useState, memo} from 'react'
import FormControl from '@material-ui/core/FormControl';
import {StyledTextField, StyledFormLabel} from '../StyledComponents.js'
-import { makeStyles } from "@material-ui/styles";
-
-const useStyles = makeStyles(theme => ({
- darkTextField: {
- maxWidth: "100%",
- fontSize: "15px",
- fontWeight: "lighter",
- color: "white",
- width: "100%",
- },
- lightTextField: {
- maxWidth: "100%",
- fontSize: "15px",
- fontWeight: "lighter",
- color: "black",
- width: "100%",
- }
-}));
function SobreORecurso (props) {
- const classes = useStyles();
const [objDescription, setDescription] = useState(props.initialValue ? props.initialValue : '')
const handleSetDescription = (event) => {setDescription(event.target.value)}
return (
<FormControl style={{width : "100%"}}>
- <StyledFormLabel contrast={props.contrast} component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
- <span><b>Descrição geral do Recurso</b> (Opcional)</span>
+ <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
+ <b>Descrição geral do Recurso</b> (Opcional)
</StyledFormLabel>
<StyledTextField
- InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
- contrast = {props.contrast}
id = {"description-form"}
placeholder={"Quais assuntos são contemplados neste Recurso? Para quais objetivos este Recurso pode ser destinado?"}
- variant='outlined'
type = {"text"}
value={objDescription}
onChange={handleSetDescription}
diff --git a/src/Components/UploadPageComponents/Forms/TipoDeRecurso.js b/src/Components/UploadPageComponents/Forms/TipoDeRecurso.js
index d55daaae..4e7a9f29 100644
--- a/src/Components/UploadPageComponents/Forms/TipoDeRecurso.js
+++ b/src/Components/UploadPageComponents/Forms/TipoDeRecurso.js
@@ -16,28 +16,28 @@ 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, memo } from 'react'
+import React, {useState, memo} from 'react'
import FormControl from '@material-ui/core/FormControl';
-import { StyledRadio, StyledFormLabel } from '../StyledComponents.js'
+import {StyledRadio, StyledFormLabel} from '../StyledComponents.js'
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
+
-
-function TipoDeRecurso(props) {
+function TipoDeRecurso (props) {
const [objTypeValue, chooseObjType] = useState(props.initialValue ? props.initialValue : 0)
- const handleChangeObjType = (event) => { chooseObjType(Number(event.target.value)) }
+ const handleChangeObjType = (event) => {chooseObjType(Number(event.target.value))}
return (
- <FormControl required={true} style={{ width: "100%" }} onBlur={() => { props.onBlurCallback("object_type_id", objTypeValue, props.draftID) }}>
- <StyledFormLabel contrast={props.contrast} component="legend" style={{ fontSize: "14px", marginBottom: "10px" }}>
+ <FormControl required={true} style={{width : "100%"}} onBlur={() => {props.onBlurCallback("object_type_id", objTypeValue, props.draftID)}}>
+ <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
<b>Tipo de recurso</b>
</StyledFormLabel>
- <RadioGroup aria-label="Tipo de Recurso" name="Tipo de Recurso" row value={objTypeValue} onChange={handleChangeObjType} style={{ justifyContent: "center" }}>
+ <RadioGroup aria-label="Tipo de Recurso" name="Tipo de Recurso" row value={objTypeValue} onChange={handleChangeObjType} style={{justifyContent : "center"}}>
{
- props.objTypes.map((type) =>
- <FormControlLabel key={type.id} value={type.id}
- control={<StyledRadio contrast={props.contrast} label={type.name} checked={objTypeValue === type.id} />}
+ props.objTypes.map( (type) =>
+ <FormControlLabel key={type.id} value={type.id}
+ control={<StyledRadio label={type.name} checked={objTypeValue === type.id}/>}
/>
)
diff --git a/src/Components/UploadPageComponents/GetIconByName.js b/src/Components/UploadPageComponents/GetIconByName.js
index b19857c0..d3c40d37 100644
--- a/src/Components/UploadPageComponents/GetIconByName.js
+++ b/src/Components/UploadPageComponents/GetIconByName.js
@@ -14,6 +14,7 @@ import { ReactComponent as VideoIcon } from '../../img/object_type_icons/object-
import { ReactComponent as AnimacaoIcon } from '../../img/object_type_icons/object-type_animacao.svg'
import { ReactComponent as PlanoAulaIcon } from '../../img/object_type_icons/object-type_plano-de-aula.svg'
+
import { ReactComponent as Arte } from '../../img/subject_icons/subject_arte.svg'
import { ReactComponent as Biologia } from '../../img/subject_icons/subject_biologia.svg'
import { ReactComponent as CienciasNatureza } from '../../img/subject_icons/subject_ciencias-da-natureza.svg'
@@ -124,7 +125,7 @@ export default function GetIconByName(objName) {
case "vÃdeo":
return <VideoIcon className="icon" />;
case "animação":
- return <AnimacaoIcon className="icon"/>;
+ return <AnimacaoIcon className="icon" />;
default:
return <OutrosIcon className="icon" />;
}
diff --git a/src/Components/UploadPageComponents/ModalCancelar.js b/src/Components/UploadPageComponents/ModalCancelar.js
index b7569f16..fcfbc9b2 100644
--- a/src/Components/UploadPageComponents/ModalCancelar.js
+++ b/src/Components/UploadPageComponents/ModalCancelar.js
@@ -29,6 +29,7 @@ export default function ModalCancelar (props) {
function handleSuccess (data) {
props.handleClose()
+ console.log('ir pra home')
}
const handleDelete = () => {
@@ -54,15 +55,15 @@ export default function ModalCancelar (props) {
}}
>
<Fade in={props.open}>
- <Container contrast={props.contrast}>
+ <Container>
<Content>
<h2>Tem certeza que deseja cancelar?</h2>
<p>Ao clicar no botão "OK", o seu recurso NÃO será salvo.</p>
</Content>
<ButtonsArea>
- <StyledButton contrast={props.contrast} onClick={props.handleClose}>VOLTAR</StyledButton>
- <Link to="/">
- <StyledButton contrast={props.contrast} onClick={handleDelete}>OK</StyledButton>
+ <StyledButton onClick={props.handleClose}>VOLTAR</StyledButton>
+ <Link to="/" style={{textDecoration : "none !important"}}>
+ <StyledButton onClick={handleDelete}>OK</StyledButton>
</Link>
</ButtonsArea>
</Container>
@@ -88,12 +89,14 @@ const Content = styled.div`
margin-top : 0;
font-size : 20px;
font-weight : bold;
+ color : #666;
margin-bottom : 10px;
}
p {
margin : 0 0 10px;
font-size : 14px;
+ color : #666;
}
`
@@ -111,11 +114,8 @@ const StyledModal = styled(Modal)`
`
const Container = styled.div`
- background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
- color: ${props => props.contrast === "" ? "#666" : "white"} !important;
- border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
-
box-sizing : border-box;
+ background-color : white;
max-width : none;
align : center;
display : flex;
@@ -132,12 +132,14 @@ const Container = styled.div`
}
`
const StyledButton = styled(Button)`
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"} !important;
- text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
-
+ &:hover {
+ background-color : rgba(158,158,158,0.2) !important;
+ }
max-height : 36px !important;
background-color : transparent !important;
+ color : #00bcd4 !important;
+ text-decoration : none !important;
outline : none !important;
text-align : center !important;
diff --git a/src/Components/UploadPageComponents/PartOne.js b/src/Components/UploadPageComponents/PartOne.js
index 66c18a51..250428db 100644
--- a/src/Components/UploadPageComponents/PartOne.js
+++ b/src/Components/UploadPageComponents/PartOne.js
@@ -16,8 +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, useEffect, useContext, useRef } from 'react'
-import { Store } from '../../Store.js'
+import React, {useState, useEffect, useContext, useRef} from 'react'
+import {Store} from '../../Store.js'
import Grid from '@material-ui/core/Grid';
import ButtonsDiv from './ButtonsDiv.js'
import SobreORecurso from './Forms/SobreORecurso.js'
@@ -26,14 +26,14 @@ import Keywords from './Forms/Keywords.js'
import Autor from './Forms/Autor.js'
import TipoDeRecurso from './Forms/TipoDeRecurso.js'
import Idioma from './Forms/Idioma.js'
-import { SendInfo } from './SendInfo.js'
-import { getRequest } from '../HelperFunctions/getAxiosConfig.js'
+import {SendInfo} from './SendInfo.js'
+import {getRequest} from '../HelperFunctions/getAxiosConfig.js'
import SnackBar from '../../Components/SnackbarComponent';
import LoadingSpinner from '../../Components/LoadingSpinner'
-export default function PartOne(props) {
+export default function PartOne (props) {
// {/*const [subjects, setSubjects] = useState([])*/}
- const { state } = useContext(Store)
+ const {state} = useContext(Store)
const didMountRef = useRef(false);
const didMountRefObj = useRef(false);
@@ -68,23 +68,23 @@ export default function PartOne(props) {
})
}
- function checkPartOne(data) {
+ function checkPartOne (data) {
return (
- data.name !== null &&
- data.tags.length !== 0 &&
- data.author !== null &&
- data.object_type !== null &&
+ data.name !== null &&
+ data.tags.length !== 0 &&
+ data.author !== null &&
+ data.object_type !== null &&
data.language.length !== 0 &&
(data.attachments.length !== 0 ||
- data.link !== null)
+ data.link !== null)
)
}
- function handleSuccessGetObjTypes(data) {
+ function handleSuccessGetObjTypes (data) {
setObjTypes(data.sort((a, b) => (a.name) > (b.name) ? 1 : -1))
}
- function handleSuccessGetFormData(data) {
+ function handleSuccessGetFormData (data) {
if (checkPartOne(data)) {
props.stepperControl(1)
} else {
@@ -98,40 +98,40 @@ export default function PartOne(props) {
}
}
- function handleSuccessfulGet(data) {
+ function handleSuccessfulGet (data) {
setLearningObject(data)
}
- useEffect(() => {
- getRequest(`/object_types/`, handleSuccessGetObjTypes, (error) => { console.log(error) })
- getRequest(`/languages/`, (data) => { setLanguages(data) }, (error) => { console.log(error) })
+ useEffect( () => {
+ getRequest(`/object_types/`, handleSuccessGetObjTypes, (error) => {console.log(error)})
+ getRequest(`/languages/`, (data) => {setLanguages(data)}, (error) => {console.log(error)})
const url = `/learning_objects/${props.draftID}`
- getRequest(url, handleSuccessfulGet, (error) => { console.log(error) })
+ getRequest(url, handleSuccessfulGet, (error) => {console.log(error)})
}, [])
- useEffect(() => {
+ useEffect( () => {
if (didMountRef.current) {
- toggleLoading(false)
+ toggleLoading(false)
}
else {
- didMountRef.current = true;
+ didMountRef.current = true;
}
}, [learningObject])
- useEffect(() => {
+ useEffect( () => {
if (didMountRefObj.current) {
- toggleLoadingObj(false)
+ toggleLoadingObj(false)
}
else {
- didMountRefObj.current = true;
+ didMountRefObj.current = true;
}
}, [objTypes])
const handleSubmit = (e) => {
e.preventDefault();
- getRequest(`/learning_objects/${props.draftID}`,
- handleSuccessGetFormData,
+ getRequest(`/learning_objects/${props.draftID}`,
+ handleSuccessGetFormData,
() => {
const info = {
open: true,
@@ -140,7 +140,7 @@ export default function PartOne(props) {
color: 'red',
}
handleSnackInfo(info)
- }
+ }
)
}
@@ -157,65 +157,65 @@ export default function PartOne(props) {
!loading && !loadingObj ? (
<form onSubmit={handleSubmit}>
{/*------------------------------Titulo-----------------------------------------*/}
- <Grid item xs={12} style={{ paddingBottom: "40px" }}>
- <NewTitle contrast={props.contrast} draftID={props.draftID} onBlurCallback={SendInfo} initialValue={learningObject.name} />
+ <Grid item xs={12} style={{paddingBottom : "40px"}}>
+ <NewTitle draftID={props.draftID} onBlurCallback={SendInfo} initialValue={learningObject.name}/>
</Grid>
{/*------------------------------Sobre------------------------------------------*/}
- <Grid item xs={12} style={{ paddingBottom: "40px" }}>
- <SobreORecurso contrast={props.contrast} draftID={props.draftID} onBlurCallback={SendInfo} initialValue={learningObject.description} />
+ <Grid item xs={12} style={{paddingBottom : "40px"}}>
+ <SobreORecurso draftID={props.draftID} onBlurCallback={SendInfo} initialValue={learningObject.description}/>
</Grid>
{/*------------------------------Palavras-chave------------------------------------------*/}
- <Grid item xs={12} style={{ paddingBottom: "40px" }}>
- <Keywords contrast={props.contrast} draftID={props.draftID} onBlurCallback={SendInfo} initialValue={learningObject.tags !== undefined ? learningObject.tags.map((tag) => tag.name) : null} />
+ <Grid item xs={12} style={{paddingBottom : "40px"}}>
+ <Keywords draftID={props.draftID} onBlurCallback={SendInfo} initialValue={learningObject.tags !== undefined ? learningObject.tags.map((tag) => tag.name) : null}/>
</Grid>
{/*------------------------------Autor------------------------------------------*/}
- <Grid item xs={12} style={{ paddingBottom: "40px" }}>
- <Autor contrast={props.contrast} draftID={props.draftID} onBlurCallback={SendInfo}
+ <Grid item xs={12} style={{paddingBottom : "40px"}}>
+ <Autor draftID={props.draftID} onBlurCallback={SendInfo}
initialValue={
learningObject.author === state.currentUser.name ?
- 0 : 1
+ 0 : 1
}
initialOutroAutor={
learningObject.author !== state.currentUser.name ?
- learningObject.author : ''
+ learningObject.author : ''
}
/>
</Grid>
{/*------------------------------Tipo do Objeto------------------------------------------*/}
- <Grid item xs={12} style={{ paddingBottom: "40px" }}>
- <TipoDeRecurso contrast={props.contrast} objTypes={objTypes} draftID={props.draftID} onBlurCallback={SendInfo}
+ <Grid item xs={12} style={{paddingBottom : "40px"}}>
+ <TipoDeRecurso objTypes={objTypes} draftID={props.draftID} onBlurCallback={SendInfo}
initialValue={learningObject.object_type !== undefined && learningObject.object_type !== null ? objTypes.filter((type) => type.name === learningObject.object_type)[0].id : null}
/>
</Grid>
{/*------------------------------Idioma------------------------------------------*/}
- <Grid item xs={12} style={{ paddingBottom: "40px" }}>
- <Idioma contrast={props.contrast} languages={languages} draftID={props.draftID} onBlurCallback={SendInfo}
- initialValue={learningObject.language !== undefined ? learningObject.language.map((language) => language.name) : null} initialIDValues={learningObject.language !== undefined ? learningObject.language.map((language) => language.id) : null}
- />
+ <Grid item xs={12} style={{paddingBottom : "40px"}}>
+ <Idioma languages={languages} draftID={props.draftID} onBlurCallback={SendInfo}
+ initialValue={learningObject.language !== undefined ? learningObject.language.map((language) => language.name) : null} initialIDValues={learningObject.language !== undefined ? learningObject.language.map((language) => language.id) : null}
+ />
</Grid>
{/*------------------------------Botoes------------------------------------------*/}
<Grid item xs={12}>
- <ButtonsDiv contrast={props.contrast} draftID={props.draftID} stepperControl={props.stepperControl} />
+ <ButtonsDiv draftID={props.draftID} stepperControl={props.stepperControl}/>
</Grid>
- <Grid item xs={12} style={{ marginTop: "20px" }}>
- <span style={props.contrast === "" ? { marginTop: "20px", fontWeight: "200", color: "#a5a5a5", paddingLeft: "10px" } : { marginTop: "20px", fontWeight: "200", color: "white", paddingLeft: "10px" }}>
+ <Grid item xs={12} style={{marginTop : "20px"}}>
+ <span style={{marginTop : "20px", fontWeight : "200", color : "#a5a5a5", paddingLeft : "10px"}}>
* Campos obrigatórios
</span>
</Grid>
</form>
)
- :
- (
- <LoadingSpinner contrast={props.contrast} text={"CARREGANDO"} />
- )
+ :
+ (
+ <LoadingSpinner text={"CARREGANDO"}/>
+ )
}
- </React.Fragment >
+ </React.Fragment>
)
}
diff --git a/src/Components/UploadPageComponents/PartThree.js b/src/Components/UploadPageComponents/PartThree.js
index 19a4ac03..5170659c 100644
--- a/src/Components/UploadPageComponents/PartThree.js
+++ b/src/Components/UploadPageComponents/PartThree.js
@@ -22,6 +22,8 @@ import Grid from '@material-ui/core/Grid';
import styled from 'styled-components'
import { apiDomain } from '../../env';
import Stepper from './Stepper.js'
+import Rating from '@material-ui/lab/Rating';
+import StarBorderIcon from '@material-ui/icons/StarBorder';
import LoadingSpinner from '../LoadingSpinner.js'
import MoreIcon from '@material-ui/icons/More';
import SdCardIcon from '@material-ui/icons/SdCard';
@@ -34,9 +36,6 @@ import ModalCancelar from './ModalCancelar.js'
import { getDefaultThumbnail } from '../HelperFunctions/getDefaultThumbnail'
import { getRequest } from '../HelperFunctions/getAxiosConfig.js'
import ReCaptcha from 'react-recaptcha'
-import Chip from '@material-ui/core/Chip'
-import Rating from '@material-ui/lab/Rating';
-import StarBorderIcon from '@material-ui/icons/StarBorder';
export default function PartThree(props) {
var moment = require('moment')
@@ -50,10 +49,14 @@ export default function PartThree(props) {
const [author, setAuthor] = useState('')
function handleSuccess(data) {
+ console.log(data.tags)
+ console.log(data.language)
+ console.log(data.subjects)
+ // console.log(data.tags)
setDraft(data)
/*extract subjects*/
- setSubjects(data.subjects.map((subject) => (subject.name)).join(', '))
+ setSubjects(data.subjects.map((subject)=>(subject.name)).join(', '))
// setTags(data.tags.map(tag => tag.name))
setDescription(data.description)
setAuthor(data.author)
@@ -70,6 +73,7 @@ export default function PartThree(props) {
}
}, [state.currentUser.id])
+ let windowWidth = window.innerWidth
const [modalCancelar, toggleModalCancelar] = useState(false)
const checkAccessLevel = (levelToCheck) => {
@@ -82,7 +86,7 @@ export default function PartThree(props) {
return (state.currentUser.roles.filter((role) => role.name === userRole).length > 0)
}
- function captchaVerified(response) {
+ function captchaVerified (response) {
if (response) {
setButtonAvailability(false)
}
@@ -95,293 +99,416 @@ export default function PartThree(props) {
(
<React.Fragment>
<ModalCancelar
- contrast={props.contrast}
open={modalCancelar}
handleClose={() => { toggleModalCancelar(false) }}
draftID={draft.id}
/>
- <Grid container style={props.contrast === "" ? { backgroundColor: "#f4f4f4" } : { backgroundColor: "black" }}>
+ <Grid container style={{ backgroundColor: "#f4f4f4" }}>
<Grid item xs={12}>
- <StyledSessao1 contrast={props.contrast} className="page-content-preview">
- <div className='header'>
- <Stepper activeStep={props.activeStep} contrast={props.contrast} />
- <h2>Quase lá, agora só falta publicar!</h2>
- <span className="subtitle">Veja abaixo como o seu Recurso vai aparecer na Plataforma:</span>
+ <StyledSessao1 className="page-content-preview">
+ <div className="cabecalho">
+ <div className="feedback-upload">
+ <Stepper activeStep={props.activeStep} />
+ <h2>Quase lá, agora só falta publicar!</h2>
+ <span className="subtitle">Veja abaixo como o seu Recurso vai aparecer na Plataforma:</span>
+ </div>
</div>
</StyledSessao1>
- <MainContent contrast={props.contrast} >
- <CaixaContainer contrast={props.contrast} container spacing={2} className='draft-info'>
- <Grid item xs={12} md={4}>
- <img alt="" style={{ width: "100%", height: '100%' }}
+ <CaixaContainer>
+ <div>
+ <div className="cabecalho-objeto">
+ <img alt="" className="img-objeto"
src={draft.thumbnail === null ? getDefaultThumbnail(draft.object_type) : apiDomain + draft.thumbnail} />
- </Grid>
- <Grid item xs={12} md={8}>
- <Grid container justify='space-between'>
- <Grid item xs={12}>
- <h3>{draft.name}</h3>
- </Grid>
- <Grid item xs={12}>
- <Grid container spacing={1}>
- <Grid item xs={12}>
- <Rating
- readOnly
- name="customized-empty"
- value={draft.score}
- precision={0.5}
- style={props.contrast === "" ? { color: "#666" } : { color: "white" }}
- emptyIcon={<StarBorderIcon style={props.contrast === "" ? { color: "#666" } : { color: "white" }} fontSize="inherit" />}
- />
- </Grid>
- <Grid item xs={12}>
- Relacionado com: {subjects}
- </Grid>
- <Grid item xs={12}>
- {
- draft.tags &&
- draft.tags.map((tag) => {
- return (
- <Chip className='tag' key={tag.name} label={tag.name} />
- )
- })
- }
- </Grid>
- </Grid>
- </Grid>
- </Grid>
- </Grid>
- </CaixaContainer>
- </MainContent>
- <MainContent contrast={props.contrast}>
- <CaixaContainer contrast={props.contrast} container spacing={2}>
- <Grid item xs={12}>
- <h1 className='title'>
- Sobre o recurso
- </h1>
- </Grid>
- <Grid item xs={12}>
- <hr />
- </Grid>
- <Grid item xs={12} sm={6}>
+ <div className="texto-objeto">
+ <h3>{draft.name}</h3>
+ <div className="rating-objeto">
+ <Rating
+ name="customized-empty"
+ value={draft.score}
+ precision={0.5}
+ style={{ color: "#666" }}
+ emptyIcon={<StarBorderIcon fontSize="inherit" />}
+ />
+ </div>
+
+ <div className="relacionado">
+ Relacionado com: {subjects}
+ </div>
+
+ {
+ draft.tags &&
+ <div className="tags-objeto">
+ {draft.tags.map((tag) => {
+ return (
+ <div className="tag" key={tag.name}>{tag.name}</div>
+ )
+ })}
+ </div>
+ }
+
+ </div>
+ </div>
+
+ <div className="sobre-objeto">
<Grid container>
- <Grid item xs={12}>
- {
- description !== '' &&
- <p>
- <b>Descrição:</b>
- <br />
- {description}
- </p>
- }
- </Grid>
- <Grid item xs={12}>
- {
- author !== '' &&
- <p>
- <b>Autoria:</b>
- <br />
- {author}
- </p>
- }
- </Grid>
- </Grid>
- </Grid>
- <Grid item xs={12} sm={6}>
- <Grid container spacing={1}>
- <Grid item xs={12}>
- <Grid container direction='row' spacing={1} alignItems='center'>
- <Grid item>
- <MoreIcon />
- </Grid>
- <Grid item>
- <b>Tipo de mÃdia: </b>{draft.object_type}
- </Grid>
- </Grid>
+ <Grid item xs={windowWidth > 990 ? 7 : 12} className="left">
+ <div className="titulo">
+ Sobre o Recurso
+ </div>
+ <div className="sobre-conteudo">
+ <p className="descricao">{description}</p>
+ {
+ author !== '' &&
+ <p className="autor">
+ <b>Autoria:</b>
+ <br />
+ {author}
+ </p>
+ }
+ </div>
</Grid>
- <Grid item xs={12}>
- <Grid container direction='row' spacing={1} alignItems='center'>
- <Grid item>
- <SdCardIcon />
- </Grid>
- <Grid item>
- <b>Tamanho: </b>{draft.attachments ? (draft.attachments[0].size / 1000000).toFixed(2) + ' Mb' : "Informação não disponÃvel"}
- </Grid>
- </Grid>
- </Grid>
+ <Grid item xs={windowWidth > 990 ? 4 : 12} className="right">
+ <span className="meta-objeto">
+ <MoreIcon /> <b>Tipo de mÃdia: </b>{draft.object_type}
+ </span>
- <Grid item xs={12}>
- <Grid container direction='row' spacing={1} alignItems='center'>
- <Grid item>
- <DateRangeIcon />
- </Grid>
- <Grid item>
- <b>Enviado: </b>
- {moment(draft.created_at).format("DD/MM/YYYY")}
- </Grid>
- </Grid>
- </Grid>
+ <span className="meta-objeto">
+ <SdCardIcon /> <b>Tamanho: </b>
+ </span>
- <Grid item xs={12}>
- <Grid container direction='row' spacing={1} alignItems='center'>
- <Grid item>
- <UpdateIcon />
- </Grid>
- <Grid item>
- <b>Atualização: </b>
- {moment(draft.updated_at).format("DD/MM/YYYY")}
- </Grid>
- </Grid>
- </Grid>
+ <span className="meta-objeto">
+ <DateRangeIcon /> <b>Enviado: </b>
+ {moment(draft.created_at).format("DD/MM/YYYY")}
+ </span>
+
+ <span className="meta-objeto">
+ <UpdateIcon /><b>Atualização: </b>
+ {moment(draft.updated_at).format("DD/MM/YYYY")}
+ </span>
- <Grid item xs={12}>
- {draft.language &&
+ { draft.language &&
draft.language.map((language =>
- <Grid key={language.id} container direction='row' spacing={1} alignItems='center'>
- <Grid item>
- <TranslateIcon />
- </Grid>
- <Grid item>
- <b>Idioma: </b>{language.name}
- </Grid>
- </Grid>
+ <span className="meta-objeto" key={language.id}>
+ <TranslateIcon /><b>Idioma: </b>{language.name}
+ </span>
))
}
- </Grid>
-
- <Grid item xs={12}>
- <Grid container direction='row' spacing={1} alignItems='center'>
- <Grid item>
- <AssignmentIcon />
- </Grid>
- <Grid item>
- <b>Licença: </b>{draft.license ? draft.license.name : "Informação não disponÃvel"}
- </Grid>
- </Grid>
+ <span className="meta-objeto">
+ <AssignmentIcon /><b>Licença: </b>{draft.license ? draft.license.name : ""}
+ </span>
</Grid>
</Grid>
- </Grid>
- </CaixaContainer>
- </MainContent>
- <MainContent contrast={props.contrast}>
- <CaixaContainer contrast={props.contrast} container spacing={2} justify='center' alignItems='center'>
- <Grid item xs={12} className='center'>
- <Grid container direction='row' alignItems='center' justify='space-between' >
- <Grid item>
- <h4>
- Para segurança da plataforma marque que você não é um robô
- </h4>
- </Grid>
- <Grid item>
- {
- //<ReCaptcha sitekey={process.env.REACT_APP_SITE_KEY} verifyCallback={captchaVerified} /> //when key set in env
- <ReCaptcha sitekey="6LfxuKUUAAAAAIzYpCzEtJyeE8QRjBYa44dvHlTX" verifyCallback={captchaVerified} /> //use this one on production
- //<ReCaptcha sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" verifyCallback={captchaVerified} /> //test key, from google, do not use this one on production
- }
- </Grid>
+ </div>
+ </div>
+ </CaixaContainer>
+ <Sessao3>
+ <form>
+ <Grid container>
+ <Grid item xs={windowWidth > 990 ? 6 : 12} style={{ paddingRight: "15px", paddingLeft: "15px", textAlign: windowWidth > 990 ? 'right' : 'center' }}>
+ <span style={{ fontSize: "14px" }}>
+ Para segurança da plataforma <br /> marque que você não é um robô
+ </span>
</Grid>
- </Grid>
- <Grid item xs={12} className='center'>
- <Grid container direction='row' spacing={1} alignItems='center' justify='center'>
- <Grid item>
- <GrayButton contrast={props.contrast} onClick={() => { props.stepperControl(-1) }}>VOLTAR</GrayButton>
- </Grid>
- <Grid item>
- <GrayButton contrast={props.contrast} onClick={() => { toggleModalCancelar(true) }}>CANCELAR</GrayButton>
- </Grid>
- <Grid item>
- {
- checkAccessLevel("partner") ?
- (
- unavailableButton ? (
- <GrayButton contrast={props.contrast} disabled={unavailableButton}>PUBLICAR RECURSO</GrayButton>
- )
- :
- (
- <OrangeButton contrast={props.contrast} onClick={props.handlePost}>PUBLICAR RECURSO</OrangeButton>
- )
+ <Grid item xs={windowWidth > 990 ? 6 : 12} style={{ paddingRight: "15px", paddingLeft: "15px"}}>
+ <div style={{margin:"0 auto", width: "304px"}}>
+ {
+ //<ReCaptcha sitekey={process.env.REACT_APP_SITE_KEY} verifyCallback={captchaVerified} /> //when key set in env
+ <ReCaptcha sitekey="6LfxuKUUAAAAAIzYpCzEtJyeE8QRjBYa44dvHlTX" verifyCallback={captchaVerified} /> //use this one on production
+ //<ReCaptcha sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" verifyCallback={captchaVerified} /> //test key, from google, do not use this one on production
+ }
+ </div>
+ </Grid>
+ <Grid item xs={12} style={{ paddingRight: "15px", paddingLeft: "15px", marginTop: "30px", textAlign: 'center' }}>
+ <GrayButton onClick={() => { props.stepperControl(-1) }}>VOLTAR</GrayButton>
+ <GrayButton onClick={() => { toggleModalCancelar(true) }}>CANCELAR</GrayButton>
+ {
+ checkAccessLevel("partner") ?
+ (
+ unavailableButton ? (
+ <GrayButton disabled={unavailableButton}>PUBLICAR RECURSO</GrayButton>
)
:
(
- unavailableButton ? (
- <GrayButton contrast={props.contrast} disabled={unavailableButton}>SUBMETER RECURSO</GrayButton>
- )
- :
- (
- <OrangeButton contrast={props.contrast} onClick={props.handleSubmit}>SUBMETER RECURSO</OrangeButton>
- )
+ <OrangeButton onClick={props.handlePost}>PUBLICAR RECURSO</OrangeButton>
)
+ )
+ :
+ (
+ unavailableButton ? (
+ <GrayButton disabled={unavailableButton}>SUBMETER RECURSO</GrayButton>
+ )
+ :
+ (
+ <OrangeButton onClick={props.handleSubmit}>SUBMETER RECURSO</OrangeButton>
+ )
+ )
- }
- </Grid>
+ }
</Grid>
</Grid>
- </CaixaContainer>
- </MainContent>
+ </form>
+ </Sessao3>
</Grid>
</Grid>
</React.Fragment>
)
:
(
- <LoadingSpinner text="CARREGANDO" contrast={props.contrast} />
+ <LoadingSpinner text="CARREGANDO" />
)
}
- </React.Fragment >
+ </React.Fragment>
)
}
+const Sessao3 = styled.div`
+ position : relative;
+ top : -120px;
+ padding-right :15px;
+ padding-left :15px;
+ margin-right : auto;
+ margin-left : auto;
+ @media screen and (min-width: 768px) {
+ width : 750px;
+ }
+ @media screen and (min-width: 992px) {
+ width : 970px;
+ }
+ @media screen and (min-width: 1200px) {
+ width : 970px;
+ }
+ color : #666;
+ background-color : #f4f4f4;
-const MainContent = styled.div`
- color: ${props => props.contrast === "" ? "#666" : "white"};
- border-radius : 5px;
- padding : 20px 10px;
- width: 80%;
- margin: 1.5em auto;
- border: ${props => props.contrast === "" ? "none" : "1px solid white"};
- box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
`
-const CaixaContainer = styled(Grid)`
- width: 100%;
-
- .draft-info{
- padding : 10px 5px;
+const CaixaContainer = styled.div`
+ background-color : rgba(238,238,238,.5);
+ border-radius : 5px;
+ position : relative;
+ top : -145px;
+ padding : 10px;
+
+ margin-right : auto;
+ margin-left : auto;
+ @media screen and (min-width: 768px) {
+ width : 750px;
}
-
- .tag{
- color: ${props => props.contrast === "" ? "black" : "white"};
- background: ${props => props.contrast === "" ? "#d4d4d4" : "black"};
- border: ${props => props.contrast === "" ? "none" : "1px solid white"};
- margin: 0.2em;
+ @media screen and (min-width: 992px) {
+ width : 970px;
+ }
+ @media screen and (min-width: 1200px) {
+ width : 970px;
}
- .title{
- text-align: center;
- font-weight: lighter;
+
+ .cabecalho-objeto {
+ background-color:#fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ padding: 0;
+ margin-top: 30px;
+ margin-bottom: 30px;
+ position: relative;
+ min-height: 100px;
+ margin-top: 0;
+ margin-bottom: 10px;
+ color : #666;
+
+ .img-objeto {
+ background-color:#e5e5e5;
+ height: 270px;
+ width: 400px;
+ float: left;
+ padding: 0;
+ }
+
+ .texto-objeto {
+ padding: 20px 20px 0 20px;
+ height: content;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -ms-flex-wrap: nowrap;
+ flex-wrap: nowrap;
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+ -ms-flex-line-pack: center;
+ align-content: center;
+ -webkit-box-align: start;
+ -ms-flex-align: start;
+ align-items: flex-start;
+
+ h3 {
+ font-size: 26px;
+ font-weight: 400;
+ margin: 0;
+ padding-bottom: 15px;
+ }
+
+ .rating-objeto {
+ margin : 0;
+ display : inline-flex;
+ padding-bottom : 10px;
+ }
+
+ .relacionado {
+ font-weight : 500;
+ font-size : 13px;
+ }
+
+ .tags-objeto {
+ max-height: 54px;
+ font-size: .8em;
+ overflow: hidden;
+ clear: both;
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+
+ .tag {
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ margin-right: 3px;
+ background-color: #e5e5e5;
+ padding: 3px 7px;
+ border-radius: 15px;
+ line-height: 18px;
+ color: #666;
+ margin-bottom: 3px;
+ }
+ }
+ }
}
- .center{
- text-align: center;
+ .sobre-objeto {
+ margin-top : 0;
+ margin-bottom : 0;
+ min-height : 275px;
+ display : flex;
+ background-color: #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ padding: 0;
+ position: relative;
+ min-height: 500px;
+
+ .left {
+ @media screen and (min-width : 990px) {
+ margin-left : 4% !important;
+ margin-top : 4% !important;
+ }
+
+ @media screen and (max-width : 989px) {
+ margin : 0;
+ padding : 20px;
+ padding-bottom : 0;
+ }
+
+ .titulo {
+ margin-top: 2% !important;
+ margin-bottom: 10px;
+ font-family: 'Roboto Light','Roboto Regular',Roboto;
+ font-weight: 300;
+ font-style: normal;
+ color:#666;
+ font-size: 1.857em;
+ }
+
+ .sobre-conteudo {
+ flex : 1;
+ color : #666;
+ font-size : 14px !important;
+
+ .descricao {
+ text-align: justify;
+ margin-bottom: 20px;
+ margin-top: 20px;
+ }
+
+ .autor {
+ margin : 0 0 10px !important;
+ }
+ }
+ }
+
+ .right {
+ margin-top : 4% !important;
+ border-left: 1px solid #e5e5e5;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+ padding: 20px;
+ position : relative;
+ margin-bottom : 20px;
+
+ .meta-objeto {
+ position: relative;
+ width: 100%;
+ font-size: 14px;
+ color: #666;
+ margin-bottom: 20px;
+ display : inline-block;
+ }
+
+ .MuiSvgIcon-root {
+ vertical-align : middle !important;
+ margin-right : 15px !important;
+ }
+ }
}
+}
`
const StyledSessao1 = styled.div`
color : #fff;
- background: ${props => props.contrast === "" ? "#00bcd4" : "black"};
+ background-color : #00bcd4;
+ float : none;
height : 300px;
+ text-align : center;
padding-top : 48px;
padding-bottom : 48px;
- flex-direction : column;
- justify-content: center;
- align-items: center;
- display: flex;
-
- .header{
- width: 50%;
- margin: 0 auto;
- text-align: center;
+ margin-bottom : 30px;
+
+ .cabecalho {
+ display : flex;
+ flex-direction : column;
+ align-items : center;
+ margin-bottom : 30px;
+
+ .feedback-upload {
+ display : flex;
+ flex-direction : column;
+ justify-content : center;
+ text-align : center
+ margin-top : 20px;
+ width : 55%;
+ }
+
+ h2 {
+ margint-top : 0;
+ font-size : 26px;
+ font-weight : lighter;
+ margin-bottom : 10px;
+ }
+
+ .subtitle {
+ font-size : 16px;
+
+ }
}
`
diff --git a/src/Components/UploadPageComponents/PartTwo.js b/src/Components/UploadPageComponents/PartTwo.js
index 1c1cb116..cf65a4de 100644
--- a/src/Components/UploadPageComponents/PartTwo.js
+++ b/src/Components/UploadPageComponents/PartTwo.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, useRef } from 'react'
+import React, {useState, useEffect, useRef} from 'react'
import Grid from '@material-ui/core/Grid';
import styled from 'styled-components'
import DragAndDropThumbnail from './PartTwoComponents/DragAndDropThumbnail'
@@ -25,49 +25,26 @@ import Licenca from './PartTwoComponents/Licenca'
import Checkbox from '@material-ui/core/Checkbox';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormControl from '@material-ui/core/FormControl';
-import { StyledFormLabel } from './StyledComponents.js'
+import {StyledFormLabel} from './StyledComponents.js'
import ButtonsDiv from './ButtonsDiv.js'
import SubjectsAndThemes from './PartTwoComponents/SubjectsAndThemes.js'
-import { SendInfo } from './SendInfo.js'
+import {SendInfo} from './SendInfo.js'
import EditThumbnail from './PartTwoComponents/EditThumbnail.js'
import DisplayThumbnail from './PartTwoComponents/DisplayThumbnail.js'
import CustomCircularProgress from './PartTwoComponents/CustomCircularProgress';
-import { getRequest, putRequest } from '../HelperFunctions/getAxiosConfig.js'
+import {getRequest, putRequest} from '../HelperFunctions/getAxiosConfig.js'
import SnackBar from '../../Components/SnackbarComponent';
import LoadingSpinner from '../../Components/LoadingSpinner'
-import { yellow, blue } from "@material-ui/core/colors";
-import { withStyles } from '@material-ui/core/styles';
-
-const BlueCheckBox = withStyles({
- root: {
- color: blue[400],
- '&$checked': {
- color: blue[600],
- },
- },
- checked: {},
-})((props) => <Checkbox color="default" {...props} />);
-
-const ContrastCheckBox = withStyles({
- root: {
- color: yellow[400],
- '&$checked': {
- color: yellow[600],
- },
- },
- checked: {},
-})((props) => <Checkbox color="default" {...props} />);
-
-export function LoadingDiv(props) {
+export function LoadingDiv () {
return (
- <div style={props.contrast === "" ? { width: "100%", display: "flex", alignItems: "center", justifyContent: "center", color: "#666" } : { width: "100%", display: "flex", alignItems: "center", justifyContent: "center", color: "white" }}>
- <CustomCircularProgress contrast={props.contrast} /> CARREGANDO IMAGEM
+ <div style={{width : "100%", display : "flex", alignItems : "center", justifyContent : "center", color : "#666"}}>
+ <CustomCircularProgress/> CARREGANDO IMAGEM
</div>
)
}
-export default function PartTwo(props) {
+export default function PartTwo (props) {
const didMountRef = useRef(false);
const [eduStages, setEduStages] = useState([])
@@ -101,12 +78,12 @@ export default function PartTwo(props) {
})
}
- function handleSuccess(data) {
- setSubjects(data.filter(subject => subject.theme === false).sort((a, b) => a.name > b.name ? 1 : -1))
- setThemes(data.filter(subject => subject.theme === true).sort((a, b) => a.name > b.name ? 1 : -1))
+ function handleSuccess (data) {
+ setSubjects(data.filter(subject => subject.theme === false).sort((a,b) => a.name > b.name ? 1 : -1))
+ setThemes(data.filter(subject => subject.theme === true).sort((a,b) => a.name > b.name ? 1 : -1))
}
- function checkPartTwo(data) {
+ function checkPartTwo (data) {
return (
data.educational_stages.length !== 0 &&
data.subjects.length !== 0 &&
@@ -115,7 +92,7 @@ export default function PartTwo(props) {
)
}
- function handleSuccessGetFormData(data) {
+ function handleSuccessGetFormData (data) {
if (checkPartTwo(data)) {
props.stepperControl(1)
} else {
@@ -129,86 +106,82 @@ export default function PartTwo(props) {
}
}
- function handleSuccessfulGet(data) {
+ function handleSuccessfulGet (data) {
setLearningObject(data)
}
useEffect(() => {
- getRequest(`/educational_stages/`, (data) => { setEduStages(data) }, (error) => { console.log(error) })
+ getRequest(`/educational_stages/`, (data) => {setEduStages(data)}, (error) => {console.log(error)})
- getRequest(`/subjects/`, handleSuccess, (error) => { console.log(error) })
+ getRequest(`/subjects/`, handleSuccess, (error) => {console.log(error)})
const url = `/learning_objects/${props.draftID}`
- getRequest(url, handleSuccessfulGet, (error) => { console.log(error) })
+ getRequest(url, handleSuccessfulGet, (error) => {console.log(error)})
}, [])
- useEffect(() => {
+ useEffect( () => {
if (didMountRef.current) {
- toggleLoading(false)
+ console.log(learningObject);
+ toggleLoading(false)
}
else {
- didMountRef.current = true;
+ didMountRef.current = true;
}
}, [learningObject])
- /*------------------------Licenca------------------------*/
-
- const [termsCheckbox, setChecked] = useState(false)
- const toggleCheckbox = () => {
- setChecked(!termsCheckbox)
- }
+ /*------------------------Licenca------------------------*/
- const [thumbnail, setThumbnail] = useState('')
- const [tempUrl, setTempUrl] = useState('')
+ const [termsCheckbox, setChecked] = useState(false)
+ const toggleCheckbox = () => {
+ setChecked(!termsCheckbox)
+ }
- const acceptFile = (file) => {
- const objectURL = URL.createObjectURL(file)
- setTempUrl(objectURL)
- setThumbnailStage('editing')
- }
+ const [thumbnail, setThumbnail] = useState('')
+ const [tempUrl, setTempUrl] = useState('')
- const updateThumb = (newThumbnail) => {
- setThumbnail(newThumbnail)
- }
+ const acceptFile = (file) => {
+ const objectURL = URL.createObjectURL(file)
+ console.log(file)
+ setTempUrl(objectURL)
+ setThumbnailStage('editing')
+ }
+ const updateThumb = (newThumbnail) => {
+ setThumbnail(newThumbnail)
+ console.log(thumbnail)
+ }
- const handleDeleteThumb = () => {
- setThumbnail('');
- setTempUrl('');
- setThumbnailStage('default');
- }
+ const finalizeThumb = () => {
+ setThumbnailStage('uploading')
- const finalizeThumb = () => {
- setThumbnailStage('uploading')
+ const url = `/learning_objects/${props.draftID}`
- const url = `/learning_objects/${props.draftID}`
+ let fdThumb = new FormData()
+ fdThumb.set('learning_object[thumbnail]', thumbnail)
- let fdThumb = new FormData()
- fdThumb.set('learning_object[thumbnail]', thumbnail)
+ putRequest(url, fdThumb, (data) => {setThumbnailStage('done')}, (error) => {console.log(error)})
+ }
- putRequest(url, fdThumb, (data) => { setThumbnailStage('done') }, (error) => { console.log(error) })
- }
+ const [thumbnailStage, setThumbnailStage] = useState('default')
- const [thumbnailStage, setThumbnailStage] = useState('default')
+ const chooseRenderStageThumbnail = () => {
+ switch(thumbnailStage) {
+ case 'uploading':
+ return (<LoadingDiv/>)
+ case 'done':
+ return (<DisplayThumbnail acceptFile={acceptFile} thumbnail={thumbnail}/>)
+ case 'editing':
+ return (<EditThumbnail finalizeThumb={finalizeThumb} tempImgURL={tempUrl} updateThumb={updateThumb}/>)
+ default :
+ return (<DragAndDropThumbnail acceptFile={acceptFile}/>)
- const chooseRenderStageThumbnail = (contrast) => {
- switch (thumbnailStage) {
- case 'uploading':
- return (<LoadingDiv contrast={contrast} />)
- case 'done':
- return (<DisplayThumbnail handleDelete={handleDeleteThumb} acceptFile={acceptFile} contrast={contrast} thumbnail={thumbnail} />)
- case 'editing':
- return (<EditThumbnail contrast={contrast} finalizeThumb={finalizeThumb} tempImgURL={tempUrl} updateThumb={updateThumb} />)
- default:
- return (<DragAndDropThumbnail contrast={contrast} acceptFile={acceptFile} />)
+ }
+ }
- }
- }
-
- const handleSubmit = (e) => {
+ const handleSubmit = (e) => {
e.preventDefault();
- getRequest(`/learning_objects/${props.draftID}`,
- handleSuccessGetFormData,
+ getRequest(`/learning_objects/${props.draftID}`,
+ handleSuccessGetFormData,
() => {
const info = {
open: true,
@@ -217,11 +190,11 @@ export default function PartTwo(props) {
color: 'red',
}
handleSnackInfo(info)
- }
+ }
)
}
- return (
+ return (
<React.Fragment>
<SnackBar
snackbarOpen={snackInfo.open}
@@ -232,50 +205,50 @@ export default function PartTwo(props) {
/>
{
!loading ? (
- <form style={{ width: "100%" }} onSubmit={handleSubmit}>
- <Grid item xs={12} style={{ paddingBottom: "40px" }}>
- {chooseRenderStageThumbnail(props.contrast)}
+ <form style={{width : "100%"}} onSubmit={handleSubmit}>
+ <Grid item xs={12} style={{paddingBottom : "40px"}}>
+ {chooseRenderStageThumbnail()}
</Grid>
- <Grid item xs={12} style={{ paddingBottom: "40px" }}>
- <EducationalStage contrast={props.contrast} draftID={props.draftID} eduStages={eduStages} onBlurCallback={SendInfo}
+ <Grid item xs={12} style={{paddingBottom : "40px"}}>
+ <EducationalStage draftID={props.draftID} eduStages={eduStages} onBlurCallback={SendInfo}
initialValue={learningObject.educational_stages !== null ? learningObject.educational_stages.map((stage) => String(stage.id)) : null}
/>
</Grid>
- <SubjectsAndThemes contrast={props.contrast} draftID={props.draftID} subjects={subjects} themes={themes} onUploadPage={true} onBlurCallback={SendInfo}
+ <SubjectsAndThemes draftID={props.draftID} subjects={subjects} themes={themes} onUploadPage={true} onBlurCallback={SendInfo}
initialValue={learningObject.subjects !== null ? learningObject.subjects.map(subject => String(subject.id)) : null}
/>
- <Grid item xs={12} style={{ paddingBottom: "40px" }}>
- <Licenca contrast={props.contrast} draftID={props.draftID} onBlurCallback={SendInfo} initialValue={learningObject.license ? learningObject.license.id : null} />
- </Grid>
+ <Grid item xs={12} style={{paddingBottom : "40px"}}>
+ <Licenca draftID={props.draftID} onBlurCallback={SendInfo} initialValue={learningObject.license ? learningObject.license.id : null}/>
+ </Grid>
- <Grid item xs={12} style={{ paddingBottom: "40px" }}>
- <StyledFormControl required contrast={props.contrast}>
- <StyledFormLabel contrast={props.contrast} component="legend" style={{ fontSize: "14px", marginBottom: "10px" }} >
- <b>Confirme se você concorda com os <strong onClick={() => window.open("/termos/", "_blank")} style={props.contrast === "" ? { color: "#ff7f00", cursor: "pointer" } : { color: "yellow", textDecoration: "underline", cursor: "pointer" }}>termos de uso e de propriedade intelectual</strong></b>
+ <Grid item xs={12} style={{paddingBottom : "40px"}}>
+ <StyledFormControl required >
+ <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}} onClick={() => window.open("/termos/", "_blank")}>
+ <b>Confirme se você concorda com os <strong style={{color : "#ff7f00"}}>termos de uso e de propriedade intelectual</strong></b>
</StyledFormLabel>
- <FormControlLabel label={<span className="label">Li e concordo com os termos de uso e de propriedade intelectual.</span>} control={props.contrast === "" ? <BlueCheckBox checked={termsCheckbox} onChange={toggleCheckbox} /> : <ContrastCheckBox checked={termsCheckbox} onChange={toggleCheckbox} />}
- />
+ <FormControlLabel label={<span className="label">Li e concordo com os termos de uso e de propriedade intelectual.</span>} control={<Checkbox checked={termsCheckbox} onChange={toggleCheckbox}/>}
+ />
</StyledFormControl>
</Grid>
<Grid item xs={12}>
- <ButtonsDiv contrast={props.contrast} draftID={props.draftID} stepperControl={props.stepperControl} onPartTwo={true} />
+ <ButtonsDiv draftID={props.draftID} stepperControl={props.stepperControl} onPartTwo={true}/>
</Grid>
- <Grid item xs={12} style={{ marginTop: "20px" }}>
- <span style={props.contrast === "" ? { marginTop: "20px", fontWeight: "200", color: "#a5a5a5", paddingLeft: "10px" } : { marginTop: "20px", fontWeight: "200", color: "white", paddingLeft: "10px" }}>
+ <Grid item xs={12} style={{marginTop : "20px"}}>
+ <span style={{marginTop : "20px", fontWeight : "200", color : "#a5a5a5", paddingLeft : "10px"}}>
* Campos obrigatórios
</span>
</Grid>
</form>
)
- :
- (
- <LoadingSpinner contrast={props.contrast} text={"CARREGANDO"} />
- )
+ :
+ (
+ <LoadingSpinner text={"CARREGANDO"}/>
+ )
}
</React.Fragment>
)
@@ -288,8 +261,7 @@ const StyledFormControl = styled(FormControl)`
.label {
font-size : 14px !important;
- color: ${props => props.contrast === "" ? "#666" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ color : #666 !important;
font-weight : 200 !important;
}
`
diff --git a/src/Components/UploadPageComponents/PartTwoComponents/CustomCircularProgress.js b/src/Components/UploadPageComponents/PartTwoComponents/CustomCircularProgress.js
index 9de5008e..21640918 100644
--- a/src/Components/UploadPageComponents/PartTwoComponents/CustomCircularProgress.js
+++ b/src/Components/UploadPageComponents/PartTwoComponents/CustomCircularProgress.js
@@ -22,17 +22,14 @@ import CircularProgress from '@material-ui/core/CircularProgress';
const useStyles = makeStyles((theme) => ({
root: {
- color: "#666",
+ color : "#666",
},
- contrastRoot: {
- color: "white",
- }
}));
-export default function CustomCircularProgress(props) {
+export default function CustomCircularProgress () {
const classes = useStyles();
return (
- <CircularProgress className={props.contrast === "" ? classes.root : classes.contrastRoot} />
+ <CircularProgress className={classes.root}/>
);
}
diff --git a/src/Components/UploadPageComponents/PartTwoComponents/DisplayThumbnail.js b/src/Components/UploadPageComponents/PartTwoComponents/DisplayThumbnail.js
index 3cd8465d..0c07e151 100644
--- a/src/Components/UploadPageComponents/PartTwoComponents/DisplayThumbnail.js
+++ b/src/Components/UploadPageComponents/PartTwoComponents/DisplayThumbnail.js
@@ -17,12 +17,12 @@ 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 { StyledFormLabel } from '../StyledComponents.js'
+import {StyledFormLabel} from '../StyledComponents.js'
import AddAPhotoIcon from '@material-ui/icons/AddAPhoto';
import Grid from '@material-ui/core/Grid';
import styled from 'styled-components'
-export default function DisplayThumbnail(props) {
+export default function DisplayThumbnail (props) {
let windowWidth = window.innerWidth
const handleUpload = (e, selectorFiles) => {
@@ -32,42 +32,42 @@ export default function DisplayThumbnail(props) {
return (
<React.Fragment>
- <StyledFormLabel contrast={props.contrast} component="legend" style={{ fontSize: "14px", marginBottom: "10px" }}>
+ <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
{
props.onEditPage ?
- (
- <b style={{ fontWeight: "ligther" }}>Imagem ilustrativa do recurso</b>
- )
- :
- (
- <>
- <b>Editando Imagem</b>
- <span style={props.contrast === "" ? { color: "#a5a5a5" } : { color: "white" }}>(Deixe seu recurso completo, para que todos o entendam melhor.)</span>
- </>
- )
+ (
+ <b style={{fontWeight : "ligther"}}>Imagem ilustrativa do recurso</b>
+ )
+ :
+ (
+ <>
+ <b>Editando Imagem</b>
+ <span style={{color : "#a5a5a5"}}>(Deixe seu recurso completo, para que todos o entendam melhor.)</span>
+ </>
+ )
}
</StyledFormLabel>
- <ImagemCarregada container contrast={props.contrast}>
+ <ImagemCarregada container>
<Grid item xs={windowWidth > 990 ? 6 : 12}>
<div className="img-preview">
- <img alt="" src={props.thumbnail} />
+ <img alt="" src={props.thumbnail}/>
<div className="alterar-imagem">
- <input type="file" onChange={(e) => handleUpload(e, e.target.files)} id="upload-file-thumbnail" style={{ display: "none" }}
+ <input type="file" onChange = {(e) => handleUpload(e, e.target.files)} id="upload-file-thumbnail" style={{display : "none"}}
/>
- <label htmlFor="upload-file-thumbnail" style={{ height: "100%", width: "inherit", cursor: "pointer" }}>
+ <label htmlFor="upload-file-thumbnail" style={{height : "100%", width : "inherit", cursor : "pointer"}}>
<div className="interacoes">
- SUBSTITUIR <AddAPhotoIcon />
+ SUBSTITUIR <AddAPhotoIcon/>
</div>
</label>
- <div className="interacoes" onClick={() => { props.handleDelete() }}>
- DELETAR <AddAPhotoIcon />
+ <div className="interacoes" onClick={() => {props.handleDelete()}}>
+ DELETAR <AddAPhotoIcon/>
</div>
</div>
</div>
</Grid>
<Grid item xs={windowWidth > 990 ? 6 : 12}>
<div className="aviso-imagem-carregada">
- Sua imagem foi enviada, porém pode ser que demore alguns minutos até nosso servidor atualiza-la na página do recurso.
+ Sua imagem foi enviada, porém pode ser que demore alguns minutos até nosso servidor atualiza-la na página do recurso.
</div>
</Grid>
</ImagemCarregada>
@@ -77,7 +77,7 @@ export default function DisplayThumbnail(props) {
const ImagemCarregada = styled(Grid)`
.aviso-imagem-carregada {
- color: ${props => props.contrast === "" ? "#a5a5a5" : "white"};
+ color :#a5a5a5;
font-size : 12px;
font-weight : 500;
text-align : justify;
@@ -113,12 +113,10 @@ const ImagemCarregada = styled(Grid)`
align-items : flex-end;
height : 100%;
padding : 10px;
- color: ${props => props.contrast === "" ? "#fff" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ color : #fff;
font-size : 14px;
.MuiSvgIcon-root {
vertical-align : middle !important;
- color: #fff;
}
}
}
diff --git a/src/Components/UploadPageComponents/PartTwoComponents/DragAndDropThumbnail.js b/src/Components/UploadPageComponents/PartTwoComponents/DragAndDropThumbnail.js
index 56d532f8..59423e60 100644
--- a/src/Components/UploadPageComponents/PartTwoComponents/DragAndDropThumbnail.js
+++ b/src/Components/UploadPageComponents/PartTwoComponents/DragAndDropThumbnail.js
@@ -16,13 +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 } from 'react'
-import { DottedBox, BlueButton } from '../StyledComponents.js';
+import React, {useState} from 'react'
+import {DottedBox, BlueButton} from '../StyledComponents.js';
import AddAPhotoIcon from '@material-ui/icons/AddAPhoto';
import FormControl from '@material-ui/core/FormControl';
-import { StyledFormLabel } from '../StyledComponents.js'
+import {StyledFormLabel} from '../StyledComponents.js'
-export default function DragAndDropThumbnail(props) {
+export default function DragAndDropThumbnail (props) {
const [dropDepth, setDropDepth] = useState(0)
// eslint-disable-next-line
const [inDropZone, toggleInDropZone] = useState(false)
@@ -64,42 +64,41 @@ export default function DragAndDropThumbnail(props) {
props.acceptFile(selectorFiles[0])
}
return (
- <FormControl style={{ width: "100%" }}>
- <StyledFormLabel contrast={props.contrast} component="legend" style={{ fontSize: "14px", marginBottom: "10px" }}>
+ <FormControl style={{width : "100%"}}>
+ <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
{
props.onEditPage ?
- (
- <b style={props.contrast === "" ? { textAlign: "center", fontSize: "26px", fontWeight: "ligther" } : { textAlign: "center", fontSize: "26px", fontWeight: "ligther", color: "white" }}>Inserir Imagem Ilustrativa</b>
- )
- :
- (
- <>
- <b>Imagem Ilustrativa do Recurso</b> <span style={props.contrast === "" ? { color: "#a5a5a5" } : { color: "white" }}>(Deixe seu recurso completo, para que todos o entendam melhor.)</span>
- </>
- )
+ (
+ <b style={{textAlign : "center", fontSize : "26px", fontWeight : "ligther"}}>Inserir Imagem Ilustrativa</b>
+ )
+ :
+ (
+ <>
+ <b>Imagem Ilustrativa do Recurso</b> <span style={{color : "#a5a5a5"}}>(Deixe seu recurso completo, para que todos o entendam melhor.)</span>
+ </>
+ )
}
</StyledFormLabel>
<DottedBox
- contrast={props.contrast}
onDrop={e => handleDrop(e)}
onDragOver={e => handleDragOver(e)}
onDragEnter={e => handleDragEnter(e)}
onDragLeave={e => handleDragLeave(e)}
thumbnail
- >
- <AddAPhotoIcon className="icon" />
+ >
+ <AddAPhotoIcon className="icon"/>
<input
type="file"
- onChange={(e) => handleUpload(e, e.target.files)}
+ onChange = {(e) => handleUpload(e, e.target.files)}
id="upload-file-thumbnail"
- style={{ display: "none" }}
- />
- <BlueButton contrast={props.contrast}>
- <label htmlFor="upload-file-thumbnail" style={{ width: "inherit", cursor: "pointer" }}>
+ style={{display : "none"}}
+ />
+ <BlueButton>
+ <label htmlFor="upload-file-thumbnail" style={{width : "inherit", cursor : "pointer"}}>
ESCOLHER IMAGEM
</label>
</BlueButton>
- <span style={props.contrast === "" ? { marginTop: "6px" } : { color: "white" }}>Ou arrastar e soltar o arquivo aqui</span>
+ <span style={{marginTop : "6px"}}>Ou arrastar e soltar o arquivo aqui</span>
</DottedBox>
</FormControl>
)
diff --git a/src/Components/UploadPageComponents/PartTwoComponents/EditThumbnail.js b/src/Components/UploadPageComponents/PartTwoComponents/EditThumbnail.js
index 2ef43db3..7cce6bf2 100644
--- a/src/Components/UploadPageComponents/PartTwoComponents/EditThumbnail.js
+++ b/src/Components/UploadPageComponents/PartTwoComponents/EditThumbnail.js
@@ -16,28 +16,28 @@ 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 { StyledFormLabel } from '../StyledComponents.js'
+import React, {useState} from 'react'
+import {StyledFormLabel} from '../StyledComponents.js'
import Cropper from '../../Cropper'
import { Button } from '@material-ui/core';
import styled from 'styled-components'
-export default function EditThumbnail(props) {
+export default function EditThumbnail (props) {
const [crop] = useState({
unit: "%" ,
- width : 200,
- aspect: 9/6
+ width : 100,
+ aspect: 9/3
});
return (
<>
- <StyledFormLabel contrast={props.contrast} component="legend" style={{ fontSize: "14px", marginBottom: "10px" }}>
- <b>Editando Imagem</b> <span style={props.contrast === "" ? { color: "#a5a5a5" } : { color: "white" }}>(Deixe seu recurso completo, para que todos o entendam melhor.)</span>
+ <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
+ <b>Editando Imagem</b> <span style={{color : "#a5a5a5"}}>(Deixe seu recurso completo, para que todos o entendam melhor.)</span>
</StyledFormLabel>
- <div style={{ display: "flex", alignItems: "center", flexDirection: "column" }}>
- <div style={{ maxWidth: "500px", maxHeight: "300px", padding: "20px" }}>
- <Cropper src={props.tempImgURL} crop={crop} circularCrop={false} update={props.updateThumb} />
+ <div style={{display : "flex", alignItems : "center", flexDirection : "column"}}>
+ <div style={{maxWidth : "500px", maxHeight : "300px", padding : "20px"}}>
+ <Cropper src={props.tempImgURL} crop={crop} circularCrop={false} update={props.updateThumb}/>
</div>
- <StyledButton contrast={props.contrast} onClick={() => { props.finalizeThumb() }}>SELECIONAR IMAGEM</StyledButton>
+ <StyledButton onClick={() => {props.finalizeThumb()}}>SELECIONAR IMAGEM</StyledButton>
</div>
</>
@@ -46,11 +46,10 @@ export default function EditThumbnail(props) {
const StyledButton = styled(Button)`
&:hover {
- background: ${props => props.contrast === "" ? "rgba(158,158,158,0.2) !important" : "rgba(255,255,0,0.24) !important"};
+ background-color : rgba(158,158,158,0.2) !important;
}
- background: ${props => props.contrast === "" ? "#fff !important" : "black !important"};
- border: ${props => props.contrast === "" ? "solid 1px #00bcd4 !important" : "solid 1px white !important"};
- color: ${props => props.contrast === "" ? "#00bcd4 !important" : "yellow !important"};
- text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
+ background-color : #fff !important;
+ border : solid 1px #00bcd4 !important;
font-weight : 600 !important;
+ color : #00bcd4 !important;
`
diff --git a/src/Components/UploadPageComponents/PartTwoComponents/EducationalStage.js b/src/Components/UploadPageComponents/PartTwoComponents/EducationalStage.js
index f028b62b..96da308a 100644
--- a/src/Components/UploadPageComponents/PartTwoComponents/EducationalStage.js
+++ b/src/Components/UploadPageComponents/PartTwoComponents/EducationalStage.js
@@ -16,43 +16,21 @@ 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} from 'react'
import FormControl from '@material-ui/core/FormControl';
-import { StyledFormLabel } from '../StyledComponents.js'
+import {StyledFormLabel} from '../StyledComponents.js'
import Checkbox from '@material-ui/core/Checkbox';
import FormGroup from '@material-ui/core/FormGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import styled from 'styled-components'
-import { yellow, blue } from "@material-ui/core/colors";
-import { withStyles } from '@material-ui/core/styles';
-const BlueCheckBox = withStyles({
- root: {
- color: blue[400],
- '&$checked': {
- color: blue[600],
- },
- },
- checked: {},
-})((props) => <Checkbox color="default" {...props} />);
-
-const ContrastCheckBox = withStyles({
- root: {
- color: yellow[400],
- '&$checked': {
- color: yellow[600],
- },
- },
- checked: {},
-})((props) => <Checkbox color="default" {...props} />);
-
-export default function EducationalStage(props) {
+export default function EducationalStage (props) {
const [selected, setSelect] = useState(props.initialValue ? props.initialValue : [])
const handleSet = (event) => {
let newValue = event.target.value
- if (selected.indexOf(newValue) > - 1) {
+ if(selected.indexOf(newValue) > - 1) {
setSelect(selected.filter(item => item !== newValue))
}
else {
@@ -61,15 +39,15 @@ export default function EducationalStage(props) {
}
return (
- <FormControl required style={{ minWidth: "30%" }}>
- <StyledFormLabel contrast={props.contrast} component="legend" style={{ fontSize: "14px", marginBottom: "10px" }}>
- <b>NÃvel de ensino</b> <span style={props.contrast === "" ? { color: "#a5a5a5" } : { color: "white" }}>(Selecione uma ou mais opções)</span>
+ <FormControl required style={{minWidth : "30%"}}>
+ <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
+ <b>NÃvel de ensino</b> <span style={{color : "#a5a5a5"}}>(Selecione uma ou mais opções)</span>
</StyledFormLabel>
- <StyledFormGroup onBlur={() => { props.onBlurCallback("educational_stages", selected, props.draftID) }}>
+ <StyledFormGroup onBlur={() => {props.onBlurCallback("educational_stages", selected, props.draftID)}}>
{
props.eduStages.map(stage =>
<FormControlLabel key={stage.id} label={stage.name}
- control={props.contrast === "" ? <BlueCheckBox checked={selected.indexOf(String(stage.id)) > - 1} value={stage.id} onChange={handleSet} /> : <ContrastCheckBox checked={selected.indexOf(String(stage.id)) > - 1} value={stage.id} onChange={handleSet} />} />
+ control={<Checkbox checked={selected.indexOf(String(stage.id)) > - 1} value={stage.id} onChange={handleSet}/>}/>
)
}
</StyledFormGroup>
diff --git a/src/Components/UploadPageComponents/PartTwoComponents/Licenca.js b/src/Components/UploadPageComponents/PartTwoComponents/Licenca.js
index 30c2d581..9e8e059a 100644
--- a/src/Components/UploadPageComponents/PartTwoComponents/Licenca.js
+++ b/src/Components/UploadPageComponents/PartTwoComponents/Licenca.js
@@ -16,67 +16,45 @@ 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, memo } from 'react'
+import React, {useState, memo} from 'react'
import styled from 'styled-components'
import FormControl from '@material-ui/core/FormControl';
-import { StyledFormLabel } from '../StyledComponents.js'
+import {StyledFormLabel} from '../StyledComponents.js'
import RadioGroup from '@material-ui/core/RadioGroup';
import Radio from '@material-ui/core/Radio';
import FormControlLabel from '@material-ui/core/FormControlLabel';
-import { yellow, blue } from "@material-ui/core/colors";
-import { withStyles } from '@material-ui/core/styles';
-
-const BlueRadio = withStyles({
- root: {
- color: blue[400],
- '&$checked': {
- color: blue[600],
- },
- },
- checked: {},
-})((props) => <Radio color="default" {...props} />);
-
-const ContrastRadio = withStyles({
- root: {
- color: yellow[400],
- '&$checked': {
- color: yellow[600],
- },
- },
- checked: {},
-})((props) => <Radio color="default" {...props} />);
-
-function Licenca(props) {
+
+function Licenca (props) {
const options = [
- { name: "CC BY", description: "(Esta licença permite que outros distribuam, remixem, adaptem e criem a partir do seu trabalho, mesmo para fins comerciais, desde que lhe atribuam o devido crédito pela criação original)", id: 1 },
+ {name : "CC BY", description : "(Esta licença permite que outros distribuam, remixem, adaptem e criem a partir do seu trabalho, mesmo para fins comerciais, desde que lhe atribuam o devido crédito pela criação original)", id : 1},
- { name: "CC BY-SA", description: "(Esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho, mesmo para fins comerciais, desde que lhe atribuam o devido crédito e que licenciem as novas criações sob termos idênticos)", id: 2 },
+ {name : "CC BY-SA", description : "(Esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho, mesmo para fins comerciais, desde que lhe atribuam o devido crédito e que licenciem as novas criações sob termos idênticos)", id : 2},
- { name: "CC BY-NC", description: "(Esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho para fins não comerciais e, embora os novos trabalhos tenham de lhe atribuir o devido crédito e não possam ser usados para fins comerciais, os usuários não têm de licenciar esses trabalhos derivados sob os mesmos termos)", id: 4 },
+ {name : "CC BY-NC", description : "(Esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho para fins não comerciais e, embora os novos trabalhos tenham de lhe atribuir o devido crédito e não possam ser usados para fins comerciais, os usuários não têm de licenciar esses trabalhos derivados sob os mesmos termos)", id : 4},
- { name: "CC BY-NC SA", description: "(Esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho para fins não comerciais, desde que atribuam o devido crédito e que licenciem as novas criações sob termos idênticos)", id: 5 },
+ {name : "CC BY-NC SA", description : "(Esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho para fins não comerciais, desde que atribuam o devido crédito e que licenciem as novas criações sob termos idênticos)", id : 5},
- { name: "CC BY-NC-ND 3.0 BR", description: "(Atribuição-NãoComercial-SemDerivações 3.0 Brasil. Esta licença permite compartilhar, copiar e redistribuir o material em qualquer suporte ou formato)", id: 12 }
+ {name : "CC BY-NC-ND 3.0 BR", description : "(Atribuição-NãoComercial-SemDerivações 3.0 Brasil. Esta licença permite compartilhar, copiar e redistribuir o material em qualquer suporte ou formato)", id : 12}
]
const [value, setValue] = useState(props.initialValue ? props.initialValue : -1)
- const handleChange = (event) => { setValue(Number(event.target.value)) }
+ const handleChange = (event) => {setValue(Number(event.target.value))}
return (
- <FormControl required="true" style={{ width: "100%" }}>
- <StyledFormLabel contrast={props.contrast} component="legend" style={{ fontSize: "14px", marginBottom: "10px" }}>
- <b>Licença do Uso do Conteúdo</b> <a href="https://br.creativecommons.org/licencas/" style={props.contrast === "" ? { color: "#ff7f00", textDecoration: "underline" } : { color: "yellow", textDecoration: "underline" }}>Saiba mais</a>
+ <FormControl required="true" style={{width : "100%"}}>
+ <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
+ <b>Licença do Uso do Conteúdo</b> <a href="https://br.creativecommons.org/licencas/" style={{color : "#ff7f00", textDecoration : "underline"}}>Saiba mais</a>
</StyledFormLabel>
- <StyledRadioGroup contrast={props.contrast} aria-label="Tipo de Recurso" name="Tipo de Recurso" row value={value} onChange={handleChange} style={{ justifyContent: "center" }} onBlur={() => { props.onBlurCallback("license_id", value, props.draftID) }}>
+ <StyledRadioGroup aria-label="Tipo de Recurso" name="Tipo de Recurso" row value={value} onChange={handleChange} style={{justifyContent : "center"}} onBlur={() => {props.onBlurCallback("license_id", value, props.draftID)}}>
{
- options.map((option) =>
- <FormControlLabel key={option.id} value={option.id}
- control={props.contrast === "" ? <BlueRadio /> : <ContrastRadio />}
- label={
- <span className="title">{option.name}
- <span className="parentese"> {option.description}</span>
- </span>
+ options.map( (option) =>
+ <FormControlLabel key={option.id} value={option.id}
+ control={<Radio />}
+ label={
+ <span className="title">{option.name}
+ <span className="parentese"> {option.description}</span>
+ </span>
}
/>
)
@@ -98,12 +76,12 @@ const StyledRadioGroup = styled(RadioGroup)`
.title {
font-size: 14px;
font-weight: 600;
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color:#666;
padding-left: 2px;
}
.parentese {
- color: ${props => props.contrast === "" ? "#a5a5a5" : "white"};
font-weight: 200;
+ color:#a5a5a5;
padding-left: 10px;
}
`
diff --git a/src/Components/UploadPageComponents/PartTwoComponents/SubjectsAndThemes.js b/src/Components/UploadPageComponents/PartTwoComponents/SubjectsAndThemes.js
index 986081d8..326dec23 100644
--- a/src/Components/UploadPageComponents/PartTwoComponents/SubjectsAndThemes.js
+++ b/src/Components/UploadPageComponents/PartTwoComponents/SubjectsAndThemes.js
@@ -16,40 +16,39 @@ 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, memo } from 'react'
+import React, {useState, memo} from 'react'
import { makeStyles } from '@material-ui/core/styles';
import FormControl from '@material-ui/core/FormControl';
-import { ObjTypeBox, StyledFormLabel } from '../StyledComponents.js'
+import {ObjTypeBox, StyledFormLabel} from '../StyledComponents.js'
import FormGroup from '@material-ui/core/FormGroup';
-import { GetSubjectIconByName } from '../GetIconByName.js'
+import {GetSubjectIconByName} from '../GetIconByName.js'
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import Grid from '@material-ui/core/Grid';
const useStyles = makeStyles({
- root: {
- '&:hover': {
- backgroundColor: 'transparent',
- },
- }
-})
-
-function StyledCheckbox(props) {
+ root: {
+ '&:hover': {
+ backgroundColor: 'transparent',
+ },
+}})
+
+function StyledCheckbox (props) {
const classes = useStyles();
return (
<Checkbox
className={classes.root}
disableRipple
- checkedIcon={
- <ObjTypeBox checked contrast={props.contrast}>
+ checkedIcon = {
+ <ObjTypeBox checked>
<span>
{GetSubjectIconByName(props.label)}
<p>{props.label}</p>
</span>
</ObjTypeBox>
}
- icon={
- <ObjTypeBox contrast={props.contrast}>
+ icon = {
+ <ObjTypeBox>
<span>
{GetSubjectIconByName(props.label)}
<p>{props.label}</p>
@@ -62,77 +61,75 @@ function StyledCheckbox(props) {
}
-function SubjectsAndThemes(props) {
+function SubjectsAndThemes (props) {
const [value, setValue] = useState(props.initialValue ? props.initialValue : [])
const handleChange = (event) => {
const newValue = event.target.value
- if ((value.indexOf(newValue) > -1)) {
+ if((value.indexOf(newValue) > -1)) {
setValue(value.filter(item => item !== newValue))
}
else {
setValue(value => [...value, newValue])
}
- }
+ }
return (
<React.Fragment>
- <Grid item xs={12} style={{ paddingBottom: "40px" }}>
- <FormControl required style={{ width: "100%" }}>
- <StyledFormLabel contrast={props.contrast} component="legend" style={{ fontSize: "14px", marginBottom: "10px" }}>
- <b>Componente curricular</b> <span>(Selecione uma ou mais opções)</span>
- </StyledFormLabel>
- <FormGroup row style={{ justifyContent: "center" }} onBlur={() => { props.onBlurCallback("subjects", value, props.draftID) }}>
- {
- props.subjects.map((subject) =>
- <>
- <FormControlLabel key={subject.id} value={subject.id}
- control={
- <StyledCheckbox
- contrast={props.contrast}
- label={subject.name}
- checked={value.indexOf(String(subject.id)) > -1}
- onChange={handleChange}
- />}
- />
- </>
- )
-
- }
- </FormGroup>
- </FormControl>
- </Grid>
-
- {
-
- props.onUploadPage &&
- <Grid item xs={12} style={{ paddingBottom: "40px" }}>
- <FormControl style={{ width: "100%" }}>
- <StyledFormLabel contrast={props.contrast} component="legend" style={{ fontSize: "14px", marginBottom: "10px" }}>
- <b>Outras Temáticas</b>
- </StyledFormLabel>
- <FormGroup aria-label="Tipo de Recurso" name="Tipo de Recurso" row style={{ justifyContent: "center" }} onBlur={() => { props.onBlurCallback("subjects", value, props.draftID) }}>
- {
- props.themes.map((theme) =>
- <FormControlLabel key={theme.id} value={theme.id}
- control={
- <StyledCheckbox
- contrast={props.contrast}
- label={theme.name}
- checked={value.indexOf(String(theme.id)) > -1}
- onChange={handleChange}
-
- />
- }
- />
- )
+ <Grid item xs={12} style={{paddingBottom : "40px"}}>
+ <FormControl required style={{width : "100%"}}>
+ <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
+ <b>Componente curricular</b> <span>(Selecione uma ou mais opções)</span>
+ </StyledFormLabel>
+ <FormGroup row style={{justifyContent : "center"}} onBlur={() => {props.onBlurCallback("subjects", value, props.draftID)}}>
+ {
+ props.subjects.map( (subject) =>
+ <>
+ <FormControlLabel key={subject.id} value={subject.id}
+ control={
+ <StyledCheckbox
+ label={subject.name}
+ checked={value.indexOf(String(subject.id)) > -1}
+ onChange={handleChange}
+ />}
+ />
+ </>
+ )
+
+ }
+ </FormGroup>
+ </FormControl>
+ </Grid>
+
+ {
+
+ props.onUploadPage &&
+ <Grid item xs={12} style={{paddingBottom : "40px"}}>
+ <FormControl style={{width : "100%"}}>
+ <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
+ <b>Outras Temáticas</b>
+ </StyledFormLabel>
+ <FormGroup aria-label="Tipo de Recurso" name="Tipo de Recurso" row style={{justifyContent : "center"}} onBlur={() => {props.onBlurCallback("subjects", value, props.draftID)}}>
+ {
+ props.themes.map( (theme) =>
+ <FormControlLabel key={theme.id} value={theme.id}
+ control={
+ <StyledCheckbox
+ label={theme.name}
+ checked={value.indexOf(String(theme.id)) > -1}
+ onChange={handleChange}
+ />
}
- </FormGroup>
- </FormControl>
- </Grid>
- }
+ />
+ )
+
+ }
+ </FormGroup>
+ </FormControl>
+ </Grid>
+ }
</React.Fragment>
)
}
diff --git a/src/Components/UploadPageComponents/Stepper.js b/src/Components/UploadPageComponents/Stepper.js
index a4acce46..c1f9d40f 100644
--- a/src/Components/UploadPageComponents/Stepper.js
+++ b/src/Components/UploadPageComponents/Stepper.js
@@ -18,90 +18,160 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React from 'react';
import styled from 'styled-components'
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/core/styles';
+import clsx from 'clsx';
+import Stepper from '@material-ui/core/Stepper';
+import Step from '@material-ui/core/Step';
+import StepLabel from '@material-ui/core/StepLabel';
import Check from '@material-ui/icons/Check';
-import Grid from '@material-ui/core/Grid';
-export default function CustomizedSteppers(props) {
+const useColorlibStepIconStyles = makeStyles({
+ root: {
+ backgroundColor: '#fff',
+ color: '#00bcd4',
+ width: 36,
+ height: 36,
+ display: 'flex',
+ border : 'solid 3px #00bcd4',
+ borderRadius: '50%',
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ active: {
+ backgroundColor : '#00bcd4',
+ color : '#fff',
+ },
+ completed: {
+ backgroundColor : '#00bcd4',
+ color : '#fff',
+ },
+});
+
+function ColorlibStepIcon(props) {
+ const classes = useColorlibStepIconStyles();
+ const { active, completed } = props;
- function isInFinalSTep(step) {
- return step === 2;
- }
+ const icons = {
+ 1: '1',
+ 2: '2',
+ 3: '3',
+ };
return (
- <MainGrid contrast={props.contrast} container direction='row' justify='space-between' alignItems='center'>
- {
- !isInFinalSTep(props.activeStep) ?
-
- [0, 1, 2].map((index) => {
- return (
- <Grid item key={new Date().toISOString() + index}>
- <div className={props.activeStep === index ? "currStep" : "step"}>
- {
- index < props.activeStep ?
- <Check style={props.contrast === "" ? { color: "#00bcd4" } : { color: "white" }} /> : index
- }
- </div>
- </Grid>
- )
- })
- :
- [0, 1, 2].map((index) => {
- return (
- <Grid item key={new Date().toISOString() + index}>
- <div className={props.activeStep === index ? "currStep" : "finalStep"}>
- {
- index < props.activeStep ?
- <Check style={{ color: 'white' }} /> :
- <span style={{ color: 'white' }}>
- {index}
- </span>
- }
- </div>
- </Grid>
- )
- })
- }
- </MainGrid >
+ <div
+ className={clsx(classes.root, {
+ [classes.active]: active,
+ [classes.completed]: completed,
+ })}
+ >
+ {completed ? <Check className={classes.completed} /> : icons[String(props.icon)]}
+ </div>
);
}
-const MainGrid = styled(Grid)`
- padding: 1em;
- border-radius: 50px;
- width: 90%;
- margin: 0 auto;
- border: ${props => props.contrast === "" ? "2px solid #d4d4d4" : "2px solid white"};
- color: ${props => props.contrast === "" ? "#666" : "white"};
-
- .currStep{
- height: 30px;
- width: 30px;
- display: flex;
- justify-content: center;
- align-items: center;
- border: 2px solid rgba(255, 255, 255, 0.6);
- border-radius: 50%;
- }
-
- .step{
- height: 30px;
- width: 30px;
- display: flex;
- justify-content: center;
- align-items: center;
- border: ${props => props.contrast === "" ? "2px solid #00bcd4" : "2px solid white"};
- border-radius: 50%;
- }
-
- .finalStep{
- height: 30px;
- width: 30px;
- display: flex;
- justify-content: center;
- align-items: center;
- border: 2px solid white;
- border-radius: 50%;
- color: white;
- }
-`
+ColorlibStepIcon.propTypes = {
+ /**
+ * Whether this step is active.
+ */
+ active: PropTypes.bool,
+ /**
+ * Mark the step as completed. Is passed to child components.
+ */
+ completed: PropTypes.bool,
+ /**
+ * The label displayed in the step icon.
+ */
+ icon: PropTypes.node,
+};
+
+// const useStyles = makeStyles((theme) => ({
+// root: {
+// width: '100%',
+// },
+// button: {
+// marginRight: theme.spacing(1),
+// },
+// instructions: {
+// marginTop: theme.spacing(1),
+// marginBottom: theme.spacing(1),
+// },
+// }));
+
+function getSteps() {
+ return ['Select campaign settings', 'Create an ad group', 'Create an ad'];
+}
+
+// function getStepContent(step) {
+// switch (step) {
+// case 0:
+// return 'Select campaign settings...';
+// case 1:
+// return 'What is an ad group anyways?';
+// case 2:
+// return 'This is the bit I really care about!';
+// default:
+// return 'Unknown step';
+// }
+// }
+
+export default function CustomizedSteppers(props) {
+ // const classes = useStyles();
+ const steps = getSteps();
+// {/* const handleNext = () => {
+// setActiveStep((prevActiveStep) => prevActiveStep + 1);
+// };
+
+// const handleBack = () => {
+// setActiveStep((prevActiveStep) => prevActiveStep - 1);
+// };
+
+// const handleReset = () => {
+// setActiveStep(0);
+// };*/}
+
+ return (
+
+ <>
+ <StyledStepper style={{backgroundColor : "#e5e5e5", borderRadius : "50px", justifyContent : "space-between"}} activeStep={props.activeStep} connector={<></>}>
+ {steps.map((label) => (
+ <Step key={label}>
+ <StepLabel StepIconComponent={ColorlibStepIcon}/>
+ </Step>
+ ))}
+ </StyledStepper>
+ {/*<div>
+ {activeStep === steps.length ? (
+ <div>
+ <Button onClick={handleReset} className={classes.button}>
+ Reset
+ </Button>
+ </div>
+ ) : (
+ <div>
+ <Typography className={classes.instructions}>{getStepContent(activeStep)}</Typography>
+ <div>
+ <Button disabled={activeStep === 0} onClick={handleBack} className={classes.button}>
+ Back
+ </Button>
+ <Button
+ variant="contained"
+ color="primary"
+ onClick={handleNext}
+ className={classes.button}
+ >
+ {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
+ </Button>
+ </div>
+ </div>
+ )}
+ </div>*/}
+ </>
+ );
+}
+
+const StyledStepper = styled(Stepper)`
+ padding : 7px !important;
+
+`
diff --git a/src/Components/UploadPageComponents/StyledComponents.js b/src/Components/UploadPageComponents/StyledComponents.js
index f09077ac..3c157e6f 100644
--- a/src/Components/UploadPageComponents/StyledComponents.js
+++ b/src/Components/UploadPageComponents/StyledComponents.js
@@ -35,18 +35,18 @@ export const StyledFormHelperText = styled(FormHelperText)`
export const DottedBox = styled.div`
align-self : center;
/* width : ${props => props.thumbnail ? "100%" : "320px"}; */
- background-color : ${props => props.contrast === "" ? props.thumbnail ? "transparent" : "#f4f4f4" : "black"};
- border : ${props => props.contrast === "" ? props.thumbnail ? "2px dashed #a5a5a5" : "2px dashed #00bcd4" : "2px dashed white"};
+ background-color : ${props => props.thumbnail ? "transparent" : "#f4f4f4"};
+ border : ${props => props.thumbnail ? "2px dashed #a5a5a5" : "2px dashed #00bcd4"};
align-items : center;
border-radius : 10px;
display : flex;
flex-direction : column;
padding : 20px 0;
- color : ${props => props.contrast === "" ? props.thumbnail ? "#a5a5a5" : "$666" : "white"};
+ color : ${props => props.thumbnail ? "#a5a5a5" : "$666"};
.icon {
font-size : 40px !important;
- color : ${props => props.contrast === "" ? "#00bcd4 !important" : "white !important"};
+ color : #00bcd4 !important;
margin-bottom : 10px !important;
vertical-align : middle !important;
font-weight : normal !important;
@@ -64,30 +64,32 @@ export const DottedBox = styled.div`
export const BlueButton = styled(Button)`
&:hover {
- background-color: ${props => props.contrast === "" ? "#00acc1 !important" : "rgba(255,255,0,0.24) !important"};
+ background-color : #00acc1 !important;
}
- color : ${props => props.contrast === "" ? "#fff !important" : "yellow !important"};
- text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
- background-color : ${props => props.contrast === "" ? "#00bcd4 !important" : "black !important"};
- border : ${props => props.contrast === "" ? "none !important" : "1px solid white !important"};
+ color : #fff !important;
+ background-color : #00bcd4 !important;
+ height : 36px !important;
box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
font-weight : 600 !important;
+ min-width : 88px !important;
+ align-self : center !important;
+ padding : 16px !important;
`
export const GrayButton = styled(Button)`
&:hover {
- background-color: ${props => props.contrast === "" ? "rgba(158,158,158,0.2) !important" : "rgba(255,255,0,0.24) !important"};
+ background-color : rgba(158,158,158,0.2) !important;
}
- color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
- text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline" } !important;
-
- background-color : ${props => props.contrast === "" ? "transparent !important" : "black !important"};
- border : ${props => props.contrast === "" ? "none !important" : "1px solid white !important"};
+ height : 36px !important;
font-weight : 600 !important;
-
+ color : #666 !important;
+ background-color: transparent;
+ min-width : 88px !important;
+ height : 36px !important;
+ margin-left : 8px !important;
+ margin-right : 8px !important;
.icon {
vertical-align : middle !important;
- color : ${props => props.contrast === "" ? "#666 !important" : "white !important"};
font-weight : normal !important;
font-style : normal !important;
font-size : 24px !important;
@@ -114,9 +116,6 @@ export const GrayButton = styled(Button)`
font-style : inherit;
font-variant : inherit;
}
-
- margin-left : 8px !important;
- margin-right : 8px !important;
`
export const WrapperBox = styled.div`
@@ -125,14 +124,12 @@ export const WrapperBox = styled.div`
display : block;
border-radius : 3px;
box-shadow : 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ background-color : #fff;
font-size : 14px;
- background: ${props => props.contrast === "" ? " #fff" : "black"};
- border: ${props => props.contrast === "" ? " " : "1px solid white"};
.inner {
display : block;
padding : 20px;
- background: ${props => props.contrast === "" ? " #fff" : "black"};
}
.upload-title {
@@ -140,7 +137,6 @@ export const WrapperBox = styled.div`
font-size : 26px;
margin-bottom : 10px;
font-weight : lighter;
- color: ${props => props.contrast === "" ? "" : "white"};
}
.flex-column {
@@ -154,7 +150,6 @@ export const WrapperBox = styled.div`
p {
margin : 0 0 10px;
- color: ${props => props.contrast === "" ? "" : "white"};
}
.buttons-div {
@@ -187,7 +182,7 @@ export const WrapperBox = styled.div`
overflow : hidden;
text-align : center;
font-size : 14px;
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color : #666;
padding : 0 5px;
}
}
@@ -236,7 +231,7 @@ export const WrapperBox = styled.div`
.file-status {
.icon-margin {
- color: ${props => props.contrast === "" ? "#00bcd4" : "white"};
+ color : #00bcd4;
margin-right : 5px;
}
.MuiLinearProgress-root {
@@ -256,20 +251,17 @@ export const WrapperBox = styled.div`
margin-top: 40px;
border-top: solid 1px #f4f4f4;
text-align: center;
- color: ${props => props.contrast === "" ? "" : "white"};
span {
font-size : 16px;
font-weight : lighter;
- color: ${props => props.contrast === "" ? "" : "white"};
}
}
}
`
export const InfoBox = styled.div`
- background: ${props => props.contrast === "" ? " #fff" : "black"};
- border: ${props => props.contrast === "" ? " " : "1px solid white"};
+ background-color : #fff;
padding : 30px;
box-shadow : 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
margin-bottom : 30px;
@@ -302,13 +294,8 @@ export const ObjTypeBox = styled.div`
height : 100px;
width : 100px;
border-radius : 10px;
- background-color : ${props => props.contrast === "" ? "#f4f4f4" : "black"};
- border : ${props => props.contrast === "Contrast" ? props.checked ? "1px solid white" : "0" : props.checked ? "1px solid #00bcd4" : "0"};
- font-weight : ${props => props.checked ? "bold" : "lighter"};
-
- box-sizing: border-box;
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
+ background-color : ${props => props.checked ? "#00bcd4" : "#f4f4f4"};
+ color : ${props => props.checked ? "#fff" : "#00bcd4"};
span {
padding-top : 5%;
@@ -317,20 +304,22 @@ export const ObjTypeBox = styled.div`
justify-content : center;
.icon {
- color : #00bcd4;
+ color : inherit;
align-self : center;
height : 48px;
width : 48px;
}
p {
- color : ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- text-decoration : ${props => props.contrast === "Contrast" ? props.checked ? "none" : "underline" : "none"};
height : 28px;
font-size : 14px;
text-align : center;
line-height : 14px;
}
+
+ svg path {
+ fill : ${props => props.checked ? "#fff" : "#00bcd4"};
+ }
}
`
@@ -338,173 +327,168 @@ export const OutroAutorTextField = styled(TextField)`
font-size : 14px;
width : 100% !important;
- .MuiOutlinedInput-root {
- &.Mui-focused fieldset {
- border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- }
- fieldset {
- border-color: ${props => props.contrast === "" ? "#666" : "white"};
- }
+ .MuiFormControl-root {
+ margin : 18px 0 !important;
}
- label{
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ .MuiFormHelperText-root {
+ text-align : left;
+ font-size : 14px !important ;
}
label.Mui-focused {
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ color : #00bcd4;
}
label.Mui-focused.Mui-error {
color : red;
}
+ .MuiInput-underline::after {
+ border-bottom: 1px solid #00bcd4;
+ }
.MuiFormHelperText-root {
- text-align : left;
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ font-size : 12px !important;
+ text-align : right !important;
}
`
export const StyledFormLabel = styled(FormLabel)`
b {
- color: ${props => props.contrast === "" ? "#666 !important" : "white !important"};
+ color : #666 !important;
}
span {
- color: ${props => props.contrast === "" ? "#a5a5a5" : "white"};
+ color : #a5a5a5;
}
`
export const StyledTextField = styled(TextField)`
font-size : 14px;
width : 100% !important;
+ full-width : 100% !important;
- .MuiOutlinedInput-root {
- &.Mui-focused fieldset {
- border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- }
- fieldset {
- border-color: ${props => props.contrast === "" ? "#666" : "white"};
- }
+ .MuiFormControl-root {
+ margin : 18px 0 !important;
}
- label{
- color: ${props => props.contrast === "" ? "#666" : "white"};
+
+ .MuiFormHelperText-root {
+ text-align : left;
+ font-size : 14px !important ;
}
label.Mui-focused {
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ color : #00bcd4;
}
label.Mui-focused.Mui-error {
color : red;
}
+ .MuiInput-underline::after {
+ border-bottom: 2px solid #00bcd4;
+ }
.MuiFormHelperText-root {
- text-align : left;
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ font-size : 12px !important;
+ text-align : right !important;
}
`
-const useStyles = makeStyles({
- root: {
- '&:hover': {
- backgroundColor: 'transparent',
- },
- }
-})
-
-export function StyledRadio(props) {
- const classes = useStyles();
- return (
- <Radio
- className={classes.root}
- disableRipple
- checkedIcon={
- <ObjTypeBox contrast={props.contrast} checked>
- <span>
- {GetIconByName(props.label)}
- <p>{props.label}</p>
- </span>
- </ObjTypeBox>
- }
- icon={
- <ObjTypeBox contrast={props.contrast}>
- <span>
- {GetIconByName(props.label)}
- <p>{props.label}</p>
- </span>
- </ObjTypeBox>
- }
- {...props}
- />
- )
-}
-
-export const StyledDiv = styled.div`
- display : flex;
- margin-top : 30px;
- justify-content : space-evenly;
+ const useStyles = makeStyles({
+ root: {
+ '&:hover': {
+ backgroundColor: 'transparent',
+ },
+ }})
+
+ export function StyledRadio (props) {
+ const classes = useStyles();
+ return (
+ <Radio
+ className={classes.root}
+ disableRipple
+ checkedIcon = {
+ <ObjTypeBox checked>
+ <span>
+ {GetIconByName(props.label)}
+ <p>{props.label}</p>
+ </span>
+ </ObjTypeBox>
+ }
+ icon = {
+ <ObjTypeBox>
+ <span>
+ {GetIconByName(props.label)}
+ <p>{props.label}</p>
+ </span>
+ </ObjTypeBox>
+ }
+ {...props}
+ />
+ )
+ }
+
+ export const StyledDiv = styled.div`
+ display : flex;
+ margin-top : 30px;
+ justify-content : space-evenly;
`
-export const OrangeButton = styled(Button)`
+ export const OrangeButton = styled(Button)`
max-height : 36px !important;
- box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
- font-weight : 600 !important;
- background: ${props => props.contrast === "" ? " #ff7f00 !important" : "black !important"};
- color: ${props => props.contrast === "" ? "rgba(255,255,255,0.87) !important" : "yellow !important"};
- border: ${props => props.contrast === "" ? "" : "1px solid white !important"};
- text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
- margin-left : 8px !important;
- margin-right : 8px !important;
- &:hover {
- background: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
- }
+ color : rgba(255,255,255,0.87) !important;
+ box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
+ font-weight : 600 !important;
+ background-color : #ff7f00 !important;
+ margin-left : 8px !important;
+ margin-right : 8px !important;
`
-export const GreyButton = styled(Button)`
- background: ${props => props.contrast === "" ? "transparent !important" : "black !important"};
- color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
- border: ${props => props.contrast === "" ? "" : "1px solid white !important"};
- text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
- outline : none !important;
- text-align : center !important;
-
- margin-left : 8px !important;
- margin-right : 8px !important;
-
- .button-text {
- cursor : pointer;
- text-align : center;
- color : currentColor;
- white-space : nowrap;
- text-transform : uppercase;
- font-weight : 600 !important;
- font-style : inherit;
- font-variant : inherit;
- }
+ export const GreyButton = styled(Button)`
+ &:hover {
+ background-color : rgba(158,158,158,0.2) !important;
+ }
+ max-height : 36px !important;
+
+ background-color : transparent !important;
+ color : #666 !important;
+ text-decoration : none !important;
+ outline : none !important;
+ text-align : center !important;
+
+ .button-text {
+ cursor : pointer;
+ line-height : 36px;
+ text-align : center;
+ color : currentColor;
+ white-space : nowrap;
+ text-transform : uppercase;
+ font-weight : 600 !important;
+ font-size : 14px;
+ font-style : inherit;
+ font-variant : inherit;
+ padding : 6px 16px !important;
+ }
`
-export const Background = styled.div`
- padding-top : 40px;
- background: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
- color: ${props => props.contrast === "" ? "#666" : "white"};
-
- .container {
- padding : 0;
- margin-right : auto;
- margin-left : auto;
- background: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
- color: ${props => props.contrast === "" ? "#666" : "white"};
-
-
- @media screen and (min-width: 768px) {
- width : 750px;
- }
- @media screen and (min-width: 992px) {
- width : 970px;
- }
- @media screen and (min-width: 1200px) {
- width : 1170px;
- }
- }
+ export const Background = styled.div `
+ padding-top : 40px;
+ background-color : #f4f4f4;
+ color : #666;
+
+ .container {
+ padding : 0;
+ margin-right : auto;
+ margin-left : auto;
+
+ @media screen and (min-width: 768px) {
+ width : 750px;
+ }
+ @media screen and (min-width: 992px) {
+ width : 970px;
+ }
+ @media screen and (min-width: 1200px) {
+ width : 1170px;
+ }
+ }
`
diff --git a/src/Components/UploadPageComponents/UploadFileWrapper.js b/src/Components/UploadPageComponents/UploadFileWrapper.js
index 866f0209..b8919a54 100644
--- a/src/Components/UploadPageComponents/UploadFileWrapper.js
+++ b/src/Components/UploadPageComponents/UploadFileWrapper.js
@@ -16,21 +16,21 @@ 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} from 'react'
import LinkIcon from '../../img/link_icon.svg'
import ChooseLink from './ChooseLinkSection.js'
-import { WrapperBox, BlueButton, GrayButton } from './StyledComponents.js';
-import { DottedBox } from './StyledComponents.js';
-import { getAxiosConfigFromJSON, updateHeaders, deleteRequest, putRequest } from '../HelperFunctions/getAxiosConfig.js'
+import {WrapperBox, BlueButton, GrayButton} from './StyledComponents.js';
+import {DottedBox} from './StyledComponents.js';
+import {getAxiosConfigFromJSON, updateHeaders, deleteRequest, putRequest} from '../HelperFunctions/getAxiosConfig.js'
import AttachFileIcon from '@material-ui/icons/AttachFile';
import axios from 'axios'
-import { apiUrl } from '../../env';
+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';
-export default function UploadFileWrapper(props) {
+export default function UploadFileWrapper (props) {
/*-----------------------------------------------------------------
- Wrapper for file upload box
- has three different stages:
@@ -41,11 +41,10 @@ export default function UploadFileWrapper(props) {
- Props used:
- submit : called when the user clicks "ENVIAR" inside ChooseLinkSection; renders the alert snackbar to let them know the link was submitted
- - contrast : used to display contrast colors or not
- */
+ */
const [stage, setStage] = useState(props.prevFile ? "fileSelected" : "default")
- const handleNextStage = (newStage) => { setStage(newStage) }
+ const handleNextStage = (newStage) => {setStage(newStage)}
// eslint-disable-next-line
const [fileToUpload, setFileToUpload] = useState(null);
@@ -56,15 +55,15 @@ export default function UploadFileWrapper(props) {
const [uploadProgress, setProgress] = useState(0)
const [attachmentID, setAttachmentID] = useState(props.prevFile ? props.prevFile.id : null)
- async function onFileChange(file) {
- if (!file) return;
+ async function onFileChange (file) {
+ if(!file) return;
let newFile = file
- //console.log(newFile)
+ console.log(newFile)
setFileToUpload(newFile);
setFileName(newFile.name)
- let total = Math.ceil(newFile.size / chunkSize)
+ let total = Math.ceil(newFile.size/chunkSize)
let currentChunkStartByte = 0;
let currentChunkFinalByte = chunkSize > newFile.size ? newFile.size : chunkSize;
let chunkIdentifier = props.draftID + '-' + newFile.name;
@@ -85,11 +84,11 @@ export default function UploadFileWrapper(props) {
try {
const response = await axios.post(uploadUrl, formData, config);
- //console.log(response)
+ console.log(response)
if (response.headers['access-token']) {
updateHeaders(response.headers)
}
- setProgress(Math.round((currentChunkFinalByte / newFile.size) * 100))
+ setProgress(Math.round((currentChunkFinalByte/newFile.size) * 100))
remainingBytes = newFile.size - currentChunkFinalByte;
if (currentChunkFinalByte === newFile.size) {
setFileDoneUploading(true)
@@ -104,6 +103,7 @@ export default function UploadFileWrapper(props) {
currentChunkFinalByte = currentChunkStartByte + chunkSize;
}
} catch (error) {
+ console.log(error)
handleNextStage("error")
return;
}
@@ -114,12 +114,12 @@ export default function UploadFileWrapper(props) {
if (attachmentID != null) {
const url = `/learning_objects/${props.draftID}/attachment/${attachmentID}`
- deleteRequest(url, (data) => { handleNextStage("default") }, (error) => { console.log(error) })
+ deleteRequest(url, (data) => {handleNextStage("default")}, (error) => {console.log(error)})
}
}
const handleCancel = () => {
-
+ console.log('cancelar request')
}
const handleDragOver = e => {
@@ -133,6 +133,7 @@ export default function UploadFileWrapper(props) {
e.stopPropagation();
let files = [...e.dataTransfer.files]
+ console.log('files: ', files)
if (files && files.length > 0) {
onFileChange(files[0])
}
@@ -144,25 +145,25 @@ export default function UploadFileWrapper(props) {
const url = `/learning_objects/${props.draftID}`
let payload = {
- "learning_object": {
- "id": props.draftID,
- "link": link
+ "learning_object" : {
+ "id" : props.draftID,
+ "link" : link
}
}
- putRequest(url, payload, (data) => { toggleSnackbar(true) }, (error) => { console.log(error) })
+ putRequest(url, payload, (data) => {toggleSnackbar(true)}, (error) => {console.log(error)})
}
switch (stage) {
case "error":
- return (
- <WrapperBox contrast={props.contrast}>
+ return(
+ <WrapperBox>
<div className="inner">
<div className="upload-title">Erro</div>
- <span>Clique no botão para tentar novamente.</span>
+ <span>Clique no botão para tentar novamente.</span>
<div className="flex-column">
<div className="buttons-div">
- <GrayButton contrast={props.contrast} onClick={() => { handleNextStage("default") }}>
+ <GrayButton onClick={() => {handleNextStage("default")}}>
<span className="button-text">
Voltar
</span>
@@ -173,8 +174,8 @@ export default function UploadFileWrapper(props) {
</WrapperBox>
)
case "fileSelected":
- return (
- <WrapperBox contrast={props.contrast}>
+ return(
+ <WrapperBox>
<div className="inner">
<div className="upload-title">
{fileDoneUploading ? 'O arquivo foi carregado' : 'Carregando arquivo'}
@@ -185,33 +186,33 @@ export default function UploadFileWrapper(props) {
<div className="item-info">
{
fileDoneUploading ?
- (
- <React.Fragment>
- <div className="file-status">
- <DoneIcon contrast={props.contrast} className="icon icon-margin" /> {fileName}
+ (
+ <React.Fragment>
+ <div className="file-status">
+ <DoneIcon className="icon icon-margin"/> {fileName}
</div>
- <GrayButton contrast={props.contrast} onClick={() => { handleDelete() }}>
- Excluir <DeleteIcon className="icon icon-remove" />
+ <GrayButton onClick={() => {handleDelete()}}>
+ Excluir <DeleteIcon className="icon icon-remove"/>
</GrayButton>
- </React.Fragment>
- )
- :
- (
- <React.Fragment>
- <div className="file-status">
- {uploadProgress}% {fileName}
- </div>
- <GrayButton contrast={props.contrast} onClick={() => { handleCancel() }}>
- Cancelar <DeleteIcon className="icon icon-remove" />
- </GrayButton>
- </React.Fragment>
- )
+ </React.Fragment>
+ )
+ :
+ (
+ <React.Fragment>
+ <div className="file-status">
+ {uploadProgress}% {fileName}
+ </div>
+ <GrayButton onClick={() => {handleCancel()}}>
+ Cancelar <DeleteIcon className="icon icon-remove"/>
+ </GrayButton>
+ </React.Fragment>
+ )
}
</div>
</div>
<div className="warning">
<span>Não se esqueça de preencher as</span>
- <br />
+ <br/>
<span>informações sobre o recurso ao lado.</span>
</div>
</div>
@@ -221,19 +222,19 @@ 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" }}>
+ <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>
- <ChooseLink contrast={props.contrast} handleNextStage={handleNextStage} submit={handleChooseLink} />
+ <ChooseLink handleNextStage={handleNextStage} submit={handleChooseLink}/>
</React.Fragment>
)
default:
- return (
- <WrapperBox contrast={props.contrast}>
+ return(
+ <WrapperBox>
<div className="inner">
<div className="upload-title"> Enviar Recurso</div>
<div className="flex-column">
@@ -242,39 +243,38 @@ export default function UploadFileWrapper(props) {
<div className="upload-form">
<form id="file_upload">
<DottedBox
- contrast={props.contrast}
onDrop={e => handleDrop(e)}
onDragOver={e => handleDragOver(e)}
- >
- <AttachFileIcon className="icon" />
+ >
+ <AttachFileIcon className="icon"/>
<input
type="file"
- onChange={(e) => { onFileChange(e.target.files[0]) }}
+ onChange = {(e) => {onFileChange(e.target.files[0])}}
id="upload-file"
- style={{ display: "none" }}
- />
- <BlueButton contrast={props.contrast}>
- <label htmlFor="upload-file" style={{ width: "inherit", cursor: "pointer" }}>
+ style={{display : "none"}}
+ />
+ <BlueButton>
+ <label htmlFor="upload-file" style={{width : "inherit", cursor : "pointer"}}>
ESCOLHER ARQUIVO
</label>
</BlueButton>
- <span style={{ marginTop: "6px" }}>Ou arrastar e soltar o arquivo aqui</span>
+ <span style={{marginTop : "6px"}}>Ou arrastar e soltar o arquivo aqui</span>
</DottedBox>
</form>
</div>
</div>
<div className="strike-box">
- <div className="strike" /><h3>ou</h3><div className="strike" />
+ <div className="strike"/><h3>ou</h3><div className="strike"/>
</div>
<div className="enviar-link-texto">
- <img alt="" src={LinkIcon} />
- <br />
+ <img alt="" src={LinkIcon}/>
+ <br/>
<span>Enviar link de um recurso de outro site</span>
</div>
- <BlueButton contrast={props.contrast} onClick={() => { handleNextStage("choosingLink") }}>ENVIAR LINK</BlueButton>
+ <BlueButton onClick={ () => {handleNextStage("choosingLink")} }>ENVIAR LINK</BlueButton>
</div>
</div>
</WrapperBox>
diff --git a/src/Components/UserPageComponents/Avatar.js b/src/Components/UserPageComponents/Avatar.js
index 03b3ae11..8f3c05b8 100644
--- a/src/Components/UserPageComponents/Avatar.js
+++ b/src/Components/UserPageComponents/Avatar.js
@@ -41,7 +41,6 @@ export default function ProfileAvatar (props) {
return (
<>
<ModalAlterarAvatar
- contrast={props.contrast}
open={open}
handleClose={controlModal}
userAvatar={currentAvatar}
diff --git a/src/Components/UserPageComponents/Cover.js b/src/Components/UserPageComponents/Cover.js
index 27aae391..339c36fd 100644
--- a/src/Components/UserPageComponents/Cover.js
+++ b/src/Components/UserPageComponents/Cover.js
@@ -37,6 +37,7 @@ export default function Cover (props) {
const updateCover = (selectorFiles) => {
const objectURL = URL.createObjectURL(selectorFiles[0])
+ console.log(objectURL)
setTempCover(objectURL)
controlModal()
}
@@ -44,11 +45,9 @@ export default function Cover (props) {
useEffect( () => {
setCoverImg(state.currentUser.cover)
}, state.currentUser.cover)
-
return (
<>
<ModalAlterarCover
- contrast={props.contrast}
open = {open}
handleClose={controlModal}
cover={tempCover}
diff --git a/src/Components/UserPageComponents/EditProfileButton.js b/src/Components/UserPageComponents/EditProfileButton.js
index b0636380..beaa7137 100644
--- a/src/Components/UserPageComponents/EditProfileButton.js
+++ b/src/Components/UserPageComponents/EditProfileButton.js
@@ -18,25 +18,25 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React from 'react';
import { Store } from '../../Store.js';
import styled from 'styled-components'
-import { Link } from 'react-router-dom';
+import {Link} from 'react-router-dom';
import EditIcon from '@material-ui/icons/Edit';
import Button from '@material-ui/core/Button';
-export default function EditProfileButton({ contrast }) {
- const { state } = React.useContext(Store)
+export default function EditProfileButton () {
+ const {state} = React.useContext(Store)
return (
- <EditProfileAnchor to="/editarperfil" contrast={contrast}>
+ <EditProfileAnchor to="/editarperfil">
<Button>
- {state.windowSize.width >= 900 ?
+ {state.windowSize.width >=900 ?
(
<React.Fragment>
- <EditIcon className="icon" /> <span>EDITAR PERFIL</span>
+ <EditIcon style={{marginRight:"5px", verticalAlign:"middle"}}/> <span>EDITAR PERFIL</span>
</React.Fragment>
)
:
(
- <EditIcon className="icon" style={contrast === "" ? {color: "white"} : {color: "yellow"}}/>
+ <EditIcon style={{marginRight:"5px", verticalAlign:"middle"}}/>
)
}
</Button>
@@ -45,32 +45,30 @@ export default function EditProfileButton({ contrast }) {
}
const EditProfileAnchor = styled(Link)`
- Button {
- box-shadow : 0 2px 5px 0 rgba(0,0,0,.26);
- background-color: ${props => props.contrast === "" ? "#52BCD4" : "black"} !important;
- position : absolute;
- right : 10px;
- top : 10px;
- margin-bottom : 20px;
- color: ${props => props.contrast === "" ? "white" : "yellow"};
- padding : 0 10px;
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- border-radius : 3px;
- @media screen and (min-width: 800px) {
- min-height : 36px;
- min-width : 88px;
- }
- line-height : 36px;
- border: ${props => props.contrast === "" ? "0" : "1px solid white"};
- display: inline-block;
- text-align : center;
- @media screen and (max-width: 600px) {
- max-width : 44px !important ;
- }
- }
- .icon{
- margin-right: 5px;
- vertical-align: middle;
- color: white;
- }
+ Button {
+ box-shadow : 0 2px 5px 0 rgba(0,0,0,.26);
+ background-color : #fafafa;
+ position : absolute;
+ right : 10px;
+ top : 10px;
+ margin-bottom : 20px;
+ color : #666;
+ padding : 0 10px;
+ text-decoration : none;
+ border-radius : 3px;
+ @media screen and (min-width: 800px) {
+ min-height : 36px;
+ min-width : 88px;
+ }
+ line-height : 36px;
+ border : 0;
+ display: inline-block;
+ text-align : center;
+ :hover{
+ background-color : #fafafa;
+ }
+ @media screen and (max-width: 600px) {
+ max-width : 44px !important ;
+ }
+ }
`
diff --git a/src/Components/UserPageComponents/SubmitterStatus.js b/src/Components/UserPageComponents/SubmitterStatus.js
index d36f53dc..1cb29365 100644
--- a/src/Components/UserPageComponents/SubmitterStatus.js
+++ b/src/Components/UserPageComponents/SubmitterStatus.js
@@ -15,13 +15,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, { useContext } from 'react';
+import React, {useContext} from 'react';
import { Store } from '../../Store.js';
import CheckDecagram from '../../img/check-decagram-gray.svg'
-import { Link } from 'react-router-dom';
+import {Link} from 'react-router-dom';
-export default function SubmitterStatus(props) {
- const { state } = useContext(Store)
+export default function SubmitterStatus (props) {
+ const {state} = useContext(Store)
let text;
switch (state.currentUser.submitter_request) {
@@ -37,21 +37,21 @@ export default function SubmitterStatus(props) {
return (
<React.Fragment>
- <p style={{ fontSize: "15px", lineHeight: "22px", textAlign: "left", margin: "0 0 10px" }}>
- <span>
- <span style={{ paddingRight: "5px" }}>
- <img src={CheckDecagram} alt='check icon' />
- </span>
- {text}
- <Link to={{
- pathname: '/editarperfil',
- tabValue: {
- value: 1
- }
- }}>
- <span style={state.contrast === "" ? { color: "#00bcd4" } : { color: "yellow", textDecoration: "underline", cursor: "pointer" }}> SAIBA MAIS</span>
- </Link>
-
+ <p style={{fontSize:"15px", lineHeight:"22px", textAlign:"left", margin:"0 0 10px"}}>
+ <span style={{cursor:"pointer"}}>
+ <span style={{paddingRight:"5px"}}>
+ <img src={CheckDecagram} alt='check icon'/>
+ </span>
+ {text}
+ <Link to={{
+ pathname: '/editarperfil',
+ tabValue: {
+ value: 1
+ }
+ }}>
+ <span style={{color:"#00bcd4"}}> SAIBA MAIS</span>
+ </Link>
+
</span>
</p>
</React.Fragment>
diff --git a/src/Components/UserPageComponents/UserInfo.js b/src/Components/UserPageComponents/UserInfo.js
index b8dde202..4782759f 100644
--- a/src/Components/UserPageComponents/UserInfo.js
+++ b/src/Components/UserPageComponents/UserInfo.js
@@ -25,8 +25,18 @@ export default function UserInfo(props) {
const user = state.currentUser.name;
return (
- <UserProfileInfoDiv contrast={state.contrast}>
- <p>
+ <UserProfileInfoDiv>
+ <p
+ style={{
+ fontSize: "28px",
+ color: "#fff",
+ paddingTop: "5px",
+ paddingBottom: "5px",
+ fontWeight: "500",
+ backgroundColor: "#77777796",
+ borderRadius: "5px",
+ }}
+ >
{user}
</p>
</UserProfileInfoDiv>
diff --git a/src/Components/Accessibility/ContrastBar.css b/src/Components/VerticalRuler.js
similarity index 52%
rename from src/Components/Accessibility/ContrastBar.css
rename to src/Components/VerticalRuler.js
index ce199caa..a84dc138 100644
--- a/src/Components/Accessibility/ContrastBar.css
+++ b/src/Components/VerticalRuler.js
@@ -16,50 +16,16 @@ 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/>.*/
-.Constrasticon {
- width: 1em;
- height: 1em;
- vertical-align: middle;
-}
-/*
-.contrastButton{
- border: none;
- padding: 0;
- background: none;
- background-color: white;
-}
-.contrastButton:active {
- border: none;
- padding: 0;
- background: none;
- background-color: white;
-}
-.bar{
- overflow: auto;
- background-color: white;
- width: 100%;
- height: 1.3em;
- border-bottom: 1px solid #666;
-}
+import React from 'react';
-.Contrastbar{
- overflow: auto;
- background-color: black;
- width: 100%;
- border-bottom: 1px solid white;
-}*/
-.Contrasttext{
- color: yellow;
- text-decoration: underline;
- cursor: pointer;
- text-align: center;
- vertical-align: middle;
+export default function VerticalRuler(props) {
+ return (
+ <div
+ style={{
+ borderLeft: ''+props.width+'px solid '+props.color,
+ height:props.height
+ }}/>
+ );
}
-.text{
- color: #666;
- cursor: pointer;
- text-align: center;
- vertical-align: middle;
-}
\ No newline at end of file
diff --git a/src/Components/carousel.css b/src/Components/carousel.css
index 3a4c6336..e1c5dc42 100644
--- a/src/Components/carousel.css
+++ b/src/Components/carousel.css
@@ -16,36 +16,34 @@ 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/>.*/
-
-
-.carousel .slide {
- background-color: inherit !important;
+.carousel .control-dots{
+ position: inherit !important;
}
+.carousel .control-arrow {
+ background: orange !important;
+ /* position: relative !important; */
-.carousel .control-dots {
- position: inherit !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);
-.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);
+.carousel .slide {
+ background-color: inherit !important;
}
.MuiPaper-elevation1-209{
- box-shadow: none !important;
+ box-shadow: none !important;
}
.carousel.carousel-slider .control-arrow {
- top: 35%!important;
- bottom: 50%!important;
- border-radius: 100%!important;
- opacity: 1!important;
- text-align: center;
- vertical-align: middle;
- height: 50px;
- width: 50px;
+ top: 35%!important;
+ bottom: 50%!important;
+ border-radius: 100%!important;
+ opacity: 1!important;
+ text-align: center;
+ vertical-align: middle;
+ height: 50px;
+ width: 50px;
}
diff --git a/src/Pages/AboutPage.js b/src/Pages/AboutPage.js
index bf21ccee..ab1b6bbb 100644
--- a/src/Pages/AboutPage.js
+++ b/src/Pages/AboutPage.js
@@ -16,13 +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, { useEffect, useContext } from 'react';
+import React, { useEffect } from 'react';
import Grid from '@material-ui/core/Grid';
import styled from 'styled-components';
import Modal from '../Components/ModalAbout';
import AboutCarousel from "../Components/AboutCarousel";
import AboutCarouselPartner from '../Components/AboutCarouselPartner';
-import { Store } from '../Store';
+
/*Importação de imagens para o componente*/
import Agpl from "../img/sobre/agpl.svg";
@@ -47,7 +47,6 @@ const Secao2 = styled.div`
text-align: center;
font-size: 14px;
line-height: 1.42857143;
- background-color: ${props => props.contrast === '' ? "" : "black"};
.container {
@@ -100,7 +99,6 @@ const Secao3 = styled.div`
padding: 30px 0;
background-color: #1ab9de;
color: #fff;
- background-color: ${props => props.contrast === '' ? "" : "black"};
.container {
@@ -166,7 +164,6 @@ const Secao4 = styled.div`
height: 720px;
text-align: center;
color: #666;
- background-color: ${props => props.contrast === '' ? "" : "black"};
.container {
@@ -226,7 +223,7 @@ const Secao4 = styled.div`
text-align: center;
border: 0;
padding: 0 6px;
- white-space: nowrap;
+ hite-space: nowrap;
text-decoration: none;
@@ -322,7 +319,7 @@ const Secao5 = styled.div`
const Secao6 = styled.div`
height: 500px;
- background-color: ${props => props.contrast === '' ? "" : "black"};
+
.container {
@@ -377,7 +374,7 @@ const Secao6 = styled.div`
const Secao7 = styled.div`
height: 100%;
- background-color: ${props => props.contrast === '' ? "#f4f4f4" : "black"};
+ background-color: #f4f4f4;
.container {
@@ -419,8 +416,10 @@ const Secao7 = styled.div`
}
.card {
+
height: 80%;
- background-color: ${props => props.contrast === '' ? "#fff" : "black"};
+
+ background-color: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
padding: 40px 20px;
text-align: center;
@@ -442,7 +441,6 @@ const Secao7 = styled.div`
img {
width: 114px;
- background-color: ${props => props.contrast === '' ? "#fff" : "black"};
}
}
@@ -457,7 +455,6 @@ const Secao7 = styled.div`
const Secao8 = styled.div`
height: 230px;
- background-color: ${props => props.contrast === '' ? "" : "black"};
.container {
@@ -502,7 +499,8 @@ const Secao8 = styled.div`
}
button {
- background-color: ${props => props.contrast === '' ? "#ed6f00" : "black"};
+
+ background-color: #ed6f00;
font-family: Roboto,sans-serif;
font-size: 14px;
font-weight: 500;
@@ -520,7 +518,7 @@ const Secao8 = styled.div`
text-align: center;
border-radius: 3px;
user-select: none;
- border: ${props => props.contrast === '' ? "0" : "1px solid white"};
+ border: 0;
padding: 0 6px;
padding-right: 6px;
padding-left: 6px;
@@ -528,24 +526,33 @@ const Secao8 = styled.div`
font-weight: 500;
font-size: 14px;
overflow: hidden;
- :hover{
- background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24)"};
- }
+
+
+
a {
- color: ${props => props.contrast === '' ? "#fff" : "yellow"};
- text-decoration: ${props => props.contrast === '' ? "" : "underline"};;
+ color: #fff;
+ text-decoration: none;
}
}
+
}
}
}
+
+
+
`
+
+
+
+
+
+
+
export default function AboutPage(props) {
var pageWidth = window.innerWidth
- const { state } = useContext(Store);
-
const calculateMargin = ((pageWidth) => {
if (pageWidth > 700 && pageWidth <= 850) {
return "40%"
@@ -577,14 +584,12 @@ export default function AboutPage(props) {
</Secao1>
- <Secao2 contrast={state.contrast} >
+ <Secao2>
<div className="container">
<div className="container-secao">
<div className="conteudo-secao">
- <h2 className={`${state.contrast}TextColor`}>
- Um Pouco da História
- </h2>
- <p className={`${state.contrast}TextColor`} style={{ marginLeft: 20, marginRight: 20, marginBottom: 40 }}>
+ <h2>Um Pouco da História</h2>
+ <p style={{ marginLeft: 20, marginRight: 20, marginBottom: 40 }}>
A partir de uma iniciativa do Ministério da Educação, surge
em outubro de 2015 a proposta de reunir e disponibilizar, em um
único lugar, os Recursos Educacionais Digitais dos principais
@@ -598,10 +603,10 @@ export default function AboutPage(props) {
colaborativo você também!
</p>
<img src={Agpl} alt="agpl" />
- <p className={`${state.contrast}TextColor`}>
+ <p>
Este programa é software livre, sob os termos da
- <a className={`${state.contrast}LinkColor`} href="https://www.gnu.org/licenses/agpl-3.0.en.html" rel="noreferrer" target="_blank"> licença GNU/AGPL</a><br />
- Seu código fonte está disponÃvel no <a className={`${state.contrast}LinkColor`} href="https://gitlab.c3sl.ufpr.br/portalmec/portalmec" rel="noreferrer" target="_blank">GitLab</a>
+ <a href="https://www.gnu.org/licenses/agpl-3.0.en.html" rel="noreferrer" target="_blank"> licença GNU/AGPL</a><br />
+ Seu código fonte está disponÃvel no <a href="https://gitlab.c3sl.ufpr.br/portalmec/portalmec" rel="noreferrer" target="_blank">GitLab</a>
</p>
@@ -610,7 +615,7 @@ export default function AboutPage(props) {
</div>
</Secao2>
- <Secao3 contrast={state.contrast} >
+ <Secao3>
<div className="container">
<div className="container-secao">
<div className="conteudo-secao">
@@ -655,18 +660,18 @@ export default function AboutPage(props) {
- <Secao4 contrast={state.contrast}>
+ <Secao4>
<div className="container">
<div className="container-secao" id="portaisparceiros">
<div className="conteudo-secao" >
- <div className={`${state.contrast}TextColor`}>
+ <div>
<h2>Portais Parceiros</h2>
<p>Aqui na Plataforma você encontra os Recursos Digitais dos principais portais do MEC e de vários outros parceiros.</p>
</div>
<AboutCarouselPartner />
- <div className={`${state.contrast}TextColor`}>
+ <div>
<h3>Você busca Recursos Educacionais Digitais em outros sites?</h3>
<p>
Você gostaria que a plataforma tivesse os recursos do site que
@@ -675,7 +680,7 @@ export default function AboutPage(props) {
</p>
</div>
<div style={{ marginTop: "30px" }}>
- <Modal contrast={state.contrast} />
+ <Modal />
</div>
</div>
@@ -698,15 +703,16 @@ export default function AboutPage(props) {
</div>
</Secao5>
- <Secao6 contrast={state.contrast}>
+ <Secao6>
<div className="container">
<div className="container-secao">
<div className="conteudo-secao">
- <div className={`${state.contrast}TextColor`}>
+ <div>
<h2>Aqui você pode:</h2>
+
</div>
<div>
- <AboutCarousel contrast={state.contrast} />
+ <AboutCarousel />
</div>
</div>
@@ -714,13 +720,13 @@ export default function AboutPage(props) {
</div>
</Secao6>
- <Secao7 contrast={state.contrast}>
+ <Secao7>
<div className="container">
<div className="container-secao">
<div className="conteudo-secao">
<div className="cabecalho">
- <h2 className={`${state.contrast}TextColor`}>A quem se destina?</h2>
- <p className={`${state.contrast}TextColor`}>A plataforma é aberta e destina-se a todos e todas que se
+ <h2>A quem se destina?</h2>
+ <p>A plataforma é aberta e destina-se a todos e todas que se
interessam<br />pela relação entre a escola e a Cultura Digital:</p>
</div>
<div>
@@ -728,8 +734,8 @@ export default function AboutPage(props) {
<Grid item xs>
<div className="card">
<img src={Professores} alt="" />
- <h3 className={`${state.contrast}TextColor`}>Professores</h3>
- <p className={`${state.contrast}TextColor`}>
+ <h3>Professores</h3>
+ <p>
Encontre recursos digitais que se encaixem aos objetivos
das suas aulas! Aproveite para seguir outros professores,
coleções e conhecer experiências de uso!
@@ -739,8 +745,8 @@ export default function AboutPage(props) {
<Grid item xs>
<div className="card">
<img src={Alunos} alt="" />
- <h3 className={`${state.contrast}TextColor`}>Alunos</h3>
- <p className={`${state.contrast}TextColor`}>
+ <h3>Alunos</h3>
+ <p>
Você pode complementar os seus estudos com recursos
digitais que lhe interessem. Gostou de algum recurso?
Recomende ao seu professor ou professora.
@@ -750,8 +756,8 @@ export default function AboutPage(props) {
<Grid item xs>
<div className="card">
<img src={Gestores} alt="" />
- <h3 className={`${state.contrast}TextColor`}>Gestores</h3>
- <p className={`${state.contrast}TextColor`}>
+ <h3>Gestores</h3>
+ <p>
Desenvolva junto com o coletivo da escola ações e projetos
pedagógicos com recursos digitais importantes para o seu contexto.
</p>
@@ -760,8 +766,8 @@ export default function AboutPage(props) {
<Grid item xs>
<div className="card">
<img src={Comunidade} alt="" />
- <h3 className={`${state.contrast}TextColor`}>Comunidade Escolar</h3>
- <p className={`${state.contrast}TextColor`}>
+ <h3>Comunidade Escolar</h3>
+ <p>
Encontre recursos digitais e materiais de formação que
contribuam para a aprendizagem e práticas educativas na
sua comunidade escolar.
@@ -776,12 +782,12 @@ export default function AboutPage(props) {
</div>
</Secao7>
- <Secao8 contrast={state.contrast}>
+ <Secao8>
<div className="container">
<div className="container-secao">
<div className="conteudo-secao">
- <h2 className={`${state.contrast}TextColor`}>Ficou alguma dúvida? Gostaria de fazer alguma sugestão ou crÃtica? Construa conosco.</h2>
+ <h2>Ficou alguma dúvida? Gostaria de fazer alguma sugestão ou crÃtica? Construa conosco.</h2>
<div>
<button><a href="contato">ENTRAR EM CONTATO</a></button>
</div>
diff --git a/src/Pages/ChangePasswordPage.js b/src/Pages/ChangePasswordPage.js
index a7f90c22..cf552c07 100644
--- a/src/Pages/ChangePasswordPage.js
+++ b/src/Pages/ChangePasswordPage.js
@@ -1,4 +1,4 @@
-import React, { useState, useContext } from "react";
+import React, { useState } from "react";
import { BackgroundDiv } from '../Components/TabPanels/StyledComponents.js'
import Paper from '@material-ui/core/Paper'
import styled from 'styled-components'
@@ -13,14 +13,12 @@ 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} />;
}
export default function ChangePasswordPage(props) {
- const { state } = useContext(Store)
const [error, setError] = useState(false)
const [success, setSuccess] = useState(false)
@@ -79,7 +77,9 @@ export default function ChangePasswordPage(props) {
}
handleSnackInfo(snackInfo)
} else {
+ //console.log("senha bate");
if (!formPassword.key && !formPasswordConfirmation.key) {
+ console.log("senha bate");
const urlParams = new URLSearchParams(window.location.search);
const clientId = urlParams.get("client_id");
@@ -175,7 +175,7 @@ export default function ChangePasswordPage(props) {
if (error)
return (
- <BackgroundDiv contrast={state.contrast}>
+ <BackgroundDiv>
<Snackbar
open={snackInfo.open}
autoHideDuration={6000}
@@ -187,13 +187,13 @@ export default function ChangePasswordPage(props) {
</Alert>
</Snackbar>
<div>
- <CustomizedBreadcrumbs contrast={state.contrast}
+ <CustomizedBreadcrumbs
values={["Recuperar senha", "Alterar senha"]}
/>
</div>
<div style={{ justifyContent: "center", textAlign: "center", maxWidth: "600px", margin: "auto" }}>
<Paper elevation={3}>
- <CardDiv contrast={state.contrast}>
+ <CardDiv>
<div style={{ overflow: "hidden", display: "inline-block" }}>
<h2 style={{ fontSize: "32px", fontWeight: "200", marginBottom: "20px", lineHeight: '35px' }}>
Ocorreu um erro. Por favor, tente novamente mais tarde. Você será redirecionado para a home em... <StyledTimer>{time}</StyledTimer>
@@ -206,7 +206,7 @@ export default function ChangePasswordPage(props) {
)
else if (success)
return (
- <BackgroundDiv contrast={state.contrast}>
+ <BackgroundDiv>
<Snackbar
open={snackInfo.open}
autoHideDuration={6000}
@@ -218,13 +218,13 @@ export default function ChangePasswordPage(props) {
</Alert>
</Snackbar>
<div>
- <CustomizedBreadcrumbs contrast={state.contrast}
+ <CustomizedBreadcrumbs
values={["Recuperar senha", "Alterar senha"]}
/>
</div>
<div style={{ justifyContent: "center", textAlign: "center", maxWidth: "600px", margin: "auto" }}>
<Paper elevation={3}>
- <CardDiv contrast={state.contrast}>
+ <CardDiv>
<div style={{ overflow: "hidden", display: "inline-block" }}>
<h2 style={{ fontSize: "32px", fontWeight: "200", marginBottom: "20px", lineHeight: '35px' }}>
Sua senha foi alterada com sucesso. Você será redirecionado para a home em... <StyledTimer>{time}</StyledTimer>
@@ -237,7 +237,7 @@ export default function ChangePasswordPage(props) {
)
else
return (
- <BackgroundDiv contrast={state.contrast}>
+ <BackgroundDiv>
<Snackbar
open={snackInfo.open}
autoHideDuration={6000}
@@ -249,20 +249,19 @@ export default function ChangePasswordPage(props) {
</Alert>
</Snackbar>
<div>
- <CustomizedBreadcrumbs contrast={state.contrast}
+ <CustomizedBreadcrumbs
values={["Recuperar senha", "Alterar senha"]}
/>
</div>
<div style={{ justifyContent: "center", textAlign: "center", maxWidth: "600px", margin: "auto" }}>
<Paper elevation={3}>
- <CardDiv contrast={state.contrast}>
+ <CardDiv>
<div style={{ overflow: "hidden", display: "inline-block" }}>
<h2 style={{ fontSize: "32px", fontWeight: "200", marginBottom: "20px" }}>Confirme a nova senha</h2>
<form onSubmit={(e) => { e.preventDefault(); onSubmit(e); }}>
<Grid container direction='row' alignItems='center' spacing={1}>
<Grid item xs={10}>
<FormInput
- contrast={state.contrast}
inputType={formPassword.hidePass ? "password" : ""}
name={"senha"}
value={formPassword.value}
@@ -276,11 +275,11 @@ export default function ChangePasswordPage(props) {
<Grid item xs={2}>
{
formPassword.hidePass ?
- <IconButton className={`${state.contrast}LinkColor`} onClick={handleStateHideFormPass}>
+ <IconButton onClick={handleStateHideFormPass}>
<VisibilityIcon />
</IconButton>
:
- <IconButton className={`${state.contrast}LinkColor`} onClick={handleStateHideFormPass}>
+ <IconButton onClick={handleStateHideFormPass}>
<VisibilityOffIcon />
</IconButton>
}
@@ -290,7 +289,6 @@ export default function ChangePasswordPage(props) {
<Grid container direction='row' alignItems='center' spacing={1}>
<Grid item xs={10}>
<FormInput
- contrast={state.contrast}
inputType={formPasswordConfirmation.hidePass ? "password" : ""}
name={"confirme a senha"}
value={formPasswordConfirmation.value}
@@ -304,18 +302,18 @@ export default function ChangePasswordPage(props) {
<Grid item xs={2}>
{
formPasswordConfirmation.hidePass ?
- <IconButton className={`${state.contrast}LinkColor`} onClick={handleStateHideConfFormPass}>
+ <IconButton onClick={handleStateHideConfFormPass}>
<VisibilityIcon />
</IconButton>
:
- <IconButton className={`${state.contrast}LinkColor`} onClick={handleStateHideConfFormPass}>
+ <IconButton onClick={handleStateHideConfFormPass}>
<VisibilityOffIcon />
</IconButton>
}
</Grid>
</Grid>
<div style={{ display: "flex", justifyContent: "center" }}>
- <CompletarCadastroButton contrast={state.contrast} type="submit" >ATUALIZAR SENHA</CompletarCadastroButton>
+ <CompletarCadastroButton type="submit" >ATUALIZAR SENHA</CompletarCadastroButton>
</div>
</form>
</div>
@@ -327,11 +325,7 @@ export default function ChangePasswordPage(props) {
}
const CardDiv = styled.div`
- color: ${props => props.contrast === "" ? "#666" : "white"} !important;
- text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
- background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
- border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
-
+ background-color : #fff;
box-shadow : 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
padding : 20px 30px;
margin : 50px 0;
diff --git a/src/Pages/CollectionPage.js b/src/Pages/CollectionPage.js
index b64c73ce..3b06dd99 100644
--- a/src/Pages/CollectionPage.js
+++ b/src/Pages/CollectionPage.js
@@ -18,6 +18,7 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, { useRef, useState, useEffect, useContext } from 'react';
import { Grid } from '@material-ui/core';
import CollectionAuthor from '../Components/CollectionAuthor.js';
+import VerticalRuler from '../Components/VerticalRuler.js';
import CollectionDescription from '../Components/CollectionDescription.js';
import ResourceList from '../Components/ResourceList.js';
import CollectionCommentSection from '../Components/CollectionCommentSection.js';
@@ -57,7 +58,7 @@ export default function CollectionPage(props) {
}
if (error)
- return <CollectionNotFound contrast={state.contrast}>
+ return <CollectionNotFound>
<Grid container direction='column' justify='center' alignItems='center' spacing={1}>
<Grid item>
<p className="not-found">
@@ -68,24 +69,22 @@ export default function CollectionPage(props) {
<Link className="link" to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=Collection`}>
<Button
- variant='contained'
- className="back-button"
- >
- Voltar para a busca de coleções
+ variant='contained'
+ className="back-button"
+ >
+ Voltar para a busca de coleções.
</Button>
</Link>
- </Grid>
+ </Grid>
</Grid>
</CollectionNotFound >
if (loading)
- return <LoadingDiv contrast={state.contrast}>
- <LoadingSpinner contrast={state.contrast} text="Carregando coleção..." />
- </LoadingDiv>
+ return <LoadingSpinner text="Carregando coleção..." />
else
return (
- <div style={state.contrast === "" ? { backgroundColor: "white" } : { backgroundColor: "black" }}>
+ <>
<BreadCrumbsDiv>
- <StyledBreadCrumbs contrast={state.contrast}>
+ <StyledBreadCrumbs>
<Link to="/">Página Inicial</Link>
<span>Coleções</span>
</StyledBreadCrumbs>
@@ -93,15 +92,14 @@ export default function CollectionPage(props) {
<Grid container direction="row" justify="center" alignItems="center">
<Grid item md={3}>
<CollectionAuthor
- contrast={state.contrast}
author_id={collection.owner.id ? collection.owner.id : 0}
name={collection.owner.name ? collection.owner.name : ""}
imgsrc={collection.owner.avatar ? apiDomain + collection.owner.avatar : noAvatar} />
</Grid>
+
<Grid item md={5}>
<CollectionDescription
- contrast={state.contrast}
stars={collection.review_average}
likes={collection.likes_count}
liked={collection.liked}
@@ -112,56 +110,53 @@ export default function CollectionPage(props) {
<Grid item md={3}>
<DowloadButton
- contrast={state.contrast}
id={collection_id}
/>
<div style={{ height: 12 }}></div>
<FollowCollectionButton
- contrast={state.contrast}
followed={collection.followed}
user_id={state.currentUser.id}
collection_id={collection_id} />
</Grid>
</Grid>
- <Grid container justify="center" style={state.contrast === "" ? { backgroundColor: "#f4f4f4" } : { backgroundColor: "black" }}>
+ <VerticalRuler width={1} height={100} color="rgb(238, 238, 238)" />
+
+ <Grid container justify="center" style={{ backgroundColor: '#f4f4f4' }}>
{/* <Grid item xs={1}/> */}
<Grid item xs={10}>
- <ResourceList
- contrast={state.contrast}
- resources={
- collection.collection_items ?
- collection.collection_items.map(i => {
- return {
- type: i.collectionable.object_type,
- author: i.collectionable.author,
- title: i.collectionable.name,
- rating: i.collectionable.review_average,
- likeCount: i.collectionable.likes_count,
- liked: i.collectionable.liked,
- avatar: i.collectionable.publisher.avatar,
- thumbnail: i.collectionable.thumbnail,
- tags: i.collectionable.tags.map(t => t),
- id: i.collectionable.id,
- downloadableLink: i.collectionable.default_attachment_location,
- publisher: i.collectionable.publisher.name,
- published: i.collectionable.state
- }
- })
- : []
- } />
+ <ResourceList resources={
+ collection.collection_items ?
+ collection.collection_items.map(i => {
+ return {
+ type: i.collectionable.object_type,
+ author: i.collectionable.author,
+ title: i.collectionable.name,
+ rating: i.collectionable.review_average,
+ likeCount: i.collectionable.likes_count,
+ liked: i.collectionable.liked,
+ avatar: i.collectionable.publisher.avatar,
+ thumbnail: i.collectionable.thumbnail,
+ tags: i.collectionable.tags.map(t => t),
+ id: i.collectionable.id,
+ downloadableLink: i.collectionable.default_attachment_location,
+ publisher: i.collectionable.publisher.name,
+ published: i.collectionable.state
+ }
+ })
+ : []
+ } />
</Grid>
<Grid container item xs={12} style={{ marginTop: 40, paddingBottom: 40 }} ref={comment_ref}>
<CollectionCommentSection
- contrast={state.contrast}
id={collection_id}
currentUserId={state.currentUser.id}
avatar={state.currentUser.avatar ? apiDomain + state.currentUser.avatar : noAvatar}
/>
</Grid>
</Grid>
- </div>
+ </>
);
}
@@ -169,23 +164,16 @@ const StyledBreadCrumbs = styled(Breadcrumbs)`
display: flex;
justify-content: flex-start;
span {
- color: ${props => props.contrast === "" ? "#666 !important" : "white !important"};
+ color: #a5a5a5;
}
a {
- color: ${props => props.contrast === "" ? "#00bcd4 !important" : "yellow !important"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
+ color: #00bcd4;
+ text-decoration: none;
}
`;
-const LoadingDiv = styled.div`
- background-color: ${props => props.contrast === "" ? "" : "black"};
-
-`
-
const CollectionNotFound = styled.div`
- background-color: ${props => props.contrast === "" ? "" : "black !important"};
- color: ${props => props.contrast === "" ? "#666 !important" : "white !important"};
- padding: 2em;
+ margin: 1em;
.not-found{
font-family: 'Roboto', sans-serif;
@@ -196,10 +184,8 @@ const CollectionNotFound = styled.div`
}
.back-button{
- background-color: ${props => props.contrast === "" ? "#673ab7 !important" : "black !important"};
- border: ${props => props.contrast === "" ? "none" : "1px solid white !important"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
- color: ${props => props.contrast === "" ? "whitesmoke" : "yellow !important"};
+ background-color: #673ab7;
+ color: whitesmoke;
}
.link{
diff --git a/src/Pages/Contact.js b/src/Pages/Contact.js
index 27abe1a9..211c9d80 100644
--- a/src/Pages/Contact.js
+++ b/src/Pages/Contact.js
@@ -16,168 +16,165 @@ 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, useContext } from "react";
+import React, { useEffect } from "react";
import styled from "styled-components";
import InputFormulario from "../Components/ContactForm.js";
-import { Store } from '../Store';
//Image Import
import { Banner1 } from "ImportImages.js";
const Secao1 = styled.div`
- width: 100%;
- background-color: ${props => props.contrast === "" ? "" : "black"};
- background-image: ${props => props.contrast === "" ? `url(${Banner1})` : ""};
- background-size: cover;
- background-position: bottom center;
- height: 250px;
+ width: 100%;
+ background-image: url(${Banner1});
+ background-size: cover;
+ background-position: bottom center;
+ height: 250px;
+ color: #fff;
+ line-height: 1.1;
+ text-align: center;
+ padding-top: 120px;
+
+ h2 {
+ font-family: Pompiere, cursive;
+ font-size: 52px;
color: #fff;
- line-height: 1.1;
- text-align: center;
- padding-top: 120px;
-
- h2 {
- font-family: Pompiere, cursive;
- font-size: 52px;
- color: #fff;
- margin: 0;
- padding-left: 0;
- padding-right: 0;
- font-weight: 500;
- }
-
- h3 {
- margin-top: 20px;
- margin-bottom: 10px;
- font-family: Roboto, sans-serif;
- font-size: 30px;
- font-weight: lighter;
- }
+ margin: 0;
+ padding-left: 0;
+ padding-right: 0;
+ font-weight: 500;
+ }
+
+ h3 {
+ margin-top: 20px;
+ margin-bottom: 10px;
+ font-family: Roboto, sans-serif;
+ font-size: 30px;
+ font-weight: lighter;
+ }
`;
const Secao2 = styled.div`
- height: 708px;
- background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
- display: flex;
- justify-content: center;
- align-items: center;
+ height: 708px;
+ background-color: #f4f4f4;
+ display: flex;
+ justify-content: center;
+ align-items: center;
`;
const Secao3 = styled.div`
- height: 127px;
- background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
- color: ${props => props.contrast === "" ? "#666" : "white"};
- line-height: 1.42857143;
- font-size: 18px;
- text-align: center;
- padding-top: 70px;
-
- p {
- margin: 0 0 10px 0;
- }
+ height: 127px;
+ background-color: #f4f4f4;
+ color: #666;
+ line-height: 1.42857143;
+ font-size: 18px;
+ text-align: center;
+ padding-top: 70px;
+
+ p {
+ margin: 0 0 10px 0;
+ }
`;
const Formulario = styled.div`
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
- box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(255,255,255,.12),0 1px 2px rgba(255,255,255,.24)"};
- padding: 40px;
- height: 560px;
- width: 480px;
- color: ${props => props.contrast === "" ? "#666" : "white"};
- border: ${props => props.contrast === "" ? "" : "1px solid white"};
-
- form .inputBlock {
- margin-block: 22px;
-
- }
-
- form .inputBlock label {
- font-size: 14px;
- font-weight: bold;
- display: block;
-
- }
-
- form .inputBlock input {
- width: 100%;
- height: 32px;
- font-size: 14px;
- border: 0;
- border-bottom: 1px solid #eee;
-
- }
-
- form .inputBlock.Message input {
- height: 131px;
- }
-
- form buttom[type=submit] {
- width: 100%;
- border: 0;
- margin-top: 30px;
- background: #7d40e7
- border-radius: 2px;
- padding: 15px 20px;
- font-size: 16px;
- font-weight: bold;
- color: #fff;
- cursor: pointer;
- transition: background 0.5s;
-
- }
-
- form buttom[type=submit]:hover {
- background: #6931ac
- }
-
-
- h2 {
- font-size: 24px;
- font-weight: lighter;
- margin-bottom: 50px;
- margin-top: 20px;
- text-align: center;
-
- }
+ background-color: #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ padding: 40px;
+ height: 560px;
+ width: 480px;
+ color: #666;
+
+ form .inputBlock {
+ margin-block: 22px;
+
+ }
+
+ form .inputBlock label {
+ font-size: 14px;
+ font-weight: bold;
+ display: block;
+
+ }
+
+ form .inputBlock input {
+ width: 100%;
+ height: 32px;
+ font-size: 14px;
+ border: 0;
+ border-bottom: 1px solid #eee;
+
+ }
+
+ form .inputBlock.Message input {
+ height: 131px;
+ }
+
+ form buttom[type=submit] {
+ width: 100%;
+ border: 0;
+ margin-top: 30px;
+ background: #7d40e7
+ border-radius: 2px;
+ padding: 15px 20px;
+ font-size: 16px;
+ font-weight: bold;
+ color: #fff;
+ cursor: pointer;
+ transition: background 0.5s;
+
+ }
+
+ form buttom[type=submit]:hover {
+ background: #6931ac
+ }
+
+
+ h2 {
+ font-size: 24px;
+ font-weight: lighter;
+ margin-bottom: 50px;
+ margin-top: 20px;
+ text-align: center;
+
+ }
`;
function Contact(props) {
- const { state } = useContext(Store)
- useEffect(() => {
- window.scrollTo(0, 0)
- })
-
- return (
- <div>
- <link
- href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto:300,400&display=swap"
- rel="stylesheet"
- />
- <Secao1 contrast={state.contrast}>
- <h2>CONTATO</h2>
- <h3>Quer enviar uma mensagem?</h3>
- </Secao1>
-
- <Secao2 contrast={state.contrast}>
- <Formulario noValidate autoComplete="off" contrast={state.contrast}>
- <h2>
- Entre em contato para enviar dúvidas,
- <br />
- sugestões ou crÃticas
- </h2>
- <InputFormulario contrast={state.contrast} />
- </Formulario>
- </Secao2>
-
- <Secao3 contrast={state.contrast}>
- <span>MEC - Ministério da Educação </span>
- <p>
- Endereço: Esplanada dos Ministérios Bloco L - Ed.Sede e Anexos. CEP:
- 70.047-900 - BrasÃlia/DF. Telefone: 0800 616161
- </p>
- </Secao3>
- </div>
- );
+
+ useEffect(() => {
+ window.scrollTo(0, 0)
+ })
+
+ return (
+ <>
+ <link
+ href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto:300,400&display=swap"
+ rel="stylesheet"
+ />
+ <Secao1>
+ <h2>CONTATO</h2>
+ <h3>Quer enviar uma mensagem?</h3>
+ </Secao1>
+
+ <Secao2>
+ <Formulario noValidate autoComplete="off">
+ <h2>
+ Entre em contato para enviar dúvidas,
+ <br />
+ sugestões ou crÃticas
+ </h2>
+ <InputFormulario />
+ </Formulario>
+ </Secao2>
+
+ <Secao3>
+ <span>MEC - Ministério da Educação </span>
+ <p>
+ Endereço: Esplanada dos Ministérios Bloco L - Ed.Sede e Anexos. CEP:
+ 70.047-900 - BrasÃlia/DF. Telefone: 0800 616161
+ </p>
+ </Secao3>
+ </>
+ );
}
export default Contact;
diff --git a/src/Pages/EditLearningObjectPage.js b/src/Pages/EditLearningObjectPage.js
index e9b4da89..c785bf35 100644
--- a/src/Pages/EditLearningObjectPage.js
+++ b/src/Pages/EditLearningObjectPage.js
@@ -187,11 +187,13 @@ export default function EditLearningObjectPage (props) {
const acceptFile = (file) => {
const objectURL = URL.createObjectURL(file)
+ console.log('acceptFile: ', file)
setTempUrl(objectURL)
setThumbnailStage('editing')
}
const updateThumb = (newThumbnail) => {
setThumbnail(newThumbnail)
+ console.log('updateThumb: ', thumbnail)
}
@@ -225,13 +227,13 @@ export default function EditLearningObjectPage (props) {
const chooseRenderStageThumbnail = () => {
switch(thumbnailStage) {
case 'uploading':
- return (<LoadingDiv contrast={state.contrast}/>)
+ return (<LoadingDiv/>)
case 'done':
- return (<DisplayThumbnail contrast={state.contrast} acceptFile={acceptFile} thumbnail={`${apiDomain}` + thumbnail} onEditPage={true} handleDelete={handleDeleteThumbnail}/>)
+ return (<DisplayThumbnail acceptFile={acceptFile} thumbnail={`${apiDomain}` + thumbnail} onEditPage={true} handleDelete={handleDeleteThumbnail}/>)
case 'editing':
- return (<EditThumbnail contrast={state.contrast} finalizeThumb={finalizeThumb} tempImgURL={tempUrl} updateThumb={updateThumb}/>)
+ return (<EditThumbnail finalizeThumb={finalizeThumb} tempImgURL={tempUrl} updateThumb={updateThumb}/>)
default :
- return (<DragAndDropThumbnail contrast={state.contrast} acceptFile={acceptFile} onEditPage={true}/>)
+ return (<DragAndDropThumbnail acceptFile={acceptFile} onEditPage={true}/>)
}
}
@@ -256,14 +258,14 @@ export default function EditLearningObjectPage (props) {
{
!loading ?
(
- <Background contrast={state.contrast}>
+ <Background>
<div className="container">
<Grid container spacing={2}>
<Grid item md={4} xs={12}>
- <UploadFileWrapper contrast={state.contrast} draftID={recursoId} prevFile={learningObject.attachments ? learningObject.attachments[0] : null}/>
+ <UploadFileWrapper draftID={recursoId} prevFile={learningObject.attachments ? learningObject.attachments[0] : null}/>
</Grid>
<Grid item md={8} xs={12}>
- <InfoBox contrast={state.contrast}>
+ <InfoBox>
<form>
<div className="cabecalho">
<h2>Editar Recurso</h2>
@@ -275,22 +277,22 @@ export default function EditLearningObjectPage (props) {
<Grid container style={{paddingLeft : "15px", paddingRight : "15px"}}>
<Grid item xs={12} style={{paddingBottom : "40px"}}>
- <NewTitle contrast={state.contrast} draftID={learningObject.id} initialValue={learningObject.name}
+ <NewTitle draftID={learningObject.id} initialValue={learningObject.name}
onBlurCallback={onBlurCallback}
/>
</Grid>
<Grid item xs={12} style={{paddingBottom : "40px"}}>
- <SobreORecurso contrast={state.contrast} draftID={learningObject.id} initialValue={learningObject.description} onBlurCallback={onBlurCallback}/>
+ <SobreORecurso draftID={learningObject.id} initialValue={learningObject.description} onBlurCallback={onBlurCallback}/>
</Grid>
<Grid item xs={12} style={{paddingBottom : "40px"}}>
- <Keywords contrast={state.contrast} draftID={learningObject.id} initialValue={learningObject.tags !== undefined ? learningObject.tags.map((tag) => tag.name) : null}
+ <Keywords draftID={learningObject.id} initialValue={learningObject.tags !== undefined ? learningObject.tags.map((tag) => tag.name) : null}
onBlurCallback={onBlurCallback}/>
</Grid>
<Grid item xs={12} style={{paddingBottom : "40px"}}>
- <Autor contrast={state.contrast} draftID={learningObject.id}
+ <Autor draftID={learningObject.id}
initialValue={
learningObject.author === state.currentUser.name ?
0 : 1
@@ -304,44 +306,44 @@ export default function EditLearningObjectPage (props) {
</Grid>
<Grid item xs={12} style={{paddingBottom : "40px"}}>
- <TipoDeRecurso contrast={state.contrast} objTypes={objTypes} draftID={learningObject.id}
+ <TipoDeRecurso objTypes={objTypes} draftID={learningObject.id}
initialValue={learningObject.object_type !== undefined && learningObject.object_type !== null ? objTypes.filter((type) => type.name === learningObject.object_type)[0].id : null} onBlurCallback={onBlurCallback} />
</Grid>
<Grid item xs={12} style={{paddingBottom : "40px"}}>
- <Idioma contrast={state.contrast} languages={languages} draftID={learningObject.id}
+ <Idioma languages={languages} draftID={learningObject.id}
initialValue={learningObject.language !== undefined ? learningObject.language.map((language) => language.name) : null} initialIDValues={learningObject.language !== undefined ? learningObject.language.map((language) => language.id) : null}
onBlurCallback={onBlurCallback} />
</Grid>
<Grid item xs={12} style={{paddingBottom : "40px"}}>
- <EducationalStage contrast={state.contrast} draftID={learningObject.id} eduStages={eduStages} initialValue={learningObject.educational_stages !== null ? learningObject.educational_stages.map((stage) => String(stage.id)) : null} onBlurCallback={onBlurCallback}
+ <EducationalStage draftID={learningObject.id} eduStages={eduStages} initialValue={learningObject.educational_stages !== null ? learningObject.educational_stages.map((stage) => String(stage.id)) : null} onBlurCallback={onBlurCallback}
/>
</Grid>
- <SubjectsAndThemes contrast={state.contrast} draftId={learningObject.id} subjects={subjects} initialValue={learningObject.subjects !== null ? learningObject.subjects.map(subject => String(subject.id)) : null} onBlurCallback={onBlurCallback}/>
+ <SubjectsAndThemes draftId={learningObject.id} subjects={subjects} initialValue={learningObject.subjects !== null ? learningObject.subjects.map(subject => String(subject.id)) : null} onBlurCallback={onBlurCallback}/>
<Grid item xs={12} style={{paddingBottom : "40px"}}>
- <Licenca contrast={state.contrast} draftID={learningObject.id} initialValue={learningObject.license ? learningObject.license.id : null} onBlurCallback={onBlurCallback}/>
+ <Licenca draftID={learningObject.id} initialValue={learningObject.license ? learningObject.license.id : null} onBlurCallback={onBlurCallback}/>
</Grid>
<Grid item xs={12}>
<div style={{display : "flex", justifyContent : "center"}}>
- <GreyButton contrast={state.contrast} onClick={handleDelete}>
- <span className="button-text">
+ <GreyButton onClick={handleDelete}>
+ <span className="button-text">
EXCLUIR
- </span>
- </GreyButton>
+ </span>
+ </GreyButton>
- <GreyButton contrast={state.contrast} onClick={props.history.goBack}>
- <span className="button-text">
+ <GreyButton onClick={props.history.goBack}>
+ <span className="button-text">
CANCELAR
- </span>
- </GreyButton>
+ </span>
+ </GreyButton>
- <OrangeButton contrast={state.contrast} onClick={() => {handleUpdateInfo()}}>
+ <OrangeButton onClick={() => {handleUpdateInfo()}}>
SALVAR ALTERAÇÕES
- </OrangeButton>
+ </OrangeButton>
{/*
learningObject.state === "draft" &&
@@ -352,11 +354,11 @@ export default function EditLearningObjectPage (props) {
{
checkAccessLevel("partner") ?
(
- <OrangeButton contrast={state.contrast} onClick={() => {handleUpdateInfo(); handlePost()}}>PUBLICAR RECURSO</OrangeButton>
+ <OrangeButton onClick={() => {handleUpdateInfo(); handlePost()}}>PUBLICAR RECURSO</OrangeButton>
)
:
(
- <OrangeButton contrast={state.contrast} onClick={() => {handleUpdateInfo(); handleSubmit()}}>SUBMETER RECURSO</OrangeButton>
+ <OrangeButton onClick={() => {handleUpdateInfo(); handleSubmit()}}>SUBMETER RECURSO</OrangeButton>
)
}
@@ -379,7 +381,7 @@ export default function EditLearningObjectPage (props) {
)
:
(
- <LoadingSpinner contrast={state.contrast} text={"CARREGANDO"}/>
+ <LoadingSpinner text={"CARREGANDO"}/>
)
}
</React.Fragment>
diff --git a/src/Pages/EditProfilePage.js b/src/Pages/EditProfilePage.js
index 6ed58aec..f85c888d 100644
--- a/src/Pages/EditProfilePage.js
+++ b/src/Pages/EditProfilePage.js
@@ -119,7 +119,7 @@ export default function EditProfilePage(props) {
}
return (
- <Main contrast={state.contrast}>
+ <div style={{ backgroundColor: "#f4f4f4", color: "#666" }}>
<Snackbar open={snackbarOpened.open} autoHideDuration={1000} onClose={handleCloseSnackbar}
anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
>
@@ -127,34 +127,31 @@ export default function EditProfilePage(props) {
</Snackbar>
<CustomizedBreadcrumbs
- contrast={state.contrast}
values={["Minha área", "Configurações da Conta", tabs[tabValue]]}
/>
<MainContainerDiv container spacing={3} justify="center" align="center">
<Grid item xs={12} md={3} style={{ fontFamily: "Roboto" }} >
<Paper elevation={3}>
- <ConfiguracoesMenu contrast={state.contrast}>
- <h4 className="title">
+ <ConfiguracoesMenu>
+ <h4 style={{ marginTop: "10px", fontFamily: "inherit", display: "flex", justifyContent: "center" }}>
Configurações da Conta
</h4>
<StyledTabs
- contrast={state.contrast}
orientation="vertical"
variant="fullWidth"
- textColor="primary"
value={tabValue}
onChange={handleChangeTab}
TabIndicatorProps={{ style: { display: "none" } }}
>
- <StyledTab contrast={state.contrast} label={tabs[0]} />
- <StyledTab contrast={state.contrast} label={tabs[1]} />
- <StyledTab contrast={state.contrast} label={tabs[2]} />
+ <StyledTab label={tabs[0]} />
+ <StyledTab label={tabs[1]} />
+ <StyledTab label={tabs[2]} />
</StyledTabs>
</ConfiguracoesMenu>
</Paper>
</Grid>
- <TabContentDiv contrast={state.contrast} item xs={12} md={9}>
+ <TabContentDiv item xs={12} md={9}>
<Paper elevation={3} style={{ width: "100%" }}>
{tabValue === 0 && <TabPanelEditarPerfil updateUserInfo={updateUserInfo} />}
{tabValue === 1 && <TabPanelSolicitarContaProfessor />}
@@ -164,36 +161,18 @@ export default function EditProfilePage(props) {
/>}
</TabContentDiv>
</MainContainerDiv>
- </Main>
+ </div>
)
}
-const Main = styled.div`
- background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
- color: ${props => props.contrast === "" ? "#666" : "white"};
-`
-
const TabContentDiv = styled(Grid)`
-
- .subtitle{
- display: flex;
- justify-content: flex-start;
- font-size: 18px;
- color: ${props => props.contrast === "" ? "" : "white"};
- }
-
- .title{
- font-weight: 300;
- color: ${props => props.contrast === "" ? "" : "white"};
- }
.card-config {
padding : 40px;
margin : 20px 0 20px 10px;
border-radius : 3px;
box-shadow : 0 0 5px 0rgba(0,0,0,.25);
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
- border: ${props => props.contrast === "" ? 0 : "1px solid white"};
+ background-color : #fff;
text-align : start;
margin-left : auto;
margin-right : auto;
@@ -237,32 +216,19 @@ const TabContentDiv = styled(Grid)`
font-weight : 500;
line-height : 1.1;
}
-
- .link {
- text-align: flex-start;
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- }
`
const StyledTabs = styled(Tabs)`
display : flex;
justify-content : center;
- .MuiTab-textColorPrimary{
- color: ${props => props.contrast === "" ? "#666" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- font-weight: 400;
- }
- .MuiTab-textColorPrimary.Mui-selected {
- color: ${props => props.contrast === "" ? "black" : "yellow"};
- text-decoration: none;
- font-weight: 600;
+ .Mui-selected {
+ background-color : #f4f4f4;
}
`
const StyledTab = styled(Tab)`
&:hover {
- background-color: ${props => props.contrast === "" ? "#6666663d" : "rgba(255,255,0,0.24)"};
+ background-color : #6666663d;
}
`
@@ -270,16 +236,7 @@ const ConfiguracoesMenu = styled.div`
margin : 20px 0 20px 0;
border-radius : 3px;
padding : 20px 0;
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
- border: ${props => props.contrast === "" ? 0 : "1px solid white"};
-
- .title{
- margin-top: 10px;
- font-family: inherit;
- display: flex;
- justify-content: center;
- color: ${props => props.contrast === "" ? "" : "white"};
- }
+ background-color : #fff;
`
const MainContainerDiv = styled(Grid)`
diff --git a/src/Pages/FormationMaterialPage.js b/src/Pages/FormationMaterialPage.js
index 7f6c27cd..79707461 100644
--- a/src/Pages/FormationMaterialPage.js
+++ b/src/Pages/FormationMaterialPage.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, { useRef, useContext } from 'react';
+import React, { useRef } from 'react';
import styled from 'styled-components';
import { Grid } from '@material-ui/core';
import FormationMaterialHeader from '../Components/FormationMaterialHeader.js';
@@ -24,20 +24,18 @@ import TopicList from '../Components/TopicList.js';
import TopicFooter from '../Components/TopicFooter.js';
import colecoes_obj from '../Components/FormationMaterialsResources/formationMaterials.js';
import Breadcrumbs from "@material-ui/core/Breadcrumbs";
-import { Link } from "react-router-dom";
-import { Store } from '../Store';
+import {Link} from "react-router-dom"
export default function FormationMaterialPage(props) {
- const colecao = window.location.pathname.split('?')[0] === "/colecao";
+ const colecao = props.location.pathname === "/colecao";
const colecoes = colecoes_obj();
- const { state } = useContext(Store);
const colecao_id = Number(
colecao ?
- window.location.search.split('=')[1]
- : window.location.search.split('&')[0].split('=')[1]
+ props.location.search.split('=')[1]
+ : props.location.search.split('&')[0].split('=')[1]
);
- const topico_id = Number(colecao ? 0 : window.location.search.split('&')[1].split('=')[1]);
+ const topico_id = Number(colecao ? 0 : props.location.search.split('&')[1].split('=')[1]);
const colecao_obj = ((id) => {
for (const c in colecoes) {
@@ -60,10 +58,12 @@ export default function FormationMaterialPage(props) {
window.scrollTo(0, topic_list_ref.current.offsetTop);
}
+ console.log(colecao_obj);
+
return (
- <Background contrast={state.contrast}>
+ <Background>
<BreadCrumbsDiv>
- <StyledBreadCrumbs contrast={state.contrast}>
+ <StyledBreadCrumbs>
<Link to="/">Página Inicial</Link>
<span>
{
@@ -72,7 +72,7 @@ export default function FormationMaterialPage(props) {
</span>
</StyledBreadCrumbs>
</BreadCrumbsDiv>
- <MainContainer contrast={state.contrast}>
+ <MainContainer>
<Grid container
direction="row"
justify="flex-start"
@@ -80,7 +80,6 @@ export default function FormationMaterialPage(props) {
>
<Grid item xs={12}>
<FormationMaterialHeader
- contrast={state.contrast}
colecao={colecao}
colecao_obj={colecao_obj}
topico_obj={topico_obj}
@@ -89,7 +88,6 @@ export default function FormationMaterialPage(props) {
</Grid>
<Grid item xs={12}>
<FormationMaterialDescription
- contrast={state.contrast}
colecao={colecao}
colecao_obj={colecao_obj}
topico_obj={topico_obj}
@@ -99,7 +97,6 @@ export default function FormationMaterialPage(props) {
{
colecao ?
<TopicList
- contrast={state.contrast}
topicos={colecao_obj.topics}
colecao_id={colecao_id}
/>
@@ -113,7 +110,6 @@ export default function FormationMaterialPage(props) {
<div></div>
:
<TopicFooter
- contrast={state.contrast}
topic_name={colecao_obj.topic_name}
src={colecao_obj.img}
colecao_name={colecao_obj.name} />
@@ -123,13 +119,12 @@ export default function FormationMaterialPage(props) {
}
const Background = styled.div`
- background: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
+ background-color: #f4f4f4;
`
const MainContainer = styled.div`
margin-left: auto;
margin-right: auto;
padding : 0;
- background: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
@media screen and (min-width: 768px) {
width : 750px;
@@ -146,11 +141,11 @@ const StyledBreadCrumbs = styled(Breadcrumbs)`
justify-content: flex-start;
max-width: 1170px;
span {
- color: ${props => props.contrast === "" ? "#a5a5a5" : "white"};
+ color: #a5a5a5;
}
a {
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ color: #00bcd4;
+ text-decoration: none;
}
`
diff --git a/src/Pages/HelpCenter.js b/src/Pages/HelpCenter.js
index f72b8c48..162dec27 100644
--- a/src/Pages/HelpCenter.js
+++ b/src/Pages/HelpCenter.js
@@ -16,11 +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, { useEffect, useContext } from 'react';
+import React, { useEffect } from 'react';
import styled from 'styled-components';
import Grid from '@material-ui/core/Grid';
import { Link } from 'react-router-dom';
-import { Store } from '../Store';
+
import CardPublicando from '../Components/HelpCenter/Cards/CardPublicando';
import CardEncontrando from '../Components/HelpCenter/Cards/CardEncontrando';
import CardParticipando from '../Components/HelpCenter/Cards/CardParticipando';
@@ -31,7 +31,6 @@ import { Banner3 } from "ImportImages.js";
function HelpCenter(props) {
- const { state } = useContext(Store)
let windowWidth = window.innerWidth
useEffect(() => { window.scrollTo(0, 0) }, [])
@@ -40,7 +39,7 @@ function HelpCenter(props) {
<div style={{ backgroundColor: "#f4f4f4" }}>
<link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:300,400&display=swap" rel="stylesheet" />
- <Secao1 contrast={state.contrast}>
+ <Secao1>
<div className="container">
{
windowWidth > 420 ?
@@ -56,7 +55,7 @@ function HelpCenter(props) {
</div>
</Secao1>
- <Secao2 contrast={state.contrast}>
+ <Secao2>
<div className="container">
<div className="container-secao">
<div className="conteudo">
@@ -66,26 +65,26 @@ function HelpCenter(props) {
<div>
<Grid container justify="center" style={{ margin: -8 }}>
<Grid item xs={12} md={5} style={{ padding: 8 }}>
- <CardPublicando contrast={state.contrast} />
+ <CardPublicando />
</Grid>
<Grid item xs={12} md={5} style={{ padding: 8 }}>
- <CardEncontrando contrast={state.contrast} />
+ <CardEncontrando />
</Grid>
<Grid item xs={12} md={5} style={{ padding: 8 }}>
- <CardParticipando contrast={state.contrast} />
+ <CardParticipando />
</Grid>
<Grid item xs={12} md={5} style={{ padding: 8 }}>
- <CardGerenciando contrast={state.contrast} />
+ <CardGerenciando />
</Grid>
</Grid>
</div>
</div>
</div>
</div>
- </Secao2>
+ </Secao2>
<div style={{ width: "100%" }}>
- <Secao3 contrast={state.contrast}>
+ <Secao3>
<Grid style={{ height: "100%" }} container justify="center">
<Grid style={{ backgroundColor: "#333", paddingInline: "0" }} item xs={12} md={6}>
<iframe title="VÃdeo página ajuda" src="https://player.vimeo.com/video/231609051" width="100%" height="100%" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
@@ -145,7 +144,7 @@ function HelpCenter(props) {
</Secao3>
</div>
- <Secao4 contrast={state.contrast}>
+ <Secao4>
<div className="container">
<div className="conteudo">
<h2>Não encontrou o que você precisa?</h2>
@@ -165,7 +164,7 @@ export default HelpCenter;
const Secao1 = styled.div`
- background-color: ${props => props.contrast === "" ? "#00bcd4" : "black"};
+ background-color:#00bcd4;
text-align: center;
width: 100%;
.container {
@@ -215,9 +214,10 @@ const Secao1 = styled.div`
`
const Secao2 = styled.div`
- background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
+ background-color:#f4f4f4;
text-align: center;
- padding-bottom: 50px;
+ margin-bottom: 20px;
+ padding-bottom: 50px
width: 100%;
.container {
height: 100%;
@@ -236,14 +236,14 @@ const Secao2 = styled.div`
h2 {
font-size: 30px;
font-weight: lighter;
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color:#666;
margin: 0;
}
}
.card-ajuda {
height: 360px;
- margin-bottom: 20px;
+ margin-bottom: 20px
.card {
@@ -321,9 +321,9 @@ const Secao2 = styled.div`
const Secao3 = styled.div`
padding: 0;
text-align: center;
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ background-color: #fff;
margin-inline: auto;
- color: ${props => props.contrast === "" ? "rgba(0,0,0,0.87)" : "white"};
+ color: rgba(0,0,0,0.87);
width: 100%;
.links {
font-size: 15px;
@@ -332,12 +332,10 @@ const Secao3 = styled.div`
margin: 0 0 10px;
line-height: 1.42857143;
a {
- color: ${props => props.contrast === "" ? "#666" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- font-weight: lighter;
+ color: #666;
+ text-decoration: none;
:hover {
- color: ${props => props.contrast === "" ? "#000" : "yellow"};
- font-weight: 500;
+ color: #000;
}
}
}
@@ -363,7 +361,7 @@ const Secao4 = styled.div`
width: 100%;
.container {
height: 100%;
- background-color: ${props => props.contrast === "" ? "" : "black"};
+ color: #a5a5a5;
margin-inline: auto;
display: flex;
flex-direction: column;
@@ -375,7 +373,7 @@ const Secao4 = styled.div`
h2 {
font-size: 24px;
font-weight: lighter;
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color:#666;
margin-top: 20px;
margin-bottom: 10px;
text-align: center;
@@ -383,14 +381,15 @@ const Secao4 = styled.div`
span {
font-size: 15px;
- color: ${props => props.contrast === "" ? "#777" : "white"};
+ color:#777;
text-align: center;
+
}
button {
margin-top: 25px;
- color: ${props => props.contrast === "" ? "rgba(255,255,255,0.87)" : "yellow"};
- background-color: ${props => props.contrast === "" ? "rgb(255,127,0)" : "black"};
+ color: rgba(255,255,255,0.87);
+ background-color: rgb(255,127,0);
box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
outline: none;display: inline-block;
position: relative;
@@ -405,7 +404,7 @@ const Secao4 = styled.div`
border-radius: 3px;
box-sizing: border-box;
user-select: none;
- border: ${props => props.contrast === "" ? "none" : "1px solid white"};
+ border: 0;
padding: 0 6px;
margin: 6px 8px;
white-space: nowrap;
@@ -419,12 +418,9 @@ const Secao4 = styled.div`
overflow: hidden;
transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1);
letter-spacing: .01em;
- :hover{
- background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24)"};
- }
a {
- color: ${props => props.contrast === "" ? "rgba(255,255,255,0.87)" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ text-decoration: none;
+ color: #fff;
}
}
}
diff --git a/src/Pages/MaterialPage.js b/src/Pages/MaterialPage.js
index 4ec7369a..9b243b8b 100644
--- a/src/Pages/MaterialPage.js
+++ b/src/Pages/MaterialPage.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, useContext } from "react";
+import React, { useState } from "react";
import { Col, Row, Container } from "react-grid-system";
import { Carousel } from "react-responsive-carousel";
import MaterialCard from "../Components/MaterialCard";
@@ -25,84 +25,77 @@ import ExpandedMaterial from "../Components/ExpandedMaterials";
import styled from "styled-components";
import Breadcrumbs from "@material-ui/core/Breadcrumbs";
import { Link } from "react-router-dom";
-import { Store } from '../Store';
const MateriaPage = () => {
- const materials = colecoes_obj();
- const { state } = useContext(Store);
- const [currMaterial, setCurrMaterial] = useState({
- open: false,
- material: {},
- });
+ const materials = colecoes_obj();
- const HandleExpandMaterial = (id) => {
- if (id !== currMaterial.material.id)
- setCurrMaterial({
- open: true,
- material: { ...materials[id] },
- });
- else
- setCurrMaterial({
+ const [currMaterial, setCurrMaterial] = useState({
open: false,
material: {},
- });
- };
+ });
- return (
- <MainPage contrast={state.contrast}>
- <link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap" rel="stylesheet" />
- <BreadCrumbsDiv>
- <StyledBreadCrumbs contrast={state.contrast}>
- <Link to="/">Página Inicial</Link>
- <span>Materias de Formação</span>
- </StyledBreadCrumbs>
- </BreadCrumbsDiv>
- <StyledBox contrast={state.contrast}>
- <StyledTitle contrast={state.contrast}>
- Materias de formação
- </StyledTitle>
- </StyledBox>
- <MainContainer contrast={state.contrast}>
- <Container style={{ padding: "20px" }}>
- <Carousel
- style={{ padding: "20px" }}
- showThumbs={false}
- showStatus={false}
- >
- <Row>
- {materials.map((material, index) => {
- return (
- <Col md={3} key={index}>
- <MaterialCard
- contrast={state.contrast}
- name={material.name}
- thumb={material.img}
- score={material.score}
- modules={material.topics}
- handleExpand={HandleExpandMaterial}
- id={index}
- />
- </Col>
- );
- })}
- </Row>
- </Carousel>
- {currMaterial.open ? (
- <ExpandedMaterial contrast={state.contrast} material={currMaterial.material} />
- ) : null}
- </Container>
- </MainContainer>
- </MainPage>
- );
+ const HandleExpandMaterial = (id) => {
+ if (id !== currMaterial.material.id)
+ setCurrMaterial({
+ open: true,
+ material: { ...materials[id] },
+ });
+ else
+ setCurrMaterial({
+ open: false,
+ material: {},
+ });
+ };
+
+ return (
+ <>
+ <link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap" rel="stylesheet" />
+ <BreadCrumbsDiv>
+ <StyledBreadCrumbs>
+ <Link to="/">Página Inicial</Link>
+ <span>Materias de Formação</span>
+ </StyledBreadCrumbs>
+ </BreadCrumbsDiv>
+ <StyledBox>
+ <StyledTitle>
+ Materias de formação
+ </StyledTitle>
+ </StyledBox>
+ <MainContainer>
+ <Container style={{ padding: "20px" }}>
+ <Carousel
+ style={{ padding: "20px" }}
+ showThumbs={false}
+ showStatus={false}
+ >
+ <Row>
+ {materials.map((material, index) => {
+ return (
+ <Col md={3} key={index}>
+ <MaterialCard
+ name={material.name}
+ thumb={material.img}
+ score={material.score}
+ modules={material.topics}
+ handleExpand={HandleExpandMaterial}
+ id={index}
+ />
+ </Col>
+ );
+ })}
+ </Row>
+ </Carousel>
+ {currMaterial.open ? (
+ <ExpandedMaterial material={currMaterial.material} />
+ ) : null}
+ </Container>
+ </MainContainer>
+ </>
+ );
};
export default MateriaPage;
-const MainPage = styled.div`
- background: ${props => props.contrast === "" ? "" : "black"};
-`
-
const MainContainer = styled.div`
- background: ${props => props.contrast === "" ? "" : "black"};
margin-left: auto;
margin-right: auto;
padding: 0;
@@ -123,11 +116,11 @@ const StyledBreadCrumbs = styled(Breadcrumbs)`
justify-content: flex-start;
max-width: 1170px;
span {
- color: ${props => props.contrast === "" ? "#a5a5a5" : "white"};
+ color: #a5a5a5;
}
a {
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ color: #00bcd4;
+ text-decoration: none;
}
`
@@ -137,17 +130,16 @@ const BreadCrumbsDiv = styled.div`
`
const StyledBox = styled.div`
- background: ${props => props.contrast === "" ? "#fff" : "black"};
+ background-color: #fff;
box-shadow: 1px 1px 3px rgba(0,0,0,.12), 1px 1px 2px rgba(0,0,0,.24);
- border: ${props => props.contrast === "" ? "0" : "1px solid white"};
padding: 30px;
margin-bottom: 30px;
text-align: center;
`
const StyledTitle = styled.span`
text-align: center;
- color: ${props => props.contrast === "" ? "#e81f4f" : "white"};
+ color: #e81f4f;
font-size: 26px;
font-family: "Roboto", sans-serif;
- font-weight: lighter;
+ font-weight: 100;
`
\ No newline at end of file
diff --git a/src/Pages/PageNotFound.js b/src/Pages/PageNotFound.js
index 291db661..7e9a5b0c 100644
--- a/src/Pages/PageNotFound.js
+++ b/src/Pages/PageNotFound.js
@@ -16,46 +16,29 @@ 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 { Store } from '../Store'
+import React from 'react';
import styled from "styled-components";
export default function PageNotFound (props) {
- const { state } = useContext(Store);
-
return (
- <ContentDiv contrast={state.contrast} >
+ <div>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,400,500&display=swap"
rel="stylesheet"
/>
- <StyledDiv>
- <span style={{ fontSize: '50px' }}>Desculpe</span>
- </StyledDiv>
- <StyledDiv>
- <span style={{ fontSize: '30px' }}>Não foi possÃvel encontrar a página que você está procurando.</span>
- </StyledDiv>
- <StyledDiv>
- <a href='/'><span style={{ fontSize: '20px' }}>Voltar para a página inicial</span></a>
- </StyledDiv>
- </ContentDiv>
+ <StyledDiv><span style={{ fontSize: '50px' }}>Desculpe</span></StyledDiv>
+ <StyledDiv><span style={{ fontSize: '30px' }}>Não foi possÃvel encontrar a página que você está procurando.</span></StyledDiv>
+ <StyledDiv><a href='/'><span style={{ fontSize: '20px' }}>Voltar para a página inicial</span></a></StyledDiv>
+ </div>
)
}
-const ContentDiv = styled('div')`
- background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
- color: ${props => props.contrast === "" ? "#666" : "white"} !important;
- a {
- color: ${props => props.contrast === "" ? "" : "yellow"} !important;
- text-decoration: ${props => props.contrast === "" ? "none" : "underline yellow"} !important;
- }
-`
-
const StyledDiv = styled('div')`
width: 100%;
- padding-top: 70px;
- padding-bottom: 70px;
+ margin-top: 70px;
+ margin-bottom: 70px;
justify-content : space-evenly;
display: flex;
+ color: #757575;
text-align:center;
`
\ No newline at end of file
diff --git a/src/Pages/PageProfessor.js b/src/Pages/PageProfessor.js
index c77fe1d5..96cd46bb 100644
--- a/src/Pages/PageProfessor.js
+++ b/src/Pages/PageProfessor.js
@@ -1,18 +1,18 @@
-import React, { useState, useContext } from 'react'
-import { Store } from '../Store.js'
+import React, {useState,useContext} from 'react'
+import {Store} from '../Store.js'
import Paper from '@material-ui/core/Paper';
import PartOne from '../Components/PageProfessorComponents/PartOne.js'
import PartTwo from '../Components/PageProfessorComponents/PartTwo.js'
import PartThree from '../Components/PageProfessorComponents/PartThree.js'
import SuccessfulRequest from '../Components/PageProfessorComponents/SuccessfulRequest.js'
import ModalConfirmarProfessor from '../Components/PageProfessorComponents/ModalConfirmarProfessor.js'
-import { postRequest } from '../Components/HelperFunctions/getAxiosConfig'
+import {postRequest} from '../Components/HelperFunctions/getAxiosConfig'
-export default function PageProfessor(props) {
- const { state } = useContext(Store)
+export default function PageProfessor (props) {
+ const {state} = useContext(Store)
const [modalOpen, toggleModal] = useState(false)
const handleModal = () => {
- toggleModal(!modalOpen);
+ toggleModal(!modalOpen) ;
}
const redirect = () => {
@@ -24,36 +24,39 @@ export default function PageProfessor(props) {
teacher_cpf: '',
school_phone: '',
school_name: '',
- school_city: '',
- school_uf: {
- abbreviation: '',
- name: ''
+ school_city : '',
+ school_uf : {
+ abbreviation : '',
+ name : ''
},
inep_code: ''
}
)
- const [activeStep, setActiveStep] = useState(0);
-
- const incrementStep = () => {
- setActiveStep((previous) => previous + 1);
- }
-
- const decrementStep = () => {
- setActiveStep((previous) => previous - 1);
+ const [stepper, handleStepper] = useState(
+ [ {value : '1', selected : true}, {value : '2', selected : false}, {value : '3', selected : false}, {value : '4', selected : false}]
+ )
+ const toggleStepper = (selected1, selected2, selected3, selected4) => {
+ handleStepper(
+ [
+ {value : '1', selected : selected1},
+ {value : '2', selected : selected2},
+ {value : '3', selected : selected3},
+ {value : '4', selected : selected4}
+ ]
+ )
}
const handleBuscarParteUm = (ufAbbreviation, ufName, nomeMunicipio, inep) => {
- setRegisterInformation({
- ...registerInformation,
- school_uf: {
+ setRegisterInformation({...registerInformation,
+ school_uf : {
abbreviation: (ufAbbreviation ? ufAbbreviation : ''),
- name: (ufName ? ufName : '')
+ name : (ufName ? ufName : '')
},
- school_city: (nomeMunicipio ? nomeMunicipio : ''),
- inep_code: (inep ? inep : '')
+ school_city : (nomeMunicipio ? nomeMunicipio : ''),
+ inep_code : (inep ? inep : '')
})
- incrementStep()
+ toggleStepper(false, true, false, false)
}
const handleBuscarParteDois = (city_name, inep, school_name, state_name) => {
@@ -61,22 +64,20 @@ export default function PageProfessor(props) {
const prev_state_name = registerInformation.school_uf.name
const prev_city_name = registerInformation.school_city.name
- setRegisterInformation({
- ...registerInformation,
- school_uf: {
- abbreviation: uf_abbreviation,
+ setRegisterInformation({...registerInformation,
+ school_uf : {
+ abbreviation : uf_abbreviation,
name: (state_name ? state_name : prev_state_name)
},
- school_city: (city_name ? city_name : prev_city_name),
+ school_city :(city_name ? city_name : prev_city_name),
school_name: (school_name ? school_name : ''),
- inep_code: (inep ? inep : '')
+ inep_code : (inep ? inep : '')
})
- incrementStep();
+ toggleStepper(false, false, true, false)
}
const handleParteTres = (phone, cpf) => {
- setRegisterInformation({
- ...registerInformation,
+ setRegisterInformation({...registerInformation,
teacher_cpf: (cpf ? cpf : ''),
school_phone: (phone ? phone : ''),
})
@@ -87,74 +88,74 @@ export default function PageProfessor(props) {
props.history.push('/perfil/atualizacoes')
}
- function handleSuccessfulSubmit(data) {
+ function handleSuccessfulSubmit (data) {
toggleModal()
- incrementStep();
+ toggleStepper(false, false, false, true)
}
const handleFinalSubmit = () => {
const url = `/users/teacher_request`
const payload = {
- city: registerInformation.school_city,
- cpf: registerInformation.teacher_cpf.toString(),
- inep_id: registerInformation.inep_code.toString(),
- phone: registerInformation.school_phone.toString(),
- school: registerInformation.school_name,
- uf: registerInformation.school_uf.name,
+ city : registerInformation.school_city.name,
+ cpf : registerInformation.teacher_cpf,
+ inep_id : registerInformation.inep_code,
+ phone : registerInformation.school_phone,
+ school : registerInformation.school_name,
+ uf : registerInformation.school_uf.name
}
- postRequest(url, payload, handleSuccessfulSubmit, (error) => { console.log(error) })
+ postRequest(url, payload, handleSuccessfulSubmit, (error) =>{console.log(error)})
}
return (
<>
- {
- state.userAgreedToPublicationTerms ?
- (
- <>
- <ModalConfirmarProfessor contrast={state.contrast} open={modalOpen} handleClose={handleModal}
- info={registerInformation} confirmar={() => { handleFinalSubmit() }}
- cancelar={() => { toggleModal() }}
- />
- <div style={state.contrast === "" ? { backgroundColor: "#f4f4f4", color: "#666" } : { backgroundColor: "black", color: "white" }}>
- <div style={{ display: "flex", justifyContent: "center", paddingTop: "5vh", paddingBottom: "5vh" }}>
- <Paper elevation={3} style={state.contrast === "" ? { width: "max-content" } : { width: "max-content", backgroundColor: "black", color: "white", border: '1px solid white' }}>
- <div style={{ paddingRight: "15px", paddingLeft: "15px" }}>
- {activeStep === 0 &&
- <PartOne contrast={state.contrast} activeStep={activeStep} handleBuscar={handleBuscarParteUm}
- handleCancelar={handleCancelar}
- />
- }
- {activeStep === 1 &&
- <PartTwo activeStep={activeStep} contrast={state.contrast}
- info={registerInformation} goBack={decrementStep}
- handleCancelar={handleCancelar} handleBuscar={handleBuscarParteDois}
- />
- }
- {activeStep === 2 &&
- <PartThree activeStep={activeStep} goBack={decrementStep} contrast={state.contrast}
- handleCancelar={handleCancelar} info={registerInformation}
- handleSubmit={handleParteTres}
- />
- }
- {
- activeStep === 3 &&
- <SuccessfulRequest email={state.currentUser.email} history={props.history} contrast={state.contrast} />
- }
- </div>
- </Paper>
- </div>
+ {
+ state.userAgreedToPublicationTerms?
+ (
+ <>
+ <ModalConfirmarProfessor open={modalOpen} handleClose={handleModal}
+ info={registerInformation} confirmar = {() => {handleFinalSubmit()}}
+ cancelar = {() => {toggleModal()}}
+ />
+ <div style={{backgroundColor:"#f4f4f4", color:"#666"}}>
+ <div style={{display: "flex", justifyContent:"center", paddingTop:"5vh", paddingBottom:"5vh"}}>
+ <Paper elevation={3} style= {{width:"max-content"}}>
+ <div style={{paddingRight:"15px", paddingLeft:"15px"}}>
+ {stepper[0].selected &&
+ <PartOne stepper={stepper} handleBuscar={handleBuscarParteUm}
+ handleCancelar={handleCancelar}
+ />
+ }
+ {stepper[1].selected &&
+ <PartTwo stepper={stepper}
+ info={registerInformation} goBack={toggleStepper}
+ handleCancelar={handleCancelar} handleBuscar={handleBuscarParteDois}
+ />
+ }
+ {stepper[2].selected &&
+ <PartThree stepper={stepper} goBack={toggleStepper}
+ handleCancelar={handleCancelar} info={registerInformation}
+ handleSubmit={handleParteTres}
+ />
+ }
+ {
+ stepper[3].selected &&
+ <SuccessfulRequest email={state.currentUser.email} history={props.history}/>
+ }
+ </div>
+ </Paper>
</div>
- </>
- )
- :
- (
- <>
- {redirect()}
- </>
- )
- }
+ </div>
+ </>
+ )
+ :
+ (
+ <>
+ {redirect()}
+ </>
+ )
+ }
</>
)
}
diff --git a/src/Pages/PasswordRecoveryPage.js b/src/Pages/PasswordRecoveryPage.js
index e1a42071..1ed9b8cc 100644
--- a/src/Pages/PasswordRecoveryPage.js
+++ b/src/Pages/PasswordRecoveryPage.js
@@ -1,5 +1,5 @@
-import React, { useState, useContext } from 'react'
-import { BackgroundDiv } from '../Components/TabPanels/StyledComponents.js'
+import React, {useState} from 'react'
+import {BackgroundDiv} from '../Components/TabPanels/StyledComponents.js'
import Paper from '@material-ui/core/Paper';
import styled from 'styled-components'
import ValidateUserInput from '../Components/HelperFunctions/FormValidationFunction.js'
@@ -7,15 +7,14 @@ import Default from '../Components/PasswordRecoveryComponents/Default.js'
import Success from '../Components/PasswordRecoveryComponents/Success.js'
import CaseError from '../Components/PasswordRecoveryComponents/Error.js'
import CustomizedBreadcrumbs from '../Components/TabPanels/Breadcrumbs.js'
-import { postRequest } from '../Components/HelperFunctions/getAxiosConfig'
-import { Store } from '../Store'
+import {postRequest} from '../Components/HelperFunctions/getAxiosConfig'
+
+export default function PasswordRecoveryPage (props) {
-export default function PasswordRecoveryPage(props) {
- const { state } = useContext(Store)
const [formEmail, setEmail] = useState(
{
- key: false,
- value: ""
+ key : false,
+ value : ""
}
)
@@ -24,22 +23,22 @@ export default function PasswordRecoveryPage(props) {
const userInput = e.target.value
const flag = ValidateUserInput('email', userInput)
- setEmail({
- ...formEmail,
- key: flag,
- value: userInput
+ setEmail({...formEmail,
+ key : flag,
+ value : userInput
})
}
const [aux, setCase] = useState('default')
const handleChangeSwitch = (value) => {
+ console.log(value)
if (value !== "success") {
- setEmail({ key: false, value: "" })
+ setEmail({key : false, value : ""})
}
setCase(value)
};
- function handleSuccessfulSubmit(data) {
+ function handleSuccessfulSubmit (data) {
handleChangeSwitch((data.success ? "success" : "error"))
}
const onSubmit = (e) => {
@@ -52,19 +51,19 @@ export default function PasswordRecoveryPage(props) {
"redirect_url" : "https://plataformaintegrada.mec.gov.br/recuperar-senha/alterar-senha" //"http://localhost:4000/recuperar-senha/alterar-senha"
}
- postRequest(url, payload, handleSuccessfulSubmit, (error) => { console.log(error) })
+ postRequest(url, payload, handleSuccessfulSubmit, (error) => {console.log(error)})
}
const components = {
- default: <Default contrast={state.contrast} handleChange={handleChange} onSubmit={onSubmit} value={formEmail.value} error={formEmail.key} />,
- success: <Success contrast={state.contrast} email={formEmail.value} changeSwitch={handleChangeSwitch} />,
- error: <CaseError contrast={state.contrast} handleChange={handleChange} onSubmit={onSubmit} value={formEmail.value} error={formEmail.key} />
+ default : <Default handleChange={handleChange} onSubmit={onSubmit} value={formEmail.value} error={formEmail.key}/>,
+ success : <Success email={formEmail.value} changeSwitch={handleChangeSwitch}/>,
+ error : <CaseError handleChange={handleChange} onSubmit={onSubmit} value={formEmail.value} error={formEmail.key}/>
}
const switchFunction = (value) => {
- switch (value) {
+ switch(value) {
case 'success':
return components.success;
case 'error':
@@ -72,25 +71,24 @@ export default function PasswordRecoveryPage(props) {
default:
return components.default
- }
+ }
}
return (
<>
- <BackgroundDiv contrast={state.contrast}>
+ <BackgroundDiv>
<div>
<CustomizedBreadcrumbs
- contrast={state.contrast}
values={["Recuperar senha"]}
/>
</div>
- <div style={{ justifyContent: "center", textAlign: "center", maxWidth: "600px", margin: "auto" }}>
- <Paper elevation={3}>
- <CardDiv contrast={state.contrast}>
+ <div style={{justifyContent:"center", textAlign:"center", maxWidth:"600px", margin:"auto"}}>
+ <Paper elevation={3}>
+ <CardDiv>
{switchFunction(aux)}
- </CardDiv>
- </Paper>
+ </CardDiv>
+ </Paper>
</div>
</BackgroundDiv>
</>
@@ -98,8 +96,7 @@ export default function PasswordRecoveryPage(props) {
}
const CardDiv = styled.div`
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
- border: ${props => props.contrast === "" ? 0 : "1px solid white"};
+ background-color : #fff;
box-shadow : 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
padding : 30px 60px;
margin : 50px 0;
diff --git a/src/Pages/PublicUserPage.js b/src/Pages/PublicUserPage.js
index 0b763873..6cdb3ccb 100644
--- a/src/Pages/PublicUserPage.js
+++ b/src/Pages/PublicUserPage.js
@@ -16,430 +16,327 @@ 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, useContext } from "react";
-import { Store } from "../Store";
-import styled from "styled-components";
-import { apiDomain } from "../env";
-import CustomizedBreadcrumbs from "../Components/TabPanels/Breadcrumbs.js";
-import Grid from "@material-ui/core/Grid";
-import FollowButton from "../Components/ContactButtons/FollowButton.js";
-import FollowingButton from "../Components/ContactButtons/FollowingButton.js";
-import FollowersCountButton from "../Components/ContactButtons/FollowersCountButton.js";
-import Tab from "@material-ui/core/Tab";
-import TabInicio from "../Components/TabPanels/PublicUserPageTabs/TabInicio.js";
-import TabRecursos from "../Components/TabPanels/PublicUserPageTabs/TabRecursos.js";
-import TabColecoes from "../Components/TabPanels/PublicUserPageTabs/TabColecoes.js";
-import TabRede from "../Components/TabPanels/PublicUserPageTabs/TabRede.js";
-import CheckDecagram from "../img/check-decagram-blue.svg";
-import ReportButton from "../Components/ReportButton.js";
-import {
- HeaderContainer,
- UserProfileContainer,
- CoverContainer,
- UserProfileInfoDiv,
- StyledTabs,
- CheckTeacherDiv,
- RodapeDiv,
- NavBarContentContainer,
- BackgroundDiv,
-} from "../Components/TabPanels/StyledComponents.js";
-import { fetchAllRequest } from "../Components/HelperFunctions/getAxiosConfig";
-import Typography from "@material-ui/core/Typography";
-import CircularProgress from "@material-ui/core/CircularProgress";
-import LoadingSpinner from "../Components/LoadingSpinner";
-import Button from "@material-ui/core/Button";
-import { Link } from "react-router-dom";
+import React, { useEffect, useState, useContext } from 'react'
+import { Store } from '../Store'
+import styled from 'styled-components'
+import { apiDomain } from '../env';
+import CustomizedBreadcrumbs from '../Components/TabPanels/Breadcrumbs.js'
+import Grid from '@material-ui/core/Grid';
+import FollowButton from '../Components/ContactButtons/FollowButton.js'
+import FollowingButton from '../Components/ContactButtons/FollowingButton.js'
+import FollowersCountButton from '../Components/ContactButtons/FollowersCountButton.js'
+import Tab from '@material-ui/core/Tab';
+import TabInicio from '../Components/TabPanels/PublicUserPageTabs/TabInicio.js'
+import TabRecursos from '../Components/TabPanels/PublicUserPageTabs/TabRecursos.js'
+import TabColecoes from '../Components/TabPanels/PublicUserPageTabs/TabColecoes.js'
+import TabRede from '../Components/TabPanels/PublicUserPageTabs/TabRede.js'
+import CheckDecagram from '../img/check-decagram-blue.svg'
+import ReportButton from '../Components/ReportButton.js'
+import { HeaderContainer, UserProfileContainer, CoverContainer, UserProfileInfoDiv, StyledTabs, CheckTeacherDiv, RodapeDiv, NavBarContentContainer, BackgroundDiv } from '../Components/TabPanels/StyledComponents.js'
+import { fetchAllRequest } from '../Components/HelperFunctions/getAxiosConfig'
+import Typography from '@material-ui/core/Typography';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import LoadingSpinner from '../Components/LoadingSpinner';
+import Button from '@material-ui/core/Button'
+import { Link } from 'react-router-dom'
//Image Import
import { noAvatar } from "ImportImages.js";
function RenderFollowContainer(props) {
- const { state } = useContext(Store);
- const [followed, setFollowed] = useState(props.followed);
- const toggleFollowed = () => {
- setFollowed(!followed);
- };
+ const { state } = useContext(Store)
+ const [followed, setFollowed] = useState(props.followed)
+ const toggleFollowed = () => { setFollowed(!followed) }
- return (
- <FollowContainer>
- <>
- {props.id !== state.currentUser.id && followed ? (
- <FollowingButton
- contrast={state.contrast}
- followedID={props.id}
- toggleFollowed={toggleFollowed}
- />
- ) : (
- <FollowButton contrast={state.contrast} followerID={props.id} toggleFollowed={toggleFollowed} />
- )}
- <FollowersCountButton contrast={state.contrast} followCount={props.followCount} />
- </>
- </FollowContainer>
- );
+ return (
+ <FollowContainer>
+ <>
+ {
+ (props.id !== state.currentUser.id) &&
+ followed ?
+ (
+ <FollowingButton followedID={props.id} toggleFollowed={toggleFollowed} />
+ )
+ :
+ (
+ <FollowButton followerID={props.id} toggleFollowed={toggleFollowed} />
+ )
+ }
+ <FollowersCountButton followCount={props.followCount} />
+ </>
+ </FollowContainer>
+ )
}
const RenderProfileAvatar = (userAvatar) => {
- return (
- <ProfileAvatarDiv>
- <img
- src={userAvatar ? apiDomain + userAvatar : noAvatar}
- alt="user avatar"
- style={{
- height: "inherit",
- width: "inherit",
- border: "0",
- verticalAlign: "middle",
- }}
- />
- </ProfileAvatarDiv>
- );
-};
+ return (
+ <ProfileAvatarDiv>
+ <img src={userAvatar ? apiDomain + userAvatar : noAvatar} alt="user avatar" style={{ height: "inherit", width: "inherit", border: "0", verticalAlign: "middle" }} />
+ </ProfileAvatarDiv>
+ )
+}
-const RenderUserProfileInfo = (userName, contrast) => {
- return (
- <UserProfileInfoDiv contrast={contrast}>
- <p>
- {userName}
- </p>
- </UserProfileInfoDiv>
- );
-};
+const RenderUserProfileInfo = (userName) => {
+ return (
+ <UserProfileInfoDiv>
+ <p
+ style={{ fontSize: "28px", color: "#fff", marginBottom: "2px", fontWeight: "500", borderRadius: "5px", textShadow: "0 1px 2px rgba(0,0,0,.45)" }}
+ >
+ {userName}
+ </p>
+ </UserProfileInfoDiv>
+ )
+}
const RenderCheckTeacher = (submitter_request) => {
- if (submitter_request === "accepted") {
- return (
- <CheckTeacherDiv>
- <p>
- <span>
- <img alt="" src={CheckDecagram} />
- </span>
+ if (submitter_request === "accepted") {
+ return (
+ <CheckTeacherDiv>
+ <p>
+ <span>
+ <img alt="" src={CheckDecagram} />
+ </span>
Professor(a)
</p>
- </CheckTeacherDiv>
- );
- }
-};
+ </CheckTeacherDiv>
+ )
+ }
+}
export default function PublicUserPage(props) {
- /*currentUser info variables--------------------------------------*/
- const { state } = useContext(Store);
- /*user info variables--------------------------------------*/
- const WIDTH = window.innerWidth;
- const [id, setId] = useState(props.match.params.userId);
+ /*currentUser info variables--------------------------------------*/
+ const { state } = useContext(Store)
+ /*user info variables--------------------------------------*/
+ const WIDTH = window.innerWidth;
+ const [id, setId] = useState(props.match.params.userId)
- const [loading, setLoading] = useState(false);
- const [erro, setErro] = useState(false);
+ const [loading, setLoading] = useState(false);
- const [userData, setUserData] = useState({});
- const fillUserInfo = (data) => {
- setUserData(data);
- };
- /*---------------------------------------------------------*/
- const [following, setFollowing] = useState(0);
- const fillFollowing = (data) => {
- if (data)
- if (data.errors)
- setFollowing("Você precisa logar para ver o que usuário está ");
- else setFollowing(data.length);
- };
+ const [userData, setUserData] = useState({})
+ const fillUserInfo = (data) => {
+ setUserData(data)
+ }
+ /*---------------------------------------------------------*/
+ const [following, setFollowing] = useState(0);
+ const fillFollowing = (data) => {
+ if (data)
+ if (data.errors)
+ setFollowing('Você precisa logar para ver o que usuário está ');
+ else
+ setFollowing(data.length);
+ }
- /*content control variables--------------------------------*/
- // eslint-disable-next-line
- const [tabs, setTabs] = useState(["InÃcio", "Recursos", "Coleções", "Rede"]);
- const [tabValue, setTabValue] = useState(0);
- const handleChangeTab = (event, newValue) => {
- setTabValue(newValue);
- };
- /*---------------------------------------------------------*/
+ /*content control variables--------------------------------*/
+ // eslint-disable-next-line
+ const [tabs, setTabs] = useState([
+ 'InÃcio', 'Recursos', 'Coleções', 'Rede'
+ ])
+ const [tabValue, setTabValue] = useState(0);
+ const handleChangeTab = (event, newValue) => {
+ setTabValue(newValue)
+ }
+ /*---------------------------------------------------------*/
- /*content variables--------------------------------*/
- const [learningObjArr, setLearningObjects] = useState([]);
- const handleLearningObjects = (data) => {
- setLearningObjects(data);
- };
- const [collectionsArr, setCollections] = useState([]);
- const handleCollections = (data) => {
- setCollections(data);
- };
- /*---------------------------------------------------------*/
+ /*content variables--------------------------------*/
+ const [learningObjArr, setLearningObjects] = useState([])
+ const handleLearningObjects = (data) => { setLearningObjects(data) }
+ const [collectionsArr, setCollections] = useState([])
+ const handleCollections = (data) => { setCollections(data) }
+ /*---------------------------------------------------------*/
- function handleSuccess(responseArr) {
- if (Object.keys(responseArr[0]).length === 0) setErro(true);
- else {
- fillUserInfo(responseArr[0]);
+ function handleSuccess(responseArr) {
+ fillUserInfo(responseArr[0])
- handleLearningObjects(responseArr[1]);
-
- handleCollections(responseArr[2]);
-
- fillFollowing(responseArr[3]);
- setLoading(false);
- }
- }
+ handleLearningObjects(responseArr[1])
- /*Component Will Mount*/
- useEffect(() => {
- const id = props.match.params.userId;
- setId(id);
- const urls = [
- `/users/${id}`,
- `/users/${id}/learning_objects`,
- `/users/${id}/collections`,
- `/users/${id}/following/User`,
- ];
- setLoading(true);
- fetchAllRequest(urls, handleSuccess, () => {
- setErro(true)
- });
- }, [state.currentUser.id, props.match.params.userId]);
- /*---------------------------------------------------------*/
+ handleCollections(responseArr[2])
- if (erro)
- return (
- <UserNotFoundDiv contrast={state.contrast}>
- <Grid
- container
- direction="column"
- justify="center"
- alignItems="center"
- spacing={1}
- >
- <Grid item>
- <p className="not-found">
- O usuário não foi encontrado em nossa base de dados.
- </p>
- </Grid>
- <Grid item>
- <Link
- className="link"
- to={`/busca?page=0&results_per_page=12&query=*&search_class=User`}
- >
- <Button variant="contained" className="back-button">
- Voltar para a busca de usuários
- </Button>
- </Link>
- </Grid>
- </Grid>
- </UserNotFoundDiv>
- );
- else
- if (loading)
- return (
- <div style={state.contrast === "" ? {} : { backgroundColor: "black" }}>
- <LoadingSpinner
- contrast={state.contrast}
- text="Carregando dados do usuário..."
- />
- </div>
- );
- else
- return (
- <React.Fragment>
- <link
- href="https://fonts.googleapis.com/css?family=Roboto:100,400,500&display=swap"
- rel="stylesheet"
- />
- <BackgroundDiv contrast={state.contrast}>
- <CustomizedBreadcrumbs contrast={state.contrast} values={["Usuário Público", tabs[tabValue]]} />
- <Grid container spacing={2}>
- <Grid item xs={12}>
- <div style={{ padding: "10px 0 8px 0" }}>
- <UserProfileContainer>
- <HeaderContainer contrast={state.contrast}>
- <>
- {!loading && (
- <RenderFollowContainer
- followed={userData.followed}
- id={id}
- followCount={userData.follows_count}
- />
- )}
- {RenderProfileAvatar(
- userData.avatar ? userData.avatar : undefined
- )}
- <CoverContainer contrast={state.contrast}>
- {userData.cover && (
- <img
- src={apiDomain + userData.cover}
- alt="imagem de capa do usuário"
- style={{
- width: "100%",
- height: "100%",
- objectFit: "cover",
- }}
- />
- )}
- </CoverContainer>
- {WIDTH <= 501
- ? null
- : RenderUserProfileInfo(userData.name, state.contrast)}
- </>
- </HeaderContainer>
- {WIDTH <= 501 ? (
- <Grid
- style={state.contrast === "" ? { marginTop: "4em" } : { paddingTop: "4em", backgroundColor: "black", borderLeft: "1px solid white", borderRight: "1px solid white", }}
- container
- justify="center"
- alignItems="center"
- direction="column"
- >
- <Grid item>
- <Typography
- variant="h4"
- gutterBottom
- style={state.contrast === "" ? { textAlign: "center" } : { color: "white", textAlign: "center" }}
- >
- {userData.name}
- </Typography>
- </Grid>
- <Grid
- style={{
- marginTop: "0.5em",
- marginBottom: "0.5em",
- borderTop: "1px solid white",
- borderBottom: "1px solid white",
- }}
- container
- spacing={4}
- justify="center"
- alignItems="center"
- direction="row"
- >
- <Grid item>
- <Typography style={state.contrast === "" ? {} : { color: "white" }} variant="h6" onClick={(e) => { handleChangeTab(e, 4) }}>
- {loading ? (
- <CircularProgress size={20} />
- ) : (
- `${userData.follows_count} seguidores`
- )}
- </Typography>
- </Grid>
- <Grid item>
- <Typography style={state.contrast === "" ? {} : { color: "white" }} variant="h6" onClick={(e) => { handleChangeTab(e, 4) }}>
- {loading ? (
- <CircularProgress size={20} />
- ) : (
- `${following} seguindo`
- )}
- </Typography>
- </Grid>
- </Grid>
- </Grid>
- ) : (
- RenderCheckTeacher(userData.submitter_request)
- )}
- <RodapeDiv contrast={state.contrast}>
- <NavBarContentContainer contrast={state.contrast}>
- <StyledTabs
- contrast={state.contrast}
- value={tabValue}
- onChange={handleChangeTab}
- indicatorColor="primary"
- textColor="primary"
- variant="scrollable"
- scrollButtons="on"
- TabIndicatorProps={{ style: state.contrast === "" ? { background: "#00bcd4" } : { background: "yellow" } }}
- >
- {tabs.map((tab) => (
- <Tab
- label={tab}
- key={tab}
- disabled={
- (tab === "Recursos" &&
- learningObjArr.length === 0) ||
- (tab === "Coleções" &&
- collectionsArr.length === 0) ||
- (tab === "Rede" && state.currentUser.id === "")
- }
- />
- ))}
- </StyledTabs>
- </NavBarContentContainer>
- <ReportButton
- className="report-button"
- complainableId={userData.id}
- complainableType={"User"}
- />
- </RodapeDiv>
- </UserProfileContainer>
- </div>
- </Grid>
+ fillFollowing(responseArr[3])
+ setLoading(false);
+ }
+
+ /*Component Will Mount*/
+ useEffect(() => {
+ const id = props.match.params.userId
+ setId(id)
+ const urls = [`/users/${id}`, `/users/${id}/learning_objects`, `/users/${id}/collections`, `/users/${id}/following/User`]
+ setLoading(true);
+ fetchAllRequest(urls, handleSuccess, (error) => { console.log(error) })
+ }, [state.currentUser.id, props.match.params.userId])
+ /*---------------------------------------------------------*/
- {!loading && (
- <Grid item xs={12}>
- {tabValue === 0 && (
- <TabInicio
- contrast={state.contrast}
- id={id}
- user={userData}
- learningObjs={learningObjArr}
- collections={collectionsArr}
- />
- )}
- {tabValue === 1 && <TabRecursos contrast={state.contrast} id={id} username={userData.name} />}
- {tabValue === 2 && <TabColecoes contrast={state.contrast} id={id} username={userData.name} />}
- {tabValue === 3 && <TabRede contrast={state.contrast} id={id} username={userData.name} />}
- </Grid>
- )}
+ if (loading)
+ return <LoadingSpinner text="Carregando dados do usuário..." />
+ else if (!userData && !following && !learningObjArr && !collectionsArr)
+ return <UserNotFoundDiv>
+ <Grid container direction='column' justify='center' alignItems='center' spacing={1}>
+ <Grid item>
+ <p className="not-found">
+ O usuário não foi encontrado em nossa base de dados.
+ </p>
+ </Grid>
+ <Grid item>
+ <Link className="link" to={`/busca?page=0&results_per_page=12&query=*&search_class=User`}>
+ <Button
+ variant='contained'
+ className="back-button"
+ >
+ Voltar para a busca de usuários.
+ </Button>
+ </Link>
+ </Grid>
+ </Grid>
+ </UserNotFoundDiv>
+ else
+ return <React.Fragment>
+ <link href="https://fonts.googleapis.com/css?family=Roboto:100,400,500&display=swap" rel="stylesheet" />
+ <BackgroundDiv>
+ <CustomizedBreadcrumbs
+ values={["Usuário Público", tabs[tabValue]]}
+ />
+ <Grid container spacing={2}>
+ <Grid item xs={12}>
+ <div style={{ padding: "10px 0 8px 0" }}>
+ <UserProfileContainer>
+ <HeaderContainer>
+ <>
+ {!loading && <RenderFollowContainer followed={userData.followed} id={id} followCount={userData.follows_count} />}
+ {RenderProfileAvatar(userData.avatar ? userData.avatar : undefined)}
+ <CoverContainer>
+ {userData.cover && <img src={apiDomain + userData.cover} alt='' style={{ width: "100%", height: "100%", objectFit: "cover" }} />}
+ </CoverContainer>
+ {
+ WIDTH <= 501 ? null : RenderUserProfileInfo(userData.name)
+ }
+ </>
+ </HeaderContainer>
+ {
+ WIDTH <= 501 ?
+ <Grid style={{ marginTop: '4em' }} container justify="center" alignItems="center" direction="column">
+ <Grid item>
+ <Typography variant="h4" gutterBottom style={{ textAlign: "center" }}>
+ {
+ userData.name
+ }
+ </Typography>
+ </Grid>
+ <Grid style={{ marginTop: '0.5em', marginBottom: '0.5em', borderTop: "0.5px solid #DCDCDC", borderBottom: "0.5px solid #DCDCDC" }} container spacing={4} justify="center" alignItems="center" direction="row">
+ <Grid item>
+ <Typography variant="h6" style={{ textAlign: 'center' }}>
+ {
+ loading ?
+ <CircularProgress size={20} /> :
+ `${userData.follows_count} seguidores`
+ }
+ </Typography>
</Grid>
- </BackgroundDiv>
- </React.Fragment>
- );
+ <Grid item>
+ <Typography variant="h6" style={{ textAlign: 'center' }} >
+ {
+ loading ?
+ <CircularProgress size={20} /> :
+ `${following} seguindo`
+ }
+ </Typography>
+ </Grid>
+ </Grid>
+ </Grid>
+ :
+ RenderCheckTeacher(userData.submitter_request)}
+ <RodapeDiv>
+ <NavBarContentContainer>
+ <StyledTabs
+ value={tabValue}
+ onChange={handleChangeTab}
+ indicatorColor="primary"
+ textColor="primary"
+ variant="scrollable"
+ scrollButtons="desktop"
+ TabIndicatorProps={{ style: { background: "#00bcd4" } }}
+ >
+ {
+ tabs.map((tab) =>
+ <Tab label={tab} key={tab}
+ disabled={(tab === "Recursos" && learningObjArr.length === 0) || (tab === "Coleções" && collectionsArr.length === 0) || (tab === "Rede" && state.currentUser.id === '')}
+ />
+ )
+ }
+ </StyledTabs>
+ </NavBarContentContainer>
+ <ReportButton className="report-button" complainableId={userData.id} complainableType={"User"} />
+ </RodapeDiv>
+ </UserProfileContainer>
+ </div>
+ </Grid>
+
+ {
+ !loading &&
+ <Grid item xs={12}>
+ {tabValue === 0 &&
+ <TabInicio id={id} user={userData} learningObjs={learningObjArr} collections={collectionsArr} />}
+ {tabValue === 1 &&
+ <TabRecursos id={id} username={userData.name} />}
+ {tabValue === 2 &&
+ <TabColecoes id={id} username={userData.name} />}
+ {tabValue === 3 &&
+ <TabRede id={id} username={userData.name} />}
+ </Grid>
+ }
+ </Grid>
+ </BackgroundDiv>
+ </React.Fragment>
}
+
const ProfileAvatarDiv = styled.div`
- overflow: hidden;
- border-radius: 100%;
- bottom: -10px;
- left: 20px;
- z-index: 10;
- box-sizing: content-box;
- position: absolute;
- width: 150px;
- height: 150px;
- border: 4px solid #fff;
- outline: 0;
- background-color: #fff;
+ overflow : hidden;
+ border-radius : 100%;
+ bottom : -10px;
+ left : 20px;
+ z-index : 10;
+ box-sizing : content-box;
+ position : absolute;
+ width : 150px;
+ height : 150px;
+ border : 4px solid #fff;
+ outline : 0;
+ background-color : #fff;
@media screen and (max-width: 501px) {
- height: 73px;
- width: 73px;
- position: absolute;
- left: 0;
- right: 0;
- bottom: -40px;
- margin-left: auto;
- margin-right: auto;
- }
-`;
+ height : 73px;
+ width : 73px;
+ position:absolute;
+ left:0;
+ right:0;
+ bottom : -40px;
+ margin-left:auto;
+ margin-right:auto;
+ }
+`
const UserNotFoundDiv = styled.div`
- padding: 1em;
- background-color: ${(props) => (props.contrast === "" ? "#f4f4f4" : "black")};
+ margin: 1em;
+
+ .not-found{
+ font-family: 'Roboto', sans-serif;
+ font-weight: 500;
+ text-align: left;
+ padding: 0;
+ margin: 0;
+ }
- .not-found {
- font-family: "Roboto", sans-serif;
- color: ${(props) => props.contrast === "" ? "#666" : "white"};
- font-weight: 500;
- text-align: left;
- padding: 0;
- margin: 0;
- }
+ .back-button{
+ background-color: #00bcd4;
+ color: whitesmoke;
+ }
- .back-button {
- background-color: ${(props) => props.contrast === "" ? "#00bcd4" : "black"};
- color: ${(props) => props.contrast === "" ? "whitesmoke" : "yellow"};
- border: ${(props) => props.contrast === "" ? "none" : "1px solid white"};
- text-decoration: ${(props) => props.contrast === "" ? "none" : "underline"};
- :hover {
- background-color: ${(props) => props.contrast === "" ? "" : "rgba(255,255,0,0.24)"};
- text-decoration: ${(props) => props.contrast === "" ? "none" : "underline"};
- }
- }
-`;
+ .link{
+ text-decoration: none;
+ }
+`
const FollowContainer = styled.div`
- padding: 4px 10px;
- right: 0;
- position: absolute;
- z-index: 1;
-`;
+ padding : 4px 10px;
+ right : 0;
+ position : absolute;
+ z-index : 1;
+`
\ No newline at end of file
diff --git a/src/Pages/PublicationPermissionsPage.js b/src/Pages/PublicationPermissionsPage.js
index a7a121b3..52bdbd8a 100644
--- a/src/Pages/PublicationPermissionsPage.js
+++ b/src/Pages/PublicationPermissionsPage.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, { useState, useContext, useEffect } from "react";
+import React, { useState, useContext } from "react";
import Card from "@material-ui/core/Card";
import CardActions from "@material-ui/core/CardActions";
import { Button } from "@material-ui/core";
@@ -25,52 +25,30 @@ import { device } from "../Components/device.js";
import { Store } from "../Store.js";
import IllegalContentModal from "../Components/IllegalContentModal.js";
import PublicationPermissionsContent from "../Components/PublicationPermissionsContent.js";
-import { getRequest } from '../Components/HelperFunctions/getAxiosConfig';
-import LoadingSpinner from '../Components/LoadingSpinner';
const CardStyled = styled(Card)`
- box-sizing: border-box;
- background-color: white;
- max-width: 1700px;
- @media ${device.mobileM} {
- width: 100%;
- height: 100%;
- }
-`;
-
-const StyledContinuar = styled(Button)`
- font-family: "Roboto", sans serif;
- font-style: normal;
- font-weight: 500;
- line-height: 22px;
- font-size: 15px;
- letter-spacing: 0.01em;
- padding: 7px;
- border-radius: 5px;
- color: ${props => props.disable === true ? props.contrast === "" ? "#666" : "white" : props.contrast === "" ? "white" : "yellow"} !important;
- text-decoration: ${props => props.disable === true ? props.contrast === "" ? "none" : "none" : props.contrast === "" ? "none" : "yellow underline"} !important;
- background-color: ${props => props.disable === true ? props.contrast === "" ? "#E9E9E9" : "black" : props.contrast === "" ? "#52BCD4" : "black"} !important;
- border: ${props => props.disable === true ? props.contrast === "" ? "none" : "1px solid white" : props.contrast === "" ? "none" : "1px solid white"} !important;
+ box-sizing: border-box;
+ background-color: white;
+ max-width: 1700px;
+ padding-top: 52px;
+ @media ${device.mobileM} {
+ width: 100%;
+ height: 100%;
+ }
`;
-const StyledCancelar = styled(Button)`
- font-family: "Roboto", sans serif;
- font-style: normal;
- font-weight: 500;
- line-height: 22px;
- font-size: 15px;
- letter-spacing: 0.01em;
- padding: 7px;
- border-radius: 5px;
- color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
- text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
- background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
- border: none;
+const Styledspan = styled.span`
+ font-family: "Roboto", sans serif;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 22px;
+ font-size: 15px;
+ letter-spacing: 0.01em;
`;
const Background = styled.div`
padding-top : 40px;
- background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
+ background-color : #f4f4f4;
color : #666;
padding-bottom : 40px;
@@ -92,149 +70,134 @@ const Background = styled.div`
`
export default function PermissionsContainer(props) {
- const { state, dispatch } = useContext(Store);
- const [loading, setLoading] = useState(true);
- const [unavailableCheckbox, setCheckboxAvailability] = useState(true);
- const [unavailableButton, setButtonAvailability] = useState(true);
-
- const [questionsArr, setQuestionsArr] = useState([]);
-
- const [radios, setRadioValues] = useState({});
- const [modalOpen, setModalOpen] = useState(false);
-
- const closeModal = () => {
- setModalOpen(false);
- props.history.push("/termos-publicar-recurso");
- window.scrollTo(0, 0);
- };
-
- const handleChecked = e => {
- setButtonAvailability(!unavailableButton);
- };
-
- const handleRadios = e => {
- let radioTmp2 = {id: parseInt(e.target.name), value: e.target.value};
- let temp = radios;
- const index = temp.findIndex(x => x.id === parseInt(e.target.name));
-
- temp[index] = radioTmp2;
-
- setRadioValues(temp);
- setCheckboxAvailability(!(radios.every((radio) => radio.value === "Não")));
- };
-
- const handleAgreement = () => {
- if (radios.some((radio) => radio === "Sim")) {
- setModalOpen(true);
- } else {
- dispatch({
- type: "USER_AGREED_TO_PUBLICATION_PERMISSIONS",
- userAgreement: true
- });
-
- props.history.push("/upload");
- }
- };
-
- function handleSuccess(data) {
- var radioTmp = [];
-
- data.forEach(element => {
- var radioTmp2 = {id: element.id, value: ""};
-
- if (element.status === "active" && element.id !== 4) {
- radioTmp.push(radioTmp2);
- }
- });
-
- setQuestionsArr(data);
- setRadioValues(radioTmp);
-
- setLoading(false);
+ const { state, dispatch } = useContext(Store);
+ const [unavailableCheckbox, setCheckboxAvailability] = useState(true);
+ const [unavailableButton, setButtonAvailability] = useState(true);
+ const [radios, setRadioValues] = useState({
+ radio1: "",
+ radio2: "",
+ radio3: ""
+ });
+ const [modalOpen, setModalOpen] = useState(false);
+
+ const closeModal = () => {
+ setModalOpen(false);
+ props.history.push("/termos-publicar-recurso");
+ window.scrollTo(0, 0);
+ };
+
+ const handleChecked = e => {
+ setButtonAvailability(!unavailableButton);
+ };
+
+ const handleRadios = e => {
+ let temp = radios;
+ temp[e.target.name] = e.target.value;
+
+ setRadioValues(temp);
+ setCheckboxAvailability(!(radios.radio1 === "Não" && radios.radio2 === "Não" && radios.radio3 === "Não"));
+ };
+
+ const handleAgreement = () => {
+ if (
+ radios.radio1 === "Sim" ||
+ radios.radio2 === "Sim" ||
+ radios.radio3 === "Sim"
+ ) {
+ setModalOpen(true);
+ } else {
+ dispatch({
+ type: "USER_AGREED_TO_PUBLICATION_PERMISSIONS",
+ userAgreement: true
+ });
+
+ props.history.push("/upload");
}
-
- useEffect(() => {
- const url = `/questions/`
-
- getRequest(url, handleSuccess, (error) => { console.log(error) })
-
- }, [])
-
- const redirect = () => {
- props.history.push("/termos-publicar-recurso");
- };
-
- const redirectToHome = () => {
- props.history.push("/");
- };
-
- return (
- <>
- {!loading ?
- (
- state.userAgreedToPublicationTerms ? (
- [
- <>
- <IllegalContentModal
- contrast={props.contrast}
- open={modalOpen}
- handleClose={closeModal}
- disableBackdropClick={true}
- />
- <Background contrast={state.contrast}>
- <div className="container">
- <CardStyled variant="outlined">
- <PublicationPermissionsContent contrast={state.contrast} handleRadios={handleRadios} questionsArr={questionsArr}/>
- <CardActions
- style={state.contrast === "" ? { justifyContent: "center", padding: "25px", borderTop: "2px solide #dadada" } : { justifyContent: "center", padding: "25px", borderTop: "2px solide #dadada", backgroundColor: "black" }}
- >
- <div>
- <div style={{ fontSize: "14px" }}>
- <LabeledCheckbox
- contrast={state.contrast}
- disabled={unavailableCheckbox}
- label={
- <span className={`${state.contrast}LinkColor`} style={{ fontSize: "15px" }}>
- Li e permito a publicação do meu recurso na
- Plataforma Integrada de RED do MEC, assim como
- atesto que o meu recurso atende aos critérios
- especificados acima.
- </span>
- }
- handleChange={handleChecked}
- />
- <div
- style={{ justifyContent: "left", display: "flex", marginTop: "15px" }}
- >
- <StyledContinuar
- disabled={unavailableButton || unavailableCheckbox}
- disable={unavailableButton || unavailableCheckbox}
- contrast={state.contrast}
- onClick={handleAgreement}
- >
- Continuar
- </StyledContinuar>
- <StyledCancelar onClick={redirectToHome} contrast={state.contrast}>
- Cancelar
- </StyledCancelar>
- </div>
- </div>
- </div>
- </CardActions>
- </CardStyled>
+ };
+
+ const redirect = () => {
+ props.history.push("/termos-publicar-recurso");
+ };
+
+ const redirectToHome = () => {
+ props.history.push("/");
+ };
+ return (
+ <>
+ {state.userAgreedToPublicationTerms ? (
+ [
+ <>
+ <IllegalContentModal
+ open={modalOpen}
+ handleClose={closeModal}
+ disableBackdropClick={true}
+ />
+ <Background
+ >
+ <div className="container">
+ <CardStyled variant="outlined">
+ <PublicationPermissionsContent handleRadios={handleRadios} />
+ <CardActions
+ style={{ justifyContent: "center", padding: "25px", borderTop : "2px solide #dadada" }}
+ >
+ <div>
+ <div style={{ fontSize: "14px" }}>
+ <LabeledCheckbox
+ disabled={unavailableCheckbox}
+ label={
+ <Styledspan>
+ Li e permito a publicação do meu recurso na
+ Plataforma Integrada de RED do MEC, assim como
+ atesto que o meu recurso atende aos critérios
+ especificados acima.
+ </Styledspan>
+ }
+ handleChange={handleChecked}
+ />
+ <div
+ style={{ justifyContent: "center", display: "flex" }}
+ >
+ <Button
+ disabled={unavailableButton || unavailableCheckbox}
+ style={
+ unavailableButton || unavailableCheckbox
+ ? { backgroundColor: "#e9e9e9" }
+ : { backgroundColor: "#00bcd4" }
+ }
+ onClick={handleAgreement}
+ >
+ <Styledspan
+ style={
+ unavailableButton || unavailableCheckbox
+ ? { color: "#666666", fontWeight : "600" }
+ : { color: "#ffffff", fontWeight : "600" }
+ }
+ >
+ Continuar{" "}
+ </Styledspan>
+ </Button>
+ <Button
+ style={{
+ marginLeft: "45px",
+ backgroundColor: "#e9e9e9",
+ }}
+ >
+ <Styledspan style={{ color: "rgb(102, 102, 102)" , fontWeight : "600 !important"}} onClick={() => {redirectToHome()}}>
+ Cancelar
+ </Styledspan>
+ </Button>
</div>
- </Background>
- </>
- ]
- ) : (
- <>{redirect()}</>
- )
- )
- :
- (
- <LoadingSpinner contrast={state.contrast} text="Carregando..." />
- )
- }
- </>
- );
+ </div>
+ </div>
+ </CardActions>
+ </CardStyled>
+ </div>
+ </Background>
+ </>
+ ]
+ ) : (
+ <>{redirect()}</>
+ )}
+ </>
+ );
}
diff --git a/src/Pages/ResourcePage.js b/src/Pages/ResourcePage.js
index 17cc07ad..37d96115 100644
--- a/src/Pages/ResourcePage.js
+++ b/src/Pages/ResourcePage.js
@@ -42,316 +42,311 @@ import { Link } from 'react-router-dom';
import { noAvatar } from "ImportImages.js";
function urlVerify(url) {
- return url
- ? url.indexOf("youtu") !== -1 || url.indexOf("vimeo") !== -1
- : false;
+ return url
+ ? url.indexOf("youtu") !== -1 || url.indexOf("vimeo") !== -1
+ : false;
}
export default function LearningObjectPage(props) {
- const { state } = useContext(Store);
- const id = props.match.params.recursoId;
- const [carregando, toggle] = useState(true);
- const [erro, setErro] = useState(false);
- const [recurso, setRecurso] = useState({});
- const [modalConfirmarCuradoriaOpen, toggleModalConfirmarCuradoria] = useState(
- false
- );
-
- function handleSuccessfulGet(data) {
- setRecurso(data);
+ const { state } = useContext(Store);
+ const id = props.match.params.recursoId;
+ const [carregando, toggle] = useState(true);
+ const [erro, setErro] = useState(false);
+ const [recurso, setRecurso] = useState({});
+
+ function handleSuccessfulGet(data) {
+ setRecurso(data);
+ toggle(false);
+ }
+ useEffect(() => {
+ const url = `/learning_objects/${id}`;
+
+ getRequest(
+ url,
+ handleSuccessfulGet,
+ (error) => {
+ setErro(true)
toggle(false);
+ handleSnackbar(7)
+ }
+ );
+ }, []);
+
+ const [snackbarOpen, toggleSnackbar] = useState(false);
+ const handleSnackbar = (index) => {
+ setIndex(index);
+ toggleSnackbar(true);
+ };
+ const snackbarText = [
+ "Baixando o Recurso... Lembre-se de relatar sua experiência após o uso do Recurso!",
+ "Seu comentário foi publicado com sucesso!",
+ "Comentário editado com sucesso.",
+ "Comentário deletado com sucesso.",
+ "O Recurso foi guardado na coleção!",
+ "O recurso foi aprovado com sucesso!",
+ "Erro ao aprovar o recurso!",
+ "Erro ao carregar a página",
+ "Erro ao fazer o dowload do recurso",
+ ];
+ const [snackbarIndex, setIndex] = useState(0);
+ const classes = useStyles();
+ const [modalCuradoriaOpen, toggleModalCuradoria] = useState(false);
+ const handleModalCuradoria = (value) => {
+ toggleModalCuradoria(value);
+ };
+
+ const checkAccessLevel = (levelToCheck) => {
+ if (state.currentUser.id !== "") {
+ return checkUserRole(levelToCheck);
+ } else {
+ return false;
}
- useEffect(() => {
- const url = `/learning_objects/${id}`;
-
- getRequest(
- url,
- handleSuccessfulGet,
- (error) => {
- setErro(true)
- toggle(false);
- handleSnackbar(7)
- }
- );
- }, []);
-
- const [snackbarOpen, toggleSnackbar] = useState(false);
- const handleSnackbar = (index) => {
- setIndex(index);
- toggleSnackbar(true);
- };
- const snackbarText = [
- "Baixando o Recurso... Lembre-se de relatar sua experiência após o uso do Recurso!",
- "Seu comentário foi publicado com sucesso!",
- "Comentário editado com sucesso.",
- "Comentário deletado com sucesso.",
- "O Recurso foi guardado na coleção!",
- "O recurso foi aprovado com sucesso!",
- "Erro ao aprovar o recurso!",
- "Erro ao carregar a página",
- "Erro ao fazer o dowload do recurso",
- ];
- const [snackbarIndex, setIndex] = useState(0);
- const classes = useStyles();
- const [modalCuradoriaOpen, toggleModalCuradoria] = useState(false);
- const handleModalCuradoria = (value) => {
- toggleModalCuradoria(value);
- };
-
- const checkAccessLevel = (levelToCheck) => {
- if (state.currentUser.id !== "") {
- return checkUserRole(levelToCheck);
- } else {
- return false;
- }
- };
-
- const checkUserRole = (userRole) => {
- return (
- state.currentUser.roles.filter((role) => role.name === userRole).length >
- 0
- );
- };
-
- const finalizeCuratorshipFlow = () => {
- handleSnackbar(5);
- handleModalConfirmarCuradoria(false);
- const url = `/learning_objects/${id}`;
- getRequest(
- url,
- (data) => {
- setRecurso(data);
- },
- (error) => {
- handleSnackbar(7);
- setErro(true);
- })
- }
+ };
- const handleModalConfirmarCuradoria = (value) => {
- toggleModalConfirmarCuradoria(value);
- };
- const [reportCriteria, setReportCriteria] = useState([]);
- const [justificativa, setJustificativa] = useState("");
- const [submissionAccepted, setSubmissionAccepted] = useState("");
-
- const handleConfirm = (criteria, justification, accepted) => {
- setReportCriteria(criteria);
- setJustificativa(justification);
- setSubmissionAccepted(accepted);
- handleModalCuradoria(false);
- handleModalConfirmarCuradoria(true);
- };
-
- if (erro)
- return <LearnObjectNotFound contrast={state.contrast}>
- <Grid container direction='column' justify='center' alignItems='center' spacing={1}>
- <Grid item>
- <p className="not-found">
- O recurso não foi encontrado em nossa base de dados.
- </p>
- </Grid>
- <Grid item>
- <Link to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=LearningObject`}>
- <Button
- variant='contained'
- className="back-button"
- >
- Voltar para a busca de recursos
- </Button>
- </Link>
- </Grid>
- </Grid>
- </LearnObjectNotFound>
- 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
- 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>
- )
+ const checkUserRole = (userRole) => {
+ return (
+ state.currentUser.roles.filter((role) => role.name === userRole).length >
+ 0
+ );
+ };
+
+ const [modalConfirmarCuradoriaOpen, toggleModalConfirmarCuradoria] = useState(
+ false
+ );
+ const handleModalConfirmarCuradoria = (value) => {
+ toggleModalConfirmarCuradoria(value);
+ };
+ const [reportCriteria, setReportCriteria] = useState([]);
+ const [justificativa, setJustificativa] = useState("");
+ const [submissionAccepted, setSubmissionAccepted] = useState("");
+
+ const handleConfirm = (criteria, justification, accepted) => {
+ setReportCriteria(criteria);
+ setJustificativa(justification);
+ setSubmissionAccepted(accepted);
+ handleModalCuradoria(false);
+ handleModalConfirmarCuradoria(true);
+ };
+
+ const finalizeCuratorshipFlow = () => {
+ handleSnackbar(5);
+ handleModalConfirmarCuradoria(false);
+ const url = `/learning_objects/${id}`;
+ getRequest(
+ url,
+ (data) => {
+ setRecurso(data);
+ },
+ (error) => {
+ handleSnackbar(7);
+ setErro(true);
+ }
+ );
+ };
+
+ if (erro)
+ return <LearnObjectNotFound>
+ <Grid container direction='column' justify='center' alignItems='center' spacing={1}>
+ <Grid item>
+ <p className="not-found">
+ O recurso não foi encontrado em nossa base de dados.
+ </p>
+ </Grid>
+ <Grid item>
+ <Link className="link" to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=LearningObject`}>
+ <Button
+ variant='contained'
+ className="back-button"
+ >
+ Voltar para a busca de recursos.
+ </Button>
+ </Link>
+ </Grid>
+ </Grid>
+ </LearnObjectNotFound>
+ 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
+ open={modalCuradoriaOpen}
+ handleClose={() => {
+ handleModalCuradoria(false);
+ }}
+ title={recurso.name}
+ confirm={handleConfirm}
+ setCriteria={setReportCriteria}
+ />
+ <ModalConfirmarCuradoria
+ aceito={submissionAccepted}
+ reportCriteria={reportCriteria}
+ justificativa={justificativa}
+ open={modalConfirmarCuradoriaOpen}
+ handleClose={() => {
+ handleModalConfirmarCuradoria(false);
+ }}
+ cancel={() => {
+ handleModalCuradoria(true);
+ }}
+ recursoId={recurso.submission_id}
+ finalizeCuratorshipFlow={finalizeCuratorshipFlow}
+ handleErrorAprove={() => {
+ handleSnackbar(6)
+ }}
+ />
+ <Background>
+ {carregando ? (
+ <LoadingSpinner text={"Carregando Recurso"} />
+ ) : (
+ <>
+ <Grid container spacing={2}>
+ {recurso.object_type === "VÃdeo" && !recurso.link ? (
+ <Grid item xs={12}>
+ <Card>
+ <VideoPlayer
+ 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>
+ <VideoPlayer link={recurso.link} urlVerified={true} />
+ </Card>
+ </Grid>
+ )
+ )}
+
+ <Grid item xs={12}>
+ <Card>
+ <div>
+ {recurso.thumbnail && (
+ <img alt="" src={apiDomain + recurso.thumbnail} />
)}
- <Grid item xs={12}>
- <Card contrast={state.contrast}>
- <div>
- {recurso.thumbnail && (
- <img alt="recurso" src={apiDomain + recurso.thumbnail} />
- )}
-
- <TextoObjeto
- 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}
- />
- </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>
-
- {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>
+ <TextoObjeto
+ 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}
+ />
+ </div>
+
+ <Footer
+ 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>
+ {/*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>
+
+ {recurso.state !== "submitted" && (
+ <Grid item xs={12}>
+ <Card>
+ {/*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>
- </StyledAppBarContainer>
- </AppBar>
- )}
- </>
+ {recurso.state === "submitted" && checkAccessLevel("curator") && (
+ <AppBar
+ position="fixed"
+ color="primary"
+ className={classes.appBar}
+ >
+ <StyledAppBarContainer>
+ <div className="container">
+ <div className="botoes">
+ <ButtonAvaliarRecurso
+ callback={() => {
+ handleModalCuradoria(true);
+ }}
+ />
+ </div>
+ </div>
+ </StyledAppBarContainer>
+ </AppBar>
)}
- </Background>
- </React.Fragment>
+ </>
+ )}
+ </Background>
+ </React.Fragment>
);
}
const useStyles = makeStyles((theme) => ({
- appBar: {
- top: "auto",
- bottom: 0,
- height: "100px",
- boxShadow: "0 1px 3px rgba(0,0,0,.52),0 1px 2px rgba(0,0,0,.24)",
- },
+ appBar: {
+ top: "auto",
+ bottom: 0,
+ height: "100px",
+ backgroundColor: "#fff",
+ boxShadow: "0 1px 3px rgba(0,0,0,.52),0 1px 2px rgba(0,0,0,.24)",
+ },
}));
const StyledAppBarContainer = styled.div`
@@ -361,7 +356,6 @@ const StyledAppBarContainer = styled.div`
justify-content : flex-start
margin-right : auto;
margin-left : auto;
- padding: 10px;
@media screen and (min-width: 1200px) {
width : 1170px;
}
@@ -381,66 +375,61 @@ const StyledAppBarContainer = styled.div`
`;
const Background = styled.div`
- background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
- color: #666;
- font-family: "Roboto", sans serif;
- padding-top: 30px;
+ background-color: #f4f4f4;
+ color: #666;
+ font-family: "Roboto", sans serif;
+ padding-top: 30px;
`;
const LearnObjectNotFound = styled.div`
- padding: 1em;
- background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
-
- .not-found{
- font-family: 'Roboto', sans-serif;
- color: ${props => props.contrast === "" ? "#666" : "white"};
- font-weight: 500;
- text-align: left;
- padding: 0;
- margin: 0;
- }
-
- .back-button{
- background-color: ${props => props.contrast === "" ? "#ff7f00" : "black"};
- color: ${props => props.contrast === "" ? "whitesmoke" : "yellow"};
- border: ${props => props.contrast === "" ? "none" : "1px solid white"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- :hover{
- background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24)"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- }
- }
+ margin: 1em;
+
+ .not-found{
+ font-family: 'Roboto', sans-serif;
+ font-weight: 500;
+ text-align: left;
+ padding: 0;
+ margin: 0;
+ }
+
+ .back-button{
+ background-color: #ff7f00;
+ color: whitesmoke;
+ }
+
+ .link{
+ text-decoration: none;
+ }
`
const Card = styled.div`
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
- border: ${props => props.contrast === "" ? "0" : "1px solid white"};
- margin-bottom: 30px;
- margin-right: auto;
- margin-left: auto;
- display: flex;
- flex-direction: column;
- @media screen and (min-width: 1200px) {
- width: 1170px;
- }
- @media screen and (min-width: 992px) and (max-width: 1199px) {
- width: 970px;
- }
- @media screen and (min-width: 768px) and (max-width: 991px) {
- width: 750px;
- }
-
- img {
- background-color: #e5e5e5;
- height: 270px;
- width: 400px;
- float: left;
- padding: 0;
- object-fit: cover;
- @media screen and (max-width: 768px) {
- height: auto;
- width: 100%;
- }
+ background-color: #fff;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+ margin-bottom: 30px;
+ margin-right: auto;
+ margin-left: auto;
+ display: flex;
+ flex-direction: column;
+ @media screen and (min-width: 1200px) {
+ width: 1170px;
+ }
+ @media screen and (min-width: 992px) and (max-width: 1199px) {
+ width: 970px;
+ }
+ @media screen and (min-width: 768px) and (max-width: 991px) {
+ width: 750px;
+ }
+
+ img {
+ background-color: #e5e5e5;
+ height: 270px;
+ width: 400px;
+ float: left;
+ padding: 0;
+ object-fit: cover;
+ @media screen and (max-width: 768px) {
+ height: auto;
+ width: 100%;
}
+ }
`;
diff --git a/src/Pages/Search.js b/src/Pages/Search.js
index cedd2612..15628592 100644
--- a/src/Pages/Search.js
+++ b/src/Pages/Search.js
@@ -31,533 +31,522 @@ import { useHistory } from 'react-router-dom';
import SearchExpansionPanel from '../Components/SearchExpansionPanel/SearchExpansionPanel';
import FilterSummary from '../Components/SearchPageComponents/FilterSummary';
import {
- filtersCurriculum,
- filtersTypes,
- filtersStages,
- filtersLanguages,
+ filtersCurriculum,
+ filtersTypes,
+ 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} />;
+ return <MuiAlert elevation={6} variant="filled" {...props} />;
}
export default function Search() {
- const history = useHistory();
- const { state } = useContext(Store)
-
- const [currOption, setCurrOption] = useState('');
- const [currOrder, serCurrOrder] = useState('review_average');
- const [currQuery, setCurrQuery] = useState('');
- const [currPage, setCurrPage] = useState(0);
- const [currCurriculumValues, setCurrCurriculumValues] = useState('');
- const [currTypeOfResValues, setCurrTypeOfResValues] = useState('');
- const [currTeachingStageValues, setCurrTeachingStageValues] = useState('');
- const [currLanguagesValues, setCurrLanguagesValues] = useState('');
- const [currTag, setCurrTag] = useState('');
- const [isLoading, setIsLoading] = useState(false);
- const [error, setError] = useState(false);
- const [snackInfo, setSnackInfo] = useState({
- open: false,
- text: "",
- severity: "",
- });
-
- const [curriculumComponents, setCurriculumComponents] = useState([]);
- const [typeOfResources, setTypeOfResources] = useState([]);
- const [teachingStage, setTeachingStage] = useState([]);
- const [languages, setLanguages] = useState([]);
- const [tag, setTag] = useState('');
-
- const [resourcesArray, setResourcesArray] = useState([]);
- const [totalResources, setTotalResources] = useState(0);
-
- const [collectionsArray, setCollectionsArray] = useState([])
- const [totalCollections, setTotalCollections] = useState(0);
-
- const [usersArray, setUsersArray] = useState([])
- const [totalUsers, setTotalUsers] = useState(0);
-
- const options = [
- { value: 'Recursos', name: 'LearningObject', color: state.contrast === "" ? '#ff7f00' : "yellow" },
- { value: 'Coleções', name: 'Collection', color: state.contrast === "" ? '#673ab7' : "yellow" },
- { value: 'Usuários', name: 'User', color: state.contrast === "" ? '#00bcd4' : "yellow" },
- ];
-
- const orders = [
- { value: 'Mais Estrelas', name: 'review_average', color: state.contrast === "" ? '#ff7f00' : "yellow" },
- { value: 'Mais Relevante', name: 'score', color: state.contrast === "" ? '#ff7f00' : "yellow" },
- { value: 'Mais Baixados', name: 'downloads', color: state.contrast === "" ? '#ff7f00' : "yellow" },
- { value: 'Mais Favoritados', name: 'likes', color: state.contrast === "" ? '#ff7f00' : "yellow" },
- { value: 'Mais Recentes', name: 'publicationdesc', color: state.contrast === "" ? '#ff7f00' : "yellow" },
- { value: 'Ordem Alfabética', name: 'title', color: state.contrast === "" ? '#ff7f00' : "yellow" },
- ];
-
- function handleSnackInfo(info) {
- setSnackInfo({ ...info })
+ const history = useHistory();
+ const { state } = useContext(Store)
+
+ const [currOption, setCurrOption] = useState('');
+ const [currOrder, serCurrOrder] = useState('review_average');
+ const [currQuery, setCurrQuery] = useState('');
+ const [currPage, setCurrPage] = useState(0);
+ const [currCurriculumValues, setCurrCurriculumValues] = useState('');
+ const [currTypeOfResValues, setCurrTypeOfResValues] = useState('');
+ const [currTeachingStageValues, setCurrTeachingStageValues] = useState('');
+ const [currLanguagesValues, setCurrLanguagesValues] = useState('');
+ const [currTag, setCurrTag] = useState('');
+ const [isLoading, setIsLoading] = useState(false);
+ const [error, setError] = useState(false);
+ const [snackInfo, setSnackInfo] = useState({
+ open: false,
+ text: "",
+ severity: "",
+ });
+
+ const [curriculumComponents, setCurriculumComponents] = useState([]);
+ const [typeOfResources, setTypeOfResources] = useState([]);
+ const [teachingStage, setTeachingStage] = useState([]);
+ const [languages, setLanguages] = useState([]);
+ const [tag, setTag] = useState('');
+
+ const [resourcesArray, setResourcesArray] = useState([]);
+ const [totalResources, setTotalResources] = useState(0);
+
+ const [collectionsArray, setCollectionsArray] = useState([])
+ const [totalCollections, setTotalCollections] = useState(0);
+
+ const [usersArray, setUsersArray] = useState([])
+ const [totalUsers, setTotalUsers] = useState(0);
+
+ const options = [
+ { value: 'Recursos', name: 'LearningObject', color: '#ff7f00' },
+ { value: 'Coleções', name: 'Collection', color: '#673ab7' },
+ { value: 'Usuários', name: 'User', color: '#00bcd4' },
+ ];
+
+ const orders = [
+ { value: 'Mais Estrelas', name: 'review_average' },
+ { value: 'Mais Relevante', name: 'score' },
+ { value: 'Mais Baixados', name: 'downloads' },
+ { value: 'Mais Favoritados', name: 'likes' },
+ { value: 'Mais Recentes', name: 'publicationdesc' },
+ { value: 'Ordem Alfabética', name: 'title' },
+ ];
+
+ function handleSnackInfo(info) {
+ setSnackInfo({ ...info })
+ }
+
+ function handleCloseSnack() {
+ const snackInfo = {
+ open: false,
+ text: "",
+ severity: "",
+ }
+ handleSnackInfo(snackInfo)
+ }
+
+ function onButtonClicked() {
+ const curriculumValues = [];
+ const typeOfResourcesValues = [];
+ const teachingStageValues = [];
+ const languagesValues = [];
+
+ for (let index = 0; index < curriculumComponents.length; index++) {
+ const element = curriculumComponents[index];
+ if (element.isChecked)
+ curriculumValues.push(element.value);
}
- function handleCloseSnack() {
- const snackInfo = {
- open: false,
- text: "",
- severity: "",
- }
- handleSnackInfo(snackInfo)
+ for (let index = 0; index < typeOfResources.length; index++) {
+ const element = typeOfResources[index];
+ if (element.isChecked)
+ typeOfResourcesValues.push(element.value);
}
- function onButtonClicked() {
- const curriculumValues = [];
- const typeOfResourcesValues = [];
- const teachingStageValues = [];
- const languagesValues = [];
+ for (let index = 0; index < teachingStage.length; index++) {
+ const element = teachingStage[index];
+ if (element.isChecked)
+ teachingStageValues.push(element.value);
+ }
- for (let index = 0; index < curriculumComponents.length; index++) {
- const element = curriculumComponents[index];
- if (element.isChecked)
- curriculumValues.push(element.value);
- }
+ for (let index = 0; index < languages.length; index++) {
+ const element = languages[index];
+ if (element.isChecked)
+ languagesValues.push(element.value);
+ }
- for (let index = 0; index < typeOfResources.length; index++) {
- const element = typeOfResources[index];
- if (element.isChecked)
- typeOfResourcesValues.push(element.value);
- }
+ let url = `/busca?page=0&results_per_page=12&query=${currQuery}&search_class=${currOption}`
- for (let index = 0; index < teachingStage.length; index++) {
- const element = teachingStage[index];
- if (element.isChecked)
- teachingStageValues.push(element.value);
+ if (currOption !== 'User') {
+ url = url + `&order=${currOrder}`
+ if (currOption === 'LearningObject') {
+ if (curriculumValues.length >= 1) {
+ url = url + `&subjects=${curriculumValues}`
}
-
- for (let index = 0; index < languages.length; index++) {
- const element = languages[index];
- if (element.isChecked)
- languagesValues.push(element.value);
+ if (typeOfResourcesValues.length >= 1) {
+ url = url + `&object_types=${typeOfResourcesValues}`
}
-
- let url = `/busca?page=0&results_per_page=12&query=${currQuery}&search_class=${currOption}`
-
- if (currOption !== 'User') {
- url = url + `&order=${currOrder}`
- if (currOption === 'LearningObject') {
- if (curriculumValues.length >= 1) {
- url = url + `&subjects=${curriculumValues}`
- }
- if (typeOfResourcesValues.length >= 1) {
- url = url + `&object_types=${typeOfResourcesValues}`
- }
- if (teachingStageValues.length >= 1) {
- url = url + `&educational_stages=${teachingStageValues}`
- }
- if (languagesValues.length >= 1) {
- url = url + `&languages=${languagesValues}`
- }
- if (tag && tag.length >= 1)
- url = url + `&tags=${tag}`
- }
+ if (teachingStageValues.length >= 1) {
+ url = url + `&educational_stages=${teachingStageValues}`
+ }
+ if (languagesValues.length >= 1) {
+ url = url + `&languages=${languagesValues}`
}
+ if (tag && tag.length >= 1)
+ url = url + `&tags=${tag}`
+ }
+ }
+
+ history.push(url);
+ }
- history.push(url);
+ function resetFilters() {
+ for (let index = 0; index < filtersCurriculum.length; index++) {
+ if (filtersCurriculum[index].isChecked)
+ filtersCurriculum[index].isChecked = false;
+ }
+ for (let index = 0; index < filtersLanguages.length; index++) {
+ if (filtersLanguages[index].isChecked)
+ filtersLanguages[index].isChecked = false;
+ }
+ for (let index = 0; index < filtersStages.length; index++) {
+ if (filtersStages[index].isChecked)
+ filtersStages[index].isChecked = false;
+ }
+ for (let index = 0; index < filtersTypes.length; index++) {
+ if (filtersTypes[index].isChecked)
+ filtersTypes[index].isChecked = false;
}
+ setTag('')
+ }
- function resetFilters() {
- for (let index = 0; index < filtersCurriculum.length; index++) {
- if (filtersCurriculum[index].isChecked)
- filtersCurriculum[index].isChecked = false;
+ function handleChangeOption(e) {
+ const value = e.target.value;
+ let url;
+
+ if (value !== 'User')
+ url = `/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=${value}`
+ else
+ url = `/busca?page=0&results_per_page=12&query=*&search_class=${value}`
+
+ resetFilters()
+ history.push(url);
+ }
+
+ function handleChangeOrder(e) {
+ const value = e.target.value;
+ let url = `/busca?page=0&results_per_page=12&query=${currQuery}&search_class=${currOption}`
+
+ if (currOption !== 'User') {
+ url = url + `&order=${value}`
+ if (currOption === 'LearningObject') {
+ if (currCurriculumValues) {
+ url = url + `&subjects=${currCurriculumValues}`
}
- for (let index = 0; index < filtersLanguages.length; index++) {
- if (filtersLanguages[index].isChecked)
- filtersLanguages[index].isChecked = false;
+ if (currTypeOfResValues) {
+ url = url + `&object_types=${currTypeOfResValues}`
}
- for (let index = 0; index < filtersStages.length; index++) {
- if (filtersStages[index].isChecked)
- filtersStages[index].isChecked = false;
+ if (currTeachingStageValues) {
+ url = url + `&educational_stages=${currTeachingStageValues}`
}
- for (let index = 0; index < filtersTypes.length; index++) {
- if (filtersTypes[index].isChecked)
- filtersTypes[index].isChecked = false;
+ if (currLanguagesValues) {
+ url = url + `&languages=${currLanguagesValues}`
}
- setTag('')
+ if (currTag)
+ url = url + `&tags=${currTag}`
+ }
}
- function handleChangeOption(e) {
- const value = e.target.value;
- let url;
-
- if (value !== 'User')
- url = `/busca?page=0&results_per_page=12&order=review_average&query=${currQuery}&search_class=${value}`
- else
- url = `/busca?page=0&results_per_page=12&query=${currQuery}&search_class=${value}`
+ history.push(url);
+ }
- resetFilters()
- history.push(url);
- }
+ function handleNextPage() {
+ const nextPage = currPage + 1;
+ let url = `/busca?page=${nextPage}&results_per_page=12&query=${currQuery}&search_class=${currOption}`
- function handleChangeOrder(e) {
- const value = e.target.value;
- let url = `/busca?page=0&results_per_page=12&query=${currQuery}&search_class=${currOption}`
-
- if (currOption !== 'User') {
- url = url + `&order=${value}`
- if (currOption === 'LearningObject') {
- if (currCurriculumValues) {
- url = url + `&subjects=${currCurriculumValues}`
- }
- if (currTypeOfResValues) {
- url = url + `&object_types=${currTypeOfResValues}`
- }
- if (currTeachingStageValues) {
- url = url + `&educational_stages=${currTeachingStageValues}`
- }
- if (currLanguagesValues) {
- url = url + `&languages=${currLanguagesValues}`
- }
- if (currTag)
- url = url + `&tags=${currTag}`
- }
+ if (currOption !== 'User') {
+ url = url + `&order=${currOrder}`
+ if (currOption === 'LearningObject') {
+ if (currCurriculumValues) {
+ url = url + `&subjects=${currCurriculumValues}`
}
-
- history.push(url);
- }
-
- function handleNextPage() {
- const nextPage = currPage + 1;
- let url = `/busca?page=${nextPage}&results_per_page=12&query=${currQuery}&search_class=${currOption}`
-
- if (currOption !== 'User') {
- url = url + `&order=${currOrder}`
- if (currOption === 'LearningObject') {
- if (currCurriculumValues) {
- url = url + `&subjects=${currCurriculumValues}`
- }
- if (currTypeOfResValues) {
- url = url + `&object_types=${currTypeOfResValues}`
- }
- if (currTeachingStageValues) {
- url = url + `&educational_stages=${currTeachingStageValues}`
- }
- if (currLanguagesValues) {
- url = url + `&languages=${currLanguagesValues}`
- }
- if (currTag)
- url = url + `&tags=${currTag}`
- }
+ if (currTypeOfResValues) {
+ url = url + `&object_types=${currTypeOfResValues}`
}
- history.push(url);
- }
-
- function handlePreviousPage() {
- const previousPage = currPage - 1;
- let url = `/busca?page=${previousPage}&results_per_page=12&query=${currQuery}&search_class=${currOption}`
-
- if (currOption !== 'User') {
- url = url + `&order=${currOrder}`
- if (currOption === 'LearningObject') {
- if (currCurriculumValues) {
- url = url + `&subjects=${currCurriculumValues}`
- }
- if (currTypeOfResValues) {
- url = url + `&object_types=${currTypeOfResValues}`
- }
- if (currTeachingStageValues) {
- url = url + `&educational_stages=${currTeachingStageValues}`
- }
- if (currLanguagesValues) {
- url = url + `&languages=${currLanguagesValues}`
- }
- if (currTag)
- url = url + `&tags=${currTag}`
- }
+ if (currTeachingStageValues) {
+ url = url + `&educational_stages=${currTeachingStageValues}`
}
- history.push(url);
+ if (currLanguagesValues) {
+ url = url + `&languages=${currLanguagesValues}`
+ }
+ if (currTag)
+ url = url + `&tags=${currTag}`
+ }
}
-
- function handleSuccess(data, headers, option) {
- if (option === 'LearningObject') {
- setResourcesArray(data)
- if (headers.has('X-Total-Count')) {
- setTotalResources(headers.get('X-Total-Count'));
- }
+ history.push(url);
+ }
+
+ function handlePreviousPage() {
+ const previousPage = currPage - 1;
+ let url = `/busca?page=${previousPage}&results_per_page=12&query=${currQuery}&search_class=${currOption}`
+
+ if (currOption !== 'User') {
+ url = url + `&order=${currOrder}`
+ if (currOption === 'LearningObject') {
+ if (currCurriculumValues) {
+ url = url + `&subjects=${currCurriculumValues}`
}
- else if (option === 'Collection') {
- setCollectionsArray(data)
- if (headers.has('X-Total-Count')) {
- setTotalCollections(headers.get('X-Total-Count'));
- }
+ if (currTypeOfResValues) {
+ url = url + `&object_types=${currTypeOfResValues}`
}
- else {
- setUsersArray(data);
- if (headers.has('X-Total-Count')) {
- setTotalUsers(headers.get('X-Total-Count'));
- }
+ if (currTeachingStageValues) {
+ url = url + `&educational_stages=${currTeachingStageValues}`
+ }
+ if (currLanguagesValues) {
+ url = url + `&languages=${currLanguagesValues}`
}
- setIsLoading(false);
+ if (currTag)
+ url = url + `&tags=${currTag}`
+ }
}
-
- function handleFail() {
- const snackInfo = {
- open: true,
- text: "Houve um erro ao carregar os dados!",
- severity: "warning",
+ history.push(url);
+ }
+
+ function handleSuccess(data, headers, option) {
+ if (option === 'LearningObject') {
+ setResourcesArray(data)
+ if (headers.has('X-Total-Count')) {
+ setTotalResources(headers.get('X-Total-Count'));
+ }
+ }
+ else if (option === 'Collection') {
+ setCollectionsArray(data)
+ if (headers.has('X-Total-Count')) {
+ setTotalCollections(headers.get('X-Total-Count'));
+ }
+ }
+ else {
+ setUsersArray(data);
+ if (headers.has('X-Total-Count')) {
+ setTotalUsers(headers.get('X-Total-Count'));
+ }
+ }
+ setIsLoading(false);
+ }
+
+ function handleFail() {
+ const snackInfo = {
+ open: true,
+ text: "Houve um erro ao carregar os dados!",
+ severity: "warning",
+ }
+ handleSnackInfo(snackInfo)
+ setError(true);
+ setIsLoading(false);
+ }
+
+ function handleSubjects(subjectsString) {
+ if (subjectsString) {
+ const selectedSubjects = subjectsString.split(',');
+ for (let i = 0; i < selectedSubjects.length; i++) {
+ const elementOfSelectedSubs = selectedSubjects[i];
+ for (let j = 0; j < filtersCurriculum.length; j++) {
+ if (elementOfSelectedSubs === filtersCurriculum[j].value)
+ filtersCurriculum[j].isChecked = true;
}
- handleSnackInfo(snackInfo)
- setError(true);
- setIsLoading(false);
+ }
}
-
- function handleSubjects(subjectsString) {
- if (subjectsString) {
- const selectedSubjects = subjectsString.split(',');
- for (let i = 0; i < selectedSubjects.length; i++) {
- const elementOfSelectedSubs = selectedSubjects[i];
- for (let j = 0; j < filtersCurriculum.length; j++) {
- if (elementOfSelectedSubs === filtersCurriculum[j].value)
- filtersCurriculum[j].isChecked = true;
- }
- }
+ setCurriculumComponents(filtersCurriculum);
+ }
+
+ function handleObjectTypes(objectTypesString) {
+ if (objectTypesString) {
+ const selectedObjectTypes = objectTypesString.split(',');
+ for (let i = 0; i < selectedObjectTypes.length; i++) {
+ const elementOfSelectedObjectTypes = selectedObjectTypes[i];
+ for (let j = 0; j < filtersTypes.length; j++) {
+ if (elementOfSelectedObjectTypes === filtersTypes[j].value)
+ filtersTypes[j].isChecked = true;
}
- setCurriculumComponents(filtersCurriculum);
+ }
}
-
- function handleObjectTypes(objectTypesString) {
- if (objectTypesString) {
- const selectedObjectTypes = objectTypesString.split(',');
- for (let i = 0; i < selectedObjectTypes.length; i++) {
- const elementOfSelectedObjectTypes = selectedObjectTypes[i];
- for (let j = 0; j < filtersTypes.length; j++) {
- if (elementOfSelectedObjectTypes === filtersTypes[j].value)
- filtersTypes[j].isChecked = true;
- }
- }
+ setTypeOfResources(filtersTypes);
+ }
+
+ function handleLanguages(languagesString) {
+ if (languagesString) {
+ const selectedLanguages = languagesString.split(',');
+
+ for (let i = 0; i < selectedLanguages.length; i++) {
+ const elementOfSelectedLanguages = selectedLanguages[i];
+ for (let j = 0; j < filtersLanguages.length; j++) {
+ if (elementOfSelectedLanguages === filtersLanguages[j].value)
+ filtersLanguages[j].isChecked = true;
}
- setTypeOfResources(filtersTypes);
+ }
}
-
- function handleLanguages(languagesString) {
- if (languagesString) {
- const selectedLanguages = languagesString.split(',');
-
- for (let i = 0; i < selectedLanguages.length; i++) {
- const elementOfSelectedLanguages = selectedLanguages[i];
- for (let j = 0; j < filtersLanguages.length; j++) {
- if (elementOfSelectedLanguages === filtersLanguages[j].value)
- filtersLanguages[j].isChecked = true;
- }
- }
+ setLanguages(filtersLanguages);
+ }
+
+ function handleStages(stagesString) {
+ if (stagesString) {
+ const selectedStages = stagesString.split(',');
+
+ for (let i = 0; i < selectedStages.length; i++) {
+ const elementOfSelectedStages = selectedStages[i];
+ for (let j = 0; j < filtersStages.length; j++) {
+ if (elementOfSelectedStages === filtersStages[j].value)
+ filtersStages[j].isChecked = true;
}
- setLanguages(filtersLanguages);
+ }
}
-
- function handleStages(stagesString) {
- if (stagesString) {
- const selectedStages = stagesString.split(',');
-
- for (let i = 0; i < selectedStages.length; i++) {
- const elementOfSelectedStages = selectedStages[i];
- for (let j = 0; j < filtersStages.length; j++) {
- if (elementOfSelectedStages === filtersStages[j].value)
- filtersStages[j].isChecked = true;
- }
- }
+ setTeachingStage(filtersStages);
+ }
+
+ useEffect(() => {
+ setIsLoading(true)
+
+ const urlParams = new URLSearchParams(window.location.search);
+ const query = urlParams.get("query");
+ const searchClass = urlParams.get("search_class");
+ const page = parseInt(urlParams.get("page"));
+ const order = urlParams.get("order");
+ const subjects = urlParams.get("subjects");
+ const objectTypes = urlParams.get("object_types");
+ const educationalStages = urlParams.get("educational_stages");
+ const languages = urlParams.get("languages");
+ const tags = urlParams.get("tags");
+
+ setCurrOption(searchClass);
+ setCurrQuery(query);
+ setCurrPage(page);
+ serCurrOrder(order);
+ setCurrCurriculumValues(subjects);
+ setCurrLanguagesValues(languages);
+ setCurrTeachingStageValues(educationalStages);
+ setCurrTypeOfResValues(objectTypes);
+ setCurrTag(tags);
+ setTag(tags);
+
+ handleSubjects(subjects);
+ handleObjectTypes(objectTypes);
+ handleStages(educationalStages);
+ handleLanguages(languages);
+
+ let url = `/search?page=${page}&results_per_page=12&query=${query}&search_class=${searchClass}`
+
+ if (searchClass !== 'User') {
+ url = url + `&order=${order}`
+ if (searchClass === 'LearningObject') {
+ if (subjects) {
+ url = url + `&subjects[]=${subjects}`
+ }
+ if (objectTypes) {
+ url = url + `&object_types[]=${objectTypes}`
+ }
+ if (educationalStages) {
+ url = url + `&educational_stages[]=${educationalStages}`
}
- setTeachingStage(filtersStages);
+ if (languages) {
+ url = url + `&languages[]=${languages}`
+ }
+ if (tags)
+ url = url + `&tags[]=${tags}`
+ }
}
- useEffect(() => {
- setIsLoading(true)
-
- const urlParams = new URLSearchParams(window.location.search);
- const query = urlParams.get("query");
- const searchClass = urlParams.get("search_class");
- const page = parseInt(urlParams.get("page"));
- const order = urlParams.get("order");
- const subjects = urlParams.get("subjects");
- const objectTypes = urlParams.get("object_types");
- const educationalStages = urlParams.get("educational_stages");
- const languages = urlParams.get("languages");
- const tags = urlParams.get("tags");
-
- setCurrOption(searchClass);
- setCurrQuery(query);
- setCurrPage(page);
- serCurrOrder(order);
- setCurrCurriculumValues(subjects);
- setCurrLanguagesValues(languages);
- setCurrTeachingStageValues(educationalStages);
- setCurrTypeOfResValues(objectTypes);
- setCurrTag(tags);
- setTag(tags);
-
- handleSubjects(subjects);
- handleObjectTypes(objectTypes);
- handleStages(educationalStages);
- handleLanguages(languages);
-
- let url = `/search?page=${page}&results_per_page=12&query=${query}&search_class=${searchClass}`
-
- if (searchClass !== 'User') {
- url = url + `&order=${order}`
- if (searchClass === 'LearningObject') {
- if (subjects) {
- url = url + `&subjects[]=${subjects}`
- }
- if (objectTypes) {
- url = url + `&object_types[]=${objectTypes}`
- }
- if (educationalStages) {
- url = url + `&educational_stages[]=${educationalStages}`
- }
- if (languages) {
- url = url + `&languages[]=${languages}`
- }
- if (tags)
- url = url + `&tags[]=${tags}`
+ getRequest(
+ url,
+ (data, headers) => { handleSuccess(data, headers, searchClass) },
+ handleFail,
+ );
+
+ }, [window.history.state === null ? true : window.history.state.key, state.currentUser.id])
+
+ if (error)
+ return (
+ <MainPageError>
+ <Snackbar
+ open={snackInfo.open}
+ autoHideDuration={6000}
+ onClose={handleCloseSnack}
+ anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+ >
+ <Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
+ {snackInfo.text}
+ </Alert>
+ </Snackbar>
+ <Error />
+ </MainPageError>
+ )
+ else
+ return (
+ <MainPage>
+ <Snackbar
+ open={snackInfo.open}
+ autoHideDuration={6000}
+ onClose={handleCloseSnack}
+ anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+ >
+ <Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
+ {snackInfo.text}
+ </Alert>
+ </Snackbar>
+ <StyledBreadCrumbs>
+ <Link to='/'>Página Inicial</Link>
+ <span>Busca</span>
+ </StyledBreadCrumbs>
+ <HeaderFilters
+ options={options}
+ orders={orders}
+ currOption={currOption}
+ currOrder={currOrder}
+ handleChangeOption={handleChangeOption}
+ handleChangeOrder={handleChangeOrder}
+ />
+ {
+ currOption === 'LearningObject' &&
+ <Fragment>
+ <SearchExpansionPanel
+ setTag={(tag) => setTag(tag)}
+ curriculumComponents={curriculumComponents}
+ setCurriculum={(array) => { setCurriculumComponents(array) }}
+ typeOfResources={typeOfResources}
+ setTypeRes={(array) => { setTypeOfResources(array) }}
+ teachingStage={teachingStage}
+ setTeachingStage={(array) => { setTeachingStage(array) }}
+ languages={languages}
+ setLanguages={(array) => { setLanguages(array) }}
+ />
+ {
+ <FilterSummary
+ curriculumComponents={curriculumComponents}
+ typeOfResources={typeOfResources}
+ languages={languages}
+ teachingStage={teachingStage}
+ tag={tag}
+ onButtonClicked={onButtonClicked}
+ />
}
+ <ResourceTemplate
+ handleNextPage={handleNextPage}
+ handlePreviousPage={handlePreviousPage}
+ isLoading={isLoading}
+ currPage={currPage}
+ resources={resourcesArray}
+ totalResources={totalResources}
+ />
+ </Fragment>
}
-
- getRequest(
- url,
- (data, headers) => { handleSuccess(data, headers, searchClass) },
- handleFail,
- );
-
- }, [window.history.state === null ? true : window.history.state.key, state.currentUser.id])
-
- if (error)
- 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>
- <Error contrast={state.contrast} />
- </MainPageError>
- </div>
- )
- else
- 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>
- <StyledBreadCrumbs contrast={state.contrast}>
- <Link to='/'>Página Inicial</Link>
- <span>Busca</span>
- </StyledBreadCrumbs>
- <HeaderFilters
- contrast={state.contrast}
- options={options}
- orders={orders}
- currOption={currOption}
- currOrder={currOrder}
- handleChangeOption={handleChangeOption}
- handleChangeOrder={handleChangeOrder}
- />
- {
- currOption === 'LearningObject' &&
- <Fragment>
- <SearchExpansionPanel
- contrast={state.contrast}
- setTag={(tag) => setTag(tag)}
- curriculumComponents={curriculumComponents}
- setCurriculum={(array) => { setCurriculumComponents(array) }}
- typeOfResources={typeOfResources}
- setTypeRes={(array) => { setTypeOfResources(array) }}
- teachingStage={teachingStage}
- setTeachingStage={(array) => { setTeachingStage(array) }}
- languages={languages}
- setLanguages={(array) => { setLanguages(array) }}
- />
- {
- <FilterSummary
- contrast={state.contrast}
- curriculumComponents={curriculumComponents}
- typeOfResources={typeOfResources}
- languages={languages}
- teachingStage={teachingStage}
- tag={tag}
- onButtonClicked={onButtonClicked}
- />
- }
- <ResourceTemplate
- contrast={state.contrast}
- handleNextPage={handleNextPage}
- handlePreviousPage={handlePreviousPage}
- isLoading={isLoading}
- currPage={currPage}
- resources={resourcesArray}
- totalResources={totalResources}
- />
- </Fragment>
- }
- {
- currOption === 'Collection' &&
- <CollectionTemplate
- contrast={state.contrast}
- handleNextPage={handleNextPage}
- handlePreviousPage={handlePreviousPage}
- isLoading={isLoading}
- currPage={currPage}
- resources={collectionsArray}
- totalResources={totalCollections}
- />
- }
- {
- currOption === 'User' &&
- <UserTemplate
- contrast={state.contrast}
- handleNextPage={handleNextPage}
- handlePreviousPage={handlePreviousPage}
- isLoading={isLoading}
- currPage={currPage}
- resources={usersArray}
- totalResources={totalUsers}
- />
- }
- </MainPage>
- </div>
- )
+ {
+ currOption === 'Collection' &&
+ <CollectionTemplate
+ handleNextPage={handleNextPage}
+ handlePreviousPage={handlePreviousPage}
+ isLoading={isLoading}
+ currPage={currPage}
+ resources={collectionsArray}
+ totalResources={totalCollections}
+ />
+ }
+ {
+ currOption === 'User' &&
+ <UserTemplate
+ handleNextPage={handleNextPage}
+ handlePreviousPage={handlePreviousPage}
+ isLoading={isLoading}
+ currPage={currPage}
+ resources={usersArray}
+ totalResources={totalUsers}
+ />
+ }
+ </MainPage>
+ )
}
const MainPage = styled.div`
- padding: 1em 0;
- width: 90%;
- margin: 0 auto;
+ width: 90%;
+ margin: 1em auto;
`
-const MainPageError = styled.div`
- width: 90%;
- margin: 0 auto;
- display: flex;
- justify-content: center;
- align-items: center;
- padding: 1em;
+const MainPageError = styled.div`
+ width: 90%;
+ margin: 1em auto;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 1em;
`
const StyledBreadCrumbs = styled(Breadcrumbs)`
- display: flex;
- justify-content: flex-start;
- span {
- color: ${props => props.contrast === "" ? "#a5a5a5" : "white"};
- }
- a {
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- }
+ display: flex;
+ justify-content: flex-start;
+ span {
+ color: #a5a5a5;
+ }
+ a {
+ color: #00bcd4;
+ text-decoration: none;
+ }
`;
diff --git a/src/Pages/SummarizedUserTerms.js b/src/Pages/SummarizedUserTerms.js
deleted file mode 100644
index 401530a4..00000000
--- a/src/Pages/SummarizedUserTerms.js
+++ /dev/null
@@ -1,399 +0,0 @@
-/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
-Departamento de Informatica - Universidade Federal do Parana
-
-This file is part of Plataforma Integrada MEC.
-
-Plataforma Integrada MEC is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-Plataforma Integrada MEC is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-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, useState } from 'react';
-import { Store } from '../Store'
-import styled from 'styled-components';
-import Grid from '@material-ui/core/Grid';
-import Fab from '@material-ui/core/Fab';
-import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
-
-import { StyledButton } from '../Components/ButtonAvaliarRecurso.js';
-import { BannerStyle } from './UserTerms';
-
-/*Importação de imagens para o componente*/
-import Handshake from "../img/termos/handshake.svg"
-import Pessoa from "../img/termos/Pessoa.svg"
-import Email from "../img/termos/Email.svg"
-import Seguranca from "../img/termos/Seguranca.svg"
-import Like from "../img/termos/Like.svg";
-import Unlike from "../img/termos/Unlike.svg";
-import Line from "../img/termos/Line.svg";
-
-import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';
-import ArrowUpwardIcon from '@material-ui/icons/ArrowUpward';
-//Image Import
-import { Aberto } from "ImportImages.js";
-import { Fechado } from "ImportImages.js";
-
-const theme = createMuiTheme({
- palette: {
- primary: {
- light: 'orange',
- main: 'orange',
- dark: 'orange',
- contrastText: '#fff',
- },
- secondary: {
- light: 'black',
- main: 'black',
- dark: 'black',
- contrastText: 'yellow',
- },
- },
- });
-
-
-export default function SummarizedUserTerms() {
- const { state } = useContext(Store)
- const [slide, updateSlide] = useState(0);
-
- const handleGoUp = () => {
- if (slide > 1) {
- var element = document.getElementById("slide" + (slide - 1).toString());
- if (element.offsetHeight < state.windowSize.height) element.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' })
- else element.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'center' })
- updateSlide(slide - 1);
- }
- }
-
- const handleGoDown = () => {
- if (slide < 7) {
- var element = document.getElementById("slide" + (slide + 1).toString());
- if (element.offsetHeight < state.windowSize.height) element.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' })
- else element.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'center' })
- updateSlide(slide + 1);
- }
- }
-
- return (
- <Content contrast={state.contrast}>
- <link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap" rel="stylesheet" />
- <BannerStyle contrast={state.contrast}>
- <h2 style={{ width: "100%", textAlign: "center", marginTop: "0px", paddingTop: "6rem", marginBottom: "16px", fontSize: "52px", fontFamily: "'Pompiere', cursive", color: "#fff", fontWeight: "500" }}>RESUMO DOS TERMOS DE USO</h2>
- <div style={{ display: "flex", justifyContent: "center" }}>
- <StyledButton contrast={state.contrast} onClick={() => window.location.href='/termos'}>
- Se preferir, veja a versão completa
- </StyledButton>
- </div>
- </BannerStyle>
- <FloatingButtons>
- <ThemeProvider theme={theme}>
- <Fab
- color={state.contrast === "" ? "primary": "secondary"}
- aria-label="slide superior"
- onClick={handleGoUp}
- style={state.contrast === "" ? {} : {border: "1px solid white"}}
- >
- <ArrowUpwardIcon/>
- </Fab>
- </ThemeProvider>
- <ThemeProvider theme={theme}>
- <Fab
- color={state.contrast === "" ? "primary": "secondary"}
- aria-label="slide inferior"
- onClick={handleGoDown}
- style={state.contrast === "" ? {} : {border: "1px solid white"}}
- >
- <ArrowDownwardIcon/>
- </Fab>
- </ThemeProvider>
- </FloatingButtons>
- <div className="slides">
- <div id="slide1" className="tmpl1">
- <div className="container">
- <Grid container>
- <Grid item xs={12} md={8}>
- <div className="box-text">
- <p>A Plataforma Integrada MEC RED é parte do Compromisso 6 do 3º Plano de Ação da Parceria para Governo Aberto (OGP-Brasil), que tem por objetivo “incorporar na polÃtica educacional o potencial da cultura digital, de modo a fomentar a autonomia para uso, reuso e adaptação de recursos educacionais digitais, valorizando a pluralidade e a diversidade da educação brasileiraâ€.</p>
- </div>
- </Grid>
- <Grid style={{ display: "flex", justifyContent: "center" }} item xs={12} md={4}>
- <div className="box-image">
- <img src={Handshake} alt="handshake" />
- </div>
- </Grid>
- </Grid>
- </div>
- </div>
- <div id="slide2" className="tmpl2">
- <div className="container">
- <div className="title">
- <p>O que é a Plataforma Integrada MEC RED e como ela está organizada?</p>
- </div>
- <Grid container>
- <Grid className="box-text" item xs={12} md={6}>
- <p>Uma plataforma interativa, colaborativa e criada em software livre, que disponibiliza conteúdos do acervo do MEC e indica conteúdos de parceiros com o objetivo de formar uma rede ativa de educadores interessados em usar, criar e compartilhar recursos educacionais digitais.</p>
- </Grid>
- <Grid className="box-text" item xs={12} md={6}>
- <p><strong>Repositório</strong> de recursos educacionais digitais que permite aos usuários cadastrados a publicação de seus materiais e <strong>Referatório</strong> que aponta links para conteúdos em sites externos.</p>
- </Grid>
- </Grid>
- </div>
- </div>
- <div id="slide3" className="tmpl3">
- <div className="container">
- <Grid className="title" container>
- <Grid item xs={12}>
- <p>Os recursos educacionais disponibilizados podem ser de dois tipos:</p>
- </Grid>
- </Grid>
- <Grid container>
- <Grid item xs={12} md={6}>
- <div className="box-text">
- <img src={Aberto} alt="Aberto" />
- <p><strong>Abertos</strong>: recursos sem nenhuma restrição de acesso e<br /> com flexibilidade quanto ao uso ou reuso.</p>
- </div>
- <div className="box-text">
- <img src={Fechado} alt="Fechado" />
- <p><strong>Fechados</strong>: recursos com alguma restrição de acesso, uso<br /> ou reuso, como aqueles que, para acesso, há demanda de<br /> cadastro ou que têm licenças restritivas.</p>
- </div>
- </Grid>
- <Grid item xs={12} md={6}>
- <Grid item xs={12} md={12}>
- <div className="box-text">
- <p>Como repositório, a Plataforma hospeda somente Recursos Educacionais Abertos (REA). Todo conteúdo inserido por usuários deve ser aberto.</p>
- </div>
- </Grid>
- <Grid item xs={12} md={12}>
- <div className="box-text">
- <p>Como referatório, a Plataforma aponta links para parceiros, e<br /> esses recursos podem ser abertos ou fechados.</p>
- </div>
- </Grid>
- </Grid>
- </Grid>
- </div>
- </div>
- <div id="slide4" className="tmpl4">
- <div className="container">
- <Grid container>
- <Grid item xs={12} md={6}>
- <p className="title">Como se cadastrar?</p>
- <div className="box-text">
- <p>Para criar uma conta, o usuário deverá clicar no botão “Cadastre-se†na página inicial da Plataforma e fazer um cadastro utilizando um endereço de e-mail e criando uma senha.</p>
- </div>
- </Grid>
- <Grid item xs={4} md={2} style={{ alignSelf: "center" }}> <img style={{ width: "10vh", height: "10vh", verticalAlign: "middle", margin: "auto", display: "block" }} src={Pessoa} alt="Pessoa" /> </Grid>
- <Grid item xs={4} md={2} style={{ alignSelf: "center" }}> <img style={{ width: "10vh", height: "10vh", verticalAlign: "middle", margin: "auto", display: "block" }} src={Email} alt="Email" /> </Grid>
- <Grid item xs={4} md={2} style={{ alignSelf: "center" }}> <img style={{ width: "10vh", height: "10vh", verticalAlign: "middle", margin: "auto", display: "block" }} src={Seguranca} alt="Seguranca" /> </Grid>
- </Grid>
- </div>
- </div>
- <div id="slide5" className="tmpl5">
- <div className="container">
- <Grid container>
- <Grid item xs={12} md={6}>
- <div className="title">
- <img src={Like} alt="Like" />
- <p>O que publicar?</p>
- </div>
- <img src={Line} alt="Line" style={{margin: "auto", display: "block"}}/>
- <div className="box-text">
- <p className="box-text">Conteúdos de cunho educacional e pertinentes ao assunto no qual estão inseridos, de autoria do usuário, de autoria coletiva (com consentimento dos demais autores) ou que estejam no domÃnio público. </p>
- </div>
- </Grid>
- <Grid item xs={12} md={6}>
- <div className="title">
- <img src={Unlike} alt="Unlike" />
- <p>O que não publicar?</p>
- </div>
- <img src={Line} alt="Line" style={{margin: "auto", display: "block"}}/>
- <div className="box-text">
- <p className="box-text">Materiais ofensivos, pornográficos, relacionados a atividades ilegais, que invadam a privacidade de terceiros, que violem a legislação de Direito Autoral ou os Direitos Humanos. Propagandas, conteúdos com vÃrus, spam ou comentários abusivos.</p>
- </div>
- </Grid>
- </Grid>
- </div>
- </div>
- <div id="slide6" className="tmpl6">
- <div className="container">
- <Grid container>
- <Grid item xs={12} md={7}>
- <div className="title">
- <p>Direitos do autor e licenças de uso</p>
- </div>
- <div className="box-text">
- <p>Ao inserir um novo material de sua autoria no Repositório, o usuário deverá escolher um dos tipos de licença aberta disponÃveis na Plataforma:</p>
- </div>
- <div className="box-text">
- <Grid container>
- <Grid item xs={3} className="licenses">
- <p>CC-BY</p>
- </Grid>
- <Grid item xs={3} className="licenses">
- <p>CC-BY-SA</p>
- </Grid>
- <Grid item xs={3} className="licenses">
- <p>CC-BY-NC</p>
- </Grid>
- <Grid item xs={3} className="licenses">
- <p>CC-BY-NC-SA</p>
- </Grid>
- </Grid>
- </div>
- </Grid>
- <Grid item xs={12} md={5}>
- <Grid container>
- <Grid item xs={12} md={2} className="licenses">
- <p>CC-BY</p>
- </Grid>
- <Grid item xs={12} md={10} className="box-text">
- <p> significa que o autor permite que distribuam, remixem, adaptem e criem a partir do seu trabalho, desde que lhe atribuam o devido crédito pela criação original</p>
- </Grid>
- </Grid>
- <Grid container>
- <Grid item xs={12} md={2} className="licenses">
- <p>NC</p>
- </Grid>
- <Grid item xs={12} md={10} className="box-text">
- <p> indica que as criações elaboradas a partir do trabalho do autor podem ser utilizadas somente para fins não comerciais (se não houver esta especificação, o novo recurso poderá ser utilizado para fins comerciais)</p>
- </Grid>
- </Grid>
- <Grid container>
- <Grid item xs={12} md={2} className="licenses">
- <p>SA</p>
- </Grid>
- <Grid item xs={12} md={10} className="box-text">
- <p> quer dizer que as novas criações devem ser licenciadas sob termos idênticos aos do trabalho original</p>
- </Grid>
- </Grid>
- </Grid>
- </Grid>
- </div>
- </div>
- <div id="slide7" className="tmpl7">
- <div className="container">
- <Grid container xs={12}>
- <Grid className="title" item xs={12} md={6}>
- <p>Respeitamos a sua privacidade</p>
- </Grid>
- <Grid item xs={12} md={6}>
- <Grid item xs={12} md={12} className="box-text">
- <p>Além de solicitar alguns dados pessoais para o cadastro, a Plataforma coleta, de forma automática, os dados não pessoais relativos à interação dos usuários no sistema. Esses dados nunca serão fornecidos para fins comerciais, assim como nunca serão compartilhados quaisquer dados pessoais que possam identificar o usuário.</p>
- </Grid>
- <Grid item xs={12} md={12} className="box-text">
- <p>Os dados anônimos poderão ser utilizados para fins de melhoria da plataforma, transparência e para o uso em pesquisas.</p>
- </Grid>
- </Grid>
- </Grid>
- <Grid container xs={12}>
- <div className="title">
- <p>Dúvidas? Leia a <a href="/termos">versão completa dos termos de uso</a> ou fale conosco por meio do <a href="/contato">formulário de contato</a>.</p>
- </div>
- </Grid>
- </div>
- </div>
- </div>
- </Content>
- )
-}
-
-const FloatingButtons = styled.div`
- display: flex;
- flex-direction: column;
- position: fixed !important;
- top: 50%;
- -ms-transform: translateY(-50%);
- transform: translateY(-50%);
- right: 15px;
- Fab {
- margin: 15px;
- }
-`
-
-const Content = styled.div`
-
- color: white;
-
- text-align: left;
-
- p {
- margin: 0;
- }
-
- a {
- text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"};
- color: ${props => props.contrast === "" ? "" : "yellow"};
- }
-
- .slides > div {
- min-height: 500px;
- display: flex;
- align-items: center;
- justify-content: center;
- border: 1px solid ${props => props.contrast === "" ? "inherit" : "white"};
- border-radius: 20px;
- margin: 25px;
- }
-
- .box-text {
- font-family: "Roboto", regular;
- display: flex;
- padding: 25px;
- img {
- width: 10vh;
- height: 10vh;
- vertical-align: middle;
- }
- font-size: 1.1em;
- }
-
- .title {
- font-family: "Pompiere", regular;
- padding: 25px;
- text-align: center;
- font-size: 3em;
- }
-
- .licenses {
- text-align: center;
- margin: auto;
- }
-
- .box-image {
-
- }
-
- .tmpl1 {
- background: ${props => props.contrast === "" ? "#00BCD4" : "black"};
- }
-
- .tmpl2 {
- background: ${props => props.contrast === "" ? "#673AB7" : "black"};
- }
-
- .tmpl3 {
- background: ${props => props.contrast === "" ? "#E81F4F" : "black"};
- }
-
- .tmpl4 {
- background: ${props => props.contrast === "" ? "#FF7F00" : "black"};
- }
-
- .tmpl5 {
- background: ${props => props.contrast === "" ? "#1AB9DE" : "black"};
- }
-
- .tmpl6 {
- background: ${props => props.contrast === "" ? "#673AB7" : "black"};
- }
-
- .tmpl7 {
- background: ${props => props.contrast === "" ? "#E81F4F" : "black"};
- }
-
-`
\ No newline at end of file
diff --git a/src/Pages/TabsHelp/TabManageAc.js b/src/Pages/TabsHelp/TabManageAc.js
index dd9f12bc..6a2edde4 100644
--- a/src/Pages/TabsHelp/TabManageAc.js
+++ b/src/Pages/TabsHelp/TabManageAc.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, useContext } from "react";
+import React, { useState, useEffect } from "react";
import styled from "styled-components";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
@@ -31,242 +31,263 @@ import CardParticipando from "../../Components/HelpCenter/Cards/CardParticipando
import CardEncontrando from "../../Components/HelpCenter/Cards/CardEncontrando";
import CardPublicando from "../../Components/HelpCenter/Cards/CardPublicando";
import { Link } from "react-router-dom";
-import { Store } from '../../Store';
//Image Import
import { GerenciandoConta } from "ImportImages.js";
export default function TabManageAc(props) {
- const { state } = useContext(Store);
- const tabs = [
- "Por que me cadastrar?",
- "Como fazer meu cadastro?",
- "Como alterar minha senha?",
- "Como acessar a conta?",
- "Esqueci minha senha. O que fazer?",
- "Gerenciando a Conta"
- ];
-
- const [tabValue, setTabValue] = useState(props.location.state === "undefined" ? 0 : props.location.state);
-
- const handleChangeTab = (e, newValue) => {
- setTabValue(newValue);
- };
-
- useEffect(() => { window.scrollTo(0, 0) }, [])
-
- return (
- <div style={state.contrast === "" ? { backgroundColor: "#f4f4f4" } : { backgroundColor: "black" }}>
- <link
- href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap"
- rel="stylesheet"
- />
- <Secao>
- <BreadCrumbsDiv>
- <StyledBreadCrumbs contrast={state.contrast}>
- <Link to="/">Página Inicial</Link>
- <Link to="ajuda">Ajuda</Link>
- <span>{tabs[5]}</span>
- </StyledBreadCrumbs>
- </BreadCrumbsDiv>
- <Grid container justify="center">
- <Grid item xs={12} md={10} >
- <Principal contrast={state.contrast}>
- <Menu contrast={state.contrast}>
- <div className="fixo">
- <img src={GerenciandoConta} alt="Gerenciando a conta" />
- <span>{tabs[5]}</span>
- </div>
- <TabsStyled contrast={state.contrast} orientation="vertical"
- variant="scrollable"
- value={tabValue}
- onChange={handleChangeTab}
- TabIndicatorProps={{ style: { display: "none" } }}
- >
- <TabStyled contrast={state.contrast} label={tabs[0]}></TabStyled>
- <TabStyled contrast={state.contrast} label={tabs[1]}></TabStyled>
- <TabStyled contrast={state.contrast} label={tabs[2]}></TabStyled>
- <TabStyled contrast={state.contrast} label={tabs[3]}></TabStyled>
- <TabStyled contrast={state.contrast} label={tabs[4]}></TabStyled>
- </TabsStyled>
- <br/>
- <div className="voltarInicio">
- <a href="ajuda">VOLTAR AO ÃNICIO</a>
- </div>
- </Menu>
- {tabValue === 0 && <Why contrast={state.contrast} title={tabs[0]} />}
- {tabValue === 1 && <HowToDo contrast={state.contrast} title={tabs[1]} />}
- {tabValue === 2 && <HowToChange contrast={state.contrast} title={tabs[2]} />}
- {tabValue === 3 && <HowToAccess contrast={state.contrast} title={tabs[3]} />}
- {tabValue === 4 && <Forget contrast={state.contrast} title={tabs[4]} />}
- <div className="resultadosProcura">
- <span>Não era bem o que você procurava?</span>
- <div className="subtitulo">
- <span>Você pode navegar pelos tópicos de ajuda ou entrar em <a href="contato">Contato</a>.</span>
- </div>
- </div>
- </Principal>
- </Grid>
- </Grid>
- <Grid style={{ paddingBottom: "50px" }} container justify={"center"}>
- <Grid item xs={12} md={3} style={{ margin: 5 }}>
- <CardPublicando contrast={state.contrast} />
- </Grid>
- <Grid item xs={12} md={3} style={{ margin: 5 }}>
- <CardEncontrando contrast={state.contrast} />
- </Grid>
- <Grid item xs={12} md={3} style={{ margin: 5 }}>
- <CardParticipando contrast={state.contrast} />
- </Grid>
- </Grid>
- </Secao>
- </div>
- );
+ const tabs = [
+ "Por que me cadastrar?",
+ "Como fazer meu cadastro?",
+ "Como alterar minha senha?",
+ "Como acessar a conta?",
+ "Esqueci minha senha. O que fazer?",
+ "Gerenciando a Conta"
+ ];
+
+ const [tabValue, setTabValue] = useState(props.location.state === "undefined" ? 0 : props.location.state);
+
+ const handleChangeTab = (e, newValue) => {
+ setTabValue(newValue);
+ };
+
+ useEffect(() => { window.scrollTo(0, 0) }, [])
+
+ return (
+ <div style={{ backgroundColor: "#f4f4f4" }}>
+ <link
+ href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap"
+ rel="stylesheet"
+ />
+
+ <Secao>
+ <BreadCrumbsDiv>
+ <StyledBreadCrumbs>
+ <Link to="/">Página Inicial</Link>
+ <Link to="ajuda">Ajuda</Link>
+
+ <span>{tabs[5]}</span>
+ </StyledBreadCrumbs>
+ </BreadCrumbsDiv>
+ <Grid container justify="center">
+ <Grid item xs={12} md={10} >
+ <Principal>
+ <Menu>
+ <div className="fixo">
+ <img src={GerenciandoConta} alt="Gerenciando a conta" />
+ <span>{tabs[5]}</span>
+ </div>
+ <TabsStyled orientation="vertical"
+ variant="scrollable"
+ value={tabValue}
+ onChange={handleChangeTab}
+ TabIndicatorProps={{ style: { display: "none" } }}
+ >
+ <TabStyled label={tabs[0]}></TabStyled>
+ <TabStyled label={tabs[1]}></TabStyled>
+ <TabStyled label={tabs[2]}></TabStyled>
+ <TabStyled label={tabs[3]}></TabStyled>
+ <TabStyled label={tabs[4]}></TabStyled>
+ </TabsStyled>
+ <br />
+ <div className="voltarInicio">
+ <a href="ajuda">VOLTAR AO ÃNICIO</a>
+ </div>
+ </Menu>
+
+ {tabValue === 0 && <Why title={tabs[0]} />}
+ {tabValue === 1 && <HowToDo title={tabs[1]} />}
+ {tabValue === 2 && <HowToChange title={tabs[2]} />}
+ {tabValue === 3 && <HowToAccess title={tabs[3]} />}
+ {tabValue === 4 && <Forget title={tabs[4]} />}
+ <div className="resultadosProcura">
+ <span>Não era bem o que você procurava?</span>
+ <div className="subtitulo">
+ <span>Você pode navegar pelos tópicos de ajuda ou entrar em <a href="contato">Contato</a>.</span>
+ </div>
+ </div>
+
+ </Principal>
+ </Grid>
+ </Grid>
+
+
+ <Grid style={{ marginBottom: "50px" }} container justify={"center"}>
+ <Grid item xs={12} md={3} style={{ margin: 5 }}>
+ <CardPublicando />
+ </Grid>
+ <Grid item xs={12} md={3} style={{ margin: 5 }}>
+ <CardEncontrando />
+ </Grid>
+ <Grid item xs={12} md={3} style={{ margin: 5 }}>
+ <CardParticipando />
+ </Grid>
+ </Grid>
+ </Secao>
+ </div>
+ );
}
const StyledBreadCrumbs = styled(Breadcrumbs)`
- display : flex;
- justify-content : flex-start;
- span {
- color: ${props => props.contrast === "" ? "#a5a5a5" : "white"};
- }
- a {
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- }
+ display : flex;
+ justify-content : flex-start;
+ span {
+ color : #a5a5a5;
+ }
+ a {
+ color: #00bcd4;
+ text-decoration: none;
+ }
+
`
const BreadCrumbsDiv = styled.div`
- padding : 10px;
- display : flex;
+
+ padding : 10px;
+ display : flex;
`
const Principal = styled.div`
- .fixo {
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
- height: 40px;
- text-align: center;
- padding: 30px;
- margin-bottom: 30px;
-
- img {
- height: 50px;
- width: 50px;
- margin-right: 40px;
- vertical-align: middle;
- }
-
- span {
- font-size: 20px;
- color: ${props => props.contrast === "" ? "" : "white"};
- }
+ .fixo {
+
+ height: 40px;
+ text-align: center;
+ background-color: #fff;
+ padding: 30px;
+ margin-bottom: 30px;
+ color: #666;
+
+
+ img {
+ height: 50px;
+ width: 50px;
+ margin-right: 40px;
+ vertical-align: middle;
+
}
- .resultadosProcura {
- text-align: center;
- margin-block: 30px;
- padding-inline: 15px;
- color: ${props => props.contrast === "" ? "#666" : "white"};
- span {
- font-size: 24px;
- }
- .subtitulo {
- margin-top: 10px;
-
- span {
- font-size: 15px
- }
-
- a {
- font-size: 15px;
- padding: 0;
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- }
- }
+ span {
+ font-size: 20px;
+ vertical-align: ;
}
-`
-const TabsStyled = styled(Tabs)`
- color: ${props => props.contrast === "" ? "" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- .Mui-selected {
- background-color: ${props => props.contrast === "" ? "#e7e4e4" : "rgba(255,255,0,0.24)"};
+
+
+ }
+ .resultadosProcura {
+ text-align: center;
+ margin-block: 30px;
+ padding-inline: 15px;
+ color: #666;
+ span {
+ font-size: 24px;
}
+ .subtitulo {
+ margin-top: 10px;
+
+ span {
+ font-size: 15px
+ }
+
+ a {
+ font-size: 15px;
+ padding: 0;
+ color:#00bcd4;
+ text-decoration: none;
+ }
- .MuiTab-root{
- text-transform: none !important;
- max-width:100%
}
- text-align: center;
- width:100%;
+ }
+
+`
+
+const TabsStyled = styled(Tabs)`
+
+ .Mui-selected {
+ background-color: #e7e4e4;
+ }
+
+ .MuiTab-root{
+ text-transform: none !important;
+ max-width:100%
+ }
+ text-align: center;
+ width:100%
+
`
const TabStyled = styled(Tab)`
- color: ${props => props.contrast === "" ? "" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- padding: 4px 15px !important;
- font-weight: 500;
- font-size: 14px !important;
- border-radius: 4px !important;
- text-align: center;
+
+ padding: 4px 15px !important;
+ font-weight: 500;
+ font-size: 14px !important;
+ border-radius: 4px !important;
+ text-align: center;
- &:hover {
- background-color: ${props => props.contrast === "" ? "#e7e4e4" : "rgba(255,255,0,0.24)"};
- }
+
+
+
+
+ &:hover {
+ background-color: #e7e4e4;
+ }
`
const Menu = styled.div`
- width: auto;
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
- color: ${props => props.contrast === "" ? "#666" : "white"};
- padding-block: 10px;
- box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"};
- margin-bottom:30px
-
- h4 {
- padding-inline: 15px;
- font-size: 18px;
- margin-block: 10px;
- font-weight: 500;
- line-height: 1.1;
- }
+ width: auto;
+ background-color: #fff;
+ color: #666;
+ padding-block: 10px;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ margin-bottom:30px
+
+
+ h4 {
+ padding-inline: 15px;
+ font-size: 18px;
+ margin-block: 10px;
+ font-weight: 500;
+ line-height: 1.1;
+ }
- .voltarInicio {
- padding: 4px 15px;
- font-size: 15px;
- text-align: center;
- a {
- font-size: 15px;
- padding: 0;
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- }
+ .voltarInicio {
+ padding: 4px 15px;
+ font-size: 15px;
+ text-align: center;
+ a {
+ font-size: 15px;
+ padding: 0;
+ color:#00bcd4;
+ text-decoration: none;
}
+ }
+
+ hr {
+ border: 0;
+ border-top: 1px solid #ccc;
+ margin-top: 20px;
+ margin-bottom: 20px;
+ }
+
+ .procurava {
+ padding: 4px 15px;
+ font-size: 15px;
+ text-align: center;
- hr {
- border: 0;
- border-top: 1px solid #ccc;
- margin-top: 20px;
- margin-bottom: 20px;
+ a {
+ font-size: 15px;
+ padding: 0;
+ color:#00bcd4;
+ text-decoration: none;
}
- .procurava {
- padding: 4px 15px;
- font-size: 15px;
- text-align: center;
-
- a {
- font-size: 15px;
- padding: 0;
- color:#00bcd4;
- text-decoration: none;
- }
- }
+ }
+
`
const Secao = styled.div`
- margin-inline: auto;
+ margin-inline: auto;
+
`
diff --git a/src/Pages/TabsHelp/TabNetPart.js b/src/Pages/TabsHelp/TabNetPart.js
index 1eea7cfe..13c13d8c 100644
--- a/src/Pages/TabsHelp/TabNetPart.js
+++ b/src/Pages/TabsHelp/TabNetPart.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, useContext } from 'react';
+import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import Tabs from '@material-ui/core/Tabs'
import Tab from '@material-ui/core/Tab';
@@ -28,12 +28,10 @@ import CardEncontrando from '../../Components/HelpCenter/Cards/CardEncontrando';
import CardPublicando from '../../Components/HelpCenter/Cards/CardPublicando';
import CardGerenciando from '../../Components/HelpCenter/Cards/CardGerenciando';
import { Link } from 'react-router-dom';
-import { Store } from '../../Store';
//Image Import
import { ParticipandoRede } from "ImportImages.js";
-
export default function TabNetPart(props) {
const tabs = [
'Como comentar ou avaliar um recurso?',
@@ -41,7 +39,6 @@ export default function TabNetPart(props) {
'Participando da Rede'
]
- const { state } = useContext(Store);
const [tabValue, setTabValue] = useState(props.location.state === "undefined" ? 0 : props.location.state);
const handleChangeTab = (e, newValue) => {
@@ -51,12 +48,12 @@ export default function TabNetPart(props) {
useEffect(() => { window.scrollTo(0, 0) }, [])
return (
- <div style={state.contrast === "" ? { backgroundColor: "#f4f4f4" } : { backgroundColor: "black" }}>
+ <div style={{ backgroundColor: "#f4f4f4" }}>
<link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet" />
<Secao>
<BreadCrumbsDiv>
- <StyledBreadCrumbs contrast={state.contrast}>
+ <StyledBreadCrumbs>
<Link to="/" >
Página Inicial
</Link>
@@ -74,22 +71,20 @@ export default function TabNetPart(props) {
</BreadCrumbsDiv>
<Grid container justify="center">
<Grid item xs={12} md={10} >
- <Principal contrast={state.contrast}>
- <Menu contrast={state.contrast}>
+ <Principal>
+ <Menu>
<div className="fixo">
<img src={ParticipandoRede} alt="Participando da Rede" />
<span>{tabs[2]}</span>
</div>
- <TabsStyled
- contrast={state.contrast}
- orientation="vertical"
+ <TabsStyled orientation="vertical"
variant="scrollable"
value={tabValue}
onChange={handleChangeTab}
TabIndicatorProps={{ style: { display: "none" } }}
>
- <TabStyled contrast={state.contrast} label={tabs[0]}></TabStyled>
- <TabStyled contrast={state.contrast} label={tabs[1]}></TabStyled>
+ <TabStyled label={tabs[0]}></TabStyled>
+ <TabStyled label={tabs[1]}></TabStyled>
</TabsStyled>
<br />
<div className="voltarInicio">
@@ -97,8 +92,8 @@ export default function TabNetPart(props) {
</div>
</Menu>
- {tabValue === 0 && <How contrast={state.contrast} title={tabs[0]} />}
- {tabValue === 1 && <What contrast={state.contrast} title={tabs[1]} />}
+ {tabValue === 0 && <How title={tabs[0]} />}
+ {tabValue === 1 && <What title={tabs[1]} />}
<div className="resultadosProcura">
<span>Não era bem o que você procurava?</span>
<div className="subtitulo">
@@ -113,13 +108,13 @@ export default function TabNetPart(props) {
<Grid style={{ paddingBottom: "50px" }} container justify={"center"}>
<Grid item xs={12} md={3} style={{ margin: 5 }}>
- <CardPublicando contrast={state.contrast} />
+ <CardPublicando />
</Grid>
<Grid item xs={12} md={3} style={{ margin: 5 }}>
- <CardEncontrando contrast={state.contrast} />
+ <CardEncontrando />
</Grid>
<Grid item xs={12} md={3} style={{ margin: 5 }}>
- <CardGerenciando contrast={state.contrast} />
+ <CardGerenciando />
</Grid>
</Grid>
@@ -128,18 +123,19 @@ export default function TabNetPart(props) {
</div>
);
}
-
const StyledBreadCrumbs = styled(Breadcrumbs)`
display : flex;
justify-content : flex-start;
span {
- color: ${props => props.contrast === "" ? "#a5a5a5" : "white"};
+ color : #a5a5a5;
}
a {
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ color: #00bcd4;
+ text-decoration: none;
}
+
`
+
const BreadCrumbsDiv = styled.div`
padding : 10px;
@@ -149,11 +145,14 @@ const BreadCrumbsDiv = styled.div`
const Principal = styled.div`
.fixo {
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+
height: 40px;
text-align: center;
+ background-color: #fff;
padding: 30px;
margin-bottom: 30px;
+ color: #666;
+
img {
height: 50px;
@@ -165,7 +164,7 @@ const Principal = styled.div`
span {
font-size: 20px;
- color: ${props => props.contrast === "" ? "" : "white"};
+ vertical-align: ;
}
@@ -175,7 +174,7 @@ const Principal = styled.div`
text-align: center;
margin-block: 30px;
padding-inline: 15px;
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color: #666;
span {
font-size: 24px;
}
@@ -189,8 +188,8 @@ const Principal = styled.div`
a {
font-size: 15px;
padding: 0;
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ color:#00bcd4;
+ text-decoration: none;
}
}
@@ -199,10 +198,9 @@ const Principal = styled.div`
`
const TabsStyled = styled(Tabs)`
- color: ${props => props.contrast === "" ? "" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+
.Mui-selected {
- background-color: ${props => props.contrast === "" ? "#e7e4e4" : "rgba(255,255,0,0.24)"};
+ background-color: #e7e4e4;
}
.MuiTab-root{
@@ -215,26 +213,29 @@ const TabsStyled = styled(Tabs)`
`
const TabStyled = styled(Tab)`
- color: ${props => props.contrast === "" ? "" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+
padding: 4px 15px !important;
font-weight: 500;
font-size: 14px !important;
border-radius: 4px !important;
text-align: center;
+
+
+
+
&:hover {
- background-color: ${props => props.contrast === "" ? "#e7e4e4" : "rgba(255,255,0,0.24)"};
+ background-color: #e7e4e4;
}
`
const Menu = styled.div`
width: auto;
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ background-color: #fff;
+ color: #666;
padding-block: 10px;
- box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"};
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
margin-bottom:30px
@@ -253,8 +254,8 @@ const Menu = styled.div`
a {
font-size: 15px;
padding: 0;
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ color:#00bcd4;
+ text-decoration: none;
}
}
@@ -281,8 +282,7 @@ const Menu = styled.div`
`
-
const Secao = styled.div`
margin-inline: auto;
-`
\ No newline at end of file
+`
diff --git a/src/Pages/TabsHelp/TabPlataformaMEC.js b/src/Pages/TabsHelp/TabPlataformaMEC.js
index ad0bb152..c704d98f 100644
--- a/src/Pages/TabsHelp/TabPlataformaMEC.js
+++ b/src/Pages/TabsHelp/TabPlataformaMEC.js
@@ -16,8 +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, useContext } from 'react';
+import React, { useState } from 'react';
import styled from 'styled-components';
+import Tabs from '@material-ui/core/Tabs'
+import Tab from '@material-ui/core/Tab';
import Breadcrumbs from '@material-ui/core/Breadcrumbs';
import Grid from '@material-ui/core/Grid';
import CardEncontrando from '../../Components/HelpCenter/Cards/CardEncontrando';
@@ -29,213 +31,248 @@ import Which from '../../Components/HelpCenter/TabsPlataformaMEC/Which';
import Types from '../../Components/HelpCenter/TabsPlataformaMEC/Types';
import Software from '../../Components/HelpCenter/TabsPlataformaMEC/Software';
import How from '../../Components/HelpCenter/TabsPlataformaMEC/How';
-import { Link } from 'react-router-dom';
-import { Store } from '../../Store';
+import { Link } from 'react-router-dom';
-export default function TabPlataformaMEC(props) {
- const { state } = useContext(Store);
- const tabs = [
+
+
+
+
+
+export default function TabPlataformaMEC (props) {
+ const tabs= [
'O que é a plataforma MEC?',
'Como foi construÃda a Plataforma MEC?',
'Entendendo as 3 áreas da Plataforma',
'Quais são os Portais Parceiros?',
'Tipos de recursos',
'Softwares especÃficos',
+ 'Plataforma MEC'
]
-
+
const [tabValue, setTabValue] = useState(
Number(props.location.state.value) || 0);
- const handleChangeTab = (event, index) => {
- event.preventDefault();
- setTabValue(index);
- }
+ const handleChangeTab = (e, newValue) => {
+ setTabValue(newValue)
+}
+
- return (
- <MainPage contrast={state.contrast}>
- <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:300,400&display=swap" rel="stylesheet" />
+ return(
+ <div style={{backgroundColor:"#f4f4f4"}}>
+ <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet"/>
+
<Secao>
<BreadCrumbsDiv>
- <StyledBreadCrumbs contrast={state.contrast}>
+ <StyledBreadCrumbs>
<Link to="/" >
- Página Inicial
+ Página Inicial
</Link>
<Link to="ajuda" >
Ajuda
</Link>
-
+
<span>
- Plataforma MEC
+ {tabs[6]}
</span>
</StyledBreadCrumbs>
</BreadCrumbsDiv>
-
- <MainGrid container justify='center' spacing={4}>
- <Grid xs={12} md={3} sm={4} item>
- <Menu contrast={state.contrast}>
- <p className="title">
- Plataforma MEC
- </p>
- <div className="sized-box" />
-
- {
- tabs.map((tab, index) => {
- return (
- <TabStyled contrast={state.contrast} active={index === tabValue} name={index} onClick={(event) => handleChangeTab(event, index)} key={new Date().toISOString() + index}>
- {tab}
- </TabStyled>
- )
- })
- }
-
- <div className="sized-box" />
- <Link to="ajuda">
- <p className="go-back">
- Voltar ao inÃcio
- </p>
- </Link>
-
- <div className="sized-box" />
- <p className="sub-title">
- Não encontrou o que procurava? Entre em
- <Link to="contato">
- <span className="go-back"> contato</span>
- </Link>
- </p>
+ <Grid container spacing={4}>
+ <Grid item xs={3}>
+ <Menu>
+ <h4>{tabs[6]}</h4>
+ <TabsStyled orientation = "vertical"
+ variant = "scrollable"
+ value = {tabValue}
+ onChange = {handleChangeTab}
+ TabIndicatorProps = {{style:{display: "none"}}}
+ >
+ <TabStyled label={tabs[0]}></TabStyled>
+ <TabStyled label={tabs[1]}></TabStyled>
+ <TabStyled label={tabs[2]}></TabStyled>
+ <TabStyled label={tabs[3]}></TabStyled>
+ <TabStyled label={tabs[4]}></TabStyled>
+ <TabStyled label={tabs[5]}></TabStyled>
+ </TabsStyled>
+ <br/>
+ <div className="voltarInicio">
+ <a href="ajuda">VOLTAR AO ÃNICIO</a>
+ </div>
+ <hr/>
+ <div className="procurava">
+ Não encontrou o que procurava? Entre em
+ <a href="contato"> contato</a>
+ </div>
</Menu>
</Grid>
- <Grid xs={12} md={9} sm={8} item>
+ <Grid item xs={9}>
<Principal>
- {tabValue === 0 && <What contrast={state.contrast} title={tabs[0]} />}
- {tabValue === 1 && <How contrast={state.contrast} title={tabs[1]} />}
- {tabValue === 2 && <Understand contrast={state.contrast} title={tabs[2]} />}
- {tabValue === 3 && <Which contrast={state.contrast} title={tabs[3]} />}
- {tabValue === 4 && <Types contrast={state.contrast} title={tabs[4]} />}
- {tabValue === 5 && <Software contrast={state.contrast} title={tabs[5]} />}
- </Principal>
- </Grid>
- </MainGrid>
+ {tabValue === 0 && <What title={tabs[0]}/>}
+ {tabValue === 1 && <How title={tabs[1]}/>}
+ {tabValue === 2 && <Understand title={tabs[2]}/>}
+ {tabValue === 3 && <Which title={tabs[3]}/>}
+ {tabValue === 4 && <Types title={tabs[4]}/>}
+ {tabValue === 5 && <Software title={tabs[5]}/>}
+
+ <Grid style={{marginBlock:"50px"}} container spacing={2}>
+ <Grid item xs={4}>
+ <CardEncontrando/>
+ </Grid>
+ <Grid item xs={4}>
+ <CardParticipando/>
+ </Grid>
+ <Grid item xs={4}>
+ <CardGerenciando/>
+ </Grid>
+
+ </Grid>
- <MainGrid container spacing={4}>
- <Grid xs={12} md={4} item>
- <CardEncontrando contrast={state.contrast} />
- </Grid>
+ </Principal>
+ </Grid>
+ </Grid>
- <Grid item xs={12} md={4} >
- <CardParticipando contrast={state.contrast} />
- </Grid>
- <Grid item xs={12} md={4} >
- <CardGerenciando contrast={state.contrast} />
- </Grid>
- </MainGrid>
</Secao>
- </MainPage>
+ </div>
);
}
const StyledBreadCrumbs = styled(Breadcrumbs)`
display : flex;
- justify-content : flex-start;
- max-width : 1170px;
- a{
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- }
- span {
- color: ${props => props.contrast === "" ? "#a5a5a5" : "white"};
- }
-`
+ justify-content : flex-start;
+ max-width : 1170px;
+ span {
+ color : #a5a5a5;
+ }
+ a {
+ color: #00bcd4;
+ text-decoration: none;
+ }
-const MainPage = styled.div`
- background: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
`
const BreadCrumbsDiv = styled.div`
+
+ padding : 10px;
display : flex;
`
-const MainGrid = styled(Grid)`
- padding: 1.5em 0;
+const Principal = styled.div`
+ .fixo {
+
+ height: 40px;
+ text-align: center;
+ background-color: #fff;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ padding: 30px;
+ margin-bottom: 30px;
+ color: #666;
+
+
+ img {
+ height: 50px;
+ width: 50px;
+ margin-right: 40px;
+ vertical-align: middle;
+
+ }
+
+ span {
+ font-size: 20px;
+ vertical-align: ;
+ }
+
+
+
+ }
+
`
-const Principal = styled.div`
+const TabsStyled = styled(Tabs)`
+ .Mui-selected {
+ background-color: #e7e4e4;
+ }
+
+ .MuiTab-root{
+ text-transform: none !important;
+ }
+
`
-const TabStyled = styled.div`
- text-align: center;
- font-family: 'Roboto', 'sans-serif';
- font-weight: ${props => props.active ? "500" : "lighter"};
- background: ${props => props.active ? props.contrast === "" ? "#e7e4e4" : "rgba(255,255,0,0.24)" : ""};
- padding: 0.5em;
- color: ${props => props.contrast === "" ? "" : "yellow"};
- text-decoration: ${props => props.active ? "none" : props.contrast === "" ? "none" : "underline"};
-
- :hover{
- background: ${props => props.contrast === "" ? "#e7e4e4" : "rgba(255,255,0,0.24)"};
- cursor: pointer;
- font-weight: 500;
+const TabStyled = styled(Tab)`
+
+ padding: 4px 15px !important;
+ font-weight: 500;
+ font-size: 14px !important;
+ border-radius: 4px !important;
+
+
+
+
+
+ &:hover {
+ background-color: #e7e4e4;
}
`
const Menu = styled.div`
+ width: auto;
+ background-color: #fff;
+ color: #666;
+ padding-block: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
- background: ${props => props.contrast === "" ? "#fff" : "black"};
- border: ${props => props.contrast === "" ? "none" : "1px solid white"};
- color: ${props => props.contrast === "" ? "" : "white"};
- width: 100%;
- padding: 1em 0;
-
- .sized-box{
- border: 0.5px solid #d4d4d4;
- margin: 1em 0;
- }
- .title{
- padding: 0;
- margin: 0;
+ h4 {
+ padding-inline: 15px;
+ font-size: 18px;
+ margin-block: 10px;
font-weight: 500;
- text-align: center;
- font-family: 'Roboto', 'sans-serif';
+ line-height: 1.1;
}
- .sub-title{
- padding: 0;
- margin: 0;
- font-weight: lighter;
+ .voltarInicio {
+ padding: 4px 15px;
+ font-size: 15px;
text-align: center;
- font-family: 'Roboto', 'sans-serif';
+ a {
+ font-size: 15px;
+ padding: 0;
+ color:#00bcd4;
+ text-decoration: none;
+ }
+ }
+
+ hr {
+ border: 0;
+ border-top: 1px solid #ccc;
+ margin-top: 20px;
+ margin-bottom: 20px;
}
- .go-back{
- padding: 0;
- margin: 0;
- font-weight: lighter;
+ .procurava {
+ padding: 4px 15px;
+ font-size: 15px;
text-align: center;
- font-family: 'Roboto', 'sans-serif';
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- :hover{
- cursor: pointer;
- font-weight: 500;
+
+ a {
+ font-size: 15px;
+ padding: 0;
+ color:#00bcd4;
+ text-decoration: none;
}
+
}
- .active{
- background: ${props => props.contrast === "" ? "#e7e4e4" : "rgba(255,255,0,0.24)"};
- font-weight: 500;
- }
`
const Secao = styled.div`
- width: 90%;
- margin: 0 auto;
- padding: 1em 0;
+ width: 1138px;
+ margin-inline: auto;
+
`
diff --git a/src/Pages/TabsHelp/TabResourseFind.js b/src/Pages/TabsHelp/TabResourseFind.js
index 905650f8..51765ca0 100644
--- a/src/Pages/TabsHelp/TabResourseFind.js
+++ b/src/Pages/TabsHelp/TabResourseFind.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, useContext } from 'react';
+import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import Tabs from '@material-ui/core/Tabs'
import Tab from '@material-ui/core/Tab';
@@ -29,244 +29,263 @@ import CardPublicando from '../../Components/HelpCenter/Cards/CardPublicando';
import CardParticipando from '../../Components/HelpCenter/Cards/CardParticipando';
import CardGerenciando from '../../Components/HelpCenter/Cards/CardGerenciando';
import { Link } from 'react-router-dom';
-import { Store } from '../../Store';
//Image Import
import { EncontrandoRecurso } from "ImportImages.js";
export default function TabResourseFind(props) {
- const { state } = useContext(Store)
- const tabs = [
- 'Como fazer uma busca?',
- 'Como filtrar os resultados?',
- 'Como os recursos são ranqueados?',
- 'Encontrando Recursos'
- ]
-
- const [tabValue, setTabValue] = useState(props.location.state === "undefined" ? 0 : props.location.state);
-
- const handleChangeTab = (e, newValue) => {
- setTabValue(newValue)
- }
-
- useEffect(() => { window.scrollTo(0, 0) }, [])
-
- return (
- <div style={state.contrast === "" ? { backgroundColor: "#f4f4f4" } : { backgroundColor: "black" }}>
- <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet" />
- <Secao>
- <BreadCrumbsDiv>
- <StyledBreadCrumbs contrast={state.contrast}>
- <Link to="/" >
- Página Inicial
- </Link>
- <Link to="ajuda" >
- Ajuda
- </Link>
- <span>
- {tabs[3]}
- </span>
- </StyledBreadCrumbs>
- </BreadCrumbsDiv>
- <Grid container justify="center">
- <Grid item xs={12} md={10} >
- <Principal contrast={state.contrast}>
- <Menu contrast={state.contrast}>
- <div className="fixo">
- <img src={EncontrandoRecurso} alt="Encontrando Recursos" />
- <span>{tabs[3]}</span>
- </div>
- <TabsStyled
- contrast={state.contrast}
- orientation="vertical"
- variant="scrollable"
- value={tabValue}
- onChange={handleChangeTab}
- TabIndicatorProps={{ style: { display: "none" } }}
- >
- <TabStyled contrast={state.contrast} label={tabs[0]}></TabStyled>
- <TabStyled contrast={state.contrast} label={tabs[1]}></TabStyled>
- <TabStyled contrast={state.contrast} label={tabs[2]}></TabStyled>
- </TabsStyled>
- <br/>
- <div className="voltarInicio">
- <a href="ajuda">VOLTAR AO ÃNICIO</a>
- </div>
- </Menu>
- {tabValue === 0 && <HowToDo contrast={state.contrast} title={tabs[0]} />}
- {tabValue === 1 && <HowToFilter contrast={state.contrast} title={tabs[1]} />}
- {tabValue === 2 && <HowToRank contrast={state.contrast} title={tabs[2]} />}
- <div className="resultadosProcura">
- <span>Não era bem o que você procurava?</span>
- <div className="subtitulo">
- <span>Você pode navegar pelos tópicos de ajuda ou entrar em <a href="contato">Contato</a>.</span>
- </div>
- </div>
- </Principal>
- </Grid>
- </Grid>
- <Grid style={{ paddingBottom: "50px" }} container justify={"center"}>
- <Grid item xs={12} md={3} style={{ margin: 5 }}>
- <CardPublicando contrast={state.contrast} />
- </Grid>
- <Grid item xs={12} md={3} style={{ margin: 5 }}>
- <CardParticipando contrast={state.contrast} />
- </Grid>
- <Grid item xs={12} md={3} style={{ margin: 5 }}>
- <CardGerenciando contrast={state.contrast} />
- </Grid>
- </Grid>
- </Secao>
- </div>
- );
+ const tabs = [
+ 'Como fazer uma busca?',
+ 'Como filtrar os resultados?',
+ 'Como os recursos são ranqueados?',
+ 'Encontrando Recursos'
+ ]
+
+ const [tabValue, setTabValue] = useState(props.location.state === "undefined" ? 0 : props.location.state);
+
+ const handleChangeTab = (e, newValue) => {
+ setTabValue(newValue)
+ }
+
+ useEffect(() => { window.scrollTo(0, 0) }, [])
+
+ return (
+ <div style={{ backgroundColor: "#f4f4f4" }}>
+ <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet" />
+
+ <Secao>
+ <BreadCrumbsDiv>
+ <StyledBreadCrumbs>
+ <Link to="/" >
+ Página Inicial
+ </Link>
+ <Link to="ajuda" >
+ Ajuda
+ </Link>
+
+ <span>
+ {tabs[3]}
+ </span>
+
+ </StyledBreadCrumbs>
+
+ </BreadCrumbsDiv>
+ <Grid container justify="center">
+ <Grid item xs={12} md={10} >
+ <Principal>
+ <Menu>
+ <div className="fixo">
+ <img src={EncontrandoRecurso} alt="Encontrando Recursos" />
+ <span>{tabs[3]}</span>
+ </div>
+ <TabsStyled orientation="vertical"
+ variant="scrollable"
+ value={tabValue}
+ onChange={handleChangeTab}
+ TabIndicatorProps={{ style: { display: "none" } }}
+ >
+ <TabStyled label={tabs[0]}></TabStyled>
+ <TabStyled label={tabs[1]}></TabStyled>
+ <TabStyled label={tabs[2]}></TabStyled>
+ </TabsStyled>
+ <br />
+ <div className="voltarInicio">
+ <a href="ajuda">VOLTAR AO ÃNICIO</a>
+ </div>
+ </Menu>
+
+ {tabValue === 0 && <HowToDo title={tabs[0]} />}
+ {tabValue === 1 && <HowToFilter title={tabs[1]} />}
+ {tabValue === 2 && <HowToRank title={tabs[2]} />}
+ <div className="resultadosProcura">
+ <span>Não era bem o que você procurava?</span>
+ <div className="subtitulo">
+ <span>Você pode navegar pelos tópicos de ajuda ou entrar em <a href="contato">Contato</a>.</span>
+ </div>
+ </div>
+
+
+ </Principal>
+ </Grid>
+ </Grid>
+ <Grid style={{ paddingBottom: "50px" }} container justify={"center"}>
+ <Grid item xs={12} md={3} style={{ margin: 5 }}>
+ <CardPublicando />
+ </Grid>
+ <Grid item xs={12} md={3} style={{ margin: 5 }}>
+ <CardParticipando />
+ </Grid>
+ <Grid item xs={12} md={3} style={{ margin: 5 }}>
+ <CardGerenciando />
+ </Grid>
+ </Grid>
+
+
+ </Secao>
+ </div>
+ );
}
const StyledBreadCrumbs = styled(Breadcrumbs)`
- display : flex;
- justify-content : flex-start;
- span {
- color: ${props => props.contrast === "" ? "#a5a5a5" : "white"};
- }
- a {
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- }
+ display : flex;
+ justify-content : flex-start;
+ span {
+ color : #a5a5a5;
+ }
+ a {
+ color: #00bcd4;
+ text-decoration: none;
+ }
+
`
+
const BreadCrumbsDiv = styled.div`
- padding : 10px;
- display : flex;
+
+ padding : 10px;
+ display : flex;
`
const Principal = styled.div`
- .fixo {
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
- height: 40px;
- text-align: center;
- padding: 30px;
- margin-bottom: 30px;
-
- img {
- height: 50px;
- width: 50px;
- margin-right: 40px;
- vertical-align: middle;
- }
-
- span {
- font-size: 20px;
- color: ${props => props.contrast === "" ? "" : "white"};
- }
+ .fixo {
+
+ height: 40px;
+ text-align: center;
+ background-color: #fff;
+ padding: 30px;
+ margin-bottom: 30px;
+ color: #666;
+
+
+ img {
+ height: 50px;
+ width: 50px;
+ margin-right: 40px;
+ vertical-align: middle;
+
}
- .resultadosProcura {
- text-align: center;
- margin-block: 30px;
- padding-inline: 15px;
- color: ${props => props.contrast === "" ? "#666" : "white"};
- span {
- font-size: 24px;
- }
- .subtitulo {
- margin-top: 10px;
-
- span {
- font-size: 15px
- }
-
- a {
- font-size: 15px;
- padding: 0;
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- }
- }
+
+ span {
+ font-size: 20px;
+ vertical-align: ;
}
-`
+
-const TabsStyled = styled(Tabs)`
- color: ${props => props.contrast === "" ? "" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- .Mui-selected {
- background-color: ${props => props.contrast === "" ? "#e7e4e4" : "rgba(255,255,0,0.24)"};
+ }
+ .resultadosProcura {
+ text-align: center;
+ margin-block: 30px;
+ padding-inline: 15px;
+ color: #666;
+ span {
+ font-size: 24px;
}
+ .subtitulo {
+ margin-top: 10px;
+
+ span {
+ font-size: 15px
+ }
+
+ a {
+ font-size: 15px;
+ padding: 0;
+ color:#00bcd4;
+ text-decoration: none;
+ }
- .MuiTab-root{
- text-transform: none !important;
- max-width:100%
}
- text-align: center;
- width:100%
+ }
+
+`
+
+const TabsStyled = styled(Tabs)`
+
+ .Mui-selected {
+ background-color: #e7e4e4;
+ }
+
+ .MuiTab-root{
+ text-transform: none !important;
+ max-width:100%
+ }
+ text-align: center;
+ width:100%
`
const TabStyled = styled(Tab)`
- color: ${props => props.contrast === "" ? "" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- padding: 4px 15px !important;
- font-weight: 500;
- font-size: 14px !important;
- border-radius: 4px !important;
- text-align: center;
+
+ padding: 4px 15px !important;
+ font-weight: 500;
+ font-size: 14px !important;
+ border-radius: 4px !important;
+ text-align: center;
- &:hover {
- background-color: ${props => props.contrast === "" ? "#e7e4e4" : "rgba(255,255,0,0.24)"};
- }
+
+
+
+
+ &:hover {
+ background-color: #e7e4e4;
+ }
`
const Menu = styled.div`
- width: auto;
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
- color: ${props => props.contrast === "" ? "#666" : "white"};
- padding-block: 10px;
- box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"};
- margin-bottom:30px
-
- h4 {
- padding-inline: 15px;
- font-size: 18px;
- margin-block: 10px;
- font-weight: 500;
- line-height: 1.1;
- }
+ width: auto;
+ background-color: #fff;
+ color: #666;
+ padding-block: 10px;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ margin-bottom:30px
+
+
+ h4 {
+ padding-inline: 15px;
+ font-size: 18px;
+ margin-block: 10px;
+ font-weight: 500;
+ line-height: 1.1;
+ }
- .voltarInicio {
- padding: 4px 15px;
- font-size: 15px;
- text-align: center;
- a {
- font-size: 15px;
- padding: 0;
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- }
+ .voltarInicio {
+ padding: 4px 15px;
+ font-size: 15px;
+ text-align: center;
+ a {
+ font-size: 15px;
+ padding: 0;
+ color:#00bcd4;
+ text-decoration: none;
}
+ }
+
+ hr {
+ border: 0;
+ border-top: 1px solid #ccc;
+ margin-top: 20px;
+ margin-bottom: 20px;
+ }
+
+ .procurava {
+ padding: 4px 15px;
+ font-size: 15px;
+ text-align: center;
- hr {
- border: 0;
- border-top: 1px solid #ccc;
- margin-top: 20px;
- margin-bottom: 20px;
+ a {
+ font-size: 15px;
+ padding: 0;
+ color:#00bcd4;
+ text-decoration: none;
}
- .procurava {
- padding: 4px 15px;
- font-size: 15px;
- text-align: center;
-
- a {
- font-size: 15px;
- padding: 0;
- color:#00bcd4;
- text-decoration: none;
- }
-
- }
+ }
`
-
const Secao = styled.div`
- margin-inline: auto;
+ margin-inline: auto;
+
`
diff --git a/src/Pages/TabsHelp/TabResoursePub.js b/src/Pages/TabsHelp/TabResoursePub.js
index aa4f9dca..7ff00fa4 100644
--- a/src/Pages/TabsHelp/TabResoursePub.js
+++ b/src/Pages/TabsHelp/TabResoursePub.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, useContext } from 'react';
+import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import Tabs from '@material-ui/core/Tabs'
import Tab from '@material-ui/core/Tab';
@@ -29,12 +29,14 @@ import CardEncontrando from '../../Components/HelpCenter/Cards/CardEncontrando';
import CardParticipando from '../../Components/HelpCenter/Cards/CardParticipando';
import CardGerenciando from '../../Components/HelpCenter/Cards/CardGerenciando';
import { Link } from 'react-router-dom';
-import { Store } from '../../Store';
//Image Import
import { PublicandoRecursos } from "ImportImages.js";
export default function TabResoursePub(props) {
+
+ console.log(props)
+
const tabs = [
'Por que enviar um recurso?',
'Como publicar um recurso?',
@@ -43,7 +45,6 @@ export default function TabResoursePub(props) {
]
const [tabValue, setTabValue] = useState(props.location.state === "undefined" ? 0 : props.location.state);
- const { state } = useContext(Store)
const handleChangeTab = (e, newValue) => {
setTabValue(newValue)
@@ -52,12 +53,12 @@ export default function TabResoursePub(props) {
useEffect(() => { window.scrollTo(0, 0) }, [])
return (
- <div style={state.contrast === "" ? { backgroundColor: "#f4f4f4" } : { backgroundColor: "black" }}>
+ <div style={{ backgroundColor: "#f4f4f4" }}>
<link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet" />
<Secao>
<BreadCrumbsDiv>
- <StyledBreadCrumbs contrast={state.contrast}>
+ <StyledBreadCrumbs>
<Link to="/" >
Página Inicial
</Link>
@@ -72,21 +73,21 @@ export default function TabResoursePub(props) {
</BreadCrumbsDiv>
<Grid container justify="center">
<Grid item xs={12} md={10} >
- <Principal contrast={state.contrast}>
- <Menu contrast={state.contrast}>
+ <Principal>
+ <Menu>
<div className="fixo">
<img src={PublicandoRecursos} alt="Publicando Recursos" />
<span>{tabs[3]}</span>
</div>
- <TabsStyled contrast={state.contrast} orientation="vertical"
+ <TabsStyled orientation="vertical"
variant="scrollable"
value={tabValue}
onChange={handleChangeTab}
TabIndicatorProps={{ style: { display: "none" } }}
>
- <TabStyled contrast={state.contrast} label={tabs[0]}></TabStyled>
- <TabStyled contrast={state.contrast} label={tabs[1]}></TabStyled>
- <TabStyled contrast={state.contrast} label={tabs[2]}></TabStyled>
+ <TabStyled label={tabs[0]}></TabStyled>
+ <TabStyled label={tabs[1]}></TabStyled>
+ <TabStyled label={tabs[2]}></TabStyled>
</TabsStyled>
<br />
<div className="voltarInicio">
@@ -94,9 +95,9 @@ export default function TabResoursePub(props) {
</div>
</Menu>
- {tabValue === 0 && <Why contrast={state.contrast} title={tabs[0]} />}
- {tabValue === 1 && <How contrast={state.contrast} title={tabs[1]} />}
- {tabValue === 2 && <Which contrast={state.contrast} title={tabs[2]} />}
+ {tabValue === 0 && <Why title={tabs[0]} />}
+ {tabValue === 1 && <How title={tabs[1]} />}
+ {tabValue === 2 && <Which title={tabs[2]} />}
<div className="resultadosProcura">
<span>Não era bem o que você procurava?</span>
<div className="subtitulo">
@@ -109,14 +110,15 @@ export default function TabResoursePub(props) {
</Grid>
<Grid style={{ paddingBottom: "50px" }} container justify={"center"}>
<Grid item xs={12} md={3} style={{ margin: 5 }}>
- <CardEncontrando contrast={state.contrast} />
+ <CardEncontrando />
</Grid>
<Grid item xs={12} md={3} style={{ margin: 5 }}>
- <CardParticipando contrast={state.contrast} />
+ <CardParticipando />
</Grid>
<Grid item xs={12} md={3} style={{ margin: 5 }}>
- <CardGerenciando contrast={state.contrast} />
+ <CardGerenciando />
</Grid>
+
</Grid>
@@ -128,11 +130,11 @@ const StyledBreadCrumbs = styled(Breadcrumbs)`
display : flex;
justify-content : flex-start;
span {
- color: ${props => props.contrast === "" ? "#a5a5a5" : "white"};
+ color : #a5a5a5;
}
a {
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ color: #00bcd4;
+ text-decoration: none;
}
`
@@ -146,11 +148,14 @@ const BreadCrumbsDiv = styled.div`
const Principal = styled.div`
.fixo {
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+
height: 40px;
text-align: center;
+ background-color: #fff;
padding: 30px;
margin-bottom: 30px;
+ color: #666;
+
img {
height: 50px;
@@ -162,7 +167,7 @@ const Principal = styled.div`
span {
font-size: 20px;
- color: ${props => props.contrast === "" ? "" : "white"};
+ vertical-align: ;
}
@@ -172,7 +177,7 @@ const Principal = styled.div`
text-align: center;
margin-block: 30px;
padding-inline: 15px;
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color: #666;
span {
font-size: 24px;
}
@@ -186,8 +191,8 @@ const Principal = styled.div`
a {
font-size: 15px;
padding: 0;
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ color:#00bcd4;
+ text-decoration: none;
}
}
@@ -196,10 +201,9 @@ const Principal = styled.div`
`
const TabsStyled = styled(Tabs)`
- color: ${props => props.contrast === "" ? "" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+
.Mui-selected {
- background-color: ${props => props.contrast === "" ? "#e7e4e4" : "rgba(255,255,0,0.24)"};
+ background-color: #e7e4e4;
}
.MuiTab-root{
@@ -212,26 +216,29 @@ const TabsStyled = styled(Tabs)`
`
const TabStyled = styled(Tab)`
- color: ${props => props.contrast === "" ? "" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+
padding: 4px 15px !important;
font-weight: 500;
font-size: 14px !important;
border-radius: 4px !important;
text-align: center;
+
+
+
+
&:hover {
- background-color: ${props => props.contrast === "" ? "#e7e4e4" : "rgba(255,255,0,0.24)"};
+ background-color: #e7e4e4;
}
`
const Menu = styled.div`
width: auto;
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ background-color: #fff;
+ color: #666;
padding-block: 10px;
- box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"};
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
margin-bottom:30px
@@ -250,8 +257,8 @@ const Menu = styled.div`
a {
font-size: 15px;
padding: 0;
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ color:#00bcd4;
+ text-decoration: none;
}
}
diff --git a/src/Pages/TermsPage.js b/src/Pages/TermsPage.js
index d2db18c4..aaa58528 100644
--- a/src/Pages/TermsPage.js
+++ b/src/Pages/TermsPage.js
@@ -15,9 +15,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, useContext } from 'react';
+import React, {useState, useContext} from 'react';
import styled from 'styled-components'
-import { device } from '../Components/device.js'
+import {device} from '../Components/device.js'
import { Store } from '../Store.js';
import { Button } from '@material-ui/core';
import Card from '@material-ui/core/Card';
@@ -25,11 +25,12 @@ import LabeledCheckbox from "../Components/Checkbox.js"
import TermsPageContent from '../Components/TermsPageContent.js'
import AppBar from '@material-ui/core/AppBar';
import { makeStyles } from '@material-ui/core/styles';
-import { Link } from 'react-router-dom'
+import {Link} from 'react-router-dom'
const CardStyled = styled(Card)`
box-sizing : border-box;
background-color : white;
max-width: 1700px;
+ padding-top: 52px;
@media ${device.mobileM} {
width : 100%;
height : 100%;
@@ -56,7 +57,7 @@ const StyledSpanContinuar = styled.span`
const Background = styled.div`
padding-top : 40px;
- background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
+ background-color : #f4f4f4;
color : #666;
padding-bottom : 40px;
@@ -77,76 +78,76 @@ const Background = styled.div`
}
`
-export default function TermsContainer(props) {
- // eslint-disable-next-line
- const { state, dispatch } = useContext(Store)
- // eslint-disable-next-line
- const [checked, setChecked] = useState(false);
- const [unavailableButton, setButtonAvailability] = useState(true);
- const classes = useStyles()
-
- const handleChecked = e => {
- setChecked(e.target.checked);
- setButtonAvailability(!unavailableButton);
- }
+export default function TermsContainer (props) {
+ // eslint-disable-next-line
+ const {state, dispatch} = useContext(Store)
+ // eslint-disable-next-line
+ const [checked, setChecked] = useState(false);
+ const [unavailableButton, setButtonAvailability] = useState(true);
+ const classes = useStyles()
+
+ const handleChecked = e => {
+ setChecked(e.target.checked);
+ setButtonAvailability(!unavailableButton);
+ }
+
+ const handleAgreement = () => {
+
+ dispatch( {
+ type: 'USER_AGREED_TO_PUBLICATION_TERMS',
+ userAgreement: true
+ })
- const handleAgreement = () => {
- dispatch({
- type: 'USER_AGREED_TO_PUBLICATION_TERMS',
- userAgreement: true
- })
-
- if (props.location.state) {
- props.history.push('/professor')
- } else {
- props.history.push('/permission')
- window.scrollTo(0, 0)
+ if (props.location.state) {
+ props.history.push('/professor')
+ }else {
+ props.history.push('/permission')
+ window.scrollTo(0, 0)
+ }
}
- }
- return (
- <Background contrast={state.contrast}>
- <div className="container">
- <CardStyled contrast={state.contrast} variant="outlined">
- <TermsPageContent contrast={state.contrast} />
- </CardStyled>
- </div>
- <AppBar position="fixed" color="primary" className={state.contrast === "" ? classes.lightAppBar : classes.darkAppBar}>
- <StyledAppBarContainer>
- <div className="container">
- <div style={{ fontSize: "14px" }}>
- <LabeledCheckbox contrast={state.contrast} label={<Styledspan style={state.contrast === "" ? { color: "#666", fontWeight: "600" } : { color: "yellow", fontWeight: "600", textDecoration: "underline" }}>Li e concordo com os termos de uso da Plataforma Integrada de RED do MEC</Styledspan>} handleChange={handleChecked} />
- </div>
- <div className="botoes">
- <Button disabled={unavailableButton}
- style={unavailableButton ? state.contrast === "" ? { backgroundColor: "#e9e9e9" } : {border: "1px solid white"} : state.contrast === "" ? { backgroundColor: "#00bcd4" } : { backgroundColor: "black", border: "1px solid white" }}
+ return (
+ <Background>
+ <div className="container">
+ <CardStyled variant="outlined">
+ <TermsPageContent/>
+ </CardStyled>
+ </div>
+ <AppBar position="fixed" color="primary" className={classes.appBar}>
+ <StyledAppBarContainer>
+ <div className="container">
+ <div style={{fontSize:"14px"}}>
+ <LabeledCheckbox label={<Styledspan style={{color : "#666", fontWeight : "600"}}>Li e concordo com os termos de uso da Plataforma Integrada de RED do MEC</Styledspan>} handleChange={handleChecked}/>
+ </div>
+ <div className="botoes">
+ <Button disabled = {unavailableButton}
+ style={ unavailableButton ? {backgroundColor:"#e9e9e9"} : {backgroundColor:"#00bcd4"}}
onClick={handleAgreement}
- >
- <StyledSpanContinuar style={unavailableButton ? state.contrast === "" ? { color: "#666666" } : { color: "white" } : state.contrast === "" ? {} : { color: "yellow", textDecoration: "underline" }}>
- Continuar
- </StyledSpanContinuar>
- </Button>
- <Link to="/">
- <GrayButton contrast={state.contrast}>
- Cancelar
- </GrayButton>
- </Link>
+ >
+ <StyledSpanContinuar style={unavailableButton ? {color:"#666666"} : {}}>
+ Continuar
+ </StyledSpanContinuar>
+ </Button>
+ <Link to="/">
+ <GrayButton>
+ Cancelar
+ </GrayButton>
+ </Link>
+ </div>
</div>
- </div>
- </StyledAppBarContainer>
- </AppBar>
- </Background>
- )
+ </StyledAppBarContainer>
+ </AppBar>
+ </Background>
+ )
}
const GrayButton = styled(Button)`
&:hover {
- background-color: ${props => props.contrast === "" ? "rgba(158,158,158,0.2) !important" : "rgba(255,255,0,0.24) !important"};
+ background-color : rgba(158,158,158,0.2) !important;
}
height : 36px !important;
font-weight : 600 !important;
- color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
- text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
+ color : #666 !important;
background-color: transparent;
min-width : 88px !important;
height : 36px !important;
@@ -170,20 +171,13 @@ const GrayButton = styled(Button)`
`
const useStyles = makeStyles((theme) => ({
- lightAppBar: {
- top: 'auto',
- bottom: 0,
- height: '100px',
- backgroundColor: '#fff',
- boxShadow: '0 1px 3px rgba(0,0,0,.52),0 1px 2px rgba(0,0,0,.24)'
- },
- darkAppBar: {
- top: 'auto',
- bottom: 0,
- height: '100px',
- backgroundColor: 'black',
- boxShadow: '0 1px 3px rgba(0,0,0,.52),0 1px 2px rgba(0,0,0,.24)'
- },
+ appBar: {
+ top: 'auto',
+ bottom: 0,
+ height : '100px',
+ backgroundColor : '#fff',
+ boxShadow : '0 1px 3px rgba(0,0,0,.52),0 1px 2px rgba(0,0,0,.24)'
+ },
}));
@@ -222,3 +216,26 @@ const StyledAppBarContainer = styled.div`
}
}
`
+
+// {/*<CardActions style={{justifyContent:"center", padding:"25px", borderTop : "2px solid #dadada"}}>
+// <div>
+// <div style={{fontSize:"14px"}}>
+// <LabeledCheckbox label={<Styledspan>Li e concordo com os termos de uso da Plataforma Integrada de RED do MEC</Styledspan>} handleChange={handleChecked}/>
+// <div style={{marginLeft:"1em", paddingLeft:"16px", color:"#a0a0a0", justifyContent:"center",display:"flex"}}>
+// <Button disabled = {unavailableButton}
+// style={ unavailableButton ? {backgroundColor:"#e9e9e9"} : {backgroundColor:"#00bcd4"}}
+// onClick={handleAgreement}
+// >
+// <StyledSpanContinuar style={unavailableButton ? {color:"#666666"} : {}}>
+// Continuar
+// </StyledSpanContinuar>
+// </Button>
+// <Button style={{marginLeft:"45px", backgroundColor:"#e9e9e9"}}>
+// <Styledspan style={{color:"rgb(102, 102, 102)"}}>
+// Cancelar
+// </Styledspan>
+// </Button>
+// </div>
+// </div>
+// </div>
+// </CardActions>*/}
diff --git a/src/Pages/UploadPage.js b/src/Pages/UploadPage.js
index aa1f6d1b..848b3b5b 100644
--- a/src/Pages/UploadPage.js
+++ b/src/Pages/UploadPage.js
@@ -16,23 +16,23 @@ 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, useContext } from 'react'
+import React, {useState, useEffect, useContext} from 'react'
import Grid from '@material-ui/core/Grid';
import UploadFileWrapper from '../Components/UploadPageComponents/UploadFileWrapper.js'
-import { Store } from '../Store.js'
-import { InfoBox } from '../Components/UploadPageComponents/StyledComponents.js'
+import {Store} from '../Store.js'
+import {InfoBox} from '../Components/UploadPageComponents/StyledComponents.js'
import Stepper from '../Components/UploadPageComponents/Stepper.js'
-import { postRequest } from '../Components/HelperFunctions/getAxiosConfig.js'
+import {postRequest} from '../Components/HelperFunctions/getAxiosConfig.js'
import PartOne from '../Components/UploadPageComponents/PartOne.js'
import PartTwo from '../Components/UploadPageComponents/PartTwo.js'
import PartThree from '../Components/UploadPageComponents/PartThree.js'
import ModalLearningObjectPublished from '../Components/ModalLearningObjectPublished.js'
-import { Background } from '../Components/UploadPageComponents/StyledComponents'
+import {Background} from '../Components/UploadPageComponents/StyledComponents'
import LoadingSpinner from '../Components/LoadingSpinner.js'
-import { Redirect } from 'react-router-dom'
+import {Redirect} from 'react-router-dom'
-export default function UploadPage(props) {
- const { state } = useContext(Store)
+export default function UploadPage (props) {
+ const {state} = useContext(Store)
// {/*Object : link or file uploaded*/}
// eslint-disable-next-line
@@ -40,27 +40,27 @@ export default function UploadPage(props) {
const [loading, toggleLoading] = useState(true)
const [draft, setDraft] = useState({})
- function handleSuccessfulGet(data) {
+ function handleSuccessfulGet (data) {
setDraft(data)
toggleLoading(false)
}
- useEffect(() => {
+ useEffect( () => {
if (state.currentUser.id !== "") {
- const url = `/learning_objects/`
+ const url = `/learning_objects/`
- let payload = {}
+ let payload = {}
- postRequest(url, payload, handleSuccessfulGet, (error) => { console.log(error) })
+ postRequest(url, payload, handleSuccessfulGet, (error) => {console.log(error)})
}
}, [])
const [activeStep, setActiveStep] = React.useState(0);
- const stepperControl = (increment) => { setActiveStep(activeStep + increment) }
+ const stepperControl=(increment)=>{setActiveStep(activeStep + increment)}
const [objectSubmitted, toggleModal] = useState(false)
- const handleModal = (value) => { toggleModal(value) }
+ const handleModal = (value) => {toggleModal(value)}
const handlePost = () => {
if (state.currentUser.id !== "") {
@@ -69,8 +69,8 @@ export default function UploadPage(props) {
let payload = {}
postRequest(url, payload,
- (data) => { handleModal(true) },
- (error) => { console.log(error) }
+ (data) => {handleModal(true)},
+ (error) => {console.log(error)}
)
}
@@ -81,14 +81,14 @@ export default function UploadPage(props) {
const url = `/submissions/`
let payload = {
- "submission": {
- "learning_object_id": draft.id
+ "submission" : {
+ "learning_object_id" : draft.id
}
}
postRequest(url, payload,
- (data) => { handleModal(true) },
- (error) => { console.log(error) }
+ (data) => {handleModal(true)},
+ (error) => {console.log(error)}
)
}
@@ -98,67 +98,64 @@ export default function UploadPage(props) {
<React.Fragment>
{
state.currentUser.id === '' &&
- <Redirect to="/" />
+ <Redirect to="/"/>
}
{
loading === true ?
(
- <div style={state.contrast === "" ? {} : { backgroundColor: "black" }}>
- <LoadingSpinner contrast={state.contrast} text={"CARREGANDO..."} />
- </div>
+ <LoadingSpinner text={"CARREGANDO..."}/>
)
:
(
<>
- <ModalLearningObjectPublished
- contrast={state.contrast}
- open={objectSubmitted}
- handleClose={() => { toggleModal(false); props.history.push('/') }}
- draftID={draft.id}
+ <ModalLearningObjectPublished
+ open={objectSubmitted}
+ handleClose={() => {toggleModal(false); props.history.push('/')}}
+ draftID={draft.id}
/>
- {
- activeStep === 2 ?
- (
- <PartThree contrast={state.contrast} draftID={draft.id} stepperControl={stepperControl} activeStep={activeStep} handlePost={handlePost} handleSubmit={handleSubmit} />
- )
- :
- (
- <Background contrast={state.contrast}>
- <div className="container">
- <Grid container spacing={2}>
- <Grid item md={4} xs={12}>
- <UploadFileWrapper contrast={state.contrast} draftID={draft.id} />
- </Grid>
- <Grid item md={8} xs={12}>
- <InfoBox contrast={state.contrast}>
- <div className="cabecalho">
- <h2>Informações sobre o Recurso</h2>
- <div className="feedback-upload">
- <Stepper contrast={state.contrast} activeStep={activeStep} />
- </div>
+ {
+ activeStep === 2 ?
+ (
+ <PartThree draftID={draft.id} stepperControl={stepperControl} activeStep={activeStep} handlePost={handlePost} handleSubmit={handleSubmit}/>
+ )
+ :
+ (
+ <Background>
+ <div className="container">
+ <Grid container spacing={2}>
+ <Grid item md={4} xs={12}>
+ <UploadFileWrapper draftID={draft.id}/>
+ </Grid>
+ <Grid item md={8} xs={12}>
+ <InfoBox>
+ <div className="cabecalho">
+ <h2>Informações sobre o Recurso</h2>
+ <div className="feedback-upload">
+ <Stepper activeStep={activeStep}/>
</div>
- {
- activeStep === 0 &&
- <Grid container style={{ paddingLeft: "15px", paddingRight: "15px" }}>
- <PartOne draftID={draft.id} stepperControl={stepperControl} contrast={state.contrast} />
- </Grid>
- }
- {
- activeStep === 1 &&
- <Grid container style={{ paddingLeft: "15px", paddingRight: "15px" }}>
- <PartTwo draftID={draft.id} stepperControl={stepperControl} contrast={state.contrast} />
- </Grid>
- }
- </InfoBox>
- </Grid>
+ </div>
+ {
+ activeStep === 0 &&
+ <Grid container style={{paddingLeft : "15px", paddingRight : "15px"}}>
+ <PartOne draftID={draft.id} stepperControl={stepperControl}/>
+ </Grid>
+ }
+ {
+ activeStep === 1 &&
+ <Grid container style={{paddingLeft : "15px", paddingRight : "15px"}}>
+ <PartTwo draftID={draft.id} stepperControl={stepperControl}/>
+ </Grid>
+ }
+ </InfoBox>
</Grid>
- </div>
- </Background>
- )
- }
+ </Grid>
+ </div>
+ </Background>
+ )
+ }
</>
)
- }
- </React.Fragment>
- )
+ }
+ </React.Fragment>
+)
}
diff --git a/src/Pages/UserPage.js b/src/Pages/UserPage.js
index 21d4eb73..2688500e 100644
--- a/src/Pages/UserPage.js
+++ b/src/Pages/UserPage.js
@@ -17,6 +17,7 @@ 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, useEffect } from "react";
+import styled from "styled-components";
import CustomizedBreadcrumbs from "../Components/TabPanels/Breadcrumbs.js";
import { Store } from "../Store.js";
import Tab from "@material-ui/core/Tab";
@@ -29,14 +30,15 @@ import TabPanelRede from "../Components/TabPanels/UserPageTabs/PanelRede.js";
import TabPanelCuradoria from "../Components/TabPanels/UserPageTabs/PanelCuradoria.js";
import Grid from "@material-ui/core/Grid";
import {
- HeaderContainer,
- UserProfileContainer,
- CheckTeacherDiv,
- StyledTabs,
- RodapeDiv,
- NavBarContentContainer,
- BackgroundDiv,
+ HeaderContainer,
+ UserProfileContainer,
+ CheckTeacherDiv,
+ StyledTabs,
+ RodapeDiv,
+ NavBarContentContainer,
+ BackgroundDiv,
} from "../Components/TabPanels/StyledComponents.js";
+import CircularProgress from "@material-ui/core/CircularProgress";
import Cover from "../Components/UserPageComponents/Cover.js";
import ProfileAvatar from "../Components/UserPageComponents/Avatar.js";
import UserInfo from "../Components/UserPageComponents/UserInfo.js";
@@ -44,201 +46,213 @@ import EditProfileButton from "../Components/UserPageComponents/EditProfileButto
import SubmitterStatus from "../Components/UserPageComponents/SubmitterStatus.js";
import { getRequest } from "../Components/HelperFunctions/getAxiosConfig.js";
import Typography from "@material-ui/core/Typography";
-import LoadingSpinner from '../Components/LoadingSpinner';
export default function UserPage(props) {
- const { state, dispatch } = useContext(Store);
- const id = state.currentUser.id;
-
- const [follows, setFollows] = useState(0);
- const [following, setFollowing] = useState(0);
- const [loading, setLoading] = useState(true);
- const [tabValue, setTabValue] = useState(Number(props.location.state) || 0);
- const [tabs, setTabs] = useState([
+ const { state, dispatch } = useContext(Store);
+ const id = state.currentUser.id;
+
+ const [follows, setFollows] = useState(0);
+ const [following, setFollowing] = useState(0);
+ const [loading, setLoading] = useState(false);
+ const [tabValue, setTabValue] = useState(Number(props.location.state) || 0);
+ const [tabs, setTabs] = useState([
+ "Atividades",
+ "Meus Recursos",
+ "Favoritos",
+ "Coleções",
+ "Rede",
+ ]);
+ const handleChangeTab = (event, newValue) => {
+ setTabValue(newValue);
+ };
+
+ function handleSuccessfulGet(data) {
+ console.log(data);
+ dispatch({
+ type: "GET_USER",
+ user: data,
+ });
+
+ setFollows(data.follows_count);
+
+ if (data.role_ids.includes(4)) {
+ setTabs([
"Atividades",
"Meus Recursos",
"Favoritos",
"Coleções",
"Rede",
- ]);
- const handleChangeTab = (event, newValue) => {
- setTabValue(newValue);
- };
-
- function handleSuccessfulGet(data) {
- dispatch({
- type: "GET_USER",
- user: data,
- });
-
- setFollows(data.follows_count);
-
- if (data.role_ids.includes(4)) {
- setTabs([
- "Atividades",
- "Meus Recursos",
- "Favoritos",
- "Coleções",
- "Rede",
- "Curadoria",
- ]);
- }
+ "Curadoria",
+ ]);
}
+ }
+
+ function handleSuccesGetFollowing(data) {
+ setFollowing(data.length);
+ setLoading(false);
+ }
- function handleSuccesGetFollowing(data) {
- setFollowing(data.length);
+ useEffect(() => {
+ if (id !== "") {
+ const url = `/users/${id}`;
+ const url2 = `/users/${id}/following/User`;
+ setLoading(true);
+ getRequest(url, handleSuccessfulGet, (error) => {
+ console.log(error);
+ });
+ getRequest(url2, handleSuccesGetFollowing, (error) => {
+ console.log(error);
+ });
}
+ }, []);
- useEffect(() => {
- setLoading(true);
- if (id !== "") {
- const url = `/users/${id}`;
- const url2 = `/users/${id}/following/User`;
- getRequest(url, handleSuccessfulGet, (error) => {
- console.log(error);
- });
- getRequest(url2, handleSuccesGetFollowing, (error) => {
- console.log(error);
- });
- }
- setLoading(false);
- }, []);
-
- useEffect(() => {
- setTabValue(Number(props.location.state) || 0)
- }, [window.history.state.key])
-
- const redirect = () => {
- props.history.push("/");
- };
-
- const [modalOpen, toggleModal] = useState(false);
- const WIDTH = window.innerWidth;
-
- return (
- <div>
- <link
- href="https://fonts.googleapis.com/css?family=Roboto:100,400,500&display=swap"
- rel="stylesheet"
- />
- {
- loading ?
- (
- <LoadingSpinner contrast={state.contrast} text="Carregando..." />
- )
- :
- (
- state.userIsLoggedIn ?
- (
- <React.Fragment>
- <ModalAlterarAvatar
- contrast={state.contrast}
- open={modalOpen}
- handleClose={() => {
- toggleModal(false);
- }}
- userAvatar={state.currentUser.avatar}
- />
- <BackgroundDiv contrast={state.contrast}>
- <CustomizedBreadcrumbs contrast={state.contrast} values={["Minha área", tabs[tabValue]]} />
- <Grid container spacing={2}>
- <Grid item xs={12}>
- <div style={{ padding: "10px 0 8px 0" }}>
- <UserProfileContainer>
- <HeaderContainer contrast={state.contrast}>
- <Cover id={id} contrast={state.contrast}/>
- <ProfileAvatar id={id} contrast={state.contrast}/>
- {WIDTH <= 600 ? null : <UserInfo />}
- <EditProfileButton contrast={state.contrast} />
- </HeaderContainer>
- {WIDTH <= 600 ? (
- <Grid
- style={state.contrast === "" ? { marginTop: "4em" } : { paddingTop: "4em", backgroundColor: "black", borderLeft: "1px solid white", borderRight: "1px solid white", }}
- container
- justify="center"
- alignItems="center"
- direction="column"
- >
- <Grid item>
- <Typography
- variant="h4"
- gutterBottom
- style={state.contrast === "" ? { textAlign: "center" } : { color: "white", textAlign: "center" }}
- >
- {state.currentUser.name}
- </Typography>
- </Grid>
- <Grid
- style={{
- marginTop: "0.5em",
- marginBottom: "0.5em",
- borderTop: "1px solid white",
- borderBottom: "1px solid white",
- }}
- container
- spacing={4}
- justify="center"
- alignItems="center"
- direction="row"
- >
- <Grid item>
- <Typography style={state.contrast === "" ? {} : { color: "white" }} variant="h6" onClick={(e) => { handleChangeTab(e, 4) }}>
- {follows} seguidores
- </Typography>
- </Grid>
- <Grid item>
- <Typography style={state.contrast === "" ? {} : { color: "white" }} variant="h6" onClick={(e) => { handleChangeTab(e, 4) }}>
- {following} seguindo
- </Typography>
- </Grid>
- </Grid>
- </Grid>
- ) : (
- <CheckTeacherDiv contrast={state.contrast}>
- <SubmitterStatus />
- </CheckTeacherDiv>
- )}
- <RodapeDiv contrast={state.contrast}>
- <NavBarContentContainer contrast={state.contrast}>
- <StyledTabs
- contrast={state.contrast}
- value={tabValue}
- onChange={handleChangeTab}
- indicatorColor="primary"
- textColor="primary"
- variant="scrollable"
- scrollButtons="on"
- TabIndicatorProps={{ style: state.contrast === "" ? { background: "#00bcd4" } : { background: "yellow" } }}
- >
- {tabs.map((tab) => (
- <Tab contrast={state.contrast} label={tab} key={tab} />
- ))}
- </StyledTabs>
- </NavBarContentContainer>
- </RodapeDiv>
- </UserProfileContainer>
- </div>
- </Grid>
- <Grid item xs={12}>
- {tabValue === 0 && <TabPanelAtividades id={id} contrast={state.contrast} />}
- {tabValue === 1 && <TabPanelMeusRecursos id={id} contrast={state.contrast} />}
- {tabValue === 2 && <TabPanelFavoritos id={id} contrast={state.contrast} />}
- {tabValue === 3 && <TabPanelColecoes id={id} contrast={state.contrast} />}
- {tabValue === 4 && <TabPanelRede id={id} contrast={state.contrast} />}
- {tabValue === 5 && <TabPanelCuradoria id={id} contrast={state.contrast} />}
- </Grid>
- </Grid>
- </BackgroundDiv>
- </React.Fragment>
- )
- :
- (
- <>
- {redirect()}
- </>
- )
- )
- }
- </div>
- )
+ useEffect(() => {
+ setTabValue(Number(props.location.state) || 0)
+ }, [window.history.state.key])
+
+ const redirect = () => {
+ props.history.push("/");
+ };
+
+ const [modalOpen, toggleModal] = useState(false);
+ const WIDTH = window.innerWidth;
+
+ return (
+ <div>
+ <link
+ href="https://fonts.googleapis.com/css?family=Roboto:100,400,500&display=swap"
+ rel="stylesheet"
+ />
+ {
+ state.userIsLoggedIn ? (
+ [
+ <React.Fragment>
+ <ModalAlterarAvatar
+ open={modalOpen}
+ handleClose={() => {
+ toggleModal(false);
+ }}
+ userAvatar={state.currentUser.avatar}
+ />
+
+ <BackgroundDiv>
+ <CustomizedBreadcrumbs values={["Minha área", tabs[tabValue]]} />
+ <Grid container spacing={2}>
+ <Grid item xs={12}>
+ <div style={{ padding: "10px 0 8px 0" }}>
+ <UserProfileContainer>
+ <HeaderContainer>
+ <Cover id={id} />
+ <ProfileAvatar id={id} />
+ {WIDTH <= 600 ? null : <UserInfo />}
+ <EditProfileButton />
+ </HeaderContainer>
+ {WIDTH <= 600 ? (
+ <Grid
+ style={{ marginTop: "4em" }}
+ container
+ justify="center"
+ alignItems="center"
+ direction="column"
+ >
+ <Grid item>
+ <Typography
+ variant="h4"
+ gutterBottom
+ style={{ textAlign: "center" }}
+ >
+ {state.currentUser.name}
+ </Typography>
+ </Grid>
+ <Grid
+ style={{
+ marginTop: "0.5em",
+ marginBottom: "0.5em",
+ borderTop: "0.5px solid #eee",
+ borderBottom: "0.5px solid #eee",
+ }}
+ container
+ spacing={4}
+ justify="center"
+ alignItems="center"
+ direction="row"
+ >
+ <Grid item>
+ <Typography variant="h6" onClick={(e) => { handleChangeTab(e, 4) }}>
+ {loading ? (
+ <CircularProgress size={20} />
+ ) : (
+ `${follows} seguidores`
+ )}
+ </Typography>
+ </Grid>
+ <Grid item>
+ <Typography variant="h6" onClick={(e) => { handleChangeTab(e, 4) }}>
+ {loading ? (
+ <CircularProgress size={20} />
+ ) : (
+ `${following} seguindo`
+ )}
+ </Typography>
+ </Grid>
+ </Grid>
+ </Grid>
+ ) : (
+ <CheckTeacherDiv>
+ <SubmitterStatus />
+ </CheckTeacherDiv>
+ )}
+ <RodapeDiv>
+ <NavBarContentContainer>
+ <StyledTabs
+ value={tabValue}
+ onChange={handleChangeTab}
+ indicatorColor="primary"
+ textColor="primary"
+ variant="scrollable"
+ scrollButtons="on"
+ TabIndicatorProps={{
+ style: { background: "#00bcd4" },
+ }}
+ >
+ {tabs.map((tab) => (
+ <StyledTab label={tab} key={tab} />
+ ))}
+ </StyledTabs>
+ </NavBarContentContainer>
+ </RodapeDiv>
+ </UserProfileContainer>
+ </div>
+ </Grid>
+ <Grid item xs={12}>
+ {tabValue === 0 && <TabPanelAtividades id={id} />}
+ {tabValue === 1 && <TabPanelMeusRecursos id={id} />}
+ {tabValue === 2 && <TabPanelFavoritos id={id} />}
+ {tabValue === 3 && <TabPanelColecoes id={id} />}
+ {tabValue === 4 && <TabPanelRede id={id} />}
+ {tabValue === 5 && <TabPanelCuradoria id={id} />}
+ </Grid>
+ </Grid>
+ </BackgroundDiv>
+ </React.Fragment>
+ ]
+ )
+ :
+ (
+ <>
+ {redirect()}
+ </>
+ )
+ }
+ </div>
+ )
}
+
+const StyledTab = styled(Tab)`
+ .Mui-selected {
+ border-bottom-color: #00bcd4 !important;
+ }
+ .MuiTab-wrapper {
+ border-bottom-color: #00bcd4 !important;
+ }
+`
diff --git a/src/Pages/UserTerms.js b/src/Pages/UserTerms.js
index 2f6d9d9c..d1df2973 100644
--- a/src/Pages/UserTerms.js
+++ b/src/Pages/UserTerms.js
@@ -15,12 +15,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, { useEffect, useContext } from 'react';
+import React, { useEffect } from 'react';
import SimpleExpansionPanels from '../Components/ExpansionPanels'
import Grid from '@material-ui/core/Grid';
-import { StyledButton } from '../Components/ButtonAvaliarRecurso.js'
+import Modal from '../Components/Modal'
import styled from 'styled-components'
-import { Store } from '../Store'
/*Importação de imagens para a página*/
import CadeadoAberto from "../img/termos/AbertoG.svg";
@@ -33,247 +32,252 @@ import { Banner } from "ImportImages.js";
import { Aberto } from "ImportImages.js";
import { Fechado } from "ImportImages.js";
-export const BannerStyle = styled.div`
- background: ${props => props.contrast === "" ? "" : "black"};
- width: 100%;
- background-image: ${props => props.contrast === "" ? `url(${Banner})` : ""};
- background-size: cover;
- background-position: top center;
- height: 370px;
- vertical-align: "middle";
- border-bottom: ${props => props.contrast === "" ? "1px solid black" : "1px solid white"};
+const BannerStyle = styled.div`
+ width: 100%;
+ background-image: url(${Banner});
+ background-size: cover;
+ background-position: top center;
+ height: 370px;
+
+ verticalAlign: "middle"
`
const AColorido = styled.a`
- color: ${props => props.contrast === "" ? "#00BCD4" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+
+ color: #00BCD4;
+ text-decoration:none;
+
`
const ImagemSeçao2 = styled.div`
- padding: 0 5%;
- font-family: "Roboto", sans-serif;
- background: ${props => props.contrast === "" ? "" : "black"};
- color: ${props => props.contrast === "" ? "rgba(0,0,0,0.87)" : "white"};
-
- @media (min-width:750px) {
- background-image: url(${BuscaTermos});
- background-position: right;
- background-size: contain;
- background-repeat: no-repeat;
- }
-
- height: auto;
- align-items: center;
- padding-block: 30px;
- h3 {
- line-height: 1.1;
- text-align: center;
- @media (min-width: 1000px) {
- font-size: 30px;
- }
-
- @media (max-width: 1000px){
- font-size: 20px;
- }
- margin-top: 20px;
- margin-bottom: 10px;
- font-weight: 100;
- padding-bottom: 20px;
+ font-family: Roboto, sans-serif;
+
+ @media (min-width:1450px) {
+ background-image: url(${BuscaTermos});
+ background-position: right;
+ background-size: contain;
+ background-repeat: no-repeat;
+ }
+ color: rgba(0,0,0,0.87);
+ height: auto;
+ align-items: center;
+ padding-block: 30px;
+ h3 {
+ line-height: 1.1;
+ text-align: center;
+ @media (min-width: 1000px) {
+ font-size: 30px;
}
- p {
- line-height: 1.42857143;
- padding-top: 20px;
- font-size: 14px;
- text-align: justify;
- margin: 0 0 10px;
+ @media (max-width: 1000px){
+ font-size: 20px;
}
+ margin-top: 20px;
+ margin-bottom: 10px;
+ font-weight: 100;
+ padding-bottom: 20px;
+
+ }
+
+ p {
+ line-height: 1.42857143;
+ padding-top: 20px;
+ font-size: 14px;
+ text-align: justify;
+ margin: 0 0 10px;
+ }
+}
`
const Secao3 = styled.div`
- padding: 20px 5%;
- background: ${props => props.contrast === "" ? "#FF7F00" : "black"};
- @media (min-width: 1000px) {
- background-image: url(${CadeadoAberto}), url(${CadeadoFechado});
- background-repeat: no-repeat;
- background-position: bottom left, bottom right;
- background-position-y: 120%, 120%;
- height:340px;
- padding-block:30px;
+ background-color: #FF7F00;
+ @media (min-width: 1000px) {
+ background-image: url(${CadeadoAberto}), url(${CadeadoFechado});
+ background-repeat: no-repeat;
+ background-position: bottom left, bottom right;
+ background-position-y: 120%, 120%;
+ height:340px;
+ padding-block:30px;
+ }
+
+ color: #fff;
+
+ text-align: left;
+
+ h3 {
+ font-family: 'Pompiere', cursive;
+ font-size: 46px;
+ padding-bottom: 20px;
+ margin-top: 20px;
+ margin-bottom: 10px;
+ width: 100%;
+ text-align: center !important;
+ font-weight: 500 ;
+
+ }
+
+ .aberto {
+ background-image: url(${Aberto}), url(${Linha});
+ }
+ .fechado {
+ background-image: url(${Fechado}), url(${Linha});
+ }
+
+ .caixa {
+ background-repeat: no-repeat;
+ background-size: 70px 70px, auto auto;
+ background-position: top left;
+ background-position-x: 0, 35px;
+ padding-left: 90px;
+ .texto{
+ background-image: url(${Linha});
+ background-position: top left;
+ background-repeat: repeat-x;
+ background-size: auto auto;
+ span {
+ font-size: 26px;
+ }
+ p {
+ text-align: left;
+ font-size: 15px;
+ margin: 0 0 10px;
+ }
}
+ }
+`
- color: #fff;
+const Secao4 = styled.div`
+ font-size: 15px;
+ .texto {
text-align: left;
+ padding-top: 20px;
+ padding-bottom: 20px;
- h3 {
- font-family: 'Pompiere', cursive;
- font-size: 46px;
- padding-bottom: 20px;
- margin-top: 20px;
- margin-bottom: 10px;
- width: 100%;
- text-align: center !important;
- font-weight: 500 ;
-
- }
-
- .aberto {
- background-image: url(${Aberto}), url(${Linha});
- }
- .fechado {
- background-image: url(${Fechado}), url(${Linha});
+ a {
+ color:#00BCD4;
}
- .caixa {
- background-repeat: no-repeat;
- background-size: 70px 70px, auto auto;
- background-position: top left;
- background-position-x: 0, 35px;
- padding-left: 90px;
- .texto{
- background-image: url(${Linha});
- background-position: top left;
- background-repeat: repeat-x;
- background-size: auto auto;
- span {
- font-size: 26px;
- }
- p {
- text-align: left;
- font-size: 15px;
- margin: 0 0 10px;
- }
- }
+ p {
+ font-family: 'Roboto', Bold;
}
-`
-
-const Secao4 = styled.div`
- padding: 0 5%;
- font-size: 15px;
- background: ${props => props.contrast === "" ? "" : "black"};
-
- .texto {
- text-align: left;
- padding-top: 20px;
- padding-bottom: 20px;
- color: ${props => props.contrast === "" ? "rgba(0,0,0,0.87)" : "white"};
- a {
- color: ${props => props.contrast === "" ? "#00BCD4" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- }
-
- p {
- font-family: 'Roboto', Bold;
- color: ${props => props.contrast === "" ? "rgba(0,0,0,0.87)" : "white"};
- }
+ }
+ .titulo {
+ text-align: center;
+ color: #666666;
+ h3 {
+ font-size: 30px;
+ height: 22px;
+ padding-bottom: 20px;
+ margin-top: 20px;
+ margin-bottom: 10px;
+ font-weight: 500;
+ line-height: 1.1;
+ }
+ p {
+ height: 18px;
+ line-height: 1.42857143;
+ margin: 0 0 10px;
}
-
- .titulo {
- text-align: center;
- color: ${props => props.contrast === "" ? "#666" : "white"};
- h3 {
- font-size: 30px;
- height: 22px;
- padding-bottom: 20px;
- margin-top: 20px;
- margin-bottom: 10px;
- font-weight: 500;
- line-height: 1.1;
- }
- p {
- height: 18px;
- line-height: 1.42857143;
- margin: 0 0 10px;
- }
`
+
export default function UserTerms() {
- const { state } = useContext(Store)
- useEffect(() => {
- window.scrollTo(0, 0)
- }, [])
- return (
- <div style={{ color: "rgba(0,0,0,0.87" }} >
- <BannerStyle contrast={state.contrast}>
- <h2 style={{ width: "100%", textAlign: "center", marginTop: "0px", paddingTop: "6rem", marginBottom: "16px", fontSize: "52px", fontFamily: "'Pompiere', cursive", color: "#fff", fontWeight: "500" }}>TERMOS DE USO</h2>
- <div style={{ display: "flex", justifyContent: "center" }}>
- <StyledButton contrast={state.contrast} onClick={() => window.location.href='/termos-resumido'}>
- Se preferir, veja a versão resumida
- </StyledButton>
- </div>
- </BannerStyle>
-
- <ImagemSeçao2 contrast={state.contrast}>
- <Grid container>
- <Grid item xs={12} md={12}>
- <div>
- <h3><strong style={{ fontWeight: "700" }}>Plataforma Integrada de Recursos Educacionais Digitais,</strong><br />uma iniciativa do Ministério da Educação!</h3>
-
- <p>A <strong>Plataforma Integrada de RED do MEC</strong> é parte do processo de implementação do Compromisso 6 do <AColorido contrast={state.contrast} href="http://www.governoaberto.cgu.gov.br/noticias/2017/3o-plano-de-acao-nacional-na-parceria-para-governo-aberto" target="_blank">3º Plano de Ação da Parceria Governo Aberto</AColorido> (OGP-Brasil), que tem por objetivo “incorporar na polÃtica educacional o potencial da cultura digital, de modo a fomentar a autonomia para uso, reuso e adaptação de recursos educacionais digitais, valorizando a pluralidade e a diversidade da educação brasileiraâ€.
- </p>
- <p>Seguindo o compromisso, a <strong>Plataforma Integrada de RED do MEC</strong> visa fortalecer a distribuição de recursos educacionais digitais para o ensino básico brasileiro. Há preferência pela disponibilização de Recursos Educacionais Abertos (REA), ou seja, recursos que “se situem no domiÌnio puÌblico ou que tenham sido divulgados sob licença aberta que permita acesso, uso, adaptação e redistribuição gratuita por terceiros, mediante nenhuma restrição ou poucas restrições.†<AColorido contrast={state.contrast} href="http://www.unesco.org/new/fileadmin/MULTIMEDIA/HQ/CI/CI/pdf/Events/Portuguese_Paris_OER_Declaration.pdf" target="_blank">(Declaração REA de Paris, 2012)</AColorido>.
- </p>
- </div>
- </Grid>
- </Grid>
- </ImagemSeçao2>
-
- <Secao3 contrast={state.contrast}>
- <Grid container >
- <h3>Para melhor compreensão, podemos dividir os recursos em dois tipos:</h3>
- <Grid item xs={12} md={6} >
- <div class="caixa aberto">
- <div class="texto">
- <span>Abertos</span>
- <p>De acordo com a Declaração de Paris, são recursos que, no mÃnimo, têm uma licença de uso mais flexÃvel, que garante livre redistribuição. Adicionalmente, um recurso aberto deve utilizar um formato aberto, um formato de arquivo que permite a fácil edição por terceiros. Nenhum controle sobre o acesso (como cadastro e senha) deve existir para acesso a recursos abertos. Em sua maioria, são recursos gratuitos.</p>
- </div>
- </div>
- </Grid>
- <Grid item xs={12} md={6}>
- <div class="caixa fechado">
- <div class="texto">
- <span>Fechados</span>
- <p>São recursos que criam restrições no seu acesso, uso ou reuso. Como exemplo, podemos mencionar recursos que só são acessÃveis mediante cadastro ou que têm licenças restritivas (como “todos os direitos reservadosâ€, o sÃmbolo ©). Podem ser gratuitos ou pagos.</p>
- </div>
- </div>
- </Grid>
- </Grid>
- </Secao3>
-
- <Grid container style={state.contrast === "" ? {} : { backgroundColor: "black" }}>
- <Grid item xs={12} md={12}>
- <Secao4 contrast={state.contrast}>
- <div class="texto" style={{ paddingTop: "70px" }}>
- <p>O <a href="http://www.planalto.gov.br/ccivil_03/_ato2011-2014/2014/lei/l13005.htm" rel="noreferrer" target="_blank">Plano Nacional de Educação</a> (2014-2024) enfatiza nas metas 5 e 7 a importância dos recursos educacionais abertos para fomentar a qualidade da educação baÌsica. A <a href="http://portal.mec.gov.br/index.php?option=com_docman&view=download&alias=35541-res-cne-ces-001-14032016-pdf&category_slug=marco-2016-pdf&Itemid=30192" rel="noreferrer" target="_blank">Resolução CNE/CES nº 1</a>, de 11 de março de 2016, também destaca a importância dos recursos educacionais abertos para as instituições de educação superior e para as atividades de educação a distância.</p>
- </div>
- <div class="titulo">
- <h3>TERMOS DE USO</h3>
- <p>InÃcio da vigência: agosto de 2017</p>
- </div>
- <div class="texto" style={{ paddingBottom: "40px" }}>
- <p>Aqui estão os “Termos de Uso†da <strong>Plataforma Integrada de RED do MEC</strong>, isto é, as regras de funcionamento da Plataforma e seus serviços, e o que se espera de seus usuários. Por “usuárioâ€, entende-se qualquer pessoa que acesse o domÃnio portal.mec.gov.br, tanto para pesquisa (acesso) como para a inclusão de dados e informações (participação) mediante cadastro.</p>
- <p>Fazem parte dos Termos de Uso as polÃticas de responsabilidade, de privacidade e confidencialidade, a licença de uso do conteúdo e as informações sobre como reportar violações.</p>
- <p>Ao utilizar a <strong>Plataforma Integrada de RED do MEC</strong>, o usuário aceita todas as condições aqui estabelecidas. O uso da <strong>Plataforma Integrada de RED do MEC</strong> implica aceite das condições aqui elencadas.</p>
- <p>Por “serviçoâ€, entende-se qualquer funcionalidade ou ferramenta que permita a interatividade com o usuário, como, por exemplo, usuário subir um recurso, postar um comentário, criar uma coleção ou enviar uma mensagem.</p>
- <p>A aceitação destes "Termos de Uso" é indispensável à utilização da <strong>Plataforma Integrada de RED do MEC</strong>. Todos os usuários deverão ler, certificar-se de tê-los entendido e aceitar todas as condições neles estabelecidas. Dessa forma, deve ficar claro que a utilização desta "<strong>Plataforma Integrada de RED do MEC</strong>" implica aceitação completa deste documento intitulado Termos de Uso. Caso tenha dúvidas sobre os termos, utilize o formulário disponÃvel em “Contato†para saná-las.</p>
- </div>
- </Secao4>
- </Grid>
- </Grid>
-
- <Grid container style={state.contrast === "" ? { padding: "0 5%" } : { backgroundColor: "black", padding: "0 5%" }}>
- <Grid item xs={12} md={12}>
- <div style={{ marginBottom: "50px", paddingTop: "20px" }}>
- <SimpleExpansionPanels contrast={state.contrast} />
- </div>
- </Grid>
- </Grid>
- </div>
- );
+ useEffect(() => {
+ window.scrollTo(0, 0)
+ }, [])
+ return (
+ <div style={{ color: "rgba(0,0,0,0.87" }} >
+
+
+ <BannerStyle>
+ <h2 style={{ width: "100%", textAlign: "center", marginTop: "0px", paddingTop: "6rem", marginBottom: "16px", fontSize: "52px", fontFamily: "'Pompiere', cursive", color: "#fff", fontWeight: "500" }}>TERMOS DE USO</h2>
+ <Modal />
+ </BannerStyle>
+
+ <ImagemSeçao2>
+ <Grid container >
+ <Grid item xs={12} md={1}></Grid>
+ <Grid item xs={12} md={10}>
+ <div>
+ <h3><strong style={{ fontWeight: "700" }}>Plataforma Integrada de Recursos Educacionais Digitais,</strong><br />uma iniciativa do Ministério da Educação!</h3>
+
+ <p>A <strong>Plataforma Integrada de RED do MEC</strong> é parte do processo de implementação do Compromisso 6 do <AColorido href="http://www.governoaberto.cgu.gov.br/noticias/2017/3o-plano-de-acao-nacional-na-parceria-para-governo-aberto" target="_blank">3º Plano de Ação da Parceria Governo Aberto</AColorido> (OGP-Brasil), que tem por objetivo “incorporar na polÃtica educacional o potencial da cultura digital, de modo a fomentar a autonomia para uso, reuso e adaptação de recursos educacionais digitais, valorizando a pluralidade e a diversidade da educação brasileiraâ€.
+ </p>
+ <p>Seguindo o compromisso, a <strong>Plataforma Integrada de RED do MEC</strong> visa fortalecer a distribuição de recursos educacionais digitais para o ensino básico brasileiro. Há preferência pela disponibilização de Recursos Educacionais Abertos (REA), ou seja, recursos que “se situem no domiÌnio puÌblico ou que tenham sido divulgados sob licença aberta que permita acesso, uso, adaptação e redistribuição gratuita por terceiros, mediante nenhuma restrição ou poucas restrições.†<AColorido href="http://www.unesco.org/new/fileadmin/MULTIMEDIA/HQ/CI/CI/pdf/Events/Portuguese_Paris_OER_Declaration.pdf" target="_blank">(Declaração REA de Paris, 2012)</AColorido>.
+ </p>
+ </div>
+ </Grid>
+ <Grid item xs={12} md={1}></Grid>
+ </Grid>
+ </ImagemSeçao2>
+
+ <Secao3 >
+ <Grid container >
+ <h3>Para melhor compreensão, podemos dividir os recursos em dois tipos:</h3>
+ <Grid item xs={12} md={1} ></Grid>
+ <Grid item xs={12} md={5} >
+ <div class="caixa aberto">
+ <div class="texto">
+ <span>Abertos</span>
+ <p>De acordo com a Declaração de Paris, são recursos que, no mÃnimo, têm uma licença de uso mais flexÃvel, que garante livre redistribuição. Adicionalmente, um recurso aberto deve utilizar um formato aberto, um formato de arquivo que permite a fácil edição por terceiros. Nenhum controle sobre o acesso (como cadastro e senha) deve existir para acesso a recursos abertos. Em sua maioria, são recursos gratuitos.</p>
+ </div>
+ </div>
+ </Grid>
+
+ <Grid item xs={12} md={5}>
+ <div class="caixa fechado">
+ <div class="texto">
+ <span>Fechados</span>
+ <p>São recursos que criam restrições no seu acesso, uso ou reuso. Como exemplo, podemos mencionar recursos que só são acessÃveis mediante cadastro ou que têm licenças restritivas (como “todos os direitos reservadosâ€, o sÃmbolo ©). Podem ser gratuitos ou pagos.</p>
+ </div>
+ </div>
+ </Grid>
+ <Grid item xs={12} md={1} ></Grid>
+ </Grid>
+ </Secao3>
+
+
+
+
+ <Grid container >
+ <Grid item xs={12} md={1}></Grid>
+ <Grid item xs={12} md={10}>
+ <Secao4>
+ <div class="texto" style={{ paddingTop: "70px" }}>
+ <p>O <a href="http://www.planalto.gov.br/ccivil_03/_ato2011-2014/2014/lei/l13005.htm" rel="noreferrer" target="_blank">Plano Nacional de Educação</a> (2014-2024) enfatiza nas metas 5 e 7 a importância dos recursos educacionais abertos para fomentar a qualidade da educação baÌsica. A <a href="http://portal.mec.gov.br/index.php?option=com_docman&view=download&alias=35541-res-cne-ces-001-14032016-pdf&category_slug=marco-2016-pdf&Itemid=30192" rel="noreferrer" target="_blank">Resolução CNE/CES nº 1</a>, de 11 de março de 2016, também destaca a importância dos recursos educacionais abertos para as instituições de educação superior e para as atividades de educação a distância.</p>
+ </div>
+ <div class="titulo">
+ <h3>TERMOS DE USO</h3>
+ <p>InÃcio da vigência: agosto de 2017</p>
+ </div>
+ <div class="texto" style={{ paddingBottom: "40px" }}>
+ <p>Aqui estão os “Termos de Uso†da <strong>Plataforma Integrada de RED do MEC</strong>, isto é, as regras de funcionamento da Plataforma e seus serviços, e o que se espera de seus usuários. Por “usuárioâ€, entende-se qualquer pessoa que acesse o domÃnio portal.mec.gov.br, tanto para pesquisa (acesso) como para a inclusão de dados e informações (participação) mediante cadastro.</p>
+ <p>Fazem parte dos Termos de Uso as polÃticas de responsabilidade, de privacidade e confidencialidade, a licença de uso do conteúdo e as informações sobre como reportar violações.</p>
+ <p>Ao utilizar a <strong>Plataforma Integrada de RED do MEC</strong>, o usuário aceita todas as condições aqui estabelecidas. O uso da <strong>Plataforma Integrada de RED do MEC</strong> implica aceite das condições aqui elencadas.</p>
+ <p>Por “serviçoâ€, entende-se qualquer funcionalidade ou ferramenta que permita a interatividade com o usuário, como, por exemplo, usuário subir um recurso, postar um comentário, criar uma coleção ou enviar uma mensagem.</p>
+ <p>A aceitação destes "Termos de Uso" é indispensável à utilização da <strong>Plataforma Integrada de RED do MEC</strong>. Todos os usuários deverão ler, certificar-se de tê-los entendido e aceitar todas as condições neles estabelecidas. Dessa forma, deve ficar claro que a utilização desta "<strong>Plataforma Integrada de RED do MEC</strong>" implica aceitação completa deste documento intitulado Termos de Uso. Caso tenha dúvidas sobre os termos, utilize o formulário disponÃvel em “Contato†para saná-las.</p>
+ </div>
+ </Secao4>
+ </Grid>
+ <Grid item xs={12} md={1}></Grid>
+ </Grid>
+
+
+ <Grid container >
+ <Grid item xs={12} md={1}></Grid>
+ <Grid item xs={12} md={10}>
+ <div style={{ marginBottom: "50px", paddingTop: "20px" }}>
+ <SimpleExpansionPanels />
+ </div>
+ </Grid>
+ <Grid item xs={12} md={1}></Grid>
+ </Grid>
+ </div>
+ );
}
diff --git a/src/Store.js b/src/Store.js
index 6b8598b6..0cb5c033 100644
--- a/src/Store.js
+++ b/src/Store.js
@@ -21,170 +21,158 @@ import React from 'react'
export const Store = React.createContext()
const initialState = {
- searchOpen: false,
- userIsLoggedIn: false,
- userAgreedToPublicationTerms: false,
- userAgreedToPublicationPermissions: false,
- modalColaborarPlataformaOpen: false,
- search: {
- query: '*',
- class: 'LearningObject'
- },
- windowSize: {
- width: 0,
- height: 0
- },
- currentUser: {
- askTeacherQuestion: false,
- id: '',
- name: '',
- email: '',
- avatar: '',
- cover: '',
- uid: '',
- follows_count: 0,
- collections_count: 0,
- submitter_request: 'default',
- roles: []
- },
- contrast: '',
- fontSize: 15,
+ searchOpen: false,
+ userIsLoggedIn : false,
+ userAgreedToPublicationTerms: false,
+ userAgreedToPublicationPermissions: false,
+ modalColaborarPlataformaOpen : false,
+ search: {
+ query: '*',
+ class: 'LearningObject'
+ },
+ windowSize: {
+ width: 0,
+ height: 0
+},
+ currentUser: {
+ askTeacherQuestion : false,
+ id : '',
+ name : '',
+ email : '',
+ avatar : '',
+ cover : '',
+ uid : '',
+ follows_count : 0,
+ collections_count : 0,
+ submitter_request : 'default',
+ roles : []
+ }
}
function reducer(state, action) {
- switch (action.type) {
- case 'SET_CONTRAST':
- return {
- ...state,
- contrast: action.payload
- };
- case 'SET_FONT_SIZE':
- return {
- ...state,
- fontSize: action.payload
- };
- case 'SAVE_SEARCH':
- return {
- ...state,
- search: action.newSearch
- }
- case 'HANDLE_SEARCH_BAR':
- return {
- ...state,
- searchOpen: action.opened
- }
- case 'WINDOW_SIZE':
- return {
- ...state,
- windowSize: action.innerWindow
- }
- case 'USER_LOGGED_IN':
- if (action.login.avatar_file_name) {
- Object.defineProperty(action.login, 'avatar',
- Object.getOwnPropertyDescriptor(action.login, 'avatar_file_name'));
- delete action.login['avatar_file_name'];
- }
- if (action.login.cover_file_name) {
- Object.defineProperty(action.login, 'cover',
- Object.getOwnPropertyDescriptor(action.login, 'cover_file_name'));
- delete action.login['cover_file_name'];
- }
- return {
- ...state,
- userIsLoggedIn: action.userLoggedIn,
- currentUser: action.login
- }
- case 'USER_SIGNED_UP':
- return {
- ...state,
- userIsLoggedIn: action.userLoggedIn,
- currentUser: action.user
- }
- case 'USER_LOGGED_OUT':
- localStorage.clear()
- return {
- ...state,
- userIsLoggedIn: action.userLoggedOut,
- currentUser: {
- askTeacherQuestion: false,
- id: '',
- name: '',
- email: '',
- avatar_file_name: '',
- cover_file_name: '',
- uid: '',
- follows_count: 0,
- collections_count: 0,
- submitter_request: 'default',
- roles: []
- },
- userAgreedToPublicationTerms: false,
- userAgreedToPublicationPermissions: false
- }
- case 'USER_AGREED_TO_PUBLICATION_TERMS':
- return {
- ...state,
- userAgreedToPublicationTerms: action.userAgreement
- }
- case 'USER_AGREED_TO_PUBLICATION_PERMISSIONS':
- return {
- ...state,
- userAgreedToPublicationPermissions: action.userAgreement
- }
- case 'USER_ACCESSED_USER_PAGE':
- return {
- ...state,
- currentUser: action.set
- }
- case 'USER_CHANGED_COVER':
- return {
- ...state,
- currentUser: action.currUser
- }
- case 'USER_DELETED_ACCOUNT':
- localStorage.clear()
- return {
- ...state,
- userIsLoggedIn: false,
- currentUser: {
- askTeacherQuestion: false,
- id: '',
- name: '',
- email: '',
- avatar_file_name: '',
- cover_file_name: '',
- uid: '',
- follows_count: 0,
- collections_count: 0,
- submitter_request: 'default',
- roles: []
- },
- }
- case 'TOGGLE_MODAL_COLABORAR_PLATAFORMA':
- return {
- ...state,
- modalColaborarPlataformaOpen: action.modalColaborarPlataformaOpen
- }
- case 'GET_USER':
- return {
- ...state,
- currentUser: action.user
- }
- case 'USER_UPDATED_EMAIL':
- return {
- ...state,
- currentUser: action.currUser
- }
- default:
- return state
+ switch (action.type){
+ case 'SAVE_SEARCH':
+ return {
+ ...state,
+ search: action.newSearch
+ }
+ case 'HANDLE_SEARCH_BAR':
+ return {
+ ...state,
+ searchOpen: action.opened
+ }
+ case 'WINDOW_SIZE':
+ return {
+ ...state,
+ windowSize: action.innerWindow
+ }
+ case 'USER_LOGGED_IN':
+ if (action.login.avatar_file_name) {
+ Object.defineProperty(action.login, 'avatar',
+ Object.getOwnPropertyDescriptor(action.login, 'avatar_file_name'));
+ delete action.login['avatar_file_name'];
+ }
+ if (action.login.cover_file_name) {
+ Object.defineProperty(action.login, 'cover',
+ Object.getOwnPropertyDescriptor(action.login, 'cover_file_name'));
+ delete action.login['cover_file_name'];
+ }
+ return {
+ ...state,
+ userIsLoggedIn:action.userLoggedIn,
+ currentUser:action.login
}
+ case 'USER_SIGNED_UP':
+ return {
+ ...state,
+ userIsLoggedIn:action.userLoggedIn,
+ currentUser:action.user
+ }
+ case 'USER_LOGGED_OUT':
+ localStorage.clear()
+ return {
+ ...state,
+ userIsLoggedIn:action.userLoggedOut,
+ currentUser:{
+ askTeacherQuestion : false,
+ id : '',
+ name : '',
+ email : '',
+ avatar_file_name : '',
+ cover_file_name : '',
+ uid : '',
+ follows_count : 0,
+ collections_count : 0,
+ submitter_request : 'default',
+ roles : []
+ },
+ userAgreedToPublicationTerms: false,
+ userAgreedToPublicationPermissions: false
+ }
+ case 'USER_AGREED_TO_PUBLICATION_TERMS':
+ return {
+ ...state,
+ userAgreedToPublicationTerms: action.userAgreement
+ }
+ case 'USER_AGREED_TO_PUBLICATION_PERMISSIONS':
+ return {
+ ...state,
+ userAgreedToPublicationPermissions : action.userAgreement
+ }
+ case 'USER_ACCESSED_USER_PAGE':
+ return {
+ ...state,
+ currentUser : action.set
+ }
+ case 'USER_CHANGED_COVER':
+ return {
+ ...state,
+ currentUser : action.currUser
+ }
+ case 'USER_DELETED_ACCOUNT':
+ localStorage.clear()
+ return {
+ ...state,
+ userIsLoggedIn:false,
+ currentUser: {
+ askTeacherQuestion : false,
+ id : '',
+ name : '',
+ email : '',
+ avatar_file_name : '',
+ cover_file_name : '',
+ uid : '',
+ follows_count : 0,
+ collections_count : 0,
+ submitter_request : 'default',
+ roles : []
+ },
+ }
+ case 'TOGGLE_MODAL_COLABORAR_PLATAFORMA':
+ return {
+ ...state,
+ modalColaborarPlataformaOpen : action.modalColaborarPlataformaOpen
+ }
+ case 'GET_USER':
+ return {
+ ...state,
+ currentUser:action.user
+ }
+ case 'USER_UPDATED_EMAIL':
+ return {
+ ...state,
+ currentUser : action.currUser
+ }
+ default:
+ return state
+ }
}
export function StoreProvider(props) {
const [state, dispatch] = React.useReducer(reducer, initialState);
- const value = { state, dispatch };
+ const value = { state, dispatch };
return (
<Store.Provider value={value}>
{props.children}
diff --git a/src/img/OffContrastIcon.png b/src/img/OffContrastIcon.png
deleted file mode 100644
index f44e653f9499dec5cfc293de994c1081ff9c64ec..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001
literal 17242
zcmZ8}2{@H&+qP<_5;7%I6lE?U)5@^R6hg*OQI-%1r7~+!W|9y>ri9h7NE%SarAQ%D
zlc_>d6eSt{^Va)*-*^1`IQFr(<yp^jKlgnN=XGA^C1SUUJ{yYw3lkF)o54;Ub0(%m
zBl!2ra%Oz;{pWdp{AY#NPTS*5OzgGf-$jWs?1D^8>zE95wp;pM9ewAw&+`1-{P?eE
zTJ}ZB?87T~zp^AHH7fnGe3&OyePW5lgj=iWafk06qYn?c`L}KDe6mq@Yw}svUu@<^
zZ%<w1QsG&uW1Z3?vj4ZUXw#O)!KSOfevFT;PiZdyaxx&Gx#?<7%diiHBi?byhoT-h
z#c}G}dtEy_fn&#y$ET%5m6w-ie>0jEU=k7%>h0}i(${BjJwEB<6PlAF_V(R7vpmDq
zm*pJnr%svb)X@{z*O{NA(PZ~k_^+0dlDdC<kp1iXil}X;zN-Hixq4M7-b6w|!m_}8
zX`;*?y+moNjNd0>1eAI|eq6d{&6;=<(bAT&hSUb%2M-?XG%=}fFWM7-`LgB2=(t1v
z_3MTbsprGOmX%jj^x=9>&u`hD_V)HStcrMr)~?OtjySTIk=npi=GjwUV3F_j{e!_(
zbw93TIR`y+bFNzskJ;xOh7AN_m|tkktCM>S44kWv5zH}25O;lhU%t@#rgXZ#la*?R
zPF=&(r&Zl0F5cfiJk9pjJn@<5=(~p-)1A51H8e8$zKI*BUfX_-+3VP`OD1CG8)B6T
z>`hGAV}&&$wZqu^rp5<U{l0J5Y+oK;UA<#?t5u6z=?#l~_SCJ1&t5l9%RVvE;rhN@
zZQ0f3Lhj~SuU=USQGAw%v9GPJI=5`RQSR|NEiDI1ROCTV&p7Ajsad#Ow?|!FJ+~xW
zHkN9vY@FZLSABk^Y4ndgqvYI@hUF(dzw&b|AL+QcGDc4<UDwH4$h}xi<>=cdaawcX
zLqo1#-aT4#>g!u<tzw~h9?R=e_hlg=AwHw8S7URNO+*#cVwG$w&YoRdTUWPUT%1{6
zUVi7!ofl0+w+9CY4|UuWe0XByLei$a)y=WV3F}4}bn&8z!JNUaE}Pu^d?ShY#W<?0
z<AcrWpT&#FFR!%?U%Ytn^o<*mI{NxQhEkr@zId@}Zf<V*^5v&9GesOm#EYuv;&rXV
zKB_^}Ta}M=oo;B@St%dA>luTw?97=n%UM`<<mknyzRh*T23^IS57t~@>$-DrNpq%_
zT)MXO?#IEi*?l<AN+0$X3)PO?<!j{Zb)1|wkbAY|n;H#Xj8r=M_P*==puoV~<KawR
zG=rD#9-ZRk<UA7|zPyszIP$~bU|4VOfq#}Q%Q^P(S*u#EBQ{Mk-6X6c;Fn`}@u9A}
zhb>xWlOrxSRaGsj@Sm){xL*6^t^M07D~);aj#2kdjPO?1)X<M~E9|Qbw55dIXbKDr
z<PZ>uJhNok_pb+?<b~W7(s2A=-ag<qO5R-8adWTP?%nIsb(|DVo;*3!lC$grEB{%O
zbjtRkc0-AHwgH=jr|-)BxMi$qPriR_^q%}|H7q1r^5gsW9j>mDJG8a?hKHrnwUxuE
z#^T3+ez9#zQ(0BC=k_P}mRv)2c6Pok2blEYgkzZ51a=NyWb3m@F!Q0T{rRQ)+=JtT
zq7;f9C2Xhs%<QcE$uBmQ>tlAEr5Yc)l$jZaoo`CtwuTWWlH9!BoCfoB{L)1qdiO}>
z%jjs{@diV0+S7IX{QNfej_`kaks0USdCOps!!~A(z3(D1{n%P;OYi5;(&^gP7pTVm
z54;DMKQ*UE9coNkFD9l<32ShB@bIBy!^QP{iq5Rx7VG&B*jPlETUd;DyJQ}0$<~FN
z#W$}n=5KCp=972)r#?<(75*6(GFOdNS}n6_6Wj4mO;sWDe;k|+9l~?FWf3Bxh19sH
z_0eY@J$mHBF2%!0&A6D65&QecAoYE@pZYsvr|q|H-Qv^m->Nw?rd@g6*tE}vo2eJR
zHTAtwZv6LP=D_=kfL1k~!jE6S#(EFbua}i&T`g^Sv3dRZUYnwQCr>K#%GpQTmN>6h
zQnI3ih0if+YL;+InADE-)%1P&BAc#Vt=b`-*EW3T=sU`;D_a&J$l-PqtV-@3wJw=K
z7c_&W$NHtE>*>~6Ir?#q9~$DrqoNW_){APC9_i*<$t(Nsk5A9@EOs(^a_5M4-geO6
zxpTRFz^D?tQhZ`WR8)=o?TQPqqW<a0kybUQgX+cBXAm~Yfh#&U^)l{+A2}TrwNl(P
zBf2F=zvk&v14@|eX{tvJ4qVyebtqnG+&WQ5xuLOfCAM$-iwuq5{`X=AY~I|!TO7c0
zy2?B=eONeCY~S4TpdYAOJT*OSn13;4OvzpF$5@|sw4e(6?egy|VW~Se{v3T1w#VLY
z=|Fu<O-<M;SOlxDlZW=n(bwm*w8KQ@<;^JP!$V))+Ajzr*JZ@6&9i6-#T83hTU)od
zzFg<?`Bj9raqh8*h=`$A1>DT5gqw;uUvmiC?v;nLAw&d@RV{-vCHb&(N=4`AOYm;q
z7j9qSKhEZA9ZU7dGdDNi;#j-<$h(JDco5I6fL~v2?z(ciy}GeJeaE5NwqEP&ckXZ)
zCCMTjv#Gw)$xXhww=5e!Oihp6HnXvjOxHg2M9f|0($%Zc7cX*DHl~F?qj|i!w|vzq
z{hM~BxfTsf>c#iCMmleY-M%dsmKq*i?AfD<4RM^Eo@|wJVu~%TKIG)IPF0mJXnJD1
zzyCulwEOhLgwMoq+p_iR*EcjYz;ZOkw%$LxRx^-q_RlYUbMs3+ECm<!au&`1IPeE~
zhJJF??(UIpbIN(cCv@v;h_t)Xl-cHgzX+Lf=HOC1@!679NR{L1)2H|SC#5eXBt%v2
ze{gK+<N3L5jJJB1W%jUJ<eSu8ma;hD;v$i*UDrD=&605CO8DIDpC7zQ8%&DYvvD3b
z_CGpF57AOo<aTMkT9u;c;x#=noc+!7efd+)GKDx{jcSR^z_V+&ojfr5x^(R4&m@!V
z$GtW(p(gn?sY>o-lbxKM4F@?A3mxksU0br3+TC>>uZ`<@bn3QixoJA(JlwsvHiEn1
z#fvr48-wcV>Z&?B*Ej@Cu7;g5Ru)JuXV@(&E-8^e(zQiLM`vd~2mej;JVV#E>uj$P
zOed(_-QB7uzwq_<_j8Dd#NEHI`nKH9;?AXvjac#$X4WUo>D%bO<BqD^wi!uqs&@2W
zx^(GfiHqrm4I6N;l$er|9~Mi3CqK7mk81`_ZQ<hL+KqT>V-UhCEF7C4Vd~g+-B^9o
zEhZuN?b}X%`8QKD$d?{uzEMt2&ezW`%QRDyX>Llj<<|a39D;&T$X)v$9MipjF;+w?
z7D@KtyN4%+TJxfOVhhKQcPwUExl-Qa^;Vyeju>s@39X|?j}CR0NRY75m@GH&EK$a$
z*lC6T&o2>!8385~(^44w%bR;uc4ca&XPR)<#vQe_@%N{kJ$H`o@kV)=Cz~s1W}Gqg
zA;C0Pk!fap*;|B#{`}0~>U$n<#*pyG)($Ryc<Nj1*qGP-2M-MLZ?MPFHVwhR2uuh|
zZTQ#jChzUXbCl~Q>5=%VsFc(SM39=Ext}Vor86(C<iR~wKTlI(;M8+1EW_rL_U=SB
z!~vdxR~qDV*jCt;y7kqp(yB#Vxp?W)+1r)VEHH%+OEqMBTl0*3XD2&3`T3>Nv!#XH
z6=h^)YeQFXbMWwl0>&W=rCHpxQ(_g-6at2;g@4^S_R(<a&!3w2@9inioev#4v|dtj
zIk)((-jOceYPxdHmoG>DVP<wj_Gy*UDeOg<{q;UzmDbGIlHmE-Q%xy~%K-Q;H5c2K
zxV+HYy_*A8lV@>6nDKho(Vof}_O+A)I7{-?55vO|^3?j?R|OWtbgHYXcRx6GXjnFl
zd-dw`xNaSZ&~?|nY0rCsh+MmiH}($<<XMC-e^PY2GE(mG3>U&H0}yY#W3T7<qz89o
zT%3Ls?<TLl>ZQXxX?1jEIvh3!>1yY$U6)PPXFvAx^7{ARf0-)h=K}UUI?1N!(p<Yz
zu6$kkA#N^i?v~<1MnbAy|5ED2y=lg-#Ae<;P?Yo8;j|REP~N*=XT!#g>lGBZut%R_
zWTJh(z1KhhTmfj7U_w_Da_4?I>~lpkhysrZD=$~a)++q_;Mm8Pk4||Csrz#1#|i6t
zd2Jz3wuEMFZ!b))<5zSZt5y=Pr7N2U2WtWdjJN2E;7sG=?Sm$*Lc_wu)YSMh1HZ2*
zv?>x$cPhQUE9LBZ?F(ZaH^gxkJCM%&Cx*@dYa8M_EByTZ`v>B*>OCLNUH}x@>iY6u
z%2Vl^HuS|B{u90Wk9M7=?$=96Ng4a~OW()mF3A!R6%`uHtb7DmQIQ75CMOe3iYYBE
zExsc+%Pyv*NToZrt9BgnA}{;(Ek7c3B68izm#$j@`2O9oWAVMC?;_!21`@W38Ua6h
zpR4qINb`(&LRWq{`lhU<GALkX=En;h_lDl|Q}3&g(>S@g&spEJGZ?gqnVRyoSFZz5
zUXq)edkukG)w@3wt6DMgx>N=h5Q?amg^yd+tPzYCd6theBW2`T(AXJvrUnKEB>XI(
z#vM8=ty$X32o?su1>C3m#P+9ag$R4RzPp`7>`1FVn~^i~$2iRnKRh`a85;Tz4ZEV`
z_UdA@*<Hpmt#b8(In|ClJpUilHyrWyckMO-Y=y$X4kEsJoj8$bVotk!nWucbUJ&p<
z7dPy+NhT4~wWm^}hhw`Av-io9^$6o$zrP=f=954Bt0VZrn=;QFyh5PJMPb#B7hZES
ze)fZD;nDqleP_<ET+<I<AyDzQhJ7?c<orje@k`#cDAYrt0FL9~so}e-0hxP(eyt@2
zi!8jCqVElO)k3H0SIXV^M`+~nP6LDONXx$klsHqaK7Op#d{ylnYNPMY>qFuZ2*`aN
zSG;&apGzQ1L86&yTg#aelaRozIXhu-m2!e5ecP#|X0yw+wK^H?fy}X!^KT!WTIE^!
zTU<-uScjL?P?^EgE094MKVATy=kN`_$Yi8>R!02!_01?>l7%5Kf69WrQY=1Pb`#<R
z`E5hI*g=xZa+a@Hv4T_>!s@>3(zE#rMMe-i%6~L(3y+ISh7~0i+R#M_?nGUc6+AoL
zsuoF-$Eo*zVP%~&B35xH;1i1%FZTT<D{3CvX&=A_B+IxWPu+cMpW3jHcfijt+u_dN
zfBeX^s4X~2J3(1{flaXfj~RD-wkn0<h}{4f60r~deF#^>ruj4jRedPwK9Q2`v6IpK
ziX_wxvx;UrmL7d4AYpR#UmF{~yLRn!`2tLL9P3z`uBus3v@c7~v)Pm#U8^}gBt|ag
zN|bXDb_o8x(UD3;ow_ky%<b7_si~iDJo6N5Zycrl`qmSNh-gYV7rxVTEyd>v4upUu
zD~DpA-X~{Ny?RgkTv%=uGYJ!TnWMkz!^e+scuxM@9p_nW=#EQ8MMZaK?N~Z2#Odef
z2m1(<zAbhum2P5ed>$w4*|c59`ew-doT~qXq=1s!hICO;AZZj}g^!-4NY_t~yA*J9
zb0bWKM_b>v*AP-Wrc;_<hmTq+0!~>4F~9l5cnDC1oZPEx8s2an8JSuaxq9kTnrCl+
zzi2wu8~-e4XV*J;Fv}-Ww`<16G<EBWG-Z!V&Fe%JqEJ?~XYj^FMpow<B;+c}R$piM
zqkg-h5pd6knKRzD{kDUMeyq@TFRwd3k#)~AGz8=0<6HTiT}r4ypPKkth1G4aF%6<u
z)6+ST+SQJKy7ARK5Ad#<q&LN;XW|TshQ``&m47xD7Z>N^HDukIuE=*)25o!$_HC|(
zthkKKN(34m0@fnCyWZNY;pG(tfJ@%I{}OD9s|BgLmcgiDF!U*Pj-*TnGE57qNqHVK
z35Q$A*{q_XX22RXU<#t)BL?|4O{n1H-8*E5SxfE|(C5Y(BJu!kIBrqh8<quJ!87Cf
zq36#ReEQKP5;Vbi@=MqH^n=Hg6*~}whTfFj{_L5fr!(R5@mXR`vO{phMx&%BRaM(5
zj4wd#(?3U}a&tEf^CT2U(1WMO)&p8RHHzTk)TnuxrA^jjwQr9)&Jb^Pw?O8q?X1m+
z4}~OTxDNuSPGm=((V8!>OIKPITE?5mKSJ=rZ{IpM-?N*wxoum*jLNr_Uq{Efue8&?
z2BnZ$k@cowo|2WTRxv;a<SFi|E@V*T<vGRlqA%hQi={z2)b-VbS$Rja{^|+o5x0MQ
z?=^k1q~yQzbF=Xz=I_vPI*}1F=ZAdA6!PayPp(CiG=LnzzuUK;@rg8}ouuWPX2t^N
zkv%G!e0%)GdSzwaZ{<H?eIjiMRz@{*v3X0RRqQ05G(Mc4Y3RbiX{!Nt=*atW{w2%U
zFPq30nQG0xDqJ;2J4#bjP<VOUK`X5ySBNt{4+)K3X3wo!@GyAvCuEJG&f6ji3JSRv
z&uTx{Q&80Hxow|FUPcOx4{%%AaFvOnVf8YRz;)?n;?_zXJ;8rA!2vd<Z`W~3c(tVq
zn`HAixWeZ`70sEJkdPoBIORpwo_760m9X*=zTiKjD#NVjZ0Z&aYQu)w>))&lb#i&`
zX?6_{55pnu75>t+t+SEadyn<c&(Q=t+njB$$d{l$KM(%?{;`$c-(tolKR5Tl%+xqJ
zjlv(kcRVJk`;k<&4GklGF4*&EbWqaSzdfF>Y_Dw32yb|Oc&h-(Lf|fvP2?X$N3$Yt
zR7)TInKeX@g@XY<<|>AVTN)R&lX?ZoF2*PFsRz*Df;UPgIx;9Qn}Y`rlIMkL-SW8?
z^ylQ(!>u}$x(`58Bxestb4i_~Aw@(X0T|%~TIK;l`xqi2p=D)dK9L51IV-7**u-YZ
zcu|J`U~{@nsaqmEnR8Yb9zv%w*e!3`0fyyT-`W>}TxQ^+p3q-EjWeAZ)S8#V?&`eg
zMV0^)Wl6I!!-W^v*G7h|5;1h)G4iI)!jr^E9eFN1+;Hr3(e3_6-zv}L<mBK@Hi(P&
zCzxu+H%lgE*H0srUQzMPAdeo-!isFledV_bkT)h227>d&X5UE1db|9#gD7&XPyAL9
z6)g?;R`F|#+bhXo)&wcw+8bs$Jiof#>!K$=Jx}v9FcTG(+3M0P1f*|Fsd4)G^<5O=
ziV0<4MI;~LD(fD5WQ2!D{+h~`njGoG8KmHSMI|KkDLLVy_5L6nP_h-06(z<O70KN5
z?1@EnV3dDF2ZUqgRR7B1XwiOZ(CqXHL?~_YiqR9TMsfrr{`~o~RZ3hwXxeAr<KX?2
zC8rnH`?uyAG(3Ao!l)?s(95iI*|9rg;u90kKTVJ@a$({S9zhL;-|bKUjkW7YZ8)d$
zaql8j4MH0JmK5!yG?5U?sPOP3FU~Gq**iEWk$#X1U*MUSOzyI|y|;{ge0<#8)Ko{u
z`NPmqIGCTb`x_4L+b2{x`*Uv#b37d+Og(V_hKy8%R0POnD68oaGFOekaiDl}d?BaM
z5w%8654Kus!Oa=JbaM2~nsdumB{gqB5b3<*^puM}ST<#&<vYey;{3dLqK%6){vtu)
zF@h@OBARVUt!9POINkof*LuK|O|y4(bT-sJeYye}z{}ekq3anSA>FHQNBrQuA)EaC
zd@72Fq(DPaQS;OOlb;D?)XJ}yrV*eFPnVr5=UqDj;)f7Ae=j1DeBxV=1Eogt@ZrN(
zv_dNDGCLiq=}AfT0ao0c1#eL%nC0lP4YTHePkGV5EQ42Y1Poc^RSNd?qu24{H6Y(^
zP7myZM_<`?>XvS1n<zCsH8pbSN?x1(g7EO2eL#n9lOltuxVdhRtVcY3?n}uF-x79F
zQE3Iw_v)_-t&Au+O-N0$(-#hx#7*MmkMyrSt)t^aSuJB-3;W1wkL;PDH}P(=3r$n;
zwEOU&Y0mWU*S8PAhROeG<KT=>9DbR#1VBYR-OL#~&l@oMnnq0r%LT?a^@mh=ctd2+
z-0wl(;k@Kr#b-x`Tl0ARe%!TX_#@0TG&OA<w7^YP%Q#f314bVz&96c1yc78QScz6#
z_uMeJ&!|AJtKs1^BZLVKAt6~j=EvX*{ovqA+sv9H)C%tbJybu>_pO4lC_CW@kl`-*
z=%vie{rMIi8L2RG{K_GMr9L&KP-DZyMMVWa0I(izyKdlex%;ZxaWKG5Kc}4eN5H1`
zgAV`X>nbW*Yz6{}fx=80;rH>}v<$c<mwODAMw=fuU~#N@Ev|Q5TSSY3N>bFyUVNC>
zY0l7yLeQ|#lI7$qcrtSP@zK&`(b>K*5wEXr)k@UwJ!Pbx>Hrp^Hl-@9L_SDrmgGL}
zam|1+4d1q@@Gq4TxrE?Y|L)yd)Nz-aB@<Bbl<YhEDwkRT>;_bo@_l_o_|Ef$T^$*b
zNk4c8MHy}1gVqmm?#1-Yva)v@toC8Ee<BPQX*{&A3{(R%U_5<ATyO-axc_r|(RF`S
z*yaOt2eJ_6TltxdkYYeG>{_@8g=Na;tnlz~rWx-;iiDj%xW&RV+n|0LV4|z|P?VH#
zWO(?Eo$wY84vuwLz^1+Tda*C!0qP0SCwzTXSy)(hjqe7ZVhT{pOgLFZR>IrD=@T?E
zTBtYMhJ9IZlue&LCOhc4y52zc0#)x^JaS%8qXV^A-N(jc<CYydI+irF1Nat*&MghF
zqg^K}ymA<+`t2~xqZt_)Q)4x&aC7Ivn5}NKZ)n&Urzxjw2*vU?fOF6T0K{*L54VZG
ztqABGV#vGE#6(4X>lARX;h;g-=Vu1B$l}t{+%GkH;o(?xl7e#+pQ@UgfeT+P&tBV4
z^h)1xQ7|{r?C`eMJ*95#99&$Y=?5<kFyaQlL+EMfr7$Q83avLJU{umkE4am<G&h@2
zYSz^sbxv7;k$M{PoSbI1z5xMZTej@}&u{9dzjT+NnQ+(4bQj*#Izim{thIaVBlWa)
z(g%WTDa=nR%$oR-t=fQ^Zn<a0WRlN??a|#P=NL#B<2<UIoDpeT4`1>*yB%GG-Jcrc
z1k^hKVCoTH8Yi6aGS^#C{%>{f*hSIyL>8<88htk5&L-?GjK~si4#2gKQnl{TyWQtV
z3L2kugJDEh2K~tf3x?bu6&)?xR^WB6p0a*@)zGSw+?<>#ktnm6*@Yz2v&s-y`;p+7
z=P9^CTKZY91hz;aA6ay7JLCSd;ymWruh}^{Y{83R@yEZ9k8jU6NzYZBuuj_49zgSa
zd%w#443;5UF+caGb%p=7;2BkPKn}jV-4Z|x0X98{+!HR_H(J(HA0=0bC#q<xSbd{^
zlJdebrEgkCfzCB_8QLT+UVkm~cBjo69-ei|%J+65d+Q`2MjTP{+!_@VqYH5NUd!Qj
zj};O}Yg=2RkS?(wx$?2asDj1PvyxHuiD_!ue<L>$^uKR{2%qKfI2dbEblR&1t8h~E
z|MitkUtfQiwc?5o?RWepm=Ny^jbB3OGl{2Xt<l!3w)$-ILu@auHKq+)-metg`#(Rw
z5B}ppNHUip-5!g+jj^TRFEca(c5z{yPAg(#W5Lwr14<!i<#g`9Zzwdfa?R%6ukRj-
zM`7cN|8ZAa9X!~)c3-(K{Z;0kej5>rPlMCKOA>m(*VlI^?won^qYXCmd5h~-5FyFU
zFIO@Up)5zRdr2lQqs*xAb&rbX9Gsz)8OjRuM1d&_@gy)(rL~zqn&{vt?>t@D^E^~-
zu5a$$#G(w}ymg6HG9?F9T9RndC*+PL*`mMElhxvyt7vF-eIW@0V>B(ikJS73?_FPB
zJL98Q5W9BUg{xPuy3EZwGN!xeRM4<0dwDp4gl%dH#?YYUT6HOEt$W5|2~p9#<G&uy
z@26~++vwp*rv}YTd6(32aB|wVB8IY~gEAa#o_M#SE_M>Q;yJH2HqHP&DR92$@gT$3
z@AK;^+qR{x(OwVi`@LS!bEm}R&;4~#F9H*~EvP{VzC66VsTzn}4d%3iG!YH|Q1s|l
z|M`_6@So?mW$Ug)d2Q%&`LnIy%qyEr%86%R<cTGH`0yc=a6t>dX%fTxn=f@&UERF!
ze@gCr?iH~#Pmq9n%Z}P^fW<akvMW2vwr$%sz*MxyO1j=0(v<H|FGP6QYejd|UBI$A
zmUSNE+|=itMG@f*NlG5CEh$;}NIs5+=&m#~Gn3102#a!f==0QZVHM77`W@&B2Y+T{
z@QtAIidxv7RCECDzIODC%Hpf@@HX>4dUP{-j7MAGh@wV?yR#PC`wwr#I`VRJ*Qu!d
ziV%?z82RwQ2_5q&ebf%Nms%alI);6wU?mw-^lW-1pkZDBaXXV?Dw}%6Q{BHy+{s4k
zGj<Mn=M<}i#1^R}WP6+}w7qc8?O186!ksRchf;7Q`E1kWxmd4CrS#yw|7ro8jZrx4
zd34faIFxI3fYU4*TaMqp!+@QlE^Bt6^Q~uXZQbJFenv}^ic52O4Mp60pL%pG4%xTq
zJmAYFoY?LCkE|z3d6^Iw#TJhLuwlqKekKI=vLW|Thmh0Q_l|a&EjQe$m4BnZ8_mxN
z_j1c_aotS{$7rruzck{?xrT-z@1_grpAM5KBIxPqiB*knMJz4I2n!4I*%9F@fQV~p
zI^4NzaN!z_ytqm3{3>9Fg~K^P`@D4uupmAmLF@`KL_b5VVuC~Q*&-&p1#4C^pSD>t
ze@c2^T2hkuRb(<JKVe~E(2Hbg<t?w@zTMZygClA@4naaxRFscigs|t<1&1{n&aaND
zr^v~fs*-oV(8`z|*Za{xe7Pv__xIKn8~fwQ8DzA2CfNEoJ*UI0N{dtf^FA_paZ0A=
z;H#gdf@ppVFY>~zJ~h7z2Xhmft<HwvR+vBWpUd%TCtBi5y_Uf#`S6-lyJgFk4Krh9
z()9ycyS&JGmR_C{A7KdIEKRatA}QrMzWkpRFdhyyq>>|ZJETN?-qwrVwZ_?HFvFqS
zEv9XL{N2{}=)Y^S`=2$L4pW~mxK9PCsU$An`0ssAAkGmhi77>^)QbhnV#TrsVmeT$
z*^&)u_)hd4iHRH2&9bqmO~8u?F`>ta$;v1xt)`@-5=sFNV^$gH$8_2{r{$VqqI9(Z
zapb%Si{6m;&YQ+U!n*OZTh;`9?uWAbB4{_TyAp($&(bkn``5HRE(bgPeI@_@d8Gkj
z52ELRmoAw|a{k@tjpE{Xf$)VLZU-@fURa)@;lwMO&KqXhvLLJ*T7j*uPradbpq3bN
z-^4`F_J4k{?}2Fg?m{ik5?&^0%NtDSBhwc=*L-@U-Kxm?d{mSX{6Zw8Z*+9iLUcWB
zC^GW+=&=@?06#z5hr~caVIa5D{)VNs*ek_2+Jc$$68~7Rs8KW%A|G#7btr+USQ!zS
zgk-y-L&+^jP*98hb@$JJys)iS*R8(eb!#$7EPz<17WAm+xFiWC=F{;DnwO!WsoJ>1
z^D}D#-(lB|q_;92-rp4LNP}!a_OD~E5?0?mv#knb;>Y~pFA;R)bb6g5IiOLX1xZ<1
zz*;lFos4ODkHcCh3mdE@XP+NBE&SIeiVqovR0v20M`iMjpg&OE*4E~@knD0N#75lO
z3s(oM*+m>)zmo(I1w};&UJT&h8t&&Z1>7r-!W{3R5Y?8Hl)Tt1*;1l>MW47m3zB@Y
ziR9`9A8toPnba&ssMNgsIzRXd*5LN>!-rlZDR`*#o?Akn(S`Za6X2GZ4pYiESzEFY
zE)4?%)nR`)U`u=kl!y!xsS*0A0CrKlu_KU0$hY1`#pCs>Bmarn)cvhLdA9*MmnrXM
zg*9(n4U7V)LCLXPNObRLwu)VE-lT0JdBZ$-?zan34Y*uxfP~|Ds#3tG9=Ve=EWv07
zm_?_f|IfF_cnK?j?~LD{6ngooY-5%PUELQ@gBnR(F1-8vFA6XOq=yy=3$^-0KiXcH
z_>@WxU>M&IGs#bAmb5yY_NR${%dS*fE*A00`niC~nNBRT>y6`_ZA9nlj|;D4jkA0L
zJcvA>_oCw%!a;-hXcv76INVnLynX^W+-z&4yq^3+-CuTezvZoc-G6}zsws}OYc~O4
zAUh0A&fVc+*ufQnLH=TzP|!nS#Nl!*vGOpz9I45{ME?Odh<p<MA&Kc3;rO^GTETl(
z1lt!--<7)W$ys=ZjVdZ@P=Y2kzl>S{S)k0;LiD4D7{+N^jY1?oBV#ijOk_)_zx`+5
znll7m&TmPFv!vckU%U)jDIF*6uRV|Bu3X_GfG&`>_ui2eDk^0PfA0Z*fr3m1_aH^W
zCcC>Y{|t^Obr22A+Xu%}a>!0r*_oVyK#3n8`p*Ye)C=_L-^T;GNw;vJ-=-~hp|YIz
z3z%>ptj`IHTd@3>QCVq)|NYeR{Q2`X4}A&%vsiyObWr`{l%81h;qqPJwHWAk0a_*(
zA1T;QUCY67V2m4pDCNx_hoFt=*UA<?9vvK9CL$toE)z9R!@kY?ABLjF10>D^|BI%V
z(o`q^)(%jKP$)5Lt$_VKkhL%Ga(i#X%g1-4bN{`$XV>V=r>|XG_xBD$=xUCm*9AOz
zlP2gkW}||#1B97OTLRXf(puIN9EJJ}KsFDJ4OhsUQi5+*QE#@m`uf1_A`cjQ%C2N#
zk#3Xny2eUnJAHdE4CFrO)EUTFP){g2Z)@Dz!6vZvUudPC&E&$Q>r>T^U-votUO?q&
zG+KwrzdMr;(-u{>M2ClexT+Z>fDY_Ap9}A!-!&;9vz^ENE~ALCd(J3j8c-=|qV9(u
z+RGqe%Wei2yuix)yT86$(6WX{=7-Iaf5F(BnIh*o-GDpfT)Xx!DxvFLhB=JaRaI3(
z%Msav(9`Gc>+8e%kd13kFIo~EER<9K5E`qY_M+q#PONeoyvpWd$Bv<R=_uMGN9=r|
zoLqDOIw3uMoJ-;-5IRJ_fqK#r^{7AXO{serX!CBKO}N2}iMllo>l78ydGXZL)Fjy2
zK)7*;-r>4c{UO3~3F-*m1@evc94o&<Zd3A_S(zM$0Mm{gJ0PKOi44O^{hvLapY>Gt
z9V0IRE)Jb2`R;)fCz^(a2FT=97U}@kE!>+ODx*<B8@cf1qC0!TuC(x}@QV$I6fw@&
z2Vv+A^uU^+lH64h0agH}Qq|blXt_!sbSr7qOG_J~Mg@!?>Z0cuh_pFTZ??N}3JACr
zhM|0}2Hghl&Q)aP5)fdy+2Qnq<w+=&jR~aMr`6A4h8r9m9q+ij5C-k6s;YWmthY)$
zWM4w;2~^Izj@c>!bg4i_1N|Z@Y+1B8P{-qfHsSmw5J256Sl~aLK?*H&O)pe6m7Wn7
z8A03fNl#DDt5rriI@0k;NzRG-?Wl)&5vDzp7|OqGmOMf1em;H&&a;>ZpAcUNGtfM$
z*l1Jc-pLMTK#8FZ^I`h~ITamT3f5Qg{h5sTBX(c!CIxuOg@ug5fyJSHAOhEHm0}j$
zc9Qn=))IT6l4vESiLdVjA(-0QS%dq;*n-Lpo}Ju7?lV@s5{=_6;FvsUqobqpAa9Rr
zs3R_4gj6zcqD8-z|BwPcB%yv%tx37#iAbm3i4!N37FaJfKCNJNlzSjQx9r)oCu(0s
z8;v^p`SUZuKn_l`h@WV^fdv|lR^X@j+|Xq=d`{_L+VYpBNcnRZTh5{Z`763j#m`g{
z)zJ9@am(wsxg_ocd{-VSnd4e)h>clLS@nU+BWuBjmPOXjMPD5HNoStB?;Z&dx-kRg
z5v>+zh0vmS99m{ofCZa=2J-T|1Dim_*2-myL}U$1=Ei~Fd)C(TMC2ROud%T^T|aD{
zXlJzSAAQ<Z6A`|AYT&{esDtpV{!gEr>79ilC0#babU$Jd4nq-mi^_9{sD!1-Gfb47
zzRD};-W%7(oHWM<0`}P3#~~ux7g*0ARhdX}pE`9aer2$&5AEICx3be`v9D5%Xo;Lg
z=NhXN)Cw+dFnY+l)}3kj%9SNUQQu($tZ-<X66Y8YfL1r{R->CB`od$JehU?mxXD%5
z;rxxFqTA8dEt_^fy6dW{*%xX9uZTMnX{CN^(ACN1Qd3h~&dRD|ZJp#}m_q6bv;(;V
zg5&83`1JsCe;Ma5=T>QwPH3)T^moVutGc^wzx>v%7hodoF>qRj8XDO6Cva}sG}Vsj
zWucV}Br^JUw;!P?39#|X+N_(LfKNK39<RQ0u!i=NY8UrBQ%gi3Mvq*x=$hY;PiWF4
z?E)%PY<T`$_rQU5Ks<RC(O{&`f-*F6X^2%~LQ6M6<u}?!^7G&3XSIm@$c2y8@K;E1
zWoB9$JqaKew?N5*WsQ)vySp4BfJE@yAD$+dRrsG6W@TdG!wHPg{Qdk4&{2txKl$x_
z3<NOXt6UKaBBz5S9ck%TuWmu>fpnM@szF~86$q$VqkKLOw55r*xLGng94Q6#MmCW+
zpoL?}3@xVbpV2b7t$4cQUFg30-ks`6Z1z3th{mq|gS&Qh8<3iW!BdXMh0H7gQI%jK
zpK4uXRjXe*XK2<qG&0f{V9(8IyU@uH7uTcIY^aasU*h24FdUsP=|)@B+cQ6>;?{YK
z^u=`iZ5|xkhz7hIdI@qB6I`0VKX4C6J4zj;p`+%>?fF|mwD<&(1py3sPVSKmAY`<p
zLuI*-9-T*}gXtxd2<7N?lf_T4qRXTWIpP8!aO8rM?SSk#S24pNp2{{ee$UU;)Rb(;
zbQCtU3L)yV+{WoE=mPX>Y0|prCr_PXAPFpVltPXT)U%cU{*<=U*f<ew8Fb43@@yN;
zzaUeg=MO>EX7UD1V5wRFcpyhdlgf#RVW2MrEHngr`j>LP|L`HiF`NZ<5OEWJ38Hax
zT)J=ne$tAl3%dSLHB#7}3B4m`=NB1dUvljb(x6kWhMp?dV%KL_gg!J)NNL$qI5DEX
zF-JyTj2Z@#$7r0MLH-p>$So22rNO-w@wtO?`>);$kG^1%uMM4V<?l~|XafTlqZkgg
z+W-Ewo1uGq;d!)+cfybgst2;{9~{d=%PR<yEmB>O6sd%iF+au7+H&9t(?Y}2xlwzq
zkWe(R2m-2YyUmi2K;h;$Z}yVDx_I~Z-2njsdq*d?p{cqb@96wo03t&Z=qnqpcYWWT
zjLs@#zNN3@7VmwBy)3f6x#d5d?zDrA+IZA-=i`^)LJ==Yp5bk!EUw#3YWa$a=J`$x
zaU#1om1w_%ckaqiw?!kydK*D|2q0|I)-*}dI4(u@AN%^~+v~TC65%2!JW$OoAsi1+
zj?E~Z2!SFUodEJGMLzR$K}1#r5Qp|#8iZ@l#NS^&(vDXqy=EdJfT+OgLGUaE1mrmc
zQp5Z!#!%D(0FefmwHCo_=wzMA%p{`Mc&qzfeTyN7J5Pk-xD-+|B0DU)ZxE(Q3#Ki4
z(%sDuNNhbbyE7s@cdgp7e@J`#;?=9N>5j@@zkY=>oEs%^p2e<u@p^%&fts)ABj0>J
zBNZ9m@Ct4JGhpiap=E59a?WXS9RnHkx_0DMh_fPAy#Jw3Rmj{A5%Okrwhw)z-un%%
zUBDo9M0$Ner6<sWQuE;myzl^efxd(3r$~R7rw@n(@wf(I?P7AWL^{<PDVc!+Fi)|m
z`cu7KQ9BULVqhU62FOPC3j=&TfMyx=X02+@R={--itTOpkYhWT@K{DgMJ4dpyHg7t
zH|Qa}p*kv`n;z*Zbx($1;=%p<y`%-3mX=236CZFOh}RxJTm5u&HbTd{oe1cLTQ?5#
zM4=PBT41Xy8W+~e+d7yy`1r!d2N<M@Y>O~@d<=>gF%6CVlsZu;yW;@rj9jjy8^<jK
zS#GH65#hLr&;KJ@%!NJ|Fj&=n?}4$Q7O`QWD1d+`kYnUQLGp=#S9C-IUf?Jrs}_ba
z{?)PWMF~MPl6ZUQKCYwPf^y<cx60+&MCssU@JL<vJOmd)8LZA6u$x?r;3}5xD36Y1
zJ!(mh&n$=X%<62GoW@)U2zEaMbJ5}zSPb7*R}KKii-aDb%H!a}BO=ZaQY%uoz!}*D
zYd{BQB_?8s1m)S6ncqKrM@u{JxV1}TXO4M!JweXejh)9&7I48Qf}Z7B4@0UV8crhR
zF+;9dHoVPQqY-C*4zlf?F5$b0xAjy85$P$hkcvaj&W<myZ70ft-y;EQTp;KjYRixF
zxxi<IL<RTaM+ha|V(E6AdCProD$TC+*(W(cyQ|Q6P+>u>{MnY<{_6mbA3ufzn9+qb
z1H<p!*#fWXzWz;XKNspmR5CV`Wm?wozSEHVWoKuTVTWNJ(QFAJ2oozSD~akFNhR;N
z&Rx$QVKXzcJ7s0bCY<@70eQYDc6Io+@Q4;`U=oBV{ZVg*AwL)mh98C|6Do!4g)hvL
zbtd5gXo2eZ_-rMltVQ_Fx>zB##adcgXvUf<C9`gd#e4`3!HlSzc<Op>=1qZU?m%Mj
zs%VcX0+gjVz!G}eI*?QnvmF*PLtmZ&kx1x*6j#?wwIjs5)Xj>FT_DrKA99JfTOY<Y
zhP<|B>C&aGYS}P}7)XHI_owd?fkuu5cA{v9SPD|(c(zCAQc+HQjfRlF7h$ATt>3MK
z_H_Pd62y_LAUSdKgph|~q6v+d5`s3hCD(u(pIK1!IfXOZC%%8bWMU>8JE@38ucFiG
z<>SjZQ+DB{1(c73qe;46MP&~zMKK?WMZCJXcMnCkMYUriip)CXdf!lE9lZxw!uz0K
z`)6jqh3GpvX8XiCLS?ZU1*0z5o?Hu_IO={D<ZP73r*G$Q#8;u6PSELA6qzW%%|7Ps
z$jk%L-t{;{E6mPR$Xx@^S+k5?sP|EA#7;Tb_Z4Li0it^goNV8NW<s)w`DGm2z>_me
z)F(Y4d(VJy-Mjb6qG0y4@QecJ!7!O}IxcP%5g|i}GQ6R#V9#w~;OQ4C3H;$ykJH$_
z1F+umR(?(m5P8ht5tg&D=@Mm2tmyCGzYjt>6lhClRqbFdv@4YcBzo>1!Oh8Zp!3##
z*UnpOF`eT5`IXeLP@Nmp=RJ4a|A{@pZ&_%$LTh${`&)-@t|Jj{g0rHW_#6uI!(dR-
z4l)}~LBU3&aDg+>t;TuIRsA{0UC;=>ZYlRW4vn(d=FKJ){c+rT9P;O}>q2_{HiCeb
z{Me)_aOY6LHAIuaiKB0qV>>5?T9yE$B$yPlWMyR$|Mon7c(IVXSofPZREz~dy!()7
zVr?KhM9_J8=b$!}&iw#>tp?T@O5q0sAw{~h7Dvve`<&hcmimgip8~d0-mCXtqT`d`
zjORq?IA0gFW&rJ&dc=Xe<Fv?g=a!J%PXH|h&0aL)8&Is@uq_cMx^O}h406Pu0SUN9
z*5(cqD)aJ_r}*zbdPHqZ+VofT^Stk{7q>gquF%)-ChY+p(bgK21RVVQ5!j9#fM2x4
zmBJpfk}d`&y}WNc52boAlj$-LaavKvxd&7{-`65G^^T6l06GY1243m>x;Y17Omy>R
zc1)SYo6v2c4<8>JdqUz3ig!F^IulLvBX93>k`mJ1w{Ph#hyfqZ&pq-<vO*#E1SOC!
zom+9hCM~|CL{U^sOg?zV7vHmjN`FDo4aAH+#Eg;vaZX!nPgKQZ*h?$*(4xR|DJh3b
z?E-&xyZFLR<sp(JoSp=b5cst_{*!LVYXjJ|RyAczBrFA1*@515o`vN(s>gaTHQ-g&
z6F=Jb&<A5O4dU-A0@k3nq-$x(197I`#1Uq^R~5j23yyM_2O8kLyOHg@Cx*;ILqiWB
z%wV)fxeqMX6adQ|w7<XfJkDI=p@#&lkN*6E;?OdT>TwW50$t^Piq6efBZ$8CUB1pC
zfQD$)$_F9V#{`fzkxO1OZi7j{^-wu2znSED;?fg3@3nR}`9sfm&|7AOU1RPt)rTuS
zdo?d_KZLU3F)?I#Y#he&ebqzWeyHhjW?4YUtx|>cblz8x{t0b6$x0NDJ9eD)VUN$o
zXv0#(oheA_2zh`4(1BubB30QV64qAJ*l0x2omB0pCJsI|c97@@31y?E<4AZsD7c7D
z58q$V#G98wQiJqxMWoSud2H!oA_i?Qv?9Yi??dK;$jpcYXUcxao&I;QLr5!F2m>dV
zn$0UBSIan#_t!z22k<q!f?>CQs{q^duWxb0CeaoyFVN_|49%|)=nB`X0|NtoDl$t6
zF-;&L=_m0_ufzxr+Wl0752BqXvgFFfM4Ac4Q%y28V<7G5g#k=~i6G?lLIu^LNTy~8
zPTk`7-KneFoA+|~e39hE^z^lwb5m4;Ckc2YvTv>y3rLB)pk&E53!a&URZW?A$n?Vn
z01&c)C|ac~7sr;K1>?d3wdGXrxm94O)?*6s2Ve@>>HmLj2jOf$a_<9d+YH*U=ZlJp
zd{`29<P6Nep;aTBkog!gH<^FY&~>XoEIkHbzoye6gt*)=Pb)X$b>s#K39$_u{vjGd
z=v8If?|GmVuG0(F3o{B!#vXcG=R()hRS}?)Bx_sUX07AI0jeVq6#@Ay>@~}H!)rry
zDGxv)R=$2YXJR2D$p0OiqTh3b&Jg0C9gs6GfGKSqmH`Y~=tl8oxxC0A%{4Wre=?ZM
z908seEn1`+@KYARenUF0Q}7)-aCO@$cBIt)-EWwLZQopk%^XCVp!~W*d}KRj!4Q=o
z*j|h2Dl!YEO*#1`9Ln;8Z|{4T56Z?rb1k(aGiDGl;0Eh(gN4DgS2xVMFl<D^tL>wc
zqgz7e0{=UhHrA;38zWi2zP^L{sK3HB;>hK)G8HoH1~)u@!$T;JX0=X2VwpqW_|oeT
zo&FtLQMiOLIWi7`%A3Q)#00OjNXUIPDHX`@9I7vbA?X~HaE^%FH|#4A+HE-)cIU|;
zZ@ifP_l#~G>s+*spd-^vRq@=MzGLxJYAK77=X)VCu8VYOR^n`oDGurF=r7PQ4hXPx
zQTwJNM)n@SsAX-7|ABexxVaT#YHZdNenW;tSOt|?flXW0Hbhg6nNBZTC48W-`ur4z
zAQq~6?OZ#cO+sTqp}8Qq)@G@qUzc!layl?K^P8}zMCN)t+_I*<eKnF!74VDi9u0pM
zMrveYQql$J*&M6RE}gl*CZ6Bw#_okVO(KaeFyDyDO37HIL`gLFFnd#<ts4cO*p#mA
zq==G+lb81b;Cl{wd>DxJ5^`^Cgm!HUG;Ol`A70L9L_}lMGZH!xM{r^{tZ%0Ju-mSP
zRpQ?uCbk4<j{yWc4jRDdzw@EsrOE87LxT7@Z(6}Fi16tUmJzKc)L%siRE~r*<lA;q
z77G3Yo}L)(wT`43>tPZdh9E}<NkxLEwv)-#_x>ZBqStQYMIn7&F9#!|G8n>5P=i$x
zo)^xs4n1DP_kO@}h*hFdFXb$Z3pi=3b~qg)i4A1k!n7`-0m2%-Ao!scj|5JxX=}5f
zgdO2vq&AURLYQ7Pq)7Bbjl4WOJUbEGqJfABZGfu&8f2$0-TaD{Du`fax)$vgB2h<_
z=)+eKK@WX`&=uFMgZsj85}Vg2_Sz)qVzmCto3d5JEs%H|-iR0VLV*by;vgvRz#6^?
zTy*8psc)pjK?U;!r;v9%JfjtJbC^)3J~_SU#=Zx|KI{d2jF<A<5==~sC&=FgNag8+
zETikbw-_0GhKCuD!RN!R|BxYSR@TtCxH#AyQ>>EIOV|WK0&IfHq-MhLE(UJa$L!VO
zB};zC%a9p%sU%2g&<{Y7$$X^i&Kb{LVhKcNgp1CeJxicYCA)EC{oes^um0K<I=Z^+
zDU{UP-WDlaJzn$tXTlpIie;%ZW=1Nl71lF`VIxt1L4x5x#N;LHJcE=uhEalSq~Re9
z@j&&kIbFw69P`)y000>L(BHL-6}-3atDDD=J$1{Dz9YkRcU@Z+gGXpJ(9y%J^z+|8
z%zgnZdyyXZ28A4eY0?l=_ZLsY3e&E)4SS9E>;9j?dT;zVEUT~sYUUPDh}oXV`+e>&
zoPJ<@oKjFwpbD{fi|;&oE9I9`cc`hVUc&^iZp~Zp7z?5xPFo>Hs-+x)4DewMoWKjR
z8uHf#)@<JQFUjnwg(T<TuG<07U*hEMVqyeg;T)9YJ_7L=Xf~4v??JSS<ZB3i($jMQ
z9<7I!vp`3XKR|##5MVw5u`pO|9gO6NEBx!`=GNky`M-a|0JBX`=4CVt(Eihl5x^8@
zJ;n#4@#hG5ViZjear0vc+lh?h6Ag+NM#wRbwi@$QozR6OnQV<BE#NnA1o0;m@YT)J
zpFVy(zs4bulgK<Gbd=BF%ZqGnZONZqK=SkY^>sfaA>>a7RG|}=F-<|#0F^76j^K3z
ze@FnW-DvDP&z}>RY9Nsi&G?m@H*XeA*Kw<%i<@7A9-$vVai@`yHncQEYml70XJWRb
zvibS*rDKfQWRO&ml_4FSSb!JA8;>4sBlm;?cjbI@#0^y<j}krKX1EL)*X-$>*31#J
XwsYd!>+#1jm<)7HbZ+f9aQ6QJxt2m<
diff --git a/src/img/OnContrastIcon.png b/src/img/OnContrastIcon.png
deleted file mode 100644
index 3ae2fd847b997f007110cfb4d85930f639714ab5..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001
literal 17257
zcmYj(2Rzkp`@fb-L(0g`QA8qpWHjuV*`cBkWn>E(Ejf0wl1{@&O6epi86i>GqNL1(
zG^j{2{_k7Q^ZfqL>(%S=JwE6D+~c~h>wUei_a$<VvCb+M9u_7hrd4{nnr2K)3r6to
z%Q9ws@?#>L8~?Z5Q`g#uiD~sS@^3-%messWOdFW=G<RAAT>knYaKA-(SIyY>m^{k0
z&Bv%LQQM=knJ;a*u=DZ9)1MYTzHxM~xolC+zBk@Azm~V&K61LVdg~otmv4a_1_qvc
z_3z1Pu`klHN*j#7tD3e<w(iGv*}=b|rNKufWd%<p+cl=8`N%Q(ZlF{*9g(|9Wl(Ne
z-C<#6WmQs9scdd$TfKU9wO#6jJ5z0AqfTh3`i~z!^k@8SZ3Xbd`Gka1okbq~6=#-K
zmY<-AN78+n5_ldxdUVaUG-&k4k6nc>ZF>q`EG=$Zea-Fm_x4^pTvuOT{k5~mYp{X;
zeObug-0rf_85J{g^8`A5Yl~i%0?%merP?ELad9{I6-j<>yS>!I<9nY}{A@>StGP<E
zL`!RH!i5W`U%$4<%F1F7(=#%vZo9oVAvIN$uIso?sa=!#rfsRp^z?L7hSrJ)N17L|
z;*mR9RHW$g=I*LkZDD%OW)=GC@|g)<Gc&XEmoLZ2IydzE8g5nc`Ly!bhvH3i9Y;$H
zvdPoidspiXqvi~)=svHBpFelU^2leky6v*DdFRj{GWF}|WsNX_$B!Sk9Mz0^#t>=q
z!Sm?~?oDMOCmy)8v23+@u%qhSs_Sho*{v4YH*YRWm9l$2+?wO{`L!6IS`fRa@#UVA
z>rOcsiGLg(j-2?~nHlnTB4DhVYi#;wV^vp|txB~1o;`a`CW@N$4K-(0+hN(+1vH5`
z2O|Ze%;syRncDHO1^M~;zMR~>KL%dK$NtVXNWIoN7B79@ozL~YGWNall~j35Q_~*b
zZ|}L=ZdoQ8Q)G)n{wl2IS2;U58Stg6lvnZC`}4*W8Ra;6Yqjm$w=ZU9rfl4}SV%}{
z^!M*nW6I9R$jG;au3Y|K--Vw&yO^DmQ(u&gJJ!L-YPeCSv7(~F^Z0Q*w&Z19-LtOJ
z6M?Udtm5&@ote!~ySoKvrp9+4IkGwaO78x(>(;Re3dY~rS45GPPRRF5Z0n&W+8>qU
zk@M){Tg1F_2bH?Md%d<uGR~tuT~Sz4a<y~gl>yJh46i&ruS;@APcK-+eDLYX1xMaL
zV)(AkeHy-kD=Ok|W%!B~Wla-|MUiuRyXMfLL+iI4WV)p2AxYmY?*FMSt*_VE*f^y@
zXyH?a$WF`KR$2i8N|jYre|Y4?%<Szc_6`ngyu8udkAKr0JRjwi_aZ}%XO+tFZ!y^2
z>mJ=@)xYgT%<fN52fKAXTy@*(PUZF85tCC2)_gUWBr>#Pd1y4+)0?K5P1klV8s^LJ
zHZV5U_Vtx(zkA@-lZb?B&%76I4{Wv;`;DAy&eX}=n{Ruspa6#;lU7-|>&silA~GT_
zz#a>WjdV?g7zZPfy#-E2G3%ul3hTsamIjSy`OxYl<>fh=o11BIaoRREmwZ=uY>1Oj
zGlXSIA8pyVl3yh$Un^03U~tgkL$M#VBtW|1s)iJOx58NmBkkrRazicID@07L5Gxqw
zqg2!4<7;5hljr1QmdD8_N0*kWRaRDR3;f{-o7Go|&}A6YRl>ERIS;)`*}8f2=JO3g
zTdEl%XC6I%eCYK}(~C-8l+Ukoh3UH;<wIx2_evZnX2&9SSy`p{uD0fmlON8ux?^)u
zHBbhdvqVu*5%0X6oSYnvtrwD!xo~`eaH&^buEmurR|3A5{@!-%y^@l$vfkjDj+o1r
z`6Tu|T)Bc%Vn<L=vF~az?6LmG-riGU<~Mpg!v6B^-@hN*;b!IUuaF{nAgZ=j*U`}t
z$F|EWZ&>=<w{K)_B1V^<wSLg#Ou{Rxqq+JMP1Ji`-~Cz~C%=G6-164hqV7=M?`3}_
zZ&~D0=)1FQxVgEhk35AkGBP~pW<!Sg%$CI!zEs}6-2ta_QNf)@RZT71hc;A>yC?0@
zr7B@p#;2^T+@icO#^H_`Pb~8p=2ex`e}4833~ZwB)->_@`cA&&ch`xx500*rx|?Co
z=gQ&IdSext?$f6`hS@1C=DT(+6fwMba-FELZq9k8JHAZT#$VqRvaMTp=6m_vmEA^;
zhZindG&b|Q+W{ZnJn-Zp_H})Hp5@aQFP0~Y7*)n_%T7v5P<YSN>9NW_pAL@oRoB+n
zCpQSK=%IFQi`6~@d$RAX3@@?Vl(0%4t}#i>{9edk|FSFY{Yvc$w+_Ebp%(j!srY@~
zNZ+OD<Ucuj$nfH}1$ugVEn<!$!S(N+TjWvMR&Yr^i`ST~y)I%F34`dZ5e$2VyJpI;
z*Ba)NStMZHdH&k94SD+?uT@u9ZxPen`0-`(mi1~uaueUXrRcjvo(a41_TcQ~UE2?K
zmxb`TP?CR+ja6W7_kzY<Y-5|wjn=-4!u9_(@`m+l=#-et>zhK@L6*dnlyhVKH4dE*
z-GdihO75rb6O)pXB8Gw6aKTuJ65jdPNA!6tZ^X!(e1n`l%42emlAB!$*ULJsgyA<{
z7on8?`rNi+u<>e5x<}daJ1Jpb_6ZAE?@Pcfq=<-|`~E{D!+U%1<TeV0;yM1=a+qC)
zX)fyUCg#<Aw5+U+tL53av(0mib@lZtpPpKjZC=a7=Nj(g<Fnh%O+vx_-QwfNkHe<#
zFMz?3Q?|Fa@A>peguXkd=cwlr*Ee_h+w<*MJv=;y+0BIL#!E@O+3A#maE16NEF`p3
zC0yTh!PBKJY`>J?Z%gK8|5Bg$Z&g)Q&GOOBR-YOYUMZ-~2Y>Xew<;px;zb&w-22iK
zTpZ#SC)3k;Yu+<k<eDw<C>djhqlyzyi^|BL3~v-ag`lg}P*bxMyE3>{LT|sRDcjxs
zk56yedpBva|L)zpN80naFUh-}`&6IK6?OnlChk#k?w;!l)hBxv`F`)>KeLooTVFrQ
zckRrQ8XF;ueQqW9Y1m3dTbrdy#7)EB-#%2~T)d_y$7;&T^^?V``@aqjMm%)y%)nFk
zii)_zH-#)g^biwU?om3<so?hZ>5AOV%W7;ET&B|*_SGzBBO(lP)^LCQ_Th<=_s3;%
ze9C6iAq@=;M?MtG!{pi4tT~B0@;cAj{N9Bt&)eEKM%wS}E;{yMoBtQ;$B!R%McI_v
z`$|en88GI_zke}Snvt<_!@5Pb`L?BfW5=-d(=#)NoNF{LB;jlqlK2bL3$)q4U^497
zHN4gVKC|Sldajv^i#X5*<7lf0Q&{k2c)4YWWXo2s)<(bzUy%!6r4;yMBl9YrvuY<M
zbO&$pXgF`(al6gFJ<pm1!-z{m<ubCeWFj&A+c|+QcHoQBPIc?uy36>>=VqVyUU3Nw
z2srrW?tzQSJ|a?<;<T#;54XW|o;`n_fw+bnlRY(B#X458R8ZHMX|iAHk^8#`6$VnJ
zXRoN8==(Exb#Qybk}vNcuVZ6ltF5a`GB)L(m49&>fh`W6!}Dh3N(&2%v+!iA3!EFZ
zfjWA=evQ>j6zSEN`@^ci<+c;Ir807zXj7iG>@a&<FLj?T0&JY1#%en|JNTj7$6@-x
zKVFCqHC<m+Qc^P7zR%;(-0aL|35g`*g21w}vdM2xzOUir6rpE`^SR2lx)fg22vhIt
z>+9+3gXeVgIo4GYIq)hqb6?Rh1VH9<tb%cX6zuHmx;Y&ZTwGkws;dvpPX7t!@7y)%
z0q+hY2>j_}NLR5`3D@P2k&zk2D*Kc7+E&Oms-7V}{!2$ei?xC)!V4`r`b<GVfp1iO
zKQ&!%{BxUE&(j6JzIN`#SCd;>TGnuLFW1n}cyR0kkEyBYBcH)I-<0~{H~E6A`IMMU
zOiYH^)1NaG&L9K<$SlDBu-}V&A_PO9c6yY@zAJRi44a#soEpjhGxc!!lEsUACdc}Z
zyuO)$7xq!psWox@3Fpr<2?`2gr>3Gw^#4%IkzY0?j=7xygzJA}7na;`e>r@guCDHm
zh}HaA=5A|i-kl{TQ+nd}k6oggRvWf%UG?)*{TTpHL|D&XL#ADiDs?SySr9L{?MTxG
z%(9B1umCPQP1e~SP|?%V6XBM!NHutJ&Ax|j712^<G`O4%3JRQofq^a7R<9~57Vs*#
zJw*%%=;c}0N9BFd)g=IIFgcVNpJh&~)zz3DT?FIbQ*`V=@My)-M}a?Y_+Dt6n(U8f
zxU`9P@w90wwQGC&`#+E4-@Yw)(i01mx&GjRT<~OXM8HIcGn;@w+|R*A15xX2Hev09
z*oo;Qsmnd{UcJDD92*;3wrW)}oUp9e=FLyxP@75ueSUrK79`O_&q`EIj@>S7Mt=W+
z1KH+zJT=992(zcL9~nM_4LAbF1;E{~m+<m(jiB+*;Xt<fqSnch2a0>(s(aHtVxKY;
z_K@Qq?b%r}TDgJ*mL5P@O&Iu^wQEm1)WqoxQe#h^WU^JQUdHFTC?GJfceJ<aNXPwb
zUlz9Iouwxf-xYbpBQ)`;2UAsQ#NjCVapvKvsj0qExCSFHIy-rF;`ny<Kab5er|Is5
z#hh%QZx;sWb#Azv&|q4E*wSB{AUrxTkz&k%?W>JyNK(XK!GH9A{~nKB>6scIX;F@v
z80v{g6>Sr&DPFmC-@}hbc_}Rh@Vf93i*U#4F3GR3wzh83iy9ah2=^$T;e<arZ_Hrf
z8!>y}*0FXetH4KI3axen;KU@3rx^$mQ7-0pduS9gp8lrmyMqPK3n;alG(YlkupLaN
z#ay^@B@Qk))4IUvEyH1HzMAc69l`Jcv9T7fJOgt7kw1*lF3}7r%F5jNr4u~1A>)?&
zAA4)5=y(CgFv8|S%cO3y^No}vE32HH`TK`Qo-J*EaIh)~3>^i|Kb?fafMmkSIE`I7
zJ=8gJ_ZS}C>a$<tXmuirid?`b>PW2a9sh1S%%=r|=(VmV5AIDCw;Zik>>l-bt?9`2
z;>C-A;q26Ho;^FJCptZ_S!5BxKkF55?tgsWH!8z3Z){F+plAEq$l4b8lqUR^Aj$CX
za6H?CZ9eeC|GHVWev4St^(lrw>^0RcG!o|ydo{~F@%!7MzGsm~y35og_dnV|&s>Hp
zKKbL7RN#sFIkRzUXJ@Aaf=9^-PByX1-`!#HfTRGQYgq-=lN#9GWE*gi`#do*(IVDo
zvArEIZi`i3&&<t8T~p+<+YY~E_x=2OxyH<|MBlhaz|92p@x*GYXeGJS1U--8Uaubf
z$d{STG?K*Ml&$+H;^Hh?T3Rj28QL-HPr*MJIMd7qsH{A4%LGGyC6GsR1ylo067Y#Y
zqibZ8+`u+IRwLLy{>Cn~VNGT+<J((?u=?Dz&+tkLrIcUElPNSblv>~vdrQi?*#E1I
z?@-fDmEC7=JugOHLJpsgj}P~qw$dA@m81*3y}ggZ=E{8ImMvYn6xell@*B3j_0$tV
zK@@fMD~g{sP;NgAoe6qyw3Qj*C)t<{UpNJS-F9HWki%hSsNnTK9H*)MBw&p4?xFkb
zcddQ+=<Q>loLlN=+<!XUX>(y5`=Da`>nzPp-`IFHS*l`Jz@m<hjuvH3uJ!9_Z{Jdn
z6e?&qFj;JC$A#BI@XeN`(dsA)3RZ<V)qlrFA|Cq;>N``<8pV&FT(D@H-)9T5-hyJ!
z-i3H&GzJ)Ek4{(d6NkghlC5iSswsxCQ%i#iv4;s-Kmi*N*v)SkntsUEf0Ji@#;N|2
zp7X_IqqxE+Pqvp$_N@TzpqsOX&Dz4zabwW0p;L8rh8WVz%c}wjcJH@ul5~3o1;uuo
zJDdy#V|09+IJ313*Ef=j7ca(Dv{tFM=TUH@UA(wHJ)|nFe&+5CldEwE$@<P~*dmLu
zHMRl0OTKg#nczX<!j87yzy!jLV#i6QjXPw32gNEsJUKoFdlVKI*O$LqGYjwBRC?n0
z@XEx3GzRSMIed&|7_U4fL*vBcs8CnvUw624=0AV_v?x2}G#|O=)vq0J;)FrY#U!H`
zzv?Is0yS*)lW0R?R(JPDVm`O}iu(iv1m2c~JTW@ZTlcxfCbRkApC1GBS-TL$>;Ztw
z2H=_^kM0y>>Fr@*VKCzNP7M!jW~i*(GK+EiE!>)#R=t0}m)DRub9-;Te$K@MnwpE5
zSp_8Mht^uDwd4G$58cwp-djHQ9bSvTnG<D@6pA>ZFg8`#7FS58&%@old-vjEQf~i*
zt3`smda^NWR+w&Y1>8w34^{i}<x7@%jD4Yln$IUgFbrfft?zV)&GF+lkb9eLUUv&O
z{-U(QIp1@pdER-Qg{~2}xOOUMXtkdQK7GnCxvCDBe8)G+x)g}nD&(ZIpTpNrpU$n~
zRe1Yl(*TVo@fCO(7gGuT7q3<TUVe(-&SP^kNvom&0EL@-^RJM_7&Q<3u2=TXGGcv*
z;H*CL%X~P-n{kVQg!YZJ@6aA%l<8ULDps?y){q=PcBPZN!vTa;?BRYgr5m}2?(NN^
zo^rk#Vx>~G!AhDKl(e+8LP)+Dg_3=5yu$zZaUD0eJj>GGFU0kAVtK-mMCoDKx##Y%
z`sWzaw|Rfm9bQ=~7MfRDQgZKL#X|DVwm`YJ52qM+L2XpNdS#%pTPjMx74V=@{coL1
zw~L9U<5yo5esb~X+mGY4E+Zj;`*Gq>{JZBD^*1spoO)8j28vlBvVxU-N^2155{#uE
zgNP$!Mho|0voF*W0RbCemskgFv?jTM+>+KD6WH2*3k&x7yx3H{I&K^!!Jg6}KQgbW
zd|acF=^w9j_4F`YE|0v+L9k*i+}UOysmDj!R{^^u;<Xv&kG%Ssi;sVgLy*_Yx%e8P
znT?%&BYn&wigzT6V@u!Fx#=970GpbYx3|o$-MhWMcc~4tC)zyr-Xw07x0!BAsg4~7
zPFqH>7v3yh&8jhd@{R3@RRjQuiS+mPpJ7#>+@X@G8O1Y#wcEF3=@CQDikSKPn<VW`
z!@hV<mhc&F9cC*1%cHo-7J?bGX&dOK(O!T1*{D%-VUt0Ytf4j_{fi5mqW*p<v`=Bc
z#7eR@vn6m`k~z!*zH1ZxkPP<uxodu@2z_k5R!m`HVq#ynf{CW)rW3x+Nl1}(b1v3l
zpL#xi+(<VyWOGmhA@ln7UK6snFU7WOS)ms6>nX;_GB>OQ?)YBvGtO6AdW>=Rz!L?h
zx{E^eotm23Q^3J&oSf%QpI(TqAo&7#%B}PTI~F*o9sjnUcr+MJ!g4+(&mE>ZS<gM;
z%q}bYWXUoui}ypC49F&#wnI}><e^)KO#0(Tmbk<39vl^>3n{k8tKZVn)O_e%d3L$3
zp<z<Pwn%J5R9KRMTi#MYRRq-B98n5I_T{TryQ$QRM*A<wZQHgczkIg%$eCIy@>2&u
z__ZcRnwp#!K+H)yJb(L)qv2EIRaR$bXT~5G_XxwGhS+LfZX~Vtw8F9XG%&FS&g<{M
z-jR~Wy#2W^IByGx7dT4msiToJ-C6>{!MN%=uSd#r)c&gN{Yh%PpoRb_p_EV?3T5qu
z^z`U^_qI7YI~(Mz&xV&>uMt{O>$A@{@56@=(g+#`>YLcu#GZoRkp_P>yfV{>uEKHb
z*fGv9+vvFQXOZhnv-LUtJ)~)9xDpAu6#Wo8*lfegO3i(Zt_;S+=x9&rtw@^1G32w4
zLT8HMc0e6Djx92YjvfE_B2mkjAA9cY=;UPou{ObK#!C{(o8cAJj*P~m35<zfzn-04
zzD{Dy0+#3b<oNf8Q}I4V7(Bxx<zX$g91Kv2^-?xAj&!-BYwy~YiqlPxNlHp`hEzT1
zs3`^-Q5ajjgF=y^6C^V^+Phg?{DQGqkyroo>xgKafszIBWD>m}KRSNP5u#AG_#pqu
zqcV1>WWGltwRPfMp>@r>4<Gn5b>bBU%`sDs6Td$kAA@NdI45<2E#CU$)6s&sap2hA
z&!1fyau7GSO!QPNTFI+W=VB7^1Z*DG<rF4R5L;MUT3Wlb2Ip7Ir|i8Laj}JaK*6g|
z^KEBm`nYnPLOZUO4qe5sZhTZz({c9=V|o;ptnZxkiezq~GgE1JN`}BFL}uxl-Rsyu
zJeio(<XIPF$-Z=dnIwjqg42oMf*8NS272=?%Pl^ta%^lJH<3Q}<FcP`*ql0e<-}^d
zLZ-7n{cv8O1q|+73!Jp#vCC~`9d(yGoqsTny?Y=Amtiz>51YQQJLEUL%{J;663CsP
z#p-^%6%lmpvW}+FVx-;Q$-RH<qob0!zpn6<2>%G+tv&MG8^O91idkAr%u2(n>Id*!
z@WA!n%gqww#%XNAJv}`KUq)=CP&lGMw3?Y+@I6-nltq%HM2)*Ip4;4Rv-v14i5>Xs
zt3q!RI1taLyw>K<QM<zm9hrV`f`H1hZB=Y+2`@q1tpL8qb-Rf8a{BaX!>NlRyd!{a
zX`ioyF=m?fIxI^!7NsBBX6})p_q-U1>d=QLMPdR`G}_I#FA_x=ej`@HE6<F7`@oC)
zq}b7)=9ni;p&Z1mi;6&g7gPtlfa1Ug`k^%^PMpxx)V%m*EQSP&D)SypQ32p}T}Eam
zLYIQe>&=M=q}~rPzP*1e%OiK>U=$~XlCd@f8Q(l)JhwAAB*e(S)HAc@l1>}GeC+7a
zqmv&KO|lU8ZpF&E<bmLgLe6?=<5^5kE}Bc~IdVGuwx!6!&f<<u+fa?POI}q~RbaIY
zg>s)p0{h(bpax#vH#BtQ!YfZ+wRTJ~Wi2;%<ooygv9OEwTVAQPBY2-JFE4LifL~4(
z2mTZRnMQ_%g-lLO@r<t@5Ey|Y$h>k9?^T7@i3e?tZ?AunhTotbuzvg*zB)jPL8uwP
z?L2#1FY$(|=>Co!|E>5rG7^5+73(G!tf49W>QzBh63o8Y+1+J)67!@`F8EG-u?|Mq
zZ{cQ^cG|w`e>=GG7{1lAoSA#u!5xpKG+aihil|e>@+wNcNdzU6rVkp|_=>6+{dy7n
z#x<bSfvG~~c=>oZ6<x6uDLYB}!Sg?k-Q4MLr}@ZakUabq0exP-za2o>N1l^BV)1CF
z!`JWMJ$@~Hf@vCVLUslEFu9>=AHr$#{lf-l!st64KIGeJoVj|EMytJyQIA;)_KP>B
z@W{1azkZ!rV*#v9d6TH91E6*bchHu`l+SAIDEsskKE*T=)c<~w9bR0D4_NR|X6Vh3
zTDw&F^!*Bi9nF-{w!L<}NUIXCG1t>?{ign8SHd(ck;4LHl9io5zvfJ6nXQAnvvUNl
zhxZb!+<F&aO<PH`gp$&F<Yhr~!KKet5HmoB4#dGSWs1N6a1h+l&}1<1G8weqwcm|z
zT=Q0`?MI}!aPLqRGv>s7{|=ukjD;IK$4*<@E57G!4OQBwYdP_TXktK5{J-MFqJ;!|
z#eMSrBy7dABJIB7`@3Ve{_nr-LdH43!)43<%J`l;YDO^dHG@=1k>!}j{j(({s-WWz
z07V@r_H7=K+@Brim#G~~N|A|LWF@ByFSF!Z-QfY?r+#YO;+KairpJAFN{WH9XAcu8
zw_)VQcJDm+#!o}OD$i<a44j9;9pIgAjbr!pM2D(xGT`5fZ3mlihDk>nuc)Cyn%c10
z9B=9w9=87682Fi5<oc%J<NThJbZwrQ*e!L~{hN8sr5qeo?YoYbxt?*bk&e8uxxd{6
z!f+oJe?#Ig@hndB>q$yVVn@NzRwdIAMYMB?iLK^gCC`wO70ZA5`n8@Dao$m^-BbL1
zMaA{kXFjg|&)8Pef4k>WjGGLOcJAw=7P+*&bdx5h|Leo?ZlUel_hGnfcaKPi4=9xu
zRIkCdm>oJK1fo!qZhE8T;qOS2eSfOn0|UGf{P$~7%ksl6Z}0V*cRNlzqbeS4S#0B;
zR`gf|8_v_dtsSU)2fVTVG(*%XZGLU-d>WyA1iWz{4tmF|A>EF|)+rt_?S2+q!DZDz
zGt9uG^Pqq=!iG4tD%W%Vr(4!l)Db_&13;jtI#p5Tch46b8mT}!C*4Ar+|(uclfn38
zO7`s*0%<QwxMbgsMho(~mf7Nv9)5Y9YmN!yqd-S;XyDT~)A!tvsd@M2%^UmqeQ;W(
z(+&bRpzp5$uPbQ#==nXcF*92m6%~~wt8dxD$rWFinJElV=H5JS9K~UC>Y=lLoQGq~
zu&|2e<}t?iEdnE;!**phQ&r)^YcC|t78hz~Rullbzx~Y-?*}?o;=^tnk(a)pYtIWK
zNr8V;bUC=nL+0;@h!1Q`*D|lS_R_p{`S(9xg~~Wi$HIi)walsF&XxuL)dFB4F4un@
zKl@W27s#v>48N{u(yeF0BOv9I15#OGzx%R&5wlc5#Vl&hdd2h@Hy))F?wO)4iuWks
zoa}cIgAKSGTIFy6xk#Uf>w;@Gg)aX#<i;<>iwkz3SR7q`XJ+I$ETW?reo075%7n}&
zMn0ZQ)d-2mKVWl9!$Y>_5{+h|H=Mr@=c~HP7(*vsxIm%r5x>HWJKtttVv=gSnZx7^
zj`*|K%v8_(Gq-YnF+#t{J<`tXO~4uE##z#t^PxPreEITXA4EwBlVP29)CX?jGo~G{
zNL<U(Cc8Ih67H&|s(Kdu2TejsO^siLZj7nLE7*(-4Q;->3%iVS39M~sNNL#ImKpnr
ziubyR%~%ACQMW58Ez7~0USKaY-W{2@H5avj(H$z+EmZHrjN8no+-0KU^OO;>vaGCR
z|FfR#UyM&j5ircuvg76dEyTK>`cn=bGdH;fcdY`OGM=RV?{Ts;N%i}j-(W9mGqFrf
zgdV960O^{W0)C~U@QSacv~)Yp9LX$f_hupP{WbaWe`Y}C611MTh&y>sd4W8ak+$d$
zJJh$5EeOIE{M*)oOaGbEmjBI3EF|xrrSBz$y0c~+{~hO+<!urAo?Cs4hT7US;5;Z7
zu47scn%|+)G`}I%S776$!YZpjj!Cf!sO~s+?5^i(M3}>YK|!!=U1wEG@ID~2n3$SA
z`>GK8RD##5y`L1yGTqpjw`6v1TRM%VyA>-5>vG!4G{3u_1A>C|MUy^93cJoPJGLeM
z-;yj${<oxgd&u(a>gsA)p56CvpGgLI)@*Ekhc9Vo?nH4r8*_U`wJQ%jAaM@wZ2=pf
zIoau83u0ih(}w9$(D*ItN=!JrE#J;g<+|bgB;J>Y2@Ver+s}KDtY2?#dweJk2P4rJ
z)~-H9N?y7!hlFhG++6XCY6tqIOD@9zNE9}G!IAP~GV|8%hZUKq-Jdrko6R$;oJj04
zE5w}<n=S4Mt|#VS-`!2#X%bRD1^yO3JmnklayNnY^+c2Ob6QEP4gB&qszyahiWTaU
z^y*Avz<RLqH~Drtwzgdk-8nNqHAekNVD!W5FFc%NFd$!e_-|Dx9q5gHUpzOQbM?w(
zS<UmQx-?nNX!4Q=$b@&@ZcCY2w}h@9G8Or~HD!Dq26qc@>E6#ggiA>bYu^p5{?vsc
z3|i(l!ihSH1Sc%gQBPmvei>>rk;f~7`<|)A-$h8`d|X_N%$5^5{y(=J`~iz}GyOa9
z^^mi(DBbi{j{COxz2Q*t{{p8f@_%kS#4)6|atS*JN17VuP-}(@-Bj%73U{f7!UmV*
z{>@`GSJsc9-oL*rxZ{f{2}f(!tYOm8(ZMqZ%7VEes@XJ4jZF3G&BdL&zo|W#g)iVG
z^{R^Bf1;NYJlDI46s2~Zcmer+<jgmLhZNed0nEU^coy>GqaKP;7q`w&fv|S-iFA^<
zhK8W1$(7*G@u^Df;NG)man=;qvCp^jVWq>!x=ccRxJQ#1%mL!KcW%4m1=O<Ey|ifm
zG!Fxu0#BUCL@rAL&2OsUcK^DM|H3K0KYvG(a`Wm#K2y7k{i3;aa5lG{R^>be0<q|G
zm!A8Q>#%Cn0zSh!AI|zZ%FGz2#o3iO8^=TtC#%8U4#&uN5f@vS*UPSS@HC?g%p1U{
z!#`w#REpGK8aB5=Ks6o|M$L7&(>m;lg2_KnvkNuH-r->}L~oRIcjdGu|M{uU@5%(-
zhoauRrLPoFrK;?d0>Ek+8BA7gM=qzJLhh3pA3uL{jtPjD(xE4e!*Sz)yXP-nJmO2f
zw&~YU^CEyeOc>Gu_G9lKU4PRED7IjRwG~bvtK*%R=SdQ~6tcVrUM^d{9QZH#MU4vT
zZ)s_11FNyg_s^o{P}SUQiZeoybUQ%C-FaxZV#Nx^@$X&UI{!gs3%j2jmttA5Vtn>b
zP^|pZcu&0lzS_?^StN01fD~7T1X_P*eA0OYXY&F{-1WB4YOWb8KUkE8?VVo61rVET
zb-Nl_Fz}mwt<FOM>7o1$svL+*`mZx}SXKXiDF9j)o5#^$s^lk^!$|7B-YM$3VBEAX
z@Zsxg3}Zt>O>gh}6(%H_NTM7%)P5%&ua>kci-AgD9-3p{@8Q~<xr(%?c0Vd=uJRrd
zoh5+<w#PfBwwwt&4%(SnV>u?Tth9Z5f2?BHd4T&s#n(Ly^%D~klC~w(yQ0YIWU^6C
z<j3vCmc0V^=ZVwyp0PPoW0TW5HiT=(UU8|5%E`sG_pW)*4&~=OOm;=M&R(ZZoeG%!
zGl)ex)%mBm<~3f`h(|Rz<*yzNBt|}D$`?SJuI$51uH5f@so$N0^ERDDBv<(*Kcalk
zb;W$B^F}}mM}$m5;bLEXO(9diV!`|J)>o-gKW%!kdN0tx%T}yNY-sAtHP4ADyLQnu
zY-?m}to-K}c+X0C5HfE&I`o`}>e=@l{Y4!d9OUJPv(1V}+Kp4+rLx-t(U@9vjNTmY
z@S58F*k>tND_ND(I6Xm>00CtaF%u{W&LJ4BpHb2-S1CuaGE*3*@)AWLj*>s0(n*5W
zrp=?)j$&)2iN=iMd={G%G)O<*^ZBzlvK5defYxs}#vlGg9r0BWIDj=-x7{>dG*7#o
z+X+W(`R!HoY_gtu7ANF3$R*8H+1c2d*UirUF3%*@CZtfCH}5bsjCmo@xY2<QDGL8~
z|BHPjXBTKifi4D`1@OJw{l7c~1~;4t5P34aVt(_K;ft4&iV~(dE^^5&@Aucv2uL@~
z)%al4;JFA-qUXGR<EBkZ{{H^1IP8FDqNAeL@bkOhihvOi718zPBS?SO^7F@LWKa^-
zZ|LQpE+cB0<{0FMM3#p{CZS=QE(DlX`L^yqYUGEh-6eso8&fSYf?w+qxr^J6-vw_0
zRa-(ziW46AGgHkeW$X5t5F5$d%HA7o9=eHvckpq)_M&DA?<9U<ylO35f_^|i0Cm6=
z6{)aTP@5MA81>$R-w*=Q`VYYyErD<(0w_Y?c|D<HQW)yKLu)|t9gd5DE%HuOu8=zT
zjK+rb|3zWT$e(}o!o|aRek%O);ba5Ip{pSi+z)ID3=^$U39WT}vp_1cV>Z^U<Ngx3
zEZH|zIIdXk?fw#1PJB~Fl0Sp;{M%x`+tydB+#C)-2f4{0<>E*$V$(SwioVQv^$XyQ
z@Zq&<*PiAz9%}a?`aB{;Q@#q*a(jAu$%;KN9t?H(@L}tZpXpBgBYAleT|FRY_1hQ@
zIz*5H5(~nmt=@ZFCiadA3kxTtr@Q{6+$?~gz+gQW@3u%uOgsa%S+r_u$K2QVkGvK^
z8Yla^mC$ZB5RZL+lP^U#mBfctU>&yp*w6Xrb{)1BYF78i99)4dAi>XqJJoegGJtrE
zQ-XSsF<4Mb&B@7e7;ec<2@r>KTu6!~sB~FgnPr|0Sc)|kS6^wgpG%<#3;$_A7+g47
zvr6i7`<*R#7hEdmi91tl(XoEo+RWc;k^I5sGF}=)soxJ6vxi{l4T#F-pR5Kc5{yZY
z^T<sz;g+d|E*x?^vA+6`p`4@bAAObKKu=3M+RXJ4Cu~g$At<QpfkDLHY1+0FPHy>&
zvI%F1=@krsV774gxs?eGn~UHyg-}BH_;{;&`|t1FH6?*RC1xIIYHqv<3ezgAJ~r^@
zr^t|%)*sb=!i@~_KL$Rkgnlhu(c@fnbTr<NYR@VZUDuolO<**<cu|4E<i;y-brN4%
zO*F!<UcCxJw(G=qHI)2lYUOWpnxRvrL4Z0>SFczvcjUZfnBfX0s2I)}r7J`#&|(XX
zbE?3}W?jKt>+0UT;ll9u-o+nPlL3{9<h_}>d8CA{<h2k4=Y{3)Ys}CWzby%romVTw
zK%aVsX!4wE<K&sZ57HI?Y@pnip8H!qw*u8Okjw-~qEM3Bz;x{-WA<xN_crGSK2oHR
zNx-TPAwITnYp2UPuSRSXny2qqO?%PX-~{F$GJ}<my%4<$-h1n&O<JbqtXeUC$Bs$f
zFifM&*8y(Ym8*loUkE;Lm_5@dO=bzv7IRm#OSdx-0pC1tKne>L_4TU=^`Q#Qn0bu<
zP?JzFRKqRY@uqcDjj7FhO-&OZhG64{VyVw=Zi)+(7lm&B06s-4*kUA~UACR+d{WZ0
z6SnKvtkZD8g*I-~RH@nsJ4;APLa}DCR;)bJ^vw6Ln&d5evrxg+Wvz-}tpTr|Eo;~}
zcs1<#Qo-O2|7tbB7;b%A=a6gPg;7j?DQL`_WjP!lBcR5E6avg{LLcH4M1k>*8gry}
zM!S*$N&|Jv?LZsZ=7#q5m*kZ^drta3Hy88HJEhU3a5W`GgltGy@5o3rO4PT@lZJ#r
zNk+|0-m|Y!5f)wqHN`_xMVisOV^c^}2TzGEyxQ@3ykPu4W?G-&u!;#2s)n?K)S#E0
zM19!*dsi%~2`Eg}!EWxkcPapCi3JfSMf8O54Wx)^2^n|gUb~QR2sTjPF|@Mc#JKs7
z8ZA;an=vY|dJSj=GOC5a?KTR8%KR$6=TR0r-W|e)-=+fi^wsb%A>LFQB&=my4#<X!
zEgv-TMT~B57QreAiSPqNygd8)2*AenuS$*F6Hh|r`<&OKL<mpfk}qRrExPq;-@a<<
zqNgB&iNuT;lVyP1YaB@`N_&dk!RyMWe?<G9+lgFpK@U0b_B;DTv4f7SZh<!)AaLg5
zB2@Ej9@n1u#;WYBEK*PE*tk#NGbp9orJ)gRv3^)35&U6t`bdvE*zrsJY(LslVfEMa
z;B8)4CMEwb>zx{}Y$XHBV&DZmf^(Bg*REX)j=x?U>s6nfbhtgsWulqIPKvLH{%-y^
z<8eWuQiai1yVMllySD}&q=K-=<}_L!{OUSVv`_yV&@M~_hUbNL@1asR)9u-B1F}By
z9$>-2%r7NbeDB>Dq9g*~ZxM6)3AtLwv-Ashg7Ov|g!YaW8=H&*<bCl%*Ei1-gmp&y
zqNPwEHA3|VLPW6SYppceAwF_=9<$TlJ_FYy!4iTmHsU`J*iihe2eu(f!`qMaBGmIj
z^A>Cn6<rFEzv=XhZX_+M(7ls$?oVSF5mpVe7rdygCECJ-#6;AZWfY{_p9%{4hk-|S
z|Kx#u=0-cJ{a?Dv1?M&Q(!6xz2!z!SBDOiRvgzEeOm7RES!V~sW_55ObiK6W1!6(V
zu7!l=g0b{%aLJHDl_Ah8r}MZnA*4%|P5&?;=dN`VicM&h??Fzfq@<)fc(DxzPK3$B
zD+}&DW=M*Q?}EPlLSiDcO*BnQC`C_9e5pWH_8OptPu*v<2>{F7yVYsSQ~BvR&t$)C
zHW3QlFDRJ*g50t9>rq(YN68|~yiRiac3$#ZLb00HJr}_l<896bsSUyuaU)&bW&e{C
zMz2?JTR$&5KV+q_9qtOSSb}<Q2bNcB4+nP|+Bp`IJcw~JQ0qp_*HWqa;zkZ{>eukw
zhwkaV+K;ocv-L#RBqT$frj2vsl-y5a;Skpyq&|Z^OA|D^GWy;hvc^h?qaZ}}8fHHO
ze79TW6fKXij-Gwbmd}e!sfJ+Zkr%j6tU4Ta_@@K>aCiaHRU*_wQl=@w0hJq^J)!L}
zC7*$p9FPpZx^Z`p6{ls4JX2Oqj<B3uQtHM{l=Pl2Ut%C)-XJ2vj0zr<E{SM&0Wpqe
z405PRF7R&9uboBjgRq8%ok}?E=6fE+V=>T436QF|G2<rWgTGM6LH7srWJ;Fst%OIt
z^_TTB&8-F&Po|w-=Fr|+GWMJo%2=B3xn*s5%I*ClwgRX63$W{!^xL<$K-h2w3Yqls
zvg3MA4VNPk_w<};rUP&dC<otjs^@`;WXSk^ea8VMTLp-Ax7qvGH(A5=d}^R?p$q93
zl2maUd<Y@3am|x&+E+)>qM|A>d-ti?*6c_$2S8n98TQwq4Pg-Z^EI$7O1?wqabubt
zY=g(N0ALRR0yVj`{m~hRq`4XOiFwf{&3rIyLD-KW*|+Th&Fqx>Y6!2in3!kKgZ%4`
zkY2ug`A|mz<U|Gsc-rFSnchD+&WbVyDNKWr;&APJxD`>DG&QvCmwB)eohQh2t5JN+
zHfKNMFk^=lQ43zeYphR;$iTRvIw7Jlcmyq?=JU}!@W^w4ROzp^p>s3GhuO7ysdFy?
z)0^(>Q$(K-WI+k~L=(X!W&5mqc0!RPErYaTIGNLD&R8DzlL_(6o9lzNZy5_q<@m@O
z+=$w9@@Ognw_JV0D1FZpfA?WNFNE>_tEJgJ)YJ{Y@?fR<yT8$DKZ4}gc4ETqvU&&)
zK1*ycJ*(p^Z*Fdmxko$9u;Zngo}Sx0rgv(JtmEN{f<EdH4%E}vHwlj-Xi-p4NtHZs
z!PrzT&QI*Zg$qrPsR<lfmtactNK$2!3+Irf^!E1)(=*pY6}=0kR4?=(4YODGQ&WYY
zx<(Z08QHAqxD5hWqL+uxOY3`AsbyepQ_f@muRP#sYOlAitFd9ldv+m>nw0dSv_uya
z$bw7{hX#LMw~bmtb|O0pH(Q7@*d&Daq{E#Y#0e<SPF<}M$;fGe)?V6vF?@_P){C|f
zJyEd+l;WF#sLRsoc0iT6zdV#5#oWH+2HMbaC~$GYn&^sw%s9)3T})b<4O!L4S5X5{
zd*X14nhIU_+8SJ@F){7jxf8~=rmw%hcW_XYo=L5V7aZjEhb&Yw0(;b#ood_np_pbN
zfm{gE)G8Dun{v%Xp+wvsFuDQ97`WV27-H4o=6a0)4L6G4aNBJz<I74!=|*%%gPU!k
zcC-x~;OI)K(&cj%2E4omvm&?~7M_*>o)IEwz@W33;xzyjs9J?oRCo}1KDkR8opf-|
zf=nZZN1g==24c1A3W|z!;Bw&@BLMz031y~dg)qZSnju(NSRf2OUF<PtPeJtY`Bb-4
zU!MitK`RK)vymdR3oT_N>W~cgrggy$-#E(`jg2(`0H?_H&UwooSGXK9iRG}mD!hXT
z8_<0q(}YTY{PJ}o8zdxR-h7jcKuw$Yn0dJmLs@mzF?*tMJ$P^fdH^VB^9Uk=<3B3o
z%fP_UXbtR1tpX;Cf#!a7VVY-NeNRia!Lnt`dYl=N?0GN=(*A-5xiwr|5m3X7z56hb
zbpAY%=!3O`PR_|IuYRMN8b6SHHF9?Z^r3Rp%bUu>!bm}N5{aZV<SVM6ZJ=CshaMC6
zs;}C(F2=!K8^jwZg({>O_@2cbY&3C0;G0O~ID76~WkZ}thjcrVDCvVwnL_1WEu6Hw
zoyNhz(OdevtBPoX;FF(LS8J(6>T;lU<P^LN60L<eg470v7`Q+Zk$|Qt^b8(8*A*SW
z`Q(VmJp!47mNA7~m$q9&Fb`aK6gLkFsHImxk3jgZ%iE6|t7utH+TC9Q?apd!|4zgs
zAV;+LIIhFj!igXWB3UiipmLMb1D`=qOPU*GWzAKz{3h)R!w)+-5yjd?^$-<6ruySo
z*Cy|VS7=7P97U?7Aa0sm{!H-tK;m#w-j$Q2)<EaOe3pIG6)06#qT410%!obQ+UV#g
z`t!`>?pQ@*mx-4k%6^|lwVLuF8(k!S|Ls!9xye&w(}XBTxK`4KFgrVobw-($hlVU(
zy0jm6XBRI1p2yyYhc~t<gTq7UJwvh+_O^cN3Ijd8ouCBo1^@BJT6723MCR^)ECV30
zhL0}>`!hK?sVkamgN*>u^(y|b*kW{cczb(qb9=iDdPr81-IGizkyh6LsS}n6TiO8&
z1W6uF;<$4zqRek%>~3%Gp$lgAtizo(xD;qusX=ob19jo9*H_%4;EzC;n5#BG(_50B
zybu?0B|sxCPLwYTX-+u=qilk+sk^Maj>wU_2lTCKs;U;@>~#<?i6ot9$B#5;EFsRU
zbx2G=J(w0Y-7k0%$r)(HY@eHp`CONXOGrF}`h<pA*#kn(>%A#Kr=h6>bhT1_8DDl6
zeGT2Y?pk=^wt&%t8#iv$&DkTS)Xw7n<*hVPmLpe1Kj9;^BN}3jd$7~5@9g7(5QLm|
zbouLiJ3+tCuX{J|dkjJ8^jD9t-K0;BC3)wf9isd@5A!N{Zm`OuE+8#M>}Jd9#x>Fp
zO@aCYAe5d5?Yn~dsQ+zTVunX0{ZCu`(6I%W(@#qG#zKomKNwhjM8#p~UEvnEovKzV
zO~>=dWr#~5pGCZ58LNG#4+`#3$Nj@4Ld)2ak0N$JTElnOu3VD7Yv38<p*{E+V$e_k
z{{M|wB(DYI-!wd_Q!3wo)N{)XP@a&c$U$J?+MbutAVgV0@C9klbnkrVb<>?GKF?iu
z&z?0<5WH{|Uzht9DdaXNP>6U<CESpv)2`qM4?FtvXBFDX0voL<$zm{g{0xs@bN%5?
z)%y=kA*X)^g<jKRA7=!5nF4q#qW4Bi7B)b(H=!_AUtgaP-2{AeMW@tiBdNItf#bjR
zJ|C;KS%P>x+OYlmL9~EEFh^!8eAwB!zdv5%x#-p4(?o{Ccb_S)FzWT)1H8mBYigcF
z2uN;)$Q4x0N?@GbD&Z0|hdaASXAXR0V51vli#JXlDl#@S@18dnS`b`s6Hej_#KjKC
zl^*$jMSmt+avuf(N3n(grqzW}n9l%YTO@k}v%n9b8!qNAJ4EqHFee1eBMzaFaoc~p
z6ru9(M}0m#A|k?fb%M)bN5_K|r<cG*?(+9XKOpYjC4qjZU(w)W|KsBePamJe1|hRp
zoVupAHjy-z+!jznXYr;VqoYqz(vUt>xj6KFbZyMH?(%pj04Wf|BkZARFuadyo{Q!H
zBCCtxRa}jFD{+p(NPfWlQ12aFaICv*D}6Uh4MU{#^)1U4qy-VodSKAy+GXf(phCF`
z;=t?YCnN0VT0U198ZMA_9A6~n)|cjd1v`JAr+jv5ONxZ`X{dq9M2wjGspgL%E+b7i
zq*HXB@I!0r6o^B{k!A`J=Py~Zq(#{=TdCcV9qLWEZU?M0U?6#KmJf}+e<Z*BIjU2h
zxCukP(+(*yRSc2DqtJ(S1rGA#Zd6rN>{N-U?fdcbC+Y4bjiB?5!j8K!pf^ItGbmG~
zVV3h^&4}7BB+h|$MT#xFb*qs|gxi{$OLdTkQXrv*#!eeJYQF5H=_rGl5dl83`*1+h
z%$qlLRU+NilXhT42qage9k^#?WD9+_#WD0j5Xud*CeM-ft>`XA<<~k1AcH7?@p?2r
z#^<{yTGqaLRR!;U53G0Dp%_iiJUv5Xjzo%##blx#4QFDa1eXnBm$8lY^c)k@qDAEI
z0zi;IuXKyBK<{u=)4fBxNjDDKsZSCLZFTNjaQdX}%B`z}8<W8>OiJxpJB%*L?L<2m
z^UC!np<aUJvFrzQM!ACUVH)0Aq@BIG<%k?<8YB-vYBd^r)X@w>pfzjv{{4J7k(xKx
z^_sDtU=&w@RgMI~ErhHo-^={*Wfeab^oD@G-2x=5)Z{3S=aNa}gwx^%A|%}*Jw%PK
z$&!?o7U@y;hZ(`A5<NC>Ije>@W_b5f6Wh=NwtL48rd_*sq4}pW^H}nBYys&+2j=KS
z%hqPntVWUHsk!9Va5cX8iSO`fyhBekf%`*Q2rucdX_oDfi<9q=gAG9po&gs}nnuXA
zM7Q`JmFO7H;g(H&YC#VsUm^Jac_-VU8YiC{my;uk8@yMw3jj$qKkLRGDD%+~=s30w
z6~C3JCbw8?a^gnJxBLUyH2;4s{}BFMn{W9afFS)*@E;lDtLm|+^!4J_kgh^+AD`@2
z+B1~+^r0I*OVnckjc|xtW{ZKkT8=980uPYCMSw3Jm_|P$mr|XkNd-eh=44Ke^H@O9
z|NTJ&AZn7>|76!fc^N<k`s@nSM$Uq!<cgOyIlPYhoP&|$LS$m3x63r&Rt;SRTw#H~
z8e!?F#&Xew$VC>Do12TTip^fQbScU%^v@Cmi<U@D1$Yq01;~2m{|W;--$4IoV1rT8
z=E08>&x+L4)Syw_*pdc<ocsw0Sj8hSm66?LK7*?vaz2Ny0t!S%S&6#t_=^fGgj0uL
z5b3u7GM}?h8~`y!m5077;^*gIFzq!rfZn3M{HqgRA>R5pFdzi7@A$X(NHbZ_h7D?3
ntR)J9gvzl3B41(o9i}&NMJI?|a~6L)gGo=zSo7|#gQx!=1V%$3
diff --git a/src/img/termos/handshake.svg b/src/img/termos/handshake.svg
index 4ace30bf..7bde658e 100644
--- a/src/img/termos/handshake.svg
+++ b/src/img/termos/handshake.svg
@@ -6,9 +6,9 @@
<path d="M117.537 114.957C117.537 114.957 156.706 141.311 156.616 149.654C156.515 159.107 146.919 163.575 139.855 158.654C132.79 153.732 106.434 132.572 106.434 132.572" stroke="white" stroke-width="2" stroke-miterlimit="10"/>
<path d="M185.722 2.01043L162.527 16.4248L210.805 94.4066L233.999 79.9922L185.722 2.01043Z" stroke="white" stroke-width="2" stroke-miterlimit="10"/>
<path d="M2.0007 79.9816L25.1953 94.396L73.4726 16.4142L50.278 1.99984L2.0007 79.9816Z" stroke="white" stroke-width="2" stroke-miterlimit="10"/>
-<path d="M57.1547 103.426L57.1506 103.423C51.5036 98.8576 43.232 99.7433 38.6754 105.401L30.5923 115.438C26.0358 121.095 26.9198 129.383 32.5668 133.948L32.5709 133.951C38.2179 138.517 46.4895 137.631 51.0461 131.973L59.1291 121.937C63.6857 116.279 62.8017 107.991 57.1547 103.426Z" fill="none" stroke="white" stroke-width="2" stroke-miterlimit="10"/>
-<path d="M76.2726 136.557C80.1935 131.688 79.4338 124.557 74.5757 120.63C69.7176 116.702 62.6008 117.465 58.6798 122.334L50.8611 132.042C46.9401 136.911 47.6999 144.041 52.558 147.969C57.4161 151.896 64.5329 151.134 68.4538 146.265L76.2726 136.557Z" fill="none" stroke="white" stroke-width="2" stroke-miterlimit="10"/>
-<path d="M94.3195 153.237C98.2404 148.369 97.4807 141.238 92.6226 137.311C87.7645 133.383 80.6476 134.146 76.7267 139.014L68.9079 148.723C64.987 153.591 65.7468 160.722 70.6049 164.65C75.463 168.577 82.5798 167.814 86.5007 162.946L94.3195 153.237Z" fill="none" stroke="white" stroke-width="2" stroke-miterlimit="10"/>
-<path d="M110.877 163.334C114.192 159.218 113.549 153.189 109.44 149.868C105.332 146.547 99.3147 147.191 95.9999 151.307L89.3855 159.52C86.0707 163.636 86.7138 169.665 90.8219 172.986C94.9301 176.308 100.948 175.663 104.262 171.547L110.877 163.334Z" fill="none" stroke="white" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M57.1547 103.426L57.1506 103.423C51.5036 98.8576 43.232 99.7433 38.6754 105.401L30.5923 115.438C26.0358 121.095 26.9198 129.383 32.5668 133.948L32.5709 133.951C38.2179 138.517 46.4895 137.631 51.0461 131.973L59.1291 121.937C63.6857 116.279 62.8017 107.991 57.1547 103.426Z" fill="#1AB9DE" stroke="white" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M76.2726 136.557C80.1935 131.688 79.4338 124.557 74.5757 120.63C69.7176 116.702 62.6008 117.465 58.6798 122.334L50.8611 132.042C46.9401 136.911 47.6999 144.041 52.558 147.969C57.4161 151.896 64.5329 151.134 68.4538 146.265L76.2726 136.557Z" fill="#1AB9DE" stroke="white" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M94.3195 153.237C98.2404 148.369 97.4807 141.238 92.6226 137.311C87.7645 133.383 80.6476 134.146 76.7267 139.014L68.9079 148.723C64.987 153.591 65.7468 160.722 70.6049 164.65C75.463 168.577 82.5798 167.814 86.5007 162.946L94.3195 153.237Z" fill="#1AB9DE" stroke="white" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M110.877 163.334C114.192 159.218 113.549 153.189 109.44 149.868C105.332 146.547 99.3147 147.191 95.9999 151.307L89.3855 159.52C86.0707 163.636 86.7138 169.665 90.8219 172.986C94.9301 176.308 100.948 175.663 104.262 171.547L110.877 163.334Z" fill="#1AB9DE" stroke="white" stroke-width="2" stroke-miterlimit="10"/>
<path d="M71.6484 24.2119L81.606 28.3382" stroke="white" stroke-width="2" stroke-miterlimit="10"/>
</svg>
--
GitLab
From 4e835cb6eb81514d2169dd1626c1f50b57be534b Mon Sep 17 00:00:00 2001
From: vgm18 <vgm18@inf.ufpr.br>
Date: Thu, 21 Oct 2021 12:18:16 +0000
Subject: [PATCH 2/3] Develop copy to implement accessibility
---
.../Components/Components/AdminTemplate.js | 26 +-
.../Components/Components/AlertDialog.js | 49 +-
src/Admin/Components/Components/AppBar.js | 137 +-
src/Admin/Components/Components/Button.js | 56 +
.../Components/DataCards/ActivityCard.js | 31 +-
.../Components/DataCards/CollectionCard.js | 48 +-
.../DataCards/CommunityQuestionCard.js | 40 +-
.../Components/DataCards/ComplaintsCard.js | 226 ++--
.../DataCards/EducationalObjectsCard.js | 83 +-
.../Components/DataCards/InstitutionsCard.js | 49 +-
.../Components/DataCards/NoteVarCard.js | 40 +-
.../Components/DataCards/RatingCard.js | 49 +-
.../Components/DataCards/UserCard.js | 192 +--
.../Components/Inputs/CreateInstitution.js | 143 +--
.../Components/Inputs/CreateLanguage.js | 144 +--
.../Components/Inputs/CreateQuestion.js | 183 ++-
.../Components/Inputs/CreateRating.js | 146 +--
.../Components/Inputs/CreateRole.js | 146 +--
.../Components/Inputs/EditCollection.js | 85 +-
.../Components/Inputs/EditEducationalObect.js | 152 ++-
.../Components/Inputs/EditLanguage.js | 57 +-
.../Components/Inputs/EditRating.js | 46 +-
.../Components/Components/Inputs/EditRoles.js | 57 +-
.../Components/Components/Inputs/EditUser.js | 104 +-
.../Components/Inputs/EmailInputs.js | 111 +-
.../Components/Inputs/IntitutionsInputs.js | 48 +-
.../Components/Inputs/NoteVarInputs.js | 45 +-
.../MobileComponents/MobilePageHeader.js | 35 +-
.../Components/MobileComponents/SimpleList.js | 39 +-
src/Admin/Components/Components/PageHeader.js | 44 +-
src/Admin/Components/Components/Table.js | 3 +-
.../Components/Components/Unauthorized.js | 4 +-
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 | 174 ++-
.../Pages/Pages/SubPages/AproveTeacher.js | 315 +++--
.../Pages/Pages/SubPages/BlockedUsers.js | 234 ++--
src/Admin/Pages/Pages/SubPages/Collections.js | 1121 +++++++++--------
.../Pages/SubPages/CommunityQuestions.js | 235 ++--
src/Admin/Pages/Pages/SubPages/Complaints.js | 310 +++--
.../Pages/SubPages/EducationalObjects.js | 160 ++-
src/Admin/Pages/Pages/SubPages/Inframe.js | 77 +-
.../Pages/Pages/SubPages/Institutions.js | 309 +++--
src/Admin/Pages/Pages/SubPages/Languages.js | 181 ++-
.../Pages/Pages/SubPages/NoteVariables.js | 96 +-
src/Admin/Pages/Pages/SubPages/Permissions.js | 111 +-
src/Admin/Pages/Pages/SubPages/Questions.js | 119 +-
src/Admin/Pages/Pages/SubPages/Rating.js | 96 +-
src/Admin/Pages/Pages/SubPages/SendEmail.js | 16 +-
src/Admin/Pages/Pages/SubPages/Users.js | 203 +--
src/App.js | 310 ++++-
src/Components/Alert.js | 2 +-
src/Components/AreasSubPagesFunction.js | 4 +-
src/Components/ButtonGuardarColecao.js | 22 +-
src/Components/CollectionCardFunction.js | 111 +-
src/Components/CollectionCommentSection.js | 45 +-
src/Components/CollectionDowloadButton.js | 22 +-
src/Components/ContactButtons/FollowButton.js | 30 +-
src/Components/ContactCardOptions.js | 18 +-
src/Components/ContactForm.js | 142 +--
src/Components/Firulas.js | 29 +-
src/Components/FormInput.js | 108 +-
src/Components/Header.js | 109 +-
src/Components/ItemCardAction.js | 59 +-
src/Components/LoadingSpinner.js | 20 +-
src/Components/LoginModal.js | 62 +-
src/Components/ModalAvaliarRecurso.js | 12 +-
src/Components/ModalExcluirColecao.js | 10 +-
.../PageProfessorComponents/PartOne.js | 62 +
src/Components/ReportModal.js | 5 +-
src/Components/ReportUserForm.js | 52 +-
src/Components/ResourceCardFunction.js | 20 +-
src/Components/ResourceCardOptions.js | 4 +-
src/Components/ResourceList.js | 23 +-
.../ResourcePageComponents/CommentForm.js | 64 +-
.../ResourcePageComponents/CommentsArea.js | 23 +-
.../ResourcePageComponents/Footer.js | 18 +-
.../ResourcePageComponents/Sobre.js | 22 +-
.../ResourcePageComponents/TextoObjeto.js | 18 +-
src/Components/SignUpModal.js | 24 +-
src/Components/SnackbarComponent.js | 11 +-
src/Components/Stepper.js | 35 +-
.../UserPageTabs/ModalExcluirConta.js | 4 +-
.../UploadPageComponents/Forms/Keywords.js | 4 +-
.../UploadPageComponents/Stepper.js | 42 +-
.../UploadPageComponents/StyledComponents.js | 53 +-
.../UploadPageComponents/UploadFileWrapper.js | 20 +-
src/Components/carousel.css | 27 +-
src/Pages/ChangePasswordPage.js | 60 +-
src/Pages/EditLearningObjectPage.js | 18 +-
src/Pages/EditProfilePage.js | 17 +-
src/Pages/ResourcePage.js | 447 ++++---
src/Pages/Search.js | 140 +-
94 files changed, 4772 insertions(+), 3959 deletions(-)
create mode 100644 src/Admin/Components/Components/Button.js
diff --git a/src/Admin/Components/Components/AdminTemplate.js b/src/Admin/Components/Components/AdminTemplate.js
index e0affe5c..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 style={{ padding: "2em" }}>
+ <StyledDiv contrast={state.contrast}>
+ <AppBarAdmin contrast={state.contrast}/>
+ <div style={{margin: "20px"}}>
{props.inner}
</div>
- </div>
+ </StyledDiv>
)
else
return (
- <div style={{ backgroundColor: " #D3D3D3" }}>
- <div style={{ padding: "2em" }}>
- <Unauthorized />
+ <StyledDiv contrast={state.contrast}>
+ <div>
+ <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/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/Components/Components/AppBar.js b/src/Admin/Components/Components/AppBar.js
index b596c35f..2531b3e2 100644
--- a/src/Admin/Components/Components/AppBar.js
+++ b/src/Admin/Components/Components/AppBar.js
@@ -6,68 +6,99 @@ 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}>
+ <StyledTabs
+ 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)}
+ />
+ ))
+ }
+ </StyledTabs>
+ </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;
+`
+
+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/Components/Components/Button.js b/src/Admin/Components/Components/Button.js
new file mode 100644
index 00000000..dd2aedd0
--- /dev/null
+++ b/src/Admin/Components/Components/Button.js
@@ -0,0 +1,56 @@
+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}
+ 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;
+ }
+ :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 915df2f9..c93bb1fc 100644
--- a/src/Admin/Components/Components/DataCards/ActivityCard.js
+++ b/src/Admin/Components/Components/DataCards/ActivityCard.js
@@ -16,23 +16,27 @@ 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";
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'
const ActivityCard = () => {
+
+ const { state } = useContext(Store);
+
const classes = useStyles();
const [error, setError] = useState(null); //Necessary to consult the API, catch errors
@@ -102,39 +106,38 @@ 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>
<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>
<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..7929d260 100644
--- a/src/Admin/Components/Components/DataCards/CollectionCard.js
+++ b/src/Admin/Components/Components/DataCards/CollectionCard.js
@@ -16,15 +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 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";
@@ -35,8 +33,13 @@ 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 = () => {
+
+ const { state } = useContext(Store);
+
let history = useHistory()
const classes = useStyles();
const urlParams = new URLSearchParams(window.location.search);
@@ -148,7 +151,7 @@ const CollectionCard = () => {
];
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -164,54 +167,51 @@ 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>
<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" }} />
{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 b8ae952c..45208abb 100644
--- a/src/Admin/Components/Components/DataCards/CommunityQuestionCard.js
+++ b/src/Admin/Components/Components/DataCards/CommunityQuestionCard.js
@@ -19,13 +19,11 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
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
@@ -35,9 +33,14 @@ import { Link } from 'react-router-dom'
import Unauthorized from "../Unauthorized";
import { getRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import LoadingSpinner from '../../../../Components/LoadingSpinner';
+import StyledButton from '../Button';
+
+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
@@ -102,14 +105,14 @@ const CommunityQuestions = () => {
subTitle: "Email",
prop:
item.email ?
- <Link to={`/admin/sendEmail/?email=${item.email}`} style={{ textDecoration: 'none' }}>
- <Button
+ <Link to={`/admin/sendEmail/?email=${item.email}`} style={state.contrast === "" ? { textDecoration: "none" } : { textDecoration: "yellow underline", color: "yellow" }}>
+ <StyledButton
variant='text'
- color='primary'
- startIcon={<EmailRoundedIcon />}
+ color='inherit'
+ icon={<EmailRoundedIcon style={{ color: state.contrast === "" ? "#666" : "white" }} />}
+ text={item.email}
>
- {item.email}
- </Button>
+ </StyledButton>
</Link> : null
},
{
@@ -123,39 +126,38 @@ 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>
<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>
<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>
);
} else return <Unauthorized />
};
diff --git a/src/Admin/Components/Components/DataCards/ComplaintsCard.js b/src/Admin/Components/Components/DataCards/ComplaintsCard.js
index 4c3fc133..9a35bdcd 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,20 @@ 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'
+import StyledButton from '../Button';
//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 +136,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 +154,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 +170,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",
}}
@@ -231,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={() => {
@@ -247,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={() => {
@@ -263,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={() => {
@@ -287,7 +299,6 @@ const CollectionCard = () => {
>
<Grid item>
<Typography
- color="initial"
className={classes.subTitle}
variant="h6"
>
@@ -295,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>
@@ -323,7 +334,6 @@ const CollectionCard = () => {
>
<Grid item>
<Typography
- color="initial"
className={classes.subTitle}
variant="h6"
>
@@ -331,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!";
}
}
@@ -360,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>
)
}
@@ -513,7 +522,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 +552,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 +678,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
>
{
@@ -695,23 +703,22 @@ 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>
<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 +727,7 @@ const CollectionCard = () => {
{
DisplayButtonsArea(item.complainable_type)
}
- </Card>
+ </StyledCard>
</Grid>
<Grid
@@ -729,7 +736,7 @@ const CollectionCard = () => {
xs={12}
>
<Grid item>
- <Card>
+ <StyledCard contrast={state.contrast}>
<CardContent>
<Typography variant="h5" component="h2">
Denúncia #{item.id}
@@ -740,13 +747,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 +765,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 +789,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 +803,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 +827,7 @@ const CollectionCard = () => {
Actions(item.state, item.complainable_type)
}
</CardContent>
- </Card>
+ </StyledCard>
</Grid>
</Grid>
@@ -853,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/DataCards/EducationalObjectsCard.js b/src/Admin/Components/Components/DataCards/EducationalObjectsCard.js
index 08a8f325..bda7c746 100644
--- a/src/Admin/Components/Components/DataCards/EducationalObjectsCard.js
+++ b/src/Admin/Components/Components/DataCards/EducationalObjectsCard.js
@@ -16,23 +16,21 @@ 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";
-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";
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 {
@@ -40,8 +38,14 @@ import {
deleteRequest,
} from "../../../../Components/HelperFunctions/getAxiosConfig";
import SnackBar from "../../../../Components/SnackbarComponent";
+import StyledButton from '../Button';
+
+import { Store } from 'Store'
const CommunityQuestions = () => {
+
+ const { state } = useContext(Store);
+
const classes = useStyles();
let history = useHistory();
const urlParams = new URLSearchParams(window.location.search);
@@ -190,7 +194,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,
}}
>
@@ -207,7 +213,7 @@ const CommunityQuestions = () => {
];
return (
- <Card variant="outlined">
+ <StyledCard contrast={state.contrast} variant="outlined">
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -234,7 +240,6 @@ const CommunityQuestions = () => {
<Grid item>
<Typography
className={classes.title}
- color="inherit"
gutterBottom
>
{item.name}
@@ -245,53 +250,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" }} />
@@ -306,16 +301,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..cf8b6da4 100644
--- a/src/Admin/Components/Components/DataCards/InstitutionsCard.js
+++ b/src/Admin/Components/Components/DataCards/InstitutionsCard.js
@@ -16,15 +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 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";
@@ -35,8 +33,14 @@ 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'
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,54 +167,51 @@ 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>
<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" }} />
{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..d179bdeb 100644
--- a/src/Admin/Components/Components/DataCards/NoteVarCard.js
+++ b/src/Admin/Components/Components/DataCards/NoteVarCard.js
@@ -16,16 +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 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
@@ -33,8 +31,14 @@ 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'
const NoteCard = () => {
+
+ const { state } = useContext(Store);
+
const classes = useStyles();
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get("id");
@@ -98,49 +102,47 @@ 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>
<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>
<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..c103f58c 100644
--- a/src/Admin/Components/Components/DataCards/RatingCard.js
+++ b/src/Admin/Components/Components/DataCards/RatingCard.js
@@ -16,16 +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 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";
@@ -35,8 +33,14 @@ 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'
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,54 +155,51 @@ 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>
<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" }} />
{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..0799b4fd 100644
--- a/src/Admin/Components/Components/DataCards/UserCard.js
+++ b/src/Admin/Components/Components/DataCards/UserCard.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, 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 Paper from "@material-ui/core/Paper";
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 +39,17 @@ 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'
+import StyledButton from '../Button';
//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,23 +238,24 @@ const CollectionCard = () => {
</Paper>
}
- const actionsForBlockedUser = (state) => {
- if (state === "blocked" || state === "banished") {
+ 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 <Typography color="textSecondary">
- Usuário não bloqueado
- </Typography>
+ return (
+ <Typography>
+ Usuário não bloqueado
+ </Typography>
+ )
}
const actionsForStateTeacherRequest = (state) => {
@@ -254,43 +263,43 @@ 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>
)
}
- 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 +361,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
@@ -370,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>
@@ -412,35 +417,34 @@ 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' }}>
- <Button
- variant='text'
- color='primary'
- startIcon={<EmailRoundedIcon />}
- >
- {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}>
- <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 +452,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 +494,7 @@ const CollectionCard = () => {
xs={12}
>
<Grid item>
- <Card>
+ <StyledCard contrast={state.contrast}>
<CardContent>
<Typography variant="h5" component="h2">
Informações do perfil
@@ -505,10 +509,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 +521,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 +532,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 +544,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 +552,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 +564,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 +575,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 +586,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 +597,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 +608,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 +641,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 378c0960..742bdbe9 100644
--- a/src/Admin/Components/Components/Inputs/CreateInstitution.js
+++ b/src/Admin/Components/Components/Inputs/CreateInstitution.js
@@ -18,10 +18,9 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
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';
+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,13 +28,18 @@ import ListRoundedIcon from '@material-ui/icons/ListRounded';
import SnackBar from '../../../../Components/SnackbarComponent';
import { Store } from '../../../../Store';
import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
-import Unauthorized from '../Unauthorized';
+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';
const CreateInstitution = (props) => {
const { state } = useContext(Store);
+ const { state } = useContext(Store);
+
const [name, setName] = useState('Nova Instituição');
const [description, setDescription] = useState('');
const [adress, setAdress] = useState('');
@@ -203,80 +207,73 @@ const CreateInstitution = (props) => {
onChange: (event) => CountryHandler(event)
}
]
-
- if (CheckUserPermission()) {
- return (
- <Card>
- <SnackBar
- severity={snackInfo.icon}
- text={snackInfo.message}
- snackbarOpen={snackInfo.open}
- color={snackInfo.color}
- handleClose={() => setSnackInfo({
- message: '',
- icon: '',
- open: false,
- color: ''
- })}
- />
- <CardContent>
- <Grid container direction='row' justify='space-between' alignContent="center" alignItems="center" xs={12}>
- <Grid item>
- <Typography variant='h4'>
- {name}
- </Typography>
- </Grid>
- <Grid item>
- <Link style={{ textDecoration: 'none' }} to={'/admin/institutions'}>
- <Button
- onClick={props.BackToList}
- startIcon={<ListRoundedIcon />}
- variant='outlined'
- color='primary'
- >
- Listar
- </Button>
- </Link>
- </Grid>
+ return (
+ <StyledCard contrast={state.contrast}>
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() => setSnackInfo({
+ message: '',
+ icon: '',
+ open: false,
+ color: ''
+ })}
+ />
+ <CardContent>
+ <Grid container direction='row' justify='space-between' alignContent="center" alignItems="center" xs={12}>
+ <Grid item>
+ <Typography variant='h4'>
+ {name}
+ </Typography>
+ </Grid>
+ <Grid item>
+ <Link style={{ textDecoration: 'none' }} to={'/admin/institutions'}>
+ <StyledButton
+ onClick={props.BackToList}
+ icon={<ListRoundedIcon />}
+ variant='outlined'
+ color='primary'
+ text="Listar"
+ />
+ </Link>
</Grid>
<div style={{ height: '1em' }}></div>
- <form style={{ display: 'flex', flexDirection: 'column' }}>
- {fields.map((field, index) => (
- <TextField
- key={index}
- required={field.required}
- error={field.error}
- helperText={field.error ? field.errorMessage : ''}
- style={{ width: '250px', marginBottom: '1em' }}
- label={field.label}
- value={field.value}
- onChange={field.onChange}
- type="search"
- multiline={true}
- />
- ))}
- </form>
- </CardContent>
- <CardAction>
- <Button
- onClick={() => {
- onSubmit();
- }}
- variant="contained"
- color="primary"
- disabled={isLoading}
- startIcon={isLoading ? null : <AddRoundedIcon />}
- >
- {
- isLoading ? <CircularProgress size={24} /> : 'Adicionar'
- }
- </Button>
- </CardAction>
- </Card>
- );
- } else return <Unauthorized />
+ <form style={{ display: 'flex', flexDirection: 'column' }}>
+ {fields.map((field, index) => (
+ <FormInput
+ contrast={state.contrast}
+ key={index}
+ required={field.required}
+ error={field.error}
+ help={field.error ? field.errorMessage : ''}
+ style={{ width: '250px', marginBottom: '1em' }}
+ placeholder={field.label}
+ value={field.value}
+ handleChange={field.onChange}
+ inputType="search"
+ multi={true}
+ />
+ ))}
+ </form>
+ </CardContent>
+ <CardAction>
+ <StyledButton
+ onClick={() => {
+ onSubmit();
+ }}
+ variant="contained"
+ color="primary"
+ disabled={isLoading}
+ icon={isLoading ? null : <AddRoundedIcon />}
+ text={isLoading ? <CircularProgress size={24} /> : 'Adicionar'}
+ />
+ </CardAction>
+ </StyledCard>
+ );
}
export default CreateInstitution;
\ No newline at end of file
diff --git a/src/Admin/Components/Components/Inputs/CreateLanguage.js b/src/Admin/Components/Components/Inputs/CreateLanguage.js
index c9a65901..c76c3ff0 100644
--- a/src/Admin/Components/Components/Inputs/CreateLanguage.js
+++ b/src/Admin/Components/Components/Inputs/CreateLanguage.js
@@ -18,10 +18,9 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
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';
+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 +28,10 @@ import ListRoundedIcon from '@material-ui/icons/ListRounded';
import SnackBar from '../../../../Components/SnackbarComponent';
import { Store } from '../../../../Store';
import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
+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';
import Unauthorized from '../Unauthorized';
@@ -36,6 +39,8 @@ import Unauthorized from '../Unauthorized';
const CreateLanguage = (props) => {
const { state } = useContext(Store);
+ const { state } = useContext(Store);
+
const [name, setName] = useState('Nova linguagem');
const [code, setCode] = useState('');
@@ -179,79 +184,74 @@ const CreateLanguage = (props) => {
}
]
- if (CheckUserPermission()) {
- return (
- <Card>
- <SnackBar
- severity={snackInfo.icon}
- text={snackInfo.message}
- snackbarOpen={snackInfo.open}
- color={snackInfo.color}
- handleClose={() => setSnackInfo({
- message: '',
- icon: '',
- open: false,
- color: ''
- })}
- />
- <CardContent>
- <Grid container direction='row' justify='space-between' alignItems="center" alignContent="center" xs={12}>
- <Grid item>
- <Typography variant='h4'>
- {name}
- </Typography>
- </Grid>
- <Grid item>
- <Link to={'/admin/languages'} style={{ textDecoration: 'none' }}>
- <Button
- onClick={props.BackToList}
- startIcon={<ListRoundedIcon />}
- variant='outlined'
- color='primary'
- >
- Listar
- </Button>
- </Link>
- </Grid>
+ return (
+ <StyledCard contrast={state.contrast}>
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() => setSnackInfo({
+ message: '',
+ icon: '',
+ open: false,
+ color: ''
+ })}
+ />
+ <CardContent>
+ <Grid container direction='row' justify='space-between' alignItems="center" alignContent="center" xs={12}>
+ <Grid item>
+ <Typography variant='h4'>
+ {name}
+ </Typography>
+ </Grid>
+ <Grid item>
+ <Link to={'/admin/languages'} style={{ textDecoration: 'none' }}>
+ <StyledButton
+ onClick={props.BackToList}
+ icon={<ListRoundedIcon />}
+ variant='outlined'
+ color='primary'
+ text="Listar"
+ />
+ </Link>
</Grid>
+ </Grid>
- <div style={{ height: '1em' }}></div>
+ <div style={{ height: '1em' }}></div>
- <form style={{ display: 'flex', flexDirection: 'column' }}>
- {fields.map((field, index) => (
- <TextField
- key={index}
- required={field.required}
- error={field.error}
- helperText={field.error ? field.errorMessage : ''}
- style={{ width: '250px', marginBottom: '1em' }}
- label={field.label}
- value={field.value}
- onChange={field.onChange}
- type="search"
- multiline={true}
- />
- ))}
- </form>
- </CardContent>
- <CardAction>
- <Button
- onClick={() => {
- onSubmit();
- }}
- variant="contained"
- color="primary"
- disabled={isLoading}
- startIcon={isLoading ? null : <AddRoundedIcon />}
- >
- {
- isLoading ? <CircularProgress size={24} /> : 'Adicionar'
- }
- </Button>
- </CardAction>
- </Card>
- )
- } else return <Unauthorized />
+ <form style={{ display: 'flex', flexDirection: 'column' }}>
+ {fields.map((field, index) => (
+ <FormInput
+ contrast={state.contrast}
+ key={index}
+ required={field.required}
+ error={field.error}
+ help={field.error ? field.errorMessage : ''}
+ style={{ width: '250px', marginBottom: '1em' }}
+ placeholder={field.label}
+ value={field.value}
+ handleChange={field.onChange}
+ inputType="search"
+ multi={true}
+ />
+ ))}
+ </form>
+ </CardContent>
+ <CardAction>
+ <StyledButton
+ onClick={() => {
+ onSubmit();
+ }}
+ variant="contained"
+ color="primary"
+ disabled={isLoading}
+ icon={isLoading ? null : <AddRoundedIcon />}
+ text={isLoading ? <CircularProgress size={24} /> : 'Adicionar'}
+ />
+ </CardAction>
+ </StyledCard>
+ )
}
export default CreateLanguage;
\ No newline at end of file
diff --git a/src/Admin/Components/Components/Inputs/CreateQuestion.js b/src/Admin/Components/Components/Inputs/CreateQuestion.js
index 89fd3f85..16652823 100644
--- a/src/Admin/Components/Components/Inputs/CreateQuestion.js
+++ b/src/Admin/Components/Components/Inputs/CreateQuestion.js
@@ -18,10 +18,9 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
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';
+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";
@@ -31,12 +30,18 @@ import { Store } from '../../../../Store';
import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import Unauthorized from '../Unauthorized';
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';
const CreateQuestion = (props) => {
const { state } = useContext(Store);
+ const { state } = useContext(Store);
+
const [status, setStatus] = useState('');
const [description, setDescription] = useState('');
@@ -166,100 +171,94 @@ const CreateQuestion = (props) => {
},
];
- if (CheckUserPermission()) {
- return (
- <Card>
- <SnackBar
- severity={snackInfo.icon}
- text={snackInfo.message}
- snackbarOpen={snackInfo.open}
- color={snackInfo.color}
- handleClose={() => setSnackInfo({
- message: '',
- icon: '',
- open: false,
- color: ''
- })}
- />
- <CardContent>
- <Grid container direction='row' justify='space-between' alignContent="center" alignItems="center" xs={12}>
- <Grid item>
- <Typography variant='h4'>
- Nova question
- </Typography>
- </Grid>
- <Grid item>
- <Link to={'/admin/Questions'} style={{ textDecoration: 'none' }}>
- <Button
- onClick={props.BackToList}
- startIcon={<ListRoundedIcon />}
- variant='outlined'
- color='primary'
- >
- Listar
- </Button>
- </Link>
- </Grid>
+ return (
+ <StyledCard contrast={state.contrast}>
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() => setSnackInfo({
+ message: '',
+ icon: '',
+ open: false,
+ color: ''
+ })}
+ />
+ <CardContent>
+ <Grid container direction='row' justify='space-between' alignContent="center" alignItems="center" xs={12}>
+ <Grid item>
+ <Typography variant='h4'>
+ Nova pergunta
+ </Typography>
+ </Grid>
+ <Grid item>
+ <Link to={'/admin/Questions'} style={{ textDecoration: 'none' }}>
+ <StyledButton
+ onClick={props.BackToList}
+ icon={<ListRoundedIcon />}
+ variant='outlined'
+ color='primary'
+ text="Listar"
+ />
+ </Link>
</Grid>
+ </Grid>
- <div style={{ height: '1em' }}></div>
+ <div style={{ height: '1em' }}></div>
- <form style={{ display: 'flex', flexDirection: 'column' }}>
- <>
- <TextField
- select
- label="Status"
- value={status ? status : ""}
- style={{ width: '250px', marginBottom: '1em' }}
- onChange={handleChange}
- >
- {STATUS_OPTIONS.map((option, index) => (
- <MenuItem
- key={option.value}
- value={option.value}
- style={option.value === status ? { color: 'blue' } : { color: 'black' }}
- >
- {
- option.label
- }
- </MenuItem>
- ))}
- </TextField>
- {fields.map((field, index) => (
- <TextField
- key={index}
- required={field.required}
- error={field.error}
- helperText={field.error ? field.errorMessage : ''}
- style={{ width: '250px', marginBottom: '1em' }}
- label={field.label}
- value={field.value}
- onChange={field.onChange}
- type="search"
- multiline={true}
- />
+ <form style={{ display: 'flex', flexDirection: 'column' }}>
+ <>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Status"
+ value={status ? status : ""}
+ handleChange={handleChange}
+ items={STATUS_OPTIONS.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ value={option.value}
+ className={`${state.contrast}BackColor ${state.contrast}LinkColor`}
+ >
+ {
+ option.label
+ }
+ </MenuItem>
))}
- </>
- </form>
- </CardContent>
- <CardAction>
- <Button
- onClick={() => {
- onSubmit();
- }}
- variant="contained"
- color="primary"
- disabled={isLoading}
- startIcon={isLoading ? null : <AddRoundedIcon />}
- >
- {
- isLoading ? <CircularProgress size={24} /> : 'Adicionar'
- }
- </Button>
- </CardAction>
- </Card>
- );
- } else return <Unauthorized />
+ />
+ {fields.map((field, index) => (
+ <FormInput
+ contrast={state.contrast}
+ key={index}
+ required={field.required}
+ error={field.error}
+ help={field.error ? field.errorMessage : ''}
+ style={{ width: '250px', marginBottom: '1em' }}
+ placeholder={field.label}
+ value={field.value}
+ handleChange={field.onChange}
+ inputType="search"
+ multi={true}
+ />
+ ))}
+ </>
+ </form>
+ </CardContent>
+ <CardAction>
+ <StyledButton
+ onClick={() => {
+ onSubmit();
+ }}
+ variant="contained"
+ color="primary"
+ disabled={isLoading}
+ icon={isLoading ? null : <AddRoundedIcon />}
+ text={isLoading ? <CircularProgress size={24} /> : 'Adicionar'}
+ />
+ </CardAction>
+ </StyledCard>
+ );
}
export default CreateQuestion;
\ No newline at end of file
diff --git a/src/Admin/Components/Components/Inputs/CreateRating.js b/src/Admin/Components/Components/Inputs/CreateRating.js
index 3a8907f9..63568c9b 100644
--- a/src/Admin/Components/Components/Inputs/CreateRating.js
+++ b/src/Admin/Components/Components/Inputs/CreateRating.js
@@ -18,16 +18,19 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
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';
+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';
//imports local files
import { Store } from '../../../../Store';
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
@@ -37,6 +40,8 @@ import Unauthorized from '../Unauthorized';
const CreateRating = (props) => {
const { state } = useContext(Store);
+ const { state } = useContext(Store);
+
const [name, setName] = useState('Novo rating');
const [description, setDescription] = useState('');
@@ -176,79 +181,74 @@ const CreateRating = (props) => {
}
]
- if(CheckUserPermission()) {
- return (
- <Card>
- <SnackBar
- severity={snackInfo.icon}
- text={snackInfo.message}
- snackbarOpen={snackInfo.open}
- color={snackInfo.color}
- handleClose={() => setSnackInfo({
- message: '',
- icon: '',
- open: false,
- color: ''
- })}
- />
- <CardContent>
- <Grid container direction='row' justify='space-between' alignItems="center" alignContent="center" xs={12}>
- <Grid item>
- <Typography variant='h4'>
- {name}
- </Typography>
- </Grid>
- <Grid item>
- <Link to={'/admin/Ratings'} style={{textDecoration: 'none'}}>
- <Button
- onClick={props.BackToList}
- startIcon={<ListRoundedIcon />}
- variant='outlined'
- color='primary'
- >
- Listar
- </Button>
- </Link>
- </Grid>
+ return (
+ <StyledCard contrast={state.contrast}>
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() => setSnackInfo({
+ message: '',
+ icon: '',
+ open: false,
+ color: ''
+ })}
+ />
+ <CardContent>
+ <Grid container direction='row' justify='space-between' alignItems="center" alignContent="center" xs={12}>
+ <Grid item>
+ <Typography variant='h4'>
+ {name}
+ </Typography>
</Grid>
-
- <div style={{ height: '1em' }}></div>
-
- <form style={{ display: 'flex', flexDirection: 'column' }}>
- {fields.map((field, index) => (
- <TextField
- key={index}
- required={field.required}
- error={field.error}
- helperText={field.error ? field.errorMessage : ''}
- style={{ width: '250px', marginBottom: '1em' }}
- label={field.label}
- value={field.value}
- onChange={field.onChange}
- type="search"
- multiline={true}
+ <Grid item>
+ <Link to={'/admin/Ratings'} style={{textDecoration: 'none'}}>
+ <StyledButton
+ onClick={props.BackToList}
+ icon={<ListRoundedIcon />}
+ variant='outlined'
+ color='primary'
+ text="Listar"
/>
- ))}
- </form>
- </CardContent>
- <CardAction>
- <Button
- onClick={() => {
- onSubmit();
- }}
- variant="contained"
- color="primary"
- disabled={isLoading}
- startIcon={isLoading ? null : <AddRoundedIcon />}
- >
- {
- isLoading ? <CircularProgress size={24} /> : 'Adicionar'
- }
- </Button>
- </CardAction>
- </Card>
- );
- } else return <Unauthorized/>
+ </Link>
+ </Grid>
+ </Grid>
+
+ <div style={{ height: '1em' }}></div>
+
+ <form style={{ display: 'flex', flexDirection: 'column' }}>
+ {fields.map((field, index) => (
+ <FormInput
+ contrast={state.contrast}
+ key={index}
+ required={field.required}
+ error={field.error}
+ help={field.error ? field.errorMessage : ''}
+ style={{ width: '250px', marginBottom: '1em' }}
+ placeholder={field.label}
+ value={field.value}
+ handleChange={field.onChange}
+ inputType="search"
+ multi={true}
+ />
+ ))}
+ </form>
+ </CardContent>
+ <CardAction>
+ <StyledButton
+ onClick={() => {
+ onSubmit();
+ }}
+ variant="contained"
+ color="primary"
+ disabled={isLoading}
+ icon={isLoading ? null : <AddRoundedIcon />}
+ text={isLoading ? <CircularProgress size={24} /> : 'Adicionar'}
+ />
+ </CardAction>
+ </StyledCard>
+ );
}
export default CreateRating;
\ No newline at end of file
diff --git a/src/Admin/Components/Components/Inputs/CreateRole.js b/src/Admin/Components/Components/Inputs/CreateRole.js
index 94afb024..7277aa5a 100644
--- a/src/Admin/Components/Components/Inputs/CreateRole.js
+++ b/src/Admin/Components/Components/Inputs/CreateRole.js
@@ -18,10 +18,9 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
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';
+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 +28,10 @@ import ListRoundedIcon from '@material-ui/icons/ListRounded';
import SnackBar from '../../../../Components/SnackbarComponent';
import { Store } from '../../../../Store';
import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
+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';
import Unauthorized from '../Unauthorized';
@@ -36,6 +39,8 @@ import Unauthorized from '../Unauthorized';
const CreateRole = (props) => {
const { state } = useContext(Store);
+ const { state } = useContext(Store);
+
const [name, setName] = useState('Nova role');
const [desc, setDesc] = useState('');
@@ -170,79 +175,74 @@ const CreateRole = (props) => {
}
]
- if (CheckUserPermission()) {
- return (
- <Card>
- <SnackBar
- severity={snackInfo.icon}
- text={snackInfo.message}
- snackbarOpen={snackInfo.open}
- color={snackInfo.color}
- handleClose={() => setSnackInfo({
- message: '',
- icon: '',
- open: false,
- color: ''
- })}
- />
- <CardContent>
- <Grid container direction='row' justify='space-between' alignItems="center" alignContent="center" xs={12}>
- <Grid item>
- <Typography variant='h4'>
- {name}
- </Typography>
- </Grid>
- <Grid item>
- <Link to={'/admin/permissions'} style={{ textDecoration: 'none' }}>
- <Button
- onClick={props.BackToList}
- startIcon={<ListRoundedIcon />}
- variant='outlined'
- color='primary'
- >
- Listar
- </Button>
- </Link>
- </Grid>
+ return (
+ <StyledCard contrast={state.contrast}>
+ <SnackBar
+ severity={snackInfo.icon}
+ text={snackInfo.message}
+ snackbarOpen={snackInfo.open}
+ color={snackInfo.color}
+ handleClose={() => setSnackInfo({
+ message: '',
+ icon: '',
+ open: false,
+ color: ''
+ })}
+ />
+ <CardContent>
+ <Grid container direction='row' justify='space-between' alignItems="center" alignContent="center" xs={12}>
+ <Grid item>
+ <Typography variant='h4'>
+ {name}
+ </Typography>
</Grid>
-
- <div style={{ height: '1em' }}></div>
-
- <form style={{ display: 'flex', flexDirection: 'column' }}>
- {fields.map((field, index) => (
- <TextField
- key={index}
- required={field.required}
- error={field.error}
- helperText={field.error ? field.errorMessage : ''}
- style={{ width: '250px', marginBottom: '1em' }}
- label={field.label}
- value={field.value}
- onChange={field.onChange}
- type="search"
- multiline={true}
+ <Grid item>
+ <Link to={'/admin/permissions'} style={{ textDecoration: 'none' }}>
+ <StyledButton
+ onClick={props.BackToList}
+ icon={<ListRoundedIcon />}
+ variant='outlined'
+ color='primary'
+ text="Listar"
/>
- ))}
- </form>
- </CardContent>
- <CardAction>
- <Button
- onClick={() => {
- onSubmit();
- }}
- variant="contained"
- color="primary"
- disabled={isLoading}
- startIcon={isLoading ? null : <AddRoundedIcon />}
- >
- {
- isLoading ? <CircularProgress size={24} /> : 'Adicionar'
- }
- </Button>
- </CardAction>
- </Card>
- )
- } else return <Unauthorized />
+ </Link>
+ </Grid>
+ </Grid>
+
+ <div style={{ height: '1em' }}></div>
+
+ <form style={{ display: 'flex', flexDirection: 'column' }}>
+ {fields.map((field, index) => (
+ <FormInput
+ contrast={state.contrast}
+ key={index}
+ required={field.required}
+ error={field.error}
+ help={field.error ? field.errorMessage : ''}
+ style={{ width: '250px', marginBottom: '1em' }}
+ placeholder={field.label}
+ value={field.value}
+ handleChange={field.onChange}
+ inputType="search"
+ multi={true}
+ />
+ ))}
+ </form>
+ </CardContent>
+ <CardAction>
+ <StyledButton
+ onClick={() => {
+ onSubmit();
+ }}
+ variant="contained"
+ color="primary"
+ disabled={isLoading}
+ icon={isLoading ? null : <AddRoundedIcon />}
+ text={isLoading ? <CircularProgress size={24} /> : 'Adicionar'}
+ />
+ </CardAction>
+ </StyledCard>
+ )
}
export default CreateRole;
\ No newline at end of file
diff --git a/src/Admin/Components/Components/Inputs/EditCollection.js b/src/Admin/Components/Components/Inputs/EditCollection.js
index 13aabcf1..0bb6fcaa 100644
--- a/src/Admin/Components/Components/Inputs/EditCollection.js
+++ b/src/Admin/Components/Components/Inputs/EditCollection.js
@@ -18,9 +18,8 @@ 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, 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';
@@ -33,13 +32,19 @@ import { getRequest, putRequest } from '../../../../Components/HelperFunctions/g
import { Store } from '../../../../Store';
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"
+import StyledButton from '../Button';
//routers
import { Link } from 'react-router-dom';
import ClassicEditor from "@ckeditor/ckeditor5-build-classic"
import { CKEditor } from '@ckeditor/ckeditor5-react';
const EditCollection = () => {
+
const { state } = useContext(Store);
+
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get("collection");
@@ -188,7 +193,7 @@ const EditCollection = () => {
return <LoadingSpinner text="Carregando..." />
} else if (CheckUserPermission()) {
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -210,13 +215,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>
@@ -225,66 +229,63 @@ 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
- 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}
- 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>
<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>
- </Card>
+ </StyledCard>
)
} else return <Unauthorized />
}
diff --git a/src/Admin/Components/Components/Inputs/EditEducationalObect.js b/src/Admin/Components/Components/Inputs/EditEducationalObect.js
index 59963830..67ecf181 100644
--- a/src/Admin/Components/Components/Inputs/EditEducationalObect.js
+++ b/src/Admin/Components/Components/Inputs/EditEducationalObect.js
@@ -16,20 +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, { useState, useEffect, useContext } 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 { Typography, 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";
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";
@@ -44,31 +43,25 @@ import {
putRequest,
} from "../../../../Components/HelperFunctions/getAxiosConfig";
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"
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 = () => {
+
const { state } = useContext(Store);
+
const urlParams = new URLSearchParams(window.location.search);
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
@@ -448,7 +441,7 @@ const EditEducationalObject = () => {
return <LoadingSpinner text="Carregando..." />;
} else if (CheckUserPermission()) {
return (
- <Card variant="outlined">
+ <StyledCard contrast={state.contrast} variant="outlined">
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -480,13 +473,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>
@@ -495,9 +487,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)} />
@@ -509,21 +502,22 @@ const EditEducationalObject = () => {
index={value}
onChangeIndex={handleChangeIndex}
>
- <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) => {
@@ -537,95 +531,99 @@ 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>
);
})}
- <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} 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"
- 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>
-
- <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) => (
- <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>
- </TabPanel>
+
</SwipeableViews>
</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>
- </Card>
+ </StyledCard>
);
} else return <Unauthorized />;
};
diff --git a/src/Admin/Components/Components/Inputs/EditLanguage.js b/src/Admin/Components/Components/Inputs/EditLanguage.js
index 44df71ce..c0060cc8 100644
--- a/src/Admin/Components/Components/Inputs/EditLanguage.js
+++ b/src/Admin/Components/Components/Inputs/EditLanguage.js
@@ -18,9 +18,8 @@ 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, 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';
@@ -29,6 +28,10 @@ import SaveIcon from '@material-ui/icons/Save';
import SnackBar from '../../../../Components/SnackbarComponent';
import { Store } from '../../../../Store';
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';
@@ -38,7 +41,9 @@ import { Link, useHistory } from 'react-router-dom';
import Unauthorized from '../Unauthorized';
const EditLanguage = () => {
+
const { state } = useContext(Store);
+
let history = useHistory()
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get("language");
@@ -234,7 +239,7 @@ const EditLanguage = () => {
return <LoadingSpinner text="Carregando..." />
} else if (CheckUserPermission()) {
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -254,22 +259,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>
@@ -277,38 +280,38 @@ 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>
</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>
- </Card>
+ </StyledCard>
)
} else return <Unauthorized />
}
diff --git a/src/Admin/Components/Components/Inputs/EditRating.js b/src/Admin/Components/Components/Inputs/EditRating.js
index 1b8e0e6f..398ca2fa 100644
--- a/src/Admin/Components/Components/Inputs/EditRating.js
+++ b/src/Admin/Components/Components/Inputs/EditRating.js
@@ -18,9 +18,8 @@ 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, 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';
@@ -29,6 +28,10 @@ import SaveIcon from '@material-ui/icons/Save';
import SnackBar from '../../../../Components/SnackbarComponent';
import { Store } from '../../../../Store';
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';
@@ -37,7 +40,9 @@ import { Link } from 'react-router-dom';
import Unauthorized from '../Unauthorized';
const EditRating = () => {
+
const { state } = useContext(Store);
+
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get("rating");
@@ -213,7 +218,7 @@ const EditRating = () => {
return <LoadingSpinner text="Carregando..." />
} else if (CheckUserPermission()) {
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -235,13 +240,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>
@@ -250,38 +254,38 @@ 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>
</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>
- </Card>
+ </StyledCard>
)
} else return <Unauthorized />
}
diff --git a/src/Admin/Components/Components/Inputs/EditRoles.js b/src/Admin/Components/Components/Inputs/EditRoles.js
index 4b3aa488..b5e1fa8b 100644
--- a/src/Admin/Components/Components/Inputs/EditRoles.js
+++ b/src/Admin/Components/Components/Inputs/EditRoles.js
@@ -18,9 +18,8 @@ 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, 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,10 @@ import DeleteRoundedIcon from "@material-ui/icons/DeleteRounded";
import SnackBar from '../../../../Components/SnackbarComponent';
import { Store } from '../../../../Store';
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';
@@ -39,7 +42,9 @@ import { Link, useHistory } from 'react-router-dom';
import Unauthorized from '../Unauthorized';
const EditLanguage = () => {
+
const { state } = useContext(Store);
+
let history = useHistory()
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get("role");
@@ -228,7 +233,7 @@ const EditLanguage = () => {
return <LoadingSpinner text="Carregando..." />
} else if (CheckUserPermission()) {
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -248,22 +253,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>
@@ -271,38 +274,38 @@ 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>
</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>
- </Card>
+ </StyledCard>
)
} else return <Unauthorized />
}
diff --git a/src/Admin/Components/Components/Inputs/EditUser.js b/src/Admin/Components/Components/Inputs/EditUser.js
index fe9a61c8..32eb6e1a 100644
--- a/src/Admin/Components/Components/Inputs/EditUser.js
+++ b/src/Admin/Components/Components/Inputs/EditUser.js
@@ -18,9 +18,8 @@ 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, 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';
@@ -29,13 +28,18 @@ 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 { Store } from '../../../../Store';
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';
+import { BlueCheckBox, ContrastCheckBox } from "./EmailInputs.js"
//imports services
import { getRequest, putRequest, deleteRequest, postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { EditFilter, GetAData } from '../../../Filters';
@@ -58,6 +62,9 @@ const useStyles = makeStyles((theme) => ({
}));
const EditUser = () => {
+
+ const { state } = useContext(Store);
+
const classes = useStyles();
let history = useHistory();
const { state } = useContext(Store)
@@ -484,7 +491,7 @@ const EditUser = () => {
return <LoadingSpinner text="Carregando..." />
} else if (CheckUserPermission()) {
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -508,26 +515,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>
@@ -537,18 +542,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) => {
@@ -557,32 +563,30 @@ 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>
);
})}
- <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
- 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>
@@ -590,36 +594,30 @@ 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>
- </Card>
+ </StyledCard>
)
} else return <Unauthorized />
}
diff --git a/src/Admin/Components/Components/Inputs/EmailInputs.js b/src/Admin/Components/Components/Inputs/EmailInputs.js
index f75e8b48..0a5df002 100644
--- a/src/Admin/Components/Components/Inputs/EmailInputs.js
+++ b/src/Admin/Components/Components/Inputs/EmailInputs.js
@@ -16,23 +16,25 @@ 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";
import FormGroup from "@material-ui/core/FormGroup";
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 { 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'
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: {
@@ -48,7 +50,30 @@ 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);
+
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,31 +396,31 @@ 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
- 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 &&
@@ -403,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}
/>
))}
@@ -433,42 +451,41 @@ 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 >
<div style={{ height: "1em" }} />
- <div style={{ flex: 1 }}>
+ <div style={{ flex: 1, color: "#666" }}>
<CKEditor
editor={ClassicEditor}
data={message}
@@ -478,23 +495,23 @@ 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
+ <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/Components/Components/Inputs/IntitutionsInputs.js b/src/Admin/Components/Components/Inputs/IntitutionsInputs.js
index ca1ea9df..00652ebc 100644
--- a/src/Admin/Components/Components/Inputs/IntitutionsInputs.js
+++ b/src/Admin/Components/Components/Inputs/IntitutionsInputs.js
@@ -18,10 +18,8 @@ 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 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";
@@ -31,6 +29,10 @@ import Unauthorized from '../Unauthorized';
import SnackBar from '../../../../Components/SnackbarComponent';
import { Store } from '../../../../Store';
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 { putRequest, getRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { EditFilter, GetAData } from '../../../Filters';
@@ -38,7 +40,9 @@ import { EditFilter, GetAData } from '../../../Filters';
import { Link } from 'react-router-dom';
const EditInstitution = () => {
+
const { state } = useContext(Store);
+
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get("institution");
@@ -236,7 +240,7 @@ const EditInstitution = () => {
return <LoadingSpinner text="Carregando..." />
} else if (CheckUserPermission()) {
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -263,13 +267,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>
@@ -278,40 +281,39 @@ 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>
</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>
</CardContent>
- </Card>
+ </StyledCard>
);
} else {
return <Unauthorized />
diff --git a/src/Admin/Components/Components/Inputs/NoteVarInputs.js b/src/Admin/Components/Components/Inputs/NoteVarInputs.js
index 3c1542ec..354446fd 100644
--- a/src/Admin/Components/Components/Inputs/NoteVarInputs.js
+++ b/src/Admin/Components/Components/Inputs/NoteVarInputs.js
@@ -18,10 +18,8 @@ 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 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";
@@ -30,6 +28,10 @@ import Grid from '@material-ui/core/Grid';
import SnackBar from '../../../../Components/SnackbarComponent';
import { Store } from '../../../../Store';
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';
@@ -38,7 +40,9 @@ import { Link } from 'react-router-dom';
import Unauthorized from '../Unauthorized';
const NoteVarInputs = () => {
+
const { state } = useContext(Store);
+
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get("id");
@@ -241,7 +245,7 @@ const NoteVarInputs = () => {
return <LoadingSpinner text="Carregando..." />
} else if (CheckUserPermission()) {
return (
- <Card>
+ <StyledCard contrast={state.contrast}>
<SnackBar
severity={snackInfo.icon}
text={snackInfo.message}
@@ -269,52 +273,51 @@ 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>
<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>
<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>
- </Card>
+ </StyledCard>
)
} else return <Unauthorized />
}
diff --git a/src/Admin/Components/Components/MobileComponents/MobilePageHeader.js b/src/Admin/Components/Components/MobileComponents/MobilePageHeader.js
index f3520c9f..56255c2b 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>
@@ -38,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}
@@ -46,16 +50,35 @@ const MobilePageHeader = (props) => {
startIcon={act.icon}
>
{act.isLoading ? <CircularProgress size={24} /> : act.name}
- </Button>
+ </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;
+ 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/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/PageHeader.js b/src/Admin/Components/Components/PageHeader.js
index beef3c04..b2110129 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,49 @@ 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 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/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/Components/Components/Unauthorized.js b/src/Admin/Components/Components/Unauthorized.js
index 245a219b..ef9e9184 100644
--- a/src/Admin/Components/Components/Unauthorized.js
+++ b/src/Admin/Components/Components/Unauthorized.js
@@ -21,12 +21,12 @@ import SnackBar from '../../../Components/SnackbarComponent';
import { Link } from 'react-router-dom';
import styled from "styled-components";
-const Unauthorized = () => {
+const Unauthorized = (props) => {
const [openSnack, setOpenSnack] = useState(true);
return (
- <div 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..c6259b38 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"
@@ -25,16 +25,16 @@ 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";
+import FormInput from "Components/FormInput.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"
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,27 +44,16 @@ 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"
-
-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);
+
+import { Store } from 'Store'
const Activity = () => {
+
+ const { state } = useContext(Store)
+
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
+
const ADD_ONE_LENGHT = [""];
const TOP_LABELS = [
"CRIADO EM",
@@ -83,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: "",
@@ -162,7 +152,7 @@ const Activity = () => {
setError(true)
}
)
- }, [currPage, option])
+ }, [currPage, option, forceUpdate])
useEffect(() => {
setOption()
@@ -200,6 +190,7 @@ const Activity = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -214,40 +205,40 @@ const Activity = () => {
]}
>
{showFilter ? (
- <>
- <div style={{ height: "1em" }}></div>
+ <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}
</MobilePageHeader>
- <div style={{ height: "2em" }}></div>
-
{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"
@@ -263,11 +254,12 @@ const Activity = () => {
) : (
"Carregar mais itens"
)}
- </Button>
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.id}
subtitle={row.privacy}
@@ -295,7 +287,6 @@ const Activity = () => {
]
}
/>
- <div style={{ height: "0.5em" }} />
</>
)
)}
@@ -325,6 +316,7 @@ const Activity = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -339,41 +331,39 @@ const Activity = () => {
]}
>
{showFilter ? (
- <>
- <div style={{ height: "1em" }}></div>
+ <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}
</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} 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 +373,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 +381,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>
@@ -426,10 +417,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 dca86692..6b69fed2 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,15 +29,17 @@ 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, useStylesCell, useStylesRow } from "./Collections.js";
+import StyledButton from '../../../Components/Components/Button';
//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";
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";
@@ -55,26 +56,13 @@ import { Link } from "react-router-dom";
//Image Import
import { noAvatar } from "ImportImages.js";
+const AproveTeacher = () => {
-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 { state } = useContext(Store);
+
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
-const AproveTeacher = () => {
const WINDOW_WIDTH = window.innerWidth
const ADD_ONE_LENGHT = [""];
const TOP_LABELS = [
@@ -101,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: "",
@@ -162,7 +151,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",
}}
@@ -176,7 +166,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",
}}
@@ -190,7 +181,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",
}}
@@ -204,7 +196,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",
}}
@@ -335,7 +328,7 @@ const AproveTeacher = () => {
setError(true)
}
)
- }, [currPage, option, email, name, invertList])
+ }, [currPage, option, email, name, invertList, forceUpdate])
useEffect(() => {
setOption("requested")
@@ -375,6 +368,7 @@ const AproveTeacher = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -396,8 +390,7 @@ const AproveTeacher = () => {
]}
>
{showFilter ? (
- <>
- <div style={{ height: "1em" }}></div>
+ <StyledFilter contrast={state.contrast}>
{showFilter ? (
<Grid
container
@@ -409,54 +402,56 @@ 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>
- <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>
- <div style={{ height: "2em" }}></div>
-
{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"
@@ -472,11 +467,12 @@ const AproveTeacher = () => {
) : (
"Carregar mais itens"
)}
- </Button>
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.name}
subtitle={row.id}
@@ -501,13 +497,13 @@ const AproveTeacher = () => {
title: "Email",
subtitle: row.email ?
<Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
- <Button
+ <StyledButton
variant='text'
color='primary'
- startIcon={<EmailRoundedIcon />}
- >
- {row.email}
- </Button>
+ style={state.contrast === "" ? {} : {color: "yellow", textDecoration: "underline yellow"}}
+ icon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
+ text={row.email}
+ />
</Link> : null
},
@@ -522,44 +518,40 @@ 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>
- <div style={{ height: "0.5em" }} />
- <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"
+ />
</>
}
]}
/>
- <div style={{ height: "0.5em" }} />
</>
)
)}
@@ -591,6 +583,7 @@ const AproveTeacher = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -605,8 +598,7 @@ const AproveTeacher = () => {
]}
>
{showFilter ? (
- <>
- <div style={{ height: "1em" }}></div>
+ <StyledFilter contrast={state.contrast}>
{showFilter ? (
<Grid
container
@@ -618,50 +610,51 @@ 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>
- <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>
- <div style={{ height: "2em" }}></div>
-
<Grid xs={12} container>
<TableData
top={TOP_LABELS}
@@ -670,9 +663,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"
@@ -682,6 +675,7 @@ const AproveTeacher = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
>
{isLoadingMoreItems ? (
<CircularProgress size={24} />
@@ -689,69 +683,77 @@ 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">
- {row.email}
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
+ {
+ 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)}
- </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">
- <Button
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
+ <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>
- <div style={{ height: "0.5em" }} />
- <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>
- </StyledTableCell>
- </StyledTableRow>
+ text="Aceitar"
+ />
+ </TableCell>
+ </TableRow>
)
)}
</TableBody>
@@ -762,11 +764,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 ba077fda..9eac1d9a 100644
--- a/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
+++ b/src/Admin/Pages/Pages/SubPages/BlockedUsers.js
@@ -15,17 +15,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, { 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';
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';
@@ -41,7 +38,11 @@ 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, 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';
@@ -51,25 +52,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 BlockedUsers = () => {
-const StyledTableRow = withStyles((theme) => ({
- root: {
- '&:nth-of-type(odd)': {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
+ const { state } = useContext(Store)
+
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
-const BlockedUsers = () => {
const ADD_ONE_LENGHT = [''];
const WINDOW_WIDTH = window.innerWidth
@@ -80,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: '',
@@ -122,7 +112,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",
}}
@@ -136,7 +127,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",
}}
@@ -150,7 +142,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",
}}
@@ -232,7 +225,7 @@ const BlockedUsers = () => {
setError(true)
}
)
- }, [currPage, stateOpt, invertList])
+ }, [currPage, stateOpt, invertList, forceUpdate])
if (error) {
return <div>Error: {error.message}</div>;
@@ -265,6 +258,7 @@ const BlockedUsers = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -277,32 +271,34 @@ 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>
- <div style={{ height: '2em' }}></div>
-
{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"
@@ -318,11 +314,12 @@ const BlockedUsers = () => {
) : (
"Carregar mais itens"
)}
- </Button>
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.name}
subtitle={row.id}
@@ -347,15 +344,13 @@ const BlockedUsers = () => {
title: "Email",
subtitle: row.email ?
<Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
- <Button
+ <StyledButton
variant='text'
- color='primary'
- startIcon={<EmailRoundedIcon />}
- >
- {row.email}
- </Button>
+ color="primary"
+ icon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
+ text={row.email}
+ />
</Link> : null
-
},
{
title: "Estado",
@@ -363,20 +358,18 @@ 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"
+ />
}
]
}
/>
- <div style={{ height: "0.5em" }} />
</>
)
)}
@@ -406,33 +399,35 @@ const BlockedUsers = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
]}
>
+ <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>
- <div style={{ height: '2em' }}></div>
-
<TableData
top={topTable}
onIconPressed={cleanArrayAndInvert}
@@ -440,9 +435,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} colspan={6}>
<Button
color='primary'
variant='text'
@@ -451,61 +446,59 @@ 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">
- {
- row.email ?
- <Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
- <Button
- variant='text'
- color='primary'
- startIcon={<EmailRoundedIcon />}
- >
- {row.email}
- </Button>
- </Link> : null
- }
- </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' }}>
+ <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)}
- </StyledTableCell>
- <StyledTableCell align="right">
- <Button
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
+ <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>
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
))}
</TableBody>
</TableData>
@@ -516,11 +509,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 dd15cbae..f7ab54cc 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";
@@ -26,15 +26,16 @@ 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 StyledButton from '../../../Components/Components/Button';
//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";
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";
@@ -44,567 +45,599 @@ 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'
-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,
+import { Store } from 'Store'
+
+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",
+ }
+ }
+}));
+
+export const useStylesRow = makeStyles((theme) => ({
+ root: {
+ "&:nth-of-type(odd)": {
+ 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 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 classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
+
+ 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 [forceUpdate, setForceUpdate] = useState(false)
+
+ 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, forceUpdate])
+
+ 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)
+ setForceUpdate(!forceUpdate)
+ },
+ 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 ? (
+ <StyledFilter contrast={state.contrast}>
+ <Grid
+ container
+ alignItems="center"
+ alignContent="center"
+ xs={12}
+ direction="row"
+ justify="space-between"
+ >
+ <Grid item>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Filtro"
+ value={option}
+ 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>
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Pesquisa"
+ handleChange={(event) => HandleSearch(event)}
+ value={valueOfSearch}
+ onBlur={(event) => setSearch(event.target.value)}
+ 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}
+ >
+ <StyledLoadMoreButton
+ contrast={state.contrast}
+ color="primary"
+ variant="text"
+ // disabled={isLoadingMoreItems}
+ startIcon={<AddRoundedIcon />}
+ disabled={isLoadingMoreItems}
+ onClick={() => {
+ setCurrPage(currPage + 1)
+ }}
+ >
+ {isLoadingMoreItems ? (
+ <CircularProgress size={24} />
+ ) : (
+ "Carregar mais itens"
+ )}
+ </StyledLoadMoreButton>
+ </StyledDivButton>
+ ) : (
+ <>
+ <MobileList
+ contrast={state.contrast}
+ 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:
+ <StyledButton
+ variant="contained"
+ color="secondary"
+ onClick={() => {
+ HandleStateAlertDialog(index);
+ HandleStateCircularProgress(index);
+ }}
+ icon={<DeleteIcon />}
+ text="Deletar"
+ >
+ </StyledButton>
+ }
+ ]
+ }
+ />
+ </>
+ )
+ )}
+ </>
+ )
+ :
+ (
+ <>
+ <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)
+ setForceUpdate(!forceUpdate)
+ },
+ icon: <UpdateRoundedIcon />
+ },
+ {
+ name: "Filtrar",
+ isLoading: false,
+ func: () => {
+ setShowFilter(!showFilter);
+ },
+ icon: <FilterListRoundedIcon />
+ }
+ ]}
+ >
+ {showFilter ? (
+ <StyledFilter contrast={state.contrast}>
+ <Grid
+ container
+ alignItems="center"
+ alignContent="center"
+ xs={12}
+ direction="row"
+ justify="space-between"
+ >
+ <Grid item>
+ <FormInput
+ contrast={state.contrast}
+ selectable={true}
+ placeholder="Filtro"
+ value={option}
+ 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>
+ <FormInput
+ contrast={state.contrast}
+ placeholder="Pesquisa"
+ handleChange={(event) => HandleSearch(event)}
+ value={valueOfSearch}
+ onBlur={(event) => setSearch(event.target.value)}
+ help="Retire o foco do campo de texto ao terminar de digitar"
+ />
+ </Grid>
+ </Grid>
+ </StyledFilter>
+ ) : null}
+ </PageHeader>
+
+ <TableData top={TOP_LABELS}>
+ <TableBody>
+ {items.map((row, index) =>
+ index === items.length - 1 ? (
+ <TableRow className={classesRow.root} key={new Date().toISOString() + row.created_at}>
+ <TableCell className={classesCell.root} colSpan={8}>
+ <Button
+ color="primary"
+ variant="text"
+ // disabled={isLoadingMoreItems}
+ startIcon={<AddRoundedIcon />}
+ disabled={isLoadingMoreItems}
+ onClick={() => {
+ setCurrPage(currPage + 1)
+ }}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
+ >
+ {isLoadingMoreItems ? (
+ <CircularProgress size={24} />
+ ) : (
+ "Carregar mais itens"
+ )}
+ </Button>
+ </TableCell>
+ </TableRow>
+ ) : (
+ <TableRow className={classesRow.root} key={new Date().toISOString() + index}>
+ <TableCell className={classesCell.root} component="th" scope="row">
+ {row.name}
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
+ <div
+ dangerouslySetInnerHTML={{ __html: row.description }}
+ ></div>
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
+ {row.owner ? row.owner.name : "Sem dados"}
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
+ {DisplayDate(row.created_at)}
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
+ {DisplayDate(row.updated_at)}
+ </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: 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>
+
+ {/* 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;
-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`
+ 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..b6be7e21 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, useStylesCell, useStylesRow } from "./Collections.js";
+import StyledButton from '../../../Components/Components/Button';
//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,27 +46,13 @@ 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: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
+const CommunityQuestion = () => {
-const StyledTableRow = withStyles((theme) => ({
- root: {
- "&:nth-of-type(odd)": {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
+ const { state } = useContext(Store)
-const CommunityQuestion = () => {
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
const ADD_ONE_LENGHT = [""];
const TOP_LABELS = [
@@ -93,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: "",
@@ -192,7 +181,7 @@ const CommunityQuestion = () => {
setError(true)
}
)
- }, [currPage, message, email, name, invertList])
+ }, [currPage, message, email, name, invertList, forceUpdate])
useEffect(() => {
setCurrPage(0)
@@ -234,6 +223,7 @@ const CommunityQuestion = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -255,6 +245,7 @@ const CommunityQuestion = () => {
]}
>
{showFilter ? (
+ <StyledFilter contrast={state.contrast}>
<Grid
container
direction="row"
@@ -265,47 +256,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>
- <div style={{ height: "2em" }}></div>
-
{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}
@@ -320,11 +312,12 @@ const CommunityQuestion = () => {
) : (
"Carregar mais itens"
)}
- </Button>
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
<>
<MobileList
+ contrast={state.contrast}
key={index}
title={row.name}
subtitle={row.id}
@@ -340,13 +333,13 @@ const CommunityQuestion = () => {
subtitle:
row.email ?
<Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
- <Button
+ <StyledButton
variant='text'
- color='primary'
- startIcon={<EmailRoundedIcon />}
- >
- {row.email}
- </Button>
+ color="primary"
+ style={state.contrast === "" ? {} : {color: "yellow", textDecoration: "underline yellow"}}
+ icon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
+ text={row.email}
+ />
</Link> : null
},
@@ -362,7 +355,6 @@ const CommunityQuestion = () => {
]
}
/>
- <div style={{ height: "0.5em" }} />
</>
)
)}
@@ -394,6 +386,7 @@ const CommunityQuestion = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -408,6 +401,7 @@ const CommunityQuestion = () => {
]}
>
{showFilter ? (
+ <StyledFilter contrast={state.contrast}>
<Grid
container
direction="row"
@@ -418,48 +412,47 @@ 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>
- <div style={{ height: "2em" }}></div>
-
<TableData top={TOP_LABELS} onIconPressed={cleanArrayAndInvert}>
<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"
@@ -468,6 +461,7 @@ const CommunityQuestion = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
>
{isLoadingMoreItems ? (
<CircularProgress size={24} />
@@ -475,44 +469,44 @@ 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">
- {
- row.email ?
- <Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
- <Button
- variant='text'
- color='primary'
- startIcon={<EmailRoundedIcon />}
- >
- {row.email}
- </Button>
- </Link> : null
- }
- </StyledTableCell>
- <StyledTableCell align="right">
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
+ {
+ 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}
- </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>
@@ -522,12 +516,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 d03514dc..0da9bdf1 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,14 +26,16 @@ 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 StyledButton from '../../../Components/Components/Button';
+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";
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";
@@ -44,28 +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/";
@@ -93,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: "",
@@ -158,7 +148,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",
}}
@@ -174,7 +165,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",
}}
@@ -188,7 +180,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",
}}
@@ -267,7 +260,7 @@ const Complaints = () => {
setError(true)
}
)
- }, [currPage, complainOption, stateOption, description, invertList])
+ }, [currPage, complainOption, stateOption, description, invertList, forceUpdate])
useEffect(() => {
setComplainOption()
@@ -307,6 +300,7 @@ const Complaints = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -328,6 +322,7 @@ const Complaints = () => {
]}
>
{showFilter ? (
+ <StyledFilter contrast={state.contrast}>
<Grid
container
direction="row"
@@ -338,58 +333,68 @@ 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>
- <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>
- <div style={{ height: "2em" }}></div>
-
{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}
@@ -404,11 +409,12 @@ const Complaints = () => {
) : (
"Carregar mais itens"
)}
- </Button>
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.complainable_type}
subtitle={row.id}
@@ -440,7 +446,6 @@ const Complaints = () => {
]
}
/>
- <div style={{ height: "0.5em" }} />
</>
)
)}
@@ -473,6 +478,7 @@ const Complaints = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -487,6 +493,7 @@ const Complaints = () => {
]}
>
{showFilter ? (
+ <StyledFilter contrast={state.contrast}>
<Grid
container
direction="row"
@@ -497,52 +504,60 @@ 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>
- <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>
- <div style={{ height: "2em" }}></div>
-
<Grid xs={12} container>
<TableData
top={TOP_LABELS}
@@ -551,9 +566,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"
@@ -563,6 +578,7 @@ const Complaints = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
>
{isLoadingMoreItems ? (
<CircularProgress size={24} />
@@ -570,67 +586,57 @@ 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">
- <Button
- variant="text"
- secondary={true}
- startIcon={
- <LaunchRoundedIcon style={{ fill: "#FA8072" }} />
- }
- >
- <a
- style={{
- textDecoration: "none",
- color: "#FA8072",
- }}
- target="_blank"
- rel="noreferrer"
- href={
- PORTAL_MEC +
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
+ <a href={PORTAL_MEC +
convertToLink(
row.complainable_type,
row.complainable_id
- )
- }
+ )}
>
- MEC RED
- </a>
- </Button>
- </StyledTableCell>
- </StyledTableRow>
+ <StyledButton
+ variant="text"
+ secondary={true}
+ icon={
+ <LaunchRoundedIcon style={{ fill: "#FA8072" }} />
+ }
+ text="MEC RED"
+ />
+ </a>
+ </TableCell>
+ </TableRow>
)
)}
</TableBody>
@@ -641,12 +647,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 69d0dfc3..64a49388 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,11 @@ 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, 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";
@@ -37,40 +41,24 @@ 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 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) => ({
- 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 = [""];
@@ -83,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: "",
@@ -237,7 +226,7 @@ const EducationalObjects = () => {
setError(true)
}
)
- }, [currPage, search, description, author])
+ }, [currPage, search, description, author, forceUpdate])
useEffect(() => {
setCurrPage(0)
@@ -326,6 +315,7 @@ const EducationalObjects = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -341,34 +331,36 @@ 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 **************/}
- <div style={{ height: "2em" }}></div>
-
{/************** 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"
@@ -384,11 +376,12 @@ const EducationalObjects = () => {
) : (
"Carregar mais itens"
)}
- </Button>
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.name}
subtitle={row.id}
@@ -419,22 +412,20 @@ const EducationalObjects = () => {
{
title: "Deletar",
subtitle:
- <Button
+ <StyledButton
variant="contained"
color="secondary"
onClick={() => {
HandleStateAlertDialog(index);
HandleStateCircularProgress(index);
}}
- startIcon={<DeleteIcon />}
- >
- Deletar
- </Button>
+ icon={<DeleteIcon />}
+ text="Deletar"
+ />
}
]
}
/>
- <div style={{ height: "0.5em" }} />
</>
)
)}
@@ -468,6 +459,7 @@ const EducationalObjects = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -483,37 +475,38 @@ 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 **************/}
- <div style={{ height: "2em" }}></div>
-
{/************** Start of display data in table **************/}
<TableData top={TOP_TABLE}>
<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"
@@ -524,6 +517,7 @@ const EducationalObjects = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? {width: "100%"} : {width: "100%", color: "yellow", textDecoration: "underline yellow"}}
>
{isLoadingMoreItems ? (
<CircularProgress size={24} />
@@ -531,33 +525,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" />
) : (
@@ -567,11 +561,11 @@ const EducationalObjects = () => {
HandleStateCircularProgress(index);
}}
>
- <DeleteIcon style={{ fill: "#FF0000" }} />
+ <DeleteIcon style={{ fill: state.contrast === "" ? "#FF0000" : "yellow" }}/>
</IconButton>
)}
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
)
)}
</TableBody>
@@ -594,12 +588,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 f2979dbb..cfda1e29 100644
--- a/src/Admin/Pages/Pages/SubPages/Inframe.js
+++ b/src/Admin/Pages/Pages/SubPages/Inframe.js
@@ -16,24 +16,73 @@ 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, 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 [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 (
- <div>
- <Welcome />
- <div style={{ height: '1em' }}></div>
- <iframe
- 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}
- >
- </iframe>
- </div>
+ <>
+ {!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/>
+ )
+ }
+ </>
)
}
+
+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..4fa613c5 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,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 { StyledLoadMoreButton, StyledDivButton, useStylesCell, useStylesRow } from "./Collections.js";
+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";
@@ -36,40 +39,25 @@ 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 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) => ({
- 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 = [""];
@@ -84,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);
@@ -228,7 +217,7 @@ const Institutions = () => {
setError(true)
}
)
- }, [currPage, description, country, search, city, invertList])
+ }, [currPage, description, country, search, city, invertList, forceUpdate])
useEffect(() => {
setSeacrh("")
@@ -327,6 +316,7 @@ const Institutions = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -350,35 +340,38 @@ const Institutions = () => {
>
{
showFilter &&
- <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}
- />
- </Grid>
- ))}
+ <StyledFilter contrast={state.contrast}>
+ <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}
+ />
+ </Grid>
+ ))}
+ </Grid>
</Grid>
- </Grid>
+ </StyledFilter>
}
</MobilePageHeader>
{/************** End of the header **************/}
- <div style={{ height: "2em" }}></div>
-
{/************** Start of display data in table **************/}
{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,59 +384,58 @@ const Institutions = () => {
{isLoadingMoreItems ? (
<CircularProgress size={24} />
) : (
- "Carregar mais itens"
- )}
- </Button>
+ "Carregar mais itens"
+ )}
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
- <>
- <MobileList
- 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>
- }
- ]
- }
- />
- <div style={{ height: "0.5em" }} />
- </>
- )
+ <>
+ <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 **************/}
@@ -477,6 +469,7 @@ const Institutions = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -500,36 +493,37 @@ const Institutions = () => {
>
{
showFilter &&
- <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}
- />
- </Grid>
- ))}
+ <StyledFilter contrast={state.contrast}>
+ <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}
+ />
+ </Grid>
+ ))}
+ </Grid>
</Grid>
- </Grid>
+ </StyledFilter>
}
</PageHeader>
{/************** End of the header **************/}
- <div style={{ height: "2em" }}></div>
-
{/************** Start of display data in table **************/}
<TableData top={topTable} onIconPressed={cleanArrayAndInvert}>
<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"
@@ -538,51 +532,52 @@ const Institutions = () => {
onClick={() => {
setCurrPage(currPage + 1)
}}
+ style={state.contrast === "" ? { width: "100%" } : { width: "100%", color: "yellow", textDecoration: "underline yellow" }}
>
{isLoadingMoreItems ? (
<CircularProgress size={24} />
) : (
- "Carregar mais itens"
- )}
+ "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">{row.city}</StyledTableCell>
- <StyledTableCell align="right">
- {row.country}
- </StyledTableCell>
- <StyledTableCell align="right">
- <Link to={`/admin/institution?institution=${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>
- )
+ <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>
@@ -604,12 +599,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 c38ac1e1..55dca43d 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, useStylesCell, useStylesRow } from './Collections';
+import StyledButton from '../../../Components/Components/Button';
//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,28 +44,15 @@ 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) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
+const Languages = () => {
-const StyledTableRow = withStyles((theme) => ({
- root: {
- '&:nth-of-type(odd)': {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
+ const { state } = useContext(Store)
+
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
-const Languages = () => {
const ADD_ONE_LENGHT = [""];
const TOP_LABELS = ['ID', 'NOME', 'CODE', 'EDITAR', 'DELETAR'] //Labels from Table
const WINDOW_WIDTH = window.innerWidth
@@ -80,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: '',
@@ -192,7 +182,7 @@ const Languages = () => {
setError(true)
}
)
- }, [currPage, invertList])
+ }, [currPage, invertList, forceUpdate])
if (error) {
return <div>Error: {error.message}</div>;
@@ -231,6 +221,7 @@ const Languages = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -246,12 +237,11 @@ const Languages = () => {
>
</MobilePageHeader>
- <div style={{ height: '2em' }}></div>
-
{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,49 +254,48 @@ const Languages = () => {
{isLoadingMoreItems ? (
<CircularProgress size={24} />
) : (
- "Carregar mais itens"
- )}
- </Button>
+ "Carregar mais itens"
+ )}
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
- <>
- <MobileList
- 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>
- }
- ]
- }
- />
- <div style={{ height: "0.5em" }} />
- </>
- )
+ }}
+ data={
+ [
+ {
+ title: "Code",
+ subtitle: row.code
+ },
+ {
+ title: "Deletar",
+ subtitle:
+ <StyledButton
+ variant="contained"
+ color="secondary"
+ onClick={() => {
+ HandleStateAlertDialog(index);
+ HandleStateCircularProgress(index);
+ }}
+ icon={<DeleteRoundedIcon />}
+ text="Deletar"
+ />
+ }
+ ]
+ }
+ />
+ </>
+ )
)}
</>
);
@@ -335,6 +324,7 @@ const Languages = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -350,8 +340,6 @@ const Languages = () => {
>
</PageHeader>
- <div style={{ height: '2em' }}></div>
-
<TableData
top={TOP_LABELS}
onIconPressed={cleanArrayAndInvert}
@@ -359,9 +347,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,42 +359,43 @@ 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" />
) : (
- <IconButton
- onClick={() => {
- HandleStateAlertDialog(index);
- HandleStateCircularProgress(index);
- }}
- >
- <DeleteRoundedIcon style={{ fill: "#FF0000" }} />
- </IconButton>
- )}
- </StyledTableCell>
- </StyledTableRow>
+ <IconButton
+ onClick={() => {
+ HandleStateAlertDialog(index);
+ HandleStateCircularProgress(index);
+ }}
+ >
+ <DeleteRoundedIcon style={{ fill: state.contrast === "" ? "#FF0000" : "yellow" }} />
+ </IconButton>
+ )}
+ </TableCell>
+ </TableRow>
))}
</TableBody>
</TableData>
@@ -426,12 +415,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 1ad35f99..865a2901 100644
--- a/src/Admin/Pages/Pages/SubPages/NoteVariables.js
+++ b/src/Admin/Pages/Pages/SubPages/NoteVariables.js
@@ -15,11 +15,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, { 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,34 +35,22 @@ 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, useStylesCell, useStylesRow } 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) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
+const NoteVariables = () => {
+
+ const { state } = useContext(Store)
-const StyledTableRow = withStyles((theme) => ({
- root: {
- '&:nth-of-type(odd)': {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
-const NoteVariables = () => {
const WINDOW_WIDTH = window.innerWidth
const ADD_ONE_LENGHT = [""];
@@ -74,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: '',
@@ -130,7 +117,7 @@ const NoteVariables = () => {
setError(true)
}
)
- }, [currPage, invertList])
+ }, [currPage, invertList, forceUpdate])
if (error) {
return <div>Error: {error.message}</div>;
@@ -164,6 +151,7 @@ const NoteVariables = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -178,12 +166,11 @@ const NoteVariables = () => {
>
</MobilePageHeader>
- <div style={{ height: '2em' }}></div>
-
{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}
@@ -198,11 +185,12 @@ const NoteVariables = () => {
) : (
"Carregar mais itens"
)}
- </Button>
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.name}
subtitle={row.id}
@@ -225,12 +213,11 @@ 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" }} />
},
]
}
/>
- <div style={{ height: "0.5em" }} />
</>
)
)}
@@ -260,6 +247,7 @@ const NoteVariables = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -267,8 +255,6 @@ const NoteVariables = () => {
>
</PageHeader>
- <div style={{ height: '2em' }}></div>
-
<TableData
top={topTable}
onIconPressed={cleanArrayAndInvert}
@@ -276,9 +262,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'
@@ -287,27 +273,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 }}>
@@ -315,15 +302,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>
@@ -334,11 +321,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 787ac0de..0623ea00 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';
@@ -25,15 +25,17 @@ 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 { 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,28 +43,15 @@ 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) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
+const UserPermissions = () => {
-const StyledTableRow = withStyles((theme) => ({
- root: {
- '&:nth-of-type(odd)': {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
+ const { state } = useContext(Store)
+
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
-const UserPermissions = () => {
const ADD_ONE_LENGHT = [""];
const TOP_LABELS = ['ID', 'NOME', 'DESCRIÇÃO', 'AÇÕES'] //Labels from Table
const WINDOW_WIDTH = window.innerWidth
@@ -79,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: '',
@@ -189,7 +179,7 @@ const UserPermissions = () => {
setError(true)
}
)
- }, [currPage, invertList])
+ }, [currPage, invertList, forceUpdate])
if (error) {
return <div>Error: {error.message}</div>;
@@ -228,6 +218,7 @@ const UserPermissions = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -250,12 +241,11 @@ const UserPermissions = () => {
>
</MobilePageHeader>
- <div style={{ height: '2em' }}></div>
-
{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}
@@ -270,11 +260,12 @@ const UserPermissions = () => {
) : (
"Carregar mais itens"
)}
- </Button>
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.name}
subtitle={row.id}
@@ -292,22 +283,20 @@ 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"
+ />
},
]
}
/>
- <div style={{ height: "0.5em" }} />
</>
)
)}
@@ -338,6 +327,7 @@ const UserPermissions = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -353,8 +343,6 @@ const UserPermissions = () => {
>
</PageHeader>
- <div style={{ height: '2em' }}></div>
-
<TableData
top={TOP_LABELS}
onIconPressed={cleanArrayAndInvert}
@@ -362,9 +350,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,36 +362,36 @@ 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
+ <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"
@@ -411,14 +399,13 @@ const UserPermissions = () => {
HandleStateAlertDialog(index)
HandleStateCircularProgress(index)
}}
- startIcon={<DeleteRoundedIcon />}
- >
- Deletar
- </Button>
+ icon={<DeleteRoundedIcon />}
+ text="Deletar"
+ />
)}
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
))}
</TableBody>
</TableData>
@@ -438,12 +425,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 ca32e0cd..706a93cc 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,40 +27,27 @@ 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, useStylesCell, useStylesRow } from './Collections';
+import { Store } from 'Store'
+import { BlueCheckBox, ContrastCheckBox } from "../../../Components/Components/Inputs/EmailInputs"
//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) => ({
- head: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
+const Questions = () => {
-const StyledTableRow = withStyles((theme) => ({
- root: {
- '&:nth-of-type(odd)': {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
+ const { state } = useContext(Store)
-const Questions = () => {
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
const ADD_ONE_LENGHT = [""];
const WINDOW_WIDTH = window.innerWidth
@@ -73,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: '',
@@ -194,7 +182,7 @@ const Questions = () => {
setError(true)
}
)
- }, [currPage, invertList])
+ }, [currPage, invertList, forceUpdate])
if (error) {
@@ -226,6 +214,7 @@ const Questions = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -248,14 +237,14 @@ const Questions = () => {
>
</MobilePageHeader>
- <div style={{ height: '2em' }}></div>
-
{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}
@@ -270,11 +259,12 @@ const Questions = () => {
) : (
"Carregar mais itens"
)}
- </Button>
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.id}
subtitle={DisplayDate(row.created_at)}
@@ -291,21 +281,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",
@@ -314,7 +290,6 @@ const Questions = () => {
]
}
/>
- <div style={{ height: "0.5em" }} />
</>
)
)}
@@ -345,6 +320,7 @@ const Questions = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -360,8 +336,6 @@ const Questions = () => {
>
</PageHeader>
- <div style={{ height: '2em' }}></div>
-
<TableData
top={TOP_LABELS}
onIconPressed={cleanArrayAndInvert}
@@ -369,9 +343,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,41 +355,28 @@ 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">
- {
- 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"
- />
- }
- </StyledTableCell>
- <StyledTableCell align="right">{DisplayDate(row.updated_at)}</StyledTableCell>
- </StyledTableRow>
+ <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">
+ {
+ 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>
))}
</TableBody>
</TableData>
@@ -424,12 +385,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 22d57d40..92742617 100644
--- a/src/Admin/Pages/Pages/SubPages/Rating.js
+++ b/src/Admin/Pages/Pages/SubPages/Rating.js
@@ -16,11 +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, { 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 +35,9 @@ 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, 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';
@@ -45,27 +46,14 @@ 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: {
- backgroundColor: theme.palette.common.black,
- color: theme.palette.common.white,
- },
- body: {
- fontSize: 14,
- },
-}))(TableCell);
+const Ratings = () => {
-const StyledTableRow = withStyles((theme) => ({
- root: {
- '&:nth-of-type(odd)': {
- backgroundColor: theme.palette.action.hover,
- },
- },
-}))(TableRow);
+ const { state } = useContext(Store)
+
+ const classesCell = useStylesCell(state);
+ const classesRow = useStylesRow(state);
-const Ratings = () => {
const WINDOW_WIDTH = window.innerWidth
const ADD_ONE_LENGHT = [""];
@@ -80,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: '',
@@ -190,7 +179,7 @@ const Ratings = () => {
setError(true)
}
)
- }, [currPage, invertList])
+ }, [currPage, invertList, forceUpdate])
if (error) {
return <div>Error: {error.message}</div>;
@@ -232,6 +221,7 @@ const Ratings = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -247,12 +237,11 @@ const Ratings = () => {
>
</MobilePageHeader>
- <div style={{ height: '2em' }}></div>
-
{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}
@@ -267,11 +256,12 @@ const Ratings = () => {
) : (
"Carregar mais itens"
)}
- </Button>
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.name}
subtitle={row.id}
@@ -290,22 +280,20 @@ const Ratings = () => {
{
title: "Deletar",
subtitle:
- <Button
+ <StyledButton
variant="contained"
color="secondary"
onClick={() => {
HandleStateAlertDialog(index);
HandleStateCircularProgress(index);
}}
- startIcon={<DeleteRoundedIcon />}
- >
- Deletar
- </Button>
+ icon={<DeleteRoundedIcon />}
+ text="Deletar"
+ />
}
]
}
/>
- <div style={{ height: "0.5em" }} />
</>
)
)}
@@ -335,6 +323,7 @@ const Ratings = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -350,8 +339,6 @@ const Ratings = () => {
>
</PageHeader>
- <div style={{ height: '2em' }}></div>
-
<TableData
top={topTable}
onIconPressed={cleanArrayAndInvert}
@@ -359,9 +346,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'
@@ -370,28 +357,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" />
) : (
@@ -401,11 +389,11 @@ const Ratings = () => {
HandleStateCircularProgress(index);
}}
>
- <DeleteRoundedIcon style={{ fill: "#FF0000" }} />
+ <DeleteRoundedIcon style={{ fill: state.contrast === "" ? "#FF0000" : "yellow" }} />
</IconButton>
)}
- </StyledTableCell>
- </StyledTableRow>
+ </TableCell>
+ </TableRow>
))}
</TableBody>
</TableData>
@@ -428,11 +416,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/SendEmail.js b/src/Admin/Pages/Pages/SubPages/SendEmail.js
index aff09bc8..92db3b65 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: {
@@ -54,14 +56,16 @@ 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 +74,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..55d5b5c9 100644
--- a/src/Admin/Pages/Pages/SubPages/Users.js
+++ b/src/Admin/Pages/Pages/SubPages/Users.js
@@ -15,12 +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 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';
@@ -28,7 +26,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 +34,11 @@ 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, useStylesCell, useStylesRow } from './Collections';
+import StyledButton from '../../../Components/Components/Button';
//Services
import { getRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { Url } from '../../../Filters';
@@ -51,25 +52,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
@@ -82,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("")
@@ -226,7 +216,7 @@ const Users = () => {
setIsLoadingMoreItems(false)
}
)
- }, [currPage, email, name, invertList])
+ }, [currPage, email, name, invertList, forceUpdate])
useEffect(() => {
setNameValue("")
@@ -266,6 +256,7 @@ const Users = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -296,36 +287,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>
- <div style={{ height: '2em' }}></div>
-
{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}
@@ -340,11 +334,12 @@ const Users = () => {
) : (
"Carregar mais itens"
)}
- </Button>
+ </StyledLoadMoreButton>
</StyledDivButton>
) : (
<>
<MobileList
+ contrast={state.contrast}
key={new Date().toISOString() + row.created_at}
title={row.name}
subtitle={row.id}
@@ -368,13 +363,12 @@ const Users = () => {
title: "Email",
subtitle: row.email ?
<Link to={`/admin/sendEmail?email=${row.email}`} style={{ textDecoration: 'none' }}>
- <Button
+ <StyledButton
variant='text'
- color='primary'
- startIcon={<EmailRoundedIcon />}
- >
- {row.email}
- </Button>
+ color="primary"
+ icon={<EmailRoundedIcon style={state.contrast === "" ? {color: "#666"} : {color: "white"}}/>}
+ text={row.email}
+ />
</Link> : null
},
{
@@ -389,7 +383,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>
))
},
@@ -399,19 +395,17 @@ 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"
+ />
}
]}
/>
- <div style={{ height: "0.5em" }} />
</>
)
)}
@@ -441,6 +435,7 @@ const Users = () => {
isLoading: false,
func: () => {
setCurrPage(0)
+ setForceUpdate(!forceUpdate)
},
icon: <UpdateRoundedIcon />
},
@@ -464,32 +459,34 @@ 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>
- <div style={{ height: '2em' }}></div>
-
<TableData
top={topTable}
onIconPressed={cleanArrayAndInvert}
@@ -497,9 +494,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'
@@ -508,51 +505,65 @@ 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 ?
+ <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)}
- </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">
- <Button
+ </TableCell>
+ <TableCell className={classesCell.root} align="right">
+ <StyledButton
variant="contained"
color="primary"
disabled={isUserPublisher(row.roles)}
onClick={() => { turnUserPublisher(row.roles, row.id) }}
- >
- Tornar publicador
- </Button>
- </StyledTableCell>
- <StyledTableCell align="right">
+ text="Tornar publicador"
+ />
+ </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>
@@ -566,12 +577,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/App.js b/src/App.js
index c06b1193..3e498b93 100644
--- a/src/App.js
+++ b/src/App.js
@@ -158,15 +158,307 @@ export default function App() {
return () => window.removeEventListener("resize", setWindowSize);
}, [window.innerWidth, window.innerHeight]);
- const LoadingScreen = () => (
- <div style={{
- position: "absolute",
- top: "50%",
- left: "50%",
- transform: "translate(-50%, -50%)"
- }}>
- <LoadingSpinner/>
- </div>
+ return (
+ // add piwik later
+ // history={piwik.connectToHistory(customHistory)}
+ <>
+ {!awaitTest &&
+ <React.Suspense fallback={<LoadingScreen/>}>
+ {/*<BrowserRouter history={piwik.connectToHistory(customHistory)}>*/}
+ <BrowserRouter>
+ <ContrastBar/>
+ <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"
+ />
+ <div id="Conteudo_scroll"></div>
+ <Switch style={state.contrast === "" ? {backgroundColor: "white"} : {backgroundColor: "black"}}>
+ <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-resumido" component={SummarizedUserTerms} />
+ <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 id="Rodape_scroll">
+ <EcFooter contrast={state.contrast}/>
+ <GNUAGPLfooter contrast={state.contrast}/>
+ </div>
+ )}
+ </BrowserRouter>
+ </React.Suspense>
+ }
+ </>
);
return (
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/AreasSubPagesFunction.js b/src/Components/AreasSubPagesFunction.js
index 86701785..7b982e93 100644
--- a/src/Components/AreasSubPagesFunction.js
+++ b/src/Components/AreasSubPagesFunction.js
@@ -85,7 +85,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) => (
@@ -153,7 +153,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/ButtonGuardarColecao.js b/src/Components/ButtonGuardarColecao.js
index 564c0718..6b580270 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,12 +47,14 @@ export default function ButtonGuardarColecao(props) {
<LoginModal 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>
- <GuardarModal open={saveToCol} handleClose={() => { toggleSave(false) }}
+ <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}
/>
<StyledButton onClick={handleGuardar}>
diff --git a/src/Components/CollectionCardFunction.js b/src/Components/CollectionCardFunction.js
index 1a3057dd..743387e0 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";
@@ -217,8 +217,109 @@ export default function CollectionCardFunction(props) {
</Grid>
)
}
- </StyledGrid>
- </div>
+ </TagContainer> :
+ null
+ }
+ </SlideContentDiv>
+ )
+ }
+
+ const handleSignUp = () => {
+ setSignUp(!signUpOpen)
+ }
+
+ const handleLogin = () => {
+ setLogin(!loginOpen)
+ }
+
+ function toggleLoginSnackbar(reason) {
+ if (reason === 'clickaway') {
+ return;
+ }
+ handleSuccessfulLogin(false);
+ }
+
+ return (
+ <>
+ <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}
+ />
+ <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ openSnackbar={() => { handleSuccessfulLogin(true) }}
+ />
+ <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`}>
+ <Link to={"/colecao-do-usuario/" + props.id}>
+ <Header onMouseEnter={controlSlide} onMouseLeave={controlSlide}>
+ <div className={`slideContentLinkBeforeActive${slideIn}`} style={{ width: '272.5px', height: '230px' }}>
+ <UserInfo style={{ width: '272.5px'}}>
+ {/* I(Luis) dont know why, but if i use styled components, sometimes the avatar will be deconfigured */}
+ <img src={userAvatar} alt="user avatar" style={{
+ height: "70px", width: "70px", borderRadius: "50%",
+ zIndex: 1, border: "2px solid white",
+ boxShadow: "0 1px 3px rgba(0,0,0,.45)"
+ }} />
+ <UserAndTitle>
+ <span>{props.author}</span>
+ <span className={"col-name"}>{name}</span>
+ </UserAndTitle>
+ </UserInfo>
+ <StyledGrid container direction="row" style={{ width: '272.5px' }}>
+ {
+ props.thumbnails.map((thumb) =>
+ <Grid item xs={props.thumbnails.length <= 3 && props.thumbnails.length > 0 ? 12 / props.thumbnails.length : 6}>
+ <div style={{ backgroundImage: `url(${`${apiDomain}` + thumb})`, height: `${props.thumbnails.length <= 3 ? '230px' : '100%'}`, width: "100%", backgroundSize: "cover", backgroundPosition: "center" }} />
+ </Grid>
+ )
+ }
+ </StyledGrid>
+ </div>
+ {
+ <div className={`slideContentLinkAfterActive${slideIn}`}>
+ <div className="Text" style={{ width: "100%" }}>
+ {SlideAnimationContent(props.contrast)}
+ </div>
+ </div>
+ }
+ </Header>
+ </Link>
+
+ <Description className={`${props.contrast}BackColor`}> {/*renders rating, number of learning objects and likes count*/}
+ {
+ props.authorID !== state.currentUser.id &&
+ <Rating
+ style={props.contrast === "" ? {} : {color: "white"}}
+ name="customized-empty"
+ value={props.rating}
+ readOnly
+ emptyIcon={<StarBorderIcon className={`${props.contrast}Text`} fontSize="inherit" />}
+ />
+ }
+
+ <Footer className={`${props.contrast}Text`}>
+ <Type>
+ <FolderIcon style={props.contrast === "" ? {} : {color: "white"}} />
+ <span style={{ fontWeight: "bold" }}>{props.collections ? props.collections.length : 0} </span>
+ <span>{props.collections ? props.collections.length !== 1 ? "Recursos" : "Recurso" : 0}</span>
+ </Type>
+ <LikeCounter>
+ <span>{likesCount}</span>
+ <ButtonNoWidth onClick={handleLike}>
+ <FavoriteIcon className={`${props.contrast}LinkColor`} style={ props.contrast === "" ? {color: liked ? "red" : "#666"} : {color: liked ? "red" : "white"} } />
+ </ButtonNoWidth>
+ </LikeCounter>
+ </Footer>
+ </Description>
+
+ </CardReaDiv>
+
{
<div className={`slideContentLinkAfterActive${slideIn}`} style={{ width: '272.5px', height: '230px' }}>
<div className="text" >
@@ -474,4 +575,4 @@ const FollowingButton = styled(Button)`
box-shadow : none !important;
}
-`
+`
\ No newline at end of file
diff --git a/src/Components/CollectionCommentSection.js b/src/Components/CollectionCommentSection.js
index 4f16d012..c0aae8b6 100644
--- a/src/Components/CollectionCommentSection.js
+++ b/src/Components/CollectionCommentSection.js
@@ -24,17 +24,16 @@ import EditIcon from '@material-ui/icons/Edit';
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";
@@ -100,10 +99,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)
@@ -207,8 +202,8 @@ export default function CollectionCommentSection(props) {
}, [render_state, currPageReviews]);
return (
- <CommentAreaContainer container xs={12} direction="row" justify="center" alignItems="center">
- <SnackBarComponent
+ <CommentAreaContainer contrast={props.contrast} container xs={12} direction="row" justify="center" alignItems="center">
+ <SnackBar
snackbarOpen={snackInfo.open}
handleClose={handleCloseSnack}
severity={snackInfo.severity}
@@ -268,26 +263,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 bda45946..950e8f6f 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
variant="outlined"
color="primary"
diff --git a/src/Components/ContactButtons/FollowButton.js b/src/Components/ContactButtons/FollowButton.js
index 245eecbc..0af714e4 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 open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
@@ -134,11 +132,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 open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
diff --git a/src/Components/ContactCardOptions.js b/src/Components/ContactCardOptions.js
index 2cf3555c..32117058 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)
@@ -87,11 +83,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 open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
diff --git a/src/Components/ContactForm.js b/src/Components/ContactForm.js
index 3eb206b9..6d63135d 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`
@@ -224,72 +220,76 @@ const Button = styled.button`
- 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>
- {/*-------------------------------MODALS---------------------------------------*/}
- <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
- openSnackbar={() => { handleSuccessfulLogin(true) }}
- />
- <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
- {/*----------------------------------------------------------------------------*/}
-
-
- <form onSubmit={e => onSubmit(e)}>
- <FormInput
- inputType={"text"}
- name={"nome"}
- value={nome.dict.value}
- placeholder={"Nome *"}
- error = {nome.dict.key}
- help = {nome.dict.key ? "insira seu nome para o contato " : ""}
- handleChange={e => preencheNome(e)}
- />
- <br/>
- <FormInput
- inputType={"text"}
- name={"email"}
- value={email.dict.value}
- placeholder={"E-mail *"}
- error = {email.dict.key}
- help = {email.dict.key ? "Formato de e-mail incorreto ou vazio, tente : usuario@provedor.com" : ""}
- handleChange={e => preencheEmail(e)}
- />
- <br/>
- <br/>
- <FormInput
- inputType={"text"}
- name={"mensagem"}
- value={mensagem.dict.value}
- placeholder={"Mensagem *"}
- multi = {true}
- rows = "5"
- rowsMax = "6"
- error = {mensagem.dict.key}
- help = {mensagem.dict.key ? "Faltou escrever sua mensagem de sugestão, crÃtica ou dúvida." : "Escreva sua mensagem no campo acima."}
- handleChange={e => preencheMensagem(e)}
- />
- <br/>
- <br/>
- <div style={{display: "flex", justifyContent: "center"}}>
- {
- state.currentUser.id !== '' ? (
- <Button onClick={e => onSubmit(e)} >ENVIAR MENSAGEM</Button>
- )
- :
- (
- <Button onClick={e => {e.preventDefault(); handleLogin(true);}} >ENVIAR MENSAGEM</Button>
- )
- }
- </div>
- </form>
- </React.Fragment>
-
-
+ return (
+ <React.Fragment>
+ <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) }}
+ />
+ <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
+ {/*----------------------------------------------------------------------------*/}
+ <div>
+ <form onSubmit={e => onSubmit(e)}>
+ <FormInput
+ contrast={props.contrast}
+
+ inputType={"text"}
+ name={"nome"}
+ value={nome.dict.value}
+ placeholder={"Nome *"}
+ error={nome.dict.key}
+ help={nome.dict.key ? "insira seu nome para o contato " : ""}
+ handleChange={e => preencheNome(e)}
+ />
+ <br />
+ <FormInput
+ contrast={props.contrast}
+ inputType={"text"}
+ name={"email"}
+ value={email.dict.value}
+ placeholder={"E-mail *"}
+ error={email.dict.key}
+ help={email.dict.key ? "Formato de e-mail incorreto ou vazio, tente : usuario@provedor.com" : ""}
+ handleChange={e => preencheEmail(e)}
+ />
+ <br />
+ <br />
+ <FormInput
+ contrast={props.contrast}
+ inputType={"text"}
+ name={"mensagem"}
+ value={mensagem.dict.value}
+ placeholder={"Mensagem *"}
+ multi={true}
+ rows="5"
+ rowsMax="6"
+ error={mensagem.dict.key}
+ help={mensagem.dict.key ? "Faltou escrever sua mensagem de sugestão, crÃtica ou dúvida." : "Escreva sua mensagem no campo acima."}
+ handleChange={e => preencheMensagem(e)}
+ />
+ <br />
+ <br />
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ {
+ state.currentUser.id !== '' ? (
+ <Button contrast={props.contrast} onClick={e => onSubmit(e)} >ENVIAR MENSAGEM</Button>
+ )
+ :
+ (
+ <Button contrast={props.contrast} onClick={e => { e.preventDefault(); handleLogin(true); }} >ENVIAR MENSAGEM</Button>
+ )
+ }
+ </div>
+ </form>
+ </div>
+ </React.Fragment>
);
}
diff --git a/src/Components/Firulas.js b/src/Components/Firulas.js
index 6a368a11..6fd99c1d 100644
--- a/src/Components/Firulas.js
+++ b/src/Components/Firulas.js
@@ -4,20 +4,41 @@ import Rating from '@material-ui/lab/Rating';
import StarBorderIcon from '@material-ui/icons/StarBorder';
import {LikeCounter, ButtonNoWidth} from '../Components/ResourceCardFunction.js'
import FavoriteIcon from '@material-ui/icons/Favorite';
-import {putRequest} from './HelperFunctions/getAxiosConfig'
+import { putRequest } from './HelperFunctions/getAxiosConfig'
+import SignUpModal from './SignUpModal'
+import LoginModal from './LoginModal.js'
+
+import SnackBar from './SnackbarComponent';
export default function Firulas (props) {
const [liked, setLiked] = useState(props.liked)
- function handleSuccess (data) {
- setLiked(!liked)
+ const [signUpOpen, setSignUp] = useState(false)
+ const [loginOpen, setLogin] = useState(false)
+ const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
+
+ function handleSuccessLike(data) {
+ toggleLiked(!liked)
+ setLikesCount(data.count)
}
const handleLike = () => {
putRequest(`/learning_objects/${props.recursoId}/like/`, {}, handleSuccess, (error) => {console.log(error)})
}
return (
- <ConteinerFirulas>
+ <ConteinerFirulas style={props.contrast === "" ? {} : {color: "white"}}>
+ <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}
+ />
+ <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ openSnackbar={() => { handleSuccessfulLogin(true) }}
+ />
+ <SnackBar
+ snackbarOpen={successfulLoginOpen}
+ handleClose={toggleLoginSnackbar}
+ severity={"success"}
+ color={"#00acc1"}
+ text={"Você está conectado(a)!"}
+ />
<Rating
name="customized-empty"
value={props.rating*10}
diff --git a/src/Components/FormInput.js b/src/Components/FormInput.js
index 813877ed..5c6a802f 100644
--- a/src/Components/FormInput.js
+++ b/src/Components/FormInput.js
@@ -25,20 +25,70 @@ const StyledTextField = styled(TextField)`
max-width: 100%;
font-size : 15px;
font-weight : lighter;
- color : inherit;
width : 100% !important;
- full-width : 100% !important;
+
+ .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"};
+ }
+
+ .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"};
+ }
+ fieldset {
+ 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 : #00bcd4;
}
label.Mui-focused.Mui-error {
- color : red;
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
}
- .MuiInput-underline::after {
- border-bottom: 2px solid #00bcd4;
+ label.Mui-error {
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
}
`
@@ -63,22 +113,34 @@ export default function FormInput(props) {
return (
<StyledTextField
- label={props.placeholder}
- margin="normal"
- id = {props.name}
- name = {props.name}
- type = {props.inputType}
- value = {props.value}
- onChange = {props.handleChange}
- rows = {props.rows}
- error = {props.error}
- rowsMax = {props.rowsMax}
- InputProps={{className: classes.input}}
- required = {props.required}
- helperText ={props.help}
- style={{width:"100%"}}
- mask={props.mask}
- multiline={props.multi}
- />
- );
+ contrast={props.contrast}
+ key={props.key}
+ label={props.placeholder}
+ placeholder={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}
+ mask={props.mask}
+ multiline={props.multi}
+ >
+
+ {props.items}
+ </StyledTextField>
+ );
}
diff --git a/src/Components/Header.js b/src/Components/Header.js
index 54e02fea..259774ac 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)
@@ -96,60 +88,47 @@ export default function Header(props) {
return;
}
- handleSuccessfulLogin(false);
- }
-
- const handleSignUp = () => {
- setSignUp(!signUpOpen)
- }
-
- const handleLogin = () => {
- setLogin(!loginOpen)
- }
-
- const handleClickSearch = (open) => {
- dispatch({
- type: "HANDLE_SEARCH_BAR",
- opened: !state.searchOpen
- })
- }
-
- let windowWidth = window.innerWidth
-
- 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>
- {
- windowWidth > 990 ?
- (
- <React.Fragment>
- <MenuBar openSearchBar={handleClickSearch} openSignUp={handleSignUp} openLogin={handleLogin} />
- {
- state.searchOpen &&
- <SearchBar />
- }
- </React.Fragment>
-
- )
- :
- (
- <React.Fragment>
- <MenuBarMobile openSearchBar={handleClickSearch} openSignUp={handleSignUp} openLogin={handleLogin} />
- {
- state.searchOpen &&
- <SearchBar />
- }
- </React.Fragment>
- )
- }
- <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
- <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
- openSnackbar={() => { handleSuccessfulLogin(true) }} />
- <ColaborarModal open={modalColaborar} handleClose={() => { setModalColaborar(!modalColaborar) }} />
- </React.Fragment>
- )
+ let windowWidth = window.innerWidth
+
+ return (
+ <React.Fragment>
+ <SnackBar
+ snackbarOpen={successfulLoginOpen}
+ handleClose={toggleSnackbar}
+ severity={"success"}
+ color={"#00acc1"}
+ text={"Você está conectado(a)!"}
+ />
+ {
+ windowWidth > 990 ?
+ (
+ <React.Fragment>
+ <div id="Pesquisa_scroll"></div>
+ <MenuBar openSearchBar={handleClickSearch} openSignUp={handleSignUp} openLogin={handleLogin} />
+ {
+ state.searchOpen &&
+ <SearchBar />
+ }
+ </React.Fragment>
+
+ )
+ :
+ (
+ <React.Fragment>
+ <div id="Pesquisa_scroll"></div>
+ <MenuBarMobile contrast={state.contrast} openSearchBar={handleClickSearch} openSignUp={handleSignUp} openLogin={handleLogin} />
+ {
+ state.searchOpen &&
+ <SearchBar />
+ }
+ </React.Fragment>
+ )
+ }
+ <SignUpModal contrast={state.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
+ <LoginModal contrast={state.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ openSnackbar={() => { handleSuccessfulLogin(true) }}
+ />
+ <ColaborarModal contrast={state.contrast} open={modalColaborar} handleClose={() => { setModalColaborar(!modalColaborar) }} />
+ </React.Fragment>
+ )
}
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/LoadingSpinner.js b/src/Components/LoadingSpinner.js
index 68c447c4..33a457f5 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={{textTransform:"uppercase"}}>{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;
diff --git a/src/Components/LoginModal.js b/src/Components/LoginModal.js
index 9ebce191..93df7e39 100644
--- a/src/Components/LoginModal.js
+++ b/src/Components/LoginModal.js
@@ -22,10 +22,10 @@ import Backdrop from '@material-ui/core/Backdrop';
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 { Store } from '../Store.js'
+import { authentication } from './HelperFunctions/getAxiosConfig'
+
+import SnackBar from './SnackbarComponent';
const StyledLogin = styled(Modal)`
margin : 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,30 +78,33 @@ 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>
- <StyledLogin
- aria-labelledby="transition-modal-title"
- aria-describedby="transition-modal-description"
- open={props.open}
- centered="true"
- onClose={props.handleClose}
- closeAfterTransition
- BackdropComponent={Backdrop}
- BackdropProps={{
- timeout: 500,
- }}
- >
- <Zoom in={props.open} style={{ transitionDelay :"0.2ms"}}>
- <LoginContainer handleClose={props.handleClose}
- openSignUp={props.openSignUp}
- handleLoginInfo={handleLoginInfo}
- />
- </Zoom>
- </StyledLogin>
+ <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"
+ open={props.open}
+ centered="true"
+ onClose={props.handleClose}
+ closeAfterTransition
+ BackdropComponent={Backdrop}
+ BackdropProps={{
+ timeout: 500,
+ }}
+ >
+ <Zoom in={props.open} style={{ transitionDelay: "0.2ms" }}>
+ <LoginContainer
+ contrast={state.contrast}
+ handleClose={props.handleClose}
+ openSignUp={props.openSignUp}
+ handleLoginInfo={handleLoginInfo}
+ />
+ </Zoom>
+ </StyledLogin>
</>
)
diff --git a/src/Components/ModalAvaliarRecurso.js b/src/Components/ModalAvaliarRecurso.js
index 7795876d..7f9b7651 100644
--- a/src/Components/ModalAvaliarRecurso.js
+++ b/src/Components/ModalAvaliarRecurso.js
@@ -28,12 +28,12 @@ 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 TextField from '@material-ui/core/TextField';
import { withStyles } from '@material-ui/core/styles';
import { getRequest } from './HelperFunctions/getAxiosConfig'
import LoadingSpinner from '../Components/LoadingSpinner'
+import SnackBar from './SnackbarComponent';
+
const StyledRadio = withStyles({
root: {
color: '#666',
@@ -116,9 +116,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 f23b819d..971dc2f5 100644
--- a/src/Components/ModalExcluirColecao.js
+++ b/src/Components/ModalExcluirColecao.js
@@ -21,9 +21,9 @@ import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop';
import Fade from '@material-ui/core/Fade';
import styled from 'styled-components'
-import GreyButton from './GreyButton.js'
-import PurpleButton from './PurpleButton.js'
-import SnackbarComponent from './SnackbarComponent'
+import { ButtonCancelar, ButtonEnviar } from './EditarColecaoForm';
+import CloseModalButton from './CloseModalButton'
+import Snackbar from './SnackbarComponent'
import {deleteRequest} from './HelperFunctions/getAxiosConfig'
export default function ModalExcluirColecao (props) {
@@ -56,8 +56,8 @@ export default function ModalExcluirColecao (props) {
>
<Fade in={props.open}>
<>
- <SnackbarComponent snackbarOpen={snackbarOpen} severity={"info"} handleClose={() => {toggleSnackbar(false)}} text={"Coleção excluÃda com sucesso"}/>
- <Container>
+ <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>
</Header>
diff --git a/src/Components/PageProfessorComponents/PartOne.js b/src/Components/PageProfessorComponents/PartOne.js
index ad8fcf9a..02189c34 100644
--- a/src/Components/PageProfessorComponents/PartOne.js
+++ b/src/Components/PageProfessorComponents/PartOne.js
@@ -214,6 +214,68 @@ 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"};
+ }
+ fieldset {
+ 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`
display : flex;
justify-content : center;
diff --git a/src/Components/ReportModal.js b/src/Components/ReportModal.js
index 079ca75f..5e0d84fd 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 (
@@ -81,8 +81,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/ReportUserForm.js b/src/Components/ReportUserForm.js
index 37086572..bbb8b534 100644
--- a/src/Components/ReportUserForm.js
+++ b/src/Components/ReportUserForm.js
@@ -154,8 +154,54 @@ 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"};
+ }
+ fieldset {
+ 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 {
@@ -163,11 +209,11 @@ export const StyledTextField = styled(TextField)`
}
label.Mui-focused.Mui-error {
- color : red;
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
}
- .MuiInput-underline::after {
- border-bottom: 2px solid orange;
+ label.Mui-error {
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
}
`
diff --git a/src/Components/ResourceCardFunction.js b/src/Components/ResourceCardFunction.js
index d81a0ade..8e343896 100644
--- a/src/Components/ResourceCardFunction.js
+++ b/src/Components/ResourceCardFunction.js
@@ -35,8 +35,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";
@@ -57,10 +57,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) {
@@ -144,11 +140,13 @@ export default function ResourceCardFunction(props) {
<LoginModal 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>
<CardReaDiv>
diff --git a/src/Components/ResourceCardOptions.js b/src/Components/ResourceCardOptions.js
index 1ac22f4a..4da8f13a 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 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} style={{ color: "#666" }}>
diff --git a/src/Components/ResourceList.js b/src/Components/ResourceList.js
index e32176c7..1cb58be3 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) {
@@ -183,16 +178,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/CommentForm.js b/src/Components/ResourcePageComponents/CommentForm.js
index 0272d76f..219198f4 100644
--- a/src/Components/ResourcePageComponents/CommentForm.js
+++ b/src/Components/ResourcePageComponents/CommentForm.js
@@ -141,11 +141,61 @@ const OrangeButton = styled(Button)`
const StyledTextField = styled(TextField)`
.MuiInputBase-root {
- margin-bottom : 5px;
+ margin-bottom: 5px;
}
- label.Mui-focused {
- color : ${props => props.colecao ? "#673ab7" : "rgb(255,127,0)"}
+ 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"};
+ }
+ fieldset {
+ 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"};
}
.MuiInput-underline::after {
@@ -153,11 +203,13 @@ 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`
display : flex;
diff --git a/src/Components/ResourcePageComponents/CommentsArea.js b/src/Components/ResourcePageComponents/CommentsArea.js
index 1ee202d9..008d75a5 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([])
@@ -125,18 +120,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 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 98e7fcd1..5fee2e19 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 (
@@ -144,11 +140,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 open={reportOpen} handleClose={() => { toggleReport(false) }}
form="recurso"
diff --git a/src/Components/ResourcePageComponents/Sobre.js b/src/Components/ResourcePageComponents/Sobre.js
index f1e20fa4..d6b6fee3 100644
--- a/src/Components/ResourcePageComponents/Sobre.js
+++ b/src/Components/ResourcePageComponents/Sobre.js
@@ -34,18 +34,14 @@ 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) {
+function AdditionalInfoItem(props) {
return (
<span className="meta-objeto">
{props.icon}
@@ -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 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 f19b82e1..b45fb0e4 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 61c4fb28..6663e78a 100644
--- a/src/Components/SignUpModal.js
+++ b/src/Components/SignUpModal.js
@@ -21,15 +21,10 @@ import Backdrop from '@material-ui/core/Backdrop';
import Fade from '@material-ui/core/Fade';
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 { Store } from '../Store.js'
+import { authentication } from './HelperFunctions/getAxiosConfig'
+
+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 60692e9c..0250f3a5 100644
--- a/src/Components/SnackbarComponent.js
+++ b/src/Components/SnackbarComponent.js
@@ -16,16 +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 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'
export default function SnackbarComponent(props) {
+ 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/Stepper.js b/src/Components/Stepper.js
index b1315b98..18b29b8a 100644
--- a/src/Components/Stepper.js
+++ b/src/Components/Stepper.js
@@ -7,11 +7,36 @@ export default function Stepper (props) {
<div style={{display:"flex",justifyContent:"center", marginBottom:"50px"}}>
<FeedbackUpload>
{
- props.items.map((item)=>
- <div className={"page-selector " + (item.selected ? 'selected' : '')} >
- {item.value}
- </div>
- )
+ !isInFinalSTep(props.activeStep) ?
+
+ [0, 1, 2, 3].map((index) => {
+ return (
+ <Grid item key={new Date().toISOString() + index}>
+ <div className={props.activeStep === index ? "currStep" : "step"}>
+ {
+ index < props.activeStep ?
+ <Check style={props.contrast === "" ? { color: "#00bcd4" } : { color: "white" }} /> : <span>{index + 1}</span>
+ }
+ </div>
+ </Grid>
+ )
+ })
+ :
+ [0, 1, 2, 3].map((index) => {
+ return (
+ <Grid item key={new Date().toISOString() + index}>
+ <div className={props.activeStep === index ? "currStep" : "finalStep"}>
+ {
+ index < props.activeStep ?
+ <Check style={{ color: 'white' }} /> :
+ <span style={{ color: 'white' }}>
+ {index + 1}
+ </span>
+ }
+ </div>
+ </Grid>
+ )
+ })
}
</FeedbackUpload>
</div>
diff --git a/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js b/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js
index f8cf40d0..95f5a478 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/Forms/Keywords.js b/src/Components/UploadPageComponents/Forms/Keywords.js
index fa2418b7..55b9aca1 100644
--- a/src/Components/UploadPageComponents/Forms/Keywords.js
+++ b/src/Components/UploadPageComponents/Forms/Keywords.js
@@ -74,8 +74,8 @@ function Keywords (props) {
if(event.keyCode === 13){
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 c1f9d40f..efa439df 100644
--- a/src/Components/UploadPageComponents/Stepper.js
+++ b/src/Components/UploadPageComponents/Stepper.js
@@ -59,14 +59,40 @@ function ColorlibStepIcon(props) {
};
return (
- <div
- className={clsx(classes.root, {
- [classes.active]: active,
- [classes.completed]: completed,
- })}
- >
- {completed ? <Check className={classes.completed} /> : icons[String(props.icon)]}
- </div>
+ <MainGrid contrast={props.contrast} container direction='row' justify='space-between' alignItems='center'>
+ {
+ !isInFinalSTep(props.activeStep) ?
+
+ [0, 1, 2].map((index) => {
+ return (
+ <Grid item key={new Date().toISOString() + index}>
+ <div className={props.activeStep === index ? "currStep" : "step"}>
+ {
+ index < props.activeStep ?
+ <Check style={props.contrast === "" ? { color: "#00bcd4" } : { color: "white" }} /> : <span>{index + 1}</span>
+ }
+ </div>
+ </Grid>
+ )
+ })
+ :
+ [0, 1, 2].map((index) => {
+ return (
+ <Grid item key={new Date().toISOString() + index}>
+ <div className={props.activeStep === index ? "currStep" : "finalStep"}>
+ {
+ index < props.activeStep ?
+ <Check style={{ color: 'white' }} /> :
+ <span style={{ color: 'white' }}>
+ {index + 1}
+ </span>
+ }
+ </div>
+ </Grid>
+ )
+ })
+ }
+ </MainGrid >
);
}
diff --git a/src/Components/UploadPageComponents/StyledComponents.js b/src/Components/UploadPageComponents/StyledComponents.js
index 3c157e6f..632e61cb 100644
--- a/src/Components/UploadPageComponents/StyledComponents.js
+++ b/src/Components/UploadPageComponents/StyledComponents.js
@@ -367,8 +367,39 @@ export const StyledTextField = styled(TextField)`
width : 100% !important;
full-width : 100% !important;
- .MuiFormControl-root {
- margin : 18px 0 !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"};
+ }
+ fieldset {
+ border-color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
}
@@ -377,20 +408,24 @@ export const StyledTextField = styled(TextField)`
font-size : 14px !important ;
}
+ .MuiFormLabel-asterisk {
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+
+ .MuiFormLabel-asterisk.Mui-error {
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
+ }
+
label.Mui-focused {
color : #00bcd4;
}
label.Mui-focused.Mui-error {
- color : red;
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
}
- .MuiInput-underline::after {
- border-bottom: 2px solid #00bcd4;
- }
- .MuiFormHelperText-root {
- font-size : 12px !important;
- text-align : right !important;
+ label.Mui-error {
+ color: ${props => props.contrast === "" ? "red" : "#e75480"};
}
`
diff --git a/src/Components/UploadPageComponents/UploadFileWrapper.js b/src/Components/UploadPageComponents/UploadFileWrapper.js
index b8919a54..f872fe06 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) {
/*-----------------------------------------------------------------
@@ -222,14 +222,14 @@ 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>
- <ChooseLink handleNextStage={handleNextStage} submit={handleChooseLink}/>
+ <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>
)
default:
diff --git a/src/Components/carousel.css b/src/Components/carousel.css
index e1c5dc42..ea66082f 100644
--- a/src/Components/carousel.css
+++ b/src/Components/carousel.css
@@ -26,10 +26,16 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
-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);
+.Carousel .control-arrow {
+ background: orange !important;
+
+ -webkit-box-shadow: 0px 0px 30px -10px #000000;
+ box-shadow: 0px 0px 15px -5px #000000;
}
-.carousel .slide {
- background-color: inherit !important;
+.ContrastCarousel .control-arrow {
+ background: black !important;
+ border: 1px solid white !important;
}
.MuiPaper-elevation1-209{
@@ -38,12 +44,13 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
.carousel.carousel-slider .control-arrow {
- top: 35%!important;
- bottom: 50%!important;
- border-radius: 100%!important;
- opacity: 1!important;
- text-align: center;
- vertical-align: middle;
- height: 50px;
- width: 50px;
+ top: 35%!important;
+ bottom: 50%!important;
+ border-radius: 100%!important;
+ opacity: 1!important;
+ text-align: center;
+ vertical-align: middle;
+ height: 50px;
+ width: 50px;
+ margin: 10px;
}
diff --git a/src/Pages/ChangePasswordPage.js b/src/Pages/ChangePasswordPage.js
index cf552c07..a40367f6 100644
--- a/src/Pages/ChangePasswordPage.js
+++ b/src/Pages/ChangePasswordPage.js
@@ -7,16 +7,12 @@ 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'
-function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
+import SnackBar from '../Components/SnackbarComponent';
export default function ChangePasswordPage(props) {
@@ -175,17 +171,13 @@ export default function ChangePasswordPage(props) {
if (error)
return (
- <BackgroundDiv>
- <Snackbar
- open={snackInfo.open}
- autoHideDuration={6000}
- onClose={handleCloseSnack}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- >
- <Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
- {snackInfo.text}
- </Alert>
- </Snackbar>
+ <BackgroundDiv contrast={state.contrast}>
+ <SnackBar
+ snackbarOpen={snackInfo.open}
+ handleClose={handleCloseSnack}
+ severity={snackInfo.severity}
+ text={snackInfo.text}
+ />
<div>
<CustomizedBreadcrumbs
values={["Recuperar senha", "Alterar senha"]}
@@ -206,17 +198,13 @@ export default function ChangePasswordPage(props) {
)
else if (success)
return (
- <BackgroundDiv>
- <Snackbar
- open={snackInfo.open}
- autoHideDuration={6000}
- onClose={handleCloseSnack}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- >
- <Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
- {snackInfo.text}
- </Alert>
- </Snackbar>
+ <BackgroundDiv contrast={state.contrast}>
+ <SnackBar
+ snackbarOpen={snackInfo.open}
+ handleClose={handleCloseSnack}
+ severity={snackInfo.severity}
+ text={snackInfo.text}
+ />
<div>
<CustomizedBreadcrumbs
values={["Recuperar senha", "Alterar senha"]}
@@ -237,17 +225,13 @@ export default function ChangePasswordPage(props) {
)
else
return (
- <BackgroundDiv>
- <Snackbar
- open={snackInfo.open}
- autoHideDuration={6000}
- onClose={handleCloseSnack}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- >
- <Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
- {snackInfo.text}
- </Alert>
- </Snackbar>
+ <BackgroundDiv contrast={state.contrast}>
+ <SnackBar
+ snackbarOpen={snackInfo.open}
+ handleClose={handleCloseSnack}
+ severity={snackInfo.severity}
+ text={snackInfo.text}
+ />
<div>
<CustomizedBreadcrumbs
values={["Recuperar senha", "Alterar senha"]}
diff --git a/src/Pages/EditLearningObjectPage.js b/src/Pages/EditLearningObjectPage.js
index c785bf35..e85f508c 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)
@@ -248,13 +248,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 f85c888d..bcdb7711 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
@@ -119,12 +119,13 @@ export default function EditProfilePage(props) {
}
return (
- <div style={{ backgroundColor: "#f4f4f4", color: "#666" }}>
- <Snackbar open={snackbarOpened.open} autoHideDuration={1000} onClose={handleCloseSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- >
- <Alert severity={snackbarOpened.severity} >{snackbarOpened.text}</Alert>
- </Snackbar>
+ <Main contrast={state.contrast}>
+ <SnackBar
+ snackbarOpen={snackbarOpened.open}
+ handleClose={handleCloseSnackbar}
+ severity={snackbarOpened.severity}
+ text={snackbarOpened.text}
+ />
<CustomizedBreadcrumbs
values={["Minha área", "Configurações da Conta", tabs[tabValue]]}
diff --git a/src/Pages/ResourcePage.js b/src/Pages/ResourcePage.js
index 37d96115..650b7786 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";
@@ -103,240 +103,217 @@ export default function LearningObjectPage(props) {
}
};
- const checkUserRole = (userRole) => {
- return (
- state.currentUser.roles.filter((role) => role.name === userRole).length >
- 0
- );
- };
-
- const [modalConfirmarCuradoriaOpen, toggleModalConfirmarCuradoria] = useState(
- false
- );
- const handleModalConfirmarCuradoria = (value) => {
- toggleModalConfirmarCuradoria(value);
- };
- const [reportCriteria, setReportCriteria] = useState([]);
- const [justificativa, setJustificativa] = useState("");
- const [submissionAccepted, setSubmissionAccepted] = useState("");
-
- const handleConfirm = (criteria, justification, accepted) => {
- setReportCriteria(criteria);
- setJustificativa(justification);
- setSubmissionAccepted(accepted);
- handleModalCuradoria(false);
- handleModalConfirmarCuradoria(true);
- };
-
- const finalizeCuratorshipFlow = () => {
- handleSnackbar(5);
- handleModalConfirmarCuradoria(false);
- const url = `/learning_objects/${id}`;
- getRequest(
- url,
- (data) => {
- setRecurso(data);
- },
- (error) => {
- handleSnackbar(7);
- setErro(true);
- }
- );
- };
-
- if (erro)
- return <LearnObjectNotFound>
- <Grid container direction='column' justify='center' alignItems='center' spacing={1}>
- <Grid item>
- <p className="not-found">
- O recurso não foi encontrado em nossa base de dados.
- </p>
- </Grid>
- <Grid item>
- <Link className="link" to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=LearningObject`}>
- <Button
- variant='contained'
- className="back-button"
- >
- Voltar para a busca de recursos.
- </Button>
- </Link>
- </Grid>
- </Grid>
- </LearnObjectNotFound>
- 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
- open={modalCuradoriaOpen}
- handleClose={() => {
- handleModalCuradoria(false);
- }}
- title={recurso.name}
- confirm={handleConfirm}
- setCriteria={setReportCriteria}
- />
- <ModalConfirmarCuradoria
- aceito={submissionAccepted}
- reportCriteria={reportCriteria}
- justificativa={justificativa}
- open={modalConfirmarCuradoriaOpen}
- handleClose={() => {
- handleModalConfirmarCuradoria(false);
- }}
- cancel={() => {
- handleModalCuradoria(true);
- }}
- recursoId={recurso.submission_id}
- finalizeCuratorshipFlow={finalizeCuratorshipFlow}
- handleErrorAprove={() => {
- handleSnackbar(6)
- }}
- />
- <Background>
- {carregando ? (
- <LoadingSpinner text={"Carregando Recurso"} />
- ) : (
- <>
- <Grid container spacing={2}>
- {recurso.object_type === "VÃdeo" && !recurso.link ? (
- <Grid item xs={12}>
- <Card>
- <VideoPlayer
- 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>
- <VideoPlayer link={recurso.link} urlVerified={true} />
- </Card>
- </Grid>
- )
- )}
-
- <Grid item xs={12}>
- <Card>
- <div>
- {recurso.thumbnail && (
- <img alt="" src={apiDomain + recurso.thumbnail} />
- )}
-
- <TextoObjeto
- 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}
- />
- </div>
-
- <Footer
- 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>
- {/*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>
-
- {recurso.state !== "submitted" && (
- <Grid item xs={12}>
- <Card>
- {/*adicionar funcionalidade ao botao de entrar*/}
- <CommentsArea
- recursoId={id}
- handleSnackbar={handleSnackbar}
- objType={recurso.object_type}
- recurso={true}
- />
- </Card>
- </Grid>
- )}
+ const handleModalConfirmarCuradoria = (value) => {
+ toggleModalConfirmarCuradoria(value);
+ };
+ const [reportCriteria, setReportCriteria] = useState([]);
+ const [justificativa, setJustificativa] = useState("");
+ const [submissionAccepted, setSubmissionAccepted] = useState("");
+
+ const handleConfirm = (criteria, justification, accepted) => {
+ setReportCriteria(criteria);
+ setJustificativa(justification);
+ setSubmissionAccepted(accepted);
+ handleModalCuradoria(false);
+ handleModalConfirmarCuradoria(true);
+ };
+
+ if (erro)
+ return <LearnObjectNotFound contrast={state.contrast}>
+ <Grid container direction='column' justify='center' alignItems='center' spacing={1}>
+ <Grid item>
+ <p className="not-found">
+ O recurso não foi encontrado em nossa base de dados.
+ </p>
</Grid>
-
- {recurso.state === "submitted" && checkAccessLevel("curator") && (
- <AppBar
- position="fixed"
- color="primary"
- className={classes.appBar}
- >
- <StyledAppBarContainer>
- <div className="container">
- <div className="botoes">
- <ButtonAvaliarRecurso
- callback={() => {
- handleModalCuradoria(true);
- }}
- />
- </div>
- </div>
- </StyledAppBarContainer>
- </AppBar>
- )}
- </>
- )}
- </Background>
- </React.Fragment>
- );
+ <Grid item>
+ <Link to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=LearningObject`}>
+ <Button
+ variant='contained'
+ className="back-button"
+ >
+ Voltar para a busca de recursos
+ </Button>
+ </Link>
+ </Grid>
+ </Grid>
+ </LearnObjectNotFound>
+ else
+ return (
+ <React.Fragment>
+ <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}
+ 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}
+ />
+ </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>
+
+ {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>
+ </StyledAppBarContainer>
+ </AppBar>
+ )}
+ </>
+ )}
+ </Background>
+ </React.Fragment>
+ );
}
const useStyles = makeStyles((theme) => ({
diff --git a/src/Pages/Search.js b/src/Pages/Search.js
index 15628592..9e8b5d7e 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();
@@ -501,30 +497,116 @@ export default function Search() {
/>
</Fragment>
}
- {
- currOption === 'Collection' &&
- <CollectionTemplate
- handleNextPage={handleNextPage}
- handlePreviousPage={handlePreviousPage}
- isLoading={isLoading}
- currPage={currPage}
- resources={collectionsArray}
- totalResources={totalCollections}
- />
- }
- {
- currOption === 'User' &&
- <UserTemplate
- handleNextPage={handleNextPage}
- handlePreviousPage={handlePreviousPage}
- isLoading={isLoading}
- currPage={currPage}
- resources={usersArray}
- totalResources={totalUsers}
- />
- }
- </MainPage>
- )
+
+ getRequest(
+ url,
+ (data, headers) => { handleSuccess(data, headers, searchClass) },
+ handleFail,
+ );
+
+ }, [window.history.state === null ? true : window.history.state.key, state.currentUser.id])
+
+ if (error)
+ return (
+ <div style={state.contrast === "" ? {} : { backgroundColor: "black" }}>
+ <MainPageError>
+ <SnackBar
+ snackbarOpen={snackInfo.open}
+ handleClose={handleCloseSnack}
+ severity={snackInfo.severity}
+ text={snackInfo.text}
+ />
+ <Error contrast={state.contrast} />
+ </MainPageError>
+ </div>
+ )
+ else
+ return (
+ <div style={state.contrast === "" ? {} : { backgroundColor: "black" }}>
+ <MainPage>
+ <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>
+ </StyledBreadCrumbs>
+ <HeaderFilters
+ contrast={state.contrast}
+ options={options}
+ orders={orders}
+ currOption={currOption}
+ currOrder={currOrder}
+ handleChangeOption={handleChangeOption}
+ handleChangeOrder={handleChangeOrder}
+ />
+ {
+ currOption === 'LearningObject' &&
+ <Fragment>
+ <SearchExpansionPanel
+ contrast={state.contrast}
+ setTag={(tag) => setTag(tag)}
+ curriculumComponents={curriculumComponents}
+ setCurriculum={(array) => { setCurriculumComponents(array) }}
+ typeOfResources={typeOfResources}
+ setTypeRes={(array) => { setTypeOfResources(array) }}
+ teachingStage={teachingStage}
+ setTeachingStage={(array) => { setTeachingStage(array) }}
+ languages={languages}
+ setLanguages={(array) => { setLanguages(array) }}
+ />
+ {
+ <FilterSummary
+ contrast={state.contrast}
+ curriculumComponents={curriculumComponents}
+ typeOfResources={typeOfResources}
+ languages={languages}
+ teachingStage={teachingStage}
+ tag={tag}
+ onButtonClicked={onButtonClicked}
+ />
+ }
+ <ResourceTemplate
+ contrast={state.contrast}
+ handleNextPage={handleNextPage}
+ handlePreviousPage={handlePreviousPage}
+ isLoading={isLoading}
+ currPage={currPage}
+ resources={resourcesArray}
+ totalResources={totalResources}
+ />
+ </Fragment>
+ }
+ {
+ currOption === 'Collection' &&
+ <CollectionTemplate
+ contrast={state.contrast}
+ handleNextPage={handleNextPage}
+ handlePreviousPage={handlePreviousPage}
+ isLoading={isLoading}
+ currPage={currPage}
+ resources={collectionsArray}
+ totalResources={totalCollections}
+ />
+ }
+ {
+ currOption === 'User' &&
+ <UserTemplate
+ contrast={state.contrast}
+ handleNextPage={handleNextPage}
+ handlePreviousPage={handlePreviousPage}
+ isLoading={isLoading}
+ currPage={currPage}
+ resources={usersArray}
+ totalResources={totalUsers}
+ />
+ }
+ </MainPage>
+ </div>
+ )
}
const MainPage = styled.div`
--
GitLab
From 8d4de66579e393d9ebef593f0a4af82c88f99d04 Mon Sep 17 00:00:00 2001
From: Vinicius Gabriel Machado <vgm18@inf.ufpr.br>
Date: Thu, 21 Oct 2021 10:52:22 -0300
Subject: [PATCH 3/3] Reversing the last merges and updating files to the
latest version
---
.../Components/DataCards/ActivityCard.js | 1 -
.../DataCards/CommunityQuestionCard.js | 22 +-
.../DataCards/EducationalObjectsCard.js | 1 -
.../Components/Inputs/CreateInstitution.js | 22 +-
.../Components/Inputs/CreateLanguage.js | 19 -
.../Components/Inputs/CreateQuestion.js | 21 -
.../Components/Inputs/CreateRating.js | 19 -
.../Components/Inputs/CreateRole.js | 20 -
.../Components/Inputs/EditCollection.js | 23 +-
.../Components/Inputs/EditEducationalObect.js | 22 +-
.../Components/Inputs/EditLanguage.js | 23 +-
.../Components/Inputs/EditRating.js | 23 +-
.../Components/Components/Inputs/EditRoles.js | 23 +-
.../Components/Components/Inputs/EditUser.js | 24 +-
.../Components/Inputs/IntitutionsInputs.js | 22 +-
.../Components/Inputs/NoteVarInputs.js | 23 +-
.../Components/Components/Unauthorized.js | 16 +-
src/App.css | 41 +
src/App.js | 334 +-------
src/Components/AGPLFooter.js | 12 +-
src/Components/AboutCarousel.js | 60 +-
src/Components/AboutCarouselPartner.js | 71 +-
.../ContrastBar.css} | 52 +-
src/Components/Accessibility/ContrastBar.js | 209 +++++
src/Components/ActivityListItem.js | 31 +-
src/Components/AreasSubPagesFunction.js | 702 ++++++++--------
src/Components/ButtonAvaliarRecurso.js | 14 +-
src/Components/ButtonGuardarColecao.js | 14 +-
src/Components/Carousel.js | 665 ---------------
src/Components/Checkbox.js | 47 +-
src/Components/CloseModalButton.js | 2 +-
src/Components/ColCardOwnerOptions.js | 116 +--
src/Components/ColCardPublicOptions.js | 46 +-
src/Components/CollectionAuthor.js | 24 +-
src/Components/CollectionCardFunction.js | 445 ++++------
src/Components/CollectionCommentSection.js | 86 +-
src/Components/CollectionDescription.js | 6 +-
src/Components/CollectionDowloadButton.js | 5 +
src/Components/CollectionReview.js | 21 +-
src/Components/Comment.js | 485 +++++++----
src/Components/ContactButtons/FollowButton.js | 139 ++-
.../ContactButtons/FollowersCountButton.js | 5 +-
.../ContactButtons/FollowingButton.js | 163 ++--
src/Components/ContactCard.js | 67 +-
src/Components/ContactCardOptions.js | 47 +-
src/Components/ContactForm.js | 266 +++---
src/Components/CriarColecaoForm.js | 113 ++-
src/Components/CriarColecaoModal.js | 27 +-
src/Components/Cropper.js | 167 ++--
src/Components/Dropdown.js | 115 +--
src/Components/EcFooter.js | 30 +-
src/Components/EditarColecaoForm.js | 59 +-
src/Components/ExpandedMaterials.js | 9 +-
src/Components/ExpansionPanels.js | 604 +++++++-------
src/Components/Firulas.js | 55 +-
src/Components/FollowCollectionButton.js | 8 +-
src/Components/FormInput.js | 38 +-
.../FormationMaterialDescription.js | 60 +-
src/Components/FormationMaterialHeader.js | 70 +-
src/Components/Funcionalities.js | 55 +-
src/Components/GreyButton.js | 9 +-
src/Components/GuardarModal.js | 55 +-
src/Components/Header.js | 123 +--
.../HelpCenter/Cards/CardEncontrando.js | 143 ++--
.../HelpCenter/Cards/CardGerenciando.js | 143 ++--
.../HelpCenter/Cards/CardParticipando.js | 145 ++--
.../HelpCenter/Cards/CardPublicando.js | 36 +-
.../HelpCenter/TabsManageAc/Forget.js | 118 ++-
.../HelpCenter/TabsManageAc/HowToAccess.js | 11 +-
.../HelpCenter/TabsManageAc/HowToChange.js | 11 +-
.../HelpCenter/TabsManageAc/HowToDo.js | 29 +-
src/Components/HelpCenter/TabsManageAc/Why.js | 8 +-
src/Components/HelpCenter/TabsNetPart/How.js | 8 +-
src/Components/HelpCenter/TabsNetPart/What.js | 8 +-
.../HelpCenter/TabsPlataformaMEC/How.js | 41 +-
.../HelpCenter/TabsPlataformaMEC/Software.js | 31 +-
.../HelpCenter/TabsPlataformaMEC/Types.js | 25 +-
.../TabsPlataformaMEC/Understand.js | 24 +-
.../HelpCenter/TabsPlataformaMEC/What.js | 23 +-
.../HelpCenter/TabsPlataformaMEC/Which.js | 23 +-
.../HelpCenter/TabsResourseFind/HowToDo.js | 19 +-
.../TabsResourseFind/HowToFilter.js | 8 +-
.../HelpCenter/TabsResourseFind/HowToRank.js | 8 +-
.../HelpCenter/TabsResoursePub/How.js | 11 +-
.../HelpCenter/TabsResoursePub/Which.js | 8 +-
.../HelpCenter/TabsResoursePub/Why.js | 38 +-
.../HelperFunctions/getAxiosConfig.js | 1 -
src/Components/HomeScreenSearchBar.js | 141 +++-
src/Components/IframeOverlay/DrawerContent.js | 4 -
src/Components/LoadingSpinner.js | 2 +-
src/Components/LoginContainerFunction.js | 264 +++---
src/Components/LoginModal.js | 18 +-
src/Components/MaterialCard.js | 66 +-
src/Components/MenuBar.js | 226 ++---
src/Components/MenuBarMobile.js | 17 +-
src/Components/MenuList.js | 159 ++--
src/Components/MobileDrawerMenu.js | 56 +-
src/Components/Modal.js | 100 ---
src/Components/ModalAbout.js | 339 ++++----
.../ComponentAlterarAvatar.js | 143 ++--
.../ModalAlterarAvatar/ModalAlterarAvatar.js | 6 +-
.../ComponentAlterarCover.js | 109 ++-
.../ModalAlterarCover/ModalAlterarCover.js | 8 +-
src/Components/ModalAvaliarRecurso.js | 74 +-
src/Components/ModalConfirmarCuradoria.js | 36 +-
src/Components/ModalConfirmarUnfollow.js | 29 +-
src/Components/ModalEditarColecao.js | 11 +-
src/Components/ModalExcluirColecao.js | 18 +-
src/Components/ModalExcluirComentario.js | 62 +-
.../ModalLearningObjectPublished.js | 31 +-
src/Components/Notifications.js | 79 +-
.../ModalConfirmarProfessor.js | 23 +-
.../PageProfessorComponents/PartOne.js | 271 +++---
.../PageProfessorComponents/PartThree.js | 144 ++--
.../PageProfessorComponents/PartTwo.js | 93 +--
.../SuccessfulRequest.js | 16 +-
.../PasswordRecoveryComponents/Default.js | 23 +-
.../PasswordRecoveryComponents/Error.js | 42 +-
.../PasswordRecoveryComponents/Success.js | 43 +-
.../PublicationPermissionsContent.js | 138 ++-
src/Components/PurpleButton.js | 52 --
src/Components/RedirectModal.js | 38 +-
src/Components/ReportButton.js | 55 +-
src/Components/ReportColecaoForm.js | 52 +-
src/Components/ReportModal.js | 21 +-
src/Components/ReportRecursoForm.js | 40 +-
src/Components/ReportUserForm.js | 63 +-
src/Components/ResourceCardFunction.js | 93 ++-
src/Components/ResourceCardOptions.js | 48 +-
src/Components/ResourceList.js | 21 +-
.../ResourcePageComponents/CommentForm.js | 270 ++++--
.../ResourcePageComponents/CommentsArea.js | 160 ++--
.../ResourcePageComponents/Footer.js | 109 ++-
.../ResourcePageComponents/Sobre.js | 160 ++--
.../ResourcePageComponents/TextoObjeto.js | 24 +-
.../ResourcePageComponents/VideoPlayer.js | 4 +-
src/Components/SearchBar.js | 352 ++++----
.../SearchEPCompCurriculum.js | 83 +-
.../SearchExpansionPanel/SearchEPIdiomas.js | 89 +-
.../SearchExpansionPanel/SearchEPTiposRec.js | 89 +-
.../SearchExpansionPanel.js | 403 +++++----
.../SearchExpansionPanel/SesrchEPEtapasEns.js | 89 +-
.../CollectionTemplate.js | 214 ++---
src/Components/SearchPageComponents/Error.js | 25 +-
.../SearchPageComponents/FilterSummary.js | 262 +++---
.../SearchPageComponents/HeaderFilters.js | 262 +++---
.../SearchPageComponents/ResourceTemplate.js | 214 ++---
.../SearchPageComponents/UserTemplate.js | 152 ++--
src/Components/SearchSectionFunction.js | 119 +--
src/Components/ShareModal.js | 37 +-
src/Components/SignUpContainerFunction.js | 213 ++---
src/Components/SignUpModal.js | 23 +-
src/Components/StatsBarFunction.js | 13 +-
src/Components/Stepper.js | 101 ++-
src/Components/TabPanels/Breadcrumbs.js | 22 +-
.../TabPanels/PanelComponents/ButtonsArea.js | 71 +-
.../TabPanels/PanelComponents/NoContent.js | 15 +-
.../TabPanels/PanelComponents/PanelTitle.js | 10 +-
.../PanelComponents/TemplateColecao.js | 17 +-
.../PanelComponents/TemplateCuradoria.js | 12 +-
.../PanelComponents/TemplateRecurso.js | 12 +-
.../TabPanels/PanelComponents/TemplateRede.js | 14 +-
.../PublicUserPageTabs/TabColecoes.js | 181 ++--
.../TabPanels/PublicUserPageTabs/TabInicio.js | 6 +-
.../PublicUserPageTabs/TabRecursos.js | 5 +-
.../TabPanels/PublicUserPageTabs/TabRede.js | 286 +++----
.../PublicUserPageTabs/UserDescription.js | 23 +-
src/Components/TabPanels/StyledComponents.js | 90 +-
.../UserPageTabs/ContainerRedeVazia.js | 45 +-
.../UserPageTabs/ModalExcluirConta.js | 40 +-
.../TabPanels/UserPageTabs/PanelAtividades.js | 224 ++---
.../TabPanels/UserPageTabs/PanelColecoes.js | 73 +-
.../TabPanels/UserPageTabs/PanelCuradoria.js | 3 +-
.../UserPageTabs/PanelEditarPerfil.js | 36 +-
.../TabPanels/UserPageTabs/PanelFavoritos.js | 4 +-
.../UserPageTabs/PanelGerenciarConta.js | 261 +++---
.../UserPageTabs/PanelMeusRecursos.js | 11 +-
.../TabPanels/UserPageTabs/PanelRede.js | 6 +-
.../PanelSolicitarContaProfessor.js | 81 +-
src/Components/Table.js | 124 ++-
src/Components/TermsPageContent.js | 179 ++--
src/Components/TopicCard.js | 21 +-
src/Components/TopicFooter.js | 5 +-
src/Components/TopicList.js | 14 +-
.../UploadPageComponents/ButtonsDiv.js | 15 +-
.../UploadPageComponents/ChooseLinkSection.js | 160 ++--
.../UploadPageComponents/Forms/Autor.js | 81 +-
.../UploadPageComponents/Forms/Idioma.js | 95 ++-
.../UploadPageComponents/Forms/Keywords.js | 78 +-
.../UploadPageComponents/Forms/NewTitle.js | 63 +-
.../Forms/SobreORecurso.js | 26 +-
.../Forms/TipoDeRecurso.js | 22 +-
.../UploadPageComponents/GetIconByName.js | 3 +-
.../UploadPageComponents/ModalCancelar.js | 24 +-
.../UploadPageComponents/PartOne.js | 104 +--
.../UploadPageComponents/PartThree.js | 599 ++++++-------
.../UploadPageComponents/PartTwo.js | 200 +++--
.../CustomCircularProgress.js | 9 +-
.../PartTwoComponents/DisplayThumbnail.js | 48 +-
.../PartTwoComponents/DragAndDropThumbnail.js | 47 +-
.../PartTwoComponents/EditThumbnail.js | 31 +-
.../PartTwoComponents/EducationalStage.js | 40 +-
.../PartTwoComponents/Licenca.js | 68 +-
.../PartTwoComponents/SubjectsAndThemes.js | 139 +--
.../UploadPageComponents/Stepper.js | 184 +---
.../UploadPageComponents/StyledComponents.js | 292 ++++---
.../UploadPageComponents/UploadFileWrapper.js | 124 +--
src/Components/UserPageComponents/Avatar.js | 1 +
src/Components/UserPageComponents/Cover.js | 3 +-
.../UserPageComponents/EditProfileButton.js | 68 +-
.../UserPageComponents/SubmitterStatus.js | 38 +-
src/Components/UserPageComponents/UserInfo.js | 14 +-
src/Components/carousel.css | 16 +-
src/Pages/AboutPage.js | 104 ++-
src/Pages/ChangePasswordPage.js | 36 +-
src/Pages/CollectionPage.js | 98 ++-
src/Pages/Contact.js | 281 ++++---
src/Pages/EditLearningObjectPage.js | 60 +-
src/Pages/EditProfilePage.js | 67 +-
src/Pages/FormationMaterialPage.js | 35 +-
src/Pages/HelpCenter.js | 66 +-
src/Pages/MaterialPage.js | 144 ++--
src/Pages/PageNotFound.js | 35 +-
src/Pages/PageProfessor.js | 177 ++--
src/Pages/PasswordRecoveryPage.js | 55 +-
src/Pages/PublicUserPage.js | 679 ++++++++-------
src/Pages/PublicationPermissionsPage.js | 327 ++++----
src/Pages/ResourcePage.js | 254 +++---
src/Pages/Search.js | 789 ++++++++----------
src/Pages/SummarizedUserTerms.js | 399 +++++++++
src/Pages/TabsHelp/TabManageAc.js | 423 +++++-----
src/Pages/TabsHelp/TabNetPart.js | 80 +-
src/Pages/TabsHelp/TabPlataformaMEC.js | 313 +++----
src/Pages/TabsHelp/TabResourseFind.js | 423 +++++-----
src/Pages/TabsHelp/TabResoursePub.js | 79 +-
src/Pages/TermsPage.js | 169 ++--
src/Pages/UploadPage.js | 139 +--
src/Pages/UserPage.js | 400 +++++----
src/Pages/UserTerms.js | 438 +++++-----
src/Store.js | 296 +++----
src/img/OffContrastIcon.png | Bin 0 -> 17242 bytes
src/img/OnContrastIcon.png | Bin 0 -> 17257 bytes
src/img/termos/handshake.svg | 8 +-
243 files changed, 12478 insertions(+), 12136 deletions(-)
rename src/Components/{VerticalRuler.js => Accessibility/ContrastBar.css} (52%)
create mode 100644 src/Components/Accessibility/ContrastBar.js
delete mode 100644 src/Components/Carousel.js
delete mode 100644 src/Components/Modal.js
delete mode 100644 src/Components/PurpleButton.js
create mode 100644 src/Pages/SummarizedUserTerms.js
create mode 100644 src/img/OffContrastIcon.png
create mode 100644 src/img/OnContrastIcon.png
diff --git a/src/Admin/Components/Components/DataCards/ActivityCard.js b/src/Admin/Components/Components/DataCards/ActivityCard.js
index c93bb1fc..3a0e6985 100644
--- a/src/Admin/Components/Components/DataCards/ActivityCard.js
+++ b/src/Admin/Components/Components/DataCards/ActivityCard.js
@@ -72,7 +72,6 @@ const ActivityCard = () => {
} else if (!isLoaded) {
return <LoadingSpinner text="Carregando..." />
} else {
- console.log(item)
const DATA = [
{
subTitle: "ID",
diff --git a/src/Admin/Components/Components/DataCards/CommunityQuestionCard.js b/src/Admin/Components/Components/DataCards/CommunityQuestionCard.js
index 45208abb..e0d1cb4e 100644
--- a/src/Admin/Components/Components/DataCards/CommunityQuestionCard.js
+++ b/src/Admin/Components/Components/DataCards/CommunityQuestionCard.js
@@ -28,9 +28,7 @@ import { useStyles, StyledCard } from "../../Styles/DataCard";
import EmailRoundedIcon from '@material-ui/icons/EmailRounded';
//imports from local files
import { GetAData } from "../../../Filters";
-import { Store } from '../../../../Store';
import { Link } from 'react-router-dom'
-import Unauthorized from "../Unauthorized";
import { getRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import LoadingSpinner from '../../../../Components/LoadingSpinner';
import StyledButton from '../Button';
@@ -54,22 +52,6 @@ const CommunityQuestions = () => {
.toString();
};
- const CheckUserPermission = () => {
- let canUserEdit = false;
-
- if (state.userIsLoggedIn) {
- const roles = [...state.currentUser.roles];
- for (let i = 0; i < roles.length; i++)
- if (roles[i].name === 'admin' || roles[i].name === 'editor')
- canUserEdit = true;
- }
- else {
- canUserEdit = false;
- }
-
- return canUserEdit;
- }
-
useEffect(() => {
const urlParams = new URLSearchParams(window.location.search);
const query = urlParams.get("question");
@@ -91,7 +73,7 @@ const CommunityQuestions = () => {
return <div>Houve um erro</div>;
} else if (!isLoaded) {
return <LoadingSpinner text="Carregando..." />
- } else if (CheckUserPermission()) {
+ } else {
const DATA = [
{
subTitle: "ID",
@@ -159,7 +141,7 @@ const CommunityQuestions = () => {
</CardContent>
</StyledCard>
);
- } else return <Unauthorized />
+ }
};
export default CommunityQuestions;
diff --git a/src/Admin/Components/Components/DataCards/EducationalObjectsCard.js b/src/Admin/Components/Components/DataCards/EducationalObjectsCard.js
index bda7c746..ec634293 100644
--- a/src/Admin/Components/Components/DataCards/EducationalObjectsCard.js
+++ b/src/Admin/Components/Components/DataCards/EducationalObjectsCard.js
@@ -120,7 +120,6 @@ const CommunityQuestions = () => {
} else if (!isLoaded) {
return <LoadingSpinner text="Carregando..." />;
} else {
- console.log(item);
const DATA = [
{
subTitle: "ID",
diff --git a/src/Admin/Components/Components/Inputs/CreateInstitution.js b/src/Admin/Components/Components/Inputs/CreateInstitution.js
index 742bdbe9..e3979c65 100644
--- a/src/Admin/Components/Components/Inputs/CreateInstitution.js
+++ b/src/Admin/Components/Components/Inputs/CreateInstitution.js
@@ -26,7 +26,6 @@ import AddRoundedIcon from '@material-ui/icons/AddRounded';
import ListRoundedIcon from '@material-ui/icons/ListRounded';
//imports local files
import SnackBar from '../../../../Components/SnackbarComponent';
-import { Store } from '../../../../Store';
import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { StyledCard } from "../../../Components/Styles/DataCard";
import { Store } from 'Store'
@@ -36,7 +35,6 @@ import StyledButton from '../Button';
import { Link } from 'react-router-dom';
const CreateInstitution = (props) => {
- const { state } = useContext(Store);
const { state } = useContext(Store);
@@ -105,23 +103,6 @@ const CreateInstitution = (props) => {
})
}
- const CheckUserPermission = () => {
- let canUserEdit = false;
-
- if (state.userIsLoggedIn) {
- const roles = [...state.currentUser.roles];
- for (let i = 0; i < roles.length; i++)
- if (roles[i].name === 'admin' || roles[i].name === 'editor')
- canUserEdit = true;
- }
- else {
- canUserEdit = false;
- }
-
- return canUserEdit;
- }
-
-
//Handle submit
async function onSubmit() {
setIsLoading(true)
@@ -239,8 +220,9 @@ const CreateInstitution = (props) => {
/>
</Link>
</Grid>
+ </Grid>
- <div style={{ height: '1em' }}></div>
+ <div style={{ height: '1em' }}></div>
<form style={{ display: 'flex', flexDirection: 'column' }}>
{fields.map((field, index) => (
diff --git a/src/Admin/Components/Components/Inputs/CreateLanguage.js b/src/Admin/Components/Components/Inputs/CreateLanguage.js
index c76c3ff0..5187839e 100644
--- a/src/Admin/Components/Components/Inputs/CreateLanguage.js
+++ b/src/Admin/Components/Components/Inputs/CreateLanguage.js
@@ -26,7 +26,6 @@ import AddRoundedIcon from '@material-ui/icons/AddRounded';
import ListRoundedIcon from '@material-ui/icons/ListRounded';
//imports local files
import SnackBar from '../../../../Components/SnackbarComponent';
-import { Store } from '../../../../Store';
import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { StyledCard } from "../../../Components/Styles/DataCard";
import { Store } from 'Store'
@@ -34,10 +33,8 @@ import FormInput from "Components/FormInput.js"
import StyledButton from '../Button';
//router
import { Link } from 'react-router-dom';
-import Unauthorized from '../Unauthorized';
const CreateLanguage = (props) => {
- const { state } = useContext(Store);
const { state } = useContext(Store);
@@ -95,22 +92,6 @@ const CreateLanguage = (props) => {
})
}
- const CheckUserPermission = () => {
- let canUserEdit = false;
-
- if (state.userIsLoggedIn) {
- const roles = [...state.currentUser.roles];
- for (let i = 0; i < roles.length; i++)
- if (roles[i].name === 'admin' || roles[i].name === 'editor')
- canUserEdit = true;
- }
- else {
- canUserEdit = false;
- }
-
- return canUserEdit;
- }
-
//Handle submit
async function onSubmit() {
setIsLoading(true)
diff --git a/src/Admin/Components/Components/Inputs/CreateQuestion.js b/src/Admin/Components/Components/Inputs/CreateQuestion.js
index 16652823..0c4e0369 100644
--- a/src/Admin/Components/Components/Inputs/CreateQuestion.js
+++ b/src/Admin/Components/Components/Inputs/CreateQuestion.js
@@ -26,9 +26,7 @@ import AddRoundedIcon from '@material-ui/icons/AddRounded';
import MenuItem from "@material-ui/core/MenuItem";
import ListRoundedIcon from '@material-ui/icons/ListRounded';
//imports local files
-import { Store } from '../../../../Store';
import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
-import Unauthorized from '../Unauthorized';
import SnackBar from '../../../../Components/SnackbarComponent';
import { StyledCard } from "../../../Components/Styles/DataCard";
import { Store } from 'Store'
@@ -38,7 +36,6 @@ import StyledButton from '../Button';
import { Link } from 'react-router-dom';
const CreateQuestion = (props) => {
- const { state } = useContext(Store);
const { state } = useContext(Store);
@@ -85,23 +82,6 @@ const CreateQuestion = (props) => {
})
}
- const CheckUserPermission = () => {
- let canUserEdit = false;
-
- if (state.userIsLoggedIn) {
- const roles = [...state.currentUser.roles];
- for (let i = 0; i < roles.length; i++)
- if (roles[i].name === 'admin')
- canUserEdit = true;
- }
- else {
- canUserEdit = false;
- }
-
- return canUserEdit;
- }
-
-
//Handle submit
async function onSubmit() {
if (!isEmpty(description)) {
@@ -145,7 +125,6 @@ const CreateQuestion = (props) => {
const handleChange = (e) => {
const value = e.target.value;
setStatus(value);
- console.log(status)
};
// Fields
diff --git a/src/Admin/Components/Components/Inputs/CreateRating.js b/src/Admin/Components/Components/Inputs/CreateRating.js
index 63568c9b..41384ba1 100644
--- a/src/Admin/Components/Components/Inputs/CreateRating.js
+++ b/src/Admin/Components/Components/Inputs/CreateRating.js
@@ -25,7 +25,6 @@ import CircularProgress from '@material-ui/core/CircularProgress';
import AddRoundedIcon from '@material-ui/icons/AddRounded';
import ListRoundedIcon from '@material-ui/icons/ListRounded';
//imports local files
-import { Store } from '../../../../Store';
import SnackBar from '../../../../Components/SnackbarComponent';
import { StyledCard } from "../../../Components/Styles/DataCard";
import { Store } from 'Store'
@@ -35,10 +34,8 @@ import StyledButton from '../Button';
import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
//router
import {Link} from 'react-router-dom';
-import Unauthorized from '../Unauthorized';
const CreateRating = (props) => {
- const { state } = useContext(Store);
const { state } = useContext(Store);
@@ -101,22 +98,6 @@ const CreateRating = (props) => {
})
}
- const CheckUserPermission = () => {
- let canUserEdit = false;
-
- if (state.userIsLoggedIn) {
- const roles = [...state.currentUser.roles];
- for (let i = 0; i < roles.length; i++)
- if (roles[i].name === 'admin' || roles[i].name === 'editor')
- canUserEdit = true;
- }
- else {
- canUserEdit = false;
- }
-
- return canUserEdit;
- }
-
//Handle submit
async function onSubmit() {
setIsLoading(true)
diff --git a/src/Admin/Components/Components/Inputs/CreateRole.js b/src/Admin/Components/Components/Inputs/CreateRole.js
index 7277aa5a..9018399b 100644
--- a/src/Admin/Components/Components/Inputs/CreateRole.js
+++ b/src/Admin/Components/Components/Inputs/CreateRole.js
@@ -26,7 +26,6 @@ import AddRoundedIcon from '@material-ui/icons/AddRounded';
import ListRoundedIcon from '@material-ui/icons/ListRounded';
//imports local files
import SnackBar from '../../../../Components/SnackbarComponent';
-import { Store } from '../../../../Store';
import { postRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
import { StyledCard } from "../../../Components/Styles/DataCard";
import { Store } from 'Store'
@@ -34,10 +33,8 @@ import FormInput from "Components/FormInput.js"
import StyledButton from '../Button';
//router
import { Link } from 'react-router-dom';
-import Unauthorized from '../Unauthorized';
const CreateRole = (props) => {
- const { state } = useContext(Store);
const { state } = useContext(Store);
@@ -95,23 +92,6 @@ const CreateRole = (props) => {
})
}
- const CheckUserPermission = () => {
- let canUserEdit = false;
-
- if (state.userIsLoggedIn) {
- const roles = [...state.currentUser.roles];
- for (let i = 0; i < roles.length; i++)
- if (roles[i].name === 'admin' || roles[i].name === 'editor')
- canUserEdit = true;
- }
- else {
- canUserEdit = false;
- }
-
- return canUserEdit;
- }
-
-
//Handle submit
async function onSubmit() {
setIsLoading(true)
diff --git a/src/Admin/Components/Components/Inputs/EditCollection.js b/src/Admin/Components/Components/Inputs/EditCollection.js
index 0bb6fcaa..3cba5e36 100644
--- a/src/Admin/Components/Components/Inputs/EditCollection.js
+++ b/src/Admin/Components/Components/Inputs/EditCollection.js
@@ -27,9 +27,7 @@ import SaveIcon from '@material-ui/icons/Save';
import MenuItem from "@material-ui/core/MenuItem";
//imports local files
import SnackBar from '../../../../Components/SnackbarComponent';
-import Unauthorized from '../Unauthorized';
import { getRequest, putRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
-import { Store } from '../../../../Store';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
import { EditFilter, GetAData } from '../../../Filters';
import { StyledCard } from "../../../Components/Styles/DataCard";
@@ -112,7 +110,6 @@ const EditCollection = () => {
const handleChange = (e) => {
const value = e.target.value;
setPrivacy(value);
- console.log(privacy)
};
// Handle snack infos
@@ -125,22 +122,6 @@ const EditCollection = () => {
})
}
- const CheckUserPermission = () => {
- let canUserEdit = false;
-
- if (state.userIsLoggedIn) {
- const roles = [...state.currentUser.roles];
- for (let i = 0; i < roles.length; i++)
- if (roles[i].name === 'admin' || roles[i].name === 'editor')
- canUserEdit = true;
- }
- else {
- canUserEdit = false;
- }
-
- return canUserEdit;
- }
-
const onSubmit = async () => {
setIsLoading(true)
const api = EditFilter('collections', id)
@@ -191,7 +172,7 @@ const EditCollection = () => {
return <div> Houve um erro... </div>
} else if (!isLoaded) {
return <LoadingSpinner text="Carregando..." />
- } else if (CheckUserPermission()) {
+ } else {
return (
<StyledCard contrast={state.contrast}>
<SnackBar
@@ -287,7 +268,7 @@ const EditCollection = () => {
</CardAction>
</StyledCard>
)
- } else return <Unauthorized />
+ }
}
export default EditCollection;
\ No newline at end of file
diff --git a/src/Admin/Components/Components/Inputs/EditEducationalObect.js b/src/Admin/Components/Components/Inputs/EditEducationalObect.js
index 67ecf181..3c4aead4 100644
--- a/src/Admin/Components/Components/Inputs/EditEducationalObect.js
+++ b/src/Admin/Components/Components/Inputs/EditEducationalObect.js
@@ -35,8 +35,6 @@ import Box from "@material-ui/core/Box";
import SaveIcon from "@material-ui/icons/Save";
//imports local files
import SnackBar from "../../../../Components/SnackbarComponent";
-import { Store } from "../../../../Store";
-import Unauthorized from "../Unauthorized";
import LoadingSpinner from "../../../../Components/LoadingSpinner";
import {
fetchAllRequest,
@@ -255,7 +253,6 @@ const EditEducationalObject = () => {
"language_ids": languagesID,
},
};
- console.log(text)
putRequest(
api,
body,
@@ -375,21 +372,6 @@ const EditEducationalObject = () => {
},
];
- const CheckUserPermission = () => {
- let canUserEdit = false;
-
- if (state.userIsLoggedIn) {
- const roles = [...state.currentUser.roles];
- for (let i = 0; i < roles.length; i++)
- if (roles[i].name === "admin" || roles[i].name === "editor")
- canUserEdit = true;
- } else {
- canUserEdit = false;
- }
-
- return canUserEdit;
- };
-
useEffect(() => {
const urls = [
`/learning_objects/${id}`,
@@ -439,7 +421,7 @@ const EditEducationalObject = () => {
return <div> Houve um erro... </div>;
} else if (!isLoaded) {
return <LoadingSpinner text="Carregando..." />;
- } else if (CheckUserPermission()) {
+ } else {
return (
<StyledCard contrast={state.contrast} variant="outlined">
<SnackBar
@@ -625,7 +607,7 @@ const EditEducationalObject = () => {
</CardAction>
</StyledCard>
);
- } else return <Unauthorized />;
+ }
};
export default EditEducationalObject;
diff --git a/src/Admin/Components/Components/Inputs/EditLanguage.js b/src/Admin/Components/Components/Inputs/EditLanguage.js
index c0060cc8..cbb3204f 100644
--- a/src/Admin/Components/Components/Inputs/EditLanguage.js
+++ b/src/Admin/Components/Components/Inputs/EditLanguage.js
@@ -26,7 +26,6 @@ import ListRoundedIcon from '@material-ui/icons/ListRounded';
import SaveIcon from '@material-ui/icons/Save';
//imports local files
import SnackBar from '../../../../Components/SnackbarComponent';
-import { Store } from '../../../../Store';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
import { StyledCard } from "../../../Components/Styles/DataCard";
import { Store } from 'Store'
@@ -38,7 +37,6 @@ import { EditFilter, GetAData, DeleteFilter } from '../../../Filters';
import DeleteRoundedIcon from "@material-ui/icons/DeleteRounded";
//routers
import { Link, useHistory } from 'react-router-dom';
-import Unauthorized from '../Unauthorized';
const EditLanguage = () => {
@@ -152,23 +150,6 @@ const EditLanguage = () => {
})
}
- const CheckUserPermission = () => {
- let canUserEdit = false;
-
- if (state.userIsLoggedIn) {
- const roles = [...state.currentUser.roles];
- for (let i = 0; i < roles.length; i++)
- if (roles[i].name === 'admin' || roles[i].name === 'editor')
- canUserEdit = true;
- }
- else {
- canUserEdit = false;
- }
-
- return canUserEdit;
- }
-
-
const onSubmit = async () => {
setIsLoading(true)
const api = EditFilter('languages', id)
@@ -237,7 +218,7 @@ const EditLanguage = () => {
return <div> Houve um erro... </div>
} else if (!isLoaded) {
return <LoadingSpinner text="Carregando..." />
- } else if (CheckUserPermission()) {
+ } else {
return (
<StyledCard contrast={state.contrast}>
<SnackBar
@@ -313,7 +294,7 @@ const EditLanguage = () => {
</CardAction>
</StyledCard>
)
- } else return <Unauthorized />
+ }
}
export default EditLanguage;
\ No newline at end of file
diff --git a/src/Admin/Components/Components/Inputs/EditRating.js b/src/Admin/Components/Components/Inputs/EditRating.js
index 398ca2fa..9133c7a5 100644
--- a/src/Admin/Components/Components/Inputs/EditRating.js
+++ b/src/Admin/Components/Components/Inputs/EditRating.js
@@ -26,7 +26,6 @@ import ListRoundedIcon from '@material-ui/icons/ListRounded';
import SaveIcon from '@material-ui/icons/Save';
//imports local files
import SnackBar from '../../../../Components/SnackbarComponent';
-import { Store } from '../../../../Store';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
import { StyledCard } from "../../../Components/Styles/DataCard";
import { Store } from 'Store'
@@ -37,7 +36,6 @@ import { getRequest, putRequest } from '../../../../Components/HelperFunctions/g
import { EditFilter, GetAData } from '../../../Filters';
//routers
import { Link } from 'react-router-dom';
-import Unauthorized from '../Unauthorized';
const EditRating = () => {
@@ -136,23 +134,6 @@ const EditRating = () => {
})
}
- const CheckUserPermission = () => {
- let canUserEdit = false;
-
- if (state.userIsLoggedIn) {
- const roles = [...state.currentUser.roles];
- for (let i = 0; i < roles.length; i++)
- if (roles[i].name === 'admin' || roles[i].name === 'editor')
- canUserEdit = true;
- }
- else {
- canUserEdit = false;
- }
-
- return canUserEdit;
- }
-
-
const onSubmit = async () => {
setIsLoading(true)
if (!isEmpty(name) && !isEmpty(description)) {
@@ -216,7 +197,7 @@ const EditRating = () => {
return <div> Houve um erro... </div>
} else if (!isLoaded) {
return <LoadingSpinner text="Carregando..." />
- } else if (CheckUserPermission()) {
+ } else {
return (
<StyledCard contrast={state.contrast}>
<SnackBar
@@ -287,7 +268,7 @@ const EditRating = () => {
</CardAction>
</StyledCard>
)
- } else return <Unauthorized />
+ }
}
export default EditRating;
\ No newline at end of file
diff --git a/src/Admin/Components/Components/Inputs/EditRoles.js b/src/Admin/Components/Components/Inputs/EditRoles.js
index b5e1fa8b..d7ceb5bd 100644
--- a/src/Admin/Components/Components/Inputs/EditRoles.js
+++ b/src/Admin/Components/Components/Inputs/EditRoles.js
@@ -28,7 +28,6 @@ import ButtonGroup from "@material-ui/core/ButtonGroup";
import DeleteRoundedIcon from "@material-ui/icons/DeleteRounded";
//imports local files
import SnackBar from '../../../../Components/SnackbarComponent';
-import { Store } from '../../../../Store';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
import { StyledCard } from "../../../Components/Styles/DataCard";
import { Store } from 'Store'
@@ -39,7 +38,6 @@ import { getRequest, putRequest, deleteRequest } from '../../../../Components/He
import { EditFilter, GetAData, DeleteFilter } from '../../../Filters';
//routers
import { Link, useHistory } from 'react-router-dom';
-import Unauthorized from '../Unauthorized';
const EditLanguage = () => {
@@ -130,23 +128,6 @@ const EditLanguage = () => {
},
]
- const CheckUserPermission = () => {
- let canUserEdit = false;
-
- if (state.userIsLoggedIn) {
- const roles = [...state.currentUser.roles];
- for (let i = 0; i < roles.length; i++)
- if (roles[i].name === 'admin' || roles[i].name === 'editor')
- canUserEdit = true;
- }
- else {
- canUserEdit = false;
- }
-
- return canUserEdit;
- }
-
-
const onSubmit = async () => {
setIsLoading(true)
const api = EditFilter('roles', id)
@@ -231,7 +212,7 @@ const EditLanguage = () => {
return <div> Houve um erro... </div>
} else if (!isLoaded) {
return <LoadingSpinner text="Carregando..." />
- } else if (CheckUserPermission()) {
+ } else {
return (
<StyledCard contrast={state.contrast}>
<SnackBar
@@ -307,7 +288,7 @@ const EditLanguage = () => {
</CardAction>
</StyledCard>
)
- } else return <Unauthorized />
+ }
}
export default EditLanguage;
\ No newline at end of file
diff --git a/src/Admin/Components/Components/Inputs/EditUser.js b/src/Admin/Components/Components/Inputs/EditUser.js
index 32eb6e1a..fd84adb8 100644
--- a/src/Admin/Components/Components/Inputs/EditUser.js
+++ b/src/Admin/Components/Components/Inputs/EditUser.js
@@ -33,7 +33,6 @@ import MenuItem from '@material-ui/core/MenuItem';
//imports local files
import SnackBar from '../../../../Components/SnackbarComponent';
-import { Store } from '../../../../Store';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
import { StyledCard } from "../../../Components/Styles/DataCard";
import { Store } from 'Store'
@@ -45,7 +44,6 @@ import { getRequest, putRequest, deleteRequest, postRequest } from '../../../../
import { EditFilter, GetAData } from '../../../Filters';
//routers
import { Link, useHistory } from 'react-router-dom';
-import Unauthorized from '../Unauthorized';
const useStyles = makeStyles((theme) => ({
root: {
@@ -67,7 +65,7 @@ const EditUser = () => {
const classes = useStyles();
let history = useHistory();
- const { state } = useContext(Store)
+
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get("id");
@@ -269,22 +267,6 @@ const EditUser = () => {
})
}
- const CheckUserPermission = () => {
- let canUserEdit = false;
-
- if (state.userIsLoggedIn) {
- const roles = [...state.currentUser.roles];
- for (let i = 0; i < roles.length; i++)
- if (roles[i].name === 'admin' || roles[i].name === 'editor')
- canUserEdit = true;
- }
- else {
- canUserEdit = false;
- }
-
- return canUserEdit;
- }
-
const handleDelete = (chipToDelete) => () => {
const currRolesList = [...rolesList];
currRolesList.push({
@@ -489,7 +471,7 @@ const EditUser = () => {
return <div> Houve um erro... </div>
} else if (!isLoaded) {
return <LoadingSpinner text="Carregando..." />
- } else if (CheckUserPermission()) {
+ } else {
return (
<StyledCard contrast={state.contrast}>
<SnackBar
@@ -619,7 +601,7 @@ const EditUser = () => {
</CardAction>
</StyledCard>
)
- } else return <Unauthorized />
+ }
}
export default EditUser;
diff --git a/src/Admin/Components/Components/Inputs/IntitutionsInputs.js b/src/Admin/Components/Components/Inputs/IntitutionsInputs.js
index 00652ebc..eacbd7f0 100644
--- a/src/Admin/Components/Components/Inputs/IntitutionsInputs.js
+++ b/src/Admin/Components/Components/Inputs/IntitutionsInputs.js
@@ -25,9 +25,7 @@ import Typography from "@material-ui/core/Typography";
import ListRoundedIcon from "@material-ui/icons/ListRounded";
import Grid from "@material-ui/core/Grid";
//imports local files
-import Unauthorized from '../Unauthorized';
import SnackBar from '../../../../Components/SnackbarComponent';
-import { Store } from '../../../../Store';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
import { StyledCard } from "../../../Components/Styles/DataCard";
import { Store } from 'Store'
@@ -113,22 +111,6 @@ const EditInstitution = () => {
})
}
- const CheckUserPermission = () => {
- let canUserEdit = false;
-
- if (state.userIsLoggedIn) {
- const roles = [...state.currentUser.roles];
- for (let i = 0; i < roles.length; i++)
- if (roles[i].name === 'admin' || roles[i].name === 'editor')
- canUserEdit = true;
- }
- else {
- canUserEdit = false;
- }
-
- return canUserEdit;
- }
-
//Handle submit
async function onSubmit() {
setIsLoading(true)
@@ -238,7 +220,7 @@ const EditInstitution = () => {
return <div> Erro... </div>
} else if (!isLoaded) {
return <LoadingSpinner text="Carregando..." />
- } else if (CheckUserPermission()) {
+ } else {
return (
<StyledCard contrast={state.contrast}>
<SnackBar
@@ -315,8 +297,6 @@ const EditInstitution = () => {
</CardContent>
</StyledCard>
);
- } else {
- return <Unauthorized />
}
}
diff --git a/src/Admin/Components/Components/Inputs/NoteVarInputs.js b/src/Admin/Components/Components/Inputs/NoteVarInputs.js
index 354446fd..69ee311e 100644
--- a/src/Admin/Components/Components/Inputs/NoteVarInputs.js
+++ b/src/Admin/Components/Components/Inputs/NoteVarInputs.js
@@ -26,7 +26,6 @@ import ListRoundedIcon from "@material-ui/icons/ListRounded";
import Grid from '@material-ui/core/Grid';
//imports local files
import SnackBar from '../../../../Components/SnackbarComponent';
-import { Store } from '../../../../Store';
import LoadingSpinner from '../../../../Components/LoadingSpinner';
import { StyledCard } from "../../../Components/Styles/DataCard";
import { Store } from 'Store'
@@ -37,7 +36,6 @@ import { getRequest, putRequest } from '../../../../Components/HelperFunctions/g
import { EditFilter, GetAData } from '../../../Filters';
//Routers
import { Link } from 'react-router-dom';
-import Unauthorized from '../Unauthorized';
const NoteVarInputs = () => {
@@ -206,23 +204,6 @@ const NoteVarInputs = () => {
)
}
- const CheckUserPermission = () => {
- let canUserEdit = false;
-
- if (state.userIsLoggedIn) {
- const roles = [...state.currentUser.roles];
- for (let i = 0; i < roles.length; i++)
- if (roles[i].name === 'admin' || roles[i].name === 'editor')
- canUserEdit = true;
- }
- else {
- canUserEdit = false;
- }
-
- return canUserEdit;
- }
-
-
useEffect(() => {
getRequest(
GetAData("scores", id),
@@ -243,7 +224,7 @@ const NoteVarInputs = () => {
return <div>Houve um erro...</div>
} else if (!isLoaded) {
return <LoadingSpinner text="Carregando..." />
- } else if (CheckUserPermission()) {
+ } else {
return (
<StyledCard contrast={state.contrast}>
<SnackBar
@@ -319,7 +300,7 @@ const NoteVarInputs = () => {
</CardContent>
</StyledCard>
)
- } else return <Unauthorized />
+ }
}
export default NoteVarInputs;
\ No newline at end of file
diff --git a/src/Admin/Components/Components/Unauthorized.js b/src/Admin/Components/Components/Unauthorized.js
index ef9e9184..558f3422 100644
--- a/src/Admin/Components/Components/Unauthorized.js
+++ b/src/Admin/Components/Components/Unauthorized.js
@@ -48,17 +48,25 @@ const Unauthorized = (props) => {
</Link>
</StyledDiv>
</>
- </div>
+ </ContentDiv>
);
}
+const ContentDiv = styled('div')`
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ color: ${props => props.contrast === "" ? "#666" : "white"} !important;
+ a {
+ color: ${props => props.contrast === "" ? "" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline yellow"} !important;
+ }
+`
+
const StyledDiv = styled('div')`
width: 100%;
- margin-top: 70px;
- margin-bottom: 70px;
+ padding-top: 70px;
+ padding-bottom: 70px;
justify-content : space-evenly;
display: flex;
- color: #757575;
text-align:center;
`
diff --git a/src/App.css b/src/App.css
index c8cb4a80..d1221de1 100644
--- a/src/App.css
+++ b/src/App.css
@@ -16,3 +16,44 @@ 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/>.*/
+.ContrastBackColor {
+ background-color: black !important;
+}
+
+.BackColor {
+ background-color: white !important;
+}
+
+.ContrastText{
+ color: white !important;
+}
+
+.Text{
+ color: #666 !important;
+}
+
+.ContrastTextColor {
+ color: white !important;
+}
+
+.ContrastLinkColor {
+ color: yellow !important;
+ text-decoration: underline !important;
+ cursor: pointer;
+}
+
+.ContrastIconColor {
+ color: white !important;
+}
+
+.ContrastBorder {
+ border: 1px solid white !important;
+}
+
+.Border {
+ border: 1px solid #666 !important;
+}
+
+.MuiListNoPadding {
+ padding: 0 !important;
+}
diff --git a/src/App.js b/src/App.js
index 3e498b93..c7574a07 100644
--- a/src/App.js
+++ b/src/App.js
@@ -23,6 +23,8 @@ import { Store } from './Store'
import LoadingSpinner from './Components/LoadingSpinner';
import { BrowserRouter, Switch, Route, Redirect } from "react-router-dom";
import createBrowserHistory from 'history/createBrowserHistory'
+import './App.css';
+import ContrastBar from './Components/Accessibility/ContrastBar';
const AdminTemplate = React.lazy(() => import('./Admin/Components/Components/AdminTemplate'));
const Header = React.lazy(() => import("./Components/Header"));
@@ -32,6 +34,7 @@ const EcFooter = React.lazy(() => import("./Components/EcFooter"));
const GNUAGPLfooter = React.lazy(() => import("./Components/AGPLFooter"));
const UserPage = React.lazy(() => import("./Pages/UserPage"));
const UserTerms = React.lazy(() => import("./Pages/UserTerms"));
+const SummarizedUserTerms = React.lazy(() => import("./Pages/SummarizedUserTerms"));
const Contact = React.lazy(() => import("./Pages/Contact"));
const AboutPage = React.lazy(() => import("./Pages/AboutPage"));
const HelpCenter = React.lazy(() => import("./Pages/HelpCenter"));
@@ -98,6 +101,25 @@ const EditRole = React.lazy(() => import("./Admin/Components/Components/Inputs/E
const CreateRole = React.lazy(() => import("./Admin/Components/Components/Inputs/CreateRole"));
const BlockedUser = React.lazy(() => import("./Admin/Pages/Pages/SubPages/BlockedUsers"));
+async function supportsWebp() {
+ if (!createImageBitmap) return false;
+
+ const webpData = 'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=';
+ const blob = await fetch(webpData).then(r => r.blob());
+ return createImageBitmap(blob).then(() => true, () => false);
+}
+
+const LoadingScreen = () => (
+ <div style={{
+ position: "absolute",
+ top: "50%",
+ left: "50%",
+ transform: "translate(-50%, -50%)"
+ }}>
+ <LoadingSpinner/>
+ </div>
+);
+
export default function App() {
// eslint-disable-next-line
const { state, dispatch } = useContext(Store);
@@ -109,15 +131,7 @@ export default function App() {
siteId: 5
});
const customHistory = createBrowserHistory()
-
- async function supportsWebp() {
- if (!createImageBitmap) return false;
-
- const webpData = 'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=';
- const blob = await fetch(webpData).then(r => r.blob());
- return createImageBitmap(blob).then(() => true, () => false);
- }
-
+
async function testWebpSupport() {
if(await supportsWebp()) {
localStorage.setItem('webpSupport', 'True');
@@ -142,6 +156,10 @@ export default function App() {
testWebpSupport();
}, []);
+ useEffect(() => {
+ state.contrast === "" ? document.body.style.backgroundColor = "white" : document.body.style.backgroundColor = "black"
+ }, [ state.contrast ]);
+
useEffect(() => {
const setWindowSize = () => {
dispatch({
@@ -460,302 +478,4 @@ export default function App() {
}
</>
);
-
- return (
- // add piwik later
- // history={piwik.connectToHistory(customHistory)}
- <>
- {!awaitTest &&
- <React.Suspense fallback={<LoadingScreen/>}>
- <BrowserRouter>
- <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/AGPLFooter.js b/src/Components/AGPLFooter.js
index f4633420..7058ac74 100644
--- a/src/Components/AGPLFooter.js
+++ b/src/Components/AGPLFooter.js
@@ -29,10 +29,20 @@ const grayFooter={
paddingTop: "20px",
paddingBottom: "10px"
};
+
+const blackFooter={
+ backgroundColor: "black",
+ color: "white",
+ textAlign: "center",
+ display: "block",
+ paddingTop: "20px",
+ paddingBottom: "10px"
+};
+
class AGPLFooter extends Component{
render(){
return(
- <div style={grayFooter}>
+ <div style={this.props.contrast === '' ? grayFooter : blackFooter}>
<Container>
<Row justify="around">
<Col md={1}>
diff --git a/src/Components/AboutCarousel.js b/src/Components/AboutCarousel.js
index 204e5de6..a3c1bf7f 100644
--- a/src/Components/AboutCarousel.js
+++ b/src/Components/AboutCarousel.js
@@ -19,7 +19,7 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React from 'react';
import "react-responsive-carousel/lib/styles/carousel.min.css";
-import { Carousel } from 'react-responsive-carousel';
+import { Carousel } from "react-responsive-carousel";
import styled from 'styled-components';
import "./AboutCarousel.css"
@@ -71,56 +71,56 @@ const CarouselAbout = styled(Carousel)`
text-align: center;
display: block;
margin: auto;
- // padding-inline: 235px
+ /* padding-inline: 235px */
}
}
`
-function AboutCarousel(props) {
+function AboutCarousel({ contrast }) {
return (
<div id={"You-Can-Caroussel"}>
- <CarouselAbout showThumbs= {true}
- showStatus= {false}
- showIndicators = {false}
- interval={8000}
- transitionTime={1000}
- autoPlay
- infiniteLoop
+ <CarouselAbout showThumbs={true}
+ showStatus={false}
+ showIndicators={false}
+ interval={8000}
+ transitionTime={1000}
+ autoPlay
+ infiniteLoop
>
- <div>
- <img src={Img1} alt="Slide 1"/>
- <span>Buscar e Baixar Recursos</span>
- <p>São mais de 20 mil recursos educacionais à sua disposição. São recursos de portais parceiros do MEC e de professores que, como você, atuam na Educação Básica!</p>
+ <div className={`${contrast}BackColor`}>
+ <img src={Img1} alt="Slide 1" />
+ <span className={`${contrast}TextColor`}>Buscar e Baixar Recursos</span>
+ <p className={`${contrast}TextColor`} style={{ margin: 0, padding: 0 }}>São mais de 20 mil recursos educacionais à sua disposição. São recursos de portais parceiros do MEC e de professores que, como você, atuam na Educação Básica!</p>
</div>
- <div>
- <img src={Img2} alt="Slide 2"/>
- <span>Guardar Recursos em Coleções</span>
- <p>Guarde e organize em coleções aqueles recursos que você considera ser interessantes para elaborar a sua aula. Aproveite e indique aos colegas pelas redes sociais ou e-mail.</p>
+ <div className={`${contrast}BackColor`}>
+ <img src={Img2} alt="Slide 2" />
+ <span className={`${contrast}TextColor`}>Guardar Recursos em Coleções</span>
+ <p className={`${contrast}TextColor`} style={{ margin: 0, padding: 0 }}>Guarde e organize em coleções aqueles recursos que você considera ser interessantes para elaborar a sua aula. Aproveite e indique aos colegas pelas redes sociais ou e-mail.</p>
</div>
- <div>
- <img src={Img3} alt="Slide 3"/>
+ <div className={`${contrast}BackColor`}>
+ <img src={Img3} alt="Slide 3" />
- <span>Compartilhar suas Experiências</span>
- <p>Você pode relatar suas experiências sobre o uso de recursos no seu cotidiano escolar. Aproveite esse espaço para sugerir e conhecer novos usos para um mesmo recurso.</p>
+ <span className={`${contrast}TextColor`}>Compartilhar suas Experiências</span>
+ <p className={`${contrast}TextColor`} style={{ margin: 0, padding: 0 }}>Você pode relatar suas experiências sobre o uso de recursos no seu cotidiano escolar. Aproveite esse espaço para sugerir e conhecer novos usos para um mesmo recurso.</p>
</div>
- <div>
- <img src={Img4} alt="Slide 4"/>
+ <div className={`${contrast}BackColor`}>
+ <img src={Img4} alt="Slide 4" />
- <span>Publicar o seu Recurso</span>
- <p>Colabore e ajude a fortalecer a plataforma publicando um recurso educacional desenvolvido por você ou pelo coletivo da escola do qual faz parte. Compartilhe seu conhecimento e dê visibilidade ao seu recurso, torne-o público enriquecendo o conhecimento partilhado!</p>
+ <span className={`${contrast}TextColor`}>Publicar o seu Recurso</span>
+ <p className={`${contrast}TextColor`} style={{ margin: 0, padding: 0 }}>Colabore e ajude a fortalecer a plataforma publicando um recurso educacional desenvolvido por você ou pelo coletivo da escola do qual faz parte. Compartilhe seu conhecimento e dê visibilidade ao seu recurso, torne-o público enriquecendo o conhecimento partilhado!</p>
</div>
- <div>
- <img src={Img5} alt="Slide 5"/>
+ <div className={`${contrast}BackColor`}>
+ <img src={Img5} alt="Slide 5" />
- <span>Encontrar Materiais de Formação</span>
- <p>A plataforma disponibiliza um conjunto de materiais de formação desenvolvidos pelo Ministério da Educação com diversidade de temas e recursos educacionais.</p>
+ <span className={`${contrast}TextColor`}>Encontrar Materiais de Formação</span>
+ <p className={`${contrast}TextColor`} style={{ margin: 0, padding: 0 }}>A plataforma disponibiliza um conjunto de materiais de formação desenvolvidos pelo Ministério da Educação com diversidade de temas e recursos educacionais.</p>
</div>
diff --git a/src/Components/AboutCarouselPartner.js b/src/Components/AboutCarouselPartner.js
index ba4800d6..7c1eef5d 100644
--- a/src/Components/AboutCarouselPartner.js
+++ b/src/Components/AboutCarouselPartner.js
@@ -39,12 +39,12 @@ import { Impulsiona } from "ImportImages.js";
import { InstPeninsula } from "ImportImages.js";
import { Telefonica } from "ImportImages.js";
-function AboutCarouselPartner(props) {
+function AboutCarouselPartner() {
const items = [
<a href="http://portaldoprofessor.mec.gov.br/index.html" rel="noreferrer" target="_blank">
- <img src={LogoPortalDoProfessor} alt="LogoPortalDoProfessor"/>
+ <img src={LogoPortalDoProfessor} alt="LogoPortalDoProfessor" />
</a>,
<a href="http://objetoseducacionais2.mec.gov.br/" rel="noreferrer" target="_blank">
<img src={LogoBioe} alt="LogoBioe" />
@@ -55,8 +55,8 @@ function AboutCarouselPartner(props) {
<a href="https://tvescola.org.br/" rel="noreferrer" target="_blank">
<img src={LogoTvEscola} alt="LogoTvEscola" />
</a>,
- <a href="http://www.fundacaolemann.org.br/" rel="noreferrer" target="_blank">
- <img style={{align: "middle"}} src={FundacaoLemann} alt="FundacaoLemann" />
+ <a href="http://www.fundacaolemann.org.br/" rel="noreferrer" target="_blank">
+ <img style={{ align: "middle" }} src={FundacaoLemann} alt="FundacaoLemann" />
</a>,
<a href="http://new.safernet.org.br/" rel="noreferrer" target="_blank">
<img src={Safer} alt="Safer" />
@@ -71,7 +71,7 @@ function AboutCarouselPartner(props) {
<img src={Educagital} alt="Educagital" />
</a>,
<a href="http://www.aefbrasil.org.br" rel="noreferrer" target="_blank">
- <img style={{filter: "grayscale(1)"}} src={EnefAef} alt="EnefAef" />
+ <img style={{ filter: "grayscale(1)" }} src={EnefAef} alt="EnefAef" />
</a>,
<a href="https://impa.br/" rel="noreferrer" target="_blank">
<img src={Impa} alt="Impa" />
@@ -89,12 +89,12 @@ function AboutCarouselPartner(props) {
<img src={Telefonica} alt="Telefonica" />
</a>
]
- const partnerPerPage = (()=> {
+ const partnerPerPage = (() => {
var pageWidth = window.innerWidth
- if (pageWidth >= 1200){
+ if (pageWidth >= 1200) {
return 3
}
- else{
+ else {
return 1
}
})
@@ -106,34 +106,35 @@ function AboutCarouselPartner(props) {
return (
<div id="Partner-Caroussel">
- <Carousel showThumbs= {false}
- showStatus= {false}
- showIndicators = {true}
- interval={4500}
- transitionTime={1000}
- autoPlay
- infiniteLoop
+ <Carousel
+ showThumbs={false}
+ showStatus={false}
+ showIndicators={true}
+ interval={4500}
+ transitionTime={1000}
+ autoPlay
+ infiniteLoop
- >
- {
- rows.map((row, index) => (
- <div key={(index+1)} style={{display:'inline-flex', paddingTop:100}}>
- {
- row.map((partner, index2) => (
- <div
- key={index + (index2*10)}
- style={{marginLeft:10, display: 'flex', maxWidth:300}}
- >
- {
- partner
- }
- </div>
- ))
- }
- </div>
- ))
- }
- </Carousel>
+ >
+ {
+ rows.map((row, index) => (
+ <div key={(index + 1)} style={{ display: 'inline-flex', paddingTop: 100 }}>
+ {
+ row.map((partner, index2) => (
+ <div
+ key={index + (index2 * 10)}
+ style={{ marginLeft: 10, display: 'flex', maxWidth: 300 }}
+ >
+ {
+ partner
+ }
+ </div>
+ ))
+ }
+ </div>
+ ))
+ }
+ </Carousel>
</div>
);
diff --git a/src/Components/VerticalRuler.js b/src/Components/Accessibility/ContrastBar.css
similarity index 52%
rename from src/Components/VerticalRuler.js
rename to src/Components/Accessibility/ContrastBar.css
index a84dc138..ce199caa 100644
--- a/src/Components/VerticalRuler.js
+++ b/src/Components/Accessibility/ContrastBar.css
@@ -16,16 +16,50 @@ 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';
+.Constrasticon {
+ width: 1em;
+ height: 1em;
+ vertical-align: middle;
+}
+/*
+.contrastButton{
+ border: none;
+ padding: 0;
+ background: none;
+ background-color: white;
+}
+.contrastButton:active {
+ border: none;
+ padding: 0;
+ background: none;
+ background-color: white;
+}
+.bar{
+ overflow: auto;
+ background-color: white;
+ width: 100%;
+ height: 1.3em;
+ border-bottom: 1px solid #666;
+}
+.Contrastbar{
+ overflow: auto;
+ background-color: black;
+ width: 100%;
+ border-bottom: 1px solid white;
+}*/
-export default function VerticalRuler(props) {
- return (
- <div
- style={{
- borderLeft: ''+props.width+'px solid '+props.color,
- height:props.height
- }}/>
- );
+.Contrasttext{
+ color: yellow;
+ text-decoration: underline;
+ cursor: pointer;
+ text-align: center;
+ vertical-align: middle;
}
+.text{
+ color: #666;
+ cursor: pointer;
+ text-align: center;
+ vertical-align: middle;
+}
\ No newline at end of file
diff --git a/src/Components/Accessibility/ContrastBar.js b/src/Components/Accessibility/ContrastBar.js
new file mode 100644
index 00000000..0596af0f
--- /dev/null
+++ b/src/Components/Accessibility/ContrastBar.js
@@ -0,0 +1,209 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terxs of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+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 } from 'react';
+import './ContrastBar.css';
+import ContrastImageOn from '../../img/OnContrastIcon.png';
+import ContrastImageOff from '../../img/OffContrastIcon.png';
+import { Store } from '../../Store';
+import Grid from "@material-ui/core/Grid"
+import { Button } from '@material-ui/core';
+import styled from 'styled-components';
+
+/**
+ * Bar allowing for the toggle of the high contrast mode on the page.
+ */
+function ContrastBar() {
+ /* eslint-disable */
+
+ // Hook to set contrast context
+ const { state, dispatch } = React.useContext(Store);
+
+ const handleScrollTo = (location) => {
+ if (location === "Pesquisa_scroll")
+ dispatch({
+ type: 'HANDLE_SEARCH_BAR',
+ opened: !state.searchOpen
+ })
+ document.getElementById(location).scrollIntoView({ behavior: 'smooth' });
+ }
+
+ useEffect(() => {
+ const testContrast = localStorage.getItem('@portalmec/contrast');
+ if (testContrast) {
+ setContrastAction(testContrast);
+ } else {
+ setContrastAction('');
+ }
+ }, []);
+
+ const setContrastAction = (newContrast) => {
+ localStorage.setItem('@portalmec/contrast', newContrast)
+ return dispatch({
+ type: 'SET_CONTRAST',
+ payload: newContrast
+ })
+ }
+
+ const setFontSizeAction = (newFontSize) => {
+ return dispatch({
+ type: 'SET_FONT_SIZE',
+ payload: newFontSize
+ })
+ }
+
+ const toggleContrast = () => {
+ var status = (state.contrast === '' ? 'Contrast' : '')
+
+ setContrastAction(status)
+ }
+ const incrementFontSize = () => {
+ document.getElementsByTagName("body")[0].style.fontSize = (parseInt(state.fontSize, 10) + 1) + "px";
+ setFontSizeAction(parseInt(state.fontSize, 10) + 1);
+ }
+ const decrementFontSize = () => {
+ document.getElementsByTagName("body")[0].style.fontSize = (parseInt(state.fontSize, 10) - 1) + "px";
+ setFontSizeAction(parseInt(state.fontSize, 10) - 1);
+ }
+ const defaultFontSize = () => {
+ setFontSizeAction(15);
+ document.getElementsByTagName("body")[0].style.fontSize = "15px";
+ }
+
+ return (
+ <React.Fragment>
+ <StyledGrid contrast={state.contrast} xs={12}>
+ {
+ window.innerWidth > 750 ?
+ (
+ <>
+ <Grid xs={8}>
+ <StyledButton style={{justifyContent: "flex-start"}}>
+ <a href="/" accessKey="1" title="Ir para a página principal alt + 1">
+ <span className={`${state.contrast}text`}>Plataforma MEC de Recursos Educacionais Digitais</span>
+ </a>
+ </StyledButton>
+ </Grid>
+ <Grid xs={4} style={{display: "flex"}}>
+ <Grid xs={3}>
+ <StyledButton onClick={() => handleScrollTo("Conteudo_scroll")}>
+ <a className={`${state.contrast}text`} accessKey="2" title="Ir para o conteúdo alt + 2">
+ Conteúdo
+ </a>
+ </StyledButton>
+ </Grid>
+ <Grid xs={3}>
+ <StyledButton onClick={() => handleScrollTo("Pesquisa_scroll")}>
+ <a className={`${state.contrast}text`} accessKey="3" title="Ir para o menu e a barra de pesquisa alt + 3">
+ Menu
+ </a>
+ </StyledButton>
+ </Grid>
+ <Grid xs={3}>
+ <StyledButton onClick={() => handleScrollTo("Rodape_scroll")}>
+ <a className={`${state.contrast}text`} accessKey="4" title="Ir para o rodapé alt + 4">
+ Rodapé
+ </a>
+ </StyledButton>
+ </Grid>
+ <Grid xs={3}>
+ <StyledButton onClick={toggleContrast}>
+ <a className={`${state.contrast}text`} title={state.contrast === "" ? "Ativar alto contraste" : "Desativar alto contraste"}>
+ <img className='Constrasticon' src={state.contrast === "" ? ContrastImageOff : ContrastImageOn} style={{ paddingRight: "15px" }} alt="Ãcone de contraste" />
+ </a>
+ </StyledButton>
+ </Grid>
+ </Grid>
+ </>
+ )
+ :
+ (
+ <>
+ <Grid xs={12} style={{display: "flex"}}>
+ <Grid xs={3}>
+ <StyledButton>
+ <a href="/" accessKey="1" title="Ir para a página principal alt + 1">
+ <span className={`${state.contrast}text`}>MEC RED</span>
+ </a>
+ </StyledButton>
+ </Grid>
+ <Grid xs={3}>
+ <StyledButton onClick={() => handleScrollTo("Conteudo_scroll")}>
+ <a className={`${state.contrast}text`} accessKey="2" title="Ir para o conteúdo alt + 2">
+ Conteúdo
+ </a>
+ </StyledButton>
+ </Grid>
+ <Grid xs={2}>
+ <StyledButton onClick={() => handleScrollTo("Pesquisa_scroll")}>
+ <a className={`${state.contrast}text`} accessKey="3" title="Ir para o menu e a barra de pesquisa alt + 3">
+ Menu
+ </a>
+ </StyledButton>
+ </Grid>
+ <Grid xs={3}>
+ <StyledButton onClick={() => handleScrollTo("Rodape_scroll")}>
+ <a className={`${state.contrast}text`} accessKey="4" title="Ir para o rodapé alt + 4">
+ Rodapé
+ </a>
+ </StyledButton>
+ </Grid>
+ <Grid xs={1}>
+ <StyledButton onClick={toggleContrast}>
+ <a className={`${state.contrast}text`} title={state.contrast === "" ? "Ativar alto contraste" : "Desativar alto contraste"}>
+ <img className='Constrasticon' src={state.contrast === "" ? ContrastImageOff : ContrastImageOn} style={{ paddingRight: "15px" }} alt="Ãcone de contraste" />
+ </a>
+ </StyledButton>
+ </Grid>
+ </Grid>
+ </>
+ )
+ }
+ </StyledGrid>
+ </React.Fragment>
+ );
+
+}
+
+const StyledGrid = styled(Grid) `
+ display: flex;
+ padding-left: 15px;
+ padding-right: 15px;
+ background: ${props => props.contrast === "" ? "white" : "black"};
+ border-bottom: ${props => props.contrast === "" ? "1px solid #666" : "1px solid white"};
+`
+
+const StyledButton = styled(Button)`
+ width: 100%;
+`
+
+/*
+<div>
+ <a className={`${state.contrast}text`} onClick={incrementFontSize} title="Aumentar tamanho da fonte">
+ A+
+ </a>
+ <a className={`${state.contrast}text`} onClick={decrementFontSize} title="Diminuir tamanho da fonte">
+ A-
+ </a>
+ <a className={`${state.contrast}text`} onClick={defaultFontSize} title="Restaurar tamanho da fonte">
+ A
+ </a>
+</div>
+*/
+
+export default ContrastBar;
\ No newline at end of file
diff --git a/src/Components/ActivityListItem.js b/src/Components/ActivityListItem.js
index 43402a8e..fe0a4086 100644
--- a/src/Components/ActivityListItem.js
+++ b/src/Components/ActivityListItem.js
@@ -117,7 +117,7 @@ export default function ActivityListItem(props) {
}, [])
return (
- <StyledListItem onMenuBar={props.onMenuBar}>
+ <StyledListItem onMenuBar={props.onMenuBar} contrast={props.contrast}>
{
!props.onMenuBar &&
<>
@@ -140,10 +140,11 @@ export default function ActivityListItem(props) {
}
secondary={
<div>
-
- <span>
+
+ <span style={props.contrast === "" ? { color: "#666" } : {color: "white"}}>
+
<Link to={{
- pathname: props.ownerHref,
+ pathname: props.ownerHref,
state: '0',
}} className="owner-name-a" >{props.ownerName}</Link> {activity.text} <Link to={props.recipientHref} className="recipient-name-a">{props.recipientName}</Link> {activity.text2}
</span>
@@ -169,22 +170,24 @@ const StyledListItem = styled(ListItem)`
.time-ago-span {
font-size : 12px;
- font-family : 'Lato', medium;
- color : #787380;
+ font-family : 'Lato', medium;
+ color: ${props => props.contrast === '' ? "#787380" : "white"};
}
.owner-name-a {
- color : #00bcd4;
+ color: ${props => props.contrast === '' ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
}
.recipient-name-a {
cursor : pointer;
- color : #337ab7;
+ color: ${props => props.contrast === '' ? "#337ab7" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
}
.icon {
padding-right : 10px;
- color : #666;
+ color: ${props => props.contrast === '' ? "#666" : "white"};
}
.tag-object {
@@ -208,16 +211,18 @@ const StyledListItem = styled(ListItem)`
}
.recurso-color {
- background-color : orange;
+ background-color: ${props => props.contrast === '' ? "orange" : ""};
+ border: ${props => props.contrast === '' ? "" : "1px solid #d4d4d4"};
}
.colecao-color {
- background-color : blue;
+ background-color: ${props => props.contrast === '' ? "blue" : ""};
+ border: ${props => props.contrast === '' ? "" : "1px solid #d4d4d4"};
}
.curadoria-color {
- background-color : red;
+ background-color: ${props => props.contrast === '' ? "red" : ""};
+ border: ${props => props.contrast === '' ? "" : "1px solid #d4d4d4"};
}
-
`
diff --git a/src/Components/AreasSubPagesFunction.js b/src/Components/AreasSubPagesFunction.js
index 7b982e93..f3f3a60a 100644
--- a/src/Components/AreasSubPagesFunction.js
+++ b/src/Components/AreasSubPagesFunction.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 "./carousel.css";
import { Col, Row, Container, Hidden, Visible } from "react-grid-system";
import styled from 'styled-components'
@@ -40,6 +40,16 @@ import { materiais } from "ImportImages.js";
import { colecoes } from "ImportImages.js";
import { ColecaoVazia } from "ImportImages.js";
import { RecursoVazio } from "ImportImages.js";
+import { Store } from '../Store'
+import { makeStyles } from '@material-ui/core/styles'
+
+const useStyles = makeStyles(theme => ({
+ contrastTextField: {
+ border: "1px solid white",
+ borderRadius: theme.shape.borderRadius,
+ backgroundColor: "black",
+ }
+}))
function objectsPerPage() {
var pageWidth = window.innerWidth
@@ -64,7 +74,7 @@ function ReqResources(props) {
var aux = []
var resources_per_page = objectsPerPage()
for (let i = 0; i < 12 / resources_per_page; i++) {
- aux.push(data.slice(i * resources_per_page, resources_per_page * (i + 1)))
+ aux.push(data.slice(i * resources_per_page, resources_per_page * (i + 1)))
}
setRows(aux)
setIsLoading(false)
@@ -81,7 +91,7 @@ function ReqResources(props) {
isLoading ?
<Grid container justify="center" alignItems="center" style={{ margin: "2em" }} >
<Grid item>
- <CircularProgress size={24} color="#ff7f00" />
+ <CircularProgress size={24} style={props.contrast === "" ? { color: "#ff7f00" } : { color: "yellow" }} />
</Grid>
</Grid>
:
@@ -89,33 +99,34 @@ function ReqResources(props) {
{
rows.length >= 1 ?
rows.map((row, index) => (
- <Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center", minHeight: "50px" }} key={(index + 1)}>
- {row.map((card) => (
- <div style={{ marginLeft: 10, display: 'flex' }} key={card.id * (index + 1)}>
- <ResourceCardFunction
- avatar={card.publisher.avatar}
- id={card.id}
- thumbnail={card.thumbnail}
- type={card.object_type ? card.object_type : "Outros"}
- title={card.name}
- published={card.state === "published" ? true : false}
- likeCount={card.likes_count}
- liked={card.liked}
- rating={card.review_average}
- author={card.publisher.name}
- tags={card.tags}
- href={"/recurso/" + card.id}
- downloadableLink={card.default_attachment_location}
- />
- </div>
- ))}
- </Row>
+ <Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center", minHeight: "50px" }} key={(index + 1)}>
+ {row.map((card) => (
+ <div style={{ marginLeft: 10, display: 'flex' }} key={card.id * (index + 1)}>
+ <ResourceCardFunction
+ contrast={props.contrast}
+ avatar={card.publisher.avatar}
+ id={card.id}
+ thumbnail={card.thumbnail}
+ type={card.object_type ? card.object_type : "Outros"}
+ title={card.name}
+ published={card.state === "published" ? true : false}
+ likeCount={card.likes_count}
+ liked={card.liked}
+ rating={card.review_average}
+ author={card.publisher.name}
+ tags={card.tags}
+ href={"/recurso/" + card.id}
+ downloadableLink={card.default_attachment_location}
+ />
+ </div>
+ ))}
+ </Row>
))
:
<Grid container justify="center" alignItems="center">
- <Grid item>
- <img src={RecursoVazio} alt="Não há recursos" />
- </Grid>
+ <Grid item>
+ <img src={RecursoVazio} alt="Não há recursos" />
+ </Grid>
</Grid>
}
</Carousel>
@@ -131,7 +142,7 @@ function ReqCollections(props) {
var aux = []
var collections_per_page = objectsPerPage()
for (let i = 0; i < 12 / collections_per_page; i++) {
- aux.push(data.slice(i * collections_per_page, collections_per_page * (i + 1)))
+ aux.push(data.slice(i * collections_per_page, collections_per_page * (i + 1)))
}
setIsLoading(false)
setRows(aux)
@@ -147,86 +158,51 @@ function ReqCollections(props) {
return (
isLoading ?
<Grid container justify="center" alignItems="center" style={{ marginTop: "2em" }}>
- <Grid item>
- <CircularProgress size={24} color="#673ab7" />
- </Grid>
+ <Grid item>
+ <CircularProgress size={24} style={props.contrast === "" ? { color: "#673ab7" } : { color: "yellow" }} />
+ </Grid>
</Grid>
:
rows.length >= 1 ?
<Carousel className={`${props.contrast}Carousel`} showThumbs={false} infiniteLoop={true} showStatus={false}>
{
- rows.map((row, index) => (
+ rows.map((row, index) => (
<Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center", minHeight: "50px" }} key={(index + 1)}>
- {row.map((card) => (
- <div style={{ marginLeft: 10, display: 'flex' }} key={card.id * (index + 1)}>
- <CollectionCardFunction
- name={card.name}
- tags={card.tags}
- rating={card.score}
- id={card.id}
- author={card.owner ? card.owner.name : ""}
- description={card.description}
- thumbnails={card.items_thumbnails}
- avatar={card.owner ? card.owner.avatar : ""}
- likeCount={card.likes_count}
- followed={card.followed}
- liked={card.liked}
- collections={card.collection_items}
- authorID={card.owner ? card.owner.id : ""}
- />
- </div>
- ))}
+ {row.map((card) => (
+ <div style={{ marginLeft: 10, display: 'flex' }} key={card.id * (index + 1)}>
+ <CollectionCardFunction
+ contrast={props.contrast}
+ name={card.name}
+ tags={card.tags}
+ rating={card.score}
+ id={card.id}
+ author={card.owner ? card.owner.name : ""}
+ description={card.description}
+ thumbnails={card.items_thumbnails}
+ avatar={card.owner ? card.owner.avatar : ""}
+ likeCount={card.likes_count}
+ followed={card.followed}
+ liked={card.liked}
+ collections={card.collection_items}
+ authorID={card.owner ? card.owner.id : ""}
+ />
+ </div>
+ ))}
</Row>
- ))}
+ ))
+ }
</Carousel>
- :
+ :
<Grid container justify="center" alignItems="center">
<Grid item>
- <img src={ColecaoVazia} alt="Não há coleções" />
+ <img src={ColecaoVazia} alt="Não há coleções" />
</Grid>
</Grid>
)
}
-function ReqMaterials(props) {
- const materials = colecoes_obj();
-
- const handleExpandMaterial = (id) => {
- if (id !== props.currMaterial.material.id)
- props.setCurrMaterial({
- open: true,
- material: { ...materials[id] }
- })
- else
- props.setCurrMaterial({
- open: false,
- material: {}
- })
- }
-
- return (
- <Row>
- {
- materials.map((material, index) => {
- return (
- <Col md={3} key={index}>
- <MaterialCard
- name={material.name}
- thumb={material.img}
- score={material.score}
- modules={material.topics}
- handleExpand={handleExpandMaterial}
- id={index}
- />
- </Col>
- )
- })
- }
- </Row>
- )
-}
-
-function TabRecurso() {
+function TabRecurso({ contrast }) {
+ const classes = useStyles()
const text = "Nesta área, você tem acesso a Recursos Educacionais Digitais, isto é, a vÃdeos, animações e a outros recursos destinados à educação. São Recursos de portais parceiros do MEC e de professores que, como você, atuam na Educação Básica!"
const [currOrder, setCurrOrder] = useState("Mais Relevante");
const [currValue, setCurrValue] = useState("score");
@@ -241,105 +217,111 @@ function TabRecurso() {
return (
<React.Fragment>
- <div style={{ backgroundColor: "#ff7f00", position: "relative" }}>
- <StyledTab container>
- <Grid item md={3} xs={12}>
- <img
- src={recursos}
- alt="aba recursos"
- style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
- />
- </Grid>
- {
- window.innerWidth <= 501 &&
- <h4>
- Recursos Educacionais Digitais
- </h4>
- }
- <Grid item md={6} xs={12}>
- <p>
- {text}
- </p>
- </Grid>
- {
- window.innerWidth <= 501 &&
- <div style={{ display: "flex", justifyContent: "center" }}>
- <Link to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=LearningObject`} className="button-ver">VER RECURSOS</Link>
- </div>
- }
- </StyledTab>
- </div>
- {
- window.innerWidth > 501 &&
- <Container style={{ padding: "20px" }}>
- <Grid
- container
- direction="row"
- justify="space-between"
- alignItems="center"
- style={{
- paddingBottom: "5px",
- borderBottom: "1px solid #ff7f00",
- color: "#ff7f00",
- }}
- >
- <Grid item>
- <p
- style={{ margin: 0, padding: 0 }}
- >
+ <div style={{ backgroundColor: contrast === "" ? "#ff7f00" : "black", position: "relative" }}>
+ <StyledTab container contrast={contrast}>
+ <Grid item md={3} xs={12}>
+ <img
+ src={recursos}
+ alt="aba recursos"
+ style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
+ />
+ </Grid>
{
- `Recursos ${currOrder}`
+ window.innerWidth <= 501 &&
+ <h4>
+ Recursos Educacionais Digitais
+ </h4>
}
- </p>
- </Grid>
-
- <Grid item>
- <Grid container direction="row" alignItems="center" spacing={1}>
- <Grid item>
- <p style={{ margin: 0, padding: 0 }}>
- Ordenar por:
- </p>
+ <Grid item md={6} xs={12}>
+ <p>
+ {text}
+ </p>
</Grid>
- <Grid item>
- <TextField
- select
- fullWidth
- value={currValue}
- variant="outlined"
- >
- {ordenar.map((option) => (
- <MenuItem
- key={option.value}
- value={option.value}
- name={option.value}
- onClick={() => {
- setCurrOrder(option.label)
- setCurrValue(option.value)
+ {
+ window.innerWidth <= 501 &&
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ <Link to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=LearningObject`} className="button-ver">VER RECURSOS</Link>
+ </div>
+ }
+ </StyledTab>
+ </div>
+ {
+ window.innerWidth > 501 &&
+ <div className={`${contrast}BackColor`}>
+ <Container style={{ padding: "20px" }}>
+ <Grid
+ container
+ direction="row"
+ justify="space-between"
+ alignItems="center"
+ style={{
+ paddingBottom: "5px",
+ borderBottom: contrast === "" ? "1px solid #ff7f00" : "1px solid white",
+ color: contrast === "" ? "#ff7f00" : "white",
}}
>
- <span style={currValue === option.value ? { color: "#ff7f00" } : null} >
- {option.label}
- </span>
- </MenuItem>
- ))}
- </TextField>
- </Grid>
- </Grid>
- </Grid>
- </Grid>
- <Hidden sm xs>
- <ReqResources order={currValue} />
- </Hidden>
- <Visible sm xs>
- <ReqResources order={currValue} />
- </Visible>
- </Container>
- }
+ <Grid item>
+ <p
+ style={{ margin: 0, padding: 0 }}
+ >
+ {
+ `Recursos ${currOrder}`
+ }
+ </p>
+ </Grid>
+
+ <Grid item>
+ <Grid container direction="row" alignItems="center" spacing={1}>
+ <Grid item>
+ <p style={{ margin: 0, padding: 0 }}>
+ Ordenar por:
+ </p>
+ </Grid>
+ <Grid item>
+ <StyledTextField
+ contrast={contrast}
+ select
+ fullWidth
+ value={currValue}
+ variant="outlined"
+ className={contrast === "Contrast" && classes.contrastTextField}
+ >
+ {ordenar.map((option) => (
+ <StyledMenuItem
+ contrast={contrast}
+ key={option.value}
+ value={option.value}
+ name={option.value}
+ onClick={() => {
+ setCurrOrder(option.label)
+ setCurrValue(option.value)
+ }}
+ >
+ <span style={currValue === option.value ? { color: contrast === "" ? "#ff7f00" : "yellow", textDecoration: contrast === "" ? "none" : "underline", fontWeight: "500" } : { color: contrast === "" ? "" : "yellow", textDecoration: contrast === "" ? "none" : "underline", fontWeight: "lighter" }} >
+ {option.label}
+ </span>
+ </StyledMenuItem>
+ ))}
+ </StyledTextField>
+ </Grid>
+ </Grid>
+ </Grid>
+ </Grid>
+ <Hidden sm xs>
+ <ReqResources order={currValue} contrast={contrast} />
+ </Hidden>
+ <Visible sm xs>
+ <ReqResources order={currValue} contrast={contrast} />
+ </Visible>
+ </Container>
+ </div>
+ }
</React.Fragment>
)
}
-function TabColecoes() {
+function TabColecoes({ contrast }) {
+ const classes = useStyles()
const text = "Nesta área, você tem acesso às coleções criadas e organizadas pelos usuários da plataforma. É mais uma possibilidade de buscar recursos educacionais para sua aula!"
const [currOrder, setCurrOrder] = useState("Mais Relevante");
const [currValue, setCurrValue] = useState("score");
@@ -354,179 +336,223 @@ function TabColecoes() {
return (
<React.Fragment>
- <div style={{ backgroundColor: "#673ab7", position: "relative" }}>
- <StyledTab container>
- <Grid item md={3} xs={12}>
- <img
- src={colecoes}
- alt="aba recursos"
- style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
- />
- </Grid>
- {
- window.innerWidth <= 501 &&
- <h4>
- Coleções dos Usuários
- </h4>
- }
- <Grid item md={6} xs={12}>
- <p>
- {text}
- </p>
- </Grid>
- {
- window.innerWidth <= 501 &&
- <div style={{ display: "flex", justifyContent: "center" }}>
- <Link to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=Collection`} className="button-ver">VER COLEÇÕES</Link>
- </div>
- }
- </StyledTab>
- </div>
- {
- window.innerWidth > 501 &&
- <Container style={{ padding: "20px" }}>
- <Grid
- container
- direction="row"
- justify="space-between"
- alignItems="center"
- style={{
- paddingBottom: "5px",
- borderBottom: "1px solid #673ab7",
- color: "#673ab7",
- }}
- >
- <Grid item>
- <p
- style={{ margin: 0, padding: 0 }}
- >
+ <div style={{ backgroundColor: "#673ab7", position: "relative" }}>
+ <StyledTab container contrast={contrast}>
+ <Grid item md={3} xs={12}>
+ <img
+ src={colecoes}
+ alt="aba recursos"
+ style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
+ />
+ </Grid>
{
- `Coleções ${currOrder}`
+ window.innerWidth <= 501 &&
+ <h4>
+ Coleções dos Usuários
+ </h4>
}
- </p>
- </Grid>
-
- <Grid item>
- <Grid container direction="row" alignItems="center" spacing={1}>
- <Grid item>
- <p style={{ margin: 0, padding: 0 }}>
- Ordenar por:
- </p>
+ <Grid item md={6} xs={12}>
+ <p>
+ { text}
+ </p>
</Grid>
- <Grid item>
- <TextField
- select
- fullWidth
- value={currValue}
- variant="outlined"
- >
- {ordenar.map((option) => (
- <MenuItem
- key={option.value}
- value={option.value}
- name={option.value}
- onClick={() => {
- setCurrOrder(option.label)
- setCurrValue(option.value)
+ {
+ window.innerWidth <= 501 &&
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ <Link to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=Collection`} className="button-ver">VER COLEÇÕES</Link>
+ </div>
+ }
+ </StyledTab>
+ </div>
+ {
+ window.innerWidth > 501 &&
+ <div className={`${contrast}BackColor`}>
+ <Container style={{ padding: "20px" }}>
+ <Grid
+ container
+ direction="row"
+ justify="space-between"
+ alignItems="center"
+ style={{
+ paddingBottom: "5px",
+ borderBottom: contrast === "" ? "1px solid #673ab7" : "1px solid white",
+ color: contrast === "" ? "#673ab7" : "white",
}}
>
- <span style={currValue === option.value ? { color: "#673ab7" } : null} >
- {option.label}
- </span>
- </MenuItem>
- ))}
- </TextField>
- </Grid>
- </Grid>
- </Grid>
- </Grid>
- <ReqCollections order={currValue} />
- </Container>
- }
+ <Grid item>
+ <p
+ style={{ margin: 0, padding: 0 }}
+ >
+ {
+ `Coleções ${currOrder}`
+ }
+ </p>
+ </Grid>
+
+ <Grid item>
+ <Grid container direction="row" alignItems="center" spacing={1}>
+ <Grid item>
+ <p style={{ margin: 0, padding: 0 }}>
+ Ordenar por:
+ </p>
+ </Grid>
+ <Grid item>
+ <StyledTextField
+ contrast={contrast}
+ select
+ fullWidth
+ value={currValue}
+ variant="outlined"
+ className={contrast === "Contrast" && classes.contrastTextField}
+ >
+ {ordenar.map((option) => (
+ <StyledMenuItem
+ contrast={contrast}
+ key={option.value}
+ value={option.value}
+ name={option.value}
+ style={contrast === "" ? {} : { backgroundColor: "black" }}
+ onClick={() => {
+ setCurrOrder(option.label)
+ setCurrValue(option.value)
+ }}
+ >
+ <span style={currValue === option.value ? { color: contrast === "" ? "#673ab7" : "yellow", textDecoration: contrast === "" ? "none" : "underline", fontWeight: "500" } : { color: contrast === "" ? "" : "yellow", textDecoration: contrast === "" ? "none" : "underline", fontWeight: "lighter" }} >
+ {option.label}
+ </span>
+ </StyledMenuItem>
+ ))}
+ </StyledTextField>
+ </Grid>
+ </Grid>
+ </Grid>
+ </Grid>
+ <ReqCollections order={currValue} contrast={contrast} />
+ </Container>
+ </div>
+ }
</React.Fragment>
)
}
-function TabMateriais() {
+function TabMateriais({ contrast }) {
const text = "Nesta área, você acessa livremente materiais completos de formação, como cursos já oferecidos pelo MEC e seus parceiros. São conteúdos elaborados por equipes multidisciplinares e de autoria de pesquisadores e educadores renomados nas áreas."
+ const materials = colecoes_obj()
+
const [currMaterial, setCurrMaterial] = useState({
open: false,
material: {}
})
+ const handleExpandMaterial = (id) => {
+ if (id !== currMaterial.material.id)
+ setCurrMaterial({
+ open: true,
+ material: { ...materials[id] }
+ })
+ else {
+ setCurrMaterial({
+ open: false,
+ material: {}
+ })
+ }
+ }
+
return (
<React.Fragment>
<div style={{ backgroundColor: "#e81f4f", position: "relative" }}>
- <StyledTab container>
- <Grid item md={3} xs={12}>
- <img
- src={materiais}
- alt="aba recursos"
- style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
- />
- </Grid>
- {
- window.innerWidth <= 501 &&
- <h4>
- Materiais de formação
- </h4>
- }
- <Grid item md={6} xs={12}>
- <p>
- {text}
- </p>
- </Grid>
- {
- window.innerWidth <= 501 &&
- <div style={{ display: "flex", justifyContent: "center" }}>
- <Link to={`/material-formacao`} className="button-ver">VER MATERIAIS</Link>
- </div>
- }
+ <StyledTab container contrast={contrast}>
+ <Grid item md={3} xs={12}>
+ <img
+ src={materiais}
+ alt="aba recursos"
+ style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
+ />
+ </Grid>
+ {
+ window.innerWidth <= 501 &&
+ <h4>
+ Materiais de formação
+ </h4>
+ }
+ <Grid item md={6} xs={12}>
+ <p>
+ {text}
+ </p>
+ </Grid>
+ {
+ window.innerWidth <= 501 &&
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ <Link to={`/material-formacao`} className="button-ver">VER MATERIAIS</Link>
+ </div>
+ }
</StyledTab>
</div>
{
- window.innerWidth > 501 &&
- <Container style={{ padding: "20px" }}>
- <p
- style={{
- paddingBottom: "5px",
- borderBottom: "1px solid #e81f4f",
- color: "#e81f4f",
- }}
- >
- Materiais mais recentes{" "}
- </p>
- <Carousel
- style={{ padding: "20px" }}
- showThumbs={false}
- infiniteLoop={true}
- showStatus={false}
- >
- <ReqMaterials currMaterial={currMaterial} setCurrMaterial={setCurrMaterial} />
- </Carousel>
- {
- currMaterial.open ?
- <ExpandedMaterial material={currMaterial.material} />
- :
- null
- }
- </Container>
- }
- </React.Fragment >
- )
+ window.innerWidth > 501 &&
+ <div className={`${contrast}BackColor`}>
+ <Container style={{ padding: "20px" }}>
+ <p
+ style={{
+ paddingBottom: "5px",
+ borderBottom: contrast === "" ? "1px solid #e81f4f" : "1px solid white",
+ color: contrast === "" ? "#e81f4f" : "white",
+ }}
+ >
+ Materiais mais recentes{" "}
+ </p>
+ <Carousel
+ style={{ padding: "20px" }}
+ showThumbs={false}
+ infiniteLoop={true}
+ showStatus={false}
+ >
+ <Row>
+ {
+ materials.map((material, index) => {
+ return (
+ <Col md={3} key={index}>
+ <MaterialCard
+ contrast={contrast}
+ name={material.name}
+ thumb={material.img}
+ score={material.score}
+ modules={material.topics}
+ handleExpand={handleExpandMaterial}
+ id={index}
+ />
+ </Col>
+ )
+ })
+ }
+ </Row>
+ </Carousel>
+ {
+ currMaterial.open ?
+ <ExpandedMaterial contrast={contrast} material={currMaterial.material} />
+ :
+ null
+ }
+ </Container>
+ </div>
+ }
+ </React.Fragment >
+ )
}
export default function AreasSubPages(props) {
+ const { state } = useContext(Store)
+
const areaRender = () => {
switch (props.banner) {
case "Recursos":
- return <TabRecurso />
+ return <TabRecurso contrast={state.contrast} />
case "Materiais":
- return <TabMateriais />
+ return <TabMateriais contrast={state.contrast} />
case "Colecoes":
- return <TabColecoes />
+ return <TabColecoes contrast={state.contrast} />
default:
return null
}
@@ -537,9 +563,9 @@ export default function AreasSubPages(props) {
{
window.innerWidth <= 501 ? (
<React.Fragment>
- <TabRecurso />
- <TabMateriais />
- <TabColecoes />
+ <TabRecurso contrast={state.contrast} />
+ <TabMateriais contrast={state.contrast} />
+ <TabColecoes contrast={state.contrast} />
</React.Fragment>
) : (
areaRender()
@@ -561,6 +587,7 @@ const StyledTab = styled(Grid)`
color : #fff;
min-height : 190px;
padding : 20px 10px 20px 10px;
+ background: ${props => props.contrast === "" ? "" : "black"};
img {
float : left;
@@ -586,9 +613,24 @@ const StyledTab = styled(Grid)`
padding: 5px 10px;
border: solid 2px #fff;
border-radius: 7px;
- color: #fff;
+ color: ${props => props.contrast === "" ? "#fff" : "yellow"};
cursor: pointer;
- text-decoration: none;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
}
`
+
+const StyledMenuItem = styled(MenuItem)`
+ background-color: ${props => props.contrast === "" ? "" : "black !important"};
+`
+
+const StyledTextField = styled(TextField)`
+ .MuiOutlinedInput-root {
+ &.Mui-focused fieldset {
+ border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ }
+ fieldset {
+ border-color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+ }
+`
\ No newline at end of file
diff --git a/src/Components/ButtonAvaliarRecurso.js b/src/Components/ButtonAvaliarRecurso.js
index 8b307048..06d63059 100644
--- a/src/Components/ButtonAvaliarRecurso.js
+++ b/src/Components/ButtonAvaliarRecurso.js
@@ -6,18 +6,20 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
export default function ButtonAvaliarRecurso (props) {
return (
- <StyledButton onClick={props.callback}>
- <ExpandMoreIcon/> AVALIAR RECURSO
+ <StyledButton contrast={props.contrast} onClick={props.callback}>
+ <ExpandMoreIcon style={{color: "white"}}/> AVALIAR RECURSO
</StyledButton>
)
}
-const StyledButton = styled(Button)`
+export const StyledButton = styled(Button)`
&:hover {
- background-color : #ed6f00 !important;
+ background-color: ${props => props.contrast === "" ? "#ed6f00" : "black"} !important;
}
- background-color : #ff7f00 !important;
- color : #fff !important;
+ background-color: ${props => props.contrast === "" ? "#ff7f00" : "black"} !important;
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"} !important;
+ color : ${props => props.contrast === "" ? "white" : "yellow"} !important;
+ text-decoration : ${props => props.contrast === "" ? "none" : "underline"} !important;
font-weight : 600 !important;
box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
.MuiSvgIcon-root {
diff --git a/src/Components/ButtonGuardarColecao.js b/src/Components/ButtonGuardarColecao.js
index 6b580270..eaa40ad7 100644
--- a/src/Components/ButtonGuardarColecao.js
+++ b/src/Components/ButtonGuardarColecao.js
@@ -42,9 +42,9 @@ export default function ButtonGuardarColecao(props) {
return (
<>
- <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}
+ <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}
/>
- <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
/>
<SnackBar
@@ -57,25 +57,25 @@ export default function ButtonGuardarColecao(props) {
<GuardarModal contrast={props.contrast} open={saveToCol} handleClose={() => { toggleSave(false) }}
thumb={props.thumb} title={props.title} recursoId={props.learningObjectId}
/>
- <StyledButton onClick={handleGuardar}>
- <CreateNewFolderIcon /> GUARDAR
+ <StyledButton onClick={handleGuardar} className={`${props.contrast}LinkColor`}
+ style={props.contrast === "" ? {border: "2px solid #f07e05", borderRadius : "5px", color :"#f07e05"} : {border: "1px solid white", borderRadius : "5px", color :"#f07e05"}}
+ >
+ <CreateNewFolderIcon className={`${props.contrast}IconColor`}/><span>GUARDAR</span>
</StyledButton>
</>
)
}
const StyledButton = styled(Button)`
- color : #666 !important;
background-color : transparent !important;
font-size : 14px important;
font-weight : 500 !important;
.MuiSvgIcon-root {
font-size : 24px;
- color : inherit;
}
&:hover {
- color: rgb(107, 35, 142) !important;
+ color: rgb(107, 35, 142);
}
`
diff --git a/src/Components/Carousel.js b/src/Components/Carousel.js
deleted file mode 100644
index dde54bd2..00000000
--- a/src/Components/Carousel.js
+++ /dev/null
@@ -1,665 +0,0 @@
-/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
-Departamento de Informatica - Universidade Federal do Parana
-
-This file is part of Plataforma Integrada MEC.
-
-Plataforma Integrada MEC is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-Plataforma Integrada MEC is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-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, { Component } from 'react';
-import "react-responsive-carousel/lib/styles/carousel.min.css";
-import { Carousel } from 'react-responsive-carousel';
-import styled from 'styled-components';
-import Grid from '@material-ui/core/Grid';
-
-
-
-/*Importação de imagens para o componente*/
-import Handshake from "../img/termos/handshake.svg"
-import Pessoa from "../img/termos/Pessoa.svg"
-import Email from "../img/termos/Email.svg"
-import Seguranca from "../img/termos/Seguranca.svg"
-import Arrow_down from "../img/termos/Arrow_down.svg";
-import Arrow_double from "../img/termos/Arrow_double.svg";
-import Like from "../img/termos/Like.svg";
-import Unlike from "../img/termos/Unlike.svg";
-import Line from "../img/termos/Line.svg";
-import Entenda from "../img/termos/Entenda.svg";
-import V from "../img/termos/V.svg";
-//Image Import
-import { Aberto } from "ImportImages.js";
-import { Fechado } from "ImportImages.js";
-import { Arrow_O } from "ImportImages.js";
-import { Arrow_O_1 } from "ImportImages.js";
-import { OrthogonalLineUp } from "ImportImages.js";
-import { OrthogonalLineDown } from "ImportImages.js";
-
-const Slide = styled.div`
-
-position: absolute;
-height: 500px;
-width: 1366px;
-
-h2{
- font-family: "Pompiere", regular;
- font-size: 44px;
- line-height: 120%;
- color: #FFFFFF;
-}
-
-h3{
- font-family: "Roboto", regular;
- font-size: 27px;
- line-height: 120%;
- color: #FFFFFF;
-}
-
-p{
- font-family: "Roboto", regular;
- font-size: 20px;
- line-height: 120%;
- color: #FFFFFF;
- text-align: left;
-}
-
-.container{
- position: absolute;
- height: auto;
- width: auto;
- margin: 70px 180px 90px;
-}
-
-
-.tmpl1{
- background-color: #00BCD4;
- height: inherit;
- width: inherit;
- display: flex;
- align-items: center;
-
-
- .box-text{
- position: relative;
- float: left;
- padding-right: 10px;
- padding-left: 10px;
-
- p {
- margin: 0 0 10px;
- }
- }
-
- .box-image{
- position: relative;
- float: right;
- }
-}
-
-.tmpl2{
- height: inherit;
- width: inherit;
- display: flex;
- align-items: center;
- background-color: #673AB7;
-
- .title{
- padding-bottom: 50px;
- }
-
- .images{
- position: absolute;
- display: table-row;
- }
-
- .arrow{
- display: table-row;
- position: absolute;
- margin-left: 55px;
- margin-top: -15px;
- width: 282px;
- }
-
- .circle{
- display: table-row;
- position: absolute;
- margin-top: -100px;
- margin-left: 795px;
- width: 191px;
- }
-
- h2 {
- margin-top: 20px;
- margin-bottom: 10px;
- font-weight: 500;
- }
-
- .box-text{
- p{
- font-size: 18px;
- line-height: 25px;
- }
-
- position: relative;
-
- }
-
-
-}
-
-.tmpl3{
- height: inherit;
- width: inherit;
- display: flex;
- align-items: center;
- background-color: #E81F4F;
-
- .title{
- position: relative;
- padding-left: 10px;
- h3{
- line-height: 40px;
- }
- }
-
- .box-text1{
- .text{
- padding-top: 20px;
- }
-
- .content{
- display: table-row;
-
- p{
- display: table-cell;
- font-size: 18px;
- line-height: 25px;
- vertical-align: middle;
- }
-
- img{
- position: relative;
- left: 0;
- margin-right: 20px;
- display: table-cell;
- vertical-align: middle;
- margin: 10px 20px 10px -10px;
- }
- }
-
- }
-
- .box-text2{
- top: -50px;
- .content{
- p{
- padding-bottom: 20px;
- }
-
- img{
- margin-left: -65px;
- margin-top: 25px;
- }
-
- .twoArrow{
- margin-top: -5px;
- }
- }
-
-
- }
-
-
-
-}
-
-.tmpl4{
- height: inherit;
- width: inherit;
- display: flex;
- align-items: center;
- background-color: #FF7F00;
-
- h2{
- padding-bottom: 20px;
- }
-
- p{
- font-size: 20px;
- line-height: 25px;
- vertical-align: middle;
- }
-
- .box-images{
- height: inherit;
- display: table-row;
- padding-top: 50px;
- }
-
- img{
- display: table-cell;
- vertical-align: middle;
- top: 40px;
- }
-
-
-}
-
-.tmpl5{
- height: inherit;
- width: inherit;
- display: flex;
- align-items: center;
- background-color: #1AB9DE;
-
- .title{
- display: table-row;
- align-items: center;
-
- img{
- display: table-cell;
- margin-right: 30px;
- }
-
- h2{
- display: table-cell;
- text-align: center;
- vertical-align: middle;
- }
- }
-
- .box-text {
- margin-top: 20px;
- p{
- font-size: 17px;
- font-weight: 15px;
- }
- }
-
-}
-
-.tmpl6{
- height: inherit;
- width: inherit;
- display: flex;
- align-items: center;
- background-color: #673AB7;
-
- .box-text-1{
- h3{
- margin-bottom: 20px;
- font-size: 27px;
- }
- p{
- margin-bottom: 20px;
- font-size: 18px;
- margin-top: 0px;
- }
-
-
- .licences{
- padding: 35px 150px 50px 35px;
- margin-top: 50pz;
- background-image: url(${Entenda});
- background-repeat: no-repeat;
- background-size: cover;
- p::before{
- content: url(${V});
- }
- p{
- padding-left: 20px;
- font-family: "Kalam", regular;
- font-size: 24px;
- white-space: nowrap;
- }
- .row{
- padding-bottom: 5px;
-
-
- }
- }
- }
-
-
- .box-text-2{
- background-image: url(${OrthogonalLineUp}),url(${OrthogonalLineDown});
- background-repeat: no-repeat;
- background-position: left top, right bottom;
- padding-top: 30px;
- padding-left: 50px;
- p{
- font-size: 15px;
- padding-bottom: 15px;
- }
-
- .licenses_type{
- margin-left: -20px;
- font-size: 22px;
- font-weight: bold;
- text-align: right;
- white-space: nowrap;
- }
- .row {
- margin-right: -15px;
- margin-left: -15px;
-
- p {
- padding-left: 15px;
- }
- }
- }
-
-}
-
-.tmpl7{
- height: inherit;
- width: inherit;
- display: flex;
- align-items: center;
- background-color: #E81F4F;
-
- .title{
- h2{
- font-family: Roboto;
- font-size: 44px;
- }
- }
-
- .box-text{
- margin-top: 20px;
- p{
- line-height: 20px;
- font-family: "Roboto";
- font-size: 18px;
- }
- }
-
- .rodape{
- margin-top: 40px;
- p{
- line-height: 20px;
- font-family: "Pompiere", regular;
- font-size: 28px;
- text-align: center;
- }
- span{
- text-decoration: underline;
- font-family: "Pompiere", regular;
- line-height: 20px;
- font-size: 28px;
- cursor: pointer;
- }
- }
-}
-
-`
-
-const CarouselStyled = styled(Carousel)`
-
- .carousel.carousel-slider {
- height: 500px !important;
- }
-
- .carousel .slider-wrapper.axis-horizontal {
- height: 500px !important;
- }
- .carousel .control-dots {
- position: absolute !important;
- padding-bottom: 20px;
- }
-
- .carousel .control-arrow:before, .carousel.carousel-slider .control-arrow:before {
- margin: 0 5px;
- display: inline-block;
- border-top: 8px solid transparent;
- border-bottom: 8px solid transparent;
- content: ' ';
- }
- .carousel .control-arrow {
- background: transparent !important;
- }
- .m4d-icons {
- size: 50px
- }
-
-
-`
-
-
-class TermsCarousel extends Component {
- render() {
- return (
- <CarouselStyled
- showThumbs= {false}
- showStatus= {false}
- transitionTime={1000}
-
- width={"1366px"}
-
- >
- <div >
- <Slide>
- <div className="tmpl1">
- <div className="container">
- <Grid container spacing={0}>
- <Grid item xs={6} >
- <div className="box-text">
- <p>A Plataforma Integrada MEC RED é parte do Compromisso 6 do 3º Plano de Ação da Parceria para Governo Aberto (OGP-Brasil), que tem por objetivo “incorporar na polÃtica educacional o potencial da cultura digital, de modo a fomentar a autonomia para uso, reuso e adaptação de recursos educacionais digitais, valorizando a pluralidade e a diversidade da educação brasileiraâ€.</p>
- </div>
- </Grid>
- <Grid style={{display:"flex",justifyContent:"center"}} item xs={6}>
- <div className="box-image">
- <img src={Handshake} alt="handshake"/>
- </div>
- </Grid>
- </Grid>
- </div>
- </div>
- </Slide>
-
- </div>
- <div>
- <Slide>
- <div className="tmpl2">
- <div className="container">
- <div className="title">
- <h2>O que é a Plataforma Integrada MEC RED e como ela está organizada?</h2>
- <div className="images">
- <div className="arrow">
- <img src={Arrow_O} alt="Arrow_O"/>
- </div>
- <div className="circle">
- <img src={Arrow_O_1} alt="Arrow_O_1"/>
- </div>
- </div>
- </div>
- <Grid container>
- <Grid className="box-text" item xs={6}>
- <p>Uma plataforma interativa, colaborativa e criada em software livre, que disponibiliza conteúdos do acervo do MEC e indica conteúdos de parceiros com o objetivo de formar uma rede ativa de educadores interessados em usar, criar e compartilhar recursos educacionais digitais.</p>
- </Grid>
- <Grid className="box-text" item xs={6}>
- <p><strong>Repositório</strong> de recursos educacionais digitais que permite aos usuários cadastrados a publicação de seus materiais e <strong>Referatório</strong> que aponta links para conteúdos em sites externos.</p>
- </Grid>
- </Grid>
- </div>
- </div>
- </Slide>
- </div>
- <div>
- <Slide>
- <div className="tmpl3">
- <div className="container">
- <Grid className="title" container spacing={1}>
- <Grid item xs={12}>
- <h3>Os recursos educacionais disponibilizados<br/> podem ser de dois tipos:</h3>
- </Grid>
- </Grid>
- <Grid className="box-text1" container spacing={1}>
- <Grid className="text" item xs={8}>
- <div className="content">
- <img src={Aberto} alt="Aberto"/>
- <p><strong>Abertos</strong>: recursos sem nenhuma restrição de acesso e<br/> com flexibilidade quanto ao uso ou reuso.</p>
- </div>
- <div className="content">
- <img src={Fechado} alt="Fechado"/>
- <p><strong>Fechados</strong>: recursos com alguma restrição de acesso, uso<br/> ou reuso, como aqueles que, para acesso, há demanda de<br/> cadastro ou que têm licenças restritivas.</p>
- </div>
- </Grid>
- <Grid className="box-text2" item xs={4}>
- <div className="content">
- <img src={Arrow_down} alt="Arrow_down"/>
- <p>Como repositório, a Plataforma hospeda somente Recursos Educacionais Abertos (REA). Todo conteúdo inserido por usuários deve ser aberto.</p>
- </div>
- <div className="content">
- <img alt="" className="twoArrow" src={Arrow_double}/>
- <p>Como referatório, a Plataforma aponta links para parceiros, e<br/> esses recursos podem ser abertos ou fechados.</p>
- </div>
- </Grid>
- </Grid>
- </div>
- </div>
- </Slide>
- </div>
- <div>
- <Slide>
- <div class="tmpl4">
- <div class="container">
- <Grid container spacing={5}>
- <Grid item xs={6}>
- <h2>Como se cadastrar?</h2>
- <div>
- <p>Para criar uma conta, o usuário deverá clicar no botão “Cadastre-se†na página inicial da Plataforma e fazer um cadastro utilizando um endereço de e-mail e criando uma senha.</p>
- </div>
- </Grid>
- <Grid item xs={2} style={{alignSelf:"center"}}> <img style={{width:"150px",height:"150px"}} src={Pessoa} alt="Pessoa" /> </Grid>
- <Grid item xs={2} style={{alignSelf:"center"}}> <img style={{width:"150px",height:"150px"}} src={Email} alt="Email" /> </Grid>
- <Grid item xs={2} style={{alignSelf:"center"}}> <img style={{width:"150px",height:"150px"}} src={Seguranca} alt="Seguranca" /> </Grid>
- </Grid>
- </div>
- </div>
- </Slide>
- </div>
- <div>
- <Slide>
- <div class="tmpl5">
- <div class="container">
- <Grid container justify="space-evenly" spacing={12}>
- <Grid style={{paddingRight: "40px"}} item xs={6}>
- <div class="title">
- <img src={Like} alt= "Like"/>
- <h2>O que publicar?</h2>
- </div>
- <img src={Line} alt="Line"/>
- <div class="box-text">
- <p>Conteúdos de cunho educacional e pertinentes ao assunto no qual estão inseridos, de autoria do usuário, de autoria coletiva (com consentimento dos demais autores) ou que estejam no domÃnio público. </p>
- </div>
- </Grid>
- <Grid item xs={6}>
- <div class= "title">
- <img src={Unlike} alt="Unlike"/>
- <h2>O que não publicar?</h2>
- </div>
- <img src={Line} alt="Line"/>
- <div class="box-text">
- <p>Materiais ofensivos, pornográficos, relacionados a atividades ilegais, que invadam a privacidade de terceiros, que violem a legislação de Direito Autoral ou os Direitos Humanos. Propagandas, conteúdos com vÃrus, spam ou comentários abusivos.</p>
- </div>
- </Grid>
- </Grid>
- </div>
- </div>
- </Slide>
- </div>
- <div>
- <Slide>
- <div className="tmpl6">
- <div className="container">
- <Grid container>
- <Grid className="box-text-1" item xs={7}>
- <h3>Direitos do autor e licenças de uso</h3>
- <p>Ao inserir um novo material de sua autoria no Repositório, o usuário deverá escolher um dos tipos de licença aberta disponÃveis na Plataforma:</p>
- <div className="licences">
- <Grid className="row" container>
- <Grid item xs={6}>
- <p>CC-BY</p>
- </Grid>
- <Grid item xs={6}>
- <p>CC-BY-SA</p>
- </Grid>
- </Grid>
- <Grid className="row" container>
- <Grid item xs={6}>
- <p>CC-BY-NC</p>
- </Grid>
- <Grid item xs={6}>
- <p>CC-BY-NC-SA</p>
- </Grid>
- </Grid>
- </div>
- </Grid>
- <Grid className="box-text-2" item xs={5}>
- <Grid className="row" container>
- <Grid item xs={2}>
- <p className="licenses_type">CC-BY</p>
- </Grid>
- <Grid item xs={10}>
- <p> significa que o autor permite que distribuam, remixem, adaptem e criem a partir do seu trabalho, desde que lhe atribuam o devido crédito pela criação original</p>
- </Grid>
- </Grid>
- <Grid className="row" container>
- <Grid item xs={2}>
- <p className="licenses_type">NC</p>
- </Grid>
- <Grid item xs={10}>
- <p> indica que as criações elaboradas a partir do trabalho do autor podem ser utilizadas somente para fins não comerciais (se não houver esta especificação, o novo recurso poderá ser utilizado para fins comerciais)</p>
- </Grid>
- </Grid>
- <Grid className="row" container>
- <Grid item xs={2}>
- <p className="licenses_type">SA</p>
- </Grid>
- <Grid item xs={10}>
- <p> quer dizer que as novas criações devem ser licenciadas sob termos idênticos aos do trabalho original</p>
- </Grid>
- </Grid>
- </Grid>
- </Grid>
- </div>
- </div>
- </Slide>
- </div>
- <div>
- <Slide>
- <div class="tmpl7">
- <div class="container">
- <Grid container>
- <Grid className="title" item xs={4}>
- <h2>Respeitamos<br/> a sua privacidade</h2>
- </Grid>
- <Grid className="box-text" item xs={8}>
- <p>Além de solicitar alguns dados pessoais para o cadastro, a Plataforma coleta, de forma automática, os dados não pessoais relativos à interação dos usuários no sistema. Esses dados nunca serão fornecidos para fins comerciais, assim como nunca serão compartilhados quaisquer dados pessoais que possam identificar o usuário.</p>
- <p>Os dados anônimos poderão ser utilizados para fins de melhoria da plataforma, transparência e para o uso em pesquisas.</p>
- </Grid>
- </Grid>
- <div class="rodape col-md-12">
- <p>Dúvidas? Leia a Ãntegra dos <span ng-click="hide()">Termos de Uso</span> ou fale conosco por meio do <a style={{color: "#fff"}} href="contato">formulário de contato</a>.</p>
- </div>
- </div>
- </div>
- </Slide>
- </div>
- </CarouselStyled>
- )
- }
-}
-
-export default TermsCarousel;
diff --git a/src/Components/Checkbox.js b/src/Components/Checkbox.js
index 3e0be625..6aaa04c7 100644
--- a/src/Components/Checkbox.js
+++ b/src/Components/Checkbox.js
@@ -19,29 +19,54 @@ import React from 'react';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import styled from 'styled-components'
+import { yellow, blue } from "@material-ui/core/colors";
+import { withStyles } from '@material-ui/core/styles';
const StyledFormControlLabel = styled(FormControlLabel)`
font-size : 12px !important;
.label {
font-size : 12px !important;
}
- .MuiCheckbox-colorSecondary.Mui-checked {
- color : #00bcd4 !important;
- }
`
+const ContrastCheckBox = withStyles({
+ root: {
+ color: yellow[400],
+ '&$checked': {
+ color: yellow[600],
+ },
+ },
+ checked: {},
+})((props) => <Checkbox color="default" {...props} />);
+
+const NormalCheckBox = withStyles({
+ root: {
+ color: blue[400],
+ '&$checked': {
+ color: blue[600],
+ },
+ },
+ checked: {},
+})((props) => <Checkbox color="default" {...props} />);
export default function LabeledCheckbox(props) {
return (
- <StyledFormControlLabel
- control={
- <Checkbox
- value = {props.checked}
- onChange = {props.handleChange}
+ <StyledFormControlLabel
+ contrast={props.contrast}
+ control={
+ props.contrast === "" ?
+ <NormalCheckBox
+ value={props.checked}
+ onChange={props.handleChange}
+ />
+ :
+ <ContrastCheckBox
+ value={props.checked}
+ onChange={props.handleChange}
/>
- }
- label={<span style={{ fontSize: '12px' }}>{props.label}</span>}
- />
+ }
+ label={<span style={{ fontSize: '12px' }}>{props.label}</span>}
+ />
);
}
diff --git a/src/Components/CloseModalButton.js b/src/Components/CloseModalButton.js
index 00e8b3c3..186f36f0 100644
--- a/src/Components/CloseModalButton.js
+++ b/src/Components/CloseModalButton.js
@@ -6,7 +6,7 @@ import CloseIcon from '@material-ui/icons/Close';
export default function CloseModalButton (props) {
return (
<StyledCloseModalButton onClick={props.handleClose}>
- <CloseIcon/>
+ <CloseIcon style={props.contrast === "" ? { color: "#666" } : { color: "white" }}/>
</StyledCloseModalButton>
)
}
diff --git a/src/Components/ColCardOwnerOptions.js b/src/Components/ColCardOwnerOptions.js
index a0757806..0d1f9e4b 100644
--- a/src/Components/ColCardOwnerOptions.js
+++ b/src/Components/ColCardOwnerOptions.js
@@ -31,71 +31,71 @@ import ModalExcluirColecao from './ModalExcluirColecao.js'
import ModalEditarColecao from './ModalEditarColecao.js'
export default function ColCardOwnerOptions (props) {
- const [anchorEl, setAnchorEl] = React.useState(null);
-
- function handleClick(event) {
- setAnchorEl(event.currentTarget);
- }
-
- function handleClose() {
- setAnchorEl(null);
- }
-
- const [modalExcluirOpen, toggleModalExcluir] = useState(false)
-
- const [modalEditarOpen, toggleModalEditar] = useState(false)
-
-
- return (
- <>
- <ModalExcluirColecao id={props.id}
- open={modalExcluirOpen} handleClose={() => {toggleModalExcluir(false)}} removeColl={props.removeColl}
- />
- <ModalEditarColecao id={props.id}
- open={modalEditarOpen} handleClose={() => {toggleModalEditar(false)}}
- changeColName={props.changeColName} changeColPrivacy={props.changeColPrivacy}
- />
-
- <div style={{fontSize: "12px"}}>
- <Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{color : "#666"}}>
- OPÇÕES <MoreVertIcon style={{color : "inherit"}}/>
- </Button>
- <Menu
- id="simple-menu"
- anchorEl={anchorEl}
- keepMounted
- open={Boolean(anchorEl)}
- onClose={handleClose}
- >
- <StyledMenuItem>
- <Link to={"/colecao-do-usuario/" + props.id}>
- <ListItemIcon><OpenIcon /></ListItemIcon>Abrir
- </Link>
- </StyledMenuItem>
-
- <StyledMenuItem onClick={() => {toggleModalEditar(true)}}>
- <ListItemIcon><CreateIcon /></ListItemIcon>Editar
- </StyledMenuItem>
-
- <StyledMenuItem onClick={() => {toggleModalExcluir(true)}} >
- <ListItemIcon><DeleteForeverIcon /></ListItemIcon>Excluir
- </StyledMenuItem>
-
-
- </Menu>
- </div>
- </>
- )
+ const [anchorEl, setAnchorEl] = React.useState(null);
+
+ function handleClick(event) {
+ setAnchorEl(event.currentTarget);
+ }
+
+ function handleClose() {
+ setAnchorEl(null);
+ }
+
+ const [modalExcluirOpen, toggleModalExcluir] = useState(false)
+
+ const [modalEditarOpen, toggleModalEditar] = useState(false)
+
+
+ return (
+ <>
+ <ModalExcluirColecao id={props.id}
+ contrast={props.contrast} open={modalExcluirOpen} handleClose={() => {toggleModalExcluir(false)}} removeColl={props.removeColl}
+ />
+ <ModalEditarColecao id={props.id}
+ contrast={props.contrast} open={modalEditarOpen} handleClose={() => {toggleModalEditar(false)}}
+ changeColName={props.changeColName} changeColPrivacy={props.changeColPrivacy}
+ />
+
+ <div style={{fontSize: "12px"}}>
+ <Button className={`${props.contrast}LinkColor`} aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{color : "#666"}}>
+ OPÇÕES <MoreVertIcon className={`${props.contrast}IconColor`}/>
+ </Button>
+ <Menu
+ id="simple-menu"
+ anchorEl={anchorEl}
+ keepMounted
+ open={Boolean(anchorEl)}
+ onClose={handleClose}
+ MenuListProps={{
+ disablePadding: true
+ }}
+ >
+ <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast}>
+ <Link to={"/colecao-do-usuario/" + props.id}>
+ <ListItemIcon className={`${props.contrast}IconColor`}><OpenIcon /></ListItemIcon>Abrir
+ </Link>
+ </StyledMenuItem>
+
+ <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => {toggleModalEditar(true)}}>
+ <ListItemIcon className={`${props.contrast}IconColor`}><CreateIcon /></ListItemIcon>Editar
+ </StyledMenuItem>
+
+ <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => {toggleModalExcluir(true)}} >
+ <ListItemIcon className={`${props.contrast}IconColor`}><DeleteForeverIcon /></ListItemIcon>Excluir
+ </StyledMenuItem>
+ </Menu>
+ </div>
+ </>
+ )
}
export const StyledMenuItem = styled(MenuItem)`
- color : #666 !important;
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
.MuiSvgIcon-root {
vertical-align : middle !important;
}
a {
- text-decoration : none !important;
- color : #666 !important;
+ color : inherit !important;
}
`
diff --git a/src/Components/ColCardPublicOptions.js b/src/Components/ColCardPublicOptions.js
index 2b58c70f..63b4d864 100644
--- a/src/Components/ColCardPublicOptions.js
+++ b/src/Components/ColCardPublicOptions.js
@@ -32,7 +32,7 @@ import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser';
import AddIcon from '@material-ui/icons/Add';
import ExitToAppIcon from '@material-ui/icons/ExitToApp';
-export default function ColCardPublicOptions({ id, userFollowingCol, handleLike, handleFollow, currentUserId, handleLogin, liked }) {
+export default function ColCardPublicOptions({ contrast, id, userFollowingCol, handleLike, handleFollow, currentUserId, handleLogin, liked }) {
const [anchorEl, setAnchorEl] = React.useState(null);
function handleClick(event) {
@@ -49,6 +49,7 @@ export default function ColCardPublicOptions({ id, userFollowingCol, handleLike,
return (
<>
<ReportModal
+ contrast={contrast}
open={reportModalOpen}
handleClose={() => handleReportModal(false)}
form="colecao"
@@ -62,7 +63,7 @@ export default function ColCardPublicOptions({ id, userFollowingCol, handleLike,
onClick={handleClick}
style={{ color: "#666" }}
>
- <MoreVertIcon style={{ color: "inherit" }} />
+ <MoreVertIcon className={`${contrast}IconColor`} style={{ color: "inherit" }} />
</Button>
<Menu
id="simple-menu"
@@ -70,10 +71,13 @@ export default function ColCardPublicOptions({ id, userFollowingCol, handleLike,
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
+ MenuListProps={{
+ disablePadding: true
+ }}
>
- <StyledMenuItem>
+ <StyledMenuItem className={`${contrast}LinkColor ${contrast}Text`} contrast={contrast}>
<Link to={"/colecao-do-usuario/" + id}>
- <ListItemIcon>
+ <ListItemIcon className={`${contrast}IconColor`}>
<OpenIcon />
</ListItemIcon>
Abrir
@@ -81,21 +85,23 @@ export default function ColCardPublicOptions({ id, userFollowingCol, handleLike,
</StyledMenuItem>
<StyledMenuItem
+ className={`${contrast}LinkColor ${contrast}Text`}
+ contrast={contrast}
onClick={() =>
window.open("/colecao-do-usuario/" + id, "_blank")
}
>
- <ListItemIcon>
+ <ListItemIcon className={`${contrast}IconColor ${contrast}Text`}>
<OpenInBrowserIcon />
</ListItemIcon>
Abrir em nova guia
</StyledMenuItem>
- <StyledMenuItem onClick={handleLike}>
- <ListItemIcon>
+ <StyledMenuItem className={`${contrast}LinkColor ${contrast}Text`} contrast={contrast} onClick={handleLike}>
+ <ListItemIcon className={`${contrast}IconColor`}>
{
liked ?
- <FavoriteIcon style={{ fill: 'red' }} /> : <FavoriteIcon style={{ fill: '#666' }} />
+ <FavoriteIcon /> : <FavoriteIcon />
}
</ListItemIcon>
{
@@ -104,8 +110,8 @@ export default function ColCardPublicOptions({ id, userFollowingCol, handleLike,
}
</StyledMenuItem>
- <StyledMenuItem onClick={handleFollow}>
- <ListItemIcon>
+ <StyledMenuItem className={`${contrast}LinkColor ${contrast}Text`} contrast={contrast} onClick={handleFollow}>
+ <ListItemIcon className={`${contrast}IconColor`}>
{
userFollowingCol ?
<ExitToAppIcon /> : <AddIcon />
@@ -118,6 +124,8 @@ export default function ColCardPublicOptions({ id, userFollowingCol, handleLike,
</StyledMenuItem>
<StyledMenuItem
+ className={`${contrast}LinkColor ${contrast}Text`}
+ contrast={contrast}
onClick={() => {
if (currentUserId)
handleReportModal(true);
@@ -125,7 +133,7 @@ export default function ColCardPublicOptions({ id, userFollowingCol, handleLike,
handleLogin()
}}
>
- <ListItemIcon>
+ <ListItemIcon className={`${contrast}IconColor`}>
<ReportProblemIcon />
</ListItemIcon>
Reportar
@@ -137,13 +145,11 @@ export default function ColCardPublicOptions({ id, userFollowingCol, handleLike,
}
export const StyledMenuItem = styled(MenuItem)`
- color: #666 !important;
-
- .MuiSvgIcon-root {
- vertical-align: middle !important;
- }
- a {
- text-decoration: none !important;
- color: #666 !important;
- }
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ .MuiSvgIcon-root {
+ vertical-align: middle !important;
+ }
+ a {
+ color: inherit !important;
+ }
`;
diff --git a/src/Components/CollectionAuthor.js b/src/Components/CollectionAuthor.js
index c6c299cf..3d5c4231 100644
--- a/src/Components/CollectionAuthor.js
+++ b/src/Components/CollectionAuthor.js
@@ -30,19 +30,20 @@ export default function CollectionAuthor(props) {
justify="center"
alignItems="center">
{props.imgsrc ?
- <UserLink
+ <Link
to={`/usuario-publico/${props.author_id}`}
+ contrast={props.contrast}
>
<UserAvatar src={props.imgsrc} />
- </UserLink>
+ </Link>
:
<CircularProgress color="secondary" />
}
- <InfoText>Coleção organizada por:</InfoText>
+ <InfoText contrast={props.contrast}>Coleção organizada por:</InfoText>
{props.name ?
- <UserLink to={`/usuario-publico/${props.author_id}`} >
- <UserName>{props.name}</UserName>
- </UserLink>
+ <Link to={`/usuario-publico/${props.author_id}`} contrast={props.contrast}>
+ <UserName contrast={props.contrast}>{props.name}</UserName>
+ </Link>
:
<CircularProgress />
}
@@ -58,15 +59,10 @@ const UserAvatar = styled.img`
const InfoText = styled.p`
margin-bottom: 0;
padding-bottom: 0;
- color: #666;
+ color: ${props => props.contrast === "" ? "#666 !important" : "white !important"};
`
const UserName = styled.h2`
margin-top: 10px;
- color: #673ab7;
-`
-const UserLink = styled(Link)`
- text-decoration: none;
- &:focus, &:hover, &:visited, &:link, &:active {
- text-decoration: none;
- }
+ color: ${props => props.contrast === "" ? "#673ab7 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"};
`
diff --git a/src/Components/CollectionCardFunction.js b/src/Components/CollectionCardFunction.js
index 743387e0..632c522d 100644
--- a/src/Components/CollectionCardFunction.js
+++ b/src/Components/CollectionCardFunction.js
@@ -43,179 +43,115 @@ import SnackBar from './SnackbarComponent';
import { noAvatar } from "ImportImages.js";
export default function CollectionCardFunction(props) {
- const { state } = useContext(Store)
-
- // eslint-disable-next-line
- const [userAvatar] = useState(props.avatar ? (`${apiDomain}` + props.avatar) : noAvatar)
- const [userFollowingCol, toggleUserFollowingCol] = useState(props.followed)
- const handleToggleUserFollowingCol = () => { toggleUserFollowingCol(!userFollowingCol) }
-
- const [name, setName] = useState(props.name)
- const changeColName = (newName) => { setName(newName) }
-
- const [privacy, setPrivacy] = useState(props.privacy)
- const changeColPrivacy = (newPrivacy) => { setPrivacy(newPrivacy) }
-
- const [likesCount, setLikesCount] = useState(props.likeCount)
- const [liked, toggleLiked] = useState(props.liked)
-
- const [signUpOpen, setSignUp] = useState(false)
- const [loginOpen, setLogin] = useState(false)
- const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
-
-
- function handleSuccessLike(data) {
- toggleLiked(!liked)
- setLikesCount(data.count)
- }
- const handleLike = () => {
- if (state.currentUser.id)
- putRequest(`/collections/${props.id}/like`, {}, handleSuccessLike, (error) => { console.log(error) })
- else
- handleLogin()
- }
-
- const [followingHover, handleFollowingHover] = useState(false)
- const toggleFollowingHover = (value) => { handleFollowingHover(value) }
-
- const [slideIn, setSlide] = useState(false)
- const controlSlide = () => { setSlide(!slideIn) }
-
- function handleSuccessFollow(data) {
- handleToggleUserFollowingCol()
- }
- const handleFollow = () => {
- if (state.currentUser.id)
- putRequest(`/collections/${props.id}/follow`, {}, handleSuccessFollow, (error) => { console.log(error) })
- else
- handleLogin()
- }
-
- const RenderFollowButton = () => {
- return (
- <FollowButton onClick={handleFollow}>
- <AddIcon /><span>SEGUIR</span>
- </FollowButton>
- )
- }
+ const { state } = useContext(Store)
+
+ // eslint-disable-next-line
+ const [userAvatar] = useState(props.avatar ? (`${apiDomain}` + props.avatar) : noAvatar)
+ const [userFollowingCol, toggleUserFollowingCol] = useState(props.followed)
+ const handleToggleUserFollowingCol = () => { toggleUserFollowingCol(!userFollowingCol) }
+
+ const [name, setName] = useState(props.name)
+ const changeColName = (newName) => { setName(newName) }
+
+ const [privacy, setPrivacy] = useState(props.privacy)
+ const changeColPrivacy = (newPrivacy) => { setPrivacy(newPrivacy) }
- useEffect(() => {
- if (!state.currentUser.id) {
- toggleLiked(false);
- toggleUserFollowingCol(false);
+ const [likesCount, setLikesCount] = useState(props.likeCount)
+ const [liked, toggleLiked] = useState(props.liked)
+
+ const [signUpOpen, setSignUp] = useState(false)
+ const [loginOpen, setLogin] = useState(false)
+ const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
+
+
+ function handleSuccessLike(data) {
+ toggleLiked(!liked)
+ setLikesCount(data.count)
+ }
+ const handleLike = () => {
+ if (state.currentUser.id)
+ putRequest(`/collections/${props.id}/like`, {}, handleSuccessLike, (error) => { console.log(error) })
+ else
+ handleLogin()
}
- }, [state.currentUser.id])
- const RenderFollowingButton = () => {
- return (
- <FollowingButton onMouseOver={() => toggleFollowingHover(true)}
- onMouseLeave={() => toggleFollowingHover(false)} onClick={handleFollow}>
- {
- followingHover ?
- (
- [
- <span>DEIXAR DE SEGUIR</span>
- ]
- )
- :
- (
- [
- <React.Fragment>
- <CheckIcon /><span>SEGUINDO</span>
- </React.Fragment>
- ]
- )
- }
- </FollowingButton>
- )
- }
+ const [followingHover, handleFollowingHover] = useState(false)
+ const toggleFollowingHover = (value) => { handleFollowingHover(value) }
- const SlideAnimationContent = () => {
- return (
- <SlideContentDiv>
- <HeaderContainer container="row" justify="flex-start" alignItems="center">
- <AvatarDiv item xs={2}>
- <img className="img" src={userAvatar} alt="user avatar" />
- </AvatarDiv>
- <EnviadoPor item xs={10}>
- Enviado por:
- <br />
- <p>{props.author}</p>
- </EnviadoPor>
- </HeaderContainer>
- {
- props.tags ?
- <TagContainer container direction="row">
- {
- props.tags.map((tag) =>
- <Grid item key={tag.id}>
- <span >{tag.name}</span>
- </Grid>
- )
- }
- </TagContainer> :
- null
- }
- </SlideContentDiv>
- )
- }
+ const [slideIn, setSlide] = useState(false)
+ const controlSlide = () => { setSlide(!slideIn) }
- const handleSignUp = () => {
- setSignUp(!signUpOpen)
- }
+ function handleSuccessFollow(data) {
+ handleToggleUserFollowingCol()
+ }
+ const handleFollow = () => {
+ if (state.currentUser.id)
+ putRequest(`/collections/${props.id}/follow`, {}, handleSuccessFollow, (error) => { console.log(error) })
+ else
+ handleLogin()
+ }
- const handleLogin = () => {
- setLogin(!loginOpen)
- }
+ const RenderFollowButton = () => {
+ return (
+ <FollowButton className={`${props.contrast}LinkColor`} style={props.contrast === "" ? {border: "2px solid #503096", borderRadius : "5px", color :"#503096" } : {border: "1px solid white", borderRadius : "5px", color :"#503096"}} onClick={handleFollow}>
+ <AddIcon className={`${props.contrast}IconColor`}/><span>SEGUIR</span>
+ </FollowButton>
+ )
+ }
- function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
- }
+ useEffect(() => {
+ if (!state.currentUser.id) {
+ toggleLiked(false);
+ toggleUserFollowingCol(false);
+ }
+ }, [state.currentUser.id])
- function toggleLoginSnackbar(reason) {
- if (reason === 'clickaway') {
- return;
+ const RenderFollowingButton = () => {
+ return (
+ <FollowingButton className={`${props.contrast}LinkColor`} style={props.contrast === "" ? {border: "2px solid #503096", borderRadius : "5px", color :"#fff", backgroundColor : "#503096" } : {border: "1px solid white", borderRadius : "5px", color :"#503096"}}onMouseOver={() => toggleFollowingHover(true)}
+ onMouseLeave={() => toggleFollowingHover(false)} onClick={handleFollow}>
+ {
+ followingHover ?
+ (
+ [
+ <span>DEIXAR DE SEGUIR</span>
+ ]
+ )
+ :
+ (
+ [
+ <React.Fragment>
+ <CheckIcon className={`${props.contrast}IconColor`}/><span>SEGUINDO</span>
+ </React.Fragment>
+ ]
+ )
+ }
+ </FollowingButton>
+ )
}
- handleSuccessfulLogin(false);
- }
-
- return (
- <>
- <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}
- />
- <LoginModal 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>
- <StyledCard>
- <CardDiv>
- <CardReaDiv>
- <Link to={"/colecao-do-usuario/" + props.id}>
- <Header onMouseEnter={controlSlide} onMouseLeave={controlSlide}>
- <div className={`slideContentLinkBeforeActive${slideIn}`} style={{ width: '272.5px', height: '230px' }}>
- <UserInfo style={{ width: '272.5px'}}>
- {/* I(Luis) dont know why, but if i use styled components, sometimes the avatar will be deconfigured */}
- <img src={userAvatar} alt="user avatar" style={{
- height: "70px", width: "70px", borderRadius: "50%",
- zIndex: 1, border: "2px solid white",
- boxShadow: "0 1px 3px rgba(0,0,0,.45)"
- }} />
- <UserAndTitle>
- <span>{props.author}</span>
- <span className={"col-name"}>{name}</span>
- </UserAndTitle>
- </UserInfo>
- <StyledGrid container direction="row" style={{ width: '272.5px' }}>
+
+ const SlideAnimationContent = (contrast) => {
+ return (
+ <SlideContentDiv style={contrast === '' ? {backgroundColor: "#7e57c2"} : {backgroundColor: "inherit"}}>
+ <HeaderContainer container="row" justify="flex-start" alignItems="center">
+ <AvatarDiv item xs={2}>
+ <img className="img" src={userAvatar} alt="user avatar" />
+ </AvatarDiv>
+ <EnviadoPor item xs={10}>
+ Enviado por:
+ <br />
+ <p>{props.author}</p>
+ </EnviadoPor>
+ </HeaderContainer>
+ {
+ props.tags ?
+ <TagContainer container direction="row">
{
- props.thumbnails.map((thumb) =>
- <Grid item xs={props.thumbnails.length <= 3 && props.thumbnails.length > 0 ? 12 / props.thumbnails.length : 6}>
- <div style={{ backgroundImage: `url(${`${apiDomain}` + thumb})`, height: `${props.thumbnails.length <= 3 ? '230px' : '100%'}`, width: "100%", backgroundSize: "cover", backgroundPosition: "center" }} />
+ props.tags.map((tag) =>
+ <Grid item key={tag.id}>
+ <span className={`${props.contrast}BackColor ${props.contrast}Text`}>{tag.name}</span>
</Grid>
- )
+ )
}
</TagContainer> :
null
@@ -321,106 +257,75 @@ export default function CollectionCardFunction(props) {
</CardReaDiv>
{
- <div className={`slideContentLinkAfterActive${slideIn}`} style={{ width: '272.5px', height: '230px' }}>
- <div className="text" >
- {SlideAnimationContent()}
- </div>
- </div>
+ props.authorID === state.currentUser.id ?
+ (
+ <CardReaFooter className={`${props.contrast}BackColor`} style={{ justifyContent: "space-between" }}> {/*renders following/unfollow and follow button*/}
+ <Grid container>
+ <Grid item xs={6} style={{ display: "flex", justifyContent: "center" }}>
+ {
+ privacy === 'private' &&
+ <LockIcon className={`${props.contrast}IconColor`} />
+ }
+ </Grid>
+ <Grid item xs={6} style={{ display: "flex", justifyContent: "flex-end" }}>
+ <ColCardOwnerOptions
+ contrast={props.contrast}
+ id={props.id}
+ changeColName={changeColName}
+ changeColPrivacy={changeColPrivacy}
+ removeColl={props.removeColl}
+ />
+ </Grid>
+ </Grid>
+ </CardReaFooter>
+ )
+ :
+ (
+ <CardReaFooter className={`${props.contrast}BackColor`}> {/*renders following/unfollow and follow button*/}
+ <Grid container>
+ <Grid item xs={2}></Grid>
+ <Grid item xs={8} style={{ display: "flex", justifyContent: "center" }}>
+ {
+ userFollowingCol ?
+ (
+ [
+ RenderFollowingButton()
+ ]
+ )
+ :
+ (
+ [
+ RenderFollowButton()
+ ]
+ )
+ }
+ </Grid>
+ <Grid item xs={2} style={{ display: "flex", justifyContent: "flex-end" }}>
+ <ColCardPublicOptions
+ contrast={props.contrast}
+ id={props.id}
+ userFollowingCol={userFollowingCol}
+ handleLike={handleLike}
+ handleFollow={handleFollow}
+ liked={liked}
+ handleLogin={handleLogin}
+ currentUserId={state.currentUser.id}
+ />
+ </Grid>
+ </Grid>
+ </CardReaFooter>
+ )
}
- </Header>
- </Link>
-
- <Description> {/*renders rating, number of learning objects and likes count*/}
- {
- props.authorID !== state.currentUser.id &&
- <Rating
- name="customized-empty"
- value={props.rating}
- readOnly
- style={{ color: "#666" }}
- emptyIcon={<StarBorderIcon fontSize="inherit" />}
- />
- }
-
- <Footer>
- <Type>
- <FolderIcon />
- <span style={{ fontWeight: "bold" }}>{props.collections ? props.collections.length : 0} </span>
- <span>{props.collections ? props.collections.length !== 1 ? "Recursos" : "Recurso" : 0}</span>
- </Type>
- <LikeCounter>
- <span>{likesCount}</span>
- <ButtonNoWidth onClick={handleLike}>
- <FavoriteIcon style={{ color: liked ? "red" : "#666" }} />
- </ButtonNoWidth>
- </LikeCounter>
- </Footer>
- </Description>
-
- </CardReaDiv>
-
- {
- props.authorID === state.currentUser.id ?
- (
- <CardReaFooter style={{ justifyContent: "space-between" }}> {/*renders following/unfollow and follow button*/}
- <Grid container>
- <Grid item xs={6} style={{ display: "flex", justifyContent: "center" }}>
- {
- privacy === 'private' &&
- <LockIcon style={{ color: "#666" }} />
- }
- </Grid>
- <Grid item xs={6} style={{ display: "flex", justifyContent: "flex-end" }}>
- <ColCardOwnerOptions
- id={props.id}
- changeColName={changeColName}
- changeColPrivacy={changeColPrivacy}
- removeColl={props.removeColl}
- />
- </Grid>
- </Grid>
- </CardReaFooter>
- )
- :
- (
- <CardReaFooter> {/*renders following/unfollow and follow button*/}
- {
- userFollowingCol ?
- (
- [
- RenderFollowingButton()
- ]
- )
- :
- (
- [
- RenderFollowButton()
- ]
- )
- }
- <ColCardPublicOptions
- id={props.id}
- userFollowingCol={userFollowingCol}
- handleLike={handleLike}
- handleFollow={handleFollow}
- liked={liked}
- handleLogin={handleLogin}
- currentUserId={state.currentUser.id}
- />
- </CardReaFooter>
- )
- }
-
- </CardDiv>
- </StyledCard>
- </>
- )
+
+ </CardDiv>
+ </StyledCard>
+ </>
+ )
}
const SlideContentDiv = styled.div`
- background-color : #7e57c2;
padding : 10px;
width : 272.5px;
height : 230px;
@@ -470,7 +375,6 @@ const CardReaFooter = styled.div`
display : flex;
justify-content : center;
align-items : center;
- border-top : 1px solid #e5e5e5;
.MuiSvgIcon-root {
font-family: 'Material Icons';
@@ -505,8 +409,6 @@ const StyledGrid = styled(Grid)`
height : 136px;
width 130px;
background : #f9f9f9;
- border : 1px solid #f4f4f4;
- border-color : #f4f4f4;
}
`
@@ -526,12 +428,6 @@ const Description = styled.div`
padding : 15px;
`
const FollowButton = styled(Button)`
- border : 2px solid #503096 !important;
- border-radius : 5px !important;
- margin : 10px !important;
- color :#503096 !important;
- min-width : 150px !important;
- min-height : 36px !important;
text-align : center !important;
vertical-align : middle !important;
background : transparent !important;
@@ -544,22 +440,11 @@ const FollowButton = styled(Button)`
white-space : nowrap !important;
font-weight: 500;
- &:hover {
- background-color : rgba(158,158,158,0.2) !important;
-
- }
-
`
const FollowingButton = styled(Button)`
- border : 2px solid #503096 !important;
- border-radius : 5px !important;
- margin : 10px !important;
- color :#fff !important;
- min-width : 150px !important;
- min-height : 36px !important;
text-align : center !important;
vertical-align : middle !important;
- background-color : #503096 !important;
+
text-transform : uppercase !important;
font-family : inherit !important;
overflow : hidden !important;
@@ -569,10 +454,4 @@ const FollowingButton = styled(Button)`
white-space : nowrap !important;
font-weight: 500;
- &:hover {
- background-color : rgba(158,158,158,0.2) !important;
- color : #503096 !important;
- box-shadow : none !important;
- }
-
`
\ No newline at end of file
diff --git a/src/Components/CollectionCommentSection.js b/src/Components/CollectionCommentSection.js
index c0aae8b6..8acd3a54 100644
--- a/src/Components/CollectionCommentSection.js
+++ b/src/Components/CollectionCommentSection.js
@@ -20,7 +20,6 @@ import React, { useRef, useState, useEffect, Fragment } from 'react';
import { Grid } from '@material-ui/core';
import Card from '@material-ui/core/Card';
import Button from '@material-ui/core/Button';
-import EditIcon from '@material-ui/icons/Edit';
import styled from 'styled-components';
import CommentForm from './ResourcePageComponents/CommentForm.js';
import Comment from './Comment.js';
@@ -40,7 +39,7 @@ import { Comentarios } from "ImportImages.js";
export default function CollectionCommentSection(props) {
const [post_snack_open, setPostSnackOpen] = useState(false);
const [delete_snack_open, setDeleteSnackOpen] = useState(false);
- const [render_state, setRenderState] = useState(false);
+ const [render_state, setRenderState] = useState(0);
const [sign_up_open, setSignUpOpen] = useState(false);
const [log_in_open, setLoginOpen] = useState(false);
const [is_loading, setIsLoading] = useState(false);
@@ -55,7 +54,7 @@ export default function CollectionCommentSection(props) {
const [currPageReviews, setCurrPageReviews] = useState(0);
const comment_ref = useRef(null);
- const forceUpdate = () => { setRenderState(!render_state); }
+ const forceUpdate = () => { setCurrPageReviews(0); setRenderState(render_state + 1); }
const handlePostSnackbar = () => {
setPostSnackOpen(!post_snack_open);
@@ -65,10 +64,6 @@ export default function CollectionCommentSection(props) {
setDeleteSnackOpen(!delete_snack_open);
}
- const handleScrollToCommentForm = () => {
- window.scrollTo(0, comment_ref.current.offsetTop);
- }
-
function handleOpenSnackSignIn() {
const info = {
open: true,
@@ -113,47 +108,37 @@ export default function CollectionCommentSection(props) {
}
}
- const NoCommentsMessage = () => {
+ const NoCommentsMessage = (contrast) => {
const NoCommentsContainer = styled.div`
text-align: center;
margin-left: 9vw;
margin-right: 9vw;
`
const BlueTitle = styled.h2`
- color: #673ab7;
+ color: ${props => props.contrast === "" ? "#673ab7" : "white"};
`
const Secondary = styled.h3`
font-weight: 100;
- `
- const ButtonText = styled.span`
- font-weight: 900;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
`
const Image = styled.img`
`
return (
<NoCommentsContainer>
<Image src={Comentarios} style={{ width: "100%", maxWidth: 234 }} />
- <BlueTitle>Compartilhe sua opinião com a rede!</BlueTitle>
- <Secondary>Gostou desta coleção? Comente e compartilhe com a rede sua opinião. Interagindo com a rede, você contribui para que mais coleções como esta sejam criadas.</Secondary>
- <Button
- variant="contained"
- color="primary"
- startIcon={<EditIcon />}
- onClick={handleScrollToCommentForm}
- >
- <ButtonText>Relatar experiência</ButtonText>
- </Button>
+ <BlueTitle contrast={contrast}>Compartilhe sua opinião com a rede!</BlueTitle>
+ <Secondary contrast={contrast}>Gostou desta coleção? Comente e compartilhe com a rede sua opinião. Interagindo com a rede, você contribui para que mais coleções como esta sejam criadas.</Secondary>
</NoCommentsContainer>
);
}
- const CollectionComments = () => {
+ const CollectionComments = (contrast) => {
return (
- <ComentariosBox>
- <h3>{totalReviews} {totalReviews !== 1 ? 'Relatos' : 'Relato'} sobre o uso do Recurso</h3>
+ <ComentariosBox contrast={contrast}>
{reviews.map(r => {
return (
<div className="comentario-template" key={r.created_at}>
<Comment
+ contrast={contrast}
isCollection={false}
rerenderCallback={forceUpdate}
objectID={props.id}
@@ -182,7 +167,10 @@ export default function CollectionCommentSection(props) {
}
function handleSuccessGet(data, headers) {
- setReviews((previousState) => previousState.concat(data));
+ if (currPageReviews !== 0)
+ setReviews((previousState) => previousState.concat(data));
+ else
+ setReviews(data);
if (headers.has('X-Total-Count'))
setTotalReviews(headers.get('X-Total-Count'))
setIsLoading(false);
@@ -211,22 +199,24 @@ export default function CollectionCommentSection(props) {
color={snackInfo.color}
/>
<SignUpModal
+ contrast={props.contrast}
open={sign_up_open}
handleClose={() => setSignUpOpen(false)}
openLogin={() => setLoginOpen(true)}
/>
<LoginModal
+ contrast={props.contrast}
openSnackbar={handleOpenSnackSignIn}
open={log_in_open}
handleClose={() => setLoginOpen(false)}
openSignUp={handleOpenSignUp}
/>
<Grid item xs={12} ref={comment_ref}>
- <CommentAreaCard>
+ <CommentAreaCard contrast={props.contrast}>
{
props.currentUserId ?
<Fragment>
- <Title>Conte sua experiência com a coleção</Title>
+ <Title contrast={props.contrast}>Conte sua experiência com a coleção</Title>
<Grid container style={{ paddingTop: "20px" }} spacing={1}>
<Grid item xs={12} sm={2} style={{ paddingLeft: "15px", paddingRight: "15px" }}>
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
@@ -235,6 +225,7 @@ export default function CollectionCommentSection(props) {
</Grid>
<Grid item xs={12} sm={10}>
<CommentForm
+ contrast={props.contrast}
colecao
recursoId={props.id}
handleSnackbar={handlePostSnackbar}
@@ -245,11 +236,11 @@ export default function CollectionCommentSection(props) {
</Fragment>
:
<Grid item xs={12}>
- <LogInToComment>
+ <LogInToComment contrast={props.contrast}>
<span className="span-purple">Você precisa entrar para comentar</span>
- <Button onClick={() => setSignUpOpen(true)} style={{ textTransform: "uppercase", color: "#666", fontWeight: "700" }}>
+ <Button onClick={() => setSignUpOpen(true)} style={props.contrast === "" ? { textTransform: "uppercase", color: "#666", fontWeight: "700" } : { textTransform: "uppercase", color: "yellow", fontWeight: "700", textDecoration: "underline" }}>
<ExitToAppIcon />ENTRAR
- </Button>
+ </Button>
</LogInToComment>
</Grid>
}
@@ -259,7 +250,7 @@ export default function CollectionCommentSection(props) {
<CircularProgress className="loading" />
</LoadingDiv>
:
- reviews.length ? CollectionComments() : NoCommentsMessage()
+ reviews.length ? CollectionComments(props.contrast) : NoCommentsMessage(props.contrast)
}
</CommentAreaCard>
</Grid>
@@ -289,7 +280,7 @@ const ComentariosBox = styled.div`
font-family: 'Roboto Light','Roboto Regular',Roboto;
font-weight: 300;
font-style: normal;
- color:#666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
font-size: 1.857em;
margin: 15px 2%;
text-align : flex-start;
@@ -301,17 +292,17 @@ const ComentariosBox = styled.div`
border-bottom : 1px solid #f4f4f4;
}
- .load-more{
- width: 100%;
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- }
-
- .button{
- box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
- }
+ .load-more{
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .button{
+ box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+ }
`
const Avatar = styled.img`
@@ -344,7 +335,7 @@ const LogInToComment = styled.div`
font-size : 24px;
font-weight : 700;
padding-bottom : 5px;
- color : #673ab7;
+ color: ${props => props.contrast === "" ? "#673ab7" : "white"};
}
img {
@@ -355,12 +346,15 @@ const LogInToComment = styled.div`
const CommentAreaContainer = styled(Grid)`
padding: 10px;
+ background: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
`
const CommentAreaCard = styled(Card)`
padding: 45px;
+ background: ${props => props.contrast === "" ? "#f4f4f4" : "black !important"};
+ border: ${props => props.contrast === "" ? "" : "1px solid white !important"};
`
const Title = styled.h1`
text-align: center;
font-weight: 100;
- color: #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
`
diff --git a/src/Components/CollectionDescription.js b/src/Components/CollectionDescription.js
index 60de747f..a8eedcbc 100644
--- a/src/Components/CollectionDescription.js
+++ b/src/Components/CollectionDescription.js
@@ -43,7 +43,9 @@ export default function CollectionDescription(props) {
}, [props.collection_id]);
return (
- <Grid container direction="column" justify="center" alignItems="center" spacing={5}>
+ <Grid container direction="column" justify="center" alignItems="center" spacing={5}
+ style={props.contrast === "" ? {color: "#666"} : {color: "white"}}
+ >
<Grid
item
justify="center"
@@ -59,6 +61,7 @@ export default function CollectionDescription(props) {
>
<Grid item>
<CollectionReview
+ contrast={props.contrast}
stars={props.stars}
liked={props.liked}
likes={props.likes}
@@ -92,6 +95,5 @@ export default function CollectionDescription(props) {
const Title = styled.h1`
font-size: 2.5em;
- color: rgb(102, 102, 102);
text-align: center
`
\ No newline at end of file
diff --git a/src/Components/CollectionDowloadButton.js b/src/Components/CollectionDowloadButton.js
index 950e8f6f..ed934968 100644
--- a/src/Components/CollectionDowloadButton.js
+++ b/src/Components/CollectionDowloadButton.js
@@ -88,6 +88,7 @@ const DowloadButton = (props) => {
text={snackInfo.text}
/>
<DownloadButton
+ contrast={props.contrast}
variant="outlined"
color="primary"
startIcon={<GetAppIcon fontSize="large" />}
@@ -105,6 +106,10 @@ const ButtonText = styled.span`
font-size: 1.2em;
`
const DownloadButton = styled(Button)`
+ color: ${props => props.contrast === "" ? "#3f51b5 !important" : "yellow !important"};
+ background-color: ${props => props.contrast === "" ? "white !important" : "black !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
+ border: ${props => props.contrast === "" ? "1px solid #3f51b5 !important" : "1px solid white !important"};
padding-left: 10;
padding-right: 10;
width: 250px;
diff --git a/src/Components/CollectionReview.js b/src/Components/CollectionReview.js
index 0d94757b..bd35d031 100644
--- a/src/Components/CollectionReview.js
+++ b/src/Components/CollectionReview.js
@@ -107,7 +107,7 @@ export default function CollectionReview(props) {
}, [props])
return (
- <Grid container direction="column">
+ <Grid container direction="column" style={props.contrast === "" ? {color: "#666"} : {color: "white"}}>
<SnackBarComponent
snackbarOpen={snackInfo.open}
handleClose={handleCloseSnack}
@@ -115,31 +115,34 @@ export default function CollectionReview(props) {
text={snackInfo.text}
color={snackInfo.color}
/>
- <Grid sm={12} container direction="row" alignItems="center">
+ <Grid sm={12} container direction="row" alignItems="center"
+ style={{justifyContent: "center"}}
+ >
<Grid item>
<Rating
+ style={props.contrast === "" ? {} : {color: "white"}}
name="customized-empty"
value={Number(stars)}
readOnly
onClick={props.scrollToComment}
- style={{ color: "#666" }}
- emptyIcon={<StarBorderIcon fontSize="inherit" />}
+ emptyIcon={<StarBorderIcon className={`${props.contrast}Text`} fontSize="inherit" />}
/>
</Grid>
<Grid item justify="center" alignItems="center">
- <IconButton aria-label="like" onClick={handleLikeClick}>
- {likes}<FavoriteIcon style={{ fill: liked ? "red" : null }} />
+ <IconButton style={{color: "inherit"}} aria-label="like" onClick={handleLikeClick}>
+ {likes}<FavoriteIcon style={props.contrast === "" ? {fill: liked ? "red" : null} : {fill: "yellow"}} />
</IconButton>
</Grid>
</Grid>
<Grid item sm={12}>
<IconButton
aria-label="report"
- style={{ fontSize: 'small' }}
+ style={{ fontSize: 'medium' }}
onClick={handleClickReport}>
- <InfoIcon />Reportar erro ou abuso
+ <InfoIcon style={props.contrast === "" ? {color: "#666"} : {color: "white"}}/><span style={props.contrast === "" ? {color: "#666"} : {color: "yellow", textDecoration: "underline"}}>Reportar erro ou abuso</span>
</IconButton>
<ReportModal
+ contrast={props.contrast}
open={reportOpen}
handleClose={handleCloseModal}
form="colecao"
@@ -148,11 +151,13 @@ export default function CollectionReview(props) {
/>
</Grid>
<SignUpModal
+ contrast={props.contrast}
open={sign_up_open}
handleClose={() => setSignUpOpen(false)}
openLogin={() => setLoginOpen(true)}
/>
<LoginModal
+ contrast={props.contrast}
openSnackbar={handleOpenSnackSignIn}
open={log_in_open}
handleClose={() => setLoginOpen(false)}
diff --git a/src/Components/Comment.js b/src/Components/Comment.js
index b3e1df7a..f6ca3f2c 100644
--- a/src/Components/Comment.js
+++ b/src/Components/Comment.js
@@ -27,296 +27,425 @@ import Rating from '@material-ui/lab/Rating';
import StarBorderIcon from '@material-ui/icons/StarBorder';
import EditIcon from '@material-ui/icons/Edit';
import TextField from "@material-ui/core/TextField";
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
-import ModalExcluir from './ModalExcluirComentario.js'
-import { putRequest, deleteRequest } from './HelperFunctions/getAxiosConfig'
-
+import Menu from "@material-ui/core/Menu";
+import MenuItem from "@material-ui/core/MenuItem";
+import ModalExcluir from "./ModalExcluirComentario.js";
+import { putRequest, deleteRequest } from "./HelperFunctions/getAxiosConfig";
+import { makeStyles } from "@material-ui/styles";
//Image Import
import { noAvatar } from "ImportImages.js";
+const useStyles = makeStyles((theme) => ({
+ darkTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "white",
+ width: "100%",
+ },
+ lightTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "black",
+ width: "100%",
+ },
+}));
+
+
export default function Comment(props) {
- console.log(props)
- /*
- Required props:
- rerenderCallback = callback function to trigger re-render on parent component
- reviewRatings = required to update comment even though the user cannot update their rating score...
- objectID = collection/learning object id
- reviewID = self-explanatory I hope
- authorID = author id; links to public user page
- authorAvatar = either a string denoting the author's avatar file location or null
- rating = star rating
- name = title (?)
- authorName = author username
- description = the user comment itself
- createdAt
- recurso : boolean; determines whether to display orange or purple font
- */
- var moment = require('moment')
-
- const { state } = useContext(Store)
- const [displayedComment, setDisplayedComment] = useState(props.description)
- const [editando, setEditando] = useState(false)
+ var moment = require("moment");
+ const classes = useStyles();
+ const { state } = useContext(Store);
+ const [displayedComment, setDisplayedComment] = useState(props.description);
+ const [editando, setEditando] = useState(false);
const [anchorEl, setAnchorEl] = React.useState(null);
+
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
- const [modalOpen, toggleModal] = useState(false)
+ const [modalOpen, toggleModal] = useState(false);
const [comment, setComment] = useState({
error: false,
- value: props.description
- })
+ value: props.description,
+ });
const handleChange = (e) => {
- const userInput = e.target.value
- const flag = (userInput.length === 0 ? true : false);
- setComment({ ...comment, error: flag, value: userInput })
- }
+ const userInput = e.target.value;
+ const flag = userInput.length === 0 ? true : false;
+ setComment({ ...comment, error: flag, value: userInput });
+ };
function handleOnSuccessfulComment(data) {
- setDisplayedComment(comment.value)
- setEditando(false)
- props.handlePost()
+ setDisplayedComment(comment.value);
+ setEditando(false);
+ props.handlePost();
}
const updateComment = () => {
- const finalComment = comment
+ const finalComment = comment;
let url;
if (props.isCollection)
- url = `/collections/${props.objectID}/reviews/${props.reviewID}`
- else
- url = `/learning_objects/${props.objectID}/reviews/${props.reviewID}`
+ url = `/collections/${props.objectID}/reviews/${props.reviewID}`;
+ else url = `/learning_objects/${props.objectID}/reviews/${props.reviewID}`;
if (!finalComment.error) {
-
let payload = {
- "review": {
- "description": finalComment.value,
- "review_ratings_attributes": props.reviewRatings
- }
- }
- putRequest(url, payload, handleOnSuccessfulComment, (error) => { console.log(error) })
-
+ review: {
+ description: finalComment.value,
+ review_ratings_attributes: props.reviewRatings,
+ },
+ };
+ putRequest(url, payload, handleOnSuccessfulComment, (error) => {
+ console.log(error);
+ });
}
- }
+ };
function handleSuccessDeleteComment(data) {
- props.rerenderCallback()
- props.handleSnackbar(3)
+ props.rerenderCallback();
+ props.handleSnackbar(3);
}
const deleteComment = () => {
let url;
if (props.isCollection)
- url = `/collections/${props.objectID}/reviews/${props.reviewID}`
- else
- url = `/learning_objects/${props.objectID}/reviews/${props.reviewID}`
+ url = `/collections/${props.objectID}/reviews/${props.reviewID}`;
+ else url = `/learning_objects/${props.objectID}/reviews/${props.reviewID}`;
- deleteRequest(url, handleSuccessDeleteComment, (error) => { console.log(error) })
+ deleteRequest(url, handleSuccessDeleteComment, (error) => {
+ console.log(error);
+ });
- toggleModal(false)
+ toggleModal(false);
+ };
- }
if (props.authorID)
return (
<React.Fragment>
<ModalExcluir
- open={modalOpen} handleClose={() => { toggleModal(false) }}
+ contrast={state.contrast}
+ open={modalOpen}
+ handleClose={() => {
+ toggleModal(false);
+ }}
handleConfirm={deleteComment}
/>
<Grid container style={{ paddingLeft: "20px" }}>
-
<Grid item xs={1}>
- {
- props.authorID &&
- <AvatarDiv>
- <Link to={'/usuario-publico/' + props.authorID}>
- <img src={props.authorAvatar ? apiDomain + props.authorAvatar : noAvatar} alt="author avatar" />
- </Link>
- </AvatarDiv>
- }
+ {props.authorID && (
+ <AvatarDiv>
+ <Link to={"/usuario-publico/" + props.authorID}>
+ <img
+ src={
+ props.authorAvatar
+ ? apiDomain + props.authorAvatar
+ : noAvatar
+ }
+ alt="author avatar"
+ />
+ </Link>
+ </AvatarDiv>
+ )}
</Grid>
<Grid item xs={10}>
- <Comentario>
+ <Comentario contrast={state.contrast}>
<div className="star-rating-container">
<Rating
name="read-only"
value={props.rating}
readOnly
size="small"
- style={{ color: "#666" }}
- emptyIcon={<StarBorderIcon fontSize="inherit" style={{ color: "#a5a5a5" }} />}
+ style={
+ state.contrast === ""
+ ? { color: "#666" }
+ : { color: "yellow" }
+ }
+ emptyIcon={
+ <StarBorderIcon
+ fontSize="inherit"
+ style={
+ state.contrast === ""
+ ? { color: "#a5a5a5" }
+ : { color: "yellow" }
+ }
+ />
+ }
/>
</div>
- {
- props.name &&
- <strong>{props.name}</strong>
- }
+ {props.name && <strong>{props.name}</strong>}
<div>
- {
- editando ?
- (
- <React.Fragment>
- <div style={{ marginTop: "5%", padding: "2px" }}>
- <StyledTextField
- colecao={!props.recurso}
- id="input-comentario"
- label={"Editar Comentário"}
- margin="normal"
- value={comment.value}
- multiline={true}
- rows="5"
- onChange={(e) => { handleChange(e) }}
- style={{ width: "100%" }}
- />
- </div>
- <div style={{ float: "right" }}>
- <StyledButton
- style={props.recurso ? { backgroundColor: "#ff7f00" } : { backgroundColor: "#673ab7" }}
- onClick={() => { setEditando(false) }}
- >
- Fechar
- </StyledButton>
- <StyledButton
- style={props.recurso ? { backgroundColor: "#ff7f00" } : { backgroundColor: "#673ab7" }}
- onClick={() => updateComment()}
- >
- Salvar
- </StyledButton>
- </div>
- </React.Fragment>
- )
- :
- (
- <React.Fragment>
- <p>
- {
- props.authorID &&
- <Link
- to={'/usuario-publico/' + props.authorID}
- style={{
- fontWeight: "bolder",
- color: props.recurso ? "#ff7f00" : "#673ab7"
- }}
- >
- {props.authorName}
- </Link>
+ {editando ? (
+ <React.Fragment>
+ <div style={{ marginTop: "5%", padding: "2px" }}>
+ <StyledTextField
+ contrast={props.contrast}
+ colecao={!props.recurso}
+ id="input-comentario"
+ label={"Editar Comentário"}
+ margin="normal"
+ value={comment.value}
+ InputProps={
+ props.contrast === ""
+ ? { className: classes.lightTextField }
+ : { className: classes.darkTextField }
+ }
+ variant="outlined"
+ multiline={true}
+ rows="5"
+ onChange={(e) => {
+ handleChange(e);
+ }}
+ style={{ width: "100%" }}
+ />
+ </div>
+ <div style={{ float: "right" }}>
+ <StyledButton
+ contrast={state.contrast}
+ style={
+ state.contrast === ""
+ ? props.recurso
+ ? { backgroundColor: "#ff7f00" }
+ : { backgroundColor: "#673ab7" }
+ : {
+ backgroundColor: "black",
+ border: "1px solid white",
+ textDecoration: "underline",
+ }
+ }
+ onClick={() => {
+ setEditando(false);
+ }}
+ >
+ Fechar
+ </StyledButton>
+ <StyledButton
+ contrast={state.contrast}
+ style={
+ state.contrast === ""
+ ? props.recurso
+ ? { backgroundColor: "#ff7f00" }
+ : { backgroundColor: "#673ab7" }
+ : {
+ backgroundColor: "black",
+ border: "1px solid white",
+ textDecoration: "underline",
}
- : {displayedComment}
- </p>
- <span className="date">
- {moment(props.createdAt).format("DD/MM/YYYY")}
- </span>
- </React.Fragment>
- )
- }
+ }
+ onClick={() => updateComment()}
+ >
+ Salvar
+ </StyledButton>
+ </div>
+ </React.Fragment>
+ ) : (
+ <React.Fragment>
+ <p>
+ {props.authorID && (
+ <Link
+ to={"/usuario-publico/" + props.authorID}
+ style={{
+ fontWeight: "bolder",
+ color:
+ state.contrast === ""
+ ? props.recurso
+ ? "#ff7f00"
+ : "#673ab7"
+ : "white",
+ }}
+ >
+ {props.authorName}
+ </Link>
+ )}
+ : {displayedComment}
+ </p>
+ <span className="date">
+ {moment(props.createdAt).format("DD/MM/YYYY")}
+ </span>
+ </React.Fragment>
+ )}
</div>
-
</Comentario>
</Grid>
- {
- props.authorID === state.currentUser.id &&
+ {props.authorID === state.currentUser.id && (
<Grid item xs={1}>
<StyledDiv>
- <Button onClick={handleClick}><EditIcon /></Button>
+ <Button onClick={handleClick}>
+ <EditIcon
+ style={state.contrast === "" ? {} : { color: "white" }}
+ />
+ </Button>
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
+ MenuListProps={{
+ disablePadding: true
+ }}
>
- <MenuItem onClick={() => { setEditando(true); handleClose() }}>Editar</MenuItem>
- <MenuItem onClick={() => { toggleModal(true); handleClose() }}>Excluir</MenuItem>
+ <MenuItem
+ style={
+ state.contrast === ""
+ ? {}
+ : {
+ backgroundColor: "black",
+ color: "yellow",
+ textDecoration: "underline",
+ }
+ }
+ onClick={() => {
+ setEditando(true);
+ handleClose();
+ }}
+ >
+ Editar
+ </MenuItem>
+ <MenuItem
+ style={
+ state.contrast === ""
+ ? {}
+ : {
+ backgroundColor: "black",
+ color: "yellow",
+ textDecoration: "underline",
+ }
+ }
+ onClick={() => {
+ toggleModal(true);
+ handleClose();
+ }}
+ >
+ Excluir
+ </MenuItem>
</Menu>
</StyledDiv>
</Grid>
- }
+ )}
</Grid>
</React.Fragment>
- )
+ );
else
return (
- <Grid container style={{ paddingLeft: "20px" }} justify='center' alignItems='center '>
-
+ <Grid
+ container
+ style={{ paddingLeft: "20px" }}
+ justify="center"
+ alignItems="center "
+ >
<Grid item xs={1}>
- {
- <AvatarDiv>
- <img src={noAvatar} alt="author avatar" />
- </AvatarDiv>
- }
+ {
+ <AvatarDiv>
+ <img src={noAvatar} alt="author avatar" />
+ </AvatarDiv>
+ }
</Grid>
<Grid item xs={10}>
- <Comentario>
- <p>
- O usuário que fez esse comentário deletou a conta.
- </p>
+ <Comentario contrast={state.contrast}>
+ <p>O usuário que fez esse comentário deletou a conta.</p>
</Comentario>
</Grid>
</Grid>
- )
+ );
}
const StyledTextField = styled(TextField)`
+ .MuiInputBase-root {
+ margin-bottom: 5px;
+ }
+
+ .MuiOutlinedInput-root {
+ &.Mui-focused fieldset {
+ border-color: ${(props) =>
+ props.contrast === ""
+ ? props.colecao
+ ? "#673ab7"
+ : "rgb(255,127,0)"
+ : "yellow"};
+ }
+ fieldset {
+ border-color: ${(props) => (props.contrast === "" ? "#666" : "white")};
+ }
+ }
+
+ label {
+ color: ${(props) => (props.contrast === "" ? "#666" : "white")};
+ }
+
label.Mui-focused {
- color : ${props => props.colecao ? "rgb(103,58,183)" : "rgb(255,127,0)"};
+ color: ${(props) =>
+ props.contrast === ""
+ ? props.colecao
+ ? "#673ab7"
+ : "rgb(255,127,0)"
+ : "yellow"};
}
- .MuiInput-underline::after {
- border-bottom: ${props => props.colecao ? "2px solid rgb(103,58,183)" : "2px solid rgb(255,127,0)"};
+ label.Mui-focused.Mui-error {
+ color: red;
}
-`
+ width: 95%;
+`;
const StyledDiv = styled.div`
- text-align : center;
- .MuiButton-root {
- @media screen and (max-width: 990px) {
- padding-right : 35px !important;
- }
- }
-`
+ text-align: center;
+ .MuiButton-root {
+ @media screen and (max-width: 990px) {
+ padding-right: 35px !important;
+ }
+ }
+`;
const StyledButton = styled(Button)`
- color : rgba(255,255,255,0.87) !important;
- box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
- margin : 6px 8px !important;
- font-weight : 600 !important;
-`
+ color: ${(props) =>
+ props.contrast === ""
+ ? "rgba(255,255,255,0.87) !important"
+ : "yellow !important"};
+ box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26) !important;
+ margin: 6px 8px !important;
+ font-weight: 600 !important;
+ :hover {
+ background-color: ${(props) =>
+ props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
+`;
const Comentario = styled.div`
- padding-left : 55px !important;
- font-size : 14px;
+ padding-left: 55px !important;
+ font-size: 14px;
+ color: ${(props) => (props.contrast === "" ? "#ababab" : "white")};
.star-rating-container {
- width : 100px;
+ width: 100px;
}
p {
- margin : 0 0 10px;
- padding-left : 2px
+ margin: 0 0 10px;
+ padding-left: 2px;
}
a {
- text-decoration : none !important;
+ text-decoration: none !important;
}
.date {
- color : #ababab;
- font-size : 12px;
- font-weight : lighter;
- padding-left : 3px;
+ color: ${(props) => (props.contrast === "" ? "#ababab" : "white")};
+ font-size: 12px;
+ font-weight: lighter;
+ padding-left: 3px;
}
-`
+`;
const AvatarDiv = styled.div`
text-align : center;
@@ -334,4 +463,4 @@ const AvatarDiv = styled.div`
border-radius : 100%
vertical-align : middle;
}
-`
+`;
diff --git a/src/Components/ContactButtons/FollowButton.js b/src/Components/ContactButtons/FollowButton.js
index 0af714e4..114028d7 100644
--- a/src/Components/ContactButtons/FollowButton.js
+++ b/src/Components/ContactButtons/FollowButton.js
@@ -16,20 +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, {useContext, useState} from 'react'
-import {Store} from '../../Store'
+import React, { useContext, useState } from 'react'
+import { Store } from '../../Store'
import PersonAddIcon from '@material-ui/icons/PersonAdd';
import styled from 'styled-components'
import Button from '@material-ui/core/Button';
-import {putRequest} from '../HelperFunctions/getAxiosConfig'
+import { putRequest } from '../HelperFunctions/getAxiosConfig'
import LoginModal from './../LoginModal.js'
import SignUpModal from './../SignUpModal'
import SnackBar from '../SnackbarComponent';
-export default function FollowButton (props) {
+export default function FollowButton(props) {
- const {state} = useContext(Store)
+ const { state } = useContext(Store)
const [loginOpen, setLogin] = useState(false)
const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
const [signUpOpen, setSignUp] = useState(false)
@@ -46,18 +46,18 @@ export default function FollowButton (props) {
if (reason === 'clickaway') {
return;
}
-
- handleSuccessfulLogin(false);
+
+ handleSuccessfulLogin(false);
}
- function handleSuccess (data) {
+ function handleSuccess(data) {
props.toggleFollowed()
}
const handleFollow = (followerID) => {
if (followerID !== undefined) {
const url = `/users/${followerID}/follow/`
- putRequest(url, {}, handleSuccess, (error) => {console.log(error)})
+ putRequest(url, {}, handleSuccess, (error) => { console.log(error) })
}
}
@@ -71,38 +71,49 @@ export default function FollowButton (props) {
text={"Você está conectado(a)!"}
/>
{/*-------------------------------MODALS---------------------------------------*/}
- <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
/>
- <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
+ <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
{/*----------------------------------------------------------------------------*/}
{
state.currentUser.id !== '' ? (
- <StyledButton onClick={() => handleFollow(props.followerID)}>
- <PersonAddIcon style={{fontSize : "24px",
- display : "inline-block",
- verticalAlign : "middle",
- color : "#00bcd4"}}/>
+ <StyledButton className={`${props.contrast}LinkColor`}
+ style={props.contrast === "" ? {border: "2px solid #00bcd4", borderRadius : "5px", color :"#00bcd4", backgroundColor: "white"} : {border: "1px solid white", borderRadius : "5px", color :"#00bcd4"}}
+ onClick={() => handleFollow(props.followerID)}>
+ <PersonAddIcon
+ className={`${props.contrast}IconColor`}
+ style={{
+ fontSize: "24px",
+ display: "inline-block",
+ verticalAlign: "middle",
+ }} />
SEGUIR
</StyledButton>
)
- :
- (
- <StyledButton onClick={() => handleLogin(true)}>
- <PersonAddIcon style={{fontSize : "24px",
- display : "inline-block",
- verticalAlign : "middle",
- color : "#00bcd4"}}/>
+ :
+ (
+ <StyledButton className={`${props.contrast}LinkColor `}
+ style={props.contrast === "" ? {border: "2px solid #00bcd4", borderRadius : "5px", color :"#00bcd4", backgroundColor: "white"} : {border: "1px solid white", borderRadius : "5px", color :"#00bcd4"}}
+ onClick={() => handleLogin(true)}>
+ <PersonAddIcon
+ className={`${props.contrast}IconColor`}
+ style={{
+ fontSize: "24px",
+ display: "inline-block",
+ verticalAlign: "middle",
+
+ }} />
SEGUIR
- </StyledButton>
- )
+ </StyledButton>
+ )
}
</React.Fragment>
)
}
-export function NoIcon (props) {
- const {state} = useContext(Store)
+export function NoIcon(props) {
+ const { state } = useContext(Store)
const [loginOpen, setLogin] = useState(false)
const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
const [signUpOpen, setSignUp] = useState(false)
@@ -119,14 +130,14 @@ export function NoIcon (props) {
if (reason === 'clickaway') {
return;
}
-
- handleSuccessfulLogin(false);
+
+ handleSuccessfulLogin(false);
}
const handleFollow = (followerID) => {
if (followerID !== undefined) {
const url = `/users/${followerID}/follow/`
- putRequest(url, {}, (data) => {props.toggleFollowed()}, (error) => {console.log(error)})
+ putRequest(url, {}, (data) => { props.toggleFollowed() }, (error) => { console.log(error) })
}
}
@@ -140,72 +151,58 @@ export function NoIcon (props) {
text={"Você está conectado(a)!"}
/>
{/*-------------------------------MODALS---------------------------------------*/}
- <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
/>
- <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
+ <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
{/*----------------------------------------------------------------------------*/}
{
state.currentUser.id !== '' ? (
- <NoIconButton onClick={() => handleFollow(props.followableID)}>seguir</NoIconButton>
- )
- :
- (
- <NoIconButton onClick={() => handleLogin(true)}>seguir</NoIconButton>
+ <NoIconButton contrast={state.contrast} onClick={() => handleFollow(props.followableID)}>seguir</NoIconButton>
)
+ :
+ (
+ <NoIconButton contrast={state.contrast} className={`${props.contrast}LinkColor`}
+ style={props.contrast === "" ? {border: "2px solid #00bcd4", borderRadius : "5px", color :"#00bcd4", backgroundColor: "white"} : {border: "1px solid white", borderRadius : "5px", color :"#00bcd4"}}
+ onClick={() => handleLogin(true)}>seguir</NoIconButton>
+ )
}
</React.Fragment>
)
}
const NoIconButton = styled(Button)`
+ &:hover {
+ background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
.MuiButton-label {
- color : #00bcd4 !important;
+ color: ${props => props.contrast === "" ? "#00bcd4 !important" : "yellow !important"};
}
- background-color : #fff !important;
- border : solid 1px rgba(0,188,212,.85) !important;
+ background-color: ${props => props.contrast === "" ? "#fff !important" : "black !important"};
+ border: ${props => props.contrast === "" ? "solid 1px rgba(0,188,212,.85) !important" : "solid 1px white !important"};
font-size : 14px !important;
border-radius : 3px !important;
height : 36px !important;
min-width : 88px !important;
vertical-align : middle !important;
- text-color : #00bcd4 !important;
align-items : center !important;
text-align : center !important;
padding : 0 6px !important;
margin : 6px 8px !important;
+ color: ${props => props.contrast === "" ? "#00bcd4 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
`
const StyledButton = styled(Button)`
- background-color : #fff !important;
- border : 1px solid #00bcd4 !important;
- color : #00bcd4 !important;
- font-size : 14px !important;
- display : inline-block !important;
- position : relative !important;
- cursor : pointer !important;
- height : 36px !important;
- min-width : 88px !important;
- line-height : 36px !important;
- vertical-align : middle !important;
- -webkit-box-align : center !important;
- -webkit-align-items : center !important;
- -ms-grid-row-align : center !important;
- align-items : center !important;
- text-align : center !important;
- border-radius : 3px !important;
- -webkit-user-select : none !important;
- -moz-user-select : none !important;
- -ms-user-select : none !important;
- user-select : none !important;
- padding : 0 6px !important;
- margin : 6px 8px !important;
- white-space : nowrap !important;
- text-transform : uppercase !important;
+ font-size : 14px important;
font-weight : 500 !important;
- font-style : inherit !important;
- font-variant : inherit !important;
- font-family : inherit !important;
- text-decoration : none !important;
- overflow : hidden !important;
+
+ .MuiSvgIcon-root {
+ font-size : 24px;
+ }
+
+ &:hover {
+ color: rgb(107, 35, 142);
+ }
+ margin : 6px 8px !important;
`
diff --git a/src/Components/ContactButtons/FollowersCountButton.js b/src/Components/ContactButtons/FollowersCountButton.js
index 43dfbfb8..f40a0337 100644
--- a/src/Components/ContactButtons/FollowersCountButton.js
+++ b/src/Components/ContactButtons/FollowersCountButton.js
@@ -11,7 +11,7 @@ export default function FollowersCountButton (props) {
}
return (
- <FollowersButton>
+ <FollowersButton className={`${props.contrast}BackColor ${props.contrast}Border ${props.contrast}LinkColor`}>
{FollowerButtonSpan()}
</FollowersButton>
)
@@ -21,7 +21,6 @@ export default function FollowersCountButton (props) {
const FollowersButton = styled(Button)`
right : 0 !important;
text-transform : none !important;
- color : #666 !important;
font-size : 13px !important;
font-weight : 400 !important;
box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
@@ -31,7 +30,5 @@ const FollowersButton = styled(Button)`
min-height : 36px !important;
vertical-align : middle !important;
text-align : center !important;
- border : 0 !important;
border-radius : 3px !important;
- background-color : rgb(250,250,250) !important;
`
diff --git a/src/Components/ContactButtons/FollowingButton.js b/src/Components/ContactButtons/FollowingButton.js
index 87ad2cba..cee2ddda 100644
--- a/src/Components/ContactButtons/FollowingButton.js
+++ b/src/Components/ContactButtons/FollowingButton.js
@@ -16,22 +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, {useState} from 'react'
+import React, { useState } from 'react'
import styled from 'styled-components'
import Button from '@material-ui/core/Button';
+import GroupIcon from '@material-ui/icons/Group';
import ModalConfirmarUnfollow from '../ModalConfirmarUnfollow.js'
-import {putRequest} from '../HelperFunctions/getAxiosConfig'
+import { putRequest } from '../HelperFunctions/getAxiosConfig'
-//Image Import
-import { FollowingIcon } from "ImportImages.js";
-
-export default function FollowingButton (props) {
+export default function FollowingButton(props) {
const [modalOpen, toggleModal] = useState(false)
const [unfollowID, setUnfollowID] = useState(-1)
const [followingHover, handleFollowingHover] = useState(false)
- const toggleFollowingHover = (value) => {handleFollowingHover(value)}
+ const toggleFollowingHover = (value) => { handleFollowingHover(value) }
const handleUnfollowPartOne = (followedID) => {
setUnfollowID(followedID)
@@ -39,53 +37,65 @@ export default function FollowingButton (props) {
}
- function handleSuccess (data) {
+ function handleSuccess(data) {
props.toggleFollowed()
toggleModal(false)
}
const handleUnfollowPartTwo = () => {
const url = `/users/${unfollowID}/follow/`
- putRequest(url, {}, handleSuccess, (error) => {console.log(error)})
+ putRequest(url, {}, handleSuccess, (error) => { console.log(error) })
}
return (
<React.Fragment>
- <ModalConfirmarUnfollow open={modalOpen}
- handleClose={() => {toggleModal(false)}}
- handleConfirm = {handleUnfollowPartTwo}
+ <ModalConfirmarUnfollow contrast={props.contrast} open={modalOpen}
+ handleClose={() => { toggleModal(false) }}
+ handleConfirm={handleUnfollowPartTwo}
/>
<StyledButton
+ contrast={props.contrast}
+ className={`${props.contrast}LinkColor`}
onMouseOver={() => toggleFollowingHover(true)}
onMouseLeave={() => toggleFollowingHover(false)}
onClick={() => handleUnfollowPartOne(props.followedID)}
>
{
- followingHover?
- (
- [
- <span>DEIXAR DE SEGUIR</span>
- ]
- )
- : (
- [
- <>
- <img src={FollowingIcon} alt='Ãcone seguindo'/><span>Seguindo</span>
- </>
- ]
- )
- }
+ followingHover ?
+ (
+ [
+ <div className={`${props.contrast}LinkColor`}>
+ DEIXAR DE SEGUIR
+ </div>
+ ]
+ )
+ : (
+ [
+ <div className={`${props.contrast}LinkColor`}>
+ <GroupIcon
+ className={`${props.contrast}IconColor`}
+ style={{
+ fontSize: "24px",
+ display: "inline-block",
+ verticalAlign: "middle",
+ }}
+ />
+ SEGUINDO
+ </div>
+ ]
+ )
+ }
</StyledButton>
</React.Fragment>
)
}
-export function NoIconFollowing (props) {
+export function NoIconFollowing(props) {
const [modalOpen, toggleModal] = useState(false)
const [unfollowID, setUnfollowID] = useState(-1)
const [followingHover, handleFollowingHover] = useState(false)
- const toggleFollowingHover = (value) => {handleFollowingHover(value)}
+ const toggleFollowingHover = (value) => { handleFollowingHover(value) }
const handleUnfollowPartOne = (followedID) => {
setUnfollowID(followedID)
@@ -93,40 +103,41 @@ export function NoIconFollowing (props) {
}
- function handleSuccess (data) {
+ function handleSuccess(data) {
props.toggleFollowed()
toggleModal(false)
}
const handleUnfollowPartTwo = () => {
const url = `/users/${unfollowID}/follow/`
- putRequest(url, {}, handleSuccess, (error) => {console.log(error)})
+ putRequest(url, {}, handleSuccess, (error) => { console.log(error) })
}
return (
<React.Fragment>
- <ModalConfirmarUnfollow open={modalOpen}
- handleClose={() => {toggleModal(false)}}
- handleConfirm = {handleUnfollowPartTwo}
+ <ModalConfirmarUnfollow contrast={props.contrast} open={modalOpen}
+ handleClose={() => { toggleModal(false) }}
+ handleConfirm={handleUnfollowPartTwo}
/>
<NoIconButton
+ contrast={props.contrast}
onMouseOver={() => toggleFollowingHover(true)}
onMouseLeave={() => toggleFollowingHover(false)}
onClick={() => handleUnfollowPartOne(props.followedID)}
>
{
- followingHover?
- (
- [
- <span>DEIXAR DE SEGUIR</span>
- ]
- )
- : (
- [
- <span>SEGUINDO</span>
- ]
- )
- }
+ followingHover ?
+ (
+ [
+ <span>DEIXAR DE SEGUIR</span>
+ ]
+ )
+ : (
+ [
+ <span>SEGUINDO</span>
+ ]
+ )
+ }
</NoIconButton>
</React.Fragment>
)
@@ -134,64 +145,38 @@ export function NoIconFollowing (props) {
export const StyledButton = styled(Button)`
- background-color : #00bcd4 !important;
- color : #fff !important;
- display : inline-block !important;
- position : relative !important;
- cursor : pointer !important;
- min-height : 36px !important;
- min-width : 88px !important;
- line-height : 36px !important;
- vertical-align : middle !important;
- -webkit-box-align : center !important;
- -webkit-align-items : center !important;
- -ms-grid-row-align : center !important;
- align-items : center !important;
- text-align : center !important;
- border-radius : 3px !important;
- -webkit-user-select : none !important;
- -moz-user-select : none !important;
- -ms-user-select : none !important;
- user-select : none !important;
- border : 0 !important;
- padding : 0 6px !important;
- margin : 6px 8px !important;
- white-space : nowrap !important;
- text-transform : uppercase !important;
+ border : 1px solid white !important;
+ background-color: ${props => props.contrast === "" ? "#00bcd4" : "black"} !important;
+ color: white !important;
+ font-size : 14px important;
font-weight : 500 !important;
- font-size : 14px !important;
- font-style : inherit !important;
- font-variant : inherit !important;
- font-family : inherit !important;
- text-decoration : none !important;
- overflow : hidden !important;
- &:hover {
- background-color : #fff !important;
- color : #00bcd4 !important;
- border : 1px solid #00bcd4 !important;
- }
- img {
- height : 24px;
- display : inline-block;
- vertical-align : middle;
- color : #fff !important;
+
+ .MuiSvgIcon-root {
+ font-size : 24px;
}
+
`
const NoIconButton = styled(Button)`
+ &:hover {
+ background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
.MuiButton-label {
- color : #00bcd4 !important;
+ color: ${props => props.contrast === "" ? "#00bcd4 !important" : "yellow !important"};
}
- background-color : #fff !important;
- border : solid 1px rgba(0,188,212,.85) !important;
+ background-color: ${props => props.contrast === "" ? "#fff !important" : "black !important"};
+ border: ${props => props.contrast === "" ? "solid 1px rgba(0,188,212,.85) !important" : "solid 1px white !important"};
font-size : 14px !important;
border-radius : 3px !important;
height : 36px !important;
min-width : 88px !important;
vertical-align : middle !important;
- text-color : #00bcd4 !important;
align-items : center !important;
text-align : center !important;
padding : 0 6px !important;
margin : 6px 8px !important;
+
+ span{
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
+ }
`
diff --git a/src/Components/ContactCard.js b/src/Components/ContactCard.js
index fa51ee8d..a854ce77 100644
--- a/src/Components/ContactCard.js
+++ b/src/Components/ContactCard.js
@@ -18,6 +18,7 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, { useState } from 'react';
import Card from '@material-ui/core/Card';
+import Grid from '@material-ui/core/Grid';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import styled from 'styled-components'
@@ -36,14 +37,14 @@ export default function ImgMediaCard(props) {
const toggleFollowed = () => { setFollowedBoolean(!followedBoolean) }
return (
<StyledCard>
- <CardDiv>
+ <CardDiv className={`${props.contrast}BackColor ${props.contrast}Border ${props.contrast}Text`}>
<CardAreaDiv>
{/*Top part of contat card (background image, number of followers and avatar)*/}
<Header>
<StyledCardMedia image={props.cover}>
<div style={{ display: "flex", backgroundColor: "inherit", float: "right" }}>
<Link to={props.href} style={{textDecoration : "none"}}>
- <FollowersCountButton followCount={props.follow_count} />
+ <FollowersCountButton contrast={props.contrast} followCount={props.follow_count} />
</Link>
<Link to={props.href}>
<AvatarDiv>
@@ -56,52 +57,63 @@ export default function ImgMediaCard(props) {
</Header>
{/*Rest of the card content. Button to be rendered depends on whether the contact is followed by the user*/}
- <CardContent>
+ <CardContent style={{height: "148px", padding: "0", bottom: "0"}}>
<UserInfo>
- <Link to={props.href}>
+ <Link to={props.href} className={`${props.contrast}LinkColor`}>
<p className="p1">
{props.name}
</p>
</Link>
- <Link to={props.href}>
+ <Link to={props.href} className={`${props.contrast}LinkColor`}>
<span style={{ fontSize: "14px", fontWeight: "normal" }}>
<b>{props.numCollections}</b> {props.numCollections !== 1 ? "Coleções" : "Coleção"} | <b>{props.numLearningObjects}</b> {props.numLearningObjects !== 1 ? "Recursos" : "Recurso"}
</span>
</Link>
-
- <div style={{ display: "flex", justifyContent: "center" }}>
- {
- followedBoolean ?
- (
- <React.Fragment>
+ </UserInfo>
+ </CardContent>
+ <CardContent style={{padding: "0"}}>
+ <Grid container>
+ <Grid item xs={2}></Grid>
+ {
+ followedBoolean ?
+ (
+ <>
+ <Grid item xs={8} style={{ display: "flex", justifyContent: "center" }}>
<FollowingButton
+ contrast={props.contrast}
followedID={props.followerID ? props.followerID : props.followedID}
toggleFollowed={toggleFollowed} />
-
+ </Grid>
+ <Grid item xs={2} style={{ display: "flex", justifyContent: "flex-start" }}>
<Options
+ contrast={props.contrast}
followableID={props.followerID ? props.followerID : props.followedID}
followed={followedBoolean}
toggleFollowed={toggleFollowed} />
- </React.Fragment>
- )
- :
- (
- <React.Fragment>
+ </Grid>
+ </>
+ )
+ :
+ (
+ <>
+ <Grid item xs={8} style={{ display: "flex", justifyContent: "center" }}>
<FollowButton
+ contrast={props.contrast}
followerID={props.followedID ? props.followedID : props.followerID}
toggleFollowed={toggleFollowed} />
-
+ </Grid>
+ <Grid item xs={2} style={{ display: "flex", justifyContent: "flex-start" }}>
<Options
+ contrast={props.contrast}
followableID={props.followedID ? props.followedID : props.followerID}
followed={followedBoolean}
toggleFollowed={toggleFollowed} />
- </React.Fragment>
- )
- }
-
- </div>
- </UserInfo>
+ </Grid>
+ </>
+ )
+ }
+ </Grid>
</CardContent>
</CardAreaDiv>
</CardDiv>
@@ -125,10 +137,8 @@ export const CardAreaDiv = styled.div`
margin : 0 auto;
`
export const CardDiv = styled.div`
- background-color : #fff;
text-align : start;
font-family : 'Roboto', sans serif;
- color : #666;
`
/*----------------------------------------------------------------------------*/
@@ -137,7 +147,7 @@ export const CardDiv = styled.div`
/*Override Material UI styling -----------------------------------------------*/
const StyledCardMedia = styled(CardMedia)`
height : 100%;
- width : 100%;
+ width : 270.5px;
background-size : cover;
background-position : center;
@@ -157,10 +167,7 @@ const StyledCard = styled(Card)`
const UserInfo = styled.div`
text-align : center;
margin-top : 50px;
- color : #666;
-
a {
- text-decoration : none !important;
color : #666;
}
diff --git a/src/Components/ContactCardOptions.js b/src/Components/ContactCardOptions.js
index 32117058..4811e21a 100644
--- a/src/Components/ContactCardOptions.js
+++ b/src/Components/ContactCardOptions.js
@@ -69,7 +69,6 @@ export default function SimpleMenu(props) {
const handleFollow = (followerID) => {
putRequest(`/users/${followerID}/follow`, {}, (data) => {
- console.log(data);
props.toggleFollowed()
}, (error) => { console.log(error) })
@@ -91,22 +90,22 @@ export default function SimpleMenu(props) {
text={"Você está conectado(a)!"}
/>
{/*-------------------------------MODALS---------------------------------------*/}
- <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
/>
- <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
+ <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
{/*----------------------------------------------------------------------------*/}
<>
{
reportModal &&
- <ReportModal open={reportModal} handleClose={() => handleModal(false)}
+ <ReportModal contrast={props.contrast} open={reportModal} handleClose={() => handleModal(false)}
form="user" complainableId={props.followableID}
complainableType={"User"}
{...props}/>
}
<div style={{fontSize: "12px", display : "flex", flexDirection : "column", justifyContent : "center"}}>
- <ButtonNoWidth aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{color : "#666"}}>
- <MoreVertIcon style={{color : "#666"}}/>
+ <ButtonNoWidth aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
+ <MoreVertIcon className={`${props.contrast}LinkColor ${props.contrast}Text`} />
</ButtonNoWidth>
<Menu
id="simple-menu"
@@ -114,31 +113,34 @@ export default function SimpleMenu(props) {
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
+ MenuListProps={{
+ disablePadding: true
+ }}
>
- <StyledMenuItem onClick={handleClose}>
+ <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={handleClose}>
<Link to={"/usuario-publico/" + props.followableID}>
- <ListItemIcon><OpenIcon /></ListItemIcon>Abrir
+ <ListItemIcon className={`${props.contrast}IconColor`}><OpenIcon /></ListItemIcon>Abrir
</Link>
</StyledMenuItem>
{
props.followed ?
(
- <StyledMenuItem onClick={() => {handleFollow(props.followableID)}}>
- <ListItemIcon><ReportIcon /></ListItemIcon>Deixar de Seguir
+ <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => {handleFollow(props.followableID)}}>
+ <ListItemIcon className={`${props.contrast}IconColor`}><ReportIcon /></ListItemIcon>Deixar de Seguir
</StyledMenuItem>
)
:
(
state.currentUser.id !== '' ? (
- <StyledMenuItem onClick={() => {handleFollow(props.followableID)}}>
- <ListItemIcon><PersonAddIcon /></ListItemIcon>Seguir
+ <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => {handleFollow(props.followableID)}}>
+ <ListItemIcon className={`${props.contrast}IconColor`}><PersonAddIcon /></ListItemIcon>Seguir
</StyledMenuItem>
)
:
(
- <StyledMenuItem onClick={() => {handleLogin(props.followableID)}}>
- <ListItemIcon><PersonAddIcon /></ListItemIcon>Seguir
+ <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => {handleLogin(props.followableID)}}>
+ <ListItemIcon className={`${props.contrast}IconColor`}><PersonAddIcon /></ListItemIcon>Seguir
</StyledMenuItem>
)
)
@@ -146,14 +148,14 @@ export default function SimpleMenu(props) {
{
state.currentUser.id !== '' ? (
- <StyledMenuItem onClick={() => {handleModal(true); handleClose()}}>
- <ListItemIcon><ReportIcon /></ListItemIcon>Reportar
+ <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => {handleModal(true); handleClose()}}>
+ <ListItemIcon className={`${props.contrast}IconColor`}><ReportIcon /></ListItemIcon>Reportar
</StyledMenuItem>
)
:
(
- <StyledMenuItem onClick={() => {handleLogin(true)}}>
- <ListItemIcon><ReportIcon /></ListItemIcon>Reportar
+ <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => {handleLogin(true)}}>
+ <ListItemIcon className={`${props.contrast}IconColor`}><ReportIcon /></ListItemIcon>Reportar
</StyledMenuItem>
)
}
@@ -169,8 +171,6 @@ const ButtonNoWidth = styled(Button)`
min-width : 24px !important;
max-height : 24px !important;
padding : 0 !important;
- background-color : #fff !important;
- color : #a5a5a5 !important;
border : 0 !important;
.MuiButton-root {
@@ -189,12 +189,11 @@ const ButtonNoWidth = styled(Button)`
`
const StyledMenuItem = styled(MenuItem)`
- color : #666 !important;
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
.MuiSvgIcon-root {
vertical-align : middle !important;
}
a {
- text-decoration : none !important;
- color : #666 !important;
+ color : inherit !important;
}
-`
+`
\ No newline at end of file
diff --git a/src/Components/ContactForm.js b/src/Components/ContactForm.js
index 6d63135d..8d7f120c 100644
--- a/src/Components/ContactForm.js
+++ b/src/Components/ContactForm.js
@@ -16,186 +16,185 @@ 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 {Store} from '../Store.js'
+import React, { useState, useContext } from 'react'
+import { Store } from '../Store.js'
import styled from 'styled-components';
import FormInput from "../Components/FormInput.js"
-import {postRequest} from './HelperFunctions/getAxiosConfig'
+import { postRequest } from './HelperFunctions/getAxiosConfig'
import LoginModal from './LoginModal.js'
import SignUpModal from './SignUpModal'
import SnackBar from './SnackbarComponent';
const Button = styled.button`
-
- background-color: #00acc1;
- color:#fff;
- font-family: Roboto,sans-serif;
- font-size: 14px;
- font-weight: 500;
- height: 36px;
- border-radius: 3px;
- padding-left: 16px;
- padding-right: 16px;
- box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
- outline: none;
- position: relative;
- cursor: pointer;
- min-height: 36px;
- min-width: 88px;
- line-height: 36px;
- vertical-align: middle;
- align-items: center;
- text-align: center;
- border-radius: 3px;
- box-sizing: border-box;
- user-select: none;
- border: 0;
- padding: 0 6px;
- padding-right: 6px;
- padding-left: 6px;
- margin: 6px 8px;
-
- white-space: nowrap;
- text-transform: uppercase;
- font-weight: 500;
- font-size: 14px;
- font-style: inherit;
- font-variant: inherit;
- font-family: inherit;
- text-decoration: none;
- overflow: hidden;
- transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1);
-
+ background-color: ${props => props.contrast === "" ? "#00acc1" : "black"};
+ color: ${props => props.contrast === "" ? "#fff" : "yellow"};
+ font-family: Roboto,sans-serif;
+ font-size: 14px;
+ font-weight: 500;
+ height: 36px;
+ padding-left: 16px;
+ padding-right: 16px;
+ box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
+ outline: none;
+ position: relative;
+ cursor: pointer;
+ min-height: 36px;
+ min-width: 88px;
+ line-height: 36px;
+ vertical-align: middle;
+ align-items: center;
+ text-align: center;
+ border-radius: 3px;
+ box-sizing: border-box;
+ user-select: none;
+ border: ${props => props.contrast === "" ? 0 : "1px solid white"};
+ padding: 0 6px;
+ padding-right: 6px;
+ padding-left: 6px;
+ margin: 6px 8px;
+
+ white-space: nowrap;
+ text-transform: uppercase;
+ font-weight: 500;
+ font-size: 14px;
+ font-style: inherit;
+ font-variant: inherit;
+ font-family: inherit;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ overflow: hidden;
+ transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1);
+ :hover{
+ background-color: ${props => props.contrast === "" ? "rgba(0, 172, 193, 0.65)" : "rgba(255,255,0,0.24)"};
+ }
`
- function validateNome (nome) {
- let flag = false
- if(nome.length === 0) {
- flag = true
- }
+function validateNome(nome) {
+ let flag = false
+ if (nome.length === 0) {
+ flag = true
+ }
- return flag
- }
+ return flag
+}
- function validateMensagem (mensagem) {
- let flag = false
- if(mensagem.length === 0) {
- flag = true
- }
+function validateMensagem(mensagem) {
+ let flag = false
+ if (mensagem.length === 0) {
+ flag = true
+ }
- return flag
- }
+ return flag
+}
- function validateEmail (email) {
+function validateEmail(email) {
let flag = false
if (email.split("").filter(x => x === "@").length !== 1 || email.length < 7) {
- flag = true
+ flag = true
}
return flag
- }
+}
- function Formulario (props){
- const {state} = useContext(Store)
+function Formulario(props) {
+ const { state } = useContext(Store)
const [loginOpen, setLogin] = useState(false)
const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
const [signUpOpen, setSignUp] = useState(false)
- const [nome, handleNome] = useState(
- {
- dict : {
- key:false,
- value:""
- }
- })
- const [email, handleEmail] = useState(
- {
- dict : {
- key:false,
- value:""
- }
+ const [nome, handleNome] = useState({
+ dict: {
+ key: false,
+ value: ""
+ }
+ })
+ const [email, handleEmail] = useState({
+ dict: {
+ key: false,
+ value: ""
+ }
+ })
+ const [mensagem, handleMensagem] = useState({
+ dict: {
+ key: false,
+ value: ""
+ }
})
- const [mensagem, handleMensagem] = useState(
- {
- dict : {
- key: false,
- value:""
- }
- })
const preencheNome = (e) => {
- const aux2 = e.target.value
- const flag = validateNome(aux2)
- handleNome({...nome, dict : {
- key : flag,
- value : e.target.value
- }})
- console.log(nome)
+ const aux2 = e.target.value
+ const flag = validateNome(aux2)
+ handleNome({
+ ...nome, dict: {
+ key: flag,
+ value: e.target.value
+ }
+ })
}
const preencheEmail = (e) => {
- const aux = e.target.value
- const flag = validateEmail(aux)
- handleEmail({...email, dict : {
- key : flag,
- value : e.target.value
- }})
- console.log(email)
+ const aux = e.target.value
+ const flag = validateEmail(aux)
+ handleEmail({
+ ...email, dict: {
+ key: flag,
+ value: e.target.value
+ }
+ })
}
const preencheMensagem = (e) => {
- const msg = e.target.value
- console.log(msg)
- let flag = validateMensagem(msg)
- handleMensagem({...mensagem, dict : {
- key : flag,
- value : msg
- }})
- console.log(mensagem)
+ const msg = e.target.value
+ let flag = validateMensagem(msg)
+ handleMensagem({
+ ...mensagem, dict: {
+ key: flag,
+ value: msg
+ }
+ })
}
const limpaTudo = () => {
- handleNome({
- dict : {
- key: false,
- value:""
- }}
- );
-
- handleEmail({
- dict : {
- key: false,
- value:""
- }}
- )
-
- handleMensagem({
- dict : {
- key: false,
- value:""
- }}
- )
+ handleNome({
+ dict: {
+ key: false,
+ value: ""
+ }
+ });
+
+ handleEmail({
+ dict: {
+ key: false,
+ value: ""
+ }
+ })
+
+ handleMensagem({
+ dict: {
+ key: false,
+ value: ""
+ }
+ })
}
const handleSignUp = () => {
- setSignUp(!signUpOpen)
+ setSignUp(!signUpOpen)
}
const handleLogin = () => {
- setLogin(!loginOpen)
+ setLogin(!loginOpen)
}
const toggleSnackbar = (event, reason) => {
- if (reason === 'clickaway') {
- return;
- }
+ if (reason === 'clickaway') {
+ return;
+ }
handleSuccessfulLogin(false);
}
@@ -203,17 +202,16 @@ const Button = styled.button`
const onSubmit = (e) => {
//on submit we should prevent the page from refreshing
e.preventDefault(); //though this is arguable
- console.log(!(nome.dict.key && email.dict.key && mensagem.dict.key ))
// Se não houver erro em nunhum dos campos E nenhum dos campos for vazio: a página faz o contato com o backend e os campos ficam em branco no formulário
- if (!(nome.dict.key || email.dict.key || mensagem.dict.key )) {
+ if (!(nome.dict.key || email.dict.key || mensagem.dict.key)) {
let payload = {
- contact : {
+ contact: {
name: nome.dict.value,
email: email.dict.value,
message: mensagem.dict.value
}
- }
- postRequest(`/contacts`, payload, (data) => {limpaTudo()}, (error) => {console.log(error)})
+ }
+ postRequest(`/contacts`, payload, (data) => { limpaTudo() }, (error) => { console.log(error) })
}
}
diff --git a/src/Components/CriarColecaoForm.js b/src/Components/CriarColecaoForm.js
index ea8c0507..f5c9b4d3 100644
--- a/src/Components/CriarColecaoForm.js
+++ b/src/Components/CriarColecaoForm.js
@@ -16,26 +16,28 @@ 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 {Store} from '../Store.js'
+import React, { useContext } from 'react'
+import { Store } from '../Store.js'
import { Button } from '@material-ui/core';
import styled from 'styled-components'
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormControl from '@material-ui/core/FormControl';
-import TextField from '@material-ui/core/TextField';
-import {postRequest} from './HelperFunctions/getAxiosConfig'
+import {StyledTextField, useStyles} from './ReportUserForm.js'
+import { postRequest } from './HelperFunctions/getAxiosConfig'
-export default function CriarColecaoForm (props) {
- const {state} = useContext(Store)
+export default function CriarColecaoForm(props) {
+ const { state } = useContext(Store)
+
+ const classes = useStyles();
const [value, setValue] = React.useState(-1);
/*values are set according to backend complaint id*/
const [options] = React.useState([
- {value : "pública", text :'Pública (Sua coleção estará disponÃvel para todos)'},
- {value : "privada", text : 'Privada (Somente você poderá visualizar esta coleção)'}
+ { value: "pública", text: 'Pública (Sua coleção estará disponÃvel para todos)' },
+ { value: "privada", text: 'Privada (Somente você poderá visualizar esta coleção)' }
])
const handleChange = (event) => {
@@ -43,8 +45,8 @@ export default function CriarColecaoForm (props) {
};
const [colName, setColName] = React.useState({
- key : false,
- value : "",
+ key: false,
+ value: "",
})
const handleColName = (e) => {
@@ -52,13 +54,14 @@ export default function CriarColecaoForm (props) {
const flag = userInput.length === 0 ? true : false
- setColName({...colName,
- key : flag,
- value : userInput
+ setColName({
+ ...colName,
+ key: flag,
+ value: userInput
})
}
- function handleSuccess (data) {
+ function handleSuccess(data) {
props.finalize(data.id)
}
const formSubmit = (e) => {
@@ -68,51 +71,52 @@ export default function CriarColecaoForm (props) {
const finalRadioValue = value === 'pública' ? 'public' : 'private'
const finalColName = colName
- if(!(finalColName.key)) {
+ if (!(finalColName.key)) {
let payload = {
- "collection" : {
- "name" : finalColName.value,
- "owner_id" : state.currentUser.id,
- "owner_type" : "User",
- "privacy" : finalRadioValue
+ "collection": {
+ "name": finalColName.value,
+ "owner_id": state.currentUser.id,
+ "owner_type": "User",
+ "privacy": finalRadioValue
}
}
- postRequest( `/collections/`, payload, handleSuccess, (error) =>{console.log(error)})
+ postRequest(`/collections/`, payload, handleSuccess, (error) => { console.log(error) })
}
}
return (
- <form onSubmit={(e) => {formSubmit(e)}} style={{textAlign : "left"}}>
+ <form onSubmit={(e) => { formSubmit(e) }} style={{ textAlign: "left" }}>
<StyledTextField
- id = {"col-name"}
+ id={"col-name"}
label={"Nome da coleção"}
- type = {"text"}
- value = {colName.value}
- onChange = {e => handleColName(e)}
- error = {colName.key}
-
- helperText = {colName.key ? <span>O nome é importante para identificar a sua coleção na plataforma.<br/>Ex: Matemática Ensino Médio </span> : ""}
- required = {true}
- style={{width:"100%"}}
+ type={"text"}
+ value={colName.value}
+ onChange={e => handleColName(e)}
+ error={colName.key}
+ InputProps={state.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
+ contrast={state.contrast}
+ helperText={colName.key ? <span>O nome é importante para identificar a sua coleção na plataforma.<br />Ex: Matemática Ensino Médio </span> : ""}
+ required={true}
+ style={{ width: "100%" }}
/>
- <span style={{fontSize : "12px", color : "#b3b3b3"}}>Esta coleção é:</span>
+ <span style={{ fontSize: "12px" }}>Esta coleção é:</span>
- <StyledFormControl component="fieldset">
+ <StyledFormControl contrast={state.contrast} component="fieldset">
<RadioGroup value={value} onChange={handleChange}>
{
options.map(option =>
- <FormControlLabel key={option.value} value={option.value} control={<Radio color="#673ab7"/>} label={option.text} />
+ <FormControlLabel key={option.value} value={option.value} control={<Radio color="#673ab7" />} label={option.text} />
)
}
</RadioGroup>
</StyledFormControl>
<ButtonsDiv>
- <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar>
- <ButtonEnviar type="submit">CRIAR COLEÇÃO</ButtonEnviar>
+ <ButtonCancelar contrast={state.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar>
+ <ButtonEnviar contrast={state.contrast} type="submit">CRIAR COLEÇÃO</ButtonEnviar>
</ButtonsDiv>
</form>
);
@@ -126,23 +130,21 @@ export const ButtonsDiv = styled.div`
`
export const ButtonCancelar = styled(Button)`
- &:hover {
- background-color : rgba(158,158,158,0.2) !important;
- }
height : 36px !important;
padding-left : 16px !important;
padding-right : 16px !important;
font-weight : 500 !important;
border-radius : 3px !important;
- color :#666 !important;
+ color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
background-color: transparent;
min-width : 88px !important;
height : 36px !important;
`
export const ButtonEnviar = styled(Button)`
- background-color : #673ab7 !important;
- color : #fff !important;
+ background-color: ${props => props.contrast === "" ? "#673ab7" : "black"} !important;
+ color: ${props => props.contrast === "" ? "#fff" : "yellow"} !important;
font-size: 14px !important;
font-weight: 500 !important;
height: 36px !important;
@@ -154,41 +156,24 @@ export const ButtonEnviar = styled(Button)`
min-width : 88px !important;
vertical-align : middle !important;
margin : 6px 8px !important;
- text-decoration : none !important;
-
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
+ border: ${props => props.contrast === "" ? "" : "1px solid white !important"};
.MuiButton-label {
padding-right : 16px;
padding-left : 16px;
}
`
-export const StyledTextField = styled(TextField)`
- margin : 18px 0 !important;
- .MuiFormHelperText-root {
- text-align : right;
- }
-
- label.Mui-focused {
- color : #673ab7;
- }
-
- label.Mui-focused.Mui-error {
- color : red;
- }
-
- .MuiInput-underline::after {
- border-bottom: 2px solid #673ab7;
- }
-`
export const StyledFormControl = styled(FormControl)`
display : block !important;
.MuiFormControlLabel-root {
- color : #666;
+ color: ${props => props.contrast === "" ? "#666" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
}
.MuiIconButton-label {
- color : #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
}
.PrivateRadioButtonIcon-checked {
color : orange;
diff --git a/src/Components/CriarColecaoModal.js b/src/Components/CriarColecaoModal.js
index 73e7384f..82b6749b 100644
--- a/src/Components/CriarColecaoModal.js
+++ b/src/Components/CriarColecaoModal.js
@@ -25,22 +25,21 @@ import styled from 'styled-components'
import CriarColecaoForm from './CriarColecaoForm.js'
import CloseIcon from '@material-ui/icons/Close';
-function CloseModalButton (props) {
+function CloseModalButton(props) {
return (
<StyledCloseModalButton onClick={props.handleClose}>
- <CloseIcon/>
+ <CloseIcon style={props.contrast === "" ? { color: "#666" } : { color: "white" }} />
</StyledCloseModalButton>
)
}
-export default function CriarColecaoModal (props) {
+export default function CriarColecaoModal(props) {
return (
<StyledModal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
open={props.open}
-
centered="true"
onClose={props.handleClose}
closeAfterTransition
@@ -50,14 +49,14 @@ export default function CriarColecaoModal (props) {
}}
>
<Fade in={props.open}>
- <Container>
- <Header>
- <span style={{width:"32px"}}/>
+ <Container contrast={props.contrast}>
+ <Header contrast={props.contrast}>
+ <span style={{ width: "32px" }} />
<h2>Criar Coleção</h2>
- <CloseModalButton handleClose={props.handleClose}/>
+ <CloseModalButton handleClose={props.handleClose} contrast={props.contrast} />
</Header>
- <Content style={{paddingTop : "0"}}>
- <CriarColecaoForm handleClose={props.handleClose} finalize={props.handleClose}/>
+ <Content style={{ paddingTop: "0" }}>
+ <CriarColecaoForm handleClose={props.handleClose} finalize={props.handleClose} />
</Content>
</Container>
</Fade>
@@ -82,14 +81,13 @@ const Header = styled.div`
h2 {
font-size : 26px;
font-weight : lighter;
- color : #666
+ color: ${props => props.contrast === "" ? "#666" : "white"};
}
`
const StyledCloseModalButton = styled(Button)`
display : inline-block;
position : relative;
- float : right !important;
margin-right : -8px !important;
background : transparent !important;
min-width: 0 !important;
@@ -112,8 +110,9 @@ const StyledModal = styled(Modal)`
const Container = styled.div`
box-sizing : border-box;
box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
- background-color : white;
- align : center;
+ background-color: ${props => props.contrast === "" ? "white" : "black"};
+ border: ${props => props.contrast === "" ? "" : "1px solid white"};
+ align-items : center;
display : flex;
flex-direction : column;
min-width : 240px;
diff --git a/src/Components/Cropper.js b/src/Components/Cropper.js
index ccccc4c2..277b5c31 100644
--- a/src/Components/Cropper.js
+++ b/src/Components/Cropper.js
@@ -20,97 +20,92 @@ import React, { PureComponent } from 'react';
import ReactCrop from 'react-image-crop';
import 'react-image-crop/dist/ReactCrop.css';
-
export default class Cropper extends PureComponent {
- state = {
- src: this.props.src,
- crop:this.props.crop
- };
-
-
- // If you setState the crop in here you should return false.
- onImageLoaded = image => {
- this.imageRef = image;
- };
-
- onCropComplete = crop => {
- this.makeClientCrop(crop);
- };
-
- onCropChange = (crop, percentCrop) => {
- // You could also use percentCrop:
- // this.setState({ crop: percentCrop });
- this.setState({ crop });
- };
+ state = {
+ src: this.props.src,
+ crop:this.props.crop
+ };
+
+ // If you setState the crop in here you should return false.
+ onImageLoaded = image => {
+ this.imageRef = image;
+ };
+
+ onCropComplete = crop => {
+ this.makeClientCrop(crop);
+ };
+
+ onCropChange = (crop, percentCrop) => {
+ // You could also use percentCrop:
+ // this.setState({ crop: percentCrop });
+ this.setState({ crop });
+ };
+
+ async makeClientCrop(crop) {
+ if (this.imageRef && crop.width && crop.height) {
+ // eslint-disable-next-line
+ const croppedImageUrl = await this.getCroppedImg(
+ this.imageRef,
+ crop,
+ 'newFile.jpeg'
+ );
+ }
+ }
- async makeClientCrop(crop) {
- if (this.imageRef && crop.width && crop.height) {
- // eslint-disable-next-line
- const croppedImageUrl = await this.getCroppedImg(
- this.imageRef,
- crop,
- 'newFile.jpeg'
- );
+ getCroppedImg(image, crop, fileName) {
+ const canvas = document.createElement('canvas');
+ const scaleX = image.naturalWidth / image.width;
+ const scaleY = image.naturalHeight / image.height;
+ canvas.width = crop.width;
+ canvas.height = crop.height;
+ const ctx = canvas.getContext('2d');
+
+ ctx.drawImage(
+ image,
+ crop.x * scaleX,
+ crop.y * scaleY,
+ crop.width * scaleX,
+ crop.height * scaleY,
+ 0,
+ 0,
+ crop.width,
+ crop.height
+ );
+ const reader = new FileReader();
+ canvas.toBlob(blob => {
+ reader.readAsDataURL(blob)
+ reader.onloadend = () => {
+ // {/*this.dataURLtoFile(reader.result, 'cropped.jpg')*/}
+ this.props.update(reader.result)
+ }
+ })
+ }
+ render() {
+ // eslint-disable-next-line
+ const { crop, croppedImageUrl, src } = this.state;
+
+ return (
+ <>
+ {src && (
+ <ReactCrop
+ src={src}
+ crop={crop}
+ circularCrop={this.props.circularCrop}
+ onImageLoaded={this.onImageLoaded}
+ onComplete={this.onCropComplete}
+ onChange={this.onCropChange}
+ style={{maxHeight : "100%", maxWidth : "100%"}}
+ imageStyle={{maxHeight : "100%", maxWidth : "100%"}}
+ />
+ )}
+ {/*croppedImageUrl && (
+ <img alt="Crop" style={{ maxWidth: '100%', maxHeight : "100%"}} src={croppedImageUrl} />
+ )*/}
+ </>
+ );
}
- }
-
-
-
- getCroppedImg(image, crop, fileName) {
- const canvas = document.createElement('canvas');
- const scaleX = image.naturalWidth / image.width;
- const scaleY = image.naturalHeight / image.height;
- canvas.width = crop.width;
- canvas.height = crop.height;
- const ctx = canvas.getContext('2d');
-
- ctx.drawImage(
- image,
- crop.x * scaleX,
- crop.y * scaleY,
- crop.width * scaleX,
- crop.height * scaleY,
- 0,
- 0,
- crop.width,
- crop.height
- );
- const reader = new FileReader();
- canvas.toBlob(blob => {
- reader.readAsDataURL(blob)
- reader.onloadend = () => {
- // {/*this.dataURLtoFile(reader.result, 'cropped.jpg')*/}
- this.props.update(reader.result)
- }
- })
-
- }
-
- render() {
- // eslint-disable-next-line
- const { crop, croppedImageUrl, src } = this.state;
-
- return (
- <>
- {src && (
- <ReactCrop
- src={src}
- crop={crop}
- circularCrop={this.props.circularCrop}
- onImageLoaded={this.onImageLoaded}
- onComplete={this.onCropComplete}
- onChange={this.onCropChange}
- style={{maxHeight : "300px", maxWidth : "100%"}}
- />
- )}
- {/*croppedImageUrl && (
- <img alt="Crop" style={{ maxWidth: '100%', maxHeight : "100%"}} src={croppedImageUrl} />
- )*/}
- </>
- );
- }
}
diff --git a/src/Components/Dropdown.js b/src/Components/Dropdown.js
index cc064489..ea1a161b 100644
--- a/src/Components/Dropdown.js
+++ b/src/Components/Dropdown.js
@@ -28,71 +28,72 @@ import { Store } from '../Store';
import { HashLink as Link } from 'react-router-hash-link';
const useStyles = makeStyles((theme) => ({
- typography: {
- padding: theme.spacing(2),
- },
+ typography: {
+ padding: theme.spacing(2),
+ },
}));
export default function PositionedPopper(props) {
- const [anchorEl, setAnchorEl] = React.useState(null);
- const [open, setOpen] = React.useState(false);
- const [placement, setPlacement] = React.useState();
- const classes = useStyles();
- const { state, dispatch } = React.useContext(Store)
- const innerDropdown = React.useRef(null)
+ const [anchorEl, setAnchorEl] = React.useState(null);
+ const [open, setOpen] = React.useState(false);
+ //const [placement, setPlacement] = React.useState();
+ const classes = useStyles();
+ const { state, dispatch } = React.useContext(Store)
+ const innerDropdown = React.useRef(null)
- const handleClick = (newPlacement) => (event) => {
- if (state.searchOpen)
- dispatch({
- type: 'HANDLE_SEARCH_BAR',
- opened: false
- })
- setAnchorEl(event.currentTarget);
- setOpen((prev) => placement !== newPlacement || !prev);
- setPlacement(newPlacement);
- };
+ const handleClick = (newPlacement) => (event) => {
+ if (state.searchOpen)
+ dispatch({
+ type: 'HANDLE_SEARCH_BAR',
+ opened: false
+ })
+ setAnchorEl(event.currentTarget);
+ setOpen(!open);
+ //setPlacement(newPlacement);
+ };
- const handleItemClicked = () => {
- setOpen(false)
- }
-
- useEffect(() => {
- const handleClickOutside = (event) => {
- innerDropdown.current && !innerDropdown.current.contains(event.target) && setOpen(false)
+ const handleItemClicked = () => {
+ setOpen(false)
}
- document.addEventListener('mousedown', handleClickOutside)
+ useEffect(() => {
+ const handleClickOutside = (event) => {
+ innerDropdown.current && !innerDropdown.current.contains(event.target) && setOpen(false)
+ }
+
+ document.addEventListener('mousedown', handleClickOutside)
- return () => document.removeEventListener('mousedown', handleClickOutside)
+ return () => document.removeEventListener('mousedown', handleClickOutside)
- }, [])
+ }, [])
- return (
- <div className={classes.root}>
- <Popper open={open} anchorEl={anchorEl} placement="bottom" transition ref={innerDropdown}>
- {({ TransitionProps }) => (
- <Fade {...TransitionProps} timeout={350}>
- <Paper>
- <MenuList>
- {
- props.items.map((item) =>
- <Link onClick={handleItemClicked} style={{ textDecoration: "none", color: "black" }} key={`${item.name}_${new Date().toString()}`} to={item.href} ><MenuItem>{item.name}</MenuItem></Link>
- )
- }
- </MenuList>
- </Paper>
- </Fade>
- )}
- </Popper>
- <Button
- style={{ textTransform: "none", fontSize: "14px" }}
- aria-controls="menu-list-grow"
- aria-haspopup="true"
- onClick={handleClick('bottom')}
- >
- {props.name}
- <ExpandMoreIcon />
- </Button>
- </div>
- );
+ return (
+ <div className={classes.root}>
+ <Popper open={open} anchorEl={anchorEl} placement="bottom" transition ref={innerDropdown}>
+ {({ TransitionProps }) => (
+ <Fade {...TransitionProps} timeout={350}>
+ <Paper>
+ <MenuList className={`${state.contrast}BackColor`}>
+ {
+ props.items.map((item) =>
+ <Link onClick={handleItemClicked} className={`${state.contrast}LinkColor`} style={{ textDecoration: "none", color: "black" }} key={`${item.name}_${new Date().toString()}`} to={item.href} ><MenuItem>{item.name}</MenuItem></Link>
+ )
+ }
+ </MenuList>
+ </Paper>
+ </Fade>
+ )}
+ </Popper>
+ <Button
+ className={`${state.contrast}LinkColor`}
+ style={{ textTransform: "none" }}
+ aria-controls="menu-list-grow"
+ aria-haspopup="true"
+ onClick={handleClick('bottom')}
+ >
+ {props.name}
+ <ExpandMoreIcon className={`${state.contrast}IconColor`}/>
+ </Button>
+ </div>
+ );
}
\ No newline at end of file
diff --git a/src/Components/EcFooter.js b/src/Components/EcFooter.js
index 2b23f622..f0abfb6e 100644
--- a/src/Components/EcFooter.js
+++ b/src/Components/EcFooter.js
@@ -25,8 +25,10 @@ import { HashLink as Link } from 'react-router-hash-link';
import { eduConectada } from "ImportImages.js";
const BlueFooter = styled.div`
- background-color : #00bcd4;
- color : white;
+ border-top: ${props => props.contrast === '' ? "none" : "1px solid white"};
+ border-bottom: ${props => props.contrast === '' ? "none" : "1px solid white"};
+ background-color: ${props => props.contrast === '' ? "#00bcd4" : "black"};
+ color: white;
display : block;
padding-top : 2em;
@media screen and (min-width : 502px) {
@@ -42,33 +44,33 @@ const listStyle = {
lineHeight: "1.6",
}
const WhiteLink = styled(Link)`
- text-decoration: none;
- color: white;
+ text-decoration: ${props => props.contrast === '' ? "none" : "underline"};;
+ color: ${props => props.contrast === '' ? "white" : "yellow"};
`
class EcFooter extends Component {
render() {
return (
- <BlueFooter>
+ <BlueFooter contrast={this.props.contrast}>
<Container>
<Row>
<Col md={4} sm={6} xs={6} style={window.innerWidth < 502 && { textAlign: "center" }}>
<h4>Sobre</h4>
<ul style={listStyle}>
- <li> <WhiteLink to="/sobre">Sobre a Plataforma</WhiteLink> </li>
- <li> <WhiteLink to="/sobre#portaisparceiros">Portais Parceiros</WhiteLink> </li>
- <li> <WhiteLink to="/termos">Termos de Uso</WhiteLink> </li>
- <li> <WhiteLink to="/contato">Contato</WhiteLink> </li>
+ <li> <WhiteLink contrast={this.props.contrast} to="/sobre">Sobre a Plataforma</WhiteLink> </li>
+ <li> <WhiteLink contrast={this.props.contrast} to="/sobre#portaisparceiros">Portais Parceiros</WhiteLink> </li>
+ <li> <WhiteLink contrast={this.props.contrast} to="/termos">Termos de Uso</WhiteLink> </li>
+ <li> <WhiteLink contrast={this.props.contrast} to="/contato">Contato</WhiteLink> </li>
</ul>
</Col>
<Col md={4} sm={6} xs={6} style={window.innerWidth < 502 && { textAlign: "center" }}>
<h4>Ajuda</h4>
<ul style={listStyle}>
- <li> <WhiteLink to="/ajuda">Central de Ajuda</WhiteLink> </li>
- <li> <WhiteLink to="/publicando-recurso">Publicando Recursos</WhiteLink> </li>
- <li> <WhiteLink to="/encontrando-recurso">Encontrando Recursos</WhiteLink> </li>
- <li> <WhiteLink to="/participando-da-rede">Participando da Rede</WhiteLink> </li>
- <li> <WhiteLink to="/gerenciando-conta">Gerenciando a Conta</WhiteLink> </li>
+ <li> <WhiteLink contrast={this.props.contrast} to="/ajuda">Central de Ajuda</WhiteLink> </li>
+ <li> <WhiteLink contrast={this.props.contrast} to="/publicando-recurso">Publicando Recursos</WhiteLink> </li>
+ <li> <WhiteLink contrast={this.props.contrast} to="/encontrando-recurso">Encontrando Recursos</WhiteLink> </li>
+ <li> <WhiteLink contrast={this.props.contrast} to="/participando-da-rede">Participando da Rede</WhiteLink> </li>
+ <li> <WhiteLink contrast={this.props.contrast} to="/gerenciando-conta">Gerenciando a Conta</WhiteLink> </li>
</ul>
</Col>
<Col md={4} sm={12} xs={12} style={window.innerWidth < 502 && { textAlign: "center" }}>
diff --git a/src/Components/EditarColecaoForm.js b/src/Components/EditarColecaoForm.js
index f0ea1fdc..67b1e4d9 100644
--- a/src/Components/EditarColecaoForm.js
+++ b/src/Components/EditarColecaoForm.js
@@ -24,12 +24,14 @@ import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormControl from '@material-ui/core/FormControl';
-import TextField from '@material-ui/core/TextField';
+import {StyledTextField, useStyles} from './ReportUserForm.js'
import {getRequest, putRequest} from './HelperFunctions/getAxiosConfig'
export default function EditarColecaoForm (props) {
const {state} = useContext(Store)
+ const classes = useStyles();
+
function handleSuccessfulGet (data) {
setColName({key : false, value : data.name})
setValue( data.privacy === 'public' ? 'pública' : 'privada')
@@ -99,33 +101,37 @@ export default function EditarColecaoForm (props) {
<form onSubmit={(e) => {formSubmit(e)}} style={{textAlign : "left"}}>
<StyledTextField
+ contrast={props.contrast}
id = {"col-name"}
label={"Nome"}
type = {"text"}
value = {colName.value}
onChange = {e => handleColName(e)}
error = {colName.key}
+ InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
required = {true}
style={{width:"100%"}}
/>
<StyledTextField
+ contrast={props.contrast}
id = {"col-description"}
label={"Descrição"}
type = {"text"}
value = {colDescription}
multiline
+ InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
rows={5}
onChange = {e => setColDescription(e)}
style={{width:"100%"}}
/>
- <span style={{fontSize : "12px", color : "#b3b3b3"}}>Esta coleção é:</span>
- <StyledFormControl component="fieldset">
+ <span style={{fontSize : "12px"}}>Esta coleção é:</span>
+ <StyledFormControl contrast={props.contrast} component="fieldset">
<RadioGroup value={value} onChange={handleChange}>
{
options.map(option =>
- <FormControlLabel key={option.value} value={option.value} control={<Radio color="#673ab7"/>} label={option.text} />
+ <FormControlLabel key={option.value} value={option.value} control={<Radio/>} label={option.text} />
)
}
</RadioGroup>
@@ -133,8 +139,8 @@ export default function EditarColecaoForm (props) {
<ButtonsDiv>
- <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar>
- <ButtonEnviar type="submit">SALVAR</ButtonEnviar>
+ <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar>
+ <ButtonEnviar contrast={props.contrast} type="submit">SALVAR</ButtonEnviar>
</ButtonsDiv>
</form>
);
@@ -148,23 +154,23 @@ export const ButtonsDiv = styled.div`
`
export const ButtonCancelar = styled(Button)`
- &:hover {
- background-color : rgba(158,158,158,0.2) !important;
- }
+ color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
height : 36px !important;
padding-left : 16px !important;
padding-right : 16px !important;
font-weight : 500 !important;
border-radius : 3px !important;
- color :#666 !important;
background-color: transparent;
min-width : 88px !important;
height : 36px !important;
`
export const ButtonEnviar = styled(Button)`
- background-color : #673ab7 !important;
- color : #fff !important;
+ color: ${props => props.contrast === "" ? "white" : "yellow"} !important;
+ background-color: ${props => props.contrast === "" ? "#673ab7" : "black"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"} !important;
font-size: 14px !important;
font-weight: 500 !important;
height: 36px !important;
@@ -176,42 +182,23 @@ export const ButtonEnviar = styled(Button)`
min-width : 88px !important;
vertical-align : middle !important;
margin : 6px 8px !important;
- text-decoration : none !important;
.MuiButton-label {
padding-right : 16px;
padding-left : 16px;
}
`
-export const StyledTextField = styled(TextField)`
- margin : 18px 0 !important;
-
- .MuiFormHelperText-root {
- text-align : right;
- }
-
- label.Mui-focused {
- color : #673ab7;
- }
-
- label.Mui-focused.Mui-error {
- color : red;
- }
-
- .MuiInput-underline::after {
- border-bottom: 2px solid #673ab7;
- }
-`
export const StyledFormControl = styled(FormControl)`
- display : block !important;
-
.MuiFormControlLabel-root {
- color : #666;
+ color: ${props => props.contrast === "" ? "#666" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
}
.MuiIconButton-label {
- color : #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
}
+ display : block !important;
+
.PrivateRadioButtonIcon-checked {
color : orange;
}
diff --git a/src/Components/ExpandedMaterials.js b/src/Components/ExpandedMaterials.js
index 603ec4ed..767f0a0f 100644
--- a/src/Components/ExpandedMaterials.js
+++ b/src/Components/ExpandedMaterials.js
@@ -24,7 +24,7 @@ const ExpandedMaterial = (props) => {
const classes = useStyles();
return (
- <Paper elevation={3} style={{ backgroundColor: "#444444", padding: "20px" }}>
+ <Paper className={`${props.contrast}Border`} elevation={3} style={props.contrast === "" ? { backgroundColor: "#444444", padding: "20px" } : { backgroundColor: "black", padding: "20px" }}>
<Grid container direction="row" spacing={2}>
<Grid item direction="column" xs={12} md={4}>
<Grid item>
@@ -40,7 +40,7 @@ const ExpandedMaterial = (props) => {
{
material.tags.map((tag, index) => {
return (
- <Chip color="default" label={tag.name} key={index} style={{ padding: "0.5px" }} />
+ <Chip className={`${props.contrast}Text ${props.contrast}BackColor`} label={tag.name} key={index} style={props.contrast === "" ? { padding: "0.5px" } : {border: "1px solid white"}} />
)
})
}
@@ -55,7 +55,7 @@ const ExpandedMaterial = (props) => {
</DevelopedByDiv>
<SizedHeightBox3 />
<StyledLink to={`/colecao?colecao=${material.id}`}>
- <Button variant="contained" color="secondary">
+ <Button className={`${props.contrast}LinkColor ContrastText`} variant="contained" style={props.contrast === "" ? { background: "#e8224f" } : { background: "black" }}>
Ver todos
</Button>
</StyledLink>
@@ -73,18 +73,21 @@ const ExpandedMaterial = (props) => {
<Grid container direction="row" justify="center" alignItems="center" spacing={3}>
<Grid item md={4}>
<TopicCard
+ contrast={props.contrast}
topic={material.topics[0]}
colecao_id={material.id}
/>
</Grid>
<Grid item md={4}>
<TopicCard
+ contrast={props.contrast}
topic={material.topics[1]}
colecao_id={material.id}
/>
</Grid>
<Grid item md={4}>
<TopicCard
+ contrast={props.contrast}
topic={material.topics[2]}
colecao_id={material.id}
/>
diff --git a/src/Components/ExpansionPanels.js b/src/Components/ExpansionPanels.js
index 017816eb..4582b138 100644
--- a/src/Components/ExpansionPanels.js
+++ b/src/Components/ExpansionPanels.js
@@ -37,10 +37,8 @@ const ExpansionPanelTeste = styled(ExpansionPanel)`
`
const ExpansionPanelSummaryColorido = styled(ExpansionPanelSummary)`
-
-
- background-color:#e5e5e5 !important;
-
+ background-color: ${props => props.contrast === "" ? "#e5e5e5 !important" : "black !important"};
+ border: ${props => props.contrast === "" ? 0 : "1px solid white !important"};
.MuiExpansionPanel-root {
background-color: #00BCD4 !important;
}
@@ -48,46 +46,46 @@ const ExpansionPanelSummaryColorido = styled(ExpansionPanelSummary)`
`
const ExpansionPanelDetailsColorido = styled(ExpansionPanelDetails)`
-
- background-color: #fff;
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
font-size: 15px;
+ p{
+ color: ${props => props.contrast === "" ? "" : "white"};
+ }
`
const TypographyColorido = styled(Typography)`
- color: #666 !important;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
font-size: 16px !important;
font-weight: 400 !important;
`
const AColorido = styled.a`
- color: #00BCD4;
- text-decoration:none;
-
+ color: ${props => props.contrast === "" ? "#00BCD4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
`
-export default function SimpleExpansionPanel() {
-
-
+export default function SimpleExpansionPanel({ contrast }) {
return (
<div >
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
- expandIcon={<ExpandMoreIcon/>}
+ contrast={contrast}
+ expandIcon={<ExpandMoreIcon style={contrast === "" ? {} : { color: "white" }} />}
aria-controls="panel1a-content"
id="panel1a-header"
>
- <TypographyColorido >1. CaracterÃsticas da <strong>Plataforma Integrada de RED do MEC</strong></TypographyColorido>
+ <TypographyColorido contrast={contrast} >1. CaracterÃsticas da <strong>Plataforma Integrada de RED do MEC</strong></TypographyColorido>
</ExpansionPanelSummaryColorido>
- <ExpansionPanelDetailsColorido >
+ <ExpansionPanelDetailsColorido contrast={contrast} >
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div>
<p>A <strong>Plataforma Integrada de RED do MEC</strong> é um é sÃtio (website) em formato de plataforma
- interativa colaborativa para propiciar a formação de uma rede de pessoas interessadas em usar, criar e compartilhar recursos e materiais educacionais. Seu objetivo é reunir e disponibilizar conteúdos do acervo do MEC, antes distribuÃdos em diferentes portais (Portal do Professor, Banco Internacional de Objetos Educacionais, DomÃnio Público e TV Escola), conteúdo de organizações parceiras, bem como fomentar espaços de participação, criação e compartilhamento de conhecimento entre usuários para temas relacionados à educação básica brasileira. A <strong>Plataforma Integrada de RED do MEC</strong> foi criada em software livre, cujas informações para desenvolvedores estão disponÃveis em <AColorido href="https://gitlab.c3sl.ufpr.br/portalmec" target="_blank">gitlab.c3sl.ufpr.br/portalmec</AColorido>.</p>
+ interativa colaborativa para propiciar a formação de uma rede de pessoas interessadas em usar, criar e compartilhar recursos e materiais educacionais. Seu objetivo é reunir e disponibilizar conteúdos do acervo do MEC, antes distribuÃdos em diferentes portais (Portal do Professor, Banco Internacional de Objetos Educacionais, DomÃnio Público e TV Escola), conteúdo de organizações parceiras, bem como fomentar espaços de participação, criação e compartilhamento de conhecimento entre usuários para temas relacionados à educação básica brasileira. A <strong>Plataforma Integrada de RED do MEC</strong> foi criada em software livre, cujas informações para desenvolvedores estão disponÃveis em <AColorido contrast={contrast} href="https://gitlab.c3sl.ufpr.br/portalmec" target="_blank">gitlab.c3sl.ufpr.br/portalmec</AColorido>.</p>
<p>A <strong>Plataforma Integrada de RED do MEC</strong> funciona ao mesmo tempo como repositório e referatório:</p>
<ul>
<li>
@@ -99,12 +97,12 @@ export default function SimpleExpansionPanel() {
</ul>
<p>No que se refere ao Repositório, a <strong>Plataforma Integrada de RED do MEC</strong> disponibiliza recursos educacionais digitais e materiais de formação de seu acervo e também permite que usuários (pessoas fÃsicas) depositem (publiquem, façam upload) seus recursos e materiais para serem armazenados, desde que façam seu cadastro, disponibilizem as informações necessárias no momento da publicação e respeitem as regras estabelecidas neste Termo.</p>
<p>Os usuários terão acesso a uma variedade de recursos on-line. Para além, mediante cadastro, terão a sua disposição um maior número de funcionalidades, incluindo ferramentas de comunicação e interação, mecanismos de consulta, poderão fazer upload e download de recursos educacionais digitais. Poderão utilizar serviços relacionados à criação, à consulta e ao acompanhamento de coleções de recursos educacionais digitais de outros usuários, dentre outras funcionalidades. Professores cadastrados e identificados poderão ainda fazer upload de RED.</p>
- <p>No que se refere ao Referatório, a <strong>Plataforma Integrada de RED do MEC</strong> indica e organiza links externos para recursos e materiais de terceiros. Os recursos serão disponibilizados mediante a adesão aos critérios especÃficos levantados pelo MEC. Para mais informações, utilize a página de <AColorido href="contato">Contato</AColorido> da plataforma.</p>
+ <p>No que se refere ao Referatório, a <strong>Plataforma Integrada de RED do MEC</strong> indica e organiza links externos para recursos e materiais de terceiros. Os recursos serão disponibilizados mediante a adesão aos critérios especÃficos levantados pelo MEC. Para mais informações, utilize a página de <AColorido contrast={contrast} href="contato">Contato</AColorido> da plataforma.</p>
</div>
</Grid>
- <Grid item xs={12} md={1}></Grid>
+ <Grid item xs={12} md={1}></Grid>
<Grid item xs={12} md={4}>
- <div style={{color:"#00BCD4",fontSize:"18px"}}>
+ <div style={{ color: "#00BCD4", fontSize: "18px" }}>
<p>BASICAMENTE,</p>
<p>A Plataforma MEC RED reúne e disponibiliza conteúdos do acervo do MEC que antes estavam distribuÃdos em diferentes portais.</p>
<p>Esses conteúdos podem estar armazenados na própria Plataforma, ou podem estar em sites externos, sendo indicados pela Plataforma e acessados por meio dela. </p>
@@ -116,217 +114,223 @@ export default function SimpleExpansionPanel() {
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
- expandIcon={<ExpandMoreIcon />}
+ contrast={contrast}
+ expandIcon={<ExpandMoreIcon style={contrast === "" ? {} : { color: "white" }} />}
aria-controls="panel2a-content"
id="panel2a-header"
>
- <TypographyColorido >2. Cadastro e segurança</TypographyColorido>
+ <TypographyColorido contrast={contrast}>2. Cadastro e segurança</TypographyColorido>
</ExpansionPanelSummaryColorido>
- <ExpansionPanelDetailsColorido>
- <Grid container spacing={3}>
- <Grid item xs={12} md={7}>
- <div>
- <p>A realização de cadastro pode ser exigida como condição para a utilização de determinados ambientes, recursos ou ferramentas. O cadastramento de um usuário só será finalizado ao serem preenchidos todos os campos indicados como obrigatórios. Para o registro de sua conta, o usuário deverá indicar uma senha e uma identificação, tornando-se responsável por mantê-las em sigilo, assumindo a total responsabilidade pelas atividades que se realizam por meio dela. O usuário compromete-se igualmente em sair ("deslogar") de sua conta ao final de cada sessão.</p>
- <p>Além das informações básicas, aos professores que quiserem ter a sua identidade verificada - o que o permitirá depositar recursos na plataforma (fazer upload) - será necessário identificar a escola da rede em que atua. A mesma informação será verificada a partir dos dados do Censo Escolar.</p>
- <p>A <strong>Plataforma Integrada de RED do MEC</strong> não se responsabiliza pelas informações inseridas por seus usuários. Os usuários garantem e respondem, em qualquer caso, pela veracidade, exatidão e autenticidade dos dados pessoais cadastrados. A <strong>Plataforma Integrada de RED do MEC</strong> se reserva o direito de conferir a identificação de seus usuários, bem como de solicitar dados adicionais e documentos que julgue pertinentes, a fim de verificar os dados pessoais informados caso julgue necessário.</p>
- <p>Para acessar sua conta, o usuário deverá identificar-se por meio de e-mail e senha. O usuário compromete-se a não informar a terceiros sua senha, responsabilizando-se integral e exclusivamente pelo uso que dela seja feito e pelas operações efetuadas em sua conta.</p>
- <p>O usuário compromete-se a notificar a <strong>Plataforma Integrada de RED do MEC</strong>, por meio da funcionalidade “Contatoâ€, sobre qualquer uso não autorizado de sua conta, assim como sobre o seu acesso por terceiros não autorizados.</p>
- <p>Contas de usuários com informações consideradas inadequadas pela <strong>Plataforma Integrada de RED do MEC</strong>, conforme as cláusulas destes Termos de Uso, poderão ser desativadas, removidas ou ter seu conteúdo bloqueado por decisão do Ministério da Educação. O usuário será notificado através do seu e-mail de cadastro.</p>
- <p>A criação de conta ou a disponibilização de conteúdo na <strong>Plataforma Integrada de RED do MEC</strong> não geram nenhum direito de suporte técnico ou de indenização por dificuldades técnicas ou falhas nos sistemas. O cancelamento, a suspensão, a perda de dados armazenados, a indisponibilidade ou outra situação adversa que afete o acesso, os dados ou o conteúdo do usuário não ensejarão qualquer tipo de reparação, compensação ou outra obrigação.</p>
- <p>A <strong>Plataforma Integrada de RED do MEC</strong> não se responsabiliza por qualquer dano, prejuÃzo ou perda no equipamento do usuário causado por falhas no sistema, no servidor ou na internet decorrentes de condutas de terceiros, de vÃrus por acesso, da utilização ou navegação na internet ou da transferência de dados.</p>
- </div>
- </Grid>
- <Grid item xs={12} md={1}></Grid>
- <Grid item xs={12} md={4}>
- <div style={{color:"#00BCD4",fontSize:"18px"}}>
- <p>BASICAMENTE,</p>
- <p>Para utilizar determinados recursos e ferramentas, o usuário precisa efetuar o cadastro no sistema, informando um e-mail válido e cadastrando uma senha.</p>
- <p>O usuário é o único responsável pelas informações que fornece. E a Plataforma MEC RED se reserva o direito de conferir a veracidade desses dados, caso julgue necessário.</p>
- <p>Se houver qualquer tipo de acesso e uso não autorizado em sua conta, o usuário compromete-se a notificar a Plataforma por meio da funcionalidade “Reportarâ€.</p>
- <p>A criação de conta não gera direito à suporte técnico ou indenização por dificuldades técnicas ou falhas no sistema.</p>
- </div>
+ <ExpansionPanelDetailsColorido contrast={contrast}>
+ <Grid container spacing={3}>
+ <Grid item xs={12} md={7}>
+ <div>
+ <p>A realização de cadastro pode ser exigida como condição para a utilização de determinados ambientes, recursos ou ferramentas. O cadastramento de um usuário só será finalizado ao serem preenchidos todos os campos indicados como obrigatórios. Para o registro de sua conta, o usuário deverá indicar uma senha e uma identificação, tornando-se responsável por mantê-las em sigilo, assumindo a total responsabilidade pelas atividades que se realizam por meio dela. O usuário compromete-se igualmente em sair ("deslogar") de sua conta ao final de cada sessão.</p>
+ <p>Além das informações básicas, aos professores que quiserem ter a sua identidade verificada - o que o permitirá depositar recursos na plataforma (fazer upload) - será necessário identificar a escola da rede em que atua. A mesma informação será verificada a partir dos dados do Censo Escolar.</p>
+ <p>A <strong>Plataforma Integrada de RED do MEC</strong> não se responsabiliza pelas informações inseridas por seus usuários. Os usuários garantem e respondem, em qualquer caso, pela veracidade, exatidão e autenticidade dos dados pessoais cadastrados. A <strong>Plataforma Integrada de RED do MEC</strong> se reserva o direito de conferir a identificação de seus usuários, bem como de solicitar dados adicionais e documentos que julgue pertinentes, a fim de verificar os dados pessoais informados caso julgue necessário.</p>
+ <p>Para acessar sua conta, o usuário deverá identificar-se por meio de e-mail e senha. O usuário compromete-se a não informar a terceiros sua senha, responsabilizando-se integral e exclusivamente pelo uso que dela seja feito e pelas operações efetuadas em sua conta.</p>
+ <p>O usuário compromete-se a notificar a <strong>Plataforma Integrada de RED do MEC</strong>, por meio da funcionalidade “Contatoâ€, sobre qualquer uso não autorizado de sua conta, assim como sobre o seu acesso por terceiros não autorizados.</p>
+ <p>Contas de usuários com informações consideradas inadequadas pela <strong>Plataforma Integrada de RED do MEC</strong>, conforme as cláusulas destes Termos de Uso, poderão ser desativadas, removidas ou ter seu conteúdo bloqueado por decisão do Ministério da Educação. O usuário será notificado através do seu e-mail de cadastro.</p>
+ <p>A criação de conta ou a disponibilização de conteúdo na <strong>Plataforma Integrada de RED do MEC</strong> não geram nenhum direito de suporte técnico ou de indenização por dificuldades técnicas ou falhas nos sistemas. O cancelamento, a suspensão, a perda de dados armazenados, a indisponibilidade ou outra situação adversa que afete o acesso, os dados ou o conteúdo do usuário não ensejarão qualquer tipo de reparação, compensação ou outra obrigação.</p>
+ <p>A <strong>Plataforma Integrada de RED do MEC</strong> não se responsabiliza por qualquer dano, prejuÃzo ou perda no equipamento do usuário causado por falhas no sistema, no servidor ou na internet decorrentes de condutas de terceiros, de vÃrus por acesso, da utilização ou navegação na internet ou da transferência de dados.</p>
+ </div>
+ </Grid>
+ <Grid item xs={12} md={1}></Grid>
+ <Grid item xs={12} md={4}>
+ <div style={{ color: "#00BCD4", fontSize: "18px" }}>
+ <p>BASICAMENTE,</p>
+ <p>Para utilizar determinados recursos e ferramentas, o usuário precisa efetuar o cadastro no sistema, informando um e-mail válido e cadastrando uma senha.</p>
+ <p>O usuário é o único responsável pelas informações que fornece. E a Plataforma MEC RED se reserva o direito de conferir a veracidade desses dados, caso julgue necessário.</p>
+ <p>Se houver qualquer tipo de acesso e uso não autorizado em sua conta, o usuário compromete-se a notificar a Plataforma por meio da funcionalidade “Reportarâ€.</p>
+ <p>A criação de conta não gera direito à suporte técnico ou indenização por dificuldades técnicas ou falhas no sistema.</p>
+ </div>
+ </Grid>
</Grid>
- </Grid>
</ExpansionPanelDetailsColorido>
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
- expandIcon={<ExpandMoreIcon />}
+ contrast={contrast}
+ expandIcon={<ExpandMoreIcon style={contrast === "" ? {} : { color: "white" }} />}
aria-controls="panel3a-content"
id="panel3a-header"
>
- <TypographyColorido >3. Publicações de usuários</TypographyColorido>
+ <TypographyColorido contrast={contrast}>3. Publicações de usuários</TypographyColorido>
</ExpansionPanelSummaryColorido>
- <ExpansionPanelDetailsColorido>
- <Grid container spacing={3}>
- <Grid item xs={12} md={7}>
- <div>
- <p>O conteúdo disponibilizado pelo usuário é de inteira responsabilidade do usuário, não sendo a <strong>Plataforma Integrada de RED do MEC</strong> responsável por quaisquer fatos decorrentes de sua utilização.</p>
- <p>Os recursos publicados devem ter cunho educacional, mantendo-se dentro do assunto em que estão inseridos, em conformidade com estes Termos de Uso.</p>
- <p>Todas as informações publicadas na <strong>Plataforma Integrada de RED do MEC</strong>, como os metadados (descritivos dos recursos), comentários e discussões inseridas são consideradas públicas, visÃveis por qualquer pessoa, sem nenhum tipo de confidencialidade. Não serão aceitos materiais que contenham vocabulário ofensivo ou desrespeitoso a terceiros, incluindo ofensas, calúnias, injúrias e difamações. Também não serão permitidos materiais que invadam a privacidade de terceiros, que sejam ameaçadoras, preconceituosas ou racistas.</p>
- <p>Caso o usuário entenda que alguma postagem, material, notÃcia, comentário ou outro conteúdo disponibilizado na <strong>Plataforma Integrada de RED do MEC</strong> violem algum direito seu, a legislação aplicável ou as cláusulas deste Termos de Uso, deverá notificar a <strong>Plataforma Integrada de RED do MEC</strong> por meio da funcionalidade “Reportar†ou, quando não houver, através do formulário de Contato.</p>
- <p>O spam (mensagens não solicitadas) ou o abuso em comentários poderão ser ativamente prevenidos através do bloqueio de palavras e expressões predeterminadas, ou excluÃdos posteriormente, sendo cabÃvel a remoção da conta do usuário, no caso de tentativas de violação sistemática e repetitiva destes Termos de Uso, incluindo a reintrodução de material que já tenha sido previamente bloqueado ou excluÃdo.</p>
- <p>Conteúdos com informações consideradas inadequadas pela <strong>Plataforma Integrada de RED do MEC</strong>, conforme as cláusulas destes Termos de Uso, poderão ser removidos por decisão do Ministério da Educação e o usuário será notificado através do seu e-mail de cadastro.</p>
- <h6 style={{fontSize:"18px",marginBlock:"10px"}} >3.1 É permitido ao usuário:</h6>
- <ul>
- <li>
- <p>Depositar (publicar) recurso ou material de sua autoria ou de autoria coletiva, com anuência dos demais autores, que esteja em domÃnio público, ou para o qual há anuência dos autores originais, desde que os dados sejam corretamente preenchidos nos campos descritivos (metadados) indicados para preenchimento das informações sobre os recursos;</p>
- </li>
- <li>
- <p>Nos comentários, contatos e comunicações, é fundamental ser cortês e tratar os demais usuários com respeito;</p>
- </li>
- <li>
- <p>O usuário poderá sugerir links para outros sites, desde que tenham relação direta com o assunto abordado.</p>
- </li>
- </ul>
- <h6 style={{fontSize:"18px",marginBlock: "10px"}}>3.2 É vedado ao usuário:</h6>
- <ul>
- <li>
- <p>Transmitir, exibir, enviar, ou de qualquer outra forma, disponibilizar conteúdo que contenha material pornográfico e/ou atividades ilegais relativas a menores de 18 anos (consoante o <AColorido href="http://www.planalto.gov.br/ccivil_03/leis/L8069.htm" target="_blank">Estatuto da Criança e do Adolescente</AColorido>), que invada a privacidade de terceiros, que tenha cunho comercial, viole os <AColorido href="https://www.ohchr.org/EN/UDHR/Pages/Language.aspx?LangID=por" target="_blank">Direitos Humanos</AColorido> ou seja ilegal, ofensivo, ameaçador, que incite a violência, seja vulgar, preconceituoso ou racista (como descrito nos artigos 138-140 do Código Penal Brasileiro), ou de qualquer forma seja contrário às cláusulas destes Termos de Uso;</p>
- </li>
- <li>
- <p>Assumir a identidade de outra pessoa, fÃsica ou jurÃdica; forjar cabeçalhos, ou de qualquer outra forma manipular identificadores, a fim de disfarçar a origem de qualquer material contido na plataforma, com sentido de desmoralizar, desprestigiar ou se fazer passar pela <strong>Plataforma Integrada de RED do MEC</strong>;</p>
- </li>
- <li>
- <p>Disponibilizar conteúdo em desconformidade com a <AColorido href="http://www.planalto.gov.br/ccivil_03/leis/L9610.htm" target="_blank">legislação de Direito Autoral</AColorido>, incluindo conteúdo que viole marca registrada, patente, segredo de negócio, direito autoral ou qualquer outro direito de terceiro; disponibilizar conteúdo com qualquer tipo de propaganda, material promocional, spam (mensagens não solicitadas), correntes ou esquemas de pirâmide;</p>
- </li>
- <li>
- <p>Disponibilizar conteúdo que contenha vÃrus ou qualquer outro código, arquivo ou programa de computador, com o propósito de interromper, destruir ou limitar a funcionalidade de qualquer software, hardware ou equipamento de telecomunicações;</p>
- </li>
- <li>
- <p>Interferir ou interromper os serviços, as redes ou os servidores conectados à plataforma de modo a dificultar a utilização e o aproveitamento dos serviços por outros usuários, bem como obter ou tentar obter acesso não autorizado à plataforma;</p>
- </li>
- <li>
- <p>Pedir votos, mencionar número de candidato ou expressar qualquer outra manifestação que se caracterize como propaganda polÃtica ou que viole as normas eleitorais.</p>
- </li>
- </ul>
- </div>
- </Grid>
- <Grid item xs={12} md={1}></Grid>
- <Grid item xs={12} md={4}>
- <div style={{color:"#00BCD4",fontSize:"18px"}}>
- <p>BASICAMENTE,</p>
- <p>O conteúdo disponibilizado pelo usuário é de sua inteira responsabilidade. Os recursos publicados tevem ter cunho educacional, em conformidade com estes Termos.</p>
- <p>Todas informações publicadas na Plataforma MEC RED são cosideradas públicas, visÃveis por qualquer pessoa.</p>
- <p>Não serão aceitos materiais com vocabulário ofensivo ou que invadam a privacidade de terceiros.</p>
- <p>Caso o usuário entenda que algum conteúdo disponibilizado viole um direito ou as cláusulas deste Termo de Uso, deverá notificar a Plataforma por meio da funcionalidade “Reportarâ€.</p>
- <p>O usuário poderá ter a sua conta removida em casos de violações sistemáticas destes Termos de Uso.</p>
- </div>
+ <ExpansionPanelDetailsColorido contrast={contrast}>
+ <Grid container spacing={3}>
+ <Grid item xs={12} md={7}>
+ <div>
+ <p>O conteúdo disponibilizado pelo usuário é de inteira responsabilidade do usuário, não sendo a <strong>Plataforma Integrada de RED do MEC</strong> responsável por quaisquer fatos decorrentes de sua utilização.</p>
+ <p>Os recursos publicados devem ter cunho educacional, mantendo-se dentro do assunto em que estão inseridos, em conformidade com estes Termos de Uso.</p>
+ <p>Todas as informações publicadas na <strong>Plataforma Integrada de RED do MEC</strong>, como os metadados (descritivos dos recursos), comentários e discussões inseridas são consideradas públicas, visÃveis por qualquer pessoa, sem nenhum tipo de confidencialidade. Não serão aceitos materiais que contenham vocabulário ofensivo ou desrespeitoso a terceiros, incluindo ofensas, calúnias, injúrias e difamações. Também não serão permitidos materiais que invadam a privacidade de terceiros, que sejam ameaçadoras, preconceituosas ou racistas.</p>
+ <p>Caso o usuário entenda que alguma postagem, material, notÃcia, comentário ou outro conteúdo disponibilizado na <strong>Plataforma Integrada de RED do MEC</strong> violem algum direito seu, a legislação aplicável ou as cláusulas deste Termos de Uso, deverá notificar a <strong>Plataforma Integrada de RED do MEC</strong> por meio da funcionalidade “Reportar†ou, quando não houver, através do formulário de Contato.</p>
+ <p>O spam (mensagens não solicitadas) ou o abuso em comentários poderão ser ativamente prevenidos através do bloqueio de palavras e expressões predeterminadas, ou excluÃdos posteriormente, sendo cabÃvel a remoção da conta do usuário, no caso de tentativas de violação sistemática e repetitiva destes Termos de Uso, incluindo a reintrodução de material que já tenha sido previamente bloqueado ou excluÃdo.</p>
+ <p>Conteúdos com informações consideradas inadequadas pela <strong>Plataforma Integrada de RED do MEC</strong>, conforme as cláusulas destes Termos de Uso, poderão ser removidos por decisão do Ministério da Educação e o usuário será notificado através do seu e-mail de cadastro.</p>
+ <h6 style={{ fontSize: "18px", marginBlock: "10px" }} >3.1 É permitido ao usuário:</h6>
+ <ul>
+ <li>
+ <p>Depositar (publicar) recurso ou material de sua autoria ou de autoria coletiva, com anuência dos demais autores, que esteja em domÃnio público, ou para o qual há anuência dos autores originais, desde que os dados sejam corretamente preenchidos nos campos descritivos (metadados) indicados para preenchimento das informações sobre os recursos;</p>
+ </li>
+ <li>
+ <p>Nos comentários, contatos e comunicações, é fundamental ser cortês e tratar os demais usuários com respeito;</p>
+ </li>
+ <li>
+ <p>O usuário poderá sugerir links para outros sites, desde que tenham relação direta com o assunto abordado.</p>
+ </li>
+ </ul>
+ <h6 style={{ fontSize: "18px", marginBlock: "10px" }}>3.2 É vedado ao usuário:</h6>
+ <ul>
+ <li>
+ <p>Transmitir, exibir, enviar, ou de qualquer outra forma, disponibilizar conteúdo que contenha material pornográfico e/ou atividades ilegais relativas a menores de 18 anos (consoante o <AColorido contrast={contrast} href="http://www.planalto.gov.br/ccivil_03/leis/L8069.htm" target="_blank">Estatuto da Criança e do Adolescente</AColorido>), que invada a privacidade de terceiros, que tenha cunho comercial, viole os <AColorido contrast={contrast} href="https://www.ohchr.org/EN/UDHR/Pages/Language.aspx?LangID=por" target="_blank">Direitos Humanos</AColorido> ou seja ilegal, ofensivo, ameaçador, que incite a violência, seja vulgar, preconceituoso ou racista (como descrito nos artigos 138-140 do Código Penal Brasileiro), ou de qualquer forma seja contrário às cláusulas destes Termos de Uso;</p>
+ </li>
+ <li>
+ <p>Assumir a identidade de outra pessoa, fÃsica ou jurÃdica; forjar cabeçalhos, ou de qualquer outra forma manipular identificadores, a fim de disfarçar a origem de qualquer material contido na plataforma, com sentido de desmoralizar, desprestigiar ou se fazer passar pela <strong>Plataforma Integrada de RED do MEC</strong>;</p>
+ </li>
+ <li>
+ <p>Disponibilizar conteúdo em desconformidade com a <AColorido contrast={contrast} href="http://www.planalto.gov.br/ccivil_03/leis/L9610.htm" target="_blank">legislação de Direito Autoral</AColorido>, incluindo conteúdo que viole marca registrada, patente, segredo de negócio, direito autoral ou qualquer outro direito de terceiro; disponibilizar conteúdo com qualquer tipo de propaganda, material promocional, spam (mensagens não solicitadas), correntes ou esquemas de pirâmide;</p>
+ </li>
+ <li>
+ <p>Disponibilizar conteúdo que contenha vÃrus ou qualquer outro código, arquivo ou programa de computador, com o propósito de interromper, destruir ou limitar a funcionalidade de qualquer software, hardware ou equipamento de telecomunicações;</p>
+ </li>
+ <li>
+ <p>Interferir ou interromper os serviços, as redes ou os servidores conectados à plataforma de modo a dificultar a utilização e o aproveitamento dos serviços por outros usuários, bem como obter ou tentar obter acesso não autorizado à plataforma;</p>
+ </li>
+ <li>
+ <p>Pedir votos, mencionar número de candidato ou expressar qualquer outra manifestação que se caracterize como propaganda polÃtica ou que viole as normas eleitorais.</p>
+ </li>
+ </ul>
+ </div>
+ </Grid>
+ <Grid item xs={12} md={1}></Grid>
+ <Grid item xs={12} md={4}>
+ <div style={{ color: "#00BCD4", fontSize: "18px" }}>
+ <p>BASICAMENTE,</p>
+ <p>O conteúdo disponibilizado pelo usuário é de sua inteira responsabilidade. Os recursos publicados tevem ter cunho educacional, em conformidade com estes Termos.</p>
+ <p>Todas informações publicadas na Plataforma MEC RED são cosideradas públicas, visÃveis por qualquer pessoa.</p>
+ <p>Não serão aceitos materiais com vocabulário ofensivo ou que invadam a privacidade de terceiros.</p>
+ <p>Caso o usuário entenda que algum conteúdo disponibilizado viole um direito ou as cláusulas deste Termo de Uso, deverá notificar a Plataforma por meio da funcionalidade “Reportarâ€.</p>
+ <p>O usuário poderá ter a sua conta removida em casos de violações sistemáticas destes Termos de Uso.</p>
+ </div>
+ </Grid>
</Grid>
- </Grid>
</ExpansionPanelDetailsColorido>
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
- expandIcon={<ExpandMoreIcon />}
+ contrast={contrast}
+ expandIcon={<ExpandMoreIcon style={contrast === "" ? {} : { color: "white" }} />}
aria-controls="panel4a-content"
id="panel4a-header"
>
- <TypographyColorido >4. Licença de uso do conteúdo</TypographyColorido>
+ <TypographyColorido contrast={contrast}>4. Licença de uso do conteúdo</TypographyColorido>
</ExpansionPanelSummaryColorido>
- <ExpansionPanelDetailsColorido>
- <Grid container spacing={3}>
- <Grid item xs={12} md={7}>
- <div>
- <p>A <strong>Plataforma Integrada de RED do MEC</strong>, entendida como obra intelectual em seu conjunto, é de titularidade do Ministério da Educação. Sua disponibilização ocorrerá de acordo com os termos da <AColorido href="https://creativecommons.org/licenses/by-sa/4.0/deed.pt_BR" target="_blank">Licença Pública Creative Commons do tipo CC BY-SA</AColorido>, exceto nos casos em que for indicado de outra forma.</p>
- <p>A licença CC BY SA é uma licença aberta e permite que seja feita cópia, redistribuição, adaptação e criação de obras derivadas, inclusive uso comercial, desde que o autor seja referenciado e que a licença da obra derivada seja também CC BY SA, garantindo o constante caráter aberto das produções.</p>
- <p>Aplica-se aos códigos de software desenvolvidos pela <strong>Plataforma Integrada de RED do MEC</strong> a <AColorido href="https://www.gnu.org/licenses/gpl.html" target="_blank">Licença Pública Geral Affero GNU GPL</AColorido> (veja a tradução livre <AColorido href="https://creativecommons.org/licenses/GPL/2.0/legalcode.pt" target="_blank">aqui</AColorido>), que visa garantir a liberdade de compartilhar e de modificar softwares livres.</p>
- <p>O usuário que utilizar a <strong>Plataforma Integrada de RED do MEC</strong> como repositório, ou seja, para armazenamento de conteúdo, garante que detém todos os direitos e autorizações para a publicação do conteúdo e deverá escolher uma das licenças Creative Commons elencadas no formulário no momento de cadastro do material. As licenças Creative Commons relacionadas abaixo serão aceitas na <strong>Plataforma Integrada de RED do MEC</strong>, pois garantem o devido crédito pela criação original do usuário e permitem as seguintes ações de uso:</p>
- <ul>
- <li>
- <p><strong>CC-BY</strong>: esta licença permite que outros distribuam, remixem, adaptem e criem a partir do seu trabalho, mesmo para fins comerciais, desde que lhe atribuam o devido crédito pela criação original.</p>
- </li>
- <li>
- <p><strong>CC-BY-SA</strong>: esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho, mesmo para fins comerciais, desde que lhe atribuam o devido crédito e que licenciem as novas criações sob termos idênticos.</p>
- </li>
- <li>
- <p><strong>CC-BY-NC</strong>: esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho para fins não comerciais e, embora os novos trabalhos tenham de lhe atribuir o devido crédito e não possam ser usados para fins comerciais, os usuários não têm de licenciar esses trabalhos derivados sob os mesmos termos.</p>
- </li>
- <li>
- <p><strong>CC-BY-NC-SA</strong>: esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho para fins não comerciais, desde que atribuam o devido crédito e que licenciem as novas criações sob termos idênticos.</p>
- </li>
- </ul>
- <p>Cabe ao Usuário verificar a compatibilidade da licença do material obtido na <strong>Plataforma Integrada de RED do MEC</strong> para utilizar em outras produções. Para consultar a compatibilidade das licenças Creative Commons, há uma ferramenta disponÃvel no site <AColorido href="http://aberta.org.br/compatibilidade/" target="_blank">Iniciativa Educação Aberta</AColorido>.</p>
- <p>O usuário da <strong>Plataforma Integrada de RED do MEC</strong> responde por todo o conteúdo publicado por meio de seu perfil, inclusive no que diz respeito à violação dos direitos autorais relacionados a tais postagens. Ao inserir um conteúdo de sua autoria para armazenamento, o usuário concorda e autoriza o licenciamento ao escolher uma das licenças abertas descritas no formulário de publicação, de forma a permitir não só o seu reconhecimento pleno de autoria, como também a possibilidade de replicação, reedição e reformulação de suas postagens por terceiros, com o objetivo de possibilitar o compartilhamento e a reutilização de conteúdo educacional.</p>
- <p>A <strong>Plataforma Integrada de RED do MEC</strong> poderá disponibilizar endereços eletrônicos de outros sÃtios externos, por meio de links, o que não significa que estes sejam de sua propriedade ou por ele operados. A presença de links para outros sites não implica relação de sociedade ou de supervisão da <strong>Plataforma Integrada de RED do MEC</strong> com esses sites e seus conteúdos. Os campos descritivos de cada recurso conterão informações especÃficas sobre as licenças dos mesmos. Cabe ao usuário verificar a licença de cada recurso.</p>
- <p>É vedado o uso não autorizado da obra ou seu uso em desconformidade com a legislação autoral e com os termos da licença mencionada.</p>
- </div>
- </Grid>
- <Grid item xs={12} md={1}></Grid>
- <Grid item xs={12} md={4}>
- <div style={{color:"#00BCD4",fontSize:"18px"}}>
- <p>BASICAMENTE.</p>
- <p>A Plataforma MEC RED, por ser entendida como obra intelectual, possui uma licença aberta de uso que permite a reutilização e o compartilhamento do conteúdo, inclusive para uso comercial, desde que o autor seja referenciado. Além disso, no caso de obras derivadas, a licença deverá ser a mesma da obra original.</p>
- <p>Os códigos de software desenvolvidos para a Plataforma, possuem uma licença pública, de software livre, que garante a liberdade de compartilhamento e modificação dos mesmos.</p>
- <p>Os conteúdos publicados e armazenados na Plataforma pelos usuários, serão sempre abertos, sendo permitidas ações de edição e compartilhamento desde que o autor seja referenciado. Cabe ao usuário decidir se o recurso poderá ser utilizado somente para fins não comerciais e se os trabalhos derivados deverão ter os termos idênticos ao original, selecionando uma das opções de licença disponÃveis no momento de upload do recurso.</p>
- </div>
+ <ExpansionPanelDetailsColorido contrast={contrast}>
+ <Grid container spacing={3}>
+ <Grid item xs={12} md={7}>
+ <div>
+ <p>A <strong>Plataforma Integrada de RED do MEC</strong>, entendida como obra intelectual em seu conjunto, é de titularidade do Ministério da Educação. Sua disponibilização ocorrerá de acordo com os termos da <AColorido contrast={contrast} href="https://creativecommons.org/licenses/by-sa/4.0/deed.pt_BR" target="_blank">Licença Pública Creative Commons do tipo CC BY-SA</AColorido>, exceto nos casos em que for indicado de outra forma.</p>
+ <p>A licença CC BY SA é uma licença aberta e permite que seja feita cópia, redistribuição, adaptação e criação de obras derivadas, inclusive uso comercial, desde que o autor seja referenciado e que a licença da obra derivada seja também CC BY SA, garantindo o constante caráter aberto das produções.</p>
+ <p>Aplica-se aos códigos de software desenvolvidos pela <strong>Plataforma Integrada de RED do MEC</strong> a <AColorido contrast={contrast} href="https://www.gnu.org/licenses/gpl.html" target="_blank">Licença Pública Geral Affero GNU GPL</AColorido> (veja a tradução livre <AColorido contrast={contrast} href="https://creativecommons.org/licenses/GPL/2.0/legalcode.pt" target="_blank">aqui</AColorido>), que visa garantir a liberdade de compartilhar e de modificar softwares livres.</p>
+ <p>O usuário que utilizar a <strong>Plataforma Integrada de RED do MEC</strong> como repositório, ou seja, para armazenamento de conteúdo, garante que detém todos os direitos e autorizações para a publicação do conteúdo e deverá escolher uma das licenças Creative Commons elencadas no formulário no momento de cadastro do material. As licenças Creative Commons relacionadas abaixo serão aceitas na <strong>Plataforma Integrada de RED do MEC</strong>, pois garantem o devido crédito pela criação original do usuário e permitem as seguintes ações de uso:</p>
+ <ul>
+ <li>
+ <p><strong>CC-BY</strong>: esta licença permite que outros distribuam, remixem, adaptem e criem a partir do seu trabalho, mesmo para fins comerciais, desde que lhe atribuam o devido crédito pela criação original.</p>
+ </li>
+ <li>
+ <p><strong>CC-BY-SA</strong>: esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho, mesmo para fins comerciais, desde que lhe atribuam o devido crédito e que licenciem as novas criações sob termos idênticos.</p>
+ </li>
+ <li>
+ <p><strong>CC-BY-NC</strong>: esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho para fins não comerciais e, embora os novos trabalhos tenham de lhe atribuir o devido crédito e não possam ser usados para fins comerciais, os usuários não têm de licenciar esses trabalhos derivados sob os mesmos termos.</p>
+ </li>
+ <li>
+ <p><strong>CC-BY-NC-SA</strong>: esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho para fins não comerciais, desde que atribuam o devido crédito e que licenciem as novas criações sob termos idênticos.</p>
+ </li>
+ </ul>
+ <p>Cabe ao Usuário verificar a compatibilidade da licença do material obtido na <strong>Plataforma Integrada de RED do MEC</strong> para utilizar em outras produções. Para consultar a compatibilidade das licenças Creative Commons, há uma ferramenta disponÃvel no site <AColorido contrast={contrast} href="http://aberta.org.br/compatibilidade/" target="_blank">Iniciativa Educação Aberta</AColorido>.</p>
+ <p>O usuário da <strong>Plataforma Integrada de RED do MEC</strong> responde por todo o conteúdo publicado por meio de seu perfil, inclusive no que diz respeito à violação dos direitos autorais relacionados a tais postagens. Ao inserir um conteúdo de sua autoria para armazenamento, o usuário concorda e autoriza o licenciamento ao escolher uma das licenças abertas descritas no formulário de publicação, de forma a permitir não só o seu reconhecimento pleno de autoria, como também a possibilidade de replicação, reedição e reformulação de suas postagens por terceiros, com o objetivo de possibilitar o compartilhamento e a reutilização de conteúdo educacional.</p>
+ <p>A <strong>Plataforma Integrada de RED do MEC</strong> poderá disponibilizar endereços eletrônicos de outros sÃtios externos, por meio de links, o que não significa que estes sejam de sua propriedade ou por ele operados. A presença de links para outros sites não implica relação de sociedade ou de supervisão da <strong>Plataforma Integrada de RED do MEC</strong> com esses sites e seus conteúdos. Os campos descritivos de cada recurso conterão informações especÃficas sobre as licenças dos mesmos. Cabe ao usuário verificar a licença de cada recurso.</p>
+ <p>É vedado o uso não autorizado da obra ou seu uso em desconformidade com a legislação autoral e com os termos da licença mencionada.</p>
+ </div>
+ </Grid>
+ <Grid item xs={12} md={1}></Grid>
+ <Grid item xs={12} md={4}>
+ <div style={{ color: "#00BCD4", fontSize: "18px" }}>
+ <p>BASICAMENTE.</p>
+ <p>A Plataforma MEC RED, por ser entendida como obra intelectual, possui uma licença aberta de uso que permite a reutilização e o compartilhamento do conteúdo, inclusive para uso comercial, desde que o autor seja referenciado. Além disso, no caso de obras derivadas, a licença deverá ser a mesma da obra original.</p>
+ <p>Os códigos de software desenvolvidos para a Plataforma, possuem uma licença pública, de software livre, que garante a liberdade de compartilhamento e modificação dos mesmos.</p>
+ <p>Os conteúdos publicados e armazenados na Plataforma pelos usuários, serão sempre abertos, sendo permitidas ações de edição e compartilhamento desde que o autor seja referenciado. Cabe ao usuário decidir se o recurso poderá ser utilizado somente para fins não comerciais e se os trabalhos derivados deverão ter os termos idênticos ao original, selecionando uma das opções de licença disponÃveis no momento de upload do recurso.</p>
+ </div>
+ </Grid>
</Grid>
- </Grid>
</ExpansionPanelDetailsColorido>
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
- expandIcon={<ExpandMoreIcon />}
+ contrast={contrast}
+ expandIcon={<ExpandMoreIcon style={contrast === "" ? {} : { color: "white" }} />}
aria-controls="panel5a-content"
id="panel5a-header"
>
- <TypographyColorido >5. Práticas de uso e armazenamento</TypographyColorido>
- </ExpansionPanelSummaryColorido>
- <ExpansionPanelDetailsColorido>
- <Grid container spacing={3}>
- <Grid item xs={12} md={7}>
- <div>
- <p>A depender da capacidade de espaço no servidor, a <strong>Plataforma Integrada de RED do MEC</strong> poderá retirar conteúdos armazenados na plataforma, observados os critérios de antiguidade e do tamanho dos arquivos disponibilizados, mediante notificação e justificativa ao usuário.</p>
- </div>
- </Grid>
- <Grid item xs={12} md={1}></Grid>
- <Grid item xs={12} md={4}>
- <div style={{color:"#00BCD4",fontSize:"18px"}}>
- <p>BASICAMENTE,</p>
- <p>O usuário será notificado caso algum conteúdo tenha que ser retirado da Plataforma por falta de espaço no servidor.</p>
- </div>
+ <TypographyColorido contrast={contrast}>5. Práticas de uso e armazenamento</TypographyColorido>
+ </ExpansionPanelSummaryColorido >
+ <ExpansionPanelDetailsColorido contrast={contrast}>
+ <Grid container spacing={3}>
+ <Grid item xs={12} md={7}>
+ <div>
+ <p>A depender da capacidade de espaço no servidor, a <strong>Plataforma Integrada de RED do MEC</strong> poderá retirar conteúdos armazenados na plataforma, observados os critérios de antiguidade e do tamanho dos arquivos disponibilizados, mediante notificação e justificativa ao usuário.</p>
+ </div>
+ </Grid>
+ <Grid item xs={12} md={1}></Grid>
+ <Grid item xs={12} md={4}>
+ <div style={{ color: "#00BCD4", fontSize: "18px" }}>
+ <p>BASICAMENTE,</p>
+ <p>O usuário será notificado caso algum conteúdo tenha que ser retirado da Plataforma por falta de espaço no servidor.</p>
+ </div>
+ </Grid>
</Grid>
- </Grid>
</ExpansionPanelDetailsColorido>
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
- expandIcon={<ExpandMoreIcon />}
+ contrast={contrast}
+ expandIcon={<ExpandMoreIcon style={contrast === "" ? {} : { color: "white" }} />}
aria-controls="panel6a-content"
id="panel6a-header"
>
- <TypographyColorido >6. Privacidade da informação</TypographyColorido>
+ <TypographyColorido contrast={contrast}>6. Privacidade da informação</TypographyColorido>
</ExpansionPanelSummaryColorido>
- <ExpansionPanelDetailsColorido>
- <Grid container spacing={3}>
- <Grid item xs={12} md={7}>
- <div >
- <p>A <strong>Plataforma Integrada de RED do MEC</strong> tomará todas as medidas possÃveis para manter a confidencialidade e a segurança de suas informações. No entanto, a <strong>Plataforma Integrada de RED do MEC</strong> não responderá por prejuÃzos que possam ser derivados da violação dessas medidas por parte de terceiros que subvertam os sistemas de segurança para acessar as informações de Usuários.</p>
- <p>A <strong>Plataforma Integrada de RED do MEC</strong> solicitará alguns dados pessoais para seu cadastro. Além disso, dados sobre a interação dos usuários e seu comportamento na plataforma são coletados de maneira automática. Esses dados nunca serão vendidos, alugados, trocados ou fornecidos para fins comerciais. No entanto, o MEC poderá colaborar com instituições públicas parceiras, como universidades, para análise desses dados bem como de qualquer conteúdo da plataforma para para fins de pesquisa, divulgação e melhoria dos serviços. Dados pessoais que possam identificá-lo nunca serão compartilhados.</p>
- <p>Dados que não identificam o usuário serão armazenados indefinidamente para fins de pesquisa.</p>
- </div>
- </Grid>
- <Grid item xs={12} md={1}></Grid>
- <Grid item xs={12} md={4}>
- <div style={{color:"#00BCD4",fontSize:"18px"}}>
- <p>BASICAMENTE,</p>
- <p>Para manter a confidencialidade e a segurança dos dados, a Plataforma MEC RED tomará todas as medidas possÃveis.</p>
- <p>Os dados sobre interação e comportamento dos usuários nunca serão comercializados, mas poderão ser analisados para fins de pesquisa, divulgação e melhorias, sem a identificação dos usuários.</p>
- </div>
+ <ExpansionPanelDetailsColorido contrast={contrast}>
+ <Grid container spacing={3}>
+ <Grid item xs={12} md={7}>
+ <div >
+ <p>A <strong>Plataforma Integrada de RED do MEC</strong> tomará todas as medidas possÃveis para manter a confidencialidade e a segurança de suas informações. No entanto, a <strong>Plataforma Integrada de RED do MEC</strong> não responderá por prejuÃzos que possam ser derivados da violação dessas medidas por parte de terceiros que subvertam os sistemas de segurança para acessar as informações de Usuários.</p>
+ <p>A <strong>Plataforma Integrada de RED do MEC</strong> solicitará alguns dados pessoais para seu cadastro. Além disso, dados sobre a interação dos usuários e seu comportamento na plataforma são coletados de maneira automática. Esses dados nunca serão vendidos, alugados, trocados ou fornecidos para fins comerciais. No entanto, o MEC poderá colaborar com instituições públicas parceiras, como universidades, para análise desses dados bem como de qualquer conteúdo da plataforma para para fins de pesquisa, divulgação e melhoria dos serviços. Dados pessoais que possam identificá-lo nunca serão compartilhados.</p>
+ <p>Dados que não identificam o usuário serão armazenados indefinidamente para fins de pesquisa.</p>
+ </div>
+ </Grid>
+ <Grid item xs={12} md={1}></Grid>
+ <Grid item xs={12} md={4}>
+ <div style={{ color: "#00BCD4", fontSize: "18px" }}>
+ <p>BASICAMENTE,</p>
+ <p>Para manter a confidencialidade e a segurança dos dados, a Plataforma MEC RED tomará todas as medidas possÃveis.</p>
+ <p>Os dados sobre interação e comportamento dos usuários nunca serão comercializados, mas poderão ser analisados para fins de pesquisa, divulgação e melhorias, sem a identificação dos usuários.</p>
+ </div>
+ </Grid>
</Grid>
- </Grid>
</ExpansionPanelDetailsColorido>
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
- expandIcon={<ExpandMoreIcon />}
+ contrast={contrast}
+ expandIcon={<ExpandMoreIcon style={contrast === "" ? {} : { color: "white" }} />}
aria-controls="panel7a-content"
id="panel7a-header"
>
- <TypographyColorido >7. Violação no sistema ou na base de dados</TypographyColorido>
+ <TypographyColorido contrast={contrast}>7. Violação no sistema ou na base de dados</TypographyColorido>
</ExpansionPanelSummaryColorido>
- <ExpansionPanelDetailsColorido>
+ <ExpansionPanelDetailsColorido contrast={contrast}>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div >
@@ -335,7 +339,7 @@ export default function SimpleExpansionPanel() {
</Grid>
<Grid item xs={12} md={1}></Grid>
<Grid item xs={12} md={4}>
- <div style={{color:"#00BCD4",fontSize:"18px"}}>
+ <div style={{ color: "#00BCD4", fontSize: "18px" }}>
<p>BASICAMENTE,</p>
<p>Serão aplicadas as sanções previstas ou as ações legais ao responsável por intromissão, ou tentativa de intromissão, na Plataforma MEC RED.</p>
</div>
@@ -345,172 +349,178 @@ export default function SimpleExpansionPanel() {
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
- expandIcon={<ExpandMoreIcon />}
+ contrast={contrast}
+ expandIcon={<ExpandMoreIcon style={contrast === "" ? {} : { color: "white" }} />}
aria-controls="panel8a-content"
id="panel8a-header"
>
- <TypographyColorido >8. Sanções</TypographyColorido>
+ <TypographyColorido contrast={contrast}>8. Sanções</TypographyColorido>
</ExpansionPanelSummaryColorido>
- <ExpansionPanelDetailsColorido>
- <Grid container spacing={3}>
- <Grid item xs={12} md={7}>
- <div >
- <p>Sem prejuÃzo de outras medidas, a <strong>Plataforma Integrada de RED do MEC</strong> poderá advertir, bloquear, desativar ou remover, temporária ou definitivamente, a conta e conteúdos disponibilizados por um usuário, em qualquer momento, e iniciar as ações legais cabÃveis caso:</p>
- <ul>
- <li>
- <p>o usuário não cumprir qualquer dispositivo destes Termos de Uso;</p>
- </li>
- <li>
- <p>o usuário praticar atos fraudulentos ou dolosos;</p>
- </li>
- <li>
- <p>o MEC entender que as postagens, o conteúdo disponibilizado ou qualquer atitude do usuário tenham causado algum dano a terceiros ou à própria Plataforma, ou tenham a potencialidade de assim o fazer.</p>
- </li>
- </ul>
- </div>
- </Grid>
- <Grid item xs={12} md={1}></Grid>
- <Grid item xs={12} md={4}>
- <div style={{color:"#00BCD4",fontSize:"18px"}}>
- <p>BASICAMENTE,</p>
- <p>No caso do usuário não cumprir qualquer item destes Termos, praticar atos fraudulentos ou dolosos ou causar dano a alguém ou à Plataforma MEC RED, sua conta poderá ser bloqueada, desativada ou removida, em caráter temporário ou definitivo.</p>
- </div>
+ <ExpansionPanelDetailsColorido contrast={contrast}>
+ <Grid container spacing={3}>
+ <Grid item xs={12} md={7}>
+ <div >
+ <p>Sem prejuÃzo de outras medidas, a <strong>Plataforma Integrada de RED do MEC</strong> poderá advertir, bloquear, desativar ou remover, temporária ou definitivamente, a conta e conteúdos disponibilizados por um usuário, em qualquer momento, e iniciar as ações legais cabÃveis caso:</p>
+ <ul>
+ <li>
+ <p>o usuário não cumprir qualquer dispositivo destes Termos de Uso;</p>
+ </li>
+ <li>
+ <p>o usuário praticar atos fraudulentos ou dolosos;</p>
+ </li>
+ <li>
+ <p>o MEC entender que as postagens, o conteúdo disponibilizado ou qualquer atitude do usuário tenham causado algum dano a terceiros ou à própria Plataforma, ou tenham a potencialidade de assim o fazer.</p>
+ </li>
+ </ul>
+ </div>
+ </Grid>
+ <Grid item xs={12} md={1}></Grid>
+ <Grid item xs={12} md={4}>
+ <div style={{ color: "#00BCD4", fontSize: "18px" }}>
+ <p>BASICAMENTE,</p>
+ <p>No caso do usuário não cumprir qualquer item destes Termos, praticar atos fraudulentos ou dolosos ou causar dano a alguém ou à Plataforma MEC RED, sua conta poderá ser bloqueada, desativada ou removida, em caráter temporário ou definitivo.</p>
+ </div>
+ </Grid>
</Grid>
- </Grid>
</ExpansionPanelDetailsColorido>
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
- expandIcon={<ExpandMoreIcon />}
+ contrast={contrast}
+ expandIcon={<ExpandMoreIcon style={contrast === "" ? {} : { color: "white" }} />}
aria-controls="panel9a-content"
id="panel9a-header"
>
- <TypographyColorido >9. Limitações de responsabilidade</TypographyColorido>
+ <TypographyColorido contrast={contrast}>9. Limitações de responsabilidade</TypographyColorido>
</ExpansionPanelSummaryColorido>
- <ExpansionPanelDetailsColorido>
- <Grid container spacing={3}>
- <Grid item xs={12} md={7}>
- <div >
- <p>Em nenhuma situação a <strong>Plataforma Integrada de RED do MEC</strong> e o Ministério da Educação serão responsáveis por quaisquer danos, prejuÃzos ou outro efeito, direto ou indireto, relacionados ao uso, por parte de seus usuários, leitores ou de qualquer outra pessoa, deste sÃtio, de seu conteúdo ou de qualquer outro website mencionado.</p>
- <p>O usuário reconhece que será integralmente responsável pelos materiais enviados à <strong>Plataforma Integrada de RED do MEC</strong> e se compromete a responder por quaisquer reivindicações, demandas, penalidades e todos os danos, perdas e despesas, causados à <strong>Plataforma Integrada de RED do MEC</strong>.</p>
- <p>Todo autor de conteúdo exibido na <strong>Plataforma Integrada de RED do MEC</strong> retém os seus direitos e responsabilidades autorais, nos termos da Lei n. 9.610/1998, sem prejuÃzo dos termos de licenciamento de livre uso, conforme exposto nestes Termos de Uso, no item “Licença de uso do conteúdoâ€.</p>
- <p>Se o usuário verificar que qualquer comentário ou participação na <strong>Plataforma Integrada de RED do MEC</strong> infringem um direito de sua titularidade ou de um terceiro, deverá entrar em contato imediatamente na forma indicada neste mesmo documento, no item “Como reportar violaçõesâ€.</p>
- </div>
- </Grid>
- <Grid item xs={12} md={1}></Grid>
- <Grid item xs={12} md={4}>
- <div style={{color:"#00BCD4",fontSize:"18px"}}>
- <p>BASICAMENTE,</p>
- <p>A Plataforma MEC RED e o Ministério da Educação não serão responsáveis por danos, prejuÃzos ou outro efeito relacionados ao uso da Plataforma por parte de qualquer pessoa.</p>
- <p>O usuário é integralmente responsável pelos materiais enviados e por qualquer conteúdo publicado, se comprometendo a responder por eles, quando necessário.</p>
- </div>
+ <ExpansionPanelDetailsColorido contrast={contrast}>
+ <Grid container spacing={3}>
+ <Grid item xs={12} md={7}>
+ <div >
+ <p>Em nenhuma situação a <strong>Plataforma Integrada de RED do MEC</strong> e o Ministério da Educação serão responsáveis por quaisquer danos, prejuÃzos ou outro efeito, direto ou indireto, relacionados ao uso, por parte de seus usuários, leitores ou de qualquer outra pessoa, deste sÃtio, de seu conteúdo ou de qualquer outro website mencionado.</p>
+ <p>O usuário reconhece que será integralmente responsável pelos materiais enviados à <strong>Plataforma Integrada de RED do MEC</strong> e se compromete a responder por quaisquer reivindicações, demandas, penalidades e todos os danos, perdas e despesas, causados à <strong>Plataforma Integrada de RED do MEC</strong>.</p>
+ <p>Todo autor de conteúdo exibido na <strong>Plataforma Integrada de RED do MEC</strong> retém os seus direitos e responsabilidades autorais, nos termos da Lei n. 9.610/1998, sem prejuÃzo dos termos de licenciamento de livre uso, conforme exposto nestes Termos de Uso, no item “Licença de uso do conteúdoâ€.</p>
+ <p>Se o usuário verificar que qualquer comentário ou participação na <strong>Plataforma Integrada de RED do MEC</strong> infringem um direito de sua titularidade ou de um terceiro, deverá entrar em contato imediatamente na forma indicada neste mesmo documento, no item “Como reportar violaçõesâ€.</p>
+ </div>
+ </Grid>
+ <Grid item xs={12} md={1}></Grid>
+ <Grid item xs={12} md={4}>
+ <div style={{ color: "#00BCD4", fontSize: "18px" }}>
+ <p>BASICAMENTE,</p>
+ <p>A Plataforma MEC RED e o Ministério da Educação não serão responsáveis por danos, prejuÃzos ou outro efeito relacionados ao uso da Plataforma por parte de qualquer pessoa.</p>
+ <p>O usuário é integralmente responsável pelos materiais enviados e por qualquer conteúdo publicado, se comprometendo a responder por eles, quando necessário.</p>
+ </div>
+ </Grid>
</Grid>
- </Grid>
</ExpansionPanelDetailsColorido>
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
- expandIcon={<ExpandMoreIcon />}
+ contrast={contrast}
+ expandIcon={<ExpandMoreIcon style={contrast === "" ? {} : { color: "white" }} />}
aria-controls="panel10a-content"
id="panel10a-header"
>
- <TypographyColorido >10.Inexistência de vÃnculo</TypographyColorido>
+ <TypographyColorido contrast={contrast}>10.Inexistência de vÃnculo</TypographyColorido>
</ExpansionPanelSummaryColorido>
- <ExpansionPanelDetailsColorido>
- <Grid container spacing={3}>
- <Grid item xs={12} md={7}>
- <div >
- <p>A adesão a estes Termos de Uso pelo usuário não gera nenhum contrato, mandato, franquia ou vÃnculo de tipo trabalhista, societário, de parceria ou associativo entre a <strong>Plataforma Integrada de RED do MEC</strong> e o usuário.</p>
- </div>
- </Grid>
- <Grid item xs={12} md={1}></Grid>
- <Grid item xs={12} md={4}>
- <div style={{color:"#00BCD4",fontSize:"18px"}}>
- <p>BASICAMENTE,</p>
- <p>Não há nenhum tipo de vÃnculo (trabalhista, parceria, etc) entre a Plataforma e o usuário.</p>
- </div>
+ <ExpansionPanelDetailsColorido contrast={contrast}>
+ <Grid container spacing={3}>
+ <Grid item xs={12} md={7}>
+ <div >
+ <p>A adesão a estes Termos de Uso pelo usuário não gera nenhum contrato, mandato, franquia ou vÃnculo de tipo trabalhista, societário, de parceria ou associativo entre a <strong>Plataforma Integrada de RED do MEC</strong> e o usuário.</p>
+ </div>
+ </Grid>
+ <Grid item xs={12} md={1}></Grid>
+ <Grid item xs={12} md={4}>
+ <div style={{ color: "#00BCD4", fontSize: "18px" }}>
+ <p>BASICAMENTE,</p>
+ <p>Não há nenhum tipo de vÃnculo (trabalhista, parceria, etc) entre a Plataforma e o usuário.</p>
+ </div>
+ </Grid>
</Grid>
- </Grid>
</ExpansionPanelDetailsColorido>
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
- expandIcon={<ExpandMoreIcon />}
+ contrast={contrast}
+ expandIcon={<ExpandMoreIcon style={contrast === "" ? {} : { color: "white" }} />}
aria-controls="panel11a-content"
id="panel11a-header"
>
- <TypographyColorido >11. Como reportar violações</TypographyColorido>
+ <TypographyColorido contrast={contrast}>11. Como reportar violações</TypographyColorido>
</ExpansionPanelSummaryColorido>
- <ExpansionPanelDetailsColorido>
- <Grid container spacing={3}>
- <Grid item xs={12} md={7}>
- <div >
- <p>Nem todo o conteúdo disponibilizado pelo usuário nas áreas de comentário e debates é lido pela administração da <strong>Plataforma Integrada de RED do MEC</strong>.</p>
- <p>Se algum artigo, notÃcia, comentário ou outro conteúdo da <strong>Plataforma Integrada de RED do MEC</strong> violar qualquer direito do usuário, de terceiros ou a legislação aplicável, o usuário poderá usar a funcionalidade "Reportar" nas páginas que houver essa opção ou, quando não houver, entrar em contato com a administração da <strong>Plataforma Integrada de RED do MEC</strong> pelo formulário de “Contatoâ€, mencionando de forma especÃfica e detalhada a violação.</p>
- <p>De posse das informações, a <strong>Plataforma Integrada de RED do MEC</strong> poderá analisar e resolver a questão tão breve quanto possÃvel. Caso a informação esteja incompleta, ou com detalhamento insuficiente, a <strong>Plataforma Integrada de RED do MEC</strong> poderá entrar em contato para solicitar a complementação, possivelmente atrasando a providência desejada.</p>
- </div>
- </Grid>
- <Grid item xs={12} md={1}></Grid>
- <Grid item xs={12} md={4}>
- <div style={{color:"#00BCD4",fontSize:"18px"}}>
- <p>BASICAMENTE,</p>
- <p>O usuário poderá reportar,utilizando a funcionalidade “Reportar†ou pelo formulário de “Contatoâ€, qualquer tipo de conteúdo publicado na Plataforma MEC RED que viole os direitos dos usuários, de terceiros ou a legislação aplicável.</p>
- </div>
+ <ExpansionPanelDetailsColorido contrast={contrast}>
+ <Grid container spacing={3}>
+ <Grid item xs={12} md={7}>
+ <div >
+ <p>Nem todo o conteúdo disponibilizado pelo usuário nas áreas de comentário e debates é lido pela administração da <strong>Plataforma Integrada de RED do MEC</strong>.</p>
+ <p>Se algum artigo, notÃcia, comentário ou outro conteúdo da <strong>Plataforma Integrada de RED do MEC</strong> violar qualquer direito do usuário, de terceiros ou a legislação aplicável, o usuário poderá usar a funcionalidade "Reportar" nas páginas que houver essa opção ou, quando não houver, entrar em contato com a administração da <strong>Plataforma Integrada de RED do MEC</strong> pelo formulário de “Contatoâ€, mencionando de forma especÃfica e detalhada a violação.</p>
+ <p>De posse das informações, a <strong>Plataforma Integrada de RED do MEC</strong> poderá analisar e resolver a questão tão breve quanto possÃvel. Caso a informação esteja incompleta, ou com detalhamento insuficiente, a <strong>Plataforma Integrada de RED do MEC</strong> poderá entrar em contato para solicitar a complementação, possivelmente atrasando a providência desejada.</p>
+ </div>
+ </Grid>
+ <Grid item xs={12} md={1}></Grid>
+ <Grid item xs={12} md={4}>
+ <div style={{ color: "#00BCD4", fontSize: "18px" }}>
+ <p>BASICAMENTE,</p>
+ <p>O usuário poderá reportar,utilizando a funcionalidade “Reportar†ou pelo formulário de “Contatoâ€, qualquer tipo de conteúdo publicado na Plataforma MEC RED que viole os direitos dos usuários, de terceiros ou a legislação aplicável.</p>
+ </div>
+ </Grid>
</Grid>
- </Grid>
</ExpansionPanelDetailsColorido>
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
- expandIcon={<ExpandMoreIcon />}
+ contrast={contrast}
+ expandIcon={<ExpandMoreIcon style={contrast === "" ? {} : { color: "white" }} />}
aria-controls="panel12a-content"
id="panel12a-header"
>
- <TypographyColorido >12. Modificações nos Termos de Uso</TypographyColorido>
+ <TypographyColorido contrast={contrast}>12. Modificações nos Termos de Uso</TypographyColorido>
</ExpansionPanelSummaryColorido>
- <ExpansionPanelDetailsColorido>
- <Grid container spacing={3}>
- <Grid item xs={12} md={7}>
- <div >
- <p>A <strong>Plataforma Integrada de RED do MEC</strong> poderá alterar, a qualquer tempo, estes Termos de Uso, mediante declaração pública no site, visando seu aprimoramento e melhoria dos serviços prestados. Os novos Termos de Uso entrarão em vigor a partir de sua publicação na plataforma. Usuários cadastrados receberão notificação dessa alteração no e-mail de cadastro e haverá divulgação/chamada na página principal do Sistema. No prazo de 72 (setenta e duas) horas, contadas a partir da publicação das modificações, o usuário poderá comunicar-se com a <strong>Plataforma Integrada de RED do MEC</strong>, caso não concorde com os novos Termos de Uso. Nesse caso, a conta do usuário será desativada. Não havendo manifestações no prazo estipulado, entender-se-á que o Usuário aceitou tacitamente os novos Termos de Uso.</p>
- </div>
- </Grid>
- <Grid item xs={12} md={1}></Grid>
- <Grid item xs={12} md={4}>
- <div style={{color:"#00BCD4",fontSize:"18px"}}>
- <p>BASICAMENTE,</p>
- <p>Com o objetivo de melhorar os serviços prestados, estes Termos podem ser alterados, a qualquer tempo. Caso ocorra, os usuários serão notificados e terão um perÃodo para se manifestar em relação à s alterações.</p>
- </div>
+ <ExpansionPanelDetailsColorido contrast={contrast}>
+ <Grid container spacing={3}>
+ <Grid item xs={12} md={7}>
+ <div >
+ <p>A <strong>Plataforma Integrada de RED do MEC</strong> poderá alterar, a qualquer tempo, estes Termos de Uso, mediante declaração pública no site, visando seu aprimoramento e melhoria dos serviços prestados. Os novos Termos de Uso entrarão em vigor a partir de sua publicação na plataforma. Usuários cadastrados receberão notificação dessa alteração no e-mail de cadastro e haverá divulgação/chamada na página principal do Sistema. No prazo de 72 (setenta e duas) horas, contadas a partir da publicação das modificações, o usuário poderá comunicar-se com a <strong>Plataforma Integrada de RED do MEC</strong>, caso não concorde com os novos Termos de Uso. Nesse caso, a conta do usuário será desativada. Não havendo manifestações no prazo estipulado, entender-se-á que o Usuário aceitou tacitamente os novos Termos de Uso.</p>
+ </div>
+ </Grid>
+ <Grid item xs={12} md={1}></Grid>
+ <Grid item xs={12} md={4}>
+ <div style={{ color: "#00BCD4", fontSize: "18px" }}>
+ <p>BASICAMENTE,</p>
+ <p>Com o objetivo de melhorar os serviços prestados, estes Termos podem ser alterados, a qualquer tempo. Caso ocorra, os usuários serão notificados e terão um perÃodo para se manifestar em relação à s alterações.</p>
+ </div>
+ </Grid>
</Grid>
- </Grid>
</ExpansionPanelDetailsColorido>
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
- expandIcon={<ExpandMoreIcon />}
+ contrast={contrast}
+ expandIcon={<ExpandMoreIcon style={contrast === "" ? {} : { color: "white" }} />}
aria-controls="panel13a-content"
id="panel13a-header"
>
- <TypographyColorido >13. Foro</TypographyColorido>
+ <TypographyColorido contrast={contrast}>13. Foro</TypographyColorido>
</ExpansionPanelSummaryColorido>
- <ExpansionPanelDetailsColorido>
- <Grid container spacing={3}>
- <Grid item xs={12} md={7}>
- <div >
- <p>Para dirimir dúvidas ou litÃgios referentes à interpretação e ao cumprimento destes Termos de Uso, as partes se submeterão ao Foro da Justiça Federal, Seção Judiciária do Distrito Federal.</p>
- </div>
- </Grid>
- <Grid item xs={12} md={1}></Grid>
- <Grid item xs={12} md={4}>
- <div style={{color:"#00BCD4",fontSize:"18px"}}>
- <p>BASICAMENTE,</p>
- <p>Em caso de dúvidas ou litÃgios, é preciso recorrer ao Foro da Justiça Federal.</p>
- </div>
+ <ExpansionPanelDetailsColorido contrast={contrast}>
+ <Grid container spacing={3}>
+ <Grid item xs={12} md={7}>
+ <div >
+ <p>Para dirimir dúvidas ou litÃgios referentes à interpretação e ao cumprimento destes Termos de Uso, as partes se submeterão ao Foro da Justiça Federal, Seção Judiciária do Distrito Federal.</p>
+ </div>
+ </Grid>
+ <Grid item xs={12} md={1}></Grid>
+ <Grid item xs={12} md={4}>
+ <div style={{ color: "#00BCD4", fontSize: "18px" }}>
+ <p>BASICAMENTE,</p>
+ <p>Em caso de dúvidas ou litÃgios, é preciso recorrer ao Foro da Justiça Federal.</p>
+ </div>
+ </Grid>
</Grid>
- </Grid>
</ExpansionPanelDetailsColorido>
</ExpansionPanelTeste>
- </div>
+ </div >
);
}
diff --git a/src/Components/Firulas.js b/src/Components/Firulas.js
index 6fd99c1d..d54f369d 100644
--- a/src/Components/Firulas.js
+++ b/src/Components/Firulas.js
@@ -1,8 +1,9 @@
-import React, {useState} from 'react'
+import React, { useState, useContext } from 'react';
+import { Store } from '../Store'
import styled from 'styled-components'
import Rating from '@material-ui/lab/Rating';
import StarBorderIcon from '@material-ui/icons/StarBorder';
-import {LikeCounter, ButtonNoWidth} from '../Components/ResourceCardFunction.js'
+import { LikeCounter, ButtonNoWidth } from '../Components/ResourceCardFunction.js'
import FavoriteIcon from '@material-ui/icons/Favorite';
import { putRequest } from './HelperFunctions/getAxiosConfig'
import SignUpModal from './SignUpModal'
@@ -10,8 +11,10 @@ import LoginModal from './LoginModal.js'
import SnackBar from './SnackbarComponent';
-export default function Firulas (props) {
- const [liked, setLiked] = useState(props.liked)
+export default function Firulas(props) {
+ const { state } = useContext(Store);
+ const [liked, toggleLiked] = useState(props.liked)
+ const [likesCount, setLikesCount] = useState(props.likesCount)
const [signUpOpen, setSignUp] = useState(false)
const [loginOpen, setLogin] = useState(false)
@@ -21,8 +24,31 @@ export default function Firulas (props) {
toggleLiked(!liked)
setLikesCount(data.count)
}
+
const handleLike = () => {
- putRequest(`/learning_objects/${props.recursoId}/like/`, {}, handleSuccess, (error) => {console.log(error)})
+ if (!state.currentUser.id) {
+ handleLogin()
+ }
+ else {
+ const url = `/learning_objects/${props.recursoId}/like/`
+
+ putRequest(url, {}, handleSuccessLike, (error) => { console.log(error) })
+ }
+ }
+
+ const handleLogin = () => {
+ setLogin(!loginOpen)
+ }
+
+ const handleSignUp = () => {
+ setSignUp(!signUpOpen)
+ }
+
+ function toggleLoginSnackbar(reason) {
+ if (reason === 'clickaway') {
+ return;
+ }
+ handleSuccessfulLogin(false);
}
return (
@@ -40,20 +66,17 @@ export default function Firulas (props) {
text={"Você está conectado(a)!"}
/>
<Rating
- name="customized-empty"
- value={props.rating*10}
- precision={0.5}
- readOnly
- style={{color:"#666", marginRight : "20px"}}
- emptyIcon={<StarBorderIcon fontSize="inherit" />}
+ className={`${props.contrast}IconColor`}
+ name="customized-empty"
+ value={props.rating}
+ readOnly
+ emptyIcon={<StarBorderIcon className={`${props.contrast}IconColor`} fontSize="inherit"/>}
/>
- <LikeCounter style={{marginLeft : "-3px", display : "flex", alignItems : "center"}}>
- <span>{props.likesCount}</span>
-
+ <LikeCounter>
+ <span>{likesCount}</span>
<ButtonNoWidth onClick={handleLike}>
- <FavoriteIcon style={{color : liked ? "red" : "#666" }}/>
+ <FavoriteIcon className={`${props.contrast}LinkColor`} style={ props.contrast === "" ? {color: liked ? "red" : "#666"} : {color: liked ? "red" : "white"} } />
</ButtonNoWidth>
-
</LikeCounter>
</ConteinerFirulas>
)
diff --git a/src/Components/FollowCollectionButton.js b/src/Components/FollowCollectionButton.js
index e89f8901..dd85205b 100644
--- a/src/Components/FollowCollectionButton.js
+++ b/src/Components/FollowCollectionButton.js
@@ -188,8 +188,8 @@ export default function FollowCollectionButton(props) {
color={snackInfo.color}
/>
<FollowButton
+ contrast={props.contrast}
variant={variant}
- color="primary"
startIcon={icon}
size="small"
onMouseEnter={handleMouseEnter}
@@ -199,11 +199,13 @@ export default function FollowCollectionButton(props) {
<ButtonText>{button_text}</ButtonText>
</FollowButton>
<SignUpModal
+ contrast={props.contrast}
open={sign_up_open}
handleClose={() => setSignUpOpen(false)}
openLogin={handleOpenLogin}
/>
<LoginModal
+ contrast={props.contrast}
openSnackbar={handleOpenSnackSignIn}
open={open_login}
handleClose={() => setOpenLogin(false)}
@@ -219,6 +221,10 @@ const ButtonText = styled.span`
font-size: 1.2em;
`
const FollowButton = styled(Button)`
+ color: ${props => props.contrast === "" ? "white !important" : "yellow !important"};
+ background-color: ${props => props.contrast === "" ? "#3f51b5 !important" : "black !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
+ border: ${props => props.contrast === "" ? "none !important" : "1px solid white !important"};
padding-left: 10;
padding-right: 10;
width: 250px;
diff --git a/src/Components/FormInput.js b/src/Components/FormInput.js
index 5c6a802f..d6dda2b5 100644
--- a/src/Components/FormInput.js
+++ b/src/Components/FormInput.js
@@ -80,7 +80,7 @@ const StyledTextField = styled(TextField)`
}
label.Mui-focused {
- color : #00bcd4;
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
}
label.Mui-focused.Mui-error {
@@ -93,25 +93,31 @@ const StyledTextField = styled(TextField)`
`
const useStyles = makeStyles(theme => ({
- container: {
- display: "flex",
- flexWrap: "wrap",
- padding: "2px"
- },
- textField: {
- maxWidth: "100%",
- fontSize: "15px",
- fontWeight: "lighter",
- color: "inherit",
- width: "100%"
- }
+ container: {
+ display: "flex",
+ flexWrap: "wrap",
+ padding: "2px"
+ },
+ darkTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "white",
+ width: "100%"
+ },
+ lightTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "black",
+ width: "100%"
+ }
}));
export default function FormInput(props) {
- const classes = useStyles();
-
- return (
+ const classes = useStyles();
+ return (
<StyledTextField
contrast={props.contrast}
key={props.key}
diff --git a/src/Components/FormationMaterialDescription.js b/src/Components/FormationMaterialDescription.js
index dc984d1f..f3487714 100644
--- a/src/Components/FormationMaterialDescription.js
+++ b/src/Components/FormationMaterialDescription.js
@@ -25,31 +25,32 @@ export default function FormationMaterialDescription(props) {
const topico_obj = props.topico_obj;
return (
- <WrappingCard>
+ <WrappingCard contrast={props.contrast}>
<Grid container
+ style={props.contrast === "" ? {} : {backgroundColor: "black"}}
direction="row"
justify="flex-start"
alignItems="center"
>
<Grid item xs={12} md={8}>
- <TextContainer>
- <Title>
+ <TextContainer contrast={props.contrast}>
+ <Title contrast={props.contrast}>
{colecao ?
"Sobre o Material"
: "Resumo do " + props.colecao_obj.topic_name.slice(0, -1)
}
</Title>
- <Description>
+ <Description contrast={props.contrast}>
{colecao ?
colecao_obj.description
: topico_obj.description
}
</Description>
{colecao ?
- <SubTitle>Histórico do Curso</SubTitle>
- : <Strong>Autoria (autores):</Strong>
+ <SubTitle contrast={props.contrast}>Histórico do Curso</SubTitle>
+ : <Strong contrast={props.contrast}>Autoria (autores):</Strong>
}
- <Description>
+ <Description contrast={props.contrast}>
{colecao ?
colecao_obj.historic
: topico_obj.author
@@ -58,17 +59,17 @@ export default function FormationMaterialDescription(props) {
</TextContainer>
</Grid>
<Grid item xs={12} md={3}>
- <IconList>
- <IconItem>
+ <IconList contrast={props.contrast}>
+ <IconItem contrast={props.contrast}>
<LibraryBooksIcon />
- <Strong>Tipo de recurso: </Strong>
+ <Strong contrast={props.contrast}>Tipo de recurso: </Strong>
Material de Formação
<br />
</IconItem>
- <IconItem>
+ <IconItem contrast={props.contrast}>
<MoveToInboxIcon />
- <Strong>Ano de publicação: </Strong>
+ <Strong contrast={props.contrast}>Ano de publicação: </Strong>
{colecao ?
colecao_obj.created_at.split('-')[0]
: topico_obj.created_at.split('-')[0]
@@ -85,24 +86,24 @@ export default function FormationMaterialDescription(props) {
topico_obj.language[i].name
: '')
return (
- <IconItem>
+ <IconItem contrast={props.contrast}>
<TranslateIcon />
- <Strong>Idioma: </Strong>
+ <Strong contrast={props.contrast}>Idioma: </Strong>
{content}
<br />
</IconItem>
);
})}
- <IconItem>
- <Strong>{colecao ? "Criado" : "Enviado"} por:</Strong>
+ <IconItem contrast={props.contrast}>
+ <Strong contrast={props.contrast}>{colecao ? "Criado" : "Enviado"} por:</Strong>
<br />
<StyledAnchor href={colecao_obj.developedurl}>
{
colecao_obj.id === 3 ? <LongUserIcon src={IcNute} />
: <div>
<UserIcon src={IcPeninsula} />
- <Red>
+ <Red contrast={props.contrast}>
{colecao_obj.developed}
</Red>
</div>
@@ -118,12 +119,14 @@ export default function FormationMaterialDescription(props) {
const Title = styled.h1`
font-weight: 100;
- color: rgb(102, 102, 102);
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+
`
const SubTitle = styled.h3`
font-weight: 900;
padding-top: 10px;
- color: rgb(102, 102, 102);
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+
`
const UserIcon = styled.img`
width: 50px;
@@ -136,9 +139,10 @@ const LongUserIcon = styled.img`
margin: 10px;
`
const Description = styled.p`
- color: #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
`
const TextContainer = styled.div`
+ background: ${props => props.contrast === "" ? "white" : "black"};
margin: 15px;
height: 100%;
@media screen and (max-width: 768px) {
@@ -159,12 +163,14 @@ const TextContainer = styled.div`
padding : 0 15px 0 0
}
`
-
-const WrappingCard = styled(Card)`
+export const WrappingCard = styled(Card)`
+ background: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"};
border-radius: 0;
margin-right : auto;
margin-left : auto;
margin-bottom: 30px;
+ margin-top: 30px;
@media screen and (max-width: 768px) {
width : 100% !important;
@@ -176,18 +182,21 @@ const WrappingCard = styled(Card)`
width : 970px !important;
}
`
+
const IconList = styled.div`
margin: 15px;
+ background: ${props => props.contrast === "" ? "white" : "black"};
`
const IconItem = styled.span`
width: 100%;
display: inline-block;
margin-bottom: 15px;
font-size : 14px;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
.MuiSvgIcon-root {
vertical-align : middle
- color: #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
}
img {
@@ -197,10 +206,11 @@ const IconItem = styled.span`
`
const Strong = styled.span`
font-weight: bold;
- color: #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
`
const Red = styled.span`
- color: #e81f4f;
+ color: ${props => props.contrast === "" ? "#e81f4f" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
`
const StyledAnchor = styled.a`
text-decoration: none !important;
diff --git a/src/Components/FormationMaterialHeader.js b/src/Components/FormationMaterialHeader.js
index 0c497723..b231cd0f 100644
--- a/src/Components/FormationMaterialHeader.js
+++ b/src/Components/FormationMaterialHeader.js
@@ -38,13 +38,13 @@ export default function FormationMaterialHeader(props) {
}
const getThumb = () => {
- return colecao ?
+ return colecao ?
require(`../../public/${colecao_obj.img}`)
: require(`../../public/${topico_obj.img}`)
}
return (
- <WrappingCard>
+ <WrappingCard contrast={props.contrast}>
<Grid container
direction="row"
justify="flex-start"
@@ -57,38 +57,42 @@ export default function FormationMaterialHeader(props) {
direction="column"
justify="flex-start"
alignItems="stretch"
- style={{ padding: "8px 10px" }}
+ style={props.contrast === "" ? { padding: "8px 10px" } : { backgroundColor: "black" }}
>
<Grid item>
- <Title>{get_title()}</Title>
+ <Title contrast={props.contrast}>{get_title()}</Title>
</Grid>
<Grid item>
- <SubTitle>
+ <SubTitle contrast={props.contrast}>
{colecao ?
get_subtitle()
- : <StyledLink to={'/colecao?id=' + colecao_obj.id}>{get_subtitle()}</StyledLink>}
+ : <StyledLink contrast={props.contrast} to={'/colecao?id=' + colecao_obj.id}>{get_subtitle()}</StyledLink>}
</SubTitle>
</Grid>
<Grid item>
<ChipsDiv className={classes.root}>
{colecao_obj.tags.map((t, index) => {
- return (<Chip color="default" label={t.name} key={index} style={{ padding: "0.5px" }} />);
+ return (<Chip color="default" label={t.name} key={index} style={props.contrast === "" ? { padding: "0.5px" } : { border: "1px solid white", padding: "0.5px", backgroundColor: "black", color: "white" }} />);
})}
</ChipsDiv>
</Grid>
<Grid item>
{colecao ?
- <Button
- variant="contained"
- color="secondary"
- style={{ marginLeft: '15px' }}
- onClick={props.handleClick}
- >
- {props.colecao ? "Ver todos os módulos" : "Iniciar leitura"}
- </Button>
+ <StyledDiv contrast={props.contrast}>
+ <Button
+ className="button"
+ variant="contained"
+ color="secondary"
+ style={{ marginLeft: '15px' }}
+ onClick={props.handleClick}
+ >
+ {props.colecao ? "Ver todos os módulos" : "Iniciar leitura"}
+ </Button>
+ </StyledDiv>
:
- <StyledLink to={'/iframe-colecao?colecao=' + colecao_obj.id + '&topico=' + topico_obj.id}>
+ <StyledLink contrast={props.contrast} to={'/iframe-colecao?colecao=' + colecao_obj.id + '&topico=' + topico_obj.id}>
<Button
+ className="button"
variant="contained"
color="secondary"
style={{ marginLeft: '15px', marginTop: '10px' }}
@@ -119,15 +123,18 @@ const Img = styled.img`
const Title = styled.h2`
font-weight: 100;
margin: 15px;
- color: rgb(102, 102, 102);
+ color: ${props => props.contrast === "" ? "rgb(102, 102, 102)" : "white"};
+
`
const SubTitle = styled.h4`
font-weight: 50;
margin: 15px;;
margin-top: 0;
- color: rgb(102, 102, 102);
+ color: ${props => props.contrast === "" ? "rgb(102, 102, 102)" : "white"};
`
export const WrappingCard = styled(Card)`
+ background: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"};
border-radius: 0;
margin-right : auto;
margin-left : auto;
@@ -146,6 +153,29 @@ export const WrappingCard = styled(Card)`
`
const StyledLink = styled(Link)`
- text-decoration: none !important;
- color: #e81f4f !important;
+ color: ${props => props.contrast === "" ? "#e81f4f !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
+
+ .button{
+ background-color: ${props => props.contrast === "" ? "" : "black "};
+ color: ${props => props.contrast === "" ? "white" : "yellow"};
+ border: ${props => props.contrast === "" ? "0" : "1px solid white"};
+ :hover{
+ background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24)"};
+ }
+ }
+`
+
+const StyledDiv = styled.div`
+ color: ${props => props.contrast === "" ? "#e81f4f !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
+
+ .button{
+ background-color: ${props => props.contrast === "" ? "" : "black "};
+ color: ${props => props.contrast === "" ? "white" : "yellow"};
+ border: ${props => props.contrast === "" ? "0" : "1px solid white"};
+ :hover{
+ background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24)"};
+ }
+ }
`
diff --git a/src/Components/Funcionalities.js b/src/Components/Funcionalities.js
index 5a1750b9..eeaa81c9 100644
--- a/src/Components/Funcionalities.js
+++ b/src/Components/Funcionalities.js
@@ -16,8 +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, {Component} from 'react';
-import {Row, Col, Container} from 'react-grid-system';
+import React, { useContext } from 'react';
+import { Row, Col, Container } from 'react-grid-system';
//Image Import
import { acessar } from "ImportImages.js";
@@ -26,100 +26,103 @@ import { compartilhar } from "ImportImages.js";
import { relatar } from "ImportImages.js";
import { seguir } from "ImportImages.js";
import { guardar } from "ImportImages.js";
+import { Store } from '../Store';
-const imgRow={
+const imgRow = {
textAlign: "center",
padding: "1%",
fontFamily: "Roboto, sans-serif"
};
-const title={
+const title = {
display: "block",
fontSize: "1.1em",
fontWeight: "Bold",
fontFamily: "Roboto, sans-serif",
- textAlign: "center"
+ textAlign: "center"
};
-const caption={
+const caption = {
fontSize: "1.07em",
fontWeight: "lighter",
};
-class Funcionalities extends Component{
- render(){
- return(
- <Container style={{textAlign: "center", paddingBottom : "20px", color : "#666"}}>
- <h2>Aqui na Plataforma você pode:</h2>
+
+export default function Funcionalities() {
+ const { state } = useContext(Store)
+
+ return (
+ <div className={`${state.contrast}BackColor`}>
+ <Container style={{ textAlign: "center", paddingTop: "40px", paddingBottom: "40px", color: state.contrast === "" ? "#666" : "white" }}>
+ <h2 style={{ margin: 0, paddingBottom: 40 }}>Aqui na Plataforma você pode:</h2>
<Row style={imgRow}>
<Col sm={4} md={4}>
- <img src={compartilhar} height="150px" alt="compartilhar recursos"/>
+ <img src={compartilhar} height="150px" alt="compartilhar recursos" />
<span>
<span style={title}>
Compartilhar
</span>
<span style={caption}>
- com os colegas
+ com os colegas
</span>
</span>
</Col>
<Col sm={4} md={4}>
- <img src={relatar} height="150px" alt="relatar experiências"/>
+ <img src={relatar} height="150px" alt="relatar experiências" />
<span>
<span style={title}>
Relatar experiências,
</span>
<span>
- curtir e avaliar
+ curtir e avaliar
</span>
</span>
</Col>
<Col sm={4} md={4}>
- <img src={guardar} height="150px" alt="guardar recursos"/>
+ <img src={guardar} height="150px" alt="guardar recursos" />
<span>
<span style={title}>
Guardar recursos
</span>
<span>
- em coleções
+ em coleções
</span>
</span>
</Col>
<Col sm={4} md={4}>
- <img src={seguir} height="150px" alt="seguir usuários"/>
+ <img src={seguir} height="150px" alt="seguir usuários" />
<span>
<span style={title}>
Seguir usuários
</span>
<span>
- e suas coleções
+ e suas coleções
</span>
</span>
</Col>
<Col sm={4} md={4}>
- <img src={baixar} height="150px" alt="baixar recursos"/>
+ <img src={baixar} height="150px" alt="baixar recursos" />
<span>
<span style={title}>
Baixar
</span>
<span>
- recursos
+ recursos
</span>
</span>
</Col>
<Col sm={4} md={4}>
- <img src={acessar} height="150px" alt="acessar materiais"/>
+ <img src={acessar} height="150px" alt="acessar materiais" />
<span>
<span style={title}>
Acessar materiais
</span>
<span>
- de formação
+ de formação
</span>
</span>
</Col>
</Row>
</Container>
- )
- }
+ </div>
+ )
}
-export default Funcionalities;
diff --git a/src/Components/GreyButton.js b/src/Components/GreyButton.js
index a2d687d5..10123e02 100644
--- a/src/Components/GreyButton.js
+++ b/src/Components/GreyButton.js
@@ -22,21 +22,18 @@ import styled from 'styled-components'
export default function GreyButton (props) {
return (
- <StyledButton onClick={props.callback}>
+ <StyledButton onClick={props.callback} contrast={props.contrast}>
{props.text}
</StyledButton>
)
}
const StyledButton = styled(Button)`
- &:hover {
- background-color : rgba(158,158,158,0.2) !important;
- }
max-height : 36px !important;
background-color : transparent !important;
- color : #666 !important;
- text-decoration : none !important;
+ color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
+ text-decoration : ${props => props.contrast === "" ? "none" : "underline yellow"} !important;
outline : none !important;
text-align : center !important;
diff --git a/src/Components/GuardarModal.js b/src/Components/GuardarModal.js
index 075f74d6..f08774ee 100644
--- a/src/Components/GuardarModal.js
+++ b/src/Components/GuardarModal.js
@@ -35,7 +35,7 @@ import { getRequest, postRequest } from './HelperFunctions/getAxiosConfig'
function CloseModalButton(props) {
return (
<StyledCloseModalButton onClick={props.handleClose}>
- <CloseIcon />
+ <CloseIcon style={props.contrast === "" ? { color: "#666" } : { color: "white" }}/>
</StyledCloseModalButton>
)
}
@@ -132,23 +132,23 @@ export default function GuardarModal(props) {
onRendered={() => { getCols() }}
>
<Fade in={props.open}>
- <Container>
+ <Container className={`${props.contrast}BackColor ${props.contrast}Text ${props.contrast}Border`}>
<Header>
<span style={{ width: "32px" }} />
<h2>Guardar recurso</h2>
- <CloseModalButton handleClose={props.handleClose} />
+ <CloseModalButton contrast={props.contrast} handleClose={props.handleClose} />
</Header>
<Content style={{ paddingTop: "0" }}>
<ResourceInfo>
<img src={props.thumb ? apiDomain + props.thumb : require('../img/logo_small.svg')} alt="thumbnail recurso" />
- <div className="text">
+ <div>
<h3>{props.title}</h3>
</div>
</ResourceInfo>
{
loading ?
(
- <LoadingSpinner text="Carregando coleções" />
+ <LoadingSpinner contrast={props.contrast} text="Carregando coleções" />
)
:
(
@@ -157,6 +157,7 @@ export default function GuardarModal(props) {
creatingCol ?
(
<CriarColecaoForm
+ contrast={props.contrast}
handleClose={() => setCreating(false)}
finalize={postToCol}
/>
@@ -169,7 +170,15 @@ export default function GuardarModal(props) {
<div classname="no-cols">
<h2>Você não possui coleções ainda.</h2>
</div>
- </>
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ <CriarColButton className={`${props.contrast}LinkColor ${props.contrast}Border ContrastText`}
+ style={{backgroundColor: props.contrast === "" ? "#673ab7" : "black"}}
+ onClick={() => { setCreating(true) }}
+ >
+ CRIAR COLEÇÃO
+ </CriarColButton>
+ </div>
+ </>
)
:
(
@@ -188,12 +197,25 @@ export default function GuardarModal(props) {
}
<h5>{collection.name}</h5>
</div>
- <GuardarBotao onClick={() => { postToCol(collection.id) }}>GUARDAR</GuardarBotao>
+ <GuardarBotao className={`${props.contrast}LinkColor ${props.contrast}Border ContrastText`}
+ style={{backgroundColor: props.contrast === "" ? "#673ab7" : "black"}}
+ onClick={() => { postToCol(collection.id) }}
+ >
+ GUARDAR
+ </GuardarBotao>
</div>
)
}
</div>
</ChooseCol>
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ <CriarColButton className={`${props.contrast}LinkColor ${props.contrast}Border ContrastText`}
+ style={{backgroundColor: props.contrast === "" ? "#673ab7" : "black"}}
+ onClick={() => { setCreating(true) }}
+ >
+ CRIAR COLEÇÃO
+ </CriarColButton>
+ </div>
</>
)
@@ -203,9 +225,6 @@ export default function GuardarModal(props) {
)
}
- <div style={{ display: "flex", justifyContent: "center" }}>
- <CriarColButton onClick={() => { setCreating(true) }}>CRIAR COLEÇÃO</CriarColButton>
- </div>
</Content>
</Container>
</Fade>
@@ -215,12 +234,7 @@ export default function GuardarModal(props) {
}
const GuardarBotao = styled(Button)`
- &:hover {
- background-color : #503096 !important;
- }
max-height : 36px !important;
- background-color : #673ab7 !important;
- color : #fff !important;
box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
padding-left : 32px !important;
padding-right : 32px !important;
@@ -279,10 +293,8 @@ const ChooseCol = styled.div`
const CriarColButton = styled(Button)`
width : 200px !important;
margin-top : 16px !important;
- background-color : #673ab7 !important;
margin-left : auto !important;
margin-right : auto !important;
- color : #fff !important;
font-weight : 600 !important;
box-shadow : !important;
padding-left : 0 2px 5px 0 rgba(0,0,0,.26) 16px !important;
@@ -292,7 +304,6 @@ const CriarColButton = styled(Button)`
const ChooseColContainer = styled.div`
display : flex;
flex-direction : column;
- color : #666;
.no-cols {
align-self : center;
@@ -305,19 +316,18 @@ const ChooseColContainer = styled.div`
const ResourceInfo = styled.div`
margin-top : 0;
- background-color : #f4f4f4;
overflow : hidden;
border-radius : 5px;
display : flex;
flex-direction : column;
align-items : center;
align-content : center;
- max-wdith : 100%;
+ max-width : 100%;
justify-content : space-between;
.text {
max-height : 100%;
- max-width : 66.66%;
+ max-width : 100%;
display : flex;
flex-direction : column;
text-align : center;
@@ -365,7 +375,6 @@ const Header = styled.div`
h2 {
font-size : 26px;
font-weight : lighter;
- color : #666
}
`
@@ -395,7 +404,6 @@ const StyledModal = styled(Modal)`
const Container = styled.div`
box-sizing : border-box;
box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
- background-color : white;
align : center;
display : flex;
flex-direction : column;
@@ -412,6 +420,5 @@ const Container = styled.div`
@media screen and (max-width : 699px) {
width : 100%;
- height : 100%;
}
`
diff --git a/src/Components/Header.js b/src/Components/Header.js
index 259774ac..b374379c 100644
--- a/src/Components/Header.js
+++ b/src/Components/Header.js
@@ -30,62 +30,85 @@ import { getRequest, validateGoogleLoginToken } from './HelperFunctions/getAxios
import SnackBar from './SnackbarComponent';
export default function Header(props) {
- const { state, dispatch } = useContext(Store)
- const [signUpOpen, setSignUp] = useState(false)
- const [loginOpen, setLogin] = useState(false)
- const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
- const [modalColaborar, setModalColaborar] = useState(false)
-
- function handleSuccessValidateToken(data) {
- dispatch({
- type: "USER_LOGGED_IN",
- userLoggedIn: !state.userIsLoggedIn,
- login: data.data
+ const { state, dispatch } = useContext(Store)
+ const [signUpOpen, setSignUp] = useState(false)
+ const [loginOpen, setLogin] = useState(false)
+ const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
+ const [modalColaborar, setModalColaborar] = useState(false)
+
+ function handleSuccessValidateToken(data) {
+ dispatch({
+ type: "USER_LOGGED_IN",
+ userLoggedIn: !state.userIsLoggedIn,
+ login: data.data
+ })
}
- )
- }
- useEffect(() => {
- if (localStorage.getItem('@portalmec/auth_headers')) {
- const url = `/auth/validate_token/`
- getRequest(url, handleSuccessValidateToken, (error) => { console.log(error) })
- }
- }, [])
-
- let loc = useLocation()
- let history = useHistory()
- useEffect(() => {
- const url = `/auth/validate_token/`
-
- let query = new URLSearchParams(loc.search)
-
- if (query.get("auth_token")) {
- let config = {
- headers: {
- "access-token": query.get("auth_token"),
- "client": query.get("client_id"),
- "uid": query.get("uid"),
- "expiry": query.get("expiry"),
- "token-type": 'Bearer'
+ useEffect(() => {
+ if (localStorage.getItem('@portalmec/auth_headers')) {
+ const url = `/auth/validate_token/`
+ getRequest(url, handleSuccessValidateToken, (error) => { console.log(error) })
+ }
+ const newContrast = localStorage.getItem("@portalmec/contrast");
+
+ return dispatch({
+ type: 'SET_CONTRAST',
+ payload: newContrast
+ })
+ }, [])
+
+ let loc = useLocation()
+ let history = useHistory()
+ useEffect(() => {
+ const url = `/auth/validate_token/`
+
+ let query = new URLSearchParams(loc.search)
+
+ if (query.get("auth_token")) {
+ let config = {
+ headers: {
+ "access-token": query.get("auth_token"),
+ "client": query.get("client_id"),
+ "uid": query.get("uid"),
+ "expiry": query.get("expiry"),
+ "token-type": 'Bearer'
+ }
+ }
+ validateGoogleLoginToken(url, config, handleSuccessValidateToken, (error) => { console.log(error) })
+ history.push("/")
+ }
+ }, [loc])
+
+ useEffect(() => {
+ if (state.currentUser.askTeacherQuestion === true) {
+ dispatch({
+ type: "TOGGLE_MODAL_COLABORAR_PLATAFORMA",
+ modalColaborarPlataformaOpen: true
+ });
}
- }
- validateGoogleLoginToken(url, config, handleSuccessValidateToken, (error) => { console.log(error) })
- history.push("/")
+ }, [state.currentUser.askTeacherQuestion])
+
+ const toggleSnackbar = (event, reason) => {
+ if (reason === 'clickaway') {
+ return;
+ }
+
+ handleSuccessfulLogin(false);
}
- }, [loc])
-
- useEffect(() => {
- if (state.currentUser.askTeacherQuestion === true) {
- dispatch({
- type: "TOGGLE_MODAL_COLABORAR_PLATAFORMA",
- modalColaborarPlataformaOpen: true
- });
+
+ const handleSignUp = () => {
+ setSignUp(!signUpOpen)
+ }
+
+ const handleLogin = () => {
+ setLogin(!loginOpen)
}
- }, [state.currentUser.askTeacherQuestion])
- const toggleSnackbar = (event, reason) => {
- if (reason === 'clickaway') {
- return;
+ const handleClickSearch = (open) => {
+ dispatch({
+ type: "HANDLE_SEARCH_BAR",
+ opened: !state.searchOpen
+ })
}
let windowWidth = window.innerWidth
diff --git a/src/Components/HelpCenter/Cards/CardEncontrando.js b/src/Components/HelpCenter/Cards/CardEncontrando.js
index fd8aa929..efc92251 100644
--- a/src/Components/HelpCenter/Cards/CardEncontrando.js
+++ b/src/Components/HelpCenter/Cards/CardEncontrando.js
@@ -24,9 +24,9 @@ import { Link } from "react-router-dom";
//Image Import
import { EncontrandoRecurso } from "ImportImages.js";
-export default function CardEncontrando(props) {
+export default function CardEncontrando({ contrast }) {
return (
- <CardAjuda>
+ <CardAjuda contrast={contrast}>
<div className="card">
<img src={EncontrandoRecurso} alt="" />
<h3>Encontrando Recursos</h3>
@@ -75,83 +75,86 @@ export default function CardEncontrando(props) {
const CardAjuda = styled.div`
- height: 360px;
- margin-bottom: 20px;
- width: 100%
-
- .card {
- height: 280px;
- padding: 40px 15px;
- text-align: center;
- font-size: 14px;
- background-color:#fff;
- box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
- margin-top:30px
- h3 {
- font-size: 23px;
- font-weight: 400;
- color: #666;
- margin-top: 20px;
- margin-bottom: 10px;
- line-height: 1.1;
- }
-
- hr {
- margin-top: 20px;
- margin-bottom: 20px;
- border: 0;
- border-top: 1px solid #eee;
- color: #a5a5a5;
- }
+height: 360px;
+margin-bottom: 20px;
+width: 100%;
+
+.card {
+ height: 280px;
+ padding: 40px 15px;
+ text-align: center;
+ font-size: 14px;
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.24),0 1px 2px rgba(254,254,254,.48)"};
+ margin-top:30px
+ h3 {
+ font-size: 23px;
+ font-weight: 400;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ margin-top: 20px;
+ margin-bottom: 10px;
+ line-height: 1.1;
+ }
- a {
- font-size: 15px;
- color: #666;
- text-decoration: none;
- text-align: center;
- :hover {
- color: #000;
- }
+ hr {
+ margin-top: 20px;
+ margin-bottom: 20px;
+ border: 0;
+ border-top: 1px solid #eee;
+ color: #a5a5a5;
+ }
+ a {
+ font-size: 15px;
+ color: ${props => props.contrast === "" ? "#666" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ font-weight: lighter;
+ text-align: center;
+ :hover {
+ color: ${props => props.contrast === "" ? "#000" : "yellow"};
+ font-weight: 500;
}
- img {
- height: 62px ;
- width: 62px ;
- }
+ }
+ img {
+ height: 62px ;
+ width: 62px ;
}
- .card-rodape {
- box-sizing: border-box;
-
- a {
- border-radius: 0;
- width: 100%;
- font-size: 13px;
- font-weight: 700;
- color: #fff;
- transition: .2s ease;
- border: none;
- height: 40px;
- line-height: 40px;
- background-color: #00bcd4;
- touch-action: manipulation;
- cursor: pointer;
- text-decoration: none;
- display: inline-block;
- margin-bottom: 0;
- text-align: center;
- white-space: nowrap;
- vertical-align: middle;
- touch-action: manipulation;
- cursor: pointer;
- user-select: none;
- box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+}
+.card-rodape {
+ box-sizing: border-box;
+
+ a {
+ border-radius: 0;
+ width: 100%;
+ font-size: 13px;
+ font-weight: 700;
+ color: ${props => props.contrast === "" ? "#fff" : "yellow"};
+ transition: .2s ease;
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"};
+ height: 40px;
+ line-height: 40px;
+ background-color: ${props => props.contrast === "" ? "#00bcd4" : "black"};
+ touch-action: manipulation;
+ cursor: pointer;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ display: inline-block;
+ margin-bottom: 0;
+ text-align: center;
+ white-space: nowrap;
+ vertical-align: middle;
+ touch-action: manipulation;
+ cursor: pointer;
+ user-select: none;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ }
+ &:hover{
+ a{
+ background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24)"};
}
}
-
}
-
`;
diff --git a/src/Components/HelpCenter/Cards/CardGerenciando.js b/src/Components/HelpCenter/Cards/CardGerenciando.js
index 3f4da6b0..10487e95 100644
--- a/src/Components/HelpCenter/Cards/CardGerenciando.js
+++ b/src/Components/HelpCenter/Cards/CardGerenciando.js
@@ -24,9 +24,9 @@ import { Link } from "react-router-dom";
//Image Import
import { GerenciandoConta } from "ImportImages.js";
-export default function CardGerenciando(props) {
+export default function CardGerenciando({ contrast }) {
return (
- <CardAjuda>
+ <CardAjuda contrast={contrast}>
<div className="card">
<img src={GerenciandoConta} alt="" />
<h3>Gerenciando Conta</h3>
@@ -93,84 +93,87 @@ export default function CardGerenciando(props) {
const CardAjuda = styled.div`
- height: 360px;
- margin-bottom: 20px;
- width: 100%
-
- .card {
- height: 280px;
- padding: 40px 15px;
- text-align: center;
- font-size: 14px;
- background-color:#fff;
- box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
- margin-top:30px
-
- h3 {
- font-size: 23px;
- font-weight: 400;
- color: #666;
- margin-top: 20px;
- margin-bottom: 10px;
- line-height: 1.1;
- }
-
- hr {
- margin-top: 20px;
- margin-bottom: 20px;
- border: 0;
- border-top: 1px solid #eee;
- color: #a5a5a5;
- }
+height: 360px;
+margin-bottom: 20px;
+width: 100%;
+
+.card {
+ height: 280px;
+ padding: 40px 15px;
+ text-align: center;
+ font-size: 14px;
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.24),0 1px 2px rgba(254,254,254,.48)"};
+ margin-top:30px
+ h3 {
+ font-size: 23px;
+ font-weight: 400;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ margin-top: 20px;
+ margin-bottom: 10px;
+ line-height: 1.1;
+ }
- a {
- font-size: 15px;
- color: #666;
- text-decoration: none;
- text-align: center;
- :hover {
- color: #000;
- }
+ hr {
+ margin-top: 20px;
+ margin-bottom: 20px;
+ border: 0;
+ border-top: 1px solid #eee;
+ color: #a5a5a5;
+ }
+ a {
+ font-size: 15px;
+ color: ${props => props.contrast === "" ? "#666" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ font-weight: lighter;
+ text-align: center;
+ :hover {
+ color: ${props => props.contrast === "" ? "#000" : "yellow"};
+ font-weight: 500;
}
- img {
- height: 62px ;
- width: 62px ;
- }
+ }
+ img {
+ height: 62px ;
+ width: 62px ;
}
- .card-rodape {
- box-sizing: border-box;
-
- a {
- border-radius: 0;
- width: 100%;
- font-size: 13px;
- font-weight: 700;
- color: #fff;
- transition: .2s ease;
- border: none;
- height: 40px;
- line-height: 40px;
- background-color: #00bcd4;
- touch-action: manipulation;
- cursor: pointer;
- text-decoration: none;
- display: inline-block;
- margin-bottom: 0;
- text-align: center;
- white-space: nowrap;
- vertical-align: middle;
- touch-action: manipulation;
- cursor: pointer;
- user-select: none;
- box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+}
+.card-rodape {
+ box-sizing: border-box;
+
+ a {
+ border-radius: 0;
+ width: 100%;
+ font-size: 13px;
+ font-weight: 700;
+ color: ${props => props.contrast === "" ? "#fff" : "yellow"};
+ transition: .2s ease;
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"};
+ height: 40px;
+ line-height: 40px;
+ background-color: ${props => props.contrast === "" ? "#00bcd4" : "black"};
+ touch-action: manipulation;
+ cursor: pointer;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ display: inline-block;
+ margin-bottom: 0;
+ text-align: center;
+ white-space: nowrap;
+ vertical-align: middle;
+ touch-action: manipulation;
+ cursor: pointer;
+ user-select: none;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ }
+ &:hover{
+ a{
+ background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24)"};
}
}
-
}
`;
diff --git a/src/Components/HelpCenter/Cards/CardParticipando.js b/src/Components/HelpCenter/Cards/CardParticipando.js
index 31f0ad95..ab2fc83c 100644
--- a/src/Components/HelpCenter/Cards/CardParticipando.js
+++ b/src/Components/HelpCenter/Cards/CardParticipando.js
@@ -24,9 +24,9 @@ import { Link } from "react-router-dom";
//Image Import
import { ParticipandoRede } from "ImportImages.js";
-export default function CardParticipando(props) {
+export default function CardParticipando({ contrast }) {
return (
- <CardAjuda>
+ <CardAjuda contrast={contrast}>
<div className="card">
<img src={ParticipandoRede} alt="" />
<h3>Participando da Rede</h3>
@@ -66,86 +66,87 @@ export default function CardParticipando(props) {
const CardAjuda = styled.div`
- height: 360px;
- margin-bottom: 20px;
- width: 100%
-
-
- .card {
- height: 280px;
- padding: 40px 15px;
- text-align: center;
- font-size: 14px;
- background-color:#fff;
- box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
- margin-top:30px
-
-
- h3 {
- font-size: 23px;
- font-weight: 400;
- color: #666;
- margin-top: 20px;
- margin-bottom: 10px;
- line-height: 1.1;
- }
-
- hr {
- margin-top: 20px;
- margin-bottom: 20px;
- border: 0;
- border-top: 1px solid #eee;
- color: #a5a5a5;
- }
+height: 360px;
+margin-bottom: 20px;
+width: 100%;
+
+.card {
+ height: 280px;
+ padding: 40px 15px;
+ text-align: center;
+ font-size: 14px;
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.24),0 1px 2px rgba(254,254,254,.48)"};
+ margin-top:30px
+ h3 {
+ font-size: 23px;
+ font-weight: 400;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ margin-top: 20px;
+ margin-bottom: 10px;
+ line-height: 1.1;
+ }
- a {
- font-size: 15px;
- color: #666;
- text-decoration: none;
- text-align: center;
- :hover {
- color: #000;
- }
+ hr {
+ margin-top: 20px;
+ margin-bottom: 20px;
+ border: 0;
+ border-top: 1px solid #eee;
+ color: #a5a5a5;
+ }
+ a {
+ font-size: 15px;
+ color: ${props => props.contrast === "" ? "#666" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ font-weight: lighter;
+ text-align: center;
+ :hover {
+ color: ${props => props.contrast === "" ? "#000" : "yellow"};
+ font-weight: 500;
}
- img {
- height: 62px ;
- width: 62px ;
- }
+ }
+ img {
+ height: 62px ;
+ width: 62px ;
}
- .card-rodape {
- box-sizing: border-box;
-
- a {
- border-radius: 0;
- width: 100%;
- font-size: 13px;
- font-weight: 700;
- color: #fff;
- transition: .2s ease;
- border: none;
- height: 40px;
- line-height: 40px;
- background-color: #00bcd4;
- touch-action: manipulation;
- cursor: pointer;
- text-decoration: none;
- display: inline-block;
- margin-bottom: 0;
- text-align: center;
- white-space: nowrap;
- vertical-align: middle;
- touch-action: manipulation;
- cursor: pointer;
- user-select: none;
- box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+}
+.card-rodape {
+ box-sizing: border-box;
+
+ a {
+ border-radius: 0;
+ width: 100%;
+ font-size: 13px;
+ font-weight: 700;
+ color: ${props => props.contrast === "" ? "#fff" : "yellow"};
+ transition: .2s ease;
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"};
+ height: 40px;
+ line-height: 40px;
+ background-color: ${props => props.contrast === "" ? "#00bcd4" : "black"};
+ touch-action: manipulation;
+ cursor: pointer;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ display: inline-block;
+ margin-bottom: 0;
+ text-align: center;
+ white-space: nowrap;
+ vertical-align: middle;
+ touch-action: manipulation;
+ cursor: pointer;
+ user-select: none;
+ box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ }
+ &:hover{
+ a{
+ background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24)"};
}
}
-
}
`;
diff --git a/src/Components/HelpCenter/Cards/CardPublicando.js b/src/Components/HelpCenter/Cards/CardPublicando.js
index 0c6f489d..303cf2db 100644
--- a/src/Components/HelpCenter/Cards/CardPublicando.js
+++ b/src/Components/HelpCenter/Cards/CardPublicando.js
@@ -23,9 +23,9 @@ import { Link } from "react-router-dom";
//Image Import
import { PublicandoRecursos } from "ImportImages.js";
-export default function CardPublicando(props) {
+export default function CardPublicando({ contrast }) {
return (
- <CardAjuda>
+ <CardAjuda contrast={contrast}>
<div className="card">
<img src={PublicandoRecursos} alt="" />
<h3>Publicando Recursos</h3>
@@ -76,20 +76,20 @@ const CardAjuda = styled.div`
height: 360px;
margin-bottom: 20px;
-width: 100%
+width: 100%;
.card {
height: 280px;
padding: 40px 15px;
text-align: center;
font-size: 14px;
- background-color:#fff;
- box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.24),0 1px 2px rgba(254,254,254,.48)"};
margin-top:30px
h3 {
font-size: 23px;
font-weight: 400;
- color: #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
margin-top: 20px;
margin-bottom: 10px;
line-height: 1.1;
@@ -105,11 +105,13 @@ width: 100%
a {
font-size: 15px;
- color: #666;
- text-decoration: none;
+ color: ${props => props.contrast === "" ? "#666" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ font-weight: lighter;
text-align: center;
:hover {
- color: #000;
+ color: ${props => props.contrast === "" ? "#000" : "yellow"};
+ font-weight: 500;
}
}
@@ -129,15 +131,15 @@ width: 100%
width: 100%;
font-size: 13px;
font-weight: 700;
- color: #fff;
+ color: ${props => props.contrast === "" ? "#fff" : "yellow"};
transition: .2s ease;
- border: none;
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"};
height: 40px;
line-height: 40px;
- background-color: #00bcd4;
+ background-color: ${props => props.contrast === "" ? "#00bcd4" : "black"};
touch-action: manipulation;
cursor: pointer;
- text-decoration: none;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
display: inline-block;
margin-bottom: 0;
text-align: center;
@@ -147,10 +149,12 @@ width: 100%
cursor: pointer;
user-select: none;
box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
-
}
-}
-
+ &:hover{
+ a{
+ background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24)"};
+ }
+ }
}
`;
diff --git a/src/Components/HelpCenter/TabsManageAc/Forget.js b/src/Components/HelpCenter/TabsManageAc/Forget.js
index 21d598d3..ad0a69ad 100644
--- a/src/Components/HelpCenter/TabsManageAc/Forget.js
+++ b/src/Components/HelpCenter/TabsManageAc/Forget.js
@@ -24,76 +24,68 @@ import { LoginImg } from "ImportImages.js";
import { RecuperarSenhaImg } from "ImportImages.js";
export default function Forget(props) {
- return(
- <Card>
- <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
- <div style={{marginBottom: "9px"}}>
- <span>{props.title}</span>
- </div>
- <p>Para redefinir a senha da sua conta, siga essas instruções:</p>
-
- <ol>
- <li>
- Acesse a <a href="/" target="_blank">Página Inicial</a> e clique em
- “Entrar†no canto superior direito da página.
- </li>
- <li>Clique em “Esqueceu a senha? Clique Aqui!â€.</li>
- <img className="primeira" src={LoginImg} alt="primeira imagem"/>
- <li>Preencha com o seu endereço de e-mail e clique em “Buscarâ€.</li>
- <img className="segunda" src={RecuperarSenhaImg} alt="segunda imagem"/>
- <li>Você receberá um e-mail no endereço informado, contendo as instruções para redefinir sua senha.</li>
- </ol>
-
- </Card>
- );
+ return(
+ <Card contrast={props.contrast}>
+ <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
+ <div style={{marginBottom: "9px"}}>
+ <span>{props.title}</span>
+ </div>
+ <p>Para redefinir a senha da sua conta, siga essas instruções:</p>
+ <ol>
+ <li>
+ Acesse a <a href="/" target="_blank">Página Inicial</a> e clique em
+ “Entrar†no canto superior direito da página.
+ </li>
+ <li>Clique em “Esqueceu a senha? Clique Aqui!â€.</li>
+ <img className="primeira" src={LoginImg} alt="primeira imagem"/>
+ <li>Preencha com o seu endereço de e-mail e clique em “Buscarâ€.</li>
+ <img className="segunda" src={RecuperarSenhaImg} alt="segunda imagem"/>
+ <li>Você receberá um e-mail no endereço informado, contendo as instruções para redefinir sua senha.</li>
+ </ol>
+ </Card>
+ );
}
const Card = styled.div`
- margin-bottom: 5px;
- background-color: #fff;
- box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
- padding: 30px;
- color: #666;
- span {
- font-size: 14px;
- font-weight: bold;
- }
-
- a {
- color: #00bcd4;
- text-decoration: none;
- :hover {
- text-decoration: underline;
- }
- }
-
- ol {
- margin-top: 0;
- margin-bottom: 10px;
- line-height: 1.42857143;
- .primeira {
-
- height: 300px;
- margin-right: 40px;
- vertical-align: middle;
+ margin-bottom: 5px;
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"};
+ padding: 30px;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ span {
+ font-size: 14px;
+ font-weight: bold;
}
- .segunda {
- height: 150px;
- margin-right: 40px;
- vertical-align: middle;
+ a {
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ :hover {
+ text-decoration: underline;
+ }
}
- }
- li {
- font-size: 14px;
- }
-
-
- p {
- margin: 0 0 10px;
- font-size: 15px;
- }
+ ol {
+ margin-top: 0;
+ margin-bottom: 10px;
+ line-height: 1.42857143;
+ .primeira {
+ height: 300px;
+ margin-right: 40px;
+ vertical-align: middle;
+ }
+ .segunda {
+ height: 150px;
+ margin-right: 40px;
+ vertical-align: middle;
+ }
+ }
+ li {
+ font-size: 14px;
+ }
+ p {
+ margin: 0 0 10px;
+ font-size: 15px;
+ }
`
\ No newline at end of file
diff --git a/src/Components/HelpCenter/TabsManageAc/HowToAccess.js b/src/Components/HelpCenter/TabsManageAc/HowToAccess.js
index aa060356..8abce58d 100644
--- a/src/Components/HelpCenter/TabsManageAc/HowToAccess.js
+++ b/src/Components/HelpCenter/TabsManageAc/HowToAccess.js
@@ -24,7 +24,7 @@ import styled from 'styled-components';
export default function HowtoAccess(props) {
return(
- <Card>
+ <Card contrast={props.contrast}>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
<div style={{marginBottom: "9px"}}>
<span>{props.title}</span>
@@ -48,17 +48,16 @@ export default function HowtoAccess(props) {
const Card = styled.div`
margin-bottom: 5px;
- background-color: #fff;
- box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"};
padding: 30px;
- color: #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
span {
font-size: 14px;
font-weight: bold;
}
a {
- color: #00bcd4;
- text-decoration: none;
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
:hover {
text-decoration: underline;
}
diff --git a/src/Components/HelpCenter/TabsManageAc/HowToChange.js b/src/Components/HelpCenter/TabsManageAc/HowToChange.js
index 1b119e99..acaf53e5 100644
--- a/src/Components/HelpCenter/TabsManageAc/HowToChange.js
+++ b/src/Components/HelpCenter/TabsManageAc/HowToChange.js
@@ -24,7 +24,7 @@ import styled from 'styled-components';
export default function HowToDo(props) {
return(
- <Card>
+ <Card contrast={props.contrast}>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
<div style={{marginBottom: "9px"}}>
<span>{props.title}</span>
@@ -49,17 +49,16 @@ export default function HowToDo(props) {
const Card = styled.div`
margin-bottom: 5px;
- background-color: #fff;
- box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"};
padding: 30px;
- color: #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
span {
font-size: 14px;
font-weight: bold;
}
a {
- color: #00bcd4;
- text-decoration: none;
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
:hover {
text-decoration: underline;
}
diff --git a/src/Components/HelpCenter/TabsManageAc/HowToDo.js b/src/Components/HelpCenter/TabsManageAc/HowToDo.js
index f2df2d29..23fbc07e 100644
--- a/src/Components/HelpCenter/TabsManageAc/HowToDo.js
+++ b/src/Components/HelpCenter/TabsManageAc/HowToDo.js
@@ -16,50 +16,49 @@ 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 from 'react';
import styled from 'styled-components';
export default function HowTodo(props) {
- return(
- <Card>
- <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
- <div style={{marginBottom: "9px"}}>
+ return (
+ <Card contrast={props.contrast}>
+ <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet" />
+ <div style={{ marginBottom: "9px" }}>
<span>{props.title}</span>
</div>
<p> Para fazer o cadastro é rapidinho: </p>
<ol>
<li>Acesse a <a href="/" target="_blank">Página Inicial</a> da Plataforma.</li>
-
+
<li>Clique em “Cadastre-se†no canto superior direito da página.</li>
-
+
<li> Preencha os campos solicitados.</li>
-
+
<li>Clique em “Cadastrarâ€.</li>
</ol>
-
+
<p>Pronto! Você será conectado automaticamente.</p>
<p>Nas próximas vezes que acessar a Plataforma, clique em “Entrar†e faça o login com seus dados de cadastro.</p>
-
+
</Card>
);
}
const Card = styled.div`
margin-bottom: 5px;
- background-color: #fff;
- box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"};
padding: 30px;
- color: #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
span {
font-size: 14px;
font-weight: bold;
}
a {
- color: #00bcd4;
- text-decoration: none;
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
:hover {
text-decoration: underline;
}
diff --git a/src/Components/HelpCenter/TabsManageAc/Why.js b/src/Components/HelpCenter/TabsManageAc/Why.js
index 09c243b0..327481ad 100644
--- a/src/Components/HelpCenter/TabsManageAc/Why.js
+++ b/src/Components/HelpCenter/TabsManageAc/Why.js
@@ -25,7 +25,7 @@ import styled from 'styled-components';
export default function Why(props) {
return(
- <Card>
+ <Card contrast={props.contrast}>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
<div style={{marginBottom: "9px"}}>
<span>{props.title}</span>
@@ -48,10 +48,10 @@ export default function Why(props) {
const Card = styled.div`
margin-bottom: 5px;
- background-color: #fff;
- box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"};
padding: 30px;
- color: #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
span {
font-size: 14px;
font-weight: bold;
diff --git a/src/Components/HelpCenter/TabsNetPart/How.js b/src/Components/HelpCenter/TabsNetPart/How.js
index 221667e3..b110d153 100644
--- a/src/Components/HelpCenter/TabsNetPart/How.js
+++ b/src/Components/HelpCenter/TabsNetPart/How.js
@@ -25,7 +25,7 @@ import styled from 'styled-components';
export default function How(props) {
return(
- <Card>
+ <Card contrast={props.contrast}>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
<div style={{marginBottom: "9px"}}>
<span>{props.title}</span>
@@ -51,10 +51,10 @@ export default function How(props) {
const Card = styled.div`
margin-bottom: 5px;
- background-color: #fff;
- box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"};
padding: 30px;
- color: #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
span {
font-size: 14px;
font-weight: bold;
diff --git a/src/Components/HelpCenter/TabsNetPart/What.js b/src/Components/HelpCenter/TabsNetPart/What.js
index 8171c7e4..d68e07f9 100644
--- a/src/Components/HelpCenter/TabsNetPart/What.js
+++ b/src/Components/HelpCenter/TabsNetPart/What.js
@@ -25,7 +25,7 @@ import styled from 'styled-components';
export default function What(props) {
return(
- <Card>
+ <Card contrast={props.contrast}>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
<div style={{marginBottom: "9px"}}>
<span>{props.title}</span>
@@ -52,10 +52,10 @@ export default function What(props) {
const Card = styled.div`
margin-bottom: 5px;
- background-color: #fff;
- box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"};
padding: 30px;
- color: #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
span {
font-size: 14px;
font-weight: bold;
diff --git a/src/Components/HelpCenter/TabsPlataformaMEC/How.js b/src/Components/HelpCenter/TabsPlataformaMEC/How.js
index 9834d939..dfb466be 100644
--- a/src/Components/HelpCenter/TabsPlataformaMEC/How.js
+++ b/src/Components/HelpCenter/TabsPlataformaMEC/How.js
@@ -21,7 +21,7 @@ import styled from "styled-components";
export default function How(props) {
return (
- <Card>
+ <Card contrast={props.contrast}>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
rel="stylesheet"
@@ -29,11 +29,11 @@ export default function How(props) {
<div style={{ marginBottom: "9px" }}>
<span>{props.title}</span>
</div>
- <div style={{ width: "640px", height: "360px" }}>
+ <div>
<iframe
title="Video Página Ajuda"
- width="640"
- height="360"
+ width="100%"
+ height={window.innerHeight}
src="https://www.youtube.com/embed/CRW5h2pHugM"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
@@ -45,36 +45,29 @@ export default function How(props) {
}
const Card = styled.div`
- margin-bottom: 5px;
- background-color: #fff;
+ background: ${props => props.contrast === "" ? "#fff" : "black"};
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
- padding: 30px;
- color: #666;
+ padding: 2em 1.5em;
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ font-weight: lighter;
+
span {
font-size: 14px;
font-weight: bold;
}
a {
- color: #00bcd4;
- text-decoration: none;
- :hover {
- text-decoration: underline;
+ font-weight: lighter;
+ font-family: 'Roboto', 'sans-serif';
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ :hover{
+ cursor: pointer;
+ font-weight: 500;
}
}
- ul {
- padding-left: 0 !important;
- margin-top: 0;
- margin-bottom: 10px;
- line-height: 1.42857143;
- }
-
- li {
- list-style-type: none;
- font-size: 14px;
- }
-
p {
margin: 0 0 10px;
font-size: 15px;
diff --git a/src/Components/HelpCenter/TabsPlataformaMEC/Software.js b/src/Components/HelpCenter/TabsPlataformaMEC/Software.js
index 9da4c8bd..4bd51797 100644
--- a/src/Components/HelpCenter/TabsPlataformaMEC/Software.js
+++ b/src/Components/HelpCenter/TabsPlataformaMEC/Software.js
@@ -87,7 +87,7 @@ const softwares = [
export default function Software(props) {
return (
- <Card>
+ <Card contrast={props.contrast}>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
rel="stylesheet"
@@ -134,24 +134,18 @@ export default function Software(props) {
}
const Card = styled.div`
- margin-bottom: 5px;
- background-color: #fff;
+ background: ${props => props.contrast === "" ? "#fff" : "black"};
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
- padding: 30px;
- color: #666;
+ padding: 2em 1.5em;
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ font-weight: lighter;
+
span {
font-size: 14px;
font-weight: bold;
}
- a {
- color: #00bcd4;
- text-decoration: none;
- :hover {
- text-decoration: underline;
- }
- }
-
ul {
padding-left: 0 !important;
margin-top: 0;
@@ -164,6 +158,17 @@ const Card = styled.div`
font-size: 14px;
}
+ a {
+ font-weight: lighter;
+ font-family: 'Roboto', 'sans-serif';
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ :hover{
+ cursor: pointer;
+ font-weight: 500;
+ }
+ }
+
p {
margin: 0 0 10px;
font-size: 15px;
diff --git a/src/Components/HelpCenter/TabsPlataformaMEC/Types.js b/src/Components/HelpCenter/TabsPlataformaMEC/Types.js
index 1d30662b..0858c1f9 100644
--- a/src/Components/HelpCenter/TabsPlataformaMEC/Types.js
+++ b/src/Components/HelpCenter/TabsPlataformaMEC/Types.js
@@ -30,7 +30,7 @@ const tipos = [
export default function Types(props) {
return (
- <Card>
+ <Card contrast={props.contrast}>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
rel="stylesheet"
@@ -57,11 +57,13 @@ export default function Types(props) {
}
const Card = styled.div`
- margin-bottom: 5px;
- background-color: #fff;
+ background: ${props => props.contrast === "" ? "#fff" : "black"};
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
- padding: 30px;
- color: #666;
+ padding: 2em 1.5em;
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ font-weight: lighter;
+
span {
font-size: 14px;
font-weight: bold;
@@ -79,8 +81,19 @@ const Card = styled.div`
font-size: 14px;
}
+ a {
+ font-weight: lighter;
+ font-family: 'Roboto', 'sans-serif';
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ :hover{
+ cursor: pointer;
+ font-weight: 500;
+ }
+ }
+
p {
margin: 0 0 10px;
font-size: 15px;
}
-`;
+`;
\ No newline at end of file
diff --git a/src/Components/HelpCenter/TabsPlataformaMEC/Understand.js b/src/Components/HelpCenter/TabsPlataformaMEC/Understand.js
index 4696bce0..d267d182 100644
--- a/src/Components/HelpCenter/TabsPlataformaMEC/Understand.js
+++ b/src/Components/HelpCenter/TabsPlataformaMEC/Understand.js
@@ -21,7 +21,7 @@ import styled from "styled-components";
export default function Understand(props) {
return (
- <Card>
+ <Card contrast={props.contrast}>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
rel="stylesheet"
@@ -59,18 +59,32 @@ export default function Understand(props) {
}
const Card = styled.div`
- margin-bottom: 5px;
- background-color: #fff;
+ background: ${props => props.contrast === "" ? "#fff" : "black"};
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
- padding: 30px;
- color: #666;
+ padding: 2em 1.5em;
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ font-weight: lighter;
+
span {
font-size: 14px;
font-weight: bold;
}
+ a {
+ font-weight: lighter;
+ font-family: 'Roboto', 'sans-serif';
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ :hover{
+ cursor: pointer;
+ font-weight: 500;
+ }
+ }
+
p {
margin: 0 0 10px;
font-size: 15px;
}
`;
+
diff --git a/src/Components/HelpCenter/TabsPlataformaMEC/What.js b/src/Components/HelpCenter/TabsPlataformaMEC/What.js
index 8bab746b..07415662 100644
--- a/src/Components/HelpCenter/TabsPlataformaMEC/What.js
+++ b/src/Components/HelpCenter/TabsPlataformaMEC/What.js
@@ -21,7 +21,7 @@ import styled from "styled-components";
export default function What(props) {
return (
- <Card>
+ <Card contrast={props.contrast}>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
rel="stylesheet"
@@ -92,21 +92,26 @@ export default function What(props) {
}
const Card = styled.div`
- margin-bottom: 5px;
- background-color: #fff;
+ background: ${props => props.contrast === "" ? "#fff" : "black"};
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
- padding: 30px;
- color: #666;
+ padding: 2em 1.5em;
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ font-weight: lighter;
+
span {
font-size: 14px;
font-weight: bold;
}
a {
- color: #00bcd4;
- text-decoration: none;
- :hover {
- text-decoration: underline;
+ font-weight: lighter;
+ font-family: 'Roboto', 'sans-serif';
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ :hover{
+ cursor: pointer;
+ font-weight: 500;
}
}
diff --git a/src/Components/HelpCenter/TabsPlataformaMEC/Which.js b/src/Components/HelpCenter/TabsPlataformaMEC/Which.js
index b1fe77ed..a03cc587 100644
--- a/src/Components/HelpCenter/TabsPlataformaMEC/Which.js
+++ b/src/Components/HelpCenter/TabsPlataformaMEC/Which.js
@@ -28,7 +28,7 @@ const parcas = [
export default function Which(props) {
return (
- <Card>
+ <Card contrast={props.contrast}>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
rel="stylesheet"
@@ -50,11 +50,13 @@ export default function Which(props) {
}
const Card = styled.div`
- margin-bottom: 5px;
- background-color: #fff;
+ background: ${props => props.contrast === "" ? "#fff" : "black"};
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
- padding: 30px;
- color: #666;
+ padding: 2em 1.5em;
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ font-weight: lighter;
+
span {
font-size: 14px;
font-weight: bold;
@@ -72,6 +74,17 @@ const Card = styled.div`
font-size: 14px;
}
+ a {
+ font-weight: lighter;
+ font-family: 'Roboto', 'sans-serif';
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ :hover{
+ cursor: pointer;
+ font-weight: 500;
+ }
+ }
+
p {
margin: 0 0 10px;
font-size: 15px;
diff --git a/src/Components/HelpCenter/TabsResourseFind/HowToDo.js b/src/Components/HelpCenter/TabsResourseFind/HowToDo.js
index 204ca709..abdfa089 100644
--- a/src/Components/HelpCenter/TabsResourseFind/HowToDo.js
+++ b/src/Components/HelpCenter/TabsResourseFind/HowToDo.js
@@ -24,7 +24,7 @@ import { Busca } from "ImportImages.js";
export default function HowToDo(props) {
return(
- <Card>
+ <Card contrast={props.contrast}>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
<div style={{marginBottom: "9px"}}>
<span>{props.title}</span>
@@ -52,26 +52,21 @@ export default function HowToDo(props) {
const Card = styled.div`
margin-bottom: 5px;
- background-color: #fff;
- box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"};
padding: 30px;
- color: #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
span {
font-size: 14px;
font-weight: bold;
}
-
- img {
- height: auto;
- width: 100%;
- }
a {
- color: #00bcd4;
- text-decoration: none;
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
:hover {
text-decoration: underline;
}
}
+
ol {
margin-top: 0;
margin-bottom: 10px;
@@ -87,6 +82,4 @@ const Card = styled.div`
font-size: 15px;
}
-
-
`
\ No newline at end of file
diff --git a/src/Components/HelpCenter/TabsResourseFind/HowToFilter.js b/src/Components/HelpCenter/TabsResourseFind/HowToFilter.js
index 7ea8e558..5cbf2a4c 100644
--- a/src/Components/HelpCenter/TabsResourseFind/HowToFilter.js
+++ b/src/Components/HelpCenter/TabsResourseFind/HowToFilter.js
@@ -24,7 +24,7 @@ import { Filtros } from "ImportImages.js";
export default function HowToFilter(props) {
return(
- <Card>
+ <Card contrast={props.contrast}>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
<div style={{marginBottom: "9px"}}>
<span>{props.title}</span>
@@ -45,10 +45,10 @@ export default function HowToFilter(props) {
const Card = styled.div`
margin-bottom: 5px;
- background-color: #fff;
- box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"};
padding: 30px;
- color: #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
span {
font-size: 14px;
font-weight: bold;
diff --git a/src/Components/HelpCenter/TabsResourseFind/HowToRank.js b/src/Components/HelpCenter/TabsResourseFind/HowToRank.js
index cb2a04b6..47f8cfce 100644
--- a/src/Components/HelpCenter/TabsResourseFind/HowToRank.js
+++ b/src/Components/HelpCenter/TabsResourseFind/HowToRank.js
@@ -25,7 +25,7 @@ import styled from 'styled-components';
export default function HowToRank(props) {
return(
- <Card>
+ <Card contrast={props.contrast}>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
<div style={{marginBottom: "9px"}}>
<span>{props.title}</span>
@@ -46,10 +46,10 @@ export default function HowToRank(props) {
const Card = styled.div`
margin-bottom: 5px;
- background-color: #fff;
- box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"};
padding: 30px;
- color: #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
span {
font-size: 14px;
font-weight: bold;
diff --git a/src/Components/HelpCenter/TabsResoursePub/How.js b/src/Components/HelpCenter/TabsResoursePub/How.js
index a84cd304..86a03146 100644
--- a/src/Components/HelpCenter/TabsResoursePub/How.js
+++ b/src/Components/HelpCenter/TabsResoursePub/How.js
@@ -24,7 +24,7 @@ import styled from 'styled-components';
export default function How(props) {
return(
- <Card>
+ <Card contrast={props.contrast}>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
<div style={{marginBottom: "9px"}}>
<span>{props.title}</span>
@@ -62,17 +62,16 @@ export default function How(props) {
const Card = styled.div`
margin-bottom: 5px;
- background-color: #fff;
- box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"};
padding: 30px;
- color: #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
span {
font-size: 14px;
font-weight: bold;
}
a {
- color: #00bcd4;
- text-decoration: none;
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
:hover {
text-decoration: underline;
}
diff --git a/src/Components/HelpCenter/TabsResoursePub/Which.js b/src/Components/HelpCenter/TabsResoursePub/Which.js
index 49a5e1f1..e3a19420 100644
--- a/src/Components/HelpCenter/TabsResoursePub/Which.js
+++ b/src/Components/HelpCenter/TabsResoursePub/Which.js
@@ -24,7 +24,7 @@ import styled from 'styled-components';
export default function Which(props) {
return(
- <Card>
+ <Card contrast={props.contrast}>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
<div style={{marginBottom: "9px"}}>
<span>{props.title}</span>
@@ -55,10 +55,10 @@ export default function Which(props) {
const Card = styled.div`
margin-bottom: 5px;
- background-color: #fff;
- box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"};
padding: 30px;
- color: #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
span {
font-size: 14px;
font-weight: bold;
diff --git a/src/Components/HelpCenter/TabsResoursePub/Why.js b/src/Components/HelpCenter/TabsResoursePub/Why.js
index ca1a16b9..349875cc 100644
--- a/src/Components/HelpCenter/TabsResoursePub/Why.js
+++ b/src/Components/HelpCenter/TabsResoursePub/Why.js
@@ -23,31 +23,31 @@ import styled from 'styled-components';
export default function Why(props) {
- return(
- <Card>
- <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
- <div style={{marginBottom: "9px"}}>
+ return (
+ <Card contrast={props.contrast}>
+ <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet" />
+ <div style={{ marginBottom: "9px" }}>
<span>{props.title}</span>
</div>
<p>
- Ao enviar um recurso você estará ajudando a fortalecer a distribuição
- de recursos educacionais digitais para o ensino básico brasileiro e
- contribuindo na valorização da pluralidade e da diversidade da educação
+ Ao enviar um recurso você estará ajudando a fortalecer a distribuição
+ de recursos educacionais digitais para o ensino básico brasileiro e
+ contribuindo na valorização da pluralidade e da diversidade da educação
brasileira.
</p>
-
+
<p>
- A Plataforma MEC é um meio seguro e um site de referência para a
- publicação e disseminação de Recursos Educacionais Digitais. Aproveite
- esse espaço para compartilhar com professores de todo o Brasil recursos
- criados por você ou aquele recurso de outro autor que você usou em aula
+ A Plataforma MEC é um meio seguro e um site de referência para a
+ publicação e disseminação de Recursos Educacionais Digitais. Aproveite
+ esse espaço para compartilhar com professores de todo o Brasil recursos
+ criados por você ou aquele recurso de outro autor que você usou em aula
e seus alunos gostaram!
</p>
<p>
- A partir do momento que seu recurso estiver publicado na Plataforma, os
- usuários poderão interagir com seu recurso e você receberá as
- notificações dos comentários, avaliações e curtidas. Cada uma dessas
- interações contam para que seu recurso ganhe uma posição de destaque
+ A partir do momento que seu recurso estiver publicado na Plataforma, os
+ usuários poderão interagir com seu recurso e você receberá as
+ notificações dos comentários, avaliações e curtidas. Cada uma dessas
+ interações contam para que seu recurso ganhe uma posição de destaque
na Plataforma.
</p>
<p>Participe dessa rede de colaboração de fomento da qualidade da educação básica!</p>
@@ -57,10 +57,10 @@ export default function Why(props) {
const Card = styled.div`
margin-bottom: 5px;
- background-color: #fff;
- box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"};
padding: 30px;
- color: #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
span {
font-size: 14px;
font-weight: bold;
diff --git a/src/Components/HelperFunctions/getAxiosConfig.js b/src/Components/HelperFunctions/getAxiosConfig.js
index 8ced7d5b..b987089a 100644
--- a/src/Components/HelperFunctions/getAxiosConfig.js
+++ b/src/Components/HelperFunctions/getAxiosConfig.js
@@ -284,7 +284,6 @@ export const validateGoogleLoginToken = (url, config, onSuccess, onError) => {
})
})
.then(data => {
- console.log(data)
onSuccess(data)
})
.catch(error => {
diff --git a/src/Components/HomeScreenSearchBar.js b/src/Components/HomeScreenSearchBar.js
index 634b625e..ab276143 100644
--- a/src/Components/HomeScreenSearchBar.js
+++ b/src/Components/HomeScreenSearchBar.js
@@ -24,10 +24,28 @@ import Menu from '@material-ui/core/Menu';
import { Store } from '../Store';
import { List, ListItem, ListItemIcon, ListItemText, MenuItem, Button, TextField } from '@material-ui/core'
import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
+import { makeStyles } from '@material-ui/core/styles';
import SearchIcon from '@material-ui/icons/Search';
-/*import {Link} from 'react-router-dom'*/
-export default function HomeScreenSearchBar(props) {
+export const useStyles = makeStyles(theme => ({
+ darkTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ color: "white",
+ width: "100%"
+ },
+ lightTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ color: "black",
+ width: "100%"
+ }
+}));
+
+export default function HomeScreenSearchBar() {
+
+ const classes = useStyles();
+
const [query, setQuery] = useState("")
const [searchClass, setSearchClass] = useState('LearningObject')
@@ -67,9 +85,9 @@ export default function HomeScreenSearchBar(props) {
}
const options = [
- { text: "Recursos", value: "LearningObject", color: "#ff7f00" },
- { text: "Coleções", value: "Collection", color: "#673ab7" },
- { text: "Usuários", value: "User", color: "#00bcd4" },
+ { text: "Recursos", value: "LearningObject", color: state.contrast === "" ? "#ff7f00" : "yellow", backColor: state.contrast === "" ? "#ff7f00" : "black"},
+ { text: "Coleções", value: "Collection", color: state.contrast === "" ? "#673ab7" : "yellow", backColor: state.contrast === "" ? "#673ab7" : "black"},
+ { text: "Usuários", value: "User", color: state.contrast === "" ? "#00bcd4" : "yellow", backColor: state.contrast === "" ? "#00bcd4" : "black"},
]
const [anchorEl, setAnchorEl] = React.useState(null);
const [selectedIndex, setSelectedIndex] = React.useState(0);
@@ -79,7 +97,6 @@ export default function HomeScreenSearchBar(props) {
};
const handleMenuItemClick = (event, index, value) => {
- console.log(value)
setSelectedIndex(index);
setSearchClass(value)
setAnchorEl(null);
@@ -89,26 +106,26 @@ export default function HomeScreenSearchBar(props) {
setAnchorEl(null);
};
- const WIDTH = window.innerWidth;
-
return (
-
- <StyledGrid container>
+
+ <StyledGrid container contrast={state.contrast}>
{goSearch && <Redirect to={`/busca?page=0&results_per_page=12&order=review_average&query=${state.search.query}&search_class=${state.search.class}`} />}
- <Grid item md={7} xs={12} className="first white">
+ <Grid item md={7} xs={12} className={state.contrast === "" ? "first white" : "first black"}>
<StyledTextField
+ contrast={state.contrast}
id="standard-search"
placeholder="O que está buscando?"
type="search"
margin="normal"
value={query}
+ InputProps={state.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
onChange={handleChange}
onKeyPress={handleKeyDown}
fullwidth
/>
</Grid>
<Grid item md={3} xs={12} className="second white">
- <List component="nav" aria-label="Recurso">
+ <List component="nav" aria-label="Recurso" className={`${state.contrast}BackColor`} >
<ListItem
button
aria-haspopup="true"
@@ -121,7 +138,7 @@ export default function HomeScreenSearchBar(props) {
primary={options[selectedIndex].text}
/>
<ListItemIcon>
- <ArrowDropDownIcon />
+ <ArrowDropDownIcon className={`${state.contrast}IconColor`} />
</ListItemIcon>
</ListItem>
</List>
@@ -131,27 +148,28 @@ export default function HomeScreenSearchBar(props) {
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
+ MenuListProps={{
+ disablePadding: true
+ }}
>
- {options.map((option, index) => (
- <MenuItem
- key={option.value}
- selected={index === selectedIndex}
- onClick={(event) => handleMenuItemClick(event, index, option.value)}
- style={{ color: option.color }}
- >
- {option.text}
- </MenuItem>
- ))}
+ <div className={`${state.contrast}BackColor`}>
+ {options.map((option, index) => (
+ <MenuItem
+ key={option.value}
+ selected={index === selectedIndex}
+ onClick={(event) => handleMenuItemClick(event, index, option.value)}
+ style={{ color: option.color, textDecoration: state.contrast === "" ? "none" : "underline" }}
+ >
+ {option.text}
+ </MenuItem>
+ ))}
+ </div>
</Menu>
</Grid>
<Grid item md={2} xs={12}>
<div style={{ height: "100%" }}>
- <Button onClick={handleKeyDown} className="custom-button" style={{ backgroundColor: options[selectedIndex].color, color: "#fff" }}>
- {
- WIDTH < 503 &&
- <span>Buscar</span>
- }
- <SearchIcon fontSize="large" />
+ <Button title="Pesquisar" onClick={handleKeyDown} className="custom-button" style={{ backgroundColor: options[selectedIndex].backColor, color: "#fff" }}>
+ <SearchIcon fontSize="large" style={state.contrast === "" ? {color: "white"} : {color: "yellow"}}/>
</Button>
</div>
</Grid>
@@ -160,35 +178,65 @@ export default function HomeScreenSearchBar(props) {
}
const StyledTextField = styled(TextField)`
+ background-color: ${props => props.contrast === "" ? "white" : "black"};
max-width: 100%;
font-size : 15px;
font-weight : lighter;
- color : inherit;
width : 90% !important;
margin-right : 10px !important;
margin-left : 10px !important;
+
+ .MuiOutlinedInput-root {
+ &.Mui-focused fieldset {
+ border-color: ${props => props.contrast === "" ? "#ff7f00" : "yellow"};
+ }
+ fieldset {
+ border-color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+ }
+
+ label{
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+
+ label.Mui-focused {
+ color: ${props => props.contrast === "" ? "#ff7f00" : "yellow"};
+ }
+
+ .MuiFormHelperText-root {
+ text-align : left;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+
.MuiInput-underline::after {
- border-bottom : none !important;
+ border-bottom: 2px solid ${props => props.contrast === "" ? "#ff7f00" : "yellow"};
}
+
`
const StyledGrid = styled(Grid)`
- padding-top : 20px;
+ margin-top : 20px;
- .MuiGrid-item {
+ .first {
+ border: ${props => props.contrast === "" ? "" : "1px solid white"};
@media screen and (max-width : 502px) {
- border-radius : 5px;
- margin-bottom : 10px !important;
+ border-top-left-radius : 5px;
+ border-top-right-radius : 5px;
+ }
+ @media screen and (min-width : 502px) {
+ border-top-left-radius : 5px;
+ border-bottom-left-radius : 5px;
}
}
- .first {
+ .second {
@media screen and (max-width : 502px) {
- margin-top : 10px;
+ border-left: ${props => props.contrast === "" ? "" : "1px solid white"};
+ border-right: ${props => props.contrast === "" ? "" : "1px solid white"};
}
@media screen and (min-width : 502px) {
- border-top-left-radius : 5px;
- border-bottom-left-radius : 5px;
+ border-top: ${props => props.contrast === "" ? "" : "1px solid white"};
+ border-bottom: ${props => props.contrast === "" ? "" : "1px solid white"};
}
}
@@ -196,12 +244,10 @@ const StyledGrid = styled(Grid)`
background-color : #fff;
}
- .MuiList-root {
- @media screen and (min-width : 502px) {
- border-left: 1px solid #ccc !important;
- }
-
+ .black {
+ background-color : black;
}
+
.MuiPaper-root {
width : 100% !important;
}
@@ -210,6 +256,7 @@ const StyledGrid = styled(Grid)`
}
.custom-button {
+ border: ${props => props.contrast === "" ? "" : "1px solid white"};
height: 100% !important;
width: 100% !important;
margin: 0 !important;
@@ -217,8 +264,10 @@ const StyledGrid = styled(Grid)`
align-items : center !important;
@media screen and (max-width : 502px) {
- padding-top : 10px;
- border-radius : 5px;
+ border-top-left-radius : 0 !important;
+ border-top-right-radius : 0 !important;
+ border-bottom-left-radius : 5px !important;
+ border-bottom-right-radius : 5px !important;
}
@media screen and (min-width : 502px) {
diff --git a/src/Components/IframeOverlay/DrawerContent.js b/src/Components/IframeOverlay/DrawerContent.js
index 72c1d659..8936cfd8 100644
--- a/src/Components/IframeOverlay/DrawerContent.js
+++ b/src/Components/IframeOverlay/DrawerContent.js
@@ -26,10 +26,6 @@ export default function DrawerContent(props) {
search(props.tag);
}, [props.tag]);
- useEffect(() => {
- console.log(resources);
- }, [resources]);
-
return(
<Wrapper container
direction="row"
diff --git a/src/Components/LoadingSpinner.js b/src/Components/LoadingSpinner.js
index 33a457f5..391a5086 100644
--- a/src/Components/LoadingSpinner.js
+++ b/src/Components/LoadingSpinner.js
@@ -14,4 +14,4 @@ const LoadingSpinner = (props) => {
)
}
- export default LoadingSpinner;
+export default LoadingSpinner;
diff --git a/src/Components/LoginContainerFunction.js b/src/Components/LoginContainerFunction.js
index 0e79abf1..086cca3d 100644
--- a/src/Components/LoginContainerFunction.js
+++ b/src/Components/LoginContainerFunction.js
@@ -15,40 +15,39 @@ 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 } from "react";
import GoogleLogin from 'react-google-login'
import { Button } from '@material-ui/core';
//import FacebookLogin from 'react-facebook-login';
import CloseIcon from '@material-ui/icons/Close';
import styled from 'styled-components'
-import {device} from './device.js'
+import { device } from './device.js'
import LabeledCheckbox from './Checkbox.js'
import FormInput from "./FormInput.js"
import GoogleLogo from "../img/logo_google.svg"
import ValidateUserInput from './HelperFunctions/FormValidationFunction.js'
-import {Link} from 'react-router-dom'
-import {apiUrl} from '../env.js'
+import { Link } from 'react-router-dom'
+import { apiUrl } from '../env.js'
-async function handleGoogleAttempt () {
- console.log("handleGoogleAttempt")
- let request_url = (
+async function handleGoogleAttempt() {
+ let request_url = (
`${apiUrl}/omniauth/google_oauth2?auth_origin_url=` + window.location.href + '&omniauth_window_type=sameWindow&resource_class=User'
)
window.location.replace(request_url)
}
-export default function LoginContainer (props) {
+export default function LoginContainer(props) {
const [formEmail, setEmail] = useState(
{
- key : false,
- value : localStorage.getItem("@portalmec/uid") || "",
+ key: false,
+ value: localStorage.getItem("@portalmec/uid") || "",
}
)
const [formSenha, setSenha] = useState(
{
- key : false,
- value : localStorage.getItem("@portalmec/senha") ||""
+ key: false,
+ value: localStorage.getItem("@portalmec/senha") || ""
}
)
@@ -64,37 +63,39 @@ export default function LoginContainer (props) {
const userInput = e.target.value
const flag = ValidateUserInput(type, userInput)
- if(type === 'email') {
- setEmail({...formEmail,
- key : flag,
- value : userInput
+ if (type === 'email') {
+ setEmail({
+ ...formEmail,
+ key: flag,
+ value: userInput
})
- // {/*console.log(formEmail)*/}
}
- else if(type === 'password') {
- setSenha({...formSenha,
- key : flag,
- value : userInput
+ else if (type === 'password') {
+ setSenha({
+ ...formSenha,
+ key: flag,
+ value: userInput
})
- // {/*console.log(formSenha)*/}
}
}
const limpaCamposForm = () => {
- setEmail({...formEmail,
- key : false,
- value : ''
+ setEmail({
+ ...formEmail,
+ key: false,
+ value: ''
});
- setSenha({...formSenha,
- key : false,
- value : ''
+ setSenha({
+ ...formSenha,
+ key: false,
+ value: ''
})
}
const onSubmit = (e) => {
e.preventDefault()
- const login = {email : formEmail.value, senha : formSenha.value, checkboxChecked : checkboxControl}
+ const login = { email: formEmail.value, senha: formSenha.value, checkboxChecked: checkboxControl }
if (!(formEmail.key || formSenha.key)) {
props.handleLoginInfo(login)
@@ -105,70 +106,76 @@ export default function LoginContainer (props) {
return (
<div>
- <ContainerStyled >
+ <ContainerStyled contrast={props.contrast}>
<DialogHeaderStyled>
- <span style={{width:"32px"}}/>
- <H2Styled> Entrar
+ <span style={{ width: "32px" }} />
+ <H2Styled contrast={props.contrast}>
+ Entrar
</H2Styled>
- <StyledCloseModalButton onClick={props.handleClose}>
- <CloseIcon/>
+ <StyledCloseModalButton
+ onClick={props.handleClose}
+ contrast={props.contrast}
+ >
+ <CloseIcon className="icon" />
</StyledCloseModalButton>
</DialogHeaderStyled>
<DialogContentDiv>
<SocialConnectDiv>
- <GoogleLoginButton onClick={handleGoogleAttempt}>
- <img src={GoogleLogo} alt="google-logo" className="google-logo"/>
- <span>Usando o Google</span>
- </GoogleLoginButton>
+ <GoogleLoginButton contrast={props.contrast} onClick={handleGoogleAttempt}>
+ <img src={GoogleLogo} alt="google-logo" className="google-logo" />
+ <span>Usando o Google</span>
+ </GoogleLoginButton>
</SocialConnectDiv>
<H3Div>
- <H3Styled>
- <RightSideStrikedH3/>
- <span style={{verticalAlign:"middle"}}>ou</span>
- <LeftSideStrikedH3/>
+ <H3Styled contrast={props.contrast}>
+ <RightSideStrikedH3 contrast={props.contrast} />
+ <span style={{ verticalAlign: "middle" }}>ou</span>
+ <LeftSideStrikedH3 contrast={props.contrast} />
</H3Styled>
</H3Div>
<form onSubmit={e => onSubmit(e)}>
<FormInput
+ contrast={props.contrast}
inputType={"text"}
name={"email"}
value={formEmail.value}
placeholder={"E-mail"}
handleChange={e => handleChange(e, 'email')}
required={true}
- error = {formEmail.key}
- help = {formEmail.key ? ( formEmail.value.length === 0 ? "Faltou preencher seu e-mail." : <span>Insira um endereço de e-mail válido.<br/>Por exemplo: seunome@gmail.com, seunome@hotmail.com</span>) : ""}
+ error={formEmail.key}
+ help={formEmail.key ? (formEmail.value.length === 0 ? "Faltou preencher seu e-mail." : "Insira um endereço de e-mail válido") : ""}
/>
- <br/>
+ <br />
<FormInput
+ contrast={props.contrast}
inputType={"password"}
name={"senha"}
value={formSenha.value}
placeholder={"Senha"}
handleChange={e => handleChange(e, 'password')}
required={true}
- error = {formSenha.key}
- help = {formSenha.key ? (formSenha.value.length === 0 ? "Faltou digitar sua senha." : "A senha precisa ter no mÃnimo 8 caracteres.") : ""}
+ error={formSenha.key}
+ help={formSenha.key ? (formSenha.value.length === 0 ? "Faltou digitar sua senha." : "A senha precisa ter no mÃnimo 8 caracteres.") : ""}
/>
- <br/>
+ <br />
- <RememberRecover>
- <LabeledCheckbox label={<StyledLabel><StyledSpan>Lembrar-me</StyledSpan></StyledLabel>} handleChange={() => setCheckbox(!checkboxControl)}/>
- <UserForgotTheirPasswordSpan>Esqueceu a senha? <Link to={"/recuperar-senha"} style={{textAlign: "right", color:"#4cd0e1"}} onClick={props.handleClose}>Clique aqui!</Link></UserForgotTheirPasswordSpan>
+ <RememberRecover contrast={props.contrast}>
+ <LabeledCheckbox contrast={props.contrast} label={<StyledLabel contrast={props.contrast}><StyledSpan>Lembrar-me</StyledSpan></StyledLabel>} handleChange={() => setCheckbox(!checkboxControl)} />
+ <UserForgotTheirPasswordSpan contrast={props.contrast}>Esqueceu a senha? <Link to={"/recuperar-senha"} style={props.contrast === "" ? { textAlign: "right", color: "#4cd0e1" } : { textAlign: "right", color: "yellow", textDecoration: "underline" }} onClick={props.handleClose}>Clique aqui!</Link></UserForgotTheirPasswordSpan>
</RememberRecover>
<ConfirmContainerStyled>
- <StyledLoginButton type="submit" variant="contained">
- <span style={{borderRadius:"3px", boxSizing:"border-box", fontFamily:"Roboto, sans serif", fontWeight:"500", color:"#fff"}}>ENTRAR</span>
+ <StyledLoginButton contrast={props.contrast} type="submit" variant="contained">
+ <span style={props.contrast === "" ? { borderRadius: "3px", boxSizing: "border-box", fontFamily: "Roboto, sans serif", fontWeight: "500", color: "#fff" } : { borderRadius: "3px", boxSizing: "border-box", fontFamily: "Roboto, sans serif", fontWeight: "500", color: "yellow" }}>ENTRAR</span>
</StyledLoginButton>
</ConfirmContainerStyled>
</form>
- <DialogFooterStyled>
- <span style={{textAlign:"center", fontSize: "14px", color:"rgb(102, 102, 102)"}}>Ainda não tem cadastro? <StyledAnchor href="" onClick={e => switchModal(e)}>CADASTRE-SE</StyledAnchor></span>
+ <DialogFooterStyled contrast={props.contrast}>
+ <span style={props.contrast === "" ? { textAlign: "center", fontSize: "14px", color: "rgb(102, 102, 102)" } : { textAlign: "center", fontSize: "14px", color: "white" }}>Ainda não tem cadastro? <StyledAnchor contrast={props.contrast} href="" onClick={e => switchModal(e)}>CADASTRE-SE</StyledAnchor></span>
</DialogFooterStyled>
</DialogContentDiv>
</ContainerStyled>
@@ -177,13 +184,14 @@ export default function LoginContainer (props) {
}
- const ContainerStyled = styled.div`
+const ContainerStyled = styled.div`
box-sizing : border-box;
- background-color : white;
+ background-color: ${props => props.contrast === "" ? "white" : "black"};
max-width : none;
display : flex;
flex-direction : column;
min-width : 440px;
+ border: 1px solid ${props => props.contrast === "" ? "#666" : "white"};
align : center;
padding : 10px;
@@ -197,28 +205,28 @@ export default function LoginContainer (props) {
min-width : unset !important;
}
- `
+`
- export const DialogHeaderStyled = styled.div`
+export const DialogHeaderStyled = styled.div`
text-align : center;
display : flex;
flex-direction : row;
justify-content : space-between;
padding : 10px 26px 0 26px;
height : 64px;
- `
- const H2Styled = styled.h2`
+`
+const H2Styled = styled.h2`
align-self : center;
- color : #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
font-size : 26px;
font-weight : 100;
font-family: 'Roboto', sans serif, 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
justify-content: space-between;
text-align: center;
letter-spacing: .005em;
- `
+`
- export const StyledCloseModalButton = styled(Button)`
+export const StyledCloseModalButton = styled(Button)`
display : inline-block;
position : relative;
float : right !important;
@@ -226,85 +234,87 @@ export default function LoginContainer (props) {
background : transparent !important;
min-width: 0 !important;
width : 40px;
- `
- export const DialogContentDiv = styled.div`
+
+ .icon{
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+`
+export const DialogContentDiv = styled.div`
padding : 20px 30px;
overflow : visible !important;
- `
+`
- export const SocialConnectDiv = styled.div`
- margin-top : 0;
- display : flex;
- flex-direction : row;
- `
- export const StyledGoogleLoginButton = styled(GoogleLogin)`
+export const SocialConnectDiv = styled.div`
+ margin: auto;
+
+`
+export const StyledGoogleLoginButton = styled(GoogleLogin)`
background-color : #fff !important;
color : #666 !important;
border : 1px solid rgb(66, 133, 244);
box-shadow: 0 0 0 1px #4285f4 !important;
- :hover {
- background-color: #f4f4f4 !important;
- }
- `
+`
- const DialogFooterStyled = styled.div`
+const DialogFooterStyled = styled.div`
box-sizing : border-box;
font-family : 'Roboto', sans serif;
margin : 20px -20px;
padding-top : 20px;
- border-top : 1px #e5e5e5 solid;
+ border-top: ${props => props.contrast === "" ? "1px #e5e5e5 solid" : "1px white solid"};
justify-content : center;
text-align : center;
line-height : 1.42857143
- `
+`
export const RightSideStrikedH3 = styled.div`
display : inline-block;
- border-bottom: 1px dotted #666;
+ border-bottom: ${props => props.contrast === "" ? "1px dotted #666" : "1px dotted white"};
vertical-align : middle;
font-weight : 500;
margin-right : 5px;
width : 44%;
- `
+`
- export const LeftSideStrikedH3 = styled.div`
+export const LeftSideStrikedH3 = styled.div`
display : inline-block;
- border-bottom: 1px dotted #666;
+ border-bottom: ${props => props.contrast === "" ? "1px dotted #666" : "1px dotted white"};
vertical-align : middle;
font-weight : 500;
margin-left : 5px;
width : 44%;
- `
+`
- export const H3Div = styled.div`
+export const H3Div = styled.div`
margin-top : 0;
margin-bottom : 10px;
- `
+`
- const H3Styled = styled.h3`
+const H3Styled = styled.h3`
overflow : hidden;
text-align : center;
font-size : 14px;
- color : #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
margin : 10px 0;
- `
+`
- const StyledAnchor = styled.a`
- color : #00bcd4;
- text-decoration : none;
- `
- const ConfirmContainerStyled = styled.div`
+const StyledAnchor = styled.a`
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+`
+const ConfirmContainerStyled = styled.div`
display : flex;
margin-top : 10px;
align-items : center;
justify-content : center;
- `
- const StyledLoginButton = styled(Button)`
- background-color : #00bcd4 !important;
+`
+const StyledLoginButton = styled(Button)`
+ background-color: ${props => props.contrast === "" ? "#00bcd4 !important" : "black !important"};
box-shadow : none !important;
outline: none !important;
- border : 0 !important;
+ border: ${props => props.contrast === "" ? 0 : "1px solid white !important"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
+ color: ${props => props.contrast === "" ? "" : "yellow !important"};
overflow : hidden !important;
width : 35% !important;
display : inline-block !important;
@@ -314,52 +324,48 @@ export const RightSideStrikedH3 = styled.div`
align-items : center !important;
border-radius: 3px !important;
align-self : 50% !important;
- :hover {
- background-color : #00acc1 !important;
- }
- `
+`
- const RememberRecover = styled.div`
+const RememberRecover = styled.div`
display : flex;
justify-content : space-between;
font-size: 12px;
font-weight : 400;
- `
+`
- const StyledLabel = styled.div`
+const StyledLabel = styled.div`
box-sizing : border-box;
position : relative;
vertical-align : middle !important;
- color : #666;
- `
-
- const UserForgotTheirPasswordSpan = styled.span`
- margin-top : 1em;
- font-size : 12px;
- font-weight : 400;
- text-align : right;
- color : #666;
- `
-
- const StyledSpan = styled.span`
- font-size : 12px;
- font-weight : 400;
- padding-top : 2px;
- `
+ color: ${props => props.contrast === "" ? "#666" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+`
+
+const UserForgotTheirPasswordSpan = styled.span`
+ margin-top : 1em;
+ font-size : 12px;
+ font-weight : 400;
+ text-align : right;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+`
+
+const StyledSpan = styled.span`
+ font-size : 12px;
+ font-weight : 400;
+ padding-top : 2px;
+`
export const GoogleLoginButton = styled(Button)`
- background-color : #fff;
- box-shadow : 0 0 0 1px #4285f4 !important;
- color : #666 !important;
+ background-color: ${props => props.contrast === "" ? "#fff !important" : "black !important"};
+ box-shadow: ${props => props.contrast === "" ? "0 0 0 1px #4285f4 !important" : "0 0 0 1px white !important"};
+ color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
+
font-weight : bolder !important;
font-size : 12px !important;
text-transform: none !important;
width: 40%;
- ${'' /* .MuiButton-root {
- min-width : 88px;
- } */}
-
.google-logo {
max-height : 18px ;
padding-right : 5px;
diff --git a/src/Components/LoginModal.js b/src/Components/LoginModal.js
index 93df7e39..8dc9da52 100644
--- a/src/Components/LoginModal.js
+++ b/src/Components/LoginModal.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, {useContext, useState} from 'react';
+import React, { useContext, useState } from 'react';
import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop';
import Zoom from '@material-ui/core/Fade';
@@ -39,8 +39,8 @@ const StyledLogin = styled(Modal)`
`
-export default function LoginModal (props){
- const {state, dispatch} = useContext(Store)
+export default function LoginModal(props) {
+ const { state, dispatch } = useContext(Store)
const [snackbarOpened, handleSnackbar] = useState(false)
@@ -52,24 +52,24 @@ export default function LoginModal (props){
handleSnackbar(false);
}
- function handleSuccess (data) {
- dispatch ({
+ function handleSuccess(data) {
+ dispatch({
type: "USER_LOGGED_IN",
userLoggedIn: !state.userIsLoggedIn,
login: data.data
- }
+ }
)
props.handleClose();
props.openSnackbar();
}
- function handleError (error) {
+ function handleError(error) {
handleSnackbar(true)
}
const handleLoginInfo = (login) => {
const url = `/auth/sign_in`
const payload = {
- email : login.email,
- password : login.senha
+ email: login.email,
+ password: login.senha
}
authentication(url, payload, handleSuccess, handleError)
diff --git a/src/Components/MaterialCard.js b/src/Components/MaterialCard.js
index 8f18cd3c..9806251b 100644
--- a/src/Components/MaterialCard.js
+++ b/src/Components/MaterialCard.js
@@ -41,53 +41,54 @@ export default function MaterialCard(props) {
const width = window.innerWidth;
return (
- <Card>
+ <Card className={`${props.contrast}BackColor ${props.contrast}Border ${props.contrast}Text`}>
<img src={thumb} alt="thumbnail do recurso" />
- <CardContent style={{ height: "60px", textAlign: "left", paddingBottom: "0px", width: "100%" }}>
- <Title>
- {props.name}
- </Title>
- </CardContent>
- <CardActions>
- <Grid container direction="column" justify="flex-start" alignItems="flex-start" style={{ marginLeft: "5px" }}>
- <Grid item>
- <Rating
- name="customized-empty"
- value={props.score}
- precision={0.5}
- style={{ color: "#666" }}
- emptyIcon={<StarBorderIcon fontSize="inherit" />}
- readOnly
- />
+ <div>
+ <CardContent style={{ height: "60px", textAlign: "left", paddingBottom: "0px", width: "100%" }}>
+ <Title>
+ {props.name}
+ </Title>
+ </CardContent>
+ <CardActions>
+ <Grid container direction="column" justify="flex-start" alignItems="flex-start" style={{ marginLeft: "5px" }}>
+ <Grid item>
+ <Rating
+ style={ props.contrast === "" ? { color: "#666" } : { color: "white" }}
+ name="customized-empty"
+ value={props.score}
+ precision={0.5}
+ emptyIcon={<StarBorderIcon fontSize="inherit" />}
+ readOnly
+ />
+ </Grid>
+ <Grid container direction="row" alignItems="center">
+ <Library style={ props.contrast === "" ? { color: "#e81f4f" } : { color: "white" }} />
+ <SizedBox />
+ <Typography variant="body2" component="p" style={{ overflow: "hidden", fontSize: "0.8em" }}>
+ {props.modules.length} módulos
+ </Typography>
+ </Grid>
</Grid>
- <Grid container direction="row" alignItems="center">
- <Library style={{ color: "#e81f4f" }} />
- <SizedBox />
- <Typography variant="body2" color="textSecondary" component="p" style={{ overflow: "hidden", fontSize: "0.8em" }}>
- {props.modules.length} módulos
- </Typography>
- </Grid>
- </Grid>
- </CardActions>
- <CardActions style={{ borderTop: "1px solid #e5e5e5", justifyContent: "center" }}>
+ </CardActions>
+ </div>
+ <CardActions className={`${props.contrast}LinkColor`} style={{ borderTop: "1px solid #e5e5e5", justifyContent: "center" }}>
{
width <= 767 ?
- <Link style={{textDecoration : "none"}} to={`/colecao?colecao=${props.id}`}>
+ <Link className={`${props.contrast}LinkColor`} to={`/colecao?colecao=${props.id}`}>
<Button
- color="secondary"
+ style={ props.contrast === "" ? { color: "#e81f4f" } : { color: "yellow" }}
endIcon={<ExpandMoreRoundedIcon />}
>
-
Ver módulos
</Button>
</Link>
:
<Button
- color="secondary"
+ className={`${props.contrast}LinkColor`}
+ style={ props.contrast === "" ? { color: "#e81f4f" } : { color: "yellow" }}
endIcon={<ExpandMoreRoundedIcon />}
onClick={HandleButtonPressed}
>
-
Ver módulos
</Button>
}
@@ -101,7 +102,6 @@ const SizedBox = styled.div`
`
const Title = styled(Typography)`
font-weight: 500;
- color: rgb(102, 102, 102);
font-size: 0.9em;
margin-left: 10px;
margin-right: 10px;
diff --git a/src/Components/MenuBar.js b/src/Components/MenuBar.js
index c79d52b6..3cf316ad 100644
--- a/src/Components/MenuBar.js
+++ b/src/Components/MenuBar.js
@@ -44,18 +44,24 @@ export const ButtonStyled = styled(Button)`
text-transform: capitalize !important;
margin : 0 8px !important;
font-weight : normal !important;
+ color: ${props => props.contrast === "" ? "black !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
`
const ButtonPublicarRecurso = styled(Button)`
font-family : 'Roboto', sans serif;
box-shadow : none !important;
- border : 1px transparent solid;
- background-color : #ff7f00 !important;
+ border: ${props => props.contrast === '' ? "1px transparent solid" : "1px white solid !important"};
+ background-color: ${(props) => props.contrast === "" ? "#ff7f00 !important" : "black !important"};
+ color: white !important;
align-content : center;
font-weight : 500 !important;
text-transform: capitalize !important;
font-stretch : expanded;
max-width: 200 !important;
+ :hover {
+ background-color: ${(props) => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
.MuiSvgIcon-root {
vertical-align : middle !important;
margin-right : 5px !important;
@@ -63,7 +69,7 @@ const ButtonPublicarRecurso = styled(Button)`
`
const IconSearchStyled = styled(IconSearch)`
- color: #16b8dd;
+ color: ${props => props.contrast === "" ? "#16b8dd !important" : "white !important"};
`
const ImageStyled = styled.img`
height: 50px;
@@ -88,124 +94,122 @@ const Left = styled.span`
export const ButtonPubRecursoStyled = styled(Button)`
font-weight : 500 !important;
- border : 1.5px #666 solid !important;
- color: #666;
box-shadow: none;
margin : 0 8px !important;
font-weight : normal !important;
+ :hover {
+ background-color: ${(props) =>
+ props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
`
export default function MenuBar(props) {
- const { state } = useContext(Store)
-
- const buildMyAreaTabs = () => {
- const minhaArea = [
- { name: "Perfil e Atividades", href: "/perfil", value: '0' },
- { name: "Recursos Publicados", href: "/perfil", value: '1' },
- { name: "Favoritos", href: "/perfil", value: '2' },
- { name: "Coleções", href: "/perfil", value: '3' },
- { name: "Rede", href: "/perfil", value: '4' },
- { name: "Configurações", href: "/editarperfil", value: '5' },
- ]
+ const { state } = useContext(Store)
+
+ const buildMyAreaTabs = () => {
+ const minhaArea = [
+ { name: "Perfil e Atividades", href: "/perfil", value: '0' },
+ { name: "Recursos Publicados", href: "/perfil", value: '1' },
+ { name: "Favoritos", href: "/perfil", value: '2' },
+ { name: "Coleções", href: "/perfil", value: '3' },
+ { name: "Rede", href: "/perfil", value: '4' },
+ { name: "Configurações", href: "/editarperfil", value: '5' },
+ ]
+
+ if (state.currentUser.roles) {
+ let canUserAdmin = false;
+ let index = 0;
+ const userRoles = [...state.currentUser.roles]
+
+ while (!canUserAdmin && index < userRoles.length) {
+ if (userRoles[index].id === 3 || userRoles[index].id === 7)
+ canUserAdmin = true
+ index++
+ }
+
+ if (canUserAdmin)
+ minhaArea.push({
+ name: "Administrador",
+ href: "/admin/home",
+ value: '6',
+ })
+
+ const canUserCurator = (elem) => elem.id === 4
+ if (userRoles.some(canUserCurator))
+ minhaArea.push({
+ name: "Curadoria",
+ href: "/perfil",
+ value: '5',
+ })
+ }
- if (state.currentUser.roles) {
- let canUserAdmin = false;
- let index = 0;
- const userRoles = [...state.currentUser.roles]
-
- while (!canUserAdmin && index < userRoles.length) {
- if (userRoles[index].id === 3 || userRoles[index].id === 7)
- canUserAdmin = true
- index++
- }
-
- if (canUserAdmin)
- minhaArea.push({
- name: "Administrador",
- href: "/admin/home",
- value: '6',
- })
-
- const canUserCurator = (elem) => elem.id === 4
- if (userRoles.some(canUserCurator))
- minhaArea.push({
- name: "Curadoria",
- href: "/perfil",
- value: '5',
- })
+ return minhaArea;
}
- return minhaArea;
- }
-
- const menuSobre = [
- { name: "Sobre a Plataforma", href: "/sobre" },
- { name: "Portais Parceiros", href: "/sobre#portaisparceiros" },
- { name: "Termos de Uso", href: "/termos" },
- { name: "Contato", href: "/contato" }
- ]
-
- const menuAjuda = [
- { name: "Central de Ajuda", href: "/ajuda" },
- { name: "Publicando Recursos", href: "/publicando-recurso" },
- { name: "Encontrando Recursos", href: "/encontrando-recurso" },
- { name: "Participando da Rede", href: "/participando-da-rede" },
- { name: "Gerenciando a Conta", href: "/gerenciando-conta" }
- ]
-
- const minhaArea = buildMyAreaTabs()
-
- return (
- <ContainerStyled fluid={true} >
- <Left>
- <Link to="/"> <ImageStyled src={logo} alt="Plataforma Integrada" /> </Link>
- <Dropdown name="Sobre" items={menuSobre} />
- <Dropdown name="Ajuda" items={menuAjuda} />
- <a href="http://educacaoconectada.mec.gov.br/" rel="noopener noreferrer" target="_blank" >
- <ButtonStyled >Educação Conectada</ButtonStyled>
- </a>
- {/*<Link to="/loja">
- <ButtonStyled>Lojinha</ButtonStyled>
- </Link>*/}
- <ButtonStyled onClick={props.openSearchBar} ><IconSearchStyled />Buscar</ButtonStyled>
-
- </Left>
- <Right>
- {
- state.userIsLoggedIn
- ? (
- <>
- <div style={{ boxSizing: "border-box" }}>
- <Link to="/termos-publicar-recurso">
- <ButtonPublicarRecurso>
- <CloudUploadIcon style={{ color: "white", marginLeft: "0" }} />
- <span style={{ color: "#fff", textAlign: "center", alignSelf: "center", fontWeight: "500" }} >
- PUBLICAR RECURSO
- </span>
- </ButtonPublicarRecurso>
- </Link>
- </div>
-
- <div>
- <Notifications />
- </div>
-
- <MenuList items={minhaArea} />
-
- </>
- )
- : (
- <React.Fragment>
- <ButtonPubRecursoStyled onClick={props.openLogin}>PUBLICAR RECURSO?</ButtonPubRecursoStyled>
- <ButtonStyled onClick={props.openLogin}><ExitToAppIcon style={{ color: "#00bcd4" }} />Entrar</ButtonStyled>
- <ButtonStyled onClick={props.openSignUp}>Cadastre-<span style={{textTransform: 'lowercase'}}>se</span></ButtonStyled>
- </React.Fragment>
- )
- }
+ const menuSobre = [
+ { name: "Sobre a Plataforma", href: "/sobre" },
+ { name: "Portais Parceiros", href: "/sobre#portaisparceiros" },
+ { name: "Termos de Uso", href: "/termos" },
+ { name: "Contato", href: "/contato" }
+ ]
+
+ const menuAjuda = [
+ { name: "Central de Ajuda", href: "/ajuda" },
+ { name: "Publicando Recursos", href: "/publicando-recurso" },
+ { name: "Encontrando Recursos", href: "/encontrando-recurso" },
+ { name: "Participando da Rede", href: "/participando-da-rede" },
+ { name: "Gerenciando a Conta", href: "/gerenciando-conta" }
+ ]
- </Right>
- </ContainerStyled>
- );
+ const minhaArea = buildMyAreaTabs()
+
+ return (
+ <ContainerStyled fluid={true} className={`${state.contrast}BackColor`}>
+ <Left>
+ <Link to="/"> <ImageStyled src={logo} alt="Plataforma Integrada" /> </Link>
+ <Dropdown name="Sobre" items={menuSobre} />
+ <Dropdown name="Ajuda" items={menuAjuda} />
+ <a href="http://educacaoconectada.mec.gov.br/" rel="noopener noreferrer" target="_blank" >
+ <ButtonStyled contrast={state.contrast} >Educação Conectada</ButtonStyled>
+ </a>
+ {/*<Link to="/loja">
+ <ButtonStyled>Lojinha</ButtonStyled>
+ </Link>*/}
+ <ButtonStyled contrast={state.contrast} onClick={props.openSearchBar} ><IconSearchStyled contrast={state.contrast}/>Buscar</ButtonStyled>
+
+ </Left>
+ <Right>
+ {
+ state.userIsLoggedIn
+ ? (
+ <>
+ <div style={{ boxSizing: "border-box" }}>
+ <Link to="/termos-publicar-recurso">
+ <ButtonPublicarRecurso contrast={state.contrast} className={`${state.contrast}LinkColor`}>
+ <CloudUploadIcon className={`${state.contrast}IconColor`} style={{ marginLeft: "0" }} />
+ <span className={`${state.contrast}LinkColor`} style={{textAlign: "center", alignSelf: "center", fontWeight: "500" }} >
+ PUBLICAR RECURSO
+ </span>
+ </ButtonPublicarRecurso>
+ </Link>
+ </div>
+ <div>
+ <Notifications />
+ </div>
+ <MenuList items={minhaArea} />
+ </>
+ )
+ : (
+ <React.Fragment>
+ <ButtonPubRecursoStyled contrast={state.contrast} className={`${state.contrast}LinkColor ${state.contrast}Border`} onClick={props.openLogin}>PUBLICAR RECURSO?</ButtonPubRecursoStyled>
+ <ButtonStyled contrast={state.contrast} className={`${state.contrast}LinkColor`} onClick={props.openLogin}><ExitToAppIcon className={`${state.contrast}IconColor`} style={{ color: "#00bcd4" }} />Entrar</ButtonStyled>
+ <ButtonStyled contrast={state.contrast} className={`${state.contrast}LinkColor`} onClick={props.openSignUp}>Cadastre-<span style={{ textTransform: 'lowercase' }}>se</span></ButtonStyled>
+ </React.Fragment>
+ )
+ }
+ </Right>
+ </ContainerStyled>
+ );
}
diff --git a/src/Components/MenuBarMobile.js b/src/Components/MenuBarMobile.js
index 0e263606..e6e21aaa 100644
--- a/src/Components/MenuBarMobile.js
+++ b/src/Components/MenuBarMobile.js
@@ -27,7 +27,6 @@ import IconSearch from '@material-ui/icons/Search'
export default function MenuBarMobile(props) {
-
const [drawerOpen, setDrawerStatus] = React.useState(false);
@@ -40,12 +39,15 @@ export default function MenuBarMobile(props) {
return (
<>
- <MobileDrawerMenu anchor={'left'} open={drawerOpen}
+ <MobileDrawerMenu
+ contrast={props.contrast}
+ anchor={'left'}
+ open={drawerOpen}
onClose={toggleDrawer(false)}
openSignUp={props.openSignUp} openLogin={props.openLogin}
/>
- <OuterDiv>
- <Button style={{ color: "#00bcd4" }} onClick={toggleDrawer(true)}>
+ <OuterDiv contrast={props.contrast}>
+ <Button title="Menu" style={props.contrast === "" ? { color: "#00bcd4" } : { color: "white " }} onClick={toggleDrawer(true)}>
<MenuIcon className="icon" />
</Button>
<DrawerButtonDiv>
@@ -53,8 +55,8 @@ export default function MenuBarMobile(props) {
<img src={logo} alt="logo" style={{ border: "0", verticalAlign: "middle" }} />
</Link>
</DrawerButtonDiv>
- <Button style={{ color: "#00bcd4", position: "absolute", right: 0}} onClick={props.openSearchBar}>
- <IconSearchStyled/>
+ <Button title="Pesquisar" style={{ position: "absolute", right: 0 }} onClick={props.openSearchBar}>
+ <IconSearchStyled style={props.contrast === "" ? { color: "#00bcd4" } : { color: "white " }} />
</Button>
</OuterDiv>
</>
@@ -64,11 +66,12 @@ export default function MenuBarMobile(props) {
const OuterDiv = styled.div`
height : 48px;
width : 100%;
- ${'' /* position : relative; */}
+ background: ${props => props.contrast === "" ? "" : "black"};
display : flex;
direction : row;
align-items : center;
+
img {
height : 38px;
overflow : hidden;
diff --git a/src/Components/MenuList.js b/src/Components/MenuList.js
index b5b920c8..ee79f724 100644
--- a/src/Components/MenuList.js
+++ b/src/Components/MenuList.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, {useContext} from 'react';
+import React, { useContext } from 'react';
import Button from '@material-ui/core/Button';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
@@ -25,90 +25,91 @@ import { Link } from 'react-router-dom'
import ExitToAppIcon from '@material-ui/icons/ExitToApp';
import { Store } from '../Store';
import styled from 'styled-components'
-import {apiDomain} from '../env.js'
-import {deleteRequest} from './HelperFunctions/getAxiosConfig'
+import { apiDomain } from '../env.js'
+import { deleteRequest } from './HelperFunctions/getAxiosConfig'
//Image Import
import { Profile } from "ImportImages.js";
-
const OverrideButton = styled(Button)`
text-transform : none !important;
`
export default function MenuList(props) {
- const [anchorEl, setAnchorEl] = React.useState(null);
- const { state, dispatch } = useContext(Store)
-
- const handleClick = event => {
- setAnchorEl(event.currentTarget);
- };
-
- const handleClose = () => {
- setAnchorEl(null);
- };
-
- function handleSuccessSignOut (data) {
- dispatch( {
- type: 'USER_LOGGED_OUT',
- userLoggedOut: !state.userIsLoggedIn,
- })
- }
- const handleLogout = () => {
- const url = `/auth/sign_out`
- deleteRequest(url, handleSuccessSignOut, (error) => {console.log(error)})
- }
-
- return (
- <div >
-
- <OverrideButton
- aria-controls="customized-menu"
- aria-haspopup="true"
- onMouseOver={handleClick}
- >
- <div style={{borderRadius: "50%", border: "2px solid #fff", background: "#fff", overflow: "hidden", maxWidth : "50px", maxHeight : "50px"}}>
- {
- state.currentUser.avatar === '' || state.currentUser.avatar === null || state.currentUser.avatar === undefined ?
- (
-
- <img src={Profile} alt={'user avatar'} style={{width:"100%", height:"100%", verticalAlign : "middle", marginLeft : "0"}}/>
- ):
- (
- <img src={apiDomain + state.currentUser.avatar} alt={'user avatar'} style={{width:"100%", height:"100%", verticalAlign : "middle", marginLeft : "0"}}/>
- )
- }
+ const [anchorEl, setAnchorEl] = React.useState(null);
+ const { state, dispatch } = useContext(Store)
+
+ const handleClick = event => {
+ setAnchorEl(event.currentTarget);
+ };
+
+ const handleClose = () => {
+ setAnchorEl(null);
+ };
+
+ function handleSuccessSignOut(data) {
+ dispatch({
+ type: 'USER_LOGGED_OUT',
+ userLoggedOut: !state.userIsLoggedIn,
+ })
+ }
+ const handleLogout = () => {
+ const url = `/auth/sign_out`
+ deleteRequest(url, handleSuccessSignOut, (error) => { console.log(error) })
+ }
+
+ return (
+ <div >
+ <OverrideButton
+ aria-controls="customized-menu"
+ aria-haspopup="true"
+ onClick={handleClick}
+ >
+ <div style={{ borderRadius: "50%", border: "2px solid #fff", background: "#fff", overflow: "hidden", maxWidth: "50px", maxHeight: "50px" }}>
+ {
+ state.currentUser.avatar === '' || state.currentUser.avatar === null || state.currentUser.avatar === undefined ?
+ (
+ <img src={Profile} alt={'user avatar'} style={{ width: "100%", height: "100%", verticalAlign: "middle", marginLeft: "0" }} />
+ ) :
+ (
+ <img src={apiDomain + state.currentUser.avatar} alt={'user avatar'} style={{ width: "100%", height: "100%", verticalAlign: "middle", marginLeft: "0" }} />
+ )
+ }
+ </div>
+ <span className={`${state.contrast}LinkColor`} style={{ fontFamily: "inherit", fontWeight: "400", color: "#666" }}>Minha Ãrea </span> <KeyboardArrowDownIcon className={`${state.contrast}IconColor`}/>
+ </OverrideButton>
+ <Menu
+ anchorEl={anchorEl}
+ open={Boolean(anchorEl)}
+ onClose={handleClose}
+ elevation={0}
+ getContentAnchorEl={null}
+ anchorOrigin={{
+ vertical: 'bottom',
+ horizontal: 'center',
+ }}
+ transformOrigin={{
+ vertical: 'top',
+ horizontal: 'center',
+ }}
+ MenuListProps={{
+ disablePadding: true
+ }}
+ >
+ <div className={`${state.contrast}BackColor`}>
+ {
+ props.items.map((item) =>
+ <Link to={{
+ pathname: item.href,
+ state: item.value
+ }} style={{ textDecoration: "none" }} key={item.value}><MenuItem className={`${state.contrast}LinkColor`} style={{ fontSize: "14px", padding: "5px 20px", color: "#666" }} key={item.value}>{item.name}</MenuItem></Link>
+ )
+ }
+ <StyledButtonSair contrast={state.contrast} className={`${state.contrast}BackColor`} onClick={handleLogout}> <StyledMenuItem className={`${state.contrast}LinkColor`} disableGutters={true}>Sair<StyledExitToAppIcon className={`${state.contrast}IconColor`}/></StyledMenuItem></StyledButtonSair>
+ </div>
+ </Menu>
</div>
- <span style={{fontFamily:"inherit", fontWeight:"400", color:"#666"}}>Minha Ãrea </span> <KeyboardArrowDownIcon/>
- </OverrideButton>
-
- <Menu
- anchorEl={anchorEl}
- open={Boolean(anchorEl)}
- onClose={handleClose}
- elevation={0}
- getContentAnchorEl={null}
- anchorOrigin={{
- vertical: 'bottom',
- horizontal: 'center',
- }}
- transformOrigin={{
- vertical: 'top',
- horizontal: 'center',
- }}>
-
- {
- props.items.map((item)=>
- <Link to={{
- pathname : item.href,
- state : item.value
- }} style={{textDecoration:"none"}} key={item.value}><MenuItem style= {{fontSize:"14px", padding:"5px 20px", color:"#666"}} key={item.value}>{item.name}</MenuItem></Link>
- )
- }
- <StyledButtonSair onClick={handleLogout}> <StyledMenuItem disableGutters={true}>Sair<StyledExitToAppIcon/></StyledMenuItem></StyledButtonSair>
- </Menu>
- </div>
- );
+ );
}
const StyledButtonSair = styled(Button)`
@@ -121,12 +122,14 @@ const StyledButtonSair = styled(Button)`
display : flex !important;
justify-content: space-between !important;
font-size : 14px !important;
- color : #a5a5a5 !important;
padding : 5px 20px !important;
}
+ color : #666;
+
+ overflow-y: hidden;
`
-const StyledExitToAppIcon = styled(ExitToAppIcon) `
+const StyledExitToAppIcon = styled(ExitToAppIcon)`
fontSize : 24px;
color : rgb(162,165,165);
align : right;
@@ -138,6 +141,6 @@ const StyledMenuItem = styled(MenuItem)`
justify-content: space-between !important;
width : 100% !important;
font-size : 14px !important;
- color : #a5a5a5 !important;
+ color : #666;
padding : 5px 20px !important;
`
diff --git a/src/Components/MobileDrawerMenu.js b/src/Components/MobileDrawerMenu.js
index 317b46b2..66db915e 100644
--- a/src/Components/MobileDrawerMenu.js
+++ b/src/Components/MobileDrawerMenu.js
@@ -47,7 +47,6 @@ export default function MobileDrawerMenu(props) {
{ name: "Favoritos", href: "/perfil", value: '2' },
{ name: "Coleções", href: "/perfil", value: '3' },
{ name: "Rede", href: "/perfil", value: '4' },
- { name: "Configurações", href: "/editarperfil", value: '5' },
]
if (state.currentUser.roles) {
@@ -60,7 +59,7 @@ export default function MobileDrawerMenu(props) {
canUserAdmin = true
index++
}
-
+
if (canUserAdmin)
minhaArea.push({
name: "Administrador",
@@ -119,7 +118,7 @@ export default function MobileDrawerMenu(props) {
}
return (
- <StyledDrawer anchor={props.anchor} open={props.open} onClose={props.onClose}>
+ <StyledDrawer contrast={state.contrast} anchor={props.anchor} open={props.open} onClose={props.onClose}>
<MenuBody>
{/*Renders menuSobre array options*/}
{
@@ -137,20 +136,18 @@ export default function MobileDrawerMenu(props) {
{
/*If user is logged in, render user actions menu; else render log in/sign in buttons*/
state.userIsLoggedIn ?
- (
+ (
<>
<div style={{ display: "flex", justifyContent: "left", marginBottom: "10px" }}>
<Link to="/termos-publicar-recurso">
- <ButtonPublicarRecurso>
+ <ButtonPublicarRecurso contrast={props.contrast}>
<CloudUploadIcon style={{ color: "white", marginRight: "10px" }} />
- <span style={{ color: "white", textAlign: "center", alignSelf: "center", fontWeight: "500" }} >
- PUBLICAR RECURSO
- </span>
+ PUBLICAR RECURSO
</ButtonPublicarRecurso>
</Link>
</div>
- <div style={{ borderTop: "1px solid #e5e5e5", display: "flex", flexDirection: "column", marginTop: "10px", paddingTop: "10px", color: "#666", paddingBottom: "10px" }}>
- <MyArea>
+ <div style={{ borderTop: "1px solid #e5e5e5", display: "flex", flexDirection: "column", marginTop: "10px", paddingTop: "10px", paddingBottom: "10px" }}>
+ <MyArea contrast={props.contrast}>
<div className="user-avatar">
<img alt="user-avatar"
src={getUserAvatar()}
@@ -179,22 +176,22 @@ export default function MobileDrawerMenu(props) {
(
<React.Fragment>
<div style={{ display: "flex", justifyContent: "center", marginTop: "10px" }}>
- <ButtonPublicarRecurso onClick={props.openLogin}>
+ <ButtonPublicarRecurso contrast={props.contrast} onClick={props.openLogin}>
PUBLICAR RECURSO?
</ButtonPublicarRecurso>
</div>
<div style={{ display: "flex", flexDirection: "row", margin: "10px 0", justifyContent: "center" }}>
<div style={{ borderRight: "1px solid #e5e5e5" }}>
- <ButtonStyled onClick={props.openLogin}>
- <ExitToAppIcon style={{ color: "#00bcd4" }} />Entrar
- </ButtonStyled>
+ <ButtonStyled onClick={props.openLogin} contrast={props.contrast}>
+ <ExitToAppIcon style={props.contrast === "" ? { color: "#00bcd4" } : { color: "white" }} />Entrar
+ </ButtonStyled>
</div>
<div>
- <ButtonStyled onClick={props.openSignUp}>
- Cadastre-<span style={{textTransform: 'lowercase'}}>se</span>
- </ButtonStyled>
+ <ButtonStyled contrast={props.contrast} onClick={props.openSignUp}>
+ Cadastre-<span style={{ textTransform: 'lowercase' }}>se</span>
+ </ButtonStyled>
</div>
</div>
</React.Fragment>
@@ -225,7 +222,7 @@ const MyArea = styled.div`
.text {
font-size : 16px;
- color : #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
align-self : center;
}
@@ -248,18 +245,21 @@ const MyArea = styled.div`
const ButtonPublicarRecurso = styled(Button)`
font-weight : 500 !important;
- border : 1.5px #666 solid !important;
- background-color : #ff7f00 !important;
- color: #666;
+ background-color: ${props => props.contrast === "" ? "#ff7f00 !important" : "black !important"};
+ color: ${props => props.contrast === "" ? "white !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
+ border: ${props => props.contrast === "" ? "" : "1px solid white !important"};
box-shadow: none;
margin : 0 8px !important;
padding : 6px 25px !important;
-
+ :hover{
+ background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
`
const StyledDrawer = styled(Drawer)`
.MuiPaper-root {
- width : 65% !important;
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
}
.menu-buttons {
@@ -268,13 +268,13 @@ const StyledDrawer = styled(Drawer)`
font-weight : 500;
cursor : pointer;
outline : 0;
- color : #666 !important;
- text-decoration : none !important;
+ color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
background-color : transparent;
font-family : 'Roboto', sans serif;
.MuiSvgIcon-root {
- color : #a5a5a5 !important;
+ color: ${props => props.contrast === "" ? "#a5a5a5 !important" : "white !important"};
margin-right : 20px;
vertical-align : middle !important;
font-weight : normal !important;
@@ -292,7 +292,7 @@ const StyledDrawer = styled(Drawer)`
.selected {
color : #fff !important;
- background-color : #00bcd4;
+ background-color: ${props => props.contrast === "" ? "#00bcd4" : "rgba(255,255,0,0.24)"};
.MuiSvgIcon-root {
color : #fff !important;
}
@@ -303,5 +303,5 @@ const MenuBody = styled.div`
margin-top : 20px;
display : flex;
flex-direction : column;
- color : #666;
+
`
diff --git a/src/Components/Modal.js b/src/Components/Modal.js
deleted file mode 100644
index dd2de1bc..00000000
--- a/src/Components/Modal.js
+++ /dev/null
@@ -1,100 +0,0 @@
-/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
-Departamento de Informatica - Universidade Federal do Parana
-
-This file is part of Plataforma Integrada MEC.
-
-Plataforma Integrada MEC is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-Plataforma Integrada MEC is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-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 { makeStyles } from '@material-ui/styles';
-import Modal from '@material-ui/core/Modal';
-
-import TermsCarousel from './Carousel';
-
-import Backdrop from '@material-ui/core/Backdrop';
-import Fade from '@material-ui/core/Fade';
-import VisibilityOutlinedIcon from '@material-ui/icons/VisibilityOutlined';
-
-
-
-/*Importação de imagens para o componente*/
-
-
-
-
-const useStyles = makeStyles(theme => ({
- modal: {
- display: "flex",
- alignItems: "center",
- justifyContent: "center"
- },
- paper: {
- border: '2px solid #000',
- boxShadow: " 0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)"
- },
- carousel: {
- width: "750px",
- height:"370px",
-
- }
-}));
-
-
-
-
-
-export default function TransitionsModal() {
- const classes = useStyles();
- const [open, setOpen] = React.useState(false);
-
- const handleOpen = () => {
- setOpen(true);
- };
-
- const handleClose = () => {
- setOpen(false);
- };
-
- return (
-
-
- <div style={{display:"flex", justifyContent: "center"}}>
- <link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap" rel="stylesheet"/>
-
- <button style = {{background: "none",border: "none", color:"#fff",verticalAlign:"center"}} type="button" onClick={handleOpen}>
- <VisibilityOutlinedIcon style={{verticalAlign:"middle"}}/> <spam style={{verticalAlign: "middle",fontWeight: "600",fontSize:"14px"}}>VEJA A VERSÃO RESUMIDA</spam>
- </button>
- <Modal
- aria-labelledby="transition-modal-title"
- aria-describedby="transition-modal-description"
- className={classes.modal}
- open={open}
- onClose={handleClose}
- closeAfterTransition
- BackdropComponent={Backdrop}
- BackdropProps={{
- timeout: 500,
- }}
- >
- <Fade in={open}>
-
- <div>
- <TermsCarousel/>
- </div>
-
- </Fade>
- </Modal>
- </div>
- );
-}
diff --git a/src/Components/ModalAbout.js b/src/Components/ModalAbout.js
index 84998e7c..377ab6cd 100644
--- a/src/Components/ModalAbout.js
+++ b/src/Components/ModalAbout.js
@@ -16,188 +16,185 @@ 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 { makeStyles } from '@material-ui/styles';
-import Modal from '@material-ui/core/Modal';
+import React from "react";
+import { makeStyles } from "@material-ui/styles";
+import Modal from "@material-ui/core/Modal";
import Formulario from "./ContactForm";
-import Backdrop from '@material-ui/core/Backdrop';
-import Fade from '@material-ui/core/Fade';
-
-import styled from 'styled-components'
+import Backdrop from "@material-ui/core/Backdrop";
+import Fade from "@material-ui/core/Fade";
+import styled from "styled-components";
/*Importação de imagens para o componente*/
-
-
-
-const useStyles = makeStyles(theme => ({
- modal: {
- display: "flex",
- alignItems: "center",
- justifyContent: "center"
- },
- paper: {
- border: '2px solid #000',
- boxShadow: " 0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)"
- },
- carousel: {
- width: "750px",
- height:"370px",
-
- }
+const useStyles = makeStyles((theme) => ({
+ modal: {
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ },
+ paper: {
+ border: "2px solid #000",
+ boxShadow:
+ " 0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
+ },
+ carousel: {
+ width: "750px",
+ height: "370px",
+ },
}));
const Button = styled.button`
-
-background-color: #00bcd4;
-color: #fff;
-font-family: Roboto,sans-serif;
-font-size: 14px;
-font-weight: 700;
-height: 36px;
-border-radius: 3px;
-padding-left: 16px;
-padding-right: 16px;
-box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
-display: inline-block;
-position: relative;
-cursor: pointer;
-min-height: 36px;
-min-width: 88px;
-line-height: 36px;
-vertical-align: middle;
--webkit-box-align: center;
-outline: none;
-text-align: center;
-border: 0;
-padding: 0 16px !important;
-hite-space: nowrap;
-text-decoration: none;
-
-`
-
-const Formulário = styled.div `
- background-color: #fff;
- padding: 40px;
-
- border-radius: 4px;
-
-
- color: #666 !important;
-
- h2 {
- font-size: 26px;
- font-weight: lighter;
- margin-top: 20px;
- margin-bottom: 10px;
- }
-
- form .inputBlock {
- margin-block: 22px;
-
- }
-
- form .inputBlock label {
- font-size: 14px;
- font-weight: bold;
- display: block;
-
- }
-
- form .inputBlock input {
- width: 100%;
- height: 32px;
+ background-color: ${(props) =>
+ props.contrast === "" ? "#00bcd4" : "black !important"};
+ color: ${(props) => (props.contrast === "" ? "#fff" : "yellow !important")};
+ font-family: Roboto, sans-serif;
font-size: 14px;
- border: 0;
- border-bottom: 1px solid #eee;
-
- }
-
- form .inputBlock.Message input {
- height: 131px;
- }
-
- form buttom[type=submit] {
- width: 100%;
- border: 0;
- margin-top: 30px;
- background: #7d40e7
- border-radius: 2px;
- padding: 15px 20px;
- font-size: 16px;
- font-weight: bold;
- color: #fff;
+ font-weight: 700;
+ height: 36px;
+ border-radius: 3px;
+ padding-left: 16px;
+ padding-right: 16px;
+ box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+ display: inline-block;
+ position: relative;
cursor: pointer;
- transition: background 0.5s;
-
- }
-
- form buttom[type=submit]:hover {
- background: #6931ac
- }
-
-
- h2 {
- font-size: 24px;
- font-weight: lighter;
- margin-bottom: 50px;
- margin-top: 20px;
+ min-height: 36px;
+ min-width: 88px;
+ line-height: 36px;
+ vertical-align: middle;
+ -webkit-box-align: center;
+ outline: none;
text-align: center;
-
- }
-`
-
-
-
-
-export default function TransitionsModal() {
- const classes = useStyles();
- const [open, setOpen] = React.useState(false);
-
- const handleOpen = () => {
- setOpen(true);
- };
-
- const handleClose = () => {
- setOpen(false);
- };
-
- return (
-
-
- <div style={{display:"flex", justifyContent: "center"}}>
- <link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap" rel="stylesheet"/>
-
- <Button type="button" onClick={handleOpen}>
- SUGERIR OUTRO SITE
- </Button>
- <Modal
- aria-labelledby="transition-modal-title"
- aria-describedby="transition-modal-description"
- className={classes.modal}
- open={open}
- onClose={handleClose}
- closeAfterTransition
- BackdropComponent={Backdrop}
- BackdropProps={{
- timeout: 500,
- }}
- >
- <Fade in={open}>
-
- <div>
- <Formulário>
- <h2>Sugerir site de Recursos Educacionais Digitais</h2>
- <Formulario/>
- </Formulário>
-
- </div>
-
- </Fade>
- </Modal>
- </div>
- );
+ border: ${(props) =>
+ props.contrast === "" ? "0" : "1px solid white !important"};
+ padding: 0 16px !important;
+ text-decoration: ${(props) =>
+ props.contrast === "" ? "none" : "underline !important"};
+ :hover {
+ background-color: ${(props) =>
+ props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
+`;
+
+const Formulário = styled.div`
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ padding: 40px;
+
+ border-radius: 4px;
+
+
+ color: ${props => props.contrast === "" ? "#666" : "white"} !important;
+
+ border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
+
+ h2 {
+ font-size: 26px;
+ font-weight: lighter;
+ margin-top: 20px;
+ margin-bottom: 10px;
+ }
+
+ form .inputBlock {
+ margin-block: 22px;
+
+ }
+
+ form .inputBlock label {
+ font-size: 14px;
+ font-weight: bold;
+ display: block;
+
+ }
+
+ form .inputBlock input {
+ width: 100%;
+ height: 32px;
+ font-size: 14px;
+ border: 0;
+ border-bottom: 1px solid #eee;
+
+ }
+
+ form .inputBlock.Message input {
+ height: 131px;
+ }
+
+ form buttom[type=submit] {
+ width: 100%;
+ border: 0;
+ margin-top: 30px;
+ background: #7d40e7
+ border-radius: 2px;
+ padding: 15px 20px;
+ font-size: 16px;
+ font-weight: bold;
+ color: #fff;
+ cursor: pointer;
+ transition: background 0.5s;
+
+ }
+
+ form buttom[type=submit]:hover {
+ background: #6931ac
+ }
+
+
+ h2 {
+ font-size: 24px;
+ font-weight: lighter;
+ margin-bottom: 50px;
+ margin-top: 20px;
+ text-align: center;
+
+ }
+`;
+
+export default function TransitionsModal({ contrast }) {
+
+ const classes = useStyles();
+ const [open, setOpen] = React.useState(false);
+
+ const handleOpen = () => {
+ setOpen(true);
+ };
+
+ const handleClose = () => {
+ setOpen(false);
+ };
+
+ return (
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ <link
+ href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap"
+ rel="stylesheet"
+ />
+ <Button type="button" onClick={handleOpen} contrast={contrast}>
+ SUGERIR OUTRO SITE
+ </Button>
+ <Modal
+ aria-labelledby="transition-modal-title"
+ aria-describedby="transition-modal-description"
+ className={classes.modal}
+ open={open}
+ onClose={handleClose}
+ closeAfterTransition
+ BackdropComponent={Backdrop}
+ BackdropProps={{
+ timeout: 500,
+ }}
+ >
+ <Fade in={open}>
+ <div>
+ <Formulário contrast={contrast}>
+ <h2>Sugerir site de Recursos Educacionais Digitais</h2>
+ <Formulario contrast={contrast}/>
+ </Formulário>
+ </div>
+ </Fade>
+ </Modal>
+ </div>
+ );
}
diff --git a/src/Components/ModalAlterarAvatar/ComponentAlterarAvatar.js b/src/Components/ModalAlterarAvatar/ComponentAlterarAvatar.js
index a3e6a895..9af51a6c 100644
--- a/src/Components/ModalAlterarAvatar/ComponentAlterarAvatar.js
+++ b/src/Components/ModalAlterarAvatar/ComponentAlterarAvatar.js
@@ -37,13 +37,13 @@ function ChooseImage (props) {
<img src={props.avatar}
alt="user avatar" style={{height:"inherit", width:"inherit", objectFit:"cover"}}
/>
- <input accept="image/*" id="avatar-file"
- type="file"
- onChange={(e) => props.handleFile(e.target.files)}
- style={{display : "none"}}
+ <input accept="image/*" id="avatar-file"
+ type="file"
+ onChange={(e) => props.handleFile(e.target.files)}
+ style={{display : "none"}}
/>
<label for="avatar-file" style={{width:"inherit"}}>
- <ChangeAvatarDiv >
+ <ChangeAvatarDiv contrast={props.contrast}>
<span>Alterar</span>
</ChangeAvatarDiv>
</label>
@@ -55,12 +55,9 @@ function ChooseImage (props) {
<img alt="" src={props.tempImg}/>
}
<ButtonsDiv>
- <ButtonCancelar onClick={props.handleClose}>
+ <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>
<span>Cancelar</span>
</ButtonCancelar>
- <ButtonConfirmar>
- <span>Salvar Alterações</span>
- </ButtonConfirmar>
</ButtonsDiv>
</div>
)
@@ -73,7 +70,6 @@ export default function ComponentAlterarAvatar (props) {
const handleFile = (selectorFiles) => {
const objectURL = URL.createObjectURL(selectorFiles[0])
- console.log(objectURL)
setTempImg(objectURL)
setUploading(true)
}
@@ -110,12 +106,12 @@ export default function ComponentAlterarAvatar (props) {
}
return (
- <ModalDiv>
+ <ModalDiv contrast={props.contrast}>
<HeaderDiv>
<span style={{width:"32px"}}/>
<StyledH2>{uploadingImage ? 'Alterar foto do perfil' : 'Editar Foto'}</StyledH2>
<StyledCloseModalButton onClick={props.handleClose}>
- <CloseIcon style={{color : "#666"}}/>
+ <CloseIcon style={props.contrast === "" ? { color: "#666" } : { color: "white" }}/>
</StyledCloseModalButton>
</HeaderDiv>
<DialogDiv>
@@ -124,7 +120,7 @@ export default function ComponentAlterarAvatar (props) {
(
[
<>
- <EditarDiv>
+ <EditarDiv contrast={props.contrast}>
<TextoEditarDiv>
Clique nos Ãcones e arraste para selecionar a parte que você quer da foto
</TextoEditarDiv>
@@ -133,11 +129,8 @@ export default function ComponentAlterarAvatar (props) {
</div>
</EditarDiv>
<FooterButtonsDiv>
- <ButtonCancelar>ESCOLHER OUTRA</ButtonCancelar>
- <div>
- <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar>
- <ButtonConfirmar onClick={() => {completeSelection()}}>SELECIONAR FOTO</ButtonConfirmar>
- </div>
+ <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar>
+ <ButtonConfirmar contrast={props.contrast} onClick={() => {completeSelection()}}>SELECIONAR FOTO</ButtonConfirmar>
</FooterButtonsDiv>
</>
]
@@ -147,11 +140,12 @@ export default function ComponentAlterarAvatar (props) {
[
<>
<ChooseImage
+ contrast={props.contrast}
avatar={props.userAvatar === '' || props.userAvatar == null ? Profile : `${apiDomain}` + props.userAvatar}
handleFile={handleFile}
handleClose={props.handleClose}
tempImg={tempImgURL}
- />
+ />
</>
]
)
@@ -167,9 +161,9 @@ const FooterButtonsDiv = styled.div`
display : flex;
flex-direction : row;
align-content : center;
- justify-content : space-between;
+ justify-content : flex-end;
Button {
- margin-top : 20px;
+ margin-left: 15px;
}
`
@@ -181,13 +175,15 @@ const TextoEditarDiv = styled.div`
`
const EditarDiv = styled.div`
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
position : relative;
background-color : #f4f4f4;
padding : 20px 30px 40px;
`
const ChangeAvatarDiv = styled.div`
- color : rgba(255,255,255,.7);
+ color: ${props => props.contrast === "" ? "rgba(255,255,255,.7)" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
background-color:rgba(0,0,0,.5);
position: absolute;
bottom: 0;
@@ -204,91 +200,92 @@ const ChangeAvatarDiv = styled.div`
`
const ModalDiv = styled.div`
- background-color : #fff;
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
+ color: ${props => props.contrast === "" ? "#666" : "white"} !important;
border-radius : 4px;
- min-width : 560px;
- color : #666;
display: flex;
flex-direction : column;
@media screen and (max-width: 959px) {
- height : 100%;
width : 100%;
}
`
const ButtonConfirmar = styled(Button)`
- background-color : #00bcd4 !important;
- color : #fff !important;
+ background-color: ${props => props.contrast === "" ? "#00bcd4" : "black"} !important;
+ color: ${props => props.contrast === "" ? "#fff" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
+ border: ${props => props.contrast === "" ? "" : "1px solid white !important"};
border-radius : 3px !important;
`
const ButtonCancelar = styled(Button)`
- &:hover {
- background-color : rgba(158,158,158,0.2) !important;
- }
- background-color : #fff !important;
- color : #666 !important;
- text-decoration : none !important;
+ color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
+ background-color: transparent;
outline : none !important;
text-align : center !important;
`
const ButtonsDiv = styled.div`
-display : flex;
-justify-content:flex-end;
+ Button {
+ margin-left: 15px;
+ }
+ display : flex;
+ justify-content:flex-end;
`
const AvatarCircleDiv = styled.div`
-margin-bottom : 0;
-border-radius : 50%;
-height : 150px;
-width : 150px;
-position : relative;
-overflow: hidden;
+ margin-bottom : 0;
+ border-radius : 50%;
+ height : 150px;
+ width : 150px;
+ position : relative;
+ overflow: hidden;
`
const DivFlowHolder =styled.div`
-align-self : auto;
+ align-self : auto;
`
const DivAlterarFoto = styled.div`
-display : flex;
-margin-bottom : 30px;
-flex-direction : row;
-align-items : center;
-justify-content :center;
+ display : flex;
+ margin-bottom : 30px;
+ flex-direction : row;
+ align-items : center;
+ justify-content :center;
`
const DialogDiv = styled.div`
-padding : 20px 30px;
-overflow : visible !important;
+ padding : 20px 30px;
+ overflow : visible !important;
`
const HeaderDiv = styled.div`
-display : flex;
-flex-direction : row;
-align-items : center;
-align-content : center;
-justify-content : space-between;
-max-width : 100%;
+ display : flex;
+ flex-direction : row;
+ align-items : center;
+ align-content : center;
+ justify-content : space-between;
+ max-width : 100%;
`
const StyledH2 = styled.h2`
-font-size : 26px;
-font-weight : normal;
-margin-top : 20px;
-margin-bottom : 10px;
-font-family: inherit;
-line-height: 1.1;
-color: inherit;
+ font-size : 26px;
+ font-weight : normal;
+ margin-top : 20px;
+ margin-bottom : 10px;
+ font-family: inherit;
+ line-height: 1.1;
+ color: inherit;
`
const StyledCloseModalButton = styled(Button)`
-display : inline-block;
-position : relative;
-float : right !important;
-background : transparent !important;
-min-width: 0 !important;
-width : 40px;
-border-radius : 50%;
-padding : 8px;
-height : 40px;
-margin : 0 6px;
+ display : inline-block;
+ position : relative;
+ float : right !important;
+ background : transparent !important;
+ min-width: 0 !important;
+ width : 40px;
+ border-radius : 50%;
+ padding : 8px;
+ height : 40px;
+ margin : 0 6px;
`
diff --git a/src/Components/ModalAlterarAvatar/ModalAlterarAvatar.js b/src/Components/ModalAlterarAvatar/ModalAlterarAvatar.js
index 73583204..59fb07c7 100644
--- a/src/Components/ModalAlterarAvatar/ModalAlterarAvatar.js
+++ b/src/Components/ModalAlterarAvatar/ModalAlterarAvatar.js
@@ -31,10 +31,8 @@ const StyledModal = styled(Modal)`
padding : 10px !important;
`
-export default function ModarAlterarAvatar (props){
-
+export default function ModalAlterarAvatar (props){
return (
-
<StyledModal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
@@ -51,12 +49,12 @@ export default function ModarAlterarAvatar (props){
<Fade in={props.open} style={{ transitionDelay :"0.4ms"}}>
<ComponentAlterarAvatar
+ contrast={props.contrast}
userAvatar={props.userAvatar}
handleClose={props.handleClose}
id={props.id}
/>
</Fade>
</StyledModal>
-
)
}
diff --git a/src/Components/ModalAlterarCover/ComponentAlterarCover.js b/src/Components/ModalAlterarCover/ComponentAlterarCover.js
index a4059ecf..72ad9886 100644
--- a/src/Components/ModalAlterarCover/ComponentAlterarCover.js
+++ b/src/Components/ModalAlterarCover/ComponentAlterarCover.js
@@ -34,7 +34,7 @@ export default function ComponentAlterarCover (props) {
const [crop] = useState({
unit: "%" ,
width : 100,
- aspect: 16 / 9
+ aspect: 16 / 3.2
});
function handleSuccess (data) {
@@ -58,49 +58,47 @@ export default function ComponentAlterarCover (props) {
}
return (
- <ModalDiv>
+ <ModalDiv contrast={props.contrast}>
<HeaderDiv>
<span style={{width:"32px"}}/>
<StyledH2>Editar Capa do Perfil</StyledH2>
<StyledCloseModalButton onClick={props.handleClose}>
- <CloseIcon style={{color : "#666"}}/>
+ <CloseIcon style={props.contrast === "" ? { color: "#666" } : { color: "white" }}/>
</StyledCloseModalButton>
</HeaderDiv>
<DialogDiv>
- <EditarDiv>
+ <EditarDiv contrast={props.contrast}>
<TextoEditarDiv>
Clique nos Ãcones e arraste para selecionar a parte que você quer da foto
</TextoEditarDiv>
- <div style={{maxWidth : "500px", maxHeight : "300px"}}>
+ <div style={{maxWidth : "100%", maxHeight : "100%"}}>
<Cropper src={tempImgURL} crop={crop} update={updateCover}/>
</div>
</EditarDiv>
<FooterButtonsDiv>
- <ButtonCancelar>ESCOLHER OUTRA</ButtonCancelar>
<div>
- <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar>
- <ButtonConfirmar onClick={() => {completeSelection()}}>SELECIONAR FOTO</ButtonConfirmar>
+ <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar>
+ <ButtonConfirmar contrast={props.contrast} onClick={() => {completeSelection()}}>SELECIONAR FOTO</ButtonConfirmar>
</div>
</FooterButtonsDiv>
</DialogDiv>
- </ModalDiv>
- )
+ </ModalDiv>
+ )
}
const ButtonCancelar = styled(Button)`
- &:hover {
- background-color : rgba(158,158,158,0.2) !important;
- }
- background-color : #fff !important;
- color : #666 !important;
- text-decoration : none !important;
+ color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
+ background-color: transparent;
outline : none !important;
text-align : center !important;
`
const ButtonConfirmar = styled(Button)`
- background-color : #00bcd4 !important;
- color : #fff !important;
+ background-color: ${props => props.contrast === "" ? "#00bcd4" : "black"} !important;
+ color: ${props => props.contrast === "" ? "#fff" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
+ border: ${props => props.contrast === "" ? "" : "1px solid white !important"};
border-radius : 3px !important;
`
@@ -109,13 +107,12 @@ const FooterButtonsDiv = styled.div`
display : flex;
flex-direction : row;
align-content : center;
- justify-content : space-between;
+ justify-content : flex-end;
Button {
margin-top : 20px;
}
`
-
const TextoEditarDiv = styled.div`
margin-bottom : 15px;
align-self : center;
@@ -124,55 +121,55 @@ const TextoEditarDiv = styled.div`
`
const EditarDiv = styled.div`
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
position : relative;
background-color : #f4f4f4;
- padding : 20px 30px 40px;
`
const ModalDiv = styled.div`
-background-color : #fff;
-border-radius : 4px;
-min-width : 560px;
-color : #666;
-display: flex;
-flex-direction : column;
-@media screen and (max-width: 959px) {
- height : 100%;
- width : 100%;
-}
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
+ color: ${props => props.contrast === "" ? "#666" : "white"} !important;
+ border-radius : 4px;
+ width : 560px;
+ display: flex;
+ flex-direction : column;
+ @media screen and (max-width: 959px) {
+ width : 100%;
+ }
`
const DialogDiv = styled.div`
-padding : 20px 30px;
-overflow : visible !important;
+ padding : 20px 30px;
+ overflow : visible !important;
`
const HeaderDiv = styled.div`
-display : flex;
-flex-direction : row;
-align-items : center;
-align-content : center;
-justify-content : space-between;
-max-width : 100%;
+ display : flex;
+ flex-direction : row;
+ align-items : center;
+ align-content : center;
+ justify-content : space-between;
+ max-width : 100%;
`
const StyledH2 = styled.h2`
-font-size : 26px;
-font-weight : normal;
-margin-top : 20px;
-margin-bottom : 10px;
-font-family: inherit;
-line-height: 1.1;
-color: inherit;
+ font-size : 26px;
+ font-weight : normal;
+ margin-top : 20px;
+ margin-bottom : 10px;
+ font-family: inherit;
+ line-height: 1.1;
+ color: inherit;
`
const StyledCloseModalButton = styled(Button)`
-display : inline-block;
-position : relative;
-float : right !important;
-background : transparent !important;
-min-width: 0 !important;
-width : 40px;
-border-radius : 50%;
-padding : 8px;
-height : 40px;
-margin : 0 6px;
+ display : inline-block;
+ position : relative;
+ float : right !important;
+ background : transparent !important;
+ min-width: 0 !important;
+ width : 40px;
+ border-radius : 50%;
+ padding : 8px;
+ height : 40px;
+ margin : 0 6px;
`
diff --git a/src/Components/ModalAlterarCover/ModalAlterarCover.js b/src/Components/ModalAlterarCover/ModalAlterarCover.js
index 7e971f58..d572530f 100644
--- a/src/Components/ModalAlterarCover/ModalAlterarCover.js
+++ b/src/Components/ModalAlterarCover/ModalAlterarCover.js
@@ -32,14 +32,11 @@ const StyledModal = styled(Modal)`
`
export default function ModarAlterarCover (props){
-
return (
-
<StyledModal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
open={props.open}
-
centered="true"
onClose={props.handleClose}
closeAfterTransition
@@ -47,16 +44,15 @@ export default function ModarAlterarCover (props){
BackdropProps={{
timeout: 500,
}}
- >
+ >
<Fade in={props.open} style={{ transitionDelay :"0.4ms"}}>
-
<ComponentAlterarCover
+ contrast={props.contrast}
cover={props.cover}
handleClose={props.handleClose}
id={props.id}
/>
</Fade>
</StyledModal>
-
)
}
diff --git a/src/Components/ModalAvaliarRecurso.js b/src/Components/ModalAvaliarRecurso.js
index 7f9b7651..8ba192b8 100644
--- a/src/Components/ModalAvaliarRecurso.js
+++ b/src/Components/ModalAvaliarRecurso.js
@@ -31,6 +31,7 @@ import CloseModalButton from './CloseModalButton'
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';
@@ -46,6 +47,8 @@ const StyledRadio = withStyles({
export default function ModalAvaliarRecurso(props) {
+ const classes = useStyles();
+
const [options, setOptions] = useState([])
const [avaliacao, setAvaliacao] = useState([null, null, null, null])
@@ -138,12 +141,12 @@ export default function ModalAvaliarRecurso(props) {
>
<Fade in={props.open}>
- <Container>
- <Header>
+ <Container contrast={props.contrast}>
+ <Header contrast={props.contrast}>
<h2>Você está avaliando o recurso
- <span style={{ fontWeight: "bolder" }}> {props.title}</span>
+ <span style={{ fontWeight: "bolder" }}> {props.title}</span>
</h2>
- <CloseModalButton handleClose={props.handleClose} />
+ <CloseModalButton contrast={props.contrast} handleClose={props.handleClose} />
</Header>
<Content>
@@ -164,8 +167,8 @@ export default function ModalAvaliarRecurso(props) {
</Grid>
<Grid item xs={2}>
<RadioGroup row onChange={(e) => { handleRadios(e, option.id) }}>
- <FormControlLabel value={"Sim"} control={<StyledRadio />} label="Não" />
- <FormControlLabel value={"Não"} control={<StyledRadio />} label="Sim" />
+ <FormControlLabel className={`${props.contrast}LinkColor`} value={"Sim"} control={<StyledRadio style={props.contrast === "" ? {} : {color: "white"}}/>} label="Não" />
+ <FormControlLabel className={`${props.contrast}LinkColor`} value={"Não"} control={<StyledRadio style={props.contrast === "" ? {} : {color: "white"}}/>} label="Sim" />
</RadioGroup>
</Grid>
</Grid>
@@ -177,10 +180,12 @@ export default function ModalAvaliarRecurso(props) {
<Grid item xs={12}>
<FormControl style={{ width: "100%", height: "100px" }}>
<StyledTextField
+ contrast={props.contrast}
id={"title-form"}
label={"Justificativa (opcional)"}
type={"text"}
value={justificativa}
+ InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
onChange={e => { handleChangeJustificativa(e) }}
multiline
fullWidth
@@ -190,8 +195,8 @@ export default function ModalAvaliarRecurso(props) {
<Grid item xs={12}>
<ButtonsDiv>
- <ButtonEnviarAvaliar disabled={buttonDisabled} onClick={() => { handleAvaliar() }}>ENVIAR AVALIAÇÂO</ButtonEnviarAvaliar>
- <GreyButton onClick={() => { handleCancel() }}>CANCELAR</GreyButton>
+ <ButtonEnviarAvaliar contrast={props.contrast} disabled={buttonDisabled} onClick={() => { handleAvaliar() }}>ENVIAR AVALIAÇÂO</ButtonEnviarAvaliar>
+ <GreyButton contrast={props.contrast} onClick={() => { handleCancel() }}>CANCELAR</GreyButton>
</ButtonsDiv>
</Grid>
</Grid>
@@ -208,10 +213,9 @@ export default function ModalAvaliarRecurso(props) {
}
const Content = styled.div`
- padding : 10px 75px 0 75px;
+ padding : 0 30px 20px 30px;
overflow : visible;
max-width : 100%;
- color : #666;
font-size : 16px;
.main-content-text {
@@ -229,10 +233,10 @@ const Content = styled.div`
const Header = styled.div`
display : flex;
flex-direction : row;
- padding : 20px 75px 0 75px;
+ padding : 20px 20px 20px 20px;
align-items : center;
justify-content : space-between;
- color : #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"} !important;
@media screen and (min-width : 990px) {
height : 64px;
@@ -264,47 +268,23 @@ const StyledModal = styled(Modal)`
const Container = styled.div`
box-sizing : border-box;
box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
- background-color : #fff;
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
align : center;
display : flex;
flex-direction : column;
min-width : 240px;
- max-height : none;
+ max-height : 90%;
position : relative;
border-radius : 4px;
max-width : 100%;
-
- @media screen and (max-width : 699px) {
- overflow : scroll;
- width : 100%;
- height : 100%;
- }
+ overflow-y : scroll;
p {
margin : 0 0 10px;
}
`
-const StyledTextField = styled(TextField)`
- font-size : 14px;
- width : 100% !important;
- full-width : 100% !important;
-
- .MuiFormControl-root {
- margin : 18px 0 !important;
- }
-
- label.Mui-focused {
- color : #ff7f00;
- }
-
- label.Mui-focused.Mui-error {
- color : red;
- }
-
- .MuiInput-underline::after {
- border-bottom: 2px solid #ff7f00;
- }
-`
const ButtonsDiv = styled.div`
display : flex;
@@ -322,13 +302,13 @@ const ButtonsDiv = styled.div`
`
const GreyButton = styled(Button)`
&:hover {
- background-color : rgba(158,158,158,0.2) !important;
+ background-color : ${props => props.contrast === "" ? "rgba(158,158,158,0.2)" : ""} !important;
}
max-height : 36px !important;
background-color : transparent !important;
- color : #666 !important;
- text-decoration : none !important;
+ color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
+ text-decoration : ${props => props.contrast === "" ? "none" : "underline"} !important;
outline : none !important;
text-align : center !important;
font-weight : 600 !important;
@@ -337,10 +317,12 @@ const GreyButton = styled(Button)`
`
const ButtonEnviarAvaliar = styled(Button)`
- color : ${(props) => props.disabled ? "rgba(0,0,0,0.38)" : "rgba(255,255,255,0.87) !important"};
+ color : ${props => props.contrast === "" ? `${props.disabled ? `rgba(0,0,0,0.38)` : `rgba(255,255,255,0.87)`}` : `${props.disabled ? `white` : `yellow`}`} !important;
box-shadow : ${(props) => props.disabled ? "none !important" : "0 2px 5px 0 rgba(0,0,0,.26) !important"};
font-weight : 600 !important;
- background-color : ${(props) => props.disabled ? "#e9e9e9 !important" : "#ff7f00 !important"};
+ background-color : ${props => props.contrast === "" ? `${props.disabled ? "#e9e9e9 !important" : "#ff7f00 !important"}` : "black !important"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
+ border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
margin-left : 8px !important;
margin-right : 8px !important;
diff --git a/src/Components/ModalConfirmarCuradoria.js b/src/Components/ModalConfirmarCuradoria.js
index 046106be..8acc01ad 100644
--- a/src/Components/ModalConfirmarCuradoria.js
+++ b/src/Components/ModalConfirmarCuradoria.js
@@ -76,7 +76,7 @@ export default function ModalConfirmarCuradoriaOpen(props) {
}}
>
<Fade in={props.open}>
- <Container recusado={!props.aceito}>
+ <Container contrast={props.contrast} recusado={!props.aceito}>
<Header>
<span style={{ width: "32px" }} />
<h2>Recurso a ser {props.aceito ? 'aprovado' : 'recusado'}</h2>
@@ -104,17 +104,8 @@ export default function ModalConfirmarCuradoriaOpen(props) {
)
}
<ButtonsDiv>
- {
- props.aceito ?
- (
- <ButtonEnviarAvaliar onClick={() => { handleConfirmation() }}>SIM, CONFIRMAR</ButtonEnviarAvaliar>
- )
- :
- (
- <ButtonEnviarAvaliar onClick={() => { handleConfirmation() }}>SIM, CONFIRMAR</ButtonEnviarAvaliar>
- )
- }
- <GreyButton onClick={handleCancel}>NÃO, ALTERAR AVALIAÇÃO</GreyButton>
+ <ButtonEnviarAvaliar contrast={props.contrast} onClick={() => { handleConfirmation() }}>SIM, CONFIRMAR</ButtonEnviarAvaliar>
+ <GreyButton contrast={props.contrast} onClick={handleCancel}>NÃO, ALTERAR AVALIAÇÃO</GreyButton>
</ButtonsDiv>
</Content>
</Container>
@@ -128,7 +119,7 @@ const Content = styled.div`
padding : 30px;
overflow : visible;
max-width : 100%;
- color : #666;
+ color : inherit;
font-size : 16px;
text-align : start;
.reason-offensive {
@@ -146,7 +137,7 @@ const Header = styled.div`
align-items : center;
max-height : none;
justify-content : space-between;
- color : #666;
+ color : inherit;
h2 {
font-size : 30px;
@@ -172,7 +163,8 @@ const StyledModal = styled(Modal)`
const Container = styled.div`
box-sizing : border-box;
box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
- background-color : #fff;
+ background-color : ${props => props.contrast === "" ? "white" : "black"} !important;
+ color : ${props => props.contrast === "" ? "#666" : "white"} !important;
align : center;
display : flex;
flex-direction : column;
@@ -180,6 +172,7 @@ const Container = styled.div`
position : relative;
border-radius : 4px;
max-width : 100%;
+ border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
max-height : ${props => props.recusado ? 'none' : '370px'};
@media screen and (max-width : 699px) {
@@ -209,13 +202,13 @@ const ButtonsDiv = styled.div`
`
const GreyButton = styled(Button)`
&:hover {
- background-color : rgba(158,158,158,0.2) !important;
+ background-color : ${props => props.contrast === "" ? "rgba(158,158,158,0.2)" : ""} !important;
}
max-height : 36px !important;
background-color : transparent !important;
- color : #666 !important;
- text-decoration : none !important;
+ color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
+ text-decoration : ${props => props.contrast === "" ? "none" : "underline"} !important;
outline : none !important;
text-align : center !important;
font-weight : 600 !important;
@@ -229,10 +222,11 @@ const GreyButton = styled(Button)`
`
const ButtonEnviarAvaliar = styled(Button)`
- color : rgba(255,255,255,0.87) !important;
- box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
+ color : ${props => props.contrast === "" ? `rgba(255,255,255,0.87)` : `yellow`} !important;
font-weight : 600 !important;
- background-color : #ff7f00 !important;
+ background-color : ${props => props.contrast === "" ? "#ff7f00" : "black"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
+ border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
margin-left : 8px !important;
margin-right : 8px !important;
diff --git a/src/Components/ModalConfirmarUnfollow.js b/src/Components/ModalConfirmarUnfollow.js
index 7d349e08..a7951b70 100644
--- a/src/Components/ModalConfirmarUnfollow.js
+++ b/src/Components/ModalConfirmarUnfollow.js
@@ -31,12 +31,14 @@ const HeaderDiv = styled.div`
margin-top : 20px;
margin-bottpm : 10px
font-weight : normal;
- color : #666
}
`
const ContentContainer = styled.div`
+color: ${props => props.contrast === "" ? "#666" : "white"} !important;
+background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+border: ${props => props.contrast === "" ? "1px solid black" : "1px solid white"} !important;
+
box-sizing : border-box;
- background-color : white;
max-width : none;
align : center;
display : flex;
@@ -46,7 +48,6 @@ const ContentContainer = styled.div`
position : relative;
padding : 10px;
border-radius : 4px;
- color : #666;
@media screen and (max-width : 899px) {
width : 100%;
@@ -54,19 +55,21 @@ const ContentContainer = styled.div`
}
`
const ButtonCancelar = styled(Button)`
+color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
+text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
+
&:hover {
background-color : rgba(158,158,158,0.2) !important;
}
- background-color : #fff !important;
- color : #666 !important;
- text-decoration : none !important;
outline : none !important;
text-align : center !important;
`
const ButtonConfirmar = styled(Button)`
- background-color : #00bcd4 !important;
- color : #fff !important;
+ color: ${props => props.contrast === "" ? "white" : "yellow"} !important;
+ background-color: ${props => props.contrast === "" ? "#00bcd4" : "black"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"} !important;
border-radius : 3px !important;
`
@@ -91,21 +94,21 @@ export default function ModalConfirmarUnfollow (props) {
}}
>
<Fade in={props.open}>
- <ContentContainer>
+ <ContentContainer contrast={props.contrast}>
<HeaderDiv>
<span style={{width:"32px"}}/>
<h3>
{text.header}
</h3>
- <CloseModalButton handleClose={props.handleClose}/>
+ <CloseModalButton contrast={props.contrast} handleClose={props.handleClose}/>
</HeaderDiv>
<div style={{display : "flex", flexDirection : "column", padding : "20px 30px"}}>
<div style={{marginTop : "0", textAlign : "center", marginBottom : "20px"}}>
- <span style={{fontSize : "14px", color : "#666"}}>{text.explanation}</span>
+ <span style={{fontSize : "14px"}}>{text.explanation}</span>
</div>
<div style={{display : "flex", flexDirection : "row", justifyContent: "space-evenly"}}>
- <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar>
- <ButtonConfirmar onClick={props.handleConfirm}>DEIXAR DE SEGUIR </ButtonConfirmar>
+ <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar>
+ <ButtonConfirmar contrast={props.contrast} onClick={props.handleConfirm}>DEIXAR DE SEGUIR </ButtonConfirmar>
</div>
</div>
</ContentContainer>
diff --git a/src/Components/ModalEditarColecao.js b/src/Components/ModalEditarColecao.js
index bd8511f2..52c7d5c4 100644
--- a/src/Components/ModalEditarColecao.js
+++ b/src/Components/ModalEditarColecao.js
@@ -36,7 +36,6 @@ export default function ModalEditarColecao (props) {
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
open={props.open}
-
centered="true"
onClose={props.handleClose}
closeAfterTransition
@@ -46,14 +45,14 @@ export default function ModalEditarColecao (props) {
}}
>
<Fade in={props.open}>
- <Container>
+ <Container contrast={props.contrast}>
<Header>
<span style={{width:"32px"}}/>
<h2>Editar Coleção</h2>
<CloseModalButton handleClose={props.handleClose} id={props.id}/>
</Header>
<Content style={{paddingTop : "0"}}>
- <EditarColecaoForm id={props.id} handleClose={props.handleClose} finalize={finalize}/>
+ <EditarColecaoForm contrast={props.contrast} id={props.id} handleClose={props.handleClose} finalize={finalize}/>
</Content>
</Container>
</Fade>
@@ -78,7 +77,6 @@ const Header = styled.div`
h2 {
font-size : 26px;
font-weight : lighter;
- color : #666
}
`
@@ -98,7 +96,9 @@ const StyledModal = styled(Modal)`
const Container = styled.div`
box-sizing : border-box;
box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
- background-color : white;
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ color: ${props => props.contrast === "" ? "#666" : "white"} !important;
+ border: 1px solid ${props => props.contrast === "" ? "#666" : "white"} !important;
align : center;
display : flex;
flex-direction : column;
@@ -114,6 +114,5 @@ const Container = styled.div`
@media screen and (max-width : 699px) {
width : 100%;
- height : 100%;
}
`
diff --git a/src/Components/ModalExcluirColecao.js b/src/Components/ModalExcluirColecao.js
index 971dc2f5..f4b2dafd 100644
--- a/src/Components/ModalExcluirColecao.js
+++ b/src/Components/ModalExcluirColecao.js
@@ -60,19 +60,14 @@ export default function ModalExcluirColecao (props) {
<Container contrast={props.contrast}>
<Header>
<h2>Tem certeza que deseja excluir esta Coleção?</h2>
+ <CloseModalButton contrast={props.contrast} handleClose={props.handleClose} id={props.id}/>
</Header>
<Content>
<p>A exclusão de uma coleção é permanente. Não é possÃvel desfazer.</p>
<ButtonsDiv>
- <GreyButton
- callback={props.handleClose}
- text={"CANCELAR"}
- />
- <PurpleButton
- callback={handleDelete}
- text={"EXCLUIR"}
- />
+ <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar>
+ <ButtonEnviar contrast={props.contrast} onClick={handleDelete}>EXCLUIR</ButtonEnviar>
</ButtonsDiv>
</Content>
</Container>
@@ -112,7 +107,6 @@ const Header = styled.div`
h2 {
font-size : 26px;
font-weight : lighter;
- color : #666
}
`
@@ -131,7 +125,10 @@ const StyledModal = styled(Modal)`
const Container = styled.div`
box-sizing : border-box;
- background-color : white;
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ color: ${props => props.contrast === "" ? "#666" : "white"} !important;
+ border: 1px solid ${props => props.contrast === "" ? "#666" : "white"} !important;
+
max-width : none;
align : center;
display : flex;
@@ -141,7 +138,6 @@ const Container = styled.div`
position : relative;
padding : 10px;
border-radius : 4px;
- color : #666;
@media screen and (max-width : 899px) {
width : 100%;
diff --git a/src/Components/ModalExcluirComentario.js b/src/Components/ModalExcluirComentario.js
index 1345ee36..2217e2eb 100644
--- a/src/Components/ModalExcluirComentario.js
+++ b/src/Components/ModalExcluirComentario.js
@@ -4,6 +4,7 @@ import Fade from '@material-ui/core/Fade';
import styled from 'styled-components'
import { Button } from '@material-ui/core';
import Backdrop from '@material-ui/core/Backdrop';
+import CloseIcon from '@material-ui/icons/Close';
const StyledModal = styled(Modal)`
margin : 0 !important;
@@ -29,7 +30,9 @@ const HeaderDiv = styled.div`
`
const ContentContainer = styled.div`
box-sizing : border-box;
- background-color : white;
+ background-color: ${props => props.contrast === "" ? "white" : "black"};
+ border: ${props => props.contrast === "" ? "" : "1px solid white"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
max-width : none;
min-wdith : 240px;
align : center;
@@ -38,9 +41,8 @@ const ContentContainer = styled.div`
box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12)!important;
`
const ButtonCancelar = styled(Button)`
- background-color : rgba(158,158,158,0.2) !important;
- color : #666 !important;
- text-decoration : none !important;
+ color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
outline : none !important;
text-align : center !important;
margin : 0 8px !important;
@@ -48,13 +50,32 @@ const ButtonCancelar = styled(Button)`
`
const ButtonConfirmar = styled(Button)`
- background-color : #ff7f00 !important;
- color : #fff !important;
+ background-color: ${props => props.contrast === "" ? "#ff7f00" : "black"} !important;
+ color: ${props => props.contrast === "" ? "#fff" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
+ border: ${props => props.contrast === "" ? "" : "1px solid white !important"};
border-radius : 3px !important;
margin : 0 8px !important;
font-weight : 600 !important;
`
+const StyledCloseModalButton = styled(Button)`
+ display : inline-block;
+ position : relative;
+ margin-right : -8px !important;
+ background : transparent !important;
+ min-width: 0 !important;
+ width : 40px;
+`
+
+function CloseModalButton(props) {
+ return (
+ <StyledCloseModalButton onClick={props.handleClose}>
+ <CloseIcon style={props.contrast === "" ? { color: "#666" } : { color: "white" }} />
+ </StyledCloseModalButton>
+ )
+}
+
export default function ModalExcluir (props) {
const text = {
header : "Tem certeza que deseja excluir este comentário?",
@@ -63,32 +84,33 @@ export default function ModalExcluir (props) {
return (
<StyledModal
- aria-labelledby="transition-modal-title"
- aria-describedby="transition-modal-description"
- open={props.open}
+ aria-labelledby="transition-modal-title"
+ aria-describedby="transition-modal-description"
+ open={props.open}
- centered="true"
- onClose={props.handleClose}
- closeAfterTransition
- BackdropComponent={Backdrop}
- BackdropProps={{
- timeout: 500,
- }}
+ centered="true"
+ onClose={props.handleClose}
+ closeAfterTransition
+ BackdropComponent={Backdrop}
+ BackdropProps={{
+ timeout: 500,
+ }}
>
<Fade in={props.open}>
- <ContentContainer>
+ <ContentContainer contrast={props.contrast}>
<HeaderDiv>
<h3 style={{fontSize : "24px", margin : "20px 15px 10px", fontWeight : "normal"}}>
{text.header}
</h3>
+ <CloseModalButton handleClose={props.handleClose} contrast={props.contrast} />
</HeaderDiv>
<div style={{display : "flex", flexDirection : "column", padding : "20px 30px"}}>
<div style={{marginTop : "0", textAlign : "center", marginBottom : "20px"}}>
- <span style={{fontSize : "14px", color : "#666"}}>{text.explanation}</span>
+ <span style={{fontSize : "14px"}}>{text.explanation}</span>
</div>
<div style={{display : "flex", flexDirection : "row", justifyContent: "center"}}>
- <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar>
- <ButtonConfirmar onClick={props.handleConfirm}> EXCLUIR </ButtonConfirmar>
+ <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar>
+ <ButtonConfirmar contrast={props.contrast} onClick={props.handleConfirm}> EXCLUIR </ButtonConfirmar>
</div>
</div>
</ContentContainer>
diff --git a/src/Components/ModalLearningObjectPublished.js b/src/Components/ModalLearningObjectPublished.js
index 566460be..8421e0d8 100644
--- a/src/Components/ModalLearningObjectPublished.js
+++ b/src/Components/ModalLearningObjectPublished.js
@@ -28,6 +28,9 @@ import Twitter from '../img/twitter.svg'
import LinkIcon from '../img/link_icon.svg'
import CloseModalButton from './CloseModalButton.js'
+//Image Import
+import { Publicar } from "ImportImages.js";
+
export default function ModalLearningObjectPublished (props) {
// const refContainer = useRef(props.link);
@@ -50,11 +53,11 @@ export default function ModalLearningObjectPublished (props) {
}}
>
<Fade in={props.open}>
- <Container>
+ <Container contrast={props.contrast}>
<Header>
<span style={{width:"32px"}}/>
<h2>O seu recurso foi para a curadoria!</h2>
- <CloseModalButton handleClose={props.handleClose}/>
+ <CloseModalButton contrast={props.contrast} handleClose={props.handleClose}/>
</Header>
<Content >
@@ -69,7 +72,7 @@ export default function ModalLearningObjectPublished (props) {
</Grid>
</Grid>
</Content>
- <ShareContainer>
+ <ShareContainer contrast={props.contrast}>
<p>Gostaria de convidar o seus amigos para conhecer o recurso?</p>
<p>Compartilhe nas redes sociais:</p>
<div className="logos-shared">
@@ -77,7 +80,7 @@ export default function ModalLearningObjectPublished (props) {
href={"https://www.facebook.com/sharer/sharer.php?u=https://plataformaintegrada.mec.gov.br/recurso/" + props.draftID}
rel="noreferrer"
target="_blank">
- <ShareButton>
+ <ShareButton contrast={props.contrast}>
<img src={Facebook} alt="facebook-logo"/>
</ShareButton>
</a>
@@ -86,12 +89,12 @@ export default function ModalLearningObjectPublished (props) {
href={"https://www.twitter.com/intent/tweet?url=https://plataformaintegrada.mec.gov.br/recurso/" + props.draftID}
rel="noreferrer"
target="_blank">
- <ShareButton>
+ <ShareButton contrast={props.contrast}>
<img src={Twitter} alt="twitter-logo"/>
</ShareButton>
</a>
- <ShareButton >
+ <ShareButton contrast={props.contrast}>
<img src={LinkIcon} alt="link-icon"/>
</ShareButton>
</div>
@@ -123,18 +126,18 @@ const ShareButton = styled(Button)`
p {
margin : 0 0 10px;
}
+
+ border: ${props => props.contrast === "" ? "" : "1px solid yellow"} !important;
`
const ShareContainer = styled.div`
padding-top : 20px;
- background-color : #f1f1f1;
width : 100%;
height : 215px;
font-size : 18px;
line-height : 30px;
text-align : center;
max-width : 600px;
- color : #666;
border-radius : 4px;
.logos-shared {
@@ -145,16 +148,18 @@ const ShareContainer = styled.div`
flex-direction : row;
justify-content : center;
}
+
+ background-color: ${props => props.contrast === "" ? "#f1f1f1" : "black"};
+ border-top: ${props => props.contrast === "" ? "" : "1px solid white"};
`
const Content = styled.div`
padding : 20px 30px;
overflow : visible;
max-width : 600px;
- color : #666;
.backgroundImg {
- background-image : url(https://plataformaintegrada.mec.gov.br/img/Publicar.png);
+ background-image : url(${Publicar});
width : 145px;
height : 125px;
background-repeat : no-repeat;
@@ -180,7 +185,6 @@ const Header = styled.div`
h2 {
font-size : 26px;
font-weight : lighter;
- color : #666
}
`
@@ -200,7 +204,6 @@ const StyledModal = styled(Modal)`
const Container = styled.div`
box-sizing : border-box;
box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
- background-color : #fff;
align : center;
display : flex;
flex-direction : column;
@@ -221,4 +224,8 @@ const Container = styled.div`
p {
margin : 0 0 10px;
}
+
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ background-color: ${props => props.contrast === "" ? "white" : "black"};
+ border: ${props => props.contrast === "" ? "" : "1px solid white"};
`
diff --git a/src/Components/Notifications.js b/src/Components/Notifications.js
index d6973d15..3765b779 100644
--- a/src/Components/Notifications.js
+++ b/src/Components/Notifications.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, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
import NotificationsIcon from '@material-ui/icons/Notifications';
import { Button } from '@material-ui/core';
import Badge from '@material-ui/core/Badge';
@@ -28,6 +28,7 @@ import { withStyles } from '@material-ui/core/styles';
import { Link } from 'react-router-dom'
import { getRecipientHref } from './Activities/getRecipientHref.js'
import SnackBar from '../Components/SnackbarComponent'
+import { Store } from '../Store';
const StyledBadge = styled(Badge)`
.MuiBadge-dot-45{
@@ -58,23 +59,24 @@ const StyledMenu = withStyles({
border: '1px solid #d3d4d5',
},
})((props) => (
- <Menu
- elevation={0}
- getContentAnchorEl={null}
- anchorOrigin={{
- horizontal: 'center',
- vertical: "bottom",
- }}
- transformOrigin={{
- vertical: 'top',
- horizontal: 'center',
- }}
- {...props}
- />
+ <Menu
+ elevation={0}
+ getContentAnchorEl={null}
+ anchorOrigin={{
+ horizontal: 'center',
+ vertical: "bottom",
+ }}
+ transformOrigin={{
+ vertical: 'top',
+ horizontal: 'center',
+ }}
+ {...props}
+ />
));
export default function Notification(props) {
const [anchorEl, setAnchorEl] = React.useState(null);
+ const { state } = useContext(Store);
const [notifications, setNotifications] = useState([]);
const [snack, setSnack] = useState({
open: false,
@@ -115,7 +117,6 @@ export default function Notification(props) {
function handleClick(event) {
- console.log('event.currentTarget: ', event.currentTarget)
setAnchorEl(event.currentTarget);
}
@@ -185,10 +186,19 @@ export default function Notification(props) {
color={snack.color}
text={snack.text}
/>
- <StyledNotificationButton onClick={handleClick}>
- <StyledBadge badgeContent={1} color="secondary" variant="dot" overlap="circle" className="badge">
- <StyledNotificationsIcon />
- </StyledBadge>
+ <StyledNotificationButton title="Notificações" onClick={handleClick}>
+ {
+ notifications.some((notification) => (notification.recipient !== null) && (notification.viewed === false) && (notification.recipient_type !== "NilClass")) ?
+ (
+ <StyledBadge badgeContent={1} color="secondary" variant="dot" overlap="circle" className="badge">
+ <StyledNotificationsIcon className={` ${state.contrast}LinkColor`} />
+ </StyledBadge>
+ )
+ :
+ (
+ <StyledNotificationsIcon className={` ${state.contrast}LinkColor`} />
+ )
+ }
</StyledNotificationButton>
<StyledMenu
id="simple-menu"
@@ -196,17 +206,23 @@ export default function Notification(props) {
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
+ contrast={state.contrast}
+ MenuListProps={{
+ disablePadding: true
+ }}
>
- <ContainerDiv>
+ <ContainerDiv contrast={state.contrast}>
<div className="cabecalho">
- <span style={{ fontSize: "15px" }}>NOTIFICAÇÕES •</span>
+ <span style={{ fontSize: "15px" }}>NOTIFICAÇÕES</span>
<span className="cabecalho-marcar" onClick={handleClickNotification}>Marcar todas como lidas</span>
</div>
{
notifications.map((notification) =>
(notification.recipient !== null) &&
(notification.viewed === false) &&
+ (notification.recipient_type !== "NilClass") &&
<ActivityListItem
+ contrast={state.contrast}
onMenuBar={true}
avatar={notification.owner.avatar ? apiDomain + notification.owner.avatar : null}
activity={notification.activity}
@@ -222,7 +238,7 @@ export default function Notification(props) {
}
<div style={{ padding: "0 15px", borderTop: "1px solid #dadada" }}>
<Link to="/perfil">
- <NoPadButton>
+ <NoPadButton contrast={state.contrast}>
MOSTRAR TODAS
</NoPadButton>
</Link>
@@ -234,33 +250,32 @@ export default function Notification(props) {
}
-const NoPadButton = styled(Button)`
+const NoPadButton = styled.div`
padding : 6px 0 !important;
+ color: ${props => props.contrast === '' ? "#71409E" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === '' ? "none" : "yellow underline"} !important;
`
const ContainerDiv = styled.div`
- margin-top : 10px;
right : 5%;
width : 360px;
max-height : 400px;
- box-shadow : 8px 8px 8px 8px
rgba(0,0,0,.1);
- overflow-y : scroll;
+ overflow-y : auto;
padding : 5px 5px 5px 5px;
min-width : 160px;
- background-color : #f1f1f1;
+ background-color: ${props => props.contrast === '' ? "white" : "black"};
.cabecalho {
border-bottom : 1px solid #dadada;
padding : 10px 15px;
+ color: ${props => props.contrast === '' ? "#666" : "yellow"};
.cabecalho-marcar {
- font-family: Lato,bold;
- font-size: 12px;
- -webkit-text-decoration-line: underline;
- text-decoration-line: underline;
+ font-size: 15px;
float: right;
- cursor: pointer;s
+ cursor: pointer;
+ color: ${props => props.contrast === '' ? "#71409E" : "yellow"} !important;
}
}
`
diff --git a/src/Components/PageProfessorComponents/ModalConfirmarProfessor.js b/src/Components/PageProfessorComponents/ModalConfirmarProfessor.js
index f8bceee1..87d1a05b 100644
--- a/src/Components/PageProfessorComponents/ModalConfirmarProfessor.js
+++ b/src/Components/PageProfessorComponents/ModalConfirmarProfessor.js
@@ -17,12 +17,12 @@ 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';
import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop';
import Fade from '@material-ui/core/Fade';
import styled from 'styled-components'
-import CloseIcon from '@material-ui/icons/Close';
+import CloseModalButton from '../CloseModalButton';
+import { ButtonCancelar, ButtonEnviar } from '../ReportUserForm';
const StyledModal = styled(Modal)`
display : flex;
@@ -50,13 +50,11 @@ export default function ModalConfirmarProfessor (props){
>
<Fade in={props.open} style={{ transitionDelay :"0.4ms"}}>
<>
- <ConfirmarProfessorComponent>
+ <ConfirmarProfessorComponent contrast={props.contrast}>
<HeaderDiv>
<span style={{width:"32px"}}/>
<h2>Confirme os Dados</h2>
- <Button style={{marginRight:"-8px", color:"000"}} onClick={props.handleClose}>
- <CloseIcon style={{color:"#666", cursor:"pointer", verticalAlign:"middle"}}/>
- </Button>
+ <CloseModalButton contrast={props.contrast} handleClose={props.handleClose}/>
</HeaderDiv>
<DialogContentDiv>
@@ -66,8 +64,8 @@ export default function ModalConfirmarProfessor (props){
<p><strong>Telefone da Escola:</strong> {props.info.school_phone}</p>
<p><strong>Seu CPF:</strong> {props.info.teacher_cpf}</p>
<ButtonsDiv>
- <ConfirmButton onClick ={props.confirmar}>CONFIRMAR</ConfirmButton>
- <CancelButton onClick = {props.cancelar}>CANCELAR</CancelButton>
+ <ButtonEnviar contrast={props.contrast} onClick={props.confirmar}>CONFIRMAR</ButtonEnviar>
+ <ButtonCancelar contrast={props.contrast} onClick={props.cancelar}>CANCELAR</ButtonCancelar>
</ButtonsDiv>
</ContainerCentralized>
</DialogContentDiv>
@@ -78,7 +76,7 @@ export default function ModalConfirmarProfessor (props){
)
}
-
+/*
const CancelButton = styled(Button)`
width : 140px !important;
color :#666 !important;
@@ -109,7 +107,7 @@ const ConfirmButton = styled(Button)`
margin : 6px 8px !important;
display : inline-block !important;
`
-
+*/
const ButtonsDiv = styled.div`
margin-top : 10px;
display : flex;
@@ -148,6 +146,7 @@ const HeaderDiv = styled.div`
const ConfirmarProfessorComponent = styled.div`
min-width : 600px;
border-radius : 4px;
- background-color : #fff;
- color : #666;
+ background-color: ${props => props.contrast === "" ? "white" : "black"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ border: ${props => props.contrast === "" ? "" : "1px solid white"};
`
diff --git a/src/Components/PageProfessorComponents/PartOne.js b/src/Components/PageProfessorComponents/PartOne.js
index 02189c34..3c3a48d7 100644
--- a/src/Components/PageProfessorComponents/PartOne.js
+++ b/src/Components/PageProfessorComponents/PartOne.js
@@ -1,18 +1,35 @@
-import React, {useState, useEffect} from 'react'
+import React, { useState, useEffect } from 'react'
import styled from 'styled-components'
import Stepper from '../Stepper.js'
import FormControl from '@material-ui/core/FormControl';
import MenuItem from '@material-ui/core/MenuItem';
-import Select from '@material-ui/core/Select';
-import InputLabel from '@material-ui/core/InputLabel';
-import {Button} from '@material-ui/core'
-import {RightSideStrikedH3, LeftSideStrikedH3} from '../LoginContainerFunction.js'
-import Divider from '@material-ui/core/Divider';
-import {ButtonCancelar} from './PartTwo.js'
+import { Button } from '@material-ui/core'
+import { RightSideStrikedH3, LeftSideStrikedH3 } from '../LoginContainerFunction.js'
+import { ButtonCancelar } from './PartTwo.js'
import axios from 'axios'
import FormInput from '../FormInput.js'
+import TextField from '@material-ui/core/TextField';
+import { makeStyles } from "@material-ui/styles";
+
+
+const useStyles = makeStyles(theme => ({
+ darkTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "white",
+ width: "100%"
+ },
+ lightTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "black",
+ width: "100%"
+ }
+}));
-export function sortDict (dict) {
+export function sortDict(dict) {
const newDict = dict.sort((a, b) => (a.name) > (b.name) ? 1 : -1)
return newDict
@@ -27,13 +44,14 @@ const extractUFInfo = (ufs, name) => {
abbreviation = obj.abbreviation
}
}
- return {id : id, abbreviation : abbreviation}
+ return { id: id, abbreviation: abbreviation }
}
-export default function PartOne (props) {
+export default function PartOne(props) {
+ const classes = useStyles();
//stores initial get response (list of states, sorted alphabetically)
const [ufList, setStates] = useState([])
- const handleSetStates = (states) => {setStates(states)}
+ const handleSetStates = (states) => { setStates(states) }
//stores list of cities sorted alphabetically
const [municipioList, setMunicipioList] = useState([])
@@ -42,33 +60,34 @@ export default function PartOne (props) {
//stores a single user selected state
const [uf, setUF] = useState(
{
- algumFoiEscolhido : false,
- name : '',
- abbreviation : ''
+ algumFoiEscolhido: false,
+ name: '',
+ abbreviation: ''
}
)
//stores a single user selected city
const [municipio, setMunicipio] = useState(
{
- algumFoiEscolhido : false,
- name : ''
+ algumFoiEscolhido: false,
+ name: ''
}
)
const [codigoINEP, setCodigoINEP] = useState(
{
- codigoInvalido : false,
- value : ''
+ codigoInvalido: false,
+ value: ''
}
)
const handleCodigoINEP = (event) => {
const code = event.target.value
- setCodigoINEP({...codigoINEP,
- codigoInvalido : false,
- value : code
+ setCodigoINEP({
+ ...codigoINEP,
+ codigoInvalido: false,
+ value: code
})
}
@@ -76,12 +95,13 @@ export default function PartOne (props) {
const code = codigoINEP.value
axios.get(('https://www.simcaq.c3sl.ufpr.br/api/v1/portal_mec_inep?filter=school_cod:' + code)
- ).then( (response) => {
+ ).then((response) => {
handleSubmit()
}, (error) => {
- setCodigoINEP({...codigoINEP,
- codigoInvalido : true,
- value : ''
+ setCodigoINEP({
+ ...codigoINEP,
+ codigoInvalido: true,
+ value: ''
})
}
)
@@ -92,123 +112,133 @@ export default function PartOne (props) {
}
//on render component, call simcaq api and update ufList
- useEffect ( () => {
+ useEffect(() => {
axios.get(('https://simcaq.c3sl.ufpr.br/api/v1/state')
- ).then( (response) => {
- console.log(sortDict(response.data.result))
+ ).then((response) => {
handleSetStates(sortDict(response.data.result))
},
- (error) => console.log('erro acessando api do simcaq (estados)'))
+ (error) => console.log('erro acessando api do simcaq (estados)'))
}, [])
const handleChooseUF = (event) => {
const ufName = event.target.value
- const {id, abbreviation} = extractUFInfo(ufList, ufName)
- console.log(id, abbreviation)
-
- setUF({...uf,
- algumFoiEscolhido : true,
- name : ufName,
- abbreviation : abbreviation
- }
+ const { id, abbreviation } = extractUFInfo(ufList, ufName)
+
+ setUF({
+ ...uf,
+ algumFoiEscolhido: true,
+ name: ufName,
+ abbreviation: abbreviation
+ }
)
axios.get(('https://simcaq.c3sl.ufpr.br/api/v1/city?filter=state:' + id)
- ).then( (response) => {
+ ).then((response) => {
handleSetMunicipioList(sortDict(response.data.result))
- }, (error) => console.log('erro acessando api do simcaq (cidades)')
+ }, (error) => console.log('erro acessando api do simcaq (cidades)')
)
}
const handleChooseCity = (event) => {
const cityName = event.target.value
- console.log(cityName)
- setMunicipio({...municipio,
- algumFoiEscolhido : true,
- name : cityName
- }
+ setMunicipio({
+ ...municipio,
+ algumFoiEscolhido: true,
+ name: cityName
+ }
)
}
return (
<>
- {/*/////////////////////////////PRIMEIRA PARTE/////////////////////////////*/}
- <Content>
- <h4>Vamos localizar o seu cadastro:</h4>
- <Stepper items={props.stepper}/>
- <form style={{textAlign:"start"}}>
- <p>Localize pelo menos uma escola em que você tenha atuado até maio de 2017:</p>
- <FormControl required style={{width:"100%"}}>
- <InputLabel>Procure sua UF</InputLabel>
- <Select
- labelId="demo-simple-select-label"
- id="demo-simple-select"
- value={uf.name}
- onChange={handleChooseUF}
- >
- {
- ufList.map( (ufs)=>
- <MenuItem key={ufs.name} value={ufs.name}>{ufs.name}</MenuItem>
- )
- }
- </Select>
- </FormControl>
- <FormControl required style={{width:"100%"}}>
- <InputLabel>Busque o seu municÃpio</InputLabel>
- <Select
- labelId="demo-simple-select-label"
- id="demo-simple-select"
- value={municipio.name}
- onChange={handleChooseCity}
- >
- {
- municipioList.map( (cidades)=>
- <MenuItem key={cidades.name} value={cidades.name}>{cidades.name}</MenuItem>
- )
- }
- </Select>
- </FormControl>
- <div style={{display:"flex", justifyContent:"center",paddingTop:"10px", paddingBottom:"10px"}}>
- <ButtonConfirmar
- onClick={ ( (uf.algumFoiEscolhido && municipio.algumFoiEscolhido) ? handleSubmit : '')}
- >
- BUSCAR</ButtonConfirmar>
- </div>
- </form>
+ {/*/////////////////////////////PRIMEIRA PARTE/////////////////////////////*/}
+ <Content>
+ <h4>Vamos localizar o seu cadastro:</h4>
+ <Stepper contrast={props.contrast} activeStep={props.activeStep}/>
+ <form style={{ textAlign: "start" }}>
+ <p>Localize pelo menos uma escola em que você tenha atuado até maio de 2017:</p>
+ <FormControl required style={{ width: "100%", marginTop: '1em' }}>
+ <h5> Procure sua UF </h5>
+ <StyledTextField
+ helperText={<span style={props.contrast === "" ? {} : { color: "white" }}>Clique aqui para selecionar sua UF</span>}
+ contrast={props.contrast}
+ select
+ fullWidth
+ value={uf.name}
+ onChange={handleChooseUF}
+ variant="outlined"
+ InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
+ >
+ {
+ ufList.map((ufs) =>
+ <MenuItem style={props.contrast === "" ? {} : { backgroundColor: "black", color: "yellow", textDecoration: "underline" }} key={ufs.name} value={ufs.name}>{ufs.name}</MenuItem>
+ )
+ }
+ </StyledTextField>
+ </FormControl>
+ <FormControl required style={{ width: "100%", marginTop: '1em' }}>
+ <h5> Busque o seu municÃpio </h5>
+ <StyledTextField
+ helperText={<span style={props.contrast === "" ? {} : { color: "white" }}>Clique aqui para selecionar seu municÃpio</span>}
+ contrast={props.contrast}
+ select
+ fullWidth
+ value={municipio.name}
+ onChange={handleChooseCity}
+ variant="outlined"
+ InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
+ >
+ {
+ municipioList.map((cidades) =>
+ <MenuItem style={props.contrast === "" ? {} : { backgroundColor: "black", color: "yellow", textDecoration: "underline" }} key={cidades.name} value={cidades.name}>{cidades.name}</MenuItem>
+ )
+ }
+ </StyledTextField>
+ </FormControl>
+ <div style={{ display: "flex", justifyContent: "center", paddingTop: "10px", paddingBottom: "10px" }}>
+ <ButtonConfirmar
+ contrast={props.contrast}
+ onClick={((uf.algumFoiEscolhido && municipio.algumFoiEscolhido) ? handleSubmit : '')}
+ >
+ BUSCAR</ButtonConfirmar>
+ </div>
+ </form>
</Content>
- <div style={{display:"flex", justifyContent:"center", alignItems:"center"}}>
- <LeftSideStrikedH3/><StrikeSpan>ou</StrikeSpan><RightSideStrikedH3/>
+ <div style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
+ <LeftSideStrikedH3 contrast={props.contrast} /><StrikeSpan>ou</StrikeSpan><RightSideStrikedH3 contrast={props.contrast} />
</div>
{/*/////////////////////////////SEGUNDA PARTE/////////////////////////////*/}
<Content>
<form>
<p>Localize pelo código INEP da escola:</p>
- <FormControl required style={{width:"100%"}}>
- <FormInput
- inputType={'text'}
- name={'Código INEP'}
- value={codigoINEP.value}
- handleChange = {handleCodigoINEP}
- placeholder={'Código INEP'}
- required={true}
- error={codigoINEP.codigoInvalido}
- help={codigoINEP.codigoInvalido ? <span style={{color:'red'}}>código INEP inválido</span> : ''}
- >
- </FormInput>
+ <FormControl required style={{ width: "100%" }}>
+ <FormInput
+ contrast={props.contrast}
+ inputType={'text'}
+ name={'Código INEP'}
+ value={codigoINEP.value}
+ handleChange={handleCodigoINEP}
+ placeholder={'Código INEP'}
+ required={true}
+ error={codigoINEP.codigoInvalido}
+ help={codigoINEP.codigoInvalido ? <span style={{ color: 'red' }}>código INEP inválido</span> : ''}
+ >
+ </FormInput>
</FormControl>
- <div style={{display:"flex", justifyContent:"center",paddingTop:"10px", paddingBottom:"10px"}}>
+ <div style={{ display: "flex", justifyContent: "center", paddingTop: "10px", paddingBottom: "10px" }}>
<ButtonConfirmar
- onClick={validateINEP}
+ contrast={props.contrast}
+ onClick={validateINEP}
>
- BUSCAR</ButtonConfirmar>
+ BUSCAR</ButtonConfirmar>
</div>
</form>
</Content>
- <Divider/>
+ <hr style={props.contrast === "" ? { color: "#666" } : { color: "white" }} />
<ButtonsArea>
- <ButtonCancelar onClick={props.handleCancelar}>CANCELAR VERIFICAÇÃO</ButtonCancelar>
+ <ButtonCancelar contrast={props.contrast} onClick={props.handleCancelar}>CANCELAR VERIFICAÇÃO</ButtonCancelar>
</ButtonsArea>
</>
)
@@ -319,34 +349,19 @@ export const Content = styled.div`
}
`
export const ButtonConfirmar = styled(Button)`
- background-color : #00bcd4 !important;
- color : #fff !important;
+ :hover{
+ background: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
+ background: ${props => props.contrast === "" ? "#00bcd4 !important" : "black !important"};
+ border: ${props => props.contrast === "" ? "0 !important" : "1px solid white !important"};
+ color: ${props => props.contrast === "" ? "#fff !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
font-family : 'Roboto',sans-serif !important;
- font-size : 14px !important;
- font-weight : bolder !important;
- padding-left : 16px !important;
- padding-right : 16px !important;
outline : none !important;
margin : 6px 8px !important;
white-space : nowrap !important;
text-transform : uppercase !important;
font-weight : bold !important;
- font-size : 14px !important;
- font-style : inherit !important;
- font-variant : inherit !important;
- font-family : inherit !important;
- text-decoration : none !important;
- overflow : hidden !important;
- display : inline-block !important;
- position : relative !important;
cursor : pointer !important;
- min-height : 36px !important;
- min-width : 88px !important;
- line-height : 36px !important;
- vertical-align : middle !important;
- align-items : center !important;
text-align : center !important;
- border-radius : 3px !important;
- box-sizing : border-box !important;
- border : 0 !important;
`
diff --git a/src/Components/PageProfessorComponents/PartThree.js b/src/Components/PageProfessorComponents/PartThree.js
index 4dc30604..a65b424b 100644
--- a/src/Components/PageProfessorComponents/PartThree.js
+++ b/src/Components/PageProfessorComponents/PartThree.js
@@ -1,36 +1,38 @@
-import React, {useState} from 'react'
-import {Content} from './PartOne.js'
-import {ButtonCancelar, ButtonGrey} from './PartTwo.js'
+import React, { useState } from 'react'
+import { Content } from './PartOne.js'
+import { ButtonCancelar, ButtonGrey } from './PartTwo.js'
import FormControl from '@material-ui/core/FormControl';
import Stepper from '../Stepper.js'
import FormInput from '../FormInput.js'
import styled from 'styled-components'
-import {Button} from '@material-ui/core'
+import { Button } from '@material-ui/core'
-export default function PartThree (props) {
+export default function PartThree(props) {
const [phoneNumber, setPhoneNumber] = useState(
{
- flagInvalid : false,
- number : ''
+ flagInvalid: false,
+ number: ''
}
)
const handleChangePhoneNumber = (event) => {
- const input = event.target.value.replace(/\D/,'')
- setPhoneNumber({...phoneNumber,
- flagInvalid : (input.length < 10 ? true : false),
- number : (input.length > 10 ? phoneNumber.number : input),
+ const input = event.target.value;
+ setPhoneNumber({
+ ...phoneNumber,
+ flagInvalid: (input.length < 10 ? true : false),
+ number: (input.length > 10 ? phoneNumber.number : input),
})
}
- const [cpf, setCpf] = useState( {
- flagInvalid : false,
- number : ''
+ const [cpf, setCpf] = useState({
+ flagInvalid: false,
+ number: ''
})
const handleChangeCpf = (event) => {
- const input = event.target.value.replace(/\D/,'')
- setCpf({...cpf,
- flagInvalid : (input.length < 11 ? true : false),
- number : (input.length > 11 ? cpf.number : input),
+ const input = event.target.value;
+ setCpf({
+ ...cpf,
+ flagInvalid: (input.length < 11 ? true : false),
+ number: (input.length > 11 ? cpf.number : input),
})
}
@@ -43,65 +45,69 @@ export default function PartThree (props) {
return (
<>
- {console.log(props)}
- <Content>
- <h4>Vamos localizar o seu cadastro:</h4>
- <Stepper items={props.stepper}/>
- <form style={{textAlign:"start"}}>
- <FormControl required style={{width:"100%"}}>
- <p>Inserir o telefone da escola:</p>
- <FormInput
- inputType={'text'}
- pattern="[0-9]"
- name={'DDD e Número'}
- placeholder={'Exemplo: 4112345678'}
- value={phoneNumber.number}
- handleChange={handleChangePhoneNumber}
- error={phoneNumber.flagInvalid}
- >
- </FormInput>
- </FormControl>
- <FormControl required style={{width:"100%"}}>
- <p>Inserir o seu CPF</p>
- <FormInput
- inputType={'text'}
- name={'11 dÃgitos'}
- placeholder={'11 dÃgitos'}
- value={cpf.number}
- handleChange={handleChangeCpf}
- mask={'999.999.999-99'}
- error={cpf.flagInvalid}
- >
- </FormInput>
- </FormControl>
- <div style={{display:"flex", justifyContent:"space-evenly",paddingTop:"10px", paddingBottom:"10px"}}>
- <div style={{display:"flex", justifyContent:"center"}}>
- <ButtonConfirmar onClick={( (cpf.flagInvalid || phoneNumber.flagInvalid) ? () => {console.log('cpf.flagInvalid: ', cpf.flagInvalid, 'phoneNumber.flagInvalid: ', phoneNumber.flagInvalid)} : handleSubmit)}>BUSCAR</ButtonConfirmar>
+ <Content>
+ <h4>Vamos localizar o seu cadastro:</h4>
+ <Stepper contrast={props.contrast} activeStep={props.activeStep}/>
+ <form style={{ textAlign: "start" }}>
+ <FormControl required style={{ width: "100%" }}>
+ <p>Inserir o telefone da escola:</p>
+ <FormInput
+ contrast={props.contrast}
+ variant='outlined'
+ inputType={'text'}
+ pattern="[0-9]"
+ name={'DDD e Número'}
+ placeholder={'Exemplo: 4112345678'}
+ value={phoneNumber.number}
+ handleChange={handleChangePhoneNumber}
+ error={phoneNumber.flagInvalid}
+ >
+ </FormInput>
+ </FormControl>
+ <FormControl required style={{ width: "100%" }}>
+ <p>Inserir o seu CPF</p>
+ <FormInput
+ contrast={props.contrast}
+ variant='outlined'
+ inputType={'text'}
+ name={'11 dÃgitos'}
+ placeholder={'11 dÃgitos'}
+ value={cpf.number}
+ handleChange={handleChangeCpf}
+ mask={'999.999.999-99'}
+ error={cpf.flagInvalid}
+ >
+ </FormInput>
+ </FormControl>
+ <div style={{ display: "flex", justifyContent: "space-evenly", paddingTop: "10px", paddingBottom: "10px" }}>
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ <ButtonConfirmar contrast={props.contrast} onClick={((cpf.flagInvalid || phoneNumber.flagInvalid) ? () => { console.log('cpf.flagInvalid: ', cpf.flagInvalid, 'phoneNumber.flagInvalid: ', phoneNumber.flagInvalid) } : handleSubmit)}>BUSCAR</ButtonConfirmar>
+ </div>
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ <ButtonGrey contrast={props.contrast} onClick={() => props.goBack(false, true, false)}>VOLTAR</ButtonGrey>
+ <ButtonCancelar contrast={props.contrast} onClick={props.handleCancelar}>CANCELAR</ButtonCancelar>
+ </div>
</div>
- <div style={{display:"flex", justifyContent:"center"}}>
- <ButtonGrey onClick={() => props.goBack(false, true, false)}>VOLTAR</ButtonGrey>
- <ButtonCancelar onClick={props.handleCancelar}>CANCELAR</ButtonCancelar>
- </div>
- </div>
- </form>
+ </form>
</Content>
</>
)
}
const ButtonConfirmar = styled(Button)`
- background-color : #00bcd4 !important;
- color : #fff !important;
- box-shadow : none !important;
+ :hover{
+ background: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
+ background: ${props => props.contrast === "" ? "#00bcd4 !important" : "black !important"};
+ border: ${props => props.contrast === "" ? "0 !important" : "1px solid white !important"};
+ color: ${props => props.contrast === "" ? "#fff !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
font-family : 'Roboto',sans-serif !important;
- font-size : 14px !important;
+ outline : none !important;
+ margin : 6px 8px !important;
+ white-space : nowrap !important;
+ text-transform : uppercase !important;
font-weight : bold !important;
- height : 36px !important;
- border-radius : 3px !important;
- padding-left : 16px !important;
- padding-right : 16px !important;
- vertical-align : middle !important;
+ cursor : pointer !important;
text-align : center !important;
- align-items : center !important;
-
`
diff --git a/src/Components/PageProfessorComponents/PartTwo.js b/src/Components/PageProfessorComponents/PartTwo.js
index a4e68d4a..a2b325cf 100644
--- a/src/Components/PageProfessorComponents/PartTwo.js
+++ b/src/Components/PageProfessorComponents/PartTwo.js
@@ -1,37 +1,40 @@
-import React, {useState, useEffect} from 'react'
-import {Content, ButtonsArea} from './PartOne.js'
-import Divider from '@material-ui/core/Divider';
+import React, { useState, useEffect } from 'react'
+import { Content, ButtonsArea } from './PartOne.js'
import Stepper from '../Stepper.js'
import CustomizedTables from '../Table.js'
import styled from 'styled-components'
-import {Button} from '@material-ui/core'
+import { Button } from '@material-ui/core'
import axios from 'axios'
-import {simcaqAPIurl} from '../../env'
-import {sortDict} from './PartOne.js'
+import { simcaqAPIurl } from '../../env'
+import { sortDict } from './PartOne.js'
-export default function PartTwo (props) {
+export default function PartTwo(props) {
const [schoolList, setSchoolList] = useState([])
+ const [state, setState] = useState('');
+ const [city, setCity] = useState('');
- useEffect ( () => {
+ useEffect(() => {
const code = (props.info.inep_code || '')
const uf = (props.info.school_uf.abbreviation || '')
const municipio = (props.info.school_city || '')
- //console.log(code, uf, municipio)
+
+ setState(uf);
+ setCity(municipio);
- //if user searched by inep code
if (code !== '') {
axios.get((`${simcaqAPIurl}/portal_mec_inep?filter=school_cod:` + code)
- ).then ((response) => {
- setSchoolList(sortDict(response.data.result))
- }, (error) => console.log('erro ao dar get na escola por inep code')
- )}
+ ).then((response) => {
+ setSchoolList(sortDict(response.data.result))
+ }, (error) => console.log('erro ao dar get na escola por inep code')
+ )
+ }
else if (uf !== '' && municipio !== '') {
axios.get((`${simcaqAPIurl}/school?search=state_name:"` + uf + '",city_name:"' + municipio + '"&filter=year:2017')
- ).then((response)=> {
- //console.log(response.data.result)
- setSchoolList(sortDict(response.data.result))
- }, (error) => console.log('erro ao dar get na escola por uf e municipio', code, uf, municipio)
- )}
+ ).then((response) => {
+ setSchoolList(sortDict(response.data.result))
+ }, (error) => console.log('erro ao dar get na escola por uf e municipio', code, uf, municipio)
+ )
+ }
}, [])
const onClickTable = (city_name, id, name, state_name) => {
@@ -40,58 +43,54 @@ export default function PartTwo (props) {
return (
<>
- {console.log(props)}
<Content>
<h4>Vamos localizar o seu cadastro:</h4>
- <Stepper items={props.stepper}/>
+ <Stepper contrast={props.contrast} activeStep={props.activeStep}/>
</Content>
<Content>
<InputContainer>
- <p>Selecione a sua escola:</p>
+ <p>Selecione a sua escola da UF: {state} e do municÃpio: {city}:</p>
- <CustomizedTables
- columns={['Codigo INEP', 'Escola', 'UF', 'Cidade']}
- rows={schoolList} onClickTable={onClickTable}
- />
+ <CustomizedTables
+ contrast={props.contrast}
+ columns={['Codigo INEP', 'Escola', 'UF', 'Cidade']}
+ rows={schoolList} onClickTable={onClickTable}
+ />
</InputContainer>
</Content>
- <Divider/>
+ <hr style={props.contrast === "" ? { color: '#666' } : { color: "white" }} />
<ButtonsArea>
- <ButtonGrey onClick={() => props.goBack(true, false, false)}>VOLTAR</ButtonGrey>
- <ButtonCancelar onClick={props.handleCancelar}>CANCELAR VERIFICAÇÃO</ButtonCancelar>
+ <ButtonGrey contrast={props.contrast} onClick={() => props.goBack(true, false, false)}>VOLTAR</ButtonGrey>
+ <ButtonCancelar contrast={props.contrast} onClick={props.handleCancelar}>CANCELAR VERIFICAÇÃO</ButtonCancelar>
</ButtonsArea>
</>
)
}
export const ButtonCancelar = styled(Button)`
- color: #666 !important;
+ :hover{
+ background: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
+ background: ${props => props.contrast === "" ? "" : "black !important"};
+ border: ${props => props.contrast === "" ? "0 !important" : "1px solid white !important"};
+ color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
font-family: 'Roboto',sans-serif !important;
- font-size: 14px !important;
font-weight: bold !important;
- height: 36px !important;
border-radius: 3px !important;
- padding-left: 16px !important;
- padding-right: 16px !important;
`
export const ButtonGrey = styled(Button)`
- background-color : #fff !important;
- border : 1.5px #666 solid !important;
- color : #666 !important;
- box-shadow : none !important;
+ :hover{
+ background: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
+ background: ${props => props.contrast === "" ? "#fff !important" : "black !important"};
+ border: ${props => props.contrast === "" ? "1.5px #666 solid !important" : "1px solid white !important"};
+ color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
font-family : 'Roboto',sans-serif !important;
- font-size : 14px !important;
- font-weight : bold !important;
- height : 36px !important;
- border-radius : 3px !important;
- padding-left : 16px !important;
- padding-right : 16px !important;
- vertical-align : middle !important;
text-align : center !important;
- align-items : center !important;
-
`
const InputContainer = styled.div`
diff --git a/src/Components/PageProfessorComponents/SuccessfulRequest.js b/src/Components/PageProfessorComponents/SuccessfulRequest.js
index ffd481b4..8d243f76 100644
--- a/src/Components/PageProfessorComponents/SuccessfulRequest.js
+++ b/src/Components/PageProfessorComponents/SuccessfulRequest.js
@@ -1,29 +1,29 @@
import React from 'react'
import styled from 'styled-components'
-import {ButtonConfirmar} from './PartOne.js'
+import { ButtonConfirmar } from './PartOne.js'
//Image Import
import { Comentarios } from "ImportImages.js";
-export default function SuccessfulRequest (props) {
+export default function SuccessfulRequest(props) {
const h4Text = 'Obrigado por fazer parte dessa rede!'
const pText = 'Em breve você poderá publicar os seus próprios reursos educacionais digitais. O MEC analisará as suas informações junto a escola e você será avisada(o) aqui na plataforma e em seu email: '
const redirect = () => {
props.history.push('/')
}
-
+
return (
- <div style={{maxWidth:"575px", padding : "0 36px"}}>
- <div style={{display : "flex", flexDirection : "column"}}>
+ <div style={{ maxWidth: "575px", padding: "0 36px" }}>
+ <div style={{ display: "flex", flexDirection: "column" }}>
<StyledH4>{h4Text}</StyledH4>
<TextDiv>
<p>{pText} <b>{props.email}</b>.</p>
</TextDiv>
- <div style={{display : 'flex', flexDirection : 'row', justifyContent : "center"}}>
- <ButtonConfirmar onClick={redirect}>VOLTAR À PAGINA INICIAL</ButtonConfirmar>
+ <div style={{ display: 'flex', flexDirection: 'row', justifyContent: "center" }}>
+ <ButtonConfirmar contrast={props.contrast} onClick={redirect}>VOLTAR À PAGINA INICIAL</ButtonConfirmar>
</div>
- <ImageDiv/>
+ <ImageDiv />
</div>
</div>
)
diff --git a/src/Components/PasswordRecoveryComponents/Default.js b/src/Components/PasswordRecoveryComponents/Default.js
index e7a45389..a11262fa 100644
--- a/src/Components/PasswordRecoveryComponents/Default.js
+++ b/src/Components/PasswordRecoveryComponents/Default.js
@@ -1,25 +1,34 @@
import React from 'react'
-import {CompletarCadastroButton} from '../TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js'
+import { CompletarCadastroButton } from '../TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js'
import FormInput from "../FormInput.js"
+import styled from 'styled-components'
-export default function Default (props) {
+export default function Default(props) {
return (
- <div style={{overflow:"hidden", display:"inline-block"}}>
- <h2 style={{fontSize:"32px", fontWeight:"200", marginBottom:"20px"}}>Vamos encontrar a sua conta</h2>
+ <div style={{ overflow: "hidden", display: "inline-block" }}>
+ <Title contrast={props.contrast}>Vamos encontrar a sua conta</Title>
<form onSubmit={(e) => { e.preventDefault(); props.onSubmit(e); }}>
<FormInput
+ contrast={props.contrast}
inputType={"text"}
name={"email"}
value={props.value}
placeholder={"E-mail"}
handleChange={e => props.handleChange(e)}
required={true}
- error = {props.error}
+ error={props.error}
/>
- <div style={{display:"flex", justifyContent:"center"}}>
- <CompletarCadastroButton type="submit" >BUSCAR</CompletarCadastroButton>
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ <CompletarCadastroButton contrast={props.contrast} type="submit" >BUSCAR</CompletarCadastroButton>
</div>
</form>
</div>
)
}
+
+const Title = styled.h2`
+ color: ${props => props.contrast === "" ? "" : "white"};
+ font-size: 32px;
+ font-weight: 200;
+ margin-bottom: 20px;
+`
diff --git a/src/Components/PasswordRecoveryComponents/Error.js b/src/Components/PasswordRecoveryComponents/Error.js
index 38ea3937..6223f3a4 100644
--- a/src/Components/PasswordRecoveryComponents/Error.js
+++ b/src/Components/PasswordRecoveryComponents/Error.js
@@ -1,27 +1,49 @@
import React from 'react'
-import {CompletarCadastroButton} from '../TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js'
+import { CompletarCadastroButton } from '../TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js'
import FormInput from "../FormInput.js"
+import styled from 'styled-components'
-export default function Error (props) {
+export default function Error(props) {
return (
- <div style={{overflow:"hidden", display:"inline-block"}}>
- <h2 style={{fontSize:"32px", fontWeight:"200", marginBottom:"20px"}}>Ops! Não encontramos essa conta</h2>
- <p>{props.value}</p>
- <p>Verifique se o e-mail foi digitado corretamente ou se você utilizou algum outro e-mail.</p>
+ <StyledDiv contrast={props.contrast}>
+ <h2 className="title">Ops! Não encontramos essa conta</h2>
+ <p className="paragraph">{props.value}</p>
+ <p className="paragraph">Verifique se o e-mail foi digitado corretamente ou se você utilizou algum outro e-mail.</p>
<form onSubmit={(e) => props.onSubmit(e)}>
<FormInput
+ contrast={props.contrast}
inputType={"text"}
name={"email"}
value={props.value}
placeholder={"E-mail"}
handleChange={e => props.handleChange(e)}
required={true}
- error = {props.error}
+ error={props.error}
/>
- <div style={{display:"flex", justifyContent:"center"}}>
- <CompletarCadastroButton type="submit" >BUSCAR</CompletarCadastroButton>
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ <CompletarCadastroButton contrast={props.contrast} type="submit" >BUSCAR</CompletarCadastroButton>
</div>
</form>
- </div>
+ </StyledDiv>
)
}
+
+
+const StyledDiv = styled.div`
+ overflow: hidden;
+ display: inline-block;
+ font-size: 14px;
+ text-align: start;
+
+ .paragraph{
+ color: ${props => props.contrast === "" ? "" : "white"};
+ }
+
+ .title{
+ color: ${props => props.contrast === "" ? "" : "white"};
+ font-size: 32px;
+ font-weight: 200;
+ margin-bottom: 20px;
+ line-height : 30px;
+ }
+`
diff --git a/src/Components/PasswordRecoveryComponents/Success.js b/src/Components/PasswordRecoveryComponents/Success.js
index 34feb617..1f4790bd 100644
--- a/src/Components/PasswordRecoveryComponents/Success.js
+++ b/src/Components/PasswordRecoveryComponents/Success.js
@@ -1,12 +1,41 @@
import React from 'react'
+import styled from 'styled-components'
-export default function Default (props) {
+export default function Default(props) {
return (
- <div style={{overflow:"hidden", display:"inline-block", fontSize:"14px", textAlign:"start"}}>
- <h2 style={{fontSize:"32px", fontWeight:"200", marginBottom:"20px"}}>Feito! Confira seu e-mail</h2>
- <p> Enviamos um link para <span style={{color:"#00bcd4"}}>{String(props.email)}</span> que permite alterar sua senha. </p>
- <p style={{marginBottom:"30px"}}> Caso não chegue em sua caixa de entrada, dê uma olhada em outras pastas, como lixo eletrônico ou spam. </p>
- <p> Não é o seu e-mail? <span style={{color:"#00bcd4", cursor:"pointer"}} onClick={() => {props.changeSwitch('default')}}> Tente Novamente.</span></p>
- </div>
+ <StyledDiv contrast={props.contrast}>
+ <h2 className="title">Feito! Confira seu e-mail</h2>
+ <p className="paragraph"> Enviamos um link para <span className="email">{String(props.email)}</span> que permite alterar sua senha. </p>
+ <p className="paragraph" style={{ marginBottom: "30px" }}> Caso não chegue em sua caixa de entrada, dê uma olhada em outras pastas, como lixo eletrônico ou spam. </p>
+ <p className="paragraph"> Não é o seu e-mail? <span className="link" onClick={() => { props.changeSwitch('default') }}> Tente Novamente.</span></p>
+ </StyledDiv>
)
}
+
+const StyledDiv = styled.div`
+ overflow: hidden;
+ display: inline-block;
+ font-size: 14px;
+ text-align: start;
+
+ .paragraph{
+ color: ${props => props.contrast === "" ? "" : "white"};
+ }
+
+ .title{
+ color: ${props => props.contrast === "" ? "" : "white"};
+ font-size: 32px;
+ font-weight: 200;
+ margin-bottom: 20px;
+ }
+
+ .email{
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ }
+
+ .link{
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${ props => props.contrast === "" ? "none" : "underline"};
+ cursor: pointer;
+ }
+`
diff --git a/src/Components/PublicationPermissionsContent.js b/src/Components/PublicationPermissionsContent.js
index 2f404e49..13894ecf 100644
--- a/src/Components/PublicationPermissionsContent.js
+++ b/src/Components/PublicationPermissionsContent.js
@@ -1,6 +1,5 @@
-import React, {useState, useEffect} from 'react';
+import React, { useState } from 'react';
import Typography from '@material-ui/core/Typography';
-import CardContent from '@material-ui/core/CardContent';
import styled from 'styled-components'
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
@@ -8,7 +7,7 @@ import Radio from '@material-ui/core/Radio';
import FormControl from '@material-ui/core/FormControl';
import Grid from '@material-ui/core/Grid';
import { withStyles } from '@material-ui/core/styles';
-import {getRequest} from './HelperFunctions/getAxiosConfig'
+import { yellow } from "@material-ui/core/colors";
const StyledFormControl = styled(FormControl)`
display: "block ruby";
@@ -16,109 +15,72 @@ const StyledFormControl = styled(FormControl)`
`
const BlueRadio = withStyles({
- root: {
- color: '#666',
- '&$checked': {
- color: '#00bcd4',
+ root: {
+ color: '#666',
+ '&$checked': {
+ color: '#00bcd4',
+ },
},
- },
- checked: {},
+ checked: {},
})((props) => <Radio color="default" {...props} />);
-export default function PublicationPermissionsContent (props) {
-
- const [questionsArr, setQuestionsArr] = useState([])
- const handleSetQuestionsArr = (newArr) => {setQuestionsArr(newArr)}
-
- function handleSuccess (data) {
- handleSetQuestionsArr(data)
- }
-
- useEffect(() => {
- const url = `/questions/`
+const ContrastRadio = withStyles({
+ root: {
+ color: yellow[400],
+ '&$checked': {
+ color: yellow[600],
+ },
+ },
+ checked: {},
+})((props) => <Radio color="default" {...props} />);
- getRequest(url, handleSuccess, (error) => {console.log(error)})
+export default function PublicationPermissionsContent(props) {
- }, [])
+ const [questionsArr] = useState(props.questionsArr);
return (
- <CardContent style={{textAlign: "start", marginBottom: "10px", lineHeight:"21px", color:"rgb(102, 102, 102)", padding:"65px"}}>
- <Typography variant="h4" style={{textAlign:"center", color:"rgb(102, 102, 102)", fontSize:"26px"}}> É necessário que você declare a permissão de publicação do seu Recurso:</Typography>
- <div classname="texto-termos">
- <div classname="title">
- <Typography variant = "h3" style={{textAlign:"center", fontSize:"30px", marginTop:"20px", marginBottom:"10px", color:"rgb(102, 102, 102)"}}>
- PERMISSÃO DE PUBLICAÇÃO
- </Typography>
- </div>
- <p>Ao prosseguir você concede a permissão de publicação do seu recurso ao nosso portal e se compromete a não infringir as polÃticas de conteúdos, estando então,
+ <div style={props.contrast === "" ? { textAlign: "start", lineHeight: "21px", color: "rgb(102, 102, 102)", padding: "65px" } : { textAlign: "start", lineHeight: "21px", color: "white", padding: "65px", backgroundColor: "black" }}>
+ <Typography variant="h4" style={props.contrast === "" ? { textAlign: "center", color: "rgb(102, 102, 102)", fontSize: "26px" } : { textAlign: "center", color: "white", fontSize: "26px" }}> É necessário que você declare a permissão de publicação do seu Recurso:</Typography>
+ <div classname="texto-termos">
+ <div classname="title">
+ <Typography variant="h3" style={props.contrast === "" ? { textAlign: "center", fontSize: "30px", marginTop: "20px", marginBottom: "10px", color: "rgb(102, 102, 102)" } : { textAlign: "center", fontSize: "30px", marginTop: "20px", marginBottom: "10px", color: "white" }}>
+ PERMISSÃO DE PUBLICAÇÃO
+ </Typography>
+ </div>
+ <p>Ao prosseguir você concede a permissão de publicação do seu recurso ao nosso portal e se compromete a não infringir as polÃticas de conteúdos, estando então,
a partir desse momento passÃvel de responsabilização pelo conteúdo a ser integrado a nossa rede. Para tanto atente-se as pontuações abaixo e verifique se o seu
recurso está de acordo, antecipadamente, com as nossas condições. É recomendável a leitura das polÃticas de conteúdo estabelecidas
- (<a href="/termos" style={{color:"initial"}}><strong>PolÃticas de Conteúdo</strong></a>)
- </p>
- <Typography variant="h5" style={{fontWeight:"300", color:"rgb(102, 102, 102)", fontSize:"22px"}}>
+ (<a href="/termos" style={props.contrast === "" ? { color: "initial" } : { color: "yellow", textDecoration: "underline" }}><strong>PolÃticas de Conteúdo</strong></a>)
+ </p>
+ <Typography variant="h5" style={props.contrast === "" ? { fontWeight: "300", color: "rgb(102, 102, 102)", fontSize: "22px" } : { fontWeight: "300", color: "white", fontSize: "22px" }}>
Para que o recurso seja publicado na plataforma é preciso que ele esteja de acordo com as diretrizes abaixo, a presença de quaisquer dos itens a seguir
inviabiliza a publicação do recurso em nossa rede.
- </Typography>
- <p><strong>No seu recurso está presente algum destes itens abaixo?</strong></p>
+ </Typography>
+ <p><strong>No seu recurso está presente algum destes itens abaixo?</strong></p>
- <StyledFormControl component="fieldset" style={{display:"BlockRuby"}} margin='dense' fullWidth={true}>
- <Grid container>
+ <StyledFormControl component="fieldset" style={{ display: "BlockRuby" }} margin='dense' fullWidth={true}>
+ <Grid container>
{
questionsArr.map((question, index) =>
- (question.status === 'active' && question.id !== 4) &&
- <React.Fragment key={question.id}>
- <Grid item xs={10}>
- <p>{question.description}</p>
- </Grid>
- <Grid item xs={2}>
- <RadioGroup row name={"radio" + (question.id)} onChange={props.handleRadios}>
- <FormControlLabel value="Sim" control={<BlueRadio/>} label="Sim"/> <FormControlLabel value="Não" control={<BlueRadio/>} label="Não"/>
- </RadioGroup>
- </Grid>
- </React.Fragment>
+ (question.status === 'active' && question.id !== 4) &&
+ <React.Fragment key={question.id}>
+ <Grid item xs={10}>
+ <p>{question.description}</p>
+ </Grid>
+ <Grid item xs={2}>
+ <RadioGroup row name={(question.id)} onChange={props.handleRadios}>
+ <FormControlLabel value="Sim" control={props.contrast === "" ? <BlueRadio /> : <ContrastRadio />} label={<span style={props.contrast === "" ? {} : { color: "yellow", textDecoration: "underline" }}>Sim</span>} /> <FormControlLabel value="Não" control={props.contrast === "" ? <BlueRadio /> : <ContrastRadio />} label={<span style={props.contrast === "" ? {} : { color: "yellow", textDecoration: "underline" }}>Não</span>} />
+ </RadioGroup>
+ </Grid>
+ </React.Fragment>
- )
+ )
}
</Grid>
- </StyledFormControl>
- </div>
- </CardContent>
+ </StyledFormControl>
+ </div>
+ </div>
)
}
-
-// {/*
-// <Grid item xs={10}>
-// <p>
-// O recurso apresenta conteúdo de cunho polÃtico-partidário? (Ex: o conteúdo expressa qualquer forma de manifestação que se caracterize como propaganda polÃtica)?
-// </p>
-// </Grid>
-// <Grid item xs={2}>
-// <RadioGroup row name="radio1" onChange={props.handleRadios}>
-// <FormControlLabel value="Sim" control={<BlueRadio/>} label="Sim"/> <FormControlLabel value="Não" control={<BlueRadio/>} label="Não"/>
-// </RadioGroup>
-// </Grid>
-
-// <Grid item xs={10}>
-// <p>
-// O recurso apresenta conteúdo ofensivo? (Ex: material pornográfico e/ou que invada a privacidade de terceiros, viole os Direitos Humanos ou seja ilegal, ofensivo, e que incite a violência)?
-// </p>
-// </Grid>
-// <Grid item xs={2}>
-// <RadioGroup row name="radio2" onChange={props.handleRadios}>
-// <FormControlLabel value="Sim" control={<BlueRadio/>} label="Sim"/> <FormControlLabel value="Não" control={<BlueRadio/>} label="Não"/>
-// </RadioGroup>
-// </Grid>
-// <Grid item xs={10}>
-// <p>
-// O recurso apresenta algum tipo de propaganda ou marca? (Ex: o conteúdo tem cunho comercial)?
-// </p>
-// </Grid>
-// <Grid item xs={2}>
-// <RadioGroup row name="radio3" onChange={props.handleRadios}>
-// <FormControlLabel value="Sim" control={<BlueRadio/>} label="Sim"/> <FormControlLabel value="Não" control={<BlueRadio/>} label="Não"/>
-// </RadioGroup>
-// </Grid>
-// </Grid>
-// */}
diff --git a/src/Components/PurpleButton.js b/src/Components/PurpleButton.js
deleted file mode 100644
index 1b57b823..00000000
--- a/src/Components/PurpleButton.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
-Departamento de Informatica - Universidade Federal do Parana
-
-This file is part of Plataforma Integrada MEC.
-
-Plataforma Integrada MEC is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-Plataforma Integrada MEC is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-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';
-import styled from 'styled-components'
-
-export default function PurpleButton (props) {
- return (
- <StyledButton onClick={props.callback}>
- {props.text}
- </StyledButton>
- )
-}
-
-const StyledButton = styled(Button)`
- max-height : 36px !important;
- background-color : #673ab7 !important;
- color : #fff !important;
- text-decoration : none !important;
- outline : none !important;
- text-align : center !important;
-
- .button-text {
- cursor : pointer;
- line-height : 36px;
- text-align : center;
- color : currentColor;
- white-space : nowrap;
- text-transform : uppercase;
- font-weight : 600 !important;
- font-size : 14px;
- font-style : inherit;
- font-variant : inherit;
- padding : 6px 16px !important;
- }
-`
diff --git a/src/Components/RedirectModal.js b/src/Components/RedirectModal.js
index f826b54e..525e65fa 100644
--- a/src/Components/RedirectModal.js
+++ b/src/Components/RedirectModal.js
@@ -27,7 +27,7 @@ import CloseIcon from '@material-ui/icons/Close';
function CloseModalButton (props) {
return (
<StyledCloseModalButton onClick={props.handleClose}>
- <CloseIcon/>
+ <CloseIcon style={props.contrast === "" ? { color: "#666" } : { color: "white" }} />
</StyledCloseModalButton>
)
}
@@ -62,8 +62,8 @@ export default function RedirectModal (props) {
}}
>
<Fade in={props.open}>
- <Container>
- <CloseModalButton handleClose={props.handleClose}/>
+ <Container contrast={props.contrast}>
+ <CloseModalButton contrast={props.contrast} handleClose={props.handleClose}/>
<Header>
<span style={{width:"32px"}}/>
<h2>Você será redirecionado para outro site</h2>
@@ -74,8 +74,14 @@ export default function RedirectModal (props) {
Lembre-se de que você pode reportar caso considere o conteúdo abusivo/ofensivo ou caso a página não corresponda a descrição apresentada.
</div>
<section style={{display : "flex", flexDirection : "row", justifyContent : "center"}}>
- <ButtonGrey onClick={props.handleClose}>CANCELAR</ButtonGrey>
- <a href={props.link} target="_blank" rel="noreferrer noopener" style={{textDecoration : "none !important"}}><ButtonOrange>CONTINUAR</ButtonOrange></a>
+ <ButtonGrey contrast={props.contrast} onClick={props.handleClose}>
+ CANCELAR
+ </ButtonGrey>
+ <a href={props.link} target="_blank" rel="noreferrer noopener" style={{textDecoration : "none !important"}}>
+ <ButtonOrange contrast={props.contrast}>
+ CONTINUAR
+ </ButtonOrange>
+ </a>
</section>
</Content>
</Container>
@@ -85,10 +91,11 @@ export default function RedirectModal (props) {
}
const ButtonOrange = styled(Button)`
+ color: ${props => props.contrast === "" ? "white" : "yellow"} !important;
+ background-color: ${props => props.contrast === "" ? "#ff7f00" : "black"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"} !important;
box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
- background-color : #ff7f00 !important;
- color : #fff !important;
- text-decoration : none !important;
text-transform : uppercase !important;
outline : none !important;
text-align : center !important;
@@ -100,14 +107,15 @@ const ButtonOrange = styled(Button)`
const ButtonGrey = styled(Button)`
+ color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
+ background-color: inherit !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
+
&:hover {
- background-color : rgba(158,158,158,0.2) !important;
+ background-color : ${props => props.contrast === "" ? "rgba(158,158,158,0.2)" : ""} !important;
}
margin-top : 5px !important;
margin-right : 15px !important;
- background-color : transparent !important;
- color : #666 !important;
- text-decoration : none !important;
outline : none !important;
text-align : center !important;
font-size : 14px !important;
@@ -116,7 +124,6 @@ const ButtonGrey = styled(Button)`
`
const Content = styled.div`
- color : #666;
padding : 20px 30px;
overflow : visible;
text-align : center;
@@ -130,7 +137,6 @@ const Header = styled.div`
h2 {
font-size : 26px;
font-weight : lighter;
- color : #666
padding : 10px 20px 0 20px;
}
@@ -150,8 +156,10 @@ const StyledModal = styled(Modal)`
`
const Container = styled.div`
box-sizing : border-box;
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ color: ${props => props.contrast === "" ? "#666" : "white"} !important;
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"} !important;
box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px gba(0,0,0,.12);
- background-color : white;
align : center;
display : flex;
flex-direction : column;
diff --git a/src/Components/ReportButton.js b/src/Components/ReportButton.js
index 654780a7..d9f02978 100644
--- a/src/Components/ReportButton.js
+++ b/src/Components/ReportButton.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, useContext} from 'react'
+import React, { useState, useContext } from 'react'
import styled from 'styled-components'
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
@@ -24,10 +24,10 @@ import ReportIcon from '@material-ui/icons/Error';
import Button from '@material-ui/core/Button';
import MoreVertIcon from '@material-ui/icons/MoreVert';
import ReportModal from './ReportModal.js'
-import {Store} from '../Store.js'
+import { Store } from '../Store.js'
-export default function ReportButton (props) {
- const {state} = useContext(Store)
+export default function ReportButton(props) {
+ const { state } = useContext(Store)
/*Menu control variables-----------------------------*/
const [anchorEl, setAnchorEl] = React.useState(null);
@@ -57,33 +57,36 @@ export default function ReportButton (props) {
return (
<>
- {
- reportModal &&
- <ReportModal open={reportModal} handleClose={() => handleModal()}
+ {
+ reportModal &&
+ <ReportModal contrast={state.contrast} open={reportModal} handleClose={() => handleModal()}
form="user" complainableId={props.complainableId}
complainableType={props.complainableType}
- {...props}/>
- }
- {/*
+ {...props} />
+ }
+ {/*
loginModal &&
<LoginModal open={loginModal} handleClose={() => {toggleLoginModal(false)}}/>
*/}
- <Button onClick={handleClick}>
- <MoreVertIcon style={{color : "#666"}}/>
- </Button>
- <StyledMenu
- id="simple-menu"
- anchorEl={anchorEl}
- keepMounted
- open={Boolean(anchorEl)}
- onClose={handleClose}
- style={{borderRadius : "0"}}
- >
- <MenuItem onClick={() => {handleModal()}} style={{color : "#666"}}>
- <ReportIcon/>
- <span style={{paddingLeft : "3px"}}>Reportar</span>
- </MenuItem>
- </StyledMenu>
+ <Button onClick={handleClick}>
+ <MoreVertIcon style={state.contrast === "" ? { color: "#666" } : { color: "yellow" }} />
+ </Button>
+ <StyledMenu
+ id="simple-menu"
+ anchorEl={anchorEl}
+ keepMounted
+ open={Boolean(anchorEl)}
+ onClose={handleClose}
+ style={{ borderRadius: "0" }}
+ MenuListProps={{
+ disablePadding: true
+ }}
+ >
+ <MenuItem onClick={() => { handleModal() }} style={state.contrast === "" ? { color: "#666", backgroundColor: "white" } : { color: "white", backgroundColor: "black" }}>
+ <ReportIcon />
+ <span style={state.contrast === "" ? { paddingLeft: "3px" } : { paddingLeft: "3px", color: "yellow", textDecoration: "underline" }}>Reportar</span>
+ </MenuItem>
+ </StyledMenu>
</>
)
}
diff --git a/src/Components/ReportColecaoForm.js b/src/Components/ReportColecaoForm.js
index 37c4a773..56141563 100644
--- a/src/Components/ReportColecaoForm.js
+++ b/src/Components/ReportColecaoForm.js
@@ -21,23 +21,24 @@ import styled from 'styled-components'
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
-import TextField from '@material-ui/core/TextField';
-import {StyledFormControl, ButtonsDiv, ButtonCancelar} from './ReportUserForm.js'
+import {StyledFormControl, ButtonsDiv, ButtonCancelar, StyledTextField, useStyles} from './ReportUserForm.js'
import { withStyles } from '@material-ui/core/styles';
const StyledRadio = withStyles({
- root: {
- color: '#666',
- '&$checked': {
- color: '#673ab7',
+ root: {
+ color: '#666',
+ '&$checked': {
+ color: '#673ab7',
+ },
},
- },
- checked: {},
+ checked: {},
})((props) => <Radio color="default" {...props} />);
export default function ReportColecaoForm (props) {
const [value, setValue] = React.useState(-1);
+ const classes = useStyles();
+
const handleChange = (event) => {
setValue(event.target.value);
};
@@ -73,14 +74,11 @@ export default function ReportColecaoForm (props) {
if( finalRadioValue !== -1 && !(finalMoreInfo.key)) {
props.handleSubmit(finalRadioValue, finalMoreInfo.value)
}
- else {
- console.log('oops')
- }
}
return (
<form onSubmit={(e) => handleSubmit(e)} style={{textAlign : "left"}}>
- <StyledFormControl component="fieldset">
+ <StyledFormControl contrast={props.contrast} component="fieldset">
<RadioGroup value={value} onChange={handleChange}>
{
options.map(option =>
@@ -91,6 +89,7 @@ export default function ReportColecaoForm (props) {
</StyledFormControl>
<StyledTextField
+ contrast={props.contrast}
id = {"report-text-field"}
label={"Escreva mais sobre o problema"}
value = {moreInfo.value}
@@ -99,38 +98,24 @@ export default function ReportColecaoForm (props) {
multiline={true}
rowsMax = {"5"}
error = {moreInfo.key}
+ InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
required = {false}
style={{width : "100%"}}
/>
<ButtonsDiv>
- <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar>
- <ButtonEnviar type="submit">ENVIAR</ButtonEnviar>
+ <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar>
+ <ButtonEnviar contrast={props.contrast} type="submit">ENVIAR</ButtonEnviar>
</ButtonsDiv>
</form>
)
}
-const StyledTextField = styled(TextField)`
- .MuiFormHelperText-root {
- text-align : left;
- }
-
- label.Mui-focused {
- color : #673ab7;
- }
-
- label.Mui-focused.Mui-error {
- color : red;
- }
-
- .MuiInput-underline::after {
- border-bottom: 2px solid #673ab7;
- }
-`
const ButtonEnviar = styled(Button)`
- background-color : #673ab7 !important;
- color : #fff !important;
+ color: ${props => props.contrast === "" ? "white" : "yellow"} !important;
+ background-color: ${props => props.contrast === "" ? "#673ab7" : "black"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"} !important;
font-size: 14px !important;
font-weight: 500 !important;
height: 36px !important;
@@ -142,7 +127,6 @@ const ButtonEnviar = styled(Button)`
min-width : 88px !important;
vertical-align : middle !important;
margin : 6px 8px !important;
- text-decoration : none !important;
.MuiButton-label {
padding-right : 16px;
diff --git a/src/Components/ReportModal.js b/src/Components/ReportModal.js
index 5e0d84fd..d9cdd16d 100644
--- a/src/Components/ReportModal.js
+++ b/src/Components/ReportModal.js
@@ -33,7 +33,7 @@ import Snackbar from './SnackbarComponent.js'
function CloseModalButton (props) {
return (
<StyledCloseModalButton onClick={props.handleClose}>
- <CloseIcon/>
+ <CloseIcon style={props.contrast === "" ? { color: "#666" } : { color: "white" }}/>
</StyledCloseModalButton>
)
}
@@ -55,7 +55,6 @@ export default function ReportModal (props) {
}
postRequest(url, payload, (data) => {
- console.log(data)
props.handleClose();
handleSnackbar(true);
}, (error) => {console.log(error)})
@@ -66,15 +65,15 @@ export default function ReportModal (props) {
switch (formType) {
case 'colecao':
return (
- <ReportColecaoForm handleClose={props.handleClose} handleSubmit={handleSubmit}/>
+ <ReportColecaoForm contrast={props.contrast} handleClose={props.handleClose} handleSubmit={handleSubmit}/>
)
case 'recurso':
- return (
- <ReportRecursoForm handleClose={props.handleClose} handleSubmit={handleSubmit}/>
+ return (
+ <ReportRecursoForm contrast={props.contrast} handleClose={props.handleClose} handleSubmit={handleSubmit}/>
)
default:
return (
- <ReportUserForm handleClose={props.handleClose} handleSubmit={handleSubmit}/>
+ <ReportUserForm contrast={props.contrast} handleClose={props.handleClose} handleSubmit={handleSubmit}/>
)
}
}
@@ -96,11 +95,11 @@ export default function ReportModal (props) {
}}
>
<Fade in={props.open}>
- <ReportContainer>
+ <ReportContainer className={`${props.contrast}BackColor ${props.contrast}Text ${props.contrast}Border`}>
<Header>
<span style={{width:"32px"}}/>
<h2>O que está acontecendo?</h2>
- <CloseModalButton handleClose={props.handleClose}/>
+ <CloseModalButton contrast={props.contrast} handleClose={props.handleClose}/>
</Header>
<Content>
@@ -119,10 +118,10 @@ export default function ReportModal (props) {
const Content = styled.div`
padding : 20px 30px;
overflow : visible;
- max-width : 470px;
`
const Header = styled.div`
+ text-align : center;
display : flex;
flex-direction : row;
padding : 10px 26px 0 26px;
@@ -133,7 +132,6 @@ const Header = styled.div`
h2 {
font-size : 26px;
font-weight : lighter;
- color : #666
}
`
@@ -154,7 +152,6 @@ const StyledModal = styled(Modal)`
display : flex;
align-items: center;
justify-content : center;
- text-align : center;
padding : 10px !important;
max-width : none;
max-height : none;
@@ -162,7 +159,6 @@ const StyledModal = styled(Modal)`
const ReportContainer = styled.div`
box-sizing : border-box;
- background-color : white;
max-width : none;
align : center;
display : flex;
@@ -175,6 +171,5 @@ const ReportContainer = styled.div`
@media screen and (max-width : 899px) {
width : 100%;
- height : 100%;
}
`
diff --git a/src/Components/ReportRecursoForm.js b/src/Components/ReportRecursoForm.js
index a1c73127..34de4547 100644
--- a/src/Components/ReportRecursoForm.js
+++ b/src/Components/ReportRecursoForm.js
@@ -16,10 +16,12 @@ 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';
+import styled from 'styled-components'
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
-import {StyledFormControl, StyledTextField, ButtonsDiv, ButtonCancelar, ButtonEnviar} from './ReportUserForm.js'
+import {StyledFormControl, StyledTextField, ButtonsDiv, ButtonCancelar, useStyles} from './ReportUserForm.js'
import { withStyles } from '@material-ui/core/styles';
const StyledRadio = withStyles({
@@ -35,6 +37,8 @@ const StyledRadio = withStyles({
export default function ReportRecursoForm (props) {
const [value, setValue] = React.useState(-1);
+ const classes = useStyles();
+
const handleChange = (event) => {
setValue(event.target.value);
};
@@ -70,14 +74,11 @@ export default function ReportRecursoForm (props) {
if( finalRadioValue !== -1 && !(finalMoreInfo.key)) {
props.handleSubmit(finalRadioValue, finalMoreInfo.value)
}
- else {
- console.log('oops')
- }
}
return (
<form onSubmit={(e) => handleSubmit(e)} style={{textAlign : "left"}}>
- <StyledFormControl component="fieldset">
+ <StyledFormControl contrast={props.contrast} component="fieldset">
<RadioGroup value={value} onChange={handleChange}>
{
options.map(option =>
@@ -88,6 +89,7 @@ export default function ReportRecursoForm (props) {
</StyledFormControl>
<StyledTextField
+ contrast={props.contrast}
id = {"report-text-field"}
label={"Escreva mais sobre o problema"}
value = {moreInfo.value}
@@ -96,14 +98,38 @@ export default function ReportRecursoForm (props) {
multiline={true}
rowsMax = {"5"}
error = {moreInfo.key}
+ InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
required = {false}
style={{width : "100%"}}
/>
<ButtonsDiv>
- <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar>
- <ButtonEnviar type="submit">ENVIAR</ButtonEnviar>
+ <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar>
+ <ButtonEnviar contrast={props.contrast} type="submit">ENVIAR</ButtonEnviar>
</ButtonsDiv>
</form>
)
}
+
+export const ButtonEnviar = styled(Button)`
+ color: ${props => props.contrast === "" ? "white !important" : "yellow !important"};
+ background-color: ${props => props.contrast === "" ? "#f07e05 !important" : "black !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
+ border: ${props => props.contrast === "" ? "none !important" : "1px solid white !important"};
+ font-size: 14px !important;
+ font-weight: 500 !important;
+ height: 36px !important;
+ border-radius: 3px !important;
+ padding-left: 16px !important;
+ padding-right: 16px !important;
+ box-shadow: 0 2px 5px 0 rgba(0,0,0,.26) !important;
+ outline : none !important;
+ min-width : 88px !important;
+ vertical-align : middle !important;
+ margin : 6px 8px !important;
+
+ .MuiButton-label {
+ padding-right : 16px;
+ padding-left : 16px;
+ }
+`
\ No newline at end of file
diff --git a/src/Components/ReportUserForm.js b/src/Components/ReportUserForm.js
index bbb8b534..e4fce332 100644
--- a/src/Components/ReportUserForm.js
+++ b/src/Components/ReportUserForm.js
@@ -23,20 +23,37 @@ import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormControl from '@material-ui/core/FormControl';
import TextField from '@material-ui/core/TextField';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles, makeStyles } from '@material-ui/core/styles';
const StyledRadio = withStyles({
- root: {
- '&$checked': {
- color: '#ff7f00 !important',
+ root: {
+ '&$checked': {
+ color: '#ff7f00 !important',
+ },
},
- },
- checked: {},
-})((props) => <Radio color="default" {...props} />);
+ checked: {},
+})((props) => <Radio {...props} />);
+
+export const useStyles = makeStyles(theme => ({
+ darkTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ color: "white",
+ width: "100%"
+ },
+ lightTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ color: "black",
+ width: "100%"
+ }
+}));
export default function ReportForm (props) {
const [value, setValue] = useState(-1);
+ const classes = useStyles();
+
const handleChange = (event) => {
setValue(event.target.value);
};
@@ -78,17 +95,18 @@ export default function ReportForm (props) {
return (
<form onSubmit={(e) => {formSubmit(e)}}>
- <StyledFormControl component="fieldset">
+ <StyledFormControl contrast={props.contrast} component="fieldset">
<RadioGroup value={value} onChange={handleChange}>
{
options.map(option =>
- <FormControlLabel value={option.value} control={<StyledRadio/>} label={option.text} />
+ <FormControlLabel value={option.value} control={<StyledRadio contrast={props.contrast}/>} label={option.text} />
)
}
</RadioGroup>
</StyledFormControl>
<StyledTextField
+ contrast={props.contrast}
id = {"Escreva mais sobre o problema"}
label={"Escreva mais sobre o problema"}
type = {"text"}
@@ -98,13 +116,14 @@ export default function ReportForm (props) {
multiline={true}
rowsMax = {"5"}
error = {moreInfo.key}
+ InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
required = {false}
style={{width:"100%"}}
/>
<ButtonsDiv>
- <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar>
- <ButtonEnviar type="submit">ENVIAR</ButtonEnviar>
+ <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar>
+ <ButtonEnviar contrast={props.contrast} type="submit">ENVIAR</ButtonEnviar>
</ButtonsDiv>
</form>
);
@@ -118,23 +137,23 @@ export const ButtonsDiv = styled.div`
`
export const ButtonCancelar = styled(Button)`
- &:hover {
- background-color : rgba(158,158,158,0.2) !important;
- }
+ color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
height : 36px !important;
padding-left : 16px !important;
padding-right : 16px !important;
font-weight : 500 !important;
border-radius : 3px !important;
- color :#666 !important;
background-color: transparent;
min-width : 88px !important;
height : 36px !important;
`
export const ButtonEnviar = styled(Button)`
- background-color : #ff7f00 !important;
- color : #fff !important;
+ color: ${props => props.contrast === "" ? "white" : "yellow"} !important;
+ background-color: ${props => props.contrast === "" ? "#00bcd4" : "black"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"} !important;
font-size: 14px !important;
font-weight: 500 !important;
height: 36px !important;
@@ -146,7 +165,6 @@ export const ButtonEnviar = styled(Button)`
min-width : 88px !important;
vertical-align : middle !important;
margin : 6px 8px !important;
- text-decoration : none !important;
.MuiButton-label {
padding-right : 16px;
@@ -205,7 +223,7 @@ export const StyledTextField = styled(TextField)`
}
label.Mui-focused {
- color : orange;
+ color: ${props => props.contrast === "" ? "#ff7f00" : "yellow"};
}
label.Mui-focused.Mui-error {
@@ -215,11 +233,16 @@ export const StyledTextField = styled(TextField)`
label.Mui-error {
color: ${props => props.contrast === "" ? "red" : "#e75480"};
}
+
`
export const StyledFormControl = styled(FormControl)`
.MuiFormControlLabel-root {
- color : #666;
+ color: ${props => props.contrast === "" ? "#666" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ }
+ .MuiIconButton-label {
+ color: ${props => props.contrast === "" ? "#666" : "white"};
}
.PrivateRadioButtonIcon-checked {
diff --git a/src/Components/ResourceCardFunction.js b/src/Components/ResourceCardFunction.js
index 8e343896..5cd567ed 100644
--- a/src/Components/ResourceCardFunction.js
+++ b/src/Components/ResourceCardFunction.js
@@ -16,8 +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, useContext, useEffect } from 'react';
-import { Store } from '../Store.js'
+import React, { useState, useEffect, useContext } from 'react';
+import { Store } from '../Store'
+import "./carousel.css";
import Card from '@material-ui/core/Card';
import { apiDomain } from '../env';
import ResourceCardOptions from './ResourceCardOptions'
@@ -43,7 +44,7 @@ import { noAvatar } from "ImportImages.js";
import { IcDefault } from "ImportImages.js";
export default function ResourceCardFunction(props) {
- const { state } = useContext(Store)
+ const { state } = useContext(Store);
const [thumbnail, setThumbnail] = useState(null)
// eslint-disable-next-line
const [label, setLabel] = useState(props.type)
@@ -63,7 +64,7 @@ export default function ResourceCardFunction(props) {
setThumbnail(`${apiDomain}` + props.thumbnail)
}
else {
- setThumbnail(getDefaultThumbnail(label))
+ setThumbnail(getDefaultThumbnail(label))
}
if (props.avatar) {
@@ -81,10 +82,14 @@ export default function ResourceCardFunction(props) {
}
const handleLike = () => {
- if (state.currentUser.id)
- putRequest(`/learning_objects/${props.id}/like/`, {}, handleSuccessLike, (error) => { console.log(error) })
- else
+ if (!state.currentUser.id) {
handleLogin()
+ }
+ else {
+ const url = `/learning_objects/${props.id}/like/`
+
+ putRequest(url, {}, handleSuccessLike, (error) => { console.log(error) })
+ }
}
const handleLogin = () => {
@@ -102,9 +107,9 @@ export default function ResourceCardFunction(props) {
handleSuccessfulLogin(false);
}
- const SlideAnimationContent = () => {
+ const SlideAnimationContent = (contrast) => {
return (
- <SlideContentDiv>
+ <SlideContentDiv style={contrast === '' ? { backgroundColor: "#ff9226" } : { backgroundColor: "inherit" }}>
<div style={{ padding: 7 }}>
<HeaderContainer container="row" justify="flex-start" alignItems="center" >{/*marginBottom:10px*/}
<AvatarDiv item xs={2}>
@@ -115,13 +120,13 @@ export default function ResourceCardFunction(props) {
<p>{props.author}</p>
</EnviadoPor>
</HeaderContainer>
- {
+ { //className={`${props.contrast}BackColor`} ---
props.tags ?
<TagContainer container direction="row">
{
props.tags.map((tag) =>
<Grid item key={tag.id}>
- <span >{tag.name}</span>
+ <span className={`${props.contrast}BackColor ${props.contrast}Text`}>{tag.name}</span>
</Grid>
)
}
@@ -135,9 +140,9 @@ export default function ResourceCardFunction(props) {
return (
<React.Fragment>
- <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}
+ <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}
/>
- <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
/>
<SnackBar
@@ -148,7 +153,7 @@ export default function ResourceCardFunction(props) {
text={"Você está conectado(a)!"}
/>
<StyledCard>
- <CardDiv>
+ <CardDiv className={`${props.contrast}Text ${props.contrast}Border`}>
<CardReaDiv>
<Link to={props.href}>
<Header onMouseEnter={controlSlide} onMouseLeave={controlSlide}>
@@ -157,25 +162,25 @@ export default function ResourceCardFunction(props) {
</div>
{
<div className={`slideContentLinkAfterActive${slideIn}`}>
- <div className="text" >
- {SlideAnimationContent()}
+ <div className={`${props.contrast}Text ${props.contrast}BackColor`} style={{ width: "100%" }}>
+ {SlideAnimationContent(props.contrast)}
</div>
</div>
}
</Header>
</Link>
- <Description>
- <Link to={props.href} className="text" style={{ height: '45px' }}> {/*add link to learningObject*/}
- <Title>
+ <Description className={`${props.contrast}BackColor`}>
+ <Link to={props.href} className={`${props.contrast}Text`} style={{ height: '45px', width: "100%" }}> {/*add link to learningObject*/}
+ <Title className={`${props.contrast}LinkColor`}>
{props.title}
</Title>
</Link>
<Rating
+ style={props.contrast === "" ? {} : { color: "white" }}
name="customized-empty"
value={props.rating}
readOnly
- style={{ color: "#666" }}
- emptyIcon={<StarBorderIcon fontSize="inherit" />}
+ emptyIcon={<StarBorderIcon className={`${props.contrast}Text`} fontSize="inherit" />}
/>
<Footer>
<Type>
@@ -185,24 +190,29 @@ export default function ResourceCardFunction(props) {
<LikeCounter>
<span>{likesCount}</span>
<ButtonNoWidth onClick={handleLike}>
- <FavoriteIcon style={{ color: liked ? "red" : "#666" }} />
+ <FavoriteIcon className={`${props.contrast}LinkColor`} style={props.contrast === "" ? { color: liked ? "red" : "#666" } : { color: liked ? "red" : "white" }} />
</ButtonNoWidth>
</LikeCounter>
</Footer>
</Description>
</CardReaDiv>
- <CardReaFooter>
- <div style={{ display: "flex", height: "100%" }}>
- <ButtonGuardarColecao thumb={props.thumbnail} title={props.title} learningObjectId={props.id}
- />
- </div>
- <ResourceCardOptions
- learningObjectId={props.id}
- downloadableLink={props.downloadableLink}
- thumb={props.thumbnail}
- title={props.title}
- handleLogin={handleLogin}
- />
+ <CardReaFooter className={`${props.contrast}BackColor`}>
+ <Grid container>
+ <Grid item xs={2}></Grid>
+ <Grid item xs={8} style={{ display: "flex", justifyContent: "center" }}>
+ <ButtonGuardarColecao contrast={props.contrast} thumb={props.thumbnail} title={props.title} learningObjectId={props.id} />
+ </Grid>
+ <Grid item xs={2} style={{ display: "flex", justifyContent: "flex-end" }}>
+ <ResourceCardOptions
+ contrast={props.contrast}
+ learningObjectId={props.id}
+ downloadableLink={props.downloadableLink}
+ thumb={props.thumbnail}
+ title={props.title}
+ handleLogin={handleLogin}
+ />
+ </Grid>
+ </Grid>
</CardReaFooter>
</CardDiv>
</StyledCard>
@@ -221,18 +231,16 @@ export const TagContainer = styled(Grid)`
${'' /* border : 2px solid red; */}
span {
word-wrap: break-word;
- background-color : #fff;
display : flex;
justify-content : center;
align-items : center;
height : 22px;
- tet-align : center;
+ text-align: center;
margin: 3px;
-webkit-box-direction: normal;
overflow : hidden;
padding : 1px 8px;
border-radius : 10px;
- color : #666;
font-size : 11px;
}
`
@@ -267,7 +275,6 @@ export const AvatarDiv = styled(Grid)`
`
const SlideContentDiv = styled.div`
- background-color : #ff9226;
${'' /* padding : 10px; */}
width : 272.5px;
height : 189px;
@@ -278,8 +285,6 @@ const CardReaFooter = styled.div`
height : 60px;
display : flex;
justify-content : space-between;
- border-top : 1px solid #e5e5e5;
- border-bottom : 1px solid #e5e5e5;
align-items : center;
padding : 0 15px 0 15px;
`
@@ -290,7 +295,6 @@ export const ButtonNoWidth = styled(Button)`
min-width : 24px !important;
max-height : 24px !important;
padding : 0 !important;
- background-color : #fff !important;
color : #a5a5a5 !important;
border : 0 !important;
@@ -313,7 +317,6 @@ export const LikeCounter = styled.div`
.btn-like {
padding : 0 !important;
- background-color : #fff !important;
border : 0 !important;
min-width : min-content;
}
@@ -332,7 +335,7 @@ const Type = styled.div`
height : 27px;
width : 27px;
padding-right : .4em;
- vertical-align : middle
+ vertical-align : middle;
align-self : center;
.st1 {
@@ -351,7 +354,6 @@ export const Footer = styled.div`
const Description = styled.div`
display : flex;
flex : 1;
- background-color : #fff;
flex-direction : column;
justify-content: space-between;
padding : 15px;
@@ -400,7 +402,6 @@ export const CardReaDiv = styled.div`
`
export const CardDiv = styled.div`
- background-color : #fff;
text-align : start;
font-family : 'Roboto', sans serif;
color : #666;
@@ -408,7 +409,7 @@ export const CardDiv = styled.div`
export const StyledCard = styled(Card)`
width : 272.5px;
- max-height : 380px;
+ min-height : 380px;
margin-top : 10px;
margin-bottom : 10px;
${'' /* max-width : 345px; */}
diff --git a/src/Components/ResourceCardOptions.js b/src/Components/ResourceCardOptions.js
index 4da8f13a..6c1b1e36 100644
--- a/src/Components/ResourceCardOptions.js
+++ b/src/Components/ResourceCardOptions.js
@@ -115,57 +115,61 @@ export default function ResourceCardOptions(props) {
<>
<React.Fragment>
- <ReportModal open={reportModal} handleClose={() => handleModalReportar(false)}
+ <ReportModal contrast={props.contrast} open={reportModal} handleClose={() => handleModalReportar(false)}
form="recurso" complainableId={props.learningObjectId}
complainableType={"LearningObject"}
{...props}
/>
- <GuardarModal open={saveToCol} handleClose={() => { toggleSave(false) }}
+ <GuardarModal contrast={props.contrast} open={saveToCol} handleClose={() => { toggleSave(false) }}
thumb={props.thumb} title={props.title} recursoId={props.learningObjectId}
/>
- <ShareModal open={shareOpen} handleClose={() => { toggleShare(false) }}
+ <ShareModal contrast={props.contrast} open={shareOpen} handleClose={() => { toggleShare(false) }}
thumb={props.thumb} title={props.title} link={getShareablePageLink()}
/>
<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} style={{ color: "#666" }}>
- <MoreVertIcon style={{ color: "#666" }} />
+ <ButtonNoWidth aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
+ <MoreVertIcon className={`${props.contrast}LinkColor ${props.contrast}Text`} />
</ButtonNoWidth>
<Menu
+ className={`${props.contrast}Text`}
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
- >
- <StyledMenuItem>
+ MenuListProps={{
+ disablePadding: true
+ }}
+ >
+ <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={handleClose}>
<Link to={"/recurso/" + props.learningObjectId}>
- <ListItemIcon><OpenIcon /></ListItemIcon>Abrir
+ <ListItemIcon className={`${props.contrast}IconColor`}><OpenIcon /></ListItemIcon>Abrir
</Link>
</StyledMenuItem>
- <StyledMenuItem onClick={() => window.open("/recurso/" + props.learningObjectId, "_blank")}>
- <ListItemIcon><OpenInBrowserIcon /></ListItemIcon> Abrir em nova guia
+ <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => window.open("/recurso/" + props.learningObjectId, "_blank")}>
+ <ListItemIcon className={`${props.contrast}IconColor`}><OpenInBrowserIcon /></ListItemIcon> Abrir em nova guia
</StyledMenuItem>
{
props.downloadableLink &&
- <StyledMenuItem onClick={() => { enableDownload(); handleClose() }}>
- <ListItemIcon><DownloadIcon /></ListItemIcon>Baixar
+ <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => { enableDownload(); handleClose() }}>
+ <ListItemIcon className={`${props.contrast}IconColor`}><DownloadIcon /></ListItemIcon>Baixar
</StyledMenuItem>
}
- <StyledMenuItem onClick={handleShare}>
- <ListItemIcon><ShareIcon /></ListItemIcon>Compartilhar
+ <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={handleShare}>
+ <ListItemIcon className={`${props.contrast}IconColor`}><ShareIcon /></ListItemIcon>Compartilhar
</StyledMenuItem>
- <StyledMenuItem onClick={handleGuardar}>
- <ListItemIcon><AddIcon /></ListItemIcon>Guardar
+ <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={handleGuardar}>
+ <ListItemIcon className={`${props.contrast}IconColor`}><AddIcon /></ListItemIcon>Guardar
</StyledMenuItem>
- <StyledMenuItem onClick={() => { handleReport() }}>
- <ListItemIcon><ReportIcon /></ListItemIcon>Reportar
+ <StyledMenuItem className={`${props.contrast}LinkColor ${props.contrast}Text`} contrast={props.contrast} onClick={() => { handleReport() }}>
+ <ListItemIcon className={`${props.contrast}IconColor`}><ReportIcon /></ListItemIcon>Reportar
</StyledMenuItem>
</Menu>
@@ -180,9 +184,6 @@ const ButtonNoWidth = styled(Button)`
min-width : 24px !important;
max-height : 24px !important;
padding : 0 !important;
- background-color : #fff !important;
- color : #a5a5a5 !important;
- border : 0 !important;
.MuiButton-root {
width : 24px !important;
@@ -200,12 +201,11 @@ const ButtonNoWidth = styled(Button)`
`
const StyledMenuItem = styled(MenuItem)`
- color : #666 !important;
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
.MuiSvgIcon-root {
vertical-align : middle !important;
}
a {
- text-decoration : none !important;
- color : #666 !important;
+ color: inherit !important;
}
`
diff --git a/src/Components/ResourceList.js b/src/Components/ResourceList.js
index 1cb58be3..ce720dc7 100644
--- a/src/Components/ResourceList.js
+++ b/src/Components/ResourceList.js
@@ -119,27 +119,27 @@ export default function ResourceList(props) {
<ResourceListContainer>
<Grid container direction="row" justify="space-around" alignItems="center">
<Grid item>
- <Title>
+ <Title contrast={props.contrast}>
{props.resources.length ?
props.resources.length + " recurso" + (props.resources.length === 1 ? "" : "s")
- : "Carregando coleção"}
+ : "Nenhum recurso encontrado"}
</Title>
</Grid>
<Grid item>
- <Button color="primary" onClick={() => setSelectable(!selectable)}>
- <PanelButtonText>
+ <Button onClick={() => setSelectable(!selectable)}>
+ <PanelButtonText contrast={props.contrast}>
{selectable ? "Desativar" : "Ativar"} seleção
</PanelButtonText>
</Button>
</Grid>
<Grid item>
<Button
- color="primary"
+ style={props.contrast === "" ? {color: "#3f51b5", border: "1px solid #3f51b5"} : {color: "white", border: "1px solid white"}}
variant="outlined"
startIcon={<GetAppIcon fontSize="large" />}
onClick={handleDownloadSelection}
>
- <PanelButtonText>baixar seleção</PanelButtonText>
+ <PanelButtonText contrast={props.contrast}>baixar seleção</PanelButtonText>
</Button>
</Grid>
</Grid>
@@ -148,6 +148,7 @@ export default function ResourceList(props) {
return (
<ResourceGrid item key={card.title}>
<ResourceCardFunction
+ contrast={props.contrast}
avatar={card.avatar}
id={card.id}
thumbnail={card.thumbnail}
@@ -164,8 +165,8 @@ export default function ResourceList(props) {
/>
{selectable ?
(<SelectButton
+ contrast={props.contrast}
variant="outline"
- color="primary"
startIcon={checkBoxIcon(selected[props.resources.indexOf(card)])}
onClick={() => updateSelected(props.resources.indexOf(card))}
>
@@ -196,15 +197,19 @@ const ResourceListContainer = styled.div`
margin-right: 20;
`
const Title = styled.p`
- color: rgb(102, 102, 102);
+ color: ${props => props.contrast === "" ? "#666 !important" : "white !important"};
font-size: 2em;
font-weigth: 300;
`
const SelectButton = styled(Button)`
width: 100%;
+ color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
`
const PanelButtonText = styled.span`
font-weight: 900;
+ color: ${props => props.contrast === "" ? "#3f51b5 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "yellow underline !important"};
`
const ResourceGrid = styled(Grid)`
padding-right: 7px;
diff --git a/src/Components/ResourcePageComponents/CommentForm.js b/src/Components/ResourcePageComponents/CommentForm.js
index 219198f4..dbfb2bc5 100644
--- a/src/Components/ResourcePageComponents/CommentForm.js
+++ b/src/Components/ResourcePageComponents/CommentForm.js
@@ -1,65 +1,86 @@
-import React, { useState } from 'react'
-import styled from 'styled-components'
-import Rating from '@material-ui/lab/Rating';
-import StarIcon from '@material-ui/icons/Star';
+import React, { useState } from "react";
+import styled from "styled-components";
+import Rating from "@material-ui/lab/Rating";
+import StarIcon from "@material-ui/icons/Star";
import TextField from "@material-ui/core/TextField";
-import { Button } from '@material-ui/core';
-import EditIcon from '@material-ui/icons/Edit';
-import Grid from '@material-ui/core/Grid';
-import { postRequest } from '../HelperFunctions/getAxiosConfig'
+import { Button } from "@material-ui/core";
+import EditIcon from "@material-ui/icons/Edit";
+import Grid from "@material-ui/core/Grid";
+import { postRequest } from "../HelperFunctions/getAxiosConfig";
+import { makeStyles } from "@material-ui/styles";
+
+const useStyles = makeStyles((theme) => ({
+ darkTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "white",
+ width: "100%",
+ },
+ lightTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "black",
+ width: "100%",
+ },
+}));
export default function CommentForm(props) {
+ const classes = useStyles();
+
const [rating, setRating] = useState({
error: true,
- value: 0
- })
+ value: 0,
+ });
const [comment, setComment] = useState({
error: false,
- value: ''
- })
+ value: "",
+ });
const handleChange = (e) => {
- const userInput = e.target.value
- const flag = (userInput.length === 0 ? true : false);
- setComment({ ...comment, error: flag, value: userInput })
- }
+ const userInput = e.target.value;
+ const flag = userInput.length === 0 ? true : false;
+ setComment({ ...comment, error: flag, value: userInput });
+ };
- const [attemptedSubmit, setAttempt] = useState(false)
+ const [attemptedSubmit, setAttempt] = useState(false);
function handleSuccess(data) {
- props.handleSnackbar(1)
- props.rerenderCallback()
+ props.handleSnackbar(1);
+ props.rerenderCallback();
}
const handleSubmit = (e) => {
- e.preventDefault()
- const finalRating = rating
- const finalComment = comment
+ e.preventDefault();
+ const finalRating = rating;
+ const finalComment = comment;
if (!(finalRating.error || finalComment.error)) {
- let type = props.recurso ? 'learning_objects' : 'collections'
- const url = `/${type}/${props.recursoId}/reviews`
+ let type = props.recurso ? "learning_objects" : "collections";
+ const url = `/${type}/${props.recursoId}/reviews`;
let payload = {
- "review": {
- "description": finalComment.value,
- "review_ratings_attributes": [
+ review: {
+ description: finalComment.value,
+ review_ratings_attributes: [
{
- "rating_id": 1,
- "value": finalRating.value
- }
- ]
- }
- }
-
- postRequest(url, payload, handleSuccess, (error) => { console.log(error) })
- }
- else {
- setAttempt(true)
+ rating_id: 1,
+ value: finalRating.value,
+ },
+ ],
+ },
+ };
+
+ postRequest(url, payload, handleSuccess, (error) => {
+ console.log(error);
+ });
+ } else {
+ setAttempt(true);
}
- }
+ };
return (
- <StyledForm onSubmit={handleSubmit}>
+ <StyledForm onSubmit={handleSubmit} contrast={props.contrast}>
<label htmlFor="avaliacao-estrelas" className="start-label">
{props.recurso ? "Este recurso foi útil?*" : "Esta coleção foi útil?*"}
</label>
@@ -68,76 +89,146 @@ export default function CommentForm(props) {
name="avaliacao-estrelas"
value={rating.value}
precision={0.5}
- style={{ color: "#ff9226" }}
- onChange={(e, newValue) => { setRating({ ...rating, error: newValue === null ? true : false, value: newValue }) }}
- emptyIcon={<StarIcon fontSize="inherit" style={{ color: "#666" }} />}
- getLabelText={(value) => { return (value + ' Estrela' + (value !== 1 ? 's' : '')) }}
+ style={
+ props.contrast === "" ? { color: "#ff9226" } : { color: "yellow" }
+ }
+ onChange={(e, newValue) => {
+ setRating({
+ ...rating,
+ error: newValue === null ? true : false,
+ value: newValue,
+ });
+ }}
+ emptyIcon={
+ <StarIcon
+ fontSize="inherit"
+ style={
+ props.contrast === "" ? { color: "#666" } : { color: "white" }
+ }
+ />
+ }
+ getLabelText={(value) => {
+ return value + " Estrela" + (value !== 1 ? "s" : "");
+ }}
/>
</div>
- <div className="star-alert" style={attemptedSubmit ? { visibility: "visible" } : { visibility: "hidden" }}>{props.recurso ? "Avalie se o recurso foi útil." : "Avalie se esta coleção foi útil."}</div>
+ <div
+ className="star-alert"
+ style={
+ attemptedSubmit ? { visibility: "visible" } : { visibility: "hidden" }
+ }
+ >
+ {props.recurso
+ ? "Avalie se o recurso foi útil."
+ : "Avalie se esta coleção foi útil."}
+ </div>
<Grid container>
<Grid item xs={12} md={9}>
<StyledTextField
+ contrast={props.contrast}
colecao={!props.recurso}
value={comment.value}
+ InputProps={
+ props.contrast === ""
+ ? { className: classes.lightTextField }
+ : { className: classes.darkTextField }
+ }
multiline
rows="5"
+ variant="outlined"
error={comment.error}
label="Relate sua experiência"
- onChange={e => handleChange(e)}
+ onChange={(e) => handleChange(e)}
required={true}
- help={comment.error ? (props.recurso ? "Escreva aqui a sua experiência com este Recurso" : "Escreva aqui a sua experiência com esta Coleção") : ''}
+ help={
+ comment.error
+ ? props.recurso
+ ? "Escreva aqui a sua experiência com este Recurso"
+ : "Escreva aqui a sua experiência com esta Coleção"
+ : ""
+ }
/>
</Grid>
<Grid item xs={12} md={3}>
- <div style={{ height: "100%", display: "flex", flexDirection: "column", justifyContent: "flex-end" }}>
- {
- props.recurso ?
- (
- <OrangeButton type="submit">Publicar</OrangeButton>
- )
- :
- (
- <PurpleButton type="submit"><EditIcon />Enviar</PurpleButton>
- )
- }
+ <div
+ style={{
+ height: "100%",
+ display: "flex",
+ flexDirection: "column",
+ justifyContent: "flex-end",
+ }}
+ >
+ {props.recurso ? (
+ <OrangeButton contrast={props.contrast} type="submit">
+ Publicar
+ </OrangeButton>
+ ) : (
+ <PurpleButton contrast={props.contrast} type="submit">
+ <EditIcon style={props.contrast === "" ? { marginRight: "0.3em" } : { color: "white", marginRight: "0.3em" }} />
+ Enviar
+ </PurpleButton>
+ )}
</div>
</Grid>
<div className="campos-obrigatorios">* Campos obrigatórios.</div>
- </Grid >
+ </Grid>
</StyledForm>
- )
+ );
}
const PurpleButton = styled(Button)`
- background-color : #673ab7 !important;
- box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
- font-weight : 600 !important;
- color : #fff !important;
+ color: ${(props) =>
+ props.contrast === ""
+ ? "rgba(255,255,255,0.87) !important"
+ : "yellow !important"};
+ text-decoration: ${(props) =>
+ props.contrast === "" ? "none !important" : "underline !important"};
+ box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26) !important;
+ font-weight: 600 !important;
+ background-color: ${(props) =>
+ props.contrast === "" ? "#673ab7 !important" : "black !important"};
+ border: ${(props) =>
+ props.contrast === "" ? "0 !important" : "1px solid white !important"};
+ :hover {
+ background-color: ${(props) =>
+ props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
.icon {
- vertical-align : middle !important;
- font-weight : normal !important;
- font-style : normal !important;
- font-size : 24px !important;
- line-height : 1 !important;
- letter-spacing : normal !important;
- text-transform : none !important;
- display : inline-block !important;
- white-space : nowrap !important;
- word-wrap : normal !important;
- direction : ltr !important;
- padding-right : 2px;
- }
-`
+ vertical-align: middle !important;
+ font-weight: normal !important;
+ font-style: normal !important;
+ font-size: 24px !important;
+ line-height: 1 !important;
+ letter-spacing: normal !important;
+ text-transform: none !important;
+ display: inline-block !important;
+ white-space: nowrap !important;
+ word-wrap: normal !important;
+ direction: ltr !important;
+ padding-right: 2px;
+ }
+`;
const OrangeButton = styled(Button)`
- color : rgba(255,255,255,0.87) !important;
- box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
- font-weight : 600 !important;
- background-color : #ff7f00 !important;
-`
+ color: ${(props) =>
+ props.contrast === ""
+ ? "rgba(255,255,255,0.87) !important"
+ : "yellow !important"};
+ text-decoration: ${(props) =>
+ props.contrast === "" ? "none !important" : "underline !important"};
+ box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26) !important;
+ font-weight: 600 !important;
+ background-color: ${(props) =>
+ props.contrast === "" ? "#ff7f00 !important" : "black !important"};
+ border: ${(props) =>
+ props.contrast === "" ? "0 !important" : "1px solid white !important"};
+ :hover {
+ background-color: ${(props) =>
+ props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
+`;
const StyledTextField = styled(TextField)`
.MuiInputBase-root {
@@ -198,8 +289,13 @@ const StyledTextField = styled(TextField)`
color: ${props => props.contrast === "" ? "red" : "#e75480"};
}
- .MuiInput-underline::after {
- border-bottom: ${props => props.colecao ? "2px solid #673ab7" : "2px solid rgb(255,127,0)"};
+ label.Mui-focused {
+ color: ${(props) =>
+ props.contrast === ""
+ ? props.colecao
+ ? "#673ab7"
+ : "rgb(255,127,0)"
+ : "yellow"};
}
label.Mui-focused.Mui-error {
@@ -221,7 +317,7 @@ const StyledForm = styled.form`
max-width : 100%;
display : inline-block;
margin-bottom : 0;
- color : #a5a5a5;
+ color : ${(props) => (props.contrast === "" ? "#666" : "white")}
font-weight : 400;
}
@@ -246,4 +342,4 @@ const StyledForm = styled.form`
font-size : 12px;
color :#a5a5a5;
}
-`
+`;
diff --git a/src/Components/ResourcePageComponents/CommentsArea.js b/src/Components/ResourcePageComponents/CommentsArea.js
index 008d75a5..3da805e2 100644
--- a/src/Components/ResourcePageComponents/CommentsArea.js
+++ b/src/Components/ResourcePageComponents/CommentsArea.js
@@ -44,7 +44,7 @@ export default function CommentsArea(props) {
const [totalReviews, setTotalReviews] = useState(0);
const [currPageReviews, setCurrPageReviews] = useState(0);
const [gambiarra, setState] = useState(0)
- const forceUpdate = () => { setState(gambiarra + 1) }
+ const forceUpdate = () => { setCurrPageReviews(0); setState(gambiarra + 1); }
const [loginOpen, setLogin] = useState(false)
const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
const [signUpOpen, setSignUp] = useState(false)
@@ -91,6 +91,71 @@ export default function CommentsArea(props) {
handleSuccessfulLogin(false);
}
+ const NoCommentsMessage = (contrast) => {
+ const NoCommentsContainer = styled.div`
+ text-align: center;
+ margin-left: 9vw;
+ margin-right: 9vw;
+ `
+ const BlueTitle = styled.h2`
+ color: ${props => props.contrast === "" ? "#F07E05" : "white"};
+ `
+ const Secondary = styled.h3`
+ font-weight: 100;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ `
+ const Image = styled.img`
+ margin: auto;
+ object-fit : contain !important;
+ background-color : transparent !important;
+ `
+ return (
+ <>
+ <Image src={Comentarios} style={{ width: "100%", height: "45%", maxWidth: 234 }} />
+ <NoCommentsContainer>
+ <BlueTitle contrast={contrast}>Compartilhe sua opinião com a rede!</BlueTitle>
+ <Secondary contrast={contrast}>Gostou deste recurso? Comente e compartilhe com a rede sua opinião. Interagindo com a rede, você contribui para que mais recursos como este sejam criados.</Secondary>
+ </NoCommentsContainer>
+ </>
+ );
+ }
+
+ const ResourceComments = (contrast) => {
+ return (
+ <ComentariosBox contrast={contrast}>
+ {
+ comentarios.map(comentario =>
+ <div className="comentario-template" key={comentario.id}>
+ <Comment
+ contrast={contrast}
+ isCollection={false}
+ authorID={comentario.user ? comentario.user.id : null}
+ authorAvatar={comentario.user ? comentario.user.avatar : null}
+ authorName={comentario.user ? comentario.user.name : null}
+ name={comentario.name}
+ rating={comentario.rating_average}
+ reviewRatings={comentario.review_ratings}
+ description={comentario.description}
+ createdAt={comentario.created_at}
+ recurso={true}
+ reviewID={comentario.id}
+ objectID={props.recursoId}
+ handlePost={handlePost}
+ rerenderCallback={forceUpdate}
+ handleSnackbar={props.handleSnackbar}
+ />
+ </div>
+ )
+ }
+ <div className="load-more">
+ <IconButton className="button" onClick={handleLoadMoreReviews}>
+ <KeyboardArrowDownIcon className="icon" />
+ </IconButton>
+ </div>
+ </ComentariosBox>
+ );
+ }
+
function handleLoadMoreReviews() {
if (comentarios.length !== parseInt(totalReviews))
setCurrPageReviews((previous) => previous + 1)
@@ -107,7 +172,10 @@ export default function CommentsArea(props) {
function handleSuccess(data, headers) {
setIsLoading(false)
- setComentarios((previous) => previous.concat(data.sort((a, b) => a.updated_at > b.updated_at ? -1 : 1)))
+ if (currPageReviews !== 0)
+ setComentarios((previous) => previous.concat(data.sort((a, b) => a.updated_at > b.updated_at ? -1 : 1)))
+ else
+ setComentarios(data.sort((a, b) => a.updated_at > b.updated_at ? -1 : 1))
if (headers.has('X-Total-Count'))
setTotalReviews(headers.get('X-Total-Count'))
}
@@ -135,17 +203,17 @@ export default function CommentsArea(props) {
text={"Você está conectado(a)!"}
/>
{/*-------------------------------MODALS---------------------------------------*/}
- <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
/>
- <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
+ <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
{/*----------------------------------------------------------------------------*/}
<Grid container spacing={2} style={{ padding: "10px" }}>
{
(state.currentUser.id !== '') ?
(
<Grid item xs={12} >
- <GrayContainer>
+ <GrayContainer contrast={state.contrast}>
<h3>Conte sua experiência com o Recurso</h3>
<Grid container style={{ paddingTop: "20px" }} spacing={1}>
<Grid item xs={12} sm={2} style={{ paddingLeft: "15px", paddingRight: "15px" }}>
@@ -155,6 +223,7 @@ export default function CommentsArea(props) {
</Grid>
<Grid item xs={12} sm={10}>
<CommentForm
+ contrast={state.contrast}
recursoId={props.recursoId}
handleSnackbar={props.handleSnackbar}
rerenderCallback={forceUpdate}
@@ -168,10 +237,10 @@ export default function CommentsArea(props) {
:
(
<Grid item xs={12}>
- <LogInToComment>
+ <LogInToComment contrast={state.contrast}>
<span className="span-laranja">Você precisa entrar para comentar</span>
- <Button onClick={() => handleLogin(true)} style={{ textTransform: "uppercase", color: "#666", fontWeight: "700" }}>
- <ExitToAppIcon />ENTRAR
+ <Button onClick={() => handleLogin(true)} style={state.contrast === "" ? { textTransform: "uppercase", color: "#666", fontWeight: "700" } : { textTransform: "uppercase", color: "yellow", fontWeight: "700", textDecoration: "underline" }}>
+ <ExitToAppIcon style={state.contrast === "" ? { color: "inherit" } : { color: "white" }} />ENTRAR
</Button>
</LogInToComment>
</Grid>
@@ -179,56 +248,11 @@ export default function CommentsArea(props) {
}
{
isLoading ?
- <LoadingDiv>
+ <LoadingDiv contrast={state.contrast}>
<CircularProgress className="loading" />
</LoadingDiv>
:
- totalReviews !== 0 ?
- (
- <ComentariosBox>
- <h3>{totalReviews} {totalReviews !== 1 ? 'Relatos' : 'Relato'} sobre o uso do Recurso</h3>
- {
- comentarios.map(comentario =>
- <div className="comentario-template" key={comentario.id}>
- <Comment
- isCollection={false}
- authorID={comentario.user ? comentario.user.id : null}
- authorAvatar={comentario.user ? comentario.user.avatar : null}
- authorName={comentario.user ? comentario.user.name : null}
- name={comentario.name}
- rating={comentario.rating_average}
- reviewRatings={comentario.review_ratings}
- description={comentario.description}
- createdAt={comentario.created_at}
- recurso={true}
- reviewID={comentario.id}
- objectID={props.recursoId}
- handlePost={handlePost}
- rerenderCallback={forceUpdate}
- handleSnackbar={props.handleSnackbar}
- />
- </div>
- )
- }
- <div className="load-more">
- <IconButton className="button" onClick={handleLoadMoreReviews}>
- <KeyboardArrowDownIcon />
- </IconButton>
- </div>
- </ComentariosBox>
- )
- :
- (
- <Grid item xs={12}>
- <LogInToComment>
- <img alt="" src={Comentarios} />
- <span className="span-laranja">Compartilhe sua experiência com a Rede!</span>
- <AoRelatar>
- Ao relatar sua experiência de uso do Recurso você estará auxiliando professores de todo paÃs.
- </AoRelatar>
- </LogInToComment>
- </Grid>
- )
+ totalReviews !== "0" ? ResourceComments(state.contrast) : NoCommentsMessage(state.contrast)
}
</Grid>
</React.Fragment>
@@ -243,7 +267,7 @@ const LoadingDiv = styled.div`
align-items: center;
.loading{
align-self: center;
- color: #ff7f00;
+ color: ${props => props.contrast === "" ? "#ff7f00" : "white"};
size: 24px;
}
`
@@ -258,7 +282,7 @@ const ComentariosBox = styled.div`
font-family: 'Roboto Light','Roboto Regular',Roboto;
font-weight: 300;
font-style: normal;
- color:#666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
font-size: 1.857em;
margin: 15px 2%;
text-align : flex-start;
@@ -271,6 +295,7 @@ const ComentariosBox = styled.div`
}
.load-more{
+ margin-top : 10px;
width: 100%;
display: flex;
flex-direction: row;
@@ -279,15 +304,16 @@ const ComentariosBox = styled.div`
}
.button{
+ border: ${props => props.contrast === "" ? "0" : "1px solid white"};
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+ :hover{
+ background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24)"};
+ }
}
-`
-const AoRelatar = styled.div`
- width : 70%;
- font-size : 20px;
- font-weight : 300;
- text-align : center;
- padding-bottom : 20px;
+
+ .icon{
+ color: ${props => props.contrast === "" ? "#666" : "yellow"};
+ }
`
const LogInToComment = styled.div`
@@ -301,7 +327,7 @@ const LogInToComment = styled.div`
font-size : 24px;
font-weight : 700;
padding-bottom : 5px;
- color : #ff7f00;
+ color: ${props => props.contrast === "" ? "#ff7f00" : "white"};
}
img {
@@ -311,7 +337,7 @@ const LogInToComment = styled.div`
`
const GrayContainer = styled.div`
- background-color : #fafafa;
+ background-color: ${props => props.contrast === "" ? "white" : "black"};
font-weight : 400;
font-size : 14px;
padding-bottom : 20px;
@@ -328,7 +354,7 @@ const GrayContainer = styled.div`
text-align: center;
font-weight: 300;
font-style: normal;
- color: #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
font-size: 1.857em;
margin-bottom : 10px;
margin-left : 2%;
diff --git a/src/Components/ResourcePageComponents/Footer.js b/src/Components/ResourcePageComponents/Footer.js
index 5fee2e19..b4b0e386 100644
--- a/src/Components/ResourcePageComponents/Footer.js
+++ b/src/Components/ResourcePageComponents/Footer.js
@@ -43,17 +43,17 @@ function ReportButton(props) {
return (
!props.complained ?
(
- <ButtonGrey onClick={props.userLoggedIn ? props.toggleReport : props.openLogin}>
+ <ButtonGrey contrast={props.contrast} onClick={props.userLoggedIn ? props.toggleReport : props.openLogin}>
<span className="button-text">
- <ErrorIcon className="icon" /> Reportar abuso ou erro
+ <ErrorIcon className="icon" />Reportar abuso ou erro
</span>
</ButtonGrey>
)
:
(
- <ButtonGrey>
+ <ButtonGrey contrast={props.contrast}>
<span className="button-text-report">
- <ErrorIcon className="icon" /> Você já reportou este recurso
+ <ErrorIcon className="icon" />Você já reportou este recurso
</span>
</ButtonGrey>
)
@@ -64,24 +64,28 @@ function DownloadButton(props) {
return (
props.downloadableLink ?
(
- <ButtonOrange onClick={props.enableDownload}>
- <span className="text">
- <GetAppIcon className="icon" /> Baixar Recurso
- </span>
+ <ButtonOrange contrast={props.contrast} onClick={props.enableDownload}>
+ <span>
+ <GetAppIcon className="icon" />Baixar Recurso
+ </span>
</ButtonOrange>
)
:
props.link ?
(
- <ButtonOrange onClick={props.toggleRedirect}>
- <span className="text">
- <CallMadeIcon className="icon" /> Abrir Recurso
- </span>
+ <ButtonOrange contrast={props.contrast} onClick={props.toggleRedirect}>
+ <span >
+ <CallMadeIcon className="icon" />Abrir Recurso
+ </span>
</ButtonOrange>
)
:
(
- <React.Fragment />
+ <ButtonOrange contrast={props.contrast}>
+ <span>
+ Erro
+ </span>
+ </ButtonOrange>
)
)
}
@@ -148,29 +152,29 @@ export default function Footer(props) {
text={"Você está conectado(a)!"}
/>
{/*-------------------------------MODALS---------------------------------------*/}
- <ReportModal open={reportOpen} handleClose={() => { toggleReport(false) }}
+ <ReportModal contrast={props.contrast} open={reportOpen} handleClose={() => { toggleReport(false) }}
form="recurso"
complainableId={props.recursoId}
complainableType={"LearningObject"}
/>
- <ShareModal open={shareOpen} handleClose={() => { toggleShare(false) }}
+ <ShareModal contrast={props.contrast} open={shareOpen} handleClose={() => { toggleShare(false) }}
thumb={props.thumb} title={props.title} link={props.currPageLink}
/>
- <GuardarModal open={saveToCol} handleClose={() => { toggleSave(false) }}
+ <GuardarModal contrast={props.contrast} open={saveToCol} handleClose={() => { toggleSave(false) }}
thumb={props.thumb} title={props.title} recursoId={props.recursoId}
/>
- <RedirectModal open={redirectOpen} handleClose={() => { toggleRedirect(false) }}
+ <RedirectModal contrast={props.contrast} open={redirectOpen} handleClose={() => { toggleRedirect(false) }}
link={props.link}
/>
- <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ <LoginModal contrast={props.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
/>
- <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
+ <SignUpModal contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
{/*----------------------------------------------------------------------------*/}
{/*-----------------------------BUTTONS----------------------------------------*/}
- <OpcoesDiv>
+ <OpcoesDiv contrast={props.contrast}>
<StyledGrid container>
{
windowWidth > 990 ?
@@ -179,6 +183,7 @@ export default function Footer(props) {
{/*Botao Reportar*/}
<Grid item xs={3}>
<ReportButton
+ contrast={props.contrast}
userLoggedIn={state.currentUser.id === '' ? false : true}
toggleReport={() => { toggleReport(true) }}
openLogin={handleLogin}
@@ -188,24 +193,25 @@ export default function Footer(props) {
{/*Botao Compartilhar*/}
<Grid item xs={3}>
- <ButtonGrey onClick={state.currentUser.id === '' ? () => handleLogin(true) : () => toggleShare(true)}>
+ <ButtonGrey contrast={props.contrast} onClick={state.currentUser.id === '' ? () => handleLogin(true) : () => toggleShare(true)}>
<span className="button-text">
- <ShareIcon className="icon" /> Compartilhar
- </span>
+ <ShareIcon className="icon" />Compartilhar
+ </span>
</ButtonGrey>
</Grid>
{/*Botao Guardar*/}
<Grid item xs={3}>
- <ButtonGrey onClick={state.currentUser.id === '' ? () => handleLogin(true) : () => toggleSave(true)}>
+ <ButtonGrey contrast={props.contrast} onClick={state.currentUser.id === '' ? () => handleLogin(true) : () => toggleSave(true)}>
<span className="button-text">
<FolderIcon className="icon" />Guardar
- </span>
+ </span>
</ButtonGrey>
</Grid>
<Grid item xs={3} style={{ justifyContent: "right !important" }}>
<DownloadButton
+ contrast={props.contrast}
downloadableLink={props.downloadableLink}
link={props.link}
enableDownload={enableDownload}
@@ -219,15 +225,16 @@ export default function Footer(props) {
<React.Fragment>
{/*Botao Guardar*/}
<Grid item xs={4}>
- <ButtonGrey onClick={state.currentUser.id === '' ? () => handleLogin(true) : () => toggleSave(true)}>
+ <ButtonGrey contrast={props.contrast} onClick={state.currentUser.id === '' ? () => handleLogin(true) : () => toggleSave(true)}>
<span className="button-text">
<FolderIcon className="icon" />Guardar
- </span>
+ </span>
</ButtonGrey>
</Grid>
<Grid item xs={7}>
<DownloadButton
+ contrast={props.contrast}
downloadableLink={props.downloadableLink}
link={props.link}
enableDownload={enableDownload}
@@ -236,7 +243,7 @@ export default function Footer(props) {
</Grid>
<Grid item xs={1}>
- <Button aria-haspopup="true" onClick={handleClick} style={{ color: "#666" }}>
+ <Button aria-haspopup="true" onClick={handleClick} style={props.contrast === "" ? { color: "#666" } : {color: "yellow"}}>
<MoreVertIcon />
</Button>
<Menu
@@ -245,20 +252,24 @@ export default function Footer(props) {
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
+ MenuListProps={{
+ disablePadding: true
+ }}
>
- <MenuItem>
+ <MenuItem className={`${props.contrast}BackColor`}>
<ReportButton
+ contrast={props.contrast}
userLoggedIn={state.currentUser.id === '' ? false : true}
toggleReport={() => { toggleReport(true) }}
openLogin={handleLogin}
complained={props.complained}
/>
</MenuItem>
- <MenuItem>
- <ButtonGrey onClick={state.currentUser.id === '' ? () => handleLogin(true) : () => toggleShare(true)}>
+ <MenuItem className={`${props.contrast}BackColor`}>
+ <ButtonGrey contrast={props.contrast} onClick={state.currentUser.id === '' ? () => handleLogin(true) : () => toggleShare(true)}>
<span className="button-text">
<ShareIcon className="icon" /> Compartilhar
- </span>
+ </span>
</ButtonGrey>
</MenuItem>
</Menu>
@@ -275,20 +286,21 @@ export default function Footer(props) {
}
const OpcoesDiv = styled.div`
+ margin: 1em 0em;
display : flex;
align-items : center;
height : 65px;
- background-color : #fafafa;
+ background-color: ${props => props.contrast === "" ? "white" : "black"};
`
const StyledGrid = styled(Grid)`
@media screen and (min-width: 990px) {
- padding-left : 15px !important;
+ padding-left : 12px !important;
}
.MuiGrid-item {
- padding-right : 15px;
- padding-left : 15px;
+ padding-right : 12px;
+ padding-left : 12px;
display : flex;
justify-content : center;
}
@@ -296,15 +308,16 @@ const StyledGrid = styled(Grid)`
const ButtonGrey = styled(Button)`
&:hover {
- background-color : rgba(158,158,158,0.2) !important;
+ background-color: ${props => props.contrast === "" ? "rgba(158,158,158,0.2)" : "rgba(255,255,0,0.24)"} !important;
}
- background-color : transparent !important;
- color : #666 !important;
- text-decoration : none !important;
+ background-color : ${props => props.contrast === "" ? "transparent" : "black"} !important;
+ color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
outline : none !important;
text-align : center !important;
.icon {
+ color: ${props => props.contrast === "" ? "inherit" : "white"} !important;
vertical-align : middle !important;
font-weight : normal !important;
font-style : normal !important;
@@ -317,14 +330,12 @@ const ButtonGrey = styled(Button)`
word-wrap : normal !important;
direction : ltr !important;
padding-right : 2px;
- color : inherit !important;
}
.button-text {
cursor : pointer;
line-height : 36px;
text-align : center;
- color : currentColor;
white-space : nowrap;
text-transform : uppercase;
font-weight : 600;
@@ -347,17 +358,22 @@ const ButtonGrey = styled(Button)`
`
const ButtonOrange = styled(Button)`
+ &:hover {
+ background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
- background-color : #ff7f00 !important;
- color : #fff !important;
- text-decoration : none !important;
+ background-color: ${props => props.contrast === "" ? "#ff7f00" : "black"} !important;
+ color: ${props => props.contrast === "" ? "white" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
+ border: ${props => props.contrast === "" ? "0" : "1px solid white"} !important;
text-transform : uppercase !important;
outline : none !important;
+ /* max-height: 36px !important; */
text-align : center !important;
- max-height : 36px;
margin-top : 5px !important;
.icon {
+ color: white !important;
vertical-align : middle !important;
font-weight : normal !important;
font-style : normal !important;
@@ -373,6 +389,7 @@ const ButtonOrange = styled(Button)`
}
.text {
+ color: ${props => props.contrast === "" ? "white" : "yellow"} !important;
font-size : 14px;
font-weight : 600;
}
diff --git a/src/Components/ResourcePageComponents/Sobre.js b/src/Components/ResourcePageComponents/Sobre.js
index d6b6fee3..a13ff431 100644
--- a/src/Components/ResourcePageComponents/Sobre.js
+++ b/src/Components/ResourcePageComponents/Sobre.js
@@ -16,13 +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, {useContext, useState, useEffect} from 'react'
-import {Store} from '../../Store'
+import React, { useContext, useState, useEffect } from 'react'
+import { Store } from '../../Store'
import styled from 'styled-components'
import Grid from '@material-ui/core/Grid';
-import {Link} from 'react-router-dom'
-import {NoIcon} from '../ContactButtons/FollowButton.js'
-import {NoIconFollowing} from '../ContactButtons/FollowingButton.js'
+import { Link } from 'react-router-dom'
+import { NoIcon } from '../ContactButtons/FollowButton.js'
+import { NoIconFollowing } from '../ContactButtons/FollowingButton.js'
import Collapse from '@material-ui/core/Collapse';
import SdCardIcon from '@material-ui/icons/SdCard';
import TranslateIcon from '@material-ui/icons/Translate';
@@ -51,11 +51,11 @@ function AdditionalInfoItem(props) {
)
}
-export default function Sobre (props) {
- const {state} = useContext(Store)
+export default function Sobre(props) {
+ const { state } = useContext(Store)
const [collapsed, setCollapsed] = useState(false)
- const toggleCollapsed = () => {setCollapsed(!collapsed)};
+ const toggleCollapsed = () => { setCollapsed(!collapsed) };
const [loginOpen, setLogin] = useState(false)
const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
const [signUpOpen, setSignUp] = useState(false)
@@ -72,8 +72,8 @@ export default function Sobre (props) {
if (reason === 'clickaway') {
return;
}
-
- handleSuccessfulLogin(false);
+
+ handleSuccessfulLogin(false);
}
var moment = require('moment')
@@ -83,58 +83,58 @@ export default function Sobre (props) {
useEffect(() => {
let aux = []
- if (props.attachments && props.attachments[0]){
+ if (props.attachments && props.attachments[0]) {
aux.push(<AdditionalInfoItem
- icon={<SdCardIcon/>}
+ icon={<SdCardIcon />}
label={'Tamanho: '}
value={(props.attachments[0].size / 1000000).toFixed(2) + ' Mb'}
key={props.attachments[0].id}
- />)
+ />)
}
- if(props.language){
- props.language.map( (lang) =>
+ if (props.language) {
+ props.language.map((lang) =>
aux.push(<AdditionalInfoItem
- icon={<TranslateIcon/>}
+ icon={<TranslateIcon />}
label={'Idioma: '}
value={lang.name}
key={lang.id}
- />
- ))
+ />
+ ))
}
- if (props.mimeType){
+ if (props.mimeType) {
aux.push(<AdditionalInfoItem
- icon={<InsertDriveFileIcon/>}
+ icon={<InsertDriveFileIcon />}
label={'Formato: '}
value={props.mimeType}
key={props.mimeType}
- />)
+ />)
}
if (props.createdAt) {
aux.push(<AdditionalInfoItem
- icon={<DateRangeIcon/>}
+ icon={<DateRangeIcon />}
label={'Data de Envio: '}
value={moment(props.createdAt).format("DD/MM/YYYY")}
key={"dateCreatedAt"}
- />)
+ />)
}
if (props.updatedAt) {
aux.push(<AdditionalInfoItem
- icon={<UpdateIcon/>}
+ icon={<UpdateIcon />}
label={'Modificado em: '}
value={moment(props.createdAt).format("DD/MM/YYYY")}
key={"dateUpdatedAt"}
- />)
+ />)
}
if (props.license) {
aux.push(<AdditionalInfoItem
- icon={<AssignmentIcon/>}
+ icon={<AssignmentIcon />}
label={'Tipo de licença: '}
value={
<div className="license-link">
<a href={props.license.url}>
- <img src={License} alt="license"/>
+ <img src={License} alt="license" />
</a>
<p>
{props.license.name}
@@ -142,11 +142,11 @@ export default function Sobre (props) {
</div>
}
key={props.license.id}
- />)
+ />)
}
else {
aux.push(<AdditionalInfoItem
- icon={<AssignmentIcon/>}
+ icon={<AssignmentIcon />}
label={'Tipo de licença: '}
value={
<div className="license-link">
@@ -155,7 +155,7 @@ export default function Sobre (props) {
</p>
</div>
}
- key={"no-license"}/>)
+ key={"no-license"} />)
}
setAdditionalInfo(aux)
}, [])
@@ -163,7 +163,7 @@ export default function Sobre (props) {
let windowWidth = window.innerWidth
const [followed, setFollowed] = useState(props.followed)
- const toggleFollowed = () => {setFollowed(!followed)}
+ const toggleFollowed = () => { setFollowed(!followed) }
return (
<React.Fragment>
@@ -175,16 +175,16 @@ export default function Sobre (props) {
text={"Você está conectado(a)!"}
/>
{/*-------------------------------MODALS---------------------------------------*/}
- <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ <LoginModal contrast={state.contrast} open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
openSnackbar={() => { handleSuccessfulLogin(true) }}
/>
- <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
+ <SignUpModal contrast={state.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} />
{/*----------------------------------------------------------------------------*/}
- <Grid container style={{paddingRight : "15px", paddingLeft : "15px"}}>
+ <Grid container style={{ paddingRight: "15px", paddingLeft: "15px" }}>
- <Grid item xs={windowWidth > 990 ? 9 : 12} style={{paddingRight : "15px"}}>
+ <Grid item xs={windowWidth > 990 ? 9 : 12} style={{ paddingRight: "15px" }}>
<Collapse in={collapsed} collapsedHeight={338}>
- <SobreDiv>
+ <SobreDiv contrast={state.contrast}>
<div className="titulo">
Sobre o Recurso
</div>
@@ -193,7 +193,7 @@ export default function Sobre (props) {
<div className="tags-container">
{
props.tags &&
- props.tags.map( (tag) =>
+ props.tags.map((tag) =>
<span key={tag.name}>{tag.name}</span>
)
}
@@ -220,7 +220,7 @@ export default function Sobre (props) {
</Grid>
<Grid item xs={windowWidth > 990 ? 3 : 12}>
- <MetasObjeto>
+ <MetasObjeto contrast={state.contrast}>
<div className="enviado-por">
Enviado por:
</div>
@@ -228,54 +228,54 @@ export default function Sobre (props) {
<div className="foto-autor">
<Link to={"/usuario-publico/" + props.id}>
- <img src={props.avatar} alt="user avatar"/>
+ <img src={props.avatar} alt="user avatar" />
</Link>
</div>
<div className="nome-autor">
- <Link to={"/usuario-publico/" + props.id} style={{textDecoration : "none"}}>
+ <Link to={"/usuario-publico/" + props.id} style={{ textDecoration: "none" }}>
<span className="span-st">{props.publisher}</span>
</Link>
</div>
- <div style={{paddingTop : "0.75em", display : "flex", justifyContent : "center"}}>
- {
- (props.id !== state.currentUser.id) &&
- followed ? (
- <>
- <NoIconFollowing followedID={props.id} toggleFollowed={toggleFollowed}/>
- <ContactCardOptions followed={followed} followableID={props.id} toggleFollowed={toggleFollowed}/>
- </>
- )
- :
- (
- <>
- <NoIcon followableID={props.id} toggleFollowed={toggleFollowed}/>
- <ContactCardOptions followed={followed} followableID={props.id} toggleFollowed={toggleFollowed}/>
- </>
- )
- }
+ <div style={{ paddingTop: "0.75em", display: "flex", justifyContent: "center" }}>
+ {
+ (props.id !== state.currentUser.id) &&
+ followed ? (
+ <>
+ <NoIconFollowing contrast={state.contrast} followedID={props.id} toggleFollowed={toggleFollowed} />
+ <ContactCardOptions contrast={state.contrast} followed={followed} followableID={props.id} toggleFollowed={toggleFollowed} />
+ </>
+ )
+ :
+ (
+ <>
+ <NoIcon contrast={state.contrast} followableID={props.id} toggleFollowed={toggleFollowed} />
+ <ContactCardOptions contrast={state.contrast} followed={followed} followableID={props.id} toggleFollowed={toggleFollowed} />
+ </>
+ )
+ }
</div>
</MetasObjeto>
</Grid>
- <Grid item xs={12} style={{paddingTop : "15px"}}>
- <CollapseControl onClick={() => {toggleCollapsed()}}>
+ <Grid item xs={12} style={{ paddingTop: "15px" }}>
+ <CollapseControl onClick={() => { toggleCollapsed() }}>
{
collapsed ?
- (
+ (
<React.Fragment>
- <span>VER MENOS</span>
- <ExpandLessIcon/>
+ <span style={state.contrast === "" ? { color: "#666" } : { color: "yellow", textDecoration: "underline" }}>VER MENOS</span>
+ <ExpandLessIcon style={state.contrast === "" ? { color: "#666" } : { color: "white" }} />
</React.Fragment>
- )
- :
- (
+ )
+ :
+ (
<React.Fragment>
- <span>VER MAIS</span>
- <ExpandMoreIcon/>
+ <span style={state.contrast === "" ? { color: "#666" } : { color: "yellow", textDecoration: "underline" }}>VER MAIS</span>
+ <ExpandMoreIcon style={state.contrast === "" ? { color: "#666" } : { color: "white" }} />
</React.Fragment>
- )
+ )
}
</CollapseControl>
</Grid>
@@ -306,6 +306,7 @@ const CollapseControl = styled.div`
`
const SobreDiv = styled.div`
+ background-color: ${props => props.contrast === "" ? "white" : "black"};
padding-left : 3% !important;
padding-top : 3% !important;
.titulo {
@@ -315,7 +316,7 @@ const SobreDiv = styled.div`
font-family : 'Roboto Light','Roboto Regular',Roboto;
font-weight : 300;
font-style : normal;
- color : #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
font-size : 1.857em;
}
@@ -331,12 +332,13 @@ const SobreDiv = styled.div`
text-transform : capitalize;
display : inline-flex;
border-radius : 15px;
- background-color : #e5e5e5;
+ background-color: ${props => props.contrast === "" ? "#e5e5e5" : "black"};
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"};
margin-right : 3px;
padding : 3px 7px;
line-height : 18px;
margin-bottom : 3px;
- color : #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
font-size : .8em
}
}
@@ -344,11 +346,13 @@ const SobreDiv = styled.div`
.conteudo {
font-size : 14px;
.descricao-objeto {
+ color: ${props => props.contrast === "" ? "#666" : "white"};
text-align: justify;
margin-bottom: 20px;
margin-top: 20px;
}
.autoria {
+ color: ${props => props.contrast === "" ? "#666" : "white"};
margin-bottom : 30px;
}
@@ -363,12 +367,14 @@ const SobreDiv = styled.div`
display: inline-block;
margin-bottom: 15px;
font-size : 14px;
+ color: ${props => props.contrast === "" ? "#666" : "white !important"};
.MuiSvgIcon-root {
- vertical-align : middle
+ vertical-align : middle;
}
span {
+ color: ${props => props.contrast === "" ? "#666" : "white"};
margin-left : 2%;
font-weight : 700;
}
@@ -378,8 +384,8 @@ const SobreDiv = styled.div`
display : inline-grid;
a {
- text-decoration : none !important;
- color : initial;
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
+ color: ${props => props.contrast === "" ? "initial" : "yellow"};
img {
vertical-align : middle;
@@ -407,6 +413,7 @@ const MetasObjeto = styled.div`
justify-content : flex-start;
padding : 20px;
text-align : center;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
@media screen and (min-width : 990px) {
border-left : 1px solid #e5e5e5;
@@ -415,12 +422,13 @@ const MetasObjeto = styled.div`
.span-st {
position : relative;
font-size : 14px;
- color: #666;
+ color: ${props => props.contrast === "" ? "#666" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
}
.enviado-por {
font-size : 14px;
- color :#666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
font-weight : 500;
margin-bottom : 5px;
margin-top : 20px;
diff --git a/src/Components/ResourcePageComponents/TextoObjeto.js b/src/Components/ResourcePageComponents/TextoObjeto.js
index b45fb0e4..96585e7b 100644
--- a/src/Components/ResourcePageComponents/TextoObjeto.js
+++ b/src/Components/ResourcePageComponents/TextoObjeto.js
@@ -102,7 +102,7 @@ export default function TextoObjeto (props) {
}
return (
- <TextoObjetoDiv>
+ <TextoObjetoDiv contrast={props.contrast}>
{ publisherDeletedObject &&
<Redirect
to={{
@@ -124,6 +124,7 @@ export default function TextoObjeto (props) {
{
props.stateRecurso !== "submitted" &&
<Firulas
+ contrast={state.contrast}
rating={props.rating}
likesCount={props.likesCount}
liked={props.likedBool}
@@ -185,10 +186,10 @@ export default function TextoObjeto (props) {
{
(checkAccessLevel('publisher') || props.stateRecurso === "draft") &&
<Link to={"/editar-recurso/" + props.recursoId}>
- <Button style={{color : "#666"}}><EditIcon/></Button>
+ <Button className={`${props.contrast}LinkColor`} style={{color : "#666"}}><EditIcon/></Button>
</Link>
}
- <Button style={{color : "#666"}} onClick={() => {handleDelete()}}><DeleteForeverIcon/></Button>
+ <Button className={`${props.contrast}LinkColor`} style={{color : "#666"}} onClick={() => {handleDelete()}}><DeleteForeverIcon/></Button>
</React.Fragment>
}
@@ -199,6 +200,7 @@ export default function TextoObjeto (props) {
}
const TextoObjetoDiv = styled.div`
+ background-color: ${props => props.contrast === "" ? "white" : "black"};
padding : 20px 20px 0 20px;
display : flex;
flex-direction : column;
@@ -208,6 +210,7 @@ const TextoObjetoDiv = styled.div`
align-items : flex-start;
h3 {
+ color: ${props => props.contrast === "" ? "#666" : "white"};
font-size : 26px;
font-weight : 400;
margin : 0;
@@ -215,6 +218,7 @@ const TextoObjetoDiv = styled.div`
}
.info-recurso {
+ color: ${props => props.contrast === "" ? "#666" : "white"};
display : inline-block;
width : 100%;
font-size : 15px;
@@ -223,33 +227,35 @@ const TextoObjetoDiv = styled.div`
}
.info-cabecalho-recurso {
+ color: ${props => props.contrast === "" ? "#666" : "white"};
font-size : 15px;
}
.dado-recurso {
+ color: ${props => props.contrast === "" ? "#666" : "white"};
font-size : 15px;
font-weight : 600;
}
.views-downloads {
+ color: ${props => props.contrast === "" ? "#666" : "white"};
font-size : 15px;
font-weight : lighter;
margin-bottom : 12px;
}
.icon {
- color : #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
vertical-align : middle;
margin-right : 2px;
}
.alert-warning {
- color : #8a6d3b;
- background-color : #fcf8e3;
- border-color : #faebcc;
+ color: ${props => props.contrast === "" ? "#8a6d3b" : "white"};
+ background-color : ${props => props.contrast === "" ? "#fcf8e3" : "black"};
+ border: 1px solid ${props => props.contrast === "" ? "#faebcc" : "white"};
padding: 15px;
margin-bottom: 20px;
- border: 1px solid transparent;
border-radius: 4px;
font-size : 14px;
}
@@ -262,7 +268,7 @@ const TextoObjetoDiv = styled.div`
height : 32px;
width : 100%;
margin : 10px 0 8px 0;
- background-color : #e5e5e5;
+ background-color: ${props => props.contrast === "" ? "#e5e5e5" : "black"};
}
.audio {
diff --git a/src/Components/ResourcePageComponents/VideoPlayer.js b/src/Components/ResourcePageComponents/VideoPlayer.js
index 57b1b06c..6b5a9822 100644
--- a/src/Components/ResourcePageComponents/VideoPlayer.js
+++ b/src/Components/ResourcePageComponents/VideoPlayer.js
@@ -37,7 +37,6 @@ function GetEmbeddedLink(link) {
}
else if (link.indexOf("vimeo") !== -1) { //if the 13th character = o (vimeo videos)
link_id = link.split("?")[0].split("/")
- console.log(link_id) //key # = from 19th character on
embed = "https://player.vimeo.com/video/" + link_id.pop(); //Add vimeo link before key #
}
return embed
@@ -69,7 +68,7 @@ export default function VideoPlayer(props) {
</video>
</VideoContainer>
:
- <ErrorParagraph>
+ <ErrorParagraph contrast={props.contrast}>
Seu navegador não permite a exibição deste vÃdeo. É necessário baixar o vÃdeo para poder visualizá-lo.
</ErrorParagraph>
)
@@ -95,4 +94,5 @@ const VideoContainer = styled.div`
const ErrorParagraph = styled.p`
text-align: center;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
`
diff --git a/src/Components/SearchBar.js b/src/Components/SearchBar.js
index 8e0ea969..aa074394 100644
--- a/src/Components/SearchBar.js
+++ b/src/Components/SearchBar.js
@@ -26,18 +26,18 @@ import styled from 'styled-components'
import { Store } from '../Store';
import { v4 as uuidv4 } from 'uuid'
import Grid from "@material-ui/core/Grid"
-
+import {useStyles} from './ReportUserForm.js'
const dividerStyled = {
- background: '#e0e0e0',
- width: '1px',
- content: "",
- display: 'block',
- top: '0',
- bottom: '0',
- right: '0',
- minHeight: '70px',
- margin: '0 20px'
+ background: '#e0e0e0',
+ width: '1px',
+ content: "",
+ display: 'block',
+ top: '0',
+ bottom: '0',
+ right: '0',
+ minHeight: '70px',
+ margin: '0 20px'
}
const DividerVertical = () => <em style={dividerStyled}></em>
@@ -46,178 +46,212 @@ const ButtonStyled = styled(Button)`
text-transform: capitalize !important;
`
const IconSearchStyled = styled(IconSearch)`
- color: #16b8dd;
+ color: ${props => props.contrast === "" ? "#16b8dd" : "yellow"};
`
const TextFieldStyled = styled(TextField)`
- flex-grow: 2;
- margin: 0 2vw !important;
+ flex-grow: 2;
+ margin: 0 2vw !important;
+
+ .MuiOutlinedInput-root {
+ &.Mui-focused fieldset {
+ border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ }
+ fieldset {
+ border-color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+ }
+
+ label{
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+
+ label.Mui-focused {
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ }
+
+ label.Mui-focused.Mui-error {
+ color : red;
+ }
+`
+
+const FormLearnObjControlLabelStyled = styled(FormControlLabel)`
+ *{
+ text-transform: uppercase;
+ color: ${props => props.contrast === "" ? "#ff8a17 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ font-weight: bolder;
+ }
`
-/*
-const RadioGroupStyled = styled(RadioGroup)`
- display: flex;
- flex-direction: row;
- flex-grow: 1;
+const FormCollectionControlLabelStyled = styled(FormControlLabel)`
+ *{
+ text-transform: uppercase;
+ color: ${props => props.contrast === "" ? "#673ab7 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ font-weight: bolder;
+ }
`
-*/
-const FormControlLabelStyled = styled(FormControlLabel)`
- *{
- text-transform: uppercase;
- color: #ff8a17 !important;
- fontWeight: bolder;
- }
+const FormUserControlLabelStyled = styled(FormControlLabel)`
+ *{
+ text-transform: uppercase;
+ color: ${props => props.contrast === "" ? "#00bcd4 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ font-weight: bolder;
+ }
`
-const RadioStyled = styled(Radio)`
- color: #ff8a17;
+const RadioLearnObjStyled = styled(Radio)`
+ color: #ff8a17;
+`
+const RadioCollectionStyled = styled(Radio)`
+ color: #673ab7;
+`
+const RadioUserStyled = styled(Radio)`
+ color: #00bcd4;
`
const SelectStyled = styled(Select)`
- margin-right: 2vw;
- *{
- text-transform: uppercase;
- color: #ff8a17 !important;
- fontWeight: bolder;
- }
+ margin-right: 2vw;
+ *{
+ text-transform: uppercase;
+ color: ${props => props.contrast === "" ? "#ff8a17 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ font-weight: bolder;
+ }
`
const MenuItemStyled = styled(MenuItem)`
text-transform: uppercase;
- fontWeight: bolder;
-`
-
-/*const Bar = styled.div`
- display: flex;
- align-items: center;
- justify-content: space-between;
- border-top: 1px rgba(0,0,0,.1) solid;
+ font-weight: bolder;
`
-const Flex = styled.span`
- display: flex;
- align-items: center;
- color: #787380;
-`*/
export default function SearchBar(props) {
- const [query, setQuery] = useState('')
- const [searchClass, setSearchClass] = useState('LearningObject')
-
- const { state, dispatch } = useContext(Store)
-
- const [goSearch, setGoSearch] = useState(false)
-
- useEffect(() => {
- if (window.location.pathname.includes('busca')) {
- const urlParams = new URLSearchParams(window.location.search)
- const urlQuery = urlParams.get('query')
- const urlSearchClass = urlParams.get('search_class')
- if (searchClass !== urlSearchClass || query !== urlQuery) {
- setQuery(urlQuery)
- setSearchClass(urlSearchClass)
- }
- }
- }, [])
+ const [query, setQuery] = useState('')
- useEffect(() => setGoSearch(false), [goSearch])
+ const classes = useStyles();
- const handleChange = (event) => {
- setQuery(event.target.value)
- }
+ const [searchClass, setSearchClass] = useState('LearningObject')
- const handleKeyDown = (event) => {
- if (event.key === 'Enter' || event.type === 'click') {
- dispatch({
- type: 'SAVE_SEARCH',
- newSearch: {
- query: query !== '' ? query : '*',
- class: searchClass
+ const { state, dispatch } = useContext(Store)
+
+ const [goSearch, setGoSearch] = useState(false)
+
+ useEffect(() => {
+ if (window.location.pathname.includes('busca')) {
+ const urlParams = new URLSearchParams(window.location.search)
+ const urlQuery = urlParams.get('query')
+ const urlSearchClass = urlParams.get('search_class')
+ if (searchClass !== urlSearchClass || query !== urlQuery) {
+ setQuery(urlQuery)
+ setSearchClass(urlSearchClass)
+ }
}
- })
- setGoSearch(true)
+ }, [])
+
+ useEffect(() => setGoSearch(false), [goSearch])
+
+ const handleChange = (event) => {
+ setQuery(event.target.value)
}
- }
- const linkTarget = {
- pathname: `/busca?page=0&results_per_page=12&order=review_average&query=${state.search.query}&search_class=${state.search.class}`,
- key: uuidv4(), // we could use Math.random, but that's not guaranteed unique.
- state: {
- applied: true
+ const handleKeyDown = (event) => {
+ if (event.key === 'Enter' || event.type === 'click') {
+ dispatch({
+ type: 'SAVE_SEARCH',
+ newSearch: {
+ query: query !== '' ? query : '*',
+ class: searchClass
+ }
+ })
+ setGoSearch(true)
+ }
}
- };
-
- return (
- <Grid container>
- <Grid container item xs={12} sm={6} md={6} lg={6} xl={6}>
- {goSearch && <Redirect to={`/busca?page=0&results_per_page=12&order=review_average&query=${state.search.query}&search_class=${state.search.class}`} />}
- <TextFieldStyled
- id="standard-search"
- label="O que você está buscando"
- type="search"
- margin="normal"
- value={query}
- onChange={handleChange}
- onKeyPress={handleKeyDown}
- />
- </Grid>
- <Grid container item justify="center" alignItems="center" xs={12} sm={6} md={6} lg={6} xl={6}>
- {state.windowSize.width >= 960 ?
- <React.Fragment>
- <Grid container item justify="center" alignItems="center" xs={12} sm={1} md={1} lg={1} xl={1}>
- <Link
- to={linkTarget}
- >
- <ButtonStyled onClick={handleKeyDown} ><IconSearchStyled /></ButtonStyled>
- </Link>
- </Grid>
- <Grid container item justify="center" alignItems="center" xs={12} sm={3} md={3} lg={3} xl={3}>
- <span>Pressione "Enter" ou click na lupa</span>
- </Grid>
- <Grid container item justify="center" alignItems="center" xs={12} sm={1} md={1} lg={1} xl={1}>
- <DividerVertical />
- </Grid>
- <Grid container item justify="center" alignItems="center" xs={12} sm={7} md={7} lg={7} xl={7}>
- <RadioGroup row={true}
- aria-label="Tipo"
- name="types" value={searchClass}
- onChange={
- (event) => setSearchClass(event.target.value)
- }
- justify="center" alignItems="center"
- >
- <FormControlLabelStyled value="LearningObject" control={<RadioStyled />} label="Recursos" />
- <FormControlLabelStyled value="Collection" control={<RadioStyled />} label="Coleções" />
- <FormControlLabelStyled value="User" control={<RadioStyled />} label="Usuários" />
- </RadioGroup>
- </Grid>
- </React.Fragment>
- :
- <React.Fragment>
- <Grid container item justify="center" alignItems="center" xs={5} sm={5} md={5} lg={5} xl={5}>
- <FormControl>
- <SelectStyled
- value={searchClass}
- onChange={(event) => setSearchClass(event.target.value)}
- >
- <MenuItemStyled style={{color : "#ff7f00"}} value="LearningObject" aria-label="Recursos">Recursos</MenuItemStyled>
- <MenuItemStyled style={{color : "#673ab7"}} value="Collection" aria-label="Coleções">Coleções</MenuItemStyled>
- <MenuItemStyled style={{color : "#00bcd4"}} value="User" aria-label="Usuários">Usuários</MenuItemStyled>
- </SelectStyled>
- </FormControl>
- </Grid>
- <Grid container item justify="center" alignItems="center" xs={2} sm={2} md={2} lg={2} xl={2}>
- <DividerVertical />
- </Grid>
- <Grid container item justify="center" alignItems="center" xs={5} sm={5} md={5} lg={5} xl={5}>
- <Link
- to={linkTarget}
- >
- <ButtonStyled onClick={handleKeyDown} ><IconSearchStyled /></ButtonStyled>
- </Link>
- </Grid>
- </React.Fragment>
- }
- </Grid>
- </Grid>
- )
+
+ const linkTarget = {
+ pathname: `/busca?page=0&results_per_page=12&order=review_average&query=${state.search.query}&search_class=${state.search.class}`,
+ key: uuidv4(), // we could use Math.random, but that's not guaranteed unique.
+ state: {
+ applied: true
+ }
+ };
+
+ return (
+ <Grid container style={state.contrast === "" ? { paddingTop: "1em" } : { backgroundColor: "black", paddingTop: "1em" }}>
+ <Grid container item xs={12} sm={6} md={6} lg={6} xl={6}>
+ {goSearch && <Redirect to={`/busca?page=0&results_per_page=12&order=review_average&query=${state.search.query}&search_class=${state.search.class}`} />}
+ <TextFieldStyled
+ contrast={state.contrast}
+ id="standard-search"
+ label="O que você está buscando?"
+ type="search"
+ margin="normal"
+ variant="outlined"
+ value={query}
+ InputProps={state.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
+ onChange={handleChange}
+ onKeyPress={handleKeyDown}
+ />
+ </Grid>
+ <Grid container item justify="center" alignItems="center" xs={12} sm={6} md={6} lg={6} xl={6}>
+ {state.windowSize.width >= 960 ?
+ <React.Fragment>
+ <Grid container item justify="center" alignItems="center" xs={12} sm={1} md={1} lg={1} xl={1}>
+ <Link
+ to={linkTarget}
+ >
+ <ButtonStyled title="Pesquisar" onClick={handleKeyDown} ><IconSearchStyled contrast={state.contrast} /></ButtonStyled>
+ </Link>
+ </Grid>
+ <Grid container item justify="center" alignItems="center" xs={12} sm={3} md={3} lg={3} xl={3}>
+ <span style={state.contrast === "" ? {} : { color: "white" }}>Pressione "Enter" ou click na lupa</span>
+ </Grid>
+ <Grid container item justify="center" alignItems="center" xs={12} sm={1} md={1} lg={1} xl={1}>
+ <DividerVertical />
+ </Grid>
+ <Grid container item justify="center" alignItems="center" xs={12} sm={7} md={7} lg={7} xl={7}>
+ <RadioGroup row={true}
+ aria-label="Tipo"
+ name="types" value={searchClass}
+ onChange={
+ (event) => setSearchClass(event.target.value)
+ }
+ justify="center" alignItems="center"
+ >
+ <FormLearnObjControlLabelStyled contrast={state.contrast} value="LearningObject" control={<RadioLearnObjStyled contrast={state.contrast} />} label="Recursos" />
+ <FormCollectionControlLabelStyled contrast={state.contrast} value="Collection" control={<RadioCollectionStyled contrast={state.contrast} />} label="Coleções" />
+ <FormUserControlLabelStyled contrast={state.contrast} value="User" control={<RadioUserStyled contrast={state.contrast} />} label="Usuários" />
+ </RadioGroup>
+ </Grid>
+ </React.Fragment>
+ :
+ <React.Fragment>
+ <Grid container item justify="center" alignItems="center" xs={5} sm={5} md={5} lg={5} xl={5}>
+ <FormControl>
+ <SelectStyled
+ contrast={state.contrast}
+ value={searchClass}
+ onChange={(event) => setSearchClass(event.target.value)}
+ >
+ <MenuItemStyled style={state.contrast === "" ? { color: "#ff7f00" } : { color: "yellow", backgroundColor: "black", textDecoration: "underline" }} value="LearningObject" aria-label="Recursos">Recursos</MenuItemStyled>
+ <MenuItemStyled style={state.contrast === "" ? { color: "#673ab7" } : { color: "yellow", backgroundColor: "black", textDecoration: "underline" }} value="Collection" aria-label="Coleções">Coleções</MenuItemStyled>
+ <MenuItemStyled style={state.contrast === "" ? { color: "#00bcd4" } : { color: "yellow", backgroundColor: "black", textDecoration: "underline" }} value="User" aria-label="Usuários">Usuários</MenuItemStyled>
+ </SelectStyled>
+ </FormControl>
+ </Grid>
+ <Grid container item justify="center" alignItems="center" xs={2} sm={2} md={2} lg={2} xl={2}>
+ <DividerVertical />
+ </Grid>
+ <Grid container item justify="center" alignItems="center" xs={5} sm={5} md={5} lg={5} xl={5}>
+ <Link
+ to={linkTarget}
+ >
+ <ButtonStyled title="Pesquisar" onClick={handleKeyDown} ><IconSearchStyled contrast={state.contrast} /></ButtonStyled>
+ </Link>
+ </Grid>
+ </React.Fragment>
+ }
+ </Grid>
+ </Grid >
+ )
}
\ No newline at end of file
diff --git a/src/Components/SearchExpansionPanel/SearchEPCompCurriculum.js b/src/Components/SearchExpansionPanel/SearchEPCompCurriculum.js
index 43941d03..ed4a026e 100644
--- a/src/Components/SearchExpansionPanel/SearchEPCompCurriculum.js
+++ b/src/Components/SearchExpansionPanel/SearchEPCompCurriculum.js
@@ -1,26 +1,34 @@
import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
-import List from "@material-ui/core/List";
-import ListItem from "@material-ui/core/ListItem";
-import ListItemIcon from "@material-ui/core/ListItemIcon";
-import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
-import ListItemText from "@material-ui/core/ListItemText";
+import { withStyles } from '@material-ui/core/styles';
import Checkbox from "@material-ui/core/Checkbox";
-import IconButton from "@material-ui/core/IconButton";
+import { yellow, orange } from "@material-ui/core/colors";
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormGroup from '@material-ui/core/FormGroup';
-const useStyles = makeStyles(theme => ({
+const OrangeCheckBox = withStyles({
root: {
- width: "100%",
- maxWidth: 360,
- backgroundColor: theme.palette.background.paper,
- color: "#666"
- }
-}));
+ color: orange[400],
+ '&$checked': {
+ color: orange[600],
+ },
+ },
+ checked: {},
+})((props) => <Checkbox color="default" {...props} />);
-export default function SearchEPCompCurriculum({ onChange, curriculumComponents, setCurriculum }) {
- const classes = useStyles();
+const ContrastCheckBox = withStyles({
+ root: {
+ color: yellow[400],
+ '&$checked': {
+ color: yellow[600],
+ },
+ },
+ checked: {},
+})((props) => <Checkbox color="default" {...props} />);
+
+export default function SearchEPCompCurriculum({ curriculumComponents, setCurriculum, contrast }) {
- const handleToggle = (index) => () => {
+ const handleChange = (event) => {
+ const index = event.target.name;
const newCurriculumComponents = [...curriculumComponents];
newCurriculumComponents[index].isChecked = !newCurriculumComponents[index].isChecked
setCurriculum(newCurriculumComponents);
@@ -28,34 +36,17 @@ export default function SearchEPCompCurriculum({ onChange, curriculumComponents,
if (curriculumComponents)
return (
- <List className={classes.root}>
- {curriculumComponents.map((item, index) => {
- const labelId = `checkbox-list-label-${item.value}`;
-
- return (
- <ListItem
+ <FormGroup row>
+ {
+ curriculumComponents.map((item, index) => {
+ return <FormControlLabel
+ name={index}
key={item.exemplo}
- role={undefined}
- dense
- button
- onClick={handleToggle(index)}
- >
- <ListItemIcon>
- <Checkbox
- edge="start"
- checked={item.isChecked}
- tabIndex={-1}
- disableRipple
- inputProps={{ "aria-labelledby": labelId }}
- />
- </ListItemIcon>
- <ListItemText id={labelId} primary={item.exemplo} />
- <ListItemSecondaryAction>
- <IconButton edge="end" aria-label="comments"></IconButton>
- </ListItemSecondaryAction>
- </ListItem>
- );
- })}
- </List>
- );
+ control={contrast === "" ? <OrangeCheckBox checked={item.isChecked} onChange={handleChange} /> : <ContrastCheckBox checked={item.isChecked} onChange={handleChange} />}
+ label={<span style={contrast === "" ? {} : { color: "yellow", textDecoration: "underline" }}>{item.exemplo}</span>}
+ />
+ })
+ }
+ </FormGroup>
+ )
}
diff --git a/src/Components/SearchExpansionPanel/SearchEPIdiomas.js b/src/Components/SearchExpansionPanel/SearchEPIdiomas.js
index 06715e46..fcb1c65c 100644
--- a/src/Components/SearchExpansionPanel/SearchEPIdiomas.js
+++ b/src/Components/SearchExpansionPanel/SearchEPIdiomas.js
@@ -1,61 +1,52 @@
import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
-import List from "@material-ui/core/List";
-import ListItem from "@material-ui/core/ListItem";
-import ListItemIcon from "@material-ui/core/ListItemIcon";
-import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
-import ListItemText from "@material-ui/core/ListItemText";
+import { withStyles } from '@material-ui/core/styles';
import Checkbox from "@material-ui/core/Checkbox";
-import IconButton from "@material-ui/core/IconButton";
+import { yellow, orange } from "@material-ui/core/colors";
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormGroup from '@material-ui/core/FormGroup';
-const useStyles = makeStyles(theme => ({
+const OrangeCheckBox = withStyles({
root: {
- width: "100%",
- maxWidth: 360,
- backgroundColor: theme.palette.background.paper,
- color: "#666"
- }
-}));
+ color: orange[400],
+ '&$checked': {
+ color: orange[600],
+ },
+ },
+ checked: {},
+})((props) => <Checkbox color="default" {...props} />);
-export default function SearchEPIdiomas({ languages, setLanguages }) {
- const classes = useStyles();
+const ContrastCheckBox = withStyles({
+ root: {
+ color: yellow[400],
+ '&$checked': {
+ color: yellow[600],
+ },
+ },
+ checked: {},
+})((props) => <Checkbox color="default" {...props} />);
+
+export default function SearchEPCompCurriculum({ languages, setLanguages, contrast }) {
- const handleToggle = (index) => () => {
- const newLanguages = [...languages];
- newLanguages[index].isChecked = !newLanguages[index].isChecked
- setLanguages(newLanguages);
+ const handleChange = (event) => {
+ const index = event.target.name;
+ const newCurriculumComponents = [...languages];
+ newCurriculumComponents[index].isChecked = !newCurriculumComponents[index].isChecked
+ setLanguages(newCurriculumComponents);
};
if (languages)
return (
- <List className={classes.root}>
- {languages.map((item, index) => {
- const labelId = `checkbox-list-label-${item.value}`;
-
- return (
- <ListItem
+ <FormGroup row>
+ {
+ languages.map((item, index) => {
+ return <FormControlLabel
+ name={index}
key={item.exemplo}
- role={undefined}
- dense
- button
- onClick={handleToggle(index)}
- >
- <ListItemIcon>
- <Checkbox
- edge="start"
- checked={item.isChecked}
- tabIndex={-1}
- disableRipple
- inputProps={{ "aria-labelledby": labelId }}
- />
- </ListItemIcon>
- <ListItemText id={labelId} primary={item.exemplo} />
- <ListItemSecondaryAction>
- <IconButton edge="end" aria-label="comments"></IconButton>
- </ListItemSecondaryAction>
- </ListItem>
- );
- })}
- </List>
- );
+ control={contrast === "" ? <OrangeCheckBox checked={item.isChecked} onChange={handleChange} /> : <ContrastCheckBox checked={item.isChecked} onChange={handleChange} />}
+ label={<span style={contrast === "" ? {} : { color: "yellow", textDecoration: "underline" }}>{item.exemplo}</span>}
+ />
+ })
+ }
+ </FormGroup>
+ )
}
diff --git a/src/Components/SearchExpansionPanel/SearchEPTiposRec.js b/src/Components/SearchExpansionPanel/SearchEPTiposRec.js
index 41b77adf..9aedc9a5 100644
--- a/src/Components/SearchExpansionPanel/SearchEPTiposRec.js
+++ b/src/Components/SearchExpansionPanel/SearchEPTiposRec.js
@@ -1,61 +1,52 @@
import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
-import List from "@material-ui/core/List";
-import ListItem from "@material-ui/core/ListItem";
-import ListItemIcon from "@material-ui/core/ListItemIcon";
-import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
-import ListItemText from "@material-ui/core/ListItemText";
+import { withStyles } from '@material-ui/core/styles';
import Checkbox from "@material-ui/core/Checkbox";
-import IconButton from "@material-ui/core/IconButton";
+import { yellow, orange } from "@material-ui/core/colors";
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormGroup from '@material-ui/core/FormGroup';
-const useStyles = makeStyles(theme => ({
+const OrangeCheckBox = withStyles({
root: {
- width: "100%",
- maxWidth: 360,
- backgroundColor: theme.palette.background.paper,
- color: "#666"
- }
-}));
+ color: orange[400],
+ '&$checked': {
+ color: orange[600],
+ },
+ },
+ checked: {},
+})((props) => <Checkbox color="default" {...props} />);
-export default function SearchEPCompCurriculum({ onChange, typeOfResources, setTypeRes }) {
- const classes = useStyles();
+const ContrastCheckBox = withStyles({
+ root: {
+ color: yellow[400],
+ '&$checked': {
+ color: yellow[600],
+ },
+ },
+ checked: {},
+})((props) => <Checkbox color="default" {...props} />);
+
+export default function SearchEPCompCurriculum({ typeOfResources, setTypeRes, contrast }) {
- const handleToggle = (index) => () => {
- const newTypeOfRes = [...typeOfResources];
- newTypeOfRes[index].isChecked = !newTypeOfRes[index].isChecked
- setTypeRes(newTypeOfRes);
+ const handleChange = (event) => {
+ const index = event.target.name;
+ const newCurriculumComponents = [...typeOfResources];
+ newCurriculumComponents[index].isChecked = !newCurriculumComponents[index].isChecked
+ setTypeRes(newCurriculumComponents);
};
if (typeOfResources)
return (
- <List className={classes.root}>
- {typeOfResources.map((item, index) => {
- const labelId = `checkbox-list-label-${item.value}`;
-
- return (
- <ListItem
+ <FormGroup row>
+ {
+ typeOfResources.map((item, index) => {
+ return <FormControlLabel
+ name={index}
key={item.exemplo}
- role={undefined}
- dense
- button
- onClick={handleToggle(index)}
- >
- <ListItemIcon>
- <Checkbox
- edge="start"
- checked={item.isChecked}
- tabIndex={-1}
- disableRipple
- inputProps={{ "aria-labelledby": labelId }}
- />
- </ListItemIcon>
- <ListItemText id={labelId} primary={item.exemplo} />
- <ListItemSecondaryAction>
- <IconButton edge="end" aria-label="comments"></IconButton>
- </ListItemSecondaryAction>
- </ListItem>
- );
- })}
- </List>
- );
+ control={contrast === "" ? <OrangeCheckBox checked={item.isChecked} onChange={handleChange} /> : <ContrastCheckBox checked={item.isChecked} onChange={handleChange} />}
+ label={<span style={contrast === "" ? {} : { color: "yellow", textDecoration: "underline" }}>{item.exemplo}</span>}
+ />
+ })
+ }
+ </FormGroup>
+ )
}
diff --git a/src/Components/SearchExpansionPanel/SearchExpansionPanel.js b/src/Components/SearchExpansionPanel/SearchExpansionPanel.js
index 8df336aa..e36e564b 100644
--- a/src/Components/SearchExpansionPanel/SearchExpansionPanel.js
+++ b/src/Components/SearchExpansionPanel/SearchExpansionPanel.js
@@ -9,236 +9,223 @@ import SearchEPCompCurriculum from "./SearchEPCompCurriculum";
import SearchEPTiposRec from "./SearchEPTiposRec";
import SearchEPEtapasEns from "./SesrchEPEtapasEns";
import SearchEPIdiomas from "./SearchEPIdiomas";
-import { TextField } from "@material-ui/core";
-import Grid from '@material-ui/core/Grid';
-import CircularProgress from '@material-ui/core/CircularProgress';
import Paper from '@material-ui/core/Paper';
import styled from 'styled-components';
import './ExpansionPanel.css'
+import FormInput from "../FormInput";
const ExpansionPanel = withStyles({
- root: {
- border: "1px solid rgba(0, 0, 0, .125)",
- boxShadow: "none",
- '.MuiButtonBase-root': {
- paddingInline: "0 !important"
+ root: {
+ border: "1px solid rgba(0, 0, 0, .125)",
+ boxShadow: "none",
+ '.MuiButtonBase-root': {
+ paddingInline: "0 !important"
+ },
+ "&:not(:last-child)": {
+ borderBottom: 0
+ },
+ "&:before": {
+ display: "none"
+ },
+ "&$expanded": {
+ margin: "auto"
+ }
},
- "&:not(:last-child)": {
- borderBottom: 0
- },
- "&:before": {
- display: "none"
- },
- "&$expanded": {
- margin: "auto"
- }
- },
- expanded: {}
+ expanded: {}
})(MuiExpansionPanel);
const ExpansionPanelSummary = withStyles({
- root: {
- color: "#666",
- marginBottom: -1,
- minHeight: 56,
- backgroundColor: "#fff",
+ root: {
+ color: "#666",
+ marginBottom: -1,
+ minHeight: 56,
+ backgroundColor: "#fff",
- "&$expanded": {
- minHeight: 56,
- backgroundColor: "#fff"
- }
- },
- content: {
- "&$expanded": {
- margin: "12px 0"
- }
- },
- expanded: {}
+ "&$expanded": {
+ minHeight: 56,
+ backgroundColor: "#fff"
+ }
+ },
+ content: {
+ "&$expanded": {
+ margin: "12px 0"
+ }
+ },
+ expanded: {}
})(MuiExpansionPanelSummary);
-const TesteTypography = withStyles({
- root: {
- fontSize: "17px"
- }
-})(Typography);
const ExpansionPanelDetails = withStyles(theme => ({
- root: {
- // padding: theme.spacing(2)
- }
+ root: {
+ // padding: theme.spacing(2)
+ }
}))(MuiExpansionPanelDetails);
export default function SearchExpansionPanel(props) {
- const [keyWords, setKeyWords] = useState("");
- const [errorInKeyWord, setErrorInKeyWord] = useState({
- message: "",
- state: false
- })
-
- const onKeyPressed = (e) => {
- if (e.key === "Enter") {
- if (keyWords.length === 0) {
- setErrorInKeyWord({
- state: true,
- message: "Preencha o campo"
- })
- }
- else
- props.setTag(keyWords)
+ const [keyWords, setKeyWords] = useState("");
+ const [errorInKeyWord, setErrorInKeyWord] = useState({
+ message: "",
+ state: false
+ })
+
+ const onKeyPressed = (e) => {
+ if (e.key === "Enter") {
+ if (keyWords.length === 0) {
+ setErrorInKeyWord({
+ state: true,
+ message: "Preencha o campo"
+ })
+ }
+ else
+ props.setTag(keyWords)
+ }
+ }
+
+ const HandleChangeText = (e) => {
+ if (errorInKeyWord.state)
+ setErrorInKeyWord({
+ state: false,
+ message: ""
+ })
+ setKeyWords(e.target.value);
}
- }
-
- const HandleChangeText = (e) => {
- if (errorInKeyWord.state)
- setErrorInKeyWord({
- state: false,
- message: ""
- })
- setKeyWords(e.target.value);
- }
-
- return (
- <MainPaper square elevation={4}>
- <link
- href="https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap"
- rel="stylesheet"
- />
-
- <ExpansionPanel square>
- <ExpansionPanelSummary
- aria-controls="panel1d-content"
- id="panel1d-header"
- >
- <Grid
- container
- direction="row"
- justify="space-between"
- >
- <Grid item >
- <Typography
- style={{
- fontSize: "18px",
- textTransform: "uppercase",
- fontWeight: "500",
- }}
- >
- Filtros
- </Typography>
- </Grid>
- <Grid item>
- {
- props.onFiltering ? <CircularProgress size={24} color="secondary" /> : null
- }
- </Grid>
- </Grid>
- </ExpansionPanelSummary>
- </ExpansionPanel>
-
- <ExpansionPanel square>
- <ExpansionPanelSummary
- expandIcon={<ExpandMoreIcon />}
-
- aria-controls="panel2d-content"
- id="panel2d-header"
- >
- <TesteTypography>Componentes Curriculares</TesteTypography>
- </ExpansionPanelSummary>
- <ExpansionPanelDetails>
- <div>
- <SearchEPCompCurriculum
- onChange={props.onChange}
- curriculumComponents={props.curriculumComponents}
- setCurriculum={props.setCurriculum}
+
+ return (
+ <MainPaper square elevation={4} contrast={props.contrast}>
+ <link
+ href="https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap"
+ rel="stylesheet"
/>
- </div>
- </ExpansionPanelDetails>
- </ExpansionPanel>
-
- <ExpansionPanel square>
- <ExpansionPanelSummary
- expandIcon={<ExpandMoreIcon />}
- aria-controls="panel3d-content"
- id="panel3d-header"
- >
- <Typography>Tipos de Recurso</Typography>
- </ExpansionPanelSummary>
- <ExpansionPanelDetails>
- <SearchEPTiposRec
- onChange={props.onChange}
- typeOfResources={props.typeOfResources}
- setTypeRes={props.setTypeRes}
- />
- </ExpansionPanelDetails>
- </ExpansionPanel>
-
- <ExpansionPanel square>
- <ExpansionPanelSummary
- aria-controls="panel4d-content"
- expandIcon={<ExpandMoreIcon />}
- id="panel4d-header"
- >
- <Typography>Etapas de Ensino</Typography>
- </ExpansionPanelSummary>
- <ExpansionPanelDetails>
- <SearchEPEtapasEns
- onChange={props.onChange}
- teachingStage={props.teachingStage}
- setTeachingStage={props.setTeachingStage}
- />
- </ExpansionPanelDetails>
- </ExpansionPanel>
-
- <ExpansionPanel square>
- <ExpansionPanelSummary
- aria-controls="panel5d-content"
- expandIcon={<ExpandMoreIcon />}
- id="panel5d-header"
- >
- <Typography>Idiomas</Typography>
- </ExpansionPanelSummary>
- <ExpansionPanelDetails>
- <SearchEPIdiomas
- onChange={props.onChange}
- languages={props.languages}
- setLanguages={props.setLanguages}
- />
- </ExpansionPanelDetails>
- </ExpansionPanel>
-
- <ExpansionPanel square>
- <ExpansionPanelSummary
- aria-controls="panel6d-content"
- expandIcon={<ExpandMoreIcon />}
- id="panel6d-header"
- >
- <Typography>Palavra-Chave</Typography>
- </ExpansionPanelSummary>
- <ExpansionPanelDetails>
- <TextField
- label="Palavra chave + enter "
- id="outlined-margin-dense"
- variant="outlined"
- onChange={e => HandleChangeText(e)}
- onKeyDown={e => onKeyPressed(e)}
- error={errorInKeyWord.state}
- helperText={errorInKeyWord.state ? errorInKeyWord.message : ""}
- />
- </ExpansionPanelDetails>
- </ExpansionPanel>
- </MainPaper>
- );
+ <ExpansionPanel square>
+ <ExpansionPanelSummary
+ aria-controls="panel1d-content"
+ id="panel1d-header"
+ style={props.contrast === "" ? {} : { backgroundColor: "black" }}
+ >
+ <Typography
+ style={props.contrast === "" ? {
+ fontSize: "18px",
+ textTransform: "uppercase",
+ fontWeight: "500",
+ } : {
+ fontSize: "18px",
+ textTransform: "uppercase",
+ fontWeight: "500",
+ color: "white"
+ }}
+ >
+ Filtros
+ </Typography>
+ </ExpansionPanelSummary>
+ </ExpansionPanel>
+
+ <ExpansionPanel square>
+ <ExpansionPanelSummary
+ expandIcon={<ExpandMoreIcon style={props.contrast === "" ? {} : { color: "white" }} />}
+ style={props.contrast === "" ? {} : { backgroundColor: "black" }}
+ aria-controls="panel2d-content"
+ id="panel2d-header"
+ >
+ <Typography style={props.contrast === "" ? {} : { color: "white" }}>Componentes Curriculares</Typography>
+ </ExpansionPanelSummary>
+ <ExpansionPanelDetails style={props.contrast === "" ? {} : { backgroundColor: "black" }}>
+ <SearchEPCompCurriculum
+ contrast={props.contrast}
+ curriculumComponents={props.curriculumComponents}
+ setCurriculum={props.setCurriculum}
+ />
+ </ExpansionPanelDetails>
+ </ExpansionPanel>
+
+ <ExpansionPanel square>
+ <ExpansionPanelSummary
+ style={props.contrast === "" ? {} : { backgroundColor: "black" }}
+ expandIcon={<ExpandMoreIcon style={props.contrast === "" ? {} : { color: "white" }} />}
+ aria-controls="panel3d-content"
+ id="panel3d-header"
+ >
+ <Typography style={props.contrast === "" ? {} : { color: "white" }}>Tipos de Recurso</Typography>
+ </ExpansionPanelSummary>
+ <ExpansionPanelDetails style={props.contrast === "" ? {} : { backgroundColor: "black" }}>
+ <SearchEPTiposRec
+ contrast={props.contrast}
+ typeOfResources={props.typeOfResources}
+ setTypeRes={props.setTypeRes}
+ />
+ </ExpansionPanelDetails>
+ </ExpansionPanel>
+
+ <ExpansionPanel square>
+ <ExpansionPanelSummary
+ style={props.contrast === "" ? {} : { backgroundColor: "black" }}
+ aria-controls="panel4d-content"
+ expandIcon={<ExpandMoreIcon style={props.contrast === "" ? {} : { color: "white" }} />}
+ id="panel4d-header"
+ >
+ <Typography style={props.contrast === "" ? {} : { color: "white" }}>Etapas de Ensino</Typography>
+ </ExpansionPanelSummary>
+ <ExpansionPanelDetails style={props.contrast === "" ? {} : { backgroundColor: "black" }}>
+ <SearchEPEtapasEns
+ contrast={props.contrast}
+ teachingStage={props.teachingStage}
+ setTeachingStage={props.setTeachingStage}
+ />
+ </ExpansionPanelDetails>
+ </ExpansionPanel>
+
+ <ExpansionPanel square>
+ <ExpansionPanelSummary
+ style={props.contrast === "" ? {} : { backgroundColor: "black" }}
+ aria-controls="panel5d-content"
+ expandIcon={<ExpandMoreIcon style={props.contrast === "" ? {} : { color: "white" }} />}
+ id="panel5d-header"
+ >
+ <Typography style={props.contrast === "" ? {} : { color: "white" }}>Idiomas</Typography>
+ </ExpansionPanelSummary>
+ <ExpansionPanelDetails style={props.contrast === "" ? {} : { backgroundColor: "black" }}>
+ <SearchEPIdiomas
+ contrast={props.contrast}
+ languages={props.languages}
+ setLanguages={props.setLanguages}
+ />
+ </ExpansionPanelDetails>
+ </ExpansionPanel>
+
+ <ExpansionPanel square>
+ <ExpansionPanelSummary
+ style={props.contrast === "" ? {} : { backgroundColor: "black", borderBottom: "1px solid white" }}
+ aria-controls="panel6d-content"
+ expandIcon={<ExpandMoreIcon style={props.contrast === "" ? {} : { color: "white" }} />}
+ id="panel6d-header"
+ >
+ <Typography style={props.contrast === "" ? {} : { color: "white" }}>Palavra-Chave</Typography>
+ </ExpansionPanelSummary>
+ <ExpansionPanelDetails style={props.contrast === "" ? {} : { backgroundColor: "black" }}>
+ <FormInput
+ contrast={props.contrast}
+ placeholder="Palavra chave + enter "
+ id="outlined-margin-dense"
+ variant="outlined"
+ handleChange={e => HandleChangeText(e)}
+ onKeyDown={e => onKeyPressed(e)}
+ error={errorInKeyWord.state}
+ helperText={errorInKeyWord.state ? errorInKeyWord.message : ""}
+ />
+ </ExpansionPanelDetails>
+ </ExpansionPanel>
+ </MainPaper>
+ );
}
const MainPaper = styled(Paper)`
- /* height: 150px; */
- text-align: center;
- background-color: #fff;
- margin-top: 5px;
- margin-bottom: 30px;
- color: #666;
- .textInfo{
- text-align: start;
- }
+ text-align: center;
+ margin-top: 5px;
+ margin-bottom: 30px;
+ color: #666;
+
+ .textInfo{
+ text-align: start;
+ }
`;
diff --git a/src/Components/SearchExpansionPanel/SesrchEPEtapasEns.js b/src/Components/SearchExpansionPanel/SesrchEPEtapasEns.js
index 632009ae..e5c88bad 100644
--- a/src/Components/SearchExpansionPanel/SesrchEPEtapasEns.js
+++ b/src/Components/SearchExpansionPanel/SesrchEPEtapasEns.js
@@ -1,61 +1,52 @@
import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
-import List from "@material-ui/core/List";
-import ListItem from "@material-ui/core/ListItem";
-import ListItemIcon from "@material-ui/core/ListItemIcon";
-import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
-import ListItemText from "@material-ui/core/ListItemText";
+import { withStyles } from '@material-ui/core/styles';
import Checkbox from "@material-ui/core/Checkbox";
-import IconButton from "@material-ui/core/IconButton";
+import { yellow, orange } from "@material-ui/core/colors";
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormGroup from '@material-ui/core/FormGroup';
-const useStyles = makeStyles(theme => ({
+const OrangeCheckBox = withStyles({
root: {
- width: "100%",
- maxWidth: 360,
- backgroundColor: theme.palette.background.paper,
- color: "#666"
- }
-}));
+ color: orange[400],
+ '&$checked': {
+ color: orange[600],
+ },
+ },
+ checked: {},
+})((props) => <Checkbox color="default" {...props} />);
-export default function SearchEPEtapasEns({ teachingStage, setTeachingStage }) {
- const classes = useStyles();
+const ContrastCheckBox = withStyles({
+ root: {
+ color: yellow[400],
+ '&$checked': {
+ color: yellow[600],
+ },
+ },
+ checked: {},
+})((props) => <Checkbox color="default" {...props} />);
+
+export default function SearchEPCompCurriculum({ teachingStage, setTeachingStage, contrast }) {
- const handleToggle = (index) => () => {
- const newTypeTeachingStage = [...teachingStage];
- newTypeTeachingStage[index].isChecked = !newTypeTeachingStage[index].isChecked
- setTeachingStage(newTypeTeachingStage);
+ const handleChange = (event) => {
+ const index = event.target.name;
+ const newCurriculumComponents = [...teachingStage];
+ newCurriculumComponents[index].isChecked = !newCurriculumComponents[index].isChecked
+ setTeachingStage(newCurriculumComponents);
};
if (teachingStage)
return (
- <List className={classes.root}>
- {teachingStage.map((item, index) => {
- const labelId = `checkbox-list-label-${item.value}`;
-
- return (
- <ListItem
+ <FormGroup row>
+ {
+ teachingStage.map((item, index) => {
+ return <FormControlLabel
+ name={index}
key={item.exemplo}
- role={undefined}
- dense
- button
- onClick={handleToggle(index)}
- >
- <ListItemIcon>
- <Checkbox
- edge="start"
- checked={item.isChecked}
- tabIndex={-1}
- disableRipple
- inputProps={{ "aria-labelledby": labelId }}
- />
- </ListItemIcon>
- <ListItemText id={labelId} primary={item.exemplo} />
- <ListItemSecondaryAction>
- <IconButton edge="end" aria-label="comments"></IconButton>
- </ListItemSecondaryAction>
- </ListItem>
- );
- })}
- </List>
- );
+ control={contrast === "" ? <OrangeCheckBox checked={item.isChecked} onChange={handleChange} /> : <ContrastCheckBox checked={item.isChecked} onChange={handleChange} />}
+ label={<span style={contrast === "" ? {} : { color: "yellow", textDecoration: "underline" }}>{item.exemplo}</span>}
+ />
+ })
+ }
+ </FormGroup>
+ )
}
diff --git a/src/Components/SearchPageComponents/CollectionTemplate.js b/src/Components/SearchPageComponents/CollectionTemplate.js
index d75c13a4..b2038c24 100644
--- a/src/Components/SearchPageComponents/CollectionTemplate.js
+++ b/src/Components/SearchPageComponents/CollectionTemplate.js
@@ -9,118 +9,134 @@ import ArrowBackIcon from '@material-ui/icons/ArrowBack';
import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
//Image Import
-import { ColecaoVazia } from "ImportImages.js";
+import { ColecaoVazia } from "ImportImages.js";
-export default function ResourceTemplate({ isLoading, resources, totalResources, currPage, handlePreviousPage, handleNextPage }) {
- const topRef = React.useRef();
- const totalPages = parseInt(totalResources) === 0 ? 0 : Math.ceil(totalResources / 12) - 1; //Dividing by 12 because i want to cath total pages, and results per page is 12
+export default function ResourceTemplate({ isLoading, resources, totalResources, currPage, handlePreviousPage, handleNextPage, contrast }) {
+ const topRef = React.useRef();
+ const totalPages = parseInt(totalResources) === 0 ? 0 : Math.ceil(totalResources / 12) - 1; //Dividing by 12 because i want to cath total pages, and results per page is 12
- useEffect(() => {
- topRef.current.scrollIntoView()
- }, [isLoading])
+ useEffect(() => {
+ topRef.current.scrollIntoView()
+ }, [isLoading])
- return (
- <ResourcePaper elevation={4} square>
- <div ref={topRef} />
- <Title>
- Coleções encontradas ({totalResources})
- </Title>
- {
- isLoading ?
- <LoadingSpinner text='Carregando Coleções...' />
- :
- <Grid container justify='center' alignItems='center' spacing={3}>
- {
- resources.length >= 1 ?
- resources.map((card) => {
- return <Grid item key={new Date().toISOString() + card.id} >
- <CollectionCardFunction
- name={card.name}
- tags={card.tags}
- rating={card.review_average}
- id={card.id}
- author={card.owner ? card.owner.name : ""}
- description={card.description}
- thumbnails={card.items_thumbnails}
- avatar={card.owner ? card.owner.avatar : ""}
- likeCount={card.likes_count}
- followed={card.followed}
- liked={card.liked}
- collections={card.collection_items}
- authorID={card.owner.id}
- />
- </Grid>
- })
- :
- <NoContentDiv>
- <h3>
- Desculpe, não há dados nessa página.
- </h3>
- <img src={ColecaoVazia} alt='No cards' />
- </NoContentDiv>
- }
- </Grid>
- }
- {
- !isLoading &&
- <Grid container direction='row' alignItems='center' justify='center' spacing={3}>
- <Grid item>
- <StyledIconButton elevation={4} disabled={currPage === 0}>
- <IconButton onClick={handlePreviousPage} disabled={currPage === 0}>
- <ArrowBackIcon className='icon' />
- </IconButton>
- </StyledIconButton>
- </Grid>
- <Grid item>
- <ActualPage>
- {currPage}
- </ActualPage>...{totalPages}
- </Grid>
- <Grid item>
- <StyledIconButton elevation={4} disabled={currPage === totalPages}>
- <IconButton onClick={handleNextPage} disabled={currPage === totalPages}>
- <ArrowForwardIcon className='icon' />
- </IconButton>
- </StyledIconButton>
- </Grid>
- </Grid>
- }
- </ResourcePaper>
- )
+ return (
+ <ResourcePaper elevation={4} square contrast={contrast}>
+ <div ref={topRef} />
+ <div className="main">
+ <Title contrast={contrast}>
+ Coleções encontradas ({totalResources})
+ </Title>
+ {
+ isLoading ?
+ <LoadingSpinner contrast={contrast} text='Carregando Coleções...' />
+ :
+ <Grid container justify='center' alignItems='center' spacing={3}>
+ {
+ resources.length >= 1 ?
+ resources.map((card) => {
+ return (
+ <Grid item key={new Date().toISOString() + card.id} >
+ <CollectionCardFunction
+ contrast={contrast}
+ name={card.name}
+ tags={card.tags}
+ rating={card.review_average}
+ id={card.id}
+ author={card.owner ? card.owner.name : ""}
+ description={card.description}
+ thumbnails={card.items_thumbnails}
+ avatar={card.owner ? card.owner.avatar : ""}
+ likeCount={card.likes_count}
+ followed={card.followed}
+ liked={card.liked}
+ collections={card.collection_items}
+ authorID={card.owner.id}
+ />
+ </Grid>
+ )
+ })
+ :
+ <NoContentDiv contrast={contrast}>
+ <h3>
+ Desculpe, não há dados nessa página.
+ </h3>
+ <img src={ColecaoVazia} alt='No cards' />
+ </NoContentDiv>
+ }
+ </Grid>
+ }
+ {
+ !isLoading &&
+ <Grid container direction='row' alignItems='center' justify='center' spacing={3}>
+ <Grid item>
+ <StyledIconButton contrast={contrast} elevation={4} disabled={currPage === 0}>
+ <IconButton onClick={handlePreviousPage} disabled={currPage === 0}>
+ <ArrowBackIcon className='icon' />
+ </IconButton>
+ </StyledIconButton>
+ </Grid>
+ <Grid item>
+ <ActualPage contrast={contrast}>
+ {currPage + 1}
+ </ActualPage>
+ <TotalPages contrast={contrast}>
+ ...{totalPages + 1}
+ </TotalPages>
+ </Grid>
+ <Grid item>
+ <StyledIconButton contrast={contrast} elevation={4} disabled={currPage === totalPages}>
+ <IconButton onClick={handleNextPage} disabled={currPage === totalPages}>
+ <ArrowForwardIcon className='icon' />
+ </IconButton>
+ </StyledIconButton>
+ </Grid>
+ </Grid>
+ }
+ </div >
+ </ResourcePaper >
+ )
};
const Title = styled.h4`
- text-transform: uppercase;
- font-weight: 500;
- text-align: left;
- color: #673ab7;
+ text-transform: uppercase;
+ font-weight: 500;
+ text-align: left;
+ color: ${props => props.contrast === "" ? "#673ab7" : "white"};
`
const NoContentDiv = styled.div`
- >h3{
- color: #673ab7;
- text-align: center;
- }
+ h3{
+ color: ${props => props.contrast === "" ? "#673ab7" : "white"};
+ text-align: center;
+ }
`
const ActualPage = styled.span`
- color: #673ab7;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+`
+const TotalPages = styled.span`
+ color: ${props => props.contrast === "" ? "#666" : "white"};
`
const StyledIconButton = styled(Paper)`
- border-radius: 50% !important;
- background-color: ${props => props.disabled ? "#666" : "#673ab7"} !important;
- .icon{
- color: ${props => props.disabled ? "#d4d4d4" : "white"};
- }
+ border-radius: 50% !important;
+ background-color: ${props => props.contrast === "" ? props.disabled ? "#666" : "#673ab7" : "black"} !important;
+ .icon{
+ color: ${props => props.contrast === "" ? "white": props.disabled ? "white" : "yellow"} !important;
+ }
+ border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
`
const ResourcePaper = styled(Paper)`
- /* height: 150px; */
- text-align: center;
- background-color: #fff;
- margin-top: 5px;
- margin-bottom: 30px;
- padding: 0.5em 1em;
- color: #666;
- .textInfo{
- text-align: start;
- }
+ /* height: 150px; */
+ text-align: center;
+ margin-top: 5px;
+ margin-bottom: 30px;
+ border: ${props => props.contrast === "" ? 0 : "1px solid white"};
+
+ .main{
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ padding: 0.5em 1em;
+ }
+
+ .textInfo{
+ text-align: start;
+ }
`;
\ No newline at end of file
diff --git a/src/Components/SearchPageComponents/Error.js b/src/Components/SearchPageComponents/Error.js
index 7cb9d98c..523bae93 100644
--- a/src/Components/SearchPageComponents/Error.js
+++ b/src/Components/SearchPageComponents/Error.js
@@ -2,29 +2,32 @@ import React from 'react';
import styled from 'styled-components';
import Paper from '@material-ui/core/Paper';
-export default function Error() {
- return <ResourcePaper square elevation={4}>
- <Title>
- Houve um erro durante a obtenção de dados :(
- </Title>
+export default function Error({ contrast }) {
+ return <ResourcePaper square elevation={4} contrast={contrast}>
+ <div className="div">
+ <Title contrast={contrast}>
+ Houve um erro durante a obtenção de dados :(
+ </Title>
+ </div>
</ResourcePaper>
}
const ResourcePaper = styled(Paper)`
- /* height: 150px; */
+ border: ${props => props.contrast === "" ? 0 : "1px solid white"};
text-align: center;
- background-color: #fff;
- margin-top: 5px;
- margin-bottom: 30px;
- padding: 0.5em 1em;
color: #666;
width: 100%;
+
+ .div{
+ padding: 0.5em 1em;
+ background: ${props => props.contrast === "" ? "" : "black"};
+ }
`;
const Title = styled.h4`
text-transform: uppercase;
font-weight: 500;
text-align: left;
- color: #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
text-align: center;
`
\ No newline at end of file
diff --git a/src/Components/SearchPageComponents/FilterSummary.js b/src/Components/SearchPageComponents/FilterSummary.js
index 9cc1a9ae..3c0790bf 100644
--- a/src/Components/SearchPageComponents/FilterSummary.js
+++ b/src/Components/SearchPageComponents/FilterSummary.js
@@ -3,128 +3,160 @@ import styled from 'styled-components';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import Chip from '@material-ui/core/Chip';
-import Button from "@material-ui/core/Button";
-export default function FilterSummary
- ({ curriculumComponents, typeOfResources, languages, teachingStage, tag, onButtonClicked }) {
- return (
- <FilterSummaryPaper square elevation={4}>
- <h3 className="title">
- Resumo dos filtros selecionados
- </h3>
- <Grid container direction='column' spacing={2}>
- <Grid item>
- <Grid container direction='row' spacing={1} alignItems='center'>
- <Grid item>
- Componentes curriculares:
- </Grid>
- <Grid item>
- {
- curriculumComponents.map((item) => {
- return (
- item.isChecked &&
- <StyledChip key={new Date().toISOString() + item.value} size="small" label={item.exemplo} />
- );
+export default function FilterSummary({ curriculumComponents, typeOfResources, languages, teachingStage, tag, onButtonClicked, contrast }) {
+ return (
+ <FilterSummaryPaper square elevation={4} contrast={contrast}>
+ <div className="main">
+ <h3 className="title">
+ Resumo dos filtros selecionados
+ </h3>
+ <Grid container direction='column' spacing={2}>
+ <Grid item>
+ <Grid container direction='row' spacing={1} alignItems='center'>
+ <Grid item className="subtitle">
+ Componentes curriculares:
+ </Grid>
+ <Grid item>
+ {
+ curriculumComponents.map((item) => {
+ return (
+ item.isChecked &&
+ <StyledChip contrast={contrast} key={new Date().toISOString() + item.value} size="small" label={item.exemplo} />
+ );
- })
- }
- </Grid>
- </Grid>
- </Grid>
- <Grid item>
- <Grid container direction='row' spacing={1} alignItems='center'>
- <Grid item>
- Tipos de recursos:
- </Grid>
- <Grid item>
- {
- typeOfResources.map((item) => {
- return (
- item.isChecked &&
- <StyledChip key={new Date().toISOString() + item.value} size="small" label={item.exemplo} />
- );
- })
- }
- </Grid>
- </Grid>
- </Grid>
- <Grid item>
- <Grid container direction='row' spacing={1} alignItems='center'>
- <Grid item>
- Etapas de ensino:
- </Grid>
- <Grid item>
- {
- teachingStage.map((item) => {
- return (
- item.isChecked &&
- <StyledChip key={new Date().toISOString() + item.value} size="small" label={item.exemplo} />
- );
- })
- }
- </Grid>
- </Grid>
- </Grid>
- <Grid item>
- <Grid container direction='row' spacing={1} alignItems='center'>
- <Grid item>
- Idiomas:
- </Grid>
- <Grid item>
- {
- languages.map((item) => {
- return (
- item.isChecked &&
- <StyledChip key={new Date().toISOString() + item.value} size="small" label={item.exemplo} />
- );
- })
- }
- </Grid>
- </Grid>
- </Grid>
- <Grid item>
- <Grid container direction='row' spacing={1} alignItems='center'>
- <Grid item>
- Palavra chave:
- </Grid>
- <Grid item>
- {
- tag &&
- <StyledChip size="small" label={tag} />
- }
- </Grid>
- </Grid>
- </Grid>
- <Grid item>
- <StyledButton variant="contained" onClick={onButtonClicked}>
- <span className="text">
- Aplicar filtro
- </span>
- </StyledButton>
- </Grid>
- </Grid>
- </FilterSummaryPaper>
- )
+ })
+ }
+ </Grid>
+ </Grid>
+ </Grid>
+ <Grid item>
+ <Grid container direction='row' spacing={1} alignItems='center'>
+ <Grid item className="subtitle">
+ Tipos de recursos:
+ </Grid>
+ <Grid item>
+ {
+ typeOfResources.map((item) => {
+ return (
+ item.isChecked &&
+ <StyledChip contrast={contrast} key={new Date().toISOString() + item.value} size="small" label={item.exemplo} />
+ );
+ })
+ }
+ </Grid>
+ </Grid>
+ </Grid>
+ <Grid item>
+ <Grid container direction='row' spacing={1} alignItems='center'>
+ <Grid item className="subtitle">
+ Etapas de ensino:
+ </Grid>
+ <Grid item>
+ {
+ teachingStage.map((item) => {
+ return (
+ item.isChecked &&
+ <StyledChip contrast={contrast} key={new Date().toISOString() + item.value} size="small" label={item.exemplo} />
+ );
+ })
+ }
+ </Grid>
+ </Grid>
+ </Grid>
+ <Grid item>
+ <Grid container direction='row' spacing={1} alignItems='center'>
+ <Grid item className="subtitle">
+ Idiomas:
+ </Grid>
+ <Grid item>
+ {
+ languages.map((item) => {
+ return (
+ item.isChecked &&
+ <StyledChip contrast={contrast} key={new Date().toISOString() + item.value} size="small" label={item.exemplo} />
+ );
+ })
+ }
+ </Grid>
+ </Grid>
+ </Grid>
+ <Grid item>
+ <Grid container direction='row' spacing={1} alignItems='center'>
+ <Grid item className="subtitle">
+ Palavra chave:
+ </Grid>
+ <Grid item>
+ {
+ tag &&
+ <StyledChip contrast={contrast} size="small" label={tag} />
+ }
+ </Grid>
+ </Grid>
+ </Grid>
+ <Grid item>
+ <Button contrast={contrast} variant="contained" onClick={onButtonClicked}>
+ Aplicar filtro
+ </Button>
+ </Grid>
+ </Grid>
+ </div>
+ </FilterSummaryPaper>
+ )
}
const FilterSummaryPaper = styled(Paper)`
- background-color: #fff;
- margin-top: 5px;
- margin-bottom: 30px;
- padding: 0.5em 1em;
- .title{
- text-transform: uppercase;
- color: #666;
- font-weight: 500;
- }
+ margin-top: 5px;
+ margin-bottom: 30px;
+ border: ${props => props.contrast === "" ? 0 : "1px solid white"};
+
+ .title{
+ text-transform: uppercase;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ font-weight: 500;
+ }
+
+ .main{
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ padding: 0.5em 1em;
+ }
+
+ .subtitle{
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
`
-const StyledButton = styled(Button)`
- background-color: #ff7f00 !important;
- .text{
- color: white;
- }
+const Button = styled.button`
+ background: ${props => props.contrast === "" ? "#ff7f00" : "black"};
+ text-transform: uppercase;
+ color: ${props => props.contrast === "" ? "white" : "yellow"};
+ font-family: Roboto,sans-serif;
+ font-size: 14px;
+ font-weight: 500;
+ height: 36px;
+ border-radius: 3px;
+ border: ${props => props.contrast === "" ? 0 : "1px solid white"};
+ box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
+ display: inline-block;
+ position: relative;
+ cursor: pointer;
+ min-height: 36px;
+ min-width: 88px;
+ line-height: 36px;
+ vertical-align: middle;
+ -webkit-box-align: center;
+ outline: none;
+ text-align: center;
+ padding: 0em 1em;
+ white-space: nowrap;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ :active{
+ transform: translateY(2px);
+ }
`
const StyledChip = styled(Chip)`
- margin: 0.2em
+ margin: 0.2em;
+ background-color: ${props => props.contrast === "" ? 0 : "black !important"};
+ border: ${props => props.contrast === "" ? 0 : "1px solid white !important"};
+ color: ${props => props.contrast === "" ? 0 : "white !important"};
`
diff --git a/src/Components/SearchPageComponents/HeaderFilters.js b/src/Components/SearchPageComponents/HeaderFilters.js
index 21bcc78c..b9ae795d 100644
--- a/src/Components/SearchPageComponents/HeaderFilters.js
+++ b/src/Components/SearchPageComponents/HeaderFilters.js
@@ -5,128 +5,158 @@ import Grid from '@material-ui/core/Grid';
import TextField from '@material-ui/core/TextField';
import MenuItem from '@material-ui/core/MenuItem';
-export default function HeaderFilters({ options, orders, currOption, currOrder, handleChangeOption, handleChangeOrder }) {
+export default function HeaderFilters({ options, contrast, orders, currOption, currOrder, handleChangeOption, handleChangeOrder }) {
+ if (currOption !== 'User')
+ return (
+ <FiltersPaper contrast={contrast} elevation={4} square>
+ <Grid className="gridStyle" container direction='row' alignItems='center'>
+ <Grid item xs={12} sm={6}>
+ <Grid container alignItems='center'>
+ <Grid item xs={12} md={2}>
+ <Label contrast={contrast}>
+ Buscar por:
+ </Label>
+ </Grid>
+ <Grid item xs={12} md={10}>
+ <StyledTextField
+ contrast={contrast}
+ select
+ fullWidth
+ value={currOption}
+ onChange={handleChangeOption}
+ variant="outlined"
+ >
+ {options.map((option) => (
+ <StyledMenuItem
+ contrast={contrast}
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ >
+ <span style={currOption === option.name ? { color: option.color, fontWeight: "500" } : { color: option.color, fontWeight: "lighter" }}>
+ {option.value}
+ </span>
+ </StyledMenuItem>
+ ))}
+ </StyledTextField>
+ </Grid>
+ </Grid>
+ </Grid>
- if (currOption !== 'User')
- return (
- <FiltersPaper elevation={4} square>
- <Grid container direction='row' spacing={2} alignItems='center'>
- <Grid item xs={12} sm={6}>
- <Grid container alignItems='center'>
- <Grid item xs={12} md={2}>
- <Label>
- Buscar por:
- </Label>
- </Grid>
- <Grid item xs={12} md={10}>
- <TextField
- select
- fullWidth
- value={currOption}
- onChange={handleChangeOption}
- variant="outlined"
- >
- {options.map((option) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- <span style={{ color: option.color }}>
- {option.value}
- </span>
- </MenuItem>
- ))}
- </TextField>
- </Grid>
- </Grid>
- </Grid>
-
- <Grid item xs={12} sm={6}>
- <Grid container alignItems='center'>
- <Grid item xs={12} md={2}>
- <Label>
- Ordenar por:
- </Label>
- </Grid>
- <Grid item xs={12} md={10}>
- <TextField
- select
- fullWidth
- value={currOrder}
- onChange={handleChangeOrder}
- variant="outlined"
- >
- {orders.map((option) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- {option.value}
- </MenuItem>
- ))}
- </TextField>
- </Grid>
- </Grid>
- </Grid>
- </Grid>
- </FiltersPaper>
- )
- else
- return (
- <FiltersPaper elevation={4} square>
- <Grid container direction='row' alignItems='center'>
- <Grid item xs={12}>
- <Grid container alignItems='center'>
- <Grid item xs={12} md={2}>
- <Label>
- Buscar por:
- </Label>
- </Grid>
- <Grid item xs={12} md={10}>
- <TextField
- select
- fullWidth
- value={currOption}
- onChange={handleChangeOption}
- variant="outlined"
- >
- {options.map((option) => (
- <MenuItem
- key={option.value}
- value={option.name}
- name={option.value}
- >
- <span style={{ color: option.color }}>
- {option.value}
- </span>
- </MenuItem>
- ))}
- </TextField>
- </Grid>
- </Grid>
- </Grid>
- </Grid>
- </FiltersPaper>
- )
+ <Grid item xs={12} sm={6}>
+ <Grid container alignItems='center'>
+ <Grid item xs={12} md={2}>
+ <Label contrast={contrast}>
+ Ordenar por:
+ </Label>
+ </Grid>
+ <Grid item xs={12} md={10}>
+ <StyledTextField
+ contrast={contrast}
+ select
+ fullWidth
+ value={currOrder}
+ onChange={handleChangeOrder}
+ variant="outlined"
+ >
+ {orders.map((option) => (
+ <StyledMenuItem
+ contrast={contrast}
+ color={option.color}
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ >
+ <span style={currOrder === option.name ? { color: option.color, fontWeight: "500" } : { color: option.color, fontWeight: "lighter" }}>
+ {option.value}
+ </span>
+ </StyledMenuItem>
+ ))}
+ </StyledTextField>
+ </Grid>
+ </Grid>
+ </Grid>
+ </Grid >
+ </FiltersPaper >
+ )
+ else
+ return (
+ <FiltersPaper contrast={contrast} elevation={4} square>
+ <Grid className="gridStyle" container direction='row' alignItems='center'>
+ <Grid item xs={12}>
+ <Grid container alignItems='center'>
+ <Grid item xs={12} md={2}>
+ <Label contrast={contrast}>
+ Buscar por:
+ </Label>
+ </Grid>
+ <Grid item xs={12} md={10}>
+ <StyledTextField
+ contrast={contrast}
+ select
+ fullWidth
+ value={currOption}
+ onChange={handleChangeOption}
+ variant="outlined"
+ >
+ {options.map((option) => (
+ <StyledMenuItem
+ contrast={contrast}
+ color={option.color}
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ >
+ <span style={currOption === option.name ? { color: option.color, fontWeight: "500" } : { color: option.color, fontWeight: "lighter" }}>
+ {option.value}
+ </span>
+ </StyledMenuItem>
+ ))}
+ </StyledTextField>
+ </Grid>
+ </Grid>
+ </Grid>
+ </Grid>
+ </FiltersPaper >
+ )
}
const Label = styled.p`
- text-align: center;
- font-weight: 600;
+ text-align: center;
+ font-weight: 600;
+ color: ${props => props.contrast === "" ? "" : "white"};
+`
+
+const StyledTextField = styled(TextField)`
+ .MuiOutlinedInput-root {
+ &.Mui-focused fieldset {
+ border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ }
+ fieldset {
+ border-color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+ }
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline yellow !important"};
`
+const StyledMenuItem = styled(MenuItem)`
+ background-color: ${props => props.contrast === "" ? "" : "black !important"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline yellow !important"};
+`
const FiltersPaper = styled(Paper)`
- /* height: 150px; */
- text-align: center;
- background-color: #fff;
- margin-top: 5px;
- margin-bottom: 30px;
- padding: 0.5em 1em;
- color: #666;
- .textInfo{
- text-align: start;
- }
+ text-align: center;
+ margin-top: 5px;
+ margin-bottom: 30px;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ border: ${props => props.contrast === "" ? 0 : "1px solid white"};
+
+ .textInfo{
+ text-align: start;
+ }
+
+ .gridStyle{
+ padding: 0.5em 1em;
+ background: ${props => props.contrast === "" ? "#fff" : "black"};
+ }
`;
\ No newline at end of file
diff --git a/src/Components/SearchPageComponents/ResourceTemplate.js b/src/Components/SearchPageComponents/ResourceTemplate.js
index 362bf17d..d5a0a226 100644
--- a/src/Components/SearchPageComponents/ResourceTemplate.js
+++ b/src/Components/SearchPageComponents/ResourceTemplate.js
@@ -9,118 +9,134 @@ import ArrowBackIcon from '@material-ui/icons/ArrowBack';
import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
//Image Import
-import { RecursoVazio } from "ImportImages.js";
+import { RecursoVazio } from "ImportImages.js";
-export default function ResourceTemplate({ isLoading, resources, totalResources, currPage, handlePreviousPage, handleNextPage }) {
- const totalPages = parseInt(totalResources) === 0 ? 0 : Math.ceil(totalResources / 12) - 1; //Dividing by 12 because i want to cath total pages, and results per page is 12
- const topRef = React.useRef();
+export default function ResourceTemplate({ isLoading, resources, totalResources, currPage, handlePreviousPage, handleNextPage, contrast }) {
+ const totalPages = parseInt(totalResources) === 0 ? 0 : Math.ceil(totalResources / 12) - 1; //Dividing by 12 because i want to cath total pages, and results per page is 12
+ const topRef = React.useRef();
- useEffect(() => {
- topRef.current.scrollIntoView();
- }, [isLoading])
+ useEffect(() => {
+ topRef.current.scrollIntoView();
+ }, [isLoading])
- return (
- <ResourcePaper elevation={4} square>
- <div ref={topRef} />
- <Title>
- Recursos encontrados ({totalResources})
- </Title>
- {
- isLoading ?
- <LoadingSpinner text='Carregando recursos...' />
- :
- <Grid container justify='center' alignItems='center' spacing={3}>
- {
- resources.length >= 1 ?
- resources.map((card) => {
- return <Grid item key={new Date().toISOString() + card.id} >
- <ResourceCardFunction
- avatar={card.publisher ? card.publisher.avatar : ""}
- id={card.id}
- thumbnail={card.thumbnail}
- type={card.object_type ? card.object_type : "Outros"}
- title={card.name}
- published={card.state === "published" ? true : false}
- likeCount={card.likes_count}
- liked={card.liked}
- rating={card.review_average}
- author={card.author}
- tags={card.educational_stages}
- href={"/recurso/" + card.id}
- downloadableLink={card.default_attachment_location}
- />
- </Grid>
- })
- :
- <NoContentDiv>
- <h3>
- Desculpe, não há dados nessa página.
- </h3>
- <img src={RecursoVazio} alt='No cards' />
- </NoContentDiv>
- }
- </Grid>
- }
- {
- !isLoading &&
- <Grid container direction='row' alignItems='center' justify='center' spacing={3}>
- <Grid item>
- <StyledIconButton elevation={4} disabled={currPage === 0}>
- <IconButton onClick={handlePreviousPage} disabled={currPage === 0}>
- <ArrowBackIcon className='icon' />
- </IconButton>
- </StyledIconButton>
- </Grid>
- <Grid item>
- <ActualPage>
- {currPage}
- </ActualPage>...{totalPages}
- </Grid>
- <Grid item>
- <StyledIconButton elevation={4} disabled={currPage === totalPages}>
- <IconButton onClick={handleNextPage} disabled={currPage === totalPages}>
- <ArrowForwardIcon className='icon' />
- </IconButton>
- </StyledIconButton>
- </Grid>
- </Grid>
- }
- </ResourcePaper>
- )
+ return (
+ <ResourcePaper elevation={4} square contrast={contrast}>
+ <div ref={topRef} />
+ <div className="main">
+ <Title contrast={contrast}>
+ Recursos encontrados ({totalResources})
+ </Title>
+ {
+ isLoading ?
+ <LoadingSpinner text='Carregando recursos...' contrast={contrast} />
+ :
+ <Grid container justify='center' alignItems='center' spacing={3}>
+ {
+ resources.length >= 1 ?
+ resources.map((card) => {
+ return (
+ <Grid item key={new Date().toISOString() + card.id} >
+ <ResourceCardFunction
+ contrast={contrast}
+ avatar={card.publisher ? card.publisher.avatar : ""}
+ id={card.id}
+ thumbnail={card.thumbnail}
+ type={card.object_type ? card.object_type : "Outros"}
+ title={card.name}
+ published={card.state === "published" ? true : false}
+ likeCount={card.likes_count}
+ liked={card.liked}
+ rating={card.review_average}
+ author={card.author}
+ tags={card.tags}
+ href={"/recurso/" + card.id}
+ downloadableLink={card.default_attachment_location}
+ />
+ </Grid>
+ )
+ })
+ :
+ <NoContentDiv contrast={contrast}>
+ <h3>
+ Desculpe, não há dados nessa página.
+ </h3>
+ <img src={RecursoVazio} alt='No cards' />
+ </NoContentDiv>
+ }
+ </Grid>
+ }
+ {
+ !isLoading &&
+ <Grid container direction='row' alignItems='center' justify='center' spacing={3}>
+ <Grid item>
+ <StyledIconButton contrast={contrast} elevation={4} disabled={currPage === 0}>
+ <IconButton onClick={handlePreviousPage} disabled={currPage === 0}>
+ <ArrowBackIcon className='icon' />
+ </IconButton>
+ </StyledIconButton>
+ </Grid>
+ <Grid item>
+ <ActualPage contrast={contrast}>
+ {currPage + 1}
+ </ActualPage>
+ <TotalPages contrast={contrast}>
+ ...{totalPages + 1}
+ </TotalPages>
+ </Grid>
+ <Grid item>
+ <StyledIconButton contrast={contrast} elevation={4} disabled={currPage === totalPages}>
+ <IconButton onClick={handleNextPage} disabled={currPage === totalPages}>
+ <ArrowForwardIcon className='icon' />
+ </IconButton>
+ </StyledIconButton>
+ </Grid>
+ </Grid>
+ }
+ </div>
+ </ResourcePaper>
+ )
};
const Title = styled.h4`
- text-transform: uppercase;
- font-weight: 500;
- text-align: left;
- color: #ff7f00;
+ text-transform: uppercase;
+ font-weight: 500;
+ text-align: left;
+ color: ${props => props.contrast === "" ? "#ff7f00" : "white"};
`
const NoContentDiv = styled.div`
- >h3{
- color: #ff7f00;
- text-align: center;
- }
+ h3{
+ color: ${props => props.contrast === "" ? "#ff7f00" : "white"};
+ text-align: center;
+ }
`
const ActualPage = styled.span`
- color: #ff7f00;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+`
+const TotalPages = styled.span`
+ color: ${props => props.contrast === "" ? "#666" : "white"};
`
const StyledIconButton = styled(Paper)`
- border-radius: 50% !important;
- background-color: ${props => props.disabled ? "#666" : "#ff7f00"} !important;
- .icon{
- color: ${props => props.disabled ? "#d4d4d4" : "white"};
- }
+ border-radius: 50% !important;
+ background-color: ${props => props.contrast === "" ? props.disabled ? "#666" : "orange" : "black"} !important;
+ .icon{
+ color: ${props => props.contrast === "" ? "white": props.disabled ? "white" : "yellow"} !important;
+ }
+ border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
`
const ResourcePaper = styled(Paper)`
- /* height: 150px; */
- text-align: center;
- background-color: #fff;
- margin-top: 5px;
- margin-bottom: 30px;
- padding: 0.5em 1em;
- color: #666;
- .textInfo{
- text-align: start;
- }
+ /* height: 150px; */
+ text-align: center;
+ margin-top: 5px;
+ margin-bottom: 30px;
+ border: ${props => props.contrast === "" ? 0 : "1px solid white"};
+
+ .main{
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ padding: 0.5em 1em;
+ }
+
+ .textInfo{
+ text-align: start;
+ }
`;
\ No newline at end of file
diff --git a/src/Components/SearchPageComponents/UserTemplate.js b/src/Components/SearchPageComponents/UserTemplate.js
index 991a31d3..cd61d982 100644
--- a/src/Components/SearchPageComponents/UserTemplate.js
+++ b/src/Components/SearchPageComponents/UserTemplate.js
@@ -9,7 +9,7 @@ import ArrowBackIcon from '@material-ui/icons/ArrowBack';
import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
import { apiDomain } from '../../env';
-export default function ResourceTemplate({ isLoading, resources, totalResources, currPage, handlePreviousPage, handleNextPage }) {
+export default function ResourceTemplate({ isLoading, resources, totalResources, currPage, handlePreviousPage, handleNextPage, contrast }) {
const totalPages = parseInt(totalResources) === 0 ? 0 : Math.ceil(totalResources / 12) - 1; //Dividing by 12 because i want to cath total pages, and results per page is 12
const topRef = React.useRef();
@@ -18,66 +18,72 @@ export default function ResourceTemplate({ isLoading, resources, totalResources,
}, [isLoading])
return (
- <ResourcePaper elevation={4} square>
+ <ResourcePaper elevation={4} square contrast={contrast}>
<div ref={topRef} />
- <Title>
- Usuários encontrados ({totalResources})
- </Title>
- {
- isLoading ?
- <LoadingSpinner text='Carregando recursos...' />
- :
- <Grid container justify='center' alignItems='center' spacing={3}>
- {
- resources.length >= 1 ?
- resources.map((card) => {
- return <Grid item key={new Date().toISOString() + card.id} >
- <ContactCard
- name={card.name}
- avatar={card.avatar ? apiDomain + card.avatar : null}
- cover={card.cover ? apiDomain + card.cover : null}
- numCollections={card.collections_count}
- numLearningObjects={card.learning_objects_count}
- follow_count={card.follows_count}
- followed={card.followed || null}
- followerID={card.id}
- href={'/usuario-publico/' + card.id}
- />
- </Grid>
- })
- :
- <NoContentDiv>
- <h3>
- Desculpe, não há dados nessa página.
+ <div className="main">
+ <Title contrast={contrast}>
+ Usuários encontrados ({totalResources})
+ </Title>
+ {
+ isLoading ?
+ <LoadingSpinner contrast={contrast} text='Carregando recursos...' />
+ :
+ <Grid container justify='center' alignItems='center' spacing={3}>
+ {
+ resources.length >= 1 ?
+ resources.map((card) => {
+ return <Grid item key={new Date().toISOString() + card.id} >
+ <ContactCard
+ contrast={contrast}
+ name={card.name}
+ avatar={card.avatar ? apiDomain + card.avatar : null}
+ cover={card.cover ? apiDomain + card.cover : null}
+ numCollections={card.collections_count}
+ numLearningObjects={card.learning_objects_count}
+ follow_count={card.follows_count}
+ followed={card.followed || null}
+ followerID={card.id}
+ href={'/usuario-publico/' + card.id}
+ />
+ </Grid>
+ })
+ :
+ <NoContentDiv contrast={contrast}>
+ <h3>
+ Desculpe, não há dados nessa página.
</h3>
- </NoContentDiv>
- }
+ </NoContentDiv>
+ }
+ </Grid>
+ }
+ {
+ !isLoading &&
+ <Grid container direction='row' alignItems='center' justify='center' spacing={3}>
+ <Grid item>
+ <StyledIconButton contrast={contrast} elevation={4} disabled={currPage === 0}>
+ <IconButton onClick={handlePreviousPage} disabled={currPage === 0}>
+ <ArrowBackIcon className='icon' />
+ </IconButton>
+ </StyledIconButton>
+ </Grid>
+ <Grid item>
+ <ActualPage contrast={contrast}>
+ {currPage + 1}
+ </ActualPage>
+ <TotalPages contrast={contrast}>
+ ...{totalPages + 1}
+ </TotalPages>
+ </Grid>
+ <Grid item>
+ <StyledIconButton contrast={contrast} elevation={4} disabled={currPage === totalPages}>
+ <IconButton onClick={handleNextPage} disabled={currPage === totalPages}>
+ <ArrowForwardIcon className='icon' />
+ </IconButton>
+ </StyledIconButton>
+ </Grid>
</Grid>
- }
- {
- !isLoading &&
- <Grid container direction='row' alignItems='center' justify='center' spacing={3}>
- <Grid item>
- <StyledIconButton elevation={4} disabled={currPage === 0}>
- <IconButton onClick={handlePreviousPage} disabled={currPage === 0}>
- <ArrowBackIcon className='icon' />
- </IconButton>
- </StyledIconButton>
- </Grid>
- <Grid item>
- <ActualPage>
- {currPage}
- </ActualPage>...{totalPages}
- </Grid>
- <Grid item>
- <StyledIconButton elevation={4} disabled={currPage === totalPages}>
- <IconButton onClick={handleNextPage} disabled={currPage === totalPages}>
- <ArrowForwardIcon className='icon' />
- </IconButton>
- </StyledIconButton>
- </Grid>
- </Grid>
- }
+ }
+ </div>
</ResourcePaper>
)
};
@@ -86,33 +92,41 @@ const Title = styled.h4`
text-transform: uppercase;
font-weight: 500;
text-align: left;
- color: #00bcd4;
+ color: ${props => props.contrast === "" ? "#00bcd4" : "white"};
`
const NoContentDiv = styled.div`
>h3{
- color: #00bcd4;
+ color: ${props => props.contrast === "" ? "#00bcd4" : "white"};
text-align: center;
}
`
const ActualPage = styled.span`
- color: #00bcd4;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+`
+const TotalPages = styled.span`
+ color: ${props => props.contrast === "" ? "#666" : "white"};
`
const StyledIconButton = styled(Paper)`
- border-radius: 50% !important;
- background-color: ${props => props.disabled ? "#666" : "#00bcd4"} !important;
- .icon{
- color: ${props => props.disabled ? "#d4d4d4" : "white"};
- }
+ border-radius: 50% !important;
+ background-color: ${props => props.contrast === "" ? props.disabled ? "#666" : "#00bcd4" : "black"} !important;
+ .icon{
+ color: ${props => props.contrast === "" ? "white": props.disabled ? "white" : "yellow"} !important;
+ }
+ border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
`
const ResourcePaper = styled(Paper)`
/* height: 150px; */
text-align: center;
- background-color: #fff;
margin-top: 5px;
margin-bottom: 30px;
- padding: 0.5em 1em;
- color: #666;
+ border: ${props => props.contrast === "" ? 0 : "1px solid white"};
+
+ .main{
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ padding: 0.5em 1em;
+ }
+
.textInfo{
text-align: start;
}
diff --git a/src/Components/SearchSectionFunction.js b/src/Components/SearchSectionFunction.js
index 7921c9ff..6362110e 100644
--- a/src/Components/SearchSectionFunction.js
+++ b/src/Components/SearchSectionFunction.js
@@ -16,81 +16,82 @@ 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';
import '../App.css';
import styled from 'styled-components'
// import SearchBar from './SearchBar';
-import {Row} from 'react-grid-system';
-import {MdInfoOutline} from "react-icons/md"
-import { FaRegPlayCircle} from "react-icons/fa";
+import { Row } from 'react-grid-system';
+import { MdInfoOutline } from "react-icons/md"
+import { FaRegPlayCircle } from "react-icons/fa";
import ModalVideoApresentacao from "./ModalVideoApresentacao.js"
-import {Link} from 'react-router-dom'
+import { Link } from 'react-router-dom'
import Grid from '@material-ui/core/Grid';
import HomeScreenSearchBar from './HomeScreenSearchBar'
+import { Store } from '../Store'
//Image Import
import { banner } from "ImportImages.js";
import { bannerMobile } from "ImportImages.js";
-export default function SearchSection (props) {
+export default function SearchSection(props) {
+ const { state } = useContext(Store)
const [modalOpen, handleModal] = useState(false)
- const toggleModal = () => {handleModal(!modalOpen)}
+ const toggleModal = () => { handleModal(!modalOpen) }
const WIDTH = window.innerWidth;
return (
<React.Fragment>
- <ModalVideoApresentacao open={modalOpen} handleClose={toggleModal}/>
- <Banner>
- <StyledGrid container direction="row" justify="center">
- <Grid item style={{paddingRight : "15px", paddingLeft : "15px", paddingBottom : "120px"}}>
- <div className="title">
- <h2>
- Plataforma MEC de Recursos Educacionais Digitais
- </h2>
- <h3>
- Encontre e compartilhe vÃdeos, animações e muitos outros Recursos
- </h3>
- </div>
- <HomeScreenSearchBar/>
- <div className="links">
- <Link to="/sobre">
- <MdInfoOutline size="24px" style={{verticalAlign: "middle", paddingRight : "5px"}}/>
- {WIDTH <= 501 ? ("SOBRE") : ("SOBRE A PLATAFORMA")}
- </Link>
- <span onClick={toggleModal} style={{cursor : "pointer"}}>
- <FaRegPlayCircle size="20px" style={{verticalAlign: "middle", paddingRight : "5px"}}/>
+ <ModalVideoApresentacao open={modalOpen} handleClose={toggleModal} />
+ <Banner contrast={state.contrast}>
+ <StyledGrid container direction="row" justify="center">
+ <Grid item style={{ paddingRight: "15px", paddingLeft: "15px", paddingBottom: "120px" }}>
+ <div className="title">
+ <h2>
+ Plataforma MEC de Recursos Educacionais Digitais
+ </h2>
+ <h3>
+ Encontre e compartilhe vÃdeos, animações e muitos outros Recursos
+ </h3>
+ </div>
+ <HomeScreenSearchBar />
+ <div className="links">
+ <Link to="/sobre">
+ <MdInfoOutline size="24px" style={{ verticalAlign: "middle", paddingRight: "5px", color: "white" }} />
+ {WIDTH <= 501 ? <span className={`${state.contrast}LinkColor`}>SOBRE</span> : <span className={`${state.contrast}LinkColor`}>SOBRE A PLATAFORMA</span>}
+ </Link>
+ <span onClick={toggleModal} className={`${state.contrast}LinkColor`} style={{ cursor: "pointer" }}>
+ <FaRegPlayCircle size="20px" style={{ verticalAlign: "middle", paddingRight: "5px", color: "white" }} />
{WIDTH <= 501 ? ("VÃDEO") : ("VÃDEO DE APRESENTAÇÃO")}
- </span>
- </div>
- </Grid>
- </StyledGrid>
- {
- WIDTH > 501 &&
- <Row justify="center" style={{marginLeft:0, marginRight:0}}>
- <button className="recurso"
- onClick={() => {props.function("Recursos")}}>
- Recursos Educacionais Digitais
- </button>
-
- <button className="material-formacao"
- onClick={() => {props.function("Materiais")}}>
- Materiais de Formação
- </button>
-
- <button className="colecao"
- onClick={() => {props.function("Colecoes")}}>
- Coleções dos Usuários
- </button>
- </Row>
- }
- </Banner>
- </React.Fragment>
+ </span>
+ </div>
+ </Grid>
+ </StyledGrid>
+ {
+ WIDTH > 501 &&
+ <Row justify="center" style={{ marginLeft: 0, marginRight: 0 }}>
+ <button className="recurso"
+ onClick={() => { props.function("Recursos") }}>
+ Recursos Educacionais Digitais
+ </button>
+
+ <button className="material-formacao"
+ onClick={() => { props.function("Materiais") }}>
+ Materiais de Formação
+ </button>
+
+ <button className="colecao"
+ onClick={() => { props.function("Colecoes") }}>
+ Coleções dos Usuários
+ </button>
+ </Row>
+ }
+ </Banner>
+ </React.Fragment>
)
}
const StyledGrid = styled(Grid)`
- margin-right : auto !important;
- margin-left auto !important;
+ margin: 0 auto !important;
color : #fff !important;
text-align : center !important;
`
@@ -147,7 +148,9 @@ const Banner = styled.div`
line-height: 1.42857143;
width: 25%;
margin-top: 1%;
- color: white;
+ color: ${props => props.contrast === "" ? "white" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"};
padding: 1.2%;
border-width: 5%;
border-style: none;
@@ -156,12 +159,12 @@ const Banner = styled.div`
}
.recurso {
- background-color : #ff7f00;
+ background-color: ${props => props.contrast === "" ? "#ff7f00" : "black"};
}
.material-formacao {
- background-color : #e81f4f;
+ background-color: ${props => props.contrast === "" ? "#e81f4f" : "black"};
}
.colecao {
- background-color : #673ab7;
+ background-color: ${props => props.contrast === "" ? "#673ab7" : "black"};
}
`
diff --git a/src/Components/ShareModal.js b/src/Components/ShareModal.js
index f721b4ca..9e6835e9 100644
--- a/src/Components/ShareModal.js
+++ b/src/Components/ShareModal.js
@@ -29,7 +29,7 @@ import Twitter from '../img/twitter.svg'
import LinkIcon from '../img/link_icon.svg'
import CloseModalButton from './CloseModalButton.js'
-export default function ReportModal (props) {
+export default function ShareModal (props) {
const textAreaRef = useRef(props.link);
const copyToClipboard = (e) => {
@@ -54,30 +54,32 @@ export default function ReportModal (props) {
}}
>
<Fade in={props.open}>
- <Container>
+ <Container className={`${props.contrast}BackColor ${props.contrast}Text ${props.contrast}Border`}>
<Header>
<span style={{width:"32px"}}/>
- <h2>Compartilhar este recurso</h2>
+ <h2>Compartilhar recurso</h2>
<CloseModalButton handleClose={props.handleClose}/>
</Header>
<Content style={{paddingTop : "0"}}>
<ResourceInfo>
<img src={props.thumb ? apiDomain + props.thumb : require('../img/logo_small.svg')} alt="thumbnail recurso"/>
- <div className="text">
+ <div>
<strong>{props.title}</strong>
- <span>{props.link}</span>
</div>
</ResourceInfo>
+ <div style={{marginTop: "10px"}}>
+ <span>{props.link}</span>
+ </div>
<ShareInfo>
<Grid container style={{paddingRight : "15px", paddingLeft : "15px"}}>
{/*Share to facebook*/}
- <Grid item xs={4}>
+ <Grid item xs={6} md={4}>
<StyledLink
href={"https://www.facebook.com/sharer/sharer.php?u=" + props.link}
rel="noreferrer"
target="_blank">
- <ShareButton>
+ <ShareButton className={`${props.contrast}LinkColor`}>
<img src={Facebook} alt="facebook-logo"/>
<p>FACEBOOK</p>
</ShareButton>
@@ -85,12 +87,12 @@ export default function ReportModal (props) {
</Grid>
{/*Share to Twitter*/}
- <Grid item xs={4}>
+ <Grid item xs={6} md={4}>
<StyledLink
href={"https://www.twitter.com/intent/tweet?url=" + props.link}
rel="noreferrer"
target="_blank">
- <ShareButton>
+ <ShareButton className={`${props.contrast}LinkColor`}>
<img src={Twitter} alt="twitter-logo"/>
<p>TWITTER</p>
</ShareButton>
@@ -98,10 +100,10 @@ export default function ReportModal (props) {
</Grid>
{/*Get shareable link*/}
- <Grid item xs={4}>
+ <Grid item xs={12} md={4}>
{
document.queryCommandSupported('copy') &&
- <ShareButton onClick={copyToClipboard}>
+ <ShareButton className={`${props.contrast}LinkColor`} onClick={copyToClipboard}>
<img src={LinkIcon} alt="link-icon"/>
<p>COPIAR LINK</p>
<textarea ref={textAreaRef} value={props.link} readOnly style={{height: "0", position: "absolute",zIndex: "-1"}}/>
@@ -143,12 +145,10 @@ const ShareButton = styled(Button)`
const ShareInfo = styled.div`
padding-top : 20px;
- color : #000;
`
const ResourceInfo = styled.div`
- margin-top : 0;
- background-color : #f4f4f4;
+ margin-top : 15px;
overflow : hidden;
border-radius : 5px;
display : flex;
@@ -175,7 +175,7 @@ const ResourceInfo = styled.div`
float : left;
padding : 0;
- @media screen and (min-width : 600px) {
+ @media screen and (min-width : 769px) {
margin-right : 20px;
margin-bottom : 0;
}
@@ -184,6 +184,10 @@ const ResourceInfo = styled.div`
}
}
+ @media screen and (max-width : 768px) {
+ flex-direction : column;
+ }
+
`
const Content = styled.div`
@@ -203,7 +207,6 @@ const Header = styled.div`
h2 {
font-size : 26px;
font-weight : lighter;
- color : #666
}
`
@@ -223,7 +226,6 @@ const StyledModal = styled(Modal)`
const Container = styled.div`
box-sizing : border-box;
box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
- background-color : white;
align : center;
display : flex;
flex-direction : column;
@@ -239,7 +241,6 @@ const Container = styled.div`
@media screen and (max-width : 699px) {
width : 100%;
- height : 100%;
}
`
const StyledLink = styled.a`
diff --git a/src/Components/SignUpContainerFunction.js b/src/Components/SignUpContainerFunction.js
index 15974aee..c66d3d43 100644
--- a/src/Components/SignUpContainerFunction.js
+++ b/src/Components/SignUpContainerFunction.js
@@ -16,55 +16,54 @@ 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 } from "react";
import { Button } from '@material-ui/core';
//import FacebookLogin from 'react-facebook-login';
import CloseIcon from '@material-ui/icons/Close';
import styled from 'styled-components'
-import {device} from './device.js'
+import { device } from './device.js'
import FormInput from "./FormInput.js"
-import {StyledCloseModalButton, DialogContentDiv, DialogHeaderStyled, SocialConnectDiv, H3Div} from './LoginContainerFunction.js'
-import {apiUrl} from '../env.js'
-import {GoogleLoginButton} from './LoginContainerFunction'
+import { StyledCloseModalButton, DialogContentDiv, DialogHeaderStyled, SocialConnectDiv, H3Div } from './LoginContainerFunction.js'
+import { apiUrl } from '../env.js'
+import { GoogleLoginButton } from './LoginContainerFunction'
import ValidateUserInput from './HelperFunctions/FormValidationFunction.js'
import GoogleLogo from "../img/logo_google.svg"
import ReCaptcha from 'react-recaptcha'
-async function handleGoogleAttempt () {
- console.log("handleGoogleAttempt")
- let request_url = (
+async function handleGoogleAttempt() {
+ let request_url = (
`${apiUrl}/omniauth/google_oauth2?auth_origin_url=` + window.location.href + '&omniauth_window_type=sameWindow&resource_class=User'
)
window.location.replace(request_url)
}
-export default function SignUpContainer (props) {
+export default function SignUpContainer(props) {
const [unavailableButton, setButtonAvailability] = useState(true);
const [formNome, setNome] = useState(
{
- key : false,
- value : "",
+ key: false,
+ value: "",
}
)
const [formEmail, setEmail] = useState(
{
- key : false,
- value : "",
+ key: false,
+ value: "",
}
)
const [formSenha, setSenha] = useState(
{
- key : false,
- value : ""
+ key: false,
+ value: ""
}
)
const [formConfirmation, setConfirmation] = useState(
{
- key : false,
- value : ""
+ key: false,
+ value: ""
}
)
@@ -73,54 +72,58 @@ export default function SignUpContainer (props) {
const flag = ValidateUserInput(type, userInput, confirmation)
if (type === 'username') {
- setNome({...formNome,
- key : flag,
- value : userInput
+ setNome({
+ ...formNome,
+ key: flag,
+ value: userInput
})
- console.log(formNome)
}
- else if(type === 'email') {
- setEmail({...formEmail,
- key : flag,
- value : userInput
+ else if (type === 'email') {
+ setEmail({
+ ...formEmail,
+ key: flag,
+ value: userInput
})
- console.log(formEmail)
}
- else if(type === 'password') {
- setSenha({...formSenha,
- key : flag,
- value : userInput
+ else if (type === 'password') {
+ setSenha({
+ ...formSenha,
+ key: flag,
+ value: userInput
})
- console.log(formSenha)
}
- else if(type === 'confirmation') {
- setConfirmation({...formConfirmation,
- key : flag,
- value : userInput
+ else if (type === 'confirmation') {
+ setConfirmation({
+ ...formConfirmation,
+ key: flag,
+ value: userInput
})
- console.log(formConfirmation)
}
}
const limpaCamposForm = () => {
- setNome({...formNome,
- key : false,
- value : ''
+ setNome({
+ ...formNome,
+ key: false,
+ value: ''
})
- setEmail({...formEmail,
- key : false,
- value : ''
+ setEmail({
+ ...formEmail,
+ key: false,
+ value: ''
});
- setSenha({...formSenha,
- key : false,
- value : ''
+ setSenha({
+ ...formSenha,
+ key: false,
+ value: ''
})
- setConfirmation({...formConfirmation,
- key : false,
- value : ''
+ setConfirmation({
+ ...formConfirmation,
+ key: false,
+ value: ''
})
}
@@ -132,7 +135,7 @@ export default function SignUpContainer (props) {
const onSubmit = (e) => {
e.preventDefault();
- const newLogin = {name : formNome.value, email : formEmail.value, password : formSenha.value, senha : formConfirmation.value}
+ const newLogin = { name: formNome.value, email: formEmail.value, password: formSenha.value, senha: formConfirmation.value }
if (!(formNome.key || formEmail.key || formSenha.key || formConfirmation.key)) {
props.handleLoginInfo(newLogin)
@@ -140,41 +143,42 @@ export default function SignUpContainer (props) {
}
}
- function captchaVerified (response) {
+ function captchaVerified(response) {
if (response) {
setButtonAvailability(false)
}
}
return (
- <ContainerStyled >
+ <ContainerStyled contrast={props.contrast}>
<DialogHeaderStyled>
- <span style={{width:"32px"}}/>
- <H2Styled> Cadastrar-se
+ <span style={{ width: "32px" }} />
+ <H2Styled contrast={props.contrast}> Cadastrar-se
</H2Styled>
- <StyledCloseModalButton onClick={props.handleClose} >
- <CloseIcon />
+ <StyledCloseModalButton contrast={props.contrast} onClick={props.handleClose} >
+ <CloseIcon className="icon" />
</StyledCloseModalButton>
</DialogHeaderStyled>
<DialogContentDiv>
<SocialConnectDiv>
- <GoogleLoginButton onClick={handleGoogleAttempt}>
- <img src={GoogleLogo} alt="google-logo" className="google-logo"/>
- <span>Usando o Google</span>
- </GoogleLoginButton>
+ <GoogleLoginButton contrast={props.contrast} onClick={handleGoogleAttempt}>
+ <img src={GoogleLogo} alt="google-logo" className="google-logo" />
+ <span>Usando o Google</span>
+ </GoogleLoginButton>
</SocialConnectDiv>
<H3Div>
- <H3Styled>
- <RightSideStrikedH3/>
- <span style={{verticalAlign:"middle"}}>ou</span>
- <LeftSideStrikedH3/>
+ <H3Styled contrast={props.contrast}>
+ <RightSideStrikedH3 contrast={props.contrast} />
+ <span style={{ verticalAlign: "middle" }}>ou</span>
+ <LeftSideStrikedH3 contrast={props.contrast} />
</H3Styled>
</H3Div>
<form onSubmit={onSubmit}>
<FormInput
+ contrast={props.contrast}
inputType={"text"}
name={"name"}
value={formNome.value}
@@ -183,8 +187,9 @@ export default function SignUpContainer (props) {
required={true}
error={formNome.key}
/>
- <br/>
+ <br />
<FormInput
+ contrast={props.contrast}
inputType={"text"}
name={"email"}
value={formEmail.value}
@@ -192,10 +197,11 @@ export default function SignUpContainer (props) {
handleChange={e => handleChange(e, 'email')}
required={true}
error={formEmail.key}
- help = {formEmail.key ? (formEmail.value.length === 0 ? "Faltou preencher seu e-mail." : <span>Insira um endereço de e-mail válido.<br/>Por exemplo: seunome@gmail.com, seunome@hotmail.com</span>) : ""}
- />
- <br/>
+ help={formEmail.key ? (formEmail.value.length === 0 ? "Faltou preencher seu e-mail." : <span>Insira um endereço de e-mail válido.<br />Por exemplo: seunome@gmail.com, seunome@hotmail.com</span>) : ""}
+ />
+ <br />
<FormInput
+ contrast={props.contrast}
inputType={"password"}
name={"password"}
value={formSenha.value}
@@ -203,10 +209,11 @@ export default function SignUpContainer (props) {
handleChange={e => handleChange(e, 'password')}
required={true}
error={formSenha.key}
- help = {formSenha.key ? (formSenha.value.length === 0 ? "Faltou digitar sua senha." : "A senha precisa ter no mÃnimo 8 caracteres.") : ""}
- />
- <br/>
+ help={formSenha.key ? (formSenha.value.length === 0 ? "Faltou digitar sua senha." : "A senha precisa ter no mÃnimo 8 caracteres.") : ""}
+ />
+ <br />
<FormInput
+ contrast={props.contrast}
inputType={"password"}
name={"confirmation"}
value={formConfirmation.value}
@@ -214,10 +221,10 @@ export default function SignUpContainer (props) {
handleChange={e => handleChange(e, 'confirmation', formSenha.value)}
required={true}
error={formConfirmation.key}
- help = {formConfirmation.key ? (formConfirmation.value.length === 0 ? "Faltou digitar sua senha." : (formConfirmation.value !== formSenha.value ? "As senhas precisam ser iguais" : "A senha precisa ter no mÃnimo 8 caracteres.")) : ""}
- />
- <br/>
- <div style={{margin:"0 auto", width: "304px"}}>
+ help={formConfirmation.key ? (formConfirmation.value.length === 0 ? "Faltou digitar sua senha." : (formConfirmation.value !== formSenha.value ? "As senhas precisam ser iguais" : "A senha precisa ter no mÃnimo 8 caracteres.")) : ""}
+ />
+ <br />
+ <div style={{ margin: "0 auto", width: "304px" }}>
{
//<ReCaptcha sitekey={process.env.REACT_APP_SITE_KEY} verifyCallback={captchaVerified} /> //when key set in env
<ReCaptcha sitekey="6LfxuKUUAAAAAIzYpCzEtJyeE8QRjBYa44dvHlTX" verifyCallback={captchaVerified} /> //use this one on production
@@ -225,26 +232,34 @@ export default function SignUpContainer (props) {
}
</div>
<ConfirmContainerStyled>
- <StyledSignUpButton type="submit" variant="contained" disabled={unavailableButton}
- style={unavailableButton ? { backgroundColor: "#e9e9e9" } : { backgroundColor: "#00bcd4" }}
- >
- <span
- style={{paddingLeft:"16px", paddingRight:"16px", borderRadius:"3px", boxSizing:"border-box",
- fontFamily:"Roboto, sans serif", fontWeight:"500", color:"#fff"}}
+ {
+ !unavailableButton &&
+ <StyledSignUpButton contrast={props.contrast} type="submit" variant="contained" disabled={unavailableButton}
+ style={unavailableButton ? { backgroundColor: "#e9e9e9" } : props.contrast === "" ? { backgroundColor: "#00bcd4" } : { backgroundColor: "black", color: "yellow", textDecoration: "underline" }}
>
- CADASTRAR
+ <span
+ style={props.contrast === "" ? {
+ paddingLeft: "16px", paddingRight: "16px", borderRadius: "3px", boxSizing: "border-box",
+ fontFamily: "Roboto, sans serif", fontWeight: "500", color: "#fff"
+ } : {
+ paddingLeft: "16px", paddingRight: "16px", borderRadius: "3px", boxSizing: "border-box",
+ fontFamily: "Roboto, sans serif", fontWeight: "500", color: "yellow"
+ }}
+ >
+ CADASTRAR
</span>
- </StyledSignUpButton>
+ </StyledSignUpButton>
+ }
</ConfirmContainerStyled>
</form>
- <TermosDeUsoStyled>
+ <TermosDeUsoStyled contrast={props.contrast}>
<p>Ao se cadastrar, você está aceitando os Termos de Uso e de PolÃtica
de Privacidade. <a href="/termos">Ler Termos</a>.</p>
</TermosDeUsoStyled>
<DialogFooterStyled>
- <span style={{textAlign:"center", fontSize: "14px"}}>Já possui cadastro? <StyledAnchor href="" onClick={e => switchModal(e)}>ENTRAR</StyledAnchor></span>
+ <span style={props.contrast === "" ? { textAlign: "center", fontSize: "14px" } : { textAlign: "center", fontSize: "14px", color: "white" }}>Já possui cadastro? <StyledAnchor contrast={props.contrast} href="" onClick={e => switchModal(e)}>ENTRAR</StyledAnchor></span>
</DialogFooterStyled>
</DialogContentDiv>
</ContainerStyled>
@@ -253,20 +268,22 @@ export default function SignUpContainer (props) {
const ContainerStyled = styled.div`
box-sizing : border-box;
- background-color : white;
+ background: ${props => props.contrast === "" ? "white" : "black"};
max-width : none;
align : center;
display : flex;
flex-direction : column;
min-width : 450px;
+ border: 1px solid ${props => props.contrast === "" ? "#666" : "white"};
+ overflow-y: auto;
- max-height : none;
+ max-height : 90%;
position : relative;
padding : 10px;
@media ${device.mobileM} {
width : 100%;
min-width : unset;
- height : 100%;
+ height : 90%;
min-width : unset !important;
}
@@ -285,17 +302,21 @@ const DialogFooterStyled = styled.div`
const TermosDeUsoStyled = styled.div`
font-family: 'Roboto', sans serif, 'Helvetica Neue', Helvetica, Arial, sans-serif;
- color : #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
font-size : 13px;
margin : 0 0 10px;
max-width : 350px;
margin-top : 10px;
text-align : start;
+ a{
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"}
+ }
`
const H2Styled = styled.h2`
align-self : center;
- color : #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
font-size : 26px;
font-weight : lighter;
justify-content: space-between;
@@ -308,12 +329,12 @@ const H3Styled = styled.h3`
overflow : hidden;
text-align : center;
font-size : 14px;
- color : #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
margin : 10px 0;
`
const RightSideStrikedH3 = styled.div`
display : inline-block;
- border-bottom: 1px dotted #666;
+ border-bottom: ${props => props.contrast === "" ? "1px dotted #666" : "1px dotted white"};
vertical-align : middle;
font-weight : 500;
margin-right : 5px;
@@ -322,7 +343,7 @@ const RightSideStrikedH3 = styled.div`
const LeftSideStrikedH3 = styled.div`
display : inline-block;
- border-bottom: 1px dotted #666;
+ border-bottom: ${props => props.contrast === "" ? "1px dotted #666" : "1px dotted white"};
vertical-align : middle;
font-weight : 500;
margin-left : 5px;
@@ -330,8 +351,8 @@ const LeftSideStrikedH3 = styled.div`
`
const StyledAnchor = styled.a`
- color : #00bcd4;
- text-decoration : none;
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"}
`
//const StyledCloseModalButton = styled(Button)`
// display : inline-block;
@@ -355,7 +376,7 @@ const ConfirmContainerStyled = styled.div`
const StyledSignUpButton = styled(Button)`
box-shadow : none !important;
outline: none !important;
- border : 0 !important;
+ border: ${props => props.contrast === "" ? "0 !important" : "1px solid white !important"};
overflow : hidden !important;
width : 50% !important;
display : inline-block !important;
@@ -366,6 +387,6 @@ const StyledSignUpButton = styled(Button)`
border-radius: 3px !important;
align-self : 50% !important;
:hover {
- background-color : #00acc1 !important;
+ background-color: ${props => props.contrast === "" ? "#00acc1 !important" : "rgba(255,255,0,0.24) !important"};
}
`
diff --git a/src/Components/SignUpModal.js b/src/Components/SignUpModal.js
index 6663e78a..8a329fca 100644
--- a/src/Components/SignUpModal.js
+++ b/src/Components/SignUpModal.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, {useContext, useState} from 'react';
+import React, { useContext, useState } from 'react';
import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop';
import Fade from '@material-ui/core/Fade';
@@ -26,7 +26,7 @@ import { authentication } from './HelperFunctions/getAxiosConfig'
import SnackBar from './SnackbarComponent';
-export default function SignUpModal (props) {
+export default function SignUpModal(props) {
const { state, dispatch } = useContext(Store)
const [snackbarOpened, handleSnackbar] = useState(false)
@@ -39,8 +39,8 @@ export default function SignUpModal (props) {
handleSnackbar(false);
}
- function handleSuccess (data) {
- dispatch ({
+ function handleSuccess(data) {
+ dispatch({
type: 'USER_SIGNED_UP',
userLoggedIn: !state.userIsLoggedIn,
user: data.data
@@ -48,17 +48,17 @@ export default function SignUpModal (props) {
props.handleClose()
}
- function handleError (error) {
+ function handleError(error) {
handleSnackbar(true)
}
const handleLoginInfo = (newLogin) => {
const url = `/auth`
const payload = {
- name : newLogin.name,
+ name: newLogin.name,
email: newLogin.email,
- password : newLogin.password,
- password_confirmation : newLogin.senha //,
+ password: newLogin.password,
+ password_confirmation: newLogin.senha //,
// terms_of_service : true,
// avatar: ""
}
@@ -89,9 +89,10 @@ export default function SignUpModal (props) {
>
<Fade in={props.open}>
<SignUpContainer
- handleClose={props.handleClose}
- openLogin={props.openLogin}
- handleLoginInfo = {handleLoginInfo}
+ contrast={state.contrast}
+ handleClose={props.handleClose}
+ openLogin={props.openLogin}
+ handleLoginInfo={handleLoginInfo}
/>
</Fade>
</StyledModalSignUp>
diff --git a/src/Components/StatsBarFunction.js b/src/Components/StatsBarFunction.js
index 857c7393..1c5c465e 100644
--- a/src/Components/StatsBarFunction.js
+++ b/src/Components/StatsBarFunction.js
@@ -16,14 +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, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
import styled from 'styled-components'
import { apiUrl } from "../env";
import axios from "axios";
import mapaBrasil from '../img/mapa-brasil-line-icon.svg';
import Grid from '@material-ui/core/Grid';
+import { Store } from '../Store';
export default function (props) {
+ const { state } = useContext(Store)
+
const [available_resources, setAvailableResources] = useState(0)
const [month_publications, setMonthPublications] = useState(0)
const [month_downloads, setMonthDownloads] = useState(0)
@@ -41,7 +44,7 @@ export default function (props) {
}, [])
return (
- <StatsTab>
+ <StatsTab contrast={state.contrast}>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet" />
<Grid container direction={WINDOW_WIDTH <= 670 ? "column" : "row"} justify="center" alignItems="center" spacing={3}>
<Grid item>
@@ -61,7 +64,7 @@ export default function (props) {
</Grid>
</Grid>
</Grid>
- <Grid item style={WINDOW_WIDTH <= 670 ? {width: "100%"} : null}>
+ <Grid item style={WINDOW_WIDTH <= 670 ? { width: "100%" } : null}>
<StyledDivider />
</Grid>
<Grid item>
@@ -102,7 +105,9 @@ export default function (props) {
const StatsTab = styled.div`
padding : 20px 0;
color : #fff;
- background-color : #00bcd4;
+ border-top: ${props => props.contrast === "" ? "none" : "1px solid white"};
+ border-bottom: ${props => props.contrast === "" ? "none" : "1px solid white"};
+ background-color: ${props => props.contrast === "" ? "#00bcd4" : "black"};
font-family: 'Roboto', sans-serif;
`
const StyledDivider = styled.div`
diff --git a/src/Components/Stepper.js b/src/Components/Stepper.js
index 18b29b8a..2ed12b9d 100644
--- a/src/Components/Stepper.js
+++ b/src/Components/Stepper.js
@@ -1,11 +1,34 @@
-import React from 'react'
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+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 styled from 'styled-components'
+import Check from '@material-ui/icons/Check';
+import Grid from '@material-ui/core/Grid';
-export default function Stepper (props) {
+export default function CustomizedSteppers(props) {
+
+ function isInFinalSTep(step) {
+ return step === 3;
+ }
return (
- <div style={{display:"flex",justifyContent:"center", marginBottom:"50px"}}>
- <FeedbackUpload>
+ <MainGrid contrast={props.contrast} container direction='row' justify='space-between' alignItems='center'>
{
!isInFinalSTep(props.activeStep) ?
@@ -38,41 +61,47 @@ export default function Stepper (props) {
)
})
}
- </FeedbackUpload>
- </div>
- )
+ </MainGrid >
+ );
}
-const FeedbackUpload = styled.div`
- width : 280px;
- display : flex;
- background :#e5e5e5;
- flex-direction : row;
- justify-content : space-between;
- height : 50px;
- align-items : center;
- padding : 7px;
- border-radius : 50px;
- margin-top : 20px;
+const MainGrid = styled(Grid)`
+ padding: 1em;
+ border-radius: 50px;
+ width: 90%;
+ margin: 0 auto;
+ border: ${props => props.contrast === "" ? "2px solid #d4d4d4" : "2px solid white"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
- .page-selector {
- height : 36px;
- width : 36px;
- background : #fff;
- border-radius : 50%;
- color : #00bcd4;
- line-height : 32px;
- font-size : 20px;
- font-weight : 500;
- border: solid 3px #00bcd4;
- text-align: center;
- align-items : center;
- vertical-align:middle;
+ .currStep{
+ height: 30px;
+ width: 30px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: 2px solid rgba(255, 255, 255, 0.6);
+ border-radius: 50%;
}
- .selected {
- background : #00bcd4;
- color : #fff;
- border-color : #00bcd4;
- }
+ .step{
+ height: 30px;
+ width: 30px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: ${props => props.contrast === "" ? "2px solid #00bcd4" : "2px solid white"};
+ border-radius: 50%;
+ }
+
+ .finalStep{
+ height: 30px;
+ width: 30px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: 2px solid white;
+ border-radius: 50%;
+ color: white;
+ }
`
+
diff --git a/src/Components/TabPanels/Breadcrumbs.js b/src/Components/TabPanels/Breadcrumbs.js
index 1d208986..b8d3abe6 100644
--- a/src/Components/TabPanels/Breadcrumbs.js
+++ b/src/Components/TabPanels/Breadcrumbs.js
@@ -20,29 +20,23 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React from 'react'
import styled from 'styled-components'
import Breadcrumbs from '@material-ui/core/Breadcrumbs';
-import {Link} from 'react-router-dom';
+import { Link } from 'react-router-dom';
-export default function CustomizedBreadcrumbs (props) {
+export default function CustomizedBreadcrumbs(props) {
return (
<BreadcrumbsDiv>
- <StyledBreadcrumbs>
- <Link to="/" style={{color:"#00bcd4", textDecoration:"none"}}>
+ <StyledBreadcrumbs contrast={props.contrast}>
+ <Link to="/">
Página Inicial
</Link>
{
- props.values.map( (value, i) =>
+ props.values.map((value, i) =>
<span key={i}>
{value}
</span>
)
}
- {/*<span>
- {props.currentPage}
- </span>
- <span>
- {props.value}
- </span> */}
</StyledBreadcrumbs>
</BreadcrumbsDiv>
)
@@ -61,7 +55,11 @@ const StyledBreadcrumbs = styled(Breadcrumbs)`
display : flex;
justify-content : flex-start;
max-width : 1170px;
+ a{
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ }
span {
- color : #a5a5a5;
+ color: ${props => props.contrast === "" ? "#a5a5a5" : "white"};
}
`
diff --git a/src/Components/TabPanels/PanelComponents/ButtonsArea.js b/src/Components/TabPanels/PanelComponents/ButtonsArea.js
index 1b8633ae..ac5ad926 100644
--- a/src/Components/TabPanels/PanelComponents/ButtonsArea.js
+++ b/src/Components/TabPanels/PanelComponents/ButtonsArea.js
@@ -23,19 +23,19 @@ import Button from '@material-ui/core/Button';
export function ButtonsAreaRecurso(props) {
return (
- <Carregados>
- <p style={{ margin: "0 0 10px", fontSize: "14px" }}>
+ <Carregados contrast={props.contrast}>
+ <p className="total">
{props.sliceLength} recursos carregados de {props.total}
</p>
{
!props.end &&
<React.Fragment>
- <ButtonMostrarMaisRecurso onClick={() => props.showMore(4)}>
- <span style={{ color: "#fff", fontSize: "14px", fontWeight: "500" }}>MOSTRAR MAIS 4</span>
+ <ButtonMostrarMaisRecurso contrast={props.contrast} onClick={() => props.showMore(4)}>
+ <span>MOSTRAR MAIS 4</span>
</ButtonMostrarMaisRecurso>
- <ButtonMostrarTodos onClick={() => { props.showMore(20) }}>
- <span style={{ color: "#666", fontSize: "14px", fontWeight: "500" }}>MOSTRAR MAIS 20</span>
+ <ButtonMostrarTodos contrast={props.contrast} onClick={() => { props.showMore(20) }}>
+ <span>MOSTRAR MAIS 20</span>
</ButtonMostrarTodos>
</React.Fragment>
}
@@ -46,19 +46,19 @@ export function ButtonsAreaRecurso(props) {
export function ButtonsAreaColecao(props) {
return (
- <Carregados>
- <p style={{ margin: "0 0 10px", fontSize: "14px" }}>
+ <Carregados contrast={props.contrast}>
+ <p className="total">
{props.sliceLength} coleções carregadas de {props.total}
</p>
{
!props.end &&
<React.Fragment>
- <ButtonMostrarMaisColecao onClick={() => { props.showMore(4) }}>
- <span style={{ color: "#fff", fontSize: "14px", fontWeight: "500" }}>MOSTRAR MAIS 4</span>
+ <ButtonMostrarMaisColecao contrast={props.contrast} onClick={() => { props.showMore(4) }}>
+ <span>MOSTRAR MAIS 4</span>
</ButtonMostrarMaisColecao>
- <ButtonMostrarTodos onClick={() => { props.showMore(20) }}>
- <span style={{ color: "#666", fontSize: "14px", fontWeight: "500" }}>MOSTRAR MAIS 20</span>
+ <ButtonMostrarTodos contrast={props.contrast} onClick={() => { props.showMore(20) }}>
+ <span>MOSTRAR MAIS 20</span>
</ButtonMostrarTodos>
</React.Fragment>
}
@@ -68,20 +68,20 @@ export function ButtonsAreaColecao(props) {
export function ButtonsAreaRede(props) {
return (
- <Carregados>
- <p style={{ margin: "0 0 10px", fontSize: "14px" }}>
+ <Carregados contrast={props.contrast}>
+ <p className="total">
{props.sliceLength} usuários carregados {props.total}
</p>
{
!props.end &&
<React.Fragment>
- <ButtonMostrarMaisRede onClick={() => { props.showMore(4) }}>
- <span style={{ color: "#fff", fontSize: "14px", fontWeight: "500" }}>MOSTRAR MAIS 4</span>
+ <ButtonMostrarMaisRede contrast={props.contrast} onClick={() => { props.showMore(4) }}>
+ <span>MOSTRAR MAIS 4</span>
</ButtonMostrarMaisRede>
- <ButtonMostrarTodos onClick={() => { props.showMore(20) }}>
- <span style={{ color: "#666", fontSize: "14px", fontWeight: "500" }}>MOSTRAR MAIS 20</span>
+ <ButtonMostrarTodos contrast={props.contrast} onClick={() => { props.showMore(20) }}>
+ <span>MOSTRAR MAIS 20</span>
</ButtonMostrarTodos>
</React.Fragment>
}
@@ -92,21 +92,29 @@ export function ButtonsAreaRede(props) {
const ButtonMostrarTodos = styled(Button)`
&:hover {
- background-color : #d5d5d5 !important;
+ background-color: ${props => props.contrast === "" ? "#d5d5d5 !important" : "rgba(255,255,0,0.24) !important"};
}
height : 36px !important;
padding-left : 16px !important;
padding-right : 16px !important;
font-weight : 500 !important;
border-radius : 3px !important;
- color :#666 !important;
- background-color: #e8e8e8 !important;
+ color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
+ background-color: ${props => props.contrast === "" ? "#e8e8e8 !important" : "black !important"};
+ border: ${props => props.contrast === "" ? 0 : "1px solid white !important"};
min-width : 88px !important;
height : 36px !important;
`
const ButtonMostrarMaisRede = styled(Button)`
- background-color : #00bcd4 !important;
+ &:hover {
+ background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
+ color: ${props => props.contrast === "" ? "#fff !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
+ background-color: ${props => props.contrast === "" ? "#00bcd4 !important" : "black !important"};
+ border: ${props => props.contrast === "" ? 0 : "1px solid white !important"};
font-size: 14px !important;
font-weight: 500 !important;
height: 36px !important;
@@ -118,11 +126,16 @@ const ButtonMostrarMaisRede = styled(Button)`
min-width : 88px !important;
vertical-align : middle !important;
margin : 6px 8px !important;
- text-decoration : none !important;
`
export const ButtonMostrarMaisColecao = styled(Button)`
- background-color : #503096 !important;
+ &:hover {
+ background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
+ color: ${props => props.contrast === "" ? "#fff !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
+ background-color: ${props => props.contrast === "" ? "#503096 !important" : "black !important"};
+ border: ${props => props.contrast === "" ? 0 : "1px solid white !important"};
font-size: 14px !important;
font-weight: 500 !important;
height: 36px !important;
@@ -134,11 +147,16 @@ export const ButtonMostrarMaisColecao = styled(Button)`
min-width : 88px !important;
vertical-align : middle !important;
margin : 6px 8px !important;
- text-decoration : none !important;
`
export const ButtonMostrarMaisRecurso = styled(Button)`
- background-color : #ff7f00 !important;
+ &:hover {
+ background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
+ color: ${props => props.contrast === "" ? "#fff !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
+ background-color: ${props => props.contrast === "" ? "#ff7f00 !important" : "black !important"};
+ border: ${props => props.contrast === "" ? 0 : "1px solid white !important"};
font-size: 14px !important;
font-weight: 500 !important;
height: 36px !important;
@@ -150,5 +168,4 @@ export const ButtonMostrarMaisRecurso = styled(Button)`
min-width : 88px !important;
vertical-align : middle !important;
margin : 6px 8px !important;
- text-decoration : none !important;
`
diff --git a/src/Components/TabPanels/PanelComponents/NoContent.js b/src/Components/TabPanels/PanelComponents/NoContent.js
index f23eb76c..e0c4be69 100644
--- a/src/Components/TabPanels/PanelComponents/NoContent.js
+++ b/src/Components/TabPanels/PanelComponents/NoContent.js
@@ -22,16 +22,16 @@ import styled from 'styled-components'
//Image Import
import { defaultNoContent } from "ImportImages.js";
-export default function NoContent({text, image}) {
+export default function NoContent({ text, image, contrast }) {
return (
<DivTextoNoPublications>
<InnerDiv>
<ImgDiv>
- <img alt="" src={image || defaultNoContent } style={{ width: "130px", verticalAlign: "middle", border: "0" }} />
+ <img alt="" src={image || defaultNoContent} style={{ width: "130px", verticalAlign: "middle", border: "0" }} />
</ImgDiv>
<TextDiv>
- <NoPubSpan>{text}</NoPubSpan>
+ <NoPubSpan contrast={contrast}>{text}</NoPubSpan>
</TextDiv>
</InnerDiv>
</DivTextoNoPublications>
@@ -39,6 +39,7 @@ export default function NoContent({text, image}) {
}
const NoPubSpan = styled.span`
+ color: ${props => props.contrast === "" ? "#666" : "white"};
margin-top : 10px;
font-size : 24px;
font-family : Roboto;
@@ -64,10 +65,4 @@ export const DivTextoNoPublications = styled.div`
padding-left : 15px;
padding-right : 15px;
text-align : center;
-`
-
-// {/*const DivConteudoNaoPublicado = styled.div`
-// position : relative;
-// top : 50%;
-// transform : translateY(-50%);
-// `*/}
+`
\ No newline at end of file
diff --git a/src/Components/TabPanels/PanelComponents/PanelTitle.js b/src/Components/TabPanels/PanelComponents/PanelTitle.js
index cb139b40..9214c68b 100644
--- a/src/Components/TabPanels/PanelComponents/PanelTitle.js
+++ b/src/Components/TabPanels/PanelComponents/PanelTitle.js
@@ -2,12 +2,12 @@ import React from 'react'
import styled from 'styled-components'
import Grid from '@material-ui/core/Grid';
-export default function PanelTitle (props) {
+export default function PanelTitle(props) {
return (
- <Header container>
+ <Header container contrast={props.contrast}>
<Grid item xs={12}>
- <p className="titulo">{props.title} <b style={{fontWeight:"500", fontSize : "20px"}}>({props.length})</b></p>
- <hr/>
+ <p className="titulo">{props.title} <b style={{ fontWeight: "500", fontSize: "20px" }}>({props.length})</b></p>
+ <hr />
</Grid>
</Header>
)
@@ -21,7 +21,7 @@ const Header = styled(Grid)`
margin : 0;
line-height: normal;
font-style : normal;
- color : #757575;
+ color: ${props => props.contrast === "" ? "#757575" : "white"};
font-size : 1.857em;
padding-left : 15px;
padding-right : 15px;
diff --git a/src/Components/TabPanels/PanelComponents/TemplateColecao.js b/src/Components/TabPanels/PanelComponents/TemplateColecao.js
index b335fbd5..f6be7522 100644
--- a/src/Components/TabPanels/PanelComponents/TemplateColecao.js
+++ b/src/Components/TabPanels/PanelComponents/TemplateColecao.js
@@ -33,6 +33,7 @@ export default function PanelTemplateColecao(props) {
if (followerBoolean) {
return (
<CollectionCardFunction
+ contrast={props.contrast}
name={card.name}
collections={card.followable.collection_items}
rating={card.followable.review_average}
@@ -54,6 +55,7 @@ export default function PanelTemplateColecao(props) {
else {
return (
<CollectionCardFunction
+ contrast={props.contrast}
name={card.name}
tags={card.tags}
rating={card.review_average}
@@ -73,8 +75,9 @@ export default function PanelTemplateColecao(props) {
}
return (
- <WhiteContainer>
+ <WhiteContainer contrast={props.contrast}>
<Title
+ contrast={props.contrast}
title={props.title}
length={props.end}
/>
@@ -82,17 +85,18 @@ export default function PanelTemplateColecao(props) {
{
props.error ?
<p
- style={{ fontSize: "15px", fontWeight: "lighter", margin: "0 0 10px", display: "flex", justifyContent: "center", textAlign: "center" }}
+ className="errorText"
>
Erro ao tentar obter os dados
</p>
:
props.length === 0 ?
(
- <NoContent
- text={props.noContentText}
+ <NoContent
+ contrast={props.contrast}
+ text={props.noContentText}
image={ColecaoVazia}
- />
+ />
)
:
(
@@ -108,9 +112,10 @@ export default function PanelTemplateColecao(props) {
</StyledGrid>
{
props.loadingMore ?
- <LoadingSpinner text={'Carregando Recursos...'} />
+ <LoadingSpinner contrast={props.contrast} text={'Carregando coleções...'} />
:
<ButtonsAreaColecao
+ contrast={props.contrast}
sliceLength={props.sliceArr.length}
length={props.length}
showMore={props.showMore}
diff --git a/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js b/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js
index d0341573..b6da514b 100644
--- a/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js
+++ b/src/Components/TabPanels/PanelComponents/TemplateCuradoria.js
@@ -26,10 +26,10 @@ import { ButtonsAreaRecurso } from './ButtonsArea'
import LoadingSpinner from '../../LoadingSpinner.js';
export default function Template(props) {
- console.log(props.sliceArr);
return (
- <WhiteContainer>
+ <WhiteContainer contrast={props.contrast}>
<Title
+ contrast={props.contrast}
title={props.titleText}
length={props.end}
/>
@@ -37,7 +37,7 @@ export default function Template(props) {
{
props.error ?
<p
- style={{ fontSize: "15px", fontWeight: "lighter", margin: "0 0 10px", display: "flex", justifyContent: "center", textAlign: "center" }}
+ className="errorText"
>
Erro ao tentar obter os dados
</p>
@@ -45,7 +45,7 @@ export default function Template(props) {
props.length === 0 ?
(
[
- <NoContent text={props.noContentText} />
+ <NoContent contrast={props.contrast} text={props.noContentText} />
]
)
:
@@ -57,6 +57,7 @@ export default function Template(props) {
props.sliceArr.map((card) =>
<Grid item xs={12} sm={6} md={'auto'} lg={3} key={card.id}>
<ResourceCardFunction
+ contrast={props.contrast}
avatar={card.submitter.avatar}
id={card.learning_object.id}
thumbnail={card.learning_object.thumbnail}
@@ -77,9 +78,10 @@ export default function Template(props) {
</StyledGrid>
{
props.loadingMore ?
- <LoadingSpinner text="Carregando recurso..." />
+ <LoadingSpinner contrast={props.contrast} text="Carregando recurso..." />
:
<ButtonsAreaRecurso
+ contrast={props.contrast}
sliceLength={props.sliceArr.length}
length={props.length}
showMore={props.showMore}
diff --git a/src/Components/TabPanels/PanelComponents/TemplateRecurso.js b/src/Components/TabPanels/PanelComponents/TemplateRecurso.js
index 68e1de28..1243c015 100644
--- a/src/Components/TabPanels/PanelComponents/TemplateRecurso.js
+++ b/src/Components/TabPanels/PanelComponents/TemplateRecurso.js
@@ -31,8 +31,9 @@ import { RecursoVazio } from "ImportImages.js";
export default function Template(props) {
return (
- <WhiteContainer>
+ <WhiteContainer contrast={props.contrast}>
<Title
+ contrast={props.contrast}
title={props.titleText}
length={props.end}
/>
@@ -40,7 +41,7 @@ export default function Template(props) {
{
props.error ?
<p
- style={{ fontSize: "15px", fontWeight: "lighter", margin: "0 0 10px", display: "flex", justifyContent: "center", textAlign: "center" }}
+ className="errorText"
>
Erro ao tentar obter os dados
</p>
@@ -48,6 +49,7 @@ export default function Template(props) {
props.length === 0 ?
(
<NoContent
+ contrast={props.contrast}
text={props.noContentText}
image={RecursoVazio}
/>
@@ -55,11 +57,12 @@ export default function Template(props) {
:
(
<React.Fragment>
- <StyledGrid container spacing={1} style={{ paddingLeft: "30px", paddingRight: "15px" }}>
+ <StyledGrid container spacing={1} style={{ paddingLeft: "30px", paddingRight: "30px" }}>
{
props.slice.map((card) =>
<Grid item xs={12} sm={6} md={'auto'} lg={3} key={card.id}>
<ResourceCardFunction
+ contrast={props.contrast}
key={card.id}
avatar={card.publisher.avatar}
id={card.id}
@@ -81,9 +84,10 @@ export default function Template(props) {
</StyledGrid>
{
props.loadingMore ?
- <LoadingSpinner text={'Carregando Recursos...'} />
+ <LoadingSpinner contrast={props.contrast} text={'Carregando Recursos...'} />
:
<ButtonsAreaRecurso
+ contrast={props.contrast}
sliceLength={props.slice.length}
length={props.length}
showMore={props.showMore}
diff --git a/src/Components/TabPanels/PanelComponents/TemplateRede.js b/src/Components/TabPanels/PanelComponents/TemplateRede.js
index e5d2a845..076d525e 100644
--- a/src/Components/TabPanels/PanelComponents/TemplateRede.js
+++ b/src/Components/TabPanels/PanelComponents/TemplateRede.js
@@ -13,6 +13,7 @@ export default function PanelTemplateRede(props) {
if (followerBoolean) {
return (
<ContactCard
+ contrast={props.contrast}
name={card.follower.name}
avatar={card.follower.avatar !== undefined && card.follower.avatar !== "" ? apiDomain + card.follower.avatar : null}
cover={card.follower.cover !== undefined && card.follower.cover !== "" ? apiDomain + card.follower.cover : null}
@@ -28,6 +29,7 @@ export default function PanelTemplateRede(props) {
else {
return (
<ContactCard
+ contrast={props.contrast}
name={card.followable.name ? card.followable.name : null}
avatar={card.followable.avatar !== undefined && card.followable.avatar !== "" ? apiDomain + '/' + card.followable.avatar : null}
cover={card.followable.cover !== undefined && card.followable.cover !== "" ? apiDomain + card.followable.cover : null}
@@ -43,9 +45,10 @@ export default function PanelTemplateRede(props) {
}
return (
- <WhiteContainer>
+ <WhiteContainer contrast={props.contrast}>
<Title
+ contrast={props.contrast}
title={props.title}
length={props.end}
/>
@@ -56,7 +59,7 @@ export default function PanelTemplateRede(props) {
{
props.error ?
<p
- style={{ fontSize: "15px", fontWeight: "lighter", margin: "0 0 10px", display: "flex", justifyContent: "center", textAlign: "center" }}
+ className="errorText"
>
Erro ao tentar obter os dados
</p>
@@ -64,7 +67,7 @@ export default function PanelTemplateRede(props) {
props.length === 0 ?
(
[
- <NoContent text={props.noContentText} />
+ <NoContent contrast={props.contrast} text={props.noContentText} />
]
)
:
@@ -87,9 +90,10 @@ export default function PanelTemplateRede(props) {
</StyledGrid>
{
props.loadingMore ?
- <LoadingSpinner text={'Carregando Recursos...'} />
+ <LoadingSpinner contrast={props.contrast} text={'Carregando Recursos...'} />
:
<ButtonsAreaRede
+ contrast={props.contrast}
sliceLength={props.sliceArr.length}
length={props.length}
showMore={props.showMore}
@@ -102,6 +106,6 @@ export default function PanelTemplateRede(props) {
)
}
- </WhiteContainer>
+ </WhiteContainer >
)
}
diff --git a/src/Components/TabPanels/PublicUserPageTabs/TabColecoes.js b/src/Components/TabPanels/PublicUserPageTabs/TabColecoes.js
index 9b987347..7f636fcd 100644
--- a/src/Components/TabPanels/PublicUserPageTabs/TabColecoes.js
+++ b/src/Components/TabPanels/PublicUserPageTabs/TabColecoes.js
@@ -21,100 +21,101 @@ import { fetchAllRequest, getRequest } from '../../HelperFunctions/getAxiosConfi
import PanelTemplateColecao from '../PanelComponents/TemplateColecao.js'
import LoadingSpinner from '../../LoadingSpinner.js'
-export default function TabColecoes({id, username}) {
- const [loading, handleLoading] = useState(true)
-
- const [errorInUserColl, setErrorInUserColl] = useState(false)
-
- const [userCollections, setUserCollections] = useState([])
-
- const [currLimitUserColl, setCurrLimitUserColl] = useState(4)
-
- const [loadingMoreUserColl, setLoadingMoreUserColl] = useState(false);
-
- const [endOfUserColl, setEndOfUserColl] = useState(false);
-
- function handleSuccess(responseArr, headersArr) {
- setErrorInUserColl(responseArr[0].errors ? true : false)
-
- handleLoading(false)
- setUserCollections(responseArr[0])
-
- if (headersArr[0].has('X-Total-Count')) {
- setEndOfUserColl(headersArr[0].get('X-Total-Count'));
- }
- }
-
- function handleError(error) {
- handleLoading(false)
- setErrorInUserColl(true)
- }
-
- const getInfo = () => {
- const urls = [
- `/users/${id}/collections?offset=0&limit=4`,
- ]
- fetchAllRequest(urls, handleSuccess, handleError)
+export default function TabColecoes({ id, username, contrast }) {
+ const [loading, handleLoading] = useState(true)
+
+ const [errorInUserColl, setErrorInUserColl] = useState(false)
+
+ const [userCollections, setUserCollections] = useState([])
+
+ const [currLimitUserColl, setCurrLimitUserColl] = useState(4)
+
+ const [loadingMoreUserColl, setLoadingMoreUserColl] = useState(false);
+
+ const [endOfUserColl, setEndOfUserColl] = useState(false);
+
+ function handleSuccess(responseArr, headersArr) {
+ setErrorInUserColl(responseArr[0].errors ? true : false)
+
+ handleLoading(false)
+ setUserCollections(responseArr[0])
+
+ if (headersArr[0].has('X-Total-Count')) {
+ setEndOfUserColl(headersArr[0].get('X-Total-Count'));
}
-
- useEffect(() => {
- handleLoading(true)
- getInfo()
- }, [])
-
- const showMoreUserCollections = (limite) => {
- const limit = limite;
- setLoadingMoreUserColl(true);
- setCurrLimitUserColl(currLimitUserColl + limit)
- const url = `/users/${id}/collections?offset=${currLimitUserColl}&limit=${limit}`;
- getRequest(url,
- (data) => {
- if (data.errors) {
- setLoadingMoreUserColl(false);
- setEndOfUserColl(true)
- setErrorInUserColl(true)
- }
- else if (data.length >= 1) {
- let currData = [...userCollections];
- currData = [...currData.concat(data)];
- setLoadingMoreUserColl(false);
- setUserCollections(currData);
- }
- else {
- setLoadingMoreUserColl(false);
- setEndOfUserColl(true)
- }
- },
- (error) => {
+ }
+
+ function handleError(error) {
+ handleLoading(false)
+ setErrorInUserColl(true)
+ }
+
+ const getInfo = () => {
+ const urls = [
+ `/users/${id}/collections?offset=0&limit=4`,
+ ]
+ fetchAllRequest(urls, handleSuccess, handleError)
+ }
+
+ useEffect(() => {
+ handleLoading(true)
+ getInfo()
+ }, [])
+
+ const showMoreUserCollections = (limite) => {
+ const limit = limite;
+ setLoadingMoreUserColl(true);
+ setCurrLimitUserColl(currLimitUserColl + limit)
+ const url = `/users/${id}/collections?offset=${currLimitUserColl}&limit=${limit}`;
+ getRequest(url,
+ (data) => {
+ if (data.errors) {
setLoadingMoreUserColl(false);
setEndOfUserColl(true)
setErrorInUserColl(true)
}
- )
- }
-
- return (
- <>
- {
- loading ?
- (
- <LoadingSpinner text={`Carregando coleções de ${username}`} />
- )
- :
- (
- <PanelTemplateColecao
- title={"Coleções Públicas"}
- length={userCollections.length}
- noContentText={username + " não possui nenhuma coleção."}
- sliceArr={userCollections}
- showMore={showMoreUserCollections}
- loadingMore={loadingMoreUserColl}
- end={endOfUserColl}
- followed={false}
- error={errorInUserColl}
- />
- )
- }
- </>
+ else if (data.length >= 1) {
+ let currData = [...userCollections];
+ currData = [...currData.concat(data)];
+ setLoadingMoreUserColl(false);
+ setUserCollections(currData);
+ }
+ else {
+ setLoadingMoreUserColl(false);
+ setEndOfUserColl(true)
+ }
+ },
+ (error) => {
+ setLoadingMoreUserColl(false);
+ setEndOfUserColl(true)
+ setErrorInUserColl(true)
+ }
)
+ }
+
+ return (
+ <>
+ {
+ loading ?
+ (
+ <LoadingSpinner contrast={contrast} text={`Carregando coleções de ${username}`} />
+ )
+ :
+ (
+ <PanelTemplateColecao
+ contrast={contrast}
+ title={"Coleções Públicas"}
+ length={userCollections.length}
+ noContentText={username + " não possui nenhuma coleção."}
+ sliceArr={userCollections}
+ showMore={showMoreUserCollections}
+ loadingMore={loadingMoreUserColl}
+ end={endOfUserColl}
+ followed={false}
+ error={errorInUserColl}
+ />
+ )
+ }
+ </>
+ )
}
diff --git a/src/Components/TabPanels/PublicUserPageTabs/TabInicio.js b/src/Components/TabPanels/PublicUserPageTabs/TabInicio.js
index 7965d58e..ceba6bcb 100644
--- a/src/Components/TabPanels/PublicUserPageTabs/TabInicio.js
+++ b/src/Components/TabPanels/PublicUserPageTabs/TabInicio.js
@@ -60,15 +60,16 @@ export function NoContent(props) {
)
}
-export default function TabInicio({ id, user, learningObjs, collections }) {
+export default function TabInicio({ id, user, learningObjs, collections, contrast }) {
return (
<React.Fragment>
{/*display user description*/}
{
user.description &&
- <UserDescription text={user.description} />
+ <UserDescription contrast={contrast} text={user.description} />
}
<Template
+ contrast={contrast}
length={learningObjs.length}
titleText={learningObjs.length === 1 ? `Último Recurso de ${user.name}` : `Últimos recursos de ${user.name}`}
noContentText={`${user.name} não publicou nenhum recursos ainda`}
@@ -79,6 +80,7 @@ export default function TabInicio({ id, user, learningObjs, collections }) {
error={false}
/>
<PanelTemplateColecao
+ contrast={contrast}
title={`Últimas coleçoes de ${user.name}`}
length={collections.length}
noContentText={`${user.name} não publicou nenhuma coleção ainda`}
diff --git a/src/Components/TabPanels/PublicUserPageTabs/TabRecursos.js b/src/Components/TabPanels/PublicUserPageTabs/TabRecursos.js
index b8f38e36..70f07ced 100644
--- a/src/Components/TabPanels/PublicUserPageTabs/TabRecursos.js
+++ b/src/Components/TabPanels/PublicUserPageTabs/TabRecursos.js
@@ -21,7 +21,7 @@ import LoadingSpinner from '../../LoadingSpinner.js'
import Template from '../PanelComponents/TemplateRecurso.js'
import { getRequest } from '../../HelperFunctions/getAxiosConfig'
-export default function TabPanelAtividades({id, username}) {
+export default function TabPanelAtividades({ id, username, contrast }) {
const [loading, handleLoading] = useState(true)
const [errorInLearnObj, setErrorInLearnObj] = useState(false)
@@ -83,13 +83,14 @@ export default function TabPanelAtividades({id, username}) {
{
loading ?
(
- <LoadingSpinner text={`Carregando os recursos de ${username}`} />
+ <LoadingSpinner contrast={contrast} text={`Carregando os recursos de ${username}`} />
)
:
(
[
<React.Fragment>
<Template
+ contrast={contrast}
length={learningObjects.length}
titleText={learningObjects.length === 1 ? `Recurso publicado de ${username}` : `Recursos publicados ${username}`}
noContentText={`${username} ainda não publicou nenhum Recurso!`}
diff --git a/src/Components/TabPanels/PublicUserPageTabs/TabRede.js b/src/Components/TabPanels/PublicUserPageTabs/TabRede.js
index 81334d46..15492323 100644
--- a/src/Components/TabPanels/PublicUserPageTabs/TabRede.js
+++ b/src/Components/TabPanels/PublicUserPageTabs/TabRede.js
@@ -16,160 +16,162 @@ 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 } from 'react'
import PanelTemplateRede from '../PanelComponents/TemplateRede.js'
import { fetchAllRequest, getRequest } from '../../HelperFunctions/getAxiosConfig'
import LoadingSpinner from '../../LoadingSpinner.js'
-export default function TabRede ({id, username}) {
- const [loading, handleLoading] = useState(true)
-
- const [errorInFollowing, setErrorInFollowing] = useState(false)
- const [errorInFollowers, setErrorInFollowers] = useState(false)
-
- const [followingList, setFollowing] = useState([])
- const [currFollowingLimit, setCurrFollowingLimit] = useState(12)
- const [loadingMoreFollowing, setLoadingFollowing] = useState(false)
- const [endOfFollowing, setEndOfFollowing] = useState(false)
-
- const [followersList, setFollowers] = useState([])
- const [currFollowerLimit, setFollowersLimit] = useState(12)
- const [loadingMoreFollowers, setLoadingMoreFollowers] = useState(false)
- const [endOfFollowers, setEndOfFollowers] = useState(false)
-
- const showMoreFollowing = (limite) => {
- setLoadingFollowing(true);
- const limit = limite;
- setCurrFollowingLimit(currFollowingLimit + limit)
- const url = `/users/${id}/following/User?offset=${currFollowingLimit}&limit=${limit}`;
- getRequest(url,
- (data) => {
- if (data.errors) {
- setLoadingFollowing(false);
- setEndOfFollowing(true);
- setErrorInFollowing(true);
- }
- else if (data.length >= 1) {
- let currData = [...followingList];
- currData = [...currData.concat(data)];
- setLoadingFollowing(false);
- setFollowing(currData);
- }
- else {
- setLoadingFollowing(false);
- setEndOfFollowing(true);
- }
- },
- (error) => {
- setLoadingFollowing(false);
- setEndOfFollowing(true);
- setErrorInFollowing(true);
- }
- )
- }
-
- const showMoreFollowers = (limite) => {
- setLoadingMoreFollowers(true);
- const limit = limite;
- setFollowersLimit(currFollowerLimit + limit)
- const url = `/users/${id}/followers?offset=${currFollowerLimit}&limit=${limit}`;
- getRequest(url,
- (data) => {
- if (data.errors) {
- setLoadingMoreFollowers(false);
- setEndOfFollowers(true);
- setErrorInFollowers(true);
- }
- else {
- if (data.length >= 1) {
- let currData = [...followersList];
- currData = [...currData.concat(data)];
- setLoadingMoreFollowers(false);
- setFollowers(currData);
- }
- else {
- setLoadingMoreFollowers(false);
- setEndOfFollowers(true)
- }
- }
- },
- (error) => {
- setLoadingMoreFollowers(false);
- setEndOfFollowers(true);
- setErrorInFollowers(true);
- }
- )
- }
+export default function TabRede({ id, username, contrast }) {
+ const [loading, handleLoading] = useState(true)
+
+ const [errorInFollowing, setErrorInFollowing] = useState(false)
+ const [errorInFollowers, setErrorInFollowers] = useState(false)
- async function handleSuccess (responseArr, headersArr) {
- setErrorInFollowing(responseArr[0].errors ? true : false) // prevent of crashing the portal, do not remove it
- setErrorInFollowers(responseArr[1].errors ? true : false) // prevent of crashing the portal, do not remove it
- setFollowers(responseArr[0])
- setFollowing(responseArr[1])
+ const [followingList, setFollowing] = useState([])
+ const [currFollowingLimit, setCurrFollowingLimit] = useState(12)
+ const [loadingMoreFollowing, setLoadingFollowing] = useState(false)
+ const [endOfFollowing, setEndOfFollowing] = useState(false)
- if (headersArr[1].has('X-Total-Count')) {
- setEndOfFollowing(headersArr[1].get('X-Total-Count'));
+ const [followersList, setFollowers] = useState([])
+ const [currFollowerLimit, setFollowersLimit] = useState(12)
+ const [loadingMoreFollowers, setLoadingMoreFollowers] = useState(false)
+ const [endOfFollowers, setEndOfFollowers] = useState(false)
+
+ const showMoreFollowing = (limite) => {
+ setLoadingFollowing(true);
+ const limit = limite;
+ setCurrFollowingLimit(currFollowingLimit + limit)
+ const url = `/users/${id}/following/User?offset=${currFollowingLimit}&limit=${limit}`;
+ getRequest(url,
+ (data) => {
+ if (data.errors) {
+ setLoadingFollowing(false);
+ setEndOfFollowing(true);
+ setErrorInFollowing(true);
}
- if (headersArr[0].has('X-Total-Count')) {
- setEndOfFollowers(headersArr[0].get('X-Total-Count'));
+ else if (data.length >= 1) {
+ let currData = [...followingList];
+ currData = [...currData.concat(data)];
+ setLoadingFollowing(false);
+ setFollowing(currData);
}
- handleLoading(false)
- }
+ else {
+ setLoadingFollowing(false);
+ setEndOfFollowing(true);
+ }
+ },
+ (error) => {
+ setLoadingFollowing(false);
+ setEndOfFollowing(true);
+ setErrorInFollowing(true);
+ }
+ )
+ }
- function handleErrors() {
+ const showMoreFollowers = (limite) => {
+ setLoadingMoreFollowers(true);
+ const limit = limite;
+ setFollowersLimit(currFollowerLimit + limit)
+ const url = `/users/${id}/followers?offset=${currFollowerLimit}&limit=${limit}`;
+ getRequest(url,
+ (data) => {
+ if (data.errors) {
+ setLoadingMoreFollowers(false);
+ setEndOfFollowers(true);
+ setErrorInFollowers(true);
+ }
+ else {
+ if (data.length >= 1) {
+ let currData = [...followersList];
+ currData = [...currData.concat(data)];
+ setLoadingMoreFollowers(false);
+ setFollowers(currData);
+ }
+ else {
+ setLoadingMoreFollowers(false);
+ setEndOfFollowers(true)
+ }
+ }
+ },
+ (error) => {
setLoadingMoreFollowers(false);
setEndOfFollowers(true);
setErrorInFollowers(true);
+ }
+ )
+ }
+
+ async function handleSuccess(responseArr, headersArr) {
+ setErrorInFollowing(responseArr[0].errors ? true : false) // prevent of crashing the portal, do not remove it
+ setErrorInFollowers(responseArr[1].errors ? true : false) // prevent of crashing the portal, do not remove it
+ setFollowers(responseArr[0])
+ setFollowing(responseArr[1])
+
+ if (headersArr[1].has('X-Total-Count')) {
+ setEndOfFollowing(headersArr[1].get('X-Total-Count'));
+ }
+ if (headersArr[0].has('X-Total-Count')) {
+ setEndOfFollowers(headersArr[0].get('X-Total-Count'));
}
+ handleLoading(false)
+ }
- useEffect( () => {
- handleLoading(true)
-
- const urls = [`/users/${id}/followers`, `/users/${id}/following/User`]
-
- fetchAllRequest(urls, handleSuccess, handleErrors)
- }, [])
-
- return (
- <>
- {
- loading ?
- (
- [
- <LoadingSpinner text={`Carregando dados de ${username}`} />
- ]
- )
- :
- (
- [
- <React.Fragment>
- <PanelTemplateRede
- title={`Seguidores de ${username}`}
- length={followersList.length}
- sliceArr={followersList}
- showMore={showMoreFollowers}
- follower={true}
- end={endOfFollowers}
- loadingMore={loadingMoreFollowers}
- error={errorInFollowers}
- noContentText={username + ' não possui nenhum seguidor'}
- />
-
- <PanelTemplateRede
- title={`${username} está seguindo`}
- length={followingList.length}
- sliceArr={followingList}
- showMore={showMoreFollowing}
- follower={false}
- end={endOfFollowing}
- loadingMore={loadingMoreFollowing}
- error={errorInFollowing}
- noContentText={username + ' não segue nenhum usuário'}
- />
- </React.Fragment>
- ]
- )
- }
- </>
- )
+ function handleErrors() {
+ setLoadingMoreFollowers(false);
+ setEndOfFollowers(true);
+ setErrorInFollowers(true);
+ }
+
+ useEffect(() => {
+ handleLoading(true)
+
+ const urls = [`/users/${id}/followers`, `/users/${id}/following/User`]
+
+ fetchAllRequest(urls, handleSuccess, handleErrors)
+ }, [])
+
+ return (
+ <>
+ {
+ loading ?
+ (
+ [
+ <LoadingSpinner contrast={contrast} text={`Carregando dados de ${username}`} />
+ ]
+ )
+ :
+ (
+ [
+ <React.Fragment>
+ <PanelTemplateRede
+ contrast={contrast}
+ title={`Seguidores de ${username}`}
+ length={followersList.length}
+ sliceArr={followersList}
+ showMore={showMoreFollowers}
+ follower={true}
+ end={endOfFollowers}
+ loadingMore={loadingMoreFollowers}
+ error={errorInFollowers}
+ noContentText={username + ' não possui nenhum seguidor'}
+ />
+
+ <PanelTemplateRede
+ contrast={contrast}
+ title={`${username} está seguindo`}
+ length={followingList.length}
+ sliceArr={followingList}
+ showMore={showMoreFollowing}
+ follower={false}
+ end={endOfFollowing}
+ loadingMore={loadingMoreFollowing}
+ error={errorInFollowing}
+ noContentText={username + ' não segue nenhum usuário'}
+ />
+ </React.Fragment>
+ ]
+ )
+ }
+ </>
+ )
}
diff --git a/src/Components/TabPanels/PublicUserPageTabs/UserDescription.js b/src/Components/TabPanels/PublicUserPageTabs/UserDescription.js
index 4fcc273f..df5fcde9 100644
--- a/src/Components/TabPanels/PublicUserPageTabs/UserDescription.js
+++ b/src/Components/TabPanels/PublicUserPageTabs/UserDescription.js
@@ -19,15 +19,15 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React from 'react'
import styled from 'styled-components'
-export default function UserDescription (props) {
+export default function UserDescription(props) {
return (
- <NoPadBox>
- <ContainerDiv>
- <DivSobre>
- <h3>Sobre</h3>
- <p>{props.text}</p>
- </DivSobre>
- </ContainerDiv>
+ <NoPadBox contrast={props.contrast}>
+ <ContainerDiv>
+ <DivSobre contrast={props.contrast}>
+ <h3>Sobre</h3>
+ <p>{props.text}</p>
+ </DivSobre>
+ </ContainerDiv>
</NoPadBox>
)
}
@@ -49,11 +49,13 @@ const DivSobre = styled.div`
font-family : inherit;
font-weight: 500;
line-height: 1.1;
- color: inherit;
+ color: ${(props) => (props.contrast === "" ? "#666" : "white")};
+
}
p {
margin : 0 0 10px;
+ color: ${(props) => (props.contrast === "" ? "#666" : "white")};
}
`
@@ -76,9 +78,10 @@ const NoPadBox = styled.div`
margin-right : auto;
margin-left : auto;
padding : 0;
- background-color : #fff;
+ background-color: ${(props) => (props.contrast === "" ? "#f4f4f4" : "black")};
box-shadow : 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
margin-bottom : 30px;
+ border: ${(props) => (props.contrast === "" ? "0" : "1px solid white")};
@media screen and (min-width: 768px) {
width : max-content;
diff --git a/src/Components/TabPanels/StyledComponents.js b/src/Components/TabPanels/StyledComponents.js
index 182fd013..88b12113 100644
--- a/src/Components/TabPanels/StyledComponents.js
+++ b/src/Components/TabPanels/StyledComponents.js
@@ -61,7 +61,8 @@ export const WhiteContainer = styled.div`
flex-direction : column;
margin-left : auto;
margin-right : auto;
- background-color : #fff;
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ border: ${props => props.contrast === "" ? 0 : "1px solid white"};
box-shadow : 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
margin-bottom : 30px;
@@ -78,6 +79,16 @@ export const WhiteContainer = styled.div`
@media screen and (max-width: 768px) {
width : auto;
}
+
+ .errorText{
+ font-size: 15px;
+ color: ${props => props.contrast === "" ? "" : "white"}
+ font-weight: lighter;
+ margin: 0 0 10px;
+ display: flex;
+ justify-content: center;
+ text-align: center;
+ }
`
export const StyledGrid = styled(Grid)`
@@ -93,6 +104,11 @@ export const Carregados = styled.div`
position : relative;
margin-right : -15px;
margin-left : -15px;
+ .total{
+ margin: 0 0 10px;
+ font-size: 14px;
+ color: ${props => props.contrast === "" ? "" : "white"};
+ }
`
export const HeaderGrid = styled(Grid)`
@@ -146,7 +162,8 @@ export const ContainerStyled = styled.div`
/*User page and Public User page components: */
export const HeaderContainer = styled.div`
- background-color : #afeeee;
+ background-color: ${props => props.contrast === "" ? "#afeeee" : "black"};
+ border: ${props => props.contrast === "" ? 0 : "1px solid white"};
position : relative;
`
@@ -168,22 +185,42 @@ export const UserProfileContainer = styled.div`
@media screen and (min-width: 768px) and (max-width : 991px) {
width : 750px;
}
+ @media screen and (max-width: 600px) {
+ width : 100%;
+ }
`
export const CoverContainer = styled.div`
- height : 230px;
- position : relative;
- @media screen and (max-width: 600px) {
- height : 128px
- }
+ position : relative;
+
+ @media screen and (min-width: 1200px) {
+ height : 234px;
+ }
+ @media screen and (min-width: 992px) and (max-width : 1199px){
+ height : 194px;
+ }
+ @media screen and (min-width: 768px) and (max-width : 991px) {
+ height : 150px;
+ }
+ @media screen and (max-width: 600px) {
+ height : 128px
+ }
`
export const UserProfileInfoDiv = styled.div`
- position : absolute;
- bottom : 0;
- left : 260px;
- overflow : hidden;
- margin-bottom : 20px;
+ position : absolute;
+ bottom : 0;
+ left : 260px;
+ overflow : hidden;
+ margin-bottom : 20px;
+ p {
+ font-size: 28px;
+ color: #fff;
+ padding: 5px 10px;
+ font-weight: 500;
+ border-radius: 5px;
+ text-shadow: 0 1px 2px rgba(0,0,0,.45);
+ }
`
export const CheckTeacherDiv = styled.div`
@@ -191,6 +228,9 @@ export const CheckTeacherDiv = styled.div`
padding-left : 250px;
margin-bottom : -10px;
display : absolute;
+ background-color: ${props => props.contrast === "" ? "" : "black"};
+ border-left: ${props => props.contrast === "" ? 0 : "1px solid white"};
+ border-right: ${props => props.contrast === "" ? 0 : "1px solid white"};
p {
margin : 0 0 10px;
@@ -198,6 +238,7 @@ export const CheckTeacherDiv = styled.div`
font-size: 15px;
line-height: 22px;
text-align: left;
+ color: ${props => props.contrast === "" ? "" : "white"};
span {
padding-right : 5px;
@@ -212,11 +253,20 @@ export const CheckTeacherDiv = styled.div`
`
export const StyledTabs = styled(Tabs)`
+ .MuiTab-textColorPrimary{
+ color: ${props => props.contrast === "" ? "#666" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ font-weight: 400;
+ }
.MuiTab-textColorPrimary.Mui-selected {
- color : #00bcd4;
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: none;
+ font-weight: 500;
}
- .PrivateTabIndicator-colorPrimary-4 {
- background-color : #00bcd4 !important;
+ .MuiTab-textColorPrimary.Mui-disabled {
+ color: ${props => props.contrast === "" ? "#bdbdbd" : "white"};
+ text-decoration: none;
+ font-weight: 400;
}
`
@@ -225,6 +275,10 @@ export const RodapeDiv = styled.div`
flex-direction : row;
justify-content : flex-end;
padding-right : 15px;
+ background-color: ${props => props.contrast === "" ? "transparent" : "black"};
+ border-left: ${props => props.contrast === "" ? 0 : "1px solid white"};
+ border-right: ${props => props.contrast === "" ? 0 : "1px solid white"};
+ border-bottom: ${props => props.contrast === "" ? 0 : "1px solid white"};
.report-button {
@media screen and (max-width: 768px) {
@@ -235,7 +289,7 @@ export const RodapeDiv = styled.div`
`
export const NavBarContentContainer = styled(Container)`
- background-color : transparent;
+ background-color: ${props => props.contrast === "" ? "transparent" : "black"};
padding-bottom : 0;
overflow-x : hidden !important;
overflow-y : hiddden !important;
@@ -243,10 +297,10 @@ export const NavBarContentContainer = styled(Container)`
`
export const BackgroundDiv = styled.div`
- color : #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
font-family : 'Roboto', sans serif;
font-size : 14px;
padding-bottom : 50px;
line-height : 20px;
- background : #f4f4f4;
+ background-color: ${props => props.contrast === "" ? " #f4f4f4" : "black"};
`
diff --git a/src/Components/TabPanels/UserPageTabs/ContainerRedeVazia.js b/src/Components/TabPanels/UserPageTabs/ContainerRedeVazia.js
index 7a1451b2..9243b0fb 100644
--- a/src/Components/TabPanels/UserPageTabs/ContainerRedeVazia.js
+++ b/src/Components/TabPanels/UserPageTabs/ContainerRedeVazia.js
@@ -19,7 +19,7 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React from 'react'
import styled from 'styled-components'
import TabRedeImgDiv from './TabRedeImgDiv.js'
-import {WhiteContainer} from '../StyledComponents.js'
+import { WhiteContainer } from '../StyledComponents.js'
import Grid from '@material-ui/core/Grid';
//Image Import
@@ -30,26 +30,27 @@ import { NoRede3 } from "ImportImages.js";
export default function ContainerRedeVazia (props) {
return (
<React.Fragment>
- <WhiteContainer>
- <RedeVaziaBoxContainer>
- <StyledSpan>Você ainda não tem uma rede.
- <br/>
- Veja como começar:
+ <WhiteContainer contrast={props.contrast}>
+ <RedeVaziaBoxContainer contrast={props.contrast}>
+ <StyledSpan contrast={props.contrast}>
+ Você ainda não tem uma rede.
+ <br />
+ Veja como começar:
</StyledSpan>
- <StyledSpan>
- <StyledHr/>
- <Grid container style={{paddingLeft : "30px", paddingRight : "15px"}}>
- <Grid item md={4} xs={12}>
- <TabRedeImgDiv img={NoRede1} text={"Para encontrar um usuário especÃfico, você pode utilizar a barra de busca e selecionar a busca por \"pessoas\""}/>
- </Grid>
+ <StyledSpan contrast={props.contrast}>
+ <StyledHr />
+ <Grid container style={{ paddingLeft: "30px", paddingRight: "15px" }}>
+ <Grid item md={4} xs={12}>
+ <TabRedeImgDiv img={NoRede1} text={"Para encontrar um usuário especÃfico, você pode utilizar a barra de busca e selecionar a busca por \"pessoas\""} />
+ </Grid>
- <Grid item md={4} xs={12}>
- <TabRedeImgDiv img={NoRede2} text={"Você pode começar a seguir uma pessoa clicando no botão \"seguir\" no card (A) ou na página dela (B)"}/>
- </Grid>
+ <Grid item md={4} xs={12}>
+ <TabRedeImgDiv img={NoRede2} text={"Você pode começar a seguir uma pessoa clicando no botão \"seguir\" no card (A) ou na página dela (B)"} />
+ </Grid>
- <Grid item md={4} xs={12}>
- <TabRedeImgDiv img={NoRede3} text={"Pronto! Agora você poderá acompanhar os novos recursos e coleções dessa pessoas na sua página, na aba \"Perfil e Atividades\""}/>
- </Grid>
+ <Grid item md={4} xs={12}>
+ <TabRedeImgDiv img={NoRede3} text={"Pronto! Agora você poderá acompanhar os novos recursos e coleções dessa pessoas na sua página, na aba \"Perfil e Atividades\""} />
+ </Grid>
</Grid>
</StyledSpan>
</RedeVaziaBoxContainer>
@@ -66,7 +67,7 @@ const StyledHr = styled.hr`
`
const RedeVaziaBoxContainer = styled.div`
- background-color : #fff;
+ background: ${props => props.contrast === "" ? "#fff" : "black"};
padding: 30px;
padding-right: 30px;
padding-left: 30px;
@@ -76,14 +77,16 @@ const RedeVaziaBoxContainer = styled.div`
padding-left: 0 !important;
padding-right: 0 !important;
margin-top: 20px;
-}
-`
+`;
+
const StyledSpan = styled.span`
+ color: ${props => props.contrast === "" ? "" : "white"};
font-weight : lighter;
margin-top: 0;
font-family: Roboto;
font-size: 24px;
p {
+ color: ${props => props.contrast === "" ? "" : "white"};
font-weight : normal;
}
`
diff --git a/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js b/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js
index 95f5a478..e4e99bc6 100644
--- a/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js
+++ b/src/Components/TabPanels/UserPageTabs/ModalExcluirConta.js
@@ -36,7 +36,7 @@ import { ExcluirAvatar } from "ImportImages.js";
function CloseModalButton (props) {
return (
<StyledCloseModalButton onClick={props.handleClose}>
- <CloseIcon/>
+ <CloseIcon style={props.contrast === "" ? { color: "#666" } : { color: "white" }}/>
</StyledCloseModalButton>
)
}
@@ -46,8 +46,8 @@ export default function ModalExcluirConta (props) {
const [formEmail, setEmail] = useState(
{
- key : false,
- value : "",
+ key : true,
+ value : "",
}
)
const handleChange = (e) => {
@@ -92,19 +92,19 @@ export default function ModalExcluirConta (props) {
}}
>
<Fade in={props.open}>
- <Container>
+ <Container contrast={props.contrast}>
<Header>
<span style={{width:"32px"}}/>
<h2>Excluir a Conta Definitivamente</h2>
<CloseModalButton handleClose={props.handleClose}/>
</Header>
<Content>
- <div style={{display : "flex", flexDirection : "column", color : "#666", textAlign : "left"}}>
+ <div style={{display : "flex", flexDirection : "column", textAlign : "left"}}>
<div style={{display : "flex", flexDirection : "row", margin : "0 30px", justifyContent : "center", alignContent : "center"}}>
<div style={{height : "90px", position : "relative"}}>
<img src={ExcluirAvatar} alt="excluir-avatar" style={{height : "inherit", objectFit : "contain", verticalAlign : "middle"}}/>
</div>
- <p style={{paddingLeft : "10px"}}>Você é muito importante para a rede, ficarÃamos felizes se você ficasse. Quer contar o que aconteceu? Talvez possamos ajudar. <StyledLink to="/contato">Entre em contato.</StyledLink></p>
+ <p style={{paddingLeft : "10px"}}>Você é muito importante para a rede, ficarÃamos felizes se você ficasse. Quer contar o que aconteceu? Talvez possamos ajudar. <StyledLink to="/contato" className={`${props.contrast}LinkColor`}>Entre em contato.</StyledLink></p>
</div>
<p style={{marginTop : "20px"}}>
Saiba que a exclusão da conta removerá o seu perfil permanentemente. Se você publicou algum recurso, ele ainda ficará disponÃvel para os usuários da plataforma.
@@ -113,6 +113,7 @@ export default function ModalExcluirConta (props) {
É necessário que você digite seu e-mail para confirmar a exclusão:
</p>
<FormInput
+ contrast={props.contrast}
inputType={"text"}
name={"email"}
value={formEmail.value}
@@ -122,9 +123,9 @@ export default function ModalExcluirConta (props) {
error = {formEmail.key}
help = {formEmail.key ? ( formEmail.value.length === 0 ? "Faltou preencher seu e-mail." : "O e-mail deve ser o mesmo no qual você cadastrou esta conta") : ""}
/>
- <div style={{display : "flex", flexDirection : "row", justifyContent : "space-evenly", paddingTop : "15px"}}>
- <GreyButton callback={props.handleClose} text={"Cancelar"}/>
- <RedButton disabled={formEmail.key} onClick = {() => {deleteAccount()}}>EXCLUIR PERMANENTEMENTE</RedButton>
+ <div style={{display : "flex", flexDirection : "row", justifyContent : "space-evenly", paddingTop : "15px"}}>
+ <GreyButton contrast={props.contrast} callback={props.handleClose} text={"Cancelar"}/>
+ <RedButton contrast={props.contrast} disabled={formEmail.key} onClick = {() => {deleteAccount()}}>EXCLUIR PERMANENTEMENTE</RedButton>
</div>
</div>
</Content>
@@ -136,10 +137,17 @@ export default function ModalExcluirConta (props) {
}
const RedButton = styled(Button)`
- background-color : rgb(230,60,60) !important;
- color : #fff !important;
+ color: ${props => props.contrast === "" ? "white" : "yellow"} !important;
+ text-decoration : ${props => props.contrast === "" ? "none" : "underline yellow"} !important;
+ background-color : ${props => props.contrast === "" ? "rgb(230,60,60)" : "black"} !important;
font-weight : bolder;
box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
+
+ :disabled {
+ color: ${props => props.contrast === "" ? "white" : "white"} !important;
+ text-decoration : none !important;
+ background-color : ${props => props.contrast === "" ? "#666" : "black"} !important;
+ }
`
const Content = styled.div`
@@ -158,7 +166,6 @@ const Header = styled.div`
h2 {
font-size : 26px;
font-weight : lighter;
- color : #666
}
`
@@ -186,9 +193,12 @@ const StyledModal = styled(Modal)`
`
const Container = styled.div`
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ color: ${props => props.contrast === "" ? "#666" : "white"} !important;
+ border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
+
box-sizing : border-box;
box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
- background-color : white;
align : center;
display : flex;
flex-direction : column;
@@ -210,6 +220,6 @@ const Container = styled.div`
}
`
const StyledLink = styled(Link)`
- text-decoration : none !important;
- color : #00bcd4 !important;
+ text-decoration : none;
+ color : #00bcd4;
`
diff --git a/src/Components/TabPanels/UserPageTabs/PanelAtividades.js b/src/Components/TabPanels/UserPageTabs/PanelAtividades.js
index ff2126a3..7e771677 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelAtividades.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelAtividades.js
@@ -122,6 +122,7 @@ export default function TabPanelAtividades(props) {
}
}
}
+
useEffect(() => {
const url = `/feed?offset=0&limit=30`
@@ -129,7 +130,7 @@ export default function TabPanelAtividades(props) {
}, [])
return (
- <MainContainerDesktop>
+ <MainContainerDesktop contrast={props.contrast}>
<SnackBar
snackbarOpen={snackInfo.open}
handleClose={handleCloseSnackBar}
@@ -138,110 +139,133 @@ export default function TabPanelAtividades(props) {
text={snackInfo.text}
/>
<Paper elevation={3}>
- <div>
+ <div style={props.contrast === "" ? {} : { backgroundColor: "black" }}>
<DivTitulo>
<InnerDivTitulo>
- <TituloContent>
+ <TituloContent contrast={props.contrast}>
<p style={{ margin: "0 0 10px", marginBottom: "40px" }}>Todas Notificações</p>
</TituloContent>
</InnerDivTitulo>
</DivTitulo>
{
loading ?
- (
- <LoadingSpinner text={'Carregando Atividades'} />
- )
- :
- (
- [
- <div>
- {
- error ?
- <p
- style={{ fontSize: "15px", fontWeight: "lighter", margin: "0 0 10px", display: "flex", justifyContent: "center", textAlign: "center" }}
- >
- Erro ao tentar obter as notificações
- </p>
- :
- notificatonsLength === 0 ?
- (
+ (
+ <LoadingSpinner text={'Carregando Atividades'} contrast={props.contrast} />
+ )
+ :
+ (
+ [
+ <div>
+ {
+ error ?
+ <ErrorP
+ contrast={props.contrast}
+ >
+ Erro ao tentar obter as notificações
+ </ErrorP>
+ :
+ notificatonsLength === 0 ?
+ (
- <NoNotificationsDiv>
- <div>
- <div>
- <img src={Bolo} alt='bolo' style={{ width: "23px", display: "block", marginLeft: "auto", marginRight: "auto" }} />
- <H3Styled>Você se cadastrou na Plataforma</H3Styled>
- </div>
- <p
- style={{ fontSize: "15px", fontWeight: "lighter", margin: "0 0 10px", display: "flex", justifyContent: "center", textAlign: "center" }}
- >Construa conosco a plataforma e amplie sua rede de conhecimento interagindo
- <br />
- com pessoas envolvidas com experiências que ocorrem em todo o Brasil!
- </p>
- </div>
- </NoNotificationsDiv>
+ <NoNotificationsDiv>
+ <div>
+ <div>
+ <img src={Bolo} alt='bolo' style={{ width: "23px", display: "block", marginLeft: "auto", marginRight: "auto" }} />
+ <H3Styled contrast={props.contrast}>Você se cadastrou na Plataforma</H3Styled>
+ </div>
+ <InfoP
+ contrast={props.contrast}
+ >Construa conosco a plataforma e amplie sua rede de conhecimento interagindo
+ <br />com pessoas envolvidas com experiências que ocorrem em todo o Brasil!
+ </InfoP>
+ </div>
+ </NoNotificationsDiv>
- )
- :
- (
- <>
- <List height={400} width={300}>
- {
- notifications.map((notification, id) =>
- (notification.recipient !== null) &&
- <ActivityListItem
- key={id}
- onMenuBar={false}
- avatar={notification.owner.avatar ? apiDomain + notification.owner.avatar : noAvatar}
- activity={notification.activity}
- actionType={notification.trackable_type}
- objectType={notification.recipient_type}
- createdAt={notification.created_at}
- ownerName={notification.owner.name}
- ownerHref={'/usuario-publico/' + notification.owner.id}
- recipientName={notification.recipient.name}
- recipientHref={"/recurso/" + notification.recipient.id}
- />
- )
- }
- </List>
- {
- loadingMore ?
- <LoadingSpinner text="Carregando mais atividades..." />
- :
- <Grid container direction="row" alignItems="center" justify="flex-start">
- <Grid item xs={12} md={4}>
- <LoadMoreButton onClick={() => { showMore(4) }}>CARREGAR MAIS 4</LoadMoreButton>
- </Grid>
- <Grid item xs={12} md={4}>
- <LoadMoreButton onClick={() => { showMore(20) }}>CARREGAR MAIS 20</LoadMoreButton>
- </Grid>
- <Grid xs={12} md={4} item style={{ fontSize: "14px", color: "#666" }}>
- <ShowData disabled={true}>
- Mostrando {notificatonsLength} {notificatonsLength === 1 ? "Atividade " : "Atividades "}
- de {totalResults}
- </ShowData>
- </Grid>
- </Grid>
- }
- </>
- )
+ )
+ :
+ (
+ <>
+ <List height={400} width={300}>
+ {
+ notifications.map((notification, id) =>
+ (notification.recipient_type !== "NilClass") &&
+ <ActivityListItem
+ contrast={props.contrast}
+ key={id}
+ onMenuBar={false}
+ avatar={notification.owner.avatar ? apiDomain + notification.owner.avatar : noAvatar}
+ activity={notification.activity}
+ actionType={notification.trackable_type}
+ objectType={notification.recipient_type}
+ createdAt={notification.created_at}
+ ownerName={notification.owner.name}
+ ownerHref={'/usuario-publico/' + notification.owner.id}
+ recipientName={notification.recipient.name}
+ recipientHref={"/recurso/" + notification.recipient.id}
+ />
+ )
+ }
+ </List>
+ {
+ loadingMore ?
+ <LoadingSpinner contrast={props.contrast} text="Carregando mais atividades..." />
+ :
+ <Grid container direction="row" alignItems="center" spacing={1}>
+ <Grid xs={12} md={12} item style={{ fontSize: "14px", color: "#666" }}>
+ <ShowData disabled={true} contrast={props.contrast}>
+ Mostrando {notificatonsLength} {notificatonsLength === 1 ? "Atividade " : "Atividades "}de {totalResults}
+ </ShowData>
+ </Grid>
+ <StyledGrid item xs={12} md={12}>
+ <LoadMoreButton contrast={props.contrast} onClick={() => { showMore(4) }}>CARREGAR MAIS 4</LoadMoreButton>
+ <LoadMoreButton contrast={props.contrast} onClick={() => { showMore(20) }}>CARREGAR MAIS 20</LoadMoreButton>
+ </StyledGrid>
+ </Grid>
}
- </div>
-
- ]
- )
+ </>
+ )
+ }
+ </div>
+ ]
+ )
}
</div>
</Paper>
</MainContainerDesktop>
)
}
+const StyledGrid = styled(Grid)`
+ display: flex;
+ align-items: center;
+ justify-content: center;
+`
+
+const InfoP = styled.p`
+ font-size: "15px";
+ font-weight: "lighter";
+ margin: "0 0 10px";
+ display: "flex";
+ justify-content: "center";
+ text-align: "center";
+ color: ${props => props.contrast === "" ? "" : "white"};
+`
+
+const ErrorP = styled.p`
+ font-size: "15px";
+ font-weight: "lighter";
+ margin: "0 0 10px";
+ display: "flex";
+ justify-content: "center";
+ text-align: "center";
+ color: ${props => props.contrast === "" ? "" : "white"};
+`
const MainContainerDesktop = styled.div`
padding : 10px 0 8px 0;
margin-left : auto;
margin-right : auto;
+ background-color: ${props => props.contrast === "" ? "" : "black"};
+ border: ${props => props.contrast === "" ? "" : "1px solid white"};
@media screen and (min-width: 1200px) {
width : 1170px;
@@ -257,7 +281,7 @@ const MainContainerDesktop = styled.div`
const H3Styled = styled.h3`
font-size: 24px;
font-weight : lighter;
- color : #00bcd4;
+ color: ${props => props.contrast === "" ? "#00bcd4" : "white"};
margin-top : 20px;
margin-bottom : 10px;
display : flex;
@@ -274,35 +298,34 @@ const NoNotificationsDiv = styled.div`
`
const LoadMoreButton = styled(Button)`
+ margin-left: 6px !important;
+ margin-right: 6px !important;
outline : none !important;
- display : block !important;
- cusor : pointer !important;
- min-height : 36px !important;
- min-widht : 88px !important;
- line-height: 36px !important;
+ cursor : pointer !important;
+ max-height : 36px !important;
+ min-width : 88px !important;
vertical-align: middle !important;
- border : 0 !important;
+ border: ${props => props.contrast === "" ? "" : "1px solid white !important"};
padding : 0 px !important;
- margin : auto !important;
- text-decoration : none !important;
+
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
font-weight : 500 !important;
overflow : hidden !important;
text-transform : uppercase !important;
font-size : 14px !important;
- background : transparent !important;
- color : #666 !important
+ background : transparent !important;
+ color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
&:hover {
- background : rgba(158,158,158,0.2) !important
+ background-color: ${props => props.contrast === "" ? "rgba(158,158,158,0.2) !important" : "rgba(255,255,0,0.24) !important"};
}
`
const ShowData = styled(Button)`
outline : none !important;
display : block !important;
- cusor : pointer !important;
- min-height : 36px !important;
- min-widht : 88px !important;
- line-height: 36px !important;
+ cursor : pointer !important;
+ max-height : 36px !important;
+ min-width : 88px !important;
vertical-align: middle !important;
border : 0 !important;
padding : 0 px !important;
@@ -313,7 +336,7 @@ const ShowData = styled(Button)`
text-transform : none !important;
font-size : 14px !important;
background : transparent !important;
- color : #666 !important
+ color: ${props => props.contrast === "" ? "#666" : "white"} !important;
&:hover {
background : rgba(158,158,158,0.2) !important
}
@@ -325,6 +348,7 @@ const TituloContent = styled.div`
position : relative;
font-family: Roboto, sans-serif;
font-weight : ligther;
+ color: ${props => props.contrast === "" ? "" : "white"};
`
const InnerDivTitulo = styled.div`
diff --git a/src/Components/TabPanels/UserPageTabs/PanelColecoes.js b/src/Components/TabPanels/UserPageTabs/PanelColecoes.js
index 427a7d5c..3adaa32c 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelColecoes.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelColecoes.js
@@ -153,33 +153,34 @@ export default function TabPanelColecoes(props) {
{
loading ?
(
- <LoadingSpinner text={'CARREGANDO COLEÇÕES'} />
+ <LoadingSpinner contrast={props.contrast} text={'CARREGANDO COLEÇÕES'} />
)
:
(
[
<React.Fragment>
<Tentativa
+ contrast={props.contrast}
title={"Minhas Coleções"}
length={userCollections.length}
noContentText={
- <Grid direction='column' justify='center' alignItems='center'>
+ <StyledNewGrid contrast={props.contrast} direction='column' justify='center' alignItems='center'>
<Grid item>
<img src={ColecaoVazia} alt="ColecaoVazia" style={{ height: "150px", width: "150px", verticalAlign: "middle", border: "0" }} />
</Grid>
<Grid>
- <span style={{ fontFamily: "Roboto", fontWeight: "lighter", fontSize: "24px", textAlign: 'center' }}>
- Criamos a sua primeira Coleção!
+ <span className="title">
+ Crie a sua primeira Coleção!
</span>
</Grid>
<Grid>
- <p style={{ fontFamily: "Roboto", fontSize: "16px", margin: "10px 0 0", fontWeight: "normal" }}>
+ <p className="explication">
Adicione nela recursos que você queira acessar mais tarde.
<br />
Crie novas coleções clicando no cartão roxo "Criar Colecão".
</p>
</Grid>
- </Grid>
+ </StyledNewGrid>
}
sliceArr={userCollections}
showMore={showMoreUserCollections}
@@ -191,6 +192,7 @@ export default function TabPanelColecoes(props) {
/>
<PanelTemplateColecao
+ contrast={props.contrast}
title={"Coleções que você segue"}
length={followedCollections.length}
noContentText={"Você ainda não segue nenhuma coleção."}
@@ -215,34 +217,36 @@ function Tentativa(props) {
if (props.error)
return (
- <WhiteContainer>
+ <WhiteContainer contrast={props.contrast}>
<Title
+ contrast={props.contrast}
title={props.title}
length={props.length}
/>
<p
- style={{ fontSize: "15px", fontWeight: "lighter", margin: "0 0 10px", display: "flex", justifyContent: "center", textAlign: "center" }}
+ className="errorText"
>
Erro ao tentar obter os dados
- </p>
+ </p>
</WhiteContainer>
)
else
return (
- <WhiteContainer>
- <CriarColecaoModal open={modalOpen} handleClose={() => { handleModal(); props.callback() }} />
+ <WhiteContainer contrast={props.contrast}>
+ <CriarColecaoModal contrast={props.contrast} open={modalOpen} handleClose={() => { handleModal(); props.callback() }} />
<Title
+ contrast={props.contrast}
title={props.title}
length={props.end}
/>
<StyledGrid container spacing={1} style={{ paddingLeft: "30px", paddingRight: "15px" }}>
<Grid item xs={12} sm={6} md={'auto'} lg={3}>
- <CardDiv onClick={() => { handleModal() }}>
- <div style={{ backgroundColor: "#673ab7", display: "flex", height: "100%", width: "100%", justifyContent: "center", alignItems: "center", cursor: "pointer" }}>
+ <CardDiv contrast={props.contrast} onClick={() => { handleModal() }}>
+ <div className="background">
<CreateNewFolderIcon style={{ color: "#fff", fontSize: "70px" }} />
- <p style={{ fontSize: "16px", margin: "0 0 10px", color: "#fff" }}>
+ <p className="action">
CRIAR COLEÇÃO
</p>
</div>
@@ -268,6 +272,7 @@ function Tentativa(props) {
props.sliceArr.map((card) =>
<Grid item xs={12} sm={6} md={'auto'} lg={3} key={card.id}>
<CollectionCardFunction
+ contrast={props.contrast}
name={card.name}
tags={card.tags}
rating={card.review_average}
@@ -293,9 +298,10 @@ function Tentativa(props) {
</StyledGrid>
{
props.loadingMore ?
- <LoadingSpinner text={'Carregando Recursos...'} />
+ <LoadingSpinner contrast={props.contrast} text={'Carregando Recursos...'} />
:
<ButtonsAreaColecao
+ contrast={props.contrast}
sliceLength={props.sliceArr.length}
length={props.length}
showMore={props.showMore}
@@ -307,10 +313,45 @@ function Tentativa(props) {
)
}
+const StyledNewGrid = styled(Grid)`
+
+ .title{
+ font-family: Roboto;
+ font-weight: lighter;
+ font-size: 24px;
+ text-align: center;
+ color: ${props => props.contrast === "" ? "" : "white"};
+ }
+ .explication{
+ font-family: Roboto;
+ font-size: 16px;
+ margin: 10px 0 0;
+ color: ${props => props.contrast === "" ? "" : "white"};
+ font-weight: normal;
+ }
+
+`
+
const CardDiv = styled(Card)`
margin-top : 10px;
margin-bottom : 10px;
height : 381px;
width : 272.5px;
- ${'' /* float : left; */}
+ border: ${props => props.contrast === "" ? 0 : "1px solid white"};
+
+ .background{
+ background-color: ${props => props.contrast === "" ? "#673ab7" : "black"};
+ display: flex;
+ height: 100%;
+ width: 100%;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+ }
+ .action{
+ font-size: 16px;
+ margin: 0 0 10px;
+ color: ${props => props.contrast === "" ? "#fff" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ }
`
diff --git a/src/Components/TabPanels/UserPageTabs/PanelCuradoria.js b/src/Components/TabPanels/UserPageTabs/PanelCuradoria.js
index 084f865b..d2196091 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelCuradoria.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelCuradoria.js
@@ -90,13 +90,14 @@ export default function TabPanelCuradoria(props) {
{
loading ?
(
- <LoadingSpinner text={"Carregando Recursos"} />
+ <LoadingSpinner contrast={props.contrast} text={"Carregando Recursos"} />
)
:
(
[
<React.Fragment>
<TemplateCuradoria
+ contrast={props.contrast}
length={curating.length}
titleText={curating.length === 1 ? "Recurso sendo avaliado pela curadoria" : "Recursos sendo avaliados pela curadoria"}
noContentText={"Você não tem nenhum recurso sendo avaliado pelos curadores."}
diff --git a/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js b/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js
index 3857508b..cd49d1a7 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js
@@ -117,22 +117,24 @@ export default function TabPanelEditarPerfil(props) {
return (
<React.Fragment>
<ModalAlterarCover
+ contrast={state.contrast}
open={open}
handleClose={controlModal}
cover={tempCover}
id={state.currentUser.id}
/>
<ModalAlterarAvatar
+ contrast={state.contrast}
open={alterarAvatatarOpen}
handleClose={controlModalAvatar}
userAvatar={state.currentUser.avatar}
id={state.currentUser.id}
/>
<div className="card-config">
- <h1 style={{ fontWeight: "300" }}>Editar Perfil </h1>
+ <h1 className="title">Editar Perfil </h1>
<div className='content-div'>
<div style={{ padding: "0", display: "flex", flexDirection: "column" }}>
- <HeaderContainer>
+ <HeaderContainer contrast={state.contrast}>
<div style={{ position: "relative", height: "100%" }}>
<img src={state.currentUser.cover ? `${apiDomain}` + state.currentUser.cover : null} alt={state.currentUser.cover ? "user cover avatar" : ""} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
<input accept="image/*" style={{ display: "none" }} id="icon-button-file" type="file" onChange={(e) => updateCover(e.target.files)} />
@@ -158,6 +160,7 @@ export default function TabPanelEditarPerfil(props) {
<div style={{ display: "flex", flexDirection: "row", justifyContent: "center" }}>
<form onSubmit={e => handleSubmit(e)}>
<FormInput
+ contrast={state.contrast}
inputType={"text"}
name={"Nome Completo"}
value={formNome.value}
@@ -167,6 +170,7 @@ export default function TabPanelEditarPerfil(props) {
error={formNome.key}
/>
<FormInput
+ contrast={state.contrast}
inputType={"text"}
name={"Sobre Mim"}
value={formAboutMe.value}
@@ -182,8 +186,8 @@ export default function TabPanelEditarPerfil(props) {
</form>
</div>
<ButtonsDiv>
- <Link to="perfil" ><ButtonCancelar ><span>CANCELAR</span></ButtonCancelar></Link>
- <ButtonConfirmar onClick={e => handleSubmit(e)}><span>SALVAR ALTERAÇÕES</span></ButtonConfirmar>
+ <Link to="perfil" ><ButtonCancelar contrast={state.contrast} >CANCELAR</ButtonCancelar></Link>
+ <ButtonConfirmar contrast={state.contrast} onClick={e => handleSubmit(e)}>SALVAR ALTERAÇÕES</ButtonConfirmar>
</ButtonsDiv>
</div>
</div >
@@ -193,10 +197,8 @@ export default function TabPanelEditarPerfil(props) {
}
const ButtonConfirmar = styled(Button)`
- background-color : #00bcd4 !important;
- color : #fff !important;
+ background-color: ${props => props.contrast === "" ? "#00bcd4 !important" : "black !important"};
font-family : 'Roboto',sans-serif !important;
- font-size : 14px !important;
font-weight : 500 !important;
padding-left : 16px !important;
padding-right : 16px !important;
@@ -209,7 +211,7 @@ const ButtonConfirmar = styled(Button)`
font-style : inherit !important;
font-variant : inherit !important;
font-family : inherit !important;
- text-decoration : none !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
overflow : hidden !important;
display : inline-block !important;
position : relative !important;
@@ -222,7 +224,11 @@ const ButtonConfirmar = styled(Button)`
text-align : center !important;
border-radius : 3px !important;
box-sizing : border-box !important;
- border : 0 !important;
+ color: ${props => props.contrast === "" ? "white !important" : "yellow !important"};
+ border: ${props => props.contrast === "" ? "0 !important" : "1px solid white !important"};
+ :hover{
+ background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
`
export const ButtonCancelar = styled(Button)`
@@ -238,7 +244,7 @@ export const ButtonCancelar = styled(Button)`
font-style : inherit !important;
font-variant : inherit !important;
font-family : inherit !important;
- text-decoration : none !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
overflow : hidden !important;
display : inline-block !important;
position : relative !important;
@@ -252,18 +258,17 @@ export const ButtonCancelar = styled(Button)`
border-radius : 3px !important;
box-sizing : border-box !important;
user-select : none !important;
- border : 0 !important;
+ color: ${props => props.contrast === "" ? "#666" : "yellow !important"};
+ background-color: ${props => props.contrast === "" ? "" : "transparent !important"};
padding : 0 6px !important;
margin : 6px 8px !important;
- :hover{
- background-color : #f1f1f1 !important;
- }
`
const ButtonsDiv = styled.div`
text-align : right;
margin-top : 80px;
+ text-decoration: underline;
`
const ChangeAvatarDiv = styled.div`
@@ -313,7 +318,8 @@ const ProfileAvatarDiv = styled.div`
`
const HeaderContainer = styled.div`
- background-color : #afeeee;
+ background: ${props => props.contrast === "" ? "#afeeee" : "black"};
+ border: ${props => props.contrast === "" ? "1px solid #afeeee" : "1px solid white"};
position : relative;
height : 150px;
border-radius : 8px;
diff --git a/src/Components/TabPanels/UserPageTabs/PanelFavoritos.js b/src/Components/TabPanels/UserPageTabs/PanelFavoritos.js
index 9cf48988..4ac34bc7 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelFavoritos.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelFavoritos.js
@@ -134,13 +134,14 @@ export default function TabPanelFavoritos(props) {
{
loading ?
(
- <LoadingSpinner text={'CARREGANDO...'} />
+ <LoadingSpinner contrast={props.contrast} text={'CARREGANDO...'} />
)
:
(
[
<React.Fragment>
<Template
+ contrast={props.contrast}
length={likedLearnObjs.length}
titleText={likedLearnObjs.length === 1 ? "Recurso favoritado" : "Recursos favoritados"}
noContentText={"Você não favoritou nenhum recurso ainda"}
@@ -152,6 +153,7 @@ export default function TabPanelFavoritos(props) {
/>
<PanelTemplateColecao
+ contrast={props.contrast}
title={"Coleções favoritadas"}
length={likedCollections.length}
noContentText={"Você ainda não curtiu nenhuma coleção."}
diff --git a/src/Components/TabPanels/UserPageTabs/PanelGerenciarConta.js b/src/Components/TabPanels/UserPageTabs/PanelGerenciarConta.js
index 29edb847..502a5e04 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelGerenciarConta.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelGerenciarConta.js
@@ -16,59 +16,64 @@ 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'
import Paper from '@material-ui/core/Paper';
import FormInput from "../../FormInput.js"
-import {CompletarCadastroButton} from './PanelSolicitarContaProfessor.js'
-import {ButtonCancelar} from './PanelEditarPerfil.js'
+import { CompletarCadastroButton } from './PanelSolicitarContaProfessor.js'
+import { ButtonCancelar } from './PanelEditarPerfil.js'
import ValidateUserInput from '../../HelperFunctions/FormValidationFunction.js'
import ModalExcluirConta from './ModalExcluirConta.js'
+import { Store } from '../../../Store'
-export default function TabPanelGerenciarConta (props) {
+export default function TabPanelGerenciarConta(props) {
+ const { state } = useContext(Store)
const [senhaAtual, setSenhaAtual] = useState(
{
- key : false,
- value : localStorage.getItem("@portalmec/senha") || ""
- })
+ key: false,
+ value: localStorage.getItem("@portalmec/senha") || ""
+ })
const [novaSenha, setNovaSenha] = useState(
{
- key : false,
- value : ""
- })
+ key: false,
+ value: ""
+ })
const [novaSenhaConfirmacao, setNovaSenhaConfirmacao] = useState(
{
- key : false,
- value : ""
- })
+ key: false,
+ value: ""
+ })
const [novoEmail, setNovoEmail] = useState(
{
- key : false,
- value : ""
- })
+ key: false,
+ value: ""
+ })
const handleChangeSenha = (e, type) => {
const userInput = e.target.value
const flag = (type === 'confirmacao' ? ValidateUserInput('confirmation', userInput, novaSenha.value) : ValidateUserInput('password', userInput))
- if(type === 'senhaAtual') {
- setSenhaAtual({...senhaAtual,
- key : flag,
- value : userInput
+ if (type === 'senhaAtual') {
+ setSenhaAtual({
+ ...senhaAtual,
+ key: flag,
+ value: userInput
})
}
- else if(type === 'novaSenha') {
- setNovaSenha({...novaSenha,
- key : flag,
- value : userInput
+ else if (type === 'novaSenha') {
+ setNovaSenha({
+ ...novaSenha,
+ key: flag,
+ value: userInput
})
}
- else if (type === 'confirmacao'){
- setNovaSenhaConfirmacao({...novaSenhaConfirmacao,
- key : flag,
- value : userInput
+ else if (type === 'confirmacao') {
+ setNovaSenhaConfirmacao({
+ ...novaSenhaConfirmacao,
+ key: flag,
+ value: userInput
})
}
}
@@ -77,43 +82,47 @@ export default function TabPanelGerenciarConta (props) {
const userInput = e.target.value
const flag = ValidateUserInput('email', userInput)
- setNovoEmail({...novoEmail,
- key : flag,
- value : userInput
+ setNovoEmail({
+ ...novoEmail,
+ key: flag,
+ value: userInput
})
}
const limpaCamposForm = () => {
- setSenhaAtual({...senhaAtual,
- key : false,
- value : ''
+ setSenhaAtual({
+ ...senhaAtual,
+ key: false,
+ value: ''
})
- setNovaSenha({...novaSenha,
- key : false,
- value : ''
+ setNovaSenha({
+ ...novaSenha,
+ key: false,
+ value: ''
})
- setNovaSenhaConfirmacao({...novaSenhaConfirmacao,
- key : false,
- value : ''
+ setNovaSenhaConfirmacao({
+ ...novaSenhaConfirmacao,
+ key: false,
+ value: ''
})
}
const onSubmit = (e, type) => {
e.preventDefault()
- if (type === 'senha'){
+ if (type === 'senha') {
if (!(senhaAtual.key || novaSenha.key || novaSenhaConfirmacao.key)) {
- const info = {user : {password : novaSenha.value}}
+ const info = { user: { password: novaSenha.value } }
props.updateUserPassword(info)
limpaCamposForm()
}
}
else {
- const info = {user : {email : novoEmail.value}}
+ const info = { user: { email: novoEmail.value } }
props.updateUserEmail(info)
@@ -125,92 +134,96 @@ export default function TabPanelGerenciarConta (props) {
return (
<>
- <Paper elevation={3} style= {{width:"100%"}}>
- <div className='card-config'>
- <div className='content-div'>
- <h1>Gerenciar Conta</h1>
- <div style={{display : "flex", flexDirection : "column"}}>
- <form style={{margin : "0 0 20px 0"}} onSubmit={e => onSubmit(e, 'senha')}>
- <h4 style={{display:"flex", justifyContent:"flex-start", fontSize:"18px"}}>Alterar Senha</h4>
- <FormInput
- inputType={"password"}
- name={"Senha Atual"}
- value={senhaAtual.value}
- placeholder={"Senha atual"}
- handleChange={e => handleChangeSenha(e, 'senhaAtual')}
- required={true}
- error={senhaAtual.key}
- help={ senhaAtual.key ? "Faltou inserir sua senha atual" : ""}
- />
- <FormInput
- inputType={"password"}
- name={"Nova senha"}
- value={novaSenha.value}
- placeholder={"Nova senha"}
- handleChange={e => handleChangeSenha(e, 'novaSenha')}
- required={true}
- error={novaSenha.key}
- help={ novaSenha.key ? (novaSenha.value.length === 0 ? "Faltou definir uma nova senha" : "A senha precisa ter no mÃnimo 8 caracteres.") : ""}
- />
- <FormInput
- inputType={"password"}
- name={"Digite novamente a nova senha"}
- value={novaSenhaConfirmacao.value}
- placeholder={"Digite novamente a nova senha"}
- handleChange={e => handleChangeSenha(e, 'confirmacao')}
- required={true}
- error={novaSenhaConfirmacao.key}
- help={ novaSenhaConfirmacao.key ? "As senhas devem ser iguais" : ""}
- />
- <div style={{display:"flex", flexDirection:"row", justifyContent:"space-evenly"}}>
- <span style={{paddingTop:"0.7em"}}><a href="recuperar-senha" style={{textAlign: "flex-start", color:"#00bcd4"}}>Esqueceu a senha?</a></span>
- <div style={{margin:"0"}}>
- <ButtonCancelar onClick={limpaCamposForm}>Limpar Campos</ButtonCancelar>
- <CompletarCadastroButton type="submit">Alterar Senha</CompletarCadastroButton>
- </div>
+ <Paper elevation={3} style={{ width: "100%" }}>
+ <div className='card-config'>
+ <div className='content-div'>
+ <h1 className="title">Gerenciar Conta</h1>
+ <div style={{ display: "flex", flexDirection: "column" }}>
+ <form style={{ margin: "0 0 20px 0" }} onSubmit={e => onSubmit(e, 'senha')}>
+ <h4 className="subtitle">Alterar Senha</h4>
+ <FormInput
+ contrast={state.contrast}
+ inputType={"password"}
+ name={"Senha Atual"}
+ value={senhaAtual.value}
+ placeholder={"Senha atual"}
+ handleChange={e => handleChangeSenha(e, 'senhaAtual')}
+ required={true}
+ error={senhaAtual.key}
+ help={senhaAtual.key ? "Faltou inserir sua senha atual" : ""}
+ />
+ <FormInput
+ contrast={state.contrast}
+ inputType={"password"}
+ name={"Nova senha"}
+ value={novaSenha.value}
+ placeholder={"Nova senha"}
+ handleChange={e => handleChangeSenha(e, 'novaSenha')}
+ required={true}
+ error={novaSenha.key}
+ help={novaSenha.key ? (novaSenha.value.length === 0 ? "Faltou definir uma nova senha" : "A senha precisa ter no mÃnimo 8 caracteres.") : ""}
+ />
+ <FormInput
+ contrast={state.contrast}
+ inputType={"password"}
+ name={"Digite novamente a nova senha"}
+ value={novaSenhaConfirmacao.value}
+ placeholder={"Digite novamente a nova senha"}
+ handleChange={e => handleChangeSenha(e, 'confirmacao')}
+ required={true}
+ error={novaSenhaConfirmacao.key}
+ help={novaSenhaConfirmacao.key ? "As senhas devem ser iguais" : ""}
+ />
+ <div style={{ display: "flex", flexDirection: "row", justifyContent: "space-evenly" }}>
+ <span style={{ paddingTop: "0.7em" }}><a href="recuperar-senha" className="link">Esqueceu a senha?</a></span>
+ <div style={{ margin: "0" }}>
+ <ButtonCancelar contrast={state.contrast} onClick={limpaCamposForm}>Limpar Campos</ButtonCancelar>
+ <CompletarCadastroButton contrast={state.contrast} type="submit">Alterar Senha</CompletarCadastroButton>
+ </div>
+ </div>
+ </form>
</div>
- </form>
+ </div>
</div>
- </div>
- </div>
- </Paper>
- <Paper elevation={3} style= {{width:"100%"}}>
- <div className='card-config'>
- <div className='content-div'>
- <div style={{display : "flex", flexDirection : "column"}}>
- <form onSubmit={(e) => onSubmit(e, 'email')}>
- <h4 style={{display:"flex", justifyContent:"flex-start", fontSize:"18px"}}>Alterar e-mail</h4>
- <FormInput
- inputType={"text"}
- name={"email"}
- value={novoEmail.value}
- placeholder={"E-mail"}
- handleChange={e => handleChangeEmail(e)}
- required={true}
- error = {novoEmail.key}
- />
- <div style={{margin:"0", display:"flex", justifyContent:"flex-start"}}>
- <CompletarCadastroButton type="submit">SALVAR ALTERAÇÕES</CompletarCadastroButton>
+ </Paper>
+ <Paper elevation={3} style={{ width: "100%" }}>
+ <div className='card-config'>
+ <div className='content-div'>
+ <div style={{ display: "flex", flexDirection: "column" }}>
+ <form onSubmit={(e) => onSubmit(e, 'email')}>
+ <h4 className="subtitle">Alterar e-mail</h4>
+ <FormInput
+ contrast={state.contrast}
+ inputType={"text"}
+ name={"email"}
+ value={novoEmail.value}
+ placeholder={"E-mail"}
+ handleChange={e => handleChangeEmail(e)}
+ required={true}
+ error={novoEmail.key}
+ />
+ <div style={{ margin: "0", display: "flex", justifyContent: "flex-start" }}>
+ <CompletarCadastroButton contrast={state.contrast} type="submit">SALVAR ALTERAÇÕES</CompletarCadastroButton>
+ </div>
+ </form>
</div>
- </form>
+ </div>
</div>
- </div>
- </div>
- </Paper>
- <Paper elevation={3} style= {{width:"100%"}}>
- <div className='card-config'>
- <div className='content-div'>
- <div>
- <h4 style={{display:"flex", justifyContent:"flex-start", fontSize:"18px"}}>Conta</h4>
- <span style={{margin:"0", display:"flex", justifyContent:"flex-start"}}>Antes de excluir a sua conta, saiba que ela será removida permanentemente.</span>
- </div>
- <div style={{margin:"0", display:"flex", justifyContent:"flex-start"}}>
- <ModalExcluirConta open={modalExcluir} handleClose={() => {setModalExcluir(false)}}/>
- <ButtonCancelar style={{color:'#eb4034'}} onClick={() => {setModalExcluir(true)}}>EXCLUIR CONTA</ButtonCancelar>
+ </Paper>
+ <Paper elevation={3} style={{ width: "100%" }}>
+ <div className='card-config'>
+ <div className='content-div'>
+ <div>
+ <h4 className="subtitle">Conta</h4>
+ <span style={state.contrast === "" ? { margin: "0", display: "flex", justifyContent: "flex-start" } : { margin: "0", display: "flex", justifyContent: "flex-start", color: "white" }}>Antes de excluir a sua conta, saiba que ela será removida permanentemente.</span>
+ </div>
+ <div style={{ margin: "0", display: "flex", justifyContent: "flex-start" }}>
+ <ModalExcluirConta contrast={state.contrast} open={modalExcluir} handleClose={() => { setModalExcluir(false) }} />
+ <ButtonCancelar contrast={state.contrast} style={{backgroundColor: "red", color: "white"}} onClick={() => { setModalExcluir(true) }}>EXCLUIR CONTA</ButtonCancelar>
+ </div>
+ </div>
</div>
- </div>
- </div>
- </Paper>
+ </Paper>
</>
)
}
diff --git a/src/Components/TabPanels/UserPageTabs/PanelMeusRecursos.js b/src/Components/TabPanels/UserPageTabs/PanelMeusRecursos.js
index 46400fa1..c4cabfee 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelMeusRecursos.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelMeusRecursos.js
@@ -45,7 +45,7 @@ export default function TabPanelAtividades(props) {
const [drafts, setDrafts] = useState([]);
const [curating, setCurating] = useState([]);
- function handleSuccess(responseArr, headersArr) {
+ function handleSuccess(responseArr, headersArr) {
setErrorInLearnObj(responseArr[0].errors ? true : false)
setErrorInDrafts(responseArr[1].errors ? true : false)
setErrorInCurating(responseArr[2].errors ? true : false)
@@ -116,7 +116,6 @@ export default function TabPanelAtividades(props) {
const showMoreDrafts = (limite) => {
setLoadingMoreDrafts(true);
- console.log(limite);
const limit = limite;
setcurrLimitDrafts(currLimitDrafts + limit)
const url = `/users/${props.id}/drafts?offset=${currLimitDrafts}&limit=${limit}`;
@@ -129,7 +128,6 @@ export default function TabPanelAtividades(props) {
else if (data.length >= 1) {
let currData = [...drafts];
currData = [...currData.concat(data)];
- console.log('drafs: ', currData);
setLoadingMoreDrafts(false);
setDrafts([...currData]);
}
@@ -178,13 +176,14 @@ export default function TabPanelAtividades(props) {
{
loading ?
(
- <LoadingSpinner text={'Carregando Recursos'} />
+ <LoadingSpinner contrast={props.contrast} text={'Carregando Recursos'} />
)
:
(
[
<React.Fragment>
- <Template
+ <Template
+ contrast={props.contrast}
length={learningObjects.length}
titleText={learningObjects.length === 1 ? "Recurso Publicado" : "Recursos Publicados"}
noContentText={"Você ainda não publicou nenhum Recurso!"}
@@ -196,6 +195,7 @@ export default function TabPanelAtividades(props) {
/>
<Template
+ contrast={props.contrast}
length={drafts.length}
titleText={drafts.length === 1 ? "Rascunho Publicado" : "Rascunhos Publicados"}
noContentText={"Você não tem nenhum recurso sendo editado."}
@@ -207,6 +207,7 @@ export default function TabPanelAtividades(props) {
/>
<TemplateCuradoria
+ contrast={props.contrast}
length={curating.length}
titleText={curating.length === 1 ? "Recurso sendo avaliado pela curadoria" : "Recursos sendo avaliados pela curadoria"}
noContentText={"Você não tem nenhum recurso sendo avaliado pelos curadores."}
diff --git a/src/Components/TabPanels/UserPageTabs/PanelRede.js b/src/Components/TabPanels/UserPageTabs/PanelRede.js
index ba5741a5..5077f98c 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelRede.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelRede.js
@@ -131,7 +131,7 @@ export default function TabPanelRede(props) {
loading ?
(
[
- <LoadingSpinner text={'CARREGANDO...'} />
+ <LoadingSpinner contrast={props.contrast} text={'CARREGANDO...'} />
]
)
:
@@ -143,7 +143,7 @@ export default function TabPanelRede(props) {
(
[
<>
- <ContainerRedeVazia />
+ <ContainerRedeVazia contrast={props.contrast} />
</>
]
)
@@ -151,6 +151,7 @@ export default function TabPanelRede(props) {
(
<React.Fragment>
<PanelTemplateRede
+ contrast={props.contrast}
title={followersList.length === 1 ? "Seguidor" : "Seguidores"}
length={followersList.length}
sliceArr={followersList}
@@ -163,6 +164,7 @@ export default function TabPanelRede(props) {
/>
<PanelTemplateRede
+ contrast={props.contrast}
title={"Seguindo"}
length={followingList.length}
sliceArr={followingList}
diff --git a/src/Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js b/src/Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js
index 6a7aa888..fd0e59f1 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js
@@ -16,30 +16,33 @@ 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 } from 'react'
import { Store } from '../../../Store.js';
import styled from 'styled-components'
import Button from '@material-ui/core/Button';
-import {Link} from 'react-router-dom';
+import { Link } from 'react-router-dom';
+
+//Image Import
+import { Publicar } from "ImportImages.js";
//3 casos
- //Professor nao cadastrado (nao pediu OU submitter_request = rejected)
- //Professor em análise (submitter_request = requested)
- //Professor aceito (submitter_request = accepted)
-export default function TabPanelSolicitarContaProfessor (props) {
+//Professor nao cadastrado (nao pediu OU submitter_request = rejected)
+//Professor em análise (submitter_request = requested)
+//Professor aceito (submitter_request = accepted)
+export default function TabPanelSolicitarContaProfessor(props) {
// eslint-disable-next-line
- const {state, dispatch} = useContext(Store)
+ const { state, dispatch } = useContext(Store)
return (
<div className='card-config'>
<div className='content-div'>
{
- !state.currentUser.roles.some(role => role.name === "teacher") && ( state.currentUser.submitter_request === 'default' || state.currentUser.submitter_request === 'rejected' ) ?
- (
+ !state.currentUser.roles.some(role => role.name === "teacher") && (state.currentUser.submitter_request === 'default') ?
+ (
<div>
- <ImageDiv/>
- <StyledH2>Você é professor(a) da educação básica e gostaria de colaborar com a Plataforma?</StyledH2>
- <StyledP>Ao ser identificado como professor(a), você poderá publicar e compartilhar recursos educacionais
+ <ImageDiv />
+ <StyledH2 contrast={state.contrast}>Você é professor(a) da educação básica e gostaria de colaborar com a Plataforma?</StyledH2>
+ <StyledP contrast={state.contrast}>Ao ser identificado como professor(a), você poderá publicar e compartilhar recursos educacionais
digitais na plataforma com toda a comunidade escolar do paÃs.
</StyledP>
<div>
@@ -47,28 +50,37 @@ export default function TabPanelSolicitarContaProfessor (props) {
pathname: '/termos-publicar-recurso',
state: true
}}>
- <CompletarCadastroButton >
+ <CompletarCadastroButton contrast={state.contrast}>
SIM, COMPLETAR CADASTRO
</CompletarCadastroButton>
</Link>
</div>
</div>
- )
- :
- (
+ )
+ :
+ (
<>
- {
- state.currentUser.submitter_request === 'requested' ?
- (
- <h1>A sua conta de Professor foi solicitada</h1>
- )
- :
- (
- <h1>Você já possui uma conta de Professor</h1>
- )
- }
+ {
+ (() => {
+ switch (state.currentUser.submitter_request) {
+ case 'requested':
+ return (
+ <h1 className="title">A sua conta de Professor foi solicitada</h1>
+ )
+ case 'rejected':
+ return (
+ <h1 className="title">Sua solicitação foi negada</h1>
+ )
+ default:
+ return (
+ <h1 className="title">Você já possui uma conta de Professor</h1>
+ )
+
+ }
+ })()
+ }
</>
- )
+ )
}
</div>
</div>
@@ -76,8 +88,8 @@ export default function TabPanelSolicitarContaProfessor (props) {
}
export const CompletarCadastroButton = styled(Button)`
- background-color : #00bcd4 !important;
- color : #fff !important;
+ background-color: ${props => props.contrast === "" ? "#00bcd4 !important" : "black !important"};
+ color: ${props => props.contrast === "" ? "#fff !important" : "yellow !important"};
font-family : 'Roboto',sans-serif !important;
font-size : 14px !important;
font-weight : bold !important;
@@ -94,7 +106,7 @@ export const CompletarCadastroButton = styled(Button)`
font-style : inherit !important;
font-variant : inherit !important;
font-family : inherit !important;
- text-decoration : none !important;
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
overflow : hidden !important;
display : inline-block !important;
position : relative !important;
@@ -105,7 +117,10 @@ export const CompletarCadastroButton = styled(Button)`
align-items : center !important;
text-align : center !important;
box-sizing : border-box !important;
- border : 0 !important;
+ border: ${props => props.contrast === "" ? "0 !important" : "1px solid white !important"};
+ :hover{
+ background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
`
const StyledP = styled.p`
@@ -113,9 +128,11 @@ const StyledP = styled.p`
line-height : 22px;
text-align : left;
padding-bottom : 20px;
+ color: ${props => props.contrast === "" ? "" : "white"};
`
const StyledH2 = styled.h2`
+ color: ${props => props.contrast === "" ? "" : "white"};
font-weight : 200;
font-size : 26px;
line-height : 36px;
@@ -124,7 +141,7 @@ const StyledH2 = styled.h2`
`
const ImageDiv = styled.div`
- background-image : url(https://plataformaintegrada.mec.gov.br/img/Publicar.png);
+ background-image : url(${Publicar});
display : block;
height : 114px;
background-size : contain;
diff --git a/src/Components/Table.js b/src/Components/Table.js
index 773a5fff..e9aca6cc 100644
--- a/src/Components/Table.js
+++ b/src/Components/Table.js
@@ -1,5 +1,5 @@
-import React from 'react';
-import { withStyles, makeStyles } from '@material-ui/core/styles';
+import React, { useEffect, useState } from 'react';
+import { withStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
@@ -23,59 +23,97 @@ const StyledTableCell = withStyles(theme => ({
},
}))(TableCell);
-const StyledTableRow = withStyles(theme => ({
- root: {
- '&:nth-of-type(odd)': {
- backgroundColor: theme.palette.background.default,
- },
+const ContrastStyledTableCell = withStyles(theme => ({
+ head: {
+ backgroundColor: 'black',
+ color: '#ffffff',
+ border: '1px solid white',
+ fontFamily: 'Roboto',
+ fontStyle: 'normal',
+ fontWeight: 500,
+ fontSize: 15,
+ letterSpacing: .01
},
-}))(TableRow);
-
+ body: {
+ fontSize: 14,
+ },
+}))(TableCell);
-const useStyles = makeStyles({
- table: {
- minWidth: 970,
+const ContrastStyledTableCellBody = withStyles(theme => ({
+ body: {
+ fontSize: 14,
+ backgroundColor: 'black',
+ color: '#ffffff',
+ border: '1px solid white',
+ fontFamily: 'Roboto',
+ fontStyle: 'normal',
+ fontWeight: 500,
+ letterSpacing: .01
},
-});
+}))(TableCell);
+
+
export default function CustomizedTables(props) {
- const classes = useStyles();
+ const [columns, setColumns] = useState([]);
const onClick = (row) => {
- const {city_name, id, name, state_name} = row
- props.onClickTable(city_name, id, name, state_name)
+ const { city_name, id, name, state_name } = row
+ props.onClickTable(city_name, id, name, state_name)
}
+ useEffect(() => {
+ const updatedColumns = [...props.columns];
+ updatedColumns.splice(2, 2);
+ setColumns(updatedColumns);
+ }, [])
+
return (
- <>
- <TableContainer component={Paper}>
- <Table className={classes.table} aria-label="customized table">
- <TableHead>
- <TableRow>
+ <>
+ <TableContainer component={Paper}>
+ <Table aria-label="customized table">
+ <TableHead>
+ <TableRow>
+ {
+ columns.map((column) =>
+ props.contrast === "" ?
+ <StyledTableCell align="left">{column}</StyledTableCell>
+ :
+ <ContrastStyledTableCell align="left">{column}</ContrastStyledTableCell>
+ )
+ }
+ </TableRow>
+ </TableHead>
+ <TableBody>
{
- props.columns.map( (column)=>
- <StyledTableCell align="left">{column}</StyledTableCell>
- )
+ props.contrast === "" ?
+ props.rows.map((row) => {
+ return <TableRow onClick={() => onClick(row)} key={row.id}>
+ <StyledTableCell component="th" scope="row">
+ {row.id}
+ </StyledTableCell>
+ <StyledTableCell align="left">{row.name}</StyledTableCell>
+ {/* <StyledTableCell align="left">{row.state_name}</StyledTableCell>
+ <StyledTableCell align="left">{row.city_name}</StyledTableCell> */}
+ </TableRow>
+ })
+ :
+ props.rows.map((row) => {
+ return <TableRow onClick={() => onClick(row)} key={row.id}>
+ <ContrastStyledTableCellBody component="th" scope="row">
+ {row.id}
+ </ContrastStyledTableCellBody>
+ <ContrastStyledTableCellBody align="left">{row.name}</ContrastStyledTableCellBody>
+ {/* <ContrastStyledTableCellBody align="left">{row.state_name}</ContrastStyledTableCellBody>
+ <ContrastStyledTableCellBody align="left">{row.city_name}</ContrastStyledTableCellBody> */}
+ </TableRow>
+ })
}
- </TableRow>
- </TableHead>
- <TableBody>
- {props.rows.map(row => (
- <>
- {console.log(row)}
- <StyledTableRow onClick={() => onClick(row)} key={row.id}>
- <StyledTableCell component="th" scope="row">
- {row.id}
- </StyledTableCell>
- <StyledTableCell align="left">{row.name}</StyledTableCell>
- <StyledTableCell align="left">{row.state_name}</StyledTableCell>
- <StyledTableCell align="left">{row.city_name}</StyledTableCell>
- </StyledTableRow>
- </>
- ))}
- </TableBody>
- </Table>
- </TableContainer>
+ </TableBody>
+ </Table>
+ </TableContainer>
</>
);
}
+
+
diff --git a/src/Components/TermsPageContent.js b/src/Components/TermsPageContent.js
index 918e040b..bcdcad41 100644
--- a/src/Components/TermsPageContent.js
+++ b/src/Components/TermsPageContent.js
@@ -1,169 +1,168 @@
import React from 'react';
import Typography from '@material-ui/core/Typography';
-import CardContent from '@material-ui/core/CardContent';
-export default function TermsPageContent () {
+export default function TermsPageContent({ contrast }) {
return (
- <CardContent style={{textAlign: "start", marginBottom: "10px", lineHeight:"21px", color:"rgb(102, 102, 102)", padding:"65px"}}>
- <Typography variant="h4" style={{textAlign:"center", color:"rgb(102, 102, 102)"}}> Antes de Prosseguir, é importante que você leia os <strong>Termos de Uso</strong></Typography>
- <div classname="texto-termos">
- <div classname="title">
- <Typography variant = "h3" style={{textAlign:"center", fontSize:"23px", marginTop:"20px", marginBottom:"10px"}}>
+ <div style={contrast === "" ? { textAlign: "start", lineHeight: "21px", color: "rgb(102, 102, 102)", padding: "65px" } : { textAlign: "start", lineHeight: "21px", color: "white", padding: "65px", backgroundColor: "black" }}>
+ <Typography variant="h4" style={contrast === "" ? { textAlign: "center", color: "rgb(102, 102, 102)" } : { textAlign: "center", color: "white" }}> Antes de Prosseguir, é importante que você leia os <strong>Termos de Uso</strong></Typography>
+ <div>
+ <div>
+ <Typography variant="h3" style={{ textAlign: "center", fontSize: "23px", marginTop: "20px", marginBottom: "10px" }}>
<strong>TERMOS DE USO </strong>
</Typography>
- <Typography variant="body2" style={{fontSize:"15px",textAlign:"center", color:"rgb(102, 102, 102)"}}>InÃcio da vigência: agosto de 2017</Typography>
+ <Typography variant="body2" style={contrast === "" ? { textAlign: "center", color: "rgb(102, 102, 102)" } : { textAlign: "center", color: "white" }}>InÃcio da vigência: agosto de 2017</Typography>
</div>
<p>Aqui estão os “Termos de Uso†da <strong>Plataforma Integrada de RED do MEC</strong>, isto é, as regras de funcionamento da Plataforma e seus serviços,
- e o que se espera de seus usuários. Por “usuárioâ€, entende-se qualquer pessoa que acesse o domÃnio portal.mec.gov.br, tanto para pesquisa
- (acesso) como para a inclusão de dados e informações (participação) mediante cadastro</p>
+ e o que se espera de seus usuários. Por “usuárioâ€, entende-se qualquer pessoa que acesse o domÃnio portal.mec.gov.br, tanto para pesquisa
+ (acesso) como para a inclusão de dados e informações (participação) mediante cadastro</p>
<p>Fazem parte dos Termos de Uso as polÃticas de responsabilidade, de privacidade e confidencialidade, a licença de uso do conteúdo e as
- informações sobre como reportar violações.</p>
+ informações sobre como reportar violações.</p>
<p>Ao utilizar a <strong>Plataforma Integrada de RED do MEC</strong>, o usuário aceita todas as condições aqui estabelecidas. O uso da Plataforma Integrada de
- RED do MEC implica aceite das condições aqui elencadas.</p>
+ RED do MEC implica aceite das condições aqui elencadas.</p>
<p>Por “serviçoâ€, entende-se qualquer funcionalidade ou ferramenta que permita a interatividade com o usuário, como, por exemplo, usuário subir
- um recurso, postar um comentário, criar uma coleção ou enviar uma mensagem.</p>
+ um recurso, postar um comentário, criar uma coleção ou enviar uma mensagem.</p>
<p>A aceitação destes "Termos de Uso" é indispensável à utilização da <strong>Plataforma Integrada de RED do MEC</strong>. Todos os usuários deverão ler,
- certificar-se de tê-los entendido e aceitar todas as condições neles estabelecidas. Dessa forma, deve ficar claro que a utilização desta
- "<strong>Plataforma Integrada de RED do MEC</strong>" implica aceitação completa deste documento intitulado Termos de Uso. Caso tenha dúvidas sobre os termos,
- utilize o formulário disponÃvel em “Contato†para saná-las.</p>
- <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>
- 1.CaracterÃsticas da <strong>Plataforma Integrada de RED do MEC</strong>
+ certificar-se de tê-los entendido e aceitar todas as condições neles estabelecidas. Dessa forma, deve ficar claro que a utilização desta
+ "<strong>Plataforma Integrada de RED do MEC</strong>" implica aceitação completa deste documento intitulado Termos de Uso. Caso tenha dúvidas sobre os termos,
+ utilize o formulário disponÃvel em “Contato†para saná-las.</p>
+ <Typography variant="h4" style={contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>
+ 1.CaracterÃsticas da <strong>Plataforma Integrada de RED do MEC</strong>
</Typography>
<p>A <strong>Plataforma Integrada de RED do MEC</strong> é um é sÃtio (website) em formato de plataforma interativa colaborativa para propiciar a formação de uma
- rede de pessoas interessadas em usar, criar e compartilhar recursos e materiais educacionais. Seu objetivo é reunir e disponibilizar conteúdos do
- acervo do MEC, antes distribuÃdos em diferentes portais (Portal do Professor, Banco Internacional de Objetos Educacionais, DomÃnio Público e TV Escola),
- conteúdo de organizações parceiras, bem como fomentar espaços de participação, criação e compartilhamento de conhecimento entre usuários para temas
- relacionados à educação básica brasileira.</p>
+ rede de pessoas interessadas em usar, criar e compartilhar recursos e materiais educacionais. Seu objetivo é reunir e disponibilizar conteúdos do
+ acervo do MEC, antes distribuÃdos em diferentes portais (Portal do Professor, Banco Internacional de Objetos Educacionais, DomÃnio Público e TV Escola),
+ conteúdo de organizações parceiras, bem como fomentar espaços de participação, criação e compartilhamento de conhecimento entre usuários para temas
+ relacionados à educação básica brasileira.</p>
<p>A <strong>Plataforma Integrada de RED do MEC</strong> foi criada em software livre, cujas informações para desenvolvedores estão disponÃveis em gitlab.c3sl.ufpr.br/portalmec/portalmec.
- A <strong>Plataforma Integrada de RED do MEC</strong> funciona ao mesmo tempo como repositório e referatório:</p>
+ A <strong>Plataforma Integrada de RED do MEC</strong> funciona ao mesmo tempo como repositório e referatório:</p>
<ul>
- <li style={{listStyleType:"disc"}}>Repositório: sÃtio na web que armazena conteúdos diversos (texto, áudio, vÃdeo, multimÃdia, etc.). Ou seja, um repositório efetivamente guarda uma cópia do recurso
- educacional. Todos os conteúdos depositados na <strong>Plataforma Integrada de RED do MEC</strong> têm uma licença livre e são considerados Recursos Educacionais Abertos.
- (Veja a seção 4 “Licença de uso do conteúdoâ€).
+ <li style={{ listStyleType: "disc" }}>Repositório: sÃtio na web que armazena conteúdos diversos (texto, áudio, vÃdeo, multimÃdia, etc.). Ou seja, um repositório efetivamente guarda uma cópia do recurso
+ educacional. Todos os conteúdos depositados na <strong>Plataforma Integrada de RED do MEC</strong> têm uma licença livre e são considerados Recursos Educacionais Abertos.
+ (Veja a seção 4 “Licença de uso do conteúdoâ€).
</li>
- <li style={{listStyleType:"disc"}}>Referatório: sÃtio na web que indica ou aponta para conteúdos diversos em sites externos, sem armazená-los.
- Nesse caso, o conteúdo não está armazenado na <strong>Plataforma Integrada de RED do MEC</strong>, que somente indica a localização do recurso através de um link.
- Os conteúdos referenciados podem ser fechados ou abertos. (Veja a seção 4, “Licença de uso do conteúdoâ€).
+ <li style={{ listStyleType: "disc" }}>Referatório: sÃtio na web que indica ou aponta para conteúdos diversos em sites externos, sem armazená-los.
+ Nesse caso, o conteúdo não está armazenado na <strong>Plataforma Integrada de RED do MEC</strong>, que somente indica a localização do recurso através de um link.
+ Os conteúdos referenciados podem ser fechados ou abertos. (Veja a seção 4, “Licença de uso do conteúdoâ€).
</li>
</ul>
<p>No que se refere ao Repositório, a <strong>Plataforma Integrada de RED do MEC</strong> disponibiliza recursos educacionais digitais e materiais de formação de seu acervo e
- também permite que usuários (pessoas fÃsicas) depositem (publiquem, façam upload) seus recursos e materiais para serem armazenados, desde que façam seu cadastro,
- disponibilizem as informações necessárias no momento da publicação e respeitem as regras estabelecidas neste Termo.</p>
+ também permite que usuários (pessoas fÃsicas) depositem (publiquem, façam upload) seus recursos e materiais para serem armazenados, desde que façam seu cadastro,
+ disponibilizem as informações necessárias no momento da publicação e respeitem as regras estabelecidas neste Termo.</p>
<p>Os usuários terão acesso a uma variedade de recursos on-line. Para além, mediante cadastro, terão a sua disposição um maior número de funcionalidades, incluindo
- ferramentas de comunicação e interação, mecanismos de consulta, poderão fazer upload e download de recursos educacionais digitais. Poderão utilizar serviços relacionados
- à criação, à consulta e ao acompanhamento de coleções de recursos educacionais digitais de outros usuários, dentre outras funcionalidades. Professores cadastrados e
- identificados poderão ainda fazer upload de RED.</p>
+ ferramentas de comunicação e interação, mecanismos de consulta, poderão fazer upload e download de recursos educacionais digitais. Poderão utilizar serviços relacionados
+ à criação, à consulta e ao acompanhamento de coleções de recursos educacionais digitais de outros usuários, dentre outras funcionalidades. Professores cadastrados e
+ identificados poderão ainda fazer upload de RED.</p>
<p>No que se refere ao Referatório, a <strong>Plataforma Integrada de RED do MEC</strong> indica e organiza links externos para recursos e materiais de terceiros. Os recursos serão
- disponibilizados mediante a adesão aos critérios especÃficos levantados pelo MEC. Para mais informações, utilize a página de Contato da plataforma.</p>
- <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>
- 2. Cadastro e segurança
+ disponibilizados mediante a adesão aos critérios especÃficos levantados pelo MEC. Para mais informações, utilize a página de Contato da plataforma.</p>
+ <Typography variant="h4" style={contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>
+ 2. Cadastro e segurança
</Typography>
<p>A realização de cadastro pode ser exigida como condição para a utilização de determinados ambientes, recursos ou ferramentas.
- O cadastramento de um usuário só será finalizado ao serem preenchidos todos os campos indicados como obrigatórios. Para o registro de sua conta,
- o usuário deverá indicar uma senha e uma identificação, tornando-se responsável por mantê-las em sigilo, assumindo a total responsabilidade pelas atividades
- que se realizam por meio dela. O usuário compromete-se igualmente em sair ("deslogar") de sua conta ao final de cada sessão.</p>
+ O cadastramento de um usuário só será finalizado ao serem preenchidos todos os campos indicados como obrigatórios. Para o registro de sua conta,
+ o usuário deverá indicar uma senha e uma identificação, tornando-se responsável por mantê-las em sigilo, assumindo a total responsabilidade pelas atividades
+ que se realizam por meio dela. O usuário compromete-se igualmente em sair ("deslogar") de sua conta ao final de cada sessão.</p>
<p>Além das informações básicas, aos professores que quiserem ter a sua identidade verificada - o que o permitirá depositar recursos na plataforma (fazer upload) -
- será necessário identificar a escola da rede em que atua. A mesma informação será verificada a partir dos dados do Censo Escolar.</p>
+ será necessário identificar a escola da rede em que atua. A mesma informação será verificada a partir dos dados do Censo Escolar.</p>
<p>A <strong>Plataforma Integrada de RED do MEC</strong> não se responsabiliza pelas informações inseridas por seus usuários. Os usuários garantem e respondem,
- em qualquer caso, pela veracidade, exatidão e autenticidade dos dados pessoais cadastrados. A <strong>Plataforma Integrada de RED do MEC</strong> se reserva o direito de conferir a
- identificação de seus usuários, bem como de solicitar dados adicionais e documentos que julgue pertinentes, a fim de verificar os dados pessoais informados caso julgue necessário.</p>
+ em qualquer caso, pela veracidade, exatidão e autenticidade dos dados pessoais cadastrados. A <strong>Plataforma Integrada de RED do MEC</strong> se reserva o direito de conferir a
+ identificação de seus usuários, bem como de solicitar dados adicionais e documentos que julgue pertinentes, a fim de verificar os dados pessoais informados caso julgue necessário.</p>
<p>Para acessar sua conta, o usuário deverá identificar-se por meio de e-mail e senha. O usuário compromete-se a não informar a terceiros sua senha, responsabilizando-se integral e
- exclusivamente pelo uso que dela seja feito e pelas operações efetuadas em sua conta.</p>
+ exclusivamente pelo uso que dela seja feito e pelas operações efetuadas em sua conta.</p>
<p>O usuário compromete-se a notificar a <strong>Plataforma Integrada de RED do MEC</strong>, por meio da funcionalidade “Contatoâ€, sobre qualquer uso não autorizado de sua conta, assim como sobre o seu
- acesso por terceiros não autorizados.</p>
+ acesso por terceiros não autorizados.</p>
<p>Contas de usuários com informações consideradas inadequadas pela <strong>Plataforma Integrada de RED do MEC</strong>, conforme as cláusulas destes Termos de Uso, poderão ser desativadas, removidas ou
- ter seu conteúdo bloqueado por decisão do Ministério da Educação. O usuário será notificado através do seu e-mail de cadastro.</p>
+ ter seu conteúdo bloqueado por decisão do Ministério da Educação. O usuário será notificado através do seu e-mail de cadastro.</p>
<p>A criação de conta ou a disponibilização de conteúdo na <strong>Plataforma Integrada de RED do MEC</strong> não geram nenhum direito de suporte técnico ou de indenização por dificuldades
- técnicas ou falhas nos sistemas. O cancelamento, a suspensão, a perda de dados armazenados, a indisponibilidade ou outra situação adversa que afete o acesso, os dados ou o conteúdo do usuário não ensejarão qualquer tipo de reparação, compensação ou outra obrigação.</p>
+ técnicas ou falhas nos sistemas. O cancelamento, a suspensão, a perda de dados armazenados, a indisponibilidade ou outra situação adversa que afete o acesso, os dados ou o conteúdo do usuário não ensejarão qualquer tipo de reparação, compensação ou outra obrigação.</p>
<p>A <strong>Plataforma Integrada de RED do MEC</strong> não se responsabiliza por qualquer dano, prejuÃzo ou perda no equipamento do usuário causado por falhas no sistema, no servidor ou na
- internet decorrentes de condutas de terceiros, de vÃrus por acesso, da utilização ou navegação na internet ou da transferência de dados.</p>
- <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>
- 3. Publicações de usuários
- </Typography>
+ internet decorrentes de condutas de terceiros, de vÃrus por acesso, da utilização ou navegação na internet ou da transferência de dados.</p>
+ <Typography variant="h4" style={contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>
+ 3. Publicações de usuários
+ </Typography>
<p>O conteúdo disponibilizado pelo usuário é de inteira responsabilidade do usuário, não sendo a <strong>Plataforma Integrada de RED do MEC</strong> responsável por quaisquer fatos decorrentes de sua utilização.</p>
<p>Os recursos publicados devem ter cunho educacional, mantendo-se dentro do assunto em que estão inseridos, em conformidade com estes Termos de Uso.</p>
<p>Todas as informações publicadas na <strong>Plataforma Integrada de RED do MEC</strong>, como os metadados (descritivos dos recursos), comentários e discussões inseridas são consideradas públicas, visÃveis por qualquer pessoa, sem nenhum tipo de confidencialidade. Não serão aceitos materiais que contenham vocabulário ofensivo ou desrespeitoso a terceiros, incluindo ofensas, calúnias, injúrias e difamações. Também não serão permitidos materiais que invadam a privacidade de terceiros, que sejam ameaçadoras, preconceituosas ou racistas.</p>
<p>Caso o usuário entenda que alguma postagem, material, notÃcia, comentário ou outro conteúdo disponibilizado na <strong>Plataforma Integrada de RED do MEC</strong> violem algum direito seu, a legislação aplicável ou as cláusulas deste Termos de Uso, deverá notificar a <strong>Plataforma Integrada de RED do MEC</strong> por meio da funcionalidade “Reportar†ou, quando não houver, através do formulário de Contato.</p>
<p>O spam (mensagens não solicitadas) ou o abuso em comentários poderão ser ativamente prevenidos através do bloqueio de palavras e expressões predeterminadas, ou excluÃdos posteriormente, sendo cabÃvel a remoção da conta do usuário, no caso de tentativas de violação sistemática e repetitiva destes Termos de Uso, incluindo a reintrodução de material que já tenha sido previamente bloqueado ou excluÃdo.</p>
<p>Conteúdos com informações consideradas inadequadas pela <strong>Plataforma Integrada de RED do MEC</strong>, conforme as cláusulas destes Termos de Uso, poderão ser removidos por decisão do Ministério da Educação e o usuário será notificado através do seu e-mail de cadastro.</p>
- <Typography variant="h5" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>
- 3.1 É permitido ao usuário:
+ <Typography variant="h5" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>
+ 3.1 É permitido ao usuário:
</Typography>
<ul>
- <li style={{listStyleType:"disc"}}>Depositar (publicar) recurso ou material de sua autoria ou de autoria coletiva, com anuência dos demais autores, que esteja em domÃnio público, ou para o qual há anuência dos autores originais, desde que os dados sejam corretamente preenchidos nos campos descritivos (metadados) indicados para preenchimento das informações sobre os recursos;</li>
- <li style={{listStyleType:"disc"}}>Nos comentários, contatos e comunicações, é fundamental ser cortês e tratar os demais usuários com respeito;</li>
- <li style={{listStyleType:"disc"}}>O usuário poderá sugerir links para outros sites, desde que tenham relação direta com o assunto abordado.</li>
+ <li style={{ listStyleType: "disc" }}>Depositar (publicar) recurso ou material de sua autoria ou de autoria coletiva, com anuência dos demais autores, que esteja em domÃnio público, ou para o qual há anuência dos autores originais, desde que os dados sejam corretamente preenchidos nos campos descritivos (metadados) indicados para preenchimento das informações sobre os recursos;</li>
+ <li style={{ listStyleType: "disc" }}>Nos comentários, contatos e comunicações, é fundamental ser cortês e tratar os demais usuários com respeito;</li>
+ <li style={{ listStyleType: "disc" }}>O usuário poderá sugerir links para outros sites, desde que tenham relação direta com o assunto abordado.</li>
</ul>
- <Typography variant="h5" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>
- 3.2 É vedado ao usuário:
+ <Typography variant="h5" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>
+ 3.2 É vedado ao usuário:
</Typography>
<ul>
- <li style={{listStyleType:"disc"}}>Transmitir, exibir, enviar, ou de qualquer outra forma, disponibilizar conteúdo que contenha material pornográfico e/ou atividades ilegais relativas a menores de 18 anos (consoante o Estatuto da Criança e do Adolescente), que invada a privacidade de terceiros, que tenha cunho comercial, viole os Direitos Humanos ou seja ilegal, ofensivo, ameaçador, que incite a violência, seja vulgar, preconceituoso ou racista (como descrito nos artigos 138-140 do Código Penal Brasileiro), ou de qualquer forma seja contrário às cláusulas destes Termos de Uso;</li>
- <li style={{listStyleType:"disc"}}>Assumir a identidade de outra pessoa, fÃsica ou jurÃdica; forjar cabeçalhos, ou de qualquer outra forma manipular identificadores, a fim de disfarçar a origem de qualquer material contido na plataforma, com sentido de desmoralizar, desprestigiar ou se fazer passar pela <strong>Plataforma Integrada de RED do MEC</strong>;</li>
- <li style={{listStyleType:"disc"}}>Disponibilizar conteúdo em desconformidade com a legislação de Direito Autoral, incluindo conteúdo que viole marca registrada, patente, segredo de negócio, direito autoral ou qualquer outro direito de terceiro; disponibilizar conteúdo com qualquer tipo de propaganda, material promocional, spam (mensagens não solicitadas), correntes ou esquemas de pirâmide;</li>
- <li style={{listStyleType:"disc"}}>Disponibilizar conteúdo que contenha vÃrus ou qualquer outro código, arquivo ou programa de computador, com o propósito de interromper, destruir ou limitar a funcionalidade de qualquer software, hardware ou equipamento de telecomunicações;</li>
- <li style={{listStyleType:"disc"}}>Interferir ou interromper os serviços, as redes ou os servidores conectados à plataforma de modo a dificultar a utilização e o aproveitamento dos serviços por outros usuários, bem como obter ou tentar obter acesso não autorizado à plataforma;</li>
- <li style={{listStyleType:"disc"}}>Pedir votos, mencionar número de candidato ou expressar qualquer outra manifestação que se caracterize como propaganda polÃtica ou que viole as normas eleitorais.</li>
+ <li style={{ listStyleType: "disc" }}>Transmitir, exibir, enviar, ou de qualquer outra forma, disponibilizar conteúdo que contenha material pornográfico e/ou atividades ilegais relativas a menores de 18 anos (consoante o Estatuto da Criança e do Adolescente), que invada a privacidade de terceiros, que tenha cunho comercial, viole os Direitos Humanos ou seja ilegal, ofensivo, ameaçador, que incite a violência, seja vulgar, preconceituoso ou racista (como descrito nos artigos 138-140 do Código Penal Brasileiro), ou de qualquer forma seja contrário às cláusulas destes Termos de Uso;</li>
+ <li style={{ listStyleType: "disc" }}>Assumir a identidade de outra pessoa, fÃsica ou jurÃdica; forjar cabeçalhos, ou de qualquer outra forma manipular identificadores, a fim de disfarçar a origem de qualquer material contido na plataforma, com sentido de desmoralizar, desprestigiar ou se fazer passar pela <strong>Plataforma Integrada de RED do MEC</strong>;</li>
+ <li style={{ listStyleType: "disc" }}>Disponibilizar conteúdo em desconformidade com a legislação de Direito Autoral, incluindo conteúdo que viole marca registrada, patente, segredo de negócio, direito autoral ou qualquer outro direito de terceiro; disponibilizar conteúdo com qualquer tipo de propaganda, material promocional, spam (mensagens não solicitadas), correntes ou esquemas de pirâmide;</li>
+ <li style={{ listStyleType: "disc" }}>Disponibilizar conteúdo que contenha vÃrus ou qualquer outro código, arquivo ou programa de computador, com o propósito de interromper, destruir ou limitar a funcionalidade de qualquer software, hardware ou equipamento de telecomunicações;</li>
+ <li style={{ listStyleType: "disc" }}>Interferir ou interromper os serviços, as redes ou os servidores conectados à plataforma de modo a dificultar a utilização e o aproveitamento dos serviços por outros usuários, bem como obter ou tentar obter acesso não autorizado à plataforma;</li>
+ <li style={{ listStyleType: "disc" }}>Pedir votos, mencionar número de candidato ou expressar qualquer outra manifestação que se caracterize como propaganda polÃtica ou que viole as normas eleitorais.</li>
</ul>
- <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>
- 4. Licença de uso do conteúdo
+ <Typography variant="h4" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>
+ 4. Licença de uso do conteúdo
</Typography>
<p>A <strong>Plataforma Integrada de RED do MEC</strong>, entendida como obra intelectual em seu conjunto, é de titularidade do Ministério da Educação. Sua disponibilização ocorrerá de acordo com os termos da Licença Pública Creative Commons do tipo CC BY-SA, exceto nos casos em que for indicado de outra forma.</p>
<p>A licença CC BY SA é uma licença aberta e permite que seja feita cópia, redistribuição, adaptação e criação de obras derivadas, inclusive uso comercial, desde que o autor seja referenciado e que a licença da obra derivada seja também CC BY SA, garantindo o constante caráter aberto das produções.</p>
<p>Aplica-se aos códigos de software desenvolvidos pela <strong>Plataforma Integrada de RED do MEC</strong> a Licença Pública Geral Affero GNU GPL (veja a tradução livre aqui), que visa garantir a liberdade de compartilhar e de modificar softwares livres.</p>
<p>O usuário que utilizar a <strong>Plataforma Integrada de RED do MEC</strong> como repositório, ou seja, para armazenamento de conteúdo, garante que detém todos os direitos e autorizações para a publicação do conteúdo e deverá escolher uma das licenças Creative Commons elencadas no formulário no momento de cadastro do material. As licenças Creative Commons relacionadas abaixo serão aceitas na <strong>Plataforma Integrada de RED do MEC</strong>, pois garantem o devido crédito pela criação original do usuário e permitem as seguintes ações de uso:</p>
<ul>
- <li style={{listStyleType:"disc"}}>CC-BY: esta licença permite que outros distribuam, remixem, adaptem e criem a partir do seu trabalho, mesmo para fins comerciais, desde que lhe atribuam o devido crédito pela criação original.</li>
- <li style={{listStyleType:"disc"}}>CC-BY-SA: esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho, mesmo para fins comerciais, desde que lhe atribuam o devido crédito e que licenciem as novas criações sob termos idênticos</li>
- <li style={{listStyleType:"disc"}}>CC-BY-NC: esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho para fins não comerciais e, embora os novos trabalhos tenham de lhe atribuir o devido crédito e não possam ser usados para fins comerciais, os usuários não têm de licenciar esses trabalhos derivados sob os mesmos termos.</li>
- <li style={{listStyleType:"disc"}}>CC-BY-NC-SA: esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho para fins não comerciais, desde que atribuam o devido crédito e que licenciem as novas criações sob termos idênticos.</li>
+ <li style={{ listStyleType: "disc" }}>CC-BY: esta licença permite que outros distribuam, remixem, adaptem e criem a partir do seu trabalho, mesmo para fins comerciais, desde que lhe atribuam o devido crédito pela criação original.</li>
+ <li style={{ listStyleType: "disc" }}>CC-BY-SA: esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho, mesmo para fins comerciais, desde que lhe atribuam o devido crédito e que licenciem as novas criações sob termos idênticos</li>
+ <li style={{ listStyleType: "disc" }}>CC-BY-NC: esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho para fins não comerciais e, embora os novos trabalhos tenham de lhe atribuir o devido crédito e não possam ser usados para fins comerciais, os usuários não têm de licenciar esses trabalhos derivados sob os mesmos termos.</li>
+ <li style={{ listStyleType: "disc" }}>CC-BY-NC-SA: esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho para fins não comerciais, desde que atribuam o devido crédito e que licenciem as novas criações sob termos idênticos.</li>
</ul>
<p>Cabe ao Usuário verificar a compatibilidade da licença do material obtido na <strong>Plataforma Integrada de RED do MEC</strong> para utilizar em outras produções. Para consultar a compatibilidade das licenças Creative Commons, há uma ferramenta disponÃvel no site Iniciativa Educação Aberta</p>
<p>O usuário da <strong>Plataforma Integrada de RED do MEC</strong> responde por todo o conteúdo publicado por meio de seu perfil, inclusive no que diz respeito à violação dos direitos autorais relacionados a tais postagens. Ao inserir um conteúdo de sua autoria para armazenamento, o usuário concorda e autoriza o licenciamento ao escolher uma das licenças abertas descritas no formulário de publicação, de forma a permitir não só o seu reconhecimento pleno de autoria, como também a possibilidade de replicação, reedição e reformulação de suas postagens por terceiros, com o objetivo de possibilitar o compartilhamento e a reutilização de conteúdo educacional.</p>
<p>A <strong>Plataforma Integrada de RED do MEC</strong> poderá disponibilizar endereços eletrônicos de outros sÃtios externos, por meio de links, o que não significa que estes sejam de sua propriedade ou por ele operados. A presença de links para outros sites não implica relação de sociedade ou de supervisão da <strong>Plataforma Integrada de RED do MEC</strong> com esses sites e seus conteúdos. Os campos descritivos de cada recurso conterão informações especÃficas sobre as licenças dos mesmos. Cabe ao usuário verificar a licença de cada recurso.</p>
<p>É vedado o uso não autorizado da obra ou seu uso em desconformidade com a legislação autoral e com os termos da licença mencionada.</p>
- <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>
- 5. Práticas de uso e armazenamento
+ <Typography variant="h4" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>
+ 5. Práticas de uso e armazenamento
</Typography>
<p>A depender da capacidade de espaço no servidor, a <strong>Plataforma Integrada de RED do MEC</strong> poderá retirar conteúdos armazenados na plataforma, observados os critérios de antiguidade e do tamanho dos arquivos disponibilizados, mediante notificação e justificativa ao usuário.</p>
- <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>
- 6. Privacidade da informação
+ <Typography variant="h4" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>
+ 6. Privacidade da informação
</Typography>
<p>A <strong>Plataforma Integrada de RED do MEC</strong> tomará todas as medidas possÃveis para manter a confidencialidade e a segurança de suas informações. No entanto, a <strong>Plataforma Integrada de RED do MEC</strong> não responderá por prejuÃzos que possam ser derivados da violação dessas medidas por parte de terceiros que subvertam os sistemas de segurança para acessar as informações de Usuários. A <strong>Plataforma Integrada de RED do MEC</strong> solicitará alguns dados pessoais para seu cadastro. Além disso, dados sobre a interação dos usuários e seu comportamento na plataforma são coletados de maneira automática. Esses dados nunca serão vendidos, alugados, trocados ou fornecidos para fins comerciais. No entanto, o MEC poderá colaborar com instituições públicas parceiras, como universidades, para análise desses dados bem como de qualquer conteúdo da plataforma para para fins de pesquisa, divulgação e melhoria dos serviços. Dados pessoais que possam identificá-lo nunca serão compartilhados. Dados que não identificam o usuário serão armazenados indefinidamente para fins de pesquisa.</p>
- <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>
- 7. Violação no sistema ou na base de dados
+ <Typography variant="h4" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>
+ 7. Violação no sistema ou na base de dados
</Typography>
<p>O responsável por qualquer intromissão, ou tentativa de intromissão, na <strong>Plataforma Integrada de RED do MEC</strong> ou por atividade que viole ou contrarie as disposições legais aplicáveis ou as cláusulas destes Termos de Uso estará sujeito à aplicação das sanções previstas neste instrumento, das ações legais pertinentes e de indenizações por eventuais danos causados.</p>
- <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>8. Sanções</Typography>
+ <Typography variant="h4" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>8. Sanções</Typography>
<p>Sem prejuÃzo de outras medidas, a <strong>Plataforma Integrada de RED do MEC</strong> poderá advertir, bloquear, desativar ou remover, temporária ou definitivamente, a conta e conteúdos disponibilizados por um usuário, em qualquer momento, e iniciar as ações legais cabÃveis caso:</p>
<ul>
- <li style={{listStyleType:"disc"}}>o usuário não cumprir qualquer dispositivo destes Termos de Uso;</li>
- <li style={{listStyleType:"disc"}}>o usuário praticar atos fraudulentos ou dolosos;</li>
- <li style={{listStyleType:"disc"}}>o MEC entender que as postagens, o conteúdo disponibilizado ou qualquer atitude do usuário tenham causado algum dano a terceiros ou à própria Plataforma, ou tenham a potencialidade de assim o fazer.</li>
+ <li style={{ listStyleType: "disc" }}>o usuário não cumprir qualquer dispositivo destes Termos de Uso;</li>
+ <li style={{ listStyleType: "disc" }}>o usuário praticar atos fraudulentos ou dolosos;</li>
+ <li style={{ listStyleType: "disc" }}>o MEC entender que as postagens, o conteúdo disponibilizado ou qualquer atitude do usuário tenham causado algum dano a terceiros ou à própria Plataforma, ou tenham a potencialidade de assim o fazer.</li>
</ul>
- <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>9. Limitação de responsabilidade</Typography>
+ <Typography variant="h4" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>9. Limitação de responsabilidade</Typography>
<p>Em nenhuma situação a <strong>Plataforma Integrada de RED do MEC</strong> e o Ministério da Educação serão responsáveis por quaisquer danos, prejuÃzos ou outro efeito, direto ou indireto, relacionados ao uso, por parte de seus usuários, leitores ou de qualquer outra pessoa, deste sÃtio, de seu conteúdo ou de qualquer outro website mencionado.</p>
<p>O usuário reconhece que será integralmente responsável pelos materiais enviados à <strong>Plataforma Integrada de RED do MEC</strong> e se compromete a responder por quaisquer reivindicações, demandas, penalidades e todos os danos, perdas e despesas, causados à <strong>Plataforma Integrada de RED do MEC</strong>.</p>
<p>Todo autor de conteúdo exibido na <strong>Plataforma Integrada de RED do MEC</strong> retém os seus direitos e responsabilidades autorais, nos termos da Lei n. 9.610/1998, sem prejuÃzo dos termos de licenciamento de livre uso, conforme exposto nestes Termos de Uso, no item “Licença de uso do conteúdoâ€.</p>
<p>Se o usuário verificar que qualquer comentário ou participação na <strong>Plataforma Integrada de RED do MEC</strong> infringem um direito de sua titularidade ou de um terceiro, deverá entrar em contato imediatamente na forma indicada neste mesmo documento, no item “Como reportar violaçõesâ€.</p>
- <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>
- 10. Inexistência de vÃnculo
+ <Typography variant="h4" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>
+ 10. Inexistência de vÃnculo
</Typography>
<p>A adesão a estes Termos de Uso pelo usuário não gera nenhum contrato, mandato, franquia ou vÃnculo de tipo trabalhista, societário, de parceria ou associativo entre a <strong>Plataforma Integrada de RED do MEC</strong> e o usuário.</p>
- <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>11. Como reportar violações</Typography>
+ <Typography variant="h4" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>11. Como reportar violações</Typography>
<p>Nem todo o conteúdo disponibilizado pelo usuário nas áreas de comentário e debates é lido pela administração da <strong>Plataforma Integrada de RED do MEC</strong>.</p>
<p>Se algum artigo, notÃcia, comentário ou outro conteúdo da <strong>Plataforma Integrada de RED do MEC</strong> violar qualquer direito do usuário, de terceiros ou a legislação aplicável, o usuário poderá usar a funcionalidade "Reportar" nas páginas que houver essa opção ou, quando não houver, entrar em contato com a administração da <strong>Plataforma Integrada de RED do MEC</strong> pelo formulário de “Contatoâ€, mencionando de forma especÃfica e detalhada a violação.</p>
<p>De posse das informações, a <strong>Plataforma Integrada de RED do MEC</strong> poderá analisar e resolver a questão tão breve quanto possÃvel. Caso a informação esteja incompleta, ou com detalhamento insuficiente, a <strong>Plataforma Integrada de RED do MEC</strong> poderá entrar em contato para solicitar a complementação, possivelmente atrasando a providência desejada.</p>
- <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>
- 12. Modificações nos Termos de Uso
+ <Typography variant="h4" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>
+ 12. Modificações nos Termos de Uso
</Typography>
<p>A <strong>Plataforma Integrada de RED do MEC</strong> poderá alterar, a qualquer tempo, estes Termos de Uso, mediante declaração pública no site, visando seu aprimoramento e melhoria dos serviços prestados. Os novos Termos de Uso entrarão em vigor a partir de sua publicação na plataforma. Usuários cadastrados receberão notificação dessa alteração no e-mail de cadastro e haverá divulgação/chamada na página principal do Sistema. No prazo de 72 (setenta e duas) horas,
- contadas a partir da publicação das modificações, o usuário poderá comunicar-se com a <strong>Plataforma Integrada de RED do MEC</strong>, caso não concorde com os novos Termos de Uso. Nesse caso, a conta do usuário será desativada. Não havendo manifestações no prazo estipulado, entender-se-á que o Usuário aceitou tacitamente os novos Termos de Uso.</p>
- <Typography variant="h4" style={{fontWeight:"300", color:"rgb(102, 102, 102)"}}>
- 13. Foro
+ contadas a partir da publicação das modificações, o usuário poderá comunicar-se com a <strong>Plataforma Integrada de RED do MEC</strong>, caso não concorde com os novos Termos de Uso. Nesse caso, a conta do usuário será desativada. Não havendo manifestações no prazo estipulado, entender-se-á que o Usuário aceitou tacitamente os novos Termos de Uso.</p>
+ <Typography variant="h4" style = { contrast === "" ? { color: "rgb(102, 102, 102)", fontWeight: "300" } : { color: "white", fontWeight: "300" }}>
+ 13. Foro
</Typography>
<p>Para dirimir dúvidas ou litÃgios referentes à interpretação e ao cumprimento destes Termos de Uso, as partes se submeterão ao Foro da Justiça Federal, Seção Judiciária do Distrito Federal.</p>
</div>
- </CardContent>
+ </div >
)
}
diff --git a/src/Components/TopicCard.js b/src/Components/TopicCard.js
index 1f3bb10f..0ec3baf9 100644
--- a/src/Components/TopicCard.js
+++ b/src/Components/TopicCard.js
@@ -26,24 +26,22 @@ import Button from '@material-ui/core/Button';
import { Link } from 'react-router-dom';
export default function MaterialCard(props) {
- console.log(props);
const thumb = require(`../../public/${props.topic.img}`)
return (
- <Card style={{ maxHeight: "100%", maxWidth: "300px" }}>
+ <Card className={`${props.contrast}BackColor ${props.contrast}Border`} style={{ maxHeight: "100%", maxWidth: "300px" }}>
<img style={{ maxHeight: "100%", maxWidth: "100%" }} src={thumb} alt="thumbnail do recurso" />
- <CardContent style={{ height: "50px" }}>
+ <CardContent className={`${props.contrast}Text`} style={{ height: "50px" }}>
<Title>
- <BoldTitle>
- {props.topic.pre_title}
- </BoldTitle>
+ {props.topic.pre_title}
{props.topic.title}
</Title>
</CardContent>
- <CardActions style={{ borderTop: "1px solid #e5e5e5", justifyContent: "center" }}>
- <StyledLink to={"topico?colecao=" + props.colecao_id + "&topico=" + props.topic.id}>
+ <CardActions style={{ justifyContent: "center" }}>
+ <StyledLink className={`${props.contrast}LinkColor`} to={"topico?colecao=" + props.colecao_id + "&topico=" + props.topic.id}>
<Button
- color="secondary"
+ className={`${props.contrast}LinkColor`}
+ style={props.contrast === "" ? {color: "#e8224f"} : {color: "white"}}
>
Ver módulo
</Button>
@@ -55,7 +53,6 @@ export default function MaterialCard(props) {
const Title = styled(Typography)`
font-weight: 500;
- color: rgb(102, 102, 102);
font-size: 0.9em;
margin-left: 10px;
margin-right: 10px;
@@ -65,10 +62,6 @@ const Title = styled(Typography)`
-webkit-box-orient: vertical;
overflow: hidden;
`
-const BoldTitle = styled.span`
- font-weight: bold;
-`
const StyledLink = styled(Link)`
- text-decoration: none !important;
color: inherit !important;
`
\ No newline at end of file
diff --git a/src/Components/TopicFooter.js b/src/Components/TopicFooter.js
index c6ce8ea4..d6e33341 100644
--- a/src/Components/TopicFooter.js
+++ b/src/Components/TopicFooter.js
@@ -4,7 +4,7 @@ import Grid from '@material-ui/core/Grid';
export default function TopicFooter(props) {
return (
- <Container>
+ <Container contrast={props.contrast}>
<Wrapper>
<Grid
container
@@ -30,7 +30,8 @@ export default function TopicFooter(props) {
const Container=styled.div`
margin-top: 15px;
- background-color: #e81f4f;
+ background: ${props => props.contrast === "" ? "#e81f4f" : "black"};
+ border-top: ${props => props.contrast === "" ? "0" : "1px solid white"};
height: auto;
padding: 0;
`
diff --git a/src/Components/TopicList.js b/src/Components/TopicList.js
index e965adad..ba5d8eed 100644
--- a/src/Components/TopicList.js
+++ b/src/Components/TopicList.js
@@ -15,7 +15,7 @@ export default function TopicList(props) {
return (
<Wrapper>
- <Title>Módulos</Title>
+ <Title contrast={props.contrast}>Módulos</Title>
<Grid
container
spacing={3}
@@ -25,7 +25,7 @@ export default function TopicList(props) {
{props.topicos.slice(0, (expanded ? -1 : 5)).map((t, index) => {
return (
<Grid item key={index} md={3}>
- <TopicCard topic={t} colecao_id={props.colecao_id} />
+ <TopicCard contrast={props.contrast} topic={t} colecao_id={props.colecao_id} />
</Grid>
);
})
@@ -38,12 +38,12 @@ export default function TopicList(props) {
alignItems="center"
>
<Grid item>
- <Fab size="medium" color="secondary" aria-label="edit" onClick={handleFabClick}>
- {expanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
+ <Fab size="medium" color="secondary" aria-label="edit" onClick={handleFabClick} style={props.contrast === "" ? { marginTop: "1em" } : { backgroundColor: "black", border: "1px solid yellow", marginTop: "1em" }}>
+ {expanded ? <ExpandLessIcon style={props.contrast === "" ? {color: "white"} : {color: "yellow"}} /> : <ExpandMoreIcon style={props.contrast === "" ? {color: "white"} : {color: "yellow"}}/>}
</Fab>
</Grid>
<Grid item>
- <FabText>
+ <FabText contrast={props.contrast}>
{expanded ? "VER MENOS" : "VER TODOS OS MÓDULOS"}
</FabText>
</Grid>
@@ -55,14 +55,14 @@ export default function TopicList(props) {
}
const FabText = styled.span`
- color: #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
font-weight: 900;
line-height: 2em;
`
const Title = styled.h1`
font-weight: 100;
margin-left: 30px;
- color: rgb(102, 102, 102);
+ color: ${props => props.contrast === "" ? "rgb(102, 102, 102)" : "white"};
`
const Wrapper = styled.div`
margin-right : auto;
diff --git a/src/Components/UploadPageComponents/ButtonsDiv.js b/src/Components/UploadPageComponents/ButtonsDiv.js
index 8e4d1945..a1ac74f0 100644
--- a/src/Components/UploadPageComponents/ButtonsDiv.js
+++ b/src/Components/UploadPageComponents/ButtonsDiv.js
@@ -28,6 +28,7 @@ export default function ButtonsDiv(props) {
return (
<>
<ModalCancelar
+ contrast={props.contrast}
open={modalCancelar}
handleClose={() => { toggleModalCancelar(false) }}
draftID={props.draftID}
@@ -41,34 +42,34 @@ export default function ButtonsDiv(props) {
{/*botao excluir na pagina de editar*/}
<Grid item>
- <GreyButton onClick={() => { toggleModalCancelar(true) }}>
+ <GreyButton contrast={props.contrast} onClick={() => { toggleModalCancelar(true) }}>
<span className="button-text">
CANCELAR
- </span>
+ </span>
</GreyButton>
</Grid>
{
props.onPartTwo &&
<Grid item>
- <GreyButton onClick={() => { props.stepperControl(-1) }}>
+ <GreyButton contrast={props.contrast} onClick={() => { props.stepperControl(-1) }}>
<span className="button-text">
VOLTAR
- </span>
+ </span>
</GreyButton>
</Grid>
}
<Grid item>
- <GreyButton onClick={() => { if (window.confirm('O seu recurso em edição foi salvo.')) toggleRedirect(true) }}>
+ <GreyButton contrast={props.contrast} onClick={() => { if (window.confirm('O seu recurso em edição foi salvo.')) toggleRedirect(true) }}>
<span className="button-text">
CONTINUAR MAIS TARDE
- </span>
+ </span>
</GreyButton>
</Grid>
<Grid item>
- <OrangeButton type="submit">
+ <OrangeButton contrast={props.contrast} type="submit">
SALVAR E AVANÇAR
</OrangeButton>
</Grid>
diff --git a/src/Components/UploadPageComponents/ChooseLinkSection.js b/src/Components/UploadPageComponents/ChooseLinkSection.js
index 52a14ae2..19186952 100644
--- a/src/Components/UploadPageComponents/ChooseLinkSection.js
+++ b/src/Components/UploadPageComponents/ChooseLinkSection.js
@@ -16,81 +16,107 @@ 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 } from 'react'
import UndoIcon from '@material-ui/icons/Undo';
-import {WrapperBox, StyledTextField, BlueButton, GrayButton} from './StyledComponents.js'
+import { WrapperBox, StyledTextField, BlueButton, GrayButton } from './StyledComponents.js'
+import { makeStyles } from "@material-ui/styles";
-export default function ChooseLink (props) {
- const [linkSent, setLinkSent] = useState(false)
- const [link, setLink] = useState({flag : false, value : ""})
- const handleLink = (e) => {
- let userInput = e.target.value
- const urlRegex = new RegExp(
- // eslint-disable-next-line
- "(?:(?:(?:https?|ftp):\/\/))(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,}))\.?)(?::\d{2,5})*(?:[/?#]\S*)?", "i"
- )
- let flag = !(urlRegex.test(userInput))
- setLink({...link,
- flag : flag,
- value : userInput}
- )
+const useStyles = makeStyles(theme => ({
+ darkTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "white",
+ width: "100%"
+ },
+ lightTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "black",
+ width: "100%"
+ }
+}));
+
+export default function ChooseLink(props) {
+ const classes = useStyles();
+ const [linkSent, setLinkSent] = useState(false)
+ const [link, setLink] = useState({ flag: false, value: "" })
+ const handleLink = (e) => {
+ let userInput = e.target.value
+ const urlRegex = new RegExp(
+ // eslint-disable-next-line
+ "(?:(?:(?:https?|ftp):\/\/))(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,}))\.?)(?::\d{2,5})*(?:[/?#]\S*)?", "i"
+ )
+ let flag = !(urlRegex.test(userInput))
+ setLink({
+ ...link,
+ flag: flag,
+ value: userInput
}
+ )
+ }
- const handleSubmit = (e) => {
- e.preventDefault()
- console.log(link.flag)
- if (!link.flag) {
- props.submit(link.value)
- setLinkSent(true)
- }
+ const handleSubmit = (e) => {
+ e.preventDefault()
+ if (!link.flag) {
+ props.submit(link.value)
+ setLinkSent(true)
}
+ }
- return (
- <WrapperBox>
- <div className="inner">
- <div className="upload-title"> Enviar Link</div>
+ return (
+ <WrapperBox contrast={props.contrast}>
+ <div className="inner">
+ <div className="upload-title"> Enviar Link</div>
- <div className="flex-column">
- <p>Insira o link da página do recurso abaixo:</p>
- <form onSubmit={(e) => {handleSubmit(e)}}>
- <StyledTextField
- id = {"choose-link-form"}
- label={"Exemplo: http://google.com"}
- type = {"text"}
- value = {link.value}
- onChange = {e => {handleLink(e)}}
- helperText = {link.flag ? "Faltou inserir um endereço eletrônico" : ""}
- multiline={true}
- rowsMax = {"10"}
- rows={1}
- error = {link.flag}
- required = {true}
- disabled={linkSent}
- />
+ <div className="flex-column">
+ <p>Insira o link da página do recurso abaixo:</p>
+ {
+ !linkSent ?
+ <form onSubmit={(e) => { handleSubmit(e) }}>
+ <StyledTextField
+ contrast={props.contrast}
+ InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
+ id={"choose-link-form"}
+ label={"Exemplo: http://google.com"}
+ type={"text"}
+ variant="outlined"
+ value={link.value}
+ onChange={e => { handleLink(e) }}
+ helperText={link.flag ? "Faltou inserir um endereço eletrônico" : ""}
+ multiline={true}
+ rowsMax={"10"}
+ rows={1}
+ error={link.flag}
+ required={true}
+ />
- <div className="buttons-div">
- {
- linkSent ?
- (
- <BlueButton onClick={() => {setLinkSent(false)}}>Editar</BlueButton>
- )
- :
- (
- <>
- <GrayButton onClick={() => {props.handleNextStage("default")}}>
- <span className="button-text">
- <UndoIcon className="icon"/>Voltar
- </span>
- </GrayButton>
- <BlueButton type="submit">SALVAR</BlueButton>
- </>
- )
- }
- </div>
- </form>
+ <div className="buttons-div">
+ <>
+ <GrayButton contrast={props.contrast} onClick={() => { props.handleNextStage("default") }}>
+ <span className="button-text">
+ <UndoIcon className="icon" />Voltar
+ </span>
+ </GrayButton>
+ <BlueButton contrast={props.contrast} type="submit">SALVAR</BlueButton>
+ </>
</div>
- </div>
- </WrapperBox>
- )
+ </form>
+ :
+ <>
+ <p>
+ O link salvado foi: <a style={props.contrast === "" ? {} : { color: "yellow", textDecoration: "underline" }} href={link.value}>{link.value}</a>
+ </p>
+ <div className="buttons-div">
+ <BlueButton contrast={props.contrast} onClick={() => { setLinkSent(false) }}>Editar</BlueButton>
+ </div>
+ </>
+
+ }
+ </div>
+ </div>
+ </WrapperBox >
+ )
}
diff --git a/src/Components/UploadPageComponents/Forms/Autor.js b/src/Components/UploadPageComponents/Forms/Autor.js
index 4ab8bde9..5dec5827 100644
--- a/src/Components/UploadPageComponents/Forms/Autor.js
+++ b/src/Components/UploadPageComponents/Forms/Autor.js
@@ -16,28 +16,56 @@ 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, memo, useContext} from 'react'
-import {Store} from '../../../Store.js'
+import React, { useState, memo, useContext } from 'react'
+import { Store } from '../../../Store.js'
import { withStyles } from '@material-ui/core/styles';
-
+import { yellow, blue } from "@material-ui/core/colors";
import FormControl from '@material-ui/core/FormControl';
-import { StyledFormLabel, OutroAutorTextField} from '../StyledComponents.js'
+import { StyledFormLabel, OutroAutorTextField } from '../StyledComponents.js'
import RadioGroup from '@material-ui/core/RadioGroup';
import Radio from '@material-ui/core/Radio';
import FormControlLabel from '@material-ui/core/FormControlLabel';
+import { makeStyles } from "@material-ui/styles";
+
+const useStyles = makeStyles(theme => ({
+ darkTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "white",
+ width: "100%",
+ },
+ lightTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "black",
+ width: "100%",
+ }
+}));
const BlueRadio = withStyles({
- root: {
- color: '#666',
- '&$checked': {
- color: '#00bcd4',
+ root: {
+ color: blue[400],
+ '&$checked': {
+ color: blue[600],
+ },
+ },
+})((props) => <Radio color="default" {...props} />);
+
+const ContrastRadio = withStyles({
+ root: {
+ color: yellow[400],
+ '&$checked': {
+ color: yellow[600],
+ },
},
- },
- checked: {},
+ checked: {},
})((props) => <Radio color="default" {...props} />);
-function Autor (props) {
- const {state} = useContext(Store)
+function Autor(props) {
+ const classes = useStyles();
+ const { state } = useContext(Store)
const [authorValue, setAuthorValue] = useState(props.initialValue ? props.initialValue : -1)
const [outroAutor, setOutroAutor] = useState(props.initialOutroAutor ? props.initialOutroAutor : '')
@@ -46,26 +74,29 @@ function Autor (props) {
}
return (
- <FormControl required={true} style={{width : "100%"}} onBlur={() => {props.onBlurCallback("author", getAuthor(), props.draftID)}}>
- <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
+ <FormControl required={true} style={{ width: "100%" }} onBlur={() => { props.onBlurCallback("author", getAuthor(), props.draftID) }}>
+ <StyledFormLabel contrast={props.contrast} component="legend" style={{ fontSize: "14px", marginBottom: "10px" }}>
<b>Autor do recurso</b>
</StyledFormLabel>
- <RadioGroup ara-label="Autor do Recurso" name="Autor do Recurso" value={authorValue} onChange={(e) => {setAuthorValue(e.target.value)}}>
- <FormControlLabel value="0" control={<BlueRadio />} label="Sou o(a) autor(a) deste recurso"/>
- <FormControlLabel value="1" control={<BlueRadio/>}
+ <RadioGroup ara-label="Autor do Recurso" name="Autor do Recurso" value={authorValue} onChange={(e) => { setAuthorValue(e.target.value) }}>
+ <FormControlLabel value="0" control={props.contrast === "" ? <BlueRadio /> : <ContrastRadio />} label="Sou o(a) autor(a) deste recurso" />
+ <FormControlLabel value="1" control={props.contrast === "" ? <BlueRadio /> : <ContrastRadio />}
label={
- <div style={{display : "flex", alignItems : "center"}}>
+ <div style={{ display: "flex", alignItems: "center" }}>
Outro:
<OutroAutorTextField
- id = {"outro-autor-form"}
- placeholder={"Nome dos autores"}
- type = {"text"}
- value = {outroAutor}
- onChange = {e => {setOutroAutor(e.target.value)}}
+ variant="outlined"
+ InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
+ contrast={props.contrast}
+ id={"outro-autor-form"}
+ label={"Nome dos autores"}
+ type={"text"}
+ value={outroAutor}
+ onChange={e => { setOutroAutor(e.target.value) }}
fullWidth
multiline
- disabled = {authorValue === "0"}
- style={{paddingLeft : "5px", width : "100%"}}
+ disabled={authorValue === "0"}
+ style={{ paddingLeft: "5px", width: "100%" }}
/>
</div>}
/>
diff --git a/src/Components/UploadPageComponents/Forms/Idioma.js b/src/Components/UploadPageComponents/Forms/Idioma.js
index 79de2d04..bf8b875f 100644
--- a/src/Components/UploadPageComponents/Forms/Idioma.js
+++ b/src/Components/UploadPageComponents/Forms/Idioma.js
@@ -16,56 +16,105 @@ 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 } from 'react'
import FormControl from '@material-ui/core/FormControl';
-import {StyledFormLabel} from '../StyledComponents.js'
-import ListItemText from '@material-ui/core/ListItemText';
+import { StyledFormLabel } from '../StyledComponents.js'
import Checkbox from '@material-ui/core/Checkbox';
-import MenuItem from '@material-ui/core/MenuItem';
-import Select from '@material-ui/core/Select';
+import { withStyles } from '@material-ui/core/styles';
+import { yellow, blue } from "@material-ui/core/colors";
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormGroup from '@material-ui/core/FormGroup';
-export default function Idioma (props) {
+const BlueCheckBox = withStyles({
+ root: {
+ color: blue[400],
+ '&$checked': {
+ color: blue[600],
+ },
+ },
+ checked: {},
+})((props) => <Checkbox color="default" {...props} />);
+
+const ContrastCheckBox = withStyles({
+ root: {
+ color: yellow[400],
+ '&$checked': {
+ color: yellow[600],
+ },
+ },
+ checked: {},
+})((props) => <Checkbox color="default" {...props} />);
+
+export default function Idioma(props) {
const [chosenLanguage, setChosenLanguage] = useState(props.initialValue ? props.initialValue : [])
const [ids, setIds] = useState(props.initialIDValue ? props.initialIDValue : [])
- const handleChangeLanguage = (event) => {
- let newLanguage = event.target.value.pop()
- if (!chosenLanguage.some(language => language === newLanguage.name)) {
- setChosenLanguage(chosenLanguage => [...chosenLanguage, newLanguage.name]);
- setIds(ids => [...ids, newLanguage.id])
+ const handleChangeLanguage = (language) => {
+ const languageIndex = chosenLanguage.indexOf(language.name);
+ const copyChosenLanguages = [...chosenLanguage];
+ const copyIds = [...ids]
+
+ if (languageIndex > -1) {
+ copyChosenLanguages.splice(languageIndex, 1);
+ copyIds.splice(languageIndex, 1);
}
- else
- {
- if (chosenLanguage.length > 0) {
- setChosenLanguage(chosenLanguage.filter((language) => {return language !== newLanguage.name}));
- setIds(ids.filter((id) => {return id !== newLanguage.id}))
- }
+ else {
+ copyChosenLanguages.push(language.name);
+ copyIds.push(language.id);
}
+
+ setChosenLanguage(copyChosenLanguages);
+ setIds(copyIds);
+
+ // if (!chosenLanguage.some(language => language === newLanguage.name)) {
+ // setChosenLanguage(chosenLanguage => [...chosenLanguage, newLanguage.name]);
+ // setIds(ids => [...ids, newLanguage.id])
+ // }
+ // else {
+ // if (chosenLanguage.length > 0) {
+ // setChosenLanguage(chosenLanguage.filter((language) => { return language !== newLanguage.name }));
+ // setIds(ids.filter((id) => { return id !== newLanguage.id }))
+ // }
+ // }
};
return (
- <FormControl style={{minWidth : "30%"}}>
- <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
+ <FormControl style={{ minWidth: "30%" }}>
+ <StyledFormLabel contrast={props.contrast} component="legend" style={{ fontSize: "14px", marginBottom: "10px" }}>
<b>Idioma</b><span>*</span>
</StyledFormLabel>
- <Select
+
+ <FormGroup row onBlur={() => { props.onBlurCallback("language_ids", ids, props.draftID) }}>
+ {
+ props.languages.map((language) => {
+ return <FormControlLabel
+ value={language}
+ key={language.name}
+ control={props.contrast === "" ? <BlueCheckBox checked={chosenLanguage.indexOf(language.name) > -1} onChange={() => handleChangeLanguage(language)} /> : <ContrastCheckBox checked={chosenLanguage.indexOf(language.name) > -1} onChange={() => handleChangeLanguage(language)} />}
+ label={<span style={props.contrast === "" ? {} : { color: "yellow", textDecoration: "underline" }}>{language.name}</span>}
+ />
+ })
+ }
+ </FormGroup>
+
+ {/* <Select
value={chosenLanguage}
multiple
renderValue={(selected) => selected.join(', ')}
name="Idioma"
onChange={handleChangeLanguage}
- onBlur={() => {props.onBlurCallback("language_ids", ids, props.draftID)}}
+ onBlur={() => { props.onBlurCallback("language_ids", ids, props.draftID) }}
>
{
- props.languages.map( language =>
+ props.languages.map(language =>
<MenuItem key={language.name} value={language}>
<Checkbox checked={chosenLanguage.indexOf(language.name) > -1} />
<ListItemText primary={language.name} />
</MenuItem>
)
}
- </Select>
+ </Select> */}
</FormControl>
)
}
diff --git a/src/Components/UploadPageComponents/Forms/Keywords.js b/src/Components/UploadPageComponents/Forms/Keywords.js
index 55b9aca1..023765f8 100644
--- a/src/Components/UploadPageComponents/Forms/Keywords.js
+++ b/src/Components/UploadPageComponents/Forms/Keywords.js
@@ -16,16 +16,36 @@ 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, memo, useEffect, useRef} from 'react'
+import React, { useState, memo, useEffect, useRef } from 'react'
import FormControl from '@material-ui/core/FormControl';
-import {StyledTextField, StyledFormLabel} from '../StyledComponents.js'
-import FormHelperText from '@material-ui/core/FormHelperText';
-import Chip from '@material-ui/core/Chip';
+import { StyledTextField, StyledFormLabel } from '../StyledComponents.js'
+import styled from 'styled-components';
+import DeleteIcon from '@material-ui/icons/Delete';
-function Keywords (props) {
+import { makeStyles } from "@material-ui/styles";
+import { Chip } from '@material-ui/core';
+const useStyles = makeStyles(theme => ({
+ darkTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "white",
+ width: "100%",
+ },
+ lightTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "black",
+ width: "100%",
+ }
+}));
+
+function Keywords(props) {
+ const classes = useStyles();
const [keywords, setKeywords] = useState(props.initialValue ? props.initialValue : [])
- const handleSetKeywords = (newKeyword) => {setKeywords(newKeyword)}
+ const handleSetKeywords = (newKeyword) => { setKeywords(newKeyword) }
const deleteKeyword = (keywordToDelete) => {
handleSetKeywords(keywords.filter((keyword) => keyword !== keywordToDelete))
}
@@ -33,19 +53,19 @@ function Keywords (props) {
const resettingRef = useRef(false);
useEffect(() => {
- if(resettingRef.current){ //used to ensure that keywords are updated before sending (after a delete)
- resettingRef.current = false;
- props.onBlurCallback("tags", keywords, props.draftID);
+ if (resettingRef.current) { //used to ensure that keywords are updated before sending (after a delete)
+ resettingRef.current = false;
+ props.onBlurCallback("tags", keywords, props.draftID);
}
- },[keywords])
+ }, [keywords])
const [keywordsBuffer, setKeywordsBuffer] = useState('')
const handleKeywords = (event) => {
let userInput = event.target.value;
- if(userInput.indexOf(',') !== -1 ) {
- if(userInput.length > 1) {
+ if (userInput.indexOf(',') !== -1) {
+ if (userInput.length > 1) {
handleSetKeywords([...keywords, userInput.split(',')[0]])
}
setKeywordsBuffer('')
@@ -58,40 +78,44 @@ function Keywords (props) {
return (
<React.Fragment>
- <FormControl required={true} style={{width : "100%"}}>
- <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
+ <FormControl required={true} style={{ width: "100%" }}>
+ <StyledFormLabel contrast={props.contrast} component="legend" style={{ fontSize: "14px", marginBottom: "10px" }}>
<b>Palavras-chave para buscar o Recurso</b>
- <span style={{color : "#a5a5a5", paddingLeft : "10px"}}>
- (Use vÃrgula ou enter para separar as palavras-chave)</span>
+ <span style={props.contrast === "" ? { color: "#a5a5a5", paddingLeft: "10px" } : { color: "white", paddingLeft: "10px" }}>
+ (Use vÃrgula ou enter para separar as palavras-chave)</span>
</StyledFormLabel>
<StyledTextField
- id = {"text-form"}
+ contrast={props.contrast}
+ variant='outlined'
+ InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
+ id={"text-form"}
placeholder={"Ex: Biomas, Geografia, ..."}
- type = {"text"}
+ type={"text"}
value={keywordsBuffer}
onChange={handleKeywords}
onKeyDown={(event) => {
- if(event.keyCode === 13){
+ if (event.keyCode === 13) {
handleSetKeywords([...keywords, keywordsBuffer])
setKeywordsBuffer('')
}
}}
fullWidth
- onBlur={() => {props.onBlurCallback("tags", keywords, props.draftID)}}
+ onBlur={() => { props.onBlurCallback("tags", keywords, props.draftID) }}
/>
</FormControl>
+ <SizedBox />
{
keywords.length !== 0 &&
- <FormHelperText>
- {
- keywords.map( (keyword) =>
- <Chip label={keyword} key={keyword} onDelete={() => {resettingRef.current = true; deleteKeyword(keyword);}} />
- )
- }
- </FormHelperText>
+ keywords.map((keyword) =>
+ <Chip style={props.contrast === "" ? { margin: "0.3em 0.5em" } : { border: "1px solid white", backgroundColor: "black", margin: "0.3em 0.5em", color: "white" }} label={keyword} key={keyword} onDelete={() => deleteKeyword(keyword)} deleteIcon={<DeleteIcon style={props.contrast === "" ? {} : { color: "white" }} />} />
+ )
}
</React.Fragment>
)
}
+const SizedBox = styled.div`
+ height: 2em;
+`
+
export default memo(Keywords)
diff --git a/src/Components/UploadPageComponents/Forms/NewTitle.js b/src/Components/UploadPageComponents/Forms/NewTitle.js
index b5d27708..c1e5f897 100644
--- a/src/Components/UploadPageComponents/Forms/NewTitle.js
+++ b/src/Components/UploadPageComponents/Forms/NewTitle.js
@@ -16,46 +16,65 @@ 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, memo} from 'react'
+import React, { useState, memo } from 'react'
import FormControl from '@material-ui/core/FormControl';
-import {StyledTextField, StyledFormLabel} from '../StyledComponents.js'
-import FormHelperText from '@material-ui/core/FormHelperText';
+import { StyledTextField, StyledFormLabel } from '../StyledComponents.js'
+import { makeStyles } from "@material-ui/styles";
+const useStyles = makeStyles(theme => ({
+ darkTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "white",
+ width: "100%",
+ },
+ lightTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "black",
+ width: "100%",
+ }
+}));
-function NewTitle (props) {
+function NewTitle(props) {
+ const classes = useStyles();
const [objTitle, setFormValue] = useState({
- error : false,
- value : props.initialValue ? props.initialValue : ""
+ error: false,
+ value: props.initialValue ? props.initialValue : ""
})
const handleChangeTitle = (e) => {
let userInput = e.target.value
let flag = (userInput.length > 100 || userInput.length === 0 ? true : false)
- setFormValue({...objTitle,
- error : flag,
- value : userInput
+ setFormValue({
+ ...objTitle,
+ error: flag,
+ value: userInput
})
}
return (
- <FormControl required={true} style={{width : "100%", height : "100px"}}>
- <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
+ <FormControl required={true} style={{ width: "100%", height: "100px" }}>
+ <StyledFormLabel contrast={props.contrast} component="legend" style={{ fontSize: "14px", marginBottom: "10px" }}>
<b>TÃtulo do Recurso</b>
</StyledFormLabel>
<StyledTextField
- id = {"title-form"}
- placeholder={"Ex: Jogo Virtual sobre os Biomas do Brasil"}
- type = {"text"}
- value = {objTitle.value}
- onChange = {e => {handleChangeTitle(e)}}
- helperText = {objTitle.value.length + "/100"}
- error = {objTitle.error}
+ contrast={props.contrast}
+ id={"title-form"}
+ placeholder="Ex: Jogo Virtual sobre os Biomas do Brasil"
+ type={"text"}
+ value={objTitle.value}
+ variant="outlined"
+ onChange={e => { handleChangeTitle(e) }}
+ helperText={objTitle.value.length + "/100"}
+ InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
+ error={objTitle.error}
fullWidth
multiline
- onBlur={() => {props.onBlurCallback("name", objTitle.value, props.draftID)}}
- />
- {objTitle.value.length === 0 && objTitle.error &&
- <FormHelperText style={{fontSize : "14px", position : "relative", top : "-26px"}}>Faltou definir um tÃtulo.</FormHelperText>}
+ onBlur={() => { props.onBlurCallback("name", objTitle.value, props.draftID) }}
+ />
</FormControl>
)
}
diff --git a/src/Components/UploadPageComponents/Forms/SobreORecurso.js b/src/Components/UploadPageComponents/Forms/SobreORecurso.js
index ff82f818..f0c43d9e 100644
--- a/src/Components/UploadPageComponents/Forms/SobreORecurso.js
+++ b/src/Components/UploadPageComponents/Forms/SobreORecurso.js
@@ -19,20 +19,42 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, {useState, memo} from 'react'
import FormControl from '@material-ui/core/FormControl';
import {StyledTextField, StyledFormLabel} from '../StyledComponents.js'
+import { makeStyles } from "@material-ui/styles";
+
+const useStyles = makeStyles(theme => ({
+ darkTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "white",
+ width: "100%",
+ },
+ lightTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "black",
+ width: "100%",
+ }
+}));
function SobreORecurso (props) {
+ const classes = useStyles();
const [objDescription, setDescription] = useState(props.initialValue ? props.initialValue : '')
const handleSetDescription = (event) => {setDescription(event.target.value)}
return (
<FormControl style={{width : "100%"}}>
- <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
- <b>Descrição geral do Recurso</b> (Opcional)
+ <StyledFormLabel contrast={props.contrast} component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
+ <span><b>Descrição geral do Recurso</b> (Opcional)</span>
</StyledFormLabel>
<StyledTextField
+ InputProps={props.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
+ contrast = {props.contrast}
id = {"description-form"}
placeholder={"Quais assuntos são contemplados neste Recurso? Para quais objetivos este Recurso pode ser destinado?"}
+ variant='outlined'
type = {"text"}
value={objDescription}
onChange={handleSetDescription}
diff --git a/src/Components/UploadPageComponents/Forms/TipoDeRecurso.js b/src/Components/UploadPageComponents/Forms/TipoDeRecurso.js
index 4e7a9f29..d55daaae 100644
--- a/src/Components/UploadPageComponents/Forms/TipoDeRecurso.js
+++ b/src/Components/UploadPageComponents/Forms/TipoDeRecurso.js
@@ -16,28 +16,28 @@ 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, memo} from 'react'
+import React, { useState, memo } from 'react'
import FormControl from '@material-ui/core/FormControl';
-import {StyledRadio, StyledFormLabel} from '../StyledComponents.js'
+import { StyledRadio, StyledFormLabel } from '../StyledComponents.js'
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
-
-function TipoDeRecurso (props) {
+
+function TipoDeRecurso(props) {
const [objTypeValue, chooseObjType] = useState(props.initialValue ? props.initialValue : 0)
- const handleChangeObjType = (event) => {chooseObjType(Number(event.target.value))}
+ const handleChangeObjType = (event) => { chooseObjType(Number(event.target.value)) }
return (
- <FormControl required={true} style={{width : "100%"}} onBlur={() => {props.onBlurCallback("object_type_id", objTypeValue, props.draftID)}}>
- <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
+ <FormControl required={true} style={{ width: "100%" }} onBlur={() => { props.onBlurCallback("object_type_id", objTypeValue, props.draftID) }}>
+ <StyledFormLabel contrast={props.contrast} component="legend" style={{ fontSize: "14px", marginBottom: "10px" }}>
<b>Tipo de recurso</b>
</StyledFormLabel>
- <RadioGroup aria-label="Tipo de Recurso" name="Tipo de Recurso" row value={objTypeValue} onChange={handleChangeObjType} style={{justifyContent : "center"}}>
+ <RadioGroup aria-label="Tipo de Recurso" name="Tipo de Recurso" row value={objTypeValue} onChange={handleChangeObjType} style={{ justifyContent: "center" }}>
{
- props.objTypes.map( (type) =>
- <FormControlLabel key={type.id} value={type.id}
- control={<StyledRadio label={type.name} checked={objTypeValue === type.id}/>}
+ props.objTypes.map((type) =>
+ <FormControlLabel key={type.id} value={type.id}
+ control={<StyledRadio contrast={props.contrast} label={type.name} checked={objTypeValue === type.id} />}
/>
)
diff --git a/src/Components/UploadPageComponents/GetIconByName.js b/src/Components/UploadPageComponents/GetIconByName.js
index d3c40d37..b19857c0 100644
--- a/src/Components/UploadPageComponents/GetIconByName.js
+++ b/src/Components/UploadPageComponents/GetIconByName.js
@@ -14,7 +14,6 @@ import { ReactComponent as VideoIcon } from '../../img/object_type_icons/object-
import { ReactComponent as AnimacaoIcon } from '../../img/object_type_icons/object-type_animacao.svg'
import { ReactComponent as PlanoAulaIcon } from '../../img/object_type_icons/object-type_plano-de-aula.svg'
-
import { ReactComponent as Arte } from '../../img/subject_icons/subject_arte.svg'
import { ReactComponent as Biologia } from '../../img/subject_icons/subject_biologia.svg'
import { ReactComponent as CienciasNatureza } from '../../img/subject_icons/subject_ciencias-da-natureza.svg'
@@ -125,7 +124,7 @@ export default function GetIconByName(objName) {
case "vÃdeo":
return <VideoIcon className="icon" />;
case "animação":
- return <AnimacaoIcon className="icon" />;
+ return <AnimacaoIcon className="icon"/>;
default:
return <OutrosIcon className="icon" />;
}
diff --git a/src/Components/UploadPageComponents/ModalCancelar.js b/src/Components/UploadPageComponents/ModalCancelar.js
index fcfbc9b2..b7569f16 100644
--- a/src/Components/UploadPageComponents/ModalCancelar.js
+++ b/src/Components/UploadPageComponents/ModalCancelar.js
@@ -29,7 +29,6 @@ export default function ModalCancelar (props) {
function handleSuccess (data) {
props.handleClose()
- console.log('ir pra home')
}
const handleDelete = () => {
@@ -55,15 +54,15 @@ export default function ModalCancelar (props) {
}}
>
<Fade in={props.open}>
- <Container>
+ <Container contrast={props.contrast}>
<Content>
<h2>Tem certeza que deseja cancelar?</h2>
<p>Ao clicar no botão "OK", o seu recurso NÃO será salvo.</p>
</Content>
<ButtonsArea>
- <StyledButton onClick={props.handleClose}>VOLTAR</StyledButton>
- <Link to="/" style={{textDecoration : "none !important"}}>
- <StyledButton onClick={handleDelete}>OK</StyledButton>
+ <StyledButton contrast={props.contrast} onClick={props.handleClose}>VOLTAR</StyledButton>
+ <Link to="/">
+ <StyledButton contrast={props.contrast} onClick={handleDelete}>OK</StyledButton>
</Link>
</ButtonsArea>
</Container>
@@ -89,14 +88,12 @@ const Content = styled.div`
margin-top : 0;
font-size : 20px;
font-weight : bold;
- color : #666;
margin-bottom : 10px;
}
p {
margin : 0 0 10px;
font-size : 14px;
- color : #666;
}
`
@@ -114,8 +111,11 @@ const StyledModal = styled(Modal)`
`
const Container = styled.div`
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ color: ${props => props.contrast === "" ? "#666" : "white"} !important;
+ border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
+
box-sizing : border-box;
- background-color : white;
max-width : none;
align : center;
display : flex;
@@ -132,14 +132,12 @@ const Container = styled.div`
}
`
const StyledButton = styled(Button)`
- &:hover {
- background-color : rgba(158,158,158,0.2) !important;
- }
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
+
max-height : 36px !important;
background-color : transparent !important;
- color : #00bcd4 !important;
- text-decoration : none !important;
outline : none !important;
text-align : center !important;
diff --git a/src/Components/UploadPageComponents/PartOne.js b/src/Components/UploadPageComponents/PartOne.js
index 250428db..66c18a51 100644
--- a/src/Components/UploadPageComponents/PartOne.js
+++ b/src/Components/UploadPageComponents/PartOne.js
@@ -16,8 +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, useEffect, useContext, useRef} from 'react'
-import {Store} from '../../Store.js'
+import React, { useState, useEffect, useContext, useRef } from 'react'
+import { Store } from '../../Store.js'
import Grid from '@material-ui/core/Grid';
import ButtonsDiv from './ButtonsDiv.js'
import SobreORecurso from './Forms/SobreORecurso.js'
@@ -26,14 +26,14 @@ import Keywords from './Forms/Keywords.js'
import Autor from './Forms/Autor.js'
import TipoDeRecurso from './Forms/TipoDeRecurso.js'
import Idioma from './Forms/Idioma.js'
-import {SendInfo} from './SendInfo.js'
-import {getRequest} from '../HelperFunctions/getAxiosConfig.js'
+import { SendInfo } from './SendInfo.js'
+import { getRequest } from '../HelperFunctions/getAxiosConfig.js'
import SnackBar from '../../Components/SnackbarComponent';
import LoadingSpinner from '../../Components/LoadingSpinner'
-export default function PartOne (props) {
+export default function PartOne(props) {
// {/*const [subjects, setSubjects] = useState([])*/}
- const {state} = useContext(Store)
+ const { state } = useContext(Store)
const didMountRef = useRef(false);
const didMountRefObj = useRef(false);
@@ -68,23 +68,23 @@ export default function PartOne (props) {
})
}
- function checkPartOne (data) {
+ function checkPartOne(data) {
return (
- data.name !== null &&
- data.tags.length !== 0 &&
- data.author !== null &&
- data.object_type !== null &&
+ data.name !== null &&
+ data.tags.length !== 0 &&
+ data.author !== null &&
+ data.object_type !== null &&
data.language.length !== 0 &&
(data.attachments.length !== 0 ||
- data.link !== null)
+ data.link !== null)
)
}
- function handleSuccessGetObjTypes (data) {
+ function handleSuccessGetObjTypes(data) {
setObjTypes(data.sort((a, b) => (a.name) > (b.name) ? 1 : -1))
}
- function handleSuccessGetFormData (data) {
+ function handleSuccessGetFormData(data) {
if (checkPartOne(data)) {
props.stepperControl(1)
} else {
@@ -98,40 +98,40 @@ export default function PartOne (props) {
}
}
- function handleSuccessfulGet (data) {
+ function handleSuccessfulGet(data) {
setLearningObject(data)
}
- useEffect( () => {
- getRequest(`/object_types/`, handleSuccessGetObjTypes, (error) => {console.log(error)})
- getRequest(`/languages/`, (data) => {setLanguages(data)}, (error) => {console.log(error)})
+ useEffect(() => {
+ getRequest(`/object_types/`, handleSuccessGetObjTypes, (error) => { console.log(error) })
+ getRequest(`/languages/`, (data) => { setLanguages(data) }, (error) => { console.log(error) })
const url = `/learning_objects/${props.draftID}`
- getRequest(url, handleSuccessfulGet, (error) => {console.log(error)})
+ getRequest(url, handleSuccessfulGet, (error) => { console.log(error) })
}, [])
- useEffect( () => {
+ useEffect(() => {
if (didMountRef.current) {
- toggleLoading(false)
+ toggleLoading(false)
}
else {
- didMountRef.current = true;
+ didMountRef.current = true;
}
}, [learningObject])
- useEffect( () => {
+ useEffect(() => {
if (didMountRefObj.current) {
- toggleLoadingObj(false)
+ toggleLoadingObj(false)
}
else {
- didMountRefObj.current = true;
+ didMountRefObj.current = true;
}
}, [objTypes])
const handleSubmit = (e) => {
e.preventDefault();
- getRequest(`/learning_objects/${props.draftID}`,
- handleSuccessGetFormData,
+ getRequest(`/learning_objects/${props.draftID}`,
+ handleSuccessGetFormData,
() => {
const info = {
open: true,
@@ -140,7 +140,7 @@ export default function PartOne (props) {
color: 'red',
}
handleSnackInfo(info)
- }
+ }
)
}
@@ -157,65 +157,65 @@ export default function PartOne (props) {
!loading && !loadingObj ? (
<form onSubmit={handleSubmit}>
{/*------------------------------Titulo-----------------------------------------*/}
- <Grid item xs={12} style={{paddingBottom : "40px"}}>
- <NewTitle draftID={props.draftID} onBlurCallback={SendInfo} initialValue={learningObject.name}/>
+ <Grid item xs={12} style={{ paddingBottom: "40px" }}>
+ <NewTitle contrast={props.contrast} draftID={props.draftID} onBlurCallback={SendInfo} initialValue={learningObject.name} />
</Grid>
{/*------------------------------Sobre------------------------------------------*/}
- <Grid item xs={12} style={{paddingBottom : "40px"}}>
- <SobreORecurso draftID={props.draftID} onBlurCallback={SendInfo} initialValue={learningObject.description}/>
+ <Grid item xs={12} style={{ paddingBottom: "40px" }}>
+ <SobreORecurso contrast={props.contrast} draftID={props.draftID} onBlurCallback={SendInfo} initialValue={learningObject.description} />
</Grid>
{/*------------------------------Palavras-chave------------------------------------------*/}
- <Grid item xs={12} style={{paddingBottom : "40px"}}>
- <Keywords draftID={props.draftID} onBlurCallback={SendInfo} initialValue={learningObject.tags !== undefined ? learningObject.tags.map((tag) => tag.name) : null}/>
+ <Grid item xs={12} style={{ paddingBottom: "40px" }}>
+ <Keywords contrast={props.contrast} draftID={props.draftID} onBlurCallback={SendInfo} initialValue={learningObject.tags !== undefined ? learningObject.tags.map((tag) => tag.name) : null} />
</Grid>
{/*------------------------------Autor------------------------------------------*/}
- <Grid item xs={12} style={{paddingBottom : "40px"}}>
- <Autor draftID={props.draftID} onBlurCallback={SendInfo}
+ <Grid item xs={12} style={{ paddingBottom: "40px" }}>
+ <Autor contrast={props.contrast} draftID={props.draftID} onBlurCallback={SendInfo}
initialValue={
learningObject.author === state.currentUser.name ?
- 0 : 1
+ 0 : 1
}
initialOutroAutor={
learningObject.author !== state.currentUser.name ?
- learningObject.author : ''
+ learningObject.author : ''
}
/>
</Grid>
{/*------------------------------Tipo do Objeto------------------------------------------*/}
- <Grid item xs={12} style={{paddingBottom : "40px"}}>
- <TipoDeRecurso objTypes={objTypes} draftID={props.draftID} onBlurCallback={SendInfo}
+ <Grid item xs={12} style={{ paddingBottom: "40px" }}>
+ <TipoDeRecurso contrast={props.contrast} objTypes={objTypes} draftID={props.draftID} onBlurCallback={SendInfo}
initialValue={learningObject.object_type !== undefined && learningObject.object_type !== null ? objTypes.filter((type) => type.name === learningObject.object_type)[0].id : null}
/>
</Grid>
{/*------------------------------Idioma------------------------------------------*/}
- <Grid item xs={12} style={{paddingBottom : "40px"}}>
- <Idioma languages={languages} draftID={props.draftID} onBlurCallback={SendInfo}
- initialValue={learningObject.language !== undefined ? learningObject.language.map((language) => language.name) : null} initialIDValues={learningObject.language !== undefined ? learningObject.language.map((language) => language.id) : null}
- />
+ <Grid item xs={12} style={{ paddingBottom: "40px" }}>
+ <Idioma contrast={props.contrast} languages={languages} draftID={props.draftID} onBlurCallback={SendInfo}
+ initialValue={learningObject.language !== undefined ? learningObject.language.map((language) => language.name) : null} initialIDValues={learningObject.language !== undefined ? learningObject.language.map((language) => language.id) : null}
+ />
</Grid>
{/*------------------------------Botoes------------------------------------------*/}
<Grid item xs={12}>
- <ButtonsDiv draftID={props.draftID} stepperControl={props.stepperControl}/>
+ <ButtonsDiv contrast={props.contrast} draftID={props.draftID} stepperControl={props.stepperControl} />
</Grid>
- <Grid item xs={12} style={{marginTop : "20px"}}>
- <span style={{marginTop : "20px", fontWeight : "200", color : "#a5a5a5", paddingLeft : "10px"}}>
+ <Grid item xs={12} style={{ marginTop: "20px" }}>
+ <span style={props.contrast === "" ? { marginTop: "20px", fontWeight: "200", color: "#a5a5a5", paddingLeft: "10px" } : { marginTop: "20px", fontWeight: "200", color: "white", paddingLeft: "10px" }}>
* Campos obrigatórios
</span>
</Grid>
</form>
)
- :
- (
- <LoadingSpinner text={"CARREGANDO"}/>
- )
+ :
+ (
+ <LoadingSpinner contrast={props.contrast} text={"CARREGANDO"} />
+ )
}
- </React.Fragment>
+ </React.Fragment >
)
}
diff --git a/src/Components/UploadPageComponents/PartThree.js b/src/Components/UploadPageComponents/PartThree.js
index 5170659c..19a4ac03 100644
--- a/src/Components/UploadPageComponents/PartThree.js
+++ b/src/Components/UploadPageComponents/PartThree.js
@@ -22,8 +22,6 @@ import Grid from '@material-ui/core/Grid';
import styled from 'styled-components'
import { apiDomain } from '../../env';
import Stepper from './Stepper.js'
-import Rating from '@material-ui/lab/Rating';
-import StarBorderIcon from '@material-ui/icons/StarBorder';
import LoadingSpinner from '../LoadingSpinner.js'
import MoreIcon from '@material-ui/icons/More';
import SdCardIcon from '@material-ui/icons/SdCard';
@@ -36,6 +34,9 @@ import ModalCancelar from './ModalCancelar.js'
import { getDefaultThumbnail } from '../HelperFunctions/getDefaultThumbnail'
import { getRequest } from '../HelperFunctions/getAxiosConfig.js'
import ReCaptcha from 'react-recaptcha'
+import Chip from '@material-ui/core/Chip'
+import Rating from '@material-ui/lab/Rating';
+import StarBorderIcon from '@material-ui/icons/StarBorder';
export default function PartThree(props) {
var moment = require('moment')
@@ -49,14 +50,10 @@ export default function PartThree(props) {
const [author, setAuthor] = useState('')
function handleSuccess(data) {
- console.log(data.tags)
- console.log(data.language)
- console.log(data.subjects)
- // console.log(data.tags)
setDraft(data)
/*extract subjects*/
- setSubjects(data.subjects.map((subject)=>(subject.name)).join(', '))
+ setSubjects(data.subjects.map((subject) => (subject.name)).join(', '))
// setTags(data.tags.map(tag => tag.name))
setDescription(data.description)
setAuthor(data.author)
@@ -73,7 +70,6 @@ export default function PartThree(props) {
}
}, [state.currentUser.id])
- let windowWidth = window.innerWidth
const [modalCancelar, toggleModalCancelar] = useState(false)
const checkAccessLevel = (levelToCheck) => {
@@ -86,7 +82,7 @@ export default function PartThree(props) {
return (state.currentUser.roles.filter((role) => role.name === userRole).length > 0)
}
- function captchaVerified (response) {
+ function captchaVerified(response) {
if (response) {
setButtonAvailability(false)
}
@@ -99,416 +95,293 @@ export default function PartThree(props) {
(
<React.Fragment>
<ModalCancelar
+ contrast={props.contrast}
open={modalCancelar}
handleClose={() => { toggleModalCancelar(false) }}
draftID={draft.id}
/>
- <Grid container style={{ backgroundColor: "#f4f4f4" }}>
+ <Grid container style={props.contrast === "" ? { backgroundColor: "#f4f4f4" } : { backgroundColor: "black" }}>
<Grid item xs={12}>
- <StyledSessao1 className="page-content-preview">
- <div className="cabecalho">
- <div className="feedback-upload">
- <Stepper activeStep={props.activeStep} />
- <h2>Quase lá, agora só falta publicar!</h2>
- <span className="subtitle">Veja abaixo como o seu Recurso vai aparecer na Plataforma:</span>
- </div>
+ <StyledSessao1 contrast={props.contrast} className="page-content-preview">
+ <div className='header'>
+ <Stepper activeStep={props.activeStep} contrast={props.contrast} />
+ <h2>Quase lá, agora só falta publicar!</h2>
+ <span className="subtitle">Veja abaixo como o seu Recurso vai aparecer na Plataforma:</span>
</div>
</StyledSessao1>
- <CaixaContainer>
- <div>
- <div className="cabecalho-objeto">
- <img alt="" className="img-objeto"
+ <MainContent contrast={props.contrast} >
+ <CaixaContainer contrast={props.contrast} container spacing={2} className='draft-info'>
+ <Grid item xs={12} md={4}>
+ <img alt="" style={{ width: "100%", height: '100%' }}
src={draft.thumbnail === null ? getDefaultThumbnail(draft.object_type) : apiDomain + draft.thumbnail} />
- <div className="texto-objeto">
- <h3>{draft.name}</h3>
- <div className="rating-objeto">
- <Rating
- name="customized-empty"
- value={draft.score}
- precision={0.5}
- style={{ color: "#666" }}
- emptyIcon={<StarBorderIcon fontSize="inherit" />}
- />
- </div>
-
- <div className="relacionado">
- Relacionado com: {subjects}
- </div>
-
- {
- draft.tags &&
- <div className="tags-objeto">
- {draft.tags.map((tag) => {
- return (
- <div className="tag" key={tag.name}>{tag.name}</div>
- )
- })}
- </div>
- }
-
- </div>
- </div>
-
- <div className="sobre-objeto">
+ </Grid>
+ <Grid item xs={12} md={8}>
+ <Grid container justify='space-between'>
+ <Grid item xs={12}>
+ <h3>{draft.name}</h3>
+ </Grid>
+ <Grid item xs={12}>
+ <Grid container spacing={1}>
+ <Grid item xs={12}>
+ <Rating
+ readOnly
+ name="customized-empty"
+ value={draft.score}
+ precision={0.5}
+ style={props.contrast === "" ? { color: "#666" } : { color: "white" }}
+ emptyIcon={<StarBorderIcon style={props.contrast === "" ? { color: "#666" } : { color: "white" }} fontSize="inherit" />}
+ />
+ </Grid>
+ <Grid item xs={12}>
+ Relacionado com: {subjects}
+ </Grid>
+ <Grid item xs={12}>
+ {
+ draft.tags &&
+ draft.tags.map((tag) => {
+ return (
+ <Chip className='tag' key={tag.name} label={tag.name} />
+ )
+ })
+ }
+ </Grid>
+ </Grid>
+ </Grid>
+ </Grid>
+ </Grid>
+ </CaixaContainer>
+ </MainContent>
+ <MainContent contrast={props.contrast}>
+ <CaixaContainer contrast={props.contrast} container spacing={2}>
+ <Grid item xs={12}>
+ <h1 className='title'>
+ Sobre o recurso
+ </h1>
+ </Grid>
+ <Grid item xs={12}>
+ <hr />
+ </Grid>
+ <Grid item xs={12} sm={6}>
<Grid container>
- <Grid item xs={windowWidth > 990 ? 7 : 12} className="left">
- <div className="titulo">
- Sobre o Recurso
- </div>
- <div className="sobre-conteudo">
- <p className="descricao">{description}</p>
- {
- author !== '' &&
- <p className="autor">
- <b>Autoria:</b>
- <br />
- {author}
- </p>
- }
- </div>
+ <Grid item xs={12}>
+ {
+ description !== '' &&
+ <p>
+ <b>Descrição:</b>
+ <br />
+ {description}
+ </p>
+ }
+ </Grid>
+ <Grid item xs={12}>
+ {
+ author !== '' &&
+ <p>
+ <b>Autoria:</b>
+ <br />
+ {author}
+ </p>
+ }
+ </Grid>
+ </Grid>
+ </Grid>
+ <Grid item xs={12} sm={6}>
+ <Grid container spacing={1}>
+ <Grid item xs={12}>
+ <Grid container direction='row' spacing={1} alignItems='center'>
+ <Grid item>
+ <MoreIcon />
+ </Grid>
+ <Grid item>
+ <b>Tipo de mÃdia: </b>{draft.object_type}
+ </Grid>
+ </Grid>
</Grid>
- <Grid item xs={windowWidth > 990 ? 4 : 12} className="right">
- <span className="meta-objeto">
- <MoreIcon /> <b>Tipo de mÃdia: </b>{draft.object_type}
- </span>
-
- <span className="meta-objeto">
- <SdCardIcon /> <b>Tamanho: </b>
- </span>
+ <Grid item xs={12}>
+ <Grid container direction='row' spacing={1} alignItems='center'>
+ <Grid item>
+ <SdCardIcon />
+ </Grid>
+ <Grid item>
+ <b>Tamanho: </b>{draft.attachments ? (draft.attachments[0].size / 1000000).toFixed(2) + ' Mb' : "Informação não disponÃvel"}
+ </Grid>
+ </Grid>
+ </Grid>
- <span className="meta-objeto">
- <DateRangeIcon /> <b>Enviado: </b>
- {moment(draft.created_at).format("DD/MM/YYYY")}
- </span>
+ <Grid item xs={12}>
+ <Grid container direction='row' spacing={1} alignItems='center'>
+ <Grid item>
+ <DateRangeIcon />
+ </Grid>
+ <Grid item>
+ <b>Enviado: </b>
+ {moment(draft.created_at).format("DD/MM/YYYY")}
+ </Grid>
+ </Grid>
+ </Grid>
- <span className="meta-objeto">
- <UpdateIcon /><b>Atualização: </b>
- {moment(draft.updated_at).format("DD/MM/YYYY")}
- </span>
+ <Grid item xs={12}>
+ <Grid container direction='row' spacing={1} alignItems='center'>
+ <Grid item>
+ <UpdateIcon />
+ </Grid>
+ <Grid item>
+ <b>Atualização: </b>
+ {moment(draft.updated_at).format("DD/MM/YYYY")}
+ </Grid>
+ </Grid>
+ </Grid>
- { draft.language &&
+ <Grid item xs={12}>
+ {draft.language &&
draft.language.map((language =>
- <span className="meta-objeto" key={language.id}>
- <TranslateIcon /><b>Idioma: </b>{language.name}
- </span>
+ <Grid key={language.id} container direction='row' spacing={1} alignItems='center'>
+ <Grid item>
+ <TranslateIcon />
+ </Grid>
+ <Grid item>
+ <b>Idioma: </b>{language.name}
+ </Grid>
+ </Grid>
))
}
+ </Grid>
+
+ <Grid item xs={12}>
+ <Grid container direction='row' spacing={1} alignItems='center'>
+ <Grid item>
+ <AssignmentIcon />
+ </Grid>
+ <Grid item>
+ <b>Licença: </b>{draft.license ? draft.license.name : "Informação não disponÃvel"}
- <span className="meta-objeto">
- <AssignmentIcon /><b>Licença: </b>{draft.license ? draft.license.name : ""}
- </span>
+ </Grid>
+ </Grid>
</Grid>
</Grid>
- </div>
- </div>
- </CaixaContainer>
- <Sessao3>
- <form>
- <Grid container>
- <Grid item xs={windowWidth > 990 ? 6 : 12} style={{ paddingRight: "15px", paddingLeft: "15px", textAlign: windowWidth > 990 ? 'right' : 'center' }}>
- <span style={{ fontSize: "14px" }}>
- Para segurança da plataforma <br /> marque que você não é um robô
- </span>
+ </Grid>
+ </CaixaContainer>
+ </MainContent>
+ <MainContent contrast={props.contrast}>
+ <CaixaContainer contrast={props.contrast} container spacing={2} justify='center' alignItems='center'>
+ <Grid item xs={12} className='center'>
+ <Grid container direction='row' alignItems='center' justify='space-between' >
+ <Grid item>
+ <h4>
+ Para segurança da plataforma marque que você não é um robô
+ </h4>
+ </Grid>
+ <Grid item>
+ {
+ //<ReCaptcha sitekey={process.env.REACT_APP_SITE_KEY} verifyCallback={captchaVerified} /> //when key set in env
+ <ReCaptcha sitekey="6LfxuKUUAAAAAIzYpCzEtJyeE8QRjBYa44dvHlTX" verifyCallback={captchaVerified} /> //use this one on production
+ //<ReCaptcha sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" verifyCallback={captchaVerified} /> //test key, from google, do not use this one on production
+ }
+ </Grid>
</Grid>
- <Grid item xs={windowWidth > 990 ? 6 : 12} style={{ paddingRight: "15px", paddingLeft: "15px"}}>
- <div style={{margin:"0 auto", width: "304px"}}>
- {
- //<ReCaptcha sitekey={process.env.REACT_APP_SITE_KEY} verifyCallback={captchaVerified} /> //when key set in env
- <ReCaptcha sitekey="6LfxuKUUAAAAAIzYpCzEtJyeE8QRjBYa44dvHlTX" verifyCallback={captchaVerified} /> //use this one on production
- //<ReCaptcha sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" verifyCallback={captchaVerified} /> //test key, from google, do not use this one on production
- }
- </div>
- </Grid>
- <Grid item xs={12} style={{ paddingRight: "15px", paddingLeft: "15px", marginTop: "30px", textAlign: 'center' }}>
- <GrayButton onClick={() => { props.stepperControl(-1) }}>VOLTAR</GrayButton>
- <GrayButton onClick={() => { toggleModalCancelar(true) }}>CANCELAR</GrayButton>
- {
- checkAccessLevel("partner") ?
- (
- unavailableButton ? (
- <GrayButton disabled={unavailableButton}>PUBLICAR RECURSO</GrayButton>
- )
- :
+ </Grid>
+ <Grid item xs={12} className='center'>
+ <Grid container direction='row' spacing={1} alignItems='center' justify='center'>
+ <Grid item>
+ <GrayButton contrast={props.contrast} onClick={() => { props.stepperControl(-1) }}>VOLTAR</GrayButton>
+ </Grid>
+ <Grid item>
+ <GrayButton contrast={props.contrast} onClick={() => { toggleModalCancelar(true) }}>CANCELAR</GrayButton>
+ </Grid>
+ <Grid item>
+ {
+ checkAccessLevel("partner") ?
(
- <OrangeButton onClick={props.handlePost}>PUBLICAR RECURSO</OrangeButton>
- )
- )
- :
- (
- unavailableButton ? (
- <GrayButton disabled={unavailableButton}>SUBMETER RECURSO</GrayButton>
+ unavailableButton ? (
+ <GrayButton contrast={props.contrast} disabled={unavailableButton}>PUBLICAR RECURSO</GrayButton>
+ )
+ :
+ (
+ <OrangeButton contrast={props.contrast} onClick={props.handlePost}>PUBLICAR RECURSO</OrangeButton>
+ )
)
:
(
- <OrangeButton onClick={props.handleSubmit}>SUBMETER RECURSO</OrangeButton>
- )
- )
+ unavailableButton ? (
+ <GrayButton contrast={props.contrast} disabled={unavailableButton}>SUBMETER RECURSO</GrayButton>
+ )
+ :
+ (
+ <OrangeButton contrast={props.contrast} onClick={props.handleSubmit}>SUBMETER RECURSO</OrangeButton>
+ )
+ )
- }
+ }
+ </Grid>
</Grid>
</Grid>
- </form>
- </Sessao3>
+ </CaixaContainer>
+ </MainContent>
</Grid>
</Grid>
</React.Fragment>
)
:
(
- <LoadingSpinner text="CARREGANDO" />
+ <LoadingSpinner text="CARREGANDO" contrast={props.contrast} />
)
}
- </React.Fragment>
+ </React.Fragment >
)
}
-const Sessao3 = styled.div`
- position : relative;
- top : -120px;
- padding-right :15px;
- padding-left :15px;
- margin-right : auto;
- margin-left : auto;
- @media screen and (min-width: 768px) {
- width : 750px;
- }
- @media screen and (min-width: 992px) {
- width : 970px;
- }
- @media screen and (min-width: 1200px) {
- width : 970px;
- }
- color : #666;
- background-color : #f4f4f4;
+const MainContent = styled.div`
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ border-radius : 5px;
+ padding : 20px 10px;
+ width: 80%;
+ margin: 1.5em auto;
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"};
+ box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
`
-const CaixaContainer = styled.div`
- background-color : rgba(238,238,238,.5);
- border-radius : 5px;
- position : relative;
- top : -145px;
- padding : 10px;
-
- margin-right : auto;
- margin-left : auto;
- @media screen and (min-width: 768px) {
- width : 750px;
+const CaixaContainer = styled(Grid)`
+ width: 100%;
+
+ .draft-info{
+ padding : 10px 5px;
}
- @media screen and (min-width: 992px) {
- width : 970px;
- }
- @media screen and (min-width: 1200px) {
- width : 970px;
- }
-
-
- .cabecalho-objeto {
- background-color:#fff;
- box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
- padding: 0;
- margin-top: 30px;
- margin-bottom: 30px;
- position: relative;
- min-height: 100px;
- margin-top: 0;
- margin-bottom: 10px;
- color : #666;
-
- .img-objeto {
- background-color:#e5e5e5;
- height: 270px;
- width: 400px;
- float: left;
- padding: 0;
- }
- .texto-objeto {
- padding: 20px 20px 0 20px;
- height: content;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -ms-flex-wrap: nowrap;
- flex-wrap: nowrap;
- -webkit-box-pack: start;
- -ms-flex-pack: start;
- justify-content: flex-start;
- -ms-flex-line-pack: center;
- align-content: center;
- -webkit-box-align: start;
- -ms-flex-align: start;
- align-items: flex-start;
-
- h3 {
- font-size: 26px;
- font-weight: 400;
- margin: 0;
- padding-bottom: 15px;
- }
-
- .rating-objeto {
- margin : 0;
- display : inline-flex;
- padding-bottom : 10px;
- }
-
- .relacionado {
- font-weight : 500;
- font-size : 13px;
- }
-
- .tags-objeto {
- max-height: 54px;
- font-size: .8em;
- overflow: hidden;
- clear: both;
- display: -webkit-inline-box;
- display: -ms-inline-flexbox;
- display: inline-flex;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
-
- .tag {
- display: -webkit-inline-box;
- display: -ms-inline-flexbox;
- display: inline-flex;
- margin-right: 3px;
- background-color: #e5e5e5;
- padding: 3px 7px;
- border-radius: 15px;
- line-height: 18px;
- color: #666;
- margin-bottom: 3px;
- }
- }
- }
+ .tag{
+ color: ${props => props.contrast === "" ? "black" : "white"};
+ background: ${props => props.contrast === "" ? "#d4d4d4" : "black"};
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"};
+ margin: 0.2em;
}
- .sobre-objeto {
- margin-top : 0;
- margin-bottom : 0;
- min-height : 275px;
- display : flex;
- background-color: #fff;
- box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
- padding: 0;
- position: relative;
- min-height: 500px;
-
- .left {
- @media screen and (min-width : 990px) {
- margin-left : 4% !important;
- margin-top : 4% !important;
- }
-
- @media screen and (max-width : 989px) {
- margin : 0;
- padding : 20px;
- padding-bottom : 0;
- }
-
- .titulo {
- margin-top: 2% !important;
- margin-bottom: 10px;
- font-family: 'Roboto Light','Roboto Regular',Roboto;
- font-weight: 300;
- font-style: normal;
- color:#666;
- font-size: 1.857em;
- }
-
- .sobre-conteudo {
- flex : 1;
- color : #666;
- font-size : 14px !important;
-
- .descricao {
- text-align: justify;
- margin-bottom: 20px;
- margin-top: 20px;
- }
-
- .autor {
- margin : 0 0 10px !important;
- }
- }
- }
-
- .right {
- margin-top : 4% !important;
- border-left: 1px solid #e5e5e5;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-pack: start;
- -ms-flex-pack: start;
- justify-content: flex-start;
- padding: 20px;
- position : relative;
- margin-bottom : 20px;
-
- .meta-objeto {
- position: relative;
- width: 100%;
- font-size: 14px;
- color: #666;
- margin-bottom: 20px;
- display : inline-block;
- }
+ .title{
+ text-align: center;
+ font-weight: lighter;
+ }
- .MuiSvgIcon-root {
- vertical-align : middle !important;
- margin-right : 15px !important;
- }
- }
+ .center{
+ text-align: center;
}
-}
`
const StyledSessao1 = styled.div`
color : #fff;
- background-color : #00bcd4;
- float : none;
+ background: ${props => props.contrast === "" ? "#00bcd4" : "black"};
height : 300px;
- text-align : center;
padding-top : 48px;
padding-bottom : 48px;
- margin-bottom : 30px;
-
- .cabecalho {
- display : flex;
- flex-direction : column;
- align-items : center;
- margin-bottom : 30px;
-
- .feedback-upload {
- display : flex;
- flex-direction : column;
- justify-content : center;
- text-align : center
- margin-top : 20px;
- width : 55%;
- }
-
- h2 {
- margint-top : 0;
- font-size : 26px;
- font-weight : lighter;
- margin-bottom : 10px;
- }
-
- .subtitle {
- font-size : 16px;
-
- }
+ flex-direction : column;
+ justify-content: center;
+ align-items: center;
+ display: flex;
+
+ .header{
+ width: 50%;
+ margin: 0 auto;
+ text-align: center;
}
`
diff --git a/src/Components/UploadPageComponents/PartTwo.js b/src/Components/UploadPageComponents/PartTwo.js
index cf65a4de..1c1cb116 100644
--- a/src/Components/UploadPageComponents/PartTwo.js
+++ b/src/Components/UploadPageComponents/PartTwo.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, useRef} from 'react'
+import React, { useState, useEffect, useRef } from 'react'
import Grid from '@material-ui/core/Grid';
import styled from 'styled-components'
import DragAndDropThumbnail from './PartTwoComponents/DragAndDropThumbnail'
@@ -25,26 +25,49 @@ import Licenca from './PartTwoComponents/Licenca'
import Checkbox from '@material-ui/core/Checkbox';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormControl from '@material-ui/core/FormControl';
-import {StyledFormLabel} from './StyledComponents.js'
+import { StyledFormLabel } from './StyledComponents.js'
import ButtonsDiv from './ButtonsDiv.js'
import SubjectsAndThemes from './PartTwoComponents/SubjectsAndThemes.js'
-import {SendInfo} from './SendInfo.js'
+import { SendInfo } from './SendInfo.js'
import EditThumbnail from './PartTwoComponents/EditThumbnail.js'
import DisplayThumbnail from './PartTwoComponents/DisplayThumbnail.js'
import CustomCircularProgress from './PartTwoComponents/CustomCircularProgress';
-import {getRequest, putRequest} from '../HelperFunctions/getAxiosConfig.js'
+import { getRequest, putRequest } from '../HelperFunctions/getAxiosConfig.js'
import SnackBar from '../../Components/SnackbarComponent';
import LoadingSpinner from '../../Components/LoadingSpinner'
-export function LoadingDiv () {
+import { yellow, blue } from "@material-ui/core/colors";
+import { withStyles } from '@material-ui/core/styles';
+
+const BlueCheckBox = withStyles({
+ root: {
+ color: blue[400],
+ '&$checked': {
+ color: blue[600],
+ },
+ },
+ checked: {},
+})((props) => <Checkbox color="default" {...props} />);
+
+const ContrastCheckBox = withStyles({
+ root: {
+ color: yellow[400],
+ '&$checked': {
+ color: yellow[600],
+ },
+ },
+ checked: {},
+})((props) => <Checkbox color="default" {...props} />);
+
+export function LoadingDiv(props) {
return (
- <div style={{width : "100%", display : "flex", alignItems : "center", justifyContent : "center", color : "#666"}}>
- <CustomCircularProgress/> CARREGANDO IMAGEM
+ <div style={props.contrast === "" ? { width: "100%", display: "flex", alignItems: "center", justifyContent: "center", color: "#666" } : { width: "100%", display: "flex", alignItems: "center", justifyContent: "center", color: "white" }}>
+ <CustomCircularProgress contrast={props.contrast} /> CARREGANDO IMAGEM
</div>
)
}
-export default function PartTwo (props) {
+export default function PartTwo(props) {
const didMountRef = useRef(false);
const [eduStages, setEduStages] = useState([])
@@ -78,12 +101,12 @@ export default function PartTwo (props) {
})
}
- function handleSuccess (data) {
- setSubjects(data.filter(subject => subject.theme === false).sort((a,b) => a.name > b.name ? 1 : -1))
- setThemes(data.filter(subject => subject.theme === true).sort((a,b) => a.name > b.name ? 1 : -1))
+ function handleSuccess(data) {
+ setSubjects(data.filter(subject => subject.theme === false).sort((a, b) => a.name > b.name ? 1 : -1))
+ setThemes(data.filter(subject => subject.theme === true).sort((a, b) => a.name > b.name ? 1 : -1))
}
- function checkPartTwo (data) {
+ function checkPartTwo(data) {
return (
data.educational_stages.length !== 0 &&
data.subjects.length !== 0 &&
@@ -92,7 +115,7 @@ export default function PartTwo (props) {
)
}
- function handleSuccessGetFormData (data) {
+ function handleSuccessGetFormData(data) {
if (checkPartTwo(data)) {
props.stepperControl(1)
} else {
@@ -106,82 +129,86 @@ export default function PartTwo (props) {
}
}
- function handleSuccessfulGet (data) {
+ function handleSuccessfulGet(data) {
setLearningObject(data)
}
useEffect(() => {
- getRequest(`/educational_stages/`, (data) => {setEduStages(data)}, (error) => {console.log(error)})
+ getRequest(`/educational_stages/`, (data) => { setEduStages(data) }, (error) => { console.log(error) })
- getRequest(`/subjects/`, handleSuccess, (error) => {console.log(error)})
+ getRequest(`/subjects/`, handleSuccess, (error) => { console.log(error) })
const url = `/learning_objects/${props.draftID}`
- getRequest(url, handleSuccessfulGet, (error) => {console.log(error)})
+ getRequest(url, handleSuccessfulGet, (error) => { console.log(error) })
}, [])
- useEffect( () => {
+ useEffect(() => {
if (didMountRef.current) {
- console.log(learningObject);
- toggleLoading(false)
+ toggleLoading(false)
}
else {
- didMountRef.current = true;
+ didMountRef.current = true;
}
}, [learningObject])
- /*------------------------Licenca------------------------*/
+ /*------------------------Licenca------------------------*/
+
+ const [termsCheckbox, setChecked] = useState(false)
+ const toggleCheckbox = () => {
+ setChecked(!termsCheckbox)
+ }
- const [termsCheckbox, setChecked] = useState(false)
- const toggleCheckbox = () => {
- setChecked(!termsCheckbox)
- }
+ const [thumbnail, setThumbnail] = useState('')
+ const [tempUrl, setTempUrl] = useState('')
- const [thumbnail, setThumbnail] = useState('')
- const [tempUrl, setTempUrl] = useState('')
+ const acceptFile = (file) => {
+ const objectURL = URL.createObjectURL(file)
+ setTempUrl(objectURL)
+ setThumbnailStage('editing')
+ }
- const acceptFile = (file) => {
- const objectURL = URL.createObjectURL(file)
- console.log(file)
- setTempUrl(objectURL)
- setThumbnailStage('editing')
- }
- const updateThumb = (newThumbnail) => {
- setThumbnail(newThumbnail)
- console.log(thumbnail)
- }
+ const updateThumb = (newThumbnail) => {
+ setThumbnail(newThumbnail)
+ }
- const finalizeThumb = () => {
- setThumbnailStage('uploading')
+ const handleDeleteThumb = () => {
+ setThumbnail('');
+ setTempUrl('');
+ setThumbnailStage('default');
+ }
- const url = `/learning_objects/${props.draftID}`
+ const finalizeThumb = () => {
+ setThumbnailStage('uploading')
- let fdThumb = new FormData()
- fdThumb.set('learning_object[thumbnail]', thumbnail)
+ const url = `/learning_objects/${props.draftID}`
- putRequest(url, fdThumb, (data) => {setThumbnailStage('done')}, (error) => {console.log(error)})
- }
+ let fdThumb = new FormData()
+ fdThumb.set('learning_object[thumbnail]', thumbnail)
- const [thumbnailStage, setThumbnailStage] = useState('default')
+ putRequest(url, fdThumb, (data) => { setThumbnailStage('done') }, (error) => { console.log(error) })
+ }
- const chooseRenderStageThumbnail = () => {
- switch(thumbnailStage) {
- case 'uploading':
- return (<LoadingDiv/>)
- case 'done':
- return (<DisplayThumbnail acceptFile={acceptFile} thumbnail={thumbnail}/>)
- case 'editing':
- return (<EditThumbnail finalizeThumb={finalizeThumb} tempImgURL={tempUrl} updateThumb={updateThumb}/>)
- default :
- return (<DragAndDropThumbnail acceptFile={acceptFile}/>)
+ const [thumbnailStage, setThumbnailStage] = useState('default')
- }
- }
+ const chooseRenderStageThumbnail = (contrast) => {
+ switch (thumbnailStage) {
+ case 'uploading':
+ return (<LoadingDiv contrast={contrast} />)
+ case 'done':
+ return (<DisplayThumbnail handleDelete={handleDeleteThumb} acceptFile={acceptFile} contrast={contrast} thumbnail={thumbnail} />)
+ case 'editing':
+ return (<EditThumbnail contrast={contrast} finalizeThumb={finalizeThumb} tempImgURL={tempUrl} updateThumb={updateThumb} />)
+ default:
+ return (<DragAndDropThumbnail contrast={contrast} acceptFile={acceptFile} />)
- const handleSubmit = (e) => {
+ }
+ }
+
+ const handleSubmit = (e) => {
e.preventDefault();
- getRequest(`/learning_objects/${props.draftID}`,
- handleSuccessGetFormData,
+ getRequest(`/learning_objects/${props.draftID}`,
+ handleSuccessGetFormData,
() => {
const info = {
open: true,
@@ -190,11 +217,11 @@ export default function PartTwo (props) {
color: 'red',
}
handleSnackInfo(info)
- }
+ }
)
}
- return (
+ return (
<React.Fragment>
<SnackBar
snackbarOpen={snackInfo.open}
@@ -205,50 +232,50 @@ export default function PartTwo (props) {
/>
{
!loading ? (
- <form style={{width : "100%"}} onSubmit={handleSubmit}>
- <Grid item xs={12} style={{paddingBottom : "40px"}}>
- {chooseRenderStageThumbnail()}
+ <form style={{ width: "100%" }} onSubmit={handleSubmit}>
+ <Grid item xs={12} style={{ paddingBottom: "40px" }}>
+ {chooseRenderStageThumbnail(props.contrast)}
</Grid>
- <Grid item xs={12} style={{paddingBottom : "40px"}}>
- <EducationalStage draftID={props.draftID} eduStages={eduStages} onBlurCallback={SendInfo}
+ <Grid item xs={12} style={{ paddingBottom: "40px" }}>
+ <EducationalStage contrast={props.contrast} draftID={props.draftID} eduStages={eduStages} onBlurCallback={SendInfo}
initialValue={learningObject.educational_stages !== null ? learningObject.educational_stages.map((stage) => String(stage.id)) : null}
/>
</Grid>
- <SubjectsAndThemes draftID={props.draftID} subjects={subjects} themes={themes} onUploadPage={true} onBlurCallback={SendInfo}
+ <SubjectsAndThemes contrast={props.contrast} draftID={props.draftID} subjects={subjects} themes={themes} onUploadPage={true} onBlurCallback={SendInfo}
initialValue={learningObject.subjects !== null ? learningObject.subjects.map(subject => String(subject.id)) : null}
/>
- <Grid item xs={12} style={{paddingBottom : "40px"}}>
- <Licenca draftID={props.draftID} onBlurCallback={SendInfo} initialValue={learningObject.license ? learningObject.license.id : null}/>
- </Grid>
+ <Grid item xs={12} style={{ paddingBottom: "40px" }}>
+ <Licenca contrast={props.contrast} draftID={props.draftID} onBlurCallback={SendInfo} initialValue={learningObject.license ? learningObject.license.id : null} />
+ </Grid>
- <Grid item xs={12} style={{paddingBottom : "40px"}}>
- <StyledFormControl required >
- <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}} onClick={() => window.open("/termos/", "_blank")}>
- <b>Confirme se você concorda com os <strong style={{color : "#ff7f00"}}>termos de uso e de propriedade intelectual</strong></b>
+ <Grid item xs={12} style={{ paddingBottom: "40px" }}>
+ <StyledFormControl required contrast={props.contrast}>
+ <StyledFormLabel contrast={props.contrast} component="legend" style={{ fontSize: "14px", marginBottom: "10px" }} >
+ <b>Confirme se você concorda com os <strong onClick={() => window.open("/termos/", "_blank")} style={props.contrast === "" ? { color: "#ff7f00", cursor: "pointer" } : { color: "yellow", textDecoration: "underline", cursor: "pointer" }}>termos de uso e de propriedade intelectual</strong></b>
</StyledFormLabel>
- <FormControlLabel label={<span className="label">Li e concordo com os termos de uso e de propriedade intelectual.</span>} control={<Checkbox checked={termsCheckbox} onChange={toggleCheckbox}/>}
- />
+ <FormControlLabel label={<span className="label">Li e concordo com os termos de uso e de propriedade intelectual.</span>} control={props.contrast === "" ? <BlueCheckBox checked={termsCheckbox} onChange={toggleCheckbox} /> : <ContrastCheckBox checked={termsCheckbox} onChange={toggleCheckbox} />}
+ />
</StyledFormControl>
</Grid>
<Grid item xs={12}>
- <ButtonsDiv draftID={props.draftID} stepperControl={props.stepperControl} onPartTwo={true}/>
+ <ButtonsDiv contrast={props.contrast} draftID={props.draftID} stepperControl={props.stepperControl} onPartTwo={true} />
</Grid>
- <Grid item xs={12} style={{marginTop : "20px"}}>
- <span style={{marginTop : "20px", fontWeight : "200", color : "#a5a5a5", paddingLeft : "10px"}}>
+ <Grid item xs={12} style={{ marginTop: "20px" }}>
+ <span style={props.contrast === "" ? { marginTop: "20px", fontWeight: "200", color: "#a5a5a5", paddingLeft: "10px" } : { marginTop: "20px", fontWeight: "200", color: "white", paddingLeft: "10px" }}>
* Campos obrigatórios
</span>
</Grid>
</form>
)
- :
- (
- <LoadingSpinner text={"CARREGANDO"}/>
- )
+ :
+ (
+ <LoadingSpinner contrast={props.contrast} text={"CARREGANDO"} />
+ )
}
</React.Fragment>
)
@@ -261,7 +288,8 @@ const StyledFormControl = styled(FormControl)`
.label {
font-size : 14px !important;
- color : #666 !important;
+ color: ${props => props.contrast === "" ? "#666" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
font-weight : 200 !important;
}
`
diff --git a/src/Components/UploadPageComponents/PartTwoComponents/CustomCircularProgress.js b/src/Components/UploadPageComponents/PartTwoComponents/CustomCircularProgress.js
index 21640918..9de5008e 100644
--- a/src/Components/UploadPageComponents/PartTwoComponents/CustomCircularProgress.js
+++ b/src/Components/UploadPageComponents/PartTwoComponents/CustomCircularProgress.js
@@ -22,14 +22,17 @@ import CircularProgress from '@material-ui/core/CircularProgress';
const useStyles = makeStyles((theme) => ({
root: {
- color : "#666",
+ color: "#666",
},
+ contrastRoot: {
+ color: "white",
+ }
}));
-export default function CustomCircularProgress () {
+export default function CustomCircularProgress(props) {
const classes = useStyles();
return (
- <CircularProgress className={classes.root}/>
+ <CircularProgress className={props.contrast === "" ? classes.root : classes.contrastRoot} />
);
}
diff --git a/src/Components/UploadPageComponents/PartTwoComponents/DisplayThumbnail.js b/src/Components/UploadPageComponents/PartTwoComponents/DisplayThumbnail.js
index 0c07e151..3cd8465d 100644
--- a/src/Components/UploadPageComponents/PartTwoComponents/DisplayThumbnail.js
+++ b/src/Components/UploadPageComponents/PartTwoComponents/DisplayThumbnail.js
@@ -17,12 +17,12 @@ 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 {StyledFormLabel} from '../StyledComponents.js'
+import { StyledFormLabel } from '../StyledComponents.js'
import AddAPhotoIcon from '@material-ui/icons/AddAPhoto';
import Grid from '@material-ui/core/Grid';
import styled from 'styled-components'
-export default function DisplayThumbnail (props) {
+export default function DisplayThumbnail(props) {
let windowWidth = window.innerWidth
const handleUpload = (e, selectorFiles) => {
@@ -32,42 +32,42 @@ export default function DisplayThumbnail (props) {
return (
<React.Fragment>
- <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
+ <StyledFormLabel contrast={props.contrast} component="legend" style={{ fontSize: "14px", marginBottom: "10px" }}>
{
props.onEditPage ?
- (
- <b style={{fontWeight : "ligther"}}>Imagem ilustrativa do recurso</b>
- )
- :
- (
- <>
- <b>Editando Imagem</b>
- <span style={{color : "#a5a5a5"}}>(Deixe seu recurso completo, para que todos o entendam melhor.)</span>
- </>
- )
+ (
+ <b style={{ fontWeight: "ligther" }}>Imagem ilustrativa do recurso</b>
+ )
+ :
+ (
+ <>
+ <b>Editando Imagem</b>
+ <span style={props.contrast === "" ? { color: "#a5a5a5" } : { color: "white" }}>(Deixe seu recurso completo, para que todos o entendam melhor.)</span>
+ </>
+ )
}
</StyledFormLabel>
- <ImagemCarregada container>
+ <ImagemCarregada container contrast={props.contrast}>
<Grid item xs={windowWidth > 990 ? 6 : 12}>
<div className="img-preview">
- <img alt="" src={props.thumbnail}/>
+ <img alt="" src={props.thumbnail} />
<div className="alterar-imagem">
- <input type="file" onChange = {(e) => handleUpload(e, e.target.files)} id="upload-file-thumbnail" style={{display : "none"}}
+ <input type="file" onChange={(e) => handleUpload(e, e.target.files)} id="upload-file-thumbnail" style={{ display: "none" }}
/>
- <label htmlFor="upload-file-thumbnail" style={{height : "100%", width : "inherit", cursor : "pointer"}}>
+ <label htmlFor="upload-file-thumbnail" style={{ height: "100%", width: "inherit", cursor: "pointer" }}>
<div className="interacoes">
- SUBSTITUIR <AddAPhotoIcon/>
+ SUBSTITUIR <AddAPhotoIcon />
</div>
</label>
- <div className="interacoes" onClick={() => {props.handleDelete()}}>
- DELETAR <AddAPhotoIcon/>
+ <div className="interacoes" onClick={() => { props.handleDelete() }}>
+ DELETAR <AddAPhotoIcon />
</div>
</div>
</div>
</Grid>
<Grid item xs={windowWidth > 990 ? 6 : 12}>
<div className="aviso-imagem-carregada">
- Sua imagem foi enviada, porém pode ser que demore alguns minutos até nosso servidor atualiza-la na página do recurso.
+ Sua imagem foi enviada, porém pode ser que demore alguns minutos até nosso servidor atualiza-la na página do recurso.
</div>
</Grid>
</ImagemCarregada>
@@ -77,7 +77,7 @@ export default function DisplayThumbnail (props) {
const ImagemCarregada = styled(Grid)`
.aviso-imagem-carregada {
- color :#a5a5a5;
+ color: ${props => props.contrast === "" ? "#a5a5a5" : "white"};
font-size : 12px;
font-weight : 500;
text-align : justify;
@@ -113,10 +113,12 @@ const ImagemCarregada = styled(Grid)`
align-items : flex-end;
height : 100%;
padding : 10px;
- color : #fff;
+ color: ${props => props.contrast === "" ? "#fff" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
font-size : 14px;
.MuiSvgIcon-root {
vertical-align : middle !important;
+ color: #fff;
}
}
}
diff --git a/src/Components/UploadPageComponents/PartTwoComponents/DragAndDropThumbnail.js b/src/Components/UploadPageComponents/PartTwoComponents/DragAndDropThumbnail.js
index 59423e60..56d532f8 100644
--- a/src/Components/UploadPageComponents/PartTwoComponents/DragAndDropThumbnail.js
+++ b/src/Components/UploadPageComponents/PartTwoComponents/DragAndDropThumbnail.js
@@ -16,13 +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} from 'react'
-import {DottedBox, BlueButton} from '../StyledComponents.js';
+import React, { useState } from 'react'
+import { DottedBox, BlueButton } from '../StyledComponents.js';
import AddAPhotoIcon from '@material-ui/icons/AddAPhoto';
import FormControl from '@material-ui/core/FormControl';
-import {StyledFormLabel} from '../StyledComponents.js'
+import { StyledFormLabel } from '../StyledComponents.js'
-export default function DragAndDropThumbnail (props) {
+export default function DragAndDropThumbnail(props) {
const [dropDepth, setDropDepth] = useState(0)
// eslint-disable-next-line
const [inDropZone, toggleInDropZone] = useState(false)
@@ -64,41 +64,42 @@ export default function DragAndDropThumbnail (props) {
props.acceptFile(selectorFiles[0])
}
return (
- <FormControl style={{width : "100%"}}>
- <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
+ <FormControl style={{ width: "100%" }}>
+ <StyledFormLabel contrast={props.contrast} component="legend" style={{ fontSize: "14px", marginBottom: "10px" }}>
{
props.onEditPage ?
- (
- <b style={{textAlign : "center", fontSize : "26px", fontWeight : "ligther"}}>Inserir Imagem Ilustrativa</b>
- )
- :
- (
- <>
- <b>Imagem Ilustrativa do Recurso</b> <span style={{color : "#a5a5a5"}}>(Deixe seu recurso completo, para que todos o entendam melhor.)</span>
- </>
- )
+ (
+ <b style={props.contrast === "" ? { textAlign: "center", fontSize: "26px", fontWeight: "ligther" } : { textAlign: "center", fontSize: "26px", fontWeight: "ligther", color: "white" }}>Inserir Imagem Ilustrativa</b>
+ )
+ :
+ (
+ <>
+ <b>Imagem Ilustrativa do Recurso</b> <span style={props.contrast === "" ? { color: "#a5a5a5" } : { color: "white" }}>(Deixe seu recurso completo, para que todos o entendam melhor.)</span>
+ </>
+ )
}
</StyledFormLabel>
<DottedBox
+ contrast={props.contrast}
onDrop={e => handleDrop(e)}
onDragOver={e => handleDragOver(e)}
onDragEnter={e => handleDragEnter(e)}
onDragLeave={e => handleDragLeave(e)}
thumbnail
- >
- <AddAPhotoIcon className="icon"/>
+ >
+ <AddAPhotoIcon className="icon" />
<input
type="file"
- onChange = {(e) => handleUpload(e, e.target.files)}
+ onChange={(e) => handleUpload(e, e.target.files)}
id="upload-file-thumbnail"
- style={{display : "none"}}
- />
- <BlueButton>
- <label htmlFor="upload-file-thumbnail" style={{width : "inherit", cursor : "pointer"}}>
+ style={{ display: "none" }}
+ />
+ <BlueButton contrast={props.contrast}>
+ <label htmlFor="upload-file-thumbnail" style={{ width: "inherit", cursor: "pointer" }}>
ESCOLHER IMAGEM
</label>
</BlueButton>
- <span style={{marginTop : "6px"}}>Ou arrastar e soltar o arquivo aqui</span>
+ <span style={props.contrast === "" ? { marginTop: "6px" } : { color: "white" }}>Ou arrastar e soltar o arquivo aqui</span>
</DottedBox>
</FormControl>
)
diff --git a/src/Components/UploadPageComponents/PartTwoComponents/EditThumbnail.js b/src/Components/UploadPageComponents/PartTwoComponents/EditThumbnail.js
index 7cce6bf2..2ef43db3 100644
--- a/src/Components/UploadPageComponents/PartTwoComponents/EditThumbnail.js
+++ b/src/Components/UploadPageComponents/PartTwoComponents/EditThumbnail.js
@@ -16,28 +16,28 @@ 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 {StyledFormLabel} from '../StyledComponents.js'
+import React, { useState } from 'react'
+import { StyledFormLabel } from '../StyledComponents.js'
import Cropper from '../../Cropper'
import { Button } from '@material-ui/core';
import styled from 'styled-components'
-export default function EditThumbnail (props) {
+export default function EditThumbnail(props) {
const [crop] = useState({
unit: "%" ,
- width : 100,
- aspect: 9/3
+ width : 200,
+ aspect: 9/6
});
return (
<>
- <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
- <b>Editando Imagem</b> <span style={{color : "#a5a5a5"}}>(Deixe seu recurso completo, para que todos o entendam melhor.)</span>
+ <StyledFormLabel contrast={props.contrast} component="legend" style={{ fontSize: "14px", marginBottom: "10px" }}>
+ <b>Editando Imagem</b> <span style={props.contrast === "" ? { color: "#a5a5a5" } : { color: "white" }}>(Deixe seu recurso completo, para que todos o entendam melhor.)</span>
</StyledFormLabel>
- <div style={{display : "flex", alignItems : "center", flexDirection : "column"}}>
- <div style={{maxWidth : "500px", maxHeight : "300px", padding : "20px"}}>
- <Cropper src={props.tempImgURL} crop={crop} circularCrop={false} update={props.updateThumb}/>
+ <div style={{ display: "flex", alignItems: "center", flexDirection: "column" }}>
+ <div style={{ maxWidth: "500px", maxHeight: "300px", padding: "20px" }}>
+ <Cropper src={props.tempImgURL} crop={crop} circularCrop={false} update={props.updateThumb} />
</div>
- <StyledButton onClick={() => {props.finalizeThumb()}}>SELECIONAR IMAGEM</StyledButton>
+ <StyledButton contrast={props.contrast} onClick={() => { props.finalizeThumb() }}>SELECIONAR IMAGEM</StyledButton>
</div>
</>
@@ -46,10 +46,11 @@ export default function EditThumbnail (props) {
const StyledButton = styled(Button)`
&:hover {
- background-color : rgba(158,158,158,0.2) !important;
+ background: ${props => props.contrast === "" ? "rgba(158,158,158,0.2) !important" : "rgba(255,255,0,0.24) !important"};
}
- background-color : #fff !important;
- border : solid 1px #00bcd4 !important;
+ background: ${props => props.contrast === "" ? "#fff !important" : "black !important"};
+ border: ${props => props.contrast === "" ? "solid 1px #00bcd4 !important" : "solid 1px white !important"};
+ color: ${props => props.contrast === "" ? "#00bcd4 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
font-weight : 600 !important;
- color : #00bcd4 !important;
`
diff --git a/src/Components/UploadPageComponents/PartTwoComponents/EducationalStage.js b/src/Components/UploadPageComponents/PartTwoComponents/EducationalStage.js
index 96da308a..f028b62b 100644
--- a/src/Components/UploadPageComponents/PartTwoComponents/EducationalStage.js
+++ b/src/Components/UploadPageComponents/PartTwoComponents/EducationalStage.js
@@ -16,21 +16,43 @@ 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 } from 'react'
import FormControl from '@material-ui/core/FormControl';
-import {StyledFormLabel} from '../StyledComponents.js'
+import { StyledFormLabel } from '../StyledComponents.js'
import Checkbox from '@material-ui/core/Checkbox';
import FormGroup from '@material-ui/core/FormGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import styled from 'styled-components'
+import { yellow, blue } from "@material-ui/core/colors";
+import { withStyles } from '@material-ui/core/styles';
-export default function EducationalStage (props) {
+const BlueCheckBox = withStyles({
+ root: {
+ color: blue[400],
+ '&$checked': {
+ color: blue[600],
+ },
+ },
+ checked: {},
+})((props) => <Checkbox color="default" {...props} />);
+
+const ContrastCheckBox = withStyles({
+ root: {
+ color: yellow[400],
+ '&$checked': {
+ color: yellow[600],
+ },
+ },
+ checked: {},
+})((props) => <Checkbox color="default" {...props} />);
+
+export default function EducationalStage(props) {
const [selected, setSelect] = useState(props.initialValue ? props.initialValue : [])
const handleSet = (event) => {
let newValue = event.target.value
- if(selected.indexOf(newValue) > - 1) {
+ if (selected.indexOf(newValue) > - 1) {
setSelect(selected.filter(item => item !== newValue))
}
else {
@@ -39,15 +61,15 @@ export default function EducationalStage (props) {
}
return (
- <FormControl required style={{minWidth : "30%"}}>
- <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
- <b>NÃvel de ensino</b> <span style={{color : "#a5a5a5"}}>(Selecione uma ou mais opções)</span>
+ <FormControl required style={{ minWidth: "30%" }}>
+ <StyledFormLabel contrast={props.contrast} component="legend" style={{ fontSize: "14px", marginBottom: "10px" }}>
+ <b>NÃvel de ensino</b> <span style={props.contrast === "" ? { color: "#a5a5a5" } : { color: "white" }}>(Selecione uma ou mais opções)</span>
</StyledFormLabel>
- <StyledFormGroup onBlur={() => {props.onBlurCallback("educational_stages", selected, props.draftID)}}>
+ <StyledFormGroup onBlur={() => { props.onBlurCallback("educational_stages", selected, props.draftID) }}>
{
props.eduStages.map(stage =>
<FormControlLabel key={stage.id} label={stage.name}
- control={<Checkbox checked={selected.indexOf(String(stage.id)) > - 1} value={stage.id} onChange={handleSet}/>}/>
+ control={props.contrast === "" ? <BlueCheckBox checked={selected.indexOf(String(stage.id)) > - 1} value={stage.id} onChange={handleSet} /> : <ContrastCheckBox checked={selected.indexOf(String(stage.id)) > - 1} value={stage.id} onChange={handleSet} />} />
)
}
</StyledFormGroup>
diff --git a/src/Components/UploadPageComponents/PartTwoComponents/Licenca.js b/src/Components/UploadPageComponents/PartTwoComponents/Licenca.js
index 9e8e059a..30c2d581 100644
--- a/src/Components/UploadPageComponents/PartTwoComponents/Licenca.js
+++ b/src/Components/UploadPageComponents/PartTwoComponents/Licenca.js
@@ -16,45 +16,67 @@ 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, memo} from 'react'
+import React, { useState, memo } from 'react'
import styled from 'styled-components'
import FormControl from '@material-ui/core/FormControl';
-import {StyledFormLabel} from '../StyledComponents.js'
+import { StyledFormLabel } from '../StyledComponents.js'
import RadioGroup from '@material-ui/core/RadioGroup';
import Radio from '@material-ui/core/Radio';
import FormControlLabel from '@material-ui/core/FormControlLabel';
-
-function Licenca (props) {
+import { yellow, blue } from "@material-ui/core/colors";
+import { withStyles } from '@material-ui/core/styles';
+
+const BlueRadio = withStyles({
+ root: {
+ color: blue[400],
+ '&$checked': {
+ color: blue[600],
+ },
+ },
+ checked: {},
+})((props) => <Radio color="default" {...props} />);
+
+const ContrastRadio = withStyles({
+ root: {
+ color: yellow[400],
+ '&$checked': {
+ color: yellow[600],
+ },
+ },
+ checked: {},
+})((props) => <Radio color="default" {...props} />);
+
+function Licenca(props) {
const options = [
- {name : "CC BY", description : "(Esta licença permite que outros distribuam, remixem, adaptem e criem a partir do seu trabalho, mesmo para fins comerciais, desde que lhe atribuam o devido crédito pela criação original)", id : 1},
+ { name: "CC BY", description: "(Esta licença permite que outros distribuam, remixem, adaptem e criem a partir do seu trabalho, mesmo para fins comerciais, desde que lhe atribuam o devido crédito pela criação original)", id: 1 },
- {name : "CC BY-SA", description : "(Esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho, mesmo para fins comerciais, desde que lhe atribuam o devido crédito e que licenciem as novas criações sob termos idênticos)", id : 2},
+ { name: "CC BY-SA", description: "(Esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho, mesmo para fins comerciais, desde que lhe atribuam o devido crédito e que licenciem as novas criações sob termos idênticos)", id: 2 },
- {name : "CC BY-NC", description : "(Esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho para fins não comerciais e, embora os novos trabalhos tenham de lhe atribuir o devido crédito e não possam ser usados para fins comerciais, os usuários não têm de licenciar esses trabalhos derivados sob os mesmos termos)", id : 4},
+ { name: "CC BY-NC", description: "(Esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho para fins não comerciais e, embora os novos trabalhos tenham de lhe atribuir o devido crédito e não possam ser usados para fins comerciais, os usuários não têm de licenciar esses trabalhos derivados sob os mesmos termos)", id: 4 },
- {name : "CC BY-NC SA", description : "(Esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho para fins não comerciais, desde que atribuam o devido crédito e que licenciem as novas criações sob termos idênticos)", id : 5},
+ { name: "CC BY-NC SA", description: "(Esta licença permite que outros remixem, adaptem e criem a partir do seu trabalho para fins não comerciais, desde que atribuam o devido crédito e que licenciem as novas criações sob termos idênticos)", id: 5 },
- {name : "CC BY-NC-ND 3.0 BR", description : "(Atribuição-NãoComercial-SemDerivações 3.0 Brasil. Esta licença permite compartilhar, copiar e redistribuir o material em qualquer suporte ou formato)", id : 12}
+ { name: "CC BY-NC-ND 3.0 BR", description: "(Atribuição-NãoComercial-SemDerivações 3.0 Brasil. Esta licença permite compartilhar, copiar e redistribuir o material em qualquer suporte ou formato)", id: 12 }
]
const [value, setValue] = useState(props.initialValue ? props.initialValue : -1)
- const handleChange = (event) => {setValue(Number(event.target.value))}
+ const handleChange = (event) => { setValue(Number(event.target.value)) }
return (
- <FormControl required="true" style={{width : "100%"}}>
- <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
- <b>Licença do Uso do Conteúdo</b> <a href="https://br.creativecommons.org/licencas/" style={{color : "#ff7f00", textDecoration : "underline"}}>Saiba mais</a>
+ <FormControl required="true" style={{ width: "100%" }}>
+ <StyledFormLabel contrast={props.contrast} component="legend" style={{ fontSize: "14px", marginBottom: "10px" }}>
+ <b>Licença do Uso do Conteúdo</b> <a href="https://br.creativecommons.org/licencas/" style={props.contrast === "" ? { color: "#ff7f00", textDecoration: "underline" } : { color: "yellow", textDecoration: "underline" }}>Saiba mais</a>
</StyledFormLabel>
- <StyledRadioGroup aria-label="Tipo de Recurso" name="Tipo de Recurso" row value={value} onChange={handleChange} style={{justifyContent : "center"}} onBlur={() => {props.onBlurCallback("license_id", value, props.draftID)}}>
+ <StyledRadioGroup contrast={props.contrast} aria-label="Tipo de Recurso" name="Tipo de Recurso" row value={value} onChange={handleChange} style={{ justifyContent: "center" }} onBlur={() => { props.onBlurCallback("license_id", value, props.draftID) }}>
{
- options.map( (option) =>
- <FormControlLabel key={option.id} value={option.id}
- control={<Radio />}
- label={
- <span className="title">{option.name}
- <span className="parentese"> {option.description}</span>
- </span>
+ options.map((option) =>
+ <FormControlLabel key={option.id} value={option.id}
+ control={props.contrast === "" ? <BlueRadio /> : <ContrastRadio />}
+ label={
+ <span className="title">{option.name}
+ <span className="parentese"> {option.description}</span>
+ </span>
}
/>
)
@@ -76,12 +98,12 @@ const StyledRadioGroup = styled(RadioGroup)`
.title {
font-size: 14px;
font-weight: 600;
- color:#666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
padding-left: 2px;
}
.parentese {
+ color: ${props => props.contrast === "" ? "#a5a5a5" : "white"};
font-weight: 200;
- color:#a5a5a5;
padding-left: 10px;
}
`
diff --git a/src/Components/UploadPageComponents/PartTwoComponents/SubjectsAndThemes.js b/src/Components/UploadPageComponents/PartTwoComponents/SubjectsAndThemes.js
index 326dec23..986081d8 100644
--- a/src/Components/UploadPageComponents/PartTwoComponents/SubjectsAndThemes.js
+++ b/src/Components/UploadPageComponents/PartTwoComponents/SubjectsAndThemes.js
@@ -16,39 +16,40 @@ 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, memo} from 'react'
+import React, { useState, memo } from 'react'
import { makeStyles } from '@material-ui/core/styles';
import FormControl from '@material-ui/core/FormControl';
-import {ObjTypeBox, StyledFormLabel} from '../StyledComponents.js'
+import { ObjTypeBox, StyledFormLabel } from '../StyledComponents.js'
import FormGroup from '@material-ui/core/FormGroup';
-import {GetSubjectIconByName} from '../GetIconByName.js'
+import { GetSubjectIconByName } from '../GetIconByName.js'
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import Grid from '@material-ui/core/Grid';
const useStyles = makeStyles({
- root: {
- '&:hover': {
- backgroundColor: 'transparent',
- },
-}})
-
-function StyledCheckbox (props) {
+ root: {
+ '&:hover': {
+ backgroundColor: 'transparent',
+ },
+ }
+})
+
+function StyledCheckbox(props) {
const classes = useStyles();
return (
<Checkbox
className={classes.root}
disableRipple
- checkedIcon = {
- <ObjTypeBox checked>
+ checkedIcon={
+ <ObjTypeBox checked contrast={props.contrast}>
<span>
{GetSubjectIconByName(props.label)}
<p>{props.label}</p>
</span>
</ObjTypeBox>
}
- icon = {
- <ObjTypeBox>
+ icon={
+ <ObjTypeBox contrast={props.contrast}>
<span>
{GetSubjectIconByName(props.label)}
<p>{props.label}</p>
@@ -61,75 +62,77 @@ function StyledCheckbox (props) {
}
-function SubjectsAndThemes (props) {
+function SubjectsAndThemes(props) {
const [value, setValue] = useState(props.initialValue ? props.initialValue : [])
const handleChange = (event) => {
const newValue = event.target.value
- if((value.indexOf(newValue) > -1)) {
+ if ((value.indexOf(newValue) > -1)) {
setValue(value.filter(item => item !== newValue))
}
else {
setValue(value => [...value, newValue])
}
- }
+ }
return (
<React.Fragment>
- <Grid item xs={12} style={{paddingBottom : "40px"}}>
- <FormControl required style={{width : "100%"}}>
- <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
- <b>Componente curricular</b> <span>(Selecione uma ou mais opções)</span>
- </StyledFormLabel>
- <FormGroup row style={{justifyContent : "center"}} onBlur={() => {props.onBlurCallback("subjects", value, props.draftID)}}>
- {
- props.subjects.map( (subject) =>
- <>
- <FormControlLabel key={subject.id} value={subject.id}
- control={
- <StyledCheckbox
- label={subject.name}
- checked={value.indexOf(String(subject.id)) > -1}
- onChange={handleChange}
- />}
- />
- </>
- )
-
- }
- </FormGroup>
- </FormControl>
- </Grid>
-
- {
-
- props.onUploadPage &&
- <Grid item xs={12} style={{paddingBottom : "40px"}}>
- <FormControl style={{width : "100%"}}>
- <StyledFormLabel component="legend" style={{fontSize : "14px", marginBottom : "10px"}}>
- <b>Outras Temáticas</b>
- </StyledFormLabel>
- <FormGroup aria-label="Tipo de Recurso" name="Tipo de Recurso" row style={{justifyContent : "center"}} onBlur={() => {props.onBlurCallback("subjects", value, props.draftID)}}>
- {
- props.themes.map( (theme) =>
- <FormControlLabel key={theme.id} value={theme.id}
- control={
- <StyledCheckbox
- label={theme.name}
- checked={value.indexOf(String(theme.id)) > -1}
- onChange={handleChange}
-
+ <Grid item xs={12} style={{ paddingBottom: "40px" }}>
+ <FormControl required style={{ width: "100%" }}>
+ <StyledFormLabel contrast={props.contrast} component="legend" style={{ fontSize: "14px", marginBottom: "10px" }}>
+ <b>Componente curricular</b> <span>(Selecione uma ou mais opções)</span>
+ </StyledFormLabel>
+ <FormGroup row style={{ justifyContent: "center" }} onBlur={() => { props.onBlurCallback("subjects", value, props.draftID) }}>
+ {
+ props.subjects.map((subject) =>
+ <>
+ <FormControlLabel key={subject.id} value={subject.id}
+ control={
+ <StyledCheckbox
+ contrast={props.contrast}
+ label={subject.name}
+ checked={value.indexOf(String(subject.id)) > -1}
+ onChange={handleChange}
+ />}
/>
- }
- />
- )
+ </>
+ )
+
+ }
+ </FormGroup>
+ </FormControl>
+ </Grid>
+
+ {
+
+ props.onUploadPage &&
+ <Grid item xs={12} style={{ paddingBottom: "40px" }}>
+ <FormControl style={{ width: "100%" }}>
+ <StyledFormLabel contrast={props.contrast} component="legend" style={{ fontSize: "14px", marginBottom: "10px" }}>
+ <b>Outras Temáticas</b>
+ </StyledFormLabel>
+ <FormGroup aria-label="Tipo de Recurso" name="Tipo de Recurso" row style={{ justifyContent: "center" }} onBlur={() => { props.onBlurCallback("subjects", value, props.draftID) }}>
+ {
+ props.themes.map((theme) =>
+ <FormControlLabel key={theme.id} value={theme.id}
+ control={
+ <StyledCheckbox
+ contrast={props.contrast}
+ label={theme.name}
+ checked={value.indexOf(String(theme.id)) > -1}
+ onChange={handleChange}
+
+ />
+ }
+ />
+ )
- }
- </FormGroup>
- </FormControl>
- </Grid>
- }
+ }
+ </FormGroup>
+ </FormControl>
+ </Grid>
+ }
</React.Fragment>
)
}
diff --git a/src/Components/UploadPageComponents/Stepper.js b/src/Components/UploadPageComponents/Stepper.js
index efa439df..a788b1bb 100644
--- a/src/Components/UploadPageComponents/Stepper.js
+++ b/src/Components/UploadPageComponents/Stepper.js
@@ -18,45 +18,14 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React from 'react';
import styled from 'styled-components'
-import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/core/styles';
-import clsx from 'clsx';
-import Stepper from '@material-ui/core/Stepper';
-import Step from '@material-ui/core/Step';
-import StepLabel from '@material-ui/core/StepLabel';
import Check from '@material-ui/icons/Check';
+import Grid from '@material-ui/core/Grid';
-const useColorlibStepIconStyles = makeStyles({
- root: {
- backgroundColor: '#fff',
- color: '#00bcd4',
- width: 36,
- height: 36,
- display: 'flex',
- border : 'solid 3px #00bcd4',
- borderRadius: '50%',
- justifyContent: 'center',
- alignItems: 'center',
- },
- active: {
- backgroundColor : '#00bcd4',
- color : '#fff',
- },
- completed: {
- backgroundColor : '#00bcd4',
- color : '#fff',
- },
-});
-
-function ColorlibStepIcon(props) {
- const classes = useColorlibStepIconStyles();
- const { active, completed } = props;
+export default function CustomizedSteppers(props) {
- const icons = {
- 1: '1',
- 2: '2',
- 3: '3',
- };
+ function isInFinalSTep(step) {
+ return step === 2;
+ }
return (
<MainGrid contrast={props.contrast} container direction='row' justify='space-between' alignItems='center'>
@@ -96,108 +65,43 @@ function ColorlibStepIcon(props) {
);
}
-ColorlibStepIcon.propTypes = {
- /**
- * Whether this step is active.
- */
- active: PropTypes.bool,
- /**
- * Mark the step as completed. Is passed to child components.
- */
- completed: PropTypes.bool,
- /**
- * The label displayed in the step icon.
- */
- icon: PropTypes.node,
-};
-
-// const useStyles = makeStyles((theme) => ({
-// root: {
-// width: '100%',
-// },
-// button: {
-// marginRight: theme.spacing(1),
-// },
-// instructions: {
-// marginTop: theme.spacing(1),
-// marginBottom: theme.spacing(1),
-// },
-// }));
-
-function getSteps() {
- return ['Select campaign settings', 'Create an ad group', 'Create an ad'];
-}
-
-// function getStepContent(step) {
-// switch (step) {
-// case 0:
-// return 'Select campaign settings...';
-// case 1:
-// return 'What is an ad group anyways?';
-// case 2:
-// return 'This is the bit I really care about!';
-// default:
-// return 'Unknown step';
-// }
-// }
-
-export default function CustomizedSteppers(props) {
- // const classes = useStyles();
- const steps = getSteps();
-
-// {/* const handleNext = () => {
-// setActiveStep((prevActiveStep) => prevActiveStep + 1);
-// };
-
-// const handleBack = () => {
-// setActiveStep((prevActiveStep) => prevActiveStep - 1);
-// };
-
-// const handleReset = () => {
-// setActiveStep(0);
-// };*/}
-
- return (
-
- <>
- <StyledStepper style={{backgroundColor : "#e5e5e5", borderRadius : "50px", justifyContent : "space-between"}} activeStep={props.activeStep} connector={<></>}>
- {steps.map((label) => (
- <Step key={label}>
- <StepLabel StepIconComponent={ColorlibStepIcon}/>
- </Step>
- ))}
- </StyledStepper>
- {/*<div>
- {activeStep === steps.length ? (
- <div>
- <Button onClick={handleReset} className={classes.button}>
- Reset
- </Button>
- </div>
- ) : (
- <div>
- <Typography className={classes.instructions}>{getStepContent(activeStep)}</Typography>
- <div>
- <Button disabled={activeStep === 0} onClick={handleBack} className={classes.button}>
- Back
- </Button>
- <Button
- variant="contained"
- color="primary"
- onClick={handleNext}
- className={classes.button}
- >
- {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
- </Button>
- </div>
- </div>
- )}
- </div>*/}
- </>
- );
-}
-
-const StyledStepper = styled(Stepper)`
- padding : 7px !important;
-
+const MainGrid = styled(Grid)`
+ padding: 1em;
+ border-radius: 50px;
+ width: 90%;
+ margin: 0 auto;
+ border: ${props => props.contrast === "" ? "2px solid #d4d4d4" : "2px solid white"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+
+ .currStep{
+ height: 30px;
+ width: 30px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: 2px solid rgba(255, 255, 255, 0.6);
+ border-radius: 50%;
+ }
+
+ .step{
+ height: 30px;
+ width: 30px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: ${props => props.contrast === "" ? "2px solid #00bcd4" : "2px solid white"};
+ border-radius: 50%;
+ }
+
+ .finalStep{
+ height: 30px;
+ width: 30px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: 2px solid white;
+ border-radius: 50%;
+ color: white;
+ }
`
+
diff --git a/src/Components/UploadPageComponents/StyledComponents.js b/src/Components/UploadPageComponents/StyledComponents.js
index 632e61cb..e7bc2521 100644
--- a/src/Components/UploadPageComponents/StyledComponents.js
+++ b/src/Components/UploadPageComponents/StyledComponents.js
@@ -35,18 +35,18 @@ export const StyledFormHelperText = styled(FormHelperText)`
export const DottedBox = styled.div`
align-self : center;
/* width : ${props => props.thumbnail ? "100%" : "320px"}; */
- background-color : ${props => props.thumbnail ? "transparent" : "#f4f4f4"};
- border : ${props => props.thumbnail ? "2px dashed #a5a5a5" : "2px dashed #00bcd4"};
+ background-color : ${props => props.contrast === "" ? props.thumbnail ? "transparent" : "#f4f4f4" : "black"};
+ border : ${props => props.contrast === "" ? props.thumbnail ? "2px dashed #a5a5a5" : "2px dashed #00bcd4" : "2px dashed white"};
align-items : center;
border-radius : 10px;
display : flex;
flex-direction : column;
padding : 20px 0;
- color : ${props => props.thumbnail ? "#a5a5a5" : "$666"};
+ color : ${props => props.contrast === "" ? props.thumbnail ? "#a5a5a5" : "$666" : "white"};
.icon {
font-size : 40px !important;
- color : #00bcd4 !important;
+ color : ${props => props.contrast === "" ? "#00bcd4 !important" : "white !important"};
margin-bottom : 10px !important;
vertical-align : middle !important;
font-weight : normal !important;
@@ -64,32 +64,30 @@ export const DottedBox = styled.div`
export const BlueButton = styled(Button)`
&:hover {
- background-color : #00acc1 !important;
+ background-color: ${props => props.contrast === "" ? "#00acc1 !important" : "rgba(255,255,0,0.24) !important"};
}
- color : #fff !important;
- background-color : #00bcd4 !important;
- height : 36px !important;
+ color : ${props => props.contrast === "" ? "#fff !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
+ background-color : ${props => props.contrast === "" ? "#00bcd4 !important" : "black !important"};
+ border : ${props => props.contrast === "" ? "none !important" : "1px solid white !important"};
box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
font-weight : 600 !important;
- min-width : 88px !important;
- align-self : center !important;
- padding : 16px !important;
`
export const GrayButton = styled(Button)`
&:hover {
- background-color : rgba(158,158,158,0.2) !important;
+ background-color: ${props => props.contrast === "" ? "rgba(158,158,158,0.2) !important" : "rgba(255,255,0,0.24) !important"};
}
- height : 36px !important;
+ color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline" } !important;
+
+ background-color : ${props => props.contrast === "" ? "transparent !important" : "black !important"};
+ border : ${props => props.contrast === "" ? "none !important" : "1px solid white !important"};
font-weight : 600 !important;
- color : #666 !important;
- background-color: transparent;
- min-width : 88px !important;
- height : 36px !important;
- margin-left : 8px !important;
- margin-right : 8px !important;
+
.icon {
vertical-align : middle !important;
+ color : ${props => props.contrast === "" ? "#666 !important" : "white !important"};
font-weight : normal !important;
font-style : normal !important;
font-size : 24px !important;
@@ -116,6 +114,9 @@ export const GrayButton = styled(Button)`
font-style : inherit;
font-variant : inherit;
}
+
+ margin-left : 8px !important;
+ margin-right : 8px !important;
`
export const WrapperBox = styled.div`
@@ -124,12 +125,14 @@ export const WrapperBox = styled.div`
display : block;
border-radius : 3px;
box-shadow : 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
- background-color : #fff;
font-size : 14px;
+ background: ${props => props.contrast === "" ? " #fff" : "black"};
+ border: ${props => props.contrast === "" ? " " : "1px solid white"};
.inner {
display : block;
padding : 20px;
+ background: ${props => props.contrast === "" ? " #fff" : "black"};
}
.upload-title {
@@ -137,6 +140,7 @@ export const WrapperBox = styled.div`
font-size : 26px;
margin-bottom : 10px;
font-weight : lighter;
+ color: ${props => props.contrast === "" ? "" : "white"};
}
.flex-column {
@@ -150,6 +154,7 @@ export const WrapperBox = styled.div`
p {
margin : 0 0 10px;
+ color: ${props => props.contrast === "" ? "" : "white"};
}
.buttons-div {
@@ -182,7 +187,7 @@ export const WrapperBox = styled.div`
overflow : hidden;
text-align : center;
font-size : 14px;
- color : #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
padding : 0 5px;
}
}
@@ -231,7 +236,7 @@ export const WrapperBox = styled.div`
.file-status {
.icon-margin {
- color : #00bcd4;
+ color: ${props => props.contrast === "" ? "#00bcd4" : "white"};
margin-right : 5px;
}
.MuiLinearProgress-root {
@@ -251,17 +256,20 @@ export const WrapperBox = styled.div`
margin-top: 40px;
border-top: solid 1px #f4f4f4;
text-align: center;
+ color: ${props => props.contrast === "" ? "" : "white"};
span {
font-size : 16px;
font-weight : lighter;
+ color: ${props => props.contrast === "" ? "" : "white"};
}
}
}
`
export const InfoBox = styled.div`
- background-color : #fff;
+ background: ${props => props.contrast === "" ? " #fff" : "black"};
+ border: ${props => props.contrast === "" ? " " : "1px solid white"};
padding : 30px;
box-shadow : 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
margin-bottom : 30px;
@@ -294,8 +302,13 @@ export const ObjTypeBox = styled.div`
height : 100px;
width : 100px;
border-radius : 10px;
- background-color : ${props => props.checked ? "#00bcd4" : "#f4f4f4"};
- color : ${props => props.checked ? "#fff" : "#00bcd4"};
+ background-color : ${props => props.contrast === "" ? "#f4f4f4" : "black"};
+ border : ${props => props.contrast === "Contrast" ? props.checked ? "1px solid white" : "0" : props.checked ? "1px solid #00bcd4" : "0"};
+ font-weight : ${props => props.checked ? "bold" : "lighter"};
+
+ box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
span {
padding-top : 5%;
@@ -304,22 +317,20 @@ export const ObjTypeBox = styled.div`
justify-content : center;
.icon {
- color : inherit;
+ color : #00bcd4;
align-self : center;
height : 48px;
width : 48px;
}
p {
+ color : ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration : ${props => props.contrast === "Contrast" ? props.checked ? "none" : "underline" : "none"};
height : 28px;
font-size : 14px;
text-align : center;
line-height : 14px;
}
-
- svg path {
- fill : ${props => props.checked ? "#fff" : "#00bcd4"};
- }
}
`
@@ -327,45 +338,45 @@ export const OutroAutorTextField = styled(TextField)`
font-size : 14px;
width : 100% !important;
- .MuiFormControl-root {
- margin : 18px 0 !important;
+ .MuiOutlinedInput-root {
+ &.Mui-focused fieldset {
+ border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ }
+ fieldset {
+ border-color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
}
- .MuiFormHelperText-root {
- text-align : left;
- font-size : 14px !important ;
+ label{
+ color: ${props => props.contrast === "" ? "#666" : "white"};
}
label.Mui-focused {
- color : #00bcd4;
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
}
label.Mui-focused.Mui-error {
color : red;
}
- .MuiInput-underline::after {
- border-bottom: 1px solid #00bcd4;
- }
.MuiFormHelperText-root {
- font-size : 12px !important;
- text-align : right !important;
+ text-align : left;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
}
`
export const StyledFormLabel = styled(FormLabel)`
b {
- color : #666 !important;
+ color: ${props => props.contrast === "" ? "#666 !important" : "white !important"};
}
span {
- color : #a5a5a5;
+ color: ${props => props.contrast === "" ? "#a5a5a5" : "white"};
}
`
export const StyledTextField = styled(TextField)`
font-size : 14px;
width : 100% !important;
- full-width : 100% !important;
.MuiFormHelperText-root {
text-align : left;
@@ -402,10 +413,8 @@ export const StyledTextField = styled(TextField)`
}
}
-
- .MuiFormHelperText-root {
- text-align : left;
- font-size : 14px !important ;
+ label{
+ color: ${props => props.contrast === "" ? "#666" : "white"};
}
.MuiFormLabel-asterisk {
@@ -417,7 +426,7 @@ export const StyledTextField = styled(TextField)`
}
label.Mui-focused {
- color : #00bcd4;
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
}
label.Mui-focused.Mui-error {
@@ -429,101 +438,106 @@ export const StyledTextField = styled(TextField)`
}
`
- const useStyles = makeStyles({
- root: {
- '&:hover': {
- backgroundColor: 'transparent',
- },
- }})
-
- export function StyledRadio (props) {
- const classes = useStyles();
- return (
- <Radio
- className={classes.root}
- disableRipple
- checkedIcon = {
- <ObjTypeBox checked>
- <span>
- {GetIconByName(props.label)}
- <p>{props.label}</p>
- </span>
- </ObjTypeBox>
- }
- icon = {
- <ObjTypeBox>
- <span>
- {GetIconByName(props.label)}
- <p>{props.label}</p>
- </span>
- </ObjTypeBox>
- }
- {...props}
- />
- )
- }
-
- export const StyledDiv = styled.div`
- display : flex;
- margin-top : 30px;
- justify-content : space-evenly;
+const useStyles = makeStyles({
+ root: {
+ '&:hover': {
+ backgroundColor: 'transparent',
+ },
+ }
+})
+
+export function StyledRadio(props) {
+ const classes = useStyles();
+ return (
+ <Radio
+ className={classes.root}
+ disableRipple
+ checkedIcon={
+ <ObjTypeBox contrast={props.contrast} checked>
+ <span>
+ {GetIconByName(props.label)}
+ <p>{props.label}</p>
+ </span>
+ </ObjTypeBox>
+ }
+ icon={
+ <ObjTypeBox contrast={props.contrast}>
+ <span>
+ {GetIconByName(props.label)}
+ <p>{props.label}</p>
+ </span>
+ </ObjTypeBox>
+ }
+ {...props}
+ />
+ )
+}
+
+export const StyledDiv = styled.div`
+ display : flex;
+ margin-top : 30px;
+ justify-content : space-evenly;
`
- export const OrangeButton = styled(Button)`
+export const OrangeButton = styled(Button)`
max-height : 36px !important;
- color : rgba(255,255,255,0.87) !important;
- box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
- font-weight : 600 !important;
- background-color : #ff7f00 !important;
- margin-left : 8px !important;
- margin-right : 8px !important;
+ box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
+ font-weight : 600 !important;
+ background: ${props => props.contrast === "" ? " #ff7f00 !important" : "black !important"};
+ color: ${props => props.contrast === "" ? "rgba(255,255,255,0.87) !important" : "yellow !important"};
+ border: ${props => props.contrast === "" ? "" : "1px solid white !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
+ margin-left : 8px !important;
+ margin-right : 8px !important;
+ &:hover {
+ background: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
`
- export const GreyButton = styled(Button)`
- &:hover {
- background-color : rgba(158,158,158,0.2) !important;
- }
- max-height : 36px !important;
-
- background-color : transparent !important;
- color : #666 !important;
- text-decoration : none !important;
- outline : none !important;
- text-align : center !important;
-
- .button-text {
- cursor : pointer;
- line-height : 36px;
- text-align : center;
- color : currentColor;
- white-space : nowrap;
- text-transform : uppercase;
- font-weight : 600 !important;
- font-size : 14px;
- font-style : inherit;
- font-variant : inherit;
- padding : 6px 16px !important;
- }
+export const GreyButton = styled(Button)`
+ background: ${props => props.contrast === "" ? "transparent !important" : "black !important"};
+ color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
+ border: ${props => props.contrast === "" ? "" : "1px solid white !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
+ outline : none !important;
+ text-align : center !important;
+
+ margin-left : 8px !important;
+ margin-right : 8px !important;
+
+ .button-text {
+ cursor : pointer;
+ text-align : center;
+ color : currentColor;
+ white-space : nowrap;
+ text-transform : uppercase;
+ font-weight : 600 !important;
+ font-style : inherit;
+ font-variant : inherit;
+ }
`
- export const Background = styled.div `
- padding-top : 40px;
- background-color : #f4f4f4;
- color : #666;
-
- .container {
- padding : 0;
- margin-right : auto;
- margin-left : auto;
-
- @media screen and (min-width: 768px) {
- width : 750px;
- }
- @media screen and (min-width: 992px) {
- width : 970px;
- }
- @media screen and (min-width: 1200px) {
- width : 1170px;
- }
- }
+export const Background = styled.div`
+ padding-top : 40px;
+ background: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+
+ .container {
+ padding : 0;
+ margin-right : auto;
+ margin-left : auto;
+ background: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+
+
+ @media screen and (min-width: 768px) {
+ width : 750px;
+ }
+ @media screen and (min-width: 992px) {
+ width : 970px;
+ }
+ @media screen and (min-width: 1200px) {
+ width : 1170px;
+ }
+ }
`
diff --git a/src/Components/UploadPageComponents/UploadFileWrapper.js b/src/Components/UploadPageComponents/UploadFileWrapper.js
index f872fe06..8aa1b13b 100644
--- a/src/Components/UploadPageComponents/UploadFileWrapper.js
+++ b/src/Components/UploadPageComponents/UploadFileWrapper.js
@@ -16,21 +16,21 @@ 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 } from 'react'
import LinkIcon from '../../img/link_icon.svg'
import ChooseLink from './ChooseLinkSection.js'
-import {WrapperBox, BlueButton, GrayButton} from './StyledComponents.js';
-import {DottedBox} from './StyledComponents.js';
-import {getAxiosConfigFromJSON, updateHeaders, deleteRequest, putRequest} from '../HelperFunctions/getAxiosConfig.js'
+import { WrapperBox, BlueButton, GrayButton } from './StyledComponents.js';
+import { DottedBox } from './StyledComponents.js';
+import { getAxiosConfigFromJSON, updateHeaders, deleteRequest, putRequest } from '../HelperFunctions/getAxiosConfig.js'
import AttachFileIcon from '@material-ui/icons/AttachFile';
import axios from 'axios'
-import {apiUrl} from '../../env';
+import { apiUrl } from '../../env';
import DoneIcon from '@material-ui/icons/Done';
import DeleteIcon from '@material-ui/icons/Delete';
import SnackBar from '../SnackbarComponent';
-export default function UploadFileWrapper (props) {
+export default function UploadFileWrapper(props) {
/*-----------------------------------------------------------------
- Wrapper for file upload box
- has three different stages:
@@ -41,10 +41,11 @@ export default function UploadFileWrapper (props) {
- Props used:
- submit : called when the user clicks "ENVIAR" inside ChooseLinkSection; renders the alert snackbar to let them know the link was submitted
- */
+ - contrast : used to display contrast colors or not
+ */
const [stage, setStage] = useState(props.prevFile ? "fileSelected" : "default")
- const handleNextStage = (newStage) => {setStage(newStage)}
+ const handleNextStage = (newStage) => { setStage(newStage) }
// eslint-disable-next-line
const [fileToUpload, setFileToUpload] = useState(null);
@@ -55,15 +56,15 @@ export default function UploadFileWrapper (props) {
const [uploadProgress, setProgress] = useState(0)
const [attachmentID, setAttachmentID] = useState(props.prevFile ? props.prevFile.id : null)
- async function onFileChange (file) {
- if(!file) return;
+ async function onFileChange(file) {
+ if (!file) return;
let newFile = file
- console.log(newFile)
+ //console.log(newFile)
setFileToUpload(newFile);
setFileName(newFile.name)
- let total = Math.ceil(newFile.size/chunkSize)
+ let total = Math.ceil(newFile.size / chunkSize)
let currentChunkStartByte = 0;
let currentChunkFinalByte = chunkSize > newFile.size ? newFile.size : chunkSize;
let chunkIdentifier = props.draftID + '-' + newFile.name;
@@ -84,11 +85,11 @@ export default function UploadFileWrapper (props) {
try {
const response = await axios.post(uploadUrl, formData, config);
- console.log(response)
+ //console.log(response)
if (response.headers['access-token']) {
updateHeaders(response.headers)
}
- setProgress(Math.round((currentChunkFinalByte/newFile.size) * 100))
+ setProgress(Math.round((currentChunkFinalByte / newFile.size) * 100))
remainingBytes = newFile.size - currentChunkFinalByte;
if (currentChunkFinalByte === newFile.size) {
setFileDoneUploading(true)
@@ -103,7 +104,6 @@ export default function UploadFileWrapper (props) {
currentChunkFinalByte = currentChunkStartByte + chunkSize;
}
} catch (error) {
- console.log(error)
handleNextStage("error")
return;
}
@@ -114,12 +114,12 @@ export default function UploadFileWrapper (props) {
if (attachmentID != null) {
const url = `/learning_objects/${props.draftID}/attachment/${attachmentID}`
- deleteRequest(url, (data) => {handleNextStage("default")}, (error) => {console.log(error)})
+ deleteRequest(url, (data) => { handleNextStage("default") }, (error) => { console.log(error) })
}
}
const handleCancel = () => {
- console.log('cancelar request')
+
}
const handleDragOver = e => {
@@ -133,7 +133,6 @@ export default function UploadFileWrapper (props) {
e.stopPropagation();
let files = [...e.dataTransfer.files]
- console.log('files: ', files)
if (files && files.length > 0) {
onFileChange(files[0])
}
@@ -145,25 +144,25 @@ export default function UploadFileWrapper (props) {
const url = `/learning_objects/${props.draftID}`
let payload = {
- "learning_object" : {
- "id" : props.draftID,
- "link" : link
+ "learning_object": {
+ "id": props.draftID,
+ "link": link
}
}
- putRequest(url, payload, (data) => {toggleSnackbar(true)}, (error) => {console.log(error)})
+ putRequest(url, payload, (data) => { toggleSnackbar(true) }, (error) => { console.log(error) })
}
switch (stage) {
case "error":
- return(
- <WrapperBox>
+ return (
+ <WrapperBox contrast={props.contrast}>
<div className="inner">
<div className="upload-title">Erro</div>
- <span>Clique no botão para tentar novamente.</span>
+ <span>Clique no botão para tentar novamente.</span>
<div className="flex-column">
<div className="buttons-div">
- <GrayButton onClick={() => {handleNextStage("default")}}>
+ <GrayButton contrast={props.contrast} onClick={() => { handleNextStage("default") }}>
<span className="button-text">
Voltar
</span>
@@ -174,8 +173,8 @@ export default function UploadFileWrapper (props) {
</WrapperBox>
)
case "fileSelected":
- return(
- <WrapperBox>
+ return (
+ <WrapperBox contrast={props.contrast}>
<div className="inner">
<div className="upload-title">
{fileDoneUploading ? 'O arquivo foi carregado' : 'Carregando arquivo'}
@@ -186,33 +185,33 @@ export default function UploadFileWrapper (props) {
<div className="item-info">
{
fileDoneUploading ?
- (
- <React.Fragment>
- <div className="file-status">
- <DoneIcon className="icon icon-margin"/> {fileName}
+ (
+ <React.Fragment>
+ <div className="file-status">
+ <DoneIcon contrast={props.contrast} className="icon icon-margin" /> {fileName}
</div>
- <GrayButton onClick={() => {handleDelete()}}>
- Excluir <DeleteIcon className="icon icon-remove"/>
+ <GrayButton contrast={props.contrast} onClick={() => { handleDelete() }}>
+ Excluir <DeleteIcon className="icon icon-remove" />
</GrayButton>
- </React.Fragment>
- )
- :
- (
- <React.Fragment>
- <div className="file-status">
- {uploadProgress}% {fileName}
- </div>
- <GrayButton onClick={() => {handleCancel()}}>
- Cancelar <DeleteIcon className="icon icon-remove"/>
- </GrayButton>
- </React.Fragment>
- )
+ </React.Fragment>
+ )
+ :
+ (
+ <React.Fragment>
+ <div className="file-status">
+ {uploadProgress}% {fileName}
+ </div>
+ <GrayButton contrast={props.contrast} onClick={() => { handleCancel() }}>
+ Cancelar <DeleteIcon className="icon icon-remove" />
+ </GrayButton>
+ </React.Fragment>
+ )
}
</div>
</div>
<div className="warning">
<span>Não se esqueça de preencher as</span>
- <br/>
+ <br />
<span>informações sobre o recurso ao lado.</span>
</div>
</div>
@@ -233,8 +232,8 @@ export default function UploadFileWrapper (props) {
</React.Fragment>
)
default:
- return(
- <WrapperBox>
+ return (
+ <WrapperBox contrast={props.contrast}>
<div className="inner">
<div className="upload-title"> Enviar Recurso</div>
<div className="flex-column">
@@ -243,38 +242,39 @@ export default function UploadFileWrapper (props) {
<div className="upload-form">
<form id="file_upload">
<DottedBox
+ contrast={props.contrast}
onDrop={e => handleDrop(e)}
onDragOver={e => handleDragOver(e)}
- >
- <AttachFileIcon className="icon"/>
+ >
+ <AttachFileIcon className="icon" />
<input
type="file"
- onChange = {(e) => {onFileChange(e.target.files[0])}}
+ onChange={(e) => { onFileChange(e.target.files[0]) }}
id="upload-file"
- style={{display : "none"}}
- />
- <BlueButton>
- <label htmlFor="upload-file" style={{width : "inherit", cursor : "pointer"}}>
+ style={{ display: "none" }}
+ />
+ <BlueButton contrast={props.contrast}>
+ <label htmlFor="upload-file" style={{ width: "inherit", cursor: "pointer" }}>
ESCOLHER ARQUIVO
</label>
</BlueButton>
- <span style={{marginTop : "6px"}}>Ou arrastar e soltar o arquivo aqui</span>
+ <span style={{ marginTop: "6px" }}>Ou arrastar e soltar o arquivo aqui</span>
</DottedBox>
</form>
</div>
</div>
<div className="strike-box">
- <div className="strike"/><h3>ou</h3><div className="strike"/>
+ <div className="strike" /><h3>ou</h3><div className="strike" />
</div>
<div className="enviar-link-texto">
- <img alt="" src={LinkIcon}/>
- <br/>
+ <img alt="" src={LinkIcon} />
+ <br />
<span>Enviar link de um recurso de outro site</span>
</div>
- <BlueButton onClick={ () => {handleNextStage("choosingLink")} }>ENVIAR LINK</BlueButton>
+ <BlueButton contrast={props.contrast} onClick={() => { handleNextStage("choosingLink") }}>ENVIAR LINK</BlueButton>
</div>
</div>
</WrapperBox>
diff --git a/src/Components/UserPageComponents/Avatar.js b/src/Components/UserPageComponents/Avatar.js
index 8f3c05b8..03b3ae11 100644
--- a/src/Components/UserPageComponents/Avatar.js
+++ b/src/Components/UserPageComponents/Avatar.js
@@ -41,6 +41,7 @@ export default function ProfileAvatar (props) {
return (
<>
<ModalAlterarAvatar
+ contrast={props.contrast}
open={open}
handleClose={controlModal}
userAvatar={currentAvatar}
diff --git a/src/Components/UserPageComponents/Cover.js b/src/Components/UserPageComponents/Cover.js
index 339c36fd..27aae391 100644
--- a/src/Components/UserPageComponents/Cover.js
+++ b/src/Components/UserPageComponents/Cover.js
@@ -37,7 +37,6 @@ export default function Cover (props) {
const updateCover = (selectorFiles) => {
const objectURL = URL.createObjectURL(selectorFiles[0])
- console.log(objectURL)
setTempCover(objectURL)
controlModal()
}
@@ -45,9 +44,11 @@ export default function Cover (props) {
useEffect( () => {
setCoverImg(state.currentUser.cover)
}, state.currentUser.cover)
+
return (
<>
<ModalAlterarCover
+ contrast={props.contrast}
open = {open}
handleClose={controlModal}
cover={tempCover}
diff --git a/src/Components/UserPageComponents/EditProfileButton.js b/src/Components/UserPageComponents/EditProfileButton.js
index beaa7137..b0636380 100644
--- a/src/Components/UserPageComponents/EditProfileButton.js
+++ b/src/Components/UserPageComponents/EditProfileButton.js
@@ -18,25 +18,25 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React from 'react';
import { Store } from '../../Store.js';
import styled from 'styled-components'
-import {Link} from 'react-router-dom';
+import { Link } from 'react-router-dom';
import EditIcon from '@material-ui/icons/Edit';
import Button from '@material-ui/core/Button';
-export default function EditProfileButton () {
- const {state} = React.useContext(Store)
+export default function EditProfileButton({ contrast }) {
+ const { state } = React.useContext(Store)
return (
- <EditProfileAnchor to="/editarperfil">
+ <EditProfileAnchor to="/editarperfil" contrast={contrast}>
<Button>
- {state.windowSize.width >=900 ?
+ {state.windowSize.width >= 900 ?
(
<React.Fragment>
- <EditIcon style={{marginRight:"5px", verticalAlign:"middle"}}/> <span>EDITAR PERFIL</span>
+ <EditIcon className="icon" /> <span>EDITAR PERFIL</span>
</React.Fragment>
)
:
(
- <EditIcon style={{marginRight:"5px", verticalAlign:"middle"}}/>
+ <EditIcon className="icon" style={contrast === "" ? {color: "white"} : {color: "yellow"}}/>
)
}
</Button>
@@ -45,30 +45,32 @@ export default function EditProfileButton () {
}
const EditProfileAnchor = styled(Link)`
- Button {
- box-shadow : 0 2px 5px 0 rgba(0,0,0,.26);
- background-color : #fafafa;
- position : absolute;
- right : 10px;
- top : 10px;
- margin-bottom : 20px;
- color : #666;
- padding : 0 10px;
- text-decoration : none;
- border-radius : 3px;
- @media screen and (min-width: 800px) {
- min-height : 36px;
- min-width : 88px;
- }
- line-height : 36px;
- border : 0;
- display: inline-block;
- text-align : center;
- :hover{
- background-color : #fafafa;
- }
- @media screen and (max-width: 600px) {
- max-width : 44px !important ;
- }
- }
+ Button {
+ box-shadow : 0 2px 5px 0 rgba(0,0,0,.26);
+ background-color: ${props => props.contrast === "" ? "#52BCD4" : "black"} !important;
+ position : absolute;
+ right : 10px;
+ top : 10px;
+ margin-bottom : 20px;
+ color: ${props => props.contrast === "" ? "white" : "yellow"};
+ padding : 0 10px;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ border-radius : 3px;
+ @media screen and (min-width: 800px) {
+ min-height : 36px;
+ min-width : 88px;
+ }
+ line-height : 36px;
+ border: ${props => props.contrast === "" ? "0" : "1px solid white"};
+ display: inline-block;
+ text-align : center;
+ @media screen and (max-width: 600px) {
+ max-width : 44px !important ;
+ }
+ }
+ .icon{
+ margin-right: 5px;
+ vertical-align: middle;
+ color: white;
+ }
`
diff --git a/src/Components/UserPageComponents/SubmitterStatus.js b/src/Components/UserPageComponents/SubmitterStatus.js
index 1cb29365..d36f53dc 100644
--- a/src/Components/UserPageComponents/SubmitterStatus.js
+++ b/src/Components/UserPageComponents/SubmitterStatus.js
@@ -15,13 +15,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, {useContext} from 'react';
+import React, { useContext } from 'react';
import { Store } from '../../Store.js';
import CheckDecagram from '../../img/check-decagram-gray.svg'
-import {Link} from 'react-router-dom';
+import { Link } from 'react-router-dom';
-export default function SubmitterStatus (props) {
- const {state} = useContext(Store)
+export default function SubmitterStatus(props) {
+ const { state } = useContext(Store)
let text;
switch (state.currentUser.submitter_request) {
@@ -37,21 +37,21 @@ export default function SubmitterStatus (props) {
return (
<React.Fragment>
- <p style={{fontSize:"15px", lineHeight:"22px", textAlign:"left", margin:"0 0 10px"}}>
- <span style={{cursor:"pointer"}}>
- <span style={{paddingRight:"5px"}}>
- <img src={CheckDecagram} alt='check icon'/>
- </span>
- {text}
- <Link to={{
- pathname: '/editarperfil',
- tabValue: {
- value: 1
- }
- }}>
- <span style={{color:"#00bcd4"}}> SAIBA MAIS</span>
- </Link>
-
+ <p style={{ fontSize: "15px", lineHeight: "22px", textAlign: "left", margin: "0 0 10px" }}>
+ <span>
+ <span style={{ paddingRight: "5px" }}>
+ <img src={CheckDecagram} alt='check icon' />
+ </span>
+ {text}
+ <Link to={{
+ pathname: '/editarperfil',
+ tabValue: {
+ value: 1
+ }
+ }}>
+ <span style={state.contrast === "" ? { color: "#00bcd4" } : { color: "yellow", textDecoration: "underline", cursor: "pointer" }}> SAIBA MAIS</span>
+ </Link>
+
</span>
</p>
</React.Fragment>
diff --git a/src/Components/UserPageComponents/UserInfo.js b/src/Components/UserPageComponents/UserInfo.js
index 4782759f..b8dde202 100644
--- a/src/Components/UserPageComponents/UserInfo.js
+++ b/src/Components/UserPageComponents/UserInfo.js
@@ -25,18 +25,8 @@ export default function UserInfo(props) {
const user = state.currentUser.name;
return (
- <UserProfileInfoDiv>
- <p
- style={{
- fontSize: "28px",
- color: "#fff",
- paddingTop: "5px",
- paddingBottom: "5px",
- fontWeight: "500",
- backgroundColor: "#77777796",
- borderRadius: "5px",
- }}
- >
+ <UserProfileInfoDiv contrast={state.contrast}>
+ <p>
{user}
</p>
</UserProfileInfoDiv>
diff --git a/src/Components/carousel.css b/src/Components/carousel.css
index ea66082f..929ac9e3 100644
--- a/src/Components/carousel.css
+++ b/src/Components/carousel.css
@@ -16,15 +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/>.*/
-.carousel .control-dots{
- position: inherit !important;
+
+
+.carousel .slide {
+ background-color: inherit !important;
}
-.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);
+.carousel .control-dots {
+ position: inherit !important;
+}
.Carousel .control-arrow {
background: orange !important;
@@ -39,7 +39,7 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
}
.MuiPaper-elevation1-209{
- box-shadow: none !important;
+ box-shadow: none !important;
}
diff --git a/src/Pages/AboutPage.js b/src/Pages/AboutPage.js
index ab1b6bbb..bf21ccee 100644
--- a/src/Pages/AboutPage.js
+++ b/src/Pages/AboutPage.js
@@ -16,13 +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, { useEffect } from 'react';
+import React, { useEffect, useContext } from 'react';
import Grid from '@material-ui/core/Grid';
import styled from 'styled-components';
import Modal from '../Components/ModalAbout';
import AboutCarousel from "../Components/AboutCarousel";
import AboutCarouselPartner from '../Components/AboutCarouselPartner';
-
+import { Store } from '../Store';
/*Importação de imagens para o componente*/
import Agpl from "../img/sobre/agpl.svg";
@@ -47,6 +47,7 @@ const Secao2 = styled.div`
text-align: center;
font-size: 14px;
line-height: 1.42857143;
+ background-color: ${props => props.contrast === '' ? "" : "black"};
.container {
@@ -99,6 +100,7 @@ const Secao3 = styled.div`
padding: 30px 0;
background-color: #1ab9de;
color: #fff;
+ background-color: ${props => props.contrast === '' ? "" : "black"};
.container {
@@ -164,6 +166,7 @@ const Secao4 = styled.div`
height: 720px;
text-align: center;
color: #666;
+ background-color: ${props => props.contrast === '' ? "" : "black"};
.container {
@@ -223,7 +226,7 @@ const Secao4 = styled.div`
text-align: center;
border: 0;
padding: 0 6px;
- hite-space: nowrap;
+ white-space: nowrap;
text-decoration: none;
@@ -319,7 +322,7 @@ const Secao5 = styled.div`
const Secao6 = styled.div`
height: 500px;
-
+ background-color: ${props => props.contrast === '' ? "" : "black"};
.container {
@@ -374,7 +377,7 @@ const Secao6 = styled.div`
const Secao7 = styled.div`
height: 100%;
- background-color: #f4f4f4;
+ background-color: ${props => props.contrast === '' ? "#f4f4f4" : "black"};
.container {
@@ -416,10 +419,8 @@ const Secao7 = styled.div`
}
.card {
-
height: 80%;
-
- background-color: #fff;
+ background-color: ${props => props.contrast === '' ? "#fff" : "black"};
box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
padding: 40px 20px;
text-align: center;
@@ -441,6 +442,7 @@ const Secao7 = styled.div`
img {
width: 114px;
+ background-color: ${props => props.contrast === '' ? "#fff" : "black"};
}
}
@@ -455,6 +457,7 @@ const Secao7 = styled.div`
const Secao8 = styled.div`
height: 230px;
+ background-color: ${props => props.contrast === '' ? "" : "black"};
.container {
@@ -499,8 +502,7 @@ const Secao8 = styled.div`
}
button {
-
- background-color: #ed6f00;
+ background-color: ${props => props.contrast === '' ? "#ed6f00" : "black"};
font-family: Roboto,sans-serif;
font-size: 14px;
font-weight: 500;
@@ -518,7 +520,7 @@ const Secao8 = styled.div`
text-align: center;
border-radius: 3px;
user-select: none;
- border: 0;
+ border: ${props => props.contrast === '' ? "0" : "1px solid white"};
padding: 0 6px;
padding-right: 6px;
padding-left: 6px;
@@ -526,33 +528,24 @@ const Secao8 = styled.div`
font-weight: 500;
font-size: 14px;
overflow: hidden;
-
-
-
+ :hover{
+ background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24)"};
+ }
a {
- color: #fff;
- text-decoration: none;
+ color: ${props => props.contrast === '' ? "#fff" : "yellow"};
+ text-decoration: ${props => props.contrast === '' ? "" : "underline"};;
}
}
-
}
}
}
-
-
-
`
-
-
-
-
-
-
-
export default function AboutPage(props) {
var pageWidth = window.innerWidth
+ const { state } = useContext(Store);
+
const calculateMargin = ((pageWidth) => {
if (pageWidth > 700 && pageWidth <= 850) {
return "40%"
@@ -584,12 +577,14 @@ export default function AboutPage(props) {
</Secao1>
- <Secao2>
+ <Secao2 contrast={state.contrast} >
<div className="container">
<div className="container-secao">
<div className="conteudo-secao">
- <h2>Um Pouco da História</h2>
- <p style={{ marginLeft: 20, marginRight: 20, marginBottom: 40 }}>
+ <h2 className={`${state.contrast}TextColor`}>
+ Um Pouco da História
+ </h2>
+ <p className={`${state.contrast}TextColor`} style={{ marginLeft: 20, marginRight: 20, marginBottom: 40 }}>
A partir de uma iniciativa do Ministério da Educação, surge
em outubro de 2015 a proposta de reunir e disponibilizar, em um
único lugar, os Recursos Educacionais Digitais dos principais
@@ -603,10 +598,10 @@ export default function AboutPage(props) {
colaborativo você também!
</p>
<img src={Agpl} alt="agpl" />
- <p>
+ <p className={`${state.contrast}TextColor`}>
Este programa é software livre, sob os termos da
- <a href="https://www.gnu.org/licenses/agpl-3.0.en.html" rel="noreferrer" target="_blank"> licença GNU/AGPL</a><br />
- Seu código fonte está disponÃvel no <a href="https://gitlab.c3sl.ufpr.br/portalmec/portalmec" rel="noreferrer" target="_blank">GitLab</a>
+ <a className={`${state.contrast}LinkColor`} href="https://www.gnu.org/licenses/agpl-3.0.en.html" rel="noreferrer" target="_blank"> licença GNU/AGPL</a><br />
+ Seu código fonte está disponÃvel no <a className={`${state.contrast}LinkColor`} href="https://gitlab.c3sl.ufpr.br/portalmec/portalmec" rel="noreferrer" target="_blank">GitLab</a>
</p>
@@ -615,7 +610,7 @@ export default function AboutPage(props) {
</div>
</Secao2>
- <Secao3>
+ <Secao3 contrast={state.contrast} >
<div className="container">
<div className="container-secao">
<div className="conteudo-secao">
@@ -660,18 +655,18 @@ export default function AboutPage(props) {
- <Secao4>
+ <Secao4 contrast={state.contrast}>
<div className="container">
<div className="container-secao" id="portaisparceiros">
<div className="conteudo-secao" >
- <div>
+ <div className={`${state.contrast}TextColor`}>
<h2>Portais Parceiros</h2>
<p>Aqui na Plataforma você encontra os Recursos Digitais dos principais portais do MEC e de vários outros parceiros.</p>
</div>
<AboutCarouselPartner />
- <div>
+ <div className={`${state.contrast}TextColor`}>
<h3>Você busca Recursos Educacionais Digitais em outros sites?</h3>
<p>
Você gostaria que a plataforma tivesse os recursos do site que
@@ -680,7 +675,7 @@ export default function AboutPage(props) {
</p>
</div>
<div style={{ marginTop: "30px" }}>
- <Modal />
+ <Modal contrast={state.contrast} />
</div>
</div>
@@ -703,16 +698,15 @@ export default function AboutPage(props) {
</div>
</Secao5>
- <Secao6>
+ <Secao6 contrast={state.contrast}>
<div className="container">
<div className="container-secao">
<div className="conteudo-secao">
- <div>
+ <div className={`${state.contrast}TextColor`}>
<h2>Aqui você pode:</h2>
-
</div>
<div>
- <AboutCarousel />
+ <AboutCarousel contrast={state.contrast} />
</div>
</div>
@@ -720,13 +714,13 @@ export default function AboutPage(props) {
</div>
</Secao6>
- <Secao7>
+ <Secao7 contrast={state.contrast}>
<div className="container">
<div className="container-secao">
<div className="conteudo-secao">
<div className="cabecalho">
- <h2>A quem se destina?</h2>
- <p>A plataforma é aberta e destina-se a todos e todas que se
+ <h2 className={`${state.contrast}TextColor`}>A quem se destina?</h2>
+ <p className={`${state.contrast}TextColor`}>A plataforma é aberta e destina-se a todos e todas que se
interessam<br />pela relação entre a escola e a Cultura Digital:</p>
</div>
<div>
@@ -734,8 +728,8 @@ export default function AboutPage(props) {
<Grid item xs>
<div className="card">
<img src={Professores} alt="" />
- <h3>Professores</h3>
- <p>
+ <h3 className={`${state.contrast}TextColor`}>Professores</h3>
+ <p className={`${state.contrast}TextColor`}>
Encontre recursos digitais que se encaixem aos objetivos
das suas aulas! Aproveite para seguir outros professores,
coleções e conhecer experiências de uso!
@@ -745,8 +739,8 @@ export default function AboutPage(props) {
<Grid item xs>
<div className="card">
<img src={Alunos} alt="" />
- <h3>Alunos</h3>
- <p>
+ <h3 className={`${state.contrast}TextColor`}>Alunos</h3>
+ <p className={`${state.contrast}TextColor`}>
Você pode complementar os seus estudos com recursos
digitais que lhe interessem. Gostou de algum recurso?
Recomende ao seu professor ou professora.
@@ -756,8 +750,8 @@ export default function AboutPage(props) {
<Grid item xs>
<div className="card">
<img src={Gestores} alt="" />
- <h3>Gestores</h3>
- <p>
+ <h3 className={`${state.contrast}TextColor`}>Gestores</h3>
+ <p className={`${state.contrast}TextColor`}>
Desenvolva junto com o coletivo da escola ações e projetos
pedagógicos com recursos digitais importantes para o seu contexto.
</p>
@@ -766,8 +760,8 @@ export default function AboutPage(props) {
<Grid item xs>
<div className="card">
<img src={Comunidade} alt="" />
- <h3>Comunidade Escolar</h3>
- <p>
+ <h3 className={`${state.contrast}TextColor`}>Comunidade Escolar</h3>
+ <p className={`${state.contrast}TextColor`}>
Encontre recursos digitais e materiais de formação que
contribuam para a aprendizagem e práticas educativas na
sua comunidade escolar.
@@ -782,12 +776,12 @@ export default function AboutPage(props) {
</div>
</Secao7>
- <Secao8>
+ <Secao8 contrast={state.contrast}>
<div className="container">
<div className="container-secao">
<div className="conteudo-secao">
- <h2>Ficou alguma dúvida? Gostaria de fazer alguma sugestão ou crÃtica? Construa conosco.</h2>
+ <h2 className={`${state.contrast}TextColor`}>Ficou alguma dúvida? Gostaria de fazer alguma sugestão ou crÃtica? Construa conosco.</h2>
<div>
<button><a href="contato">ENTRAR EM CONTATO</a></button>
</div>
diff --git a/src/Pages/ChangePasswordPage.js b/src/Pages/ChangePasswordPage.js
index a40367f6..c7a2d84b 100644
--- a/src/Pages/ChangePasswordPage.js
+++ b/src/Pages/ChangePasswordPage.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useContext } from "react";
import { BackgroundDiv } from '../Components/TabPanels/StyledComponents.js'
import Paper from '@material-ui/core/Paper'
import styled from 'styled-components'
@@ -11,10 +11,12 @@ 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'
import SnackBar from '../Components/SnackbarComponent';
export default function ChangePasswordPage(props) {
+ const { state } = useContext(Store)
const [error, setError] = useState(false)
const [success, setSuccess] = useState(false)
@@ -73,9 +75,7 @@ export default function ChangePasswordPage(props) {
}
handleSnackInfo(snackInfo)
} else {
- //console.log("senha bate");
if (!formPassword.key && !formPasswordConfirmation.key) {
- console.log("senha bate");
const urlParams = new URLSearchParams(window.location.search);
const clientId = urlParams.get("client_id");
@@ -179,13 +179,13 @@ export default function ChangePasswordPage(props) {
text={snackInfo.text}
/>
<div>
- <CustomizedBreadcrumbs
+ <CustomizedBreadcrumbs contrast={state.contrast}
values={["Recuperar senha", "Alterar senha"]}
/>
</div>
<div style={{ justifyContent: "center", textAlign: "center", maxWidth: "600px", margin: "auto" }}>
<Paper elevation={3}>
- <CardDiv>
+ <CardDiv contrast={state.contrast}>
<div style={{ overflow: "hidden", display: "inline-block" }}>
<h2 style={{ fontSize: "32px", fontWeight: "200", marginBottom: "20px", lineHeight: '35px' }}>
Ocorreu um erro. Por favor, tente novamente mais tarde. Você será redirecionado para a home em... <StyledTimer>{time}</StyledTimer>
@@ -206,13 +206,13 @@ export default function ChangePasswordPage(props) {
text={snackInfo.text}
/>
<div>
- <CustomizedBreadcrumbs
+ <CustomizedBreadcrumbs contrast={state.contrast}
values={["Recuperar senha", "Alterar senha"]}
/>
</div>
<div style={{ justifyContent: "center", textAlign: "center", maxWidth: "600px", margin: "auto" }}>
<Paper elevation={3}>
- <CardDiv>
+ <CardDiv contrast={state.contrast}>
<div style={{ overflow: "hidden", display: "inline-block" }}>
<h2 style={{ fontSize: "32px", fontWeight: "200", marginBottom: "20px", lineHeight: '35px' }}>
Sua senha foi alterada com sucesso. Você será redirecionado para a home em... <StyledTimer>{time}</StyledTimer>
@@ -233,19 +233,20 @@ export default function ChangePasswordPage(props) {
text={snackInfo.text}
/>
<div>
- <CustomizedBreadcrumbs
+ <CustomizedBreadcrumbs contrast={state.contrast}
values={["Recuperar senha", "Alterar senha"]}
/>
</div>
<div style={{ justifyContent: "center", textAlign: "center", maxWidth: "600px", margin: "auto" }}>
<Paper elevation={3}>
- <CardDiv>
+ <CardDiv contrast={state.contrast}>
<div style={{ overflow: "hidden", display: "inline-block" }}>
<h2 style={{ fontSize: "32px", fontWeight: "200", marginBottom: "20px" }}>Confirme a nova senha</h2>
<form onSubmit={(e) => { e.preventDefault(); onSubmit(e); }}>
<Grid container direction='row' alignItems='center' spacing={1}>
<Grid item xs={10}>
<FormInput
+ contrast={state.contrast}
inputType={formPassword.hidePass ? "password" : ""}
name={"senha"}
value={formPassword.value}
@@ -259,11 +260,11 @@ export default function ChangePasswordPage(props) {
<Grid item xs={2}>
{
formPassword.hidePass ?
- <IconButton onClick={handleStateHideFormPass}>
+ <IconButton className={`${state.contrast}LinkColor`} onClick={handleStateHideFormPass}>
<VisibilityIcon />
</IconButton>
:
- <IconButton onClick={handleStateHideFormPass}>
+ <IconButton className={`${state.contrast}LinkColor`} onClick={handleStateHideFormPass}>
<VisibilityOffIcon />
</IconButton>
}
@@ -273,6 +274,7 @@ export default function ChangePasswordPage(props) {
<Grid container direction='row' alignItems='center' spacing={1}>
<Grid item xs={10}>
<FormInput
+ contrast={state.contrast}
inputType={formPasswordConfirmation.hidePass ? "password" : ""}
name={"confirme a senha"}
value={formPasswordConfirmation.value}
@@ -286,18 +288,18 @@ export default function ChangePasswordPage(props) {
<Grid item xs={2}>
{
formPasswordConfirmation.hidePass ?
- <IconButton onClick={handleStateHideConfFormPass}>
+ <IconButton className={`${state.contrast}LinkColor`} onClick={handleStateHideConfFormPass}>
<VisibilityIcon />
</IconButton>
:
- <IconButton onClick={handleStateHideConfFormPass}>
+ <IconButton className={`${state.contrast}LinkColor`} onClick={handleStateHideConfFormPass}>
<VisibilityOffIcon />
</IconButton>
}
</Grid>
</Grid>
<div style={{ display: "flex", justifyContent: "center" }}>
- <CompletarCadastroButton type="submit" >ATUALIZAR SENHA</CompletarCadastroButton>
+ <CompletarCadastroButton contrast={state.contrast} type="submit" >ATUALIZAR SENHA</CompletarCadastroButton>
</div>
</form>
</div>
@@ -309,7 +311,11 @@ export default function ChangePasswordPage(props) {
}
const CardDiv = styled.div`
- background-color : #fff;
+ color: ${props => props.contrast === "" ? "#666" : "white"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
+
box-shadow : 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
padding : 20px 30px;
margin : 50px 0;
diff --git a/src/Pages/CollectionPage.js b/src/Pages/CollectionPage.js
index 3b06dd99..b64c73ce 100644
--- a/src/Pages/CollectionPage.js
+++ b/src/Pages/CollectionPage.js
@@ -18,7 +18,6 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, { useRef, useState, useEffect, useContext } from 'react';
import { Grid } from '@material-ui/core';
import CollectionAuthor from '../Components/CollectionAuthor.js';
-import VerticalRuler from '../Components/VerticalRuler.js';
import CollectionDescription from '../Components/CollectionDescription.js';
import ResourceList from '../Components/ResourceList.js';
import CollectionCommentSection from '../Components/CollectionCommentSection.js';
@@ -58,7 +57,7 @@ export default function CollectionPage(props) {
}
if (error)
- return <CollectionNotFound>
+ return <CollectionNotFound contrast={state.contrast}>
<Grid container direction='column' justify='center' alignItems='center' spacing={1}>
<Grid item>
<p className="not-found">
@@ -69,22 +68,24 @@ export default function CollectionPage(props) {
<Link className="link" to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=Collection`}>
<Button
- variant='contained'
- className="back-button"
- >
- Voltar para a busca de coleções.
+ variant='contained'
+ className="back-button"
+ >
+ Voltar para a busca de coleções
</Button>
</Link>
- </Grid>
+ </Grid>
</Grid>
</CollectionNotFound >
if (loading)
- return <LoadingSpinner text="Carregando coleção..." />
+ return <LoadingDiv contrast={state.contrast}>
+ <LoadingSpinner contrast={state.contrast} text="Carregando coleção..." />
+ </LoadingDiv>
else
return (
- <>
+ <div style={state.contrast === "" ? { backgroundColor: "white" } : { backgroundColor: "black" }}>
<BreadCrumbsDiv>
- <StyledBreadCrumbs>
+ <StyledBreadCrumbs contrast={state.contrast}>
<Link to="/">Página Inicial</Link>
<span>Coleções</span>
</StyledBreadCrumbs>
@@ -92,14 +93,15 @@ export default function CollectionPage(props) {
<Grid container direction="row" justify="center" alignItems="center">
<Grid item md={3}>
<CollectionAuthor
+ contrast={state.contrast}
author_id={collection.owner.id ? collection.owner.id : 0}
name={collection.owner.name ? collection.owner.name : ""}
imgsrc={collection.owner.avatar ? apiDomain + collection.owner.avatar : noAvatar} />
</Grid>
-
<Grid item md={5}>
<CollectionDescription
+ contrast={state.contrast}
stars={collection.review_average}
likes={collection.likes_count}
liked={collection.liked}
@@ -110,53 +112,56 @@ export default function CollectionPage(props) {
<Grid item md={3}>
<DowloadButton
+ contrast={state.contrast}
id={collection_id}
/>
<div style={{ height: 12 }}></div>
<FollowCollectionButton
+ contrast={state.contrast}
followed={collection.followed}
user_id={state.currentUser.id}
collection_id={collection_id} />
</Grid>
</Grid>
- <VerticalRuler width={1} height={100} color="rgb(238, 238, 238)" />
-
- <Grid container justify="center" style={{ backgroundColor: '#f4f4f4' }}>
+ <Grid container justify="center" style={state.contrast === "" ? { backgroundColor: "#f4f4f4" } : { backgroundColor: "black" }}>
{/* <Grid item xs={1}/> */}
<Grid item xs={10}>
- <ResourceList resources={
- collection.collection_items ?
- collection.collection_items.map(i => {
- return {
- type: i.collectionable.object_type,
- author: i.collectionable.author,
- title: i.collectionable.name,
- rating: i.collectionable.review_average,
- likeCount: i.collectionable.likes_count,
- liked: i.collectionable.liked,
- avatar: i.collectionable.publisher.avatar,
- thumbnail: i.collectionable.thumbnail,
- tags: i.collectionable.tags.map(t => t),
- id: i.collectionable.id,
- downloadableLink: i.collectionable.default_attachment_location,
- publisher: i.collectionable.publisher.name,
- published: i.collectionable.state
- }
- })
- : []
- } />
+ <ResourceList
+ contrast={state.contrast}
+ resources={
+ collection.collection_items ?
+ collection.collection_items.map(i => {
+ return {
+ type: i.collectionable.object_type,
+ author: i.collectionable.author,
+ title: i.collectionable.name,
+ rating: i.collectionable.review_average,
+ likeCount: i.collectionable.likes_count,
+ liked: i.collectionable.liked,
+ avatar: i.collectionable.publisher.avatar,
+ thumbnail: i.collectionable.thumbnail,
+ tags: i.collectionable.tags.map(t => t),
+ id: i.collectionable.id,
+ downloadableLink: i.collectionable.default_attachment_location,
+ publisher: i.collectionable.publisher.name,
+ published: i.collectionable.state
+ }
+ })
+ : []
+ } />
</Grid>
<Grid container item xs={12} style={{ marginTop: 40, paddingBottom: 40 }} ref={comment_ref}>
<CollectionCommentSection
+ contrast={state.contrast}
id={collection_id}
currentUserId={state.currentUser.id}
avatar={state.currentUser.avatar ? apiDomain + state.currentUser.avatar : noAvatar}
/>
</Grid>
</Grid>
- </>
+ </div>
);
}
@@ -164,16 +169,23 @@ const StyledBreadCrumbs = styled(Breadcrumbs)`
display: flex;
justify-content: flex-start;
span {
- color: #a5a5a5;
+ color: ${props => props.contrast === "" ? "#666 !important" : "white !important"};
}
a {
- color: #00bcd4;
- text-decoration: none;
+ color: ${props => props.contrast === "" ? "#00bcd4 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
}
`;
+const LoadingDiv = styled.div`
+ background-color: ${props => props.contrast === "" ? "" : "black"};
+
+`
+
const CollectionNotFound = styled.div`
- margin: 1em;
+ background-color: ${props => props.contrast === "" ? "" : "black !important"};
+ color: ${props => props.contrast === "" ? "#666 !important" : "white !important"};
+ padding: 2em;
.not-found{
font-family: 'Roboto', sans-serif;
@@ -184,8 +196,10 @@ const CollectionNotFound = styled.div`
}
.back-button{
- background-color: #673ab7;
- color: whitesmoke;
+ background-color: ${props => props.contrast === "" ? "#673ab7 !important" : "black !important"};
+ border: ${props => props.contrast === "" ? "none" : "1px solid white !important"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
+ color: ${props => props.contrast === "" ? "whitesmoke" : "yellow !important"};
}
.link{
diff --git a/src/Pages/Contact.js b/src/Pages/Contact.js
index 211c9d80..27abe1a9 100644
--- a/src/Pages/Contact.js
+++ b/src/Pages/Contact.js
@@ -16,165 +16,168 @@ 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 } from "react";
+import React, { useEffect, useContext } from "react";
import styled from "styled-components";
import InputFormulario from "../Components/ContactForm.js";
+import { Store } from '../Store';
//Image Import
import { Banner1 } from "ImportImages.js";
const Secao1 = styled.div`
- width: 100%;
- background-image: url(${Banner1});
- background-size: cover;
- background-position: bottom center;
- height: 250px;
- color: #fff;
- line-height: 1.1;
- text-align: center;
- padding-top: 120px;
-
- h2 {
- font-family: Pompiere, cursive;
- font-size: 52px;
+ width: 100%;
+ background-color: ${props => props.contrast === "" ? "" : "black"};
+ background-image: ${props => props.contrast === "" ? `url(${Banner1})` : ""};
+ background-size: cover;
+ background-position: bottom center;
+ height: 250px;
color: #fff;
- margin: 0;
- padding-left: 0;
- padding-right: 0;
- font-weight: 500;
- }
-
- h3 {
- margin-top: 20px;
- margin-bottom: 10px;
- font-family: Roboto, sans-serif;
- font-size: 30px;
- font-weight: lighter;
- }
+ line-height: 1.1;
+ text-align: center;
+ padding-top: 120px;
+
+ h2 {
+ font-family: Pompiere, cursive;
+ font-size: 52px;
+ color: #fff;
+ margin: 0;
+ padding-left: 0;
+ padding-right: 0;
+ font-weight: 500;
+ }
+
+ h3 {
+ margin-top: 20px;
+ margin-bottom: 10px;
+ font-family: Roboto, sans-serif;
+ font-size: 30px;
+ font-weight: lighter;
+ }
`;
const Secao2 = styled.div`
- height: 708px;
- background-color: #f4f4f4;
- display: flex;
- justify-content: center;
- align-items: center;
+ height: 708px;
+ background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
+ display: flex;
+ justify-content: center;
+ align-items: center;
`;
const Secao3 = styled.div`
- height: 127px;
- background-color: #f4f4f4;
- color: #666;
- line-height: 1.42857143;
- font-size: 18px;
- text-align: center;
- padding-top: 70px;
-
- p {
- margin: 0 0 10px 0;
- }
+ height: 127px;
+ background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ line-height: 1.42857143;
+ font-size: 18px;
+ text-align: center;
+ padding-top: 70px;
+
+ p {
+ margin: 0 0 10px 0;
+ }
`;
const Formulario = styled.div`
- background-color: #fff;
- box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
- padding: 40px;
- height: 560px;
- width: 480px;
- color: #666;
-
- form .inputBlock {
- margin-block: 22px;
-
- }
-
- form .inputBlock label {
- font-size: 14px;
- font-weight: bold;
- display: block;
-
- }
-
- form .inputBlock input {
- width: 100%;
- height: 32px;
- font-size: 14px;
- border: 0;
- border-bottom: 1px solid #eee;
-
- }
-
- form .inputBlock.Message input {
- height: 131px;
- }
-
- form buttom[type=submit] {
- width: 100%;
- border: 0;
- margin-top: 30px;
- background: #7d40e7
- border-radius: 2px;
- padding: 15px 20px;
- font-size: 16px;
- font-weight: bold;
- color: #fff;
- cursor: pointer;
- transition: background 0.5s;
-
- }
-
- form buttom[type=submit]:hover {
- background: #6931ac
- }
-
-
- h2 {
- font-size: 24px;
- font-weight: lighter;
- margin-bottom: 50px;
- margin-top: 20px;
- text-align: center;
-
- }
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(255,255,255,.12),0 1px 2px rgba(255,255,255,.24)"};
+ padding: 40px;
+ height: 560px;
+ width: 480px;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ border: ${props => props.contrast === "" ? "" : "1px solid white"};
+
+ form .inputBlock {
+ margin-block: 22px;
+
+ }
+
+ form .inputBlock label {
+ font-size: 14px;
+ font-weight: bold;
+ display: block;
+
+ }
+
+ form .inputBlock input {
+ width: 100%;
+ height: 32px;
+ font-size: 14px;
+ border: 0;
+ border-bottom: 1px solid #eee;
+
+ }
+
+ form .inputBlock.Message input {
+ height: 131px;
+ }
+
+ form buttom[type=submit] {
+ width: 100%;
+ border: 0;
+ margin-top: 30px;
+ background: #7d40e7
+ border-radius: 2px;
+ padding: 15px 20px;
+ font-size: 16px;
+ font-weight: bold;
+ color: #fff;
+ cursor: pointer;
+ transition: background 0.5s;
+
+ }
+
+ form buttom[type=submit]:hover {
+ background: #6931ac
+ }
+
+
+ h2 {
+ font-size: 24px;
+ font-weight: lighter;
+ margin-bottom: 50px;
+ margin-top: 20px;
+ text-align: center;
+
+ }
`;
function Contact(props) {
-
- useEffect(() => {
- window.scrollTo(0, 0)
- })
-
- return (
- <>
- <link
- href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto:300,400&display=swap"
- rel="stylesheet"
- />
- <Secao1>
- <h2>CONTATO</h2>
- <h3>Quer enviar uma mensagem?</h3>
- </Secao1>
-
- <Secao2>
- <Formulario noValidate autoComplete="off">
- <h2>
- Entre em contato para enviar dúvidas,
- <br />
- sugestões ou crÃticas
- </h2>
- <InputFormulario />
- </Formulario>
- </Secao2>
-
- <Secao3>
- <span>MEC - Ministério da Educação </span>
- <p>
- Endereço: Esplanada dos Ministérios Bloco L - Ed.Sede e Anexos. CEP:
- 70.047-900 - BrasÃlia/DF. Telefone: 0800 616161
- </p>
- </Secao3>
- </>
- );
+ const { state } = useContext(Store)
+ useEffect(() => {
+ window.scrollTo(0, 0)
+ })
+
+ return (
+ <div>
+ <link
+ href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto:300,400&display=swap"
+ rel="stylesheet"
+ />
+ <Secao1 contrast={state.contrast}>
+ <h2>CONTATO</h2>
+ <h3>Quer enviar uma mensagem?</h3>
+ </Secao1>
+
+ <Secao2 contrast={state.contrast}>
+ <Formulario noValidate autoComplete="off" contrast={state.contrast}>
+ <h2>
+ Entre em contato para enviar dúvidas,
+ <br />
+ sugestões ou crÃticas
+ </h2>
+ <InputFormulario contrast={state.contrast} />
+ </Formulario>
+ </Secao2>
+
+ <Secao3 contrast={state.contrast}>
+ <span>MEC - Ministério da Educação </span>
+ <p>
+ Endereço: Esplanada dos Ministérios Bloco L - Ed.Sede e Anexos. CEP:
+ 70.047-900 - BrasÃlia/DF. Telefone: 0800 616161
+ </p>
+ </Secao3>
+ </div>
+ );
}
export default Contact;
diff --git a/src/Pages/EditLearningObjectPage.js b/src/Pages/EditLearningObjectPage.js
index e85f508c..a8325bc0 100644
--- a/src/Pages/EditLearningObjectPage.js
+++ b/src/Pages/EditLearningObjectPage.js
@@ -187,13 +187,11 @@ export default function EditLearningObjectPage (props) {
const acceptFile = (file) => {
const objectURL = URL.createObjectURL(file)
- console.log('acceptFile: ', file)
setTempUrl(objectURL)
setThumbnailStage('editing')
}
const updateThumb = (newThumbnail) => {
setThumbnail(newThumbnail)
- console.log('updateThumb: ', thumbnail)
}
@@ -227,13 +225,13 @@ export default function EditLearningObjectPage (props) {
const chooseRenderStageThumbnail = () => {
switch(thumbnailStage) {
case 'uploading':
- return (<LoadingDiv/>)
+ return (<LoadingDiv contrast={state.contrast}/>)
case 'done':
- return (<DisplayThumbnail acceptFile={acceptFile} thumbnail={`${apiDomain}` + thumbnail} onEditPage={true} handleDelete={handleDeleteThumbnail}/>)
+ return (<DisplayThumbnail contrast={state.contrast} acceptFile={acceptFile} thumbnail={`${apiDomain}` + thumbnail} onEditPage={true} handleDelete={handleDeleteThumbnail}/>)
case 'editing':
- return (<EditThumbnail finalizeThumb={finalizeThumb} tempImgURL={tempUrl} updateThumb={updateThumb}/>)
+ return (<EditThumbnail contrast={state.contrast} finalizeThumb={finalizeThumb} tempImgURL={tempUrl} updateThumb={updateThumb}/>)
default :
- return (<DragAndDropThumbnail acceptFile={acceptFile} onEditPage={true}/>)
+ return (<DragAndDropThumbnail contrast={state.contrast} acceptFile={acceptFile} onEditPage={true}/>)
}
}
@@ -258,14 +256,14 @@ export default function EditLearningObjectPage (props) {
{
!loading ?
(
- <Background>
+ <Background contrast={state.contrast}>
<div className="container">
<Grid container spacing={2}>
<Grid item md={4} xs={12}>
- <UploadFileWrapper draftID={recursoId} prevFile={learningObject.attachments ? learningObject.attachments[0] : null}/>
+ <UploadFileWrapper contrast={state.contrast} draftID={recursoId} prevFile={learningObject.attachments ? learningObject.attachments[0] : null}/>
</Grid>
<Grid item md={8} xs={12}>
- <InfoBox>
+ <InfoBox contrast={state.contrast}>
<form>
<div className="cabecalho">
<h2>Editar Recurso</h2>
@@ -277,22 +275,22 @@ export default function EditLearningObjectPage (props) {
<Grid container style={{paddingLeft : "15px", paddingRight : "15px"}}>
<Grid item xs={12} style={{paddingBottom : "40px"}}>
- <NewTitle draftID={learningObject.id} initialValue={learningObject.name}
+ <NewTitle contrast={state.contrast} draftID={learningObject.id} initialValue={learningObject.name}
onBlurCallback={onBlurCallback}
/>
</Grid>
<Grid item xs={12} style={{paddingBottom : "40px"}}>
- <SobreORecurso draftID={learningObject.id} initialValue={learningObject.description} onBlurCallback={onBlurCallback}/>
+ <SobreORecurso contrast={state.contrast} draftID={learningObject.id} initialValue={learningObject.description} onBlurCallback={onBlurCallback}/>
</Grid>
<Grid item xs={12} style={{paddingBottom : "40px"}}>
- <Keywords draftID={learningObject.id} initialValue={learningObject.tags !== undefined ? learningObject.tags.map((tag) => tag.name) : null}
+ <Keywords contrast={state.contrast} draftID={learningObject.id} initialValue={learningObject.tags !== undefined ? learningObject.tags.map((tag) => tag.name) : null}
onBlurCallback={onBlurCallback}/>
</Grid>
<Grid item xs={12} style={{paddingBottom : "40px"}}>
- <Autor draftID={learningObject.id}
+ <Autor contrast={state.contrast} draftID={learningObject.id}
initialValue={
learningObject.author === state.currentUser.name ?
0 : 1
@@ -306,44 +304,44 @@ export default function EditLearningObjectPage (props) {
</Grid>
<Grid item xs={12} style={{paddingBottom : "40px"}}>
- <TipoDeRecurso objTypes={objTypes} draftID={learningObject.id}
+ <TipoDeRecurso contrast={state.contrast} objTypes={objTypes} draftID={learningObject.id}
initialValue={learningObject.object_type !== undefined && learningObject.object_type !== null ? objTypes.filter((type) => type.name === learningObject.object_type)[0].id : null} onBlurCallback={onBlurCallback} />
</Grid>
<Grid item xs={12} style={{paddingBottom : "40px"}}>
- <Idioma languages={languages} draftID={learningObject.id}
+ <Idioma contrast={state.contrast} languages={languages} draftID={learningObject.id}
initialValue={learningObject.language !== undefined ? learningObject.language.map((language) => language.name) : null} initialIDValues={learningObject.language !== undefined ? learningObject.language.map((language) => language.id) : null}
onBlurCallback={onBlurCallback} />
</Grid>
<Grid item xs={12} style={{paddingBottom : "40px"}}>
- <EducationalStage draftID={learningObject.id} eduStages={eduStages} initialValue={learningObject.educational_stages !== null ? learningObject.educational_stages.map((stage) => String(stage.id)) : null} onBlurCallback={onBlurCallback}
+ <EducationalStage contrast={state.contrast} draftID={learningObject.id} eduStages={eduStages} initialValue={learningObject.educational_stages !== null ? learningObject.educational_stages.map((stage) => String(stage.id)) : null} onBlurCallback={onBlurCallback}
/>
</Grid>
- <SubjectsAndThemes draftId={learningObject.id} subjects={subjects} initialValue={learningObject.subjects !== null ? learningObject.subjects.map(subject => String(subject.id)) : null} onBlurCallback={onBlurCallback}/>
+ <SubjectsAndThemes contrast={state.contrast} draftId={learningObject.id} subjects={subjects} initialValue={learningObject.subjects !== null ? learningObject.subjects.map(subject => String(subject.id)) : null} onBlurCallback={onBlurCallback}/>
<Grid item xs={12} style={{paddingBottom : "40px"}}>
- <Licenca draftID={learningObject.id} initialValue={learningObject.license ? learningObject.license.id : null} onBlurCallback={onBlurCallback}/>
+ <Licenca contrast={state.contrast} draftID={learningObject.id} initialValue={learningObject.license ? learningObject.license.id : null} onBlurCallback={onBlurCallback}/>
</Grid>
<Grid item xs={12}>
<div style={{display : "flex", justifyContent : "center"}}>
- <GreyButton onClick={handleDelete}>
- <span className="button-text">
+ <GreyButton contrast={state.contrast} onClick={handleDelete}>
+ <span className="button-text">
EXCLUIR
- </span>
- </GreyButton>
+ </span>
+ </GreyButton>
- <GreyButton onClick={props.history.goBack}>
- <span className="button-text">
+ <GreyButton contrast={state.contrast} onClick={props.history.goBack}>
+ <span className="button-text">
CANCELAR
- </span>
- </GreyButton>
+ </span>
+ </GreyButton>
- <OrangeButton onClick={() => {handleUpdateInfo()}}>
+ <OrangeButton contrast={state.contrast} onClick={() => {handleUpdateInfo()}}>
SALVAR ALTERAÇÕES
- </OrangeButton>
+ </OrangeButton>
{/*
learningObject.state === "draft" &&
@@ -354,11 +352,11 @@ export default function EditLearningObjectPage (props) {
{
checkAccessLevel("partner") ?
(
- <OrangeButton onClick={() => {handleUpdateInfo(); handlePost()}}>PUBLICAR RECURSO</OrangeButton>
+ <OrangeButton contrast={state.contrast} onClick={() => {handleUpdateInfo(); handlePost()}}>PUBLICAR RECURSO</OrangeButton>
)
:
(
- <OrangeButton onClick={() => {handleUpdateInfo(); handleSubmit()}}>SUBMETER RECURSO</OrangeButton>
+ <OrangeButton contrast={state.contrast} onClick={() => {handleUpdateInfo(); handleSubmit()}}>SUBMETER RECURSO</OrangeButton>
)
}
@@ -381,7 +379,7 @@ export default function EditLearningObjectPage (props) {
)
:
(
- <LoadingSpinner text={"CARREGANDO"}/>
+ <LoadingSpinner contrast={state.contrast} text={"CARREGANDO"}/>
)
}
</React.Fragment>
diff --git a/src/Pages/EditProfilePage.js b/src/Pages/EditProfilePage.js
index bcdb7711..56a72c8c 100644
--- a/src/Pages/EditProfilePage.js
+++ b/src/Pages/EditProfilePage.js
@@ -128,31 +128,34 @@ export default function EditProfilePage(props) {
/>
<CustomizedBreadcrumbs
+ contrast={state.contrast}
values={["Minha área", "Configurações da Conta", tabs[tabValue]]}
/>
<MainContainerDiv container spacing={3} justify="center" align="center">
<Grid item xs={12} md={3} style={{ fontFamily: "Roboto" }} >
<Paper elevation={3}>
- <ConfiguracoesMenu>
- <h4 style={{ marginTop: "10px", fontFamily: "inherit", display: "flex", justifyContent: "center" }}>
+ <ConfiguracoesMenu contrast={state.contrast}>
+ <h4 className="title">
Configurações da Conta
</h4>
<StyledTabs
+ contrast={state.contrast}
orientation="vertical"
variant="fullWidth"
+ textColor="primary"
value={tabValue}
onChange={handleChangeTab}
TabIndicatorProps={{ style: { display: "none" } }}
>
- <StyledTab label={tabs[0]} />
- <StyledTab label={tabs[1]} />
- <StyledTab label={tabs[2]} />
+ <StyledTab contrast={state.contrast} label={tabs[0]} />
+ <StyledTab contrast={state.contrast} label={tabs[1]} />
+ <StyledTab contrast={state.contrast} label={tabs[2]} />
</StyledTabs>
</ConfiguracoesMenu>
</Paper>
</Grid>
- <TabContentDiv item xs={12} md={9}>
+ <TabContentDiv contrast={state.contrast} item xs={12} md={9}>
<Paper elevation={3} style={{ width: "100%" }}>
{tabValue === 0 && <TabPanelEditarPerfil updateUserInfo={updateUserInfo} />}
{tabValue === 1 && <TabPanelSolicitarContaProfessor />}
@@ -162,18 +165,36 @@ export default function EditProfilePage(props) {
/>}
</TabContentDiv>
</MainContainerDiv>
- </div>
+ </Main>
)
}
+const Main = styled.div`
+ background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+`
+
const TabContentDiv = styled(Grid)`
+
+ .subtitle{
+ display: flex;
+ justify-content: flex-start;
+ font-size: 18px;
+ color: ${props => props.contrast === "" ? "" : "white"};
+ }
+
+ .title{
+ font-weight: 300;
+ color: ${props => props.contrast === "" ? "" : "white"};
+ }
.card-config {
padding : 40px;
margin : 20px 0 20px 10px;
border-radius : 3px;
box-shadow : 0 0 5px 0rgba(0,0,0,.25);
- background-color : #fff;
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ border: ${props => props.contrast === "" ? 0 : "1px solid white"};
text-align : start;
margin-left : auto;
margin-right : auto;
@@ -217,19 +238,32 @@ const TabContentDiv = styled(Grid)`
font-weight : 500;
line-height : 1.1;
}
+
+ .link {
+ text-align: flex-start;
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ }
`
const StyledTabs = styled(Tabs)`
display : flex;
justify-content : center;
- .Mui-selected {
- background-color : #f4f4f4;
+ .MuiTab-textColorPrimary{
+ color: ${props => props.contrast === "" ? "#666" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ font-weight: 400;
+ }
+ .MuiTab-textColorPrimary.Mui-selected {
+ color: ${props => props.contrast === "" ? "black" : "yellow"};
+ text-decoration: none;
+ font-weight: 600;
}
`
const StyledTab = styled(Tab)`
&:hover {
- background-color : #6666663d;
+ background-color: ${props => props.contrast === "" ? "#6666663d" : "rgba(255,255,0,0.24)"};
}
`
@@ -237,7 +271,16 @@ const ConfiguracoesMenu = styled.div`
margin : 20px 0 20px 0;
border-radius : 3px;
padding : 20px 0;
- background-color : #fff;
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ border: ${props => props.contrast === "" ? 0 : "1px solid white"};
+
+ .title{
+ margin-top: 10px;
+ font-family: inherit;
+ display: flex;
+ justify-content: center;
+ color: ${props => props.contrast === "" ? "" : "white"};
+ }
`
const MainContainerDiv = styled(Grid)`
diff --git a/src/Pages/FormationMaterialPage.js b/src/Pages/FormationMaterialPage.js
index 79707461..7f6c27cd 100644
--- a/src/Pages/FormationMaterialPage.js
+++ b/src/Pages/FormationMaterialPage.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, { useRef } from 'react';
+import React, { useRef, useContext } from 'react';
import styled from 'styled-components';
import { Grid } from '@material-ui/core';
import FormationMaterialHeader from '../Components/FormationMaterialHeader.js';
@@ -24,18 +24,20 @@ import TopicList from '../Components/TopicList.js';
import TopicFooter from '../Components/TopicFooter.js';
import colecoes_obj from '../Components/FormationMaterialsResources/formationMaterials.js';
import Breadcrumbs from "@material-ui/core/Breadcrumbs";
-import {Link} from "react-router-dom"
+import { Link } from "react-router-dom";
+import { Store } from '../Store';
export default function FormationMaterialPage(props) {
- const colecao = props.location.pathname === "/colecao";
+ const colecao = window.location.pathname.split('?')[0] === "/colecao";
const colecoes = colecoes_obj();
+ const { state } = useContext(Store);
const colecao_id = Number(
colecao ?
- props.location.search.split('=')[1]
- : props.location.search.split('&')[0].split('=')[1]
+ window.location.search.split('=')[1]
+ : window.location.search.split('&')[0].split('=')[1]
);
- const topico_id = Number(colecao ? 0 : props.location.search.split('&')[1].split('=')[1]);
+ const topico_id = Number(colecao ? 0 : window.location.search.split('&')[1].split('=')[1]);
const colecao_obj = ((id) => {
for (const c in colecoes) {
@@ -58,12 +60,10 @@ export default function FormationMaterialPage(props) {
window.scrollTo(0, topic_list_ref.current.offsetTop);
}
- console.log(colecao_obj);
-
return (
- <Background>
+ <Background contrast={state.contrast}>
<BreadCrumbsDiv>
- <StyledBreadCrumbs>
+ <StyledBreadCrumbs contrast={state.contrast}>
<Link to="/">Página Inicial</Link>
<span>
{
@@ -72,7 +72,7 @@ export default function FormationMaterialPage(props) {
</span>
</StyledBreadCrumbs>
</BreadCrumbsDiv>
- <MainContainer>
+ <MainContainer contrast={state.contrast}>
<Grid container
direction="row"
justify="flex-start"
@@ -80,6 +80,7 @@ export default function FormationMaterialPage(props) {
>
<Grid item xs={12}>
<FormationMaterialHeader
+ contrast={state.contrast}
colecao={colecao}
colecao_obj={colecao_obj}
topico_obj={topico_obj}
@@ -88,6 +89,7 @@ export default function FormationMaterialPage(props) {
</Grid>
<Grid item xs={12}>
<FormationMaterialDescription
+ contrast={state.contrast}
colecao={colecao}
colecao_obj={colecao_obj}
topico_obj={topico_obj}
@@ -97,6 +99,7 @@ export default function FormationMaterialPage(props) {
{
colecao ?
<TopicList
+ contrast={state.contrast}
topicos={colecao_obj.topics}
colecao_id={colecao_id}
/>
@@ -110,6 +113,7 @@ export default function FormationMaterialPage(props) {
<div></div>
:
<TopicFooter
+ contrast={state.contrast}
topic_name={colecao_obj.topic_name}
src={colecao_obj.img}
colecao_name={colecao_obj.name} />
@@ -119,12 +123,13 @@ export default function FormationMaterialPage(props) {
}
const Background = styled.div`
- background-color: #f4f4f4;
+ background: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
`
const MainContainer = styled.div`
margin-left: auto;
margin-right: auto;
padding : 0;
+ background: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
@media screen and (min-width: 768px) {
width : 750px;
@@ -141,11 +146,11 @@ const StyledBreadCrumbs = styled(Breadcrumbs)`
justify-content: flex-start;
max-width: 1170px;
span {
- color: #a5a5a5;
+ color: ${props => props.contrast === "" ? "#a5a5a5" : "white"};
}
a {
- color: #00bcd4;
- text-decoration: none;
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
}
`
diff --git a/src/Pages/HelpCenter.js b/src/Pages/HelpCenter.js
index 162dec27..f72b8c48 100644
--- a/src/Pages/HelpCenter.js
+++ b/src/Pages/HelpCenter.js
@@ -16,11 +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, { useEffect } from 'react';
+import React, { useEffect, useContext } from 'react';
import styled from 'styled-components';
import Grid from '@material-ui/core/Grid';
import { Link } from 'react-router-dom';
-
+import { Store } from '../Store';
import CardPublicando from '../Components/HelpCenter/Cards/CardPublicando';
import CardEncontrando from '../Components/HelpCenter/Cards/CardEncontrando';
import CardParticipando from '../Components/HelpCenter/Cards/CardParticipando';
@@ -31,6 +31,7 @@ import { Banner3 } from "ImportImages.js";
function HelpCenter(props) {
+ const { state } = useContext(Store)
let windowWidth = window.innerWidth
useEffect(() => { window.scrollTo(0, 0) }, [])
@@ -39,7 +40,7 @@ function HelpCenter(props) {
<div style={{ backgroundColor: "#f4f4f4" }}>
<link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:300,400&display=swap" rel="stylesheet" />
- <Secao1>
+ <Secao1 contrast={state.contrast}>
<div className="container">
{
windowWidth > 420 ?
@@ -55,7 +56,7 @@ function HelpCenter(props) {
</div>
</Secao1>
- <Secao2>
+ <Secao2 contrast={state.contrast}>
<div className="container">
<div className="container-secao">
<div className="conteudo">
@@ -65,26 +66,26 @@ function HelpCenter(props) {
<div>
<Grid container justify="center" style={{ margin: -8 }}>
<Grid item xs={12} md={5} style={{ padding: 8 }}>
- <CardPublicando />
+ <CardPublicando contrast={state.contrast} />
</Grid>
<Grid item xs={12} md={5} style={{ padding: 8 }}>
- <CardEncontrando />
+ <CardEncontrando contrast={state.contrast} />
</Grid>
<Grid item xs={12} md={5} style={{ padding: 8 }}>
- <CardParticipando />
+ <CardParticipando contrast={state.contrast} />
</Grid>
<Grid item xs={12} md={5} style={{ padding: 8 }}>
- <CardGerenciando />
+ <CardGerenciando contrast={state.contrast} />
</Grid>
</Grid>
</div>
</div>
</div>
</div>
-
</Secao2>
+
<div style={{ width: "100%" }}>
- <Secao3>
+ <Secao3 contrast={state.contrast}>
<Grid style={{ height: "100%" }} container justify="center">
<Grid style={{ backgroundColor: "#333", paddingInline: "0" }} item xs={12} md={6}>
<iframe title="VÃdeo página ajuda" src="https://player.vimeo.com/video/231609051" width="100%" height="100%" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
@@ -144,7 +145,7 @@ function HelpCenter(props) {
</Secao3>
</div>
- <Secao4>
+ <Secao4 contrast={state.contrast}>
<div className="container">
<div className="conteudo">
<h2>Não encontrou o que você precisa?</h2>
@@ -164,7 +165,7 @@ export default HelpCenter;
const Secao1 = styled.div`
- background-color:#00bcd4;
+ background-color: ${props => props.contrast === "" ? "#00bcd4" : "black"};
text-align: center;
width: 100%;
.container {
@@ -214,10 +215,9 @@ const Secao1 = styled.div`
`
const Secao2 = styled.div`
- background-color:#f4f4f4;
+ background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
text-align: center;
- margin-bottom: 20px;
- padding-bottom: 50px
+ padding-bottom: 50px;
width: 100%;
.container {
height: 100%;
@@ -236,14 +236,14 @@ const Secao2 = styled.div`
h2 {
font-size: 30px;
font-weight: lighter;
- color:#666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
margin: 0;
}
}
.card-ajuda {
height: 360px;
- margin-bottom: 20px
+ margin-bottom: 20px;
.card {
@@ -321,9 +321,9 @@ const Secao2 = styled.div`
const Secao3 = styled.div`
padding: 0;
text-align: center;
- background-color: #fff;
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
margin-inline: auto;
- color: rgba(0,0,0,0.87);
+ color: ${props => props.contrast === "" ? "rgba(0,0,0,0.87)" : "white"};
width: 100%;
.links {
font-size: 15px;
@@ -332,10 +332,12 @@ const Secao3 = styled.div`
margin: 0 0 10px;
line-height: 1.42857143;
a {
- color: #666;
- text-decoration: none;
+ color: ${props => props.contrast === "" ? "#666" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ font-weight: lighter;
:hover {
- color: #000;
+ color: ${props => props.contrast === "" ? "#000" : "yellow"};
+ font-weight: 500;
}
}
}
@@ -361,7 +363,7 @@ const Secao4 = styled.div`
width: 100%;
.container {
height: 100%;
- color: #a5a5a5;
+ background-color: ${props => props.contrast === "" ? "" : "black"};
margin-inline: auto;
display: flex;
flex-direction: column;
@@ -373,7 +375,7 @@ const Secao4 = styled.div`
h2 {
font-size: 24px;
font-weight: lighter;
- color:#666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
margin-top: 20px;
margin-bottom: 10px;
text-align: center;
@@ -381,15 +383,14 @@ const Secao4 = styled.div`
span {
font-size: 15px;
- color:#777;
+ color: ${props => props.contrast === "" ? "#777" : "white"};
text-align: center;
-
}
button {
margin-top: 25px;
- color: rgba(255,255,255,0.87);
- background-color: rgb(255,127,0);
+ color: ${props => props.contrast === "" ? "rgba(255,255,255,0.87)" : "yellow"};
+ background-color: ${props => props.contrast === "" ? "rgb(255,127,0)" : "black"};
box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
outline: none;display: inline-block;
position: relative;
@@ -404,7 +405,7 @@ const Secao4 = styled.div`
border-radius: 3px;
box-sizing: border-box;
user-select: none;
- border: 0;
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"};
padding: 0 6px;
margin: 6px 8px;
white-space: nowrap;
@@ -418,9 +419,12 @@ const Secao4 = styled.div`
overflow: hidden;
transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1);
letter-spacing: .01em;
+ :hover{
+ background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24)"};
+ }
a {
- text-decoration: none;
- color: #fff;
+ color: ${props => props.contrast === "" ? "rgba(255,255,255,0.87)" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
}
}
}
diff --git a/src/Pages/MaterialPage.js b/src/Pages/MaterialPage.js
index 9b243b8b..4ec7369a 100644
--- a/src/Pages/MaterialPage.js
+++ b/src/Pages/MaterialPage.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";
import { Col, Row, Container } from "react-grid-system";
import { Carousel } from "react-responsive-carousel";
import MaterialCard from "../Components/MaterialCard";
@@ -25,77 +25,84 @@ import ExpandedMaterial from "../Components/ExpandedMaterials";
import styled from "styled-components";
import Breadcrumbs from "@material-ui/core/Breadcrumbs";
import { Link } from "react-router-dom";
+import { Store } from '../Store';
const MateriaPage = () => {
- const materials = colecoes_obj();
+ const materials = colecoes_obj();
+ const { state } = useContext(Store);
+ const [currMaterial, setCurrMaterial] = useState({
+ open: false,
+ material: {},
+ });
- const [currMaterial, setCurrMaterial] = useState({
+ const HandleExpandMaterial = (id) => {
+ if (id !== currMaterial.material.id)
+ setCurrMaterial({
+ open: true,
+ material: { ...materials[id] },
+ });
+ else
+ setCurrMaterial({
open: false,
material: {},
- });
+ });
+ };
- const HandleExpandMaterial = (id) => {
- if (id !== currMaterial.material.id)
- setCurrMaterial({
- open: true,
- material: { ...materials[id] },
- });
- else
- setCurrMaterial({
- open: false,
- material: {},
- });
- };
-
- return (
- <>
- <link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap" rel="stylesheet" />
- <BreadCrumbsDiv>
- <StyledBreadCrumbs>
- <Link to="/">Página Inicial</Link>
- <span>Materias de Formação</span>
- </StyledBreadCrumbs>
- </BreadCrumbsDiv>
- <StyledBox>
- <StyledTitle>
- Materias de formação
- </StyledTitle>
- </StyledBox>
- <MainContainer>
- <Container style={{ padding: "20px" }}>
- <Carousel
- style={{ padding: "20px" }}
- showThumbs={false}
- showStatus={false}
- >
- <Row>
- {materials.map((material, index) => {
- return (
- <Col md={3} key={index}>
- <MaterialCard
- name={material.name}
- thumb={material.img}
- score={material.score}
- modules={material.topics}
- handleExpand={HandleExpandMaterial}
- id={index}
- />
- </Col>
- );
- })}
- </Row>
- </Carousel>
- {currMaterial.open ? (
- <ExpandedMaterial material={currMaterial.material} />
- ) : null}
- </Container>
- </MainContainer>
- </>
- );
+ return (
+ <MainPage contrast={state.contrast}>
+ <link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap" rel="stylesheet" />
+ <BreadCrumbsDiv>
+ <StyledBreadCrumbs contrast={state.contrast}>
+ <Link to="/">Página Inicial</Link>
+ <span>Materias de Formação</span>
+ </StyledBreadCrumbs>
+ </BreadCrumbsDiv>
+ <StyledBox contrast={state.contrast}>
+ <StyledTitle contrast={state.contrast}>
+ Materias de formação
+ </StyledTitle>
+ </StyledBox>
+ <MainContainer contrast={state.contrast}>
+ <Container style={{ padding: "20px" }}>
+ <Carousel
+ style={{ padding: "20px" }}
+ showThumbs={false}
+ showStatus={false}
+ >
+ <Row>
+ {materials.map((material, index) => {
+ return (
+ <Col md={3} key={index}>
+ <MaterialCard
+ contrast={state.contrast}
+ name={material.name}
+ thumb={material.img}
+ score={material.score}
+ modules={material.topics}
+ handleExpand={HandleExpandMaterial}
+ id={index}
+ />
+ </Col>
+ );
+ })}
+ </Row>
+ </Carousel>
+ {currMaterial.open ? (
+ <ExpandedMaterial contrast={state.contrast} material={currMaterial.material} />
+ ) : null}
+ </Container>
+ </MainContainer>
+ </MainPage>
+ );
};
export default MateriaPage;
+const MainPage = styled.div`
+ background: ${props => props.contrast === "" ? "" : "black"};
+`
+
const MainContainer = styled.div`
+ background: ${props => props.contrast === "" ? "" : "black"};
margin-left: auto;
margin-right: auto;
padding: 0;
@@ -116,11 +123,11 @@ const StyledBreadCrumbs = styled(Breadcrumbs)`
justify-content: flex-start;
max-width: 1170px;
span {
- color: #a5a5a5;
+ color: ${props => props.contrast === "" ? "#a5a5a5" : "white"};
}
a {
- color: #00bcd4;
- text-decoration: none;
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
}
`
@@ -130,16 +137,17 @@ const BreadCrumbsDiv = styled.div`
`
const StyledBox = styled.div`
- background-color: #fff;
+ background: ${props => props.contrast === "" ? "#fff" : "black"};
box-shadow: 1px 1px 3px rgba(0,0,0,.12), 1px 1px 2px rgba(0,0,0,.24);
+ border: ${props => props.contrast === "" ? "0" : "1px solid white"};
padding: 30px;
margin-bottom: 30px;
text-align: center;
`
const StyledTitle = styled.span`
text-align: center;
- color: #e81f4f;
+ color: ${props => props.contrast === "" ? "#e81f4f" : "white"};
font-size: 26px;
font-family: "Roboto", sans-serif;
- font-weight: 100;
+ font-weight: lighter;
`
\ No newline at end of file
diff --git a/src/Pages/PageNotFound.js b/src/Pages/PageNotFound.js
index 7e9a5b0c..291db661 100644
--- a/src/Pages/PageNotFound.js
+++ b/src/Pages/PageNotFound.js
@@ -16,29 +16,46 @@ 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 { Store } from '../Store'
import styled from "styled-components";
export default function PageNotFound (props) {
+ const { state } = useContext(Store);
+
return (
- <div>
+ <ContentDiv contrast={state.contrast} >
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,400,500&display=swap"
rel="stylesheet"
/>
- <StyledDiv><span style={{ fontSize: '50px' }}>Desculpe</span></StyledDiv>
- <StyledDiv><span style={{ fontSize: '30px' }}>Não foi possÃvel encontrar a página que você está procurando.</span></StyledDiv>
- <StyledDiv><a href='/'><span style={{ fontSize: '20px' }}>Voltar para a página inicial</span></a></StyledDiv>
- </div>
+ <StyledDiv>
+ <span style={{ fontSize: '50px' }}>Desculpe</span>
+ </StyledDiv>
+ <StyledDiv>
+ <span style={{ fontSize: '30px' }}>Não foi possÃvel encontrar a página que você está procurando.</span>
+ </StyledDiv>
+ <StyledDiv>
+ <a href='/'><span style={{ fontSize: '20px' }}>Voltar para a página inicial</span></a>
+ </StyledDiv>
+ </ContentDiv>
)
}
+const ContentDiv = styled('div')`
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ color: ${props => props.contrast === "" ? "#666" : "white"} !important;
+ a {
+ color: ${props => props.contrast === "" ? "" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline yellow"} !important;
+ }
+`
+
const StyledDiv = styled('div')`
width: 100%;
- margin-top: 70px;
- margin-bottom: 70px;
+ padding-top: 70px;
+ padding-bottom: 70px;
justify-content : space-evenly;
display: flex;
- color: #757575;
text-align:center;
`
\ No newline at end of file
diff --git a/src/Pages/PageProfessor.js b/src/Pages/PageProfessor.js
index 96cd46bb..c77fe1d5 100644
--- a/src/Pages/PageProfessor.js
+++ b/src/Pages/PageProfessor.js
@@ -1,18 +1,18 @@
-import React, {useState,useContext} from 'react'
-import {Store} from '../Store.js'
+import React, { useState, useContext } from 'react'
+import { Store } from '../Store.js'
import Paper from '@material-ui/core/Paper';
import PartOne from '../Components/PageProfessorComponents/PartOne.js'
import PartTwo from '../Components/PageProfessorComponents/PartTwo.js'
import PartThree from '../Components/PageProfessorComponents/PartThree.js'
import SuccessfulRequest from '../Components/PageProfessorComponents/SuccessfulRequest.js'
import ModalConfirmarProfessor from '../Components/PageProfessorComponents/ModalConfirmarProfessor.js'
-import {postRequest} from '../Components/HelperFunctions/getAxiosConfig'
+import { postRequest } from '../Components/HelperFunctions/getAxiosConfig'
-export default function PageProfessor (props) {
- const {state} = useContext(Store)
+export default function PageProfessor(props) {
+ const { state } = useContext(Store)
const [modalOpen, toggleModal] = useState(false)
const handleModal = () => {
- toggleModal(!modalOpen) ;
+ toggleModal(!modalOpen);
}
const redirect = () => {
@@ -24,39 +24,36 @@ export default function PageProfessor (props) {
teacher_cpf: '',
school_phone: '',
school_name: '',
- school_city : '',
- school_uf : {
- abbreviation : '',
- name : ''
+ school_city: '',
+ school_uf: {
+ abbreviation: '',
+ name: ''
},
inep_code: ''
}
)
- const [stepper, handleStepper] = useState(
- [ {value : '1', selected : true}, {value : '2', selected : false}, {value : '3', selected : false}, {value : '4', selected : false}]
- )
- const toggleStepper = (selected1, selected2, selected3, selected4) => {
- handleStepper(
- [
- {value : '1', selected : selected1},
- {value : '2', selected : selected2},
- {value : '3', selected : selected3},
- {value : '4', selected : selected4}
- ]
- )
+ const [activeStep, setActiveStep] = useState(0);
+
+ const incrementStep = () => {
+ setActiveStep((previous) => previous + 1);
+ }
+
+ const decrementStep = () => {
+ setActiveStep((previous) => previous - 1);
}
const handleBuscarParteUm = (ufAbbreviation, ufName, nomeMunicipio, inep) => {
- setRegisterInformation({...registerInformation,
- school_uf : {
+ setRegisterInformation({
+ ...registerInformation,
+ school_uf: {
abbreviation: (ufAbbreviation ? ufAbbreviation : ''),
- name : (ufName ? ufName : '')
+ name: (ufName ? ufName : '')
},
- school_city : (nomeMunicipio ? nomeMunicipio : ''),
- inep_code : (inep ? inep : '')
+ school_city: (nomeMunicipio ? nomeMunicipio : ''),
+ inep_code: (inep ? inep : '')
})
- toggleStepper(false, true, false, false)
+ incrementStep()
}
const handleBuscarParteDois = (city_name, inep, school_name, state_name) => {
@@ -64,20 +61,22 @@ export default function PageProfessor (props) {
const prev_state_name = registerInformation.school_uf.name
const prev_city_name = registerInformation.school_city.name
- setRegisterInformation({...registerInformation,
- school_uf : {
- abbreviation : uf_abbreviation,
+ setRegisterInformation({
+ ...registerInformation,
+ school_uf: {
+ abbreviation: uf_abbreviation,
name: (state_name ? state_name : prev_state_name)
},
- school_city :(city_name ? city_name : prev_city_name),
+ school_city: (city_name ? city_name : prev_city_name),
school_name: (school_name ? school_name : ''),
- inep_code : (inep ? inep : '')
+ inep_code: (inep ? inep : '')
})
- toggleStepper(false, false, true, false)
+ incrementStep();
}
const handleParteTres = (phone, cpf) => {
- setRegisterInformation({...registerInformation,
+ setRegisterInformation({
+ ...registerInformation,
teacher_cpf: (cpf ? cpf : ''),
school_phone: (phone ? phone : ''),
})
@@ -88,74 +87,74 @@ export default function PageProfessor (props) {
props.history.push('/perfil/atualizacoes')
}
- function handleSuccessfulSubmit (data) {
+ function handleSuccessfulSubmit(data) {
toggleModal()
- toggleStepper(false, false, false, true)
+ incrementStep();
}
const handleFinalSubmit = () => {
const url = `/users/teacher_request`
const payload = {
- city : registerInformation.school_city.name,
- cpf : registerInformation.teacher_cpf,
- inep_id : registerInformation.inep_code,
- phone : registerInformation.school_phone,
- school : registerInformation.school_name,
- uf : registerInformation.school_uf.name
+ city: registerInformation.school_city,
+ cpf: registerInformation.teacher_cpf.toString(),
+ inep_id: registerInformation.inep_code.toString(),
+ phone: registerInformation.school_phone.toString(),
+ school: registerInformation.school_name,
+ uf: registerInformation.school_uf.name,
}
- postRequest(url, payload, handleSuccessfulSubmit, (error) =>{console.log(error)})
+ postRequest(url, payload, handleSuccessfulSubmit, (error) => { console.log(error) })
}
return (
<>
- {
- state.userAgreedToPublicationTerms?
- (
- <>
- <ModalConfirmarProfessor open={modalOpen} handleClose={handleModal}
- info={registerInformation} confirmar = {() => {handleFinalSubmit()}}
- cancelar = {() => {toggleModal()}}
- />
- <div style={{backgroundColor:"#f4f4f4", color:"#666"}}>
- <div style={{display: "flex", justifyContent:"center", paddingTop:"5vh", paddingBottom:"5vh"}}>
- <Paper elevation={3} style= {{width:"max-content"}}>
- <div style={{paddingRight:"15px", paddingLeft:"15px"}}>
- {stepper[0].selected &&
- <PartOne stepper={stepper} handleBuscar={handleBuscarParteUm}
- handleCancelar={handleCancelar}
- />
- }
- {stepper[1].selected &&
- <PartTwo stepper={stepper}
- info={registerInformation} goBack={toggleStepper}
- handleCancelar={handleCancelar} handleBuscar={handleBuscarParteDois}
- />
- }
- {stepper[2].selected &&
- <PartThree stepper={stepper} goBack={toggleStepper}
- handleCancelar={handleCancelar} info={registerInformation}
- handleSubmit={handleParteTres}
- />
- }
- {
- stepper[3].selected &&
- <SuccessfulRequest email={state.currentUser.email} history={props.history}/>
- }
- </div>
- </Paper>
+ {
+ state.userAgreedToPublicationTerms ?
+ (
+ <>
+ <ModalConfirmarProfessor contrast={state.contrast} open={modalOpen} handleClose={handleModal}
+ info={registerInformation} confirmar={() => { handleFinalSubmit() }}
+ cancelar={() => { toggleModal() }}
+ />
+ <div style={state.contrast === "" ? { backgroundColor: "#f4f4f4", color: "#666" } : { backgroundColor: "black", color: "white" }}>
+ <div style={{ display: "flex", justifyContent: "center", paddingTop: "5vh", paddingBottom: "5vh" }}>
+ <Paper elevation={3} style={state.contrast === "" ? { width: "max-content" } : { width: "max-content", backgroundColor: "black", color: "white", border: '1px solid white' }}>
+ <div style={{ paddingRight: "15px", paddingLeft: "15px" }}>
+ {activeStep === 0 &&
+ <PartOne contrast={state.contrast} activeStep={activeStep} handleBuscar={handleBuscarParteUm}
+ handleCancelar={handleCancelar}
+ />
+ }
+ {activeStep === 1 &&
+ <PartTwo activeStep={activeStep} contrast={state.contrast}
+ info={registerInformation} goBack={decrementStep}
+ handleCancelar={handleCancelar} handleBuscar={handleBuscarParteDois}
+ />
+ }
+ {activeStep === 2 &&
+ <PartThree activeStep={activeStep} goBack={decrementStep} contrast={state.contrast}
+ handleCancelar={handleCancelar} info={registerInformation}
+ handleSubmit={handleParteTres}
+ />
+ }
+ {
+ activeStep === 3 &&
+ <SuccessfulRequest email={state.currentUser.email} history={props.history} contrast={state.contrast} />
+ }
+ </div>
+ </Paper>
+ </div>
</div>
- </div>
- </>
- )
- :
- (
- <>
- {redirect()}
- </>
- )
- }
+ </>
+ )
+ :
+ (
+ <>
+ {redirect()}
+ </>
+ )
+ }
</>
)
}
diff --git a/src/Pages/PasswordRecoveryPage.js b/src/Pages/PasswordRecoveryPage.js
index 1ed9b8cc..e1a42071 100644
--- a/src/Pages/PasswordRecoveryPage.js
+++ b/src/Pages/PasswordRecoveryPage.js
@@ -1,5 +1,5 @@
-import React, {useState} from 'react'
-import {BackgroundDiv} from '../Components/TabPanels/StyledComponents.js'
+import React, { useState, useContext } from 'react'
+import { BackgroundDiv } from '../Components/TabPanels/StyledComponents.js'
import Paper from '@material-ui/core/Paper';
import styled from 'styled-components'
import ValidateUserInput from '../Components/HelperFunctions/FormValidationFunction.js'
@@ -7,14 +7,15 @@ import Default from '../Components/PasswordRecoveryComponents/Default.js'
import Success from '../Components/PasswordRecoveryComponents/Success.js'
import CaseError from '../Components/PasswordRecoveryComponents/Error.js'
import CustomizedBreadcrumbs from '../Components/TabPanels/Breadcrumbs.js'
-import {postRequest} from '../Components/HelperFunctions/getAxiosConfig'
-
-export default function PasswordRecoveryPage (props) {
+import { postRequest } from '../Components/HelperFunctions/getAxiosConfig'
+import { Store } from '../Store'
+export default function PasswordRecoveryPage(props) {
+ const { state } = useContext(Store)
const [formEmail, setEmail] = useState(
{
- key : false,
- value : ""
+ key: false,
+ value: ""
}
)
@@ -23,22 +24,22 @@ export default function PasswordRecoveryPage (props) {
const userInput = e.target.value
const flag = ValidateUserInput('email', userInput)
- setEmail({...formEmail,
- key : flag,
- value : userInput
+ setEmail({
+ ...formEmail,
+ key: flag,
+ value: userInput
})
}
const [aux, setCase] = useState('default')
const handleChangeSwitch = (value) => {
- console.log(value)
if (value !== "success") {
- setEmail({key : false, value : ""})
+ setEmail({ key: false, value: "" })
}
setCase(value)
};
- function handleSuccessfulSubmit (data) {
+ function handleSuccessfulSubmit(data) {
handleChangeSwitch((data.success ? "success" : "error"))
}
const onSubmit = (e) => {
@@ -51,19 +52,19 @@ export default function PasswordRecoveryPage (props) {
"redirect_url" : "https://plataformaintegrada.mec.gov.br/recuperar-senha/alterar-senha" //"http://localhost:4000/recuperar-senha/alterar-senha"
}
- postRequest(url, payload, handleSuccessfulSubmit, (error) => {console.log(error)})
+ postRequest(url, payload, handleSuccessfulSubmit, (error) => { console.log(error) })
}
const components = {
- default : <Default handleChange={handleChange} onSubmit={onSubmit} value={formEmail.value} error={formEmail.key}/>,
- success : <Success email={formEmail.value} changeSwitch={handleChangeSwitch}/>,
- error : <CaseError handleChange={handleChange} onSubmit={onSubmit} value={formEmail.value} error={formEmail.key}/>
+ default: <Default contrast={state.contrast} handleChange={handleChange} onSubmit={onSubmit} value={formEmail.value} error={formEmail.key} />,
+ success: <Success contrast={state.contrast} email={formEmail.value} changeSwitch={handleChangeSwitch} />,
+ error: <CaseError contrast={state.contrast} handleChange={handleChange} onSubmit={onSubmit} value={formEmail.value} error={formEmail.key} />
}
const switchFunction = (value) => {
- switch(value) {
+ switch (value) {
case 'success':
return components.success;
case 'error':
@@ -71,24 +72,25 @@ export default function PasswordRecoveryPage (props) {
default:
return components.default
- }
+ }
}
return (
<>
- <BackgroundDiv>
+ <BackgroundDiv contrast={state.contrast}>
<div>
<CustomizedBreadcrumbs
+ contrast={state.contrast}
values={["Recuperar senha"]}
/>
</div>
- <div style={{justifyContent:"center", textAlign:"center", maxWidth:"600px", margin:"auto"}}>
- <Paper elevation={3}>
- <CardDiv>
+ <div style={{ justifyContent: "center", textAlign: "center", maxWidth: "600px", margin: "auto" }}>
+ <Paper elevation={3}>
+ <CardDiv contrast={state.contrast}>
{switchFunction(aux)}
- </CardDiv>
- </Paper>
+ </CardDiv>
+ </Paper>
</div>
</BackgroundDiv>
</>
@@ -96,7 +98,8 @@ export default function PasswordRecoveryPage (props) {
}
const CardDiv = styled.div`
- background-color : #fff;
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ border: ${props => props.contrast === "" ? 0 : "1px solid white"};
box-shadow : 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
padding : 30px 60px;
margin : 50px 0;
diff --git a/src/Pages/PublicUserPage.js b/src/Pages/PublicUserPage.js
index 6cdb3ccb..0b763873 100644
--- a/src/Pages/PublicUserPage.js
+++ b/src/Pages/PublicUserPage.js
@@ -16,327 +16,430 @@ 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, useContext } from 'react'
-import { Store } from '../Store'
-import styled from 'styled-components'
-import { apiDomain } from '../env';
-import CustomizedBreadcrumbs from '../Components/TabPanels/Breadcrumbs.js'
-import Grid from '@material-ui/core/Grid';
-import FollowButton from '../Components/ContactButtons/FollowButton.js'
-import FollowingButton from '../Components/ContactButtons/FollowingButton.js'
-import FollowersCountButton from '../Components/ContactButtons/FollowersCountButton.js'
-import Tab from '@material-ui/core/Tab';
-import TabInicio from '../Components/TabPanels/PublicUserPageTabs/TabInicio.js'
-import TabRecursos from '../Components/TabPanels/PublicUserPageTabs/TabRecursos.js'
-import TabColecoes from '../Components/TabPanels/PublicUserPageTabs/TabColecoes.js'
-import TabRede from '../Components/TabPanels/PublicUserPageTabs/TabRede.js'
-import CheckDecagram from '../img/check-decagram-blue.svg'
-import ReportButton from '../Components/ReportButton.js'
-import { HeaderContainer, UserProfileContainer, CoverContainer, UserProfileInfoDiv, StyledTabs, CheckTeacherDiv, RodapeDiv, NavBarContentContainer, BackgroundDiv } from '../Components/TabPanels/StyledComponents.js'
-import { fetchAllRequest } from '../Components/HelperFunctions/getAxiosConfig'
-import Typography from '@material-ui/core/Typography';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import LoadingSpinner from '../Components/LoadingSpinner';
-import Button from '@material-ui/core/Button'
-import { Link } from 'react-router-dom'
+import React, { useEffect, useState, useContext } from "react";
+import { Store } from "../Store";
+import styled from "styled-components";
+import { apiDomain } from "../env";
+import CustomizedBreadcrumbs from "../Components/TabPanels/Breadcrumbs.js";
+import Grid from "@material-ui/core/Grid";
+import FollowButton from "../Components/ContactButtons/FollowButton.js";
+import FollowingButton from "../Components/ContactButtons/FollowingButton.js";
+import FollowersCountButton from "../Components/ContactButtons/FollowersCountButton.js";
+import Tab from "@material-ui/core/Tab";
+import TabInicio from "../Components/TabPanels/PublicUserPageTabs/TabInicio.js";
+import TabRecursos from "../Components/TabPanels/PublicUserPageTabs/TabRecursos.js";
+import TabColecoes from "../Components/TabPanels/PublicUserPageTabs/TabColecoes.js";
+import TabRede from "../Components/TabPanels/PublicUserPageTabs/TabRede.js";
+import CheckDecagram from "../img/check-decagram-blue.svg";
+import ReportButton from "../Components/ReportButton.js";
+import {
+ HeaderContainer,
+ UserProfileContainer,
+ CoverContainer,
+ UserProfileInfoDiv,
+ StyledTabs,
+ CheckTeacherDiv,
+ RodapeDiv,
+ NavBarContentContainer,
+ BackgroundDiv,
+} from "../Components/TabPanels/StyledComponents.js";
+import { fetchAllRequest } from "../Components/HelperFunctions/getAxiosConfig";
+import Typography from "@material-ui/core/Typography";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import LoadingSpinner from "../Components/LoadingSpinner";
+import Button from "@material-ui/core/Button";
+import { Link } from "react-router-dom";
//Image Import
import { noAvatar } from "ImportImages.js";
function RenderFollowContainer(props) {
- const { state } = useContext(Store)
- const [followed, setFollowed] = useState(props.followed)
- const toggleFollowed = () => { setFollowed(!followed) }
+ const { state } = useContext(Store);
+ const [followed, setFollowed] = useState(props.followed);
+ const toggleFollowed = () => {
+ setFollowed(!followed);
+ };
- return (
- <FollowContainer>
- <>
- {
- (props.id !== state.currentUser.id) &&
- followed ?
- (
- <FollowingButton followedID={props.id} toggleFollowed={toggleFollowed} />
- )
- :
- (
- <FollowButton followerID={props.id} toggleFollowed={toggleFollowed} />
- )
- }
- <FollowersCountButton followCount={props.followCount} />
- </>
- </FollowContainer>
- )
+ return (
+ <FollowContainer>
+ <>
+ {props.id !== state.currentUser.id && followed ? (
+ <FollowingButton
+ contrast={state.contrast}
+ followedID={props.id}
+ toggleFollowed={toggleFollowed}
+ />
+ ) : (
+ <FollowButton contrast={state.contrast} followerID={props.id} toggleFollowed={toggleFollowed} />
+ )}
+ <FollowersCountButton contrast={state.contrast} followCount={props.followCount} />
+ </>
+ </FollowContainer>
+ );
}
const RenderProfileAvatar = (userAvatar) => {
- return (
- <ProfileAvatarDiv>
- <img src={userAvatar ? apiDomain + userAvatar : noAvatar} alt="user avatar" style={{ height: "inherit", width: "inherit", border: "0", verticalAlign: "middle" }} />
- </ProfileAvatarDiv>
- )
-}
+ return (
+ <ProfileAvatarDiv>
+ <img
+ src={userAvatar ? apiDomain + userAvatar : noAvatar}
+ alt="user avatar"
+ style={{
+ height: "inherit",
+ width: "inherit",
+ border: "0",
+ verticalAlign: "middle",
+ }}
+ />
+ </ProfileAvatarDiv>
+ );
+};
-const RenderUserProfileInfo = (userName) => {
- return (
- <UserProfileInfoDiv>
- <p
- style={{ fontSize: "28px", color: "#fff", marginBottom: "2px", fontWeight: "500", borderRadius: "5px", textShadow: "0 1px 2px rgba(0,0,0,.45)" }}
- >
- {userName}
- </p>
- </UserProfileInfoDiv>
- )
-}
+const RenderUserProfileInfo = (userName, contrast) => {
+ return (
+ <UserProfileInfoDiv contrast={contrast}>
+ <p>
+ {userName}
+ </p>
+ </UserProfileInfoDiv>
+ );
+};
const RenderCheckTeacher = (submitter_request) => {
- if (submitter_request === "accepted") {
- return (
- <CheckTeacherDiv>
- <p>
- <span>
- <img alt="" src={CheckDecagram} />
- </span>
+ if (submitter_request === "accepted") {
+ return (
+ <CheckTeacherDiv>
+ <p>
+ <span>
+ <img alt="" src={CheckDecagram} />
+ </span>
Professor(a)
</p>
- </CheckTeacherDiv>
- )
- }
-}
+ </CheckTeacherDiv>
+ );
+ }
+};
export default function PublicUserPage(props) {
- /*currentUser info variables--------------------------------------*/
- const { state } = useContext(Store)
- /*user info variables--------------------------------------*/
- const WIDTH = window.innerWidth;
- const [id, setId] = useState(props.match.params.userId)
-
- const [loading, setLoading] = useState(false);
+ /*currentUser info variables--------------------------------------*/
+ const { state } = useContext(Store);
+ /*user info variables--------------------------------------*/
+ const WIDTH = window.innerWidth;
+ const [id, setId] = useState(props.match.params.userId);
- const [userData, setUserData] = useState({})
- const fillUserInfo = (data) => {
- setUserData(data)
- }
- /*---------------------------------------------------------*/
- const [following, setFollowing] = useState(0);
- const fillFollowing = (data) => {
- if (data)
- if (data.errors)
- setFollowing('Você precisa logar para ver o que usuário está ');
- else
- setFollowing(data.length);
- }
+ const [loading, setLoading] = useState(false);
+ const [erro, setErro] = useState(false);
- /*content control variables--------------------------------*/
- // eslint-disable-next-line
- const [tabs, setTabs] = useState([
- 'InÃcio', 'Recursos', 'Coleções', 'Rede'
- ])
- const [tabValue, setTabValue] = useState(0);
- const handleChangeTab = (event, newValue) => {
- setTabValue(newValue)
- }
- /*---------------------------------------------------------*/
+ const [userData, setUserData] = useState({});
+ const fillUserInfo = (data) => {
+ setUserData(data);
+ };
+ /*---------------------------------------------------------*/
+ const [following, setFollowing] = useState(0);
+ const fillFollowing = (data) => {
+ if (data)
+ if (data.errors)
+ setFollowing("Você precisa logar para ver o que usuário está ");
+ else setFollowing(data.length);
+ };
- /*content variables--------------------------------*/
- const [learningObjArr, setLearningObjects] = useState([])
- const handleLearningObjects = (data) => { setLearningObjects(data) }
- const [collectionsArr, setCollections] = useState([])
- const handleCollections = (data) => { setCollections(data) }
- /*---------------------------------------------------------*/
+ /*content control variables--------------------------------*/
+ // eslint-disable-next-line
+ const [tabs, setTabs] = useState(["InÃcio", "Recursos", "Coleções", "Rede"]);
+ const [tabValue, setTabValue] = useState(0);
+ const handleChangeTab = (event, newValue) => {
+ setTabValue(newValue);
+ };
+ /*---------------------------------------------------------*/
- function handleSuccess(responseArr) {
- fillUserInfo(responseArr[0])
+ /*content variables--------------------------------*/
+ const [learningObjArr, setLearningObjects] = useState([]);
+ const handleLearningObjects = (data) => {
+ setLearningObjects(data);
+ };
+ const [collectionsArr, setCollections] = useState([]);
+ const handleCollections = (data) => {
+ setCollections(data);
+ };
+ /*---------------------------------------------------------*/
- handleLearningObjects(responseArr[1])
+ function handleSuccess(responseArr) {
+ if (Object.keys(responseArr[0]).length === 0) setErro(true);
+ else {
+ fillUserInfo(responseArr[0]);
- handleCollections(responseArr[2])
-
- fillFollowing(responseArr[3])
- setLoading(false);
- }
+ handleLearningObjects(responseArr[1]);
+
+ handleCollections(responseArr[2]);
+
+ fillFollowing(responseArr[3]);
+ setLoading(false);
+ }
+ }
- /*Component Will Mount*/
- useEffect(() => {
- const id = props.match.params.userId
- setId(id)
- const urls = [`/users/${id}`, `/users/${id}/learning_objects`, `/users/${id}/collections`, `/users/${id}/following/User`]
- setLoading(true);
- fetchAllRequest(urls, handleSuccess, (error) => { console.log(error) })
- }, [state.currentUser.id, props.match.params.userId])
- /*---------------------------------------------------------*/
+ /*Component Will Mount*/
+ useEffect(() => {
+ const id = props.match.params.userId;
+ setId(id);
+ const urls = [
+ `/users/${id}`,
+ `/users/${id}/learning_objects`,
+ `/users/${id}/collections`,
+ `/users/${id}/following/User`,
+ ];
+ setLoading(true);
+ fetchAllRequest(urls, handleSuccess, () => {
+ setErro(true)
+ });
+ }, [state.currentUser.id, props.match.params.userId]);
+ /*---------------------------------------------------------*/
- if (loading)
- return <LoadingSpinner text="Carregando dados do usuário..." />
- else if (!userData && !following && !learningObjArr && !collectionsArr)
- return <UserNotFoundDiv>
- <Grid container direction='column' justify='center' alignItems='center' spacing={1}>
- <Grid item>
- <p className="not-found">
- O usuário não foi encontrado em nossa base de dados.
- </p>
- </Grid>
- <Grid item>
- <Link className="link" to={`/busca?page=0&results_per_page=12&query=*&search_class=User`}>
- <Button
- variant='contained'
- className="back-button"
- >
- Voltar para a busca de usuários.
- </Button>
- </Link>
- </Grid>
- </Grid>
- </UserNotFoundDiv>
- else
- return <React.Fragment>
- <link href="https://fonts.googleapis.com/css?family=Roboto:100,400,500&display=swap" rel="stylesheet" />
- <BackgroundDiv>
- <CustomizedBreadcrumbs
- values={["Usuário Público", tabs[tabValue]]}
- />
- <Grid container spacing={2}>
- <Grid item xs={12}>
- <div style={{ padding: "10px 0 8px 0" }}>
- <UserProfileContainer>
- <HeaderContainer>
- <>
- {!loading && <RenderFollowContainer followed={userData.followed} id={id} followCount={userData.follows_count} />}
- {RenderProfileAvatar(userData.avatar ? userData.avatar : undefined)}
- <CoverContainer>
- {userData.cover && <img src={apiDomain + userData.cover} alt='' style={{ width: "100%", height: "100%", objectFit: "cover" }} />}
- </CoverContainer>
- {
- WIDTH <= 501 ? null : RenderUserProfileInfo(userData.name)
- }
- </>
- </HeaderContainer>
- {
- WIDTH <= 501 ?
- <Grid style={{ marginTop: '4em' }} container justify="center" alignItems="center" direction="column">
- <Grid item>
- <Typography variant="h4" gutterBottom style={{ textAlign: "center" }}>
- {
- userData.name
- }
- </Typography>
- </Grid>
- <Grid style={{ marginTop: '0.5em', marginBottom: '0.5em', borderTop: "0.5px solid #DCDCDC", borderBottom: "0.5px solid #DCDCDC" }} container spacing={4} justify="center" alignItems="center" direction="row">
- <Grid item>
- <Typography variant="h6" style={{ textAlign: 'center' }}>
- {
- loading ?
- <CircularProgress size={20} /> :
- `${userData.follows_count} seguidores`
- }
- </Typography>
- </Grid>
- <Grid item>
- <Typography variant="h6" style={{ textAlign: 'center' }} >
- {
- loading ?
- <CircularProgress size={20} /> :
- `${following} seguindo`
- }
- </Typography>
- </Grid>
- </Grid>
+ if (erro)
+ return (
+ <UserNotFoundDiv contrast={state.contrast}>
+ <Grid
+ container
+ direction="column"
+ justify="center"
+ alignItems="center"
+ spacing={1}
+ >
+ <Grid item>
+ <p className="not-found">
+ O usuário não foi encontrado em nossa base de dados.
+ </p>
+ </Grid>
+ <Grid item>
+ <Link
+ className="link"
+ to={`/busca?page=0&results_per_page=12&query=*&search_class=User`}
+ >
+ <Button variant="contained" className="back-button">
+ Voltar para a busca de usuários
+ </Button>
+ </Link>
</Grid>
- :
- RenderCheckTeacher(userData.submitter_request)}
- <RodapeDiv>
- <NavBarContentContainer>
- <StyledTabs
- value={tabValue}
- onChange={handleChangeTab}
- indicatorColor="primary"
- textColor="primary"
- variant="scrollable"
- scrollButtons="desktop"
- TabIndicatorProps={{ style: { background: "#00bcd4" } }}
- >
- {
- tabs.map((tab) =>
- <Tab label={tab} key={tab}
- disabled={(tab === "Recursos" && learningObjArr.length === 0) || (tab === "Coleções" && collectionsArr.length === 0) || (tab === "Rede" && state.currentUser.id === '')}
- />
- )
- }
- </StyledTabs>
- </NavBarContentContainer>
- <ReportButton className="report-button" complainableId={userData.id} complainableType={"User"} />
- </RodapeDiv>
- </UserProfileContainer>
- </div>
- </Grid>
+ </Grid>
+ </UserNotFoundDiv>
+ );
+ else
+ if (loading)
+ return (
+ <div style={state.contrast === "" ? {} : { backgroundColor: "black" }}>
+ <LoadingSpinner
+ contrast={state.contrast}
+ text="Carregando dados do usuário..."
+ />
+ </div>
+ );
+ else
+ return (
+ <React.Fragment>
+ <link
+ href="https://fonts.googleapis.com/css?family=Roboto:100,400,500&display=swap"
+ rel="stylesheet"
+ />
+ <BackgroundDiv contrast={state.contrast}>
+ <CustomizedBreadcrumbs contrast={state.contrast} values={["Usuário Público", tabs[tabValue]]} />
+ <Grid container spacing={2}>
+ <Grid item xs={12}>
+ <div style={{ padding: "10px 0 8px 0" }}>
+ <UserProfileContainer>
+ <HeaderContainer contrast={state.contrast}>
+ <>
+ {!loading && (
+ <RenderFollowContainer
+ followed={userData.followed}
+ id={id}
+ followCount={userData.follows_count}
+ />
+ )}
+ {RenderProfileAvatar(
+ userData.avatar ? userData.avatar : undefined
+ )}
+ <CoverContainer contrast={state.contrast}>
+ {userData.cover && (
+ <img
+ src={apiDomain + userData.cover}
+ alt="imagem de capa do usuário"
+ style={{
+ width: "100%",
+ height: "100%",
+ objectFit: "cover",
+ }}
+ />
+ )}
+ </CoverContainer>
+ {WIDTH <= 501
+ ? null
+ : RenderUserProfileInfo(userData.name, state.contrast)}
+ </>
+ </HeaderContainer>
+ {WIDTH <= 501 ? (
+ <Grid
+ style={state.contrast === "" ? { marginTop: "4em" } : { paddingTop: "4em", backgroundColor: "black", borderLeft: "1px solid white", borderRight: "1px solid white", }}
+ container
+ justify="center"
+ alignItems="center"
+ direction="column"
+ >
+ <Grid item>
+ <Typography
+ variant="h4"
+ gutterBottom
+ style={state.contrast === "" ? { textAlign: "center" } : { color: "white", textAlign: "center" }}
+ >
+ {userData.name}
+ </Typography>
+ </Grid>
+ <Grid
+ style={{
+ marginTop: "0.5em",
+ marginBottom: "0.5em",
+ borderTop: "1px solid white",
+ borderBottom: "1px solid white",
+ }}
+ container
+ spacing={4}
+ justify="center"
+ alignItems="center"
+ direction="row"
+ >
+ <Grid item>
+ <Typography style={state.contrast === "" ? {} : { color: "white" }} variant="h6" onClick={(e) => { handleChangeTab(e, 4) }}>
+ {loading ? (
+ <CircularProgress size={20} />
+ ) : (
+ `${userData.follows_count} seguidores`
+ )}
+ </Typography>
+ </Grid>
+ <Grid item>
+ <Typography style={state.contrast === "" ? {} : { color: "white" }} variant="h6" onClick={(e) => { handleChangeTab(e, 4) }}>
+ {loading ? (
+ <CircularProgress size={20} />
+ ) : (
+ `${following} seguindo`
+ )}
+ </Typography>
+ </Grid>
+ </Grid>
+ </Grid>
+ ) : (
+ RenderCheckTeacher(userData.submitter_request)
+ )}
+ <RodapeDiv contrast={state.contrast}>
+ <NavBarContentContainer contrast={state.contrast}>
+ <StyledTabs
+ contrast={state.contrast}
+ value={tabValue}
+ onChange={handleChangeTab}
+ indicatorColor="primary"
+ textColor="primary"
+ variant="scrollable"
+ scrollButtons="on"
+ TabIndicatorProps={{ style: state.contrast === "" ? { background: "#00bcd4" } : { background: "yellow" } }}
+ >
+ {tabs.map((tab) => (
+ <Tab
+ label={tab}
+ key={tab}
+ disabled={
+ (tab === "Recursos" &&
+ learningObjArr.length === 0) ||
+ (tab === "Coleções" &&
+ collectionsArr.length === 0) ||
+ (tab === "Rede" && state.currentUser.id === "")
+ }
+ />
+ ))}
+ </StyledTabs>
+ </NavBarContentContainer>
+ <ReportButton
+ className="report-button"
+ complainableId={userData.id}
+ complainableType={"User"}
+ />
+ </RodapeDiv>
+ </UserProfileContainer>
+ </div>
+ </Grid>
- {
- !loading &&
- <Grid item xs={12}>
- {tabValue === 0 &&
- <TabInicio id={id} user={userData} learningObjs={learningObjArr} collections={collectionsArr} />}
- {tabValue === 1 &&
- <TabRecursos id={id} username={userData.name} />}
- {tabValue === 2 &&
- <TabColecoes id={id} username={userData.name} />}
- {tabValue === 3 &&
- <TabRede id={id} username={userData.name} />}
- </Grid>
- }
- </Grid>
- </BackgroundDiv>
- </React.Fragment>
+ {!loading && (
+ <Grid item xs={12}>
+ {tabValue === 0 && (
+ <TabInicio
+ contrast={state.contrast}
+ id={id}
+ user={userData}
+ learningObjs={learningObjArr}
+ collections={collectionsArr}
+ />
+ )}
+ {tabValue === 1 && <TabRecursos contrast={state.contrast} id={id} username={userData.name} />}
+ {tabValue === 2 && <TabColecoes contrast={state.contrast} id={id} username={userData.name} />}
+ {tabValue === 3 && <TabRede contrast={state.contrast} id={id} username={userData.name} />}
+ </Grid>
+ )}
+ </Grid>
+ </BackgroundDiv>
+ </React.Fragment>
+ );
}
-
const ProfileAvatarDiv = styled.div`
- overflow : hidden;
- border-radius : 100%;
- bottom : -10px;
- left : 20px;
- z-index : 10;
- box-sizing : content-box;
- position : absolute;
- width : 150px;
- height : 150px;
- border : 4px solid #fff;
- outline : 0;
- background-color : #fff;
+ overflow: hidden;
+ border-radius: 100%;
+ bottom: -10px;
+ left: 20px;
+ z-index: 10;
+ box-sizing: content-box;
+ position: absolute;
+ width: 150px;
+ height: 150px;
+ border: 4px solid #fff;
+ outline: 0;
+ background-color: #fff;
@media screen and (max-width: 501px) {
- height : 73px;
- width : 73px;
- position:absolute;
- left:0;
- right:0;
- bottom : -40px;
- margin-left:auto;
- margin-right:auto;
- }
-`
+ height: 73px;
+ width: 73px;
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: -40px;
+ margin-left: auto;
+ margin-right: auto;
+ }
+`;
const UserNotFoundDiv = styled.div`
- margin: 1em;
-
- .not-found{
- font-family: 'Roboto', sans-serif;
- font-weight: 500;
- text-align: left;
- padding: 0;
- margin: 0;
- }
+ padding: 1em;
+ background-color: ${(props) => (props.contrast === "" ? "#f4f4f4" : "black")};
- .back-button{
- background-color: #00bcd4;
- color: whitesmoke;
- }
+ .not-found {
+ font-family: "Roboto", sans-serif;
+ color: ${(props) => props.contrast === "" ? "#666" : "white"};
+ font-weight: 500;
+ text-align: left;
+ padding: 0;
+ margin: 0;
+ }
- .link{
- text-decoration: none;
- }
-`
+ .back-button {
+ background-color: ${(props) => props.contrast === "" ? "#00bcd4" : "black"};
+ color: ${(props) => props.contrast === "" ? "whitesmoke" : "yellow"};
+ border: ${(props) => props.contrast === "" ? "none" : "1px solid white"};
+ text-decoration: ${(props) => props.contrast === "" ? "none" : "underline"};
+ :hover {
+ background-color: ${(props) => props.contrast === "" ? "" : "rgba(255,255,0,0.24)"};
+ text-decoration: ${(props) => props.contrast === "" ? "none" : "underline"};
+ }
+ }
+`;
const FollowContainer = styled.div`
- padding : 4px 10px;
- right : 0;
- position : absolute;
- z-index : 1;
-`
\ No newline at end of file
+ padding: 4px 10px;
+ right: 0;
+ position: absolute;
+ z-index: 1;
+`;
diff --git a/src/Pages/PublicationPermissionsPage.js b/src/Pages/PublicationPermissionsPage.js
index 52bdbd8a..a7a121b3 100644
--- a/src/Pages/PublicationPermissionsPage.js
+++ b/src/Pages/PublicationPermissionsPage.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, { useState, useContext } from "react";
+import React, { useState, useContext, useEffect } from "react";
import Card from "@material-ui/core/Card";
import CardActions from "@material-ui/core/CardActions";
import { Button } from "@material-ui/core";
@@ -25,30 +25,52 @@ import { device } from "../Components/device.js";
import { Store } from "../Store.js";
import IllegalContentModal from "../Components/IllegalContentModal.js";
import PublicationPermissionsContent from "../Components/PublicationPermissionsContent.js";
+import { getRequest } from '../Components/HelperFunctions/getAxiosConfig';
+import LoadingSpinner from '../Components/LoadingSpinner';
const CardStyled = styled(Card)`
- box-sizing: border-box;
- background-color: white;
- max-width: 1700px;
- padding-top: 52px;
- @media ${device.mobileM} {
- width: 100%;
- height: 100%;
- }
+ box-sizing: border-box;
+ background-color: white;
+ max-width: 1700px;
+ @media ${device.mobileM} {
+ width: 100%;
+ height: 100%;
+ }
+`;
+
+const StyledContinuar = styled(Button)`
+ font-family: "Roboto", sans serif;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 22px;
+ font-size: 15px;
+ letter-spacing: 0.01em;
+ padding: 7px;
+ border-radius: 5px;
+ color: ${props => props.disable === true ? props.contrast === "" ? "#666" : "white" : props.contrast === "" ? "white" : "yellow"} !important;
+ text-decoration: ${props => props.disable === true ? props.contrast === "" ? "none" : "none" : props.contrast === "" ? "none" : "yellow underline"} !important;
+ background-color: ${props => props.disable === true ? props.contrast === "" ? "#E9E9E9" : "black" : props.contrast === "" ? "#52BCD4" : "black"} !important;
+ border: ${props => props.disable === true ? props.contrast === "" ? "none" : "1px solid white" : props.contrast === "" ? "none" : "1px solid white"} !important;
`;
-const Styledspan = styled.span`
- font-family: "Roboto", sans serif;
- font-style: normal;
- font-weight: 500;
- line-height: 22px;
- font-size: 15px;
- letter-spacing: 0.01em;
+const StyledCancelar = styled(Button)`
+ font-family: "Roboto", sans serif;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 22px;
+ font-size: 15px;
+ letter-spacing: 0.01em;
+ padding: 7px;
+ border-radius: 5px;
+ color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"} !important;
+ background-color: ${props => props.contrast === "" ? "white" : "black"} !important;
+ border: none;
`;
const Background = styled.div`
padding-top : 40px;
- background-color : #f4f4f4;
+ background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
color : #666;
padding-bottom : 40px;
@@ -70,134 +92,149 @@ const Background = styled.div`
`
export default function PermissionsContainer(props) {
- const { state, dispatch } = useContext(Store);
- const [unavailableCheckbox, setCheckboxAvailability] = useState(true);
- const [unavailableButton, setButtonAvailability] = useState(true);
- const [radios, setRadioValues] = useState({
- radio1: "",
- radio2: "",
- radio3: ""
- });
- const [modalOpen, setModalOpen] = useState(false);
-
- const closeModal = () => {
- setModalOpen(false);
- props.history.push("/termos-publicar-recurso");
- window.scrollTo(0, 0);
- };
-
- const handleChecked = e => {
- setButtonAvailability(!unavailableButton);
- };
-
- const handleRadios = e => {
- let temp = radios;
- temp[e.target.name] = e.target.value;
-
- setRadioValues(temp);
- setCheckboxAvailability(!(radios.radio1 === "Não" && radios.radio2 === "Não" && radios.radio3 === "Não"));
- };
-
- const handleAgreement = () => {
- if (
- radios.radio1 === "Sim" ||
- radios.radio2 === "Sim" ||
- radios.radio3 === "Sim"
- ) {
- setModalOpen(true);
- } else {
- dispatch({
- type: "USER_AGREED_TO_PUBLICATION_PERMISSIONS",
- userAgreement: true
- });
-
- props.history.push("/upload");
+ const { state, dispatch } = useContext(Store);
+ const [loading, setLoading] = useState(true);
+ const [unavailableCheckbox, setCheckboxAvailability] = useState(true);
+ const [unavailableButton, setButtonAvailability] = useState(true);
+
+ const [questionsArr, setQuestionsArr] = useState([]);
+
+ const [radios, setRadioValues] = useState({});
+ const [modalOpen, setModalOpen] = useState(false);
+
+ const closeModal = () => {
+ setModalOpen(false);
+ props.history.push("/termos-publicar-recurso");
+ window.scrollTo(0, 0);
+ };
+
+ const handleChecked = e => {
+ setButtonAvailability(!unavailableButton);
+ };
+
+ const handleRadios = e => {
+ let radioTmp2 = {id: parseInt(e.target.name), value: e.target.value};
+ let temp = radios;
+ const index = temp.findIndex(x => x.id === parseInt(e.target.name));
+
+ temp[index] = radioTmp2;
+
+ setRadioValues(temp);
+ setCheckboxAvailability(!(radios.every((radio) => radio.value === "Não")));
+ };
+
+ const handleAgreement = () => {
+ if (radios.some((radio) => radio === "Sim")) {
+ setModalOpen(true);
+ } else {
+ dispatch({
+ type: "USER_AGREED_TO_PUBLICATION_PERMISSIONS",
+ userAgreement: true
+ });
+
+ props.history.push("/upload");
+ }
+ };
+
+ function handleSuccess(data) {
+ var radioTmp = [];
+
+ data.forEach(element => {
+ var radioTmp2 = {id: element.id, value: ""};
+
+ if (element.status === "active" && element.id !== 4) {
+ radioTmp.push(radioTmp2);
+ }
+ });
+
+ setQuestionsArr(data);
+ setRadioValues(radioTmp);
+
+ setLoading(false);
}
- };
-
- const redirect = () => {
- props.history.push("/termos-publicar-recurso");
- };
-
- const redirectToHome = () => {
- props.history.push("/");
- };
- return (
- <>
- {state.userAgreedToPublicationTerms ? (
- [
- <>
- <IllegalContentModal
- open={modalOpen}
- handleClose={closeModal}
- disableBackdropClick={true}
- />
- <Background
- >
- <div className="container">
- <CardStyled variant="outlined">
- <PublicationPermissionsContent handleRadios={handleRadios} />
- <CardActions
- style={{ justifyContent: "center", padding: "25px", borderTop : "2px solide #dadada" }}
- >
- <div>
- <div style={{ fontSize: "14px" }}>
- <LabeledCheckbox
- disabled={unavailableCheckbox}
- label={
- <Styledspan>
- Li e permito a publicação do meu recurso na
- Plataforma Integrada de RED do MEC, assim como
- atesto que o meu recurso atende aos critérios
- especificados acima.
- </Styledspan>
- }
- handleChange={handleChecked}
- />
- <div
- style={{ justifyContent: "center", display: "flex" }}
- >
- <Button
- disabled={unavailableButton || unavailableCheckbox}
- style={
- unavailableButton || unavailableCheckbox
- ? { backgroundColor: "#e9e9e9" }
- : { backgroundColor: "#00bcd4" }
- }
- onClick={handleAgreement}
- >
- <Styledspan
- style={
- unavailableButton || unavailableCheckbox
- ? { color: "#666666", fontWeight : "600" }
- : { color: "#ffffff", fontWeight : "600" }
- }
- >
- Continuar{" "}
- </Styledspan>
- </Button>
- <Button
- style={{
- marginLeft: "45px",
- backgroundColor: "#e9e9e9",
- }}
- >
- <Styledspan style={{ color: "rgb(102, 102, 102)" , fontWeight : "600 !important"}} onClick={() => {redirectToHome()}}>
- Cancelar
- </Styledspan>
- </Button>
+
+ useEffect(() => {
+ const url = `/questions/`
+
+ getRequest(url, handleSuccess, (error) => { console.log(error) })
+
+ }, [])
+
+ const redirect = () => {
+ props.history.push("/termos-publicar-recurso");
+ };
+
+ const redirectToHome = () => {
+ props.history.push("/");
+ };
+
+ return (
+ <>
+ {!loading ?
+ (
+ state.userAgreedToPublicationTerms ? (
+ [
+ <>
+ <IllegalContentModal
+ contrast={props.contrast}
+ open={modalOpen}
+ handleClose={closeModal}
+ disableBackdropClick={true}
+ />
+ <Background contrast={state.contrast}>
+ <div className="container">
+ <CardStyled variant="outlined">
+ <PublicationPermissionsContent contrast={state.contrast} handleRadios={handleRadios} questionsArr={questionsArr}/>
+ <CardActions
+ style={state.contrast === "" ? { justifyContent: "center", padding: "25px", borderTop: "2px solide #dadada" } : { justifyContent: "center", padding: "25px", borderTop: "2px solide #dadada", backgroundColor: "black" }}
+ >
+ <div>
+ <div style={{ fontSize: "14px" }}>
+ <LabeledCheckbox
+ contrast={state.contrast}
+ disabled={unavailableCheckbox}
+ label={
+ <span className={`${state.contrast}LinkColor`} style={{ fontSize: "15px" }}>
+ Li e permito a publicação do meu recurso na
+ Plataforma Integrada de RED do MEC, assim como
+ atesto que o meu recurso atende aos critérios
+ especificados acima.
+ </span>
+ }
+ handleChange={handleChecked}
+ />
+ <div
+ style={{ justifyContent: "left", display: "flex", marginTop: "15px" }}
+ >
+ <StyledContinuar
+ disabled={unavailableButton || unavailableCheckbox}
+ disable={unavailableButton || unavailableCheckbox}
+ contrast={state.contrast}
+ onClick={handleAgreement}
+ >
+ Continuar
+ </StyledContinuar>
+ <StyledCancelar onClick={redirectToHome} contrast={state.contrast}>
+ Cancelar
+ </StyledCancelar>
+ </div>
+ </div>
+ </div>
+ </CardActions>
+ </CardStyled>
</div>
- </div>
- </div>
- </CardActions>
- </CardStyled>
- </div>
- </Background>
- </>
- ]
- ) : (
- <>{redirect()}</>
- )}
- </>
- );
+ </Background>
+ </>
+ ]
+ ) : (
+ <>{redirect()}</>
+ )
+ )
+ :
+ (
+ <LoadingSpinner contrast={state.contrast} text="Carregando..." />
+ )
+ }
+ </>
+ );
}
diff --git a/src/Pages/ResourcePage.js b/src/Pages/ResourcePage.js
index 650b7786..290de7b7 100644
--- a/src/Pages/ResourcePage.js
+++ b/src/Pages/ResourcePage.js
@@ -42,66 +42,91 @@ import SnackBar from '../Components/SnackbarComponent';
import { noAvatar } from "ImportImages.js";
function urlVerify(url) {
- return url
- ? url.indexOf("youtu") !== -1 || url.indexOf("vimeo") !== -1
- : false;
+ return url
+ ? url.indexOf("youtu") !== -1 || url.indexOf("vimeo") !== -1
+ : false;
}
export default function LearningObjectPage(props) {
- const { state } = useContext(Store);
- const id = props.match.params.recursoId;
- const [carregando, toggle] = useState(true);
- const [erro, setErro] = useState(false);
- const [recurso, setRecurso] = useState({});
-
- function handleSuccessfulGet(data) {
- setRecurso(data);
- toggle(false);
- }
- useEffect(() => {
- const url = `/learning_objects/${id}`;
-
- getRequest(
- url,
- handleSuccessfulGet,
- (error) => {
- setErro(true)
- toggle(false);
- handleSnackbar(7)
- }
+ const { state } = useContext(Store);
+ const id = props.match.params.recursoId;
+ const [carregando, toggle] = useState(true);
+ const [erro, setErro] = useState(false);
+ const [recurso, setRecurso] = useState({});
+ const [modalConfirmarCuradoriaOpen, toggleModalConfirmarCuradoria] = useState(
+ false
);
- }, []);
-
- const [snackbarOpen, toggleSnackbar] = useState(false);
- const handleSnackbar = (index) => {
- setIndex(index);
- toggleSnackbar(true);
- };
- const snackbarText = [
- "Baixando o Recurso... Lembre-se de relatar sua experiência após o uso do Recurso!",
- "Seu comentário foi publicado com sucesso!",
- "Comentário editado com sucesso.",
- "Comentário deletado com sucesso.",
- "O Recurso foi guardado na coleção!",
- "O recurso foi aprovado com sucesso!",
- "Erro ao aprovar o recurso!",
- "Erro ao carregar a página",
- "Erro ao fazer o dowload do recurso",
- ];
- const [snackbarIndex, setIndex] = useState(0);
- const classes = useStyles();
- const [modalCuradoriaOpen, toggleModalCuradoria] = useState(false);
- const handleModalCuradoria = (value) => {
- toggleModalCuradoria(value);
- };
-
- const checkAccessLevel = (levelToCheck) => {
- if (state.currentUser.id !== "") {
- return checkUserRole(levelToCheck);
- } else {
- return false;
+
+ function handleSuccessfulGet(data) {
+ setRecurso(data);
+ toggle(false);
+ }
+ useEffect(() => {
+ const url = `/learning_objects/${id}`;
+
+ getRequest(
+ url,
+ handleSuccessfulGet,
+ (error) => {
+ setErro(true)
+ toggle(false);
+ handleSnackbar(7)
+ }
+ );
+ }, []);
+
+ const [snackbarOpen, toggleSnackbar] = useState(false);
+ const handleSnackbar = (index) => {
+ setIndex(index);
+ toggleSnackbar(true);
+ };
+ const snackbarText = [
+ "Baixando o Recurso... Lembre-se de relatar sua experiência após o uso do Recurso!",
+ "Seu comentário foi publicado com sucesso!",
+ "Comentário editado com sucesso.",
+ "Comentário deletado com sucesso.",
+ "O Recurso foi guardado na coleção!",
+ "O recurso foi aprovado com sucesso!",
+ "Erro ao aprovar o recurso!",
+ "Erro ao carregar a página",
+ "Erro ao fazer o dowload do recurso",
+ ];
+ const [snackbarIndex, setIndex] = useState(0);
+ const classes = useStyles();
+ const [modalCuradoriaOpen, toggleModalCuradoria] = useState(false);
+ const handleModalCuradoria = (value) => {
+ toggleModalCuradoria(value);
+ };
+
+ const checkAccessLevel = (levelToCheck) => {
+ if (state.currentUser.id !== "") {
+ return checkUserRole(levelToCheck);
+ } else {
+ return false;
+ }
+ };
+
+ const checkUserRole = (userRole) => {
+ return (
+ state.currentUser.roles.filter((role) => role.name === userRole).length >
+ 0
+ );
+ };
+
+ const finalizeCuratorshipFlow = () => {
+ handleSnackbar(5);
+ handleModalConfirmarCuradoria(false);
+ const url = `/learning_objects/${id}`;
+ getRequest(
+ url,
+ (data) => {
+ setRecurso(data);
+ },
+ (error) => {
+ handleSnackbar(7);
+ setErro(true);
+ })
}
- };
const handleModalConfirmarCuradoria = (value) => {
toggleModalConfirmarCuradoria(value);
@@ -317,13 +342,12 @@ export default function LearningObjectPage(props) {
}
const useStyles = makeStyles((theme) => ({
- appBar: {
- top: "auto",
- bottom: 0,
- height: "100px",
- backgroundColor: "#fff",
- boxShadow: "0 1px 3px rgba(0,0,0,.52),0 1px 2px rgba(0,0,0,.24)",
- },
+ appBar: {
+ top: "auto",
+ bottom: 0,
+ height: "100px",
+ boxShadow: "0 1px 3px rgba(0,0,0,.52),0 1px 2px rgba(0,0,0,.24)",
+ },
}));
const StyledAppBarContainer = styled.div`
@@ -333,6 +357,7 @@ const StyledAppBarContainer = styled.div`
justify-content : flex-start
margin-right : auto;
margin-left : auto;
+ padding: 10px;
@media screen and (min-width: 1200px) {
width : 1170px;
}
@@ -352,61 +377,66 @@ const StyledAppBarContainer = styled.div`
`;
const Background = styled.div`
- background-color: #f4f4f4;
- color: #666;
- font-family: "Roboto", sans serif;
- padding-top: 30px;
+ background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
+ color: #666;
+ font-family: "Roboto", sans serif;
+ padding-top: 30px;
`;
const LearnObjectNotFound = styled.div`
- margin: 1em;
-
- .not-found{
- font-family: 'Roboto', sans-serif;
- font-weight: 500;
- text-align: left;
- padding: 0;
- margin: 0;
- }
-
- .back-button{
- background-color: #ff7f00;
- color: whitesmoke;
- }
-
- .link{
- text-decoration: none;
- }
+ padding: 1em;
+ background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
+
+ .not-found{
+ font-family: 'Roboto', sans-serif;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ font-weight: 500;
+ text-align: left;
+ padding: 0;
+ margin: 0;
+ }
+
+ .back-button{
+ background-color: ${props => props.contrast === "" ? "#ff7f00" : "black"};
+ color: ${props => props.contrast === "" ? "whitesmoke" : "yellow"};
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ :hover{
+ background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24)"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ }
+ }
`
const Card = styled.div`
- background-color: #fff;
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
- margin-bottom: 30px;
- margin-right: auto;
- margin-left: auto;
- display: flex;
- flex-direction: column;
- @media screen and (min-width: 1200px) {
- width: 1170px;
- }
- @media screen and (min-width: 992px) and (max-width: 1199px) {
- width: 970px;
- }
- @media screen and (min-width: 768px) and (max-width: 991px) {
- width: 750px;
- }
-
- img {
- background-color: #e5e5e5;
- height: 270px;
- width: 400px;
- float: left;
- padding: 0;
- object-fit: cover;
- @media screen and (max-width: 768px) {
- height: auto;
- width: 100%;
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+ border: ${props => props.contrast === "" ? "0" : "1px solid white"};
+ margin-bottom: 30px;
+ margin-right: auto;
+ margin-left: auto;
+ display: flex;
+ flex-direction: column;
+ @media screen and (min-width: 1200px) {
+ width: 1170px;
+ }
+ @media screen and (min-width: 992px) and (max-width: 1199px) {
+ width: 970px;
+ }
+ @media screen and (min-width: 768px) and (max-width: 991px) {
+ width: 750px;
+ }
+
+ img {
+ background-color: #e5e5e5;
+ height: 270px;
+ width: 400px;
+ float: left;
+ padding: 0;
+ object-fit: cover;
+ @media screen and (max-width: 768px) {
+ height: auto;
+ width: 100%;
+ }
}
- }
`;
diff --git a/src/Pages/Search.js b/src/Pages/Search.js
index 9e8b5d7e..89cff15f 100644
--- a/src/Pages/Search.js
+++ b/src/Pages/Search.js
@@ -31,471 +31,387 @@ import { useHistory } from 'react-router-dom';
import SearchExpansionPanel from '../Components/SearchExpansionPanel/SearchExpansionPanel';
import FilterSummary from '../Components/SearchPageComponents/FilterSummary';
import {
- filtersCurriculum,
- filtersTypes,
- filtersStages,
- filtersLanguages,
+ filtersCurriculum,
+ filtersTypes,
+ filtersStages,
+ filtersLanguages,
} from '../Components/SearchPageComponents/filters';
import { Store } from '../Store'
import SnackBar from '../Components/SnackbarComponent';
export default function Search() {
- const history = useHistory();
- const { state } = useContext(Store)
-
- const [currOption, setCurrOption] = useState('');
- const [currOrder, serCurrOrder] = useState('review_average');
- const [currQuery, setCurrQuery] = useState('');
- const [currPage, setCurrPage] = useState(0);
- const [currCurriculumValues, setCurrCurriculumValues] = useState('');
- const [currTypeOfResValues, setCurrTypeOfResValues] = useState('');
- const [currTeachingStageValues, setCurrTeachingStageValues] = useState('');
- const [currLanguagesValues, setCurrLanguagesValues] = useState('');
- const [currTag, setCurrTag] = useState('');
- const [isLoading, setIsLoading] = useState(false);
- const [error, setError] = useState(false);
- const [snackInfo, setSnackInfo] = useState({
- open: false,
- text: "",
- severity: "",
- });
-
- const [curriculumComponents, setCurriculumComponents] = useState([]);
- const [typeOfResources, setTypeOfResources] = useState([]);
- const [teachingStage, setTeachingStage] = useState([]);
- const [languages, setLanguages] = useState([]);
- const [tag, setTag] = useState('');
-
- const [resourcesArray, setResourcesArray] = useState([]);
- const [totalResources, setTotalResources] = useState(0);
-
- const [collectionsArray, setCollectionsArray] = useState([])
- const [totalCollections, setTotalCollections] = useState(0);
-
- const [usersArray, setUsersArray] = useState([])
- const [totalUsers, setTotalUsers] = useState(0);
-
- const options = [
- { value: 'Recursos', name: 'LearningObject', color: '#ff7f00' },
- { value: 'Coleções', name: 'Collection', color: '#673ab7' },
- { value: 'Usuários', name: 'User', color: '#00bcd4' },
- ];
-
- const orders = [
- { value: 'Mais Estrelas', name: 'review_average' },
- { value: 'Mais Relevante', name: 'score' },
- { value: 'Mais Baixados', name: 'downloads' },
- { value: 'Mais Favoritados', name: 'likes' },
- { value: 'Mais Recentes', name: 'publicationdesc' },
- { value: 'Ordem Alfabética', name: 'title' },
- ];
-
- function handleSnackInfo(info) {
- setSnackInfo({ ...info })
- }
-
- function handleCloseSnack() {
- const snackInfo = {
- open: false,
- text: "",
- severity: "",
- }
- handleSnackInfo(snackInfo)
- }
-
- function onButtonClicked() {
- const curriculumValues = [];
- const typeOfResourcesValues = [];
- const teachingStageValues = [];
- const languagesValues = [];
-
- for (let index = 0; index < curriculumComponents.length; index++) {
- const element = curriculumComponents[index];
- if (element.isChecked)
- curriculumValues.push(element.value);
- }
-
- for (let index = 0; index < typeOfResources.length; index++) {
- const element = typeOfResources[index];
- if (element.isChecked)
- typeOfResourcesValues.push(element.value);
+ const history = useHistory();
+ const { state } = useContext(Store)
+
+ const [currOption, setCurrOption] = useState('');
+ const [currOrder, serCurrOrder] = useState('review_average');
+ const [currQuery, setCurrQuery] = useState('');
+ const [currPage, setCurrPage] = useState(0);
+ const [currCurriculumValues, setCurrCurriculumValues] = useState('');
+ const [currTypeOfResValues, setCurrTypeOfResValues] = useState('');
+ const [currTeachingStageValues, setCurrTeachingStageValues] = useState('');
+ const [currLanguagesValues, setCurrLanguagesValues] = useState('');
+ const [currTag, setCurrTag] = useState('');
+ const [isLoading, setIsLoading] = useState(false);
+ const [error, setError] = useState(false);
+ const [snackInfo, setSnackInfo] = useState({
+ open: false,
+ text: "",
+ severity: "",
+ });
+
+ const [curriculumComponents, setCurriculumComponents] = useState([]);
+ const [typeOfResources, setTypeOfResources] = useState([]);
+ const [teachingStage, setTeachingStage] = useState([]);
+ const [languages, setLanguages] = useState([]);
+ const [tag, setTag] = useState('');
+
+ const [resourcesArray, setResourcesArray] = useState([]);
+ const [totalResources, setTotalResources] = useState(0);
+
+ const [collectionsArray, setCollectionsArray] = useState([])
+ const [totalCollections, setTotalCollections] = useState(0);
+
+ const [usersArray, setUsersArray] = useState([])
+ const [totalUsers, setTotalUsers] = useState(0);
+
+ const options = [
+ { value: 'Recursos', name: 'LearningObject', color: state.contrast === "" ? '#ff7f00' : "yellow" },
+ { value: 'Coleções', name: 'Collection', color: state.contrast === "" ? '#673ab7' : "yellow" },
+ { value: 'Usuários', name: 'User', color: state.contrast === "" ? '#00bcd4' : "yellow" },
+ ];
+
+ const orders = [
+ { value: 'Mais Estrelas', name: 'review_average', color: state.contrast === "" ? '#ff7f00' : "yellow" },
+ { value: 'Mais Relevante', name: 'score', color: state.contrast === "" ? '#ff7f00' : "yellow" },
+ { value: 'Mais Baixados', name: 'downloads', color: state.contrast === "" ? '#ff7f00' : "yellow" },
+ { value: 'Mais Favoritados', name: 'likes', color: state.contrast === "" ? '#ff7f00' : "yellow" },
+ { value: 'Mais Recentes', name: 'publicationdesc', color: state.contrast === "" ? '#ff7f00' : "yellow" },
+ { value: 'Ordem Alfabética', name: 'title', color: state.contrast === "" ? '#ff7f00' : "yellow" },
+ ];
+
+ function handleSnackInfo(info) {
+ setSnackInfo({ ...info })
}
- for (let index = 0; index < teachingStage.length; index++) {
- const element = teachingStage[index];
- if (element.isChecked)
- teachingStageValues.push(element.value);
- }
-
- for (let index = 0; index < languages.length; index++) {
- const element = languages[index];
- if (element.isChecked)
- languagesValues.push(element.value);
+ function handleCloseSnack() {
+ const snackInfo = {
+ open: false,
+ text: "",
+ severity: "",
+ }
+ handleSnackInfo(snackInfo)
}
- let url = `/busca?page=0&results_per_page=12&query=${currQuery}&search_class=${currOption}`
+ function onButtonClicked() {
+ const curriculumValues = [];
+ const typeOfResourcesValues = [];
+ const teachingStageValues = [];
+ const languagesValues = [];
- if (currOption !== 'User') {
- url = url + `&order=${currOrder}`
- if (currOption === 'LearningObject') {
- if (curriculumValues.length >= 1) {
- url = url + `&subjects=${curriculumValues}`
+ for (let index = 0; index < curriculumComponents.length; index++) {
+ const element = curriculumComponents[index];
+ if (element.isChecked)
+ curriculumValues.push(element.value);
}
- if (typeOfResourcesValues.length >= 1) {
- url = url + `&object_types=${typeOfResourcesValues}`
+
+ for (let index = 0; index < typeOfResources.length; index++) {
+ const element = typeOfResources[index];
+ if (element.isChecked)
+ typeOfResourcesValues.push(element.value);
}
- if (teachingStageValues.length >= 1) {
- url = url + `&educational_stages=${teachingStageValues}`
+
+ for (let index = 0; index < teachingStage.length; index++) {
+ const element = teachingStage[index];
+ if (element.isChecked)
+ teachingStageValues.push(element.value);
}
- if (languagesValues.length >= 1) {
- url = url + `&languages=${languagesValues}`
+
+ for (let index = 0; index < languages.length; index++) {
+ const element = languages[index];
+ if (element.isChecked)
+ languagesValues.push(element.value);
}
- if (tag && tag.length >= 1)
- url = url + `&tags=${tag}`
- }
- }
- history.push(url);
- }
+ let url = `/busca?page=0&results_per_page=12&query=${currQuery}&search_class=${currOption}`
+
+ if (currOption !== 'User') {
+ url = url + `&order=${currOrder}`
+ if (currOption === 'LearningObject') {
+ if (curriculumValues.length >= 1) {
+ url = url + `&subjects=${curriculumValues}`
+ }
+ if (typeOfResourcesValues.length >= 1) {
+ url = url + `&object_types=${typeOfResourcesValues}`
+ }
+ if (teachingStageValues.length >= 1) {
+ url = url + `&educational_stages=${teachingStageValues}`
+ }
+ if (languagesValues.length >= 1) {
+ url = url + `&languages=${languagesValues}`
+ }
+ if (tag && tag.length >= 1)
+ url = url + `&tags=${tag}`
+ }
+ }
- function resetFilters() {
- for (let index = 0; index < filtersCurriculum.length; index++) {
- if (filtersCurriculum[index].isChecked)
- filtersCurriculum[index].isChecked = false;
- }
- for (let index = 0; index < filtersLanguages.length; index++) {
- if (filtersLanguages[index].isChecked)
- filtersLanguages[index].isChecked = false;
- }
- for (let index = 0; index < filtersStages.length; index++) {
- if (filtersStages[index].isChecked)
- filtersStages[index].isChecked = false;
+ history.push(url);
}
- for (let index = 0; index < filtersTypes.length; index++) {
- if (filtersTypes[index].isChecked)
- filtersTypes[index].isChecked = false;
- }
- setTag('')
- }
-
- function handleChangeOption(e) {
- const value = e.target.value;
- let url;
-
- if (value !== 'User')
- url = `/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=${value}`
- else
- url = `/busca?page=0&results_per_page=12&query=*&search_class=${value}`
- resetFilters()
- history.push(url);
- }
-
- function handleChangeOrder(e) {
- const value = e.target.value;
- let url = `/busca?page=0&results_per_page=12&query=${currQuery}&search_class=${currOption}`
-
- if (currOption !== 'User') {
- url = url + `&order=${value}`
- if (currOption === 'LearningObject') {
- if (currCurriculumValues) {
- url = url + `&subjects=${currCurriculumValues}`
+ function resetFilters() {
+ for (let index = 0; index < filtersCurriculum.length; index++) {
+ if (filtersCurriculum[index].isChecked)
+ filtersCurriculum[index].isChecked = false;
}
- if (currTypeOfResValues) {
- url = url + `&object_types=${currTypeOfResValues}`
+ for (let index = 0; index < filtersLanguages.length; index++) {
+ if (filtersLanguages[index].isChecked)
+ filtersLanguages[index].isChecked = false;
}
- if (currTeachingStageValues) {
- url = url + `&educational_stages=${currTeachingStageValues}`
+ for (let index = 0; index < filtersStages.length; index++) {
+ if (filtersStages[index].isChecked)
+ filtersStages[index].isChecked = false;
}
- if (currLanguagesValues) {
- url = url + `&languages=${currLanguagesValues}`
+ for (let index = 0; index < filtersTypes.length; index++) {
+ if (filtersTypes[index].isChecked)
+ filtersTypes[index].isChecked = false;
}
- if (currTag)
- url = url + `&tags=${currTag}`
- }
+ setTag('')
}
- history.push(url);
- }
+ function handleChangeOption(e) {
+ const value = e.target.value;
+ let url;
- function handleNextPage() {
- const nextPage = currPage + 1;
- let url = `/busca?page=${nextPage}&results_per_page=12&query=${currQuery}&search_class=${currOption}`
+ if (value !== 'User')
+ url = `/busca?page=0&results_per_page=12&order=review_average&query=${currQuery}&search_class=${value}`
+ else
+ url = `/busca?page=0&results_per_page=12&query=${currQuery}&search_class=${value}`
- if (currOption !== 'User') {
- url = url + `&order=${currOrder}`
- if (currOption === 'LearningObject') {
- if (currCurriculumValues) {
- url = url + `&subjects=${currCurriculumValues}`
- }
- if (currTypeOfResValues) {
- url = url + `&object_types=${currTypeOfResValues}`
- }
- if (currTeachingStageValues) {
- url = url + `&educational_stages=${currTeachingStageValues}`
+ resetFilters()
+ history.push(url);
+ }
+
+ function handleChangeOrder(e) {
+ const value = e.target.value;
+ let url = `/busca?page=0&results_per_page=12&query=${currQuery}&search_class=${currOption}`
+
+ if (currOption !== 'User') {
+ url = url + `&order=${value}`
+ if (currOption === 'LearningObject') {
+ if (currCurriculumValues) {
+ url = url + `&subjects=${currCurriculumValues}`
+ }
+ if (currTypeOfResValues) {
+ url = url + `&object_types=${currTypeOfResValues}`
+ }
+ if (currTeachingStageValues) {
+ url = url + `&educational_stages=${currTeachingStageValues}`
+ }
+ if (currLanguagesValues) {
+ url = url + `&languages=${currLanguagesValues}`
+ }
+ if (currTag)
+ url = url + `&tags=${currTag}`
+ }
}
- if (currLanguagesValues) {
- url = url + `&languages=${currLanguagesValues}`
+
+ history.push(url);
+ }
+
+ function handleNextPage() {
+ const nextPage = currPage + 1;
+ let url = `/busca?page=${nextPage}&results_per_page=12&query=${currQuery}&search_class=${currOption}`
+
+ if (currOption !== 'User') {
+ url = url + `&order=${currOrder}`
+ if (currOption === 'LearningObject') {
+ if (currCurriculumValues) {
+ url = url + `&subjects=${currCurriculumValues}`
+ }
+ if (currTypeOfResValues) {
+ url = url + `&object_types=${currTypeOfResValues}`
+ }
+ if (currTeachingStageValues) {
+ url = url + `&educational_stages=${currTeachingStageValues}`
+ }
+ if (currLanguagesValues) {
+ url = url + `&languages=${currLanguagesValues}`
+ }
+ if (currTag)
+ url = url + `&tags=${currTag}`
+ }
}
- if (currTag)
- url = url + `&tags=${currTag}`
- }
+ history.push(url);
}
- history.push(url);
- }
-
- function handlePreviousPage() {
- const previousPage = currPage - 1;
- let url = `/busca?page=${previousPage}&results_per_page=12&query=${currQuery}&search_class=${currOption}`
-
- if (currOption !== 'User') {
- url = url + `&order=${currOrder}`
- if (currOption === 'LearningObject') {
- if (currCurriculumValues) {
- url = url + `&subjects=${currCurriculumValues}`
+
+ function handlePreviousPage() {
+ const previousPage = currPage - 1;
+ let url = `/busca?page=${previousPage}&results_per_page=12&query=${currQuery}&search_class=${currOption}`
+
+ if (currOption !== 'User') {
+ url = url + `&order=${currOrder}`
+ if (currOption === 'LearningObject') {
+ if (currCurriculumValues) {
+ url = url + `&subjects=${currCurriculumValues}`
+ }
+ if (currTypeOfResValues) {
+ url = url + `&object_types=${currTypeOfResValues}`
+ }
+ if (currTeachingStageValues) {
+ url = url + `&educational_stages=${currTeachingStageValues}`
+ }
+ if (currLanguagesValues) {
+ url = url + `&languages=${currLanguagesValues}`
+ }
+ if (currTag)
+ url = url + `&tags=${currTag}`
+ }
}
- if (currTypeOfResValues) {
- url = url + `&object_types=${currTypeOfResValues}`
+ history.push(url);
+ }
+
+ function handleSuccess(data, headers, option) {
+ if (option === 'LearningObject') {
+ setResourcesArray(data)
+ if (headers.has('X-Total-Count')) {
+ setTotalResources(headers.get('X-Total-Count'));
+ }
}
- if (currTeachingStageValues) {
- url = url + `&educational_stages=${currTeachingStageValues}`
+ else if (option === 'Collection') {
+ setCollectionsArray(data)
+ if (headers.has('X-Total-Count')) {
+ setTotalCollections(headers.get('X-Total-Count'));
+ }
}
- if (currLanguagesValues) {
- url = url + `&languages=${currLanguagesValues}`
+ else {
+ setUsersArray(data);
+ if (headers.has('X-Total-Count')) {
+ setTotalUsers(headers.get('X-Total-Count'));
+ }
}
- if (currTag)
- url = url + `&tags=${currTag}`
- }
- }
- history.push(url);
- }
-
- function handleSuccess(data, headers, option) {
- if (option === 'LearningObject') {
- setResourcesArray(data)
- if (headers.has('X-Total-Count')) {
- setTotalResources(headers.get('X-Total-Count'));
- }
- }
- else if (option === 'Collection') {
- setCollectionsArray(data)
- if (headers.has('X-Total-Count')) {
- setTotalCollections(headers.get('X-Total-Count'));
- }
- }
- else {
- setUsersArray(data);
- if (headers.has('X-Total-Count')) {
- setTotalUsers(headers.get('X-Total-Count'));
- }
+ setIsLoading(false);
}
- setIsLoading(false);
- }
-
- function handleFail() {
- const snackInfo = {
- open: true,
- text: "Houve um erro ao carregar os dados!",
- severity: "warning",
- }
- handleSnackInfo(snackInfo)
- setError(true);
- setIsLoading(false);
- }
-
- function handleSubjects(subjectsString) {
- if (subjectsString) {
- const selectedSubjects = subjectsString.split(',');
- for (let i = 0; i < selectedSubjects.length; i++) {
- const elementOfSelectedSubs = selectedSubjects[i];
- for (let j = 0; j < filtersCurriculum.length; j++) {
- if (elementOfSelectedSubs === filtersCurriculum[j].value)
- filtersCurriculum[j].isChecked = true;
+
+ function handleFail() {
+ const snackInfo = {
+ open: true,
+ text: "Houve um erro ao carregar os dados!",
+ severity: "warning",
}
- }
+ handleSnackInfo(snackInfo)
+ setError(true);
+ setIsLoading(false);
}
- setCurriculumComponents(filtersCurriculum);
- }
-
- function handleObjectTypes(objectTypesString) {
- if (objectTypesString) {
- const selectedObjectTypes = objectTypesString.split(',');
- for (let i = 0; i < selectedObjectTypes.length; i++) {
- const elementOfSelectedObjectTypes = selectedObjectTypes[i];
- for (let j = 0; j < filtersTypes.length; j++) {
- if (elementOfSelectedObjectTypes === filtersTypes[j].value)
- filtersTypes[j].isChecked = true;
+
+ function handleSubjects(subjectsString) {
+ if (subjectsString) {
+ const selectedSubjects = subjectsString.split(',');
+ for (let i = 0; i < selectedSubjects.length; i++) {
+ const elementOfSelectedSubs = selectedSubjects[i];
+ for (let j = 0; j < filtersCurriculum.length; j++) {
+ if (elementOfSelectedSubs === filtersCurriculum[j].value)
+ filtersCurriculum[j].isChecked = true;
+ }
+ }
}
- }
+ setCurriculumComponents(filtersCurriculum);
}
- setTypeOfResources(filtersTypes);
- }
-
- function handleLanguages(languagesString) {
- if (languagesString) {
- const selectedLanguages = languagesString.split(',');
-
- for (let i = 0; i < selectedLanguages.length; i++) {
- const elementOfSelectedLanguages = selectedLanguages[i];
- for (let j = 0; j < filtersLanguages.length; j++) {
- if (elementOfSelectedLanguages === filtersLanguages[j].value)
- filtersLanguages[j].isChecked = true;
+
+ function handleObjectTypes(objectTypesString) {
+ if (objectTypesString) {
+ const selectedObjectTypes = objectTypesString.split(',');
+ for (let i = 0; i < selectedObjectTypes.length; i++) {
+ const elementOfSelectedObjectTypes = selectedObjectTypes[i];
+ for (let j = 0; j < filtersTypes.length; j++) {
+ if (elementOfSelectedObjectTypes === filtersTypes[j].value)
+ filtersTypes[j].isChecked = true;
+ }
+ }
}
- }
+ setTypeOfResources(filtersTypes);
}
- setLanguages(filtersLanguages);
- }
-
- function handleStages(stagesString) {
- if (stagesString) {
- const selectedStages = stagesString.split(',');
-
- for (let i = 0; i < selectedStages.length; i++) {
- const elementOfSelectedStages = selectedStages[i];
- for (let j = 0; j < filtersStages.length; j++) {
- if (elementOfSelectedStages === filtersStages[j].value)
- filtersStages[j].isChecked = true;
+
+ function handleLanguages(languagesString) {
+ if (languagesString) {
+ const selectedLanguages = languagesString.split(',');
+
+ for (let i = 0; i < selectedLanguages.length; i++) {
+ const elementOfSelectedLanguages = selectedLanguages[i];
+ for (let j = 0; j < filtersLanguages.length; j++) {
+ if (elementOfSelectedLanguages === filtersLanguages[j].value)
+ filtersLanguages[j].isChecked = true;
+ }
+ }
}
- }
+ setLanguages(filtersLanguages);
}
- setTeachingStage(filtersStages);
- }
-
- useEffect(() => {
- setIsLoading(true)
-
- const urlParams = new URLSearchParams(window.location.search);
- const query = urlParams.get("query");
- const searchClass = urlParams.get("search_class");
- const page = parseInt(urlParams.get("page"));
- const order = urlParams.get("order");
- const subjects = urlParams.get("subjects");
- const objectTypes = urlParams.get("object_types");
- const educationalStages = urlParams.get("educational_stages");
- const languages = urlParams.get("languages");
- const tags = urlParams.get("tags");
-
- setCurrOption(searchClass);
- setCurrQuery(query);
- setCurrPage(page);
- serCurrOrder(order);
- setCurrCurriculumValues(subjects);
- setCurrLanguagesValues(languages);
- setCurrTeachingStageValues(educationalStages);
- setCurrTypeOfResValues(objectTypes);
- setCurrTag(tags);
- setTag(tags);
-
- handleSubjects(subjects);
- handleObjectTypes(objectTypes);
- handleStages(educationalStages);
- handleLanguages(languages);
-
- let url = `/search?page=${page}&results_per_page=12&query=${query}&search_class=${searchClass}`
-
- if (searchClass !== 'User') {
- url = url + `&order=${order}`
- if (searchClass === 'LearningObject') {
- if (subjects) {
- url = url + `&subjects[]=${subjects}`
- }
- if (objectTypes) {
- url = url + `&object_types[]=${objectTypes}`
- }
- if (educationalStages) {
- url = url + `&educational_stages[]=${educationalStages}`
- }
- if (languages) {
- url = url + `&languages[]=${languages}`
+
+ function handleStages(stagesString) {
+ if (stagesString) {
+ const selectedStages = stagesString.split(',');
+
+ for (let i = 0; i < selectedStages.length; i++) {
+ const elementOfSelectedStages = selectedStages[i];
+ for (let j = 0; j < filtersStages.length; j++) {
+ if (elementOfSelectedStages === filtersStages[j].value)
+ filtersStages[j].isChecked = true;
+ }
+ }
}
- if (tags)
- url = url + `&tags[]=${tags}`
- }
+ setTeachingStage(filtersStages);
}
- getRequest(
- url,
- (data, headers) => { handleSuccess(data, headers, searchClass) },
- handleFail,
- );
-
- }, [window.history.state === null ? true : window.history.state.key, state.currentUser.id])
-
- if (error)
- return (
- <MainPageError>
- <Snackbar
- open={snackInfo.open}
- autoHideDuration={6000}
- onClose={handleCloseSnack}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- >
- <Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
- {snackInfo.text}
- </Alert>
- </Snackbar>
- <Error />
- </MainPageError>
- )
- else
- return (
- <MainPage>
- <Snackbar
- open={snackInfo.open}
- autoHideDuration={6000}
- onClose={handleCloseSnack}
- anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
- >
- <Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
- {snackInfo.text}
- </Alert>
- </Snackbar>
- <StyledBreadCrumbs>
- <Link to='/'>Página Inicial</Link>
- <span>Busca</span>
- </StyledBreadCrumbs>
- <HeaderFilters
- options={options}
- orders={orders}
- currOption={currOption}
- currOrder={currOrder}
- handleChangeOption={handleChangeOption}
- handleChangeOrder={handleChangeOrder}
- />
- {
- currOption === 'LearningObject' &&
- <Fragment>
- <SearchExpansionPanel
- setTag={(tag) => setTag(tag)}
- curriculumComponents={curriculumComponents}
- setCurriculum={(array) => { setCurriculumComponents(array) }}
- typeOfResources={typeOfResources}
- setTypeRes={(array) => { setTypeOfResources(array) }}
- teachingStage={teachingStage}
- setTeachingStage={(array) => { setTeachingStage(array) }}
- languages={languages}
- setLanguages={(array) => { setLanguages(array) }}
- />
- {
- <FilterSummary
- curriculumComponents={curriculumComponents}
- typeOfResources={typeOfResources}
- languages={languages}
- teachingStage={teachingStage}
- tag={tag}
- onButtonClicked={onButtonClicked}
- />
+ useEffect(() => {
+ setIsLoading(true)
+
+ const urlParams = new URLSearchParams(window.location.search);
+ const query = urlParams.get("query");
+ const searchClass = urlParams.get("search_class");
+ const page = parseInt(urlParams.get("page"));
+ const order = urlParams.get("order");
+ const subjects = urlParams.get("subjects");
+ const objectTypes = urlParams.get("object_types");
+ const educationalStages = urlParams.get("educational_stages");
+ const languages = urlParams.get("languages");
+ const tags = urlParams.get("tags");
+
+ setCurrOption(searchClass);
+ setCurrQuery(query);
+ setCurrPage(page);
+ serCurrOrder(order);
+ setCurrCurriculumValues(subjects);
+ setCurrLanguagesValues(languages);
+ setCurrTeachingStageValues(educationalStages);
+ setCurrTypeOfResValues(objectTypes);
+ setCurrTag(tags);
+ setTag(tags);
+
+ handleSubjects(subjects);
+ handleObjectTypes(objectTypes);
+ handleStages(educationalStages);
+ handleLanguages(languages);
+
+ let url = `/search?page=${page}&results_per_page=12&query=${query}&search_class=${searchClass}`
+
+ if (searchClass !== 'User') {
+ url = url + `&order=${order}`
+ if (searchClass === 'LearningObject') {
+ if (subjects) {
+ url = url + `&subjects[]=${subjects}`
+ }
+ if (objectTypes) {
+ url = url + `&object_types[]=${objectTypes}`
+ }
+ if (educationalStages) {
+ url = url + `&educational_stages[]=${educationalStages}`
+ }
+ if (languages) {
+ url = url + `&languages[]=${languages}`
+ }
+ if (tags)
+ url = url + `&tags[]=${tags}`
}
- <ResourceTemplate
- handleNextPage={handleNextPage}
- handlePreviousPage={handlePreviousPage}
- isLoading={isLoading}
- currPage={currPage}
- resources={resourcesArray}
- totalResources={totalResources}
- />
- </Fragment>
}
getRequest(
@@ -610,25 +526,26 @@ export default function Search() {
}
const MainPage = styled.div`
- width: 90%;
- margin: 1em auto;
+ padding: 1em 0;
+ width: 90%;
+ margin: 0 auto;
`
-const MainPageError = styled.div`
- width: 90%;
- margin: 1em auto;
- display: flex;
- justify-content: center;
- align-items: center;
- padding: 1em;
+const MainPageError = styled.div`
+ width: 90%;
+ margin: 0 auto;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 1em;
`
const StyledBreadCrumbs = styled(Breadcrumbs)`
- display: flex;
- justify-content: flex-start;
- span {
- color: #a5a5a5;
- }
- a {
- color: #00bcd4;
- text-decoration: none;
- }
+ display: flex;
+ justify-content: flex-start;
+ span {
+ color: ${props => props.contrast === "" ? "#a5a5a5" : "white"};
+ }
+ a {
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ }
`;
diff --git a/src/Pages/SummarizedUserTerms.js b/src/Pages/SummarizedUserTerms.js
new file mode 100644
index 00000000..401530a4
--- /dev/null
+++ b/src/Pages/SummarizedUserTerms.js
@@ -0,0 +1,399 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+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, useState } from 'react';
+import { Store } from '../Store'
+import styled from 'styled-components';
+import Grid from '@material-ui/core/Grid';
+import Fab from '@material-ui/core/Fab';
+import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
+
+import { StyledButton } from '../Components/ButtonAvaliarRecurso.js';
+import { BannerStyle } from './UserTerms';
+
+/*Importação de imagens para o componente*/
+import Handshake from "../img/termos/handshake.svg"
+import Pessoa from "../img/termos/Pessoa.svg"
+import Email from "../img/termos/Email.svg"
+import Seguranca from "../img/termos/Seguranca.svg"
+import Like from "../img/termos/Like.svg";
+import Unlike from "../img/termos/Unlike.svg";
+import Line from "../img/termos/Line.svg";
+
+import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';
+import ArrowUpwardIcon from '@material-ui/icons/ArrowUpward';
+//Image Import
+import { Aberto } from "ImportImages.js";
+import { Fechado } from "ImportImages.js";
+
+const theme = createMuiTheme({
+ palette: {
+ primary: {
+ light: 'orange',
+ main: 'orange',
+ dark: 'orange',
+ contrastText: '#fff',
+ },
+ secondary: {
+ light: 'black',
+ main: 'black',
+ dark: 'black',
+ contrastText: 'yellow',
+ },
+ },
+ });
+
+
+export default function SummarizedUserTerms() {
+ const { state } = useContext(Store)
+ const [slide, updateSlide] = useState(0);
+
+ const handleGoUp = () => {
+ if (slide > 1) {
+ var element = document.getElementById("slide" + (slide - 1).toString());
+ if (element.offsetHeight < state.windowSize.height) element.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' })
+ else element.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'center' })
+ updateSlide(slide - 1);
+ }
+ }
+
+ const handleGoDown = () => {
+ if (slide < 7) {
+ var element = document.getElementById("slide" + (slide + 1).toString());
+ if (element.offsetHeight < state.windowSize.height) element.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' })
+ else element.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'center' })
+ updateSlide(slide + 1);
+ }
+ }
+
+ return (
+ <Content contrast={state.contrast}>
+ <link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap" rel="stylesheet" />
+ <BannerStyle contrast={state.contrast}>
+ <h2 style={{ width: "100%", textAlign: "center", marginTop: "0px", paddingTop: "6rem", marginBottom: "16px", fontSize: "52px", fontFamily: "'Pompiere', cursive", color: "#fff", fontWeight: "500" }}>RESUMO DOS TERMOS DE USO</h2>
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ <StyledButton contrast={state.contrast} onClick={() => window.location.href='/termos'}>
+ Se preferir, veja a versão completa
+ </StyledButton>
+ </div>
+ </BannerStyle>
+ <FloatingButtons>
+ <ThemeProvider theme={theme}>
+ <Fab
+ color={state.contrast === "" ? "primary": "secondary"}
+ aria-label="slide superior"
+ onClick={handleGoUp}
+ style={state.contrast === "" ? {} : {border: "1px solid white"}}
+ >
+ <ArrowUpwardIcon/>
+ </Fab>
+ </ThemeProvider>
+ <ThemeProvider theme={theme}>
+ <Fab
+ color={state.contrast === "" ? "primary": "secondary"}
+ aria-label="slide inferior"
+ onClick={handleGoDown}
+ style={state.contrast === "" ? {} : {border: "1px solid white"}}
+ >
+ <ArrowDownwardIcon/>
+ </Fab>
+ </ThemeProvider>
+ </FloatingButtons>
+ <div className="slides">
+ <div id="slide1" className="tmpl1">
+ <div className="container">
+ <Grid container>
+ <Grid item xs={12} md={8}>
+ <div className="box-text">
+ <p>A Plataforma Integrada MEC RED é parte do Compromisso 6 do 3º Plano de Ação da Parceria para Governo Aberto (OGP-Brasil), que tem por objetivo “incorporar na polÃtica educacional o potencial da cultura digital, de modo a fomentar a autonomia para uso, reuso e adaptação de recursos educacionais digitais, valorizando a pluralidade e a diversidade da educação brasileiraâ€.</p>
+ </div>
+ </Grid>
+ <Grid style={{ display: "flex", justifyContent: "center" }} item xs={12} md={4}>
+ <div className="box-image">
+ <img src={Handshake} alt="handshake" />
+ </div>
+ </Grid>
+ </Grid>
+ </div>
+ </div>
+ <div id="slide2" className="tmpl2">
+ <div className="container">
+ <div className="title">
+ <p>O que é a Plataforma Integrada MEC RED e como ela está organizada?</p>
+ </div>
+ <Grid container>
+ <Grid className="box-text" item xs={12} md={6}>
+ <p>Uma plataforma interativa, colaborativa e criada em software livre, que disponibiliza conteúdos do acervo do MEC e indica conteúdos de parceiros com o objetivo de formar uma rede ativa de educadores interessados em usar, criar e compartilhar recursos educacionais digitais.</p>
+ </Grid>
+ <Grid className="box-text" item xs={12} md={6}>
+ <p><strong>Repositório</strong> de recursos educacionais digitais que permite aos usuários cadastrados a publicação de seus materiais e <strong>Referatório</strong> que aponta links para conteúdos em sites externos.</p>
+ </Grid>
+ </Grid>
+ </div>
+ </div>
+ <div id="slide3" className="tmpl3">
+ <div className="container">
+ <Grid className="title" container>
+ <Grid item xs={12}>
+ <p>Os recursos educacionais disponibilizados podem ser de dois tipos:</p>
+ </Grid>
+ </Grid>
+ <Grid container>
+ <Grid item xs={12} md={6}>
+ <div className="box-text">
+ <img src={Aberto} alt="Aberto" />
+ <p><strong>Abertos</strong>: recursos sem nenhuma restrição de acesso e<br /> com flexibilidade quanto ao uso ou reuso.</p>
+ </div>
+ <div className="box-text">
+ <img src={Fechado} alt="Fechado" />
+ <p><strong>Fechados</strong>: recursos com alguma restrição de acesso, uso<br /> ou reuso, como aqueles que, para acesso, há demanda de<br /> cadastro ou que têm licenças restritivas.</p>
+ </div>
+ </Grid>
+ <Grid item xs={12} md={6}>
+ <Grid item xs={12} md={12}>
+ <div className="box-text">
+ <p>Como repositório, a Plataforma hospeda somente Recursos Educacionais Abertos (REA). Todo conteúdo inserido por usuários deve ser aberto.</p>
+ </div>
+ </Grid>
+ <Grid item xs={12} md={12}>
+ <div className="box-text">
+ <p>Como referatório, a Plataforma aponta links para parceiros, e<br /> esses recursos podem ser abertos ou fechados.</p>
+ </div>
+ </Grid>
+ </Grid>
+ </Grid>
+ </div>
+ </div>
+ <div id="slide4" className="tmpl4">
+ <div className="container">
+ <Grid container>
+ <Grid item xs={12} md={6}>
+ <p className="title">Como se cadastrar?</p>
+ <div className="box-text">
+ <p>Para criar uma conta, o usuário deverá clicar no botão “Cadastre-se†na página inicial da Plataforma e fazer um cadastro utilizando um endereço de e-mail e criando uma senha.</p>
+ </div>
+ </Grid>
+ <Grid item xs={4} md={2} style={{ alignSelf: "center" }}> <img style={{ width: "10vh", height: "10vh", verticalAlign: "middle", margin: "auto", display: "block" }} src={Pessoa} alt="Pessoa" /> </Grid>
+ <Grid item xs={4} md={2} style={{ alignSelf: "center" }}> <img style={{ width: "10vh", height: "10vh", verticalAlign: "middle", margin: "auto", display: "block" }} src={Email} alt="Email" /> </Grid>
+ <Grid item xs={4} md={2} style={{ alignSelf: "center" }}> <img style={{ width: "10vh", height: "10vh", verticalAlign: "middle", margin: "auto", display: "block" }} src={Seguranca} alt="Seguranca" /> </Grid>
+ </Grid>
+ </div>
+ </div>
+ <div id="slide5" className="tmpl5">
+ <div className="container">
+ <Grid container>
+ <Grid item xs={12} md={6}>
+ <div className="title">
+ <img src={Like} alt="Like" />
+ <p>O que publicar?</p>
+ </div>
+ <img src={Line} alt="Line" style={{margin: "auto", display: "block"}}/>
+ <div className="box-text">
+ <p className="box-text">Conteúdos de cunho educacional e pertinentes ao assunto no qual estão inseridos, de autoria do usuário, de autoria coletiva (com consentimento dos demais autores) ou que estejam no domÃnio público. </p>
+ </div>
+ </Grid>
+ <Grid item xs={12} md={6}>
+ <div className="title">
+ <img src={Unlike} alt="Unlike" />
+ <p>O que não publicar?</p>
+ </div>
+ <img src={Line} alt="Line" style={{margin: "auto", display: "block"}}/>
+ <div className="box-text">
+ <p className="box-text">Materiais ofensivos, pornográficos, relacionados a atividades ilegais, que invadam a privacidade de terceiros, que violem a legislação de Direito Autoral ou os Direitos Humanos. Propagandas, conteúdos com vÃrus, spam ou comentários abusivos.</p>
+ </div>
+ </Grid>
+ </Grid>
+ </div>
+ </div>
+ <div id="slide6" className="tmpl6">
+ <div className="container">
+ <Grid container>
+ <Grid item xs={12} md={7}>
+ <div className="title">
+ <p>Direitos do autor e licenças de uso</p>
+ </div>
+ <div className="box-text">
+ <p>Ao inserir um novo material de sua autoria no Repositório, o usuário deverá escolher um dos tipos de licença aberta disponÃveis na Plataforma:</p>
+ </div>
+ <div className="box-text">
+ <Grid container>
+ <Grid item xs={3} className="licenses">
+ <p>CC-BY</p>
+ </Grid>
+ <Grid item xs={3} className="licenses">
+ <p>CC-BY-SA</p>
+ </Grid>
+ <Grid item xs={3} className="licenses">
+ <p>CC-BY-NC</p>
+ </Grid>
+ <Grid item xs={3} className="licenses">
+ <p>CC-BY-NC-SA</p>
+ </Grid>
+ </Grid>
+ </div>
+ </Grid>
+ <Grid item xs={12} md={5}>
+ <Grid container>
+ <Grid item xs={12} md={2} className="licenses">
+ <p>CC-BY</p>
+ </Grid>
+ <Grid item xs={12} md={10} className="box-text">
+ <p> significa que o autor permite que distribuam, remixem, adaptem e criem a partir do seu trabalho, desde que lhe atribuam o devido crédito pela criação original</p>
+ </Grid>
+ </Grid>
+ <Grid container>
+ <Grid item xs={12} md={2} className="licenses">
+ <p>NC</p>
+ </Grid>
+ <Grid item xs={12} md={10} className="box-text">
+ <p> indica que as criações elaboradas a partir do trabalho do autor podem ser utilizadas somente para fins não comerciais (se não houver esta especificação, o novo recurso poderá ser utilizado para fins comerciais)</p>
+ </Grid>
+ </Grid>
+ <Grid container>
+ <Grid item xs={12} md={2} className="licenses">
+ <p>SA</p>
+ </Grid>
+ <Grid item xs={12} md={10} className="box-text">
+ <p> quer dizer que as novas criações devem ser licenciadas sob termos idênticos aos do trabalho original</p>
+ </Grid>
+ </Grid>
+ </Grid>
+ </Grid>
+ </div>
+ </div>
+ <div id="slide7" className="tmpl7">
+ <div className="container">
+ <Grid container xs={12}>
+ <Grid className="title" item xs={12} md={6}>
+ <p>Respeitamos a sua privacidade</p>
+ </Grid>
+ <Grid item xs={12} md={6}>
+ <Grid item xs={12} md={12} className="box-text">
+ <p>Além de solicitar alguns dados pessoais para o cadastro, a Plataforma coleta, de forma automática, os dados não pessoais relativos à interação dos usuários no sistema. Esses dados nunca serão fornecidos para fins comerciais, assim como nunca serão compartilhados quaisquer dados pessoais que possam identificar o usuário.</p>
+ </Grid>
+ <Grid item xs={12} md={12} className="box-text">
+ <p>Os dados anônimos poderão ser utilizados para fins de melhoria da plataforma, transparência e para o uso em pesquisas.</p>
+ </Grid>
+ </Grid>
+ </Grid>
+ <Grid container xs={12}>
+ <div className="title">
+ <p>Dúvidas? Leia a <a href="/termos">versão completa dos termos de uso</a> ou fale conosco por meio do <a href="/contato">formulário de contato</a>.</p>
+ </div>
+ </Grid>
+ </div>
+ </div>
+ </div>
+ </Content>
+ )
+}
+
+const FloatingButtons = styled.div`
+ display: flex;
+ flex-direction: column;
+ position: fixed !important;
+ top: 50%;
+ -ms-transform: translateY(-50%);
+ transform: translateY(-50%);
+ right: 15px;
+ Fab {
+ margin: 15px;
+ }
+`
+
+const Content = styled.div`
+
+ color: white;
+
+ text-align: left;
+
+ p {
+ margin: 0;
+ }
+
+ a {
+ text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"};
+ color: ${props => props.contrast === "" ? "" : "yellow"};
+ }
+
+ .slides > div {
+ min-height: 500px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border: 1px solid ${props => props.contrast === "" ? "inherit" : "white"};
+ border-radius: 20px;
+ margin: 25px;
+ }
+
+ .box-text {
+ font-family: "Roboto", regular;
+ display: flex;
+ padding: 25px;
+ img {
+ width: 10vh;
+ height: 10vh;
+ vertical-align: middle;
+ }
+ font-size: 1.1em;
+ }
+
+ .title {
+ font-family: "Pompiere", regular;
+ padding: 25px;
+ text-align: center;
+ font-size: 3em;
+ }
+
+ .licenses {
+ text-align: center;
+ margin: auto;
+ }
+
+ .box-image {
+
+ }
+
+ .tmpl1 {
+ background: ${props => props.contrast === "" ? "#00BCD4" : "black"};
+ }
+
+ .tmpl2 {
+ background: ${props => props.contrast === "" ? "#673AB7" : "black"};
+ }
+
+ .tmpl3 {
+ background: ${props => props.contrast === "" ? "#E81F4F" : "black"};
+ }
+
+ .tmpl4 {
+ background: ${props => props.contrast === "" ? "#FF7F00" : "black"};
+ }
+
+ .tmpl5 {
+ background: ${props => props.contrast === "" ? "#1AB9DE" : "black"};
+ }
+
+ .tmpl6 {
+ background: ${props => props.contrast === "" ? "#673AB7" : "black"};
+ }
+
+ .tmpl7 {
+ background: ${props => props.contrast === "" ? "#E81F4F" : "black"};
+ }
+
+`
\ No newline at end of file
diff --git a/src/Pages/TabsHelp/TabManageAc.js b/src/Pages/TabsHelp/TabManageAc.js
index 6a2edde4..dd9f12bc 100644
--- a/src/Pages/TabsHelp/TabManageAc.js
+++ b/src/Pages/TabsHelp/TabManageAc.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 styled from "styled-components";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
@@ -31,263 +31,242 @@ import CardParticipando from "../../Components/HelpCenter/Cards/CardParticipando
import CardEncontrando from "../../Components/HelpCenter/Cards/CardEncontrando";
import CardPublicando from "../../Components/HelpCenter/Cards/CardPublicando";
import { Link } from "react-router-dom";
+import { Store } from '../../Store';
//Image Import
import { GerenciandoConta } from "ImportImages.js";
export default function TabManageAc(props) {
- const tabs = [
- "Por que me cadastrar?",
- "Como fazer meu cadastro?",
- "Como alterar minha senha?",
- "Como acessar a conta?",
- "Esqueci minha senha. O que fazer?",
- "Gerenciando a Conta"
- ];
-
- const [tabValue, setTabValue] = useState(props.location.state === "undefined" ? 0 : props.location.state);
-
- const handleChangeTab = (e, newValue) => {
- setTabValue(newValue);
- };
-
- useEffect(() => { window.scrollTo(0, 0) }, [])
-
- return (
- <div style={{ backgroundColor: "#f4f4f4" }}>
- <link
- href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap"
- rel="stylesheet"
- />
-
- <Secao>
- <BreadCrumbsDiv>
- <StyledBreadCrumbs>
- <Link to="/">Página Inicial</Link>
- <Link to="ajuda">Ajuda</Link>
-
- <span>{tabs[5]}</span>
- </StyledBreadCrumbs>
- </BreadCrumbsDiv>
- <Grid container justify="center">
- <Grid item xs={12} md={10} >
- <Principal>
- <Menu>
- <div className="fixo">
- <img src={GerenciandoConta} alt="Gerenciando a conta" />
- <span>{tabs[5]}</span>
- </div>
- <TabsStyled orientation="vertical"
- variant="scrollable"
- value={tabValue}
- onChange={handleChangeTab}
- TabIndicatorProps={{ style: { display: "none" } }}
- >
- <TabStyled label={tabs[0]}></TabStyled>
- <TabStyled label={tabs[1]}></TabStyled>
- <TabStyled label={tabs[2]}></TabStyled>
- <TabStyled label={tabs[3]}></TabStyled>
- <TabStyled label={tabs[4]}></TabStyled>
- </TabsStyled>
- <br />
- <div className="voltarInicio">
- <a href="ajuda">VOLTAR AO ÃNICIO</a>
- </div>
- </Menu>
-
- {tabValue === 0 && <Why title={tabs[0]} />}
- {tabValue === 1 && <HowToDo title={tabs[1]} />}
- {tabValue === 2 && <HowToChange title={tabs[2]} />}
- {tabValue === 3 && <HowToAccess title={tabs[3]} />}
- {tabValue === 4 && <Forget title={tabs[4]} />}
- <div className="resultadosProcura">
- <span>Não era bem o que você procurava?</span>
- <div className="subtitulo">
- <span>Você pode navegar pelos tópicos de ajuda ou entrar em <a href="contato">Contato</a>.</span>
- </div>
- </div>
-
- </Principal>
- </Grid>
- </Grid>
-
-
- <Grid style={{ marginBottom: "50px" }} container justify={"center"}>
- <Grid item xs={12} md={3} style={{ margin: 5 }}>
- <CardPublicando />
- </Grid>
- <Grid item xs={12} md={3} style={{ margin: 5 }}>
- <CardEncontrando />
- </Grid>
- <Grid item xs={12} md={3} style={{ margin: 5 }}>
- <CardParticipando />
- </Grid>
- </Grid>
- </Secao>
- </div>
- );
+ const { state } = useContext(Store);
+ const tabs = [
+ "Por que me cadastrar?",
+ "Como fazer meu cadastro?",
+ "Como alterar minha senha?",
+ "Como acessar a conta?",
+ "Esqueci minha senha. O que fazer?",
+ "Gerenciando a Conta"
+ ];
+
+ const [tabValue, setTabValue] = useState(props.location.state === "undefined" ? 0 : props.location.state);
+
+ const handleChangeTab = (e, newValue) => {
+ setTabValue(newValue);
+ };
+
+ useEffect(() => { window.scrollTo(0, 0) }, [])
+
+ return (
+ <div style={state.contrast === "" ? { backgroundColor: "#f4f4f4" } : { backgroundColor: "black" }}>
+ <link
+ href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap"
+ rel="stylesheet"
+ />
+ <Secao>
+ <BreadCrumbsDiv>
+ <StyledBreadCrumbs contrast={state.contrast}>
+ <Link to="/">Página Inicial</Link>
+ <Link to="ajuda">Ajuda</Link>
+ <span>{tabs[5]}</span>
+ </StyledBreadCrumbs>
+ </BreadCrumbsDiv>
+ <Grid container justify="center">
+ <Grid item xs={12} md={10} >
+ <Principal contrast={state.contrast}>
+ <Menu contrast={state.contrast}>
+ <div className="fixo">
+ <img src={GerenciandoConta} alt="Gerenciando a conta" />
+ <span>{tabs[5]}</span>
+ </div>
+ <TabsStyled contrast={state.contrast} orientation="vertical"
+ variant="scrollable"
+ value={tabValue}
+ onChange={handleChangeTab}
+ TabIndicatorProps={{ style: { display: "none" } }}
+ >
+ <TabStyled contrast={state.contrast} label={tabs[0]}></TabStyled>
+ <TabStyled contrast={state.contrast} label={tabs[1]}></TabStyled>
+ <TabStyled contrast={state.contrast} label={tabs[2]}></TabStyled>
+ <TabStyled contrast={state.contrast} label={tabs[3]}></TabStyled>
+ <TabStyled contrast={state.contrast} label={tabs[4]}></TabStyled>
+ </TabsStyled>
+ <br/>
+ <div className="voltarInicio">
+ <a href="ajuda">VOLTAR AO ÃNICIO</a>
+ </div>
+ </Menu>
+ {tabValue === 0 && <Why contrast={state.contrast} title={tabs[0]} />}
+ {tabValue === 1 && <HowToDo contrast={state.contrast} title={tabs[1]} />}
+ {tabValue === 2 && <HowToChange contrast={state.contrast} title={tabs[2]} />}
+ {tabValue === 3 && <HowToAccess contrast={state.contrast} title={tabs[3]} />}
+ {tabValue === 4 && <Forget contrast={state.contrast} title={tabs[4]} />}
+ <div className="resultadosProcura">
+ <span>Não era bem o que você procurava?</span>
+ <div className="subtitulo">
+ <span>Você pode navegar pelos tópicos de ajuda ou entrar em <a href="contato">Contato</a>.</span>
+ </div>
+ </div>
+ </Principal>
+ </Grid>
+ </Grid>
+ <Grid style={{ paddingBottom: "50px" }} container justify={"center"}>
+ <Grid item xs={12} md={3} style={{ margin: 5 }}>
+ <CardPublicando contrast={state.contrast} />
+ </Grid>
+ <Grid item xs={12} md={3} style={{ margin: 5 }}>
+ <CardEncontrando contrast={state.contrast} />
+ </Grid>
+ <Grid item xs={12} md={3} style={{ margin: 5 }}>
+ <CardParticipando contrast={state.contrast} />
+ </Grid>
+ </Grid>
+ </Secao>
+ </div>
+ );
}
const StyledBreadCrumbs = styled(Breadcrumbs)`
- display : flex;
- justify-content : flex-start;
- span {
- color : #a5a5a5;
- }
- a {
- color: #00bcd4;
- text-decoration: none;
- }
-
+ display : flex;
+ justify-content : flex-start;
+ span {
+ color: ${props => props.contrast === "" ? "#a5a5a5" : "white"};
+ }
+ a {
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ }
`
const BreadCrumbsDiv = styled.div`
-
- padding : 10px;
- display : flex;
+ padding : 10px;
+ display : flex;
`
const Principal = styled.div`
- .fixo {
-
- height: 40px;
- text-align: center;
- background-color: #fff;
- padding: 30px;
- margin-bottom: 30px;
- color: #666;
-
-
- img {
- height: 50px;
- width: 50px;
- margin-right: 40px;
- vertical-align: middle;
-
+ .fixo {
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ height: 40px;
+ text-align: center;
+ padding: 30px;
+ margin-bottom: 30px;
+
+ img {
+ height: 50px;
+ width: 50px;
+ margin-right: 40px;
+ vertical-align: middle;
+ }
+
+ span {
+ font-size: 20px;
+ color: ${props => props.contrast === "" ? "" : "white"};
+ }
}
- span {
- font-size: 20px;
- vertical-align: ;
- }
-
-
-
- }
- .resultadosProcura {
- text-align: center;
- margin-block: 30px;
- padding-inline: 15px;
- color: #666;
- span {
- font-size: 24px;
- }
- .subtitulo {
- margin-top: 10px;
-
- span {
- font-size: 15px
- }
-
- a {
- font-size: 15px;
- padding: 0;
- color:#00bcd4;
- text-decoration: none;
- }
-
+ .resultadosProcura {
+ text-align: center;
+ margin-block: 30px;
+ padding-inline: 15px;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ span {
+ font-size: 24px;
+ }
+ .subtitulo {
+ margin-top: 10px;
+
+ span {
+ font-size: 15px
+ }
+
+ a {
+ font-size: 15px;
+ padding: 0;
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ }
+ }
}
- }
-
`
const TabsStyled = styled(Tabs)`
-
- .Mui-selected {
- background-color: #e7e4e4;
- }
-
- .MuiTab-root{
- text-transform: none !important;
- max-width:100%
- }
- text-align: center;
- width:100%
+ color: ${props => props.contrast === "" ? "" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ .Mui-selected {
+ background-color: ${props => props.contrast === "" ? "#e7e4e4" : "rgba(255,255,0,0.24)"};
+ }
+ .MuiTab-root{
+ text-transform: none !important;
+ max-width:100%
+ }
+ text-align: center;
+ width:100%;
`
const TabStyled = styled(Tab)`
-
- padding: 4px 15px !important;
- font-weight: 500;
- font-size: 14px !important;
- border-radius: 4px !important;
- text-align: center;
-
-
-
-
+ color: ${props => props.contrast === "" ? "" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ padding: 4px 15px !important;
+ font-weight: 500;
+ font-size: 14px !important;
+ border-radius: 4px !important;
+ text-align: center;
- &:hover {
- background-color: #e7e4e4;
- }
+ &:hover {
+ background-color: ${props => props.contrast === "" ? "#e7e4e4" : "rgba(255,255,0,0.24)"};
+ }
`
const Menu = styled.div`
- width: auto;
- background-color: #fff;
- color: #666;
- padding-block: 10px;
- box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
- margin-bottom:30px
-
-
- h4 {
- padding-inline: 15px;
- font-size: 18px;
- margin-block: 10px;
- font-weight: 500;
- line-height: 1.1;
- }
-
- .voltarInicio {
- padding: 4px 15px;
- font-size: 15px;
- text-align: center;
- a {
- font-size: 15px;
- padding: 0;
- color:#00bcd4;
- text-decoration: none;
+ width: auto;
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ padding-block: 10px;
+ box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"};
+ margin-bottom:30px
+
+ h4 {
+ padding-inline: 15px;
+ font-size: 18px;
+ margin-block: 10px;
+ font-weight: 500;
+ line-height: 1.1;
}
- }
-
- hr {
- border: 0;
- border-top: 1px solid #ccc;
- margin-top: 20px;
- margin-bottom: 20px;
- }
-
- .procurava {
- padding: 4px 15px;
- font-size: 15px;
- text-align: center;
- a {
- font-size: 15px;
- padding: 0;
- color:#00bcd4;
- text-decoration: none;
+ .voltarInicio {
+ padding: 4px 15px;
+ font-size: 15px;
+ text-align: center;
+ a {
+ font-size: 15px;
+ padding: 0;
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ }
}
- }
+ hr {
+ border: 0;
+ border-top: 1px solid #ccc;
+ margin-top: 20px;
+ margin-bottom: 20px;
+ }
+ .procurava {
+ padding: 4px 15px;
+ font-size: 15px;
+ text-align: center;
+
+ a {
+ font-size: 15px;
+ padding: 0;
+ color:#00bcd4;
+ text-decoration: none;
+ }
+ }
`
const Secao = styled.div`
- margin-inline: auto;
-
+ margin-inline: auto;
`
diff --git a/src/Pages/TabsHelp/TabNetPart.js b/src/Pages/TabsHelp/TabNetPart.js
index 13c13d8c..1eea7cfe 100644
--- a/src/Pages/TabsHelp/TabNetPart.js
+++ b/src/Pages/TabsHelp/TabNetPart.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 styled from 'styled-components';
import Tabs from '@material-ui/core/Tabs'
import Tab from '@material-ui/core/Tab';
@@ -28,10 +28,12 @@ import CardEncontrando from '../../Components/HelpCenter/Cards/CardEncontrando';
import CardPublicando from '../../Components/HelpCenter/Cards/CardPublicando';
import CardGerenciando from '../../Components/HelpCenter/Cards/CardGerenciando';
import { Link } from 'react-router-dom';
+import { Store } from '../../Store';
//Image Import
import { ParticipandoRede } from "ImportImages.js";
+
export default function TabNetPart(props) {
const tabs = [
'Como comentar ou avaliar um recurso?',
@@ -39,6 +41,7 @@ export default function TabNetPart(props) {
'Participando da Rede'
]
+ const { state } = useContext(Store);
const [tabValue, setTabValue] = useState(props.location.state === "undefined" ? 0 : props.location.state);
const handleChangeTab = (e, newValue) => {
@@ -48,12 +51,12 @@ export default function TabNetPart(props) {
useEffect(() => { window.scrollTo(0, 0) }, [])
return (
- <div style={{ backgroundColor: "#f4f4f4" }}>
+ <div style={state.contrast === "" ? { backgroundColor: "#f4f4f4" } : { backgroundColor: "black" }}>
<link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet" />
<Secao>
<BreadCrumbsDiv>
- <StyledBreadCrumbs>
+ <StyledBreadCrumbs contrast={state.contrast}>
<Link to="/" >
Página Inicial
</Link>
@@ -71,20 +74,22 @@ export default function TabNetPart(props) {
</BreadCrumbsDiv>
<Grid container justify="center">
<Grid item xs={12} md={10} >
- <Principal>
- <Menu>
+ <Principal contrast={state.contrast}>
+ <Menu contrast={state.contrast}>
<div className="fixo">
<img src={ParticipandoRede} alt="Participando da Rede" />
<span>{tabs[2]}</span>
</div>
- <TabsStyled orientation="vertical"
+ <TabsStyled
+ contrast={state.contrast}
+ orientation="vertical"
variant="scrollable"
value={tabValue}
onChange={handleChangeTab}
TabIndicatorProps={{ style: { display: "none" } }}
>
- <TabStyled label={tabs[0]}></TabStyled>
- <TabStyled label={tabs[1]}></TabStyled>
+ <TabStyled contrast={state.contrast} label={tabs[0]}></TabStyled>
+ <TabStyled contrast={state.contrast} label={tabs[1]}></TabStyled>
</TabsStyled>
<br />
<div className="voltarInicio">
@@ -92,8 +97,8 @@ export default function TabNetPart(props) {
</div>
</Menu>
- {tabValue === 0 && <How title={tabs[0]} />}
- {tabValue === 1 && <What title={tabs[1]} />}
+ {tabValue === 0 && <How contrast={state.contrast} title={tabs[0]} />}
+ {tabValue === 1 && <What contrast={state.contrast} title={tabs[1]} />}
<div className="resultadosProcura">
<span>Não era bem o que você procurava?</span>
<div className="subtitulo">
@@ -108,13 +113,13 @@ export default function TabNetPart(props) {
<Grid style={{ paddingBottom: "50px" }} container justify={"center"}>
<Grid item xs={12} md={3} style={{ margin: 5 }}>
- <CardPublicando />
+ <CardPublicando contrast={state.contrast} />
</Grid>
<Grid item xs={12} md={3} style={{ margin: 5 }}>
- <CardEncontrando />
+ <CardEncontrando contrast={state.contrast} />
</Grid>
<Grid item xs={12} md={3} style={{ margin: 5 }}>
- <CardGerenciando />
+ <CardGerenciando contrast={state.contrast} />
</Grid>
</Grid>
@@ -123,19 +128,18 @@ export default function TabNetPart(props) {
</div>
);
}
+
const StyledBreadCrumbs = styled(Breadcrumbs)`
display : flex;
justify-content : flex-start;
span {
- color : #a5a5a5;
+ color: ${props => props.contrast === "" ? "#a5a5a5" : "white"};
}
a {
- color: #00bcd4;
- text-decoration: none;
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
}
-
`
-
const BreadCrumbsDiv = styled.div`
padding : 10px;
@@ -145,14 +149,11 @@ const BreadCrumbsDiv = styled.div`
const Principal = styled.div`
.fixo {
-
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
height: 40px;
text-align: center;
- background-color: #fff;
padding: 30px;
margin-bottom: 30px;
- color: #666;
-
img {
height: 50px;
@@ -164,7 +165,7 @@ const Principal = styled.div`
span {
font-size: 20px;
- vertical-align: ;
+ color: ${props => props.contrast === "" ? "" : "white"};
}
@@ -174,7 +175,7 @@ const Principal = styled.div`
text-align: center;
margin-block: 30px;
padding-inline: 15px;
- color: #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
span {
font-size: 24px;
}
@@ -188,8 +189,8 @@ const Principal = styled.div`
a {
font-size: 15px;
padding: 0;
- color:#00bcd4;
- text-decoration: none;
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
}
}
@@ -198,9 +199,10 @@ const Principal = styled.div`
`
const TabsStyled = styled(Tabs)`
-
+ color: ${props => props.contrast === "" ? "" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
.Mui-selected {
- background-color: #e7e4e4;
+ background-color: ${props => props.contrast === "" ? "#e7e4e4" : "rgba(255,255,0,0.24)"};
}
.MuiTab-root{
@@ -213,29 +215,26 @@ const TabsStyled = styled(Tabs)`
`
const TabStyled = styled(Tab)`
-
+ color: ${props => props.contrast === "" ? "" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
padding: 4px 15px !important;
font-weight: 500;
font-size: 14px !important;
border-radius: 4px !important;
text-align: center;
-
-
-
-
&:hover {
- background-color: #e7e4e4;
+ background-color: ${props => props.contrast === "" ? "#e7e4e4" : "rgba(255,255,0,0.24)"};
}
`
const Menu = styled.div`
width: auto;
- background-color: #fff;
- color: #666;
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
padding-block: 10px;
- box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"};
margin-bottom:30px
@@ -254,8 +253,8 @@ const Menu = styled.div`
a {
font-size: 15px;
padding: 0;
- color:#00bcd4;
- text-decoration: none;
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
}
}
@@ -282,7 +281,8 @@ const Menu = styled.div`
`
+
const Secao = styled.div`
margin-inline: auto;
-`
+`
\ No newline at end of file
diff --git a/src/Pages/TabsHelp/TabPlataformaMEC.js b/src/Pages/TabsHelp/TabPlataformaMEC.js
index c704d98f..ad0bb152 100644
--- a/src/Pages/TabsHelp/TabPlataformaMEC.js
+++ b/src/Pages/TabsHelp/TabPlataformaMEC.js
@@ -16,10 +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';
import styled from 'styled-components';
-import Tabs from '@material-ui/core/Tabs'
-import Tab from '@material-ui/core/Tab';
import Breadcrumbs from '@material-ui/core/Breadcrumbs';
import Grid from '@material-ui/core/Grid';
import CardEncontrando from '../../Components/HelpCenter/Cards/CardEncontrando';
@@ -31,248 +29,213 @@ import Which from '../../Components/HelpCenter/TabsPlataformaMEC/Which';
import Types from '../../Components/HelpCenter/TabsPlataformaMEC/Types';
import Software from '../../Components/HelpCenter/TabsPlataformaMEC/Software';
import How from '../../Components/HelpCenter/TabsPlataformaMEC/How';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom';
+import { Store } from '../../Store';
+export default function TabPlataformaMEC(props) {
+ const { state } = useContext(Store);
-
-
-
-
-
-export default function TabPlataformaMEC (props) {
- const tabs= [
+ const tabs = [
'O que é a plataforma MEC?',
'Como foi construÃda a Plataforma MEC?',
'Entendendo as 3 áreas da Plataforma',
'Quais são os Portais Parceiros?',
'Tipos de recursos',
'Softwares especÃficos',
- 'Plataforma MEC'
]
-
+
const [tabValue, setTabValue] = useState(
Number(props.location.state.value) || 0);
- const handleChangeTab = (e, newValue) => {
- setTabValue(newValue)
-}
-
+ const handleChangeTab = (event, index) => {
+ event.preventDefault();
+ setTabValue(index);
+ }
+ return (
+ <MainPage contrast={state.contrast}>
+ <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:300,400&display=swap" rel="stylesheet" />
- return(
- <div style={{backgroundColor:"#f4f4f4"}}>
- <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet"/>
-
<Secao>
<BreadCrumbsDiv>
- <StyledBreadCrumbs>
+ <StyledBreadCrumbs contrast={state.contrast}>
<Link to="/" >
- Página Inicial
+ Página Inicial
</Link>
<Link to="ajuda" >
Ajuda
</Link>
-
+
<span>
- {tabs[6]}
+ Plataforma MEC
</span>
</StyledBreadCrumbs>
</BreadCrumbsDiv>
- <Grid container spacing={4}>
- <Grid item xs={3}>
- <Menu>
- <h4>{tabs[6]}</h4>
- <TabsStyled orientation = "vertical"
- variant = "scrollable"
- value = {tabValue}
- onChange = {handleChangeTab}
- TabIndicatorProps = {{style:{display: "none"}}}
- >
- <TabStyled label={tabs[0]}></TabStyled>
- <TabStyled label={tabs[1]}></TabStyled>
- <TabStyled label={tabs[2]}></TabStyled>
- <TabStyled label={tabs[3]}></TabStyled>
- <TabStyled label={tabs[4]}></TabStyled>
- <TabStyled label={tabs[5]}></TabStyled>
- </TabsStyled>
- <br/>
- <div className="voltarInicio">
- <a href="ajuda">VOLTAR AO ÃNICIO</a>
- </div>
- <hr/>
- <div className="procurava">
- Não encontrou o que procurava? Entre em
- <a href="contato"> contato</a>
- </div>
+
+ <MainGrid container justify='center' spacing={4}>
+ <Grid xs={12} md={3} sm={4} item>
+ <Menu contrast={state.contrast}>
+ <p className="title">
+ Plataforma MEC
+ </p>
+ <div className="sized-box" />
+
+ {
+ tabs.map((tab, index) => {
+ return (
+ <TabStyled contrast={state.contrast} active={index === tabValue} name={index} onClick={(event) => handleChangeTab(event, index)} key={new Date().toISOString() + index}>
+ {tab}
+ </TabStyled>
+ )
+ })
+ }
+
+ <div className="sized-box" />
+ <Link to="ajuda">
+ <p className="go-back">
+ Voltar ao inÃcio
+ </p>
+ </Link>
+
+ <div className="sized-box" />
+ <p className="sub-title">
+ Não encontrou o que procurava? Entre em
+ <Link to="contato">
+ <span className="go-back"> contato</span>
+ </Link>
+ </p>
</Menu>
</Grid>
- <Grid item xs={9}>
+ <Grid xs={12} md={9} sm={8} item>
<Principal>
- {tabValue === 0 && <What title={tabs[0]}/>}
- {tabValue === 1 && <How title={tabs[1]}/>}
- {tabValue === 2 && <Understand title={tabs[2]}/>}
- {tabValue === 3 && <Which title={tabs[3]}/>}
- {tabValue === 4 && <Types title={tabs[4]}/>}
- {tabValue === 5 && <Software title={tabs[5]}/>}
-
- <Grid style={{marginBlock:"50px"}} container spacing={2}>
- <Grid item xs={4}>
- <CardEncontrando/>
- </Grid>
- <Grid item xs={4}>
- <CardParticipando/>
- </Grid>
- <Grid item xs={4}>
- <CardGerenciando/>
- </Grid>
-
- </Grid>
-
+ {tabValue === 0 && <What contrast={state.contrast} title={tabs[0]} />}
+ {tabValue === 1 && <How contrast={state.contrast} title={tabs[1]} />}
+ {tabValue === 2 && <Understand contrast={state.contrast} title={tabs[2]} />}
+ {tabValue === 3 && <Which contrast={state.contrast} title={tabs[3]} />}
+ {tabValue === 4 && <Types contrast={state.contrast} title={tabs[4]} />}
+ {tabValue === 5 && <Software contrast={state.contrast} title={tabs[5]} />}
</Principal>
- </Grid>
- </Grid>
+ </Grid>
+ </MainGrid>
+ <MainGrid container spacing={4}>
+ <Grid xs={12} md={4} item>
+ <CardEncontrando contrast={state.contrast} />
+ </Grid>
+ <Grid item xs={12} md={4} >
+ <CardParticipando contrast={state.contrast} />
+ </Grid>
+
+ <Grid item xs={12} md={4} >
+ <CardGerenciando contrast={state.contrast} />
+ </Grid>
+ </MainGrid>
</Secao>
- </div>
+ </MainPage>
);
}
const StyledBreadCrumbs = styled(Breadcrumbs)`
display : flex;
- justify-content : flex-start;
- max-width : 1170px;
- span {
- color : #a5a5a5;
- }
- a {
- color: #00bcd4;
- text-decoration: none;
- }
+ justify-content : flex-start;
+ max-width : 1170px;
+ a{
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ }
+ span {
+ color: ${props => props.contrast === "" ? "#a5a5a5" : "white"};
+ }
+`
+const MainPage = styled.div`
+ background: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
`
const BreadCrumbsDiv = styled.div`
-
- padding : 10px;
display : flex;
`
-const Principal = styled.div`
- .fixo {
-
- height: 40px;
- text-align: center;
- background-color: #fff;
- box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
- padding: 30px;
- margin-bottom: 30px;
- color: #666;
-
-
- img {
- height: 50px;
- width: 50px;
- margin-right: 40px;
- vertical-align: middle;
-
- }
-
- span {
- font-size: 20px;
- vertical-align: ;
- }
-
-
-
- }
-
+const MainGrid = styled(Grid)`
+ padding: 1.5em 0;
`
-const TabsStyled = styled(Tabs)`
+const Principal = styled.div`
- .Mui-selected {
- background-color: #e7e4e4;
- }
-
- .MuiTab-root{
- text-transform: none !important;
- }
-
`
-const TabStyled = styled(Tab)`
-
- padding: 4px 15px !important;
- font-weight: 500;
- font-size: 14px !important;
- border-radius: 4px !important;
-
-
-
-
-
- &:hover {
- background-color: #e7e4e4;
+const TabStyled = styled.div`
+ text-align: center;
+ font-family: 'Roboto', 'sans-serif';
+ font-weight: ${props => props.active ? "500" : "lighter"};
+ background: ${props => props.active ? props.contrast === "" ? "#e7e4e4" : "rgba(255,255,0,0.24)" : ""};
+ padding: 0.5em;
+ color: ${props => props.contrast === "" ? "" : "yellow"};
+ text-decoration: ${props => props.active ? "none" : props.contrast === "" ? "none" : "underline"};
+
+ :hover{
+ background: ${props => props.contrast === "" ? "#e7e4e4" : "rgba(255,255,0,0.24)"};
+ cursor: pointer;
+ font-weight: 500;
}
`
const Menu = styled.div`
- width: auto;
- background-color: #fff;
- color: #666;
- padding-block: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
-
- h4 {
- padding-inline: 15px;
- font-size: 18px;
- margin-block: 10px;
- font-weight: 500;
- line-height: 1.1;
+ background: ${props => props.contrast === "" ? "#fff" : "black"};
+ border: ${props => props.contrast === "" ? "none" : "1px solid white"};
+ color: ${props => props.contrast === "" ? "" : "white"};
+ width: 100%;
+ padding: 1em 0;
+
+ .sized-box{
+ border: 0.5px solid #d4d4d4;
+ margin: 1em 0;
}
- .voltarInicio {
- padding: 4px 15px;
- font-size: 15px;
+ .title{
+ padding: 0;
+ margin: 0;
+ font-weight: 500;
text-align: center;
- a {
- font-size: 15px;
- padding: 0;
- color:#00bcd4;
- text-decoration: none;
- }
+ font-family: 'Roboto', 'sans-serif';
}
- hr {
- border: 0;
- border-top: 1px solid #ccc;
- margin-top: 20px;
- margin-bottom: 20px;
+ .sub-title{
+ padding: 0;
+ margin: 0;
+ font-weight: lighter;
+ text-align: center;
+ font-family: 'Roboto', 'sans-serif';
}
- .procurava {
- padding: 4px 15px;
- font-size: 15px;
+ .go-back{
+ padding: 0;
+ margin: 0;
+ font-weight: lighter;
text-align: center;
-
- a {
- font-size: 15px;
- padding: 0;
- color:#00bcd4;
- text-decoration: none;
+ font-family: 'Roboto', 'sans-serif';
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ :hover{
+ cursor: pointer;
+ font-weight: 500;
}
-
}
+ .active{
+ background: ${props => props.contrast === "" ? "#e7e4e4" : "rgba(255,255,0,0.24)"};
+ font-weight: 500;
+ }
`
const Secao = styled.div`
- width: 1138px;
- margin-inline: auto;
-
+ width: 90%;
+ margin: 0 auto;
+ padding: 1em 0;
`
diff --git a/src/Pages/TabsHelp/TabResourseFind.js b/src/Pages/TabsHelp/TabResourseFind.js
index 51765ca0..905650f8 100644
--- a/src/Pages/TabsHelp/TabResourseFind.js
+++ b/src/Pages/TabsHelp/TabResourseFind.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 styled from 'styled-components';
import Tabs from '@material-ui/core/Tabs'
import Tab from '@material-ui/core/Tab';
@@ -29,263 +29,244 @@ import CardPublicando from '../../Components/HelpCenter/Cards/CardPublicando';
import CardParticipando from '../../Components/HelpCenter/Cards/CardParticipando';
import CardGerenciando from '../../Components/HelpCenter/Cards/CardGerenciando';
import { Link } from 'react-router-dom';
+import { Store } from '../../Store';
//Image Import
import { EncontrandoRecurso } from "ImportImages.js";
export default function TabResourseFind(props) {
- const tabs = [
- 'Como fazer uma busca?',
- 'Como filtrar os resultados?',
- 'Como os recursos são ranqueados?',
- 'Encontrando Recursos'
- ]
-
- const [tabValue, setTabValue] = useState(props.location.state === "undefined" ? 0 : props.location.state);
-
- const handleChangeTab = (e, newValue) => {
- setTabValue(newValue)
- }
-
- useEffect(() => { window.scrollTo(0, 0) }, [])
-
- return (
- <div style={{ backgroundColor: "#f4f4f4" }}>
- <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet" />
-
- <Secao>
- <BreadCrumbsDiv>
- <StyledBreadCrumbs>
- <Link to="/" >
- Página Inicial
- </Link>
- <Link to="ajuda" >
- Ajuda
- </Link>
-
- <span>
- {tabs[3]}
- </span>
-
- </StyledBreadCrumbs>
-
- </BreadCrumbsDiv>
- <Grid container justify="center">
- <Grid item xs={12} md={10} >
- <Principal>
- <Menu>
- <div className="fixo">
- <img src={EncontrandoRecurso} alt="Encontrando Recursos" />
- <span>{tabs[3]}</span>
- </div>
- <TabsStyled orientation="vertical"
- variant="scrollable"
- value={tabValue}
- onChange={handleChangeTab}
- TabIndicatorProps={{ style: { display: "none" } }}
- >
- <TabStyled label={tabs[0]}></TabStyled>
- <TabStyled label={tabs[1]}></TabStyled>
- <TabStyled label={tabs[2]}></TabStyled>
- </TabsStyled>
- <br />
- <div className="voltarInicio">
- <a href="ajuda">VOLTAR AO ÃNICIO</a>
- </div>
- </Menu>
-
- {tabValue === 0 && <HowToDo title={tabs[0]} />}
- {tabValue === 1 && <HowToFilter title={tabs[1]} />}
- {tabValue === 2 && <HowToRank title={tabs[2]} />}
- <div className="resultadosProcura">
- <span>Não era bem o que você procurava?</span>
- <div className="subtitulo">
- <span>Você pode navegar pelos tópicos de ajuda ou entrar em <a href="contato">Contato</a>.</span>
- </div>
- </div>
-
-
- </Principal>
- </Grid>
- </Grid>
- <Grid style={{ paddingBottom: "50px" }} container justify={"center"}>
- <Grid item xs={12} md={3} style={{ margin: 5 }}>
- <CardPublicando />
- </Grid>
- <Grid item xs={12} md={3} style={{ margin: 5 }}>
- <CardParticipando />
- </Grid>
- <Grid item xs={12} md={3} style={{ margin: 5 }}>
- <CardGerenciando />
- </Grid>
- </Grid>
-
-
- </Secao>
- </div>
- );
+ const { state } = useContext(Store)
+ const tabs = [
+ 'Como fazer uma busca?',
+ 'Como filtrar os resultados?',
+ 'Como os recursos são ranqueados?',
+ 'Encontrando Recursos'
+ ]
+
+ const [tabValue, setTabValue] = useState(props.location.state === "undefined" ? 0 : props.location.state);
+
+ const handleChangeTab = (e, newValue) => {
+ setTabValue(newValue)
+ }
+
+ useEffect(() => { window.scrollTo(0, 0) }, [])
+
+ return (
+ <div style={state.contrast === "" ? { backgroundColor: "#f4f4f4" } : { backgroundColor: "black" }}>
+ <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet" />
+ <Secao>
+ <BreadCrumbsDiv>
+ <StyledBreadCrumbs contrast={state.contrast}>
+ <Link to="/" >
+ Página Inicial
+ </Link>
+ <Link to="ajuda" >
+ Ajuda
+ </Link>
+ <span>
+ {tabs[3]}
+ </span>
+ </StyledBreadCrumbs>
+ </BreadCrumbsDiv>
+ <Grid container justify="center">
+ <Grid item xs={12} md={10} >
+ <Principal contrast={state.contrast}>
+ <Menu contrast={state.contrast}>
+ <div className="fixo">
+ <img src={EncontrandoRecurso} alt="Encontrando Recursos" />
+ <span>{tabs[3]}</span>
+ </div>
+ <TabsStyled
+ contrast={state.contrast}
+ orientation="vertical"
+ variant="scrollable"
+ value={tabValue}
+ onChange={handleChangeTab}
+ TabIndicatorProps={{ style: { display: "none" } }}
+ >
+ <TabStyled contrast={state.contrast} label={tabs[0]}></TabStyled>
+ <TabStyled contrast={state.contrast} label={tabs[1]}></TabStyled>
+ <TabStyled contrast={state.contrast} label={tabs[2]}></TabStyled>
+ </TabsStyled>
+ <br/>
+ <div className="voltarInicio">
+ <a href="ajuda">VOLTAR AO ÃNICIO</a>
+ </div>
+ </Menu>
+ {tabValue === 0 && <HowToDo contrast={state.contrast} title={tabs[0]} />}
+ {tabValue === 1 && <HowToFilter contrast={state.contrast} title={tabs[1]} />}
+ {tabValue === 2 && <HowToRank contrast={state.contrast} title={tabs[2]} />}
+ <div className="resultadosProcura">
+ <span>Não era bem o que você procurava?</span>
+ <div className="subtitulo">
+ <span>Você pode navegar pelos tópicos de ajuda ou entrar em <a href="contato">Contato</a>.</span>
+ </div>
+ </div>
+ </Principal>
+ </Grid>
+ </Grid>
+ <Grid style={{ paddingBottom: "50px" }} container justify={"center"}>
+ <Grid item xs={12} md={3} style={{ margin: 5 }}>
+ <CardPublicando contrast={state.contrast} />
+ </Grid>
+ <Grid item xs={12} md={3} style={{ margin: 5 }}>
+ <CardParticipando contrast={state.contrast} />
+ </Grid>
+ <Grid item xs={12} md={3} style={{ margin: 5 }}>
+ <CardGerenciando contrast={state.contrast} />
+ </Grid>
+ </Grid>
+ </Secao>
+ </div>
+ );
}
const StyledBreadCrumbs = styled(Breadcrumbs)`
- display : flex;
- justify-content : flex-start;
- span {
- color : #a5a5a5;
- }
- a {
- color: #00bcd4;
- text-decoration: none;
- }
-
+ display : flex;
+ justify-content : flex-start;
+ span {
+ color: ${props => props.contrast === "" ? "#a5a5a5" : "white"};
+ }
+ a {
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ }
`
-
const BreadCrumbsDiv = styled.div`
-
- padding : 10px;
- display : flex;
+ padding : 10px;
+ display : flex;
`
const Principal = styled.div`
- .fixo {
-
- height: 40px;
- text-align: center;
- background-color: #fff;
- padding: 30px;
- margin-bottom: 30px;
- color: #666;
-
-
- img {
- height: 50px;
- width: 50px;
- margin-right: 40px;
- vertical-align: middle;
-
+ .fixo {
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ height: 40px;
+ text-align: center;
+ padding: 30px;
+ margin-bottom: 30px;
+
+ img {
+ height: 50px;
+ width: 50px;
+ margin-right: 40px;
+ vertical-align: middle;
+ }
+
+ span {
+ font-size: 20px;
+ color: ${props => props.contrast === "" ? "" : "white"};
+ }
}
-
- span {
- font-size: 20px;
- vertical-align: ;
+ .resultadosProcura {
+ text-align: center;
+ margin-block: 30px;
+ padding-inline: 15px;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ span {
+ font-size: 24px;
+ }
+ .subtitulo {
+ margin-top: 10px;
+
+ span {
+ font-size: 15px
+ }
+
+ a {
+ font-size: 15px;
+ padding: 0;
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ }
+ }
}
-
+`
- }
- .resultadosProcura {
- text-align: center;
- margin-block: 30px;
- padding-inline: 15px;
- color: #666;
- span {
- font-size: 24px;
+const TabsStyled = styled(Tabs)`
+ color: ${props => props.contrast === "" ? "" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ .Mui-selected {
+ background-color: ${props => props.contrast === "" ? "#e7e4e4" : "rgba(255,255,0,0.24)"};
}
- .subtitulo {
- margin-top: 10px;
-
- span {
- font-size: 15px
- }
-
- a {
- font-size: 15px;
- padding: 0;
- color:#00bcd4;
- text-decoration: none;
- }
+ .MuiTab-root{
+ text-transform: none !important;
+ max-width:100%
}
- }
-
-`
-
-const TabsStyled = styled(Tabs)`
-
- .Mui-selected {
- background-color: #e7e4e4;
- }
-
- .MuiTab-root{
- text-transform: none !important;
- max-width:100%
- }
- text-align: center;
- width:100%
+ text-align: center;
+ width:100%
`
const TabStyled = styled(Tab)`
-
- padding: 4px 15px !important;
- font-weight: 500;
- font-size: 14px !important;
- border-radius: 4px !important;
- text-align: center;
-
-
-
-
+ color: ${props => props.contrast === "" ? "" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ padding: 4px 15px !important;
+ font-weight: 500;
+ font-size: 14px !important;
+ border-radius: 4px !important;
+ text-align: center;
- &:hover {
- background-color: #e7e4e4;
- }
+ &:hover {
+ background-color: ${props => props.contrast === "" ? "#e7e4e4" : "rgba(255,255,0,0.24)"};
+ }
`
const Menu = styled.div`
- width: auto;
- background-color: #fff;
- color: #666;
- padding-block: 10px;
- box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
- margin-bottom:30px
-
-
- h4 {
- padding-inline: 15px;
- font-size: 18px;
- margin-block: 10px;
- font-weight: 500;
- line-height: 1.1;
- }
+ width: auto;
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ padding-block: 10px;
+ box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"};
+ margin-bottom:30px
+
+ h4 {
+ padding-inline: 15px;
+ font-size: 18px;
+ margin-block: 10px;
+ font-weight: 500;
+ line-height: 1.1;
+ }
- .voltarInicio {
- padding: 4px 15px;
- font-size: 15px;
- text-align: center;
- a {
- font-size: 15px;
- padding: 0;
- color:#00bcd4;
- text-decoration: none;
+ .voltarInicio {
+ padding: 4px 15px;
+ font-size: 15px;
+ text-align: center;
+ a {
+ font-size: 15px;
+ padding: 0;
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ }
}
- }
-
- hr {
- border: 0;
- border-top: 1px solid #ccc;
- margin-top: 20px;
- margin-bottom: 20px;
- }
-
- .procurava {
- padding: 4px 15px;
- font-size: 15px;
- text-align: center;
- a {
- font-size: 15px;
- padding: 0;
- color:#00bcd4;
- text-decoration: none;
+ hr {
+ border: 0;
+ border-top: 1px solid #ccc;
+ margin-top: 20px;
+ margin-bottom: 20px;
}
- }
+ .procurava {
+ padding: 4px 15px;
+ font-size: 15px;
+ text-align: center;
+
+ a {
+ font-size: 15px;
+ padding: 0;
+ color:#00bcd4;
+ text-decoration: none;
+ }
+
+ }
`
-const Secao = styled.div`
- margin-inline: auto;
+const Secao = styled.div`
+ margin-inline: auto;
`
diff --git a/src/Pages/TabsHelp/TabResoursePub.js b/src/Pages/TabsHelp/TabResoursePub.js
index 7ff00fa4..aa4f9dca 100644
--- a/src/Pages/TabsHelp/TabResoursePub.js
+++ b/src/Pages/TabsHelp/TabResoursePub.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 styled from 'styled-components';
import Tabs from '@material-ui/core/Tabs'
import Tab from '@material-ui/core/Tab';
@@ -29,14 +29,12 @@ import CardEncontrando from '../../Components/HelpCenter/Cards/CardEncontrando';
import CardParticipando from '../../Components/HelpCenter/Cards/CardParticipando';
import CardGerenciando from '../../Components/HelpCenter/Cards/CardGerenciando';
import { Link } from 'react-router-dom';
+import { Store } from '../../Store';
//Image Import
import { PublicandoRecursos } from "ImportImages.js";
export default function TabResoursePub(props) {
-
- console.log(props)
-
const tabs = [
'Por que enviar um recurso?',
'Como publicar um recurso?',
@@ -45,6 +43,7 @@ export default function TabResoursePub(props) {
]
const [tabValue, setTabValue] = useState(props.location.state === "undefined" ? 0 : props.location.state);
+ const { state } = useContext(Store)
const handleChangeTab = (e, newValue) => {
setTabValue(newValue)
@@ -53,12 +52,12 @@ export default function TabResoursePub(props) {
useEffect(() => { window.scrollTo(0, 0) }, [])
return (
- <div style={{ backgroundColor: "#f4f4f4" }}>
+ <div style={state.contrast === "" ? { backgroundColor: "#f4f4f4" } : { backgroundColor: "black" }}>
<link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet" />
<Secao>
<BreadCrumbsDiv>
- <StyledBreadCrumbs>
+ <StyledBreadCrumbs contrast={state.contrast}>
<Link to="/" >
Página Inicial
</Link>
@@ -73,21 +72,21 @@ export default function TabResoursePub(props) {
</BreadCrumbsDiv>
<Grid container justify="center">
<Grid item xs={12} md={10} >
- <Principal>
- <Menu>
+ <Principal contrast={state.contrast}>
+ <Menu contrast={state.contrast}>
<div className="fixo">
<img src={PublicandoRecursos} alt="Publicando Recursos" />
<span>{tabs[3]}</span>
</div>
- <TabsStyled orientation="vertical"
+ <TabsStyled contrast={state.contrast} orientation="vertical"
variant="scrollable"
value={tabValue}
onChange={handleChangeTab}
TabIndicatorProps={{ style: { display: "none" } }}
>
- <TabStyled label={tabs[0]}></TabStyled>
- <TabStyled label={tabs[1]}></TabStyled>
- <TabStyled label={tabs[2]}></TabStyled>
+ <TabStyled contrast={state.contrast} label={tabs[0]}></TabStyled>
+ <TabStyled contrast={state.contrast} label={tabs[1]}></TabStyled>
+ <TabStyled contrast={state.contrast} label={tabs[2]}></TabStyled>
</TabsStyled>
<br />
<div className="voltarInicio">
@@ -95,9 +94,9 @@ export default function TabResoursePub(props) {
</div>
</Menu>
- {tabValue === 0 && <Why title={tabs[0]} />}
- {tabValue === 1 && <How title={tabs[1]} />}
- {tabValue === 2 && <Which title={tabs[2]} />}
+ {tabValue === 0 && <Why contrast={state.contrast} title={tabs[0]} />}
+ {tabValue === 1 && <How contrast={state.contrast} title={tabs[1]} />}
+ {tabValue === 2 && <Which contrast={state.contrast} title={tabs[2]} />}
<div className="resultadosProcura">
<span>Não era bem o que você procurava?</span>
<div className="subtitulo">
@@ -110,15 +109,14 @@ export default function TabResoursePub(props) {
</Grid>
<Grid style={{ paddingBottom: "50px" }} container justify={"center"}>
<Grid item xs={12} md={3} style={{ margin: 5 }}>
- <CardEncontrando />
+ <CardEncontrando contrast={state.contrast} />
</Grid>
<Grid item xs={12} md={3} style={{ margin: 5 }}>
- <CardParticipando />
+ <CardParticipando contrast={state.contrast} />
</Grid>
<Grid item xs={12} md={3} style={{ margin: 5 }}>
- <CardGerenciando />
+ <CardGerenciando contrast={state.contrast} />
</Grid>
-
</Grid>
@@ -130,11 +128,11 @@ const StyledBreadCrumbs = styled(Breadcrumbs)`
display : flex;
justify-content : flex-start;
span {
- color : #a5a5a5;
+ color: ${props => props.contrast === "" ? "#a5a5a5" : "white"};
}
a {
- color: #00bcd4;
- text-decoration: none;
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
}
`
@@ -148,14 +146,11 @@ const BreadCrumbsDiv = styled.div`
const Principal = styled.div`
.fixo {
-
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
height: 40px;
text-align: center;
- background-color: #fff;
padding: 30px;
margin-bottom: 30px;
- color: #666;
-
img {
height: 50px;
@@ -167,7 +162,7 @@ const Principal = styled.div`
span {
font-size: 20px;
- vertical-align: ;
+ color: ${props => props.contrast === "" ? "" : "white"};
}
@@ -177,7 +172,7 @@ const Principal = styled.div`
text-align: center;
margin-block: 30px;
padding-inline: 15px;
- color: #666;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
span {
font-size: 24px;
}
@@ -191,8 +186,8 @@ const Principal = styled.div`
a {
font-size: 15px;
padding: 0;
- color:#00bcd4;
- text-decoration: none;
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
}
}
@@ -201,9 +196,10 @@ const Principal = styled.div`
`
const TabsStyled = styled(Tabs)`
-
+ color: ${props => props.contrast === "" ? "" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
.Mui-selected {
- background-color: #e7e4e4;
+ background-color: ${props => props.contrast === "" ? "#e7e4e4" : "rgba(255,255,0,0.24)"};
}
.MuiTab-root{
@@ -216,29 +212,26 @@ const TabsStyled = styled(Tabs)`
`
const TabStyled = styled(Tab)`
-
+ color: ${props => props.contrast === "" ? "" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
padding: 4px 15px !important;
font-weight: 500;
font-size: 14px !important;
border-radius: 4px !important;
text-align: center;
-
-
-
-
&:hover {
- background-color: #e7e4e4;
+ background-color: ${props => props.contrast === "" ? "#e7e4e4" : "rgba(255,255,0,0.24)"};
}
`
const Menu = styled.div`
width: auto;
- background-color: #fff;
- color: #666;
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
padding-block: 10px;
- box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
+ box-shadow: ${props => props.contrast === "" ? "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)" : "0 1px 3px rgba(254,254,254,.48),0 1px 2px rgba(254,254,254,.48)"};
margin-bottom:30px
@@ -257,8 +250,8 @@ const Menu = styled.div`
a {
font-size: 15px;
padding: 0;
- color:#00bcd4;
- text-decoration: none;
+ color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
}
}
diff --git a/src/Pages/TermsPage.js b/src/Pages/TermsPage.js
index aaa58528..d2db18c4 100644
--- a/src/Pages/TermsPage.js
+++ b/src/Pages/TermsPage.js
@@ -15,9 +15,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, useContext} from 'react';
+import React, { useState, useContext } from 'react';
import styled from 'styled-components'
-import {device} from '../Components/device.js'
+import { device } from '../Components/device.js'
import { Store } from '../Store.js';
import { Button } from '@material-ui/core';
import Card from '@material-ui/core/Card';
@@ -25,12 +25,11 @@ import LabeledCheckbox from "../Components/Checkbox.js"
import TermsPageContent from '../Components/TermsPageContent.js'
import AppBar from '@material-ui/core/AppBar';
import { makeStyles } from '@material-ui/core/styles';
-import {Link} from 'react-router-dom'
+import { Link } from 'react-router-dom'
const CardStyled = styled(Card)`
box-sizing : border-box;
background-color : white;
max-width: 1700px;
- padding-top: 52px;
@media ${device.mobileM} {
width : 100%;
height : 100%;
@@ -57,7 +56,7 @@ const StyledSpanContinuar = styled.span`
const Background = styled.div`
padding-top : 40px;
- background-color : #f4f4f4;
+ background-color: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
color : #666;
padding-bottom : 40px;
@@ -78,76 +77,76 @@ const Background = styled.div`
}
`
-export default function TermsContainer (props) {
- // eslint-disable-next-line
- const {state, dispatch} = useContext(Store)
- // eslint-disable-next-line
- const [checked, setChecked] = useState(false);
- const [unavailableButton, setButtonAvailability] = useState(true);
- const classes = useStyles()
-
- const handleChecked = e => {
- setChecked(e.target.checked);
- setButtonAvailability(!unavailableButton);
- }
-
- const handleAgreement = () => {
-
- dispatch( {
- type: 'USER_AGREED_TO_PUBLICATION_TERMS',
- userAgreement: true
- })
+export default function TermsContainer(props) {
+ // eslint-disable-next-line
+ const { state, dispatch } = useContext(Store)
+ // eslint-disable-next-line
+ const [checked, setChecked] = useState(false);
+ const [unavailableButton, setButtonAvailability] = useState(true);
+ const classes = useStyles()
+
+ const handleChecked = e => {
+ setChecked(e.target.checked);
+ setButtonAvailability(!unavailableButton);
+ }
- if (props.location.state) {
- props.history.push('/professor')
- }else {
- props.history.push('/permission')
- window.scrollTo(0, 0)
- }
+ const handleAgreement = () => {
+ dispatch({
+ type: 'USER_AGREED_TO_PUBLICATION_TERMS',
+ userAgreement: true
+ })
+
+ if (props.location.state) {
+ props.history.push('/professor')
+ } else {
+ props.history.push('/permission')
+ window.scrollTo(0, 0)
}
+ }
- return (
- <Background>
- <div className="container">
- <CardStyled variant="outlined">
- <TermsPageContent/>
- </CardStyled>
- </div>
- <AppBar position="fixed" color="primary" className={classes.appBar}>
- <StyledAppBarContainer>
- <div className="container">
- <div style={{fontSize:"14px"}}>
- <LabeledCheckbox label={<Styledspan style={{color : "#666", fontWeight : "600"}}>Li e concordo com os termos de uso da Plataforma Integrada de RED do MEC</Styledspan>} handleChange={handleChecked}/>
- </div>
- <div className="botoes">
- <Button disabled = {unavailableButton}
- style={ unavailableButton ? {backgroundColor:"#e9e9e9"} : {backgroundColor:"#00bcd4"}}
+ return (
+ <Background contrast={state.contrast}>
+ <div className="container">
+ <CardStyled contrast={state.contrast} variant="outlined">
+ <TermsPageContent contrast={state.contrast} />
+ </CardStyled>
+ </div>
+ <AppBar position="fixed" color="primary" className={state.contrast === "" ? classes.lightAppBar : classes.darkAppBar}>
+ <StyledAppBarContainer>
+ <div className="container">
+ <div style={{ fontSize: "14px" }}>
+ <LabeledCheckbox contrast={state.contrast} label={<Styledspan style={state.contrast === "" ? { color: "#666", fontWeight: "600" } : { color: "yellow", fontWeight: "600", textDecoration: "underline" }}>Li e concordo com os termos de uso da Plataforma Integrada de RED do MEC</Styledspan>} handleChange={handleChecked} />
+ </div>
+ <div className="botoes">
+ <Button disabled={unavailableButton}
+ style={unavailableButton ? state.contrast === "" ? { backgroundColor: "#e9e9e9" } : {border: "1px solid white"} : state.contrast === "" ? { backgroundColor: "#00bcd4" } : { backgroundColor: "black", border: "1px solid white" }}
onClick={handleAgreement}
- >
- <StyledSpanContinuar style={unavailableButton ? {color:"#666666"} : {}}>
- Continuar
- </StyledSpanContinuar>
- </Button>
- <Link to="/">
- <GrayButton>
- Cancelar
- </GrayButton>
- </Link>
- </div>
+ >
+ <StyledSpanContinuar style={unavailableButton ? state.contrast === "" ? { color: "#666666" } : { color: "white" } : state.contrast === "" ? {} : { color: "yellow", textDecoration: "underline" }}>
+ Continuar
+ </StyledSpanContinuar>
+ </Button>
+ <Link to="/">
+ <GrayButton contrast={state.contrast}>
+ Cancelar
+ </GrayButton>
+ </Link>
</div>
- </StyledAppBarContainer>
- </AppBar>
- </Background>
- )
+ </div>
+ </StyledAppBarContainer>
+ </AppBar>
+ </Background>
+ )
}
const GrayButton = styled(Button)`
&:hover {
- background-color : rgba(158,158,158,0.2) !important;
+ background-color: ${props => props.contrast === "" ? "rgba(158,158,158,0.2) !important" : "rgba(255,255,0,0.24) !important"};
}
height : 36px !important;
font-weight : 600 !important;
- color : #666 !important;
+ color: ${props => props.contrast === "" ? "#666 !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
background-color: transparent;
min-width : 88px !important;
height : 36px !important;
@@ -171,13 +170,20 @@ const GrayButton = styled(Button)`
`
const useStyles = makeStyles((theme) => ({
- appBar: {
- top: 'auto',
- bottom: 0,
- height : '100px',
- backgroundColor : '#fff',
- boxShadow : '0 1px 3px rgba(0,0,0,.52),0 1px 2px rgba(0,0,0,.24)'
- },
+ lightAppBar: {
+ top: 'auto',
+ bottom: 0,
+ height: '100px',
+ backgroundColor: '#fff',
+ boxShadow: '0 1px 3px rgba(0,0,0,.52),0 1px 2px rgba(0,0,0,.24)'
+ },
+ darkAppBar: {
+ top: 'auto',
+ bottom: 0,
+ height: '100px',
+ backgroundColor: 'black',
+ boxShadow: '0 1px 3px rgba(0,0,0,.52),0 1px 2px rgba(0,0,0,.24)'
+ },
}));
@@ -216,26 +222,3 @@ const StyledAppBarContainer = styled.div`
}
}
`
-
-// {/*<CardActions style={{justifyContent:"center", padding:"25px", borderTop : "2px solid #dadada"}}>
-// <div>
-// <div style={{fontSize:"14px"}}>
-// <LabeledCheckbox label={<Styledspan>Li e concordo com os termos de uso da Plataforma Integrada de RED do MEC</Styledspan>} handleChange={handleChecked}/>
-// <div style={{marginLeft:"1em", paddingLeft:"16px", color:"#a0a0a0", justifyContent:"center",display:"flex"}}>
-// <Button disabled = {unavailableButton}
-// style={ unavailableButton ? {backgroundColor:"#e9e9e9"} : {backgroundColor:"#00bcd4"}}
-// onClick={handleAgreement}
-// >
-// <StyledSpanContinuar style={unavailableButton ? {color:"#666666"} : {}}>
-// Continuar
-// </StyledSpanContinuar>
-// </Button>
-// <Button style={{marginLeft:"45px", backgroundColor:"#e9e9e9"}}>
-// <Styledspan style={{color:"rgb(102, 102, 102)"}}>
-// Cancelar
-// </Styledspan>
-// </Button>
-// </div>
-// </div>
-// </div>
-// </CardActions>*/}
diff --git a/src/Pages/UploadPage.js b/src/Pages/UploadPage.js
index 848b3b5b..aa1f6d1b 100644
--- a/src/Pages/UploadPage.js
+++ b/src/Pages/UploadPage.js
@@ -16,23 +16,23 @@ 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, useContext} from 'react'
+import React, { useState, useEffect, useContext } from 'react'
import Grid from '@material-ui/core/Grid';
import UploadFileWrapper from '../Components/UploadPageComponents/UploadFileWrapper.js'
-import {Store} from '../Store.js'
-import {InfoBox} from '../Components/UploadPageComponents/StyledComponents.js'
+import { Store } from '../Store.js'
+import { InfoBox } from '../Components/UploadPageComponents/StyledComponents.js'
import Stepper from '../Components/UploadPageComponents/Stepper.js'
-import {postRequest} from '../Components/HelperFunctions/getAxiosConfig.js'
+import { postRequest } from '../Components/HelperFunctions/getAxiosConfig.js'
import PartOne from '../Components/UploadPageComponents/PartOne.js'
import PartTwo from '../Components/UploadPageComponents/PartTwo.js'
import PartThree from '../Components/UploadPageComponents/PartThree.js'
import ModalLearningObjectPublished from '../Components/ModalLearningObjectPublished.js'
-import {Background} from '../Components/UploadPageComponents/StyledComponents'
+import { Background } from '../Components/UploadPageComponents/StyledComponents'
import LoadingSpinner from '../Components/LoadingSpinner.js'
-import {Redirect} from 'react-router-dom'
+import { Redirect } from 'react-router-dom'
-export default function UploadPage (props) {
- const {state} = useContext(Store)
+export default function UploadPage(props) {
+ const { state } = useContext(Store)
// {/*Object : link or file uploaded*/}
// eslint-disable-next-line
@@ -40,27 +40,27 @@ export default function UploadPage (props) {
const [loading, toggleLoading] = useState(true)
const [draft, setDraft] = useState({})
- function handleSuccessfulGet (data) {
+ function handleSuccessfulGet(data) {
setDraft(data)
toggleLoading(false)
}
- useEffect( () => {
+ useEffect(() => {
if (state.currentUser.id !== "") {
- const url = `/learning_objects/`
+ const url = `/learning_objects/`
- let payload = {}
+ let payload = {}
- postRequest(url, payload, handleSuccessfulGet, (error) => {console.log(error)})
+ postRequest(url, payload, handleSuccessfulGet, (error) => { console.log(error) })
}
}, [])
const [activeStep, setActiveStep] = React.useState(0);
- const stepperControl=(increment)=>{setActiveStep(activeStep + increment)}
+ const stepperControl = (increment) => { setActiveStep(activeStep + increment) }
const [objectSubmitted, toggleModal] = useState(false)
- const handleModal = (value) => {toggleModal(value)}
+ const handleModal = (value) => { toggleModal(value) }
const handlePost = () => {
if (state.currentUser.id !== "") {
@@ -69,8 +69,8 @@ export default function UploadPage (props) {
let payload = {}
postRequest(url, payload,
- (data) => {handleModal(true)},
- (error) => {console.log(error)}
+ (data) => { handleModal(true) },
+ (error) => { console.log(error) }
)
}
@@ -81,14 +81,14 @@ export default function UploadPage (props) {
const url = `/submissions/`
let payload = {
- "submission" : {
- "learning_object_id" : draft.id
+ "submission": {
+ "learning_object_id": draft.id
}
}
postRequest(url, payload,
- (data) => {handleModal(true)},
- (error) => {console.log(error)}
+ (data) => { handleModal(true) },
+ (error) => { console.log(error) }
)
}
@@ -98,64 +98,67 @@ export default function UploadPage (props) {
<React.Fragment>
{
state.currentUser.id === '' &&
- <Redirect to="/"/>
+ <Redirect to="/" />
}
{
loading === true ?
(
- <LoadingSpinner text={"CARREGANDO..."}/>
+ <div style={state.contrast === "" ? {} : { backgroundColor: "black" }}>
+ <LoadingSpinner contrast={state.contrast} text={"CARREGANDO..."} />
+ </div>
)
:
(
<>
- <ModalLearningObjectPublished
- open={objectSubmitted}
- handleClose={() => {toggleModal(false); props.history.push('/')}}
- draftID={draft.id}
+ <ModalLearningObjectPublished
+ contrast={state.contrast}
+ open={objectSubmitted}
+ handleClose={() => { toggleModal(false); props.history.push('/') }}
+ draftID={draft.id}
/>
- {
- activeStep === 2 ?
- (
- <PartThree draftID={draft.id} stepperControl={stepperControl} activeStep={activeStep} handlePost={handlePost} handleSubmit={handleSubmit}/>
- )
- :
- (
- <Background>
- <div className="container">
- <Grid container spacing={2}>
- <Grid item md={4} xs={12}>
- <UploadFileWrapper draftID={draft.id}/>
- </Grid>
- <Grid item md={8} xs={12}>
- <InfoBox>
- <div className="cabecalho">
- <h2>Informações sobre o Recurso</h2>
- <div className="feedback-upload">
- <Stepper activeStep={activeStep}/>
+ {
+ activeStep === 2 ?
+ (
+ <PartThree contrast={state.contrast} draftID={draft.id} stepperControl={stepperControl} activeStep={activeStep} handlePost={handlePost} handleSubmit={handleSubmit} />
+ )
+ :
+ (
+ <Background contrast={state.contrast}>
+ <div className="container">
+ <Grid container spacing={2}>
+ <Grid item md={4} xs={12}>
+ <UploadFileWrapper contrast={state.contrast} draftID={draft.id} />
+ </Grid>
+ <Grid item md={8} xs={12}>
+ <InfoBox contrast={state.contrast}>
+ <div className="cabecalho">
+ <h2>Informações sobre o Recurso</h2>
+ <div className="feedback-upload">
+ <Stepper contrast={state.contrast} activeStep={activeStep} />
+ </div>
</div>
- </div>
- {
- activeStep === 0 &&
- <Grid container style={{paddingLeft : "15px", paddingRight : "15px"}}>
- <PartOne draftID={draft.id} stepperControl={stepperControl}/>
- </Grid>
- }
- {
- activeStep === 1 &&
- <Grid container style={{paddingLeft : "15px", paddingRight : "15px"}}>
- <PartTwo draftID={draft.id} stepperControl={stepperControl}/>
- </Grid>
- }
- </InfoBox>
+ {
+ activeStep === 0 &&
+ <Grid container style={{ paddingLeft: "15px", paddingRight: "15px" }}>
+ <PartOne draftID={draft.id} stepperControl={stepperControl} contrast={state.contrast} />
+ </Grid>
+ }
+ {
+ activeStep === 1 &&
+ <Grid container style={{ paddingLeft: "15px", paddingRight: "15px" }}>
+ <PartTwo draftID={draft.id} stepperControl={stepperControl} contrast={state.contrast} />
+ </Grid>
+ }
+ </InfoBox>
+ </Grid>
</Grid>
- </Grid>
- </div>
- </Background>
- )
- }
+ </div>
+ </Background>
+ )
+ }
</>
)
- }
- </React.Fragment>
-)
+ }
+ </React.Fragment>
+ )
}
diff --git a/src/Pages/UserPage.js b/src/Pages/UserPage.js
index 2688500e..21d4eb73 100644
--- a/src/Pages/UserPage.js
+++ b/src/Pages/UserPage.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, { useState, useContext, useEffect } from "react";
-import styled from "styled-components";
import CustomizedBreadcrumbs from "../Components/TabPanels/Breadcrumbs.js";
import { Store } from "../Store.js";
import Tab from "@material-ui/core/Tab";
@@ -30,15 +29,14 @@ import TabPanelRede from "../Components/TabPanels/UserPageTabs/PanelRede.js";
import TabPanelCuradoria from "../Components/TabPanels/UserPageTabs/PanelCuradoria.js";
import Grid from "@material-ui/core/Grid";
import {
- HeaderContainer,
- UserProfileContainer,
- CheckTeacherDiv,
- StyledTabs,
- RodapeDiv,
- NavBarContentContainer,
- BackgroundDiv,
+ HeaderContainer,
+ UserProfileContainer,
+ CheckTeacherDiv,
+ StyledTabs,
+ RodapeDiv,
+ NavBarContentContainer,
+ BackgroundDiv,
} from "../Components/TabPanels/StyledComponents.js";
-import CircularProgress from "@material-ui/core/CircularProgress";
import Cover from "../Components/UserPageComponents/Cover.js";
import ProfileAvatar from "../Components/UserPageComponents/Avatar.js";
import UserInfo from "../Components/UserPageComponents/UserInfo.js";
@@ -46,213 +44,201 @@ import EditProfileButton from "../Components/UserPageComponents/EditProfileButto
import SubmitterStatus from "../Components/UserPageComponents/SubmitterStatus.js";
import { getRequest } from "../Components/HelperFunctions/getAxiosConfig.js";
import Typography from "@material-ui/core/Typography";
+import LoadingSpinner from '../Components/LoadingSpinner';
export default function UserPage(props) {
- const { state, dispatch } = useContext(Store);
- const id = state.currentUser.id;
-
- const [follows, setFollows] = useState(0);
- const [following, setFollowing] = useState(0);
- const [loading, setLoading] = useState(false);
- const [tabValue, setTabValue] = useState(Number(props.location.state) || 0);
- const [tabs, setTabs] = useState([
- "Atividades",
- "Meus Recursos",
- "Favoritos",
- "Coleções",
- "Rede",
- ]);
- const handleChangeTab = (event, newValue) => {
- setTabValue(newValue);
- };
-
- function handleSuccessfulGet(data) {
- console.log(data);
- dispatch({
- type: "GET_USER",
- user: data,
- });
-
- setFollows(data.follows_count);
-
- if (data.role_ids.includes(4)) {
- setTabs([
+ const { state, dispatch } = useContext(Store);
+ const id = state.currentUser.id;
+
+ const [follows, setFollows] = useState(0);
+ const [following, setFollowing] = useState(0);
+ const [loading, setLoading] = useState(true);
+ const [tabValue, setTabValue] = useState(Number(props.location.state) || 0);
+ const [tabs, setTabs] = useState([
"Atividades",
"Meus Recursos",
"Favoritos",
"Coleções",
"Rede",
- "Curadoria",
- ]);
+ ]);
+ const handleChangeTab = (event, newValue) => {
+ setTabValue(newValue);
+ };
+
+ function handleSuccessfulGet(data) {
+ dispatch({
+ type: "GET_USER",
+ user: data,
+ });
+
+ setFollows(data.follows_count);
+
+ if (data.role_ids.includes(4)) {
+ setTabs([
+ "Atividades",
+ "Meus Recursos",
+ "Favoritos",
+ "Coleções",
+ "Rede",
+ "Curadoria",
+ ]);
+ }
}
- }
-
- function handleSuccesGetFollowing(data) {
- setFollowing(data.length);
- setLoading(false);
- }
- useEffect(() => {
- if (id !== "") {
- const url = `/users/${id}`;
- const url2 = `/users/${id}/following/User`;
- setLoading(true);
- getRequest(url, handleSuccessfulGet, (error) => {
- console.log(error);
- });
- getRequest(url2, handleSuccesGetFollowing, (error) => {
- console.log(error);
- });
+ function handleSuccesGetFollowing(data) {
+ setFollowing(data.length);
}
- }, []);
- useEffect(() => {
- setTabValue(Number(props.location.state) || 0)
- }, [window.history.state.key])
-
- const redirect = () => {
- props.history.push("/");
- };
-
- const [modalOpen, toggleModal] = useState(false);
- const WIDTH = window.innerWidth;
-
- return (
- <div>
- <link
- href="https://fonts.googleapis.com/css?family=Roboto:100,400,500&display=swap"
- rel="stylesheet"
- />
- {
- state.userIsLoggedIn ? (
- [
- <React.Fragment>
- <ModalAlterarAvatar
- open={modalOpen}
- handleClose={() => {
- toggleModal(false);
- }}
- userAvatar={state.currentUser.avatar}
- />
-
- <BackgroundDiv>
- <CustomizedBreadcrumbs values={["Minha área", tabs[tabValue]]} />
- <Grid container spacing={2}>
- <Grid item xs={12}>
- <div style={{ padding: "10px 0 8px 0" }}>
- <UserProfileContainer>
- <HeaderContainer>
- <Cover id={id} />
- <ProfileAvatar id={id} />
- {WIDTH <= 600 ? null : <UserInfo />}
- <EditProfileButton />
- </HeaderContainer>
- {WIDTH <= 600 ? (
- <Grid
- style={{ marginTop: "4em" }}
- container
- justify="center"
- alignItems="center"
- direction="column"
- >
- <Grid item>
- <Typography
- variant="h4"
- gutterBottom
- style={{ textAlign: "center" }}
- >
- {state.currentUser.name}
- </Typography>
- </Grid>
- <Grid
- style={{
- marginTop: "0.5em",
- marginBottom: "0.5em",
- borderTop: "0.5px solid #eee",
- borderBottom: "0.5px solid #eee",
- }}
- container
- spacing={4}
- justify="center"
- alignItems="center"
- direction="row"
- >
- <Grid item>
- <Typography variant="h6" onClick={(e) => { handleChangeTab(e, 4) }}>
- {loading ? (
- <CircularProgress size={20} />
- ) : (
- `${follows} seguidores`
- )}
- </Typography>
- </Grid>
- <Grid item>
- <Typography variant="h6" onClick={(e) => { handleChangeTab(e, 4) }}>
- {loading ? (
- <CircularProgress size={20} />
- ) : (
- `${following} seguindo`
- )}
- </Typography>
- </Grid>
- </Grid>
- </Grid>
- ) : (
- <CheckTeacherDiv>
- <SubmitterStatus />
- </CheckTeacherDiv>
- )}
- <RodapeDiv>
- <NavBarContentContainer>
- <StyledTabs
- value={tabValue}
- onChange={handleChangeTab}
- indicatorColor="primary"
- textColor="primary"
- variant="scrollable"
- scrollButtons="on"
- TabIndicatorProps={{
- style: { background: "#00bcd4" },
- }}
- >
- {tabs.map((tab) => (
- <StyledTab label={tab} key={tab} />
- ))}
- </StyledTabs>
- </NavBarContentContainer>
- </RodapeDiv>
- </UserProfileContainer>
- </div>
- </Grid>
- <Grid item xs={12}>
- {tabValue === 0 && <TabPanelAtividades id={id} />}
- {tabValue === 1 && <TabPanelMeusRecursos id={id} />}
- {tabValue === 2 && <TabPanelFavoritos id={id} />}
- {tabValue === 3 && <TabPanelColecoes id={id} />}
- {tabValue === 4 && <TabPanelRede id={id} />}
- {tabValue === 5 && <TabPanelCuradoria id={id} />}
- </Grid>
- </Grid>
- </BackgroundDiv>
- </React.Fragment>
- ]
- )
- :
- (
- <>
- {redirect()}
- </>
- )
- }
- </div>
- )
+ useEffect(() => {
+ setLoading(true);
+ if (id !== "") {
+ const url = `/users/${id}`;
+ const url2 = `/users/${id}/following/User`;
+ getRequest(url, handleSuccessfulGet, (error) => {
+ console.log(error);
+ });
+ getRequest(url2, handleSuccesGetFollowing, (error) => {
+ console.log(error);
+ });
+ }
+ setLoading(false);
+ }, []);
+
+ useEffect(() => {
+ setTabValue(Number(props.location.state) || 0)
+ }, [window.history.state.key])
+
+ const redirect = () => {
+ props.history.push("/");
+ };
+
+ const [modalOpen, toggleModal] = useState(false);
+ const WIDTH = window.innerWidth;
+
+ return (
+ <div>
+ <link
+ href="https://fonts.googleapis.com/css?family=Roboto:100,400,500&display=swap"
+ rel="stylesheet"
+ />
+ {
+ loading ?
+ (
+ <LoadingSpinner contrast={state.contrast} text="Carregando..." />
+ )
+ :
+ (
+ state.userIsLoggedIn ?
+ (
+ <React.Fragment>
+ <ModalAlterarAvatar
+ contrast={state.contrast}
+ open={modalOpen}
+ handleClose={() => {
+ toggleModal(false);
+ }}
+ userAvatar={state.currentUser.avatar}
+ />
+ <BackgroundDiv contrast={state.contrast}>
+ <CustomizedBreadcrumbs contrast={state.contrast} values={["Minha área", tabs[tabValue]]} />
+ <Grid container spacing={2}>
+ <Grid item xs={12}>
+ <div style={{ padding: "10px 0 8px 0" }}>
+ <UserProfileContainer>
+ <HeaderContainer contrast={state.contrast}>
+ <Cover id={id} contrast={state.contrast}/>
+ <ProfileAvatar id={id} contrast={state.contrast}/>
+ {WIDTH <= 600 ? null : <UserInfo />}
+ <EditProfileButton contrast={state.contrast} />
+ </HeaderContainer>
+ {WIDTH <= 600 ? (
+ <Grid
+ style={state.contrast === "" ? { marginTop: "4em" } : { paddingTop: "4em", backgroundColor: "black", borderLeft: "1px solid white", borderRight: "1px solid white", }}
+ container
+ justify="center"
+ alignItems="center"
+ direction="column"
+ >
+ <Grid item>
+ <Typography
+ variant="h4"
+ gutterBottom
+ style={state.contrast === "" ? { textAlign: "center" } : { color: "white", textAlign: "center" }}
+ >
+ {state.currentUser.name}
+ </Typography>
+ </Grid>
+ <Grid
+ style={{
+ marginTop: "0.5em",
+ marginBottom: "0.5em",
+ borderTop: "1px solid white",
+ borderBottom: "1px solid white",
+ }}
+ container
+ spacing={4}
+ justify="center"
+ alignItems="center"
+ direction="row"
+ >
+ <Grid item>
+ <Typography style={state.contrast === "" ? {} : { color: "white" }} variant="h6" onClick={(e) => { handleChangeTab(e, 4) }}>
+ {follows} seguidores
+ </Typography>
+ </Grid>
+ <Grid item>
+ <Typography style={state.contrast === "" ? {} : { color: "white" }} variant="h6" onClick={(e) => { handleChangeTab(e, 4) }}>
+ {following} seguindo
+ </Typography>
+ </Grid>
+ </Grid>
+ </Grid>
+ ) : (
+ <CheckTeacherDiv contrast={state.contrast}>
+ <SubmitterStatus />
+ </CheckTeacherDiv>
+ )}
+ <RodapeDiv contrast={state.contrast}>
+ <NavBarContentContainer contrast={state.contrast}>
+ <StyledTabs
+ contrast={state.contrast}
+ value={tabValue}
+ onChange={handleChangeTab}
+ indicatorColor="primary"
+ textColor="primary"
+ variant="scrollable"
+ scrollButtons="on"
+ TabIndicatorProps={{ style: state.contrast === "" ? { background: "#00bcd4" } : { background: "yellow" } }}
+ >
+ {tabs.map((tab) => (
+ <Tab contrast={state.contrast} label={tab} key={tab} />
+ ))}
+ </StyledTabs>
+ </NavBarContentContainer>
+ </RodapeDiv>
+ </UserProfileContainer>
+ </div>
+ </Grid>
+ <Grid item xs={12}>
+ {tabValue === 0 && <TabPanelAtividades id={id} contrast={state.contrast} />}
+ {tabValue === 1 && <TabPanelMeusRecursos id={id} contrast={state.contrast} />}
+ {tabValue === 2 && <TabPanelFavoritos id={id} contrast={state.contrast} />}
+ {tabValue === 3 && <TabPanelColecoes id={id} contrast={state.contrast} />}
+ {tabValue === 4 && <TabPanelRede id={id} contrast={state.contrast} />}
+ {tabValue === 5 && <TabPanelCuradoria id={id} contrast={state.contrast} />}
+ </Grid>
+ </Grid>
+ </BackgroundDiv>
+ </React.Fragment>
+ )
+ :
+ (
+ <>
+ {redirect()}
+ </>
+ )
+ )
+ }
+ </div>
+ )
}
-
-const StyledTab = styled(Tab)`
- .Mui-selected {
- border-bottom-color: #00bcd4 !important;
- }
- .MuiTab-wrapper {
- border-bottom-color: #00bcd4 !important;
- }
-`
diff --git a/src/Pages/UserTerms.js b/src/Pages/UserTerms.js
index d1df2973..2f6d9d9c 100644
--- a/src/Pages/UserTerms.js
+++ b/src/Pages/UserTerms.js
@@ -15,11 +15,12 @@ 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 } from 'react';
+import React, { useEffect, useContext } from 'react';
import SimpleExpansionPanels from '../Components/ExpansionPanels'
import Grid from '@material-ui/core/Grid';
-import Modal from '../Components/Modal'
+import { StyledButton } from '../Components/ButtonAvaliarRecurso.js'
import styled from 'styled-components'
+import { Store } from '../Store'
/*Importação de imagens para a página*/
import CadeadoAberto from "../img/termos/AbertoG.svg";
@@ -32,252 +33,247 @@ import { Banner } from "ImportImages.js";
import { Aberto } from "ImportImages.js";
import { Fechado } from "ImportImages.js";
-const BannerStyle = styled.div`
- width: 100%;
- background-image: url(${Banner});
- background-size: cover;
- background-position: top center;
- height: 370px;
-
- verticalAlign: "middle"
+export const BannerStyle = styled.div`
+ background: ${props => props.contrast === "" ? "" : "black"};
+ width: 100%;
+ background-image: ${props => props.contrast === "" ? `url(${Banner})` : ""};
+ background-size: cover;
+ background-position: top center;
+ height: 370px;
+ vertical-align: "middle";
+ border-bottom: ${props => props.contrast === "" ? "1px solid black" : "1px solid white"};
`
const AColorido = styled.a`
-
- color: #00BCD4;
- text-decoration:none;
-
+ color: ${props => props.contrast === "" ? "#00BCD4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
`
const ImagemSeçao2 = styled.div`
+ padding: 0 5%;
+ font-family: "Roboto", sans-serif;
+ background: ${props => props.contrast === "" ? "" : "black"};
+ color: ${props => props.contrast === "" ? "rgba(0,0,0,0.87)" : "white"};
+
+ @media (min-width:750px) {
+ background-image: url(${BuscaTermos});
+ background-position: right;
+ background-size: contain;
+ background-repeat: no-repeat;
+ }
+
+ height: auto;
+ align-items: center;
+ padding-block: 30px;
+ h3 {
+ line-height: 1.1;
+ text-align: center;
+ @media (min-width: 1000px) {
+ font-size: 30px;
+ }
+
+ @media (max-width: 1000px){
+ font-size: 20px;
+ }
+ margin-top: 20px;
+ margin-bottom: 10px;
+ font-weight: 100;
+ padding-bottom: 20px;
- font-family: Roboto, sans-serif;
-
- @media (min-width:1450px) {
- background-image: url(${BuscaTermos});
- background-position: right;
- background-size: contain;
- background-repeat: no-repeat;
- }
- color: rgba(0,0,0,0.87);
- height: auto;
- align-items: center;
- padding-block: 30px;
- h3 {
- line-height: 1.1;
- text-align: center;
- @media (min-width: 1000px) {
- font-size: 30px;
}
- @media (max-width: 1000px){
- font-size: 20px;
+ p {
+ line-height: 1.42857143;
+ padding-top: 20px;
+ font-size: 14px;
+ text-align: justify;
+ margin: 0 0 10px;
}
- margin-top: 20px;
- margin-bottom: 10px;
- font-weight: 100;
- padding-bottom: 20px;
-
- }
-
- p {
- line-height: 1.42857143;
- padding-top: 20px;
- font-size: 14px;
- text-align: justify;
- margin: 0 0 10px;
- }
-}
`
const Secao3 = styled.div`
- background-color: #FF7F00;
- @media (min-width: 1000px) {
- background-image: url(${CadeadoAberto}), url(${CadeadoFechado});
- background-repeat: no-repeat;
- background-position: bottom left, bottom right;
- background-position-y: 120%, 120%;
- height:340px;
- padding-block:30px;
- }
-
- color: #fff;
-
- text-align: left;
-
- h3 {
- font-family: 'Pompiere', cursive;
- font-size: 46px;
- padding-bottom: 20px;
- margin-top: 20px;
- margin-bottom: 10px;
- width: 100%;
- text-align: center !important;
- font-weight: 500 ;
-
- }
-
- .aberto {
- background-image: url(${Aberto}), url(${Linha});
- }
- .fechado {
- background-image: url(${Fechado}), url(${Linha});
- }
-
- .caixa {
- background-repeat: no-repeat;
- background-size: 70px 70px, auto auto;
- background-position: top left;
- background-position-x: 0, 35px;
- padding-left: 90px;
- .texto{
- background-image: url(${Linha});
- background-position: top left;
- background-repeat: repeat-x;
- background-size: auto auto;
- span {
- font-size: 26px;
- }
- p {
- text-align: left;
- font-size: 15px;
- margin: 0 0 10px;
- }
+ padding: 20px 5%;
+ background: ${props => props.contrast === "" ? "#FF7F00" : "black"};
+ @media (min-width: 1000px) {
+ background-image: url(${CadeadoAberto}), url(${CadeadoFechado});
+ background-repeat: no-repeat;
+ background-position: bottom left, bottom right;
+ background-position-y: 120%, 120%;
+ height:340px;
+ padding-block:30px;
}
- }
-`
-const Secao4 = styled.div`
- font-size: 15px;
+ color: #fff;
- .texto {
text-align: left;
- padding-top: 20px;
- padding-bottom: 20px;
- a {
- color:#00BCD4;
- }
+ h3 {
+ font-family: 'Pompiere', cursive;
+ font-size: 46px;
+ padding-bottom: 20px;
+ margin-top: 20px;
+ margin-bottom: 10px;
+ width: 100%;
+ text-align: center !important;
+ font-weight: 500 ;
- p {
- font-family: 'Roboto', Bold;
}
- }
-
- .titulo {
- text-align: center;
- color: #666666;
- h3 {
- font-size: 30px;
- height: 22px;
- padding-bottom: 20px;
- margin-top: 20px;
- margin-bottom: 10px;
- font-weight: 500;
- line-height: 1.1;
+ .aberto {
+ background-image: url(${Aberto}), url(${Linha});
}
- p {
- height: 18px;
- line-height: 1.42857143;
- margin: 0 0 10px;
+ .fechado {
+ background-image: url(${Fechado}), url(${Linha});
}
+ .caixa {
+ background-repeat: no-repeat;
+ background-size: 70px 70px, auto auto;
+ background-position: top left;
+ background-position-x: 0, 35px;
+ padding-left: 90px;
+ .texto{
+ background-image: url(${Linha});
+ background-position: top left;
+ background-repeat: repeat-x;
+ background-size: auto auto;
+ span {
+ font-size: 26px;
+ }
+ p {
+ text-align: left;
+ font-size: 15px;
+ margin: 0 0 10px;
+ }
+ }
+ }
`
+const Secao4 = styled.div`
+ padding: 0 5%;
+ font-size: 15px;
+ background: ${props => props.contrast === "" ? "" : "black"};
+
+ .texto {
+ text-align: left;
+ padding-top: 20px;
+ padding-bottom: 20px;
+ color: ${props => props.contrast === "" ? "rgba(0,0,0,0.87)" : "white"};
+
+ a {
+ color: ${props => props.contrast === "" ? "#00BCD4" : "yellow"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ }
+
+ p {
+ font-family: 'Roboto', Bold;
+ color: ${props => props.contrast === "" ? "rgba(0,0,0,0.87)" : "white"};
+ }
+
+ }
+
+ .titulo {
+ text-align: center;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ h3 {
+ font-size: 30px;
+ height: 22px;
+ padding-bottom: 20px;
+ margin-top: 20px;
+ margin-bottom: 10px;
+ font-weight: 500;
+ line-height: 1.1;
+ }
+ p {
+ height: 18px;
+ line-height: 1.42857143;
+ margin: 0 0 10px;
+ }
+
+`
export default function UserTerms() {
- useEffect(() => {
- window.scrollTo(0, 0)
- }, [])
- return (
- <div style={{ color: "rgba(0,0,0,0.87" }} >
-
-
- <BannerStyle>
- <h2 style={{ width: "100%", textAlign: "center", marginTop: "0px", paddingTop: "6rem", marginBottom: "16px", fontSize: "52px", fontFamily: "'Pompiere', cursive", color: "#fff", fontWeight: "500" }}>TERMOS DE USO</h2>
- <Modal />
- </BannerStyle>
-
- <ImagemSeçao2>
- <Grid container >
- <Grid item xs={12} md={1}></Grid>
- <Grid item xs={12} md={10}>
- <div>
- <h3><strong style={{ fontWeight: "700" }}>Plataforma Integrada de Recursos Educacionais Digitais,</strong><br />uma iniciativa do Ministério da Educação!</h3>
-
- <p>A <strong>Plataforma Integrada de RED do MEC</strong> é parte do processo de implementação do Compromisso 6 do <AColorido href="http://www.governoaberto.cgu.gov.br/noticias/2017/3o-plano-de-acao-nacional-na-parceria-para-governo-aberto" target="_blank">3º Plano de Ação da Parceria Governo Aberto</AColorido> (OGP-Brasil), que tem por objetivo “incorporar na polÃtica educacional o potencial da cultura digital, de modo a fomentar a autonomia para uso, reuso e adaptação de recursos educacionais digitais, valorizando a pluralidade e a diversidade da educação brasileiraâ€.
- </p>
- <p>Seguindo o compromisso, a <strong>Plataforma Integrada de RED do MEC</strong> visa fortalecer a distribuição de recursos educacionais digitais para o ensino básico brasileiro. Há preferência pela disponibilização de Recursos Educacionais Abertos (REA), ou seja, recursos que “se situem no domiÌnio puÌblico ou que tenham sido divulgados sob licença aberta que permita acesso, uso, adaptação e redistribuição gratuita por terceiros, mediante nenhuma restrição ou poucas restrições.†<AColorido href="http://www.unesco.org/new/fileadmin/MULTIMEDIA/HQ/CI/CI/pdf/Events/Portuguese_Paris_OER_Declaration.pdf" target="_blank">(Declaração REA de Paris, 2012)</AColorido>.
- </p>
- </div>
- </Grid>
- <Grid item xs={12} md={1}></Grid>
- </Grid>
- </ImagemSeçao2>
-
- <Secao3 >
- <Grid container >
- <h3>Para melhor compreensão, podemos dividir os recursos em dois tipos:</h3>
- <Grid item xs={12} md={1} ></Grid>
- <Grid item xs={12} md={5} >
- <div class="caixa aberto">
- <div class="texto">
- <span>Abertos</span>
- <p>De acordo com a Declaração de Paris, são recursos que, no mÃnimo, têm uma licença de uso mais flexÃvel, que garante livre redistribuição. Adicionalmente, um recurso aberto deve utilizar um formato aberto, um formato de arquivo que permite a fácil edição por terceiros. Nenhum controle sobre o acesso (como cadastro e senha) deve existir para acesso a recursos abertos. Em sua maioria, são recursos gratuitos.</p>
- </div>
- </div>
- </Grid>
-
- <Grid item xs={12} md={5}>
- <div class="caixa fechado">
- <div class="texto">
- <span>Fechados</span>
- <p>São recursos que criam restrições no seu acesso, uso ou reuso. Como exemplo, podemos mencionar recursos que só são acessÃveis mediante cadastro ou que têm licenças restritivas (como “todos os direitos reservadosâ€, o sÃmbolo ©). Podem ser gratuitos ou pagos.</p>
- </div>
- </div>
- </Grid>
- <Grid item xs={12} md={1} ></Grid>
- </Grid>
- </Secao3>
-
-
-
-
- <Grid container >
- <Grid item xs={12} md={1}></Grid>
- <Grid item xs={12} md={10}>
- <Secao4>
- <div class="texto" style={{ paddingTop: "70px" }}>
- <p>O <a href="http://www.planalto.gov.br/ccivil_03/_ato2011-2014/2014/lei/l13005.htm" rel="noreferrer" target="_blank">Plano Nacional de Educação</a> (2014-2024) enfatiza nas metas 5 e 7 a importância dos recursos educacionais abertos para fomentar a qualidade da educação baÌsica. A <a href="http://portal.mec.gov.br/index.php?option=com_docman&view=download&alias=35541-res-cne-ces-001-14032016-pdf&category_slug=marco-2016-pdf&Itemid=30192" rel="noreferrer" target="_blank">Resolução CNE/CES nº 1</a>, de 11 de março de 2016, também destaca a importância dos recursos educacionais abertos para as instituições de educação superior e para as atividades de educação a distância.</p>
- </div>
- <div class="titulo">
- <h3>TERMOS DE USO</h3>
- <p>InÃcio da vigência: agosto de 2017</p>
- </div>
- <div class="texto" style={{ paddingBottom: "40px" }}>
- <p>Aqui estão os “Termos de Uso†da <strong>Plataforma Integrada de RED do MEC</strong>, isto é, as regras de funcionamento da Plataforma e seus serviços, e o que se espera de seus usuários. Por “usuárioâ€, entende-se qualquer pessoa que acesse o domÃnio portal.mec.gov.br, tanto para pesquisa (acesso) como para a inclusão de dados e informações (participação) mediante cadastro.</p>
- <p>Fazem parte dos Termos de Uso as polÃticas de responsabilidade, de privacidade e confidencialidade, a licença de uso do conteúdo e as informações sobre como reportar violações.</p>
- <p>Ao utilizar a <strong>Plataforma Integrada de RED do MEC</strong>, o usuário aceita todas as condições aqui estabelecidas. O uso da <strong>Plataforma Integrada de RED do MEC</strong> implica aceite das condições aqui elencadas.</p>
- <p>Por “serviçoâ€, entende-se qualquer funcionalidade ou ferramenta que permita a interatividade com o usuário, como, por exemplo, usuário subir um recurso, postar um comentário, criar uma coleção ou enviar uma mensagem.</p>
- <p>A aceitação destes "Termos de Uso" é indispensável à utilização da <strong>Plataforma Integrada de RED do MEC</strong>. Todos os usuários deverão ler, certificar-se de tê-los entendido e aceitar todas as condições neles estabelecidas. Dessa forma, deve ficar claro que a utilização desta "<strong>Plataforma Integrada de RED do MEC</strong>" implica aceitação completa deste documento intitulado Termos de Uso. Caso tenha dúvidas sobre os termos, utilize o formulário disponÃvel em “Contato†para saná-las.</p>
- </div>
- </Secao4>
- </Grid>
- <Grid item xs={12} md={1}></Grid>
- </Grid>
-
-
- <Grid container >
- <Grid item xs={12} md={1}></Grid>
- <Grid item xs={12} md={10}>
- <div style={{ marginBottom: "50px", paddingTop: "20px" }}>
- <SimpleExpansionPanels />
- </div>
- </Grid>
- <Grid item xs={12} md={1}></Grid>
- </Grid>
- </div>
- );
+ const { state } = useContext(Store)
+ useEffect(() => {
+ window.scrollTo(0, 0)
+ }, [])
+ return (
+ <div style={{ color: "rgba(0,0,0,0.87" }} >
+ <BannerStyle contrast={state.contrast}>
+ <h2 style={{ width: "100%", textAlign: "center", marginTop: "0px", paddingTop: "6rem", marginBottom: "16px", fontSize: "52px", fontFamily: "'Pompiere', cursive", color: "#fff", fontWeight: "500" }}>TERMOS DE USO</h2>
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ <StyledButton contrast={state.contrast} onClick={() => window.location.href='/termos-resumido'}>
+ Se preferir, veja a versão resumida
+ </StyledButton>
+ </div>
+ </BannerStyle>
+
+ <ImagemSeçao2 contrast={state.contrast}>
+ <Grid container>
+ <Grid item xs={12} md={12}>
+ <div>
+ <h3><strong style={{ fontWeight: "700" }}>Plataforma Integrada de Recursos Educacionais Digitais,</strong><br />uma iniciativa do Ministério da Educação!</h3>
+
+ <p>A <strong>Plataforma Integrada de RED do MEC</strong> é parte do processo de implementação do Compromisso 6 do <AColorido contrast={state.contrast} href="http://www.governoaberto.cgu.gov.br/noticias/2017/3o-plano-de-acao-nacional-na-parceria-para-governo-aberto" target="_blank">3º Plano de Ação da Parceria Governo Aberto</AColorido> (OGP-Brasil), que tem por objetivo “incorporar na polÃtica educacional o potencial da cultura digital, de modo a fomentar a autonomia para uso, reuso e adaptação de recursos educacionais digitais, valorizando a pluralidade e a diversidade da educação brasileiraâ€.
+ </p>
+ <p>Seguindo o compromisso, a <strong>Plataforma Integrada de RED do MEC</strong> visa fortalecer a distribuição de recursos educacionais digitais para o ensino básico brasileiro. Há preferência pela disponibilização de Recursos Educacionais Abertos (REA), ou seja, recursos que “se situem no domiÌnio puÌblico ou que tenham sido divulgados sob licença aberta que permita acesso, uso, adaptação e redistribuição gratuita por terceiros, mediante nenhuma restrição ou poucas restrições.†<AColorido contrast={state.contrast} href="http://www.unesco.org/new/fileadmin/MULTIMEDIA/HQ/CI/CI/pdf/Events/Portuguese_Paris_OER_Declaration.pdf" target="_blank">(Declaração REA de Paris, 2012)</AColorido>.
+ </p>
+ </div>
+ </Grid>
+ </Grid>
+ </ImagemSeçao2>
+
+ <Secao3 contrast={state.contrast}>
+ <Grid container >
+ <h3>Para melhor compreensão, podemos dividir os recursos em dois tipos:</h3>
+ <Grid item xs={12} md={6} >
+ <div class="caixa aberto">
+ <div class="texto">
+ <span>Abertos</span>
+ <p>De acordo com a Declaração de Paris, são recursos que, no mÃnimo, têm uma licença de uso mais flexÃvel, que garante livre redistribuição. Adicionalmente, um recurso aberto deve utilizar um formato aberto, um formato de arquivo que permite a fácil edição por terceiros. Nenhum controle sobre o acesso (como cadastro e senha) deve existir para acesso a recursos abertos. Em sua maioria, são recursos gratuitos.</p>
+ </div>
+ </div>
+ </Grid>
+ <Grid item xs={12} md={6}>
+ <div class="caixa fechado">
+ <div class="texto">
+ <span>Fechados</span>
+ <p>São recursos que criam restrições no seu acesso, uso ou reuso. Como exemplo, podemos mencionar recursos que só são acessÃveis mediante cadastro ou que têm licenças restritivas (como “todos os direitos reservadosâ€, o sÃmbolo ©). Podem ser gratuitos ou pagos.</p>
+ </div>
+ </div>
+ </Grid>
+ </Grid>
+ </Secao3>
+
+ <Grid container style={state.contrast === "" ? {} : { backgroundColor: "black" }}>
+ <Grid item xs={12} md={12}>
+ <Secao4 contrast={state.contrast}>
+ <div class="texto" style={{ paddingTop: "70px" }}>
+ <p>O <a href="http://www.planalto.gov.br/ccivil_03/_ato2011-2014/2014/lei/l13005.htm" rel="noreferrer" target="_blank">Plano Nacional de Educação</a> (2014-2024) enfatiza nas metas 5 e 7 a importância dos recursos educacionais abertos para fomentar a qualidade da educação baÌsica. A <a href="http://portal.mec.gov.br/index.php?option=com_docman&view=download&alias=35541-res-cne-ces-001-14032016-pdf&category_slug=marco-2016-pdf&Itemid=30192" rel="noreferrer" target="_blank">Resolução CNE/CES nº 1</a>, de 11 de março de 2016, também destaca a importância dos recursos educacionais abertos para as instituições de educação superior e para as atividades de educação a distância.</p>
+ </div>
+ <div class="titulo">
+ <h3>TERMOS DE USO</h3>
+ <p>InÃcio da vigência: agosto de 2017</p>
+ </div>
+ <div class="texto" style={{ paddingBottom: "40px" }}>
+ <p>Aqui estão os “Termos de Uso†da <strong>Plataforma Integrada de RED do MEC</strong>, isto é, as regras de funcionamento da Plataforma e seus serviços, e o que se espera de seus usuários. Por “usuárioâ€, entende-se qualquer pessoa que acesse o domÃnio portal.mec.gov.br, tanto para pesquisa (acesso) como para a inclusão de dados e informações (participação) mediante cadastro.</p>
+ <p>Fazem parte dos Termos de Uso as polÃticas de responsabilidade, de privacidade e confidencialidade, a licença de uso do conteúdo e as informações sobre como reportar violações.</p>
+ <p>Ao utilizar a <strong>Plataforma Integrada de RED do MEC</strong>, o usuário aceita todas as condições aqui estabelecidas. O uso da <strong>Plataforma Integrada de RED do MEC</strong> implica aceite das condições aqui elencadas.</p>
+ <p>Por “serviçoâ€, entende-se qualquer funcionalidade ou ferramenta que permita a interatividade com o usuário, como, por exemplo, usuário subir um recurso, postar um comentário, criar uma coleção ou enviar uma mensagem.</p>
+ <p>A aceitação destes "Termos de Uso" é indispensável à utilização da <strong>Plataforma Integrada de RED do MEC</strong>. Todos os usuários deverão ler, certificar-se de tê-los entendido e aceitar todas as condições neles estabelecidas. Dessa forma, deve ficar claro que a utilização desta "<strong>Plataforma Integrada de RED do MEC</strong>" implica aceitação completa deste documento intitulado Termos de Uso. Caso tenha dúvidas sobre os termos, utilize o formulário disponÃvel em “Contato†para saná-las.</p>
+ </div>
+ </Secao4>
+ </Grid>
+ </Grid>
+
+ <Grid container style={state.contrast === "" ? { padding: "0 5%" } : { backgroundColor: "black", padding: "0 5%" }}>
+ <Grid item xs={12} md={12}>
+ <div style={{ marginBottom: "50px", paddingTop: "20px" }}>
+ <SimpleExpansionPanels contrast={state.contrast} />
+ </div>
+ </Grid>
+ </Grid>
+ </div>
+ );
}
diff --git a/src/Store.js b/src/Store.js
index 0cb5c033..6b8598b6 100644
--- a/src/Store.js
+++ b/src/Store.js
@@ -21,158 +21,170 @@ import React from 'react'
export const Store = React.createContext()
const initialState = {
- searchOpen: false,
- userIsLoggedIn : false,
- userAgreedToPublicationTerms: false,
- userAgreedToPublicationPermissions: false,
- modalColaborarPlataformaOpen : false,
- search: {
- query: '*',
- class: 'LearningObject'
- },
- windowSize: {
- width: 0,
- height: 0
-},
- currentUser: {
- askTeacherQuestion : false,
- id : '',
- name : '',
- email : '',
- avatar : '',
- cover : '',
- uid : '',
- follows_count : 0,
- collections_count : 0,
- submitter_request : 'default',
- roles : []
- }
+ searchOpen: false,
+ userIsLoggedIn: false,
+ userAgreedToPublicationTerms: false,
+ userAgreedToPublicationPermissions: false,
+ modalColaborarPlataformaOpen: false,
+ search: {
+ query: '*',
+ class: 'LearningObject'
+ },
+ windowSize: {
+ width: 0,
+ height: 0
+ },
+ currentUser: {
+ askTeacherQuestion: false,
+ id: '',
+ name: '',
+ email: '',
+ avatar: '',
+ cover: '',
+ uid: '',
+ follows_count: 0,
+ collections_count: 0,
+ submitter_request: 'default',
+ roles: []
+ },
+ contrast: '',
+ fontSize: 15,
}
function reducer(state, action) {
- switch (action.type){
- case 'SAVE_SEARCH':
- return {
- ...state,
- search: action.newSearch
- }
- case 'HANDLE_SEARCH_BAR':
- return {
- ...state,
- searchOpen: action.opened
- }
- case 'WINDOW_SIZE':
- return {
- ...state,
- windowSize: action.innerWindow
- }
- case 'USER_LOGGED_IN':
- if (action.login.avatar_file_name) {
- Object.defineProperty(action.login, 'avatar',
- Object.getOwnPropertyDescriptor(action.login, 'avatar_file_name'));
- delete action.login['avatar_file_name'];
- }
- if (action.login.cover_file_name) {
- Object.defineProperty(action.login, 'cover',
- Object.getOwnPropertyDescriptor(action.login, 'cover_file_name'));
- delete action.login['cover_file_name'];
- }
- return {
- ...state,
- userIsLoggedIn:action.userLoggedIn,
- currentUser:action.login
+ switch (action.type) {
+ case 'SET_CONTRAST':
+ return {
+ ...state,
+ contrast: action.payload
+ };
+ case 'SET_FONT_SIZE':
+ return {
+ ...state,
+ fontSize: action.payload
+ };
+ case 'SAVE_SEARCH':
+ return {
+ ...state,
+ search: action.newSearch
+ }
+ case 'HANDLE_SEARCH_BAR':
+ return {
+ ...state,
+ searchOpen: action.opened
+ }
+ case 'WINDOW_SIZE':
+ return {
+ ...state,
+ windowSize: action.innerWindow
+ }
+ case 'USER_LOGGED_IN':
+ if (action.login.avatar_file_name) {
+ Object.defineProperty(action.login, 'avatar',
+ Object.getOwnPropertyDescriptor(action.login, 'avatar_file_name'));
+ delete action.login['avatar_file_name'];
+ }
+ if (action.login.cover_file_name) {
+ Object.defineProperty(action.login, 'cover',
+ Object.getOwnPropertyDescriptor(action.login, 'cover_file_name'));
+ delete action.login['cover_file_name'];
+ }
+ return {
+ ...state,
+ userIsLoggedIn: action.userLoggedIn,
+ currentUser: action.login
+ }
+ case 'USER_SIGNED_UP':
+ return {
+ ...state,
+ userIsLoggedIn: action.userLoggedIn,
+ currentUser: action.user
+ }
+ case 'USER_LOGGED_OUT':
+ localStorage.clear()
+ return {
+ ...state,
+ userIsLoggedIn: action.userLoggedOut,
+ currentUser: {
+ askTeacherQuestion: false,
+ id: '',
+ name: '',
+ email: '',
+ avatar_file_name: '',
+ cover_file_name: '',
+ uid: '',
+ follows_count: 0,
+ collections_count: 0,
+ submitter_request: 'default',
+ roles: []
+ },
+ userAgreedToPublicationTerms: false,
+ userAgreedToPublicationPermissions: false
+ }
+ case 'USER_AGREED_TO_PUBLICATION_TERMS':
+ return {
+ ...state,
+ userAgreedToPublicationTerms: action.userAgreement
+ }
+ case 'USER_AGREED_TO_PUBLICATION_PERMISSIONS':
+ return {
+ ...state,
+ userAgreedToPublicationPermissions: action.userAgreement
+ }
+ case 'USER_ACCESSED_USER_PAGE':
+ return {
+ ...state,
+ currentUser: action.set
+ }
+ case 'USER_CHANGED_COVER':
+ return {
+ ...state,
+ currentUser: action.currUser
+ }
+ case 'USER_DELETED_ACCOUNT':
+ localStorage.clear()
+ return {
+ ...state,
+ userIsLoggedIn: false,
+ currentUser: {
+ askTeacherQuestion: false,
+ id: '',
+ name: '',
+ email: '',
+ avatar_file_name: '',
+ cover_file_name: '',
+ uid: '',
+ follows_count: 0,
+ collections_count: 0,
+ submitter_request: 'default',
+ roles: []
+ },
+ }
+ case 'TOGGLE_MODAL_COLABORAR_PLATAFORMA':
+ return {
+ ...state,
+ modalColaborarPlataformaOpen: action.modalColaborarPlataformaOpen
+ }
+ case 'GET_USER':
+ return {
+ ...state,
+ currentUser: action.user
+ }
+ case 'USER_UPDATED_EMAIL':
+ return {
+ ...state,
+ currentUser: action.currUser
+ }
+ default:
+ return state
}
- case 'USER_SIGNED_UP':
- return {
- ...state,
- userIsLoggedIn:action.userLoggedIn,
- currentUser:action.user
- }
- case 'USER_LOGGED_OUT':
- localStorage.clear()
- return {
- ...state,
- userIsLoggedIn:action.userLoggedOut,
- currentUser:{
- askTeacherQuestion : false,
- id : '',
- name : '',
- email : '',
- avatar_file_name : '',
- cover_file_name : '',
- uid : '',
- follows_count : 0,
- collections_count : 0,
- submitter_request : 'default',
- roles : []
- },
- userAgreedToPublicationTerms: false,
- userAgreedToPublicationPermissions: false
- }
- case 'USER_AGREED_TO_PUBLICATION_TERMS':
- return {
- ...state,
- userAgreedToPublicationTerms: action.userAgreement
- }
- case 'USER_AGREED_TO_PUBLICATION_PERMISSIONS':
- return {
- ...state,
- userAgreedToPublicationPermissions : action.userAgreement
- }
- case 'USER_ACCESSED_USER_PAGE':
- return {
- ...state,
- currentUser : action.set
- }
- case 'USER_CHANGED_COVER':
- return {
- ...state,
- currentUser : action.currUser
- }
- case 'USER_DELETED_ACCOUNT':
- localStorage.clear()
- return {
- ...state,
- userIsLoggedIn:false,
- currentUser: {
- askTeacherQuestion : false,
- id : '',
- name : '',
- email : '',
- avatar_file_name : '',
- cover_file_name : '',
- uid : '',
- follows_count : 0,
- collections_count : 0,
- submitter_request : 'default',
- roles : []
- },
- }
- case 'TOGGLE_MODAL_COLABORAR_PLATAFORMA':
- return {
- ...state,
- modalColaborarPlataformaOpen : action.modalColaborarPlataformaOpen
- }
- case 'GET_USER':
- return {
- ...state,
- currentUser:action.user
- }
- case 'USER_UPDATED_EMAIL':
- return {
- ...state,
- currentUser : action.currUser
- }
- default:
- return state
- }
}
export function StoreProvider(props) {
const [state, dispatch] = React.useReducer(reducer, initialState);
- const value = { state, dispatch };
+ const value = { state, dispatch };
return (
<Store.Provider value={value}>
{props.children}
diff --git a/src/img/OffContrastIcon.png b/src/img/OffContrastIcon.png
new file mode 100644
index 0000000000000000000000000000000000000000..f44e653f9499dec5cfc293de994c1081ff9c64ec
GIT binary patch
literal 17242
zcmZ8}2{@H&+qP<_5;7%I6lE?U)5@^R6hg*OQI-%1r7~+!W|9y>ri9h7NE%SarAQ%D
zlc_>d6eSt{^Va)*-*^1`IQFr(<yp^jKlgnN=XGA^C1SUUJ{yYw3lkF)o54;Ub0(%m
zBl!2ra%Oz;{pWdp{AY#NPTS*5OzgGf-$jWs?1D^8>zE95wp;pM9ewAw&+`1-{P?eE
zTJ}ZB?87T~zp^AHH7fnGe3&OyePW5lgj=iWafk06qYn?c`L}KDe6mq@Yw}svUu@<^
zZ%<w1QsG&uW1Z3?vj4ZUXw#O)!KSOfevFT;PiZdyaxx&Gx#?<7%diiHBi?byhoT-h
z#c}G}dtEy_fn&#y$ET%5m6w-ie>0jEU=k7%>h0}i(${BjJwEB<6PlAF_V(R7vpmDq
zm*pJnr%svb)X@{z*O{NA(PZ~k_^+0dlDdC<kp1iXil}X;zN-Hixq4M7-b6w|!m_}8
zX`;*?y+moNjNd0>1eAI|eq6d{&6;=<(bAT&hSUb%2M-?XG%=}fFWM7-`LgB2=(t1v
z_3MTbsprGOmX%jj^x=9>&u`hD_V)HStcrMr)~?OtjySTIk=npi=GjwUV3F_j{e!_(
zbw93TIR`y+bFNzskJ;xOh7AN_m|tkktCM>S44kWv5zH}25O;lhU%t@#rgXZ#la*?R
zPF=&(r&Zl0F5cfiJk9pjJn@<5=(~p-)1A51H8e8$zKI*BUfX_-+3VP`OD1CG8)B6T
z>`hGAV}&&$wZqu^rp5<U{l0J5Y+oK;UA<#?t5u6z=?#l~_SCJ1&t5l9%RVvE;rhN@
zZQ0f3Lhj~SuU=USQGAw%v9GPJI=5`RQSR|NEiDI1ROCTV&p7Ajsad#Ow?|!FJ+~xW
zHkN9vY@FZLSABk^Y4ndgqvYI@hUF(dzw&b|AL+QcGDc4<UDwH4$h}xi<>=cdaawcX
zLqo1#-aT4#>g!u<tzw~h9?R=e_hlg=AwHw8S7URNO+*#cVwG$w&YoRdTUWPUT%1{6
zUVi7!ofl0+w+9CY4|UuWe0XByLei$a)y=WV3F}4}bn&8z!JNUaE}Pu^d?ShY#W<?0
z<AcrWpT&#FFR!%?U%Ytn^o<*mI{NxQhEkr@zId@}Zf<V*^5v&9GesOm#EYuv;&rXV
zKB_^}Ta}M=oo;B@St%dA>luTw?97=n%UM`<<mknyzRh*T23^IS57t~@>$-DrNpq%_
zT)MXO?#IEi*?l<AN+0$X3)PO?<!j{Zb)1|wkbAY|n;H#Xj8r=M_P*==puoV~<KawR
zG=rD#9-ZRk<UA7|zPyszIP$~bU|4VOfq#}Q%Q^P(S*u#EBQ{Mk-6X6c;Fn`}@u9A}
zhb>xWlOrxSRaGsj@Sm){xL*6^t^M07D~);aj#2kdjPO?1)X<M~E9|Qbw55dIXbKDr
z<PZ>uJhNok_pb+?<b~W7(s2A=-ag<qO5R-8adWTP?%nIsb(|DVo;*3!lC$grEB{%O
zbjtRkc0-AHwgH=jr|-)BxMi$qPriR_^q%}|H7q1r^5gsW9j>mDJG8a?hKHrnwUxuE
z#^T3+ez9#zQ(0BC=k_P}mRv)2c6Pok2blEYgkzZ51a=NyWb3m@F!Q0T{rRQ)+=JtT
zq7;f9C2Xhs%<QcE$uBmQ>tlAEr5Yc)l$jZaoo`CtwuTWWlH9!BoCfoB{L)1qdiO}>
z%jjs{@diV0+S7IX{QNfej_`kaks0USdCOps!!~A(z3(D1{n%P;OYi5;(&^gP7pTVm
z54;DMKQ*UE9coNkFD9l<32ShB@bIBy!^QP{iq5Rx7VG&B*jPlETUd;DyJQ}0$<~FN
z#W$}n=5KCp=972)r#?<(75*6(GFOdNS}n6_6Wj4mO;sWDe;k|+9l~?FWf3Bxh19sH
z_0eY@J$mHBF2%!0&A6D65&QecAoYE@pZYsvr|q|H-Qv^m->Nw?rd@g6*tE}vo2eJR
zHTAtwZv6LP=D_=kfL1k~!jE6S#(EFbua}i&T`g^Sv3dRZUYnwQCr>K#%GpQTmN>6h
zQnI3ih0if+YL;+InADE-)%1P&BAc#Vt=b`-*EW3T=sU`;D_a&J$l-PqtV-@3wJw=K
z7c_&W$NHtE>*>~6Ir?#q9~$DrqoNW_){APC9_i*<$t(Nsk5A9@EOs(^a_5M4-geO6
zxpTRFz^D?tQhZ`WR8)=o?TQPqqW<a0kybUQgX+cBXAm~Yfh#&U^)l{+A2}TrwNl(P
zBf2F=zvk&v14@|eX{tvJ4qVyebtqnG+&WQ5xuLOfCAM$-iwuq5{`X=AY~I|!TO7c0
zy2?B=eONeCY~S4TpdYAOJT*OSn13;4OvzpF$5@|sw4e(6?egy|VW~Se{v3T1w#VLY
z=|Fu<O-<M;SOlxDlZW=n(bwm*w8KQ@<;^JP!$V))+Ajzr*JZ@6&9i6-#T83hTU)od
zzFg<?`Bj9raqh8*h=`$A1>DT5gqw;uUvmiC?v;nLAw&d@RV{-vCHb&(N=4`AOYm;q
z7j9qSKhEZA9ZU7dGdDNi;#j-<$h(JDco5I6fL~v2?z(ciy}GeJeaE5NwqEP&ckXZ)
zCCMTjv#Gw)$xXhww=5e!Oihp6HnXvjOxHg2M9f|0($%Zc7cX*DHl~F?qj|i!w|vzq
z{hM~BxfTsf>c#iCMmleY-M%dsmKq*i?AfD<4RM^Eo@|wJVu~%TKIG)IPF0mJXnJD1
zzyCulwEOhLgwMoq+p_iR*EcjYz;ZOkw%$LxRx^-q_RlYUbMs3+ECm<!au&`1IPeE~
zhJJF??(UIpbIN(cCv@v;h_t)Xl-cHgzX+Lf=HOC1@!679NR{L1)2H|SC#5eXBt%v2
ze{gK+<N3L5jJJB1W%jUJ<eSu8ma;hD;v$i*UDrD=&605CO8DIDpC7zQ8%&DYvvD3b
z_CGpF57AOo<aTMkT9u;c;x#=noc+!7efd+)GKDx{jcSR^z_V+&ojfr5x^(R4&m@!V
z$GtW(p(gn?sY>o-lbxKM4F@?A3mxksU0br3+TC>>uZ`<@bn3QixoJA(JlwsvHiEn1
z#fvr48-wcV>Z&?B*Ej@Cu7;g5Ru)JuXV@(&E-8^e(zQiLM`vd~2mej;JVV#E>uj$P
zOed(_-QB7uzwq_<_j8Dd#NEHI`nKH9;?AXvjac#$X4WUo>D%bO<BqD^wi!uqs&@2W
zx^(GfiHqrm4I6N;l$er|9~Mi3CqK7mk81`_ZQ<hL+KqT>V-UhCEF7C4Vd~g+-B^9o
zEhZuN?b}X%`8QKD$d?{uzEMt2&ezW`%QRDyX>Llj<<|a39D;&T$X)v$9MipjF;+w?
z7D@KtyN4%+TJxfOVhhKQcPwUExl-Qa^;Vyeju>s@39X|?j}CR0NRY75m@GH&EK$a$
z*lC6T&o2>!8385~(^44w%bR;uc4ca&XPR)<#vQe_@%N{kJ$H`o@kV)=Cz~s1W}Gqg
zA;C0Pk!fap*;|B#{`}0~>U$n<#*pyG)($Ryc<Nj1*qGP-2M-MLZ?MPFHVwhR2uuh|
zZTQ#jChzUXbCl~Q>5=%VsFc(SM39=Ext}Vor86(C<iR~wKTlI(;M8+1EW_rL_U=SB
z!~vdxR~qDV*jCt;y7kqp(yB#Vxp?W)+1r)VEHH%+OEqMBTl0*3XD2&3`T3>Nv!#XH
z6=h^)YeQFXbMWwl0>&W=rCHpxQ(_g-6at2;g@4^S_R(<a&!3w2@9inioev#4v|dtj
zIk)((-jOceYPxdHmoG>DVP<wj_Gy*UDeOg<{q;UzmDbGIlHmE-Q%xy~%K-Q;H5c2K
zxV+HYy_*A8lV@>6nDKho(Vof}_O+A)I7{-?55vO|^3?j?R|OWtbgHYXcRx6GXjnFl
zd-dw`xNaSZ&~?|nY0rCsh+MmiH}($<<XMC-e^PY2GE(mG3>U&H0}yY#W3T7<qz89o
zT%3Ls?<TLl>ZQXxX?1jEIvh3!>1yY$U6)PPXFvAx^7{ARf0-)h=K}UUI?1N!(p<Yz
zu6$kkA#N^i?v~<1MnbAy|5ED2y=lg-#Ae<;P?Yo8;j|REP~N*=XT!#g>lGBZut%R_
zWTJh(z1KhhTmfj7U_w_Da_4?I>~lpkhysrZD=$~a)++q_;Mm8Pk4||Csrz#1#|i6t
zd2Jz3wuEMFZ!b))<5zSZt5y=Pr7N2U2WtWdjJN2E;7sG=?Sm$*Lc_wu)YSMh1HZ2*
zv?>x$cPhQUE9LBZ?F(ZaH^gxkJCM%&Cx*@dYa8M_EByTZ`v>B*>OCLNUH}x@>iY6u
z%2Vl^HuS|B{u90Wk9M7=?$=96Ng4a~OW()mF3A!R6%`uHtb7DmQIQ75CMOe3iYYBE
zExsc+%Pyv*NToZrt9BgnA}{;(Ek7c3B68izm#$j@`2O9oWAVMC?;_!21`@W38Ua6h
zpR4qINb`(&LRWq{`lhU<GALkX=En;h_lDl|Q}3&g(>S@g&spEJGZ?gqnVRyoSFZz5
zUXq)edkukG)w@3wt6DMgx>N=h5Q?amg^yd+tPzYCd6theBW2`T(AXJvrUnKEB>XI(
z#vM8=ty$X32o?su1>C3m#P+9ag$R4RzPp`7>`1FVn~^i~$2iRnKRh`a85;Tz4ZEV`
z_UdA@*<Hpmt#b8(In|ClJpUilHyrWyckMO-Y=y$X4kEsJoj8$bVotk!nWucbUJ&p<
z7dPy+NhT4~wWm^}hhw`Av-io9^$6o$zrP=f=954Bt0VZrn=;QFyh5PJMPb#B7hZES
ze)fZD;nDqleP_<ET+<I<AyDzQhJ7?c<orje@k`#cDAYrt0FL9~so}e-0hxP(eyt@2
zi!8jCqVElO)k3H0SIXV^M`+~nP6LDONXx$klsHqaK7Op#d{ylnYNPMY>qFuZ2*`aN
zSG;&apGzQ1L86&yTg#aelaRozIXhu-m2!e5ecP#|X0yw+wK^H?fy}X!^KT!WTIE^!
zTU<-uScjL?P?^EgE094MKVATy=kN`_$Yi8>R!02!_01?>l7%5Kf69WrQY=1Pb`#<R
z`E5hI*g=xZa+a@Hv4T_>!s@>3(zE#rMMe-i%6~L(3y+ISh7~0i+R#M_?nGUc6+AoL
zsuoF-$Eo*zVP%~&B35xH;1i1%FZTT<D{3CvX&=A_B+IxWPu+cMpW3jHcfijt+u_dN
zfBeX^s4X~2J3(1{flaXfj~RD-wkn0<h}{4f60r~deF#^>ruj4jRedPwK9Q2`v6IpK
ziX_wxvx;UrmL7d4AYpR#UmF{~yLRn!`2tLL9P3z`uBus3v@c7~v)Pm#U8^}gBt|ag
zN|bXDb_o8x(UD3;ow_ky%<b7_si~iDJo6N5Zycrl`qmSNh-gYV7rxVTEyd>v4upUu
zD~DpA-X~{Ny?RgkTv%=uGYJ!TnWMkz!^e+scuxM@9p_nW=#EQ8MMZaK?N~Z2#Odef
z2m1(<zAbhum2P5ed>$w4*|c59`ew-doT~qXq=1s!hICO;AZZj}g^!-4NY_t~yA*J9
zb0bWKM_b>v*AP-Wrc;_<hmTq+0!~>4F~9l5cnDC1oZPEx8s2an8JSuaxq9kTnrCl+
zzi2wu8~-e4XV*J;Fv}-Ww`<16G<EBWG-Z!V&Fe%JqEJ?~XYj^FMpow<B;+c}R$piM
zqkg-h5pd6knKRzD{kDUMeyq@TFRwd3k#)~AGz8=0<6HTiT}r4ypPKkth1G4aF%6<u
z)6+ST+SQJKy7ARK5Ad#<q&LN;XW|TshQ``&m47xD7Z>N^HDukIuE=*)25o!$_HC|(
zthkKKN(34m0@fnCyWZNY;pG(tfJ@%I{}OD9s|BgLmcgiDF!U*Pj-*TnGE57qNqHVK
z35Q$A*{q_XX22RXU<#t)BL?|4O{n1H-8*E5SxfE|(C5Y(BJu!kIBrqh8<quJ!87Cf
zq36#ReEQKP5;Vbi@=MqH^n=Hg6*~}whTfFj{_L5fr!(R5@mXR`vO{phMx&%BRaM(5
zj4wd#(?3U}a&tEf^CT2U(1WMO)&p8RHHzTk)TnuxrA^jjwQr9)&Jb^Pw?O8q?X1m+
z4}~OTxDNuSPGm=((V8!>OIKPITE?5mKSJ=rZ{IpM-?N*wxoum*jLNr_Uq{Efue8&?
z2BnZ$k@cowo|2WTRxv;a<SFi|E@V*T<vGRlqA%hQi={z2)b-VbS$Rja{^|+o5x0MQ
z?=^k1q~yQzbF=Xz=I_vPI*}1F=ZAdA6!PayPp(CiG=LnzzuUK;@rg8}ouuWPX2t^N
zkv%G!e0%)GdSzwaZ{<H?eIjiMRz@{*v3X0RRqQ05G(Mc4Y3RbiX{!Nt=*atW{w2%U
zFPq30nQG0xDqJ;2J4#bjP<VOUK`X5ySBNt{4+)K3X3wo!@GyAvCuEJG&f6ji3JSRv
z&uTx{Q&80Hxow|FUPcOx4{%%AaFvOnVf8YRz;)?n;?_zXJ;8rA!2vd<Z`W~3c(tVq
zn`HAixWeZ`70sEJkdPoBIORpwo_760m9X*=zTiKjD#NVjZ0Z&aYQu)w>))&lb#i&`
zX?6_{55pnu75>t+t+SEadyn<c&(Q=t+njB$$d{l$KM(%?{;`$c-(tolKR5Tl%+xqJ
zjlv(kcRVJk`;k<&4GklGF4*&EbWqaSzdfF>Y_Dw32yb|Oc&h-(Lf|fvP2?X$N3$Yt
zR7)TInKeX@g@XY<<|>AVTN)R&lX?ZoF2*PFsRz*Df;UPgIx;9Qn}Y`rlIMkL-SW8?
z^ylQ(!>u}$x(`58Bxestb4i_~Aw@(X0T|%~TIK;l`xqi2p=D)dK9L51IV-7**u-YZ
zcu|J`U~{@nsaqmEnR8Yb9zv%w*e!3`0fyyT-`W>}TxQ^+p3q-EjWeAZ)S8#V?&`eg
zMV0^)Wl6I!!-W^v*G7h|5;1h)G4iI)!jr^E9eFN1+;Hr3(e3_6-zv}L<mBK@Hi(P&
zCzxu+H%lgE*H0srUQzMPAdeo-!isFledV_bkT)h227>d&X5UE1db|9#gD7&XPyAL9
z6)g?;R`F|#+bhXo)&wcw+8bs$Jiof#>!K$=Jx}v9FcTG(+3M0P1f*|Fsd4)G^<5O=
ziV0<4MI;~LD(fD5WQ2!D{+h~`njGoG8KmHSMI|KkDLLVy_5L6nP_h-06(z<O70KN5
z?1@EnV3dDF2ZUqgRR7B1XwiOZ(CqXHL?~_YiqR9TMsfrr{`~o~RZ3hwXxeAr<KX?2
zC8rnH`?uyAG(3Ao!l)?s(95iI*|9rg;u90kKTVJ@a$({S9zhL;-|bKUjkW7YZ8)d$
zaql8j4MH0JmK5!yG?5U?sPOP3FU~Gq**iEWk$#X1U*MUSOzyI|y|;{ge0<#8)Ko{u
z`NPmqIGCTb`x_4L+b2{x`*Uv#b37d+Og(V_hKy8%R0POnD68oaGFOekaiDl}d?BaM
z5w%8654Kus!Oa=JbaM2~nsdumB{gqB5b3<*^puM}ST<#&<vYey;{3dLqK%6){vtu)
zF@h@OBARVUt!9POINkof*LuK|O|y4(bT-sJeYye}z{}ekq3anSA>FHQNBrQuA)EaC
zd@72Fq(DPaQS;OOlb;D?)XJ}yrV*eFPnVr5=UqDj;)f7Ae=j1DeBxV=1Eogt@ZrN(
zv_dNDGCLiq=}AfT0ao0c1#eL%nC0lP4YTHePkGV5EQ42Y1Poc^RSNd?qu24{H6Y(^
zP7myZM_<`?>XvS1n<zCsH8pbSN?x1(g7EO2eL#n9lOltuxVdhRtVcY3?n}uF-x79F
zQE3Iw_v)_-t&Au+O-N0$(-#hx#7*MmkMyrSt)t^aSuJB-3;W1wkL;PDH}P(=3r$n;
zwEOU&Y0mWU*S8PAhROeG<KT=>9DbR#1VBYR-OL#~&l@oMnnq0r%LT?a^@mh=ctd2+
z-0wl(;k@Kr#b-x`Tl0ARe%!TX_#@0TG&OA<w7^YP%Q#f314bVz&96c1yc78QScz6#
z_uMeJ&!|AJtKs1^BZLVKAt6~j=EvX*{ovqA+sv9H)C%tbJybu>_pO4lC_CW@kl`-*
z=%vie{rMIi8L2RG{K_GMr9L&KP-DZyMMVWa0I(izyKdlex%;ZxaWKG5Kc}4eN5H1`
zgAV`X>nbW*Yz6{}fx=80;rH>}v<$c<mwODAMw=fuU~#N@Ev|Q5TSSY3N>bFyUVNC>
zY0l7yLeQ|#lI7$qcrtSP@zK&`(b>K*5wEXr)k@UwJ!Pbx>Hrp^Hl-@9L_SDrmgGL}
zam|1+4d1q@@Gq4TxrE?Y|L)yd)Nz-aB@<Bbl<YhEDwkRT>;_bo@_l_o_|Ef$T^$*b
zNk4c8MHy}1gVqmm?#1-Yva)v@toC8Ee<BPQX*{&A3{(R%U_5<ATyO-axc_r|(RF`S
z*yaOt2eJ_6TltxdkYYeG>{_@8g=Na;tnlz~rWx-;iiDj%xW&RV+n|0LV4|z|P?VH#
zWO(?Eo$wY84vuwLz^1+Tda*C!0qP0SCwzTXSy)(hjqe7ZVhT{pOgLFZR>IrD=@T?E
zTBtYMhJ9IZlue&LCOhc4y52zc0#)x^JaS%8qXV^A-N(jc<CYydI+irF1Nat*&MghF
zqg^K}ymA<+`t2~xqZt_)Q)4x&aC7Ivn5}NKZ)n&Urzxjw2*vU?fOF6T0K{*L54VZG
ztqABGV#vGE#6(4X>lARX;h;g-=Vu1B$l}t{+%GkH;o(?xl7e#+pQ@UgfeT+P&tBV4
z^h)1xQ7|{r?C`eMJ*95#99&$Y=?5<kFyaQlL+EMfr7$Q83avLJU{umkE4am<G&h@2
zYSz^sbxv7;k$M{PoSbI1z5xMZTej@}&u{9dzjT+NnQ+(4bQj*#Izim{thIaVBlWa)
z(g%WTDa=nR%$oR-t=fQ^Zn<a0WRlN??a|#P=NL#B<2<UIoDpeT4`1>*yB%GG-Jcrc
z1k^hKVCoTH8Yi6aGS^#C{%>{f*hSIyL>8<88htk5&L-?GjK~si4#2gKQnl{TyWQtV
z3L2kugJDEh2K~tf3x?bu6&)?xR^WB6p0a*@)zGSw+?<>#ktnm6*@Yz2v&s-y`;p+7
z=P9^CTKZY91hz;aA6ay7JLCSd;ymWruh}^{Y{83R@yEZ9k8jU6NzYZBuuj_49zgSa
zd%w#443;5UF+caGb%p=7;2BkPKn}jV-4Z|x0X98{+!HR_H(J(HA0=0bC#q<xSbd{^
zlJdebrEgkCfzCB_8QLT+UVkm~cBjo69-ei|%J+65d+Q`2MjTP{+!_@VqYH5NUd!Qj
zj};O}Yg=2RkS?(wx$?2asDj1PvyxHuiD_!ue<L>$^uKR{2%qKfI2dbEblR&1t8h~E
z|MitkUtfQiwc?5o?RWepm=Ny^jbB3OGl{2Xt<l!3w)$-ILu@auHKq+)-metg`#(Rw
z5B}ppNHUip-5!g+jj^TRFEca(c5z{yPAg(#W5Lwr14<!i<#g`9Zzwdfa?R%6ukRj-
zM`7cN|8ZAa9X!~)c3-(K{Z;0kej5>rPlMCKOA>m(*VlI^?won^qYXCmd5h~-5FyFU
zFIO@Up)5zRdr2lQqs*xAb&rbX9Gsz)8OjRuM1d&_@gy)(rL~zqn&{vt?>t@D^E^~-
zu5a$$#G(w}ymg6HG9?F9T9RndC*+PL*`mMElhxvyt7vF-eIW@0V>B(ikJS73?_FPB
zJL98Q5W9BUg{xPuy3EZwGN!xeRM4<0dwDp4gl%dH#?YYUT6HOEt$W5|2~p9#<G&uy
z@26~++vwp*rv}YTd6(32aB|wVB8IY~gEAa#o_M#SE_M>Q;yJH2HqHP&DR92$@gT$3
z@AK;^+qR{x(OwVi`@LS!bEm}R&;4~#F9H*~EvP{VzC66VsTzn}4d%3iG!YH|Q1s|l
z|M`_6@So?mW$Ug)d2Q%&`LnIy%qyEr%86%R<cTGH`0yc=a6t>dX%fTxn=f@&UERF!
ze@gCr?iH~#Pmq9n%Z}P^fW<akvMW2vwr$%sz*MxyO1j=0(v<H|FGP6QYejd|UBI$A
zmUSNE+|=itMG@f*NlG5CEh$;}NIs5+=&m#~Gn3102#a!f==0QZVHM77`W@&B2Y+T{
z@QtAIidxv7RCECDzIODC%Hpf@@HX>4dUP{-j7MAGh@wV?yR#PC`wwr#I`VRJ*Qu!d
ziV%?z82RwQ2_5q&ebf%Nms%alI);6wU?mw-^lW-1pkZDBaXXV?Dw}%6Q{BHy+{s4k
zGj<Mn=M<}i#1^R}WP6+}w7qc8?O186!ksRchf;7Q`E1kWxmd4CrS#yw|7ro8jZrx4
zd34faIFxI3fYU4*TaMqp!+@QlE^Bt6^Q~uXZQbJFenv}^ic52O4Mp60pL%pG4%xTq
zJmAYFoY?LCkE|z3d6^Iw#TJhLuwlqKekKI=vLW|Thmh0Q_l|a&EjQe$m4BnZ8_mxN
z_j1c_aotS{$7rruzck{?xrT-z@1_grpAM5KBIxPqiB*knMJz4I2n!4I*%9F@fQV~p
zI^4NzaN!z_ytqm3{3>9Fg~K^P`@D4uupmAmLF@`KL_b5VVuC~Q*&-&p1#4C^pSD>t
ze@c2^T2hkuRb(<JKVe~E(2Hbg<t?w@zTMZygClA@4naaxRFscigs|t<1&1{n&aaND
zr^v~fs*-oV(8`z|*Za{xe7Pv__xIKn8~fwQ8DzA2CfNEoJ*UI0N{dtf^FA_paZ0A=
z;H#gdf@ppVFY>~zJ~h7z2Xhmft<HwvR+vBWpUd%TCtBi5y_Uf#`S6-lyJgFk4Krh9
z()9ycyS&JGmR_C{A7KdIEKRatA}QrMzWkpRFdhyyq>>|ZJETN?-qwrVwZ_?HFvFqS
zEv9XL{N2{}=)Y^S`=2$L4pW~mxK9PCsU$An`0ssAAkGmhi77>^)QbhnV#TrsVmeT$
z*^&)u_)hd4iHRH2&9bqmO~8u?F`>ta$;v1xt)`@-5=sFNV^$gH$8_2{r{$VqqI9(Z
zapb%Si{6m;&YQ+U!n*OZTh;`9?uWAbB4{_TyAp($&(bkn``5HRE(bgPeI@_@d8Gkj
z52ELRmoAw|a{k@tjpE{Xf$)VLZU-@fURa)@;lwMO&KqXhvLLJ*T7j*uPradbpq3bN
z-^4`F_J4k{?}2Fg?m{ik5?&^0%NtDSBhwc=*L-@U-Kxm?d{mSX{6Zw8Z*+9iLUcWB
zC^GW+=&=@?06#z5hr~caVIa5D{)VNs*ek_2+Jc$$68~7Rs8KW%A|G#7btr+USQ!zS
zgk-y-L&+^jP*98hb@$JJys)iS*R8(eb!#$7EPz<17WAm+xFiWC=F{;DnwO!WsoJ>1
z^D}D#-(lB|q_;92-rp4LNP}!a_OD~E5?0?mv#knb;>Y~pFA;R)bb6g5IiOLX1xZ<1
zz*;lFos4ODkHcCh3mdE@XP+NBE&SIeiVqovR0v20M`iMjpg&OE*4E~@knD0N#75lO
z3s(oM*+m>)zmo(I1w};&UJT&h8t&&Z1>7r-!W{3R5Y?8Hl)Tt1*;1l>MW47m3zB@Y
ziR9`9A8toPnba&ssMNgsIzRXd*5LN>!-rlZDR`*#o?Akn(S`Za6X2GZ4pYiESzEFY
zE)4?%)nR`)U`u=kl!y!xsS*0A0CrKlu_KU0$hY1`#pCs>Bmarn)cvhLdA9*MmnrXM
zg*9(n4U7V)LCLXPNObRLwu)VE-lT0JdBZ$-?zan34Y*uxfP~|Ds#3tG9=Ve=EWv07
zm_?_f|IfF_cnK?j?~LD{6ngooY-5%PUELQ@gBnR(F1-8vFA6XOq=yy=3$^-0KiXcH
z_>@WxU>M&IGs#bAmb5yY_NR${%dS*fE*A00`niC~nNBRT>y6`_ZA9nlj|;D4jkA0L
zJcvA>_oCw%!a;-hXcv76INVnLynX^W+-z&4yq^3+-CuTezvZoc-G6}zsws}OYc~O4
zAUh0A&fVc+*ufQnLH=TzP|!nS#Nl!*vGOpz9I45{ME?Odh<p<MA&Kc3;rO^GTETl(
z1lt!--<7)W$ys=ZjVdZ@P=Y2kzl>S{S)k0;LiD4D7{+N^jY1?oBV#ijOk_)_zx`+5
znll7m&TmPFv!vckU%U)jDIF*6uRV|Bu3X_GfG&`>_ui2eDk^0PfA0Z*fr3m1_aH^W
zCcC>Y{|t^Obr22A+Xu%}a>!0r*_oVyK#3n8`p*Ye)C=_L-^T;GNw;vJ-=-~hp|YIz
z3z%>ptj`IHTd@3>QCVq)|NYeR{Q2`X4}A&%vsiyObWr`{l%81h;qqPJwHWAk0a_*(
zA1T;QUCY67V2m4pDCNx_hoFt=*UA<?9vvK9CL$toE)z9R!@kY?ABLjF10>D^|BI%V
z(o`q^)(%jKP$)5Lt$_VKkhL%Ga(i#X%g1-4bN{`$XV>V=r>|XG_xBD$=xUCm*9AOz
zlP2gkW}||#1B97OTLRXf(puIN9EJJ}KsFDJ4OhsUQi5+*QE#@m`uf1_A`cjQ%C2N#
zk#3Xny2eUnJAHdE4CFrO)EUTFP){g2Z)@Dz!6vZvUudPC&E&$Q>r>T^U-votUO?q&
zG+KwrzdMr;(-u{>M2ClexT+Z>fDY_Ap9}A!-!&;9vz^ENE~ALCd(J3j8c-=|qV9(u
z+RGqe%Wei2yuix)yT86$(6WX{=7-Iaf5F(BnIh*o-GDpfT)Xx!DxvFLhB=JaRaI3(
z%Msav(9`Gc>+8e%kd13kFIo~EER<9K5E`qY_M+q#PONeoyvpWd$Bv<R=_uMGN9=r|
zoLqDOIw3uMoJ-;-5IRJ_fqK#r^{7AXO{serX!CBKO}N2}iMllo>l78ydGXZL)Fjy2
zK)7*;-r>4c{UO3~3F-*m1@evc94o&<Zd3A_S(zM$0Mm{gJ0PKOi44O^{hvLapY>Gt
z9V0IRE)Jb2`R;)fCz^(a2FT=97U}@kE!>+ODx*<B8@cf1qC0!TuC(x}@QV$I6fw@&
z2Vv+A^uU^+lH64h0agH}Qq|blXt_!sbSr7qOG_J~Mg@!?>Z0cuh_pFTZ??N}3JACr
zhM|0}2Hghl&Q)aP5)fdy+2Qnq<w+=&jR~aMr`6A4h8r9m9q+ij5C-k6s;YWmthY)$
zWM4w;2~^Izj@c>!bg4i_1N|Z@Y+1B8P{-qfHsSmw5J256Sl~aLK?*H&O)pe6m7Wn7
z8A03fNl#DDt5rriI@0k;NzRG-?Wl)&5vDzp7|OqGmOMf1em;H&&a;>ZpAcUNGtfM$
z*l1Jc-pLMTK#8FZ^I`h~ITamT3f5Qg{h5sTBX(c!CIxuOg@ug5fyJSHAOhEHm0}j$
zc9Qn=))IT6l4vESiLdVjA(-0QS%dq;*n-Lpo}Ju7?lV@s5{=_6;FvsUqobqpAa9Rr
zs3R_4gj6zcqD8-z|BwPcB%yv%tx37#iAbm3i4!N37FaJfKCNJNlzSjQx9r)oCu(0s
z8;v^p`SUZuKn_l`h@WV^fdv|lR^X@j+|Xq=d`{_L+VYpBNcnRZTh5{Z`763j#m`g{
z)zJ9@am(wsxg_ocd{-VSnd4e)h>clLS@nU+BWuBjmPOXjMPD5HNoStB?;Z&dx-kRg
z5v>+zh0vmS99m{ofCZa=2J-T|1Dim_*2-myL}U$1=Ei~Fd)C(TMC2ROud%T^T|aD{
zXlJzSAAQ<Z6A`|AYT&{esDtpV{!gEr>79ilC0#babU$Jd4nq-mi^_9{sD!1-Gfb47
zzRD};-W%7(oHWM<0`}P3#~~ux7g*0ARhdX}pE`9aer2$&5AEICx3be`v9D5%Xo;Lg
z=NhXN)Cw+dFnY+l)}3kj%9SNUQQu($tZ-<X66Y8YfL1r{R->CB`od$JehU?mxXD%5
z;rxxFqTA8dEt_^fy6dW{*%xX9uZTMnX{CN^(ACN1Qd3h~&dRD|ZJp#}m_q6bv;(;V
zg5&83`1JsCe;Ma5=T>QwPH3)T^moVutGc^wzx>v%7hodoF>qRj8XDO6Cva}sG}Vsj
zWucV}Br^JUw;!P?39#|X+N_(LfKNK39<RQ0u!i=NY8UrBQ%gi3Mvq*x=$hY;PiWF4
z?E)%PY<T`$_rQU5Ks<RC(O{&`f-*F6X^2%~LQ6M6<u}?!^7G&3XSIm@$c2y8@K;E1
zWoB9$JqaKew?N5*WsQ)vySp4BfJE@yAD$+dRrsG6W@TdG!wHPg{Qdk4&{2txKl$x_
z3<NOXt6UKaBBz5S9ck%TuWmu>fpnM@szF~86$q$VqkKLOw55r*xLGng94Q6#MmCW+
zpoL?}3@xVbpV2b7t$4cQUFg30-ks`6Z1z3th{mq|gS&Qh8<3iW!BdXMh0H7gQI%jK
zpK4uXRjXe*XK2<qG&0f{V9(8IyU@uH7uTcIY^aasU*h24FdUsP=|)@B+cQ6>;?{YK
z^u=`iZ5|xkhz7hIdI@qB6I`0VKX4C6J4zj;p`+%>?fF|mwD<&(1py3sPVSKmAY`<p
zLuI*-9-T*}gXtxd2<7N?lf_T4qRXTWIpP8!aO8rM?SSk#S24pNp2{{ee$UU;)Rb(;
zbQCtU3L)yV+{WoE=mPX>Y0|prCr_PXAPFpVltPXT)U%cU{*<=U*f<ew8Fb43@@yN;
zzaUeg=MO>EX7UD1V5wRFcpyhdlgf#RVW2MrEHngr`j>LP|L`HiF`NZ<5OEWJ38Hax
zT)J=ne$tAl3%dSLHB#7}3B4m`=NB1dUvljb(x6kWhMp?dV%KL_gg!J)NNL$qI5DEX
zF-JyTj2Z@#$7r0MLH-p>$So22rNO-w@wtO?`>);$kG^1%uMM4V<?l~|XafTlqZkgg
z+W-Ewo1uGq;d!)+cfybgst2;{9~{d=%PR<yEmB>O6sd%iF+au7+H&9t(?Y}2xlwzq
zkWe(R2m-2YyUmi2K;h;$Z}yVDx_I~Z-2njsdq*d?p{cqb@96wo03t&Z=qnqpcYWWT
zjLs@#zNN3@7VmwBy)3f6x#d5d?zDrA+IZA-=i`^)LJ==Yp5bk!EUw#3YWa$a=J`$x
zaU#1om1w_%ckaqiw?!kydK*D|2q0|I)-*}dI4(u@AN%^~+v~TC65%2!JW$OoAsi1+
zj?E~Z2!SFUodEJGMLzR$K}1#r5Qp|#8iZ@l#NS^&(vDXqy=EdJfT+OgLGUaE1mrmc
zQp5Z!#!%D(0FefmwHCo_=wzMA%p{`Mc&qzfeTyN7J5Pk-xD-+|B0DU)ZxE(Q3#Ki4
z(%sDuNNhbbyE7s@cdgp7e@J`#;?=9N>5j@@zkY=>oEs%^p2e<u@p^%&fts)ABj0>J
zBNZ9m@Ct4JGhpiap=E59a?WXS9RnHkx_0DMh_fPAy#Jw3Rmj{A5%Okrwhw)z-un%%
zUBDo9M0$Ner6<sWQuE;myzl^efxd(3r$~R7rw@n(@wf(I?P7AWL^{<PDVc!+Fi)|m
z`cu7KQ9BULVqhU62FOPC3j=&TfMyx=X02+@R={--itTOpkYhWT@K{DgMJ4dpyHg7t
zH|Qa}p*kv`n;z*Zbx($1;=%p<y`%-3mX=236CZFOh}RxJTm5u&HbTd{oe1cLTQ?5#
zM4=PBT41Xy8W+~e+d7yy`1r!d2N<M@Y>O~@d<=>gF%6CVlsZu;yW;@rj9jjy8^<jK
zS#GH65#hLr&;KJ@%!NJ|Fj&=n?}4$Q7O`QWD1d+`kYnUQLGp=#S9C-IUf?Jrs}_ba
z{?)PWMF~MPl6ZUQKCYwPf^y<cx60+&MCssU@JL<vJOmd)8LZA6u$x?r;3}5xD36Y1
zJ!(mh&n$=X%<62GoW@)U2zEaMbJ5}zSPb7*R}KKii-aDb%H!a}BO=ZaQY%uoz!}*D
zYd{BQB_?8s1m)S6ncqKrM@u{JxV1}TXO4M!JweXejh)9&7I48Qf}Z7B4@0UV8crhR
zF+;9dHoVPQqY-C*4zlf?F5$b0xAjy85$P$hkcvaj&W<myZ70ft-y;EQTp;KjYRixF
zxxi<IL<RTaM+ha|V(E6AdCProD$TC+*(W(cyQ|Q6P+>u>{MnY<{_6mbA3ufzn9+qb
z1H<p!*#fWXzWz;XKNspmR5CV`Wm?wozSEHVWoKuTVTWNJ(QFAJ2oozSD~akFNhR;N
z&Rx$QVKXzcJ7s0bCY<@70eQYDc6Io+@Q4;`U=oBV{ZVg*AwL)mh98C|6Do!4g)hvL
zbtd5gXo2eZ_-rMltVQ_Fx>zB##adcgXvUf<C9`gd#e4`3!HlSzc<Op>=1qZU?m%Mj
zs%VcX0+gjVz!G}eI*?QnvmF*PLtmZ&kx1x*6j#?wwIjs5)Xj>FT_DrKA99JfTOY<Y
zhP<|B>C&aGYS}P}7)XHI_owd?fkuu5cA{v9SPD|(c(zCAQc+HQjfRlF7h$ATt>3MK
z_H_Pd62y_LAUSdKgph|~q6v+d5`s3hCD(u(pIK1!IfXOZC%%8bWMU>8JE@38ucFiG
z<>SjZQ+DB{1(c73qe;46MP&~zMKK?WMZCJXcMnCkMYUriip)CXdf!lE9lZxw!uz0K
z`)6jqh3GpvX8XiCLS?ZU1*0z5o?Hu_IO={D<ZP73r*G$Q#8;u6PSELA6qzW%%|7Ps
z$jk%L-t{;{E6mPR$Xx@^S+k5?sP|EA#7;Tb_Z4Li0it^goNV8NW<s)w`DGm2z>_me
z)F(Y4d(VJy-Mjb6qG0y4@QecJ!7!O}IxcP%5g|i}GQ6R#V9#w~;OQ4C3H;$ykJH$_
z1F+umR(?(m5P8ht5tg&D=@Mm2tmyCGzYjt>6lhClRqbFdv@4YcBzo>1!Oh8Zp!3##
z*UnpOF`eT5`IXeLP@Nmp=RJ4a|A{@pZ&_%$LTh${`&)-@t|Jj{g0rHW_#6uI!(dR-
z4l)}~LBU3&aDg+>t;TuIRsA{0UC;=>ZYlRW4vn(d=FKJ){c+rT9P;O}>q2_{HiCeb
z{Me)_aOY6LHAIuaiKB0qV>>5?T9yE$B$yPlWMyR$|Mon7c(IVXSofPZREz~dy!()7
zVr?KhM9_J8=b$!}&iw#>tp?T@O5q0sAw{~h7Dvve`<&hcmimgip8~d0-mCXtqT`d`
zjORq?IA0gFW&rJ&dc=Xe<Fv?g=a!J%PXH|h&0aL)8&Is@uq_cMx^O}h406Pu0SUN9
z*5(cqD)aJ_r}*zbdPHqZ+VofT^Stk{7q>gquF%)-ChY+p(bgK21RVVQ5!j9#fM2x4
zmBJpfk}d`&y}WNc52boAlj$-LaavKvxd&7{-`65G^^T6l06GY1243m>x;Y17Omy>R
zc1)SYo6v2c4<8>JdqUz3ig!F^IulLvBX93>k`mJ1w{Ph#hyfqZ&pq-<vO*#E1SOC!
zom+9hCM~|CL{U^sOg?zV7vHmjN`FDo4aAH+#Eg;vaZX!nPgKQZ*h?$*(4xR|DJh3b
z?E-&xyZFLR<sp(JoSp=b5cst_{*!LVYXjJ|RyAczBrFA1*@515o`vN(s>gaTHQ-g&
z6F=Jb&<A5O4dU-A0@k3nq-$x(197I`#1Uq^R~5j23yyM_2O8kLyOHg@Cx*;ILqiWB
z%wV)fxeqMX6adQ|w7<XfJkDI=p@#&lkN*6E;?OdT>TwW50$t^Piq6efBZ$8CUB1pC
zfQD$)$_F9V#{`fzkxO1OZi7j{^-wu2znSED;?fg3@3nR}`9sfm&|7AOU1RPt)rTuS
zdo?d_KZLU3F)?I#Y#he&ebqzWeyHhjW?4YUtx|>cblz8x{t0b6$x0NDJ9eD)VUN$o
zXv0#(oheA_2zh`4(1BubB30QV64qAJ*l0x2omB0pCJsI|c97@@31y?E<4AZsD7c7D
z58q$V#G98wQiJqxMWoSud2H!oA_i?Qv?9Yi??dK;$jpcYXUcxao&I;QLr5!F2m>dV
zn$0UBSIan#_t!z22k<q!f?>CQs{q^duWxb0CeaoyFVN_|49%|)=nB`X0|NtoDl$t6
zF-;&L=_m0_ufzxr+Wl0752BqXvgFFfM4Ac4Q%y28V<7G5g#k=~i6G?lLIu^LNTy~8
zPTk`7-KneFoA+|~e39hE^z^lwb5m4;Ckc2YvTv>y3rLB)pk&E53!a&URZW?A$n?Vn
z01&c)C|ac~7sr;K1>?d3wdGXrxm94O)?*6s2Ve@>>HmLj2jOf$a_<9d+YH*U=ZlJp
zd{`29<P6Nep;aTBkog!gH<^FY&~>XoEIkHbzoye6gt*)=Pb)X$b>s#K39$_u{vjGd
z=v8If?|GmVuG0(F3o{B!#vXcG=R()hRS}?)Bx_sUX07AI0jeVq6#@Ay>@~}H!)rry
zDGxv)R=$2YXJR2D$p0OiqTh3b&Jg0C9gs6GfGKSqmH`Y~=tl8oxxC0A%{4Wre=?ZM
z908seEn1`+@KYARenUF0Q}7)-aCO@$cBIt)-EWwLZQopk%^XCVp!~W*d}KRj!4Q=o
z*j|h2Dl!YEO*#1`9Ln;8Z|{4T56Z?rb1k(aGiDGl;0Eh(gN4DgS2xVMFl<D^tL>wc
zqgz7e0{=UhHrA;38zWi2zP^L{sK3HB;>hK)G8HoH1~)u@!$T;JX0=X2VwpqW_|oeT
zo&FtLQMiOLIWi7`%A3Q)#00OjNXUIPDHX`@9I7vbA?X~HaE^%FH|#4A+HE-)cIU|;
zZ@ifP_l#~G>s+*spd-^vRq@=MzGLxJYAK77=X)VCu8VYOR^n`oDGurF=r7PQ4hXPx
zQTwJNM)n@SsAX-7|ABexxVaT#YHZdNenW;tSOt|?flXW0Hbhg6nNBZTC48W-`ur4z
zAQq~6?OZ#cO+sTqp}8Qq)@G@qUzc!layl?K^P8}zMCN)t+_I*<eKnF!74VDi9u0pM
zMrveYQql$J*&M6RE}gl*CZ6Bw#_okVO(KaeFyDyDO37HIL`gLFFnd#<ts4cO*p#mA
zq==G+lb81b;Cl{wd>DxJ5^`^Cgm!HUG;Ol`A70L9L_}lMGZH!xM{r^{tZ%0Ju-mSP
zRpQ?uCbk4<j{yWc4jRDdzw@EsrOE87LxT7@Z(6}Fi16tUmJzKc)L%siRE~r*<lA;q
z77G3Yo}L)(wT`43>tPZdh9E}<NkxLEwv)-#_x>ZBqStQYMIn7&F9#!|G8n>5P=i$x
zo)^xs4n1DP_kO@}h*hFdFXb$Z3pi=3b~qg)i4A1k!n7`-0m2%-Ao!scj|5JxX=}5f
zgdO2vq&AURLYQ7Pq)7Bbjl4WOJUbEGqJfABZGfu&8f2$0-TaD{Du`fax)$vgB2h<_
z=)+eKK@WX`&=uFMgZsj85}Vg2_Sz)qVzmCto3d5JEs%H|-iR0VLV*by;vgvRz#6^?
zTy*8psc)pjK?U;!r;v9%JfjtJbC^)3J~_SU#=Zx|KI{d2jF<A<5==~sC&=FgNag8+
zETikbw-_0GhKCuD!RN!R|BxYSR@TtCxH#AyQ>>EIOV|WK0&IfHq-MhLE(UJa$L!VO
zB};zC%a9p%sU%2g&<{Y7$$X^i&Kb{LVhKcNgp1CeJxicYCA)EC{oes^um0K<I=Z^+
zDU{UP-WDlaJzn$tXTlpIie;%ZW=1Nl71lF`VIxt1L4x5x#N;LHJcE=uhEalSq~Re9
z@j&&kIbFw69P`)y000>L(BHL-6}-3atDDD=J$1{Dz9YkRcU@Z+gGXpJ(9y%J^z+|8
z%zgnZdyyXZ28A4eY0?l=_ZLsY3e&E)4SS9E>;9j?dT;zVEUT~sYUUPDh}oXV`+e>&
zoPJ<@oKjFwpbD{fi|;&oE9I9`cc`hVUc&^iZp~Zp7z?5xPFo>Hs-+x)4DewMoWKjR
z8uHf#)@<JQFUjnwg(T<TuG<07U*hEMVqyeg;T)9YJ_7L=Xf~4v??JSS<ZB3i($jMQ
z9<7I!vp`3XKR|##5MVw5u`pO|9gO6NEBx!`=GNky`M-a|0JBX`=4CVt(Eihl5x^8@
zJ;n#4@#hG5ViZjear0vc+lh?h6Ag+NM#wRbwi@$QozR6OnQV<BE#NnA1o0;m@YT)J
zpFVy(zs4bulgK<Gbd=BF%ZqGnZONZqK=SkY^>sfaA>>a7RG|}=F-<|#0F^76j^K3z
ze@FnW-DvDP&z}>RY9Nsi&G?m@H*XeA*Kw<%i<@7A9-$vVai@`yHncQEYml70XJWRb
zvibS*rDKfQWRO&ml_4FSSb!JA8;>4sBlm;?cjbI@#0^y<j}krKX1EL)*X-$>*31#J
XwsYd!>+#1jm<)7HbZ+f9aQ6QJxt2m<
literal 0
HcmV?d00001
diff --git a/src/img/OnContrastIcon.png b/src/img/OnContrastIcon.png
new file mode 100644
index 0000000000000000000000000000000000000000..3ae2fd847b997f007110cfb4d85930f639714ab5
GIT binary patch
literal 17257
zcmYj(2Rzkp`@fb-L(0g`QA8qpWHjuV*`cBkWn>E(Ejf0wl1{@&O6epi86i>GqNL1(
zG^j{2{_k7Q^ZfqL>(%S=JwE6D+~c~h>wUei_a$<VvCb+M9u_7hrd4{nnr2K)3r6to
z%Q9ws@?#>L8~?Z5Q`g#uiD~sS@^3-%messWOdFW=G<RAAT>knYaKA-(SIyY>m^{k0
z&Bv%LQQM=knJ;a*u=DZ9)1MYTzHxM~xolC+zBk@Azm~V&K61LVdg~otmv4a_1_qvc
z_3z1Pu`klHN*j#7tD3e<w(iGv*}=b|rNKufWd%<p+cl=8`N%Q(ZlF{*9g(|9Wl(Ne
z-C<#6WmQs9scdd$TfKU9wO#6jJ5z0AqfTh3`i~z!^k@8SZ3Xbd`Gka1okbq~6=#-K
zmY<-AN78+n5_ldxdUVaUG-&k4k6nc>ZF>q`EG=$Zea-Fm_x4^pTvuOT{k5~mYp{X;
zeObug-0rf_85J{g^8`A5Yl~i%0?%merP?ELad9{I6-j<>yS>!I<9nY}{A@>StGP<E
zL`!RH!i5W`U%$4<%F1F7(=#%vZo9oVAvIN$uIso?sa=!#rfsRp^z?L7hSrJ)N17L|
z;*mR9RHW$g=I*LkZDD%OW)=GC@|g)<Gc&XEmoLZ2IydzE8g5nc`Ly!bhvH3i9Y;$H
zvdPoidspiXqvi~)=svHBpFelU^2leky6v*DdFRj{GWF}|WsNX_$B!Sk9Mz0^#t>=q
z!Sm?~?oDMOCmy)8v23+@u%qhSs_Sho*{v4YH*YRWm9l$2+?wO{`L!6IS`fRa@#UVA
z>rOcsiGLg(j-2?~nHlnTB4DhVYi#;wV^vp|txB~1o;`a`CW@N$4K-(0+hN(+1vH5`
z2O|Ze%;syRncDHO1^M~;zMR~>KL%dK$NtVXNWIoN7B79@ozL~YGWNall~j35Q_~*b
zZ|}L=ZdoQ8Q)G)n{wl2IS2;U58Stg6lvnZC`}4*W8Ra;6Yqjm$w=ZU9rfl4}SV%}{
z^!M*nW6I9R$jG;au3Y|K--Vw&yO^DmQ(u&gJJ!L-YPeCSv7(~F^Z0Q*w&Z19-LtOJ
z6M?Udtm5&@ote!~ySoKvrp9+4IkGwaO78x(>(;Re3dY~rS45GPPRRF5Z0n&W+8>qU
zk@M){Tg1F_2bH?Md%d<uGR~tuT~Sz4a<y~gl>yJh46i&ruS;@APcK-+eDLYX1xMaL
zV)(AkeHy-kD=Ok|W%!B~Wla-|MUiuRyXMfLL+iI4WV)p2AxYmY?*FMSt*_VE*f^y@
zXyH?a$WF`KR$2i8N|jYre|Y4?%<Szc_6`ngyu8udkAKr0JRjwi_aZ}%XO+tFZ!y^2
z>mJ=@)xYgT%<fN52fKAXTy@*(PUZF85tCC2)_gUWBr>#Pd1y4+)0?K5P1klV8s^LJ
zHZV5U_Vtx(zkA@-lZb?B&%76I4{Wv;`;DAy&eX}=n{Ruspa6#;lU7-|>&silA~GT_
zz#a>WjdV?g7zZPfy#-E2G3%ul3hTsamIjSy`OxYl<>fh=o11BIaoRREmwZ=uY>1Oj
zGlXSIA8pyVl3yh$Un^03U~tgkL$M#VBtW|1s)iJOx58NmBkkrRazicID@07L5Gxqw
zqg2!4<7;5hljr1QmdD8_N0*kWRaRDR3;f{-o7Go|&}A6YRl>ERIS;)`*}8f2=JO3g
zTdEl%XC6I%eCYK}(~C-8l+Ukoh3UH;<wIx2_evZnX2&9SSy`p{uD0fmlON8ux?^)u
zHBbhdvqVu*5%0X6oSYnvtrwD!xo~`eaH&^buEmurR|3A5{@!-%y^@l$vfkjDj+o1r
z`6Tu|T)Bc%Vn<L=vF~az?6LmG-riGU<~Mpg!v6B^-@hN*;b!IUuaF{nAgZ=j*U`}t
z$F|EWZ&>=<w{K)_B1V^<wSLg#Ou{Rxqq+JMP1Ji`-~Cz~C%=G6-164hqV7=M?`3}_
zZ&~D0=)1FQxVgEhk35AkGBP~pW<!Sg%$CI!zEs}6-2ta_QNf)@RZT71hc;A>yC?0@
zr7B@p#;2^T+@icO#^H_`Pb~8p=2ex`e}4833~ZwB)->_@`cA&&ch`xx500*rx|?Co
z=gQ&IdSext?$f6`hS@1C=DT(+6fwMba-FELZq9k8JHAZT#$VqRvaMTp=6m_vmEA^;
zhZindG&b|Q+W{ZnJn-Zp_H})Hp5@aQFP0~Y7*)n_%T7v5P<YSN>9NW_pAL@oRoB+n
zCpQSK=%IFQi`6~@d$RAX3@@?Vl(0%4t}#i>{9edk|FSFY{Yvc$w+_Ebp%(j!srY@~
zNZ+OD<Ucuj$nfH}1$ugVEn<!$!S(N+TjWvMR&Yr^i`ST~y)I%F34`dZ5e$2VyJpI;
z*Ba)NStMZHdH&k94SD+?uT@u9ZxPen`0-`(mi1~uaueUXrRcjvo(a41_TcQ~UE2?K
zmxb`TP?CR+ja6W7_kzY<Y-5|wjn=-4!u9_(@`m+l=#-et>zhK@L6*dnlyhVKH4dE*
z-GdihO75rb6O)pXB8Gw6aKTuJ65jdPNA!6tZ^X!(e1n`l%42emlAB!$*ULJsgyA<{
z7on8?`rNi+u<>e5x<}daJ1Jpb_6ZAE?@Pcfq=<-|`~E{D!+U%1<TeV0;yM1=a+qC)
zX)fyUCg#<Aw5+U+tL53av(0mib@lZtpPpKjZC=a7=Nj(g<Fnh%O+vx_-QwfNkHe<#
zFMz?3Q?|Fa@A>peguXkd=cwlr*Ee_h+w<*MJv=;y+0BIL#!E@O+3A#maE16NEF`p3
zC0yTh!PBKJY`>J?Z%gK8|5Bg$Z&g)Q&GOOBR-YOYUMZ-~2Y>Xew<;px;zb&w-22iK
zTpZ#SC)3k;Yu+<k<eDw<C>djhqlyzyi^|BL3~v-ag`lg}P*bxMyE3>{LT|sRDcjxs
zk56yedpBva|L)zpN80naFUh-}`&6IK6?OnlChk#k?w;!l)hBxv`F`)>KeLooTVFrQ
zckRrQ8XF;ueQqW9Y1m3dTbrdy#7)EB-#%2~T)d_y$7;&T^^?V``@aqjMm%)y%)nFk
zii)_zH-#)g^biwU?om3<so?hZ>5AOV%W7;ET&B|*_SGzBBO(lP)^LCQ_Th<=_s3;%
ze9C6iAq@=;M?MtG!{pi4tT~B0@;cAj{N9Bt&)eEKM%wS}E;{yMoBtQ;$B!R%McI_v
z`$|en88GI_zke}Snvt<_!@5Pb`L?BfW5=-d(=#)NoNF{LB;jlqlK2bL3$)q4U^497
zHN4gVKC|Sldajv^i#X5*<7lf0Q&{k2c)4YWWXo2s)<(bzUy%!6r4;yMBl9YrvuY<M
zbO&$pXgF`(al6gFJ<pm1!-z{m<ubCeWFj&A+c|+QcHoQBPIc?uy36>>=VqVyUU3Nw
z2srrW?tzQSJ|a?<;<T#;54XW|o;`n_fw+bnlRY(B#X458R8ZHMX|iAHk^8#`6$VnJ
zXRoN8==(Exb#Qybk}vNcuVZ6ltF5a`GB)L(m49&>fh`W6!}Dh3N(&2%v+!iA3!EFZ
zfjWA=evQ>j6zSEN`@^ci<+c;Ir807zXj7iG>@a&<FLj?T0&JY1#%en|JNTj7$6@-x
zKVFCqHC<m+Qc^P7zR%;(-0aL|35g`*g21w}vdM2xzOUir6rpE`^SR2lx)fg22vhIt
z>+9+3gXeVgIo4GYIq)hqb6?Rh1VH9<tb%cX6zuHmx;Y&ZTwGkws;dvpPX7t!@7y)%
z0q+hY2>j_}NLR5`3D@P2k&zk2D*Kc7+E&Oms-7V}{!2$ei?xC)!V4`r`b<GVfp1iO
zKQ&!%{BxUE&(j6JzIN`#SCd;>TGnuLFW1n}cyR0kkEyBYBcH)I-<0~{H~E6A`IMMU
zOiYH^)1NaG&L9K<$SlDBu-}V&A_PO9c6yY@zAJRi44a#soEpjhGxc!!lEsUACdc}Z
zyuO)$7xq!psWox@3Fpr<2?`2gr>3Gw^#4%IkzY0?j=7xygzJA}7na;`e>r@guCDHm
zh}HaA=5A|i-kl{TQ+nd}k6oggRvWf%UG?)*{TTpHL|D&XL#ADiDs?SySr9L{?MTxG
z%(9B1umCPQP1e~SP|?%V6XBM!NHutJ&Ax|j712^<G`O4%3JRQofq^a7R<9~57Vs*#
zJw*%%=;c}0N9BFd)g=IIFgcVNpJh&~)zz3DT?FIbQ*`V=@My)-M}a?Y_+Dt6n(U8f
zxU`9P@w90wwQGC&`#+E4-@Yw)(i01mx&GjRT<~OXM8HIcGn;@w+|R*A15xX2Hev09
z*oo;Qsmnd{UcJDD92*;3wrW)}oUp9e=FLyxP@75ueSUrK79`O_&q`EIj@>S7Mt=W+
z1KH+zJT=992(zcL9~nM_4LAbF1;E{~m+<m(jiB+*;Xt<fqSnch2a0>(s(aHtVxKY;
z_K@Qq?b%r}TDgJ*mL5P@O&Iu^wQEm1)WqoxQe#h^WU^JQUdHFTC?GJfceJ<aNXPwb
zUlz9Iouwxf-xYbpBQ)`;2UAsQ#NjCVapvKvsj0qExCSFHIy-rF;`ny<Kab5er|Is5
z#hh%QZx;sWb#Azv&|q4E*wSB{AUrxTkz&k%?W>JyNK(XK!GH9A{~nKB>6scIX;F@v
z80v{g6>Sr&DPFmC-@}hbc_}Rh@Vf93i*U#4F3GR3wzh83iy9ah2=^$T;e<arZ_Hrf
z8!>y}*0FXetH4KI3axen;KU@3rx^$mQ7-0pduS9gp8lrmyMqPK3n;alG(YlkupLaN
z#ay^@B@Qk))4IUvEyH1HzMAc69l`Jcv9T7fJOgt7kw1*lF3}7r%F5jNr4u~1A>)?&
zAA4)5=y(CgFv8|S%cO3y^No}vE32HH`TK`Qo-J*EaIh)~3>^i|Kb?fafMmkSIE`I7
zJ=8gJ_ZS}C>a$<tXmuirid?`b>PW2a9sh1S%%=r|=(VmV5AIDCw;Zik>>l-bt?9`2
z;>C-A;q26Ho;^FJCptZ_S!5BxKkF55?tgsWH!8z3Z){F+plAEq$l4b8lqUR^Aj$CX
za6H?CZ9eeC|GHVWev4St^(lrw>^0RcG!o|ydo{~F@%!7MzGsm~y35og_dnV|&s>Hp
zKKbL7RN#sFIkRzUXJ@Aaf=9^-PByX1-`!#HfTRGQYgq-=lN#9GWE*gi`#do*(IVDo
zvArEIZi`i3&&<t8T~p+<+YY~E_x=2OxyH<|MBlhaz|92p@x*GYXeGJS1U--8Uaubf
z$d{STG?K*Ml&$+H;^Hh?T3Rj28QL-HPr*MJIMd7qsH{A4%LGGyC6GsR1ylo067Y#Y
zqibZ8+`u+IRwLLy{>Cn~VNGT+<J((?u=?Dz&+tkLrIcUElPNSblv>~vdrQi?*#E1I
z?@-fDmEC7=JugOHLJpsgj}P~qw$dA@m81*3y}ggZ=E{8ImMvYn6xell@*B3j_0$tV
zK@@fMD~g{sP;NgAoe6qyw3Qj*C)t<{UpNJS-F9HWki%hSsNnTK9H*)MBw&p4?xFkb
zcddQ+=<Q>loLlN=+<!XUX>(y5`=Da`>nzPp-`IFHS*l`Jz@m<hjuvH3uJ!9_Z{Jdn
z6e?&qFj;JC$A#BI@XeN`(dsA)3RZ<V)qlrFA|Cq;>N``<8pV&FT(D@H-)9T5-hyJ!
z-i3H&GzJ)Ek4{(d6NkghlC5iSswsxCQ%i#iv4;s-Kmi*N*v)SkntsUEf0Ji@#;N|2
zp7X_IqqxE+Pqvp$_N@TzpqsOX&Dz4zabwW0p;L8rh8WVz%c}wjcJH@ul5~3o1;uuo
zJDdy#V|09+IJ313*Ef=j7ca(Dv{tFM=TUH@UA(wHJ)|nFe&+5CldEwE$@<P~*dmLu
zHMRl0OTKg#nczX<!j87yzy!jLV#i6QjXPw32gNEsJUKoFdlVKI*O$LqGYjwBRC?n0
z@XEx3GzRSMIed&|7_U4fL*vBcs8CnvUw624=0AV_v?x2}G#|O=)vq0J;)FrY#U!H`
zzv?Is0yS*)lW0R?R(JPDVm`O}iu(iv1m2c~JTW@ZTlcxfCbRkApC1GBS-TL$>;Ztw
z2H=_^kM0y>>Fr@*VKCzNP7M!jW~i*(GK+EiE!>)#R=t0}m)DRub9-;Te$K@MnwpE5
zSp_8Mht^uDwd4G$58cwp-djHQ9bSvTnG<D@6pA>ZFg8`#7FS58&%@old-vjEQf~i*
zt3`smda^NWR+w&Y1>8w34^{i}<x7@%jD4Yln$IUgFbrfft?zV)&GF+lkb9eLUUv&O
z{-U(QIp1@pdER-Qg{~2}xOOUMXtkdQK7GnCxvCDBe8)G+x)g}nD&(ZIpTpNrpU$n~
zRe1Yl(*TVo@fCO(7gGuT7q3<TUVe(-&SP^kNvom&0EL@-^RJM_7&Q<3u2=TXGGcv*
z;H*CL%X~P-n{kVQg!YZJ@6aA%l<8ULDps?y){q=PcBPZN!vTa;?BRYgr5m}2?(NN^
zo^rk#Vx>~G!AhDKl(e+8LP)+Dg_3=5yu$zZaUD0eJj>GGFU0kAVtK-mMCoDKx##Y%
z`sWzaw|Rfm9bQ=~7MfRDQgZKL#X|DVwm`YJ52qM+L2XpNdS#%pTPjMx74V=@{coL1
zw~L9U<5yo5esb~X+mGY4E+Zj;`*Gq>{JZBD^*1spoO)8j28vlBvVxU-N^2155{#uE
zgNP$!Mho|0voF*W0RbCemskgFv?jTM+>+KD6WH2*3k&x7yx3H{I&K^!!Jg6}KQgbW
zd|acF=^w9j_4F`YE|0v+L9k*i+}UOysmDj!R{^^u;<Xv&kG%Ssi;sVgLy*_Yx%e8P
znT?%&BYn&wigzT6V@u!Fx#=970GpbYx3|o$-MhWMcc~4tC)zyr-Xw07x0!BAsg4~7
zPFqH>7v3yh&8jhd@{R3@RRjQuiS+mPpJ7#>+@X@G8O1Y#wcEF3=@CQDikSKPn<VW`
z!@hV<mhc&F9cC*1%cHo-7J?bGX&dOK(O!T1*{D%-VUt0Ytf4j_{fi5mqW*p<v`=Bc
z#7eR@vn6m`k~z!*zH1ZxkPP<uxodu@2z_k5R!m`HVq#ynf{CW)rW3x+Nl1}(b1v3l
zpL#xi+(<VyWOGmhA@ln7UK6snFU7WOS)ms6>nX;_GB>OQ?)YBvGtO6AdW>=Rz!L?h
zx{E^eotm23Q^3J&oSf%QpI(TqAo&7#%B}PTI~F*o9sjnUcr+MJ!g4+(&mE>ZS<gM;
z%q}bYWXUoui}ypC49F&#wnI}><e^)KO#0(Tmbk<39vl^>3n{k8tKZVn)O_e%d3L$3
zp<z<Pwn%J5R9KRMTi#MYRRq-B98n5I_T{TryQ$QRM*A<wZQHgczkIg%$eCIy@>2&u
z__ZcRnwp#!K+H)yJb(L)qv2EIRaR$bXT~5G_XxwGhS+LfZX~Vtw8F9XG%&FS&g<{M
z-jR~Wy#2W^IByGx7dT4msiToJ-C6>{!MN%=uSd#r)c&gN{Yh%PpoRb_p_EV?3T5qu
z^z`U^_qI7YI~(Mz&xV&>uMt{O>$A@{@56@=(g+#`>YLcu#GZoRkp_P>yfV{>uEKHb
z*fGv9+vvFQXOZhnv-LUtJ)~)9xDpAu6#Wo8*lfegO3i(Zt_;S+=x9&rtw@^1G32w4
zLT8HMc0e6Djx92YjvfE_B2mkjAA9cY=;UPou{ObK#!C{(o8cAJj*P~m35<zfzn-04
zzD{Dy0+#3b<oNf8Q}I4V7(Bxx<zX$g91Kv2^-?xAj&!-BYwy~YiqlPxNlHp`hEzT1
zs3`^-Q5ajjgF=y^6C^V^+Phg?{DQGqkyroo>xgKafszIBWD>m}KRSNP5u#AG_#pqu
zqcV1>WWGltwRPfMp>@r>4<Gn5b>bBU%`sDs6Td$kAA@NdI45<2E#CU$)6s&sap2hA
z&!1fyau7GSO!QPNTFI+W=VB7^1Z*DG<rF4R5L;MUT3Wlb2Ip7Ir|i8Laj}JaK*6g|
z^KEBm`nYnPLOZUO4qe5sZhTZz({c9=V|o;ptnZxkiezq~GgE1JN`}BFL}uxl-Rsyu
zJeio(<XIPF$-Z=dnIwjqg42oMf*8NS272=?%Pl^ta%^lJH<3Q}<FcP`*ql0e<-}^d
zLZ-7n{cv8O1q|+73!Jp#vCC~`9d(yGoqsTny?Y=Amtiz>51YQQJLEUL%{J;663CsP
z#p-^%6%lmpvW}+FVx-;Q$-RH<qob0!zpn6<2>%G+tv&MG8^O91idkAr%u2(n>Id*!
z@WA!n%gqww#%XNAJv}`KUq)=CP&lGMw3?Y+@I6-nltq%HM2)*Ip4;4Rv-v14i5>Xs
zt3q!RI1taLyw>K<QM<zm9hrV`f`H1hZB=Y+2`@q1tpL8qb-Rf8a{BaX!>NlRyd!{a
zX`ioyF=m?fIxI^!7NsBBX6})p_q-U1>d=QLMPdR`G}_I#FA_x=ej`@HE6<F7`@oC)
zq}b7)=9ni;p&Z1mi;6&g7gPtlfa1Ug`k^%^PMpxx)V%m*EQSP&D)SypQ32p}T}Eam
zLYIQe>&=M=q}~rPzP*1e%OiK>U=$~XlCd@f8Q(l)JhwAAB*e(S)HAc@l1>}GeC+7a
zqmv&KO|lU8ZpF&E<bmLgLe6?=<5^5kE}Bc~IdVGuwx!6!&f<<u+fa?POI}q~RbaIY
zg>s)p0{h(bpax#vH#BtQ!YfZ+wRTJ~Wi2;%<ooygv9OEwTVAQPBY2-JFE4LifL~4(
z2mTZRnMQ_%g-lLO@r<t@5Ey|Y$h>k9?^T7@i3e?tZ?AunhTotbuzvg*zB)jPL8uwP
z?L2#1FY$(|=>Co!|E>5rG7^5+73(G!tf49W>QzBh63o8Y+1+J)67!@`F8EG-u?|Mq
zZ{cQ^cG|w`e>=GG7{1lAoSA#u!5xpKG+aihil|e>@+wNcNdzU6rVkp|_=>6+{dy7n
z#x<bSfvG~~c=>oZ6<x6uDLYB}!Sg?k-Q4MLr}@ZakUabq0exP-za2o>N1l^BV)1CF
z!`JWMJ$@~Hf@vCVLUslEFu9>=AHr$#{lf-l!st64KIGeJoVj|EMytJyQIA;)_KP>B
z@W{1azkZ!rV*#v9d6TH91E6*bchHu`l+SAIDEsskKE*T=)c<~w9bR0D4_NR|X6Vh3
zTDw&F^!*Bi9nF-{w!L<}NUIXCG1t>?{ign8SHd(ck;4LHl9io5zvfJ6nXQAnvvUNl
zhxZb!+<F&aO<PH`gp$&F<Yhr~!KKet5HmoB4#dGSWs1N6a1h+l&}1<1G8weqwcm|z
zT=Q0`?MI}!aPLqRGv>s7{|=ukjD;IK$4*<@E57G!4OQBwYdP_TXktK5{J-MFqJ;!|
z#eMSrBy7dABJIB7`@3Ve{_nr-LdH43!)43<%J`l;YDO^dHG@=1k>!}j{j(({s-WWz
z07V@r_H7=K+@Brim#G~~N|A|LWF@ByFSF!Z-QfY?r+#YO;+KairpJAFN{WH9XAcu8
zw_)VQcJDm+#!o}OD$i<a44j9;9pIgAjbr!pM2D(xGT`5fZ3mlihDk>nuc)Cyn%c10
z9B=9w9=87682Fi5<oc%J<NThJbZwrQ*e!L~{hN8sr5qeo?YoYbxt?*bk&e8uxxd{6
z!f+oJe?#Ig@hndB>q$yVVn@NzRwdIAMYMB?iLK^gCC`wO70ZA5`n8@Dao$m^-BbL1
zMaA{kXFjg|&)8Pef4k>WjGGLOcJAw=7P+*&bdx5h|Leo?ZlUel_hGnfcaKPi4=9xu
zRIkCdm>oJK1fo!qZhE8T;qOS2eSfOn0|UGf{P$~7%ksl6Z}0V*cRNlzqbeS4S#0B;
zR`gf|8_v_dtsSU)2fVTVG(*%XZGLU-d>WyA1iWz{4tmF|A>EF|)+rt_?S2+q!DZDz
zGt9uG^Pqq=!iG4tD%W%Vr(4!l)Db_&13;jtI#p5Tch46b8mT}!C*4Ar+|(uclfn38
zO7`s*0%<QwxMbgsMho(~mf7Nv9)5Y9YmN!yqd-S;XyDT~)A!tvsd@M2%^UmqeQ;W(
z(+&bRpzp5$uPbQ#==nXcF*92m6%~~wt8dxD$rWFinJElV=H5JS9K~UC>Y=lLoQGq~
zu&|2e<}t?iEdnE;!**phQ&r)^YcC|t78hz~Rullbzx~Y-?*}?o;=^tnk(a)pYtIWK
zNr8V;bUC=nL+0;@h!1Q`*D|lS_R_p{`S(9xg~~Wi$HIi)walsF&XxuL)dFB4F4un@
zKl@W27s#v>48N{u(yeF0BOv9I15#OGzx%R&5wlc5#Vl&hdd2h@Hy))F?wO)4iuWks
zoa}cIgAKSGTIFy6xk#Uf>w;@Gg)aX#<i;<>iwkz3SR7q`XJ+I$ETW?reo075%7n}&
zMn0ZQ)d-2mKVWl9!$Y>_5{+h|H=Mr@=c~HP7(*vsxIm%r5x>HWJKtttVv=gSnZx7^
zj`*|K%v8_(Gq-YnF+#t{J<`tXO~4uE##z#t^PxPreEITXA4EwBlVP29)CX?jGo~G{
zNL<U(Cc8Ih67H&|s(Kdu2TejsO^siLZj7nLE7*(-4Q;->3%iVS39M~sNNL#ImKpnr
ziubyR%~%ACQMW58Ez7~0USKaY-W{2@H5avj(H$z+EmZHrjN8no+-0KU^OO;>vaGCR
z|FfR#UyM&j5ircuvg76dEyTK>`cn=bGdH;fcdY`OGM=RV?{Ts;N%i}j-(W9mGqFrf
zgdV960O^{W0)C~U@QSacv~)Yp9LX$f_hupP{WbaWe`Y}C611MTh&y>sd4W8ak+$d$
zJJh$5EeOIE{M*)oOaGbEmjBI3EF|xrrSBz$y0c~+{~hO+<!urAo?Cs4hT7US;5;Z7
zu47scn%|+)G`}I%S776$!YZpjj!Cf!sO~s+?5^i(M3}>YK|!!=U1wEG@ID~2n3$SA
z`>GK8RD##5y`L1yGTqpjw`6v1TRM%VyA>-5>vG!4G{3u_1A>C|MUy^93cJoPJGLeM
z-;yj${<oxgd&u(a>gsA)p56CvpGgLI)@*Ekhc9Vo?nH4r8*_U`wJQ%jAaM@wZ2=pf
zIoau83u0ih(}w9$(D*ItN=!JrE#J;g<+|bgB;J>Y2@Ver+s}KDtY2?#dweJk2P4rJ
z)~-H9N?y7!hlFhG++6XCY6tqIOD@9zNE9}G!IAP~GV|8%hZUKq-Jdrko6R$;oJj04
zE5w}<n=S4Mt|#VS-`!2#X%bRD1^yO3JmnklayNnY^+c2Ob6QEP4gB&qszyahiWTaU
z^y*Avz<RLqH~Drtwzgdk-8nNqHAekNVD!W5FFc%NFd$!e_-|Dx9q5gHUpzOQbM?w(
zS<UmQx-?nNX!4Q=$b@&@ZcCY2w}h@9G8Or~HD!Dq26qc@>E6#ggiA>bYu^p5{?vsc
z3|i(l!ihSH1Sc%gQBPmvei>>rk;f~7`<|)A-$h8`d|X_N%$5^5{y(=J`~iz}GyOa9
z^^mi(DBbi{j{COxz2Q*t{{p8f@_%kS#4)6|atS*JN17VuP-}(@-Bj%73U{f7!UmV*
z{>@`GSJsc9-oL*rxZ{f{2}f(!tYOm8(ZMqZ%7VEes@XJ4jZF3G&BdL&zo|W#g)iVG
z^{R^Bf1;NYJlDI46s2~Zcmer+<jgmLhZNed0nEU^coy>GqaKP;7q`w&fv|S-iFA^<
zhK8W1$(7*G@u^Df;NG)man=;qvCp^jVWq>!x=ccRxJQ#1%mL!KcW%4m1=O<Ey|ifm
zG!Fxu0#BUCL@rAL&2OsUcK^DM|H3K0KYvG(a`Wm#K2y7k{i3;aa5lG{R^>be0<q|G
zm!A8Q>#%Cn0zSh!AI|zZ%FGz2#o3iO8^=TtC#%8U4#&uN5f@vS*UPSS@HC?g%p1U{
z!#`w#REpGK8aB5=Ks6o|M$L7&(>m;lg2_KnvkNuH-r->}L~oRIcjdGu|M{uU@5%(-
zhoauRrLPoFrK;?d0>Ek+8BA7gM=qzJLhh3pA3uL{jtPjD(xE4e!*Sz)yXP-nJmO2f
zw&~YU^CEyeOc>Gu_G9lKU4PRED7IjRwG~bvtK*%R=SdQ~6tcVrUM^d{9QZH#MU4vT
zZ)s_11FNyg_s^o{P}SUQiZeoybUQ%C-FaxZV#Nx^@$X&UI{!gs3%j2jmttA5Vtn>b
zP^|pZcu&0lzS_?^StN01fD~7T1X_P*eA0OYXY&F{-1WB4YOWb8KUkE8?VVo61rVET
zb-Nl_Fz}mwt<FOM>7o1$svL+*`mZx}SXKXiDF9j)o5#^$s^lk^!$|7B-YM$3VBEAX
z@Zsxg3}Zt>O>gh}6(%H_NTM7%)P5%&ua>kci-AgD9-3p{@8Q~<xr(%?c0Vd=uJRrd
zoh5+<w#PfBwwwt&4%(SnV>u?Tth9Z5f2?BHd4T&s#n(Ly^%D~klC~w(yQ0YIWU^6C
z<j3vCmc0V^=ZVwyp0PPoW0TW5HiT=(UU8|5%E`sG_pW)*4&~=OOm;=M&R(ZZoeG%!
zGl)ex)%mBm<~3f`h(|Rz<*yzNBt|}D$`?SJuI$51uH5f@so$N0^ERDDBv<(*Kcalk
zb;W$B^F}}mM}$m5;bLEXO(9diV!`|J)>o-gKW%!kdN0tx%T}yNY-sAtHP4ADyLQnu
zY-?m}to-K}c+X0C5HfE&I`o`}>e=@l{Y4!d9OUJPv(1V}+Kp4+rLx-t(U@9vjNTmY
z@S58F*k>tND_ND(I6Xm>00CtaF%u{W&LJ4BpHb2-S1CuaGE*3*@)AWLj*>s0(n*5W
zrp=?)j$&)2iN=iMd={G%G)O<*^ZBzlvK5defYxs}#vlGg9r0BWIDj=-x7{>dG*7#o
z+X+W(`R!HoY_gtu7ANF3$R*8H+1c2d*UirUF3%*@CZtfCH}5bsjCmo@xY2<QDGL8~
z|BHPjXBTKifi4D`1@OJw{l7c~1~;4t5P34aVt(_K;ft4&iV~(dE^^5&@Aucv2uL@~
z)%al4;JFA-qUXGR<EBkZ{{H^1IP8FDqNAeL@bkOhihvOi718zPBS?SO^7F@LWKa^-
zZ|LQpE+cB0<{0FMM3#p{CZS=QE(DlX`L^yqYUGEh-6eso8&fSYf?w+qxr^J6-vw_0
zRa-(ziW46AGgHkeW$X5t5F5$d%HA7o9=eHvckpq)_M&DA?<9U<ylO35f_^|i0Cm6=
z6{)aTP@5MA81>$R-w*=Q`VYYyErD<(0w_Y?c|D<HQW)yKLu)|t9gd5DE%HuOu8=zT
zjK+rb|3zWT$e(}o!o|aRek%O);ba5Ip{pSi+z)ID3=^$U39WT}vp_1cV>Z^U<Ngx3
zEZH|zIIdXk?fw#1PJB~Fl0Sp;{M%x`+tydB+#C)-2f4{0<>E*$V$(SwioVQv^$XyQ
z@Zq&<*PiAz9%}a?`aB{;Q@#q*a(jAu$%;KN9t?H(@L}tZpXpBgBYAleT|FRY_1hQ@
zIz*5H5(~nmt=@ZFCiadA3kxTtr@Q{6+$?~gz+gQW@3u%uOgsa%S+r_u$K2QVkGvK^
z8Yla^mC$ZB5RZL+lP^U#mBfctU>&yp*w6Xrb{)1BYF78i99)4dAi>XqJJoegGJtrE
zQ-XSsF<4Mb&B@7e7;ec<2@r>KTu6!~sB~FgnPr|0Sc)|kS6^wgpG%<#3;$_A7+g47
zvr6i7`<*R#7hEdmi91tl(XoEo+RWc;k^I5sGF}=)soxJ6vxi{l4T#F-pR5Kc5{yZY
z^T<sz;g+d|E*x?^vA+6`p`4@bAAObKKu=3M+RXJ4Cu~g$At<QpfkDLHY1+0FPHy>&
zvI%F1=@krsV774gxs?eGn~UHyg-}BH_;{;&`|t1FH6?*RC1xIIYHqv<3ezgAJ~r^@
zr^t|%)*sb=!i@~_KL$Rkgnlhu(c@fnbTr<NYR@VZUDuolO<**<cu|4E<i;y-brN4%
zO*F!<UcCxJw(G=qHI)2lYUOWpnxRvrL4Z0>SFczvcjUZfnBfX0s2I)}r7J`#&|(XX
zbE?3}W?jKt>+0UT;ll9u-o+nPlL3{9<h_}>d8CA{<h2k4=Y{3)Ys}CWzby%romVTw
zK%aVsX!4wE<K&sZ57HI?Y@pnip8H!qw*u8Okjw-~qEM3Bz;x{-WA<xN_crGSK2oHR
zNx-TPAwITnYp2UPuSRSXny2qqO?%PX-~{F$GJ}<my%4<$-h1n&O<JbqtXeUC$Bs$f
zFifM&*8y(Ym8*loUkE;Lm_5@dO=bzv7IRm#OSdx-0pC1tKne>L_4TU=^`Q#Qn0bu<
zP?JzFRKqRY@uqcDjj7FhO-&OZhG64{VyVw=Zi)+(7lm&B06s-4*kUA~UACR+d{WZ0
z6SnKvtkZD8g*I-~RH@nsJ4;APLa}DCR;)bJ^vw6Ln&d5evrxg+Wvz-}tpTr|Eo;~}
zcs1<#Qo-O2|7tbB7;b%A=a6gPg;7j?DQL`_WjP!lBcR5E6avg{LLcH4M1k>*8gry}
zM!S*$N&|Jv?LZsZ=7#q5m*kZ^drta3Hy88HJEhU3a5W`GgltGy@5o3rO4PT@lZJ#r
zNk+|0-m|Y!5f)wqHN`_xMVisOV^c^}2TzGEyxQ@3ykPu4W?G-&u!;#2s)n?K)S#E0
zM19!*dsi%~2`Eg}!EWxkcPapCi3JfSMf8O54Wx)^2^n|gUb~QR2sTjPF|@Mc#JKs7
z8ZA;an=vY|dJSj=GOC5a?KTR8%KR$6=TR0r-W|e)-=+fi^wsb%A>LFQB&=my4#<X!
zEgv-TMT~B57QreAiSPqNygd8)2*AenuS$*F6Hh|r`<&OKL<mpfk}qRrExPq;-@a<<
zqNgB&iNuT;lVyP1YaB@`N_&dk!RyMWe?<G9+lgFpK@U0b_B;DTv4f7SZh<!)AaLg5
zB2@Ej9@n1u#;WYBEK*PE*tk#NGbp9orJ)gRv3^)35&U6t`bdvE*zrsJY(LslVfEMa
z;B8)4CMEwb>zx{}Y$XHBV&DZmf^(Bg*REX)j=x?U>s6nfbhtgsWulqIPKvLH{%-y^
z<8eWuQiai1yVMllySD}&q=K-=<}_L!{OUSVv`_yV&@M~_hUbNL@1asR)9u-B1F}By
z9$>-2%r7NbeDB>Dq9g*~ZxM6)3AtLwv-Ashg7Ov|g!YaW8=H&*<bCl%*Ei1-gmp&y
zqNPwEHA3|VLPW6SYppceAwF_=9<$TlJ_FYy!4iTmHsU`J*iihe2eu(f!`qMaBGmIj
z^A>Cn6<rFEzv=XhZX_+M(7ls$?oVSF5mpVe7rdygCECJ-#6;AZWfY{_p9%{4hk-|S
z|Kx#u=0-cJ{a?Dv1?M&Q(!6xz2!z!SBDOiRvgzEeOm7RES!V~sW_55ObiK6W1!6(V
zu7!l=g0b{%aLJHDl_Ah8r}MZnA*4%|P5&?;=dN`VicM&h??Fzfq@<)fc(DxzPK3$B
zD+}&DW=M*Q?}EPlLSiDcO*BnQC`C_9e5pWH_8OptPu*v<2>{F7yVYsSQ~BvR&t$)C
zHW3QlFDRJ*g50t9>rq(YN68|~yiRiac3$#ZLb00HJr}_l<896bsSUyuaU)&bW&e{C
zMz2?JTR$&5KV+q_9qtOSSb}<Q2bNcB4+nP|+Bp`IJcw~JQ0qp_*HWqa;zkZ{>eukw
zhwkaV+K;ocv-L#RBqT$frj2vsl-y5a;Skpyq&|Z^OA|D^GWy;hvc^h?qaZ}}8fHHO
ze79TW6fKXij-Gwbmd}e!sfJ+Zkr%j6tU4Ta_@@K>aCiaHRU*_wQl=@w0hJq^J)!L}
zC7*$p9FPpZx^Z`p6{ls4JX2Oqj<B3uQtHM{l=Pl2Ut%C)-XJ2vj0zr<E{SM&0Wpqe
z405PRF7R&9uboBjgRq8%ok}?E=6fE+V=>T436QF|G2<rWgTGM6LH7srWJ;Fst%OIt
z^_TTB&8-F&Po|w-=Fr|+GWMJo%2=B3xn*s5%I*ClwgRX63$W{!^xL<$K-h2w3Yqls
zvg3MA4VNPk_w<};rUP&dC<otjs^@`;WXSk^ea8VMTLp-Ax7qvGH(A5=d}^R?p$q93
zl2maUd<Y@3am|x&+E+)>qM|A>d-ti?*6c_$2S8n98TQwq4Pg-Z^EI$7O1?wqabubt
zY=g(N0ALRR0yVj`{m~hRq`4XOiFwf{&3rIyLD-KW*|+Th&Fqx>Y6!2in3!kKgZ%4`
zkY2ug`A|mz<U|Gsc-rFSnchD+&WbVyDNKWr;&APJxD`>DG&QvCmwB)eohQh2t5JN+
zHfKNMFk^=lQ43zeYphR;$iTRvIw7Jlcmyq?=JU}!@W^w4ROzp^p>s3GhuO7ysdFy?
z)0^(>Q$(K-WI+k~L=(X!W&5mqc0!RPErYaTIGNLD&R8DzlL_(6o9lzNZy5_q<@m@O
z+=$w9@@Ognw_JV0D1FZpfA?WNFNE>_tEJgJ)YJ{Y@?fR<yT8$DKZ4}gc4ETqvU&&)
zK1*ycJ*(p^Z*Fdmxko$9u;Zngo}Sx0rgv(JtmEN{f<EdH4%E}vHwlj-Xi-p4NtHZs
z!PrzT&QI*Zg$qrPsR<lfmtactNK$2!3+Irf^!E1)(=*pY6}=0kR4?=(4YODGQ&WYY
zx<(Z08QHAqxD5hWqL+uxOY3`AsbyepQ_f@muRP#sYOlAitFd9ldv+m>nw0dSv_uya
z$bw7{hX#LMw~bmtb|O0pH(Q7@*d&Daq{E#Y#0e<SPF<}M$;fGe)?V6vF?@_P){C|f
zJyEd+l;WF#sLRsoc0iT6zdV#5#oWH+2HMbaC~$GYn&^sw%s9)3T})b<4O!L4S5X5{
zd*X14nhIU_+8SJ@F){7jxf8~=rmw%hcW_XYo=L5V7aZjEhb&Yw0(;b#ood_np_pbN
zfm{gE)G8Dun{v%Xp+wvsFuDQ97`WV27-H4o=6a0)4L6G4aNBJz<I74!=|*%%gPU!k
zcC-x~;OI)K(&cj%2E4omvm&?~7M_*>o)IEwz@W33;xzyjs9J?oRCo}1KDkR8opf-|
zf=nZZN1g==24c1A3W|z!;Bw&@BLMz031y~dg)qZSnju(NSRf2OUF<PtPeJtY`Bb-4
zU!MitK`RK)vymdR3oT_N>W~cgrggy$-#E(`jg2(`0H?_H&UwooSGXK9iRG}mD!hXT
z8_<0q(}YTY{PJ}o8zdxR-h7jcKuw$Yn0dJmLs@mzF?*tMJ$P^fdH^VB^9Uk=<3B3o
z%fP_UXbtR1tpX;Cf#!a7VVY-NeNRia!Lnt`dYl=N?0GN=(*A-5xiwr|5m3X7z56hb
zbpAY%=!3O`PR_|IuYRMN8b6SHHF9?Z^r3Rp%bUu>!bm}N5{aZV<SVM6ZJ=CshaMC6
zs;}C(F2=!K8^jwZg({>O_@2cbY&3C0;G0O~ID76~WkZ}thjcrVDCvVwnL_1WEu6Hw
zoyNhz(OdevtBPoX;FF(LS8J(6>T;lU<P^LN60L<eg470v7`Q+Zk$|Qt^b8(8*A*SW
z`Q(VmJp!47mNA7~m$q9&Fb`aK6gLkFsHImxk3jgZ%iE6|t7utH+TC9Q?apd!|4zgs
zAV;+LIIhFj!igXWB3UiipmLMb1D`=qOPU*GWzAKz{3h)R!w)+-5yjd?^$-<6ruySo
z*Cy|VS7=7P97U?7Aa0sm{!H-tK;m#w-j$Q2)<EaOe3pIG6)06#qT410%!obQ+UV#g
z`t!`>?pQ@*mx-4k%6^|lwVLuF8(k!S|Ls!9xye&w(}XBTxK`4KFgrVobw-($hlVU(
zy0jm6XBRI1p2yyYhc~t<gTq7UJwvh+_O^cN3Ijd8ouCBo1^@BJT6723MCR^)ECV30
zhL0}>`!hK?sVkamgN*>u^(y|b*kW{cczb(qb9=iDdPr81-IGizkyh6LsS}n6TiO8&
z1W6uF;<$4zqRek%>~3%Gp$lgAtizo(xD;qusX=ob19jo9*H_%4;EzC;n5#BG(_50B
zybu?0B|sxCPLwYTX-+u=qilk+sk^Maj>wU_2lTCKs;U;@>~#<?i6ot9$B#5;EFsRU
zbx2G=J(w0Y-7k0%$r)(HY@eHp`CONXOGrF}`h<pA*#kn(>%A#Kr=h6>bhT1_8DDl6
zeGT2Y?pk=^wt&%t8#iv$&DkTS)Xw7n<*hVPmLpe1Kj9;^BN}3jd$7~5@9g7(5QLm|
zbouLiJ3+tCuX{J|dkjJ8^jD9t-K0;BC3)wf9isd@5A!N{Zm`OuE+8#M>}Jd9#x>Fp
zO@aCYAe5d5?Yn~dsQ+zTVunX0{ZCu`(6I%W(@#qG#zKomKNwhjM8#p~UEvnEovKzV
zO~>=dWr#~5pGCZ58LNG#4+`#3$Nj@4Ld)2ak0N$JTElnOu3VD7Yv38<p*{E+V$e_k
z{{M|wB(DYI-!wd_Q!3wo)N{)XP@a&c$U$J?+MbutAVgV0@C9klbnkrVb<>?GKF?iu
z&z?0<5WH{|Uzht9DdaXNP>6U<CESpv)2`qM4?FtvXBFDX0voL<$zm{g{0xs@bN%5?
z)%y=kA*X)^g<jKRA7=!5nF4q#qW4Bi7B)b(H=!_AUtgaP-2{AeMW@tiBdNItf#bjR
zJ|C;KS%P>x+OYlmL9~EEFh^!8eAwB!zdv5%x#-p4(?o{Ccb_S)FzWT)1H8mBYigcF
z2uN;)$Q4x0N?@GbD&Z0|hdaASXAXR0V51vli#JXlDl#@S@18dnS`b`s6Hej_#KjKC
zl^*$jMSmt+avuf(N3n(grqzW}n9l%YTO@k}v%n9b8!qNAJ4EqHFee1eBMzaFaoc~p
z6ru9(M}0m#A|k?fb%M)bN5_K|r<cG*?(+9XKOpYjC4qjZU(w)W|KsBePamJe1|hRp
zoVupAHjy-z+!jznXYr;VqoYqz(vUt>xj6KFbZyMH?(%pj04Wf|BkZARFuadyo{Q!H
zBCCtxRa}jFD{+p(NPfWlQ12aFaICv*D}6Uh4MU{#^)1U4qy-VodSKAy+GXf(phCF`
z;=t?YCnN0VT0U198ZMA_9A6~n)|cjd1v`JAr+jv5ONxZ`X{dq9M2wjGspgL%E+b7i
zq*HXB@I!0r6o^B{k!A`J=Py~Zq(#{=TdCcV9qLWEZU?M0U?6#KmJf}+e<Z*BIjU2h
zxCukP(+(*yRSc2DqtJ(S1rGA#Zd6rN>{N-U?fdcbC+Y4bjiB?5!j8K!pf^ItGbmG~
zVV3h^&4}7BB+h|$MT#xFb*qs|gxi{$OLdTkQXrv*#!eeJYQF5H=_rGl5dl83`*1+h
z%$qlLRU+NilXhT42qage9k^#?WD9+_#WD0j5Xud*CeM-ft>`XA<<~k1AcH7?@p?2r
z#^<{yTGqaLRR!;U53G0Dp%_iiJUv5Xjzo%##blx#4QFDa1eXnBm$8lY^c)k@qDAEI
z0zi;IuXKyBK<{u=)4fBxNjDDKsZSCLZFTNjaQdX}%B`z}8<W8>OiJxpJB%*L?L<2m
z^UC!np<aUJvFrzQM!ACUVH)0Aq@BIG<%k?<8YB-vYBd^r)X@w>pfzjv{{4J7k(xKx
z^_sDtU=&w@RgMI~ErhHo-^={*Wfeab^oD@G-2x=5)Z{3S=aNa}gwx^%A|%}*Jw%PK
z$&!?o7U@y;hZ(`A5<NC>Ije>@W_b5f6Wh=NwtL48rd_*sq4}pW^H}nBYys&+2j=KS
z%hqPntVWUHsk!9Va5cX8iSO`fyhBekf%`*Q2rucdX_oDfi<9q=gAG9po&gs}nnuXA
zM7Q`JmFO7H;g(H&YC#VsUm^Jac_-VU8YiC{my;uk8@yMw3jj$qKkLRGDD%+~=s30w
z6~C3JCbw8?a^gnJxBLUyH2;4s{}BFMn{W9afFS)*@E;lDtLm|+^!4J_kgh^+AD`@2
z+B1~+^r0I*OVnckjc|xtW{ZKkT8=980uPYCMSw3Jm_|P$mr|XkNd-eh=44Ke^H@O9
z|NTJ&AZn7>|76!fc^N<k`s@nSM$Uq!<cgOyIlPYhoP&|$LS$m3x63r&Rt;SRTw#H~
z8e!?F#&Xew$VC>Do12TTip^fQbScU%^v@Cmi<U@D1$Yq01;~2m{|W;--$4IoV1rT8
z=E08>&x+L4)Syw_*pdc<ocsw0Sj8hSm66?LK7*?vaz2Ny0t!S%S&6#t_=^fGgj0uL
z5b3u7GM}?h8~`y!m5077;^*gIFzq!rfZn3M{HqgRA>R5pFdzi7@A$X(NHbZ_h7D?3
ntR)J9gvzl3B41(o9i}&NMJI?|a~6L)gGo=zSo7|#gQx!=1V%$3
literal 0
HcmV?d00001
diff --git a/src/img/termos/handshake.svg b/src/img/termos/handshake.svg
index 7bde658e..4ace30bf 100644
--- a/src/img/termos/handshake.svg
+++ b/src/img/termos/handshake.svg
@@ -6,9 +6,9 @@
<path d="M117.537 114.957C117.537 114.957 156.706 141.311 156.616 149.654C156.515 159.107 146.919 163.575 139.855 158.654C132.79 153.732 106.434 132.572 106.434 132.572" stroke="white" stroke-width="2" stroke-miterlimit="10"/>
<path d="M185.722 2.01043L162.527 16.4248L210.805 94.4066L233.999 79.9922L185.722 2.01043Z" stroke="white" stroke-width="2" stroke-miterlimit="10"/>
<path d="M2.0007 79.9816L25.1953 94.396L73.4726 16.4142L50.278 1.99984L2.0007 79.9816Z" stroke="white" stroke-width="2" stroke-miterlimit="10"/>
-<path d="M57.1547 103.426L57.1506 103.423C51.5036 98.8576 43.232 99.7433 38.6754 105.401L30.5923 115.438C26.0358 121.095 26.9198 129.383 32.5668 133.948L32.5709 133.951C38.2179 138.517 46.4895 137.631 51.0461 131.973L59.1291 121.937C63.6857 116.279 62.8017 107.991 57.1547 103.426Z" fill="#1AB9DE" stroke="white" stroke-width="2" stroke-miterlimit="10"/>
-<path d="M76.2726 136.557C80.1935 131.688 79.4338 124.557 74.5757 120.63C69.7176 116.702 62.6008 117.465 58.6798 122.334L50.8611 132.042C46.9401 136.911 47.6999 144.041 52.558 147.969C57.4161 151.896 64.5329 151.134 68.4538 146.265L76.2726 136.557Z" fill="#1AB9DE" stroke="white" stroke-width="2" stroke-miterlimit="10"/>
-<path d="M94.3195 153.237C98.2404 148.369 97.4807 141.238 92.6226 137.311C87.7645 133.383 80.6476 134.146 76.7267 139.014L68.9079 148.723C64.987 153.591 65.7468 160.722 70.6049 164.65C75.463 168.577 82.5798 167.814 86.5007 162.946L94.3195 153.237Z" fill="#1AB9DE" stroke="white" stroke-width="2" stroke-miterlimit="10"/>
-<path d="M110.877 163.334C114.192 159.218 113.549 153.189 109.44 149.868C105.332 146.547 99.3147 147.191 95.9999 151.307L89.3855 159.52C86.0707 163.636 86.7138 169.665 90.8219 172.986C94.9301 176.308 100.948 175.663 104.262 171.547L110.877 163.334Z" fill="#1AB9DE" stroke="white" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M57.1547 103.426L57.1506 103.423C51.5036 98.8576 43.232 99.7433 38.6754 105.401L30.5923 115.438C26.0358 121.095 26.9198 129.383 32.5668 133.948L32.5709 133.951C38.2179 138.517 46.4895 137.631 51.0461 131.973L59.1291 121.937C63.6857 116.279 62.8017 107.991 57.1547 103.426Z" fill="none" stroke="white" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M76.2726 136.557C80.1935 131.688 79.4338 124.557 74.5757 120.63C69.7176 116.702 62.6008 117.465 58.6798 122.334L50.8611 132.042C46.9401 136.911 47.6999 144.041 52.558 147.969C57.4161 151.896 64.5329 151.134 68.4538 146.265L76.2726 136.557Z" fill="none" stroke="white" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M94.3195 153.237C98.2404 148.369 97.4807 141.238 92.6226 137.311C87.7645 133.383 80.6476 134.146 76.7267 139.014L68.9079 148.723C64.987 153.591 65.7468 160.722 70.6049 164.65C75.463 168.577 82.5798 167.814 86.5007 162.946L94.3195 153.237Z" fill="none" stroke="white" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M110.877 163.334C114.192 159.218 113.549 153.189 109.44 149.868C105.332 146.547 99.3147 147.191 95.9999 151.307L89.3855 159.52C86.0707 163.636 86.7138 169.665 90.8219 172.986C94.9301 176.308 100.948 175.663 104.262 171.547L110.877 163.334Z" fill="none" stroke="white" stroke-width="2" stroke-miterlimit="10"/>
<path d="M71.6484 24.2119L81.606 28.3382" stroke="white" stroke-width="2" stroke-miterlimit="10"/>
</svg>
--
GitLab