feat: add tenure selector colours and update shape

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>

app/components/Dashboard/Cards/ResaleValue.tsx

@@ -5,15 +5,15 @@ 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 {
   data: Household;
 }
 
 export const ResaleValue: React.FC<DashboardProps> = ({ data }) => {
-  const [selectedTenure, setSelectedTenure] = useState<Tenure>('landPurchase');
+  const [selectedTenure, setSelectedTenure] = useState<Tenure>('fairholdLandPurchase');
 
   return (
     <GraphCard
@@ -26,9 +26,10 @@ export const ResaleValue: React.FC<DashboardProps> = ({ data }) => {
             <TenureSelector 
               key={tenure} 
               isSelected={selectedTenure === tenure} 
+              tenureType={tenure}
               onClick={() => setSelectedTenure(tenure)} 
             > 
-              {`Fairhold ${tenure === 'landPurchase' ? 'Land Purchase' : 'Land Rent'}`} 
+              {`Fairhold ${tenure === 'fairholdLandPurchase' ? 'Land Purchase' : 'Land Rent'}`} 
             </TenureSelector> 
           ))} 
         </div>

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))",

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,

app/components/ui/TenureSelector.tsx

@@ -6,23 +6,42 @@ interface TenureSelectorProps {
   onClick?: () => void;
   className?: string;
   children: React.ReactNode;
+  tenureType: 'marketPurchase' | 'marketRent' | 'fairholdLandPurchase' | 'fairholdLandRent' | 'socialRent';
 }
 
 const TenureSelector: React.FC<TenureSelectorProps> = ({
   isSelected = false,
   onClick,
   className,
   children,
+  tenureType
 }) => {
+  const getColors = () => {
+    if (!isSelected) return "bg-[rgb(var(--button-background-rgb))] 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 '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:
+        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
       )}
     >

app/globals.css

@@ -12,17 +12,20 @@
   --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;
-  --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 {