From 14f8c73b082f588fe8715f1e5545d362c900b570 Mon Sep 17 00:00:00 2001
From: d11n <mail@dennisreimann.de>
Date: Thu, 28 Mar 2024 01:01:56 +0100
Subject: [PATCH] POS: Increase size of quantity buttons (#5877)

Closes #5873.
---
 .../Shared/PointOfSale/Public/Cart.cshtml     | 12 ++++-----
 .../Shared/PointOfSale/Public/VueLight.cshtml | 14 +++++-----
 BTCPayServer/wwwroot/pos/cart.css             |  8 ------
 BTCPayServer/wwwroot/pos/common.css           | 27 +++++++++++++++++++
 4 files changed, 40 insertions(+), 21 deletions(-)

diff --git a/BTCPayServer/Views/Shared/PointOfSale/Public/Cart.cshtml b/BTCPayServer/Views/Shared/PointOfSale/Public/Cart.cshtml
index 162f80fdc..35851e396 100644
--- a/BTCPayServer/Views/Shared/PointOfSale/Public/Cart.cshtml
+++ b/BTCPayServer/Views/Shared/PointOfSale/Public/Cart.cshtml
@@ -163,13 +163,13 @@
                                     <span class="badge text-bg-warning inventory" v-if="item.inventory">
                                         {{ item.inventory > 0 ? `${item.inventory} left` : "Sold out" }}
                                     </span>
-                                    <div class="d-flex align-items-center gap-2">
-                                        <button type="button" v-on:click="updateQuantity(item.id, -1)" class="btn btn-light p-1 rounded-pill d-flex align-items-center justify-content-center">
-                                            <vc:icon symbol="minus" />
+                                    <div class="d-flex align-items-center gap-2 quantities">
+                                        <button type="button" v-on:click="updateQuantity(item.id, -1)" class="btn btn-minus">
+                                            <span><vc:icon symbol="minus" /></span>
                                         </button>
-                                        <input class="form-control hide-number-spin w-50px" type="number" placeholder="Qty" min="1" step="1" :max="item.inventory" v-model.number="item.count">
-                                        <button type="button" v-on:click="updateQuantity(item.id, +1)" class="btn btn-light p-1 rounded-pill d-flex align-items-center justify-content-center">
-                                            <vc:icon symbol="plus" />
+                                        <input class="form-control hide-number-spin w-50px text-center" type="number" placeholder="Qty" min="1" step="1" :max="item.inventory" v-model.number="item.count">
+                                        <button type="button" v-on:click="updateQuantity(item.id, +1)" class="btn btn-plus">
+                                            <span><vc:icon symbol="plus" /></span>
                                         </button>
                                     </div>
                                 </div>
diff --git a/BTCPayServer/Views/Shared/PointOfSale/Public/VueLight.cshtml b/BTCPayServer/Views/Shared/PointOfSale/Public/VueLight.cshtml
index e04c00905..d3118c150 100644
--- a/BTCPayServer/Views/Shared/PointOfSale/Public/VueLight.cshtml
+++ b/BTCPayServer/Views/Shared/PointOfSale/Public/VueLight.cshtml
@@ -115,7 +115,7 @@
                         <div class="d-flex align-items-start w-100 gap-3">
                             @if (!string.IsNullOrWhiteSpace(item.Image))
                             {
-                                <div class="img">
+                                <div class="img d-none d-sm-block">
                                     <img src="@item.Image" alt="@item.Title" asp-append-version="true" />
                                 </div>
                             }
@@ -138,13 +138,13 @@
                                     }
                                 </div>
                             </div>
-                            <div class="d-flex align-items-center gap-2 ms-auto" v-if="inStock(@index)">
-                                <button type="button" v-on:click="updateQuantity(`@Safe.Raw(item.Id)`, -1, true)" class="btn btn-light p-1 rounded-pill d-flex align-items-center justify-content-center btn-minus" :disabled="getQuantity(`@Safe.Raw(item.Id)`) <= 0">
-                                    <vc:icon symbol="minus" />
+                            <div class="d-flex align-items-center gap-2 ms-auto quantities">
+                                <button type="button" v-on:click="updateQuantity(`@Safe.Raw(item.Id)`, -1, true)" class="btn btn-minus" :disabled="getQuantity(`@Safe.Raw(item.Id)`) <= 0">
+                                    <span><vc:icon symbol="minus" /></span>
                                 </button>
-                                <div class="quantity text-center fs-6" style="width:2rem">{{ getQuantity(`@Safe.Raw(item.Id)`) }}</div>
-                                <button type="button" v-on:click="updateQuantity(`@Safe.Raw(item.Id)`, +1, true)" class="btn btn-light p-1 rounded-pill d-flex align-items-center justify-content-center btn-plus">
-                                    <vc:icon symbol="plus" />
+                                <div class="quantity text-center fs-5" style="width:2rem">{{ getQuantity(`@Safe.Raw(item.Id)`) }}</div>
+                                <button type="button" v-on:click="updateQuantity(`@Safe.Raw(item.Id)`, +1, true)" class="btn btn-plus" :disabled="!inStock(@index)">
+                                    <span><vc:icon symbol="plus" /></span>
                                 </button>
                             </div>
                         </div>
diff --git a/BTCPayServer/wwwroot/pos/cart.css b/BTCPayServer/wwwroot/pos/cart.css
index a055f0f24..3fa2dcf05 100644
--- a/BTCPayServer/wwwroot/pos/cart.css
+++ b/BTCPayServer/wwwroot/pos/cart.css
@@ -100,14 +100,6 @@ header .cart-toggle-btn {
     background-color: var(--btcpay-bg-tile);
 }
 
-#cart .quantity .btn {
-    width: 2rem;
-    height: 2rem;
-}
-#cart .quantity .btn .icon{
-    --btn-icon-size: .75rem;
-}
-
 #CartBadge {
     position: absolute;
     top: 0;
diff --git a/BTCPayServer/wwwroot/pos/common.css b/BTCPayServer/wwwroot/pos/common.css
index 00928b315..157e0542c 100644
--- a/BTCPayServer/wwwroot/pos/common.css
+++ b/BTCPayServer/wwwroot/pos/common.css
@@ -96,3 +96,30 @@
     max-height: 210px;
     object-fit: scale-down;
 }
+.quantities .btn {
+    --btcpay-btn-disabled-opacity: .3;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    background: none;
+    border: transparent;
+    padding: 0;
+}
+.quantities .btn span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    background: var(--btcpay-light);
+}
+.quantities .btn:hover span {
+    background: var(--btcpay-light-bg-hover);
+}
+.quantities .icon {
+    width: 1rem;
+    height: 1rem;
+}