From f9660b4bc23d2ba8cc24d6807b9e7058f2e399b4 Mon Sep 17 00:00:00 2001
From: paco <34928425+pacocoursey@users.noreply.github.com>
Date: Thu, 8 Oct 2020 18:00:05 -0600
Subject: [PATCH] Styling and icon fixes for cart sidebar

---
 components/cart/CartItem/CartItem.module.css  |  2 +-
 components/cart/CartItem/CartItem.tsx         | 16 ++++++++------
 .../cart/CartSidebarView/CartSidebarView.tsx  | 12 +++++-----
 components/icon/ArrowLeft.tsx                 | 22 +++++++++++++++++++
 components/icon/Minus.tsx                     | 15 +++++++++++++
 components/icon/Plus.tsx                      | 22 +++++++++++++++++++
 components/icon/index.ts                      |  3 +++
 components/ui/Button/Button.tsx               |  5 +++++
 components/ui/Sidebar/Sidebar.tsx             |  4 ++--
 9 files changed, 85 insertions(+), 16 deletions(-)
 create mode 100644 components/icon/ArrowLeft.tsx
 create mode 100644 components/icon/Minus.tsx
 create mode 100644 components/icon/Plus.tsx

diff --git a/components/cart/CartItem/CartItem.module.css b/components/cart/CartItem/CartItem.module.css
index b6a8858b1..17715c7dc 100644
--- a/components/cart/CartItem/CartItem.module.css
+++ b/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,
diff --git a/components/cart/CartItem/CartItem.tsx b/components/cart/CartItem/CartItem.tsx
index 4b4d0f01d..94fbff5c9 100644
--- a/components/cart/CartItem/CartItem.tsx
+++ b/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"
diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx
index 5d55e17da..a5d014d56 100644
--- a/components/cart/CartSidebarView/CartSidebarView.tsx
+++ b/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">
-            <ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">
+          <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 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>
diff --git a/components/icon/ArrowLeft.tsx b/components/icon/ArrowLeft.tsx
new file mode 100644
index 000000000..e85b956e6
--- /dev/null
+++ b/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
diff --git a/components/icon/Minus.tsx b/components/icon/Minus.tsx
new file mode 100644
index 000000000..48614cf2d
--- /dev/null
+++ b/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
diff --git a/components/icon/Plus.tsx b/components/icon/Plus.tsx
new file mode 100644
index 000000000..bb0da6b1f
--- /dev/null
+++ b/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
diff --git a/components/icon/index.ts b/components/icon/index.ts
index 2afd43898..047be8be7 100644
--- a/components/icon/index.ts
+++ b/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'
diff --git a/components/ui/Button/Button.tsx b/components/ui/Button/Button.tsx
index 55c9a157d..fbcaf0dac 100644
--- a/components/ui/Button/Button.tsx
+++ b/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}
diff --git a/components/ui/Sidebar/Sidebar.tsx b/components/ui/Sidebar/Sidebar.tsx
index cc14baf5b..c292eebc6 100644
--- a/components/ui/Sidebar/Sidebar.tsx
+++ b/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 flex flex-col space-y-6 bg-white shadow-xl overflow-y-auto">
+                  <div className="h-full w-screen max-w-md">
+                    <div className="h-full flex flex-col bg-white shadow-xl overflow-y-auto">
                       {children}
                     </div>
                   </div>