From ae55f866e5dab4e1a112c14c9ba2f08d6273c430 Mon Sep 17 00:00:00 2001
From: Andrea Matsunaga <andreamizuno@gmail.com>
Date: Wed, 11 Jan 2023 17:26:44 -0300
Subject: [PATCH] feat(main): cria main mobile e componentiza breadcrumbs

---
 src/components/About/About.module.scss        | 26 ++++++++
 .../AsideMenu/AsideMenu.module.scss           | 12 +++-
 src/components/Contact/Contact.module.scss    |  9 +++
 .../ContactForm/ContactForm.module.scss       |  5 +-
 .../Breadcrumbs/Breadcrumbs.module.scss       | 51 +++++++++++++++
 .../MainLayout/Breadcrumbs/Breadcrumbs.tsx    | 22 +++++++
 .../Breadcrumbs/assets}/arrow-icon.svg        |  0
 .../Breadcrumbs/assets}/home-icon.svg         |  0
 .../MainLayout/MainLayout.module.scss         | 63 +++++--------------
 src/components/MainLayout/MainLayout.tsx      |  7 +--
 10 files changed, 138 insertions(+), 57 deletions(-)
 create mode 100644 src/components/MainLayout/Breadcrumbs/Breadcrumbs.module.scss
 create mode 100644 src/components/MainLayout/Breadcrumbs/Breadcrumbs.tsx
 rename src/{assets/svg => components/MainLayout/Breadcrumbs/assets}/arrow-icon.svg (100%)
 rename src/{assets/svg => components/MainLayout/Breadcrumbs/assets}/home-icon.svg (100%)

diff --git a/src/components/About/About.module.scss b/src/components/About/About.module.scss
index 72052d6..7b937e2 100644
--- a/src/components/About/About.module.scss
+++ b/src/components/About/About.module.scss
@@ -2,6 +2,11 @@
   margin-left: 30px;
   padding: 10px 0;
 
+  @media screen and (width <= 1024px) {
+    padding: 0;
+    margin: 0;
+  }
+
   .section-title {
     font-family: "Roboto";
     font-style: normal;
@@ -15,6 +20,10 @@
       font-size: 48px;
       line-height: 56px;
     }
+
+    @media screen and (width <= 1024px) {
+      text-align: center;
+    }
   }
 
   .section-description {
@@ -27,6 +36,16 @@
       height: 376px;
     }
 
+    @media screen and (width <= 1024px) {
+      height: 142px;
+      gap: 20px;
+      overflow: scroll;
+    }
+
+    @media screen and (width <= 480px) {
+      height: 344px;
+    }
+
     .section-content {
       font-family: "Roboto";
       font-style: normal;
@@ -41,6 +60,13 @@
         font-size: 26px;
         line-height: 30px;
       }
+
+      @media screen and (width <= 1024px) {
+        font-size: 12px;
+        line-height: 18px;
+        text-align: justify;
+        padding-right: 1px;
+      }
     }
   }
 }
diff --git a/src/components/AsideMenu/AsideMenu.module.scss b/src/components/AsideMenu/AsideMenu.module.scss
index a3da0b2..c3fa6b4 100644
--- a/src/components/AsideMenu/AsideMenu.module.scss
+++ b/src/components/AsideMenu/AsideMenu.module.scss
@@ -4,9 +4,18 @@
   list-style: none;
   text-decoration: none;
 
