Styling and icon fixes for cart sidebar

components/cart/CartItem/CartItem.module.css

@@ -1,6 +1,6 @@
 .quantity {
   appearance: textfield;
-  @apply w-6 border-gray-300 border mx-3 rounded text-center text-sm;
+  @apply w-8 border-gray-300 border mx-3 rounded text-center text-sm;
 }
 
 .quantity::-webkit-outer-spin-button,

components/cart/CartItem/CartItem.tsx

@@ -1,4 +1,4 @@
-import { Trash } from '@components/icon'
+import { Trash, Plus, Minus } from '@components/icon'
 import { useCommerce } from '@lib/bigcommerce'
 import useUpdateItem from '@lib/bigcommerce/cart/use-update-item'
 import useRemoveItem from '@lib/bigcommerce/cart/use-remove-item'
@@ -57,27 +57,29 @@ const CartItem = ({
   }, [item.quantity])
 
   return (
-    <li className="flex flex-row space-x-6">
+    <li className="flex flex-row space-x-6 py-6">
       <div className="h-12 w-12 bg-violet"></div>
-      <div className="flex-1 flex flex-col">
+      <div className="flex-1 flex flex-col justify-between">
         <span>{item.name}</span>
-        <div className="py-2">
+        <div className="flex items-center">
           <button type="button" onClick={() => increaseQuantity(-1)}>
-            -
+            <Minus width={18} height={18} />
           </button>
           <input
             type="number"
+            max={99}
+            min={0}
             className={styles.quantity}
             value={quantity}
             onChange={handleQuantity}
             onBlur={handleBlur}
           />
           <button type="button" onClick={() => increaseQuantity(1)}>
-            +
+            <Plus width={18} height={18} />
           </button>
         </div>
       </div>
-      <div className="flex flex-col space-y-2">
+      <div className="flex flex-col justify-between space-y-2">
         <span>{price}</span>
         <button
           className="flex justify-end"

components/cart/CartSidebarView/CartSidebarView.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react'
 import { UserNav } from '@components/core'
 import { Button } from '@components/ui'
-import { Trash, Cross } from '@components/icon'
+import { ArrowLeft } from '@components/icon'
 import { useUI } from '@components/ui/context'
 import { useCart } from '@lib/bigcommerce/cart'
 import CartItem from '../CartItem'
@@ -17,7 +17,7 @@ const CartSidebarView: FC = () => {
 
   return (
     <>
-      <header className="px-4 py-6 sm:px-6 border-b border-gray-200">
+      <header className="px-4 pt-6 pb-4 sm:px-6">
         <div className="flex items-start justify-between space-x-3">
           <div className="h-7 flex items-center">
             <button
@@ -25,7 +25,7 @@ const CartSidebarView: FC = () => {
               aria-label="Close panel"
               className="text-gray-400 hover:text-gray-500 transition ease-in-out duration-150"
             >
-              <Cross className="h-6 w-6" />
+              <ArrowLeft className="h-6 w-6" />
             </button>
           </div>
           <div className="space-y-1">
@@ -49,8 +49,8 @@ const CartSidebarView: FC = () => {
         </div>
       ) : (
         <>
-          <div className="px-4 sm:px-6 py-4 flex-1">
+          <div className="px-4 sm:px-6 flex-1">
-            <ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">
+            <ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200 border-t border-gray-200">
               {items.map((item) => (
                 <CartItem
                   key={item.id}
@@ -61,7 +61,7 @@ const CartSidebarView: FC = () => {
             </ul>
           </div>
           <div className="flex-shrink-0 px-4 border-t border-gray-200 py-5 sm:px-6">
-            <Button href="/checkout" Component={Link}>
+            <Button href="/checkout" Component={Link} width="100%">
               Proceed to Checkout
             </Button>
           </div>

components/icon/ArrowLeft.tsx

@@ -0,0 +1,22 @@
+const ArrowLeft = ({ ...props }) => {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
+      <path
+        d="M19 12H5"
+        stroke="black"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M12 19L5 12L12 5"
+        stroke="black"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default ArrowLeft

components/icon/Minus.tsx

@@ -0,0 +1,15 @@
+const Minus = ({ ...props }) => {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
+      <path
+        d="M5 12H19"
+        stroke="black"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default Minus

components/icon/Plus.tsx

@@ -0,0 +1,22 @@
+const Plus = ({ ...props }) => {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
+      <path
+        d="M12 5V19"
+        stroke="black"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M5 12H19"
+        stroke="black"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default Plus

components/icon/index.ts

@@ -2,3 +2,6 @@ export { default as Bag } from './Bag'
 export { default as Heart } from './Heart'
 export { default as Trash } from './Trash'
 export { default as Cross } from './Cross'
+export { default as ArrowLeft } from './ArrowLeft'
+export { default as Plus } from './Plus'
+export { default as Minus } from './Minus'

components/ui/Button/Button.tsx

@@ -16,6 +16,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   active?: boolean
   type?: 'submit' | 'reset' | 'button'
   Component?: string | JSXElementConstructor<any>
+  width?: string | number
 }
 
 const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
@@ -27,6 +28,7 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
     active,
     onClick,
     disabled,
+    width,
     Component = 'button',
     ...rest
   } = props
@@ -59,6 +61,9 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
       ref={mergeRefs([ref, buttonRef])}
       {...rest}
       {...buttonProps}
+      style={{
+        width,
+      }}
       data-active={isPressed ? '' : undefined}
     >
       {children}

components/ui/Sidebar/Sidebar.tsx

@@ -72,8 +72,8 @@ const Sidebar: FC<Props> = ({ className, children, show = true, close }) => {
                   leaveFrom="translate-x-0"
                   leaveTo="translate-x-full"
                 >
-                  <div className="h-full w-screen max-w-2xl">
+                  <div className="h-full w-screen max-w-md">
-                    <div className="h-full flex flex-col space-y-6 bg-white shadow-xl overflow-y-auto">
+                    <div className="h-full flex flex-col bg-white shadow-xl overflow-y-auto">
                       {children}
                     </div>
                   </div>