From a15a00ab6bb7cf6933000f0ffced149339f0382e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakob=20R=C3=B6hrl?= <jakob.roehrl@web.de>
Date: Tue, 28 Jan 2020 11:58:03 +0100
Subject: [PATCH 1/4] new color picker
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Jakob Röhrl <jakob.roehrl@web.de>
---
 .../navigation/AppNavigationBoard.vue         | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/navigation/AppNavigationBoard.vue b/src/components/navigation/AppNavigationBoard.vue
index b15149e61..69b091f55 100644
--- a/src/components/navigation/AppNavigationBoard.vue
+++ b/src/components/navigation/AppNavigationBoard.vue
@@ -69,7 +69,12 @@
 					class="icon-close"
 					@click.stop.prevent="cancelEdit">
 			</form>
-			<ColorPicker v-model="editColor" />
+			<!-- <ColorPicker v-model="editColor" /> -->
+			<ColorPicker :value="`#${board.color}`" @input="updateColor">
+				<div :style="{ backgroundColor: getColor }" class="color0">
+					Click to choose color
+				</div>
+			</ColorPicker>
 		</div>
 	</router-link>
 </template>
@@ -77,7 +82,8 @@
 <script>
 import { PopoverMenu } from '@nextcloud/vue/dist/Components/PopoverMenu'
 import ClickOutside from 'vue-click-outside'
