Better camera icon, place icons at the bottom bar, simplify components

src/plugins/Webcam/CameraIcon.js

@@ -1,8 +1,7 @@
 const { h } = require('preact')
 
 module.exports = (props) => {
-  return <svg aria-hidden="true" class="UppyIcon" width="100" height="77" viewBox="0 0 100 77">
-    <path d="M50 32c-7.168 0-13 5.832-13 13s5.832 13 13 13 13-5.832 13-13-5.832-13-13-13z" />
-    <path d="M87 13H72c0-7.18-5.82-13-13-13H41c-7.18 0-13 5.82-13 13H13C5.82 13 0 18.82 0 26v38c0 7.18 5.82 13 13 13h74c7.18 0 13-5.82 13-13V26c0-7.18-5.82-13-13-13zM50 68c-12.683 0-23-10.318-23-23s10.317-23 23-23 23 10.318 23 23-10.317 23-23 23z" />
+  return <svg aria-hidden="true" class="UppyIcon" width="66" height="55" viewBox="0 0 66 55" xmlns="http://www.w3.org/2000/svg">
+    <path d="M57.3 8.433c4.59 0 8.1 3.51 8.1 8.1v29.7c0 4.59-3.51 8.1-8.1 8.1H8.7c-4.59 0-8.1-3.51-8.1-8.1v-29.7c0-4.59 3.51-8.1 8.1-8.1h9.45l4.59-7.02c.54-.54 1.35-1.08 2.16-1.08h16.2c.81 0 1.62.54 2.16 1.08l4.59 7.02h9.45zM33 14.64c-8.62 0-15.393 6.773-15.393 15.393 0 8.62 6.773 15.393 15.393 15.393 8.62 0 15.393-6.773 15.393-15.393 0-8.62-6.773-15.393-15.393-15.393zM33 40c-5.648 0-9.966-4.319-9.966-9.967 0-5.647 4.318-9.966 9.966-9.966s9.966 4.319 9.966 9.966C42.966 35.681 38.648 40 33 40z" fill-rule="evenodd" />
   </svg>
 }

src/plugins/Webcam/RecordButton.js

@@ -1,27 +1,29 @@
-const RecordStartIcon = require('./RecordStartIcon')
-const RecordStopIcon = require('./RecordStopIcon')
 const { h } = require('preact')
 
 module.exports = function RecordButton ({ recording, onStartRecording, onStopRecording }) {
   if (recording) {
     return (
-      <button class="UppyButton--circular UppyButton--red UppyButton--sizeM uppy-Webcam-recordButton"
+      <button class="uppy-u-reset uppy-c-btn uppy-Webcam-button uppy-Webcam-button--video"
         type="button"
         title="Stop Recording"
         aria-label="Stop Recording"
         onclick={onStopRecording}>
-        {RecordStopIcon()}
+        <svg aria-hidden="true" class="UppyIcon" width="100" height="100" viewBox="0 0 100 100">
+          <circle cx="50" cy="50" r="40" />
+        </svg>
       </button>
     )
   }
 
   return (
-    <button class="UppyButton--circular UppyButton--red UppyButton--sizeM uppy-Webcam-recordButton"
+    <button class="uppy-u-reset uppy-c-btn uppy-Webcam-button uppy-Webcam-button--video"
       type="button"
       title="Begin Recording"
       aria-label="Begin Recording"
       onclick={onStartRecording}>
-      {RecordStartIcon()}
+      <svg aria-hidden="true" class="UppyIcon" width="100" height="100" viewBox="0 0 100 100">
+        <rect x="15" y="15" width="70" height="70" />
+      </svg>
     </button>
   )
 }

src/plugins/Webcam/RecordStartIcon.js

@@ -1,7 +0,0 @@
-const { h } = require('preact')
-
-module.exports = (props) => {
-  return <svg aria-hidden="true" class="UppyIcon" width="100" height="100" viewBox="0 0 100 100">
-    <circle cx="50" cy="50" r="40" />
-  </svg>
-}

src/plugins/Webcam/RecordStopIcon.js

