From 0bffaec989b558a71c8048e11f9c876ae7787be5 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Thu, 24 Jun 2021 20:05:10 -0700
Subject: [PATCH] Try moving the glitch badges to the top
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Experiment! Let's see if them being more prominent like this is helpful or annoying 😅

I think this is clunkier in the HTML5 Green Happy Path, but worth it for bringing attention in the error cases.

But I feel like we might tweak this over time!
---
 src/app/WardrobePage/OutfitControls.js | 17 +++++++++--------
 src/app/components/HTML5Badge.js       |  2 ++
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/app/WardrobePage/OutfitControls.js b/src/app/WardrobePage/OutfitControls.js
index 8f75baf..89957a3 100644
--- a/src/app/WardrobePage/OutfitControls.js
+++ b/src/app/WardrobePage/OutfitControls.js
@@ -176,19 +176,24 @@ function OutfitControls({
             <BackButton outfitState={outfitState} />
           </Box>
 
-          <Box
+          <Flex
             gridArea="play-pause"
             // HACK: Better visual centering with other controls
             paddingTop="0.3rem"
+            direction="column"
+            align="center"
           >
+            {showAnimationControls && <PlayPauseButton />}
+            <Box height="2" />
             <HStack spacing="2" align="center" justify="center">
-              {showAnimationControls && <PlayPauseButton />}
+              <OutfitHTML5Badge appearance={appearance} />
+              <OutfitKnownGlitchesBadge appearance={appearance} />
               <SettingsButton
                 onLockFocus={onLockFocus}
                 onUnlockFocus={onUnlockFocus}
               />
             </HStack>
-          </Box>
+          </Flex>
           <Stack
             gridArea="sharing"
             alignSelf="flex-end"
@@ -215,11 +220,7 @@ function OutfitControls({
                 paddingRight="3"
                 align="center"
                 justify="flex-end"
-              >
-                <OutfitHTML5Badge appearance={appearance} />
-                <Box width="2" />
-                <OutfitKnownGlitchesBadge appearance={appearance} />
-              </Flex>
+              />
               <Box flex="0 0 auto">
                 <DarkMode>
                   <SpeciesColorPicker
diff --git a/src/app/components/HTML5Badge.js b/src/app/components/HTML5Badge.js
index 19960af..1c5b214 100644
--- a/src/app/components/HTML5Badge.js
+++ b/src/app/components/HTML5Badge.js
@@ -120,6 +120,8 @@ export function GlitchBadgeLayout({
         transition="all 0.2s"
         tabIndex="0"
         _focus={{ outline: "none", boxShadow: "outline" }}
+        // For consistency between the HTML5Badge & OutfitKnownGlitchesBadge
+        minHeight="30px"
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
         onFocus={() => setIsFocused(true)}