update styling

src/components/Note.vue

@@ -32,7 +32,7 @@ const references = computed<Note[]>(() => {
 </script>
 <template>
   <div class="flex flex-col">
-    <h1 class="mb-2 flex items-center rounded-md text-3xl hover:bg-gray-200">
+    <h1 class="mb-2 flex items-center rounded-md font-semibold text-3xl hover:bg-gray-200">
       <i
         class="fas fa-fw fa-home mr-2 text-base text-secondary opacity-40"
         v-if="props.note.isRoot"

src/components/TopBar.vue

@@ -2,7 +2,7 @@
 import Hamburger from '@/components/Hamburger.vue'
 import SearchBar from '@/components/SearchBar.vue'
 import Logo from './Logo.vue'
-import { addNote } from '@/composables/useNotes'
+import { addNote, activeNote, rootNote } from '@/composables/useNotes'
 const props = defineProps<{
   sideBarCollapsed: boolean
 }>()
@@ -24,7 +24,11 @@ const emit = defineEmits<{
           :side-bar-collapsed="props.sideBarCollapsed"
           @toggle-side-bar="emit('toggleSideBar')"
         />
-        <Logo class="ml-auto pl-5 text-2xl" />
+        <Logo
+          class="ml-auto pl-5 text-2xl hover:drop-shadow"
+          id="logo"
+          @click="activeNote = rootNote"
+        />
       </div>
       <div class="flex h-full flex-1 flex-row items-center gap-2 pl-5 pr-3">
         <SearchBar />
@@ -41,3 +45,15 @@ const emit = defineEmits<{
     </div>
   </div>
 </template>
+<style lang="css">
+#logo {
+  @apply cursor-pointer transition-all duration-200 hover:text-primary;
+}
+#logo:hover {
+  text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white, 0 0 20px #1e4bc4,
+    0 0 35px #1e4bc4, 0 0 40px #1e4bc4, 0 0 50px #1e4bc4, 0 0 75px #1e4bc4;
+}
+.btn-outline {
+  @apply hover:border-white hover:bg-white hover:text-primary focus-visible:outline-white;
+}
+</style>