style: fix some UI issues

Signed-off-by: Luka Trovic <luka@nextcloud.com>

src/components/card/CardModal.vue

@@ -79,7 +79,7 @@
 		</div>
 		<div class="activities">
 			<h2 class="activities-title">
-				<div class="icon-flash-black" /> Activities
+				<div class="icon-flash-black" /> Activity
 			</h2>
 			<div class="comments">
 				<Avatar :user="currentUser.uid" />
@@ -285,6 +285,10 @@ export default {
 	margin-right: 5px;
 }
 
+.icon {
+	margin-right: 5px;
+}
+
 .icon-plus {
 	background-image: url(../../../img/plus.svg);
 	width: 15px;
@@ -359,7 +363,7 @@ export default {
 	flex-direction: row;
 	overflow: hidden;
 	padding: 10px 10px;
-	border-radius: 5px;
+	border-radius: 10px;
 	font-size: 85%;
 	margin-bottom: 3px;
 	margin-right: 5px;

src/components/card/DueDateTab.vue

@@ -1,6 +1,6 @@
 <template>
-	<div class="section-details">
+	<div v-if="copiedCard" class="section-details">
-		<div @click="$emit('active-tab', 'duedate')">
+		<div @click="$emit('active-tab', 'default')">
 			<DatetimePicker v-model="duedate"
 				:placeholder="t('deck', 'Set a due date')"
 				type="datetime"
@@ -11,11 +11,16 @@
 				:shortcuts="shortcuts"
 				confirm />
 		</div>
+		<Actions v-if="canEdit">
+			<ActionButton v-if="copiedCard.duedate" icon="icon-delete" @click="removeDue()">
+				{{ t('deck', 'Remove due date') }}
+			</ActionButton>
+		</Actions>
 	</div>
 </template>
 
 <script>
-import { DatetimePicker } from '@nextcloud/vue'
+import { DatetimePicker, Actions, ActionButton } from '@nextcloud/vue'
 import { mapState, mapGetters } from 'vuex'
 import Color from '../../mixins/color'
 import labelStyle from '../../mixins/labelStyle'
@@ -27,7 +32,7 @@ import {
 import moment from '@nextcloud/moment'
 
 export default {
-	components: { DatetimePicker },
+	components: { DatetimePicker, Actions, ActionButton },
 	mixins: [Color, labelStyle],
 	props: {
 		card: {
@@ -135,6 +140,10 @@ export default {
 
 			this.copiedCard = JSON.parse(JSON.stringify(this.card))
 		},
+		removeDue() {
+			this.copiedCard.duedate = null
+			this.$store.dispatch('updateCardDue', this.copiedCard)
+		},
 	},
 }
 </script>
@@ -142,5 +151,7 @@ export default {
 <style lang="scss" scoped>
 .section-details {
 	margin-right: 5px;
+	display: flex;
+	align-items: center;
 }
 </style>

src/components/card/MembersTab.vue

@@ -170,6 +170,7 @@ export default {
 	padding: 9px;
 	align-items: center;
 	justify-content: center;
+	margin-left: 5px;
 }
 
 .section-details {

src/components/card/ProjectTab.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="section-details">
-		<div class="section-wrapper" @click="$emit('active-tab', 'project')">
+		<div class="section-wrapper" @click="$emit('active-tab', 'default')">
 			<CollectionList v-if="card.id"
 				:id="`${card.id}`"
 				:name="card.title"

src/components/card/TagsTab.vue

@@ -5,7 +5,7 @@
 				:multiple="true"
 				:disabled="!canEdit"
 				:options="labelsSorted"
-				:placeholder="t('deck', 'Assign a tag to this card…')"
+				:placeholder="t('deck', 'Assign a tag to this card')"
 				:taggable="true"
 				label="title"
 				track-by="id"
@@ -74,7 +74,7 @@ export default {
 	methods: {
 		add() {
 			this.showSelelectTags = true
-			this.$emit('active-tab', 'tags')
+			this.$emit('active-tab', 'default')
 		},
 		async initialize() {
 			if (!this.card) {
@@ -137,4 +137,9 @@ export default {
 	width: 32px;
 	padding: 5px 7px;
 }
+
+.tag {
+	padding: 0px 5px;
+	border-radius: 15px;
+}
 </style>