From 84d40f64906633bc35015b70aee5f8d5a8ed3f7e Mon Sep 17 00:00:00 2001
From: Filipe Quintanilha <feliipequintanilha@gmail.com>
Date: Thu, 29 Dec 2022 14:46:49 -0300
Subject: [PATCH] feat(footer): Adiciona footer mobile

---
 src/assets/svgs/more.svg               |   3 +
 src/components/CustomForm.tsx          |  13 ++-
 src/components/HeaderTop.tsx           |   2 +-
 src/components/ListaFooter.tsx         |  36 +++++--
 src/styles/common/global.scss          |   4 +
 src/styles/partials/Footer.module.scss | 137 ++++++++++++++++++++-----
 src/styles/partials/Header.module.scss |   2 +
 7 files changed, 159 insertions(+), 38 deletions(-)
 create mode 100644 src/assets/svgs/more.svg

diff --git a/src/assets/svgs/more.svg b/src/assets/svgs/more.svg
new file mode 100644
index 0000000..d64bfd8
--- /dev/null
+++ b/src/assets/svgs/more.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="9" viewBox="0 0 8 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.625 3.32031H7.79688V4.6875H4.625V8.28125H3.17188V4.6875H0V3.32031H3.17188V0H4.625V3.32031Z" fill="#303030"/>
+</svg>
diff --git a/src/components/CustomForm.tsx b/src/components/CustomForm.tsx
index d31c727..635497e 100644
--- a/src/components/CustomForm.tsx
+++ b/src/components/CustomForm.tsx
@@ -7,8 +7,12 @@ import styles from "../styles/main.module.scss";
 const initialValues = {
   name: "",
 };
+interface ICampoProps {
+  place: string;
+  button: string;
+}
 