@@ -1,7 +0,0 @@
-const { h } = require('preact')
-
-module.exports = (props) => {
-  return <svg aria-hidden="true" class="UppyIcon" width="100" height="100" viewBox="0 0 100 100">
-    <rect x="15" y="15" width="70" height="70" />
-  </svg>
-}

src/plugins/Webcam/SnapshotButton.js

@@ -3,7 +3,7 @@ const CameraIcon = require('./CameraIcon')
 
 module.exports = ({ onSnapshot }) => {
   return (
-    <button class="UppyButton--circular UppyButton--red UppyButton--sizeM uppy-Webcam-recordButton"
+    <button class="uppy-u-reset uppy-c-btn uppy-Webcam-button uppy-Webcam-button--picture"
       type="button"
       title="Take a snapshot"
       aria-label="Take a snapshot"

src/plugins/Webcam/WebcamIcon.js

@@ -1,10 +0,0 @@
-const { h } = require('preact')
-
-module.exports = (props) => {
-  return (
-    <svg aria-hidden="true" class="UppyIcon" width="18" height="21" viewBox="0 0 18 21">
-      <path d="M14.8 16.9c1.9-1.7 3.2-4.1 3.2-6.9 0-5-4-9-9-9s-9 4-9 9c0 2.8 1.2 5.2 3.2 6.9C1.9 17.9.5 19.4 0 21h3c1-1.9 11-1.9 12 0h3c-.5-1.6-1.9-3.1-3.2-4.1zM9 4c3.3 0 6 2.7 6 6s-2.7 6-6 6-6-2.7-6-6 2.7-6 6-6z" />
-      <path d="M9 14c2.2 0 4-1.8 4-4s-1.8-4-4-4-4 1.8-4 4 1.8 4 4 4zM8 8c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1c0-.5.4-1 1-1z" />
-    </svg>
-  )
-}

src/plugins/Webcam/index.js

@@ -6,7 +6,7 @@ const {
   canvasToBlob
 } = require('../../core/Utils')
 const supportsMediaRecorder = require('./supportsMediaRecorder')
-const WebcamIcon = require('./WebcamIcon')
+const CameraIcon = require('./CameraIcon')
 const CameraScreen = require('./CameraScreen')
 const PermissionsScreen = require('./PermissionsScreen')
 
@@ -43,7 +43,7 @@ module.exports = class Webcam extends Plugin {
     this.id = this.opts.id || 'Webcam'
     this.title = 'Webcam'
     this.type = 'acquirer'
-    this.icon = WebcamIcon
+    this.icon = CameraIcon
 
     const defaultLocale = {
       strings: {
@@ -316,7 +316,7 @@ module.exports = class Webcam extends Plugin {
     const webcamState = this.getPluginState()
 
     if (!webcamState.cameraReady) {
-      return <PermissionsScreen icon={WebcamIcon} />
+      return <PermissionsScreen icon={CameraIcon} />
     }
 
     return <CameraScreen

src/scss/_webcam.scss

@@ -35,9 +35,6 @@
   }
 
 .uppy-Webcam-buttonContainer {
-  // position: absolute;
-  // bottom: 30px;
-  // right: 30px;
   width: 100%;
   height: 75px;
   border-top: 1px solid rgba($color-gray, 0.2);
@@ -47,11 +44,32 @@
   padding: 0 20px;
 }
 
-.uppy-Webcam-recordButton .UppyIcon {
-  width: 50%;
-  height: 50%;
-  position: relative;
-  top: -1px;
+.uppy-Webcam-button {
+  width: 45px;
+  height: 45px;
+  border-radius: 50%;
+  background-color: $color-red;
+  color: $color-white;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+  .uppy-Dashboard--wide .uppy-Webcam-button {
+    width: 60px;
+    height: 60px;
+  }
+
+  .uppy-Webcam-button:hover {
+    background-color: darken($color-red, 10%);
+  }
+
+  .uppy-Webcam-button .UppyIcon {
+    width: 30px;
+    height: 30px;
+  }
+
+.uppy-Webcam-button--picture {
+  margin-right: 12px;
 }
 
 .uppy-Webcam-permissons {