From 5ef510c3643f4c0815a33b7b326d83754c97c98d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juli=C3=A1n=20Benegas?= Date: Wed, 21 Oct 2020 19:22:27 -0300 Subject: [PATCH] normalize transition durations --- components/core/Avatar/Avatar.tsx | 2 +- components/core/Featurebar/Featurebar.tsx | 2 +- components/core/Footer/Footer.module.css | 3 +++ components/core/Footer/Footer.tsx | 7 ++++--- components/core/Layout/Layout.tsx | 6 ++---- components/core/Navbar/Navbar.module.css | 2 +- components/core/Searchbar/Searchbar.tsx | 2 +- components/core/Toggle/Toggle.tsx | 6 +++++- components/core/UserNav/UserNav.module.css | 2 +- components/product/ProductCard/ProductCard.module.css | 2 +- components/product/Swatch/Swatch.module.css | 4 ++-- pages/index.tsx | 4 ++-- 12 files changed, 24 insertions(+), 18 deletions(-) create mode 100644 components/core/Footer/Footer.module.css diff --git a/components/core/Avatar/Avatar.tsx b/components/core/Avatar/Avatar.tsx index 7dd3bc5bd..3e9281763 100644 --- a/components/core/Avatar/Avatar.tsx +++ b/components/core/Avatar/Avatar.tsx @@ -12,7 +12,7 @@ const Avatar: FC = ({}) => { return (
= ({ hide, }) => { const rootClassName = cn( - 'transition-transform transform duration-500 ease-out p-6 bg-primary text-base text-sm md:flex flex-row justify-center items-center font-medium fixed bottom-0 w-full z-10', + 'transition-all transform duration-150 ease-out p-6 bg-primary text-base text-sm md:flex flex-row justify-center items-center font-medium fixed bottom-0 w-full z-10', { 'translate-y-full': hide }, className ) diff --git a/components/core/Footer/Footer.module.css b/components/core/Footer/Footer.module.css new file mode 100644 index 000000000..45a2596cb --- /dev/null +++ b/components/core/Footer/Footer.module.css @@ -0,0 +1,3 @@ +.copyright { + font-size: 16px; +} diff --git a/components/core/Footer/Footer.tsx b/components/core/Footer/Footer.tsx index 55f855429..4aa8288d7 100644 --- a/components/core/Footer/Footer.tsx +++ b/components/core/Footer/Footer.tsx @@ -4,6 +4,7 @@ import Link from 'next/link' import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages' import getSlug from '@utils/get-slug' import { Logo } from '@components/ui' +import s from './Footer.module.css' interface Props { className?: string @@ -36,7 +37,7 @@ const Footer: FC = ({ className, pages }) => { {sitePages.map((page) => (
  • - + {page.name} @@ -48,7 +49,7 @@ const Footer: FC = ({ className, pages }) => { {legalPages.map((page) => (
  • - + {page.name} @@ -56,7 +57,7 @@ const Footer: FC = ({ className, pages }) => { ))} - + © 2020 ACME, Inc. All rights reserved. diff --git a/components/core/Layout/Layout.tsx b/components/core/Layout/Layout.tsx index f2deda1ee..2fac3764c 100644 --- a/components/core/Layout/Layout.tsx +++ b/components/core/Layout/Layout.tsx @@ -39,10 +39,8 @@ const Layout: FC = ({ children, pageProps }) => {
    diff --git a/components/core/Navbar/Navbar.module.css b/components/core/Navbar/Navbar.module.css index c2dedc9be..5abeb32e0 100644 --- a/components/core/Navbar/Navbar.module.css +++ b/components/core/Navbar/Navbar.module.css @@ -1,3 +1,3 @@ .link { - @apply group text-base inline-flex items-center text-base leading-6 font-medium hover:text-accents-8 focus:outline-none focus:text-accents-8 transition ease-in-out duration-100 cursor-pointer; + @apply group inline-flex items-center text-base leading-6 font-medium hover:text-accents-8 focus:outline-none focus:text-accents-8 transition ease-in-out duration-150 cursor-pointer; } diff --git a/components/core/Searchbar/Searchbar.tsx b/components/core/Searchbar/Searchbar.tsx index a2fe85f18..25f6eb7a8 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/core/Toggle/Toggle.tsx b/components/core/Toggle/Toggle.tsx index d33d3c371..0f944a90b 100644 --- a/components/core/Toggle/Toggle.tsx +++ b/components/core/Toggle/Toggle.tsx @@ -9,7 +9,11 @@ interface Props { const Toggle: FC = ({ className, checked, onChange }) => { return ( - + span, .productPrice, .wishlistButton { - @apply transition ease-in-out duration-300; + @apply transition ease-in-out duration-150; } .squareBg { diff --git a/components/product/Swatch/Swatch.module.css b/components/product/Swatch/Swatch.module.css index cd6bd4b83..ae37771ad 100644 --- a/components/product/Swatch/Swatch.module.css +++ b/components/product/Swatch/Swatch.module.css @@ -1,6 +1,6 @@ .root { @apply h-12 w-12 bg-primary text-primary rounded-full mr-3 inline-flex - items-center justify-center cursor-pointer transition duration-100 ease-in-out + items-center justify-center cursor-pointer transition duration-150 ease-in-out p-0 shadow-none border-gray-200 border box-border; & > span { @@ -13,7 +13,7 @@ } .color { - @apply text-black transition duration-100 ease-in-out; + @apply text-black transition duration-150 ease-in-out; &:hover { @apply text-black; diff --git a/pages/index.tsx b/pages/index.tsx index 4cad5bd6d..8cac0f133 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -63,7 +63,7 @@ export default function Home({ }, []) return ( -
    +
    {featured.slice(0, 3).map(({ node }) => ( @@ -96,7 +96,7 @@ export default function Home({
    -
    +
    • All Categories