From 9bc601c7a92c0ae753823db00cf5ee2eeaa799b3 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          | 13 +++++++++++--
 src/components/board/DeletedTabSidebar.vue     |  6 +++---
 src/components/board/Stack.vue                 | 18 +++++++++++++-----
 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 +++---
 .../navigation/AppNavigationBoard.vue          |  8 ++++----
 src/components/overview/Overview.vue           |  2 +-
 src/components/search/Placeholder.vue          |  2 +-
 src/css/comments.scss                          |  8 ++++----
 src/helpers/mentions.js                        |  1 +
 src/helpers/xml.js                             |  1 +
 22 files changed, 73 insertions(+), 44 deletions(-)

diff --git a/css/deck.css b/css/deck.css
index 55ecfe1fd..ce15eb1f5 100644
--- a/css/deck.css
+++ b/css/deck.css
@@ -11,3 +11,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 83602a7d5..acec83ccb 100644
--- a/src/components/ActivityEntry.vue
+++ b/src/components/ActivityEntry.vue
@@ -120,7 +120,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 b1a89c003..1ccd203a8 100644
--- a/src/components/Controls.vue
+++ b/src/components/Controls.vue
@@ -476,8 +476,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;
@@ -507,8 +507,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;
@@ -567,8 +567,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 d347cd933..d844a7f09 100644
--- a/src/components/SessionList.vue
+++ b/src/components/SessionList.vue
@@ -56,7 +56,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 f391cf819..7d77e6bb1 100644
--- a/src/components/board/Board.vue
+++ b/src/components/board/Board.vue
@@ -250,7 +250,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 25f957610..f22a5c891 100644
--- a/src/components/board/BoardSidebar.vue
+++ b/src/components/board/BoardSidebar.vue
@@ -1,6 +1,6 @@
 <!--
-  - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors
-  - SPDX-License-Identifier: AGPL-3.0-or-later
+	- SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors
+	- SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
 <template>
@@ -100,3 +100,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 2549ebadc..03750a6d1 100644
--- a/src/components/board/DeletedTabSidebar.vue
+++ b/src/components/board/DeletedTabSidebar.vue
@@ -4,7 +4,7 @@
 -->
 <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" />
@@ -18,7 +18,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" />
@@ -102,7 +102,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 e8aa90691..f3a51c39f 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -1,6 +1,6 @@
 <!--
-  - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors
-  - SPDX-License-Identifier: AGPL-3.0-or-later
+	- SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors
+	- SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
 <template>
@@ -261,7 +261,7 @@ export default {
 		},
 		startEditing(stack) {
 			if (this.dragging) {
-			  return
+				return
 			}
 
 			this.copiedStack = Object.assign({}, stack)
@@ -322,7 +322,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 {
@@ -374,6 +374,7 @@ export default {
 			border-radius: 3px;
 			margin: 6px;
 			padding: 4px 4px;
+			font-size: 120%;
 
 			&:focus-visible {
 				outline: 2px solid var(--color-border-dark);
@@ -384,10 +385,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 2c63fd10b..7fe42a8c3 100644
--- a/src/components/board/TagsTabSidebar.vue
+++ b/src/components/board/TagsTabSidebar.vue
@@ -173,7 +173,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 8e5747af7..f27680b6b 100644
--- a/src/components/boards/Boards.vue
+++ b/src/components/boards/Boards.vue
@@ -62,7 +62,7 @@ export default {
 
 <style lang="scss">
 	.board-list {
-		margin-top: -44px;
+		margin-top: - var(--default-clickable-area); //@TODO
 
 		.board-list-row {
 			align-items: center;
@@ -77,7 +77,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 8bd68f409..b604059d1 100644
--- a/src/components/card/AttachmentList.vue
+++ b/src/components/card/AttachmentList.vue
@@ -253,10 +253,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;
 		}
@@ -291,7 +291,7 @@ export default {
 		li.attachment {
 			display: flex;
 			padding: 3px;
-			min-height: 44px;
+			min-height: var(--default-clickable-area);
 
 			&.deleted {
 				opacity: .5;
@@ -339,7 +339,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 a9dc6b8e6..be06e4edb 100644
--- a/src/components/card/CardSidebar.vue
+++ b/src/components/card/CardSidebar.vue
@@ -221,7 +221,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 f77892d03..97cabe28c 100644
--- a/src/components/card/CommentItem.vue
+++ b/src/components/card/CommentItem.vue
@@ -213,7 +213,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 1a658ba92..b905bde34 100644
--- a/src/components/card/Description.vue
+++ b/src/components/card/Description.vue
@@ -367,7 +367,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 de4c68060..f1de67971 100644
--- a/src/components/cards/CardItem.vue
+++ b/src/components/cards/CardItem.vue
@@ -338,7 +338,7 @@ export default {
 				}
 			}
 			.card-menu {
-				height: 44px;
+				height: var(--default-clickable-area);
 				align-self: end;
 			}
 		}
@@ -391,7 +391,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 d9df22270..fb250eb9e 100644
--- a/src/components/navigation/AppNavigationAddBoard.vue
+++ b/src/components/navigation/AppNavigationAddBoard.vue
@@ -73,7 +73,7 @@ export default {
 	.board-create {
 		order: 1;
 		display: flex;
-		height: 44px;
+		height: var(--default-clickable-area);
 
 		form {
 			display: flex;
@@ -86,8 +86,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 9a78cb0aa..088779428 100644
--- a/src/components/navigation/AppNavigationBoard.vue
+++ b/src/components/navigation/AppNavigationBoard.vue
@@ -319,10 +319,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;
@@ -335,8 +335,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 00972cff0..515c753e0 100644
--- a/src/components/overview/Overview.vue
+++ b/src/components/overview/Overview.vue
@@ -158,7 +158,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 71fd2d2ec..0921891fd 100644
--- a/src/components/search/Placeholder.vue
+++ b/src/components/search/Placeholder.vue
@@ -59,7 +59,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 0e4bd3d18..a44c17636 100644
--- a/src/css/comments.scss
+++ b/src/css/comments.scss
@@ -9,7 +9,7 @@
 
 	.editor__content:deep {
 		flex-grow: 1;
-		margin-left: 44px;
+		margin-left: var(--default-clickable-area);
 
 		.ProseMirror {
 			width: 100%;
@@ -17,8 +17,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;
@@ -51,6 +51,6 @@
 }
 
 .comment--content {
-	margin-left: 44px;
+	margin-left: var(--default-clickable-area);
 	word-break: break-word;
 }
diff --git a/src/helpers/mentions.js b/src/helpers/mentions.js
index 5b70e4b15..9472d8d0d 100644
--- a/src/helpers/mentions.js
+++ b/src/helpers/mentions.js
@@ -2,6 +2,7 @@
  * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
+
 const rawToParsed = (text) => {
 	text = text.replace(/<br>/g, '\n')
 	text = text.replace(/&nbsp;/g, ' ')
diff --git a/src/helpers/xml.js b/src/helpers/xml.js
index 99d7bc2b9..bf10e0ed2 100644
--- a/src/helpers/xml.js
+++ b/src/helpers/xml.js
@@ -2,6 +2,7 @@
  * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
+
 const xmlToJson = (xml) => {
 	let obj = {}
 	if (xml.nodeType === 1) {