[Unticketed] Fix alignment for header, update logo loading, fix logo …

…for opp pages (#3593)

frontend/src/components/Footer.tsx

@@ -1,4 +1,4 @@
-import GrantsLogo from "public/img/grants-logo.png";
+import GrantsLogo from "public/img/grants-logo.svg";
 import { ExternalRoutes } from "src/constants/routes";
 
 import { useTranslations } from "next-intl";
@@ -83,14 +83,13 @@ const Footer = () => {
         <GridContainer>
           <Grid row gap>
             <Grid tablet={{ col: 4 }}>
-              <div className="footer-logo-container">
+              <div className="footer-logo-container position-relative dekstop:height-5">
                 <Image
-                  className="height-auto"
+                  className="height-auto position-relative"
                   alt={t("logo_alt")}
-                  src={GrantsLogo}
-                  height={214}
-                  width={1075}
-                  priority={false}
+                  src={GrantsLogo as string}
+                  unoptimized
+                  fill
                 />
               </div>
             </Grid>

frontend/src/components/Header.tsx

@@ -1,10 +1,11 @@
 "use client";
 
 import clsx from "clsx";
+import GrantsLogo from "public/img/grants-logo.svg";
 import { useFeatureFlags } from "src/hooks/useFeatureFlags";
-import { assetPath } from "src/utils/assetPath";
 
 import { useTranslations } from "next-intl";
+import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useCallback, useEffect, useMemo, useState } from "react";
@@ -29,8 +30,6 @@ type Props = {
 
 const homeRegexp = /^\/(?:e[ns])?$/;
 
-const logoPath = "./img/grants-logo.svg";
-
 const NavLinks = ({
   mobileExpanded,
   onToggleMobileNav,
@@ -168,18 +167,19 @@ const Header = ({ locale }: Props) => {
         basic={true}
         className="desktop:position-sticky top-0 desktop:z-500 bg-white border-bottom-2px border-primary-vivid"
       >
-        <div className="usa-nav-container display-flex flex-align-end">
+        <div className="usa-nav-container display-flex flex-justify">
           <div className="usa-navbar border-bottom-0">
             <Title className="margin-y-2">
               <div className="display-flex flex-align-center">
-                <Link href="/" className="display-block">
-                  {logoPath && (
-                    <img
-                      src={assetPath(logoPath)}
-                      alt={t("title")}
-                      className="display-block height-4  desktop:height-auto"
-                    />
-                  )}
+                <Link href="/" className="position-relative">
+                  <Image
+                    alt={t("title")}
+                    src={GrantsLogo as string}
+                    className="height-4 display-block position-relative desktop:height-auto"
+                    unoptimized
+                    priority
+                    fill
+                  />
                 </Link>
               </div>
             </Title>