From 74f11f13f71eddef92f22dd624d24a6d9d29c365 Mon Sep 17 00:00:00 2001
From: Khalim Conn-Kowlessar <kconnkowlessar@gmail.com>
Date: Fri, 2 Jun 2023 14:26:00 +0100
Subject: [PATCH] Made protfolio page a bit nicer

---
 src/app/components/portfolio/AddNew.tsx |  4 +-
 src/app/portfolio/[slug]/page.tsx       | 65 ++++++++++++++-----------
 2 files changed, 39 insertions(+), 30 deletions(-)

diff --git a/src/app/components/portfolio/AddNew.tsx b/src/app/components/portfolio/AddNew.tsx
index 32cf0005..9f38ef6a 100644
--- a/src/app/components/portfolio/AddNew.tsx
+++ b/src/app/components/portfolio/AddNew.tsx
@@ -6,8 +6,8 @@ import { PlusIcon, TableCellsIcon } from "@heroicons/react/24/outline";
 
 export default function AddNew({ portfolioId }: { portfolioId: string }) {
   return (
-    <Menu as="div" className="relative">
-      <Menu.Button className="rounded-md bg-brandtan text-white hover:bg-hovertan">
+    <Menu as="div" className="relative w-full">
+      <Menu.Button className="rounded-md bg-brandtan text-white hover:bg-hovertan w-full">
         <div className="mx-8">Add New</div>
       </Menu.Button>
       <Menu.Items className="hover:bg-brandtan absolute right-0 mt-2 w-48 origin-top-right overflow-hidden rounded-md border bg-white shadow-lg focus:outline-none">
diff --git a/src/app/portfolio/[slug]/page.tsx b/src/app/portfolio/[slug]/page.tsx
index cc869b74..a42776ed 100644
--- a/src/app/portfolio/[slug]/page.tsx
+++ b/src/app/portfolio/[slug]/page.tsx
@@ -252,34 +252,46 @@ export default async function Page({
   return (
     <>
       <div className="flex justify-center">
-        <h1 className="text-3xl font-bold mt-3 mb-4">Portfolio: {pageName}</h1>
+        <h1 className="text-3xl text-brandblue font-bold mt-3 mb-4">
+          Portfolio: {pageName}
+        </h1>
       </div>
       <div className="flex justify-center">
         <div className="grid grid-cols-5 gap-4 w-full max-w-7xl h-screen">
-          <div className="max-h-96 bg-white p-4 rounded-lg shadow-lg text-black h-1/2">
-            <h2 className="text-lg font-bold mb-4">Portfolio Summary</h2>
-            <ul>
-              <li className="px-2 mb-2 flex items-center cursor-pointer hover:text-white hover:bg-brandblue hover:rounded-md transition-colors duration-200">
-                Budget: {budget || "Not Set"}
-                <PencilSquareIcon className="h-6 w-6 ml-2" />
-              </li>
-              <li className="px-2 mb-2">Total Cost: £{totalCost}</li>
-              <li className="px-2 mb-2">
-                Number of properties: {properties.length}
-              </li>
-              <li className="px-2 mb-2">
-                Annual Co2 Savings: {co2Reduction} tonnes
-              </li>
-              <li className="px-2 mb-2">
-                Total Works Time: {totalWorksHours} hours
-              </li>
-              <li className="px-2 mb-2">
-                Total Value Increase: £{totalValueIncrease}
-              </li>
-              <li className="px-2 mb-2">
-                Annual rental yield Increase: £{rentalYieldIncrease}
-              </li>
-            </ul>
+          <div className="flex-col">
+            <div
+              className="mb-4 max-h-96 bg-white p-4 rounded-lg border shadow-sm 
+             text-black h-1/2"
+            >
+              <h2 className="text-center text-xl font-bold mb-4 text-brandblue">
+                Portfolio Summary
+              </h2>
+              <ul>
+                <li className="text-gray-700 px-2 mb-2 flex items-center cursor-pointer hover:text-gray-200 hover:bg-brandblue hover:rounded-md transition-colors duration-200">
+                  Budget: {budget || "Not Set"}
+                  <PencilSquareIcon className="h-6 w-6 ml-2" />
+                </li>
+                <li className="text-gray-700 px-2 mb-2">
+                  Total Cost: £{totalCost}
+                </li>
+                <li className="text-gray-700 px-2 mb-2">
+                  Number of properties: {properties.length}
+                </li>
+                <li className="text-gray-700 px-2 mb-2">
+                  Annual Co2 Savings: {co2Reduction} tonnes
+                </li>
+                <li className="text-gray-700 px-2 mb-2">
+                  Total Works Time: {totalWorksHours} hours
+                </li>
+                <li className="text-gray-700 px-2 mb-2">
+                  Total Value Increase: £{totalValueIncrease}
+                </li>
+                <li className="text-gray-700 px-2 mb-2">
+                  Annual rental yield Increase: £{rentalYieldIncrease}
+                </li>
+              </ul>
+            </div>
+            <AddNew portfolioId={demo_id} />
           </div>
           <div className="col-span-3 bg-white">
             {properties.length === 0 ? (
@@ -291,9 +303,6 @@ export default async function Page({
               />
             )}
           </div>
-          <div className="col-span-1 flex justify-center">
-            <AddNew portfolioId={demo_id} />
-          </div>
         </div>
       </div>
     </>