From c76e8bb0def1c12a100a2814614dbf799c0352b2 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Wed, 31 Jan 2024 16:14:12 +0100
Subject: [PATCH] fix: migrate to new modal

---
 app/Livewire/Team/Storage/Create.php          |  3 +-
 app/Livewire/Team/Storage/Form.php            |  4 +-
 app/Models/EnvironmentVariable.php            |  2 +-
 .../views/components/new-modal.blade.php      | 14 +--
 resources/views/components/toast.blade.php    |  8 +-
 .../views/livewire/destination/form.blade.php | 11 +--
 .../livewire/destination/new/docker.blade.php |  2 +-
 .../livewire/project/shared/danger.blade.php  | 11 +--
 .../environment-variable/show.blade.php       | 27 +++---
 .../project/shared/get-logs.blade.php         |  6 +-
 .../shared/scheduled-task/show.blade.php      | 15 +---
 .../project/shared/storages/show.blade.php    | 17 ++--
 .../security/private-key/show.blade.php       | 11 +--
 .../views/livewire/server/delete.blade.php    | 21 ++---
 .../views/livewire/server/form.blade.php      | 12 ++-
 .../livewire/source/github/change.blade.php   | 17 ++--
 resources/views/livewire/team/index.blade.php | 11 +--
 .../livewire/team/storage/form.blade.php      | 12 +--
 resources/views/vendor/toaster/hub.blade.php  | 90 -------------------
 19 files changed, 75 insertions(+), 219 deletions(-)
 delete mode 100644 resources/views/vendor/toaster/hub.blade.php

diff --git a/app/Livewire/Team/Storage/Create.php b/app/Livewire/Team/Storage/Create.php
index 82f93320b..a25fc9821 100644
--- a/app/Livewire/Team/Storage/Create.php
+++ b/app/Livewire/Team/Storage/Create.php
@@ -67,7 +67,8 @@ public function submit()
             $this->storage->save();
             return redirect()->route('team.storage.show', $this->storage->uuid);
         } catch (\Throwable $e) {
-            return handleError($e, $this);
+            $this->dispatch('error', 'Failed to create storage.', $e->getMessage());
+            // return handleError($e, $this);
         }
     }
 }
diff --git a/app/Livewire/Team/Storage/Form.php b/app/Livewire/Team/Storage/Form.php
index 8a26a3471..1fd0d470b 100644
--- a/app/Livewire/Team/Storage/Form.php
+++ b/app/Livewire/Team/Storage/Form.php
@@ -33,9 +33,9 @@ public function test_s3_connection()
     {
         try {
             $this->storage->testConnection(shouldSave: true);
-            return $this->dispatch('success', 'Connection is working. Tested with "ListObjectsV2" action.');
+            return $this->dispatch('success', 'Connection is working.', 'Tested with "ListObjectsV2" action.');
         } catch (\Throwable $e) {
-            return handleError($e, $this);
+            $this->dispatch('error', 'Failed to create storage.', $e->getMessage());
         }
     }
 
