From aed4baa8fca53da5d1dd48c05de86dc73d0b0458 Mon Sep 17 00:00:00 2001
From: Luka Trovic <luka@nextcloud.com>
Date: Mon, 15 Jul 2024 19:00:15 +0200
Subject: [PATCH] fix: design review issues

Signed-off-by: Luka Trovic <luka@nextcloud.com>
---
 css/deck.css                                       | 10 ++++++++++
 src/components/ActivityEntry.vue                   |  2 +-
 src/components/Controls.vue                        | 12 ++++++------
 src/components/SessionList.vue                     |  2 +-
 src/components/board/Board.vue                     |  2 +-
 src/components/board/BoardSidebar.vue              |  9 +++++++++
 src/components/board/DeletedTabSidebar.vue         |  6 +++---
 src/components/board/Stack.vue                     | 14 +++++++++++---
 src/components/board/TagsTabSidebar.vue            |  2 +-
 src/components/boards/Boards.vue                   |  4 ++--
 src/components/card/AttachmentList.vue             |  8 ++++----
 src/components/card/CardSidebar.vue                |  2 +-
 src/components/card/CommentItem.vue                |  2 +-
 src/components/card/Description.vue                |  2 +-
 src/components/cards/CardItem.vue                  |  4 ++--
 .../navigation/AppNavigationAddBoard.vue           |  6 +++---
 src/components/navigation/AppNavigationBoard.vue   |  8 ++++----
 src/components/overview/Overview.vue               |  2 +-
 src/components/search/Placeholder.vue              |  2 +-
 src/css/comments.scss                              |  8 ++++----
 20 files changed, 67 insertions(+), 40 deletions(-)

diff --git a/css/deck.css b/css/deck.css
index a80dca883..cac2e3054 100644
--- a/css/deck.css
+++ b/css/deck.css
@@ -7,3 +7,13 @@
 	background-image: url(../img/deck.svg);
 	filter: var(--background-invert-if-dark);
 }
+
+input[type=submit].icon-confirm {
+	border-color: var(--color-border-maxcontrast) !important;
+	border-left: none;
+}
+
+input[type=text]:focus+input[type=submit].icon-confirm,
+input[type=text]:hover+input[type=submit].icon-confirm {
+	border-color: var(--color-main-text) !important;
+}
diff --git a/src/components/ActivityEntry.vue b/src/components/ActivityEntry.vue
index 95c0d60de..28371d6e4 100644
--- a/src/components/ActivityEntry.vue
+++ b/src/components/ActivityEntry.vue
@@ -137,7 +137,7 @@ export default {
 			margin-left: 10px;
 		}
 		.activity--message {
-			margin-left: 44px;
+			margin-left: var(--default-clickable-area);
 			color: var(--color-text-light);
 			margin-bottom: 10px;
 		}
