From 65fa8478df88cfe75876e6c9f99b182a4a62c9fb Mon Sep 17 00:00:00 2001
From: Savio <savio.96@hotmail.com>
Date: Wed, 18 Jan 2023 23:19:03 -0300
Subject: [PATCH] feat(footer): Adicionado o footer inferior

---
 src/components/Address/address.module.scss    |  6 +++++
 .../DevelopedBy/developedBy.module.scss       |  8 +++---
 src/components/Payments/payments.module.scss  | 18 ++++++++++---
 .../Footer/BottomFooter/BottomFooter.tsx      | 25 ++++++++-----------
 src/styles/partials/bottom_footer.scss        | 12 +++++++++
 5 files changed, 47 insertions(+), 22 deletions(-)

diff --git a/src/components/Address/address.module.scss b/src/components/Address/address.module.scss
index a7c12d9..9b4ad43 100644
--- a/src/components/Address/address.module.scss
+++ b/src/components/Address/address.module.scss
@@ -1,4 +1,6 @@
 .endereco {
+  width: 234px;
+  height: 24px;
   font-family: "Roboto";
   font-style: normal;
   font-weight: 400;
@@ -7,7 +9,11 @@
   text-transform: capitalize;
   color: white;
   margin: 0 0 0 0;
+
   @media screen and (min-width: 2500px) {
+    width: 467px;
+    height: 47px;
     font-size: 20px;
+    line-height: 23px;
   }
 }
diff --git a/src/components/DevelopedBy/developedBy.module.scss b/src/components/DevelopedBy/developedBy.module.scss
index 401028d..929b98c 100644
--- a/src/components/DevelopedBy/developedBy.module.scss
+++ b/src/components/DevelopedBy/developedBy.module.scss
@@ -19,11 +19,11 @@
     }
   }
   img {
-    width: 44.92px;
-    height: 16px;
+    width: 28.66px;
+    height: 15.65px;
     @media screen and (min-width: 2500px) {
-      width: 84.22px;
-      height: 30px;
+      width: 34.15px;
+      height: 23.87px;
     }
   }
 }
diff --git a/src/components/Payments/payments.module.scss b/src/components/Payments/payments.module.scss
index a60349e..bffead2 100644
--- a/src/components/Payments/payments.module.scss
+++ b/src/components/Payments/payments.module.scss
@@ -2,14 +2,24 @@
   display: flex;
   flex-direction: row;
   gap: 12px;
+  padding: 0 0 0 0;
 }
 .paymentsItem {
+  img {
+    width: 35px;
+    height: 20.2px;
+    @media screen and (min-width: 2500px) {
+      width: 70px;
+      height: 40.25px;
+    }
+  }
 }
-img {
-  width: 35px;
-  height: 20.2px;
-}
+
 .paymentsPci {
   width: 54.61px;
   height: 34px;
+  @media screen and (min-width: 2500px) {
+    width: 106px;
+    height: 66px;
+  }
 }
diff --git a/src/sectors/Footer/BottomFooter/BottomFooter.tsx b/src/sectors/Footer/BottomFooter/BottomFooter.tsx
index 4742a5c..05b3e93 100644
--- a/src/sectors/Footer/BottomFooter/BottomFooter.tsx
+++ b/src/sectors/Footer/BottomFooter/BottomFooter.tsx
@@ -2,23 +2,20 @@ import { Address } from "../../../components/Address/Address";
 import { Payments } from "../../../components/Payments/Payments";
 import { VtexPci } from "../../../components/Payments/Payments";
 import { PoweredBy } from "../../../components/PoweredBy/PoweredBy";
-
+import { DevelopedBy } from "../../../components/DevelopedBy/DevelopedBy";
 const BottomFooter = () => {
   return (
     <div className="bottom_footer">
-      <ul className="bottom_footer_itens">
-        <li className="bottom_footer_item">
-          <Address></Address>
-        </li>
-        <li className="bottom_footer_item pagamentos">
-          <Payments></Payments>
-          <p>|</p>
-          <VtexPci></VtexPci>
-        </li>
-        <li className="bottom_footer_item">
-          <PoweredBy></PoweredBy>
-        </li>
-      </ul>
+      <Address></Address>
+      <div className="bottom_footer_item pagamentos">
+        <Payments></Payments>
+        <p>|</p>
+        <VtexPci></VtexPci>
+      </div>
+      <div className="bottom_footer_item creation">
+        <PoweredBy></PoweredBy>
+        <DevelopedBy></DevelopedBy>
+      </div>
     </div>
   );
 };
diff --git a/src/styles/partials/bottom_footer.scss b/src/styles/partials/bottom_footer.scss
index fc01374..f8a8858 100644
--- a/src/styles/partials/bottom_footer.scss
+++ b/src/styles/partials/bottom_footer.scss
@@ -1,12 +1,19 @@
 .bottom_footer {
+  width: 100%;
   display: flex;
   flex-direction: row;
   background: black;
+  margin: 0 auto;
+  padding: 20px 100px;
+  justify-content: space-between;
 }
 .bottom_footer_itens {
   display: flex;
   flex-direction: row;
+
+  align-items: center;
 }
+
 .pagamentos {
   display: flex;
   flex-direction: row;
@@ -16,3 +23,8 @@
   }
   gap: 5px;
 }
+.creation {
+  display: flex;
+  flex-direction: row;
+  gap: 13px;
+}