diff --git a/app/Models/EnvironmentVariable.php b/app/Models/EnvironmentVariable.php
index fafa6f30c..a3611a0c6 100644
--- a/app/Models/EnvironmentVariable.php
+++ b/app/Models/EnvironmentVariable.php
@@ -91,7 +91,7 @@ protected function isShared(): Attribute
     }
     private function get_real_environment_variables(?string $environment_variable = null, $resource = null): string|null
     {
-        if (!$environment_variable) {
+        if (!$environment_variable || !$resource) {
             return null;
         }
         $environment_variable = trim($environment_variable);
diff --git a/resources/views/components/new-modal.blade.php b/resources/views/components/new-modal.blade.php
index b542d77ac..6c6dcc3e3 100644
--- a/resources/views/components/new-modal.blade.php
+++ b/resources/views/components/new-modal.blade.php
@@ -17,19 +17,19 @@ class="relative w-auto h-auto">
     <template x-teleport="body">
         <div x-show="modalOpen" class="fixed top-0 left-0 z-[99] flex items-center justify-center w-screen h-screen"
             x-cloak>
-            <div x-show="modalOpen" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0"
-                x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-300"
+            <div x-show="modalOpen" x-transition:enter="ease-out duration-100" x-transition:enter-start="opacity-0"
+                x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-100"
                 x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" @click="modalOpen=false"
-                class="absolute inset-0 w-full h-full bg-black backdrop-blur-sm bg-opacity-70"></div>
-            <div x-show="modalOpen" x-trap.inert.noscroll="modalOpen" x-transition:enter="ease-out duration-300"
+                class="absolute inset-0 w-full h-full bg-black bg-opacity-20 backdrop-blur-sm"></div>
+            <div x-show="modalOpen" x-trap.inert.noscroll="modalOpen" x-transition:enter="ease-out duration-100"
                 x-transition:enter-start="opacity-0 -translate-y-2 sm:scale-95"
                 x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
-                x-transition:leave="ease-in duration-200"
+                x-transition:leave="ease-in duration-100"
                 x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
                 x-transition:leave-end="opacity-0 -translate-y-2 sm:scale-95"
-                class="relative w-full py-6 border shadow-lg bg-coolgray-100 px-7 border-coolgray-300 sm:max-w-lg sm:rounded-lg">
+                class="relative w-full py-6 border rounded shadow-lg bg-coolgray-100 px-7 border-coolgray-300 sm:max-w-lg">
                 <div class="flex items-center justify-between pb-3">
-                    <h3 class="text-lg font-semibold">{{ $title }}</h3>
+                    <h3 class="text-2xl font-bold">{{ $title }}</h3>
                     <button @click="modalOpen=false"
                         class="absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5 text-white rounded-full hover:bg-coolgray-300">
                         <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
diff --git a/resources/views/components/toast.blade.php b/resources/views/components/toast.blade.php
index f28bbc5eb..4be15e201 100644
--- a/resources/views/components/toast.blade.php
+++ b/resources/views/components/toast.blade.php
@@ -369,10 +369,10 @@ class="fixed block w-full group z-[99] sm:max-w-xs"
                     }, 5);
                 }, 4000);"
                     @mouseover="toastHovered=true" @mouseout="toastHovered=false"
-                    class="absolute w-full duration-200 ease-out select-none sm:max-w-xs"
+                    class="absolute w-full duration-100 ease-out sm:max-w-xs"
                     :class="{ 'toast-no-description': !toast.description }">
                     <span
-                        class="relative flex flex-col items-start shadow-[0_5px_15px_-3px_rgb(0_0_0_/_0.08)] w-full transition-all duration-200 ease-out bg-coolgray-200 border border-coolgray-100 sm:rounded-md sm:max-w-xs group"
+                        class="relative flex flex-col items-start shadow-[0_5px_15px_-3px_rgb(0_0_0_/_0.08)] w-full transition-all duration-100 ease-out bg-coolgray-100 border border-coolgray-200 rounded sm:max-w-xs group"
                         :class="{ 'p-4': !toast.html, 'p-0': toast.html }">
                         <template x-if="!toast.html">
                             <div class="relative">
@@ -403,12 +403,12 @@ class="relative flex flex-col items-start shadow-[0_5px_15px_-3px_rgb(0_0_0_/_0.
                                             d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM11.9996 7C12.5519 7 12.9996 7.44772 12.9996 8V12C12.9996 12.5523 12.5519 13 11.9996 13C11.4474 13 10.9996 12.5523 10.9996 12V8C10.9996 7.44772 11.4474 7 11.9996 7ZM12.001 14.99C11.4488 14.9892 11.0004 15.4363 10.9997 15.9886L10.9996 15.9986C10.9989 16.5509 11.446 16.9992 11.9982 17C12.5505 17.0008 12.9989 16.5537 12.9996 16.0014L12.9996 15.9914C13.0004 15.4391 12.5533 14.9908 12.001 14.99Z"
                                             fill="currentColor"></path>
                                     </svg>
-                                    <p class="font-bold leading-2 text-neutral-200"
+                                    <p class="leading-2 text-neutral-200"
                                         x-html="toast.message">
                                     </p>
                                 </div>
                                 <p x-show="toast.description" :class="{ 'pl-5': toast.type!='default' }"
