From 181be7e16cf381114587f46fbbeeb978c2e2029c Mon Sep 17 00:00:00 2001
From: Jason Jordan <jasonj@discoveryinsurance.com>
Date: Mon, 4 Aug 2025 14:16:42 -0400
Subject: [PATCH] too much time on responsive, on to hooking up cms

---
 Dockerfile.dev                              |  2 +-
 package-lock.json                           | 39 ++++++++++++++++++
 src/app/(informational)/employers/index.tsx |  4 +-
 src/app/dashboard/layout.tsx                |  4 +-
 src/app/dashboard/member/indexold.tsx       | 44 ---------------------
 src/app/dashboard/member/page.tsx           |  4 +-
 src/components/DashboardPieChart.tsx        | 43 ++++++++++----------
 src/components/DeductableProgressWidget.tsx | 21 ++++++----
 src/components/DynamicIcon.tsx              |  1 -
 src/components/InsuranceCard.tsx            | 12 ++++--
 src/components/SideNav.tsx                  |  6 +--
 tailwind.config.ts                          | 17 +++++++-
 12 files changed, 109 insertions(+), 88 deletions(-)

diff --git a/Dockerfile.dev b/Dockerfile.dev
index 41abe13..595f778 100644
--- a/Dockerfile.dev
+++ b/Dockerfile.dev
@@ -8,7 +8,7 @@ WORKDIR /usr/src/app
 COPY package*.json ./
 
 # Install dependencies
-RUN npm install
+RUN npm install --legacy-peer-deps
 
 # Copy the rest of your application code
 COPY . .
diff --git a/package-lock.json b/package-lock.json
index 756e88f..ec37cc6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "britton-site",
       "version": "2.0.0",
       "dependencies": {
+        "fluid-tailwind": "^1.0.4",
         "next": "15.3.4",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
@@ -3824,6 +3825,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/filter-obj": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-5.1.0.tgz",
+      "integrity": "sha512-qWeTREPoT7I0bifpPUXtxkZJ1XJzxWtfoWWkdVGqa+eCr3SHW/Ocp89o8vLvbUuQnadybJpjOKu4V+RwO6sGng==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -3862,6 +3875,20 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/fluid-tailwind": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/fluid-tailwind/-/fluid-tailwind-1.0.4.tgz",
+      "integrity": "sha512-jO1+4l4r3kE/5We3kYRl3o4JsbFA2zoluEwJG3VrytlKuCfK4aTv5QHqXgOaw0YQd9HKjOVIFYsVvhG8sxIh5w==",
+      "license": "MIT",
+      "dependencies": {
+        "filter-obj": "^5.1.0",
+        "map-obj": "^5.0.2",
+        "picocolors": "^1.0.0"
+      },
+      "peerDependencies": {
+        "tailwindcss": "^3.2.0"
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
@@ -5079,6 +5106,18 @@
         "@jridgewell/sourcemap-codec": "^1.5.0"
       }
     },
