From 004264ed56da62873fffe617a29265c4f7621963 Mon Sep 17 00:00:00 2001 From: Andy Espagnolo Date: Wed, 11 Oct 2023 10:12:03 -0300 Subject: [PATCH 01/31] feat: remove burger menu --- gatsby-browser.js | 5 +- src/components/Category/CategoryList.tsx | 14 +- .../Context/BurgerMenuStatusContext.tsx | 37 --- src/components/Debug/SnapshotStatus.tsx | 3 - .../Layout/BurgerMenu/BurgerMenu.css | 32 --- .../Layout/BurgerMenu/BurgerMenu.tsx | 49 ---- .../Layout/BurgerMenu/BurgerMenuContent.css | 14 -- .../Layout/BurgerMenu/BurgerMenuContent.tsx | 139 ----------- .../Layout/BurgerMenu/BurgerMenuLayout.tsx | 34 --- src/components/Layout/Navbar.tsx | 22 +- src/hooks/useBurgerMenu.ts | 12 - src/pages/index.tsx | 34 ++- src/pages/profile.tsx | 5 +- src/pages/projects.tsx | 55 ++--- src/pages/proposals.tsx | 214 +++++++--------- src/pages/transparency.tsx | 233 +++++++++--------- 16 files changed, 252 insertions(+), 650 deletions(-) delete mode 100644 src/components/Context/BurgerMenuStatusContext.tsx delete mode 100644 src/components/Layout/BurgerMenu/BurgerMenu.css delete mode 100644 src/components/Layout/BurgerMenu/BurgerMenu.tsx delete mode 100644 src/components/Layout/BurgerMenu/BurgerMenuContent.css delete mode 100644 src/components/Layout/BurgerMenu/BurgerMenuContent.tsx delete mode 100644 src/components/Layout/BurgerMenu/BurgerMenuLayout.tsx delete mode 100644 src/hooks/useBurgerMenu.ts diff --git a/gatsby-browser.js b/gatsby-browser.js index 1cd3e4032..8d2bb3b0f 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -22,7 +22,6 @@ 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" @@ -47,12 +46,10 @@ export const wrapPageElement = ({ element, props }) => { - - + {SNAPSHOT_STATUS_ENABLED && } }> {element} - diff --git a/src/components/Category/CategoryList.tsx b/src/components/Category/CategoryList.tsx index 50c689bdb..8e9edb1ee 100644 --- 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,20 +17,10 @@ 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 ( {t(`page.proposal_list.categories`)}}> - + {(Object.keys(ProposalType) as Array).map((key, index) => { return ( ) })} diff --git a/src/components/Context/BurgerMenuStatusContext.tsx b/src/components/Context/BurgerMenuStatusContext.tsx deleted file mode 100644 index fb41405a9..000000000 --- a/src/components/Context/BurgerMenuStatusContext.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { createContext, useState } from 'react' - -import { useProposalsSearchParams } from '../../hooks/useProposalsSearchParams' - -type BurgerMenuStatusContextProps = { - children: React.ReactNode -} - -type BurgerMenuStatus = { - open: boolean - searching: boolean - filtering: boolean - translate?: string - snapshotStatusBarOpen: boolean -} - -export type BurgerMenuStatusContextType = { - status: BurgerMenuStatus - setStatus: React.Dispatch> -} - -export const BurgerMenuStatusContext = createContext({} as BurgerMenuStatusContextType) - -const BurgerMenuStatusContextProvider = ({ children }: BurgerMenuStatusContextProps) => { - const searchParams = useProposalsSearchParams() - const filtering = - !!searchParams.type || !!searchParams.status || (!!searchParams.timeFrame && searchParams.timeFrame.length > 0) - const [status, setStatus] = useState({ - open: searchParams.searching || filtering, - searching: searchParams.searching, - filtering: filtering, - snapshotStatusBarOpen: false, - }) - return {children} -} - -export default BurgerMenuStatusContextProvider diff --git a/src/components/Debug/SnapshotStatus.tsx b/src/components/Debug/SnapshotStatus.tsx index 1f0e032f8..72d30f9c8 100644 --- 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,14 +22,12 @@ function logIfNotNormal(status: SnapshotServiceStatus) { 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(() => { diff --git a/src/components/Layout/BurgerMenu/BurgerMenu.css b/src/components/Layout/BurgerMenu/BurgerMenu.css deleted file mode 100644 index 1a3f2c811..000000000 --- a/src/components/Layout/BurgerMenu/BurgerMenu.css +++ /dev/null @@ -1,32 +0,0 @@ -.BurgerMenu { - width: 2rem; - height: 2rem; - display: flex; - justify-content: space-around; - flex-flow: column nowrap; - z-index: 10; -} - -.BurgerMenu .Bar { - width: 2rem; - height: 0.25rem; - border-radius: 10px; - background-color: black; - transform-origin: 1px; - transition: all 0.3s linear; -} - -.BurgerMenu .FilterBar { - width: 2rem; - height: 0.25rem; - border-radius: 10px; - background-color: black; - transform-origin: 1px; - transition: all 0.3s linear; -} - -@media (min-width: 768px) { - .BurgerMenu { - display: none; - } -} diff --git a/src/components/Layout/BurgerMenu/BurgerMenu.tsx b/src/components/Layout/BurgerMenu/BurgerMenu.tsx deleted file mode 100644 index 6f6d7f6d1..000000000 --- a/src/components/Layout/BurgerMenu/BurgerMenu.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { useMemo } from 'react' - -import { useBurgerMenu } from '../../../hooks/useBurgerMenu' - -import './BurgerMenu.css' - -const FILTER_SHAPE_TRANSFORMS = [ - 'rotate(0)', - 'scale(.75, 0.8) translateX(0) translateX(15%)', - 'scale(0.15, 0.8) rotate(0) translateX(5rem)', -] -const CROSS_SHAPE_TRANSFORMS = ['rotate(45deg)', 'translateX(0) translateX(200%)', 'rotate(-45deg)'] -const BURGER_SHAPE_TRANSFORMS = ['rotate(0)', 'translateX(0)', 'rotate(0)'] - -function BurgerMenu() { - const { status, setStatus } = useBurgerMenu() - const { open, searching, filtering } = status - - const handleClick = () => { - if (!searching) { - setStatus((prevState) => ({ - ...prevState, - open: !prevState.open, - filtering: false, - })) - } else { - setStatus((prevState) => ({ - ...prevState, - filtering: !prevState.filtering, - })) - } - } - - const [bar1, bar2, bar3] = useMemo(() => { - if (searching && !filtering) return FILTER_SHAPE_TRANSFORMS - else if (open || filtering) return CROSS_SHAPE_TRANSFORMS - else return BURGER_SHAPE_TRANSFORMS - }, [open, searching, filtering]) - - return ( -
-
-
-
-
- ) -} - -export default BurgerMenu diff --git a/src/components/Layout/BurgerMenu/BurgerMenuContent.css b/src/components/Layout/BurgerMenu/BurgerMenuContent.css deleted file mode 100644 index ec0432479..000000000 --- a/src/components/Layout/BurgerMenu/BurgerMenuContent.css +++ /dev/null @@ -1,14 +0,0 @@ -.BurgerMenuContent.Animated { - position: absolute; - width: 100%; - top: 15px; -} - -.BurgerMenuContent--Padded { - top: 0; - padding: 0 16px; -} - -.BurgerMenuContent--PushedDown { - top: 65px !important; -} diff --git a/src/components/Layout/BurgerMenu/BurgerMenuContent.tsx b/src/components/Layout/BurgerMenu/BurgerMenuContent.tsx deleted file mode 100644 index 44cdb95ae..000000000 --- a/src/components/Layout/BurgerMenu/BurgerMenuContent.tsx +++ /dev/null @@ -1,139 +0,0 @@ -import React, { useEffect, useState } from 'react' - -import classNames from 'classnames' - -import { ProposalStatus, ProposalType } from '../../../entities/Proposal/types' -import { useBurgerMenu } from '../../../hooks/useBurgerMenu' -import CategoryList from '../../Category/CategoryList' -import CategoryFilter from '../../Search/CategoryFilter' -import SearchInputMobile from '../../Search/SearchInputMobile' -import StatusFilter from '../../Search/StatusFilter' -import TimeFrameFilter from '../../Search/TimeFrameFilter' -import { NavigationProps } from '../Navigation' - -import './BurgerMenuContent.css' -import MobileNavigation from './MobileNavigation' - -export type FilterStatus = { - categoryOpen: boolean - statusOpen: boolean - timeFrameOpen: boolean -} - -export type BurgerMenuContentProps = NavigationProps & { - navigationOnly?: boolean - snapshotStatusBarOpen?: boolean -} - -const filtersInitialStatus = { categoryOpen: true, statusOpen: false, timeFrameOpen: false } - -const OPEN_BURGER_HEIGHT = 895 -const SEARCH_TITLE_HEIGHT = 32 -const CATEGORY_FILTER_HEIGHT = 600 -const STATUS_FILTER_HEIGHT = 290 -const TIMEFRAME_FILTER_HEIGHT = 212 -const CLOSED_FILTER_HEIGHT = 56 -const MOBILE_NAVIGATION_HEIGHT = 180 - -function BurgerMenuContent({ navigationOnly, activeTab, snapshotStatusBarOpen }: BurgerMenuContentProps) { - const [footer, setFooter] = useState(null) - const [filterStatus, setFilterStatus] = useState(filtersInitialStatus) - const { status, setStatus } = useBurgerMenu() - const { open, searching, filtering, translate } = status - - useEffect(() => { - setFooter(document.querySelectorAll('.dcl.footer')[0]) - return () => { - if (footer) { - footer.setAttribute('style', '') - } - } - }, [footer]) - - useEffect(() => { - if (footer) { - footer.classList.add('Animated') - if (translate) { - footer.setAttribute('style', `transform: translateY(${translate})`) - } else { - footer.setAttribute('style', '') - } - } - }, [footer, translate]) - - function handleFilterStatusChange(status: FilterStatus) { - setFilterStatus(status) - } - - useEffect(() => { - if (!open || !filtering || !searching) { - setFilterStatus(filtersInitialStatus) - } - }, [open, filtering, searching]) - - useEffect(() => { - const filtersHeight = - (filterStatus.categoryOpen ? CATEGORY_FILTER_HEIGHT : CLOSED_FILTER_HEIGHT) + - (filterStatus.statusOpen ? STATUS_FILTER_HEIGHT : CLOSED_FILTER_HEIGHT) + - (filterStatus.timeFrameOpen ? TIMEFRAME_FILTER_HEIGHT : CLOSED_FILTER_HEIGHT) - - let newTranslate: string | undefined - if (navigationOnly && open) { - newTranslate = MOBILE_NAVIGATION_HEIGHT + SEARCH_TITLE_HEIGHT + 'px' - } else { - if (!open) { - newTranslate = undefined - } else { - newTranslate = (searching ? (filtering ? filtersHeight : SEARCH_TITLE_HEIGHT) : OPEN_BURGER_HEIGHT) + 'px' - } - } - setStatus((prev) => ({ ...prev, translate: newTranslate })) - }, [open, searching, filtering, filterStatus, navigationOnly, setStatus]) - - return ( -
- {navigationOnly ? ( - <> - - - - ) : ( - <> - - {searching && filtering && ( - <> - handleFilterStatusChange({ ...filterStatus, categoryOpen: open })} - filterType={ProposalType} - startOpen - /> - handleFilterStatusChange({ ...filterStatus, statusOpen: open })} - statusType={ProposalStatus} - /> - handleFilterStatusChange({ ...filterStatus, timeFrameOpen: open })} - /> - - )} - {!searching && ( - <> - - - - )} - - )} -
- ) -} - -export default React.memo(BurgerMenuContent) diff --git a/src/components/Layout/BurgerMenu/BurgerMenuLayout.tsx b/src/components/Layout/BurgerMenu/BurgerMenuLayout.tsx deleted file mode 100644 index f4d205917..000000000 --- a/src/components/Layout/BurgerMenu/BurgerMenuLayout.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { Mobile, NotMobile } from 'decentraland-ui/dist/components/Media/Media' - -import { useBurgerMenu } from '../../../hooks/useBurgerMenu' -import { NavigationProps } from '../Navigation' - -import BurgerMenuContent from './BurgerMenuContent' - -interface Props { - children: React.ReactNode - navigationOnly?: boolean - activeTab: NavigationProps['activeTab'] -} - -function BurgerMenuLayout({ children, navigationOnly, activeTab }: Props) { - const { status } = useBurgerMenu() - const { open, translate, snapshotStatusBarOpen } = status - return ( - <> - - -
- {children} -
- - {children} - - ) -} - -export default BurgerMenuLayout diff --git a/src/components/Layout/Navbar.tsx b/src/components/Layout/Navbar.tsx index 5dc853355..56bfc4a84 100644 --- a/src/components/Layout/Navbar.tsx +++ b/src/components/Layout/Navbar.tsx @@ -1,27 +1,7 @@ -import { useLocation } from '@reach/router' 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: UserInformationProps) { - const location = useLocation() - const showBurgerMenu = BURGER_MENU_LOCATIONS.some((burgerLocation) => burgerLocation === location.pathname) - - return ( - <> - {showBurgerMenu && ( - - - - )} - - - - - ) + return } export default Navbar diff --git a/src/hooks/useBurgerMenu.ts b/src/hooks/useBurgerMenu.ts deleted file mode 100644 index adb0bffa5..000000000 --- a/src/hooks/useBurgerMenu.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { useContext } from 'react' - -import { BurgerMenuStatusContext, BurgerMenuStatusContextType } from '../components/Context/BurgerMenuStatusContext' - -export function useBurgerMenu() { - const context = useContext(BurgerMenuStatusContext) - if (context === undefined) { - throw new Error('useBurgerMenu must be used within BurgerMenuStatusContextProvider') - } - - return context -} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index e07d6a248..4a7306afa 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -9,7 +9,6 @@ import DaoDelegates from '../components/Home/DaoDelegates' import MainBanner from '../components/Home/MainBanner' import MetricsCards from '../components/Home/MetricsCards' import OpenProposals from '../components/Home/OpenProposals' -import BurgerMenuLayout from '../components/Layout/BurgerMenu/BurgerMenuLayout' import LoadingView from '../components/Layout/LoadingView' import MaintenanceLayout from '../components/Layout/MaintenanceLayout' import Navigation, { NavigationTab } from '../components/Layout/Navigation' @@ -51,25 +50,20 @@ export default function HomePage() { {!endingSoonProposals && } {endingSoonProposals && ( - - - - - {isLoadingProposals && } - {!isLoadingProposals && ( - <> - - - - - - - )} - - + + + + {isLoadingProposals && } + {!isLoadingProposals && ( + <> + + + + + + + )} + )} ) diff --git a/src/pages/profile.tsx b/src/pages/profile.tsx index 259a2036f..3de5be407 100644 --- a/src/pages/profile.tsx +++ b/src/pages/profile.tsx @@ -6,7 +6,6 @@ import useAuthContext from 'decentraland-gatsby/dist/context/Auth/useAuthContext import isEthereumAddress from 'validator/lib/isEthereumAddress' import WiderContainer from '../components/Common/WiderContainer' -import BurgerMenuLayout from '../components/Layout/BurgerMenu/BurgerMenuLayout' import LoadingView from '../components/Layout/LoadingView' import LogIn from '../components/Layout/LogIn' import MaintenanceLayout from '../components/Layout/MaintenanceLayout' @@ -61,7 +60,7 @@ export default function ProfilePage() { } return ( - + <> - + ) } diff --git a/src/pages/projects.tsx b/src/pages/projects.tsx index e0f27b6ec..51adc02bd 100644 --- a/src/pages/projects.tsx +++ b/src/pages/projects.tsx @@ -5,7 +5,6 @@ import { NotMobile } from 'decentraland-ui/dist/components/Media/Media' import toSnakeCase from 'lodash/snakeCase' import WiderContainer from '../components/Common/WiderContainer' -import BurgerMenuLayout from '../components/Layout/BurgerMenu/BurgerMenuLayout' import LoadingView from '../components/Layout/LoadingView' import MaintenanceLayout from '../components/Layout/MaintenanceLayout' import Navigation, { NavigationTab } from '../components/Layout/Navigation' @@ -116,35 +115,33 @@ export default function ProjectsPage() { {isLoadingProjects && } {!isLoadingProjects && ( - - - -
-
- - - - - -
-
- {displayableProjects && ( - - )} -
+ + +
+
+ + + + +
- - +
+ {displayableProjects && ( + + )} +
+
+ )} ) diff --git a/src/pages/proposals.tsx b/src/pages/proposals.tsx index 4b0473da4..728db44fd 100644 --- a/src/pages/proposals.tsx +++ b/src/pages/proposals.tsx @@ -7,6 +7,7 @@ import { Button } from 'decentraland-ui/dist/components/Button/Button' import { Header } from 'decentraland-ui/dist/components/Header/Header' import { Loader } from 'decentraland-ui/dist/components/Loader/Loader' import { + Mobile, NotMobile, useMobileMediaQuery, useTabletAndBelowMediaQuery, @@ -20,19 +21,17 @@ import ProposalPreviewCard from '../components/Common/ProposalPreviewCard/Propos import Link from '../components/Common/Typography/Link' import WiderContainer from '../components/Common/WiderContainer' import ActionableLayout from '../components/Layout/ActionableLayout' -import BurgerMenuLayout from '../components/Layout/BurgerMenu/BurgerMenuLayout' import LoadingView from '../components/Layout/LoadingView' import MaintenanceLayout from '../components/Layout/MaintenanceLayout' import Navigation, { NavigationTab } from '../components/Layout/Navigation' import ProposalItem from '../components/Proposal/ProposalItem' import CategoryFilter from '../components/Search/CategoryFilter' -import { SearchTitle } from '../components/Search/SearchTitle' +import SearchTitle from '../components/Search/SearchTitle' import SortingMenu from '../components/Search/SortingMenu' import StatusFilter from '../components/Search/StatusFilter' import TimeFrameFilter from '../components/Search/TimeFrameFilter' import { CoauthorStatus } from '../entities/Coauthor/types' import { ProposalStatus, ProposalType } from '../entities/Proposal/types' -import { useBurgerMenu } from '../hooks/useBurgerMenu' import useFormatMessage from '../hooks/useFormatMessage' import useProposals from '../hooks/useProposals' import useProposalsByCoAuthor from '../hooks/useProposalsByCoAuthor' @@ -65,8 +64,6 @@ export default function ProposalsPage() { const [subscriptions, subscriptionsState] = useSubscriptions() const isMobile = useMobileMediaQuery() const isTabletAndBelow = useTabletAndBelowMediaQuery() - const { status: burgerStatus } = useBurgerMenu() - const { open } = burgerStatus const handlePageFilter = useCallback( (page: number) => { @@ -89,57 +86,34 @@ export default function ProposalsPage() { const [user] = useAuthContext() const { requestsStatus } = useProposalsByCoAuthor(user, CoauthorStatus.PENDING) + const title = + (type === ProposalType.Catalyst && t('page.proposal_catalyst_list.title')) || + (type === ProposalType.POI && t('page.proposal_poi_list.title')) || + (type === ProposalType.BanName && t('page.proposal_ban_name_list.title')) || + (type === ProposalType.Poll && t('page.proposal_poll_list.title')) || + t('page.proposal_list.title') || + '' + + const description = + (type === ProposalType.Catalyst && t('page.proposal_catalyst_list.description')) || + (type === ProposalType.POI && t('page.proposal_poi_list.description')) || + (type === ProposalType.BanName && t('page.proposal_ban_name_list.description')) || + (type === ProposalType.Poll && t('page.proposal_poll_list.description')) || + t('page.proposal_list.description') || + '' + if (isUnderMaintenance()) { - return ( - - ) + return } const isLoading = !proposals || (isLoadingProposals && isLoadingVotes) return ( <> -
+ -
- + + {isLoading && } {!isLoading && ( @@ -158,82 +132,78 @@ export default function ProposalsPage() {
- -
- {isMobile && proposals && } - - {!proposals && ''} - {proposals && t('general.count_proposals', { count: proposals.total || 0 })} - - } - rightAction={ - !searching && ( - <> - {proposals && } - - - ) - } - > -
- - {type && !searching && } - {proposals && proposals.data.length === 0 && ( - 0 - ? t('navigation.search.no_matches') - : t('page.proposal_list.no_proposals_yet') - } - /> - )} - {proposals && - proposals.data.map((proposal) => { - return isTabletAndBelow ? ( - req.proposal_id === proposal.id)} - votes={votes ? votes[proposal.id] : undefined} - subscribing={subscriptionsState.isSubscribing} - subscribed={ - !!subscriptions.find((subscription) => subscription.proposal_id === proposal.id) - } - onSubscribe={(_, proposal) => subscriptionsState.subscribe(proposal.id)} - /> - ) : ( - - ) - })} -
- {proposals && proposals.total > ITEMS_PER_PAGE && ( - handlePageFilter(activePage as number)} - totalPages={Math.ceil(proposals.total / ITEMS_PER_PAGE)} - activePage={page} - firstItem={null} - lastItem={null} +
+ {isMobile && proposals && } + + {!proposals && ''} + {proposals && t('general.count_proposals', { count: proposals.total || 0 })} + + } + rightAction={ + !searching && ( + <> + {proposals && } + + + ) + } + > +
+ + {type && !searching && } + {proposals && proposals.data.length === 0 && ( + 0 + ? t('navigation.search.no_matches') + : t('page.proposal_list.no_proposals_yet') + } /> )} - -
- + {proposals && + proposals.data.map((proposal) => { + return isTabletAndBelow ? ( + req.proposal_id === proposal.id)} + votes={votes ? votes[proposal.id] : undefined} + subscribing={subscriptionsState.isSubscribing} + subscribed={!!subscriptions.find((subscription) => subscription.proposal_id === proposal.id)} + onSubscribe={(_, proposal) => subscriptionsState.subscribe(proposal.id)} + /> + ) : ( + + ) + })} +
+ {proposals && proposals.total > ITEMS_PER_PAGE && ( + handlePageFilter(activePage as number)} + totalPages={Math.ceil(proposals.total / ITEMS_PER_PAGE)} + activePage={page} + firstItem={null} + lastItem={null} + /> + )} + +
)} diff --git a/src/pages/transparency.tsx b/src/pages/transparency.tsx index 06b9b5738..0b4349512 100644 --- a/src/pages/transparency.tsx +++ b/src/pages/transparency.tsx @@ -13,7 +13,6 @@ import Document from '../components/Icon/Document' import DocumentOutline from '../components/Icon/DocumentOutline' import OpenFolder from '../components/Icon/OpenFolder' import Person from '../components/Icon/Person' -import BurgerMenuLayout from '../components/Layout/BurgerMenu/BurgerMenuLayout' import LoadingView from '../components/Layout/LoadingView' import Navigation, { NavigationTab } from '../components/Layout/Navigation' import SidebarLinkButton from '../components/Proposal/View/SidebarLinkButton' @@ -53,138 +52,136 @@ export default function TransparencyPage() {
{!data && } {data && ( - - -
-
- - {t('page.transparency.mission.title')} - -

{t('page.transparency.mission.description')}

- }> - {t('page.transparency.mission.join_discord_button')} - - }> - {t('page.transparency.mission.docs_button')} - - }> - {t('page.transparency.mission.dashboard_button')} - - }> - {t('page.transparency.mission.data_source_button')} - -
-
-
- - - - {t('page.transparency.mission.balance_title')} - -
- {balances && - balances.map((tokenBalance, index) => { - return ( - - ) - })} -
- - -
-
- - -
-
+ +
+
+ + {t('page.transparency.mission.title')} + +

