Merge branch 'v4' into toanzian/build-sync

package.json

@@ -17,7 +17,6 @@
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "23.6.0"
   },
-
   "jest": {
     "setupTestFrameworkScriptFile": "./testSetup.js",
     "transform": {

packages/app/client/src/ui/dialogs/botCreationDialog/botCreationDialog.scss

@@ -30,8 +30,7 @@
     border: 1px solid transparent;
     color: var(--focused-selected-list-item-bg);
     cursor: pointer;
-    font-family: var(--default-font-family);
-    font-weight: 600;
+    font-family: var(--default-font-semibold);
     padding: 0;
     white-space: normal;
     text-decoration: none;

packages/app/client/src/ui/editor/appSettingsEditor/appSettingsEditor.scss

@@ -1,4 +1,10 @@
 .appSettingsEditor {
+
+  :global {
+    input {
+      font-family: var(--default-font-family);
+    }
+  }
   p {
     margin: 0 0 16px 0;
   }
@@ -7,8 +13,7 @@
     border: 1px solid transparent;
     color: var(--focused-selected-list-item-bg);
     cursor: pointer;
-    font-family: var(--default-font-family);
-    font-weight: 600;
+    font-family: var(--default-font-semibold);
     white-space: normal;
     text-decoration: none;
 
@@ -62,6 +67,7 @@
 
 .appSettingsInput {
   color: var(--neutral-5);
+  font-family: var(--default-font-family)
 }
 
 .spacing {

packages/app/client/src/ui/editor/emulator/emulator.scss

@@ -1,18 +1,40 @@
 .emulator {
   display: flex;
-  flex-direction: column;
   flex: 1;
+  flex-direction: column;
   height: 100%;
+
   & .vertical {
     display: flex;
-    flex-direction: column;
     flex: 1;
+    flex-direction: column;
   }
 
   & .header {
+    flex-basis: 0;
     flex-grow: 0;
     flex-shrink: 1;
-    flex-basis: 0;
+
+    .toolbar-icon {
+      &::before {
+        background-color: var(--toolbar-icon-color);
+        content: '';
+        display: inline-block;
+        height: 15px;
+        margin-right: 3px;
+        position: relative;
+        top: 3px;
+        width: 15px;
+        -webkit-mask-size: 15px;
+      }
+    }
+
+    .restart-icon {
+      &::before { -webkit-mask: url(../../media/ic_refresh.svg); }
+    }
+    .save-transcript-icon {
+      &::before { -webkit-mask: url(../../media/ic_save.svg); }
+    }
   }
 
   & .content {

packages/app/client/src/ui/editor/emulator/emulator.scss.d.ts

@@ -2,6 +2,9 @@
 export const emulator: string;
 export const vertical: string;
 export const header: string;
+export const toolbarIcon: string;
+export const restartIcon: string;
+export const saveTranscriptIcon: string;
 export const content: string;
 export const presentation: string;
 export const chatPanel: string;

packages/app/client/src/ui/editor/emulator/emulator.tsx

@@ -243,20 +243,35 @@ class EmulatorComponent extends React.Component<EmulatorProps, {}> {
                      onStartConversation={ this.handleStartOverClick }/>
           { chatPanelChild }
         </div>
-        <span className={ styles.closePresentationIcon } onClick={ () => this.handlePresentationClick(false) }></span>
+        <span 
+          className={ styles.closePresentationIcon } 
+          onClick={ () => this.handlePresentationClick(false) }
+        />
       </div>
     );
   }
 
   renderDefaultView(): JSX.Element {
     return (
       <div className={ styles.emulator }>
-        {
+        { 
           this.props.mode === 'livechat' &&
           <div className={ styles.header }>
             <ToolBar>
-              <ToolBarButton visible={ true } title="Start Over" onClick={ this.handleStartOverClick }/>
-              <ToolBarButton visible={ true } title="Save Transcript As..." onClick={ this.handleExportClick }/>
+              <ToolBarButton 
+                iconClassName={ styles.toolbarIcon } 
+                icon={ styles.restartIcon } 
+                visible={ true } 
+                title="Restart conversation" 
+                onClick={ this.handleStartOverClick }
+              />
+              <ToolBarButton 
+                iconClassName={ styles.toolbarIcon } 
+                icon={ styles.saveTranscriptIcon } 
+                visible={ true } 
+                title="Save transcript" 
+                onClick={ this.handleExportClick }
+              />
             </ToolBar>
           </div>
         }

packages/app/client/src/ui/editor/toolbar/toolbar.tsx

@@ -52,7 +52,12 @@ export default class ToolBar extends React.Component<{}, {}> {
     if (hmrSafeNameComparison(child.type, Button)) {
       return (
         <li key={ i } className={ styles.button }>
-          <button onClick={ () => child.props.onClick() }>{ child.props.title }</button>
+          <button 
+            className={ `${ child.props.icon } ${ child.props.iconClassName || '' }` } 
+            onClick={ () => child.props.onClick() }
+          >
+            { child.props.title }
+          </button>
         </li>
       );
     } else if (hmrSafeNameComparison(child.type, Separator)) {

packages/app/client/src/ui/editor/welcomePage/welcomePage.scss

@@ -92,7 +92,7 @@
     cursor: pointer;
 
     > span {
-      font-weight: 600;
+      font-family: var(--default-font-semibold);
 
       &:hover {
         text-decoration: underline;
@@ -156,8 +156,7 @@
   border: 1px solid transparent;
   color: var(--focused-selected-list-item-bg);
   cursor: pointer;
-  font-family: var(--default-font-family);
-  font-weight: 600;
+  font-family: var(--default-font-semibold);
   padding: 0;
   white-space: normal;
 
@@ -174,7 +173,7 @@
 .how-to-build-section {
   > h3 {
     font-size: 13px;
-    font-weight: 600;
+    font-family: var(--default-font-semibold);
     letter-spacing: 0.35px;
     line-height: 16px;
     margin: 0 0 24px 0;