@uppy/dashboard: update provider icon style (#4345)

transloadit · Mar 7, 2023 · 2e596ca · 2e596ca
1 parent 222e511
commit 2e596ca
Show file tree

Hide file tree

Showing 17 changed files with 1,001 additions and 93 deletions.
diff --git a/.yarn/releases/yarn-3.4.1.cjs b/.yarn/releases/yarn-3.4.1.cjs
diff --git a/packages/@uppy/audio/src/Audio.jsx b/packages/@uppy/audio/src/Audio.jsx
@@ -37,11 +37,8 @@ export default class Audio extends UIPlugin {
     this.id = this.opts.id || 'Audio'
     this.type = 'acquirer'
     this.icon = () => (
-      <svg aria-hidden="true" focusable="false" width="32px" height="32px" viewBox="0 0 32 32">
-        <g fill="none" fill-rule="evenodd">
-          <rect fill="#9B59B6" width="32" height="32" rx="16" />
-          <path d="M16 20c-2.21 0-4-1.71-4-3.818V9.818C12 7.71 13.79 6 16 6s4 1.71 4 3.818v6.364C20 18.29 18.21 20 16 20zm-6.364-7h.637c.351 0 .636.29.636.65v1.95c0 3.039 2.565 5.477 5.6 5.175 2.645-.264 4.582-2.692 4.582-5.407V13.65c0-.36.285-.65.636-.65h.637c.351 0 .636.29.636.65v1.631c0 3.642-2.544 6.888-6.045 7.382v1.387h2.227c.351 0 .636.29.636.65v.65c0 .36-.285.65-.636.65h-6.364a.643.643 0 0 1-.636-.65v-.65c0-.36.285-.65.636-.65h2.227v-1.372C11.637 22.2 9 19.212 9 15.6v-1.95c0-.36.285-.65.636-.65z" fill="#FFF" fill-rule="nonzero" />
-        </g>
+      <svg className="uppy-DashboardTab-iconAudio" aria-hidden="true" focusable="false" width="32px" height="32px" viewBox="0 0 32 32">
+        <path d="M21.143 12.297c.473 0 .857.383.857.857v2.572c0 3.016-2.24 5.513-5.143 5.931v2.64h2.572a.857.857 0 110 1.714H12.57a.857.857 0 110-1.714h2.572v-2.64C12.24 21.24 10 18.742 10 15.726v-2.572a.857.857 0 111.714 0v2.572A4.29 4.29 0 0016 20.01a4.29 4.29 0 004.286-4.285v-2.572c0-.474.384-.857.857-.857zM16 6.5a3 3 0 013 3v6a3 3 0 01-6 0v-6a3 3 0 013-3z" fill="currentcolor" fill-rule="nonzero" />
       </svg>
     )
 

diff --git a/packages/@uppy/box/src/Box.jsx b/packages/@uppy/box/src/Box.jsx
@@ -15,13 +15,10 @@ export default class Box extends UIPlugin {
     Provider.initPlugin(this, opts)
     this.title = this.opts.title || 'Box'
     this.icon = () => (
-      <svg aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32">
-        <g fill="none" fillRule="evenodd">
-          <rect className="uppy-ProviderIconBg" fill="#0061D5" width="32" height="32" rx="16" />
-          <g fill="#fff" fillRule="nonzero">
-            <path d="m16.4 13.5c-1.6 0-3 0.9-3.7 2.2-0.7-1.3-2.1-2.2-3.7-2.2-1 0-1.8 0.3-2.5 0.8v-3.6c-0.1-0.3-0.5-0.7-1-0.7s-0.8 0.4-0.8 0.8v7c0 2.3 1.9 4.2 4.2 4.2 1.6 0 3-0.9 3.7-2.2 0.7 1.3 2.1 2.2 3.7 2.2 2.3 0 4.2-1.9 4.2-4.2 0.1-2.4-1.8-4.3-4.1-4.3m-7.5 6.8c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5 2.5 1.1 2.5 2.5-1.1 2.5-2.5 2.5m7.5 0c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5 2.5 1.1 2.5 2.5-1.1 2.5-2.5 2.5" />
-            <path d="m27.2 20.6l-2.3-2.8 2.3-2.8c0.3-0.4 0.2-0.9-0.2-1.2s-1-0.2-1.3 0.2l-2 2.4-2-2.4c-0.3-0.4-0.9-0.4-1.3-0.2-0.4 0.3-0.5 0.8-0.2 1.2l2.3 2.8-2.3 2.8c-0.3 0.4-0.2 0.9 0.2 1.2s1 0.2 1.3-0.2l2-2.4 2 2.4c0.3 0.4 0.9 0.4 1.3 0.2 0.4-0.3 0.4-0.8 0.2-1.2" />
-          </g>
+      <svg className="uppy-DashboardTab-iconBox" aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32">
+        <g fill="currentcolor" fillRule="nonzero">
+          <path d="m16.4 13.5c-1.6 0-3 0.9-3.7 2.2-0.7-1.3-2.1-2.2-3.7-2.2-1 0-1.8 0.3-2.5 0.8v-3.6c-0.1-0.3-0.5-0.7-1-0.7s-0.8 0.4-0.8 0.8v7c0 2.3 1.9 4.2 4.2 4.2 1.6 0 3-0.9 3.7-2.2 0.7 1.3 2.1 2.2 3.7 2.2 2.3 0 4.2-1.9 4.2-4.2 0.1-2.4-1.8-4.3-4.1-4.3m-7.5 6.8c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5 2.5 1.1 2.5 2.5-1.1 2.5-2.5 2.5m7.5 0c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5 2.5 1.1 2.5 2.5-1.1 2.5-2.5 2.5" />
+          <path d="m27.2 20.6l-2.3-2.8 2.3-2.8c0.3-0.4 0.2-0.9-0.2-1.2s-1-0.2-1.3 0.2l-2 2.4-2-2.4c-0.3-0.4-0.9-0.4-1.3-0.2-0.4 0.3-0.5 0.8-0.2 1.2l2.3 2.8-2.3 2.8c-0.3 0.4-0.2 0.9 0.2 1.2s1 0.2 1.3-0.2l2-2.4 2 2.4c0.3 0.4 0.9 0.4 1.3 0.2 0.4-0.3 0.4-0.8 0.2-1.2" />
         </g>
       </svg>
     )

diff --git a/packages/@uppy/core/src/_variables.scss b/packages/@uppy/core/src/_variables.scss
@@ -32,7 +32,7 @@ $gray-900: #1f1f1f !default;
 
 $white-50: #fffbf7 !default;
 
-$highlight: #eceef2;
+$highlight: #dfe6f1;
 $highlight--dark: #02baf2;
 
 $uppy-pink: #eb2177;

diff --git a/packages/@uppy/dashboard/src/components/AddFiles.jsx b/packages/@uppy/dashboard/src/components/AddFiles.jsx
@@ -82,12 +82,11 @@ class AddFiles extends Component {
           data-uppy-super-focusable
           onClick={this.triggerFileInputClick}
         >
-          <svg aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32">
-            <g fill="none" fillRule="evenodd">
-              <rect className="uppy-ProviderIconBg" width="32" height="32" rx="16" fill="#2275D7" />
-              <path d="M21.973 21.152H9.863l-1.108-5.087h14.464l-1.246 5.087zM9.935 11.37h3.958l.886 1.444a.673.673 0 0 0 .585.316h6.506v1.37H9.935v-3.13zm14.898 3.44a.793.793 0 0 0-.616-.31h-.978v-2.126c0-.379-.275-.613-.653-.613H15.75l-.886-1.445a.673.673 0 0 0-.585-.316H9.232c-.378 0-.667.209-.667.587V14.5h-.782a.793.793 0 0 0-.61.303.795.795 0 0 0-.155.663l1.45 6.633c.078.36.396.618.764.618h13.354c.36 0 .674-.246.76-.595l1.631-6.636a.795.795 0 0 0-.144-.675z" fill="#FFF" />
-            </g>
-          </svg>
+          <div className="uppy-DashboardTab-inner">
+            <svg className="uppy-DashboardTab-iconMyDevice" aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32">
+              <path d="M8.45 22.087l-1.305-6.674h17.678l-1.572 6.674H8.45zm4.975-12.412l1.083 1.765a.823.823 0 00.715.386h7.951V13.5H8.587V9.675h4.838zM26.043 13.5h-1.195v-2.598c0-.463-.336-.75-.798-.75h-8.356l-1.082-1.766A.823.823 0 0013.897 8H7.728c-.462 0-.815.256-.815.718V13.5h-.956a.97.97 0 00-.746.37.972.972 0 00-.19.81l1.724 8.565c.095.44.484.755.933.755H24c.44 0 .824-.3.929-.727l2.043-8.568a.972.972 0 00-.176-.825.967.967 0 00-.753-.38z" fill="currentcolor" fill-rule="evenodd" />
+            </svg>
+          </div>
           <div className="uppy-DashboardTab-name">{this.props.i18n('myDevice')}</div>
         </button>
       </div>
@@ -109,12 +108,11 @@ class AddFiles extends Component {
           data-uppy-super-focusable
           onClick={this.triggerPhotoCameraInputClick}
         >
-          <svg aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32">
-            <g fill="none" fillRule="evenodd">
-              <rect className="uppy-ProviderIconBg" fill="#03BFEF" width="32" height="32" rx="16" />
-              <path d="M22 11c1.133 0 2 .867 2 2v7.333c0 1.134-.867 2-2 2H10c-1.133 0-2-.866-2-2V13c0-1.133.867-2 2-2h2.333l1.134-1.733C13.6 9.133 13.8 9 14 9h4c.2 0 .4.133.533.267L19.667 11H22zm-6 1.533a3.764 3.764 0 0 0-3.8 3.8c0 2.129 1.672 3.801 3.8 3.801s3.8-1.672 3.8-3.8c0-2.13-1.672-3.801-3.8-3.801zm0 6.261c-1.395 0-2.46-1.066-2.46-2.46 0-1.395 1.065-2.461 2.46-2.461s2.46 1.066 2.46 2.46c0 1.395-1.065 2.461-2.46 2.461z" fill="#FFF" fillRule="nonzero" />
-            </g>
-          </svg>
+          <div className="uppy-DashboardTab-inner">
+            <svg aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32">
+              <path d="M23.5 9.5c1.417 0 2.5 1.083 2.5 2.5v9.167c0 1.416-1.083 2.5-2.5 2.5h-15c-1.417 0-2.5-1.084-2.5-2.5V12c0-1.417 1.083-2.5 2.5-2.5h2.917l1.416-2.167C13 7.167 13.25 7 13.5 7h5c.25 0 .5.167.667.333L20.583 9.5H23.5zM16 11.417a4.706 4.706 0 00-4.75 4.75 4.704 4.704 0 004.75 4.75 4.703 4.703 0 004.75-4.75c0-2.663-2.09-4.75-4.75-4.75zm0 7.825c-1.744 0-3.076-1.332-3.076-3.074 0-1.745 1.333-3.077 3.076-3.077 1.744 0 3.074 1.333 3.074 3.076s-1.33 3.075-3.074 3.075z" fill="#02B383" fill-rule="nonzero" />
+            </svg>
+          </div>
           <div className="uppy-DashboardTab-name">{this.props.i18n('takePictureBtn')}</div>
         </button>
       </div>
@@ -136,10 +134,11 @@ class AddFiles extends Component {
           data-uppy-super-focusable
           onClick={this.triggerVideoCameraInputClick}
         >
-          <svg aria-hidden="true" width="32" height="32" viewBox="0 0 32 32">
-            <rect fill="#1abc9c" width="32" height="32" rx="16" />
-            <path fill="#FFF" fillRule="nonzero" d="m21.254 14.277 2.941-2.588c.797-.313 1.243.818 1.09 1.554-.01 2.094.02 4.189-.017 6.282-.126.915-1.145 1.08-1.58.34l-2.434-2.142c-.192.287-.504 1.305-.738.468-.104-1.293-.028-2.596-.05-3.894.047-.312.381.823.426 1.069.063-.384.206-.744.362-1.09zm-12.939-3.73c3.858.013 7.717-.025 11.574.02.912.129 1.492 1.237 1.351 2.217-.019 2.412.04 4.83-.03 7.239-.17 1.025-1.166 1.59-2.029 1.429-3.705-.012-7.41.025-11.114-.019-.913-.129-1.492-1.237-1.352-2.217.018-2.404-.036-4.813.029-7.214.136-.82.83-1.473 1.571-1.454z " />
-          </svg>
+          <div className="uppy-DashboardTab-inner">
+            <svg aria-hidden="true" width="32" height="32" viewBox="0 0 32 32">
+              <path fill="#FF675E" fillRule="nonzero" d="m21.254 14.277 2.941-2.588c.797-.313 1.243.818 1.09 1.554-.01 2.094.02 4.189-.017 6.282-.126.915-1.145 1.08-1.58.34l-2.434-2.142c-.192.287-.504 1.305-.738.468-.104-1.293-.028-2.596-.05-3.894.047-.312.381.823.426 1.069.063-.384.206-.744.362-1.09zm-12.939-3.73c3.858.013 7.717-.025 11.574.02.912.129 1.492 1.237 1.351 2.217-.019 2.412.04 4.83-.03 7.239-.17 1.025-1.166 1.59-2.029 1.429-3.705-.012-7.41.025-11.114-.019-.913-.129-1.492-1.237-1.352-2.217.018-2.404-.036-4.813.029-7.214.136-.82.83-1.473 1.571-1.454z " />
+            </svg>
+          </div>
           <div className="uppy-DashboardTab-name">{this.props.i18n('recordVideoBtn')}</div>
         </button>
       </div>
@@ -210,7 +209,9 @@ class AddFiles extends Component {
           data-uppy-super-focusable
           onClick={() => this.props.showPanel(acquirer.id)}
         >
-          {acquirer.icon()}
+          <div className="uppy-DashboardTab-inner">
+            {acquirer.icon()}
+          </div>
           <div className="uppy-DashboardTab-name">{acquirer.name}</div>
         </button>
       </div>

diff --git a/packages/@uppy/dashboard/src/style.scss b/packages/@uppy/dashboard/src/style.scss
@@ -146,7 +146,7 @@
   position: relative;
   max-width: 100%;
   max-height: 100%;
-  background-color: $gray-50;
+  background-color: $gray-100;
   border: 1px solid $gray-200;
   border-radius: 5px;
   outline: none;
@@ -493,15 +493,35 @@
   overflow: hidden;
   vertical-align: text-top;
   transition: transform ease-in-out 0.15s;
+}
+
+.uppy-DashboardTab-inner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background-color: #fff;
+  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1),
+              0 1px 2px 0 rgba(0, 0, 0, 0.1),
+              0 2px 3px 0 rgba(0, 0, 0, 0.02);
   margin-inline-end: 10px;
 
   .uppy-size--md & {
     margin-inline-end: 0;
   }
+
+  [data-uppy-theme="dark"] & {
+    background-color: #323232;
+    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2),
+                0 1px 2px 0 rgba(0, 0, 0, 0.2),
+                0 2px 3px 0 rgba(0, 0, 0, 0.08);
+  }
 }
 
 .uppy-DashboardTab-name {
-  font-weight: 500;
+  font-weight: 400;
   font-size: 14px;
 
   .uppy-size--md & {
@@ -512,15 +532,51 @@
   }
 }
 
-// On SVG sizing: https://sarasoueidan.com/blog/svg-style-inheritance-and-FOUSVG/
-.uppy-DashboardTab svg {
-  width: 23px;
-  height: 23px;
-  vertical-align: middle;
+.uppy-DashboardTab-iconMyDevice {
+  color: $blue;
 
-  .uppy-size--md & {
-    width: 30px;
-    height: 30px;
+  [data-uppy-theme="dark"] & {
+    color: $highlight--dark;
+  }
+}
+
+.uppy-DashboardTab-iconBox {
+  color: #0061d5;
+
+  [data-uppy-theme="dark"] & {
+    color: $gray-200;
+  }
+}
+
+.uppy-DashboardTab-iconDropbox {
+  color: #0061fe;
+
+  [data-uppy-theme="dark"] & {
+    color: $gray-200;
+  }
+}
+
+.uppy-DashboardTab-iconUnsplash {
+  color: #111;
+
+  [data-uppy-theme="dark"] & {
+    color: $gray-200;
+  }
+}
+
+.uppy-DashboardTab-iconScreenRec {
+  color: #2c3e50;
+
+  [data-uppy-theme="dark"] & {
+    color: $gray-200;
+  }
+}
+
+.uppy-DashboardTab-iconAudio {
+  color: #8030a3;
+
+  [data-uppy-theme="dark"] & {
+    color: #bf6ee3;
   }
 }
 
@@ -803,7 +859,7 @@
     padding: 0 35px;
     margin-top: 5px;
     font-weight: 400;
-    font-size: 25px;
+    font-size: 21px;
     text-align: center;
   }
 
@@ -835,7 +891,6 @@
 
   .uppy-size--md & {
     max-width: 600px;
-    font-size: 15px;
     line-height: 1.35;
   }
 

diff --git a/packages/@uppy/dropbox/src/Dropbox.jsx b/packages/@uppy/dropbox/src/Dropbox.jsx
@@ -15,11 +15,8 @@ export default class Dropbox extends UIPlugin {
     Provider.initPlugin(this, opts)
     this.title = this.opts.title || 'Dropbox'
     this.icon = () => (
-      <svg aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32">
-        <g fill="none" fillRule="evenodd">
-          <rect className="uppy-ProviderIconBg" fill="#0D2481" width="32" height="32" rx="16" />
-          <path d="M11 8l5 3.185-5 3.186-5-3.186L11 8zm10 0l5 3.185-5 3.186-5-3.186L21 8zM6 17.556l5-3.185 5 3.185-5 3.186-5-3.186zm15-3.185l5 3.185-5 3.186-5-3.186 5-3.185zm-10 7.432l5-3.185 5 3.185-5 3.186-5-3.186z" fill="#FFF" fillRule="nonzero" />
-        </g>
+      <svg className="uppy-DashboardTab-iconDropbox" aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32">
+        <path d="M10.5 7.5L5 10.955l5.5 3.454 5.5-3.454 5.5 3.454 5.5-3.454L21.5 7.5 16 10.955zM10.5 21.319L5 17.864l5.5-3.455 5.5 3.455zM16 17.864l5.5-3.455 5.5 3.455-5.5 3.455zM16 25.925l-5.5-3.455 5.5-3.454 5.5 3.454z" fill="currentcolor" fillRule="nonzero" />
       </svg>
     )
 

diff --git a/packages/@uppy/facebook/src/Facebook.jsx b/packages/@uppy/facebook/src/Facebook.jsx
@@ -17,8 +17,8 @@ export default class Facebook extends UIPlugin {
     this.icon = () => (
       <svg aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32">
         <g fill="none" fillRule="evenodd">
-          <rect className="uppy-ProviderIconBg" width="32" height="32" rx="16" fill="#3C5A99" />
-          <path d="M17.842 26v-8.667h2.653l.398-3.377h-3.051v-2.157c0-.978.248-1.644 1.527-1.644H21V7.132A19.914 19.914 0 0 0 18.623 7c-2.352 0-3.963 1.574-3.963 4.465v2.49H12v3.378h2.66V26h3.182z" fill="#FFF" fillRule="nonzero" />
+          <path d="M27 16c0-6.075-4.925-11-11-11S5 9.925 5 16c0 5.49 4.023 10.041 9.281 10.866V19.18h-2.793V16h2.793v-2.423c0-2.757 1.642-4.28 4.155-4.28 1.204 0 2.462.215 2.462.215v2.707h-1.387c-1.366 0-1.792.848-1.792 1.718V16h3.05l-.487 3.18h-2.563v7.686C22.977 26.041 27 21.49 27 16" fill="#1777F2" />
+          <path d="M20.282 19.18L20.77 16h-3.051v-2.063c0-.87.426-1.718 1.792-1.718h1.387V9.512s-1.258-.215-2.462-.215c-2.513 0-4.155 1.523-4.155 4.28V16h-2.793v3.18h2.793v7.686a11.082 11.082 0 003.438 0V19.18h2.563" fill="#FFFFFE" />
         </g>
       </svg>
     )

diff --git a/packages/@uppy/google-drive/src/GoogleDrive.jsx b/packages/@uppy/google-drive/src/GoogleDrive.jsx
@@ -23,18 +23,13 @@ export default class GoogleDrive extends UIPlugin {
         height="32"
         viewBox="0 0 32 32"
       >
-        <g fill="none" fillRule="evenodd">
-          <rect
-            className="uppy-ProviderIconBg"
-            fill="#4285F4"
-            width="32"
-            height="32"
-            rx="16"
-          />
-          <path
-            d="M25.216 17.736L19.043 7h-6.086l6.175 10.736h6.084zm-11.275.896L10.9 24h11.723l3.04-5.368H13.942zm-1.789-10.29l-5.816 10.29L9.38 24l5.905-10.29-3.132-5.369z"
-            fill="#FFF"
-          />
+        <g fillRule="nonzero" fill="none">
+          <path d="M6.663 22.284l.97 1.62c.202.34.492.609.832.804l3.465-5.798H5c0 .378.1.755.302 1.096l1.361 2.278z" fill="#0066DA" />
+          <path d="M16 12.09l-3.465-5.798c-.34.195-.63.463-.832.804l-6.4 10.718A2.15 2.15 0 005 18.91h6.93L16 12.09z" fill="#00AC47" />
+          <path d="M23.535 24.708c.34-.195.63-.463.832-.804l.403-.67 1.928-3.228c.201-.34.302-.718.302-1.096h-6.93l1.474 2.802 1.991 2.996z" fill="#EA4335" />
+          <path d="M16 12.09l3.465-5.798A2.274 2.274 0 0018.331 6h-4.662c-.403 0-.794.11-1.134.292L16 12.09z" fill="#00832D" />
+          <path d="M20.07 18.91h-8.14l-3.465 5.798c.34.195.73.292 1.134.292h12.802c.403 0 .794-.11 1.134-.292L20.07 18.91z" fill="#2684FC" />
+          <path d="M23.497 12.455l-3.2-5.359a2.252 2.252 0 00-.832-.804L16 12.09l4.07 6.82h6.917c0-.377-.1-.755-.302-1.096l-3.188-5.359z" fill="#FFBA00" />
         </g>
       </svg>
     )