From 29cc7129f99754cfd10ffd2878c2af6422814f04 Mon Sep 17 00:00:00 2001
From: Pooja Patil <pooja.patil@viamo.io>
Date: Wed, 30 Jun 2021 11:11:05 -0700
Subject: [PATCH 01/22] VMO-4138  Title Component

---
 .../block-editors/TitleEditor.vue             | 74 +++++++++++++++++++
 .../MobilePrimitives_MessageBlock.vue         |  3 +
 2 files changed, 77 insertions(+)
 create mode 100644 src/components/interaction-designer/block-editors/TitleEditor.vue

diff --git a/src/components/interaction-designer/block-editors/TitleEditor.vue b/src/components/interaction-designer/block-editors/TitleEditor.vue
new file mode 100644
index 000000000..f26164a6d
--- /dev/null
+++ b/src/components/interaction-designer/block-editors/TitleEditor.vue
@@ -0,0 +1,74 @@
+<template>
+  <section class="mb-3">
+    <label class="title">Title</label>
+    <div class="d-flex">
+      <input
+        v-model="name"
+        type="text"
+        class="w-100">
+      <span class="btn btn-outline-dark" @click="editCode = !editCode">
+        <i class="glyphicon glyphicon-cog" />
+      </span>
+    </div>
+    <div v-if="editCode">
+      <label>Edit Block Code</label>
+      <div class="d-flex">
+        <input type="text" class="form-control w-100" v-model="autoCode" />
+        <span class="btn btn-outline-dark" @click="editCode = false">
+          <i class="glyphicon glyphicon-check" />
+        </span>
+      </div>
+    </div>
+    <div v-else>
+      <strong>Code:</strong> {{ autoCode }}
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import {Component, Prop} from 'vue-property-decorator'
+import TextEditor from '@/components/common/TextEditor.vue'
+import ValidationMessage from '@/components/common/ValidationMessage.vue'
+import {mixins} from 'vue-class-component'
+import Lang from '@/lib/filters/lang'
+import {IBlock} from '@floip/flow-runner'
+import {namespace} from 'vuex-class'
+
+const flowVuexNamespace = namespace('flow')
+
+@Component({
+  components: {
+    TextEditor,
+    ValidationMessage,
+  },
+})
+class TitleEditor extends mixins(Lang) {
+  autoCode = ''
+  editCode = false
+
+  @Prop() readonly block!: IBlock
+
+  snakeCase = (value: string) => value.trim()
+    .split(' ')
+    .map((word) => word.toLowerCase())
+    .join('_')
+
+  get name(): string {
+    return this.block.name
+  }
+  set name(value: string) {
+    this.block_setName({blockId: this.block.uuid, value})
+    this.autoCode = this.snakeCase(value)
+  }
+
+  @flowVuexNamespace.Mutation block_setName!: ({blockId, value}: {blockId: string, value: string}) => void
+}
+export default TitleEditor
+</script>
+
+<style scoped>
+.title {
+  color: #531944;
+}
+</style>
+
diff --git a/src/components/interaction-designer/block-types/MobilePrimitives_MessageBlock.vue b/src/components/interaction-designer/block-types/MobilePrimitives_MessageBlock.vue
index e87c150b2..c139c7192 100644
--- a/src/components/interaction-designer/block-types/MobilePrimitives_MessageBlock.vue
+++ b/src/components/interaction-designer/block-types/MobilePrimitives_MessageBlock.vue
@@ -5,6 +5,7 @@
     </h3>
 
     <fieldset :disabled="!isEditable">
+      <title-editor :block="block" />
       <block-name-editor :block="block" />
       <block-label-editor :block="block" />
       <block-semantic-label-editor :block="block" />
@@ -36,6 +37,7 @@ import {createDefaultBlockTypeInstallerFor} from '@/store/builder'
 import {mixins} from 'vue-class-component'
 import ResourceEditor from '../resource-editors/ResourceEditor.vue'
 import BlockNameEditor from '../block-editors/NameEditor.vue'
+import TitleEditor from '../block-editors/TitleEditor.vue'
 import BlockLabelEditor from '../block-editors/LabelEditor.vue'
 import BlockSemanticLabelEditor from '../block-editors/SemanticLabelEditor.vue'
 import FirstBlockEditorButton from '../flow-editors/FirstBlockEditorButton.vue'
@@ -52,6 +54,7 @@ const builderVuexNamespace = namespace('builder')
     BlockSemanticLabelEditor,
     FirstBlockEditorButton,
     BlockId,
+    TitleEditor,
   },
 })
 class MobilePrimitives_MessageBlock extends mixins(Lang) {

From 1b0c54de29fe73c73689994ed8bfd17c3546412f Mon Sep 17 00:00:00 2001
From: Pooja Patil <pooja.patil@viamo.io>
Date: Wed, 30 Jun 2021 23:12:42 -0700
Subject: [PATCH 02/22] VMO-4138 Fixed some issues on title editor

---
 .../block-editors/TitleEditor.vue             | 86 +++++++++++++------
 src/store/flow/block.ts                       | 11 +++
 2 files changed, 70 insertions(+), 27 deletions(-)

diff --git a/src/components/interaction-designer/block-editors/TitleEditor.vue b/src/components/interaction-designer/block-editors/TitleEditor.vue
index f26164a6d..917f4a0a7 100644
--- a/src/components/interaction-designer/block-editors/TitleEditor.vue
+++ b/src/components/interaction-designer/block-editors/TitleEditor.vue
@@ -1,26 +1,47 @@
 <template>
   <section class="mb-3">
     <label class="title">Title</label>
-    <div class="d-flex">
-      <input
-        v-model="name"
-        type="text"
-        class="w-100">
-      <span class="btn btn-outline-dark" @click="editCode = !editCode">
-        <i class="glyphicon glyphicon-cog" />
-      </span>
-    </div>
-    <div v-if="editCode">
-      <label>Edit Block Code</label>
+    <validation-message
+      #input-control="{ isValid: isLabelValid }"
+      :message-key="`block/${block.uuid}/label`">
       <div class="d-flex">
-        <input type="text" class="form-control w-100" v-model="autoCode" />
-        <span class="btn btn-outline-dark" @click="editCode = false">
-          <i class="glyphicon glyphicon-check" />
+        <input
+          v-model="blockLabel"
+          type="text"
+          class="form-control w-100"
+          :class="{ 'is-invalid': isLabelValid === false }">
+        <span
+          class="btn btn-outline-secondary"
+          @click="editBlockName = true">
+          <i class="glyphicon glyphicon-cog" />
         </span>
       </div>
-    </div>
-    <div v-else>
-      <strong>Code:</strong> {{ autoCode }}
+    </validation-message>
+    <div class="mt-3">
+      <validation-message
+        #input-control="{ isValid: isNameValid }"
+        :message-key="`block/${block.uuid}/name`">
+        <div v-if="editBlockName || isNameValid === false">
+          <label>Edit Block Code</label>
+          <div class="d-flex">
+            <input
+              v-model="blockName"
+              type="text"
+              class="form-control w-100"
+              :class="{ 'is-invalid': isNameValid === false }"
+              @keydown="filterName">
+            <span
+              class="btn btn-outline-dark"
+              @click="editBlockName = false">
+              <i class="glyphicon glyphicon-check" />
+            </span>
+          </div>
+        </div>
+        <div v-else>
+          <strong>Code:</strong>
+          <span class="block-code"> {{ blockName }} </span>
+        </div>
+      </validation-message>
     </div>
   </section>
 </template>
@@ -43,24 +64,33 @@ const flowVuexNamespace = namespace('flow')
   },
 })
 class TitleEditor extends mixins(Lang) {
-  autoCode = ''
-  editCode = false
+  editBlockName = false
 
   @Prop() readonly block!: IBlock
 
-  snakeCase = (value: string) => value.trim()
-    .split(' ')
-    .map((word) => word.toLowerCase())
-    .join('_')
+  get blockLabel(): string {
+    return this.block.label ?? ''
+  }
+
+  set blockLabel(value: string) {
+    this.block_setLabel({blockId: this.block.uuid, value})
+  }
 
-  get name(): string {
+  get blockName(): string {
     return this.block.name
   }
-  set name(value: string) {
+
+  set blockName(value: string) {
     this.block_setName({blockId: this.block.uuid, value})
-    this.autoCode = this.snakeCase(value)
   }
 
+  filterName(e: KeyboardEvent): void {
+    if (e.key.match(/\W+|Enter/g)) {
+      e.preventDefault()
+    }
+  }
+
+  @flowVuexNamespace.Action block_setLabel!: ({blockId, value}: {blockId: string, value: string}) => void
   @flowVuexNamespace.Mutation block_setName!: ({blockId, value}: {blockId: string, value: string}) => void
 }
 export default TitleEditor
@@ -70,5 +100,7 @@ export default TitleEditor
 .title {
   color: #531944;
 }
+.block-code {
+  word-wrap: break-word;
+}
 </style>
-
diff --git a/src/store/flow/block.ts b/src/store/flow/block.ts
index cf2cb287f..11b24bd32 100644
--- a/src/store/flow/block.ts
+++ b/src/store/flow/block.ts
@@ -73,6 +73,17 @@ export const mutations: MutationTree<IFlowsState> = {
 }
 
 export const actions: ActionTree<IFlowsState, IRootState> = {
+  block_setLabel({commit}, {blockId, value}) {
+    const snakeCase = (value: string) => value?.trim()
+      .replace(/[^\w\s]+/g, '')
+      .split(' ')
+      .map((word) => word.toLowerCase())
+      .join('_')
+
+    commit('block_setLabel', {blockId, value})
+    commit('block_setName', {blockId, value: snakeCase(value)})
+  },
+
   async block_createBlockDefaultExitWith(
     {dispatch},
     {props}: { props: { uuid: string } & Partial<IBlockExit> },

From d7cd50b62f0b0b35ccbaf872e48a5c187e076127 Mon Sep 17 00:00:00 2001
From: Pooja Patil <pooja.patil@viamo.io>
Date: Tue, 6 Jul 2021 12:32:36 -0700
Subject: [PATCH 03/22] VMO-4138 Updated Resource editor

---
 .../resource-editors/ResourceEditor.vue       | 163 ++++++++++--------
 1 file changed, 88 insertions(+), 75 deletions(-)

diff --git a/src/components/interaction-designer/resource-editors/ResourceEditor.vue b/src/components/interaction-designer/resource-editors/ResourceEditor.vue
index 41b87a379..55d9d7173 100644
--- a/src/components/interaction-designer/resource-editors/ResourceEditor.vue
+++ b/src/components/interaction-designer/resource-editors/ResourceEditor.vue
@@ -6,87 +6,90 @@
       {{ label }}
     </h4>
 
-    <template v-for="{id: languageId, label: language} in flow.languages">
-      <div class="block-content-editor-lang">
-        <h5 class="badge badge-info">
-          {{ language || 'flow-builder.unknown-language' | trans }}
-        </h5>
-      </div>
-
-      <template v-for="mode in flow.supported_modes">
-        <h6>{{ `flow-builder.${mode.toLowerCase()}-content` | trans }}</h6>
-
-        <template v-for="contentType in discoverContentTypesFor(mode)">
-          <!-- todo: it's odd that we pass around a ContentType variant rather than a ContentTypeLangMode variant (aka, mode as external arg) -->
-
-          <resource-variant-text-editor
-            v-if="contentType === SupportedContentType.TEXT"
-            :resource-id="resource.uuid"
-
-            :resource-variant="findOrGenerateStubbedVariantOn(
-              resource,
-              {language_id: languageId, content_type: contentType, modes: [mode]})"
-            :mode="mode"
-            :enable-autogen-button="true || enableAutogenButton" />
-
-          <div v-if="contentType === SupportedContentType.AUDIO">
-            <template v-if="!findAudioResourceVariantFor(resource, {language_id: languageId, content_type: contentType, modes: [mode]})">
-              <upload-monitor :upload-key="`${block.uuid}:${languageId}`" />
-
-              <ul class="nav nav-tabs">
-                <li class="nav-item">
-                  <a
-                    class="nav-link px-2 py-1 active"
-                    href="#"
-                    @click.prevent="">{{ 'flow-builder.library' | trans }}</a>
-                </li>
-                <li
-                  v-if="can(['edit-content', 'send-call-to-records'], true) && isFeatureAudioUploadEnabled"
-                  class="nav-item">
-                  <a
-                    href="#"
-                    class="nav-link px-2 py-1"
-                    @click.prevent="triggerRecordViaPhoneFor(languageId)">{{ 'flow-builder.phone-recording' | trans }}</a>
-                </li>
-
-                <li
-                  v-if="isEditable"
-                  class="nav-item">
-                  <a
-                    v-if="isFeatureAudioUploadEnabled"
-                    v-flow-uploader="{
-                      target: route('trees.resumeableAudioUpload'),
-                      token: `${block.uuid}${languageId}`,
-                      accept: 'audio/*'}"
-                    class="nav-link px-2 py-1"
-                    href="#"
-                    @filesSubmitted="handleFilesSubmittedFor(`${block.uuid}:${languageId}`, $event)"
-                    @fileSuccess="handleFileSuccessFor(`${block.uuid}:${languageId}`, languageId, $event)">
-                    {{ 'flow-builder.upload' | trans }}
-                  </a>
-                </li>
-              </ul>
+    <div>
+      <b-tabs>
+        <b-tab
+          v-for="{id: languageId, label: language} in flow.languages"
+          :key="languageId"
+          :title="language || 'flow-builder.unknown-language' | trans"
+          active>
+          <div v-for="(mode, i) in flow.supported_modes" :key="i" class="tab-content-style">
+            <h6>{{ `flow-builder.${mode.toLowerCase()}-content` | trans }}</h6>
+
+            <template v-for="contentType in discoverContentTypesFor(mode)">
+              <!-- todo: it's odd that we pass around a ContentType variant rather than a ContentTypeLangMode variant (aka, mode as external arg) -->
+
+              <resource-variant-text-editor
+                v-if="contentType === SupportedContentType.TEXT"
+                :resource-id="resource.uuid"
+
+                :resource-variant="findOrGenerateStubbedVariantOn(
+                  resource,
+                  {language_id: languageId, content_type: contentType, modes: [mode]})"
+                :mode="mode"
+                :enable-autogen-button="true || enableAutogenButton" />
+
+              <div v-if="contentType === SupportedContentType.AUDIO">
+                <template v-if="!findAudioResourceVariantFor(resource, {language_id: languageId, content_type: contentType, modes: [mode]})">
+                  <upload-monitor :upload-key="`${block.uuid}:${languageId}`" />
+
+                  <ul class="nav nav-tabs">
+                    <li class="nav-item">
+                      <a
+                        class="nav-link px-2 py-1 active"
+                        href="#"
+                        @click.prevent="">{{ 'flow-builder.library' | trans }}</a>
+                    </li>
+                    <li
+                      v-if="can(['edit-content', 'send-call-to-records'], true) && isFeatureAudioUploadEnabled"
+                      class="nav-item">
+                      <a
+                        href="#"
+                        class="nav-link px-2 py-1"
+                        @click.prevent="triggerRecordViaPhoneFor(languageId)">{{ 'flow-builder.phone-recording' | trans }}</a>
+                    </li>
+
+                    <li
+                      v-if="isEditable"
+                      class="nav-item">
+                      <a
+                        v-if="isFeatureAudioUploadEnabled"
+                        v-flow-uploader="{
+                          target: route('trees.resumeableAudioUpload'),
+                          token: `${block.uuid}${languageId}`,
+                          accept: 'audio/*'}"
+                        class="nav-link px-2 py-1"
+                        href="#"
+                        @filesSubmitted="handleFilesSubmittedFor(`${block.uuid}:${languageId}`, $event)"
+                        @fileSuccess="handleFileSuccessFor(`${block.uuid}:${languageId}`, languageId, $event)">
+                        {{ 'flow-builder.upload' | trans }}
+                      </a>
+                    </li>
+                  </ul>
+                </template>
+
+                <audio-library-selector
+                  :audio-files="availableAudio"
+                  :lang-id="languageId"
+                  :resource-id="resource.uuid"
+                  :selected-audio-file="findOrGenerateStubbedVariantOn(
+                    resource,
+                    {language_id: languageId, content_type: contentType, modes: [mode]}).value" />
+
+                <phone-recorder
+                  v-if="can(['edit-content', 'send-call-to-records'], true) && !findOrGenerateStubbedVariantOn(resource,{language_id: languageId, content_type: contentType, modes: [mode]}).value"
+                  :recording-key="`${block.uuid}:${languageId}`" />
+              </div>
             </template>
-
-            <audio-library-selector
-              :audio-files="availableAudio"
-              :lang-id="languageId"
-              :resource-id="resource.uuid"
-              :selected-audio-file="findOrGenerateStubbedVariantOn(
-                resource,
-                {language_id: languageId, content_type: contentType, modes: [mode]}).value" />
-
-            <phone-recorder
-              v-if="can(['edit-content', 'send-call-to-records'], true) && !findOrGenerateStubbedVariantOn(resource,{language_id: languageId, content_type: contentType, modes: [mode]}).value"
-              :recording-key="`${block.uuid}:${languageId}`" />
           </div>
-        </template>
-      </template>
-    </template>
+        </b-tab>
+      </b-tabs>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
+import Vue from 'vue'
 import {Getter, Mutation, namespace} from 'vuex-class'
 import {
   IBlock,
@@ -112,9 +115,12 @@ import {ValidationException} from '@floip/flow-runner/src/domain/exceptions/Vali
 import PhoneRecorder from '@/components/interaction-designer/block-editors/PhoneRecorder.vue'
 import {ILanguage} from '@floip/flow-runner/dist/flow-spec/ILanguage'
 import {mixins} from 'vue-class-component'
+import {TabsPlugin} from 'bootstrap-vue'
 import UploadMonitor from '../block-editors/UploadMonitor.vue'
 import ResourceVariantTextEditor from './ResourceVariantTextEditor.vue'
 
+Vue.use(TabsPlugin)
+
 const flowVuexNamespace = namespace('flow')
 const builderVuexNamespace = namespace('builder')
 
@@ -227,3 +233,10 @@ export class ResourceEditor extends mixins(FlowUploader, Permissions, Routes, La
 
 export default ResourceEditor
 </script>
+
+<style scoped>
+.tab-content-style {
+  background: #F4F4F4;
+  padding: 10px;
+}
+</style>

From 32e4715d29d62cda97e6747070b21a7498659ee6 Mon Sep 17 00:00:00 2001
From: Pooja Patil <pooja.patil@viamo.io>
Date: Wed, 7 Jul 2021 10:27:13 -0700
Subject: [PATCH 04/22] VMO-4138 Overrode primary color of bootstrap

---
 .../block-types/MobilePrimitives_MessageBlock.vue           | 3 ---
 src/scss/custom_variables.scss                              | 4 ++++
 src/scss/main.scss                                          | 6 +++---
 3 files changed, 7 insertions(+), 6 deletions(-)
 create mode 100644 src/scss/custom_variables.scss

diff --git a/src/components/interaction-designer/block-types/MobilePrimitives_MessageBlock.vue b/src/components/interaction-designer/block-types/MobilePrimitives_MessageBlock.vue
index c139c7192..00f89f751 100644
--- a/src/components/interaction-designer/block-types/MobilePrimitives_MessageBlock.vue
+++ b/src/components/interaction-designer/block-types/MobilePrimitives_MessageBlock.vue
@@ -6,9 +6,6 @@
 
     <fieldset :disabled="!isEditable">
       <title-editor :block="block" />
-      <block-name-editor :block="block" />
-      <block-label-editor :block="block" />
-      <block-semantic-label-editor :block="block" />
       <resource-editor
         v-if="promptResource"
         :resource="promptResource"
diff --git a/src/scss/custom_variables.scss b/src/scss/custom_variables.scss
new file mode 100644
index 000000000..5e7d84c30
--- /dev/null
+++ b/src/scss/custom_variables.scss
@@ -0,0 +1,4 @@
+// Override / set color variables
+$viamo-official: #531944;
+
+$primary: $viamo-official;
diff --git a/src/scss/main.scss b/src/scss/main.scss
index 04750723f..9c1411031 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -1,4 +1,4 @@
-@import './node_modules/bootstrap/scss/_functions.scss';
-@import './node_modules/bootstrap/scss/_variables.scss';
-@import './node_modules/bootstrap/scss/_mixins.scss';
+@import 'custom_variables.scss';
+@import './node_modules/bootstrap/scss/bootstrap';
+@import './node_modules/bootstrap-vue/src/index.scss';
 @import 'bootstrap3_compatibility.scss';

From 61a8d9570e8fafbd3b415b0a835f2c3e48dd2138 Mon Sep 17 00:00:00 2001
From: Pooja Patil <pooja.patil@viamo.io>
Date: Wed, 7 Jul 2021 10:27:47 -0700
Subject: [PATCH 05/22] VMO-4138  Component for custom SVG Icons

---
 package.json                                  |  1 +
 src/App.vue                                   | 11 +++++
 src/assets/icons/check.svg                    |  3 ++
 src/assets/icons/settings.svg                 |  3 ++
 src/components/common/SvgIcon.vue             | 42 +++++++++++++++++++
 src/components/common/SvgSprite.vue           | 27 ++++++++++++
 .../block-editors/TitleEditor.vue             | 10 +++--
 yarn.lock                                     | 14 +++++++
 8 files changed, 107 insertions(+), 4 deletions(-)
 create mode 100644 src/assets/icons/check.svg
 create mode 100644 src/assets/icons/settings.svg
 create mode 100644 src/components/common/SvgIcon.vue
 create mode 100644 src/components/common/SvgSprite.vue

diff --git a/package.json b/package.json
index 45888ed86..8cb65d860 100644
--- a/package.json
+++ b/package.json
@@ -95,6 +95,7 @@
     "node-sass": "^4.14.1",
     "sass-loader": "^8.0.2",
     "storybook-vue-router": "^1.0.7",
+    "svg-inline-loader": "^0.8.2",
     "ts-jest": "^27.0.3",
     "ts-vue-plugin": "^0.1.3",
     "typescript": "~4.3.4",
diff --git a/src/App.vue b/src/App.vue
index d3e2cd892..4d2a7f9d6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,16 @@
 <template>
   <div id="app">
+    <svg-sprite />
     <router-view />
   </div>
 </template>
+
+<script>
+import SvgSprite from '@/components/common/SvgSprite'
+
+export default {
+  components: {
+    SvgSprite,
+  },
+}
+</script>
diff --git a/src/assets/icons/check.svg b/src/assets/icons/check.svg
new file mode 100644
index 000000000..c9d03928d
--- /dev/null
+++ b/src/assets/icons/check.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="9" viewBox="0 0 14 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="check" d="M0.890115 2.94221L0.380747 3.43524C0.174136 3.63522 0.178367 3.96784 0.389997 4.1625L5.30778 8.68602C5.5003 8.86311 5.79679 8.86187 5.98783 8.68318L13.6162 1.54764C13.825 1.35235 13.8279 1.02206 13.6224 0.823223L13.1136 0.33074C12.9222 0.145457 12.6191 0.142801 12.4245 0.324702L5.64912 6.6566L1.57522 2.93244C1.38016 2.75412 1.08001 2.7584 0.890115 2.94221Z" fill="white"/>
+</svg>
diff --git a/src/assets/icons/settings.svg b/src/assets/icons/settings.svg
new file mode 100644
index 000000000..4befbf35a
--- /dev/null
+++ b/src/assets/icons/settings.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.9757 7.00154L13.2241 5.81525L13.6254 3.73557C13.7015 3.34893 13.5785 2.95057 13.3002 2.66938C13.019 2.39111 12.6207 2.26809 12.2399 2.34424L10.1632 2.74553L8.97979 0.990993C8.53749 0.3378 7.45958 0.3378 7.01728 0.990993L5.83392 2.74553L3.76011 2.34424C3.37053 2.27102 2.9751 2.39111 2.69684 2.67231C2.41857 2.9535 2.29555 3.34893 2.3717 3.73557L2.77299 5.81525L1.02138 7.00154C0.693322 7.22415 0.5 7.59029 0.5 7.98572C0.5 8.38115 0.696251 8.74729 1.02138 8.96697L2.77299 10.1533L2.3717 12.2329C2.29555 12.6196 2.41857 13.0179 2.69684 13.2962C2.9751 13.5745 3.3676 13.6975 3.76011 13.6213L5.83392 13.2201L7.01728 14.9746C7.23697 15.3027 7.60603 15.4989 7.99854 15.4989C8.39104 15.4989 8.76011 15.3027 8.97979 14.9775L10.1632 13.223L12.2399 13.6243C12.6324 13.7034 13.0249 13.5774 13.3032 13.2991C13.5814 13.0209 13.7015 12.6225 13.6283 12.2359L13.227 10.1562L14.9786 8.9699C15.3037 8.75022 15.5 8.38115 15.5 7.98865C15.4971 7.59029 15.3037 7.22415 14.9757 7.00154ZM11.6687 9.50886L12.1842 12.1802L9.51875 11.6647L7.99854 13.9172L6.47832 11.6618L3.81576 12.1773L4.33128 9.50593L2.08172 7.98279L4.33128 6.45965L3.81576 3.7883L6.48125 4.30382L7.99854 2.05426L9.51875 4.30675L12.1842 3.79123L11.6687 6.45965L13.9183 7.98279L11.6687 9.50886ZM7.99854 4.95409C6.32015 4.95409 4.95226 6.32198 4.95226 8.00037C4.95226 9.67875 6.32015 11.0466 7.99854 11.0466C9.67692 11.0466 11.0448 9.67875 11.0448 8.00037C11.0448 6.32198 9.67692 4.95409 7.99854 4.95409ZM7.99854 9.64067C7.09344 9.64067 6.35823 8.90546 6.35823 8.00037C6.35823 7.09527 7.09344 6.36006 7.99854 6.36006C8.90363 6.36006 9.63884 7.09527 9.63884 8.00037C9.63884 8.90546 8.90363 9.64067 7.99854 9.64067Z" fill="#531944"/>
+</svg>
diff --git a/src/components/common/SvgIcon.vue b/src/components/common/SvgIcon.vue
new file mode 100644
index 000000000..dc086914b
--- /dev/null
+++ b/src/components/common/SvgIcon.vue
@@ -0,0 +1,42 @@
+<template>
+  <svg class="icon" :class="{ 'icon-spin': spin }">
+    <use :xlink:href="`#${icon}`" />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'SvgIcon',
+  props: {
+    icon: {
+      type: String,
+      required: true,
+    },
+    spin: {
+      type: Boolean,
+      default: false,
+    },
+  },
+}
+</script>
+
+<style>
+svg.icon {
+  fill: currentColor;
+  height: 1em;
+  margin-bottom: 0.125em;
+  vertical-align: middle;
+  width: 1em;
+}
+svg.icon-spin {
+  animation: icon-spin 2s infinite linear;
+}
+@keyframes icon-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+}
+</style>
diff --git a/src/components/common/SvgSprite.vue b/src/components/common/SvgSprite.vue
new file mode 100644
index 000000000..0e979dce0
--- /dev/null
+++ b/src/components/common/SvgSprite.vue
@@ -0,0 +1,27 @@
+<template>
+  <svg width="0" height="0" style="display: none;" v-html="$options.svgSprite" />
+</template>
+
+<script>
+const svgContext = require.context(
+  '!svg-inline-loader?' +
+  'removeTags=true' + // remove title tags, etc.
+  '&removeSVGTagAttrs=true' + // enable removing attributes
+  '&removingTagAttrs=fill' + // remove fill attributes
+  '!@/assets/icons', // search this directory
+  true, // search subdirectories
+  /\w+\.svg$/i // only include SVG files
+)
+const symbols = svgContext.keys().map(path => {
+  // get SVG file content
+  const content = svgContext(path)
+  // extract icon id from filename
+  const id = path.replace(/^\.\/(.*)\.\w+$/, '$1')
+  // replace svg tags with symbol tags and id attribute
+  return content.replace('<svg', `<symbol id="${id}"`).replace('svg>', 'symbol>')
+})
+export default {
+  name: 'SvgSprite',
+  svgSprite: symbols.join('\n'), // concatenate all symbols into $options.svgSprite
+}
+</script>
diff --git a/src/components/interaction-designer/block-editors/TitleEditor.vue b/src/components/interaction-designer/block-editors/TitleEditor.vue
index 917f4a0a7..6b659f71d 100644
--- a/src/components/interaction-designer/block-editors/TitleEditor.vue
+++ b/src/components/interaction-designer/block-editors/TitleEditor.vue
@@ -11,9 +11,9 @@
           class="form-control w-100"
           :class="{ 'is-invalid': isLabelValid === false }">
         <span
-          class="btn btn-outline-secondary"
+          class="btn btn-outline-primary"
           @click="editBlockName = true">
-          <i class="glyphicon glyphicon-cog" />
+          <svg-icon icon="settings" />
         </span>
       </div>
     </validation-message>
@@ -31,9 +31,9 @@
               :class="{ 'is-invalid': isNameValid === false }"
               @keydown="filterName">
             <span
-              class="btn btn-outline-dark"
+              class="btn btn-primary"
               @click="editBlockName = false">
-              <i class="glyphicon glyphicon-check" />
+              <svg-icon icon="check" />
             </span>
           </div>
         </div>
@@ -54,6 +54,7 @@ import {mixins} from 'vue-class-component'
 import Lang from '@/lib/filters/lang'
 import {IBlock} from '@floip/flow-runner'
 import {namespace} from 'vuex-class'
+import SvgIcon from '@/components/common/SvgIcon.vue'
 
 const flowVuexNamespace = namespace('flow')
 
@@ -61,6 +62,7 @@ const flowVuexNamespace = namespace('flow')
   components: {
     TextEditor,
     ValidationMessage,
+    SvgIcon,
   },
 })
 class TitleEditor extends mixins(Lang) {
diff --git a/yarn.lock b/yarn.lock
index 2673c22c8..fd1923e74 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -16591,6 +16591,11 @@ signal-exit@^3.0.0, signal-exit@^3.0.2, signal-exit@^3.0.3:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
   integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==
 
+simple-html-tokenizer@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/simple-html-tokenizer/-/simple-html-tokenizer-0.1.1.tgz#05c2eec579ffffe145a030ac26cfea61b980fabe"
+  integrity sha1-BcLuxXn//+FFoDCsJs/qYbmA+r4=
+
 simple-swizzle@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
@@ -17279,6 +17284,15 @@ supports-hyperlinks@^2.0.0:
     has-flag "^4.0.0"
     supports-color "^7.0.0"
 
+svg-inline-loader@^0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/svg-inline-loader/-/svg-inline-loader-0.8.2.tgz#9872414f9e4141601e04eb80cda748c9a50dae71"
+  integrity sha512-kbrcEh5n5JkypaSC152eGfGcnT4lkR0eSfvefaUJkLqgGjRQJyKDvvEE/CCv5aTSdfXuc+N98w16iAojhShI3g==
+  dependencies:
+    loader-utils "^1.1.0"
+    object-assign "^4.0.1"
+    simple-html-tokenizer "^0.1.1"
+
 svg-tags@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"

From 999ec5dea0bfa9c51096c697fefcfc9f3fafd260 Mon Sep 17 00:00:00 2001
From: Pooja Patil <pooja.patil@viamo.io>
Date: Wed, 7 Jul 2021 18:06:38 -0700
Subject: [PATCH 06/22] VMO-4138  Updated Set as First Block button

---
 src/assets/icons/enter.svg                             |  3 +++
 .../block-types/MobilePrimitives_MessageBlock.vue      |  2 +-
 .../flow-editors/FirstBlockEditorButton.vue            | 10 ++++++++--
 3 files changed, 12 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/icons/enter.svg

diff --git a/src/assets/icons/enter.svg b/src/assets/icons/enter.svg
new file mode 100644
index 000000000..b0a42aae1
--- /dev/null
+++ b/src/assets/icons/enter.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="20" viewBox="0 0 17 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 9C0.447715 9 0 9.44772 0 10C0 10.5523 0.447715 11 1 11V9ZM11 11H12V9H11V11ZM7.99929 4.62347C7.63354 4.20965 7.00157 4.17068 6.58775 4.53643C6.17393 4.90218 6.13497 5.53414 6.50071 5.94796L7.99929 4.62347ZM11.4167 10L12.166 10.6622L12.7513 10L12.166 9.33775L11.4167 10ZM6.50071 14.052C6.13497 14.4659 6.17393 15.0978 6.58775 15.4636C7.00157 15.8293 7.63354 15.7904 7.99929 15.3765L6.50071 14.052ZM3.33333 3.14286C3.33333 3.69514 3.78105 4.14286 4.33333 4.14286C4.88562 4.14286 5.33333 3.69514 5.33333 3.14286H3.33333ZM5.33333 16.8571C5.33333 16.3049 4.88562 15.8571 4.33333 15.8571C3.78105 15.8571 3.33333 16.3049 3.33333 16.8571H5.33333ZM1 11H11V9H1V11ZM5.33333 3.14286V2H3.33333V3.14286H5.33333ZM5.33333 2H15V0H5.33333V2ZM15 2V18H17V2H15ZM15 18H5.33333V20H15V18ZM5.33333 18V16.8571H3.33333V18H5.33333ZM10.6674 9.33775L8.58405 11.6949L10.0826 13.0194L12.166 10.6622L10.6674 9.33775ZM8.58405 11.6949L6.50071 14.052L7.99929 15.3765L10.0826 13.0194L8.58405 11.6949ZM6.50071 5.94796L8.58405 8.3051L10.0826 6.98061L7.99929 4.62347L6.50071 5.94796ZM8.58405 8.3051L10.6674 10.6622L12.166 9.33775L10.0826 6.98061L8.58405 8.3051ZM5.33333 18H5.33333H3.33333C3.33333 19.1046 4.22877 20 5.33333 20V18ZM15 18V20C16.1046 20 17 19.1046 17 18H15ZM15 2H15H17C17 0.89543 16.1046 0 15 0V2ZM5.33333 2L5.33333 2V0C4.22876 0 3.33333 0.895431 3.33333 2H5.33333Z" fill="#8C215C"/>
+</svg>
diff --git a/src/components/interaction-designer/block-types/MobilePrimitives_MessageBlock.vue b/src/components/interaction-designer/block-types/MobilePrimitives_MessageBlock.vue
index 00f89f751..9b0306836 100644
--- a/src/components/interaction-designer/block-types/MobilePrimitives_MessageBlock.vue
+++ b/src/components/interaction-designer/block-types/MobilePrimitives_MessageBlock.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="mobile-primitive-message-block">
-    <h3 class="no-room-above">
+    <h3 class="no-room-above text-primary">
       {{ 'flow-builder.edit-block-type' | trans({block_type: trans(`flow-builder.${block.type}`)}) }}
     </h3>
 
diff --git a/src/components/interaction-designer/flow-editors/FirstBlockEditorButton.vue b/src/components/interaction-designer/flow-editors/FirstBlockEditorButton.vue
index bc8d62f86..36aa457ac 100644
--- a/src/components/interaction-designer/flow-editors/FirstBlockEditorButton.vue
+++ b/src/components/interaction-designer/flow-editors/FirstBlockEditorButton.vue
@@ -5,9 +5,10 @@
       <div class="form-group">
         <button
           type="button"
-          class="btn btn-secondary btn-sm"
+          class="btn btn-outline-primary btn-sm w-100"
           :disabled="isStartBlock"
           @click="setStartBlock($event)">
+          <svg-icon icon="enter" />
           <template v-if="isStartBlock">
             {{ 'flow-builder.currently-set-as-starting-block' | trans }}
           </template>
@@ -26,10 +27,15 @@ import {IBlock, IFlow} from '@floip/flow-runner'
 import Lang from '@/lib/filters/lang'
 import {namespace} from 'vuex-class'
 import {mixins} from 'vue-class-component'
+import SvgIcon from '@/components/common/SvgIcon.vue'
 
 const flowVuexNamespace = namespace('flow')
 
-@Component({})
+@Component({
+  components: {
+    SvgIcon,
+  },
+})
 class FirstBlockEditorButton extends mixins(Lang) {
   @Prop({default: true}) readonly isEditable!: boolean
 

From b6680b19f5aace71ef00adff8cd46e60e29f9d55 Mon Sep 17 00:00:00 2001
From: Pooja Patil <pooja.patil@viamo.io>
Date: Wed, 7 Jul 2021 18:13:27 -0700
Subject: [PATCH 07/22] VMO-4138 Updating IVR content design in Resources

---
 .../common/AudioLibrarySearchField.vue        | 18 ++---
 .../resource-editors/ResourceEditor.vue       | 67 ++++++++-----------
 2 files changed, 37 insertions(+), 48 deletions(-)

diff --git a/src/components/common/AudioLibrarySearchField.vue b/src/components/common/AudioLibrarySearchField.vue
index 187a8e43b..2248a6eff 100644
--- a/src/components/common/AudioLibrarySearchField.vue
+++ b/src/components/common/AudioLibrarySearchField.vue
@@ -1,15 +1,6 @@
 <template>
   <div class="audio-library-search-field dropdown">
     <div class="input-group">
-      <span class="input-group-prepend">
-        <button
-          :class="{active: isEntireLibraryModeEnabled}"
-          class="btn btn-outline-secondary dropdown-toggle"
-          @click.prevent="toggleAudioLibrary">
-          <i class="glyphicon glyphicon-search" />
-        </button>
-      </span>
-
       <input
         v-model="rawQuery"
         type="text"
@@ -19,6 +10,15 @@
         @focus="activate"
         @blur="deactivate"
         @input="resetPagination">
+
+      <span class="input-group-prepend">
+        <button
+          :class="{active: isEntireLibraryModeEnabled}"
+          class="btn btn-primary dropdown-toggle"
+          @click.prevent="toggleAudioLibrary">
+          <i class="glyphicon glyphicon-search" />
+        </button>
+      </span>
     </div>
 
     <div
diff --git a/src/components/interaction-designer/resource-editors/ResourceEditor.vue b/src/components/interaction-designer/resource-editors/ResourceEditor.vue
index 55d9d7173..4b68055c2 100644
--- a/src/components/interaction-designer/resource-editors/ResourceEditor.vue
+++ b/src/components/interaction-designer/resource-editors/ResourceEditor.vue
@@ -13,7 +13,10 @@
           :key="languageId"
           :title="language || 'flow-builder.unknown-language' | trans"
           active>
-          <div v-for="(mode, i) in flow.supported_modes" :key="i" class="tab-content-style">
+          <div
+            v-for="(mode, i) in flow.supported_modes"
+            :key="i"
+            class="tab-content-style">
             <h6>{{ `flow-builder.${mode.toLowerCase()}-content` | trans }}</h6>
 
             <template v-for="contentType in discoverContentTypesFor(mode)">
@@ -30,44 +33,6 @@
                 :enable-autogen-button="true || enableAutogenButton" />
 
               <div v-if="contentType === SupportedContentType.AUDIO">
-                <template v-if="!findAudioResourceVariantFor(resource, {language_id: languageId, content_type: contentType, modes: [mode]})">
-                  <upload-monitor :upload-key="`${block.uuid}:${languageId}`" />
-
-                  <ul class="nav nav-tabs">
-                    <li class="nav-item">
-                      <a
-                        class="nav-link px-2 py-1 active"
-                        href="#"
-                        @click.prevent="">{{ 'flow-builder.library' | trans }}</a>
-                    </li>
-                    <li
-                      v-if="can(['edit-content', 'send-call-to-records'], true) && isFeatureAudioUploadEnabled"
-                      class="nav-item">
-                      <a
-                        href="#"
-                        class="nav-link px-2 py-1"
-                        @click.prevent="triggerRecordViaPhoneFor(languageId)">{{ 'flow-builder.phone-recording' | trans }}</a>
-                    </li>
-
-                    <li
-                      v-if="isEditable"
-                      class="nav-item">
-                      <a
-                        v-if="isFeatureAudioUploadEnabled"
-                        v-flow-uploader="{
-                          target: route('trees.resumeableAudioUpload'),
-                          token: `${block.uuid}${languageId}`,
-                          accept: 'audio/*'}"
-                        class="nav-link px-2 py-1"
-                        href="#"
-                        @filesSubmitted="handleFilesSubmittedFor(`${block.uuid}:${languageId}`, $event)"
-                        @fileSuccess="handleFileSuccessFor(`${block.uuid}:${languageId}`, languageId, $event)">
-                        {{ 'flow-builder.upload' | trans }}
-                      </a>
-                    </li>
-                  </ul>
-                </template>
-
                 <audio-library-selector
                   :audio-files="availableAudio"
                   :lang-id="languageId"
@@ -79,6 +44,30 @@
                 <phone-recorder
                   v-if="can(['edit-content', 'send-call-to-records'], true) && !findOrGenerateStubbedVariantOn(resource,{language_id: languageId, content_type: contentType, modes: [mode]}).value"
                   :recording-key="`${block.uuid}:${languageId}`" />
+
+                <template v-if="!findAudioResourceVariantFor(resource, {language_id: languageId, content_type: contentType, modes: [mode]})">
+                  <upload-monitor :upload-key="`${block.uuid}:${languageId}`" />
+
+                  <div class="d-flex mt-2">
+                    <button
+                      v-if="can(['edit-content', 'send-call-to-records'], true) && isFeatureAudioUploadEnabled"
+                      class="btn btn-primary"
+                      @click.prevent="triggerRecordViaPhoneFor(languageId)">
+                      {{ 'flow-builder.phone-recording' | trans }}
+                    </button>
+                    <button
+                      v-if="isEditable && isFeatureAudioUploadEnabled"
+                      v-flow-uploader="{
+                        target: route('trees.resumeableAudioUpload'),
+                        token: `${block.uuid}${languageId}`,
+                        accept: 'audio/*'}"
+                      class="btn btn-primary ml-2"
+                      @filesSubmitted="handleFilesSubmittedFor(`${block.uuid}:${languageId}`, $event)"
+                      @fileSuccess="handleFileSuccessFor(`${block.uuid}:${languageId}`, languageId, $event)">
+                      {{ 'flow-builder.upload' | trans }}
+                    </button>
+                  </div>
+                </template>
               </div>
             </template>
           </div>

