Merge pull request 'feat: criado responsivo para telas 2500px.' (#4) from feature/header into development

Reviewed-on: #4

src/components/Header/Form.module.scss

@@ -1,4 +1,4 @@
-.header-form {
+.form {
   position: relative;
 
   @media (max-width: 1024px) {
@@ -7,7 +7,7 @@
     grid-row: 2;
   }
 
-  .header-search {
+  .form-search {
     height: 32px;
     width: 264px;
     border-radius: 5px;
@@ -15,6 +15,14 @@
     outline: 0;
     border: 2px solid #f2f2f2;
 
+    @media (min-width: 2500px) {
+      height: 57px;
+      width: 515px;
+      font-size: 28px;
+      font-weight: 400;
+      line-height: 33px;
+    }
+
     @media (max-width: 1024px) {
       width: 100%;
     }
@@ -25,12 +33,22 @@
     }
   }
 
-  .header-search-icon {
+  .form-search-icon {
     position: absolute;
     background-color: transparent;
     right: 17px;
     bottom: 4px;
     border: 0;
     cursor: pointer;
+
+    @media (min-width: 2500px) {
+      bottom: 8px;
+
+      img {
+        height: 35px;
+        width: 35px;
+      }
+     
+    }
   }
 }

src/components/Header/Form.tsx

@@ -9,16 +9,16 @@ import search from "../../assets/svg/search.svg";
 
 const Form = () => {
   return (
-    <form action="./" className={styleForm["header-form"]}>
+    <form action="./" className={styleForm["form"]}>
       <input
         type="text"
         id="search"
-        className={styleForm["header-search"]}
+        className={styleForm["form-search"]}
         placeholder="Buscar..."
         required
       />
 
-      <button type="submit" className={styleForm["header-search-icon"]}>
+      <button type="submit" className={styleForm["form-search-icon"]}>
         <img src={search} alt="Lupa de pesquisa" />
       </button>
     </form>

src/components/Header/HeaderWrapper.module.scss

@@ -2,12 +2,16 @@
   display: flex;
   justify-content: space-between;
   height: 76px;
-  width: 100%;
   align-items: center;
   border-bottom: 1px solid #c4c4c4;
   padding: 0 100px;
   background-color: #000000;
 
+  @media (min-width: 2500px) {
+    padding: 22px 100px;
+    height: auto;
+  }
+
   @media (max-width: 1024px) {
     display: grid;
     grid-template-columns: repeat(3, max-content);

src/components/Header/Logo.module.scss

@@ -0,0 +1,6 @@
+.logo {
+  @media (min-width: 2500px) {
+    height: 50px;
+    width: 265px;
+  }
+}

src/components/Header/Logo.tsx

@@ -0,0 +1,15 @@
+// Imagem
+import logoM3 from "../../assets/svg/logo.svg";
+
+// Estilo
+import styleLogo from "./Logo.module.scss";
+
+const Logo = () => {
+  return (
+    <a href="#logo">
+      <img src={logoM3} alt="M3 Academy" className={styleLogo["logo"]} />
+    </a>
+  );
+};
+
+export { Logo };

src/components/Header/LogoM3.tsx

@@ -2,11 +2,7 @@
 import logoM3 from "../../assets/svg/logo.svg";
 
 const LogoM3 = () => {
-  return (
-    <a href="#logo">
-      <img src={logoM3} alt="M3 Academy" />{" "}
-    </a>
-  );
+  return <img src={logoM3} alt="M3 Academy" />;
 };
 
 export { LogoM3 };

src/components/Header/Nav.module.scss

@@ -1,4 +1,4 @@
-.header-nav {
+.nav {
   padding: 14px 100px;
   background-color: #000;
   text-decoration: none;
@@ -25,6 +25,12 @@
     text-decoration: none;
     transition: all 0.3s linear;
 
+    @media (min-width: 2500px) {
+      font-size: 28px;
+      font-weight: 500;
+      line-height: 33px;
+    }
+
     &:hover {
       font-weight: 500;
     }

src/components/Header/Nav.tsx

@@ -6,7 +6,7 @@ import styleNav from "./Nav.module.scss";
 
 const Nav = () => {
   return (
-    <nav className={styleNav["header-nav"]}>
+    <nav className={styleNav["nav"]}>
       <ul>
         <li>
           <a href="#cursos">Cursos</a>

src/components/Header/User.module.scss

@@ -11,6 +11,17 @@
     text-decoration: none;
     transition: all 0.3s linear;
 
+    @media (min-width: 2500px) {
+      font-size: 28px;
+      font-weight: 400;
+      line-height: 33px;
+
+      img {
+        height: 54px;
+        width: 54px;
+      }
+    }
+
     &:first-child {
       margin-right: 55px;
     }

src/pages/Header.tsx

@@ -3,7 +3,7 @@ import React from "react";
 
 // Componentes
 import { Menu } from "../components/header/Menu";
-import { LogoM3 } from "../components/header/LogoM3";
+import { Logo } from "../components/header/Logo";
 import { Form } from "../components/header/Form";
 import { User } from "../components/header/User";
 import { Nav } from "../components/header/Nav";
@@ -16,7 +16,7 @@ const Header = () => {
     <header>
       <div className={styleHeaderWrapper["header"]}>
         <Menu />
-        <LogoM3 />
+        <Logo />
         <Form />
         <User />
       </div>

src/styles/partials/Form.module.scss

@@ -0,0 +1,36 @@
+.header-form {
+  position: relative;
+
+  @media (max-width: 1024px) {
+    display: grid;
+    grid-column: 1 / -1;
+    grid-row: 2;
+  }
+
+  .header-search {
+    height: 32px;
+    width: 264px;
+    border-radius: 5px;
+    padding: 7px 16px 7px 16px;
+    outline: 0;
+    border: 2px solid #f2f2f2;
+
+    @media (max-width: 1024px) {
+      width: 100%;
+    }
+
+    &::placeholder {
+      font-weight: 400;
+      color: #c4c4c4;
+    }
+  }
+
+  .header-search-icon {
+    position: absolute;
+    background-color: transparent;
+    right: 17px;
+    bottom: 4px;
+    border: 0;
+    cursor: pointer;
+  }
+}

src/styles/partials/HeaderWrapper.module.scss

@@ -0,0 +1,20 @@
+.header {
+  display: flex;
+  justify-content: space-between;
+  height: 76px;
+  width: 100%;
+  align-items: center;
+  border-bottom: 1px solid #c4c4c4;
+  padding: 0 100px;
+  background-color: #000000;
+
+  @media (max-width: 1024px) {
+    display: grid;
+    grid-template-columns: repeat(3, max-content);
+    grid-template-rows: repeat(2, 1fr);
+    gap: 21px;
+    height: auto;
+    padding: 25px 16px;
+  }
+}
+

src/styles/partials/Menu.module.scss

@@ -0,0 +1,7 @@
+.header-menu {
+  display: none;
+
+  @media (max-width: 1024px) {
+    display: flex;
+  }
+}

src/styles/partials/Nav.module.scss

@@ -0,0 +1,27 @@
+.header-nav {
+  padding: 14px 100px;
+  background-color: #000;
+  text-decoration: none;
+
+  @media (max-width: 1024px) {
+    display: none;
+  }
+
+  ul {
+    display: flex;
+    list-style: none;
+  }
+
+  li {
+    margin-right: 25px;
+  }
+
+  a {
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 16px;
+    text-transform: uppercase;
+    color: #fff;
+    text-decoration: none;
+  }
+}

src/styles/partials/User.module.scss

@@ -0,0 +1,22 @@
+.header-user {
+  display: flex;
+  align-items: center;
+
+  p {
+    color: #fff;
+    margin-right: 55px;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 16px;
+    text-transform: uppercase;
+    cursor: pointer;
+
+    @media (max-width: 1024px) {
+      display: none;
+    }
+  }
+
+  img {
+    cursor: pointer;
+  }
+}