[Issue #3216] Feature/brand rebase (#3385)

## Summary Fixes #3216 ### Time to review: __0 mins__ ## Changes proposed Merges feature/brand into main after rebasing against main to allow the merge to succeed ## Context for reviewers Reviews have already occurred as work was being brought into the feature/brand branch. --------- Co-authored-by: Andy Cochran <[email protected]> Co-authored-by: acouch <[email protected]>
HHS · Jan 6, 2025 · 42c8f34 · 42c8f34
1 parent cfbc777
commit 42c8f34
Show file tree

Hide file tree

Showing 27 changed files with 638 additions and 101 deletions.
diff --git a/frontend/public/img/android-chrome-192x192.png b/frontend/public/img/android-chrome-192x192.png
diff --git a/frontend/public/img/android-chrome-512x512.png b/frontend/public/img/android-chrome-512x512.png
diff --git a/frontend/public/img/apple-touch-icon.png b/frontend/public/img/apple-touch-icon.png
diff --git a/frontend/public/img/favicon-16x16.png b/frontend/public/img/favicon-16x16.png
diff --git a/frontend/public/img/favicon-32x32.png b/frontend/public/img/favicon-32x32.png
diff --git a/frontend/public/img/favicon.ico b/frontend/public/img/favicon.ico
diff --git a/frontend/public/img/grants-logo.png b/frontend/public/img/grants-logo.png
diff --git a/frontend/public/img/grants-logo.svg b/frontend/public/img/grants-logo.svg
diff --git a/frontend/public/img/grants-star-symbol.png b/frontend/public/img/grants-star-symbol.png
diff --git a/frontend/src/app/[locale]/page.tsx b/frontend/src/app/[locale]/page.tsx
@@ -24,7 +24,7 @@ export default function Home({ params: { locale } }: LocalizedPageProps) {
   return (
     <>
       <Hero />
-      <BetaAlert />
+      <BetaAlert containerClasses="margin-top-5" />
       <IndexGoalContent />
       <ProcessAndResearchContent />
     </>

diff --git a/frontend/src/app/[locale]/process/ProcessIntro.tsx b/frontend/src/app/[locale]/process/ProcessIntro.tsx
@@ -13,9 +13,9 @@ const ProcessIntro = () => {
         {t("intro.title")}
       </h1>
       <Grid row gap>
-        <p className="tablet-lg:font-sans-xl line-height-sans-3 usa-intro margin-top-2">
-          {t("intro.content")}
-        </p>
+        <Grid>
+          <p className="usa-intro margin-top-2">{t("intro.content")}</p>
+        </Grid>
       </Grid>
       <Grid row gap="lg" className="margin-top-2">
         {keys.map((key) => {
@@ -30,7 +30,7 @@ const ProcessIntro = () => {
               tabletLg={{ col: 4 }}
             >
               <div className="border radius-md border-base-lighter padding-x-205">
-                <h2 className="tablet-lg:font-serif-lg">{title}</h2>
+                <h2 className="tablet-lg:font-sans-lg">{title}</h2>
                 <p className="margin-top-0 font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
                   {content}
                 </p>

diff --git a/frontend/src/app/[locale]/process/page.tsx b/frontend/src/app/[locale]/process/page.tsx
@@ -26,7 +26,7 @@ export default function Process({ params: { locale } }: LocalizedPageProps) {
   setRequestLocale(locale);
   return (
     <>
-      <BetaAlert />
+      <BetaAlert containerClasses="margin-top-5" />
       <Breadcrumbs breadcrumbList={PROCESS_CRUMBS} />
       <ProcessIntro />
       <div className="padding-top-4 bg-gray-5">

diff --git a/frontend/src/app/[locale]/research/ResearchImpact.tsx b/frontend/src/app/[locale]/research/ResearchImpact.tsx
@@ -37,7 +37,7 @@ const ResearchImpact = () => {
               tabletLg={{ col: 4 }}
             >
               <div className="border radius-md border-base-lighter padding-x-205">
-                <h3 className="tablet-lg:font-serif-lg">{title}</h3>
+                <h3 className="tablet-lg:font-sans-lg">{title}</h3>
                 <p className="margin-top-0 font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
                   {content}
                 </p>

diff --git a/frontend/src/app/[locale]/research/page.tsx b/frontend/src/app/[locale]/research/page.tsx
@@ -27,7 +27,7 @@ export default function Research({ params: { locale } }: LocalizedPageProps) {
   setRequestLocale(locale);
   return (
     <>
-      <BetaAlert />
+      <BetaAlert containerClasses="margin-top-5" />
       <Breadcrumbs breadcrumbList={RESEARCH_CRUMBS} />
       <ResearchIntro />
       <ResearchMethodology />

diff --git a/frontend/src/app/[locale]/search/layout.tsx b/frontend/src/app/[locale]/search/layout.tsx
@@ -18,7 +18,7 @@ export default function SearchLayout({
   setRequestLocale(locale);
   return (
     <>
-      <BetaAlert />
+      <BetaAlert containerClasses="margin-top-5" />
       <Breadcrumbs breadcrumbList={SEARCH_CRUMBS} />
       <SearchCallToAction />
       {children}

diff --git a/frontend/src/app/[locale]/subscribe/page.tsx b/frontend/src/app/[locale]/subscribe/page.tsx
@@ -28,7 +28,7 @@ export default function Subscribe({ params: { locale } }: LocalizedPageProps) {
 
   return (
     <>
-      <BetaAlert />
+      <BetaAlert containerClasses="margin-top-5" />
       <Breadcrumbs breadcrumbList={SUBSCRIBE_CRUMBS} />
 
       <GridContainer className="padding-bottom-5 tablet:padding-top-0 desktop-lg:padding-top-0 border-bottom-2px border-base-lightest">

diff --git a/frontend/src/components/BetaAlert.tsx b/frontend/src/components/BetaAlert.tsx
@@ -1,21 +1,28 @@
 import { useTranslations } from "next-intl";
+import { GridContainer, Alert as USWDSAlert } from "@trussworks/react-uswds";
 
-import FullWidthAlert from "./FullWidthAlert";
+type Props = {
+  containerClasses?: string;
+};
 
-const BetaAlert = () => {
+const BetaAlert = ({ containerClasses }: Props) => {
   const t = useTranslations("Beta_alert");
   const alert = t.rich("alert", {
     LinkToGrants: (content) => <a href="https://www.grants.gov">{content}</a>,
   });
 
   return (
-    <div
-      data-testid="beta-alert"
-      className="desktop:position-sticky top-0 z-200"
-    >
-      <FullWidthAlert type="info" heading={t("alert_title")}>
-        {alert}
-      </FullWidthAlert>
+    <div data-testid="beta-alert" className={containerClasses}>
+      <GridContainer>
+        <USWDSAlert
+          type="warning"
+          headingLevel="h2"
+          heading={t("alert_title")}
+          noIcon
+        >
+          {alert}
+        </USWDSAlert>
+      </GridContainer>
     </div>
   );
 };