diff --git a/src/script/component/Ban.vue b/src/script/component/Ban.vue
index d8f3de8..26feada 100644
--- a/src/script/component/Ban.vue
+++ b/src/script/component/Ban.vue
@@ -4,24 +4,24 @@
.noactive.stamp(title='Expired', v-if='expired')
i.fa.fa-fw.fa-ban
.info
- .section
- span.key User
- span.value {{ user.display_name }}
- .section
- span.key Admin
- span.value {{ admin.display_name }}
- .section
- span.key Reason
- span.value {{ reason }}
- .section
- span.key Placed
- span.value {{ new Date(created_at).toString() }}
- .section
- span.key Expires
- span.value(v-if='expires_at') {{ new Date(expires_at).toString() }}
- span.value(v-else='v-else')
+ .row
+ .col-3 User
+ .col {{ user.display_name }}
+ .row
+ .col-3 Admin
+ .col {{ admin.display_name }}
+ .row
+ .col-3 Reason
+ .col {{ reason }}
+ .row
+ .col-3 Placed
+ .col {{ new Date(created_at).toString() }}
+ .row
+ .col-3 Expires
+ .col(v-if='expires_at') {{ new Date(expires_at).toString() }}
+ .col(v-else='v-else')
b This ban is permanent.
- .button.remove(@click='$parent.$emit("pardon", id)')
+ .btn.btn-success.remove.mt-3(@click='$parent.$emit("pardon", id)')
i.fa.fa-fw.fa-check
| Pardon
diff --git a/src/script/component/BanList.vue b/src/script/component/BanList.vue
index 370615a..43f3375 100644
--- a/src/script/component/BanList.vue
+++ b/src/script/component/BanList.vue
@@ -1,7 +1,7 @@
#banlist
h3 Bans ({{pagination.total}})
- .message.error(v-if='error') {{ error }}
+ .alert.alert-danger(v-if='error') {{ error }}
.entry(v-else)
pagination(:page="pagination.page" :pages="pagination.pages" v-on:page="getBans")
.list.bans
diff --git a/src/script/component/BanModal.vue b/src/script/component/BanModal.vue
index 8d177d1..56d271b 100644
--- a/src/script/component/BanModal.vue
+++ b/src/script/component/BanModal.vue
@@ -2,18 +2,18 @@
modal(:show='show', @close='close')
.modal-header
h3 Ban user
- .modal-body.aligned-form
- .message.error(v-if='error') {{ error }}
+ .modal-body
+ .alert.alert-danger(v-if='error') {{ error }}
input(type='hidden', name='user_id', :value='id')
- .cell
+ .form-group
label(for='reason') Reason
- input#reason(type='text', name='reason', v-model='reason')
- .cell
+ input.form-control#reason(type='text', name='reason', v-model='reason')
+ .form-group
label(for='expires_at') Expires
- input#expires_at(type='date', name='expires_at', v-model='expires_at')
- .modal-footer.text-align
- button(@click='submit') Ban
- button(@click='close') Cancel
+ input.form-control#expires_at(type='date', name='expires_at', v-model='expires_at')
+ .modal-footer.text-right
+ button.btn.btn-primary(@click='submit') Ban
+ button.btn.btn-secondary(@click='close') Cancel
diff --git a/src/script/component/UserModal.vue b/src/script/component/UserModal.vue
index 1f0903e..dbc3e23 100644
--- a/src/script/component/UserModal.vue
+++ b/src/script/component/UserModal.vue
@@ -2,27 +2,27 @@
modal(:show='show', @close='close')
.modal-header
h3 Edit User
- .modal-body.aligned-form
- .message.error(v-if='error') {{ error }}
- .cell
+ .modal-body
+ .alert.alert-danger(v-if='error') {{ error }}
+ .form-group
label(for="username") Username
- input(type="text" id="username" name="username" v-model="username")
- .cell
+ input.form-control(type="text" id="username" name="username" v-model="username")
+ .form-group
label(for="display_name") Display Name
- input(type="text" id="display_name" name="display_name" v-model="display_name")
- .cell
+ input.form-control(type="text" id="display_name" name="display_name" v-model="display_name")
+ .form-group
label(for="email") Email
- input(type="email" id="email" name="email" v-model="email")
- .cell
+ input.form-control(type="email" id="email" name="email" v-model="email")
+ .form-group
label(for="privilege") Privilege
input(type="range" min="0" max="5" step="1" id="privilege" name="privilege" v-model="nw_privilege")
span {{ nw_privilege }}
- .cell
- label(for="activated") Activated
- input(type="checkbox" id="activated" name="activated" v-model="activated")
- .modal-footer.text-align
- button(@click='submit') Done
- button(@click='close') Cancel
+ .form-check
+ input.form-check-input(type="checkbox" id="activated" name="activated" v-model="activated")
+ label.form-check-label(for="activated") Activated
+ .modal-footer.text-right
+ button.btn.btn-primary(@click='submit') Done
+ button.btn.btn-secondary(@click='close') Cancel