-const CustomForm = () => {
+const CustomForm = ({ place, button }: ICampoProps) => {
   const handleFormikSubmit = () => {};
 
   return (
@@ -18,9 +22,12 @@ const CustomForm = () => {
           <Field
             className={styles["campo-busca__input"]}
             name="name"
-            placeholder="Buscar..."
+            placeholder={place}
           />
-          <img className={styles["campo-busca__img"]} src={lupa} alt="" />
+          <button className={styles["campo-busca__img"]}>
+            {button}
+            <img src={lupa} alt="" />
+          </button>
         </div>
       </Form>
     </Formik>
diff --git a/src/components/HeaderTop.tsx b/src/components/HeaderTop.tsx
index debd66b..7f0da6d 100644
--- a/src/components/HeaderTop.tsx
+++ b/src/components/HeaderTop.tsx
@@ -28,7 +28,7 @@ const HeaderTop = () => {
           alt="logo"
         />
       </a>
-      <CustomForm />
+      <CustomForm place="Buscar..." button="" />
       <div className={styles["header-wrapper__top-carrinho"]}>
         <a href="/">ENTRAR</a>
         <img src={cart} alt="" />
diff --git a/src/components/ListaFooter.tsx b/src/components/ListaFooter.tsx
index ec4925a..c1f08e1 100644
--- a/src/components/ListaFooter.tsx
+++ b/src/components/ListaFooter.tsx
@@ -1,5 +1,6 @@
-import React from "react";
+import React, { useState } from "react";
 import styles from "../styles/main.module.scss";
+import more from "../assets/svgs/more.svg";
 
 interface IlistProps {
   title: string;
@@ -10,16 +11,31 @@ interface IlistProps {
 }
 
 const ListaFooter = ({ title, text1, text2, text3, text4 }: IlistProps) => {
+  const [isOpened, setIsOpened] = useState(false);
   return (
-    <ul className={styles["list-wrapper"]}>
-      <li className={styles["list-wrapper__title"]}>{title}</li>
-      <li className={styles["list-wrapper__text"]}>{text1}</li>
-      <li className={styles["list-wrapper__text"]}>{text2}</li>
-      <li className={styles["list-wrapper__text"]}>{text3}</li>
-      <li className={styles["list-wrapper__text"]}>
-        <a href="/">{text4}</a>
-      </li>
-    </ul>
+    <div className={styles["footer-wrapper__top-items"]}>
+      <div className={styles["list-wrapper"]}>
+        <h2 className={styles["list-wrapper__title"]}>{title}</h2>
+        <ul
+          className={`${styles["list-wrapper__list"]} ${
+            styles[`${isOpened && "aberto"}`]
+          }`}
+        >
+          <li className={styles["list-wrapper__text"]}>{text1}</li>
+          <li className={styles["list-wrapper__text"]}>{text2}</li>
+          <li className={styles["list-wrapper__text"]}>{text3}</li>
+          <li className={styles["list-wrapper__text"]}>
+            <a href="/">{text4}</a>
+          </li>
+        </ul>
+      </div>
+      <button
+        className={styles["mostra-mais"]}
+        onClick={() => setIsOpened(!isOpened)}
+      >
+        <img src={more} alt="mais" />
+      </button>
+    </div>
   );
 };
 
diff --git a/src/styles/common/global.scss b/src/styles/common/global.scss
index 2c2d73b..7cce8a0 100644
--- a/src/styles/common/global.scss
+++ b/src/styles/common/global.scss
@@ -10,6 +10,10 @@ body {
   margin: 0;
 }
 
+img {
+  display: block;
+}
+
 button {
   cursor: pointer;
 }
diff --git a/src/styles/partials/Footer.module.scss b/src/styles/partials/Footer.module.scss
index e833fb9..9ab2793 100644
--- a/src/styles/partials/Footer.module.scss
+++ b/src/styles/partials/Footer.module.scss
@@ -6,34 +6,47 @@
     position: relative;
     border-top: 1px solid $black;
 
-    .list-wrapper {
-      list-style: none;
-      padding: 0;
-      margin: 0;
-      max-width: 154px;
+    &-items {
+      display: flex;
+      .list-wrapper {
+        &__list {
+          list-style: none;
+          padding: 0;
+          margin: 0;
+          max-width: 154px;
+        }
 
-      &:nth-child(3) {
-        li:nth-child(even) {
+        &:nth-child(3) {
+          li:nth-child(even) {
+            font-weight: 500;
+          }
+        }
+
+        &__title {
           font-weight: 500;
+          font-size: 14px;
+          line-height: 16px;
+          text-transform: uppercase;
+          margin-bottom: 12px;
+          margin-top: 0;
+        }
+
+        &__text {
+          font-size: 12px;
+          line-height: 14px;
+          margin-bottom: 12px;
+
+          a {
+            color: $black3;
+          }
         }
       }
 
-      &__title {
-        font-weight: 500;
-        font-size: 14px;
-        line-height: 16px;
-        text-transform: uppercase;
-        margin-bottom: 12px;
-      }
-
-      &__text {
-        font-size: 12px;
-        line-height: 14px;
-        margin-bottom: 12px;
-
-        a {
-          color: $black3;
-        }
+      .mostra-mais {
+        display: none;
+        border: none;
+        background: transparent;
+        height: 12px;
       }
     }
 
@@ -142,11 +155,87 @@
   }
 }
 
+@media screen and (max-width: 1024px) {
+  .footer-wrapper {
+    &__top {
+      flex-direction: column;
+      padding: 24px 16px;
+
+      .list-wrapper {
+        &__list {
+          opacity: 0;
+          pointer-events: none;
+          height: 0;
+          max-width: 155px;
+        }
+        .aberto {
+          opacity: 1;
+          pointer-events: all;
+          height: 105px;
+        }
+      }
+
+      &-items {
+        justify-content: space-between;
+        margin-bottom: 12px;
+        .mostra-mais {
+          display: block;
+        }
+      }
+
+      .social-wrapper {
+        .sociail-link {
+          display: none;
+        }
+      }
+    }
+
+    .volta-pag {
+      bottom: -96px;
+      z-index: 1;
+      top: auto;
+    }
+
+    &__bottom {
+      justify-content: flex-start;
+      align-items: flex-start;
+      flex-direction: column;
+      padding: 58px 0 16px 16px;
+      position: relative;
+
+      &-text {
+        margin-bottom: 15px;
+        max-width: 354px;
+      }
+
+      &-central {
+        position: absolute;
+        top: 15px;
+
+        .payments {
+          justify-content: space-between;
+          img {
+            width: 9.4%;
+          }
+        }
+
+        .certificado {
+          img {
+            width: 82%;
+          }
+        }
+      }
+    }
+  }
+}
+
 @media screen and (min-width: 2500px) {
   .footer-wrapper {
     &__top {
       .list-wrapper {
-        max-width: 309px;
+        &__list {
+          max-width: 309px;
+        }
 
         &__title {
           font-size: 28px;
diff --git a/src/styles/partials/Header.module.scss b/src/styles/partials/Header.module.scss
index 9e1b968..1ee8bd9 100644
--- a/src/styles/partials/Header.module.scss
+++ b/src/styles/partials/Header.module.scss
@@ -47,6 +47,8 @@
         top: 50%;
         transform: translateY(-50%);
         right: 16px;
+        border: none;
+        background: transparent;
       }
     }