DownloadIcon wrapper replaced with svg (#793)

- DownloadIcon wrapper replaced with correct svg

For context, Max's explanation is:
- the original download.svg was exported without the whitespace so it
was a 16x16px rather than a 24x24px
- without the white space all the icons will be different sizes
- we will probably find other icons that have previously been exported
incorrectly and will need to be replaced

Author: PetarSimonovic

CHANGELOG.md

@@ -36,6 +36,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Fixed
 
+- Correct download.svg replaces DownloadIcon component (#793)
 - Container rather than media query breakpoints for the web component (#776)
 - `FileMenu` alignment (#720)
 - Edit icon not showing in ContextMenu (#720)

src/assets/icons/download.svg

@@ -1,4 +1,4 @@
-@use './rpf_design_system/colours' as *;
+@use "./rpf_design_system/colours" as *;
 
 :root * {
   --rpf-button-primary-background-color: #{$rpf-teal-primary-default};
@@ -179,3 +179,7 @@
     }
   }
 }
+
+.rpf-button__icon {
+  display: flex;
+}

src/assets/stylesheets/DesignSystemButton.scss

@@ -4,7 +4,7 @@ import { useSelector } from "react-redux";
 import SidebarPanel from "../SidebarPanel";
 import DownloadButton from "../../../DownloadButton/DownloadButton";
 import DesignSystemButton from "../../../DesignSystemButton/DesignSystemButton";
-import DownloadIcon from "../../../../utils/DownloadIcon";
+import DownloadIcon from "../../../../assets/icons/download.svg";
 
 import {
   logInEvent,

src/components/Menus/Sidebar/DownloadPanel/DownloadPanel.jsx

@@ -6,7 +6,7 @@ import { useTranslation } from "react-i18next";
 import "../../../../assets/stylesheets/ProjectsPanel.scss";
 import ProjectName from "../../../ProjectName/ProjectName";
 import ProjectInfo from "./ProjectInfo/ProjectInfo";
-import DownloadIcon from "../../../../utils/DownloadIcon";
+import DownloadIcon from "../../../../assets/icons/download.svg";
 import DownloadButton from "../../../DownloadButton/DownloadButton";
 import SaveButton from "../../../SaveButton/SaveButton";
 import { useSelector } from "react-redux";

src/components/Menus/Sidebar/ProjectsPanel/ProjectsPanel.jsx

@@ -12,7 +12,7 @@ import HomeIcon from "../../../assets/icons/home.svg";
 import ImageIcon from "../../../assets/icons/image.svg";
 import InfoIcon from "../../../assets/icons/info.svg";
 import SettingsIcon from "../../../assets/icons/settings.svg";
-import DownloadIcon from "../../../utils/DownloadIcon";
+import DownloadIcon from "../../../assets/icons/download.svg";
 import StepsIcon from "../../../assets/icons/steps.svg";
 import ProjectsPanel from "./ProjectsPanel/ProjectsPanel";
 
@@ -26,8 +26,6 @@ import InstructionsPanel from "./InstructionsPanel/InstructionsPanel";
 const Sidebar = ({ options = [] }) => {
   const { t } = useTranslation();
 
-  const DownloadIcon24x24 = () => <DownloadIcon width={24} height={24} />;
-
   let menuOptions = [
     {
       name: "projects",
@@ -59,7 +57,7 @@ const Sidebar = ({ options = [] }) => {
     },
     {
       name: "download",
-      icon: DownloadIcon24x24,
+      icon: DownloadIcon,
       title: t("sidebar.download"),
       position: "top",
       panel: DownloadPanel,

src/components/Menus/Sidebar/Sidebar.jsx

@@ -2,7 +2,7 @@ import "../../assets/stylesheets/ProjectBar.scss";
 import { useSelector } from "react-redux";
 import { useTranslation } from "react-i18next";
 import SaveStatus from "../SaveStatus/SaveStatus";
-import DownloadIcon from "../../utils/DownloadIcon";
+import DownloadIcon from "../../assets/icons/download.svg";
 import ProjectName from "../ProjectName/ProjectName";
 import DownloadButton from "../DownloadButton/DownloadButton";
 import SaveButton from "../SaveButton/SaveButton";