-                                    class="mt-1.5 text-xs leading-2 opacity-90" x-html="toast.description"></p>
+                                    class="mt-1.5 text-xs leading-2 opacity-90 whitespace-pre-wrap" x-html="toast.description"></p>
                             </div>
                         </template>
                         <template x-if="toast.html">
diff --git a/resources/views/livewire/destination/form.blade.php b/resources/views/livewire/destination/form.blade.php
index 610423a21..6f4bab053 100644
--- a/resources/views/livewire/destination/form.blade.php
+++ b/resources/views/livewire/destination/form.blade.php
@@ -1,9 +1,4 @@
 <div>
-    <x-modal yesOrNo modalId="deleteDestination" modalTitle="Delete Destination">
-        <x-slot:modalBody>
-            <p>This destination will be deleted. It is not reversible. <br>Please think again.</p>
-        </x-slot:modalBody>
-    </x-modal>
     <form class="flex flex-col">
         <div class="flex items-center gap-2">
             <h1>Destination</h1>
@@ -11,9 +6,9 @@
                 Save
             </x-forms.button>
             @if ($destination->network !== 'coolify')
-                <x-forms.button isError isModal modalId="deleteDestination">
-                    Delete
-                </x-forms.button>
+                <x-new-modal isErrorButton buttonTitle="Delete Destination">
+                    This destination will be deleted. It is not reversible. <br>Please think again.
+                </x-new-modal>
             @endif
         </div>
 
diff --git a/resources/views/livewire/destination/new/docker.blade.php b/resources/views/livewire/destination/new/docker.blade.php
index dc9a48b00..4ac821a69 100644
--- a/resources/views/livewire/destination/new/docker.blade.php
+++ b/resources/views/livewire/destination/new/docker.blade.php
@@ -14,7 +14,7 @@
         </x-forms.select>
         {{-- <x-forms.checkbox type="checkbox" id="is_swarm" label="Is it a Swarm network?" /> --}}
         <x-forms.button type="submit">
-            Save Destination
+            Continue
         </x-forms.button>
     </form>
 </div>
diff --git a/resources/views/livewire/project/shared/danger.blade.php b/resources/views/livewire/project/shared/danger.blade.php
index 36e91dff1..83a1bd880 100644
--- a/resources/views/livewire/project/shared/danger.blade.php
+++ b/resources/views/livewire/project/shared/danger.blade.php
@@ -1,16 +1,11 @@
 <div>
-    <x-modal yesOrNo modalId="{{ $modalId }}" modalTitle="Delete Resource">
-        <x-slot:modalBody>
-            <p>This resource will be deleted. It is not reversible. <br>Please think again.</p>
-        </x-slot:modalBody>
-    </x-modal>
     <h2>Danger Zone</h2>
     <div class="">Woah. I hope you know what are you doing.</div>
     <h4 class="pt-4">Delete Resource</h4>
     <div class="pb-4">This will stop your containers, delete all related data, etc. Beware! There is no coming
         back!
     </div>
-    <x-forms.button isError isModal modalId="{{ $modalId }}">
-        Delete
-    </x-forms.button>
+    <x-new-modal isErrorButton buttonTitle="Delete">
+        This resource will be deleted. It is not reversible. <br>Please think again.
+    </x-new-modal>
 </div>
diff --git a/resources/views/livewire/project/shared/environment-variable/show.blade.php b/resources/views/livewire/project/shared/environment-variable/show.blade.php
index 7a80e4979..5b2c95373 100644
--- a/resources/views/livewire/project/shared/environment-variable/show.blade.php
+++ b/resources/views/livewire/project/shared/environment-variable/show.blade.php
@@ -1,10 +1,4 @@
 <div>
-    <x-modal yesOrNo modalId="{{ $modalId }}" modalTitle="Delete Environment Variable">
-        <x-slot:modalBody>
-            <p>Are you sure you want to delete this environment variable <span
-                    class="font-bold text-warning">({{ $env->key }})</span>?</p>
-        </x-slot:modalBody>
-    </x-modal>
     <form wire:submit='submit'
         class="flex flex-col gap-2 p-4 m-2 border lg:items-center border-coolgray-300 lg:m-0 lg:p-0 lg:border-0 lg:flex-row">
         @if ($isLocked)
