From e3f0fd6d94ea5d327ee76e9d180a116571285fe4 Mon Sep 17 00:00:00 2001
From: StefanWout <stefanwoutersen@gmail.com>
Date: Fri, 6 Sep 2024 12:56:49 +0100
Subject: [PATCH] capitalized S in scoping, centered the badge on the card,
 lined up the badge regardless of length of text and trying to get the text to
 provide contrast on hover

---
 src/app/components/StatusBadge.tsx | 2 +-
 src/app/components/home/Card.tsx   | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/components/StatusBadge.tsx b/src/app/components/StatusBadge.tsx
index 741c577..f433e24 100644
--- a/src/app/components/StatusBadge.tsx
+++ b/src/app/components/StatusBadge.tsx
@@ -50,7 +50,7 @@ const statusColor: {
 } = {
   scoping: {
     class: "bg-emerald-500 hover:bg-emerald-500",
-    text: "scoping",
+    text: "Scoping",
     hoverText: "This portfolio is currently in scoping",
     propertyHoverText: "This property is currently in scoping",
   },
diff --git a/src/app/components/home/Card.tsx b/src/app/components/home/Card.tsx
index 02b5e45..1524857 100644
--- a/src/app/components/home/Card.tsx
+++ b/src/app/components/home/Card.tsx
@@ -10,10 +10,10 @@ const styles = {
   wrapper:
     "active:bg-brandmidblue 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 h-80 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",
+  imageWrapper: "h-52 rounded-2xl overflow-hidden flex items-center",
   wrapperAnime: "transition-all duration-500 ease-in-out",
   image: "object-cover mx-auto",
-  textWrapper: "pt-3 pb-3 w-full px-4 flex justify-center items-center max-h-16 my-auto text-red-500 text-center",
+  textWrapper: "pb-3 w-full px-4 flex justify-center items-center max-h-16 my-auto text-gray-700 text-center",
 };
 
 interface CardProps {
@@ -54,8 +54,8 @@ const Card = ({ id, title, image, budget, status }: CardProps) => {
           <h1>{`${title}`}</h1>
           <div>{budgetFormatted}</div>
         </div>
-        <div className="mb-2 flex justify-end w-full">
-          <div className="flex justify-end w-full pr-4">
+        <div className="mb-4 flex justify-end w-full">
+          <div className="flex justify-center w-full">
             <StatusBadge status={status} />
           </div>
         </div>