From 7589ec8f2b35e25619f4337c82335194ec41dff7 Mon Sep 17 00:00:00 2001
From: Pig Fang <g-plane@hotmail.com>
Date: Sat, 30 Mar 2019 18:36:01 +0800
Subject: [PATCH] Use buttons from Element UI

---
 app/Services/OptionForm.php                   |  2 +-
 .../assets/src/views/admin/Customization.vue  |  4 +-
 resources/assets/src/views/admin/Market.vue   | 31 +++++---
 resources/assets/src/views/admin/Players.vue  | 26 +++----
 resources/assets/src/views/admin/Update.vue   | 15 ++--
 resources/assets/src/views/admin/Users.vue    | 19 ++---
 resources/assets/src/views/user/Closet.vue    | 23 +++---
 resources/assets/src/views/user/Players.vue   | 71 ++++++++-----------
 resources/assets/src/views/user/Profile.vue   | 49 +++++--------
 .../assets/tests/views/admin/Players.test.ts  | 10 ++-
 .../assets/tests/views/admin/Update.test.ts   |  4 +-
 .../assets/tests/views/admin/Users.test.ts    | 19 ++---
 .../assets/tests/views/user/Closet.test.ts    |  6 +-
 .../assets/tests/views/user/Players.test.ts   | 11 ++-
 resources/lang/en/admin.yml                   |  2 +-
 resources/lang/zh_CN/admin.yml                |  2 +-
 resources/views/admin/update.blade.php        |  2 +-
 resources/views/user/index.blade.php          |  2 +-
 18 files changed, 144 insertions(+), 154 deletions(-)

diff --git a/app/Services/OptionForm.php b/app/Services/OptionForm.php
index d82a05c0..1b5cc02c 100644
--- a/app/Services/OptionForm.php
+++ b/app/Services/OptionForm.php
@@ -148,7 +148,7 @@ class OptionForm
             'name'  => '',
         ], $info);
 
