From 98f972e557047a626880692189fdae68269a732e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 11 Feb 2024 23:11:28 +0200
Subject: menu-item improvements

---
 src/components/navigation/navigation_entry.vue | 36 --------------------------
 1 file changed, 36 deletions(-)

(limited to 'src/components/navigation/navigation_entry.vue')

diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue
index 411ca536..59722f6c 100644
--- a/src/components/navigation/navigation_entry.vue
+++ b/src/components/navigation/navigation_entry.vue
@@ -1,7 +1,6 @@
 <template>
   <OptionalRouterLink
     v-slot="{ isActive, href, navigate } = {}"
-    ass="ass"
     :to="routeTo"
   >
     <li
@@ -96,40 +95,5 @@
       margin-right: -0.8em;
     }
   }
-
-  &:hover {
-    background-color: $fallback--lightBg;
-    background-color: var(--selectedMenu, $fallback--lightBg);
-    color: $fallback--link;
-    color: var(--selectedMenuText, $fallback--link);
-
-    --faint: var(--selectedMenuFaintText, $fallback--faint);
-    --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
-    --lightText: var(--selectedMenuLightText, $fallback--lightText);
-
-    .menu-icon {
-      --icon: var(--text, $fallback--icon);
-    }
-  }
-
-  &.-active {
-    font-weight: bolder;
-    background-color: $fallback--lightBg;
-    background-color: var(--selectedMenu, $fallback--lightBg);
-    color: $fallback--text;
-    color: var(--selectedMenuText, $fallback--text);
-
-    --faint: var(--selectedMenuFaintText, $fallback--faint);
-    --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
-    --lightText: var(--selectedMenuLightText, $fallback--lightText);
-
-    .menu-icon {
-      --icon: var(--text, $fallback--icon);
-    }
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
 }
 </style>
-- 
cgit v1.2.3-70-g09d2


From ae345d2c458bd0952d9b85c2e03060b2d286d320 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 12 Feb 2024 17:26:08 +0200
Subject: buttons look great now, including unstyled ones menu items work too

---
 src/App.scss                                       | 19 +++--
 src/components/account_actions/account_actions.vue |  5 --
 src/components/button.style.js                     | 52 ++++++++-----
 src/components/button_unstyled.style.js            | 88 ++++++++++++++++++++++
 src/components/chat_message/chat_message.vue       |  2 +-
 src/components/emoji_input/emoji_input.vue         |  1 -
 src/components/emoji_picker/emoji_picker.scss      | 16 +---
 src/components/emoji_picker/emoji_picker.vue       |  8 +-
 src/components/extra_buttons/extra_buttons.vue     | 24 +++---
 src/components/input.style.js                      |  5 +-
 src/components/menu_item.style.js                  | 10 ++-
 .../mobile_post_status_button.vue                  |  2 -
 .../moderation_tools/moderation_tools.vue          | 22 +++---
 src/components/nav_panel/nav_panel.vue             | 16 ++--
 src/components/navigation/navigation_entry.vue     |  7 +-
 src/components/navigation/navigation_pins.vue      | 12 +--
 .../notifications/notification_filters.vue         | 14 ++--
 src/components/panel.style.js                      |  1 +
 src/components/panel_header.style.js               |  3 +-
 src/components/popover.style.js                    |  1 +
 src/components/popover/popover.vue                 | 62 +--------------
 .../post_status_form/post_status_form.vue          | 25 ------
 .../quick_filter_settings.vue                      | 14 ++--
 .../quick_view_settings/quick_view_settings.vue    | 12 +--
 src/components/scope_selector/scope_selector.js    |  8 +-
 src/components/scope_selector/scope_selector.vue   |  5 --
 .../settings_modal/admin_tabs/frontends_tab.vue    |  4 +-
 src/components/settings_modal/settings_modal.vue   |  6 +-
 src/components/status/status.scss                  |  5 --
 src/components/top_bar.style.js                    |  1 +
 src/components/user_card/user_card.scss            | 13 ----
 src/components/user_list_menu/user_list_menu.vue   |  2 +-
 src/services/theme_data/theme_data_3.service.js    |  8 +-
 33 files changed, 224 insertions(+), 249 deletions(-)
 create mode 100644 src/components/button_unstyled.style.js

(limited to 'src/components/navigation/navigation_entry.vue')

diff --git a/src/App.scss b/src/App.scss
index 1f9bab40..27fee4b4 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -372,14 +372,24 @@ nav {
   }
 }
 
+.menu-item {
+  border: none;
+  outline: none;
+  text-align: initial;
+  font-size: inherit;
+  font-family: inherit;
+  cursor: pointer;
+  color: inherit;
+}
+
 .button-unstyled {
-  background: none;
   border: none;
   outline: none;
   display: inline;
   text-align: initial;
   font-size: 100%;
   font-family: inherit;
+  box-shadow: var(--shadow);
   padding: 0;
   line-height: unset;
   cursor: pointer;
@@ -393,13 +403,6 @@ nav {
   &.-fullwidth {
     width: 100%;
   }
-
-  &.-hover-highlight {
-    &:hover svg {
-      color: $fallback--lightText;
-      color: var(--lightText, $fallback--lightText);
-    }
-  }
 }
 
 input,
diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index ce19291a..1c3c1419 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -130,11 +130,6 @@
     margin: -0.5em 0;
     padding: 0.5em 0;
     text-align: center;
-
-    &:not(:hover) .icon {
-      color: $fallback--lightText;
-      color: var(--lightText, $fallback--lightText);
-    }
   }
 }
 </style>
