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/StatusBadge.tsx b/src/app/components/StatusBadge.tsx index 938f1358..de90e3a6 100644 --- a/src/app/components/StatusBadge.tsx +++ b/src/app/components/StatusBadge.tsx @@ -54,12 +54,12 @@ 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", }, assessment: { - class: "bg-emerald-400 hover:bg-emerald-500", + class: "bg-emerald-400 hover:bg-emerald-500 truncate text-overflow: ellipsis", text: "Non-invasive Assessment", hoverText: "This portfolio is currently in the assessment stage", propertyHoverText: "This property is currently in the assessment stage", @@ -72,7 +72,7 @@ const statusColor: { }, tendering: { class: "bg-emerald-500 hover:bg-emerald-500", - text: "tendering", + text: "Tendering", hoverText: "This portfolio is currently in the tendering stage", propertyHoverText: "This property is currently in tender", }, diff --git a/src/app/components/home/AddNewCard.tsx b/src/app/components/home/AddNewCard.tsx index 28fe8426..6eb76ba3 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 rounded-3xl flex flex-col items-center justify-center", - header: "relative mt-2 mx-2", + "group bg-brandblue hover:bg-hoverblue shadow-xl hover:shadow-none cursor-pointer rounded-3xl flex flex-col items-center justify-center aspect-square", + header: "relative mt-2 mx-2 w-full", imageWrapper: - "h-56 rounded-2xl overflow-hidden flex justify-center items-center", + "relative 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-10 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 pt-6", + text: "pb-6 font-medium leading-none text-base tracking-wider text-gray-400", }; const AddNewCard = () => { @@ -24,22 +24,24 @@ const AddNewCard = () => { return ( -
-
-
-
- - +
+
+
+
+
+ + +
+
+

{`${title}`}

+
-
-

{`${title}`}

-
-
+
); }; diff --git a/src/app/components/home/Card.tsx b/src/app/components/home/Card.tsx index 9b2bd50a..be2c72c5 100644 --- a/src/app/components/home/Card.tsx +++ b/src/app/components/home/Card.tsx @@ -5,14 +5,16 @@ import { PortfolioStatus } from "@/app/db/schema/portfolio"; import { formatNumber } from "@/app/utils"; import Image from "next/image"; + 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 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", + "group py-2 px-3 active:bg-brandmidblue font-medium leading-none text-base tracking-wider text-gray-400 hover:text-white-300 bg-white hover:bg-hoverblue shadow-2xl hover:shadow-none cursor-pointer aspect-square rounded-3xl flex flex-col items-center justify-center", + header: "relative mt-2 w-full border-brandblue", + budgetWrapper: "min-h-7 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: "pt-6 pb-3 w-full px-4 flex justify-between items-center", + 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", }; interface CardProps { @@ -21,7 +23,7 @@ interface CardProps { image: string; budget: number | null; status: (typeof PortfolioStatus)[number]; -} +}; const Card = ({ id, title, image, budget, status }: CardProps) => { const router = useRouter(); @@ -36,9 +38,10 @@ const Card = ({ id, title, image, budget, status }: CardProps) => {
+
{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} + /> ); })} diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx index f536cbc4..2a172d30 100644 --- a/src/app/home/page.tsx +++ b/src/app/home/page.tsx @@ -4,8 +4,10 @@ import { AuthOptions } from "@/app/api/auth/[...nextauth]/route"; import { getServerSession } from "next-auth"; import { redirect } from "next/navigation"; + const Home = async () => { const user = await getServerSession(AuthOptions); + if (!user?.user) { console.error("User not found"); @@ -14,12 +16,15 @@ const Home = async () => { const portfolios = await getPortfolios(user.user.dbId); + return ( <>
-

Your Portfolios

+

Your Portfolios

+
+
); };