feat: remove collapsible filter + style tweaks

decentraland · Oct 11, 2023 · 58ea2f8 · 58ea2f8
1 parent 61ddb01
commit 58ea2f8
Show file tree

Hide file tree

Showing 13 changed files with 89 additions and 149 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 (
-    <CollapsibleFilter title={t('navigation.search.category_filter_title')} startOpen={startOpen}>
+    <FilterContainer title={t('navigation.search.category_filter_title')}>
       {showAllFilter && (
         <CategoryOption
           type="all_proposals"
@@ -74,6 +73,6 @@ export default function CategoryFilter({
           />
         )
       })}
-    </CollapsibleFilter>
+    </FilterContainer>
   )
 }
diff --git a/src/components/Search/CollapsibleFilter.css b/src/components/Search/CollapsibleFilter.css
diff --git a/src/components/Search/CollapsibleFilter.tsx b/src/components/Search/CollapsibleFilter.tsx
diff --git a/src/components/Search/FilterContainer.css 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
@@ -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 (
+    <div className="FilterContainer">
+      <div className="FilterContainer__TitleContainer">
+        <Text className="FilterContainer__Title" size="sm" weight="semi-bold" color="secondary">
+          {title}
+        </Text>
+      </div>
+      <div className="FilterContainer__Content">{children}</div>
+    </div>
+  )
+}
diff --git 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
@@ -10,22 +10,22 @@ 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])
   const status = params.get(FILTER_KEY)
   const isGrantFilter = isEqual(statusType, ProjectStatus)
 
   return (
-    <CollapsibleFilter title={t('navigation.search.status_filter_title')} startOpen={startOpen}>
+    <FilterContainer title={t('navigation.search.status_filter_title')}>
       <FilterLabel label={t(`status.all`)} href={getUrlFilters(FILTER_KEY, params)} active={!status} />
       {Object.values(statusType).map((value, index) => {
         const label = toSnakeCase(value)
@@ -40,6 +40,6 @@ export default function StatusFilter({ startOpen, statusType }: FilterProps & {
           )
         }
       })}
-    </CollapsibleFilter>
+    </FilterContainer>
   )
 }
diff --git 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 (
-    <CollapsibleFilter title={t('navigation.search.timeframe_filter.title') || ''}>
+    <FilterContainer title={t('navigation.search.timeframe_filter.title') || ''}>
       <FilterLabel
         label={t('navigation.search.timeframe_filter.all') || ''}
         href={handleTimeFrameFilter(null)}
@@ -41,6 +41,6 @@ export default function TimeFrameFilter() {
         href={handleTimeFrameFilter('3months')}
         active={timeFrame === '3months'}
       />
-    </CollapsibleFilter>
+    </FilterContainer>
   )
 }
diff --git 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
@@ -171,21 +171,21 @@ export default function ProposalsPage() {
                   </>
                 }
               >
-                <div className="ProposalsPage__List">
-                  <Loader active={!proposals || isLoadingProposals} />
-                  {type && !searching && <CategoryBanner type={type} />}
-                  {proposals && proposals.data.length === 0 && (
-                    <Empty
-                      className="ProposalsPage__Empty"
-                      description={
-                        searching || status || timeFrame?.length > 0
-                          ? t('navigation.search.no_matches')
-                          : t('page.proposal_list.no_proposals_yet')
-                      }
-                    />
-                  )}
-                  {proposals &&
-                    proposals.data.map((proposal) => {
+                <Loader active={!proposals || isLoadingProposals} />
+                {type && !searching && <CategoryBanner type={type} />}
+                {proposals && proposals.data.length === 0 && (
+                  <Empty
+                    className="ProposalsPage__Empty"
+                    description={
+                      searching || status || timeFrame?.length > 0
+                        ? t('navigation.search.no_matches')
+                        : t('page.proposal_list.no_proposals_yet')
+                    }
+                  />
+                )}
+                {proposals && (
+                  <div className="ProposalsPage__List">
+                    {proposals.data.map((proposal) => {
                       return isTabletAndBelow ? (
                         <ProposalItem
                           key={proposal.id}
@@ -205,7 +205,8 @@ export default function ProposalsPage() {
                         />
                       )
                     })}
-                </div>
+                  </div>
+                )}
                 {proposals && proposals.total > ITEMS_PER_PAGE && (
                   <Pagination
                     onPageChange={(e, { activePage }) => handlePageFilter(activePage as number)}