From c59f9ac8937bf18873884d0734155b5ad0344ef9 Mon Sep 17 00:00:00 2001
From: Pooja Patil <pooja.patil@viamo.io>
Date: Thu, 8 Jul 2021 12:48:14 -0700
Subject: [PATCH 08/22] VMO-4138 Localizing the labels

---
 src/assets/messages.json                                    | 4 ++++
 .../interaction-designer/block-editors/TitleEditor.vue      | 6 +++---
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/assets/messages.json b/src/assets/messages.json
index 19007f9bd..2c1c08947 100644
--- a/src/assets/messages.json
+++ b/src/assets/messages.json
@@ -306,6 +306,7 @@
     "code-length": "Character Length",
     "code-validation": "Code validation",
     "codes": "Codes:",
+    "code": "Code",
     "collaborative-filtering-question": "Collaborative Filtering Question",
     "collaborative-filtering-rating": "Collaborative Filtering Rating",
     "combined-block-results": "Combined Block Results",
@@ -518,6 +519,7 @@
     "edit-tree-before-sending": "Edit tree before sending",
     "edit-validate-block": "Edit Validate Code Block",
     "edit-voice-content": "Edit Voice Content",
+    "edit-block-code": "Edit block code",
     "empty": "Empty",
     "empty-audio-library": "Empty audio library!",
     "empty-responses": "empty responses",
@@ -1892,6 +1894,7 @@
     "code-length": "Longueur de caractères",
     "code-validation": "validation du code",
     "codes": "Codes:",
+    "code": "Code",
     "collaborative-filtering-question": "Question de filtrage collaboratif",
     "collaborative-filtering-rating": "Note de filtrage collaboratif",
     "combined-block-results": "Résultats combinés du bloc",
@@ -2103,6 +2106,7 @@
     "edit-tree-before-sending": "Modifier l'arbre avant d'envoyer",
     "edit-validate-block": "Modifier Valider le bloc de code",
     "edit-voice-content": "Modifier le contenu vocal",
+    "edit-block-code": "Modifier le code de bloc",
     "empty": "Vide",
     "empty-audio-library": "Bibliothèque audio vide!",
     "empty-responses": "réponses vides",
diff --git a/src/components/interaction-designer/block-editors/TitleEditor.vue b/src/components/interaction-designer/block-editors/TitleEditor.vue
index 6b659f71d..e9ca7ff12 100644
--- a/src/components/interaction-designer/block-editors/TitleEditor.vue
+++ b/src/components/interaction-designer/block-editors/TitleEditor.vue
@@ -1,6 +1,6 @@
 <template>
   <section class="mb-3">
-    <label class="title">Title</label>
+    <label class="title">{{'flow-builder.title' | trans}}</label>
     <validation-message
       #input-control="{ isValid: isLabelValid }"
       :message-key="`block/${block.uuid}/label`">
@@ -22,7 +22,7 @@
         #input-control="{ isValid: isNameValid }"
         :message-key="`block/${block.uuid}/name`">
         <div v-if="editBlockName || isNameValid === false">
-          <label>Edit Block Code</label>
+          <label>{{ 'flow-builder.edit-block-code' | trans }}</label>
           <div class="d-flex">
             <input
               v-model="blockName"
@@ -38,7 +38,7 @@
           </div>
         </div>
         <div v-else>
-          <strong>Code:</strong>
+          <strong>{{'flow-builder.code' | trans}}:</strong>
           <span class="block-code"> {{ blockName }} </span>
         </div>
       </validation-message>

From 01f9c7322f27a23a2051325788ac4c0a0ec682d4 Mon Sep 17 00:00:00 2001
From: Pooja Patil <pooja.patil@viamo.io>
Date: Thu, 8 Jul 2021 15:03:22 -0700
Subject: [PATCH 09/22] VMO-4138 Adding icons to Resources

---
 src/assets/icons/audio.svg                    |  5 +++
 src/assets/icons/message.svg                  |  3 ++
 src/assets/icons/phone.svg                    |  3 ++
 src/assets/icons/record-audio.svg             |  4 +++
 src/assets/icons/rich-messaging.svg           |  3 ++
 src/assets/icons/upload.svg                   |  4 +++
 src/assets/icons/ussd.svg                     |  4 +++
 src/assets/messages.json                      |  4 +++
 .../resource-editors/ResourceEditor.vue       | 31 ++++++++++++++++---
 9 files changed, 56 insertions(+), 5 deletions(-)
 create mode 100644 src/assets/icons/audio.svg
 create mode 100644 src/assets/icons/message.svg
 create mode 100644 src/assets/icons/phone.svg
 create mode 100644 src/assets/icons/record-audio.svg
 create mode 100644 src/assets/icons/rich-messaging.svg
 create mode 100644 src/assets/icons/upload.svg
 create mode 100644 src/assets/icons/ussd.svg

diff --git a/src/assets/icons/audio.svg b/src/assets/icons/audio.svg
new file mode 100644
index 000000000..44c87ec02
--- /dev/null
+++ b/src/assets/icons/audio.svg
@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.441 11.882C20.0585 11.5733 20.8093 11.8235 21.118 12.441L20 13C21.118 12.441 21.118 12.441 21.118 12.441L21.1191 12.4431L21.1205 12.446L21.1244 12.4539L21.1364 12.4785C21.1462 12.4987 21.1595 12.5265 21.1757 12.5613C21.2082 12.6308 21.2527 12.7289 21.3052 12.8514C21.4099 13.0958 21.548 13.4411 21.6859 13.8547C21.9567 14.6671 22.25 15.811 22.25 17C22.25 18.1891 21.9567 19.3329 21.6859 20.1453C21.548 20.559 21.4099 20.9043 21.3052 21.1487C21.2527 21.2712 21.2082 21.3692 21.1757 21.4388C21.1595 21.4736 21.1462 21.5013 21.1364 21.5215L21.1244 21.5461L21.1205 21.5541L21.1191 21.5569L21.1185 21.5581C21.1185 21.5581 21.118 21.559 20 21L21.118 21.559C20.8093 22.1765 20.0585 22.4268 19.441 22.1181C18.8241 21.8096 18.5737 21.06 18.881 20.4429L18.882 20.441L19.944 20.972C18.882 20.441 18.882 20.441 18.882 20.441L18.881 20.4429L18.886 20.4326C18.8909 20.4225 18.8991 20.4054 18.9102 20.3816C18.9325 20.334 18.9661 20.2601 19.0073 20.1639C19.0901 19.9708 19.202 19.6911 19.3141 19.3547C19.5433 18.6671 19.75 17.811 19.75 17C19.75 16.1891 19.5433 15.3329 19.3141 14.6453C19.202 14.309 19.0901 14.0293 19.0073 13.8362C18.9661 13.7399 18.9325 13.6661 18.9102 13.6185C18.8991 13.5947 18.8909 13.5775 18.886 13.5674L18.8813 13.5577L18.8818 13.5586C18.5733 12.9412 18.8236 12.1907 19.441 11.882ZM18.8813 13.5577V13.5577Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.441 7.882C24.0585 7.57326 24.8093 7.82354 25.118 8.44101L24 9.00003C25.118 8.44101 25.118 8.44101 25.118 8.44101L25.1193 8.4435L25.1212 8.44746L25.1273 8.45974L25.1477 8.50148C25.1648 8.5368 25.1888 8.58701 25.2187 8.65111C25.2785 8.77926 25.362 8.96324 25.4614 9.19513C25.6599 9.6583 25.923 10.3161 26.1859 11.1047C26.7067 12.6671 27.25 14.811 27.25 17C27.25 19.1891 26.7067 21.3329 26.1859 22.8953C25.923 23.684 25.6599 24.3418 25.4614 24.8049C25.362 25.0368 25.2785 25.2208 25.2187 25.349C25.1888 25.413 25.1648 25.4633 25.1477 25.4986L25.1273 25.5403L25.1212 25.5526L25.1193 25.5566L25.1186 25.558C25.1186 25.558 25.118 25.559 24 25L25.118 25.559C24.8093 26.1765 24.0585 26.4268 23.441 26.1181C22.8238 25.8095 22.5735 25.0593 22.8815 24.442V24.442L22.882 24.441L22.8842 24.4366L22.8973 24.4097C22.9095 24.3845 22.9284 24.3448 22.9532 24.2917C23.0028 24.1855 23.0755 24.0257 23.1636 23.8201C23.3401 23.4083 23.577 22.8161 23.8141 22.1047C24.2933 20.6671 24.75 18.811 24.75 17C24.75 15.1891 24.2933 13.3329 23.8141 11.8953C23.577 11.184 23.3401 10.5918 23.1636 10.1799C23.0755 9.97432 23.0028 9.81455 22.9532 9.70832C22.9284 9.65524 22.9095 9.6156 22.8973 9.59038L22.8842 9.56351L22.882 9.55905C22.5735 8.94165 22.8236 8.19067 23.441 7.882Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5974 9.31676C15.0713 8.14182 17.25 9.19126 17.25 11.0761V22.0832C17.25 23.9018 15.2043 24.9691 13.7127 23.9286L9.81763 21.2116H6C4.75736 21.2116 3.75 20.2042 3.75 18.9616V14.6154C3.75 13.3728 4.75736 12.3654 6 12.3654H9.77325L13.5974 9.31676ZM14.75 11.5951L11.2633 14.3748C10.8648 14.6924 10.3703 14.8654 9.8607 14.8654H6.25V18.7116H9.89621C10.3566 18.7116 10.8059 18.8528 11.1835 19.1162L14.75 21.604V11.5951Z" fill="black"/>
+</svg>
diff --git a/src/assets/icons/message.svg b/src/assets/icons/message.svg
new file mode 100644
index 000000000..11b591f00
--- /dev/null
+++ b/src/assets/icons/message.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.8334 6H5.16675C3.78602 6 2.66675 7.11927 2.66675 8.5V23.5C2.66675 24.8807 3.78602 26 5.16675 26H26.8334C28.2141 26 29.3334 24.8807 29.3334 23.5V8.5C29.3334 7.11927 28.2141 6 26.8334 6ZM26.8334 8.5V10.6253C25.6656 11.5762 23.8038 13.055 19.8237 16.1716C18.9465 16.8616 17.209 18.5191 16.0001 18.4998C14.7913 18.5193 13.0532 16.8613 12.1765 16.1716C8.19696 13.0555 6.33471 11.5764 5.16675 10.6253V8.5H26.8334ZM5.16675 23.5V13.8332C6.36018 14.7838 8.05263 16.1177 10.6322 18.1377C11.7706 19.0338 13.7642 21.012 16.0001 20.9999C18.2249 21.012 20.1932 19.0625 21.3674 18.1381C23.947 16.1182 25.6399 14.7839 26.8334 13.8333V23.5H5.16675Z" fill="black"/>
+</svg>
diff --git a/src/assets/icons/phone.svg b/src/assets/icons/phone.svg
new file mode 100644
index 000000000..9917d22ec
--- /dev/null
+++ b/src/assets/icons/phone.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.2475 2.75589V2.7531C23.7687 2.27132 23.1178 2.00028 22.4389 2H10.5584C9.14729 2.0046 8.0046 3.14827 8 4.56054V26.4367C8.00028 27.1162 8.27109 27.7676 8.75246 28.2469C9.23062 28.728 9.88038 28.999 10.5584 29H22.4416C23.1196 28.999 23.7694 28.728 24.2475 28.2469C24.7282 27.7683 24.999 27.118 25 26.4395V4.56333C24.999 3.88477 24.7282 3.23445 24.2475 2.75589ZM16.5 27.2623C16.1183 27.2623 15.8089 26.9526 15.8089 26.5706C15.8089 26.1885 16.1183 25.8788 16.5 25.8788C16.8817 25.8788 17.1911 26.1885 17.1911 26.5706C17.1911 26.9526 16.8817 27.2623 16.5 27.2623ZM22.9684 22.9194C22.9684 23.8437 22.2197 24.593 21.2962 24.593H11.701C10.7775 24.593 10.0289 23.8437 10.0289 22.9194V6.61622C10.0289 5.69193 10.7775 4.94267 11.701 4.94267H21.299C22.2225 4.94267 22.9711 5.69193 22.9711 6.61622L22.9684 22.9194Z" fill="black"/>
+</svg>
diff --git a/src/assets/icons/record-audio.svg b/src/assets/icons/record-audio.svg
new file mode 100644
index 000000000..d97ab4104
--- /dev/null
+++ b/src/assets/icons/record-audio.svg
@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21 8V13C21 15.7614 18.7614 18 16 18C13.2386 18 11 15.7614 11 13V8C11 5.23858 13.2386 3 16 3C18.7614 3 21 5.23858 21 8ZM10 8C10 4.68629 12.6863 2 16 2C19.3137 2 22 4.68629 22 8V13C22 16.3137 19.3137 19 16 19C12.6863 19 10 16.3137 10 13V8ZM7 13.5C7.27614 13.5 7.5 13.7239 7.5 14C7.5 18.0884 11.2486 21.5 16 21.5C20.7514 21.5 24.5 18.0884 24.5 14C24.5 13.7239 24.7239 13.5 25 13.5C25.2761 13.5 25.5 13.7239 25.5 14C25.5 18.5948 21.4637 22.2566 16.5 22.4883V27C16.5 27.2761 16.2761 27.5 16 27.5C15.7239 27.5 15.5 27.2761 15.5 27V22.4883C10.5363 22.2566 6.5 18.5948 6.5 14C6.5 13.7239 6.72386 13.5 7 13.5ZM16 27.5H24C24.2761 27.5 24.5 27.7239 24.5 28C24.5 28.2761 24.2761 28.5 24 28.5H8C7.72386 28.5 7.5 28.2761 7.5 28C7.5 27.7239 7.72386 27.5 8 27.5H16Z" fill="black"/>
+<path d="M16.5 22.4883L16.465 21.7392L15.75 21.7726V22.4883H16.5ZM15.5 22.4883H16.25V21.7726L15.535 21.7392L15.5 22.4883ZM21.75 13V8H20.25V13H21.75ZM16 18.75C19.1756 18.75 21.75 16.1756 21.75 13H20.25C20.25 15.3472 18.3472 17.25 16 17.25V18.75ZM10.25 13C10.25 16.1756 12.8244 18.75 16 18.75V17.25C13.6528 17.25 11.75 15.3472 11.75 13H10.25ZM10.25 8V13H11.75V8H10.25ZM16 2.25C12.8244 2.25 10.25 4.82436 10.25 8H11.75C11.75 5.65279 13.6528 3.75 16 3.75V2.25ZM21.75 8C21.75 4.82436 19.1756 2.25 16 2.25V3.75C18.3472 3.75 20.25 5.65279 20.25 8H21.75ZM16 1.25C12.2721 1.25 9.25 4.27208 9.25 8H10.75C10.75 5.1005 13.1005 2.75 16 2.75V1.25ZM22.75 8C22.75 4.27208 19.7279 1.25 16 1.25V2.75C18.8995 2.75 21.25 5.10051 21.25 8H22.75ZM22.75 13V8H21.25V13H22.75ZM16 19.75C19.7279 19.75 22.75 16.7279 22.75 13H21.25C21.25 15.8995 18.8995 18.25 16 18.25V19.75ZM9.25 13C9.25 16.7279 12.2721 19.75 16 19.75V18.25C13.1005 18.25 10.75 15.8995 10.75 13H9.25ZM9.25 8V13H10.75V8H9.25ZM8.25 14C8.25 13.3096 7.69036 12.75 7 12.75V14.25C6.86193 14.25 6.75 14.1381 6.75 14H8.25ZM16 20.75C11.5789 20.75 8.25 17.595 8.25 14H6.75C6.75 18.5818 10.9182 22.25 16 22.25V20.75ZM23.75 14C23.75 17.595 20.4211 20.75 16 20.75V22.25C21.0818 22.25 25.25 18.5818 25.25 14H23.75ZM25 12.75C24.3096 12.75 23.75 13.3096 23.75 14H25.25C25.25 14.1381 25.1381 14.25 25 14.25V12.75ZM26.25 14C26.25 13.3096 25.6904 12.75 25 12.75V14.25C24.8619 14.25 24.75 14.1381 24.75 14H26.25ZM16.535 23.2375C21.8156 22.991 26.25 19.0738 26.25 14H24.75C24.75 18.1158 21.1117 21.5222 16.465 21.7392L16.535 23.2375ZM17.25 27V22.4883H15.75V27H17.25ZM16 28.25C16.6904 28.25 17.25 27.6904 17.25 27H15.75C15.75 26.8619 15.8619 26.75 16 26.75V28.25ZM14.75 27C14.75 27.6904 15.3096 28.25 16 28.25V26.75C16.1381 26.75 16.25 26.8619 16.25 27H14.75ZM14.75 22.4883V27H16.25V22.4883H14.75ZM5.75 14C5.75 19.0738 10.1844 22.991 15.465 23.2375L15.535 21.7392C10.8883 21.5222 7.25 18.1158 7.25 14H5.75ZM7 12.75C6.30964 12.75 5.75 13.3096 5.75 14H7.25C7.25 14.1381 7.13807 14.25 7 14.25V12.75ZM24 26.75H16V28.25H24V26.75ZM25.25 28C25.25 27.3096 24.6904 26.75 24 26.75V28.25C23.8619 28.25 23.75 28.1381 23.75 28H25.25ZM24 29.25C24.6904 29.25 25.25 28.6904 25.25 28H23.75C23.75 27.8619 23.8619 27.75 24 27.75V29.25ZM8 29.25H24V27.75H8V29.25ZM6.75 28C6.75 28.6904 7.30964 29.25 8 29.25V27.75C8.13807 27.75 8.25 27.8619 8.25 28H6.75ZM8 26.75C7.30964 26.75 6.75 27.3096 6.75 28H8.25C8.25 28.1381 8.13807 28.25 8 28.25V26.75ZM16 26.75H8V28.25H16V26.75Z" fill="black"/>
+</svg>
diff --git a/src/assets/icons/rich-messaging.svg b/src/assets/icons/rich-messaging.svg
new file mode 100644
index 000000000..a1e6f5fc4
--- /dev/null
+++ b/src/assets/icons/rich-messaging.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.1691 13.5003C9.24736 13.5003 8.50266 14.245 8.50266 15.1668C8.50266 16.0885 9.24736 16.8332 10.1691 16.8332C11.0909 16.8332 11.8356 16.0885 11.8356 15.1668C11.8356 14.245 11.0909 13.5003 10.1691 13.5003ZM16.0017 13.5003C15.0799 13.5003 14.3352 14.245 14.3352 15.1668C14.3352 16.0885 15.0799 16.8332 16.0017 16.8332C16.9234 16.8332 17.6681 16.0885 17.6681 15.1668C17.6681 14.245 16.9234 13.5003 16.0017 13.5003ZM21.8343 13.5003C20.9125 13.5003 20.1678 14.245 20.1678 15.1668C20.1678 16.0885 20.9125 16.8332 21.8343 16.8332C22.756 16.8332 23.5007 16.0885 23.5007 15.1668C23.5007 14.245 22.756 13.5003 21.8343 13.5003ZM16.0017 4.33484C8.63806 4.33484 2.67008 9.18317 2.67008 15.1668C2.67008 17.6456 3.70641 19.9162 5.42493 21.744C4.64899 23.7959 3.03462 25.5352 3.00858 25.556C2.66487 25.9206 2.57114 26.4518 2.76903 26.91C2.96692 27.3683 3.41999 27.6651 3.91992 27.6651C7.12263 27.6651 9.64835 26.3268 11.1638 25.254C12.6688 25.7279 14.2936 25.9987 16.0017 25.9987C23.3653 25.9987 29.3333 21.1504 29.3333 15.1668C29.3333 9.18317 23.3653 4.33484 16.0017 4.33484ZM16.0017 23.499C14.6112 23.499 13.2364 23.2855 11.9189 22.8689L10.7367 22.4939L9.72125 23.2126C8.97656 23.7386 7.95586 24.327 6.72685 24.7228C7.10701 24.0927 7.47675 23.3845 7.76317 22.6293L8.31518 21.166L7.24241 20.0307C6.29982 19.0256 5.16976 17.3644 5.16976 15.1668C5.16976 10.5736 10.0285 6.83451 16.0017 6.83451C21.9749 6.83451 26.8336 10.5736 26.8336 15.1668C26.8336 19.7599 21.9749 23.499 16.0017 23.499Z" fill="black"/>
+</svg>
diff --git a/src/assets/icons/upload.svg b/src/assets/icons/upload.svg
new file mode 100644
index 000000000..262c1ae87
--- /dev/null
+++ b/src/assets/icons/upload.svg
@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 4.81464L16.342 5.13523L24.342 12.6352C24.5434 12.8241 24.5536 13.1405 24.3648 13.342C24.1759 13.5434 23.8595 13.5536 23.658 13.3648L16.5 6.65412V19C16.5 19.2761 16.2761 19.5 16 19.5C15.7239 19.5 15.5 19.2761 15.5 19V6.65412L8.34197 13.3648C8.14051 13.5536 7.8241 13.5434 7.63523 13.342C7.44637 13.1405 7.45657 12.8241 7.65803 12.6352L15.658 5.13523L16 4.81464ZM7 20.5C7.27614 20.5 7.5 20.7239 7.5 21V26C7.5 26.2761 7.72386 26.5 8 26.5H23C23.2761 26.5 23.5 26.2761 23.5 26V21C23.5 20.7239 23.7239 20.5 24 20.5C24.2761 20.5 24.5 20.7239 24.5 21V26C24.5 26.8284 23.8284 27.5 23 27.5H8C7.17157 27.5 6.5 26.8284 6.5 26V21C6.5 20.7239 6.72386 20.5 7 20.5Z" fill="black"/>
+<path d="M16.342 5.13523L15.829 5.68239L15.829 5.68239L16.342 5.13523ZM16 4.81464L16.513 4.26748L16 3.78659L15.487 4.26748L16 4.81464ZM24.342 12.6352L23.829 13.1824L23.829 13.1824L24.342 12.6352ZM23.658 13.3648L23.1451 13.9119L23.1451 13.9119L23.658 13.3648ZM16.5 6.65412L17.013 6.10697L15.75 4.92294V6.65412H16.5ZM15.5 6.65412H16.25V4.92294L14.987 6.10697L15.5 6.65412ZM8.34197 13.3648L8.85493 13.9119L8.85493 13.9119L8.34197 13.3648ZM7.63523 13.342L7.08808 13.8549L7.08808 13.8549L7.63523 13.342ZM7.65803 12.6352L8.17098 13.1824L8.17099 13.1824L7.65803 12.6352ZM15.658 5.13523L16.171 5.68239L16.171 5.68239L15.658 5.13523ZM16.8549 4.58808L16.513 4.26748L15.487 5.36179L15.829 5.68239L16.8549 4.58808ZM24.8549 12.0881L16.8549 4.58808L15.829 5.68239L23.829 13.1824L24.8549 12.0881ZM24.9119 13.8549C25.3841 13.3513 25.3586 12.5602 24.8549 12.0881L23.829 13.1824C23.7283 13.088 23.7232 12.9297 23.8176 12.829L24.9119 13.8549ZM23.1451 13.9119C23.6487 14.3841 24.4398 14.3586 24.9119 13.8549L23.8176 12.829C23.912 12.7283 24.0703 12.7232 24.171 12.8176L23.1451 13.9119ZM15.987 7.20127L23.1451 13.9119L24.171 12.8176L17.013 6.10697L15.987 7.20127ZM15.75 6.65412V19H17.25V6.65412H15.75ZM15.75 19C15.75 18.8619 15.8619 18.75 16 18.75V20.25C16.6904 20.25 17.25 19.6904 17.25 19H15.75ZM16 18.75C16.1381 18.75 16.25 18.8619 16.25 19H14.75C14.75 19.6904 15.3096 20.25 16 20.25V18.75ZM16.25 19V6.65412H14.75V19H16.25ZM8.85493 13.9119L16.013 7.20127L14.987 6.10697L7.82901 12.8176L8.85493 13.9119ZM7.08808 13.8549C7.56024 14.3586 8.35129 14.3841 8.85493 13.9119L7.82902 12.8176C7.92974 12.7232 8.08795 12.7283 8.18238 12.829L7.08808 13.8549ZM7.14507 12.0881C6.64143 12.5602 6.61592 13.3513 7.08808 13.8549L8.18238 12.829C8.27682 12.9297 8.27171 13.088 8.17098 13.1824L7.14507 12.0881ZM15.1451 4.58808L7.14507 12.0881L8.17099 13.1824L16.171 5.68239L15.1451 4.58808ZM15.487 4.26748L15.1451 4.58808L16.171 5.68239L16.513 5.36179L15.487 4.26748ZM8.25 21C8.25 20.3096 7.69036 19.75 7 19.75V21.25C6.86193 21.25 6.75 21.1381 6.75 21H8.25ZM8.25 26V21H6.75V26H8.25ZM8 25.75C8.13807 25.75 8.25 25.8619 8.25 26H6.75C6.75 26.6904 7.30964 27.25 8 27.25V25.75ZM23 25.75H8V27.25H23V25.75ZM22.75 26C22.75 25.8619 22.8619 25.75 23 25.75V27.25C23.6904 27.25 24.25 26.6904 24.25 26H22.75ZM22.75 21V26H24.25V21H22.75ZM24 19.75C23.3096 19.75 22.75 20.3096 22.75 21H24.25C24.25 21.1381 24.1381 21.25 24 21.25V19.75ZM25.25 21C25.25 20.3096 24.6904 19.75 24 19.75V21.25C23.8619 21.25 23.75 21.1381 23.75 21H25.25ZM25.25 26V21H23.75V26H25.25ZM23 28.25C24.2426 28.25 25.25 27.2426 25.25 26H23.75C23.75 26.4142 23.4142 26.75 23 26.75V28.25ZM8 28.25H23V26.75H8V28.25ZM5.75 26C5.75 27.2426 6.75736 28.25 8 28.25V26.75C7.58579 26.75 7.25 26.4142 7.25 26H5.75ZM5.75 21V26H7.25V21H5.75ZM7 19.75C6.30964 19.75 5.75 20.3096 5.75 21H7.25C7.25 21.1381 7.13807 21.25 7 21.25V19.75Z" fill="black"/>
+</svg>
diff --git a/src/assets/icons/ussd.svg b/src/assets/icons/ussd.svg
new file mode 100644
index 000000000..96ccc2a9b
--- /dev/null
+++ b/src/assets/icons/ussd.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.5 2H4.5C3.12109 2 2 3.12109 2 4.5V15.75C2 17.1289 3.12109 18.25 4.5 18.25H8.25V21.5312C8.25 21.8086 8.47656 22 8.71875 22C8.8125 22 8.91016 21.9727 8.99609 21.9062L13.875 18.25H19.5C20.8789 18.25 22 17.1289 22 15.75V4.5C22 3.12109 20.8789 2 19.5 2ZM20.125 15.75C20.125 16.0938 19.8438 16.375 19.5 16.375H13.25L10.125 18.7188V16.375H4.5C4.15625 16.375 3.875 16.0938 3.875 15.75V4.5C3.875 4.15625 4.15625 3.875 4.5 3.875H19.5C19.8438 3.875 20.125 4.15625 20.125 4.5V15.75Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.3453 5.50809C10.617 5.55756 10.7971 5.81791 10.7477 6.08958L10.5051 7.42164L13.5231 7.42164L13.7983 5.91042C13.8478 5.63875 14.1082 5.45862 14.3798 5.50809C14.6515 5.55756 14.8316 5.81791 14.7822 6.08958L14.5396 7.42164L15.5 7.42164C15.7761 7.42164 16 7.64549 16 7.92164C16 8.19778 15.7761 8.42164 15.5 8.42164L14.3575 8.42164L13.9705 10.5466H15.5C15.7761 10.5466 16 10.7705 16 11.0466C16 11.3228 15.7761 11.5466 15.5 11.5466H13.7884L13.4526 13.3905C13.4032 13.6621 13.1428 13.8423 12.8711 13.7928C12.5995 13.7433 12.4193 13.483 12.4688 13.2113L12.772 11.5466L9.7539 11.5466L9.41812 13.3905C9.36864 13.6621 9.1083 13.8423 8.83663 13.7928C8.56495 13.7433 8.38482 13.483 8.4343 13.2113L8.73745 11.5466H8C7.72386 11.5466 7.5 11.3228 7.5 11.0466C7.5 10.7705 7.72386 10.5466 8 10.5466H8.91956L9.30653 8.42164L8 8.42164C7.72386 8.42164 7.5 8.19778 7.5 7.92164C7.5 7.6455 7.72386 7.42164 8 7.42164L9.48864 7.42164L9.76384 5.91042C9.81332 5.63875 10.0737 5.45862 10.3453 5.50809ZM10.323 8.42164L9.936 10.5466H12.9541L13.341 8.42164H10.323Z" fill="black"/>
+</svg>
diff --git a/src/assets/messages.json b/src/assets/messages.json
index 2c1c08947..f155f9ad9 100644
--- a/src/assets/messages.json
+++ b/src/assets/messages.json
@@ -1135,6 +1135,8 @@
     "run-another-tree": "Run Another Tree",
     "runs-the-latest-version-of": "Runs the latest version of",
     "runs-the-latest-version-of ": "Runs the latest version of",
+    "record-audio": "Record Audio",
+    "upload-audio": "Upload Audio",
     "sat": "Sat",
     "saturday-day": "Saturday",
     "save": "Save",
@@ -2721,6 +2723,8 @@
     "run-another-tree": "Exécutez un autre arbre",
     "runs-the-latest-version-of": "Exécuter la dernière version de",
     "runs-the-latest-version-of ": "S'exécute la dernière version de",
+    "record-audio": "Enregistrement audio",
+    "upload-audio": "Télécharger audio",
     "sat": "Sam.",
     "saturday-day": "samedi",
     "save": "Sauvegarder",
diff --git a/src/components/interaction-designer/resource-editors/ResourceEditor.vue b/src/components/interaction-designer/resource-editors/ResourceEditor.vue
index 4b68055c2..07b4881cb 100644
--- a/src/components/interaction-designer/resource-editors/ResourceEditor.vue
+++ b/src/components/interaction-designer/resource-editors/ResourceEditor.vue
@@ -17,7 +17,10 @@
             v-for="(mode, i) in flow.supported_modes"
             :key="i"
             class="tab-content-style">
-            <h6>{{ `flow-builder.${mode.toLowerCase()}-content` | trans }}</h6>
+            <header class="d-flex">
+              <svg-icon :style="{marginTop: '2px'}" :icon="iconsMap.get(mode)" />
+              <h6 class="ml-1">{{ `flow-builder.${mode.toLowerCase()}-content` | trans }}</h6>
+            </header>
 
             <template v-for="contentType in discoverContentTypesFor(mode)">
               <!-- todo: it's odd that we pass around a ContentType variant rather than a ContentTypeLangMode variant (aka, mode as external arg) -->
@@ -51,9 +54,10 @@
                   <div class="d-flex mt-2">
                     <button
                       v-if="can(['edit-content', 'send-call-to-records'], true) && isFeatureAudioUploadEnabled"
-                      class="btn btn-primary"
+                      class="btn btn-primary ivr-buttons"
                       @click.prevent="triggerRecordViaPhoneFor(languageId)">
-                      {{ 'flow-builder.phone-recording' | trans }}
+                      <svg-icon icon="record-audio" />
+                      {{ 'flow-builder.record-audio' | trans }}
                     </button>
                     <button
                       v-if="isEditable && isFeatureAudioUploadEnabled"
@@ -61,10 +65,11 @@
                         target: route('trees.resumeableAudioUpload'),
                         token: `${block.uuid}${languageId}`,
                         accept: 'audio/*'}"
-                      class="btn btn-primary ml-2"
+                      class="btn btn-primary ivr-buttons ml-2"
                       @filesSubmitted="handleFilesSubmittedFor(`${block.uuid}:${languageId}`, $event)"
                       @fileSuccess="handleFileSuccessFor(`${block.uuid}:${languageId}`, languageId, $event)">
-                      {{ 'flow-builder.upload' | trans }}
+                      <svg-icon icon="upload" />
+                      {{ 'flow-builder.upload-audio' | trans }}
                     </button>
                   </div>
                 </template>
@@ -107,6 +112,7 @@ import {mixins} from 'vue-class-component'
 import {TabsPlugin} from 'bootstrap-vue'
 import UploadMonitor from '../block-editors/UploadMonitor.vue'
 import ResourceVariantTextEditor from './ResourceVariantTextEditor.vue'
+import SvgIcon from '@/components/common/SvgIcon.vue'
 
 Vue.use(TabsPlugin)
 
@@ -133,6 +139,7 @@ interface IResourceDefinitionVariantOverModesWithOptionalValue extends Partial<I
     ResourceVariantTextEditor,
     UploadMonitor,
     PhoneRecorder,
