From e9602026077c27aa42fcb7a95d77d8f76030579e Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 17 Jan 2021 13:04:49 +0100
Subject: [PATCH] Use buttons more consistently

---
 src/components/input/colorPicker.vue          |  2 +-
 src/components/input/datepicker.vue           |  2 +-
 src/components/input/editor.vue               | 20 ++++++++++---------
 .../list/partials/background-settings.vue     |  2 +-
 src/components/migrator/migration.vue         |  2 +-
 src/components/modal/modal.vue                |  4 ++--
 src/components/tasks/edit-task.vue            |  2 +-
 src/components/tasks/partials/defer-task.vue  |  6 +++---
 src/styles/components/color-picker.scss       |  6 +-----
 src/styles/components/datepicker.scss         | 12 +++++------
 src/styles/theme/content.scss                 |  4 ++++
 src/views/Home.vue                            |  2 +-
 src/views/labels/ListLabels.vue               |  2 +-
 src/views/labels/NewLabel.vue                 |  2 +-
 src/views/list/NewList.vue                    |  2 +-
 src/views/list/views/List.vue                 |  2 +-
 src/views/namespaces/NewNamespace.vue         |  2 +-
 src/views/tasks/ShowTasks.vue                 |  6 +++---
 src/views/tasks/TaskDetailView.vue            |  4 ++--
 src/views/teams/NewTeam.vue                   |  2 +-
 src/views/user/Settings.vue                   |  2 +-
 21 files changed, 45 insertions(+), 43 deletions(-)

diff --git a/src/components/input/colorPicker.vue b/src/components/input/colorPicker.vue
index 0cf3cb98b..d9d9590c8 100644
--- a/src/components/input/colorPicker.vue
+++ b/src/components/input/colorPicker.vue
@@ -16,7 +16,7 @@
 			model="hex"
 			picker="square"
 			v-model="color"/>
-		<a @click="reset" class="reset">
+		<a @click="reset" class="button has-no-shadow is-small ml-2">
 			Reset Color
 		</a>
 	</div>
diff --git a/src/components/input/datepicker.vue b/src/components/input/datepicker.vue
index 957b43837..855c1cfe2 100644
--- a/src/components/input/datepicker.vue
+++ b/src/components/input/datepicker.vue
@@ -98,7 +98,7 @@
 				/>
 
 				<a
-					class="button is-outlined is-primary has-no-shadow is-fullwidth"
+					class="button is-primary has-no-shadow is-fullwidth"
 					@click="close"
 				>
 					Confirm
diff --git a/src/components/input/editor.vue b/src/components/input/editor.vue
index 26b7f4562..eafb5752d 100644
--- a/src/components/input/editor.vue
+++ b/src/components/input/editor.vue
@@ -1,14 +1,16 @@
 <template>
 	<div :class="{'is-pulled-up': isEditEnabled}" class="editor">
-		<div class="tabs is-right" v-if="hasPreview && isEditEnabled && !hasEditBottom">
-			<ul>
-				<li>
-					<a v-if="!isEditActive" @click="toggleEdit">Edit</a>
-					<a v-else @click="toggleEdit">Done</a>
-				</li>
-			</ul>
+		<div class="is-pulled-right mb-4" v-if="hasPreview && isEditEnabled && !hasEditBottom">
+			<a v-if="!isEditActive" @click="toggleEdit" class="button has-no-shadow">
+				<icon icon="pen"/>
+			</a>
+			<a v-else @click="toggleEdit" class="button has-no-shadow">
+				Done
+			</a>
 		</div>
 
+		<div class="clear"></div>
+
 		<vue-easymde
 			:configs="config"
 			@change="bubble"
