fix: design review issues

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;
+}

src/components/ActivityEntry.vue

@@ -13,7 +13,7 @@
 			</div>
 		</div>
 		<!-- FIXME ins/del tags do no longer work with activity so we should get rid of that -->
 		<p v-if="activity.message" class="activity--message" v-html="sanitizedMessage" />
 	</div>
 </template>
 
@@ -120,7 +120,7 @@
 			margin-left: 10px;
 		}
 		.activity--message {
-			margin-left: 44px;
+			margin-left: var(--default-clickable-area);
 			color: var(--color-text-light);
 			margin-bottom: 10px;
 		}

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);

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;

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;

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>

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 {

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;

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;

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,

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;

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;

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;

src/components/card/Description.vue

@@ -40,7 +40,7 @@
 				id="description-preview"
 				dir="auto"
 				@click="clickedPreview"
 				v-html="renderedDescription" />
 			<p v-else-if="!descriptionEditing" class="placeholder" @click="showEditor()">
 				{{ t('deck', 'Write a description …') }}
 			</p>
@@ -367,7 +367,7 @@
 }
 
 .description__text :deep(.ProseMirror) {
-	padding-bottom: 44px;
+	padding-bottom: var(--default-clickable-area);
 }
 
 </style>

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;

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;

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;

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;

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;

src/css/comments.scss

@@ -9,16 +9,16 @@
 
 	.editor__content:deep {
 		flex-grow: 1;
-		margin-left: 44px;
+		margin-left: var(--default-clickable-area);
 
 		.ProseMirror {
 			width: 100%;
 		}
 	}
 
 	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;
 }

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, ' ')

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) {