feat: mobile improvements

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>

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;
   }
 

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}
           />
         )
       })}

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

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;

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 {

src/components/Debug/SnapshotStatus.tsx

@@ -1,45 +1,18 @@
-import { useEffect, useState } from 'react'
-
 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 useSnapshotStatus from '../../hooks/useSnapshotStatus'
 import Markdown from '../Common/Typography/Markdown'
 import WarningTriangle from '../Icon/WarningTriangle'
 
 import './SnapshotStatus.css'
 
-const PING_INTERVAL_IN_MS = 30000 // 30 seconds
-
-function logIfNotNormal(status: SnapshotServiceStatus) {
-  if (status.scoresStatus.health !== ServiceHealth.Normal || status.graphQlStatus.health !== ServiceHealth.Normal) {
-    console.log('Snapshot Status', status)
-  }
-}
-
 export default function SnapshotStatus() {
   const t = useFormatMessage()
-  const [showTopBar, setShowTopBar] = useState(false)
-  const { setStatus } = useBurgerMenu()
-
-  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(() => {
-    const intervalId = setInterval(updateServiceStatus, PING_INTERVAL_IN_MS)
-    return () => clearInterval(intervalId)
-  }, [])
+  const showSnapshotStatus = useSnapshotStatus()
 
   return (
-    <div className={classNames(`SnapshotStatus__TopBar`, showTopBar && 'SnapshotStatus__TopBar--visible')}>
+    <div className={classNames(`SnapshotStatus__TopBar`, showSnapshotStatus && 'SnapshotStatus__TopBar--visible')}>
       <WarningTriangle size="18" />
       <Markdown size="sm" componentsClassNames={{ p: 'SnapshotStatus__Text', strong: 'SnapshotStatus__Text' }}>
         {t('page.debug.snapshot_status.label')}

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;

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">