Fix design, dark mode and keyboard navigation of the board list

Signed-off-by: Julius Härtl <jus@bitgrid.net>

css/collections.css

@@ -1,7 +1,3 @@
-.icon-deck {
-	background-image: url('../img/deck-dark.svg');
-}
-
 .resource-type-deck img {
 	opacity: 0.4 !important;
 }

css/icons.scss

@@ -1,81 +1,27 @@
 /**
  * Custom icons
  */
-.icon-deck {
+@include icon-black-white('deck', 'deck', 1);
-	background-image: url('../img/deck-dark.svg');
+@include icon-black-white('archive', 'deck', 1);
-}
+@include icon-black-white('circles', 'deck', 1);
-
+@include icon-black-white('clone', 'deck', 1);
-.icon-help {
+@include icon-black-white('filter', 'deck', 1);
-	background-image: url('../../../settings/img/help.svg');
+@include icon-black-white('filter_set', 'deck', 1);
-}
+@include icon-black-white('attach', 'deck', 1);
-
+@include icon-black-white('reply', 'deck', 1);
-.icon-add-white {
-	background-image: url('../img/add-white.svg');
-}
-
-.icon-attach {
-	background-image: url('../img/attach.svg');
-}
-
-.icon-archive {
-	background-image: url('../img/archive.svg');
-}
-
-.icon-archive-white {
-	background-image: url('../img/archive-white.svg');
-}
-
-.icon-details {
-	background-image: url('../img/details.svg');
-}
-
-.icon-details-white {
-	background-image: url('../img/details-white.svg');
-}
-
-.icon-home {
-	background-image: var(--icon-home-000, url('../../../core/img/places/home.svg'));
-}
-
-.icon-description {
-	background-image: var(--icon-text-000, url('../img/description.svg'));
-}
-
-.icon-badge {
-	background-image: url('../img/calendar-dark.svg');
-}
 
 .icon-toggle-compact-collapsed {
-	background-image: url('../img/toggle-view-expand.svg');
+	@include icon-color('toggle-view-expand', 'deck', $color-black);
 }
 
 .icon-toggle-compact-expanded {
-	background-image: url('../img/toggle-view-collapse.svg');
+	@include icon-color('toggle-view-collapse', 'deck', $color-black);
+}
+.icon-activity {
+	@include icon-color('activity-dark', 'activity', $color-black);
 }
 
 
-@if mixin-exists('icon-black-white') {
-	@include icon-black-white('deck', 'deck', 1);
-	@include icon-black-white('archive', 'deck', 1);
-	@include icon-black-white('circles', 'deck', 1);
-	@include icon-black-white('clone', 'deck', 1);
-	@include icon-black-white('filter', 'deck', 1);
-	@include icon-black-white('filter_set', 'deck', 1);
-	@include icon-black-white('attach', 'deck', 1);
-	@include icon-black-white('reply', 'deck', 1);
-
-	.icon-toggle-compact-collapsed {
-		@include icon-color('toggle-view-expand', 'deck', $color-black);
-	}
-
-	.icon-toggle-compact-expanded {
-		@include icon-color('toggle-view-collapse', 'deck', $color-black);
-	}
-	.icon-activity {
-		@include icon-color('activity-dark', 'activity', $color-black);
-	}
-}
-
 .avatardiv.circles {
 	background: var(--color-primary);
 }

src/components/boards/BoardItem.vue

@@ -25,7 +25,7 @@
 		:title="board.title"
 		:to="routeTo"
 		class="board-list-row"
-		tag="div">
+		tag="a">
 		<div class="board-list-bullet-cell">
 			<div :style="{ 'background-color': `#${board.color}` }" class="board-list-bullet" />
 		</div>
@@ -78,6 +78,13 @@ export default {
 
 <style lang="scss" scoped>
 
+	.board-list-row {
+		&:hover, &:focus {
+			background-color: var(--color-background-hover);
+		}
+		cursor: pointer;
+	}
+
 	.board-list-bullet-cell {
 		padding: 6px 15px;
 

src/components/boards/Boards.vue

@@ -79,10 +79,11 @@ export default {
 
 <style lang="scss">
 	.board-list {
+		margin-top: -44px;
 
 		.board-list-row {
 			align-items: center;
-			border-bottom: 1px solid #ededed;
+			border-bottom: 1px solid var(--color-border);
 			display: flex;
 		}
 
@@ -93,6 +94,7 @@ export default {
 
 		.board-list-header-row {
 			color: var(--color-text-lighter);
+			height: 44px;
 		}
 
 		.board-list-bullet-cell,

src/components/cards/CardItem.vue

@@ -189,11 +189,15 @@ export default {
 	.card {
 		transition: box-shadow 0.1s ease-in-out;
 		box-shadow: 0 0 2px 0 var(--color-box-shadow);
-		border-radius: 3px;
+		border-radius: var(--border-radius-large);
 		font-size: 100%;
 		background-color: var(--color-main-background);
 		margin-bottom: $card-spacing;
 
+		body.dark &, body.theme--dark & {
+			border: 2px solid var(--color-border);
+		}
+
 		&.current-card {
 			box-shadow: 0 0 5px 0 var(--color-box-shadow);
 		}