fix conflict, keep the touchable button big

1 files changed, 27 insertions, 17 deletions

diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index cf88c4e4..d62bc392 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -127,9 +127,9 @@
           <div
             class="icon-container"
           >
-            <i
+            <FAIcon
               v-show="newFields.length > 1"
-              class="icon-cancel"
+              icon="times"
               @click="deleteField(i)"
             />
           </div>
@@ -139,7 +139,7 @@
           class="add-field faint"
           @click="addField"
         >
-          <i class="icon-plus" />
+          <FAIcon icon="plus" />
           {{ $t("settings.profile_fields.add_field") }}
         </a>
       </div>
@@ -166,10 +166,11 @@
           :src="user.profile_image_url_original"
           class="current-avatar"
         >
-        <i
+        <FAIcon
           v-if="!isDefaultAvatar && pickAvatarBtnVisible"
           :title="$t('settings.reset_avatar')"
-          class="reset-button icon-cancel"
+          class="reset-button"
+          icon="times"
           type="button"
           @click="resetAvatar"
         />
@@ -194,10 +195,11 @@
       <h2>{{ $t('settings.profile_banner') }}</h2>
       <div class="banner-background-preview">
         <img :src="user.cover_photo">
-        <i
+        <FAIcon
           v-if="!isDefaultBanner"
           :title="$t('settings.reset_profile_banner')"
-          class="reset-button icon-cancel"
+          class="reset-button"
+          icon="times"
           type="button"
           @click="resetBanner"
         />
@@ -214,9 +216,11 @@
           @change="uploadFile('banner', $event)"
         >
       </div>
-      <i
+      <FAIcon
         v-if="bannerUploading"
-        class=" icon-spin4 animate-spin uploading"
+        class="uploading"
+        spin
+        icon="circle-notch"
       />
       <button
         v-else-if="bannerPreview"
@@ -230,8 +234,9 @@
         class="alert error"
       >
         Error: {{ bannerUploadError }}
-        <i
-          class="button-icon icon-cancel"
+        <FAIcon
+          class="fa-scale-110 fa-old-padding"
+          icon="times"
           @click="clearUploadError('banner')"
         />
       </div>
@@ -240,10 +245,11 @@
       <h2>{{ $t('settings.profile_background') }}</h2>
       <div class="banner-background-preview">
         <img :src="user.background_image">
-        <i
+        <FAIcon
           v-if="!isDefaultBackground"
           :title="$t('settings.reset_profile_background')"
-          class="reset-button icon-cancel"
+          class="reset-button"
+          icon="times"
           type="button"
           @click="resetBackground"
         />
@@ -260,9 +266,11 @@
           @change="uploadFile('background', $event)"
         >
       </div>
-      <i
+      <FAIcon
         v-if="backgroundUploading"
-        class=" icon-spin4 animate-spin uploading"
+        class="uploading"
+        spin
+        icon="circle-notch"
       />
       <button
         v-else-if="backgroundPreview"
@@ -276,8 +284,10 @@
         class="alert error"
       >
         Error: {{ backgroundUploadError }}
-        <i
-          class="button-icon icon-cancel"
+        <FAIcon
+          size="lg"
+          class="fa-scale-110 fa-old-padding"
+          icon="times"
           @click="clearUploadError('background')"
         />
       </div>