update header

src/assets/css/style.css

@@ -1731,6 +1731,11 @@ select {
   background-color: rgb(204 204 0 / var(--tw-bg-opacity));
 }
 
+.bg-gray-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-25 {
   --tw-bg-opacity: 0.25;
 }
@@ -2250,6 +2255,11 @@ select {
   color: rgb(1 36 45 / var(--tw-text-opacity));
 }
 
+.text-gray-800 {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
 .text-opacity-100 {
   --tw-text-opacity: 1;
 }

src/components/Header.vue

@@ -2,8 +2,6 @@
 <script setup lang="ts">
 import CommandPalettes from '@/components/CommandPalettes.vue'
 import MessageBox from '@/components/MessageBox.vue'
-import ActionDialog from '@/components/Dialogs/ActionDialog.vue'
-import ChangePasswordDialog from '@/components/Dialogs/ChangePasswordDialog.vue'
 import { useAuthStore } from '@/stores/auth'
 import { useUserStore } from '@/stores/user'
 import { useCommandPalattesStore } from '@/stores/command'
@@ -19,7 +17,6 @@ import {
     Bars3BottomLeftIcon
 } from '@heroicons/vue/24/outline'
 import { MagnifyingGlassIcon } from '@heroicons/vue/24/solid'
-import { onMounted, onUnmounted, ref } from 'vue'
 import PictureInitial from './PictureInitial.vue'
 import Icon from '@/assets/images/pln-with-text.png'
 import { useDialogStore } from '@/stores/dialog'
@@ -33,16 +30,6 @@ const dialog = useDialogStore()
 
 const openSideBar = () => menu.toggleSidebar()
 
-const dialogChangePassword = ref(false)
-
-const handleOnDismissDialogChangePassword = () => {
-    dialogChangePassword.value = false
-}
-
-const showDialogChangePassword = () => {
-    dialogChangePassword.value = true
-}
-
 const showDialogLogout = () => {
     dialog.type = 'error'
     dialog.title = 'Logout dari akun?'
@@ -124,34 +111,29 @@ const showDialogLogout = () => {
                         leave-from-class="transform scale-100 opacity-100" leave-to-class="transform scale-95 opacity-0">
 
                         <MenuItems
-                            class="absolute right-0 z-10 w-48 py-1 mt-2 origin-top-right bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                            class="absolute right-0 z-10 w-48 mt-2 overflow-hidden origin-top-right bg-white rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-                            <div class="flex-shrink-0 block px-4 py-2 border-b border-gray-50 group">
+                            <div class="flex-shrink-0 block px-4 py-2 border-b bg-primary-500 border-gray-50 group">
                                 <div class="flex items-center">
                                     <div>
                                         <!-- <img class="inline-block rounded-full h-9 w-9" :src="user.user_image" alt="" /> -->
                                         <PictureInitial class-name="nline-block" size-class="w-9 h-9"
-                                            background-class="bg-gray-100" font-class="font-bold text-gray-600 text-md"
+                                            background-class="bg-secondary-100"
+                                            font-class="text-xs font-normal font-semibold text-primary-500"
                                             :name="user.user_name" />
                                     </div>
-                                    <div class="ml-3">
+                                    <div class="ml-3 space-y-1">
-                                        <p class="text-sm font-medium text-gray-700 group-hover:text-gray-900">
+                                        <p class="text-sm font-medium text-primary-50 ">
                                             {{ user.user_name }}
                                         </p>
-                                        <p class="text-xs font-medium text-gray-500 group-hover:text-gray-700">
+                                        <p class="text-xs font-normal text-primary-50">
                                             {{ user.user_access }}
                                         </p>
                                     </div>
                                 </div>
                             </div>
                             <MenuItem v-slot="{ active }">
-                            <button @click="showDialogChangePassword"
-                                :class="[active ? 'bg-gray-100' : '', 'w-full text-left block px-4 py-2 text-sm text-gray-700']">
-                                Ubah Password
-                            </button>
-                            </MenuItem>
-                            <MenuItem v-slot="{ active }">
                             <button @click="showDialogLogout"
-                                :class="[active ? 'bg-gray-100' : '', 'w-full text-left block px-4 py-2 text-sm text-gray-700']">
+                                :class="[active ? 'bg-gray-100' : '', 'w-full text-left block px-4 py-3 text-base text-gray-800']">
                                 Log out
                             </button>
                             </MenuItem>
@@ -162,7 +144,6 @@ const showDialogLogout = () => {
         </div>
     </div>
 
-    <ChangePasswordDialog :open="dialogChangePassword" @onClose="handleOnDismissDialogChangePassword" />
     <CommandPalettes :open="command.open" @onClose="command.handleOnDismissCommandPalettes" />
     <MessageBox :open="message.open" @onClose="message.handleOnDismissMessageBox" />
 </template>