refactor(frontend): introduce MockMate design system documentation and UI updates by CUinspace233 · Pull Request #7 · CUinspace233/mock-mate

CUinspace233 · 2026-06-08T16:57:07Z

Added a comprehensive DESIGN.md file outlining the MockMate design system, including principles, visual system, and product positioning.
Updated the favicon in index.html to use an SVG format for better scalability.
Removed unused CSS animations from App.css to streamline styles.
Enhanced theme colors and typography in theme.ts for improved visual consistency.
Refactored components to align with the new design system, including updates to AuthLayout, InterviewChat, and ProgressChart for better layout and styling.
Introduced a new MockMateIcon component for consistent branding across the application.
Adjusted various components to improve accessibility and user experience, including layout refinements in InterviewTraining and ResumeDrill.

Copilot

Pull request overview

This PR introduces a documented MockMate design system and refactors the frontend UI to match a ChatGPT-like “workspace” layout (sidebar navigation, centered chat thread, sticky composer), while aligning colors/typography/elevation with the new theme tokens.

Changes:

Added DESIGN.md and updated theme tokens to establish a consistent visual system.
Introduced an authenticated AppShell + SidebarNav layout and migrated major pages (Chat/Resume Drill/History/Progress) into this shell.
Refactored chat UI into smaller primitives (PracticeSetupPanel, ChatThread, MessageBubble, ChatComposer, EvaluationCard) and refreshed Auth pages with shared branding (MockMateIcon, AuthPreview).

Reviewed changes

Copilot reviewed 26 out of 26 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
frontend/src/theme.ts	Updates palette, background levels, radii, shadows, and card hover elevation.
frontend/src/stores/useAuthStore.ts	Adjusts persisted auth state defaults and API key encryption behavior.
frontend/src/components/ResumeDrill.tsx	Tunes Resume Drill layout sizing, grid columns, and overflow/gap behavior.
frontend/src/components/resume-drill/ResumeDrillSidebar.tsx	Restyles the resume drill “inspector” panel to match the design system.
frontend/src/components/resume-drill/ResumeDrillChatPanel.tsx	Adds bordered/surfaced chat panel styling and neutralizes status/chip colors.
frontend/src/components/RegisterPage.tsx	Updates mobile brand header to use `MockMateIcon` and simplified typography.
frontend/src/components/ProgressChart.tsx	Restyles stats cards and page padding/max-width to fit the new workspace look.
frontend/src/components/MockMateIcon.tsx	Adds reusable brand icon component backed by `/mock-mate.svg`.
frontend/src/components/LoginPage.tsx	Updates mobile brand header to use `MockMateIcon` and simplified typography.
frontend/src/components/InterviewTraining.tsx	Replaces tabs-based layout with `AppShell` + `WorkspaceMain` and adds setup panel flow.
frontend/src/components/InterviewHistory.tsx	Restyles history statistics/filter/table containers for the flatter panel system.
frontend/src/components/InterviewChat.tsx	Refactors chat UI into `ChatThread` + `ChatComposer` and introduces new empty state layout.
frontend/src/components/interview/PracticeSetupPanel.tsx	Adds collapsible setup surface for position/difficulty/model/API key/job description, etc.
frontend/src/components/interview/MessageBubble.tsx	Adds unified message bubble rendering (user/AI/evaluation) with Markdown support.
frontend/src/components/interview/EvaluationCard.tsx	Adds structured evaluation rendering (score, summary, strengths/improvements, keywords).
frontend/src/components/interview/ChatThread.tsx	Adds scrollable thread container and progress chips.
frontend/src/components/interview/ChatComposer.tsx	Adds sticky composer UI with send + optional voice controls.
frontend/src/components/AuthLayout.tsx	Replaces marketing-gradient auth layout with restrained preview + card form layout.
frontend/src/components/auth/AuthPreview.tsx	Adds an auth-page product preview panel aligned with design system tokens.
frontend/src/components/app-shell/WorkspaceMain.tsx	Adds standardized main-content host with consistent padding/max-width.
frontend/src/components/app-shell/SidebarNav.tsx	Adds persistent sidebar navigation (routes, daily count, user menu, GitHub link).
frontend/src/components/app-shell/AppShell.tsx	Adds overall app frame, responsive drawer behavior, and mobile top bar.
frontend/src/App.css	Removes unused decorative animations (float/gradientShift).
frontend/src/api/api.ts	Changes resume upload to omit `openai_model` when not provided (backend default applies).
frontend/index.html	Switches favicon to SVG (`/mock-mate.svg`).
DESIGN.md	Adds comprehensive design system documentation and acceptance criteria.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

      language: "en",
      setLanguage: (language) => set({ language }),
