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;