diff --git a/src/pages/proposal.css b/src/pages/proposal.css index 38de0e847..d43062ed9 100644 --- a/src/pages/proposal.css +++ b/src/pages/proposal.css @@ -2,7 +2,6 @@ display: flex !important; flex-direction: column; flex-wrap: wrap; - --proposal-sidebar-width: 284px; } .ProposalDetailPage__Description { @@ -12,7 +11,7 @@ .ProposalDetail__Left { display: flex; - width: 284px; + width: var(--dao-sidebar-width); flex-direction: column; justify-content: flex-start; padding-right: 1em; @@ -25,18 +24,18 @@ .ProposalDetailPage__Description { flex: 1; - max-width: calc(100% - var(--proposal-sidebar-width)); + max-width: calc(100% - var(--dao-sidebar-width)); padding-right: 2rem; } .ProposalDetailActions { - width: 284px; + width: var(--dao-sidebar-width); } } @media (min-width: 1200px) { .ProposalDetailPage__Description { - max-width: calc(100% - 2 * var(--proposal-sidebar-width)); + max-width: calc(100% - 2 * var(--dao-sidebar-width)); } } diff --git a/src/pages/proposals.css b/src/pages/proposals.css index cb80221f8..f00c81f23 100644 --- a/src/pages/proposals.css +++ b/src/pages/proposals.css @@ -1,61 +1,57 @@ -.ui.pagination.menu { - justify-content: flex-end; +.ProposalsPage__Container .ui.pagination.menu { width: 100%; + justify-content: center !important; } -.SubmitButton { +.ProposalsPage__SubmitButton { display: none !important; } -.Animated { - width: 100%; - transition: all 0.5s ease 0s; -} - -.ui.pagination.menu { - justify-content: center !important; +.ProposalsPage__Empty { + margin-top: 60px; } -.ProposalsTable__Empty { - margin-top: 60px; +.ProposalsPage__Sidebar { + max-width: var(--dao-sidebar-width); + width: 100%; } -.column.Proposals__FiltersColumn { - width: 21.87% !important; - max-width: 300px !important; +.ProposalsPage__Content { + width: 100%; } -.column.ProposalsTable { - width: 100% !important; +.ProposalsPage__List { + margin-bottom: 16px; } -/* Only Mobile */ @media only screen and (max-width: 767px) { - .ui.pagination.menu .item + .item { + .ProposalsPage__Container .ui.pagination.menu .item + .item { margin-left: 5px; } - .ui.pagination.menu .item[type='nextItem'], - .ui.pagination.menu .item[type='prevItem'] { + .ProposalsPage__Container .ui.pagination.menu .item[type='nextItem'], + .ProposalsPage__Container .ui.pagination.menu .item[type='prevItem'] { display: none !important; } - .ui.container > .ui.stackable.grid > .row > .column { - padding-bottom: 0 !important; - } - - .ActionableLayout { + .ProposalsPage__Container .ActionableLayout { min-height: 300px; } } -/* Desktop Only */ @media only screen and (min-width: 768px) { - .SubmitButton { + .ProposalsPage__SubmitButton { display: inline !important; } +} - .column.ProposalsTable { - width: 78.13% !important; - } +.ProposalsPage__Container { + display: flex; + flex-direction: row; + gap: 32px; +} + +.Animated { + width: 100%; + transition: all 0.5s ease 0s; } diff --git a/src/pages/proposals.tsx b/src/pages/proposals.tsx index 9e0659966..4b0473da4 100644 --- a/src/pages/proposals.tsx +++ b/src/pages/proposals.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect } from 'react' +import { useCallback, useEffect } from 'react' import { useLocation } from '@reach/router' import Head from 'decentraland-gatsby/dist/components/Head/Head' @@ -12,7 +12,6 @@ import { useTabletAndBelowMediaQuery, } from 'decentraland-ui/dist/components/Media/Media' import { Pagination } from 'decentraland-ui/dist/components/Pagination/Pagination' -import Grid from 'semantic-ui-react/dist/commonjs/collections/Grid/Grid' import RandomBanner from '../components/Banner/RandomBanner' import CategoryBanner from '../components/Category/CategoryBanner' @@ -149,43 +148,49 @@ export default function ProposalsPage() { {!isMobile && search && proposals && } - - - - -
- - - -
-
-
- - - {isMobile && proposals && } - - {!proposals && ''} - {proposals && t('general.count_proposals', { count: proposals.total || 0 })} - - } - rightAction={ - !searching && ( - <> - {proposals && } - - - ) - } - > +
+ +
+
+ + + +
+
+
+ +
+ {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') @@ -216,20 +221,20 @@ export default function ProposalsPage() { /> ) })} - {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 && 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/theme.css b/src/theme.css index 93ed1ba57..0cb771688 100644 --- a/src/theme.css +++ b/src/theme.css @@ -78,6 +78,7 @@ --dao-footer-height: 156px; --dao-header-height: 64px; --dao-navigation-height: 89px; + --dao-sidebar-width: 284px; /* Font Weights */ --weight-light: 300;