From 4887d371106aa5a745d8bec94c14c54ad29b4431 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 13 Jan 2025 17:38:44 +0200
Subject: [PATCH] make all dropdown menus consistent

---
 .../account_actions/account_actions.vue       | 100 ++++----
 src/components/chat_message/chat_message.vue  |  14 +-
 .../moderation_tools/moderation_tools.vue     | 221 ++++++++++--------
 .../notifications/notification_filters.vue    | 160 +++++++------
 src/components/popover/popover.scss           |  37 +--
 .../quick_filter_settings.vue                 | 200 +++++++++-------
 .../quick_view_settings.vue                   | 165 +++++++------
 .../admin_tabs/frontends_tab.vue              |  58 +++--
 .../settings_modal/settings_modal.vue         |  66 +++---
 .../status_bookmark_folder_menu.vue           |  20 +-
 .../user_list_menu/user_list_menu.vue         |  20 +-
 11 files changed, 601 insertions(+), 460 deletions(-)

diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index 62862a8fc..fd4837ee4 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -9,60 +9,80 @@
       <template #content>
         <div class="dropdown-menu">
           <template v-if="relationship.following">
-            <button
+            <div
               v-if="relationship.showing_reblogs"
-              class="dropdown-item menu-item"
-              @click="hideRepeats"
+              class="menu-item dropdown-item"
             >
-              {{ $t('user_card.hide_repeats') }}
-            </button>
-            <button
+              <button
+                class="main-button"
+                @click="hideRepeats"
+              >
+                {{ $t('user_card.hide_repeats') }}
+              </button>
+            </div>
+            <div
               v-if="!relationship.showing_reblogs"
-              class="dropdown-item menu-item"
-              @click="showRepeats"
+              class="menu-item dropdown-item"
             >
-              {{ $t('user_card.show_repeats') }}
-            </button>
+              <button
+                class="main-button"
+                @click="showRepeats"
+              >
+                {{ $t('user_card.show_repeats') }}
+              </button>
+            </div>
             <div
               role="separator"
               class="dropdown-divider"
             />
           </template>
           <UserListMenu :user="user" />
-          <button
+          <div
             v-if="relationship.followed_by"
-            class="dropdown-item menu-item"
-            @click="removeUserFromFollowers"
+            class="menu-item dropdown-item"
           >
-            {{ $t('user_card.remove_follower') }}
-          </button>
-          <button
-            v-if="relationship.blocking"
-            class="dropdown-item menu-item"
-            @click="unblockUser"
-          >
-            {{ $t('user_card.unblock') }}
-          </button>
-          <button
-            v-else
-            class="dropdown-item menu-item"
-            @click="blockUser"
-          >
-            {{ $t('user_card.block') }}
-          </button>
-          <button
-            class="dropdown-item menu-item"
-            @click="reportUser"
-          >
-            {{ $t('user_card.report') }}
-          </button>
-          <button
+            <button
+              class="main-button"
+              @click="removeUserFromFollowers"
+            >
+              {{ $t('user_card.remove_follower') }}
+            </button>
+          </div>
+          <div class="menu-item dropdown-item">
+            <button
+              v-if="relationship.blocking"
+              class="main-button"
+              @click="unblockUser"
+            >
+              {{ $t('user_card.unblock') }}
+            </button>
+            <button
+              v-else
+              class="main-button"
+              @click="blockUser"
+            >
+              {{ $t('user_card.block') }}
+            </button>
+          </div>
+          <div class="menu-item dropdown-item">
+            <button
+              class="main-button"
+              @click="reportUser"
+            >
+              {{ $t('user_card.report') }}
+            </button>
+          </div>
+          <div
             v-if="pleromaChatMessagesAvailable"
-            class="dropdown-item menu-item"
-            @click="openChat"
+            class="menu-item dropdown-item"
           >
-            {{ $t('user_card.message') }}
-          </button>
+            <button
+              class="main-button"
+              @click="openChat"
+            >
+              {{ $t('user_card.message') }}
+            </button>
+          </div>
         </div>
       </template>
       <template #trigger>
diff --git a/src/components/chat_message/chat_message.vue b/src/components/chat_message/chat_message.vue
index 166889d71..9ed30bc59 100644
--- a/src/components/chat_message/chat_message.vue
+++ b/src/components/chat_message/chat_message.vue
@@ -52,12 +52,14 @@
               >
                 <template #content>
                   <div class="dropdown-menu">
-                    <button
-                      class="menu-item dropdown-item dropdown-item-icon"
-                      @click="deleteMessage"
-                    >
-                      <FAIcon icon="times" /> {{ $t("chats.delete") }}
-                    </button>
+                    <div class="menu-item dropdown-item -icon">
+                      <button
+                        class="main-button"
+                        @click="deleteMessage"
+                      >
+                        <FAIcon icon="times" /> {{ $t("chats.delete") }}
+                      </button>
+                    </div>
                   </div>
                 </template>
                 <template #trigger>
diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
index df3bb655f..987c240e9 100644
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@@ -10,119 +10,150 @@
     >
       <template #content>
         <div class="dropdown-menu">
