crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-18 15:36:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Search now with Geist Colors

Browse Source
This commit is contained in:
Bel Curcio 2021-06-07 00:59:52 -03:00
parent f46891991e
commit 677bba308d
5 changed files with 16 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/cart/CartItem/CartItem.module.css
View File

@ -23,6 +23,7 @@
height: 100%; height: 100%;
left: 30% !important; left: 30% !important;
top: 30% !important; top: 30% !important;
z-index: 1;
} }
.productName { .productName {

2
components/cart/CartItem/CartItem.tsx
View File

@ -80,7 +80,7 @@ const CartItem = ({
{...rest} {...rest}
> >
<div className="flex flex-row space-x-4 py-4"> <div className="flex flex-row space-x-4 py-4">
<div className="w-16 h-16 bg-violet relative overflow-hidden cursor-pointer"> <div className="w-16 h-16 bg-violet relative overflow-hidden cursor-pointer z-0">
<Link href={`/product/${item.path}`}> <Link href={`/product/${item.path}`}>
<Image <Image
onClick={() => closeSidebarIfPresent()} onClick={() => closeSidebarIfPresent()}

4
components/common/SidebarLayout/SidebarLayout.module.css
View File

@ -1,11 +1,11 @@
.root { .root {
@apply relative h-full flex flex-col min-h-full w-full; @apply relative h-full flex flex-col min-h-full w-full overflow-y-auto;
} }
.header { .header {
@apply sticky top-0 pl-4 py-4 pr-6 @apply sticky top-0 pl-4 py-4 pr-6
flex items-center justify-between flex items-center justify-between
bg-accent-0 box-border w-full; bg-accent-0 box-border w-full z-10;
min-height: 66px; min-height: 66px;
} }

1
components/ui/Sidebar/Sidebar.module.css
View File

@ -4,7 +4,6 @@
.sidebar { .sidebar {
@apply h-full flex flex-col text-base bg-accent-0 shadow-xl overflow-y-auto; @apply h-full flex flex-col text-base bg-accent-0 shadow-xl overflow-y-auto;
right: 0;
} }
.backdrop { .backdrop {

24
pages/search.tsx
View File

@ -96,7 +96,7 @@ export default function Search({
<button <button
type="button" type="button"
onClick={(e) => handleClick(e, 'categories')} onClick={(e) => handleClick(e, 'categories')}
className="flex justify-between w-full rounded-sm border border-gray-300 px-4 py-3 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-normal active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150" className="flex justify-between w-full rounded-sm border border-accent-3 px-4 py-3 bg-accent-0 text-sm leading-5 font-medium text-accent-4 hover:text-accent-5 focus:outline-none focus:border-blue-300 focus:shadow-outline-normal active:bg-accent-1 active:text-accent-8 transition ease-in-out duration-150"
id="options-menu" id="options-menu"
aria-haspopup="true" aria-haspopup="true"
aria-expanded="true" aria-expanded="true"
@ -126,7 +126,7 @@ export default function Search({
: '' : ''
}`} }`}
> >
<div className="rounded-sm bg-white shadow-xs lg:bg-none lg:shadow-none"> <div className="rounded-sm bg-accent-0 shadow-xs lg:bg-none lg:shadow-none">
<div <div
role="menu" role="menu"
aria-orientation="vertical" aria-orientation="vertical"
@ -135,7 +135,7 @@ export default function Search({
<ul> <ul>
<li <li
className={cn( className={cn(
'block text-sm leading-5 text-gray-700 lg:text-base lg:no-underline lg:font-bold lg:tracking-wide hover:bg-gray-100 lg:hover:bg-transparent hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900', 'block text-sm leading-5 text-accent-4 lg:text-base lg:no-underline lg:font-bold lg:tracking-wide hover:bg-accent-1 lg:hover:bg-transparent hover:text-accent-8 focus:outline-none focus:bg-accent-1 focus:text-accent-8',
{ {
underline: !activeCategory?.name, underline: !activeCategory?.name,
} }
@ -158,7 +158,7 @@ export default function Search({
<li <li
key={cat.path} key={cat.path}
className={cn( className={cn(
'block text-sm leading-5 text-gray-700 hover:bg-gray-100 lg:hover:bg-transparent hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900', 'block text-sm leading-5 text-accent-4 hover:bg-accent-1 lg:hover:bg-transparent hover:text-accent-8 focus:outline-none focus:bg-accent-1 focus:text-accent-8',
{ {
underline: activeCategory?.id === cat.id, underline: activeCategory?.id === cat.id,
} }
@ -194,7 +194,7 @@ export default function Search({
<button <button
type="button" type="button"
onClick={(e) => handleClick(e, 'brands')} onClick={(e) => handleClick(e, 'brands')}
className="flex justify-between w-full rounded-sm border border-gray-300 px-4 py-3 bg-white text-sm leading-5 font-medium text-gray-900 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-normal active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150" className="flex justify-between w-full rounded-sm border border-accent-3 px-4 py-3 bg-accent-0 text-sm leading-5 font-medium text-accent-8 hover:text-accent-5 focus:outline-none focus:border-blue-300 focus:shadow-outline-normal active:bg-accent-1 active:text-accent-8 transition ease-in-out duration-150"
id="options-menu" id="options-menu"
aria-haspopup="true" aria-haspopup="true"
aria-expanded="true" aria-expanded="true"
@ -224,7 +224,7 @@ export default function Search({
: '' : ''
}`} }`}
> >
<div className="rounded-sm bg-white shadow-xs lg:bg-none lg:shadow-none"> <div className="rounded-sm bg-accent-0 shadow-xs lg:bg-none lg:shadow-none">
<div <div
role="menu" role="menu"
aria-orientation="vertical" aria-orientation="vertical"
@ -233,7 +233,7 @@ export default function Search({
<ul> <ul>
<li <li
className={cn( className={cn(
'block text-sm leading-5 text-gray-700 lg:text-base lg:no-underline lg:font-bold lg:tracking-wide hover:bg-gray-100 lg:hover:bg-transparent hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900', 'block text-sm leading-5 text-accent-4 lg:text-base lg:no-underline lg:font-bold lg:tracking-wide hover:bg-accent-1 lg:hover:bg-transparent hover:text-accent-8 focus:outline-none focus:bg-accent-1 focus:text-accent-8',
{ {
underline: !activeBrand?.name, underline: !activeBrand?.name,
} }
@ -259,7 +259,7 @@ export default function Search({
<li <li
key={node.path} key={node.path}
className={cn( className={cn(
'block text-sm leading-5 text-gray-700 hover:bg-gray-100 lg:hover:bg-transparent hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900', 'block text-sm leading-5 text-accent-4 hover:bg-accent-1 lg:hover:bg-transparent hover:text-accent-8 focus:outline-none focus:bg-accent-1 focus:text-accent-8',
{ {
// @ts-ignore Shopify - Fix this types // @ts-ignore Shopify - Fix this types
underline: activeBrand?.entityId === node.entityId, underline: activeBrand?.entityId === node.entityId,
@ -367,7 +367,7 @@ export default function Search({
<button <button
type="button" type="button"
onClick={(e) => handleClick(e, 'sort')} onClick={(e) => handleClick(e, 'sort')}
className="flex justify-between w-full rounded-sm border border-gray-300 px-4 py-3 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-normal active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150" className="flex justify-between w-full rounded-sm border border-accent-3 px-4 py-3 bg-accent-0 text-sm leading-5 font-medium text-accent-4 hover:text-accent-5 focus:outline-none focus:border-blue-300 focus:shadow-outline-normal active:bg-accent-1 active:text-accent-8 transition ease-in-out duration-150"
id="options-menu" id="options-menu"
aria-haspopup="true" aria-haspopup="true"
aria-expanded="true" aria-expanded="true"
@ -393,7 +393,7 @@ export default function Search({
activeFilter !== 'sort' || toggleFilter !== true ? 'hidden' : '' activeFilter !== 'sort' || toggleFilter !== true ? 'hidden' : ''
}`} }`}
> >
<div className="rounded-sm bg-white shadow-xs lg:bg-none lg:shadow-none"> <div className="rounded-sm bg-accent-0 shadow-xs lg:bg-none lg:shadow-none">
<div <div
role="menu" role="menu"
aria-orientation="vertical" aria-orientation="vertical"
@ -402,7 +402,7 @@ export default function Search({
<ul> <ul>
<li <li
className={cn( className={cn(
'block text-sm leading-5 text-gray-700 lg:text-base lg:no-underline lg:font-bold lg:tracking-wide hover:bg-gray-100 lg:hover:bg-transparent hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900', 'block text-sm leading-5 text-accent-4 lg:text-base lg:no-underline lg:font-bold lg:tracking-wide hover:bg-accent-1 lg:hover:bg-transparent hover:text-accent-8 focus:outline-none focus:bg-accent-1 focus:text-accent-8',
{ {
underline: !sort, underline: !sort,
} }
@ -423,7 +423,7 @@ export default function Search({
<li <li
key={key} key={key}
className={cn( className={cn(
'block text-sm leading-5 text-gray-700 hover:bg-gray-100 lg:hover:bg-transparent hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900', 'block text-sm leading-5 text-accent-4 hover:bg-accent-1 lg:hover:bg-transparent hover:text-accent-8 focus:outline-none focus:bg-accent-1 focus:text-accent-8',
{ {
underline: sort === key, underline: sort === key,
} }