From 9aa40f9d091071644c62d2488da318379cf27d87 Mon Sep 17 00:00:00 2001
From: wanhose <wanhose.development@gmail.com>
Date: Mon, 23 May 2022 21:53:31 +0200
Subject: [PATCH] fix(web): animations

---
 packages/web/src/index.css      |  2 +-
 packages/web/src/index.html     | 11 +++++++----
 packages/web/tailwind.config.js |  4 ++--
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/web/src/index.css b/packages/web/src/index.css
index 545c6f1..9e93fa9 100644
--- a/packages/web/src/index.css
+++ b/packages/web/src/index.css
@@ -10,7 +10,7 @@
 
 @layer components {
   .button {
-    @apply font-bold md:bg-2x md:hover:animate-gradient md:hover:shadow-md rounded-lg text-white px-8 py-4;
+    @apply font-bold md:bg-2x md:hover:shadow-md rounded-lg text-white px-8 py-4;
   }
 
   .icon-box {
diff --git a/packages/web/src/index.html b/packages/web/src/index.html
index 9954512..e4f11cd 100644
--- a/packages/web/src/index.html
+++ b/packages/web/src/index.html
@@ -135,7 +135,10 @@
           automatically
         </p>
         <div class="flex flex-col gap-4 justify-center md:flex-row md:gap-8 mt-16">
-          <a class="bg-gradient-to-r button from-primary to-blue-500 px-8 py-4" href="#downloads">
+          <a
+            class="bg-gradient-to-r button from-primary md:hover:animate-gradient to-blue-500"
+            href="#downloads"
+          >
             Download now
             <svg
               aria-hidden="true"
@@ -309,7 +312,7 @@
         <h2>Available now on</h2>
         <div class="flex flex-col gap-4 justify-center md:flex-row md:gap-8 mt-16">
           <a
-            class="bg-gradient-to-r button from-chrome-1 to-chrome-3 via-chrome-2"
+            class="bg-gradient-to-r button from-chrome-1 md:hover:animate-gradient to-chrome-3 via-chrome-2"
             href="https://chrome.google.com/webstore/detail/djcbfpkdhdkaflcigibkbpboflaplabg"
             target="_blank"
           >
@@ -329,7 +332,7 @@
             </svg>
           </a>
           <a
-            class="bg-gradient-to-r button from-edge-1 to-edge-3 via-edge-2"
+            class="bg-gradient-to-r button from-edge-1 md:hover:animate-gradient to-edge-3 via-edge-2"
             href="https://microsoftedge.microsoft.com/addons/detail/hbogodfciblakeneadpcolhmfckmjcii"
             target="_blank"
           >
@@ -349,7 +352,7 @@
             </svg>
           </a>
           <a
-            class="bg-gradient-to-r button from-firefox-1 to-firefox-3 via-firefox-2"
+            class="bg-gradient-to-r button from-firefox-1 md:hover:animate-gradient to-firefox-3 via-firefox-2"
             href="https://addons.mozilla.org/firefox/addon/cookie-dialog-monster"
             target="_blank"
           >
diff --git a/packages/web/tailwind.config.js b/packages/web/tailwind.config.js
index a2730ef..ed13a0c 100644
--- a/packages/web/tailwind.config.js
+++ b/packages/web/tailwind.config.js
@@ -12,9 +12,9 @@ module.exports = {
         gradient: 'gradient 3s ease infinite',
       },
       colors: {
-        'chrome-1': '#fe4e40',
+        'chrome-1': '#01a258',
         'chrome-2': '#008cf8',
-        'chrome-3': '#01a258',
+        'chrome-3': '#fe4e40',
         'edge-1': '#197bc4',
         'edge-2': '#2ec2e0',
         'edge-3': '#52dc6c',