Component styles and misc

src/scss/_common.scss

@@ -18,7 +18,7 @@
   box-sizing: inherit;
 }
 
-// .uppy *:focus:not(.focus-visible) {
+// .uppy-Root *:focus:not(.focus-visible) {
 //   outline: 0;
 // }
 
@@ -111,20 +111,7 @@
   height: 45px;
 }
 
-// Inputs
-
-.uppy-c-textInput {
-  border: 1px solid rgba($color-gray, 0.5);
-  border-radius: 4px;
-}
-
-  .uppy-c-textInput:focus {
-    border-color: $color-cornflower-blue;
-    outline: none;
-    box-shadow: 0 0 1px 1px rgba($color-cornflower-blue, 0.3);
-  }
-
-// Buttons
+// Utilities
 
 .uppy-u-reset {
   // @include reset-button;
@@ -138,7 +125,7 @@
   border-spacing: 0;
   bottom: auto;
   box-shadow: none;
-  box-sizing: content-box;
+  // box-sizing: content-box;
   caption-side: top;
   clear: none;
   clip: auto;
@@ -154,7 +141,7 @@
   counter-increment: none;
   counter-reset: none;
   cursor: auto;
-  direction: ltr;
+  // direction: ltr;
   display: inline;
   empty-cells: show;
   float: none;
@@ -213,43 +200,95 @@
   all: initial;
 }
 
