From bebdfc259c45a86c542915069b5b41c1267eb652 Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Mon, 23 May 2022 21:40:17 -0700
Subject: [PATCH] Improved styling of the version file upload button (#492)

* Update SmartFileInput to be styled like the other file input

* Fix gallery upload layout
---
 components/ui/SmartFileInput.vue | 29 ++++++++++++++++++++++++++---
 pages/_type/_id/gallery.vue      | 30 ++++++++++++++++--------------
 pages/_type/_id/version.vue      |  3 ++-
 pages/create/project.vue         |  2 +-
 4 files changed, 45 insertions(+), 19 deletions(-)

diff --git a/components/ui/SmartFileInput.vue b/components/ui/SmartFileInput.vue
index 2e5c09d8b..6bf0f21db 100644
--- a/components/ui/SmartFileInput.vue
+++ b/components/ui/SmartFileInput.vue
@@ -1,8 +1,10 @@
 <template>
   <div class="columns">
-    <label class="iconified-button" @drop.prevent="addFile" @dragover.prevent>
-      <UploadIcon />
-      {{ prompt }}
+    <label class="button" @drop.prevent="addFile" @dragover.prevent>
+      <span>
+        <UploadIcon />
+        {{ prompt }}
+      </span>
       <input
         type="file"
         :multiple="multiple"
@@ -67,6 +69,27 @@ export default {
 <style lang="scss" scoped>
 label {
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: var(--spacing-card-sm) var(--spacing-card-md);
+  margin-bottom: var(--spacing-card-sm);
+}
+
+span {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 0.5rem;
+  border: 2px dashed var(--color-divider-dark);
+  border-radius: var(--size-rounded-control);
+  padding: var(--spacing-card-md) var(--spacing-card-lg);
+
+  svg {
+    height: 1.25rem;
+  }
 }
 
 input {
diff --git a/pages/_type/_id/gallery.vue b/pages/_type/_id/gallery.vue
index 935de3fae..ef396790d 100644
--- a/pages/_type/_id/gallery.vue
+++ b/pages/_type/_id/gallery.vue
@@ -213,19 +213,21 @@
           </div>
         </div>
         <div class="gallery-bottom">
+          <SmartFileInput
+            accept="image/png,image/jpeg,image/gif,image/webp,.png,.jpeg,.gif,.webp"
+            prompt="Choose image or drag it here"
+            @change="(files) => showPreviewImage(files, index)"
+          />
           <div class="gallery-buttons">
-            <SmartFileInput
-              accept="image/png,image/jpeg,image/gif,image/webp,.png,.jpeg,.gif,.webp"
-              prompt="Upload"
-              @change="(files) => showPreviewImage(files, index)"
-            />
-            <button
-              class="iconified-button"
-              @click="newGalleryItems.splice(index, 1)"
-            >
-              <TrashIcon />
-              Delete
-            </button>
+            <div class="delete-button-container">
+              <button
+                class="iconified-button"
+                @click="newGalleryItems.splice(index, 1)"
+              >
+                <TrashIcon />
+                Delete
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -609,11 +611,11 @@ export default {
     }
 
     .textarea-wrapper {
-      width: 14rem;
+      width: 100%;
     }
 
     input {
-      width: calc(14rem - 2rem - 4px);
+      width: calc(100% - 2rem - 4px);
       margin: 0 0 0.25rem;
     }
 
diff --git a/pages/_type/_id/version.vue b/pages/_type/_id/version.vue
index 629c115e2..af879f554 100644
--- a/pages/_type/_id/version.vue
+++ b/pages/_type/_id/version.vue
@@ -486,8 +486,9 @@
         <SmartFileInput
           v-if="mode === 'edit' || mode === 'create'"
           multiple
+          class="choose-files"
           accept=".jar,application/java-archive,.zip,application/zip,.mrpack"
-          prompt="Upload files"
+          prompt="Choose files or drag them here"
           @change="(x) => x.forEach((y) => newFiles.push(y))"
         />
       </section>
diff --git a/pages/create/project.vue b/pages/create/project.vue
index 087f487cf..c56f58a64 100644
--- a/pages/create/project.vue
+++ b/pages/create/project.vue
@@ -467,7 +467,7 @@
               class="file-input"
               multiple
               accept=".jar,application/java-archive,.zip,application/zip,.mrpack"
-              prompt="Upload files"
+              prompt="Choose files or drag them here"
               @change="
                 (x) =>
                   x.forEach((y) => versions[currentVersionIndex].files.push(y))