uppy- prefix for Webcam too

src/plugins/Webcam/CameraScreen.js

@@ -25,16 +25,16 @@ class CameraScreen extends Component {
     const shouldShowSnapshotButton = isModeAvailable(this.props.modes, 'picture')
 
     return (
-      <div class="UppyWebcam-container">
-        <div class="UppyWebcam-videoContainer">
-          <video class="UppyWebcam-video" autoplay muted src={this.props.src || ''} />
+      <div class="uppy-Webcam-container">
+        <div class="uppy-Webcam-videoContainer">
+          <video class="uppy-Webcam-video" autoplay muted src={this.props.src || ''} />
         </div>
-        <div class="UppyWebcam-buttonContainer" ref={(el) => { this.btnContainer = el }}>
+        <div class="uppy-Webcam-buttonContainer" ref={(el) => { this.btnContainer = el }}>
           {shouldShowSnapshotButton ? SnapshotButton(this.props) : null}
           {' '}
           {shouldShowRecordButton ? RecordButton(this.props) : null}
         </div>
-        <canvas class="UppyWebcam-canvas" style="display: none;" />
+        <canvas class="uppy-Webcam-canvas" style="display: none;" />
       </div>
     )
   }

src/plugins/Webcam/RecordButton.js

@@ -5,7 +5,7 @@ const { h } = require('preact')
 module.exports = function RecordButton ({ recording, onStartRecording, onStopRecording }) {
   if (recording) {
     return (
-      <button class="UppyButton--circular UppyButton--red UppyButton--sizeM UppyWebcam-recordButton"
+      <button class="UppyButton--circular UppyButton--red UppyButton--sizeM uppy-Webcam-recordButton"
         type="button"
         title="Stop Recording"
         aria-label="Stop Recording"
@@ -16,7 +16,7 @@ module.exports = function RecordButton ({ recording, onStartRecording, onStopRec
   }
 
   return (
-    <button class="UppyButton--circular UppyButton--red UppyButton--sizeM UppyWebcam-recordButton"
+    <button class="UppyButton--circular UppyButton--red UppyButton--sizeM uppy-Webcam-recordButton"
       type="button"
       title="Begin Recording"
       aria-label="Begin Recording"

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 UppyWebcam-recordButton"
+    <button class="UppyButton--circular UppyButton--red UppyButton--sizeM uppy-Webcam-recordButton"
       type="button"
       title="Take a snapshot"
       aria-label="Take a snapshot"

src/plugins/Webcam/index.js

@@ -195,7 +195,7 @@ module.exports = class Webcam extends Plugin {
   }
 
   getVideoElement () {
-    return this.el.querySelector('.UppyWebcam-video')
+    return this.el.querySelector('.uppy-Webcam-video')
   }
 
   oneTwoThreeSmile () {

src/scss/_webcam.scss

@@ -3,7 +3,7 @@
 // @import '_animation.scss';
 // @import '_common.scss';
 
-.UppyWebcam-container {
+.uppy-Webcam-container {
   width: 100%;
   height: 100%;
   display: flex;
@@ -11,29 +11,29 @@
   align-items: center;
 }
 
-.UppyWebcam-videoContainer {
+.uppy-Webcam-videoContainer {
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
-.UppyWebcam-video {
+.uppy-Webcam-video {
   max-width: 100%;
   max-height: 100%;
 }
 
-// .UppyWebcam-canvas {
+// .uppy-Webcam-canvas {
 //   display: none;
 // }
 
-.UppyWebcam-buttonContainer {
+.uppy-Webcam-buttonContainer {
   position: absolute;
   bottom: 30px;
   right: 30px;
 }
 
-.UppyWebcam-recordButton .UppyIcon {
+.uppy-Webcam-recordButton .UppyIcon {
   width: 50%;
   height: 50%;
   position: relative;