UI cleanup

app/View/Components/InfoBox.php

@@ -0,0 +1,39 @@
+<?php
+
+namespace App\View\Components;
+
+use App\Models\Campaign;
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class InfoBox extends Component
+{
+    /**
+     * Create a new component instance.
+     */
+    public function __construct(
+        public string $title,
+        public string $icon,
+        public ?string $url,
+        public ?string $subtitle,
+        public ?string $color,
+        public ?Campaign $campaign,
+        public string $target = 'primary-dialog',
+        public string $background = 'bg-neutral',
+        public string $subtitleColour = 'text-neutral-content',
+        public bool $ajax = false,
+        public bool $premium = false,
+    )
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+        return view('components.info-box');
+    }
+}

lang/en/campaigns.php

@@ -129,6 +129,10 @@
             'type'      => 'Type',
             'usage'     => 'Expires after',
         ],
+        'helpers' => [
+            'usage' => 'How many times the invite link can be used before it becomes inactive.',
+            'role' => 'Users need to join before they can be promoted to the admin role.'
+        ],
         'unlimited_validity'    => 'Unlimited',
         'usages'                => [
             'five'      => '5 uses',

lang/en/campaigns/members.php

@@ -0,0 +1,9 @@
+<?php
+
+return [
+    'overview' => [
+        'title' => 'Available members',
+        'unlimited' => ':amount of unlimited members.',
+        'limited' => ':amount of :total members.',
+    ],
+];

lang/en/campaigns/roles.php

@@ -22,4 +22,9 @@
     'warnings'  => [
         'adding-to-admin'   => 'Members of the :name role have access to everything in the campaign, and cannot be removed by other members of the role. After :amount minutes, only they can remove themselves from the role.',
     ],
+    'overview' => [
+        'title' => 'Available roles',
+        'unlimited' => ':amount of unlimited roles created.',
+        'limited' => ':amount of :total roles created.',
+    ]
 ];

resources/sass/theming.scss

@@ -28,6 +28,14 @@ a, .text-link {
         color: var(--link-focus, hsl(var(--pf)/var(--tw-text-opacity)));
     }
 }
