add buttons to note editor

src/components/Note.vue

@@ -32,8 +32,9 @@ const references = computed<Note[]>(() => {
 </script>
 <template>
   <div class="flex flex-col">
+    <div class="flex items-center mb-2">
       <h1
-      class="mb-2 flex items-center rounded-md text-3xl font-semibold hover:bg-gray-200"
+        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"
@@ -45,6 +46,15 @@ const references = computed<Note[]>(() => {
           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>

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