IFDM-92: Initital commit for Mortgage Calculator

app/interactives/inflation-impact-calculator/page.tsx

@@ -151,7 +151,7 @@ export default function InflationCalculator() {
                           Future price:
                         </div>
                         <div className="w-[50%] bg-[var(--secondary-background)] text-lg-title p-4 rounded-r-lg font-bold overflow-hidden text-ellipsis flex items-center">
-                          ${futureValue.toFixed(2)}
+                          {`$${futureValue.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`}
                         </div>
                       </div>
                     </div>

app/interactives/interest-calculator/page.tsx

@@ -63,49 +63,53 @@ const InterestRateVisual = () => {
 
           <div className="flex-1 flex gap-4">
             <button
-              className={`min-w-[150px] flex-1 py-2 px-3 text-md font-bold ${
-                mode === "saving"
-                  ? "bg-palo-verde rounded-lg border-1 border-palo-verde"
-                  : "rounded-lg border-1 border-palo-verde"
-              }`}
+              className={`
+                group
+                min-w-[150px] flex-1 py-2 px-3 text-md font-bold 
+                rounded-lg border-1 border-palo-verde 
+                hover:bg-[var(--button-green)]
+                ${mode === "saving" ? "bg-palo-verde" : ""}
+              `}
               onClick={() => setMode("saving")}
             >
               <div className="flex-1 flex gap-3 align-center justify-center">
                 <div
                   className={`text-3xl self-center ${
-                    mode === "saving" ? "text-white" : "text-palo-verde"
+                    mode === "saving" ? "text-white" : "text-palo-verde group-hover:text-white"
                   }`}
                 >
                   <FaPiggyBank />
                 </div>
                 <div
                   className={`self-center ${
-                    mode === "saving" ? "text-white" : "text-[var(--foreground)]"
+                    mode === "saving" ? "text-white" : "text-[var(--foreground)] group-hover:text-white"
                   }`}
                 >
                   Saving
                 </div>
               </div>
             </button>
             <button
-              className={` min-w-[150px] flex-1 py-2 px-3 text-md font-bold ${
-                mode === "borrowing"
-                  ? "bg-berry rounded-lg border-1 border-berry"
-                  : "rounded-lg border-1 border-berry"
-              }`}
+              className={`
+                group
+                min-w-[150px] flex-1 py-2 px-3 text-md font-bold 
+                rounded-lg border-1 border-berry 
+                hover:bg-[var(--button-berry)]
+                ${mode === "borrowing" ? "bg-berry" : ""}
+              `}
               onClick={() => setMode("borrowing")}
             >
               <div className="flex-1 flex gap-3 align-center justify-center">
                 <div
                   className={`text-3xl self-center ${
-                    mode === "borrowing" ? "text-white" : "text-berry"
+                    mode === "borrowing" ? "text-white" : "text-berry group-hover:text-white"
                   }`}
                 >
                   <FaArrowTrendDown />
                 </div>
                 <div
-                  className={` self-center ${
-                    mode === "borrowing" ? "text-white" : "text-[var(--foreground)]"
+                  className={`self-center ${
+                    mode === "borrowing" ? "text-white" : "text-[var(--foreground)] group-hover:text-white"
                   }`}
                 >
                   Borrowing