+a.neutral-link {
+    --tw-text-opacity: 1;
+    color: hsl(var(--nc)/var(--tw-text-opacity));
+    &:hover, &:focus {
+        --tw-text-opacity: 1;
+        color: hsl(var(--nc)/var(--tw-text-opacity));
+    }
+}
 
 h1, h2, h3, h4, h5, h6, h1 > small, .panel-title {
     --tw-text-opacity: 1;

resources/views/campaigns/invites/_form.blade.php

@@ -11,15 +11,18 @@
 <x-grid type="1/1">
     <x-forms.field
         field="usage"
-        :required="true"
-        :label="__('campaigns.invites.fields.usage')">
+        required
+        :label="__('campaigns.invites.fields.usage')"
+        :helper="__('campaigns.invites.helpers.usage')">
         <x-forms.select name="validity" :options="$usages" class="w-full"  />
     </x-forms.field>
 
     <x-forms.field
         field="role"
-        :required="true"
-        :label="__('campaigns.invites.fields.role')">
-        <x-forms.select name="role_id" :options="$campaign->roles()->where(['is_public' => false, 'is_admin' => false])->pluck('name', 'id')" class="w-full select" />
+        required
+        :label="__('campaigns.invites.fields.role')"
+        :helper="__('campaigns.invites.helpers.role')"
+    >
+        <x-forms.select name="role_id" :options="$campaign->roles()->where(['is_public' => false, 'is_admin' => false])->orderBy('name')->pluck('name', 'id')" class="w-full select" />
     </x-forms.field>
 </x-grid>

resources/views/campaigns/members/index.blade.php

@@ -23,11 +23,17 @@
             </a>
         </div>
 
-        @if (!$campaign->canHaveMoreMembers())
-            <x-cta :campaign="$campaign" image="0" minimal="1">
-                <p>{{ __('campaigns/limits.members') }}</p>
-            </x-cta>
-        @endif
+        <x-grid>
+            <x-infoBox
+                title="{{ __('campaigns/members.overview.title') }}"
+                icon="{{ $campaign->boosted() ? 'fa-solid fa-infinity text-green-500' : 'fa-solid fa-warning text-red-500' }}"
+                subtitle="{{  __('campaigns/members.overview.' . ($campaign->boosted() ? 'unlimited' : 'limited'), ['total' => $campaign->memberLimit(), 'amount' => $rows->total()]) }}"
+                background="{{ $campaign->boosted() ? 'bg-green-200' : 'bg-red-200' }}"
+                :campaign="$campaign"
+                premium
+            ></x-infoBox>
+        </x-grid>
+
         @if(Datagrid::hasBulks())
             <x-form :action="['campaign_roles.bulk', $campaign]" direct>
                 <div id="datagrid-parent" class="table-responsive">

resources/views/campaigns/roles/index.blade.php

@@ -1,6 +1,6 @@
 <div class="flex gap-2 items-center">
     <h3 class="inline-block grow">
-        {{ __('campaigns.show.tabs.roles') }} <span class="text-sm">({{ $roles->total() }} / @if ($limit = $campaign->roleLimit()){{ $limit }}@else<i class="fa-solid fa-infinity" aria-hidden="true"></i>@endif)</span>
+        {{ __('campaigns.show.tabs.roles') }}
     </h3>
     <button class="btn2 btn-sm btn-ghost" data-toggle="dialog"
             data-target="roles-help">
@@ -18,6 +18,17 @@
     @endif
 </div>
 
+<x-grid>
+    <x-infoBox
+        title="{{ __('campaigns/roles.overview.title') }}"
+        icon="{{ $campaign->boosted() ? 'fa-solid fa-infinity text-green-500' : 'fa-solid fa-warning text-red-500' }}"
+        subtitle="{{  __('campaigns/roles.overview.' . ($campaign->boosted() ? 'unlimited' : 'limited'), ['total' => $campaign->roleLimit(), 'amount' => $roles->total()]) }}"
+        background="{{ $campaign->boosted() ? 'bg-green-200' : 'bg-red-200' }}"
+        :campaign="$campaign"
+        premium
+    ></x-infoBox>
+</x-grid>
+
 <?php /** @var \App\Models\Campaign $campaign
  * @var \App\Models\CampaignRole $plugin
  */?>

resources/views/components/info-box.blade.php

@@ -0,0 +1,26 @@
+<x-box css="flex items-center gap-5">
+    <div class="rounded {{ $background }} w-12 h-12 flex items-center justify-center">
+        <x-icon class="{{ $icon }}" />
+    </div>
+    <div class="flex flex-col gap-0 grow">
+        <span>{!! $title !!}</span>
+        @if (isset($subtitle))
+            <span class="{{ $subtitleColour }}">{!! $subtitle !!}</span>
+        @endif
+    </div>
+    @if ($url)
+        @if ($ajax)
+            <div class="rounded-full border h-12 w-12 flex items-center justify-center cursor-pointer" data-target="{{ $target }}" data-url="{{ $url }}" data-toggle="dialog-ajax">
+                <x-icon class="fa-solid fa-angle-right" />
+            </div>
+        @else
+            <a class="rounded-full border h-12 w-12 flex items-center justify-center cursor-pointer" href="{{ $route }}" >
+                <x-icon class="fa-solid fa-angle-right" />
+            </a>
+        @endif
+    @elseif ($premium && !$campaign->boosted())
+        <a class="rounded-full border h-12 w-12 flex items-center justify-center cursor-pointer neutral-link" href="{{ route('settings.premium', ['campaign' => $campaign->id]) }}" data-tooltip data-title="{{ __('settings/premium.actions.unlock') }}">
+            <x-icon class="fa-solid fa-gem" />
+        </a>
+    @endif
+</x-box>