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.