fix: project lists containers size (#1340)

decentraland · Oct 17, 2023 · a1ae920 · a1ae920
1 parent 738aa4d
commit a1ae920
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 58 deletions.
diff --git a/src/components/Home/ActiveCommunityGrants.css b/src/components/Home/ActiveCommunityGrants.css
@@ -17,23 +17,18 @@
   flex-wrap: wrap;
   margin-bottom: 24px;
   margin-top: 15px;
-  display: grid !important;
+  display: grid;
   grid-template-columns: 100%;
   grid-row-gap: 16px;
 }
 
 @media (min-width: 992px) {
   .ActiveCommunityGrants__Container {
-    grid-template-columns: 48.49% 48.49% !important;
-    grid-column-gap: 31px;
+    grid-template-columns: repeat(2, 1fr);
+    grid-column-gap: 32px;
   }
 }
 
-.ui.container.CurrentProjects__Container {
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-}
-
 @media (min-width: 425px) {
   .HoverableCardContainer {
     height: 188px;

diff --git a/src/components/Projects/Current/CurrentProjectsList.css b/src/components/Projects/Current/CurrentProjectsList.css
@@ -2,16 +2,17 @@
   display: flex;
   flex-direction: column;
   gap: 22px;
+  width: 100%;
 }
 
-.CurrentProjects__TitleContainer {
+.CurrentProjectsList__TitleContainer {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: 6px;
 }
 
-.CurrentProjects__Title {
+.CurrentProjectsList__Title {
   font-style: normal;
   font-weight: var(--weight-semi-bold);
   font-size: 13px;
@@ -21,44 +22,29 @@
   margin-bottom: 13px;
 }
 
-.CurrentProjects__Filters {
+.CurrentProjectsList__Filters {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }
 
 @media (min-width: 768px) {
-  .CurrentProjects__Filters {
+  .CurrentProjectsList__Filters {
     flex-direction: row;
     align-items: center;
   }
-
-  .CurrentProjects__Empty {
-    margin-top: 185px;
-  }
 }
 
-.CurrentProjects__Container {
+.CurrentProjectsList__Container {
   display: grid;
   grid-gap: 14px;
   flex-wrap: wrap;
 }
 
 @media (min-width: 992px) {
-  .CurrentProjects__Container {
+  .CurrentProjectsList__Container {
     grid-template-columns: repeat(2, 1fr);
     grid-template-rows: subgrid;
     grid-gap: 22px;
   }
 }
-
-.ui.container.CurrentProjects__Container {
-  width: 100% !important;
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-}
-
-.CurrentProjectsList__Wrapper {
-  display: flex;
-  width: 100%;
-}
diff --git a/src/components/Projects/Current/CurrentProjectsList.tsx b/src/components/Projects/Current/CurrentProjectsList.tsx
@@ -88,16 +88,16 @@ export default function CurrentProjectsList({ projects, selectedSubtype, selecte
 
   return (
     <div className="CurrentProjectsList">
-      <div className="CurrentProjects__TitleContainer">
+      <div className="CurrentProjectsList__TitleContainer">
         <div>
-          <h2 className="CurrentProjects__Title">
+          <h2 className="CurrentProjectsList__Title">
             {t('page.grants.projects_category_title', {
               status: status ? `${t(GRANTS_STATUS_KEYS[status])} ` : '',
               category: t(getCategoryKey(selectedSubtype || selectedType)),
             })}
           </h2>
         </div>
-        <div className="CurrentProjects__Filters">
+        <div className="CurrentProjectsList__Filters">
           <CurrentProjectsSortingMenu sortingKey={sortingKey} onSortingKeyChange={setSortingKey} />
         </div>
       </div>
@@ -114,19 +114,21 @@ export default function CurrentProjectsList({ projects, selectedSubtype, selecte
       )}
       {isEmpty(projects) && (
         <Empty
-          className="CurrentProjects__Empty"
+          className="CurrentProjectsList__Empty"
           icon={<Watermelon />}
           description={t('page.grants.empty.description')}
           onLinkClick={() => navigate(locations.projects())}
           linkText={t('page.grants.empty.button')}
           actionType={ActionType.BUTTON}
         />
       )}
-      <div className="CurrentProjects__Container">
-        {filteredCurrentGrants?.map((project) => (
-          <ProjectCard key={`CurrentProjectCard_${project.id}`} project={project} />
-        ))}
-      </div>
+      {filteredCurrentGrants && filteredCurrentGrants.length > 0 && (
+        <div className="CurrentProjectsList__Container">
+          {filteredCurrentGrants.map((project) => (
+            <ProjectCard key={`CurrentProjectCard_${project.id}`} project={project} />
+          ))}
+        </div>
+      )}
       {showLoadMoreCurrentGrantsButton && (
         <FullWidthButton onClick={handleLoadMoreCurrentGrantsClick}>
           {t('page.grants.load_more_button')}

diff --git a/src/components/Projects/ProjectCard/ProjectCard.css b/src/components/Projects/ProjectCard/ProjectCard.css
@@ -13,12 +13,12 @@
   min-width: 0;
 }
 
-.CurrentProjects__Container .ProjectCard i.icon.chevron.right:before {
+.CurrentProjectsList__Container .ProjectCard i.icon.chevron.right:before {
   top: -5px;
   position: relative;
 }
 
-.CurrentProjects__Container .ProjectCard:hover {
+.CurrentProjectsList__Container .ProjectCard:hover {
   box-shadow: var(--shadow-2);
   transform: translateY(-4px);
   cursor: pointer;
@@ -44,14 +44,6 @@
   width: 100%;
 }
 
-.ui.header.ProjectCard__Title {
-  min-height: 52px;
-  margin-top: 5px;
-  line-height: 28px;
-  letter-spacing: 0.3px;
-  font-size: 20px;
-}
-
 .ProjectCard .ProposalUpdate {
   border: none;
   border-top: 1px solid var(--black-100);

diff --git a/src/pages/projects.tsx b/src/pages/projects.tsx
@@ -132,16 +132,14 @@ export default function ProjectsPage() {
                   <RequestBanner />
                 </NotMobile>
               </div>
-              <div>
-                {displayableProjects && (
-                  <CurrentProjectsList
-                    projects={displayableProjects}
-                    selectedType={type}
-                    selectedSubtype={subtype}
-                    status={toProjectStatus(status)}
-                  />
-                )}
-              </div>
+              {displayableProjects && (
+                <CurrentProjectsList
+                  projects={displayableProjects}
+                  selectedType={type}
+                  selectedSubtype={subtype}
+                  status={toProjectStatus(status)}
+                />
+              )}
             </div>
           </WiderContainer>
         </BurgerMenuLayout>