fix: download button styles

[maxelkins]

Closes https://github.com/RaspberryPiFoundation/digital-editor-issues/issues/1414

Summary

• Changes nested button within DownloadButton to use the Design System Button
• Removes soem hardcoded teal colours from the button theme
  • teal theme style remains when user_editor_styles is true due to global theming

Screenshots

The hover style when false is not quite right, but this should be tackled in https://github.com/RaspberryPiFoundation/digital-editor-issues/issues/1298 its too big of an issue here.

use_editor_style = false

use_editor_style = true

[Copilot]

Pull request overview

This PR adjusts how the app’s download button is rendered and tweaks secondary button styling overrides to address visual issues with the download button in the UI.

Changes:

• Replace DesignSystemButton usage with a direct @raspberrypifoundation/design-system-react Button in DownloadButton.
• Remove some border-color overrides for .rpf-button--secondary in dark/light themes.
• Minor SCSS formatting/indentation cleanup.

Reviewed changes

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

File	Description
src/components/DownloadButton/DownloadButton.jsx	Switches download button rendering to the design-system Button directly (no wrapper).
src/assets/stylesheets/DesignSystemButton.scss	Updates secondary button theme overrides by removing specific border-color customizations.

Comments suppressed due to low confidence (1)

src/components/DownloadButton/DownloadButton.jsx:83

• Switching from DesignSystemButton to the raw design-system <Button> drops wrapper behavior that the rest of the codebase relies on (always adding the base btn class, and mapping fill to rpf-button--fill / rpf-button--fit; see src/components/DesignSystemButton/DesignSystemButton.jsx). As a result, fill passed by DownloadPanel will no longer affect layout, and any DownloadButton usage that doesn’t include btn in className (e.g. ProjectsPanel) will render with different base styles. Consider either keeping DesignSystemButton, or replicating the wrapper’s className logic locally (or updating call sites to include the expected classes / use fullWidth).

  return (
    <Button
      className={className}
      onClick={onClickDownload}
      text={buttonText}
      icon={Icon ? <Icon /> : null}
      type={type}
      {...otherProps}
    />

---

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