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.
kscalelabs · Aug 7, 2024 · 0cf2077 · 0cf2077
1 parent caf3f31
commit 0cf2077
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git 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
@@ -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