Enhance UI components and improve accessibility by cyucccx · Pull Request #121 · JacobLinCool/mentora

cyucccx · 2026-03-27T04:07:51Z

This pull request introduces a comprehensive update to the student-facing UI color palette and modal styles across the application, aiming for a lighter, more accessible, and visually consistent design. The main changes include the introduction of new CSS variables for student text colors, refactoring questionnaire and conversation components to use these variables, significant improvements to modal appearance and structure, and consistent application of new styles to forms and tables.

Theme and Color Palette Updates

Added new CSS variables for student text colors in app.css and applied them throughout conversation and questionnaire components for consistent, accessible text coloring. (apps/mentora/src/app.css [1] apps/mentora/src/routes/conversations/[id]/+page.svelte apps/mentora/src/routes/conversations/[id]/+page.svelteR1346-R1349, apps/mentora/src/routes/conversations/[id]/+page.svelteL1424-R1428, apps/mentora/src/routes/conversations/[id]/+page.svelteL1434-R1438, apps/mentora/src/routes/conversations/[id]/+page.svelteL1511-R1515, apps/mentora/src/routes/conversations/[id]/+page.svelteL1525-R1529, apps/mentora/src/routes/conversations/[id]/+page.svelteL1562-R1566, apps/mentora/src/lib/components/questionnaire/SliderQuestion.svelte [2] [3] [4] apps/mentora/src/lib/components/questionnaire/QuestionNavigator.svelte [5] apps/mentora/src/lib/components/questionnaire/ShortAnswerQuestion.svelte [6] apps/mentora/src/lib/components/conversation/TypewriterText.svelte [7]

Modal and Form Styling Enhancements

Overhauled modal styles for a lighter look, including backdrop blur, lighter backgrounds, and improved border and shadow styling. Refactored modal structure to use explicit class mappings and improved footer handling. (apps/mentora/src/lib/components/ui/PopupModal.svelte [1] [2]
Updated assignment form modal to use new consistent form field and button styles, improving visual clarity and accessibility. (apps/mentora/src/lib/components/course/mentor/topics/AssignmentFormModal.svelte [1] [2] [3] [4] [5] [6] [7] [8] [9]

Component-Specific UI Improvements

Improved the appearance and accessibility of the record button in conversation components, including new animation effects for recording state and ARIA attributes. (apps/mentora/src/lib/components/conversation/Record.svelte apps/mentora/src/lib/components/conversation/Record.svelteL126-R183)
Refined table styling for better readability with updated text colors and consistent cell styles. (apps/mentora/src/lib/components/ui/Table.svelte [1] [2]

These changes collectively modernize the student UI, ensure color consistency, and enhance accessibility and usability across the application.

- Updated the Record component to include a recording animation and improved button accessibility with aria attributes. - Modified TypewriterText component to inherit color for better theme consistency. - Enhanced CourseSubmissions component with new questionnaire response handling and improved data structure for responses. - Refined AssignmentFormModal styles for better user experience and consistency across input fields. - Updated QuestionNavigator and ShortAnswerQuestion components to improve text color for better readability. - Adjusted SliderQuestion styles to use CSS variables for consistent theming. - Improved PopupModal styles for better visual hierarchy and user interaction. - Enhanced Table component with consistent text color for better readability. - Updated conversation page styles to utilize CSS variables for text colors, improving theme consistency across the application.

changeset-bot · 2026-03-27T04:07:56Z

⚠️ No Changeset found

Latest commit: 1e0ea50

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

cloudflare-workers-and-pages · 2026-03-27T04:08:32Z

Deploying mentora-app with Cloudflare Pages

Latest commit:	`3f5d3a9`
Status:	✅ Deploy successful!
Preview URL:	https://ed2a4b45.mentora-app.pages.dev
Branch Preview URL:	https://frontend-ui-enhancement.mentora-app.pages.dev

View logs

Copilot

Pull request overview

This PR refreshes UI theming and component styling by introducing new student text color CSS variables, applying them across conversation/questionnaire UI, and redesigning modal/form/table presentation for a lighter, more accessible look.

Changes:

Add student text color tokens in app.css and propagate them through conversation/questionnaire styling.
Refactor modal styling via PopupModal and align mentor assignment modal fields/buttons with the new modal look.
Update mentor submissions questionnaire UX to include summary + per-student expandable views.

Reviewed changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
apps/mentora/src/app.css	Adds `--color-student-text-*` CSS variables for consistent student text colors.
apps/mentora/src/routes/conversations/[id]/+page.svelte	Maps conversation-scoped variables to the new student text tokens; updates hard-coded whites to variables.
apps/mentora/src/lib/components/conversation/TypewriterText.svelte	Switches typewriter/cursor colors to inherit from parent styling.
apps/mentora/src/lib/components/conversation/Record.svelte	Improves record button visuals and adds ARIA pressed state.
apps/mentora/src/lib/components/questionnaire/SliderQuestion.svelte	Replaces hard-coded text colors with student text CSS variables.
apps/mentora/src/lib/components/questionnaire/ShortAnswerQuestion.svelte	Updates textarea/counter colors (currently via hard-coded hex).
apps/mentora/src/lib/components/questionnaire/QuestionNavigator.svelte	Updates navigator counter color (currently via hard-coded hex).
apps/mentora/src/lib/components/ui/PopupModal.svelte	Overhauls modal styling and wiring for header/body/footer/close classes.
apps/mentora/src/lib/components/course/mentor/topics/AssignmentFormModal.svelte	Aligns modal form fields/buttons with updated modal theme and focus styling.
apps/mentora/src/lib/components/ui/Table.svelte	Adjusts default table text colors for readability on light backgrounds.
apps/mentora/src/lib/components/course/mentor/CourseSubmissions.svelte	Adds new questionnaire response summary + per-student expandable UI and supporting data shaping.

Copilot · 2026-03-27T04:11:14Z

+                        <button
+                            type="button"
+                            class={questionnaireView === "summary"
+                                ? "cursor-pointer rounded-full bg-[#4b4b4b] px-4 py-2 text-sm font-medium text-white"
+                                : "cursor-pointer rounded-full px-4 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100"}
+                            onclick={() => (questionnaireView = "summary")}
+                        >
+                            統整摘要
+                        </button>
+                        <button
+                            type="button"
+                            class={questionnaireView === "individual"
+                                ? "cursor-pointer rounded-full bg-[#4b4b4b] px-4 py-2 text-sm font-medium text-white"
+                                : "cursor-pointer rounded-full px-4 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100"}
+                            onclick={() => (questionnaireView = "individual")}
+                        >


The summary/individual toggle buttons change view state but don't expose toggle state to assistive tech. Add aria-pressed (or use a proper tablist pattern with role="tablist"/role="tab" + aria-selected) so screen readers can understand which view is active.

Copilot · 2026-03-27T04:11:14Z

+                                <button
+                                    type="button"
+                                    class="flex w-full cursor-pointer items-start justify-between gap-4 px-5 py-4 text-left hover:bg-gray-50"
+                                    onclick={() => toggleResponseRow(row.id)}
+                                >


The per-student expandable section is controlled by a <button> but is missing aria-expanded (and ideally aria-controls pointing at the collapsible content). Without this, screen readers can't tell whether the section is open.

Copilot · 2026-03-27T04:11:14Z

        {:else if selectedItem?.type === "questionnaire"}
            <!-- Response Table -->
-            {#if responseRows.length === 0}
-                <div class="p-8 text-center text-gray-500">
-                    {m.mentor_submissions_no_results()}
-                </div>
-            {:else}
+            <div class="space-y-4">
                <div
-                    class="overflow-hidden rounded-lg border border-gray-200 bg-white"
+                    class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between"
                >
-                    <Table
-                        columns={[
-                            {
-                                key: "student",
-                                label: m.mentor_submissions_student(),
-                                sortable: true,
-                            },
-                            {
-                                key: "submittedAt",
-                                label: m.mentor_submissions_submitted_at(),
-                                sortable: true,
-                            },
-                            {
-                                key: "responseCount",
-                                label: m.mentor_submissions_response_count(),
-                                sortable: true,
-                            },
-                        ]}
-                        data={responseRows}
-                        actions={renderResponseActions}
-                    />
+                    <div
+                        class="inline-flex w-fit rounded-full border border-gray-200 bg-white p-1 shadow-sm"
+                    >
+                        <button
+                            type="button"
+                            class={questionnaireView === "summary"
+                                ? "cursor-pointer rounded-full bg-[#4b4b4b] px-4 py-2 text-sm font-medium text-white"
+                                : "cursor-pointer rounded-full px-4 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100"}
+                            onclick={() => (questionnaireView = "summary")}
+                        >
+                            統整摘要
+                        </button>
+                        <button
+                            type="button"
+                            class={questionnaireView === "individual"
+                                ? "cursor-pointer rounded-full bg-[#4b4b4b] px-4 py-2 text-sm font-medium text-white"
+                                : "cursor-pointer rounded-full px-4 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100"}
+                            onclick={() => (questionnaireView = "individual")}
+                        >
+                            個別回覆
+                        </button>
+                    </div>
+                    <div class="text-sm text-gray-500">
+                        共 {rawResponses.length} 份回覆
+                    </div>
                </div>


PR description focuses on student-facing UI updates, but this file introduces significant new mentor-side questionnaire analytics/UX (summary cards, individual response accordion, new data shaping). Either update the PR description to include this scope or split these mentor changes into a separate PR for clearer review/rollback.

Copilot · 2026-03-27T04:11:15Z

+            class="min-h-[120px] w-full resize-y rounded-xl bg-white/8 px-5 py-4 text-base text-[#f5f5f5] transition-all duration-200 placeholder:text-[#dfdfdf] focus:ring-0 focus:outline-none"
            {placeholder}
            maxlength={maxLength}
            {value}
            oninput={handleInput}
            rows="4"
        ></textarea>
        {#if maxLength}
-            <div class="absolute right-4 bottom-3 text-xs text-white/40">
+            <div class="absolute right-4 bottom-3 text-xs text-[#d9d9d9]">
                <span
                    class={value.length > maxLength * 0.9
-                        ? "text-white/78"
+                        ? "text-[#f0f0f0]"


This change replaces Tailwind semantic colors (text-white/*) with hard-coded hex values. Since this PR introduces --color-student-text-* variables for consistent theming/accessibility, prefer using those variables (e.g., via text-[var(--color-student-text-primary)] / placeholder:text-[var(--color-student-text-muted)]) so the palette can be adjusted centrally.

Copilot · 2026-03-27T04:11:15Z

    {/if}

-    <div class="text-sm font-medium text-white/60">
+    <div class="text-sm font-medium text-[#e3e3e3]">


Hard-coded text-[#e3e3e3] makes the navigator counter ignore the new student text color tokens introduced in app.css. Use the shared CSS variables (or a shared utility class) so questionnaire UI stays consistent across components.

Copilot · 2026-03-27T04:11:15Z

+                        <button
+                            type="button"
+                            class={questionnaireView === "summary"
+                                ? "cursor-pointer rounded-full bg-[#4b4b4b] px-4 py-2 text-sm font-medium text-white"
+                                : "cursor-pointer rounded-full px-4 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100"}
+                            onclick={() => (questionnaireView = "summary")}
+                        >
+                            統整摘要
+                        </button>
+                        <button
+                            type="button"
+                            class={questionnaireView === "individual"
+                                ? "cursor-pointer rounded-full bg-[#4b4b4b] px-4 py-2 text-sm font-medium text-white"
+                                : "cursor-pointer rounded-full px-4 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100"}
+                            onclick={() => (questionnaireView = "individual")}
+                        >
+                            個別回覆
+                        </button>
+                    </div>
+                    <div class="text-sm text-gray-500">
+                        共 {rawResponses.length} 份回覆
+                    </div>


New UI text is hard-coded in Chinese (e.g., view toggle labels and response count), which bypasses Paraglide i18n and makes localization inconsistent with the rest of this file (which uses m.*). Move these strings into messages/{locale}.json and render them via m.* helpers.

JacobLinCool · 2026-03-27T22:41:42Z

Please run e2e and if possible attach the recorded video so it is easier for others to review.

JacobLinCool · 2026-04-07T07:13:40Z

@cyucccx please solve the merge conflict

…rontend/UI-enhancement

cyucccx requested review from JacobLinCool and Copilot March 27, 2026 04:07

cyucccx linked an issue Mar 27, 2026 that may be closed by this pull request

修正白字白底（字體顏色看不見）的顯示問題 #117

Closed

Copilot started reviewing on behalf of cyucccx March 27, 2026 04:08 View session

Copilot AI reviewed Mar 27, 2026

View reviewed changes

cyucccx added 2 commits March 27, 2026 12:13

fix: resolve lint error

5dd7e32

feat: add mentor submissions labels and improve UI text localization

1e0ea50

cyucccx added 2 commits April 7, 2026 15:24

Merge branch 'main' of https://github.com/JacobLinCool/mentora into f…

ce97730

…rontend/UI-enhancement

fix: resolve lint error

3f5d3a9

JacobLinCool merged commit 8624581 into main Apr 7, 2026
4 checks passed

JacobLinCool deleted the frontend/UI-enhancement branch April 7, 2026 07:43

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Enhance UI components and improve accessibility#121

Enhance UI components and improve accessibility#121
JacobLinCool merged 5 commits into
mainfrom
frontend/UI-enhancement

cyucccx commented Mar 27, 2026

Uh oh!

changeset-bot Bot commented Mar 27, 2026 •

edited

Loading

Uh oh!

cloudflare-workers-and-pages Bot commented Mar 27, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 27, 2026

Uh oh!

Copilot AI Mar 27, 2026

Uh oh!

Copilot AI Mar 27, 2026

Uh oh!

Copilot AI Mar 27, 2026

Uh oh!

Copilot AI Mar 27, 2026

Uh oh!

Copilot AI Mar 27, 2026

Uh oh!

Uh oh!

JacobLinCool commented Mar 27, 2026

Uh oh!

JacobLinCool commented Apr 7, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

cyucccx commented Mar 27, 2026

Uh oh!

changeset-bot Bot commented Mar 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

cloudflare-workers-and-pages Bot commented Mar 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying mentora-app with Cloudflare Pages

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 27, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

JacobLinCool commented Mar 27, 2026

Uh oh!

JacobLinCool commented Apr 7, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

changeset-bot Bot commented Mar 27, 2026 •

edited

Loading

cloudflare-workers-and-pages Bot commented Mar 27, 2026 •

edited

Loading