update signout dialog

src/components/TopBar.vue

@@ -28,7 +28,7 @@ const authModalInitialStateOpen = ref<boolean>(authUI.isPendingRedirect())
   >
     <div class="mx-auto flex w-full max-w-app items-center py-2.5 text-white">
       <div
-        class="flex items-center pl-3 search-active-hide"
+        class="search-active-hide flex items-center pl-3"
         :class="sideBarCollapsed ? 'w-fit' : 'max-sm:w-fit md:w-sidebar md:pr-3'"
       >
         <Hamburger
@@ -45,14 +45,19 @@ const authModalInitialStateOpen = ref<boolean>(authUI.isPendingRedirect())
         <template v-if="initialized">
           <SearchBar @active="(active) => (searchActive = active)" />
           <button
-            class="btn-outline btn-sm btn py-1 text-white search-active-hide"
+            class="search-active-hide btn-outline btn-sm btn py-1 text-white"
             @click="addNote('Untitled new note', '', true)"
           >
             <i class="fas fa-plus-circle text-[1.1rem]" />
           </button>
           <Modal v-if="initialized && !user" :open="authModalInitialStateOpen">
             <template #activator="{ open }">
-              <button class="btn-outline btn-sm btn py-1 text-white search-active-hide" @click="open">Sign in</button>
+              <button
+                class="search-active-hide btn-outline btn-sm btn py-1 text-white"
+                @click="open"
+              >
+                Sign in
+              </button>
             </template>
             <template #title>Sign in</template>
             <template #default="{ close }">
@@ -63,7 +68,7 @@ const authModalInitialStateOpen = ref<boolean>(authUI.isPendingRedirect())
             </template>
           </Modal>
           <template v-else-if="user">
-            <div class="dropdown-end dropdown search-active-hide">
+            <div class="search-active-hide dropdown-end dropdown">
               <label tabindex="0" class="btn-outline btn-sm btn py-1 text-white">
                 <i class="fa-fw fa-solid fa-user-gear" />
               </label>
@@ -81,7 +86,10 @@ const authModalInitialStateOpen = ref<boolean>(authUI.isPendingRedirect())
                     </li>
                   </template>
                   <template #title>Sign out</template>
-                  <template #default>Are you sure want to signout?</template>
+                  <template #default>
+                    <p>Are you sure want to signout?</p>
+                    <p>Your synchronized notes can't be accessed until you sign-in again.</p>
+                  </template>
                   <template #actions="{ close }">
                     <button class="btn-sm btn" @click="close">Cancel</button>
                     <button class="btn-primary btn-sm btn" @click="signOut(close)">Sign out</button>

src/style.scss

@@ -19,6 +19,12 @@ body {
   }
 }
 
+p:not(:last-child) {
+  @apply mb-2;
+  margin-top: 0 !important;
+  // margin-block: 0;
+}
+
 .btn {
   animation-duration: 0s;
 }
@@ -39,11 +45,6 @@ body {
   ul {
     @apply list-disc;
   }
-  p {
-    @apply mb-2;
-    margin-top: 0 !important;
-    // margin-block: 0;
-  }
   h1,
   h2,
   h3,