diff --git a/src/components/button.style.js b/src/components/button.style.js
index 5a5e4271..8d19516f 100644
--- a/src/components/button.style.js
+++ b/src/components/button.style.js
@@ -10,6 +10,14 @@ const border = (top, shadow) => ({
 
 const buttonInsetFakeBorders = [border(true, false), border(false, true)]
 const inputInsetFakeBorders = [border(true, true), border(false, false)]
+const buttonOuterShadow = {
+  x: 0,
+  y: 0,
+  blur: 2,
+  spread: 0,
+  color: '#000000',
+  alpha: 1
+}
 
 const hoverGlow = {
   x: 0,
@@ -22,7 +30,7 @@ const hoverGlow = {
 
 export default {
   name: 'Button', // Name of the component
-  selector: '.button', // CSS selector/prefix
+  selector: '.button-default', // CSS selector/prefix
   // outOfTreeSelector: '' // out-of-tree selector is used when other components are laid over it but it's not part of the tree, see Underlay component
   // States, system witll calculate ALL possible combinations of those and prepend "normal" to them + standalone "normal" state
   states: {
@@ -39,8 +47,8 @@ export default {
   // Variants are mutually exclusive, each component implicitly has "normal" variant, and all other variants inherit from it.
   variants: {
     // Variants save on computation time since adding new variant just adds one more "set".
-    normal: '-default', // you can override normal variant, it will be appenended to the main class
-    danger: '-default.danger'
+    // normal: '', // you can override normal variant, it will be appenended to the main class
+    danger: '.danger'
     // Overall the compuation difficulty is N*((1/6)M^3+M) where M is number of distinct states and N is number of variants.
     // This (currently) is further multipled by number of places where component can exist.
   },
@@ -56,21 +64,7 @@ export default {
       // like within it
       directives: {
         background: '--fg',
-        shadow: [{
-          x: 0,
-          y: 0,
-          blur: 2,
-          spread: 0,
-          color: '#000000',
-          alpha: 1
-        }, ...buttonInsetFakeBorders]
-      }
-    },
-    {
-      variant: 'unstyled',
-      directives: {
-        background: '--fg',
-        opacity: 0
+        shadow: [buttonOuterShadow, ...buttonInsetFakeBorders]
       }
     },
     {
@@ -82,7 +76,7 @@ export default {
     {
       state: ['pressed'],
       directives: {
-        shadow: [...inputInsetFakeBorders]
+        shadow: [buttonOuterShadow, ...inputInsetFakeBorders]
       }
     },
     {
@@ -95,7 +89,7 @@ export default {
       state: ['toggled'],
       directives: {
         background: '--accent,-24.2',
-        shadow: [...inputInsetFakeBorders]
+        shadow: [buttonOuterShadow, ...inputInsetFakeBorders]
       }
     },
     {
@@ -112,6 +106,13 @@ export default {
         shadow: [...buttonInsetFakeBorders]
       }
     },
+    {
+      state: ['disabled', 'hover'],
+      directives: {
+        background: '$blend(--background, 0.25, --parent)',
+        shadow: [...buttonInsetFakeBorders]
+      }
+    },
     {
       component: 'Text',
       parent: {
@@ -122,6 +123,17 @@ export default {
         textOpacity: 0.25,
         textOpacityMode: 'blend'
       }
+    },
+    {
+      component: 'Text',
+      parent: {
+        component: 'Button',
+        state: ['disabled', 'hover']
+      },
+      directives: {
+        textOpacity: 0.25,
+        textOpacityMode: 'blend'
+      }
     }
   ]
 }
diff --git a/src/components/button_unstyled.style.js b/src/components/button_unstyled.style.js
new file mode 100644
index 00000000..d0ca03a5
--- /dev/null
+++ b/src/components/button_unstyled.style.js
@@ -0,0 +1,88 @@
+export default {
+  name: 'ButtonUnstyled',
+  selector: '.button-unstyled',
+  states: {
+    disabled: ':disabled',
+    toggled: '.toggled',
+    pressed: ':active',
+    hover: ':hover',
+    focused: ':focus-within'
+  },
+  validInnerComponents: [
+    'Text',
+    'Icon'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--fg',
+        shadow: [],
+        opacity: 0
+      }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'ButtonUnstyled',
+        state: ['hover']
+      },
+      directives: {
+        textColor: '--parent--text'
+      }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'ButtonUnstyled',
+        state: ['toggled']
+      },
+      directives: {
+        textColor: '--parent--text'
+      }
+    },
+    {
+      component: 'Text',
+      parent: {
+        component: 'ButtonUnstyled',
+        state: ['disabled']
+      },
+      directives: {
+        textOpacity: 0.25,
+        textOpacityMode: 'blend'
+      }
+    },
+    {
+      component: 'Text',
+      parent: {
+        component: 'ButtonUnstyled',
+        state: ['disabled', 'hover']
+      },
+      directives: {
+        textOpacity: 0.25,
+        textOpacityMode: 'blend'
+      }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'ButtonUnstyled',
+        state: ['disabled']
+      },
+      directives: {
+        textOpacity: 0.25,
+        textOpacityMode: 'blend'
+      }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'ButtonUnstyled',
+        state: ['disabled', 'hover']
+      },
+      directives: {
+        textOpacity: 0.25,
+        textOpacityMode: 'blend'
+      }
+    }
+  ]
+}
diff --git a/src/components/chat_message/chat_message.vue b/src/components/chat_message/chat_message.vue
index 381574c3..166889d7 100644
--- a/src/components/chat_message/chat_message.vue
+++ b/src/components/chat_message/chat_message.vue
@@ -53,7 +53,7 @@
                 <template #content>
                   <div class="dropdown-menu">
                     <button
-                      class="button-default dropdown-item dropdown-item-icon"
+                      class="menu-item dropdown-item dropdown-item-icon"
                       @click="deleteMessage"
                     >
                       <FAIcon icon="times" /> {{ $t("chats.delete") }}
diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index 34f42410..f45d231e 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -227,7 +227,6 @@
 
       --faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
       --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
-      --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
       --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
     }
   }
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index 5bcff33b..7dcaeb6c 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -10,15 +10,6 @@ $emoji-picker-emoji-size: 32px;
   max-width: calc(100vw - 20px); // popover gives 10px margin from window edge
   display: flex;
   flex-direction: column;
-  background-color: $fallback--bg;
-  background-color: var(--popover, $fallback--bg);
-  color: $fallback--link;
-  color: var(--popoverText, $fallback--link);
-
-  --faint: var(--popoverFaintText, $fallback--faint);
-  --faintLink: var(--popoverFaintLink, $fallback--faint);
-  --lightText: var(--popoverLightText, $fallback--lightText);
-  --icon: var(--popoverIcon, $fallback--icon);
 
   &-header-image {
     display: inline-flex;
@@ -104,13 +95,8 @@ $emoji-picker-emoji-size: 32px;
         pointer-events: none;
       }
 
-      &.active {
+      &.toggled {
         border-bottom: 4px solid;
-
-        svg {
-          color: $fallback--lightText;
-          color: var(--lightText, $fallback--lightText);
-        }
       }
     }
   }
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 9092fab6..7b7353ab 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -23,9 +23,9 @@
             v-for="group in filteredEmojiGroups"
             :ref="setGroupRef('group-header-' + group.id)"
             :key="group.id"
-            class="emoji-tabs-item"
+            class="button-unstyled emoji-tabs-item"
             :class="{
-              active: activeGroupView === group.id
+              toggled: activeGroupView === group.id
             }"
             :title="group.text"
             role="button"
@@ -52,8 +52,8 @@
           class="additional-tabs"
         >
           <span
-            class="stickers-tab-icon additional-tabs-item"
-            :class="{active: showingStickers}"
+            class="button-unstyled stickers-tab-icon additional-tabs-item"
+            :class="{toggled: showingStickers}"
             :title="$t('emoji.stickers')"
             @click.prevent="toggleStickers"
           >
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index b7d3b1d3..6b43da4d 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -18,7 +18,7 @@
       >
         <button
           v-if="canMute && !status.thread_muted"
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           @click.prevent="muteConversation"
         >
@@ -29,7 +29,7 @@
         </button>
         <button
           v-if="canMute && status.thread_muted"
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           @click.prevent="unmuteConversation"
         >
@@ -40,7 +40,7 @@
         </button>
         <button
           v-if="!status.pinned && canPin"
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           @click.prevent="pinStatus"
           @click="close"
@@ -52,7 +52,7 @@
         </button>
         <button
           v-if="status.pinned && canPin"
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           @click.prevent="unpinStatus"
           @click="close"
@@ -65,7 +65,7 @@
         <template v-if="canBookmark">
           <button
             v-if="!status.bookmarked"
-            class="button-default dropdown-item dropdown-item-icon"
+            class="menu-item dropdown-item dropdown-item-icon"
             role="menuitem"
             @click.prevent="bookmarkStatus"
             @click="close"
@@ -77,7 +77,7 @@
           </button>
           <button
             v-if="status.bookmarked"
-            class="button-default dropdown-item dropdown-item-icon"
+            class="menu-item dropdown-item dropdown-item-icon"
             role="menuitem"
             @click.prevent="unbookmarkStatus"
             @click="close"
@@ -90,7 +90,7 @@
         </template>
         <button
           v-if="ownStatus && editingAvailable"
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           @click.prevent="editStatus"
           @click="close"
@@ -102,7 +102,7 @@
         </button>
         <button
           v-if="isEdited && editingAvailable"
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           @click.prevent="showStatusHistory"
           @click="close"
@@ -114,7 +114,7 @@
         </button>
         <button
           v-if="canDelete"
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           @click.prevent="deleteStatus"
           @click="close"
@@ -125,7 +125,7 @@
           /><span>{{ $t("status.delete") }}</span>
         </button>
         <button
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           @click.prevent="copyLink"
           @click="close"
@@ -137,7 +137,7 @@
         </button>
         <a
           v-if="!status.is_local"
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           title="Source"
           :href="status.external_url"
@@ -149,7 +149,7 @@
           /><span>{{ $t("status.external_source") }}</span>
         </a>
         <button
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           @click.prevent="reportStatus"
           @click="close"
