From d1ebd100b58b4d4f9f0b3702084f68d6cf6a6a97 Mon Sep 17 00:00:00 2001
From: Jason Jordan <jasonj@discoveryinsurance.com>
Date: Fri, 25 Jul 2025 10:56:20 -0400
Subject: [PATCH] some responsive changes

---
 src/components/InfoCard.tsx          |  2 +-
 src/components/LandingPage.tsx       | 22 +++++-----------
 src/pages/dashboard/member/index.tsx | 38 +++++++++++++++-------------
 3 files changed, 27 insertions(+), 35 deletions(-)

diff --git a/src/components/InfoCard.tsx b/src/components/InfoCard.tsx
index 4ad0bfc..8364b3b 100644
--- a/src/components/InfoCard.tsx
+++ b/src/components/InfoCard.tsx
@@ -47,7 +47,7 @@ const InfoCard: React.FC<InfoCardProps> = (
                     })}>
                     <div className={classnames({
                         "hidden" : !invert,
-                        "after:absolute after:bottom-0 after:right-0 after:w-full after:h-114 after:rounded-2xl after:shadow-[8px_8px_6px,2px_2px_2px_-1px] after:shadow-copper/90" : invert,
+                        "after:absolute after:bottom-0 after:right-0 after:w-full after:h-[calc(100%-(var(--spacing)*23.5))] after:rounded-2xl after:shadow-[8px_8px_6px,2px_2px_2px_-1px] after:shadow-copper/90" : invert,
                     })}/>
                     <div className={classnames("flex flex-col w-7/12")}>
                         <div className={classnames(
diff --git a/src/components/LandingPage.tsx b/src/components/LandingPage.tsx
index 00fac92..22188a9 100644
--- a/src/components/LandingPage.tsx
+++ b/src/components/LandingPage.tsx
@@ -21,23 +21,13 @@ const LandingPage: React.FC<LandingPageProps> = ({
   return (
     <div className="relative w-full">
         <div className="absolute bottom-0 left-0 flex items-end w-full h-full">
-                <div className="w-1/24 h-full flex justify-end">
-                    <div className="w-[calc(50%+6px)] flex flex-col">
-                        <div className={classnames(
-                            "relative h-full border-l-6 rounded-out-br-4xl bg-bluetang border-atmosphere"
-                        )} />
-                        {/* <div className={classnames(
-                            "h-9 rounded-bl-4xl border-b-6 border-l-6",
-                            stripeColor, `border-${underlineBorder}`
-                        )} /> */}
-                    </div>
-                </div>
-                {/* <div className="w-11/12 flex justify-start">
+            <div className="w-1/24 h-full flex justify-end">
+                <div className="w-[calc(50%+6px)] flex flex-col">
                     <div className={classnames(
-                        "w-full h-9 border-b-6 rounded-br-4xl",
-                        stripeColor, `border-${underlineBorder}`
+                        "relative h-full border-l-6 rounded-out-br-4xl bg-bluetang border-atmosphere"
                     )} />
-                </div> */}
+                </div>
+            </div>
         </div>
         <div className="w-full flex justify-start items-end pt-30">
             <div className="w-1/24 h-full flex justify-end">
@@ -68,7 +58,7 @@ const LandingPage: React.FC<LandingPageProps> = ({
                         <div className="absolute flex flex-col justify-center left-0 bottom-0 w-full h-full">
                             <div className={classnames("relative h-80 w-full rounded-r-2xl rounded-out-lt-3xl rounded-out-lb-3xl border-r-2 bg-bluetang border-atmosphere")} />
                         </div>
-                        <div className={classnames("w-3/5 flex flex-col justify-center z-2")}>
+                        <div className={classnames("w-3/5 flex flex-col justify-center text-platinum z-2")}>
                             <div className={classnames("text-4xl pb-8")}>
                                 Quick Access to Your Services
                             </div>
diff --git a/src/pages/dashboard/member/index.tsx b/src/pages/dashboard/member/index.tsx
index 5884c60..59ec355 100644
--- a/src/pages/dashboard/member/index.tsx
+++ b/src/pages/dashboard/member/index.tsx
@@ -18,11 +18,10 @@ const font = Schibsted_Grotesk({ subsets: ['latin'] })
 
 export default function Member() {
   return (
-    <div className="relative w-full h-200">
+    <div className="relative w-full h-full">
         <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-31 bg-atmosphere border-b-2 border-copper" />
-                <div className="w-21/24 h-20 border-b-2 border-copper" />
+                <div className="w-23/24 h-20 border-b-2 border-copper" />
             </div>
             <div className="w-1/24 h-full flex justify-start">
                 <div className="w-[calc(50%+6px)] flex flex-col">
@@ -33,17 +32,20 @@ export default function Member() {
             </div>
         </div>
         <div className="w-full h-full flex flex-col justify-start items-center">
-            <div className="w-21/24">
+            <div className="w-full">
                 <div className="h-20 flex justify-between items-center">
-                    <div className={classnames('-ml-[1px] z-1')}>
-                        <Image
-                            src="/images/bbstpa-forsite.png"
-                            alt="Britton Logo"
-                            width={205}
-                            height={60}
-                        />
+                    <div className={classnames('flex items-center')}>
+                        <div className="w-31 h-20 bg-atmosphere" />
+                        <div className="-ml-8.5">
+                            <Image
+                                src="/images/bbstpa-forsite.png"
+                                alt="Britton Logo"
+                                width={205}
+                                height={60}
+                            />
+                        </div>
                     </div>
-                    <div className="-mr-[55px] z-1">
+                    <div className="z-1 pr-20">
                         <AccountDropdown userRole="member" />
                     </div>
                 </div>
@@ -72,7 +74,7 @@ export default function Member() {
                         Benefits Documents
                     </a>
                 </div>
-                <div className="flex w-21/24 ml-8 pt-4">
+                <div className="flex w-21/24 2xl:w-11/12 ml-8 pt-5 2xl:pt-7">
                     <div className="w-full flex flex-col justify-start">
                         <div className={classnames(
                             "-mb-[34px] text-4xl text-left z-2 text-bluemana font-semibold text-shadow-[1px_1px_0,-1px_1px_0,-1px_-1px_0,1px_-1px_0] text-shadow-deepcove"
@@ -81,16 +83,16 @@ export default function Member() {
                         </div>
                         <div className="flex items-center">
                             <div className={classnames(
-                                "w-full h-[6px] rounded-s bg-atmosphere z-1 -mr-[20px]"
+                                "w-full h-[6px] rounded-s bg-atmosphere z-1 -mr-[26px] 2xl:-mr-[16px]"
                                 )}>
                             </div>
-                            <div className="w-1/24 h-full flex justify-end">
-                                <div className="w-[calc(50%+10px)] flex flex-col justify-start z-1 bg-deepcove">
+                            <div className="w-1/21 h-full flex justify-end 2xl:pr-7.5">
+                                <div className="w-[calc(50%+6px)] 2xl:w-[calc(100%-6px)] flex flex-col justify-start z-1 bg-deepcove">
                                     <div className={classnames(
-                                        "h-9 -mb-[3px] relative border-b-6 border-r-6 rounded-br-4xl rounded-out-bl-4xl bg-copper border-atmosphere"
+                                        "h-9 w-full -mb-[3px] relative border-b-6 border-r-6 rounded-br-4xl rounded-out-bl-4xl bg-copper border-atmosphere"
                                         )} />
                                     <div className={classnames(
-                                        "h-9 -mt-[3px] relative border-t-6 border-r-6 rounded-tr-4xl rounded-out-tl-4xl bg-copper border-atmosphere"
+                                        "h-9 w-full -mt-[3px] relative border-t-6 border-r-6 rounded-tr-4xl rounded-out-tl-4xl bg-copper border-atmosphere"
                                         )} />
                                 </div>
                             </div>