From 80c9d758f3d8b083f07190f5c7189818b7dfe957 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Thu, 17 Aug 2017 13:34:53 -0700
Subject: [PATCH] Redesign drag-over state for write data form

---
 .../data_explorer/components/WriteDataForm.js |  2 +-
 ui/src/style/components/write-data-form.scss  | 56 +++++++++++++------
 2 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/ui/src/data_explorer/components/WriteDataForm.js b/ui/src/data_explorer/components/WriteDataForm.js
index 2486fc5fe..905f38708 100644
--- a/ui/src/data_explorer/components/WriteDataForm.js
+++ b/ui/src/data_explorer/components/WriteDataForm.js
@@ -172,7 +172,7 @@ class WriteDataForm extends Component {
         </div>
         <div className="write-data-form--drag-container">
           <div className="write-data-form--drag-here">
-            Drag file here to Upload
+            <h3>Drag your file here to Upload</h3>
           </div>
         </div>
       </div>
diff --git a/ui/src/style/components/write-data-form.scss b/ui/src/style/components/write-data-form.scss
index 714ae6b22..0889a6afd 100644
--- a/ui/src/style/components/write-data-form.scss
+++ b/ui/src/style/components/write-data-form.scss
@@ -13,7 +13,6 @@ $write-data--transition: opacity 0.4s ease;
 .write-data-form {
   max-width: $write-data--max-width;
   margin: 0 auto;
-  transition: $write-data--transition;
 }
 .write-data-form--header {
   height: $chronograf-page-header-height;
@@ -112,32 +111,53 @@ input[type="file"].write-data-form--upload {
 .write-data-form--drag-container {
   transition-property: all;
   visibility: hidden;
-  width: 100%;
-  height: 100%;
+  width: calc(100% - 60px);
+  max-width: $write-data--max-width;
+  height: 90vh;
   top: 0;
-  left: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  position: absolute;
+  z-index: 3;
 }
 .write-data-form--drag-here {
   position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%,-50%);
+  top: 60px;
+  width: 100%;
+  height: calc(100% - 60px);
+  @include gradient-v($g2-kevlar,$g0-obsidian);
   transition: $write-data--transition;
-  width: 520px;
-  height: 240px;
-  border-radius: 5px;
-  text-align: center;
-  line-height: 240px;
-  font-size: 30px;
-  font-weight: 400;
+  border-radius: 0 0 4px 4px;
   opacity: 0;
-  color: $g20-white;
-  border: 2px dashed fade-out($g20-white, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-content: center;
+
+  // Dashed box
+  &:after {
+    content: '';
+    position: absolute;
+    top: 18px;
+    left: 30px;
+    right: 30px;
+    bottom: 66px;
+    border: 2px dashed $g5-pepper;
+    border-radius: 4px;
+  }
+}
+.write-data-form--drag-here h3 {
+  text-align: center;
+  color: $g12-forge;
+  margin: 0;
+  @include no-user-select();
 }
 .overlay-technology.drag-over {
-  .write-data-form {opacity: 0;}
   .write-data-form--drag-container {visibility: visible;}
-  .write-data-form--drag-here {opacity: 1;}
+  .write-data-form--drag-here {
+    opacity: 1;
+    transition: $write-data--transition;
+  }
 }
 .write-data-form--drag-graphic {
   background-image: url(assets/images/drag-drop-icon.svg);