@@ -38,9 +32,10 @@ class="flex flex-col gap-2 p-4 m-2 border lg:items-center border-coolgray-300 lg
         @endif
         <div class="flex gap-2">
             @if ($isLocked)
-                <x-forms.button isError isModal modalId="{{ $modalId }}">
-                    Delete
-                </x-forms.button>
+                <x-new-modal isErrorButton buttonTitle="Delete">
+                    You will delete environment variable <span
+                        class="font-bold text-warning">{{ $env->key }}</span>.
+                </x-new-modal>
             @else
                 @if ($isDisabled)
                     <x-forms.button disabled type="submit">
@@ -49,9 +44,10 @@ class="flex flex-col gap-2 p-4 m-2 border lg:items-center border-coolgray-300 lg
                     <x-forms.button wire:click='lock'>
                         Lock
                     </x-forms.button>
-                    <x-forms.button disabled isError isModal modalId="{{ $modalId }}">
-                        Delete
-                    </x-forms.button>
+                    <x-new-modal isErrorButton buttonTitle="Delete">
+                        You will delete environment variable <span
+                            class="font-bold text-warning">{{ $env->key }}</span>.
+                    </x-new-modal>
                 @else
                     <x-forms.button type="submit">
                         Update
@@ -59,9 +55,10 @@ class="flex flex-col gap-2 p-4 m-2 border lg:items-center border-coolgray-300 lg
                     <x-forms.button wire:click='lock'>
                         Lock
                     </x-forms.button>
-                    <x-forms.button isError isModal modalId="{{ $modalId }}">
-                        Delete
-                    </x-forms.button>
+                    <x-new-modal isErrorButton buttonTitle="Delete">
+                        You will delete environment variable <span
+                            class="font-bold text-warning">{{ $env->key }}</span>.
+                    </x-new-modal>
                 @endif
             @endif
         </div>
diff --git a/resources/views/livewire/project/shared/get-logs.blade.php b/resources/views/livewire/project/shared/get-logs.blade.php
index 4700bc353..959aa8fa5 100644
--- a/resources/views/livewire/project/shared/get-logs.blade.php
+++ b/resources/views/livewire/project/shared/get-logs.blade.php
@@ -13,7 +13,7 @@
         <x-forms.input label="Only Show Number of Lines" placeholder="1000" required id="numberOfLines"></x-forms.input>
         <x-forms.button type="submit">Refresh</x-forms.button>
     </form>
-    <div id="screen" x-data="{ fullscreen: false, alwaysScroll: false, intervalId: null }" :class="fullscreen ? 'fullscreen' : 'container w-full py-4 mx-auto'">
+    <div id="screen" x-data="{ fullscreen: false, alwaysScroll: false, intervalId: null }" :class="fullscreen ? 'fullscreen' : 'w-full py-4 mx-auto'">
         <div class="relative flex flex-col-reverse w-full p-4 pt-6 overflow-y-auto text-white bg-coolgray-100 scrollbar border-coolgray-300"
             :class="fullscreen ? '' : 'max-h-[40rem] border border-solid rounded'">
             <button title="Minimize" x-show="fullscreen" class="fixed top-4 right-4" x-on:click="makeFullscreen"><svg
@@ -33,8 +33,8 @@ class="fixed top-4 right-16" x-on:click="toggleScroll"><svg class="icon" viewBox
                         stroke-width="2" d="M12 5v14m4-4l-4 4m-4-4l4 4" />
                 </svg></button>
 
-            <button title="Fullscreen" x-show="!fullscreen" class="absolute top-2 right-8"
-                x-on:click="makeFullscreen"><svg class="fixed icon" viewBox="0 0 24 24"
+            <button title="Fullscreen" x-show="!fullscreen" class="absolute top-2 right-2"
+                x-on:click="makeFullscreen"><svg class=" icon" viewBox="0 0 24 24"
                     xmlns="http://www.w3.org/2000/svg">
                     <g fill="none">
                         <path
diff --git a/resources/views/livewire/project/shared/scheduled-task/show.blade.php b/resources/views/livewire/project/shared/scheduled-task/show.blade.php
index 95b7dbc6d..74fcc3085 100644
--- a/resources/views/livewire/project/shared/scheduled-task/show.blade.php
+++ b/resources/views/livewire/project/shared/scheduled-task/show.blade.php
@@ -1,11 +1,4 @@
 <div>
-    <x-modal yesOrNo modalId="{{ $modalId }}" modalTitle="Delete Scheduled Task">
-        <x-slot:modalBody>
-            <p>Are you sure you want to delete this scheduled task <span
-                    class="font-bold text-warning">({{ $task->name }})</span>?</p>
-        </x-slot:modalBody>
-    </x-modal>
-
     <h1>Scheduled Task</h1>
     @if ($type === 'application')
         <livewire:project.application.heading :application="$resource" />
@@ -20,11 +13,9 @@ class="font-bold text-warning">({{ $task->name }})</span>?</p>
                 <x-forms.button type="submit">
                     Save
                 </x-forms.button>
-
-                <x-forms.button isError isModal modalId="{{ $modalId }}">
-                    Delete
-                </x-forms.button>
-
+                <x-new-modal isErrorButton buttonTitle="Delete Scheduled Task">
+                    You will delete scheduled task <span class="font-bold text-warning">{{ $task->name }}</span>.
+                </x-new-modal>
             </div>
         </div>
         <div class="flex w-full gap-2">
diff --git a/resources/views/livewire/project/shared/storages/show.blade.php b/resources/views/livewire/project/shared/storages/show.blade.php
index 4a804bf91..e15ac8859 100644
--- a/resources/views/livewire/project/shared/storages/show.blade.php
+++ b/resources/views/livewire/project/shared/storages/show.blade.php
@@ -1,12 +1,4 @@
 <div>
-    <x-modal yesOrNo modalId="{{ $modalId }}" modalTitle="Delete Storage">
-        <x-slot:modalBody>
-            <p>This storage will be deleted <span class="font-bold text-warning">({{ $storage->name }})</span>. It is
-                not
-                reversible. <br>Please think again.</p>
-        </x-slot:modalBody>
-    </x-modal>
-
     <form wire:submit='submit' class="flex flex-col gap-2 xl:items-end xl:flex-row">
         @if ($isReadOnly)
             @if ($isFirst)
@@ -32,9 +24,12 @@
                 <x-forms.button type="submit">
                     Update
                 </x-forms.button>
-                <x-forms.button isError isModal modalId="{{ $modalId }}">
-                    Delete
-                </x-forms.button>
+                <x-new-modal isErrorButton buttonTitle="Delete">
+                    This storage will be deleted <span class="font-bold text-warning">{{ $storage->name }}</span>. It
+                    is
+                    not
+                    reversible. <br>Please think again.
+                </x-new-modal>
             </div>
         @endif
     </form>
diff --git a/resources/views/livewire/security/private-key/show.blade.php b/resources/views/livewire/security/private-key/show.blade.php
index 79f14bdcc..75f195de8 100644
--- a/resources/views/livewire/security/private-key/show.blade.php
+++ b/resources/views/livewire/security/private-key/show.blade.php
@@ -1,11 +1,6 @@
 <div>
     <x-security.navbar />
     <div x-data="{ showPrivateKey: false }">
-        <x-modal yesOrNo modalId="deletePrivateKey" modalTitle="Delete Private Key">
-            <x-slot:modalBody>
-                <p>This private key will be deleted. It is not reversible. <br>Please think again.</p>
-            </x-slot:modalBody>
-        </x-modal>
         <form class="flex flex-col gap-2" wire:submit='changePrivateKey'>
             <div class="flex items-end gap-2">
                 <h2>Private Key</h2>
@@ -13,9 +8,9 @@
                     Save
                 </x-forms.button>
                 @if (data_get($private_key, 'id') > 0)
-                    <x-forms.button isError isModal modalId="deletePrivateKey">
-                        Delete
-                    </x-forms.button>
+                    <x-new-modal isErrorButton buttonTitle="Delete">
+                        This private key will be deleted. It is not reversible. <br>Please think again.
+                    </x-new-modal>
                 @endif
             </div>
             <x-forms.input id="private_key.name" label="Name" required />
