From 828fb65cf461194e12760fa74af329d3d8ebc46c Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Tue, 9 Feb 2021 21:45:29 -0800
Subject: [PATCH] Refactor HTML5Badge

let's de-dupe that stuff, baby!
---
 src/app/ItemPage.js | 133 ++++++++++++++++++++++----------------------
 1 file changed, 65 insertions(+), 68 deletions(-)

diff --git a/src/app/ItemPage.js b/src/app/ItemPage.js
index b848eb0..9383200 100644
--- a/src/app/ItemPage.js
+++ b/src/app/ItemPage.js
@@ -891,50 +891,36 @@ function HTML5Badge({ usesHTML5 }) {
 
   if (usesHTML5) {
     return (
-      <Tooltip
-        shouldWrapChildren
-        textAlign="center"
-        fontSize="xs"
-        placement="bottom-start"
-        label="This item is converted to HTML5, and ready to use on Neopets.com!"
+      <HTML5BadgeLayout
+        backgroundColor={greenBackground}
+        borderColor={greenBorderColor}
+        color={greenTextColor}
+        aria-label="HTML5 supported!"
+        tooltipLabel="This item is converted to HTML5, and ready to use on Neopets.com!"
       >
-        <Flex
-          align="center"
-          border="1px solid"
-          backgroundColor={greenBackground}
-          borderColor={greenBorderColor}
-          color={greenTextColor}
-          borderRadius="md"
-          boxShadow="md"
-          paddingX="2"
-          paddingY="1"
-          transition="all 0.2s"
-          aria-label="HTML5 supported!"
+        <CheckCircleIcon fontSize="xs" />
+        <Icon
+          viewBox="0 0 36 36"
+          fontSize="xl"
+          // Visual re-balancing, there's too much visual right-padding here!
+          marginRight="-1"
         >
-          <CheckCircleIcon fontSize="xs" />
-          <Icon
-            viewBox="0 0 36 36"
-            fontSize="xl"
-            // Visual re-balancing, there's too much visual right-padding here!
-            marginRight="-1"
-          >
-            {/* From Twemoji Keycap 5 */}
-            <path
-              fill="currentColor"
-              d="M16.389 14.489c.744-.155 1.551-.31 2.326-.31 3.752 0 6.418 2.977 6.418 6.604 0 5.178-2.851 8.589-8.216 8.589-2.201 0-6.821-1.427-6.821-4.155 0-1.147.961-2.107 2.108-2.107 1.24 0 2.729 1.984 4.806 1.984 2.17 0 3.288-2.109 3.288-4.062 0-1.86-1.055-3.131-2.977-3.131-1.799 0-2.078 1.023-3.659 1.023-1.209 0-1.829-.93-1.829-1.457 0-.403.062-.713.093-1.054l.774-6.544c.341-2.418.93-2.945 2.418-2.945h7.472c1.428 0 2.264.837 2.264 1.953 0 2.14-1.611 2.326-2.17 2.326h-5.829l-.466 3.286z"
-            />
-          </Icon>
-        </Flex>
-      </Tooltip>
+          {/* From Twemoji Keycap 5 */}
+          <path
+            fill="currentColor"
+            d="M16.389 14.489c.744-.155 1.551-.31 2.326-.31 3.752 0 6.418 2.977 6.418 6.604 0 5.178-2.851 8.589-8.216 8.589-2.201 0-6.821-1.427-6.821-4.155 0-1.147.961-2.107 2.108-2.107 1.24 0 2.729 1.984 4.806 1.984 2.17 0 3.288-2.109 3.288-4.062 0-1.86-1.055-3.131-2.977-3.131-1.799 0-2.078 1.023-3.659 1.023-1.209 0-1.829-.93-1.829-1.457 0-.403.062-.713.093-1.054l.774-6.544c.341-2.418.93-2.945 2.418-2.945h7.472c1.428 0 2.264.837 2.264 1.953 0 2.14-1.611 2.326-2.17 2.326h-5.829l-.466 3.286z"
+          />
+        </Icon>
+      </HTML5BadgeLayout>
     );
   } else {
     return (
-      <Tooltip
-        shouldWrapChildren
-        textAlign="center"
-        fontSize="xs"
-        placement="bottom-start"
-        label={
+      <HTML5BadgeLayout
+        backgroundColor={yellowBackground}
+        borderColor={yellowBorderColor}
+        color={yellowTextColor}
+        aria-label="HTML5 not supported"
+        tooltipLabel={
           <>
             This item isn't converted to HTML5 yet, so it might not appear in
             Neopets.com customization yet. Once it's ready, it could look a bit
@@ -943,40 +929,51 @@ function HTML5Badge({ usesHTML5 }) {
           </>
         }
       >
-        <Flex
-          align="center"
-          border="1px solid"
-          backgroundColor={yellowBackground}
-          borderColor={yellowBorderColor}
-          color={yellowTextColor}
-          borderRadius="md"
-          boxShadow="md"
-          paddingX="2"
-          paddingY="1"
-          transition="all 0.2s"
-          aria-label="HTML5 not supported"
-        >
-          <WarningTwoIcon fontSize="xs" marginRight="1" />
-          <Icon viewBox="0 0 36 36" fontSize="xl">
-            {/* From Twemoji Keycap 5 */}
-            <path
-              fill="currentColor"
-              d="M16.389 14.489c.744-.155 1.551-.31 2.326-.31 3.752 0 6.418 2.977 6.418 6.604 0 5.178-2.851 8.589-8.216 8.589-2.201 0-6.821-1.427-6.821-4.155 0-1.147.961-2.107 2.108-2.107 1.24 0 2.729 1.984 4.806 1.984 2.17 0 3.288-2.109 3.288-4.062 0-1.86-1.055-3.131-2.977-3.131-1.799 0-2.078 1.023-3.659 1.023-1.209 0-1.829-.93-1.829-1.457 0-.403.062-.713.093-1.054l.774-6.544c.341-2.418.93-2.945 2.418-2.945h7.472c1.428 0 2.264.837 2.264 1.953 0 2.14-1.611 2.326-2.17 2.326h-5.829l-.466 3.286z"
-            />
+        <WarningTwoIcon fontSize="xs" marginRight="1" />
+        <Icon viewBox="0 0 36 36" fontSize="xl">
+          {/* From Twemoji Keycap 5 */}
+          <path
+            fill="currentColor"
+            d="M16.389 14.489c.744-.155 1.551-.31 2.326-.31 3.752 0 6.418 2.977 6.418 6.604 0 5.178-2.851 8.589-8.216 8.589-2.201 0-6.821-1.427-6.821-4.155 0-1.147.961-2.107 2.108-2.107 1.24 0 2.729 1.984 4.806 1.984 2.17 0 3.288-2.109 3.288-4.062 0-1.86-1.055-3.131-2.977-3.131-1.799 0-2.078 1.023-3.659 1.023-1.209 0-1.829-.93-1.829-1.457 0-.403.062-.713.093-1.054l.774-6.544c.341-2.418.93-2.945 2.418-2.945h7.472c1.428 0 2.264.837 2.264 1.953 0 2.14-1.611 2.326-2.17 2.326h-5.829l-.466 3.286z"
+          />
 
-            {/* From Twemoji Not Allowed */}
-            <path
-              fill="#DD2E44"
-              opacity="0.75"
-              d="M18 0C8.059 0 0 8.059 0 18s8.059 18 18 18 18-8.059 18-18S27.941 0 18 0zm13 18c0 2.565-.753 4.95-2.035 6.965L11.036 7.036C13.05 5.753 15.435 5 18 5c7.18 0 13 5.821 13 13zM5 18c0-2.565.753-4.95 2.036-6.964l17.929 17.929C22.95 30.247 20.565 31 18 31c-7.179 0-13-5.82-13-13z"
-            />
-          </Icon>
-        </Flex>
-      </Tooltip>
+          {/* From Twemoji Not Allowed */}
+          <path
+            fill="#DD2E44"
+            opacity="0.75"
+            d="M18 0C8.059 0 0 8.059 0 18s8.059 18 18 18 18-8.059 18-18S27.941 0 18 0zm13 18c0 2.565-.753 4.95-2.035 6.965L11.036 7.036C13.05 5.753 15.435 5 18 5c7.18 0 13 5.821 13 13zM5 18c0-2.565.753-4.95 2.036-6.964l17.929 17.929C22.95 30.247 20.565 31 18 31c-7.179 0-13-5.82-13-13z"
+          />
+        </Icon>
+      </HTML5BadgeLayout>
     );
   }
 }
 
+function HTML5BadgeLayout({ children, tooltipLabel, ...props }) {
+  return (
+    <Tooltip
+      shouldWrapChildren
+      textAlign="center"
+      fontSize="xs"
+      placement="bottom-start"
+      label={tooltipLabel}
+    >
+      <Flex
+        align="center"
+        border="1px solid"
+        borderRadius="md"
+        boxShadow="md"
+        paddingX="2"
+        paddingY="1"
+        transition="all 0.2s"
+        {...props}
+      >
+        {children}
+      </Flex>
+    </Tooltip>
+  );
+}
+
 function PlayPauseButton({ isPaused, onClick }) {
   return (
     <IconButton