From b525de41814850ed4bdaccaf1294b64ceda2ac0e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juli=C3=A1n=20Benegas?= <julianbenegas99@gmail.com>
Date: Thu, 22 Oct 2020 21:14:56 -0300
Subject: [PATCH] normalize durations

---
 components/core/Footer/Footer.tsx          | 12 ++++++------
 components/core/Toggle/Toggle.tsx          |  6 +++---
 components/core/UserNav/DropdownMenu.tsx   |  2 +-
 components/core/UserNav/UserNav.module.css |  2 +-
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/components/core/Footer/Footer.tsx b/components/core/Footer/Footer.tsx
index e98cf1bda..ed5bd469b 100644
--- a/components/core/Footer/Footer.tsx
+++ b/components/core/Footer/Footer.tsx
@@ -21,7 +21,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
   return (
     <footer className={rootClassName}>
       <Container>
-        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 border-b border-accents-2 py-12 text-primary bg-primary">
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 border-b border-accents-2 py-12 text-primary bg-primary transition-colors duration-150">
           <div className="col-span-1 lg:col-span-2">
             <Link href="/">
               <a className="flex flex-initial items-center font-bold md:mr-24">
@@ -36,21 +36,21 @@ const Footer: FC<Props> = ({ className, pages }) => {
             <ul className="flex flex-initial flex-col md:flex-1">
               <li className="py-3 md:py-0 md:pb-4">
                 <Link href="/">
-                  <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
+                  <a className="text-gray-400 hover:text-white transition ease-in-out duration-150">
                     Home
                   </a>
                 </Link>
               </li>
               <li className="py-3 md:py-0 md:pb-4">
                 <Link href="/">
-                  <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
+                  <a className="text-gray-400 hover:text-white transition ease-in-out duration-150">
                     Careers
                   </a>
                 </Link>
               </li>
               <li className="py-3 md:py-0 md:pb-4">
                 <Link href="/blog">
-                  <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
+                  <a className="text-gray-400 hover:text-white transition ease-in-out duration-150">
                     Blog
                   </a>
                 </Link>
@@ -58,7 +58,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
               {sitePages.map((page) => (
                 <li key={page.url} className="py-3 md:py-0 md:pb-4">
                   <Link href={page.url!}>
-                    <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
+                    <a className="text-gray-400 hover:text-white transition ease-in-out duration-150">
                       {page.name}
                     </a>
                   </Link>
@@ -71,7 +71,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
               {legalPages.map((page) => (
                 <li key={page.url} className="py-3 md:py-0 md:pb-4">
                   <Link href={page.url!}>
-                    <a className="text-gray-400 hover:text-white transition ease-in-out duration-100">
+                    <a className="text-gray-400 hover:text-white transition ease-in-out duration-150">
                       {page.name}
                     </a>
                   </Link>
diff --git a/components/core/Toggle/Toggle.tsx b/components/core/Toggle/Toggle.tsx
index 0f944a90b..283aa4ad1 100644
--- a/components/core/Toggle/Toggle.tsx
+++ b/components/core/Toggle/Toggle.tsx
@@ -31,7 +31,7 @@ const Toggle: FC<Props> = ({ className, checked, onChange }) => {
           <span
             className={`${
               checked
-                ? 'opacity-0 ease-out duration-100'
+                ? 'opacity-0 ease-out duration-150'
                 : 'opacity-100 ease-in duration-200'
             } absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`}
           >
@@ -41,8 +41,8 @@ const Toggle: FC<Props> = ({ className, checked, onChange }) => {
             className={`${
               checked
                 ? 'opacity-100 ease-in duration-200'
-                : 'opacity-0 ease-out duration-100'
-            } opacity-0 ease-out duration-100 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`}
+                : 'opacity-0 ease-out duration-150'
+            } opacity-0 ease-out duration-150 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`}
           >
             <HiMoon className="h-3 w-3 text-yellow-400" />
           </span>
diff --git a/components/core/UserNav/DropdownMenu.tsx b/components/core/UserNav/DropdownMenu.tsx
index 61f8d4ca2..da4369c4b 100644
--- a/components/core/UserNav/DropdownMenu.tsx
+++ b/components/core/UserNav/DropdownMenu.tsx
@@ -26,7 +26,7 @@ const DropdownMenu: FC<DropdownMenuProps> = ({
   return (
     <Transition
       show={open}
-      enter="transition ease-out duration-100 z-20"
+      enter="transition ease-out duration-150 z-20"
       enterFrom="transform opacity-0 scale-95"
       enterTo="transform opacity-100 scale-100"
       leave="transition ease-in duration-75"
diff --git a/components/core/UserNav/UserNav.module.css b/components/core/UserNav/UserNav.module.css
index be7ea346c..91a81566b 100644
--- a/components/core/UserNav/UserNav.module.css
+++ b/components/core/UserNav/UserNav.module.css
@@ -12,7 +12,7 @@
 .item {
   @apply mr-6 cursor-pointer relative transition ease-in-out duration-150 text-base flex items-center;
   &:hover {
-    @apply text-accents-8 transition scale-110 duration-100;
+    @apply text-accents-8 transition scale-110 duration-150;
   }
 
   &:last-child {