diff --git a/resources/views/livewire/server/delete.blade.php b/resources/views/livewire/server/delete.blade.php
index 5950ba08a..ab0d7e060 100644
--- a/resources/views/livewire/server/delete.blade.php
+++ b/resources/views/livewire/server/delete.blade.php
@@ -1,9 +1,4 @@
 <div>
-    <x-modal yesOrNo modalId="deleteServer" modalTitle="Delete Server">
-        <x-slot:modalBody>
-            <p>This server will be deleted. It is not reversible. <br>Please think again..</p>
-        </x-slot:modalBody>
-    </x-modal>
     @if ($server->id !== 0)
         <h2 class="pt-4">Danger Zone</h2>
         <div class="">Woah. I hope you know what are you doing.</div>
@@ -12,13 +7,13 @@
             back!
         </div>
         @if ($server->definedResources()->count() > 0)
-            <x-forms.button disabled isError isModal modalId="deleteServer">
-                Delete
-            </x-forms.button>
+            <x-new-modal disabled isErrorButton buttonTitle="Delete">
+                This server will be deleted. It is not reversible. <br>Please think again.
+            </x-new-modal>
         @else
-            <x-forms.button isError isModal modalId="deleteServer">
-                Delete
-            </x-forms.button>
+            <x-new-modal isErrorButton buttonTitle="Delete">
+                This server will be deleted. It is not reversible. <br>Please think again.
+            </x-new-modal>
         @endif
         <div class="flex flex-col">
             @forelse ($server->definedResources() as $resource)
@@ -26,7 +21,7 @@
                     <h3 class="pt-4">Resources</h3>
                 @endif
                 @if ($resource->link())
-                    <a  class="flex gap-2 p-1 hover:bg-coolgray-100 hover:no-underline" href="{{ $resource->link() }}">
+                    <a class="flex gap-2 p-1 hover:bg-coolgray-100 hover:no-underline" href="{{ $resource->link() }}">
                         <div class="w-64">{{ str($resource->type())->headline() }}</div>
                         <div>{{ $resource->name }}</div>
                     </a>
@@ -46,7 +41,7 @@
                     <h3 class="pt-4">Resources</h3>
                 @endif
                 @if ($resource->link())
-                    <a  class="flex gap-2 p-1 hover:bg-coolgray-100 hover:no-underline" href="{{ $resource->link() }}">
+                    <a class="flex gap-2 p-1 hover:bg-coolgray-100 hover:no-underline" href="{{ $resource->link() }}">
                         <div class="w-64">{{ str($resource->type())->headline() }}</div>
                         <div>{{ $resource->name }}</div>
                     </a>
diff --git a/resources/views/livewire/server/form.blade.php b/resources/views/livewire/server/form.blade.php
index f792bb2d6..2e3213341 100644
--- a/resources/views/livewire/server/form.blade.php
+++ b/resources/views/livewire/server/form.blade.php
@@ -1,15 +1,13 @@
 <div>
-    <x-modal yesOrNo modalId="changeLocalhost" modalTitle="Change Localhost" action="submit">
-        <x-slot:modalBody>
-            <p>You could lost a lot of functionalities if you change the server details of the server where Coolify is
-                running on.<br>Please think again.</p>
-        </x-slot:modalBody>
-    </x-modal>
     <form wire:submit='submit' class="flex flex-col">
         <div class="flex gap-2">
             <h2>General</h2>
             @if ($server->id === 0)
-                <x-forms.button isModal modalId="changeLocalhost">Save</x-forms.button>
+                <x-new-modal buttonTitle="Save" title="Change Localhost" action="submit">
+                    You could lost a lot of functionalities if you change the server details of the server where Coolify
+                    is
+                    running on.<br>Please think again.
+                </x-new-modal>
             @else
                 <x-forms.button type="submit">Save</x-forms.button>
             @endif
diff --git a/resources/views/livewire/source/github/change.blade.php b/resources/views/livewire/source/github/change.blade.php
index 2aef98c75..941d616c8 100644
--- a/resources/views/livewire/source/github/change.blade.php
+++ b/resources/views/livewire/source/github/change.blade.php
@@ -1,9 +1,4 @@
 <div>
