replace p with div for linting

This reverts commit bb5e4b56a3.

src/components/project/partials/ProjectCardGrid.vue

@@ -40,7 +40,7 @@ const filteredProjects = computed(() => {
 
 <style lang="scss" scoped>
 .project-grid {
-	--project-grid-item-height: 150px;
+	--project-grid-item-height: 100px;
 	--project-grid-gap: 1rem;
 	margin: 0; // reset li
 	list-style-type: none;

src/components/tasks/partials/singleTaskInProject.vue

@@ -386,7 +386,8 @@ function focusTaskLink() {
 	}
 
 	.task-project {
-		width: auto;
+		min-width: 60px; //TODO: Quickfix, find a better way to make a nice vertical alignment
+		display: inline-block;
 		color: var(--grey-400);
 		font-size: .9rem;
 		white-space: nowrap;

src/styles/theme/_index.scss

@@ -10,3 +10,5 @@
 @import "flatpickr";
 @import 'helpers';
 @import 'navigation';
+@import 'button';
+@import 'cards';

src/styles/theme/button.scss

@@ -0,0 +1,3 @@
+.button.border {
+	border: 1px solid;
+}

src/styles/theme/cards.scss

@@ -0,0 +1,8 @@
+.section-card {
+	background: var(--card-background-color);
+	border-radius: var(--card-radius);
+	box-shadow: var(--card-shadow);
+	color: var(--card-color);
+	padding: 20px;
+	margin: 0 0 20px 0;
+}

src/views/tasks/ShowTasks.vue

@@ -3,7 +3,8 @@
 		<h3 class="mb-2 title">
 			{{ pageTitle }}
 		</h3>
-		<p v-if="!showAll" class="show-tasks-options">
+		<div v-if="!showAll" class="show-tasks-options section-card columns">
+			<div class="column">
 				<datepicker-with-range @update:model-value="setDate">
 					<template #trigger="{toggle}">
 						<x-button @click.prevent.stop="toggle()" variant="primary" :shadow="false" class="mb-2">
@@ -11,13 +12,16 @@
 						</x-button>
 					</template>
 				</datepicker-with-range>
+			</div>
+			<div class="column">
 				<fancycheckbox @update:model-value="setShowNulls" :model-value="showNulls" class="mr-2">
 					{{ $t('task.show.noDates') }}
 				</fancycheckbox>
 				<fancycheckbox @update:model-value="setShowOverdue" :model-value="showOverdue">
 					{{ $t('task.show.overdue') }}
 				</fancycheckbox>
-		</p>
+			</div>
+		</div>
 		<template v-if="!loading && (!tasks || tasks.length === 0) && showNothingToDo">
 			<h3 class="has-text-centered mt-6">{{ $t('task.show.noTasks') }}</h3>
 			<LlamaCool class="llama-cool"/>
@@ -213,6 +217,7 @@ watchEffect(() => setTitle(pageTitle.value))
 .show-tasks-options {
 	display: flex;
 	flex-direction: column;
+	flex-flow: row wrap;
 }
 
 .llama-cool {

src/views/tasks/TaskDetailView.vue

@@ -8,6 +8,7 @@
 	>
 		<!-- Removing everything until the task is loaded to prevent empty initialization of other components -->
 		<div class="task-view" v-if="visible">
+			<div class="section-card">
 				<Heading
 					:task="task"
 					@update:task="Object.assign(task, $event)"
@@ -22,14 +23,14 @@
 						<span class="has-text-grey-light" v-if="p.id !== project?.id"> &gt; </span>
 					</template>
 				</h6>
-
+			</div>
 			<checklist-summary :task="task"/>
 
 			<!-- Content and buttons -->
 			<div class="columns mt-2">
 				<!-- Content -->
 				<div :class="{'is-two-thirds': canWrite}" class="column detail-content">
-					<div class="columns details">
+					<div class="columns details section-card">
 						<div class="column assignees" v-if="activeFields.assignees">
 							<!-- Assignees -->
 							<div class="detail-title">
@@ -209,7 +210,7 @@
 					</div>
 
 					<!-- Labels -->
-					<div class="labels-list details" v-if="activeFields.labels">
+					<div class="labels-list details section-card" v-if="activeFields.labels">
 						<div class="detail-title">
 							<span class="icon is-grey">
 								<icon icon="tags"/>
@@ -224,7 +225,7 @@
 					</div>
 
 					<!-- Description -->
-					<div class="details content description">
+					<div class="details content description section-card">
 						<description
 							:model-value="task"
 							@update:modelValue="Object.assign(task, $event)"
@@ -234,7 +235,7 @@
 					</div>
 
 					<!-- Attachments -->
-					<div class="content attachments" v-if="activeFields.attachments || hasAttachments">
+					<div class="content attachments section-card" v-if="activeFields.attachments || hasAttachments">
 						<attachments
 							:edit-enabled="canWrite"
 							:task="task"
@@ -244,7 +245,7 @@
 					</div>
 
 					<!-- Related Tasks -->
-					<div class="content details mb-0" v-if="activeFields.relatedTasks">
+					<div class="content details section-card" v-if="activeFields.relatedTasks">
 						<h3>
 							<span class="icon is-grey">
 								<icon icon="sitemap"/>
@@ -262,7 +263,7 @@
 					</div>
 
 					<!-- Move Task -->
-					<div class="content details" v-if="activeFields.moveProject">
+					<div class="content details section-card" v-if="activeFields.moveProject">
 						<h3>
 							<span class="icon is-grey">
 								<icon icon="list"/>
@@ -280,8 +281,10 @@
 					</div>
 
 					<!-- Comments -->
+					<div class="section-card">
 						<comments :can-write="canWrite" :task-id="taskId"/>
 					</div>
+				</div>
 				
 				<!-- Task Actions -->
 				<div class="column is-one-third action-buttons d-print-none" v-if="canWrite || isModal">
@@ -290,7 +293,7 @@
 							:class="{'is-success': !task.done}"
 							:shadow="task.done"
 							@click="toggleTaskDone()"
-							class="is-outlined has-no-border"
+							class="is-outlined border"
 							icon="check-double"
 							variant="secondary"
 							v-shortcut="'t'"
@@ -428,7 +431,7 @@
 							@click="showDeleteModal = true"
 							icon="trash-alt"
 							:shadow="false"
-							class="is-danger is-outlined has-no-border"
+							class="is-danger is-outlined border"
 							v-shortcut="'Shift+Delete'"
 						>
 							{{ $t('task.detail.actions.delete') }}
@@ -858,7 +861,6 @@ function setRelatedTasksActive() {
 	opacity: 0;
 }
 
-
 .subtitle {
 	color: var(--grey-500);
 	margin-bottom: 1rem;
@@ -914,7 +916,6 @@ h3 .button {
 .details {
 	padding-bottom: 0.75rem;
 	flex-flow: row wrap;
-	margin-bottom: 0;
 
 	.detail-title {
 		display: block;
@@ -986,7 +987,6 @@ h3 .button {
 }
 
 .attachments {
-	margin-bottom: 0;
 
 	table tr:last-child td {
 		border-bottom: none;