diff --git a/src/app/components/About.js b/src/app/components/About.js
index 3ed21fa8629562cc23dcf3b194101f2d4ab75e91..626c92411e5f5a2c68eb07b2172989895bc3f107 100644
--- a/src/app/components/About.js
+++ b/src/app/components/About.js
@@ -86,7 +86,7 @@ export default function AboutComponent() {
const Actors = () => {
return (
<>
- <h1 className="text-xl text-gray-500 font-bold mb-3 mt-5">
+ <h1 className="text-xl text-main-text font-bold mb-3 mt-5">
A quem se destina?
</h1>
<h1 className="text-balance text-main-text xl:w-[50%] mb-5">
@@ -150,7 +150,7 @@ export default function AboutComponent() {
const Functionalities = () => {
return (
<>
- <h1 className="text-xl text-gray-500 font-bold mb-3 mt-5">
+ <h1 className="text-xl text-main-text font-bold mb-3 mt-5">
O que você pode fazer aqui?
</h1>
<h1 className="text-balance text-main-text xl:w-[50%] mb-5">
diff --git a/src/app/components/AcessibilityBar.js b/src/app/components/AcessibilityBar.js
new file mode 100644
index 0000000000000000000000000000000000000000..b97148d54fc997e37821741ce0c55c7a6536f030
--- /dev/null
+++ b/src/app/components/AcessibilityBar.js
@@ -0,0 +1,39 @@
+import { Button } from "@mui/material";
+import ContrastTwoToneIcon from '@mui/icons-material/ContrastTwoTone';
+
+const toggleContrast = () => {
+ const htmlElement = document.querySelector("html");
+ const currentTheme = htmlElement?.getAttribute("data-theme");
+ const newTheme = currentTheme === "" ? "theme_high_contrast" : "";
+ htmlElement?.setAttribute("data-theme", newTheme);
+ };
+
+
+export default function AcessibilityBar({openMenu}) {
+
+ return (
+ <div className="fixed top-0 flex justify-between w-full bg-white z-20 text-xl max-md:text-sm py-1 px-8 text-text-filter max-md:gap-4 gap-6">
+ {/* px-4 text-xl h-10 */}
+ <div>
+ <button onClick={openMenu}>
+ RECURSOS EDUCACIONAIS DIGITAIS
+ </button>
+ </div>
+
+ <div className="flex gap-24 max-md:gap-6">
+ <button onClick={openMenu}>
+ MENU LATERAL
+ </button>
+
+ <button onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
+ TOPO
+ </button>
+
+ <button onClick={() => toggleContrast()}>
+ <ContrastTwoToneIcon />
+ </button>
+ </div>
+ </div>
+ );
+
+}
\ No newline at end of file
diff --git a/src/app/components/Cards.js b/src/app/components/Cards.js
index 35273b90247f9f5af217ba17b92465ec64531f8e..fefe3a577794b5261ae354019519cc6dd8d81e57 100644
--- a/src/app/components/Cards.js
+++ b/src/app/components/Cards.js
@@ -104,7 +104,7 @@ export default function Cards(props) {
>
<CardMedia
- className="hover:scale-105 z-1 hover:relative z-0 border border-gray-400 transition-transform rounded-xl flex-shrink-0 aspect-video"
+ className="hover:scale-105 z-1 hover:relative z-0 border border-gray-color transition-transform rounded-xl flex-shrink-0 aspect-video"
sx={{
width: props?.thumbWidth ?? 400,
height: props?.thumbHeight ?? 225,
@@ -135,7 +135,7 @@ export default function Cards(props) {
/>
}
title={
- <Typography variant="body2" color="" className="line-clamp-2 ">
+ <Typography variant="body2" className="line-clamp-2 text-main-text font-bold">
{props["title"]}
</Typography>
}
@@ -143,15 +143,13 @@ export default function Cards(props) {
<>
<Typography
variant="body2"
- color="text.secondary"
- className="line-clamp-1"
+ className="line-clamp-1 text-text-color font-light"
>
{props["author"]}
</Typography>
<Typography
variant="body3"
- color="text.secondary"
- className="line-clamp-1"
+ className="line-clamp-1 text-text-color font-light"
>
{timeFunction(props.updated_at)}
</Typography>
diff --git a/src/app/components/GroupButtonsFilters.js b/src/app/components/GroupButtonsFilters.js
index 81f18697ddbccabeac0057c098e2498f63c9fd02..ac3d2a60ceb382b3ff4d9546851b3b506c261bab 100644
--- a/src/app/components/GroupButtonsFilters.js
+++ b/src/app/components/GroupButtonsFilters.js
@@ -46,7 +46,7 @@ export default function GroupButtonsFilters({ setTitlePage, setSelectFilter, sel
{atalhos.map((item, index) => {
return (
<div key={index}>
- <Button className={`normal-case text-base rounded-lg min-w-32 font-medium mx-1 text-gray-500 bg-button-filters ${selectFilter === item.order ? "bg-secondary text-white hover:bg-secondary-hover" : " hover:bg-slate-300"}`}
+ <Button className={`normal-case text-base rounded-lg min-w-32 font-medium mx-1 text-main-text bg-button-filters ${selectFilter === item.order ? "bg-secondary text-white hover:bg-secondary-hover" : " hover:bg-slate-300"}`}
onClick={() => {
setSelectFilter(item.order);
setTitlePage(item.titlePage);
diff --git a/src/app/components/GroupCardsCollections.js b/src/app/components/GroupCardsCollections.js
index d2bce764f7a5b2e4b555705a3d27db18dbd39ddb..a8a588ef1f84e2b5ecd45805777336f361906285 100644
--- a/src/app/components/GroupCardsCollections.js
+++ b/src/app/components/GroupCardsCollections.js
@@ -63,7 +63,7 @@ export default function GroupCardsCollections({ data, cardsPerRow }) {
className="mb-2 border-hidden hover:bg-transparent rounded-xl normal-case flex "
onClick={toggleContent}
>
- <p className="hover:bg-main px-4 text-gray-600 text-lg rounded-md">
+ <p className="hover:bg-main px-4 text-main-text-click text-lg rounded-md">
{expanded ? "Ver menos..." : "Ver mais..."}
</p>
diff --git a/src/app/components/Header.js b/src/app/components/Header.js
index dfebd8ccbd6b375d9a119385177602affd8fb838..355dd01263813ade9064629591929a850a1ce7e8 100644
--- a/src/app/components/Header.js
+++ b/src/app/components/Header.js
@@ -23,6 +23,7 @@ import NeedLoginModal from "../recurso/[id]/components/needLoginModal";
import { isLoggedIn } from "@/app/handlers/loginHandler";
import { redirect, usePathname, useSearchParams } from "next/navigation";
import { useRouter } from "next/navigation";
+import AcessibilityBar from "./AcessibilityBar";
/**
@@ -100,8 +101,9 @@ export default function Header({ setQuery, handleOpenMenu }) {
return (
- <div className="fixed z-10">
+ <div className="fixed top-9 z-10">
<Box className="w-screen">
+ {/* <AcessibilityBar /> */}
<AppBar className="bg-main px-2 shadow-none" position="static">
<Toolbar className="flex justify-between">
<div className={`flex justify-left align-center ${openSearch ? "max-sm:hidden" : ""}`}>
@@ -141,7 +143,7 @@ export default function Header({ setQuery, handleOpenMenu }) {
{!openSearch ? (
<div className="flex">
<IconButton onClick={handleOpenSearch}>
- <SearchIcon className="text-slate-600 text-2xl" />
+ <SearchIcon className="text-main-text-click text-2xl" />
</IconButton>
<AccountMenu isOpen={openMenuProfile} />
<IconButton
@@ -152,7 +154,7 @@ export default function Header({ setQuery, handleOpenMenu }) {
onClick={handleMobileMenuOpen}
color="inherit"
>
- <MoreIcon className="text-slate-600 text-2xl" />
+ <MoreIcon className="text-main-text-click text-2xl" />
</IconButton>
</div>
) : (
@@ -163,7 +165,7 @@ export default function Header({ setQuery, handleOpenMenu }) {
onClick={handleOpenSearch}
className="max-xs:left-6"
>
- <HighlightOffIcon className="text-slate-600" />
+ <HighlightOffIcon className="text-main-text-click" />
</IconButton>
</div>
)}
diff --git a/src/app/components/InfiniteScrollCards.js b/src/app/components/InfiniteScrollCards.js
index 7fbec8b842656461437923b7ac7fc10c5565dc3d..d1c9ee030401fdc8a9858de05facc2518b95fe51 100644
--- a/src/app/components/InfiniteScrollCards.js
+++ b/src/app/components/InfiniteScrollCards.js
@@ -84,7 +84,7 @@ export default function InfiniteScrollCards({ data, type = "Collection", setNewS
<div className="bg-white mb-10 pt-6 pl-4 mr-6 rounded-2xl">
<p className="text-2xl max-md:text-center font-bold mb-0 text-text-color mr-2 inline-block">{item['name']}</p>
<div className="flex flex-wrap justify-between mr-8 max-md:flex-col ">
- <p className=" ml-1 max-md:text-center text-gray-500 mb-0">
+ <p className=" ml-1 max-md:text-center text-main-text mb-0">
por <Link href={"/perfil/" + item["owner"]["id"]}> {item["owner"]["name"]}</Link>{timeFunction(item["updated_at"])}
</p>
<div className="flex max-md:justify-center">
@@ -122,7 +122,7 @@ export default function InfiniteScrollCards({ data, type = "Collection", setNewS
<div className="flex flex-col">
<p className="text-2xl max-sm:text-center font-bold mb-0 text-text-color ml-4 inline-block">Coleções Recomendadas pelo MEC</p>
<Link href="/perfil/35342">
- <p className=" ml-5 max-sm:text-center text-gray-500 mb-4" > por Ministério da Educação</p>
+ <p className=" ml-5 max-sm:text-center text-main-text mb-4" > por Ministério da Educação</p>
</Link>
{mecCollection.map((item, index) => {
return (
diff --git a/src/app/components/Overlay.js b/src/app/components/Overlay.js
index 142663e69f43ca54cb0f1c0011c974c450a6084b..ffaa209e0e3b52b45587b19e661df9e723a48abd 100644
--- a/src/app/components/Overlay.js
+++ b/src/app/components/Overlay.js
@@ -6,6 +6,7 @@ import { Suspense, useEffect, useState } from "react";
import theme from "@/app/theme";
import { ThemeProvider } from "@emotion/react";
import Loading from "./Loading";
+import AcessibilityBar from "./AcessibilityBar";
/**
* @param {Object} props
@@ -40,6 +41,7 @@ export default function Overlay({
<Suspense fallback={<Loading />}>
<ThemeProvider theme={theme}>
<main className="flex min-h-screen bg-main flex-col">
+ <AcessibilityBar openMenu={handleOpenMenu} />
<Header setQuery={setQuery} handleOpenMenu={handleOpenMenu} />
<SideBar
filterSubject={filterSubject}
@@ -52,7 +54,7 @@ export default function Overlay({
<div
className={`flex flex-col ml-0 ${
openMenu ? "md:ml-64" : "md:ml-24"
- } mt-[63px] bg-main `}
+ } mt-[90px] bg-main `}
>
{children}
</div>
diff --git a/src/app/components/SearchComponent.js b/src/app/components/SearchComponent.js
index 267aa1bdb8eb4718986827edfa017878bb41a5e8..6a5c5aee0238584e7631dfca6380e83c30b360c0 100644
--- a/src/app/components/SearchComponent.js
+++ b/src/app/components/SearchComponent.js
@@ -150,7 +150,7 @@ export default function SearchComponent({ setQuery, sizeWindow }) {
>
<Search ref={searchRef} className="flex w-[90%] align-center row-reverse bg-white rounded-xl mr-4 ">
<Button type="submit">
- <SearchIconWrapper className="text-slate-500 ">
+ <SearchIconWrapper className="text-main-text-click ">
<SearchIcon />
</SearchIconWrapper>
</Button>
@@ -158,7 +158,7 @@ export default function SearchComponent({ setQuery, sizeWindow }) {
<StyledInputBase
fullWidth
placeholder="Pesquisar"
- inputProps={{ "aria-label": "search", className: "text-slate-400 " }}
+ inputProps={{ "aria-label": "search", className: "text-text-color " }}
onChange={(e) => {
setInput(e.target.value);
setDrop(e.target.value !== "" && true)
diff --git a/src/app/components/ShareModal.js b/src/app/components/ShareModal.js
index 3fb1556d00d9c75e96a3f08a0440fe5778fd3e8b..af10d68928206935d3635991db843798d7e17010 100644
--- a/src/app/components/ShareModal.js
+++ b/src/app/components/ShareModal.js
@@ -30,7 +30,7 @@ export default function ShareModal({ open, onClose }) {
<Button
disableElevation
variant="outlined"
- className="border-main text-gray-500 border normal-case gap-2 "
+ className="border-main text-main-text border normal-case gap-2 "
sx={{
justifyContent: "start",
}}
@@ -52,7 +52,7 @@ export default function ShareModal({ open, onClose }) {
<Button
disableElevation
variant="outlined"
- className="border-main text-gray-500 border normal-case flex gap-2"
+ className="border-main text-main-text border normal-case flex gap-2"
sx={{
justifyContent: "start",
}}
@@ -74,7 +74,7 @@ export default function ShareModal({ open, onClose }) {
<Button
disableElevation
variant="outlined"
- className="border-main text-gray-500 border normal-case flex gap-2"
+ className="border-main text-main-text border normal-case flex gap-2"
sx={{
justifyContent: "start",
}}
diff --git a/src/app/components/SideBar.js b/src/app/components/SideBar.js
index 5da214d8b932e95bd2109030c054d9642d862c7f..728dcbd04c401f894a80b09bdf0734089a0df063 100644
--- a/src/app/components/SideBar.js
+++ b/src/app/components/SideBar.js
@@ -87,12 +87,12 @@ export default function SideBar({ setFilterSubject, openMenu }) {
return (
<>
<div
- className={`top-14 sm:top-[60px] start-0 overflow-y-auto pb-24 bg-main pl-8 w-64 text-white fixed h-full z-40 ease-in-out duration-300 ${!openMenu ? "-translate-x-full " : "translate-x-0"
+ className={`top-[100px] start-0 overflow-y-auto pb-24 bg-main pl-8 w-64 text-white fixed h-full z-40 ease-in-out duration-300 ${!openMenu ? "-translate-x-full " : "translate-x-0"
}`}
>
<div className="pt-4">
- <a className="text-xl font-bold text-gray-500 ">Acesso Rápido</a>
- <div className="flex flex-col text-gray-500 mt-2">
+ <a className="text-xl font-bold text-main-text ">Acesso Rápido</a>
+ <div className="flex flex-col text-main-text mt-2">
{acessoRapido.map((item, index) => {
return (
<Link
@@ -122,8 +122,8 @@ export default function SideBar({ setFilterSubject, openMenu }) {
: ""
}`}
>
- <a className="text-xl font-bold text-gray-500 ">Grandes Áreas</a>
- <div className="flex flex-col text-gray-500 mt-2">
+ <a className="text-xl font-bold text-main-text ">Grandes Áreas</a>
+ <div className="flex flex-col text-main-text mt-2">
{subjects.map((item, index) => {
return (
<a
@@ -151,7 +151,7 @@ export default function SideBar({ setFilterSubject, openMenu }) {
</div>
{!openMenu && (
<div className="max-md:hidden ">
- <div className="flex flex-col pt-2 items-strech gap-1 top-16 sm:top-[60px] start-0 overflow-y-auto p-2 bg-main w-24 text-white fixed h-full z-40 ease-in-out duration-300 ">
+ <div className="flex flex-col pt-2 items-strech gap-1 top-4 sm:top-[100px] start-0 overflow-y-auto p-2 bg-main w-24 text-white fixed h-full z-40 ease-in-out duration-300 ">
{acessoRapido.map((item, index) => {
return (
<Link
diff --git a/src/app/components/Title.js b/src/app/components/Title.js
index 6e64e6bcbacd82d5bd4790413928c82819c77286..de696c1802ef53c39ffd8c95cf17d2461228b733 100644
--- a/src/app/components/Title.js
+++ b/src/app/components/Title.js
@@ -1,7 +1,7 @@
export default function Title() {
return (
<div className="my-10 mx-10">
- <h1 className="text-3xl max-lg:text-xl font-bold text-gray-500 my-10 text-center">
+ <h1 className="text-3xl max-lg:text-xl font-bold text-main-text my-10 text-center">
Plataforma MEC de Recursos Educacionais Digitais
</h1>
<h1 className="text-lg max-lg:text-base text-main-text text-balance mb-5 text-center">
diff --git a/src/app/components/UsersPageCard.js b/src/app/components/UsersPageCard.js
index 5c1c84500f301a61e266ecf203764f9d6a837cc4..91f60d73644be469a56d0adeba4bdf55e840148f 100644
--- a/src/app/components/UsersPageCard.js
+++ b/src/app/components/UsersPageCard.js
@@ -18,21 +18,21 @@ export default function UsersPageCard({ item }) {
<Avatar src={"https://api.portalmec.c3sl.ufpr.br/" + item["avatar"]} sx={{ position: "inherit" }} className=" min-h-[120px] min-w-[120px] m-2" />
- <p className=" font-bold text-gray-500 text-center">{item["name"]}</p>
+ <p className=" font-bold text-main-text text-center">{item["name"]}</p>
</div>
<Divider className="mx-4" />
<div className="inline flex justify-center">
- <Person fontSize="small" className="text-gray-500 mt-2" />
- <p className="mt-2 text-sm text-gray-500">Seguidores {item["follows_count"]}</p>
+ <Person fontSize="small" className="text-main-text mt-2" />
+ <p className="mt-2 text-sm text-main-text">Seguidores {item["follows_count"]}</p>
</div>
<div className="inline flex justify-between mb-2 mx-8">
<div className="inline">
- <CollectionsBookmark fontSize="small" className="text-gray-500" />
- <p className="text-sm text-gray-500 inline px-1">Coleções {item["collections_count"]} </p>
+ <CollectionsBookmark fontSize="small" className="text-main-text" />
+ <p className="text-sm text-main-text inline px-1">Coleções {item["collections_count"]} </p>
</div>
<div className="inline">
- <Subject fontSize="small" className="text-gray-500" />
- <p className="text-sm text-gray-500 inline px-1">Recursos {item["learning_objects_count"]}</p>
+ <Subject fontSize="small" className="text-main-text" />
+ <p className="text-sm text-main-text inline px-1">Recursos {item["learning_objects_count"]}</p>
</div>
</div>
</div>
diff --git a/src/app/entrar/components/LoginForm.js b/src/app/entrar/components/LoginForm.js
index 0651833920a53681cfe0179b365676299f50bb98..4a0436a4ea688efd4d566051492442698b37a4f2 100644
--- a/src/app/entrar/components/LoginForm.js
+++ b/src/app/entrar/components/LoginForm.js
@@ -100,7 +100,7 @@ export default function LoginForm({
fullWidth
disableElevation
variant="outlined"
- className="my-2 bg-white border-white text-gray-500 normal-case flex gap-2 w-96 font-bold hover:bg-main-hover"
+ className="my-2 bg-white border-white text-main-text normal-case flex gap-2 w-96 font-bold hover:bg-main-hover"
>
<span>Entrar com o</span>
<Image className="w-14 h-6" src="/govbr.svg" alt="govbr logo" width={10} height={10} />
@@ -110,7 +110,7 @@ export default function LoginForm({
fullWidth
disableElevation
variant="outlined"
- className="mt-2 bg-white border-white text-gray-500 normal-case flex gap-2 w-96 hover:bg-main-hover"
+ className="mt-2 bg-white border-white text-main-text normal-case flex gap-2 w-96 hover:bg-main-hover"
>
<Image className="w-6 h-6" src="/google.svg" alt="google logo" width={10} height={10} />
<span>Entrar com o Google</span>
diff --git a/src/app/entrar/components/SignupModal.js b/src/app/entrar/components/SignupModal.js
index 63d0a542d81e4573da4d21f8ff5536409ab01383..6f5ad0b89fce142af81947335814edae503fa8b9 100644
--- a/src/app/entrar/components/SignupModal.js
+++ b/src/app/entrar/components/SignupModal.js
@@ -131,7 +131,7 @@ export default function SignupModal({ open, handleClose }) {
fullWidth
disableElevation
variant="outlined"
- className="mt-2 border-main text-gray-500 normal-case flex gap-2"
+ className="mt-2 border-main text-main-text normal-case flex gap-2"
>
<Image
height="0"
diff --git a/src/app/globals.css b/src/app/globals.css
index d047a6f2f3abd18ea2df609e4c5cb94ba6e0ee94..3110c8270daafd222b3d99471b6d7ccdf7454c1d 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -12,4 +12,28 @@
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
+}
+
+@layer base {
+ html {
+ --main: #f5f9f9;
+ --secondary: #00bacc;
+ --white: #ffffff;
+ --orange: #ed6f24;
+ --secondary-hover: #039eb7;
+ --orange-hover: #de5518;
+ --main-text: #858585;
+ --main-text-click: #858585;
+ --black-hover: #000100;
+ --violet: #56358c;
+ --pink: #e62954;
+ --text-color: #5e6b6b;
+ --text-color-click: #5e6b6b;
+ --main-hover: #dce1e1;
+ --button-filters: #e1e8e8;
+ --text-filter: #6c8080;
+ --gray-color: #b9cccc;
+ }
+ @import "themes/theme_high_contrast.css";
+ @import "themes/tema_especial.css"
}
\ No newline at end of file
diff --git a/src/app/mec/page.js b/src/app/mec/page.js
index 93738ed7634c14d4ed44d6c793e918cd1d0abcea..c6f07830c3ac651a94f4b6ace13e7c0f6e064419 100644
--- a/src/app/mec/page.js
+++ b/src/app/mec/page.js
@@ -4,6 +4,8 @@ import Content from "../components/Content";
export default function Mec() {
return (
- <Content name={"MEC"} />
+ <div className="mt-[16px]" >
+ <Content name={"MEC"} />
+ </div>
)
};
\ No newline at end of file
diff --git a/src/app/perfil/[id]/components/AboutCard.js b/src/app/perfil/[id]/components/AboutCard.js
index 576f0dd8fe2156205e529fcc3da777466f837249..b7724d04c2cdea62a6e29ac1f2bac899f19f6dd5 100644
--- a/src/app/perfil/[id]/components/AboutCard.js
+++ b/src/app/perfil/[id]/components/AboutCard.js
@@ -26,16 +26,16 @@ const AboutCard = ({ title, content }) => {
<div className="mt-10 min-w-[200px] overflow-hidden transition-height bg-white">
<div className='p-4 rounded-md min-w-[200px] min-h-[180px] ' >
- <h2 className="text-gray-500 text-2xl font-semibold ">{title}</h2>
+ <h2 className="text-main-text text-2xl font-semibold ">{title}</h2>
<div id="content" className="content pt-2">
- <p className={` ${expanded ? '' : 'line-clamp-3'} text-sm text-gray-500 `}>{content}</p>
+ <p className={` ${expanded ? '' : 'line-clamp-3'} text-sm text-main-text `}>{content}</p>
</div>
<div className='flex justify-center'>
{/*Verifica se é para o botão aparecer e faz a lógica de Ver mais */}
{showButton && (
<button
onClick={toggleContent}
- className="bg-white text-gray-500 px-4 py-2 rounded transition-colors hover:bg-gray-200 text-base font-medium "
+ className="bg-white text-main-text px-4 py-2 rounded transition-colors hover:bg-gray-200 text-base font-medium "
>
{expanded ? 'Ver menos' : 'Ver mais'}
{expanded ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
diff --git a/src/app/perfil/[id]/components/FollowersCards.js b/src/app/perfil/[id]/components/FollowersCards.js
index db840c3838c8aab27b5c23cdb60af81510f6f036..638381e7cf6219bb7be75bbe84131f8982e31e39 100644
--- a/src/app/perfil/[id]/components/FollowersCards.js
+++ b/src/app/perfil/[id]/components/FollowersCards.js
@@ -47,7 +47,7 @@ export default function FollowersCards({ id, count }) {
return (
<>
<div className="flex justify-between pt-10">
- <div className="text-gray-500 text-2xl font-semibold inline-block ">Seguidores</div>
+ <div className="text-main-text text-2xl font-semibold inline-block ">Seguidores</div>
</div>
<div className='p-3 my-5 rounded-md min-w-[200px] min-h-[180px] ' >
<div className="flex flex-wrap justify-center">
diff --git a/src/app/perfil/[id]/components/FollowingCards.js b/src/app/perfil/[id]/components/FollowingCards.js
index 1aa30f411c8a960ec158aa95797dcae99ed2117c..f99fbc6e94b7a0fbc4dade420c7e2dc9b126198c 100644
--- a/src/app/perfil/[id]/components/FollowingCards.js
+++ b/src/app/perfil/[id]/components/FollowingCards.js
@@ -47,7 +47,7 @@ export default function FollowingCards({ id, count }) {
return (
<>
<div className="flex justify-between pt-10">
- <div className="text-gray-500 text-2xl font-semibold inline-block ">Seguindo</div>
+ <div className="text-main-text text-2xl font-semibold inline-block ">Seguindo</div>
</div>
<div className='p-3 my-5 rounded-md min-w-[200px] min-h-[180px] ' >
<div className="flex flex-wrap justify-center">
diff --git a/src/app/perfil/[id]/components/GroupButton.js b/src/app/perfil/[id]/components/GroupButton.js
index 07674a61242bcfab6ea8497eac2fa68ac44c5637..47f0b8fd5b455b5446e0f2336ffe480e8acb414b 100644
--- a/src/app/perfil/[id]/components/GroupButton.js
+++ b/src/app/perfil/[id]/components/GroupButton.js
@@ -107,7 +107,7 @@ export default function GroupButton({ profileData, idLogin }) {
<ShareModal open={shareOpen} onClose={() => setShareOpen(false)} />
<div className='max-[1024px]:grid max-[1024px]:justify-items-center'>
<button
- className="border text-sm text-gray-500 border-main rounded-lg normal-case h-9 font-bold w-[90%] mt-2 hover:bg-gray-100 "
+ className="border text-sm text-main-text border-main rounded-lg normal-case h-9 font-bold w-[90%] mt-2 hover:bg-gray-100 "
onClick={() => setShareOpen(true)}
>
<ShareIcon fontSize='small' className='m-1' />
@@ -124,7 +124,7 @@ export default function GroupButton({ profileData, idLogin }) {
/>
{idLogin !== profileData["id"] &&
<button
- className="border text-sm text-gray-500 border-main rounded-lg normal-case h-9 font-bold w-[90%] mt-2 hover:bg-gray-100 "
+ className="border text-sm text-main-text border-main rounded-lg normal-case h-9 font-bold w-[90%] mt-2 hover:bg-gray-100 "
onClick={() => {
if (!loginBarrier()) return;
diff --git a/src/app/perfil/[id]/components/ProfileCollections.js b/src/app/perfil/[id]/components/ProfileCollections.js
index 688078873d352b74b93346398d96df5b87ac28d6..5c73d987d4238d4673f2c7b0a4f3467a1592ef5d 100644
--- a/src/app/perfil/[id]/components/ProfileCollections.js
+++ b/src/app/perfil/[id]/components/ProfileCollections.js
@@ -74,7 +74,7 @@ export default function ProfileCollections({ id, idLogin }) {
return (
<div className='p-3 my-10 rounded-md min-w-[200px] min-h-[180px] ' >
<div className="flex justify-between">
- <div className="text-gray-500 text-2xl font-semibold inline-block ">{idLogin === id ? "Minhas Coleções" : "Coleções"}</div>
+ <div className="text-main-text text-2xl font-semibold inline-block ">{idLogin === id ? "Minhas Coleções" : "Coleções"}</div>
<CreateCollectionModal open={collectionOpen} onClose={() => setCollectionOpen(false)} id={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"
@@ -92,7 +92,7 @@ export default function ProfileCollections({ id, idLogin }) {
<div className="bg-white mb-10 pt-6 pl-4 mr-6 rounded-2xl">
<p className="text-2xl max-md:text-center font-bold mb-0 text-text-color mr-2 inline-block">{item['name']}</p>
<div className="flex flex-wrap justify-between mr-8 max-md:flex-col ">
- <p className=" ml-1 max-md:text-center text-gray-500 mb-0">
+ <p className=" ml-1 max-md:text-center text-main-text mb-0">
por <Link href={"/perfil/" + item["owner"]["id"]}> {item["owner"]["name"]}</Link>
</p>
<div className="flex max-md:justify-center">
diff --git a/src/app/perfil/[id]/components/ProfileHomologation.js b/src/app/perfil/[id]/components/ProfileHomologation.js
index a2bd2b80a41400b67ad38876998acc43e5a96d3b..5a6d9786b770e6ae3291db2225035c773dea0919 100644
--- a/src/app/perfil/[id]/components/ProfileHomologation.js
+++ b/src/app/perfil/[id]/components/ProfileHomologation.js
@@ -47,7 +47,7 @@ export default function ProfileHomologation({ id }) {
return (
<Card className='p-3 my-10 rounded-md min-w-[200px] min-h-[180px] ' >
- <div className="text-gray-500 text-2xl font-semibold ">Homologação</div>
+ <div className="text-main-text text-2xl font-semibold ">Homologação</div>
<div className={`flex content flex-wrap justify-center ${expanded ? "" : "overflow-y-hidden"}`}>
{homologated.map((item, i) => {
return <CardsHomologation item={item} key={i} />
diff --git a/src/app/perfil/[id]/components/ProfileResources.js b/src/app/perfil/[id]/components/ProfileResources.js
index 9da934868b42ff5ee45b7e407ecae5ad4e57e4ec..a7081fa98de046eae04b27af2ee36a9c7b68f223 100644
--- a/src/app/perfil/[id]/components/ProfileResources.js
+++ b/src/app/perfil/[id]/components/ProfileResources.js
@@ -54,7 +54,7 @@ export default function ProfileResources({ id, idLogin }) {
<>
{/*Se o usuário estiver no seu perfil aparece a opção de publicar novo recurso e nomenclatura é diferente */}
<div className="flex justify-between pt-10">
- <div className="text-gray-500 text-2xl font-semibold inline-block ">{idLogin === id ? "Meus Recursos" : "Recursos"}</div>
+ <div className="text-main-text text-2xl font-semibold inline-block ">{idLogin === id ? "Meus Recursos" : "Recursos"}</div>
{idLogin === id &&
<Link href="/publicar">
<button
diff --git a/src/app/perfil/[id]/components/SelectionButtons.js b/src/app/perfil/[id]/components/SelectionButtons.js
index 166347a5a46d0d6239b6bd8b9d3b7b45274a10de..53088f38c380fad63c4bb22ed734d2020fc04925 100644
--- a/src/app/perfil/[id]/components/SelectionButtons.js
+++ b/src/app/perfil/[id]/components/SelectionButtons.js
@@ -28,7 +28,7 @@ export default function SelectionButtons({ setOptButton, verifyCurator, idProfil
return (
<Grid item key={index} xs={6} sm={12 / buttons.length} lg={12 / buttons.length}>
<button
- className="h-12 text-gray-500 text-base normal-case font-bold w-[100%] hover:bg-gray-100 hover:text-secondary hover:border-b-2 hover:border-secondary focus:text-secondary focus:border-b-2 focus:border-secondary"
+ className="h-12 text-main-text text-base normal-case font-bold w-[100%] hover:bg-gray-100 hover:text-secondary hover:border-b-2 hover:border-secondary focus:text-secondary focus:border-b-2 focus:border-secondary"
onClick={() => setOptButton(index)}
>
{item}
diff --git a/src/app/perfil/[id]/components/UserCard.js b/src/app/perfil/[id]/components/UserCard.js
index 950290e1188fa7af312ee57fd06bbe7dee7e42c4..b2f26364efa32936ed56381820281390226c80c2 100644
--- a/src/app/perfil/[id]/components/UserCard.js
+++ b/src/app/perfil/[id]/components/UserCard.js
@@ -164,7 +164,7 @@ export default function UserCard({ profileData, idLogin }) {
</Grid>
<Grid item lg={8} md={12} xs={12}>
<div className=' py-5 '>
- <h2 className='max-[1024px]:flex max-[1024px]:justify-center max-sm:text-4xl text-gray-500 font-bold text-5xl pb-1'>{profileData["name"]}</h2>
+ <h2 className='max-[1024px]:flex max-[1024px]:justify-center max-sm:text-4xl text-main-text font-bold text-5xl pb-1'>{profileData["name"]}</h2>
<p className='max-[1024px]:flex max-[1024px]:justify-center text-[#00bacc] max-sm:text-lg text-xl pb-1'>{profileData["email"]}</p>
<div className='max-[1024px]:px-8 pb-1'>
{translateItems &&
@@ -173,9 +173,9 @@ export default function UserCard({ profileData, idLogin }) {
</div>
{isLoggedIn() && <div className='max-[1024px]:flex max-[1024px]:justify-center pb-1'>
<p className='inline text-[#00bacc] text-3xl max-sm:text-2xl font-bold'>{following}</p>
- <p className='inline pl-1 text-xl max-sm:text-lg text-gray-500'>Seguindo</p>
+ <p className='inline pl-1 text-xl max-sm:text-lg text-main-text'>Seguindo</p>
<p className='inline pl-2 text-3xl max-sm:text-2xl text-[#00bacc] font-bold'>{followers}</p>
- <p className='inline pl-1 text-xl max-sm::text-lg text-gray-500'>Seguidores</p>
+ <p className='inline pl-1 text-xl max-sm::text-lg text-main-text'>Seguidores</p>
</div>}
{/*Botões de editar perfil e compartilhar */}
<GroupButton profileData={profileData} idLogin={idLogin} />
diff --git a/src/app/themes/tema_especial.css b/src/app/themes/tema_especial.css
new file mode 100644
index 0000000000000000000000000000000000000000..0b6560a504cb56c83393501b04bd344ad867a508
--- /dev/null
+++ b/src/app/themes/tema_especial.css
@@ -0,0 +1,17 @@
+html[data-theme="tema_especial"] {
+ --main: #f9ba00;
+ --secondary: #006622;
+ --white: #ff0011;
+ --orange: #f9c4b2;
+ --secondary-hover: #ff65c2;
+ --orange-hover: #abcdef;
+ --main-text: #221133;
+ --black-hover: #f0da5e;
+ --violet: #f0905a;
+ --pink: #696969;
+ --text-color: #420420;
+ --main-hover: #fafafa;
+ --button-filters: #771244;
+ --text-filter: #ffffff;
+ --gray-color: #ffff00;
+}
\ No newline at end of file
diff --git a/src/app/themes/theme_high_contrast.css b/src/app/themes/theme_high_contrast.css
new file mode 100644
index 0000000000000000000000000000000000000000..3d74ea42a59dc9fde650f8051538d4901d1c5866
--- /dev/null
+++ b/src/app/themes/theme_high_contrast.css
@@ -0,0 +1,19 @@
+html[data-theme="theme_high_contrast"] {
+ --main: #000000;
+ --secondary: #ffff00;
+ --white: #000000;
+ --orange: #ffff00;
+ --secondary-hover: #ffff00;
+ --orange-hover: #ffff88;
+ --main-text: #ffffff;
+ --main-text-click: #ffff00;
+ --black-hover: #000100;
+ --violet: #ffffff;
+ --pink: #ffffff;
+ --text-color: #ffffff;
+ --text-color-click: #ffff00;
+ --main-hover: #000000;
+ --button-filters: #000000;
+ --text-filter: #ffffff;
+ --gray-color: #ffff00;
+}
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index b5780be048d18afc3f51612f1f88cb10e8bfe408..3b7bd19975bbe7813da3c73d86531bb80fde0ba9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,21 +9,25 @@ module.exports = {
theme: {
extend: {
colors: {
- "main": "#f5f9f9",
- "secondary": "#00bacc",
- "white": "#fff",
- "orange": "#ED6F24",
- "secondary-hover": "#039EB7",
- "orange-hover": "#DE5518",
- "main-text": "#858585",
- "black-hover": "#0001",
- "violet": "#56358C",
- "pink": "#E62954",
- "text-color": "#5e6b6b",
- "main-hover": "#dce1e1",
- "button-filters": "#e1e8e8",
- "text-filter" : "#6c8080",
- "gray-color": "#B9CCCC",
+ // primary: 'var(--color-primary)',
+ "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)',
+ "violet": 'var(--violet)',
+ "pink": 'var(--pink)',
+ "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)',
+ // buttons: 'var(--color-buttons)',
},
backgroundImage: {
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",