Target: modal, prettify modal open button

website/src/examples/modal/app.es6

@@ -11,5 +11,5 @@ uppy
   .use(Dummy, {target: Modal})
   .use(Present, {target: Modal})
   .use(Tus10, {endpoint: 'http://master.tus.io:8080/files/'})
-  .use(ProgressDrawer)
+  .use(ProgressDrawer, {target: Modal})
   .run()

website/src/examples/modal/index.ejs

@@ -6,7 +6,7 @@ order: 1
 ---
 
 {% blockquote %}
-Making a modal dialog great again.
+Making modal dialog great again.
 {% endblockquote %}
 
 <link rel="stylesheet" href="app.css">

website/themes/uppy/source/css/_examples.scss

@@ -9,7 +9,22 @@
   line-height: 1.4;
   width: 100%;
   min-height: 150px;
-  // overflow: hidden;
   display: none;
   padding: 10px 10px;
 }
+
+.UppyModalOpenerBtn {
+  @include reset-button;
+  padding: 10px 15px;
+  border: 1px solid $color-primary;
+  background-transition: all .3s;
+  font-size: 13px;
+  color: $color-primary;
+  cursor: pointer;
+  border-radius: 15px;
+
+  &:hover {
+    background-color: $color-primary;
+    color: $color-white;
+  }
+}

website/themes/uppy/source/css/_mixins.scss

@@ -1,11 +0,0 @@
-@mixin clearfix {
-  &:after {
-    content: '';
-    display: table;
-    clear: both;
-  }
-}
-
-@mixin zoom() {
-  transform: scale(1.05);
-}

website/themes/uppy/source/css/_utils.scss

@@ -0,0 +1,23 @@
+@mixin clearfix {
+  &:after {
+    content: '';
+    display: table;
+    clear: both;
+  }
+}
+
+@mixin zoom() {
+  transform: scale(1.05);
+}
+
+@mixin reset-button() {
+  background: none;
+  -webkit-appearance: none;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: 1;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  outline: none;
+}

website/themes/uppy/source/css/main.scss

@@ -1,5 +1,5 @@
 @import '_settings.scss';
-@import '_mixins.scss';
+@import '_utils.scss';
 @import '_grid.scss';
 @import '_syntax.scss';
 @import '_common.scss';