chore(front): admin moderation pages

front/src/components/common/ActionTable.vue

@@ -208,6 +208,7 @@ const launchAction = async () => {
                   :disabled="checked.length === 0 || undefined"
                   :is-loading="isLoading"
                   :confirm-color="currentAction?.confirmColor ?? 'success'"
+                  style="margin-top: 7px;"
                   :aria-label="labels.performAction"
                   :title="t('components.common.ActionTable.modal.performAction.header', { action: currentActionName }, affectedObjectsCount)"
                   @confirm="launchAction"

front/src/components/manage/moderation/AccountsTable.vue

@@ -11,7 +11,11 @@ import axios from 'axios'
 
 import useSharedLabels from '~/composables/locale/useSharedLabels'
 import ActionTable from '~/components/common/ActionTable.vue'
-import Pagination from '~/components/vui/Pagination.vue'
+
+import Layout from '~/components/ui/Layout.vue'
+import Spacer from '~/components/ui/Spacer.vue'
+import Input from '~/components/ui/Input.vue'
+import Pagination from '~/components/ui/Pagination.vue'
 
 import useSmartSearch from '~/composables/navigation/useSmartSearch'
 import useOrdering from '~/composables/navigation/useOrdering'
@@ -98,22 +102,21 @@ const labels = computed(() => ({
 </script>
 
 <template>
-  <div>
+  <Spacer />
   <div class="ui inline form">
     <div class="fields">
-        <div class="ui six wide field">
-          <label for="accounts-search">{{ t('components.manage.moderation.AccountsTable.label.search') }}</label>
       <form @submit.prevent="query = search.value">
-            <input
+        <Input
           id="accounts-search"
-              ref="search"
-              name="search"
-              type="text"
-              :value="query"
+          v-model="query"
+          search
+          :label="t('components.manage.moderation.AccountsTable.label.search')"
           :placeholder="labels.searchPlaceholder"
-            >
+        />
       </form>
-        </div>
+      <Spacer :size="16" />
+      <Layout flex>
+        <Spacer grow />
         <div class="field">
           <label for="accounts-ordering">{{ t('components.manage.moderation.AccountsTable.ordering.label') }}</label>
           <select
@@ -145,15 +148,11 @@ const labels = computed(() => ({
             </option>
           </select>
         </div>
+      </Layout>
     </div>
   </div>
   <div class="dimmable">
-      <div
-        v-if="isLoading"
-        class="ui active inverted dimmer"
-      >
-        <div class="ui loader" />
-      </div>
+    <Loader v-if="isLoading" />
     <action-table
       v-if="result"
       :objects-data="result"
@@ -231,17 +230,14 @@ const labels = computed(() => ({
     </action-table>
   </div>
   <div>
-      <pagination
+    <Pagination
       v-if="result && result.count > paginateBy"
       v-model:current="page"
-        :compact="true"
       :paginate-by="paginateBy"
-        :total="result.count"
     />
 
     <span v-if="result && result.results.length > 0">
       {{ t('components.manage.moderation.AccountsTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
     </span>
   </div>
-  </div>
 </template>

front/src/components/manage/moderation/DomainsTable.vue

@@ -10,7 +10,12 @@ import { useI18n } from 'vue-i18n'
 import axios from 'axios'
 
 import ActionTable from '~/components/common/ActionTable.vue'
-import Pagination from '~/components/vui/Pagination.vue'
+
+import Layout from '~/components/ui/Layout.vue'
+import Spacer from '~/components/ui/Spacer.vue'
+import Loader from '~/components/ui/Loader.vue'
+import Input from '~/components/ui/Input.vue'
+import Pagination from '~/components/ui/Pagination.vue'
 
 import useSharedLabels from '~/composables/locale/useSharedLabels'
 import useOrdering from '~/composables/navigation/useOrdering'
@@ -120,19 +125,21 @@ const labels = computed(() => ({
 </script>
 
 <template>
-  <div>
   <div class="ui inline form">
     <div class="fields">
       <div class="ui field">
-          <label for="domains-search">{{ t('components.manage.moderation.DomainsTable.label.search') }}</label>
-          <input
+        <Input
           id="domains-search"
           v-model="query"
           name="search"
-            type="text"
+          search
+          :label="t('components.manage.moderation.DomainsTable.label.search')"
           :placeholder="labels.searchPlaceholder"
-          >
+        />
       </div>
+      <Spacer :size="16" />
+      <Layout flex>
+        <Spacer grow />
         <div
           v-if="allowListEnabled"
           class="field"
@@ -185,15 +192,11 @@ const labels = computed(() => ({
             </option>
           </select>
         </div>
+      </Layout>
     </div>
   </div>
   <div class="dimmable">
-      <div
-        v-if="isLoading"
-        class="ui active inverted dimmer"
-      >
-        <div class="ui loader" />
-      </div>
+    <Loader v-if="isLoading" />
     <action-table
       v-if="result && result.results.length > 0"
       :objects-data="result"
@@ -270,5 +273,4 @@ const labels = computed(() => ({
       {{ t('components.manage.moderation.DomainsTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
     </span>
   </div>
-  </div>
 </template>

front/src/views/admin/CommonList.vue

@@ -11,6 +11,8 @@ import TracksTable from '~/components/manage/library/TracksTable.vue'
 import UploadsTable from '~/components/manage/library/UploadsTable.vue'
 import UsersTable from '~/components/manage/users/UsersTable.vue'
 
+import Header from '~/components/ui/Header.vue'
+
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -43,13 +45,8 @@ const title = computed(() => labels.value[props.type])
 </script>
 
 <template>
-  <main v-title="title">
-    <section class="ui vertical stripe segment">
-      <h2 class="ui header">
-        {{ title }}
-      </h2>
+  <Header :h1="title" />
   <invitation-form v-if="type === 'invitations'" />
-      <div class="ui hidden divider" />
   <accounts-table
     v-if="type === 'accounts'"
     :update-url="true"
@@ -92,6 +89,4 @@ const title = computed(() => labels.value[props.type])
     :default-query="defaultQuery"
   />
   <users-table v-else-if="type === 'users'" />
-    </section>
-  </main>
 </template>

front/src/views/admin/moderation/AccountsDetail.vue

@@ -10,6 +10,12 @@ import { useStore } from '~/store'
 import axios from 'axios'
 import $ from 'jquery'
 
+import Layout from '~/components/ui/Layout.vue'
+import Loader from '~/components/ui/Loader.vue'
+import Button from '~/components/ui/Button.vue'
+import Spacer from '~/components/ui/Spacer.vue'
+import Input from '~/components/ui/Input.vue'
+
 import InstancePolicyForm from '~/components/manage/moderation/InstancePolicyForm.vue'
 import InstancePolicyCard from '~/components/manage/moderation/InstancePolicyCard.vue'
 
@@ -146,29 +152,26 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
 </script>
 
 <template>
-  <main class="page-admin-account-detail">
-    <div
-      v-if="isLoading"
-      class="ui vertical segment"
+  <Layout
+    main
+    stack
+    class="page-admin-account-detail"
   >
-      <div :class="['ui', 'centered', 'active', 'inline', 'loader']" />
-    </div>
+    <Loader
+      v-if="isLoading"
+    />
     <template v-if="object">
       <section
         v-title="object.full_username"
-        :class="['ui', 'head', 'vertical', 'stripe', 'segment']"
       >
-        <div class="ui stackable two column grid">
-          <div class="ui column">
-            <div class="segment-content">
+        <Layout flex>
           <h2 class="ui header">
-                <i class="circular inverted user icon" />
-                <div class="content">
+            <i class="bi-person-circle" />
               {{ object.full_username }}
             <div class="sub header">
               <template v-if="object.user">
                 <span class="ui tiny accent label">
-                        <i class="home icon" />
+                  <i class="bi-house-fill" />
                   {{ t('views.admin.moderation.AccountsDetail.header.localAccount') }}
                 </span>
                 &nbsp;
@@ -179,13 +182,12 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                 rel="noopener noreferrer"
               >
                 {{ t('views.admin.moderation.AccountsDetail.link.openProfile') }}&nbsp;
-                      <i class="external icon" />
+                <i class="bi bi-box-arrow-up-right" />
               </a>
             </div>
-                </div>
           </h2>
-              <div class="header-buttons">
-                <div class="ui icon buttons">
+          <Spacer grow />
+          <Layout stack>
             <a
               v-if="object.user && store.state.auth.profile && store.state.auth.profile.is_superuser"
               class="ui labeled icon button"
@@ -193,40 +195,27 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
               target="_blank"
               rel="noopener noreferrer"
             >
-                    <i class="wrench icon" />
+              <i class="bi bi-wrench" />
               {{ t('views.admin.moderation.AccountsDetail.link.django') }}&nbsp;
             </a>
             <a
               v-else-if="store.state.auth.profile && store.state.auth.profile.is_superuser"
-                    class="ui labeled icon button"
               :href="store.getters['instance/absoluteUrl'](`/api/admin/federation/actor/${object.id}`)"
               target="_blank"
               rel="noopener noreferrer"
             >
-                    <i class="wrench icon" />
+              <i class="bi bi-wrench" />
               {{ t('views.admin.moderation.AccountsDetail.link.django') }}&nbsp;
             </a>
-                  <button
-                    v-dropdown
-                    class="ui floating dropdown icon button"
-                  >
-                    <i class="dropdown icon" />
-                    <div class="menu">
             <a
-                        class="basic item"
               :href="object.url || object.fid"
               target="_blank"
               rel="noopener noreferrer"
             >
-                        <i class="external icon" />
+              <i class="bi bi-box-arrow-up-right" />
               {{ t('views.admin.moderation.AccountsDetail.link.remoteProfile') }}&nbsp;
             </a>
-                    </div>
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
+          </Layout>
           <div class="ui column">
             <div
               v-if="!object.user"
@@ -244,19 +233,19 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
               <template v-else-if="!policy && !showPolicyForm">
                 <header class="ui header">
                   <h3>
-                    <i class="shield icon" />
+                    <i class="bi bi-shield-fill" />
                     {{ t('views.admin.moderation.AccountsDetail.header.noPolicy') }}
                   </h3>
                 </header>
                 <p>
                   {{ t('views.admin.moderation.AccountsDetail.description.policy') }}
                 </p>
-                <button
-                  class="ui primary button"
+                <Button
+                  primary
                   @click="showPolicyForm = true"
                 >
                   {{ t('views.admin.moderation.AccountsDetail.button.addPolicy') }}
-                </button>
+                </Button>
               </template>
               <instance-policy-card
                 v-else-if="policy && !showPolicyForm"
@@ -280,17 +269,14 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
               />
             </div>
           </div>
-        </div>
+        </Layout>
       </section>
-      <div class="ui vertical stripe segment">
-        <div class="ui stackable three column grid">
+      <Layout flex>
         <div class="column">
           <section>
             <h3 class="ui header">
-                <i class="info icon" />
-                <div class="content">
+              <i class="bi bi-info-circle-fill" />
               {{ t('views.admin.moderation.AccountsDetail.header.accountData') }}
-                </div>
             </h3>
             <table class="ui very basic table">
               <tbody>
@@ -337,12 +323,12 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                       v-if="object.user.username != store.state.auth.profile?.username"
                       class="ui toggle checkbox"
                     >
-                        <input
+                      <Input
                         id="is-active"
                         v-model="object.user.is_active"
                         type="checkbox"
                         @change="updateUser('is_active')"
-                        >
+                      />
                       <label for="is-active">
                         <span
                           v-if="object.user.is_active"
@@ -433,11 +419,9 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
         <div class="column">
           <section>
             <h3 class="ui header">
-                <i class="feed icon" />
-                <div class="content">
+              <i class="bi bi-rss-fill" />
               {{ t('views.admin.moderation.AccountsDetail.header.activity') }}&nbsp;
-                  <span :data-tooltip="labels.statsWarning"><i class="question circle icon" /></span>
-                </div>
+              <span :data-tooltip="labels.statsWarning"><i class=" bi bi-question-circle-fill" /></span>
             </h3>
             <div
               v-if="isLoadingStats"
@@ -512,11 +496,9 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
         <div class="column">
           <section>
             <h3 class="ui header">
-                <i class="music icon" />
-                <div class="content">
+              <i class="bi bi-music-note-beamed" />
               {{ t('views.admin.moderation.AccountsDetail.header.audioContent') }}&nbsp;
               <span :data-tooltip="labels.statsWarning"><i class="question circle icon" /></span>
-                </div>
             </h3>
             <div
               v-if="isLoadingStats"
@@ -546,14 +528,13 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                     <span :data-tooltip="labels.uploadQuota"><i class="question circle icon" /></span>
                   </td>
                   <td>
-                      <div class="ui right labeled input">
-                        <input
+                    <Input
                       v-model.number="object.user.upload_quota"
                       step="100"
                       name="quota"
                       type="number"
                       @change="updateUser('upload_quota', true)"
-                        >
+                    />
                     <div class="ui basic label">
                       {{ t('views.admin.moderation.AccountsDetail.table.audioContent.megabyte') }}
                     </div>
@@ -562,7 +543,6 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
                       size="tiny"
                       :is-loading="updating.has('upload_quota')"
                     />
-                      </div>
                   </td>
                 </tr>
                 <tr>
@@ -631,8 +611,7 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
             </table>
           </section>
         </div>
-        </div>
-      </div>
+      </Layout>
     </template>
-  </main>
+  </Layout>
 </template>

front/src/views/admin/moderation/Base.vue

@@ -7,6 +7,11 @@ import { useRoute } from 'vue-router'
 
 import axios from 'axios'
 
+import Layout from '~/components/ui/Layout.vue'
+import Tabs from '~/components/ui/Tabs.vue'
+import Tab from '~/components/ui/Tab.vue'
+
+
 const store = useStore()
 const { t } = useI18n()
 const route = useRoute()
@@ -26,55 +31,50 @@ fetchNodeInfo()
 </script>
 
 <template>
-  <div
+<!-- TODO: Replace with Tabs component -->
+  <Layout
     v-title="labels.moderation"
-    class="main"
+    main
+    no-gap
   >
-    <nav
-      class="ui secondary pointing menu"
+    <Tabs
       role="navigation"
       :aria-label="labels.secondaryMenu"
     >
-      <router-link
-        class="ui item"
+      <Tab
+        :title="t('views.admin.moderation.Base.link.reports')"
         :to="{name: 'manage.moderation.reports.list', query: {q: 'resolved:no'}}"
       >
-        {{ t('views.admin.moderation.Base.link.reports') }}
         <div
           v-if="store.state.ui.notifications.pendingReviewReports > 0"
           :class="['ui', 'circular', 'mini', 'right floated', 'accent', 'label']"
         >
           {{ store.state.ui.notifications.pendingReviewReports }}
         </div>
-      </router-link>
-      <router-link
-        class="ui item"
+      </Tab>
+      <Tab
+        :title="t('views.admin.moderation.Base.link.userRequests')"
         :to="{name: 'manage.moderation.requests.list', query: {q: 'status:pending'}}"
       >
-        {{ t('views.admin.moderation.Base.link.userRequests') }}
         <div
           v-if="store.state.ui.notifications.pendingReviewRequests > 0"
           :class="['ui', 'circular', 'mini', 'right floated', 'accent', 'label']"
         >
           {{ store.state.ui.notifications.pendingReviewRequests }}
         </div>
-      </router-link>
-      <router-link
-        class="ui item"
+      </Tab>
+      <Tab
+        :title="t('views.admin.moderation.Base.link.domains')"
         :to="{name: 'manage.moderation.domains.list'}"
-      >
-        {{ t('views.admin.moderation.Base.link.domains') }}
-      </router-link>
-      <router-link
-        class="ui item"
+      />
+      <Tab
+        :title="t('views.admin.moderation.Base.link.accounts')"
         :to="{name: 'manage.moderation.accounts.list'}"
-      >
-        {{ t('views.admin.moderation.Base.link.accounts') }}
-      </router-link>
-    </nav>
+      />
+    </Tabs>
     <router-view
       :key="route.fullPath"
       :allow-list-enabled="allowListEnabled"
     />
-  </div>
+  </Layout>
 </template>

front/src/views/admin/moderation/DomainsList.vue

@@ -9,6 +9,14 @@ import axios from 'axios'
 
 import DomainsTable from '~/components/manage/moderation/DomainsTable.vue'
 
+import Layout from '~/components/ui/Layout.vue'
+import Spacer from '~/components/ui/Spacer.vue'
+import Header from '~/components/ui/Header.vue'
+import Toggle from '~/components/ui/Toggle.vue'
+import Button from '~/components/ui/Button.vue'
+import Input from '~/components/ui/Input.vue'
+import Alert from '~/components/ui/Alert.vue'
+
 interface Props {
   allowListEnabled: boolean
 }
@@ -48,18 +56,14 @@ const createDomain = async () => {
 
 <template>
   <main v-title="labels.domains">
-    <section class="ui vertical stripe segment">
-      <h2 class="ui left floated header">
-        {{ t('views.admin.moderation.DomainsList.header.domains') }}
-      </h2>
-      <form
-        class="ui right floated form"
+    <Layout
+      form
       @submit.prevent="createDomain"
     >
-        <div
+      <Header :h1="t('views.admin.moderation.DomainsList.header.domains')" />
+      <Alert
         v-if="errors && errors.length > 0"
-          role="alert"
-          class="ui negative message"
+        red
       >
         <h4 class="header">
           {{ t('views.admin.moderation.DomainsList.header.failure') }}
@@ -72,42 +76,39 @@ const createDomain = async () => {
             {{ error }}
           </li>
         </ul>
-        </div>
-        <div class="inline fields">
+      </Alert>
       <div class="field">
-            <label for="add-domain">{{ t('views.admin.moderation.DomainsList.label.addDomain') }}</label>
-            <input
+        <Input
           id="add-domain"
           v-model="domainName"
           type="text"
           name="domain"
+          :label="t('views.admin.moderation.DomainsList.label.addDomain')"
         >
-          </div>
-          <div
-            v-if="allowListEnabled"
-            class="field"
-          >
-            <input
-              id="allowed"
-              v-model="domainAllowed"
-              type="checkbox"
-              name="allowed"
-            >
-            <label for="allowed">{{ t('views.admin.moderation.DomainsList.label.addToAllowList') }}</label>
-          </div>
-          <div class="field">
-            <button
-              :class="['ui', {'loading': isCreating}, 'success', 'button']"
+          <template #input-right>
+            <Button
+              primary
+              :class="[{'loading': isCreating}, 'success']"
               type="submit"
               :disabled="isCreating"
             >
               {{ t('views.admin.moderation.DomainsList.button.add') }}
-            </button>
+            </Button>
+          </template>
+        </Input>
+        <div
+          v-if="allowListEnabled"
+        >
+          <Toggle
+            id="allowed"
+            v-model="domainAllowed"
+            name="allowed"
+            :label="t('views.admin.moderation.DomainsList.label.addToAllowList')"
+          />
         </div>
       </div>
-      </form>
-      <div class="ui clearing hidden divider" />
+    </Layout>
+    <Spacer />
     <domains-table :allow-list-enabled="allowListEnabled" />
-    </section>
   </main>
 </template>

front/src/views/admin/moderation/ReportsList.vue

@@ -13,7 +13,12 @@ import axios from 'axios'
 
 import ReportCategoryDropdown from '~/components/moderation/ReportCategoryDropdown.vue'
 import ReportCard from '~/components/manage/moderation/ReportCard.vue'
-import Pagination from '~/components/vui/Pagination.vue'
+
+import Layout from '~/components/ui/Layout.vue'
+import Spacer from '~/components/ui/Spacer.vue'
+import Header from '~/components/ui/Header.vue'
+import Input from '~/components/ui/Input.vue'
+import Pagination from '~/components/ui/Pagination.vue'
 
 import useSmartSearch from '~/composables/navigation/useSmartSearch'
 import useSharedLabels from '~/composables/locale/useSharedLabels'
@@ -99,27 +104,31 @@ const labels = computed(() => ({
 </script>
 
 <template>
-  <main v-title="labels.reports">
-    <section class="ui vertical stripe segment">
-      <h2 class="ui header">
-        {{ t('views.admin.moderation.ReportsList.header.reports') }}
-      </h2>
-      <div class="ui hidden divider" />
+  <Layout
+    v-title="labels.reports"
+    stack
+  >
+    <Header :h1="t('views.admin.moderation.ReportsList.header.reports')" />
     <div class="ui inline form">
       <div class="fields">
         <div class="ui field">
           <label for="reports-search">{{ t('views.admin.moderation.ReportsList.label.search') }}</label>
           <form @submit.prevent="query = search.value">
-              <input
+            <Input
               id="reports-search"
               ref="search"
               name="search"
-                type="text"
+              search
               :value="query"
               :placeholder="labels.searchPlaceholder"
-              >
+            />
           </form>
         </div>
+        <Spacer :size="16" />
+        <Layout
+          flex
+        >
+          <Spacer grow />
           <div class="field">
             <label for="reports-status">{{ t('views.admin.moderation.ReportsList.label.status') }}</label>
             <select
@@ -177,6 +186,7 @@ const labels = computed(() => ({
               </option>
             </select>
           </div>
+        </Layout>
       </div>
     </div>
     <div
@@ -200,13 +210,11 @@ const labels = computed(() => ({
       />
     </div>
     <div class="ui center aligned basic segment">
-        <pagination
+      <Pagination
         v-if="result && result.count > paginateBy"
         v-model:current="page"
         :paginate-by="paginateBy"
-          :total="result.count"
       />
     </div>
-    </section>
-  </main>
+  </Layout>
 </template>

front/src/views/admin/moderation/RequestsList.vue

@@ -12,7 +12,13 @@ import { useStore } from '~/store'
 import axios from 'axios'
 
 import UserRequestCard from '~/components/manage/moderation/UserRequestCard.vue'
-import Pagination from '~/components/vui/Pagination.vue'
+
+import Layout from '~/components/ui/Layout.vue'
+import Spacer from '~/components/ui/Spacer.vue'
+import Pagination from '~/components/ui/Pagination.vue'
+import Input from '~/components/ui/Input.vue'
+import Loader from '~/components/ui/Loader.vue'
+import Header from '~/components/ui/Header.vue'
 
 import useSmartSearch from '~/composables/navigation/useSmartSearch'
 import useSharedLabels from '~/composables/locale/useSharedLabels'
@@ -92,27 +98,26 @@ const labels = computed(() => ({
 </script>
 
 <template>
-  <main v-title="labels.reports">
-    <section class="ui vertical stripe segment">
-      <h2 class="ui header">
-        {{ t('views.admin.moderation.RequestsList.header.userRequests') }}
-      </h2>
-      <div class="ui hidden divider" />
+  <Header :h1="t('views.admin.moderation.RequestsList.header.userRequests')" />
+  <Spacer />
   <div class="ui inline form">
     <div class="fields">
       <div class="ui field">
-            <label for="requests-search">{{ t('views.admin.moderation.RequestsList.label.search') }}</label>
         <form @submit.prevent="query = search.value">
-              <input
+          <Input
             id="requests-search"
             ref="search"
             name="search"
-                type="text"
+            search
+            :label="t('views.admin.moderation.RequestsList.label.search')"
             :value="query"
             :placeholder="labels.searchPlaceholder"
-              >
+          />
         </form>
       </div>
+      <Spacer :size="16" />
+      <Layout flex>
+        <Spacer grow />
         <div class="field">
           <label for="requests-status">{{ t('views.admin.moderation.RequestsList.label.status') }}</label>
           <select
@@ -166,36 +171,29 @@ const labels = computed(() => ({
             </option>
           </select>
         </div>
+      </Layout>
     </div>
   </div>
-      <div
-        v-if="isLoading"
-        class="ui active inverted dimmer"
-      >
-        <div class="ui loader" />
-      </div>
+  <Loader v-if="isLoading" />
   <div v-else-if="!result || result.count === 0">
+    <Spacer />
     <empty-state
       :refresh="true"
       @refresh="fetchData()"
     />
   </div>
   <template v-else>
+    <Spacer />
     <user-request-card
       v-for="obj in result.results"
       :key="obj.uuid"
       :init-obj="obj"
       @handled="fetchData"
     />
-        <div class="ui center aligned basic segment">
-          <pagination
+    <Pagination
       v-if="result.count > paginateBy"
       v-model:current="page"
       :paginate-by="paginateBy"
-            :total="result.count"
     />
-        </div>
   </template>
-    </section>
-  </main>
 </template>