From d701f51c153be6540f08fbef1b249e439d3d3588 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Tue, 3 Nov 2020 20:24:56 -0800
Subject: [PATCH] move own/want badges to end of wardrobe items
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

I saw the short-near-the-front and it just frankly looked awkward? Not sure why I liked it before?

I think this medium at the end of the list is better aesthatically, though it's starting to get a bit messy with the different colors mixed around… but I think there's also a semantic argument that we're keeping the facts about the item together, and the _user-specific_ stuff separate at the end… (putting it at the front would be a good semantic argument too, but I think the NC/NP alignment is too important)
---
 src/app/WardrobePage/Item.js   |  4 ++--
 src/app/components/ItemCard.js | 14 ++++++++++----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/app/WardrobePage/Item.js b/src/app/WardrobePage/Item.js
index ab262f5..e59afc2 100644
--- a/src/app/WardrobePage/Item.js
+++ b/src/app/WardrobePage/Item.js
@@ -229,10 +229,10 @@ function ItemBadges({ item }) {
         // on the additional empty child.
         isMaybeAnimated && isSupportUser && <MaybeAnimatedBadge />
       }
-      {item.currentUserOwnsThis && <YouOwnThisBadge variant="short" />}
-      {item.currentUserWantsThis && <YouWantThisBadge variant="short" />}
       {getZoneBadges(occupiedZones, { variant: "occupies" })}
       {getZoneBadges(restrictedZones, { variant: "restricts" })}
+      {item.currentUserOwnsThis && <YouOwnThisBadge variant="medium" />}
+      {item.currentUserWantsThis && <YouWantThisBadge variant="medium" />}
     </ItemBadgeList>
   );
 }
diff --git a/src/app/components/ItemCard.js b/src/app/components/ItemCard.js
index a251345..6844bd4 100644
--- a/src/app/components/ItemCard.js
+++ b/src/app/components/ItemCard.js
@@ -248,12 +248,15 @@ export function YouOwnThisBadge({ variant = "long" }) {
       minHeight="1.5em"
     >
       <CheckIcon aria-label="Check" />
+      {variant === "medium" && <Box marginLeft="1">Own</Box>}
       {variant === "long" && <Box marginLeft="1">You own this!</Box>}
     </Badge>
   );
 
-  if (variant === "short") {
-    badge = <ItemBadgeTooltip label="You own this">{badge}</ItemBadgeTooltip>;
+  if (variant === "short" || variant === "medium") {
+    badge = (
+      <ItemBadgeTooltip label="You own this item">{badge}</ItemBadgeTooltip>
+    );
   }
 
   return badge;
@@ -268,12 +271,15 @@ export function YouWantThisBadge({ variant = "long" }) {
       minHeight="1.5em"
     >
       <StarIcon aria-label="Star" />
+      {variant === "medium" && <Box marginLeft="1">Want</Box>}
       {variant === "long" && <Box marginLeft="1">You want this!</Box>}
     </Badge>
   );
 
-  if (variant === "short") {
-    badge = <ItemBadgeTooltip label="You want this">{badge}</ItemBadgeTooltip>;
+  if (variant === "short" || variant === "medium") {
+    badge = (
+      <ItemBadgeTooltip label="You want this item">{badge}</ItemBadgeTooltip>
+    );
   }
 
   return badge;