From 8930f615489b270272510204b9191e8caafb5a4e Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 10 Jun 2023 18:46:15 +0200
Subject: [PATCH] fix(reminders): flatpickr styling improvements

---
 src/components/input/datepickerInline.vue     | 23 ++++++++++++-------
 .../tasks/partials/reminder-detail.vue        |  7 ++----
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/components/input/datepickerInline.vue b/src/components/input/datepickerInline.vue
index e36773be8..0b6e754b6 100644
--- a/src/components/input/datepickerInline.vue
+++ b/src/components/input/datepickerInline.vue
@@ -61,11 +61,12 @@
 		</span>
 	</BaseButton>
 
-	<flat-pickr
-		:config="flatPickerConfig"
-		class="input"
-		v-model="flatPickrDate"
-	/>
+	<div class="flatpickr-container">
+		<flat-pickr
+			:config="flatPickerConfig"
+			v-model="flatPickrDate"
+		/>
+	</div>
 </template>
 
 <script lang="ts" setup>
@@ -214,8 +215,14 @@ function getWeekdayFromStringInterval(dateString: string) {
 	}
 }
 
-:deep(.flatpickr-calendar) {
-	margin: 0 auto 8px;
-	box-shadow: none;
+.flatpickr-container {
+	:deep(.flatpickr-calendar) {
+		margin: 0 auto 8px;
+		box-shadow: none;
+	}
+
+	:deep(.input) {
+		border: none;
+	}
 }
 </style>
diff --git a/src/components/tasks/partials/reminder-detail.vue b/src/components/tasks/partials/reminder-detail.vue
index ca7245bbe..099a9224b 100644
--- a/src/components/tasks/partials/reminder-detail.vue
+++ b/src/components/tasks/partials/reminder-detail.vue
@@ -166,6 +166,8 @@ function updateDataAndMaybeClose(toggle) {
 function formatReminder(reminder: TaskReminderModel) {
 
 	const period = secondsToPeriod(reminder.relativePeriod)
+	
+	// TODO: 0 does not work
 
 	if (period.amount === 0) {
 		switch (reminder.relativeTo) {
@@ -267,9 +269,4 @@ function translateUnit(amount: number, unit: PeriodUnit): string {
 .currently-active {
 	color: var(--primary);
 }
-
-:deep(.flatpickr-calendar) {
-	margin: 0 auto;
-	box-shadow: none;
-}
 </style>