-    <x-modal yesOrNo modalId="deleteSource" modalTitle="Delete Source">
-        <x-slot:modalBody>
-            <p>This source will be deleted. It is not reversible. <br>Please think again.</p>
-        </x-slot:modalBody>
-    </x-modal>
     @if (data_get($github_app, 'app_id'))
         <form wire:submit='submit'>
             <div class="flex items-center gap-2">
@@ -18,9 +13,9 @@
                             </x-forms.button>
                         </a>
                     @endif
-                    <x-forms.button isError isModal modalId="deleteSource">
-                        Delete
-                    </x-forms.button>
+                    <x-new-modal isErrorButton buttonTitle="Delete">
+                        This source will be deleted. It is not reversible. <br>Please think again.
+                    </x-new-modal>
                 </div>
             </div>
             <div class="subtitle">Your Private GitHub App for private repositories.</div>
@@ -77,9 +72,9 @@
         <div class="flex items-center gap-2 pb-4">
             <h1>GitHub App</h1>
             <div class="flex gap-2">
-                <x-forms.button isError isModal modalId="deleteSource">
-                    Delete
-                </x-forms.button>
+                <x-new-modal isErrorButton buttonTitle="Delete">
+                    This source will be deleted. It is not reversible. <br>Please think again.
+                </x-new-modal>
             </div>
         </div>
         <div class="mb-10 rounded alert alert-warning">
diff --git a/resources/views/livewire/team/index.blade.php b/resources/views/livewire/team/index.blade.php
index 20e164193..64421f657 100644
--- a/resources/views/livewire/team/index.blade.php
+++ b/resources/views/livewire/team/index.blade.php
@@ -28,11 +28,6 @@
         </div>
     @endif
     <div>
-        <x-modal yesOrNo modalId="deleteTeam" modalTitle="Delete Team">
-            <x-slot:modalBody>
-                <p>This team be deleted. It is not reversible. <br>Please think again.</p>
-            </x-slot:modalBody>
-        </x-modal>
         <h2>Danger Zone</h2>
         <div class="pb-4">Woah. I hope you know what are you doing.</div>
         <h4 class="pb-4">Delete Team</h4>
@@ -45,9 +40,9 @@
         @else
             @if (currentTeam()->isEmpty())
                 <div class="pb-4">This will delete your team. Beware! There is no coming back!</div>
-                <x-forms.button isError isModal modalId="deleteTeam">
-                    Delete
-                </x-forms.button>
+                <x-new-modal isErrorButton buttonTitle="Delete">
+                    This team be deleted. It is not reversible. <br>Please think again.
+                </x-new-modal>
             @else
                 <div>
                     <div class="pb-4">You need to delete the following resources to be able to delete the team:</div>
diff --git a/resources/views/livewire/team/storage/form.blade.php b/resources/views/livewire/team/storage/form.blade.php
index c014324cd..c6707b85a 100644
--- a/resources/views/livewire/team/storage/form.blade.php
+++ b/resources/views/livewire/team/storage/form.blade.php
@@ -1,10 +1,4 @@
 <div>
-    <x-modal yesOrNo modalId="deleteS3Storage" modalTitle="Delete S3 Storage">
-        <x-slot:modalBody>
-            <p>This storage will be deleted. It is not reversible. Your data won't be touched!<br>Please think again..
-            </p>
-        </x-slot:modalBody>
-    </x-modal>
     <form class="flex flex-col gap-2 pb-6" wire:submit='submit'>
         <div class="flex items-start gap-2">
             <div class="pb-4">
@@ -22,9 +16,9 @@
             <x-forms.button wire:click="test_s3_connection">
                 Validate Connection
             </x-forms.button>
-            <x-forms.button isError isModal modalId="deleteS3Storage">
-                Delete
-            </x-forms.button>
+            <x-new-modal isErrorButton buttonTitle="Delete">
+                This storage will be deleted. It is not reversible. Your data won't be touched!<br>Please think again.
+            </x-new-modal>
         </div>
         <div class="flex gap-2">
             <x-forms.input label="Name" id="storage.name" />