-import ColorPicker from '../ColorPicker'
+// import ColorPicker from '../ColorPicker'
+import { ColorPicker } from '@nextcloud/vue/dist/Components/ColorPicker'
 
 export default {
 	name: 'AppNavigationBoard',
@@ -107,6 +113,12 @@ export default {
 		}
 	},
 	computed: {
+		getColor() {
+			if (this.editColor !== '') {
+				return this.editColor
+			}
+			return this.board.color
+		},
 		undoText: function() {
 			// todo translation
 			return 'deleted ' + this.board.title
@@ -232,6 +244,9 @@ export default {
 		hideMenu() {
 			this.menuOpen = false
 		},
+		updateColor(newColor) {
+			this.editColor = newColor
+		},
 		applyEdit(e) {
 			this.editing = false
 			if (this.editTitle || this.editColor) {
@@ -264,4 +279,8 @@ export default {
 	#app-navigation #deck-navigation .editing {
 		height: auto !important;
 	}
+	.color0 {
+		border-radius: 6px;
+		height: 25px;
+	}
 </style>

From 1ef22524ec5ef2430b682e443ec7033a99daa44b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Tue, 28 Jan 2020 13:32:23 +0100
Subject: [PATCH 2/4] Fix color picker positioning
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 .../navigation/AppNavigationBoard.vue         | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/components/navigation/AppNavigationBoard.vue b/src/components/navigation/AppNavigationBoard.vue
index 69b091f55..9b39149e1 100644
--- a/src/components/navigation/AppNavigationBoard.vue
+++ b/src/components/navigation/AppNavigationBoard.vue
@@ -61,6 +61,9 @@
 
 		<!-- edit entry -->
 		<div v-if="editing" class="app-navigation-entry-edit">
+			<ColorPicker class="app-navigation-entry-bullet-wrapper" :value="`#${board.color}`" @input="updateColor">
+				<div :style="{ backgroundColor: getColor }" class="color0 icon-colorpicker app-navigation-entry-bullet"></div>
+			</ColorPicker>
 			<form @submit.prevent.stop="applyEdit">
 				<input v-model="editTitle" type="text" required>
 				<input type="submit" value="" class="icon-confirm">
@@ -69,12 +72,6 @@
 					class="icon-close"
 					@click.stop.prevent="cancelEdit">
 			</form>
-			<!-- <ColorPicker v-model="editColor" /> -->
-			<ColorPicker :value="`#${board.color}`" @input="updateColor">
-				<div :style="{ backgroundColor: getColor }" class="color0">
-					Click to choose color
-				</div>
-			</ColorPicker>
 		</div>
 	</router-link>
 </template>
@@ -279,8 +276,17 @@ export default {
 	#app-navigation #deck-navigation .editing {
 		height: auto !important;
 	}
-	.color0 {
-		border-radius: 6px;
-		height: 25px;
+	.app-navigation-entry-bullet-wrapper {
+		position: absolute;
+		left: 33px;
+		width: 44px !important;
+		margin: 6px;
+		height: 44px;
+		.color0 {
+			width: 30px !important;
+			height: 30px;
+			border-radius: 50%;
+			background-size: 14px;
+		}
 	}
 </style>

From 167448dde1c660af3afba63bea5cc8521077f81c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakob=20R=C3=B6hrl?= <jakob.roehrl@web.de>
Date: Wed, 29 Jan 2020 10:59:12 +0100
Subject: [PATCH 3/4] added new color picker
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Jakob Röhrl <jakob.roehrl@web.de>
---
 src/components/ColorPicker.vue                | 175 ------------------
 src/components/board/TagsTabSidebar.vue       |  31 ++--
 .../navigation/AppNavigationAddBoard.vue      |  23 ++-
 .../navigation/AppNavigationBoard.vue         |   3 +-
 4 files changed, 41 insertions(+), 191 deletions(-)
 delete mode 100644 src/components/ColorPicker.vue

diff --git a/src/components/ColorPicker.vue b/src/components/ColorPicker.vue
deleted file mode 100644
index 32e90f1eb..000000000
--- a/src/components/ColorPicker.vue
+++ /dev/null
@@ -1,175 +0,0 @@
-<!--
-  - @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net>
-  -
-  - @author Julius Härtl <jus@bitgrid.net>
-  -
-  - @license GNU AGPL version 3 or any later version
-  -
-  - This program is free software: you can redistribute it and/or modify
-  - it under the terms of the GNU Affero General Public License as
-  - published by the Free Software Foundation, either version 3 of the
-  - License, or (at your option) any later version.
-  -
-  - This program is distributed in the hope that it will be useful,
-  - but WITHOUT ANY WARRANTY; without even the implied warranty of
-  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-  - GNU Affero General Public License for more details.
-  -
-  - You should have received a copy of the GNU Affero General Public License
-  - along with this program. If not, see <http://www.gnu.org/licenses/>.
-  -
-  -->
-
-<template>
-	<div v-click-outside="hidePicker" class="color-picker">
-		<div class="color-picker-compact">
-			<Compact v-model="color" :palette="defaultColors" @input="updateColor" />
-			<div :style="{'background-color': color.hex}" class="custom-color-button icon-colorpicker" @click.prevent="showFullPicker=!showFullPicker" />
-		</div>
-		<Chrome v-if="showFullPicker"
-			v-model="color"
-			:palette="defaultColors"
-			@input="updateColor" />
-	</div>
-</template>
-
-<script>
-// TODO: import styles manually if possible
-import { Compact, Chrome } from 'vue-color'
-import ClickOutside from 'vue-click-outside'
-
-export default {
-	name: 'ColorPicker',
-	components: {
-		Compact,
-		Chrome,
-	},
-	directives: {
-		ClickOutside,
-	},
-	props: {
-		value: {
-			type: [String, Object],
-			default: null,
-		},
-	},
-	data() {
-		return {
-			color: { hex: this.value },
-			defaultColors: ['#31CC7C', '#317CCC', '#FF7A66', '#F1DB50', '#7C31CC', '#CC317C', '#3A3B3D', '#CACBCD'],
-			showFullPicker: false,
-		}
-	},
-	methods: {
-		updateColor() {
-			this.$emit('input', this.color.hex)
-		},
-		hidePicker() {
-			this.showFullPicker = false
-		},
-	},
-}
-</script>
-
-<style scoped lang="scss">
-	$color-field-width: 27px;
-
-	// #app-navigation .app-navigation-entry-edit form, #app-navigation .app-navigation-entry-edit div
-	// has a to wide scope in the server styles so we need to force some width and display styles
-
-	.color-picker::v-deep {
-		display: block !important;
-		overflow: hidden;
-		border-radius: 3px;
-		margin-bottom: 10px;
-
-		.color-picker-compact {
-			display: flex !important;
-		}
-		.custom-color-button {
-			width: $color-field-width !important;
-			height: $color-field-width;
-			display: inline-flex !important;
-			flex-grow: 1;
-			flex-basis: 44px;
-		}
-
-		.vc-compact {
-			flex-grow: 5;
-			width: initial;
-			max-width: calc(8 * #{$color-field-width});
-			display: block !important;
-			padding: 0;
-			border-radius: 0;
-			box-shadow: none;
-			background-color: transparent;
-		}
-
-		.vc-chrome {
-			width: 100%;
-			border-radius: 0 3px;
-			box-shadow: 0 0 2px var(--color-box-shadow);
-
-			.vc-saturation-pointer, .vc-saturation-circle {
-				width: 12px !important;
-				height: 12px !important;
-			}
-
-		}
-
-		.vc-chrome-fields-wrap, .vc-chrome-body {
-			display: none !important;
-		}
-
-		.vc-compact-colors {
-			display: flex;
-		}
-		.vc-compact-color-item {
-			display: inline-flex;
-			height: $color-field-width;
-			width: 100%;
-			max-width: $color-field-width;
-			padding: 0;
-			margin: 0;
-		}
-		.vc-compact-dot {
-			width: 10px !important;
-			height: 10px;
-			position: unset;
-			border-radius: 50%;
-			opacity: 1;
-			background: #fff;
-			margin: auto;
-		}
-		.vc-chrome-controls {
-			display: flex;
-		}
-		.vc-chrome-active-color {
-			position: relative;
-			width: 30px;
-			height: 30px;
-			border-radius: 15px;
-			overflow: hidden;
-			z-index: 1;
-		}
-		.vc-chrome-color-wrap {
-			position: relative;
-			width: 36px;
-		}
-		.vc-saturation-pointer {
-			cursor: pointer;
-			position: absolute;
-			width: 12px;
-			height: 10px;
-		}
-		.vc-chrome-alpha-wrap {
-			display: none;
-		}
-		.vc-chrome-hue-wrap {
-			position: relative;
-			height: 10px;
-			margin-bottom: 8px;
-			margin-top: 10px;
-		}
-	}
-</style>
diff --git a/src/components/board/TagsTabSidebar.vue b/src/components/board/TagsTabSidebar.vue
index a6c49659d..a4417e5ab 100644
--- a/src/components/board/TagsTabSidebar.vue
+++ b/src/components/board/TagsTabSidebar.vue
@@ -2,7 +2,11 @@
 	<div>
 		<ul class="labels">
 			<li v-for="label in labels" :key="label.id" :class="{editing: (editingLabelId === label.id)}">
+				<!-- Edit Tag -->
 				<template v-if="editingLabelId === label.id">
+					<ColorPicker class="app-navigation-entry-bullet-wrapper" :value="'#' + editingLabel.color" @input="updateColor">
+						<div :style="{ backgroundColor: '#' + editingLabel.color }" class="color0 icon-colorpicker app-navigation-entry-bullet" />
+					</ColorPicker>
 					<form class="label-form" @submit.prevent="updateLabel(label)">
 						<input v-model="editingLabel.title" type="text">
 						<input v-tooltip="{content: missingDataLabel, show: !editLabelObjValidated, trigger: 'manual' }"
@@ -15,7 +19,6 @@
 							class="icon-close"
 							@click="editingLabelId = null">
 					</form>
-					<ColorPicker :value="'#' + editingLabel.color" @input="updateColor" />
 				</template>
 				<template v-else>
 					<div :style="{ backgroundColor: `#${label.color}`, color:textColor(label.color) }" class="label-title">
@@ -33,7 +36,11 @@
 			</li>
 
 			<li v-if="addLabel" class="editing">
+				<!-- New Tag -->
 				<template>
+					<ColorPicker class="app-navigation-entry-bullet-wrapper" :value="'#' + addLabelObj.color" @input="updateColor">
+						<div :style="{ backgroundColor: '#' + addLabelObj.color }" class="color0 icon-colorpicker app-navigation-entry-bullet" />
+					</ColorPicker>
 					<form class="label-form" @submit.prevent="clickAddLabel">
 						<input v-model="addLabelObj.title" type="text">
 						<input v-tooltip="{content: missingDataLabel, show: !addLabelObjValidated, trigger: 'manual' }"
@@ -46,7 +53,6 @@
 							class="icon-close"
 							@click="addLabel=false">
 					</form>
-					<ColorPicker :value="'#' + addLabelObj.color" @input="updateColor" />
 				</template>
 			</li>
 			<button v-if="canManage" @click="clickShowAddLabel()">
@@ -60,7 +66,7 @@
 
 import { mapGetters } from 'vuex'
 import Color from '../../mixins/color'
-import ColorPicker from '../ColorPicker'
+import { ColorPicker } from '@nextcloud/vue/dist/Components/ColorPicker'
 
 export default {
 	name: 'TagsTabSidebar',
@@ -157,15 +163,18 @@ export default {
 			margin-left: -3px;
 		}
 
-		.color-picker {
-			display: flex;
-		}
-
-		.color-picker-button {
-			width: 100px;
-			margin-left: 20px;
-			border-radius: 6px;
+		.app-navigation-entry-bullet-wrapper {
+		position: absolute;
+		width: 44px !important;
+		margin: 6px;
+		height: 44px;
+		.color0 {
+			width: 30px !important;
+			height: 30px;
+			border-radius: 50%;
+			background-size: 14px;
 		}
+	}
 
 		&.editing {
 			display: block;
diff --git a/src/components/navigation/AppNavigationAddBoard.vue b/src/components/navigation/AppNavigationAddBoard.vue
index 42f74f2ea..8184c9f16 100644
--- a/src/components/navigation/AppNavigationAddBoard.vue
+++ b/src/components/navigation/AppNavigationAddBoard.vue
@@ -29,6 +29,9 @@
 
 		<!-- edit entry -->
 		<div v-if="editing" class="app-navigation-entry-edit">
+			<ColorPicker v-model="color" class="app-navigation-entry-bullet-wrapper">
+				<div :style="{ backgroundColor: color }" class="color0 icon-colorpicker app-navigation-entry-bullet" />
+			</ColorPicker>
 			<form @submit.prevent.stop="createBoard">
 				<input :placeholder="t('deck', 'New board title')" type="text" required>
 				<input type="submit" value="" class="icon-confirm">
@@ -37,13 +40,14 @@
 					class="icon-close"
 					@click.stop.prevent="cancelEdit">
 			</form>
-			<ColorPicker v-model="color" />
+
+			<!-- <ColorPicker v-model="color" /> -->
 		</div>
 	</li>
 </template>
 
 <script>
-import ColorPicker from '../ColorPicker'
+import { ColorPicker } from '@nextcloud/vue/dist/Components/ColorPicker'
 export default {
 	name: 'AppNavigationAddBoard',
 	components: { ColorPicker },
@@ -79,9 +83,22 @@ export default {
 	},
 }
 </script>
-<style scoped>
+<style lang="scss" scoped>
 	#app-navigation .app-navigation-entry-edit div {
 		width: auto;
 		display: block;
 	}
+	.app-navigation-entry-bullet-wrapper {
+		position: absolute;
+		left: 33px;
+		width: 44px !important;
+		margin: 6px;
+		height: 44px;
+		.color0 {
+			width: 30px !important;
+			height: 30px;
+			border-radius: 50%;
+			background-size: 14px;
+		}
+	}
 </style>
diff --git a/src/components/navigation/AppNavigationBoard.vue b/src/components/navigation/AppNavigationBoard.vue
index 9b39149e1..4b6b4b8f0 100644
--- a/src/components/navigation/AppNavigationBoard.vue
+++ b/src/components/navigation/AppNavigationBoard.vue
@@ -62,7 +62,7 @@
 		<!-- edit entry -->
 		<div v-if="editing" class="app-navigation-entry-edit">
 			<ColorPicker class="app-navigation-entry-bullet-wrapper" :value="`#${board.color}`" @input="updateColor">
-				<div :style="{ backgroundColor: getColor }" class="color0 icon-colorpicker app-navigation-entry-bullet"></div>
+				<div :style="{ backgroundColor: getColor }" class="color0 icon-colorpicker app-navigation-entry-bullet" />
 			</ColorPicker>
 			<form @submit.prevent.stop="applyEdit">
 				<input v-model="editTitle" type="text" required>
@@ -79,7 +79,6 @@
 <script>
 import { PopoverMenu } from '@nextcloud/vue/dist/Components/PopoverMenu'
 import ClickOutside from 'vue-click-outside'
-// import ColorPicker from '../ColorPicker'
 import { ColorPicker } from '@nextcloud/vue/dist/Components/ColorPicker'
 
 export default {

From 36dadfe25d8694adeb6d2dda3f711e30f70b222b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Wed, 29 Jan 2020 13:18:10 +0100
Subject: [PATCH 4/4] Fix styling in label color picker and pick random default
 colors
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 package-lock.json                       |  6 +--
 package.json                            |  2 +-
 src/components/board/BoardSidebar.vue   | 18 ++++++--
 src/components/board/TagsTabSidebar.vue | 59 ++++++++++++++-----------
 src/components/card/CardSidebar.vue     | 20 +++++++--
 5 files changed, 67 insertions(+), 38 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 84b3b01a2..2a3b643d8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3570,9 +3570,9 @@
 			}
 		},
 		"@nextcloud/vue": {
-			"version": "1.2.8",
-			"resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-1.2.8.tgz",
-			"integrity": "sha512-YEiI+Cu7v+xRXgZ15vK/pcbOEyOcy6PHI90/JMHsVJVVGTYijy5oeG4izQFc0+/oC1idgbShrwN4Cr1W1JfxWA==",
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-1.3.0.tgz",
+			"integrity": "sha512-zqSLvrp+pX012qNBbJBuE/Z9MPv/A6fovsro2nkGCoO0ppBD+W9gmjzLa6D9jRHN24+BmDWB3lNGd9T/G0q3Fw==",
 			"requires": {
 				"@nextcloud/axios": "^1.1.0",
 				"@nextcloud/router": "^1.0.0",
diff --git a/package.json b/package.json
index c52b25323..b953efc15 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
 		"@nextcloud/axios": "^1.3.1",
 		"@nextcloud/l10n": "^1.0.1",
 		"@nextcloud/router": "^1.0.0",
-		"@nextcloud/vue": "^1.2.8",
+		"@nextcloud/vue": "^1.3.0",
 		"fuse.js": "^3.4.6",
 		"nextcloud-server": "^0.15.10",
 		"nextcloud-vue-collections": "^0.7.1",
diff --git a/src/components/board/BoardSidebar.vue b/src/components/board/BoardSidebar.vue
index 6d24aec18..c7a03e1b3 100644
--- a/src/components/board/BoardSidebar.vue
+++ b/src/components/board/BoardSidebar.vue
@@ -25,22 +25,32 @@
 		:actions="[]"
 		:title="board.title"
 		@close="closeSidebar">
-		<AppSidebarTab :order="0" name="Sharing" icon="icon-shared">
+		<AppSidebarTab id="sharing"
+			:order="0"
+			:name="t('deck', 'Sharing')"
+			icon="icon-shared">
 			<SharingTabSidebar :board="board" />
 		</AppSidebarTab>
 
-		<AppSidebarTab :order="1" name="Tags" icon="icon-tag">
+		<AppSidebarTab id="tags"
+			:order="1"
+			:name="t('deck', 'Tags')"
+			icon="icon-tag">
 			<TagsTabSidebar :board="board" />
 		</AppSidebarTab>
 
 		<AppSidebarTab v-if="canEdit"
+			id="deleted"
 			:order="2"
-			name="Deleted items"
+			:name="t('deck', 'Deleted items')"
 			icon="icon-delete">
 			<DeletedTabSidebar :board="board" />
 		</AppSidebarTab>
 
-		<AppSidebarTab :order="3" name="Timeline" icon="icon-activity">
+		<AppSidebarTab id="activity"
+			:order="3"
+			:name="t('deck', 'Timeline')"
+			icon="icon-activity">
 			<TimelineTabSidebar :board="board" />
 		</AppSidebarTab>
 	</AppSidebar>
diff --git a/src/components/board/TagsTabSidebar.vue b/src/components/board/TagsTabSidebar.vue
index a4417e5ab..f4d076118 100644
--- a/src/components/board/TagsTabSidebar.vue
+++ b/src/components/board/TagsTabSidebar.vue
@@ -4,10 +4,10 @@
 			<li v-for="label in labels" :key="label.id" :class="{editing: (editingLabelId === label.id)}">
 				<!-- Edit Tag -->
 				<template v-if="editingLabelId === label.id">
-					<ColorPicker class="app-navigation-entry-bullet-wrapper" :value="'#' + editingLabel.color" @input="updateColor">
-						<div :style="{ backgroundColor: '#' + editingLabel.color }" class="color0 icon-colorpicker app-navigation-entry-bullet" />
-					</ColorPicker>
 					<form class="label-form" @submit.prevent="updateLabel(label)">
+						<ColorPicker class="color-picker-wrapper" :value="'#' + editingLabel.color" @input="updateColor">
+							<div :style="{ backgroundColor: '#' + editingLabel.color }" class="color0 icon-colorpicker" />
+						</ColorPicker>
 						<input v-model="editingLabel.title" type="text">
 						<input v-tooltip="{content: missingDataLabel, show: !editLabelObjValidated, trigger: 'manual' }"
 							:disabled="!editLabelObjValidated"
@@ -38,10 +38,10 @@
 			<li v-if="addLabel" class="editing">
 				<!-- New Tag -->
 				<template>
-					<ColorPicker class="app-navigation-entry-bullet-wrapper" :value="'#' + addLabelObj.color" @input="updateColor">
-						<div :style="{ backgroundColor: '#' + addLabelObj.color }" class="color0 icon-colorpicker app-navigation-entry-bullet" />
-					</ColorPicker>
 					<form class="label-form" @submit.prevent="clickAddLabel">
+						<ColorPicker class="color-picker-wrapper" :value="'#' + addLabelObj.color" @input="updateColor">
+							<div :style="{ backgroundColor: '#' + addLabelObj.color }" class="color0 icon-colorpicker" />
+						</ColorPicker>
 						<input v-model="addLabelObj.title" type="text">
 						<input v-tooltip="{content: missingDataLabel, show: !addLabelObjValidated, trigger: 'manual' }"
 							:disabled="!addLabelObjValidated"
@@ -81,7 +81,7 @@ export default {
 			addLabelObj: null,
 			addLabel: false,
 			missingDataLabel: t('deck', 'title and color value must be provided'),
-			defaultColors: ['#31CC7C', '#317CCC', '#FF7A66', '#F1DB50', '#7C31CC', '#CC317C', '#3A3B3D', '#CACBCD'],
+			defaultColors: ['31CC7C', '17CCC', 'FF7A66', 'F1DB50', '7C31CC', 'CC317C', '3A3B3D', 'CACBCD'],
 		}
 	},
 	computed: {
@@ -133,7 +133,7 @@ export default {
 			this.editingLabelId = null
 		},
 		clickShowAddLabel() {
-			this.addLabelObj = { cardId: null, color: '000000', title: '' }
+			this.addLabelObj = { cardId: null, color: this.defaultColors[Math.floor(Math.random() * this.defaultColors.length)], title: '' }
 			this.addLabel = true
 		},
 		clickAddLabel() {
@@ -145,9 +145,13 @@ export default {
 }
 </script>
 <style scoped lang="scss">
+	$clickable-area: 37px;
+
 	.labels li {
 		display: flex;
 		margin-bottom: 3px;
+		align-items: stretch;
+		height: $clickable-area;
 
 		.label-title {
 			flex-grow: 1;
@@ -158,23 +162,27 @@ export default {
 			}
 		}
 		&:not(.editing) button {
-			width: 44px;
-			margin: 0;
-			margin-left: -3px;
+			width: $clickable-area;
+			margin: 0 0 0 -3px;
 		}
 
-		.app-navigation-entry-bullet-wrapper {
-		position: absolute;
-		width: 44px !important;
-		margin: 6px;
-		height: 44px;
-		.color0 {
-			width: 30px !important;
-			height: 30px;
-			border-radius: 50%;
-			background-size: 14px;
+		.color-picker-wrapper {
+			&, &::v-deep > .trigger {
+				width: $clickable-area;
+				padding: 3px;
+				display: flex;
+				align-items: stretch;
+				position: relative;
+			}
+
+			.color0 {
+				position: absolute;
+				width: calc(#{$clickable-area} - 6px);
+				height: calc(#{$clickable-area} - 6px);
+				background-size: 14px;
+				border-radius: 50%;
+			}
 		}
-	}
 
 		&.editing {
 			display: block;
@@ -187,12 +195,11 @@ export default {
 		}
 		button,
 		input:not([type='text']):last-child {
-			border-bottom-right-radius: var(--border-radius);
-			border-top-right-radius: var(--border-radius);
-			border-bottom-left-radius: 0;
-			border-top-left-radius: 0;
+			min-width: $clickable-area;
+			border-radius: 0 var(--border-radius) var(--border-radius) 0;
 			margin-left: -1px;
 			width: 35px;
+			background-color: var(--color-main-background);
 		}
 	}
 </style>
diff --git a/src/components/card/CardSidebar.vue b/src/components/card/CardSidebar.vue
index de47544f1..6931d6374 100644
--- a/src/components/card/CardSidebar.vue
+++ b/src/components/card/CardSidebar.vue
@@ -26,7 +26,10 @@
 		:subtitle="subtitle"
 		@close="closeSidebar">
 		<template #secondary-actions />
-		<AppSidebarTab :order="0" name="Details" icon="icon-home">
+		<AppSidebarTab id="details"
+			:order="0"
+			:name="t('deck', 'Details')"
+			icon="icon-home">
 			<div class="section-wrapper">
 				<div v-tooltip="t('deck', 'Tags')" class="section-label icon-tag">
 					<span class="hidden-visually">{{ t('deck', 'Tags') }}</span>
@@ -117,15 +120,24 @@
 			<VueEasymde ref="markdownEditor" v-model="copiedCard.description" :configs="mdeConfig" />
 		</AppSidebarTab>
 
-		<AppSidebarTab :order="1" :name="t('deck', 'Attachments')" icon="icon-attach">
+		<AppSidebarTab id="attachments"
+			:order="1"
+			:name="t('deck', 'Attachments')"
+			icon="icon-attach">
 			<CardSidebarTabAttachments :card="currentCard" />
 		</AppSidebarTab>
 
-		<AppSidebarTab :order="2" :name="t('deck', 'Comments')" icon="icon-comment">
+		<AppSidebarTab id="comments"
+			:order="2"
+			:name="t('deck', 'Comments')"
+			icon="icon-comment">
 			<CardSidebarTabComments :card="currentCard" />
 		</AppSidebarTab>
 
-		<AppSidebarTab :order="3" :name="t('deck', 'Timeline')" icon="icon-activity">
+		<AppSidebarTab id="timeline"
+			:order="3"
+			:name="t('deck', 'Timeline')"
+			icon="icon-activity">
 			<CardSidebarTabActivity :card="currentCard" />
 		</AppSidebarTab>
 	</AppSidebar>