From d3f3dba8a523672e38bb214e1a8f566be11e4fce Mon Sep 17 00:00:00 2001
From: zzhhaa <zzhhaa@protonmail.com>
Date: Thu, 23 Jan 2025 12:27:18 +0000
Subject: [PATCH 1/4] feat: rename colour {tenure}-detail-color

---
 app/components/graphs/CostOverTimeWrapper.tsx | 6 +++---
 app/globals.css                               | 6 ++++--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/app/components/graphs/CostOverTimeWrapper.tsx b/app/components/graphs/CostOverTimeWrapper.tsx
index 877f58f..8b5e6e9 100644
--- a/app/components/graphs/CostOverTimeWrapper.tsx
+++ b/app/components/graphs/CostOverTimeWrapper.tsx
@@ -11,17 +11,17 @@ const TENURE_COLORS = {
     marketPurchase: {
       land: "rgb(var(--freehold-land-color-rgb))",
       house: "rgb(var(--freehold-house-color-rgb))",
-      maintenance: "rgb(var(--freehold-maintenance-color-rgb))",
+      maintenance: "rgb(var(--freehold-detail-color-rgb))",
     },
     fairholdLandPurchase: {
       land: "rgb(var(--fairhold-land-color-rgb))",
       house: "rgb(var(--fairhold-house-color-rgb))",
-      maintenance: "rgb(var(--fairhold-maintenance-color-rgb))",
+      maintenance: "rgb(var(--fairhold-detail-color-rgb))",
     },
     fairholdLandRent: {
       land: "rgb(var(--fairhold-land-color-rgb))",
       house: "rgb(var(--fairhold-house-color-rgb))",
-      maintenance: "rgb(var(--fairhold-maintenance-color-rgb))",
+      maintenance: "rgb(var(--fairhold-detail-color-rgb))",
     },
     marketRent: {
       land: "rgb(var(--private-rent-land-color-rgb))",
diff --git a/app/globals.css b/app/globals.css
index 1e00982..acba507 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -15,14 +15,16 @@
 
   --freehold-land-color-rgb: 66 75 179;
   --freehold-house-color-rgb: 131 164 255;
-  --freehold-maintenance-color-rgb: 190 201 232;
+  --freehold-detail-color-rgb: 190 201 232;
   --fairhold-land-color-rgb: 74 179 91;
   --fairhold-house-color-rgb: 159 211 166;
-  --fairhold-maintenance-color-rgb: 207 227 209;
+  --fairhold-detail-color-rgb: 207 227 209;
   --private-rent-land-color-rgb: 45 155 240;
   --private-rent-house-color-rgb: 119 188 242;
+  --private-rent-detail-color-rgb: 203 225 242;
   --social-rent-land-color-rgb: 255 97 118;
   --social-rent-house-color-rgb: 242 160 171;
+  --social-rent-detail-color-rgb: 242 196 202;
 }
 
 @layer utilities {

From 6228459f402e57cce2b3b12685ff6933cb345973 Mon Sep 17 00:00:00 2001
From: zzhhaa <zzhhaa@protonmail.com>
Date: Thu, 23 Jan 2025 12:29:02 +0000
Subject: [PATCH 2/4] feat: update TenureSelector colours and shape

---
 .../Dashboard/Cards/ResaleValue.tsx           |  1 +
 app/components/ui/TenureSelector.tsx          | 25 ++++++++++++++++---
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/app/components/Dashboard/Cards/ResaleValue.tsx b/app/components/Dashboard/Cards/ResaleValue.tsx
index 085dc99..92afb28 100644
--- a/app/components/Dashboard/Cards/ResaleValue.tsx
+++ b/app/components/Dashboard/Cards/ResaleValue.tsx
@@ -26,6 +26,7 @@ export const ResaleValue: React.FC<DashboardProps> = ({ data }) => {
             <TenureSelector 
               key={tenure} 
               isSelected={selectedTenure === tenure} 
+              tenureType="fairhold"
               onClick={() => setSelectedTenure(tenure)} 
             > 
               {`Fairhold ${tenure === 'landPurchase' ? 'Land Purchase' : 'Land Rent'}`} 
diff --git a/app/components/ui/TenureSelector.tsx b/app/components/ui/TenureSelector.tsx
index eaab5e9..1c7b9a0 100644
--- a/app/components/ui/TenureSelector.tsx
+++ b/app/components/ui/TenureSelector.tsx
@@ -6,6 +6,7 @@ interface TenureSelectorProps {
   onClick?: () => void;
   className?: string;
   children: React.ReactNode;
+  tenureType: 'marketPurchase' | 'marketRent' | 'fairhold' | 'socialRent';
 }
 
 const TenureSelector: React.FC<TenureSelectorProps> = ({
@@ -13,16 +14,32 @@ const TenureSelector: React.FC<TenureSelectorProps> = ({
   onClick,
   className,
   children,
+  tenureType
 }) => {
+  const getColors = () => {
+    if (!isSelected) return "bg-gray-100 text-gray-700 hover:bg-gray-200";
+    
+    switch (tenureType) {
+      case 'marketPurchase':
+        return "bg-[rgb(var(--freehold-detail-color-rgb))] text-[rgb(var(--freehold-land-color-rgb))]";
+      case 'marketRent':
+          return "bg-[rgb(var(--private-rent-detail-color-rgb))] text-[rgb(var(--private-rent-land-color-rgb))]";
+      case 'fairhold':
+        return "bg-[rgb(var(--fairhold-detail-color-rgb))] text-[rgb(var(--fairhold-land-color-rgb))]";
+      case 'socialRent':
+        return "bg-[rgb(var(--social-rent-detail-color-rgb))] text-[rgb(var(--social-rent-land-color-rgb))]";
+      default:
+        return "bg-gray-100 text-gray-700";
+    }
+  };
+
   return (
     <button
       onClick={onClick}
       className={cn(
-        "px-4 py-2 rounded-lg transition-colors duration-200",
+        "px-4 py-2 rounded-xl transition-colors duration-200",
         "text-sm font-medium",
-        isSelected
-          ? "bg-green-100 text-green-700" // Selected state
-          : "bg-gray-100 text-gray-700 hover:bg-gray-200", // Default state
+        getColors(),
         className
       )}
     >

From 474947fe9d741b2c451f1c2129b52bc8f6c340f4 Mon Sep 17 00:00:00 2001
From: zzhhaa <zzhhaa@protonmail.com>
Date: Thu, 23 Jan 2025 13:38:46 +0000
Subject: [PATCH 3/4] feat: update !isSelected colour

---
 app/components/ui/TenureSelector.tsx | 2 +-
 app/globals.css                      | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/components/ui/TenureSelector.tsx b/app/components/ui/TenureSelector.tsx
index 1c7b9a0..7dbfe6e 100644
--- a/app/components/ui/TenureSelector.tsx
+++ b/app/components/ui/TenureSelector.tsx
@@ -17,7 +17,7 @@ const TenureSelector: React.FC<TenureSelectorProps> = ({
   tenureType
 }) => {
   const getColors = () => {
-    if (!isSelected) return "bg-gray-100 text-gray-700 hover:bg-gray-200";
+    if (!isSelected) return "bg-[rgb(var(--button-background-rgb))] text-gray-700 hover:bg-gray-200";
     
     switch (tenureType) {
       case 'marketPurchase':
diff --git a/app/globals.css b/app/globals.css
index acba507..98e58f7 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -12,6 +12,7 @@
   --text-default-rgb: 46 46 46;
   --background-input-field-rgb: 255 255 255;
   --text-inaccessible-rgb: 171 164 164;
+  --button-background-rgb: 227 227 225;
 
   --freehold-land-color-rgb: 66 75 179;
   --freehold-house-color-rgb: 131 164 255;

From eefbbfbe59e967e4bb83b52ce785981ffa6ecea9 Mon Sep 17 00:00:00 2001
From: zzhhaa <zzhhaa@protonmail.com>
Date: Fri, 24 Jan 2025 11:02:41 +0000
Subject: [PATCH 4/4] fix: separate fairhold into two tenure types

---
 app/components/Dashboard/Cards/CostOverTime.tsx | 1 +
 app/components/Dashboard/Cards/ResaleValue.tsx  | 8 ++++----
 app/components/graphs/ResaleValueWrapper.tsx    | 4 ++--
 app/components/ui/TenureSelector.tsx            | 6 ++++--
 4 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/app/components/Dashboard/Cards/CostOverTime.tsx b/app/components/Dashboard/Cards/CostOverTime.tsx
index f24c56c..201bc62 100644
--- a/app/components/Dashboard/Cards/CostOverTime.tsx
+++ b/app/components/Dashboard/Cards/CostOverTime.tsx
@@ -29,6 +29,7 @@ export const CostOverTime: React.FC<DashboardProps> = ({ processedData }) => {
             key={tenure}
             isSelected={selectedTenure === tenure}
             onClick={() => setSelectedTenure(tenure)}
+            tenureType={tenure}
           >
             {TENURE_LABELS[tenure]}
           </TenureSelector>
diff --git a/app/components/Dashboard/Cards/ResaleValue.tsx b/app/components/Dashboard/Cards/ResaleValue.tsx
index 92afb28..f9a47f3 100644
--- a/app/components/Dashboard/Cards/ResaleValue.tsx
+++ b/app/components/Dashboard/Cards/ResaleValue.tsx
@@ -5,7 +5,7 @@ import { Drawer } from "../../ui/Drawer";
 import { Household } from "@/app/models/Household";
 import TenureSelector from "../../ui/TenureSelector";
 
-const TENURES = ['landPurchase', 'landRent'] as const;
+const TENURES = ['fairholdLandPurchase', 'fairholdLandRent'] as const;
 type Tenure = (typeof TENURES)[number];
 
 interface DashboardProps {
@@ -13,7 +13,7 @@ interface DashboardProps {
 }
 
 export const ResaleValue: React.FC<DashboardProps> = ({ data }) => {
-  const [selectedTenure, setSelectedTenure] = useState<Tenure>('landPurchase');
+  const [selectedTenure, setSelectedTenure] = useState<Tenure>('fairholdLandPurchase');
 
   return (
     <GraphCard
@@ -26,10 +26,10 @@ export const ResaleValue: React.FC<DashboardProps> = ({ data }) => {
             <TenureSelector 
               key={tenure} 
               isSelected={selectedTenure === tenure} 
-              tenureType="fairhold"
+              tenureType={tenure}
               onClick={() => setSelectedTenure(tenure)} 
             > 
-              {`Fairhold ${tenure === 'landPurchase' ? 'Land Purchase' : 'Land Rent'}`} 
+              {`Fairhold ${tenure === 'fairholdLandPurchase' ? 'Land Purchase' : 'Land Rent'}`} 
             </TenureSelector> 
           ))} 
         </div>
diff --git a/app/components/graphs/ResaleValueWrapper.tsx b/app/components/graphs/ResaleValueWrapper.tsx
index 55ca2cb..3377f77 100644
--- a/app/components/graphs/ResaleValueWrapper.tsx
+++ b/app/components/graphs/ResaleValueWrapper.tsx
@@ -6,7 +6,7 @@ import ResaleValueLineChart from "./ResaleValueLineChart";
 import type { DataPoint } from "./ResaleValueLineChart"
 
 interface ResaleValueWrapperProps {
-  tenure: 'landPurchase' | 'landRent';
+  tenure: 'fairholdLandPurchase' | 'fairholdLandRent';
   household: Household;
 }
 
@@ -22,7 +22,7 @@ const ResaleValueWrapper: React.FC<ResaleValueWrapperProps> = ({
 
       for (let i = 0; i < lifetime.length; i++ ) {
         // Fairhold land rent cannot be sold for anything, assign as 0 
-        const landValue = tenure === 'landRent' ? 0 : lifetime[i].fairholdLandPurchaseResaleValue;
+        const landValue = tenure === 'fairholdLandRent' ? 0 : lifetime[i].fairholdLandPurchaseResaleValue;
       
         chartData.push({
           year: i + 1,
diff --git a/app/components/ui/TenureSelector.tsx b/app/components/ui/TenureSelector.tsx
index 7dbfe6e..dbdd896 100644
--- a/app/components/ui/TenureSelector.tsx
+++ b/app/components/ui/TenureSelector.tsx
@@ -6,7 +6,7 @@ interface TenureSelectorProps {
   onClick?: () => void;
   className?: string;
   children: React.ReactNode;
-  tenureType: 'marketPurchase' | 'marketRent' | 'fairhold' | 'socialRent';
+  tenureType: 'marketPurchase' | 'marketRent' | 'fairholdLandPurchase' | 'fairholdLandRent' | 'socialRent';
 }
 
 const TenureSelector: React.FC<TenureSelectorProps> = ({
@@ -24,8 +24,10 @@ const TenureSelector: React.FC<TenureSelectorProps> = ({
         return "bg-[rgb(var(--freehold-detail-color-rgb))] text-[rgb(var(--freehold-land-color-rgb))]";
       case 'marketRent':
           return "bg-[rgb(var(--private-rent-detail-color-rgb))] text-[rgb(var(--private-rent-land-color-rgb))]";
-      case 'fairhold':
+      case 'fairholdLandPurchase':
         return "bg-[rgb(var(--fairhold-detail-color-rgb))] text-[rgb(var(--fairhold-land-color-rgb))]";
+      case 'fairholdLandRent':
+          return "bg-[rgb(var(--fairhold-detail-color-rgb))] text-[rgb(var(--fairhold-land-color-rgb))]";
       case 'socialRent':
         return "bg-[rgb(var(--social-rent-detail-color-rgb))] text-[rgb(var(--social-rent-land-color-rgb))]";
       default: