ringcentral · embbnux · Aug 4, 2017 · Aug 3, 2017 · Aug 3, 2017 · Aug 3, 2017
diff --git a/docs/src/app/pages/Components/ActiveCallPad/Demo.js b/docs/src/app/pages/Components/ActiveCallPad/Demo.js
@@ -13,7 +13,9 @@ props.hangup = () => null;
 props.onShowKeyPad = () => null;
 props.onAdd = () => null;
 props.currentLocale = 'en-US';
-
+props.flipNumbers = [];
+props.recordStatus = 'recordStatus-idle';
+props.onShowFlipPanel = () => null;
 /**
  * A example of `ActiveCallPad`
  */

diff --git a/docs/src/app/pages/Components/ActiveCallPanel/Demo.js b/docs/src/app/pages/Components/ActiveCallPanel/Demo.js
@@ -23,6 +23,9 @@ props.nameMatches = [];
 props.onSelectMatcherName = () => null;
 props.selectedMatcherIndex = 0;
 props.fallBackName = 'Unknown';
+props.flipNumbers = [];
+props.recordStatus = 'recordStatus-idle';
+props.onShowKeyPad = () => null;
 /**
  * A example of `ActiveCallPanel`
  */

diff --git a/docs/src/www/index.html b/docs/src/www/index.html
@@ -4,7 +4,7 @@
 <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <title>RingCentral Js Widget</title>
+  <title>RingCentral JS Widget</title>
   <meta name="description" content="Documentation site for RingCentral JS Widget">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" type="text/css" href="css/main.css">

diff --git a/src/components/ActiveCallButton/index.js b/src/components/ActiveCallButton/index.js
@@ -6,29 +6,43 @@ import CircleButton from '../CircleButton';
 import styles from './styles.scss';
 
 export default function ActiveCallButton(props) {
-  const className = classnames(styles.root, props.className);
+  const className = classnames(styles.btnSvg, props.className);
   const buttonClassName = classnames(
     styles.button,
     props.buttonClassName,
     props.active ? styles.buttonActive : null,
     props.disabled ? styles.buttonDisabled : null,
   );
   return (
-    <div className={className}>
-      <div className={styles.buttonContainer}>
-        <CircleButton
-          className={buttonClassName}
-          onClick={props.onClick}
-          icon={props.icon}
-          disabled={props.disabled}
-          showBorder={props.showBorder}
-          iconClassName={props.buttonClassName}
-        />
-      </div>
-      <div className={styles.buttonTitle}>
+    <svg
+      className={className}
+      viewBox="0 0 500 400"
+      width={props.width}
+      height={props.height}
+      x={props.x}
+      y={props.y}
+    >
+      <CircleButton
+        width={'250'}
+        height={'250'}
+        x={125}
+        y={0}
+        className={buttonClassName}
+        onClick={props.onClick}
+        icon={props.icon}
+        disabled={props.disabled}
+        showBorder={props.showBorder}
+        iconClassName={props.buttonClassName}
+      />
+      <text
+        className={styles.buttonTitle}
+        x="250"
+        y="340"
+        textAnchor="middle"
+      >
         {props.title}
-      </div>
-    </div>
+      </text>
+    </svg>
   );
 }
 
@@ -41,6 +55,10 @@ ActiveCallButton.propTypes = {
   title: PropTypes.string.isRequired,
   icon: PropTypes.func,
   showBorder: PropTypes.bool,
+  width: PropTypes.string,
+  height: PropTypes.string,
+  x: PropTypes.number,
+  y: PropTypes.number,
 };
 
 ActiveCallButton.defaultProps = {
@@ -50,4 +68,8 @@ ActiveCallButton.defaultProps = {
   active: false,
   icon: undefined,
   showBorder: true,
+  width: '100%',
+  height: '100%',
+  x: 0,
+  y: 0,
 };
diff --git a/src/components/ActiveCallButton/styles.scss b/src/components/ActiveCallButton/styles.scss
@@ -20,18 +20,9 @@ $title-height: 24px;
   margin-bottom: 2px;
 }
 