-          <span v-if="canGrantRole">
-            <button
-              class="menu-item dropdown-item menu-item"
-              @click="toggleRight(&quot;admin&quot;)"
-            >
-              {{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }}
-            </button>
-            <button
-              class="menu-item dropdown-item menu-item"
-              @click="toggleRight(&quot;moderator&quot;)"
-            >
-              {{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }}
-            </button>
+          <template v-if="canGrantRole">
+            <div class="menu-item dropdown-item -icon-space">
+              <button
+                class="main-button"
+                @click="toggleRight(&quot;admin&quot;)"
+              >
+                {{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }}
+              </button>
+            </div>
+            <div class="menu-item dropdown-item -icon-space">
+              <button
+                class="main-button"
+                @click="toggleRight(&quot;moderator&quot;)"
+              >
+                {{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }}
+              </button>
+            </div>
             <div
               v-if="canChangeActivationState || canDeleteAccount"
               role="separator"
               class="dropdown-divider"
             />
-          </span>
-          <button
-            v-if="canChangeActivationState"
-            class="menu-item dropdown-item menu-item"
-            @click="toggleActivationStatus()"
-          >
-            {{ $t(!!user.deactivated ? 'user_card.admin_menu.activate_account' : 'user_card.admin_menu.deactivate_account') }}
-          </button>
-          <button
-            v-if="canDeleteAccount"
-            class="menu-item dropdown-item menu-item"
-            @click="deleteUserDialog(true)"
-          >
-            {{ $t('user_card.admin_menu.delete_account') }}
-          </button>
+          </template>
           <div
-            v-if="canUseTagPolicy"
-            role="separator"
-            class="dropdown-divider"
-          />
-          <span v-if="canUseTagPolicy">
+            v-if="canChangeActivationState"
+            class="menu-item dropdown-item -icon-space"
+          >
             <button
-              class="menu-item dropdown-item menu-item"
-              @click="toggleTag(tags.FORCE_NSFW)"
+              class="main-button"
+              @click="toggleActivationStatus()"
             >
-              <span
-                class="input menu-checkbox"
-                :class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_NSFW) }"
-              />
-              {{ $t('user_card.admin_menu.force_nsfw') }}
+              {{ $t(!!user.deactivated ? 'user_card.admin_menu.activate_account' : 'user_card.admin_menu.deactivate_account') }}
             </button>
+          </div>
+          <div
+            v-if="canDeleteAccount"
+            class="menu-item dropdown-item -icon-space"
+          >
             <button
-              class="menu-item dropdown-item menu-item"
-              @click="toggleTag(tags.STRIP_MEDIA)"
+              class="main-button"
+              @click="deleteUserDialog(true)"
             >
-              <span
-                class="input menu-checkbox"
-                :class="{ 'menu-checkbox-checked': hasTag(tags.STRIP_MEDIA) }"
-              />
-              {{ $t('user_card.admin_menu.strip_media') }}
+              {{ $t('user_card.admin_menu.delete_account') }}
             </button>
-            <button
-              class="menu-item dropdown-item menu-item"
-              @click="toggleTag(tags.FORCE_UNLISTED)"
-            >
-              <span
-                class="input menu-checkbox"
-                :class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_UNLISTED) }"
-              />
-              {{ $t('user_card.admin_menu.force_unlisted') }}
-            </button>
-            <button
-              class="menu-item dropdown-item menu-item"
-              @click="toggleTag(tags.SANDBOX)"
-            >
-              <span
-                class="input menu-checkbox"
-                :class="{ 'menu-checkbox-checked': hasTag(tags.SANDBOX) }"
-              />
-              {{ $t('user_card.admin_menu.sandbox') }}
-            </button>
-            <button
+          </div>
+          <template v-if="canUseTagPolicy">
+            <div
+              role="separator"
+              class="dropdown-divider"
+            />
+            <div class="menu-item dropdown-item -icon">
+              <button
+                class="main-button"
+                @click="toggleTag(tags.FORCE_NSFW)"
+                >
+                <span
+                  class="input menu-checkbox"
+                  :class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_NSFW) }"
+                  />
+                {{ $t('user_card.admin_menu.force_nsfw') }}
+              </button>
+            </div>
+            <div class="menu-item dropdown-item -icon">
+              <button
+                class="main-button"
+                @click="toggleTag(tags.STRIP_MEDIA)"
+              >
+                <span
+                  class="input menu-checkbox"
+                  :class="{ 'menu-checkbox-checked': hasTag(tags.STRIP_MEDIA) }"
+                />
+                {{ $t('user_card.admin_menu.strip_media') }}
+              </button>
+            </div>
+            <div class="menu-item dropdown-item -icon">
+              <button
+                class="main-button"
+                @click="toggleTag(tags.FORCE_UNLISTED)"
+              >
+                <span
+                  class="input menu-checkbox"
+                  :class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_UNLISTED) }"
+                />
+                {{ $t('user_card.admin_menu.force_unlisted') }}
+              </button>
+            </div>
+            <div class="menu-item dropdown-item -icon">
+              <button
+                class="main-button"
+                @click="toggleTag(tags.SANDBOX)"
+              >
+                <span
+                  class="input menu-checkbox"
+                  :class="{ 'menu-checkbox-checked': hasTag(tags.SANDBOX) }"
+                />
+                {{ $t('user_card.admin_menu.sandbox') }}
+              </button>
+            </div>
+            <div
               v-if="user.is_local"
