From a2b93c5c63fe6647dc726cf6dee93a9f4fb927ce Mon Sep 17 00:00:00 2001
From: StefanWout <stefanwoutersen@gmail.com>
Date: Tue, 12 Nov 2024 15:55:45 +0000
Subject: [PATCH] succesfully beautified the settings page, could be made more
 beautiful but it's currently funcitonal and responsive, not sure about the
 look of the danger zone or the reminder text on offer but that's easily
 changed.

---
 .../settings/PortfolioSettings.tsx            | 47 +++++++++++--------
 1 file changed, 27 insertions(+), 20 deletions(-)

diff --git a/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx b/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx
index 73124664..28a6f2d0 100644
--- a/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx
+++ b/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx
@@ -363,23 +363,25 @@ export default function PortfolioSettings({
 
   return (
     <div className="w-4/5 p-4 mt-5 pt-5 bg-gray-50 rounded-lg text-brandblue">
-      <div className="grid grid-cols-[auto_auto_min-content] gap-4">
+      <div className="grid grid-cols-[auto_auto_min-content] gap-5">
         {/* Row 1: Name */}
-        <div className="flex pl-1 col-span-2">
+        <div className="flex pl-1 col-span-3 ">
           <span>Change the Portfolio Name:</span>
         </div>
         <div className="flex-grow col-span-2">
           <Input value={portfolioName} onChange={handlePortfolioNameChange} />
         </div>
-        <div className="flex justify-center">
+        <div className="flex justify-end col-start-3 col-end-3">
           <Button className="w-min" onClick={handleRename}>
             Rename
           </Button>
         </div>
-  
+        <div className="border-b-4 col-span-3 rounded-full"></div>
+        
         {/* Row 2: Budget */}
-        <div className="w-full flex items-center pl-1 col-span-2">
-          <span>Portfolio Budget:</span>
+        <div className="w-full flex-col items-center pl-1 col-span-2">
+          <span>Portfolio Budget:<br /></span>
+          <span className="text-xs pt-1 text-gray-500">Total Budget across ALL Properties. We aim to make sure works stay within this budget.</span>
         </div>
         <div className="flex-grow col-span-2">
           <Input
@@ -394,10 +396,12 @@ export default function PortfolioSettings({
             Update
           </Button>
         </div>
+        <div className="border-b-4 col-span-3 rounded-full"></div>
   
         {/* Row 3: Goal */}
-        <div className="w-full flex items-center pl-1 col-span-2">
-          <span>Goal:</span>
+        <div className="w-full flex-col items-center pl-1 col-span-2">
+          <span>Goal:<br /></span>
+          <span className="text-xs pt-1 text-gray-500">Adjust the overall aim of the works conducted on this portfolio.</span>
         </div>
         <div className="w-full flex-grow col-span-2">
           <SettingsDropdown
@@ -412,12 +416,15 @@ export default function PortfolioSettings({
             Update
           </Button>
         </div>
+        <div className="border-b-4 col-span-3 rounded-full"></div>
   
         {/* Row 4: Status */}
-        <div className="w-full flex items-center pl-1 col-span-2">
-          <span>Status:</span>
+        
+        <div className="w-full flex-col items-center pl-1 col-span-2">
+          <span>Status:<br /></span>
+          <span className="text-xs pt-1 text-gray-500">Adjust where the portfolio stands in the works pipeline.</span>
         </div>
-        <div className="w-full flex-grow col-span-2">
+        <div className="col-span-2">
           <SettingsDropdown
             className="w-full"
             startingValue={portfolioStatus}
@@ -430,16 +437,16 @@ export default function PortfolioSettings({
             Update
           </Button>
         </div>
-  
+        <div className="border-b-4 col-span-3 rounded-full"></div> 
+        
         {/* Row 5: Delete */}
-        <div className="flex items-center col-span-2"></div>
-        <div className="flex items-center justify-center col-span-2">
-          <Button
-            className="bg-red-700"
-            onClick={handleOpenDeleteModal}
-          >
-            Delete Portfolio
-          </Button>
+        <div className="mx-auto text-center p-4 col-span-3 border-solid border-2 rounded-md border-red-700">
+          <div className="flex items-center justify-center col-span-3 pb-3">DANGER ZONE - Permanently Delete the Entire Portfolio</div>
+            <div className="flex items-center justify-center col-span-3">
+              <Button className="bg-red-700" onClick={handleOpenDeleteModal}>
+              Delete Portfolio
+              </Button>
+            </div>
         </div>
       </div>