From c0e70b4c62cad2001b14cedfee8097a8ff0cfda5 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Mon, 15 Mar 2021 08:11:10 -0700
Subject: [PATCH] Preview + save UI for bulk-add tool

still not wired up tho!
---
 .../support/AllItemLayersSupportModal.js      | 25 +++++++++++++------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/app/WardrobePage/support/AllItemLayersSupportModal.js b/src/app/WardrobePage/support/AllItemLayersSupportModal.js
index 601cded..ea7b828 100644
--- a/src/app/WardrobePage/support/AllItemLayersSupportModal.js
+++ b/src/app/WardrobePage/support/AllItemLayersSupportModal.js
@@ -261,13 +261,24 @@ function AllItemLayersSupportModalContent({ item, bulkAddProposal }) {
   });
 
   return (
-    <Wrap justify="center" spacing="4">
-      {itemAppearances.map((itemAppearance) => (
-        <WrapItem key={itemAppearance.id}>
-          <ItemAppearanceCard item={item} itemAppearance={itemAppearance} />
-        </WrapItem>
-      ))}
-    </Wrap>
+    <Box>
+      {bulkAddProposalData && (
+        <Flex align="center" marginBottom="6">
+          <Heading size="md">Previewing bulk-add changes</Heading>
+          <Box flex="1 0 auto" width="4" />
+          <Button size="sm" colorScheme="green">
+            Save {bulkAddProposalData.layersToAdd.length} changes
+          </Button>
+        </Flex>
+      )}
+      <Wrap justify="center" spacing="4">
+        {itemAppearances.map((itemAppearance) => (
+          <WrapItem key={itemAppearance.id}>
+            <ItemAppearanceCard item={item} itemAppearance={itemAppearance} />
+          </WrapItem>
+        ))}
+      </Wrap>
+    </Box>
   );
 }