From b1ca7c6babae5edf9bc52fe80f529072408282ea Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Sun, 14 Mar 2021 08:07:41 -0700
Subject: [PATCH] Tweak zone labels in support UI
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

I like making these more concise and consistent across the dropdown and the cards, I'm still not 100% sold on the design but it seems ok for now!

At first I had it in the dropdown as "Background (3)", but realized that conflicts with the usual pattern of like, saying how many items match a certain filter…
---
 .../WardrobePage/support/AllItemLayersSupportModal.js  |  4 ++--
 .../WardrobePage/support/ItemSupportAppearanceLayer.js | 10 ++++++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/app/WardrobePage/support/AllItemLayersSupportModal.js b/src/app/WardrobePage/support/AllItemLayersSupportModal.js
index cee7b69..38ce452 100644
--- a/src/app/WardrobePage/support/AllItemLayersSupportModal.js
+++ b/src/app/WardrobePage/support/AllItemLayersSupportModal.js
@@ -68,7 +68,7 @@ function AllItemLayersSupportModal({ item, isOpen, onClose }) {
 
 function BulkAddBodySpecificAssetsForm({ onSubmit }) {
   const zones = [...cachedZones].sort((a, b) =>
-    `${a.label} (${a.id})`.localeCompare(`${b.label} (${b.id})`)
+    `${a.label}-${a.id}`.localeCompare(`${b.label}-${b.id}`)
   );
 
   const [minAssetId, setMinAssetId] = React.useState(null);
@@ -144,7 +144,7 @@ function BulkAddBodySpecificAssetsForm({ onSubmit }) {
       >
         {zones.map((zone) => (
           <option key={zone.id} value={zone.id}>
-            {zone.label} ({zone.id})
+            {zone.label} (Zone {zone.id})
           </option>
         ))}
       </Select>
diff --git a/src/app/WardrobePage/support/ItemSupportAppearanceLayer.js b/src/app/WardrobePage/support/ItemSupportAppearanceLayer.js
index 1fca0f7..1d4ddfc 100644
--- a/src/app/WardrobePage/support/ItemSupportAppearanceLayer.js
+++ b/src/app/WardrobePage/support/ItemSupportAppearanceLayer.js
@@ -73,8 +73,14 @@ function ItemSupportAppearanceLayer({
               />
             </Box>
           </Box>
-          <Box fontWeight="bold">{itemLayer.zone.label}</Box>
-          <Box>Zone ID: {itemLayer.zone.id}</Box>
+          <Box>
+            <Box as="span" fontWeight="700">
+              {itemLayer.zone.label}
+            </Box>{" "}
+            <Box as="span" fontWeight="600">
+              (Zone {itemLayer.zone.id})
+            </Box>
+          </Box>
           <Box>Neopets ID: {itemLayer.remoteId}</Box>
           <Box>DTI ID: {itemLayer.id}</Box>
           <ItemLayerSupportModal