From 0cf20770ca365fa2cc81ce0a88dbd7068474c07b Mon Sep 17 00:00:00 2001
From: Dennis Chen <41879777+chennisden@users.noreply.github.com>
Date: Wed, 7 Aug 2024 13:13:22 -0700
Subject: [PATCH] Add Images/STLs labels even when no images/STLs (#271)

Improves UI by making it clearer which upload does what, even when there
are no images/STLs uploaded yet.
---
 frontend/src/components/listing/ListingImages.tsx | 6 +++++-
 frontend/src/components/listing/ListingSTLs.tsx   | 6 +++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/listing/ListingImages.tsx b/frontend/src/components/listing/ListingImages.tsx
index 0858c682..558eb7e0 100644
--- a/frontend/src/components/listing/ListingImages.tsx
+++ b/frontend/src/components/listing/ListingImages.tsx
@@ -48,7 +48,7 @@ const ListingImages = (props: Props) => {
 
   return images.length > 0 || edit ? (
     <div className="flex flex-col items-center justify-center my-4 p-4 relative">
-      {images.length > 0 && (
+      {images.length > 0 ? (
         <>
           <Button
             onClick={() => setCollapsed(!collapsed)}
@@ -89,6 +89,10 @@ const ListingImages = (props: Props) => {
             </div>
           )}
         </>
+      ) : (
+        <p>
+          <strong>Images</strong>
+        </p>
       )}
       {edit && (
         <ListingFileUpload
diff --git a/frontend/src/components/listing/ListingSTLs.tsx b/frontend/src/components/listing/ListingSTLs.tsx
index 728e3325..30f6bdba 100644
--- a/frontend/src/components/listing/ListingSTLs.tsx
+++ b/frontend/src/components/listing/ListingSTLs.tsx
@@ -77,7 +77,7 @@ const ListingSTLs = (props: Props) => {
 
   return stls.length > 0 || edit ? (
     <div className="flex flex-col items-center justify-center my-4 p-4 relative">
-      {stls.length > 0 && (
+      {stls.length > 0 ? (
         <>
           <Button
             onClick={() => setCollapsed(!collapsed)}
@@ -114,6 +114,10 @@ const ListingSTLs = (props: Props) => {
             </div>
           )}
         </>
+      ) : (
+        <p>
+          <strong>STLs</strong>
+        </p>
       )}
       {edit && (
         <ListingFileUpload