fix active color

src/components/Note/NoteToolbar.vue

@@ -58,7 +58,12 @@ const openModal = async (open: () => void, modal: ModalOptions) => {
     <UIButtonGroup class="flex items-center" v-if="!props.note.isRoot">
       <UIModal v-for="confirmModal in confirmModals" :key="confirmModal.key">
         <template #activator="{ open }">
-          <UIButton size="sm" @click="openModal(open, confirmModal)" :join="true" @mousedown="vibrate">
+          <UIButton
+            size="sm"
+            @click="openModal(open, confirmModal)"
+            :join="true"
+            @mousedown="vibrate"
+          >
             <i :class="confirmModal.icon" />
           </UIButton>
         </template>

src/components/TopBar.vue

@@ -60,7 +60,7 @@ const handleSignIn = async (close: () => Promise<boolean>) => {
           >
             <i class="fa-fw fa-solid fa-plus-circle scale-[115%]" />
           </UIButton>
-          <UIModal v-if="(initialized && !user)">
+          <UIModal v-if="initialized && !user">
             <template #activator="{ open }">
               <UIButton
                 size="sm"
@@ -101,7 +101,7 @@ const handleSignIn = async (close: () => Promise<boolean>) => {
 }
 .topbar-button {
   &:active {
-    @apply border-white bg-white text-primary
+    @apply border-white bg-white text-primary;
   }
   @apply hover:border-white hover:bg-white hover:text-primary focus-visible:outline-white;
 }

src/components/ui/UIMenuItem.vue

@@ -16,7 +16,9 @@ const styleClass = computed(() => {
 </script>
 <template>
   <li :class="styleClass">
-    <span class="flex items-center" v-if="props.title"><slot></slot></span>
+    <span class="flex items-center" v-if="props.title">
+      <slot></slot>
+    </span>
     <a
       class="flex w-full rounded-md"
       :class="{ 'dui-disabled': props.disabled, 'dui-active': props.active }"
@@ -26,3 +28,8 @@ const styleClass = computed(() => {
     </a>
   </li>
 </template>
+<style scoped>
+.dui-active {
+  @apply bg-primary;
+}
+</style>

src/composables/useHaptics.ts

@@ -1,3 +1,3 @@
 import { Haptics, ImpactStyle } from '@capacitor/haptics'
 
-export const vibrate = () => Haptics.impact({ style: ImpactStyle.Light })
+export const vibrate = () => Haptics.impact({ style: ImpactStyle.Light })