Merge pull request #6 from fbaiodias/adding_design_to_component

Adding design to component

src/defaults/button.js

@@ -3,11 +3,12 @@ import styled from 'styled-components'
 const Button = styled.button`
   background: ${props => props.backgroundColor};
   color: ${props => props.color};
-  border-radius: 3px;
-  padding: 10px 15px;
+  border-radius: 4px;
+  padding: 10px 18px;
   border: none;
   margin: 5px;
   font-size: 18px;
+  font-weight: bold;
   outline: none;
   cursor: pointer;
 `

src/defaults/buttonRec.js

@@ -1,21 +1,32 @@
+import React from 'react'
 import styled from 'styled-components'
 
 const Button = styled.button`
   background: ${props => props.backgroundColor};
   color: ${props => props.color};
-  border-radius: 100px;
-  margin: 5px;
-  width: 54px;
-  height: 54px;
+  border-radius: 50%;
+  width: 44px;
+  height: 44px;
   background: #e55226;
-  border: 6px solid white;
   outline: none;
+  border: none;
   cursor: pointer;
 `
 
+const DivBorder = styled.div`
+  border: 6px solid rgba(255, 255, 255, 0.4);
+  height: 44px;
+  width: 44px;
+  border-radius: 50%;
+`
+
 Button.defaultProps = {
   color: 'black',
   backgroundColor: 'white'
 }
 
-export default Button
+export default props => (
+  <DivBorder>
+    <Button {...props} />
+  </DivBorder>
+)

src/defaults/buttonStop.js

@@ -1,21 +1,32 @@
+import React from 'react'
 import styled from 'styled-components'
 
 const Button = styled.button`
   background: ${props => props.backgroundColor};
   color: ${props => props.color};
-  border-radius: 6px;
-  margin: 5px;
-  width: 54px;
-  height: 54px;
+  border-radius: 4px;
+  width: 44px;
+  height: 44px;
   background: #e55226;
-  border: 6px solid white;
   outline: none;
+  border: none;
   cursor: pointer;
 `
 
+const DivBorder = styled.div`
+  border: 6px solid rgba(255, 255, 255, 0.4);
+  height: 44px;
+  width: 44px;
+  border-radius: 10px;
+`
+
 Button.defaultProps = {
   color: 'black',
   backgroundColor: 'white'
 }
 
-export default Button
+export default props => (
+  <DivBorder>
+    <Button {...props} />
+  </DivBorder>
+)

src/defaults/render-actions.js

@@ -13,7 +13,7 @@ const ActionsWrapper = styled.div`
   align-items: center;
   justify-content: center;
   padding-top: 20px;
-  padding-bottom: 30px;
+  padding-bottom: 40px;
 `
 
 export default ({
@@ -53,7 +53,7 @@ export default ({
       )
     }
 
-    return <Button onClick={onTurnOnCamera}>Answer this question</Button>
+    return <Button onClick={onTurnOnCamera}>🎥 Answer</Button>
   }
 
   return <ActionsWrapper>{renderContent()}</ActionsWrapper>

src/video-recorder.js

@@ -45,6 +45,7 @@ const Wrapper = styled.div`
   overflow: hidden;
   min-height: 119px;
   background-color: #000;
+  color: white;
 `
 
 const CameraView = styled.div`
@@ -123,9 +124,7 @@ export default class VideoRecorder extends Component {
       streamIsReady: false,
       isInlineRecordingSupported,
       isVideoInputSupported,
-      stream: undefined,
-      showInstallModal: false,
-      installClicked: false
+      stream: undefined
     }
 
     this.handleSuccess = this.handleSuccess.bind(this)