-              class="menu-item dropdown-item menu-item"
-              @click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)"
+              class="menu-item dropdown-item -icon"
             >
-              <span
-                class="input menu-checkbox"
-                :class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_REMOTE_SUBSCRIPTION) }"
-              />
-              {{ $t('user_card.admin_menu.disable_remote_subscription') }}
-            </button>
-            <button
+              <button
+                class="main-button"
+                @click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)"
+              >
+                <span
+                  class="input menu-checkbox"
+                  :class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_REMOTE_SUBSCRIPTION) }"
+                />
+                {{ $t('user_card.admin_menu.disable_remote_subscription') }}
+              </button>
+            </div>
+            <div
               v-if="user.is_local"
-              class="menu-item dropdown-item menu-item"
-              @click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)"
+              class="menu-item dropdown-item -icon"
             >
-              <span
-                class="input menu-checkbox"
-                :class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_ANY_SUBSCRIPTION) }"
-              />
-              {{ $t('user_card.admin_menu.disable_any_subscription') }}
-            </button>
-            <button
+              <button
+                class="main-button"
+                @click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)"
+              >
+                <span
+                  class="input menu-checkbox"
+                  :class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_ANY_SUBSCRIPTION) }"
+                />
+                {{ $t('user_card.admin_menu.disable_any_subscription') }}
+              </button>
+            </div>
+            <div
               v-if="user.is_local"
-              class="menu-item dropdown-item menu-item"
-              @click="toggleTag(tags.QUARANTINE)"
+              class="menu-item dropdown-item -icon"
             >
-              <span
-                class="input menu-checkbox"
-                :class="{ 'menu-checkbox-checked': hasTag(tags.QUARANTINE) }"
-              />
-              {{ $t('user_card.admin_menu.quarantine') }}
-            </button>
-          </span>
+              <button
+                class="main-button"
+                @click="toggleTag(tags.QUARANTINE)"
+              >
+                <span
+                  class="input menu-checkbox"
+                  :class="{ 'menu-checkbox-checked': hasTag(tags.QUARANTINE) }"
+                />
+                {{ $t('user_card.admin_menu.quarantine') }}
+              </button>
+            </div>
+          </template>
         </div>
       </template>
       <template #trigger>
diff --git a/src/components/notifications/notification_filters.vue b/src/components/notifications/notification_filters.vue
index 497a5156f..0b740ea0a 100644
--- a/src/components/notifications/notification_filters.vue
+++ b/src/components/notifications/notification_filters.vue
@@ -7,78 +7,94 @@
   >
     <template #content>
       <div class="dropdown-menu">
