refactor: Improve popup component styling and button behavior

Author: andrasbacsai

resources/views/components/popup.blade.php

@@ -6,10 +6,10 @@
     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 w-full h-auto duration-300 ease-out sm:px-5 sm:pb-5 sm:w-[26rem] lg:w-full z-[999]"
+    class="fixed bottom-0 right-0 w-full h-auto duration-300 ease-out sm:px-5 sm:pb-5 w-full 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">
+        class="flex items-center flex-col 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-6 text-xs lg:items-center lg:flex-row lg:pb-0 lg:pr-6 lg:space-x-5 dark:text-neutral-300">
             @if (isset($icon))
@@ -23,14 +23,12 @@ class="flex flex-col items-start h-full pb-6 text-xs lg:items-center lg:flex-row
                 <p class="">{{ $description }}</span></p>
             </div>
         </div>
-        <div class="flex items-end justify-end w-full pl-3 space-x-3 lg:flex-shrink-0 lg:w-auto">
             <button
                 @if ($buttonText->attributes->whereStartsWith('@click')->first()) @click="bannerVisible=false;{{ $buttonText->attributes->get('@click') }}"
-                @else
+                    @else
                 @click="bannerVisible=false;" @endif
-                class="inline-flex items-center justify-center flex-shrink-0 w-1/2 px-4 py-2 text-sm font-medium tracking-wide transition-colors duration-200 rounded-md bg-neutral-100 hover:bg-neutral-200 dark:bg-coolgray-200 lg:w-auto dark:text-neutral-200 dark:hover:bg-coolgray-300 focus:shadow-outline focus:outline-none">
+                class="w-full px-4 py-2 text-sm font-medium tracking-wide transition-colors duration-200 rounded-md bg-neutral-100 hover:bg-neutral-200 dark:bg-coolgray-200 lg:w-auto dark:text-neutral-200 dark:hover:bg-coolgray-300 focus:shadow-outline focus:outline-none">
                 {{ $buttonText }}
             </button>
-        </div>
     </div>
 </div>

resources/views/livewire/layout-popups.blade.php

@@ -32,21 +32,16 @@
             @if (!isCloud())
                 <x-popup>
                     <x-slot:title>
-                        <span class="font-bold text-left text-red-500">WARNING: </span>Realtime Error?!
+                        <span class="font-bold text-left text-red-500">WARNING: </span> Cannot connect to real-time service
                     </x-slot:title>
                     <x-slot:description>
-                        <span>Coolify could not connect to its real-time service.<br>This will cause unusual problems on the
-                            UI
-                            if
-                            not fixed! <br><br>
+                        <div>This will cause unusual problems on the
+                            UI! <br><br>
                             Please ensure that you have opened the
                             <a class="underline" href='https://coolify.io/docs/knowledge-base/server/firewall'
-                                target='_blank'>required ports</a>,
-                            check the
-                            related <a class="underline" href='https://coolify.io/docs/knowledge-base/cloudflare/tunnels'
-                                target='_blank'>documentation</a> or get
+                                target='_blank'>required ports</a> or get
                             help on <a class="underline" href='https://coollabs.io/discord' target='_blank'>Discord</a>.
-                        </span>
+                        </div>
                     </x-slot:description>
                     <x-slot:button-text @click="disableRealtime()">
                         Acknowledge & Disable This Popup