From 9960ed2a7aeed4c127671dce6e2b14403b58aa0a Mon Sep 17 00:00:00 2001
From: Kevin Szuchet <31735779+kevinszuchet@users.noreply.github.com>
Date: Fri, 18 Oct 2024 16:29:45 +0100
Subject: [PATCH] feat: Always show download (previously jump in), reorder
 navbar items, and hide social media in footer (#563)

* feat(BREAK): Change Jump In for Download and always show the button

* refactor: Reorder navbar items

* feat: Flag to hide social links from footer

* fix: Change jump in default to download

* refactor: Rename main titles of the navbar

* feat: Add Download icon
---
 src/components/Footer/Footer.stories.tsx    |  1 +
 src/components/Footer/Footer.tsx            | 34 ++++++++++--------
 src/components/Icons/DownloadIcon.tsx       | 24 +++++++++++++
 src/components/Navbar/MainMenu/MainMenu.tsx | 12 +++----
 src/components/Navbar/Navbar.defaults.ts    |  6 ++--
 src/components/Navbar/Navbar.types.ts       |  2 +-
 src/components/UserMenu/UserMenu.css        | 12 +++++--
 src/components/UserMenu/UserMenu.i18n.ts    |  2 +-
 src/components/UserMenu/UserMenu.tsx        | 38 ++++++++++-----------
 src/components/UserMenu/UserMenu.types.ts   |  6 ++--
 src/config/env/dev.json                     |  3 +-
 src/config/env/prod.json                    |  3 +-
 src/config/env/stg.json                     |  3 +-
 13 files changed, 93 insertions(+), 53 deletions(-)
 create mode 100644 src/components/Icons/DownloadIcon.tsx

diff --git a/src/components/Footer/Footer.stories.tsx b/src/components/Footer/Footer.stories.tsx
index ed5f2e02..6e651a86 100644
--- a/src/components/Footer/Footer.stories.tsx
+++ b/src/components/Footer/Footer.stories.tsx
@@ -13,3 +13,4 @@ storiesOf('Footer', module)
       <Footer isFullWidth />
     </div>
   ))
