Merge pull request #1302 from lpsinger/size-meatball

Set width and height of NASA meatball logo

app/components/Footer.tsx

@@ -23,7 +23,7 @@ import {
 } from '@trussworks/react-uswds'
 import type { ReactNode } from 'react'
 
-import logo from '~/img/logo.svg'
+import { Meatball } from './meatball/Meatball'
 
 function ContactLink({
   children,
@@ -88,11 +88,7 @@ export function Footer() {
       <IdentifierMasthead aria-label="Agency identifier">
         <IdentifierLogos>
           <IdentifierLogo href="https://www.nasa.gov">
-            <img
-              src={logo}
-              className="usa-identifier__logo-img"
-              alt="NASA logo"
-            />
+            <Meatball className="usa-identifier__logo-img width-auto" />
           </IdentifierLogo>
         </IdentifierLogos>
         <IdentifierIdentity domain="gcn.nasa.gov">

app/components/Header.tsx

@@ -15,10 +15,9 @@ import {
 } from '@trussworks/react-uswds'
 import { useState } from 'react'
 
+import { Meatball } from './meatball/Meatball'
 import { useEmail, useUserIdp } from '~/root'
 
-import logo from '~/img/logo.svg'
-
 /**
  * A variation on the NavDropDownButton component from @trussworks/react-uswds
  * that acts as a simple hyperlink if JavaScript is disabled or if the page
@@ -93,7 +92,7 @@ export function Header() {
           <div className="usa-navbar">
             <Title>
               <Link to="/">
-                <img id="site-logo" src={logo} alt="NASA logo" />
+                <Meatball id="site-logo" className="width-auto" />
                 <span id="site-title">General Coordinates Network</span>
               </Link>
             </Title>

app/components/meatball/Meatball.tsx

@@ -0,0 +1,16 @@
+/*!
+ * Copyright © 2023 United States Government as represented by the
+ * Administrator of the National Aeronautics and Space Administration.
+ * All Rights Reserved.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import logo from './logo.svg'
+
+export function Meatball(
+  props: Omit<JSX.IntrinsicElements['img'], 'src' | 'alt' | 'width' | 'height'>
+) {
+  return (
+    <img {...props} src={logo} alt="NASA logo" width={311.62} height={257.99} />
+  )
+}

app/root.tsx

@@ -114,10 +114,6 @@ export const links: LinksFunction = () => [
     rel: 'stylesheet',
     href: themeStyle,
   },
-  {
-    rel: 'stylesheet',
-    href: highlightStyle,
-  },
   ...(cssBundleHref ? [{ rel: 'stylesheet', href: cssBundleHref }] : []),
   ...Object.entries(favicons).map(([size, href]) => ({
     rel: 'icon',
@@ -249,6 +245,8 @@ function Document({ children }: { children?: React.ReactNode }) {
         <ScrollRestoration />
         <Scripts />
         <LiveReload />
+        {/* Deferred stylesheets (non render blocking) */}
+        <link rel="stylesheet" href={highlightStyle} />
       </body>
     </html>
   )