Merge branch 'issue-272/UPDATE-login-page-hc' into 'develop'

WIP:Issue #272: UPDATE high contrast on login page

See merge request !257

src/app/entrar/components/LoginForm.js

@@ -49,13 +49,13 @@ export default function LoginForm({
           </div>
           <div className="flex flex-col ">
             <form onSubmit={handleSubmit} className="mb-5">
-              <Paper elevation={0} className="w-96 flex flex-col items-center p-5 rounded-xl">
+              <Paper elevation={0} className="flex flex-col bg-white-HC-dark w-96 items-center p-5 rounded-xl outline outline-1 outline-ice-HC-white">
                 <Image
                   src="/mecred.svg"
                   alt="MECRED Logo"
                   width={100}
                   height={24}
-                  className="m-5"
+                  className="m-5 invertLogo-HC-white"
                 />
                 {errorMessage ? (
                   <Alert severity="error" className="mb-3">{errorMessage}</Alert>
@@ -63,13 +63,13 @@ export default function LoginForm({
 
                 {/* Campo de E-mail */}
                 <div className="w-full mb-6">
-                  <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
+                  <label htmlFor="email" className="block text-sm font-medium text-darkGray-HC-white mb-1">
                     Insira seu e-mail
                   </label>
                   <input
                     id="email"
                     type="email"
-                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-secondary"
+                    className="w-full px-3 py-2 border border-mediumGray-HC-white rounded-md focus:outline-none focus:ring-2 focus:ring-turquoise-HC-white"
                     onChange={handleEmailChange}
                     alt="E-mail"
                   />
@@ -77,14 +77,14 @@ export default function LoginForm({
 
                 {/* Campo de Senha */}
                 <div className="w-full mb-6">
-                  <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
+                  <label htmlFor="password" className="block text-sm font-medium text-darkGray-HC-white mb-1">
                     Insira sua senha
                   </label>
                   <div className="relative">
                     <input
                       id="password"
                       type={showPassword ? 'text' : 'password'}
-                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-secondary"
+                      className="w-full px-3 py-2 border border-mediumGray-HC-white rounded-md focus:outline-none focus:ring-2 focus:ring-turquoise-HC-white"
                       onChange={handlePasswordChange}
                       alt="Senha"
                     />
@@ -102,7 +102,7 @@ export default function LoginForm({
                 <Button
                   fullWidth
                   disableElevation
-                  className="bg-turquoise text-white-HC-dark-underline hover:bg-turquoise-hover normal-case font-bold py-2 rounded-md"
+                  className="bg-turquoise-HC-white text-white-HC-dark-underline hover:bg-darkTurquoise-HC-dark hover:text-white normal-case font-bold py-2 rounded-md outline outline-1 outline-ice-HC-white"
                   type="submit"
                   alt="Entrar"
                   title="Entrar"
@@ -111,21 +111,21 @@ export default function LoginForm({
                 </Button>
 
                 {/* Links de Recuperação de Senha e Cadastro */}
-                <p className="mt-5 text-[14px] text-gray-600">
+                <p className="mt-5 text-[14px] text-darkGray-HC-white">
                   Esqueceu a senha?{" "}
                   <a
                     onClick={handleOpenModalPasswd}
-                    className="text-turquoise-HC-underline  cursor-pointer hover:font-bold"
+                    className="text-turquoise-HC-white-underline  cursor-pointer hover:font-bold"
                     alt="Esqueceu a senha?"
                   >
                     Clique aqui.
                   </a>
                 </p>
-                <p className="mt-2 text-[16px] text-gray-600">
+                <p className="mt-2 text-[16px] text-darkGray-HC-white">
                   Não tem uma conta?{" "}
                   <a
                     onClick={handleOpenModalSignup}
-                    className="text-turquoise-HC-underline  hover:font-bold cursor-pointer"
+                    className="text-turquoise-HC-white-underline  hover:font-bold cursor-pointer"
                     alt="Cadastre-se"
                   >
                     Cadastre-se aqui.
@@ -148,7 +148,7 @@ export default function LoginForm({
             </Button> */}
             <button
               onClick={() => router.push("/sobre")}
-              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"
+              className="text-turquoise-HC-white-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

src/app/entrar/components/LoginInfo.js

@@ -7,42 +7,42 @@ export default function LoginInfo() {
         {
             name: "Pesquise",
             icon: "/pesquisa.svg",
-            color: "violet"
+            color: "violet-HC-white"
         },
         {
             name: "Curta",
             icon: "/salvar.svg",
-            color: "pink",
+            color: "pink-HC-white",
         },
         {
             name: "Comente",
             icon: "/comentar.svg",
-            color: "orange"
+            color: "orange-HC-white"
         },
         {
             name: "Compartilhe",
             icon: "/compartilhar.svg",
-            color: "secondary"
+            color: "turquoise-HC-white"
         },
         {
             name: "Avalie",
             icon: "/avaliar.svg",
-            color: "orange"
+            color: "orange-HC-white"
         },
         {
             name: "Colecione",
             icon: "/colecionar.svg",
-            color: "secondary"
+            color: "turquoise-HC-white"
         },
         {
             name: "Contribua",
             icon: "/download.svg",
-            color: "violet"
+            color: "violet-HC-white"
         },
         {
             name: "Conecte-se!",
             icon: "/seguir.svg",
-            color: "pink"
+            color: "pink-HC-white"
         }
     ]
 
@@ -57,17 +57,17 @@ export default function LoginInfo() {
                     {cards.map((card, i) => {
                         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} />
+                                <Image className={`w-14 h-14 invertIcon-HC-black ${card["name"] === "Contribua" && `rotate-180`}`} alt={card["name"]} src={card["icon"]} width={10} height={10} />
                                 <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-darkGray-HC-white-underline text-balance mt-10 text-center">
+            <h1 className="max-xl:hidden mb-10 text-lg max-lg:text-base text-darkGray-HC-white 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-darkGray-HC-white-underline text-balance mt-10 text-center">
+            <h1 className="xl:hidden mb-10 text-lg max-lg:text-base text-darkGray-HC-white text-balance mt-10 text-center">
                 Entre na MEC RED através do painel acima para saber mais.
             </h1>
         </div>