feature: changes from inertia project

Author: connorabbas

src/app.js

@@ -16,6 +16,7 @@ import PageTitleSection from '@/components/PageTitleSection.vue';
 
 import { useColorMode } from '@vueuse/core';
 import themePreset from '@/theme/noir-preset';
+import globalPt from './theme/global-pt';
 
 // Site light/dark mode
 const colorMode = useColorMode({ emitAuto: true });
@@ -37,6 +38,7 @@ app.provide('colorMode', colorMode)
                 },
             },
         },
+        pt: globalPt,
     })
     .use(ToastService)
     .component('Container', Container)

src/components/DeleteUserModal.vue

@@ -49,9 +49,9 @@ const deleteAccount = () => {
 <template>
     <Dialog
         v-model:visible="modalOpen"
+        class="w-[40rem]"
         position="center"
         header="Are you sure you want to delete your account?"
-        :style="{ width: '40rem' }"
         :draggable="false"
         dismissableMask
         modal

src/layouts/app/HeaderLayout.vue

@@ -72,6 +72,9 @@ const toggleMobileUserMenu = (event) => {
                     </div>
                 </template>
             </Drawer>
+            <ScrollTop
+                :buttonProps="{ class: 'fixed! right-4! bottom-4! md:right-8! md:bottom-8! z-[1000]!', rounded: true, raised: true }"
+            />
         </Teleport>
         <div class="min-h-screen">
             <!-- Primary Navigation Menu -->

src/layouts/app/SidebarLayout.vue

@@ -70,6 +70,9 @@ const toggleMobileUserMenu = (event) => {
                     </div>
                 </template>
             </Drawer>
+            <ScrollTop
+                :buttonProps="{ class: 'fixed! right-4! bottom-4! md:right-8! md:bottom-8! z-[1000]!', rounded: true, raised: true }"
+            />
         </Teleport>
 
         <!-- Mobile Header -->

src/theme/global-pt.js

@@ -0,0 +1,23 @@
+/**
+ * Global pass through styling for components
+ * https://primevue.org/passthrough/#global
+ */
+export default {
+    dialog: {
+        root: {
+            class: 'm-4 sm:m-0'
+        },
+        mask: {
+            class: 'backdrop-blur-xs'
+        },
+    },
+    toast: {
+        root: {
+            // Full width/centered on mobile, bottom right desktop
+            class: 'fixed! left-4! right-4! bottom-4! w-auto! md:right-8! md:bottom-8! sm:w-[25rem]! sm:not-fixed! sm:left-auto! sm:ml-auto!'
+        },
+        message: {
+            class: 'shadow-lg mb-0 mt-4'
+        },
+    },
+};