fix button sobre mim height

senaarth · Apr 21, 2022 · 699a3b0 · 699a3b0 · vercel · Apr 21, 2022
1 parent f54def6
commit 699a3b0
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 10 deletions.
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import Head from "next/head";
+import { useRouter } from "next/router";
 import { PrismicRichText } from "@prismicio/react";
 import { Tooltip } from "@mui/material";
 
@@ -43,6 +44,8 @@ interface HomeProps {
  */
 
 export default function Home({ content, projects }: HomeProps): JSX.Element {
+  const router = useRouter();
+
   return (
     <Page>
       <Head>
@@ -78,9 +81,14 @@ export default function Home({ content, projects }: HomeProps): JSX.Element {
               Meus Projetos
               <span className="background" />
             </button>
-            <a href="/sobre" className="link">
+            <button
+              type="button"
+              onClick={() => router.push("/sobre")}
+              className="link"
+            >
               Sobre mim
-            </a>
+              <span className="background" />
+            </button>
           </div>
         </div>
         <div className="avatar">

diff --git a/src/styles/Home.ts b/src/styles/Home.ts
@@ -62,7 +62,7 @@ export const Hero = styled.div`
 
       * {
         width: 100%;
-        height: 50px;
+        min-height: 50px;
         border-radius: 6px;
         background-color: white;
         line-height: 50px;
@@ -75,12 +75,14 @@ export const Hero = styled.div`
         text-transform: lowercase;
         font-weight: 500;
         font-size: 1rem;
+        line-height: 1.125rem;
 
         .background {
           width: 0;
           height: 100%;
 
           position: absolute !important;
+          top: 0;
           left: 50%;
           transform: translateX(-50%);
           background-color: rgba(255, 255, 255, 0.05);
@@ -119,18 +121,26 @@ export const Hero = styled.div`
 
         &.link {
           border: 0;
+          width: 100%;
           background-color: transparent;
-          width: 5.15rem;
-          margin: auto;
-          border: 1px solid transparent;
+          display: flex;
+          align-items: center;
+          justify-content: center;
 
           transition: all 0.4s;
 
+          .background {
+            width: 0;
+            height: 50px;
+            background: #b1b1b1;
+            opacity: 0.1;
+          }
+
           &:hover {
-            background-color: #242424;
-            border: 1px solid #242424;
-            width: 100%;
-            filter: brightness(1);
+            .background {
+              width: 100%;
+              z-index: 0;
+            }
           }
         }
       }