design: confirm message with daisyui design

src/hooks/useGitHubContent.hook.ts

@@ -33,11 +33,11 @@ export const useGitHubContent = ({
         }
       )
 
-      confirmMessage('Note saved')
+      confirmMessage('✅ Note saved')
 
       return response?.data.content?.sha ?? null
     } catch (error) {
-      errorMessage('Note could not be saved')
+      errorMessage('❌ Note could not be saved')
       console.warn(error)
     }
 

src/hooks/useGitHubLogin.hook.ts

@@ -19,7 +19,7 @@ const saveCredentials = async (token: GithubToken): Promise<void> => {
   const accessToken = await saveAccessToken(token)
 
   await saveAccessTokenToLocal()
-  confirmMessage(`${accessToken.username} is logged in!`)
+  confirmMessage(`✅ ${accessToken.username} is logged in!`)
 }
 
 export const useGitHubLogin = () => {

src/main.ts

@@ -1,5 +1,5 @@
-import './styles/app.css'
 import 'notyf/notyf.min.css'
+import './styles/app.css'
 
 import { createPinia } from 'pinia'
 import { createApp } from 'vue'

src/modules/note/components/CacheAllNote.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { useOfflineNotes } from '@/hooks/useOfflineNotes.hook'
+import { confirmMessage } from '@/utils/notif'
 
 const { cacheAllNotes, isLoading, totalOfNotes, noteCompleted } =
   useOfflineNotes()
 
-const confirmBeforeCachingAllNotes = () => {
+const confirmBeforeCachingAllNotes = async () => {
   confirm('Do you want to cache all notes?')
-  cacheAllNotes()
+  await cacheAllNotes()
+  confirmMessage('✅ All notes have been locally saved')
 }
 </script>
 

src/styles/app.css

@@ -60,9 +60,13 @@ a {
   }
 }
 
-.notif-success {
-  background-color: oklch(var(--a));
-  color: oklch(var(--ac));
+.notyf__wrapper {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.alert {
+  max-width: 500px;
 }
 
 .repo-note {

src/utils/notif.ts

@@ -3,8 +3,12 @@ import { Notyf } from 'notyf'
 const notif = new Notyf({
   types: [
     {
-      className: 'notif-success',
+      className: 'prose alert alert-success',
       type: 'confirm'
+    },
+    {
+      className: 'prose alert alert-error',
+      type: 'error'
     }
   ]
 })
@@ -15,4 +19,5 @@ export const confirmMessage = (message: string) =>
     message
   })
 
-export const errorMessage = (message: string) => notif.error(message)
+export const errorMessage = (message: string) =>
+  notif.open({ type: 'error', message })