From ee9ecaedded9067becbd80ab7c6bfd441499f7e5 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Sun, 29 Nov 2020 03:31:18 +0800
Subject: [PATCH] Add some hover animation to button component

---
 www/components/button.tsx | 5 +++--
 www/tailwind.config.js    | 4 +++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/www/components/button.tsx b/www/components/button.tsx
index c9ab3c2b12f..51dba58f2db 100644
--- a/www/components/button.tsx
+++ b/www/components/button.tsx
@@ -23,11 +23,12 @@ const Button = (props: Props) => {
       className={`
         mt-1 inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium 
         rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500
+        group transition
         ${colorClass} ${className}
       `}
     >
-      {text}
-      { url && <span className="ml-2">→</span> }
+      <span className="relative transition-all left-3 group-hover:left-0">{text}</span>
+      { url && <span className="ml-2 transition-all opacity-0 group-hover:opacity-100">→</span> }
     </button>
   )
 
diff --git a/www/tailwind.config.js b/www/tailwind.config.js
index 9799c5d5c30..998ddd671c5 100644
--- a/www/tailwind.config.js
+++ b/www/tailwind.config.js
@@ -96,7 +96,9 @@ module.exports = {
     },
   },
   variants: {
-    extend: {},
+    extend: {
+      inset: ['responsive', 'group-hover']
+    },
   },
   plugins: [],
 }