From a89bce55d92dff902bd6ed2e8be5f39e2bc9b8d1 Mon Sep 17 00:00:00 2001
From: Guilherme Eduardo <gegs23@inf.ufpr.br>
Date: Mon, 17 Mar 2025 09:57:41 -0300
Subject: [PATCH] Issue #271: UPDATE high contrast mode and name colors
---
src/app/acessibilidade/page.js | 24 +--
src/app/ajuda/page.js | 26 ++--
.../[id]/components/collectionItems.js | 4 +-
.../components/publisherInfoCollection.js | 28 ++--
src/app/colecao/[id]/page.js | 8 +-
src/app/components/About.js | 86 ++++++-----
src/app/components/AboutCarousel.js | 6 +-
src/app/components/AcessibilityBar.js | 6 +-
src/app/components/ActorsCarousel.js | 10 +-
src/app/components/ButtonsPages.js | 2 +-
src/app/components/Cards.js | 38 ++---
src/app/components/Content.js | 2 +-
src/app/components/ContinueNavigation.js | 2 +-
src/app/components/DownloadButton.js | 4 +-
src/app/components/ErrorComponent.js | 2 +-
src/app/components/FieldLabel.js | 4 +-
src/app/components/FiltersModal.js | 10 +-
src/app/components/FormFilters.js | 18 +--
src/app/components/FunctionalitiesCarousel.js | 8 +-
src/app/components/GroupButtonsFilters.js | 10 +-
src/app/components/GroupCardsCollections.js | 8 +-
src/app/components/Header.js | 20 ++-
src/app/components/ImageCropper.js | 4 +-
src/app/components/InfiniteScroll.js | 2 +-
src/app/components/InfiniteScrollCards.js | 12 +-
src/app/components/ItemNotification.js | 30 ++--
src/app/components/Loading.js | 2 +-
src/app/components/MenuProfile.js | 38 ++---
src/app/components/ModalNotifications.js | 17 ++-
src/app/components/NavigationBar.js | 2 +-
src/app/components/Overlay.js | 2 +-
src/app/components/RecommendedCards.js | 36 ++---
src/app/components/SearchComponent.js | 14 +-
src/app/components/ShareButton.js | 2 +-
src/app/components/ShareModal.js | 10 +-
src/app/components/SideBar.js | 10 +-
src/app/components/Title.js | 4 +-
src/app/components/UsersPageCard.js | 36 ++---
src/app/components/needLoginModal.js | 10 +-
src/app/components/publisherInfo.js | 31 ++--
src/app/contato/page.js | 22 +--
src/app/editar/[id]/components/EditForm.js | 2 +-
src/app/editar/[id]/components/UpdateInfo.js | 56 +++----
.../editar/[id]/components/UpdatePassword.js | 26 ++--
src/app/editar/[id]/page.js | 2 +-
src/app/entrar/components/LoginForm.js | 12 +-
src/app/entrar/components/LoginInfo.js | 6 +-
src/app/entrar/components/PasswordModal.js | 6 +-
src/app/entrar/components/SignupModal.js | 12 +-
src/app/equipe/components/personalCard.js | 18 +--
src/app/equipe/components/teamCard.js | 2 +-
src/app/equipe/components/teamFilters.js | 2 +-
src/app/globals.css | 85 +++++------
src/app/not-found.js | 6 +-
src/app/novaSenha/page.js | 8 +-
src/app/perfil/[id]/components/AboutCard.js | 4 +-
.../perfil/[id]/components/CardsComplaints.js | 10 +-
.../[id]/components/CardsHomologation.js | 12 +-
.../[id]/components/CreateCollectionModal.js | 18 +--
.../[id]/components/EditCollectionModal.js | 18 +--
.../perfil/[id]/components/FollowersCards.js | 2 +-
.../perfil/[id]/components/FollowingCards.js | 2 +-
src/app/perfil/[id]/components/GroupButton.js | 12 +-
.../[id]/components/MedalAchievements.js | 2 +-
src/app/perfil/[id]/components/NotFound.js | 2 +-
.../[id]/components/ProfileAchievements.js | 8 +-
.../components/ProfileAchievementsMenu.js | 6 +-
.../[id]/components/ProfileCollections.js | 30 ++--
.../[id]/components/ProfileComplaints.js | 4 +-
.../[id]/components/ProfileHomologation.js | 4 +-
.../perfil/[id]/components/ProfileItens.js | 58 ++++----
.../[id]/components/ProfileResources.js | 6 +-
.../[id]/components/ReportProfileModal.js | 12 +-
.../[id]/components/SelectionButtons.js | 8 +-
src/app/perfil/[id]/components/Stats.js | 4 +-
src/app/perfil/[id]/components/UserCard.js | 36 ++---
src/app/publicar/components/AdvanceNotice.js | 8 +-
.../publicar/components/AuthorSelection.js | 10 +-
.../publicar/components/CancelSubmitModal.js | 16 +-
src/app/publicar/components/CustomCheckbox.js | 4 +-
.../publicar/components/CustomTextField.js | 20 +--
src/app/publicar/components/ErrorSize.js | 6 +-
src/app/publicar/components/ErrorType.js | 14 +-
src/app/publicar/components/FieldLabel.js | 6 +-
src/app/publicar/components/Form.js | 2 +-
src/app/publicar/components/InfoForm.js | 20 +--
src/app/publicar/components/LicenseModals.js | 25 ++--
.../publicar/components/LicenseSelection.js | 10 +-
.../components/ModalIncompleteField.js | 10 +-
src/app/publicar/components/ModalSuccess.js | 14 +-
src/app/publicar/components/RevisionForm.js | 28 ++--
src/app/publicar/components/SelectOption.js | 12 +-
src/app/publicar/components/Stepper.js | 18 +--
.../publicar/components/SubjectSelection.js | 2 +-
src/app/publicar/components/SubmitLink.js | 20 +--
.../publicar/components/SubmitThumbnail.js | 6 +-
src/app/publicar/components/TagsInput.js | 4 +-
src/app/publicar/components/UploadFile.js | 22 +--
src/app/publicar/components/UploadForm.js | 22 +--
.../recurso/[id]/components/actionButtons.js | 8 +-
.../recurso/[id]/components/collectModal.js | 32 ++--
.../recurso/[id]/components/collectionInfo.js | 6 +-
src/app/recurso/[id]/components/comments.js | 16 +-
.../[id]/components/complaintsModal.js | 26 ++--
.../recurso/[id]/components/createComments.js | 32 ++--
.../[id]/components/deleteCommentModal.js | 10 +-
.../recurso/[id]/components/deleteModal.js | 10 +-
.../recurso/[id]/components/description.js | 4 +-
.../recurso/[id]/components/editComments.js | 10 +-
.../[id]/components/homologationModal.js | 32 ++--
src/app/recurso/[id]/components/metrics.js | 10 +-
.../recurso/[id]/components/printComments.js | 28 ++--
.../[id]/components/relatedResources.js | 2 +-
.../recurso/[id]/components/reportModal.js | 20 +--
.../recurso/[id]/components/resourceInfo.js | 35 +++--
.../[id]/components/resourcePreview.js | 4 +-
.../recurso/[id]/components/specifications.js | 18 +--
src/app/recurso/[id]/page.js | 12 +-
src/app/submit/components/InfoForm.js | 10 +-
src/app/themes/theme_high_contrast.css | 139 +++++++++---------
src/app/topicosAjuda/page.js | 22 +--
tailwind.config.js | 105 +++++++------
122 files changed, 1007 insertions(+), 994 deletions(-)
diff --git a/src/app/acessibilidade/page.js b/src/app/acessibilidade/page.js
index ad4a62ac..91bf4f1b 100644
--- a/src/app/acessibilidade/page.js
+++ b/src/app/acessibilidade/page.js
@@ -4,22 +4,22 @@ export default function Help() {
return (
<Overlay type="twoColumns">
<div className="flex w-full justify-center">
- <div className="max-w-screen-md bg-white rounded p-12">
- <div className="text-2xl mb-8 text-text-filter font-bold">Acessibilidade</div>
- <div className="text-md mb-8 text-text-filter">
+ <div className="max-w-screen-md bg-white-HC-dark rounded p-12">
+ <div className="text-2xl mb-8 text-darkGray-HC-white font-bold">Acessibilidade</div>
+ <div className="text-md mb-8 text-darkGray-HC-white">
O MECRED acredita na importância de uma educação de qualidade e acessível para todos. Por isso, adota os princípios do design universal para assegurar que sua plataforma seja inclusiva e de fácil navegação. Nesta página, você encontrará instruções detalhadas sobre como navegar pelo site sem o uso do mouse. Ao final da página, há um botão que direciona para a tela de contato, onde você pode relatar eventuais problemas diretamente à nossa equipe.
</div>
- <div className="border-2 bg-main rounded mb-3 p-4">
- <div className="text-xl mb-2 text-text-filter font-bold">Atalhos</div>
- <div className="text-md text-text-filter"><div className="font-bold font-mono inline mx-2">{"<TAB>"}</div>Navegação pela página.</div>
- <div className="text-md text-text-filter"><div className="font-bold font-mono inline mx-2">{"<Ctrl> + <+>"}</div>Aumentar o tamanho da fonte.</div>
- <div className="text-md text-text-filter"><div className="font-bold font-mono inline mx-2">{"<Ctrl> + <->"}</div>Diminuir o tamanho da fonte.</div>
- <div className="text-md text-text-filter"><div className="font-bold font-mono inline mx-2">{"<Ctrl> + <0>"}</div>Restaurar o tamanho da fonte para o tamanho original.</div>
+ <div className="border-2 bg-ice-HC-dark rounded mb-3 p-4">
+ <div className="text-xl mb-2 text-darkGray-HC-white font-bold">Atalhos</div>
+ <div className="text-md text-darkGray-HC-white"><div className="font-bold font-mono inline mx-2">{"<TAB>"}</div>Navegação pela página.</div>
+ <div className="text-md text-darkGray-HC-white"><div className="font-bold font-mono inline mx-2">{"<Ctrl> + <+>"}</div>Aumentar o tamanho da fonte.</div>
+ <div className="text-md text-darkGray-HC-white"><div className="font-bold font-mono inline mx-2">{"<Ctrl> + <->"}</div>Diminuir o tamanho da fonte.</div>
+ <div className="text-md text-darkGray-HC-white"><div className="font-bold font-mono inline mx-2">{"<Ctrl> + <0>"}</div>Restaurar o tamanho da fonte para o tamanho original.</div>
</div>
<div className="flex justify-center flex-col items-center">
- <div className="text-main-text mt-4 text-xl font-bold">Quer saber mais?</div>
- <div className="text-main-text text-md mt-1 ml-3">Acesse a página de Ajuda e Suporte!</div>
- <a href="/ajuda" className="mt-4 bg-secondary text-md text-white p-1 px-6 rounded-lg hover:bg-secondary-hover">Ir para a página de Ajuda</a>
+ <div className="text-darkGray-HC-white-underline mt-4 text-xl font-bold">Quer saber mais?</div>
+ <div className="text-darkGray-HC-white-underline text-md mt-1 ml-3">Acesse a página de Ajuda e Suporte!</div>
+ <a href="/ajuda" className="mt-4 bg-turquoise text-md text-white-HC-dark-underline p-1 px-6 rounded-lg hover:bg-turquoise-hover">Ir para a página de Ajuda</a>
</div>
</div>
</div>
diff --git a/src/app/ajuda/page.js b/src/app/ajuda/page.js
index 0a7be2c5..d3ade305 100644
--- a/src/app/ajuda/page.js
+++ b/src/app/ajuda/page.js
@@ -12,7 +12,7 @@ export default function Help() {
let info = [
{
- image: <ImArrowUp className="text-button-filters" size="50%" />,
+ image: <ImArrowUp className="text-ice-HC-dark " size="50%" />,
title: "Publicando Recursos",
questions: [
"Por que enviar um recurso?",
@@ -22,7 +22,7 @@ export default function Help() {
sectionPos: 0
},
{
- image: <BiSearchAlt className="text-button-filters" size="50%" />,
+ image: <BiSearchAlt className="text-ice-HC-dark " size="50%" />,
title: "Encontrando Recursos",
questions: [
"Como fazer uma busca?",
@@ -32,7 +32,7 @@ export default function Help() {
sectionPos: 1
},
{
- image: <BiSolidMessageAlt className="text-button-filters" size="50%" />,
+ image: <BiSolidMessageAlt className="text-ice-HC-dark " size="50%" />,
title: "Participando da Rede",
questions: [
"Como comentar ou avaliar um recurso?",
@@ -41,7 +41,7 @@ export default function Help() {
sectionPos: 2
},
{
- image: <HiPencilAlt className="text-button-filters" size="50%" />,
+ image: <HiPencilAlt className="text-ice-HC-dark " size="50%" />,
title: "Gerenciando a Conta",
questions: [
"Por que se cadastrar?",
@@ -58,17 +58,17 @@ export default function Help() {
<Overlay type="twoColumns">
<div className="overflow-y-auto scrollbar-none ml-6 max-md:mb-24 h-screen">
<div className="flex justify-center">
- <div className="text-main-text text-2xl font-bold">Ajuda e Suporte</div>
+ <div className="text-darkGray-HC-white-underline text-2xl font-bold">Ajuda e Suporte</div>
</div>
<div className="flex justify-center mt-4">
- <p className="text-main-text text-lg max-sm:text-center">Entre em contato para enviar dúvidas, sugestões ou críticas.</p>
+ <p className="text-darkGray-HC-white-underline text-lg max-sm:text-center">Entre em contato para enviar dúvidas, sugestões ou críticas.</p>
</div>
<div className="flex justify-center mt-8">
<div className=" max-xl:overflow-x-auto max-xl:ml-10 flex gap-10 max-sm:gap-4">
{info?.map((item, index) => (
<Card
key={index}
- className="text-text-filter bg-white outline outline-1 outline-outlineColor w-[280px] h-[460px] min-w-[250px] max-2xl:w-[240px] max-sm:h-[410px] p-6"
+ className="text-darkGray-HC-white bg-white-HC-dark outline outline-1 outline-ice-HC-white w-[280px] h-[460px] min-w-[250px] max-2xl:w-[240px] max-sm:h-[410px] p-6"
sx={{
display: "flex",
flexDirection: "column",
@@ -79,11 +79,11 @@ export default function Help() {
>
<div>
<div className="flex justify-center">
- <div className="rounded-full bg-text-filter w-20 h-20 flex justify-center items-center">
+ <div className="rounded-full bg-darkGray-HC-white w-20 h-20 flex justify-center items-center">
{item.image}
</div>
</div>
- <div className="text-text-filter mt-5 text-2xl font-bold flex text-center">
+ <div className="text-darkGray-HC-white mt-5 text-2xl font-bold flex text-center">
{item.title}
</div>
</div>
@@ -93,7 +93,7 @@ export default function Help() {
onClick={() =>
router.push(`/topicosAjuda?section=${item.sectionPos}&pos=${idx}`)
}
- className="flex text-start text-sm mt-4 ml-3 hover:text-secondary underline"
+ className="flex text-start text-sm mt-4 ml-3 hover:turquoise-HC-underline underline"
>
{question}
</button>
@@ -103,9 +103,9 @@ export default function Help() {
</div>
</div>
<div className="flex flex-col items-center rounded-xl px-10 max-sm:px-0 max-sm:py-6 mx-20 max-sm:mx-4 max-md:pb-28">
- <div className="text-main-text mt-5 max-sm:mt-0 text-xl font-bold text-center">Não encontrou o que precisa?</div>
- <div className="text-main-text text-md mt-4 ml-3 text-center">Entre em contato com nossa equipe</div>
- <button onClick={() => router.push("/contato")} className="mt-4 bg-secondary text-lg text-white p-2 px-4 rounded-lg hover:bg-secondary-hover">Página de contato</button>
+ <div className="text-darkGray-HC-white-underline mt-5 max-sm:mt-0 text-xl font-bold text-center">Não encontrou o que precisa?</div>
+ <div className="text-darkGray-HC-white-underline text-md mt-4 ml-3 text-center">Entre em contato com nossa equipe</div>
+ <button onClick={() => router.push("/contato")} className="mt-4 bg-turquoise text-lg text-white-HC-dark-underline p-2 px-4 rounded-lg hover:bg-turquoise-hover">Página de contato</button>
</div>
</div>
diff --git a/src/app/colecao/[id]/components/collectionItems.js b/src/app/colecao/[id]/components/collectionItems.js
index 567a5024..9cdadf17 100644
--- a/src/app/colecao/[id]/components/collectionItems.js
+++ b/src/app/colecao/[id]/components/collectionItems.js
@@ -5,8 +5,8 @@ export default function CollectionItems({ collection }) {
const isSm = useMediaQuery((theme) => theme.breakpoints.down('sm'));
return (
- <div className="flex flex-col bg-white p-4 rounded-lg">
- <div className="text-main-text font-bold text-xl mb-3">Recursos na coleção</div>
+ <div className="flex flex-col bg-white-HC-dark p-4 rounded-lg">
+ <div className="text-darkGray-HC-white-underline font-bold text-xl mb-3">Recursos na coleção</div>
<div className="flex flex-col gap-3">
{collection.collection_items.sort((a,b) => a.position - b.position).map((item, index) => {
return (
diff --git a/src/app/colecao/[id]/components/publisherInfoCollection.js b/src/app/colecao/[id]/components/publisherInfoCollection.js
index c7ebc7f1..e26bb80d 100644
--- a/src/app/colecao/[id]/components/publisherInfoCollection.js
+++ b/src/app/colecao/[id]/components/publisherInfoCollection.js
@@ -40,19 +40,19 @@ export default function PublisherInfoCollection({ publisher, disabledButton = fa
function getRandomBg(id) {
const colors = [
- "bg-secondary",
+ "bg-turquoise",
"bg-orange",
- "bg-secondary-hover",
- "bg-orange-hover",
+ "bg-turquoise-hover",
+ "bg-darkOrange-HC-gray ",
"bg-violet",
"bg-pink",
"bg-red",
- "bg-text-color",
- "bg-text-color-click",
- "bg-button-filters",
- "bg-text-filter",
- "bg-other-links",
- "bg-blue-button",
+ "bg-darkGray-HC-white",
+ "bg-darkGray-HC-white-click",
+ "bg-ice-HC-dark ",
+ "bg-darkGray-HC-white",
+ "bg-darkGray-HC-white",
+ "bg-turquoise-HC-dark",
]
return colors[id % colors.length];
@@ -60,7 +60,7 @@ export default function PublisherInfoCollection({ publisher, disabledButton = fa
return (
<>
- <div className="bg-white outline outline-1 outline-outlineColor shadow-none flex flex-col flex-shrink rounded-xl p-0 my-1 normal-case text-sm font-bold">
+ <div className="bg-white-HC-dark outline outline-1 outline-ice-HC-white shadow-none flex flex-col flex-shrink rounded-xl p-0 my-1 normal-case text-sm font-bold">
<Button href={`/perfil/${publisher.id}`} >
<div className="flex flex-row truncate">
{publisher?.avatar ? (
@@ -72,9 +72,9 @@ export default function PublisherInfoCollection({ publisher, disabledButton = fa
className="m-2"
/>
) : (
- <div className={`flex items-center justify-center text-xl m-2 font-bold text-main rounded-full h-10 w-10 ${getRandomBg(publisher.id)}`} >{publisher.name[0]}</div>
+ <div className={`flex items-center justify-center text-xl m-2 font-bold text-ice-HC-dark rounded-full h-10 w-10 ${getRandomBg(publisher.id)}`} >{publisher.name[0]}</div>
)}
- <div className="flex flex-col justify-center p-1 text-main-text truncate">
+ <div className="flex flex-col justify-center p-1 text-darkGray-HC-white-underline truncate">
<div className="font-bold text-md truncate">
{publisher.name}
</div>
@@ -88,14 +88,14 @@ export default function PublisherInfoCollection({ publisher, disabledButton = fa
<Button
disabled={disabledButton}
href={`/perfil/${publisher.id}`}
- className="outline outline-1 flex-grow outline-outlineColor hover:bg-gray-color bg-white h-12 text-text-color border border-solid border-main shadow-none rounded-xl p-3 m-1 mr-3 px-8 normal-case font-bold"
+ className="outline outline-1 flex-grow outline-ice-HC-white hover:bg-lightGray-HC-white bg-white-HC-dark h-12 text-darkGray-HC-white border border-solid border-main shadow-none rounded-xl p-3 m-1 mr-3 px-8 normal-case font-bold"
>
Ver Perfil
</Button>
<Button
disabled={disabledButton}
onClick={followHandler}
- className="bg-secondary h-12 flex-grow text-white hover:bg-secondary-hover shadow-none rounded-xl m-1 px-2 sm:px-8 normal-case font-bold"
+ className="bg-turquoise h-12 flex-grow text-white-HC-dark-underline hover:bg-turquoise-hover shadow-none rounded-xl m-1 px-2 sm:px-8 normal-case font-bold"
>
{followed ? "Seguindo" : "Seguir"}
</Button>
diff --git a/src/app/colecao/[id]/page.js b/src/app/colecao/[id]/page.js
index b31d7bf8..4ef56f1b 100644
--- a/src/app/colecao/[id]/page.js
+++ b/src/app/colecao/[id]/page.js
@@ -75,18 +75,18 @@ export default function Colecao({ params }) {
<>
<NeedLoginModal open={needLoginOpen} setOpen={setNeedLoginOpen} />
<div className="mb-5 overflow-y-auto scrollbar-none">
- <div className="bg-main p-3 w-full">
+ <div className="bg-ice-HC-dark p-3 w-full">
<div className=" flex justify-center">
{/* Pré-visualização */}
<CollectionPreview collection={collection} />
</div>
<div>
<div>
- <div className="text-main-text mt-5 text-2xl font-bold">
+ <div className="text-darkGray-HC-white mt-5 text-2xl font-bold">
{/* Título */}
<h1>{collection.name}</h1>
</div>
- <div className="text-main-text text-sm font-bold">
+ <div className="text-darkGray-HC-white text-sm font-bold">
{/* tags */}
<Tags tags={collection.tags} />
</div>
@@ -102,7 +102,7 @@ export default function Colecao({ params }) {
</div>
</div>
</div>
- <div className="px-[25px] bg-main">
+ <div className="px-[25px] bg-ice-HC-dark">
<div> {/* recommendations */} </div>
<CollectionItems collection={collection} />
</div>
diff --git a/src/app/components/About.js b/src/app/components/About.js
index a650e3cb..cd8d63e9 100644
--- a/src/app/components/About.js
+++ b/src/app/components/About.js
@@ -34,8 +34,8 @@ export default function AboutComponent() {
className={`h-24 w-24 my-5 mx-10 pt-5 flex justify-center rounded-full ${color["bg"]}`}
>
<Image
- className={`rounded-lg w-14 h-14 bg-${color}`}
- style={{ filter: "invert(100%)" }}
+ className={`rounded-lg w-14 h-14 invertIcon-HC-black`}
+ style={{ }}
alt={name}
src={icon}
width={10}
@@ -56,19 +56,19 @@ export default function AboutComponent() {
<StatisticInfo
name={<p>Recursos <br /> Disponíveis</p>}
data={statistics["count"]}
- color={{ text: "text-orange", bg: "bg-orange" }}
+ color={{ text: "text-orange-HC-white", bg: "bg-orange-HC-white" }}
icon="/redigitais.svg"
/>
<StatisticInfo
name={<p>Recursos <br /> Visualizados <br /> por mês</p>}
data={statistics["month_downloads"]}
- color={{ text: "text-violet", bg: "bg-violet" }}
+ color={{ text: "text-violet-HC-white", bg: "bg-violet-HC-white" }}
icon="/download.svg"
/>
<StatisticInfo
name={<p>Usuários <br /> Cadastrados </p>}
data="31207"
- color={{ text: "text-pink", bg: "bg-pink" }}
+ color={{ text: "text-pink-HC-white", bg: "bg-pink-HC-white" }}
icon="/seguir.svg"
/>
</div>
@@ -77,7 +77,7 @@ export default function AboutComponent() {
const ActorInfo = ({ name, description, nameImage }) => {
return (
- <div className={`flex flex-col justify-start w-[500px] items-center rounded-md`}>
+ <div className={`flex flex-col justify-start w-full items-center rounded-md`}>
<Image
className="rounded-lg"
alt={name}
@@ -85,7 +85,7 @@ export default function AboutComponent() {
width={500}
height={10}
/>
- <span className="text-light text-main-text mt-4 text-base text-left">
+ <span className="text-light text-darkGray-HC-white mt-4 text-base text-left">
{description}
</span>
</div>
@@ -95,10 +95,10 @@ export default function AboutComponent() {
const Actors = () => {
return (
<>
- <h1 className="text-2xl text-main-text font-bold mb-3 mt-10">
+ <h1 className="text-2xl text-darkGray-HC-white font-bold mb-3 mt-10">
A quem se destina?
</h1>
- <h1 className="flex text-xl text-balance text-main-text xl:w-[80%] mb-10">
+ <h1 className="flex text-xl text-balance text-darkGray-HC-white xl:w-[80%] mb-10">
A plataforma é aberta e destina-se a todos e todas que se interessam
pela relação entre a escola e a Cultura Digital:
</h1>
@@ -136,9 +136,7 @@ export default function AboutComponent() {
className={`flex h-24 w-24 my-2 mx-10 rounded-full items-center justify-center ${color}`}
>
<Image
- className={` rounded-lg w-12 h-12 bg-${color} ${title === "Publicar o seu Recurso" && `rotate-180`
- }`}
- style={{ filter: "invert(100%)" }}
+ className={` invertIcon-HC-black rounded-lg w-12 h-12 bg-${color} ${title === "Publicar o seu Recurso" && `rotate-180` }`}
alt={title}
src={icon}
width={10}
@@ -147,10 +145,10 @@ export default function AboutComponent() {
</div>
</div>
<div className="flex flex-col">
- <h1 className="pb-1 max-xl:mb-3 text-start max-xl:text-center text-lg font-bold text-main-text">
+ <h1 className="pb-1 max-xl:mb-3 text-start max-xl:text-center text-lg font-bold text-darkGray-HC-white">
{title}
</h1>
- <span className=" text-main-text text-base text-left max-xl:text-center w-full">
+ <span className=" text-darkGray-HC-white text-base text-left max-xl:text-center w-full">
{description}
</span>
</div>
@@ -161,44 +159,44 @@ export default function AboutComponent() {
const Functionalities = () => {
return (
<>
- <h1 className="text-2xl text-main-text font-bold mb-3 mt-5">
+ <h1 className="text-2xl text-darkGray-HC-white font-bold mb-3 mt-5">
O que você pode fazer aqui?
</h1>
<div className="grid grid-cols-2 my-5 ml-6 mr-10 gap-x-4">
<FunctionalityInfo
title="Buscar e Baixar Recursos"
- color="bg-secondary"
+ color="bg-turquoise-HC-white"
description="São mais de 20 mil recursos educacionais à sua disposição, provenientes de portais parceiros do MEC e de professores que, como você, atuam na Educação Básica!"
icon="/pesquisa.svg"
/>
<FunctionalityInfo
title="Colecionar Recursos"
- color="bg-pink"
+ color="bg-pink-HC-white"
description="Guarde e organize em coleções os recursos que você considera interessantes para elaborar a sua aula. Aproveite para indicá-los aos colegas pelas redes sociais ou e-mail."
icon="/colecionar.svg"
/>
<FunctionalityInfo
title="Encontrar Materiais de Formação"
- color="bg-orange"
+ color="bg-orange-HC-white"
description="A plataforma disponibiliza um conjunto de materiais de formação recomendados pelo Ministério da Educação com diversidade de temas e recursos educacionais."
icon="/verificado.svg"
/>
<FunctionalityInfo
title="Compartilhar suas Experiências"
- color="bg-secondary"
+ color="bg-turquoise-HC-white"
description="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."
icon="/compartilhar.svg"
/>
<FunctionalityInfo
title="Publicar o seu Recurso"
- color="bg-violet"
+ color="bg-violet-HC-white"
description="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!"
icon="/download.svg"
/>
<FunctionalityInfo
title="Faça novos Amigos"
- color="bg-orange"
+ color="bg-orange-HC-white"
description="Você vai descobrir pessoas interessadas nos mesmos assuntos que você. Aproveite para explorar a rede de usuários da MEC RED para fazer novos amigos e enriquecer suas relações."
icon="/seguir.svg"
/>
@@ -210,10 +208,10 @@ export default function AboutComponent() {
const DifferencesInfo = ({ title, description }) => {
return (
<div>
- <h1 className="text-base text-gray-500 text-start font-semibold mb-3 mt-5 max-sm:hidden">
+ <h1 className="text-base text-darkGray-HC-white text-start font-semibold mb-3 mt-5 max-sm:hidden ">
{title}
</h1>
- <h1 className="text-base text-start text-main-text mb-5 max-sm:hidden">
+ <h1 className="text-base text-start text-darkGray-HC-white mb-5 max-sm:hidden">
{description}
</h1>
{/*Mobile: */}
@@ -226,7 +224,7 @@ export default function AboutComponent() {
>
{title}
</AccordionSummary>
- <AccordionDetails className="text-main-text text-left">
+ <AccordionDetails className="text-darkGray-HC-white-underline text-left">
{description}
</AccordionDetails>
</Accordion>
@@ -237,7 +235,7 @@ export default function AboutComponent() {
const Differences = () => {
return (
<>
- <h1 className="text-xl tracking-tight text-gray-500 font-bold mb-2 mt-10 max-sm:py-2">
+ <h1 className="text-xl tracking-tight text-darkGray-HC-white font-bold mb-2 mt-10 max-sm:py-2">
O que nos faz diferentes?
</h1>
<div>
@@ -274,13 +272,13 @@ export default function AboutComponent() {
const DevelopmentInfo = ({ title, description, link, access }) => {
return (
<div className="flex flex-col">
- <h1 className="pb-1 max-xl:mb-3 text-start text-lg font-bold text-main-text">
+ <h1 className="pb-1 max-xl:mb-3 text-start text-lg font-bold text-darkGray-HC-white">
{title}
</h1>
- <span className=" text-main-text text-base text-left w-full">
+ <span className=" text-darkGray-HC-white text-base text-left w-full">
{description}
</span>
- <a href={link} className="text-secondary text-base text-left w-full mt-4">{access}</a>
+ <a href={link} className="text-turquoise-HC-white-underline text-base text-left w-full mt-4">{access}</a>
</div>
)
}
@@ -288,10 +286,10 @@ export default function AboutComponent() {
const Development = () => {
return (
<>
- <h1 className="text-xl tracking-tight text-gray-500 font-bold mb-6 mt-10 max-sm:py-2 max-md:px-4">
+ <h1 className="text-xl tracking-tight text-darkGray-HC-white font-bold mb-6 mt-10 max-sm:py-2 max-md:px-4">
Desenvolvimento da Plataforma
</h1>
- <h1 className="flex text-xl text-balance text-main-text xl:w-[80%] mb-10 max-md:px-4">
+ <h1 className="flex text-xl text-balance text-darkGray-HC-white xl:w-[80%] mb-10 max-md:px-4">
A MEC RED é construída de forma colaborativa por uma comunidade, seguindo os princípios do software livre, com atualizações frequentes e licenciada sob GNU AGP.
</h1>
<div className="grid grid-cols-2 mx-24 gap-x-16 gap-y-8 mb-16 mt-4 max-md:grid-cols-1 max-md:ml-10 max-md:mr-4 max-md:mt-0">
@@ -336,45 +334,45 @@ export default function AboutComponent() {
<div className="flex max-lg:col-span-3 col-span-2">
<div className="flex flex-col px-3 w-full">
<Carousel />
- <div className="flex flex-col text-center items-center rounded-lg bg-white">
+ <div className="flex flex-col text-center items-center rounded-lg bg-white-HC-dark outline outline-1 outline-ice-HC-white ">
<div>
<Title />
</div>
<Statistics />
</div>
- <div className="flex flex-col text-center items-center mt-12 rounded-lg bg-white max-sm:hidden">
+ <div className="flex flex-col text-center items-center mt-12 rounded-lg bg-white-HC-dark max-sm:hidden outline outline-1 outline-ice-HC-white">
<Actors />
</div>
- <div className="flex flex-col w-full text-center items-center mt-12 rounded-lg bg-white sm:hidden">
+ <div className="flex flex-col w-full text-center items-center mt-12 rounded-lg bg-white-HC-dark sm:hidden">
<ActorsCarousel />
</div>
- <div className="flex flex-col text-center items-center mt-12 rounded-lg bg-white max-sm:hidden">
+ <div className="flex flex-col text-center items-center mt-12 rounded-lg bg-white-HC-dark max-sm:hidden outline outline-1 outline-ice-HC-white">
<Functionalities />
</div>
- <div className="flex flex-col z-0 text-center items-center mt-12 rounded-lg bg-white sm:hidden">
+ <div className="flex flex-col z-0 text-center items-center mt-12 rounded-lg bg-white-HC-dark sm:hidden">
<FunctionalitiesCarousel />
</div>
- <div className="flex flex-col text-center items-center mt-12 rounded-lg bg-white">
+ <div className="flex flex-col text-center items-center mt-12 rounded-lg bg-white-HC-dark outline outline-1 outline-ice-HC-white">
<Differences />
</div>
- <div className="flex flex-col text-center items-center mt-12 pb-[40px] rounded-lg bg-white">
+ <div className="flex flex-col text-center items-center mt-12 rounded-lg bg-white-HC-dark outline outline-1 outline-ice-HC-white">
<Development />
</div>
<div className="flex justify-center flex-col items-center mt-8 max-md:mt-0 max-md:mb-8">
- <div className="text-main-text mt-5 text-2xl font-bold">Quer saber mais?</div>
- <div className="text-main-text text-lg mt-4 ml-3">Acesse a página de Ajuda e Suporte!</div>
- <a href="/ajuda" className="mt-4 bg-secondary text-lg text-white p-2 px-4 rounded-lg hover:bg-secondary-hover">Ir para a página de Ajuda</a>
+ <div className="text-darkGray-HC-white mt-5 text-2xl font-bold">Quer saber mais?</div>
+ <div className="text-darkGray-HC-white text-lg mt-4 ml-3">Acesse a página de Ajuda e Suporte!</div>
+ <a href="/ajuda" className="mt-4 bg-turquoise-HC-white text-lg text-white-HC-dark-underline p-2 px-4 rounded-lg hover:bg-darkTurquoise-HC-dark hover:text-white outline outline-1">Ir para a página de Ajuda</a>
</div>
- <h6 className="text-center pt-5 text-gray-700 pb-[100px]">
+ <h6 className="text-center pt-5 text-darkGray-HC-white pb-[100px]">
Versão {packageInfo.version}
</h6>
</div>
</div>
</div>
<div className="max-xl:hidden col-span-1 my-3 ">
- <div className="flex flex-col items-center gap-6 bg-white text-text-filter rounded-xl px-10 py-7 mx-20 ">
+ <div className="flex flex-col items-center gap-6 bg-white-HC-dark text-darkGray-HC-white rounded-xl px-10 py-7 mx-20 outline outline-1 outline-ice-HC-white">
<p className="font-bold text-3xl w-full text-center">Tudo certo?</p>
- <p className="text-base text-text-filter tracking-tight text-justify">
+ <p className="text-base text-darkGray-HC-white tracking-tight text-justify">
Ao terminar de ler sobre a Plataforma MEC RED você pode clicar no
botão abaixo para continuar navegando e explorar as ferramentas
disponíveis.
@@ -382,7 +380,7 @@ export default function AboutComponent() {
<Button
href="/busca?page=LearningObject"
- className="bg-secondary mt-2 text-xl text-white py-4 w-full text-center rounded-lg hover:secondary-hover font-bold normal-case"
+ className="bg-turquoise-HC-white mt-2 text-xl text-white-HC-dark-underline py-4 w-full text-center rounded-lg hover:bg-darkTurquoise-HC-dark hover:text-white font-bold normal-case outline outline-1 outline-white"
>
Continuar
</Button>
diff --git a/src/app/components/AboutCarousel.js b/src/app/components/AboutCarousel.js
index ad4e251a..67ca958f 100644
--- a/src/app/components/AboutCarousel.js
+++ b/src/app/components/AboutCarousel.js
@@ -54,7 +54,7 @@ export const Carousel = () => {
(prevIndex - 1 + carouselItems.length) % carouselItems.length
)
}
- className="absolute left-0 top-[50%] -translate-y-[50%] text-white" style={{ filter: "drop-shadow(0 4px 10px rgba(0, 0, 0, 1))" }}
+ className="absolute left-0 top-[50%] -translate-y-[50%] text-white-HC-dark-underline" style={{ filter: "drop-shadow(0 4px 10px rgba(0, 0, 0, 1))" }}
>
<KeyboardArrowLeftIcon className="text-7xl max-sm:text-5xl "/>
</button>
@@ -64,7 +64,7 @@ export const Carousel = () => {
(prevIndex) => (prevIndex + 1) % carouselItems.length
)
}
- className="absolute right-0 top-[50%] -translate-y-[50%] text-white" style={{ filter: "drop-shadow(0 4px 10px rgba(0, 0, 0, 1))" }}
+ className="absolute right-0 top-[50%] -translate-y-[50%] text-white-HC-dark-underline" style={{ filter: "drop-shadow(0 4px 10px rgba(0, 0, 0, 1))" }}
>
<KeyboardArrowRightIcon className="text-7xl max-sm:text-5xl" />
</button>
@@ -74,7 +74,7 @@ export const Carousel = () => {
{carouselItems.map((_, index) => (
<button
key={index}
- className={`rounded-full mx-1 w-[15px] h-[15px] ${index === currentIndex ? "bg-text-filter" : "bg-main-hover"
+ className={`rounded-full mx-1 w-[15px] h-[15px] ${index === currentIndex ? "bg-darkGray-HC-white" : "bg-ice-HC-dark-hover"
} `}
onClick={() => setCurrentIndex(index)}
/>
diff --git a/src/app/components/AcessibilityBar.js b/src/app/components/AcessibilityBar.js
index dc2a9b2b..f16f511b 100644
--- a/src/app/components/AcessibilityBar.js
+++ b/src/app/components/AcessibilityBar.js
@@ -139,7 +139,7 @@ export default function AcessibilityBar() {
return (
<>
<div className="block xl:hidden">
- <div className="fixed top-0 flex justify-between w-screen bg-white z-20 text-[12px] py-1 px-3 text-text-filter whitespace-nowrap border-b border-outlineColor">
+ <div className="fixed top-0 flex justify-between w-screen bg-white-HC-dark z-20 text-[12px] py-1 px-3 text-darkGray-HC-white whitespace-nowrap border-b border-ice-HC-white">
<div className="flex w-full leading-tight">
@@ -158,7 +158,7 @@ export default function AcessibilityBar() {
<div className="hidden xl:block">
{pathname !== "/entrar" ? (
<>
- <div className="fixed top-0 flex justify-between w-screen bg-white z-20 text-[12px] leading-[20px] py-1 px-6 text-text-color whitespace-nowrap border-b border-outlineColor">
+ <div className="fixed top-0 flex justify-between w-screen bg-white-HC-dark z-20 text-[12px] leading-[20px] py-1 px-6 text-darkGray-HC-white whitespace-nowrap border-b border-ice-HC-white">
<div className="flex justify-between w-full max-sm:hidden">
@@ -212,7 +212,7 @@ export default function AcessibilityBar() {
) :
(
<>
- <div className="fixed top-0 flex justify-between w-screen bg-white z-20 text-[14px] py-1 px-3 text-text-filter whitespace-nowrap border-b border-outlineColor">
+ <div className="fixed top-0 flex justify-between w-screen bg-white-HC-dark z-20 text-[14px] py-1 px-3 text-darkGray-HC-white whitespace-nowrap border-b border-ice-HC-white">
<div className="flex justify-between w-full leading-tight">
<h1 className="mt-1 text-start" id="MECRED">
diff --git a/src/app/components/ActorsCarousel.js b/src/app/components/ActorsCarousel.js
index 05d02661..8a426af6 100644
--- a/src/app/components/ActorsCarousel.js
+++ b/src/app/components/ActorsCarousel.js
@@ -27,7 +27,7 @@ export const ActorsCarousel = () => {
return (
<div className={`flex flex-col bg-transparent w-full my-3 items-center`}>
- <h1 className="text-xl text-main-text font-bold mb-3 mt-5">
+ <h1 className="text-xl text-darkGray-HC-white-underline font-bold mb-3 mt-5">
O que você pode fazer aqui?
</h1>
<div className="relative aspect-[3/2] flex items-center overflow-hidden rounded-xl object-contain">
@@ -45,7 +45,7 @@ export const ActorsCarousel = () => {
(prevIndex - 1 + carouselItems.length) % carouselItems.length
)
}
- className="absolute left-0 top-[50%] -translate-y-[50%] text-white" style={{ filter: "drop-shadow(0 4px 10px rgba(0, 0, 0, 1))" }}
+ className="absolute left-0 top-[50%] -translate-y-[50%] text-white-HC-dark-underline" style={{ filter: "drop-shadow(0 4px 10px rgba(0, 0, 0, 1))" }}
>
<KeyboardArrowLeftIcon className="text-7xl max-sm:text-5xl " />
</button>
@@ -55,7 +55,7 @@ export const ActorsCarousel = () => {
(prevIndex) => (prevIndex + 1) % carouselItems.length
)
}
- className="absolute right-0 top-[50%] -translate-y-[50%] text-white" style={{ filter: "drop-shadow(0 4px 10px rgba(0, 0, 0, 1))" }}
+ className="absolute right-0 top-[50%] -translate-y-[50%] text-white-HC-dark-underline" style={{ filter: "drop-shadow(0 4px 10px rgba(0, 0, 0, 1))" }}
>
<KeyboardArrowRightIcon className="text-7xl max-sm:text-5xl " />
</button>
@@ -64,13 +64,13 @@ export const ActorsCarousel = () => {
{carouselItems.map((_, index) => (
<button
key={index}
- className={`rounded-full w-[10px] h-[10px] ${index === currentIndex ? "bg-text-filter" : "bg-main-hover"
+ className={`rounded-full w-[10px] h-[10px] ${index === currentIndex ? "bg-darkGray-HC-white" : "bg-ice-HC-dark-hover"
} `}
onClick={() => setCurrentIndex(index)}
/>
))}
</div>
- <p className="text-light text-main-text mt-4 text-base text-center">
+ <p className="text-light text-darkGray-HC-white-underline mt-4 text-base text-center">
{carouselItems[currentIndex].description}
</p>
</div>
diff --git a/src/app/components/ButtonsPages.js b/src/app/components/ButtonsPages.js
index f719ffb4..68873491 100644
--- a/src/app/components/ButtonsPages.js
+++ b/src/app/components/ButtonsPages.js
@@ -39,7 +39,7 @@ export default function ButtonsPages({ searchPage, handlePageChange }) {
return (
<div key={index} onClick={() => { handlePageChange(item.title) }}
- className={` flex w-40 h-14 rounded-lg text-center items-center justify-center font-bold normal-case ${searchPage === item.title ? "bg-secondary text-white" : "bg-main"} text-text-filter`}
+ className={` flex w-40 h-14 rounded-lg text-center items-center justify-center font-bold normal-case ${searchPage === item.title ? "bg-turquoise text-white-HC-dark-underline" : "bg-ice-HC-dark"} text-darkGray-HC-white`}
> {tradutor(item.title)} </div>
)
})
diff --git a/src/app/components/Cards.js b/src/app/components/Cards.js
index c338206c..dc837999 100644
--- a/src/app/components/Cards.js
+++ b/src/app/components/Cards.js
@@ -90,19 +90,19 @@ export default function Cards(props) {
function getRandomBg(id) {
const colors = [
- "bg-secondary",
+ "bg-turquoise",
"bg-orange",
- "bg-secondary-hover",
- "bg-orange-hover",
+ "bg-turquoise-hover",
+ "bg-darkOrange-HC-gray ",
"bg-violet",
"bg-pink",
"bg-red",
- "bg-text-color",
- "bg-text-color-click",
- "bg-button-filters",
- "bg-text-filter",
- "bg-other-links",
- "bg-blue-button",
+ "bg-darkGray-HC-white",
+ "bg-darkGray-HC-white-click",
+ "bg-ice-HC-dark ",
+ "bg-darkGray-HC-white",
+ "bg-darkGray-HC-white",
+ "bg-turquoise-HC-dark",
]
return colors[id % colors.length];
@@ -110,7 +110,7 @@ export default function Cards(props) {
return (
<Card
- className={`active:bg-main active:rounded-3xl transition ease-in-out 2xl:w-[330px] xl:w-[290px] lg:w-[270px] max-lg:w-[290px] ${props.page !== "recurso" && "items-center"}`}
+ className={`active:bg-ice-HC-dark active:rounded-3xl transition ease-in-out 2xl:w-[330px] xl:w-[290px] lg:w-[270px] max-lg:w-[290px] ${props.page !== "recurso" && "items-center"}`}
tabIndex="-1"
sx={{
display: "flex",
@@ -126,7 +126,7 @@ export default function Cards(props) {
<CardMedia
id="conteudo"
tabIndex="0"
- className="hover:scale-[1.02] p-1 focus:border-secondary focus:border-4 border-gray-color transition-transform rounded-xl flex-shrink-0 aspect-video"
+ className="hover:scale-[1.02] p-1 focus:border-turquoise focus:border-4 border-gray-color transition-transform rounded-xl flex-shrink-0 aspect-video"
sx={{
width: 327,
height: 181,
@@ -145,14 +145,14 @@ export default function Cards(props) {
<>
<div className="flex flex-col ml-4 max-sm:ml-0 max-sm:justify-stretch">
- <div className="line-clamp-2 text-lg text-main-text font-bold text-text-filter min-h-4 max-sm:w-full"> {props["title"]} </div>
+ <div className="line-clamp-2 text-lg font-bold text-darkGray-HC-white-underline min-h-4 max-sm:w-full"> {props["title"]} </div>
<div className=" flex flex-row ">
<div className="flex flex-col ">
- <div className="line-clamp-1 text-text-color text-sm font-light" >
+ <div className="line-clamp-1 text-darkGray-HC-white text-sm font-light" >
{props["author"]}
</div>
- <div className="line-clamp-1 text-text-color text-sm font-light">
+ <div className="line-clamp-1 text-darkGray-HC-white text-sm font-light">
{timeFunction(props.updated_at)}
</div>
</div>
@@ -163,7 +163,7 @@ export default function Cards(props) {
:
<>
<div className="flex flex-row mt-4 mb-4 w-full justify-start ">
- {props?.noAvatar || !props["avatar"] ? <div className={`flex items-center shrink-0 justify-center text-xl font-bold ml-1 text-main rounded-full h-[33px] w-[33px] ${getRandomBg(props["id"])}`} >{props["author"][0]}</div>
+ {props?.noAvatar || !props["avatar"] ? <div className={`flex items-center shrink-0 justify-center text-xl font-bold ml-1 text-ice-HC-dark rounded-full h-[33px] w-[33px] ${getRandomBg(props["id"])}`} >{props["author"][0]}</div>
:
<img
src={mecredURL + props["avatar"]}
@@ -174,13 +174,13 @@ export default function Cards(props) {
}
<div className="mx-2">
- <div className="line-clamp-1 text-sm text-main-text font-bold text-text-filter mb- w-[100%] min-h-4"> {props["title"]} </div>
+ <div className="line-clamp-1 text-sm font-bold text-darkGray-HC-white-underline mb- w-[100%] min-h-4"> {props["title"]} </div>
<div className="flex flex-row">
<div>
- <div className="line-clamp-1 text-text-color text-sm font-light" >
+ <div className="line-clamp-1 text-darkGray-HC-white text-sm font-light" >
{props["author"]}
</div>
- <div className="line-clamp-1 text-text-color text-sm font-light">
+ <div className="line-clamp-1 text-darkGray-HC-white text-sm font-light">
{timeFunction(props.updated_at)}
</div>
</div>
@@ -192,7 +192,7 @@ export default function Cards(props) {
</>
}
{props?.homologa == "submitted" ?
- <div className="text-main text-xs p-1 bg-blue-publish rounded-full flex justify-start">Em homologação</div>
+ <div className="text-ice-HC-dark text-xs p-1 bg-turquoise-HC-dark rounded-full flex justify-start">Em homologação</div>
:
null
}
diff --git a/src/app/components/Content.js b/src/app/components/Content.js
index 2c47a3b9..51baea37 100644
--- a/src/app/components/Content.js
+++ b/src/app/components/Content.js
@@ -96,7 +96,7 @@ export default function Content({ name, inputFilter, searchPage }) {
(
<div>
<div className="pl-3 max-sm:pl-1 fixed w-full bg-fundo bg-repeat bg-fixed max-md:ml-3 z-30" >
- <h1 className="text-2xl ml-5 font-bold text-text-color">
+ <h1 className="text-2xl ml-5 font-bold text-darkGray-HC-white">
{tradutor(filterState.searchClass)} {(filterState.order === "title") ? "por Ordem alfabética" : " mais " + titlePage}
</h1>
<div className={`flex w-full justify-between`}>
diff --git a/src/app/components/ContinueNavigation.js b/src/app/components/ContinueNavigation.js
index 0906fc5e..f3b92f67 100644
--- a/src/app/components/ContinueNavigation.js
+++ b/src/app/components/ContinueNavigation.js
@@ -5,7 +5,7 @@ export const ContinueNavigation = () => {
<div className="sm:hidden fixed bottom-25 left-0 w-full bg-grey_button flex justify-center">
<Button
href="/busca?page=LearningObject"
- className="bg-secondary mt-2 text-xl text-white py-4 w-full text-center rounded-none hover:secondary-hover font-bold normal-case"
+ className="bg-turquoise mt-2 text-xl text-white-HC-dark-underline py-4 w-full text-center rounded-none hover:darkTurquoise-HC-gray font-bold normal-case"
>
Continuar navegando
</Button>
diff --git a/src/app/components/DownloadButton.js b/src/app/components/DownloadButton.js
index cbd44afc..c2f4403e 100644
--- a/src/app/components/DownloadButton.js
+++ b/src/app/components/DownloadButton.js
@@ -33,11 +33,11 @@ export default function DownloadButton({ id, objects }) {
return (
<button
id="Baixar"
- className="p-2 text-sm outline outline-2 outline-outlineColor hover:bg-main-hover bg-main rounded-xl max-md:my-3 text-text-filter font-bold normal-case flex items-center justify-center gap-2 md:px-3 md:py-2 md:w-32"
+ className="p-2 text-sm outline outline-1 outline-ice-HC-white hover:text-darkGray-HC-dark text-darkGray-HC-white-underline bg-ice-HC-dark hover:bg-lightGray-HC-white rounded-xl max-md:my-3 font-bold normal-case flex items-center justify-center gap-2 md:px-3 md:py-2 md:w-32"
onClick={handleDownloadCollection}
aria-label="Baixar" // Texto para leitores de tela
>
- <DownloadOutlinedIcon className="text-text-filter" /> {/* Ícone de download */}
+ <DownloadOutlinedIcon /> {/* Ícone de download */}
<span className="hidden md:inline">Baixar</span> {/* Texto visível apenas em telas maiores */}
</button>
);
diff --git a/src/app/components/ErrorComponent.js b/src/app/components/ErrorComponent.js
index 7991a855..b78cfd57 100644
--- a/src/app/components/ErrorComponent.js
+++ b/src/app/components/ErrorComponent.js
@@ -2,7 +2,7 @@ export default function ErrorComponent ({ name }) {
return (
<div className="flex flex-col text-center">
- <p className="text-text-filter mt-64 font-bold text-2xl">{name} não encontrado!</p>
+ <p className="text-darkGray-HC-white mt-64 font-bold text-2xl">{name} não encontrado!</p>
</div>
)
}
\ No newline at end of file
diff --git a/src/app/components/FieldLabel.js b/src/app/components/FieldLabel.js
index fcc74bb2..e6ec0ddc 100644
--- a/src/app/components/FieldLabel.js
+++ b/src/app/components/FieldLabel.js
@@ -1,8 +1,8 @@
export default function FieldLabel({ name, description }) {
return (
<div className="flex flex-col mt-10 mb-5">
- <label className="inline-block text-xl text-publish-text font-bold mb-3">{name}</label>
- <span className="text-base text-publish-text">{description}</span>
+ <label className="inline-block text-xl text-darkGray-HC-white font-bold mb-3">{name}</label>
+ <span className="text-base text-darkGray-HC-white">{description}</span>
</div>
);
}
diff --git a/src/app/components/FiltersModal.js b/src/app/components/FiltersModal.js
index 91fd7c06..6a6bbf24 100644
--- a/src/app/components/FiltersModal.js
+++ b/src/app/components/FiltersModal.js
@@ -42,11 +42,11 @@ export default function FiltersModal({
},
}}
>
- <div className='flex flex-col w-[60%] h-[80%] bg-white overflow-x-auto rounded-lg'>
+ <div className='flex flex-col w-[60%] h-[80%] bg-white-HC-dark overflow-x-auto rounded-lg'>
<div>
<div className='fixed z-20 w-[60%] '>
- <div className='flex justify-between bg-white rounded-lg p-4'>
- <p className=' text-2xl font-bold text-text-filter '>
+ <div className='flex justify-between bg-white-HC-dark rounded-lg p-4'>
+ <p className=' text-2xl font-bold text-darkGray-HC-white '>
Filtros de Pesquisa
</p>
<CloseIcon onClick={handleClose} sx={{ color: "#6c8080", fontSize: "35px" }} />
@@ -71,11 +71,11 @@ export default function FiltersModal({
<div className='justify-self-end'>
<div className='flex ml-2 mt-2'>
{activeFilters &&
- <Button onClick={() => { setActiveFilters(false) }} href="/busca?page=LearningObject" className={`normal-case font-semibold text-sm bg-text-filter rounded-lg min-w-32 mx-1 text-white hover:bg-slate-300`}>
+ <Button onClick={() => { setActiveFilters(false) }} href="/busca?page=LearningObject" className={`normal-case font-semibold text-sm bg-darkGray-HC-white rounded-lg min-w-32 mx-1 text-white-HC-dark-underline hover:bg-slate-300`}>
Limpar Filtros
</Button>
}
- <Button startIcon={<TuneIcon />} onClick={handleOpen} className='bg-text-filter font-semibold normal-case text-white rounded-lg px-3 mr-2'>Filtros</Button>
+ <Button startIcon={<TuneIcon />} onClick={handleOpen} className='bg-darkGray-HC-white hover:bg-mediumGray-HC-dark font-semibold normal-case text-white-HC-dark-underline hover:text-white rounded-lg px-3 mr-2 outline outline-1 outline-ice-HC-white'>Filtros</Button>
</div>
</div>
</div>
diff --git a/src/app/components/FormFilters.js b/src/app/components/FormFilters.js
index ea005e17..fb83d5f9 100644
--- a/src/app/components/FormFilters.js
+++ b/src/app/components/FormFilters.js
@@ -162,7 +162,7 @@ export default function FormFilters({
<ButtonsPages searchPage={filterStateDraft.searchClass} handlePageChange={handlePageChange} />
<Divider />
- <p className="font-bold text-text-filter text-xl py-2">
+ <p className="font-bold text-darkGray-HC-white text-xl py-2">
Tipo de recurso
</p>
<div className="flex flex-wrap justify-start ml-8">
@@ -171,15 +171,15 @@ export default function FormFilters({
<div
key={index}
onClick={() => handleObjectType(object)}
- className={`bg-main hover:bg-main-hover ${filterStateDraft.objectTypes.some(obj => obj.id === object.id) ? "border-2 border-secondary bg-main-hover" : "bg-main"} hover:cursor-pointer h-20 w-20 max-lg:h-20 max-lg:w-20 flex flex-col m-3 items-center p-2 text-center justify-center rounded-lg `}
+ className={`bg-ice-HC-dark hover:bg-ice-HC-dark-hover ${filterStateDraft.objectTypes.some(obj => obj.id === object.id) ? "border-2 border-secondary bg-ice-HC-dark-hover" : "bg-ice-HC-dark"} hover:cursor-pointer h-20 w-20 max-lg:h-20 max-lg:w-20 flex flex-col m-3 items-center p-2 text-center justify-center rounded-lg `}
>
<div
alt={object.name}
- className="w-12 h-12 max-lg:w-8 max-sm:hidden max-lg:h-8 fill-current text-secondary"
+ className="w-12 h-12 max-lg:w-8 max-sm:hidden max-lg:h-8 fill-current text-turquoise-HC-underline "
dangerouslySetInnerHTML={{ __html: object.image }}
></div>
{/* <Image alt={object.name} height={0} width={0} className="w-10 h-10 max-lg:w-8 max-lg:h-8" src={object.image} /> */}
- <span className="text-secondary text-xs max-lg:text-xs">{object.name}</span>
+ <span className="text-turquoise-HC-underline text-xs max-lg:text-xs">{object.name}</span>
</div>
)
})}
@@ -198,7 +198,7 @@ export default function FormFilters({
key={index}
control={<Checkbox checked={filterStateDraft.educationalStages.some(obj => sl.id === obj.id)} />}
value={JSON.stringify(sl)}
- label={<span className="text-main-text">{sl.name}</span>}
+ label={<span className="text-darkGray-HC-white-underline">{sl.name}</span>}
/>
))}
</FormGroup>
@@ -214,7 +214,7 @@ export default function FormFilters({
key={index}
control={<Checkbox checked={filterStateDraft.languages.some(l => l.name === language.name)} />}
value={JSON.stringify(language)}
- label={<span className="text-main-text">{language.name}</span>}
+ label={<span className="text-darkGray-HC-white-underline">{language.name}</span>}
/>
))}
</FormGroup>
@@ -231,7 +231,7 @@ export default function FormFilters({
key={index}
control={<Checkbox checked={filterStateDraft.subjects.some(s => s.name === subj.name)} />}
value={JSON.stringify(subj)}
- label={<span className="text-main-text">{subj.name}</span>}
+ label={<span className="text-darkGray-HC-white-underline">{subj.name}</span>}
/>
))}
</FormGroup>
@@ -239,8 +239,8 @@ export default function FormFilters({
<div className="relative ">
<div className="flex justify-end">
- <Button onClick={handleResetFilters} className="text-text-filter normal-case font-semibold text-base hover:bg-main cursor-pointer mx-2">Remover filtros</Button>
- <Button type="submit" className="bg-secondary text-white normal-case font-semibold text-base hover:bg-secondary-hover cursor-pointer">Mostrar resultados</Button>
+ <Button onClick={handleResetFilters} className="text-darkGray-HC-white normal-case font-semibold text-base hover:bg-ice-HC-dark cursor-pointer mx-2">Remover filtros</Button>
+ <Button type="submit" className="bg-turquoise text-white-HC-dark-underline normal-case font-semibold text-base hover:bg-turquoise-hover cursor-pointer">Mostrar resultados</Button>
</div>
</div>
</form>
diff --git a/src/app/components/FunctionalitiesCarousel.js b/src/app/components/FunctionalitiesCarousel.js
index 9b7ec88a..2661db69 100644
--- a/src/app/components/FunctionalitiesCarousel.js
+++ b/src/app/components/FunctionalitiesCarousel.js
@@ -83,13 +83,13 @@ export const FunctionalitiesCarousel = () => {
return (
<div className="flex flex-col justify-center items-center m-4" {...swipeHandlers}>
- <h1 className="text-xl text-main-text font-bold mb-3 mt-5">
+ <h1 className="text-xl text-darkGray-HC-white-underline font-bold mb-3 mt-5">
Como você pode participar?
</h1>
<div className="flex flex-col gap-16">
<div className="flex justify-center items-center flex-row gap-60 mt-16">
<button
- className="text-white bg-gray-color rounded-full"
+ className="text-white-HC-dark-underline bg-lightGray-HC-white rounded-full"
onClick={handleBack}
>
<KeyboardArrowLeftIcon className="text-2sm" />
@@ -116,13 +116,13 @@ export const FunctionalitiesCarousel = () => {
</motion.div>
))}
<button
- className="text-white bg-gray-color rounded-full"
+ className="text-white-HC-dark-underline bg-lightGray-HC-white rounded-full"
onClick={handleNext}
>
<KeyboardArrowRightIcon className="text-2sm" />
</button>
</div>
- <div className="flex items-center text-main-text text-light text-base">
+ <div className="flex items-center text-darkGray-HC-white-underline text-light text-base">
{images[actualDescription].description}
</div>
</div>
diff --git a/src/app/components/GroupButtonsFilters.js b/src/app/components/GroupButtonsFilters.js
index 08835976..eae98a11 100644
--- a/src/app/components/GroupButtonsFilters.js
+++ b/src/app/components/GroupButtonsFilters.js
@@ -129,7 +129,7 @@ export default function GroupButtonsFilters({ pageName, filterState, setFilterSt
return (
item ?
<div key={index}>
- <Button className={`normal-case ${filterState.order === item.order ? "bg-secondary text-white" : ""} mt-2 outline outline-1 outline-outlineColor text-base rounded-lg min-w-32 font-medium mx-1 text-main-text bg-button-filters `}
+ <Button className={`normal-case ${filterState.order === item.order ? "bg-turquoise-HC-white hover:bg-darkTurquoise-HC-dark text-white-HC-dark-underline hover:text-white " : "bg-ice-HC-dark hover:bg-lightGray-HC-white hover:text-darkGray-HC-dark"} mt-2 outline outline-1 outline-ice-HC-white text-base rounded-lg min-w-32 font-medium mx-1 text-darkGray-HC-white-underline bg-ice-HC-dark`}
onClick={() => {
setFilterState(old => { return { ...old, order: item.order, title: item.title } })
}}
@@ -153,16 +153,16 @@ export default function GroupButtonsFilters({ pageName, filterState, setFilterSt
<div>
<div className={`flex sm:mr-24 sm:flex-wrap ml-5 h-[40px] bg-fundo bg-repeat bg-fixed max-sm:overflow-x-scroll no-scrollbar `}>
{filterState.educationalStages.map((tag, index) => (
- <Chip className="mr-1 border-none bg-orange text-white" key={index} label={tag.name} variant="outlined" onDelete={() => handleDeletEducationalStages(tag)} />
+ <Chip className="mr-1 border-none bg-orange text-white-HC-dark-underline" key={index} label={tag.name} variant="outlined" onDelete={() => handleDeletEducationalStages(tag)} />
))}
{filterState.languages.map((tag, index) => (
- <Chip className="mr-1 border-none bg-orange text-white" key={index} label={tag.name} variant="outlined" onDelete={() => handleDeletLanguages(tag)} />
+ <Chip className="mr-1 border-none bg-orange text-white-HC-dark-underline" key={index} label={tag.name} variant="outlined" onDelete={() => handleDeletLanguages(tag)} />
))}
{filterState.objectTypes.map((tag, index) => (
- <Chip className="mr-1 border-none bg-orange text-white" key={index} label={tag.name} variant="outlined" onDelete={() => handleDeletObjectType(tag)} />
+ <Chip className="mr-1 border-none bg-orange text-white-HC-dark-underline" key={index} label={tag.name} variant="outlined" onDelete={() => handleDeletObjectType(tag)} />
))}
{filterState.subjects.map((tag, index) => (
- <Chip className="mr-1 border-none bg-orange text-white" key={index} label={tag.name} variant="outlined" onDelete={() => handleDeletSubjects(tag)} />
+ <Chip className="mr-1 border-none bg-orange text-white-HC-dark-underline" key={index} label={tag.name} variant="outlined" onDelete={() => handleDeletSubjects(tag)} />
))}
</div>
diff --git a/src/app/components/GroupCardsCollections.js b/src/app/components/GroupCardsCollections.js
index d469cb81..a76a6016 100644
--- a/src/app/components/GroupCardsCollections.js
+++ b/src/app/components/GroupCardsCollections.js
@@ -49,8 +49,8 @@ export default function GroupCardsCollections({ data, cardsPerRow, collectionId
})
:
<div className="flex flex-col justify-center w-full items-center">
- <p className="text-main-text text-xl font-bold">Coleção Vazia</p>
- <button onClick={() => router.push(`/busca?page=LearningObject`)} className="text-main-text text-sm font-bold">Adicione novos recursos!</button>
+ <p className="text-darkGray-HC-white-underline text-xl font-bold">Coleção Vazia</p>
+ <button onClick={() => router.push(`/busca?page=LearningObject`)} className="text-darkGray-HC-white-underline text-sm font-bold">Adicione novos recursos!</button>
</div>
}
</div>
@@ -63,10 +63,10 @@ export default function GroupCardsCollections({ data, cardsPerRow, collectionId
fullWidth
disableElevation
variant="outlined"
- className="group hover:bg-gray-color transition-all duration-300 -ml-4 py-2 border-hidden rounded-xl normal-case flex justify-center items-center gap-2"
+ className="group hover:bg-lightGray-HC-white text-darkGray-HC-white hover:text-darkGray-HC-dark transition-all duration-300 -ml-4 py-2 border-hidden rounded-xl normal-case flex justify-center items-center gap-2"
onClick={toggleContent}
>
- <p className="px-4 text-black-text text-lg rounded-md">
+ <p className="px-4 text-lg rounded-md">
{expanded ? "Ver menos" : "Ver mais"}
</p>
<span
diff --git a/src/app/components/Header.js b/src/app/components/Header.js
index 929b005f..167a90cb 100644
--- a/src/app/components/Header.js
+++ b/src/app/components/Header.js
@@ -47,11 +47,15 @@ function DefaultContent({
<div className="grid xl:grid-cols-[150px_auto_500px] md:grid-cols-[150px_auto_300px] grid-cols-[170px_auto] max-md:pl-8 w-full">
<Link href="/" className="flex justify-center items-center">
<div className="flex gap-2 justify-center items-center">
- <div
- className="w-[59px] h-[50px] bg-no-repeat bg-center bg-contain bg-logo-square"
+ {/* <div
+ className="w-[59px] h-[50px] bg-no-repeat bg-center bg-contain bg-logo-square"
aria-label="logo"
+ /> */}
+ <img
+ className="w-[59px] h-[50px] bg-no-repeat bg-center bg-contain bg-logo-square invertLogo-HC-white"
+ src={"/mecred_square.svg"}
/>
- <div className="md:hidden text-text-filter text-sm font-light w-full">
+ <div className="md:hidden text-darkGray-HC-white text-sm font-light w-full">
A Rede Social da Educação
</div>
</div>
@@ -66,7 +70,7 @@ function DefaultContent({
type="button"
alt="Abrir busca"
title="Abrir busca"
- className="md:hidden bg-secondary hover:bg-text-color w-10 h-10 rounded text-white shrink-0 transition"
+ className="md:hidden bg-turquoise hover:bg-darkGray-HC-white w-10 h-10 rounded text-white-HC-dark-underline shrink-0 transition"
onClick={handleToggleMobileSearch}
>
<SearchIcon className="h-full text-3xl" />
@@ -74,7 +78,7 @@ function DefaultContent({
<button
type="button"
- className="group bg-grey-button max-sm:hidden hover:bg-text-color h-[50px] px-4 rounded-lg text-lg text-text-color hover:text-white flex items-center font-bold flex-shrink-0 outline outline-1 outline-outlineColor"
+ className="group bg-lightGray-HC-dark max-sm:hidden hover:bg-darkGray-HC-white h-[50px] px-4 rounded-lg text-lg text-darkGray-HC-white-underline hover:text-white-HC-dark-underline flex items-center font-bold flex-shrink-0 outline outline-1 outline-ice-HC-white"
onClick={handleOpenSubmit}
>
<ImArrowLeft
@@ -87,7 +91,7 @@ function DefaultContent({
<div className="flex grow justify-end items-center max-md:ml-10">
<button onClick={() => toggleContrast()}>
<ContrastTwoToneIcon
- className=" text-text-color md:hidden w-[25px] h-[25px]"/>
+ className=" text-darkGray-HC-white md:hidden w-[25px] h-[25px]"/>
</button>
{loggedIn ? (
<>
@@ -98,7 +102,7 @@ function DefaultContent({
) : (
<button
type="button"
- className="group bg-orange hover:bg-text-color px-4 h-10 mr-14 max-sm:ml-2 rounded text-white flex items-center font-bold flex-shrink-0"
+ className="group bg-orange hover:bg-darkGray-HC-white px-4 h-10 mr-14 max-sm:ml-2 rounded text-white-HC-dark-underline flex items-center font-bold flex-shrink-0"
onClick={loginBarrier}
>
Entrar
@@ -120,7 +124,7 @@ export function MobileSearch({ setFilterState, filterState, handleToggleMobileSe
type="button"
alt="Fechar busca"
title="Fechar busca"
- className={"bg-text-color w-10 h-10 mr-2 rounded text-white shrink-0 transition-all duration-30000 hover:bg-blue-button"}
+ className={"bg-darkGray-HC-white w-10 h-10 mr-2 rounded text-white-HC-dark-underline shrink-0 transition-all duration-30000 hover:bg-turquoise-HC-dark"}
onClick={handleToggleMobileSearch}
>
<CloseIcon className="h-full text-3xl " />
diff --git a/src/app/components/ImageCropper.js b/src/app/components/ImageCropper.js
index 7c39940d..2dbe5447 100644
--- a/src/app/components/ImageCropper.js
+++ b/src/app/components/ImageCropper.js
@@ -134,13 +134,13 @@ export default function ImageCropper({ payloadHeader, type, userId, setChangePho
return (
<div className="flex flex-col items-center">
<div className="flex space-x-4 mt-2 mb-5">
- <label className="bg-secondary text-white rounded-lg p-2 cursor-pointer">
+ <label className="bg-turquoise text-white-HC-dark-underline rounded-lg p-2 cursor-pointer">
<input type="file" onChange={handlePhoto} className="hidden" />
Selecionar Nova Foto
</label>
{completedCrop && (
<button
- className="text-sm p-2 text-white border-main rounded-lg font-bold bg-secondary hover:bg-secondary-hover"
+ className="text-sm p-2 text-white-HC-dark-underline border-main rounded-lg font-bold bg-turquoise hover:bg-turquoise-hover"
onClick={uploadPhoto}
>
Enviar
diff --git a/src/app/components/InfiniteScroll.js b/src/app/components/InfiniteScroll.js
index 7db26cbe..edee4e2a 100644
--- a/src/app/components/InfiniteScroll.js
+++ b/src/app/components/InfiniteScroll.js
@@ -107,7 +107,7 @@ export default function InfiniteScroll({ filterState, setNewSize, newSize, setIt
<InfiniteScrollCards setNewSize={setNewSize} newSize={newSize} data={items} searchClass={filterState?.searchClass} />
:
- <div className="flex justify-center text-2xl font-bold text-text-filter mt-72 text-center">
+ <div className="flex justify-center text-2xl font-bold text-darkGray-HC-white mt-72 text-center">
Desculpe, não encontramos nada.
<br />
{": ("}
diff --git a/src/app/components/InfiniteScrollCards.js b/src/app/components/InfiniteScrollCards.js
index ce8d61c8..d9a98e2b 100644
--- a/src/app/components/InfiniteScrollCards.js
+++ b/src/app/components/InfiniteScrollCards.js
@@ -82,16 +82,16 @@ export default function InfiniteScrollCards({ data, searchClass, setNewSize, new
{data?.map((item) => (
<div
key={item.id}
- className="bg-white outline outline-1 outline-outlineColor mb-10 pt-6 px-4 rounded-2xl relative"
+ className="bg-white-HC-dark outline outline-1 outline-ice-HC-white mb-10 pt-6 px-4 rounded-2xl relative"
>
{/* Cabeçalho com título, autor e botões */}
<div className="flex justify-between items-start">
{/* Título e autor */}
<div className="flex flex-col">
- <p className="text-2xl font-bold mb-1 text-text-color hover:underline">
+ <p className="text-2xl font-bold mb-1 text-darkGray-HC-white hover:underline">
<Link href={`/colecao/${item.id}`}>{item.name}</Link>
</p>
- <p className="ml-1 text-text-color">
+ <p className="ml-1 text-darkGray-HC-white">
por{" "}
<Link
className="hover:underline"
@@ -148,16 +148,16 @@ export default function InfiniteScrollCards({ data, searchClass, setNewSize, new
{mecCollection?.map((item) => (
<div
key={item.id}
- className="bg-white outline outline-1 outline-outlineColor mb-10 pt-6 px-4 rounded-2xl relative"
+ className="bg-white-HC-dark outline outline-1 outline-ice-HC-white mb-10 pt-6 px-4 rounded-2xl relative"
>
{/* Cabeçalho com título, autor e botões */}
<div className="flex justify-between items-start">
{/* Título e autor */}
<div className="flex flex-col">
- <p className="text-2xl font-bold mb-1 text-text-color hover:underline">
+ <p className="text-2xl font-bold mb-1 text-darkGray-HC-white hover:underline">
<Link href={`/colecao/${item.id}`}>{item.name}</Link>
</p>
- <p className="ml-1 text-text-color">
+ <p className="ml-1 text-darkGray-HC-white">
por {" "}
<Link className="hover:underline" href={`/perfil/35342`}>
Ministério da Educação
diff --git a/src/app/components/ItemNotification.js b/src/app/components/ItemNotification.js
index deb94bfb..e865af54 100644
--- a/src/app/components/ItemNotification.js
+++ b/src/app/components/ItemNotification.js
@@ -23,19 +23,19 @@ const timeFunction = (updated_time) => {
function getRandomBg(id) {
const colors = [
- "bg-secondary",
+ "bg-turquoise",
"bg-orange",
- "bg-secondary-hover",
- "bg-orange-hover",
+ "bg-turquoise-hover",
+ "bg-darkOrange-HC-gray ",
"bg-violet",
"bg-pink",
"bg-red",
- "bg-text-color",
- "bg-text-color-click",
- "bg-button-filters",
- "bg-text-filter",
- "bg-other-links",
- "bg-blue-button",
+ "bg-darkGray-HC-white",
+ "bg-darkGray-HC-white-click",
+ "bg-ice-HC-dark ",
+ "bg-darkGray-HC-white",
+ "bg-darkGray-HC-white",
+ "bg-turquoise-HC-dark",
]
return colors[id % colors.length];
@@ -82,9 +82,9 @@ export default function ItemNotification({ notification, postViewNotification })
}
return (
- <div className="flex flex-row px-3 py-4 mt-1 ml-2 hover:bg-button-filters hover:rounded-lg" onClick={viewOneNotification} >
+ <div className="flex flex-row px-3 py-4 mt-1 ml-2 hover:bg-ice-HC-dark hover:rounded-lg" onClick={viewOneNotification} >
<div className="pr-3 pl-1 shrink-0 flex items-center">
- {!notification.owner?.avatar ? <div className={`flex items-center justify-center text-xl font-bold text-main rounded-full h-[43px] w-[43px] ${getRandomBg(notification.owner.id)}`} >{notification.owner.name[0]}</div>
+ {!notification.owner?.avatar ? <div className={`flex items-center justify-center text-xl font-bold text-ice-HC-dark rounded-full h-[43px] w-[43px] ${getRandomBg(notification.owner.id)}`} >{notification.owner.name[0]}</div>
:
<Image
src={mecredURL + notification.owner.avatar}
@@ -96,17 +96,17 @@ export default function ItemNotification({ notification, postViewNotification })
}
</div>
<div>
- <p className="text-sm font-bold text-text-filter line-clamp-1">
+ <p className="text-sm font-bold text-darkGray-HC-white line-clamp-1">
{notification.owner.name}
</p>
- <p className="text-sm font-normal text-text-filter line-clamp-2 ">
+ <p className="text-sm font-normal text-darkGray-HC-white line-clamp-2 ">
{tradutor(notification.activity)}
- <a className="text-secondary-hover" href={`recurso/${notification.recipient?.id}`} >
+ <a className="text-turquoise-HC-underline -hover" href={`recurso/${notification.recipient?.id}`} >
{notification.recipient?.name}
</a>
</p>
- <p className="text-sm font-light text-text-filter ">
+ <p className="text-sm font-light text-darkGray-HC-white ">
{timeFunction(notification.created_at)}
</p>
</div>
diff --git a/src/app/components/Loading.js b/src/app/components/Loading.js
index c0332ccb..da30aaff 100644
--- a/src/app/components/Loading.js
+++ b/src/app/components/Loading.js
@@ -9,7 +9,7 @@ export default function Loading({ scroll, loaded, children }) {
loaded ? children :
<div className={`text-center mt-10 ${scroll ? "fixed w-screen left-[0%] top-[40%] " : "relative mb-8"} `}>
<div role="status">
- <svg aria-hidden="true" className="z-[9999] inline w-12 h-12 text-main animate-spin dark:text-main-hover fill-orange" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <svg aria-hidden="true" className="z-[9999] inline w-12 h-12 text-ice-HC-dark animate-spin dark:text-ice-HC-gray fill-orange" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor" />
<path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill" />
</svg>
diff --git a/src/app/components/MenuProfile.js b/src/app/components/MenuProfile.js
index 36e85a4f..9aedc9f2 100644
--- a/src/app/components/MenuProfile.js
+++ b/src/app/components/MenuProfile.js
@@ -56,19 +56,19 @@ const items = [
function getRandomBg(id) {
const colors = [
- "bg-secondary",
+ "bg-turquoise",
"bg-orange",
- "bg-secondary-hover",
- "bg-orange-hover",
+ "bg-turquoise-hover",
+ "bg-darkOrange-HC-gray ",
"bg-violet",
"bg-pink",
"bg-red",
- "bg-text-color",
- "bg-text-color-click",
- "bg-button-filters",
- "bg-text-filter",
- "bg-other-links",
- "bg-blue-button",
+ "bg-darkGray-HC-white",
+ "bg-darkGray-HC-white-click",
+ "bg-ice-HC-dark ",
+ "bg-darkGray-HC-white",
+ "bg-darkGray-HC-white",
+ "bg-turquoise-HC-dark",
]
return colors[id % colors.length];
@@ -135,7 +135,7 @@ export default function AccountMenu() {
alt="Acessar meu perfil"
>
{(userData["avatar_file_name"] === "") || (userData["avatar_file_name"] === null) ? (
- <div className={`flex items-center max-sm:-ml-px justify-center text-xl font-bold text-main rounded-full h-[38px] w-[38px] ${getRandomBg(userData["id"])}`} >{userData["name"][0]}</div>
+ <div className={`flex items-center max-sm:-ml-px justify-center text-xl font-bold text-ice-HC-dark rounded-full h-[38px] w-[38px] ${getRandomBg(userData["id"])}`} >{userData["name"][0]}</div>
) : (
<Avatar
src={
@@ -168,15 +168,15 @@ export default function AccountMenu() {
sx={{
backgroundColor: 'transparent',
'& .MuiPaper-root': {
- backgroundColor: 'var(--main)',
- border: '2px solid var(--outlineColor)',
+ backgroundColor: 'var(--ice-HC-dark)',
+ border: '2px solid var(--ice-HC-white)',
borderRadius: '8px',
}
}}
>
<MenuItem className="ml-1" sx={{ 'pointer-events': 'none' }} >
{(userData["avatar_file_name"] === "") || (userData["avatar_file_name"] === null) ? (
- <div className={`flex items-center justify-center pt-1 text-xl font-bold text-main rounded-full h-[38px] w-[38px] ${getRandomBg(userData["id"])}`} >{userData["name"][0]}</div>
+ <div className={`flex items-center justify-center pt-1 text-xl font-bold text-ice-HC-dark rounded-full h-[38px] w-[38px] ${getRandomBg(userData["id"])}`} >{userData["name"][0]}</div>
) : (
<Avatar
src={
@@ -186,7 +186,7 @@ export default function AccountMenu() {
sx={{ width: 38, height: 38 }}
/>
)}
- <div className="grid grid-rows-2 text-text-color ml-4 mt-2 grid-flow-row">
+ <div className="grid grid-rows-2 text-darkGray-HC-white ml-4 mt-2 grid-flow-row">
<p className="row-span-1"> {userData["name"]} </p>
<p className="row-span-2 text-xs"> {userData["uid"]} </p>
</div>
@@ -194,8 +194,8 @@ export default function AccountMenu() {
<hr className="border-gray-color h-1 my-2 "/>
<Link href={`/perfil/${id}`} className="flex mb-2">
<MenuItem >
- <AccountCircleRoundedIcon className="mr-4 text-secondary text-3xl" />
- <p className="text-secondary">Acessar meu Perfil</p>
+ <AccountCircleRoundedIcon className="mr-4 text-turquoise-HC-white-underline text-3xl" />
+ <p className="text-turquoise-HC-white-underline ">Acessar meu Perfil</p>
</MenuItem>
</Link>
<hr className="border-gray-color h-1 my-2 "/>
@@ -203,14 +203,14 @@ export default function AccountMenu() {
return (
<Link href={item.href} key={index}>
<MenuItem title="Ainda não disponível">
- <item.icon className="text-text-color mr-4 text-3xl" />
- <p className="text-text-filter">{item.label}</p>
+ <item.icon className="text-darkGray-HC-white mr-4 text-3xl" />
+ <p className="text-darkGray-HC-white">{item.label}</p>
</MenuItem>
</Link>
);
})}
<hr className="border-gray-color h-1 my-2 "/>
- <MenuItem className="flex items-center justify-center text-text-filter text-sm" onClick={handleLogout}>
+ <MenuItem className="flex items-center justify-center text-darkGray-HC-white text-sm" onClick={handleLogout}>
<p>Sair da minha conta</p>
</MenuItem>
</Menu>
diff --git a/src/app/components/ModalNotifications.js b/src/app/components/ModalNotifications.js
index 9b8b1a26..9510136d 100644
--- a/src/app/components/ModalNotifications.js
+++ b/src/app/components/ModalNotifications.js
@@ -41,7 +41,7 @@ export default function ModalNotifications({ countNotifications, notifications,
type="button"
alt="Notificações"
title="Em construção"
- className="bg-transparent max-sm:-ml-px max-sm:-mr-2 hover:text-secondary w-10 h-10 rounded text-text-color flex-shrink-0 transition"
+ className="bg-transparent max-sm:-ml-px max-sm:-mr-2 hover:text-turquoise-HC-white-underline w-10 h-10 rounded text-darkGray-HC-white flex-shrink-0 transition"
id="basic-button"
aria-controls={open ? 'basic-menu' : undefined}
aria-haspopup="true"
@@ -49,10 +49,11 @@ export default function ModalNotifications({ countNotifications, notifications,
onClick={handleClick}
>
<Badge badgeContent={countNotifications}
+
sx={{
'& .MuiBadge-badge': {
- backgroundColor: 'var(--secondary)',
- color: 'var(--main)'
+ backgroundColor: 'var(--turquoise-HC-white)',
+ color: 'var(--ice-HC-dark)'
}
}}
>
@@ -70,7 +71,7 @@ export default function ModalNotifications({ countNotifications, notifications,
backgroundColor: 'transparent',
'& .MuiPaper-root': {
backgroundColor: 'var(--main)',
- border: '2px solid var(--outlineColor)',
+ border: '2px solid var(--ice-HC-white)',
borderRadius: '8px',
}
}}
@@ -78,8 +79,8 @@ export default function ModalNotifications({ countNotifications, notifications,
anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
>
<div className='flex pr-2' >
- <div className='text-lg py-3 font-bold text-text-filter pl-6 pr-16'> Notificações </div>
- <button className='text-text-color text-sm bg-grey-button rounded-xl px-2 h-10 mt-1 mr-1 hover:bg-button-filters' onClick={setViewdAllNotification}> Marcar como lidas </button>
+ <div className='text-lg py-3 font-bold text-darkGray-HC-white pl-6 pr-16'> Notificações </div>
+ <button className='text-darkGray-HC-white text-sm bg-lightGray-HC-dark rounded-xl px-2 h-10 mt-1 mr-1 hover:bg-ice-HC-dark ' onClick={setViewdAllNotification}> Marcar como lidas </button>
</div>
<div className='px-4'>
<hr className='border-main-hover' />
@@ -92,7 +93,7 @@ export default function ModalNotifications({ countNotifications, notifications,
<div key={index} className='pl-2' >
<ItemNotification notification={notification} postViewNotification={postViewNotification} />
<div className='pl-4'>
- <hr className="border-gray-color h-1 my-2 "/>
+ <hr className="border-turquoise h-1 my-2 "/>
</div>
</div>
@@ -101,7 +102,7 @@ export default function ModalNotifications({ countNotifications, notifications,
:
(
countNotifications === 0 ?
- <p className='text-text-filter text-center pt-[40%]'> Não há notificações não lidas</p>
+ <p className='text-darkGray-HC-white text-center pt-[40%]'> Não há notificações não lidas</p>
:
<Loading />
)
diff --git a/src/app/components/NavigationBar.js b/src/app/components/NavigationBar.js
index 54880581..47b0a794 100644
--- a/src/app/components/NavigationBar.js
+++ b/src/app/components/NavigationBar.js
@@ -72,7 +72,7 @@ export default function NavigationBar({ mobileSearch}) {
<>
<NeedLoginModal open={needLoginOpen} setOpen={setNeedLoginOpen} />
- <nav className="bg-navbar h-50 outline outline-1 outline-outlineColor text-text-color font-light fixed bottom-0 left-0 w-full z-10">
+ <nav className="bg-lightGray h-50 outline outline-1 outline-ice-HC-white text-darkGray-HC-white font-light fixed bottom-0 left-0 w-full z-10">
<ul className="flex justify-between overflow-x-auto no-scrollbar animate-scrollHint">
{navItems.map((item, index) => {
const isPublishRoute = item.href === "/publicar";
diff --git a/src/app/components/Overlay.js b/src/app/components/Overlay.js
index 059e5d88..610bb3dc 100644
--- a/src/app/components/Overlay.js
+++ b/src/app/components/Overlay.js
@@ -60,7 +60,7 @@ export default function Overlay({
return (
<Suspense fallback={<Loading />}>
<ThemeProvider theme={theme}>
- <main className="bg-main bg-fundo bg-repeat bg-fixed text-base min-h-dvh">
+ <main className="bg-ice-HC-dark bg-fundo bg-repeat bg-fixed text-base min-h-dvh">
<div className="hidden md:block">
<AcessibilityBar />
</div>
diff --git a/src/app/components/RecommendedCards.js b/src/app/components/RecommendedCards.js
index eb846d9c..3848c1b8 100644
--- a/src/app/components/RecommendedCards.js
+++ b/src/app/components/RecommendedCards.js
@@ -91,19 +91,19 @@ export default function RecommendedCards(props) {
function getRandomBg(id) {
const colors = [
- "bg-secondary",
+ "bg-turquoise",
"bg-orange",
- "bg-secondary-hover",
- "bg-orange-hover",
+ "bg-turquoise-hover",
+ "bg-darkOrange-HC-gray ",
"bg-violet",
"bg-pink",
"bg-red",
- "bg-text-color",
- "bg-text-color-click",
- "bg-button-filters",
- "bg-text-filter",
- "bg-other-links",
- "bg-blue-button",
+ "bg-darkGray-HC-white",
+ "bg-darkGray-HC-white-click",
+ "bg-ice-HC-dark ",
+ "bg-darkGray-HC-white",
+ "bg-darkGray-HC-white",
+ "bg-turquoise-HC-dark",
]
return colors[id % colors.length];
@@ -114,7 +114,7 @@ export default function RecommendedCards(props) {
return (
<Card
- className={`active:bg-main active:rounded-3xl transition ease-in-out ${props.page !== "recurso" && "items-center"}`}
+ className={`active:bg-ice-HC-dark active:rounded-3xl transition ease-in-out ${props.page !== "recurso" && "items-center"}`}
tabIndex="-1"
sx={{
display: "flex",
@@ -150,14 +150,14 @@ export default function RecommendedCards(props) {
<>
<div className="flex flex-col ml-4 max-sm:ml-0 max-sm:justify-stretch">
- <div className="line-clamp-2 text-lg text-main-text font-bold text-text-filter min-h-4 max-sm:w-full"> {props["title"]} </div>
+ <div className="line-clamp-2 text-lg text-darkGray-HC-white-underline font-bold min-h-4 max-sm:w-full"> {props["title"]} </div>
<div className=" flex flex-row ">
<div className="flex flex-col ">
- <div className="line-clamp-1 text-text-color text-sm font-light" >
+ <div className="line-clamp-1 text-darkGray-HC-white-underline text-sm font-light" >
{props["author"]}
</div>
- <div className="line-clamp-1 text-text-color text-sm font-light">
+ <div className="line-clamp-1 text-darkGray-HC-white text-sm font-light">
{timeFunction(props.updated_at)}
</div>
</div>
@@ -168,7 +168,7 @@ export default function RecommendedCards(props) {
:
<>
<div className="flex flex-row mt-4 mb-4 w-full justify-start ">
- {props?.noAvatar || !props["avatar"] ? <div className={`flex items-center shrink-0 justify-center text-xl font-bold ml-1 text-main rounded-full h-[33px] w-[33px] ${getRandomBg(props["id"])}`} >{props["author"][0]}</div>
+ {props?.noAvatar || !props["avatar"] ? <div className={`flex items-center shrink-0 justify-center text-xl font-bold ml-1 text-ice-HC-dark rounded-full h-[33px] w-[33px] ${getRandomBg(props["id"])}`} >{props["author"][0]}</div>
:
<img
src={mecredURL + props["avatar"]}
@@ -179,13 +179,13 @@ export default function RecommendedCards(props) {
}
<div className="mx-2">
- <div className="line-clamp-1 text-sm text-main-text font-bold text-text-filter mb- w-[100%] min-h-4"> {props["title"]} </div>
+ <div className="line-clamp-1 text-sm text-darkGray-HC-white-underline font-bold text-darkGray-HC-white mb- w-[100%] min-h-4"> {props["title"]} </div>
<div className="flex flex-row">
<div>
- <div className="line-clamp-1 text-text-color text-sm font-light" >
+ <div className="line-clamp-1 text-darkGray-HC-white text-sm font-light" >
{props["author"]}
</div>
- <div className="line-clamp-1 text-text-color text-sm font-light">
+ <div className="line-clamp-1 text-darkGray-HC-white text-sm font-light">
{timeFunction(props.updated_at)}
</div>
</div>
@@ -197,7 +197,7 @@ export default function RecommendedCards(props) {
</>
}
{props?.homologa == "submitted" ?
- <div className="text-main text-xs p-1 bg-blue-publish rounded-full flex justify-start">Em homologação</div>
+ <div className="text-ice-HC-dark text-xs p-1 bg-turquoise-HC-dark rounded-full flex justify-start">Em homologação</div>
:
null
}
diff --git a/src/app/components/SearchComponent.js b/src/app/components/SearchComponent.js
index e411f26d..05350cee 100644
--- a/src/app/components/SearchComponent.js
+++ b/src/app/components/SearchComponent.js
@@ -147,15 +147,15 @@ export default function SearchComponent({ setFilterState, filterState, sizeWindo
<div className="flex gap-1 items-center h-full">
<div
ref={searchRef}
- className={`flex grow align-middle bg-white rounded-md text-xl items-center h-full ${
- isFocused ? 'outline outline-2 outline-cyan-300' : ''
+ className={`flex grow align-middle bg-white-HC-dark rounded-md text-xl items-center h-full ${
+ isFocused ? 'outline outline-2 outline-turquoise-HC-white' : ''
}`}
>
<input
id="buscar"
type="text"
placeholder="Digite aqui o que você deseja pesquisar"
- className="p-2 px-5 rounded-lg outline outline-1 font-light text-2xl placeholder:text-gray-color outline-outlineColor align-middle h-full w-full"
+ className="p-2 px-5 rounded-lg outline outline-1 font-light text-2xl placeholder:text-lightGray-HC-dark outline-ice-HC-white align-middle h-full w-full"
onFocus={handleFocus}
onBlur={handleBlur}
onChange={(e) => {
@@ -172,7 +172,7 @@ export default function SearchComponent({ setFilterState, filterState, sizeWindo
type="submit"
alt="Buscar"
title="Buscar"
- className=" bg-blue-button hover:bg-text-color w-[50px] h-[50px] max-sm:w-10 max-sm:h-10 rounded-lg outline outline-1 outline-outlineColor text-white-draw hover:text-white flex-shrink-0 transition "
+ className=" bg-turquoise-HC-dark hover:bg-darkGray-HC-white w-[50px] h-[50px] max-sm:w-10 max-sm:h-10 rounded-lg outline outline-1 outline-ice-HC-white text-ice-HC-white hover:text-white-HC-dark-underline flex-shrink-0 transition "
>
<SearchIcon className="h-full text-4xl max-sm:text-3xl" />
</button>
@@ -180,7 +180,7 @@ export default function SearchComponent({ setFilterState, filterState, sizeWindo
{drop && (
<div
ref={dropdownRef}
- className={`fixed z-50 bg-white rounded-lg shadow-md `}
+ className={`fixed z-50 bg-white-HC-dark rounded-lg shadow-md `}
style={{ width: `${width}px` }}
tabIndex={0}
>
@@ -193,8 +193,8 @@ export default function SearchComponent({ setFilterState, filterState, sizeWindo
setDrop(false)
}}
- className={`p-2 text-text-filter hover:bg-main cursor-pointer flex ${
- index === selectedIndex ? "bg-main " : ""
+ className={`p-2 text-darkGray-HC-white hover:bg-ice-HC-dark cursor-pointer flex ${
+ index === selectedIndex ? "bg-ice-HC-dark " : ""
}`}
>
<div className="truncate">{input}</div>{" "}
diff --git a/src/app/components/ShareButton.js b/src/app/components/ShareButton.js
index f539d10a..f90436b3 100644
--- a/src/app/components/ShareButton.js
+++ b/src/app/components/ShareButton.js
@@ -18,7 +18,7 @@ export default function ShareButton({ type, id }) {
return (
<>
<button
- className="p-2 text-sm rounded-xl max-md:my-3 bg-main hover:bg-main-hover outline outline-2 outline-outlineColor text-text-filter font-bold normal-case flex justify-center items-center gap-2"
+ className="p-2 text-sm rounded-xl max-md:my-3 bg-ice-HC-dark hover:bg-lightGray-HC-white hover:text-darkGray-HC-dark outline outline-1 outline-ice-HC-white text-darkGray-HC-white-underline font-bold normal-case flex justify-center items-center gap-2"
onClick={() => setShareOpen(true)}
aria-label="Compartilhar"
>
diff --git a/src/app/components/ShareModal.js b/src/app/components/ShareModal.js
index eed0b790..160029fb 100644
--- a/src/app/components/ShareModal.js
+++ b/src/app/components/ShareModal.js
@@ -44,14 +44,14 @@ export default function ShareModal({ open, onClose, title, link }) {
}}
>
<div>
- <div className="flex flex-col bg-main p-6 rounded-lg items-center">
- <div className="text-xl font-bold text-main-text">{title}</div>
+ <div className="flex flex-col bg-ice-HC-dark p-6 rounded-lg items-center">
+ <div className="text-xl font-bold text-darkGray-HC-white-underline">{title}</div>
<div className="p-3 mt-2 flex flex-col sm:flex-row">
<div>
<Button
disableElevation
variant="outlined"
- className="border-main text-main-text border text-lg normal-case flex gap-2 "
+ className="border-main text-darkGray-HC-white-underline border text-lg normal-case flex gap-2 "
sx={{ justifyContent: "start" }}
onClick={() => {
navigator.clipboard.writeText(link);
@@ -68,7 +68,7 @@ export default function ShareModal({ open, onClose, title, link }) {
<Button
disableElevation
variant="contained"
- className="bg-main text-main-text text-lg normal-case flex gap-2"
+ className="bg-ice-HC-dark text-darkGray-HC-white-underline text-lg normal-case flex gap-2"
onClick={shareLink}
alt="Compartilhar link"
>
@@ -80,7 +80,7 @@ export default function ShareModal({ open, onClose, title, link }) {
</div>
<div className="flex justify-center">
<button
- className="text-sm text-main-text border-main rounded-lg normal-case h-9 font-bold bg-main hover:bg-main-hover"
+ className="text-sm text-darkGray-HC-white-underline border-main rounded-lg normal-case h-9 font-bold bg-ice-HC-dark hover:bg-ice-HC-dark-hover"
onClick={() => { onClose(); setClicked(false); }}
>
Fechar
diff --git a/src/app/components/SideBar.js b/src/app/components/SideBar.js
index a014092c..219a11d1 100644
--- a/src/app/components/SideBar.js
+++ b/src/app/components/SideBar.js
@@ -131,7 +131,7 @@ export default function SideBar({ setFilterState, filterState }) {
<>
<NeedLoginModal open={needLoginOpen} setOpen={setNeedLoginOpen} />
- <div className="max-md:hidden min-h-0 overflow-y-auto flex flex-col text-text-color font-light">
+ <div className="max-md:hidden min-h-0 overflow-y-auto flex flex-col text-darkGray-HC-white-underline font-light">
<div className="flex flex-col justify-start items-center gap-3 w-full ">
{acessoRapido.map((item, index) => {
return (
@@ -141,14 +141,14 @@ export default function SideBar({ setFilterState, filterState }) {
key={index}
alt={item.title}
title={item.title}
- className={`aspect-square cursor-pointer hover:bg-main-hover focus:bg-main-hover text-center rounded-lg pt-2 w-[80px]
- ${(page === item.href) || (pathname === item.href) ? "bg-main-hover text-text-filter font-bold" : ""}
+ className={`aspect-square cursor-pointer hover:bg-lightGray-HC-white hover:text-darkGray-HC-dark focus:bg-lightGray-HC-white text-center rounded-lg pt-2 w-[80px]
+ ${(page === item.href) || (pathname === item.href) ? "bg-lightGray-HC-white text-darkGray-HC-dark font-bold" : ""}
`}
>
<item.icon
- className={`text-3xl rounded-xl cursor-pointer ${page === item.href ? "text-text-filter font-bold" : ""}`}
+ className={`text-3xl rounded-xl cursor-pointer ${page === item.href ? "text-darkGray-HC-dark font-bold" : ""}`}
/>
- <div className="py-1 text-text-color text-base">
+ <div className={`py-1 text-base `}>
{item.title}
</div>
</Link>
diff --git a/src/app/components/Title.js b/src/app/components/Title.js
index 9829b340..fa511547 100644
--- a/src/app/components/Title.js
+++ b/src/app/components/Title.js
@@ -1,10 +1,10 @@
export default function Title() {
return (
<div className="my-10 mx-8">
- <h1 className="text-3xl max-lg:text-xl font-bold text-main-text my-10 text-center">
+ <h1 className="text-3xl max-lg:text-xl font-bold text-darkGray-HC-white my-10 text-center">
MEC RED - A Rede Social da Educação
</h1>
- <h1 className="text-xl max-lg:text-base text-main-text text-balance mb-5 text-center">
+ <h1 className="text-xl max-lg:text-base text-darkGray-HC-white text-balance mb-5 text-center">
Aqui você pode se conectar com pessoas interessadas na área da educação,
acessar e compartilhar recursos Educacionais Digitais (REDs)!
</h1>
diff --git a/src/app/components/UsersPageCard.js b/src/app/components/UsersPageCard.js
index 663025e0..82a854c8 100644
--- a/src/app/components/UsersPageCard.js
+++ b/src/app/components/UsersPageCard.js
@@ -12,19 +12,19 @@ import Link from "next/link"
export default function UsersPageCard({ item }) {
function getRandomBg(id) {
const colors = [
- "bg-secondary",
+ "bg-turquoise",
"bg-orange",
- "bg-secondary-hover",
- "bg-orange-hover",
+ "bg-turquoise-hover",
+ "bg-darkOrange-HC-gray ",
"bg-violet",
"bg-pink",
"bg-red",
- "bg-text-color",
- "bg-text-color-click",
- "bg-button-filters",
- "bg-text-filter",
- "bg-other-links",
- "bg-blue-button",
+ "bg-darkGray-HC-white",
+ "bg-darkGray-HC-white-click",
+ "bg-ice-HC-dark ",
+ "bg-darkGray-HC-white",
+ "bg-darkGray-HC-white",
+ "bg-turquoise-HC-dark",
]
return colors[id % colors.length];
@@ -34,32 +34,32 @@ export default function UsersPageCard({ item }) {
return (
item &&
<Link tabIndex="-1" href={`/perfil/${item["id"]}`}>
- <div id="conteudo" tabIndex="0" className="flex flex-col w-[300px] min-h-[270px] bg-white outline outline-1 outline-outlineColor m-4 rounded-lg hover:bg-main-hover focus:bg-main-hover">
+ <div id="conteudo" tabIndex="0" className="flex flex-col w-[300px] min-h-[270px] bg-white-HC-dark outline outline-1 outline-ice-HC-white m-4 rounded-lg hover:bg-ice-HC-dark-hover focus:bg-ice-HC-dark-hover">
<div className="grid justify-items-center h-[200px] pt-2">
{item["avatar"] ?
<Avatar src={mecredURL + item["avatar"]} sx={{ position: "inherit" }} className=" min-h-[120px] min-w-[120px] m-2" />
:
- <div className={`flex items-center justify-center text-5xl m-2 font-bold text-main rounded-full h-[120px] w-[120px] ${getRandomBg(item["id"])}`} >{item["name"][0]}</div>
+ <div className={`flex items-center justify-center text-5xl m-2 font-bold text-ice-HC-dark rounded-full h-[120px] w-[120px] ${getRandomBg(item["id"])}`} >{item["name"][0]}</div>
}
- <p className=" font-bold text-main-text text-center">{item["name"]}</p>
+ <p className=" font-bold text-darkGray-HC-white-underline text-center">{item["name"]}</p>
</div>
<Divider className="mx-4" />
<div className="flex items-center flex-col gap-1 py-3 ">
<div className="flex flex-col justify-start gap-1">
<div className="flex">
- <Person fontSize="small" className="text-main-text mt-2" />
- <p className="mt-2 text-sm text-main-text px-1">Seguidores: {item["follows_count"]}</p>
+ <Person fontSize="small" className="text-darkGray-HC-white-underline mt-2" />
+ <p className="mt-2 text-sm text-darkGray-HC-white-underline px-1">Seguidores: {item["follows_count"]}</p>
</div>
{/* <div className="flex">
- <CollectionsBookmark fontSize="small" className="text-main-text" />
- <p className="text-sm text-main-text inline px-1">Coleções: {item["collections_count"]} </p>
+ <CollectionsBookmark fontSize="small" className="text-darkGray-HC-white-underline" />
+ <p className="text-sm text-darkGray-HC-white-underline inline px-1">Coleções: {item["collections_count"]} </p>
</div> */}
<div className="flex">
- <Subject fontSize="small" className="text-main-text" />
- <p className="text-sm text-main-text inline px-1">Recursos: {item["learning_objects_count"]}</p>
+ <Subject fontSize="small" className="text-darkGray-HC-white-underline" />
+ <p className="text-sm text-darkGray-HC-white-underline inline px-1">Recursos: {item["learning_objects_count"]}</p>
</div>
</div>
</div>
diff --git a/src/app/components/needLoginModal.js b/src/app/components/needLoginModal.js
index 0f9e3843..adf5c7e5 100644
--- a/src/app/components/needLoginModal.js
+++ b/src/app/components/needLoginModal.js
@@ -19,23 +19,23 @@ export default function NeedLoginModal({ open, setOpen }) {
}}
>
<div>
- <div className="flex flex-col rounded-lg bg-white p-3">
- <div className="text-xl text-main-text font-bold ">Entrar</div>
+ <div className="flex flex-col rounded-lg bg-white-HC-dark p-3">
+ <div className="text-xl text-darkGray-HC-white-underline font-bold ">Entrar</div>
<div className="p-3">
- <div className="text-base text-main-text">
+ <div className="text-base text-darkGray-HC-white-underline">
Você precisa entrar ou se cadastrar para executar essa ação.
</div>
<div className="flex flex-wrap justify-center gap-1 items-stretch">
<Button
variant="contained"
- className="bg-secondary hover:bg-[#1d1d1d1c] disabled:bg-red mt-3 text-white hover:text-secondary shadow-none rounded normal-case text-base font-bold flex-shrink-0 flex-grow"
+ className="bg-turquoise hover:bg-[#1d1d1d1c] disabled:bg-red mt-3 text-white-HC-dark-underline hover:text-turquoise-HC-underline shadow-none rounded normal-case text-base font-bold flex-shrink-0 flex-grow"
onClick={loginBarrier}
>
Ir para página de Login
</Button>
<Button
variant="contained"
- className="bg-white hover:bg-[#1d1d1d1c] disabled:bg-red mt-3 text-secondary hover:text-secondary shadow-none rounded normal-case text-base font-bold flex-shrink-0 flex-grow"
+ className="bg-white-HC-dark hover:bg-[#1d1d1d1c] disabled:bg-red mt-3 text-turquoise-HC-underline hover:text-turquoise-HC-underline shadow-none rounded normal-case text-base font-bold flex-shrink-0 flex-grow"
onClick={() => setOpen(false)}
>
Cancelar
diff --git a/src/app/components/publisherInfo.js b/src/app/components/publisherInfo.js
index abdcf103..de10b6f5 100644
--- a/src/app/components/publisherInfo.js
+++ b/src/app/components/publisherInfo.js
@@ -40,19 +40,19 @@ export default function PublisherInfo({ publisher, disabledButton = false }) {
function getRandomBg(id) {
const colors = [
- "bg-secondary",
+ "bg-turquoise",
"bg-orange",
- "bg-secondary-hover",
- "bg-orange-hover",
+ "bg-turquoise-hover",
+ "bg-darkOrange-HC-gray ",
"bg-violet",
"bg-pink",
"bg-red",
- "bg-text-color",
- "bg-text-color-click",
- "bg-button-filters",
- "bg-text-filter",
- "bg-other-links",
- "bg-blue-button",
+ "bg-darkGray-HC-white",
+ "bg-darkGray-HC-white-click",
+ "bg-ice-HC-dark ",
+ "bg-darkGray-HC-white",
+ "bg-darkGray-HC-white",
+ "bg-turquoise-HC-dark",
]
return colors[id % colors.length];
@@ -60,7 +60,7 @@ export default function PublisherInfo({ publisher, disabledButton = false }) {
return (
<>
- <Paper className="bg-white outline outline-1 outline-outlineColor shadow-none flex flex-shrink-0 rounded-xl p-1 m-1 normal-case text-sm font-bold max-sm:flex-col">
+ <Paper className="bg-white-HC-dark outline outline-1 outline-ice-HC-white shadow-none flex flex-shrink-0 rounded-xl p-1 m-1 normal-case text-sm font-bold max-sm:flex-col">
<Button href={`/perfil/${publisher.id}`} >
<div className="flex flex-row truncate">
{publisher?.avatar ? (
@@ -72,13 +72,13 @@ export default function PublisherInfo({ publisher, disabledButton = false }) {
className="m-4"
/>
) : (
- <div className={`flex items-center justify-center text-xl m-2 font-bold text-main rounded-full h-10 w-10 ${getRandomBg(publisher.id)}`} >{publisher.name[0]}</div>
+ <div className={`flex items-center justify-center text-xl m-2 font-bold text-ice-HC-dark rounded-full h-10 w-10 ${getRandomBg(publisher.id)}`} >{publisher.name[0]}</div>
)}
- <div className="flex flex-col justify-center p-1 text-main-text truncate">
+ <div className="flex flex-col justify-center p-1 text-darkGray-HC-white-underline truncate">
<div className="font-bold text-lg truncate sm:text-wrap">
{publisher.name}
</div>
- <div className="font-normal text-md truncate">
+ <div className="font-normal text-md truncate ">
{publisher.description}
</div>
</div>
@@ -88,14 +88,15 @@ export default function PublisherInfo({ publisher, disabledButton = false }) {
<Button
disabled={disabledButton}
href={`/perfil/${publisher.id}`}
- className="outline outline-1 outline-outlineColor hover:bg-gray-color bg-white h-12 text-text-color border border-solid border-main shadow-none rounded-xl p-3 m-1 mr-3 px-8 normal-case font-bold"
+ className="outline outline-1 outline-mediumGray-HC-white hover:bg-ice-HC-white bg-white-HC-dark h-12 text-darkGray-HC-white-underline hover:text-darkGray-HC-dark-underline shadow-none rounded-xl p-3 m-1 mr-3 px-8 normal-case font-bold"
>
Ver Perfil
</Button>
<Button
disabled={disabledButton}
onClick={followHandler}
- className="bg-secondary h-12 text-white hover:bg-secondary-hover shadow-none rounded-xl m-1 px-2 sm:px-8 normal-case font-bold"
+ variant="outlined"
+ className="bg-turquoise-HC-white h-12 text-white-HC-dark-underline hover:text-white-HC-underline hover:bg-darkTurquoise-HC-dark border-1 border-transparent hover:border-turquoise-HC-white shadow-none rounded-xl m-1 px-2 sm:px-8 normal-case font-bold"
>
{followed ? "Seguindo" : "Seguir"}
</Button>
diff --git a/src/app/contato/page.js b/src/app/contato/page.js
index 24ab639d..ee4b87f2 100644
--- a/src/app/contato/page.js
+++ b/src/app/contato/page.js
@@ -54,13 +54,13 @@ export default function Contact() {
},
},
}}>
- <div className="flex flex-col justify-center bg-main p-5 rounded">
- <p className="text-xl justify-center flex text-main-text mb-2">
+ <div className="flex flex-col justify-center bg-ice-HC-dark p-5 rounded">
+ <p className="text-xl justify-center flex text-darkGray-HC-white-underline mb-2">
Mensagem enviada com sucesso!
</p>
<div className="flex flex-row mt-2 justify-center gap-3">
<button
- className="text-sm text-main-text border-main rounded-lg normal-case font-bold bg-main hover:bg-main-hover"
+ className="text-sm text-darkGray-HC-white-underline border-main rounded-lg normal-case font-bold bg-ice-HC-dark hover:bg-ice-HC-dark-hover"
onClick={() => onClose()}
>
OK
@@ -81,7 +81,7 @@ export default function Contact() {
/>
<div className="flex justify-center overflow-y-auto max-md:mx-8 max-md:mb-24">
<Card
- className="flex w-full h-full min-h-[700px] text-text-filter bg-white outline outline-1 outline-outlineColor"
+ className="flex w-full h-full min-h-[700px] text-darkGray-HC-white bg-white-HC-dark outline outline-1 outline-ice-HC-white"
sx={{
display: "flex",
flexDirection: "column",
@@ -100,33 +100,33 @@ export default function Contact() {
Entre em contato para enviar dúvidas, sugestões ou críticas.
</p>
<div className="w-full">
- <p className="text-main-text text-left text-sm">Nome*</p>
+ <p className="text-darkGray-HC-white-underline text-left text-sm">Nome*</p>
<input
- className="w-full h-12 border-text-main-text border rounded text-main-text pl-2 bg-transparent focus:outline-none focus:border-input-focus"
+ className="w-full h-12 border-text-darkGray-HC-white-underline border rounded text-darkGray-HC-white-underline pl-2 bg-transparent focus:outline-none focus:border-input-focus"
type="text"
name="name"
required
/>
</div>
<div className="w-full">
- <p className="text-main-text text-left text-sm">E-mail*</p>
+ <p className="text-darkGray-HC-white-underline text-left text-sm">E-mail*</p>
<input
- className="w-full h-12 border-text-main-text border rounded text-main-text pl-2 bg-transparent focus:outline-none focus:border-input-focus"
+ className="w-full h-12 border-text-darkGray-HC-white-underline border rounded text-darkGray-HC-white-underline pl-2 bg-transparent focus:outline-none focus:border-input-focus"
type="email"
name="email"
required
/>
</div>
<div className="w-full">
- <p className="text-main-text text-left text-sm">Mensagem*</p>
+ <p className="text-darkGray-HC-white-underline text-left text-sm">Mensagem*</p>
<textarea
- className="w-full h-36 border-text-main-text border rounded text-main-text p-2 bg-transparent focus:outline-none focus:border-input-focus"
+ className="w-full h-36 border-text-darkGray-HC-white-underline border rounded text-darkGray-HC-white-underline p-2 bg-transparent focus:outline-none focus:border-input-focus"
name="contents"
required
></textarea>
</div>
<Button
- className="bg-secondary text-white hover:bg-main-hover normal-case font-bold w-full text-lg"
+ className="bg-turquoise text-white-HC-dark-underline hover:bg-ice-HC-dark-hover normal-case font-bold w-full text-lg"
type="submit"
alt="Enviar mensagem"
title="Enviar mensagem"
diff --git a/src/app/editar/[id]/components/EditForm.js b/src/app/editar/[id]/components/EditForm.js
index faaf6d60..8a0011ad 100644
--- a/src/app/editar/[id]/components/EditForm.js
+++ b/src/app/editar/[id]/components/EditForm.js
@@ -4,7 +4,7 @@ import UpdateInfo from "./UpdateInfo";
export default function EditForm({ user }) {
return (
- <div className="w-full bg-white rounded-lg shadow-lg">
+ <div className="w-full bg-white-HC-dark rounded-lg shadow-lg">
<UpdateInfo user={user}/>
<Divider className="mt-5 mx-4"/>
<UpdatePassword user={user} />
diff --git a/src/app/editar/[id]/components/UpdateInfo.js b/src/app/editar/[id]/components/UpdateInfo.js
index 10dcf426..455ae0cf 100644
--- a/src/app/editar/[id]/components/UpdateInfo.js
+++ b/src/app/editar/[id]/components/UpdateInfo.js
@@ -23,19 +23,19 @@ export default function UpdateInfo({ user }) {
function getRandomBg(id) {
const colors = [
- "bg-secondary",
+ "bg-turquoise",
"bg-orange",
- "bg-secondary-hover",
- "bg-orange-hover",
+ "bg-turquoise-hover",
+ "bg-darkOrange-HC-gray ",
"bg-violet",
"bg-pink",
"bg-red",
- "bg-text-color",
- "bg-text-color-click",
- "bg-button-filters",
- "bg-text-filter",
- "bg-other-links",
- "bg-blue-button",
+ "bg-darkGray-HC-white",
+ "bg-darkGray-HC-white-click",
+ "bg-ice-HC-dark ",
+ "bg-darkGray-HC-white",
+ "bg-darkGray-HC-white",
+ "bg-turquoise-HC-dark",
]
return colors[id % colors.length];
@@ -103,18 +103,18 @@ export default function UpdateInfo({ user }) {
},
},
}}>
- <div className="flex flex-col justify-center bg-main p-5 rounded">
- <p className="text-xl justify-center flex text-main-text mb-2">Perfil editado com sucesso!</p>
+ <div className="flex flex-col justify-center bg-ice-HC-dark p-5 rounded">
+ <p className="text-xl justify-center flex text-darkGray-HC-white-underline mb-2">Perfil editado com sucesso!</p>
<div className="flex flex-row mt-2">
<button
- className=" text-sm p-2 mr-1 text-white border-main rounded-lg normal-case h-9 font-bold bg-secondary hover:bg-secondary-hover"
+ className=" text-sm p-2 mr-1 text-white-HC-dark-underline border-main rounded-lg normal-case h-9 font-bold bg-turquoise hover:bg-turquoise-hover"
onClick={() => router.push(`/perfil/${user["id"]}`)}
>
Voltar para perfil
</button>
<button
- className=" text-sm p-2 ml-1 text-main-text border-main rounded-lg normal-case h-9 font-bold bg-main hover:bg-main-hover"
+ className=" text-sm p-2 ml-1 text-darkGray-HC-white-underline border-main rounded-lg normal-case h-9 font-bold bg-ice-HC-dark hover:bg-ice-HC-dark-hover"
onClick={() => onClose()}
>
Continuar editando
@@ -134,18 +134,18 @@ export default function UpdateInfo({ user }) {
},
},
}}>
- <div className="flex flex-col justify-center bg-main p-5 rounded">
- <p className="text-xl justify-center flex text-main-text mb-2">Não foi possível fazer as alterações</p>
+ <div className="flex flex-col justify-center bg-ice-HC-dark p-5 rounded">
+ <p className="text-xl justify-center flex text-darkGray-HC-white-underline mb-2">Não foi possível fazer as alterações</p>
<div className="flex flex-row mt-2">
<button
- className=" text-sm p-2 mr-1 text-white border-main rounded-lg normal-case h-9 font-bold bg-secondary hover:bg-secondary-hover"
+ className=" text-sm p-2 mr-1 text-white-HC-dark-underline border-main rounded-lg normal-case h-9 font-bold bg-turquoise hover:bg-turquoise-hover"
onClick={() => router.push(`/perfil/${user["id"]}`)}
>
Voltar para perfil
</button>
<button
- className=" text-sm p-2 ml-1 text-main-text border-main rounded-lg normal-case h-9 font-bold bg-main hover:bg-main-hover"
+ className=" text-sm p-2 ml-1 text-darkGray-HC-white-underline border-main rounded-lg normal-case h-9 font-bold bg-ice-HC-dark hover:bg-ice-HC-dark-hover"
onClick={() => onClose()}
>
Continuar editando
@@ -171,7 +171,7 @@ export default function UpdateInfo({ user }) {
}}
>
<div
- className="flex flex-col bg-main p-6 rounded-lg outline outline-1 outline-outlineColor overflow-auto"
+ className="flex flex-col bg-ice-HC-dark p-6 rounded-lg outline outline-1 outline-ice-HC-white overflow-auto"
style={{
width: '90%',
maxWidth: '600px',
@@ -179,14 +179,14 @@ export default function UpdateInfo({ user }) {
maxHeight: '90vh',
}}
>
- <p className="text-xl text-main-text text-center mb-4">Editar Foto de Perfil</p>
+ <p className="text-xl text-darkGray-HC-white-underline text-center mb-4">Editar Foto de Perfil</p>
<div className="flex-grow">
<ImageCropper payloadHeader={"user[avatar]"} type={"users"} userId={user.id} setChangePhoto={setChangePhoto} />
</div>
<button
- className="text-sm p-2 text-main-text border-main rounded-lg h-9 font-bold bg-main hover:bg-main-hover mt-4"
+ className="text-sm p-2 text-darkGray-HC-white-underline border-main rounded-lg h-9 font-bold bg-ice-HC-dark hover:bg-ice-HC-dark-hover mt-4"
onClick={onClose}
>
Cancelar
@@ -202,9 +202,9 @@ export default function UpdateInfo({ user }) {
<ModalNotSucess open={notSucessOpen} onClose={() => { setNotSucessOpen(false) }} />
<ModalSucess open={sucessOpen} onClose={() => { setSucessOpen(false) }} />
<form onSubmit={handleSubmit}>
- <label className="text-3xl text-main-text font-bold mt-3 flex justify-center">Editar Perfil</label>
+ <label className="text-3xl text-darkGray-HC-white-underline font-bold mt-3 flex justify-center">Editar Perfil</label>
<div className="flex flex-col mt-4 items-center">
- <label className="text-xl text-main-text font-bold mx-6">Foto de perfil</label>
+ <label className="text-xl text-darkGray-HC-white font-bold mx-6">Foto de perfil</label>
<div className="flex flex-col items-center my-2">
{user["avatar"] ? (
<img
@@ -214,7 +214,7 @@ export default function UpdateInfo({ user }) {
/>
) : (
<div
- className={`flex items-center justify-center text-xl font-bold text-main rounded-full h-[150px] w-[150px] ${getRandomBg(user["id"])}`}
+ className={`flex items-center justify-center text-xl font-bold text-ice-HC-dark rounded-full h-[150px] w-[150px] ${getRandomBg(user["id"])}`}
>
{user["name"][0]}
</div>
@@ -222,7 +222,7 @@ export default function UpdateInfo({ user }) {
<button
type="button"
- className="bg-secondary text-white rounded-lg mt-2 px-4 py-2"
+ className="bg-turquoise text-white-HC-dark-underline rounded-lg mt-2 px-4 py-2"
onClick={() => setChangePhoto(true)}
>
Editar Foto
@@ -233,7 +233,7 @@ export default function UpdateInfo({ user }) {
</div>
<div className="mx-4 mt-4">
- <label className=" text-xl text-main-text font-bold ">Nome Completo *</label>
+ <label className=" text-xl text-darkGray-HC-white-underline font-bold ">Nome Completo *</label>
<TextField
onChange={handleNameChange}
className="w-[100%] mt-2"
@@ -253,7 +253,7 @@ export default function UpdateInfo({ user }) {
/>
</div>
<div className="mx-4 mt-8">
- <label className=" text-xl text-main-text font-bold ">Email *</label>
+ <label className=" text-xl text-darkGray-HC-white-underline font-bold ">Email *</label>
<TextField
onChange={handleEmailChange}
className="w-[100%] mt-2"
@@ -264,8 +264,8 @@ export default function UpdateInfo({ user }) {
<div className="flex justify-end mt-5 mr-4">
- <button type="button" onClick={() => router.push(`/perfil/${user["id"]}`)} className="bg-white text-main-text p-2 rounded-lg hover:bg-main-hover mr-1 ">Voltar para perfil</button>
- <button type="submit" className="bg-secondary text-white p-2 rounded-lg hover:bg-secondary-hover ml-1 ">Salvar alterações</button>
+ <button type="button" onClick={() => router.push(`/perfil/${user["id"]}`)} className="bg-white-HC-dark text-darkGray-HC-white-underline p-2 rounded-lg hover:bg-ice-HC-dark-hover mr-1 ">Voltar para perfil</button>
+ <button type="submit" className="bg-turquoise text-white-HC-dark-underline p-2 rounded-lg hover:bg-turquoise-hover ml-1 ">Salvar alterações</button>
</div>
</form>
</div>
diff --git a/src/app/editar/[id]/components/UpdatePassword.js b/src/app/editar/[id]/components/UpdatePassword.js
index 46852558..366525f3 100644
--- a/src/app/editar/[id]/components/UpdatePassword.js
+++ b/src/app/editar/[id]/components/UpdatePassword.js
@@ -76,18 +76,18 @@ export default function UpdatePassword({ user }) {
},
},
}}>
- <div className="flex flex-col justify-center bg-main p-5 rounded">
- <p className="text-xl justify-center flex text-main-text mb-2">Não foi possível alterar a senha</p>
+ <div className="flex flex-col justify-center bg-ice-HC-dark p-5 rounded">
+ <p className="text-xl justify-center flex text-darkGray-HC-white-underline mb-2">Não foi possível alterar a senha</p>
<div className="flex flex-row mt-2">
<button
- className=" text-sm p-2 mr-1 text-white border-main rounded-lg normal-case h-9 font-bold bg-secondary hover:bg-secondary-hover"
+ className=" text-sm p-2 mr-1 text-white-HC-dark-underline border-main rounded-lg normal-case h-9 font-bold bg-turquoise hover:bg-turquoise-hover"
onClick={() => router.push(`/perfil/${user["id"]}`)}
>
Voltar para perfil
</button>
<button
- className=" text-sm p-2 ml-1 text-main-text border-main rounded-lg normal-case h-9 font-bold bg-main hover:bg-main-hover"
+ className=" text-sm p-2 ml-1 text-darkGray-HC-white-underline border-main rounded-lg normal-case h-9 font-bold bg-ice-HC-dark hover:bg-ice-HC-dark-hover"
onClick={() => onClose()}
>
Tentar novamente
@@ -107,18 +107,18 @@ export default function UpdatePassword({ user }) {
},
},
}}>
- <div className="flex flex-col justify-center bg-main p-5 rounded">
- <p className="text-xl justify-center flex text-main-text mb-2">Senha alterada com sucesso!</p>
+ <div className="flex flex-col justify-center bg-ice-HC-dark p-5 rounded">
+ <p className="text-xl justify-center flex text-darkGray-HC-white-underline mb-2">Senha alterada com sucesso!</p>
<div className="flex flex-row mt-2">
<button
- className=" text-sm p-2 mr-1 text-white border-main rounded-lg normal-case h-9 font-bold bg-secondary hover:bg-secondary-hover"
+ className=" text-sm p-2 mr-1 text-white-HC-dark-underline border-main rounded-lg normal-case h-9 font-bold bg-turquoise hover:bg-turquoise-hover"
onClick={() => router.push(`/perfil/${user["id"]}`)}
>
Voltar para perfil
</button>
<button
- className=" text-sm p-2 ml-1 text-main-text border-main rounded-lg normal-case h-9 font-bold bg-main hover:bg-main-hover"
+ className=" text-sm p-2 ml-1 text-darkGray-HC-white-underline border-main rounded-lg normal-case h-9 font-bold bg-ice-HC-dark hover:bg-ice-HC-dark-hover"
onClick={() => onClose()}
>
Continuar editando
@@ -136,14 +136,14 @@ export default function UpdatePassword({ user }) {
<ModalSucess open={sucessOpen} onClose={() => { setSucessOpen(false) }} />
<form onSubmit={handleSubmit}>
<div className="mx-4 mt-8 flex flex-col">
- <label className=" text-xl text-main-text font-bold ">Alterar senha</label>
- <label className=" text-base text-main-text mt-4 ">Nova senha *</label>
+ <label className=" text-xl text-darkGray-HC-white-underline font-bold ">Alterar senha</label>
+ <label className=" text-base text-darkGray-HC-white-underline mt-4 ">Nova senha *</label>
<TextField
onChange={handleNew}
type="password"
className="w-[100%] mt-2"
/>
- <label className=" text-base text-main-text mt-4 ">Repita nova senha *</label>
+ <label className=" text-base text-darkGray-HC-white-underline mt-4 ">Repita nova senha *</label>
<TextField
onChange={handleRepeat}
type="password"
@@ -153,8 +153,8 @@ export default function UpdatePassword({ user }) {
</div>
<div className="flex justify-end mb-5 mr-4">
- <button type="button" onClick={() => router.push(`/perfil/${user["id"]}`)} className="bg-white text-main-text p-2 mt-5 rounded-lg hover:bg-main-hover mr-1 ">Voltar para perfil</button>
- <button type="submit" className="bg-secondary text-white p-2 mt-5 rounded-lg hover:bg-secondary-hover ml-1">Salvar nova senha</button>
+ <button type="button" onClick={() => router.push(`/perfil/${user["id"]}`)} className="bg-white-HC-dark text-darkGray-HC-white-underline p-2 mt-5 rounded-lg hover:bg-ice-HC-dark-hover mr-1 ">Voltar para perfil</button>
+ <button type="submit" className="bg-turquoise text-white-HC-dark-underline p-2 mt-5 rounded-lg hover:bg-turquoise-hover ml-1">Salvar nova senha</button>
</div>
</form>
diff --git a/src/app/editar/[id]/page.js b/src/app/editar/[id]/page.js
index 45d5ab47..bfecbb0a 100644
--- a/src/app/editar/[id]/page.js
+++ b/src/app/editar/[id]/page.js
@@ -43,7 +43,7 @@ export default function Edit({ params }) {
return (
<div className="flex justify-center pt-40">
- <p className="text-text-filter text-2xl">Só é possível editar o próprio usuário.</p>
+ <p className="text-darkGray-HC-white text-2xl">Só é possível editar o próprio usuário.</p>
</div>
)
}
diff --git a/src/app/entrar/components/LoginForm.js b/src/app/entrar/components/LoginForm.js
index d0b7d61c..ecc7fba4 100644
--- a/src/app/entrar/components/LoginForm.js
+++ b/src/app/entrar/components/LoginForm.js
@@ -102,7 +102,7 @@ export default function LoginForm({
<Button
fullWidth
disableElevation
- className="bg-secondary text-white hover:bg-secondary-hover normal-case font-bold py-2 rounded-md"
+ className="bg-turquoise text-white-HC-dark-underline hover:bg-turquoise-hover normal-case font-bold py-2 rounded-md"
type="submit"
alt="Entrar"
title="Entrar"
@@ -115,7 +115,7 @@ export default function LoginForm({
Esqueceu a senha?{" "}
<a
onClick={handleOpenModalPasswd}
- className="text-secondary cursor-pointer hover:font-bold"
+ className="text-turquoise-HC-underline cursor-pointer hover:font-bold"
alt="Esqueceu a senha?"
>
Clique aqui.
@@ -125,7 +125,7 @@ export default function LoginForm({
Não tem uma conta?{" "}
<a
onClick={handleOpenModalSignup}
- className="text-secondary hover:font-bold cursor-pointer"
+ className="text-turquoise-HC-underline hover:font-bold cursor-pointer"
alt="Cadastre-se"
>
Cadastre-se aqui.
@@ -141,14 +141,14 @@ export default function LoginForm({
fullWidth
disableElevation
variant="outlined"
- className="my-2 bg-white border-white text-[#B6CCCC] normal-case flex gap-2 w-96 font-bold"
+ className="my-2 bg-white-HC-dark border-white text-[#B6CCCC] normal-case flex gap-2 w-96 font-bold"
>
<span >Entrar com o</span>
<Image className="w-14 h-6" src="/govbr.svg" alt="govbr" width={10} height={10} />
</Button> */}
<button
onClick={() => router.push("/sobre")}
- className="text-secondary outline outline-1 outline-outlineColor lg:text-nowrap bg-white py-1 w-96 hover:bg-main-hover rounded cursor-pointer"
+ className="text-turquoise-HC-underline outline outline-1 outline-ice-HC-white lg:text-nowrap bg-white-HC-dark py-1 w-96 hover:bg-ice-HC-dark-hover rounded cursor-pointer"
alt="Entrar sem cadastrar"
>
Entrar sem cadastrar
@@ -158,7 +158,7 @@ export default function LoginForm({
fullWidth
disableElevation
variant="outlined"
- className="mt-2 bg-white border-white text-[#B6CCCC] normal-case flex gap-2 w-96"
+ className="mt-2 bg-white-HC-dark border-white text-[#B6CCCC] normal-case flex gap-2 w-96"
>
<Image className="w-6 h-6" src="/google.svg" width={10} height={10} alt="Google" />
<span>Entrar com o Google</span>
diff --git a/src/app/entrar/components/LoginInfo.js b/src/app/entrar/components/LoginInfo.js
index 5f940631..4090f441 100644
--- a/src/app/entrar/components/LoginInfo.js
+++ b/src/app/entrar/components/LoginInfo.js
@@ -58,16 +58,16 @@ export default function LoginInfo() {
return (
<div key={i} className={`bg-${card["color"]} py-4 rounded-xl m-2 grid justify-items-center`} style={{ width: '7em', height: '7em' }}>
<Image className={`w-14 h-14 ${card["name"] === "Contribua" && `rotate-180`}`} alt={card["name"]} style={{ filter: 'invert(100%)' }} src={card["icon"]} width={10} height={10} />
- <p className="text-white pt-1">{card["name"]}</p>
+ <p className="text-white-HC-dark-underline pt-1">{card["name"]}</p>
</div>
)
})}
</div>
</div>
- <h1 className="max-xl:hidden mb-10 text-lg max-lg:text-base text-main-text text-balance mt-10 text-center">
+ <h1 className="max-xl:hidden mb-10 text-lg max-lg:text-base text-darkGray-HC-white-underline text-balance mt-10 text-center">
Entre na MEC RED através do painel ao lado para saber mais.
</h1>
- <h1 className="xl:hidden mb-10 text-lg max-lg:text-base text-main-text text-balance mt-10 text-center">
+ <h1 className="xl:hidden mb-10 text-lg max-lg:text-base text-darkGray-HC-white-underline text-balance mt-10 text-center">
Entre na MEC RED através do painel acima para saber mais.
</h1>
</div>
diff --git a/src/app/entrar/components/PasswordModal.js b/src/app/entrar/components/PasswordModal.js
index db305f36..b7f7e870 100644
--- a/src/app/entrar/components/PasswordModal.js
+++ b/src/app/entrar/components/PasswordModal.js
@@ -70,9 +70,9 @@ export default function PasswordModal({ open, handleClose }) {
},
}}
>
- <Box className="bg-white p-5 flex flex-col items-center border-none rounded-xl">
+ <Box className="bg-white-HC-dark p-5 flex flex-col items-center border-none rounded-xl">
<div className="flex flex-row justify-between mb-2">
- <h1 className="text-secondary text-2xl font-bold m-2 mb-5 mr-4">Vamos encontrar sua conta</h1>
+ <h1 className="text-turquoise-HC-underline text-2xl font-bold m-2 mb-5 mr-4">Vamos encontrar sua conta</h1>
<CloseIcon onClick={handleClose} sx={{ color: "#6c8080", fontSize: "30px", marginTop:"5px" }} />
</div>
<div>
@@ -94,7 +94,7 @@ export default function PasswordModal({ open, handleClose }) {
<Button
fullWidth
disableElevation
- className="bg-secondary text-white hover:bg-secondary-hover"
+ className="bg-turquoise text-white-HC-dark-underline hover:bg-turquoise-hover"
onClick={() => handleSubmitPswd()}
alt="Enviar"
>
diff --git a/src/app/entrar/components/SignupModal.js b/src/app/entrar/components/SignupModal.js
index 85d2db35..23c24003 100644
--- a/src/app/entrar/components/SignupModal.js
+++ b/src/app/entrar/components/SignupModal.js
@@ -82,9 +82,9 @@ export default function SignupModal({ open, handleClose }) {
},
}}
>
- <Box className="bg-white sm:w-1/2 xl:w-1/4 p-5 flex flex-col items-center border-none rounded-xl">
+ <Box className="bg-white-HC-dark sm:w-1/2 xl:w-1/4 p-5 flex flex-col items-center border-none rounded-xl">
<div className="flex w-full">
- <h1 className="text-secondary text-center w-full flex-1 text-2xl font-bold m-5">Cadastre-se</h1>
+ <h1 className="text-turquoise-HC-underline text-center w-full flex-1 text-2xl font-bold m-5">Cadastre-se</h1>
<CloseIcon onClick={handleClose} sx={{ color: "#6c8080", fontSize: "30px", marginTop: "5px" }} className="" />
</div>
@@ -142,7 +142,7 @@ export default function SignupModal({ open, handleClose }) {
/>
</FormControl>
<div className="mb-4 ml-1">
- <p className="text-main-text text-sm">A senha deve ter no mínimo 8 caracteres.</p>
+ <p className="text-darkGray-HC-white-underline text-sm">A senha deve ter no mínimo 8 caracteres.</p>
</div>
<FormControl className="flex" variant="outlined">
<InputLabel htmlFor="outlined-adornment-password">Confirmar senha*</InputLabel>
@@ -185,20 +185,20 @@ export default function SignupModal({ open, handleClose }) {
<Button
fullWidth
disableElevation
- className="bg-secondary text-white hover:bg-secondary-hover"
+ className="bg-turquoise text-white-HC-dark-underline hover:bg-turquoise-hover"
type="submit"
alt="Enviar"
>
Enviar
</Button>
{/* <Divider flexItem className="mt-2">
- <p className="text-main-text text-base">OU</p>
+ <p className="text-darkGray-HC-white-underline text-base">OU</p>
</Divider> */}
{/* <Button
fullWidth
disableElevation
variant="outlined"
- className="mt-2 border-main text-main-text normal-case flex gap-2"
+ className="mt-2 border-main text-darkGray-HC-white-underline normal-case flex gap-2"
alt="Cadastrar-se com o Google"
>
<Image
diff --git a/src/app/equipe/components/personalCard.js b/src/app/equipe/components/personalCard.js
index 82851883..51150c9c 100644
--- a/src/app/equipe/components/personalCard.js
+++ b/src/app/equipe/components/personalCard.js
@@ -6,14 +6,14 @@ export default function PersonalCard(props) {
const [showDetails, setShowDetails] = useState(false);
return (
- <Card className="relative w-[315px] h-[480px] max-2xl:w-[290px] max-2xl:h-[450px] max-md:w-[250px] max-sm:w-[290px] text-text-filter bg-main overflow-y-auto scrollbar-none outline outline-1 outline-outlineColor pt-12">
+ <Card className="relative w-[315px] h-[480px] max-2xl:w-[290px] max-2xl:h-[450px] max-md:w-[250px] max-sm:w-[290px] text-darkGray-HC-white bg-ice-HC-dark overflow-y-auto scrollbar-none outline outline-1 outline-ice-HC-white pt-12">
{showDetails && (
- <div className="absolute inset-0 bg-main bg-opacity-70 flex flex-col gap-6 p-6 text-text-color z-10">
+ <div className="absolute inset-0 bg-ice-HC-dark bg-opacity-70 flex flex-col gap-6 p-6 text-darkGray-HC-white z-10">
<p className="font-bold ">{props.name}</p>
<p className="font-light">{props.info}</p>
<p className="font-light">{props.details}</p>
<button
- className="text-secondary text-left"
+ className="text-turquoise-HC-white-underline text-left"
onClick={() => setShowDetails(false)}
>
Voltar
@@ -30,12 +30,12 @@ export default function PersonalCard(props) {
className="h-[180px] w-[180px] hover:animate-bounce"
/>
</a>
- <p className="font-bold text-text-color">{props.name}</p>
- <p className="text-text-color font-light">{props.info}</p>
- <button className="text-blue-publish" onClick={() => setShowDetails(true)}>Ver detalhes</button>
+ <p className="font-bold text-darkGray-HC-white">{props.name}</p>
+ <p className="text-darkGray-HC-white font-light">{props.info}</p>
+ <button className="text-turquoise-HC-white-underline " onClick={() => setShowDetails(true)}>Ver detalhes</button>
</div>
- <div className="w-[90%] h-[1px] bg-gray-color my-5 self-center" />
+ <div className="w-[90%] h-[1px] bg-lightGray-HC-white my-5 self-center" />
<div className="flex flex-wrap gap-y-6 gap-x-16 max-md:gap-x-4 max-md:gap-y-4 max-sm:gap-x-16 max-sm:gap-y-6 mx-5 items-center mr-10 ">
{Object.entries(props.links).map(([key, value], index) => (
@@ -44,8 +44,8 @@ export default function PersonalCard(props) {
className="flex flex-row justify-center items-center cursor-pointer gap-2"
onClick={() => window.open(value, "_blank")}
>
- <div className="w-[20px] h-[20px] bg-gray-color rounded-full"></div>
- <span className="text-sm text-text-color">{key}</span>
+ <div className="w-[20px] h-[20px] bg-lightGray-HC-white rounded-full"></div>
+ <span className="text-sm text-darkGray-HC-white">{key}</span>
</div>
))}
</div>
diff --git a/src/app/equipe/components/teamCard.js b/src/app/equipe/components/teamCard.js
index 51e5aa0b..013f53b0 100644
--- a/src/app/equipe/components/teamCard.js
+++ b/src/app/equipe/components/teamCard.js
@@ -225,7 +225,7 @@ export default function TeamCard() {
return (
<div className="flex justify-center overflow-y-auto min-h-screen ml-8 mr-28 max-2xl:mr-8 max-xl:mx-4">
- <Card className="h-full w-full text-text-filter bg-white outline outline-1 outline-outlineColor py-16 rounded-xl">
+ <Card className="h-full w-full text-darkGray-HC-white bg-white-HC-dark outline outline-1 outline-ice-HC-white py-16 rounded-xl">
<div className="flex justify-center flex-col items-center gap-7 mx-36 max-lg:mx-20 max-sm:mx-6">
<p className="text-2xl font-bold max-sm:text-center">Equipe de Desenvolvedores</p>
<p className="text-xl font-light text-center">A partir de uma iniciativa do Ministério da Educação, surge em outubro de 2015 a proposta de
diff --git a/src/app/equipe/components/teamFilters.js b/src/app/equipe/components/teamFilters.js
index 735996bd..eba516ff 100644
--- a/src/app/equipe/components/teamFilters.js
+++ b/src/app/equipe/components/teamFilters.js
@@ -42,7 +42,7 @@ export default function TeamFilters({ filterState, setFilterState }) {
{atalhos.map((item, index) => (
<Button
key={index}
- className={activeButton === index ? "active bg-secondary text-white normal-case rounded-md w-20 h-10 text-base" : "bg-main text-base text-text-color normal-case rounded-md w-20 h-10"}
+ className={activeButton === index ? "active bg-turquoise-HC-white text-white-HC-dark-underline normal-case rounded-md w-20 h-10 text-base" : "bg-ice-HC-dark text-base text-darkGray-HC-white-underline hover:bg-lightGray-HC-white hover:text-darkGray-HC-dark normal-case rounded-md w-20 h-10 outline outline-1 outline-ice-HC-white"}
onClick={() => handleActiveButton(item, index)}
>
{item.title}
diff --git a/src/app/globals.css b/src/app/globals.css
index 68343f75..d3c95227 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -20,79 +20,70 @@
@layer base {
html {
- font-family: Inter;
- --main: #f5f9f9;
- --secondary: #00bacc;
- --blue-publish: #00bacc;
- --white: #ffffff;
- --orange: #ed6f24;
- --secondary-hover: #039eb7;
- --orange-hover: #de5518;
- --main-text: #858585;
- --publish-text: #858585;
- --main-text-click: #858585;
- --black-hover: #000100;
- --black-text: #000000;
- --violet: #56358c;
- --violet-hover: #410491;
- --pink: #e62954;
- --red: #dc2626;
- --navbar: #d8e6e6;
- --red-hover: #a11a1a;
- --red-publish: #dc2626;
- --text-color: #6C8080;
- --text-color-click: #6C8080;
- --main-hover: #dce1e1;
- --button-filters: #e1e8e8;
- --text-filter: #6c8080;
- --gray-color: #b9cccc;
- --outlineColor: #f5f5f5;
- --other-links: #374151;
- --underline: none;
- --grey-button: #dce1e1;
- --blue-button: #00bacc;
- --white-draw: #ffffff;
- --bg-comments: #d8e6e6;
- --fundo: linear-gradient(rgba(245, 249, 249, 0.7),
- rgba(245, 249, 249, 1)),
- url("/images/fundo.webp");
- --logo: url("/mecred.svg");
- --logo-square: url("/mecred_square.svg");
- --input-focus: #00bacc;
+ /*
+ Mudanças no esquema de cores do MECRED:
+ Os nomes das cores com "HC" significam 'High Contrast'
+ ou seja, depois da sigla "HC" será a cor presente
+ quando o alto contraste estiver ativo
+
+ Caso tenha "underline", significa o sublinhado para o modo alto contraste
+ */
- /* HC refere-se ao alto contraste*/
- /*--ice-HC-dark: #f5f9f9;
+ font-family: Inter;
+ --invert: invert(1);
+ --ice: #f5f9f9;
+ --ice-HC-dark: #f5f9f9;
--ice-HC-white: #f5f9f9;
- --ice-HC-gray: #dce1e1;
+ --ice-HC-gray: #d8e6e6;
--turquoise: #00bacc;
+ --turquoise-HC-white: #00bacc;
+ --turquoise-HC-white-underline: #00bacc;
--turquoise-HC-underline: #00bacc;
--turquoise-HC-dark: #00bacc;
+ --turquoise-HC-dark-underline: #00bacc;
--darkTurquoise-HC-gray: #039eb7;
+ --darkTurquoise-HC-white: #039eb7;
+ --darkTurquoise-HC-dark: #039eb7;
+ --white: #ffffff;
+ --white-HC-underline: #ffffff;
--white-HC-dark: #ffffff;
--white-HC-dark-underline: #ffffff;
--orange: #ed6f24;
--darkOrange-HC-gray: #de5518;
+ --darkOrange-HC-dark: #de5518;
+ --darkGray-HC-dark: #6c8080;
--darkGray-HC-white: #6c8080;
--darkGray-HC-white-underline: #6c8080;
+ --darkGray-HC-dark: #6c8080;
+ --darkGray-HC-dark-underline: #6c8080;
+ --black: #000000;
--black-HC-gray: #000000;
--black-HC-white: #000000;
+ --black-HC-white-underline: #000000;
--violet: #56358c;
+ --violet-HC-white: #56358c;
+ --orange: #ed6f24;
+ --orange-HC-white: #ed6f24;
--darkViolet-HC-gray: #37215a;
--pink: #e62954;
+ --pink-HC-white: #e62954;
--darkPink-HC-gray: #A01C3A;
--lightGray: #d8e6e6;
+ --lightGray-HC-dark: #d8e6e6;
--lightGray-HC-white: #d8e6e6;
--red-HC-white: #dc2626;
--mediumGray-HC-white: #b9cccc;
+ --mediumGray-HC-dark: #b9cccc;
--underline: none;
--lightGray-HC-dark: #d8e6e6;
- --background: linear-gradient(rgba(245, 249, 249, 0.7),
+ --fundo: linear-gradient(rgba(245, 249, 249, 0.7),
rgba(245, 249, 249, 1)),
url("/images/fundo.webp");
--logo: url("/mecred.svg");
--logo-square: url("/mecred_square.svg");
- --input-focus: #00bacc;*/
+ --input-focus: #00bacc;
+ --filter: none;
--font-size-xs-default: 12px;
@@ -221,10 +212,10 @@
@import "themes/tema_especial.css";
}
-/* .text-main-text {
+/*.text-darkGray-HC-white-underline {
text-decoration: no-underline;
}
-.text-white {
+.text-white-HC-dark-underline {
text-decoration: no-underline;
-} */
\ No newline at end of file
+}*/
\ No newline at end of file
diff --git a/src/app/not-found.js b/src/app/not-found.js
index a00af443..8e982b2e 100644
--- a/src/app/not-found.js
+++ b/src/app/not-found.js
@@ -8,9 +8,9 @@ export default function Error(){
<Overlay>
<div className="flex justify-center items-center mt-72 flex-col">
- <p className="text-8xl text-text-filter font-bold">404</p>
- <p className="text-text-filter text-xl font-semibold">Página não encontrada</p>
- <button onClick={() => router.push("/")} className="mt-4 bg-secondary text-lg text-white p-2 px-4 rounded-lg hover:bg-secondary-hover">Voltar para página inicial</button>
+ <p className="text-8xl text-darkGray-HC-white font-bold">404</p>
+ <p className="text-darkGray-HC-white text-xl font-semibold">Página não encontrada</p>
+ <button onClick={() => router.push("/")} className="mt-4 bg-turquoise text-lg text-white-HC-dark-underline p-2 px-4 rounded-lg hover:bg-turquoise-hover">Voltar para página inicial</button>
</div>
</Overlay>
)
diff --git a/src/app/novaSenha/page.js b/src/app/novaSenha/page.js
index ef30a571..e4ffa7aa 100644
--- a/src/app/novaSenha/page.js
+++ b/src/app/novaSenha/page.js
@@ -97,10 +97,10 @@ export default function ResetPassword() {
<div className="grid grid-cols-1 h-screen">
<div className="flex flex-col justify-center items-center">
<div className="my-10 mx-10">
- <h1 className="text-3xl max-lg:text-xl font-bold text-secondary my-10 text-center">
+ <h1 className="text-3xl max-lg:text-xl font-bold text-turquoise-HC-underline my-10 text-center">
Digite sua nova senha
</h1>
- <h1 className="text-lg max-lg:text-base text-main-text text-balance mb-5 text-center">
+ <h1 className="text-lg max-lg:text-base text-darkGray-HC-white-underline text-balance mb-5 text-center">
Assim que sua senha for alterada com sucesso você será redirecionado para o login
</h1>
</div>
@@ -123,7 +123,7 @@ export default function ResetPassword() {
</Alert>
) : null}
<div className="mb-4 ml-1">
- <p className="text-main-text text-sm">A senha deve ter no mínimo 8 caracteres.</p>
+ <p className="text-darkGray-HC-white-underline text-sm">A senha deve ter no mínimo 8 caracteres.</p>
</div>
{/* Campo de Nova Senha */}
<div className="w-full mb-6">
@@ -179,7 +179,7 @@ export default function ResetPassword() {
<Button
fullWidth
disableElevation
- className="bg-secondary text-white hover:bg-secondary-hover"
+ className="bg-turquoise text-white-HC-dark-underline hover:bg-turquoise-hover"
type="submit"
alt="Trocar a senha"
>
diff --git a/src/app/perfil/[id]/components/AboutCard.js b/src/app/perfil/[id]/components/AboutCard.js
index cbd6ec09..4d1736bd 100644
--- a/src/app/perfil/[id]/components/AboutCard.js
+++ b/src/app/perfil/[id]/components/AboutCard.js
@@ -10,11 +10,11 @@ const AboutCard = ({ content }) => {
return (
- <div className=" min-w-[200px] overflow-hidden transition-height bg-white max-sm:pb-10 ">
+ <div className=" min-w-[200px] overflow-hidden transition-height bg-white-HC-dark max-sm:pb-10 ">
<div className='p-4 rounded-md min-w-[200px] min-h-[180px] ' >
{content ?
<div id="content" className="content pt-2 px-2">
- <p className={` text-base text-main-text `}>{content}</p>
+ <p className={` text-base text-darkGray-HC-white-underline `}>{content}</p>
</div>
:
<NotFound name="descrição" />
diff --git a/src/app/perfil/[id]/components/CardsComplaints.js b/src/app/perfil/[id]/components/CardsComplaints.js
index df97cb4b..78e1cf17 100644
--- a/src/app/perfil/[id]/components/CardsComplaints.js
+++ b/src/app/perfil/[id]/components/CardsComplaints.js
@@ -13,7 +13,7 @@ export default function CardsComplaints({ item, key}) {
return (
<Card
- className="transition bg-white outline outline-1 outline-outlineColor items-center mt-5 mx-2 min-h-[320px]"
+ className="transition bg-white-HC-dark outline outline-1 outline-ice-HC-white items-center mt-5 mx-2 min-h-[320px]"
variant="outlined"
sx={{
display: "flex",
@@ -38,7 +38,7 @@ export default function CardsComplaints({ item, key}) {
<CardHeader
className="self-start flex-shrink h-[100px]"
title={
- <Typography variant="body2" color="" className="line-clamp-2 text-main-text font-bold">
+ <Typography variant="body2" color="" className="line-clamp-2 text-darkGray-HC-white-underline font-bold">
{item[0]?.name}
</Typography>
}
@@ -47,15 +47,15 @@ export default function CardsComplaints({ item, key}) {
<Typography
variant="body2"
color="text.secondary"
- className="line-clamp-1 text-text-color font-light"
+ className="line-clamp-1 text-darkGray-HC-white font-light"
>
{item[0]?.name}
</Typography>
</>
}
/>
- <div className="hover:bg-main-hover flex items-end rounded-lg">
- <Button className="text-text-color font-light"
+ <div className="hover:bg-ice-HC-dark-hover flex items-end rounded-lg">
+ <Button className="text-darkGray-HC-white-underline font-light"
alt='Avaliar'
onClick={() => window.open(location.protocol + `//` + location.host + `/recurso/${item[0]?.learning_object_id}`)}
>
diff --git a/src/app/perfil/[id]/components/CardsHomologation.js b/src/app/perfil/[id]/components/CardsHomologation.js
index ae7529cc..b95ca213 100644
--- a/src/app/perfil/[id]/components/CardsHomologation.js
+++ b/src/app/perfil/[id]/components/CardsHomologation.js
@@ -54,7 +54,7 @@ export default function CardsHomologation({ item, key, tag }) {
return (
<Card
- className="transition bg-white outline outline-1 outline-outlineColor items-center mt-5 mx-2 min-h-[320px]"
+ className="transition bg-white-HC-dark outline outline-1 outline-ice-HC-white items-center mt-5 mx-2 min-h-[320px]"
variant="outlined"
sx={{
display: "flex",
@@ -66,7 +66,7 @@ export default function CardsHomologation({ item, key, tag }) {
key={key}
>
{tag ?
- <div className="text-main text-xs p-1 bg-red rounded-full flex justify-start"><div>Denúncia</div></div>
+ <div className="text-ice-HC-dark text-xs p-1 bg-red rounded-full flex justify-start"><div>Denúncia</div></div>
:
null
}
@@ -105,7 +105,7 @@ export default function CardsHomologation({ item, key, tag }) {
</Link>
}
title={
- <Typography variant="body2" color="" className="line-clamp-2 text-main-text font-bold">
+ <Typography variant="body2" color="" className="line-clamp-2 text-darkGray-HC-white-underline font-bold">
{ tag ? item[0]?.name : item["learning_object"]["name"]}
</Typography>
}
@@ -114,16 +114,16 @@ export default function CardsHomologation({ item, key, tag }) {
<Typography
variant="body2"
color="text.secondary"
- className="line-clamp-1 text-text-color font-light"
+ className="line-clamp-1 text-darkGray-HC-white-underline font-light"
>
{tag ? item[0]?.name : item["submitter"]["name"]}
</Typography>
</>
}
/>
- <div className="hover:bg-main-hover flex items-end rounded-lg">
+ <div className="hover:bg-ice-HC-dark-hover flex items-end rounded-lg">
<Button
- className="text-text-color font-light border-2 border-outlineColor"
+ className="text-darkGray-HC-white-underline font-light border-2 border-ice-HC-white"
variant='outlined'
alt='Avaliar'
onClick={() => window.open(location.protocol + `//` + location.host + `/recurso/${item["learning_object"]["id"]}`)}
diff --git a/src/app/perfil/[id]/components/CreateCollectionModal.js b/src/app/perfil/[id]/components/CreateCollectionModal.js
index 0f1eb557..b10a63a7 100644
--- a/src/app/perfil/[id]/components/CreateCollectionModal.js
+++ b/src/app/perfil/[id]/components/CreateCollectionModal.js
@@ -21,11 +21,11 @@ const ModalSuccess = ({ open, onClose, modalOnClose }) => {
},
},
}}>
- <div className="flex flex-col justify-center items-center bg-main gap-3 px-4 py-10 pt-12 rounded">
- <p className="text-xl justify-center flex text-main-text">Coleção criada com Successo!</p>
+ <div className="flex flex-col justify-center items-center bg-ice-HC-dark gap-3 px-4 py-10 pt-12 rounded">
+ <p className="text-xl justify-center flex text-darkGray-HC-white-underline">Coleção criada com Successo!</p>
<div className="flex flex-row mt-5">
<button
- className=" text-sm p-2 mr-1 text-white border-main rounded-lg normal-case h-9 w-24 font-bold bg-secondary hover:bg-secondary-hover"
+ className=" text-sm p-2 mr-1 text-white-HC-dark-underline border-main rounded-lg normal-case h-9 w-24 font-bold bg-turquoise hover:bg-turquoise-hover"
onClick={() => { onClose(); modalOnClose() }}
>
Fechar
@@ -97,9 +97,9 @@ export default function CreateCollectionModal({ open, onClose, idLogin }) {
},
}}
>
- <div className="flex flex-col bg-main p-5 rounded-lg w-[40%] max-sm:w-[85%]">
- <div className="text-2xl items-center font-bold text-main-text">Criar Coleção</div>
- <p className="text-lg text-main-text font-bold mb-1 mt-4">Nome da Coleção*</p>
+ <div className="flex flex-col bg-ice-HC-dark p-5 rounded-lg w-[40%] max-sm:w-[85%]">
+ <div className="text-2xl items-center font-bold text-darkGray-HC-white-underline">Criar Coleção</div>
+ <p className="text-lg text-darkGray-HC-white-underline font-bold mb-1 mt-4">Nome da Coleção*</p>
<form onSubmit={handleSubmit}>
<TextField
size="small"
@@ -110,7 +110,7 @@ export default function CreateCollectionModal({ open, onClose, idLogin }) {
error={name.length > 150}
required
/>
- <p className="text-lg text-main-text font-bold mb-3 mt-4">Esta coleção é:</p>
+ <p className="text-lg text-darkGray-HC-white-underline font-bold mb-3 mt-4">Esta coleção é:</p>
<FormLabel >
<RadioGroup name="privacy-radio-group">
<FormControlLabel
@@ -127,14 +127,14 @@ export default function CreateCollectionModal({ open, onClose, idLogin }) {
</FormLabel>
<div className="flex flex-row-reverse justify-center space-x-2">
<button
- className=" border text-sm p-2 text-main border-main rounded-lg normal-case h-9 font-bold bg-secondary hover:bg-secondary-hover"
+ className=" border text-sm p-2 text-ice-HC-dark border-main rounded-lg normal-case h-9 font-bold bg-turquoise-HC-white hover:bg-darkTurquoise-HC-dark hover:text-white"
type="submit"
alt='Criar Coleção'
>
Criar Coleção
</button>
<button
- className=" border- text-sm p-2 text-main-text border-main rounded-lg normal-case h-9 font-bold bg-main hover:bg-main-hover"
+ className=" border- text-sm p-2 text-darkGray-HC-white-underline border-main rounded-lg normal-case h-9 font-bold bg-ice-HC-dark hover:bg-ice-HC-dark-hover"
onClick={() => onClose()}
alt='Cancelar'
>
diff --git a/src/app/perfil/[id]/components/EditCollectionModal.js b/src/app/perfil/[id]/components/EditCollectionModal.js
index 199eaf2d..cf231bcf 100644
--- a/src/app/perfil/[id]/components/EditCollectionModal.js
+++ b/src/app/perfil/[id]/components/EditCollectionModal.js
@@ -60,11 +60,11 @@ export default function EditCollectionModal({ open, onClose, collectionId, colle
},
},
}}>
- <div className="flex flex-col justify-center items-center bg-main gap-3 px-4 py-10 pt-12 rounded">
- <p className="text-xl justify-center flex text-main-text">Coleção atualizada com Successo!</p>
+ <div className="flex flex-col justify-center items-center bg-ice-HC-dark gap-3 px-4 py-10 pt-12 rounded">
+ <p className="text-xl justify-center flex text-darkGray-HC-white-underline">Coleção atualizada com Successo!</p>
<div className="flex flex-row mt-5">
<button
- className=" text-sm p-2 mr-1 text-white border-main rounded-lg normal-case h-9 w-24 font-bold bg-secondary hover:bg-secondary-hover"
+ className=" text-sm p-2 mr-1 text-white-HC-dark-underline border-main rounded-lg normal-case h-9 w-24 font-bold bg-turquoise hover:bg-turquoise-hover"
onClick={() => { onClose(); modalOnClose() }}
>
Fechar
@@ -84,9 +84,9 @@ export default function EditCollectionModal({ open, onClose, collectionId, colle
},
},
}}>
- <div className="flex flex-col bg-main p-5 rounded-lg w-[40%] max-sm:w-[85%]">
- <div className="text-2xl font-bold text-main-text">Editar Coleção</div>
- <p className="text-lg text-main-text font-bold mb-1 mt-4">Nome da Coleção*</p>
+ <div className="flex flex-col bg-ice-HC-dark p-5 rounded-lg w-[40%] max-sm:w-[85%]">
+ <div className="text-2xl font-bold text-darkGray-HC-white-underline">Editar Coleção</div>
+ <p className="text-lg text-darkGray-HC-white-underline font-bold mb-1 mt-4">Nome da Coleção*</p>
<form onSubmit={handleSubmit}>
<TextField
size="small"
@@ -95,7 +95,7 @@ export default function EditCollectionModal({ open, onClose, collectionId, colle
value={name}
required
/>
- <p className="text-lg text-main-text font-bold mb-3 mt-4">Esta coleção é:</p>
+ <p className="text-lg text-darkGray-HC-white-underline font-bold mb-3 mt-4">Esta coleção é:</p>
<FormLabel>
<RadioGroup value={privacy} onChange={(e) => setPrivacy(e.target.value)}>
<FormControlLabel value="public" control={<Radio />} label="Coleção Pública" />
@@ -104,14 +104,14 @@ export default function EditCollectionModal({ open, onClose, collectionId, colle
</FormLabel>
<div className="flex flex-row-reverse justify-center space-x-2">
<button
- className="border text-sm p-2 text-main border-main rounded-lg normal-case h-9 font-bold bg-secondary hover:bg-secondary-hover"
+ className="border text-sm p-2 text-ice-HC-dark border-main rounded-lg normal-case h-9 font-bold bg-turquoise hover:bg-turquoise-hover"
type="button" // Alterado para "button"
onClick={handleSubmit} // Chama a função diretamente no onClick
>
Salvar Alterações
</button>
<button
- className="border text-sm p-2 text-main-text border-main rounded-lg normal-case h-9 font-bold bg-main hover:bg-main-hover"
+ className="border text-sm p-2 text-darkGray-HC-white-underline border-main rounded-lg normal-case h-9 font-bold bg-ice-HC-dark hover:bg-ice-HC-dark-hover"
onClick={onClose}
>
Cancelar
diff --git a/src/app/perfil/[id]/components/FollowersCards.js b/src/app/perfil/[id]/components/FollowersCards.js
index 12523e82..33819806 100644
--- a/src/app/perfil/[id]/components/FollowersCards.js
+++ b/src/app/perfil/[id]/components/FollowersCards.js
@@ -78,7 +78,7 @@ export default function FollowersCards({ id, count }) {
className="mb-2 border-hidden hover:bg-transparent rounded-xl normal-case"
onClick={toggleContent}
>
- <p className="hover:bg-main px-4 pb-4 text-other-links text-lg rounded-md">
+ <p className="hover:bg-ice-HC-dark px-4 pb-4 text-darkGray-HC-white text-lg rounded-md">
Ver mais...
</p>
</Button>
diff --git a/src/app/perfil/[id]/components/FollowingCards.js b/src/app/perfil/[id]/components/FollowingCards.js
index 1b93226d..b04101d7 100644
--- a/src/app/perfil/[id]/components/FollowingCards.js
+++ b/src/app/perfil/[id]/components/FollowingCards.js
@@ -78,7 +78,7 @@ export default function FollowingCards({ id, count }) {
className="mb-2 border-hidden hover:bg-transparent rounded-xl normal-case"
onClick={toggleContent}
>
- <p className="hover:bg-main px-4 pb-4 text-other-links text-lg rounded-md">
+ <p className="hover:bg-ice-HC-dark px-4 pb-4 text-darkGray-HC-white text-lg rounded-md">
Ver mais...
</p>
</Button>
diff --git a/src/app/perfil/[id]/components/GroupButton.js b/src/app/perfil/[id]/components/GroupButton.js
index a5cd1e3e..df933706 100644
--- a/src/app/perfil/[id]/components/GroupButton.js
+++ b/src/app/perfil/[id]/components/GroupButton.js
@@ -92,12 +92,12 @@ export default function GroupButton({ profileData, idLogin }) {
},
},
}}>
- <div className="flex flex-col justify-center bg-main p-5 rounded">
- <p className="text-xl justify-center flex text-main-text mb-2">O usuário já foi denunciado!</p>
+ <div className="flex flex-col justify-center bg-ice-HC-dark p-5 rounded">
+ <p className="text-xl justify-center flex text-darkGray-HC-white-underline mb-2">O usuário já foi denunciado!</p>
<div className="flex flex-row justify-center mt-2">
<button
- className=" text-sm p-2 mr-1 text-main-text border-main rounded-lg normal-case h-9 font-bold bg-white hover:bg-main-hover"
+ className=" text-sm p-2 mr-1 text-darkGray-HC-white-underline border-main rounded-lg normal-case h-9 font-bold bg-white-HC-dark hover:bg-ice-HC-dark-hover"
onClick={onClose}
>
Ok
@@ -114,7 +114,7 @@ export default function GroupButton({ profileData, idLogin }) {
<div className='flex flex-row gap-4 max-sm:flex-col max-sm:items-center' >
{idLogin == profileData["id"] ?
<button
- className={`text-[16px] rounded-[10px] normal-case h-10 font-bold w-48 text-white bg-secondary hover:bg-secondary-hover `}
+ className={`text-[16px] rounded-[10px] normal-case h-10 font-bold w-48 text-white-HC-dark-underline hover:text-white bg-turquoise-HC-white hover:bg-darkTurquoise-HC-dark outline outline-1 outline-ice-HC-white `}
alt="Editar meu perfil"
onClick={() => router.push(`/editar/${idLogin}`)}
>
@@ -123,7 +123,7 @@ export default function GroupButton({ profileData, idLogin }) {
</button>
:
<button
- className={`text-[16px] rounded-[10px] normal-case h-10 font-semibold w-44 pr-2 text-white ${follow ? "bg-secondary hover:bg-secondary-hover" : " bg-secondary hover:bg-secondary-hover"} `}
+ className={`text-[16px] rounded-[10px] normal-case h-10 font-semibold w-44 pr-2 text-white-HC-dark-underline hover:text-white outline outline-1 outline-ice-HC-white ${follow ? "bg-turquoise-HC-white hover:bg-darkTurquoise-HC-dark hover:text-white" : " bg-turquoise-HC-white hover:bg-darkTurquoise-HC-dark"} `}
onClick={() => followHandler()}
>
{follow ? <CheckIcon className='m-1' fontSize='small' /> : <PersonAddIcon className='m-1' fontSize='small' />}
@@ -135,7 +135,7 @@ export default function GroupButton({ profileData, idLogin }) {
<div >
{idLogin !== profileData["id"] &&
<button
- className=" text-[16px] hover:bg-transparent hover:text-red text-main-text rounded-[10px] normal-case h-10 font-bold "
+ className=" text-[16px] hover:bg-transparent hover:text-red-HC-white text-darkGray-HC-white-underline rounded-[10px] normal-case h-10 font-bold"
onClick={() => {
if (!loginBarrier()) return;
if (complained) {
diff --git a/src/app/perfil/[id]/components/MedalAchievements.js b/src/app/perfil/[id]/components/MedalAchievements.js
index e51a1f0a..0a6cdfad 100644
--- a/src/app/perfil/[id]/components/MedalAchievements.js
+++ b/src/app/perfil/[id]/components/MedalAchievements.js
@@ -9,7 +9,7 @@ export default function MedalAchievements({ items }) {
{items?.map((avatar, index) =>
avatar.being_used && (
<div key={index} className="flex shrink-0 flex-row relative">
- <img src="/medalha-exibicao-da-conquista.svg" alt="medal" className=" flex w-[69px] h-[92px] max-sm:w-[50px]" />
+ <img src="/medalha-exibicao-da-conquista.svg" alt="medal" className=" flex w-[69px] h-[92px] max-sm:w-[50px] invertLogo-HC-white" />
<Avatar
className="w-[57px] h-[55px] max-sm:w-[40px] max-sm:h-[40px] max-sm:top-4 max-sm:right absolute top-1.5 right-1.5 "
key={avatar.item ? avatar.name : null}
diff --git a/src/app/perfil/[id]/components/NotFound.js b/src/app/perfil/[id]/components/NotFound.js
index b0c9ced7..381cf5f3 100644
--- a/src/app/perfil/[id]/components/NotFound.js
+++ b/src/app/perfil/[id]/components/NotFound.js
@@ -1,7 +1,7 @@
export default function NotFound({ name }) {
return (
<div className="flex justify-center min-h-[180px]">
- <p className="pt-12 text-text-filter text-lg">{name === "Seguindo" ? `O usuário não segue ninguém ainda.` : `O usuário não possui ${name}`}</p>
+ <p className="pt-12 text-darkGray-HC-white text-lg">{name === "Seguindo" ? `O usuário não segue ninguém ainda.` : `O usuário não possui ${name}`}</p>
</div>
)
}
\ No newline at end of file
diff --git a/src/app/perfil/[id]/components/ProfileAchievements.js b/src/app/perfil/[id]/components/ProfileAchievements.js
index c1d5e3d1..bc19c80a 100644
--- a/src/app/perfil/[id]/components/ProfileAchievements.js
+++ b/src/app/perfil/[id]/components/ProfileAchievements.js
@@ -16,8 +16,8 @@ export default function ProfileAchievements({ achievements }) {
{/* Cards de conquistas e progressos do usuário */}
{achievements?.map((e, index) => (
- <div key={index} className={`flex bg-main mt-3 2xl:w-[450px] w-[400px] max-lg:w-[290px] rounded-2xl outline outline-1 outline-outlineColor ${e.achievement?.state === "active" ? "h-[225px]" : "h-[175px]"}`}>
- <div className="flex flex-col w-full text-base text-text-filter pl-5 space-y-5 content-around px-5">
+ <div key={index} className={`flex bg-ice-HC-dark mt-3 2xl:w-[450px] w-[400px] max-lg:w-[290px] rounded-2xl outline outline-1 outline-ice-HC-white ${e.achievement?.state === "active" ? "h-[225px]" : "h-[175px]"}`}>
+ <div className="flex flex-col w-full text-base text-darkGray-HC-white pl-5 space-y-5 content-around px-5">
{/* Verifica se é uma conquista ou progresso */}
{e.achievement?.name ? (
<>
@@ -28,8 +28,8 @@ export default function ProfileAchievements({ achievements }) {
) : null}
{/* Barra de progresso */}
- <div className={`${e.requirement?.description ? "mt-10" : ""} bg-gray-color rounded-full space-y-5`}>
- <div className="text-text-filter h-[10px] bg-[#00BACC] leading-none rounded-full space-y-5"
+ <div className={`${e.requirement?.description ? "mt-10" : ""} bg-lightGray-HC-white rounded-full space-y-5`}>
+ <div className="text-darkGray-HC-white h-[10px] bg-turquoise-HC-white leading-none rounded-full space-y-5"
style={{
width: `${e.achievement?.state === "active"
? 100
diff --git a/src/app/perfil/[id]/components/ProfileAchievementsMenu.js b/src/app/perfil/[id]/components/ProfileAchievementsMenu.js
index 1664abde..5b9f3379 100644
--- a/src/app/perfil/[id]/components/ProfileAchievementsMenu.js
+++ b/src/app/perfil/[id]/components/ProfileAchievementsMenu.js
@@ -33,10 +33,10 @@ export default function ProfileAchievementsMenu({profileData, achievements, prog
<div className="flex flex-row max-xl:flex-col mt-5">
<div className="flex flex-col max-xl:flex-row max-xl:flex-nowrap mt-3 max-xl:overflow-x-auto max-lg:scrollbar-none items-center ml-4 gap-[19px] max-xl:animate-scrollHint scrollbar-none max-lg:m-5">
{menuAchievements.map((itens, index) => (
- <div key={index} className="flex flex-col text-main-text max-xl:p-0.5">
+ <div key={index} className="flex flex-col text-darkGray-HC-white-underline max-xl:p-0.5">
<button
- className={`flex w-[276px] h-[54px] max-md:w-[125px] max-xl:h-[45px] max-xl:w-[150px] justify-center items-center rounded-[10px] text-base font-bold transition-all outline outline-1 outline-outlineColor
- ${selectedMenu === itens ? "bg-secondary hover:bg-secondary-hover text-white" : "bg-bg-comments text-text-filter hover:bg-text-filter hover:text-white"} `}
+ className={`flex w-[276px] h-[54px] max-md:w-[125px] max-xl:h-[45px] max-xl:w-[150px] justify-center items-center rounded-[10px] text-base font-bold transition-all outline outline-1 outline-ice-HC-white
+ ${selectedMenu === itens ? "bg-turquoise-HC-white hover:bg-darkTurquoise-HC-dark text-white-HC-dark-underline hover:text-white" : "bg-lightGray-HC-dark text-darkGray-HC-white hover:bg-darkGray-HC-white hover:text-white-HC-dark-underline"} `}
onClick={() => setSelectedMenu(itens)}
>{itens}</button>
</div>
diff --git a/src/app/perfil/[id]/components/ProfileCollections.js b/src/app/perfil/[id]/components/ProfileCollections.js
index 12f50e0a..3d356f8f 100644
--- a/src/app/perfil/[id]/components/ProfileCollections.js
+++ b/src/app/perfil/[id]/components/ProfileCollections.js
@@ -17,11 +17,11 @@ import ShareButton from "@/app/components/ShareButton";
const ModalSucess = ({ open, onClose, modalOnClose }) => {
return (
<Modal open={open} onClose={onClose} className="grid place-items-center">
- <div className="flex flex-col justify-center items-center bg-main p-8 pt-10 rounded">
- <p className="text-xl justify-center flex text-main-text mb-2">Coleção deletada com sucesso!</p>
+ <div className="flex flex-col justify-center items-center bg-ice-HC-dark p-8 pt-10 rounded">
+ <p className="text-xl justify-center flex text-darkGray-HC-white-underline mb-2">Coleção deletada com sucesso!</p>
<div className="flex flex-row mt-2">
<button
- className=" text-sm p-2 ml-1 text-main-text border-main rounded-lg normal-case h-9 font-bold bg-main hover:bg-main-hover"
+ className=" text-sm p-2 ml-1 text-darkGray-HC-white-underline border-main rounded-lg normal-case h-9 font-bold bg-ice-HC-dark hover:bg-ice-HC-dark-hover"
onClick={() => { onClose(); modalOnClose() }}
>
Fechar
@@ -155,15 +155,15 @@ export default function ProfileCollections({ id, idLogin }) {
},
}}
>
- <div className="bg-main p-5 rounded-lg">
+ <div className="bg-ice-HC-dark p-5 rounded-lg">
<div className="flex flex-col justify-center ">
- <p className="flex justify-center text-xl text-main-text font-bold">Deletar coleção</p>
- <p className="pt-3 text-lg text-main-text ">Tem certeza que deseja deletar essa coleção?</p>
+ <p className="flex justify-center text-xl text-darkGray-HC-white-underline font-bold">Deletar coleção</p>
+ <p className="pt-3 text-lg text-darkGray-HC-white-underline ">Tem certeza que deseja deletar essa coleção?</p>
</div>
<div className="flex justify-end mt-4">
- <button onClick={onClose} className="bg-main p-2 rounded-lg hover:bg-main-hover text-main-text mr-1">Voltar ao perfil</button>
- <button onClick={handleDelete} className="bg-secondary p-2 rounded-lg hover:bg-secondary-hover text-white ml-1">Confirmar</button>
+ <button onClick={onClose} className="bg-ice-HC-dark p-2 rounded-lg hover:bg-ice-HC-dark-hover text-darkGray-HC-white-underline mr-1">Voltar ao perfil</button>
+ <button onClick={handleDelete} className="bg-turquoise p-2 rounded-lg hover:bg-turquoise-hover text-white-HC-dark-underline ml-1">Confirmar</button>
</div>
</div>
@@ -179,7 +179,7 @@ export default function ProfileCollections({ id, idLogin }) {
<CreateCollectionModal open={collectionOpen} onClose={() => setCollectionOpen(false)} idLogin={idLogin} />
{idLogin === id && (
<button
- className="inline-block px-2 text-sm text-main border-main rounded-lg normal-case h-9 font-bold bg-secondary hover:bg-secondary-hover"
+ className="inline-block px-2 text-sm border-main rounded-lg normal-case h-9 text-ice-HC-dark font-bold bg-turquoise-HC-white hover:bg-darkTurquoise-HC-dark hover:text-white outline outline-1 outline-ice-HC-white"
onClick={() => setCollectionOpen(true)}
alt="Criar Coleção"
>
@@ -195,16 +195,16 @@ export default function ProfileCollections({ id, idLogin }) {
) : (
<div className="justify-center mt-5">
{collections.map((item, index) => (
- <div key={index} className="bg-white outline outline-1 outline-outlineColor mb-10 pt-6 px-4 rounded-2xl relative">
+ <div key={index} className="bg-white-HC-dark outline outline-1 outline-ice-HC-white mb-10 pt-6 px-4 rounded-2xl relative">
{/* Cabeçalho com título, autor e botões */}
<div className="flex justify-between items-start">
{/* Título e autor */}
<div className="flex flex-col">
- <p className="text-2xl font-bold mb-1 text-text-color hover:underline">
+ <p className="text-2xl font-bold mb-1 text-darkGray-HC-white hover:underline">
<Link href={`/colecao/${item.id}`}>{item.name}</Link>
</p>
- <p className="ml-1 text-text-color">
+ <p className="ml-1 text-darkGray-HC-white">
por <Link className="hover:underline" href={`/perfil/${item.owner.id}`}>{item.owner.name}</Link>
</p>
</div>
@@ -219,7 +219,7 @@ export default function ProfileCollections({ id, idLogin }) {
<div className="flex gap-4"> {/* Adiciona um espaçamento entre os botões */}
{/* Botão de Editar */}
<button
- className="px-3 py-2 text-sm rounded-xl outline outline-2 outline-outlineColor bg-main hover:bg-main-hover text-text-filter font-bold normal-case max-md:my-3 flex justify-center items-center gap-2 md:px-3 md:py-2"
+ className="px-3 py-2 text-sm rounded-xl outline outline-2 outline-ice-HC-white bg-ice-HC-dark hover:bg-ice-HC-dark-hover text-darkGray-HC-white font-bold normal-case max-md:my-3 flex justify-center items-center gap-2 md:px-3 md:py-2"
onClick={() => setEditOpen(true)}
aria-label="Editar" // Texto para leitores de tela
>
@@ -229,7 +229,7 @@ export default function ProfileCollections({ id, idLogin }) {
{/* Botão de Excluir */}
<button
- className="p-2 max-md:my-3 text-sm rounded-xl text-black-text font-bold normal-case flex justify-center items-center gap-2 hover:bg-red"
+ className="p-2 max-md:my-3 text-sm rounded-xl text-black-HC-white font-bold normal-case flex justify-center items-center gap-2 hover:bg-red"
onClick={() => { setDeleteOpen(true); setColToDelete(item.id);} }
aria-label="Excluir" // Texto para leitores de tela
>
@@ -259,7 +259,7 @@ export default function ProfileCollections({ id, idLogin }) {
onClick={() => toggleContent()}
alt="Ver mais"
>
- <p className="hover:bg-main px-4 text-other-links text-lg rounded-md">Ver mais...</p>
+ <p className="hover:bg-ice-HC-dark px-4 text-darkGray-HC-white text-lg rounded-md">Ver mais...</p>
</Button>
)}
</div>
diff --git a/src/app/perfil/[id]/components/ProfileComplaints.js b/src/app/perfil/[id]/components/ProfileComplaints.js
index fc96bdeb..df7bc0b3 100644
--- a/src/app/perfil/[id]/components/ProfileComplaints.js
+++ b/src/app/perfil/[id]/components/ProfileComplaints.js
@@ -55,7 +55,7 @@ export default function ProfileComplaints({ id }) {
return (
<>
{got ? (
- <Card className='p-3 my-10 rounded-md min-w-[200px] min-h-[180px] bg-white shadow-none '>
+ <Card className='p-3 my-10 rounded-md min-w-[200px] min-h-[180px] bg-white-HC-dark shadow-none '>
<div className="flex content flex-wrap justify-center">
{complaints.map((item, i) => (
i % 2 === 0 && (
@@ -74,7 +74,7 @@ export default function ProfileComplaints({ id }) {
className="my-4 border-hidden hover:bg-transparent rounded-xl normal-case"
onClick={() => toggleContent()}
>
- <p className="hover:bg-main px-4 pb-4 text-other-links text-lg rounded-md">
+ <p className="hover:bg-ice-HC-dark px-4 pb-4 text-darkGray-HC-white text-lg rounded-md">
Ver mais...
</p>
</Button>
diff --git a/src/app/perfil/[id]/components/ProfileHomologation.js b/src/app/perfil/[id]/components/ProfileHomologation.js
index 0b140c65..662eb58e 100644
--- a/src/app/perfil/[id]/components/ProfileHomologation.js
+++ b/src/app/perfil/[id]/components/ProfileHomologation.js
@@ -51,7 +51,7 @@ export default function ProfileHomologation({ id }) {
return (
<>
{got ? (
- <Card className='p-3 my-10 rounded-md min-w-[200px] min-h-[180px] bg-white shadow-none '>
+ <Card className='p-3 my-10 rounded-md min-w-[200px] min-h-[180px] bg-white-HC-dark shadow-none '>
<div className="flex content flex-wrap justify-center">
{homologated.map((item, i) => (
<CardsHomologation item={item} key={i} />
@@ -65,7 +65,7 @@ export default function ProfileHomologation({ id }) {
className="my-4 border-hidden hover:bg-transparent rounded-xl normal-case"
onClick={() => toggleContent()}
>
- <p className="hover:bg-main px-4 pb-4 text-other-links text-lg rounded-md">
+ <p className="hover:bg-ice-HC-dark px-4 pb-4 text-darkGray-HC-white text-lg rounded-md">
Ver mais...
</p>
</Button>
diff --git a/src/app/perfil/[id]/components/ProfileItens.js b/src/app/perfil/[id]/components/ProfileItens.js
index 949be64e..7441f526 100644
--- a/src/app/perfil/[id]/components/ProfileItens.js
+++ b/src/app/perfil/[id]/components/ProfileItens.js
@@ -61,33 +61,33 @@ export default function ProfileItens({ profileData, setItems, items, store, type
},
}}
>
- <div className="bg-main outline outline-1 outline-outlineColor p-5 rounded-lg">
+ <div className="bg-ice-HC-dark outline outline-1 outline-ice-HC-white p-5 rounded-lg">
<div className="flex flex-col gap-5 justify-center ">
- <p className="font-bold text-xl text-text-filter">Deseja realmente comprar este item?</p>
- <p className="font-bold text-text-filter">Esta compra não envolve nenhum dinheiro real.</p>
- <p className="inline text-text-filter">O item que você deseja comprar,
+ <p className="font-bold text-xl text-darkGray-HC-white">Deseja realmente comprar este item?</p>
+ <p className="font-bold text-darkGray-HC-white">Esta compra não envolve nenhum dinheiro real.</p>
+ <p className="inline text-darkGray-HC-white">O item que você deseja comprar,
<span className="font-bold"> {name}</span>, custa
- <span className="font-bold text-secondary"> {iconEggs} {price}</span> gemas. Você possui
- <span className="font-bold text-secondary"> {iconEggs} {profileData["points"]}</span> gemas.
+ <span className="font-bold text-turquoise-HC-underline "> {iconEggs} {price}</span> gemas. Você possui
+ <span className="font-bold text-turquoise-HC-underline "> {iconEggs} {profileData["points"]}</span> gemas.
</p>
{restEggs < 0 ? (
- <p className="font-bold text-text-filter">Você não possui gemas o suficiente para comprar este item.</p>
+ <p className="font-bold text-darkGray-HC-white">Você não possui gemas o suficiente para comprar este item.</p>
) : (
<>
- <p className="inline text-text-filter">Comprar este item lhe deixará com
- <span className="font-bold text-secondary"> {iconEggs} {restEggs} </span>
+ <p className="inline text-darkGray-HC-white">Comprar este item lhe deixará com
+ <span className="font-bold text-turquoise-HC-underline "> {iconEggs} {restEggs} </span>
gemas.
</p>
</>
)}
</div>
<div className="flex justify-end mt-4">
- <button onClick={onClose} className="bg-main p-2 rounded-lg hover:bg-main-hover text-main-text mr-1">Cancelar</button>
+ <button onClick={onClose} className="bg-ice-HC-dark p-2 rounded-lg hover:bg-ice-HC-dark-hover text-darkGray-HC-white-underline mr-1">Cancelar</button>
{restEggs >= 0 && (
<button onClick={() => {
handlePostRequestStore(id, index);
onClose(); // Fecha o modal
- }} className="bg-secondary text-white p-2 rounded-lg hover:bg-secondary-hover ml-4">Comprar</button>
+ }} className="bg-turquoise text-white-HC-dark-underline p-2 rounded-lg hover:bg-darkTurquoise-HC-white ml-4">Comprar</button>
)}
</div>
</div>
@@ -109,12 +109,12 @@ export default function ProfileItens({ profileData, setItems, items, store, type
},
}}
>
- <div className="bg-main outline outline-1 outline-outlineColor p-5 rounded-lg">
+ <div className="bg-ice-HC-dark outline outline-1 outline-ice-HC-white p-5 rounded-lg">
<div className="flex flex-col justify-center ">
- <p className="pt-3 text-xl text-text-filter">Você só pode equipar até 3 insígnias simultaneamente</p>
+ <p className="pt-3 text-xl text-darkGray-HC-white">Você só pode equipar até 3 insígnias simultaneamente</p>
</div>
<div className="flex justify-end mt-4">
- <button onClick={onClose} className="bg-main p-2 rounded-lg hover:bg-main-hover text-main-text mr-1">Fechar</button>
+ <button onClick={onClose} className="bg-ice-HC-dark p-2 rounded-lg hover:bg-ice-HC-dark-hover text-darkGray-HC-white-underline mr-1">Fechar</button>
</div>
</div>
</Modal>
@@ -135,18 +135,18 @@ export default function ProfileItens({ profileData, setItems, items, store, type
},
}}
>
- <div className="outline outline-1 outline-outlineColor bg-main p-5 rounded-lg">
+ <div className="outline outline-1 outline-ice-HC-white bg-ice-HC-dark p-5 rounded-lg">
<div className="flex flex-col items-center justify-center ">
- <p className="pt-3 text-xl text-text-filter ">
+ <p className="pt-3 text-xl text-darkGray-HC-white ">
Erro na comunicação com o servidor.
Por favor entre em contato com o suporte:
</p>
- <a href="/contato" className="flex mt-4 w-24 bg-secondary text-md text-white p-2 px-6 justify-center rounded-lg hover:bg-secondary-hover">
+ <a href="/contato" className="flex mt-4 w-24 bg-turquoise text-md text-white-HC-dark-underline p-2 px-6 justify-center rounded-lg hover:bg-turquoise-hover">
Contato
</a>
</div>
<div className="flex justify-end mt-4">
- <button onClick={onClose} className="bg-main p-2 rounded-lg hover:bg-main-hover text-main-text mr-1">Fechar</button>
+ <button onClick={onClose} className="bg-ice-HC-dark p-2 rounded-lg hover:bg-ice-HC-dark-hover text-darkGray-HC-white-underline mr-1">Fechar</button>
</div>
</div>
</Modal>
@@ -245,17 +245,17 @@ export default function ProfileItens({ profileData, setItems, items, store, type
return (
- <div key={index} className="relative flex flex-c bg-main w-[250px] h-[370px] justify-center outline outline-1 outline-outlineColor rounded-2xl m-2 text-center">
+ <div key={index} className="relative flex flex-c bg-ice-HC-dark w-[250px] h-[370px] justify-center outline outline-1 outline-ice-HC-white rounded-2xl m-2 text-center">
{/* Parte de trás (detalhes) */}
{showDescription == index && (
- <div className="absolute inset-0 flex flex-col gap-5 text-[100%] text-text-filter bg-main bg-opacity-90 p-6 rounded-2xl pt-8 z-10 text-left">
+ <div className="absolute inset-0 flex flex-col gap-5 text-[100%] text-darkGray-HC-white bg-ice-HC-dark bg-opacity-90 p-6 rounded-2xl pt-8 z-10 text-left">
<div className="h-[270px] flex flex-col gap-6">
<p className="font-bold">{e.item?.name || e.name}</p>
<p className="font-light overflow-y-auto scrollbar-none">{e.item?.description || e.description}</p>
</div>
<button
- className="absolute bottom-0 pb-8 text-secondary text-main-text text-left"
+ className="absolute bottom-0 pb-8 text-turquoise-HC-underline text-darkGray-HC-white-underline text-left"
onClick={() => setShowDescription(null)}
>
Voltar
@@ -264,7 +264,7 @@ export default function ProfileItens({ profileData, setItems, items, store, type
)}
<div className="relative flex flex-col text-xs pt-8" >
- <div className="flex justify-center items-center text-main-text pb-4">
+ <div className="flex justify-center items-center text-darkGray-HC-white-underline pb-4">
<Avatar
alt={e.item?.name || e.name}
src={mecredURL + (e.item?.image || e.image)}
@@ -274,12 +274,12 @@ export default function ProfileItens({ profileData, setItems, items, store, type
<div className="flex flex-col justify-center text-base items-center">
{(e.item === undefined) ? (
<>
- <h1 className="flex text-lg text-text-filter text-[100%] font-bold px-6 items-center min-h-[40px]">
+ <h1 className="flex text-lg text-darkGray-HC-white text-[100%] font-bold px-6 items-center min-h-[40px]">
{e.item?.name || e.name}
</h1>
- <button className="text-secondary hover:text-secondary-hover pb-2" onClick={() => setShowDescription(index)}>Ver mais</button>
+ <button className="text-turquoise-HC-white-underline hover:text-darkTurquoise-HC-white pb-2" onClick={() => setShowDescription(index)}>Ver mais</button>
<div className='flex flex-wrap gap-x-4'>
- <h1 className='flex text-text-filter font-bold gap-x-1'>{iconEggs}{e.price}</h1>
+ <h1 className='flex text-darkGray-HC-white font-bold gap-x-1'>{iconEggs}{e.price}</h1>
</div>
<ModalBuyItem
name={e.name}
@@ -289,7 +289,7 @@ export default function ProfileItens({ profileData, setItems, items, store, type
index={index}
id={e.id}
/>
- <button className="flex h-[43px] w-[158px] justify-center items-center bg-bg-comments hover:bg-text-filter rounded-[10px] outline outline-1 outline-outlineColor font-bold text-text-filter hover:text-white mt-2"
+ <button className="flex h-[43px] w-[158px] justify-center items-center bg-lightGray-HC-dark hover:bg-darkGray-HC-white rounded-[10px] outline outline-1 outline-ice-HC-white font-bold text-darkGray-HC-white hover:text-white-HC-dark-underline mt-2"
onClick={() => !arrayAcquired[index] && setBuyItem(e.id)}
>
{arrayAcquired[index] ? "Adquirido" : "Comprar"}
@@ -297,11 +297,11 @@ export default function ProfileItens({ profileData, setItems, items, store, type
</>
) : (
<>
- <h1 className="flex text-lg text-text-filter text-[100%] font-bold px-6 items-center min-h-[60px]">
+ <h1 className="flex text-lg text-darkGray-HC-white text-[100%] font-bold px-6 items-center min-h-[60px]">
{e.item?.name || e.name}
</h1>
- <button className="text-secondary hover:text-secondary-hover " onClick={() => setShowDescription(index)}>Ver mais</button>
- <button className="flex h-[43px] w-[158px] justify-center items-center bg-bg-comments hover:bg-text-filter rounded-[10px] outline outline-1 outline-outlineColor font-bold text-text-filter hover:text-white mt-4"
+ <button className="text-turquoise-HC-white-underline hover:text-darkTurquoise-HC-white" onClick={() => setShowDescription(index)}>Ver mais</button>
+ <button className="flex h-[43px] w-[158px] justify-center items-center bg-lightGray-HC-dark hover:bg-darkGray-HC-white rounded-[10px] outline outline-1 outline-ice-HC-white font-bold text-darkGray-HC-white hover:text-white-HC-dark-underline mt-4"
onClick={() => handlePostRequestItem(e.item?.id || null, e.being_used ? "unequip_item" : "equip_item", index)}
>
{e.being_used ? "Desequipar" : "Equipar"}
diff --git a/src/app/perfil/[id]/components/ProfileResources.js b/src/app/perfil/[id]/components/ProfileResources.js
index 290cc3a7..5b4bcbd4 100644
--- a/src/app/perfil/[id]/components/ProfileResources.js
+++ b/src/app/perfil/[id]/components/ProfileResources.js
@@ -94,7 +94,7 @@ export default function ProfileResources({ id, idLogin }) {
{idLogin === id && (
<Link href="/publicar">
<button
- className="inline-block px-2 text-sm text-main border-main rounded-lg normal-case h-9 font-bold bg-orange hover:bg-orange-hover"
+ className="inline-block px-2 text-sm text-ice-HC-dark border-main rounded-lg normal-case h-9 font-bold bg-orange-HC-white hover:bg-darkOrange-HC-dark hover:text-white outline outline-1 outline-ice-HC-white "
alt="Publicar novo recurso"
>
Publicar recurso
@@ -111,7 +111,7 @@ export default function ProfileResources({ id, idLogin }) {
{resourcesCount + homologaCount == 0 ? (
<NotFound name="recursos" />
) : (
- <div className="p-3 my-5 mb-24 mx-5 rounded-md min-w-[200px] min-h-[180px] bg-white">
+ <div className="p-3 my-5 mb-24 mx-5 rounded-md min-w-[200px] min-h-[180px] bg-white-HC-dark ">
<div className="flex flex-wrap justify-center">
{resources.map((resource, index) => (
<Cards
@@ -147,7 +147,7 @@ export default function ProfileResources({ id, idLogin }) {
className="mb-2 border-hidden hover:bg-transparent rounded-xl normal-case"
onClick={() => toggleContent()}
>
- <p className="hover:bg-main px-4 text-other-links text-lg rounded-md">
+ <p className="hover:bg-ice-HC-dark px-4 text-darkGray-HC-white text-lg rounded-md">
Ver mais...
</p>
</Button>
diff --git a/src/app/perfil/[id]/components/ReportProfileModal.js b/src/app/perfil/[id]/components/ReportProfileModal.js
index 50f63cbd..a97137ec 100644
--- a/src/app/perfil/[id]/components/ReportProfileModal.js
+++ b/src/app/perfil/[id]/components/ReportProfileModal.js
@@ -77,18 +77,18 @@ export default function ReportProfileModal({ open, onClose, profile, idLogin, se
},
}}
>
- <div className="flex flex-col bg-main p-3 rounded-lg">
+ <div className="flex flex-col bg-ice-HC-dark p-3 rounded-lg">
<div className="px-3 flex justify-between">
- <div className="text-2xl font-bold text-main-text">Reportar</div>
- <button onClick={onClose} className="text-2xl font-bold text-main-text hover:bg-main-hover p-1 px-2 rounded-full">X</button>
+ <div className="text-2xl font-bold text-darkGray-HC-white-underline">Reportar</div>
+ <button onClick={onClose} className="text-2xl font-bold text-darkGray-HC-white-underline hover:bg-ice-HC-dark-hover p-1 px-2 rounded-full">X</button>
</div>
<div className="p-3 flex flex-col">
- <div className="text-base font-bold text-main-text">
+ <div className="text-base font-bold text-darkGray-HC-white-underline">
O que está acontecendo?
</div>
<form onSubmit={handleSubmit}>
- <FormControl className="p-3 text-main-text">
+ <FormControl className="p-3 text-darkGray-HC-white-underline">
<RadioGroup defaultValue={"1"} name="report-radio-group">
{options.map((option, i) => {
return (
@@ -118,7 +118,7 @@ export default function ReportProfileModal({ open, onClose, profile, idLogin, se
type="submit"
variant="contained"
disabled={info.length > 150}
- className="bg-secondary hover:bg-black-hover disabled:bg-red mt-3 text-white hover:text-secondary shadow-none rounded normal-case text-base font-bold"
+ className="bg-turquoise hover:bg-black-HC-gray disabled:bg-red mt-3 text-white-HC-dark-underline hover:text-turquoise-HC-underline shadow-none rounded normal-case text-base font-bold"
>
Enviar
</Button>
diff --git a/src/app/perfil/[id]/components/SelectionButtons.js b/src/app/perfil/[id]/components/SelectionButtons.js
index ffa8a68c..e4cfa8e8 100644
--- a/src/app/perfil/[id]/components/SelectionButtons.js
+++ b/src/app/perfil/[id]/components/SelectionButtons.js
@@ -37,17 +37,17 @@ export default function SelectionButtons({ setOptButton, verifyCurator, idProfil
value={value}
onChange={handleChange}
variant="fullWidth"
- TabIndicatorProps={{ style: { background: "var(--secondary)" } }}
+ TabIndicatorProps={{ style: { background: "var(--turquoise-HC-white)" } }}
>
{buttons.map((item, index) => {
return (
- <Tab className="text-[16px] py-5 normal-case text-text-filter" key={index} value={index} label={<p className="text-main-text">{item}</p>} />
+ <Tab className="text-[16px] py-5 normal-case text-darkGray-HC-white" key={index} value={index} label={<p className="text-darkGray-HC-white-underline">{item}</p>} />
)
})}
</Tabs>
- <Divider/>
+ <hr style={{ borderTop: "1px solid var(--lightGray-HC-white)" }} />
</div>
@@ -59,7 +59,7 @@ export default function SelectionButtons({ setOptButton, verifyCurator, idProfil
variant="scrollable"
scrollButtons="auto"
allowScrollButtonsMobile
- className="text-text-color"
+ className="text-darkGray-HC-white"
>
{buttons.map((item, index) => {
diff --git a/src/app/perfil/[id]/components/Stats.js b/src/app/perfil/[id]/components/Stats.js
index 67fa93b4..3c30e1c4 100644
--- a/src/app/perfil/[id]/components/Stats.js
+++ b/src/app/perfil/[id]/components/Stats.js
@@ -51,8 +51,8 @@ export default function ProfileStats({ profileData, achievements, progresses, it
<>
<div className='flex flex-row justify-between px-1 max-xl:grid max-xl:grid-cols-3 max-xl:gap-5 max-md:flex max-md:flex-nowrap max-md:overflow-x-auto mt-[42px] max-md:scrollbar-none max-md:animate-scrollHint'>
{statsArray.map((item, index) => (
- <div key={index} className='flex justify-center px-4 2xl:w-[210px] h-[60px] gap-0.5 items-center bg-white rounded-[10px] whitespace-nowrap text-[80%%] font-light text-text-filter outline outline-1 outline-outlineColor'>
- <img className="flex h-[26px] px-1 "
+ <div key={index} className='flex justify-center px-4 2xl:w-[210px] h-[60px] gap-0.5 items-center bg-white-HC-dark rounded-[10px] whitespace-nowrap text-[80%%] font-light text-darkGray-HC-white outline outline-1 outline-ice-HC-white'>
+ <img className="flex h-[26px] px-1 invertLogo-HC-white"
src={item.src}
alt={item.name}
diff --git a/src/app/perfil/[id]/components/UserCard.js b/src/app/perfil/[id]/components/UserCard.js
index ae7c0238..508719d6 100644
--- a/src/app/perfil/[id]/components/UserCard.js
+++ b/src/app/perfil/[id]/components/UserCard.js
@@ -76,19 +76,19 @@ const roles = [
function getRandomBg(id) {
const colors = [
- "bg-secondary",
+ "bg-turquoise",
"bg-orange",
- "bg-secondary-hover",
- "bg-orange-hover",
+ "bg-turquoise-hover",
+ "bg-darkOrange-HC-gray ",
"bg-violet",
"bg-pink",
"bg-red",
- "bg-text-color",
- "bg-text-color-click",
- "bg-button-filters",
- "bg-text-filter",
- "bg-other-links",
- "bg-blue-button",
+ "bg-darkGray-HC-white",
+ "bg-darkGray-HC-white-click",
+ "bg-ice-HC-dark ",
+ "bg-darkGray-HC-white",
+ "bg-darkGray-HC-white",
+ "bg-turquoise-HC-dark",
]
return colors[id % colors.length];
@@ -221,13 +221,13 @@ export default function UserCard({ profileData, idLogin, achievements, progresse
return (
<div className='overflow-y-auto min-h-dvh ml-[30px] mr-[80px] max-md:mx-[20px] max-md:mb-24 '>
<div className='flex flex-col'>
- <div className='flex max-lg:flex-col rounded-2xl gap-4 max-sm:gap-0 max-lg:items-center bg-white outline outline-1 outline-outlineColor' >
+ <div className='flex max-lg:flex-col rounded-2xl gap-4 max-sm:gap-0 max-lg:items-center bg-white-HC-dark outline outline-1 outline-ice-HC-white' >
<div className='p-10 max-sm:p-0 h-full items-center'>
{/*a imagem do usuário tem nomes diferentes no backend se for usuário público ou não */}
{profileData["avatar"] ?
<Avatar src={mecredURL + profileData["avatar"]} sx={{ position: "inherit" }} alt="Foto de perfil" className=" h-[276px] w-[276px] " />
:
- <div className={`flex items-center justify-center text-8xl font-bold text-main rounded-full h-[276px] w-[276px] ${getRandomBg(profileData["id"])}`} >{profileData["name"][0]}</div>
+ <div className={`flex items-center justify-center text-8xl font-bold text-ice-HC-dark rounded-full h-[276px] w-[276px] ${getRandomBg(profileData["id"])}`} >{profileData["name"][0]}</div>
}
</div>
@@ -235,8 +235,8 @@ export default function UserCard({ profileData, idLogin, achievements, progresse
<div className=' flex flex-col justify-start '>
<div className='flex flex-row max-sm:flex-col-reverse'>
- <div className='flex flex-row w-2/3 max-sm:w-full items-center text-main-text font-bold max-sm:text-3xl text-4xl max-sm:mr-5 max-sm:mb-6'>
- <div className='bg-gray-color shrink-0 rounded-full max-lg:w-[20px] max-lg:h-[20px] w-[28px] h-[28px] mx-4 aspect-square p-0 m-0' /> {profileData["name"]}
+ <div className='flex flex-row w-2/3 max-sm:w-full items-center text-darkGray-HC-white font-bold max-sm:text-3xl text-4xl max-sm:mr-5 max-sm:mb-6'>
+ <div className='bg-lightGray-HC-white shrink-0 rounded-full max-lg:w-[20px] max-lg:h-[20px] w-[28px] h-[28px] mx-4 aspect-square p-0 m-0' /> {profileData["name"]}
</div>
{/* Medalhas de conquistas do usuário*/}
@@ -245,16 +245,16 @@ export default function UserCard({ profileData, idLogin, achievements, progresse
</div>
{profileData["email"] && profileData["id"] !== 35342 && (
- <div className='mb-3 truncate flex flex-row items-center text-text-filter max-sm:text-base text-2xl'>
- <div className='bg-gray-color shrink-0 rounded-full w-[28px] h-[28px] max-lg:w-[20px] max-lg:h-[20px] mx-4 aspect-square' />
+ <div className='mb-3 truncate flex flex-row items-center text-darkGray-HC-white max-sm:text-base text-2xl'>
+ <div className='bg-lightGray-HC-white shrink-0 rounded-full w-[28px] h-[28px] max-lg:w-[20px] max-lg:h-[20px] mx-4 aspect-square' />
{profileData["email"]}
</div>
)}
<div className='mb-3'>
{translateItems &&
- <div className='flex flex-row items-center mt-1 text-text-filter max-sm:text-base text-xl'>
- <div className='bg-gray-color shrink-0 rounded-full w-[28px] h-[28px] max-lg:w-[20px] max-lg:h-[20px] mx-4 aspect-square' />
+ <div className='flex flex-row items-center mt-1 text-darkGray-HC-white max-sm:text-base text-xl'>
+ <div className='bg-lightGray-HC-white shrink-0 rounded-full w-[28px] h-[28px] max-lg:w-[20px] max-lg:h-[20px] mx-4 aspect-square' />
{translateItems}</div>
}
</div>
@@ -270,7 +270,7 @@ export default function UserCard({ profileData, idLogin, achievements, progresse
{/* Botões de recursos, sobre, coleções e homologação, mostra quais botões para cada usuário */}
- <div className='rounded-2xl min-w-[200px] mt-10 bg-white outline outline-1 outline-outlineColor'>
+ <div className='rounded-2xl min-w-[200px] mt-10 bg-white-HC-dark outline outline-1 outline-ice-HC-white'>
{<SelectionButtons options={options} setOptButton={setOptButton} verifyCurator={verifyCurator} idLogin={idLogin} idProfile={profileData["id"]} />}
{/* Faz a escolha correta de qual botão o usuário clicou */}
<ProfileOptions
diff --git a/src/app/publicar/components/AdvanceNotice.js b/src/app/publicar/components/AdvanceNotice.js
index 46396036..3e22d2a4 100644
--- a/src/app/publicar/components/AdvanceNotice.js
+++ b/src/app/publicar/components/AdvanceNotice.js
@@ -1,18 +1,18 @@
export default function AdvanceNotice() {
return (
- <div className="grid text-text-color max-md:mx-6">
+ <div className="grid text-darkGray-HC-white max-md:mx-6">
<p className="text-center text-lg font-medium py-8 ">
Seu recurso ficará privado até que você o publique.
</p>
<p className="inline text-center font-light text-sm">
Ao enviar seus recursos para o MEC-RED, você concorda com os
- <a className="text-secondary" href="/ajuda"> Termos de Serviço</a> e com as
- <a className="text-secondary" href="/ajuda"> diretrizes do MEC-RED</a>.
+ <a className="text-turquoise-HC-white-underline " href="/ajuda"> Termos de Serviço</a> e com as
+ <a className="text-turquoise-HC-white-underline " href="/ajuda"> diretrizes do MEC-RED</a>.
</p>
<p className="inline text-center text-sm font-light py-4">
Tenha cuidado para não violar os direitor autorais e a privacidade de terceiros.
- <a className="text-secondary" href="/ajuda"> Saiba mais.</a>
+ <a className="text-turquoise-HC-white-underline " href="/ajuda"> Saiba mais.</a>
</p>
</div>
)
diff --git a/src/app/publicar/components/AuthorSelection.js b/src/app/publicar/components/AuthorSelection.js
index 504b7a55..caa40ae5 100644
--- a/src/app/publicar/components/AuthorSelection.js
+++ b/src/app/publicar/components/AuthorSelection.js
@@ -16,9 +16,9 @@ export default function AuthorSelection({ selectedValue, handleRadioChange, auth
className="mb-5"
sx={{
'& .MuiRadio-root': {
- color: 'var(--main-text)', // Default radio color
+ color: 'var(--darkGray-HC-white)', // Default radio color
'&.Mui-checked': {
- color: 'var(--secondary)', // Selected radio color
+ color: 'var(--turquoise-HC-white)', // Selected radio color
},
},
}}
@@ -28,7 +28,7 @@ export default function AuthorSelection({ selectedValue, handleRadioChange, auth
value="a"
control={<Radio />}
label={
- <span className="text-publish-text">
+ <span className="text-darkGray-HC-white">
O Recurso foi desenvolvido por mim.
</span>
}
@@ -38,7 +38,7 @@ export default function AuthorSelection({ selectedValue, handleRadioChange, auth
value="b"
control={<Radio />}
label={
- <span className="text-publish-text">
+ <span className="text-darkGray-HC-white">
O Recurso foi desenvolvido por mim e por outra(s) pessoa(s).
</span>
}
@@ -48,7 +48,7 @@ export default function AuthorSelection({ selectedValue, handleRadioChange, auth
value="c"
control={<Radio />}
label={
- <span className="text-publish-text">
+ <span className="text-darkGray-HC-white">
O Recurso foi desenvolvido por outra(s) pessoa(s).
</span>
}
diff --git a/src/app/publicar/components/CancelSubmitModal.js b/src/app/publicar/components/CancelSubmitModal.js
index 2c0132d6..10946e5b 100644
--- a/src/app/publicar/components/CancelSubmitModal.js
+++ b/src/app/publicar/components/CancelSubmitModal.js
@@ -28,21 +28,23 @@ export default function CancelSubmitModal({ openModal, onClose }) {
},
}}
>
- <div className='absolute p-4 pb-14 rounded-lg self-center bg-white border-2 border-outlineColor'>
+ <div className='absolute p-4 pb-14 rounded-lg self-center bg-white-HC-dark border-2 border-ice-HC-white'>
<>
- <div className='flex justify-end'>
- <IconButton onClick={onClose}>
- <CloseIcon fontSize='large' />
+ <div className='group flex justify-end'>
+ <IconButton onClick={onClose} className='group-hover:bg-ice-HC-white'>
+ <CloseIcon fontSize='large' className='text-darkGray-HC-white group-hover:text-darkGray-HC-dark' />
</IconButton>
</div>
<div className='px-4'>
- <p className='flex justify-center text-text-filter text-xl font-semibold pb-6 '>
+ <p className='flex justify-center text-darkGray-HC-white text-xl font-semibold pb-6 '>
Tem certeza que deseja cancelar a submissão do recurso? </p>
<div className='flex justify-center '>
<Button
variant='outlined'
- className='bg-main normal-case text-text-filter font-bold text-lg rounded-lg w-28 mr-2 border-2 border-outlineColor' onClick={onClose} > Não </Button>
- <Button className='bg-secondary normal-case text-white font-bold text-lg rounded-lg w-28 ml-2' href="/busca?page=LearningObject"> Sim </Button>
+ className='bg-ice-HC-dark normal-case text-darkGray-HC-white-underline font-bold text-lg rounded-lg w-28 mr-2 border-2 border-ice-HC-white hover:bg-ice-HC-white hover:text-darkGray-HC-dark-underline' onClick={onClose} > Não </Button>
+ <Button
+ variant='outlined'
+ className='normal-case text-white-HC-dark-underline font-bold text-lg rounded-lg w-28 ml-2 border-2 border-turquoise-HC-white hover:border-darkTurquoise-HC-white hover:bg-darkTurquoise-HC-dark bg-turquoise-HC-white hover:text-white-HC-underline' href="/busca?page=LearningObject"> Sim </Button>
</div>
</div>
</>
diff --git a/src/app/publicar/components/CustomCheckbox.js b/src/app/publicar/components/CustomCheckbox.js
index aaa6b77c..45873e53 100644
--- a/src/app/publicar/components/CustomCheckbox.js
+++ b/src/app/publicar/components/CustomCheckbox.js
@@ -2,8 +2,8 @@ import { styled } from '@mui/material/styles';
import { Checkbox } from '@mui/material';
export default styled(Checkbox)(() => ({
- color: 'var(--main-text)', // Default border color
+ color: 'var(--darkGray-HC-white)', // Default border color
'&.Mui-checked': {
- color: 'var(--secondary)', // Checked color
+ color: 'var(--turquoise-HC-white)', // Checked color
},
}));
\ No newline at end of file
diff --git a/src/app/publicar/components/CustomTextField.js b/src/app/publicar/components/CustomTextField.js
index 8722718c..1b9cbfb2 100644
--- a/src/app/publicar/components/CustomTextField.js
+++ b/src/app/publicar/components/CustomTextField.js
@@ -3,35 +3,35 @@ import { TextField } from '@mui/material';
export default styled(TextField)(() => ({
'& .MuiInputBase-input': {
- color: 'var(--black-text)', // Input text color
+ color: 'var(--darkGray-HC-white)', // Input text color
},
'& .MuiOutlinedInput-root': {
'& fieldset': {
- borderColor: 'var(--gray-color)', // Default border color
+ borderColor: 'var(--mediumGray-HC-white)', // Default border color
},
'&:hover fieldset': {
- borderColor: 'var(--black-text)', // Hover border color
+ borderColor: 'var(--darkGray-HC-white)', // Hover border color
},
'&.Mui-focused fieldset': {
- borderColor: 'var(--secondary)', // Focused border color
+ borderColor: 'var(--turquoise-HC-white)', // Focused border color
},
'&.Mui-error fieldset': {
- borderColor: 'var(--red)', // Error border color
+ borderColor: 'var(--red-HC-white)', // Error border color
},
'&.Mui-disabled': {
'& fieldset': {
- borderColor: 'var(--gray-color)', // Disabled border color
+ borderColor: 'var(--mediumGray-HC-white)', // Disabled border color
},
- backgroundColor: 'var(--main)', // Disabled background color
+ backgroundColor: 'var(--ice)', // Disabled background color
},
},
'& .MuiInputBase-input::placeholder': {
- color: 'var(--text-color)', // Placeholder text color
+ color: 'var(--darkGray-HC-white)' , // Placeholder text color
},
'& .MuiFormHelperText-root.Mui-error': {
- color: 'var(--red)', // Error helper text color
+ color: 'var(--red-HC-white)', // Error helper text color
},
'& .MuiFormHelperText-root': {
- color: 'var(--text-color)', // Default helper text color
+ color: 'var(--darkGray-HC-white)', // Default helper text color
},
}));
\ No newline at end of file
diff --git a/src/app/publicar/components/ErrorSize.js b/src/app/publicar/components/ErrorSize.js
index e8553bd6..b753fb96 100644
--- a/src/app/publicar/components/ErrorSize.js
+++ b/src/app/publicar/components/ErrorSize.js
@@ -22,16 +22,16 @@ export default function ErrorSize({ open, handleClose, maxSize="200MB" }) {
},
}}
>
- <div className='absolute p-4 pb-14 rounded-lg self-center bg-white'>
+ <div className='absolute p-4 pb-14 rounded-lg self-center bg-white-HC-dark '>
<div className='flex justify-end'>
<IconButton onClick={handleClose}>
<CloseIcon fontSize='large' />
</IconButton>
</div>
- <p className='px-4 pt-2 text-center text-2xl text-text-filter'>
+ <p className='px-4 pt-2 text-center text-2xl text-darkGray-HC-white'>
Não foi possivel enviar o arquivo.
</p>
- <p className='px-4 pt-2 text-center text-lg text-text-filter'>
+ <p className='px-4 pt-2 text-center text-lg text-darkGray-HC-white'>
Tamanho máximo suportado é de {maxSize}.
</p>
</div>
diff --git a/src/app/publicar/components/ErrorType.js b/src/app/publicar/components/ErrorType.js
index 689751dd..3f49f8bd 100644
--- a/src/app/publicar/components/ErrorType.js
+++ b/src/app/publicar/components/ErrorType.js
@@ -22,7 +22,7 @@ export default function ErrorType({ open, handleClose, thumbnail = false }) {
},
}}
>
- <div className='absolute p-4 pb-14 rounded-lg self-center bg-white border-2 border-outlineColor'>
+ <div className='absolute p-4 pb-14 rounded-lg self-center bg-white-HC-dark border-2 border-ice-HC-white'>
<div className='flex justify-end'>
<IconButton onClick={handleClose}>
<CloseIcon fontSize='large' />
@@ -30,13 +30,13 @@ export default function ErrorType({ open, handleClose, thumbnail = false }) {
</div>
{
!thumbnail ? <>
- <p className='px-4 pt-2 text-center text-2xl text-text-filter'>
+ <p className='px-4 pt-2 text-center text-2xl text-darkGray-HC-white'>
Não foi possivel enviar o arquivo.
</p>
- <p className='px-4 pt-2 text-center text-lg text-text-filter pb-8'>
+ <p className='px-4 pt-2 text-center text-lg text-darkGray-HC-white pb-8'>
Tipo de arquivo não suportado.
</p>
- <p className='px-4 pt-2 text-start text-lg text-text-filter'>
+ <p className='px-4 pt-2 text-start text-lg text-darkGray-HC-white'>
Os tipos de arquivos suportados são:
<li className='text-sm'> Vídeos: mp4, mpeg, ogg, webm, 3gpp </li>
@@ -47,13 +47,13 @@ export default function ErrorType({ open, handleClose, thumbnail = false }) {
</>
:
<>
- <p className='px-4 pt-2 text-center text-2xl text-text-filter'>
+ <p className='px-4 pt-2 text-center text-2xl text-darkGray-HC-white'>
Não foi possivel enviar a thumbnail.
</p>
- <p className='px-4 pt-2 text-center text-lg text-text-filter pb-8'>
+ <p className='px-4 pt-2 text-center text-lg text-darkGray-HC-white pb-8'>
Tipo de arquivo não suportado.
</p>
- <p className='px-4 pt-2 text-start text-lg text-text-filter'>
+ <p className='px-4 pt-2 text-start text-lg text-darkGray-HC-white'>
Os tipos de thumbnail suportados são:
<li className='text-sm'> Image: jpeg, webp, gif, png, apng, svg+xml, bmp </li>
</p>
diff --git a/src/app/publicar/components/FieldLabel.js b/src/app/publicar/components/FieldLabel.js
index 48ad3852..54abe377 100644
--- a/src/app/publicar/components/FieldLabel.js
+++ b/src/app/publicar/components/FieldLabel.js
@@ -5,10 +5,10 @@ export default function FieldLabel({ name, description, error = false }) {
return (
<div className="flex flex-col mt-10 mb-5">
- <label className=" inline-block text-xl text-publish-text font-bold ">{name}</label>
- { error && <FormHelperText className="text-red-publish flex mb-8">Esse campo deve ser preenchido antes de continuar</FormHelperText>}
+ <label className=" inline-block text-xl text-darkGray-HC-white font-bold ">{name}</label>
+ { error && <FormHelperText className="text-red-HC-white flex mb-8">Esse campo deve ser preenchido antes de continuar</FormHelperText>}
- <span className="text-base text-publish-text mt-3">{description}</span>
+ <span className="text-base text-darkGray-HC-white mt-3">{description}</span>
</div>
);
}
diff --git a/src/app/publicar/components/Form.js b/src/app/publicar/components/Form.js
index 295d69fc..ea614328 100644
--- a/src/app/publicar/components/Form.js
+++ b/src/app/publicar/components/Form.js
@@ -55,7 +55,7 @@ export default function Form() {
return (
<>
- <div className="flex flex-col items-center w-full mt-15 max-sm:mx-0 max-md:mb-16 overflow-auto scrollbar-none">
+ <div className="flex flex-col justify-start w-full mt-15 max-sm:mx-0 max-md:mb-16 overflow-auto scrollbar-none">
<HorizontalLinearAlternativeLabelStepper step={step} />
{step === 0 && userData && <InfoForm userData={userData} setStep={setStep} draft={draft} setDraft={setDraft} authorType={authorType} setAuthorType={setAuthorType} />}
{step === 1 && <UploadForm thumbURL={thumbURL} setThumbURL={setThumbURL} thumb={thumb} setThumb={setThumb} setStep={setStep} draft={draft} setDraft={setDraft} file={file} setFile={setFile} attachmentId={attachmentId} setAttachmentId={setAttachmentId} />}
diff --git a/src/app/publicar/components/InfoForm.js b/src/app/publicar/components/InfoForm.js
index 8d42d31f..fb497846 100644
--- a/src/app/publicar/components/InfoForm.js
+++ b/src/app/publicar/components/InfoForm.js
@@ -179,12 +179,12 @@ export default function InfoForm({ userData, setStep, draft, setDraft, authorTyp
className="rounded-lg p-10 max-xl:p-5 max-xl:mx-5 "
elevation={1}
sx={{
- // backgroundColor: 'var(--white)',
- border: '2px solid var(--outlineColor)',
+ backgroundColor: 'var(--white-HC-dark)',
+ border: '2px solid var(--ice-HC-white)',
borderRadius: '8px',
}}
>
- <h1 className="text-publish-text font-light text-2xl text-center">
+ <h1 className="text-darkGray-HC-white font-light text-2xl text-center">
Os campos marcados com * são obrigatórios
</h1>
<FieldLabel
@@ -204,8 +204,8 @@ export default function InfoForm({ userData, setStep, draft, setDraft, authorTyp
className="mb-5"
sx={{
"& .MuiOutlinedInput-input::placeholder": {
- color: "var(--main-text)",
- opacity: 1,
+ color: "var(--darkGray-HC-white)",
+ opacity: 0.5,
},
}}
/>
@@ -260,7 +260,7 @@ export default function InfoForm({ userData, setStep, draft, setDraft, authorTyp
key={index}
control={<CustomCheckbox checked={languages.includes(language.name)} />}
value={JSON.stringify(language)}
- label={<span className="text-publish-text">{language.name}</span>}
+ label={<span className="text-darkGray-HC-white">{language.name}</span>}
/>
))}
</FormGroup>
@@ -276,7 +276,7 @@ export default function InfoForm({ userData, setStep, draft, setDraft, authorTyp
key={index}
control={<CustomCheckbox checked={scholarityLevelsName.includes(sl.name)} />}
value={JSON.stringify(sl)}
- label={<span className="text-publish-text">{sl.name}</span>}
+ label={<span className="text-darkGray-HC-white">{sl.name}</span>}
/>
))}
</FormGroup>
@@ -291,7 +291,7 @@ export default function InfoForm({ userData, setStep, draft, setDraft, authorTyp
handleRadioChange={handleLicenseValueChange}
/>
</Paper>
- <h1 className="text-publish-text font-light text-base pt-1 text-end max-xl:pr-6">
+ <h1 className="text-darkGray-HC-white font-light text-base pt-1 text-end max-xl:pr-6">
Os campos marcados com * são de preenchimento obrigatório
</h1>
<div className="flex w-full justify-end p-3">
@@ -300,13 +300,13 @@ export default function InfoForm({ userData, setStep, draft, setDraft, authorTyp
onClick={() => { setOpenModalCancel(true) }}
type="button"
variant="text"
- className="normal-case w-36 text-base text-main-text font-bold"
+ className="normal-case w-36 text-base text-darkGray-HC-white-underline font-bold mr-2 outline outline-1 outline-ice-HC-white hover:bg-lightGray-HC-white hover:text-darkGray-HC-dark-underline"
>
Cancelar
</Button>
<Button
type="submit"
- className=" border-secondary w-36 rounded-lg hover:bg-secondary-hover bg-secondary text-base text-white font-bold normal-case flex "
+ className="border-turquoise-HC-white w-36 rounded-lg hover:bg-darkTurquoise-HC-dark bg-turquoise-HC-white text-base text-white-HC-dark-underline hover:text-white-HC-underline font-bold normal-case flex"
variant="outlined"
>
Continuar
diff --git a/src/app/publicar/components/LicenseModals.js b/src/app/publicar/components/LicenseModals.js
index a16aff31..a9bd3ff5 100644
--- a/src/app/publicar/components/LicenseModals.js
+++ b/src/app/publicar/components/LicenseModals.js
@@ -66,17 +66,17 @@ export default function LicenseModal({ openModal, onClose }) {
}}
>
- <div className='absolute w-4/5 h-4/5 overflow-auto p-4 pb-14 rounded-lg text-text-color self-center bg-white border-2 border-outlineColor'>
+ <div className='absolute w-4/5 h-4/5 overflow-auto p-4 pb-14 rounded-lg text-darkGray-HC-white self-center bg-white-HC-dark border-2 border-ice-HC-white'>
<>
- <div className='flex justify-end'>
- <IconButton onClick={onClose}>
+ <div className='group flex justify-end'>
+ <IconButton onClick={onClose} className='group-hover:bg-ice-HC-white'>
<CloseIcon
fontSize='large'
- className='text-text-color'
+ className='text-darkGray-HC-white group-hover:text-darkGray-HC-dark'
/>
</IconButton>
</div>
- <p className='text-text-color text-xl text-center font-semibold pb-4'>
+ <p className='text-darkGray-HC-white text-xl text-center font-semibold pb-4'>
Por que usamos licenças no MEC-RED?
</p>
<p className='text-base text-center'>
@@ -86,27 +86,26 @@ export default function LicenseModal({ openModal, onClose }) {
conteúdo de forma legal, desde que sigam algumas condições específicas.
</p>
- <p className='text-text-color text-lg text-center font-semibold py-4 pt-10'>
+ <p className='text-darkGray-HC-white text-lg text-center font-semibold py-4 pt-10'>
A importância da Creative Commons:
</p>
{whyLicense.map((license) => (
- < Accordion key={license.name}>
+ < Accordion key={license.name} className='bg-white-HC-dark outline outline-1 outline-lightGray-HC-white'>
<AccordionSummary
- expandIcon={<ExpandMoreIcon />}
+ expandIcon={<ExpandMoreIcon className="text-darkGray-HC-white"/>}
aria-controls="panel1-content"
id="panel1-header"
-
>
- <p className='text-text-color font-semibold'>{license.name}</p>
+ <p className='text-darkGray-HC-white font-semibold'>{license.name}</p>
</AccordionSummary>
- <AccordionDetails className='text-text-color'> {license.details} </AccordionDetails>
+ <AccordionDetails className='text-darkGray-HC-white'> {license.details} </AccordionDetails>
</Accordion>))}
- <p className='text-text-color text-lg text-center font-semibold py-4 pt-16 '>
+ <p className='text-darkGray-HC-white text-lg text-center font-semibold py-4 pt-16 '>
Licenças da Creative Commons usadas no MEC-RED
</p>
{ccLicense.map((license) => (
- <div key={license.name} className='text-text-color flex flex-row py-2'>
+ <div key={license.name} className='text-darkGray-HC-white flex flex-row py-2'>
<p className='font-bold inline'>{license.name}: <span className='pl-1 font-normal'> {license.details} </span> </p>
</div>
diff --git a/src/app/publicar/components/LicenseSelection.js b/src/app/publicar/components/LicenseSelection.js
index da01c25e..7d4efd4a 100644
--- a/src/app/publicar/components/LicenseSelection.js
+++ b/src/app/publicar/components/LicenseSelection.js
@@ -18,7 +18,7 @@ export default function LicenseSelection({ handleRadioChange, selectedValue, err
<div className="flex flex-row">
<FieldLabel name="Licença do Uso do Conteúdo*" error={error} />
<button type="button" onClick={() => setOpenModalLicense(true)}>
- <HelpIcon fontSize="medium" className="text-text-color" />
+ <HelpIcon fontSize="medium" className="text-darkGray-HC-white" />
</button>
</div>
<RadioGroup
@@ -28,9 +28,9 @@ export default function LicenseSelection({ handleRadioChange, selectedValue, err
value={selectedValue}
sx={{
'& .MuiRadio-root': {
- color: 'var(--main-text)', // Default radio color
+ color: 'var(--darkGray-HC-white)', // Default radio color
'&.Mui-checked': {
- color: 'var(--secondary)', // Selected radio color
+ color: 'var(--turquoise-HC-white)', // Selected radio color
},
},
}}
@@ -43,11 +43,11 @@ export default function LicenseSelection({ handleRadioChange, selectedValue, err
control={<Radio />}
label={
<div className="align-text-center">
- <h1 className="text-publish-text font-bold">{license.name}</h1>
+ <h1 className="text-darkGray-HC-white font-bold">{license.name}</h1>
</div>
}
/>
- <p className="mx-10 mb-5 text-publish-text">{license.description}</p>
+ <p className="mx-10 mb-5 text-darkGray-HC-white">{license.description}</p>
</div>
))}
</RadioGroup>
diff --git a/src/app/publicar/components/ModalIncompleteField.js b/src/app/publicar/components/ModalIncompleteField.js
index 5f01431e..b886d4c8 100644
--- a/src/app/publicar/components/ModalIncompleteField.js
+++ b/src/app/publicar/components/ModalIncompleteField.js
@@ -25,17 +25,17 @@ export default function ModalIncompleteField({ openModal, onClose}) {
}}
>
- <div className='absolute p-4 pb-14 rounded-lg self-center bg-white border-2 border-outlineColor'>
+ <div className='absolute p-4 pb-14 rounded-lg self-center bg-white-HC-dark border-2 border-ice-HC-white'>
<>
<div className='flex justify-end'>
- <IconButton onClick={onClose}>
- <CloseIcon fontSize='large' className='text-main-text' />
+ <IconButton onClick={onClose} className='group hover:bg-ice-HC-white'>
+ <CloseIcon fontSize='large' className='text-darkGray-HC-white-underline group-hover:text-darkGray-HC-dark' />
</IconButton>
</div>
<div className='px-12'>
- <p className='flex justify-center text-text-filter text-xl font-semibold pb-4'>
+ <p className='flex justify-center text-darkGray-HC-white text-xl font-semibold pb-4'>
Todos os campos do formulário são de preenchimento obrigatório!</p>
- <p className='text-center text-text-filter text-xl'>
+ <p className='text-center text-darkGray-HC-white text-xl'>
</p>
</div>
</>
diff --git a/src/app/publicar/components/ModalSuccess.js b/src/app/publicar/components/ModalSuccess.js
index 8fcafecd..2e22ffd9 100644
--- a/src/app/publicar/components/ModalSuccess.js
+++ b/src/app/publicar/components/ModalSuccess.js
@@ -53,25 +53,25 @@ export default function ModalSuccess({ openModal, onClose, permission, idResourc
}}
>
- <div className='absolute p-4 pb-14 rounded-lg self-center bg-white border-2 border-outlineColor'>
+ <div className='absolute p-4 pb-14 rounded-lg self-center bg-white-HC-dark border-2 border-ice-HC-white'>
<>
- <div className='flex justify-end'>
- <IconButton onClick={onClose}>
+ <div className='group flex justify-end'>
+ <IconButton onClick={onClose} className='group-hover:bg-ice-HC-white'>
<CloseIcon
fontSize='large'
- className='text-text-color'
+ className='text-darkGray-HC-white group-hover:text-darkGray-HC-dark'
/>
</IconButton>
</div>
<div className='px-12'>
- <p className='flex justify-center text-text-filter text-2xl font-semibold pb-6 '>Sucesso!</p>
- <p className='text-center text-text-filter text-xl'>
+ <p className='flex justify-center text-darkGray-HC-white text-2xl font-semibold pb-6 '>Sucesso!</p>
+ <p className='text-center text-darkGray-HC-white text-xl'>
{textSuccess(permission)}
</p>
</div>
</>
<div className='flex justify-center'>
- <a className='bg-secondary text-white rounded-lg p-2 mt-6' href={`/recurso/${idResource}`} >Visualizar recurso</a>
+ <a className='text-white-HC-dark-underline rounded-lg p-2 mt-6 border-turquoise-HC-white hover:bg-darkTurquoise-HC-dark bg-turquoise-HC-white hover:text-white-HC-underline outline outline-1 outline-ice-HC-white' href={`/recurso/${idResource}`} >Visualizar recurso</a>
</div>
</div>
</Modal>
diff --git a/src/app/publicar/components/RevisionForm.js b/src/app/publicar/components/RevisionForm.js
index fbe2ff1f..b52ebb86 100644
--- a/src/app/publicar/components/RevisionForm.js
+++ b/src/app/publicar/components/RevisionForm.js
@@ -137,18 +137,18 @@ export default function RevisionForm({ setStep, draft, setDraft }) {
<form>
<Paper
- className="rounded-lg p-10 max-xl:mx-5"
+ className="rounded-lg p-10 max-xl:mx-5 mx-5"
elevation={1}
sx={{
- backgroundColor: 'var(--white)',
- border: '2px solid var(--outlineColor)',
+ backgroundColor: 'var(--white-HC-dark)',
+ border: '2px solid var(--ice-HC-white)',
}}
>
- <div className=" flex flex-col text-center py-6">
- <p className="text-2xl text-publish-text pb-6">
+ <div className="flex flex-col text-center py-6">
+ <p className="text-2xl text-darkGray-HC-white pb-6">
Quase lá, agora só falta revisar e submeter!
</p>
- <p className="text-lg text-publish-text">
+ <p className="text-lg text-darkGray-HC-white">
Veja abaixo como o seu Recurso vai aparecer na MEC RED:
</p>
</div>
@@ -157,17 +157,17 @@ export default function RevisionForm({ setStep, draft, setDraft }) {
{/* Pré-visualização página de recurso */}
- <div className="flex flex-col lg:flex-row justify-center mt-4 mb-6 shadow-gray-color shadow-[inset_0px_0px_4px_0px_#B9CCCC] rounded-md">
- <div className="flex flex-col bg-main p-3 lg:w-[98%] flex-shrink-0 mt-4 mb-4 ">
+ <div className="flex flex-col lg:flex-row justify-center mt-4 mb-6 rounded-md">
+ <div className="flex flex-col bg-ice-HC-dark p-3 lg:w-[98%] flex-shrink-0 mt-4 mb-4 ">
<div className=" flex justify-center">
{/* Pré-visualização */}
<ResourcePreview learningObject={preview} />
</div>
- <div className="text-main-text mt-5 text-2xl font-bold">
+ <div className="text-darkGray-HC-white mt-5 text-2xl font-bold">
{/* Título */}
<h1>{draft.name}</h1>
</div>
- <div className="text-main-text mt-3 text-sm font-bold">
+ <div className="text-darkGray-HC-white mt-3 text-sm font-bold">
{/* tags */}
<Tags tags={preview.tags} />
</div>
@@ -189,20 +189,20 @@ export default function RevisionForm({ setStep, draft, setDraft }) {
onClick={() => setOpenModalCancel(true)}
type="button"
variant="text"
- className="normal-case w-36 text-base text-main-text font-bold"
+ className="normal-case w-36 mr-2 text-base text-darkGray-HC-white-underline font-bold outline outline-1 outline-ice-HC-white hover:bg-lightGray-HC-white hover:text-darkGray-HC-dark-underline"
>
Cancelar
</Button>
<Button
variant="text"
- className="normal-case w-36 text-base text-main-text font-bold"
+ className="normal-case w-36 mr-2 text-base text-darkGray-HC-white-underline font-bold outline outline-1 outline-ice-HC-white hover:bg-lightGray-HC-white hover:text-darkGray-HC-dark-underline"
onClick={() => setStep(curr => curr - 1)}
>
Voltar
</Button>
{permission ?
<Button
- className=" border-secondary w-36 rounded-lg hover:bg-secondary-hover bg-secondary text-base text-white font-bold normal-case flex "
+ className="w-36 rounded-lg hover:bg-turquoise-hover border-turquoise-HC-white hover:bg-darkTurquoise-HC-dark bg-turquoise-HC-white text-base text-white-HC-dark-underline hover:text-white-HC-underline font-bold normal-case flex "
variant="outlined"
onClick={fetchSubmit}
>
@@ -212,7 +212,7 @@ export default function RevisionForm({ setStep, draft, setDraft }) {
:
<Button
- className=" border-secondary w-36 rounded-lg hover:bg-secondary-hover bg-secondary text-base text-white font-bold normal-case flex "
+ className=" border-secondary w-36 rounded-lg hover:bg-turquoise-hover bg-turquoise text-base text-white-HC-dark-underline font-bold normal-case flex "
variant="outlined"
onClick={submitHomologation}
>
diff --git a/src/app/publicar/components/SelectOption.js b/src/app/publicar/components/SelectOption.js
index e40e2ca3..0ed92d5b 100644
--- a/src/app/publicar/components/SelectOption.js
+++ b/src/app/publicar/components/SelectOption.js
@@ -5,10 +5,10 @@ export default function SelectOption({ selected, handleSelection, subject }) {
return (
<div
onClick={() => handleSelection(subject)}
- className={`bg-main hover:bg-main-hover hover:cursor-pointer
+ className={`group bg-ice-HC-dark hover:bg-lightGray-HC-white hover:cursor-pointer
h-24 w-24 max-lg:h-20 max-lg:w-20 border-2 flex
flex-col m-2 items-center p-2 text-center justify-center rounded-lg ${
- selected.includes(subject) && "border-2 border-secondary bg-main-hover"
+ selected.includes(subject) && "border-2 border-turquoise-HC-white bg-lightGray-HC-white "
}`}
>
{/* <Image
@@ -20,10 +20,14 @@ export default function SelectOption({ selected, handleSelection, subject }) {
/> */}
<div
alt={subject.name}
- className="w-12 h-12 max-lg:w-8 max-lg:h-8 fill-current text-secondary"
+ className={`w-12 h-12 max-lg:w-8 max-lg:h-8 fill-current
+ ${selected.includes(subject) ? "text-turquoise-HC-dark" : "text-turquoise-HC-white group-hover:text-turquoise-HC-dark"}
+ `}
dangerouslySetInnerHTML={{ __html: subject.image }}
></div>
- <span className="text-secondary text-xs max-lg:text-xs">{subject.name}</span>
+ <span className={`text-xs max-lg:text-xs
+ ${selected.includes(subject) ? "text-turquoise-HC-dark-underline" : "text-turquoise-HC-white-underline group-hover:text-turquoise-HC-dark-underline"}
+ `}>{subject.name}</span>
</div>
);
}
diff --git a/src/app/publicar/components/Stepper.js b/src/app/publicar/components/Stepper.js
index fc79ecde..6401ec55 100644
--- a/src/app/publicar/components/Stepper.js
+++ b/src/app/publicar/components/Stepper.js
@@ -13,27 +13,27 @@ const steps = [
// Para alterar a cor do ícone ativo
const CustomStepLabel = styled(StepLabel)(({ theme }) => ({
'& .MuiStepIcon-root': {
- color: 'var(--gray-color)', // Default color
+ color: 'var(--mediumGray-HC-white)', // Default color
'&.Mui-active': {
- color: 'var(--secondary)', // Active color
- border: `2px solid var(--main)`, // Inner border
- boxShadow: '0 0 0 4px var(--gray-color)', // Outer border
+ color: 'var(--turquoise-HC-white)', // Active color
+ border: `2px solid var(--ice-HC-dark)`, // Inner border
+ boxShadow: '0 0 0 4px var(--mediumGray-HC-white)', // Outer border
borderRadius: '50%', // Circular appearance
},
'&.Mui-completed': {
- color: 'var(--gray-color)', // Completed step color
+ color: 'var(--mediumGray-HC-white)', // Completed step color
},
},
'& .MuiStepIcon-text': {
- fill: 'var(--black-hover)', // cor do texto dentro do ícone
+ fill: 'var(--black)', // cor do texto dentro do ícone
},
'& .MuiStepLabel-label': {
- color: 'var(--main-text-click)', // Default label color
+ color: 'var(--darkGray-HC-white)', // Default label color
'&.Mui-active': {
- color: 'var(--text-color)', // Active label color
+ color: 'var(--darkGray-HC-white)', // Active label color
},
'&.Mui-completed': {
- color: 'var(--text-color)', // Completed label color
+ color: 'var(--darkGray-HC-white)', // Completed label color
},
},
}));
diff --git a/src/app/publicar/components/SubjectSelection.js b/src/app/publicar/components/SubjectSelection.js
index c0b9d0f2..6ec059d2 100644
--- a/src/app/publicar/components/SubjectSelection.js
+++ b/src/app/publicar/components/SubjectSelection.js
@@ -9,7 +9,7 @@ import {
} from "@/app/components/Subjects";
function SubjectThemeTitle({ name }) {
- return <div className="text-publish-text">{name}</div>;
+ return <div className="text-darkGray-HC-white">{name}</div>;
}
export default function SubjectSelection({ handleSelection, selected, error }) {
diff --git a/src/app/publicar/components/SubmitLink.js b/src/app/publicar/components/SubmitLink.js
index 8bfa0b49..9f37ee38 100644
--- a/src/app/publicar/components/SubmitLink.js
+++ b/src/app/publicar/components/SubmitLink.js
@@ -46,19 +46,19 @@ export default function SubmitLink({ setUploading, setDraft, draft }) {
}
return (
<div className="flex flex-col w-full min-h-72 items-center justify-around">
- <div className={`flex h-24 w-24 my-5 mx-10 rounded-full items-center justify-center bg-main`}>
- <InsertLinkIcon fontSize="large" className="text-text-filter" />
+ <div className={`flex h-24 w-24 my-5 mx-10 rounded-full items-center justify-center bg-turquoise-HC-white`}>
+ <InsertLinkIcon fontSize="large" className="text-white-HC-dark" />
</div>
{
draft.link ?
<>
- <p className="text-publish-text break-words w-full">
+ <p className="text-darkGray-HC-white break-words w-full">
Link enviado: {draft.link}
</p>
<Button
- variant="contained"
- className="text-main font-bold px-10 mb-10 rounded-lg w-64 bg-secondary hover:bg-secondary-hover"
+ variant="outlined"
+ className="text-ice-HC-dark-underline font-bold px-10 mb-10 rounded-lg w-64 border-turquoise-HC-white hover:bg-darkTurquoise-HC-dark bg-turquoise-HC-white text-white-HC-dark-underline hover:text-white-HC-underline"
onClick={handleDeletSubmit}
>
EXCLUIR LINK
@@ -67,20 +67,22 @@ export default function SubmitLink({ setUploading, setDraft, draft }) {
:
<>
<div className="flex flex-col">
- <h1 className="h-full flex flex-col justify-center text-center text-2xl text-publish-text">
+ <h1 className="h-full flex flex-col justify-center text-center text-2xl text-darkGray-HC-white">
Envie o link de um recurso a partir de outro site.
</h1>
<TextField
error={!flag&&link}
helperText={!flag&&link ? "Preencha com um link válido" : ""}
fullWidth label="Exemplo: https://www.google.com.br"
- className="my-5"
+ className="my-5 bg-white p-3"
onChange={handleLink}
+ variant="outlined"
+
/>
</div>
<Button
- variant="contained"
- className="text-main font-bold px-10 mb-10 rounded-lg w-64 bg-secondary hover:bg-secondary-hover"
+ variant="outlined"
+ className="text-white-HC-dark-underline font-bold px-10 mb-10 rounded-lg w-64 border-turquoise-HC-white hover:bg-darkTurquoise-HC-dark bg-turquoise-HC-white hover:text-white-HC-underline"
onClick={handleSubmit}
>
ENVIAR LINK
diff --git a/src/app/publicar/components/SubmitThumbnail.js b/src/app/publicar/components/SubmitThumbnail.js
index b8ce197c..91368145 100644
--- a/src/app/publicar/components/SubmitThumbnail.js
+++ b/src/app/publicar/components/SubmitThumbnail.js
@@ -60,12 +60,12 @@ export default function SubmitThumbnail({ error, setThumb, thumbURL, setThumbURL
</div>
</>
}
- <p className="text-center text-sm text-publish-text pb-1"> A imagem pode ter o tamanho máximo de 4MB </p>
+ <p className="text-center text-sm text-darkGray-HC-white pb-1"> A imagem pode ter o tamanho máximo de 4MB </p>
<Button
- variant="contained"
+ variant="outlined"
component="label"
- className="text-white font-bold px-10 rounded-lg w-64 bg-secondary hover:bg-secondary-hover"
+ className="text-white-HC-dark-underline font-bold px-10 rounded-lg w-64 hover:text-white-HC-underline bg-turquoise-HC-white hover:bg-darkTurquoise-HC-dark border-1 border-transparent hover:border-turquoise-HC-white"
>
{thumbURL ? "Trocar Thumbnail" : "Adicionar thumbnail"}
<input type="file" hidden onChange={handleThumbnail} />
diff --git a/src/app/publicar/components/TagsInput.js b/src/app/publicar/components/TagsInput.js
index 41219b6e..ff75f5ce 100644
--- a/src/app/publicar/components/TagsInput.js
+++ b/src/app/publicar/components/TagsInput.js
@@ -6,12 +6,12 @@ export default function TagInput({ tags, handleTagDelete }) {
<div className="flex min-h-5 flex-wrap">
{tags.map((tag, index) => (
<Chip
- className="m-1 text-black-text"
+ className="m-1 text-black-HC-white"
key={index}
label={tag}
variant="outlined"
onDelete={() => handleTagDelete(tag)}
- deleteIcon={<CancelIcon className='text-gray-color' />}
+ deleteIcon={<CancelIcon className='text-lightGray-HC-white ' />}
/>
))}
</div>
diff --git a/src/app/publicar/components/UploadFile.js b/src/app/publicar/components/UploadFile.js
index ec277103..a87f91db 100644
--- a/src/app/publicar/components/UploadFile.js
+++ b/src/app/publicar/components/UploadFile.js
@@ -105,22 +105,22 @@ export default function UploadFile({ setUploading, setProgress, draft, file, set
<div id="form-file" className="flex flex-col w-full min-h-72 items-center justify-around">
<ErrorSize open={open} handleClose={() => setOpen(false)} />
<ErrorType open={openType} handleClose={() => setOpenType(false)} />
- <div className={`flex h-24 w-24 my-5 mx-10 rounded-full items-center justify-center bg-main`}>
- <FileUploadIcon fontSize="large" className="text-text-filter" />
+ <div className={`flex h-24 w-24 my-5 mx-10 rounded-full items-center justify-center bg-ice-HC-white`}>
+ <FileUploadIcon fontSize="large" className="text-darkGray-HC-dark" />
</div>
{!attachmentId ? (
<>
- <h1 className="text-center text-2xl text-publish-text">
+ <h1 className="text-center text-2xl text-darkGray-HC-white">
Envie o arquivo do recurso
</h1>
- <p className="text-center text-sm text-publish-text">
+ <p className="text-center text-sm text-darkGray-HC-white">
O arquivo pode ter o tamanho máximo de 200MB.
</p>
<Button
- variant="contained"
+ variant="outlined"
component="label"
- className="text-white font-bold px-10 rounded-lg w-64 bg-secondary hover:bg-secondary-hover"
+ className="text-white-HC-dark-underline font-bold px-10 rounded-lg w-64 hover:text-white-HC-underline bg-turquoise-HC-white hover:bg-darkTurquoise-HC-dark border-1 border-transparent hover:border-darkTurquoise-HC-white"
>
SELECIONAR ARQUIVO
<input type="file" hidden onChange={onFileChange} />
@@ -129,17 +129,17 @@ export default function UploadFile({ setUploading, setProgress, draft, file, set
) : (
<>
<div className="flex flex-col w-full items-center">
- <h1 className="text-center text-2xl text-main-text pb-4">
+ <h1 className="text-center text-2xl text-darkGray-HC-white pb-4">
Arquivo enviado com sucesso!
</h1>
<div>
- <h2 className="text-lg text-text-filter">Informações do arquivo enviado:</h2>
- <h1 className="pl-4 text-text-filter">Nome do arquivo: {file.name} <br /> Tipo do arquivo: {file.type}</h1>
+ <h2 className="text-lg text-darkGray-HC-white">Informações do arquivo enviado:</h2>
+ <h1 className="pl-4 text-darkGray-HC-white">Nome do arquivo: {file.name} <br /> Tipo do arquivo: {file.type}</h1>
</div>
<div className="flex pb-8 pt-4">
<Button
- className="text-white rounded-lg bg-secondary hover:bg-secondary-hover"
- variant="contained"
+ className="text-white-HC-dark-underline rounded-lg hover:text-white-HC-underline bg-turquoise-HC-white hover:bg-darkTurquoise-HC-dark border-1 border-transparent hover:border-turquoise-HC-white"
+ variant="outlined"
onClick={handleDelete}
>
Excluir arquivo
diff --git a/src/app/publicar/components/UploadForm.js b/src/app/publicar/components/UploadForm.js
index 94eb9dcb..a766456e 100644
--- a/src/app/publicar/components/UploadForm.js
+++ b/src/app/publicar/components/UploadForm.js
@@ -37,13 +37,13 @@ const CustomWidthTooltip = styled(({ className, ...props }) => (
))({
[`& .${tooltipClasses.tooltip}`]: {
maxWidth: 550,
- backgroundColor: " var(--grey-button)"
+ backgroundColor: " var(--lightGray-HC-dark)"
},
});
const longText = () => {
return (
- <p className='px-4 pt-2 text-start text-lg text-text-color p-4 border-2 border-main-hover'>
+ <p className='px-4 pt-2 text-start text-lg text-darkGray-HC-white p-4 border-2 border-lightGray-HC-white'>
Os tipos de arquivos suportados são:
<li className='text-sm'> Vídeos: mp4, mpeg, ogg, webm, 3gpp </li>
@@ -119,7 +119,7 @@ export default function UploadForm({ thumbURL, thumb, setThumb, setThumbURL, set
case "sending":
return (
<>
- <p className="text-center text-xl text-main-text pb-10"> Aguarde um segundo! Estamos fazendo o upload do seu recurso!</p>
+ <p className="text-center text-xl text-darkGray-HC-white-underline pb-10"> Aguarde um segundo! Estamos fazendo o upload do seu recurso!</p>
{progress > 0 && <LinearProgress variant="determinate" value={progress} sx={{ height: 20 }} className="w-full mt-4 mb-4" />}
</>
@@ -142,8 +142,8 @@ export default function UploadForm({ thumbURL, thumb, setThumb, setThumbURL, set
className="rounded-lg px-10 py-1 max-xl:mx-5"
elevation={1}
sx={{
- backgroundColor: 'var(--white)',
- border: '2px solid var(--outlineColor)',
+ backgroundColor: 'var(--white-HC-dark)',
+ border: '2px solid var(--ice-HC-white)',
}}
>
<div className="flex w-full justify-between">
@@ -156,7 +156,7 @@ export default function UploadForm({ thumbURL, thumb, setThumb, setThumbURL, set
/>
<div className="mt-10 pl-8">
<CustomWidthTooltip title={longText()} >
- <HelpIcon fontSize="large" className="text-secondary" />
+ <HelpIcon fontSize="large" className="text-turquoise-HC-white " />
</CustomWidthTooltip>
</div>
@@ -168,21 +168,21 @@ export default function UploadForm({ thumbURL, thumb, setThumb, setThumbURL, set
<SubmitThumbnail error={filled && !thumbURL} setThumb={setThumb} thumbURL={thumbURL} setThumbURL={setThumbURL} draft={draft} setDraft={setDraft} />
</Paper>
- <h1 className="text-publish-text font-light text-base pt-1 text-end max-xl:pr-6">
- Os campos marcados com * são de preenchimento obrigatório
+ <h1 className="text-darkGray-HC-white font-light text-base pt-1 text-end max-xl:pr-6">
+
</h1>
<div className="flex w-full justify-end p-3">
<Button
onClick={() => setOpenModalCancel(true)}
type="button"
variant="text"
- className="normal-case w-36 text-base text-main-text font-bold"
+ className="normal-case w-36 text-base text-darkGray-HC-white-underline font-bold mr-2 outline outline-1 outline-ice-HC-white bg-ice-HC-dark hover:bg-lightGray-HC-white hover:text-darkGray-HC-dark-underline"
>
Cancelar
</Button>
<Button
variant="text"
- className="normal-case w-36 text-base text-main-text font-bold"
+ className="normal-case w-36 text-base text-darkGray-HC-white-underline font-bold mr-2 outline outline-1 outline-ice-HC-white bg-ice-HC-dark hover:bg-lightGray-HC-white hover:text-darkGray-HC-dark-underline"
onClick={() => {
setDraft((curr) => ({
...curr,
@@ -196,7 +196,7 @@ export default function UploadForm({ thumbURL, thumb, setThumb, setThumbURL, set
Voltar
</Button>
<Button
- className=" border-secondary w-36 rounded-lg hover:bg-secondary-hover bg-secondary text-base text-white font-bold normal-case flex "
+ className=" w-36 rounded-lg border-turquoise-HC-white hover:bg-darkTurquoise-HC-dark bg-turquoise-HC-white text-base text-white-HC-dark-underline hover:text-white-HC-underline font-bold normal-case flex"
variant="outlined"
onClick={handleSubmitUpload}
>
diff --git a/src/app/recurso/[id]/components/actionButtons.js b/src/app/recurso/[id]/components/actionButtons.js
index 69745f64..7a67a35c 100644
--- a/src/app/recurso/[id]/components/actionButtons.js
+++ b/src/app/recurso/[id]/components/actionButtons.js
@@ -179,12 +179,12 @@ export default function ActionButtons({ learningObject, setNeedLoginOpen, state
!info ? null : <Button
id="conteudo"
key={buttonKey++}
- className=" first:bg-secondary group outline outline-1 outline-outlineColor group/button bg-white shadow-none flex justify-start rounded-xl p-1 m-1 normal-case text-sm min-w-min font-bold hover:bg-main-hover focus:bg-main-hover"
+ className=" first:bg-turquoise-HC-white first:hover:text-darkGray-HC-white first:text-darkGray-HC-dark first:hover:bg-lightGray-HC-dark text-darkGray-HC-white group outline outline-1 outline-ice-HC-white group/button shadow-none flex justify-start rounded-xl p-1 m-1 normal-case text-sm min-w-min font-bold bg-white-HC-dark hover:bg-lightGray-HC-white text-darkGray-HC-white-underline hover:text-darkGray-HC-dark focus:bg-ice-HC-dark"
onClick={info.action}
{...info.extraProps}
>
- <div className="p-1 text-main-text group-first:text-white ">{info.icon}</div>
- <div className="p-1 text-main-text group-first:text-white">{info.name}</div>
+ <div className="p-1">{info.icon}</div>
+ <div className="p-1">{info.name}</div>
</Button>
);
@@ -207,7 +207,7 @@ export default function ActionButtons({ learningObject, setNeedLoginOpen, state
{buttonInfo.map(genButton)}
</div>
:
- <div className="flex justify-start py-4 max-sm:no-scrollbar max-sm:overflow-x-auto animate-scrollHint">
+ <div className="flex justify-start py-4 max-sm:no-scrollbar max-sm:overflow-x-auto animate-scrollHint hover:text-darkGray-HC-dark">
{genButton(buttonInfo[1] || buttonInfo[2])}
</div>
}
diff --git a/src/app/recurso/[id]/components/collectModal.js b/src/app/recurso/[id]/components/collectModal.js
index 076e34e4..0da5abf3 100644
--- a/src/app/recurso/[id]/components/collectModal.js
+++ b/src/app/recurso/[id]/components/collectModal.js
@@ -140,10 +140,10 @@ export default function CollectModal({ open, onClose, idLogin, resourceId }) {
},
},
}}>
- <div className="flex flex-col justify-items-center bg-main p-3 rounded mx-2">
- <p className="text-xl text-main-text mb-2">Você já guardou esse recurso nessa coleção!</p>
+ <div className="flex flex-col justify-items-center bg-ice-HC-dark p-3 rounded mx-2">
+ <p className="text-xl text-darkGray-HC-white-underline mb-2">Você já guardou esse recurso nessa coleção!</p>
<button
- className=" text-sm p-2 w-[20%] text-main-text border-main rounded-lg normal-case h-9 font-bold bg-main hover:bg-main-hover"
+ className=" text-sm p-2 w-[20%] text-darkGray-HC-white-underline border-main rounded-lg normal-case h-9 font-bold bg-ice-HC-dark hover:bg-ice-HC-dark-hover"
onClick={() => onClose()}
>
Ok
@@ -162,10 +162,10 @@ export default function CollectModal({ open, onClose, idLogin, resourceId }) {
},
},
}}>
- <div className="flex flex-col justify-items-center bg-main p-3 rounded">
- <p className="text-xl text-main-text mb-2">Recurso guardado com sucesso!</p>
+ <div className="flex flex-col justify-items-center bg-ice-HC-dark p-3 rounded">
+ <p className="text-xl text-darkGray-HC-white-underline mb-2">Recurso guardado com sucesso!</p>
<button
- className=" text-sm p-2 w-[20%] text-main-text border-main rounded-lg normal-case h-9 font-bold bg-main hover:bg-main-hover"
+ className=" text-sm p-2 w-[20%] text-darkGray-HC-white-underline border-main rounded-lg normal-case h-9 font-bold bg-ice-HC-dark hover:bg-ice-HC-dark-hover"
onClick={() => onClose()}
>
Ok
@@ -182,11 +182,11 @@ export default function CollectModal({ open, onClose, idLogin, resourceId }) {
onClose={onClose}
className="grid place-items-center"
>
- <div className="flex flex-col w-[50%] bg-main p-5 md:w-[25%] h-[40%] -mt-[0%] sm:h-[70%] max-sm:h-[85%] max-sm:w-[85%] overflow-y-scroll max-sm:-mt-[25%] sm:-mt-[30%] md:-mt-[20%] xl:-mt-[0%] rounded-lg min-h-[250px] ">
+ <div className="flex flex-col w-[50%] bg-ice-HC-dark p-5 md:w-[25%] h-[40%] -mt-[0%] sm:h-[70%] max-sm:h-[85%] max-sm:w-[85%] overflow-y-scroll max-sm:-mt-[25%] sm:-mt-[30%] md:-mt-[20%] xl:-mt-[0%] rounded-lg min-h-[250px] ">
<ModalRepeat open={repeatedOpen} onClose={() => { setRepeatedOpen(false) }} />
<ModalSucess open={sucessOpen} onClose={() => { setSucessOpen(false) }} />
- <p className="text-2xl font-bold text-main-text">Guardar Recurso</p>
- <p className="text-xl text-main-text mb-2">Escolha a coleção que deseja guardar esse recurso</p>
+ <p className="text-2xl font-bold text-darkGray-HC-white-underline">Guardar Recurso</p>
+ <p className="text-xl text-darkGray-HC-white-underline mb-2">Escolha a coleção que deseja guardar esse recurso</p>
<div className="overflow-auto -mx-2">
{totalCount > 0 ?
collections.map((item, i) => {
@@ -195,15 +195,15 @@ export default function CollectModal({ open, onClose, idLogin, resourceId }) {
<div className="flex justify-between py-1 ">
<div>
{item["privacy"] === "private" ?
- <LockIcon className="mr-2 text-main-text" /> :
- <LockOpenIcon className="mr-2 text-main-text" />
+ <LockIcon className="mr-2 text-darkGray-HC-white-underline" /> :
+ <LockOpenIcon className="mr-2 text-darkGray-HC-white-underline" />
}
- <p className=" text-main-text text-lg inline">
+ <p className=" text-darkGray-HC-white-underline text-lg inline">
{item["name"]}
</p>
</div>
<button
- className=" inline px-2 text-sm text-main border-main rounded-lg normal-case h-9 font-bold bg-secondary hover:bg-secondary-hover"
+ className=" inline px-2 text-sm text-ice-HC-dark border-main rounded-lg normal-case h-9 font-bold bg-turquoise hover:bg-turquoise-hover"
onClick={() => saveResourceCol(item["id"], resourceId, i)}
>
Guardar
@@ -214,21 +214,21 @@ export default function CollectModal({ open, onClose, idLogin, resourceId }) {
)
})
:
- <div className="text-lg text-main-text mb-2 flex justify-center p-2 mt-5">Você ainda não possui coleções...</div>
+ <div className="text-lg text-darkGray-HC-white-underline mb-2 flex justify-center p-2 mt-5">Você ainda não possui coleções...</div>
}
</div>
<div className="flex justify-center pt-5 mt-5">
<CreateCollectionModal open={collectionOpen} onClose={() => setCollectionOpen(false)} idLogin={idLogin} />
<button
- className="inline-block px-2 text-sm text-main border-main rounded-lg normal-case h-9 font-bold bg-secondary hover:bg-secondary-hover"
+ className="inline-block px-2 text-sm text-ice-HC-dark border-main rounded-lg normal-case h-9 font-bold bg-turquoise hover:bg-turquoise-hover"
onClick={() => setCollectionOpen(true)}
alt="Criar Coleção"
>
Criar Coleção
</button>
<button
- className="text-sm p-2 w-[20%] text-main-text border-main rounded-lg normal-case h-9 font-bold bg-main hover:bg-main-hover"
+ className="text-sm p-2 w-[20%] text-darkGray-HC-white-underline border-main rounded-lg normal-case h-9 font-bold bg-ice-HC-dark hover:bg-ice-HC-dark-hover"
onClick={() => onClose()}
>
Fechar
diff --git a/src/app/recurso/[id]/components/collectionInfo.js b/src/app/recurso/[id]/components/collectionInfo.js
index 6a6b5de7..62d25ab6 100644
--- a/src/app/recurso/[id]/components/collectionInfo.js
+++ b/src/app/recurso/[id]/components/collectionInfo.js
@@ -41,14 +41,14 @@ export default function CollectionInfo({ resourceId, collectionId }) {
const isSm = useMediaQuery((theme) => theme.breakpoints.down('sm'));
return (
- <div className="flex flex-col bg-white p-4 rounded-lg mb-4">
+ <div className="flex flex-col bg-white-HC-dark p-4 rounded-lg mb-4">
<Loading loaded={Boolean(collection)}>
- <div className="text-main-text font-normal text-xl ml-2 mb-3">Recursos na coleção <Link className="font-bold hover:underline" href={"/colecao/" + collectionId}>{collection?.name}</Link></div>
+ <div className="text-darkGray-HC-white-underline font-normal text-xl ml-2 mb-3">Recursos na coleção <Link className="font-bold hover:underline" href={"/colecao/" + collectionId}>{collection?.name}</Link></div>
<div className="overflow-auto snap-y">
{collection?.collection_items.map((item, index) => {
let isCurrent = item["collectionable"]["id"] === Number(resourceId);
return (
- <div key={index} className={"snap-start rounded-lg " + (isCurrent ? "bg-main-hover" : "bg-inherit")}>
+ <div key={index} className={"snap-start rounded-lg " + (isCurrent ? "bg-ice-HC-dark-hover" : "bg-inherit")}>
<Cards
collectionSource={collectionId}
horizontal={!isSm}
diff --git a/src/app/recurso/[id]/components/comments.js b/src/app/recurso/[id]/components/comments.js
index 9ebb5c64..fb956258 100644
--- a/src/app/recurso/[id]/components/comments.js
+++ b/src/app/recurso/[id]/components/comments.js
@@ -96,19 +96,19 @@ export default function Comments({ learningObjectId }) {
return (
<div>
{comments?.length === 0 ?
- <div className="sm:hidden h-auto pt-4 my-4 bg-white flex flex-col items-center gap-4">
- <p className="text-text-filter text-xl">Ainda não possui comentários...</p>
+ <div className="sm:hidden h-auto pt-4 my-4 bg-white-HC-dark flex flex-col items-center gap-4">
+ <p className="text-darkGray-HC-white text-xl">Ainda não possui comentários...</p>
<CreateComments user={userData} setComments={setComments} comments={comments} logged={logged} learningObjectId={learningObjectId} newComment={newComment} setNewComment={setNewComment} handleSubmitComment={handleSubmitComment} />
</div>
:
- <Accordion className="sm:hidden bg-white">
+ <Accordion className="sm:hidden bg-white-HC-dark ">
<AccordionSummary
expandIcon={<ArrowDropDownIcon />}
aria-controls="panel2-content"
id="panel2-header"
>
<div className="flex flex-col">
- <div className="text-text-filter text-xl ">
+ <div className="text-darkGray-HC-white text-xl ">
{comments?.length} {comments?.length === 1 ? "comentário" : "comentários"}
</div>
</div>
@@ -117,7 +117,7 @@ export default function Comments({ learningObjectId }) {
<div className="h-auto max-h-80 overflow-x-auto">
<div>
- <div className="text-text-filter ">
+ <div className="text-darkGray-HC-white ">
{comments?.toReversed().map((message, index) => {
return <PrintComments
key={index}
@@ -139,16 +139,16 @@ export default function Comments({ learningObjectId }) {
</Accordion>
}
- <Paper className="bg-white outline outline-1 outline-outlineColor shadow-none flex flex-shrink-0 rounded-xl p-4 m-1 normal-case text-sm font-bold items-center max-sm:hidden">
+ <Paper className="bg-white-HC-dark outline outline-1 outline-ice-HC-white shadow-none flex flex-shrink-0 rounded-xl p-4 m-1 normal-case text-sm font-bold items-center max-sm:hidden">
<div className="w-full">
- <div className="text-text-filter text-xl ">
+ <div className="text-darkGray-HC-white text-xl ">
{comments?.length} {comments?.length === 1 ? "comentário" : "comentários"}
</div>
<div>
<CreateComments user={userData} setComments={setComments} comments={comments} logged={logged} learningObjectId={learningObjectId} newComment={newComment} setNewComment={setNewComment} handleSubmitComment={handleSubmitComment} />
</div>
<div>
- <div className="text-text-filter ">
+ <div className="text-darkGray-HC-white ">
{comments?.toReversed().map((message, index) => {
return <PrintComments
key={index}
diff --git a/src/app/recurso/[id]/components/complaintsModal.js b/src/app/recurso/[id]/components/complaintsModal.js
index 8f163335..b76bef23 100644
--- a/src/app/recurso/[id]/components/complaintsModal.js
+++ b/src/app/recurso/[id]/components/complaintsModal.js
@@ -121,31 +121,31 @@ export default function ComplaintModal({ open, onClose, name, id, setSubmitted }
},
}}
>
- <div className="w-[40%] bg-main p-5 rounded-lg">
- <div className="flex flex-col bg-main p-5 rounded-lg">
- <div className="flex justify-between items-center text-main-text font-bold text-2xl pb-4">
+ <div className="w-[40%] bg-ice-HC-dark p-5 rounded-lg">
+ <div className="flex flex-col bg-ice-HC-dark p-5 rounded-lg">
+ <div className="flex justify-between items-center text-darkGray-HC-white-underline font-bold text-2xl pb-4">
Recurso a ser votado
<CloseIcon onClick={onClose} sx={{ color: "#6c8080", fontSize: "2s5px", cursor: "pointer" }} />
</div>
{cons ? (
- <p className="pt-3 text-lg text-main-text">
+ <p className="pt-3 text-lg text-darkGray-HC-white-underline">
Você está votando para que o recurso retorne para a MEC RED. Você confirma essa avaliação?
</p>
) : (
- <p className="pt-3 text-lg text-main-text">
+ <p className="pt-3 text-lg text-darkGray-HC-white-underline">
Você está votando para que o recurso seja removido para a MEC RED. Você confirma essa avaliação?
</p>
)}
<div className="flex flex-row justify-end pt-5">
<button
onClick={onClose}
- className="bg-main px-3 py-2 mr-1 rounded-lg text-main-text hover:bg-main-hover"
+ className="bg-ice-HC-dark px-3 py-2 mr-1 rounded-lg text-darkGray-HC-white-underline hover:bg-ice-HC-dark-hover"
>
Alterar avaliação
</button>
<button
onClick={() => {sendComplaint(id, pro, cons); onClose()}}
- className="bg-secondary px-3 py-2 ml-1 rounded-lg text-white font-semibold hover:bg-secondary-hover"
+ className="bg-turquoise px-3 py-2 ml-1 rounded-lg text-white-HC-dark-underline font-semibold hover:bg-turquoise-hover"
>
Confirmar
</button>
@@ -171,18 +171,18 @@ export default function ComplaintModal({ open, onClose, name, id, setSubmitted }
},
}}
>
- <div className="flex flex-col bg-main p-5 rounded-lg ">
+ <div className="flex flex-col bg-ice-HC-dark p-5 rounded-lg ">
<div className="flex gap-12 justify-center items-center pb-2">
- <p className="flex justify-center text-2xl text-main-text font-bold">{`Você está avaliando a denúncia ${name}`}</p>
+ <p className="flex justify-center text-2xl text-darkGray-HC-white-underline font-bold">{`Você está avaliando a denúncia ${name}`}</p>
<CloseIcon onClick={onClose} sx={{ color: "#6c8080", fontSize: "2s5px" }} />
</div>
{message === "voted" ? <Alert severity="info">Você já votou nesse recurso!</Alert> : message === "ok" ?
<Alert severity="success">Seu voto foi computado com sucesso!</Alert>
: message === "error" ? <Alert severity="error">Erro ao computar voto, tente novamente</Alert> : null}
- <p className="text-main-text pb-4 pt-4 text-lg font-semibold">Verifique as seguintes denúncias sobre o recurso</p>
+ <p className="text-darkGray-HC-white-underline pb-4 pt-4 text-lg font-semibold">Verifique as seguintes denúncias sobre o recurso</p>
<ul className="list-disc list-inside">
{questions.map((item, i) => (
- <li key={i} className="text-main-text text-lg font-normal">
+ <li key={i} className="text-darkGray-HC-white-underline text-lg font-normal">
{item.reason}: {item.description}
</li>
))}
@@ -190,14 +190,14 @@ export default function ComplaintModal({ open, onClose, name, id, setSubmitted }
<div className="flex justify-end mt-7">
<button
onClick={() => handleOpen(1, 0)}
- className="bg-secondary px-3 py-2 mr-1 rounded-lg text-white hover:bg-main-hover font-semibold"
+ className="bg-turquoise px-3 py-2 mr-1 rounded-lg text-white-HC-dark-underline hover:bg-ice-HC-dark-hover font-semibold"
>
Votar para reativar
</button>
<button
onClick={() => handleOpen(0, 1)}
- className="bg-red px-3 py-2 ml-1 rounded-lg text-white font-semibold hover:bg-secondary-hover"
+ className="bg-red px-3 py-2 ml-1 rounded-lg text-white-HC-dark-underline font-semibold hover:bg-turquoise-hover"
>
Votar para remover
</button>
diff --git a/src/app/recurso/[id]/components/createComments.js b/src/app/recurso/[id]/components/createComments.js
index 9b77b33e..86fc2a70 100644
--- a/src/app/recurso/[id]/components/createComments.js
+++ b/src/app/recurso/[id]/components/createComments.js
@@ -9,19 +9,19 @@ import SendIcon from '@mui/icons-material/Send';
function getRandomBg(id) {
const colors = [
- "bg-secondary",
+ "bg-turquoise",
"bg-orange",
- "bg-secondary-hover",
- "bg-orange-hover",
+ "bg-turquoise-hover",
+ "bg-darkOrange-HC-gray ",
"bg-violet",
"bg-pink",
"bg-red",
- "bg-text-color",
- "bg-text-color-click",
- "bg-button-filters",
- "bg-text-filter",
- "bg-other-links",
- "bg-blue-button",
+ "bg-darkGray-HC-white",
+ "bg-darkGray-HC-white-click",
+ "bg-ice-HC-dark ",
+ "bg-darkGray-HC-white",
+ "bg-darkGray-HC-white",
+ "bg-turquoise-HC-dark",
]
return colors[id % colors.length];
@@ -53,12 +53,12 @@ export default function CreateComments({ user, logged, handleSubmitComment, newC
className="max-sm:w-10 max-sm:h-10"
/>
) : (
- <div className={`flex items-center justify-center text-xl font-bold text-main rounded-full h-20 w-20 max-sm:h-10 max-sm:w-10 ${getRandomBg(user?.id)}`} >{user?.name[0]}</div>
+ <div className={`flex items-center justify-center text-xl font-bold text-ice-HC-dark rounded-full h-20 w-20 max-sm:h-10 max-sm:w-10 ${getRandomBg(user?.id)}`} >{user?.name[0]}</div>
)}
</>
) :
- <div className={`flex items-center justify-center outline outline-1 outline-gray-color text-xl m-2 font-bold text-main rounded-full h-20 w-20 max-sm:h-8 max-sm:w-8 bg-gray-color`} > <PersonIcon style={{ fontSize: '50px' }} /> </div>
+ <div className={`flex items-center justify-center outline outline-1 outline-gray-color text-xl m-2 font-bold text-ice-HC-dark rounded-full h-20 w-20 max-sm:h-8 max-sm:w-8 bg-lightGray-HC-white `} > <PersonIcon style={{ fontSize: '50px' }} /> </div>
}
</div>
@@ -66,13 +66,13 @@ export default function CreateComments({ user, logged, handleSubmitComment, newC
<textarea
type="text"
placeholder="Comente aqui..."
- className="bg-main rounded-2xl p-4 w-full outline outline-1 outline-outlineColor text-text-filter font-normal"
+ className="bg-ice-HC-dark rounded-2xl p-4 w-full outline outline-1 outline-ice-HC-white text-darkGray-HC-white font-normal"
onChange={handleInputChange}
value={newComment}
/>
<div className="flex justify-end gap-2 mt-2">
- <button className="w-24 h-8 rounded-lg text-text-filter text-sm hover:bg-main" onClick={() => setNewComment("")}> cancelar </button>
- <button className="bg-secondary w-24 h-8 rounded-lg text-white text-sm hover:bg-secondary-hover" onClick={() => {
+ <button className="w-24 h-8 border-black rounded-lg text-darkGray-HC-white-underline text-sm hover:bg-ice-HC-dark outline outline-1 outline-ice-HC-white" onClick={() => setNewComment("")}> cancelar </button>
+ <button className="bg-turquoise-HC-white hover:bg-darkTurquoise-HC-dark hover:text-white w-24 h-8 rounded-lg text-white-HC-dark-underline text-sm hover:bg-turquoise-hover outline outline-1 outline-ice-HC-white" onClick={() => {
if (!logged) setNeedLoginOpen(true)
handleSubmitComment()
}}> comentar </button>
@@ -85,7 +85,7 @@ export default function CreateComments({ user, logged, handleSubmitComment, newC
maxRows={3}
onChange={handleInputChange}
value={newComment}
- className="bg-main text-text-filter"
+ className="bg-ice-HC-dark text-darkGray-HC-white"
style={{
width: '100%',
minHeight: '4px',
@@ -99,7 +99,7 @@ export default function CreateComments({ user, logged, handleSubmitComment, newC
if (!logged) setNeedLoginOpen(true)
handleSubmitComment()
- }}><SendIcon className="text-secondary" /></button>
+ }}><SendIcon className="text-turquoise-HC-underline " /></button>
</div>
</div>
<NeedLoginModal open={needLoginOpen} setOpen={setNeedLoginOpen} />
diff --git a/src/app/recurso/[id]/components/deleteCommentModal.js b/src/app/recurso/[id]/components/deleteCommentModal.js
index 1693ee44..63e6186f 100644
--- a/src/app/recurso/[id]/components/deleteCommentModal.js
+++ b/src/app/recurso/[id]/components/deleteCommentModal.js
@@ -43,15 +43,15 @@ export default function DeleteCommentModal({ open, onClose, learningObjectId, id
},
}}
>
- <div className="bg-main p-6 rounded-lg">
+ <div className="bg-ice-HC-dark p-6 rounded-lg">
<div className="flex justify-center mb-4">
- <p className="text-main-text text-xl font-bold ">Tem certeza que deseja excluir esse comentário?</p>
+ <p className="text-darkGray-HC-white-underline text-xl font-bold ">Tem certeza que deseja excluir esse comentário?</p>
</div>
- <p className="text-main-text text-lg ">A exclusão de um comentário é permanente. Não é possível desfazer essa ação.</p>
+ <p className="text-darkGray-HC-white-underline text-lg ">A exclusão de um comentário é permanente. Não é possível desfazer essa ação.</p>
<div className="flex justify-end mt-4">
- <button onClick={onClose} className="rounded-lg p-3 bg-main hover:bg-main-hover text-main-text mr-1">Cancelar</button>
- <button onClick={() => deleteComment()} className="rounded-lg p-3 bg-secondary hover:bg-secondary-hover text-white">Excluir Comentário</button>
+ <button onClick={onClose} className="rounded-lg p-3 bg-ice-HC-dark hover:bg-ice-HC-dark-hover text-darkGray-HC-white-underline mr-1">Cancelar</button>
+ <button onClick={() => deleteComment()} className="rounded-lg p-3 bg-turquoise hover:bg-turquoise-hover text-white-HC-dark-underline">Excluir Comentário</button>
</div>
</div>
</Modal>
diff --git a/src/app/recurso/[id]/components/deleteModal.js b/src/app/recurso/[id]/components/deleteModal.js
index ffd189f2..bb749f64 100644
--- a/src/app/recurso/[id]/components/deleteModal.js
+++ b/src/app/recurso/[id]/components/deleteModal.js
@@ -50,15 +50,15 @@ export default function DeleteModal({ open, onClose, resourceId }) {
},
}}
>
- <div className="bg-main p-6 rounded-lg">
+ <div className="bg-ice-HC-dark p-6 rounded-lg">
<div className="flex justify-center mb-4">
- <p className="text-main-text text-xl font-bold ">Deletar recurso</p>
+ <p className="text-darkGray-HC-white-underline text-xl font-bold ">Deletar recurso</p>
</div>
- <p className="text-main-text text-lg ">Tem certeza que deseja deletar esse recurso?</p>
+ <p className="text-darkGray-HC-white-underline text-lg ">Tem certeza que deseja deletar esse recurso?</p>
<div className="flex justify-end mt-4">
- <button onClick={onClose} className="rounded-lg p-3 bg-main hover:bg-main-hover text-main-text mr-1">Voltar ao recurso</button>
- <button onClick={() => deleteResource()} className="rounded-lg p-3 bg-secondary hover:bg-secondary-hover text-white">Confirmar</button>
+ <button onClick={onClose} className="rounded-lg p-3 bg-ice-HC-dark hover:bg-ice-HC-dark-hover text-darkGray-HC-white-underline mr-1">Voltar ao recurso</button>
+ <button onClick={() => deleteResource()} className="rounded-lg p-3 bg-turquoise hover:bg-turquoise-hover text-white-HC-dark-underline">Confirmar</button>
</div>
</div>
</Modal>
diff --git a/src/app/recurso/[id]/components/description.js b/src/app/recurso/[id]/components/description.js
index 7edc2aa9..eca549de 100644
--- a/src/app/recurso/[id]/components/description.js
+++ b/src/app/recurso/[id]/components/description.js
@@ -1,8 +1,8 @@
export default function Description({ data }) {
return (
- <div className="flex flex-col p-1 text-main-text">
+ <div className="flex flex-col p-1 text-darkGray-HC-white">
<div className="font-bold text-lg">Descrição deste Recurso</div>
- <div className="text-main-text p-3">{data}</div>
+ <div className="text-darkGray-HC-white p-3">{data}</div>
</div>
);
}
diff --git a/src/app/recurso/[id]/components/editComments.js b/src/app/recurso/[id]/components/editComments.js
index 697ed4d0..d6fe2eb7 100644
--- a/src/app/recurso/[id]/components/editComments.js
+++ b/src/app/recurso/[id]/components/editComments.js
@@ -47,8 +47,8 @@ export default function EditComment({ setEdit, learningObjectId, comment, commen
return (
<>
<div className="flex flex-col gap-1 w-full ">
- <div className="bg-main rounded-lg p-4 outline outline-1 outline-outlineColor ">
- <div className="text-lg pb-2 text-text-filter">
+ <div className="bg-ice-HC-dark rounded-lg p-4 outline outline-1 outline-ice-HC-white ">
+ <div className="text-lg pb-2 text-darkGray-HC-white">
{comment.user.name}
</div>
@@ -56,13 +56,13 @@ return (
<textarea
type="text"
placeholder="Comente aqui..."
- className="bg-main rounded-2xl p-4 w-full outline outline-1 outline-outlineColor text-text-filter font-normal"
+ className="bg-ice-HC-dark rounded-2xl p-4 w-full outline outline-1 outline-ice-HC-white text-darkGray-HC-white font-normal"
onChange={handleInputChange}
value={editMessage}
/>
<div className="flex justify-end gap-2 mt-2">
- <button className="w-24 h-8 rounded-lg text-text-filter text-sm hover:bg-main" onClick={() => { setEdit(false); setEditMessage(comment?.description) }}> cancelar </button>
- <button className="bg-secondary w-24 h-8 rounded-lg text-white text-sm hover:bg-secondary-hover" onClick={handleSubmitEdit}> editar </button>
+ <button className="w-24 h-8 rounded-lg text-darkGray-HC-white text-sm hover:bg-ice-HC-dark" onClick={() => { setEdit(false); setEditMessage(comment?.description) }}> cancelar </button>
+ <button className="bg-turquoise w-24 h-8 rounded-lg text-white-HC-dark-underline text-sm hover:bg-turquoise-hover" onClick={handleSubmitEdit}> editar </button>
</div>
</div>
diff --git a/src/app/recurso/[id]/components/homologationModal.js b/src/app/recurso/[id]/components/homologationModal.js
index cfb94511..03dc2de8 100644
--- a/src/app/recurso/[id]/components/homologationModal.js
+++ b/src/app/recurso/[id]/components/homologationModal.js
@@ -85,13 +85,13 @@ export default function HomologationModal({ open, onClose, name, id, setSubmitte
},
}}
>
- <div className="flex flex-col bg-main p-5 rounded-lg ">
- <p className="flex justify-center text-main-text font-bold text-2xl">Recurso a ser aprovado</p>
- <p className="pt-3 text-lg text-main-text ">Este recurso será publicado na MEC RED. Você confirma essa avaliação?</p>
+ <div className="flex flex-col bg-ice-HC-dark p-5 rounded-lg ">
+ <p className="flex justify-center text-darkGray-HC-white-underline font-bold text-2xl">Recurso a ser aprovado</p>
+ <p className="pt-3 text-lg text-darkGray-HC-white-underline ">Este recurso será publicado na MEC RED. Você confirma essa avaliação?</p>
<div className="flex flex-row justify-end pt-5">
- <button onClick={() => onClose()} className="bg-main px-3 py-2 mr-1 rounded-lg text-main-text hover:bg-main-hover">Alterar avaliação</button>
- <button onClick={handleSubmit} className="bg-secondary px-3 py-2 ml-1 rounded-lg text-white font-semibold hover:bg-secondary-hover">Confirmar</button>
+ <button onClick={() => onClose()} className="bg-ice-HC-dark px-3 py-2 mr-1 rounded-lg text-darkGray-HC-white-underline hover:bg-ice-HC-dark-hover">Alterar avaliação</button>
+ <button onClick={handleSubmit} className="bg-turquoise px-3 py-2 ml-1 rounded-lg text-white-HC-dark-underline font-semibold hover:bg-turquoise-hover">Confirmar</button>
</div>
</div>
@@ -115,10 +115,10 @@ export default function HomologationModal({ open, onClose, name, id, setSubmitte
},
}}
>
- <div className="flex flex-col bg-main p-5 rounded-lg ">
- <p className="pt-3 text-lg text-main-text ">É necessário que todas perguntas sejam respondidas.</p>
+ <div className="flex flex-col bg-ice-HC-dark p-5 rounded-lg ">
+ <p className="pt-3 text-lg text-darkGray-HC-white-underline ">É necessário que todas perguntas sejam respondidas.</p>
<div className="flex flex-row justify-end pt-5">
- <button onClick={() => onClose()} className="bg-main px-3 py-2 mr-1 rounded-lg text-main-text hover:bg-main-hover">Ok</button>
+ <button onClick={() => onClose()} className="bg-ice-HC-dark px-3 py-2 mr-1 rounded-lg text-darkGray-HC-white-underline hover:bg-ice-HC-dark-hover">Ok</button>
</div>
</div>
@@ -143,18 +143,18 @@ export default function HomologationModal({ open, onClose, name, id, setSubmitte
},
}}
>
- <div className="flex flex-col bg-main p-5 rounded-lg ">
+ <div className="flex flex-col bg-ice-HC-dark p-5 rounded-lg ">
<ConfirmModal open={confirmOpen} onClose={() => { setConfirmOpen(false) }} />
<NotSucessModal open={notSucess} onClose={() => { setNotSucess(false) }} />
- <p className="flex justify-center text-2xl text-main-text font-bold pb-2">{`Você está avaliando a submissão ${name}`}</p>
- <p className="text-main-text pb-4 pt-4 text-lg font-semibold">Esse recurso está em conformidade com os critérios? Marque as opções e justifique aquela(s) que não estiverem em conformidade.</p>
+ <p className="flex justify-center text-2xl text-darkGray-HC-white-underline font-bold pb-2">{`Você está avaliando a submissão ${name}`}</p>
+ <p className="text-darkGray-HC-white-underline pb-4 pt-4 text-lg font-semibold">Esse recurso está em conformidade com os critérios? Marque as opções e justifique aquela(s) que não estiverem em conformidade.</p>
{questions.map((item, i) => {
return (
<div key={i} className="pb-4">
- <p className="text-main-text text-lg" key={i}>{item.description}</p>
+ <p className="text-darkGray-HC-white-underline text-lg" key={i}>{item.description}</p>
<RadioGroup row onChange={(e) => { handleRadios(e, item.id) }}>
- <FormControlLabel value={"Não"} control={<Radio />} label="Não" className="text-main-text" />
- <FormControlLabel value={"Sim"} control={<Radio />} label="Sim" className="text-main-text" />
+ <FormControlLabel value={"Não"} control={<Radio />} label="Não" className="text-darkGray-HC-white-underline" />
+ <FormControlLabel value={"Sim"} control={<Radio />} label="Sim" className="text-darkGray-HC-white-underline" />
</RadioGroup>
</div>
)
@@ -172,8 +172,8 @@ export default function HomologationModal({ open, onClose, name, id, setSubmitte
variant="standard"
/>
<div className="flex justify-end mt-5">
- <button onClick={onClose} className="bg-main px-3 py-2 mr-1 rounded-lg text-main-text hover:bg-main-hover">Cancelar</button>
- <button onClick={() => { payload.length < 4 ? setNotSucess(true) : setConfirmOpen(true) }} className="bg-secondary px-3 py-2 ml-1 rounded-lg text-white font-semibold hover:bg-secondary-hover">Enviar</button>
+ <button onClick={onClose} className="bg-ice-HC-dark px-3 py-2 mr-1 rounded-lg text-darkGray-HC-white-underline hover:bg-ice-HC-dark-hover">Cancelar</button>
+ <button onClick={() => { payload.length < 4 ? setNotSucess(true) : setConfirmOpen(true) }} className="bg-turquoise px-3 py-2 ml-1 rounded-lg text-white-HC-dark-underline font-semibold hover:bg-turquoise-hover">Enviar</button>
</div>
</div>
</Modal>
diff --git a/src/app/recurso/[id]/components/metrics.js b/src/app/recurso/[id]/components/metrics.js
index ba92b0d3..2a6274e6 100644
--- a/src/app/recurso/[id]/components/metrics.js
+++ b/src/app/recurso/[id]/components/metrics.js
@@ -11,13 +11,13 @@ const images = [
const genMetric = ({ icon, name, data }) => {
return (
<div key={name} className="p-0 flex items-center">
- <div className="p-2 text-main-text">
+ <div className="p-2 text-darkGray-HC-white">
{icon}
</div>
- <div className="text-main-text font-bold">
+ <div className="text-darkGray-HC-white font-bold">
{name}:
</div>
- <div className="m-1 text-main-text">
+ <div className="m-1 text-darkGray-HC-white">
{data}
</div>
</div>
@@ -26,12 +26,12 @@ const genMetric = ({ icon, name, data }) => {
export default function Specifications({ learningObject }) {
const metricInfo = [
- { icon: <IconViews className="text-2xl" />, name: "Visualizações", data: learningObject.views_count },
+ { icon: <IconViews className="text-2xl invertLogo-HC-white" />, name: "Visualizações", data: learningObject.views_count },
{ icon: <FavoriteOutlinedIcon />, name: "Curtidas", data: learningObject.likes_count },
{ icon: <IoMdShareAlt className="text-2xl" />, name: "Compartilhamentos", data: learningObject.shares_count },
];
return (
- <div className="flex flex-col p-1 text-main-text">
+ <div className="flex flex-col p-1 text-darkGray-HC-white">
<div className="font-bold text-lg">Métricas deste Recurso</div>
<div className="text-sm grid grid-cols-1 sm:grid-cols-2">
{metricInfo.map(genMetric)}
diff --git a/src/app/recurso/[id]/components/printComments.js b/src/app/recurso/[id]/components/printComments.js
index 5a3dceb6..891d6651 100644
--- a/src/app/recurso/[id]/components/printComments.js
+++ b/src/app/recurso/[id]/components/printComments.js
@@ -10,19 +10,19 @@ import { mecredURL } from "@/axiosConfig";
function getRandomBg(id) {
const colors = [
- "bg-secondary",
+ "bg-turquoise",
"bg-orange",
- "bg-secondary-hover",
- "bg-orange-hover",
+ "bg-turquoise-hover",
+ "bg-darkOrange-HC-gray ",
"bg-violet",
"bg-pink",
"bg-red",
- "bg-text-color",
- "bg-text-color-click",
- "bg-button-filters",
- "bg-text-filter",
- "bg-other-links",
- "bg-blue-button",
+ "bg-darkGray-HC-white",
+ "bg-darkGray-HC-white-click",
+ "bg-ice-HC-dark ",
+ "bg-darkGray-HC-white",
+ "bg-darkGray-HC-white",
+ "bg-turquoise-HC-dark",
]
return colors[id % colors.length];
@@ -71,7 +71,7 @@ export default function PrintComments({ comment, userData, learningObjectId, com
/>
) : (
- <div className={`flex items-center justify-center text-xl m-2 font-bold text-main rounded-full h-20 w-20 max-sm:h-10 max-sm:w-10 ${getRandomBg(comment.user.id)}`} >{comment.user.name[0]}</div>
+ <div className={`flex items-center justify-center text-xl m-2 font-bold text-ice-HC-dark rounded-full h-20 w-20 max-sm:h-10 max-sm:w-10 ${getRandomBg(comment.user.id)}`} >{comment.user.name[0]}</div>
)}
</Link>
</div>
@@ -84,8 +84,8 @@ export default function PrintComments({ comment, userData, learningObjectId, com
:
<div className="flex flex-col gap-1 w-full ">
- <div className="bg-main rounded-lg p-4 outline outline-1 outline-outlineColor ">
- <div className="text-lg pb-2 text-text-filter max-sm:text-sm">
+ <div className="bg-ice-HC-dark rounded-lg p-4 outline outline-1 outline-ice-HC-white ">
+ <div className="text-lg pb-2 text-darkGray-HC-white max-sm:text-sm">
{comment.user.name}
</div>
<div className="font-normal">
@@ -97,8 +97,8 @@ export default function PrintComments({ comment, userData, learningObjectId, com
{timeFunction(comment.updated_at)}
{(userData.id === comment.user.id) &&
<div className=" flex gap-2">
- <button className="hover:bg-main p-1 rounded-lg" onClick={() => setEdit(true)}> editar </button>
- <button className="hover:bg-main p-1 rounded-lg" onClick={() => setOpenDeleteModal(true)}> excluir </button>
+ <button className="hover:bg-ice-HC-dark p-1 rounded-lg" onClick={() => setEdit(true)}> editar </button>
+ <button className="hover:bg-ice-HC-dark p-1 rounded-lg" onClick={() => setOpenDeleteModal(true)}> excluir </button>
</div>
}
</div>
diff --git a/src/app/recurso/[id]/components/relatedResources.js b/src/app/recurso/[id]/components/relatedResources.js
index bbe2c9b2..12322b2f 100644
--- a/src/app/recurso/[id]/components/relatedResources.js
+++ b/src/app/recurso/[id]/components/relatedResources.js
@@ -51,7 +51,7 @@ export default function RelatedResources({ learningObject }) {
return (
<Loading loaded={got}>
<div className="flex flex-col">
- <div className="text-main-text font-bold text-xl">Recursos Relacionados</div>
+ <div className="text-darkGray-HC-white-underline font-bold text-xl">Recursos Relacionados</div>
<div>
{related.map((item, index) => {
return (
diff --git a/src/app/recurso/[id]/components/reportModal.js b/src/app/recurso/[id]/components/reportModal.js
index bfb5d0c1..c735f0ed 100644
--- a/src/app/recurso/[id]/components/reportModal.js
+++ b/src/app/recurso/[id]/components/reportModal.js
@@ -22,11 +22,11 @@ const ModalSucess = ({ open, onClose, modalOnClose }) => {
},
},
}}>
- <div className="flex flex-col justify-center bg-main p-5 rounded">
- <p className="text-xl justify-center flex text-main-text mb-2">Agradecemos a sua denúncia</p>
+ <div className="flex flex-col justify-center bg-ice-HC-dark p-5 rounded">
+ <p className="text-xl justify-center flex text-darkGray-HC-white-underline mb-2">Agradecemos a sua denúncia</p>
<div className="flex flex-row mt-2">
<button
- className=" text-sm p-2 ml-1 text-main-text border-main rounded-lg normal-case h-9 font-bold bg-main hover:bg-main-hover"
+ className=" text-sm p-2 ml-1 text-darkGray-HC-white-underline border-main rounded-lg normal-case h-9 font-bold bg-ice-HC-dark hover:bg-ice-HC-dark-hover"
onClick={() => { onClose(); modalOnClose() }}
>
Fechar
@@ -107,14 +107,14 @@ export default function ReportModal({ open, onClose, learningObject, setReported
},
}}
>
- <div className="flex flex-col bg-main p-3 rounded-lg">
- <div className="text-xl font-bold text-main-text">Reportar</div>
+ <div className="flex flex-col bg-ice-HC-dark p-3 rounded-lg">
+ <div className="text-xl font-bold text-darkGray-HC-white-underline">Reportar</div>
<div className="p-3 flex flex-col">
- <div className="text-base font-bold text-main-text">
+ <div className="text-base font-bold text-darkGray-HC-white-underline">
O que está acontecendo?
</div>
<form onSubmit={handleSubmit}>
- <FormControl className="p-3 text-main-text">
+ <FormControl className="p-3 text-darkGray-HC-white-underline">
<RadioGroup
defaultValue={"1"}
name="report-radio-group"
@@ -161,17 +161,17 @@ export default function ReportModal({ open, onClose, learningObject, setReported
'& .MuiInput-root::before': { borderBottomColor: 'var(--grey)' }, // Default border
'& .Mui-error': { color: 'var(--red)' }, // Error text color
'& .MuiFormHelperText-root': { color: 'var(--grey)' }, // Helper text color
- '& .MuiInputBase-input': { color: 'var(--black-text)' },
+ '& .MuiInputBase-input': { color: 'var(--black-HC-white)' },
}}
/>
- <div className="text-sm text-end font-normal text-main-text">
+ <div className="text-sm text-end font-normal text-darkGray-HC-white-underline">
Os campos preenchidos com * são obrigatórios.
</div>
<Button
type="submit"
variant="contained"
disabled={info.length > 150 || info.length === 0}
- className="bg-secondary hover:bg-main-hover disabled:bg-red mt-3 text-white hover:text-secondary shadow-none rounded normal-case text-base font-bold"
+ className="bg-turquoise hover:bg-ice-HC-dark-hover disabled:bg-red mt-3 text-white-HC-dark-underline hover:text-turquoise-HC-underline shadow-none rounded normal-case text-base font-bold"
>
Enviar
</Button>
diff --git a/src/app/recurso/[id]/components/resourceInfo.js b/src/app/recurso/[id]/components/resourceInfo.js
index 76ea9c07..1d285b8f 100644
--- a/src/app/recurso/[id]/components/resourceInfo.js
+++ b/src/app/recurso/[id]/components/resourceInfo.js
@@ -1,4 +1,4 @@
-import { Tabs, Tab, Paper } from "@mui/material";
+import { Tabs, Tab, Paper, Divider, Box } from "@mui/material";
import { useState, useLayoutEffect, createRef } from "react";
import Specifications from "./specifications";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
@@ -49,62 +49,61 @@ export default function ResourceInfo({ learningObject }) {
return (
<>
- <Paper className="bg-white outline outline-1 outline-outlineColor shadow-none flex flex-col flex-shrink-0 rounded-xl m-1 normal-case">
+ <Paper className="bg-white-HC-dark outline outline-1 outline-ice-HC-white shadow-none flex flex-col flex-shrink-0 rounded-xl m-1 normal-case">
<Tabs
className=""
value={value}
variant="fullWidth"
onChange={handleChange}
- TabIndicatorProps={{ style: { background: "var(--secondary)" } }}
+ TabIndicatorProps={{ style: { background: "var(--turquoise-HC-white)" } }}
>
<Tab
sx={{
display: { xs: "flex", sm: "none" }, // Show on small screens, hide on larger
justifyContent: "center",
- borderBottom: value === "description" ? "2px solid var(--secondary)" : "none",
+ borderBottom: value === "description" ? "2px solid var(--turquoise-HC-white)" : "none",
}}
value="description"
- label={<DescriptionIcon className="text-text-color"/>}
+ label={<DescriptionIcon className="text-darkGray-HC-white-underline"/>}
/>
<Tab
sx={{
display: { xs: "none", sm: "flex" }, // Hide on small screens, show on larger
}}
- className="text-xl normal-case hover:bg-main-hover focus:text-secondary rounded-lg text-text-color"
+ className="text-xl normal-case hover:bg-ice-HC-dark rounded-lg text-darkGray-HC-white-underline focus:text-turquoise-HC-white-underline"
value="description"
label="Descrição"
/>
- <div className="h-12 border-r outline-outlineColor mx-2" />
<Tab
sx={{
display: { xs: "flex", sm: "none" }, // Show on small screens, hide on larger
justifyContent: "center",
- borderBottom: value === "specifications" ? "2px solid var(--secondary)" : "none",
+ borderBottom: value === "specifications" ? "2px solid var(--turquoise-HC-white)" : "none",
}}
value="specifications"
- label={<InfoIcon className="text-text-color"/>}
+ label={<InfoIcon className="text-darkGray-HC-white"/>}
/>
<Tab
- className="text-xl normal-case hover:bg-main-hover rounded-lg text-text-color focus:text-secondary max-sm:hidden"
+ className="text-xl normal-case hover:bg-ice-HC-dark-hover rounded-lg text-darkGray-HC-white-underline focus:text-turquoise-HC-white-underline max-sm:hidden"
value="specifications"
label="Especificações"
/>
- <div className="h-12 border-r outline-outlineColor mx-2" />
<Tab
sx={{
display: { xs: "flex", sm: "none" }, // Show on small screens, hide on larger
justifyContent: "center",
- borderBottom: value === "metrics" ? "2px solid var(--secondary)" : "none",
+ borderBottom: value === "metrics" ? "2px solid var(--turquoise-HC-white)" : "none",
}}
value="metrics"
- label={<EqualizerIcon className="text-text-color"/>}
+ label={<EqualizerIcon className="text-darkGray-HC-white"/>}
/>
<Tab
- className="text-xl normal-case hover:bg-main-hover rounded-lg text-text-color focus:text-secondary max-sm:hidden"
+ className="text-xl normal-case hover:bg-ice-HC-dark-hover rounded-lg text-darkGray-HC-white-underline focus:text-turquoise-HC-white-underline max-sm:hidden"
value="metrics"
label="Métricas"
- />
+ />
</Tabs>
+ <hr style={{ borderTop: "1px solid var(--lightGray-HC-white)" }} />
{viewMore ? (
<div className="text-sm flex-shrink-0 p-2" ref={viewMoreComponentRef}>
{content[value]}
@@ -118,13 +117,13 @@ export default function ResourceInfo({ learningObject }) {
? { maskImage: "linear-gradient(180deg, #000F 20%, #0000)" }
: {}
}
- >
+ >
{content[value]}
</div>
)}
- <div onClick={handleViewMore} className="hover:bg-main border-t">
+ <div onClick={handleViewMore} className="hover:bg-ice-HC-dark border-t">
{showViewMore ? (
- <div className="text-sm p-1 flex justify-center text-main-text font-bold">
+ <div className="text-sm p-1 flex justify-center text-darkGray-HC-white-underline font-bold">
{viewMore ? (
<>
<ExpandLessIcon />
diff --git a/src/app/recurso/[id]/components/resourcePreview.js b/src/app/recurso/[id]/components/resourcePreview.js
index ba10f1b4..17916942 100644
--- a/src/app/recurso/[id]/components/resourcePreview.js
+++ b/src/app/recurso/[id]/components/resourcePreview.js
@@ -113,7 +113,7 @@ export default function ResourcePreview({ learningObject }) {
);
} else if (imageType(learningObject?.default_mime_type)) {
content = (
- <div className="relative bg-white aspect-video w-full h-full">
+ <div className="relative bg-white-HC-dark aspect-video w-full h-full">
<img
className="w-full h-full object-contain"
src={uri}
@@ -153,7 +153,7 @@ export default function ResourcePreview({ learningObject }) {
{/* Overlay cinza e Ícone */}
<div className="absolute inset-0 bg-gray-500/50 opacity-100 md:opacity-0 md:hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
- <OpenInNewOutlinedIcon className="text-white text-[100px]" />
+ <OpenInNewOutlinedIcon className="text-white-HC-dark-underline text-[100px]" />
</div>
</div>
);
diff --git a/src/app/recurso/[id]/components/specifications.js b/src/app/recurso/[id]/components/specifications.js
index 0c0fbb7f..552340ae 100644
--- a/src/app/recurso/[id]/components/specifications.js
+++ b/src/app/recurso/[id]/components/specifications.js
@@ -8,9 +8,9 @@ import IconTheme from "@/app/MECRED_recursos_tematica.svg";
const genSpecification = ({ icon, name, data }) => {
return (
<div key={name} className="flex items-start">
- <div className="pt-2 text-main-text">{icon}</div>
- <div className="p-2 text-main-text font-bold whitespace-nowrap">{name}:</div>
- <div className="p-2 text-main-text">{data}</div>
+ <div className="pt-2 text-darkGray-HC-white">{icon}</div>
+ <div className="p-2 text-darkGray-HC-white font-bold whitespace-nowrap">{name}:</div>
+ <div className="p-2 text-darkGray-HC-white">{data}</div>
</div>
);
};
@@ -29,14 +29,14 @@ function formatSize(size) {
export default function Specifications({ learningObject }) {
const specInfo = [
- { icon: <IconLocation className='mr-2'/>, enabled: true, name: "Idioma", data: learningObject.language.map((lang) => lang.name).join(", ") ?? "Não Informado" },
- { icon: <IconLevel className='mr-2'/>, enabled: true, name: "Nível de Ensino", data: learningObject.educational_stages.map((stage) => stage.name).join(", ") },
- { icon: <IconMedia style={{ transform: "scale(0.85)" }}/>, enabled: true, name: "Tipo de Mídia", data: learningObject.object_type },
- { icon: <IconTheme className='mr-1'/>, enabled: true, name: "Temática", data: learningObject.subjects.map((subject) => subject.name).join(", ") },
- { icon: <IconSize className='mr-2' style={{ transform: "scale(1.15)" }}/>, enabled: !learningObject.link, name: "Tamanho", data: formatSize(learningObject?.attachments[0]?.size) },
+ { icon: <IconLocation className='mr-2 invertLogo-HC-white'/>, enabled: true, name: "Idioma", data: learningObject.language.map((lang) => lang.name).join(", ") ?? "Não Informado" },
+ { icon: <IconLevel className='mr-2 invertLogo-HC-white'/>, enabled: true, name: "Nível de Ensino", data: learningObject.educational_stages.map((stage) => stage.name).join(", ") },
+ { icon: <IconMedia className='invertLogo-HC-white' style={{ transform: "scale(0.85)" }}/>, enabled: true, name: "Tipo de Mídia", data: learningObject.object_type },
+ { icon: <IconTheme className='mr-1 invertLogo-HC-white'/>, enabled: true, name: "Temática", data: learningObject.subjects.map((subject) => subject.name).join(", ") },
+ { icon: <IconSize className='mr-2 invertLogo-HC-white' style={{ transform: "scale(1.15)" }}/>, enabled: !learningObject.link, name: "Tamanho", data: formatSize(learningObject?.attachments[0]?.size) },
];
return (
- <div className="flex flex-col p-1 text-main-text">
+ <div className="flex flex-col p-1 text-darkGray-HC-white">
<div className="font-bold text-lg">Especificações deste Recurso</div>
<div className="text-sm grid grid-cols-1 sm:grid-cols-2">
{specInfo.filter(s => s.enabled).map(genSpecification)}
diff --git a/src/app/recurso/[id]/page.js b/src/app/recurso/[id]/page.js
index 02ed9e7e..7e49c096 100644
--- a/src/app/recurso/[id]/page.js
+++ b/src/app/recurso/[id]/page.js
@@ -93,19 +93,19 @@ export default function Recurso({ params }) {
<HomologationModal open={submitOpen} onClose={() => setSubmitOpen(false)} name={learningObject.name} id={learningObject.submission_id} setSubmitted={setState} />
<ComplaintModal open={submitComplaintOpen} onClose={() => setSubmitComplaintOpen(false)} name={learningObject.name} id={learningObject.id} setSubmitted={setComplained} />
<NeedLoginModal open={needLoginOpen} setOpen={setNeedLoginOpen} />
- <div className="flex flex-col bg-main p-3 flex-shrink-0 min-height-0 overflow-y-auto scrollbar-none scroll-container">
+ <div className="flex flex-col bg-ice-HC-dark p-3 flex-shrink-0 min-height-0 overflow-y-auto scrollbar-none scroll-container">
<div className=" flex justify-center">
<ResourcePreview learningObject={learningObject} />
</div>
<div className="flex flex-row justify-between">
<div className="flex flex-col">
- <div className="text-main-text mt-5 text-2xl font-bold">
+ <div className="text-darkGray-HC-white mt-5 text-2xl font-bold">
{learningObject.link ? (
<a
href={learningObject.link}
target="_blank"
rel="noopener noreferrer"
- className="text-main-text hover:underline"
+ className="text-darkGray-HC-white-underline hover:underline"
>
{learningObject.name}
</a>
@@ -113,18 +113,18 @@ export default function Recurso({ params }) {
<h1>{learningObject.name}</h1>
)}
</div>
- <div className="text-main-text text-[12px] font-bold">
+ <div className="text-darkGray-HC-white-underline text-[12px] font-bold">
<Tags tags={learningObject.tags} />
</div>
</div>
{state && (
<div className=" flex items-center mt-5">
- <button onClick={() => setSubmitOpen(true)} className="bg-orange p-2 text-white font-semi-bold rounded-lg hover:bg-orange-hover">Avaliar Submissão</button>
+ <button onClick={() => setSubmitOpen(true)} className="bg-orange p-2 text-white-HC-dark-underline font-semi-bold rounded-lg hover:bg-darkOrange-HC-gray ">Avaliar Submissão</button>
</div>
)}
{complained && (
<div className=" flex items-center mt-5">
- <button onClick={() => setSubmitComplaintOpen(true)} className="bg-orange p-2 text-white font-semi-bold rounded-lg hover:bg-orange-hover">Avaliar Denúncia</button>
+ <button onClick={() => setSubmitComplaintOpen(true)} className="bg-orange p-2 text-white-HC-dark-underline font-semi-bold rounded-lg hover:bg-darkOrange-HC-gray ">Avaliar Denúncia</button>
</div>
)}
</div>
diff --git a/src/app/submit/components/InfoForm.js b/src/app/submit/components/InfoForm.js
index 947ecbae..d7a70a5c 100644
--- a/src/app/submit/components/InfoForm.js
+++ b/src/app/submit/components/InfoForm.js
@@ -99,7 +99,7 @@ export default function UploadForm({ setStep }) {
return (
<form className="mb-10">
<Paper className="rounded-lg p-10 max-xl:p-5 max-xl:mx-5" elevation={0}>
- <h1 className="text-main-text font-light text-2xl text-center">
+ <h1 className="text-darkGray-HC-white-underline font-light text-2xl text-center">
Os campos marcados com * são obrigatórios
</h1>
<FieldLabel name="Título do Recurso*" />
@@ -154,7 +154,7 @@ export default function UploadForm({ setStep }) {
key={index}
control={<Checkbox />}
value={language}
- label={<span className="text-main-text">{language}</span>}
+ label={<span className="text-darkGray-HC-white-underline">{language}</span>}
/>
))}
</FormGroup>
@@ -169,7 +169,7 @@ export default function UploadForm({ setStep }) {
key={index}
control={<Checkbox />}
value={sl}
- label={<span className="text-main-text">{sl}</span>}
+ label={<span className="text-darkGray-HC-white-underline">{sl}</span>}
/>
))}
</FormGroup>
@@ -185,12 +185,12 @@ export default function UploadForm({ setStep }) {
<div className="flex w-full justify-end p-5">
<Button
variant="text"
- className="normal-case w-36 text-base text-main-text font-bold"
+ className="normal-case w-36 text-base text-darkGray-HC-white-underline font-bold"
>
Cancelar
</Button>
<Button
- className=" border-secondary w-36 rounded-lg hover:bg-secondary-hover bg-secondary text-base text-white font-bold normal-case flex "
+ className=" border-secondary w-36 rounded-lg hover:bg-turquoise-hover bg-turquoise text-base text-white-HC-dark-underline font-bold normal-case flex "
variant="outlined"
onClick={() => setStep((curr) => curr + 1)}
>
diff --git a/src/app/themes/theme_high_contrast.css b/src/app/themes/theme_high_contrast.css
index 397c0390..6e6f6c26 100644
--- a/src/app/themes/theme_high_contrast.css
+++ b/src/app/themes/theme_high_contrast.css
@@ -1,77 +1,76 @@
-html[data-theme="theme_high_contrast"] {
- --main: #000000;
- --white: #000000;
- --blue-publish: #000000;
- --secondary-hover: #8d8d99;
- --orange-hover: #8d8d99;
- --main-text: #ffffff;
- --publish-text: #ffffff;
- --main-text-click: #ffffff;
- --black-hover: #8d8d99;
- --black-text: #ffffff;
- --violet-hover: #8d8d99;
- --red: #ffffff;
- --red-hover: #8d8d99;
- --red-publish: #ffffff;
- --text-color: #ffffff;
- --text-color-click: #ffffff;
- --main-hover: #8d8d99;
- --button-filters: #000000;
- --text-filter: #ffffff;
- --gray-color: #ffffff;
- --outlineColor: #ffffff;
- --other-links: #ffffff;
- --underline: underline;
- --grey-button: #000000;
- --blue-button: #000000;
- --white-draw: #ffffff;
- --bg-comments: #000000;
- --fundo: linear-gradient(rgba(0, 0, 0, 1),
- rgba(0, 0, 0, 1)),
- url("/images/fundo.webp");
- --logo: url("/mecred_white.svg");
- --input-focus: #00bacc;
+html[data-theme="theme_high_contrast"] {
+ --invert: invert(0);
+ --ice-HC-dark: #000000;
+ --ice-HC-white: #ffffff;
+ --ice-HC-gray: #8d8d99;
+ --turquoise-HC-white-underline: #ffffff;
+ --turquoise-HC-white: #ffffff;
+ --turquoise-HC-dark: #000000;
+ --turquoise-HC-dark-underline: #000000;
+ --white-HC-dark: #000000;
+ --white-HC-dark-underline: #000000;
+ --darkTurquoise-HC-gray: #8d8d99;
+ --darkTurquoise-HC-white: #ffffff;
+ --darkTurquoise-HC-dark: #000000;
+ --darkOrange-HC-gray: #8d8d99;
+ --darkOrange-HC-dark: #000000;
+ --darkGray-HC-dark: #000000;
+ --darkGray-HC-dark-underline: #000000;
+ --darkGray-HC-white: #ffffff;
+ --darkGray-HC-white-underline: #ffffff;
+ --black-HC-gray: #8d8d99;
+ --black-HC-white: #ffffff;
+ --black-HC-white-underline: #ffffff;
+ --darkViolet-HC-gray: hsl(240, 6%, 58%);
+ --darkPink-HC-gray: #8d8d99;
+ --orange-HC-white: #ffffff;
+ --violet-HC-white: #ffffff;
+ --pink-HC-white: #ffffff;
+ --button-filters: #000000;
+ --lightGray-HC-dark: #000000;
+ --lightGray-HC-white: #ffffff;
+ --red-HC-white: #ffffff;
+ --mediumGray-HC-white:#ffffff;
+ --mediumGray-HC-dark: #000000;
+ --underline: underline;
+ --lightGray-HC-dark: #000000;
+ --fundo: linear-gradient(rgba(0, 0, 0, 1),
+ rgba(0, 0, 0, 1)),
+ url("/images/fundo.webp");
+ --logo-square: #ffffff;
+ --input-focus: #00bacc;
+ --filter: invert(1) grayscale(100%) brightness(500%);
+ }
+
+ .text-white-HC-dark-underline[data-theme="theme_high_contrast"] {
+ text-decoration: underline;
+ }
+
+ .text-darkGray-HC-white-underline[data-theme="theme_high_contrast"] {
+ text-decoration: underline;
+ }
+
+ .text-turquoise-HC-underline[data-theme="theme_high_contrast"] {
+ text-decoration: underline;
+ }
+
+ .text-white-HC-dark-underline[data-theme="theme_high_contrast"] {
+ text-decoration: underline;
+ }
-
- /*--ice-HC-dark: #000000;
- --ice-HC-white: #ffffff;
- --ice-HC-gray: #8d8d99;
- --turquoise-HC-dark: #000000;
- --white-HC-dark: #000000;
- --white-HC-dark-underline: #000000;
- --darkTurquoise-HC-gray: #8d8d99;
- --darkOrange-HC-gray: #8d8d99;
- --darkGray-HC-white: #ffffff;
- --darkGray-HC-white-underline: #ffffff;
- --black-HC-gray: #8d8d99;
- --black-HC-white: #ffffff;
- --darkViolet-HC-gray: #8d8d99;
- --darkPink-HC-gray: #8d8d99;
- --button-filters: #000000;
- --lightGray-HC-white: #ffffff;
- --red-HC-white: #ffffff;
- --mediumGray-HC-white:#ffffff;
- --underline: underline;
- --lightGray-HC-dark: #000000;
- --background: linear-gradient(rgba(0, 0, 0, 1),
- rgba(0, 0, 0, 1)),
- url("/images/fundo.webp");
- --logo: url("/mecred_white.svg");
- --input-focus: #00bacc;*/
-}
-
-.text-main-text[data-theme="theme_high_contrast"] {
+ .text-turquoise-HC-white-underline[data-theme="theme_high_contrast"] {
text-decoration: underline;
}
-.text-white[data-theme="theme_high_contrast"] {
+.text-black-HC-white-underline[data-theme="theme_high_contrast"] {
text-decoration: underline;
}
-/*.text-darkGray-HC-white-underline[data-theme="theme_high_contrast"] {
- text-decoration: underline;
-}
-
-.text-white-HC-dark-underline[data-theme="theme_high_contrast"] {
- text-decoration: underline;
-}*/
\ No newline at end of file
+ /* Em alto contraste: Icones pretos */
+ .invertIcon-HC-black[data-theme="theme_high_contrast"] {
+ filter: invert(0);
+ }
+/* Logo do MECRED branca no alto contrate*/
+ .invertLogo-HC-white[data-theme="theme_high_contrast"] {
+ filter: filter;
+ }
diff --git a/src/app/topicosAjuda/page.js b/src/app/topicosAjuda/page.js
index 0e9fc45b..5c95e991 100644
--- a/src/app/topicosAjuda/page.js
+++ b/src/app/topicosAjuda/page.js
@@ -178,10 +178,10 @@ export default function HelpTopics() {
return (
<Overlay type="twoColumns">
<div className="flex flex-col overflow-y-auto scrollbar-none mb-5 max-xl:ml-6 max-md:ml-0 items-center">
- <p className="text-center text-2xl font-bold text-text-filter mb-5 2xl:hidden">Tópicos de ajuda</p>
+ <p className="text-center text-2xl font-bold text-darkGray-HC-white mb-5 2xl:hidden">Tópicos de ajuda</p>
<div className="flex flex-row max-xl:flex-col">
<Card
- className="bg-white outline outline-1 outline-outlineColor 2xl:w-[400px] h-[740px] xl:w-[300px] p-[20px] max-xl:hidden"
+ className="bg-white-HC-dark outline outline-1 outline-ice-HC-white 2xl:w-[400px] h-[740px] xl:w-[300px] p-[20px] max-xl:hidden"
sx={{
display: "flex",
flexDirection: "column",
@@ -191,7 +191,7 @@ export default function HelpTopics() {
boxShadow: "none",
}}
>
- <div className="flex flex-col overflow-y-auto scrollbar-none mt-3 ml-8 mr-4 text-text-filter gap-5 max-xl:hidden">
+ <div className="flex flex-col overflow-y-auto scrollbar-none mt-3 ml-8 mr-4 text-darkGray-HC-white gap-5 max-xl:hidden">
<p className="mt-5 text-2xl font-bold flex text-center">Tópicos de Ajuda</p>
{teste?.map((item, index) => (
@@ -201,7 +201,7 @@ export default function HelpTopics() {
{item?.questions?.map((questionItem, ind) => (
<button
onClick={() => changeQuestion(questionItem)}
- className={`text-sm text-left ${questionItem.question === questionChosen ? 'bg-main-hover font-bold rounded-sm p-1' : ''}`}
+ className={`text-sm text-left ${questionItem.question === questionChosen ? 'bg-ice-HC-dark-hover font-bold rounded-sm p-1' : ''}`}
key={ind}
>
{questionItem.question}
@@ -213,7 +213,7 @@ export default function HelpTopics() {
</div>
</Card>
<Card
- className="bg-white outline outline-1 outline-outlineColor justify-start p-[30px] max-xl:p-[10px] max-lg:mx-[20px] w-[900px] max-lg:w-auto max-xl:h-auto "
+ className="bg-white-HC-dark outline outline-1 outline-ice-HC-white justify-start p-[30px] max-xl:p-[10px] max-lg:mx-[20px] w-[900px] max-lg:w-auto max-xl:h-auto "
sx={{
display: "flex",
flexDirection: "column",
@@ -222,21 +222,21 @@ export default function HelpTopics() {
boxShadow: "none",
}}
>
- <div className="flex justify-start flex-col text-text-filter gap-7 mt-3 mr-16 max-xl:m-5 max-xl:mb-0 max-xl:mt-0">
+ <div className="flex justify-start flex-col text-darkGray-HC-white gap-7 mt-3 mr-16 max-xl:m-5 max-xl:mb-0 max-xl:mt-0">
<p className="mt-5 text-2xl font-bold mb-5">{questionChosen}</p>
- <div className="text-xl text-text-color font-light mb-5 leading-6">
+ <div className="text-xl text-darkGray-HC-white font-light mb-5 leading-6">
{answerChosen?.map((line, index) => (
<p key={index}>{line}<br /><br /></p>
))}
</div>
</div>
- <button onClick={() => router.push("/ajuda")} className="flex pl-5 pb-2 text-text-filter font-bold 2xl:hidden">Voltar</button>
+ <button onClick={() => router.push("/ajuda")} className="flex pl-5 pb-2 text-darkGray-HC-white font-bold 2xl:hidden">Voltar</button>
</Card>
</div>
<div className="flex flex-col items-center rounded-xl px-10 max-sm:px-0 max-sm:py-6 mx-20 max-sm:mx-4 max-md:mb-16">
- <div className="text-main-text mt-5 max-sm:mt-0 text-xl font-bold text-center">Não encontrou o que precisa?</div>
- <div className="text-main-text text-md mt-4 ml-3 text-center">Entre em contato com nossa equipe</div>
- <button onClick={() => router.push("/contato")} className="mt-4 bg-secondary text-lg text-white p-2 px-4 rounded-lg hover:bg-secondary-hover">Página de contato</button>
+ <div className="text-darkGray-HC-white-underline mt-5 max-sm:mt-0 text-xl font-bold text-center">Não encontrou o que precisa?</div>
+ <div className="text-darkGray-HC-white-underline text-md mt-4 ml-3 text-center">Entre em contato com nossa equipe</div>
+ <button onClick={() => router.push("/contato")} className="mt-4 bg-turquoise text-lg text-white-HC-dark-underline p-2 px-4 rounded-lg hover:bg-turquoise-hover">Página de contato</button>
</div>
</div>
diff --git a/tailwind.config.js b/tailwind.config.js
index f684c8fc..b61ec706 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -25,63 +25,49 @@ module.exports = {
"8xl": ['var(--font-size-8xl)', 'var(--line-height-8xl)'],
"9xl": ['var(--font-size-9xl)', 'var(--line-height-9xl)'],
},
- colors: {
- "main": 'var(--main)', // "#f5f9f9",
- "secondary": 'var(--secondary)',
- "white": 'var(--white)',
- "orange": 'var(--orange)',
- "secondary-hover": 'var(--secondary-hover)',
- "orange-hover": 'var(--orange-hover)',
- "main-text": 'var(--main-text)', //"#858585",
- "main-text-click": 'var(--main-text-click)',
- "black-hover": 'var(--black-hover)',
- "black-text": 'var(--black-text)',
- "violet": 'var(--violet)',
- "violet-hover": 'var(--violet-hover)',
- "pink": 'var(--pink)',
- "red": 'var(--red)',
- "navbar": 'var(--navbar)',
- "red-hover": 'var(--red-hover)',
- "text-color": 'var(--text-color)',
- "text-color-click": 'var(--text-color-click)',
- "main-hover": 'var(--main-hover)',
- "button-filters": 'var(--button-filters)',
- "text-filter" : 'var(--text-filter)',
- "gray-color": 'var(--gray-color)',
- "outlineColor": 'var(--outlineColor)',
- // buttons: 'var(--color-buttons)',
- "other-links": 'var(--other-links)',
- "grey-button": 'var(--grey-button)',
- "blue-button": 'var(--blue-button)',
- "white-draw": 'var(--white-draw)',
- "input-focus": 'var(--input-focus)',
- "bg-comments": 'var(--bg-comments)',
- "publish-text": 'var(--publish-text)',
- "red-publish": 'var(--red-publish)',
- "blue-publish": 'var(--blue-publish)',
-
- /*
+ colors: {
+ "ice": 'var(--ice)',
"ice-HC-dark": 'var(--ice-HC-dark)', // "#f5f9f9",
"ice-HC-white": 'var(--ice-HC-white)',
"ice-HC-gray": 'var(--ice-HC-gray)',
"turquoise": 'var(--turquoise)',
+ "turquoise-HC-white-underline": 'var(--turquoise-HC-white-underline)',
+ "turquoise-HC-white": 'var(--turquoise-HC-white)',
"turquoise-HC-underline": 'var(--turquoise-HC-underline)',
+ "turquoise-HC-dark-underline": 'var(--turquoise-HC-dark-underline)',
"turquoise-HC-dark": 'var(--turquoise-HC-dark)',
- "white-HC-dark:": 'var(--white-HC-dark:)',
+ "darkTurquoise-HC-gray": 'var(--darkTurquoise-HC-gray)',
+ "darkTurquoise-HC-white": 'var(--darkTurquoise-HC-white)',
+ "darkTurquoise-HC-dark": 'var(--darkTurquoise-HC-dark)',
+ "white": 'var(--white)',
+ "white-HC-underline": 'var(--white-HC-underline)',
+ "white-HC-dark": 'var(--white-HC-dark)',
"white-HC-dark-underline": 'var(--white-HC-dark-underline)',
"orange": 'var(--orange)',
"darkOrange-HC-gray": 'var(--darkOrange-HC-gray)',
+ "darkOrange-HC-dark": 'var(--darkOrange-HC-dark)',
+ "darkGray-HC-dark": 'var(--darkGray-HC-dark)',
+ "darkGray-HC-white": 'var(--darkGray-HC-white)',
"darkGray-HC-white-underline": 'var(--darkGray-HC-white-underline)',
+ "darkGray-HC-dark-underline": 'var(--darkGray-HC-dark-underline)',
+ "black": 'var(--black)',
+ "black-HC-gray": 'var(--black-HC-gray)',
"black-HC-white": 'var(--black-HC-white)',
+ "black-HC-white-underline": 'var(--black-HC-white-underline)',
"violet": 'var(--violet)',
+ "orange-HC-white": 'var(--orange-HC-white)',
+ "violet-HC-white": 'var(--violet-HC-white)',
+ "pink-HC-white": 'var(--pink-HC-white)',
"darkViolet-HC-gray": 'var(--darkViolet-HC-gray)',
"pink": 'var(--pink)',
- "darkPink-HC-gray": 'var(--darkViolet-HC-gray)',
+ "darkPink-HC-gray": 'var(--darkPink-HC-gray)',
"lightGray": 'var(--lightGray)',
+ "lightGray-HC-dark": 'var(--lightGray-HC-dark)',
"lightGray-HC-white": 'var(--lightGray-HC-white)',
"red-HC-white": 'var(--red-HC-white)',
"mediumGray-HC-white": 'var(--mediumGray-HC-white)',
- "lightGray-HC-dark": 'var(--lightGray-HC-dark)',*/
+ "mediumGray-HC-dark": 'var(--mediumGray-HC-dark)',
+ "lightGray-HC-dark": 'var(--lightGray-HC-dark)',
},
backgroundImage: {
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
@@ -113,15 +99,42 @@ module.exports = {
'.text-main-text': {
'text-decoration': 'var(--underline)',
},
- };
-
- addUtilities(newUtilities, ['responsive', 'hover']);
- },
- function ({ addUtilities }) {
- const newUtilities = {
- '.text-white': {
+ '.text-white-HC-dark-underline': {
+ 'text-decoration': 'var(--underline)',
+ },
+ '.text-white-HC-underline': {
+ 'text-decoration': 'var(--underline)',
+ },
+ '.text-darkGray-HC-white-underline': {
+ 'text-decoration': 'var(--underline)',
+ },
+ '.text-darkGray-HC-dark-underline': {
+ 'text-decoration': 'var(--underline)',
+ },
+ '.text-turquoise-HC-underline': {
+ 'text-decoration': 'var(--underline)',
+ },
+ '.text-darkGray-HC-white-underline': {
+ 'text-decoration': 'var(--underline)',
+ },
+ '.text-turquoise-HC-underline': {
+ 'text-decoration': 'var(--underline)',
+ },
+ '.invertIcon-HC-black': { /* Icones pretos => branco */
+ 'filter': 'var(--invert)',
+ },
+ '.text-turquoise-HC-white-underline': {
+ 'text-decoration': 'var(--underline)',
+ },
+ '.text-turquoise-HC-dark-underline': {
+ 'text-decoration': 'var(--underline)',
+ },
+ '.text-black-HC-white-underline': {
'text-decoration': 'var(--underline)',
},
+ '.invertLogo-HC-white': {
+ 'filter': 'var(--filter)'
+ }
};
addUtilities(newUtilities, ['responsive', 'hover']);
--
GitLab