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; }
+}
+

apps/frontend/src/util/Notyf.ts

@@ -1,4 +1,20 @@
-import { Notyf } from 'notyf';
+import { Notyf, NotyfEvent } from 'notyf';
-import 'notyf/notyf.min.css'; 
+import 'notyf/notyf.min.css';
-const notyf = new Notyf();
+
-export default notyf;
+// 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;

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.