cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

Header style improvements

Browse Source
This commit is contained in:
paco 2020-10-08 14:46:33 -06:00
parent 450921bd55
commit d8ff9bc4ff
No known key found for this signature in database
GPG Key ID: CD243AF4E535B475
5 changed files with 14 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/core/Featurebar/Featurebar.module.css
View File

@ -1,5 +1,5 @@
.separator {
@apply mx-3 bg-white;
@apply mx-3 bg-gray-400;
width: 1px;
height: 20px;
}

2
components/core/Navbar/Navbar.module.css
View File

@ -1,3 +1,3 @@
.link {
@apply group text-gray-500 inline-flex items-center text-base leading-6 font-medium hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 cursor-pointer;
@apply group text-gray-500 inline-flex items-center text-base leading-6 font-medium hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-100 cursor-pointer;
}

6
components/core/UserNav/UserNav.module.css
View File

@ -6,7 +6,11 @@
}
.item {
@apply mr-6 cursor-pointer relative;
@apply mr-6 cursor-pointer relative transition ease-in-out duration-100;
&:hover {
@apply text-gray-500;
}
&:last-child {
@apply mr-0;

9
components/core/UserNav/UserNav.tsx
View File

@ -16,17 +16,20 @@ const countItems = (count: number, items: any[]) =>
items.reduce(countItem, count)
const UserNav: FC<Props> = ({ className }) => {
const { openSidebar } = useUI()
const { openSidebar, closeSidebar, displaySidebar } = useUI()
const { data } = useCart()
const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
return (
<nav className={cn(s.root, className)}>
<ul className={s.list}>
<li className={s.item} onClick={() => openSidebar()}>
<li
className={s.item}
onClick={() => (displaySidebar ? closeSidebar() : openSidebar())}
>
<Bag />
{itemsCount > 0 && (
<span className="bg-black h-4 w-4 absolute rounded-full inset-3 text-white flex items-center justify-center font-bold text-xs">
<span className="bg-black h-4 w-4 absolute rounded-full right-3 top-3 text-white flex items-center justify-center font-bold text-xs">
{itemsCount}
</span>
)}

5
components/icon/Bag.tsx
View File

@ -5,26 +5,23 @@ const Bag = ({ ...props }) => {
height="22"
viewBox="0 0 20 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
stroke="currentColor"
{...props}
>
<path
d="M4 1L1 5V19C1 19.5304 1.21071 20.0391 1.58579 20.4142C1.96086 20.7893 2.46957 21 3 21H17C17.5304 21 18.0391 20.7893 18.4142 20.4142C18.7893 20.0391 19 19.5304 19 19V5L16 1H4Z"
stroke="black"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M1 5H19"
stroke="black"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M14 9C14 10.0609 13.5786 11.0783 12.8284 11.8284C12.0783 12.5786 11.0609 13 10 13C8.93913 13 7.92172 12.5786 7.17157 11.8284C6.42143 11.0783 6 10.0609 6 9"
stroke="black"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"