From 852c1cbb7c6776fa68aa59b2ce3947b899c82f38 Mon Sep 17 00:00:00 2001
From: evazion <noizave@gmail.com>
Date: Tue, 17 Sep 2019 00:28:41 -0500
Subject: [PATCH] css: clean up file upload widget css.

* Standardize the upload widget background colors (light green for success,
  light red for error).
* Move the progress bar to the bottom of the upload widget.
* Change the progress bar color to blue.
* Hide the "drag and drop a file here" message after a file has
  already been uploaded.
---
 app/javascript/src/styles/base/040_colors.css | 11 ++----
 .../src/styles/specific/dropzone.scss         | 34 +++++++++----------
 app/views/uploads/new.html.erb                |  2 +-
 3 files changed, 20 insertions(+), 27 deletions(-)

diff --git a/app/javascript/src/styles/base/040_colors.css b/app/javascript/src/styles/base/040_colors.css
index 140768aca..dab9dbe8d 100644
--- a/app/javascript/src/styles/base/040_colors.css
+++ b/app/javascript/src/styles/base/040_colors.css
@@ -41,14 +41,9 @@
   --modqueue-postive-score-background-color: var(--success-background-color);
   --modqueue-negative-score-background-color: var(--error-background-color);
 
-  --uploads-dropzone-border: 4xp dashed #DDD;
-  --uploads-dropzone-placeholder-color: #333;
-  --uploads-dropzone-error-border-color: hsl(0, 43%, 61%);
-  --uploads-dropzone-error-background-color: hsl(0, 43%, 91%);
-  --uploads-dropzone-success-border-color: hsl(103, 44%, 59%);
-  --uploads-dropzone-success-background-color: hsl(103, 44%, 89%);
-  --uploads-dropzone-progress-border: 1px solid #CCC;
-  --uploads-dropzone-progress-background-color: 1px solid #CCC;
+  --uploads-dropzone-background: #EEE;
+  --uploads-dropzone-progress-bar-foreground-color: var(--link-color);
+  --uploads-dropzone-progress-bar-background-color: var(--link-hover-color);
 
   --forum-new-topic-color: red;
   --forum-locked-topic-color: gray;
diff --git a/app/javascript/src/styles/specific/dropzone.scss b/app/javascript/src/styles/specific/dropzone.scss
index c9f237789..08dfed659 100644
--- a/app/javascript/src/styles/specific/dropzone.scss
+++ b/app/javascript/src/styles/specific/dropzone.scss
@@ -1,41 +1,39 @@
 #filedropzone {
-  border: var(--uploads-dropzone-border);
+  background: var(--uploads-dropzone-background);
   padding: 0;
   min-height: 100px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 4px;
+  cursor: pointer;
+  position: relative;
 
-  .placeholder {
-    font-style: italic;
-    color: var(--uploads-dropzone-place-holder-color);
-    height: 100%;
+  &.dz-started .placeholder {
+    display: none;
   }
 
   &.error {
-    border-color: var(--uploads-dropzone-error-border-color);
-    background-color: var(--uploads-dropzone-error-background-color);
+    background: var(--error-background-color);
   }
 
   &.success {
-    border-color: var(--uploads-dropzone-success-border-color);
-    background-color: var(--uploads-dropzone-success-background-color);
+    background: var(--success-background-color);
   }
 }
 
-.dz-preview {
-  margin-bottom: 1em;
-}
-
 .dz-progress {
-  height: 20px;
-  width: 300px;
-    background-color: var(--uploads-dropzone-progress-border);
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+  left: 0;
+  height: 5px;
+
+  background-color: var(--uploads-dropzone-progress-bar-background-color);
 
   .dz-upload {
-    background-color: var(--uploads-dropzone-progress-background-color);
+    background-color: var(--uploads-dropzone-progress-bar-foreground-color);
     display: block;
-    height: 20px;
+    height: 5px;
   }
 }
diff --git a/app/views/uploads/new.html.erb b/app/views/uploads/new.html.erb
index 7c5c0a8f6..5b9e63f8b 100644
--- a/app/views/uploads/new.html.erb
+++ b/app/views/uploads/new.html.erb
@@ -36,7 +36,7 @@
         </div>
 
         <div class="input" id="filedropzone">
-          <div class="placeholder"><span>Drag and drop a file here</span></div>
+          <div class="placeholder">Click or drag and drop to upload a file</div>
         </div>
 
         <div class="input">