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: [PATCH 01/13] better v1 detection, better menu-item consistency

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

diff --git a/src/components/menu_item.style.js b/src/components/menu_item.style.js
index 3c70bd9f4..3812f894a 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 1189f76d2..ac4a0c477 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 dd5259200..11c90b034 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 52cf06edb..74d745f05 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 f04fed425..321bc3e5a 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 b3c4abf1e..5fd16f194 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] || {}

From d134b691cc92d22f27efc432d77e1971cc840d42 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 27 Feb 2024 17:04:56 +0200
Subject: [PATCH 02/13] remove button-unstyled from video attachments

---
 src/components/attachment/attachment.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 39b1a4094..9abc26271 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -175,7 +175,6 @@
         :is="videoTag"
         v-if="type === 'video' && !hidden"
         class="video-container"
-        :class="{ 'button-unstyled': 'isModal' }"
         :href="attachment.url"
         @click.stop.prevent="openModal"
       >

From eab3bfaf0d1e99879f53ead8319892b559ab8ca6 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 27 Feb 2024 21:43:25 +0200
Subject: [PATCH 03/13] remove fallbacks from shadow control

---
 src/components/shadow_control/shadow_control.vue | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index 10e6476fd..c3b956cda 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -219,8 +219,6 @@
 <script src="./shadow_control.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .shadow-control {
   display: flex;
   flex-wrap: wrap;
@@ -237,8 +235,6 @@
     display: flex;
     flex-wrap: wrap;
 
-    $side: 15em;
-
     input[type="number"] {
       width: 5em;
       min-width: 2em;
@@ -261,7 +257,7 @@
     .x-shift-control .wrap,
     input[type="range"] {
       margin: 0;
-      width: $side;
+      width: 15em;
       height: 2em;
     }
 
@@ -271,7 +267,7 @@
 
       .wrap {
         width: 2em;
-        height: $side;
+        height: 15em;
       }
 
       input[type="range"] {
@@ -298,8 +294,6 @@
       .preview-block {
         width: 33%;
         height: 33%;
-        background-color: $fallback--bg;
-        background-color: var(--bg, $fallback--bg);
         border-radius: var(--roundness);
       }
     }

From e2af986323d82ebd15d7a303ed40cc033d933479 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 27 Feb 2024 22:02:25 +0200
Subject: [PATCH 04/13] fix global notices

---
 src/components/alert.style.js                 |  3 +-
 .../global_notice_list/global_notice_list.vue | 42 +------------------
 src/components/root.style.js                  |  1 +
 src/components/underlay.style.js              |  3 +-
 src/services/theme_data/css_utils.js          |  2 +-
 5 files changed, 6 insertions(+), 45 deletions(-)

diff --git a/src/components/alert.style.js b/src/components/alert.style.js
index bb97bd64b..19bd4bbbf 100644
--- a/src/components/alert.style.js
+++ b/src/components/alert.style.js
@@ -18,7 +18,8 @@ export default {
     {
       directives: {
         background: '--text',
-        opacity: 0.5
+        opacity: 0.5,
+        blur: '9px'
       }
     },
     {
diff --git a/src/components/global_notice_list/global_notice_list.vue b/src/components/global_notice_list/global_notice_list.vue
index 9e9ec7aaf..71e1bf302 100644
--- a/src/components/global_notice_list/global_notice_list.vue
+++ b/src/components/global_notice_list/global_notice_list.vue
@@ -4,7 +4,7 @@
       v-for="(notice, index) in notices"
       :key="index"
       class="alert global-notice"
-      :class="{ ['global-' + notice.level]: true }"
+      :class="{ [notice.level]: true }"
     >
       <div class="notice-message">
         {{ $t(notice.messageKey, notice.messageArgs) }}
@@ -52,48 +52,8 @@
     }
   }
 
-  .global-error {
-    background-color: var(--alertPopupError, $fallback--cRed);
-    color: var(--alertPopupErrorText, $fallback--text);
-
-    .svg-inline--fa {
-      color: var(--alertPopupErrorText, $fallback--text);
-    }
-  }
-
-  .global-warning {
-    background-color: var(--alertPopupWarning, $fallback--cOrange);
-    color: var(--alertPopupWarningText, $fallback--text);
-
-    .svg-inline--fa {
-      color: var(--alertPopupWarningText, $fallback--text);
-    }
-  }
-
-  .global-success {
-    background-color: var(--alertPopupSuccess, $fallback--cGreen);
-    color: var(--alertPopupSuccessText, $fallback--text);
-
-    .svg-inline--fa {
-      color: var(--alertPopupSuccessText, $fallback--text);
-    }
-  }
-
-  .global-info {
-    background-color: var(--alertPopupNeutral, $fallback--fg);
-    color: var(--alertPopupNeutralText, $fallback--text);
-
-    .svg-inline--fa {
-      color: var(--alertPopupNeutralText, $fallback--text);
-    }
-  }
-
   .close-notice {
     padding-right: 0.2em;
-
-    .svg-inline--fa:hover {
-      opacity: 0.6;
-    }
   }
 }
 </style>
