Progress bar projects site refresh

[rammodhvadia]

Adding some more vars to customise the progress bar/step navigation in the Instructions Panel:

• --progress-bar-color - sets the colour of the progress bar, if not set, defaults to the value of --editor-color-theme
• --step-buttons-radius - sets the border radius of step navigation buttons (used in projects ui to make circular buttons)
• --display-step-counter - used to display the step counter added in this PR. default to none, setting to flex will display the step counter above the progress bar

Example of all of these in use in projects-ui

Before:

After:

[jamdelion]

Looks good to me. As discussed I think you can tackle the spacing at the bottom of the sidebar footer too (beneath progress bar).

The other thing I was thinking is that the design has structured the elements a little differently in terms of spacing. The overall result looks basically the same, but often I like to try and make sure I match structurally:

(i.e. having the gaps between elements).

Yours currently is:

[adrian-rpf]

One comment on codebase consistency

[adrian-rpf]

codebase standard is '

[Copilot]

Pull request overview

Adds additional styling hooks and UI elements to the Instructions Panel progress bar to support a refreshed “projects” step navigation design.

Changes:

• Adds a step counter element above the progress bar.
• Introduces new CSS custom properties for progress bar color, step button radius, and toggling the step counter’s display.
• Updates the step navigation buttons to use the secondary button style and adjusts layout structure for the progress region.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.

File	Description
src/components/Menus/Sidebar/InstructionsPanel/ProgressBar/ProgressBar.jsx	Adds step counter markup and restructures the progress bar layout; updates button styling.
src/assets/stylesheets/ProgressBar.scss	Adds CSS variables for theming and button radius; styles the new step counter and progress container layout.

---

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

[Copilot]

The new step counter string is hard-coded ("of") and bypasses i18n, so it will remain English in non-English locales. Consider adding a translation key (e.g. instructionsPanel.stepCounter with interpolation for current/total) and rendering it via t(...) instead of a template literal.

Suggested change

	<p className="step-counter">{`${
	currentStepPosition + 1
	} of ${numberOfSteps}`}</p>
	<p className="step-counter">
	{t("instructionsPanel.stepCounter", {
	current: currentStepPosition + 1,
	total: numberOfSteps,
	})}
	</p>

[Copilot]

The new step counter behavior isn't covered by the existing ProgressBar unit tests. Since there is already a dedicated ProgressBar.test.js, it would be good to add an assertion that the counter renders the correct current/total (and, if you switch to i18n, that it uses the translated string).

[Copilot]

border-radius: var(--step-buttons-radius, inherit) overrides the default .btn border radius even when the CSS var isn't set (it will inherit from the parent, likely resulting in 0). If the intent is to keep the existing button rounding by default, use the same fallback as Button.scss (e.g. $space-0-5) or otherwise avoid overriding when the variable is unset.

Suggested change

	border-radius: var(--step-buttons-radius, inherit);
	&:hover,
	&:focus,
	&:active {
	border-radius: var(--step-buttons-radius, inherit);
	border-radius: var(--step-buttons-radius, $space-0-5);
	&:hover,
	&:focus,
	&:active {
	border-radius: var(--step-buttons-radius, $space-0-5);

[Copilot]

Minor: margin: 0 0 0 0; can be simplified to margin: 0; for readability.

Suggested change

	margin: 0 0 0 0;
	margin: 0;