diff --git a/resources/views/vendor/toaster/hub.blade.php b/resources/views/vendor/toaster/hub.blade.php
deleted file mode 100644
index 3bca749b6..000000000
--- a/resources/views/vendor/toaster/hub.blade.php
+++ /dev/null
@@ -1,90 +0,0 @@
-<div role="status" id="toaster" x-data="toasterHub(@js($toasts), @js($config))" @class([
-    'fixed z-50 p-4 w-full flex flex-col pointer-events-none sm:p-6',
-    'bottom-0' => $alignment->is('bottom'),
-    'top-1/2 -translate-y-1/2' => $alignment->is('middle'),
-    'top-0' => $alignment->is('top'),
-    'items-start' => $position->is('left'),
-    'items-center' => $position->is('center'),
-    'items-end' => $position->is('right'),
-])>
-    <template x-for="toast in toasts" :key="toast.id">
-        <div x-show="toast.isVisible" x-init="$nextTick(() => toast.show($el))" @if ($alignment->is('bottom'))
-            x-transition:enter-start="translate-y-12 opacity-0"
-            x-transition:enter-end="translate-y-0 opacity-100"
-        @elseif($alignment->is('top'))
-            x-transition:enter-start="-translate-y-12 opacity-0"
-            x-transition:enter-end="translate-y-0 opacity-100"
-        @else
-            x-transition:enter-start="opacity-0 scale-90"
-            x-transition:enter-end="opacity-100 scale-100"
-            @endif
-            x-transition:leave-end="opacity-0 scale-90"
-            class="relative flex duration-300 transform transition ease-in-out max-w-md w-full pointer-events-auto {{ $position->is('center') ? 'text-center' : 'text-left' }}"
-            :class="toast.select({ error: 'text-white', info: 'text-white', success: 'text-white', warning: 'text-white' })"
-            >
-            <i class=" flex items-center gap-2 select-none not-italic pr-6 pl-4 py-3 rounded shadow-lg w-full  {{ $alignment->is('bottom') ? 'mt-3' : 'mb-3' }}"
-                :class="toast.select({
-                    error: 'bg-coolgray-300',
-                    info: 'bg-coolgray-300',
-                    success: 'bg-coolgray-300',
-                    warning: 'bg-coolgray-300'
-                })">
-                <template x-if="toast.type === 'success'">
-                    <div class="rounded text-success">
-                        <svg aria-hidden="true" class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"
-                            xmlns="http://www.w3.org/2000/svg">
-                            <path fill-rule="evenodd"
-                                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                                clip-rule="evenodd"></path>
-                        </svg>
-                    </div>
-                </template>
-                <template x-if="toast.type === 'error'">
-                    <div class="rounded text-error">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
-                            stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                            <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
-                            <path d="M12 9v4" />
-                            <path d="M12 16v.01" />
-                        </svg>
-                    </div>
-                </template>
-                <template x-if="toast.type === 'info'">
-                    <div class="rounded text-info">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
-                            stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                            <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" />
-                            <path d="M12 9h.01" />
-                            <path d="M11 12h1v4h1" />
-                        </svg>
-                    </div>
-                </template>
-                <template x-if="toast.type === 'warning'">
-                    <div class="rounded text-warning">
-                        <svg aria-hidden="true" class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"
-                            xmlns="http://www.w3.org/2000/svg">
-                            <path fill-rule="evenodd"
-                                d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
-                                clip-rule="evenodd"></path>
-                        </svg>
-                    </div>
-                </template>
-                <span x-html="toast.message" class="w-full pr-10 break-words" />
-            </i>
-
-            @if ($closeable)
-                <button @click="toast.dispose()" aria-label="@lang('close')"
-                    class="absolute right-0 p-4 focus:outline-none hover:bg-transparent/10 rounded {{ $alignment->is('bottom') ? 'top-3' : 'top-0' }}">
-                    <svg aria-hidden="true" class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"
-                        xmlns="http://www.w3.org/2000/svg">
-                        <path fill-rule="evenodd"
-                            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-                            clip-rule="evenodd"></path>
-                    </svg>
-                </button>
-            @endif
-        </div>
-    </template>
-</div>