-.buttonContainer {
-  padding-left: 22%;
-  padding-right: 22%;
-}
-
 .buttonTitle {
   @include secondary-font;
-  font-size: 12px;
-  text-align: center;
-  width: 100%;
-  line-height: $title-height;
-  height: $title-height;
+  font-size: 73px;
 }
 
 .buttonActive {

diff --git a/src/components/ActiveCallPad/styles.scss b/src/components/ActiveCallPad/styles.scss
@@ -27,7 +27,9 @@
 }
 
 .stopButton {
-  background: #ff4646;
+  circle {
+    fill: #ff4646;
+  }
   g, path {
     fill: #ffffff;
   }

diff --git a/src/components/ActiveCallPanel/index.js b/src/components/ActiveCallPanel/index.js
@@ -197,22 +197,22 @@ ActiveCallPanel.propTypes = {
   backButtonLabel: PropTypes.string,
   brand: PropTypes.string,
   showContactDisplayPlaceholder: PropTypes.bool,
-  onShowFlipPanel: PropTypes.func.isRequired,
-  flipNumbers: PropTypes.array.isRequired,
+  onShowFlipPanel: PropTypes.func,
+  flipNumbers: PropTypes.array,
 };
 
 ActiveCallPanel.defaultProps = {
   startTime: null,
   isOnMute: false,
   isOnHold: false,
-  isOnRecord: false,
   phoneNumber: null,
   children: undefined,
   avatarUrl: null,
   backButtonLabel: 'Active Calls',
   brand: 'RingCentral',
   showContactDisplayPlaceholder: true,
   flipNumbers: [],
+  onShowFlipPanel: () => null,
 };
 
 export default ActiveCallPanel;
diff --git a/src/components/CircleButton/index.js b/src/components/CircleButton/index.js
@@ -26,24 +26,27 @@ function CircleButton(props) {
   );
   const onClick = props.disabled ? () => {} : props.onClick;
   return (
-    <div
-      className={classnames(styles.root, props.className)}
+    <svg
+      className={classnames(styles.btnSvg, props.className)}
+      viewBox="0 0 500 500"
       onClick={onClick}
+      width={props.width}
+      height={props.height}
+      x={props.x}
+      y={props.y}
     >
-      <svg className={styles.btnSvg} viewBox="0 0 500 500">
-        <g
-          className={styles.btnSvgGroup}
-        >
-          <circle
-            className={circleClass}
-            cx="250"
-            cy="250"
-            r="245"
-          />
-          {icon}
-        </g>
-      </svg>
-    </div>
+      <g
+        className={styles.btnSvgGroup}
+      >
+        <circle
+          className={circleClass}
+          cx="250"
+          cy="250"
+          r="245"
+        />
+        {icon}
+      </g>
+    </svg>
   );
 }
 
@@ -53,6 +56,10 @@ CircleButton.propTypes = {
   showBorder: PropTypes.bool,
   iconClassName: PropTypes.string,
   onClick: PropTypes.func,
+  width: PropTypes.string,
+  height: PropTypes.string,
+  x: PropTypes.number,
+  y: PropTypes.number,
   disabled: PropTypes.bool
 };
 
@@ -63,6 +70,10 @@ CircleButton.defaultProps = {
   iconClassName: undefined,
   disabled: false,
   onClick: () => null,
+  width: '100%',
+  height: '100%',
+  x: 0,
+  y: 0,
 };
 
 export default CircleButton;
diff --git a/src/components/CircleButton/styles.scss b/src/components/CircleButton/styles.scss
@@ -1,17 +1,7 @@
 @import '../../lib/commonStyles/colors.scss';
 @import '../../lib/commonStyles/no-select';
 