diff --git a/src/components/Controls.vue b/src/components/Controls.vue
index ec130248a..dd9b1d2d9 100644
--- a/src/components/Controls.vue
+++ b/src/components/Controls.vue
@@ -493,8 +493,8 @@ export default {
 	.controls {
 		display: flex;
 		margin: 5px;
-		height: 44px;
-		padding-left: 44px;
+		height: var(--default-clickable-area);
+		padding-left: var(--default-clickable-area);
 
 		.board-title {
 			display: flex;
@@ -524,8 +524,8 @@ export default {
 
 	#app-navigation-toggle-custom {
 		position: static;
-		width: 44px;
-		height: 44px;
+		width: var(--default-clickable-area);
+		height: var(--default-clickable-area);
 		cursor: pointer;
 		opacity: 1;
 		display: inline-block !important;
@@ -584,8 +584,8 @@ export default {
 	.filter-button {
 		padding: 0;
 		border-radius: 50%;
-		width: 44px;
-		height: 44px;
+		width: var(--default-clickable-area);
+		height: var(--default-clickable-area);
 
 		&[data-popper-shown] {
 			background-color: var(--color-background-hover);
diff --git a/src/components/SessionList.vue b/src/components/SessionList.vue
index 202325813..706b3c93a 100644
--- a/src/components/SessionList.vue
+++ b/src/components/SessionList.vue
@@ -72,7 +72,7 @@ export default {
 <style scoped lang="scss">
 
 .avatar-list {
-	min-height: 44px;
+	min-height: var(--default-clickable-area);
 	align-items: center;
 	padding-right: 0.5em;
 	border: none;
diff --git a/src/components/board/Board.vue b/src/components/board/Board.vue
index 6ba3b5015..0e83fd627 100644
--- a/src/components/board/Board.vue
+++ b/src/components/board/Board.vue
@@ -277,7 +277,7 @@ export default {
 	.board {
 		padding-left: $board-spacing;
 		position: relative;
-		max-height: calc(100% - 44px);
+		max-height: calc(100% - var(--default-clickable-area));
 		overflow: hidden;
 		overflow-x: auto;
 		flex-grow: 1;
diff --git a/src/components/board/BoardSidebar.vue b/src/components/board/BoardSidebar.vue
index 6955d2dda..75187eec5 100644
--- a/src/components/board/BoardSidebar.vue
+++ b/src/components/board/BoardSidebar.vue
@@ -117,3 +117,12 @@ export default {
 	},
 }
 </script>
+
+<style scoped lang="scss">
+:deep {
+	.app-sidebar-tabs__tab-caption,
+	.app-sidebar-tabs__nav .checkbox-content__text {
+		white-space: normal !important;
+	}
+}
+</style>
diff --git a/src/components/board/DeletedTabSidebar.vue b/src/components/board/DeletedTabSidebar.vue
index 242952aa2..5d13cc62b 100644
--- a/src/components/board/DeletedTabSidebar.vue
+++ b/src/components/board/DeletedTabSidebar.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<h3>{{ t('deck', 'Deleted lists') }}</h3>
+		<h5>{{ t('deck', 'Deleted lists') }}</h5>
 		<ul>
 			<li v-for="deletedStack in deletedStacks" :key="deletedStack.id">
 				<span class="icon icon-deck" />
@@ -14,7 +14,7 @@
 			</li>
 		</ul>
 
-		<h3>{{ t('deck', 'Deleted cards') }}</h3>
+		<h5>{{ t('deck', 'Deleted cards') }}</h5>
 		<ul>
 			<li v-for="deletedCard in deletedCards" :key="deletedCard.id">
 				<div class="icon icon-deck" />
@@ -98,7 +98,7 @@ export default {
 		}
 
 		* {
-			flex-basis: 44px;
+			flex-basis: var(--default-clickable-area);
 		}
 
 		.title {
diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index 60ddffa82..244323fa3 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -287,7 +287,7 @@ export default {
 		},
 		startEditing(stack) {
 			if (this.dragging) {
-			  return
+				return
 			}
 
 			this.copiedStack = Object.assign({}, stack)
@@ -351,7 +351,7 @@ export default {
 		padding-left: $card-spacing;
 		padding-right: $card-spacing;
 		cursor: grab;
-		min-height: 44px;
+		min-height: var(--default-clickable-area);
 
 		// Smooth fade out of the cards at the top
 		&:before {
@@ -403,6 +403,7 @@ export default {
 			border-radius: 3px;
 			margin: 6px;
 			padding: 4px 4px;
+			font-size: 120%;
 
 			&:focus-visible {
 				outline: 2px solid var(--color-border-dark);
@@ -413,10 +414,17 @@ export default {
 		form {
 			margin: 2px 0;
 		}
+
+		:deep {
+			.action-item,
+			.v-popper--theme-dropdown {
+				display: flex;
+			}
+		}
 	}
 
 	.stack__card-add {
-		height: 44px;
+		height: var(--default-clickable-area);
 		flex-shrink: 0;
 		z-index: 100;
 		display: flex;
diff --git a/src/components/board/TagsTabSidebar.vue b/src/components/board/TagsTabSidebar.vue
index 2b984ab1f..aa9fa3472 100644
--- a/src/components/board/TagsTabSidebar.vue
+++ b/src/components/board/TagsTabSidebar.vue
@@ -169,7 +169,7 @@ export default {
 }
 </script>
 <style scoped lang="scss">
-	$clickable-area: 44px;
+	$clickable-area: var(--default-clickable-area);
 
 	.labels li {
 		display: flex;
diff --git a/src/components/boards/Boards.vue b/src/components/boards/Boards.vue
index 512052e91..e75d4fcbd 100644
--- a/src/components/boards/Boards.vue
+++ b/src/components/boards/Boards.vue
@@ -79,7 +79,7 @@ export default {
 
 <style lang="scss">
 	.board-list {
-		margin-top: -44px;
+		margin-top: - var(--default-clickable-area); //@TODO
 
 		.board-list-row {
 			align-items: center;
@@ -94,7 +94,7 @@ export default {
 
 		.board-list-header-row {
 			color: var(--color-text-lighter);
-			height: 44px;
+			height: var(--default-clickable-area);
 		}
 
 		.board-list-bullet-cell,
diff --git a/src/components/card/AttachmentList.vue b/src/components/card/AttachmentList.vue
index 3a383b793..bd2f4963c 100644
--- a/src/components/card/AttachmentList.vue
+++ b/src/components/card/AttachmentList.vue
@@ -280,10 +280,10 @@ export default {
 		gap: calc(var(--default-grid-baseline) * 3);
 
 		.icon-upload, .icon-folder {
-			padding-left: 44px;
+			padding-left: var(--default-clickable-area);
 			background-position: 16px center;
 			flex-grow: 1;
-			height: 44px;
+			height: var(--default-clickable-area);
 			margin-bottom: 12px;
 			text-align: left;
 		}
@@ -318,7 +318,7 @@ export default {
 		li.attachment {
 			display: flex;
 			padding: 3px;
-			min-height: 44px;
+			min-height: var(--default-clickable-area);
 
 			&.deleted {
 				opacity: .5;
@@ -366,7 +366,7 @@ export default {
 				}
 			}
 			button.icon-history {
-				width: 44px;
+				width: var(--default-clickable-area);
 			}
 			progress {
 				margin-top: 3px;
diff --git a/src/components/card/CardSidebar.vue b/src/components/card/CardSidebar.vue
index 452c9128c..d2b24a5cd 100644
--- a/src/components/card/CardSidebar.vue
+++ b/src/components/card/CardSidebar.vue
@@ -229,7 +229,7 @@ section.app-sidebar__tab--active {
 	right: 0;
 	max-width: calc(100% - #{$modal-padding * 2});
 	padding: 0 14px;
-	height: 100%;
+	height: 97%;
 	overflow: initial;
 	user-select: text;
 	-webkit-user-select: text;
diff --git a/src/components/card/CommentItem.vue b/src/components/card/CommentItem.vue
index 335f98a96..a5eb73fb7 100644
--- a/src/components/card/CommentItem.vue
+++ b/src/components/card/CommentItem.vue
@@ -209,7 +209,7 @@ export default {
 	@import '../../css/comments';
 
 	.reply {
-		margin: 0 0 0 44px;
+		margin: 0 0 0 var(--default-clickable-area);
 
 		&.reply--preview {
 			margin: 4px 0;
diff --git a/src/components/card/Description.vue b/src/components/card/Description.vue
index 98b4b5d82..0e3cb0949 100644
--- a/src/components/card/Description.vue
+++ b/src/components/card/Description.vue
@@ -387,7 +387,7 @@ h5 {
 }
 
 .description__text :deep(.ProseMirror) {
-	padding-bottom: 44px;
+	padding-bottom: var(--default-clickable-area);
 }
 
 </style>
diff --git a/src/components/cards/CardItem.vue b/src/components/cards/CardItem.vue
index 11b5754da..277ff5ce7 100644
--- a/src/components/cards/CardItem.vue
+++ b/src/components/cards/CardItem.vue
@@ -363,7 +363,7 @@ export default {
 				}
 			}
 			.card-menu {
-				height: 44px;
+				height: var(--default-clickable-area);
 				align-self: end;
 			}
 		}
@@ -416,7 +416,7 @@ export default {
 	}
 
 	.compact {
-		min-height: 44px;
+		min-height: var(--default-clickable-area);
 
 		.duedate {
 			margin-right: 0;
diff --git a/src/components/navigation/AppNavigationAddBoard.vue b/src/components/navigation/AppNavigationAddBoard.vue
index 564b0ead6..a42029e19 100644
--- a/src/components/navigation/AppNavigationAddBoard.vue
+++ b/src/components/navigation/AppNavigationAddBoard.vue
@@ -90,7 +90,7 @@ export default {
 	.board-create {
 		order: 1;
 		display: flex;
-		height: 44px;
+		height: var(--default-clickable-area);
 
 		form {
 			display: flex;
@@ -103,8 +103,8 @@ export default {
 	}
 
 	.app-navigation-entry-bullet-wrapper {
-		width: 44px;
-		height: 44px;
+		width: var(--default-clickable-area);
+		height: var(--default-clickable-area);
 		.color0 {
 			width: 30px !important;
 			margin: 5px;
diff --git a/src/components/navigation/AppNavigationBoard.vue b/src/components/navigation/AppNavigationBoard.vue
index 584dfb85d..4e137dcef 100644
--- a/src/components/navigation/AppNavigationBoard.vue
+++ b/src/components/navigation/AppNavigationBoard.vue
@@ -336,10 +336,10 @@ export default {
 
 <style lang="scss" scoped>
 	.board-edit {
-		margin-left: 44px;
+		margin-left: var(--default-clickable-area);
 		order: 1;
 		display: flex;
-		height: 44px;
+		height: var(--default-clickable-area);
 
 		form {
 			display: flex;
@@ -352,8 +352,8 @@ export default {
 	}
 
 	.app-navigation-entry-bullet-wrapper {
-		width: 44px;
-		height: 44px;
+		width: var(--default-clickable-area);
+		height: var(--default-clickable-area);
 		.color0 {
 			width: 30px !important;
 			margin: 5px;
diff --git a/src/components/overview/Overview.vue b/src/components/overview/Overview.vue
index e5d84e587..b37f291f4 100644
--- a/src/components/overview/Overview.vue
+++ b/src/components/overview/Overview.vue
@@ -175,7 +175,7 @@ export default {
 
 .overview {
 	position: relative;
-	height: calc(100% - 44px);
+	height: calc(100% - var(--default-clickable-area));
 	overflow-x: scroll;
 	display: flex;
 	align-items: stretch;
diff --git a/src/components/search/Placeholder.vue b/src/components/search/Placeholder.vue
index 03ba8d924..56efef209 100644
--- a/src/components/search/Placeholder.vue
+++ b/src/components/search/Placeholder.vue
@@ -55,7 +55,7 @@ export default {
 
 <style lang="scss" scoped>
 @import '../../css/variables';
-$clickable-area: 44px;
+$clickable-area: var(--default-clickable-area);
 
 .card--placeholder {
 	width: $stack-width;
diff --git a/src/css/comments.scss b/src/css/comments.scss
index 3c1ef3aeb..7d3e3de0b 100644
--- a/src/css/comments.scss
+++ b/src/css/comments.scss
@@ -5,7 +5,7 @@
 
 	.editor__content:deep {
 		flex-grow: 1;
-		margin-left: 44px;
+		margin-left: var(--default-clickable-area);
 
 		.ProseMirror {
 			width: 100%;
@@ -13,8 +13,8 @@
 	}
 
 	input[type='submit'] {
-		width: 44px;
-		height: 44px;
+		width: var(--default-clickable-area);
+		height: var(--default-clickable-area);
 		margin: 0;
 		padding: 13px;
 		background-color: transparent;
@@ -47,6 +47,6 @@
 }
 
 .comment--content {
-	margin-left: 44px;
+	margin-left: var(--default-clickable-area);
 	word-break: break-word;
 }