-        $classes = "btn btn-{$info['style']} ".implode(' ', (array) Arr::get($info, 'class'));
+        $classes = "el-button el-button--{$info['style']} ".implode(' ', (array) Arr::get($info, 'class'));
 
         if ($info['href']) {
             $this->buttons[] = "<a href='{$info['href']}' class='$classes'>{$info['text']}</a>";
diff --git a/resources/assets/src/views/admin/Customization.vue b/resources/assets/src/views/admin/Customization.vue
index f1dd7e82..5cc85293 100644
--- a/resources/assets/src/views/admin/Customization.vue
+++ b/resources/assets/src/views/admin/Customization.vue
@@ -27,7 +27,9 @@
       </table>
     </div>
     <div class="box-footer">
-      <button v-t="'general.submit'" class="btn btn-primary" @click="submit" />
+      <el-button type="primary" @click="submit">
+        {{ $t('general.submit') }}
+      </el-button>
     </div>
   </div>
 </template>
diff --git a/resources/assets/src/views/admin/Market.vue b/resources/assets/src/views/admin/Market.vue
index 38d49b5a..db9fd86a 100644
--- a/resources/assets/src/views/admin/Market.vue
+++ b/resources/assets/src/views/admin/Market.vue
@@ -30,9 +30,10 @@
         </span>
         <span v-else-if="props.column.field === 'operations'">
           <template v-if="props.row.installed">
-            <button
+            <el-button
               v-if="props.row.update_available"
-              class="btn btn-success btn-sm"
+              type="success"
+              size="medium"
               :disabled="installing === props.row.name"
               @click="updatePlugin(props.row)"
             >
@@ -42,17 +43,27 @@
               <template v-else>
                 <i class="fas fa-sync-alt" /> {{ $t('admin.updatePlugin') }}
               </template>
-            </button>
-            <button v-else-if="props.row.enabled" class="btn btn-primary btn-sm" disabled>
+            </el-button>
+            <el-button
+              v-else-if="props.row.enabled"
+              type="primary"
+              size="medium"
+              disabled
+            >
               <i class="fas fa-check" /> {{ $t('admin.statusEnabled') }}
-            </button>
-            <button v-else class="btn btn-primary btn-sm" @click="enablePlugin(props.row)">
+            </el-button>
+            <el-button
+              v-else
+              type="primary"
+              size="medium"
+              @click="enablePlugin(props.row)"
+            >
               <i class="fas fa-plug" /> {{ $t('admin.enablePlugin') }}
-            </button>
+            </el-button>
           </template>
-          <button
+          <el-button
             v-else
-            class="btn btn-default btn-sm"
+            size="medium"
             :disabled="installing === props.row.name"
             @click="installPlugin(props.row)"
           >
@@ -62,7 +73,7 @@
             <template v-else>
               <i class="fas fa-download" /> {{ $t('admin.installPlugin') }}
             </template>
-          </button>
+          </el-button>
         </span>
         <span v-else v-text="props.formattedRow[props.column.field]" />
       </template>
diff --git a/resources/assets/src/views/admin/Players.vue b/resources/assets/src/views/admin/Players.vue
index 21382b31..9c29d52a 100644
--- a/resources/assets/src/views/admin/Players.vue
+++ b/resources/assets/src/views/admin/Players.vue
@@ -46,18 +46,17 @@
           </a>
         </span>
         <span v-else-if="props.column.field === 'operations'">
-          <button
-            v-t="'admin.changeTexture'"
-            class="btn btn-default"
+          <el-button
             data-toggle="modal"
             data-target="#modal-change-texture"
+            size="medium"
             @click="textureChanges.originalIndex = props.row.originalIndex"
-          />
-          <button
-            v-t="'admin.deletePlayer'"
-            class="btn btn-danger"
+          >{{ $t('admin.changeTexture') }}</el-button>
+          <el-button
+            type="danger"
+            size="medium"
             @click="deletePlayer(props.row)"
-          />
+          >{{ $t('admin.deletePlayer') }}</el-button>
         </span>
         <span v-else v-text="props.formattedRow[props.column.field]" />
       </template>
@@ -101,13 +100,10 @@
             </div>
           </div>
           <div class="modal-footer">
-            <button
-              v-t="'general.close'"
-              type="button"
-              class="btn btn-default"
-              data-dismiss="modal"
-            />
-            <a v-t="'general.submit'" class="btn btn-primary" @click="changeTexture" />
+            <el-button data-dismiss="modal">{{ $t('general.close') }}</el-button>
+            <el-button type="primary" data-test="changeTexture" @click="changeTexture">
+              {{ $t('general.submit') }}
+            </el-button>
           </div>
         </div><!-- /.modal-content -->
       </div><!-- /.modal-dialog -->
diff --git a/resources/assets/src/views/admin/Update.vue b/resources/assets/src/views/admin/Update.vue
index 76bc0209..be775a7b 100644
--- a/resources/assets/src/views/admin/Update.vue
+++ b/resources/assets/src/views/admin/Update.vue
@@ -1,14 +1,14 @@
 <template>
   <span>
-    <button
+    <el-button
       v-if="!updating"
-      class="btn btn-primary"
+      type="primary"
       :disabled="!canUpdate"
       @click="update"
-    >{{ $t('admin.updateButton') }}</button>
-    <button v-else disabled class="btn btn-primary">
+    >{{ $t('admin.updateButton') }}</el-button>
+    <el-button v-else disabled type="primary">
       <i class="fa fa-spinner fa-spin" /> {{ $t('admin.preparing') }}
-    </button>
+    </el-button>
 
     <div
       id="modal-start-download"
@@ -19,12 +19,11 @@
       <div class="modal-dialog">
         <div class="modal-content">
           <div class="modal-header">
-            <button
-              type="button"
+            <el-button
               class="close"
               data-dismiss="modal"
               aria-label="Close"
-            ><span aria-hidden="true">&times;</span></button>
+            ><span aria-hidden="true">&times;</span></el-button>
             <h4 v-t="'admin.downloading'" class="modal-title" />
           </div>
           <div class="modal-body">
diff --git a/resources/assets/src/views/admin/Users.vue b/resources/assets/src/views/admin/Users.vue
index 1f6c8fd0..183ce1d5 100644
--- a/resources/assets/src/views/admin/Users.vue
+++ b/resources/assets/src/views/admin/Users.vue
@@ -67,17 +67,18 @@
           </a>
         </span>
         <div v-else-if="props.column.field === 'operations'">
-          <button
-            v-t="'admin.changePassword'"
-            class="btn btn-default"
-            @click="changePassword(props.row)"
-          />
-          <button
-            v-t="'admin.deleteUser'"
+          <el-button size="medium" @click="changePassword(props.row)">
+            {{ $t('admin.changePassword') }}
+          </el-button>
+          <el-button
             :disabled="props.row.permission >= 2 || (props.row.operations === 1 && props.row.permission >= 1)"
-            class="btn btn-danger"
+            type="danger"
+            size="medium"
+            data-test="deleteUser"
             @click="deleteUser(props.row)"
-          />
+          >
+            {{ $t('admin.deleteUser') }}
+          </el-button>
         </div>
         <span v-else v-text="props.formattedRow[props.column.field]" />
       </template>
diff --git a/resources/assets/src/views/user/Closet.vue b/resources/assets/src/views/user/Closet.vue
index 08298812..176c909b 100644
--- a/resources/assets/src/views/user/Closet.vue
+++ b/resources/assets/src/views/user/Closet.vue
@@ -127,18 +127,17 @@
       <div class="col-md-4">
         <previewer closet-mode :skin="skinUrl" :cape="capeUrl">
           <template #footer>
-            <button
-              v-t="'user.useAs'"
-              class="btn btn-primary"
+            <el-button
+              type="primary"
               data-toggle="modal"
               data-target="#modal-use-as"
               @click="applyTexture"
-            />
-            <button
-              v-t="'user.resetSelected'"
-              class="btn btn-default pull-right"
-              @click="resetSelected"
-            />
+            >
+              {{ $t('user.useAs') }}
+            </el-button>
+            <el-button data-test="resetSelected" class="pull-right" @click="resetSelected">
+              {{ $t('user.resetSelected') }}
+            </el-button>
           </template>
         </previewer>
       </div>
@@ -181,8 +180,10 @@
             <p v-else v-t="'user.closet.use-as.empty'" />
           </div>
           <div class="modal-footer">
-            <a v-t="'user.closet.use-as.add'" href="./player" class="btn btn-default pull-left" />
-            <a v-t="'general.submit'" class="btn btn-primary" @click="submitApplyTexture" />
+            <a v-t="'user.closet.use-as.add'" href="./player" class="el-button pull-left" />
+            <el-button type="primary" data-test="submitApplyTexture" @click="submitApplyTexture">
+              {{ $t('general.submit') }}
+            </el-button>
           </div>
         </div><!-- /.modal-content -->
       </div><!-- /.modal-dialog -->
diff --git a/resources/assets/src/views/user/Players.vue b/resources/assets/src/views/user/Players.vue
index 2b752978..b388729a 100644
--- a/resources/assets/src/views/user/Players.vue
+++ b/resources/assets/src/views/user/Players.vue
@@ -24,31 +24,33 @@
                   <td class="pid">{{ player.pid }}</td>
                   <td class="player-name">{{ player.name }}</td>
                   <td>
-                    <a
-                      v-t="'user.player.edit-pname'"
-                      class="btn btn-default btn-sm"
-                      @click="changeName(player)"
-                    />
-                    <a
-                      v-t="'user.player.delete-texture'"
-                      class="btn btn-warning btn-sm"
+                    <el-button size="medium" @click="changeName(player)">
+                      {{ $t('user.player.edit-pname') }}
+                    </el-button>
+                    <el-button
+                      size="medium"
+                      type="warning"
                       data-toggle="modal"
                       data-target="#modal-clear-texture"
-                    />
-                    <a
-                      v-t="'user.player.delete-player'"
-                      class="btn btn-danger btn-sm"
+                    >
+                      {{ $t('user.player.delete-texture') }}
+                    </el-button>
+                    <el-button
+                      size="medium"
+                      type="danger"
                       @click="deletePlayer(player, index)"
-                    />
+                    >
+                      {{ $t('user.player.delete-player') }}
+                    </el-button>
                   </td>
                 </tr>
               </tbody>
             </table>
           </div>
           <div class="box-footer clearfix">
-            <button class="btn btn-primary pull-left" data-toggle="modal" data-target="#modal-add-player">
+            <el-button type="primary" data-toggle="modal" data-target="#modal-add-player">
               <i class="fas fa-plus" aria-hidden="true" /> &nbsp;{{ $t('user.player.add-player') }}
-            </button>
+            </el-button>
           </div>
         </div>
 
@@ -70,12 +72,9 @@
           title="user.player.player-info"
         >
           <template #footer>
-            <button
-              v-t="'user.switch2dPreview'"
-              class="btn btn-default"
-              data-test="to2d"
-              @click="togglePreviewer"
-            />
+            <el-button data-test="to2d" @click="togglePreviewer">
+              {{ $t('user.switch2dPreview') }}
+            </el-button>
           </template>
         </previewer>
         <div v-else class="box">
@@ -109,11 +108,9 @@
             </div>
           </div><!-- /.box-body -->
           <div class="box-footer">
-            <button
-              v-t="'user.switch3dPreview'"
-              class="btn btn-default"
-              @click="togglePreviewer"
-            />
+            <el-button @click="togglePreviewer">
+              {{ $t('user.switch3dPreview') }}
+            </el-button>
           </div>
         </div><!-- /.box -->
       </div>
@@ -162,13 +159,10 @@
             </div>
           </div>
           <div class="modal-footer">
-            <button
-              v-t="'general.close'"
-              type="button"
-              class="btn btn-default"
-              data-dismiss="modal"
-            />
-            <a v-t="'general.submit'" class="btn btn-primary" @click="addPlayer" />
+            <el-button data-dismiss="modal">{{ $t('general.close') }}</el-button>
+            <el-button type="primary" data-test="addPlayer" @click="addPlayer">
+              {{ $t('general.submit') }}
+            </el-button>
           </div>
         </div><!-- /.modal-content -->
       </div><!-- /.modal-dialog -->
@@ -203,13 +197,10 @@
             </label>
           </div>
           <div class="modal-footer">
-            <button
-              v-t="'general.close'"
-              type="button"
-              class="btn btn-default"
-              data-dismiss="modal"
-            />
-            <a v-t="'general.submit'" class="btn btn-primary" @click="clearTexture" />
+            <el-button data-dismiss="modal">{{ $t('general.close') }}</el-button>
+            <el-button type="primary" data-test="clearTexture" @click="clearTexture">
+              {{ $t('general.submit') }}
+            </el-button>
           </div>
         </div><!-- /.modal-content -->
       </div><!-- /.modal-dialog -->
diff --git a/resources/assets/src/views/user/Profile.vue b/resources/assets/src/views/user/Profile.vue
index db98d5c3..1d359585 100644
--- a/resources/assets/src/views/user/Profile.vue
+++ b/resources/assets/src/views/user/Profile.vue
@@ -10,12 +10,9 @@
           <!-- eslint-disable-next-line vue/no-v-html -->
           <div class="box-body" v-html="$t('user.profile.avatar.notice')" /><!-- /.box-body -->
           <div class="box-footer">
-            <button
-              v-t="'user.resetAvatar'"
-              class="btn btn-primary pull-right"
-              data-test="resetAvatar"
-              @click="resetAvatar"
-            />
+            <el-button type="primary" data-test="resetAvatar" @click="resetAvatar">
+              {{ $t('user.resetAvatar') }}
+            </el-button>
           </div>
         </div>
 
@@ -55,12 +52,9 @@
             </div>
           </div><!-- /.box-body -->
           <div class="box-footer">
-            <button
-              v-t="'user.profile.password.button'"
-              class="btn btn-primary"
-              data-test="changePassword"
-              @click="changePassword"
-            />
+            <el-button type="primary" data-test="changePassword" @click="changePassword">
+              {{ $t('user.profile.password.button') }}
+            </el-button>
           </div>
         </div><!-- /.box -->
       </div>
@@ -82,12 +76,9 @@
             </div>
           </div><!-- /.box-body -->
           <div class="box-footer">
-            <button
-              v-t="'general.submit'"
-              class="btn btn-primary"
-              data-test="changeNickName"
-              @click="changeNickName"
-            />
+            <el-button type="primary" data-test="changeNickName" @click="changeNickName">
+              {{ $t('general.submit') }}
+            </el-button>
           </div>
         </div>
 
@@ -118,12 +109,9 @@
             </div>
           </div><!-- /.box-body -->
           <div class="box-footer">
-            <button
-              v-t="'user.profile.email.button'"
-              class="btn btn-warning"
-              data-test="changeEmail"
-              @click="changeEmail"
-            />
+            <el-button type="primary" data-test="changeEmail" @click="changeEmail">
+              {{ $t('user.profile.email.button') }}
+            </el-button>
           </div>
         </div>
 
@@ -134,16 +122,15 @@
           <div class="box-body">
             <template v-if="isAdmin">
               <p v-t="'user.profile.delete.admin'" />
-              <button v-t="'user.profile.delete.button'" class="btn btn-danger" disabled />
+              <el-button type="danger" disabled>
+                {{ $t('user.profile.delete.button') }}
+              </el-button>
             </template>
             <template v-else>
               <p v-t="{ path: 'user.profile.delete.notice', args: { site: siteName } }" />
-              <button
-                v-t="'user.profile.delete.button'"
-                class="btn btn-danger"
-                data-toggle="modal"
-                data-target="#modal-delete-account"
-              />
+              <el-button type="danger" data-toggle="modal" data-target="#modal-delete-account">
+                {{ $t('user.profile.delete.button') }}
+              </el-button>
             </template>
           </div><!-- /.box-body -->
         </div>
diff --git a/resources/assets/tests/views/admin/Players.test.ts b/resources/assets/tests/views/admin/Players.test.ts
index 3363d7f6..40f0cf21 100644
--- a/resources/assets/tests/views/admin/Players.test.ts
+++ b/resources/assets/tests/views/admin/Players.test.ts
@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import { mount } from '@vue/test-utils'
+import { Button } from 'element-ui'
 import { MessageBoxData } from 'element-ui/types/message-box'
 import { flushPromises } from '../../utils'
 import Players from '@/views/admin/Players.vue'
@@ -28,8 +29,11 @@ test('change texture', async () => {
 
   const wrapper = mount(Players)
   await wrapper.vm.$nextTick()
-  const button = wrapper.find('.btn-primary')
-  wrapper.find('.btn-default').trigger('click')
+  const button = wrapper.find('[data-test=changeTexture]')
+  wrapper
+    .findAll(Button)
+    .at(0)
+    .trigger('click')
 
   wrapper.find('.modal-body').find('input')
     .setValue('5')
@@ -130,7 +134,7 @@ test('delete player', async () => {
 
   const wrapper = mount(Players)
   await wrapper.vm.$nextTick()
-  const button = wrapper.find('.btn-danger')
+  const button = wrapper.findAll(Button).at(1)
 
   button.trigger('click')
   expect(Vue.prototype.$http.post).not.toBeCalled()
diff --git a/resources/assets/tests/views/admin/Update.test.ts b/resources/assets/tests/views/admin/Update.test.ts
index cbca0dd2..8c8c7899 100644
--- a/resources/assets/tests/views/admin/Update.test.ts
+++ b/resources/assets/tests/views/admin/Update.test.ts
@@ -9,7 +9,7 @@ afterEach(() => {
 test('button should be disabled if update is unavailable', () => {
   window.blessing.extra = { canUpdate: false }
   const wrapper = mount(Update)
-  expect(wrapper.find('.btn').attributes('disabled')).toBe('disabled')
+  expect(wrapper.find('button').attributes('disabled')).toBe('disabled')
 })
 
 test('perform update', async () => {
@@ -22,7 +22,7 @@ test('perform update', async () => {
   Vue.prototype.$http.get
     .mockResolvedValue({ total: 2048, downloaded: 2048 })
   const wrapper = mount(Update)
-  const button = wrapper.find('.btn')
+  const button = wrapper.find('button')
 
   button.trigger('click')
   await flushPromises()
diff --git a/resources/assets/tests/views/admin/Users.test.ts b/resources/assets/tests/views/admin/Users.test.ts
index 36a33bb5..1ea8ad3d 100644
--- a/resources/assets/tests/views/admin/Users.test.ts
+++ b/resources/assets/tests/views/admin/Users.test.ts
@@ -2,6 +2,7 @@ import Vue from 'vue'
 import { mount } from '@vue/test-utils'
 import Users from '@/views/admin/Users.vue'
 import '@/scripts/i18n'
+import { Button } from 'element-ui'
 import { MessageBoxData } from 'element-ui/types/message-box'
 import { flushPromises } from '../../utils'
 
@@ -146,7 +147,7 @@ test('deletion button should not be displayed for super admins', async () => {
   })
   const wrapper = mount(Users)
   await wrapper.vm.$nextTick()
-  expect(wrapper.find('.btn-danger').attributes('disabled')).toBe('disabled')
+  expect(wrapper.find('[data-test="deleteUser"]').attributes('disabled')).toBe('disabled')
 })
 
 test('deletion button should be displayed for admins as super admin', async () => {
@@ -159,7 +160,7 @@ test('deletion button should be displayed for admins as super admin', async () =
   })
   const wrapper = mount(Users)
   await wrapper.vm.$nextTick()
-  expect(wrapper.find('.btn-danger').attributes('disabled')).toBeNil()
+  expect(wrapper.find('[data-test="deleteUser"]').attributes('disabled')).toBeNil()
 })
 
 test('deletion button should be displayed for normal users as super admin', async () => {
@@ -172,7 +173,7 @@ test('deletion button should be displayed for normal users as super admin', asyn
   })
   const wrapper = mount(Users)
   await wrapper.vm.$nextTick()
-  expect(wrapper.find('.btn-danger').attributes('disabled')).toBeNil()
+  expect(wrapper.find('[data-test="deleteUser"]').attributes('disabled')).toBeNil()
 })
 
 test('deletion button should be displayed for banned users as super admin', async () => {
@@ -185,7 +186,7 @@ test('deletion button should be displayed for banned users as super admin', asyn
   })
   const wrapper = mount(Users)
   await wrapper.vm.$nextTick()
-  expect(wrapper.find('.btn-danger').attributes('disabled')).toBeNil()
+  expect(wrapper.find('[data-test="deleteUser"]').attributes('disabled')).toBeNil()
 })
 
 test('deletion button should not be displayed for other admins as admin', async () => {
@@ -198,7 +199,7 @@ test('deletion button should not be displayed for other admins as admin', async
   })
   const wrapper = mount(Users)
   await wrapper.vm.$nextTick()
-  expect(wrapper.find('.btn-danger').attributes('disabled')).toBe('disabled')
+  expect(wrapper.find('[data-test="deleteUser"]').attributes('disabled')).toBe('disabled')
 })
 
 test('deletion button should be displayed for normal users as admin', async () => {
@@ -211,7 +212,7 @@ test('deletion button should be displayed for normal users as admin', async () =
   })
   const wrapper = mount(Users)
   await wrapper.vm.$nextTick()
-  expect(wrapper.find('.btn-danger').attributes('disabled')).toBeNil()
+  expect(wrapper.find('[data-test="deleteUser"]').attributes('disabled')).toBeNil()
 })
 
 test('deletion button should be displayed for banned users as admin', async () => {
@@ -224,7 +225,7 @@ test('deletion button should be displayed for banned users as admin', async () =
   })
   const wrapper = mount(Users)
   await wrapper.vm.$nextTick()
-  expect(wrapper.find('.btn-danger').attributes('disabled')).toBeNil()
+  expect(wrapper.find('[data-test="deleteUser"]').attributes('disabled')).toBeNil()
 })
 
 test('change email', async () => {
@@ -343,7 +344,7 @@ test('change password', async () => {
 
   const wrapper = mount(Users)
   await wrapper.vm.$nextTick()
-  const button = wrapper.find('.btn-default')
+  const button = wrapper.findAll(Button).at(0)
 
   button.trigger('click')
   expect(Vue.prototype.$http.post).not.toBeCalled()
@@ -480,7 +481,7 @@ test('delete user', async () => {
 
   const wrapper = mount(Users)
   await wrapper.vm.$nextTick()
-  const button = wrapper.find('.btn-danger')
+  const button = wrapper.findAll(Button).at(1)
 
   button.trigger('click')
   expect(Vue.prototype.$http.post).not.toBeCalled()
diff --git a/resources/assets/tests/views/user/Closet.test.ts b/resources/assets/tests/views/user/Closet.test.ts
index 8710a4a4..0cb4c08a 100644
--- a/resources/assets/tests/views/user/Closet.test.ts
+++ b/resources/assets/tests/views/user/Closet.test.ts
@@ -206,7 +206,7 @@ test('submit applying texture', async () => {
   Vue.prototype.$http.post.mockResolvedValueOnce({ errno: 1 })
     .mockResolvedValue({ errno: 0, msg: 'ok' })
   const wrapper = mount(Closet)
-  const button = wrapper.find('.modal-footer > a:nth-child(2)')
+  const button = wrapper.find('[data-test=submitApplyTexture]')
 
   button.trigger('click')
   expect(Vue.prototype.$message.info).toBeCalledWith('user.emptySelectedPlayer')
@@ -252,9 +252,7 @@ test('reset selected texture', () => {
     skinUrl: 'a',
     capeUrl: 'b',
   })
-  wrapper.find(Previewer).findAll('button')
-    .at(1)
-    .trigger('click')
+  wrapper.find('[data-test="resetSelected"]').trigger('click')
   expect(wrapper.vm).toEqual(expect.objectContaining({
     selectedSkin: 0,
     selectedCape: 0,
diff --git a/resources/assets/tests/views/user/Players.test.ts b/resources/assets/tests/views/user/Players.test.ts
index d2bcf27b..16a4231b 100644
--- a/resources/assets/tests/views/user/Players.test.ts
+++ b/resources/assets/tests/views/user/Players.test.ts
@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import { mount } from '@vue/test-utils'
+import { Button } from 'element-ui'
 import { MessageBoxData } from 'element-ui/types/message-box'
 import { flushPromises } from '../../utils'
 import Players from '@/views/user/Players.vue'
@@ -74,7 +75,7 @@ test('change player name', async () => {
     })
   const wrapper = mount(Players)
   await wrapper.vm.$nextTick()
-  const button = wrapper.find('.btn-default')
+  const button = wrapper.findAll(Button).at(0)
 
   button.trigger('click')
   expect(Vue.prototype.$http.post).not.toBeCalled()
@@ -103,7 +104,7 @@ test('delete player', async () => {
     .mockResolvedValue('confirm')
   const wrapper = mount(Players)
   await wrapper.vm.$nextTick()
-  const button = wrapper.find('.btn-danger')
+  const button = wrapper.findAll(Button).at(2)
 
   button.trigger('click')
   expect(Vue.prototype.$http.post).not.toBeCalled()
@@ -130,8 +131,7 @@ test('add player', async () => {
     .mockResolvedValueOnce({ errno: 1 })
     .mockResolvedValue({ errno: 0 })
   const wrapper = mount(Players)
-  const button = wrapper.findAll('.modal-footer').at(0)
-    .find('a')
+  const button = wrapper.find('[data-test=addPlayer]')
   wrapper.find('input[type="text"]').setValue('the-new')
 
   button.trigger('click')
@@ -160,8 +160,7 @@ test('clear texture', async () => {
     .mockResolvedValue({ errno: 0, msg: 'ok' })
   const wrapper = mount(Players)
   await wrapper.vm.$nextTick()
-  const button = wrapper.findAll('.modal-footer').at(1)
-    .find('a')
+  const button = wrapper.find('[data-test=clearTexture]')
   wrapper.find('.player').trigger('click')
 
   button.trigger('click')
diff --git a/resources/lang/en/admin.yml b/resources/lang/en/admin.yml
index 836b16cf..6ca4923c 100644
--- a/resources/lang/en/admin.yml
+++ b/resources/lang/en/admin.yml
@@ -125,7 +125,7 @@ update:
       text: "Download Link:"
       link: Click to download full update package.
 
-    check-github: <a href=":url" target="_blank" class="btn btn-default pull-right">Check GitHub Releases</a>
+    check-github: <a href=":url" target="_blank" class="el-button pull-right">Check GitHub Releases</a>
     button: Update Now
 
   cautions:
diff --git a/resources/lang/zh_CN/admin.yml b/resources/lang/zh_CN/admin.yml
index 812398a2..1cb8fa1f 100644
--- a/resources/lang/zh_CN/admin.yml
+++ b/resources/lang/zh_CN/admin.yml
@@ -130,7 +130,7 @@ update:
       text: 下载地址：
       link: 点击下载完整安装包
 
-    check-github: <a href=":url" target="_blank" class="btn btn-default pull-right">查看 GitHub Releases</a>
+    check-github: <a href=":url" target="_blank" class="el-button pull-right">查看 GitHub Releases</a>
     button: 马上升级
 
   cautions:
diff --git a/resources/views/admin/update.blade.php b/resources/views/admin/update.blade.php
index 0eb12036..48063691 100644
--- a/resources/views/admin/update.blade.php
+++ b/resources/views/admin/update.blade.php
@@ -95,7 +95,7 @@
                     </div><!-- /.box-body -->
                     <div class="box-footer">
                         <span id="update-button"></span>
-                        {!! trans('admin.update.info.check-github', ['url' => 'https://github.com/printempw/blessing-skin-server/releases']) !!}
+                        {!! trans('admin.update.info.check-github', ['url' => 'https://github.com/bs-community/blessing-skin-server/releases']) !!}
                     </div>
                 </div>
 
diff --git a/resources/views/user/index.blade.php b/resources/views/user/index.blade.php
index dd1c5d3b..864aea07 100644
--- a/resources/views/user/index.blade.php
+++ b/resources/views/user/index.blade.php
@@ -67,7 +67,7 @@
                 </div>
             </div>
             <div class="modal-footer">
-                <button type="button" class="btn btn-default" data-dismiss="modal">@lang('general.close')</button>
+                <button class="el-button" data-dismiss="modal">@lang('general.close')</button>
             </div>
         </div><!-- /.modal-content -->
     </div><!-- /.modal-dialog -->