BigBlueButton Meeting Interface Redesign

I’m running BigBlueButton 3.0.13 and want the live meeting interface to match the JPG mock-up I’ve already prepared. The job is to build a new client layout (HTML/SCSS/React components used by BBB’s Meteor front-end) so that, once I drop the files in, every element—toolbar, participant list, video tiles, chat panel—sits exactly where the mock-up shows it and respects the same spacing, icons, and colours.

You will not receive server access. Instead, I need:

• Complete, well-commented source code for the custom layout.
• A clear, step-by-step integration guide: where each file goes, any npm/Meteor commands, and how to enable the layout in BBB 3.0.13.

Scope stays strictly inside the meeting interface; dashboards, recordings, etc. remain unchanged. The finished layout must remain responsive, preserve all existing BBB features (screen share, breakout rooms, chat, polls), and load without console errors.

I’ll supply the mock-up and brand assets as soon as we start. Delivery is accepted once I can follow your guide on a fresh BBB 3.0.13 install and see a pixel-perfect replica of the design.