From 08eee3074345a98d2f15bfe7f2d611f4eb111e5a Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Tue, 25 May 2021 04:17:09 -0700
Subject: [PATCH] Lookup/petpage converter layout upgrades

Added placeholders, and improved copy styles

I tried a two-column view for desktop, but it's too busy with the long label text. This is clearer!
---
 src/app/OutfitUrlsPage.js | 40 ++++++++++++++++++++++++++-------------
 1 file changed, 27 insertions(+), 13 deletions(-)

diff --git a/src/app/OutfitUrlsPage.js b/src/app/OutfitUrlsPage.js
index a7e7cee..f5caaba 100644
--- a/src/app/OutfitUrlsPage.js
+++ b/src/app/OutfitUrlsPage.js
@@ -272,31 +272,45 @@ function BulkImageConverter() {
         <Textarea
           fontFamily="monospace"
           fontSize="xs"
+          placeholder={`<table> <!-- Example input, paste your HTML here! -->
+  <tr>
+    <td><img src="https://openneo-uploads.s3.amazonaws.com/outfits/123/456/700/preview.png"></td>
+    <td><img src="https://openneo-uploads.s3.amazonaws.com/outfits/123/456/701/preview.png"></td>
+    <td><img src="https://openneo-uploads.s3.amazonaws.com/outfits/123/456/702/preview.png"></td>
+    ...`}
           value={inputHtml}
           onChange={(e) => setInputHtml(e.target.value)}
         />
       </FormControl>
       <FormControl gridArea="output">
-        <Flex alignItems="center">
-          <FormLabel fontSize="sm">
+        <Flex alignItems="center" marginBottom="2">
+          <FormLabel fontSize="sm" margin="0">
             Then, use this new HTML for your page instead:
           </FormLabel>
-          <Box flex="1 0 0" />
-          <Button size="xs" onClick={onCopy} marginLeft="4">
-            <Grid templateAreas="the-area">
-              <Box gridArea="the-area">{hasCopied ? "Copied!" : "Copy"}</Box>
-              {/* This invisible "Copied!" enforces a min size for the button
-               * content, so that the button never changes size. */}
-              <Box gridArea="the-area" aria-hidden visibility="hidden">
-                Copied!
-              </Box>
-            </Grid>
-          </Button>
+          <Box width="2" />
+          {outputHtml && (
+            <Button size="xs" onClick={onCopy}>
+              <Grid templateAreas="the-area">
+                <Box gridArea="the-area">{hasCopied ? "Copied!" : "Copy"}</Box>
+                {/* This invisible "Copied!" enforces a min size for the button
+                 * content, so that the button never changes size. */}
+                <Box gridArea="the-area" aria-hidden visibility="hidden">
+                  Copied!
+                </Box>
+              </Grid>
+            </Button>
+          )}
         </Flex>
         <Textarea
           isReadOnly
           fontFamily="monospace"
           fontSize="xs"
+          placeholder={`<table> <!-- Example output, your new HTML will appear here! -->
+  <tr>
+    <td><img src="https://impress-outfit-images.openneo.net/outfits/123456700/v/1234/600.png"></td>
+    <td><img src="https://impress-outfit-images.openneo.net/outfits/123456701/v/5678/600.png"></td>
+    <td><img src="https://impress-outfit-images.openneo.net/outfits/123456702/v/9012/600.png"></td>
+    ...`}
           value={outputHtml}
         />
       </FormControl>