{t('page.transparency.mission.description')}

+ }> + {t('page.transparency.mission.join_discord_button')} + + }> + {t('page.transparency.mission.docs_button')} + + }> + {t('page.transparency.mission.dashboard_button')} + + }> + {t('page.transparency.mission.data_source_button')} +
- -
-
- - {t('page.transparency.funding.title')} - -

{t('page.transparency.funding.description')}

- } isExternal={false}> - {t('page.transparency.funding.view_all_button')} - -
- -
+
+
- - {t('page.transparency.funding.total_title')} + + {t('page.transparency.mission.balance_title')} -
-
-
- {'$' + formatBalance(data.funding.total)} -
USD
-
-
+
+ {balances && + balances.map((tokenBalance, index) => { + return ( + + ) + })}
- -
+
+ + +
+
-
-
-
- - {t('page.transparency.members.title')} +
+
+ + {t('page.transparency.funding.title')} + +

{t('page.transparency.funding.description')}

+ } isExternal={false}> + {t('page.transparency.funding.view_all_button')} + +
+ +
+ + + + {t('page.transparency.funding.total_title')} -

{t('page.transparency.members.description')}

+
+
+
+ {'$' + formatBalance(data.funding.total)} +
USD
+
+
+
+ + + + +
+
- }> - {t('page.transparency.members.about_dao_button')} - - }> - {t('page.transparency.members.wearables_curator_button')} - - }> - {t('page.transparency.members.delegate_button')} - -
-
+
+
+
+ + {t('page.transparency.members.title')} + +

{t('page.transparency.members.description')}

