Feat/add new user menu

package.json

@@ -59,14 +59,15 @@
     "@snapshot-labs/snapshot.js": "0.5.5",
     "@tanstack/react-query": "^4.29.7",
     "autoprefixer": "^10.4.4",
+    "chalk": "^4.1.2",
     "chart.js": "^3.8.2",
     "classnames": "^2.3.2",
     "clipboard-copy": "^4.0.1",
     "core-js": "^3.21.1",
     "cssnano": "^6.0.1",
     "dayjs-precise-range": "^1.0.1",
     "dcl-catalyst-client": "^21.5.0",
-    "decentraland-gatsby": "^5.75.1",
+    "decentraland-gatsby": "^5.86.3",
     "decentraland-ui": "^4.1.0",
     "discord.js": "^14.7.1",
     "dompurify": "^2.3.3",
@@ -84,6 +85,7 @@
     "gatsby-plugin-typescript": "^4.10.0",
     "gatsby-source-filesystem": "^4.10.0",
     "gatsby-transformer-sharp": "^4.10.0",
+    "isomorphic-fetch": "^3.0.0",
     "keccak": "^3.0.1",
     "lodash": "^4.17.21",
     "nft.storage": "^7.1.1",

src/components/Layout/Layout.css

@@ -12,12 +12,10 @@
 
 .WiderNavbar.dcl.navbar .ui.container {
   width: unset !important;
-  max-width: 1391px !important;
 }
 
 .ui.container.WiderFooter {
   width: unset !important;
-  max-width: 1440px !important;
 }
 
 @media (min-width: 768px) {
@@ -26,3 +24,8 @@
     padding: 0 24px !important;
   }
 }
+
+.dcl.navbar .ui.container,
+.Navigation .dcl.tabs .ui.container {
+  width: calc(100% - 48px);
+}

src/components/Layout/Navbar.tsx

@@ -1,14 +1,14 @@
 import React from 'react'
 
 import { useLocation } from '@reach/router'
-import UserMenu, { UserMenuProps } from 'decentraland-gatsby/dist/components/User/UserMenu'
+import UserInformation, { UserInformationProps } from 'decentraland-gatsby/dist/components/User/UserInformation'
 import { Mobile, NotMobile } from 'decentraland-ui/dist/components/Media/Media'
 
 import BurgerMenu from './BurgerMenu/BurgerMenu'
 
 const BURGER_MENU_LOCATIONS = ['/', '/proposals/', '/transparency/', '/projects/', '/profile/']
 
-function Navbar(props: UserMenuProps) {
+function Navbar(props: UserInformationProps) {
   const location = useLocation()
   const showBurgerMenu = BURGER_MENU_LOCATIONS.some((burgerLocation) => burgerLocation === location.pathname)
 
@@ -20,7 +20,7 @@ function Navbar(props: UserMenuProps) {
         </Mobile>
       )}
       <NotMobile>
-        <UserMenu {...props} />
+        <UserInformation {...props} />
       </NotMobile>
     </>
   )

src/components/Layout/Navigation.css

@@ -8,6 +8,12 @@
   vertical-align: middle;
 }
 
+.dcl.navbar-account .ui.button.inverted {
+  color: black;
+  border: 1px solid black;
+  border-radius: 6px;
+}
+
 @media (min-width: 768px) {
   .Navigation .dcl.tabs {
     display: flex;

src/entities/Committee/isDAOCommittee.ts

@@ -1,4 +1,4 @@
-import { yellow } from 'colors/safe'
+import chalk from 'chalk'
 import env from 'decentraland-gatsby/dist/utils/env'
 import isEthereumAddress from 'validator/lib/isEthereumAddress'
 
@@ -9,7 +9,7 @@ export const COMMITTEE_ADDRESSES = (env('COMMITTEE_ADDRESSES', '') || '')
 
 const committeeAddresses = new Set(COMMITTEE_ADDRESSES)
 
-committeeAddresses.forEach((address) => console.log('committee address:', yellow(address)))
+committeeAddresses.forEach((address) => console.log('committee address:', chalk.yellow(address)))
 
 export default function isDAOCommittee(user?: string | null | undefined) {
   if (!user) {

src/entities/Debug/isDebugAddress.ts

@@ -1,10 +1,10 @@
-import { magenta } from 'colors/safe'
+import chalk from 'chalk'
 
 import { DEBUG_ADDRESSES } from '../../constants'
 
 const debugAddresses = new Set(DEBUG_ADDRESSES)
 
-debugAddresses.forEach((address) => console.log('debug address:', magenta(address)))
+debugAddresses.forEach((address) => console.log('debug address:', chalk.magenta(address)))
 
 export default function isDebugAddress(address: string | undefined) {
   return address && address.length > 0 && debugAddresses.has(address.toLowerCase())