Merge pull request #19 from sendbird/feature/calls-1497

[CALLS-1497] Update Sample Strings

Author: git-babel

css/main.css

@@ -106,7 +106,7 @@ body {
 }
 
 .title-choice-type {
-  width: 174px;
+  width: 185px;
   height: 20px;
   letter-spacing: -0.1px;
   color: var(--navy-600);

lib/components/Header.js

@@ -12,7 +12,7 @@ export default class Header extends BaseElement {
 
     this.settingItems = [
       {
-        'label': 'Device settings',
+        'label': 'Device Settings',
         'callback': () => { this.sendToParent('show_settings') }
       },
       {

lib/components/TabToolBar.js

@@ -15,7 +15,7 @@ export default class TabToolBar extends BaseElement {
     }
     const btnDial = createDiv({ id: 'btn_tab_dial', className: `${classes['btnTab']}` });
     const icoTabDial = createDiv({id: 'ico_tab_dial', className: `${classes['tabIco']}  ${classes['dialActive']}`});
-    const btnDialCaption = createParagraph({id: 'btn_dial_caption', innerText: 'Dial', className: `${classes['fontSmall']} ${classes['fontHeavy']} ${classes['btnTabCaption']} ${classes['btnTabActive']}`});
+    const btnDialCaption = createParagraph({id: 'btn_dial_caption', innerText: 'Call', className: `${classes['fontSmall']} ${classes['fontHeavy']} ${classes['btnTabCaption']} ${classes['btnTabActive']}`});
 
     btnDial.appendChild(icoTabDial);
     btnDial.appendChild(btnDialCaption);
@@ -37,7 +37,7 @@ export default class TabToolBar extends BaseElement {
 
     const btnCallLog = createDiv({id: 'btn_tab_calllog', className: `${classes['btnTab']}`});
     const icoCallLog = createDiv({id: 'ico_tab_callog', className: `${classes['tabIco']} ${classes['callLogDeactive']}`});
-    const btnCalllogCaption = createParagraph({id: 'btn_calllog_caption', innerText: 'History', className: `${classes['fontSmall']} ${classes['fontHeavy']} ${classes['btnTabCaption']} ${classes['btnTabDeactive']}`});
+    const btnCalllogCaption = createParagraph({id: 'btn_calllog_caption', innerText: 'Recents', className: `${classes['fontSmall']} ${classes['fontHeavy']} ${classes['btnTabCaption']} ${classes['btnTabDeactive']}`});
 
     btnCallLog.appendChild(icoCallLog);
     btnCallLog.appendChild(btnCalllogCaption);

lib/css/styles.js

@@ -608,7 +608,7 @@ const styles = {
   },
 
   dialTitle: {
-    marginBottom: '16px'
+    marginBottom: '32px'
   },
 
   /*** buttons ***/
@@ -1273,15 +1273,6 @@ const styles = {
     backgroundPosition: 'center'
   },
 
-  dialDesc: {
-    width: '312px',
-    height: '40px',
-    textAlign: 'center',
-    color: colors.navy400,
-    marginBottom: '32px',
-    letterSpacing: '-0.1px'
-  },
-
   btnVideo: {
     backgroundImage: `url(${videoPurpleIcon})`,
     backgroundRepeat: 'no-repeat',

lib/views/AppInfoView.js

@@ -1,7 +1,6 @@
-import SendBirdCall from "sendbird-calls";
 import BaseElement from "../components/BaseElement";
 import { classes } from "../css/styles";
-import { createDiv, createLabel, createOption, createSelect } from "../utils/domUtil";
+import { createDiv, createLabel } from "../utils/domUtil";
 
 export default class AppInfoView extends BaseElement {
   constructor({ args }) {
@@ -55,7 +54,7 @@ export default class AppInfoView extends BaseElement {
     const applicationInfoContainer = createDiv({ id: 'select_container', className: classes['selectContainer'] });
     const applicationNameLabel = createLabel({
       id: 'app_name_label',
-      innerText: 'Application name',
+      innerText: 'Name',
       className: `${classes['popupItemLabel']} ${classes['fontSmall']} ${classes['fontHeavy']}`
     });
     const applicationName = createLabel({
@@ -69,7 +68,7 @@ export default class AppInfoView extends BaseElement {
 
     const applicationIDLabel = createLabel({
       id: 'app_id_label',
-      innerText: 'Application ID',
+      innerText: 'ID',
       className: `${classes['popupItemLabel']} ${classes['fontSmall']} ${classes['fontHeavy']}`
     });
 

lib/views/CallLogItem.js

@@ -126,7 +126,10 @@ export class CallLogItem {
     } else {
       const wrapper = createDiv({ id: 'empty_calllog', className: className });
       const icoCallLogEmpty = createDiv({ className: `${classes['icoCallLogEmpty']}` });
-      const labelCallLogEmpty = createDiv({ innerText: 'No call history', className: `${classes['labelCallLogEmpty']} ${classes['font16']} ${classes['fontHeavy']}` });
+      const labelCallLogEmpty = createDiv({
+        innerText: 'The list of calls you make will show here.\nTap the phone button to start making a call.',
+        className: `${classes['labelCallLogEmpty']} ${classes['fontSmall']}`
+      });
       wrapper.appendChild(icoCallLogEmpty);
       wrapper.appendChild(labelCallLogEmpty);
 

lib/views/CallView.js

@@ -1,7 +1,6 @@
 import BaseElement from "../components/BaseElement";
 import { createAudio, createDiv, createImg, createLabel, createVideo } from "../utils/domUtil";
 import { getCallOption } from "../utils/util";
-import { hasClassName } from "../utils/domUtil";
 import CallButtons from "./CallButtons";
 import { classes } from "../css/styles.js";
 import PeriodicJob from "../modules/periodicJob";
@@ -38,9 +37,9 @@ export default class CallView extends BaseElement {
 
     let connectionText;
     if (this.call.isVideoCall) {
-      connectionText = 'Incoming video call…';
+      connectionText = 'incoming video call…';
     } else {
-      connectionText = 'Incoming voice call…';
+      connectionText = 'incoming voice call…';
     }
     this.connectionInfo = createLabel({
       id: 'conn_info_label',
@@ -50,7 +49,7 @@ export default class CallView extends BaseElement {
 
     const peerStateDiv = createDiv({ id: 'peer_state', className: `${classes['column']} ${classes['peerStateDiv']} ${classes['invisible']}` });
     const peerMuteIcon = createDiv({ id: 'peer_mute_icon', className: `${classes['peerMuteIcon']}` });
-    const peerMuteLabel = createLabel({ id: 'peer_mute_label', className: `${classes['peerMuteLabel']} ${classes['fontSmall']} ${classes['fontColorWhite']}`, innerText: `${remoteUser.userId} audio muted this call` });
+    const peerMuteLabel = createLabel({ id: 'peer_mute_label', className: `${classes['peerMuteLabel']} ${classes['fontSmall']} ${classes['fontColorWhite']}`, innerText: `${remoteUser.userId} is muted.` });
     peerStateDiv.appendChild(peerMuteIcon);
     peerStateDiv.appendChild(peerMuteLabel);
 
@@ -227,7 +226,7 @@ export default class CallView extends BaseElement {
 
   drawCallingText() {
     this.removeConnectionInfoDrawer();
-    const rotatingTexts = ['Calling', 'Calling.', 'Calling..'];
+    const rotatingTexts = ['calling', 'calling.', 'calling..'];
     let frame = 0;
     this.connectionInfoDrawer = new PeriodicJob(() => {
       this.connectionInfo.innerText = rotatingTexts[frame];
@@ -237,7 +236,7 @@ export default class CallView extends BaseElement {
 
   drawReconnectingText() {
     this.removeConnectionInfoDrawer();
-    const rotatingTexts = ['Reconnecting', 'Reconnecting.', 'Reconnecting..'];
+    const rotatingTexts = ['reconnecting', 'reconnecting.', 'reconnecting..'];
     let frame = 0;
     this.connectionInfoDrawer = new PeriodicJob(() => {
       this.connectionInfo.innerText = rotatingTexts[frame];

lib/views/DialView.js

@@ -28,10 +28,6 @@ export default class DialView extends BaseElement {
       className: `${classes['formContainer']} ${classes['column']} ${classes['center']}`
     });
     const dialTitleDiv = createDiv({ id: 'title', className: `${classes['fontBig']} ${classes['fontDemi']} ${classes['dialTitle']}`, innerText: 'Make a call'});
-    const descDiv = createDiv({id: 'desc_div', 
-      innerText: 'Enter the user ID of the user you wish to call, then press one of the video or voice call buttons',
-      className: `${classes['fontNormal']} ${classes['dialDesc']} ${classes['fontHeavy']}`
-    });
 
     const peerId = createInput({
       id: 'peer_id',
@@ -54,7 +50,6 @@ export default class DialView extends BaseElement {
     btns.appendChild(btnAudio);
 
     formContainer.appendChild(dialTitleDiv);
-    formContainer.appendChild(descDiv);
     formContainer.appendChild(peerId);
     formContainer.appendChild(btns);
 

lib/views/LoginView.js

@@ -41,11 +41,11 @@ export default class LoginView extends BaseElement {
     loginTitleDiv.appendChild(loginTitle);
 
     const formContainer = createDiv({ id: 'form_container', className: classes['formContainer'] });
-    const inputAppIdLabel = createLabel({ id: 'input_app_id_label', htmlFor: 'input_app_id', innerText: 'App ID', className: `${classes['fieldLabel']} ${classes['fontSmall']} ${classes['fontHeavy']}` });
+    const inputAppIdLabel = createLabel({ id: 'input_app_id_label', htmlFor: 'input_app_id', innerText: 'Application ID', className: `${classes['fieldLabel']} ${classes['fontSmall']} ${classes['fontHeavy']}` });
     const inputAppId = createInput({ id: 'input_app_id', className: `${classes['field']} ${classes['fontNormal']}` });
     const inputIdLabel = createLabel({ id: 'input_id_label', htmlFor: 'input_id', innerText: 'User ID', className: `${classes['fieldLabel']} ${classes['fontSmall']} ${classes['fontHeavy']}` });
     const inputId = createInput({ id: 'input_id', className: `${classes['field']} ${classes['fontNormal']}` });
-    const inputAccessTokenLabel = createLabel({ id: 'input_access_token_label', htmlFor: 'input_access_token', innerText: 'Access Token', className: `${classes['fieldLabel']} ${classes['fontSmall']} ${classes['fontHeavy']}` });
+    const inputAccessTokenLabel = createLabel({ id: 'input_access_token_label', htmlFor: 'input_access_token', innerText: 'Access token', className: `${classes['fieldLabel']} ${classes['fontSmall']} ${classes['fontHeavy']}` });
     const inputAccessToken = createInput({ id: 'input_access_token', className: `${classes['field']} ${classes['fontNormal']}` });
 
     const btnLogin = createButton({ id: 'btn_login', className: `${classes['btn']} ${classes['btnPrimary']} ${classes['btnMid']} ${classes['loginButton']} ${classes['fontNormal']}`, });

views/index.html

@@ -13,18 +13,18 @@
       <div id="welcome_view" class="column center">
         <img src="<%=require('../img/ic-logo-horizontal.svg')%>" alt="Sendbird horizontal logo svg icon" class="ic-logo-horizontal">
         <div class="voice-sample-page title font-weight-demi">
-          Sendbird Calls Quickstart
+          Sendbird Calls
         </div>
         <div class="title-choice-type">
-          Choose an application type
+          Choose a quickstart app type
         </div>
         <div class="row center margin-top-24">
           <div class="choice-item margin-right-24" onclick="location.href='main.html'">
             <div class="title-choice-item">
               Full-screen
             </div>
             <div class="desc-choice-item">
-              The full-screen application type provides an example of a standalone phone call web app.
+              The full-screen type allows you to make calls without any installation on your browser.
             </div>
           </div>
 
@@ -33,7 +33,7 @@
               Widget
             </div>
             <div class="desc-choice-item">
-              The widget application type showcases how a phone call may be overlaid on top of an existing web application.
+              The widget type allows you to make calls on your existing web application.
             </div>
           </div>
         </div>