Conversation
…ile-feedback-batches-01-15-20260831 fix(mobile): complete OnTrack feedback remediation
…rence-sync fix(theme): sync account preference across devices
Swap the hard-coded colours the M01 shell work left behind to the --ot-* tokens so the shell and global list surfaces flip in dark mode: - notification dropdown message, time, stale and empty text, the unread dot, and the bell badge cut-out ring - task-dropdown breadcrumb icons (were hard black on the dark toolbar) - footer action bar and its status-chip resting and disabled states - the global selectable-table row hover (.f-table and .table-selectable) - the group-selector row hover Footer bar uses --ot-color-page so it keeps contrast with the white status buttons in light mode. Tokens verified present in both palettes. Web suite 800 pass 0 fail, lint clean, build green on Node 22.
…tokens Retarget the runtime-themed surfaces the shell PR did not cover so they flip with data-ot-theme: - status-icon chips read var(--ot-status-<key>) and the AA-fixed var(--ot-status-<key>-on) instead of the compile-time light-only map, so every task-status chip across the app themes correctly - footer status chips drive --status-chip-bg from the same token - grade/quality task-list badges invert against the list surface (--ot-color-inverse-surface/-inverse-text) instead of a black circle that vanished on the dark list - custom scrollbars and the global progress spinner use border/divider tokens Note: adopting the contract's -on foregrounds shifts a few status labels in LIGHT mode too (e.g. working-on-it goes to dark text on amber), which is the contract's WCAG AA choice, not a regression. The status colour used inside the d3/canvas charts still reads the light-only TS map and is a separate follow-up. Build, lint and web suite (800 pass, 0 fail) green on Node 22.
…agement passport Register the theme tokens as Tailwind colours (bg-ot-surface, text-ot-muted, border-ot-divider, ...) so literal colour utilities can be swapped for token-backed ones that flip with data-ot-theme, no dark: variant needed. First use: the engagement passport card that showed as a white slab on the dark dashboard.
…me tokens Complete the per-screen dark-mode migration (THM-M02 / THM-M04) and the browser chrome (THM-W01): - ~600 hard-coded colour swaps across ~90 screen files: student dashboards, task and comment views, unit editors, modals, viewers and calendars now use the bg-ot-*/text-ot-*/border-ot-* Tailwind utilities and var(--ot-*) SCSS tokens, so they flip with data-ot-theme. - ThemeColorService resolves --ot-* tokens to concrete colours for ngx-charts and other JS that cannot consume a CSS var. The status pie, task-status cards and burndown series read status/chart tokens; the pie re-renders on a live theme flip. - THM-W01: the browser/PWA address-bar colour follows the resolved theme. Web suite 800 pass 0 fail, lint clean, build green on Node 22.
…olish Re-base dark mode on a GitHub-blue ground and finish dark-mode coverage and polish across the app: - Dark tokens re-based on a GitHub-blue ramp; softened light-mode whites - Vivid, AA-verified status colours; the task-status card wraps in its status colour (solid header, tinted body, coloured border); the status header icon is enlarged with tighter padding - Outlined buttons given a clear control fill and border so they read as buttons in both themes - ngx-gantt Task Planner themed dark by overriding --gantt-color-* on the <ngx-gantt-root> host (its inline light defaults beat a :root rule) - Reusable f-empty-state component; empty states added to 21 tables and the timeout/unauthorised pages centred and tokenised - Portfolio wizard fills the viewport with tightened spacing; body fills the viewport so short pages no longer show a page-colour seam - Global keyboard :focus-visible ring and prefers-reduced-motion support - Even, comfortable header icon-button and avatar hover targets - Remaining screens/charts migrated to the --ot-* theme tokens
Clupai8o0
requested review from
David-Tenni,
anaghwadhwa123 and
maplefoxgit
September 11, 2026 10:44
The profile form's main container used justify-center on a full-width flex row.
When the content was wider than a phone, centring pushed the overflow off BOTH
edges, so headings clipped on the left ('otification Settings') and fields bled
off the right. Switch to justify-start and let the First/Second Name pair stack
below the small breakpoint. Verified at 390px in both themes: no clipping, no
horizontal page scroll.
The task Details sub-tabs centred their overflowing strip, which clipped the
active first and last labels at the viewport edges ('ask Details' /
'Submissic'). Left-align the strip and drop the auto margins so the active tab
stays whole and the rest scrolls into view. Verified at 390px in both themes.
The unit switcher menu was pinned to a hard 400px, wider than a phone viewport; cap it to calc(100vw - 16px). And the global 2px outward focus ring was clipped by menu/option panel edges into two harsh bars on the focused row; inset it for menu items and options so it frames the row. Verified at 390px in both themes.
This was referenced Sep 11, 2026
The global keyboard focus ring uses :is(a[href], ...):focus-visible, which lands at (0,2,1) specificity because of the a[href] arm, so the earlier menu-item inset rule (0,2,0) never won and the ring stayed a clipped pair of bars. Scope the inset under the panel ancestors to clear it. Verified under keyboard focus in dark: the ring now frames the focused row.
Clupai8o0
changed the title
…stence THM-F01. Adds the --ot-* design-token layer and the ThemeService that resolves and persists the user's theme choice. - Token layer: src/styles/tokens/_light.scss and _dark.scss declare every --ot-* token, light as the bare :root default and dark under [data-ot-theme=dark]. These two files are the only place a colour value is declared. Wired into styles.scss. - ThemeService: preference (light/dark/system) vs resolved (light/dark), system detection via matchMedia, persistence in localStorage under the ontrack.theme.preference key, writes the data-ot-theme marker and colorScheme. Junk or blocked storage falls back to system, never a hard dark. One matchMedia listener, removed on destroy. - Proof page at /theme-demo demonstrating the section-13 component-state matrix and the token set, repainting in both themes with no reload. Out of scope by contract: the accessible toggle (THM-F02), the Tailwind dark variant (THM-F03), the no-flash <head> script and its drift test (THM-F04), and the theme-color browser chrome (THM-W01). Built against doubtfire-web 11.0.x @ 0ba9fd7. 17 unit tests pass, ng build clean, eslint --max-warnings 0 clean.
Build the app shell and shared components on top of the THM-F01 token foundation so they follow the resolved-theme marker, with no visual change in light mode. - Dark Angular Material M2 theme keyed to :root[data-ot-theme='dark'], built from a desaturated indigo palette (500 = #5457e5) so filled buttons, the fab and progress bars read as one accent with white labels (white measures 5.4:1). Repoint card, menu, dialog and select container colours onto the raised surface token via the --mat-* variables. - Rework the dark token ramp to a cohesive cool-slate palette with a single indigo accent (was warm greys sitting too close together). - Bind Tailwind's dark: variant to the marker (THM-F03). - Add a single-button theme toggle that flips light and dark from the resolved theme (THM-F02), registered in the module and placed in the header; eagerly inject ThemeService in AppComponent so the marker is stamped on every device, not only where the toggle renders. - Migrate hardcoded colours to tokens in the header, home dashboard, the f-chip shared component, the edit-profile form, the hero sidebar, and the two places that set the body background inline in JS. Each token resolves to the original light value and carries a legacy var() fallback. Tests: theme service 17, toggle 2, app/f-chip/header/edit-profile updated and green. Lint clean at --max-warnings 0.
11.0.x took about twenty PRs today (the theme foundation, the calendar batch, the header and profile fixes). Four files conflicted, and each keeps this branch's reviewed redesign: - header: the notification bell stays on the phone toolbar; the test for the toolbar is adapted to that, with the theme toggle still leaving it on a phone. - calendar dialog: the redesigned template, which already binds every method the merged component has. Of the base branch's calendar tests, the reviewed spec already covers ten; the two clipboard ones it lacked move to their own spec.
…tions The API now tells a tutor when a student asks for help or for an extension. The notification list gives each its own icon and label, and the task notifications setting says it covers submissions, help requests and extension requests for staff, since the extension request is filed under task notifications so a tutor can switch it off.
- Bell menu: the type and time line was black and the icons used light-only colours. It now uses the same tokens as the notifications page. Feedback icons take the link blue in both, since dark primary is about 2:1 as a glyph. - Splash, startup progress bar and recovery screen: hard-coded white since the mobile merge. They now use the page, surface and text tokens. - ngx-skeleton-loader paints a fixed light grey on its own element, so every loading placeholder stayed light. It now uses the divider token, like the hand-built skeletons. - Dialog error boxes, the demo group note, the burndown summary tiles, the Task Planner prerequisites dialog and the demo PPI preview drop their light-only colours for tokens.
- Calendar dialog: kept the redesigned dialog and added #220's HelpHubs, lectures and classes option, its demo-mode block, its privacy note and the new intro and Google wording. Each option now sits on its own line. Both new calendar tests moved into the redesigned spec. - Demo controls: kept the scenario-based page and added #220's Unit Hub section, hosted HelpHub links form and Teams draft, with a spec for them. The README keeps the scenario text and adds the Unit Hub notes. - Home: kept the redesigned page and added the Unit Hub entry above the unit cards, in theme tokens. - This branch's demo store only turns on for a loaded scenario, so the Unit Hub and meeting-link specs configure one first. - Dark mode: the Teams meeting composer moves to theme tokens, and the text fields in it, in the demo links form and in Unit Hub get an edge that shows in dark.
…e task list The count hangs off the circle's top right corner, and the circle sits against the list's scroll edge, which clips overflow. On a phone the list has no right padding, so the count was cut in half.
The Material Icons font the app loads has no event_upcoming ligature, so it drew the calendar glyph for event and then a second upcoming glyph that spilled out of the icon box over the message. The task list's start date icon had the same name and was only hidden by its clipping. Both use event now, which is the glyph they were already showing.
Author
|
Hi Maple, going back through your three reviews against the current head (1ec29ef). node_modules symlink (review at 0c6ecf4). Fixed by your commit db6e6e9 "fix: remove machine-specific node_modules symlink". group_set_id sent as -1 (review at db6e6e9). Fixed by your commit 070ffae "fix(tasks): preserve unresolved group assignments on save". An unresolved cache entry is now undefined and gets left out of the payload. Only an explicit null from the individual work control (task-definition-who.component.ts sets Live device checks (review at 18b54cd). No commit covers this one. The phone, tablet and desktop smoke evidence in light and dark mode, and the installed PWA and provider checks, still need a real browser and device run. So I'm not claiming them here and I understand the request for changes stays until that evidence is attached. Two small fixes went on since your last review: 8e122e6 keeps the new comment count on the task list status circle from being clipped at the list edge, and 1ec29ef swaps the due soon icon to one the Material Icons font has, because event_upcoming drew a second glyph over the message. This head merges cleanly with 11.0.x as of e9935b6, and test, lint and build are green on it. Once #217 lands on 11.0.x this branch will need 11.0.x merged in again. |
This was referenced Sep 14, 2026
Brings the branch up to date and resolves two template conflicts. staff-task-list: 11.0.x fixed the empty state so it is not a lone unlabelled icon, adding role="status", aria-hidden on the icon and an sr-only message for the narrow rail. This branch had already replaced that block with per-state f-empty-state panels, which carry a real message and hide their own icon, but it rendered nothing at all when narrow and so dropped the announcement. The resolved version keeps the richer panels and restores the narrow case: each state is wrapped in role="status" and renders an sr-only message when there is no room to draw one. The five tests that came with the upstream fix are retargeted at the new markup rather than relaxed, and they assert the same things: descriptive text, a decorative icon, nothing shown while loading or before a result or when results exist, and the message still reachable in the narrow sidebar. They now read the message from the component so the per-state wording is covered too, and the spec imports the real empty-state component so it asserts rendered output. task-viewer-state: 11.0.x replaced the ng-flex-layout directives in this file with Tailwind classes. This branch had already rewritten the same file and removed those directives by other means, so the incoming change has nothing left to convert. Took this branch's version after confirming no fx* directives remain in the file, which is what that work set out to achieve. Pre-existing on both sides of this merge and not touched here: pdf-viewer (three specs) and tutor-discussion fail the same way before and after, verified by running them at 1ec29ef and at the merge result.
…lved to The five tests that arrived with the 11.0.x empty-state fix assert the old always-rendered .center-task-list element toggled with [hidden]. The resolved template renders a separate block per list state, so "hidden" is now "not in the DOM" and the wrapper is found by role="status". The assertions are the same ones, not weaker: descriptive text, a decorative icon, nothing rendered while loading or before a result or when results exist, and the message still reachable when the rail is too narrow to draw it. Two of them now read the expected wording from the component instead of a fixed string, which covers the per-state messages rather than a single generic one, and the spec imports the real empty-state component so it asserts rendered output rather than an unknown element. Should have gone in with the merge commit. Only the two templates were staged.
Author
|
Closing: this work is now on |
Author
|
Update, 27 Sep: in the end the upstream PRs to thoth-tech were cut from org The upstream PRs are thoth-tech/doubtfire-api#119 to thoth-tech/doubtfire-api#127, thoth-tech#534 to thoth-tech#544, and thoth-tech/doubtfire-deploy#43. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What this lands
Dark mode and a redesign of the student and staff pages, on one design language: token colours in both themes, cards with even spacing, page headers with actions on the right, and real loading, empty and error states. It also carries Maple Fox's reviewed mobile integration (#217), which was merged into this branch, so merging this PR brings #217 with it.
1. Theme and dark mode
src/styles/tokens/_light.scssand_dark.scss, recorded with their contrast ratios indocs/theme/THEME-CONTRACT.md.#424242.2. Student pages
3. Staff pages
Inbox and marking, the unit task viewer, Students, Groups, portfolio marking, Analytics, unit administration (all tabs), Rollover, the staff home and unit lists, and Discussion and check-in. The task tabs (History, Similarities, Student notes, Mod notes) and the Moderation notes and Assess task quality dialogs follow the same pattern. Each area fixes the bugs found in it, most with a spec that fails without the fix.
4. Fixes along the way
/users/:id, so the student now comes from the unit's student list. The Mod notes tab threw on every render because of it, which also stopped the header menus opening.Unit.refreshStudentsnever subscribing,Project.isEnrolledInandTutorial.descriptionthrowing on missing data,Project.assignGradekeeping a failed rationale.Relationship to other PRs
1fee4b7d1), including feat: centralize unit updates, Teams meetings and study essentials #220 (Unit Hub) and fix(a11y): label the task badges used by students #212.Built against
theme/status-and-globals@a5c9d5618, on11.0.x@1fee4b7d111.0.x(fix(tutorials): format a meeting time without crashing on odd input #155); checked live against it (6cbf928d).Scope
703 files, +53,590 / -16,917 (GitHub's count), 254 non-merge commits ahead of
11.0.x, including #217's.Testing
On Node 22 at
a5c9d5618:npm run test:ci: exit 0, 233 files, 1721 tests passednpx ng lint --max-warnings 0: exit 0npm run typecheck: exit 0npx ng build: exit 0, no warningsnpx prettier --checkon the files changed in each round: exit 0Checked by hand on the local demo stack: as a convenor in light and dark (inbox, task tabs with seeded history and similarity data, unit administration, the student task page as staff, the PDF viewer at desktop and phone width); student-only views through their specs and earlier live passes.
Known open items
calendar_add_on) is not in the icon font, so it shows blank.