From 7b0018b661565d6cddf96d24a2ca676e2f95c32c Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Fri, 12 Apr 2024 11:11:55 +0200
Subject: [PATCH] Add new popup-small component and update general.blade.php

---
 .../views/components/popup-small.blade.php    | 28 +++++++++++++++++++
 .../project/application/general.blade.php     | 25 ++++++++++++-----
 2 files changed, 46 insertions(+), 7 deletions(-)
 create mode 100644 resources/views/components/popup-small.blade.php

diff --git a/resources/views/components/popup-small.blade.php b/resources/views/components/popup-small.blade.php
new file mode 100644
index 000000000..d623f3add
--- /dev/null
+++ b/resources/views/components/popup-small.blade.php
@@ -0,0 +1,28 @@
+@props(['title' => 'Default title', 'description' => 'Default Description', 'buttonText' => 'Default Button Text'])
+<div x-data="{
+    bannerVisible: false,
+    bannerVisibleAfter: 100
+}" x-show="bannerVisible" x-transition:enter="transition ease-out duration-500"
+    x-transition:enter-start="translate-y-full" x-transition:enter-end="translate-y-0"
+    x-transition:leave="transition ease-in duration-300" x-transition:leave-start="translate-y-0"
+    x-transition:leave-end="translate-y-full" x-init="setTimeout(() => { bannerVisible = true }, bannerVisibleAfter);"
+    class="fixed bottom-0 right-0  h-auto duration-300 ease-out px-5 pb-5 max-w-[46rem] z-[999]"
+    x-cloak>
+    <div
+        class="flex flex-col items-center justify-between w-full h-full max-w-4xl p-6 mx-auto bg-white border shadow-lg lg:border-t dark:border-coolgray-300 dark:bg-coolgray-100 lg:p-8 lg:flex-row sm:rounded">
+        <div
+            class="flex flex-col items-start h-full pb-0 text-xs lg:items-center lg:flex-row lg:pr-6 lg:space-x-5 dark:text-neutral-300 ">
+            @if (isset($icon))
+                {{ $icon }}
+
+            @endif
+
+            <div class="pt-0">
+                <h4 class="w-full mb-1 text-base font-bold leading-none -translate-y-1 lg:text-xl text-neutral-900 dark:text-white">
+                    {{ $title }}
+                </h4>
+                <p class="">{{ $description }}</span></p>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/resources/views/livewire/project/application/general.blade.php b/resources/views/livewire/project/application/general.blade.php
index b31c14882..981024057 100644
--- a/resources/views/livewire/project/application/general.blade.php
+++ b/resources/views/livewire/project/application/general.blade.php
@@ -1,17 +1,28 @@
 <div x-data="{ initLoadingCompose: $wire.entangle('initLoadingCompose') }">
-    <form wire:submit='submit' class="flex flex-col">
+    <form wire:submit='submit' class="flex flex-col pb-32">
         <div class="flex items-center gap-2">
             <h2>General</h2>
             <x-forms.button type="submit">
                 Save
             </x-forms.button>
             @if ($isConfigurationChanged && !is_null($application->config_hash) && !$application->isExited())
-                <div title="Configuration not applied to the running application. You need to redeploy.">
-                    <svg class="w-6 h-6 dark:text-warning" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
-                        <path fill="currentColor"
-                            d="M240.26 186.1L152.81 34.23a28.74 28.74 0 0 0-49.62 0L15.74 186.1a27.45 27.45 0 0 0 0 27.71A28.31 28.31 0 0 0 40.55 228h174.9a28.31 28.31 0 0 0 24.79-14.19a27.45 27.45 0 0 0 .02-27.71m-20.8 15.7a4.46 4.46 0 0 1-4 2.2H40.55a4.46 4.46 0 0 1-4-2.2a3.56 3.56 0 0 1 0-3.73L124 46.2a4.77 4.77 0 0 1 8 0l87.44 151.87a3.56 3.56 0 0 1 .02 3.73M116 136v-32a12 12 0 0 1 24 0v32a12 12 0 0 1-24 0m28 40a16 16 0 1 1-16-16a16 16 0 0 1 16 16" />
-                    </svg>
-                </div>
+                <x-popup-small>
+                    <x-slot:title>
+                        The latest configuration has not been applied.
+                    </x-slot:title>
+                    <x-slot:icon>
+                        <svg class="hidden w-16 h-16 dark:text-warning lg:block" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
+                            <path fill="currentColor"
+                                d="M240.26 186.1L152.81 34.23a28.74 28.74 0 0 0-49.62 0L15.74 186.1a27.45 27.45 0 0 0 0 27.71A28.31 28.31 0 0 0 40.55 228h174.9a28.31 28.31 0 0 0 24.79-14.19a27.45 27.45 0 0 0 .02-27.71m-20.8 15.7a4.46 4.46 0 0 1-4 2.2H40.55a4.46 4.46 0 0 1-4-2.2a3.56 3.56 0 0 1 0-3.73L124 46.2a4.77 4.77 0 0 1 8 0l87.44 151.87a3.56 3.56 0 0 1 .02 3.73M116 136v-32a12 12 0 0 1 24 0v32a12 12 0 0 1-24 0m28 40a16 16 0 1 1-16-16a16 16 0 0 1 16 16" />
+                        </svg>
+                    </x-slot:icon>
+                    <x-slot:description>
+                        <span>Please restart (or redeploy) to apply the new configuration, especially if you have changed your domains.</span>
+                    </x-slot:description>
+                    <x-slot:button-text @click="disableSponsorship()">
+                        Disable This Popup
+                    </x-slot:button-text>
+                </x-popup-small>
             @endif
         </div>
         <div>General configuration for your application.</div>