+  @media screen and (width <= 1024px) {
+    margin-bottom: 30px;
+  }
+
   li {
     padding: 10px 16px;
     transition: all 0.2s ease-in-out;
+    // background-color: yellow;
+
+    @media screen and (width <= 1024px) {
+      width: calc(100% - 32px);
+    }
 
     a {
       font-family: "Roboto";
@@ -33,7 +42,8 @@
     // }
 
     &:hover {
-      background: #292929;
+      // &.active
+      background: #292929; // #000000;
 
       a {
         font-weight: 700;
diff --git a/src/components/Contact/Contact.module.scss b/src/components/Contact/Contact.module.scss
index 0192546..ad2cb87 100644
--- a/src/components/Contact/Contact.module.scss
+++ b/src/components/Contact/Contact.module.scss
@@ -2,6 +2,11 @@
   margin-left: 30px;
   padding: 10px 0;
 
+  @media screen and (width <= 1024px) {
+    padding: 0;
+    margin: 0;
+  }
+
   .section-title {
     font-family: "Roboto";
     font-style: normal;
@@ -15,5 +20,9 @@
       font-size: 48px;
       line-height: 56px;
     }
+
+    @media screen and (width <= 1024px) {
+      text-align: center;
+    }
   }
 }
diff --git a/src/components/ContactForm/ContactForm.module.scss b/src/components/ContactForm/ContactForm.module.scss
index 5c81ecb..45a85c3 100644
--- a/src/components/ContactForm/ContactForm.module.scss
+++ b/src/components/ContactForm/ContactForm.module.scss
@@ -49,7 +49,7 @@
       font-weight: 400;
       font-size: 14px;
       line-height: 16px;
-      color: #000000;
+      color: #000000; //#b9b7b7? #100d0e?
       outline: 0;
 
       @media screen and (width >= 2500px) {
@@ -148,7 +148,8 @@
     letter-spacing: 0.05em;
     color: #ffffff;
     text-transform: uppercase;
-    border: none;
+    border: 0;
+    outline: 0;
     cursor: pointer;
     transition: all 0.2s ease-in-out;
 
diff --git a/src/components/MainLayout/Breadcrumbs/Breadcrumbs.module.scss b/src/components/MainLayout/Breadcrumbs/Breadcrumbs.module.scss
new file mode 100644
index 0000000..a8e5fac
--- /dev/null
+++ b/src/components/MainLayout/Breadcrumbs/Breadcrumbs.module.scss
@@ -0,0 +1,51 @@
+.breadcrumbs {
+  display: flex;
+  gap: 9.72px;
+  align-items: center;
+  margin-bottom: 80px;
+
+  @media screen and (width >= 2500px) {
+    gap: 12px;
+  }
+
+  .home-icon {
+    img {
+      width: 16px;
+      height: 16px;
+      display: block;
+
+      @media screen and (width >= 2500px) {
+        width: 31.22px;
+        height: 31.25px;
+      }
+    }
+  }
+
+  .arrow-icon {
+    img {
+      width: 4.56px;
+      height: 8px;
+      display: block;
+
+      @media screen and (width >= 2500px) {
+        width: 8.9px;
+        height: 15.62px;
+      }
+    }
+  }
+
+  .current-location {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    text-transform: uppercase;
+    color: #c4c4c4;
+    margin: 0;
+    // padding: 0;
+
+    @media screen and (width >= 2500px) {
+      font-size: 24px;
+    }
+  }
+}
diff --git a/src/components/MainLayout/Breadcrumbs/Breadcrumbs.tsx b/src/components/MainLayout/Breadcrumbs/Breadcrumbs.tsx
new file mode 100644
index 0000000..a0381e1
--- /dev/null
+++ b/src/components/MainLayout/Breadcrumbs/Breadcrumbs.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+
+import styles from "./Breadcrumbs.module.scss";
+
+import homeIcon from "./assets/home-icon.svg";
+import arrowIcon from "./assets/arrow-icon.svg";
+
+const Breadcrumbs = () => {
+  return (
+    <div className={styles["breadcrumbs"]}>
+      <div className={styles["home-icon"]}>
+        <img src={homeIcon} alt="Ícone da Home" />
+      </div>
+      <div className={styles["arrow-icon"]}>
+        <img src={arrowIcon} alt="Ícone de seta para a direita" />
+      </div>
+      <p className={styles["current-location"]}>Institucional</p>
+    </div>
+  );
+};
+
+export { Breadcrumbs };
diff --git a/src/assets/svg/arrow-icon.svg b/src/components/MainLayout/Breadcrumbs/assets/arrow-icon.svg
similarity index 100%
rename from src/assets/svg/arrow-icon.svg
rename to src/components/MainLayout/Breadcrumbs/assets/arrow-icon.svg
diff --git a/src/assets/svg/home-icon.svg b/src/components/MainLayout/Breadcrumbs/assets/home-icon.svg
similarity index 100%
rename from src/assets/svg/home-icon.svg
rename to src/components/MainLayout/Breadcrumbs/assets/home-icon.svg
diff --git a/src/components/MainLayout/MainLayout.module.scss b/src/components/MainLayout/MainLayout.module.scss
index fb3a871..cb2eb79 100644
--- a/src/components/MainLayout/MainLayout.module.scss
+++ b/src/components/MainLayout/MainLayout.module.scss
@@ -7,55 +7,8 @@
     margin-bottom: 84px;
   }
 
-  .breadcrumbs {
-    display: flex;
-    gap: 9.72px;
-    align-items: center;
-    margin-bottom: 80px;
-
-    @media screen and (width >= 2500px) {
-      gap: 12px;
-    }
-
-    .home-icon {
-      width: 16px;
-      height: 16px;
-      background: url("../../assets/svg/home-icon.svg");
-      background-repeat: no-repeat;
-      background-size: cover;
-
-      @media screen and (width >= 2500px) {
-        width: 31.22px;
-        height: 31.25px;
-      }
-    }
-
-    .arrow-icon {
-      width: 4.56px;
-      height: 8px;
-      background-image: url("../../assets/svg/arrow-icon.svg");
-      background-repeat: no-repeat;
-      background-size: cover;
-
-      @media screen and (width >= 2500px) {
-        width: 8.9px;
-        height: 15.62px;
-      }
-    }
-
-    .current-location {
-      font-family: "Roboto";
-      font-style: normal;
-      font-weight: 400;
-      font-size: 12px;
-      text-transform: uppercase;
-      color: #c4c4c4;
-      margin: 0;
-
-      @media screen and (width >= 2500px) {
-        font-size: 24px;
-      }
-    }
+  @media screen and (width <= 1024px) {
+    margin: 30px 16px 80px;
   }
 
   .main-title {
@@ -74,6 +27,10 @@
       font-size: 48px;
       line-height: 56px;
     }
+
+    @media screen and (width <= 1024px) {
+      margin-bottom: 40px;
+    }
   }
 
   .main-content {
@@ -84,6 +41,10 @@
       grid-template-columns: 590px 1px 1fr;
     }
 
+    @media screen and (width <= 1024px) {
+      grid-template-columns: 1fr;
+    }
+
     .vertical-divider {
       width: 1px;
       height: 285px;
@@ -92,6 +53,10 @@
       @media screen and (width >= 2500px) {
         height: 465px;
       }
+
+      @media screen and (width <= 1024px) {
+        display: none;
+      }
     }
   }
 }
diff --git a/src/components/MainLayout/MainLayout.tsx b/src/components/MainLayout/MainLayout.tsx
index 7c8f367..86f5f7b 100644
--- a/src/components/MainLayout/MainLayout.tsx
+++ b/src/components/MainLayout/MainLayout.tsx
@@ -3,6 +3,7 @@ import { Outlet } from "react-router-dom";
 import { AsideMenu } from "../AsideMenu/AsideMenu";
 import { Footer } from "../Footer/Footer";
 import { Header } from "../Header/Header";
+import { Breadcrumbs } from "./Breadcrumbs/Breadcrumbs";
 
 import styles from "./MainLayout.module.scss";
 
@@ -11,11 +12,7 @@ const MainLayout = () => {
     <>
       <Header />
       <main className={styles["main-container"]}>
-        <div className={styles["breadcrumbs"]}>
-          <div className={styles["home-icon"]}></div>
-          <div className={styles["arrow-icon"]}></div>
-          <p className={styles["current-location"]}>Institucional</p>
-        </div>
+        <Breadcrumbs />
         <h1 className={styles["main-title"]}>Institucional</h1>
         <div className={styles["main-content"]}>
           <AsideMenu />