From 9a4c88586818c3ee3d183dc736420e87b0f5ca12 Mon Sep 17 00:00:00 2001 From: StefanWout Date: Thu, 5 Sep 2024 10:40:32 +0100 Subject: [PATCH 01/17] testing --- src/app/components/home/Card.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/home/Card.tsx b/src/app/components/home/Card.tsx index 9b2bd50a..e7815b85 100644 --- a/src/app/components/home/Card.tsx +++ b/src/app/components/home/Card.tsx @@ -12,7 +12,7 @@ const styles = { imageWrapper: "h-56 rounded-2xl overflow-hidden flex 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: "pt-6 pb-3 w-full px-4 flex justify-between items-center text-red-500", }; interface CardProps { From df954437bef1ff95d427f75c6854cf13d18be730 Mon Sep 17 00:00:00 2001 From: StefanWout Date: Thu, 5 Sep 2024 13:35:08 +0100 Subject: [PATCH 02/17] set fixed height on cards to line them up, might tie it to screen size for better responsiveness --- src/app/components/home/AddNewCard.tsx | 4 ++-- src/app/components/home/Card.tsx | 5 +++-- src/app/home/page.tsx | 3 ++- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/app/components/home/AddNewCard.tsx b/src/app/components/home/AddNewCard.tsx index 28fe8426..185c0abf 100644 --- a/src/app/components/home/AddNewCard.tsx +++ b/src/app/components/home/AddNewCard.tsx @@ -4,13 +4,13 @@ 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", + "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", 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-10 pb-6 w-full px-4 flex justify-center items-center", + 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", }; diff --git a/src/app/components/home/Card.tsx b/src/app/components/home/Card.tsx index e7815b85..74a0c166 100644 --- a/src/app/components/home/Card.tsx +++ b/src/app/components/home/Card.tsx @@ -5,14 +5,15 @@ 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", + "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", 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 text-red-500", + textWrapper: "pt-3 pb-3 w-full px-4 flex justify-center items-center max-h-16 my-auto text-red-500", }; interface CardProps { diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx index f536cbc4..6f10eee1 100644 --- a/src/app/home/page.tsx +++ b/src/app/home/page.tsx @@ -4,6 +4,7 @@ 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); @@ -17,7 +18,7 @@ const Home = async () => { return ( <>
-

Your Portfolios

+

Your Portfolios

From b854a5dcad88d5b9abd5ff2ab47dfa006663f1b5 Mon Sep 17 00:00:00 2001 From: StefanWout Date: Thu, 5 Sep 2024 16:00:16 +0100 Subject: [PATCH 03/17] centered text on status badges within portfolio and centered text on portfolion cards in home --- src/app/components/StatusBadge.tsx | 2 +- src/app/components/home/Card.tsx | 2 +- src/app/home/page.tsx | 4 +++- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/app/components/StatusBadge.tsx b/src/app/components/StatusBadge.tsx index ec66279d..4f67665b 100644 --- a/src/app/components/StatusBadge.tsx +++ b/src/app/components/StatusBadge.tsx @@ -55,7 +55,7 @@ const statusColor: { propertyHoverText: "This property is currently in scoping", }, assessment: { - class: "bg-emerald-400 hover:bg-emerald-500", + class: "bg-emerald-400 hover:bg-emerald-500 max-w-full text-center", text: "Non-invasive Assessment", hoverText: "This portfolio is currently in the assessment stage", propertyHoverText: "This property is currently in the assessment stage", diff --git a/src/app/components/home/Card.tsx b/src/app/components/home/Card.tsx index 74a0c166..02b5e451 100644 --- a/src/app/components/home/Card.tsx +++ b/src/app/components/home/Card.tsx @@ -13,7 +13,7 @@ const styles = { imageWrapper: "h-56 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", + textWrapper: "pt-3 pb-3 w-full px-4 flex justify-center items-center max-h-16 my-auto text-red-500 text-center", }; interface CardProps { diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx index 6f10eee1..e0e191d7 100644 --- a/src/app/home/page.tsx +++ b/src/app/home/page.tsx @@ -7,6 +7,7 @@ import { redirect } from "next/navigation"; const Home = async () => { const user = await getServerSession(AuthOptions); + if (!user?.user) { console.error("User not found"); @@ -15,10 +16,11 @@ const Home = async () => { const portfolios = await getPortfolios(user.user.dbId); + return ( <>
-

Your Portfolios

+

Your Portfolios

From 933d219fbf656815fea559fd54a71410ad52d96c Mon Sep 17 00:00:00 2001 From: StefanWout Date: Thu, 5 Sep 2024 16:43:11 +0100 Subject: [PATCH 04/17] adjusted the text in status badge to overflow, looks much better --- src/app/components/StatusBadge.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/StatusBadge.tsx b/src/app/components/StatusBadge.tsx index 4f67665b..741c5777 100644 --- a/src/app/components/StatusBadge.tsx +++ b/src/app/components/StatusBadge.tsx @@ -55,7 +55,7 @@ const statusColor: { propertyHoverText: "This property is currently in scoping", }, assessment: { - class: "bg-emerald-400 hover:bg-emerald-500 max-w-full text-center", + 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", From e3f0fd6d94ea5d327ee76e9d180a116571285fe4 Mon Sep 17 00:00:00 2001 From: StefanWout Date: Fri, 6 Sep 2024 12:56:49 +0100 Subject: [PATCH 05/17] 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 741c5777..f433e24e 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 02b5e451..15248574 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) => {

{`${title}`}

{budgetFormatted}
-
-
+
+
From 63b0469f5cd8ceabb9d3d2f24ff884ae5df0d87f Mon Sep 17 00:00:00 2001 From: StefanWout Date: Fri, 6 Sep 2024 13:06:43 +0100 Subject: [PATCH 06/17] successfully grouped textWrapper with wrapper to apply hover text color to the whole card --- src/app/components/home/Card.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/components/home/Card.tsx b/src/app/components/home/Card.tsx index 15248574..150b2d1b 100644 --- a/src/app/components/home/Card.tsx +++ b/src/app/components/home/Card.tsx @@ -8,12 +8,12 @@ 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 h-80 rounded-3xl flex flex-col items-center justify-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 w-60 h-80 rounded-3xl flex flex-col items-center justify-center", header: "relative mt-2 mx-2 border-red", imageWrapper: "h-52 rounded-2xl overflow-hidden flex 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", + 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", }; interface CardProps { @@ -37,7 +37,7 @@ const Card = ({ id, title, image, budget, status }: CardProps) => {
From 256075b67c29a1d0091d9f7d760345f62ffbbb0f Mon Sep 17 00:00:00 2001 From: StefanWout Date: Fri, 6 Sep 2024 13:10:32 +0100 Subject: [PATCH 07/17] matched however transition speed for text --- src/app/components/home/Card.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/home/Card.tsx b/src/app/components/home/Card.tsx index 150b2d1b..360509c1 100644 --- a/src/app/components/home/Card.tsx +++ b/src/app/components/home/Card.tsx @@ -13,7 +13,7 @@ const styles = { imageWrapper: "h-52 rounded-2xl overflow-hidden flex 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", + 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 { From 95a0c8795e2bed322f3c78d9b60669b51d5482c5 Mon Sep 17 00:00:00 2001 From: StefanWout Date: Fri, 6 Sep 2024 14:08:43 +0100 Subject: [PATCH 08/17] added top padding to the imageWrapper --- src/app/components/home/Card.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/home/Card.tsx b/src/app/components/home/Card.tsx index 360509c1..f4de37b2 100644 --- a/src/app/components/home/Card.tsx +++ b/src/app/components/home/Card.tsx @@ -10,7 +10,7 @@ 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: "h-52 rounded-2xl overflow-hidden flex items-center", + imageWrapper: "pt-5 h-52 rounded-2xl overflow-hidden flex 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", From 18840cebfe5cb9cbc57719dea6cda367cc856709 Mon Sep 17 00:00:00 2001 From: StefanWout Date: Fri, 6 Sep 2024 16:20:42 +0100 Subject: [PATCH 09/17] capitalized T in tendering --- src/app/components/StatusBadge.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/StatusBadge.tsx b/src/app/components/StatusBadge.tsx index f433e24e..b9aae3f9 100644 --- a/src/app/components/StatusBadge.tsx +++ b/src/app/components/StatusBadge.tsx @@ -62,7 +62,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", }, From fbaa5349d45af20c4b3ce8fe104553c1e4a45f28 Mon Sep 17 00:00:00 2001 From: StefanWout Date: Thu, 12 Sep 2024 10:27:13 +0100 Subject: [PATCH 10/17] pre-rebase? --- src/app/components/home/Card.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/home/Card.tsx b/src/app/components/home/Card.tsx index f4de37b2..25be1342 100644 --- a/src/app/components/home/Card.tsx +++ b/src/app/components/home/Card.tsx @@ -22,7 +22,7 @@ interface CardProps { image: string; budget: number | null; status: (typeof PortfolioStatus)[number]; -} +}; const Card = ({ id, title, image, budget, status }: CardProps) => { const router = useRouter(); From a35af09c3af4581b7d56e192fe77795c305036a1 Mon Sep 17 00:00:00 2001 From: StefanWout Date: Thu, 12 Sep 2024 15:46:10 +0100 Subject: [PATCH 11/17] 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} + /> ); })} From 98aca9371b7587d1d57d57d3172c5321c3a48717 Mon Sep 17 00:00:00 2001 From: StefanWout Date: Thu, 19 Sep 2024 12:00:55 +0100 Subject: [PATCH 12/17] new portfolio is squared up nicely --- src/app/components/home/AddNewCard.tsx | 36 ++++++++++++++------------ src/app/components/home/Card.tsx | 6 ++--- src/app/home/page.tsx | 2 ++ 3 files changed, 24 insertions(+), 20 deletions(-) diff --git a/src/app/components/home/AddNewCard.tsx b/src/app/components/home/AddNewCard.tsx index 0ff664bb..6eb76ba3 100644 --- a/src/app/components/home/AddNewCard.tsx +++ b/src/app/components/home/AddNewCard.tsx @@ -4,13 +4,13 @@ import NewPortfolioModal from "./NewPortfolioModal"; const styles = { wrapper: - "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", + "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: "w-full flex justify-center items-center", + textWrapper: "w-full flex justify-center items-center pt-6", text: "pb-6 font-medium leading-none text-base tracking-wider text-gray-400", }; @@ -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 8ea30467..be2c72c5 100644 --- a/src/app/components/home/Card.tsx +++ b/src/app/components/home/Card.tsx @@ -8,9 +8,9 @@ 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 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", + "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", diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx index e0e191d7..2a172d30 100644 --- a/src/app/home/page.tsx +++ b/src/app/home/page.tsx @@ -22,7 +22,9 @@ const Home = async () => {

Your Portfolios

+
+
); }; From 0cfef3e375e8fd48e265f12fa1b527cc7bd0981b Mon Sep 17 00:00:00 2001 From: StefanWout Date: Tue, 24 Sep 2024 16:44:14 +0100 Subject: [PATCH 13/17] made all card images house icon 3 as it has brand colors, left other vector images in place for potential future use --- package-lock.json | 11 +++++++++++ package.json | 1 + src/app/components/portfolio/Toolbar.tsx | 2 +- src/app/shadcn_components/ui/navigation-menu.tsx | 10 +++++----- 4 files changed, 18 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9a12ff85..65e8eb2b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -39,6 +39,7 @@ "next": "13.4.3", "next-auth": "^4.22.1", "next-axiom": "^0.17.0", + "next-themes": "^0.3.0", "pg": "^8.11.1", "postcss": "8.4.23", "react": "18.2.0", @@ -7334,6 +7335,16 @@ "next": "^12.1.4 || ^13" } }, + "node_modules/next-themes": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.3.0.tgz", + "integrity": "sha512-/QHIrsYpd6Kfk7xakK4svpDI5mmXP0gfvCoJdGpZQ2TOrQZmsW0QxjaiLn8wbIKjtm4BTSqLoix4lxYYOnLJ/w==", + "license": "MIT", + "peerDependencies": { + "react": "^16.8 || ^17 || ^18", + "react-dom": "^16.8 || ^17 || ^18" + } + }, "node_modules/next-tick": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz", diff --git a/package.json b/package.json index 2bb3ce76..1e0a2c7c 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,7 @@ "next": "13.4.3", "next-auth": "^4.22.1", "next-axiom": "^0.17.0", + "next-themes": "^0.3.0", "pg": "^8.11.1", "postcss": "8.4.23", "react": "18.2.0", diff --git a/src/app/components/portfolio/Toolbar.tsx b/src/app/components/portfolio/Toolbar.tsx index 42f863eb..9dd8a3c4 100644 --- a/src/app/components/portfolio/Toolbar.tsx +++ b/src/app/components/portfolio/Toolbar.tsx @@ -22,7 +22,7 @@ interface ToolbarProps { } const navigationMenuTriggerStyle = cva( - "bg-gray-50 cursor-pointer group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-gray-200 hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-gray-200" + "bg-gray-50 cursor-pointer group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-gray-200 hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-gray-200 " ); export function Toolbar({ portfolioId }: ToolbarProps) { diff --git a/src/app/shadcn_components/ui/navigation-menu.tsx b/src/app/shadcn_components/ui/navigation-menu.tsx index 0cb661b8..e503467a 100644 --- a/src/app/shadcn_components/ui/navigation-menu.tsx +++ b/src/app/shadcn_components/ui/navigation-menu.tsx @@ -12,7 +12,7 @@ const NavigationMenu = React.forwardRef< {children}{" "}