diff --git a/Frontend/index.html b/Frontend/index.html index 2c20db3..a9cae5a 100644 --- a/Frontend/index.html +++ b/Frontend/index.html @@ -1,8 +1,8 @@ - + - + Green Cycle diff --git a/Frontend/public/assets/logo-GC.svg b/Frontend/public/assets/logo-GC.svg new file mode 100644 index 0000000..f5bb718 --- /dev/null +++ b/Frontend/public/assets/logo-GC.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/Frontend/public/assets/store_icon.svg b/Frontend/public/assets/store_icon.svg new file mode 100644 index 0000000..a6718c3 --- /dev/null +++ b/Frontend/public/assets/store_icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/Frontend/src/pages/Checkout.css b/Frontend/src/pages/Checkout.css index 4886921..d57f5ca 100644 --- a/Frontend/src/pages/Checkout.css +++ b/Frontend/src/pages/Checkout.css @@ -6,8 +6,9 @@ } .checkout__title { - padding: 1rem 0; + padding: 36px 0 16px; text-decoration: underline; + font-weight: 400; } .checkout__form { @@ -20,11 +21,17 @@ } .checkout__wrapper { width: 100%; - border: 1px solid gray; margin: auto; border-radius: 8px; - padding-block: 1.5rem; + padding-bottom: 36px; +} + +.checkout__save { + display: flex; + justify-content: center; + padding-top: 10px; + gap: 4px; } .checkout__fit { @@ -69,28 +76,31 @@ .checkout__image { width: 100px; height: 100px; - border-radius: 1rem; + border-radius: 5px; + border: 1px solid #454545; + margin-right: 1.5rem; } .checkout__items { display: flex; justify-content: space-around; flex-direction: column; - row-gap: 1rem; + row-gap: 2rem; + padding-top: 36px; } .checkout__item { display: flex; - justify-content: space-between; - column-gap: 0.5rem; - align-items: flex-start; + align-items: center; } .checkout__details { display: flex; flex-direction: column; justify-content: space-between; text-align: left; + margin-right: auto; } + .checkout__total { width: 70%; padding: 2rem 0; @@ -128,6 +138,7 @@ align-items: self-start; justify-content: space-around; column-gap: 3rem; + padding: 5rem 2rem; } .checkout__wrapper { width: 45%; @@ -146,9 +157,7 @@ width: 100%; } .checkout__save { - display: flex; justify-content: flex-end; - padding-right: 1rem; - padding-top: 8px; + padding-right: 2rem; } } diff --git a/Frontend/src/pages/Checkout.jsx b/Frontend/src/pages/Checkout.jsx index 4dd48fc..56c7c43 100644 --- a/Frontend/src/pages/Checkout.jsx +++ b/Frontend/src/pages/Checkout.jsx @@ -57,7 +57,7 @@ function Checkout() { {' '}
-

ENDEREÇO

+

ENDEREÇO DE ENTREGA

@@ -100,6 +102,8 @@ function Checkout() { placeholder='Complemento' value={formData.complemento} onChange={handleInputChange} + minLength={1} + maxLength={10} />
@@ -110,6 +114,8 @@ function Checkout() { placeholder='Cidade' value={formData.cidade} onChange={handleInputChange} + minLength={1} + maxLength={30} />
@@ -120,6 +126,8 @@ function Checkout() { placeholder='Bairro' value={formData.bairro} onChange={handleInputChange} + minLength={1} + maxLength={30} />
@@ -157,6 +165,8 @@ function Checkout() { placeholder='Validade (MM/AA)' value={formData.dataValidade} onChange={handleInputChange} + minLength={4} + maxLength={4} />
@@ -178,6 +188,8 @@ function Checkout() { placeholder='Nome no cartão' value={formData.nomeCartao} onChange={handleInputChange} + minLength={2} + maxLength={50} />
@@ -188,6 +200,8 @@ function Checkout() { placeholder='Cidade' value={formData.cidade} onChange={handleInputChange} + minLength={1} + maxLength={30} />
@@ -198,6 +212,8 @@ function Checkout() { placeholder='Bairro' value={formData.bairro} onChange={handleInputChange} + minLength={1} + maxLength={30} />
@@ -228,7 +244,7 @@ function Checkout() { {item.name} {item.quantity} un
- R${parseFloat(item.price).toFixed(2)} + R$ {parseFloat(item.price).toFixed(2)} ))} @@ -239,16 +255,16 @@ function Checkout() {

Subtotal:

{' '} - R${calculateSubtotal()} + R$ {calculateSubtotal()}
{' '}

Frete:

- R$20,00 + R$ 20,00
-

Total:

R${calculateTotal()} +

Total:

R$ {calculateTotal()}