From 443a12f7eaad6c0044311435a7b0cdf6fb257905 Mon Sep 17 00:00:00 2001
From: Khalim Conn-Kowlessar <kconnkowlessar@gmail.com>
Date: Fri, 2 Jun 2023 12:45:29 +0100
Subject: [PATCH] Home page styling

---
 src/app/components/home/Card.tsx                 | 7 +++----
 src/app/components/signin/GoogleSignInButton.jsx | 3 ++-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/components/home/Card.tsx b/src/app/components/home/Card.tsx
index a4d8c852..0b2b8a2b 100644
--- a/src/app/components/home/Card.tsx
+++ b/src/app/components/home/Card.tsx
@@ -3,13 +3,12 @@ import React from "react";
 
 const styles = {
   wrapper:
-    "bg-white hover:bg-brandblue shadow-xl hover:shadow-none cursor-pointer w-60 rounded-3xl flex flex-col items-center justify-center",
+    "font-medium leading-none text-base tracking-wider text-gray-400 hover:text-gray-300 bg-white hover:bg-hoverblue shadow-xl hover:shadow-none cursor-pointer w-60 rounded-3xl flex flex-col items-center justify-center",
   header: "relative mt-2 mx-2 border-red",
   imageWrapper: "h-56 rounded-2xl overflow-hidden flex items-center",
   wrapperAnime: "transition-all duration-500 ease-in-out",
   image: "object-cover w-1/3 mx-auto",
   textWrapper: "pt-10 pb-6 w-full px-4 flex justify-between items-center",
-  text: "font-medium leading-none text-base tracking-wider text-gray-400",
 };
 
 interface CardProps {
@@ -29,8 +28,8 @@ const Card = ({ id, title, image, budget }: CardProps) => {
           </div>
         </div>
         <div className={styles.textWrapper}>
-          <h1 className={styles.text}>{`${title}`}</h1>
-          <div className={styles.text}>{budget}</div>
+          <h1>{`${title}`}</h1>
+          <div>{budget}</div>
         </div>
       </div>
     </Link>
diff --git a/src/app/components/signin/GoogleSignInButton.jsx b/src/app/components/signin/GoogleSignInButton.jsx
index 54002491..90ef419a 100644
--- a/src/app/components/signin/GoogleSignInButton.jsx
+++ b/src/app/components/signin/GoogleSignInButton.jsx
@@ -11,7 +11,7 @@ const GoogleSignInButton = () => {
 
   return (
     <Button
-      className="w-full text-black"
+      className="w-full text-black hover:text-gray-700"
       onClick={() => signIn("google", { callbackUrl })}
     >
       <svg
@@ -24,6 +24,7 @@ const GoogleSignInButton = () => {
         viewBox="0 0 488 512"
       >
         <path
+          className="hover:fill-red"
           fill="blue"
           d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"
         ></path>