remove SCSS

5 files changed, 56 insertions, 12 deletions

diff --git a/src/components/Dashboard.vue b/src/components/Dashboard.vue
index 71cd4dc7..39ff0c06 100644
--- a/src/components/Dashboard.vue
+++ b/src/components/Dashboard.vue
@@ -104,7 +104,7 @@ export default {
 }
 
 .note-item-favorite {
-	background: var(--icon-star-dark-FC0, var(--icon-star-dark-fc0));
+	background: var(--icon-starred-yellow, var(--icon-star-dark-FC0, var(--icon-star-dark-fc0)));
 }
 
 .note-item {
diff --git a/src/components/NavigationCategoriesItem.vue b/src/components/NavigationCategoriesItem.vue
index 28c0f396..67e134a6 100644
--- a/src/components/NavigationCategoriesItem.vue
+++ b/src/components/NavigationCategoriesItem.vue
@@ -1,18 +1,18 @@
 <template>
 	<AppNavigationItem
 		:title="title"
-		icon="icon-files"
 		class="app-navigation-noclose separator-below"
 		:class="{ 'category-header': selectedCategory !== null }"
 		:open.sync="open"
 		:allow-collapse="true"
 		@click.prevent.stop="onToggleCategories"
 	>
+		<FolderIcon slot="icon" :size="20" fill-color="var(--color-main-text)" />
 		<AppNavigationItem
 			:title="t('notes', 'All notes')"
-			icon="icon-recent"
 			@click.prevent.stop="onSelectCategory(null)"
 		>
+			<HistoryIcon slot="icon" :size="20" fill-color="var(--color-main-text)" />
 			<AppNavigationCounter slot="counter">
 				{{ numNotes }}
 			</AppNavigationCounter>
@@ -21,9 +21,18 @@
 		<AppNavigationItem v-for="category in categories"
 			:key="category.name"
 			:title="categoryTitle(category.name)"
-			:icon="category.name === '' ? 'icon-emptyfolder' : 'icon-files'"
 			@click.prevent.stop="onSelectCategory(category.name)"
 		>
+			<FolderOutlineIcon v-if="category.name === ''"
+				slot="icon"
+				:size="20"
+				fill-color="var(--color-main-text)"
+			/>
+			<FolderIcon v-else
+				slot="icon"
+				:size="20"
+				fill-color="var(--color-main-text)"
+			/>
 			<AppNavigationCounter slot="counter">
 				{{ category.count }}
 			</AppNavigationCounter>
@@ -37,6 +46,10 @@ import {
 	AppNavigationCounter,
 } from '@nextcloud/vue'
 
+import FolderIcon from 'vue-material-design-icons/Folder.vue'
+import FolderOutlineIcon from 'vue-material-design-icons/FolderOutline.vue'
+import HistoryIcon from 'vue-material-design-icons/History.vue'
+
 import { getCategories } from '../NotesService.js'
 import { categoryLabel } from '../Util.js'
 import store from '../store.js'
@@ -47,6 +60,9 @@ export default {
 	components: {
 		AppNavigationItem,
 		AppNavigationCounter,
+		FolderIcon,
+		FolderOutlineIcon,
+		HistoryIcon,
 	},
 
 	props: {
diff --git a/src/components/NavigationList.vue b/src/components/NavigationList.vue
index e7e5e03c..2ee9383b 100644
--- a/src/components/NavigationList.vue
+++ b/src/components/NavigationList.vue
@@ -11,7 +11,6 @@
 		<template v-for="item in noteItems">
 			<AppNavigationCaption v-if="category!==null && category!==item.category"
 				:key="item.category"
-				icon="icon-files"
 				class="app-navigation-noclose"
 				:title="categoryToLabel(item.category)"
 				@click.native="$emit('category-selected', item.category)"
diff --git a/src/components/Note.vue b/src/components/Note.vue
index 2bdefe56..34bfdeba 100644
--- a/src/components/Note.vue
+++ b/src/components/Note.vue
@@ -51,26 +51,36 @@
 						icon="icon-details"
 						@click="onToggleSidebar"
 					>
+						<SidebarIcon slot="icon" :size="20" fill-color="var(--color-main-text)" />
 						{{ t('notes', 'Details') }}
 					</ActionButton>
 					<ActionButton
 						v-tooltip.left="t('notes', 'CTRL + /')"
-						:icon="preview ? 'icon-rename' : 'icon-toggle'"
 						@click="onTogglePreview"
 					>
+						<EditIcon v-if="preview"
+							slot="icon"
+							:size="20"
+							fill-color="var(--color-main-text)"
+						/>
+						<EyeIcon v-else
+							slot="icon"
+							:size="20"
+							fill-color="var(--color-main-text)"
+						/>
 						{{ preview ? t('notes', 'Edit') : t('notes', 'Preview') }}
 					</ActionButton>
 					<ActionButton
-						icon="icon-fullscreen"
 						:class="{ active: fullscreen }"
 						@click="onToggleDistractionFree"
 					>
+						<FullscreenIcon slot="icon" :size="20" fill-color="var(--color-main-text)" />
 						{{ fullscreen ? t('notes', 'Exit full screen') : t('notes', 'Full screen') }}
 					</ActionButton>
 				</Actions>
 				<Actions v-if="note.readonly">
 					<ActionButton>
-						<PencilOffIcon slot="icon" :size="20" fill-color="var(--color-main-text)" />
+						<NoEditIcon slot="icon" :size="20" fill-color="var(--color-main-text)" />
 						{{ t('notes', 'Note is read-only. You cannot change it.') }}
 					</ActionButton>
 				</Actions>
@@ -103,8 +113,12 @@ import {
 import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
 
+import EditIcon from 'vue-material-design-icons/LeadPencil.vue'
+import EyeIcon from 'vue-material-design-icons/Eye.vue'
+import FullscreenIcon from 'vue-material-design-icons/Fullscreen.vue'
+import NoEditIcon from 'vue-material-design-icons/PencilOff.vue'
+import SidebarIcon from 'vue-material-design-icons/PageLayoutSidebarRight.vue'
 import SyncAlertIcon from 'vue-material-design-icons/SyncAlert.vue'
-import PencilOffIcon from 'vue-material-design-icons/PencilOff.vue'
 
 import { config } from '../config.js'
 import { fetchNote, refreshNote, saveNoteManually, queueCommand, conflictSolutionLocal, conflictSolutionRemote } from '../NotesService.js'
@@ -122,8 +136,12 @@ export default {
 		ActionButton,
 		AppContent,
 		ConflictSolution,
+		EditIcon,
+		EyeIcon,
+		FullscreenIcon,
 		Modal,
-		PencilOffIcon,
+		NoEditIcon,
+		SidebarIcon,
 		SyncAlertIcon,
 		TheEditor,
 		ThePreview,
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index f3f16b6f..df3ffe53 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -8,8 +8,15 @@
 		@close="onCloseSidebar"
 	>
 		<div class="sidebar-content-wrapper">
-			<div v-if="!note.readonly" class="note-category" :title="t('notes', 'Set category')">
-				<h4>{{ t('notes', 'Category') }} <span v-tooltip="categoriesInfo" class="icon-info svg" /></h4>
+			<div v-if="!note.readonly" class="note-category">
+				<h4>
+					{{ t('notes', 'Category') }}
+					<InfoIcon v-tooltip="categoriesInfo"
+						:size="20"
+						fill-color="var(--color-main-text)"
+						style="display: inline-block; margin-left: 1ex;"
+					/>
+				</h4>
 				<form class="category" @submit.prevent.stop="">
 					<Multiselect id="category"
 						:value="category"
@@ -20,6 +27,7 @@
 						:show-no-results="false"
 						:taggable="true"
 						:preserve-search="true"
+						:title="t('notes', 'Set category')"
 						@input="onSaveCategory"
 						@close="onFinishEditCategory"
 						@search-change="onEditCategory"
@@ -61,6 +69,8 @@ import {
 } from '@nextcloud/vue'
 import moment from '@nextcloud/moment'
 
+import InfoIcon from 'vue-material-design-icons/Information.vue'
+
 import { getCategories, setFavorite, setCategory, saveNoteManually } from '../NotesService.js'
 import { categoryLabel } from '../Util.js'
 import store from '../store.js'
@@ -70,6 +80,7 @@ export default {
 
 	components: {
 		AppSidebar,
+		InfoIcon,
 		Multiselect,
 	},