From 1a2bfca9af3131c18b13824c7907576c94d32d91 Mon Sep 17 00:00:00 2001
From: Khalim Conn-Kowlessar <kconnkowlessar@gmail.com>
Date: Wed, 29 Nov 2023 10:20:35 +0000
Subject: [PATCH] updating fonts and styling

---
 src/app/components/StatusBadge.tsx            |  4 +-
 src/app/portfolio/[slug]/(portfolio)/page.tsx | 49 +++++++++----------
 .../components/propertyTableColumns.tsx       | 41 ++++++++++++++--
 tailwind.config.js                            |  7 +++
 4 files changed, 69 insertions(+), 32 deletions(-)

diff --git a/src/app/components/StatusBadge.tsx b/src/app/components/StatusBadge.tsx
index db0f4de8..ec66279d 100644
--- a/src/app/components/StatusBadge.tsx
+++ b/src/app/components/StatusBadge.tsx
@@ -55,8 +55,8 @@ const statusColor: {
     propertyHoverText: "This property is currently in scoping",
   },
   assessment: {
-    class: "bg-emerald-500 hover:bg-emerald-500",
-    text: "assessment",
+    class: "bg-emerald-400 hover:bg-emerald-500",
+    text: "Non-invasive Assessment",
     hoverText: "This portfolio is currently in the assessment stage",
     propertyHoverText: "This property is currently in the assessment stage",
   },
