diff --git a/src/components/Layout/BurgerMenu/BurgerMenuContent.tsx b/src/components/Layout/BurgerMenu/BurgerMenuContent.tsx
index 4611d489c..fe68e4092 100644
--- a/src/components/Layout/BurgerMenu/BurgerMenuContent.tsx
+++ b/src/components/Layout/BurgerMenu/BurgerMenuContent.tsx
@@ -26,7 +26,7 @@ export type BurgerMenuContentProps = NavigationProps & {
const filtersInitialStatus = { categoryOpen: true, statusOpen: false, timeFrameOpen: false }
-const OPEN_BURGER_HEIGHT = 740
+const OPEN_BURGER_HEIGHT = 860
const SEARCH_TITLE_HEIGHT = 32
const CATEGORY_FILTER_HEIGHT = 407
const STATUS_FILTER_HEIGHT = 290
diff --git a/src/components/Layout/Navigation.tsx b/src/components/Layout/Navigation.tsx
index b5831bae8..44ea43e96 100644
--- a/src/components/Layout/Navigation.tsx
+++ b/src/components/Layout/Navigation.tsx
@@ -4,6 +4,7 @@ import useAuthContext from 'decentraland-gatsby/dist/context/Auth/useAuthContext
import useFormatMessage from 'decentraland-gatsby/dist/hooks/useFormatMessage'
import { Link } from 'decentraland-gatsby/dist/plugins/intl'
import { Button } from 'decentraland-ui/dist/components/Button/Button'
+import { useMobileMediaQuery } from 'decentraland-ui/dist/components/Media/Media'
import { Popup } from 'decentraland-ui/dist/components/Popup/Popup'
import { Tabs } from 'decentraland-ui/dist/components/Tabs/Tabs'
@@ -46,6 +47,7 @@ const Navigation = ({ activeTab }: NavigationProps) => {
isDismissClicked: false,
isPopUpDismissed: false,
})
+ const isMobile = useMobileMediaQuery()
useEffect(
() =>
@@ -101,7 +103,7 @@ const Navigation = ({ activeTab }: NavigationProps) => {
{showDot && }
}
- open={showDot && !dismissState.isPopUpDismissed}
+ open={!isMobile && showDot && !dismissState.isPopUpDismissed}
/>
)}
diff --git a/src/components/Status/StatusPill.css b/src/components/Status/StatusPill.css
new file mode 100644
index 000000000..ed6f54b2e
--- /dev/null
+++ b/src/components/Status/StatusPill.css
@@ -0,0 +1,3 @@
+.StatusPill {
+ display: flex;
+}
diff --git a/src/components/Status/StatusPill.tsx b/src/components/Status/StatusPill.tsx
index 95f73f3f9..49027fb30 100644
--- a/src/components/Status/StatusPill.tsx
+++ b/src/components/Status/StatusPill.tsx
@@ -2,7 +2,7 @@ import React from 'react'
import classNames from 'classnames'
import { Link } from 'decentraland-gatsby/dist/plugins/intl'
-import { Mobile, NotMobile } from 'decentraland-ui/dist/components/Media/Media'
+import { useMobileMediaQuery } from 'decentraland-ui/dist/components/Media/Media'
import { ProposalStatus } from '../../entities/Proposal/types'
import { getProposalStatusDisplayName, getProposalStatusShortName } from '../../entities/Proposal/utils'
@@ -10,6 +10,8 @@ import locations from '../../utils/locations'
import Pill, { PillColor, Props as PillProps } from '../Common/Pill'
import Check from '../Icon/Check'
+import './StatusPill.css'
+
type Props = {
className?: string
status: ProposalStatus
@@ -29,33 +31,29 @@ const ColorsConfig: Record = {
}
const StatusPill = ({ className, status, size, isLink }: Props) => {
+ const isMobile = useMobileMediaQuery()
+
const style = status === (ProposalStatus.Enacted || ProposalStatus.OutOfBudget) ? 'shiny' : 'outline'
- const pillClassNames = classNames('StatusPill', className)
- const colorsConfig = ColorsConfig[status]
const showIcon = status === ProposalStatus.Enacted || status === ProposalStatus.Passed
const iconColor = status === ProposalStatus.Enacted ? 'var(--white-900)' : 'var(--green-800)'
const icon = showIcon ? : null
-
const Wrapper = isLink ? Link : 'div'
const href = isLink ? locations.proposals({ status: status }) : undefined
+ const name = isMobile ? getProposalStatusShortName(status) : getProposalStatusDisplayName(status)
+ const pillSize = isMobile ? 'small' : size || 'default'
return (
- <>
-
-
-
- {getProposalStatusShortName(status)}
-
-
-
-
-
-
- {getProposalStatusDisplayName(status)}
-
-
-
- >
+
+
+ {name}
+
+
)
}
diff --git a/src/pages/proposals.css b/src/pages/proposals.css
index 7b68e4c3e..385260b44 100644
--- a/src/pages/proposals.css
+++ b/src/pages/proposals.css
@@ -8,6 +8,7 @@
}
.Animated {
+ width: 100%;
transition: all 0.5s ease 0s;
}
diff --git a/src/pages/transparency.css b/src/pages/transparency.css
index a055b5b90..de28f55ae 100644
--- a/src/pages/transparency.css
+++ b/src/pages/transparency.css
@@ -34,13 +34,6 @@
margin-bottom: 0;
}
-.ui.container.TransparencyContainer {
- display: flex;
- justify-content: space-between;
- align-content: stretch;
- flex-wrap: wrap;
-}
-
.ui.container.TransparencyContainer .ActionableLayout {
position: relative;
margin-top: 40px;