fix(ui): update navbar icon color and enhance popup layout for sponsorship support
This commit is contained in:
Andras Bacsai
@@ -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" />
|
||||
|
||||
@@ -7,29 +7,34 @@
|
||||
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>
|
||||
<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">
|
||||
@isset($customActions)
|
||||
{{ $customActions }}
|
||||
@else
|
||||
<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))
|
||||
<div class="hidden lg:block">
|
||||
{{ $icon }}
|
||||
</div>
|
||||
@endif
|
||||
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))
|
||||
<div class="hidden lg:block">
|
||||
{{ $icon }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="pt-6 lg:pt-0">
|
||||
<h4 class="w-full mb-1 text-xl font-bold leading-none -translate-y-1 text-neutral-900 dark:text-white">
|
||||
{{ $title }}
|
||||
</h4>
|
||||
<p>{{ $description }}</span></p>
|
||||
<div class="pt-6 lg:pt-0">
|
||||
<h4 class="w-full mb-1 text-xl font-bold leading-none -translate-y-1 text-neutral-900 dark:text-white">
|
||||
{{ $title }}
|
||||
</h4>
|
||||
<p>{{ $description }}</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
@if ($buttonText->attributes->whereStartsWith('@click')->first()) @click="bannerVisible=false;{{ $buttonText->attributes->get('@click') }}"
|
||||
@else
|
||||
@click="bannerVisible=false;" @endif
|
||||
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-hidden">
|
||||
{{ $buttonText }}
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
@if ($buttonText->attributes->whereStartsWith('@click')->first()) @click="bannerVisible=false;{{ $buttonText->attributes->get('@click') }}"
|
||||
@else
|
||||
@click="bannerVisible=false;" @endif
|
||||
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-hidden">
|
||||
{{ $buttonText }}
|
||||
</button>
|
||||
</div>
|
||||
@endisset
|
||||
|
||||
</div>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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"
|
||||
x-cloak>
|
||||
class="fixed top-0 lg:pt-10 left-0 z-99 flex items-start justify-center w-screen h-screen" 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">
|
||||
<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
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user