From e6243e8207947d3e9a5ff1852b4773efd213fe39 Mon Sep 17 00:00:00 2001
From: Kevin Szuchet <kevin.szuchet@decentraland.org>
Date: Fri, 18 Oct 2024 16:19:04 +0100
Subject: [PATCH] feat: Add Download icon

---
 src/components/Icons/DownloadIcon.tsx | 24 ++++++++++++++++++++++++
 src/components/UserMenu/UserMenu.css  | 12 ++++++++++--
 src/components/UserMenu/UserMenu.tsx  |  4 +++-
 3 files changed, 37 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Icons/DownloadIcon.tsx

diff --git a/src/components/Icons/DownloadIcon.tsx b/src/components/Icons/DownloadIcon.tsx
new file mode 100644
index 00000000..aa6dfe9f
--- /dev/null
+++ b/src/components/Icons/DownloadIcon.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+
+import './styles.css'
+
+const DownloadIcon = () => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0_6_9647)">
+      <path d="M19 9H15V3H9V9H5L12 16L19 9ZM5 18V20H19V18H5Z" fill="#323232" />
+    </g>
+    <defs>
+      <clipPath id="clip0_6_9647">
+        <rect width="24" height="24" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+
+export default DownloadIcon
diff --git a/src/components/UserMenu/UserMenu.css b/src/components/UserMenu/UserMenu.css
index e7d190a9..fa60a5e9 100644
--- a/src/components/UserMenu/UserMenu.css
+++ b/src/components/UserMenu/UserMenu.css
@@ -11,13 +11,21 @@
   height: 100%;
 }
 
-.dcl .user-menu__jump-in {
+.dcl .user-menu__download {
   padding: 14px 32px;
   margin-left: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  column-gap: 2px;
+}
+
+.dcl .user-menu__download svg g path {
+  fill: var(--text-on-primary);
 }
 
 @media (max-width: 991px) {
-  .dcl .user-menu__jump-in {
+  .dcl .user-menu__download {
     display: none;
   }
 }
diff --git a/src/components/UserMenu/UserMenu.tsx b/src/components/UserMenu/UserMenu.tsx
index e5c2a276..d12756f7 100644
--- a/src/components/UserMenu/UserMenu.tsx
+++ b/src/components/UserMenu/UserMenu.tsx
@@ -14,6 +14,7 @@ import { Row } from '../Row/Row'
 
 import './UserMenu.css'
 import { useTabletAndBelowMediaQuery } from '../Media'
+import DownloadIcon from '../Icons/DownloadIcon'
 
 export const UserMenu = React.memo((props: UserMenuProps) => {
   const {
@@ -164,12 +165,13 @@ export const UserMenu = React.memo((props: UserMenuProps) => {
                 </Button>
               ) : null}
               <Button
-                className="user-menu__jump-in"
+                className="user-menu__download"
                 primary
                 onClick={handleDownload}
                 as={'a'}
                 href={config.get('DOWNLOAD_URL')}
               >
+                <DownloadIcon />
                 {i18n.download}
               </Button>
             </>