Style tweaks: use all: initial + other resets (#3983)

* Refactor uppy-u-reset: all: initial is now well-supported * Utilize system-ui font-family, it should be provided by browsers now for multi-platform consistency * Make Dashboard UI a little smaller by default * Add uppy-c-btn to uppy-Dashboard-browse * hide uploadNewlyAdded button when preprecessing * Make “drop files here” tagline more even
transloadit · Aug 18, 2022 · 4ed75ca · 4ed75ca
1 parent 222c00b
commit 4ed75ca
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 73 deletions.
diff --git a/packages/@uppy/core/src/_common.scss b/packages/@uppy/core/src/_common.scss
@@ -33,59 +33,9 @@
 // Utilities
 
 .uppy-u-reset {
-  top: auto;
-  left: auto;
-  z-index: auto;
-  display: inline;
-  float: none;
-  clear: none;
-  min-width: 0;
-  max-width: none;
-  min-height: 0;
-  max-height: none;
-  margin: 0;
-  padding: 0;
-  overflow: visible;
-  overflow-x: visible;
-  overflow-y: visible;
-  color: inherit;
-  font-weight: normal;
-  font-size: inherit;
-  font-family: inherit;
-  font-style: normal;
-  font-variant: normal;
-  font-stretch: normal;
-  line-height: 1;
-  letter-spacing: normal;
-  white-space: normal;
-  text-align: left;
-  text-transform: none;
-  text-decoration: none;
-  text-indent: 0;
-  text-shadow: none;
-  vertical-align: baseline;
-  hyphens: none;
-  unicode-bidi: normal;
-  list-style: none;
-  empty-cells: show;
-  background: none;
-  border: 0;
-  border: medium none currentColor;
-  border-radius: 0;
-  border-image: none;
-  border-collapse: separate;
-  border-spacing: 0;
-  outline: medium none invert;
-  box-shadow: none;
-  transform: none;
-  transform-origin: 50% 50% 0;
-  transform-style: flat;
-  backface-visibility: visible;
-  visibility: visible;
-  cursor: auto;
-  opacity: 1;
-  transition: none 0s ease 0s;
-  -webkit-appearance: none;
+  all: initial;
+  box-sizing: border-box;
+  appearance: none;
 }
 
 [dir="rtl"] .uppy-u-reset {
@@ -138,14 +88,17 @@
 // Buttons
 
 .uppy-c-btn {
-  display: inline-block;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
   font-weight: 500;
-  font-size: 16px;
+  font-size: inherit;
   font-family: inherit;
+  color: inherit;
   line-height: 1;
   white-space: nowrap;
   text-align: center;
-  vertical-align: middle;
+  // vertical-align: middle;
   transition-duration: 0.3s;
   transition-property: background-color, color;
   user-select: none;
@@ -220,14 +173,3 @@
     color: $gray-500;
   }
 }
-
-.uppy-c-btn--small {
-  padding: 7px 16px;
-  font-size: 0.9em;
-  border-radius: 2px;
-
-  .uppy-size--md & {
-    padding: 8px 10px;
-    border-radius: 2px;
-  }
-}
diff --git a/packages/@uppy/core/src/_variables.scss b/packages/@uppy/core/src/_variables.scss
@@ -1,5 +1,6 @@
 // Fonts
-$font-family-base: -apple-system, blinkmacsystemfont, 'Segoe UI', helvetica, arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default;
+
+$font-family-base: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Segoe UI Symbol", "Segoe UI Emoji", "Apple Color Emoji", Roboto, Helvetica, Arial, sans-serif !default;
 $font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
 
 // Colors

diff --git a/packages/@uppy/dashboard/src/components/AddFiles.jsx b/packages/@uppy/dashboard/src/components/AddFiles.jsx
@@ -151,7 +151,7 @@ class AddFiles extends Component {
     return (
       <button
         type="button"
-        className="uppy-u-reset uppy-Dashboard-browse"
+        className="uppy-u-reset uppy-c-btn uppy-Dashboard-browse"
         onClick={onClickFn}
         data-uppy-super-focusable={numberOfAcquirers === 0}
       >

diff --git a/packages/@uppy/dashboard/src/style.scss b/packages/@uppy/dashboard/src/style.scss
@@ -156,8 +156,8 @@
   }
 
   @media #{$screen-medium} {
-    width: 750px;
-    height: 550px;
+    width: 650px;
+    height: 500px;
   }
 
   .uppy-Dashboard--modal & {
@@ -431,9 +431,10 @@
 .uppy-DashboardTab-btn {
   @include clear-focus;
 
-  display: flex;
+  // display: flex;
   flex-direction: row;
   align-items: center;
+  justify-content: left;
   width: 100%;
   height: 100%;
   padding: 12px 15px;
@@ -498,7 +499,7 @@
   .uppy-size--md & {
     margin-top: 8px;
     margin-bottom: 0;
-    font-size: 11px;
+    font-size: 12px;
     line-height: 15px;
   }
 }
@@ -784,6 +785,7 @@
 
   .uppy-size--md & {
     max-width: 480px;
+    padding: 0 35px;
     margin-top: 5px;
     font-weight: 400;
     font-size: 25px;

diff --git a/packages/@uppy/status-bar/src/style.scss b/packages/@uppy/status-bar/src/style.scss
@@ -341,6 +341,11 @@
   [data-uppy-theme="dark"] & {
     @include blue-border-focus--dark;
   }
+
+  .uppy-StatusBar.is-preprocessing &, 
+  .uppy-StatusBar.is-postprocessing & {
+    display: none;
+  }
 }
 
 .uppy-StatusBar-actionBtn--done {