changes

components/core/UserNav/UserNav.tsx

@@ -16,8 +16,8 @@ const countItems = (count: number, items: any[]) =>
   items.reduce(countItem, count)
 
 const UserNav: FC<Props> = ({ className }) => {
-  const { openSidebar, closeSidebar, displaySidebar } = useUI()
   const { data } = useCart()
+  const { openSidebar, closeSidebar, displaySidebar } = useUI()
   const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
 
   return (

components/product/ProductCard/ProductCard.module.css

@@ -66,8 +66,26 @@
 }
 
 .productTitle {
-  @apply p-3 h-14 bg-primary text-base font-bold text-xl truncate leading-8 inline-flex;
+  /* @apply p-3 h-14 bg-primary text-base font-bold text-xl truncate leading-8 inline-flex; */
-  max-width: calc(100% - 50px);
+  /* max-width: calc(100% - 50px); */
+  line-height: 1.3;
+  padding: 2px 0;
+  border-left: 20px solid #c0c;
+  width: 400px;
+  margin: 20px auto;
+
+  & h2 {
+    background-color: #c0c;
+    padding: 4px 0;
+    color: #fff;
+    display: inline;
+    margin: 0;
+
+    & .strong {
+      position: relative;
+      left: -10px;
+    }
+  }
 
   @screen lg {
     @apply text-2xl;

components/product/ProductCard/ProductCard.tsx

@@ -48,7 +48,11 @@ const ProductCard: FC<Props> = ({ className, node: p, variant }) => {
         <div className="flex flex-row justify-between box-border w-full z-10 relative">
           <div className="flex flex-col flex-1 overflow-hidden">
             <div className="flex-1">
-              <span className={s.productTitle}>{p.name}</span>
+              <span className={s.productTitle}>
+                <h2>
+                  <strong>{p.name}</strong>
+                </h2>
+              </span>
             </div>
             <div className="flex-0">
               <div className={s.productPrice}>${p.prices.price.value}</div>