change users tab icon, cleanup code, remove important css

src/components/settings_modal/admin_tabs/users_tab.scss

@@ -1,9 +1,3 @@
 .user-tab {
   height: 100%;
 }
-
-.stacked-container {
-  // eslint-disable-next-line
-  display: flex !important;
-  flex-direction: column;
-}

src/components/settings_modal/admin_tabs/users_tab.vue

@@ -1,147 +1,170 @@
 <template>
   <div :label="$t('admin_dash.users.management')">
     <div class="setting-item">
-      <h2> filter user search </h2>
-      <div
-        class="stacked-container"
+      <h2> {{ $t('admin_dash.users.title_filter_user_search') }} </h2>
+      <ul
+        class="setting-list"
       >
-        <input
-          v-model="filters_query"
-          :placeholder="$t('admin_dash.users.placeholder_query')"
-          class="input string-input"
-          @input="reset()"
-        >
-        <input
-          v-model="filters_name"
-          :placeholder="$t('admin_dash.users.placeholder_name')"
-          class="input string-input"
-          @input="reset()"
-        >
-        <input
-          v-model="filters_email"
-          :placeholder="$t('admin_dash.users.placeholder_email')"
-          class="input string-input"
-          @input="reset()"
-        >
-      </div>
-      <Select
-        :model-value="filters_origin"
-        @update:model-value="v => update_origin(v)"
-      >
-        <option
-          value="all"
-        >
-          {{ $t('admin_dash.users.all') }}
-        </option>
-        <option
-          value="local"
-        >
-          {{ $t('admin_dash.users.only_local') }}
-        </option>
-        <option
-          value="external"
-        >
-          {{ $t('admin_dash.users.only_external') }}
-        </option>
-      </Select>
-      <Select
-        :model-value="filters_activity"
-        @update:model-value="v => update_activity(v)"
-      >
-        <option
-          value="all"
-        >
-          {{ $t('admin_dash.users.all') }}
-        </option>
-        <option
-          value="active"
-        >
-          {{ $t('admin_dash.users.only_active') }}
-        </option>
-        <option
-          value="deactivated"
-        >
-          {{ $t('admin_dash.users.only_deactivated') }}
-        </option>
-      </Select>
-      <Select
-        :model-value="filters_permission"
-        @update:model-value="v => update_permission(v)"
-      >
-        <option
-          value="all"
-        >
-          {{ $t('admin_dash.users.all') }}
-        </option>
-        <option
-          value="admin"
-        >
-          {{ $t('admin_dash.users.only_administrators') }}
-        </option>
-        <option
-          value="modsnadmins"
-        >
-          {{ $t('admin_dash.users.all_privileged') }}
-        </option>
-        <option
-          value="moderator"
-        >
-          {{ $t('admin_dash.users.only_moderators') }}
-        </option>
-      </Select>
-      <Checkbox
-        @update:model-value="v => {filters.need_approval = v; reset();}"
-      >
-        {{ $t('admin_dash.users.only_unapproved') }}
-      </Checkbox>
-      <Checkbox
-        @update:model-value="v => {filters.unconfirmed = v; reset();}"
-      >
-        {{ $t('admin_dash.users.only_unconfirmed') }}
-      </Checkbox>
-      <button
-        class="button button-default btn"
-        type="button"
-        @click="reset"
-      >
-        {{ $t('admin_dash.users.refresh') }}
-      </button>
+        <li>
+          <input
+            v-model="filters_query"
+            :placeholder="$t('admin_dash.users.placeholder_query')"
+            class="input string-input"
+            @input="reset()"
+          >
+        </li>
+        <li>
+          <input
+            v-model="filters_name"
+            :placeholder="$t('admin_dash.users.placeholder_name')"
+            class="input string-input"
+            @input="reset()"
+          >
+        </li>
+        <li>
+          <input
+            v-model="filters_email"
+            :placeholder="$t('admin_dash.users.placeholder_email')"
+            class="input string-input"
+            @input="reset()"
+          >
+        </li>
+        <li>
+          <Select
+            :model-value="filters_origin"
+            @update:model-value="v => update_origin(v)"
+          >
+            <option
+              value="all"
+            >
+              {{ $t('admin_dash.users.all') }}
+            </option>
+            <option
+              value="local"
+            >
+              {{ $t('admin_dash.users.only_local') }}
+            </option>
+            <option
+              value="external"
+            >
+              {{ $t('admin_dash.users.only_external') }}
+            </option>
+          </Select>
+        </li>
+        <li>
+          <Select
+            :model-value="filters_activity"
+            @update:model-value="v => update_activity(v)"
+          >
+            <option
+              value="all"
+            >
+              {{ $t('admin_dash.users.all') }}
+            </option>
+            <option
+              value="active"
+            >
+              {{ $t('admin_dash.users.only_active') }}
+            </option>
+            <option
+              value="deactivated"
+            >
+              {{ $t('admin_dash.users.only_deactivated') }}
+            </option>
+          </Select>
+        </li>
+        <li>
+          <Select
+            :model-value="filters_permission"
+            @update:model-value="v => update_permission(v)"
+          >
+            <option
+              value="all"
+            >
+              {{ $t('admin_dash.users.all') }}
+            </option>
+            <option
+              value="admin"
+            >
+              {{ $t('admin_dash.users.only_administrators') }}
+            </option>
+            <option
+              value="modsnadmins"
+            >
+              {{ $t('admin_dash.users.all_privileged') }}
+            </option>
+            <option
+              value="moderator"
+            >
+              {{ $t('admin_dash.users.only_moderators') }}
+            </option>
+          </Select>
+        </li>
+        <li>
+          <Checkbox
+            @update:model-value="v => {filters.need_approval = v; reset();}"
+          >
+            {{ $t('admin_dash.users.only_unapproved') }}
+          </Checkbox>
+        </li>
+        <li>
+          <Checkbox
+            @update:model-value="v => {filters.unconfirmed = v; reset();}"
+          >
+            {{ $t('admin_dash.users.only_unconfirmed') }}
+          </Checkbox>
+        </li>
+        <li>
+          <button
+            class="button button-default btn"
+            type="button"
+            @click="reset"
+          >
+            {{ $t('admin_dash.users.refresh') }}
+          </button>
+        </li>
+      </ul>
     </div>
