ui: more visible feedback button

app/Http/Livewire/Help.php

@@ -4,8 +4,8 @@ namespace App\Http\Livewire;
 
 use DanHarrin\LivewireRateLimiting\WithRateLimiting;
 use Illuminate\Notifications\Messages\MailMessage;
+use Illuminate\Support\Facades\Route;
 use Livewire\Component;
-use Route;
 
 class Help extends Component
 {
@@ -28,7 +28,7 @@ class Help extends Component
     public function submit()
     {
         try {
-            $this->rateLimit(1, 60);
+            $this->rateLimit(3, 60);
             $this->validate();
             $subscriptionType = auth()->user()?->subscription?->type() ?? 'Free';
             $debug = "Route: {$this->path}";
@@ -42,7 +42,7 @@ class Help extends Component
             );
             $mail->subject("[HELP - {$subscriptionType}]: {$this->subject}");
             send_user_an_email($mail,  auth()->user()?->email, 'hi@coollabs.io');
-            $this->emit('success', 'Your message has been sent successfully. We will get in touch with you as soon as possible.');
+            $this->emit('success', 'Your message has been sent successfully. <br>We will get in touch with you as soon as possible.');
         } catch (\Throwable $e) {
             return handleError($e, $this);
         }

resources/views/components/navbar-subscription.blade.php

@@ -10,16 +10,12 @@
                     </svg>
                 </a>
             </li>
-            <li title="Help" class="mt-auto">
+            <li title="Send feedback or get help" class="fixed top-0 right-0 p-2 px-6 pt-4 mt-auto">
-                <div class="justify-center icons" wire:click="help" onclick="help.showModal()">
+                <div class="justify-center text-xs bg-coolgray-200" wire:click="help" onclick="help.showModal()">
-                    <svg class="{{ request()->is('help*') ? 'text-warning icon' : 'icon' }}" viewBox="0 0 24 24"
+                    <svg  class="w-4 h-4" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                        xmlns="http://www.w3.org/2000/svg">
+                        <path fill="currentColor" d="M22 5.5H9c-1.1 0-2 .9-2 2v9a2 2 0 0 0 2 2h13c1.11 0 2-.89 2-2v-9a2 2 0 0 0-2-2m0 11H9V9.17l6.5 3.33L22 9.17v7.33m-6.5-5.69L9 7.5h13l-6.5 3.31M5 16.5c0 .17.03.33.05.5H1c-.552 0-1-.45-1-1s.448-1 1-1h4v1.5M3 7h2.05c-.02.17-.05.33-.05.5V9H3c-.55 0-1-.45-1-1s.45-1 1-1m-2 5c0-.55.45-1 1-1h3v2H2c-.55 0-1-.45-1-1Z"/>
-                        <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-                            stroke-width="2">
-                            <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0m9 4v.01" />
-                            <path d="M12 13a2 2 0 0 0 .914-3.782a1.98 1.98 0 0 0-2.414.483" />
-                        </g>
                     </svg>
+                   Feedback
                 </div>
             </li>
             <li class="pb-6" title="Logout">

resources/views/components/navbar.blade.php

@@ -114,16 +114,12 @@
                 </li>
             @endif
             @if (isSubscriptionActive() || isDev())
-                <li title="Help" class="mt-auto">
+                <li title="Send feedback or get help" class="fixed top-0 right-0 p-2 px-6 pt-4 mt-auto">
-                    <div class="justify-center icons" wire:click="help" onclick="help.showModal()">
+                    <div class="justify-center text-xs bg-coolgray-200" wire:click="help" onclick="help.showModal()">
-                        <svg class="{{ request()->is('help*') ? 'text-warning icon' : 'icon' }}" viewBox="0 0 24 24"
+                        <svg  class="w-4 h-4" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                            xmlns="http://www.w3.org/2000/svg">
+                            <path fill="currentColor" d="M22 5.5H9c-1.1 0-2 .9-2 2v9a2 2 0 0 0 2 2h13c1.11 0 2-.89 2-2v-9a2 2 0 0 0-2-2m0 11H9V9.17l6.5 3.33L22 9.17v7.33m-6.5-5.69L9 7.5h13l-6.5 3.31M5 16.5c0 .17.03.33.05.5H1c-.552 0-1-.45-1-1s.448-1 1-1h4v1.5M3 7h2.05c-.02.17-.05.33-.05.5V9H3c-.55 0-1-.45-1-1s.45-1 1-1m-2 5c0-.55.45-1 1-1h3v2H2c-.55 0-1-.45-1-1Z"/>
-                            <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-                                stroke-width="2">
-                                <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0m9 4v.01" />
-                                <path d="M12 13a2 2 0 0 0 .914-3.782a1.98 1.98 0 0 0-2.414.483" />
-                            </g>
                         </svg>
+                       Feedback
                     </div>
                 </li>
             @endif

resources/views/layouts/base.blade.php

@@ -94,6 +94,7 @@
                         })
                 }, 2000);
             }
+
             function copyToClipboard(text) {
                 navigator.clipboard.writeText(text);
                 Livewire.emit('success', 'Copied to clipboard.');

resources/views/livewire/help.blade.php

@@ -1,10 +1,11 @@
-<div class="flex flex-col gap-2 rounded modal-box">
+<div class="flex flex-col w-11/12 max-w-5xl gap-2 modal-box">
     <h3>How can we help?</h3>
-    <div>You can report bug about the current page (details will be included automatically), or send us general feedback.</div>
+    <div>You can report bugs, or send us general feedback.</div>
     <form wire:submit.prevent="submit" class="flex flex-col gap-4 pt-4">
         <x-forms.input id="subject" label="Subject" placeholder="Summary of your problem."></x-forms.input>
-        <x-forms.textarea id="description" label="Message"
+        <x-forms.textarea rows="10" id="description" label="Description"
             placeholder="Please provide as much information as possible."></x-forms.textarea>
-        <x-forms.button class="w-full mt-4" type="submit">Send Request</x-forms.button>
+        <div>Thank you for your feedback! 💜</div>
+        <x-forms.button class="w-full mt-4" type="submit" onclick="help.close()">Send Email</x-forms.button>
     </form>
 </div>