Styling updates

components/common/Searchbar/Searchbar.module.css

@@ -4,10 +4,10 @@
 
 .input {
   @apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out pr-10;
+}
 
-  @screen sm {
+.input::placeholder {
-    min-width: 300px;
+  @apply text-accent-3;
-  }
 }
 
 .input:focus {
@@ -21,3 +21,9 @@
 .icon {
   @apply h-5 w-5;
 }
+
+@screen sm {
+  .input {
+    min-width: 300px;
+  }
+}

components/product/ProductCard/ProductCard.module.css

@@ -96,3 +96,7 @@
 .productImage {
   @apply transform transition-transform duration-500 object-cover scale-120;
 }
+
+.slim {
+  @apply bg-transparent relative overflow-hidden box-border;
+}

components/product/ProductCard/ProductCard.tsx

@@ -34,24 +34,22 @@ const ProductCard: FC<Props> = ({
     >
       {variant === 'slim' && (
         <>
-          <div className="relative overflow-hidden box-border ">
+          <div className="absolute inset-0 flex items-center justify-end mr-8 z-20">
-            <div className="absolute inset-0 flex items-center justify-end mr-8 z-20">
+            <span className="bg-accent-0 text-accent-9 inline-block p-3 font-bold text-xl break-words">
-              <span className="bg-black text-white inline-block p-3 font-bold text-xl break-words">
+              {product.name}
-                {product.name}
+            </span>
-              </span>
-            </div>
-            {product?.images && (
-              <Image
-                quality="85"
-                src={product.images[0].url || placeholderImg}
-                alt={product.name || 'Product Image'}
-                height={320}
-                width={320}
-                layout="fixed"
-                {...imgProps}
-              />
-            )}
           </div>
+          {product?.images && (
+            <Image
+              quality="85"
+              src={product.images[0].url || placeholderImg}
+              alt={product.name || 'Product Image'}
+              height={320}
+              width={320}
+              layout="fixed"
+              {...imgProps}
+            />
+          )}
         </>
       )}
 

components/ui/Collapse/Collapse.module.css

@@ -1,5 +1,5 @@
 .root {
-  @apply border-b border-accent-2 py-4 flex flex-col;
+  @apply border-b border-accent-2 py-4 flex flex-col outline-none;
 }
 
 .header {

components/ui/Grid/Grid.module.css

@@ -1,6 +1,6 @@
 .root {
-  --row-height: calc(100vh - 88px);
   @apply grid grid-cols-1 gap-0;
+  --row-height: calc(100vh - 88px);
   min-height: var(--row-height);
 
   @screen lg {
@@ -27,9 +27,17 @@
 
 .layoutNormal {
   @apply gap-3;
+}
 
-  & > * {
+@screen md {
-    min-height: 325px;
+  .layoutNormal > * {
+    max-height: min-content !important;
+  }
+}
+
+@screen lg {
+  .layoutNormal > * {
+    max-height: 400px;
   }
 }
 

components/ui/Hero/Hero.module.css

@@ -1,6 +1,18 @@
 .root {
-  @apply mx-auto grid grid-cols-1 py-32 gap-4;
+  @apply flex flex-col py-32 mx-auto;
-  @screen md {
+}
-    @apply grid-cols-2;
+
+.headline {
+  @apply text-accent-0 font-extrabold text-5xl leading-none tracking-tight;
+}
+
+@screen md {
+  .root {
+    @apply flex-row items-center justify-center;
+  }
+
+  .headline {
+    @apply text-6xl max-w-xl text-right leading-10 -mt-3;
+    line-height: 4rem;
   }
 }

components/ui/Hero/Hero.tsx

@@ -11,18 +11,16 @@ interface HeroProps {
 
 const Hero: FC<HeroProps> = ({ headline, description }) => {
   return (
-    <div className="bg-black">
+    <div className="bg-accent-9 border-b border-t border-accent-2">
       <Container>
         <div className={s.root}>
-          <h2 className="text-4xl leading-10 font-extrabold text-white sm:text-5xl sm:leading-none sm:tracking-tight lg:text-6xl">
+          <h2 className={s.headline}>{headline}</h2>
-            {headline}
+          <div className="md:ml-6">
-          </h2>
+            <p className="mt-4 text-xl leading-8 text-accent-2 mb-1 lg:max-w-4xl">
-          <div className="flex flex-col justify-between">
-            <p className="mt-5 text-xl leading-7 text-accent-2 text-white">
               {description}
             </p>
-            <Link href="/blog">
+            <Link href="/">
-              <a className="text-white pt-3 font-bold hover:underline flex flex-row cursor-pointer w-max-content">
+              <a className="text-accent-0 pt-3 font-bold hover:underline flex flex-row cursor-pointer w-max-content">
                 Read it here
                 <RightArrow width="20" heigh="20" className="ml-1" />
               </a>

components/ui/Marquee/Marquee.module.css

@@ -1,6 +1,6 @@
 .root {
   @apply w-full relative;
-  height: 320px;
+  height: 360px;
   min-width: 100%;
 }
 
@@ -10,13 +10,13 @@
 
 .container > * {
   @apply relative flex-1 px-16 py-4 h-full;
-  min-height: 320px;
+  min-height: 360px;
 }
 
 .primary {
-  @apply bg-white;
+  @apply bg-accent-0;
 }
 
 .secondary {
-  @apply bg-black;
+  @apply bg-accent-9;
 }

components/ui/Quantity/Quantity.module.css

@@ -16,6 +16,10 @@
   @apply outline-none;
 }
 
+.actions:disabled {
+  @apply cursor-not-allowed;
+}
+
 .input {
   @apply bg-transparent px-4 w-full h-full focus:outline-none;
   user-select: none;

components/ui/Skeleton/Skeleton.module.css

@@ -2,9 +2,9 @@
   @apply block;
   background-image: linear-gradient(
     270deg,
-    var(--accent-1),
+    var(--accent-0),
-    var(--accent-2),
     var(--accent-2),
+    var(--accent-0),
     var(--accent-1)
   );
   background-size: 400% 100%;
@@ -28,9 +28,9 @@
     z-index: 100;
     background-image: linear-gradient(
       270deg,
-      var(--accent-1),
+      var(--accent-0),
-      var(--accent-2),
       var(--accent-2),
+      var(--accent-0),
       var(--accent-1)
     );
     background-size: 400% 100%;

components/ui/Skeleton/Skeleton.tsx

@@ -4,13 +4,13 @@ import px from '@lib/to-pixels'
 import s from './Skeleton.module.css'
 
 interface SkeletonProps {
-  width?: string | number
-  height?: string | number
-  boxHeight?: string | number
-  style?: CSSProperties
   show?: boolean
   block?: boolean
   className?: string
+  style?: CSSProperties
+  width?: string | number
+  height?: string | number
+  boxHeight?: string | number
 }
 
 const Skeleton: React.FC<SkeletonProps> = ({

framework/commerce/types/product.ts

@@ -5,7 +5,7 @@ export type ProductImage = {
 
 export type ProductPrice = {
   value: number
-  currencyCode?: 'USD' | 'ARS' | string
+  currencyCode?: 'USD' | 'EUR' | 'ARS' | string
   retailPrice?: number
   salePrice?: number
   listPrice?: number

package.json

@@ -19,65 +19,62 @@
     "node": "14.x"
   },
   "dependencies": {
-    "@reach/portal": "^0.11.2",
+    "@reach/portal": "^0.15.0",
     "@react-spring/web": "^9.2.1",
     "@vercel/fetch": "^6.1.0",
-    "autoprefixer": "^10.2.4",
+    "autoprefixer": "^10.2.6",
     "body-scroll-lock": "^3.1.5",
     "bowser": "^2.11.0",
-    "classnames": "^2.2.6",
+    "classnames": "^2.3.1",
     "cookie": "^0.4.1",
     "dot-object": "^2.1.4",
     "email-validator": "^2.0.4",
     "immutability-helper": "^3.1.1",
     "js-cookie": "^2.2.1",
-    "keen-slider": "^5.2.4",
+    "keen-slider": "^5.4.1",
     "lodash.debounce": "^4.0.8",
     "lodash.random": "^3.2.0",
     "lodash.throttle": "^4.1.1",
-    "next": "^10.0.9-canary.5",
+    "next": "10.0.9-canary.5",
-    "next-seo": "^4.11.0",
+    "next-seo": "^4.24.0",
-    "next-themes": "^0.0.4",
+    "next-themes": "^0.0.14",
-    "postcss": "^8.2.8",
+    "postcss": "^8.3.0",
-    "postcss-nesting": "^7.0.1",
+    "postcss-nesting": "^8.0.1",
-    "react": "^17.0.1",
+    "react": "^17.0.2",
-    "react-dom": "^17.0.1",
+    "react-dom": "^17.0.2",
     "react-merge-refs": "^1.1.0",
     "react-ticker": "^1.2.2",
     "react-use-measure": "^2.0.4",
     "shopify-buy": "^2.11.0",
     "swell-js": "^4.0.0-next.0",
-    "swr": "^0.4.0",
+    "swr": "^0.5.6",
-    "tabbable": "^5.1.5",
+    "tabbable": "^5.2.0",
-    "tailwindcss": "^2.0.4"
+    "tailwindcss": "^2.1.2"
   },
   "devDependencies": {
-    "@graphql-codegen/cli": "^1.20.0",
+    "@graphql-codegen/cli": "^1.21.5",
-    "@graphql-codegen/schema-ast": "^1.18.1",
+    "@graphql-codegen/schema-ast": "^1.18.3",
-    "@graphql-codegen/typescript": "^1.19.0",
+    "@graphql-codegen/typescript": "^1.22.1",
-    "@graphql-codegen/typescript-operations": "^1.17.13",
+    "@graphql-codegen/typescript-operations": "^1.18.0",
-    "@manifoldco/swagger-to-ts": "^2.1.0",
+    "@next/bundle-analyzer": "^10.2.3",
-    "@next/bundle-analyzer": "^10.0.1",
-    "@tailwindcss/jit": "^0.1.3",
     "@types/body-scroll-lock": "^2.6.1",
-    "@types/classnames": "^2.2.10",
     "@types/cookie": "^0.4.0",
     "@types/js-cookie": "^2.2.6",
     "@types/lodash.debounce": "^4.0.6",
     "@types/lodash.random": "^3.2.6",
     "@types/lodash.throttle": "^4.1.6",
-    "@types/node": "^14.14.16",
+    "@types/node": "^15.6.1",
-    "@types/react": "^17.0.0",
+    "@types/react": "^17.0.8",
     "@types/shopify-buy": "^2.10.5",
     "deepmerge": "^4.2.2",
-    "graphql": "^15.4.0",
+    "graphql": "^15.5.0",
-    "husky": "^4.3.8",
+    "husky": "^6.0.0",
-    "lint-staged": "^10.5.3",
+    "lint-staged": "^11.0.0",
-    "next-unused": "^0.0.3",
+    "next-unused": "^0.0.6",
-    "postcss-flexbugs-fixes": "^4.2.1",
+    "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-preset-env": "^6.7.0",
-    "prettier": "^2.2.1",
+    "prettier": "^2.3.0",
-    "typescript": "^4.0.3"
+    "typescript": "4.2.4"
   },
   "husky": {
     "hooks": {

pages/product/[slug].tsx

@@ -17,11 +17,13 @@ export async function getStaticProps({
   const config = { locale, locales }
   const { pages } = await commerce.getAllPages({ config, preview })
   const { categories } = await commerce.getSiteInfo({ config, preview })
+
   const { product } = await commerce.getProduct({
     variables: { slug: params!.slug },
     config,
     preview,
   })
+  console.log(product?.variants[0])
 
   const { products: relatedProducts } = await commerce.getAllProducts({
     variables: { first: 4 },

pages/search.tsx

@@ -353,11 +353,7 @@ export default function Search({
           ) : (
             <Grid layout="normal">
               {rangeMap(12, (i) => (
-                <Skeleton
+                <Skeleton key={i} />
-                  key={i}
-                  className="w-full animated fadeIn"
-                  height={480}
-                />
               ))}
             </Grid>
           )}