From 688fd02e268f41261f00fc79a064ff620e380bc2 Mon Sep 17 00:00:00 2001 From: kusowl Date: Mon, 19 Jan 2026 14:11:52 +0530 Subject: [PATCH] chore(UI Improvements): made all pages in broker panel full width toasts timer increased to 5s. Add animation to the toast Add toast for like and favorite actions fixed the deal card design added a opening animation to modal --- .../Controllers/InteractionController.php | 4 +-- resources/css/app.css | 28 +++++++++++++++++-- resources/js/interaction.js | 12 ++++++++ resources/js/toast.js | 10 ++++--- .../dashboard/broker/layout.blade.php | 3 +- .../dashboard/broker/sidebar/index.blade.php | 6 ++-- .../dashboard/broker/sidebar/item.blade.php | 2 +- .../dashboard/broker/stats.blade.php | 2 +- .../views/components/dashboard/card.blade.php | 2 +- .../dashboard/page-heading.blade.php | 4 +-- .../dashboard/user/broker-contact.blade.php | 2 +- .../dashboard/user/listing-card.blade.php | 4 +-- .../views/components/ui/button-sm.blade.php | 12 ++++++-- .../views/components/ui/button.blade.php | 4 +-- .../views/components/ui/image-card.blade.php | 4 +-- resources/views/components/ui/modal.blade.php | 3 +- resources/views/components/ui/toast.blade.php | 2 +- .../dashboards/broker/deals/create.blade.php | 13 +++++---- .../dashboards/broker/deals/edit.blade.php | 5 ++-- .../dashboards/broker/profile/edit.blade.php | 10 +++---- .../dashboards/broker/profile/show.blade.php | 4 +-- 21 files changed, 91 insertions(+), 45 deletions(-) diff --git a/app/Http/Controllers/InteractionController.php b/app/Http/Controllers/InteractionController.php index a9eae6d..e646959 100644 --- a/app/Http/Controllers/InteractionController.php +++ b/app/Http/Controllers/InteractionController.php @@ -33,7 +33,7 @@ public function togglesState(Deal $deal, InteractionType $type) $message = ''; if ($existingInteraction) { $existingInteraction->delete(); - $message = "{$type->value} removed from deal"; + $message = ucfirst($type->value).' removed from deal'; } else { $data = [ 'type' => $type, @@ -44,7 +44,7 @@ public function togglesState(Deal $deal, InteractionType $type) $deal->interactions()->create($data); Interaction::reguard(); - $message = "{$type->value} added to deal"; + $message = ucfirst($type->value).' added to deal'; } return response()->json(['message' => $message]); diff --git a/resources/css/app.css b/resources/css/app.css index 4f63131..106f4bf 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -14,7 +14,7 @@ @theme { --color-accent-600: oklch(0.45 0.01 232); } -@layer components{ +@layer components { @import "./button.css"; .wrapper { @@ -24,7 +24,7 @@ @layer components{ } -@layer base{ +@layer base { h2 { @apply text-5xl font-black text-center } @@ -33,3 +33,27 @@ @layer base{ .preload * { transition: none !important; } +@keyframes appear { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +@keyframes disappear { + from { + display: block; + opacity: 1; + } + to { + display: none; + opacity: 0; + } +} +dialog{ + animation: disappear 300ms ease-in-out; +} +dialog[open]{ + animation: appear 300ms ease-in-out; +} diff --git a/resources/js/interaction.js b/resources/js/interaction.js index 30d6793..fc61c61 100644 --- a/resources/js/interaction.js +++ b/resources/js/interaction.js @@ -1,3 +1,5 @@ +import {showToast} from "./toast.js"; + async function like(button, id) { // Instant feedback for user let likeBtns = button.querySelectorAll('.like'); @@ -12,10 +14,16 @@ async function like(button, id) { let response = await axios.post('/like/' + id); if (response.status !== 200) { + showToast(response.data.message) // Revert the ui toggleHidden(likeBtns); } + else{ + showToast(response.data.message) + } + } catch (e) { + showToast(e.response.data.message) toggleHidden(likeBtns); console.error(e); } @@ -30,10 +38,14 @@ async function favorite(e, id) { let response = await axios.post('/favorite/' + id); if (response.status !== 200) { + showToast(response.data.message) // Revert the ui toggleHidden(favoriteBtns); + }else{ + showToast(response.data.message); } } catch (e) { + showToast(e.response.data.message) toggleHidden(favoriteBtns); console.error(e); } diff --git a/resources/js/toast.js b/resources/js/toast.js index 32b1c89..0a4312d 100644 --- a/resources/js/toast.js +++ b/resources/js/toast.js @@ -2,14 +2,16 @@ const toast = document.querySelector('.toast'); const toastBtn = document.querySelector('#toast-btn'); let toastMessage = toast.querySelector('#toast-message'); export function showToast(message) { - toast.classList.toggle('hidden') + toast.classList.remove('translate-x-[100vw]'); + toast.classList.add('translate-x-0'); toastMessage.textContent = message; setTimeout(() => { - toast.classList.toggle('hidden'); - }, 3000) + hideToast(); + }, 5000) } function hideToast() { - toast.classList.toggle('hidden') + toast.classList.remove('translate-x-0'); + toast.classList.add('translate-x-[100vw]'); } document.hideToast = hideToast; document.showToast = showToast; diff --git a/resources/views/components/dashboard/broker/layout.blade.php b/resources/views/components/dashboard/broker/layout.blade.php index 532c1c1..587f57f 100644 --- a/resources/views/components/dashboard/broker/layout.blade.php +++ b/resources/views/components/dashboard/broker/layout.blade.php @@ -4,7 +4,7 @@