-
- - {data && - data.committees.map((team, index) => { - return ( - - ) - })} - + }> + {t('page.transparency.members.about_dao_button')} + + }> + {t('page.transparency.members.wearables_curator_button')} + + }> + {t('page.transparency.members.delegate_button')} +
- - + +
+ + {data && + data.committees.map((team, index) => { + return ( + + ) + })} + +
+
+ )}
From 8fce37110ccc3437f1f9e5404dc9b7b9fc98aecd Mon Sep 17 00:00:00 2001 From: Andy Espagnolo Date: Wed, 11 Oct 2023 10:17:51 -0300 Subject: [PATCH 02/31] fix: missing import --- gatsby-browser.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gatsby-browser.js b/gatsby-browser.js index 8d2bb3b0f..677974f45 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -25,7 +25,7 @@ import IdentityModalContextProvider from './src/components/Context/IdentityModal 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" From 6f1005d0f1f43722a7502640df9fe0b911a82a4b Mon Sep 17 00:00:00 2001 From: Andy Espagnolo Date: Wed, 11 Oct 2023 10:47:24 -0300 Subject: [PATCH 03/31] feat: improve search result title styles --- src/components/Banner/Banner.css | 8 +- src/components/Layout/ActionableLayout.css | 5 +- src/components/Layout/ActionableLayout.tsx | 15 +--- src/components/Search/SearchTitle.css | 89 ++++++++-------------- src/components/Search/SearchTitle.tsx | 38 +++++---- src/pages/proposals.css | 5 -- 6 files changed, 60 insertions(+), 100 deletions(-) diff --git a/src/components/Banner/Banner.css b/src/components/Banner/Banner.css index 144b05e37..46f406d3f 100644 --- 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/Layout/ActionableLayout.css b/src/components/Layout/ActionableLayout.css index 0f23245c6..21d911ce6 100644 --- a/src/components/Layout/ActionableLayout.css +++ b/src/components/Layout/ActionableLayout.css @@ -3,14 +3,13 @@ display: flex; flex-wrap: wrap; justify-content: space-between; - align-items: center + align-items: center; } .ActionableLayout .ActionableLayout__Content { - padding-top: .5rem; height: calc(100% - 32px); } .ActionableLayout .ActionableLayout__Left .ui.header.sub { margin-bottom: 0; -} \ No newline at end of file +} diff --git a/src/components/Layout/ActionableLayout.tsx b/src/components/Layout/ActionableLayout.tsx index ed4a0aef6..15603308b 100644 --- a/src/components/Layout/ActionableLayout.tsx +++ b/src/components/Layout/ActionableLayout.tsx @@ -1,21 +1,14 @@ -import classNames from 'classnames' - import './ActionableLayout.css' -export type ActionableLayoutProps = React.HTMLAttributes & { +interface Props { leftAction?: React.ReactNode rightAction?: React.ReactNode + children: React.ReactNode } -export default function ActionableLayout({ - className, - rightAction, - leftAction, - children, - ...props -}: ActionableLayoutProps) { +export default function ActionableLayout({ rightAction, leftAction, children }: Props) { return ( -
+
{leftAction}
{rightAction}
diff --git a/src/components/Search/SearchTitle.css b/src/components/Search/SearchTitle.css index 70d05831c..649e4cf97 100644 --- a/src/components/Search/SearchTitle.css +++ b/src/components/Search/SearchTitle.css @@ -1,77 +1,54 @@ -.SearchTitle { - padding-top: 16px; - padding-bottom: 16px; +.SearchTitle__Container { + display: flex; + align-items: center; + /* gap: 12px; */ } -.SearchTitle .SearchTitle__Container { - display: flex; - align-items: center; +.SearchTitle__TextContainer { + display: contents; } -.SearchTitle .SearchTitle_TextContainer { - display: contents; +.SearchTitle__BackContainer { + width: 32px; + height: 32px; + margin-right: 12px; } -.SearchTitle .dcl.back { - background-position-x: 9px; - background-position-y: 8px; -} - -.BigBack { - min-width: 32px; - min-height: 32px; -} - -.SmallBack { - min-width: 26px; - min-height: 26px; +.SearchTitle__Back { + margin-left: 0 !important; } .ui.header.SearchTitle__Text { - display: block; - margin: 0; - padding-left: 8px; + display: block; + margin: 0; + font-size: 17px; } .ui.header.SearchTitle__Text.SearchTitle__ClosingDoubleQuote { - padding-left: 0; + padding-left: 0; } -.ui.header.SearchTitle__Ellipsis{ - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; +.ui.header.SearchTitle__Ellipsis { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .SearchTitle__Separator { - width: 100%; - border-color: #e1e0e3; - opacity: 0.2; - margin-top: 16px; -} - -@media only screen and (min-width: 768px) and (max-width: 991px) { - .ui.header.SearchTitle__Text { - padding-left: 8px; - } + width: 100%; + border-color: #e1e0e3; + opacity: 0.2; + margin-top: 16px; } @media (min-width: 768px) { - .SearchTitle { - padding-bottom: 1rem; - padding-top: 0; - } - - .SearchTitle .dcl.back { - top: 1.2em; - left: -4em; - background-position-x: 10px; - background-position-y: 9px; - } - - .ui.header.SearchTitle__Text { - padding-left: 24px; - font-size: 34px; - line-height: 42px; - } + .SearchTitle__Container { + padding-bottom: 1rem; + padding-top: 0; + } + + .ui.header.SearchTitle__Text { + font-size: 34px; + line-height: 42px; + } } diff --git a/src/components/Search/SearchTitle.tsx b/src/components/Search/SearchTitle.tsx index bf966dd64..895754d7b 100644 --- a/src/components/Search/SearchTitle.tsx +++ b/src/components/Search/SearchTitle.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames' import { Back } from 'decentraland-ui/dist/components/Back/Back' import { Header } from 'decentraland-ui/dist/components/Header/Header' -import { useMobileMediaQuery } from 'decentraland-ui/dist/components/Media/Media' +import { NotMobile } from 'decentraland-ui/dist/components/Media/Media' import useFormatMessage from '../../hooks/useFormatMessage' import { useProposalsSearchParams } from '../../hooks/useProposalsSearchParams' @@ -9,29 +9,27 @@ import locations, { navigate } from '../../utils/locations' import './SearchTitle.css' -export function SearchTitle() { +export default function SearchTitle() { const t = useFormatMessage() const { search } = useProposalsSearchParams() - const isMobile = useMobileMediaQuery() + + if (!search) { + return null + } return ( - <> - {search && isMobile &&
} - {search && ( -
-
-
- navigate(locations.proposals())} /> -
-
-
- {t('navigation.search.search_results', { title: search })} -
-
{'"'}
-
-
+
+ +
+ navigate(locations.proposals())} />
- )} - + +
+
+ {t('navigation.search.search_results', { title: search })} +
+
{'"'}
+
+
) } diff --git a/src/pages/proposals.css b/src/pages/proposals.css index 805e3a1e8..0206f307d 100644 --- a/src/pages/proposals.css +++ b/src/pages/proposals.css @@ -51,8 +51,3 @@ gap: 32px; position: relative; } - -.Animated { - width: 100%; - transition: all 0.5s ease 0s; -} From 977c375ebd914329dff2c9da88aa1172884a5b01 Mon Sep 17 00:00:00 2001 From: Andy Espagnolo Date: Wed, 11 Oct 2023 10:48:45 -0300 Subject: [PATCH 04/31] feat: update navigation tabs styles in mobile --- src/components/Layout/Navigation.css | 73 ++++++++++++++++++++++------ src/components/Layout/Navigation.tsx | 2 +- 2 files changed, 59 insertions(+), 16 deletions(-) diff --git a/src/components/Layout/Navigation.css b/src/components/Layout/Navigation.css index 22a6128b4..f47f199c1 100644 --- a/src/components/Layout/Navigation.css +++ b/src/components/Layout/Navigation.css @@ -1,6 +1,5 @@ -.Navigation .dcl.tabs { - background: var(--background); - display: none; +.Navigation { + position: relative; } .Navigation .dcl.tab svg { @@ -14,38 +13,76 @@ border-radius: 6px; } -@media (min-width: 768px) { - .Navigation .dcl.tabs { +.Navigation .dcl.tabs .ui.container { + display: flex; +} + +.Navigation .dcl.tabs a { + color: var(--text); +} + +.Navigation .dcl.tabs-left { + display: flex; + flex-direction: row; +} + +@media (max-width: 767px) { + .Navigation .dcl.tabs-left { + width: 100%; + overflow: scroll; + } + + .Navigation .dcl.tab { + margin: 0 16px; + padding: 0; + padding-bottom: 14px; + white-space: nowrap; + } + + .dcl.tabs .ui.container { display: flex; } - .Navigation .dcl.tabs a { - color: var(--text); + .Navigation .dcl.tab { + padding-bottom: 5px; + } + .Navigation .dcl.tab.active { + border-bottom: 3px solid var(--primary); + border-left: 0; + } + + /* Hide scrollbar for Chrome, Safari and Opera */ + .Navigation .dcl.tabs-left::-webkit-scrollbar { + display: none; } + /* Hide scrollbar for IE, Edge and Firefox */ + .Navigation .dcl.tabs-left { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ + } +} + +@media (min-width: 768px) { .Navigation .dcl.tabs .ui.container { max-width: 1440px !important; width: 100%; padding: 0 24px; } - - .dcl.tabs .ui.container { - display: flex; - } } -.dcl.tabs-right { +.Navigation .dcl.tabs .dcl.tabs-right { display: flex; align-items: center; } -.NavigationProfilePopUp { +.Navigation__ProfilePopUp { width: 152px; overflow-wrap: break-word; } -.NavigationProfilePopUp p, -.NavigationProfilePopUp .ui.button.basic { +.Navigation__ProfilePopUp p, +.Navigation__ProfilePopUp .ui.button.basic { font-style: normal; font-weight: var(--weight-normal); font-size: 13px; @@ -53,3 +90,9 @@ margin-bottom: 0; padding-left: 0; } + +.Navigation__SearchInput { + position: absolute; + top: 0; + right: 0; +} diff --git a/src/components/Layout/Navigation.tsx b/src/components/Layout/Navigation.tsx index 9c7f3af48..1552993b4 100644 --- a/src/components/Layout/Navigation.tsx +++ b/src/components/Layout/Navigation.tsx @@ -80,7 +80,7 @@ const Navigation = ({ activeTab }: NavigationProps) => {

{t('navigation.profile_pop_up.label')}

From ec44a84a247fbfeb621ecbc4be9271c08d48aa5d Mon Sep 17 00:00:00 2001 From: Andy Espagnolo Date: Wed, 11 Oct 2023 12:42:53 -0300 Subject: [PATCH 05/31] feat: add filter menu sidebar --- src/components/Icon/Cross.tsx | 19 ++++-- src/components/Icon/Filter.tsx | 10 +++ src/components/Layout/ActionableLayout.css | 12 ++-- src/components/Search/FilterMenu.css | 74 ++++++++++++++++++++++ src/components/Search/FilterMenu.tsx | 40 ++++++++++++ src/components/Search/SortingMenu.css | 26 ++++++-- src/components/Search/SortingMenu.tsx | 2 +- src/intl/en.json | 1 + src/pages/proposals.css | 12 ++++ src/pages/proposals.tsx | 69 ++++++++++++-------- 10 files changed, 222 insertions(+), 43 deletions(-) create mode 100644 src/components/Icon/Filter.tsx create mode 100644 src/components/Search/FilterMenu.css create mode 100644 src/components/Search/FilterMenu.tsx diff --git a/src/components/Icon/Cross.tsx b/src/components/Icon/Cross.tsx index 2baa5f933..67fa4cc08 100644 --- 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 ( ) diff --git a/src/components/Icon/Filter.tsx b/src/components/Icon/Filter.tsx new file mode 100644 index 000000000..322da6644 --- /dev/null +++ b/src/components/Icon/Filter.tsx @@ -0,0 +1,10 @@ +export default function Filter() { + return ( + + + + ) +} diff --git a/src/components/Layout/ActionableLayout.css b/src/components/Layout/ActionableLayout.css index 21d911ce6..048804b2c 100644 --- a/src/components/Layout/ActionableLayout.css +++ b/src/components/Layout/ActionableLayout.css @@ -1,4 +1,4 @@ -.ActionableLayout .ActionableLayout__Action { +.ActionableLayout__Action { min-height: 32px; display: flex; flex-wrap: wrap; @@ -6,10 +6,12 @@ align-items: center; } -.ActionableLayout .ActionableLayout__Content { - height: calc(100% - 32px); +.ActionableLayout__Right { + display: flex; + flex-direction: row; + align-items: center; } -.ActionableLayout .ActionableLayout__Left .ui.header.sub { - margin-bottom: 0; +.ActionableLayout__Content { + height: calc(100% - 32px); } diff --git a/src/components/Search/FilterMenu.css b/src/components/Search/FilterMenu.css new file mode 100644 index 000000000..b606e0917 --- /dev/null +++ b/src/components/Search/FilterMenu.css @@ -0,0 +1,74 @@ +.FilterMenu__Button { + cursor: pointer; + display: flex; + align-items: center; + gap: 4px; +} + +.FilterMenu__ButtonText { + margin-bottom: 0; + font-size: 12px !important; + font-weight: var(--weight-semi-bold) !important; + text-transform: uppercase; +} + +@media (min-width: 768px) { + .FilterMenu__ButtonText { + font-size: 14px !important; + } +} + +.FilterMenu__Sidebar { + position: fixed; + top: 0; + right: -303px; + z-index: 99998; + height: 100vh; + width: 293px; + overflow-y: scroll; + overscroll-behavior: contain; + visibility: hidden; + transition: 0.5s ease; +} + +.FilterMenu__Sidebar--open { + visibility: visible; + right: -10px; +} + +.FilterMenu__SidebarContent { + position: absolute; + top: 0; + right: 0; + width: 293px; + min-height: 100vh; + background-color: white; + z-index: 99999; + padding: 15px 32px; +} + +.FilterMenu__Overlay { + width: 100vw; + height: 100vh; + z-index: 99995; + background-color: rgba(0, 0, 0, 0.2); + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + opacity: 0; + visibility: hidden; + transition: 0.5s ease; +} + +.FilterMenu__Overlay--open { + visibility: visible; + opacity: 1; +} + +.FilterMenu__CloseButton { + position: absolute; + top: 23px; + right: 23px; +} diff --git a/src/components/Search/FilterMenu.tsx b/src/components/Search/FilterMenu.tsx new file mode 100644 index 000000000..565fab119 --- /dev/null +++ b/src/components/Search/FilterMenu.tsx @@ -0,0 +1,40 @@ +import { useState } from 'react' + +import classNames from 'classnames' + +import useFormatMessage from '../../hooks/useFormatMessage' +import Text from '../Common/Typography/Text' +import Cross from '../Icon/Cross' +import Filter from '../Icon/Filter' + +import './FilterMenu.css' + +interface Props { + children: React.ReactNode +} + +export default function FilterMenu({ children }: Props) { + const t = useFormatMessage() + const [isOpen, setIsOpen] = useState(false) + const handleClose = () => setIsOpen(false) + + return ( +
+
setIsOpen((prev) => !prev)}> + + {t('navigation.search.filter')} + + +
+
+
+
+ {children} +
+ +
+
+
+
+ ) +} diff --git a/src/components/Search/SortingMenu.css b/src/components/Search/SortingMenu.css index 232d35be7..e83716a34 100644 --- a/src/components/Search/SortingMenu.css +++ b/src/components/Search/SortingMenu.css @@ -1,11 +1,27 @@ .SortingMenu { - margin-right: 1em; + margin-right: 1em; + font-size: 12px !important; } -.ui.dropdown.SortingMenu.Upwards>.dropdown.icon:before { - content: '\F0D8'; +.SortingMenu .divider.text { + font-weight: var(--weight-semi-bold) !important; + line-height: 24px !important; } -.ui.dropdown.SortingMenu.Downwards>.dropdown.icon:before { - content: '\F0D7'; +@media (min-width: 768px) { + .SortingMenu { + font-size: 14px !important; + } +} + +.ui.dropdown.SortingMenu .dropdown.icon { + margin-left: 7px; +} + +.ui.dropdown.SortingMenu.Upwards > .dropdown.icon:before { + content: '\F0D8'; +} + +.ui.dropdown.SortingMenu.Downwards > .dropdown.icon:before { + content: '\F0D7'; } diff --git a/src/components/Search/SortingMenu.tsx b/src/components/Search/SortingMenu.tsx index e3fc871b5..f964267a8 100644 --- a/src/components/Search/SortingMenu.tsx +++ b/src/components/Search/SortingMenu.tsx @@ -17,7 +17,7 @@ export default function SortingMenu() { const location = useLocation() const params = useMemo(() => new URLSearchParams(location.search), [location.search]) const order = useMemo(() => (params.get('order') === 'ASC' ? 'ASC' : 'DESC'), [params]) - const arrowDirection = useMemo(() => (order === 'ASC' ? 'Downwards' : 'Upwards'), [order]) + const arrowDirection = useMemo(() => (order === 'ASC' ? 'Upwards' : 'Downwards'), [order]) const isMobile = useMobileMediaQuery() const t = useFormatMessage() diff --git a/src/intl/en.json b/src/intl/en.json index 73422ae7f..6e6467bd4 100644 --- a/src/intl/en.json +++ b/src/intl/en.json @@ -37,6 +37,7 @@ "placeholder": "Search...", "search_results": "Search results for \"{title}", "no_matches": "No proposals match the search criteria", + "filter": "Filter", "sorting": { "DESC": "Latest", "ASC": "Oldest" diff --git a/src/pages/proposals.css b/src/pages/proposals.css index 0206f307d..cbb5e42b2 100644 --- a/src/pages/proposals.css +++ b/src/pages/proposals.css @@ -51,3 +51,15 @@ gap: 32px; position: relative; } + +.ProposalsPage__ProposalCount { + font-size: 12px !important; + text-transform: uppercase; + color: var(--black-600); +} + +@media (min-width: 768px) { + .ProposalsPage__ProposalCount { + font-size: 14px !important; + } +} diff --git a/src/pages/proposals.tsx b/src/pages/proposals.tsx index 728db44fd..154714dad 100644 --- a/src/pages/proposals.tsx +++ b/src/pages/proposals.tsx @@ -4,14 +4,8 @@ import { useLocation } from '@reach/router' import Head from 'decentraland-gatsby/dist/components/Head/Head' import useAuthContext from 'decentraland-gatsby/dist/context/Auth/useAuthContext' import { Button } from 'decentraland-ui/dist/components/Button/Button' -import { Header } from 'decentraland-ui/dist/components/Header/Header' import { Loader } from 'decentraland-ui/dist/components/Loader/Loader' -import { - Mobile, - NotMobile, - useMobileMediaQuery, - useTabletAndBelowMediaQuery, -} from 'decentraland-ui/dist/components/Media/Media' +import { Mobile, NotMobile, useTabletAndBelowMediaQuery } from 'decentraland-ui/dist/components/Media/Media' import { Pagination } from 'decentraland-ui/dist/components/Pagination/Pagination' import RandomBanner from '../components/Banner/RandomBanner' @@ -19,6 +13,7 @@ import CategoryBanner from '../components/Category/CategoryBanner' import Empty from '../components/Common/Empty' import ProposalPreviewCard from '../components/Common/ProposalPreviewCard/ProposalPreviewCard' import Link from '../components/Common/Typography/Link' +import Text from '../components/Common/Typography/Text' import WiderContainer from '../components/Common/WiderContainer' import ActionableLayout from '../components/Layout/ActionableLayout' import LoadingView from '../components/Layout/LoadingView' @@ -26,6 +21,7 @@ import MaintenanceLayout from '../components/Layout/MaintenanceLayout' import Navigation, { NavigationTab } from '../components/Layout/Navigation' import ProposalItem from '../components/Proposal/ProposalItem' import CategoryFilter from '../components/Search/CategoryFilter' +import FilterMenu from '../components/Search/FilterMenu' import SearchTitle from '../components/Search/SearchTitle' import SortingMenu from '../components/Search/SortingMenu' import StatusFilter from '../components/Search/StatusFilter' @@ -62,7 +58,6 @@ export default function ProposalsPage() { const proposalIds = (proposals?.data || []).map((proposal) => proposal.id) const { votes, isLoadingVotes } = useProposalsVotes(proposalIds) const [subscriptions, subscriptionsState] = useSubscriptions() - const isMobile = useMobileMediaQuery() const isTabletAndBelow = useTabletAndBelowMediaQuery() const handlePageFilter = useCallback( @@ -121,7 +116,11 @@ export default function ProposalsPage() {
- {!isMobile && search && proposals && } + {search && proposals && ( + + + + )}
@@ -133,29 +132,43 @@ export default function ProposalsPage() {
- {isMobile && proposals && } + {proposals && ( + + + + )} - {!proposals && ''} - {proposals && t('general.count_proposals', { count: proposals.total || 0 })} - + proposals && ( + + {t('general.count_proposals', { count: proposals.total || 0 })} + + ) } rightAction={ - !searching && ( - <> - {proposals && } - - - ) + <> + {proposals && ( + <> + + + + + + + + + + )} + + } >
From dfc6a1396a55ea8a7f0e6430e39bade6c8f30e18 Mon Sep 17 00:00:00 2001 From: Andy Espagnolo Date: Wed, 11 Oct 2023 12:51:25 -0300 Subject: [PATCH 06/31] feat: add wip mobile search input --- src/components/Icon/Magnifiy.tsx | 19 ++++ src/components/Layout/Navigation.tsx | 14 ++- src/components/Search/SearchInput.tsx | 9 +- src/components/Search/SearchInputMobile.css | 73 +++++++-------- src/components/Search/SearchInputMobile.tsx | 98 +++++++++++++-------- src/images/icons/new-magnify.svg | 10 +++ 6 files changed, 137 insertions(+), 86 deletions(-) create mode 100644 src/components/Icon/Magnifiy.tsx create mode 100644 src/images/icons/new-magnify.svg diff --git a/src/components/Icon/Magnifiy.tsx b/src/components/Icon/Magnifiy.tsx new file mode 100644 index 000000000..4ab253ce4 --- /dev/null +++ b/src/components/Icon/Magnifiy.tsx @@ -0,0 +1,19 @@ +function Magnify() { + return ( + + + + + + + + + + + ) +} + +export default Magnify diff --git a/src/components/Layout/Navigation.tsx b/src/components/Layout/Navigation.tsx index 1552993b4..d513360ba 100644 --- a/src/components/Layout/Navigation.tsx +++ b/src/components/Layout/Navigation.tsx @@ -2,7 +2,7 @@ import { useEffect, useState } from 'react' import useAuthContext from 'decentraland-gatsby/dist/context/Auth/useAuthContext' import { Button } from 'decentraland-ui/dist/components/Button/Button' -import { useMobileMediaQuery } from 'decentraland-ui/dist/components/Media/Media' +import { Mobile, NotMobile, 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' @@ -13,6 +13,7 @@ import locations from '../../utils/locations' import Link from '../Common/Typography/Link' import Dot from '../Icon/Dot' import SearchInput from '../Search/SearchInput' +import SearchInputMobile from '../Search/SearchInputMobile' import './Navigation.css' @@ -115,10 +116,15 @@ const Navigation = ({ activeTab }: NavigationProps) => { )} - - - + + + + + + + +
) } diff --git a/src/components/Search/SearchInput.tsx b/src/components/Search/SearchInput.tsx index 365acb367..94eef4345 100644 --- a/src/components/Search/SearchInput.tsx +++ b/src/components/Search/SearchInput.tsx @@ -10,7 +10,7 @@ import locations, { navigate } from '../../utils/locations' import './SearchInput.css' -export function handleSearch(textSearch: string, location: Location) { +function handleSearch(textSearch: string, location: Location) { const newParams = new URLSearchParams(location.search) if (textSearch) { newParams.set('search', textSearch) @@ -24,7 +24,7 @@ export function handleSearch(textSearch: string, location: Location) { navigate(locations.proposals(newParams)) } -export default function SearchInput(props: React.HTMLAttributes) { +export default function SearchInput() { const t = useFormatMessage() const location = useLocation() const { search } = useProposalsSearchParams() @@ -69,10 +69,9 @@ export default function SearchInput(props: React.HTMLAttributes .dcl.close { - position: absolute; +.SearchInputMobile--open { + width: 100%; + padding: 0 16px; top: 0; - right: 16px; - margin: 8px; - background-color: #f1f6fe; - z-index: 10; } -.SearchInputMobile { +/* background: linear-gradient(270deg, #FFF 0%, rgba(255, 255, 255, 0.00) 103.13%); */ + +.SearchInputMobile__Input { + width: 16px; + padding: 8px 13px; border: 0; - padding: 8px 32px; - width: 100%; - border-radius: 24px; - background: #f2f3f5 url('../../images/icons/magnify.svg') no-repeat 25% center; - float: right; + background: var(--white-900) no-repeat 8px center; + background-image: url('../../images/icons/new-magnify.svg'); outline-width: 0; - transition: all 0.1s ease-in-out; -} - -@media (max-width: 374px) { - .SearchInputMobile { - background: #f2f3f5 url('../../images/icons/magnify.svg') no-repeat 20% center; - } -} - -.SearchInputMobile:focus { - box-shadow: var(--shadow-2); } -input.SearchInputMobile::placeholder { - text-align: center; - color: var(--secondary-text); - transition: all 0.2s ease-in-out 0.15s; -} - -.SearchInputMobile--open { - background: #f2f3f5 url('../../images/icons/magnify.svg') no-repeat 8px center; - transition: all 0.15s ease-in-out 0s; +.SearchInputMobile__Input--open { + width: 100%; + padding: 8px 32px; + background: var(--white-900) no-repeat 0 center; + background-image: url('../../images/icons/new-magnify.svg'); } -.SearchInputMobile.SearchInputMobile--open:focus { - outline: none; +.SearchInputMobile__CloseIcon { + position: absolute; + top: 10px; + right: 0; } -input.SearchInputMobile--open::placeholder { - text-align: left; - transition: all 0.2s ease-in-out 0.15s; +.SearchInputMobile__Container { + position: relative; + width: 100%; } diff --git a/src/components/Search/SearchInputMobile.tsx b/src/components/Search/SearchInputMobile.tsx index 230ba0ffd..05dd3ea11 100644 --- a/src/components/Search/SearchInputMobile.tsx +++ b/src/components/Search/SearchInputMobile.tsx @@ -2,80 +2,102 @@ import { useEffect, useRef, useState } from 'react' import { useLocation } from '@reach/router' import classNames from 'classnames' -import { Close } from 'decentraland-ui/dist/components/Close/Close' -import { useBurgerMenu } from '../../hooks/useBurgerMenu' import useFormatMessage from '../../hooks/useFormatMessage' import { useProposalsSearchParams } from '../../hooks/useProposalsSearchParams' +import locations, { navigate } from '../../utils/locations' +import Cross from '../Icon/Cross' -import { handleSearch } from './SearchInput' import './SearchInputMobile.css' -export default function SearchInputMobile(props: React.HTMLAttributes) { +function handleSearch(textSearch: string, location: Location) { + const newParams = new URLSearchParams(location.search) + if (textSearch) { + newParams.set('search', textSearch) + newParams.delete('page') + newParams.delete('order') + } else { + newParams.delete('search') + newParams.delete('page') + } + + navigate(locations.proposals(newParams)) +} + +export default function SearchInputMobile() { const t = useFormatMessage() const location = useLocation() - const { search, searching } = useProposalsSearchParams() + const { search } = useProposalsSearchParams() const searchInput = useRef(null) const [open, setOpen] = useState(false) const [searchText, setSearchText] = useState(() => search || '') - const [placeholder, setPlaceholder] = useState(t('navigation.search.mobile.placeholder') || '') - const burgerMenu = useBurgerMenu() - useEffect(() => { - burgerMenu?.setStatus((prev) => ({ ...prev, searching: searching })) - }, [searching]) - function focusSearch() { - searchInput.current?.focus() + const focusSearch = () => { + setTimeout(() => { + searchInput.current?.focus() + searchInput.current?.click() + }, 500) } useEffect(() => { if (!search) { setSearchText('') + setOpen(false) } else { - setSearchText(search) - setOpen(true) + focusSearch() } }, [search]) - function handleChange(e: React.ChangeEvent) { + const handleChange = (e: React.ChangeEvent) => { setSearchText(e.target.value) } - function handleClear() { - setSearchText('') - focusSearch() + const handleClear = () => { + if (searchText === '') { + setOpen(false) + } else { + setSearchText('') + focusSearch() + } } - function handleKeyPress(e: React.KeyboardEvent) { + const handleKeyPress = (e: React.KeyboardEvent) => { if (e.key === 'Enter') { handleSearch(searchText, location) } } - function handleFocus() { - setOpen(true) - if (!searchText) setPlaceholder(t('navigation.search.mobile.focus_placeholder') || '') + const keyUpHandler = (e: React.KeyboardEvent) => { + if (e.code === 'Escape') { + setSearchText('') + } } - function handleBlur() { - setOpen(!!searchText) - if (!searchText) setPlaceholder(t('navigation.search.mobile.placeholder') || '') + const handleOpen = () => { + if (!open) { + setOpen(true) + focusSearch() + } } return ( -
- - {searchText && open && } +
+
+ setOpen(true)} + onBlur={() => setOpen(!!searchText)} + ref={searchInput} + /> + {open && ( + + )} +
) } diff --git a/src/images/icons/new-magnify.svg b/src/images/icons/new-magnify.svg new file mode 100644 index 000000000..30b426fcf --- /dev/null +++ b/src/images/icons/new-magnify.svg @@ -0,0 +1,10 @@ + + + + + + + + + + From 61ddb01a1412b93430e609956f5163ce2fa04910 Mon Sep 17 00:00:00 2001 From: Andy Espagnolo Date: Wed, 11 Oct 2023 17:06:50 -0300 Subject: [PATCH 07/31] feat: improve sidebar styles --- src/components/Search/CategoryFilter.tsx | 4 +-- src/components/Search/CollapsibleFilter.tsx | 31 +++++++++------------ src/components/Search/FilterMenu.css | 9 +++--- src/components/Search/StatusFilter.tsx | 4 +-- src/components/Search/TimeFrameFilter.tsx | 9 ++---- src/pages/projects.tsx | 9 ++---- src/pages/proposals.tsx | 4 +-- 7 files changed, 27 insertions(+), 43 deletions(-) diff --git a/src/components/Search/CategoryFilter.tsx b/src/components/Search/CategoryFilter.tsx index d0f0b7d9e..9880a1dee 100644 --- a/src/components/Search/CategoryFilter.tsx +++ b/src/components/Search/CategoryFilter.tsx @@ -23,7 +23,6 @@ export type FilterType = | typeof ProjectTypeFilter export type Counter = Record export type FilterProps = { - onChange?: (open: boolean) => void startOpen?: boolean categoryCount?: Counter } @@ -32,7 +31,6 @@ const FILTER_KEY = 'type' export default function CategoryFilter({ filterType, - onChange, startOpen, categoryCount, showAllFilter = true, @@ -43,7 +41,7 @@ export default function CategoryFilter({ const type = params.get(FILTER_KEY) return ( - + {showAllFilter && ( void } -function CollapsibleFilter({ title, children, startOpen, onChange }: Props) { - const [open, setOpen] = useState(!!startOpen) +export default function CollapsibleFilter({ title, children, startOpen = true }: Props) { + const [open, setOpen] = useState(startOpen) - useEffect(() => { - onChange && onChange(open) - }, [onChange, open]) - - const toggleHandler = () => { - setOpen(!open) - onChange && onChange(!open) + const handleToggleClick = () => { + setOpen((prevOpen) => !prevOpen) } return (
-
+
{title} -
-
-
-
+ +
+
+
+
+
{children}
) } - -export default CollapsibleFilter diff --git a/src/components/Search/FilterMenu.css b/src/components/Search/FilterMenu.css index b606e0917..46b7d85d8 100644 --- a/src/components/Search/FilterMenu.css +++ b/src/components/Search/FilterMenu.css @@ -29,6 +29,7 @@ overscroll-behavior: contain; visibility: hidden; transition: 0.5s ease; + box-shadow: 0px 0px 35px 0px var(--alpha-black-400); } .FilterMenu__Sidebar--open { @@ -41,17 +42,17 @@ top: 0; right: 0; width: 293px; - min-height: 100vh; + min-height: 100%; background-color: white; z-index: 99999; padding: 15px 32px; } .FilterMenu__Overlay { - width: 100vw; - height: 100vh; + width: 100%; + height: 100%; z-index: 99995; - background-color: rgba(0, 0, 0, 0.2); + background-color: var(--alpha-black-300); position: fixed; top: 0; left: 0; diff --git a/src/components/Search/StatusFilter.tsx b/src/components/Search/StatusFilter.tsx index aa597bcdc..0868607ba 100644 --- a/src/components/Search/StatusFilter.tsx +++ b/src/components/Search/StatusFilter.tsx @@ -17,7 +17,7 @@ type StatusType = typeof ProposalStatus | typeof ProjectStatus const FILTER_KEY = 'status' -export default function StatusFilter({ onChange, startOpen, statusType }: FilterProps & { statusType: StatusType }) { +export default function StatusFilter({ startOpen, statusType }: FilterProps & { statusType: StatusType }) { const t = useFormatMessage() const location = useLocation() const params = useMemo(() => new URLSearchParams(location.search), [location.search]) @@ -25,7 +25,7 @@ export default function StatusFilter({ onChange, startOpen, statusType }: Filter const isGrantFilter = isEqual(statusType, ProjectStatus) return ( - + {Object.values(statusType).map((value, index) => { const label = toSnakeCase(value) diff --git a/src/components/Search/TimeFrameFilter.tsx b/src/components/Search/TimeFrameFilter.tsx index ce225b943..f274578ee 100644 --- a/src/components/Search/TimeFrameFilter.tsx +++ b/src/components/Search/TimeFrameFilter.tsx @@ -4,11 +4,10 @@ import useFormatMessage from '../../hooks/useFormatMessage' import useURLSearchParams from '../../hooks/useURLSearchParams' import locations from '../../utils/locations' -import { FilterProps } from './CategoryFilter' import CollapsibleFilter from './CollapsibleFilter' import FilterLabel from './FilterLabel' -export default function TimeFrameFilter({ onChange }: FilterProps) { +export default function TimeFrameFilter() { const t = useFormatMessage() const params = useURLSearchParams() const timeFrame = useMemo(() => params.get('timeFrame') || null, [params]) @@ -21,11 +20,7 @@ export default function TimeFrameFilter({ onChange }: FilterProps) { } return ( - +
- - + +
diff --git a/src/pages/proposals.tsx b/src/pages/proposals.tsx index 154714dad..0bdda4db3 100644 --- a/src/pages/proposals.tsx +++ b/src/pages/proposals.tsx @@ -125,7 +125,7 @@ export default function ProposalsPage() {
- +
@@ -152,7 +152,7 @@ export default function ProposalsPage() { - + From 58ea2f855604e5def6640d9eada27bf8041501ca Mon Sep 17 00:00:00 2001 From: Andy Espagnolo Date: Wed, 11 Oct 2023 20:28:28 -0300 Subject: [PATCH 08/31] feat: remove collapsible filter + style tweaks --- .../ProposalPreviewCard.css | 1 - src/components/Layout/ActionableLayout.css | 1 + src/components/Proposal/ProposalItem.css | 4 + src/components/Search/CategoryFilter.tsx | 7 +- src/components/Search/CollapsibleFilter.css | 80 ------------------- src/components/Search/CollapsibleFilter.tsx | 39 --------- src/components/Search/FilterContainer.css | 30 +++++++ src/components/Search/FilterContainer.tsx | 21 +++++ src/components/Search/FilterMenu.css | 5 +- src/components/Search/StatusFilter.tsx | 8 +- src/components/Search/TimeFrameFilter.tsx | 6 +- src/pages/proposals.css | 3 + src/pages/proposals.tsx | 33 ++++---- 13 files changed, 89 insertions(+), 149 deletions(-) delete mode 100644 src/components/Search/CollapsibleFilter.css delete mode 100644 src/components/Search/CollapsibleFilter.tsx create mode 100644 src/components/Search/FilterContainer.css create mode 100644 src/components/Search/FilterContainer.tsx diff --git a/src/components/Common/ProposalPreviewCard/ProposalPreviewCard.css b/src/components/Common/ProposalPreviewCard/ProposalPreviewCard.css index af2844f5a..71dcd8bb4 100644 --- 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/Layout/ActionableLayout.css b/src/components/Layout/ActionableLayout.css index 048804b2c..a238630cc 100644 --- a/src/components/Layout/ActionableLayout.css +++ b/src/components/Layout/ActionableLayout.css @@ -4,6 +4,7 @@ flex-wrap: wrap; justify-content: space-between; align-items: center; + margin-bottom: 16px; } .ActionableLayout__Right { diff --git a/src/components/Proposal/ProposalItem.css b/src/components/Proposal/ProposalItem.css index 80e3ee36b..90143a518 100644 --- a/src/components/Proposal/ProposalItem.css +++ b/src/components/Proposal/ProposalItem.css @@ -1,3 +1,7 @@ +.ProposalItem.ui.card { + margin: 0 !important; +} + .ProposalItem, .ui.card.Link.ProposalItem { width: 100% !important; diff --git a/src/components/Search/CategoryFilter.tsx b/src/components/Search/CategoryFilter.tsx index 9880a1dee..69e407744 100644 --- a/src/components/Search/CategoryFilter.tsx +++ b/src/components/Search/CategoryFilter.tsx @@ -8,7 +8,7 @@ import useURLSearchParams from '../../hooks/useURLSearchParams' import CategoryOption from '../Category/CategoryOption' import './CategoryFilter.css' -import CollapsibleFilter from './CollapsibleFilter' +import FilterContainer from './FilterContainer' export enum ProjectTypeFilter { All = 'all_projects', @@ -31,7 +31,6 @@ const FILTER_KEY = 'type' export default function CategoryFilter({ filterType, - startOpen, categoryCount, showAllFilter = true, }: FilterProps & { filterType: FilterType; showAllFilter?: boolean }) { @@ -41,7 +40,7 @@ export default function CategoryFilter({ const type = params.get(FILTER_KEY) return ( - + {showAllFilter && ( ) })} - + ) } diff --git a/src/components/Search/CollapsibleFilter.css b/src/components/Search/CollapsibleFilter.css deleted file mode 100644 index a5f24ab80..000000000 --- a/src/components/Search/CollapsibleFilter.css +++ /dev/null @@ -1,80 +0,0 @@ -.CollapsibleFilter { - position: relative; - min-height: 32px; - margin-bottom: 8px; - margin-top: 16px; -} - -.CollapsibleFilter:first-child { - margin-top: 8px; -} - -.FilterHeader { - display: flex; - justify-content: space-between; - margin-top: 8px; - margin-bottom: 8px; - cursor: pointer; -} - -.FilterHeader__Title { - text-transform: uppercase; - margin-bottom: 0; -} - -@media (max-width: 767px) { - .FilterHeader { - justify-content: unset; - } - - .PlusMinusContainer { - border-radius: 50%; - background-color: #e1e0e3; - margin-left: 8px; - } - - .PlusMinus { - left: 18% !important; - top: 43% !important; - } -} - -.FilterHeader:first-child { - margin-top: 0; -} - -.FilterContent { - opacity: 0; - height: 0; - overflow: hidden; - transition: opacity 1s ease-out; -} - -.FilterContent--open { - height: auto; - opacity: 1; -} - -.PlusMinusContainer { - width: 1rem; - height: 1rem; - border: 0; - position: relative; - display: flex; -} - -.PlusMinus { - position: absolute; - width: 10px; - border-radius: 10px; - background-color: var(--secondary-text); - transition: all 0.3s linear; - bottom: 25%; - left: 50%; - height: 10%; - top: 45%; -} - -.PlusMinus--closed { - transform: rotate(90deg); -} diff --git a/src/components/Search/CollapsibleFilter.tsx b/src/components/Search/CollapsibleFilter.tsx deleted file mode 100644 index cc1f0b5e1..000000000 --- a/src/components/Search/CollapsibleFilter.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { useState } from 'react' - -import classNames from 'classnames' -import { NotMobile } from 'decentraland-ui/dist/components/Media/Media' - -import Text from '../Common/Typography/Text' - -import './CollapsibleFilter.css' - -type Props = { - title: string - startOpen?: boolean - children: React.ReactNode -} - -export default function CollapsibleFilter({ title, children, startOpen = true }: Props) { - const [open, setOpen] = useState(startOpen) - - const handleToggleClick = () => { - setOpen((prevOpen) => !prevOpen) - } - - return ( -
-
- - {title} - - -
-
-
-
- -
-
{children}
-
- ) -} diff --git a/src/components/Search/FilterContainer.css b/src/components/Search/FilterContainer.css new file mode 100644 index 000000000..970ff900e --- /dev/null +++ b/src/components/Search/FilterContainer.css @@ -0,0 +1,30 @@ +.FilterContainer { + position: relative; + min-height: 32px; + margin-bottom: 8px; + margin-top: 16px; +} + +.FilterContainer:first-child { + margin-top: 8px; +} + +.FilterContainer__TitleContainer { + display: flex; + margin-bottom: 8px; +} + +.FilterContainer__TitleContainer:first-child { + margin-top: 0; +} + +.FilterContainer__Title { + text-transform: uppercase; + margin-bottom: 0; +} + +.FilterContainer__Content { + height: auto; + overflow: hidden; + transition: opacity 1s ease-out; +} diff --git a/src/components/Search/FilterContainer.tsx b/src/components/Search/FilterContainer.tsx new file mode 100644 index 000000000..6e28e3273 --- /dev/null +++ b/src/components/Search/FilterContainer.tsx @@ -0,0 +1,21 @@ +import Text from '../Common/Typography/Text' + +import './FilterContainer.css' + +type Props = { + title: string + children: React.ReactNode +} + +export default function FilterContainer({ title, children }: Props) { + return ( +
+
+ + {title} + +
+
{children}
+
+ ) +} diff --git a/src/components/Search/FilterMenu.css b/src/components/Search/FilterMenu.css index 46b7d85d8..5df9b4bab 100644 --- a/src/components/Search/FilterMenu.css +++ b/src/components/Search/FilterMenu.css @@ -26,7 +26,7 @@ height: 100vh; width: 293px; overflow-y: scroll; - overscroll-behavior: contain; + overscroll-behavior: none; visibility: hidden; transition: 0.5s ease; box-shadow: 0px 0px 35px 0px var(--alpha-black-400); @@ -43,7 +43,7 @@ right: 0; width: 293px; min-height: 100%; - background-color: white; + background-color: var(--white-900); z-index: 99999; padding: 15px 32px; } @@ -61,6 +61,7 @@ opacity: 0; visibility: hidden; transition: 0.5s ease; + overflow-y: hidden; } .FilterMenu__Overlay--open { diff --git a/src/components/Search/StatusFilter.tsx b/src/components/Search/StatusFilter.tsx index 0868607ba..fa5bc0937 100644 --- a/src/components/Search/StatusFilter.tsx +++ b/src/components/Search/StatusFilter.tsx @@ -10,14 +10,14 @@ import { getUrlFilters } from '../../helpers' import useFormatMessage from '../../hooks/useFormatMessage' import { FilterProps } from './CategoryFilter' -import CollapsibleFilter from './CollapsibleFilter' +import FilterContainer from './FilterContainer' import FilterLabel from './FilterLabel' type StatusType = typeof ProposalStatus | typeof ProjectStatus const FILTER_KEY = 'status' -export default function StatusFilter({ startOpen, statusType }: FilterProps & { statusType: StatusType }) { +export default function StatusFilter({ statusType }: FilterProps & { statusType: StatusType }) { const t = useFormatMessage() const location = useLocation() const params = useMemo(() => new URLSearchParams(location.search), [location.search]) @@ -25,7 +25,7 @@ export default function StatusFilter({ startOpen, statusType }: FilterProps & { const isGrantFilter = isEqual(statusType, ProjectStatus) return ( - + {Object.values(statusType).map((value, index) => { const label = toSnakeCase(value) @@ -40,6 +40,6 @@ export default function StatusFilter({ startOpen, statusType }: FilterProps & { ) } })} - + ) } diff --git a/src/components/Search/TimeFrameFilter.tsx b/src/components/Search/TimeFrameFilter.tsx index f274578ee..17154d597 100644 --- a/src/components/Search/TimeFrameFilter.tsx +++ b/src/components/Search/TimeFrameFilter.tsx @@ -4,7 +4,7 @@ import useFormatMessage from '../../hooks/useFormatMessage' import useURLSearchParams from '../../hooks/useURLSearchParams' import locations from '../../utils/locations' -import CollapsibleFilter from './CollapsibleFilter' +import FilterContainer from './FilterContainer' import FilterLabel from './FilterLabel' export default function TimeFrameFilter() { @@ -20,7 +20,7 @@ export default function TimeFrameFilter() { } return ( - + - + ) } diff --git a/src/pages/proposals.css b/src/pages/proposals.css index cbb5e42b2..ea7c178a0 100644 --- a/src/pages/proposals.css +++ b/src/pages/proposals.css @@ -21,6 +21,9 @@ } .ProposalsPage__List { + display: flex; + flex-direction: column; + gap: 16px; margin-bottom: 16px; } diff --git a/src/pages/proposals.tsx b/src/pages/proposals.tsx index 0bdda4db3..3763d27cd 100644 --- a/src/pages/proposals.tsx +++ b/src/pages/proposals.tsx @@ -171,21 +171,21 @@ export default function ProposalsPage() { } > -
- - {type && !searching && } - {proposals && proposals.data.length === 0 && ( - 0 - ? t('navigation.search.no_matches') - : t('page.proposal_list.no_proposals_yet') - } - /> - )} - {proposals && - proposals.data.map((proposal) => { + + {type && !searching && } + {proposals && proposals.data.length === 0 && ( + 0 + ? t('navigation.search.no_matches') + : t('page.proposal_list.no_proposals_yet') + } + /> + )} + {proposals && ( +
+ {proposals.data.map((proposal) => { return isTabletAndBelow ? ( ) })} -
+
+ )} {proposals && proposals.total > ITEMS_PER_PAGE && ( handlePageFilter(activePage as number)} From 1154125c3ba6ac5225c42707c47439f81cd1f532 Mon Sep 17 00:00:00 2001 From: Andy Espagnolo Date: Thu, 12 Oct 2023 10:44:29 -0300 Subject: [PATCH 09/31] fix: profile mobile styles --- src/components/Profile/ActivityBox.tsx | 51 ++++++++---------- .../Profile/GrantBeneficiaryBox.tsx | 10 ++-- src/components/Profile/VotedProposalsBox.tsx | 40 +++++++------- src/components/Profile/VpDelegationBox.tsx | 5 +- src/components/Profile/VpDelegatorsBox.tsx | 54 +++++++++---------- src/components/User/UserStats.tsx | 5 +- 6 files changed, 73 insertions(+), 92 deletions(-) diff --git a/src/components/Profile/ActivityBox.tsx b/src/components/Profile/ActivityBox.tsx index acc80efb9..279d2bf1e 100644 --- a/src/components/Profile/ActivityBox.tsx +++ b/src/components/Profile/ActivityBox.tsx @@ -1,7 +1,6 @@ import { useState } from 'react' import useAuthContext from 'decentraland-gatsby/dist/context/Auth/useAuthContext' -import { Container } from 'decentraland-ui/dist/components/Container/Container' import { CoauthorStatus } from '../../entities/Coauthor/types' import { isSameAddress } from '../../entities/Snapshot/utils' @@ -36,35 +35,31 @@ const ActivityBox = ({ address }: Props) => { const { requestsStatus } = useProposalsByCoAuthor(isLoggedUserProfile ? account : null, CoauthorStatus.PENDING) return ( - - - - - setActiveTab(Tab.MyProposals)} active={activeTab === Tab.MyProposals}> - {isLoggedUserProfile - ? t('page.profile.activity.my_proposals.title') - : t('page.profile.created_proposals.title')} + + + + setActiveTab(Tab.MyProposals)} active={activeTab === Tab.MyProposals}> + {isLoggedUserProfile + ? t('page.profile.activity.my_proposals.title') + : t('page.profile.created_proposals.title')} + + {isLoggedUserProfile && ( + setActiveTab(Tab.Watchlist)} active={activeTab === Tab.Watchlist}> + {t('page.profile.activity.watchlist.title')} - {isLoggedUserProfile && ( - setActiveTab(Tab.Watchlist)} active={activeTab === Tab.Watchlist}> - {t('page.profile.activity.watchlist.title')} - - )} - setActiveTab(Tab.CoAuthoring)} active={activeTab === Tab.CoAuthoring}> - {t('page.profile.activity.coauthoring.title')} - {requestsStatus.length > 0 && } - - - - - {activeTab === Tab.MyProposals && } - {activeTab === Tab.Watchlist && isLoggedUserProfile && } - {activeTab === Tab.CoAuthoring && ( - )} - - - + setActiveTab(Tab.CoAuthoring)} active={activeTab === Tab.CoAuthoring}> + {t('page.profile.activity.coauthoring.title')} + {requestsStatus.length > 0 && } + + + + + {activeTab === Tab.MyProposals && } + {activeTab === Tab.Watchlist && isLoggedUserProfile && } + {activeTab === Tab.CoAuthoring && } + + ) } diff --git a/src/components/Profile/GrantBeneficiaryBox.tsx b/src/components/Profile/GrantBeneficiaryBox.tsx index 3831c21af..3c45ac882 100644 --- a/src/components/Profile/GrantBeneficiaryBox.tsx +++ b/src/components/Profile/GrantBeneficiaryBox.tsx @@ -1,5 +1,3 @@ -import { Container } from 'decentraland-ui/dist/components/Container/Container' - import useFormatMessage from '../../hooks/useFormatMessage' import useGrantsByUser from '../../hooks/useGrantsByUser' @@ -18,10 +16,8 @@ export default function GrantBeneficiaryBox({ address }: Props) { if (!hasGrants) return null return ( - - - - - + + + ) } diff --git a/src/components/Profile/VotedProposalsBox.tsx b/src/components/Profile/VotedProposalsBox.tsx index 51bfb7178..f4c8a332a 100644 --- a/src/components/Profile/VotedProposalsBox.tsx +++ b/src/components/Profile/VotedProposalsBox.tsx @@ -1,5 +1,3 @@ -import { Container } from 'decentraland-ui/dist/components/Container/Container' - import useFormatMessage from '../../hooks/useFormatMessage' import useVotedProposals from '../../hooks/useVotedProposals' import Empty from '../Common/Empty' @@ -23,26 +21,24 @@ function VotedProposalsBox({ address }: Props) { const { votes, isLoading, handleViewMore, hasMoreProposals } = useVotedProposals(address, PROPOSALS_PER_PAGE) return ( - - - {isLoading && } - {!isLoading && - (votes.length > 0 ? ( - votes.map((vote) => { - return - }) - ) : ( - } - description={t('page.profile.voted_proposals.empty')} - /> - ))} - {hasMoreProposals && ( - {t('page.profile.voted_proposals.button')} - )} - - + + {isLoading && } + {!isLoading && + (votes.length > 0 ? ( + votes.map((vote) => { + return + }) + ) : ( + } + description={t('page.profile.voted_proposals.empty')} + /> + ))} + {hasMoreProposals && ( + {t('page.profile.voted_proposals.button')} + )} + ) } diff --git a/src/components/Profile/VpDelegationBox.tsx b/src/components/Profile/VpDelegationBox.tsx index c47b3584f..15c8be43b 100644 --- a/src/components/Profile/VpDelegationBox.tsx +++ b/src/components/Profile/VpDelegationBox.tsx @@ -2,7 +2,6 @@ import { useState } from 'react' import useAuthContext from 'decentraland-gatsby/dist/context/Auth/useAuthContext' import { Button } from 'decentraland-ui/dist/components/Button/Button' -import { Container } from 'decentraland-ui/dist/components/Container/Container' import Grid from 'semantic-ui-react/dist/commonjs/collections/Grid/Grid' import { DelegationResult } from '../../clients/SnapshotTypes' @@ -38,7 +37,7 @@ function VpDelegationBox({ address, delegation, isLoadingDelegation, ownVp, isLo const profileHasADelegation = delegatedTo.length > 0 && !!ownVp return ( - +
)} - +
) } diff --git a/src/components/Profile/VpDelegatorsBox.tsx b/src/components/Profile/VpDelegatorsBox.tsx index 3caed5f8d..6bb4a5289 100644 --- a/src/components/Profile/VpDelegatorsBox.tsx +++ b/src/components/Profile/VpDelegatorsBox.tsx @@ -1,5 +1,3 @@ -import { Container } from 'decentraland-ui/dist/components/Container/Container' - import { DelegationResult, DetailedScores } from '../../clients/SnapshotTypes' import { isSameAddress } from '../../entities/Snapshot/utils' import useFormatMessage from '../../hooks/useFormatMessage' @@ -38,33 +36,31 @@ export default function VpDelegatorsBox({ !isLoggedUserProfile && !isLoadingUserVpDistribution && profileAddress && accountHasDelegations return ( - - - ) - } - > - {loggedUserVpDistribution && profileAddress && ( - - )} - - + ) + } + > + {loggedUserVpDistribution && profileAddress && ( + + )} + ) } diff --git a/src/components/User/UserStats.tsx b/src/components/User/UserStats.tsx index 9a45d1baf..214a2e921 100644 --- a/src/components/User/UserStats.tsx +++ b/src/components/User/UserStats.tsx @@ -1,7 +1,6 @@ import { Suspense, lazy } from 'react' import useAuthContext from 'decentraland-gatsby/dist/context/Auth/useAuthContext' -import { Container } from 'decentraland-ui/dist/components/Container/Container' import { Loader } from 'decentraland-ui/dist/components/Loader/Loader' import { NotMobile, useMobileMediaQuery } from 'decentraland-ui/dist/components/Media/Media' @@ -38,7 +37,7 @@ export default function UserStats({ address, vpDistribution, isLoadingVpDistribu const { total } = vpDistribution || { total: 0 } return ( - +
@@ -63,6 +62,6 @@ export default function UserStats({ address, vpDistribution, isLoadingVpDistribu - +
) } From 73be827619704d46f03684420fefb22f08b8d82b Mon Sep 17 00:00:00 2001 From: Andy Espagnolo Date: Thu, 12 Oct 2023 11:44:10 -0300 Subject: [PATCH 10/31] feat: improve mobile proposal item styles --- src/components/Layout/ActionableLayout.css | 7 +- src/components/Proposal/ProposalItem.css | 57 ++++++-------- src/components/Proposal/ProposalItem.tsx | 86 ++++++++-------------- src/components/Search/FilterMenu.css | 1 + src/components/Search/SortingMenu.css | 4 + src/components/Status/FinishLabel.css | 16 ---- src/components/Status/FinishLabel.tsx | 42 ----------- src/pages/proposals.tsx | 5 -- src/ui-overrides.css | 4 + 9 files changed, 70 insertions(+), 152 deletions(-) delete mode 100644 src/components/Status/FinishLabel.css delete mode 100644 src/components/Status/FinishLabel.tsx diff --git a/src/components/Layout/ActionableLayout.css b/src/components/Layout/ActionableLayout.css index a238630cc..06c635f75 100644 --- a/src/components/Layout/ActionableLayout.css +++ b/src/components/Layout/ActionableLayout.css @@ -4,7 +4,12 @@ flex-wrap: wrap; justify-content: space-between; align-items: center; - margin-bottom: 16px; +} + +@media (min-width: 768px) { + .ActionableLayout__Action { + margin-bottom: 16px; + } } .ActionableLayout__Right { diff --git a/src/components/Proposal/ProposalItem.css b/src/components/Proposal/ProposalItem.css index 90143a518..e33f16134 100644 --- a/src/components/Proposal/ProposalItem.css +++ b/src/components/Proposal/ProposalItem.css @@ -8,65 +8,37 @@ border: 1px solid var(--black-100); } -.ProposalItem .ProposalItem__Title { +.ProposalItem__Title { display: flex; flex-direction: row; padding-bottom: 0; - padding-right: 40px; } -.ProposalItem .ProposalItem__Title .ui.header { - flex: 1; - padding-right: 15px; -} - -.ProposalItem:visited .ProposalItem__Title .ui.header { +.ProposalItem:visited .ProposalItem__Title { color: var(--black-600); } -.ProposalItem .ProposalItem__Status { - padding-top: 8px; +.ProposalItem__Status { display: flex; flex-direction: row; justify-content: space-between; } @media (max-width: 425px) { - .ProposalItem .ProposalItem__Status { - flex-direction: row; - } - - .ProposalItem .ProposalItem__Title { - padding-right: 0; - } - - .ProposalItem .ProposalItem__Title .ui.header { - font-size: 17px; - } - .ActionableLayout .ActionableLayout__Content .ui.card > .content { padding: 12px; } } -.ProposalItem .ProposalItem__Title .ui.header:first-child { +.ProposalItem__Title .ui.header:first-child { margin-bottom: 0; } -.ProposalItem .ProposalItem__Title .ui.button { +.ProposalItem__Title .ui.loading.loading.loading.loading.button { position: absolute; - padding: 16px 20px; - top: 0; - right: 0; - display: none; } -.ProposalItem .ProposalItem__Title .ui.loading.loading.loading.loading.button { - position: absolute; -} - -.ProposalItem:hover .ProposalItem__Title .ui.button, -.ProposalItem.ProposalItem--subscribed .ProposalItem__Title .ui.button { +.ProposalItem:hover .ProposalItem__Title .ui.button { display: block; } @@ -113,3 +85,20 @@ .ProposalItem__Details > span.Username .dcl.blockie { margin: 0 0 0 0; } + +.ProposalItem__FinishLabel { + padding: 0; + height: 24px; + display: inline-flex; + color: var(--black-800); + font-weight: var(--weight-semi-bold); + font-size: 12px; + line-height: 26px; + vertical-align: middle; + align-content: center; + align-items: center; + text-transform: uppercase; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} diff --git a/src/components/Proposal/ProposalItem.tsx b/src/components/Proposal/ProposalItem.tsx index 2b035993c..b163a6d7a 100644 --- a/src/components/Proposal/ProposalItem.tsx +++ b/src/components/Proposal/ProposalItem.tsx @@ -1,79 +1,65 @@ import classNames from 'classnames' -import useAuthContext from 'decentraland-gatsby/dist/context/Auth/useAuthContext' -import { Button } from 'decentraland-ui/dist/components/Button/Button' import { Card } from 'decentraland-ui/dist/components/Card/Card' -import { Header } from 'decentraland-ui/dist/components/Header/Header' import { Desktop } from 'decentraland-ui/dist/components/Media/Media' import { ProposalAttributes } from '../../entities/Proposal/types' import { Vote } from '../../entities/Votes/types' +import useCountdown, { Countdown } from '../../hooks/useCountdown' import useFormatMessage from '../../hooks/useFormatMessage' -import useWinningChoice from '../../hooks/useWinningChoice' +import Time from '../../utils/date/Time' import locations from '../../utils/locations' import CategoryPill from '../Category/CategoryPill' +import DateTooltip from '../Common/DateTooltip' +import Heading from '../Common/Typography/Heading' import Link from '../Common/Typography/Link' import Username from '../Common/Username' -import Subscribe from '../Icon/Subscribe' -import Subscribed from '../Icon/Subscribed' import CoauthorRequestLabel from '../Status/CoauthorRequestLabel' -import FinishLabel from '../Status/FinishLabel' -import LeadingOption from '../Status/LeadingOption' import StatusPill from '../Status/StatusPill' import './ProposalItem.css' +function getTimeLabel(timeout: Countdown, date: Date, format?: 'short') { + const time = Time(date) + + return timeout.time > 0 ? time.fromNow() : format === 'short' ? time.format('MM/DD/YY') : time.format('MMM DD, YYYY') +} + interface Props { proposal: ProposalAttributes hasCoauthorRequest?: boolean votes?: Record - subscribed?: boolean - subscribing?: boolean - onSubscribe?: (e: React.MouseEvent, proposal: ProposalAttributes) => void } -export default function ProposalItem({ - proposal, - hasCoauthorRequest, - votes, - subscribing, - subscribed, - onSubscribe, -}: Props) { - const [account] = useAuthContext() - const { winningChoice, userChoice } = useWinningChoice(proposal) +export default function ProposalItem({ proposal, hasCoauthorRequest, votes }: Props) { const t = useFormatMessage() - - function handleSubscription(e: React.MouseEvent) { - e.stopPropagation() - e.preventDefault() - onSubscribe && onSubscribe(e, proposal) - } + const { id, title, status, type, user, start_at, finish_at } = proposal + const timeout = useCountdown(finish_at) + const isCountdownRunning = timeout.time > 0 + const hasStarted = Time().isAfter(start_at) + const endLabel = isCountdownRunning + ? `${t('page.proposal_list.finish_label.ends')} ` + : `${t('page.proposal_list.finish_label.ended')} ` + const label = hasStarted ? endLabel : `${t('page.proposal_list.finish_label.starts')} ` + const time = hasStarted ? finish_at : start_at return ( -
-
{proposal.title}
+
+ + {title} + {hasCoauthorRequest && } - {account && ( - - )}
- - - + + +
{votes && ( @@ -82,19 +68,11 @@ export default function ProposalItem({ )} - + + {`${label} ${getTimeLabel(timeout, time, 'short')}`} +
- {winningChoice.votes > 0 && ( - - = (proposal.required_to_pass || 0)} - userChoice={userChoice} - /> - - )}
diff --git a/src/components/Search/FilterMenu.css b/src/components/Search/FilterMenu.css index 5df9b4bab..ce6f100ea 100644 --- a/src/components/Search/FilterMenu.css +++ b/src/components/Search/FilterMenu.css @@ -2,6 +2,7 @@ cursor: pointer; display: flex; align-items: center; + height: 40px; gap: 4px; } diff --git a/src/components/Search/SortingMenu.css b/src/components/Search/SortingMenu.css index e83716a34..d1abdb6b5 100644 --- a/src/components/Search/SortingMenu.css +++ b/src/components/Search/SortingMenu.css @@ -1,6 +1,10 @@ .SortingMenu { margin-right: 1em; font-size: 12px !important; + height: 40px; + display: flex !important; + justify-content: center; + align-items: center; } .SortingMenu .divider.text { diff --git a/src/components/Status/FinishLabel.css b/src/components/Status/FinishLabel.css deleted file mode 100644 index 6cf0dbba1..000000000 --- a/src/components/Status/FinishLabel.css +++ /dev/null @@ -1,16 +0,0 @@ -.FinishLabel { - padding: 0; - height: 24px; - display: inline-flex; - color: var(--black-800); - font-weight: var(--weight-semi-bold); - font-size: 12px; - line-height: 26px; - vertical-align: middle; - align-content: center; - align-items: center; - text-transform: uppercase; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; -} diff --git a/src/components/Status/FinishLabel.tsx b/src/components/Status/FinishLabel.tsx deleted file mode 100644 index 74374ae5c..000000000 --- a/src/components/Status/FinishLabel.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { Mobile, NotMobile } from 'decentraland-ui/dist/components/Media/Media' - -import useCountdown, { Countdown } from '../../hooks/useCountdown' -import useFormatMessage from '../../hooks/useFormatMessage' -import Time from '../../utils/date/Time' -import DateTooltip from '../Common/DateTooltip' - -import './FinishLabel.css' - -interface Props { - startAt: Date - finishAt: Date -} - -function getTimeLabel(timeout: Countdown, date: Date, format?: 'short') { - const time = Time(date) - - return timeout.time > 0 ? time.fromNow() : format === 'short' ? time.format('MM/DD/YY') : time.format('MMM DD, YYYY') -} - -export default function FinishLabel({ startAt, finishAt }: Props) { - const timeout = useCountdown(finishAt) - const t = useFormatMessage() - const isCountdownRunning = timeout.time > 0 - const hasStarted = Time().isAfter(startAt) - const endLabel = isCountdownRunning - ? `${t('page.proposal_list.finish_label.ends')} ` - : `${t('page.proposal_list.finish_label.ended')} ` - const label = hasStarted ? endLabel : `${t('page.proposal_list.finish_label.starts')} ` - const time = hasStarted ? finishAt : startAt - - return ( - - - {`${label} ${getTimeLabel(timeout, time, 'short')}`} - - - {`${label} ${getTimeLabel(timeout, time)}`} - - - ) -} diff --git a/src/pages/proposals.tsx b/src/pages/proposals.tsx index 3763d27cd..6ddc44571 100644 --- a/src/pages/proposals.tsx +++ b/src/pages/proposals.tsx @@ -33,7 +33,6 @@ import useProposals from '../hooks/useProposals' import useProposalsByCoAuthor from '../hooks/useProposalsByCoAuthor' import { useProposalsSearchParams } from '../hooks/useProposalsSearchParams' import useProposalsVotes from '../hooks/useProposalsVotes' -import useSubscriptions from '../hooks/useSubscriptions' import locations, { navigate } from '../utils/locations' import { isUnderMaintenance } from '../utils/maintenance' @@ -57,7 +56,6 @@ export default function ProposalsPage() { }) const proposalIds = (proposals?.data || []).map((proposal) => proposal.id) const { votes, isLoadingVotes } = useProposalsVotes(proposalIds) - const [subscriptions, subscriptionsState] = useSubscriptions() const isTabletAndBelow = useTabletAndBelowMediaQuery() const handlePageFilter = useCallback( @@ -192,9 +190,6 @@ export default function ProposalsPage() { proposal={proposal} hasCoauthorRequest={!!requestsStatus.find((req) => req.proposal_id === proposal.id)} votes={votes ? votes[proposal.id] : undefined} - subscribing={subscriptionsState.isSubscribing} - subscribed={!!subscriptions.find((subscription) => subscription.proposal_id === proposal.id)} - onSubscribe={(_, proposal) => subscriptionsState.subscribe(proposal.id)} /> ) : ( Date: Thu, 12 Oct 2023 11:48:24 -0300 Subject: [PATCH 11/31] fix: navbar user size --- src/components/Layout/Layout.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/Layout/Layout.css b/src/components/Layout/Layout.css index ce629b5f3..4ca6643f2 100644 --- a/src/components/Layout/Layout.css +++ b/src/components/Layout/Layout.css @@ -7,11 +7,6 @@ margin: 0 auto; } -.dcl.new-user-menu .toggle { - width: 42px !important; - height: 42px !important; -} - @media only screen and (min-width: 1200px) { .ui.container { width: 1124px; @@ -24,6 +19,11 @@ } @media (min-width: 768px) { + .dcl.new-user-menu .toggle { + width: 42px !important; + height: 42px !important; + } + .ui.container.WiderFooter { padding: 0 24px !important; } From 04e6e26e33782d804f997d009ad80f75a5b1ec6e Mon Sep 17 00:00:00 2001 From: Andy Espagnolo Date: Thu, 12 Oct 2023 16:46:43 -0300 Subject: [PATCH 12/31] feat: improve search styles --- src/components/Layout/Navigation.css | 6 +++++- src/components/Search/SearchInputMobile.css | 20 +++++++++++++++----- src/components/Search/SearchInputMobile.tsx | 17 +++++------------ 3 files changed, 25 insertions(+), 18 deletions(-) diff --git a/src/components/Layout/Navigation.css b/src/components/Layout/Navigation.css index f47f199c1..542b367f0 100644 --- a/src/components/Layout/Navigation.css +++ b/src/components/Layout/Navigation.css @@ -27,6 +27,10 @@ } @media (max-width: 767px) { + .Navigation .dcl.tabs { + padding-right: 32px; + } + .Navigation .dcl.tabs-left { width: 100%; overflow: scroll; @@ -39,7 +43,7 @@ white-space: nowrap; } - .dcl.tabs .ui.container { + .Navigation .dcl.tabs .ui.container { display: flex; } diff --git a/src/components/Search/SearchInputMobile.css b/src/components/Search/SearchInputMobile.css index 9e229b1bc..b2a4a4eec 100644 --- a/src/components/Search/SearchInputMobile.css +++ b/src/components/Search/SearchInputMobile.css @@ -8,19 +8,27 @@ justify-content: center; background: var(--white-900); width: 40px; - height: 34px; + height: 35px; gap: 8px; font-size: 16px; - /* transition: all 0.5s ease-in-out; */ } .SearchInputMobile--open { width: 100%; - padding: 0 16px; + height: 34px; + padding-left: 16px; + padding-right: 10px; top: 0; } -/* background: linear-gradient(270deg, #FFF 0%, rgba(255, 255, 255, 0.00) 103.13%); */ +.SearchInputMobile__Gradient { + width: 16px; + height: 34.5px; + position: absolute; + left: -16px; + background: linear-gradient(270deg, #fff 0%, rgba(255, 255, 255, 0) 103.13%); + flex-shrink: 0; +} .SearchInputMobile__Input { width: 16px; @@ -28,7 +36,7 @@ border: 0; background: var(--white-900) no-repeat 8px center; background-image: url('../../images/icons/new-magnify.svg'); - outline-width: 0; + outline: none; } .SearchInputMobile__Input--open { @@ -45,6 +53,8 @@ } .SearchInputMobile__Container { + display: flex; + flex-direction: row; position: relative; width: 100%; } diff --git a/src/components/Search/SearchInputMobile.tsx b/src/components/Search/SearchInputMobile.tsx index 05dd3ea11..db8f7459d 100644 --- a/src/components/Search/SearchInputMobile.tsx +++ b/src/components/Search/SearchInputMobile.tsx @@ -33,10 +33,8 @@ export default function SearchInputMobile() { const [searchText, setSearchText] = useState(() => search || '') const focusSearch = () => { - setTimeout(() => { - searchInput.current?.focus() - searchInput.current?.click() - }, 500) + searchInput.current?.focus() + searchInput.current?.click() } useEffect(() => { @@ -48,7 +46,7 @@ export default function SearchInputMobile() { } }, [search]) - const handleChange = (e: React.ChangeEvent) => { + const handleChange = (e: React.ChangeEvent) => { setSearchText(e.target.value) } @@ -73,16 +71,10 @@ export default function SearchInputMobile() { } } - const handleOpen = () => { - if (!open) { - setOpen(true) - focusSearch() - } - } - return (
+
)}
+
) } From 3a9216dc1a15b0b9961d016bd5e164686ce69a94 Mon Sep 17 00:00:00 2001 From: Andy Espagnolo Date: Thu, 12 Oct 2023 17:16:57 -0300 Subject: [PATCH 13/31] fix: search input mobile --- src/components/Layout/Navigation.css | 5 +- src/components/Search/SearchInputMobile.css | 21 ++++++-- src/components/Search/SearchInputMobile.tsx | 54 ++++++++------------- 3 files changed, 41 insertions(+), 39 deletions(-) diff --git a/src/components/Layout/Navigation.css b/src/components/Layout/Navigation.css index 542b367f0..2d07d297b 100644 --- a/src/components/Layout/Navigation.css +++ b/src/components/Layout/Navigation.css @@ -28,7 +28,8 @@ @media (max-width: 767px) { .Navigation .dcl.tabs { - padding-right: 32px; + padding-left: 4px; + padding-right: 36px; } .Navigation .dcl.tabs-left { @@ -37,7 +38,7 @@ } .Navigation .dcl.tab { - margin: 0 16px; + margin: 0 12px; padding: 0; padding-bottom: 14px; white-space: nowrap; diff --git a/src/components/Search/SearchInputMobile.css b/src/components/Search/SearchInputMobile.css index b2a4a4eec..53bf55a7d 100644 --- a/src/components/Search/SearchInputMobile.css +++ b/src/components/Search/SearchInputMobile.css @@ -16,8 +16,8 @@ .SearchInputMobile--open { width: 100%; height: 34px; - padding-left: 16px; - padding-right: 10px; + padding-left: 10px; + padding-right: 16px; top: 0; } @@ -42,8 +42,6 @@ .SearchInputMobile__Input--open { width: 100%; padding: 8px 32px; - background: var(--white-900) no-repeat 0 center; - background-image: url('../../images/icons/new-magnify.svg'); } .SearchInputMobile__CloseIcon { @@ -58,3 +56,18 @@ position: relative; width: 100%; } + +.SearchInputMobile__Overlay { + position: fixed; + top: 113px; /* TODO: Default: 113px; Snapshot Unstable: 163px */ + left: 0; + width: 100%; + height: 100%; + background-color: var(--alpha-black-300); + z-index: 999; + visibility: hidden; +} + +.SearchInputMobile__Overlay--open { + visibility: visible; +} diff --git a/src/components/Search/SearchInputMobile.tsx b/src/components/Search/SearchInputMobile.tsx index db8f7459d..d4de2bc3c 100644 --- a/src/components/Search/SearchInputMobile.tsx +++ b/src/components/Search/SearchInputMobile.tsx @@ -1,4 +1,4 @@ -import { useEffect, useRef, useState } from 'react' +import { useRef, useState } from 'react' import { useLocation } from '@reach/router' import classNames from 'classnames' @@ -10,41 +10,29 @@ import Cross from '../Icon/Cross' import './SearchInputMobile.css' -function handleSearch(textSearch: string, location: Location) { - const newParams = new URLSearchParams(location.search) - if (textSearch) { - newParams.set('search', textSearch) - newParams.delete('page') - newParams.delete('order') - } else { - newParams.delete('search') - newParams.delete('page') - } - - navigate(locations.proposals(newParams)) -} - export default function SearchInputMobile() { const t = useFormatMessage() const location = useLocation() const { search } = useProposalsSearchParams() const searchInput = useRef(null) const [open, setOpen] = useState(false) - const [searchText, setSearchText] = useState(() => search || '') - - const focusSearch = () => { - searchInput.current?.focus() - searchInput.current?.click() - } + const [searchText, setSearchText] = useState(search || '') - useEffect(() => { - if (!search) { - setSearchText('') - setOpen(false) + const handleSearch = (textSearch: string, location: Location) => { + const newParams = new URLSearchParams(location.search) + if (textSearch) { + newParams.set('search', textSearch) + newParams.delete('page') + newParams.delete('order') } else { - focusSearch() + newParams.delete('search') + newParams.delete('page') } - }, [search]) + + setOpen(false) + searchInput.current?.blur() + navigate(locations.proposals(newParams)) + } const handleChange = (e: React.ChangeEvent) => { setSearchText(e.target.value) @@ -55,7 +43,8 @@ export default function SearchInputMobile() { setOpen(false) } else { setSearchText('') - focusSearch() + searchInput.current?.focus() + searchInput.current?.click() } } @@ -65,7 +54,7 @@ export default function SearchInputMobile() { } } - const keyUpHandler = (e: React.KeyboardEvent) => { + const handleKeyUp = (e: React.KeyboardEvent) => { if (e.code === 'Escape') { setSearchText('') } @@ -74,17 +63,16 @@ export default function SearchInputMobile() { return (
-
+ {!open &&
} setOpen(true)} - onBlur={() => setOpen(!!searchText)} - ref={searchInput} /> {open && ( From 04f4abaa2d2e29789b50670b15dce91866f5c4cf Mon Sep 17 00:00:00 2001 From: Andy Espagnolo Date: Fri, 13 Oct 2023 10:39:46 -0300 Subject: [PATCH 14/31] feat: update search styles according to snapshot status --- src/components/Debug/SnapshotStatus.tsx | 30 +++------------------ src/components/Search/SearchInputMobile.css | 6 ++++- src/components/Search/SearchInputMobile.tsx | 10 ++++++- src/hooks/useSnapshotStatus.ts | 27 +++++++++++++++++++ 4 files changed, 44 insertions(+), 29 deletions(-) create mode 100644 src/hooks/useSnapshotStatus.ts diff --git a/src/components/Debug/SnapshotStatus.tsx b/src/components/Debug/SnapshotStatus.tsx index 72d30f9c8..d0fe71ccd 100644 --- a/src/components/Debug/SnapshotStatus.tsx +++ b/src/components/Debug/SnapshotStatus.tsx @@ -1,42 +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 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 updateServiceStatus = async () => { - const status = await Governance.get().getSnapshotStatus() - logIfNotNormal(status) - const show = status.scoresStatus.health === ServiceHealth.Failing && SNAPSHOT_STATUS_ENABLED - setShowTopBar(show) - } - - useEffect(() => { - const intervalId = setInterval(updateServiceStatus, PING_INTERVAL_IN_MS) - return () => clearInterval(intervalId) - }, []) + const showSnapshotStatus = useSnapshotStatus() return ( -
+
{t('page.debug.snapshot_status.label')} diff --git a/src/components/Search/SearchInputMobile.css b/src/components/Search/SearchInputMobile.css index 53bf55a7d..aefb14a73 100644 --- a/src/components/Search/SearchInputMobile.css +++ b/src/components/Search/SearchInputMobile.css @@ -59,7 +59,7 @@ .SearchInputMobile__Overlay { position: fixed; - top: 113px; /* TODO: Default: 113px; Snapshot Unstable: 163px */ + top: 113px; left: 0; width: 100%; height: 100%; @@ -68,6 +68,10 @@ visibility: hidden; } +.SearchInputMobile__Overlay--with-snapshot-status { + top: 163px; +} + .SearchInputMobile__Overlay--open { visibility: visible; } diff --git a/src/components/Search/SearchInputMobile.tsx b/src/components/Search/SearchInputMobile.tsx index d4de2bc3c..25d49839d 100644 --- a/src/components/Search/SearchInputMobile.tsx +++ b/src/components/Search/SearchInputMobile.tsx @@ -5,6 +5,7 @@ import classNames from 'classnames' import useFormatMessage from '../../hooks/useFormatMessage' import { useProposalsSearchParams } from '../../hooks/useProposalsSearchParams' +import useSnapshotStatus from '../../hooks/useSnapshotStatus' import locations, { navigate } from '../../utils/locations' import Cross from '../Icon/Cross' @@ -17,6 +18,7 @@ export default function SearchInputMobile() { const searchInput = useRef(null) const [open, setOpen] = useState(false) const [searchText, setSearchText] = useState(search || '') + const showSnapshotStatus = useSnapshotStatus() const handleSearch = (textSearch: string, location: Location) => { const newParams = new URLSearchParams(location.search) @@ -78,7 +80,13 @@ export default function SearchInputMobile() { )}
-
+
) } diff --git a/src/hooks/useSnapshotStatus.ts b/src/hooks/useSnapshotStatus.ts new file mode 100644 index 000000000..403e10577 --- /dev/null +++ b/src/hooks/useSnapshotStatus.ts @@ -0,0 +1,27 @@ +import { useQuery } from '@tanstack/react-query' + +import { Governance } from '../clients/Governance' +import { ServiceHealth, SnapshotStatus } from '../clients/SnapshotTypes' +import { SNAPSHOT_STATUS_ENABLED } from '../constants' + +const PING_INTERVAL_IN_MS = 30000 // 30 seconds + +function logIfNotNormal(status: SnapshotStatus) { + if (status.scoresStatus.health !== ServiceHealth.Normal || status.graphQlStatus.health !== ServiceHealth.Normal) { + console.log('Snapshot Status', status) + } +} + +export default function useSnapshotStatus() { + const { data: showSnapshotStatus } = useQuery({ + queryKey: [`snapshotStatus`], + queryFn: async () => { + const status = await Governance.get().getSnapshotStatus() + logIfNotNormal(status) + return status.scoresStatus.health === ServiceHealth.Failing && SNAPSHOT_STATUS_ENABLED + }, + refetchInterval: PING_INTERVAL_IN_MS, + }) + + return showSnapshotStatus +} From 8088d82295e1b122c0e9bc1199ce5e58e0ae5f21 Mon Sep 17 00:00:00 2001 From: Andy Espagnolo Date: Fri, 13 Oct 2023 11:06:43 -0300 Subject: [PATCH 15/31] fix: search input overlay behaviour --- src/components/Search/SearchInputMobile.css | 4 ++-- src/components/Search/SearchInputMobile.tsx | 16 +++++++++++++++- 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/src/components/Search/SearchInputMobile.css b/src/components/Search/SearchInputMobile.css index aefb14a73..043833d60 100644 --- a/src/components/Search/SearchInputMobile.css +++ b/src/components/Search/SearchInputMobile.css @@ -8,14 +8,14 @@ justify-content: center; background: var(--white-900); width: 40px; - height: 35px; + height: 33px; gap: 8px; font-size: 16px; } .SearchInputMobile--open { width: 100%; - height: 34px; + height: 32px; padding-left: 10px; padding-right: 16px; top: 0; diff --git a/src/components/Search/SearchInputMobile.tsx b/src/components/Search/SearchInputMobile.tsx index 25d49839d..e46f85e41 100644 --- a/src/components/Search/SearchInputMobile.tsx +++ b/src/components/Search/SearchInputMobile.tsx @@ -1,4 +1,4 @@ -import { useRef, useState } from 'react' +import { useLayoutEffect, useRef, useState } from 'react' import { useLocation } from '@reach/router' import classNames from 'classnames' @@ -62,6 +62,19 @@ export default function SearchInputMobile() { } } + useLayoutEffect(() => { + if (typeof window !== 'undefined') { + const onScroll = function () { + searchInput.current?.blur() + setOpen(false) + } + + window.addEventListener('scroll', onScroll) + + return () => window.removeEventListener('scroll', onScroll) + } + }, []) + return (
@@ -81,6 +94,7 @@ export default function SearchInputMobile() { )}
setOpen(false)} className={classNames( 'SearchInputMobile__Overlay', open && 'SearchInputMobile__Overlay--open', From f5fe680a9f8e254c6631c1831560acbfa885459f Mon Sep 17 00:00:00 2001 From: Andy Espagnolo Date: Mon, 16 Oct 2023 11:07:20 -0300 Subject: [PATCH 16/31] refactor: remove navbar component --- gatsby-browser.js | 4 ++-- src/components/Layout/Navbar.tsx | 7 ------- 2 files changed, 2 insertions(+), 9 deletions(-) delete mode 100644 src/components/Layout/Navbar.tsx diff --git a/gatsby-browser.js b/gatsby-browser.js index 677974f45..33f3604a9 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -20,7 +20,6 @@ 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 ExternalLinkWarningModal from './src/components/Modal/ExternalLinkWarningModal/ExternalLinkWarningModal' import IdentityConnectModal from './src/components/Modal/IdentityConnectModal/IdentityConnectModal' @@ -29,6 +28,7 @@ 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,7 +47,7 @@ export const wrapPageElement = ({ element, props }) => { {SNAPSHOT_STATUS_ENABLED && } - }> + }> {element} diff --git a/src/components/Layout/Navbar.tsx b/src/components/Layout/Navbar.tsx deleted file mode 100644 index 56bfc4a84..000000000 --- a/src/components/Layout/Navbar.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import UserInformation, { UserInformationProps } from 'decentraland-gatsby/dist/components/User/UserInformation' - -function Navbar(props: UserInformationProps) { - return -} - -export default Navbar From 2b590115355e4c9e4e8aa86c2d2d227fd9a00d04 Mon Sep 17 00:00:00 2001 From: Andy Espagnolo Date: Tue, 17 Oct 2023 13:40:12 -0300 Subject: [PATCH 17/31] feat: style improvements --- src/components/Category/CategoryOption.tsx | 4 +++- src/components/Proposal/ProposalItem.css | 9 ++++++--- src/components/Proposal/ProposalItem.tsx | 2 +- 3 files changed, 10 insertions(+), 5 deletions(-) diff --git a/src/components/Category/CategoryOption.tsx b/src/components/Category/CategoryOption.tsx index c782e4ce0..b04df6731 100644 --- 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 {getCategoryIcon(type, CategoryIconVariant.Circled)} - {t(`category.${type}_title`)} + + {t(`category.${type}_title`)} + {hasSubtypes && ( -
+
{title} From 125c961eb414240457406b803c11fb6268ee76b2 Mon Sep 17 00:00:00 2001 From: Andy Espagnolo Date: Tue, 17 Oct 2023 14:14:05 -0300 Subject: [PATCH 18/31] fix: search input mobile --- src/components/Layout/Navigation.css | 5 ++ src/components/Search/SearchInputMobile.css | 22 +++++-- src/components/Search/SearchInputMobile.tsx | 66 +++++++++++---------- 3 files changed, 57 insertions(+), 36 deletions(-) diff --git a/src/components/Layout/Navigation.css b/src/components/Layout/Navigation.css index 2d07d297b..160261bba 100644 --- a/src/components/Layout/Navigation.css +++ b/src/components/Layout/Navigation.css @@ -1,5 +1,6 @@ .Navigation { position: relative; + z-index: 9999; } .Navigation .dcl.tab svg { @@ -28,8 +29,12 @@ @media (max-width: 767px) { .Navigation .dcl.tabs { + background-color: var(--white-900); padding-left: 4px; padding-right: 36px; + margin-top: 0; + align-items: flex-end; + height: 65px; } .Navigation .dcl.tabs-left { diff --git a/src/components/Search/SearchInputMobile.css b/src/components/Search/SearchInputMobile.css index 043833d60..13b0ea1ef 100644 --- a/src/components/Search/SearchInputMobile.css +++ b/src/components/Search/SearchInputMobile.css @@ -1,10 +1,10 @@ .SearchInputMobile { position: absolute; - top: -1px; + bottom: 2px; right: 0; display: flex; flex-direction: row; - align-items: center; + align-items: flex-end; justify-content: center; background: var(--white-900); width: 40px; @@ -15,10 +15,12 @@ .SearchInputMobile--open { width: 100%; - height: 32px; + display: flex; + height: 65px; padding-left: 10px; padding-right: 16px; top: 0; + z-index: 9999; } .SearchInputMobile__Gradient { @@ -26,7 +28,7 @@ height: 34.5px; position: absolute; left: -16px; - background: linear-gradient(270deg, #fff 0%, rgba(255, 255, 255, 0) 103.13%); + background: linear-gradient(270deg, var(--white-900) 0%, rgba(255, 255, 255, 0) 103.13%); flex-shrink: 0; } @@ -59,7 +61,7 @@ .SearchInputMobile__Overlay { position: fixed; - top: 113px; + top: 0; left: 0; width: 100%; height: 100%; @@ -75,3 +77,13 @@ .SearchInputMobile__Overlay--open { visibility: visible; } + +.dcl.tabs, +.dcl.navbar { + z-index: 99999 !important; +} + +/* Hide tabs if search input mobile is open to fix position bug */ +.dcl.tabs:has(+ .SearchInputMobile--open) { + visibility: hidden; +} diff --git a/src/components/Search/SearchInputMobile.tsx b/src/components/Search/SearchInputMobile.tsx index e46f85e41..5f570e9bd 100644 --- a/src/components/Search/SearchInputMobile.tsx +++ b/src/components/Search/SearchInputMobile.tsx @@ -1,11 +1,10 @@ -import { useLayoutEffect, useRef, useState } from 'react' +import { useCallback, useLayoutEffect, useRef, useState } from 'react' import { useLocation } from '@reach/router' import classNames from 'classnames' import useFormatMessage from '../../hooks/useFormatMessage' import { useProposalsSearchParams } from '../../hooks/useProposalsSearchParams' -import useSnapshotStatus from '../../hooks/useSnapshotStatus' import locations, { navigate } from '../../utils/locations' import Cross from '../Icon/Cross' @@ -18,7 +17,6 @@ export default function SearchInputMobile() { const searchInput = useRef(null) const [open, setOpen] = useState(false) const [searchText, setSearchText] = useState(search || '') - const showSnapshotStatus = useSnapshotStatus() const handleSearch = (textSearch: string, location: Location) => { const newParams = new URLSearchParams(location.search) @@ -31,7 +29,7 @@ export default function SearchInputMobile() { newParams.delete('page') } - setOpen(false) + handleClose() searchInput.current?.blur() navigate(locations.proposals(newParams)) } @@ -42,7 +40,7 @@ export default function SearchInputMobile() { const handleClear = () => { if (searchText === '') { - setOpen(false) + handleClose() } else { setSearchText('') searchInput.current?.focus() @@ -62,45 +60,51 @@ export default function SearchInputMobile() { } } + const handleOpen = () => { + setOpen(true) + } + + const handleClose = useCallback(() => { + setOpen(false) + }, []) + useLayoutEffect(() => { if (typeof window !== 'undefined') { const onScroll = function () { searchInput.current?.blur() - setOpen(false) + handleClose() } window.addEventListener('scroll', onScroll) return () => window.removeEventListener('scroll', onScroll) } - }, []) + }, [handleClose]) return ( -
-
- {!open &&
} - setOpen(true)} - /> - {open && ( - - )} -
+ <>
setOpen(false)} - className={classNames( - 'SearchInputMobile__Overlay', - open && 'SearchInputMobile__Overlay--open', - showSnapshotStatus && 'SearchInputMobile__Overlay--with-snapshot-status' - )} + className={classNames('SearchInputMobile__Overlay', open && 'SearchInputMobile__Overlay--open')} + onClick={handleClose} /> -
+
+
+ {!open &&
} + + {open && ( + + )} +
+
+ ) } From 6b49c5c479192943a154a0463d8e73b668945409 Mon Sep 17 00:00:00 2001 From: Andy Espagnolo Date: Tue, 17 Oct 2023 15:57:19 -0300 Subject: [PATCH 19/31] fix: search scroll --- src/components/Layout/Navigation.css | 2 +- src/components/Search/FilterMenu.css | 6 +++--- src/components/Search/SearchInputMobile.css | 14 ++++++++------ src/components/Search/SearchInputMobile.tsx | 21 ++++++++++++--------- 4 files changed, 24 insertions(+), 19 deletions(-) diff --git a/src/components/Layout/Navigation.css b/src/components/Layout/Navigation.css index 160261bba..aa33190fb 100644 --- a/src/components/Layout/Navigation.css +++ b/src/components/Layout/Navigation.css @@ -1,6 +1,6 @@ .Navigation { position: relative; - z-index: 9999; + z-index: 9; } .Navigation .dcl.tab svg { diff --git a/src/components/Search/FilterMenu.css b/src/components/Search/FilterMenu.css index ce6f100ea..d947faa01 100644 --- a/src/components/Search/FilterMenu.css +++ b/src/components/Search/FilterMenu.css @@ -23,7 +23,7 @@ position: fixed; top: 0; right: -303px; - z-index: 99998; + z-index: 11; height: 100vh; width: 293px; overflow-y: scroll; @@ -45,14 +45,14 @@ width: 293px; min-height: 100%; background-color: var(--white-900); - z-index: 99999; + z-index: 11; padding: 15px 32px; } .FilterMenu__Overlay { width: 100%; height: 100%; - z-index: 99995; + z-index: 10; background-color: var(--alpha-black-300); position: fixed; top: 0; diff --git a/src/components/Search/SearchInputMobile.css b/src/components/Search/SearchInputMobile.css index 13b0ea1ef..4252e2564 100644 --- a/src/components/Search/SearchInputMobile.css +++ b/src/components/Search/SearchInputMobile.css @@ -20,7 +20,7 @@ padding-left: 10px; padding-right: 16px; top: 0; - z-index: 9999; + z-index: 10; } .SearchInputMobile__Gradient { @@ -46,10 +46,12 @@ padding: 8px 32px; } -.SearchInputMobile__CloseIcon { +.SearchInputMobile__CloseButton { position: absolute; - top: 10px; - right: 0; + top: 6px; + right: -6px; + border: none; + background: none; } .SearchInputMobile__Container { @@ -66,7 +68,7 @@ width: 100%; height: 100%; background-color: var(--alpha-black-300); - z-index: 999; + z-index: 10; visibility: hidden; } @@ -80,7 +82,7 @@ .dcl.tabs, .dcl.navbar { - z-index: 99999 !important; + z-index: 10 !important; } /* Hide tabs if search input mobile is open to fix position bug */ diff --git a/src/components/Search/SearchInputMobile.tsx b/src/components/Search/SearchInputMobile.tsx index 5f570e9bd..fc360f459 100644 --- a/src/components/Search/SearchInputMobile.tsx +++ b/src/components/Search/SearchInputMobile.tsx @@ -60,19 +60,20 @@ export default function SearchInputMobile() { } } - const handleOpen = () => { - setOpen(true) - } - const handleClose = useCallback(() => { + searchInput.current?.blur() setOpen(false) }, []) + const lastScroll = useRef(0) useLayoutEffect(() => { if (typeof window !== 'undefined') { - const onScroll = function () { - searchInput.current?.blur() - handleClose() + const onScroll = () => { + const isScrollDown = window.scrollY > lastScroll.current + lastScroll.current = window.scrollY + if (isScrollDown) { + handleClose() + } } window.addEventListener('scroll', onScroll) @@ -98,10 +99,12 @@ export default function SearchInputMobile() { onChange={handleChange} onKeyPress={handleKeyPress} onKeyUp={handleKeyUp} - onFocus={handleOpen} + onFocus={() => setOpen(true)} /> {open && ( - + )}
From a6cb8d8ef1350164bcef0ef1f7d99581b4125c83 Mon Sep 17 00:00:00 2001 From: Andy Espagnolo Date: Tue, 17 Oct 2023 17:25:36 -0300 Subject: [PATCH 20/31] fix: filter label styles --- src/components/Search/FilterLabel.tsx | 31 ++++++--------------------- 1 file changed, 7 insertions(+), 24 deletions(-) diff --git a/src/components/Search/FilterLabel.tsx b/src/components/Search/FilterLabel.tsx index 7c0bec26f..c97300826 100644 --- a/src/components/Search/FilterLabel.tsx +++ b/src/components/Search/FilterLabel.tsx @@ -1,41 +1,24 @@ import classNames from 'classnames' -import { navigate } from '../../utils/locations' +import Link from '../Common/Typography/Link' import Text from '../Common/Typography/Text' import './FilterLabel.css' -export type FilterLabelProps = Omit, 'children'> & { +interface Props { active?: boolean label: string + href: string } -export default function FilterLabel({ active, label, className, ...props }: FilterLabelProps) { - function handleClick(e: React.MouseEvent) { - if (props.onClick) { - props.onClick(e) - } - - if (!e.defaultPrevented) { - e.preventDefault() - - if (props.href) { - navigate(props.href) - } - } - } - +export default function FilterLabel({ active, label, href }: Props) { return ( - + - + {label} - + ) } From 993889103f1442701ad4b9984ec9d018a8dff3a4 Mon Sep 17 00:00:00 2001 From: Andy Espagnolo Date: Tue, 17 Oct 2023 17:42:23 -0300 Subject: [PATCH 21/31] feat: improve proposals loading --- src/pages/proposals.css | 8 ++ src/pages/proposals.tsx | 218 ++++++++++++++++++++-------------------- 2 files changed, 119 insertions(+), 107 deletions(-) diff --git a/src/pages/proposals.css b/src/pages/proposals.css index ea7c178a0..401f6360a 100644 --- a/src/pages/proposals.css +++ b/src/pages/proposals.css @@ -66,3 +66,11 @@ font-size: 14px !important; } } + +.ProposalsPage__LoaderContainer { + display: flex; + align-items: center; + justify-content: center; + position: relative; + height: 250px; +} diff --git a/src/pages/proposals.tsx b/src/pages/proposals.tsx index 6ddc44571..2fff970c3 100644 --- a/src/pages/proposals.tsx +++ b/src/pages/proposals.tsx @@ -16,7 +16,6 @@ import Link from '../components/Common/Typography/Link' import Text from '../components/Common/Typography/Text' import WiderContainer from '../components/Common/WiderContainer' import ActionableLayout from '../components/Layout/ActionableLayout' -import LoadingView from '../components/Layout/LoadingView' import MaintenanceLayout from '../components/Layout/MaintenanceLayout' import Navigation, { NavigationTab } from '../components/Layout/Navigation' import ProposalItem from '../components/Proposal/ProposalItem' @@ -99,7 +98,7 @@ export default function ProposalsPage() { return } - const isLoading = !proposals || (isLoadingProposals && isLoadingVotes) + const isLoading = isLoadingProposals || isLoadingVotes return ( <> @@ -108,114 +107,119 @@ export default function ProposalsPage() { - {isLoading && } - {!isLoading && ( - -
- -
- {search && proposals && ( - - - - )} -
- -
-
- - - -
+ +
+ +
+ {search && proposals && ( + + + + )} +
+ +
+
+ + +
- -
- {proposals && ( - - - - )} - - {t('general.count_proposals', { count: proposals.total || 0 })} - - ) - } - rightAction={ - <> - {proposals && ( - <> - - - - - - - - - - )} - - - } - > - - {type && !searching && } - {proposals && proposals.data.length === 0 && ( - 0 - ? t('navigation.search.no_matches') - : t('page.proposal_list.no_proposals_yet') - } - /> - )} - {proposals && ( -
- {proposals.data.map((proposal) => { - return isTabletAndBelow ? ( - req.proposal_id === proposal.id)} - votes={votes ? votes[proposal.id] : undefined} - /> - ) : ( - - ) - })} -
- )} - {proposals && proposals.total > ITEMS_PER_PAGE && ( - handlePageFilter(activePage as number)} - totalPages={Math.ceil(proposals.total / ITEMS_PER_PAGE)} - activePage={page} - firstItem={null} - lastItem={null} - /> - )} -
+ +
+ {proposals && ( + + + + )} + + {t('general.count_proposals', { count: proposals.total || 0 })} + + ) + } + rightAction={ + <> + {proposals && ( + <> + + + + + + + + + + )} + + + } + > + {type && !searching && } + {isLoading && ( +
+ +
+ )} + {!isLoading && ( + <> + {proposals && proposals.data.length === 0 && ( + 0 + ? t('navigation.search.no_matches') + : t('page.proposal_list.no_proposals_yet') + } + /> + )} + {proposals && ( +
+ {proposals.data.map((proposal) => { + return isTabletAndBelow ? ( + req.proposal_id === proposal.id)} + votes={votes ? votes[proposal.id] : undefined} + /> + ) : ( + + ) + })} +
+ )} + {proposals && proposals.total > ITEMS_PER_PAGE && ( + handlePageFilter(activePage as number)} + totalPages={Math.ceil(proposals.total / ITEMS_PER_PAGE)} + activePage={page} + firstItem={null} + lastItem={null} + /> + )} + + )} +
- - )} +
+ ) } From 4512201bdd523696125d99900881991230f82564 Mon Sep 17 00:00:00 2001 From: Andy Espagnolo Date: Wed, 18 Oct 2023 10:21:02 -0300 Subject: [PATCH 22/31] fix: search position styles --- src/components/Search/SearchInputMobile.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/Search/SearchInputMobile.css b/src/components/Search/SearchInputMobile.css index 4252e2564..82243d97e 100644 --- a/src/components/Search/SearchInputMobile.css +++ b/src/components/Search/SearchInputMobile.css @@ -1,6 +1,6 @@ .SearchInputMobile { position: absolute; - bottom: 2px; + bottom: 1px; right: 0; display: flex; flex-direction: row; @@ -28,8 +28,8 @@ height: 34.5px; position: absolute; left: -16px; + bottom: 0; background: linear-gradient(270deg, var(--white-900) 0%, rgba(255, 255, 255, 0) 103.13%); - flex-shrink: 0; } .SearchInputMobile__Input { @@ -47,9 +47,9 @@ } .SearchInputMobile__CloseButton { - position: absolute; - top: 6px; - right: -6px; + display: flex; + align-items: center; + padding: 0; border: none; background: none; } From 7a1092f738bbcdd610fb14ca9b3069659a211c93 Mon Sep 17 00:00:00 2001 From: Andy Espagnolo Date: Wed, 18 Oct 2023 10:37:48 -0300 Subject: [PATCH 23/31] refactor: home charts tabs styles --- src/components/Common/BoxTabs.css | 8 +-- src/components/Home/Charts.css | 61 +-------------------- src/components/Home/Charts.tsx | 34 +++++++----- src/components/Search/SearchInputMobile.css | 4 +- 4 files changed, 27 insertions(+), 80 deletions(-) diff --git a/src/components/Common/BoxTabs.css b/src/components/Common/BoxTabs.css index df7da1813..5a0ee9b0a 100644 --- 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; diff --git a/src/components/Home/Charts.css b/src/components/Home/Charts.css index d12834749..cd5bcfae5 100644 --- 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 index 71445a827..6faa2b537 100644 --- 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 ( - - - setSelectedTab(ChartType.ParticipatingVP)}> + + + setSelectedTab(ChartType.ParticipatingVP)}> {t('page.home.community_engagement.participating_vp_title')} - - setSelectedTab(ChartType.VotesPerProposal)}> + + setSelectedTab(ChartType.VotesPerProposal)} + > {t('page.home.community_engagement.votes_per_proposal_title')} - - - -
- {t('page.home.community_engagement.display_median')} -
- - + + + + +
+ {t('page.home.community_engagement.display_median')} +
+ + + {((isSelectedParticipatingVPTab && isLoadingParticipatingVP) || (isSelectedVotesPerProposalTab && isLoadingVotesPerProposal)) && (
diff --git a/src/components/Search/SearchInputMobile.css b/src/components/Search/SearchInputMobile.css index 82243d97e..12865f1f0 100644 --- a/src/components/Search/SearchInputMobile.css +++ b/src/components/Search/SearchInputMobile.css @@ -80,12 +80,12 @@ visibility: visible; } -.dcl.tabs, +.Navigation .dcl.tabs, .dcl.navbar { z-index: 10 !important; } /* Hide tabs if search input mobile is open to fix position bug */ -.dcl.tabs:has(+ .SearchInputMobile--open) { +.Navigation .dcl.tabs:has(+ .SearchInputMobile--open) { visibility: hidden; } From d39897865a62c26cfba5f3e3640ce977bafa9cb3 Mon Sep 17 00:00:00 2001 From: Andy Espagnolo Date: Wed, 18 Oct 2023 11:30:11 -0300 Subject: [PATCH 24/31] fix: profile avatar position --- src/components/User/UserStats.css | 2 +- src/components/User/UserStats.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/User/UserStats.css b/src/components/User/UserStats.css index d9ad46a6f..5b377c0b2 100644 --- a/src/components/User/UserStats.css +++ b/src/components/User/UserStats.css @@ -1,4 +1,4 @@ -.ui.container.UserStats__Container { +.UserStats { display: flex; gap: 41px; } diff --git a/src/components/User/UserStats.tsx b/src/components/User/UserStats.tsx index 214a2e921..aaaac1287 100644 --- a/src/components/User/UserStats.tsx +++ b/src/components/User/UserStats.tsx @@ -37,7 +37,7 @@ export default function UserStats({ address, vpDistribution, isLoadingVpDistribu const { total } = vpDistribution || { total: 0 } return ( -
+
From fe150f3a8191c5d259f6e0d754d484204a049cc3 Mon Sep 17 00:00:00 2001 From: Andy Espagnolo Date: Wed, 18 Oct 2023 11:53:50 -0300 Subject: [PATCH 25/31] fix: box tabs size in desktop --- src/components/Common/BoxTabs.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Common/BoxTabs.css b/src/components/Common/BoxTabs.css index 5a0ee9b0a..21c39aff2 100644 --- a/src/components/Common/BoxTabs.css +++ b/src/components/Common/BoxTabs.css @@ -39,7 +39,7 @@ .BoxTabs .tab { text-transform: none; padding: 15px 0; - font-size: 15px; + font-size: 13px !important; line-height: 18px; } From b811feb15781f22363ad1cf3221648f19a2be950 Mon Sep 17 00:00:00 2001 From: Andy Espagnolo Date: Wed, 18 Oct 2023 12:28:59 -0300 Subject: [PATCH 26/31] refactor: remove comment --- src/components/Search/SearchTitle.css | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Search/SearchTitle.css b/src/components/Search/SearchTitle.css index 649e4cf97..7197c7d64 100644 --- a/src/components/Search/SearchTitle.css +++ b/src/components/Search/SearchTitle.css @@ -1,7 +1,6 @@ .SearchTitle__Container { display: flex; align-items: center; - /* gap: 12px; */ } .SearchTitle__TextContainer { From e111efd43f9a7a4fd3aef8de544a9b646908459f Mon Sep 17 00:00:00 2001 From: Andy Espagnolo Date: Wed, 18 Oct 2023 14:25:22 -0300 Subject: [PATCH 27/31] fix: use translate instead of right to position sidebar --- src/components/Search/FilterMenu.css | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/components/Search/FilterMenu.css b/src/components/Search/FilterMenu.css index d947faa01..fc773de88 100644 --- a/src/components/Search/FilterMenu.css +++ b/src/components/Search/FilterMenu.css @@ -22,20 +22,25 @@ .FilterMenu__Sidebar { position: fixed; top: 0; - right: -303px; + right: 0; z-index: 11; height: 100vh; width: 293px; overflow-y: scroll; overscroll-behavior: none; visibility: hidden; - transition: 0.5s ease; + transform: translateX(293px); + transition: all 0.5s ease; box-shadow: 0px 0px 35px 0px var(--alpha-black-400); } +.FilterMenu__Sidebar::-webkit-scrollbar { + display: none; +} + .FilterMenu__Sidebar--open { + transform: translateX(0px); visibility: visible; - right: -10px; } .FilterMenu__SidebarContent { @@ -61,7 +66,7 @@ bottom: 0; opacity: 0; visibility: hidden; - transition: 0.5s ease; + transition: all 0.5s ease; overflow-y: hidden; } From 70c8092c540485d012b5da8e7f79bbf29dc02c06 Mon Sep 17 00:00:00 2001 From: Andy Espagnolo Date: Wed, 18 Oct 2023 17:23:58 -0300 Subject: [PATCH 28/31] feat: show competing grants in mobile --- .../View/Budget/ContestedBudgetCard.css | 7 +++++++ .../Proposal/View/Budget/ProposalBudget.tsx | 12 +++++------- .../Proposal/View/CompetingButton.css | 19 +++++++++++++++---- 3 files changed, 27 insertions(+), 11 deletions(-) diff --git a/src/components/Proposal/View/Budget/ContestedBudgetCard.css b/src/components/Proposal/View/Budget/ContestedBudgetCard.css index 9b977468c..18b735dce 100644 --- a/src/components/Proposal/View/Budget/ContestedBudgetCard.css +++ b/src/components/Proposal/View/Budget/ContestedBudgetCard.css @@ -6,9 +6,16 @@ .ContestedBudgetCard__Row { display: flex; + flex-direction: column; justify-content: space-between; } +@media (min-width: 768px) { + .ContestedBudgetCard__Row { + flex-direction: row; + } +} + .ContestedBudgetCard__Content { display: flex; flex-direction: column; diff --git a/src/components/Proposal/View/Budget/ProposalBudget.tsx b/src/components/Proposal/View/Budget/ProposalBudget.tsx index e9d591bdf..c8d10c240 100644 --- a/src/components/Proposal/View/Budget/ProposalBudget.tsx +++ b/src/components/Proposal/View/Budget/ProposalBudget.tsx @@ -26,13 +26,11 @@ export default function ProposalBudget({ proposal, budget }: Props) {
- - {contestantsAmount > 0 && isActive && ( -
- -
- )} - + {contestantsAmount > 0 && isActive && ( +
+ +
+ )} ) } diff --git a/src/components/Proposal/View/CompetingButton.css b/src/components/Proposal/View/CompetingButton.css index eccd0a703..e70c6d012 100644 --- a/src/components/Proposal/View/CompetingButton.css +++ b/src/components/Proposal/View/CompetingButton.css @@ -1,8 +1,7 @@ .CompetingButton { display: flex; width: 100%; - height: 47px; - padding: 11px 16px 12px 18px; + padding: 12px 16px; justify-content: space-between; align-items: center; background: var(--white-900); @@ -14,8 +13,20 @@ .CompetingButton__Title { font-weight: var(--weight-normal); - font-size: 13px; - line-height: 18px; + font-size: 12px; + line-height: 17px; text-transform: uppercase; color: var(--black-600); + text-align: left; +} + +@media (min-width: 768px) { + .CompetingButton { + height: 47px; + } + + .CompetingButton__Title { + font-size: 13px; + line-height: 18px; + } } From 3f485a80d52a220739ee7b8248f8283b7b263a42 Mon Sep 17 00:00:00 2001 From: Andy Espagnolo Date: Wed, 18 Oct 2023 18:09:56 -0300 Subject: [PATCH 29/31] feat: improve governance sidebar component --- src/components/Search/FilterMenu.css | 21 -------- src/components/Search/FilterMenu.tsx | 3 +- src/components/Sidebar/GovernanceSidebar.css | 38 ++++++++++---- src/components/Sidebar/GovernanceSidebar.tsx | 55 ++++++++------------ src/components/Sidebar/Overlay.css | 19 +++++++ src/components/Sidebar/Overlay.tsx | 12 +++++ src/components/User/Badges/BadgeCard.css | 14 ++++- src/components/User/Badges/Badges.tsx | 1 - src/components/User/Badges/BadgesSidebar.tsx | 13 ++--- 9 files changed, 97 insertions(+), 79 deletions(-) create mode 100644 src/components/Sidebar/Overlay.css create mode 100644 src/components/Sidebar/Overlay.tsx diff --git a/src/components/Search/FilterMenu.css b/src/components/Search/FilterMenu.css index fc773de88..6bc0ce220 100644 --- a/src/components/Search/FilterMenu.css +++ b/src/components/Search/FilterMenu.css @@ -54,27 +54,6 @@ padding: 15px 32px; } -.FilterMenu__Overlay { - width: 100%; - height: 100%; - z-index: 10; - background-color: var(--alpha-black-300); - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - opacity: 0; - visibility: hidden; - transition: all 0.5s ease; - overflow-y: hidden; -} - -.FilterMenu__Overlay--open { - visibility: visible; - opacity: 1; -} - .FilterMenu__CloseButton { position: absolute; top: 23px; diff --git a/src/components/Search/FilterMenu.tsx b/src/components/Search/FilterMenu.tsx index 565fab119..976f2bbb0 100644 --- a/src/components/Search/FilterMenu.tsx +++ b/src/components/Search/FilterMenu.tsx @@ -6,6 +6,7 @@ import useFormatMessage from '../../hooks/useFormatMessage' import Text from '../Common/Typography/Text' import Cross from '../Icon/Cross' import Filter from '../Icon/Filter' +import Overlay from '../Sidebar/Overlay' import './FilterMenu.css' @@ -26,7 +27,7 @@ export default function FilterMenu({ children }: Props) {
-
+
{children} diff --git a/src/components/Sidebar/GovernanceSidebar.css b/src/components/Sidebar/GovernanceSidebar.css index c0bf40c60..06be918a4 100644 --- a/src/components/Sidebar/GovernanceSidebar.css +++ b/src/components/Sidebar/GovernanceSidebar.css @@ -1,20 +1,36 @@ -.ui.push.right.very.wide.visible.sidebar.GovernanceSidebar { +.GovernanceSidebar { + display: flex; + flex-direction: column; + gap: 32px; width: 100%; + background: var(--white-900); + padding: 26px; + position: fixed; + top: 0; + right: 0; + z-index: 11; + height: 100%; + overflow-y: scroll; + overscroll-behavior: none; + visibility: hidden; + transform: translateX(650px); + transition: all 0.5s ease; + box-shadow: 0px 0px 35px 0px var(--alpha-black-400); } @media (min-width: 768px) { - .ui.push.right.very.wide.visible.sidebar.GovernanceSidebar { + .GovernanceSidebar { width: 650px; + overflow-y: auto; + overscroll-behavior: contain; } } -.GovernanceSidebar { - display: flex; - flex-direction: column; - gap: 32px; - background: var(--white-900); - padding-top: 26px; - padding-left: 27px; - padding-right: 24px; - cursor: default; +.GovernanceSidebar::-webkit-scrollbar { + display: none; +} + +.GovernanceSidebar--open { + transform: translateX(0px); + visibility: visible; } diff --git a/src/components/Sidebar/GovernanceSidebar.tsx b/src/components/Sidebar/GovernanceSidebar.tsx index 2ae74a799..ea8c05743 100644 --- a/src/components/Sidebar/GovernanceSidebar.tsx +++ b/src/components/Sidebar/GovernanceSidebar.tsx @@ -1,50 +1,39 @@ -import { useEffect } from 'react' +import { useEffect, useRef } from 'react' -import Sidebar from 'semantic-ui-react/dist/commonjs/modules/Sidebar/Sidebar' +import classNames from 'classnames' import './GovernanceSidebar.css' +import Overlay from './Overlay' type Props = { - visible?: boolean + visible: boolean children: React.ReactNode onShow?: () => void onHide?: () => void - onClose?: () => void + onClose: () => void } -export default function GovernanceSidebar({ visible, onShow, onHide, onClose, children }: Props) { +const ANIMATION_DURATION = 500 + +export default function GovernanceSidebar({ visible = false, onShow, onHide, onClose, children }: Props) { + const prevVisible = useRef(visible) useEffect(() => { - function handleClickOutside(event: MouseEvent) { - const sidebar = document.querySelector('.GovernanceSidebar') - if (sidebar && !sidebar.contains(event.target as Node) && !!onClose) { - event.preventDefault() - event.stopPropagation() - onClose() + if (prevVisible.current && !visible) { + if (onHide) { + onHide() + } + } else if (!prevVisible.current && visible) { + if (onShow) { + setTimeout(onShow, ANIMATION_DURATION) } } - - if (visible) { - document.addEventListener('mousedown', handleClickOutside) - } else { - document.removeEventListener('mousedown', handleClickOutside) - } - - return () => { - document.removeEventListener('mousedown', handleClickOutside) - } - }, [visible, onClose]) + prevVisible.current = visible + }, [onHide, onShow, visible]) return ( - - {children} - + <> + +
{children}
+ ) } diff --git a/src/components/Sidebar/Overlay.css b/src/components/Sidebar/Overlay.css new file mode 100644 index 000000000..af743e39a --- /dev/null +++ b/src/components/Sidebar/Overlay.css @@ -0,0 +1,19 @@ +.Overlay { + width: 100%; + height: 100%; + z-index: 10; + background-color: var(--alpha-black-300); + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + opacity: 0; + visibility: hidden; + transition: all 0.5s ease; +} + +.Overlay--open { + visibility: visible; + opacity: 1; +} diff --git a/src/components/Sidebar/Overlay.tsx b/src/components/Sidebar/Overlay.tsx new file mode 100644 index 000000000..55374d027 --- /dev/null +++ b/src/components/Sidebar/Overlay.tsx @@ -0,0 +1,12 @@ +import classNames from 'classnames' + +import './Overlay.css' + +interface Props { + isOpen: boolean + onClick: () => void +} + +export default function Overlay({ isOpen, onClick }: Props) { + return
+} diff --git a/src/components/User/Badges/BadgeCard.css b/src/components/User/Badges/BadgeCard.css index 7bc0e2029..05a2b973b 100644 --- a/src/components/User/Badges/BadgeCard.css +++ b/src/components/User/Badges/BadgeCard.css @@ -1,5 +1,4 @@ .BadgeCard { - max-width: 185px; height: 206px; background: var(--white-900); border: 1px solid var(--alpha-black-300); @@ -14,6 +13,12 @@ cursor: pointer; } +@media (min-width: 768px) { + .BadgeCard { + max-width: 185px; + } +} + .BadgeCard:hover { box-shadow: 0 0 8px var(--black-600); } @@ -42,7 +47,12 @@ overflow: hidden; text-overflow: ellipsis; margin-bottom: -4px; - max-width: 160px; +} + +@media (min-width: 768px) { + .BadgeCard { + max-width: 160px; + } } .BadgeCard__MintDate { diff --git a/src/components/User/Badges/Badges.tsx b/src/components/User/Badges/Badges.tsx index f903fb351..98daa38d6 100644 --- a/src/components/User/Badges/Badges.tsx +++ b/src/components/User/Badges/Badges.tsx @@ -28,7 +28,6 @@ export default function Badges({ address }: Props) { const handleSidebarClose = useCallback(() => { setSidebarOpen(false) - setBadgeInDetail(null) }, []) useEffect(() => { diff --git a/src/components/User/Badges/BadgesSidebar.tsx b/src/components/User/Badges/BadgesSidebar.tsx index 0efa68e25..884670aa8 100644 --- a/src/components/User/Badges/BadgesSidebar.tsx +++ b/src/components/User/Badges/BadgesSidebar.tsx @@ -21,20 +21,13 @@ export default function BadgesSidebar({ isSidebarVisible, onClose, badges, badge const t = useFormatMessage() const { currentBadges, expiredBadges } = badges - const handleClose = (e: React.MouseEvent) => { - e.preventDefault() - e.stopPropagation() - setBadgeInDetail(null) - onClose() - } - return ( - + {!badgeInDetail && (
{t('page.profile.badges_sidebar.title')} - +
@@ -68,7 +61,7 @@ export default function BadgesSidebar({ isSidebarVisible, onClose, badges, badge {t('page.profile.badges_sidebar.detail_title')} - +
From f4deb127a64c8f8ffcfa1f530010e00bd658afa0 Mon Sep 17 00:00:00 2001 From: Andy Espagnolo Date: Thu, 19 Oct 2023 10:54:18 -0300 Subject: [PATCH 30/31] fix: merge issue --- gatsby-browser.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/gatsby-browser.js b/gatsby-browser.js index 33f3604a9..c5cd8aa2b 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -24,7 +24,7 @@ import IdentityModalContextProvider from './src/components/Context/IdentityModal 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, SNAPSHOT_STATUS_ENABLED, SSO_URL } from "./src/constants" +import { SEGMENT_KEY, 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" @@ -46,7 +46,7 @@ export const wrapPageElement = ({ element, props }) => { - {SNAPSHOT_STATUS_ENABLED && } + }> {element} From 046d3a7ac5150b25e12d2f81d3aca2014a58507a Mon Sep 17 00:00:00 2001 From: Andy Espagnolo Date: Thu, 19 Oct 2023 11:10:12 -0300 Subject: [PATCH 31/31] fix: style fixes --- src/components/Debug/SnapshotStatus.css | 2 +- src/components/Search/FilterMenu.css | 2 +- src/components/User/Badges/BadgeCard.css | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Debug/SnapshotStatus.css b/src/components/Debug/SnapshotStatus.css index 8240cf8a0..de3816056 100644 --- a/src/components/Debug/SnapshotStatus.css +++ b/src/components/Debug/SnapshotStatus.css @@ -6,7 +6,7 @@ justify-content: center; align-items: center; overflow: hidden; - z-index: 21; + z-index: 10; position: relative; transition: all 0.75s ease 0s; padding-left: 26px; diff --git a/src/components/Search/FilterMenu.css b/src/components/Search/FilterMenu.css index 6bc0ce220..f62c2ab04 100644 --- a/src/components/Search/FilterMenu.css +++ b/src/components/Search/FilterMenu.css @@ -24,7 +24,7 @@ top: 0; right: 0; z-index: 11; - height: 100vh; + height: 100%; width: 293px; overflow-y: scroll; overscroll-behavior: none; diff --git a/src/components/User/Badges/BadgeCard.css b/src/components/User/Badges/BadgeCard.css index 05a2b973b..216e369db 100644 --- a/src/components/User/Badges/BadgeCard.css +++ b/src/components/User/Badges/BadgeCard.css @@ -50,7 +50,7 @@ } @media (min-width: 768px) { - .BadgeCard { + .BadgeCard__Title { max-width: 160px; } }