-      openaiModel: "gpt-5.4-mini",
+      openaiModel: "",
      setOpenaiModel: (model) => set({ openaiModel: model }),


+        } else {
+          setAvailableModels([]);
+          setOpenaiModel("");
+          setApiKeyStatus("invalid");
        }


        } else {
          setApiKeyStatus("invalid");
+          setAvailableModels([]);
+          setOpenaiModel("");
        }


      } catch {
        setApiKeyStatus("invalid");
+        setAvailableModels([]);
+        setOpenaiModel("");
      }


+        onKeyDown={(event) => {
+          if (event.key === "Enter" && (event.ctrlKey || event.metaKey)) {
+            onSend();
+          }
+        }}


+        {items.map((item) => (
+          <Typography key={item} level="body-sm" sx={{ color: "neutral.700", lineHeight: 1.55 }}>
+            {item}
+          </Typography>
+        ))}


+              <IconButton
+                component="a"
+                href="https://github.com/CUinspace233/mock-mate"
+                target="_blank"
+                rel="noopener noreferrer"
+                variant="plain"
+                size="sm"
+                color="neutral"
              >
-                {feature.icon}
-              </Box>
-              <Box>
-                <Typography sx={{ color: "#fff", fontWeight: 600, fontSize: "0.95rem" }}>
-                  {feature.title}
-                </Typography>
-                <Typography sx={{ color: "rgba(255,255,255,0.55)", fontSize: "0.82rem" }}>
-                  {feature.desc}
-                </Typography>
-              </Box>
-            </Box>
-          ))}
-        </Box>
-
-        {/* Trust line */}
-        <Box
-          sx={{
-            position: "absolute",
-            bottom: 32,
-            display: "flex",
-            alignItems: "center",
-            gap: 1,
-          }}
-        >
-          <Typography
-            sx={{
-              color: "rgba(255,255,255,0.35)",
-              fontSize: "0.75rem",
-            }}
-          >
-            Trusted by candidates preparing for top tech companies
-          </Typography>
-          <IconButton
-            component="a"
-            href="https://github.com/CUinspace233/mock-mate"
-            target="_blank"
-            rel="noopener noreferrer"
-            variant="plain"
-            size="sm"
-            sx={{ "& svg": { color: "rgba(255,255,255,0.5)" }, "&:hover": { bgcolor: "transparent" }, "&:hover svg": { color: "#fff" } }}
-          >
-            <GitHubIcon fontSize="small" />
-          </IconButton>
-        </Box>
+                <GitHubIcon />
+              </IconButton>


+          <IconButton variant="plain" color="neutral" onClick={() => setDrawerOpen(true)}>
+            <MenuIcon />
+          </IconButton>


…d UI updates - Added a comprehensive DESIGN.md file outlining the MockMate design system, including principles, visual system, and product positioning. - Updated the favicon in index.html to use an SVG format for better scalability. - Removed unused CSS animations from App.css to streamline styles. - Enhanced theme colors and typography in theme.ts for improved visual consistency. - Refactored components to align with the new design system, including updates to AuthLayout, InterviewChat, and ProgressChart for better layout and styling. - Introduced a new MockMateIcon component for consistent branding across the application. - Adjusted various components to improve accessibility and user experience, including layout refinements in InterviewTraining and ResumeDrill.

CUinspace233 requested a review from Copilot June 8, 2026 16:57

CUinspace233 self-assigned this Jun 8, 2026

Copilot started reviewing on behalf of CUinspace233 June 8, 2026 16:57

View session

CUinspace233 added the enhancement New feature or request label Jun 8, 2026

Copilot AI reviewed Jun 8, 2026

View reviewed changes

CUinspace233 force-pushed the frontend_redesign branch from e806824 to d59ef7f Compare June 8, 2026 17:34

CUinspace233 force-pushed the frontend_redesign branch from d59ef7f to f83e214 Compare June 8, 2026 17:37

CUinspace233 merged commit 91678bc into main Jun 8, 2026
2 checks passed

Navigation Menu

Repository navigation

refactor(frontend): introduce MockMate design system documentation and UI updates - #7

refactor(frontend): introduce MockMate design system documentation and UI updates#7
CUinspace233 merged 1 commit into
mainfrom
frontend_redesign

CUinspace233 commented Jun 8, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

CUinspace233 commented Jun 8, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants