feat: enhance icon button and quantity selector styles for improved UI and functionality

src/app/shared/components/icon-button/icon-button.component.scss

@@ -12,14 +12,18 @@
   padding: 4px;
   margin: 0;
   color: #666666;
-  font-size: 20px;
   cursor: pointer;
   outline: none;
   transition: color 0.15s ease-in-out, transform 0.1s ease-in-out;
   border-radius: 4px;
 
   i {
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 13px;
+    height: 13px;
+    font-size: 13px;
     line-height: 1;
   }
 
@@ -62,3 +66,11 @@
 :host(.hover-preview) .icon-btn--trash:not(:disabled) {
   color: var(--tenant-danger);
 }
+
+.icon-btn--user {
+  i {
+    width: 23px;
+    height: 23px;
+    font-size: 23px;
+  }
+}

src/app/shared/components/quantity-selector/quantity-selector.component.html

@@ -1,7 +1,7 @@
-<div class="quantity-selector" [class.quantity-selector--small]="size() === 'small'" aria-label="Selector de cantidad">
+<div class="quantity-selector d-inline-flex align-items-center overflow-hidden rounded" [class.quantity-selector--small]="size() === 'small'" aria-label="Selector de cantidad">
   <button
     type="button"
-    class="quantity-selector__button"
+    class="quantity-selector__button border-0 p-0 fw-bold lh-1"
     aria-label="Disminuir cantidad"
     [disabled]="quantity() <= min()"
     (click)="onDecrease()"
@@ -9,11 +9,11 @@
     -
   </button>
 
-  <span class="quantity-selector__value">{{ quantity() }}</span>
+  <span class="quantity-selector__value flex-grow-1 min-w-0 text-center fw-bold lh-1 user-select-none">{{ quantity() }}</span>
 
   <button
     type="button"
-    class="quantity-selector__button"
+    class="quantity-selector__button border-0 p-0 fw-bold lh-1"
     aria-label="Aumentar cantidad"
     [disabled]="quantity() >= max()"
     (click)="onIncrease()"

src/app/shared/components/quantity-selector/quantity-selector.component.scss

@@ -3,24 +3,19 @@
 }
 
 .quantity-selector {
-  display: inline-flex;
-  align-items: center;
   border: 1px solid #d8d8d8;
-  border-radius: 6px;
-  overflow: hidden;
-  min-height: 44px;
+  width: 78px;
+  height: 40px;
+  min-height: 40px;
   background: #f6f6f6;
+  box-sizing: border-box;
 
   &__button {
-    width: 25px;
-    height: 44px;
-    padding: 0;
+    width: 24px;
+    height: 100%;
     font-size: 20px;
-    font-weight: 700;
-    line-height: 1;
     color: #6f6f6f;
     background: #f6f6f6;
-    border: 0;
     transition: background-color 0.2s ease, color 0.2s ease;
     cursor: pointer;
 
@@ -30,30 +25,26 @@
     }
 
     &:disabled {
-      opacity: 0.4;
+      color: #A0A0A0;
+      opacity: 1;
       cursor: not-allowed;
     }
   }
 
   &__value {
-    min-width: 35px;
-    text-align: center;
     font-size: 16px;
-    font-weight: 700;
-    line-height: 1;
     color: #6f6f6f;
-    user-select: none;
   }
 
   &--small {
-    min-height: 18px;
-    border-radius: 0px;
+    width: 46px;
+    height: 21px;
+    min-height: 21px;
     border: 1px solid #cfcfcf;
     background: #ffffff;
 
     .quantity-selector__button {
-      width: 18px;
-      height: 18px;
+      width: 15px;
       font-size: 10px;
       background: #ffffff;
       color: #666666;
@@ -64,7 +55,6 @@
     }
 
     .quantity-selector__value {
-      min-width: 18px;
       font-size: 10px;
       color: #666666;
     }