diff --git a/src/components/cards/badges/DueDate.vue b/src/components/cards/badges/DueDate.vue
index 0a584f528..23ff1d4d3 100644
--- a/src/components/cards/badges/DueDate.vue
+++ b/src/components/cards/badges/DueDate.vue
@@ -37,8 +37,6 @@ import { mapState } from 'vuex'
 import moment from '@nextcloud/moment'
 import Clock from 'vue-material-design-icons/Clock.vue'
 import ClockOutline from 'vue-material-design-icons/ClockOutline.vue'
-import CalendarAlert from 'vue-material-design-icons/CalendarAlert.vue'
-import CalendarBlank from 'vue-material-design-icons/CalendarBlank.vue'
 
 const DueState = {
 	Future: 'Future',
@@ -48,18 +46,16 @@ const DueState = {
 }
 export default {
 	name: 'DueDate',
+	components: {
+		Clock,
+		ClockOutline,
+	},
 	props: {
 		card: {
 			type: Object,
 			default: null,
 		},
 	},
-	components: {
-		Clock,
-		ClockOutline,
-		CalendarAlert,
-		CalendarBlank,
-	},
 	computed: {
 		...mapState({
 			compactMode: state => state.compactMode,
@@ -73,13 +69,13 @@ export default {
 				return DueState.Now
 			}
 			if (days === 1) {
-				return DueState.Overdue
+				return DueState.Next
 			}
 
 			return DueState.Future
 		},
 		overdue() {
-			this.dueState === DueState.Overdue
+			return this.dueState === DueState.Overdue
 		},
 		relativeDate() {
 			const diff = moment(this.$root.time).diff(this.card.duedate, 'seconds')
@@ -108,11 +104,11 @@ export default {
 		flex-shrink: 1;
 		z-index: 2;
 
-		[data-due-state="Overdue"] & {
+		[data-due-state='Overdue'] & {
 			color: var(--color-main-background);
 			background-color: var(--color-error-text);
 		}
-		[data-due-state="Now"] & {
+		[data-due-state='Now'] & {
 			color: var(--color-main-background);
 			background-color: var(--color-warning);
 		}
diff --git a/src/mixins/color.js b/src/mixins/color.js
index 45c0441b2..ddc386017 100644
--- a/src/mixins/color.js
+++ b/src/mixins/color.js
@@ -20,7 +20,7 @@
  *
  */
 
-import chroma from "chroma-js"
+import chroma from 'chroma-js'
 
 export default {
 	methods: {