[INTW26] Revamp Review Page by dqvidl · Pull Request #254 · uwblueprint/website-bp

dqvidl · 2026-02-28T23:53:10Z

Notion ticket link

Revamp Review Scoring/Rubric Page Layout

Implementation description

Implemented Figma designs (swapped columns: left = application Q&A; right = rubric and score input)
Validation before proceeding/submit

Steps to test

Review flow page
Should look and function according to the Figma designs

What should reviewers focus on?

Consistency with designs
Proper validation

Checklist

My PR name is descriptive and in imperative tense
My commit messages are descriptive and in imperative tense. My commits are atomic and trivial commits are squashed or fixup'd into non-trivial commits
I have run the appropriate linter(s)
I have requested a review from the PL, as well as other devs who have background knowledge on this PR or who will be building on top of this PR

mxc-maggiechen · 2026-03-09T16:03:22Z

components/icons/down-caret.icon.tsx

+  >
+    <path
+      d="M4.07001 0.18775C4.27018 -0.0624531 4.65072 -0.0624533 4.85088 0.18775L8.81057 5.13736C9.07248 5.46474 8.83939 5.94971 8.42014 5.94971H0.500762C0.0815088 5.94971 -0.151578 5.46474 0.110327 5.13736L4.07001 0.18775Z"
+      fill="#2D3748"


Let's have this component accept a colour arg, so that we can easily change colours when using this icon in the future

i think this colour you have in here specifically is not in constants/recruitmentPlatformPalette.ts yet, would you mind adding it in the appropriate place?

mxc-maggiechen · 2026-03-09T16:03:44Z

components/review/shared/ReviewStepper.tsx

            size="sm"
            disabled={isButtonDisabled}
            onClick={() => setStage?.(nextStage)}
+            className="shrink-0 whitespace-nowrap !px-4 !py-2 !rounded-[20px] hover:!bg-blue hover:!border-blue hover:!text-white disabled:!opacity-60"


I don't think the hover states for the buttons are working... woudl you mind looking into that?

mxc-maggiechen · 2026-03-09T16:04:40Z

public/common/long_left.svg

could you make this in to a react element and put it in icons? same comments as above, it would be great if we could have the element accept a colour arg that we can directly control in the pages

mxc-maggiechen · 2026-03-15T20:25:42Z

components/review/shared/ReportConflictButton.tsx

Do you mind removing the modal? I think Sparsh's PR for a general modal we can use for conflict report, we will be using that instead.

SaqAsh · 2026-03-15T20:30:12Z

components/common/SplitPageLayout.tsx