+  .add('Without the social links', () => <Footer hideSocialLinks />)
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index 4151b93d..2252f8eb 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -30,6 +30,7 @@ export type FooterProps = {
   isFullscreen?: boolean
   className?: string
   isFullWidth?: boolean
+  hideSocialLinks?: boolean
 }
 
 export class Footer extends React.PureComponent<FooterProps> {
@@ -62,7 +63,8 @@ export class Footer extends React.PureComponent<FooterProps> {
       i18n,
       isFullscreen,
       className,
-      isFullWidth
+      isFullWidth,
+      hideSocialLinks
     } = this.props
 
     let classes = 'dcl footer'
@@ -97,20 +99,22 @@ export class Footer extends React.PureComponent<FooterProps> {
           </div>
         </div>
         <div className="secondary-footer">
-          <div className="social-links">
-            <a href="https://dcl.gg/discord">
-              <i className="social-icon discord" />
-            </a>
-            <a href="https://reddit.com/r/decentraland">
-              <i className="social-icon reddit" />
-            </a>
-            <a href="https://github.com/decentraland">
-              <i className="social-icon github" />
-            </a>
-            <a href="https://twitter.com/decentraland">
-              <i className="social-icon twitter" />
-            </a>
-          </div>
+          {!hideSocialLinks ? (
+            <div className="social-links">
+              <a href="https://dcl.gg/discord">
+                <i className="social-icon discord" />
+              </a>
+              <a href="https://reddit.com/r/decentraland">
+                <i className="social-icon reddit" />
+              </a>
+              <a href="https://github.com/decentraland">
+                <i className="social-icon github" />
+              </a>
+              <a href="https://twitter.com/decentraland">
+                <i className="social-icon twitter" />
+              </a>
+            </div>
+          ) : null}
           <div className="copyright">
             © {new Date().getFullYear()} Decentraland
           </div>
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/Navbar/MainMenu/MainMenu.tsx b/src/components/Navbar/MainMenu/MainMenu.tsx
index 6b0c6d0c..25602cd2 100644
--- a/src/components/Navbar/MainMenu/MainMenu.tsx
+++ b/src/components/Navbar/MainMenu/MainMenu.tsx
@@ -33,12 +33,6 @@ export const MainMenu = (props: MainMenuProps) => {
         title={i18n.create}
         mainUrl={urls[NavbarPages.CREATE]}
       />
-      <MenuItem
-        {...menuItemProps}
-        section={NavbarPages.EXPLORE}
-        title={i18n.explore}
-        mainUrl={urls[NavbarPages.EXPLORE]}
-      />
       <MenuItem
         {...menuItemProps}
         section={NavbarPages.LEARN}
@@ -51,6 +45,12 @@ export const MainMenu = (props: MainMenuProps) => {
         title={i18n.governance}
         mainUrl={urls[NavbarPages.GOVERNANCE]}
       />
+      <MenuItem
+        {...menuItemProps}
+        section={NavbarPages.EXPLORE}
+        title={i18n.explore}
+        mainUrl={urls[NavbarPages.EXPLORE]}
+      />
     </div>
   )
 }
diff --git a/src/components/Navbar/Navbar.defaults.ts b/src/components/Navbar/Navbar.defaults.ts
index 706a00ed..50e3704c 100644
--- a/src/components/Navbar/Navbar.defaults.ts
+++ b/src/components/Navbar/Navbar.defaults.ts
@@ -3,11 +3,11 @@ import { ChainSelectori18n } from '../ChainSelector/ChainSelector.props'
 import { NavbarMenuI18nProps, NavbarSubmenuProps } from './Navbar.types'
 
 export const navbarMainTitlesI18N = {
-  marketplace: 'marketplace',
+  marketplace: 'shop',
   create: 'create',
-  explore: 'explore',
   learn: 'learn',
-  governance: 'governance'
+  governance: 'vote',
+  explore: 'events'
 } as NavbarMenuI18nProps
 
 export const i18nChainSelectorDefault = {
diff --git a/src/components/Navbar/Navbar.types.ts b/src/components/Navbar/Navbar.types.ts
index 22b6f2f4..3a74d010 100644
--- a/src/components/Navbar/Navbar.types.ts
+++ b/src/components/Navbar/Navbar.types.ts
@@ -12,7 +12,7 @@ export enum NavbarPages {
   GOVERNANCE = 'governance'
 }
 
-export type NavbarMenuI18nProps = Record<NavbarPages, NavbarPages>
+export type NavbarMenuI18nProps = Record<NavbarPages, string>
 
 export type NavbarSubMenuItemsProps = {
   column1Title?: string
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.i18n.ts b/src/components/UserMenu/UserMenu.i18n.ts
index 772ac3bd..8b6244c9 100644
--- a/src/components/UserMenu/UserMenu.i18n.ts
+++ b/src/components/UserMenu/UserMenu.i18n.ts
@@ -4,7 +4,7 @@ export const i18n = {
   account: 'Account Settings',
   activity: 'Activity',
   guest: 'Guest',
-  jumpIn: 'Jump In',
+  download: 'Download',
   marketplaceAuthorizations: 'Marketplace Authorizations',
   myAssets: 'My Assets',
   myLists: 'My Lists',
diff --git a/src/components/UserMenu/UserMenu.tsx b/src/components/UserMenu/UserMenu.tsx
index 72479e28..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 {
@@ -25,7 +26,7 @@ export const UserMenu = React.memo((props: UserMenuProps) => {
     onClickSignIn,
     onClickBalance,
     onClickOpen,
-    onClickJumpIn,
+    onClickDownload,
     onClickUserMenuItem,
     ...signInProps
   } = props
@@ -66,26 +67,26 @@ export const UserMenu = React.memo((props: UserMenuProps) => {
     }
   }, [setIsOpen])
 
-  const handleClickJumpIn = useCallback(
+  const handleDownload = useCallback(
     (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
       event.preventDefault()
       onClickUserMenuItem &&
         onClickUserMenuItem(event, {
-          type: UserMenuEventId.JUMP_IN,
+          type: UserMenuEventId.DOWNLOAD,
           track_uuid: trackingId,
-          url: config.get('EXPLORER_URL')
+          url: config.get('DOWNLOAD_URL')
         })
 
       setTimeout(
         () => {
-          onClickJumpIn
-            ? onClickJumpIn(event)
-            : window.open(config.get('EXPLORER_URL'), '_blank', 'noopener')
+          onClickDownload
+            ? onClickDownload(event)
+            : window.open(config.get('DOWNLOAD_URL'), '_blank', 'noopener')
         },
         onClickUserMenuItem ? 300 : 0
       )
     },
-    [onClickJumpIn, onClickUserMenuItem, trackingId]
+    [onClickDownload, onClickUserMenuItem, trackingId]
   )
 
   const handleClickSignIn = useCallback(
@@ -163,17 +164,16 @@ export const UserMenu = React.memo((props: UserMenuProps) => {
                   {i18n.signIn}
                 </Button>
               ) : null}
-              {isSignedIn && (
-                <Button
-                  className="user-menu__jump-in"
-                  primary
-                  onClick={handleClickJumpIn}
-                  as={'a'}
-                  href={config.get('EXPLORER_URL')}
-                >
-                  {i18n.jumpIn}
-                </Button>
-              )}
+              <Button
+                className="user-menu__download"
+                primary
+                onClick={handleDownload}
+                as={'a'}
+                href={config.get('DOWNLOAD_URL')}
+              >
+                <DownloadIcon />
+                {i18n.download}
+              </Button>
             </>
           )}
         </div>
diff --git a/src/components/UserMenu/UserMenu.types.ts b/src/components/UserMenu/UserMenu.types.ts
index a888cd68..74fcd986 100644
--- a/src/components/UserMenu/UserMenu.types.ts
+++ b/src/components/UserMenu/UserMenu.types.ts
@@ -15,7 +15,7 @@ export type UserMenuProps = Omit<
     event: React.MouseEvent<HTMLElement, MouseEvent>,
     trackingId: string
   ) => void
-  onClickJumpIn?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void
+  onClickDownload?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void
 }
 
 export type UserMenuI18N = Record<
@@ -26,7 +26,7 @@ export type UserMenuI18N = Record<
   | 'signOut'
   | 'guest'
   | 'marketplaceAuthorizations'
-  | 'jumpIn',
+  | 'download',
   string
 >
 
@@ -39,6 +39,6 @@ export enum UserMenuEventId {
   SIGN_OUT = 'sign_out',
   GUEST = 'guest',
   MARKETPLACE_AUTHORIZATIONS = 'marketplace_authorizations',
-  JUMP_IN = 'jump_in',
+  DOWNLOAD = 'download',
   BALANCE = 'balance'
 }
diff --git a/src/config/env/dev.json b/src/config/env/dev.json
index a96c5587..52f01d9e 100644
--- a/src/config/env/dev.json
+++ b/src/config/env/dev.json
@@ -33,5 +33,6 @@
   "DOCS_CONTRIBUTOR_URL": "https://docs.decentraland.org/contributor/",
   "DOCS_DAO_URL": "https://docs.decentraland.org/player/general/dao/overview/what-is-the-dao/",
   "BLOG_URL": "https://decentraland.zone/blog/",
-  "LANDING_CREATORS_URL": "https://decentraland.zone/create/"
+  "LANDING_CREATORS_URL": "https://decentraland.zone/create/",
+  "DOWNLOAD_URL": "https://decentraland.zone/download/"
 }
diff --git a/src/config/env/prod.json b/src/config/env/prod.json
index 1d8fe601..6b2ba622 100644
--- a/src/config/env/prod.json
+++ b/src/config/env/prod.json
@@ -33,5 +33,6 @@
   "DOCS_CONTRIBUTOR_URL": "https://docs.decentraland.org/contributor/",
   "DOCS_DAO_URL": "https://docs.decentraland.org/player/general/dao/overview/what-is-the-dao/",
   "BLOG_URL": "https://decentraland.org/blog/",
-  "LANDING_CREATORS_URL": "https://decentraland.org/create/"
+  "LANDING_CREATORS_URL": "https://decentraland.org/create/",
+  "DOWNLOAD_URL": "https://decentraland.org/download/"
 }
diff --git a/src/config/env/stg.json b/src/config/env/stg.json
index bd05ae45..0095781c 100644
--- a/src/config/env/stg.json
+++ b/src/config/env/stg.json
@@ -33,5 +33,6 @@
   "DOCS_CONTRIBUTOR_URL": "https://docs.decentraland.org/contributor/",
   "DOCS_DAO_URL": "https://docs.decentraland.org/player/general/dao/overview/what-is-the-dao/",
   "BLOG_URL": "https://decentraland.today/blog/",
-  "LANDING_CREATORS_URL": "https://decentraland.today/create/"
+  "LANDING_CREATORS_URL": "https://decentraland.today/create/",
+  "DOWNLOAD_URL": "https://decentraland.todat/download/"
 }