+    "node_modules/map-obj": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-5.0.2.tgz",
+      "integrity": "sha512-K6K2NgKnTXimT3779/4KxSvobxOtMmx1LBZ3NwRxT/MDIR3Br/fQ4Q+WCX5QxjyUR8zg5+RV9Tbf2c5pAWTD2A==",
+      "license": "MIT",
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
diff --git a/src/app/(informational)/employers/index.tsx b/src/app/(informational)/employers/index.tsx
index e6912be..8d2b34f 100644
--- a/src/app/(informational)/employers/index.tsx
+++ b/src/app/(informational)/employers/index.tsx
@@ -1,5 +1,5 @@
-import LandingPage from '../../components/LandingPage';
-import InlineLink from "../../components/InlineLink";
+import LandingPage from '../../../components/LandingPage';
+import InlineLink from "../../../components/InlineLink";
 // import TextImage50 from "../../components/TextImage50-50";
 
 export default function Members() {
diff --git a/src/app/dashboard/layout.tsx b/src/app/dashboard/layout.tsx
index 014102e..602c066 100644
--- a/src/app/dashboard/layout.tsx
+++ b/src/app/dashboard/layout.tsx
@@ -21,7 +21,7 @@ export default async function DashboardLayout({ children }: { children: React.Re
         <Script src={`https://maps.googleapis.com/maps/api/js?key=${process.env.GOOGLE_PLACES_API_KEY}&libraries=places`} strategy="beforeInteractive" />
         <div className="absolute bottom-0 right-0 flex flex-col justify-end items-end w-full h-full">
             <div className="w-full -mb-[2px] flex justify-start">
-                <div className="w-23/24 h-20 border-b-2 border-copper z-2" />
+                <div className="w-[87vw] sm:w-[91vw] md:w-[93vw] lg:w-[94.5vw] xl:w-[95.5vw] h-20 border-b-2 border-copper z-2" />
             </div>
             <div className="w-[60px] h-full flex justify-start">
                 <div className="w-[32.5px] flex flex-col">
@@ -37,7 +37,7 @@ export default async function DashboardLayout({ children }: { children: React.Re
                 bgColor="bg-atmosphere"
                 navItems={pageNavItems}
             />
-            <div className="w-full min-w-[89vw] max-w-[95vw] flex flex-col items-end">
+            <div className="w-full min-w-[87vw] max-w-[94vw] lg:min-w-[89vw] lg:max-w-[95vw] flex flex-col items-end">
                 <div className="w-[90.15vw] h-20 flex justify-between items-center">
                     <div className={classnames('flex items-center')}>
                         <div className="-ml-8.5 z-2">
diff --git a/src/app/dashboard/member/indexold.tsx b/src/app/dashboard/member/indexold.tsx
index 228793a..240f819 100644
--- a/src/app/dashboard/member/indexold.tsx
+++ b/src/app/dashboard/member/indexold.tsx
@@ -51,29 +51,6 @@ export default function Member() {
                 </div>
             </div>
             <div className="w-full h-full flex justify-start">
-                {/* <div className="relative w-31 h-full flex flex-col text-deepcove text-center bg-atmosphere divide-y divide-bluetang">
-                    <a href="#" className="w-full h-20 flex justify-center items-center bg-bluetang text-platinum">
-                        Dashboard
-                    </a>
-                    <a href="#" className="w-full h-20 flex justify-center items-center hover:text-platinum">
-                        My Plan & Benefits
-                    </a>
-                    <a href="#" className="w-full h-20 flex justify-center items-center hover:text-platinum">
-                        Plan Utilization
-                    </a>
-                    <a href="#" className="w-full h-20 flex justify-center items-center hover:text-platinum">
-                        Claims & Authorizations
-                    </a>
-                    <a href="#" className="w-full h-20 flex justify-center items-center hover:text-platinum">
-                        Providers & Services
-                    </a>
-                    <a href="#" className="w-full h-20 flex justify-center items-center hover:text-platinum">
-                        Insurance Card
-                    </a>
-                    <a href="#" className="w-full h-20 flex justify-center items-center hover:text-platinum border-b border-bluetang">
-                        Benefits Documents
-                    </a>
-                </div> */}
                 <SideNav
                     maxWidth="max-w-31"
                     bgColor="bg-atmosphere"
@@ -280,27 +257,6 @@ export default function Member() {
                                         </div>
                                     </div>
                                 </div>
-                                {/* <div className="flex space-x-4">
-                                    <div className="flex flex-col justify-center items-center text-xl border border-6 border-bluetang rounded-4xl">
-                                        <div className="flex justify-between items-end px-4">
-                                            <p className={classnames("pb-18 text-[#32CD32] font-semibold", font.className)}>Paid</p>
-                                            <div className="flex flex-col items-center">
-                                                <DashboardPieChart paid={758.72} remaining={741.28} />
-                                                <p className="text-2xl">Deductable Progress</p>
-                                            </div>
-                                            <p className={classnames("pb-18 font-semibold", font.className)}>Remaining</p>
-                                        </div>
-                                    </div>
-                                    <div className="flex flex-col justify-center items-center px-4 py-3 text-xl border border-6 border-copper rounded-4xl">
-                                        <div className="text-deepcove -mb-11 z-3 font-semibold">My Card</div>
-                                        <FaRegIdCard size={150} className="text-bronze" />
-                                        <div className={classnames("w-full flex justify-evenly items-center space-x-1", font.className)}>
-                                            <div className="hover:text-bronze">View</div>
-                                            <p>|</p>
-                                            <div className="hover:text-bronze">Download</div>
-                                        </div>
-                                    </div>
-                                </div> */}
                             </div>
                             <div className="w-2/5 flex flex-col justify-start items-center px-4 py-3 text-xl border border-6 border-platinum rounded-4xl">
                                 <p className="text-3xl underline py-2">Benefits At A Glance</p>
diff --git a/src/app/dashboard/member/page.tsx b/src/app/dashboard/member/page.tsx
index 43d0a17..eb6ea40 100644
--- a/src/app/dashboard/member/page.tsx
+++ b/src/app/dashboard/member/page.tsx
@@ -14,9 +14,9 @@ export default function Member() {
             userDisplayName="Robert La'Blah"
         />
         <div className="flex w-full pr-23">
-            <div className={classnames("w-full flex flex-col xl:flex-row justify-stretch pt-4 z-2 space-x-4 space-y-4 xl:space-y-0")}>
+            <div className={classnames("w-full flex flex-col xl:flex-row pt-4 z-2 space-x-4 space-y-4 xl:space-y-0")}>
                 <div className="flex flex-col space-y-4">
-                    <div className="flex space-x-4">
+                    <div className="flex flex-col w-full h-full xl:h-auto lg:flex-row space-y-4 lg:space-y-0 lg:space-x-4">
                         <DeductableProgressWidget />
                         <InsuranceCardWidget />
                     </div>
diff --git a/src/components/DashboardPieChart.tsx b/src/components/DashboardPieChart.tsx
index e4883c9..cff9a01 100644
--- a/src/components/DashboardPieChart.tsx
+++ b/src/components/DashboardPieChart.tsx
@@ -63,27 +63,28 @@ const DashboardPieChart: React.FC<DashboardPieChartProps> = ({paid, remaining})
     { name: 'Deductable Remaining', value: remaining },
   ];
   return (
-    <div className="w-full h-full">
-      <PieChart width={250} height={140} title="Deductable Progress">
-        <Pie
-          data={data}
-          startAngle={180}
-          endAngle={0}
-          cx="50%"
-          cy="100%"
-          labelLine={false}
-          label={renderCustomizedLabel}
-          outerRadius={120}
-          fill="#2A4B6F"
-          dataKey="value"
-          stroke="#04153E"
-          strokeWidth={2}
-        >
-          {data.map((entry, index) => (
-            <Cell key={`cell-${entry.name}`} fill={COLORS[index % COLORS.length]} />
-          ))}
-        </Pie>
-      </PieChart>
+    <div className="w-full min-h-[135px]">
+      <ResponsiveContainer width="100%" height="100%">
+        <PieChart title="Deductable Progress">
+          <Pie
+            data={data}
+            startAngle={180}
+            endAngle={0}
+            cx="50%"
+            cy="100%"
+            labelLine={false}
+            label={renderCustomizedLabel}
+            fill="#2A4B6F"
+            dataKey="value"
+            stroke="#04153E"
+            strokeWidth={2}
+          >
+            {data.map((entry, index) => (
+              <Cell key={`cell-${entry.name}`} fill={COLORS[index % COLORS.length]} />
+            ))}
+          </Pie>
+        </PieChart>
+      </ResponsiveContainer>
     </div>
   );
 };
diff --git a/src/components/DeductableProgressWidget.tsx b/src/components/DeductableProgressWidget.tsx
index 8ac1c67..2e53c22 100644
--- a/src/components/DeductableProgressWidget.tsx
+++ b/src/components/DeductableProgressWidget.tsx
@@ -4,6 +4,8 @@ import React, { useState } from 'react';
 import classnames from 'classnames';
 import DashboardPieChart from '@/components/DashboardPieChart';
 
+import Button from '@/components/Button';
+
 import { Schibsted_Grotesk } from 'next/font/google'
 const font = Schibsted_Grotesk({ subsets: ['latin'] })
 
@@ -13,14 +15,19 @@ interface DeductableProgressWidgetProps {
 const DeductableProgressWidget = () => {
     
   return (
-    <div className="2xl:min-w-[32vw] xl:min-w-[30vw] min-w-[50vw] flex flex-col justify-center items-center text-xl border border-6 border-bluetang rounded-4xl z-1">
-        <div className="flex justify-between items-end px-4">
-            <p className={classnames("pb-18 text-[#32CD32] font-semibold", font.className)}>Paid</p>
-            <div className="flex flex-col items-center">
-                <DashboardPieChart paid={1007.23} remaining={492.77} />
-                <p className="text-2xl">Deductable Progress</p>
+    <div className="w-full lg:h-full flex flex-col justify-center items-center text-xl border border-6 border-bluetang rounded-4xl z-1">
+        <div className="2xl:min-w-[32vw] xl:w-[27vw] lg:w-[27vw] md:w-[27vw] flex flex-col justify-center items-center p-2">
+            <div className="text-2xl">Deductable Progress</div>
+            <DashboardPieChart paid={1007.23} remaining={492.77} />
+            <div className={classnames("w-full flex font-semibold text-center", font.className)}>
+              <div className="w-[50vw] text-[#32CD32]">Paid</div>
+              <div className="w-[50vw]">Remaining</div>
+            </div>
+            <div className={classnames("w-full flex justify-end text-platinum font-semibold text-base")}>
+              <Button className="pr-4 underline hover:text-bronze">
+                  View Details
+              </Button>
             </div>
-            <p className={classnames("pb-18 font-semibold", font.className)}>Remaining</p>
         </div>
     </div>
   );
diff --git a/src/components/DynamicIcon.tsx b/src/components/DynamicIcon.tsx
index 2ac0612..d65935b 100644
--- a/src/components/DynamicIcon.tsx
+++ b/src/components/DynamicIcon.tsx
@@ -25,7 +25,6 @@ const iconMap: iconMapType = {
 
 type DynamicIconProps = IconBaseProps & {
   iconName: string;
-  size?: number;
 };
 
 // interface DynamicIconProps {
diff --git a/src/components/InsuranceCard.tsx b/src/components/InsuranceCard.tsx
index 78c0818..eda3efe 100644
--- a/src/components/InsuranceCard.tsx
+++ b/src/components/InsuranceCard.tsx
@@ -10,10 +10,14 @@ const font = Schibsted_Grotesk({ subsets: ['latin'] })
 const InsuranceCardWidget = () => {
     
   return (
-    <div className="2xl:min-w-[16vw] xl:min-w-[15vw] flex flex-col justify-center items-center px-4 py-3 text-xl border border-6 border-atmosphere rounded-4xl z-1">
-        <div className="text-deepcove -mb-11 z-3 font-semibold">My Card</div>
-        <FaRegIdCard size={150} className="text-bluemana" />
-        <div className={classnames("w-full 2xl:min-w-[9vw] xl:min-w-[11vw] flex justify-between items-center space-x-1", font.className)}>
+    <div className="2xl:min-w-[16vw] xl:min-w-[15vw] w-full h-full flex lg:flex-col justify-center items-center text-xl space-x-10 lg:space-x-0 border border-6 border-atmosphere rounded-4xl z-1">
+        <div className="flex flex-col justify-end items-center">
+          <div className="z-3 flex items-end">
+            <div className="text-deepcove -mb-11 font-semibold">My Card</div>
+          </div>
+          <FaRegIdCard size={150} className="text-bluemana" />
+        </div>
+        <div className={classnames("flex justify-between items-center space-x-1", font.className)}>
             <Button className="hover:text-bronze">
                 View
             </Button>
diff --git a/src/components/SideNav.tsx b/src/components/SideNav.tsx
index 714d2c4..02b120d 100644
--- a/src/components/SideNav.tsx
+++ b/src/components/SideNav.tsx
@@ -34,8 +34,8 @@ const SideNav: React.FC<SideNavProps> = (
         "relative h-full flex flex-col text-deepcove text-center transition-all duration-500",
         bgColor,
         {
-            "w-[5vw]" : !isSidebarOpen,
-            "w-[11vw]" : isSidebarOpen
+            "w-[6vw] lg:w-[5vw]" : !isSidebarOpen,
+            "w-[13vw] lg:w-[11vw]" : isSidebarOpen
         }
 
     )}>
@@ -49,7 +49,7 @@ const SideNav: React.FC<SideNavProps> = (
         <div className="flex flex-col divide-y divide-bluetang">
             {navItems.map((navItem, index) => (
                 <a href={navItem.url} className={classnames(
-                    "w-full h-20 flex justify-center items-center font-semibold hover:text-platinum",
+                    "w-full h-20 flex justify-center items-center px-1 text-xs md:text-sm lg:text-base font-semibold hover:text-platinum",
                     {"bg-bluetang text-platinum" : index == 0}
                 )}>
                     {isSidebarOpen ? (
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 07590f8..6100b86 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,5 +1,20 @@
+import fluid, { extract, screens, fontSize } from 'fluid-tailwind'
+
 module.exports = {
+  // Define content paths for Tailwind CSS to scan for classes
+  content: {
+    files: [
+            './src/components/**/*.{tsx}',
+            './src/app/**/*.{tsx}',
+        ],
+    extract, // Use the extract function from fluid-tailwind
+  },
   theme: {
     extend: {},
+    screens, // Integrate fluid-tailwind's screens for responsive breakpoints
+    fontSize, // Integrate fluid-tailwind's font sizes for fluid typography
   },
-};
+  plugins: [
+    fluid, // Include the fluid-tailwind plugin
+  ],
+};
\ No newline at end of file