From 45a2e707190fe2f86bb3d018f1d7cc66a07ca537 Mon Sep 17 00:00:00 2001
From: Artur Paikin <artur@arturpaikin.com>
Date: Wed, 20 Dec 2017 00:15:01 -0500
Subject: [PATCH] uppy- prefix for Webcam too

---
 src/plugins/Webcam/CameraScreen.js   | 10 +++++-----
 src/plugins/Webcam/RecordButton.js   |  4 ++--
 src/plugins/Webcam/SnapshotButton.js |  2 +-
 src/plugins/Webcam/index.js          |  2 +-
 src/scss/_webcam.scss                | 12 ++++++------
 5 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/plugins/Webcam/CameraScreen.js b/src/plugins/Webcam/CameraScreen.js
index 25a6bfd39..2ac2e0fac 100644
--- a/src/plugins/Webcam/CameraScreen.js
+++ b/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>
     )
   }
diff --git a/src/plugins/Webcam/RecordButton.js b/src/plugins/Webcam/RecordButton.js
index 50a21668f..1fef2b8b8 100644
--- a/src/plugins/Webcam/RecordButton.js
+++ b/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"
diff --git a/src/plugins/Webcam/SnapshotButton.js b/src/plugins/Webcam/SnapshotButton.js
index b4adb1040..ec0bd9e8f 100644
--- a/src/plugins/Webcam/SnapshotButton.js
+++ b/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"
diff --git a/src/plugins/Webcam/index.js b/src/plugins/Webcam/index.js
index d3dbc185d..264223443 100644
--- a/src/plugins/Webcam/index.js
+++ b/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 () {
diff --git a/src/scss/_webcam.scss b/src/scss/_webcam.scss
index 179162d5c..11ea9b9eb 100644
--- a/src/scss/_webcam.scss
+++ b/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;