decentraland · andyesp · Oct 19, 2023 · Oct 11, 2023 · Oct 11, 2023 · Oct 11, 2023
diff --git a/gatsby-browser.js b/gatsby-browser.js
@@ -20,16 +20,15 @@ import AuthProvider from 'decentraland-gatsby/dist/context/Auth/AuthProvider'
 import FeatureFlagProvider from 'decentraland-gatsby/dist/context/FeatureFlag/FeatureFlagProvider'
 import segment from 'decentraland-gatsby/dist/utils/segment/segment'
 import Layout from './src/components/Layout/Layout'
-import Navbar from './src/components/Layout/Navbar'
 import IdentityModalContextProvider from './src/components/Context/IdentityModalContext'
-import BurgerMenuStatusContextProvider from './src/components/Context/BurgerMenuStatusContext'
 import ExternalLinkWarningModal from './src/components/Modal/ExternalLinkWarningModal/ExternalLinkWarningModal'
 import IdentityConnectModal from './src/components/Modal/IdentityConnectModal/IdentityConnectModal'
 import Segment from "decentraland-gatsby/dist/components/Development/Segment"
-import { SEGMENT_KEY, SSO_URL } from "./src/constants"
+import { SEGMENT_KEY, SNAPSHOT_STATUS_ENABLED, SSO_URL } from "./src/constants"
 import { flattenMessages } from "./src/utils/intl"
 import en from "./src/intl/en.json"
 import SnapshotStatus from "./src/components/Debug/SnapshotStatus"
+import UserInformation from 'decentraland-gatsby/dist/components/User/UserInformation'
 
 const queryClient = new QueryClient()
 