diff --git a/src/components/input.style.js b/src/components/input.style.js
index 4d0690cf..37398ab8 100644
--- a/src/components/input.style.js
+++ b/src/components/input.style.js
@@ -24,19 +24,16 @@ export default {
   selector: '.input',
   states: {
     disabled: ':disabled',
-    pressed: ':active',
     hover: ':hover',
     focused: ':focus-within'
   },
-  // variants: {
-  // },
   validInnerComponents: [
     'Text'
   ],
   defaultRules: [
     {
       directives: {
-        background: '--fg',
+        background: '--fg, -5',
         shadow: [{
           x: 0,
           y: 0,
diff --git a/src/components/menu_item.style.js b/src/components/menu_item.style.js
index 43b5c35a..72164d30 100644
--- a/src/components/menu_item.style.js
+++ b/src/components/menu_item.style.js
@@ -14,7 +14,15 @@ export default {
   defaultRules: [
     {
       directives: {
-        background: '--fg'
+        background: '--bg',
+        opacity: 0
+      }
+    },
+    {
+      state: ['hover'],
+      directives: {
+        background: '$mod(--bg, 5)',
+        opacity: 1
       }
     },
     {
diff --git a/src/components/mobile_post_status_button/mobile_post_status_button.vue b/src/components/mobile_post_status_button/mobile_post_status_button.vue
index ef0f51fe..41a6f0ba 100644
--- a/src/components/mobile_post_status_button/mobile_post_status_button.vue
+++ b/src/components/mobile_post_status_button/mobile_post_status_button.vue
@@ -25,8 +25,6 @@
     right: 1.5em;
     // TODO: this needs its own color, it has to stand out enough and link color
     // is not very optimal for this particular use.
-    background-color: $fallback--fg;
-    background-color: var(--btn, $fallback--fg);
     display: flex;
     justify-content: center;
     align-items: center;
diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
index b708cdc8..a207ad6f 100644
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@@ -12,13 +12,13 @@
         <div class="dropdown-menu">
           <span v-if="canGrantRole">
             <button
-              class="button-default dropdown-item"
+              class="menu-item dropdown-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="button-default dropdown-item"
+              class="menu-item dropdown-item"
               @click="toggleRight(&quot;moderator&quot;)"
             >
               {{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }}
@@ -31,14 +31,14 @@
           </span>
           <button
             v-if="canChangeActivationState"
-            class="button-default dropdown-item"
+            class="menu-item dropdown-item"
             @click="toggleActivationStatus()"
           >
             {{ $t(!!user.deactivated ? 'user_card.admin_menu.activate_account' : 'user_card.admin_menu.deactivate_account') }}
           </button>
           <button
             v-if="canDeleteAccount"
-            class="button-default dropdown-item"
+            class="menu-item dropdown-item"
             @click="deleteUserDialog(true)"
           >
             {{ $t('user_card.admin_menu.delete_account') }}
@@ -50,7 +50,7 @@
           />
           <span v-if="canUseTagPolicy">
             <button
-              class="button-default dropdown-item"
+              class="menu-item dropdown-item"
               @click="toggleTag(tags.FORCE_NSFW)"
             >
               <span
@@ -60,7 +60,7 @@
               {{ $t('user_card.admin_menu.force_nsfw') }}
             </button>
             <button
-              class="button-default dropdown-item"
+              class="menu-item dropdown-item"
               @click="toggleTag(tags.STRIP_MEDIA)"
             >
               <span
@@ -70,7 +70,7 @@
               {{ $t('user_card.admin_menu.strip_media') }}
             </button>
             <button
-              class="button-default dropdown-item"
+              class="menu-item dropdown-item"
               @click="toggleTag(tags.FORCE_UNLISTED)"
             >
               <span
@@ -80,7 +80,7 @@
               {{ $t('user_card.admin_menu.force_unlisted') }}
             </button>
             <button
-              class="button-default dropdown-item"
+              class="menu-item dropdown-item"
               @click="toggleTag(tags.SANDBOX)"
             >
               <span
@@ -91,7 +91,7 @@
             </button>
             <button
               v-if="user.is_local"
-              class="button-default dropdown-item"
+              class="menu-item dropdown-item"
               @click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)"
             >
               <span
@@ -102,7 +102,7 @@
             </button>
             <button
               v-if="user.is_local"
-              class="button-default dropdown-item"
+              class="menu-item dropdown-item"
               @click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)"
             >
               <span
@@ -113,7 +113,7 @@
             </button>
             <button
               v-if="user.is_local"
-              class="button-default dropdown-item"
+              class="menu-item dropdown-item"
               @click="toggleTag(tags.QUARANTINE)"
             >
               <span
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 33547a41..51fa62ed 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -38,6 +38,7 @@
         <div
           v-show="showTimelines"
           class="timelines-background"
+          :class="{ expanded: showTimelines }"
         >
           <div class="timelines">
             <NavigationEntry
@@ -57,12 +58,11 @@
         >
           <router-link
             :title="$t('lists.manage_lists')"
-            class="extra-button"
+            class="button-unstyled extra-button"
             :to="{ name: 'lists' }"
             @click.stop
           >
             <FAIcon
-              class="extra-button"
               fixed-width
               icon="wrench"
             />
@@ -76,6 +76,7 @@
         <div
           v-show="showLists"
           class="timelines-background"
+          :class="{ expanded: showTimelines }"
         >
           <ListsMenuContent
             :show-pin="editMode || forceEditMode"
@@ -156,16 +157,11 @@
 
   .timelines-background {
     padding: 0 0 0 0.6em;
-    background-color: $fallback--lightBg;
-    background-color: var(--selectedMenu, $fallback--lightBg);
-    border-bottom: 1px solid;
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
   }
 
-  .timelines {
-    background-color: $fallback--bg;
-    background-color: var(--bg, $fallback--bg);
+  .timelines-background.expanded + .NavigationEntry {
+    border-top: 1px solid;
+    border-color: var(--border);
   }
 
   .nav-panel-heading {
diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue
index 59722f6c..ed805944 100644
--- a/src/components/navigation/navigation_entry.vue
+++ b/src/components/navigation/navigation_entry.vue
@@ -70,17 +70,22 @@
   align-items: baseline;
   height: 3.5em;
   line-height: 3.5em;
-  padding: 0 1em;
+  padding: 0;
   width: 100%;
   color: $fallback--link;
   color: var(--link, $fallback--link);
 
+  &[aria-expanded] {
+    padding-right: 1em;
+  }
+
   .timelines-chevron {
     margin-right: 0;
   }
 
   .main-link {
     flex: 1;
+    padding: 0 1em;
   }
 
   .menu-icon {
diff --git a/src/components/navigation/navigation_pins.vue b/src/components/navigation/navigation_pins.vue
index 4fbb4f95..fbb550f0 100644
--- a/src/components/navigation/navigation_pins.vue
+++ b/src/components/navigation/navigation_pins.vue
@@ -3,7 +3,8 @@
     <router-link
       v-for="item in pinnedList"
       :key="item.name"
-      class="pinned-item"
+      class="button-unstyled pinned-item"
+      activeClass="toggled"
       :to="getRouteTo(item)"
       :title="item.labelRaw || $t(item.label)"
     >
@@ -60,15 +61,8 @@
       margin: 0;
     }
 
-    &.router-link-active {
-      color: $fallback--text;
-      color: var(--panelText, $fallback--text);
+    &.toggled {
       border-bottom: 4px solid;
-
-      & .svg-inline--fa,
-      & .iconLetter {
-        color: inherit;
-      }
     }
   }
 }
diff --git a/src/components/notifications/notification_filters.vue b/src/components/notifications/notification_filters.vue
index 1315b51a..001c46f9 100644
--- a/src/components/notifications/notification_filters.vue
+++ b/src/components/notifications/notification_filters.vue
@@ -8,7 +8,7 @@
     <template #content>
       <div class="dropdown-menu">
         <button
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           @click="toggleNotificationFilter('likes')"
         >
           <span
@@ -17,7 +17,7 @@
           />{{ $t('settings.notification_visibility_likes') }}
         </button>
         <button
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           @click="toggleNotificationFilter('repeats')"
         >
           <span
@@ -26,7 +26,7 @@
           />{{ $t('settings.notification_visibility_repeats') }}
         </button>
         <button
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           @click="toggleNotificationFilter('follows')"
         >
           <span
@@ -35,7 +35,7 @@
           />{{ $t('settings.notification_visibility_follows') }}
         </button>
         <button
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           @click="toggleNotificationFilter('mentions')"
         >
           <span
@@ -44,7 +44,7 @@
           />{{ $t('settings.notification_visibility_mentions') }}
         </button>
         <button
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           @click="toggleNotificationFilter('emojiReactions')"
         >
           <span
@@ -53,7 +53,7 @@
           />{{ $t('settings.notification_visibility_emoji_reactions') }}
         </button>
         <button
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           @click="toggleNotificationFilter('moves')"
         >
           <span
@@ -62,7 +62,7 @@
           />{{ $t('settings.notification_visibility_moves') }}
         </button>
         <button
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           @click="toggleNotificationFilter('polls')"
         >
           <span
diff --git a/src/components/panel.style.js b/src/components/panel.style.js
index d680a58d..ce9812a6 100644
--- a/src/components/panel.style.js
+++ b/src/components/panel.style.js
@@ -6,6 +6,7 @@ export default {
     'Link',
     'Icon',
     'Button',
+    'ButtonUnstyled',
     'Input',
     'PanelHeader',
     'MenuItem'
diff --git a/src/components/panel_header.style.js b/src/components/panel_header.style.js
index 1d89b4ce..c32304e1 100644
--- a/src/components/panel_header.style.js
+++ b/src/components/panel_header.style.js
@@ -5,7 +5,8 @@ export default {
     'Text',
     'Link',
     'Icon',
-    'Button'
+    'Button',
+    'ButtonUnstyled'
   ],
   defaultRules: [
     {
diff --git a/src/components/popover.style.js b/src/components/popover.style.js
index 9f1e6cf0..a3a554fd 100644
--- a/src/components/popover.style.js
+++ b/src/components/popover.style.js
@@ -10,6 +10,7 @@ export default {
     'Link',
     'Icon',
     'Button',
+    'ButtonUnstyled',
     'Input',
     'PanelHeader',
     'MenuItem'
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 1a4bffd9..ce053503 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -53,8 +53,7 @@
   position: fixed;
   min-width: 0;
   max-width: calc(100vw - 20px);
-  box-shadow: 2px 2px 3px rgb(0 0 0 / 50%);
-  box-shadow: var(--popupShadow);
+  box-shadow: var(--shadow);
 }
 
 .popover-default {
@@ -66,24 +65,12 @@
     left: 0;
     right: 0;
     z-index: 3;
-    box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
-    box-shadow: var(--panelShadow);
+    box-shadow: var(--shadow);
     pointer-events: none;
   }
 
   border-radius: $fallback--btnRadius;
   border-radius: var(--btnRadius, $fallback--btnRadius);
-  background-color: $fallback--bg;
-  background-color: var(--popover, $fallback--bg);
-  color: $fallback--text;
-  color: var(--popoverText, $fallback--text);
-
-  --faint: var(--popoverFaintText, $fallback--faint);
-  --faintLink: var(--popoverFaintLink, $fallback--faint);
-  --lightText: var(--popoverLightText, $fallback--lightText);
-  --postLink: var(--popoverPostLink, $fallback--link);
-  --postFaintLink: var(--popoverPostFaintLink, $fallback--link);
-  --icon: var(--popoverIcon, $fallback--icon);
 }
 
 .dropdown-menu {
@@ -127,7 +114,6 @@
       svg {
         width: 22px;
         margin-right: 0.75rem;
-        color: var(--menuPopoverIcon, $fallback--icon);
       }
     }
 
@@ -138,25 +124,6 @@
       }
     }
 
-    &:active,
-    &:hover {
-      background-color: $fallback--lightBg;
-      background-color: var(--selectedMenuPopover, $fallback--lightBg);
-      box-shadow: none;
-
-      --btnText: var(--selectedMenuPopoverText, $fallback--link);
-      --faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
-      --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
-      --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
-      --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
-
-      svg {
-        color: var(--selectedMenuPopoverIcon, $fallback--icon);
-
-        --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
-      }
-    }
-
     .menu-checkbox {
       display: inline-block;
       vertical-align: middle;
@@ -188,30 +155,5 @@
       }
     }
   }
-
-  .button-default.dropdown-item {
-    &,
-    i[class*="icon-"] {
-      color: $fallback--text;
-      color: var(--btnText, $fallback--text);
-    }
-
-    &:active {
-      background-color: $fallback--lightBg;
-      background-color: var(--selectedMenuPopover, $fallback--lightBg);
-      color: $fallback--link;
-      color: var(--selectedMenuPopoverText, $fallback--link);
-    }
-
-    &:disabled {
-      color: $fallback--text;
-      color: var(--btnDisabledText, $fallback--text);
-    }
-
-    &.toggled {
-      color: $fallback--text;
-      color: var(--btnToggledText, $fallback--text);
-    }
-  }
 }
 </style>
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 7dd9efb4..a5300083 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -503,31 +503,6 @@
     padding: 0 0.1em;
     display: flex;
     align-items: center;
-
-    &.selected,
-    &:hover {
-      // needs to be specific to override icon default color
-      svg,
-      i,
-      label {
-        color: $fallback--lightText;
-        color: var(--lightText, $fallback--lightText);
-      }
-    }
-
-    &.disabled {
-      svg,
-      i {
-        cursor: not-allowed;
-        color: $fallback--icon;
-        color: var(--btnDisabledText, $fallback--icon);
-
-        &:hover {
-          color: $fallback--icon;
-          color: var(--btnDisabledText, $fallback--icon);
-        }
-      }
-    }
   }
 
   .error {
diff --git a/src/components/quick_filter_settings/quick_filter_settings.vue b/src/components/quick_filter_settings/quick_filter_settings.vue
index b81215a1..c6792a2c 100644
--- a/src/components/quick_filter_settings/quick_filter_settings.vue
+++ b/src/components/quick_filter_settings/quick_filter_settings.vue
@@ -16,7 +16,7 @@
         >
           <button
             v-if="!conversation"
-            class="button-default dropdown-item"
+            class="menu-item dropdown-item"
             :aria-checked="replyVisibilityAll"
             role="menuitemradio"
             @click="replyVisibilityAll = true"
@@ -29,7 +29,7 @@
           </button>
           <button
             v-if="!conversation"
-            class="button-default dropdown-item"
+            class="menu-item dropdown-item"
             :aria-checked="replyVisibilityFollowing"
             role="menuitemradio"
             @click="replyVisibilityFollowing = true"
@@ -42,7 +42,7 @@
           </button>
           <button
             v-if="!conversation"
-            class="button-default dropdown-item"
+            class="menu-item dropdown-item"
             :aria-checked="replyVisibilitySelf"
             role="menuitemradio"
             @click="replyVisibilitySelf = true"
@@ -60,7 +60,7 @@
           />
         </div>
         <button
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           role="menuitemcheckbox"
           :aria-checked="muteBotStatuses"
           @click="muteBotStatuses = !muteBotStatuses"
@@ -72,7 +72,7 @@
           />{{ $t('settings.mute_bot_posts') }}
         </button>
         <button
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           role="menuitemcheckbox"
           :aria-checked="hideMedia"
           @click="hideMedia = !hideMedia"
@@ -84,7 +84,7 @@
           />{{ $t('settings.hide_media_previews') }}
         </button>
         <button
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           role="menuitemcheckbox"
           :aria-checked="hideMutedPosts"
           @click="hideMutedPosts = !hideMutedPosts"
@@ -96,7 +96,7 @@
           />{{ $t('settings.hide_all_muted_posts') }}
         </button>
         <button
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           @click="openTab('filtering')"
         >
diff --git a/src/components/quick_view_settings/quick_view_settings.vue b/src/components/quick_view_settings/quick_view_settings.vue
index 9f5cdabc..00955d4c 100644
--- a/src/components/quick_view_settings/quick_view_settings.vue
+++ b/src/components/quick_view_settings/quick_view_settings.vue
@@ -12,7 +12,7 @@
       >
         <div role="group">
           <button
-            class="button-default dropdown-item"
+            class="menu-item dropdown-item"
             :aria-checked="conversationDisplay === 'tree'"
             role="menuitemradio"
             @click="conversationDisplay = 'tree'"
@@ -27,7 +27,7 @@
             /> {{ $t('settings.conversation_display_tree_quick') }}
           </button>
           <button
-            class="button-default dropdown-item"
+            class="menu-item dropdown-item"
             :aria-checked="conversationDisplay === 'linear'"
             role="menuitemradio"
             @click="conversationDisplay = 'linear'"
@@ -47,7 +47,7 @@
           class="dropdown-divider"
         />
         <button
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           role="menuitemcheckbox"
           :aria-checked="showUserAvatars"
           @click="showUserAvatars = !showUserAvatars"
@@ -60,7 +60,7 @@
         </button>
         <button
           v-if="!conversation"
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           role="menuitemcheckbox"
           :aria-checked="autoUpdate"
           @click="autoUpdate = !autoUpdate"
@@ -73,7 +73,7 @@
         </button>
         <button
           v-if="!conversation"
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           role="menuitemcheckbox"
           :aria-checked="collapseWithSubjects"
           @click="collapseWithSubjects = !collapseWithSubjects"
@@ -85,7 +85,7 @@
           />{{ $t('settings.collapse_subject') }}
         </button>
         <button
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           @click="openTab('general')"
         >
diff --git a/src/components/scope_selector/scope_selector.js b/src/components/scope_selector/scope_selector.js
index 74bf7284..52cda368 100644
--- a/src/components/scope_selector/scope_selector.js
+++ b/src/components/scope_selector/scope_selector.js
@@ -44,10 +44,10 @@ const ScopeSelector = {
     },
     css () {
       return {
-        public: { selected: this.currentScope === 'public' },
-        unlisted: { selected: this.currentScope === 'unlisted' },
-        private: { selected: this.currentScope === 'private' },
-        direct: { selected: this.currentScope === 'direct' }
+        public: { toggled: this.currentScope === 'public' },
+        unlisted: { toggled: this.currentScope === 'unlisted' },
+        private: { toggled: this.currentScope === 'private' },
+        direct: { toggled: this.currentScope === 'direct' }
       }
     }
   },
diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue
index d6e7265b..1cb6cdf2 100644
--- a/src/components/scope_selector/scope_selector.vue
+++ b/src/components/scope_selector/scope_selector.vue
@@ -73,11 +73,6 @@
     min-width: 1.3em;
     min-height: 1.3em;
     text-align: center;
-
-    &.selected svg {
-      color: $fallback--lightText;
-      color: var(--lightText, $fallback--lightText);
-    }
   }
 }
 </style>
diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.vue b/src/components/settings_modal/admin_tabs/frontends_tab.vue
index dd4c9790..fa91afc1 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.vue
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.vue
@@ -103,7 +103,7 @@
                       <button
                         v-for="ref in frontend.refs"
                         :key="ref"
-                        class="button-default dropdown-item"
+                        class="menu-item dropdown-item"
                         @click.prevent="update(frontend, ref)"
                         @click="close"
                       >
@@ -160,7 +160,7 @@
                       <button
                         v-for="ref in frontend.installedRefs || frontend.refs"
                         :key="ref"
-                        class="button-default dropdown-item"
+                        class="menu-item dropdown-item"
                         @click.prevent="setDefault(frontend, ref)"
                         @click="close"
                       >
diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue
index 4e7fd931..d5931318 100644
--- a/src/components/settings_modal/settings_modal.vue
+++ b/src/components/settings_modal/settings_modal.vue
@@ -70,7 +70,7 @@
           <template #content="{close}">
             <div class="dropdown-menu">
               <button
-                class="button-default dropdown-item dropdown-item-icon"
+                class="menu-item dropdown-item dropdown-item-icon"
                 @click.prevent="backup"
                 @click="close"
               >
@@ -80,7 +80,7 @@
                 /><span>{{ $t("settings.file_export_import.backup_settings") }}</span>
               </button>
               <button
-                class="button-default dropdown-item dropdown-item-icon"
+                class="menu-item dropdown-item dropdown-item-icon"
                 @click.prevent="backupWithTheme"
                 @click="close"
               >
@@ -90,7 +90,7 @@
                 /><span>{{ $t("settings.file_export_import.backup_settings_theme") }}</span>
               </button>
               <button
-                class="button-default dropdown-item dropdown-item-icon"
+                class="menu-item dropdown-item dropdown-item-icon"
                 @click.prevent="restore"
                 @click="close"
               >
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 760c6ac1..0f4a9434 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -135,11 +135,6 @@
     .button-unstyled {
       padding: 5px;
       margin: -5px;
-
-      &:hover svg {
-        color: $fallback--lightText;
-        color: var(--lightText, $fallback--lightText);
-      }
     }
 
     .svg-inline--fa {
diff --git a/src/components/top_bar.style.js b/src/components/top_bar.style.js
index 99e8efdc..fd400522 100644
--- a/src/components/top_bar.style.js
+++ b/src/components/top_bar.style.js
@@ -6,6 +6,7 @@ export default {
     'Text',
     'Icon',
     'Button',
+    'ButtonUnstyled',
     'Input'
   ],
   defaultRules: [
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 4ab93a8a..62861570 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -110,19 +110,8 @@
 }
 
 .user-info {
-  color: $fallback--lightText;
-  color: var(--lightText, $fallback--lightText);
   padding: 0 26px;
 
-  a {
-    color: $fallback--lightText;
-    color: var(--lightText, $fallback--lightText);
-
-    &:hover {
-      color: var(--icon);
-    }
-  }
-
   .container {
     min-width: 0;
     padding: 16px 0 6px;
@@ -334,8 +323,6 @@
   padding: 0.5em 1.5em 0;
   text-align: center;
   justify-content: space-between;
-  color: $fallback--lightText;
-  color: var(--lightText, $fallback--lightText);
   flex-wrap: wrap;
 }
 
diff --git a/src/components/user_list_menu/user_list_menu.vue b/src/components/user_list_menu/user_list_menu.vue
index 06947ab7..812f812e 100644
--- a/src/components/user_list_menu/user_list_menu.vue
+++ b/src/components/user_list_menu/user_list_menu.vue
@@ -10,7 +10,7 @@
           <button
             v-for="list in lists"
             :key="list.id"
-            class="button-default dropdown-item"
+            class="menu-item dropdown-item"
             @click="toggleList(list.id)"
           >
             <span
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index 2f4a6e71..0d205c73 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -16,6 +16,7 @@ import MenuItem from 'src/components/menu_item.style.js'
 import Panel from 'src/components/panel.style.js'
 import PanelHeader from 'src/components/panel_header.style.js'
 import Button from 'src/components/button.style.js'
+import ButtonUnstyled from 'src/components/button_unstyled.style.js'
 import Input from 'src/components/input.style.js'
 import Text from 'src/components/text.style.js'
 import Link from 'src/components/link.style.js'
@@ -49,6 +50,7 @@ const components = {
   PanelHeader,
   TopBar,
   Button,
+  ButtonUnstyled,
   Input
 }
 
@@ -208,7 +210,6 @@ export const init = (extraRuleset, palette) => {
     })
     .map(({ data }) => data)
 
-  console.log(ruleset)
   const virtualComponents = new Set(Object.values(components).filter(c => c.virtual).map(c => c.name))
 
   const addRule = (rule) => {
@@ -437,11 +438,6 @@ export const init = (extraRuleset, palette) => {
           }
         }
 
-        if (component.name === 'Text' && combination.variant === 'normal' && computedRule.parent.component === 'MenuItem' && computedRule.parent.state.indexOf('hover') >= 0) {
-          console.log(existingRules)
-          console.log(computedRule, newTextRule)
-        }
-
         dynamicVars.inheritedBackground = lowerLevelBackground
 
         // TODO properly provide "parent" text color?
-- 
cgit v1.2.3-70-g09d2


From 7c77809ff9a4d365ec17fb2ed43f3795382940a9 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 16 Feb 2024 00:29:16 +0200
Subject: badge, alert(dot) improvements

---
 src/App.scss                                       | 54 +++++++---------------
 src/components/alert.style.js                      |  9 +++-
 src/components/badge.style.js                      |  3 +-
 src/components/chat/chat.vue                       |  2 +-
 src/components/chat_list_item/chat_list_item.vue   |  2 +-
 src/components/menu_item.style.js                  |  3 +-
 src/components/mobile_nav/mobile_nav.vue           | 25 ++--------
 src/components/navigation/navigation_entry.vue     |  6 ++-
 src/components/navigation/navigation_pins.vue      | 13 +-----
 src/components/notifications/notifications.vue     |  2 +-
 .../settings_modal/tabs/theme_tab/preview.vue      |  2 +-
 src/components/side_drawer/side_drawer.vue         |  6 +--
 src/components/timeline/timeline.scss              | 11 -----
 src/services/style_setter/style_setter.js          |  3 --
 14 files changed, 44 insertions(+), 97 deletions(-)

(limited to 'src/components/navigation/navigation_entry.vue')

diff --git a/src/App.scss b/src/App.scss
index 6080b0e5..0af05a54 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -634,11 +634,21 @@ option {
   overflow: hidden;
   text-overflow: ellipsis;
 
-  &.badge-notification {
-    background-color: $fallback--cRed;
-    background-color: var(--badgeNotification, $fallback--cRed);
-    color: white;
-    color: var(--badgeNotificationText, white);
+  &.-dot {
+    border-radius: 100%;
+    min-height: 8px;
+    max-height: 8px;
+    min-width: 8px;
+    max-width: 8px;
+    padding: 0;
+    line-height: 0;
+    margin: 0;
+    font-size: 0;
+    position: absolute;
+    left: calc(50% - 4px);
+    top: calc(50% - 4px);
+    margin-left: 6px;
+    margin-top: -6px;
   }
 }
 
@@ -646,39 +656,7 @@ option {
   margin: 0 0.35em;
   padding: 0 0.25em;
   border-radius: var(--roundness);
-
-  &.error {
-    background-color: $fallback--alertError;
-    background-color: var(--alertError, $fallback--alertError);
-    color: $fallback--text;
-    color: var(--alertErrorText, $fallback--text);
-
-    .panel-heading & {
-      color: $fallback--text;
-      color: var(--alertErrorPanelText, $fallback--text);
-    }
-  }
-
-  &.warning {
-    background-color: $fallback--alertWarning;
-    background-color: var(--alertWarning, $fallback--alertWarning);
-    color: $fallback--text;
-    color: var(--alertWarningText, $fallback--text);
-
-    .panel-heading & {
-      color: $fallback--text;
-      color: var(--alertWarningPanelText, $fallback--text);
-    }
-  }
-
-  &.success {
-    background-color: var(--alertSuccess, $fallback--alertWarning);
-    color: var(--alertSuccessText, $fallback--text);
-
-    .panel-heading & {
-      color: var(--alertSuccessPanelText, $fallback--text);
-    }
-  }
+  border: 1px solid var(--border);
 }
 
 .faint {
diff --git a/src/components/alert.style.js b/src/components/alert.style.js
index 081031d7..5881e833 100644
--- a/src/components/alert.style.js
+++ b/src/components/alert.style.js
@@ -17,9 +17,16 @@ export default {
     {
       directives: {
         background: '--text',
-        opacity: 0.8
+        opacity: 0.5
       }
     },
+    {
+      parent: {
+        component: 'Alert'
+      },
+      component: 'Border',
+      textColor: '--parent'
+    },
     {
       variant: 'error',
       directives: {
diff --git a/src/components/badge.style.js b/src/components/badge.style.js
index 3ac7d8c0..37833cdb 100644
--- a/src/components/badge.style.js
+++ b/src/components/badge.style.js
@@ -6,8 +6,7 @@ export default {
     'Icon'
   ],
   variants: {
-    normal: '.neutral',
-    notification: '.notification'
+    notification: '.-notification'
   },
   defaultRules: [
     {
diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
index b1e5468c..fc94cc71 100644
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@@ -61,7 +61,7 @@
               <FAIcon icon="chevron-down" />
               <div
                 v-if="newMessageCount"
-                class="badge badge-notification unread-chat-count unread-message-count"
+                class="badge -notification unread-chat-count unread-message-count"
               >
                 {{ newMessageCount }}
               </div>
diff --git a/src/components/chat_list_item/chat_list_item.vue b/src/components/chat_list_item/chat_list_item.vue
index 69ad609b..cbae2d11 100644
--- a/src/components/chat_list_item/chat_list_item.vue
+++ b/src/components/chat_list_item/chat_list_item.vue
@@ -36,7 +36,7 @@
         />
         <div
           v-if="chat.unread > 0"
-          class="badge badge-notification unread-chat-count"
+          class="badge -notification unread-chat-count"
         >
           {{ chat.unread }}
         </div>
diff --git a/src/components/menu_item.style.js b/src/components/menu_item.style.js
index 6475395a..3c70bd9f 100644
--- a/src/components/menu_item.style.js
+++ b/src/components/menu_item.style.js
@@ -6,7 +6,8 @@ export default {
     'Icon',
     'Input',
     'Border',
-    'ButtonUnstyled'
+    'ButtonUnstyled',
+    'Badge'
   ],
   states: {
     hover: ':hover',
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 489f3866..2e7590b9 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -20,7 +20,7 @@
           />
           <div
             v-if="(unreadChatCount && !chatsPinned) || unreadAnnouncementCount"
-            class="badge alert-dot"
+            class="badge -dot -notification"
           />
         </button>
         <NavigationPins class="pins" />
@@ -37,14 +37,14 @@
           />
           <div
             v-if="unseenNotificationsCount"
-            class="badge alert-dot"
+            class="badge -dot -notification"
           />
         </button>
       </div>
     </nav>
     <aside
       v-if="currentUser"
-      class="mobile-notifications-drawer"
+      class="panel mobile-notifications-drawer"
       :class="{ '-closed': !notificationsOpen }"
       @touchstart.stop="notificationsTouchStart"
       @touchmove.stop="notificationsTouchMove"
@@ -54,7 +54,7 @@
           {{ $t('notifications.notifications') }}
           <span
             v-if="unseenCountBadgeText"
-            class="badge badge-notification unseen-count"
+            class="badge -notification unseen-count"
           >{{ unseenCountBadgeText }}</span>
         </span>
         <span class="spacer" />
@@ -165,19 +165,6 @@
     display: flex;
   }
 
-  .alert-dot {
-    border-radius: 100%;
-    height: 8px;
-    width: 8px;
-    position: absolute;
-    left: calc(50% - 4px);
-    top: calc(50% - 4px);
-    margin-left: 6px;
-    margin-top: -6px;
-    background-color: $fallback--cRed;
-    background-color: var(--badgeNotification, $fallback--cRed);
-  }
-
   .mobile-notifications-drawer {
     width: 100%;
     height: 100vh;
@@ -238,10 +225,6 @@
     height: calc(100vh - var(--navbar-height));
     overflow-x: hidden;
     overflow-y: scroll;
-    color: $fallback--text;
-    color: var(--text, $fallback--text);
-    background-color: $fallback--bg;
-    background-color: var(--bg, $fallback--bg);
 
     .notifications {
       padding: 0;
diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue
index ed805944..1189f76d 100644
--- a/src/components/navigation/navigation_entry.vue
+++ b/src/components/navigation/navigation_entry.vue
@@ -34,7 +34,7 @@
       <slot />
       <div
         v-if="item.badgeGetter && getters[item.badgeGetter]"
-        class="badge badge-notification"
+        class="badge -notification"
       >
         {{ getters[item.badgeGetter] }}
       </div>
@@ -100,5 +100,9 @@
       margin-right: -0.8em;
     }
   }
+
+  .badge {
+     margin: 0 0.8em;
+  }
 }
 </style>
diff --git a/src/components/navigation/navigation_pins.vue b/src/components/navigation/navigation_pins.vue
index 48a4dcbd..931d5325 100644
--- a/src/components/navigation/navigation_pins.vue
+++ b/src/components/navigation/navigation_pins.vue
@@ -19,7 +19,7 @@
       >{{ item.iconLetter }}</span>
       <div
         v-if="item.badgeGetter && getters[item.badgeGetter]"
-        class="badge alert-dot"
+        class="badge -dot -notification"
       />
     </router-link>
   </span>
@@ -36,17 +36,6 @@
   overflow: hidden;
   height: 100%;
 
-  .alert-dot {
-    border-radius: 100%;
-    height: 0.5em;
-    width: 0.5em;
-    position: absolute;
-    right: calc(50% - 0.75em);
-    top: calc(50% - 0.5em);
-    background-color: $fallback--cRed;
-    background-color: var(--badgeNotification, $fallback--cRed);
-  }
-
   .pinned-item {
     position: relative;
     flex: 1 0 3em;
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index a0025182..eb128450 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -18,7 +18,7 @@
             {{ $t('notifications.notifications') }}
             <span
               v-if="unseenCountBadgeText"
-              class="badge badge-notification unseen-count"
+              class="badge -notification unseen-count"
             >{{ unseenCountBadgeText }}</span>
           </div>
           <div
diff --git a/src/components/settings_modal/tabs/theme_tab/preview.vue b/src/components/settings_modal/tabs/theme_tab/preview.vue
index 5230f3e9..4054a440 100644
--- a/src/components/settings_modal/tabs/theme_tab/preview.vue
+++ b/src/components/settings_modal/tabs/theme_tab/preview.vue
@@ -5,7 +5,7 @@
       <div class="panel-heading">
         <div class="title">
           {{ $t('settings.style.preview.header') }}
-          <span class="badge badge-notification">
+          <span class="badge -notification">
             99
           </span>
         </div>
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 09588767..1c6e5802 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -82,7 +82,7 @@
             /> {{ $t("nav.chats") }}
             <span
               v-if="unreadChatCount"
-              class="badge badge-notification"
+              class="badge -notification"
             >
               {{ unreadChatCount }}
             </span>
@@ -111,7 +111,7 @@
             /> {{ $t("nav.friend_requests") }}
             <span
               v-if="followRequestCount > 0"
-              class="badge badge-notification"
+              class="badge -notification"
             >
               {{ followRequestCount }}
             </span>
@@ -205,7 +205,7 @@
             /> {{ $t("nav.announcements") }}
             <span
               v-if="unreadAnnouncementCount"
-              class="badge badge-notification"
+              class="badge -notification"
             >
               {{ unreadAnnouncementCount }}
             </span>
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index 64c7de76..7f886dc3 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -1,17 +1,6 @@
 @import "../../variables";
 
 .Timeline {
-  .alert-dot {
-    border-radius: 100%;
-    height: 8px;
-    width: 8px;
-    position: absolute;
-    left: calc(50% - 4px);
-    top: calc(50% - 4px);
-    margin-left: 6px;
-    margin-top: -6px;
-  }
-
   .alert-badge {
     font-size: 0.75em;
     line-height: 1;
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index f9608680..3e420017 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -24,9 +24,6 @@ export const applyTheme = (input) => {
   const styleSheet = styleEl.sheet
 
   styleSheet.toString()
-  // styleSheet.insertRule(`:root { ${rules.radii} }`, 'index-max')
-  // styleSheet.insertRule(`:root { ${rules.colors} }`, 'index-max')
-  // styleSheet.insertRule(`:root { ${rules.shadows} }`, 'index-max')
   styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max')
   themes3.css(themes3.eager).forEach(rule => {
     styleSheet.insertRule(rule, 'index-max')
-- 
cgit v1.2.3-70-g09d2


From c83ddb0b2b824fb3c0e3bb596552e98c162c78d3 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 27 Feb 2024 17:03:39 +0200
Subject: better v1 detection, better menu-item consistency

---
 src/components/menu_item.style.js                  | 35 +++++++++++++++++++---
 src/components/navigation/navigation_entry.vue     | 14 ++++++++-
 .../settings_modal/tabs/theme_tab/theme_tab.js     |  2 ++
 src/services/style_setter/style_setter.js          |  8 ++---
 src/services/theme_data/css_utils.js               |  2 +-
 src/services/theme_data/theme_data_3.service.js    |  8 +++--
 6 files changed, 57 insertions(+), 12 deletions(-)

(limited to 'src/components/navigation/navigation_entry.vue')

diff --git a/src/components/menu_item.style.js b/src/components/menu_item.style.js
index 3c70bd9f..3812f894 100644
--- a/src/components/menu_item.style.js
+++ b/src/components/menu_item.style.js
@@ -30,17 +30,44 @@ export default {
     {
       state: ['active'],
       directives: {
-        background: '$mod(--bg, 5)',
+        background: '$mod(--bg, 10)',
+        opacity: 1
+      }
+    },
+    {
+      state: ['active', 'hover'],
+      directives: {
+        background: '$mod(--bg, 15)',
         opacity: 1
       }
     },
     {
       component: 'Text',
-      variant: 'normal',
       parent: {
         component: 'MenuItem',
-        state: ['normal', 'hover'],
-        variant: 'normal'
+        state: ['hover']
+      },
+      directives: {
+        textColor: '--link',
+        textAuto: 'no-preserve'
+      }
+    },
+    {
+      component: 'Text',
+      parent: {
+        component: 'MenuItem',
+        state: ['active']
+      },
+      directives: {
+        textColor: '--link',
+        textAuto: 'no-preserve'
+      }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'MenuItem',
+        state: ['active']
       },
       directives: {
         textColor: '--link',
diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue
index 1189f76d..ac4a0c47 100644
--- a/src/components/navigation/navigation_entry.vue
+++ b/src/components/navigation/navigation_entry.vue
@@ -10,7 +10,7 @@
     >
       <component
         :is="routeTo ? 'a' : 'button'"
-        class="main-link button-unstyled"
+        class="main-link"
         :href="href"
         @click="navigate"
       >
@@ -84,11 +84,23 @@
   }
 
   .main-link {
+    background: none;
+    border: none;
+    outline: none;
+    display: inline;
+    text-align: initial;
+    font-size: 100%;
+    font-family: inherit;
+    line-height: unset;
+    cursor: pointer;
+    box-sizing: content-box;
+    color: var(--text);
     flex: 1;
     padding: 0 1em;
   }
 
   .menu-icon {
+    color: var(--icon);
     margin-right: 0.8em;
   }
 
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
index dd525920..11c90b03 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
@@ -514,6 +514,7 @@ export default {
       this.$store.dispatch('setOption', {
         name: 'customTheme',
         value: {
+          themeFileVersion: this.selectedVersion,
           themeEngineVersion: CURRENT_VERSION,
           ...this.previewTheme
         }
@@ -521,6 +522,7 @@ export default {
       this.$store.dispatch('setOption', {
         name: 'customThemeSource',
         value: {
+          themeFileVersion: this.selectedVersion,
           themeEngineVersion: CURRENT_VERSION,
           shadows: this.shadowsLocal,
           fonts: this.fontsLocal,
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 52cf06ed..74d745f0 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -8,11 +8,11 @@ import { chunk } from 'lodash'
 
 export const applyTheme = async (input) => {
   let extraRules
-  if (input.themeType !== 1) {
+  if (input.themeFileVersion === 1) {
+    extraRules = convertTheme2To3(input)
+  } else {
     const { theme } = generatePreset(input)
     extraRules = convertTheme2To3(theme)
-  } else {
-    extraRules = convertTheme2To3(input)
   }
 
   const themes3 = init(extraRules, '#FFFFFF')
@@ -125,7 +125,7 @@ export const getPreset = (val) => {
     .then((themes) => themes[val] ? themes[val] : themes['pleroma-dark'])
     .then((theme) => {
       const isV1 = Array.isArray(theme)
-      const data = isV1 ? { themeType: 1 } : theme.theme
+      const data = isV1 ? {} : theme.theme
 
       if (isV1) {
         const bg = hex2rgb(theme[1])
diff --git a/src/services/theme_data/css_utils.js b/src/services/theme_data/css_utils.js
index f04fed42..321bc3e5 100644
--- a/src/services/theme_data/css_utils.js
+++ b/src/services/theme_data/css_utils.js
@@ -155,7 +155,7 @@ export const getCssRules = (rules) => rules.map(rule => {
   return [
     header,
     directives + ';',
-    (!rule.virtual && rule.directives.textNoCssColor !== 'yes') ? '  color: var(--text);' : '',
+    (rule.component === 'Text' && rule.directives.textNoCssColor !== 'yes') ? '  color: var(--text);' : '',
     '',
     virtualDirectives,
     footer
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index b3c4abf1..5fd16f19 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -275,8 +275,12 @@ export const init = (extraRuleset, ultimateBackgroundColor) => {
         selector: cssSelector.split(/ /g).slice(0, -1).join(' '),
         ...combination,
         directives: {},
-        virtualDirectives,
-        virtualDirectivesRaw
+        virtualDirectives: {
+          [virtualName]: getTextColorAlpha(newTextRule.directives, textColor, dynamicVars)
+        },
+        virtualDirectivesRaw: {
+          [virtualName]: textColor
+        }
       }
     } else {
       computed[selector] = computed[selector] || {}
-- 
cgit v1.2.3-70-g09d2


From fe93717d47792eef88f4ec6200260f457d1e0bd2 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 28 Feb 2024 01:23:43 +0200
Subject: consistent menu-items

---
 src/App.scss                                       | 29 +++++++++++
 src/components/account_actions/account_actions.vue | 14 +++---
 src/components/emoji_input/emoji_input.js          |  2 +-
 src/components/emoji_input/emoji_input.vue         | 20 ++++----
 .../moderation_tools/moderation_tools.vue          | 22 ++++-----
 src/components/navigation/navigation_entry.vue     | 56 ++++++++++------------
 src/components/popover/popover.vue                 | 32 ++++---------
 src/components/user_list_menu/user_list_menu.vue   |  2 +-
 8 files changed, 92 insertions(+), 85 deletions(-)

(limited to 'src/components/navigation/navigation_entry.vue')

diff --git a/src/App.scss b/src/App.scss
index 61ab44e6..2476791c 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -366,17 +366,42 @@ nav {
 }
 
 .menu-item {
+  display: block;
+  box-sizing: border-box;
   border: none;
   outline: none;
   text-align: initial;
   font-size: inherit;
   font-family: inherit;
+  font-weight: 400;
   cursor: pointer;
   color: inherit;
+  clear: both;
   position: relative;
   border-bottom: 1px solid;
+  white-space: nowrap;
   border-color: var(--border);
   width: 100%;
+  line-height: var(--__line-height);
+  padding: var(--__vertical-gap) var(--__horizontal-gap);
+
+  --__line-height: 1.5em;
+  --__horizontal-gap: 0.75em;
+  --__vertical-gap: 0.5em;
+
+  a,
+  button {
+    text-align: initial;
+    padding: 0;
+    background: none;
+    border: none;
+    outline: none;
+    display: inline;
+    font-size: 100%;
+    font-family: inherit;
+    line-height: unset;
+    color: var(--text);
+  }
 
   &:first-child {
     border-top-right-radius: var(--roundness);
@@ -693,6 +718,10 @@ option {
   &.iconLetter {
     font-size: 1.1em;
   }
+
+  &.svg-inline--fa {
+    vertical-align: -0.15em;
+  }
 }
 
 .fa-old-padding {
diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index 1c3c1419..cca7121c 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -11,14 +11,14 @@
           <template v-if="relationship.following">
             <button
               v-if="relationship.showing_reblogs"
-              class="btn button-default dropdown-item"
+              class="dropdown-item menu-item"
               @click="hideRepeats"
             >
               {{ $t('user_card.hide_repeats') }}
             </button>
             <button
               v-if="!relationship.showing_reblogs"
-              class="btn button-default dropdown-item"
+              class="dropdown-item menu-item"
               @click="showRepeats"
             >
               {{ $t('user_card.show_repeats') }}
@@ -31,34 +31,34 @@
           <UserListMenu :user="user" />
           <button
             v-if="relationship.followed_by"
-            class="btn button-default btn-block dropdown-item"
+            class="dropdown-item menu-item"
             @click="removeUserFromFollowers"
           >
             {{ $t('user_card.remove_follower') }}
           </button>
           <button
             v-if="relationship.blocking"
-            class="btn button-default btn-block dropdown-item"
+            class="dropdown-item menu-item"
             @click="unblockUser"
           >
             {{ $t('user_card.unblock') }}
           </button>
           <button
             v-else
-            class="btn button-default btn-block dropdown-item"
+            class="dropdown-item menu-item"
             @click="blockUser"
           >
             {{ $t('user_card.block') }}
           </button>
           <button
-            class="btn button-default btn-block dropdown-item"
+            class="dropdown-item menu-item"
             @click="reportUser"
           >
             {{ $t('user_card.report') }}
           </button>
           <button
             v-if="pleromaChatMessagesAvailable"
-            class="btn button-default btn-block dropdown-item"
+            class="dropdown-item menu-item"
             @click="openChat"
           >
             {{ $t('user_card.message') }}
diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
index 9baf63f2..3cc58bd1 100644
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@@ -270,7 +270,7 @@ const EmojiInput = {
       if (newValue) {
         this.$refs.suggestorPopover.showPopover()
       } else {
-        this.$refs.suggestorPopover.hidePopover()
+        // this.$refs.suggestorPopover.hidePopover()
       }
     },
     textAtCaret: async function (newWord) {
diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index 8c18ec7b..e016aff1 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -185,23 +185,21 @@
     position: absolute;
   }
 
-  &-item {
+  &-item.menu-item {
     display: flex;
-    cursor: pointer;
-    padding: 0.2em 0.4em;
-    height: 32px;
+    padding-top: 0;
+    padding-bottom: 0;
 
     .image {
-      width: 32px;
-      height: 32px;
-      line-height: 32px;
+      width: calc(var(--__line-height) + var(--__vertical-gap) * 2);
+      height: calc(var(--__line-height) + var(--__vertical-gap) * 2);
+      line-height: var(--__line-height);
       text-align: center;
-      font-size: 32px;
-      margin-right: 4px;
+      margin-right: var(--__horizontal-gap);
 
       img {
-        width: 32px;
-        height: 32px;
+        width: calc(var(--__line-height) + var(--__vertical-gap) * 2);
+        height: calc(var(--__line-height) + var(--__vertical-gap) * 2);
         object-fit: contain;
       }
     }
diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
index e1c77160..91d87b69 100644
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@@ -12,13 +12,13 @@
         <div class="dropdown-menu">
           <span v-if="canGrantRole">
             <button
-              class="menu-item dropdown-item"
+              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"
+              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') }}
@@ -31,14 +31,14 @@
           </span>
           <button
             v-if="canChangeActivationState"
-            class="menu-item dropdown-item"
+            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"
+            class="menu-item dropdown-item menu-item"
             @click="deleteUserDialog(true)"
           >
             {{ $t('user_card.admin_menu.delete_account') }}
@@ -50,7 +50,7 @@
           />
           <span v-if="canUseTagPolicy">
             <button
-              class="menu-item dropdown-item"
+              class="menu-item dropdown-item menu-item"
               @click="toggleTag(tags.FORCE_NSFW)"
             >
               <span
@@ -60,7 +60,7 @@
               {{ $t('user_card.admin_menu.force_nsfw') }}
             </button>
             <button
-              class="menu-item dropdown-item"
+              class="menu-item dropdown-item menu-item"
               @click="toggleTag(tags.STRIP_MEDIA)"
             >
               <span
@@ -70,7 +70,7 @@
               {{ $t('user_card.admin_menu.strip_media') }}
             </button>
             <button
-              class="menu-item dropdown-item"
+              class="menu-item dropdown-item menu-item"
               @click="toggleTag(tags.FORCE_UNLISTED)"
             >
               <span
@@ -80,7 +80,7 @@
               {{ $t('user_card.admin_menu.force_unlisted') }}
             </button>
             <button
-              class="menu-item dropdown-item"
+              class="menu-item dropdown-item menu-item"
               @click="toggleTag(tags.SANDBOX)"
             >
               <span
@@ -91,7 +91,7 @@
             </button>
             <button
               v-if="user.is_local"
-              class="menu-item dropdown-item"
+              class="menu-item dropdown-item menu-item"
               @click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)"
             >
               <span
@@ -102,7 +102,7 @@
             </button>
             <button
               v-if="user.is_local"
-              class="menu-item dropdown-item"
+              class="menu-item dropdown-item menu-item"
               @click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)"
             >
               <span
@@ -113,7 +113,7 @@
             </button>
             <button
               v-if="user.is_local"
-              class="menu-item dropdown-item"
+              class="menu-item dropdown-item menu-item"
               @click="toggleTag(tags.QUARANTINE)"
             >
               <span
diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue
index ac4a0c47..4ea54ee3 100644
--- a/src/components/navigation/navigation_entry.vue
+++ b/src/components/navigation/navigation_entry.vue
@@ -62,59 +62,53 @@
 <script src="./navigation_entry.js"></script>
 
 <style lang="scss">
-@import "../../variables";
+.NavigationEntry.menu-item {
+  --__line-height: 2.5em;
+  --__horizontal-gap: 0.5em;
+  --__vertical-gap: 0.4em;
 
-.NavigationEntry {
+  padding: 0;
   display: flex;
-  box-sizing: border-box;
   align-items: baseline;
-  height: 3.5em;
-  line-height: 3.5em;
-  padding: 0;
-  width: 100%;
-  color: $fallback--link;
-  color: var(--link, $fallback--link);
 
   &[aria-expanded] {
-    padding-right: 1em;
-  }
-
-  .timelines-chevron {
-    margin-right: 0;
+    padding-right: var(--__horizontal-gap);
   }
 
   .main-link {
-    background: none;
-    border: none;
-    outline: none;
-    display: inline;
-    text-align: initial;
-    font-size: 100%;
-    font-family: inherit;
-    line-height: unset;
-    cursor: pointer;
-    box-sizing: content-box;
-    color: var(--text);
+    line-height: var(--__line-height);
+    box-sizing: border-box;
     flex: 1;
-    padding: 0 1em;
+    padding: var(--__vertical-gap) var(--__horizontal-gap);
   }
 
   .menu-icon {
-    color: var(--icon);
-    margin-right: 0.8em;
+    line-height: var(--__line-height);
+    padding: 0;
+    width: var(--__line-height);
+    margin-right: var(--__horizontal-gap);
+  }
+
+  .timelines-chevron {
+    line-height: var(--__line-height);
+    padding: 0;
+    width: var(--__line-height);
+    margin-right: 0;
   }
 
   .extra-button {
-    width: 3em;
+    line-height: var(--__line-height);
+    padding: 0;
+    width: var(--__line-height);
     text-align: center;
 
     &:last-child {
-      margin-right: -0.8em;
+      margin-right: calc(-1 * var(--__horizontal-gap));
     }
   }
 
   .badge {
-     margin: 0 0.8em;
+    margin: 0 var(--__horizontal-gap);
   }
 }
 </style>
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 7aec4404..00d9c3cd 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -94,26 +94,12 @@
   }
 
   .dropdown-item {
-    line-height: 21px;
-    overflow: hidden;
-    display: block;
-    padding: 0.5em 0.75em;
-    clear: both;
-    font-weight: 400;
-    text-align: inherit;
-    white-space: nowrap;
-    border: none;
-    border-radius: 0;
-    background-color: transparent;
-    box-shadow: none;
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
+    border-bottom: none;
 
     &-icon {
       svg {
-        width: 22px;
-        margin-right: 0.75rem;
+        width: var(--__line-height);
+        margin-right: var(--__horizontal-gap);
       }
     }
 
@@ -127,15 +113,15 @@
     .menu-checkbox {
       display: inline-block;
       vertical-align: middle;
-      min-width: 22px;
-      max-width: 22px;
-      min-height: 22px;
-      max-height: 22px;
-      line-height: 22px;
+      min-width: calc(var(--__line-height) + 1px);
+      max-width: calc(var(--__line-height) + 1px);
+      min-height: calc(var(--__line-height) + 1px);
+      max-height: calc(var(--__line-height) + 1px);
+      line-height: var(--__line-height);
       text-align: center;
       border-radius: 0;
       box-shadow: var(--shadow);
-      margin-right: 0.75em;
+      margin-right: var(--__horizontal-gap);
 
       &.menu-checkbox-checked::after {
         font-size: 1.25em;
diff --git a/src/components/user_list_menu/user_list_menu.vue b/src/components/user_list_menu/user_list_menu.vue
index b6bf8b42..39ee2451 100644
--- a/src/components/user_list_menu/user_list_menu.vue
+++ b/src/components/user_list_menu/user_list_menu.vue
@@ -22,7 +22,7 @@
         </div>
       </template>
       <template #trigger>
-        <button class="btn button-default dropdown-item -has-submenu">
+        <button class="menu-item dropdown-item -has-submenu">
           {{ $t('lists.manage_lists') }}
           <FAIcon
             class="chevron-icon"
-- 
cgit v1.2.3-70-g09d2