From d4f6624c34e48929038bc59865a726145d987441 Mon Sep 17 00:00:00 2001
From: Eleonora Otz <nora_otz@hotmail.com>
Date: Wed, 25 Jan 2023 22:22:18 -0300
Subject: [PATCH] feat: Estiliza input de frete

---
 styles/css/vtex.store-components.css          | 28 +++++++++---
 .../pages/product/vtex.store-components.scss  | 44 +++++++++++++------
 2 files changed, 53 insertions(+), 19 deletions(-)

diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 6ab8699..8f86ec3 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -167,10 +167,16 @@
   display: flex;
   align-items: center;
 }
-.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__label) {
+.shippingContainer :global(.vtex-input-prefix__group) {
+  width: 280px;
+  height: 49px;
+  border-radius: 0;
+  border: 1px solid #cccccc;
+}
+.shippingContainer :global(.vtex-input__label) {
   font-size: 0;
 }
-.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__label)::after {
+.shippingContainer :global(.vtex-input__label)::after {
   content: "CALCULAR FRETE:";
   font-weight: 400;
   font-size: 14px;
@@ -180,12 +186,13 @@
 .shippingContainer :global(.vtex-button) {
   font-size: 0;
   position: relative;
-  top: -5px;
+  top: 25px;
   right: 148px;
-  width: 49px;
-  height: 49px;
-  margin-top: 27px;
+  width: 53px;
+  height: 53px;
+  margin-top: 0;
   background-color: #000000;
+  cursor: pointer;
 }
 .shippingContainer :global(.vtex-button)::after {
   content: "OK";
@@ -195,11 +202,20 @@
   color: white;
 }
 .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+  padding: 0;
   position: relative;
   left: 32px;
+  top: 10px;
 }
 .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
   color: #000000;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  text-decoration: underline;
+}
+.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child :global(.vtex__icon-external-link) {
+  display: none;
 }
 
 :global(.vtex-button__label) {
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index db7382d..1c4fb87 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -184,29 +184,37 @@
   :global(.vtex-address-form__postalCode) {
     display: flex;
     align-items: center;
+  }
 
-    :global(.vtex-input__label) {
-      font-size: 0;
+  :global(.vtex-input-prefix__group) {
+    width: 280px;
+    height: 49px;
+    border-radius: 0;
+    border: 1px solid $gray-1000;
+  }
 
-      &::after {
-        content: "CALCULAR FRETE:";
-        font-weight: 400;
-        font-size: 14px;
-        line-height: 19px;
-        color: $gray-500;
-      }
+  :global(.vtex-input__label) {
+    font-size: 0;
+
+    &::after {
+      content: "CALCULAR FRETE:";
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 19px;
+      color: $gray-500;
     }
   }
 
   :global(.vtex-button) {
     font-size: 0;
     position: relative;
-    top: -5px;
+    top: 25px;
     right: 148px;
-    width: 49px;
-    height: 49px;
-    margin-top: 27px;
+    width: 53px;
+    height: 53px;
+    margin-top: 0;
     background-color: $black;
+    cursor: pointer;
 
     &::after {
       content: "OK";
@@ -218,11 +226,21 @@
   }
 
   :global(.vtex-address-form__postalCode-forgottenURL) {
+    padding: 0;
     position: relative;
     left: 32px;
+    top: 10px;
 
     :last-child {
       color: $black;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 16px;
+      text-decoration: underline;
+
+      :global(.vtex__icon-external-link) {
+        display: none;
+      }
     }
   }
 }