1 files changed, 29 insertions, 4 deletions

diff --git a/app/assets/stylesheets/components/upload_dropzone/upload_dropzone.scss b/app/assets/stylesheets/components/upload_dropzone/upload_dropzone.scss
index 2bc6eba3342..f6be241d644 100644
--- a/app/assets/stylesheets/components/upload_dropzone/upload_dropzone.scss
+++ b/app/assets/stylesheets/components/upload_dropzone/upload_dropzone.scss
@@ -1,25 +1,50 @@
+@function encodecolor($string) {
+  @if type-of($string) == 'color' {
+    $hex: str-slice(ie-hex-str($string), 4);
+    $string: unquote('#{$hex}');
+  }
+  $string: '%23' + $string;
+  @return $string;
+}
+
+@mixin dropzone-background($stroke-color, $stroke-width: 4, $stroke-linecap: 'butt') {
+  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='#{encodecolor($stroke-color)}' stroke-width='#{$stroke-width}' stroke-dasharray='6%2c4' stroke-dashoffset='0' stroke-linecap='#{encodecolor($stroke-linecap)}'/%3e%3c/svg%3e");
+}
+
 .upload-dropzone-border {
-  border: 2px dashed $gray-100;
+  border: 0;
+  @include dropzone-background($gray-400, 2, 'round');
+  border-radius: 8px;
 }
 
 .upload-dropzone-card {
-  transition: border $gl-transition-duration-medium $general-hover-transition-curve;
+  transition: background $gl-transition-duration-medium $general-hover-transition-curve,
+    border $gl-transition-duration-medium $general-hover-transition-curve;
   color: $gl-text-color;
 
+  &:hover,
   &:focus,
+  &:focus-within,
   &:active {
     outline: none;
-    border: 2px dashed $purple;
+    @include dropzone-background($blue-500);
     color: $gl-text-color;
   }
 
+  &:focus,
+  &:focus-within,
+  &:active {
+    @include gl-focus;
+  }
+
   &:hover {
     border-color: $gray-300;
   }
 }
 
 .upload-dropzone-overlay {
-  border: 2px dashed $purple;
+  background-color: $blue-50;
+  @include dropzone-background($blue-500);
   top: 0;
   left: 0;
   pointer-events: none;