Merge pull request #4 from fbaiodias/adding_design_to_component

Design added

package.json

@@ -23,6 +23,7 @@
     "react-dom": "^16.2.0"
   },
   "dependencies": {
+    "react-svg-inline": "^2.1.0",
     "styled-components": "^3.2.1"
   },
   "devDependencies": {

src/defaults/button.js

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

src/defaults/buttonRec.js

@@ -0,0 +1,21 @@
+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;
+  background: #e55226;
+  border: 6px solid white;
+  outline: none;
+  cursor: pointer;
+`
+
+Button.defaultProps = {
+  color: 'black',
+  backgroundColor: 'white'
+}
+
+export default Button

src/defaults/buttonStop.js

@@ -0,0 +1,21 @@
+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;
+  background: #e55226;
+  border: 6px solid white;
+  outline: none;
+  cursor: pointer;
+`
+
+Button.defaultProps = {
+  color: 'black',
+  backgroundColor: 'white'
+}
+
+export default Button

src/defaults/render-actions.js

@@ -1,6 +1,8 @@
 import React from 'react'
 import styled from 'styled-components'
 import Button from './button'
+import ButtonRec from './buttonRec'
+import ButtonStop from './buttonStop'
 
 const ActionsWrapper = styled.div`
   position: absolute;
@@ -39,19 +41,19 @@ export default ({
     }
 
     if (isRecording) {
-      return <Button onClick={onStopRecording}>Stop recording</Button>
+      return <ButtonStop onClick={onStopRecording} />
     }
 
     if (isCameraOn && streamIsReady) {
       return (
         <div>
-          <Button onClick={onTurnOffCamera}>Turn camera off</Button>
-          <Button onClick={onStartRecording}>Start recording</Button>
+          {/* <Button onClick={onTurnOffCamera} >.</Button> */}
+          <ButtonRec onClick={onStartRecording} />
         </div>
       )
     }
 
-    return <Button onClick={onTurnOnCamera}>Turn camera on</Button>
+    return <Button onClick={onTurnOnCamera}>Answer this question</Button>
   }
 
   return <ActionsWrapper>{renderContent()}</ActionsWrapper>

yarn.lock

@@ -2239,7 +2239,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2.5:
+classnames@^2.2.1, classnames@^2.2.5:
   version "2.2.5"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
 
@@ -7545,6 +7545,13 @@ react-style-proptype@^3.0.0:
   dependencies:
     prop-types "^15.5.4"
 
+react-svg-inline@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/react-svg-inline/-/react-svg-inline-2.1.0.tgz#1ee3a1a2b2ca0b3629822cddd5327a1125c0184f"
+  dependencies:
+    classnames "^2.2.1"
+    prop-types "^15.5.8"
+
 react-test-renderer@^16.0.0-0:
   version "16.2.0"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.2.0.tgz#bddf259a6b8fcd8555f012afc8eacc238872a211"