minor Provider Auth View UI improvements

src/generic-provider-views/AuthView.js

@@ -1,11 +1,13 @@
 const html = require('yo-yo')
 
 module.exports = (props) => {
-  const demoLink = props.demo ? html`<a onclick=${props.handleDemoAuth}>Proceed with Demo Account</a>` : null
+  const demoLink = props.demo ? html`<a class="UppyProvider-authBtnDemo" onclick=${props.handleDemoAuth}>Proceed with Demo Account</a>` : null
   return html`
-    <div class="UppyProvider-authenticate">
-      <h1>You need to authenticate with ${props.pluginName} before selecting files.</h1>
-      <a href=${props.link}>Authenticate</a>
+    <div class="UppyProvider-auth">
+      <h1 class="UppyProvider-authTitle">
+        Please authenticate with <span class="UppyProvider-authTitleName">${props.pluginName}</span><br> to select files
+      </h1>
+      <a class="UppyProvider-authBtn" href=${props.link} target="_blank">Authenticate</a>
       ${demoLink}
     </div>
   `

src/scss/_plugin.scss → src/scss/_provider.scss

@@ -4,7 +4,7 @@
 @import '_common.scss';
 @import 'vendor/bootstrap/bootstrap-grid';
 
-.UppyProvider-authenticate {
+.UppyProvider-auth {
   align-items: center;
   display: flex;
   flex-flow: column wrap;
@@ -12,28 +12,39 @@
   justify-content: center;
 }
 
-.UppyProvider-authenticate a {
-  background-color: transparent;
-  border: 1px solid #78BDF2;
-  border-radius: 12px;
-  color: darken(#78BDF2, 25%);
+.UppyProvider-authTitle {
   font-size: 22px;
-  margin-bottom: 88px;
-  padding: 6px 16px;
-  transition: background-color 400ms;
+  line-height: 1.35;
+  font-weight: 300;
+  margin-bottom: 30px;
+  padding: 0 15px;
+  max-width: 500px;
+  text-align: center;
+}
+
+.UppyProvider-authTitleName {
+  // color: $color-cornflower-blue;
+}
+
+.UppyProvider-authBtn {
+  // background-color: transparent;
+  // border: 1px solid $color-cornflower-blue;
+  border-radius: 6px;
+  background-color: $color-cornflower-blue;
+  color: $color-white;
+  // color: $color-cornflower-blue;
+  font-size: 20px;
+  padding: 12px 46px;
+  transition: background-color 0.3s;
+  text-decoration: none;
+  margin-bottom: 20px;
 
   &:hover {
-    background-color: darken(#78BDF2,10%);
-    color: #fff;
-    transition: background-color 400ms;
+    background-color: darken($color-cornflower-blue, 10%);
+    color: $color-white;
   }
 }
 
-.UppyProvider-authenticate h1 {
-  font-size: 24px;
-  margin-bottom: 48px;
-}
-
 .UppyProvider-breadcrumbs {
   color: #222;
   font-size: 12px;

src/scss/uppy.scss

@@ -11,6 +11,6 @@
 @import '_informer.scss';
 @import '_dashboard.scss';
 @import '_dragdrop.scss';
-@import '_plugin.scss';
+@import '_provider.scss';
 @import '_progressbar.scss';
 @import '_webcam.scss';