Fix button hover transition

MatheusDamascenoDev · MatheusDamascenoDev · commit 6702a2128992 · 2024-08-21T14:52:01.000-03:00
diff --git a/src/components/ContactButton/styles.tsx b/src/components/ContactButton/styles.tsx
@@ -4,7 +4,7 @@ import styled from 'styled-components';
 const poppins = Poppins({ weight: ['600'], style: ['normal'], subsets: ['latin'], display: 'swap' });
 
 export const ContactButton = styled.button`
-display: flex;
+  display: flex;
   width: fit-content;
   height: 3.25rem;
   padding: 1.5625rem 1.5rem;
@@ -14,7 +14,7 @@ display: flex;
   border-radius: 0.5rem;
   font-size: 1rem;
   border: none;
-  background: ${({ theme }) => theme.gradients.CTA};
+  background: ${({ theme }) => theme.colors.mainGreen};
   box-shadow: ${({ theme }) =>
     `0px 0px 8px 0px ${theme.colors.shadows.mainGreen}, 0px 0px 1.9px 0px ${theme.colors.shadows.white}`};
   cursor: pointer;
@@ -23,16 +23,17 @@ display: flex;
   font-family: ${poppins.style.fontFamily};
 
   &:hover {
-    background: ${({ theme }) => theme.gradients.secondary};
+    background: ${({ theme }) => theme.colors.hover.mainGreen};
+    transition: 0.3s;
   }
 
-  @media (max-width: 1200px) { 
+  @media (max-width: 1200px) {
     font-size: 0.9rem;
     height: 2.5rem;
     padding: 1rem 1.25rem;
   }
 
-  @media (max-width: 500px) { 
+  @media (max-width: 500px) {
     font-size: 0.5rem;
     height: 2.25rem;
     padding: 0.45rem 1rem;
diff --git a/src/components/Navbar/navbar.tsx b/src/components/Navbar/navbar.tsx
@@ -21,16 +21,11 @@ export const Navbar = () => {
           src={lecodeLogo}
         />
         <TranslateButtonContainer>
-        <ContactButton 
-          type='button'
-        >
-          <Link
-            href='#contact'
-          >
+        <Link href='#contact'>
+          <ContactButton type='button'>
             {t('contactUs.button')}
-          </Link>
-          
-        </ContactButton>
+          </ContactButton>
+        </Link>
         <Language />
         </TranslateButtonContainer>
       </NavbarContentContainer>
diff --git a/src/components/NavbarMobile/header-mobile.tsx b/src/components/NavbarMobile/header-mobile.tsx
@@ -6,8 +6,7 @@ import { ContactButton } from '@/components/ContactButton';
 import lecodeLogo from '../../../public/lecode-logo.svg';
 import { InternalLinks } from '../InternalLinks';
 import { Language } from '../Language';
-import { NavbarContainer, NavbarContentContainer,ContactTraslate } from './styles';
-
+import { NavbarContainer, NavbarContentContainer, ContactTraslate } from './styles';
 
 export const HeaderMobile = () => {
   const { t } = useTranslation();
@@ -20,14 +19,10 @@ export const HeaderMobile = () => {
           src={lecodeLogo}
         />
         <ContactTraslate>
-        <ContactButton type='button'>
-          <Link
-            href='#contact'
-          >
-            {t('contactUs.button')}
+          <Link href='#contact'>
+            <ContactButton type='button'>{t('contactUs.button')}</ContactButton>
           </Link>
-        </ContactButton>
-        <Language />
+          <Language />
         </ContactTraslate>
       </NavbarContentContainer>
     </NavbarContainer>
