From 1381bc0f293efd6f1b21b198ab5f5fd0920d2a80 Mon Sep 17 00:00:00 2001
From: Marco Crapts <mcrapts@gmail.com>
Date: Fri, 12 May 2023 20:15:41 +0200
Subject: [PATCH] add buttons to note editor

---
 src/components/Note.vue       | 44 ++++++++++++++++++++++++-----------
 src/components/NoteEditor.vue |  2 +-
 src/style.scss                |  2 +-
 tailwind.config.js            |  2 +-
 4 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/src/components/Note.vue b/src/components/Note.vue
index 10a952d..e00a5bb 100644
--- a/src/components/Note.vue
+++ b/src/components/Note.vue
@@ -32,19 +32,29 @@ const references = computed<Note[]>(() => {
 </script>
 <template>
   <div class="flex flex-col">
-    <h1
-      class="mb-2 flex items-center rounded-md text-3xl font-semibold hover:bg-gray-200"
-    >
-      <i
-        class="fas fa-fw fa-home mr-2 text-base text-secondary opacity-40"
-        v-if="props.note.isRoot"
-      ></i>
-      <input
-        type="text"
-        class="flex-1 bg-transparent py-1 outline-none"
-        v-model="noteTitle"
-      />
-    </h1>
+    <div class="flex items-center mb-2">
+      <h1
+        class="flex flex-1 items-center rounded-md text-3xl font-semibold hover:bg-gray-200 mr-2"
+      >
+        <i
+          class="fas fa-fw fa-home mr-2 text-base text-secondary opacity-40"
+          v-if="props.note.isRoot"
+        ></i>
+        <input
+          type="text"
+          class="flex-1 bg-transparent py-1 outline-none"
+          v-model="noteTitle"
+        />
+      </h1>
+      <div class="btn-group flex items-center">
+        <button class="btn-sm btn">
+          <i class="fas fa-fw fa-trash" />
+        </button>
+        <button class="btn-sm btn">
+          <i class="fas fa-fw fa-sitemap" />
+        </button>
+      </div>
+    </div>
     <NoteEditor
       class="h-100 flex-1 overflow-auto"
       :note="activeNote"
@@ -75,3 +85,11 @@ const references = computed<Note[]>(() => {
     </div>
   </div>
 </template>
+<style scoped lang="scss">
+.btn-group .btn {
+  @apply border-[1px] border-neutral-200 text-opacity-70;
+  &:not(:first-child) {
+    @apply ml-[-1px];
+  }
+}
+</style>
diff --git a/src/components/NoteEditor.vue b/src/components/NoteEditor.vue
index e89580e..e7e26b3 100644
--- a/src/components/NoteEditor.vue
+++ b/src/components/NoteEditor.vue
@@ -118,7 +118,7 @@ const createLink = (link: string) => {
 <template>
   <div class="relative" ref="editorElement">
     <CKEditor
-      class="h-full"
+      class="h-full text-[110%] font-light"
       :editor="editor"
       v-model="editorData"
       :config="editorConfig"
diff --git a/src/style.scss b/src/style.scss
index 198558b..3ed4404 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -2,6 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 @import '@fontsource/source-sans-pro';
+@import '@fontsource/source-sans-pro/300';
 
 body,
 body > div,
@@ -11,7 +12,6 @@ html {
 
 body {
   font-family: 'Source Sans Pro', sans-serif;
-  font-size: 110%;
   overflow-y: auto;
 }
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 713b69f..f89fb20 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -35,7 +35,7 @@ export default {
           primary: '#1E4BC4',
           secondary: '#F000B8',
           accent: '#37CDBE',
-          neutral: '#3D4451',
+          neutral: '#F7F7F7',
           'base-100': '#FFFFFF',
           info: '#3ABFF8',
           success: '#36D399',