+    SvgIcon,
   },
 })
 export class ResourceEditor extends mixins(FlowUploader, Permissions, Routes, Lang) {
@@ -154,6 +161,16 @@ export class ResourceEditor extends mixins(FlowUploader, Permissions, Routes, La
 
   SupportedContentType = SupportedContentType
 
+  iconsMap = new Map<string, string>()
+
+  created() {
+    this.iconsMap.set(SupportedMode.SMS, 'message')
+    this.iconsMap.set(SupportedMode.USSD, 'ussd')
+    this.iconsMap.set(SupportedMode.IVR, 'audio')
+    this.iconsMap.set(SupportedMode.RICH_MESSAGING, 'rich-messaging')
+    this.iconsMap.set(SupportedMode.OFFLINE, 'phone')
+  }
+
   triggerRecordViaPhoneFor(langId: ILanguage['id']): void {
     this.$store.commit('setAudioRecordingConfigVisibilityForSelectedBlock', {langId, isVisible: true})
   }
@@ -228,4 +245,8 @@ export default ResourceEditor
   background: #F4F4F4;
   padding: 10px;
 }
+.ivr-buttons {
+  font-size: small;
+  flex-grow: 1;
+}
 </style>

From 01c9a00b96a1555ece7007f7b4f8050c74888850 Mon Sep 17 00:00:00 2001
From: Pooja Patil <pooja.patil@viamo.io>
Date: Thu, 8 Jul 2021 17:14:05 -0700
Subject: [PATCH 10/22] VMO-4138 Adding horizontal divider

---
 .../flow-editors/FirstBlockEditorButton.vue                   | 1 +
 .../interaction-designer/resource-editors/ResourceEditor.vue  | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/interaction-designer/flow-editors/FirstBlockEditorButton.vue b/src/components/interaction-designer/flow-editors/FirstBlockEditorButton.vue
index 36aa457ac..0e5f55828 100644
--- a/src/components/interaction-designer/flow-editors/FirstBlockEditorButton.vue
+++ b/src/components/interaction-designer/flow-editors/FirstBlockEditorButton.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="starting-block-button">
+    <hr>
     <template v-if="isEditable">
       <h4>{{ 'flow-builder.options' | trans }}</h4>
       <div class="form-group">
diff --git a/src/components/interaction-designer/resource-editors/ResourceEditor.vue b/src/components/interaction-designer/resource-editors/ResourceEditor.vue
index 07b4881cb..dc4f292cf 100644
--- a/src/components/interaction-designer/resource-editors/ResourceEditor.vue
+++ b/src/components/interaction-designer/resource-editors/ResourceEditor.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="resource-editor">
-    <hr v-if="label">
+  <div class="resource-editor" v-if="flow.languages.length > 0">
+    <hr>
 
     <h4 v-if="label">
       {{ label }}

From 7e9a0e71f819b778e211581dabeb3382472dda26 Mon Sep 17 00:00:00 2001
From: Pooja Patil <pooja.patil@viamo.io>
Date: Thu, 8 Jul 2021 17:20:53 -0700
Subject: [PATCH 11/22] VMO-4138 Updating snapshot

---
 .../unit/__snapshots__/storybook.spec.ts.snap | 1536 ++++++++++-------
 1 file changed, 924 insertions(+), 612 deletions(-)

diff --git a/tests/unit/__snapshots__/storybook.spec.ts.snap b/tests/unit/__snapshots__/storybook.spec.ts.snap
index d3aefd5e0..4c8ab66a0 100644
--- a/tests/unit/__snapshots__/storybook.spec.ts.snap
+++ b/tests/unit/__snapshots__/storybook.spec.ts.snap
@@ -1944,182 +1944,253 @@ exports[`Storyshots MobilePrimitives/Numeric Response Block Existing Data For Te
                           <div
                             class="resource-editor"
                           >
-                            <!---->
-                             
-                            <!---->
-                             
-                            <div
-                              class="block-content-editor-lang"
-                            >
-                              <h5
-                                class="badge badge-info"
-                              >
-                                
-        English
-      
-                              </h5>
-                            </div>
-                             
-                            <h6>
-                              SMS Content
-                            </h6>
-                             
-                            <div
-                              class="resource-variant-text-editor"
-                            >
-                              <div
-                                class="content-editor"
-                              >
-                                <textarea
-                                  class="form-control"
-                                  placeholder="Enter Text content"
-                                />
-                              </div>
-                               
-                              <div
-                                class="content-toolbar"
-                              >
-                                <!---->
-                                 
-                                <!---->
-                                 
-                                <!---->
-                              </div>
-                            </div>
-                             
-                            <!---->
-                            <h6>
-                              USSD Content
-                            </h6>
-                             
-                            <div
-                              class="resource-variant-text-editor"
-                            >
-                              <div
-                                class="content-editor"
-                              >
-                                <textarea
-                                  class="form-control"
-                                  placeholder="Enter Text content"
-                                />
-                              </div>
-                               
-                              <div
-                                class="content-toolbar"
-                              >
-                                <!---->
-                                 
-                                <!---->
-                                 
-                                <!---->
-                              </div>
-                            </div>
-                             
-                            <!---->
-                            <h6>
-                              IVR Content
-                            </h6>
+                            <hr />
                              
                             <!---->
                              
                             <div>
                               <div
-                                class="upload-monitor"
+                                class="tabs"
                               >
                                 <!---->
-                                 
-                                <!---->
-                                 
-                              </div>
-                               
-                              <ul
-                                class="nav nav-tabs"
-                              >
-                                <li
-                                  class="nav-item"
-                                >
-                                  <a
-                                    class="nav-link px-2 py-1 active"
-                                    href="#"
-                                  >
-                                    Library
-                                  </a>
-                                </li>
-                                 
-                                <li
-                                  class="nav-item"
-                                >
-                                  <a
-                                    class="nav-link px-2 py-1"
-                                    href="#"
-                                  >
-                                    Phone recording
-                                  </a>
-                                </li>
-                                 
-                                <li
-                                  class="nav-item"
+                                <div
+                                  class=""
                                 >
-                                  <a
-                                    class="nav-link px-2 py-1"
-                                    href="#"
-                                    style="overflow: hidden;"
+                                  <ul
+                                    class="nav nav-tabs"
+                                    role="tablist"
                                   >
-                                    
-                  Upload
-                
-                                    <input
-                                      accept="audio/*"
-                                      style="visibility: hidden; position: absolute; width: 1px; height: 1px;"
-                                      type="file"
-                                    />
-                                  </a>
-                                </li>
-                              </ul>
-                               
-                              <div
-                                class="audio-library-selector"
-                              >
+                                    <!---->
+                                    <!---->
+                                  </ul>
+                                </div>
                                 <div
-                                  class="audio-library-search-field dropdown"
+                                  class="tab-content"
                                 >
                                   <div
-                                    class="input-group"
+                                    aria-hidden="false"
+                                    class="tab-pane active"
+                                    role="tabpanel"
                                   >
-                                    <span
-                                      class="input-group-prepend"
+                                    <div
+                                      class="tab-content-style"
                                     >
-                                      <button
-                                        class="btn btn-outline-secondary dropdown-toggle"
+                                      <header
+                                        class="d-flex"
                                       >
-                                        <i
-                                          class="glyphicon glyphicon-search"
-                                        />
-                                      </button>
-                                    </span>
-                                     
-                                    <input
-                                      class="form-control"
-                                      placeholder="Search audio library…"
-                                      type="text"
-                                    />
+                                        <svg
+                                          class="icon"
+                                          style="margin-top: 2px;"
+                                        >
+                                          <use
+                                            xlink:href="#message"
+                                          />
+                                        </svg>
+                                         
+                                        <h6
+                                          class="ml-1"
+                                        >
+                                          SMS Content
+                                        </h6>
+                                      </header>
+                                       
+                                      <div
+                                        class="resource-variant-text-editor"
+                                      >
+                                        <div
+                                          class="content-editor"
+                                        >
+                                          <textarea
+                                            class="form-control"
+                                            placeholder="Enter Text content"
+                                          />
+                                        </div>
+                                         
+                                        <div
+                                          class="content-toolbar"
+                                        >
+                                          <!---->
+                                           
+                                          <!---->
+                                           
+                                          <!---->
+                                        </div>
+                                      </div>
+                                       
+                                      <!---->
+                                    </div>
+                                    <div
+                                      class="tab-content-style"
+                                    >
+                                      <header
+                                        class="d-flex"
+                                      >
+                                        <svg
+                                          class="icon"
+                                          style="margin-top: 2px;"
+                                        >
+                                          <use
+                                            xlink:href="#ussd"
+                                          />
+                                        </svg>
+                                         
+                                        <h6
+                                          class="ml-1"
+                                        >
+                                          USSD Content
+                                        </h6>
+                                      </header>
+                                       
+                                      <div
+                                        class="resource-variant-text-editor"
+                                      >
+                                        <div
+                                          class="content-editor"
+                                        >
+                                          <textarea
+                                            class="form-control"
+                                            placeholder="Enter Text content"
+                                          />
+                                        </div>
+                                         
+                                        <div
+                                          class="content-toolbar"
+                                        >
+                                          <!---->
+                                           
+                                          <!---->
+                                           
+                                          <!---->
+                                        </div>
+                                      </div>
+                                       
+                                      <!---->
+                                    </div>
+                                    <div
+                                      class="tab-content-style"
+                                    >
+                                      <header
+                                        class="d-flex"
+                                      >
+                                        <svg
+                                          class="icon"
+                                          style="margin-top: 2px;"
+                                        >
+                                          <use
+                                            xlink:href="#audio"
+                                          />
+                                        </svg>
+                                         
+                                        <h6
+                                          class="ml-1"
+                                        >
+                                          IVR Content
+                                        </h6>
+                                      </header>
+                                       
+                                      <!---->
+                                       
+                                      <div>
+                                        <div
+                                          class="audio-library-selector"
+                                        >
+                                          <div
+                                            class="audio-library-search-field dropdown"
+                                          >
+                                            <div
+                                              class="input-group"
+                                            >
+                                              <input
+                                                class="form-control"
+                                                placeholder="Search audio library…"
+                                                type="text"
+                                              />
+                                               
+                                              <span
+                                                class="input-group-prepend"
+                                              >
+                                                <button
+                                                  class="btn btn-primary dropdown-toggle"
+                                                >
+                                                  <i
+                                                    class="glyphicon glyphicon-search"
+                                                  />
+                                                </button>
+                                              </span>
+                                            </div>
+                                             
+                                            <!---->
+                                          </div>
+                                        </div>
+                                         
+                                        <div
+                                          class="phone-recorder"
+                                        >
+                                          <!---->
+                                        </div>
+                                         
+                                        <div
+                                          class="upload-monitor"
+                                        >
+                                          <!---->
+                                           
+                                          <!---->
+                                           
+                                        </div>
+                                         
+                                        <div
+                                          class="d-flex mt-2"
+                                        >
+                                          <button
+                                            class="btn btn-primary ivr-buttons"
+                                          >
+                                            <svg
+                                              class="icon"
+                                            >
+                                              <use
+                                                xlink:href="#record-audio"
+                                              />
+                                            </svg>
+                                            
+                    Record Audio
+                  
+                                          </button>
+                                           
+                                          <button
+                                            class="btn btn-primary ivr-buttons ml-2"
+                                            style="overflow: hidden;"
+                                          >
+                                            <svg
+                                              class="icon"
+                                            >
+                                              <use
+                                                xlink:href="#upload"
+                                              />
+                                            </svg>
+                                            
+                    Upload Audio
+                  
+                                            <input
+                                              accept="audio/*"
+                                              style="visibility: hidden; position: absolute; width: 1px; height: 1px;"
+                                              type="file"
+                                            />
+                                          </button>
+                                        </div>
+                                      </div>
+                                    </div>
                                   </div>
-                                   
                                   <!---->
                                 </div>
                               </div>
-                               
-                              <div
-                                class="phone-recorder"
-                              >
-                                <!---->
-                              </div>
                             </div>
                           </div>
                             
                           <div
                             class="starting-block-button"
                           >
+                            <hr />
+                             
                             <h4>
                               Options
                             </h4>
@@ -2128,11 +2199,18 @@ exports[`Storyshots MobilePrimitives/Numeric Response Block Existing Data For Te
                               class="form-group"
                             >
                               <button
-                                class="btn btn-secondary btn-sm"
+                                class="btn btn-outline-primary btn-sm w-100"
                                 disabled="disabled"
                                 type="button"
                               >
-                                
+                                <svg
+                                  class="icon"
+                                >
+                                  <use
+                                    xlink:href="#enter"
+                                  />
+                                </svg>
+                                 
           Currently set as starting block
         
                               </button>
@@ -2405,182 +2483,253 @@ exports[`Storyshots MobilePrimitives/Numeric Response Block Non Starting Block 1
                           <div
                             class="resource-editor"
                           >
-                            <!---->
-                             
-                            <!---->
-                             
-                            <div
-                              class="block-content-editor-lang"
-                            >
-                              <h5
-                                class="badge badge-info"
-                              >
-                                
-        English
-      
-                              </h5>
-                            </div>
-                             
-                            <h6>
-                              SMS Content
-                            </h6>
-                             
-                            <div
-                              class="resource-variant-text-editor"
-                            >
-                              <div
-                                class="content-editor"
-                              >
-                                <textarea
-                                  class="form-control"
-                                  placeholder="Enter Text content"
-                                />
-                              </div>
-                               
-                              <div
-                                class="content-toolbar"
-                              >
-                                <!---->
-                                 
-                                <!---->
-                                 
-                                <!---->
-                              </div>
-                            </div>
-                             
-                            <!---->
-                            <h6>
-                              USSD Content
-                            </h6>
-                             
-                            <div
-                              class="resource-variant-text-editor"
-                            >
-                              <div
-                                class="content-editor"
-                              >
-                                <textarea
-                                  class="form-control"
-                                  placeholder="Enter Text content"
-                                />
-                              </div>
-                               
-                              <div
-                                class="content-toolbar"
-                              >
-                                <!---->
-                                 
-                                <!---->
-                                 
-                                <!---->
-                              </div>
-                            </div>
-                             
-                            <!---->
-                            <h6>
-                              IVR Content
-                            </h6>
+                            <hr />
                              
                             <!---->
                              
                             <div>
                               <div
-                                class="upload-monitor"
+                                class="tabs"
                               >
                                 <!---->
-                                 
-                                <!---->
-                                 
-                              </div>
-                               
-                              <ul
-                                class="nav nav-tabs"
-                              >
-                                <li
-                                  class="nav-item"
-                                >
-                                  <a
-                                    class="nav-link px-2 py-1 active"
-                                    href="#"
-                                  >
-                                    Library
-                                  </a>
-                                </li>
-                                 
-                                <li
-                                  class="nav-item"
-                                >
-                                  <a
-                                    class="nav-link px-2 py-1"
-                                    href="#"
-                                  >
-                                    Phone recording
-                                  </a>
-                                </li>
-                                 
-                                <li
-                                  class="nav-item"
+                                <div
+                                  class=""
                                 >
-                                  <a
-                                    class="nav-link px-2 py-1"
-                                    href="#"
-                                    style="overflow: hidden;"
+                                  <ul
+                                    class="nav nav-tabs"
+                                    role="tablist"
                                   >
-                                    
-                  Upload
-                
-                                    <input
-                                      accept="audio/*"
-                                      style="visibility: hidden; position: absolute; width: 1px; height: 1px;"
-                                      type="file"
-                                    />
-                                  </a>
-                                </li>
-                              </ul>
-                               
-                              <div
-                                class="audio-library-selector"
-                              >
+                                    <!---->
+                                    <!---->
+                                  </ul>
+                                </div>
                                 <div
-                                  class="audio-library-search-field dropdown"
+                                  class="tab-content"
                                 >
                                   <div
-                                    class="input-group"
+                                    aria-hidden="false"
+                                    class="tab-pane active"
+                                    role="tabpanel"
                                   >
-                                    <span
-                                      class="input-group-prepend"
+                                    <div
+                                      class="tab-content-style"
                                     >
-                                      <button
-                                        class="btn btn-outline-secondary dropdown-toggle"
+                                      <header
+                                        class="d-flex"
                                       >
-                                        <i
-                                          class="glyphicon glyphicon-search"
-                                        />
-                                      </button>
-                                    </span>
-                                     
-                                    <input
-                                      class="form-control"
-                                      placeholder="Search audio library…"
-                                      type="text"
-                                    />
+                                        <svg
+                                          class="icon"
+                                          style="margin-top: 2px;"
+                                        >
+                                          <use
+                                            xlink:href="#message"
+                                          />
+                                        </svg>
+                                         
+                                        <h6
+                                          class="ml-1"
+                                        >
+                                          SMS Content
+                                        </h6>
+                                      </header>
+                                       
+                                      <div
+                                        class="resource-variant-text-editor"
+                                      >
+                                        <div
+                                          class="content-editor"
+                                        >
+                                          <textarea
+                                            class="form-control"
+                                            placeholder="Enter Text content"
+                                          />
+                                        </div>
+                                         
+                                        <div
+                                          class="content-toolbar"
+                                        >
+                                          <!---->
+                                           
+                                          <!---->
+                                           
+                                          <!---->
+                                        </div>
+                                      </div>
+                                       
+                                      <!---->
+                                    </div>
+                                    <div
+                                      class="tab-content-style"
+                                    >
+                                      <header
+                                        class="d-flex"
+                                      >
+                                        <svg
+                                          class="icon"
+                                          style="margin-top: 2px;"
+                                        >
+                                          <use
+                                            xlink:href="#ussd"
+                                          />
+                                        </svg>
+                                         
+                                        <h6
+                                          class="ml-1"
+                                        >
+                                          USSD Content
+                                        </h6>
+                                      </header>
+                                       
+                                      <div
+                                        class="resource-variant-text-editor"
+                                      >
+                                        <div
+                                          class="content-editor"
+                                        >
+                                          <textarea
+                                            class="form-control"
+                                            placeholder="Enter Text content"
+                                          />
+                                        </div>
+                                         
+                                        <div
+                                          class="content-toolbar"
+                                        >
+                                          <!---->
+                                           
+                                          <!---->
+                                           
+                                          <!---->
+                                        </div>
+                                      </div>
+                                       
+                                      <!---->
+                                    </div>
+                                    <div
+                                      class="tab-content-style"
+                                    >
+                                      <header
+                                        class="d-flex"
+                                      >
+                                        <svg
+                                          class="icon"
+                                          style="margin-top: 2px;"
+                                        >
+                                          <use
+                                            xlink:href="#audio"
+                                          />
+                                        </svg>
+                                         
+                                        <h6
+                                          class="ml-1"
+                                        >
+                                          IVR Content
+                                        </h6>
+                                      </header>
+                                       
+                                      <!---->
+                                       
+                                      <div>
+                                        <div
+                                          class="audio-library-selector"
+                                        >
+                                          <div
+                                            class="audio-library-search-field dropdown"
+                                          >
+                                            <div
+                                              class="input-group"
+                                            >
+                                              <input
+                                                class="form-control"
+                                                placeholder="Search audio library…"
+                                                type="text"
+                                              />
+                                               
+                                              <span
+                                                class="input-group-prepend"
+                                              >
+                                                <button
+                                                  class="btn btn-primary dropdown-toggle"
+                                                >
+                                                  <i
+                                                    class="glyphicon glyphicon-search"
+                                                  />
+                                                </button>
+                                              </span>
+                                            </div>
+                                             
+                                            <!---->
+                                          </div>
+                                        </div>
+                                         
+                                        <div
+                                          class="phone-recorder"
+                                        >
+                                          <!---->
+                                        </div>
+                                         
+                                        <div
+                                          class="upload-monitor"
+                                        >
+                                          <!---->
+                                           
+                                          <!---->
+                                           
+                                        </div>
+                                         
+                                        <div
+                                          class="d-flex mt-2"
+                                        >
+                                          <button
+                                            class="btn btn-primary ivr-buttons"
+                                          >
+                                            <svg
+                                              class="icon"
+                                            >
+                                              <use
+                                                xlink:href="#record-audio"
+                                              />
+                                            </svg>
+                                            
+                    Record Audio
+                  
+                                          </button>
+                                           
+                                          <button
+                                            class="btn btn-primary ivr-buttons ml-2"
+                                            style="overflow: hidden;"
+                                          >
+                                            <svg
+                                              class="icon"
+                                            >
+                                              <use
+                                                xlink:href="#upload"
+                                              />
+                                            </svg>
+                                            
+                    Upload Audio
+                  
+                                            <input
+                                              accept="audio/*"
+                                              style="visibility: hidden; position: absolute; width: 1px; height: 1px;"
+                                              type="file"
+                                            />
+                                          </button>
+                                        </div>
+                                      </div>
+                                    </div>
                                   </div>
-                                   
                                   <!---->
                                 </div>
                               </div>
-                               
-                              <div
-                                class="phone-recorder"
-                              >
-                                <!---->
-                              </div>
                             </div>
                           </div>
                             
                           <div
                             class="starting-block-button"
                           >
+                            <hr />
+                             
                             <h4>
                               Options
                             </h4>
@@ -2589,11 +2738,18 @@ exports[`Storyshots MobilePrimitives/Numeric Response Block Non Starting Block 1
                               class="form-group"
                             >
                               <button
-                                class="btn btn-secondary btn-sm"
+                                class="btn btn-outline-primary btn-sm w-100"
                                 disabled="disabled"
                                 type="button"
                               >
-                                
+                                <svg
+                                  class="icon"
+                                >
+                                  <use
+                                    xlink:href="#enter"
+                                  />
+                                </svg>
+                                 
           Currently set as starting block
         
                               </button>
@@ -2859,182 +3015,253 @@ exports[`Storyshots MobilePrimitives/Open Response Block Existing Data For Text
                           <div
                             class="resource-editor"
                           >
-                            <!---->
-                             
-                            <!---->
-                             
-                            <div
-                              class="block-content-editor-lang"
-                            >
-                              <h5
-                                class="badge badge-info"
-                              >
-                                
-        English
-      
-                              </h5>
-                            </div>
-                             
-                            <h6>
-                              SMS Content
-                            </h6>
-                             
-                            <div
-                              class="resource-variant-text-editor"
-                            >
-                              <div
-                                class="content-editor"
-                              >
-                                <textarea
-                                  class="form-control"
-                                  placeholder="Enter Text content"
-                                />
-                              </div>
-                               
-                              <div
-                                class="content-toolbar"
-                              >
-                                <!---->
-                                 
-                                <!---->
-                                 
-                                <!---->
-                              </div>
-                            </div>
-                             
-                            <!---->
-                            <h6>
-                              USSD Content
-                            </h6>
-                             
-                            <div
-                              class="resource-variant-text-editor"
-                            >
-                              <div
-                                class="content-editor"
-                              >
-                                <textarea
-                                  class="form-control"
-                                  placeholder="Enter Text content"
-                                />
-                              </div>
-                               
-                              <div
-                                class="content-toolbar"
-                              >
-                                <!---->
-                                 
-                                <!---->
-                                 
-                                <!---->
-                              </div>
-                            </div>
-                             
-                            <!---->
-                            <h6>
-                              IVR Content
-                            </h6>
+                            <hr />
                              
                             <!---->
                              
                             <div>
                               <div
-                                class="upload-monitor"
+                                class="tabs"
                               >
                                 <!---->
-                                 
-                                <!---->
-                                 
-                              </div>
-                               
-                              <ul
-                                class="nav nav-tabs"
-                              >
-                                <li
-                                  class="nav-item"
-                                >
-                                  <a
-                                    class="nav-link px-2 py-1 active"
-                                    href="#"
-                                  >
-                                    Library
-                                  </a>
-                                </li>
-                                 
-                                <li
-                                  class="nav-item"
-                                >
-                                  <a
-                                    class="nav-link px-2 py-1"
-                                    href="#"
-                                  >
-                                    Phone recording
-                                  </a>
-                                </li>
-                                 
-                                <li
-                                  class="nav-item"
+                                <div
+                                  class=""
                                 >
-                                  <a
-                                    class="nav-link px-2 py-1"
-                                    href="#"
-                                    style="overflow: hidden;"
+                                  <ul
+                                    class="nav nav-tabs"
+                                    role="tablist"
                                   >
-                                    
-                  Upload
-                
-                                    <input
-                                      accept="audio/*"
-                                      style="visibility: hidden; position: absolute; width: 1px; height: 1px;"
-                                      type="file"
-                                    />
-                                  </a>
-                                </li>
-                              </ul>
-                               
-                              <div
-                                class="audio-library-selector"
-                              >
+                                    <!---->
+                                    <!---->
+                                  </ul>
+                                </div>
                                 <div
-                                  class="audio-library-search-field dropdown"
+                                  class="tab-content"
                                 >
                                   <div
-                                    class="input-group"
+                                    aria-hidden="false"
+                                    class="tab-pane active"
+                                    role="tabpanel"
                                   >
-                                    <span
-                                      class="input-group-prepend"
+                                    <div
+                                      class="tab-content-style"
                                     >
-                                      <button
-                                        class="btn btn-outline-secondary dropdown-toggle"
+                                      <header
+                                        class="d-flex"
                                       >
-                                        <i
-                                          class="glyphicon glyphicon-search"
-                                        />
-                                      </button>
-                                    </span>
-                                     
-                                    <input
-                                      class="form-control"
-                                      placeholder="Search audio library…"
-                                      type="text"
-                                    />
+                                        <svg
+                                          class="icon"
+                                          style="margin-top: 2px;"
+                                        >
+                                          <use
+                                            xlink:href="#message"
+                                          />
+                                        </svg>
+                                         
+                                        <h6
+                                          class="ml-1"
+                                        >
+                                          SMS Content
+                                        </h6>
+                                      </header>
+                                       
+                                      <div
+                                        class="resource-variant-text-editor"
+                                      >
+                                        <div
+                                          class="content-editor"
+                                        >
+                                          <textarea
+                                            class="form-control"
+                                            placeholder="Enter Text content"
+                                          />
+                                        </div>
+                                         
+                                        <div
+                                          class="content-toolbar"
+                                        >
+                                          <!---->
+                                           
+                                          <!---->
+                                           
+                                          <!---->
+                                        </div>
+                                      </div>
+                                       
+                                      <!---->
+                                    </div>
+                                    <div
+                                      class="tab-content-style"
+                                    >
+                                      <header
+                                        class="d-flex"
+                                      >
+                                        <svg
+                                          class="icon"
+                                          style="margin-top: 2px;"
+                                        >
+                                          <use
+                                            xlink:href="#ussd"
+                                          />
+                                        </svg>
+                                         
+                                        <h6
+                                          class="ml-1"
+                                        >
+                                          USSD Content
+                                        </h6>
+                                      </header>
+                                       
+                                      <div
+                                        class="resource-variant-text-editor"
+                                      >
+                                        <div
+                                          class="content-editor"
+                                        >
+                                          <textarea
+                                            class="form-control"
+                                            placeholder="Enter Text content"
+                                          />
+                                        </div>
+                                         
+                                        <div
+                                          class="content-toolbar"
+                                        >
+                                          <!---->
+                                           
+                                          <!---->
+                                           
+                                          <!---->
+                                        </div>
+                                      </div>
+                                       
+                                      <!---->
+                                    </div>
+                                    <div
+                                      class="tab-content-style"
+                                    >
+                                      <header
+                                        class="d-flex"
+                                      >
+                                        <svg
+                                          class="icon"
+                                          style="margin-top: 2px;"
+                                        >
+                                          <use
+                                            xlink:href="#audio"
+                                          />
+                                        </svg>
+                                         
+                                        <h6
+                                          class="ml-1"
+                                        >
+                                          IVR Content
+                                        </h6>
+                                      </header>
+                                       
+                                      <!---->
+                                       
+                                      <div>
+                                        <div
+                                          class="audio-library-selector"
+                                        >
+                                          <div
+                                            class="audio-library-search-field dropdown"
+                                          >
+                                            <div
+                                              class="input-group"
+                                            >
+                                              <input
+                                                class="form-control"
+                                                placeholder="Search audio library…"
+                                                type="text"
+                                              />
+                                               
+                                              <span
+                                                class="input-group-prepend"
+                                              >
+                                                <button
+                                                  class="btn btn-primary dropdown-toggle"
+                                                >
+                                                  <i
+                                                    class="glyphicon glyphicon-search"
+                                                  />
+                                                </button>
+                                              </span>
+                                            </div>
+                                             
+                                            <!---->
+                                          </div>
+                                        </div>
+                                         
+                                        <div
+                                          class="phone-recorder"
+                                        >
+                                          <!---->
+                                        </div>
+                                         
+                                        <div
+                                          class="upload-monitor"
+                                        >
+                                          <!---->
+                                           
+                                          <!---->
+                                           
+                                        </div>
+                                         
+                                        <div
+                                          class="d-flex mt-2"
+                                        >
+                                          <button
+                                            class="btn btn-primary ivr-buttons"
+                                          >
+                                            <svg
+                                              class="icon"
+                                            >
+                                              <use
+                                                xlink:href="#record-audio"
+                                              />
+                                            </svg>
+                                            
+                    Record Audio
+                  
+                                          </button>
+                                           
+                                          <button
+                                            class="btn btn-primary ivr-buttons ml-2"
+                                            style="overflow: hidden;"
+                                          >
+                                            <svg
+                                              class="icon"
+                                            >
+                                              <use
+                                                xlink:href="#upload"
+                                              />
+                                            </svg>
+                                            
+                    Upload Audio
+                  
+                                            <input
+                                              accept="audio/*"
+                                              style="visibility: hidden; position: absolute; width: 1px; height: 1px;"
+                                              type="file"
+                                            />
+                                          </button>
+                                        </div>
+                                      </div>
+                                    </div>
                                   </div>
-                                   
                                   <!---->
                                 </div>
                               </div>
-                               
-                              <div
-                                class="phone-recorder"
-                              >
-                                <!---->
-                              </div>
                             </div>
                           </div>
                             
                           <div
                             class="starting-block-button"
                           >
+                            <hr />
+                             
                             <h4>
                               Options
                             </h4>
@@ -3043,11 +3270,18 @@ exports[`Storyshots MobilePrimitives/Open Response Block Existing Data For Text
                               class="form-group"
                             >
                               <button
-                                class="btn btn-secondary btn-sm"
+                                class="btn btn-outline-primary btn-sm w-100"
                                 disabled="disabled"
                                 type="button"
                               >
-                                
+                                <svg
+                                  class="icon"
+                                >
+                                  <use
+                                    xlink:href="#enter"
+                                  />
+                                </svg>
+                                 
           Currently set as starting block
         
                               </button>
@@ -3295,182 +3529,253 @@ exports[`Storyshots MobilePrimitives/Open Response Block Non Starting Block 1`]
                           <div
                             class="resource-editor"
                           >
-                            <!---->
-                             
-                            <!---->
-                             
-                            <div
-                              class="block-content-editor-lang"
-                            >
-                              <h5
-                                class="badge badge-info"
-                              >
-                                
-        English
-      
-                              </h5>
-                            </div>
-                             
-                            <h6>
-                              SMS Content
-                            </h6>
-                             
-                            <div
-                              class="resource-variant-text-editor"
-                            >
-                              <div
-                                class="content-editor"
-                              >
-                                <textarea
-                                  class="form-control"
-                                  placeholder="Enter Text content"
-                                />
-                              </div>
-                               
-                              <div
-                                class="content-toolbar"
-                              >
-                                <!---->
-                                 
-                                <!---->
-                                 
-                                <!---->
-                              </div>
-                            </div>
-                             
-                            <!---->
-                            <h6>
-                              USSD Content
-                            </h6>
-                             
-                            <div
-                              class="resource-variant-text-editor"
-                            >
-                              <div
-                                class="content-editor"
-                              >
-                                <textarea
-                                  class="form-control"
-                                  placeholder="Enter Text content"
-                                />
-                              </div>
-                               
-                              <div
-                                class="content-toolbar"
-                              >
-                                <!---->
-                                 
-                                <!---->
-                                 
-                                <!---->
-                              </div>
-                            </div>
-                             
-                            <!---->
-                            <h6>
-                              IVR Content
-                            </h6>
+                            <hr />
                              
                             <!---->
                              
                             <div>
                               <div
-                                class="upload-monitor"
+                                class="tabs"
                               >
                                 <!---->
-                                 
-                                <!---->
-                                 
-                              </div>
-                               
-                              <ul
-                                class="nav nav-tabs"
-                              >
-                                <li
-                                  class="nav-item"
-                                >
-                                  <a
-                                    class="nav-link px-2 py-1 active"
-                                    href="#"
-                                  >
-                                    Library
-                                  </a>
-                                </li>
-                                 
-                                <li
-                                  class="nav-item"
-                                >
-                                  <a
-                                    class="nav-link px-2 py-1"
-                                    href="#"
-                                  >
-                                    Phone recording
-                                  </a>
-                                </li>
-                                 
-                                <li
-                                  class="nav-item"
+                                <div
+                                  class=""
                                 >
-                                  <a
-                                    class="nav-link px-2 py-1"
-                                    href="#"
-                                    style="overflow: hidden;"
+                                  <ul
+                                    class="nav nav-tabs"
+                                    role="tablist"
                                   >
-                                    
-                  Upload
-                
-                                    <input
-                                      accept="audio/*"
-                                      style="visibility: hidden; position: absolute; width: 1px; height: 1px;"
-                                      type="file"
-                                    />
-                                  </a>
-                                </li>
-                              </ul>
-                               
-                              <div
-                                class="audio-library-selector"
-                              >
+                                    <!---->
+                                    <!---->
+                                  </ul>
+                                </div>
                                 <div
-                                  class="audio-library-search-field dropdown"
+                                  class="tab-content"
                                 >
                                   <div
-                                    class="input-group"
+                                    aria-hidden="false"
+                                    class="tab-pane active"
+                                    role="tabpanel"
                                   >
-                                    <span
-                                      class="input-group-prepend"
+                                    <div
+                                      class="tab-content-style"
                                     >
-                                      <button
-                                        class="btn btn-outline-secondary dropdown-toggle"
+                                      <header
+                                        class="d-flex"
                                       >
-                                        <i
-                                          class="glyphicon glyphicon-search"
-                                        />
-                                      </button>
-                                    </span>
-                                     
-                                    <input
-                                      class="form-control"
-                                      placeholder="Search audio library…"
-                                      type="text"
-                                    />
+                                        <svg
+                                          class="icon"
+                                          style="margin-top: 2px;"
+                                        >
+                                          <use
+                                            xlink:href="#message"
+                                          />
+                                        </svg>
+                                         
+                                        <h6
+                                          class="ml-1"
+                                        >
+                                          SMS Content
+                                        </h6>
+                                      </header>
+                                       
+                                      <div
+                                        class="resource-variant-text-editor"
+                                      >
+                                        <div
+                                          class="content-editor"
+                                        >
+                                          <textarea
+                                            class="form-control"
+                                            placeholder="Enter Text content"
+                                          />
+                                        </div>
+                                         
+                                        <div
+                                          class="content-toolbar"
+                                        >
+                                          <!---->
+                                           
+                                          <!---->
+                                           
+                                          <!---->
+                                        </div>
+                                      </div>
+                                       
+                                      <!---->
+                                    </div>
+                                    <div
+                                      class="tab-content-style"
+                                    >
+                                      <header
+                                        class="d-flex"
+                                      >
+                                        <svg
+                                          class="icon"
+                                          style="margin-top: 2px;"
+                                        >
+                                          <use
+                                            xlink:href="#ussd"
+                                          />
+                                        </svg>
+                                         
+                                        <h6
+                                          class="ml-1"
+                                        >
+                                          USSD Content
+                                        </h6>
+                                      </header>
+                                       
+                                      <div
+                                        class="resource-variant-text-editor"
+                                      >
+                                        <div
+                                          class="content-editor"
+                                        >
+                                          <textarea
+                                            class="form-control"
+                                            placeholder="Enter Text content"
+                                          />
+                                        </div>
+                                         
+                                        <div
+                                          class="content-toolbar"
+                                        >
+                                          <!---->
+                                           
+                                          <!---->
+                                           
+                                          <!---->
+                                        </div>
+                                      </div>
+                                       
+                                      <!---->
+                                    </div>
+                                    <div
+                                      class="tab-content-style"
+                                    >
+                                      <header
+                                        class="d-flex"
+                                      >
+                                        <svg
+                                          class="icon"
+                                          style="margin-top: 2px;"
+                                        >
+                                          <use
+                                            xlink:href="#audio"
+                                          />
+                                        </svg>
+                                         
+                                        <h6
+                                          class="ml-1"
+                                        >
+                                          IVR Content
+                                        </h6>
+                                      </header>
+                                       
+                                      <!---->
+                                       
+                                      <div>
+                                        <div
+                                          class="audio-library-selector"
+                                        >
+                                          <div
+                                            class="audio-library-search-field dropdown"
+                                          >
+                                            <div
+                                              class="input-group"
+                                            >
+                                              <input
+                                                class="form-control"
+                                                placeholder="Search audio library…"
+                                                type="text"
+                                              />
+                                               
+                                              <span
+                                                class="input-group-prepend"
+                                              >
+                                                <button
+                                                  class="btn btn-primary dropdown-toggle"
+                                                >
+                                                  <i
+                                                    class="glyphicon glyphicon-search"
+                                                  />
+                                                </button>
+                                              </span>
+                                            </div>
+                                             
+                                            <!---->
+                                          </div>
+                                        </div>
+                                         
+                                        <div
+                                          class="phone-recorder"
+                                        >
+                                          <!---->
+                                        </div>
+                                         
+                                        <div
+                                          class="upload-monitor"
+                                        >
+                                          <!---->
+                                           
+                                          <!---->
+                                           
+                                        </div>
+                                         
+                                        <div
+                                          class="d-flex mt-2"
+                                        >
+                                          <button
+                                            class="btn btn-primary ivr-buttons"
+                                          >
+                                            <svg
+                                              class="icon"
+                                            >
+                                              <use
+                                                xlink:href="#record-audio"
+                                              />
+                                            </svg>
+                                            
+                    Record Audio
+                  
+                                          </button>
+                                           
+                                          <button
+                                            class="btn btn-primary ivr-buttons ml-2"
+                                            style="overflow: hidden;"
+                                          >
+                                            <svg
+                                              class="icon"
+                                            >
+                                              <use
+                                                xlink:href="#upload"
+                                              />
+                                            </svg>
+                                            
+                    Upload Audio
+                  
+                                            <input
+                                              accept="audio/*"
+                                              style="visibility: hidden; position: absolute; width: 1px; height: 1px;"
+                                              type="file"
+                                            />
+                                          </button>
+                                        </div>
+                                      </div>
+                                    </div>
                                   </div>
-                                   
                                   <!---->
                                 </div>
                               </div>
-                               
-                              <div
-                                class="phone-recorder"
-                              >
-                                <!---->
-                              </div>
                             </div>
                           </div>
                             
                           <div
                             class="starting-block-button"
                           >
+                            <hr />
+                             
                             <h4>
                               Options
                             </h4>
@@ -3479,11 +3784,18 @@ exports[`Storyshots MobilePrimitives/Open Response Block Non Starting Block 1`]
                               class="form-group"
                             >
                               <button
-                                class="btn btn-secondary btn-sm"
+                                class="btn btn-outline-primary btn-sm w-100"
                                 disabled="disabled"
                                 type="button"
                               >
-                                
+                                <svg
+                                  class="icon"
+                                >
+                                  <use
+                                    xlink:href="#enter"
+                                  />
+                                </svg>
+                                 
           Currently set as starting block
         
                               </button>

From 0abf8903e1e054ff7f3b0aea96c50b8c8e31a764 Mon Sep 17 00:00:00 2001
From: Pooja Patil <pooja.patil@viamo.io>
Date: Sat, 10 Jul 2021 13:24:19 -0700
Subject: [PATCH 12/22] VMO-4138  Separating title and block code components

---
 src/assets/icons/edit.svg                     |  3 +
 .../block-editors/BlockCodeEditor.vue         | 82 +++++++++++++++++++
 .../block-editors/TitleEditor.vue             | 58 +------------
 .../MobilePrimitives_MessageBlock.vue         |  3 +
 4 files changed, 90 insertions(+), 56 deletions(-)
 create mode 100644 src/assets/icons/edit.svg
 create mode 100644 src/components/interaction-designer/block-editors/BlockCodeEditor.vue

diff --git a/src/assets/icons/edit.svg b/src/assets/icons/edit.svg
new file mode 100644
index 000000000..0c5264139
--- /dev/null
+++ b/src/assets/icons/edit.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.9768 9.31607L11.8101 8.48272C11.9404 8.35251 12.1669 8.44366 12.1669 8.63116V12.4177C12.1669 13.1078 11.607 13.6677 10.9169 13.6677H1.75003C1.05991 13.6677 0.5 13.1078 0.5 12.4177V3.25084C0.5 2.56072 1.05991 2.00081 1.75003 2.00081H8.87258C9.05748 2.00081 9.15123 2.22477 9.02102 2.35759L8.18767 3.19094C8.1486 3.23 8.09652 3.25084 8.03923 3.25084H1.75003V12.4177H10.9169V9.46191C10.9169 9.40722 10.9377 9.35514 10.9768 9.31607ZM15.055 4.06075L8.21631 10.8994L5.86209 11.1599C5.17979 11.2354 4.59905 10.6599 4.67457 9.97234L4.93499 7.61812L11.7737 0.779429C12.37 0.183062 13.3336 0.183062 13.9274 0.779429L15.0524 1.90445C15.6488 2.50082 15.6488 3.46699 15.055 4.06075ZM12.482 4.86546L10.969 3.3524L6.13033 8.19365L5.94022 9.89421L7.64078 9.7041L12.482 4.86546ZM14.1696 2.78989L13.0445 1.66486C12.9378 1.55809 12.7633 1.55809 12.6591 1.66486L11.8544 2.46957L13.3675 3.98262L14.1722 3.17792C14.2763 3.06854 14.2763 2.89666 14.1696 2.78989Z" fill="white"/>
+</svg>
diff --git a/src/components/interaction-designer/block-editors/BlockCodeEditor.vue b/src/components/interaction-designer/block-editors/BlockCodeEditor.vue
new file mode 100644
index 000000000..0d5a644b8
--- /dev/null
+++ b/src/components/interaction-designer/block-editors/BlockCodeEditor.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="mt-3">
+    <validation-message
+      #input-control="{ isValid: isNameValid }"
+      :message-key="`block/${block.uuid}/name`">
+      <div v-if="editBlockName || isNameValid === false">
+        <label>{{ 'flow-builder.edit-block-code' | trans }}</label>
+        <div class="d-flex">
+          <input
+            v-model="blockName"
+            type="text"
+            class="form-control w-100"
+            :class="{ 'is-invalid': isNameValid === false }"
+            @keydown="filterName">
+          <span
+            class="btn btn-primary"
+            @click="editBlockName = false">
+            <svg-icon icon="check" />
+          </span>
+        </div>
+      </div>
+      <div v-else class="d-flex justify-content-between">
+        <div class="block-code align-self-center">
+          <strong>{{'flow-builder.code' | trans}}:</strong>
+          <span class=""> {{ blockName }} </span>
+        </div>
+        <span class="btn btn-primary btn-xs align-self-baseline ml-2" @click="editBlockName = true">
+          <svg-icon icon="edit" @click="editBlockName = true" />
+        </span>
+      </div>
+    </validation-message>
+  </div>
+</template>
+
+<script lang="ts">
+import {Component, Prop} from 'vue-property-decorator'
+import TextEditor from '@/components/common/TextEditor.vue'
+import ValidationMessage from '@/components/common/ValidationMessage.vue'
+import {mixins} from 'vue-class-component'
+import Lang from '@/lib/filters/lang'
+import {IBlock} from '@floip/flow-runner'
+import {namespace} from 'vuex-class'
+import SvgIcon from '@/components/common/SvgIcon.vue'
+
+const flowVuexNamespace = namespace('flow')
+
+@Component({
+  components: {
+    TextEditor,
+    ValidationMessage,
+    SvgIcon,
+  },
+})
+class BlockCodeEditor extends mixins(Lang) {
+  editBlockName = false
+
+  @Prop() readonly block!: IBlock
+
+  get blockName(): string {
+    return this.block.name
+  }
+
+  set blockName(value: string) {
+    this.block_setName({blockId: this.block.uuid, value})
+  }
+
+  filterName(e: KeyboardEvent): void {
+    if (e.key.match(/\W+|Enter/g)) {
+      e.preventDefault()
+    }
+  }
+
+  @flowVuexNamespace.Mutation block_setName!: ({blockId, value}: {blockId: string, value: string}) => void
+}
+export default BlockCodeEditor
+</script>
+
+<style scoped>
+.block-code {
+  word-break: break-all;
+}
+</style>
diff --git a/src/components/interaction-designer/block-editors/TitleEditor.vue b/src/components/interaction-designer/block-editors/TitleEditor.vue
index e9ca7ff12..4b886a444 100644
--- a/src/components/interaction-designer/block-editors/TitleEditor.vue
+++ b/src/components/interaction-designer/block-editors/TitleEditor.vue
@@ -1,6 +1,6 @@
 <template>
   <section class="mb-3">
-    <label class="title">{{'flow-builder.title' | trans}}</label>
+    <label class="text-primary">{{'flow-builder.title' | trans}}</label>
     <validation-message
       #input-control="{ isValid: isLabelValid }"
       :message-key="`block/${block.uuid}/label`">
@@ -10,39 +10,11 @@
           type="text"
           class="form-control w-100"
           :class="{ 'is-invalid': isLabelValid === false }">
-        <span
-          class="btn btn-outline-primary"
-          @click="editBlockName = true">
+        <span class="btn btn-outline-primary btn-xs align-self-center ml-2">
           <svg-icon icon="settings" />
         </span>
       </div>
     </validation-message>
-    <div class="mt-3">
-      <validation-message
-        #input-control="{ isValid: isNameValid }"
-        :message-key="`block/${block.uuid}/name`">
-        <div v-if="editBlockName || isNameValid === false">
-          <label>{{ 'flow-builder.edit-block-code' | trans }}</label>
-          <div class="d-flex">
-            <input
-              v-model="blockName"
-              type="text"
-              class="form-control w-100"
-              :class="{ 'is-invalid': isNameValid === false }"
-              @keydown="filterName">
-            <span
-              class="btn btn-primary"
-              @click="editBlockName = false">
-              <svg-icon icon="check" />
-            </span>
-          </div>
-        </div>
-        <div v-else>
-          <strong>{{'flow-builder.code' | trans}}:</strong>
-          <span class="block-code"> {{ blockName }} </span>
-        </div>
-      </validation-message>
-    </div>
   </section>
 </template>
 
@@ -66,8 +38,6 @@ const flowVuexNamespace = namespace('flow')
   },
 })
 class TitleEditor extends mixins(Lang) {
-  editBlockName = false
-
   @Prop() readonly block!: IBlock
 
   get blockLabel(): string {
@@ -78,31 +48,7 @@ class TitleEditor extends mixins(Lang) {
     this.block_setLabel({blockId: this.block.uuid, value})
   }
 
-  get blockName(): string {
-    return this.block.name
-  }
-
-  set blockName(value: string) {
-    this.block_setName({blockId: this.block.uuid, value})
-  }
-
-  filterName(e: KeyboardEvent): void {
-    if (e.key.match(/\W+|Enter/g)) {
-      e.preventDefault()
-    }
-  }
-
   @flowVuexNamespace.Action block_setLabel!: ({blockId, value}: {blockId: string, value: string}) => void
-  @flowVuexNamespace.Mutation block_setName!: ({blockId, value}: {blockId: string, value: string}) => void
 }
 export default TitleEditor
 </script>
-
-<style scoped>
-.title {
-  color: #531944;
-}
-.block-code {
-  word-wrap: break-word;
-}
-</style>
diff --git a/src/components/interaction-designer/block-types/MobilePrimitives_MessageBlock.vue b/src/components/interaction-designer/block-types/MobilePrimitives_MessageBlock.vue
index 9b0306836..e22e56b7a 100644
--- a/src/components/interaction-designer/block-types/MobilePrimitives_MessageBlock.vue
+++ b/src/components/interaction-designer/block-types/MobilePrimitives_MessageBlock.vue
@@ -6,6 +6,7 @@
 
     <fieldset :disabled="!isEditable">
       <title-editor :block="block" />
+      <block-code-editor :block="block" />
       <resource-editor
         v-if="promptResource"
         :resource="promptResource"
@@ -35,6 +36,7 @@ import {mixins} from 'vue-class-component'
 import ResourceEditor from '../resource-editors/ResourceEditor.vue'
 import BlockNameEditor from '../block-editors/NameEditor.vue'
 import TitleEditor from '../block-editors/TitleEditor.vue'
+import BlockCodeEditor from '../block-editors/BlockCodeEditor.vue'
 import BlockLabelEditor from '../block-editors/LabelEditor.vue'
 import BlockSemanticLabelEditor from '../block-editors/SemanticLabelEditor.vue'
 import FirstBlockEditorButton from '../flow-editors/FirstBlockEditorButton.vue'
@@ -52,6 +54,7 @@ const builderVuexNamespace = namespace('builder')
     FirstBlockEditorButton,
     BlockId,
     TitleEditor,
+    BlockCodeEditor,
   },
 })
 class MobilePrimitives_MessageBlock extends mixins(Lang) {

From 5d8f9c01db7f9bf1588a3bac4dd55676260aad0a Mon Sep 17 00:00:00 2001
From: Pooja Patil <pooja.patil@viamo.io>
Date: Sun, 11 Jul 2021 11:36:01 -0700
Subject: [PATCH 13/22] VMO-4138  Adding semantic label

---
 src/assets/messages.json                      |  4 ++
 src/components/common/SmallTextEditor.vue     | 44 +++++++++++++++++++
 .../block-editors/BlockCodeEditor.vue         | 20 ++++-----
 .../block-editors/SemanticLabelEditor.vue     |  5 ++-
 .../block-editors/TitleEditor.vue             | 22 ++++++----
 .../MobilePrimitives_MessageBlock.vue         |  6 ++-
 6 files changed, 79 insertions(+), 22 deletions(-)
 create mode 100644 src/components/common/SmallTextEditor.vue

diff --git a/src/assets/messages.json b/src/assets/messages.json
index 77b10834d..33cabe453 100644
--- a/src/assets/messages.json
+++ b/src/assets/messages.json
@@ -552,6 +552,8 @@
     "enter-clipboard-content": "Enter clipboard content...",
     "enter-confirmation-audio": "If using voice content, replace this with the filename of an audio file that you have uploaded to your audio library. This audio will be played back to the respondant after they have selected the choice. (You may leave this blank if the tree does not have voice content or if you wish to not play anything back to the contact)",
     "enter-date": "Enter date",
+    "enter-title": "Enter title",
+    "enter-block-code": "Enter block code",
     "enter-duration": "Enter duration",
     "enter-each-on-new-line": "Enter each on a new line",
     "enter-exit-label": "Enter Exit Label",
@@ -2143,6 +2145,8 @@
     "enter-clipboard-content": "Entrez le contenu Clipboard...",
     "enter-confirmation-audio": "Si vous utilisez le contenu vocal, le remplacer par le nom d'un fichier audio que vous avez téléchargé à votre bibliothèque audio. Ce audio sera lu au respondant après avoir sélectionné le choix. (Vous pouvez laisser ce champ vide si l'arbre n'a pas le contenu de la voix ou si vous souhaitez ne pas jouer quoi que ce soit de retour au contact)",
     "enter-date": "entrer la date",
+    "enter-title": "Entrer dans le titre",
+    "enter-block-code": "Entrer le code de bloc",
     "enter-duration": "Entrez la durée",
     "enter-each-on-new-line": "Entrez chaque sur une nouvelle ligne",
     "enter-exit-label": "Entrez sortie Étiquette",
diff --git a/src/components/common/SmallTextEditor.vue b/src/components/common/SmallTextEditor.vue
new file mode 100644
index 000000000..f36ce9bf9
--- /dev/null
+++ b/src/components/common/SmallTextEditor.vue
@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <label v-if="label">{{ label }}</label>
+    <input
+      type="text"
+      class="form-control w-100"
+      :class="{ 'is-invalid': isInvalid }"
+      :placeholder="placeholder"
+      :value="value"
+      @keydown="$emit('keydown', $event)"
+      @input="$emit('input', $event.target.value)" />
+    <slot />
+  </div>
+</template>
+
+<script lang="js">
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types,@typescript-eslint/strict-boolean-expressions */
+export default {
+  props: {
+    label: {
+      type: [String, Number],
+      required: false,
+    },
+    placeholder: {
+      type: String,
+      required: true,
+    },
+    value: {
+      type: String,
+      required: true,
+    },
+    validState: {
+      type: Boolean,
+      default: null,
+      required: false,
+    },
+  },
+  computed: {
+    isInvalid() {
+      return this.validState === false
+    },
+  },
+}
+</script>
diff --git a/src/components/interaction-designer/block-editors/BlockCodeEditor.vue b/src/components/interaction-designer/block-editors/BlockCodeEditor.vue
index 0d5a644b8..b0a23a981 100644
--- a/src/components/interaction-designer/block-editors/BlockCodeEditor.vue
+++ b/src/components/interaction-designer/block-editors/BlockCodeEditor.vue
@@ -1,19 +1,19 @@
 <template>
   <div class="mt-3">
     <validation-message
-      #input-control="{ isValid: isNameValid }"
+      #input-control="{ isValid }"
       :message-key="`block/${block.uuid}/name`">
-      <div v-if="editBlockName || isNameValid === false">
+      <div v-if="editBlockName || isValid === false">
         <label>{{ 'flow-builder.edit-block-code' | trans }}</label>
         <div class="d-flex">
-          <input
+          <small-text-editor
             v-model="blockName"
-            type="text"
-            class="form-control w-100"
-            :class="{ 'is-invalid': isNameValid === false }"
-            @keydown="filterName">
+            class="w-100"
+            :placeholder="'flow-builder.enter-block-code' | trans"
+            :valid-state="isValid"
+            @keydown="filterName" />
           <span
-            class="btn btn-primary"
+            class="btn btn-primary btn-xs align-self-center ml-2"
             @click="editBlockName = false">
             <svg-icon icon="check" />
           </span>
@@ -34,19 +34,19 @@
 
 <script lang="ts">
 import {Component, Prop} from 'vue-property-decorator'
-import TextEditor from '@/components/common/TextEditor.vue'
 import ValidationMessage from '@/components/common/ValidationMessage.vue'
 import {mixins} from 'vue-class-component'
 import Lang from '@/lib/filters/lang'
 import {IBlock} from '@floip/flow-runner'
 import {namespace} from 'vuex-class'
 import SvgIcon from '@/components/common/SvgIcon.vue'
+import SmallTextEditor from '@/components/common/SmallTextEditor.vue'
 
 const flowVuexNamespace = namespace('flow')
 
 @Component({
   components: {
-    TextEditor,
+    SmallTextEditor,
     ValidationMessage,
     SvgIcon,
   },
diff --git a/src/components/interaction-designer/block-editors/SemanticLabelEditor.vue b/src/components/interaction-designer/block-editors/SemanticLabelEditor.vue
index 1380d7e37..f39ebf77c 100644
--- a/src/components/interaction-designer/block-editors/SemanticLabelEditor.vue
+++ b/src/components/interaction-designer/block-editors/SemanticLabelEditor.vue
@@ -3,7 +3,7 @@
     #input-control="{ isValid }"
     :message-key="`block/${block.uuid}/semantic_label`">
     <div class="block-semantic-label">
-      <text-editor
+      <small-text-editor
         v-model="semanticLabel"
         :label="'flow-builder.block-semantic-label' | trans"
         :placeholder="'flow-builder.enter-block-semantic-label' | trans"
@@ -18,10 +18,11 @@ import {mapMutations} from 'vuex'
 import TextEditor from '@/components/common/TextEditor'
 import {lang} from '@/lib/filters/lang'
 import ValidationMessage from '@/components/common/ValidationMessage'
+import SmallTextEditor from '@/components/common/SmallTextEditor'
 
 export default {
   components: {
-    TextEditor,
+    SmallTextEditor,
     ValidationMessage,
   },
   mixins: [lang],
diff --git a/src/components/interaction-designer/block-editors/TitleEditor.vue b/src/components/interaction-designer/block-editors/TitleEditor.vue
index 4b886a444..3172fd322 100644
--- a/src/components/interaction-designer/block-editors/TitleEditor.vue
+++ b/src/components/interaction-designer/block-editors/TitleEditor.vue
@@ -1,16 +1,16 @@
 <template>
   <section class="mb-3">
-    <label class="text-primary">{{'flow-builder.title' | trans}}</label>
+    <label class="text-primary">{{ 'flow-builder.title' | trans }}</label>
     <validation-message
-      #input-control="{ isValid: isLabelValid }"
+      #input-control="{ isValid }"
       :message-key="`block/${block.uuid}/label`">
       <div class="d-flex">
-        <input
+        <small-text-editor
+          class="w-100"
           v-model="blockLabel"
-          type="text"
-          class="form-control w-100"
-          :class="{ 'is-invalid': isLabelValid === false }">
-        <span class="btn btn-outline-primary btn-xs align-self-center ml-2">
+          :placeholder="'flow-builder.enter-title' | trans"
+          :valid-state="isValid"/>
+        <span class="btn btn-outline-primary btn-xs align-self-center ml-2" @click="emitGearClickedEvent">
           <svg-icon icon="settings" />
         </span>
       </div>
@@ -20,7 +20,7 @@
 
 <script lang="ts">
 import {Component, Prop} from 'vue-property-decorator'
-import TextEditor from '@/components/common/TextEditor.vue'
+import SmallTextEditor from '@/components/common/SmallTextEditor.vue'
 import ValidationMessage from '@/components/common/ValidationMessage.vue'
 import {mixins} from 'vue-class-component'
 import Lang from '@/lib/filters/lang'
@@ -32,7 +32,7 @@ const flowVuexNamespace = namespace('flow')
 
 @Component({
   components: {
-    TextEditor,
+    SmallTextEditor,
     ValidationMessage,
     SvgIcon,
   },
@@ -48,6 +48,10 @@ class TitleEditor extends mixins(Lang) {
     this.block_setLabel({blockId: this.block.uuid, value})
   }
 
+  emitGearClickedEvent() {
+    this.$emit('gearClicked')
+  }
+
   @flowVuexNamespace.Action block_setLabel!: ({blockId, value}: {blockId: string, value: string}) => void
 }
 export default TitleEditor
diff --git a/src/components/interaction-designer/block-types/MobilePrimitives_MessageBlock.vue b/src/components/interaction-designer/block-types/MobilePrimitives_MessageBlock.vue
index e22e56b7a..ea70c407e 100644
--- a/src/components/interaction-designer/block-types/MobilePrimitives_MessageBlock.vue
+++ b/src/components/interaction-designer/block-types/MobilePrimitives_MessageBlock.vue
@@ -5,8 +5,10 @@
     </h3>
 
     <fieldset :disabled="!isEditable">
-      <title-editor :block="block" />
+      <title-editor :block="block" @gearClicked="showSemanticLabel = !showSemanticLabel" />
+      <block-semantic-label-editor v-if="showSemanticLabel" :block="block" />
       <block-code-editor :block="block" />
+
       <resource-editor
         v-if="promptResource"
         :resource="promptResource"
@@ -62,6 +64,8 @@ class MobilePrimitives_MessageBlock extends mixins(Lang) {
 
   @Prop() readonly flow!: IFlow
 
+  showSemanticLabel = false
+
   get promptResource(): IResource {
     return this.resourcesByUuid[this.block.config.prompt]
   }

From e16defa41bfa8f366b28ae08d36af55b774c8d5b Mon Sep 17 00:00:00 2001
From: Pooja Patil <pooja.patil@viamo.io>
Date: Sun, 11 Jul 2021 13:23:31 -0700
Subject: [PATCH 14/22] VMO-4138 Fixed review comments

---
 .../common/AudioLibrarySearchField.vue        |  2 +-
 .../block-editors/SemanticLabelEditor.vue     |  2 +-
 .../resource-editors/ResourceEditor.vue       | 32 +++++-----
 src/scss/custom_variables.scss                |  2 +-
 src/store/flow/block.ts                       |  8 +--
 .../unit/__snapshots__/storybook.spec.ts.snap | 64 ++++++++++---------
 6 files changed, 53 insertions(+), 57 deletions(-)

diff --git a/src/components/common/AudioLibrarySearchField.vue b/src/components/common/AudioLibrarySearchField.vue
index 2248a6eff..e391e0d50 100644
--- a/src/components/common/AudioLibrarySearchField.vue
+++ b/src/components/common/AudioLibrarySearchField.vue
@@ -11,7 +11,7 @@
         @blur="deactivate"
         @input="resetPagination">
 
-      <span class="input-group-prepend">
+      <span class="input-group-append">
         <button
           :class="{active: isEntireLibraryModeEnabled}"
           class="btn btn-primary dropdown-toggle"
diff --git a/src/components/interaction-designer/block-editors/SemanticLabelEditor.vue b/src/components/interaction-designer/block-editors/SemanticLabelEditor.vue
index f39ebf77c..8c182ed03 100644
--- a/src/components/interaction-designer/block-editors/SemanticLabelEditor.vue
+++ b/src/components/interaction-designer/block-editors/SemanticLabelEditor.vue
@@ -5,7 +5,7 @@
     <div class="block-semantic-label">
       <small-text-editor
         v-model="semanticLabel"
-        :label="'flow-builder.block-semantic-label' | trans"
+        :label="'flow-builder.block-exit-semantic-label' | trans"
         :placeholder="'flow-builder.enter-block-semantic-label' | trans"
         :valid-state="isValid" />
     </div>
diff --git a/src/components/interaction-designer/resource-editors/ResourceEditor.vue b/src/components/interaction-designer/resource-editors/ResourceEditor.vue
index dc4f292cf..579b21b80 100644
--- a/src/components/interaction-designer/resource-editors/ResourceEditor.vue
+++ b/src/components/interaction-designer/resource-editors/ResourceEditor.vue
@@ -52,25 +52,25 @@
                   <upload-monitor :upload-key="`${block.uuid}:${languageId}`" />
 
                   <div class="d-flex mt-2">
-                    <button
-                      v-if="can(['edit-content', 'send-call-to-records'], true) && isFeatureAudioUploadEnabled"
-                      class="btn btn-primary ivr-buttons"
-                      @click.prevent="triggerRecordViaPhoneFor(languageId)">
-                      <svg-icon icon="record-audio" />
-                      {{ 'flow-builder.record-audio' | trans }}
-                    </button>
                     <button
                       v-if="isEditable && isFeatureAudioUploadEnabled"
                       v-flow-uploader="{
                         target: route('trees.resumeableAudioUpload'),
                         token: `${block.uuid}${languageId}`,
                         accept: 'audio/*'}"
-                      class="btn btn-primary ivr-buttons ml-2"
+                      class="btn btn-primary ivr-buttons"
                       @filesSubmitted="handleFilesSubmittedFor(`${block.uuid}:${languageId}`, $event)"
                       @fileSuccess="handleFileSuccessFor(`${block.uuid}:${languageId}`, languageId, $event)">
                       <svg-icon icon="upload" />
                       {{ 'flow-builder.upload-audio' | trans }}
                     </button>
+                    <button
+                      v-if="can(['edit-content', 'send-call-to-records'], true) && isFeatureAudioUploadEnabled"
+                      class="btn btn-primary ivr-buttons ml-2"
+                      @click.prevent="triggerRecordViaPhoneFor(languageId)">
+                      <svg-icon icon="record-audio" />
+                      {{ 'flow-builder.record-audio' | trans }}
+                    </button>
                   </div>
                 </template>
               </div>
@@ -161,15 +161,13 @@ export class ResourceEditor extends mixins(FlowUploader, Permissions, Routes, La
 
   SupportedContentType = SupportedContentType
 
-  iconsMap = new Map<string, string>()
-
-  created() {
-    this.iconsMap.set(SupportedMode.SMS, 'message')
-    this.iconsMap.set(SupportedMode.USSD, 'ussd')
-    this.iconsMap.set(SupportedMode.IVR, 'audio')
-    this.iconsMap.set(SupportedMode.RICH_MESSAGING, 'rich-messaging')
-    this.iconsMap.set(SupportedMode.OFFLINE, 'phone')
-  }
+  iconsMap = new Map<string, string>([
+    [SupportedMode.SMS, 'message'],
+    [SupportedMode.USSD, 'ussd'],
+    [SupportedMode.IVR, 'audio'],
+    [SupportedMode.RICH_MESSAGING, 'rich-messaging'],
+    [SupportedMode.OFFLINE, 'phone'],
+  ])
 
   triggerRecordViaPhoneFor(langId: ILanguage['id']): void {
     this.$store.commit('setAudioRecordingConfigVisibilityForSelectedBlock', {langId, isVisible: true})
diff --git a/src/scss/custom_variables.scss b/src/scss/custom_variables.scss
index 5e7d84c30..eec899647 100644
--- a/src/scss/custom_variables.scss
+++ b/src/scss/custom_variables.scss
@@ -1,4 +1,4 @@
 // Override / set color variables
-$viamo-official: #531944;
+$viamo-official: #8C215C;
 
 $primary: $viamo-official;
diff --git a/src/store/flow/block.ts b/src/store/flow/block.ts
index 11b24bd32..602b5bd53 100644
--- a/src/store/flow/block.ts
+++ b/src/store/flow/block.ts
@@ -1,7 +1,7 @@
 import {findBlockExitWith, findBlockOnActiveFlowWith, IBlock, IBlockExit, IContext, IResource} from '@floip/flow-runner'
 import {ActionTree, GetterTree, MutationTree} from 'vuex'
 import {IRootState} from '@/store'
-import {defaults, set} from 'lodash'
+import {defaults, set, snakeCase} from 'lodash'
 import {IdGeneratorUuidV4} from '@floip/flow-runner/dist/domain/IdGeneratorUuidV4'
 import {IFlowsState} from '.'
 import {popFirstEmptyItem} from './utils/listBuilder'
@@ -74,12 +74,6 @@ export const mutations: MutationTree<IFlowsState> = {
 
 export const actions: ActionTree<IFlowsState, IRootState> = {
   block_setLabel({commit}, {blockId, value}) {
-    const snakeCase = (value: string) => value?.trim()
-      .replace(/[^\w\s]+/g, '')
-      .split(' ')
-      .map((word) => word.toLowerCase())
-      .join('_')
-
     commit('block_setLabel', {blockId, value})
     commit('block_setName', {blockId, value: snakeCase(value)})
   },
diff --git a/tests/unit/__snapshots__/storybook.spec.ts.snap b/tests/unit/__snapshots__/storybook.spec.ts.snap
index 1049d9b59..4738a4e3e 100644
--- a/tests/unit/__snapshots__/storybook.spec.ts.snap
+++ b/tests/unit/__snapshots__/storybook.spec.ts.snap
@@ -1860,9 +1860,10 @@ exports[`Storyshots MobilePrimitives/Numeric Response Block Existing Data For Te
                                   Block semantic label
                                 </label>
                                  
-                                <textarea
-                                  class="form-control"
+                                <input
+                                  class="form-control w-100"
                                   placeholder="Enter a block semantic label"
+                                  type="text"
                                 />
                                  
                               </div>
@@ -2140,7 +2141,7 @@ exports[`Storyshots MobilePrimitives/Numeric Response Block Existing Data For Te
                                               />
                                                
                                               <span
-                                                class="input-group-prepend"
+                                                class="input-group-append"
                                               >
                                                 <button
                                                   class="btn btn-primary dropdown-toggle"
@@ -2176,38 +2177,38 @@ exports[`Storyshots MobilePrimitives/Numeric Response Block Existing Data For Te
                                         >
                                           <button
                                             class="btn btn-primary ivr-buttons"
+                                            style="overflow: hidden;"
                                           >
                                             <svg
                                               class="icon"
                                             >
                                               <use
-                                                xlink:href="#record-audio"
+                                                xlink:href="#upload"
                                               />
                                             </svg>
                                             
-                    Record Audio
+                    Upload Audio
                   
+                                            <input
+                                              accept="audio/*"
+                                              style="visibility: hidden; position: absolute; width: 1px; height: 1px;"
+                                              type="file"
+                                            />
                                           </button>
                                            
                                           <button
                                             class="btn btn-primary ivr-buttons ml-2"
-                                            style="overflow: hidden;"
                                           >
                                             <svg
                                               class="icon"
                                             >
                                               <use
-                                                xlink:href="#upload"
+                                                xlink:href="#record-audio"
                                               />
                                             </svg>
                                             
-                    Upload Audio
+                    Record Audio
                   
-                                            <input
-                                              accept="audio/*"
-                                              style="visibility: hidden; position: absolute; width: 1px; height: 1px;"
-                                              type="file"
-                                            />
                                           </button>
                                         </div>
                                       </div>
@@ -2399,9 +2400,10 @@ exports[`Storyshots MobilePrimitives/Numeric Response Block Non Starting Block 1
                                   Block semantic label
                                 </label>
                                  
-                                <textarea
-                                  class="form-control"
+                                <input
+                                  class="form-control w-100"
                                   placeholder="Enter a block semantic label"
+                                  type="text"
                                 />
                                  
                               </div>
@@ -2938,9 +2940,10 @@ exports[`Storyshots MobilePrimitives/Open Response Block Existing Data For Text
                                   Block semantic label
                                 </label>
                                  
-                                <textarea
-                                  class="form-control"
+                                <input
+                                  class="form-control w-100"
                                   placeholder="Enter a block semantic label"
+                                  type="text"
                                 />
                                  
                               </div>
@@ -3193,7 +3196,7 @@ exports[`Storyshots MobilePrimitives/Open Response Block Existing Data For Text
                                               />
                                                
                                               <span
-                                                class="input-group-prepend"
+                                                class="input-group-append"
                                               >
                                                 <button
                                                   class="btn btn-primary dropdown-toggle"
@@ -3229,38 +3232,38 @@ exports[`Storyshots MobilePrimitives/Open Response Block Existing Data For Text
                                         >
                                           <button
                                             class="btn btn-primary ivr-buttons"
+                                            style="overflow: hidden;"
                                           >
                                             <svg
                                               class="icon"
                                             >
                                               <use
-                                                xlink:href="#record-audio"
+                                                xlink:href="#upload"
                                               />
                                             </svg>
                                             
-                    Record Audio
+                    Upload Audio
                   
+                                            <input
+                                              accept="audio/*"
+                                              style="visibility: hidden; position: absolute; width: 1px; height: 1px;"
+                                              type="file"
+                                            />
                                           </button>
                                            
                                           <button
                                             class="btn btn-primary ivr-buttons ml-2"
-                                            style="overflow: hidden;"
                                           >
                                             <svg
                                               class="icon"
                                             >
                                               <use
-                                                xlink:href="#upload"
+                                                xlink:href="#record-audio"
                                               />
                                             </svg>
                                             
-                    Upload Audio
+                    Record Audio
                   
-                                            <input
-                                              accept="audio/*"
-                                              style="visibility: hidden; position: absolute; width: 1px; height: 1px;"
-                                              type="file"
-                                            />
                                           </button>
                                         </div>
                                       </div>
@@ -3452,9 +3455,10 @@ exports[`Storyshots MobilePrimitives/Open Response Block Non Starting Block 1`]
                                   Block semantic label
                                 </label>
                                  
-                                <textarea
-                                  class="form-control"
+                                <input
+                                  class="form-control w-100"
                                   placeholder="Enter a block semantic label"
+                                  type="text"
                                 />
                                  
                               </div>

From 17541a615c39b183220bff4a05b480711c20931f Mon Sep 17 00:00:00 2001
From: Pooja Patil <pooja.patil@viamo.io>
Date: Sun, 11 Jul 2021 19:48:04 -0700
Subject: [PATCH 15/22] VMO-4138 A few UX improvements

---
 src/assets/icons/ussd.svg                                  | 7 ++++---
 .../flow-editors/FirstBlockEditorButton.vue                | 3 ++-
 .../resource-editors/ResourceEditor.vue                    | 6 +++++-
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/assets/icons/ussd.svg b/src/assets/icons/ussd.svg
index 96ccc2a9b..611773056 100644
--- a/src/assets/icons/ussd.svg
+++ b/src/assets/icons/ussd.svg
@@ -1,4 +1,5 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M19.5 2H4.5C3.12109 2 2 3.12109 2 4.5V15.75C2 17.1289 3.12109 18.25 4.5 18.25H8.25V21.5312C8.25 21.8086 8.47656 22 8.71875 22C8.8125 22 8.91016 21.9727 8.99609 21.9062L13.875 18.25H19.5C20.8789 18.25 22 17.1289 22 15.75V4.5C22 3.12109 20.8789 2 19.5 2ZM20.125 15.75C20.125 16.0938 19.8438 16.375 19.5 16.375H13.25L10.125 18.7188V16.375H4.5C4.15625 16.375 3.875 16.0938 3.875 15.75V4.5C3.875 4.15625 4.15625 3.875 4.5 3.875H19.5C19.8438 3.875 20.125 4.15625 20.125 4.5V15.75Z" fill="black"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10.3453 5.50809C10.617 5.55756 10.7971 5.81791 10.7477 6.08958L10.5051 7.42164L13.5231 7.42164L13.7983 5.91042C13.8478 5.63875 14.1082 5.45862 14.3798 5.50809C14.6515 5.55756 14.8316 5.81791 14.7822 6.08958L14.5396 7.42164L15.5 7.42164C15.7761 7.42164 16 7.64549 16 7.92164C16 8.19778 15.7761 8.42164 15.5 8.42164L14.3575 8.42164L13.9705 10.5466H15.5C15.7761 10.5466 16 10.7705 16 11.0466C16 11.3228 15.7761 11.5466 15.5 11.5466H13.7884L13.4526 13.3905C13.4032 13.6621 13.1428 13.8423 12.8711 13.7928C12.5995 13.7433 12.4193 13.483 12.4688 13.2113L12.772 11.5466L9.7539 11.5466L9.41812 13.3905C9.36864 13.6621 9.1083 13.8423 8.83663 13.7928C8.56495 13.7433 8.38482 13.483 8.4343 13.2113L8.73745 11.5466H8C7.72386 11.5466 7.5 11.3228 7.5 11.0466C7.5 10.7705 7.72386 10.5466 8 10.5466H8.91956L9.30653 8.42164L8 8.42164C7.72386 8.42164 7.5 8.19778 7.5 7.92164C7.5 7.6455 7.72386 7.42164 8 7.42164L9.48864 7.42164L9.76384 5.91042C9.81332 5.63875 10.0737 5.45862 10.3453 5.50809ZM10.323 8.42164L9.936 10.5466H12.9541L13.341 8.42164H10.323Z" fill="black"/>
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.1667 4H7.16667C5.42005 4 4 5.42005 4 7.16667V21.4167C4 23.1633 5.42005 24.5833 7.16667 24.5833H11.9167V28.7396C11.9167 29.0909 12.2036 29.3333 12.5104 29.3333C12.6292 29.3333 12.7529 29.2987 12.8617 29.2146L19.0417 24.5833H26.1667C27.9133 24.5833 29.3333 23.1633 29.3333 21.4167V7.16667C29.3333 5.42005 27.9133 4 26.1667 4ZM26.9583 21.4167C26.9583 21.8521 26.6021 22.2083 26.1667 22.2083H18.25L14.2917 25.1771V22.2083H7.16667C6.73125 22.2083 6.375 21.8521 6.375 21.4167V7.16667C6.375 6.73125 6.73125 6.375 7.16667 6.375H26.1667C26.6021 6.375 26.9583 6.73125 26.9583 7.16667V21.4167Z" fill="black"/>
+<path d="M15.1409 13.3314H13.6422L14.7019 12.2716C14.9445 12.0291 14.9445 11.6359 14.7019 11.3933C14.4594 11.1508 14.0662 11.1508 13.8237 11.3933L12.7639 12.4531V10.9543C12.7639 10.6114 12.4859 10.3333 12.1429 10.3333C11.8 10.3333 11.5219 10.6114 11.5219 10.9543V12.4531L10.4621 11.3933C10.2196 11.1508 9.8264 11.1508 9.58388 11.3933C9.34136 11.6359 9.34136 12.0291 9.58388 12.2716L10.6437 13.3314H9.14488C8.80192 13.3314 8.52387 13.6094 8.52387 13.9524C8.52387 14.2953 8.80192 14.5734 9.14488 14.5734H10.6437L9.58388 15.6332C9.34136 15.8757 9.34136 16.2689 9.58388 16.5114C9.8264 16.7539 10.2196 16.7539 10.4621 16.5114L11.5219 15.4516V16.9504C11.5219 17.2934 11.8 17.5714 12.1429 17.5714C12.4859 17.5714 12.7639 17.2934 12.7639 16.9504V15.4516L13.8237 16.5114C14.0662 16.7539 14.4594 16.7539 14.7019 16.5114C14.9445 16.2689 14.9445 15.8757 14.7019 15.6332L13.6422 14.5734H15.1409C15.4839 14.5734 15.762 14.2953 15.762 13.9524C15.762 13.6094 15.4839 13.3314 15.1409 13.3314Z" fill="black"/>
+<path d="M23.5058 12.8747H24.1796C24.4514 12.8747 24.6819 12.6749 24.7204 12.4057C24.7674 12.0766 24.5118 11.7821 24.1793 11.7823L23.671 11.7826L23.7326 11.3521C23.782 11.0068 23.5142 10.6979 23.1654 10.6979C22.8803 10.6979 22.6386 10.9075 22.5982 11.1898L22.5132 11.7836L20.487 11.7855L20.5524 11.3564C20.6051 11.01 20.337 10.6979 19.9867 10.6979C19.7039 10.6979 19.4635 10.9045 19.4209 11.184L19.3291 11.7865L18.7136 11.7868C18.4458 11.787 18.218 11.982 18.1765 12.2466C18.1248 12.5765 18.3799 12.8748 18.7139 12.8748H19.1644L18.8743 15.0292L18.2014 15.0296C17.9294 15.0297 17.6989 15.2298 17.6605 15.499C17.6134 15.8284 17.869 16.123 18.2017 16.123H18.7096L18.6477 16.5521C18.5978 16.8975 18.8657 17.2068 19.2147 17.2068C19.4995 17.2068 19.7411 16.9977 19.7818 16.7158L19.8673 16.123H21.8933L21.833 16.5542C21.7848 16.899 22.0526 17.2068 22.4008 17.2068C22.6867 17.2068 22.9289 16.9961 22.9685 16.7129L23.051 16.123H23.6619C23.9326 16.123 24.1629 15.9257 24.2044 15.6582C24.256 15.3253 23.9985 15.0248 23.6616 15.025L23.2162 15.0252L23.5058 12.8747ZM22.0584 15.0263L20.0322 15.0281L20.3221 12.8747H22.3481L22.0584 15.0263Z" fill="black"/>
 </svg>
diff --git a/src/components/interaction-designer/flow-editors/FirstBlockEditorButton.vue b/src/components/interaction-designer/flow-editors/FirstBlockEditorButton.vue
index 0e5f55828..0803edb06 100644
--- a/src/components/interaction-designer/flow-editors/FirstBlockEditorButton.vue
+++ b/src/components/interaction-designer/flow-editors/FirstBlockEditorButton.vue
@@ -6,7 +6,8 @@
       <div class="form-group">
         <button
           type="button"
-          class="btn btn-outline-primary btn-sm w-100"
+          class="btn btn-sm w-100"
+          :class="{'btn-outline-primary': !isStartBlock, 'btn-primary': isStartBlock}"
           :disabled="isStartBlock"
           @click="setStartBlock($event)">
           <svg-icon icon="enter" />
diff --git a/src/components/interaction-designer/resource-editors/ResourceEditor.vue b/src/components/interaction-designer/resource-editors/ResourceEditor.vue
index 579b21b80..581245cdb 100644
--- a/src/components/interaction-designer/resource-editors/ResourceEditor.vue
+++ b/src/components/interaction-designer/resource-editors/ResourceEditor.vue
@@ -18,7 +18,7 @@
             :key="i"
             class="tab-content-style">
             <header class="d-flex">
-              <svg-icon :style="{marginTop: '2px'}" :icon="iconsMap.get(mode)" />
+              <svg-icon class="resource-icons" :icon="iconsMap.get(mode)" />
               <h6 class="ml-1">{{ `flow-builder.${mode.toLowerCase()}-content` | trans }}</h6>
             </header>
 
@@ -247,4 +247,8 @@ export default ResourceEditor
   font-size: small;
   flex-grow: 1;
 }
+.resource-icons {
+  height: 1.25em;
+  width: 1.25em;
+}
 </style>

From 99725c8969f2011f926a0c1163f791bd330c29a7 Mon Sep 17 00:00:00 2001
From: Pooja Patil <pooja.patil@viamo.io>
Date: Tue, 13 Jul 2021 12:54:01 -0700
Subject: [PATCH 16/22] VMO-4138 Updated icons to be added to font-awesome
 library

---
 src/App.vue                                   | 11 ---
 src/assets/icons/audio.svg                    |  5 --
 src/assets/icons/check.svg                    |  3 -
 src/assets/icons/edit.svg                     |  3 -
 src/assets/icons/enter.svg                    |  3 -
 src/assets/icons/message.svg                  |  3 -
 src/assets/icons/phone.svg                    |  3 -
 src/assets/icons/record-audio.svg             |  4 -
 src/assets/icons/rich-messaging.svg           |  3 -
 src/assets/icons/settings.svg                 |  3 -
 src/assets/icons/upload.svg                   |  4 -
 src/assets/icons/ussd.svg                     |  5 --
 src/components/common/SvgIcon.vue             | 42 ---------
 src/components/common/SvgSprite.vue           | 27 ------
 .../block-editors/BlockCodeEditor.vue         | 10 ++-
 .../block-editors/TitleEditor.vue             |  6 +-
 .../flow-editors/FirstBlockEditorButton.vue   | 11 +--
 .../resource-editors/ResourceEditor.vue       | 27 +++---
 src/lib/custom-icons/index.ts                 | 86 +++++++++++++++++++
 src/main.ts                                   |  7 +-
 20 files changed, 119 insertions(+), 147 deletions(-)
 delete mode 100644 src/assets/icons/audio.svg
 delete mode 100644 src/assets/icons/check.svg
 delete mode 100644 src/assets/icons/edit.svg
 delete mode 100644 src/assets/icons/enter.svg
 delete mode 100644 src/assets/icons/message.svg
 delete mode 100644 src/assets/icons/phone.svg
 delete mode 100644 src/assets/icons/record-audio.svg
 delete mode 100644 src/assets/icons/rich-messaging.svg
 delete mode 100644 src/assets/icons/settings.svg
 delete mode 100644 src/assets/icons/upload.svg
 delete mode 100644 src/assets/icons/ussd.svg
 delete mode 100644 src/components/common/SvgIcon.vue
 delete mode 100644 src/components/common/SvgSprite.vue
 create mode 100644 src/lib/custom-icons/index.ts

diff --git a/src/App.vue b/src/App.vue
index 4d2a7f9d6..d3e2cd892 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,16 +1,5 @@
 <template>
   <div id="app">
-    <svg-sprite />
     <router-view />
   </div>
 </template>
-
-<script>
-import SvgSprite from '@/components/common/SvgSprite'
-
-export default {
-  components: {
-    SvgSprite,
-  },
-}
-</script>
diff --git a/src/assets/icons/audio.svg b/src/assets/icons/audio.svg
deleted file mode 100644
index 44c87ec02..000000000
--- a/src/assets/icons/audio.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M19.441 11.882C20.0585 11.5733 20.8093 11.8235 21.118 12.441L20 13C21.118 12.441 21.118 12.441 21.118 12.441L21.1191 12.4431L21.1205 12.446L21.1244 12.4539L21.1364 12.4785C21.1462 12.4987 21.1595 12.5265 21.1757 12.5613C21.2082 12.6308 21.2527 12.7289 21.3052 12.8514C21.4099 13.0958 21.548 13.4411 21.6859 13.8547C21.9567 14.6671 22.25 15.811 22.25 17C22.25 18.1891 21.9567 19.3329 21.6859 20.1453C21.548 20.559 21.4099 20.9043 21.3052 21.1487C21.2527 21.2712 21.2082 21.3692 21.1757 21.4388C21.1595 21.4736 21.1462 21.5013 21.1364 21.5215L21.1244 21.5461L21.1205 21.5541L21.1191 21.5569L21.1185 21.5581C21.1185 21.5581 21.118 21.559 20 21L21.118 21.559C20.8093 22.1765 20.0585 22.4268 19.441 22.1181C18.8241 21.8096 18.5737 21.06 18.881 20.4429L18.882 20.441L19.944 20.972C18.882 20.441 18.882 20.441 18.882 20.441L18.881 20.4429L18.886 20.4326C18.8909 20.4225 18.8991 20.4054 18.9102 20.3816C18.9325 20.334 18.9661 20.2601 19.0073 20.1639C19.0901 19.9708 19.202 19.6911 19.3141 19.3547C19.5433 18.6671 19.75 17.811 19.75 17C19.75 16.1891 19.5433 15.3329 19.3141 14.6453C19.202 14.309 19.0901 14.0293 19.0073 13.8362C18.9661 13.7399 18.9325 13.6661 18.9102 13.6185C18.8991 13.5947 18.8909 13.5775 18.886 13.5674L18.8813 13.5577L18.8818 13.5586C18.5733 12.9412 18.8236 12.1907 19.441 11.882ZM18.8813 13.5577V13.5577Z" fill="black"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M23.441 7.882C24.0585 7.57326 24.8093 7.82354 25.118 8.44101L24 9.00003C25.118 8.44101 25.118 8.44101 25.118 8.44101L25.1193 8.4435L25.1212 8.44746L25.1273 8.45974L25.1477 8.50148C25.1648 8.5368 25.1888 8.58701 25.2187 8.65111C25.2785 8.77926 25.362 8.96324 25.4614 9.19513C25.6599 9.6583 25.923 10.3161 26.1859 11.1047C26.7067 12.6671 27.25 14.811 27.25 17C27.25 19.1891 26.7067 21.3329 26.1859 22.8953C25.923 23.684 25.6599 24.3418 25.4614 24.8049C25.362 25.0368 25.2785 25.2208 25.2187 25.349C25.1888 25.413 25.1648 25.4633 25.1477 25.4986L25.1273 25.5403L25.1212 25.5526L25.1193 25.5566L25.1186 25.558C25.1186 25.558 25.118 25.559 24 25L25.118 25.559C24.8093 26.1765 24.0585 26.4268 23.441 26.1181C22.8238 25.8095 22.5735 25.0593 22.8815 24.442V24.442L22.882 24.441L22.8842 24.4366L22.8973 24.4097C22.9095 24.3845 22.9284 24.3448 22.9532 24.2917C23.0028 24.1855 23.0755 24.0257 23.1636 23.8201C23.3401 23.4083 23.577 22.8161 23.8141 22.1047C24.2933 20.6671 24.75 18.811 24.75 17C24.75 15.1891 24.2933 13.3329 23.8141 11.8953C23.577 11.184 23.3401 10.5918 23.1636 10.1799C23.0755 9.97432 23.0028 9.81455 22.9532 9.70832C22.9284 9.65524 22.9095 9.6156 22.8973 9.59038L22.8842 9.56351L22.882 9.55905C22.5735 8.94165 22.8236 8.19067 23.441 7.882Z" fill="black"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5974 9.31676C15.0713 8.14182 17.25 9.19126 17.25 11.0761V22.0832C17.25 23.9018 15.2043 24.9691 13.7127 23.9286L9.81763 21.2116H6C4.75736 21.2116 3.75 20.2042 3.75 18.9616V14.6154C3.75 13.3728 4.75736 12.3654 6 12.3654H9.77325L13.5974 9.31676ZM14.75 11.5951L11.2633 14.3748C10.8648 14.6924 10.3703 14.8654 9.8607 14.8654H6.25V18.7116H9.89621C10.3566 18.7116 10.8059 18.8528 11.1835 19.1162L14.75 21.604V11.5951Z" fill="black"/>
-</svg>
diff --git a/src/assets/icons/check.svg b/src/assets/icons/check.svg
deleted file mode 100644
index c9d03928d..000000000
--- a/src/assets/icons/check.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="14" height="9" viewBox="0 0 14 9" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path id="check" d="M0.890115 2.94221L0.380747 3.43524C0.174136 3.63522 0.178367 3.96784 0.389997 4.1625L5.30778 8.68602C5.5003 8.86311 5.79679 8.86187 5.98783 8.68318L13.6162 1.54764C13.825 1.35235 13.8279 1.02206 13.6224 0.823223L13.1136 0.33074C12.9222 0.145457 12.6191 0.142801 12.4245 0.324702L5.64912 6.6566L1.57522 2.93244C1.38016 2.75412 1.08001 2.7584 0.890115 2.94221Z" fill="white"/>
-</svg>
diff --git a/src/assets/icons/edit.svg b/src/assets/icons/edit.svg
deleted file mode 100644
index 0c5264139..000000000
--- a/src/assets/icons/edit.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.9768 9.31607L11.8101 8.48272C11.9404 8.35251 12.1669 8.44366 12.1669 8.63116V12.4177C12.1669 13.1078 11.607 13.6677 10.9169 13.6677H1.75003C1.05991 13.6677 0.5 13.1078 0.5 12.4177V3.25084C0.5 2.56072 1.05991 2.00081 1.75003 2.00081H8.87258C9.05748 2.00081 9.15123 2.22477 9.02102 2.35759L8.18767 3.19094C8.1486 3.23 8.09652 3.25084 8.03923 3.25084H1.75003V12.4177H10.9169V9.46191C10.9169 9.40722 10.9377 9.35514 10.9768 9.31607ZM15.055 4.06075L8.21631 10.8994L5.86209 11.1599C5.17979 11.2354 4.59905 10.6599 4.67457 9.97234L4.93499 7.61812L11.7737 0.779429C12.37 0.183062 13.3336 0.183062 13.9274 0.779429L15.0524 1.90445C15.6488 2.50082 15.6488 3.46699 15.055 4.06075ZM12.482 4.86546L10.969 3.3524L6.13033 8.19365L5.94022 9.89421L7.64078 9.7041L12.482 4.86546ZM14.1696 2.78989L13.0445 1.66486C12.9378 1.55809 12.7633 1.55809 12.6591 1.66486L11.8544 2.46957L13.3675 3.98262L14.1722 3.17792C14.2763 3.06854 14.2763 2.89666 14.1696 2.78989Z" fill="white"/>
-</svg>
diff --git a/src/assets/icons/enter.svg b/src/assets/icons/enter.svg
deleted file mode 100644
index b0a42aae1..000000000
--- a/src/assets/icons/enter.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="17" height="20" viewBox="0 0 17 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1 9C0.447715 9 0 9.44772 0 10C0 10.5523 0.447715 11 1 11V9ZM11 11H12V9H11V11ZM7.99929 4.62347C7.63354 4.20965 7.00157 4.17068 6.58775 4.53643C6.17393 4.90218 6.13497 5.53414 6.50071 5.94796L7.99929 4.62347ZM11.4167 10L12.166 10.6622L12.7513 10L12.166 9.33775L11.4167 10ZM6.50071 14.052C6.13497 14.4659 6.17393 15.0978 6.58775 15.4636C7.00157 15.8293 7.63354 15.7904 7.99929 15.3765L6.50071 14.052ZM3.33333 3.14286C3.33333 3.69514 3.78105 4.14286 4.33333 4.14286C4.88562 4.14286 5.33333 3.69514 5.33333 3.14286H3.33333ZM5.33333 16.8571C5.33333 16.3049 4.88562 15.8571 4.33333 15.8571C3.78105 15.8571 3.33333 16.3049 3.33333 16.8571H5.33333ZM1 11H11V9H1V11ZM5.33333 3.14286V2H3.33333V3.14286H5.33333ZM5.33333 2H15V0H5.33333V2ZM15 2V18H17V2H15ZM15 18H5.33333V20H15V18ZM5.33333 18V16.8571H3.33333V18H5.33333ZM10.6674 9.33775L8.58405 11.6949L10.0826 13.0194L12.166 10.6622L10.6674 9.33775ZM8.58405 11.6949L6.50071 14.052L7.99929 15.3765L10.0826 13.0194L8.58405 11.6949ZM6.50071 5.94796L8.58405 8.3051L10.0826 6.98061L7.99929 4.62347L6.50071 5.94796ZM8.58405 8.3051L10.6674 10.6622L12.166 9.33775L10.0826 6.98061L8.58405 8.3051ZM5.33333 18H5.33333H3.33333C3.33333 19.1046 4.22877 20 5.33333 20V18ZM15 18V20C16.1046 20 17 19.1046 17 18H15ZM15 2H15H17C17 0.89543 16.1046 0 15 0V2ZM5.33333 2L5.33333 2V0C4.22876 0 3.33333 0.895431 3.33333 2H5.33333Z" fill="#8C215C"/>
-</svg>
diff --git a/src/assets/icons/message.svg b/src/assets/icons/message.svg
deleted file mode 100644
index 11b591f00..000000000
--- a/src/assets/icons/message.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M26.8334 6H5.16675C3.78602 6 2.66675 7.11927 2.66675 8.5V23.5C2.66675 24.8807 3.78602 26 5.16675 26H26.8334C28.2141 26 29.3334 24.8807 29.3334 23.5V8.5C29.3334 7.11927 28.2141 6 26.8334 6ZM26.8334 8.5V10.6253C25.6656 11.5762 23.8038 13.055 19.8237 16.1716C18.9465 16.8616 17.209 18.5191 16.0001 18.4998C14.7913 18.5193 13.0532 16.8613 12.1765 16.1716C8.19696 13.0555 6.33471 11.5764 5.16675 10.6253V8.5H26.8334ZM5.16675 23.5V13.8332C6.36018 14.7838 8.05263 16.1177 10.6322 18.1377C11.7706 19.0338 13.7642 21.012 16.0001 20.9999C18.2249 21.012 20.1932 19.0625 21.3674 18.1381C23.947 16.1182 25.6399 14.7839 26.8334 13.8333V23.5H5.16675Z" fill="black"/>
-</svg>
diff --git a/src/assets/icons/phone.svg b/src/assets/icons/phone.svg
deleted file mode 100644
index 9917d22ec..000000000
--- a/src/assets/icons/phone.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M24.2475 2.75589V2.7531C23.7687 2.27132 23.1178 2.00028 22.4389 2H10.5584C9.14729 2.0046 8.0046 3.14827 8 4.56054V26.4367C8.00028 27.1162 8.27109 27.7676 8.75246 28.2469C9.23062 28.728 9.88038 28.999 10.5584 29H22.4416C23.1196 28.999 23.7694 28.728 24.2475 28.2469C24.7282 27.7683 24.999 27.118 25 26.4395V4.56333C24.999 3.88477 24.7282 3.23445 24.2475 2.75589ZM16.5 27.2623C16.1183 27.2623 15.8089 26.9526 15.8089 26.5706C15.8089 26.1885 16.1183 25.8788 16.5 25.8788C16.8817 25.8788 17.1911 26.1885 17.1911 26.5706C17.1911 26.9526 16.8817 27.2623 16.5 27.2623ZM22.9684 22.9194C22.9684 23.8437 22.2197 24.593 21.2962 24.593H11.701C10.7775 24.593 10.0289 23.8437 10.0289 22.9194V6.61622C10.0289 5.69193 10.7775 4.94267 11.701 4.94267H21.299C22.2225 4.94267 22.9711 5.69193 22.9711 6.61622L22.9684 22.9194Z" fill="black"/>
-</svg>
diff --git a/src/assets/icons/record-audio.svg b/src/assets/icons/record-audio.svg
deleted file mode 100644
index d97ab4104..000000000
--- a/src/assets/icons/record-audio.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M21 8V13C21 15.7614 18.7614 18 16 18C13.2386 18 11 15.7614 11 13V8C11 5.23858 13.2386 3 16 3C18.7614 3 21 5.23858 21 8ZM10 8C10 4.68629 12.6863 2 16 2C19.3137 2 22 4.68629 22 8V13C22 16.3137 19.3137 19 16 19C12.6863 19 10 16.3137 10 13V8ZM7 13.5C7.27614 13.5 7.5 13.7239 7.5 14C7.5 18.0884 11.2486 21.5 16 21.5C20.7514 21.5 24.5 18.0884 24.5 14C24.5 13.7239 24.7239 13.5 25 13.5C25.2761 13.5 25.5 13.7239 25.5 14C25.5 18.5948 21.4637 22.2566 16.5 22.4883V27C16.5 27.2761 16.2761 27.5 16 27.5C15.7239 27.5 15.5 27.2761 15.5 27V22.4883C10.5363 22.2566 6.5 18.5948 6.5 14C6.5 13.7239 6.72386 13.5 7 13.5ZM16 27.5H24C24.2761 27.5 24.5 27.7239 24.5 28C24.5 28.2761 24.2761 28.5 24 28.5H8C7.72386 28.5 7.5 28.2761 7.5 28C7.5 27.7239 7.72386 27.5 8 27.5H16Z" fill="black"/>
-<path d="M16.5 22.4883L16.465 21.7392L15.75 21.7726V22.4883H16.5ZM15.5 22.4883H16.25V21.7726L15.535 21.7392L15.5 22.4883ZM21.75 13V8H20.25V13H21.75ZM16 18.75C19.1756 18.75 21.75 16.1756 21.75 13H20.25C20.25 15.3472 18.3472 17.25 16 17.25V18.75ZM10.25 13C10.25 16.1756 12.8244 18.75 16 18.75V17.25C13.6528 17.25 11.75 15.3472 11.75 13H10.25ZM10.25 8V13H11.75V8H10.25ZM16 2.25C12.8244 2.25 10.25 4.82436 10.25 8H11.75C11.75 5.65279 13.6528 3.75 16 3.75V2.25ZM21.75 8C21.75 4.82436 19.1756 2.25 16 2.25V3.75C18.3472 3.75 20.25 5.65279 20.25 8H21.75ZM16 1.25C12.2721 1.25 9.25 4.27208 9.25 8H10.75C10.75 5.1005 13.1005 2.75 16 2.75V1.25ZM22.75 8C22.75 4.27208 19.7279 1.25 16 1.25V2.75C18.8995 2.75 21.25 5.10051 21.25 8H22.75ZM22.75 13V8H21.25V13H22.75ZM16 19.75C19.7279 19.75 22.75 16.7279 22.75 13H21.25C21.25 15.8995 18.8995 18.25 16 18.25V19.75ZM9.25 13C9.25 16.7279 12.2721 19.75 16 19.75V18.25C13.1005 18.25 10.75 15.8995 10.75 13H9.25ZM9.25 8V13H10.75V8H9.25ZM8.25 14C8.25 13.3096 7.69036 12.75 7 12.75V14.25C6.86193 14.25 6.75 14.1381 6.75 14H8.25ZM16 20.75C11.5789 20.75 8.25 17.595 8.25 14H6.75C6.75 18.5818 10.9182 22.25 16 22.25V20.75ZM23.75 14C23.75 17.595 20.4211 20.75 16 20.75V22.25C21.0818 22.25 25.25 18.5818 25.25 14H23.75ZM25 12.75C24.3096 12.75 23.75 13.3096 23.75 14H25.25C25.25 14.1381 25.1381 14.25 25 14.25V12.75ZM26.25 14C26.25 13.3096 25.6904 12.75 25 12.75V14.25C24.8619 14.25 24.75 14.1381 24.75 14H26.25ZM16.535 23.2375C21.8156 22.991 26.25 19.0738 26.25 14H24.75C24.75 18.1158 21.1117 21.5222 16.465 21.7392L16.535 23.2375ZM17.25 27V22.4883H15.75V27H17.25ZM16 28.25C16.6904 28.25 17.25 27.6904 17.25 27H15.75C15.75 26.8619 15.8619 26.75 16 26.75V28.25ZM14.75 27C14.75 27.6904 15.3096 28.25 16 28.25V26.75C16.1381 26.75 16.25 26.8619 16.25 27H14.75ZM14.75 22.4883V27H16.25V22.4883H14.75ZM5.75 14C5.75 19.0738 10.1844 22.991 15.465 23.2375L15.535 21.7392C10.8883 21.5222 7.25 18.1158 7.25 14H5.75ZM7 12.75C6.30964 12.75 5.75 13.3096 5.75 14H7.25C7.25 14.1381 7.13807 14.25 7 14.25V12.75ZM24 26.75H16V28.25H24V26.75ZM25.25 28C25.25 27.3096 24.6904 26.75 24 26.75V28.25C23.8619 28.25 23.75 28.1381 23.75 28H25.25ZM24 29.25C24.6904 29.25 25.25 28.6904 25.25 28H23.75C23.75 27.8619 23.8619 27.75 24 27.75V29.25ZM8 29.25H24V27.75H8V29.25ZM6.75 28C6.75 28.6904 7.30964 29.25 8 29.25V27.75C8.13807 27.75 8.25 27.8619 8.25 28H6.75ZM8 26.75C7.30964 26.75 6.75 27.3096 6.75 28H8.25C8.25 28.1381 8.13807 28.25 8 28.25V26.75ZM16 26.75H8V28.25H16V26.75Z" fill="black"/>
-</svg>
diff --git a/src/assets/icons/rich-messaging.svg b/src/assets/icons/rich-messaging.svg
deleted file mode 100644
index a1e6f5fc4..000000000
--- a/src/assets/icons/rich-messaging.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.1691 13.5003C9.24736 13.5003 8.50266 14.245 8.50266 15.1668C8.50266 16.0885 9.24736 16.8332 10.1691 16.8332C11.0909 16.8332 11.8356 16.0885 11.8356 15.1668C11.8356 14.245 11.0909 13.5003 10.1691 13.5003ZM16.0017 13.5003C15.0799 13.5003 14.3352 14.245 14.3352 15.1668C14.3352 16.0885 15.0799 16.8332 16.0017 16.8332C16.9234 16.8332 17.6681 16.0885 17.6681 15.1668C17.6681 14.245 16.9234 13.5003 16.0017 13.5003ZM21.8343 13.5003C20.9125 13.5003 20.1678 14.245 20.1678 15.1668C20.1678 16.0885 20.9125 16.8332 21.8343 16.8332C22.756 16.8332 23.5007 16.0885 23.5007 15.1668C23.5007 14.245 22.756 13.5003 21.8343 13.5003ZM16.0017 4.33484C8.63806 4.33484 2.67008 9.18317 2.67008 15.1668C2.67008 17.6456 3.70641 19.9162 5.42493 21.744C4.64899 23.7959 3.03462 25.5352 3.00858 25.556C2.66487 25.9206 2.57114 26.4518 2.76903 26.91C2.96692 27.3683 3.41999 27.6651 3.91992 27.6651C7.12263 27.6651 9.64835 26.3268 11.1638 25.254C12.6688 25.7279 14.2936 25.9987 16.0017 25.9987C23.3653 25.9987 29.3333 21.1504 29.3333 15.1668C29.3333 9.18317 23.3653 4.33484 16.0017 4.33484ZM16.0017 23.499C14.6112 23.499 13.2364 23.2855 11.9189 22.8689L10.7367 22.4939L9.72125 23.2126C8.97656 23.7386 7.95586 24.327 6.72685 24.7228C7.10701 24.0927 7.47675 23.3845 7.76317 22.6293L8.31518 21.166L7.24241 20.0307C6.29982 19.0256 5.16976 17.3644 5.16976 15.1668C5.16976 10.5736 10.0285 6.83451 16.0017 6.83451C21.9749 6.83451 26.8336 10.5736 26.8336 15.1668C26.8336 19.7599 21.9749 23.499 16.0017 23.499Z" fill="black"/>
-</svg>
diff --git a/src/assets/icons/settings.svg b/src/assets/icons/settings.svg
deleted file mode 100644
index 4befbf35a..000000000
--- a/src/assets/icons/settings.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.9757 7.00154L13.2241 5.81525L13.6254 3.73557C13.7015 3.34893 13.5785 2.95057 13.3002 2.66938C13.019 2.39111 12.6207 2.26809 12.2399 2.34424L10.1632 2.74553L8.97979 0.990993C8.53749 0.3378 7.45958 0.3378 7.01728 0.990993L5.83392 2.74553L3.76011 2.34424C3.37053 2.27102 2.9751 2.39111 2.69684 2.67231C2.41857 2.9535 2.29555 3.34893 2.3717 3.73557L2.77299 5.81525L1.02138 7.00154C0.693322 7.22415 0.5 7.59029 0.5 7.98572C0.5 8.38115 0.696251 8.74729 1.02138 8.96697L2.77299 10.1533L2.3717 12.2329C2.29555 12.6196 2.41857 13.0179 2.69684 13.2962C2.9751 13.5745 3.3676 13.6975 3.76011 13.6213L5.83392 13.2201L7.01728 14.9746C7.23697 15.3027 7.60603 15.4989 7.99854 15.4989C8.39104 15.4989 8.76011 15.3027 8.97979 14.9775L10.1632 13.223L12.2399 13.6243C12.6324 13.7034 13.0249 13.5774 13.3032 13.2991C13.5814 13.0209 13.7015 12.6225 13.6283 12.2359L13.227 10.1562L14.9786 8.9699C15.3037 8.75022 15.5 8.38115 15.5 7.98865C15.4971 7.59029 15.3037 7.22415 14.9757 7.00154ZM11.6687 9.50886L12.1842 12.1802L9.51875 11.6647L7.99854 13.9172L6.47832 11.6618L3.81576 12.1773L4.33128 9.50593L2.08172 7.98279L4.33128 6.45965L3.81576 3.7883L6.48125 4.30382L7.99854 2.05426L9.51875 4.30675L12.1842 3.79123L11.6687 6.45965L13.9183 7.98279L11.6687 9.50886ZM7.99854 4.95409C6.32015 4.95409 4.95226 6.32198 4.95226 8.00037C4.95226 9.67875 6.32015 11.0466 7.99854 11.0466C9.67692 11.0466 11.0448 9.67875 11.0448 8.00037C11.0448 6.32198 9.67692 4.95409 7.99854 4.95409ZM7.99854 9.64067C7.09344 9.64067 6.35823 8.90546 6.35823 8.00037C6.35823 7.09527 7.09344 6.36006 7.99854 6.36006C8.90363 6.36006 9.63884 7.09527 9.63884 8.00037C9.63884 8.90546 8.90363 9.64067 7.99854 9.64067Z" fill="#531944"/>
-</svg>
diff --git a/src/assets/icons/upload.svg b/src/assets/icons/upload.svg
deleted file mode 100644
index 262c1ae87..000000000
--- a/src/assets/icons/upload.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M16 4.81464L16.342 5.13523L24.342 12.6352C24.5434 12.8241 24.5536 13.1405 24.3648 13.342C24.1759 13.5434 23.8595 13.5536 23.658 13.3648L16.5 6.65412V19C16.5 19.2761 16.2761 19.5 16 19.5C15.7239 19.5 15.5 19.2761 15.5 19V6.65412L8.34197 13.3648C8.14051 13.5536 7.8241 13.5434 7.63523 13.342C7.44637 13.1405 7.45657 12.8241 7.65803 12.6352L15.658 5.13523L16 4.81464ZM7 20.5C7.27614 20.5 7.5 20.7239 7.5 21V26C7.5 26.2761 7.72386 26.5 8 26.5H23C23.2761 26.5 23.5 26.2761 23.5 26V21C23.5 20.7239 23.7239 20.5 24 20.5C24.2761 20.5 24.5 20.7239 24.5 21V26C24.5 26.8284 23.8284 27.5 23 27.5H8C7.17157 27.5 6.5 26.8284 6.5 26V21C6.5 20.7239 6.72386 20.5 7 20.5Z" fill="black"/>
-<path d="M16.342 5.13523L15.829 5.68239L15.829 5.68239L16.342 5.13523ZM16 4.81464L16.513 4.26748L16 3.78659L15.487 4.26748L16 4.81464ZM24.342 12.6352L23.829 13.1824L23.829 13.1824L24.342 12.6352ZM23.658 13.3648L23.1451 13.9119L23.1451 13.9119L23.658 13.3648ZM16.5 6.65412L17.013 6.10697L15.75 4.92294V6.65412H16.5ZM15.5 6.65412H16.25V4.92294L14.987 6.10697L15.5 6.65412ZM8.34197 13.3648L8.85493 13.9119L8.85493 13.9119L8.34197 13.3648ZM7.63523 13.342L7.08808 13.8549L7.08808 13.8549L7.63523 13.342ZM7.65803 12.6352L8.17098 13.1824L8.17099 13.1824L7.65803 12.6352ZM15.658 5.13523L16.171 5.68239L16.171 5.68239L15.658 5.13523ZM16.8549 4.58808L16.513 4.26748L15.487 5.36179L15.829 5.68239L16.8549 4.58808ZM24.8549 12.0881L16.8549 4.58808L15.829 5.68239L23.829 13.1824L24.8549 12.0881ZM24.9119 13.8549C25.3841 13.3513 25.3586 12.5602 24.8549 12.0881L23.829 13.1824C23.7283 13.088 23.7232 12.9297 23.8176 12.829L24.9119 13.8549ZM23.1451 13.9119C23.6487 14.3841 24.4398 14.3586 24.9119 13.8549L23.8176 12.829C23.912 12.7283 24.0703 12.7232 24.171 12.8176L23.1451 13.9119ZM15.987 7.20127L23.1451 13.9119L24.171 12.8176L17.013 6.10697L15.987 7.20127ZM15.75 6.65412V19H17.25V6.65412H15.75ZM15.75 19C15.75 18.8619 15.8619 18.75 16 18.75V20.25C16.6904 20.25 17.25 19.6904 17.25 19H15.75ZM16 18.75C16.1381 18.75 16.25 18.8619 16.25 19H14.75C14.75 19.6904 15.3096 20.25 16 20.25V18.75ZM16.25 19V6.65412H14.75V19H16.25ZM8.85493 13.9119L16.013 7.20127L14.987 6.10697L7.82901 12.8176L8.85493 13.9119ZM7.08808 13.8549C7.56024 14.3586 8.35129 14.3841 8.85493 13.9119L7.82902 12.8176C7.92974 12.7232 8.08795 12.7283 8.18238 12.829L7.08808 13.8549ZM7.14507 12.0881C6.64143 12.5602 6.61592 13.3513 7.08808 13.8549L8.18238 12.829C8.27682 12.9297 8.27171 13.088 8.17098 13.1824L7.14507 12.0881ZM15.1451 4.58808L7.14507 12.0881L8.17099 13.1824L16.171 5.68239L15.1451 4.58808ZM15.487 4.26748L15.1451 4.58808L16.171 5.68239L16.513 5.36179L15.487 4.26748ZM8.25 21C8.25 20.3096 7.69036 19.75 7 19.75V21.25C6.86193 21.25 6.75 21.1381 6.75 21H8.25ZM8.25 26V21H6.75V26H8.25ZM8 25.75C8.13807 25.75 8.25 25.8619 8.25 26H6.75C6.75 26.6904 7.30964 27.25 8 27.25V25.75ZM23 25.75H8V27.25H23V25.75ZM22.75 26C22.75 25.8619 22.8619 25.75 23 25.75V27.25C23.6904 27.25 24.25 26.6904 24.25 26H22.75ZM22.75 21V26H24.25V21H22.75ZM24 19.75C23.3096 19.75 22.75 20.3096 22.75 21H24.25C24.25 21.1381 24.1381 21.25 24 21.25V19.75ZM25.25 21C25.25 20.3096 24.6904 19.75 24 19.75V21.25C23.8619 21.25 23.75 21.1381 23.75 21H25.25ZM25.25 26V21H23.75V26H25.25ZM23 28.25C24.2426 28.25 25.25 27.2426 25.25 26H23.75C23.75 26.4142 23.4142 26.75 23 26.75V28.25ZM8 28.25H23V26.75H8V28.25ZM5.75 26C5.75 27.2426 6.75736 28.25 8 28.25V26.75C7.58579 26.75 7.25 26.4142 7.25 26H5.75ZM5.75 21V26H7.25V21H5.75ZM7 19.75C6.30964 19.75 5.75 20.3096 5.75 21H7.25C7.25 21.1381 7.13807 21.25 7 21.25V19.75Z" fill="black"/>
-</svg>
diff --git a/src/assets/icons/ussd.svg b/src/assets/icons/ussd.svg
deleted file mode 100644
index 611773056..000000000
--- a/src/assets/icons/ussd.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M26.1667 4H7.16667C5.42005 4 4 5.42005 4 7.16667V21.4167C4 23.1633 5.42005 24.5833 7.16667 24.5833H11.9167V28.7396C11.9167 29.0909 12.2036 29.3333 12.5104 29.3333C12.6292 29.3333 12.7529 29.2987 12.8617 29.2146L19.0417 24.5833H26.1667C27.9133 24.5833 29.3333 23.1633 29.3333 21.4167V7.16667C29.3333 5.42005 27.9133 4 26.1667 4ZM26.9583 21.4167C26.9583 21.8521 26.6021 22.2083 26.1667 22.2083H18.25L14.2917 25.1771V22.2083H7.16667C6.73125 22.2083 6.375 21.8521 6.375 21.4167V7.16667C6.375 6.73125 6.73125 6.375 7.16667 6.375H26.1667C26.6021 6.375 26.9583 6.73125 26.9583 7.16667V21.4167Z" fill="black"/>
-<path d="M15.1409 13.3314H13.6422L14.7019 12.2716C14.9445 12.0291 14.9445 11.6359 14.7019 11.3933C14.4594 11.1508 14.0662 11.1508 13.8237 11.3933L12.7639 12.4531V10.9543C12.7639 10.6114 12.4859 10.3333 12.1429 10.3333C11.8 10.3333 11.5219 10.6114 11.5219 10.9543V12.4531L10.4621 11.3933C10.2196 11.1508 9.8264 11.1508 9.58388 11.3933C9.34136 11.6359 9.34136 12.0291 9.58388 12.2716L10.6437 13.3314H9.14488C8.80192 13.3314 8.52387 13.6094 8.52387 13.9524C8.52387 14.2953 8.80192 14.5734 9.14488 14.5734H10.6437L9.58388 15.6332C9.34136 15.8757 9.34136 16.2689 9.58388 16.5114C9.8264 16.7539 10.2196 16.7539 10.4621 16.5114L11.5219 15.4516V16.9504C11.5219 17.2934 11.8 17.5714 12.1429 17.5714C12.4859 17.5714 12.7639 17.2934 12.7639 16.9504V15.4516L13.8237 16.5114C14.0662 16.7539 14.4594 16.7539 14.7019 16.5114C14.9445 16.2689 14.9445 15.8757 14.7019 15.6332L13.6422 14.5734H15.1409C15.4839 14.5734 15.762 14.2953 15.762 13.9524C15.762 13.6094 15.4839 13.3314 15.1409 13.3314Z" fill="black"/>
-<path d="M23.5058 12.8747H24.1796C24.4514 12.8747 24.6819 12.6749 24.7204 12.4057C24.7674 12.0766 24.5118 11.7821 24.1793 11.7823L23.671 11.7826L23.7326 11.3521C23.782 11.0068 23.5142 10.6979 23.1654 10.6979C22.8803 10.6979 22.6386 10.9075 22.5982 11.1898L22.5132 11.7836L20.487 11.7855L20.5524 11.3564C20.6051 11.01 20.337 10.6979 19.9867 10.6979C19.7039 10.6979 19.4635 10.9045 19.4209 11.184L19.3291 11.7865L18.7136 11.7868C18.4458 11.787 18.218 11.982 18.1765 12.2466C18.1248 12.5765 18.3799 12.8748 18.7139 12.8748H19.1644L18.8743 15.0292L18.2014 15.0296C17.9294 15.0297 17.6989 15.2298 17.6605 15.499C17.6134 15.8284 17.869 16.123 18.2017 16.123H18.7096L18.6477 16.5521C18.5978 16.8975 18.8657 17.2068 19.2147 17.2068C19.4995 17.2068 19.7411 16.9977 19.7818 16.7158L19.8673 16.123H21.8933L21.833 16.5542C21.7848 16.899 22.0526 17.2068 22.4008 17.2068C22.6867 17.2068 22.9289 16.9961 22.9685 16.7129L23.051 16.123H23.6619C23.9326 16.123 24.1629 15.9257 24.2044 15.6582C24.256 15.3253 23.9985 15.0248 23.6616 15.025L23.2162 15.0252L23.5058 12.8747ZM22.0584 15.0263L20.0322 15.0281L20.3221 12.8747H22.3481L22.0584 15.0263Z" fill="black"/>
-</svg>
diff --git a/src/components/common/SvgIcon.vue b/src/components/common/SvgIcon.vue
deleted file mode 100644
index dc086914b..000000000
--- a/src/components/common/SvgIcon.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-  <svg class="icon" :class="{ 'icon-spin': spin }">
-    <use :xlink:href="`#${icon}`" />
-  </svg>
-</template>
-
-<script>
-export default {
-  name: 'SvgIcon',
-  props: {
-    icon: {
-      type: String,
-      required: true,
-    },
-    spin: {
-      type: Boolean,
-      default: false,
-    },
-  },
-}
-</script>
-
-<style>
-svg.icon {
-  fill: currentColor;
-  height: 1em;
-  margin-bottom: 0.125em;
-  vertical-align: middle;
-  width: 1em;
-}
-svg.icon-spin {
-  animation: icon-spin 2s infinite linear;
-}
-@keyframes icon-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(359deg);
-  }
-}
-</style>
diff --git a/src/components/common/SvgSprite.vue b/src/components/common/SvgSprite.vue
deleted file mode 100644
index 0e979dce0..000000000
--- a/src/components/common/SvgSprite.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <svg width="0" height="0" style="display: none;" v-html="$options.svgSprite" />
-</template>
-
-<script>
-const svgContext = require.context(
-  '!svg-inline-loader?' +
-  'removeTags=true' + // remove title tags, etc.
-  '&removeSVGTagAttrs=true' + // enable removing attributes
-  '&removingTagAttrs=fill' + // remove fill attributes
-  '!@/assets/icons', // search this directory
-  true, // search subdirectories
-  /\w+\.svg$/i // only include SVG files
-)
-const symbols = svgContext.keys().map(path => {
-  // get SVG file content
-  const content = svgContext(path)
-  // extract icon id from filename
-  const id = path.replace(/^\.\/(.*)\.\w+$/, '$1')
-  // replace svg tags with symbol tags and id attribute
-  return content.replace('<svg', `<symbol id="${id}"`).replace('svg>', 'symbol>')
-})
-export default {
-  name: 'SvgSprite',
-  svgSprite: symbols.join('\n'), // concatenate all symbols into $options.svgSprite
-}
-</script>
diff --git a/src/components/interaction-designer/block-editors/BlockCodeEditor.vue b/src/components/interaction-designer/block-editors/BlockCodeEditor.vue
index b0a23a981..fe8506a1c 100644
--- a/src/components/interaction-designer/block-editors/BlockCodeEditor.vue
+++ b/src/components/interaction-designer/block-editors/BlockCodeEditor.vue
@@ -15,7 +15,9 @@
           <span
             class="btn btn-primary btn-xs align-self-center ml-2"
             @click="editBlockName = false">
-            <svg-icon icon="check" />
+            <font-awesome-icon
+              :icon="['fas', 'check']"
+              class="fa-btn" />
           </span>
         </div>
       </div>
@@ -25,7 +27,9 @@
           <span class=""> {{ blockName }} </span>
         </div>
         <span class="btn btn-primary btn-xs align-self-baseline ml-2" @click="editBlockName = true">
-          <svg-icon icon="edit" @click="editBlockName = true" />
+          <font-awesome-icon
+            :icon="['far', 'edit']"
+            class="fa-btn" />
         </span>
       </div>
     </validation-message>
@@ -39,7 +43,6 @@ import {mixins} from 'vue-class-component'
 import Lang from '@/lib/filters/lang'
 import {IBlock} from '@floip/flow-runner'
 import {namespace} from 'vuex-class'
-import SvgIcon from '@/components/common/SvgIcon.vue'
 import SmallTextEditor from '@/components/common/SmallTextEditor.vue'
 
 const flowVuexNamespace = namespace('flow')
@@ -48,7 +51,6 @@ const flowVuexNamespace = namespace('flow')
   components: {
     SmallTextEditor,
     ValidationMessage,
-    SvgIcon,
   },
 })
 class BlockCodeEditor extends mixins(Lang) {
diff --git a/src/components/interaction-designer/block-editors/TitleEditor.vue b/src/components/interaction-designer/block-editors/TitleEditor.vue
index 3172fd322..3b13e259c 100644
--- a/src/components/interaction-designer/block-editors/TitleEditor.vue
+++ b/src/components/interaction-designer/block-editors/TitleEditor.vue
@@ -11,7 +11,9 @@
           :placeholder="'flow-builder.enter-title' | trans"
           :valid-state="isValid"/>
         <span class="btn btn-outline-primary btn-xs align-self-center ml-2" @click="emitGearClickedEvent">
-          <svg-icon icon="settings" />
+          <font-awesome-icon
+            :icon="['fac', 'settings']"
+            class="fa-btn text-primary" />
         </span>
       </div>
     </validation-message>
@@ -26,7 +28,6 @@ import {mixins} from 'vue-class-component'
 import Lang from '@/lib/filters/lang'
 import {IBlock} from '@floip/flow-runner'
 import {namespace} from 'vuex-class'
-import SvgIcon from '@/components/common/SvgIcon.vue'
 
 const flowVuexNamespace = namespace('flow')
 
@@ -34,7 +35,6 @@ const flowVuexNamespace = namespace('flow')
   components: {
     SmallTextEditor,
     ValidationMessage,
-    SvgIcon,
   },
 })
 class TitleEditor extends mixins(Lang) {
diff --git a/src/components/interaction-designer/flow-editors/FirstBlockEditorButton.vue b/src/components/interaction-designer/flow-editors/FirstBlockEditorButton.vue
index 0803edb06..90acb9b0c 100644
--- a/src/components/interaction-designer/flow-editors/FirstBlockEditorButton.vue
+++ b/src/components/interaction-designer/flow-editors/FirstBlockEditorButton.vue
@@ -10,7 +10,9 @@
           :class="{'btn-outline-primary': !isStartBlock, 'btn-primary': isStartBlock}"
           :disabled="isStartBlock"
           @click="setStartBlock($event)">
-          <svg-icon icon="enter" />
+          <font-awesome-icon
+            :icon="['fac', 'enter']"
+            class="fa-btn" />
           <template v-if="isStartBlock">
             {{ 'flow-builder.currently-set-as-starting-block' | trans }}
           </template>
@@ -29,15 +31,10 @@ import {IBlock, IFlow} from '@floip/flow-runner'
 import Lang from '@/lib/filters/lang'
 import {namespace} from 'vuex-class'
 import {mixins} from 'vue-class-component'
-import SvgIcon from '@/components/common/SvgIcon.vue'
 
 const flowVuexNamespace = namespace('flow')
 
-@Component({
-  components: {
-    SvgIcon,
-  },
-})
+@Component({})
 class FirstBlockEditorButton extends mixins(Lang) {
   @Prop({default: true}) readonly isEditable!: boolean
 
diff --git a/src/components/interaction-designer/resource-editors/ResourceEditor.vue b/src/components/interaction-designer/resource-editors/ResourceEditor.vue
index 581245cdb..90149488f 100644
--- a/src/components/interaction-designer/resource-editors/ResourceEditor.vue
+++ b/src/components/interaction-designer/resource-editors/ResourceEditor.vue
@@ -18,7 +18,10 @@
             :key="i"
             class="tab-content-style">
             <header class="d-flex">
-              <svg-icon class="resource-icons" :icon="iconsMap.get(mode)" />
+<!--              <svg-icon class="resource-icons" :icon="iconsMap.get(mode)" />-->
+              <font-awesome-icon
+                :icon="iconsMap.get(mode)"
+                class="fa-btn resource-icons" />
               <h6 class="ml-1">{{ `flow-builder.${mode.toLowerCase()}-content` | trans }}</h6>
             </header>
 
@@ -61,14 +64,18 @@
                       class="btn btn-primary ivr-buttons"
                       @filesSubmitted="handleFilesSubmittedFor(`${block.uuid}:${languageId}`, $event)"
                       @fileSuccess="handleFileSuccessFor(`${block.uuid}:${languageId}`, languageId, $event)">
-                      <svg-icon icon="upload" />
+                      <font-awesome-icon
+                        :icon="['fac', 'upload']"
+                        class="fa-btn" />
                       {{ 'flow-builder.upload-audio' | trans }}
                     </button>
                     <button
                       v-if="can(['edit-content', 'send-call-to-records'], true) && isFeatureAudioUploadEnabled"
                       class="btn btn-primary ivr-buttons ml-2"
                       @click.prevent="triggerRecordViaPhoneFor(languageId)">
-                      <svg-icon icon="record-audio" />
+                      <font-awesome-icon
+                        :icon="['fac', 'record-audio']"
+                        class="fa-btn" />
                       {{ 'flow-builder.record-audio' | trans }}
                     </button>
                   </div>
@@ -112,7 +119,6 @@ import {mixins} from 'vue-class-component'
 import {TabsPlugin} from 'bootstrap-vue'
 import UploadMonitor from '../block-editors/UploadMonitor.vue'
 import ResourceVariantTextEditor from './ResourceVariantTextEditor.vue'
-import SvgIcon from '@/components/common/SvgIcon.vue'
 
 Vue.use(TabsPlugin)
 
@@ -139,7 +145,6 @@ interface IResourceDefinitionVariantOverModesWithOptionalValue extends Partial<I
     ResourceVariantTextEditor,
     UploadMonitor,
     PhoneRecorder,
-    SvgIcon,
   },
 })
 export class ResourceEditor extends mixins(FlowUploader, Permissions, Routes, Lang) {
@@ -161,12 +166,12 @@ export class ResourceEditor extends mixins(FlowUploader, Permissions, Routes, La
 
   SupportedContentType = SupportedContentType
 
-  iconsMap = new Map<string, string>([
-    [SupportedMode.SMS, 'message'],
-    [SupportedMode.USSD, 'ussd'],
-    [SupportedMode.IVR, 'audio'],
-    [SupportedMode.RICH_MESSAGING, 'rich-messaging'],
-    [SupportedMode.OFFLINE, 'phone'],
+  iconsMap = new Map<string, object>([
+    [SupportedMode.SMS, ['far', 'envelope']],
+    [SupportedMode.USSD, ['fac', 'ussd']],
+    [SupportedMode.IVR, ['fac', 'audio']],
+    [SupportedMode.RICH_MESSAGING, ['far', 'comment-dots']],
+    [SupportedMode.OFFLINE, ['fas', 'mobile-alt']],
   ])
 
   triggerRecordViaPhoneFor(langId: ILanguage['id']): void {
diff --git a/src/lib/custom-icons/index.ts b/src/lib/custom-icons/index.ts
new file mode 100644
index 000000000..a8a2a9ddf
--- /dev/null
+++ b/src/lib/custom-icons/index.ts
@@ -0,0 +1,86 @@
+import {
+  IconDefinition,
+  IconName,
+  IconPrefix,
+} from '@fortawesome/fontawesome-common-types'
+
+const audio: IconDefinition = {
+  prefix: 'fac' as IconPrefix,
+  iconName: 'audio' as IconName,
+  icon: [
+    32,
+    32,
+    [],
+    'e001',
+    'M21.118 12.441C20.8093 11.8235 20.0585 11.5732 19.441 11.882C18.8235 12.1907 18.5732 12.9415 18.882 13.559L21.118 12.441ZM18.882 20.441C18.5732 21.0585 18.8235 21.8093 19.441 22.118C20.0585 22.4268 20.8093 22.1765 21.118 21.559L18.882 20.441ZM25.118 8.44098C24.8093 7.82351 24.0585 7.57323 23.441 7.88197C22.8235 8.1907 22.5732 8.94154 22.882 9.55902L25.118 8.44098ZM22.882 24.441C22.5732 25.0585 22.8235 25.8093 23.441 26.118C24.0585 26.4268 24.8093 26.1765 25.118 25.559L22.882 24.441ZM10.4683 20.1414L11.1835 19.1161L11.1835 19.1161L10.4683 20.1414ZM14.4279 22.9034L15.143 21.8782L15.143 21.8782L14.4279 22.9034ZM14.3766 10.2941L13.5974 9.31673L13.5974 9.31673L14.3766 10.2941ZM10.4841 13.3973L9.70486 12.4199L9.70486 12.4199L10.4841 13.3973ZM20 13C18.882 13.559 18.8819 13.5588 18.8818 13.5586C18.8817 13.5585 18.8816 13.5583 18.8816 13.5582C18.8815 13.558 18.8814 13.5578 18.8813 13.5576C18.8811 13.5573 18.881 13.5571 18.8809 13.5569C18.8808 13.5567 18.8809 13.557 18.8813 13.5577C18.882 13.5591 18.8836 13.5624 18.886 13.5674C18.8909 13.5775 18.8991 13.5947 18.9102 13.6185C18.9325 13.6661 18.9661 13.7399 19.0073 13.8361C19.0901 14.0292 19.202 14.309 19.3141 14.6453C19.5433 15.3329 19.75 16.1891 19.75 17H22.25C22.25 15.8109 21.9567 14.6671 21.6859 13.8547C21.548 13.441 21.4099 13.0958 21.3052 12.8514C21.2527 12.7288 21.2082 12.6308 21.1757 12.5612C21.1595 12.5264 21.1462 12.4987 21.1364 12.4785C21.1315 12.4684 21.1275 12.4602 21.1244 12.4539C21.1229 12.4508 21.1216 12.4481 21.1205 12.446C21.12 12.4449 21.1195 12.4439 21.1191 12.4431C21.1189 12.4427 21.1187 12.4423 21.1185 12.442C21.1184 12.4418 21.1183 12.4415 21.1183 12.4414C21.1181 12.4412 21.118 12.441 20 13ZM19.75 17C19.75 17.8109 19.5433 18.6671 19.3141 19.3547C19.202 19.691 19.0901 19.9708 19.0073 20.1639C18.9661 20.2601 18.9325 20.3339 18.9102 20.3815C18.8991 20.4053 18.8909 20.4225 18.886 20.4326C18.8836 20.4376 18.882 20.4409 18.8813 20.4423C18.8809 20.443 18.8808 20.4433 18.8809 20.4431C18.881 20.4429 18.8811 20.4427 18.8813 20.4424C18.8814 20.4422 18.8815 20.442 18.8816 20.4418C18.8816 20.4417 18.8817 20.4415 18.8818 20.4414C18.8819 20.4412 18.882 20.441 20 21C21.118 21.559 21.1181 21.5588 21.1183 21.5586C21.1183 21.5585 21.1184 21.5582 21.1185 21.558C21.1187 21.5577 21.1189 21.5573 21.1191 21.5569C21.1195 21.5561 21.12 21.5551 21.1205 21.554C21.1216 21.5519 21.1229 21.5492 21.1244 21.5461C21.1275 21.5398 21.1315 21.5316 21.1364 21.5215C21.1462 21.5013 21.1595 21.4736 21.1757 21.4388C21.2082 21.3692 21.2527 21.2712 21.3052 21.1486C21.4099 20.9042 21.548 20.559 21.6859 20.1453C21.9567 19.3329 22.25 18.1891 22.25 17H19.75ZM24 9C22.882 9.55902 22.8819 9.55881 22.8818 9.55863C22.8817 9.55858 22.8817 9.55841 22.8816 9.55832C22.8815 9.55815 22.8815 9.55804 22.8815 9.55799C22.8814 9.55789 22.8815 9.55803 22.8817 9.5584C22.882 9.55915 22.8829 9.56085 22.8842 9.56348C22.8868 9.56875 22.8912 9.57774 22.8973 9.59035C22.9095 9.61557 22.9284 9.65521 22.9532 9.70829C23.0028 9.81452 23.0755 9.97429 23.1636 10.1799C23.3401 10.5917 23.577 11.184 23.8141 11.8953C24.2933 13.3329 24.75 15.1891 24.75 17H27.25C27.25 14.8109 26.7067 12.6671 26.1859 11.1047C25.923 10.316 25.6599 9.65827 25.4614 9.1951C25.362 8.96321 25.2785 8.77923 25.2187 8.65108C25.1888 8.58698 25.1648 8.53677 25.1477 8.50145C25.1391 8.48378 25.1323 8.46983 25.1273 8.45971C25.1248 8.45465 25.1228 8.45055 25.1212 8.44743C25.1205 8.44586 25.1198 8.44454 25.1193 8.44347C25.119 8.44293 25.1188 8.44246 25.1186 8.44204C25.1185 8.44183 25.1183 8.44157 25.1183 8.44147C25.1182 8.44122 25.118 8.44098 24 9ZM24.75 17C24.75 18.8109 24.2933 20.6671 23.8141 22.1047C23.577 22.816 23.3401 23.4083 23.1636 23.8201C23.0755 24.0257 23.0028 24.1855 22.9532 24.2917C22.9284 24.3448 22.9095 24.3844 22.8973 24.4097C22.8912 24.4223 22.8868 24.4313 22.8842 24.4365C22.8829 24.4392 22.882 24.4408 22.8817 24.4416C22.8815 24.442 22.8814 24.4421 22.8815 24.442C22.8815 24.442 22.8815 24.4418 22.8816 24.4417C22.8817 24.4416 22.8817 24.4414 22.8818 24.4414C22.8819 24.4412 22.882 24.441 24 25C25.118 25.559 25.1182 25.5588 25.1183 25.5585C25.1183 25.5584 25.1185 25.5582 25.1186 25.558C25.1188 25.5575 25.119 25.5571 25.1193 25.5565C25.1198 25.5555 25.1205 25.5541 25.1212 25.5526C25.1228 25.5494 25.1248 25.5453 25.1273 25.5403C25.1323 25.5302 25.1391 25.5162 25.1477 25.4986C25.1648 25.4632 25.1888 25.413 25.2187 25.3489C25.2785 25.2208 25.362 25.0368 25.4614 24.8049C25.6599 24.3417 25.923 23.684 26.1859 22.8953C26.7067 21.3329 27.25 19.1891 27.25 17H24.75ZM3.75 14.6154V18.9615H6.25V14.6154H3.75ZM6 21.2115H9.89621V18.7115H6V21.2115ZM9.75318 21.1666L13.7127 23.9286L15.143 21.8782L11.1835 19.1161L9.75318 21.1666ZM17.25 22.0832V11.0761H14.75V22.0832H17.25ZM13.5974 9.31673L9.70486 12.4199L11.2633 14.3747L15.1558 11.2716L13.5974 9.31673ZM9.8607 12.3654H6V14.8654H9.8607V12.3654ZM9.70486 12.4199C9.74914 12.3846 9.80408 12.3654 9.8607 12.3654V14.8654C10.3703 14.8654 10.8648 14.6924 11.2633 14.3747L9.70486 12.4199ZM17.25 11.0761C17.25 9.19123 15.0713 8.14179 13.5974 9.31673L15.1558 11.2716C14.9921 11.4021 14.75 11.2855 14.75 11.0761H17.25ZM13.7127 23.9286C15.2043 24.969 17.25 23.9018 17.25 22.0832H14.75C14.75 21.8811 14.9773 21.7625 15.143 21.8782L13.7127 23.9286ZM9.89621 21.2115C9.84506 21.2115 9.79513 21.1958 9.75318 21.1666L11.1835 19.1161C10.8059 18.8528 10.3566 18.7115 9.89621 18.7115V21.2115ZM3.75 18.9615C3.75 20.2042 4.75736 21.2115 6 21.2115V18.7115C6.13807 18.7115 6.25 18.8235 6.25 18.9615H3.75ZM6.25 14.6154C6.25 14.7535 6.13807 14.8654 6 14.8654V12.3654C4.75736 12.3654 3.75 13.3727 3.75 14.6154H6.25Z',
+  ],
+}
+
+const enter: IconDefinition = {
+  prefix: 'fac' as IconPrefix,
+  iconName: 'enter' as IconName,
+  icon: [
+    17,
+    20,
+    [],
+    'e002',
+    'M1 9C0.447715 9 0 9.44772 0 10C0 10.5523 0.447715 11 1 11V9ZM11 11H12V9H11V11ZM7.99929 4.62347C7.63354 4.20965 7.00157 4.17068 6.58775 4.53643C6.17393 4.90218 6.13497 5.53414 6.50071 5.94796L7.99929 4.62347ZM11.4167 10L12.166 10.6622L12.7513 10L12.166 9.33775L11.4167 10ZM6.50071 14.052C6.13497 14.4659 6.17393 15.0978 6.58775 15.4636C7.00157 15.8293 7.63354 15.7904 7.99929 15.3765L6.50071 14.052ZM3.33333 3.14286C3.33333 3.69514 3.78105 4.14286 4.33333 4.14286C4.88562 4.14286 5.33333 3.69514 5.33333 3.14286H3.33333ZM5.33333 16.8571C5.33333 16.3049 4.88562 15.8571 4.33333 15.8571C3.78105 15.8571 3.33333 16.3049 3.33333 16.8571H5.33333ZM1 11H11V9H1V11ZM5.33333 3.14286V2H3.33333V3.14286H5.33333ZM5.33333 2H15V0H5.33333V2ZM15 2V18H17V2H15ZM15 18H5.33333V20H15V18ZM5.33333 18V16.8571H3.33333V18H5.33333ZM10.6674 9.33775L8.58405 11.6949L10.0826 13.0194L12.166 10.6622L10.6674 9.33775ZM8.58405 11.6949L6.50071 14.052L7.99929 15.3765L10.0826 13.0194L8.58405 11.6949ZM6.50071 5.94796L8.58405 8.3051L10.0826 6.98061L7.99929 4.62347L6.50071 5.94796ZM8.58405 8.3051L10.6674 10.6622L12.166 9.33775L10.0826 6.98061L8.58405 8.3051ZM5.33333 18H5.33333H3.33333C3.33333 19.1046 4.22877 20 5.33333 20V18ZM15 18V20C16.1046 20 17 19.1046 17 18H15ZM15 2H15H17C17 0.89543 16.1046 0 15 0V2ZM5.33333 2L5.33333 2V0C4.22876 0 3.33333 0.895431 3.33333 2H5.33333Z'
+  ],
+}
+
+const recordAudio: IconDefinition = {
+  prefix: 'fac' as IconPrefix,
+  iconName: 'record-audio' as IconName,
+  icon: [
+    32,
+    32,
+    [],
+    'e003',
+    'M7.99805 13.9376C7.9636 13.3864 7.48883 12.9675 6.93762 13.0019C6.38641 13.0364 5.9675 13.5112 6.00195 14.0624L7.99805 13.9376ZM25.9981 14.0624C26.0325 13.5112 25.6136 13.0364 25.0624 13.0019C24.5112 12.9675 24.0364 13.3864 24.0019 13.9376L25.9981 14.0624ZM15 28C15 28.5523 15.4477 29 16 29C16.5523 29 17 28.5523 17 28H15ZM8 27C7.44772 27 7 27.4477 7 28C7 28.5523 7.44772 29 8 29V27ZM24 29C24.5523 29 25 28.5523 25 28C25 27.4477 24.5523 27 24 27V29ZM20 8V13H22V8H20ZM12 13V8H10V13H12ZM16 17C13.7909 17 12 15.2091 12 13H10C10 16.3137 12.6863 19 16 19V17ZM20 13C20 15.2091 18.2091 17 16 17V19C19.3137 19 22 16.3137 22 13H20ZM16 4C18.2091 4 20 5.79086 20 8H22C22 4.68629 19.3137 2 16 2V4ZM16 2C12.6863 2 10 4.68629 10 8H12C12 5.79086 13.7909 4 16 4V2ZM6.00195 14.0624C6.09611 15.5689 6.7059 17.7811 8.24207 19.6375C9.81064 21.5331 12.3011 23 16 23V21C12.8989 21 10.9727 19.8003 9.78293 18.3625C8.56077 16.8855 8.07056 15.0977 7.99805 13.9376L6.00195 14.0624ZM16 23C19.6989 23 22.1894 21.5331 23.7579 19.6375C25.2941 17.7811 25.9039 15.5689 25.9981 14.0624L24.0019 13.9376C23.9294 15.0977 23.4392 16.8855 22.2171 18.3625C21.0273 19.8003 19.1011 21 16 21V23ZM17 28V22H15V28H17ZM8 29H24V27H8V29Z'
+  ],
+}
+
+const settings: IconDefinition = {
+  prefix: 'fac' as IconPrefix,
+  iconName: 'settings' as IconName,
+  icon: [
+    16,
+    16,
+    [],
+    'e004',
+    'M14.9757 7.00154L13.2241 5.81525L13.6254 3.73557C13.7015 3.34893 13.5785 2.95057 13.3002 2.66938C13.019 2.39111 12.6207 2.26809 12.2399 2.34424L10.1632 2.74553L8.97979 0.990993C8.53749 0.3378 7.45958 0.3378 7.01728 0.990993L5.83392 2.74553L3.76011 2.34424C3.37053 2.27102 2.9751 2.39111 2.69684 2.67231C2.41857 2.9535 2.29555 3.34893 2.3717 3.73557L2.77299 5.81525L1.02138 7.00154C0.693322 7.22415 0.5 7.59029 0.5 7.98572C0.5 8.38115 0.696251 8.74729 1.02138 8.96697L2.77299 10.1533L2.3717 12.2329C2.29555 12.6196 2.41857 13.0179 2.69684 13.2962C2.9751 13.5745 3.3676 13.6975 3.76011 13.6213L5.83392 13.2201L7.01728 14.9746C7.23697 15.3027 7.60603 15.4989 7.99854 15.4989C8.39104 15.4989 8.76011 15.3027 8.97979 14.9775L10.1632 13.223L12.2399 13.6243C12.6324 13.7034 13.0249 13.5774 13.3032 13.2991C13.5814 13.0209 13.7015 12.6225 13.6283 12.2359L13.227 10.1562L14.9786 8.9699C15.3037 8.75022 15.5 8.38115 15.5 7.98865C15.4971 7.59029 15.3037 7.22415 14.9757 7.00154ZM11.6687 9.50886L12.1842 12.1802L9.51875 11.6647L7.99854 13.9172L6.47832 11.6618L3.81576 12.1773L4.33128 9.50593L2.08172 7.98279L4.33128 6.45965L3.81576 3.7883L6.48125 4.30382L7.99854 2.05426L9.51875 4.30675L12.1842 3.79123L11.6687 6.45965L13.9183 7.98279L11.6687 9.50886ZM7.99854 4.95409C6.32015 4.95409 4.95226 6.32198 4.95226 8.00037C4.95226 9.67875 6.32015 11.0466 7.99854 11.0466C9.67692 11.0466 11.0448 9.67875 11.0448 8.00037C11.0448 6.32198 9.67692 4.95409 7.99854 4.95409ZM7.99854 9.64067C7.09344 9.64067 6.35823 8.90546 6.35823 8.00037C6.35823 7.09527 7.09344 6.36006 7.99854 6.36006C8.90363 6.36006 9.63884 7.09527 9.63884 8.00037C9.63884 8.90546 8.90363 9.64067 7.99854 9.64067Z'
+  ],
+}
+
+const upload: IconDefinition = {
+  prefix: 'fac' as IconPrefix,
+  iconName: 'upload' as IconName,
+  icon: [
+    32,
+    32,
+    [],
+    'e005',
+    'M7 21V27H25V21M8 13L16 6M16 6L24 13M16 6V19',
+  ],
+}
+
+const ussd: IconDefinition = {
+  prefix: 'fac' as IconPrefix,
+  iconName: 'ussd' as IconName,
+  icon: [
+    32,
+    32,
+    [],
+    'e006',
+    'M17.9279 23.5201L18.6005 24.2601L18.6005 24.2601L17.9279 23.5201ZM13 28H12V30.2606L13.6727 28.7399L13 28ZM13 23H14V22H13V23ZM13.25 11C13.25 10.4477 12.8023 10 12.25 10C11.6977 10 11.25 10.4477 11.25 11H13.25ZM11.25 17.5C11.25 18.0523 11.6977 18.5 12.25 18.5C12.8023 18.5 13.25 18.0523 13.25 17.5H11.25ZM10.659 11.2448C10.2685 10.8543 9.63532 10.8543 9.2448 11.2448C8.85427 11.6353 8.85427 12.2685 9.2448 12.659L10.659 11.2448ZM13.841 17.2552C14.2315 17.6457 14.8647 17.6457 15.2552 17.2552C15.6457 16.8647 15.6457 16.2315 15.2552 15.841L13.841 17.2552ZM9 13.25C8.44772 13.25 8 13.6977 8 14.25C8 14.8023 8.44772 15.25 9 15.25V13.25ZM15.5 15.25C16.0523 15.25 16.5 14.8023 16.5 14.25C16.5 13.6977 16.0523 13.25 15.5 13.25V15.25ZM15.2552 12.659C15.6457 12.2685 15.6457 11.6353 15.2552 11.2448C14.8647 10.8543 14.2315 10.8543 13.841 11.2448L15.2552 12.659ZM9.24479 15.841C8.85427 16.2315 8.85427 16.8647 9.24479 17.2552C9.63532 17.6457 10.2685 17.6457 10.659 17.2552L9.24479 15.841ZM20.9884 11.1521C21.0724 10.6062 20.6979 10.0956 20.1521 10.0116C19.6062 9.92765 19.0956 10.3021 19.0116 10.8479L20.9884 11.1521ZM18.0116 17.3479C17.9276 17.8938 18.3021 18.4044 18.8479 18.4884C19.3938 18.5724 19.9044 18.1979 19.9884 17.6521L18.0116 17.3479ZM23.9884 11.1521C24.0724 10.6062 23.6979 10.0956 23.1521 10.0116C22.6062 9.92765 22.0956 10.3021 22.0116 10.8479L23.9884 11.1521ZM21.0116 17.3479C20.9276 17.8938 21.3021 18.4044 21.8479 18.4884C22.3938 18.5724 22.9044 18.1979 22.9884 17.6521L21.0116 17.3479ZM18 12C17.4477 12 17 12.4477 17 13C17 13.5523 17.4477 14 18 14V12ZM24 14C24.5523 14 25 13.5523 25 13C25 12.4477 24.5523 12 24 12V14ZM18 15C17.4477 15 17 15.4477 17 16C17 16.5523 17.4477 17 18 17V15ZM24 17C24.5523 17 25 16.5523 25 16C25 15.4477 24.5523 15 24 15V17ZM7 6H26V4H7V6ZM27 7V21H29V7H27ZM6 21V7H4V21H6ZM26 22H19.2732V24H26V22ZM4 21C4 22.6569 5.34315 24 7 24V22C6.44771 22 6 21.5523 6 21H4ZM27 21C27 21.5523 26.5523 22 26 22V24C27.6569 24 29 22.6569 29 21H27ZM26 6C26.5523 6 27 6.44772 27 7H29C29 5.34315 27.6569 4 26 4V6ZM7 4C5.34315 4 4 5.34315 4 7H6C6 6.44772 6.44772 6 7 6V4ZM17.2552 22.7802L12.3273 27.2601L13.6727 28.7399L18.6005 24.2601L17.2552 22.7802ZM14 28V23H12V28H14ZM19.2732 22C18.5269 22 17.8074 22.2782 17.2552 22.7802L18.6005 24.2601C18.7846 24.0927 19.0244 24 19.2732 24V22ZM11.25 11V14.25H13.25V11H11.25ZM11.25 14.25V17.5H13.25V14.25H11.25ZM9.2448 12.659L11.5429 14.9571L12.9571 13.5429L10.659 11.2448L9.2448 12.659ZM11.5429 14.9571L13.841 17.2552L15.2552 15.841L12.9571 13.5429L11.5429 14.9571ZM9 15.25H12.25V13.25H9V15.25ZM12.25 15.25H15.5V13.25H12.25V15.25ZM13.841 11.2448L11.5429 13.5429L12.9571 14.9571L15.2552 12.659L13.841 11.2448ZM11.5429 13.5429L9.24479 15.841L10.659 17.2552L12.9571 14.9571L11.5429 13.5429ZM19.0116 10.8479L18.7039 12.8479L20.6807 13.1521L20.9884 11.1521L19.0116 10.8479ZM18.7039 12.8479L18.2424 15.8479L20.2191 16.1521L20.6807 13.1521L18.7039 12.8479ZM18.2424 15.8479L18.0116 17.3479L19.9884 17.6521L20.2191 16.1521L18.2424 15.8479ZM22.0116 10.8479L21.7039 12.8479L23.6807 13.1521L23.9884 11.1521L22.0116 10.8479ZM21.7039 12.8479L21.2424 15.8479L23.2191 16.1521L23.6807 13.1521L21.7039 12.8479ZM21.2424 15.8479L21.0116 17.3479L22.9884 17.6521L23.2191 16.1521L21.2424 15.8479ZM18 14H19.6923V12H18V14ZM19.6923 14H22.6923V12H19.6923V14ZM22.6923 14H24V12H22.6923V14ZM18 17H19.2308V15H18V17ZM19.2308 17H22.2308V15H19.2308V17ZM22.2308 17H24V15H22.2308V17ZM13 22H7V24H13V22Z',
+  ],
+}
+
+export default [
+  audio,
+  enter,
+  recordAudio,
+  settings,
+  upload,
+  ussd,
+]
diff --git a/src/main.ts b/src/main.ts
index aae7fa3e0..e68dad831 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -17,13 +17,14 @@ import 'scss/main.scss'
  *
  */
 import {library} from '@fortawesome/fontawesome-svg-core'
-import {faCheckCircle} from '@fortawesome/free-solid-svg-icons'
-import {faCircle, faClone, faTrashAlt} from '@fortawesome/free-regular-svg-icons'
+import {faCheckCircle, faCheck, faMobileAlt} from '@fortawesome/free-solid-svg-icons'
+import {faCircle, faClone, faTrashAlt, faEdit, faEnvelope, faCommentDots} from '@fortawesome/free-regular-svg-icons'
 import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
+import CustomIcons from './lib/custom-icons/index'
 import router from './router'
 import App from './App.vue'
 
-library.add(faCircle, faCheckCircle, faClone, faTrashAlt)
+library.add(faCircle, faCheckCircle, faEdit, faCheck, faEnvelope, faMobileAlt, faCommentDots, faClone, faTrashAlt, ...CustomIcons)
 Vue.component('FontAwesomeIcon', FontAwesomeIcon)
 
 Vue.use(Vuex)

From a620530b2380362746169f9c8dc9aff444a04645 Mon Sep 17 00:00:00 2001
From: Pooja Patil <pooja.patil@viamo.io>
Date: Tue, 13 Jul 2021 14:31:58 -0700
Subject: [PATCH 17/22] VMO-4138 Fixed font weight + Icon sizes

---
 .../block-editors/BlockCodeEditor.vue                     | 6 +++---
 .../resource-editors/ResourceEditor.vue                   | 8 +++++---
 src/lib/custom-icons/index.ts                             | 2 +-
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/interaction-designer/block-editors/BlockCodeEditor.vue b/src/components/interaction-designer/block-editors/BlockCodeEditor.vue
index fe8506a1c..deda78088 100644
--- a/src/components/interaction-designer/block-editors/BlockCodeEditor.vue
+++ b/src/components/interaction-designer/block-editors/BlockCodeEditor.vue
@@ -4,7 +4,7 @@
       #input-control="{ isValid }"
       :message-key="`block/${block.uuid}/name`">
       <div v-if="editBlockName || isValid === false">
-        <label>{{ 'flow-builder.edit-block-code' | trans }}</label>
+        <h6>{{ 'flow-builder.edit-block-code' | trans }}</h6>
         <div class="d-flex">
           <small-text-editor
             v-model="blockName"
@@ -23,8 +23,8 @@
       </div>
       <div v-else class="d-flex justify-content-between">
         <div class="block-code align-self-center">
-          <strong>{{'flow-builder.code' | trans}}:</strong>
-          <span class=""> {{ blockName }} </span>
+          <h6 class="d-inline">{{'flow-builder.code' | trans}}:</h6>
+          <span> {{ blockName }} </span>
         </div>
         <span class="btn btn-primary btn-xs align-self-baseline ml-2" @click="editBlockName = true">
           <font-awesome-icon
diff --git a/src/components/interaction-designer/resource-editors/ResourceEditor.vue b/src/components/interaction-designer/resource-editors/ResourceEditor.vue
index 90149488f..784151a81 100644
--- a/src/components/interaction-designer/resource-editors/ResourceEditor.vue
+++ b/src/components/interaction-designer/resource-editors/ResourceEditor.vue
@@ -18,10 +18,9 @@
             :key="i"
             class="tab-content-style">
             <header class="d-flex">
-<!--              <svg-icon class="resource-icons" :icon="iconsMap.get(mode)" />-->
               <font-awesome-icon
                 :icon="iconsMap.get(mode)"
-                class="fa-btn resource-icons" />
+                :class="{'custom-icons': iconsMap.get(mode)[0] === 'fac', 'library-icons': iconsMap.get(mode)[0] !== 'fac'}" />
               <h6 class="ml-1">{{ `flow-builder.${mode.toLowerCase()}-content` | trans }}</h6>
             </header>
 
@@ -252,8 +251,11 @@ export default ResourceEditor
   font-size: small;
   flex-grow: 1;
 }
-.resource-icons {
+.custom-icons {
   height: 1.25em;
   width: 1.25em;
 }
+.library-icons {
+  margin-top: 2px;
+}
 </style>
diff --git a/src/lib/custom-icons/index.ts b/src/lib/custom-icons/index.ts
index a8a2a9ddf..603f438f7 100644
--- a/src/lib/custom-icons/index.ts
+++ b/src/lib/custom-icons/index.ts
@@ -60,7 +60,7 @@ const upload: IconDefinition = {
     32,
     [],
     'e005',
-    'M7 21V27H25V21M8 13L16 6M16 6L24 13M16 6V19',
+    'M15.3415 5.24742C15.7185 4.91753 16.2815 4.91753 16.6585 5.24742L24.6585 12.2474C25.0741 12.6111 25.1163 13.2429 24.7526 13.6585C24.3889 14.0741 23.7571 14.1163 23.3415 13.7526L17 8.20377V19C17 19.5523 16.5523 20 16 20C15.4477 20 15 19.5523 15 19V8.20377L8.6585 13.7526C8.24287 14.1163 7.61111 14.0741 7.24742 13.6585C6.88374 13.2429 6.92586 12.6111 7.3415 12.2474L15.3415 5.24742ZM7 20C7.55228 20 8 20.4477 8 21V26H24V21C24 20.4477 24.4477 20 25 20C25.5523 20 26 20.4477 26 21V27C26 27.5523 25.5523 28 25 28H7C6.44772 28 6 27.5523 6 27V21C6 20.4477 6.44772 20 7 20Z',
   ],
 }
 

From d953d66f1102033a1564000ee58c971f13bc18ae Mon Sep 17 00:00:00 2001
From: Pooja Patil <pooja.patil@viamo.io>
Date: Thu, 15 Jul 2021 11:29:13 -0700
Subject: [PATCH 18/22] VMO-4138 Updating components names as per spec

---
 src/components/common/SmallTextEditor.vue     |   2 +-
 .../block-editors/LabelEditor.vue             |  59 +++++----
 .../block-editors/NameEditor.vue              | 124 +++++++++++-------
 .../block-editors/TitleEditor.vue             |  58 --------
 .../MobilePrimitives_MessageBlock.vue         |  10 +-
 5 files changed, 116 insertions(+), 137 deletions(-)
 delete mode 100644 src/components/interaction-designer/block-editors/TitleEditor.vue

diff --git a/src/components/common/SmallTextEditor.vue b/src/components/common/SmallTextEditor.vue
index f36ce9bf9..22dfc7867 100644
--- a/src/components/common/SmallTextEditor.vue
+++ b/src/components/common/SmallTextEditor.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <label v-if="label">{{ label }}</label>
+    <h6 v-if="label">{{ label }}</h6>
     <input
       type="text"
       class="form-control w-100"
diff --git a/src/components/interaction-designer/block-editors/LabelEditor.vue b/src/components/interaction-designer/block-editors/LabelEditor.vue
index 4384e7f84..188f4fd2c 100644
--- a/src/components/interaction-designer/block-editors/LabelEditor.vue
+++ b/src/components/interaction-designer/block-editors/LabelEditor.vue
@@ -1,45 +1,60 @@
 <template>
-  <validation-message
-    #input-control="{ isValid }"
-    :message-key="`block/${block.uuid}/label`">
-    <div class="block-label">
-      <text-editor
-        v-model="label"
-        :label="'flow-builder.block-label' | trans"
-        :placeholder="'flow-builder.enter-block-label' | trans"
-        :valid-state="isValid" />
-    </div>
-  </validation-message>
+  <section class="mb-3">
+    <label class="text-primary">{{ 'flow-builder.title' | trans }}</label>
+    <validation-message
+      #input-control="{ isValid }"
+      :message-key="`block/${block.uuid}/label`">
+      <div class="d-flex">
+        <small-text-editor
+          v-model="blockLabel"
+          class="w-100"
+          :placeholder="'flow-builder.enter-title' | trans"
+          :valid-state="isValid" />
+        <span
+          class="btn btn-outline-primary btn-xs align-self-center ml-2"
+          @click="emitGearClickedEvent">
+          <font-awesome-icon
+            :icon="['fac', 'settings']"
+            class="fa-btn text-primary" />
+        </span>
+      </div>
+    </validation-message>
+  </section>
 </template>
 
 <script lang="ts">
-import TextEditor from '@/components/common/TextEditor.vue'
-import Lang from '@/lib/filters/lang'
 import {Component, Prop} from 'vue-property-decorator'
+import SmallTextEditor from '@/components/common/SmallTextEditor.vue'
+import ValidationMessage from '@/components/common/ValidationMessage.vue'
+import {mixins} from 'vue-class-component'
+import Lang from '@/lib/filters/lang'
 import {IBlock} from '@floip/flow-runner'
 import {namespace} from 'vuex-class'
-import {mixins} from 'vue-class-component'
-import ValidationMessage from '@/components/common/ValidationMessage.vue'
 
 const flowVuexNamespace = namespace('flow')
 
 @Component({
   components: {
-    TextEditor,
+    SmallTextEditor,
     ValidationMessage,
   },
 })
-export default class LabelEditor extends mixins(Lang) {
-  @Prop() block!: IBlock
+class LabelEditor extends mixins(Lang) {
+  @Prop() readonly block!: IBlock
 
-  get label(): IBlock['label'] {
-    return this.block.label
+  get blockLabel(): string {
+    return this.block.label ?? ''
   }
 
-  set label(value: IBlock['label']) {
+  set blockLabel(value: string) {
     this.block_setLabel({blockId: this.block.uuid, value})
   }
 
-  @flowVuexNamespace.Mutation block_setLabel!: ({blockId, value}: { blockId: IBlock['uuid'], value: IBlock['label'] }) => void
+  emitGearClickedEvent(): void {
+    this.$emit('gearClicked')
+  }
+
+  @flowVuexNamespace.Action block_setLabel!: ({blockId, value}: {blockId: string, value: string}) => void
 }
+export default LabelEditor
 </script>
diff --git a/src/components/interaction-designer/block-editors/NameEditor.vue b/src/components/interaction-designer/block-editors/NameEditor.vue
index f8a7be949..f18bd9d2c 100644
--- a/src/components/interaction-designer/block-editors/NameEditor.vue
+++ b/src/components/interaction-designer/block-editors/NameEditor.vue
@@ -1,58 +1,84 @@
 <template>
-  <validation-message
-    #input-control="{ isValid }"
-    :message-key="`block/${block.uuid}/name`">
-    <div class="block-name">
-      <text-editor
-        v-model="name"
-        :label="'flow-builder.block-name' | trans"
-        :placeholder="'flow-builder.enter-block-name' | trans"
-        :valid-state="isValid"
-        @keydown="filterName">
-        <small class="text-muted">
-          {{ 'flow-builder.only-accepts-word-characters' | trans }}
-        </small>
-      </text-editor>
-    </div>
-  </validation-message>
+  <div class="mt-3">
+    <validation-message
+      #input-control="{ isValid }"
+      :message-key="`block/${block.uuid}/name`">
+      <div v-if="editBlockName || isValid === false">
+        <h6>{{ 'flow-builder.edit-block-code' | trans }}</h6>
+        <div class="d-flex">
+          <small-text-editor
+            v-model="blockName"
+            class="w-100"
+            :placeholder="'flow-builder.enter-block-code' | trans"
+            :valid-state="isValid"
+            @keydown="filterName" />
+          <span
+            class="btn btn-primary btn-xs align-self-center ml-2"
+            @click="editBlockName = false">
+            <font-awesome-icon
+              :icon="['fas', 'check']"
+              class="fa-btn" />
+          </span>
+        </div>
+      </div>
+      <div v-else class="d-flex justify-content-between">
+        <div class="block-code align-self-center">
+          <h6 class="d-inline">{{'flow-builder.code' | trans}}:</h6>
+          <span> {{ blockName }} </span>
+        </div>
+        <span class="btn btn-primary btn-xs align-self-baseline ml-2" @click="editBlockName = true">
+          <font-awesome-icon
+            :icon="['far', 'edit']"
+            class="fa-btn" />
+        </span>
+      </div>
+    </validation-message>
+  </div>
 </template>
 
-<script lang="js">
-/* eslint-disable @typescript-eslint/explicit-module-boundary-types,@typescript-eslint/strict-boolean-expressions */
-import {mapMutations} from 'vuex'
-import TextEditor from '@/components/common/TextEditor'
-import {lang} from '@/lib/filters/lang'
-import ValidationMessage from '@/components/common/ValidationMessage'
+<script lang="ts">
+import {Component, Prop} from 'vue-property-decorator'
+import ValidationMessage from '@/components/common/ValidationMessage.vue'
+import {mixins} from 'vue-class-component'
+import Lang from '@/lib/filters/lang'
+import {IBlock} from '@floip/flow-runner'
+import {namespace} from 'vuex-class'
+import SmallTextEditor from '@/components/common/SmallTextEditor.vue'
 
-export default {
+const flowVuexNamespace = namespace('flow')
+
+@Component({
   components: {
-    TextEditor,
+    SmallTextEditor,
     ValidationMessage,
   },
-  mixins: [lang],
-  props: {
-    block: {
-      type: Object,
-      required: true,
-    },
-  },
-  computed: {
-    name: {
-      get() {
-        return this.block.name
-      },
-      set(value) {
-        this.block_setName({blockId: this.block.uuid, value})
-      },
-    },
-  },
-  methods: {
-    ...mapMutations('flow', ['block_setName']),
-    filterName(e) {
-      if (e.key.match(/\W+|Enter/g)) {
-        e.preventDefault()
-      }
-    },
-  },
+})
+class NameEditor extends mixins(Lang) {
+  editBlockName = false
+
+  @Prop() readonly block!: IBlock
+
+  get blockName(): string {
+    return this.block.name
+  }
+
+  set blockName(value: string) {
+    this.block_setName({blockId: this.block.uuid, value})
+  }
+
+  filterName(e: KeyboardEvent): void {
+    if (e.key.match(/\W+|Enter/g)) {
+      e.preventDefault()
+    }
+  }
+
+  @flowVuexNamespace.Mutation block_setName!: ({blockId, value}: {blockId: string, value: string}) => void
 }
+export default NameEditor
 </script>
+
+<style scoped>
+.block-code {
+  word-break: break-all;
+}
+</style>
diff --git a/src/components/interaction-designer/block-editors/TitleEditor.vue b/src/components/interaction-designer/block-editors/TitleEditor.vue
deleted file mode 100644
index 3b13e259c..000000000
--- a/src/components/interaction-designer/block-editors/TitleEditor.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-  <section class="mb-3">
-    <label class="text-primary">{{ 'flow-builder.title' | trans }}</label>
-    <validation-message
-      #input-control="{ isValid }"
-      :message-key="`block/${block.uuid}/label`">
-      <div class="d-flex">
-        <small-text-editor
-          class="w-100"
-          v-model="blockLabel"
-          :placeholder="'flow-builder.enter-title' | trans"
-          :valid-state="isValid"/>
-        <span class="btn btn-outline-primary btn-xs align-self-center ml-2" @click="emitGearClickedEvent">
-          <font-awesome-icon
-            :icon="['fac', 'settings']"
-            class="fa-btn text-primary" />
-        </span>
-      </div>
-    </validation-message>
-  </section>
-</template>
-
-<script lang="ts">
-import {Component, Prop} from 'vue-property-decorator'
-import SmallTextEditor from '@/components/common/SmallTextEditor.vue'
-import ValidationMessage from '@/components/common/ValidationMessage.vue'
-import {mixins} from 'vue-class-component'
-import Lang from '@/lib/filters/lang'
-import {IBlock} from '@floip/flow-runner'
-import {namespace} from 'vuex-class'
-
-const flowVuexNamespace = namespace('flow')
-
-@Component({
-  components: {
-    SmallTextEditor,
-    ValidationMessage,
-  },
-})
-class TitleEditor extends mixins(Lang) {
-  @Prop() readonly block!: IBlock
-
-  get blockLabel(): string {
-    return this.block.label ?? ''
-  }
-
-  set blockLabel(value: string) {
-    this.block_setLabel({blockId: this.block.uuid, value})
-  }
-
-  emitGearClickedEvent() {
-    this.$emit('gearClicked')
-  }
-
-  @flowVuexNamespace.Action block_setLabel!: ({blockId, value}: {blockId: string, value: string}) => void
-}
-export default TitleEditor
-</script>
diff --git a/src/components/interaction-designer/block-types/MobilePrimitives_MessageBlock.vue b/src/components/interaction-designer/block-types/MobilePrimitives_MessageBlock.vue
index ea70c407e..0f05b6114 100644
--- a/src/components/interaction-designer/block-types/MobilePrimitives_MessageBlock.vue
+++ b/src/components/interaction-designer/block-types/MobilePrimitives_MessageBlock.vue
@@ -5,9 +5,9 @@
     </h3>
 
     <fieldset :disabled="!isEditable">
-      <title-editor :block="block" @gearClicked="showSemanticLabel = !showSemanticLabel" />
+      <block-label-editor :block="block" @gearClicked="showSemanticLabel = !showSemanticLabel" />
       <block-semantic-label-editor v-if="showSemanticLabel" :block="block" />
-      <block-code-editor :block="block" />
+      <block-name-editor :block="block"  />
 
       <resource-editor
         v-if="promptResource"
@@ -37,8 +37,6 @@ import {createDefaultBlockTypeInstallerFor} from '@/store/builder'
 import {mixins} from 'vue-class-component'
 import ResourceEditor from '../resource-editors/ResourceEditor.vue'
 import BlockNameEditor from '../block-editors/NameEditor.vue'
-import TitleEditor from '../block-editors/TitleEditor.vue'
-import BlockCodeEditor from '../block-editors/BlockCodeEditor.vue'
 import BlockLabelEditor from '../block-editors/LabelEditor.vue'
 import BlockSemanticLabelEditor from '../block-editors/SemanticLabelEditor.vue'
 import FirstBlockEditorButton from '../flow-editors/FirstBlockEditorButton.vue'
@@ -49,14 +47,12 @@ const builderVuexNamespace = namespace('builder')
 
 @Component({
   components: {
-    ResourceEditor,
     BlockNameEditor,
     BlockLabelEditor,
     BlockSemanticLabelEditor,
+    ResourceEditor,
     FirstBlockEditorButton,
     BlockId,
-    TitleEditor,
-    BlockCodeEditor,
   },
 })
 class MobilePrimitives_MessageBlock extends mixins(Lang) {

From 542e3d2d1efb1ae29cf9cf0e785c7a5032528b63 Mon Sep 17 00:00:00 2001
From: Pooja Patil <pooja.patil@viamo.io>
Date: Thu, 15 Jul 2021 11:59:12 -0700
Subject: [PATCH 19/22] VMO-4138 Updating name + label and semantic label for
 all block types

---
 .../block-types/ConsoleIO_PrintBlock.vue               | 10 ++++++++--
 .../block-types/ConsoleIO_ReadBlock.vue                | 10 ++++++++--
 .../block-types/Core_CaseBlock.vue                     | 10 ++++++++--
 .../interaction-designer/block-types/Core_LogBlock.vue | 10 ++++++++--
 .../block-types/Core_OutputBlock.vue                   | 10 ++++++++--
 .../block-types/Core_RunFlowBlock.vue                  | 10 ++++++++--
 .../block-types/Core_SetContactPropertyBlock.vue       | 10 ++++++++--
 .../block-types/Core_SetGroupMembershipBlock.vue       | 10 ++++++++--
 .../block-types/MobilePrimitives_MessageBlock.vue      | 10 +++++++---
 .../MobilePrimitives_NumericResponseBlock.vue          | 10 ++++++++--
 .../block-types/MobilePrimitives_OpenResponseBlock.vue | 10 ++++++++--
 .../MobilePrimitives_SelectManyResponseBlock.vue       | 10 ++++++++--
 .../MobilePrimitives_SelectOneResponseBlock.vue        | 10 ++++++++--
 .../block-types/SmartDevices_LocationResponseBlock.vue | 10 ++++++++--
 .../block-types/SmartDevices_PhotoResponseBlock.vue    | 10 ++++++++--
 15 files changed, 119 insertions(+), 31 deletions(-)

diff --git a/src/components/interaction-designer/block-types/ConsoleIO_PrintBlock.vue b/src/components/interaction-designer/block-types/ConsoleIO_PrintBlock.vue
index 6fa8a3db6..b336a0ec0 100644
--- a/src/components/interaction-designer/block-types/ConsoleIO_PrintBlock.vue
+++ b/src/components/interaction-designer/block-types/ConsoleIO_PrintBlock.vue
@@ -5,9 +5,13 @@
     </h3>
 
     <fieldset :disabled="!isEditable">
+      <block-label-editor
+        :block="block"
+        @gearClicked="showSemanticLabel = !showSemanticLabel" />
+      <block-semantic-label-editor
+        v-if="showSemanticLabel"
+        :block="block" />
       <block-name-editor :block="block" />
-      <block-label-editor :block="block" />
-      <block-semantic-label-editor :block="block" />
 
       <resource-editor
         v-if="promptResource"
@@ -61,6 +65,8 @@ class ConsoleIO_PrintBlock extends mixins(Lang) {
 
   @Prop() readonly flow!: IFlow
 
+  showSemanticLabel = false
+
   get promptResource(): IResource {
     return this.resourcesByUuid[this.block.config.message]
   }
diff --git a/src/components/interaction-designer/block-types/ConsoleIO_ReadBlock.vue b/src/components/interaction-designer/block-types/ConsoleIO_ReadBlock.vue
index bd36f94ea..c7baaf3f9 100644
--- a/src/components/interaction-designer/block-types/ConsoleIO_ReadBlock.vue
+++ b/src/components/interaction-designer/block-types/ConsoleIO_ReadBlock.vue
@@ -5,9 +5,13 @@
     </h3>
 
     <fieldset :disabled="!isEditable">
+      <block-label-editor
+        :block="block"
+        @gearClicked="showSemanticLabel = !showSemanticLabel" />
+      <block-semantic-label-editor
+        v-if="showSemanticLabel"
+        :block="block" />
       <block-name-editor :block="block" />
-      <block-label-editor :block="block" />
-      <block-semantic-label-editor :block="block" />
 
       <!--Specific config-->
       <block-format-string-editor
@@ -82,6 +86,8 @@ class ConsoleIO_ReadBlock extends mixins(Lang) {
 
   @Prop() readonly declare flow: IFlow
 
+  showSemanticLabel = false
+
   filterVariableName(e: any) {
     if (e.key.match(/\W+|Enter/g)) {
       e.preventDefault()
diff --git a/src/components/interaction-designer/block-types/Core_CaseBlock.vue b/src/components/interaction-designer/block-types/Core_CaseBlock.vue
index 9f98ca0bf..a5931058c 100644
--- a/src/components/interaction-designer/block-types/Core_CaseBlock.vue
+++ b/src/components/interaction-designer/block-types/Core_CaseBlock.vue
@@ -5,9 +5,13 @@
     </h3>
 
     <fieldset :disabled="!isEditable">
+      <block-label-editor
+        :block="block"
+        @gearClicked="showSemanticLabel = !showSemanticLabel" />
+      <block-semantic-label-editor
+        v-if="showSemanticLabel"
+        :block="block" />
       <block-name-editor :block="block" />
-      <block-label-editor :block="block" />
-      <block-semantic-label-editor :block="block" />
 
       <div
         v-for="(exit,i) in exits"
@@ -71,6 +75,8 @@ class Core_CaseBlock extends mixins(Lang) {
 
   @Prop() readonly flow!: IFlow
 
+  showSemanticLabel = false
+
   get exits(): IBlockExitTestRequired[] {
     return this.block.exits
   }
diff --git a/src/components/interaction-designer/block-types/Core_LogBlock.vue b/src/components/interaction-designer/block-types/Core_LogBlock.vue
index b0ba06b33..0fbad5aba 100644
--- a/src/components/interaction-designer/block-types/Core_LogBlock.vue
+++ b/src/components/interaction-designer/block-types/Core_LogBlock.vue
@@ -4,9 +4,13 @@
       {{ 'flow-builder.edit-block-type' | trans({block_type: trans(`flow-builder.${block.type}`)}) }}
     </h3>
     <fieldset :disabled="!isEditable">
+      <block-label-editor
+        :block="block"
+        @gearClicked="showSemanticLabel = !showSemanticLabel" />
+      <block-semantic-label-editor
+        v-if="showSemanticLabel"
+        :block="block" />
       <block-name-editor :block="block" />
-      <block-label-editor :block="block" />
-      <block-semantic-label-editor :block="block" />
 
       <div class="text-only-resource-editor">
         <hr>
@@ -80,6 +84,8 @@ class Core_LogBlock extends mixins(Lang) {
 
   @Prop() readonly flow!: IFlow
 
+  showSemanticLabel = false
+
   findOrGenerateStubbedVariantOn = findOrGenerateStubbedVariantOn
 
   get messageResource(): IResource {
diff --git a/src/components/interaction-designer/block-types/Core_OutputBlock.vue b/src/components/interaction-designer/block-types/Core_OutputBlock.vue
index 1bbece8d8..2b7a10b83 100644
--- a/src/components/interaction-designer/block-types/Core_OutputBlock.vue
+++ b/src/components/interaction-designer/block-types/Core_OutputBlock.vue
@@ -5,9 +5,13 @@
     </h3>
 
     <fieldset :disabled="!isEditable">
+      <block-label-editor
+        :block="block"
+        @gearClicked="showSemanticLabel = !showSemanticLabel" />
+      <block-semantic-label-editor
+        v-if="showSemanticLabel"
+        :block="block" />
       <block-name-editor :block="block" />
-      <block-label-editor :block="block" />
-      <block-semantic-label-editor :block="block" />
 
       <validation-message
         #input-control="{ isValid }"
@@ -65,6 +69,8 @@ class Core_OutputBlock extends mixins(Lang) {
 
   @Prop() readonly flow!: IFlow
 
+  showSemanticLabel = false
+
   get value(): string {
     return this.block.config.value || ''
   }
diff --git a/src/components/interaction-designer/block-types/Core_RunFlowBlock.vue b/src/components/interaction-designer/block-types/Core_RunFlowBlock.vue
index e0f90d876..6cc34bd3f 100644
--- a/src/components/interaction-designer/block-types/Core_RunFlowBlock.vue
+++ b/src/components/interaction-designer/block-types/Core_RunFlowBlock.vue
@@ -4,9 +4,13 @@
       {{ 'flow-builder.edit-block-type' | trans({block_type: trans(`flow-builder.${block.type}`)}) }}
     </h3>
     <fieldset :disabled="!isEditable">
+      <block-label-editor
+        :block="block"
+        @gearClicked="showSemanticLabel = !showSemanticLabel" />
+      <block-semantic-label-editor
+        v-if="showSemanticLabel"
+        :block="block" />
       <block-name-editor :block="block" />
-      <block-label-editor :block="block" />
-      <block-semantic-label-editor :block="block" />
 
       <validation-message
         #input-control="{ isValid }"
@@ -74,6 +78,8 @@ class Core_RunAnotherFlowBlock extends mixins(Lang) {
 
   @Prop() readonly flow!: IFlow
 
+  showSemanticLabel = false
+
   get destinationFlowId(): string {
     return this.block.config.flow_id
   }
diff --git a/src/components/interaction-designer/block-types/Core_SetContactPropertyBlock.vue b/src/components/interaction-designer/block-types/Core_SetContactPropertyBlock.vue
index d55afdffd..a0363eb41 100644
--- a/src/components/interaction-designer/block-types/Core_SetContactPropertyBlock.vue
+++ b/src/components/interaction-designer/block-types/Core_SetContactPropertyBlock.vue
@@ -5,9 +5,13 @@
     </h3>
 
     <fieldset :disabled="!isEditable">
+      <block-label-editor
+        :block="block"
+        @gearClicked="showSemanticLabel = !showSemanticLabel" />
+      <block-semantic-label-editor
+        v-if="showSemanticLabel"
+        :block="block" />
       <block-name-editor :block="block" />
-      <block-label-editor :block="block" />
-      <block-semantic-label-editor :block="block" />
 
       <contact-property-selector :block="block" />
       <validation-message
@@ -68,6 +72,8 @@ class Core_SetContactPropertyBlock extends mixins(Lang) {
   @Prop() readonly block!: IBlock
   @Prop() readonly flow!: IFlow
 
+  showSemanticLabel = false
+
   get propertyValue(): string {
     return get(this.block, 'config.set_contact_property.property_value', '')
   }
diff --git a/src/components/interaction-designer/block-types/Core_SetGroupMembershipBlock.vue b/src/components/interaction-designer/block-types/Core_SetGroupMembershipBlock.vue
index 80b77b7d5..046ef3231 100644
--- a/src/components/interaction-designer/block-types/Core_SetGroupMembershipBlock.vue
+++ b/src/components/interaction-designer/block-types/Core_SetGroupMembershipBlock.vue
@@ -5,9 +5,13 @@
     </h3>
 
     <fieldset :disabled="!isEditable">
+      <block-label-editor
+        :block="block"
+        @gearClicked="showSemanticLabel = !showSemanticLabel" />
+      <block-semantic-label-editor
+        v-if="showSemanticLabel"
+        :block="block" />
       <block-name-editor :block="block" />
-      <block-label-editor :block="block" />
-      <block-semantic-label-editor :block="block" />
 
       <validation-message
         #input-control="{ isValid: isValid }"
@@ -84,6 +88,8 @@ class Core_SetGroupMembershipBlock extends mixins(Lang) {
   @Prop() readonly block!: IBlock
   @Prop() readonly flow!: IFlow
 
+  showSemanticLabel = false
+
   actionsList: IGroupActionOption[] = [
     {
       id: ADD_KEY,
diff --git a/src/components/interaction-designer/block-types/MobilePrimitives_MessageBlock.vue b/src/components/interaction-designer/block-types/MobilePrimitives_MessageBlock.vue
index 0f05b6114..6737e3286 100644
--- a/src/components/interaction-designer/block-types/MobilePrimitives_MessageBlock.vue
+++ b/src/components/interaction-designer/block-types/MobilePrimitives_MessageBlock.vue
@@ -5,9 +5,13 @@
     </h3>
 
     <fieldset :disabled="!isEditable">
-      <block-label-editor :block="block" @gearClicked="showSemanticLabel = !showSemanticLabel" />
-      <block-semantic-label-editor v-if="showSemanticLabel" :block="block" />
-      <block-name-editor :block="block"  />
+      <block-label-editor
+        :block="block"
+        @gearClicked="showSemanticLabel = !showSemanticLabel" />
+      <block-semantic-label-editor
+        v-if="showSemanticLabel"
+        :block="block" />
+      <block-name-editor :block="block" />
 
       <resource-editor
         v-if="promptResource"
diff --git a/src/components/interaction-designer/block-types/MobilePrimitives_NumericResponseBlock.vue b/src/components/interaction-designer/block-types/MobilePrimitives_NumericResponseBlock.vue
index e7a7fb782..b64822969 100644
--- a/src/components/interaction-designer/block-types/MobilePrimitives_NumericResponseBlock.vue
+++ b/src/components/interaction-designer/block-types/MobilePrimitives_NumericResponseBlock.vue
@@ -5,9 +5,13 @@
     </h3>
 
     <fieldset :disabled="!isEditable">
+      <block-label-editor
+        :block="block"
+        @gearClicked="showSemanticLabel = !showSemanticLabel" />
+      <block-semantic-label-editor
+        v-if="showSemanticLabel"
+        :block="block" />
       <block-name-editor :block="block" />
-      <block-label-editor :block="block" />
-      <block-semantic-label-editor :block="block" />
 
       <block-minimum-numeric-editor
         :block="block"
@@ -78,6 +82,8 @@ class MobilePrimitives_NumericResponseBlock extends mixins(Lang) {
 
   @Prop() readonly flow!: IFlow
 
+  showSemanticLabel = false
+
   get promptResource(): IResource {
     return this.resourcesByUuid[this.block.config.prompt]
   }
diff --git a/src/components/interaction-designer/block-types/MobilePrimitives_OpenResponseBlock.vue b/src/components/interaction-designer/block-types/MobilePrimitives_OpenResponseBlock.vue
index 41dc84082..6370fc77d 100644
--- a/src/components/interaction-designer/block-types/MobilePrimitives_OpenResponseBlock.vue
+++ b/src/components/interaction-designer/block-types/MobilePrimitives_OpenResponseBlock.vue
@@ -5,9 +5,13 @@
     </h3>
 
     <fieldset :disabled="!isEditable">
+      <block-label-editor
+        :block="block"
+        @gearClicked="showSemanticLabel = !showSemanticLabel" />
+      <block-semantic-label-editor
+        v-if="showSemanticLabel"
+        :block="block" />
       <block-name-editor :block="block" />
-      <block-label-editor :block="block" />
-      <block-semantic-label-editor :block="block" />
 
       <block-max-duration-seconds-editor
         :block="block"
@@ -73,6 +77,8 @@ class MobilePrimitives_OpenResponseBlock extends mixins(Lang) {
 
   @Prop() readonly flow!: IFlow
 
+  showSemanticLabel = false
+
   get promptResource(): IResource {
     return this.resourcesByUuid[this.block.config.prompt]
   }
diff --git a/src/components/interaction-designer/block-types/MobilePrimitives_SelectManyResponseBlock.vue b/src/components/interaction-designer/block-types/MobilePrimitives_SelectManyResponseBlock.vue
index 3fa70f52f..5c971798c 100644
--- a/src/components/interaction-designer/block-types/MobilePrimitives_SelectManyResponseBlock.vue
+++ b/src/components/interaction-designer/block-types/MobilePrimitives_SelectManyResponseBlock.vue
@@ -4,9 +4,13 @@
       {{ 'flow-builder.edit-block-type' | trans({block_type: trans(`flow-builder.${block.type}`)}) }}
     </h3>
     <fieldset :disabled="!isEditable">
+      <block-label-editor
+        :block="block"
+        @gearClicked="showSemanticLabel = !showSemanticLabel" />
+      <block-semantic-label-editor
+        v-if="showSemanticLabel"
+        :block="block" />
       <block-name-editor :block="block" />
-      <block-label-editor :block="block" />
-      <block-semantic-label-editor :block="block" />
 
       <div class="prompt-resource">
         <resource-editor
@@ -97,6 +101,8 @@ const builderVuexNamespace = namespace('builder')
   },
 })
 export class MobilePrimitives_SelectManyResponseBlock extends SelectOneResponseBlock {
+  showSemanticLabel = false
+
   //Important: Even we extends from SelectOneResponseBlock, to avoid conflict we SHOULD re-declare @blockVuexNamespace based getter, state, action, mutation
   @blockVuexNamespace.Getter declare inflatedChoices?: { [key: string]: IResource }
   @blockVuexNamespace.State declare inflatedEmptyChoice?: { [key: string]: IResource }
diff --git a/src/components/interaction-designer/block-types/MobilePrimitives_SelectOneResponseBlock.vue b/src/components/interaction-designer/block-types/MobilePrimitives_SelectOneResponseBlock.vue
index e678512d9..7fb8b121c 100644
--- a/src/components/interaction-designer/block-types/MobilePrimitives_SelectOneResponseBlock.vue
+++ b/src/components/interaction-designer/block-types/MobilePrimitives_SelectOneResponseBlock.vue
@@ -5,9 +5,13 @@
     </h3>
 
     <fieldset :disabled="!isEditable">
+      <block-label-editor
+        :block="block"
+        @gearClicked="showSemanticLabel = !showSemanticLabel" />
+      <block-semantic-label-editor
+        v-if="showSemanticLabel"
+        :block="block" />
       <block-name-editor :block="block" />
-      <block-label-editor :block="block" />
-      <block-semantic-label-editor :block="block" />
 
       <div class="prompt-resource">
         <resource-editor
@@ -106,6 +110,8 @@ export class MobilePrimitives_SelectOneResponseBlock extends mixins(Lang) {
 
   @Prop() readonly flow!: IFlow
 
+  showSemanticLabel = false
+
   get promptResource(): IResource {
     return this.resourcesByUuid[this.block.config.prompt]
   }
diff --git a/src/components/interaction-designer/block-types/SmartDevices_LocationResponseBlock.vue b/src/components/interaction-designer/block-types/SmartDevices_LocationResponseBlock.vue
index 920dafb01..e7b0bee32 100644
--- a/src/components/interaction-designer/block-types/SmartDevices_LocationResponseBlock.vue
+++ b/src/components/interaction-designer/block-types/SmartDevices_LocationResponseBlock.vue
@@ -5,9 +5,13 @@
     </h3>
 
     <fieldset :disabled="!isEditable">
+      <block-label-editor
+        :block="block"
+        @gearClicked="showSemanticLabel = !showSemanticLabel" />
+      <block-semantic-label-editor
+        v-if="showSemanticLabel"
+        :block="block" />
       <block-name-editor :block="block" />
-      <block-label-editor :block="block" />
-      <block-semantic-label-editor :block="block" />
 
       <block-threshold-editor
         :block="block"
@@ -66,6 +70,8 @@ class SmartDevices_LocationResponseBlock extends mixins(Lang) {
   // @Prop()readonly block!: ILocationResponseBlock
   @Prop() readonly flow!: IFlow
 
+  showSemanticLabel = false
+
   updateThreshold(value: number) {
     this.setAccuracyThreshold({blockId: this.block.uuid, value})
   }
diff --git a/src/components/interaction-designer/block-types/SmartDevices_PhotoResponseBlock.vue b/src/components/interaction-designer/block-types/SmartDevices_PhotoResponseBlock.vue
index 7c2b8fedf..68932a754 100644
--- a/src/components/interaction-designer/block-types/SmartDevices_PhotoResponseBlock.vue
+++ b/src/components/interaction-designer/block-types/SmartDevices_PhotoResponseBlock.vue
@@ -4,9 +4,13 @@
       {{ 'flow-builder.edit-block-type' | trans({block_type: trans(`flow-builder.${block.type}`)}) }}
     </h3>
     <fieldset :disabled="!isEditable">
+      <block-label-editor
+        :block="block"
+        @gearClicked="showSemanticLabel = !showSemanticLabel" />
+      <block-semantic-label-editor
+        v-if="showSemanticLabel"
+        :block="block" />
       <block-name-editor :block="block" />
-      <block-label-editor :block="block" />
-      <block-semantic-label-editor :block="block" />
 
       <slot name="extras" />
       <first-block-editor-button
@@ -53,6 +57,8 @@ class SmartDevices_PhotoResponseBlock extends mixins(Lang) {
 
   @Prop() readonly flow!: IFlow
 
+  showSemanticLabel = false
+
   @flowVuexNamespace.Getter resourcesByUuid!: { [key: string]: IResource }
 
   @builderVuexNamespace.Getter isEditable !: boolean

From b17c64dbbd9718579cb1ec783ab16b85e66aeeee Mon Sep 17 00:00:00 2001
From: Pooja Patil <pooja.patil@viamo.io>
Date: Thu, 15 Jul 2021 13:54:30 -0700
Subject: [PATCH 20/22] VMO-4138 Modifying Text Editor + Removed Small text
 editor

---
 package.json                                  |  1 -
 src/components/common/SmallTextEditor.vue     | 44 ----------
 src/components/common/TextEditor.vue          |  8 +-
 .../block-editors/BlockCodeEditor.vue         | 84 -------------------
 .../block-editors/LabelEditor.vue             |  7 +-
 .../block-editors/NameEditor.vue              |  7 +-
 .../block-editors/SemanticLabelEditor.vue     |  7 +-
 yarn.lock                                     | 30 ++-----
 8 files changed, 26 insertions(+), 162 deletions(-)
 delete mode 100644 src/components/common/SmallTextEditor.vue
 delete mode 100644 src/components/interaction-designer/block-editors/BlockCodeEditor.vue

diff --git a/package.json b/package.json
index 96e13f4f7..d73468c3f 100644
--- a/package.json
+++ b/package.json
@@ -99,7 +99,6 @@
     "node-sass": "^4.14.1",
     "sass-loader": "^8.0.2",
     "storybook-vue-router": "^1.0.7",
-    "svg-inline-loader": "^0.8.2",
     "ts-jest": "^27.0.3",
     "ts-vue-plugin": "^0.1.3",
     "typescript": "~4.3.4",
diff --git a/src/components/common/SmallTextEditor.vue b/src/components/common/SmallTextEditor.vue
deleted file mode 100644
index 22dfc7867..000000000
--- a/src/components/common/SmallTextEditor.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-  <div>
-    <h6 v-if="label">{{ label }}</h6>
-    <input
-      type="text"
-      class="form-control w-100"
-      :class="{ 'is-invalid': isInvalid }"
-      :placeholder="placeholder"
-      :value="value"
-      @keydown="$emit('keydown', $event)"
-      @input="$emit('input', $event.target.value)" />
-    <slot />
-  </div>
-</template>
-
-<script lang="js">
-/* eslint-disable @typescript-eslint/explicit-module-boundary-types,@typescript-eslint/strict-boolean-expressions */
-export default {
-  props: {
-    label: {
-      type: [String, Number],
-      required: false,
-    },
-    placeholder: {
-      type: String,
-      required: true,
-    },
-    value: {
-      type: String,
-      required: true,
-    },
-    validState: {
-      type: Boolean,
-      default: null,
-      required: false,
-    },
-  },
-  computed: {
-    isInvalid() {
-      return this.validState === false
-    },
-  },
-}
-</script>
diff --git a/src/components/common/TextEditor.vue b/src/components/common/TextEditor.vue
index 977d1172f..59680cc59 100644
--- a/src/components/common/TextEditor.vue
+++ b/src/components/common/TextEditor.vue
@@ -1,11 +1,12 @@
 <template>
   <div>
-    <label v-if="label">{{ label }}</label>
+    <h6 v-if="label">{{ label }}</h6>
     <textarea
       class="form-control"
       :class="{ 'is-invalid': isInvalid }"
       :placeholder="placeholder"
       :value="value"
+      :rows="rows"
       @keydown="$emit('keydown', $event)"
       @input="$emit('input', $event.target.value)" />
     <slot />
@@ -33,6 +34,11 @@ export default {
       default: null,
       required: false,
     },
+    rows: {
+      type: Number,
+      required: false,
+      default: 1,
+    },
   },
   computed: {
     isInvalid() {
diff --git a/src/components/interaction-designer/block-editors/BlockCodeEditor.vue b/src/components/interaction-designer/block-editors/BlockCodeEditor.vue
deleted file mode 100644
index deda78088..000000000
--- a/src/components/interaction-designer/block-editors/BlockCodeEditor.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <div class="mt-3">
-    <validation-message
-      #input-control="{ isValid }"
-      :message-key="`block/${block.uuid}/name`">
-      <div v-if="editBlockName || isValid === false">
-        <h6>{{ 'flow-builder.edit-block-code' | trans }}</h6>
-        <div class="d-flex">
-          <small-text-editor
-            v-model="blockName"
-            class="w-100"
-            :placeholder="'flow-builder.enter-block-code' | trans"
-            :valid-state="isValid"
-            @keydown="filterName" />
-          <span
-            class="btn btn-primary btn-xs align-self-center ml-2"
-            @click="editBlockName = false">
-            <font-awesome-icon
-              :icon="['fas', 'check']"
-              class="fa-btn" />
-          </span>
-        </div>
-      </div>
-      <div v-else class="d-flex justify-content-between">
-        <div class="block-code align-self-center">
-          <h6 class="d-inline">{{'flow-builder.code' | trans}}:</h6>
-          <span> {{ blockName }} </span>
-        </div>
-        <span class="btn btn-primary btn-xs align-self-baseline ml-2" @click="editBlockName = true">
-          <font-awesome-icon
-            :icon="['far', 'edit']"
-            class="fa-btn" />
-        </span>
-      </div>
-    </validation-message>
-  </div>
-</template>
-
-<script lang="ts">
-import {Component, Prop} from 'vue-property-decorator'
-import ValidationMessage from '@/components/common/ValidationMessage.vue'
-import {mixins} from 'vue-class-component'
-import Lang from '@/lib/filters/lang'
-import {IBlock} from '@floip/flow-runner'
-import {namespace} from 'vuex-class'
-import SmallTextEditor from '@/components/common/SmallTextEditor.vue'
-
-const flowVuexNamespace = namespace('flow')
-
-@Component({
-  components: {
-    SmallTextEditor,
-    ValidationMessage,
-  },
-})
-class BlockCodeEditor extends mixins(Lang) {
-  editBlockName = false
-
-  @Prop() readonly block!: IBlock
-
-  get blockName(): string {
-    return this.block.name
-  }
-
-  set blockName(value: string) {
-    this.block_setName({blockId: this.block.uuid, value})
-  }
-
-  filterName(e: KeyboardEvent): void {
-    if (e.key.match(/\W+|Enter/g)) {
-      e.preventDefault()
-    }
-  }
-
-  @flowVuexNamespace.Mutation block_setName!: ({blockId, value}: {blockId: string, value: string}) => void
-}
-export default BlockCodeEditor
-</script>
-
-<style scoped>
-.block-code {
-  word-break: break-all;
-}
-</style>
diff --git a/src/components/interaction-designer/block-editors/LabelEditor.vue b/src/components/interaction-designer/block-editors/LabelEditor.vue
index 188f4fd2c..ff6a81342 100644
--- a/src/components/interaction-designer/block-editors/LabelEditor.vue
+++ b/src/components/interaction-designer/block-editors/LabelEditor.vue
@@ -5,9 +5,10 @@
       #input-control="{ isValid }"
       :message-key="`block/${block.uuid}/label`">
       <div class="d-flex">
-        <small-text-editor
+        <text-editor
           v-model="blockLabel"
           class="w-100"
+          :label="''"
           :placeholder="'flow-builder.enter-title' | trans"
           :valid-state="isValid" />
         <span
@@ -24,7 +25,7 @@
 
 <script lang="ts">
 import {Component, Prop} from 'vue-property-decorator'
-import SmallTextEditor from '@/components/common/SmallTextEditor.vue'
+import TextEditor from '@/components/common/TextEditor.vue'
 import ValidationMessage from '@/components/common/ValidationMessage.vue'
 import {mixins} from 'vue-class-component'
 import Lang from '@/lib/filters/lang'
@@ -35,7 +36,7 @@ const flowVuexNamespace = namespace('flow')
 
 @Component({
   components: {
-    SmallTextEditor,
+    TextEditor,
     ValidationMessage,
   },
 })
diff --git a/src/components/interaction-designer/block-editors/NameEditor.vue b/src/components/interaction-designer/block-editors/NameEditor.vue
index f18bd9d2c..0049842d0 100644
--- a/src/components/interaction-designer/block-editors/NameEditor.vue
+++ b/src/components/interaction-designer/block-editors/NameEditor.vue
@@ -6,9 +6,10 @@
       <div v-if="editBlockName || isValid === false">
         <h6>{{ 'flow-builder.edit-block-code' | trans }}</h6>
         <div class="d-flex">
-          <small-text-editor
+          <text-editor
             v-model="blockName"
             class="w-100"
+            :label="''"
             :placeholder="'flow-builder.enter-block-code' | trans"
             :valid-state="isValid"
             @keydown="filterName" />
@@ -43,13 +44,13 @@ import {mixins} from 'vue-class-component'
 import Lang from '@/lib/filters/lang'
 import {IBlock} from '@floip/flow-runner'
 import {namespace} from 'vuex-class'
-import SmallTextEditor from '@/components/common/SmallTextEditor.vue'
+import TextEditor from '@/components/common/TextEditor.vue'
 
 const flowVuexNamespace = namespace('flow')
 
 @Component({
   components: {
-    SmallTextEditor,
+    TextEditor,
     ValidationMessage,
   },
 })
diff --git a/src/components/interaction-designer/block-editors/SemanticLabelEditor.vue b/src/components/interaction-designer/block-editors/SemanticLabelEditor.vue
index 8c182ed03..8a0e37631 100644
--- a/src/components/interaction-designer/block-editors/SemanticLabelEditor.vue
+++ b/src/components/interaction-designer/block-editors/SemanticLabelEditor.vue
@@ -3,7 +3,7 @@
     #input-control="{ isValid }"
     :message-key="`block/${block.uuid}/semantic_label`">
     <div class="block-semantic-label">
-      <small-text-editor
+      <text-editor
         v-model="semanticLabel"
         :label="'flow-builder.block-exit-semantic-label' | trans"
         :placeholder="'flow-builder.enter-block-semantic-label' | trans"
@@ -15,14 +15,13 @@
 <script lang="js">
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types,@typescript-eslint/strict-boolean-expressions */
 import {mapMutations} from 'vuex'
-import TextEditor from '@/components/common/TextEditor'
 import {lang} from '@/lib/filters/lang'
 import ValidationMessage from '@/components/common/ValidationMessage'
-import SmallTextEditor from '@/components/common/SmallTextEditor'
+import TextEditor from '@/components/common/TextEditor'
 
 export default {
   components: {
-    SmallTextEditor,
+    TextEditor,
     ValidationMessage,
   },
   mixins: [lang],
diff --git a/yarn.lock b/yarn.lock
index e5c92d5db..e74440ebf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1646,14 +1646,6 @@
   resolved "https://registry.yarnpkg.com/@exodus/schemasafe/-/schemasafe-1.0.0-rc.3.tgz#dda2fbf3dafa5ad8c63dadff7e01d3fdf4736025"
   integrity sha512-GoXw0U2Qaa33m3eUcxuHnHpNvHjNlLo0gtV091XBpaRINaB4X6FGCG5XKxSFNFiPpugUDqNruHzaqpTdDm4AOg==
 
-"@floip/expression-evaluator@^2.1.3":
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/@floip/expression-evaluator/-/expression-evaluator-2.1.4.tgz#ef4647f2d7140ac5841ab669945d7601588e43ab"
-  integrity sha512-WahhLzof0HcAldBbLswc9mMQZbnWxrqmZNOuUbQjwAbGNV8C9TihzescECtWsGcNvGAROVr5alIa434gSnqNGA==
-  dependencies:
-    "@floip/expression-parser" "^1.10.0"
-    moment "^2.24.0"
-
 "@floip/expression-evaluator@^2.1.0":
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/@floip/expression-evaluator/-/expression-evaluator-2.1.0.tgz#925d289ba4763df452f6e555005aa3fac117f6ca"
@@ -1662,6 +1654,14 @@
     "@floip/expression-parser" "^1.10.0"
     moment "^2.24.0"
 
+"@floip/expression-evaluator@^2.1.3":
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/@floip/expression-evaluator/-/expression-evaluator-2.1.4.tgz#ef4647f2d7140ac5841ab669945d7601588e43ab"
+  integrity sha512-WahhLzof0HcAldBbLswc9mMQZbnWxrqmZNOuUbQjwAbGNV8C9TihzescECtWsGcNvGAROVr5alIa434gSnqNGA==
+  dependencies:
+    "@floip/expression-parser" "^1.10.0"
+    moment "^2.24.0"
+
 "@floip/expression-parser@^1.10.0":
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/@floip/expression-parser/-/expression-parser-1.10.0.tgz#386cb9fbfb2afc951daae40e03845a87bacf3509"
@@ -16604,11 +16604,6 @@ signal-exit@^3.0.0, signal-exit@^3.0.2, signal-exit@^3.0.3:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
   integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==
 
-simple-html-tokenizer@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/simple-html-tokenizer/-/simple-html-tokenizer-0.1.1.tgz#05c2eec579ffffe145a030ac26cfea61b980fabe"
-  integrity sha1-BcLuxXn//+FFoDCsJs/qYbmA+r4=
-
 simple-swizzle@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
@@ -17297,15 +17292,6 @@ supports-hyperlinks@^2.0.0:
     has-flag "^4.0.0"
     supports-color "^7.0.0"
 
-svg-inline-loader@^0.8.2:
-  version "0.8.2"
-  resolved "https://registry.yarnpkg.com/svg-inline-loader/-/svg-inline-loader-0.8.2.tgz#9872414f9e4141601e04eb80cda748c9a50dae71"
-  integrity sha512-kbrcEh5n5JkypaSC152eGfGcnT4lkR0eSfvefaUJkLqgGjRQJyKDvvEE/CCv5aTSdfXuc+N98w16iAojhShI3g==
-  dependencies:
-    loader-utils "^1.1.0"
-    object-assign "^4.0.1"
-    simple-html-tokenizer "^0.1.1"
-
 svg-tags@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"

From a1ce240beeda7e01ddfef0b50955b14754ce5cb9 Mon Sep 17 00:00:00 2001
From: Pooja Patil <pooja.patil@viamo.io>
Date: Thu, 15 Jul 2021 14:31:27 -0700
Subject: [PATCH 21/22] VMO-4138  Some fixes

---
 .../interaction-designer/block-editors/LabelEditor.vue    | 8 ++++----
 .../interaction-designer/block-editors/NameEditor.vue     | 6 +++---
 .../resource-editors/ResourceEditor.vue                   | 1 +
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/interaction-designer/block-editors/LabelEditor.vue b/src/components/interaction-designer/block-editors/LabelEditor.vue
index ff6a81342..83ae0a542 100644
--- a/src/components/interaction-designer/block-editors/LabelEditor.vue
+++ b/src/components/interaction-designer/block-editors/LabelEditor.vue
@@ -43,11 +43,11 @@ const flowVuexNamespace = namespace('flow')
 class LabelEditor extends mixins(Lang) {
   @Prop() readonly block!: IBlock
 
-  get blockLabel(): string {
-    return this.block.label ?? ''
+  get blockLabel(): IBlock['label'] {
+    return this.block.label
   }
 
-  set blockLabel(value: string) {
+  set blockLabel(value: IBlock['label']) {
     this.block_setLabel({blockId: this.block.uuid, value})
   }
 
@@ -55,7 +55,7 @@ class LabelEditor extends mixins(Lang) {
     this.$emit('gearClicked')
   }
 
-  @flowVuexNamespace.Action block_setLabel!: ({blockId, value}: {blockId: string, value: string}) => void
+  @flowVuexNamespace.Action block_setLabel!: ({blockId, value}: { blockId: IBlock['uuid'], value: IBlock['label'] }) => void
 }
 export default LabelEditor
 </script>
diff --git a/src/components/interaction-designer/block-editors/NameEditor.vue b/src/components/interaction-designer/block-editors/NameEditor.vue
index 0049842d0..e4aa142c7 100644
--- a/src/components/interaction-designer/block-editors/NameEditor.vue
+++ b/src/components/interaction-designer/block-editors/NameEditor.vue
@@ -59,11 +59,11 @@ class NameEditor extends mixins(Lang) {
 
   @Prop() readonly block!: IBlock
 
-  get blockName(): string {
+  get blockName(): IBlock['name'] {
     return this.block.name
   }
 
-  set blockName(value: string) {
+  set blockName(value: IBlock['name']) {
     this.block_setName({blockId: this.block.uuid, value})
   }
 
@@ -73,7 +73,7 @@ class NameEditor extends mixins(Lang) {
     }
   }
 
-  @flowVuexNamespace.Mutation block_setName!: ({blockId, value}: {blockId: string, value: string}) => void
+  @flowVuexNamespace.Mutation block_setName!: ({blockId, value}: {blockId: IBlock['uuid'], value: IBlock['name']}) => void
 }
 export default NameEditor
 </script>
diff --git a/src/components/interaction-designer/resource-editors/ResourceEditor.vue b/src/components/interaction-designer/resource-editors/ResourceEditor.vue
index 784151a81..096a0d513 100644
--- a/src/components/interaction-designer/resource-editors/ResourceEditor.vue
+++ b/src/components/interaction-designer/resource-editors/ResourceEditor.vue
@@ -19,6 +19,7 @@
             class="tab-content-style">
             <header class="d-flex">
               <font-awesome-icon
+                v-if="iconsMap.get(mode)"
                 :icon="iconsMap.get(mode)"
                 :class="{'custom-icons': iconsMap.get(mode)[0] === 'fac', 'library-icons': iconsMap.get(mode)[0] !== 'fac'}" />
               <h6 class="ml-1">{{ `flow-builder.${mode.toLowerCase()}-content` | trans }}</h6>

From 210abde3a96086938e19c2b0f0f0312893caae50 Mon Sep 17 00:00:00 2001
From: Pooja Patil <pooja.patil@viamo.io>
Date: Thu, 15 Jul 2021 16:20:48 -0700
Subject: [PATCH 22/22] VMO-4138 Updating snapshot

---
 .../unit/__snapshots__/storybook.spec.ts.snap | 821 ++++++++----------
 1 file changed, 379 insertions(+), 442 deletions(-)

diff --git a/tests/unit/__snapshots__/storybook.spec.ts.snap b/tests/unit/__snapshots__/storybook.spec.ts.snap
index 11885e924..e2ccf5f9f 100644
--- a/tests/unit/__snapshots__/storybook.spec.ts.snap
+++ b/tests/unit/__snapshots__/storybook.spec.ts.snap
@@ -170,13 +170,14 @@ exports[`Storyshots Flow/Flow Editor Existing Data Pre Filled 1`] = `
                                   <div
                                     class=""
                                   >
-                                    <label>
+                                    <h6>
                                       Flow label
-                                    </label>
+                                    </h6>
                                      
                                     <textarea
                                       class="form-control"
                                       placeholder="Enter flow label"
+                                      rows="1"
                                     />
                                      
                                   </div>
@@ -1793,93 +1794,95 @@ exports[`Storyshots MobilePrimitives/Numeric Response Block Existing Data For Te
                         </h3>
                          
                         <fieldset>
-                          <div
-                            class="validation-message form-group"
-                            id="block/fake-uuid-70/name"
+                          <section
+                            class="mb-3"
                           >
-                            <div
-                              class="block-name"
+                            <label
+                              class="text-primary"
                             >
-                              <div>
-                                <label>
-                                  Block name
-                                </label>
-                                 
-                                <textarea
-                                  class="form-control"
-                                  placeholder="Enter a block name"
-                                />
-                                 
-                                <small
-                                  class="text-muted"
-                                >
-                                  
-        Only accepts word characters
-      
-                                </small>
-                              </div>
-                            </div>
+                              Title
+                            </label>
                              
-                            <small
-                              class="text-danger"
-                            >
-                              
-                            </small>
-                          </div>
-                           
-                          <div
-                            class="validation-message form-group"
-                            id="block/fake-uuid-70/label"
-                          >
                             <div
-                              class="block-label"
+                              class="validation-message form-group"
+                              id="block/fake-uuid-70/label"
                             >
-                              <div>
-                                <label>
-                                  Block label
-                                </label>
-                                 
-                                <textarea
-                                  class="form-control"
-                                  placeholder="Enter a block label"
-                                />
+                              <div
+                                class="d-flex"
+                              >
+                                <div
+                                  class="w-100"
+                                >
+                                  <!---->
+                                   
+                                  <textarea
+                                    class="form-control"
+                                    placeholder="Enter title"
+                                    rows="1"
+                                  />
+                                   
+                                </div>
                                  
+                                <span
+                                  class="btn btn-outline-primary btn-xs align-self-center ml-2"
+                                >
+                                  <font-awesome-icon
+                                    class="fa-btn text-primary"
+                                    icon="fac,settings"
+                                  />
+                                </span>
                               </div>
+                               
+                              <small
+                                class="text-danger"
+                              >
+                                
+                              </small>
                             </div>
-                             
-                            <small
-                              class="text-danger"
-                            >
-                              
-                            </small>
-                          </div>
+                          </section>
+                           
+                          <!---->
                            
                           <div
-                            class="validation-message form-group"
-                            id="block/fake-uuid-70/semantic_label"
+                            class="mt-3"
                           >
                             <div
-                              class="block-semantic-label"
+                              class="validation-message form-group"
+                              id="block/fake-uuid-70/name"
                             >
-                              <div>
-                                <label>
-                                  Block semantic label
-                                </label>
-                                 
-                                <input
-                                  class="form-control w-100"
-                                  placeholder="Enter a block semantic label"
-                                  type="text"
-                                />
+                              <div
+                                class="d-flex justify-content-between"
+                              >
+                                <div
+                                  class="block-code align-self-center"
+                                >
+                                  <h6
+                                    class="d-inline"
+                                  >
+                                    Code:
+                                  </h6>
+                                   
+                                  <span>
+                                      
+                                  </span>
+                                </div>
                                  
+                                <span
+                                  class="btn btn-primary btn-xs align-self-baseline ml-2"
+                                >
+                                  <font-awesome-icon
+                                    class="fa-btn"
+                                    icon="far,edit"
+                                  />
+                                </span>
                               </div>
+                               
+                              <small
+                                class="text-danger"
+                              >
+                                
+                              </small>
                             </div>
-                             
-                            <small
-                              class="text-danger"
-                            >
-                              
-                            </small>
                           </div>
                            
                           <div
@@ -2018,14 +2021,10 @@ exports[`Storyshots MobilePrimitives/Numeric Response Block Existing Data For Te
                                       <header
                                         class="d-flex"
                                       >
-                                        <svg
-                                          class="icon"
-                                          style="margin-top: 2px;"
-                                        >
-                                          <use
-                                            xlink:href="#message"
-                                          />
-                                        </svg>
+                                        <font-awesome-icon
+                                          class="library-icons"
+                                          icon="far,envelope"
+                                        />
                                          
                                         <h6
                                           class="ml-1"
@@ -2065,14 +2064,10 @@ exports[`Storyshots MobilePrimitives/Numeric Response Block Existing Data For Te
                                       <header
                                         class="d-flex"
                                       >
-                                        <svg
-                                          class="icon"
-                                          style="margin-top: 2px;"
-                                        >
-                                          <use
-                                            xlink:href="#ussd"
-                                          />
-                                        </svg>
+                                        <font-awesome-icon
+                                          class="custom-icons"
+                                          icon="fac,ussd"
+                                        />
                                          
                                         <h6
                                           class="ml-1"
@@ -2112,14 +2107,10 @@ exports[`Storyshots MobilePrimitives/Numeric Response Block Existing Data For Te
                                       <header
                                         class="d-flex"
                                       >
-                                        <svg
-                                          class="icon"
-                                          style="margin-top: 2px;"
-                                        >
-                                          <use
-                                            xlink:href="#audio"
-                                          />
-                                        </svg>
+                                        <font-awesome-icon
+                                          class="custom-icons"
+                                          icon="fac,audio"
+                                        />
                                          
                                         <h6
                                           class="ml-1"
@@ -2185,13 +2176,10 @@ exports[`Storyshots MobilePrimitives/Numeric Response Block Existing Data For Te
                                             class="btn btn-primary ivr-buttons"
                                             style="overflow: hidden;"
                                           >
-                                            <svg
-                                              class="icon"
-                                            >
-                                              <use
-                                                xlink:href="#upload"
-                                              />
-                                            </svg>
+                                            <font-awesome-icon
+                                              class="fa-btn"
+                                              icon="fac,upload"
+                                            />
                                             
                     Upload Audio
                   
@@ -2205,13 +2193,10 @@ exports[`Storyshots MobilePrimitives/Numeric Response Block Existing Data For Te
                                           <button
                                             class="btn btn-primary ivr-buttons ml-2"
                                           >
-                                            <svg
-                                              class="icon"
-                                            >
-                                              <use
-                                                xlink:href="#record-audio"
-                                              />
-                                            </svg>
+                                            <font-awesome-icon
+                                              class="fa-btn"
+                                              icon="fac,record-audio"
+                                            />
                                             
                     Record Audio
                   
@@ -2239,17 +2224,14 @@ exports[`Storyshots MobilePrimitives/Numeric Response Block Existing Data For Te
                               class="form-group"
                             >
                               <button
-                                class="btn btn-outline-primary btn-sm w-100"
+                                class="btn btn-sm w-100 btn-primary"
                                 disabled="disabled"
                                 type="button"
                               >
-                                <svg
-                                  class="icon"
-                                >
-                                  <use
-                                    xlink:href="#enter"
-                                  />
-                                </svg>
+                                <font-awesome-icon
+                                  class="fa-btn"
+                                  icon="fac,enter"
+                                />
                                  
           Currently set as starting block
         
@@ -2333,93 +2315,95 @@ exports[`Storyshots MobilePrimitives/Numeric Response Block Non Starting Block 1
                         </h3>
                          
                         <fieldset>
-                          <div
-                            class="validation-message form-group"
-                            id="block/fake-uuid-76/name"
+                          <section
+                            class="mb-3"
                           >
-                            <div
-                              class="block-name"
+                            <label
+                              class="text-primary"
                             >
-                              <div>
-                                <label>
-                                  Block name
-                                </label>
-                                 
-                                <textarea
-                                  class="form-control"
-                                  placeholder="Enter a block name"
-                                />
-                                 
-                                <small
-                                  class="text-muted"
-                                >
-                                  
-        Only accepts word characters
-      
-                                </small>
-                              </div>
-                            </div>
+                              Title
+                            </label>
                              
-                            <small
-                              class="text-danger"
-                            >
-                              
-                            </small>
-                          </div>
-                           
-                          <div
-                            class="validation-message form-group"
-                            id="block/fake-uuid-76/label"
-                          >
                             <div
-                              class="block-label"
+                              class="validation-message form-group"
+                              id="block/fake-uuid-76/label"
                             >
-                              <div>
-                                <label>
-                                  Block label
-                                </label>
-                                 
-                                <textarea
-                                  class="form-control"
-                                  placeholder="Enter a block label"
-                                />
+                              <div
+                                class="d-flex"
+                              >
+                                <div
+                                  class="w-100"
+                                >
+                                  <!---->
+                                   
+                                  <textarea
+                                    class="form-control"
+                                    placeholder="Enter title"
+                                    rows="1"
+                                  />
+                                   
+                                </div>
                                  
+                                <span
+                                  class="btn btn-outline-primary btn-xs align-self-center ml-2"
+                                >
+                                  <font-awesome-icon
+                                    class="fa-btn text-primary"
+                                    icon="fac,settings"
+                                  />
+                                </span>
                               </div>
+                               
+                              <small
+                                class="text-danger"
+                              >
+                                
+                              </small>
                             </div>
-                             
-                            <small
-                              class="text-danger"
-                            >
-                              
-                            </small>
-                          </div>
+                          </section>
+                           
+                          <!---->
                            
                           <div
-                            class="validation-message form-group"
-                            id="block/fake-uuid-76/semantic_label"
+                            class="mt-3"
                           >
                             <div
-                              class="block-semantic-label"
+                              class="validation-message form-group"
+                              id="block/fake-uuid-76/name"
                             >
-                              <div>
-                                <label>
-                                  Block semantic label
-                                </label>
-                                 
-                                <input
-                                  class="form-control w-100"
-                                  placeholder="Enter a block semantic label"
-                                  type="text"
-                                />
+                              <div
+                                class="d-flex justify-content-between"
+                              >
+                                <div
+                                  class="block-code align-self-center"
+                                >
+                                  <h6
+                                    class="d-inline"
+                                  >
+                                    Code:
+                                  </h6>
+                                   
+                                  <span>
+                                     A Name 
+                                  </span>
+                                </div>
                                  
+                                <span
+                                  class="btn btn-primary btn-xs align-self-baseline ml-2"
+                                >
+                                  <font-awesome-icon
+                                    class="fa-btn"
+                                    icon="far,edit"
+                                  />
+                                </span>
                               </div>
+                               
+                              <small
+                                class="text-danger"
+                              >
+                                
+                              </small>
                             </div>
-                             
-                            <small
-                              class="text-danger"
-                            >
-                              
-                            </small>
                           </div>
                            
                           <div
@@ -2558,14 +2542,10 @@ exports[`Storyshots MobilePrimitives/Numeric Response Block Non Starting Block 1
                                       <header
                                         class="d-flex"
                                       >
-                                        <svg
-                                          class="icon"
-                                          style="margin-top: 2px;"
-                                        >
-                                          <use
-                                            xlink:href="#message"
-                                          />
-                                        </svg>
+                                        <font-awesome-icon
+                                          class="library-icons"
+                                          icon="far,envelope"
+                                        />
                                          
                                         <h6
                                           class="ml-1"
@@ -2605,14 +2585,10 @@ exports[`Storyshots MobilePrimitives/Numeric Response Block Non Starting Block 1
                                       <header
                                         class="d-flex"
                                       >
-                                        <svg
-                                          class="icon"
-                                          style="margin-top: 2px;"
-                                        >
-                                          <use
-                                            xlink:href="#ussd"
-                                          />
-                                        </svg>
+                                        <font-awesome-icon
+                                          class="custom-icons"
+                                          icon="fac,ussd"
+                                        />
                                          
                                         <h6
                                           class="ml-1"
@@ -2652,14 +2628,10 @@ exports[`Storyshots MobilePrimitives/Numeric Response Block Non Starting Block 1
                                       <header
                                         class="d-flex"
                                       >
-                                        <svg
-                                          class="icon"
-                                          style="margin-top: 2px;"
-                                        >
-                                          <use
-                                            xlink:href="#audio"
-                                          />
-                                        </svg>
+                                        <font-awesome-icon
+                                          class="custom-icons"
+                                          icon="fac,audio"
+                                        />
                                          
                                         <h6
                                           class="ml-1"
@@ -2761,17 +2733,14 @@ exports[`Storyshots MobilePrimitives/Numeric Response Block Non Starting Block 1
                               class="form-group"
                             >
                               <button
-                                class="btn btn-outline-primary btn-sm w-100"
+                                class="btn btn-sm w-100 btn-primary"
                                 disabled="disabled"
                                 type="button"
                               >
-                                <svg
-                                  class="icon"
-                                >
-                                  <use
-                                    xlink:href="#enter"
-                                  />
-                                </svg>
+                                <font-awesome-icon
+                                  class="fa-btn"
+                                  icon="fac,enter"
+                                />
                                  
           Currently set as starting block
         
@@ -2873,93 +2842,95 @@ exports[`Storyshots MobilePrimitives/Open Response Block Existing Data For Text
                         </h3>
                          
                         <fieldset>
-                          <div
-                            class="validation-message form-group"
-                            id="block/fake-uuid-105/name"
+                          <section
+                            class="mb-3"
                           >
-                            <div
-                              class="block-name"
+                            <label
+                              class="text-primary"
                             >
-                              <div>
-                                <label>
-                                  Block name
-                                </label>
-                                 
-                                <textarea
-                                  class="form-control"
-                                  placeholder="Enter a block name"
-                                />
-                                 
-                                <small
-                                  class="text-muted"
-                                >
-                                  
-        Only accepts word characters
-      
-                                </small>
-                              </div>
-                            </div>
+                              Title
+                            </label>
                              
-                            <small
-                              class="text-danger"
-                            >
-                              
-                            </small>
-                          </div>
-                           
-                          <div
-                            class="validation-message form-group"
-                            id="block/fake-uuid-105/label"
-                          >
                             <div
-                              class="block-label"
+                              class="validation-message form-group"
+                              id="block/fake-uuid-105/label"
                             >
-                              <div>
-                                <label>
-                                  Block label
-                                </label>
-                                 
-                                <textarea
-                                  class="form-control"
-                                  placeholder="Enter a block label"
-                                />
+                              <div
+                                class="d-flex"
+                              >
+                                <div
+                                  class="w-100"
+                                >
+                                  <!---->
+                                   
+                                  <textarea
+                                    class="form-control"
+                                    placeholder="Enter title"
+                                    rows="1"
+                                  />
+                                   
+                                </div>
                                  
+                                <span
+                                  class="btn btn-outline-primary btn-xs align-self-center ml-2"
+                                >
+                                  <font-awesome-icon
+                                    class="fa-btn text-primary"
+                                    icon="fac,settings"
+                                  />
+                                </span>
                               </div>
+                               
+                              <small
+                                class="text-danger"
+                              >
+                                
+                              </small>
                             </div>
-                             
-                            <small
-                              class="text-danger"
-                            >
-                              
-                            </small>
-                          </div>
+                          </section>
+                           
+                          <!---->
                            
                           <div
-                            class="validation-message form-group"
-                            id="block/fake-uuid-105/semantic_label"
+                            class="mt-3"
                           >
                             <div
-                              class="block-semantic-label"
+                              class="validation-message form-group"
+                              id="block/fake-uuid-105/name"
                             >
-                              <div>
-                                <label>
-                                  Block semantic label
-                                </label>
-                                 
-                                <input
-                                  class="form-control w-100"
-                                  placeholder="Enter a block semantic label"
-                                  type="text"
-                                />
+                              <div
+                                class="d-flex justify-content-between"
+                              >
+                                <div
+                                  class="block-code align-self-center"
+                                >
+                                  <h6
+                                    class="d-inline"
+                                  >
+                                    Code:
+                                  </h6>
+                                   
+                                  <span>
+                                      
+                                  </span>
+                                </div>
                                  
+                                <span
+                                  class="btn btn-primary btn-xs align-self-baseline ml-2"
+                                >
+                                  <font-awesome-icon
+                                    class="fa-btn"
+                                    icon="far,edit"
+                                  />
+                                </span>
                               </div>
+                               
+                              <small
+                                class="text-danger"
+                              >
+                                
+                              </small>
                             </div>
-                             
-                            <small
-                              class="text-danger"
-                            >
-                              
-                            </small>
                           </div>
                            
                           <div
@@ -3073,14 +3044,10 @@ exports[`Storyshots MobilePrimitives/Open Response Block Existing Data For Text
                                       <header
                                         class="d-flex"
                                       >
-                                        <svg
-                                          class="icon"
-                                          style="margin-top: 2px;"
-                                        >
-                                          <use
-                                            xlink:href="#message"
-                                          />
-                                        </svg>
+                                        <font-awesome-icon
+                                          class="library-icons"
+                                          icon="far,envelope"
+                                        />
                                          
                                         <h6
                                           class="ml-1"
@@ -3120,14 +3087,10 @@ exports[`Storyshots MobilePrimitives/Open Response Block Existing Data For Text
                                       <header
                                         class="d-flex"
                                       >
-                                        <svg
-                                          class="icon"
-                                          style="margin-top: 2px;"
-                                        >
-                                          <use
-                                            xlink:href="#ussd"
-                                          />
-                                        </svg>
+                                        <font-awesome-icon
+                                          class="custom-icons"
+                                          icon="fac,ussd"
+                                        />
                                          
                                         <h6
                                           class="ml-1"
@@ -3167,14 +3130,10 @@ exports[`Storyshots MobilePrimitives/Open Response Block Existing Data For Text
                                       <header
                                         class="d-flex"
                                       >
-                                        <svg
-                                          class="icon"
-                                          style="margin-top: 2px;"
-                                        >
-                                          <use
-                                            xlink:href="#audio"
-                                          />
-                                        </svg>
+                                        <font-awesome-icon
+                                          class="custom-icons"
+                                          icon="fac,audio"
+                                        />
                                          
                                         <h6
                                           class="ml-1"
@@ -3240,13 +3199,10 @@ exports[`Storyshots MobilePrimitives/Open Response Block Existing Data For Text
                                             class="btn btn-primary ivr-buttons"
                                             style="overflow: hidden;"
                                           >
-                                            <svg
-                                              class="icon"
-                                            >
-                                              <use
-                                                xlink:href="#upload"
-                                              />
-                                            </svg>
+                                            <font-awesome-icon
+                                              class="fa-btn"
+                                              icon="fac,upload"
+                                            />
                                             
                     Upload Audio
                   
@@ -3260,13 +3216,10 @@ exports[`Storyshots MobilePrimitives/Open Response Block Existing Data For Text
                                           <button
                                             class="btn btn-primary ivr-buttons ml-2"
                                           >
-                                            <svg
-                                              class="icon"
-                                            >
-                                              <use
-                                                xlink:href="#record-audio"
-                                              />
-                                            </svg>
+                                            <font-awesome-icon
+                                              class="fa-btn"
+                                              icon="fac,record-audio"
+                                            />
                                             
                     Record Audio
                   
@@ -3294,17 +3247,14 @@ exports[`Storyshots MobilePrimitives/Open Response Block Existing Data For Text
                               class="form-group"
                             >
                               <button
-                                class="btn btn-outline-primary btn-sm w-100"
+                                class="btn btn-sm w-100 btn-primary"
                                 disabled="disabled"
                                 type="button"
                               >
-                                <svg
-                                  class="icon"
-                                >
-                                  <use
-                                    xlink:href="#enter"
-                                  />
-                                </svg>
+                                <font-awesome-icon
+                                  class="fa-btn"
+                                  icon="fac,enter"
+                                />
                                  
           Currently set as starting block
         
@@ -3388,93 +3338,95 @@ exports[`Storyshots MobilePrimitives/Open Response Block Non Starting Block 1`]
                         </h3>
                          
                         <fieldset>
-                          <div
-                            class="validation-message form-group"
-                            id="block/fake-uuid-114/name"
+                          <section
+                            class="mb-3"
                           >
-                            <div
-                              class="block-name"
+                            <label
+                              class="text-primary"
                             >
-                              <div>
-                                <label>
-                                  Block name
-                                </label>
-                                 
-                                <textarea
-                                  class="form-control"
-                                  placeholder="Enter a block name"
-                                />
-                                 
-                                <small
-                                  class="text-muted"
-                                >
-                                  
-        Only accepts word characters
-      
-                                </small>
-                              </div>
-                            </div>
+                              Title
+                            </label>
                              
-                            <small
-                              class="text-danger"
-                            >
-                              
-                            </small>
-                          </div>
-                           
-                          <div
-                            class="validation-message form-group"
-                            id="block/fake-uuid-114/label"
-                          >
                             <div
-                              class="block-label"
+                              class="validation-message form-group"
+                              id="block/fake-uuid-114/label"
                             >
-                              <div>
-                                <label>
-                                  Block label
-                                </label>
-                                 
-                                <textarea
-                                  class="form-control"
-                                  placeholder="Enter a block label"
-                                />
+                              <div
+                                class="d-flex"
+                              >
+                                <div
+                                  class="w-100"
+                                >
+                                  <!---->
+                                   
+                                  <textarea
+                                    class="form-control"
+                                    placeholder="Enter title"
+                                    rows="1"
+                                  />
+                                   
+                                </div>
                                  
+                                <span
+                                  class="btn btn-outline-primary btn-xs align-self-center ml-2"
+                                >
+                                  <font-awesome-icon
+                                    class="fa-btn text-primary"
+                                    icon="fac,settings"
+                                  />
+                                </span>
                               </div>
+                               
+                              <small
+                                class="text-danger"
+                              >
+                                
+                              </small>
                             </div>
-                             
-                            <small
-                              class="text-danger"
-                            >
-                              
-                            </small>
-                          </div>
+                          </section>
+                           
+                          <!---->
                            
                           <div
-                            class="validation-message form-group"
-                            id="block/fake-uuid-114/semantic_label"
+                            class="mt-3"
                           >
                             <div
-                              class="block-semantic-label"
+                              class="validation-message form-group"
+                              id="block/fake-uuid-114/name"
                             >
-                              <div>
-                                <label>
-                                  Block semantic label
-                                </label>
-                                 
-                                <input
-                                  class="form-control w-100"
-                                  placeholder="Enter a block semantic label"
-                                  type="text"
-                                />
+                              <div
+                                class="d-flex justify-content-between"
+                              >
+                                <div
+                                  class="block-code align-self-center"
+                                >
+                                  <h6
+                                    class="d-inline"
+                                  >
+                                    Code:
+                                  </h6>
+                                   
+                                  <span>
+                                     A Name 
+                                  </span>
+                                </div>
                                  
+                                <span
+                                  class="btn btn-primary btn-xs align-self-baseline ml-2"
+                                >
+                                  <font-awesome-icon
+                                    class="fa-btn"
+                                    icon="far,edit"
+                                  />
+                                </span>
                               </div>
+                               
+                              <small
+                                class="text-danger"
+                              >
+                                
+                              </small>
                             </div>
-                             
-                            <small
-                              class="text-danger"
-                            >
-                              
-                            </small>
                           </div>
                            
                           <div
@@ -3588,14 +3540,10 @@ exports[`Storyshots MobilePrimitives/Open Response Block Non Starting Block 1`]
                                       <header
                                         class="d-flex"
                                       >
-                                        <svg
-                                          class="icon"
-                                          style="margin-top: 2px;"
-                                        >
-                                          <use
-                                            xlink:href="#message"
-                                          />
-                                        </svg>
+                                        <font-awesome-icon
+                                          class="library-icons"
+                                          icon="far,envelope"
+                                        />
                                          
                                         <h6
                                           class="ml-1"
@@ -3635,14 +3583,10 @@ exports[`Storyshots MobilePrimitives/Open Response Block Non Starting Block 1`]
                                       <header
                                         class="d-flex"
                                       >
-                                        <svg
-                                          class="icon"
-                                          style="margin-top: 2px;"
-                                        >
-                                          <use
-                                            xlink:href="#ussd"
-                                          />
-                                        </svg>
+                                        <font-awesome-icon
+                                          class="custom-icons"
+                                          icon="fac,ussd"
+                                        />
                                          
                                         <h6
                                           class="ml-1"
@@ -3682,14 +3626,10 @@ exports[`Storyshots MobilePrimitives/Open Response Block Non Starting Block 1`]
                                       <header
                                         class="d-flex"
                                       >
-                                        <svg
-                                          class="icon"
-                                          style="margin-top: 2px;"
-                                        >
-                                          <use
-                                            xlink:href="#audio"
-                                          />
-                                        </svg>
+                                        <font-awesome-icon
+                                          class="custom-icons"
+                                          icon="fac,audio"
+                                        />
                                          
                                         <h6
                                           class="ml-1"
@@ -3791,17 +3731,14 @@ exports[`Storyshots MobilePrimitives/Open Response Block Non Starting Block 1`]
                               class="form-group"
                             >
                               <button
-                                class="btn btn-outline-primary btn-sm w-100"
+                                class="btn btn-sm w-100 btn-primary"
                                 disabled="disabled"
                                 type="button"
                               >
-                                <svg
-                                  class="icon"
-                                >
-                                  <use
-                                    xlink:href="#enter"
-                                  />
-                                </svg>
+                                <font-awesome-icon
+                                  class="fa-btn"
+                                  icon="fac,enter"
+                                />
                                  
           Currently set as starting block