jhalitaksoy/mancala
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): show messages at the top in the theme's colors

Browse Source 
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.
This commit is contained in:
Halit Aksoy 2026-10-17 02:39:41 +03:00
parent 35c2f904a0
commit dfdb4b057c
3 changed files with 46 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
apps/frontend/src/styles/app.css
View File

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

24
apps/frontend/src/util/Notyf.ts
View File

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

2
docs/specs/theme-polish/tasks.md
View File

@ -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.