@@ -47,12 +46,10 @@ export const wrapPageElement = ({ element, props }) => {
     <QueryClientProvider client={queryClient}>
       <IntlProvider defaultLocale='en' locale='en' messages={flattenMessages(en)}>
         <IdentityModalContextProvider>
-          <BurgerMenuStatusContextProvider>
-            <SnapshotStatus />
-            <Layout {...props} rightMenu={<Navbar />}>
+            {SNAPSHOT_STATUS_ENABLED && <SnapshotStatus />}
+            <Layout {...props} rightMenu={<UserInformation />}>
               {element}
             </Layout>
-          </BurgerMenuStatusContextProvider>
           <ExternalLinkWarningModal />
           <IdentityConnectModal />
         </IdentityModalContextProvider>

diff --git a/src/components/Banner/Banner.css b/src/components/Banner/Banner.css
@@ -4,6 +4,7 @@
   align-content: stretch;
   position: relative;
   padding: 16px 16px 16px 20px;
+  margin-top: 24px;
   margin-bottom: 8px;
   border-radius: 12px;
   outline: 1px solid #0000000a;
@@ -42,10 +43,6 @@
 }
 
 @media (max-width: 767px) {
-  .OnlyMobile .Banner {
-    display: flex;
-  }
-
   .Banner .Banner__Content {
     display: contents;
     flex-direction: column;
@@ -62,7 +59,7 @@
     z-index: 1;
   }
 
-  .OnlyMobile .Banner .Banner__Button {
+  .Banner .Banner__Button {
     padding-left: 0;
     padding-right: 0;
     min-width: 87px;
@@ -71,6 +68,7 @@
 
 @media (min-width: 768px) {
   .Banner {
+    margin-top: 0;
     margin-bottom: 35px;
   }
 

diff --git a/src/components/Category/CategoryList.tsx b/src/components/Category/CategoryList.tsx
@@ -5,7 +5,6 @@ import { Header } from 'decentraland-ui/dist/components/Header/Header'
 
 import { ProposalType, toProposalType } from '../../entities/Proposal/types'
 import { getUrlFilters } from '../../helpers'
-import { useBurgerMenu } from '../../hooks/useBurgerMenu'
 import useFormatMessage from '../../hooks/useFormatMessage'
 import ActionableLayout from '../Layout/ActionableLayout'
 
@@ -18,28 +17,17 @@ function CategoryList() {
   const location = useLocation()
   const params = useMemo(() => new URLSearchParams(location.search), [location.search])
   const type = toProposalType(params.get('type')) ?? undefined
-  const { setStatus } = useBurgerMenu()
-
-  function handleClick() {
-    setStatus((prevState) => ({ ...prevState, open: false }))
-  }
 
   return (
     <ActionableLayout leftAction={<Header sub>{t(`page.proposal_list.categories`)}</Header>}>
-      <CategoryOption
-        type={'all_proposals'}
-        href={getUrlFilters(FILTER_KEY, params)}
-        active={type === null}
-        onClick={handleClick}
-      />
+      <CategoryOption type={'all_proposals'} href={getUrlFilters(FILTER_KEY, params)} active={type === null} />
       {(Object.keys(ProposalType) as Array<keyof typeof ProposalType>).map((key, index) => {
         return (
           <CategoryOption
             key={'category_list' + index}
             type={ProposalType[key]}
             href={getUrlFilters(FILTER_KEY, params, ProposalType[key])}
             active={type === ProposalType[key]}
-            onClick={handleClick}
           />
         )
       })}

diff --git a/src/components/Category/CategoryOption.tsx b/src/components/Category/CategoryOption.tsx
@@ -122,7 +122,9 @@ export default function CategoryOption({ active, type, className, count, subtype
         <span className="CategoryOption__TitleContainer">
           <span>
             {getCategoryIcon(type, CategoryIconVariant.Circled)}
-            <Text className="CategoryOption__Title">{t(`category.${type}_title`)}</Text>
+            <Text weight={active ? 'medium' : 'normal'} className="CategoryOption__Title">
+              {t(`category.${type}_title`)}
+            </Text>
           </span>
           {hasSubtypes && (
             <span

diff --git a/src/components/Common/BoxTabs.css b/src/components/Common/BoxTabs.css
@@ -1,5 +1,7 @@
 .BoxTabs .dcl.tabs .ui.container {
   width: 100%;
+  display: flex;
+  align-items: center;
 }
 
 .BoxTabs .dcl.tabs {
@@ -13,10 +15,6 @@
   display: flex;
 }
 
-.BoxTabs .dcl.tabs .tabs-right {
-  display: none;
-}
-
 .BoxTabs .dcl.tabs .dcl.tab.active {
   border-left: none;
   border-bottom: 2px solid var(--primary);
@@ -28,7 +26,7 @@
   display: flex;
   align-items: center;
   padding: 7px 0;
-  font-size: 13px !important;
+  font-size: 11px !important;
   font-weight: var(--weight-medium) !important;
   line-height: 18px;
   text-transform: uppercase !important;
@@ -41,7 +39,7 @@
   .BoxTabs .tab {
     text-transform: none;
     padding: 15px 0;
-    font-size: 15px;
+    font-size: 13px !important;
     line-height: 18px;
   }
 

diff --git a/src/components/Common/ProposalPreviewCard/ProposalPreviewCard.css b/src/components/Common/ProposalPreviewCard/ProposalPreviewCard.css
@@ -15,7 +15,6 @@
   border-radius: 8px;
   border: 1px solid var(--black-300);
   box-shadow: var(--shadow-1);
-  margin: 8px 0;
 }
 
 .ProposalPreviewCard--category:hover {

diff --git a/src/components/Context/BurgerMenuStatusContext.tsx b/src/components/Context/BurgerMenuStatusContext.tsx
diff --git a/src/components/Debug/SnapshotStatus.tsx b/src/components/Debug/SnapshotStatus.tsx
@@ -5,7 +5,6 @@ import classNames from 'classnames'
 import { Governance } from '../../clients/Governance'
 import { ServiceHealth, SnapshotStatus as SnapshotServiceStatus } from '../../clients/SnapshotTypes'
 import { SNAPSHOT_STATUS_ENABLED } from '../../constants'
-import { useBurgerMenu } from '../../hooks/useBurgerMenu'
 import useFormatMessage from '../../hooks/useFormatMessage'
 import Markdown from '../Common/Typography/Markdown'
 import WarningTriangle from '../Icon/WarningTriangle'
@@ -23,15 +22,13 @@ function logIfNotNormal(status: SnapshotServiceStatus) {
 export default function SnapshotStatus() {
   const t = useFormatMessage()
   const [showTopBar, setShowTopBar] = useState(false)
-  const { setStatus } = useBurgerMenu()
   const [ping, setPing] = useState(false)
 
   const updateServiceStatus = async () => {
     const status = await Governance.get().getSnapshotStatus()
     logIfNotNormal(status)
     const show = status.scoresStatus.health === ServiceHealth.Failing && SNAPSHOT_STATUS_ENABLED
     setShowTopBar(show)
-    setStatus((prev) => ({ ...prev, snapshotStatusBarOpen: show }))
   }
 
   useEffect(() => {

diff --git a/src/components/Home/Charts.css b/src/components/Home/Charts.css
@@ -2,71 +2,14 @@
   width: 100%;
 }
 
-.ui.card.HomeCharts > .dcl.tabs {
-  padding: 0 18px;
-  margin: 0;
-  display: flex !important;
-  height: unset;
-}
-
-.ui.card.HomeCharts > .dcl.tabs .tabs-left {
-  display: flex;
-  justify-content: space-evenly;
-}
-
-.ui.card.HomeCharts > .dcl.tabs .tabs-right {
-  display: none;
-}
-
-.ui.card.HomeCharts > .dcl.tabs .dcl.tab {
-  padding: 3px 0;
-  margin: 0;
-  font-size: 11px;
-  font-weight: var(--weight-semi-bold);
-  text-transform: uppercase;
-  color: var(--black-600);
-}
-
-.ui.card.HomeCharts > .dcl.tabs .dcl.tab.active {
-  border-left: none;
-  border-bottom: 2px solid var(--primary);
-}
-
-.ui.card.HomeCharts > .dcl.tabs .Display {
-  margin: 0;
+.HomeCharts__Display.ui.sub.header {
+  margin: 0 !important;
 }
 
 .ui.card.HomeCharts > canvas {
   padding: 12px;
 }
 
-@media (max-width: 425px) {
-  .ui.card.HomeCharts > .dcl.tabs {
-    padding: 0 0;
-  }
-}
-
-@media screen and (min-width: 1024px) {
-  .ui.card.HomeCharts > .dcl.tabs .tabs-left {
-    display: unset;
-  }
-
-  .ui.card.HomeCharts > .dcl.tabs .tabs-right {
-    display: flex;
-  }
-
-  .ui.card.HomeCharts > .dcl.tabs .dcl.tab {
-    padding: 15px 0;
-    margin-right: 32px;
-    font-size: 13px;
-    line-height: 17px;
-  }
-
-  .ui.card.HomeCharts > .dcl.tabs .dcl.tab.active {
-    border-bottom: unset;
-  }
-}
-
 .Charts__Loader {
   display: flex;
   justify-content: center;

diff --git a/src/components/Home/Charts.tsx b/src/components/Home/Charts.tsx
@@ -2,12 +2,13 @@ import { useState } from 'react'
 
 import { Card } from 'decentraland-ui/dist/components/Card/Card'
 import { Header } from 'decentraland-ui/dist/components/Header/Header'
-import { Tabs } from 'decentraland-ui/dist/components/Tabs/Tabs'
+import { Desktop } from 'decentraland-ui/dist/components/Media/Media'
 
 import useFormatMessage from '../../hooks/useFormatMessage'
 import useParticipatingVP from '../../hooks/useParticipatingVP'
 import useVotesPerProposal from '../../hooks/useVotesPerProposal'
 import LineChart from '../Charts/LineChart'
+import BoxTabs from '../Common/BoxTabs'
 
 import './Charts.css'
 import HomeLoader from './HomeLoader'
@@ -32,21 +33,26 @@ function Charts() {
 
   return (
     <Card className="HomeCharts">
-      <Tabs>
-        <Tabs.Left>
-          <Tabs.Tab active={isSelectedParticipatingVPTab} onClick={() => setSelectedTab(ChartType.ParticipatingVP)}>
+      <BoxTabs>
+        <BoxTabs.Left>
+          <BoxTabs.Tab active={isSelectedParticipatingVPTab} onClick={() => setSelectedTab(ChartType.ParticipatingVP)}>
             {t('page.home.community_engagement.participating_vp_title')}
-          </Tabs.Tab>
-          <Tabs.Tab active={isSelectedVotesPerProposalTab} onClick={() => setSelectedTab(ChartType.VotesPerProposal)}>
+          </BoxTabs.Tab>
+          <BoxTabs.Tab
+            active={isSelectedVotesPerProposalTab}
+            onClick={() => setSelectedTab(ChartType.VotesPerProposal)}
+          >
             {t('page.home.community_engagement.votes_per_proposal_title')}
-          </Tabs.Tab>
-        </Tabs.Left>
-        <Tabs.Right>
-          <Header sub className="Display">
-            {t('page.home.community_engagement.display_median')}
-          </Header>
-        </Tabs.Right>
-      </Tabs>
+          </BoxTabs.Tab>
+        </BoxTabs.Left>
+        <BoxTabs.Right>
+          <Desktop>
+            <Header sub className="HomeCharts__Display">
+              {t('page.home.community_engagement.display_median')}
+            </Header>
+          </Desktop>
+        </BoxTabs.Right>
+      </BoxTabs>
       {((isSelectedParticipatingVPTab && isLoadingParticipatingVP) ||
         (isSelectedVotesPerProposalTab && isLoadingVotesPerProposal)) && (
         <div className="Charts__Loader">

diff --git a/src/components/Icon/Cross.tsx b/src/components/Icon/Cross.tsx
@@ -1,9 +1,20 @@
-function Cross({ className }: { className?: string }) {
+function Cross({
+  className,
+  onClick,
+  size = '10',
+  color = 'var(--black-600)',
+}: {
+  className?: string
+  onClick?: () => void
+  size?: string
+  color?: string
+}) {
   return (
     <svg
+      onClick={onClick}
       className={className}
-      width="10"
-      height="10"
+      width={size}
+      height={size}
       viewBox="0 0 10 10"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
@@ -12,7 +23,7 @@ function Cross({ className }: { className?: string }) {
         fillRule="evenodd"
         clipRule="evenodd"
         d="M1.4644 0.0502526L0.0501823 1.46447L3.58572 5L0.0501823 8.53553L1.4644 9.94975L4.99993 6.41421L8.53546 9.94975L9.94968 8.53553L6.41414 5L9.94968 1.46447L8.53546 0.0502526L4.99993 3.58579L1.4644 0.0502526Z"
-        fill="#736E7D"
+        fill={color}
       />
     </svg>
   )

diff --git a/src/components/Icon/Filter.tsx b/src/components/Icon/Filter.tsx
@@ -0,0 +1,10 @@
+export default function Filter() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
+      <path
+        fill="#FF2D55"
+        d="M.091 1.286A.934.934 0 01.937.75h10.127a.94.94 0 01.724 1.533L7.501 7.52v2.98a.749.749 0 01-1.2.6L4.8 9.976a.745.745 0 01-.3-.6V7.52L.21 2.281a.935.935 0 01-.12-.995z"
+      />
+    </svg>
+  )
+}