cfpb · meissadia · Oct 29, 2024 · Sep 17, 2024 · Sep 24, 2024 · Sep 27, 2024
diff --git a/...tem-react-https-51efcb97b6-2ef0aeb545.zip → ...tem-react-https-2022b744f7-9531d5ea29.zip b/...tem-react-https-51efcb97b6-2ef0aeb545.zip → ...tem-react-https-2022b744f7-9531d5ea29.zip
@@ -34,12 +34,12 @@
   "dependencies": {
     "@hookform/resolvers": "^3.2.0",
     "@playwright/test": "^1.45.0",
-    "@tanstack/react-query": "4.29.7",
+    "@tanstack/react-query": "^4.29.7",
     "@tanstack/react-table": "^8.9.1",
     "axios": "^1.7.4",
     "byte-size": "^8.1.1",
     "classnames": "^2.3.2",
-    "design-system-react": "https://github.com/cfpb/design-system-react",
+    "design-system-react": "https://github.com/cfpb/design-system-react#918-mobile-menu",
     "immer": "^10.0.2",
     "keycloak-js": "^21.1.1",
     "less": "^4.1.3",
@@ -52,7 +52,7 @@
     "react-keycloak-js": "^1.0.3",
     "react-markdown": "^9.0.1",
     "react-oidc-context": "^3.1.0",
-    "react-router-dom": "6.11.1",
+    "react-router-dom": "^6.11.1",
     "react-scroll": "^1.8.9",
     "react-select": "^5.7.4",
     "vite-plugin-svgr": "^3.2.0",

@@ -149,7 +149,7 @@ function BasicLayout(): Promise<void> | ReactElement {
         <SkipNav />
         {/* TODO: Move this component to the DSR for other teams' use */}
         {/* See: https://github.com/cfpb/design-system-react/issues/352 */}
-        <div className='o-banner'>
+        <div className='o-banner pl-[0.9375rem] pr-[0.9375rem]'>
           <div className='wrapper wrapper__match-content'>
             <Alert
               message='This is a beta for the Small Business Lending Data Filing Platform'
@@ -290,6 +290,7 @@ export default function App(): ReactElement {
                       </InstitutionProtectedRoute>
                     </ProtectedRoute>
                   }
+                  // eslint-disable-next-line react/no-array-index-key
                   key={index}
                 />
               ))}

@@ -53,44 +53,46 @@ export default function FilingOverview(): ReactElement {
 
   return (
     <div className='mx-auto max-w-[48.125rem]'>
-      <Head title='File your small business lending data' />
-      <CrumbTrail>
-        <Link isRouterLink href='/landing'>
-          Home
-        </Link>
-      </CrumbTrail>
-      <main id='main' className='u-mt30 u-mb60'>
-        <div className='max-w-[41.875rem]'>
-          <TextIntroduction
-            heading='File your small business lending data'
-            subheading='You may use this platform to upload your small business lending application register, review the results of validation checks, certify the accuracy and completeness of the data reported, and submit your filing to the CFPB.'
-            description={
-              <Paragraph>
-                If the financial institution you are authorized to file for is
-                not listed or if you are authorized to file for additional
-                financial institutions,{' '}
-                <Links.EmailSupportStaff subject='Associated financial institutions' />
-                . For detailed filing specifications, reference the{' '}
-                <Link href='https://www.consumerfinance.gov/data-research/small-business-lending/filing-instructions-guide/2024-guide/'>
-                  filing instructions guide for small business lending data
-                </Link>
-                .
-              </Paragraph>
-            }
-          />
-        </div>
-        <DisplayErrors errors={!!associatedInstitutionsError} />
-        <div className='associated_institutions u-mt60'>
-          {associatedInstitutions?.map(({ lei, name }) => (
-            <InstitutionCard
-              key={lei}
-              lei={lei}
-              name={name}
-              filingPeriod={defaultFilingPeriod}
+      <div className=' ml-[0.9375rem] mr-[0.9375rem]'>
+        <Head title='File your small business lending data' />
+        <CrumbTrail>
+          <Link isRouterLink href='/landing'>
+            Home
+          </Link>
+        </CrumbTrail>
+        <main id='main' className='u-mt30 u-mb60'>
+          <div className='max-w-[41.875rem]'>
+            <TextIntroduction
+              heading='File your small business lending data'
+              subheading='You may use this platform to upload your small business lending application register, review the results of validation checks, certify the accuracy and completeness of the data reported, and submit your filing to the CFPB.'
+              description={
+                <Paragraph>
+                  If the financial institution you are authorized to file for is
+                  not listed or if you are authorized to file for additional
+                  financial institutions,{' '}
+                  <Links.EmailSupportStaff subject='Associated financial institutions' />
+                  . For detailed filing specifications, reference the{' '}
+                  <Link href='https://www.consumerfinance.gov/data-research/small-business-lending/filing-instructions-guide/2024-guide/'>
+                    filing instructions guide for small business lending data
+                  </Link>
+                  .
+                </Paragraph>
+              }
             />
-          ))}
-        </div>
-      </main>
+          </div>
+          <DisplayErrors errors={!!associatedInstitutionsError} />
+          <div className='associated_institutions u-mt60'>
+            {associatedInstitutions?.map(({ lei, name }) => (
+              <InstitutionCard
+                key={lei}
+                lei={lei}
+                name={name}
+                filingPeriod={defaultFilingPeriod}
+              />
+            ))}
+          </div>
+        </main>
+      </div>
     </div>
   );
 }
@@ -52,7 +52,10 @@ export default function ViewUserProfile(): JSX.Element | null {
     <Grid.Wrapper center>
       <Grid.Row>
         <Grid.Column width={8}>
-          <main id='main' className='mb-[2.813rem] mt-[1.875rem]'>
+          <main
+            id='main'
+            className='mb-[2.813rem] ml-[0.9375rem] mr-[0.9375rem] mt-[1.875rem]'
+          >
             <CrumbTrail>
               <Link href='/landing' key='home'>
                 Home

@@ -27,8 +27,16 @@ export const useHeaderAuthLinks = (): ReactElement[] => {
       <NavLink key='filing' className='nav-item a-link' to='/filing'>
         Filing
       </NavLink>,
-      <NavLink key='user-name' className='nav-item a-link' to='/profile/view'>
-        {auth.user?.profile.name ?? auth.user?.profile.email ?? 'User profile'}
+      <NavLink
+        key='user-name'
+        className='nav-item a-link profile'
+        to='/profile/view'
+      >
+        <span>
+          {auth.user?.profile.name ??
+            auth.user?.profile.email ??
+            'User profile'}
+        </span>
       </NavLink>,
       <Button label='LOG OUT' asLink onClick={onLogout} />,
     );