-        <button
-          class="menu-item dropdown-item"
-          @click="toggleNotificationFilter('likes')"
-        >
-          <span
-            class="input menu-checkbox"
-            :class="{ 'menu-checkbox-checked': filters.likes }"
-          />{{ $t('settings.notification_visibility_likes') }}
-        </button>
-        <button
-          class="menu-item dropdown-item"
-          @click="toggleNotificationFilter('repeats')"
-        >
-          <span
-            class="input menu-checkbox"
-            :class="{ 'menu-checkbox-checked': filters.repeats }"
-          />{{ $t('settings.notification_visibility_repeats') }}
-        </button>
-        <button
-          class="menu-item dropdown-item"
-          @click="toggleNotificationFilter('follows')"
-        >
-          <span
-            class="input menu-checkbox"
-            :class="{ 'menu-checkbox-checked': filters.follows }"
-          />{{ $t('settings.notification_visibility_follows') }}
-        </button>
-        <button
-          class="menu-item dropdown-item"
-          @click="toggleNotificationFilter('mentions')"
-        >
-          <span
-            class="input menu-checkbox"
-            :class="{ 'menu-checkbox-checked': filters.mentions }"
-          />{{ $t('settings.notification_visibility_mentions') }}
-        </button>
-        <button
-          class="menu-item dropdown-item"
-          @click="toggleNotificationFilter('statuses')"
-        >
-          <span
-            class="input menu-checkbox"
-            :class="{ 'menu-checkbox-checked': filters.statuses }"
-          />{{ $t('settings.notification_visibility_statuses') }}
-        </button>
-        <button
-          class="menu-item dropdown-item"
-          @click="toggleNotificationFilter('emojiReactions')"
-        >
-          <span
-            class="input menu-checkbox"
-            :class="{ 'menu-checkbox-checked': filters.emojiReactions }"
-          />{{ $t('settings.notification_visibility_emoji_reactions') }}
-        </button>
-        <button
-          class="menu-item dropdown-item"
-          @click="toggleNotificationFilter('moves')"
-        >
-          <span
-            class="input menu-checkbox"
-            :class="{ 'menu-checkbox-checked': filters.moves }"
-          />{{ $t('settings.notification_visibility_moves') }}
-        </button>
-        <button
-          class="menu-item dropdown-item"
-          @click="toggleNotificationFilter('polls')"
-        >
-          <span
-            class="input menu-checkbox"
-            :class="{ 'menu-checkbox-checked': filters.polls }"
-          />{{ $t('settings.notification_visibility_polls') }}
-        </button>
+        <div class="menu-item dropdown-item -icon">
+          <button
+            class="main-button"
+            @click="toggleNotificationFilter('likes')"
+          >
+            <span
+              class="input menu-checkbox"
+              :class="{ 'menu-checkbox-checked': filters.likes }"
+            />{{ $t('settings.notification_visibility_likes') }}
+          </button>
+        </div>
+        <div class="menu-item dropdown-item -icon">
+          <button
+            class="main-button"
+            @click="toggleNotificationFilter('repeats')"
+          >
+            <span
+              class="input menu-checkbox"
+              :class="{ 'menu-checkbox-checked': filters.repeats }"
+            />{{ $t('settings.notification_visibility_repeats') }}
+          </button>
+        </div>
+        <div class="menu-item dropdown-item -icon">
+          <button
+            class="main-button"
+            @click="toggleNotificationFilter('follows')"
+          >
+            <span
+              class="input menu-checkbox"
+              :class="{ 'menu-checkbox-checked': filters.follows }"
+            />{{ $t('settings.notification_visibility_follows') }}
+          </button>
+        </div>
+        <div class="menu-item dropdown-item -icon">
+          <button
+            class="main-button"
+            @click="toggleNotificationFilter('mentions')"
+          >
+            <span
+              class="input menu-checkbox"
+              :class="{ 'menu-checkbox-checked': filters.mentions }"
+            />{{ $t('settings.notification_visibility_mentions') }}
+          </button>
+        </div>
+        <div class="menu-item dropdown-item -icon">
+          <button
+            class="main-button"
+            @click="toggleNotificationFilter('statuses')"
+          >
+            <span
+              class="input menu-checkbox"
+              :class="{ 'menu-checkbox-checked': filters.statuses }"
+            />{{ $t('settings.notification_visibility_statuses') }}
+          </button>
+        </div>
+        <div class="menu-item dropdown-item -icon">
+          <button
+            class="main-button"
+            @click="toggleNotificationFilter('emojiReactions')"
+          >
+            <span
+              class="input menu-checkbox"
+              :class="{ 'menu-checkbox-checked': filters.emojiReactions }"
+            />{{ $t('settings.notification_visibility_emoji_reactions') }}
+          </button>
+        </div>
+        <div class="menu-item dropdown-item -icon">
+          <button
+            class="main-button"
+            @click="toggleNotificationFilter('moves')"
+          >
+            <span
+              class="input menu-checkbox"
+              :class="{ 'menu-checkbox-checked': filters.moves }"
+            />{{ $t('settings.notification_visibility_moves') }}
+          </button>
+        </div>
+        <div class="menu-item dropdown-item -icon">
+          <button
+            class="main-button"
+            @click="toggleNotificationFilter('polls')"
+          >
+            <span
+              class="input menu-checkbox"
+              :class="{ 'menu-checkbox-checked': filters.polls }"
+            />{{ $t('settings.notification_visibility_polls') }}
+          </button>
+        </div>
       </div>
     </template>
     <template #trigger>
diff --git a/src/components/popover/popover.scss b/src/components/popover/popover.scss
index f14809b99..3a4fb0077 100644
--- a/src/components/popover/popover.scss
+++ b/src/components/popover/popover.scss
@@ -55,22 +55,6 @@
   a.dropdown-item,
   button.dropdown-item,
   .dropdown-item:not(button, a) {
-    &.disabled {
-      cursor: not-allowed;
-    }
-
-    &:not(.disabled) {
-      cursor: pointer;
-    }
-
-    .main-button,
-    .extra-button {
-      display: grid;
-      box-sizing: border-box;
-      border: none;
-      align-items: center;
-    }
-
     .extra-button {
       border-left: 1px solid var(--icon);
       padding-left: calc(var(--__horizontal-gap) - 1px);
@@ -115,10 +99,31 @@
       }
     }
 
+    .main-button,
+    .extra-button {
+      display: grid;
+      box-sizing: border-box;
+      align-items: center;
+
+      &.disabled {
+        cursor: not-allowed;
+      }
+
+      &:not(.disabled) {
+        cursor: pointer;
+      }
+    }
+
     &.-icon {
       .main-button {
         grid-template-columns: var(--__line-height) 1fr;
       }
     }
+
+    &.-icon-space {
+      .main-button {
+        padding-left: calc(var(--__line-height) + var(--__horizontal-gap) * 2);
+      }
+    }
   }
 }
diff --git a/src/components/quick_filter_settings/quick_filter_settings.vue b/src/components/quick_filter_settings/quick_filter_settings.vue
index c872e34ef..3a6ea0bf3 100644
--- a/src/components/quick_filter_settings/quick_filter_settings.vue
+++ b/src/components/quick_filter_settings/quick_filter_settings.vue
@@ -14,106 +14,126 @@
           v-if="loggedIn"
           role="group"
         >