-.root {
-  position: relative;
-  width: 100%;
-  box-sizing: border-box;
-  padding-top: 100%;
-}
-
 .btnSvg {
-  position: absolute;
-  top: 0;
-  left: 0;
   width: 100%;
 }
 

diff --git a/src/components/Environment/index.js b/src/components/Environment/index.js
@@ -99,7 +99,10 @@ class Environment extends Component {
       <div className={styles.root}>
         <BackHeader
           onBackClick={this.onCancel}
-        >Environment</BackHeader>
+          buttons={[]}
+        >
+          Environment
+        </BackHeader>
         <Panel classname={styles.content}>
           <Line>
             Server

diff --git a/src/components/IncomingCallPad/index.js b/src/components/IncomingCallPad/index.js
@@ -58,9 +58,10 @@ export default class IncomingCallPad extends Component {
       answer,
       forwardingNumbers,
       formatPhone,
+      className,
     } = this.props;
     return (
-      <div className={styles.root}>
+      <div className={classnames(styles.root, className)}>
         <div
           className={styles.forwardContainner}
           ref={(containner) => {
@@ -165,8 +166,10 @@ IncomingCallPad.propTypes = {
   formatPhone: PropTypes.func,
   onForward: PropTypes.func.isRequired,
   replyWithMessage: PropTypes.func.isRequired,
+  className: PropTypes.string
 };
 
 IncomingCallPad.defaultProps = {
   formatPhone: phone => phone,
+  className: null,
 };
diff --git a/src/components/IncomingCallPad/styles.scss b/src/components/IncomingCallPad/styles.scss
@@ -7,36 +7,47 @@
 .buttonRow {
   text-align: center;
   margin-bottom: 10px;
+  height: 24%;
 }
 
 .callButton {
   width: 33.33%;
   padding: 0;
+
+  text {
+    font-size: 73px;
+  }
 }
 
 .bigCallButton {
   composes: callButton;
-  padding: 1px;
   width: 50%;
+  text {
+    font-size: 65px;
+  }
 }
 
 .rejectButton {
-  background: #ff4646;
-  font-size: 20px;
+  circle {
+    fill: #ff4646;
+  }
   g, path {
     fill: #ffffff;
   }
 }
 
 .answerButton {
   composes: rejectButton;
-  background: #4cd964;
+  circle {
+    fill: #4cd964;
+  }
 }
 
 .answerButtonGroup {
-  width: 75%;
+  width: 76%;
   margin-left: auto;
   margin-right: auto;
+  height: 27%;
 }
 
 .forwardContainner{

diff --git a/src/components/IncomingCallPanel/index.js b/src/components/IncomingCallPanel/index.js
@@ -95,6 +95,7 @@ export default function IncomingCallPanel(props) {
         showContactDisplayPlaceholder={props.showContactDisplayPlaceholder}
       />
       <IncomingCallPad
+        className={styles.callPad}
         forwardingNumbers={props.forwardingNumbers}
         formatPhone={props.formatPhone}
         answer={props.answer}

diff --git a/src/components/IncomingCallPanel/styles.scss b/src/components/IncomingCallPanel/styles.scss
@@ -1,6 +1,8 @@
 @import '../../lib/commonStyles/full-size';
 @import '../../lib/commonStyles/colors';
 
+$userInfoHight: 180px;
+
 .root {
   @include full-size;
   box-sizing: border-box;
@@ -21,14 +23,21 @@
   font-size: 13px;
   color: $grey-light;
   transform: rotate(90deg);
+  cursor: pointer;
 }
 
 .userInfo {
   margin-top: 0;
   text-align: center;
   font-size: 60px;
   color: lightblack;
-  margin-bottom: 40px;
+  width: 100%;
+  height: $userInfoHight;
+}
+
+.callPad {
+  height: calc(100% - #{$userInfoHight});
+  padding-bottom: 30px;
 }
 
 .avatarContainer {