fix: icon offset and color

cypress/e2e/list/list.spec.ts

@@ -52,7 +52,7 @@ describe('Lists', () => {
 		cy.get('.list-title h1')
 			.should('contain', 'First List')
 
-		cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .dropdown-trigger')
+		cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .menu-list-dropdown-trigger')
 			.click()
 		cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .dropdown-content')
 			.contains('Edit')
@@ -80,7 +80,7 @@ describe('Lists', () => {
 	it('Should remove a list', () => {
 		cy.visit(`/lists/${lists[0].id}`)
 
-		cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .dropdown-trigger')
+		cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .menu-list-dropdown-trigger')
 			.click()
 		cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .dropdown-content')
 			.contains('Delete')

src/components/home/navigation.vue

@@ -7,7 +7,7 @@
 			<ul class="menu-list">
 				<li>
 					<router-link :to="{ name: 'home'}" v-shortcut="'g o'">
-						<span class="icon">
+						<span class="menu-item-icon icon">
 							<icon icon="calendar"/>
 						</span>
 						{{ $t('navigation.overview') }}
@@ -15,7 +15,7 @@
 				</li>
 				<li>
 					<router-link :to="{ name: 'tasks.range'}" v-shortcut="'g u'">
-						<span class="icon">
+						<span class="menu-item-icon icon">
 							<icon :icon="['far', 'calendar-alt']"/>
 						</span>
 						{{ $t('navigation.upcoming') }}
@@ -23,7 +23,7 @@
 				</li>
 				<li>
 					<router-link :to="{ name: 'namespaces.index'}" v-shortcut="'g n'">
-						<span class="icon">
+						<span class="menu-item-icon icon">
 							<icon icon="layer-group"/>
 						</span>
 						{{ $t('namespace.title') }}
@@ -31,7 +31,7 @@
 				</li>
 				<li>
 					<router-link :to="{ name: 'labels.index'}" v-shortcut="'g a'">
-						<span class="icon">
+						<span class="menu-item-icon icon">
 							<icon icon="tags"/>
 						</span>
 						{{ $t('label.title') }}
@@ -39,7 +39,7 @@
 				</li>
 				<li>
 					<router-link :to="{ name: 'teams.index'}" v-shortcut="'g m'">
-						<span class="icon">
+						<span class="menu-item-icon icon">
 							<icon icon="users"/>
 						</span>
 						{{ $t('team.title') }}
@@ -63,7 +63,7 @@
 						/>
 						<span class="name">{{ namespaceTitles[nk] }}</span>
 						<div
-							class="icon is-small toggle-lists-icon pl-2"
+							class="icon menu-item-icon is-small toggle-lists-icon pl-2"
 							:class="{'active': typeof listsVisible[n.id] !== 'undefined' ? listsVisible[n.id] : true}"
 						>
 							<icon icon="chevron-down"/>
@@ -111,7 +111,7 @@
 									class="list-menu-link"
 									:class="{'router-link-exact-active': currentList.id === l.id}"
 								>
-									<span class="icon handle">
+									<span class="icon menu-item-icon handle">
 										<icon icon="grip-lines"/>
 									</span>
 									<ColorBubble
@@ -128,7 +128,13 @@
 								>
 									<icon :icon="l.isFavorite ? 'star' : ['far', 'star']"/>
 								</BaseButton>
-								<list-settings-dropdown class="menu-list-dropdown" :list="l" v-if="l.id > 0" />
+								<list-settings-dropdown class="menu-list-dropdown" :list="l" v-if="l.id > 0">
+									<template #trigger="{toggleOpen}">
+										<BaseButton class="menu-list-dropdown-trigger" @click="toggleOpen">
+											<icon icon="ellipsis-h" class="icon"/>
+										</BaseButton>
+									</template>
+								</list-settings-dropdown>
 								<span class="list-setting-spacer" v-else></span>
 							</li>
 						</template>
@@ -354,6 +360,15 @@ $vikunja-nav-selected-width: 0.4rem;
 			}
 		}
 
+		.menu-item-icon {
+			color: var(--grey-400);
+		}
+
+		.menu-list-dropdown-trigger {
+			display: flex;
+			padding: 0.5rem;
+		}
+
 		.flip-list-move {
 			transition: transform $transition-duration;
 		}
@@ -398,25 +413,21 @@ $vikunja-nav-selected-width: 0.4rem;
 				padding-right: 0.5rem;
 			}
 
-			&.router-link-exact-active .icon {
+			&.router-link-exact-active .icon:not(.handle) {
 				color: var(--primary);
 			}
 
-			.icon.handle {
+			.handle {
 				opacity: 0;
 				transition: opacity $transition;
 				margin-right: .25rem;
 				cursor: grab;
 			}
-			&:hover .icon.handle {
+			&:hover .handle {
 				opacity: 1;
 			}
 		}
 	}
-
-	.icon {
-		color: var(--grey-400) !important;
-	}
 }
 
 .top-menu {

src/components/list/list-settings-dropdown.vue

@@ -1,5 +1,13 @@
 <template>
 	<dropdown>
+		<template #trigger="triggerProps">
+			<slot name="trigger" v-bind="triggerProps">
+				<BaseButton class="dropdown-trigger" @click="triggerProps.toggleOpen">
+					<icon icon="ellipsis-h" class="icon"/>
+				</BaseButton>
+			</slot>
+		</template>
+
 		<template v-if="isSavedFilter(list)">
 			<dropdown-item
 				:to="{ name: 'filter.settings.edit', params: { listId: list.id } }"
@@ -78,6 +86,7 @@
 <script setup lang="ts">
 import {ref, computed, watchEffect, type PropType} from 'vue'
 
+import BaseButton from '@/components/base/BaseButton.vue'
 import Dropdown from '@/components/misc/dropdown.vue'
 import DropdownItem from '@/components/misc/dropdown-item.vue'
 import Subscription from '@/components/misc/subscription.vue'
@@ -115,4 +124,4 @@ function setSubscriptionInStore(sub: ISubscription) {
 	listStore.setList(updatedList)
 	namespaceStore.setListInNamespaceById(updatedList)
 }
-</script>
+</script>

src/components/misc/dropdown.vue

@@ -59,10 +59,6 @@ onClickOutside(dropdown, (e: Event) => {
 	vertical-align: top;
 }
 
-.dropdown-trigger {
-	padding: .5rem;
-}
-
 .dropdown-menu {
 	min-width: 12rem;
 	padding-top: 4px;

src/components/namespace/namespace-settings-dropdown.vue

@@ -1,5 +1,13 @@
 <template>
 	<dropdown>
+		<template #trigger="triggerProps">
+			<slot name="trigger" v-bind="triggerProps">
+				<BaseButton class="dropdown-trigger" @click="triggerProps.toggleOpen">
+					<icon icon="ellipsis-h" class="icon"/>
+				</BaseButton>
+			</slot>
+		</template>
+
 		<template v-if="namespace.isArchived">
 			<dropdown-item
 				:to="{ name: 'namespace.settings.archive', params: { id: namespace.id } }"
@@ -56,6 +64,7 @@
 <script setup lang="ts">
 import {ref, onMounted, type PropType} from 'vue'
 
+import BaseButton from '@/components/base/BaseButton.vue'
 import Dropdown from '@/components/misc/dropdown.vue'
 import DropdownItem from '@/components/misc/dropdown-item.vue'
 import Subscription from '@/components/misc/subscription.vue'
@@ -85,3 +94,9 @@ function setSubscriptionInStore(sub: ISubscription) {
 	})
 }
 </script>
+
+<style scoped lang="scss">
+.dropdown-trigger {
+	padding: 0.5rem;
+}
+</style>

src/views/list/ListKanban.vue

@@ -750,7 +750,6 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 	}
 
 	:deep(.dropdown-trigger) {
-		cursor: pointer;
 		padding: .5rem;
 	}