diff --git a/src/components/root.style.js b/src/components/root.style.js
index 97289236a..e4d330516 100644
--- a/src/components/root.style.js
+++ b/src/components/root.style.js
@@ -9,6 +9,7 @@ export default {
     'Scrollbar',
     'ScrollbarElement',
     'MobileDrawer',
+    'Alert',
     'Button' // mobile post button
   ],
   defaultRules: [
diff --git a/src/components/underlay.style.js b/src/components/underlay.style.js
index 3ed871cca..3e0e1bf1d 100644
--- a/src/components/underlay.style.js
+++ b/src/components/underlay.style.js
@@ -6,8 +6,7 @@ export default {
   // we are searching for underlay specifically or for whatever is laid on top of it.
   outOfTreeSelector: '.underlay',
   validInnerComponents: [
-    'Panel',
-    'Alert'
+    'Panel'
   ],
   defaultRules: [
     {
diff --git a/src/services/theme_data/css_utils.js b/src/services/theme_data/css_utils.js
index 321bc3e5a..6f1fd0c2f 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.component === 'Text' && rule.directives.textNoCssColor !== 'yes') ? '  color: var(--text);' : '',
+    (rule.component === 'Text' && rule.state.indexOf('faint') < 0 && rule.directives.textNoCssColor !== 'yes') ? '  color: var(--text);' : '',
     '',
     virtualDirectives,
     footer

From ec2afce97e4fa769ccf1088ae19b95fb94510930 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 27 Feb 2024 22:02:44 +0200
Subject: [PATCH 05/13] improve performance a bit and use better "worst case"
 color

---
 src/services/style_setter/style_setter.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 74d745f05..1e16d3b5e 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -15,7 +15,8 @@ export const applyTheme = async (input) => {
     extraRules = convertTheme2To3(theme)
   }
 
-  const themes3 = init(extraRules, '#FFFFFF')
+  // Assuming that "worst case scenario background" is panel background since it's the most likely one
+  const themes3 = init(extraRules, extraRules[0].directives['--bg'].split('|')[1].trim())
   const head = document.head
   const body = document.body
   body.classList.add('hidden')
@@ -54,7 +55,7 @@ export const applyTheme = async (input) => {
           styleSheet.insertRule(rule, 'index-max')
         })
       })
-    }, 50)
+    }, 200)
   })
 
   return Promise.resolve()

From f4d48e401abd7789968e0b3decd50fc62bd7bc29 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 27 Feb 2024 22:20:41 +0200
Subject: [PATCH 06/13] fix reply link being faint (didn't work before, no
 reason to keep it "faint" imo)

---
 src/components/status/status.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 7c56430f2..2a46c5b9b 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -450,7 +450,7 @@
           >
             <button
               v-if="showOtherRepliesAsButton && replies.length > 1"
-              class="button-unstyled -link faint"
+              class="button-unstyled -link"
               :title="$tc('status.ancestor_follow', replies.length - 1, { numReplies: replies.length - 1 })"
               @click.prevent="dive"
             >

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: [PATCH 07/13] consistent menu-items

