improvements: modal styling, better error icon for flash message

Author: connorabbas

resources/js/components/DeleteUserModal.vue

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

resources/js/components/FlashMessages.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, watch } from 'vue';
 import { usePage } from '@inertiajs/vue3';
-import { Check, Info, TriangleAlert, CircleAlert, Megaphone } from 'lucide-vue-next';
+import { Check, CircleX, Info, TriangleAlert, Megaphone } from 'lucide-vue-next';
 
 const page = usePage();
 const flashed = ref(0);
@@ -56,7 +56,7 @@ watch(() => page.props.flash, () => {
             closable
         >
             <template #icon>
-                <CircleAlert />
+                <CircleX />
             </template>
             {{ page.props.flash.error }}
         </Message>