[WIP] Fix app images in Next.js

Yeah, cool, now we use the `next/image` tag, and our images are showing up again!

There's still lint errors for using bare img tags in some places, but I'm not sure I really care…

src/app/GlobalHeader.js

@@ -13,11 +13,10 @@ import { HamburgerIcon } from "@chakra-ui/icons";
 import { Link, useLocation } from "react-router-dom";
 import { useAuth0 } from "@auth0/auth0-react";
 import { ChevronLeftIcon } from "@chakra-ui/icons";
+import Image from "next/image";
 
 import useCurrentUser from "./components/useCurrentUser";
-
 import HomeLinkIcon from "./images/home-link-icon.png";
-import HomeLinkIcon2x from "./images/home-link-icon@2x.png";
 
 function GlobalHeader() {
   return (
@@ -69,16 +68,15 @@ function HomeLink(props) {
         >
           <ChevronLeftIcon />
         </Box>
-        <Box
+        <Box height="32px" borderRadius="lg" boxShadow="md" overflow="hidden">
-          as="img"
+          <Image
-          src={HomeLinkIcon}
+            src={HomeLinkIcon}
-          srcSet={`${HomeLinkIcon} 1x, ${HomeLinkIcon2x} 2x`}
+            alt=""
-          alt=""
+            width={32}
-          height="2em"
+            height={32}
-          width="2em"
+            layout="fixed"
-          borderRadius="lg"
+          />
-          boxShadow="md"
+        </Box>
-        />
         <Box
           height="2em"
           width="2em"

src/app/HomePage.js

@@ -26,6 +26,7 @@ import {
 import { ArrowForwardIcon, SearchIcon } from "@chakra-ui/icons";
 import { Link, useHistory, useLocation } from "react-router-dom";
 import { useLazyQuery, useQuery } from "@apollo/client";
+import Image from "next/image";
 
 import {
   Delay,
@@ -45,9 +46,7 @@ import SquareItemCard, {
 import WIPCallout from "./components/WIPCallout";
 
 import HomepageSplashImg from "./images/homepage-splash.png";
-import HomepageSplashImg2x from "./images/homepage-splash@2x.png";
 import FeedbackXweeImg from "./images/feedback-xwee.png";
-import FeedbackXweeImg2x from "./images/feedback-xwee@2x.png";
 
 function HomePage() {
   usePageTitle(null);
@@ -71,11 +70,12 @@ function HomePage() {
           wornItemIds={[]}
           loadingDelayMs={1500}
           placeholder={
-            <Box
+            <Image
-              as="img"
               src={HomepageSplashImg}
-              srcSet={`${HomepageSplashImg} 1x, ${HomepageSplashImg2x} 2x`}
+              width={200}
+              height={200}
               alt=""
+              layout="fixed"
             />
           }
         />
@@ -621,33 +621,19 @@ function FeedbackFormSection() {
             flex="0 0 auto"
             marginTop="4"
           >
-            <Box
+            <Image
-              as="img"
               src={FeedbackXweeImg}
-              srcSet={`${FeedbackXweeImg} 1x, ${FeedbackXweeImg2x} 2x`}
+              alt="Smiling green Xweetok"
-              height="90px"
+              width={90}
-              width="90px"
+              height={90}
+              layout="fixed"
               opacity="0.9"
-              alt=""
             />
           </Box>
           <FeedbackFormPitch />
         </Flex>
       </FeedbackFormContainer>
-      <FeedbackFormContainer
+      <FeedbackFormContainer borderColor={formBorderColor}>
-        borderColor={formBorderColor}
-        image={
-          <Box
-            as="img"
-            src={FeedbackXweeImg}
-            srcSet={`${FeedbackXweeImg} 1x, ${FeedbackXweeImg2x} 2x`}
-            height="90px"
-            width="90px"
-            opacity="0.9"
-            alt=""
-          />
-        }
-      >
         <FeedbackForm />
       </FeedbackFormContainer>
     </VStack>

src/app/WardrobePage/PosePicker.js

@@ -17,6 +17,7 @@ import {
   useToast,
 } from "@chakra-ui/react";
 import { loadable } from "../util";
+import Image from "next/image";
 
 import { petAppearanceFragment } from "../components/useOutfitAppearance";
 import getVisibleLayers from "../../shared/getVisibleLayers";
@@ -493,7 +494,7 @@ function PoseOption({
               </Box>
             ) : (
               <Flex align="center" justify="center" width="100%" height="100%">
-                <EmojiImage src={twemojiQuestion} boxSize="24px" />
+                <EmojiImage src={twemojiQuestion} boxSize={24} />
               </Flex>
             )}
           </Box>
@@ -512,8 +513,16 @@ function PoseOption({
   );
 }
 
-function EmojiImage({ src, alt, boxSize = "16px" }) {
+function EmojiImage({ src, alt, boxSize = 16 }) {
-  return <img src={src} alt={alt} width={boxSize} height={boxSize} />;
+  return (
+    <Image
+      src={src}
+      alt={alt}
+      width={boxSize}
+      height={boxSize}
+      layout="fixed"
+    />
+  );
 }
 
 function usePoses(speciesId, colorId, selectedPose) {

src/app/components/WIPCallout.js

@@ -1,10 +1,8 @@
-import React from "react";
 import { Box, Flex, Tooltip } from "@chakra-ui/react";
+import Image from "next/image";
 
 import { useCommonStyles } from "../util";
-
 import WIPXweeImg from "../images/wip-xwee.png";
-import WIPXweeImg2x from "../images/wip-xwee@2x.png";
 
 function WIPCallout({
   children,
@@ -30,14 +28,18 @@ function WIPCallout({
       fontSize={size === "sm" ? "xs" : "sm"}
     >
       <Box
-        as="img"
-        src={WIPXweeImg}
-        srcSet={`${WIPXweeImg} 1x, ${WIPXweeImg2x} 2x`}
-        alt=""
         width={size === "sm" ? "24px" : "36px"}
         height={size === "sm" ? "24px" : "36px"}
         marginRight="2"
-      />
+      >
+        <Image
+          src={WIPXweeImg}
+          alt="Curious blue Xweetok, tilted head"
+          width={size === "sm" ? 24 : 36}
+          height={size === "sm" ? 24 : 36}
+          layout="fixed"
+        />
+      </Box>
       {children || (
         <>
           <Box display={{ base: "none", md: "block" }}>

src/app/util.js

@@ -9,10 +9,10 @@ import {
 } from "@chakra-ui/react";
 import loadableLibrary from "@loadable/component";
 import * as Sentry from "@sentry/react";
+import { WarningIcon } from "@chakra-ui/icons";
+import NextImage from "next/image";
 
 import ErrorGrundoImg from "./images/error-grundo.png";
-import ErrorGrundoImg2x from "./images/error-grundo@2x.png";
-import { WarningIcon } from "@chakra-ui/icons";
 
 /**
  * Delay hides its content at first, then shows it after the given delay.
@@ -451,15 +451,20 @@ export function MajorErrorMessage({ error = null, variant = "unexpected" }) {
       >
         <Box gridArea="icon" marginTop="2">
           <Box
-            as="img"
-            src={ErrorGrundoImg}
-            srcSet={`${ErrorGrundoImg} 1x, ${ErrorGrundoImg2x} 2x`}
             borderRadius="full"
             boxShadow="md"
+            overflow="hidden"
             width="100px"
             height="100px"
-            alt=""
+          >
-          />
+            <NextImage
+              src={ErrorGrundoImg}
+              alt="Distressed Grundo programmer"
+              width={100}
+              height={100}
+              layout="fixed"
+            />
+          </Box>
         </Box>
         <Box gridArea="title" fontSize="lg" marginBottom="1">
           {variant === "unexpected" && <>Ah dang, I broke it 😖</>}