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

This commit is contained in:
Andras Bacsai
2025-06-25 18:14:20 +02:00
parent dee4e023b6
commit b694e26968
4 changed files with 75 additions and 49 deletions

View File

@@ -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>
Would you like to help us to make more cool things?
</x-slot:title>
<x-slot:icon>
<img src="{{ asset('heart.png') }}" class="w-8 h-8 sm:w-12 sm:h-12 lg:w-16 lg:h-16">
</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>
<x-slot:customActions>
<div
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">
<div class="md:block hidden">
<img src="{{ asset('heart.png') }}" class="w-20 h-20">
</div>
<div class="flex flex-col gap-2 lg:px-10 px-1">
<div class="lg:text-xl text-md dark:text-white font-bold">Would you like to help us to
make more cool
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:description>
<x-slot:button-text @click="disableSponsorship()">
Disable This Popup
</x-slot:button-text>
</x-slot:customActions>
</x-popup>
</span>
@endif