crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-22 20:26:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Styling and icon fixes for cart sidebar

Browse Source
This commit is contained in:
paco
2020-10-08 18:00:05 -06:00
parent ccf6074573
commit f9660b4bc2
9 changed files with 85 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
components/cart/CartSidebarView/CartSidebarView.tsx
View File

@@ -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>