-          <button
+          <div class="menu-item dropdown-item -icon">
+            <button
+              v-if="!conversation"
+              class="main-button"
+              :aria-checked="replyVisibilityAll"
+              role="menuitemradio"
+              @click="replyVisibilityAll = true"
+            >
+              <span
+                class="input menu-checkbox -radio"
+                :class="{ 'menu-checkbox-checked': replyVisibilityAll }"
+                :aria-hidden="true"
+              />{{ $t('settings.reply_visibility_all') }}
+            </button>
+          </div>
+          <div
             v-if="!conversation"
-            class="menu-item dropdown-item"
-            :aria-checked="replyVisibilityAll"
-            role="menuitemradio"
-            @click="replyVisibilityAll = true"
+            class="menu-item dropdown-item -icon"
           >
-            <span
-              class="input menu-checkbox -radio"
-              :class="{ 'menu-checkbox-checked': replyVisibilityAll }"
-              :aria-hidden="true"
-            />{{ $t('settings.reply_visibility_all') }}
-          </button>
-          <button
+            <button
+              class="main-button"
+              :aria-checked="replyVisibilityFollowing"
+              role="menuitemradio"
+              @click="replyVisibilityFollowing = true"
+            >
+              <span
+                class="input menu-checkbox -radio"
+                :class="{ 'menu-checkbox-checked': replyVisibilityFollowing }"
+                :aria-hidden="true"
+              />{{ $t('settings.reply_visibility_following_short') }}
+            </button>
+          </div>
+          <div
             v-if="!conversation"
-            class="menu-item dropdown-item"
-            :aria-checked="replyVisibilityFollowing"
-            role="menuitemradio"
-            @click="replyVisibilityFollowing = true"
+            class="menu-item dropdown-item -icon"
           >
-            <span
-              class="input menu-checkbox -radio"
-              :class="{ 'menu-checkbox-checked': replyVisibilityFollowing }"
-              :aria-hidden="true"
-            />{{ $t('settings.reply_visibility_following_short') }}
-          </button>
-          <button
-            v-if="!conversation"
-            class="menu-item dropdown-item"
-            :aria-checked="replyVisibilitySelf"
-            role="menuitemradio"
-            @click="replyVisibilitySelf = true"
-          >
-            <span
-              class="input menu-checkbox -radio"
-              :class="{ 'menu-checkbox-checked': replyVisibilitySelf }"
-              :aria-hidden="true"
-            />{{ $t('settings.reply_visibility_self_short') }}
-          </button>
+            <button
+              class="main-button"
+              :aria-checked="replyVisibilitySelf"
+              role="menuitemradio"
+              @click="replyVisibilitySelf = true"
+            >
+              <span
+                class="input menu-checkbox -radio"
+                :class="{ 'menu-checkbox-checked': replyVisibilitySelf }"
+                :aria-hidden="true"
+              />{{ $t('settings.reply_visibility_self_short') }}
+            </button>
+          </div>
           <div
             v-if="!conversation"
             role="separator"
             class="dropdown-divider"
           />
         </div>
