add buttons to note editor

src/components/Note.vue

@@ -32,19 +32,29 @@ const references = computed<Note[]>(() => {
 </script>
 <template>
   <div class="flex flex-col">
-    <h1
+    <div class="flex items-center mb-2">
-      class="mb-2 flex items-center rounded-md text-3xl font-semibold hover:bg-gray-200"
+      <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"
+        <i
-        v-if="props.note.isRoot"
+          class="fas fa-fw fa-home mr-2 text-base text-secondary opacity-40"
-      ></i>
+          v-if="props.note.isRoot"
-      <input
+        ></i>
-        type="text"
+        <input
-        class="flex-1 bg-transparent py-1 outline-none"
+          type="text"
-        v-model="noteTitle"
+          class="flex-1 bg-transparent py-1 outline-none"
-      />
+          v-model="noteTitle"
-    </h1>
+        />
+      </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>

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"

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;
 }
 

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',