@@ -416,8 +418,8 @@ export default {
 @import '../../styles/theme/variables';
 
 .editor {
-	.tabs ul {
-		margin-left: 0;
+	.clear {
+		clear: both;
 	}
 
 	.preview.content ul li input[type="checkbox"] {
diff --git a/src/components/list/partials/background-settings.vue b/src/components/list/partials/background-settings.vue
index b64d9adf3..78cc876fb 100644
--- a/src/components/list/partials/background-settings.vue
+++ b/src/components/list/partials/background-settings.vue
@@ -50,7 +50,7 @@
 				<a
 					:disabled="backgroundService.loading"
 					@click="() => searchBackgrounds(currentPage + 1)"
-					class="button is-primary is-centered is-load-more-button is-outlined noshadow"
+					class="button is-centered is-load-more-button has-no-shadow mt-4"
 					v-if="backgroundSearchResult.length > 0"
 				>
 					<template v-if="backgroundService.loading">
diff --git a/src/components/migrator/migration.vue b/src/components/migrator/migration.vue
index 84c36c5a3..e8737b31c 100644
--- a/src/components/migrator/migration.vue
+++ b/src/components/migrator/migration.vue
@@ -39,7 +39,7 @@
 			</p>
 			<div class="buttons">
 				<button @click="migrate" class="button is-primary">I am sure, please start migrating now!</button>
-				<router-link :to="{name: 'home'}" class="button is-danger is-outlined">Cancel</router-link>
+				<router-link :to="{name: 'home'}" class="button is-text has-text-danger is-inverted noshadow underline-none">Cancel</router-link>
 			</div>
 		</div>
 		<div v-else>
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index fa0866bba..11e521638 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -11,8 +11,8 @@
 						<slot name="text"></slot>
 					</div>
 					<div class="actions">
-						<button @click="$emit('close')" class="button is-danger is-inverted noshadow">Cancel</button>
-						<button @click="$emit('submit')" class="button is-success noshadow">Do it!</button>
+						<button @click="$emit('close')" class="button is-text has-text-danger is-inverted noshadow underline-none">Cancel</button>
+						<button @click="$emit('submit')" class="button is-primary noshadow">Do it!</button>
 					</div>
 					</slot>
 				</div>
diff --git a/src/components/tasks/edit-task.vue b/src/components/tasks/edit-task.vue
index ea7235edf..262bee67a 100644
--- a/src/components/tasks/edit-task.vue
+++ b/src/components/tasks/edit-task.vue
@@ -138,7 +138,7 @@
 			class="is-narrow"
 		/>
 
-		<button :class="{ 'is-loading': taskService.loading}" class="button is-success is-fullwidth" type="submit">
+		<button :class="{ 'is-loading': taskService.loading}" class="button is-primary is-fullwidth" type="submit">
 			Save
 		</button>
 
diff --git a/src/components/tasks/partials/defer-task.vue b/src/components/tasks/partials/defer-task.vue
index 0a7c91dae..7b5dd8ff0 100644
--- a/src/components/tasks/partials/defer-task.vue
+++ b/src/components/tasks/partials/defer-task.vue
@@ -2,9 +2,9 @@
 	<div :class="{'is-loading': taskService.loading}" class="defer-task loading-container">
 		<label class="label">Defer due date</label>
 		<div class="defer-days">
-			<button @click="() => deferDays(1)" class="button is-outlined is-primary has-no-shadow">1 day</button>
-			<button @click="() => deferDays(3)" class="button is-outlined is-primary has-no-shadow">3 days</button>
-			<button @click="() => deferDays(7)" class="button is-outlined is-primary has-no-shadow">1 week</button>
+			<button @click="() => deferDays(1)" class="button has-no-shadow">1 day</button>
+			<button @click="() => deferDays(3)" class="button has-no-shadow">3 days</button>
+			<button @click="() => deferDays(7)" class="button has-no-shadow">1 week</button>
 		</div>
 		<flat-pickr
 			:class="{ 'disabled': taskService.loading}"
diff --git a/src/styles/components/color-picker.scss b/src/styles/components/color-picker.scss
index f69638d9c..a8fbc785c 100644
--- a/src/styles/components/color-picker.scss
+++ b/src/styles/components/color-picker.scss
@@ -1,15 +1,11 @@
 .color-picker-container {
   display: flex;
   justify-content: center;
+  align-items: center;
 
   .verte__guide {
     border-radius: 100%;
     border: 1px solid $grey-light;
     box-shadow: $card-shadow;
   }
-
-  a.reset {
-    font-size: .9em;
-    padding-left: .5rem;
-  }
 }
\ No newline at end of file
diff --git a/src/styles/components/datepicker.scss b/src/styles/components/datepicker.scss
index 901c95376..c4630b2ca 100644
--- a/src/styles/components/datepicker.scss
+++ b/src/styles/components/datepicker.scss
@@ -15,7 +15,7 @@
 		border-radius: $radius;
 		box-shadow: $card-shadow;
 
-		a {
+		a:not(.button) {
 			display: flex;
 			align-items: center;
 			padding: 0 .5rem;
@@ -49,11 +49,11 @@
 				width: 2rem;
 				text-align: center;
 			}
-
-			&.button {
-				margin: 1rem;
-				width: calc(100% - 2rem);
-			}
+		}
+			
+		a.button {
+			margin: 1rem;
+			width: calc(100% - 2rem);
 		}
 
 		.flatpickr-calendar {
diff --git a/src/styles/theme/content.scss b/src/styles/theme/content.scss
index ba1a51a53..35e3f2c90 100644
--- a/src/styles/theme/content.scss
+++ b/src/styles/theme/content.scss
@@ -55,3 +55,7 @@
     font-size: 1rem;
   }
 }
+
+.underline-none {
+  text-decoration: none !important;
+}
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 7a5647277..5b99b1946 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -5,7 +5,7 @@
 			<p>Click on a list or namespace on the left to get started.</p>
 			<router-link
 				:to="{name: 'migrate.start'}"
-				class="button is-primary is-right noshadow is-outlined"
+				class="button is-primary has-no-shadow"
 				v-if="migratorsEnabled"
 			>
 				Import your data into Vikunja
diff --git a/src/views/labels/ListLabels.vue b/src/views/labels/ListLabels.vue
index b56d2392c..809af6d9a 100644
--- a/src/views/labels/ListLabels.vue
+++ b/src/views/labels/ListLabels.vue
@@ -1,6 +1,6 @@
 <template>
 	<div :class="{ 'is-loading': labelService.loading}" class="loader-container content">
-		<router-link :to="{name:'labels.create'}" class="button is-success button-right">
+		<router-link :to="{name:'labels.create'}" class="button is-primary button-right">
 			<span class="icon is-small">
 				<icon icon="plus"/>
 			</span>
diff --git a/src/views/labels/NewLabel.vue b/src/views/labels/NewLabel.vue
index 55f00e0b7..a00c2c8c8 100644
--- a/src/views/labels/NewLabel.vue
+++ b/src/views/labels/NewLabel.vue
@@ -15,7 +15,7 @@
 						v-model="label.title"/>
 				</p>
 				<p class="control">
-					<button class="button is-success noshadow" type="submit">
+					<button class="button is-primary noshadow" type="submit">
 						<span class="icon is-small">
 							<icon icon="plus"/>
 						</span>
diff --git a/src/views/list/NewList.vue b/src/views/list/NewList.vue
index d0889857c..a6b68b7f9 100644
--- a/src/views/list/NewList.vue
+++ b/src/views/list/NewList.vue
@@ -18,7 +18,7 @@
 					v-model="list.title"/>
 			</p>
 			<p class="control">
-				<button :disabled="list.title === ''" @click="newList()" class="button is-success noshadow">
+				<button :disabled="list.title === ''" @click="newList()" class="button is-primary noshadow">
 						<span class="icon is-small">
 							<icon icon="plus"/>
 						</span>
diff --git a/src/views/list/views/List.vue b/src/views/list/views/List.vue
index ea22f22aa..18a767dc9 100644
--- a/src/views/list/views/List.vue
+++ b/src/views/list/views/List.vue
@@ -62,7 +62,7 @@
 					</span>
 				</p>
 				<p class="control">
-					<button :disabled="newTaskText.length === 0" @click="addTask()" class="button is-success">
+					<button :disabled="newTaskText.length === 0" @click="addTask()" class="button is-primary">
 						<span class="icon is-small">
 							<icon icon="plus"/>
 						</span>
diff --git a/src/views/namespaces/NewNamespace.vue b/src/views/namespaces/NewNamespace.vue
index d6fb26bf8..48622662a 100644
--- a/src/views/namespaces/NewNamespace.vue
+++ b/src/views/namespaces/NewNamespace.vue
@@ -18,7 +18,7 @@
 					v-model="namespace.title"/>
 			</p>
 			<p class="control">
-				<button :disabled="namespace.title === ''" @click="newNamespace()" class="button is-success noshadow">
+				<button :disabled="namespace.title === ''" @click="newNamespace()" class="button is-primary noshadow">
 						<span class="icon is-small">
 							<icon icon="plus"/>
 						</span>
diff --git a/src/views/tasks/ShowTasks.vue b/src/views/tasks/ShowTasks.vue
index be080fab8..c89282ce3 100644
--- a/src/views/tasks/ShowTasks.vue
+++ b/src/views/tasks/ShowTasks.vue
@@ -30,9 +30,9 @@
 			/>
 		</h3>
 		<div v-if="!showAll">
-			<a @click="showTodaysTasks()" class="button is-primary is-outlined noshadow mr-2">Today</a>
-			<a @click="setDatesToNextWeek()" class="button is-primary is-outlined noshadow mr-2">Next Week</a>
-			<a @click="setDatesToNextMonth()" class="button is-primary is-outlined noshadow">Next Month</a>
+			<a @click="showTodaysTasks()"     class="button noshadow mr-2">Today</a>
+			<a @click="setDatesToNextWeek()"  class="button noshadow mr-2">Next Week</a>
+			<a @click="setDatesToNextMonth()" class="button noshadow">Next Month</a>
 		</div>
 		<template v-if="!taskService.loading && (!hasUndoneTasks || !tasks || tasks.length === 0)">
 			<h3 class="nothing">Nothing to do - Have a nice day!</h3>
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index 9cf7be17a..fe7e03cf0 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -236,9 +236,9 @@
 				</div>
 				<div class="column is-one-third action-buttons" v-if="canWrite">
 					<a
-						:class="{'is-success': !task.done}"
+						:class="{'is-success': !task.done, 'has-no-shadow': !task.done}"
 						@click="toggleTaskDone()"
-						class="button is-outlined noshadow has-no-border">
+						class="button is-outlined has-no-border">
 						<span class="icon is-small"><icon icon="check-double"/></span>
 						<template v-if="task.done">
 							Mark as undone
diff --git a/src/views/teams/NewTeam.vue b/src/views/teams/NewTeam.vue
index 41816123a..a844d4513 100644
--- a/src/views/teams/NewTeam.vue
+++ b/src/views/teams/NewTeam.vue
@@ -16,7 +16,7 @@
 						v-model="team.name"/>
 				</p>
 				<p class="control">
-					<button class="button is-success noshadow" type="submit">
+					<button class="button is-primary noshadow" type="submit">
 						<span class="icon is-small">
 							<icon icon="plus"/>
 						</span>
diff --git a/src/views/user/Settings.vue b/src/views/user/Settings.vue
index 1bd5afe8f..ce7a9d0c2 100644
--- a/src/views/user/Settings.vue
+++ b/src/views/user/Settings.vue
@@ -248,7 +248,7 @@
 						<input type="text" v-model="caldavUrl" class="input" readonly/>
 					</div>
 					<div class="control">
-						<a @click="copy(caldavUrl)" class="button is-success noshadow" v-tooltip="'Copy to clipboard'">
+						<a @click="copy(caldavUrl)" class="button is-primary noshadow" v-tooltip="'Copy to clipboard'">
 							<span class="icon">
 								<icon icon="paste"/>
 							</span>