From a35af09c3af4581b7d56e192fe77795c305036a1 Mon Sep 17 00:00:00 2001 From: StefanWout Date: Thu, 12 Sep 2024 15:46:10 +0100 Subject: [PATCH] squared off the cards and placed budget at the top right. Also recolored one of the icons as a test, just need to get the addnewcard card to match --- public/house-icon-3.svg | 20 ++++++++++---------- src/app/components/home/AddNewCard.tsx | 6 +++--- src/app/components/home/Card.tsx | 9 +++++---- src/app/components/home/CardTiles.tsx | 1 + 4 files changed, 19 insertions(+), 17 deletions(-) diff --git a/public/house-icon-3.svg b/public/house-icon-3.svg index 3c27b5f3..3237aebd 100644 --- a/public/house-icon-3.svg +++ b/public/house-icon-3.svg @@ -9,28 +9,28 @@ - - - - - - + + + - - - + + + - + \ No newline at end of file diff --git a/src/app/components/home/AddNewCard.tsx b/src/app/components/home/AddNewCard.tsx index 185c0abf..0ff664bb 100644 --- a/src/app/components/home/AddNewCard.tsx +++ b/src/app/components/home/AddNewCard.tsx @@ -4,14 +4,14 @@ import NewPortfolioModal from "./NewPortfolioModal"; const styles = { wrapper: - "bg-brandblue hover:bg-hoverblue shadow-xl hover:shadow-none cursor-pointer w-60 h-80 rounded-3xl flex flex-col items-center justify-center", + "group bg-brandblue hover:bg-hoverblue shadow-xl hover:shadow-none cursor-pointer aspect-square rounded-3xl flex flex-col items-center justify-center", header: "relative mt-2 mx-2", imageWrapper: "h-56 rounded-2xl overflow-hidden flex justify-center items-center", wrapperAnime: "transition-all duration-500 ease-in-out", image: "object-cover w-8/12 h-8/12 mx-auto fill-white", - textWrapper: "pt-9 pb-6 w-full px-4 flex justify-center items-center", - text: "font-medium leading-none text-base tracking-wider text-gray-400", + textWrapper: "w-full flex justify-center items-center", + text: "pb-6 font-medium leading-none text-base tracking-wider text-gray-400", }; const AddNewCard = () => { diff --git a/src/app/components/home/Card.tsx b/src/app/components/home/Card.tsx index 25be1342..8ea30467 100644 --- a/src/app/components/home/Card.tsx +++ b/src/app/components/home/Card.tsx @@ -8,9 +8,10 @@ import Image from "next/image"; const styles = { wrapper: - "group active:bg-brandmidblue font-medium leading-none text-base tracking-wider text-gray-400 hover:text-white-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: "pt-5 h-52 rounded-2xl overflow-hidden flex items-center", + "group active:bg-brandmidblue font-medium leading-none text-base tracking-wider text-gray-400 hover:text-white-300 bg-white hover:bg-hoverblue shadow-xl hover:shadow-none cursor-pointer aspect-square rounded-3xl flex flex-col items-center justify-center", + header: "relative mt-2 w-full border-red", + budgetWrapper: "min-h-7 pt-2 pr-4 flex justify-end w-full text-right max-h-16 my-auto text-gray-700 group-hover:text-white transition-all duration-500 ease-in-out relative", + imageWrapper: "rounded-2xl overflow-hidden flex justify-center items-center", wrapperAnime: "transition-all duration-500 ease-in-out", image: "object-cover mx-auto", textWrapper: "pb-3 w-full px-4 flex justify-center items-center max-h-16 my-auto text-gray-700 text-center group-hover:text-white transition-all duration-500 ease-in-out", @@ -40,6 +41,7 @@ const Card = ({ id, title, image, budget, status }: CardProps) => { className={[styles.wrapper, styles.wrapperAnime].join(" ")} >
+
{budgetFormatted}
{

{`${title}`}

-
{budgetFormatted}
diff --git a/src/app/components/home/CardTiles.tsx b/src/app/components/home/CardTiles.tsx index 9b00483a..ab263555 100644 --- a/src/app/components/home/CardTiles.tsx +++ b/src/app/components/home/CardTiles.tsx @@ -25,6 +25,7 @@ export default function CardTiles({ image={`house-icon-${image_idx}.svg`} budget={portfolio.budget} status={portfolio.status} + /> ); })}