Merge pull request #66 from thomasKn/thomas/fv-269-hit-boxes-should-b…

…e-44x44 Update quantity selector
frontvibe · Feb 12, 2024 · 5e5d256 · 5e5d256
2 parents ebfbbe4 + 7543b8f
commit 5e5d256
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 13 deletions.
diff --git a/app/components/QuantitySelector.tsx b/app/components/QuantitySelector.tsx
@@ -8,9 +8,7 @@ import type {ButtonProps} from './ui/Button';
 import {IconButton} from './ui/Button';
 export function QuantitySelector(props: {children: React.ReactNode}) {
   return (
-    <div className="flex items-center overflow-hidden rounded border border-border">
-      {props.children}
-    </div>
+    <div className="flex items-center border-border">{props.children}</div>
   );
 }
 
@@ -26,15 +24,21 @@ const QuantityButton = forwardRef<
         symbol === 'decrease' && 'Decrease quantity',
         symbol === 'increase' && 'Increase quantity',
       ])}
-      className={cn(['rounded-none disabled:text-muted-foreground', className])}
+      className={cn([
+        'group rounded border disabled:opacity-100',
+        symbol === 'decrease'
+          ? 'rounded-br-none rounded-tr-none border-r-0'
+          : 'rounded-bl-none rounded-tl-none border-l-0',
+        className,
+      ])}
       name={cx([
         symbol === 'decrease' && 'decrease-quantity',
         symbol === 'increase' && 'increase-quantity',
       ])}
       ref={ref}
       {...props}
     >
-      <span>
+      <span className="group-disabled:opacity-40">
         {
           {
             decrease: <>&#8722;</>,
@@ -50,7 +54,7 @@ QuantityButton.displayName = 'QuantityButton';
 
 function Value(props: {children: React.ReactNode}) {
   return (
-    <div className="min-w-[2.5rem] select-none px-2 text-center">
+    <div className="flex h-full min-w-[2.5rem] select-none items-center justify-center border-y px-2 text-center">
       {props.children}
     </div>
   );

diff --git a/app/components/cart/CartLineItem.tsx b/app/components/cart/CartLineItem.tsx
@@ -149,13 +149,12 @@ function ItemRemoveButton({lineId}: {lineId: CartLineFragment['id']}) {
       }}
       route={cartPath}
     >
-      <div className="overflow-hidden rounded border">
-        <IconButton className="rounded-none" type="submit">
-          {/* Todo => add theme content string */}
-          <span className="sr-only">Remove</span>
-          <IconRemove aria-hidden="true" />
-        </IconButton>
-      </div>
+      <IconButton className="overflow-hidden rounded border" type="submit">
+        {/* Todo => add theme content string */}
+        <span className="sr-only">Remove</span>
+        <IconRemove aria-hidden="true" />
+      </IconButton>
+
       <OptimisticInput data={{action: 'remove'}} id={lineId} />
     </CartForm>
   );