From dfdb4b057c69408c72d615a72729daa7afd508b3 Mon Sep 17 00:00:00 2001
From: Halit Aksoy <jhalitaksoy@gmail.com>
Date: Sat, 17 Oct 2026 02:39:41 +0300
Subject: [PATCH] feat(frontend): show messages at the top in the theme's
 colors

Messages appear at the top centre below the header as an inverted chip
of the theme, in the app's font and without icons, and close on a click
instead of sliding in at the bottom right in Notyf's red.
---
 apps/frontend/src/styles/app.css | 25 +++++++++++++++++++++++++
 apps/frontend/src/util/Notyf.ts  | 24 ++++++++++++++++++++----
 docs/specs/theme-polish/tasks.md |  2 +-
 3 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/apps/frontend/src/styles/app.css b/apps/frontend/src/styles/app.css
index 99c6653..b5daa83 100644
--- a/apps/frontend/src/styles/app.css
+++ b/apps/frontend/src/styles/app.css
@@ -242,3 +242,28 @@ a { color: inherit; }
 @media (max-width: 360px) {
   .logo span { display: none; }
 }
+
+/* Short messages (util/Notyf.ts): below the header at the top centre, as an inverted chip of the theme. */
+
+.notyf { padding: 84px 16px 16px; }
+.notyf .notyf__toast {
+  max-width: min(420px, 100%);
+  width: auto;
+  padding: 0 18px;
+  border-radius: 18px;
+  color: var(--bg);
+  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
+  font-weight: 700;
+  font-size: 15px;
+  box-shadow: 0 12px 30px rgba(0, 0, 0, .3);
+  cursor: pointer;
+}
+.notyf .notyf__toast--upper { margin-bottom: 10px; }
+.notyf .notyf__wrapper { padding: 11px 0; }
+.notyf .notyf__icon { display: none; }
+.notyf .notyf__message { line-height: 1.35; text-align: center; }
+
+@media (max-width: 640px) {
+  .notyf { padding-top: 76px; }
+}
+
diff --git a/apps/frontend/src/util/Notyf.ts b/apps/frontend/src/util/Notyf.ts
index 753a1f7..ba90d76 100644
--- a/apps/frontend/src/util/Notyf.ts
+++ b/apps/frontend/src/util/Notyf.ts
@@ -1,4 +1,20 @@
-import { Notyf } from 'notyf';
-import 'notyf/notyf.min.css'; 
-const notyf = new Notyf();
-export default notyf;
\ No newline at end of file
+import { Notyf, NotyfEvent } from 'notyf';
+import 'notyf/notyf.min.css';
+
+// Short messages at the top centre, below the header, in the theme's colors (styles/app.css). Messages are hints
+// about what cannot be done right now, so they carry no icon and go away by themselves or when clicked.
+const notyf = new Notyf({
+    duration: 2500,
+    ripple: false,
+    position: { x: 'center', y: 'top' },
+    types: [{ type: 'error', background: 'var(--ink)', icon: false }],
+});
+
+const messages = {
+    error(message: string) {
+        const notification = notyf.error(message);
+        notification.on(NotyfEvent.Click, () => notyf.dismiss(notification));
+    },
+};
+
+export default messages;
diff --git a/docs/specs/theme-polish/tasks.md b/docs/specs/theme-polish/tasks.md
index 2c6c9e7..cf4b511 100644
--- a/docs/specs/theme-polish/tasks.md
+++ b/docs/specs/theme-polish/tasks.md
@@ -3,7 +3,7 @@
 Work through the tasks in order; each ends with its checks passing and a commit. Tick a task when it is committed.
 
 - [x] 1. **Spec**: requirements, design and tasks.
-- [ ] 2. **Web app messages**: Notyf at the top centre in the theme's colors.
+- [x] 2. **Web app messages**: Notyf at the top centre in the theme's colors.
 - [ ] 3. **Theme cookie**: the web app saves the chosen theme for the login pages.
 - [ ] 4. **Login theme**: the script, the three themes' styles, logo and board masks; checked in Chrome in all three
       themes, at desktop and phone width, with and without the cookie.