feat: minor style changes

willmendesneto · Dec 18, 2023 · abb2f11 · abb2f11
1 parent 75b6513
commit abb2f11
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
   }
 }