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,29 +1,35 @@
 <template>
   <div :label="$t('admin_dash.users.management')">
     <div class="setting-item">
-      <h2> filter user search </h2>
+      <h2> {{ $t('admin_dash.users.title_filter_user_search') }} </h2>
-      <div
+      <ul
-        class="stacked-container"
+        class="setting-list"
       >
+        <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()"
           >
-      </div>
+        </li>
+        <li>
           <Select
             :model-value="filters_origin"
             @update:model-value="v => update_origin(v)"
@@ -44,6 +50,8 @@
               {{ $t('admin_dash.users.only_external') }}
             </option>
           </Select>
+        </li>
+        <li>
           <Select
             :model-value="filters_activity"
             @update:model-value="v => update_activity(v)"
@@ -64,6 +72,8 @@
               {{ $t('admin_dash.users.only_deactivated') }}
             </option>
           </Select>
+        </li>
+        <li>
           <Select
             :model-value="filters_permission"
             @update:model-value="v => update_permission(v)"
@@ -89,16 +99,22 @@
               {{ $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"
@@ -106,7 +122,13 @@
           >
             {{ $t('admin_dash.users.refresh') }}
           </button>
+        </li>
+      </ul>
     </div>
+    <div
+      class="setting-item"
+    >
+      <h2> {{ $t('admin_dash.users.title_users') }} </h2>
       <PageList
         ref="userList"
         :refresh="true"
@@ -143,6 +165,7 @@
         </template>
       </PageList>
     </div>
+  </div>
 </template>
 <script src="./users_tab.js"></script>
 <style lang="scss" src="./users_tab.scss"></style>

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",