diff --git a/src/app/acessibilidade/page.js b/src/app/acessibilidade/page.js
index ad4a62ac4dd8a2f4e2dcd5a77a93606f1841c8c6..91bf4f1bf2e3e8d172453f10092d532ca36f63d2 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 0a7be2c584d7a4f77ce93c3b7059f8b6ef43e3c6..d3ade305c7fe97982ac4f5e4d8ad80eb0a15346c 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 567a502493bc13cfd723c3ec099ad651ef3046aa..9cdadf17844f3add2ab6df8bf695601eb9c23434 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 c7ebc7f16e84d43a24d8d530d6feeadb27d109b2..e26bb80d3465e1b5367c6d39affacccad3d5d98d 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 b31d7bf87fe0af2c49c4209437839a613b07b403..4ef56f1beff4765ed49d768fb1f79a8103dd2e82 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 a650e3cb5fab8c88ff1f37093a0bfbf407f7841f..cd8d63e9a1b891e6de4418a2133de15164a076fb 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 ad4e251a1695691f3a8f24c0e5a8a157adc396a9..67ca958f9a50464ec49463f1ceaa37d5488903a9 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 dc2a9b2b10903235df0fb3853d5011a991d3a2a5..f16f511bc01008f113dad035e7dd032d2c1810f3 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 05d02661eb5486948bfb25acbf9d520a80e8e503..8a426af618f42adbd84ed1424ecbd2f80e6d7691 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 f719ffb45277bab4832ae7d5a663c0007ce4a0bf..688734913b2e00b5e8e578188277311f900b9294 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 c338206c9c43505e6c34a16c4d0670934e5b22dd..dc837999581240dbaf2dc7221fb9209b441b4858 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 2c47a3b9c1060e74e75687b73f8bb5d074bfdb30..51baea37c829305cf8d60119b6054b4d3b241afd 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 0906fc5ed24a3ea71949cb1dacd75847c4903662..f3b92f6768f979595f9b11bd9e34c28b776620f2 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 cbd44afc6a9528be35e0eabf79a84cbf2c2fd283..c2f4403e239599abc43d48c20e7e8bd56374681d 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 7991a8550bd4ebc634e5304127302beb1cf30ca7..b78cfd57a133e7c49c2631760c8b73172e65c751 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 fcc74bb2447d948eddc94740dafbd04285639e12..e6ec0ddce16f24216126d1ffbd82b20a452b5df5 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 91fd7c06b4df970e1e871d2400a4eab7833b8955..6a6bbf24182bede97687887797927a812ba556eb 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 ea005e17f1f8c4e3ecde61713261c095d7421a03..fb83d5f99bbff5cfc2410ab8d7c50cdeafe27351 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 9b7ec88afc75a07740722ff105a2a99ad22ccb5f..2661db69362a1de9f60f46d121fd162efe22f495 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 08835976cee9c8dcc54f153819487e073f55f3e6..eae98a11618ddfc169c0730f5f7fbad509e65f9d 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 d469cb814a2a8c55dc7b527ee4d7087a19cd9642..a76a601604486ec21f9d1a141c2ef999bd53c017 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 929b005f17260d756e723698c19203e2b99cbb2f..167a90cb7bb3f65a90b939ac889a4ac43352a21c 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 7c39940dae2e5a3733a2a3f1e71ccfcb29fca897..2dbe5447dcb352e1ee888f46dfb958cc01d41e33 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 7db26cbe301e710a0161651b6f66300b4cefeaed..edee4e2afd3deeea8bc1d8842a10787fb7b94f32 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 ce8d61c86d44e66af49ecb17ff017ebd3618adc5..d9a98e2b8960bad7d64375260360f79b7d0bd2d5 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 deb94bfb912026c6e720c42f93e36ef88cf7af47..e865af544e216fcf382f37865d57ef31ef6df988 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 c0332ccb4b2840e21dec9314088f0fb88da78bd2..da30aaffc4f3a4fcf6831d7eab9e7211dacfbf65 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 36e85a4fdd52e14b8695a38efd41e256a0aaf9fe..9aedc9f284d8439fd86edfd897782f790012d01c 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 9b8b1a26f32d9794ec45d14fa01ceaab8f695bee..9510136d601887ea5d97852b71e3c996b8fcd2ea 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 548805811056332e0218c561b2333f101ddc8a85..47b0a79420fb99942ff5e708b558846cb7545be9 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 059e5d88c87aed5b8574ab53d5e707cf3c8c0317..610bb3dc71f2ea039635f9e9ce33e1fb17dbc8db 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 eb846d9c0ccf83a1766e040e600c0bd6eb484eed..3848c1b81db0a1a36a784011d16077318d36eb62 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 e411f26dbf4a2d85e945ae8234d0c46364cc4a1f..05350ceea7b988a114244b4a97d9c63606c3513f 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 f539d10a7da2b6eca9400c984fc8a542505b8e1e..f90436b35e60b5329d69034d9bd5b1058a5b2ff4 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 eed0b790b2d378f991aa5bbb094d9a0a3d524574..160029fb84769b5c1fcc33bda2bd454f906447f1 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 a014092cdd3797f2a9e7f3694a64f2cd1a3cdffc..219a11d1e067689ddaeaf8281d3b0d7c9b662ecb 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 9829b34095176d542172287f351d37529d29dbf8..fa511547c01e614c22166a36389fcf1b4bce9aaa 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 663025e03f957c77401e98b26198bd7b98ec704e..82a854c8e076fad361eafab53c83744d039c36d3 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 0f9e3843da1359eb7c30042280ab5a05dd404101..adf5c7e5bd18722afc73feca981054940d29b2d2 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 abdcf1033cd7b6669795b475c2023b5d7acf3882..de10b6f58984ad541377d2ce6470ca62e2404ea8 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 24ab639df982d92de5f1c603006705fb3aff6f6b..ee4b87f28959e13b6a0f3ddf4a633e5560a65fb5 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 faaf6d609fae907e0b3c4d3930b87817838126a5..8a0011ade7631e4ce8b13253cf38f362da492150 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 10dcf4262b8ba1f046f6eed266ce6f18be6eb327..455ae0cfcc2f17190e7765b97a3ac9990186d34d 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 46852558e0db022d4b626ab976c7d3b097273e56..366525f38f1000b06b61d1eae037ce2616857532 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 45d5ab47e8c1f0933e66905a89e3f12be1412e8a..bfecbb0a7e2c307814bf0caeb27b0ea39ab20d5d 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 d0b7d61c93d986918853b099191a47167a496cbe..ecc7fba421a5aead37cc24bbc6ffecbe14faf9b2 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 5f9406319aa45221ea87d5832475e2aaf0a4e15e..4090f441af27dbedf800db13228b1a89db02f7cd 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 db305f364d63f129bab265f7cd733401fa7dace2..b7f7e870251979abbedef6418a7a8fa09aaf8d28 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 85d2db3516224a5889795aeaf30f42fb72c5ed3e..23c240035fcb3b7424cd237e4d85c70125bfcea8 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 82851883304934417e3b5e349981165366c313b2..51150c9c3fa287a7a921ec85f89750d72d45b020 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 51e5aa0b97f245f115d9a10b5f465bf4ce61f693..013f53b080b7145c73cdda79ae91c10038670920 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 735996bd2480cdc23299150ce0ad351fa52af32c..eba516ff5ad673501f43d54a08ed02027c48237e 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 68343f75d9bedc8e441005d5c370376d222176c2..d3c95227270e91e4744185e8979833f66576f2b0 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 a00af4438221a1a50153132635f2fddc942d7383..8e982b2e335df47a9e0abb69dcc90eee339f02bc 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 ef30a571c9529e4858b5992fe0f989193b8ddb53..e4ffa7aaa63e96e2ea2b6cab684a5c1b0ddb9546 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 cbd6ec097de8c14f090689e8340f97136c044943..4d1736bd3d6b0e6aa2e39517766dd0ce133ef12a 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 df97cb4b4c9592078d1107096ce4bed6422191c0..78e1cf17d10b5edf31ccb70250f50126bd7094f7 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 ae7529cc87db0deae3f49a1a155d880395030199..b95ca213a40908fa6c6569ddb93f81587a93a02d 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 0f1eb5576637ae2231e35f6e3bdda6ee7127ac0a..b10a63a74af440ab1b2736c79aae561c8703a481 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 199eaf2de561aca05eaf989086195fbc101e14d9..cf231bcf19637b82cd58e125bd50cf42c3a9463a 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 12523e820aa6cd5cff92d09249d13c7afb40ccf3..33819806798ea855ccaa6f91da9be189cded4931 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 1b93226d9d5a59ac6174f855f1a56b1e83efc7a3..b04101d724275a7c75b1949c3e9e5cc41ce71250 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 a5cd1e3ee61efc925532aaaf796689456f5af92c..df9337060cdbe1dad7d8ad796f09189da6614902 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 e51a1f0a3a17d8112fb4990753c0fea1d03e14ca..0a6cdfadb0afd4caa635833dbb2ac340a3c01dca 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 b0c9ced7824a8f55e5b86715adf4fbdc44d49b35..381cf5f3ab15bfb796823bd8dc889d0cb3c0ccb3 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 c1d5e3d14cb11512798353c7b8faca5a6616d3c0..bc19c80a5901bb63ad50246ea4705d4d4810d7b0 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 1664abdee10f5da9e851374aae73f1e441137f71..5b9f33795b2086f6769e6a90863946f0736c7f3e 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 12f50e0a801763c9039fd158926fd4e74ed83cce..3d356f8f165f988134418d3af581ad8db90c56fe 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 fc96bdebeb2a57520fb55d93ed47cab571a5dd41..df7bc0b3f458eb7029bf754c2228740b3fbcda40 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 0b140c65fc5c141a3870ce9180a7190f430241fc..662eb58e7ad679b91a7230d6f4b79d4e7582d44c 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 949be64e9ffc38b21291b3e7b6b5f40689967011..7441f526fbfbb1bbaa017489e528178e71203731 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 290cc3a741864bba93c94f83e2c30d296dfff3fe..5b4bcbd429e2e5c0478174b251b0174a3ee93d76 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 50f63cbd9f8eb4fb3433983736e6fca94f856946..a97137ec71206565f8fe6f31bdeb406881155c61 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 ffa8a68c6f1ba3011c9773dba7c861f8f287bf75..e4cfa8e841c9d29b0950bc6b1884c3232ef0759c 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 67fa93b4f95d18f71e866bd8821455a4f074342b..3c30e1c4404fa1e7bc8fdb541fe8d679752c108e 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 ae7c0238a0a15ce67caddd0e0dc14b1202d80f87..508719d62cc2e5bb1c70676031edc232b5bd1735 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 463960364f26e4fbca6c8cdc98ebca3fca01fb96..3e22d2a4b868dd72cc8526ecc51827fb8400e3be 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 504b7a554c2b6d672d25332122e90a1a20e312e7..caa40ae5d73d73ec6481f0213f8709bffecd4e20 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 2c0132d6e62d721cc61f8e656cc377626e08db7c..10946e5bf2de5f737e819a2e87ef217301cc3cef 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 aaa6b77c93c62fe52eee5c9f16ada4f846babd02..45873e539559c6468499420895c9acf79cec0d0e 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 8722718c2912f56c6813a4695ca2c7e4ff832994..1b9cbfb2c986df64b02bda0b066febfde01d27a9 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 e8553bd6b3488d63f69e7e19c280a896edb4272c..b753fb9690db2539f756d86dcc96fc135eebfe76 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 689751dd4c40fa0ea1d60c7c056c1894b9ba7217..3f49f8bdac8d7a80a313ce12be5703e3b9d66741 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 48ad3852894b46887e997362b688df104be2e502..54abe3771a53e6bd658e1cdeb22a7e6ce2e291f7 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 295d69fcd776cd9ecc660c2377428c73faa451c2..ea6143284e89275b1af841dc1a5468910ce4a7b3 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 8d42d31f42b6fc5c1a84cacb698de1d85b860d79..fb4978464cbc5af4dc2a61d95a7968ae202d22c3 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 a16aff31048819f6c7cd773053a10e2ec1e6af52..a9bd3ff580109d092d6ea2e3134bc33d3d71a799 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 da01c25e01b60607ea9b513e423cb37af171d64b..7d4efd4ab0497faf80fd737b17a7cfe086126daa 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 5f01431e3e8fb9dcec6d2994ce707ccfcdf548a2..b886d4c86cf4d70391018d4fd1575e0c9274bf5b 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 8fcafecd37058d44b8958a1a9a6bdde60e081637..2e22ffd91683306891b8f5b91aed6209031f3ca8 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 fbe2ff1f6b03d344d23d4d5c34b8a6a57b9009d7..b52ebb8616fcdb808b40f4a3b5043c4a53a81893 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 e40e2ca3ed0037112a0cce475e7bfdabfc58c886..0ed92d5baf0594b0f1eb9df31c9e831dd71cbd5d 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 fc79ecde0e1695b201dba4fba36d7779e6705a99..6401ec558eaa6462a887f90dc275aa9621689689 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 c0b9d0f288fe8cfa611ade6e28a20972350330d1..6ec059d29153534ee3b00164f58b090511a28921 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 8bfa0b49f0d6765b0ce70cd003975ce48b2cf27a..9f37ee388ecc3e1e63ce260af05ee5211217fdd1 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 b8ce197c13680f3719e0cb0baed8fdf2151dc4b1..91368145e0e08474bb3cf89fb07cc0f457b9023e 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 41219b6edba94595d75bd04139d3c696d4f79b17..ff75f5ce6c99069a44a8113814969b6fb8e30a54 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 ec2771038cc5c823cc355d3d73a073047b04f7ff..a87f91db5364346fe346edd39f7eccbcff86c20f 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 94eb9dcbacc6a1101dc95408787ff288762a3b88..a766456ec61429d00d5d630d0fd58b817438975d 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 69745f64062262fc2c3e49ac4f95f9c3832c8bc1..7a67a35c5ee9ec91803892089034d4f13b16497b 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 076e34e42c4fd654fbe0ecde9fc1d8ff8bbddafe..0da5abf3735fa70947c97aa2568efbd8895666d2 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 6a6b5de7db839504d36d03cdebf61eabd4ec79e7..62d25ab6000c15e355bda8f23e446f57f04bc175 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 9ebb5c640e8f13d50830bf17dd5d4f0dacfbdabe..fb95625880741166f0e28643559c1d9a035d9bd2 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 8f163335f0fb668b6f0969affb058c3e8e7159a0..b76bef237d89c3a69e4a70d5d089428c5069daa4 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 9b77b33e0f19d71d525ebe6d6b15b1f42cfd5ead..86fc2a7022e8d12f9023f6fd55d97cb3837d0d7a 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 1693ee4494edc17d678d5fc2125857a7d3a66c66..63e6186f2918f0c5cce984722d14aa6d28b3c3b0 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 ffd189f247fbd1fc2024af4535725b8a622180e7..bb749f6474761b807340be6b3dde119fefc5ad70 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 7edc2aa9dfb4d74435caa30f01f9fde36f6c13d8..eca549de410e668fe0915725b6daa88714244f96 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 697ed4d0976465ca55158bf6b399130f62034138..d6fe2eb7f797b15342133ac0728a5aba9bcb29c2 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 cfb94511eff59f8afd1f252b132a32ef6637b148..03dc2de8d7d4a31149b4caa9a29c0d74ed8d94b5 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 ba92b0d36bc9c6d6e5fd47b5906e3dff33dd4679..2a6274e612d118cc121ea125a495f0f8266b6049 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 5a3dceb6fd70c96ff331e849845ec5604ff3872a..891d6651951dee65f30dd05d4d6919a5bac1e9b0 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 bbe2c9b23471e9f741ec1dfcef7e7555507abf9a..12322b2fafb8dfae678e92885a506910ad2242dd 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 bfb5d0c199fd21ac5808f8959c04c43a9d65ea5f..c735f0eded9cfb1be5db7e3daf7d3abf32a5f8a2 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 76ea9c07aa1edc50a49f75484b87485656658036..1d285b8fe34f6e99d4e421e7f836041b2752a303 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 ba10f1b42d8d9d68d1495647b9dfd0e08c1fdb1f..179169427943ed2a6246d7d62d7b592bc67b5fa8 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 0c0fbb7fca587ba2e96e6bbff29c3daba442a027..552340ae2c6d1fa11d75cd3158d345bba92a55c3 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 02ed9e7e70a1ab45d8a095278ef3b30f0dc2b9ce..7e49c0965e9ec725ee0a7dee727b5739bbdef6e4 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 947ecbae08a601075fd62ee28866545adfeaa2ae..d7a70a5cbc73c5532eb3f1267084585c158398e6 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 397c039095f0f25911b348888cca79f0159f8f3e..6e6f6c264203fa4d9a5e9cd23906a7a64bf60c4d 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 0e9fc45bf078670aab7a3e492256d36f3ea10b5d..5c95e991fcecd09667b80bcbaaf77d36308d768d 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 f684c8fcdd0d9136b1c71cf4988e9a379b34613f..b61ec70631a6831503c3d5f76c0d5e0d43b3d8e0 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']);