---
 src/App.scss                                  | 29 ++++++++++
 .../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 +++----
 .../navigation/navigation_entry.vue           | 58 +++++++++----------
 src/components/popover/popover.vue            | 32 +++-------
 .../user_list_menu/user_list_menu.vue         |  2 +-
 8 files changed, 93 insertions(+), 86 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 61ab44e64..2476791c2 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 1c3c1419c..cca7121cf 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 9baf63f22..3cc58bd1d 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 8c18ec7b5..e016aff1a 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 e1c771603..91d87b697 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 ac4a0c477..4ea54ee3c 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 {
-  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);
+  display: flex;
+  align-items: baseline;
 
   &[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 7aec44046..00d9c3cd8 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 b6bf8b42f..39ee24519 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"

From e2a675e3ae6f29a42ff501d393f0fb1ad0f2d130 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 28 Feb 2024 01:26:22 +0200
Subject: [PATCH 08/13] oops

---
 src/components/emoji_input/emoji_input.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
index 3cc58bd1d..9baf63f22 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) {

From 15d8daa7ec21fd6cbb9be32148d7596471cf7da2 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 28 Feb 2024 12:51:22 +0200
Subject: [PATCH 09/13] somehow i missed this one

---
 src/services/theme_data/theme2_keys.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/services/theme_data/theme2_keys.js b/src/services/theme_data/theme2_keys.js
index 09092e0c4..69089e136 100644
--- a/src/services/theme_data/theme2_keys.js
+++ b/src/services/theme_data/theme2_keys.js
@@ -90,6 +90,7 @@ export default [
 
   // Top bar,
   'topBar',
+  'topBarText',
   'topBarLink',
 
   // Tabs,

From 528e7e44967f97121b7e327f66df94ff4ea7931b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 28 Feb 2024 13:10:42 +0200
Subject: [PATCH 10/13] fix more annoying themes2->3 button states

---
 src/services/theme_data/theme2_to_theme3.js | 24 ++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index 1a847dc96..ba61b3f28 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -346,6 +346,14 @@ export const convertTheme2To3 = (data) => {
       }
       if (key === 'buttonPressed') {
         newRules.push({ ...rule, state: ['toggled'] })
+        newRules.push({ ...rule, state: ['toggled', 'focus'] })
+        newRules.push({ ...rule, state: ['pressed', 'focus'] })
+      }
+      if (key === 'buttonHover') {
+        newRules.push({ ...rule, state: ['toggled', 'hover'] })
+        newRules.push({ ...rule, state: ['pressed', 'hover'] })
+        newRules.push({ ...rule, state: ['toggled', 'focus', 'hover'] })
+        newRules.push({ ...rule, state: ['pressed', 'focus', 'hover'] })
       }
 
       if (rule.component === 'Button') {
@@ -489,7 +497,21 @@ export const convertTheme2To3 = (data) => {
       if (newRule.component === 'Panel') {
         return [newRule, { ...newRule, component: 'MobileDrawer' }]
       } else if (newRule.component === 'Button') {
-        return [newRule, { ...newRule, component: 'Tab' }, { ...newRule, component: 'ScrollbarElement' }]
+        const rules = [
+          newRule,
+          { ...newRule, component: 'Tab' },
+          { ...newRule, component: 'ScrollbarElement' }
+        ]
+        console.log(newRule)
+        if (newRule.state?.indexOf('toggled') >= 0) {
+          rules.push({ ...newRule, state: [...newRule.state, 'focused'] })
+          rules.push({ ...newRule, state: [...newRule.state, 'hover'] })
+          rules.push({ ...newRule, state: [...newRule.state, 'hover', 'focused'] })
+        }
+        if (newRule.state?.indexOf('hover') >= 0) {
+          rules.push({ ...newRule, state: [...newRule.state, 'focused'] })
+        }
+        return rules
       } else if (newRule.component === 'TopBar') {
         return [newRule, { ...newRule, parent: { component: 'MobileDrawer' }, component: 'PanelHeader' }]
       } else {

From 39eee4412fc6af675c019c829216031e66f74d04 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 28 Feb 2024 14:25:22 +0200
Subject: [PATCH 11/13] fix alerts in panels

---
 src/components/settings_modal/settings_modal.vue | 2 +-
 src/panel.scss                                   | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue
index d5931318e..50859c94c 100644
--- a/src/components/settings_modal/settings_modal.vue
+++ b/src/components/settings_modal/settings_modal.vue
@@ -14,7 +14,7 @@
           <div
             v-if="currentSaveStateNotice"
             class="alert"
-            :class="{ transparent: !currentSaveStateNotice.error, error: currentSaveStateNotice.error}"
+            :class="{ success: !currentSaveStateNotice.error, error: currentSaveStateNotice.error}"
             @click.prevent
           >
             {{ currentSaveStateNotice.error ? $t('settings.saving_err') : $t('settings.saving_ok') }}
diff --git a/src/panel.scss b/src/panel.scss
index 8fd772cf5..5df9fee41 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -118,6 +118,10 @@
       padding-bottom: 0;
       align-self: stretch;
     }
+
+    > .alert {
+      line-height: calc(var(--__panel-heading-height-inner) - 2px);
+    }
   }
 }
 

From 8e3637c0596f544d2e32b8f9608fb37226265a4d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 28 Feb 2024 14:57:19 +0200
Subject: [PATCH 12/13] improve scrollbars, add avatar to menu-item since it
 appears in autocomplete, add wallpaper color

---
 src/App.scss                              | 37 +++++++++++++++++------
 src/components/menu_item.style.js         |  3 +-
 src/components/root.style.js              |  4 ++-
 src/components/scrollbar.style.js         |  2 +-
 src/services/style_setter/style_setter.js |  2 ++
 5 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 2476791c2..36415ddc8 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -41,12 +41,31 @@ body {
 // have a cursor/pointer to operate them
 @media (any-pointer: fine) {
   * {
-    scrollbar-color: var(--btn) transparent;
+    scrollbar-color: var(--fg) transparent;
 
     &::-webkit-scrollbar {
       background: transparent;
     }
 
+    &::-webkit-scrollbar-corner {
+      background: transparent;
+    }
+
+    &::-webkit-resizer {
+      /* stylelint-disable-next-line declaration-no-important */
+      background-color: transparent !important;
+      background-image:
+        linear-gradient(
+          135deg,
+          transparent calc(50% - 1px),
+          var(--textFaint) 50%,
+          transparent calc(50% + 1px),
+          transparent calc(75% - 1px),
+          var(--textFaint) 75%,
+          transparent calc(75% + 1px),
+        );
+    }
+
     &::-webkit-scrollbar-button,
     &::-webkit-scrollbar-thumb {
       box-shadow: var(--shadow);
@@ -67,15 +86,15 @@ body {
 
         &:increment {
           background-image:
-            linear-gradient(45deg, var(--text) 50%, transparent 51%),
-            linear-gradient(-45deg, transparent 50%, var(--text) 51%);
+            linear-gradient(45deg, var(--text) 50%, transparent calc(50% + 1px)),
+            linear-gradient(-45deg, transparent 50%, var(--text) calc(50% + 1px));
           background-position: top var(--___bgPadding) left 50%, right 50% bottom var(--___bgPadding);
         }
 
         &:decrement {
           background-image:
-            linear-gradient(45deg, transparent 50%, var(--text) 51%),
-            linear-gradient(-45deg, var(--text) 50%, transparent 51%);
+            linear-gradient(45deg, transparent 50%, var(--text) calc(50% + 1px)),
+            linear-gradient(-45deg, var(--text) 50%, transparent calc(50% + 1px));
           background-position: bottom var(--___bgPadding) right 50%, left 50% top var(--___bgPadding);
         }
       }
@@ -85,15 +104,15 @@ body {
 
         &:increment {
           background-image:
-            linear-gradient(-45deg, transparent 50%, var(--text) 51%),
-            linear-gradient(45deg, transparent 50%, var(--text) 51%);
+            linear-gradient(-45deg, transparent 50%, var(--text) calc(50% + 1px)),
+            linear-gradient(45deg, transparent 50%, var(--text) calc(50% + 1px));
           background-position: right var(--___bgPadding) top 50%, left var(--___bgPadding) top 50%;
         }
 
         &:decrement {
           background-image:
-            linear-gradient(-45deg, var(--text) 50%, transparent 51%),
-            linear-gradient(45deg, var(--text) 50%, transparent 51%);
+            linear-gradient(-45deg, var(--text) 50%, transparent calc(50% + 1px)),
+            linear-gradient(45deg, var(--text) 50%, transparent calc(50% + 1px));
           background-position: left var(--___bgPadding) top 50%, right var(--___bgPadding) top 50%;
         }
       }
diff --git a/src/components/menu_item.style.js b/src/components/menu_item.style.js
index 3812f894a..29376e5ed 100644
--- a/src/components/menu_item.style.js
+++ b/src/components/menu_item.style.js
@@ -7,7 +7,8 @@ export default {
     'Input',
     'Border',
     'ButtonUnstyled',
-    'Badge'
+    'Badge',
+    'Avatar'
   ],
   states: {
     hover: ':hover',
diff --git a/src/components/root.style.js b/src/components/root.style.js
index e4d330516..53777a4bf 100644
--- a/src/components/root.style.js
+++ b/src/components/root.style.js
@@ -16,7 +16,9 @@ export default {
     {
       directives: {
         '--font': 'generic | sans-serif',
-        '--monoFont': 'generic | monospace'
+        '--monoFont': 'generic | monospace',
+        '--bg': 'color | #000000', // just to establish order
+        '--wallpaper': 'color | --bg, -2'
       }
     }
   ]
diff --git a/src/components/scrollbar.style.js b/src/components/scrollbar.style.js
index 76053d6f8..94e6135d7 100644
--- a/src/components/scrollbar.style.js
+++ b/src/components/scrollbar.style.js
@@ -4,7 +4,7 @@ export default {
   defaultRules: [
     {
       directives: {
-        background: '--bg'
+        background: '--wallpaper'
       }
     }
   ]
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 1e16d3b5e..69619a500 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -33,6 +33,8 @@ export const applyTheme = async (input) => {
         parts[0],
         ', ',
         parts[0].replace(/button/, 'thumb'),
+        ', ',
+        parts[0].replace(/scrollbar-button/, 'resizer'),
         ' {',
         parts[1],
         '}'

From cf1345caca2fc905b0f692f6149e0006610614e4 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 28 Feb 2024 15:04:01 +0200
Subject: [PATCH 13/13] more scrollbars work

---
 src/App.scss                         | 16 ++++++++--------
 src/services/theme_data/css_utils.js |  2 +-
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 36415ddc8..8c60a05d9 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -86,15 +86,15 @@ body {
 
         &:increment {
           background-image:
-            linear-gradient(45deg, var(--text) 50%, transparent calc(50% + 1px)),
-            linear-gradient(-45deg, transparent 50%, var(--text) calc(50% + 1px));
+            linear-gradient(45deg, var(--text) 50%, transparent 51%),
+            linear-gradient(-45deg, transparent 50%, var(--text) 51%);
           background-position: top var(--___bgPadding) left 50%, right 50% bottom var(--___bgPadding);
         }
 
         &:decrement {
           background-image:
             linear-gradient(45deg, transparent 50%, var(--text) calc(50% + 1px)),
-            linear-gradient(-45deg, var(--text) 50%, transparent calc(50% + 1px));
+            linear-gradient(-45deg, var(--text) 50%, transparent 51%);
           background-position: bottom var(--___bgPadding) right 50%, left 50% top var(--___bgPadding);
         }
       }
@@ -104,15 +104,15 @@ body {
 
         &:increment {
           background-image:
-            linear-gradient(-45deg, transparent 50%, var(--text) calc(50% + 1px)),
-            linear-gradient(45deg, transparent 50%, var(--text) calc(50% + 1px));
+            linear-gradient(-45deg, transparent 50%, var(--text) 51%),
+            linear-gradient(45deg, transparent 50%, var(--text) 51%);
           background-position: right var(--___bgPadding) top 50%, left var(--___bgPadding) top 50%;
         }
 
         &:decrement {
           background-image:
-            linear-gradient(-45deg, var(--text) 50%, transparent calc(50% + 1px)),
-            linear-gradient(45deg, var(--text) 50%, transparent calc(50% + 1px));
+            linear-gradient(-45deg, var(--text) 50%, transparent 51%),
+            linear-gradient(45deg, var(--text) 50%, transparent 51%);
           background-position: left var(--___bgPadding) top 50%, right var(--___bgPadding) top 50%;
         }
       }
@@ -121,7 +121,7 @@ body {
   }
   // Body should have background to scrollbar otherwise it will use white (body color?)
   html {
-    scrollbar-color: var(--selectedMenu) var(--wallpaper);
+    scrollbar-color: var(--fg) var(--wallpaper);
     background: var(--wallpaper);
   }
 }
diff --git a/src/services/theme_data/css_utils.js b/src/services/theme_data/css_utils.js
index 6f1fd0c2f..a89eac3b8 100644
--- a/src/services/theme_data/css_utils.js
+++ b/src/services/theme_data/css_utils.js
@@ -69,7 +69,7 @@ export const getCssShadowFilter = (input) => {
 export const getCssRules = (rules) => rules.map(rule => {
   let selector = rule.selector
   if (!selector) {
-    selector = 'body'
+    selector = 'html'
   }
   const header = selector + ' {'
   const footer = '}'