Header+Footer: complete refactor of hover logic :)

src/components/Footer/Footer.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from "react";
-import { motion, AnimatePresence } from "framer-motion";
+import React from "react";
+import { motion } from "framer-motion";
 import { Heart } from "phosphor-react";
 
 import uArrowUpLeft from "../../assets/u-arrow-up-left.svg";
@@ -18,140 +18,104 @@ const variants = {
 };
 
 const Footer: React.FC<FooterProps> = () => {
-  const [hovered, setHovered] = useState<string | false>(false);
-  const clearHover = () => setHovered(false);
-
   return (
     <footer>
-      <div className="outro">
-        <h2>
-          Phosphor is free and open source software. If you enjoy these icons,
-          please support us with a donation.
-        </h2>
-        <button
-          className="main-button"
-          onClick={() =>
-            window.open(
-              "https://paypal.me/TobiasFried",
-              "_blank",
-              "noopener noreferrer"
-            )
-          }
-        >
-          <Heart size={24} weight="fill" />
-          Buy us a coffee
-        </button>
-        <p className="fine-print">
-          Copyright © 2020 Phosphor Icons
-          <br />
-          Designed by{" "}
-          <a className="main-link" href="https://helenazhang.com">
-            Helena Zhang
-          </a>{" "}
-          + built by{" "}
-          <a className="main-link" href="https://tobiasfried.com">
-            Tobias Fried
-          </a>{" "}
-          <span
-            role="img"
-            aria-label="Emoji of woman technologist, man technologist, and cat"
-          >
-            👩🏻‍💻👨‍💻🐈
-          </span>
-          <br />
-          This website is set in{" "}
-          <a className="main-link" href="https://manropefont.com/">
-            Manrope
-          </a>{" "}
-          by{" "}
-          <a className="main-link" href="https://gent.media/">
-            Mikhail Sharanda
-          </a>
-          .
-          <br />
-          See also:{" "}
-          <a
-            className="main-link"
-            href="https://play.google.com/store/apps/details?id=com.tobiasfried.phosphor"
-          >
-            Phosphor for Android
-          </a>
-        </p>
-        <div id="back-to-top">
+      <div className="container">
+        <div className="outro">
+          <h2>
+            Phosphor is free and open source software. If you enjoy these icons,
+            please support us with a donation.
+          </h2>
           <button
-            id="back-to-top-button"
-            aria-label="back-to-top button"
             className="main-button"
-            onClick={() => {
-              document
-                .getElementById("root")
-                ?.scrollIntoView({ behavior: "smooth", block: "start" });
-            }}
+            onClick={() =>
+              window.open(
+                "https://paypal.me/TobiasFried",
+                "_blank",
+                "noopener noreferrer"
+              )
+            }
           >
-            <img src={uArrowUpLeft} alt="" />
+            <Heart size={24} weight="fill" />
+            Buy us a coffee
           </button>
+          <p className="fine-print">
+            Copyright © 2020 Phosphor Icons
+            <br />
+            Designed by{" "}
+            <a className="main-link" href="https://helenazhang.com">
+              Helena Zhang
+            </a>{" "}
+            + built by{" "}
+            <a className="main-link" href="https://tobiasfried.com">
+              Tobias Fried
+            </a>{" "}
+            <span
+              role="img"
+              aria-label="Emoji of woman technologist, man technologist, and cat"
+            >
+              👩🏻‍💻👨‍💻🐈
+            </span>
+            <br />
+            This website is set in{" "}
+            <a className="main-link" href="https://manropefont.com/">
+              Manrope
+            </a>{" "}
+            by{" "}
+            <a className="main-link" href="https://gent.media/">
+              Mikhail Sharanda
+            </a>
+            .
+            <br />
+            See also:{" "}
+            <a
+              className="main-link"
+              href="https://play.google.com/store/apps/details?id=com.tobiasfried.phosphor"
+            >
+              Phosphor for Android
+            </a>
+          </p>
+          <div id="back-to-top">
+            <button
+              id="back-to-top-button"
+              aria-label="back-to-top button"
+              className="main-button"
+              onClick={() => {
+                document
+                  .getElementById("root")
+                  ?.scrollIntoView({ behavior: "smooth", block: "start" });
+              }}
+            >
+              <img src={uArrowUpLeft} alt="" />
+            </button>
+          </div>
+          <img id="phone" className="inspectable" src={phoneSpec} alt="" />
+          <motion.img
+            id="phone"
+            className="inspectable"
+            variants={variants}
+            initial="visible"
+            whileHover="hidden"
+            src={phone}
+            alt=""
+          />
+          <img
+            id="command"
+            className="inspectable"
+            src={commandKeySpec}
+            alt=""
+          />
+          <motion.img
+            id="command"
+            className="inspectable"
+            variants={variants}
+            initial="visible"
+            whileHover="hidden"
+            src={commandKey}
+            alt=""
+          />
+          <img id="marker-green" src={markerGreen} alt="" />
         </div>
-        <AnimatePresence>
-          {hovered === "phone" ? (
-            <motion.img
-              id="phone"
-              key="phone-spec"
-              className="inspectable"
-              initial="hidden"
-              animate="visible"
-              exit="hidden"
-              variants={variants}
-              // onHoverStart={() => setHovered("phone")}
-              onHoverEnd={clearHover}
-              src={phoneSpec}
-              alt=""
-            />
-          ) : (
-            <motion.img
-              id="phone"
-              key="phone"
-              className="inspectable"
-              initial="hidden"
-              animate="visible"
-              exit="hidden"
-              variants={variants}
-              onHoverStart={() => setHovered("phone")}
-              // onHoverEnd={clearHover}
-              src={phone}
-              alt=""
-            />
-          )}
-          {hovered === "command" ? (
-            <motion.img
-              id="command"
-              key="command-spec"
-              className="inspectable"
-              initial="hidden"
-              animate="visible"
-              exit="hidden"
-              variants={variants}
-              // onHoverStart={() => setHovered("command")}
-              onHoverEnd={clearHover}
-              src={commandKeySpec}
-              alt=""
-            />
-          ) : (
-            <motion.img
-              id="command"
-              key="command"
-              className="inspectable"
-              initial="hidden"
-              animate="visible"
-              exit="hidden"
-              variants={variants}
-              onHoverStart={() => setHovered("command")}
-              // onHoverEnd={clearHover}
-              src={commandKey}
-              alt=""
-            />
-          )}
-        </AnimatePresence>
-        <img id="marker-green" src={markerGreen} alt="" />
       </div>
     </footer>
   );