diff --git a/src/app/portfolio/[slug]/(portfolio)/page.tsx b/src/app/portfolio/[slug]/(portfolio)/page.tsx
index 77305a2a..c131ab79 100644
--- a/src/app/portfolio/[slug]/(portfolio)/page.tsx
+++ b/src/app/portfolio/[slug]/(portfolio)/page.tsx
@@ -133,85 +133,80 @@ function SummaryBox({
         Portfolio Summary
       </h2>
       <div className="grid grid-cols-1 md:grid-cols-1 gap-6">
-        <div className="p-4 bg-gray-50 rounded-lg">
-          <h3 className="text-lg font-semibold text-gray-700 mb-2">
+        <div className="p-4 bg-brandblue rounded-lg">
+          <h3 className="text-lg font-semibold text-gray-200 mb-2">
             Work Package
           </h3>
           <table className="w-full">
             <tbody>
               <tr>
-                <td className="text-gray-700 ">Total Budget</td>
-                <td className="text-gray-600 text-end">{budgetFormatted}</td>
+                <td className="text-gray-200 ">Total Budget</td>
+                <td className="text-gray-200 text-end">{budgetFormatted}</td>
               </tr>
               <tr>
-                <td className="text-gray-700 ">Total Cost</td>
-                <td className="text-gray-600 text-end">{totalCostFormatted}</td>
+                <td className="text-gray-200 ">Total Cost</td>
+                <td className="text-gray-200 text-end">{totalCostFormatted}</td>
               </tr>
 
-              {/* <tr>
-                <td className="text-gray-700 ">Annual rental yield Increase</td>
-                <td className="text-gray-600 text-end">{"-"}</td>
-              </tr> */}
-
               <tr>
-                <td className="text-gray-700">Estimated Duration</td>
-                <td className="text-gray-600 text-end">
+                <td className="text-gray-200">Estimated Duration</td>
+                <td className="text-gray-200 text-end">
                   {estimatedDurationFormatted}
                 </td>
               </tr>
 
               <tr>
-                <td className="text-gray-700">Total properties</td>
-                <td className="text-gray-600 text-end">{numProperties}</td>
+                <td className="text-gray-200">Total properties</td>
+                <td className="text-gray-200 text-end">{numProperties}</td>
               </tr>
             </tbody>
           </table>
         </div>
-        <div className="p-4 bg-gray-50 rounded-lg">
+        <div className="p-4 bg-brandblue rounded-lg">
           {/* Environmental Impact */}
-          <h3 className="text-lg font-semibold text-gray-700 mb-2">
+          <h3 className="text-lg font-semibold text-gray-200 mb-2">
             Environmental Impact
           </h3>
           <table className="w-full">
             <tbody>
               <tr>
-                <td className="text-gray-700">
+                <td className="text-gray-200">
                   Annual{" "}
                   <span>
                     CO<sub>2</sub>
                   </span>{" "}
                   Savings
                 </td>
-                <td className="text-gray-600 text-end">
+                <td className="text-gray-200 text-end">
                   {co2EquivalentSavingsFormatted}
                 </td>
               </tr>
               <tr>
-                <td className="text-gray-700">Annual Energy Savings</td>
-                <td className="text-gray-600 text-end">
+                <td className="text-gray-200">Annual Energy Savings</td>
+                <td className="text-gray-200 text-end">
                   {energySavingsFormatted}
                 </td>
               </tr>
             </tbody>
           </table>
         </div>
-        <div className="p-4 bg-gray-50 rounded-lg">
+        <div className="p-4 bg-brandblue rounded-lg">
           {/* Financial Impact table */}
-          <h3 className="text-lg font-semibold text-gray-700 mb-2">
+          <h3 className="text-lg font-semibold text-gray-200 mb-2">
             Financial Impact
           </h3>
           <table className="w-full">
             <tbody>
               <tr>
-                <td className="text-gray-700 ">Annual Energy Bill Reduction</td>
-                <td className="text-gray-600 text-end">
+                <td className="text-gray-200 ">Annual Energy Bill Reduction</td>
+                <td className="text-gray-200 text-end">
                   {energyCostSavingsFormatted}
                 </td>
               </tr>
 
               <tr>
-                <td className="text-gray-700 ">Total Value Increase</td>
-                <td className="text-gray-600 text-end">
+                <td className="text-gray-200 ">Total Value Increase</td>
+                <td className="text-gray-200 text-end">
                   {totalValueIncreaseFormatted}
                 </td>
               </tr>
diff --git a/src/app/portfolio/[slug]/components/propertyTableColumns.tsx b/src/app/portfolio/[slug]/components/propertyTableColumns.tsx
index 732f1b62..08136f87 100644
--- a/src/app/portfolio/[slug]/components/propertyTableColumns.tsx
+++ b/src/app/portfolio/[slug]/components/propertyTableColumns.tsx
@@ -28,6 +28,39 @@ interface DataTableColumnHeaderProps<TData, TValue>
   title: string;
 }
 
+const EpcLetterBubble = ({ letter }: { letter: string }) => {
+  const getColorClass = (letter: string) => {
+    switch (letter.toUpperCase()) {
+      case "A":
+        return "bg-epc_a";
+      case "B":
+        return "bg-epc_b";
+      case "C":
+        return "bg-epc_c";
+      case "D":
+        return "bg-epc_d";
+      case "E":
+        return "bg-epc_e";
+      case "F":
+        return "bg-epc_f";
+      case "G":
+        return "bg-epc_d";
+      default:
+        return "bg-gray-500";
+    }
+  };
+
+  return (
+    <div
+      className={`inline-flex items-center justify-center w-6 h-6 rounded-full ${getColorClass(
+        letter
+      )} text-white text-m font-bold shadow-outline-black`}
+    >
+      {letter}
+    </div>
+  );
+};
+
 export function DataTableFilterHeader<TData, TValue>({
   column,
   title,
@@ -89,7 +122,7 @@ export const columns: ColumnDef<PropertyWithRelations>[] = [
 
       return (
         <div className="flex items-center space-x-2">
-          <HomeIcon className="h-8 w-8 text-gray-200" />
+          <HomeIcon className="h-8 w-8 text-brandmidblue" />
           <div className="flex flex-col">
             <a
               href={`${portfolioId}/building-passport/${propertyId}`}
@@ -127,9 +160,11 @@ export const columns: ColumnDef<PropertyWithRelations>[] = [
     accessorKey: "currentEpc",
     header: () => <div className="flex justify-center">Current EPC Rating</div>,
     cell: ({ row }) => {
+      console.log(row.original.currentEpcRating);
+
       return (
         <div className="text-gray-700 font-medium flex justify-center">
-          {row.original.currentEpcRating || ""}
+          {<EpcLetterBubble letter={row.original.currentEpcRating || ""} />}
         </div>
       );
     },
@@ -161,7 +196,7 @@ export const columns: ColumnDef<PropertyWithRelations>[] = [
 
       return (
         <div className="text-gray-700 font-medium flex justify-center">
-          {expectedEpc || ""}
+          {<EpcLetterBubble letter={expectedEpc || ""} />}
         </div>
       );
     },
diff --git a/tailwind.config.js b/tailwind.config.js
index f70ada24..65cc116f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -23,6 +23,13 @@ module.exports = {
           "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
       },
       colors: {
+        epc_a: "#117d58",
+        epc_b: "#2da55c",
+        epc_c: "#8dbd40",
+        epc_d: "#f7cd14",
+        epc_e: "#f3a96a",
+        epc_f: "#ef8026",
+        epc_g: "#e41e3b",
         brandblue: "#14163d",
         hoverblue: "#3e4073",
         brandtan: "#d3b488",