-    <PageList
-      ref="userList"
-      :refresh="true"
-      :get-key="i => i"
-      :box_only="true"
-      :page_size="20"
-      :fetch_page="(store, opts) => fetch_page(store, opts)"
+    <div
+      class="setting-item"
     >
-      <template #header>
-        <button
-          class="button button-default btn"
-          type="button"
-          @click="activate_selection"
-        >
-          {{ $t('admin_dash.users.activate') }}
-        </button>
-        <button
-          class="button button-default btn"
-          type="button"
-          @click="deactivate_selection"
-        >
-          {{ $t('admin_dash.users.deactivate') }}
-        </button>
-        <button
-          class="button button-default btn"
-          type="button"
-          @click="delete_selection"
-        >
-          {{ $t('admin_dash.users.delete') }}
-        </button>
-      </template>
-      <template #item="{item}">
-        <AdminCard :user_details="item" />
-      </template>
-    </PageList>
+      <h2> {{ $t('admin_dash.users.title_users') }} </h2>
+      <PageList
+        ref="userList"
+        :refresh="true"
+        :get-key="i => i"
+        :box_only="true"
+        :page_size="20"
+        :fetch_page="(store, opts) => fetch_page(store, opts)"
+      >
+        <template #header>
+          <button
+            class="button button-default btn"
+            type="button"
+            @click="activate_selection"
+          >
+            {{ $t('admin_dash.users.activate') }}
+          </button>
+          <button
+            class="button button-default btn"
+            type="button"
+            @click="deactivate_selection"
+          >
+            {{ $t('admin_dash.users.deactivate') }}
+          </button>
+          <button
+            class="button button-default btn"
+            type="button"
+            @click="delete_selection"
+          >
+            {{ $t('admin_dash.users.delete') }}
+          </button>
+        </template>
+        <template #item="{item}">
+          <AdminCard :user_details="item" />
+        </template>
+      </PageList>
+    </div>
   </div>
 </template>
 <script src="./users_tab.js"></script>

src/components/settings_modal/settings_modal_admin_content.vue

@@ -51,7 +51,7 @@
     <div
       v-if="adminDbLoaded"
       :label="$t('admin_dash.tabs.users')"
-      icon="wrench"
+      icon="user"
       data-tab-name="users"
     >
       <UsersTab />

src/i18n/en.json

@@ -1185,7 +1185,9 @@
       "title_content": "Content",
       "link_source": "source",
       "title_database": "Database",
-      "title_details": "Details"
+      "title_details": "Details",
+      "title_filter_user_search": "Filter User Search",
+      "title_users": "Users"
     },
     "limits": {
       "arbitrary_limits": "Arbitrary limits",