-.uppy-c-buttonLarge {
-  font-family: inherit;
-  font-weight: 300;
-  font-size: 11px;
-  line-height: 1;
-  padding: 4px 6px;
-  border-radius: 2px;
-  transition: all 0.25s;
-  cursor: pointer;
+// Inputs
+
+.uppy-c-textInput {
+  border: 1px solid rgba($color-gray, 0.5);
   border-radius: 4px;
+  font-size: 15px;
+  line-height: 1.8;
+  padding: 8px 12px;
 }
 
-  .uppy-c-buttonLarge:focus {
+  .uppy-c-textInput:focus {
+    border-color: $color-cornflower-blue;
     outline: none;
-    box-shadow: 0 0 3px 1px rgba($color-cornflower-blue, 0.7);
+    box-shadow: 0 0 1px 1px rgba($color-cornflower-blue, 0.3);
   }
 
-  .uppy-Dashboard--wide .uppy-c-buttonLarge {
-    font-size: 15px;
-    padding: 13px 25px;
-    border-radius: 4px;
+// Buttons
+
+.uppy-c-btn {
+  display: inline-block;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  font-family: inherit;
+  font-size: 1em;
+  line-height: 1;
+  font-weight: 300;
+  transition: all 0.3s;
+  user-select: none;
+}
+
+  .uppy-c-btn:not(:disabled):not(.disabled) {
+    cursor: pointer;
   }
 
-.uppy-c-buttonLarge--blue {
+.uppy-c-btn-primary {
+  // font-size: 13px;
+  padding: 10px 18px;
+  border-radius: 2px;
   background-color: $color-cornflower-blue;
   color: $color-white;
 }
 
-  .uppy-c-buttonLarge--blue:hover {
+  .uppy-Dashboard--wide .uppy-c-btn-primary {
+    // font-size: 15px;
+    padding: 13px 28px;
+    border-radius: 4px;
+  }
+
+  .uppy-c-btn-primary:hover {
     background-color: darken($color-cornflower-blue, 10%);
   }
 
-.uppy-c-buttonLarge--transparent {
+  .uppy-c-btn-primary:focus {
+    outline: none;
+    box-shadow: 0 0 3px 1px rgba($color-cornflower-blue, 0.7);
+  }
+
+.uppy-c-btn-link {
+  // font-size: 13px;
+  line-height: 1;
+  padding: 10px 18px;
+  border-radius: 2px;
   background-color: transparent;
-  color: $color-asphalt-gray;
+  color: $color-black;
+}
+
+  .uppy-Dashboard--wide .uppy-c-btn-link {
+    // font-size: 15px;
+    padding: 13px 28px;
+    border-radius: 4px;
+  }
+
+  .uppy-c-btn-link:hover {
+    text-decoration: underline;
+  }
+
+  .uppy-c-btn-link:focus {
+    outline: none;
+    box-shadow: 0 0 3px 1px rgba($color-cornflower-blue, 0.7);
+  }
+
+.uppy-c-btn--small {
+  font-size: 0.9em;
+  padding: 7px 16px;
+  border-radius: 2px;
 }
 
-  .uppy-c-buttonLarge--transparent:hover {
-    color: $color-black;
+  .uppy-Dashboard--wide .uppy-c-btn--small {
+    padding: 8px 10px;
+    border-radius: 2px;
   }

src/scss/_dashboard.scss

@@ -79,22 +79,23 @@
   top: 7px;
   right: 7px;
   cursor: pointer;
-  color: lighten($color-asphalt-gray, 20%);
-  transition: all 0.2s;
+  color: rgba($color-asphalt-gray, 0.5);
+  transition: all 0.3s;
+  font-size: 30px;
 
-  .UppyIcon {
-    width: 12px;
-    height: 12px;
-  }
+  // .UppyIcon {
+  //   width: 12px;
+  //   height: 12px;
+  // }
 
   .uppy-Dashboard--wide & {
-    top: 12px;
-    right: 10px;
+    top: 2px;
+    right: 8px;
 
-    .UppyIcon {
-      width: 14px;
-      height: 14px;
-    }
+    // .UppyIcon {
+    //   width: 14px;
+    //   height: 14px;
+    // }
   }
 
   .uppy-Dashboard--modal & {
@@ -269,7 +270,6 @@
   color: $color-cornflower-blue;
 
   .uppy-Dashboard--wide & {
-    // top: 16px;
     font-size: 15px;
     line-height: 50px;
   }
@@ -550,8 +550,8 @@
 }
 
 .uppy-DashboardItem-previewIcon {
-  width: 25%;
-  max-height: 55%;
+  width: 20px;
+  height: 20px;
   z-index: $zIndex-1;
   position: absolute;
   top: 40%;
@@ -559,21 +559,22 @@
   transform: translate(-50%, -40%);
 
   .uppy-Dashboard--wide & {
-    width: 35%;
-    max-height: 80%;
+    width: 25px;
+    height: 25px;
   }
 }
 
 .uppy-DashboardItem-previewType {
   position: absolute;
-  bottom: 13px;
+  bottom: 14px;
   left: 50%;
   transform: translate(-50%, 0);
   text-transform: uppercase;
-  font-size: 10px;
+  font-size: 9px;
   letter-spacing: 1px;
   color: $color-asphalt-gray;
   z-index: $zIndex-1;
+  user-select: none;
 }
 
 .uppy-DashboardItem-info {
@@ -1022,10 +1023,4 @@
   display: inline-block;
   vertical-align: middle;
   width: 78%;
-  outline: none;
-  font-size: 15px;
-  line-height: 1.8;
-  padding-left: 5px;
-  margin: auto;
-  padding: 8px 12px;
 }

src/scss/_provider.scss

@@ -9,13 +9,13 @@
 .uppy-Provider-authIcon .UppyIcon {
   width: 100px;
   height: 75px;
-  color: lighten($color-gray, 15%);
+  color: rgba($color-asphalt-gray, 0.3);
   margin-bottom: 15px;
 }
 
 .uppy-Provider-authTitle {
   font-size: 20px;
-  line-height: 1.35;
+  line-height: 1.4;
   font-weight: 300;
   margin-bottom: 30px;
   padding: 0 15px;
@@ -23,9 +23,9 @@
   text-align: center;
 }
 
-.uppy-Provider-authBtn {
-  font-size: 22px;
-}
+// .uppy-Dashboard--wide .uppy-Provider-authBtn {
+//   font-size: 17px;
+// }
 
 .uppy-Provider-breadcrumbs button {
   @include reset-button;

src/scss/_url.scss

@@ -10,18 +10,13 @@
 .uppy-Url-input {
   width: 90%;
   max-width: 650px;
-  height: 50px; 
-  padding-left: 10px;
-  font-size: 15px;
   margin-bottom: 30px;
 }
 
 .uppy-Url-importButton {
-  @include reset-button();
-  color: $color-white;
-  background-color: $color-cornflower-blue;
-  cursor: pointer;
-  font-size: 16px;
-  padding: 14px 34px;
-  border-radius: 4px;
+  padding: 13px 25px;
 }
+
+  .uppy-Dashboard--wide .uppy-Url-importButton {
+    padding: 13px 35px;
+  }