-        <button
-          class="menu-item dropdown-item"
-          role="menuitemcheckbox"
-          :aria-checked="muteBotStatuses"
-          @click="muteBotStatuses = !muteBotStatuses"
-        >
-          <span
-            class="input menu-checkbox"
-            :class="{ 'menu-checkbox-checked': muteBotStatuses }"
-            :aria-hidden="true"
-          />{{ $t('settings.mute_bot_posts') }}
-        </button>
-        <button
-          class="menu-item dropdown-item"
-          role="menuitemcheckbox"
-          :aria-checked="muteSensitiveStatuses"
-          @click="muteSensitiveStatuses = !muteSensitiveStatuses"
-        >
-          <span
-            class="input menu-checkbox"
-            :class="{ 'menu-checkbox-checked': muteSensitiveStatuses }"
-            :aria-hidden="true"
-          />{{ $t('settings.mute_sensitive_posts') }}
-        </button>
-        <button
-          class="menu-item dropdown-item"
-          role="menuitemcheckbox"
-          :aria-checked="hideMedia"
-          @click="hideMedia = !hideMedia"
-        >
-          <span
-            class="input menu-checkbox"
-            :class="{ 'menu-checkbox-checked': hideMedia }"
-            :aria-hidden="true"
-          />{{ $t('settings.hide_media_previews') }}
-        </button>
-        <button
-          class="menu-item dropdown-item"
-          role="menuitemcheckbox"
-          :aria-checked="hideMutedPosts"
-          @click="hideMutedPosts = !hideMutedPosts"
-        >
-          <span
-            class="input menu-checkbox"
-            :class="{ 'menu-checkbox-checked': hideMutedPosts }"
-            :aria-hidden="true"
-          />{{ $t('settings.hide_all_muted_posts') }}
-        </button>
-        <button
-          class="menu-item dropdown-item -icon"
-          role="menuitem"
-          @click="openTab('filtering')"
-        >
-          <FAIcon icon="font" />{{ $t('settings.word_filter_and_more') }}
-        </button>
+        <div class="menu-item dropdown-item -icon">
+          <button
+            class="main-button"
+            role="menuitemcheckbox"
+            :aria-checked="muteBotStatuses"
+            @click="muteBotStatuses = !muteBotStatuses"
+          >
+            <span
+              class="input menu-checkbox"
+              :class="{ 'menu-checkbox-checked': muteBotStatuses }"
+              :aria-hidden="true"
+            />{{ $t('settings.mute_bot_posts') }}
+          </button>
+        </div>
+        <div class="menu-item dropdown-item -icon">
+          <button
+            class="main-button"
+            role="menuitemcheckbox"
+            :aria-checked="muteSensitiveStatuses"
+            @click="muteSensitiveStatuses = !muteSensitiveStatuses"
+          >
+            <span
+              class="input menu-checkbox"
+              :class="{ 'menu-checkbox-checked': muteSensitiveStatuses }"
+              :aria-hidden="true"
+            />{{ $t('settings.mute_sensitive_posts') }}
+          </button>
+        </div>
+        <div class="menu-item dropdown-item -icon">
+          <button
+            class="main-button"
+            role="menuitemcheckbox"
+            :aria-checked="hideMedia"
+            @click="hideMedia = !hideMedia"
+          >
+            <span
+              class="input menu-checkbox"
+              :class="{ 'menu-checkbox-checked': hideMedia }"
+              :aria-hidden="true"
+            />{{ $t('settings.hide_media_previews') }}
+          </button>
+        </div>
+        <div class="menu-item dropdown-item -icon">
+          <button
+            class="main-button"
+            role="menuitemcheckbox"
+            :aria-checked="hideMutedPosts"
+            @click="hideMutedPosts = !hideMutedPosts"
+          >
+            <span
+              class="input menu-checkbox"
+              :class="{ 'menu-checkbox-checked': hideMutedPosts }"
+              :aria-hidden="true"
+            />{{ $t('settings.hide_all_muted_posts') }}
+          </button>
+        </div>
+        <div class="menu-item dropdown-item -icon">
+          <button
+            class="main-button"
+            role="menuitem"
+            @click="openTab('filtering')"
+          >
+            <FAIcon fixed-width icon="font" />{{ $t('settings.word_filter_and_more') }}
+          </button>
+        </div>
       </div>
     </template>
     <template #trigger>
diff --git a/src/components/quick_view_settings/quick_view_settings.vue b/src/components/quick_view_settings/quick_view_settings.vue
index 863f1e89e..8d71503fd 100644
--- a/src/components/quick_view_settings/quick_view_settings.vue
+++ b/src/components/quick_view_settings/quick_view_settings.vue
@@ -11,86 +11,107 @@
         role="menu"
       >
         <div role="group">
-          <button
-            class="menu-item dropdown-item"
-            :aria-checked="conversationDisplay === 'tree'"
-            role="menuitemradio"
-            @click="conversationDisplay = 'tree'"
-          >
-            <span
-              class="input menu-checkbox -radio"
-              :aria-hidden="true"
-              :class="{ 'menu-checkbox-checked': conversationDisplay === 'tree' }"
-            /><FAIcon
-              icon="folder-tree"
-              :aria-hidden="true"
-            /> {{ $t('settings.conversation_display_tree_quick') }}
-          </button>
-          <button
-            class="menu-item dropdown-item"
-            :aria-checked="conversationDisplay === 'linear'"
-            role="menuitemradio"
-            @click="conversationDisplay = 'linear'"
-          >
-            <span
-              class="input menu-checkbox -radio"
-              :class="{ 'menu-checkbox-checked': conversationDisplay === 'linear' }"
-              :aria-hidden="true"
-            /><FAIcon
-              icon="list"
-              :aria-hidden="true"
-            /> {{ $t('settings.conversation_display_linear_quick') }}
-          </button>
+          <div class="menu-item dropdown-item -icon">
+            <button
+              class="main-button"
+              :aria-checked="conversationDisplay === 'tree'"
+              role="menuitemradio"
+              @click="conversationDisplay = 'tree'"
+            >
+              <span
+                class="input menu-checkbox -radio"
+                :aria-hidden="true"
+                :class="{ 'menu-checkbox-checked': conversationDisplay === 'tree' }"
+              /><FAIcon
+                icon="folder-tree"
+                :aria-hidden="true"
+                fixed-width
+              /> {{ $t('settings.conversation_display_tree_quick') }}
+            </button>
+          </div>
+          <div class="menu-item dropdown-item -icon">
+            <button
+              class="main-button"
+              :aria-checked="conversationDisplay === 'linear'"
+              role="menuitemradio"
+              @click="conversationDisplay = 'linear'"
+            >
+              <span
+                class="input menu-checkbox -radio"
+                :class="{ 'menu-checkbox-checked': conversationDisplay === 'linear' }"
+                :aria-hidden="true"
+              /><FAIcon
+                icon="list"
+                :aria-hidden="true"
+                fixed-width
+              /> {{ $t('settings.conversation_display_linear_quick') }}
+            </button>
+          </div>
         </div>
         <div
           role="separator"
           class="dropdown-divider"
         />
