fixed footer link to about us & link color at login

Green-Cycle · Jun 3, 2024 · 7b4e4d2 · 7b4e4d2
1 parent da8b9c1
commit 7b4e4d2
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 20 deletions.
diff --git a/Frontend/src/components/Footer.css b/Frontend/src/components/Footer.css
@@ -14,9 +14,16 @@
   row-gap: 10px;
 }
 
+.footer__link {
+  color: white;
+  text-decoration: none;
+  padding-left: 0.5rem;
+}
+
 .footer__column {
   display: flex;
   column-gap: 5px;
+  align-items: center;
 }
 
 .footer__column-social {

diff --git a/Frontend/src/components/Footer.jsx b/Frontend/src/components/Footer.jsx
@@ -1,3 +1,4 @@
+import { Link } from 'react-router-dom';
 import './Footer.css';
 function Footer() {
   return (
@@ -10,7 +11,9 @@ function Footer() {
             alt='icone de folha'
             className='footer__icon'
           />
-          <p>Sobre</p>
+          <Link to={'/sobre'} className='footer__link'>
+            Sobre
+          </Link>
         </div>
       </div>
 

diff --git a/Frontend/src/pages/Login.css b/Frontend/src/pages/Login.css
@@ -1,13 +1,13 @@
 @keyframes errorPopupAnimation {
-  0%{
+  0% {
     opacity: 0;
   }
 
-  50%{
+  50% {
     opacity: 1;
   }
 
-  100%{
+  100% {
     display: none;
   }
 }
@@ -17,64 +17,65 @@
   height: 70vh;
 }
 
-.login__wrapper{
+.login__wrapper {
   width: 350px;
   border: 1px solid gray;
   margin: auto;
   border-radius: 8px;
   padding-block: 1.5rem;
 }
 
-.login__title{
+.login__title {
   font-weight: 400;
   font-size: 24px;
 }
 
-.login form{
+.login form {
   display: flex;
   flex-direction: column;
   gap: 2rem;
   margin-top: 1.5rem;
   width: 90%;
-  margin-inline: auto
+  margin-inline: auto;
 }
 
-.login__input-wrapper{
-  position: relative
+.login__input-wrapper {
+  position: relative;
 }
 
-.login__input{
+.login__input {
   width: 100%;
   position: relative;
 }
 
-.login button{
-  background-color: #5F6368;
+.login button {
+  background-color: #5f6368;
   padding-block: 0.5rem;
   border-radius: 8px;
   width: 100%;
   transition: 250ms ease-out;
 }
 
-.login button:hover{
+.login button:hover {
   background-color: gray;
 }
 
-.login__input-error{
+.login__input-error {
   color: red;
   font-size: 11px;
   text-align: right;
   margin-top: 0.5rem;
 }
 
-.login__button-wrapper{
+.login__button-wrapper {
   width: 100%;
   position: relative;
 }
 
-.login__register{
+.login__register {
   margin-top: 1rem;
   font-size: 12px;
+  color: black;
 }
 
 .login__register-link {
@@ -83,7 +84,7 @@
   text-underline-offset: 5px;
 }
 
-.errorPopup{
+.errorPopup {
   position: fixed;
   top: 20px;
   right: 30px;
@@ -97,4 +98,4 @@
   color: white;
   text-transform: uppercase;
   animation: errorPopupAnimation 1s forwards;
-}
+}
diff --git a/Frontend/src/pages/Login.jsx b/Frontend/src/pages/Login.jsx
@@ -102,7 +102,7 @@ function Login() {
               className='login__input'
               name='password'
               type='password'
-              placeholder='password'
+              placeholder='Senha'
               value={password}
               onChange={(e) => setPassword(e.target.value)}
               required