From abb2f118c00eff89b06bd8c10a9bfc9708e23905 Mon Sep 17 00:00:00 2001 From: Will Mendes Date: Mon, 18 Dec 2023 10:46:34 -0300 Subject: [PATCH] feat: minor style changes --- src/components/Basket/Basket.module.scss | 8 ++++++- src/components/CartItem/CartItem.module.scss | 6 ++--- .../ProductItem/ProductItem.module.scss | 5 +++- .../Quantifier/Quantifier.module.scss | 24 ++++++++++++------- 4 files changed, 29 insertions(+), 14 deletions(-) diff --git a/src/components/Basket/Basket.module.scss b/src/components/Basket/Basket.module.scss index efff259..c588a08 100644 --- a/src/components/Basket/Basket.module.scss +++ b/src/components/Basket/Basket.module.scss @@ -1,4 +1,6 @@ .basketWrapper { + height: 7em; + width: 7em; margin: 1rem; padding: 0 1rem; display: flex; @@ -8,9 +10,13 @@ align-items: center; flex-direction: row-reverse; justify-content: space-between; + border: 1px solid #f9ba49; + border-radius: 50%; + color: #000; &:hover { outline: 1px solid white; + background: #f9ba49; } .cart { @@ -23,7 +29,7 @@ .productsCount { z-index: 1; font-size: 2em; + font-weight: bold; top: 38px; - color: orange; } } diff --git a/src/components/CartItem/CartItem.module.scss b/src/components/CartItem/CartItem.module.scss index b935ae6..e7cce52 100644 --- a/src/components/CartItem/CartItem.module.scss +++ b/src/components/CartItem/CartItem.module.scss @@ -1,11 +1,11 @@ .cartItemWrapper { display: flex; - border-top: 1px dotted; - border-left: 1px dotted; - border-right: 1px dotted; + border: 1px dotted #333; + border-radius: 5px; padding: .3rem .5rem; align-items: center; min-height: 200px; + margin-bottom: 1em; h3 { color: #007185; diff --git a/src/components/ProductItem/ProductItem.module.scss b/src/components/ProductItem/ProductItem.module.scss index 74663dc..cb233b6 100644 --- a/src/components/ProductItem/ProductItem.module.scss +++ b/src/components/ProductItem/ProductItem.module.scss @@ -15,7 +15,8 @@ } button { - background-color: #fbd815; + background-color: #f9ba49; + font-weight: bold; width: 13rem; padding: .5rem; font-size: 1.1em; @@ -32,6 +33,8 @@ &:disabled { opacity: .5; background-color: lightgray; + color: #007185; + cursor: not-allowed; } } } diff --git a/src/components/Quantifier/Quantifier.module.scss b/src/components/Quantifier/Quantifier.module.scss index 5f0aad2..20dd2a8 100644 --- a/src/components/Quantifier/Quantifier.module.scss +++ b/src/components/Quantifier/Quantifier.module.scss @@ -18,18 +18,16 @@ resize: vertical; } - input[type="button"] { - -webkit-appearance: button; - cursor: pointer; - } - + // Removing spin cursors in `input[type="number"]` input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } input[type='button'] { - background-color: #eeeeee; + cursor: pointer; + background-color: #f9ba49; + color: #000; border: none; width: 30px; transition: all 300ms ease; @@ -40,13 +38,21 @@ position: relative; &:hover { - background-color: #D5D9D9; + background-color: #eecf1d; } } + .buttonPlus { + border-radius: 0 5px 5px 0; + } + + .buttonMinus { + border-radius: 5px 0 0 5px; + } + input[type="number"] { - -moz-appearance: textfield; - -webkit-appearance: none; width: 50px; + border-top: 1px solid #f9ba49; + border-bottom: 1px solid #f9ba49; } }