Improve responsiveness of engage with us layout (#47)

* improve grid responsiveness * remove import * Modify text size * fix favicon 500 error
CDCgov · Nov 14, 2024 · 4a39590 · 4a39590
1 parent b3046ac
commit 4a39590
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 19 deletions.
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/app/engage-with-us/page.tsx b/src/app/engage-with-us/page.tsx
@@ -3,7 +3,6 @@ import {
   Button,
   ComboBox,
   Form,
-  Grid,
   Label,
   Textarea,
   TextInput,
@@ -19,14 +18,14 @@ export default function EngageWithUs() {
         subheader="Learn how your jurisdiction can start working with the DIBBs team."
       />
       <ContentContainer>
-        <Grid row gap={6}>
-          <Grid col={6}>
+        <div className="grid grid-cols-1 justify-items-center gap-6 lg:grid-cols-2 lg:justify-items-start">
+          <div>
             <Left />
-          </Grid>
-          <Grid col={6}>
+          </div>
+          <div>
             <Right />
-          </Grid>
-        </Grid>
+          </div>
+        </div>
       </ContentContainer>
     </div>
   );
@@ -41,9 +40,9 @@ function Left() {
       </p>
       <Form
         onSubmit={() => {}}
-        className="align-start flex min-w-[31.25rem] flex-col gap-y-2"
+        className="align-start flex flex-col gap-y-2 lg:min-w-[31.25rem]"
       >
-        <div className="max-w-[70%]">
+        <div className="lg:max-w-[70%]">
           <Label
             htmlFor="name"
             className="self-stretch text-base font-bold leading-relaxed text-[#224a58]"
@@ -54,7 +53,7 @@ function Left() {
             id="name"
             name="name"
             type="text"
-            className="max-w-[2rem]"
+            className="lg:max-w-[2rem]"
           />
           <Label
             htmlFor="email"
@@ -111,22 +110,22 @@ function Right() {
   return (
     <>
       <div id="content" className="flex flex-col gap-10 pt-4">
-        <div className="border border-dashed bg-white p-4 text-center">
-          <p className="text-center text-[1.40rem] font-bold leading-[2rem] text-black">
+        <div className="border border-dashed bg-white p-4 text-center lg:p-[1.75rem]">
+          <p className="text-center text-[1.2rem] font-bold leading-[2rem] text-black xl:text-[1.40rem]">
             All consultations with the DIBBs team are 100% free. There's no cost
             to use our products beyond costs to host within your jurisdiction
             should you choose to do so.
           </p>
         </div>
         <div>
-          <div className="ml-2 flex min-w-[35.25rem] flex-col gap-2">
-            <p className="text-[1.38rem] font-bold italic leading-[2rem] text-[#224a58]">
+          <div className="ml-2 flex flex-col gap-4 xl:min-w-[35.25rem]">
+            <p className="m-0 p-0 text-[1rem] font-bold italic leading-[2rem] text-[#224a58] xl:m-4 xl:text-[1.38rem]">
               "Our epidemiologists waste 80% of their time cleaning data and
               can't do useful analysis. The end goal of DIBBs infrastructure is
               to free up that 80% of their time to do actual public health
               work."
             </p>
-            <p className="min-w-full text-[1.38rem] font-light leading-[2rem] text-[#224a58]">
+            <p className="m-0 text-nowrap p-0 text-[1rem] font-light leading-[2rem] text-[#224a58] xl:m-4 xl:min-w-full xl:text-[1.38rem]">
               - Public Health Official, Virginia Department of Health
             </p>
           </div>

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,15 +2,11 @@ import type { Metadata } from 'next';
 import Header from './components/Header/Header';
 import Footer from './components/Footer/Footer';
 import USABanner from './components/UsaBanner/UsaBanner';
-import { basePath } from './utils/constants';
 import './globals.scss';
 import './custom-styles.css';
 
 export const metadata: Metadata = {
   title: 'DIBBS Site',
-  icons: {
-    icon: `${basePath}/app/favicon.ico`,
-  },
 };
 
 export default function RootLayout({