fix conflict, keep the touchable button big

3 files changed, 20 insertions, 9 deletions

diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js
index 681ba08f..e60fe09d 100644
--- a/src/components/chat/chat.js
+++ b/src/components/chat/chat.js
@@ -7,6 +7,16 @@ import ChatTitle from '../chat_title/chat_title.vue'
 import chatService from '../../services/chat_service/chat_service.js'
 import { promiseInterval } from '../../services/promise_interval/promise_interval.js'
 import { getScrollPosition, getNewTopPosition, isBottomedOut, scrollableContainerHeight } from './chat_layout_utils.js'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faChevronDown,
+  faChevronLeft
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faChevronDown,
+  faChevronLeft
+)
 
 const BOTTOMED_OUT_OFFSET = 10
 const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 150
diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss
index f91de618..787514c8 100644
--- a/src/components/chat/chat.scss
+++ b/src/components/chat/chat.scss
@@ -58,13 +58,10 @@
 
   .go-back-button {
     cursor: pointer;
+    width: 28px;
+    text-align: center;
     padding: 0.6em;
-    margin: -0.6em 0.8em -0.6em -0.6em;
-    height: 100%;
-
-    i {
-      vertical-align: middle;
-    }
+    margin: -0.6em 0.6em -0.6em -0.6em;
   }
 
   .jump-to-bottom-button {
diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
index 2e4538c8..5f58b9a6 100644
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@@ -14,7 +14,10 @@
             class="go-back-button"
             @click="goBack"
           >
-            <i class="button-icon icon-left-open" />
+            <FAIcon
+              size="lg"
+              icon="chevron-left"
+            />
           </a>
           <div class="title text-center">
             <ChatTitle
@@ -58,14 +61,15 @@
               :class="{ 'visible': jumpToBottomButtonVisible }"
               @click="scrollDown({ behavior: 'smooth' })"
             >
-              <i class="icon-down-open">
+              <span>
+                <FAIcon icon="chevron-down" />
                 <div
                   v-if="newMessageCount"
                   class="badge badge-notification unread-chat-count unread-message-count"
                 >
                   {{ newMessageCount }}
                 </div>
-              </i>
+              </span>
             </div>
             <PostStatusForm
               :disable-subject="true"