Merge pull request #1362 from transloadit/chore/fix-styles-without-important

Protect some more styles from bleeding

packages/@uppy/core/src/_common.scss

@@ -8,6 +8,8 @@
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  text-align: left;
+  position: relative;
 }
 
 .uppy-Root *, .uppy-Root *:before, .uppy-Root *:after {
@@ -21,6 +23,9 @@
 .uppy-Root *:focus {
   outline: $size-focus-outline solid $color-cornflower-blue; /* no !important */
   outline-offset: $size-focus-offset; /* no !important */
+
+  // outline: none;
+  // box-shadow: inset 0 0 0 2px rgba($color-cornflower-blue, 0.5);
 }
 
 .uppy-Root [hidden] {
@@ -109,6 +114,7 @@
   font-size: 13px;
   line-height: 1.5;
   padding: 6px 8px;
+  background-color: $color-white;
 }
 
   .uppy-size--md .uppy-c-textInput {

packages/@uppy/dashboard/src/components/AddFiles.js

@@ -22,7 +22,7 @@ class AddFiles extends Component {
 
     if (!hasAcquirers) {
       return (
-        <div class="uppy-DashboarAddFiles">
+        <div class="uppy-DashboardAddFiles">
           <div class="uppy-DashboardTabs">
             <ActionBrowseTagline
               acquirers={this.props.acquirers}
@@ -33,7 +33,7 @@ class AddFiles extends Component {
               maxNumberOfFiles={this.props.maxNumberOfFiles}
             />
           </div>
-          <div class="uppy-DashboarAddFiles-info">
+          <div class="uppy-DashboardAddFiles-info">
             { this.props.note && <div class="uppy-Dashboard-note">{this.props.note}</div> }
             { this.props.proudlyDisplayPoweredByUppy && poweredByUppy(this.props) }
           </div>
@@ -45,7 +45,7 @@ class AddFiles extends Component {
     // because Uppy will be handling the upload and so we can select same file
     // after removing — otherwise browser thinks it’s already selected
     return (
-      <div class="uppy-DashboarAddFiles">
+      <div class="uppy-DashboardAddFiles">
         <div class="uppy-DashboardTabs">
           <ActionBrowseTagline
             acquirers={this.props.acquirers}
@@ -93,7 +93,7 @@ class AddFiles extends Component {
             })}
           </div>
         </div>
-        <div class="uppy-DashboarAddFiles-info">
+        <div class="uppy-DashboardAddFiles-info">
           { this.props.note && <div class="uppy-Dashboard-note">{this.props.note}</div> }
           { this.props.proudlyDisplayPoweredByUppy && poweredByUppy(this.props) }
         </div>

packages/@uppy/dashboard/src/components/FileCard.js

@@ -42,7 +42,7 @@ class FileCard extends Component {
     return metaFields.map((field, i) => {
       return <fieldset class="uppy-DashboardFileCard-fieldset">
         <label class="uppy-DashboardFileCard-label">{field.name}</label>
-        <input class="uppy-c-textInput uppy-DashboardFileCard-input"
+        <input class="uppy-u-reset uppy-c-textInput uppy-DashboardFileCard-input"
           type="text"
           data-name={field.id}
           value={file.meta[field.id]}

packages/@uppy/dashboard/src/style.scss

@@ -178,7 +178,7 @@
   }
 }
 
-.uppy-DashboarAddFiles {
+.uppy-DashboardAddFiles {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -215,7 +215,7 @@
   }
 }
 
-.uppy-DashboarAddFiles-info {
+.uppy-DashboardAddFiles-info {
   padding-top: 15px;
   padding-bottom: 15px;
 
@@ -586,7 +586,7 @@
   }
 }
 
-.uppy-Dashboard-poweredBy {
+a.uppy-Dashboard-poweredBy {
   display: inline-block;
   text-align: center;
   font-size: 11px;
@@ -595,10 +595,6 @@
   margin-top: 8px;
 }
 
-.uppy-Dashboard-poweredByUppy {
-  color: $color-gray;
-}
-
 .uppy-Dashboard-poweredByIcon {
   stroke: $color-gray;
   fill: none;

packages/@uppy/provider-views/src/Browser.js

@@ -27,7 +27,7 @@ const Browser = (props) => {
             title: props.title
           })}
           <span class="uppy-ProviderBrowser-user">{props.username}</span>
-          <button type="button" onclick={props.logout} class="uppy-ProviderBrowser-userLogout">
+          <button type="button" onclick={props.logout} class="uppy-u-reset uppy-ProviderBrowser-userLogout">
             {props.i18n('logOut')}
           </button>
         </div>

packages/@uppy/provider-views/src/Item.js

@@ -60,7 +60,7 @@ module.exports = (props) => {
          />
       </div>
       <button type="button"
-        class="uppy-ProviderBrowserItem-inner"
+        class="uppy-u-reset uppy-ProviderBrowserItem-inner"
         aria-label={`Select ${props.title}`}
         tabindex={0}
         onclick={handleItemClick}>

packages/@uppy/provider-views/src/style.scss

@@ -46,6 +46,7 @@
   font-size: 12px;
   line-height: 1;
   margin-bottom: 10px;
+  text-align: left;
 
   .uppy-size--md & {
     margin-bottom: 0;
@@ -159,10 +160,16 @@
   font-size: 13px;
   line-height: 30px;
   border: 0;
-  padding: 0 16px 0 0;
+  margin: 0 16px 0 0;
   z-index: $zIndex-2;
+  border-bottom: 1px solid transparent;
 }
 
+  .uppy-ProviderBrowser-searchInput:focus {
+    outline: 0;
+    border-bottom: 1px solid $color-cornflower-blue;
+  }
+
 .uppy-ProviderBrowser-searchClose {
   width: 12px;
   height: 12px;
@@ -187,7 +194,6 @@
 }
 
 .uppy-ProviderBrowser-userLogout {
-  @include reset-button();
   cursor: pointer;
 
   &:hover {
@@ -222,7 +228,6 @@
 }
 
 .uppy-ProviderBrowserItem-inner {
-  @include reset-button();
   cursor: pointer;
   font-weight: 600;
 }
@@ -291,6 +296,7 @@
     display: inline-block;
     width: 50%;
     position: relative;
+    margin: 0;
   }
 
     .uppy-ProviderBrowserItem:before {
@@ -316,6 +322,7 @@
     left: 7px;
     right: 7px;
     bottom: 7px;
+    text-align: center;
   }
 
   .uppy-ProviderBrowserItem-inner:focus {

packages/@uppy/url/src/UrlUI.js

@@ -31,7 +31,7 @@ class UrlUI extends Component {
   render () {
     return <div class="uppy-Url">
       <input
-        class="uppy-c-textInput uppy-Url-input"
+        class="uppy-u-reset uppy-c-textInput uppy-Url-input"
         type="text"
         aria-label={this.props.i18n('enterUrlToImport')}
         placeholder={this.props.i18n('enterUrlToImport')}