Fix card design

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

src/components/cards/CardBadges.vue

@@ -24,17 +24,18 @@ cardbadges
 
 <template>
 	<div class="badges">
-		<div v-if="card.attachments" class="card-files icon icon-files-dark" />
-
 		<div v-if="card.description" class="card-comments icon icon-filetype-text" />
 
 		<div v-if="card.duedate" :class="dueIcon">
 			<span>{{ dueTime }}</span>
 		</div>
+
 		<div v-if="card.description && checkListCount > 0" class="card-tasks icon icon-checkmark">
 			<span>{{ checkListCheckedCount }}/{{ checkListCount }}</span>
 		</div>
 
+		<div v-if="card.attachments" class="card-files icon icon-files-dark" />
+
 		<div v-if="card.assignedUsers" class="card-assigned-users">
 			<avatar v-for="user in card.assignedUsers" :key="user.id" :user="user.participant.primaryKey" />
 		</div>
@@ -99,7 +100,7 @@ export default {
 				this.dueIcon = 'icon-calendar-dark due icon now'
 			}
 			if (timeInHours < 0) {
-				this.dueIcon = 'icon-calendar-dark due icon overdue'
+				this.dueIcon = 'icon-calendar due icon overdue'
 			}
 		}
 	}
@@ -110,6 +111,10 @@ export default {
 	.badges {
 		display: flex;
 		flex-grow: 1;
+
+		& > div {
+			margin-right: 10px;
+		}
 		.icon {
 			opacity: 0.5;
 			padding: 12px 3px;
@@ -117,6 +122,9 @@ export default {
 			span {
 				margin-left: 18px;
 			}
+			&.icon-filetype-text {
+				opacity: 1;
+			}
 		}
 		.card-assigned-users {
 			flex-grow: 1;
@@ -131,8 +139,8 @@ export default {
 	.badges .icon.due {
 		background-position: 4px center;
 		border-radius: 3px;
-		margin: 10px 0;
-		margin-right: 3px;
+		margin-top: 10px;
+		margin-bottom: 10px;
 		padding: 4px;
 		font-size: 90%;
 		display: flex;