♻️ Add IDOL redesign shell, profile, appearance settings, and help by clementroze · Pull Request #1228 · cornell-dti/idol

clementroze · 2026-11-05T01:00:31Z

Summary

Connect the new UI toggle to the redesigned app shell, profile menu, and profile/settings/help pages. Persist the toggle and appearance preferences; redirect away from redesign-only routes when the toggle is disabled.

Rebuild profile editing with the new components, photo crop/upload/drop controls, cancellation resets, and normalized social links.
Add light/dark/system themes and accent colors, plus a searchable help glossary and product directory backed by one JSON file and the DTI website’s original logos.
Redesign login and loading screens; add a soft cursor-responsive login glow that respects reduced motion.
Refine shared controls, modal spacing, semantic card headings, dark-mode contrast, menu motion, and layout stability.

Changes

Title	After
Shell (sidebar + header)
Profile
Settings
Help
Login

Notion/Figma Link

IDOL redesign

Test Plan

ESLint and Prettier pass for all changed frontend files; git diff --check passes.
All 14 existing frontend test suites pass locally (41 tests). No test files were added or modified.
Local login/help pages compile and respond successfully; shared website SVG assets are emitted correctly.
Backend and frontend proxy return successful account-access checks.
GitHub CI passed lint, type-check, formatting, and build on the initial revision; the auth loading wrapper regression found by its test step is fixed in the follow-up.

Note:

Please see Files changed for my own self review
A few of the old pages look a bit wonky because of both styles conflicting but this will be fixed as we keep developpping it :)

coderabbitai · 2026-11-05T01:00:41Z

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

Run configuration

Source mode: Auto
Repository: Unavailable
Branch: Unavailable
File: No configuration file from this repository applied
Commit: Unavailable
Layers: Organization UI
Review profile: QUIET
Plan: Advanced
Run ID: 8a815e06-7253-4a17-975e-2a7c21c14a30

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

Trigger review

Tip

🎯 Customize your risk assessments

Guide how CodeRabbit assesses merge risk and security architecture risk. Highlight sensitive changes and explain your security boundaries using Merge Risk Instructions and Security Risk Instructions in your review settings. Security architecture risk assessments require the Advanced plan or above.

✅ Automatic approvals, with your rules

Let CodeRabbit approve pull requests once required threads are resolved, pre-merge checks pass, and your risk limits are met. Enable Automatic approvals in review settings, with overrides for teams or file paths.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

Share

dti-github-bot · 2026-11-05T01:00:47Z

[diff-counting] Significant lines: 3382. This diff might be too big! Developer leads are invited to review the code.

CLAassistant · 2026-11-05T03:19:20Z

All committers have signed the CLA.

clementroze · 2026-11-05T01:26:36Z

This is for the glow effect on login -

clementroze · 2026-11-05T01:27:43Z

+type Props = { readonly containerRef: RefObject<HTMLDivElement> };
+type Point = { x: number; y: number };
+
+// Uneven overlapping contours, rather than a circular cutout around the cursor.


that's because I want it to be more natural and less geometric

clementroze · 2026-11-05T01:28:28Z

+/** A soft light field that yields locally to the pointer when motion is allowed. */
+export default function LoginGlow({ containerRef }: Props): JSX.Element {
+  const glow = useRef<HTMLDivElement>(null);


in other words - based on the cursor position, the blob moves slightly around. just a fun fact :)

clementroze · 2026-11-05T01:31:08Z

+      // Randomize only after hydration, and only when motion is allowed.
+      phase = Math.random() * Math.PI * 2;


this means that on page load the animation should be different each time

and also it only activates if OS reduce motion preferences are off

