Refactor HTML5Badge

let's de-dupe that stuff, baby!

src/app/ItemPage.js

@@ -891,25 +891,12 @@ 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!"
-      >
-        <Flex
-          align="center"
-          border="1px solid"
+      <HTML5BadgeLayout
         backgroundColor={greenBackground}
         borderColor={greenBorderColor}
         color={greenTextColor}
-          borderRadius="md"
-          boxShadow="md"
-          paddingX="2"
-          paddingY="1"
-          transition="all 0.2s"
         aria-label="HTML5 supported!"
+        tooltipLabel="This item is converted to HTML5, and ready to use on Neopets.com!"
       >
         <CheckCircleIcon fontSize="xs" />
         <Icon
@@ -924,17 +911,16 @@ function HTML5Badge({ usesHTML5 }) {
             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>
+      </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
@@ -942,19 +928,6 @@ function HTML5Badge({ usesHTML5 }) {
             animated!
           </>
         }
-      >
-        <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">
@@ -971,10 +944,34 @@ function HTML5Badge({ usesHTML5 }) {
             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 }) {