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
decentraland · Oct 18, 2024 · 9960ed2 · 9960ed2
1 parent f56ec5b
commit 9960ed2
Show file tree

Hide file tree

Showing 13 changed files with 93 additions and 53 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/"
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,3 +13,4 @@ storiesOf('Footer', module) @@
           <Footer isFullWidth />
         </div>
       ))
+      .add('Without the social links', () => <Footer hideSocialLinks />)