feature: scroll to top button, modal improvements

Author: connorabbas

resources/js/components/DeleteUserModal.vue

@@ -30,7 +30,7 @@ const deleteUser = () => {
 <template>
     <Dialog
         v-model:visible="modalOpen"
-        class="m-4 sm:m-0 w-[40rem]"
+        class="w-[40rem]"
         position="center"
         header="Are you sure you want to delete your account?"
         :draggable="false"

resources/js/layouts/app/HeaderLayout.vue

@@ -76,6 +76,11 @@ 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>
         </ClientOnly>
         <div class="min-h-screen">

resources/js/layouts/app/SidebarLayout.vue

@@ -74,6 +74,11 @@ 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>
         </ClientOnly>
 

resources/js/theme/global-pt.js

@@ -3,6 +3,14 @@
  * 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