diff --git a/apps/client/src/services/toast.ts b/apps/client/src/services/toast.ts
index 66b3f7f50..f275e625b 100644
--- a/apps/client/src/services/toast.ts
+++ b/apps/client/src/services/toast.ts
@@ -4,7 +4,7 @@ import utils from "./utils.js";
export interface ToastOptions {
id?: string;
icon: string;
- title: string;
+ title?: string;
message: string;
delay?: number;
autohide?: boolean;
@@ -12,20 +12,32 @@ export interface ToastOptions {
}
function toast(options: ToastOptions) {
- const $toast = $(
- `
`
);
- $toast.find(".toast-title").text(options.title);
+ $toast.toggleClass("no-title", !options.title);
+ $toast.find(".toast-title").text(options.title ?? "");
$toast.find(".toast-body").html(options.message);
if (options.id) {
diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css
index 5f1e49a4f..ee6a6d081 100644
--- a/apps/client/src/stylesheets/style.css
+++ b/apps/client/src/stylesheets/style.css
@@ -1141,6 +1141,26 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
overflow: hidden;
}
+.toast.no-title {
+ display: flex;
+ flex-direction: row;
+}
+
+.toast.no-title .toast-icon {
+ display: flex;
+ align-items: center;
+ padding: var(--bs-toast-padding-y) var(--bs-toast-padding-x);
+}
+
+.toast.no-title .toast-body {
+ padding-left: 0;
+ padding-right: 0;
+}
+
+.toast.no-title .toast-header {
+ background-color: unset !important;
+}
+
.ck-mentions .ck-button {
font-size: var(--detail-font-size) !important;
padding: 5px;
diff --git a/apps/client/src/stylesheets/theme-next/base.css b/apps/client/src/stylesheets/theme-next/base.css
index f213d98c1..0a29ab689 100644
--- a/apps/client/src/stylesheets/theme-next/base.css
+++ b/apps/client/src/stylesheets/theme-next/base.css
@@ -342,7 +342,10 @@ li.dropdown-item a.dropdown-item-button:focus-visible {
#toast-container .toast .toast-header .btn-close {
margin: 0 0 0 12px;
+}
+#toast-container .toast.no-title {
+ flex-direction: row;
}
#toast-container .toast .toast-body {
@@ -350,6 +353,22 @@ li.dropdown-item a.dropdown-item-button:focus-visible {
overflow: hidden;
text-overflow: ellipsis;
padding-top: 0;
+ color: var(--muted-text-color);
+}
+
+#toast-container .toast:not(.no-title) .bx {
+ margin-right: 0.5em;
+ font-size: 1.1em;
+}
+
+#toast-container .toast.no-title .bx {
+ margin-right: 0;
+ font-size: 1.3em;
+}
+
+#toast-container .toast.no-title .toast-body {
+ padding-top: var(--bs-toast-padding-x);
+ color: var(--toast-text-color);
}
/*