junte/assessment-model
1
0
Fork 0
mirror of https://github.com/Hestia-Homes/assessment-model.git synced 2026-06-30 12:55:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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.

Browse source
This commit is contained in:
StefanWout 2024-11-12 15:55:45 +00:00
parent ac15a4b003
commit a2b93c5c63
1 changed files with 27 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx
View file

@ -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>