+              <Link href={backToHomeHref} passHref>
+                <a
+                  className="font-source no-underline inline-flex justify-center items-center gap-2 w-fit cursor-pointer shrink-0 hover:opacity-90 rounded-full"
+                  style={{


It seems like we can do some of these styles via tailwind?

SaqAsh · 2026-03-15T20:31:39Z

components/review/shared/ReviewScoreInput.tsx

+  </svg>
+);
+
+export const ReviewScoreInput: React.FC<Props> = ({


Let's not type our components as React.FC, no longer standard practice. Just type the props instead :)

SaqAsh · 2026-03-15T20:32:21Z

components/review/stages/ReviewAnswers.tsx

+    <div className="flex flex-col gap-10 w-full">
+      {questions.map((question, idx) => (
+        <div
+          key={idx}


Key as an index is considered bad practice, consider seeing if there's a way to change this.

SaqAsh · 2026-03-15T20:33:12Z

components/review/stages/ReviewRubric.tsx

 }

-export const ReviewRubric = ({ scoringCriteria }: Props) => {
+export const ReviewRubric: React.FC<Props> = ({ scoringCriteria }) => {


Revert this change to what it was before.

SaqAsh · 2026-03-15T20:33:34Z

components/review/stages/ReviewRubric.tsx

-      </div>
+    <div className="flex flex-col gap-6 w-full">
+      {scoringCriteria.map((criteria, idx) => (
+        <div key={idx} className="flex flex-col gap-2">


Consider seeing if you can change the key from idx so something else

SaqAsh · 2026-03-15T20:33:50Z

components/review/stages/ReviewRubric.tsx

+              alignSelf: "stretch",
+              color: "rgba(37, 37, 37, 0.80)",
+              fontFeatureSettings: "'liga' off, 'clig' off",
+              fontSize: "16px",


See if there's a tailwind way to do these styles

SaqAsh · 2026-03-18T01:09:59Z

components/icons/down-caret.icon.tsx

+  colour?: string;
+}
+
+/** Down caret - mirrored up caret */


I think this is obvious from the name

Comment not needed

SaqAsh · 2026-03-18T02:24:05Z

components/review/shared/ReviewScoreInput.tsx

+const UpCaret = () => (
+  <svg


Why we making the UpCaret again if we have a file with an UpCaret already? Lmk if I'm missing something

SaqAsh · 2026-03-18T02:24:58Z

components/review/shared/ReviewScoreInput.tsx

+);
+
+/** Down caret - mirrored up caret */
+const DownCaret = () => (


SaqAsh · 2026-03-18T02:25:36Z

components/review/shared/ReviewScoreInput.tsx

+        onChange={handleInputChange}
+        className="h-full flex-1 min-w-0 border-0 focus:outline-none placeholder:text-[#2D3748] [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+        style={{
+          alignSelf: "stretch",


Can we make these tailwind impossible? If not lmk here

SaqAsh · 2026-03-18T02:26:02Z

components/review/shared/ReviewScoreInput.tsx

+          style={{
+            background: "#FFFFFF",
+            color: "#252525",
+            borderBottom: "1px solid #C4C4C4",


Yeah we shouldn't be inlining styles if we can tailwind it instead

SaqAsh · 2026-03-18T02:26:25Z

components/review/stages/ReviewAnswers.tsx

+    <div className="flex flex-col gap-10 w-full">
+      {questions.map((question, idx) => (
+        <div
+          key={`${question}-${idx}`}


SaqAsh · 2026-03-18T02:26:33Z

components/review/stages/ReviewAnswers.tsx

+            className="font-poppins"
+            style={{
+              color: theme.palette.text.primary,
+              fontSize: "16px",


SaqAsh · 2026-03-18T02:26:48Z

components/review/stages/ReviewAnswers.tsx

-              style={{ alignItems: "flex-start" }}
+              className="rounded-r px-4 py-3 w-full font-source"
+              style={{
+                borderLeft: `4px solid ${theme.palette.semantics.border.light}`,


Can we tailwind this?

SaqAsh · 2026-03-18T02:27:11Z

components/review/stages/ReviewAnswers.tsx

+                style={{
+                  color: theme.palette.text.primary,
+                  fontSize: "16px",
+                  fontWeight: 400,


I think we can import this from somewhere or tailwind it. I think cursor/claude code has a codebase grep

dqvidl requested a review from mxc-maggiechen February 28, 2026 23:53

mxc-maggiechen changed the base branch from staging to INTW26-review-end-page-submission-page February 28, 2026 23:55

mxc-maggiechen changed the base branch from INTW26-review-end-page-submission-page to staging February 28, 2026 23:56

resolve merge conflicts manually

c341bd6

mxc-maggiechen force-pushed the INTW26-revampscoring branch from 2ec188f to c341bd6 Compare March 8, 2026 21:59

use palette instead of raw colours

1f47b70

mxc-maggiechen requested changes Mar 9, 2026

View reviewed changes

dqvidl added 4 commits March 10, 2026 20:03

uppercase P

83681b2

fix capitalization

5b39795

add report button

8a1f5ef

fix score input

bc89b09

mxc-maggiechen reviewed Mar 15, 2026

View reviewed changes

mxc-maggiechen requested a review from SaqAsh March 15, 2026 20:27

SaqAsh requested changes Mar 15, 2026

View reviewed changes

dqvidl added 9 commits March 17, 2026 19:56

adds colour prop to caret icons and caret colour to palette

fad5a4c

fixes stepper button hover

cbe8eb3

adds long-left React icon

9edbb21

removes conflict modal

224588c

uses Tailwind for back link

8d1b1c6

types score input props

ab07f11

fixes answers list key

cf7004c

reverts rubric, fixes key

8103590

polishes review ui

a22300e

SaqAsh requested changes Mar 18, 2026

View reviewed changes

Conversation

dqvidl commented Feb 28, 2026

Notion ticket link

Implementation description

Steps to test

What should reviewers focus on?

Checklist

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants