From cf76432d4821481c19278b488efd84b4df26525b Mon Sep 17 00:00:00 2001
From: Galen Guyer <galen@galenguyer.com>
Date: Sat, 14 Nov 2020 19:10:56 -0500
Subject: make buttons better

buttons change their background and text color on hover now to make
their purpose more clear, and the Link element covers the whole button
now. Thanks for the suggestions Tessa!
---
 src/Card.js        | 12 ++++++------
 tailwind.config.js | 14 ++++++++------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/Card.js b/src/Card.js
index 626cec0..86ee54d 100644
--- a/src/Card.js
+++ b/src/Card.js
@@ -8,21 +8,21 @@ const Card = (props) => {
         diff = "+" + diff.toString();
     }
     return (
-        <div className="Card bg-white rounded-lg border-2 border-orange-300 p-4 m-4">
-            <Link to={props.link}>
+        <Link className="Card" style={{padding: 0}} to={props.link}>
+        <div className="group bg-white hover:bg-orange-400 rounded-lg border-2 border-orange-300 hover:border-orange-400 p-4 m-6 transition ease-in-out duration-300">
                 <p>
-                    <span className="text-2xl">
+                    <span className="text-2xl group-hover:text-white transition ease-in-out duration-300">
                         {props.latest}
                         {props.suffix}{" "}
                     </span>
-                    <span className="Diff text-gray-600 text-sm">
+                    <span className="Diff text-gray-600 group-hover:text-gray-100 text-sm transition ease-in-out duration-300">
                         ({diff}
                         {props.suffix})
                     </span>
                 </p>
-                <h3 className="text-base">{props.name}</h3>
-            </Link>
+                <h3 className="text-base group-hover:text-white transition ease-in-out duration-300">{props.name}</h3>
         </div>
+        </Link>
     );
 };
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 3de92ff..d6359c8 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,11 +1,13 @@
 module.exports = {
     purge: ["./src/**/*.html", "./src/**/*.jsx", "./src/**/*.js"],
     theme: {
-      extend: {
-        screens: {
-          xs: { max: "400px" },
+        extend: {
+            screens: {
+                xs: { max: "400px" },
+            },
         },
-      },
     },
-  };
-  
\ No newline at end of file
+    variants: {
+        textColor: ["responsive", "hover", "focus", "group-hover"],
+    },
+};
-- 
cgit v1.2.3