clementroze · 2026-11-05T03:11:14Z


 const SignIn = (props: JSX.IntrinsicAttributes & { children?: React.ReactNode }): JSX.Element => (
-  <Suspense fallback={null}>
+  <Suspense fallback={<LoadingScreen />}>


Updated loading screen:

Screen.Recording.2026-11-04.at.10.10.20.PM.mov

clementroze · 2026-11-05T03:46:15Z

+      popupProps={{
+        onDragEnter: (event) => {
+          if (!Array.from(event.dataTransfer.types).includes('Files') || profile.savingPhoto)
+            return;
+          event.preventDefault();
+          dragDepth.current += 1;
+          setDragging(true);
+        },
+        onDragOver: (event) => {
+          if (!Array.from(event.dataTransfer.types).includes('Files')) return;
+          event.preventDefault();
+          const { dataTransfer } = event;
+          dataTransfer.dropEffect = profile.savingPhoto ? 'none' : 'copy';
+        },
+        onDragLeave: (event) => {


some new code to make it easier and more intuitive to change your profile pic!

clementroze · 2026-11-05T03:47:05Z

+/** Accept pasted URLs, domains, or usernames without duplicating the fixed field prefix. */
+export function socialDisplay(kind: SocialKind, input: string): string {
+  let value = input.trim().replace(/^(?:(?:https?:)?\/\/)+/i, '');
+  if (kind === 'website') return value;
+  value = value.replace(/^www\./i, '');
+  const host = SOCIAL_PREFIXES[kind].slice(0, -1);
+  if (value.toLowerCase() === host) return '';


this offers the best user experience possible by stripping away unneccessary parts of what they paste so that it records their input as correctly as possible

clementroze · 2026-11-05T03:48:27Z

A new page!! This is basically a simple with a searchable glossary of relevant DTI and IDOL terms, and a quick explanation of the primary a features a normal DTI user would use.

also includes full catalogue of our products + their descriptions (pulled from cornelldti.org website!)

and theres also link to the slack ##idol-support channel for more help too

clementroze · 2026-11-05T03:49:57Z

no longer used but helpful when developping half-baked ideas and need a shell to test things out on

clementroze · 2026-11-05T03:50:32Z

+    <g className={styles[theme]}>
+      <rect width="128" height="80" fill="var(--mini-bg)" />
+      <rect
+        x="5"
+        y="5"
+        width="118"
+        height="70"
+        rx="5"
+        fill="var(--mini-panel)"
+        stroke="var(--mini-stroke)"


these are custom made SVG illustrations for the dark/light/auto theme selector

zkdlinyne

Hey Clément, thanks for implementing all of this ! I left a couple comments, generally just one thing that really requires action though. I also love the Help page, looks super sleek and also love that it links to every product and that #idol-support is reachable directly through there. Love the little glossary too.
Tested locally and didn't find any breaking changes.

zkdlinyne · 2026-11-07T17:53:55Z

+   * Validates required profile fields and updates the member information.
+   * Shows an error notification if required fields are empty.
+   */
+  const saveProfileInfo = () => {


hey clement, i know this piece of code over here just validates that the info can be saved (all required fields have been entered), but just had a comment about the Save Changes button under Home -> Edit Profile itself. Super nit but I think the Save Changes button is blue and available to be clicked regardless of whether the user has made changes to their profile or not. I like that we get a confirmation modal pop up once we click Save Changes and everything saves successfully, so this is kinda an extra thing but maybe would be cleaner to have the Save Changes only be clickable if edits are made.

good point! done here, it's now disabled until you edit something

zkdlinyne · 2026-11-07T17:58:47Z

+  'blue',
+  'purple',
+  'pink',
+  'red',


Love the idea of allowing users to pick which color theme they want, and love how it reflects across various buttons on IDOL!

Anything else you plan on adding to the scope of the color change other than buttons?

yay glad you like it!

i think since we're using tokens and variables it should be easy to swap out the other colors too. I'll work on some other themes other than Light/Dark that can change the other surfaces too!

zkdlinyne · 2026-11-07T18:02:29Z

@@ -27,3 +27,21 @@ export { QuestionIcon } from '@phosphor-icons/react/dist/csr/Question';
 export { RocketLaunchIcon } from '@phosphor-icons/react/dist/csr/RocketLaunch';
 export { ScalesIcon } from '@phosphor-icons/react/dist/csr/Scales';


Is the scale icon the right one to have for candidate decider ?

i think so! it's about debating the pros and cons of the candidate, so kinda like weighing between 2 things no?

the icons are from Phosphor here, so feel free to browse thru and lmk if you find a better alternative!

clementroze requested a review from a team as a code owner November 5, 2026 01:00

dti-github-bot requested a review from burninglilies November 5, 2026 01:00

dti-github-bot requested review from Destaq and oscarwang20 November 5, 2026 01:00

clementroze changed the title ~~Add IDOL redesign shell, profile, appearance settings, and help~~ ♻️ Add IDOL redesign shell, profile, appearance settings, and help Nov 5, 2026

clementroze removed request for Destaq, burninglilies and oscarwang20 November 5, 2026 01:04

dti-github-bot requested review from Destaq, burninglilies and oscarwang20 November 5, 2026 01:05

clementroze marked this pull request as draft November 5, 2026 01:30

clementroze commented Nov 5, 2026

View reviewed changes

clementroze requested review from ladriennel and zkdlinyne and removed request for Destaq, burninglilies and oscarwang20 November 5, 2026 03:51

clementroze marked this pull request as ready for review November 5, 2026 03:51

dti-github-bot requested review from Destaq, burninglilies and oscarwang20 November 5, 2026 03:54

clementroze removed request for Destaq, burninglilies and oscarwang20 November 5, 2026 04:13

clementroze mentioned this pull request Nov 7, 2026

♻️ Redesign member forms, dev portfolios, and coffee chat bingo #1229

Open

clementroze added this pull request to stack #1230 November 7, 2026 05:09

zkdlinyne reviewed Nov 7, 2026

View reviewed changes

dti-github-bot requested review from Destaq, burninglilies and oscarwang20 November 8, 2026 21:03

clementroze added 8 commits November 8, 2026 16:04

Build IDOL redesign shell, profile, settings, help, and login

d3ad16c

Restore auth loading wrapper and remove login debug controls

05c5420

Replace exported profile edit SVG with Phosphor icon

0c56af1

label change

0474d5b

Refine social logos, field focus, and list hover transitions

4bebebd

Keep profile field values at the default text size

c71cbd7

fixes

684d5c3

Disable profile saving until fields change

4f4e177

clementroze force-pushed the clement-idol-redesign-1 branch from 2bb4e59 to 4f4e177 Compare November 8, 2026 21:04

clementroze requested review from zkdlinyne and removed request for Destaq, burninglilies and oscarwang20 November 8, 2026 21:04

		// Randomize only after hydration, and only when motion is allowed.
		phase = Math.random() * Math.PI * 2;

		@@ -27,3 +27,21 @@ export { QuestionIcon } from '@phosphor-icons/react/dist/csr/Question';
		export { RocketLaunchIcon } from '@phosphor-icons/react/dist/csr/RocketLaunch';
		export { ScalesIcon } from '@phosphor-icons/react/dist/csr/Scales';

Conversation

clementroze commented Nov 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Notion/Figma Link

Test Plan

Note:

Uh oh!

coderabbitai Bot commented Nov 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

dti-github-bot commented Nov 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

CLAassistant commented Nov 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

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!

zkdlinyne left a comment

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!

This branch has not been deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

clementroze commented Nov 5, 2026 •

edited

Loading

coderabbitai Bot commented Nov 5, 2026 •

edited

Loading

dti-github-bot commented Nov 5, 2026 •

edited

Loading

CLAassistant commented Nov 5, 2026 •

edited

Loading