-        <button
-          class="menu-item dropdown-item"
-          role="menuitemcheckbox"
-          :aria-checked="showUserAvatars"
-          @click="showUserAvatars = !showUserAvatars"
-        >
-          <span
-            class="input menu-checkbox"
-            :class="{ 'menu-checkbox-checked': showUserAvatars }"
-            :aria-hidden="true"
-          />{{ $t('settings.mention_link_show_avatar_quick') }}
-        </button>
-        <button
+        <div class="menu-item dropdown-item -icon">
+          <button
+            class="main-button"
+            role="menuitemcheckbox"
+            :aria-checked="showUserAvatars"
+            @click="showUserAvatars = !showUserAvatars"
+          >
+            <span
+              class="main-button"
+              :class="{ 'menu-checkbox-checked': showUserAvatars }"
+              :aria-hidden="true"
+            />{{ $t('settings.mention_link_show_avatar_quick') }}
+          </button>
+        </div>
+        <div
           v-if="!conversation"
-          class="menu-item dropdown-item"
-          role="menuitemcheckbox"
-          :aria-checked="autoUpdate"
-          @click="autoUpdate = !autoUpdate"
-        >
-          <span
-            class="input menu-checkbox"
-            :class="{ 'menu-checkbox-checked': autoUpdate }"
-            :aria-hidden="true"
-          />{{ $t('settings.auto_update') }}
-        </button>
-        <button
-          v-if="!conversation"
-          class="menu-item dropdown-item"
-          role="menuitemcheckbox"
-          :aria-checked="collapseWithSubjects"
-          @click="collapseWithSubjects = !collapseWithSubjects"
-        >
-          <span
-            class="input menu-checkbox"
-            :class="{ 'menu-checkbox-checked': collapseWithSubjects }"
-            :aria-hidden="true"
-          />{{ $t('settings.collapse_subject') }}
-        </button>
-        <button
           class="menu-item dropdown-item -icon"
-          role="menuitem"
-          @click="openTab('general')"
         >
-          <FAIcon icon="wrench" />{{ $t('settings.more_settings') }}
-        </button>
+          <button
+            class="main-button"
+            role="menuitemcheckbox"
+            :aria-checked="autoUpdate"
+            @click="autoUpdate = !autoUpdate"
+          >
+            <span
+              class="input menu-checkbox"
+              :class="{ 'menu-checkbox-checked': autoUpdate }"
+              :aria-hidden="true"
+            />{{ $t('settings.auto_update') }}
+          </button>
+        </div>
+        <div
+          v-if="!conversation"
+          class="menu-item dropdown-item -icon"
+        >
+          <button
+            class="main-button"
+            role="menuitemcheckbox"
+            :aria-checked="collapseWithSubjects"
+            @click="collapseWithSubjects = !collapseWithSubjects"
+          >
+            <span
+              class="input menu-checkbox"
+              :class="{ 'menu-checkbox-checked': collapseWithSubjects }"
+              :aria-hidden="true"
+            />{{ $t('settings.collapse_subject') }}
+          </button>
+        </div>
+        <div class="menu-item dropdown-item -icon">
+          <button
+            class="main-button"
+            role="menuitem"
+            @click="openTab('general')"
+          >
+            <FAIcon
+              icon="wrench"
+              fixed-width
+            />{{ $t('settings.more_settings') }}
+          </button>
+        </div>
       </div>
     </template>
     <template #trigger>
diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.vue b/src/components/settings_modal/admin_tabs/frontends_tab.vue
index 591c0d1c0..b4a8a9183 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.vue
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.vue
@@ -115,22 +115,28 @@
                 >
                   <template #content="{close}">
                     <div class="dropdown-menu">
-                      <button
+                      <div
                         v-for="ref in frontend.refs"
                         :key="ref"
                         class="menu-item dropdown-item"
-                        @click.prevent="update(frontend, ref)"
-                        @click="close"
                       >
-                        <i18n-t
-                          keypath="admin_dash.frontend.install_version"
-                          scope="global"
+                        <button
+                          class="main-button"
+                          @click.prevent="update(frontend, ref)"
+                          @click="close"
                         >
-                          <template #version>
-                            <code>{{ ref }}</code>
-                          </template>
-                        </i18n-t>
-                      </button>
+                          <span>
+                            <i18n-t
+                              keypath="admin_dash.frontend.install_version"
+                              scope="global"
+                            >
+                              <template #version>
+                                <code>{{ ref }}</code>
+                              </template>
+                            </i18n-t>
+                          </span>
+                        </button>
+                      </div>
                     </div>
                   </template>
                   <template #trigger>
@@ -175,22 +181,28 @@
                 >
                   <template #content="{close}">
                     <div class="dropdown-menu">
-                      <button
+                      <div
+                        class="menu-item dropdown-item"
                         v-for="ref in frontend.installedRefs || frontend.refs"
                         :key="ref"
-                        class="menu-item dropdown-item"
-                        @click.prevent="setDefault(frontend, ref)"
-                        @click="close"
                       >
-                        <i18n-t
-                          keypath="admin_dash.frontend.set_default_version"
-                          scope="global"
+                        <button
+                          class="main-button"
+                          @click.prevent="setDefault(frontend, ref)"
+                          @click="close"
                         >
-                          <template #version>
-                            <code>{{ ref }}</code>
-                          </template>
-                        </i18n-t>
-                      </button>
+                          <span>
+                            <i18n-t
+                              keypath="admin_dash.frontend.set_default_version"
+                              scope="global"
+                            >
+                              <template #version>
+                                <code>{{ ref }}</code>
+                              </template>
+                            </i18n-t>
+                          </span>
+                        </button>
+                      </div>
                     </div>
                   </template>
                   <template #trigger>
diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue
index 3555d04dc..3a5c8ddab 100644
--- a/src/components/settings_modal/settings_modal.vue
+++ b/src/components/settings_modal/settings_modal.vue
@@ -69,36 +69,42 @@
           </template>
           <template #content="{close}">
             <div class="dropdown-menu">
-              <button
-                class="menu-item dropdown-item -icon"
-                @click.prevent="backup"
-                @click="close"
-              >
-                <FAIcon
-                  icon="file-download"
-                  fixed-width
-                /><span>{{ $t("settings.file_export_import.backup_settings") }}</span>
-              </button>
-              <button
-                class="menu-item dropdown-item -icon"
-                @click.prevent="backupWithTheme"
-                @click="close"
-              >
-                <FAIcon
-                  icon="file-download"
-                  fixed-width
-                /><span>{{ $t("settings.file_export_import.backup_settings_theme") }}</span>
-              </button>
-              <button
-                class="menu-item dropdown-item -icon"
-                @click.prevent="restore"
-                @click="close"
-              >
-                <FAIcon
-                  icon="file-upload"
-                  fixed-width
-                /><span>{{ $t("settings.file_export_import.restore_settings") }}</span>
-              </button>
+              <div class="menu-item dropdown-item -icon">
+                <button
+                  class="main-button"
+                  @click.prevent="backup"
+                  @click="close"
+                >
+                  <FAIcon
+                    icon="file-download"
+                    fixed-width
+                  /><span>{{ $t("settings.file_export_import.backup_settings") }}</span>
+                </button>
+              </div>
+              <div class="menu-item dropdown-item -icon">
+                <button
+                  class="main-button"
+                  @click.prevent="backupWithTheme"
+                  @click="close"
+                >
+                  <FAIcon
+                    icon="file-download"
+                    fixed-width
+                  /><span>{{ $t("settings.file_export_import.backup_settings_theme") }}</span>
+                </button>
+              </div>
+              <div class="menu-item dropdown-item -icon">
+                <button
+                  class="main-button"
+                  @click.prevent="restore"
+                  @click="close"
+                >
+                  <FAIcon
+                    icon="file-upload"
+                    fixed-width
+                  /><span>{{ $t("settings.file_export_import.restore_settings") }}</span>
+                </button>
+              </div>
             </div>
           </template>
         </Popover>
diff --git a/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue b/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue
index a8e1874c7..75f389946 100644
--- a/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue
+++ b/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue
@@ -1,17 +1,21 @@
 <template>
   <div class="dropdown-menu">
-    <button
+    <div
       v-for="folder in folders"
       :key="folder.id"
       class="menu-item dropdown-item -icon"
-      @click="toggleFolder(folder.id)"
     >
-      <span
-        class="input menu-checkbox -radio"
-        :class="{ 'menu-checkbox-checked': status.bookmark_folder_id == folder.id }"
-      />
-      {{ folder.name }}
-    </button>
+      <button
+        class="main-button"
+        @click="toggleFolder(folder.id)"
+      >
+        <span
+          class="input menu-checkbox -radio"
+          :class="{ 'menu-checkbox-checked': status.bookmark_folder_id == folder.id }"
+        />
+        {{ folder.name }}
+      </button>
+    </div>
   </div>
 </template>
 
diff --git a/src/components/user_list_menu/user_list_menu.vue b/src/components/user_list_menu/user_list_menu.vue
index a1ba96d89..8b14b61ed 100644
--- a/src/components/user_list_menu/user_list_menu.vue
+++ b/src/components/user_list_menu/user_list_menu.vue
@@ -8,18 +8,22 @@
     >
       <template #content>
         <div class="dropdown-menu">
-          <button
+          <div
             v-for="list in lists"
             :key="list.id"
             class="menu-item dropdown-item -icon"
-            @click="toggleList(list.id)"
           >
-            <span
-              class="input menu-checkbox"
-              :class="{ 'menu-checkbox-checked': list.inList }"
-            />
-            {{ list.title }}
-          </button>
+            <button
+              class="main-button"
+              @click="toggleList(list.id)"
+            >
+              <span
+                class="input menu-checkbox"
+                :class="{ 'menu-checkbox-checked': list.inList }"
+              />
+              {{ list.title }}
+            </button>
+          </div>
         </div>
       </template>
       <template #trigger>