From 68cc1f145f83e33fbdb679869babf020415605cc Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 13 Oct 2020 14:15:20 -0300 Subject: [PATCH 1/5] Wishlist View --- components/core/UserNav/UserNav.tsx | 10 +++-- .../product/ProductView/ProductView.tsx | 2 +- components/product/Swatch/Swatch.module.css | 2 +- .../WishlistCard/WishlistCard.module.css | 21 ++++++++++ .../wishlist/WishlistCard/WishlistCard.tsx | 41 +++++++++++++++++++ components/wishlist/WishlistCard/index.ts | 1 + components/wishlist/index.ts | 1 + pages/wishlist.tsx | 16 ++++++-- 8 files changed, 84 insertions(+), 10 deletions(-) create mode 100644 components/wishlist/WishlistCard/WishlistCard.module.css create mode 100644 components/wishlist/WishlistCard/WishlistCard.tsx create mode 100644 components/wishlist/WishlistCard/index.ts create mode 100644 components/wishlist/index.ts diff --git a/components/core/UserNav/UserNav.tsx b/components/core/UserNav/UserNav.tsx index 7e7bcb4fc..d6af699e1 100644 --- a/components/core/UserNav/UserNav.tsx +++ b/components/core/UserNav/UserNav.tsx @@ -5,7 +5,7 @@ import { Avatar } from '@components/core' import { Heart, Bag } from '@components/icon' import { useUI } from '@components/ui/context' import s from './UserNav.module.css' - +import Link from 'next/link' interface Props { className?: string } @@ -34,9 +34,11 @@ const UserNav: FC = ({ className }) => { )} -
  • - -
    • + +
  • + +
    • +
    • diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx index 5f4b7a354..50e1c7e81 100644 --- a/components/product/ProductView/ProductView.tsx +++ b/components/product/ProductView/ProductView.tsx @@ -44,7 +44,7 @@ const ProductView: FC = ({ product, className }) => { return ( -
    +

    {product.name} diff --git a/components/product/Swatch/Swatch.module.css b/components/product/Swatch/Swatch.module.css index 7311788ef..4a8803446 100644 --- a/components/product/Swatch/Swatch.module.css +++ b/components/product/Swatch/Swatch.module.css @@ -1,7 +1,7 @@ .root { @apply h-12 w-12 bg-primary text-primary rounded-full mr-3 inline-flex items-center justify-center cursor-pointer transition duration-75 ease-in-out - p-0 shadow-none border-gray-200 border; + p-0 shadow-none border-gray-200 border box-border; } .active.size { diff --git a/components/wishlist/WishlistCard/WishlistCard.module.css b/components/wishlist/WishlistCard/WishlistCard.module.css new file mode 100644 index 000000000..cfdade97c --- /dev/null +++ b/components/wishlist/WishlistCard/WishlistCard.module.css @@ -0,0 +1,21 @@ +.root { + @apply grid grid-cols-12 w-full gap-6 px-3 py-6 border-b border-primary-accent; + + &:nth-child(3n + 1) { + & .productBg { + @apply bg-violet; + } + } + + &:nth-child(3n + 2) { + & .productBg { + @apply bg-pink; + } + } + + &:nth-child(3n + 3) { + & .productBg { + @apply bg-blue; + } + } +} diff --git a/components/wishlist/WishlistCard/WishlistCard.tsx b/components/wishlist/WishlistCard/WishlistCard.tsx new file mode 100644 index 000000000..ae9add365 --- /dev/null +++ b/components/wishlist/WishlistCard/WishlistCard.tsx @@ -0,0 +1,41 @@ +import { FC } from 'react' +import { Trash } from '@components/icon' +import s from './WishlistCard.module.css' + +interface Props { + className?: string + children?: any + data?: ProductData +} + +interface ProductData { + name: string + images: any + prices: any + path: string +} + +const WishlistCard: FC = ({ className, data }) => { + return ( +
    +
    +
    +

    Jacket

    +

    + Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake. +

    + +
    +
    +
    $ 50.00
    +
    + +
    +
    +
    + ) +} + +export default WishlistCard diff --git a/components/wishlist/WishlistCard/index.ts b/components/wishlist/WishlistCard/index.ts new file mode 100644 index 000000000..ef572805f --- /dev/null +++ b/components/wishlist/WishlistCard/index.ts @@ -0,0 +1 @@ +export { default } from './WishlistCard' diff --git a/components/wishlist/index.ts b/components/wishlist/index.ts new file mode 100644 index 000000000..470e6682c --- /dev/null +++ b/components/wishlist/index.ts @@ -0,0 +1 @@ +export { default as WishlistCard } from './WishlistCard' diff --git a/pages/wishlist.tsx b/pages/wishlist.tsx index b3b33246e..3084e5e47 100644 --- a/pages/wishlist.tsx +++ b/pages/wishlist.tsx @@ -2,6 +2,8 @@ import { GetStaticPropsContext, InferGetStaticPropsType } from 'next' import getAllProducts from '@lib/bigcommerce/api/operations/get-all-products' import { Layout } from '@components/core' import { Container } from '@components/ui' +import { WishlistCard } from '@components/wishlist' + import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info' export async function getStaticProps({ preview }: GetStaticPropsContext) { @@ -19,9 +21,6 @@ export default function Home({ }: InferGetStaticPropsType) { return ( -

    - My Wishlist -

      @@ -35,7 +34,16 @@ export default function Home({ ))}
    -
    Items.
    +
    +

    + My Wishlist +

    +
    + {[1, 2, 3, 4, 5, 6].map((i) => ( + + ))} +
    +
    • From 6978b4d4bbb2884ee6ed6aa47ce1803b65230a61 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 13 Oct 2020 14:34:24 -0300 Subject: [PATCH 2/5] Design Tweaks --- assets/global.css | 6 ++++-- components/cart/CartItem/CartItem.module.css | 2 +- components/cart/CartItem/CartItem.tsx | 6 +++--- components/cart/CartSidebarView/CartSidebarView.tsx | 2 +- components/icon/Minus.tsx | 2 +- components/icon/Plus.tsx | 4 ++-- components/product/Swatch/Swatch.module.css | 2 +- components/ui/Hero/Hero.tsx | 2 +- components/ui/Logo/Logo.tsx | 4 ++-- components/wishlist/WishlistCard/WishlistCard.module.css | 2 +- components/wishlist/WishlistCard/WishlistCard.tsx | 2 +- tailwind.config.js | 2 ++ 12 files changed, 20 insertions(+), 16 deletions(-) diff --git a/assets/global.css b/assets/global.css index 6f4a9297f..ea77c765c 100644 --- a/assets/global.css +++ b/assets/global.css @@ -2,8 +2,9 @@ :root { --bg-primary: white; + --bg-primary-hover: rgba(0, 0, 0, 0.075); + --bg-primary-accent: #ddd; --bg-secondary: black; - --bg-primary-accent: rgba(0, 0, 0, 0.075); --text-primary: black; --text-secondary: white; @@ -14,7 +15,8 @@ [data-theme='dark'] { --bg-primary: black; --bg-secondary: white; - --bg-primary-accent: rgba(255, 255, 255, 0.075); + --bg-primary-hover: rgba(255, 255, 255, 0.075); + --bg-primary-accent: #111; --text-primary: white; --text-secondary: black; diff --git a/components/cart/CartItem/CartItem.module.css b/components/cart/CartItem/CartItem.module.css index 17715c7dc..6165b05ed 100644 --- a/components/cart/CartItem/CartItem.module.css +++ b/components/cart/CartItem/CartItem.module.css @@ -1,6 +1,6 @@ .quantity { appearance: textfield; - @apply w-8 border-gray-300 border mx-3 rounded text-center text-sm; + @apply w-8 border-gray-300 border mx-3 rounded text-center text-sm text-black; } .quantity::-webkit-outer-spin-button, diff --git a/components/cart/CartItem/CartItem.tsx b/components/cart/CartItem/CartItem.tsx index 05a19c50b..77f3d719e 100644 --- a/components/cart/CartItem/CartItem.tsx +++ b/components/cart/CartItem/CartItem.tsx @@ -56,8 +56,8 @@ const CartItem = ({ return (
    • -
      - {item.name} +
      + {item.name}
      -
      +
      {price}
      diff --git a/tailwind.config.js b/tailwind.config.js index 8f193a039..6ad7d0975 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -17,6 +17,7 @@ module.exports = { 'accent-1': '#FAFAFA', 'accent-2': '#F1F3F5', 'accent-4': '#888', + 'accent-8': '#111111', violet: '#7928CA', pink: '#FF0080', cyan: '#50E3C2', @@ -26,6 +27,7 @@ module.exports = { primary: 'var(--bg-primary)', secondary: 'var(--bg-secondary)', 'primary-accent': 'var(--bg-primary-accent)', + 'primary-hover': 'var(--bg-primary-accent)', }, textColor: { base: 'var(--text-primary)', From 6010d3e2b75693dbb73309d64146d8f360f47d6b Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 13 Oct 2020 14:42:24 -0300 Subject: [PATCH 3/5] Most Changes --- assets/global.css | 2 +- components/core/Featurebar/Featurebar.module.css | 2 +- components/core/Featurebar/Featurebar.tsx | 2 +- components/core/Searchbar/Searchbar.module.css | 2 +- components/core/Searchbar/Searchbar.tsx | 2 +- components/ui/Button/Button.module.css | 5 +++-- 6 files changed, 8 insertions(+), 7 deletions(-) diff --git a/assets/global.css b/assets/global.css index ea77c765c..eccfd84e7 100644 --- a/assets/global.css +++ b/assets/global.css @@ -3,7 +3,7 @@ :root { --bg-primary: white; --bg-primary-hover: rgba(0, 0, 0, 0.075); - --bg-primary-accent: #ddd; + --bg-primary-accent: #f1f3f5; --bg-secondary: black; --text-primary: black; diff --git a/components/core/Featurebar/Featurebar.module.css b/components/core/Featurebar/Featurebar.module.css index 75ee278ba..f8aa6ba4d 100644 --- a/components/core/Featurebar/Featurebar.module.css +++ b/components/core/Featurebar/Featurebar.module.css @@ -1,5 +1,5 @@ .separator { - @apply mx-3 bg-gray-400; + @apply mx-3 bg-secondary; width: 1px; height: 20px; } diff --git a/components/core/Featurebar/Featurebar.tsx b/components/core/Featurebar/Featurebar.tsx index 035d0858c..1a2aae7be 100644 --- a/components/core/Featurebar/Featurebar.tsx +++ b/components/core/Featurebar/Featurebar.tsx @@ -10,7 +10,7 @@ interface Props { const Featurebar: FC = ({ title, description, className }) => { const rootClassName = cn( - 'hidden py-2 px-6 bg-gray-100 text-sm text-gray-600 md:flex flex-row justify-center items-center font-medium', + 'hidden py-2 px-6 bg-primary-accent text-primary text-sm text-gray-600 md:flex flex-row justify-center items-center font-medium border-b border-primary-accent', className ) return ( diff --git a/components/core/Searchbar/Searchbar.module.css b/components/core/Searchbar/Searchbar.module.css index 8a26653b5..413c97e42 100644 --- a/components/core/Searchbar/Searchbar.module.css +++ b/components/core/Searchbar/Searchbar.module.css @@ -1,5 +1,5 @@ .input { - @apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out rounded-lg text-gray-600 placeholder-accent-4 pr-10; + @apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out rounded-lg placeholder-accent-4 pr-10; min-width: 300px; } diff --git a/components/core/Searchbar/Searchbar.tsx b/components/core/Searchbar/Searchbar.tsx index d98c8bc62..1c86a87f1 100644 --- a/components/core/Searchbar/Searchbar.tsx +++ b/components/core/Searchbar/Searchbar.tsx @@ -17,7 +17,7 @@ const Searchbar: FC = ({ className }) => { return (
      diff --git a/components/ui/Button/Button.module.css b/components/ui/Button/Button.module.css index 5135a4237..f60c71039 100644 --- a/components/ui/Button/Button.module.css +++ b/components/ui/Button/Button.module.css @@ -1,11 +1,12 @@ .root { @apply text-secondary cursor-pointer inline-flex px-10 rounded-sm leading-6 bg-secondary transition ease-in-out duration-150 shadow-sm font-semibold - text-center justify-center uppercase py-4 uppercase text-center focus:outline-none; + text-center justify-center uppercase py-4 uppercase text-center focus:outline-none + border border-transparent; } .root:hover { - @apply bg-gray-800; + @apply bg-primary-accent text-primary border border-secondary; } .root:focus { From c1e440afd022c3d396a6d83deb17271772699e90 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 13 Oct 2020 14:44:15 -0300 Subject: [PATCH 4/5] Most Changes --- components/ui/Sidebar/Sidebar.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/ui/Sidebar/Sidebar.tsx b/components/ui/Sidebar/Sidebar.tsx index 540654549..0f2c0ea7f 100644 --- a/components/ui/Sidebar/Sidebar.tsx +++ b/components/ui/Sidebar/Sidebar.tsx @@ -72,8 +72,8 @@ const Sidebar: FC = ({ className, children, show = true, close }) => { leaveFrom="translate-x-0" leaveTo="translate-x-full" > -
      -
      +
      +
      {children}
      From f13d71d44c12570955fdbdcc40cd0ddd4a555602 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 13 Oct 2020 14:59:36 -0300 Subject: [PATCH 5/5] Most Changes --- tailwind.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tailwind.config.js b/tailwind.config.js index 6ad7d0975..4f605d5fa 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -27,7 +27,7 @@ module.exports = { primary: 'var(--bg-primary)', secondary: 'var(--bg-secondary)', 'primary-accent': 'var(--bg-primary-accent)', - 'primary-hover': 'var(--bg-primary-accent)', + 'primary-hover': 'var(--bg-primary-hover)', }, textColor: { base: 'var(--text-primary)',