fix(ui): update navbar icon color and enhance popup layout for sponsorship support

resources/views/components/navbar.blade.php

@@ -344,7 +344,7 @@
                         @if (isInstanceAdmin() || session('impersonating'))
                             <li>
                                 <a title="Admin" class="menu-item" href="/admin">
-                                    <svg class="text-pink-600 icon" viewBox="0 0 256 256"
+                                    <svg class="text-pink-500 icon" viewBox="0 0 256 256"
                                         xmlns="http://www.w3.org/2000/svg">
                                         <path fill="currentColor"
                                             d="M177.62 159.6a52 52 0 0 1-34 34a12.2 12.2 0 0 1-3.6.55a12 12 0 0 1-3.6-23.45a28 28 0 0 0 18.32-18.32a12 12 0 0 1 22.9 7.2ZM220 144a92 92 0 0 1-184 0c0-28.81 11.27-58.18 33.48-87.28a12 12 0 0 1 17.9-1.33l19.69 19.11L127 19.89a12 12 0 0 1 18.94-5.12C168.2 33.25 220 82.85 220 144m-24 0c0-41.71-30.61-78.39-52.52-99.29l-20.21 55.4a12 12 0 0 1-19.63 4.5L80.71 82.36C67 103.38 60 124.06 60 144a68 68 0 0 0 136 0" />

resources/views/components/popup.blade.php

@@ -7,8 +7,11 @@
     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 w-full z-999" x-cloak>
+    @isset($customActions)
+        {{ $customActions }}
+    @else
         <div
-        class="flex lg: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-sm">
+            class="flex lg: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 border-neutral-200 dark:bg-coolgray-100 lg:p-8 lg:flex-row sm:rounded-sm">
             <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))
@@ -32,4 +35,6 @@
                 {{ $buttonText }}
             </button>
         </div>
+    @endisset
+
 </div>

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

@@ -6,7 +6,6 @@
     },
     isDevelopment: {{ isDev() ? 'true' : 'false' }},
     init() {
-        console.log(this.isDevelopment);
         this.popups.sponsorship = this.shouldShowMonthlyPopup('popupSponsorship');
         this.popups.notification = this.shouldShowMonthlyPopup('popupNotification');
         this.popups.realtime = localStorage.getItem('popupRealtime');
@@ -87,31 +86,51 @@
             @endif
         </span>
     @endauth
-    @if (instanceSettings()->is_sponsorship_popup_enabled)
+    @if (instanceSettings()->is_sponsorship_popup_enabled && !isCloud())
         <span x-show="popups.sponsorship">
             <x-popup>
-                <x-slot:title>
+                <x-slot:customActions>
-                    Would you like to help us to make more cool things?
+                    <div
-                </x-slot:title>
+                        class="flex md:flex-row flex-col max-w-4xl p-6 mx-auto bg-white border shadow-lg lg:border-t dark:border-coolgray-300 border-neutral-200 dark:bg-coolgray-100 lg:p-8 lg:pb-4 sm:rounded-sm gap-2">
-                <x-slot:icon>
+                        <div class="md:block hidden">
-                    <img src="{{ asset('heart.png') }}" class="w-8 h-8 sm:w-12 sm:h-12 lg:w-16 lg:h-16">
+                            <img src="{{ asset('heart.png') }}" class="w-20 h-20">
-                </x-slot:icon>
-                <x-slot:description>
-                    <div class="text-md dark:text-white">
-                        <span>We are already profitable, but we would like to scale even further.</span>
-                        <br><span>Please
-                            consider donating on one of the following platforms.<br /><br /> <a
-                                href="https://github.com/sponsors/coollabsio"
-                                class="underline text-lg font-bold dark:text-white">GitHub
-                                Sponsors</a> (registration required) <br /><br />
-                            <a href="https://opencollective.com/coollabsio/donate?interval=month&amount=10&name=&legalName=&email="
-                                class="underline text-lg font-bold dark:text-white">OpenCollective</a> (no registration
-                            required)</span>
                         </div>
-                </x-slot:description>
+                        <div class="flex flex-col gap-2 lg:px-10 px-1">
-                <x-slot:button-text @click="disableSponsorship()">
+                            <div class="lg:text-xl text-md dark:text-white font-bold">Would you like to help us to
-                    Disable This Popup
+                                make more cool
-                </x-slot:button-text>
+                                things?
+                            </div>
+                            <div class="lg:text-sm text-xs dark:text-white">
+                                We are already profitable thanks to <span class="font-bold text-pink-500">YOU</span>
+                                but...<br />we
+                                would
+                                like to
+                                make
+                                more cool features for you.
+                            </div>
+                            <div class="lg:text-sm text-xs dark:text-white pt-2 ">
+                                For this we need your help to support our work financially.
+                            </div>
+                        </div>
+                        <div class="flex flex-col gap-2 text-center md:mx-auto lg:py-0 pt-2">
+                            <x-forms.button isHighlighted class="md:w-36 w-full"><a
+                                    href="https://github.com/sponsors/coollabsio"
+                                    class="font-bold dark:text-white">GitHub
+                                    Sponsors</a></x-forms.button>
+                            <x-forms.button isHighlighted class="md:w-36 w-full"><a
+                                    href="https://opencollective.com/coollabsio/donate?interval=month&amount=10&name=&legalName=&email="
+                                    class="font-bold dark:text-white">Open
+                                    Collective</a></x-forms.button>
+                            <x-forms.button isHighlighted class="md:w-36 w-full"><a
+                                    href="https://donate.stripe.com/8x2bJ104ifmB9kB45u38402"
+                                    class="font-bold dark:text-white">Stripe</a></x-forms.button>
+                            <div class="pt-4 dark:text-white hover:underline cursor-pointer lg:text-base text-xs"
+                                @click="bannerVisible=false;disableSponsorship()">
+                                Maybe next time
+                            </div>
+                        </div>
+                    </div>
+                </x-slot:customActions>
             </x-popup>
         </span>
     @endif

resources/views/livewire/upgrade.blade.php

@@ -27,8 +27,7 @@
             </button>
             <template x-teleport="body">
                 <div x-show="modalOpen"
-                    class="fixed top-0 lg:pt-10 left-0 z-99 flex items-start justify-center w-screen h-screen"
+                    class="fixed top-0 lg:pt-10 left-0 z-99 flex items-start justify-center w-screen h-screen" x-cloak>
-                    x-cloak>
                     <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"
@@ -55,8 +54,11 @@
                             <p>Are you sure you would like to upgrade your instance to {{ $latestVersion }}?</p>
                             <br />
 
-                            <div class="p-4 mb-4 text-yellow-800 border border-yellow-300 rounded-lg bg-yellow-50 dark:bg-yellow-900/30 dark:text-yellow-300 dark:border-yellow-800">
+                            <div
-                                <p class="font-medium">Warning: Any deployments running during the update process will fail. Please ensure no deployments are in progress on any server before continuing.</p>
+                                class="p-4 mb-4 text-yellow-800 border border-yellow-300 rounded-lg bg-yellow-50 dark:bg-yellow-900/30 dark:text-yellow-300 dark:border-yellow-800">
+                                <p class="font-medium">Warning: Any deployments running during the update process will
+                                    fail. Please ensure no deployments are in progress on any server before continuing.
+                                </p>
                             </div>
                             <p>You can review the changelogs <a class="font-bold underline dark:text-white"
                                     href="https://github.com/coollabsio/coolify/releases" target="_blank">here</a>.</p>