Update Google Drive for brand compliance (#3178)

packages/@uppy/core/src/index.js

@@ -107,6 +107,7 @@ class Uppy {
         loading: 'Loading...',
         authenticateWithTitle: 'Please authenticate with %{pluginName} to select files',
         authenticateWith: 'Connect to %{pluginName}',
+        signInWithGoogle: 'Sign in with Google',
         searchImages: 'Search for images',
         enterTextToSearch: 'Enter text to search for images',
         backToSearch: 'Back to Search',

packages/@uppy/google-drive/src/index.js

@@ -13,10 +13,25 @@ module.exports = class GoogleDrive extends UIPlugin {
     Provider.initPlugin(this, opts)
     this.title = this.opts.title || 'Google Drive'
     this.icon = () => (
-      <svg aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32">
+      <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="#4285F4" width="32" height="32" rx="16" />
-          <path d="M10.324 23.3l3-5.1H25l-3 5.1H10.324zM13 18.2l-3 5.1-3-5.1 5.839-9.924 2.999 5.1L13 18.2zm11.838-.276h-6L13 8h6l5.84 9.924h-.002z" fill="#FFF" />
+          <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>
       </svg>
     )

packages/@uppy/locales/src/en_US.js

@@ -129,6 +129,7 @@ en_US.strings = {
     '1': 'Select %{smart_count}',
   },
   sessionRestored: 'Session restored',
+  signInWithGoogle: 'Sign in with Google',
   smile: 'Smile!',
   startCapturing: 'Begin screen capturing',
   startRecording: 'Begin video recording',

packages/@uppy/provider-views/src/ProviderView/AuthView.js

@@ -1,26 +1,81 @@
 const { h } = require('preact')
 
+function GoogleIcon () {
+  return (
+    <svg
+      width="26"
+      height="26"
+      viewBox="0 0 26 26"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g fill="none" fill-rule="evenodd">
+        <circle fill="#FFF" cx="13" cy="13" r="13" />
+        <path
+          d="M21.64 13.205c0-.639-.057-1.252-.164-1.841H13v3.481h4.844a4.14 4.14 0 01-1.796 2.716v2.259h2.908c1.702-1.567 2.684-3.875 2.684-6.615z"
+          fill="#4285F4"
+          fill-rule="nonzero"
+        />
+        <path
+          d="M13 22c2.43 0 4.467-.806 5.956-2.18l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H4.957v2.332A8.997 8.997 0 0013 22z"
+          fill="#34A853"
+          fill-rule="nonzero"
+        />
+        <path
+          d="M7.964 14.71A5.41 5.41 0 017.682 13c0-.593.102-1.17.282-1.71V8.958H4.957A8.996 8.996 0 004 13c0 1.452.348 2.827.957 4.042l3.007-2.332z"
+          fill="#FBBC05"
+          fill-rule="nonzero"
+        />
+        <path
+          d="M13 7.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C17.463 4.891 15.426 4 13 4a8.997 8.997 0 00-8.043 4.958l3.007 2.332C8.672 9.163 10.656 7.58 13 7.58z"
+          fill="#EA4335"
+          fill-rule="nonzero"
+        />
+        <path d="M4 4h18v18H4z" />
+      </g>
+    </svg>
+  )
+}
+
 function AuthView (props) {
+  const { pluginName, pluginIcon, i18nArray, handleAuth } = props
+  // In order to comply with Google's brand we need to create a different button
+  // for the Google Drive plugin
+  const isGoogleDrive = pluginName === 'Google Drive'
+
   const pluginNameComponent = (
     <span className="uppy-Provider-authTitleName">
-      {props.pluginName}
+      {pluginName}
       <br />
     </span>
   )
   return (
     <div className="uppy-Provider-auth">
-      <div className="uppy-Provider-authIcon">{props.pluginIcon()}</div>
+      <div className="uppy-Provider-authIcon">{pluginIcon()}</div>
       <div className="uppy-Provider-authTitle">
-        {props.i18nArray('authenticateWithTitle', { pluginName: pluginNameComponent })}
+        {i18nArray('authenticateWithTitle', {
+          pluginName: pluginNameComponent,
+        })}
       </div>
-      <button
-        type="button"
-        className="uppy-u-reset uppy-c-btn uppy-c-btn-primary uppy-Provider-authBtn"
-        onClick={props.handleAuth}
-        data-uppy-super-focusable
-      >
-        {props.i18nArray('authenticateWith', { pluginName: props.pluginName })}
-      </button>
+      {isGoogleDrive ? (
+        <button
+          type="button"
+          className="uppy-u-reset uppy-c-btn uppy-c-btn-primary uppy-Provider-authBtn uppy-Provider-btn-google"
+          onClick={handleAuth}
+          data-uppy-super-focusable
+        >
+          <GoogleIcon />
+          {i18nArray('signInWithGoogle')}
+        </button>
+      ) : (
+        <button
+          type="button"
+          className="uppy-u-reset uppy-c-btn uppy-c-btn-primary uppy-Provider-authBtn"
+          onClick={handleAuth}
+          data-uppy-super-focusable
+        >
+          {i18nArray('authenticateWith', { pluginName })}
+        </button>
+      )}
     </div>
   )
 }

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

@@ -57,6 +57,26 @@
   }
 }
 
+.uppy-Provider-btn-google {
+  display: flex;
+  align-items: center;
+  padding: 8px 12px !important;
+  background: #4285F4;
+
+  &:hover {
+    background-color: darken(#4285F4, 10%);
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(#4285F4, 0.4);
+  }
+
+  svg {
+    margin-right: 8px;
+  }
+}
+
 .uppy-Provider-breadcrumbs {
   flex: 1;
   margin-bottom: 10px;