feat: Wide profile page (#1286)

* fix: vote pagination bug * wide profile page
decentraland · Sep 25, 2023 · 988845a · 988845a
1 parent 2940284
commit 988845a
Show file tree

Hide file tree

Showing 12 changed files with 27 additions and 13 deletions.
diff --git a/src/back/routes/votes.ts b/src/back/routes/votes.ts
@@ -76,8 +76,11 @@ export async function getCachedVotes(req: Request) {
 
 async function getAddressVotesWithProposals(req: Request) {
   const address = validateAddress(req.params.address)
-  const first = Number(req.query.first) || undefined
-  const skip = Number(req.query.skip) || undefined
+  const numFirst = Number(req.query.first)
+  const numSkip = Number(req.query.skip)
+
+  const first = Number.isInteger(numFirst) ? numFirst : undefined
+  const skip = Number.isInteger(numSkip) ? numSkip : undefined
 
   const votes = await SnapshotService.getAddressesVotes([address], first, skip)
 

diff --git a/src/components/Common/BoxTabs.css b/src/components/Common/BoxTabs.css
@@ -1,3 +1,7 @@
+.BoxTabs .dcl.tabs .ui.container {
+  width: 100%;
+}
+
 .BoxTabs .dcl.tabs {
   display: flex !important;
   padding: 0 18px;

diff --git a/src/components/Home/OpenProposals.css b/src/components/Home/OpenProposals.css
@@ -9,10 +9,6 @@
   margin-bottom: 16px;
 }
 
-.OpenProposals__ProposalsContainer .dcl.tabs .ui.container {
-  width: 100%;
-}
-
 .OpenProposals__Loader,
 .OpenProposals__Empty {
   display: flex;

diff --git a/src/components/Profile/ActivityBox.tsx b/src/components/Profile/ActivityBox.tsx
@@ -36,7 +36,7 @@ const ActivityBox = ({ address }: Props) => {
   const { requestsStatus } = useProposalsByCoAuthor(isLoggedUserProfile ? account : null, CoauthorStatus.PENDING)
 
   return (
-    <Container>
+    <Container fluid>
       <BoxTabsContainer>
         <BoxTabs>
           <BoxTabs.Left>

diff --git a/src/components/Profile/GrantBeneficiaryBox.tsx b/src/components/Profile/GrantBeneficiaryBox.tsx
@@ -20,7 +20,7 @@ export default function GrantBeneficiaryBox({ address }: Props) {
   if (!hasGrants) return null
 
   return (
-    <Container className="GrantBeneficiaryBox">
+    <Container fluid className="GrantBeneficiaryBox">
       <ProfileBox title={t('page.profile.grants.title')} info={t('page.profile.grants.info')}>
         <GrantBeneficiaryList grants={grants} />
       </ProfileBox>

diff --git a/src/components/Profile/VotedProposalsBox.tsx b/src/components/Profile/VotedProposalsBox.tsx
@@ -25,7 +25,7 @@ function VotedProposalsBox({ address }: Props) {
   const { votes, isLoading, handleViewMore, hasMoreProposals } = useVotedProposals(address, PROPOSALS_PER_PAGE)
 
   return (
-    <Container>
+    <Container fluid>
       <ProfileBox title={t('page.profile.voted_proposals.title')}>
         {isLoading && <SkeletonBars amount={votes.length || 3} height={89} />}
         {!isLoading &&

diff --git a/src/components/Profile/VpDelegationBox.tsx b/src/components/Profile/VpDelegationBox.tsx
@@ -38,7 +38,7 @@ function VpDelegationBox({ address, delegation, isLoadingDelegation, ownVp, isLo
   const profileHasADelegation = delegatedTo.length > 0 && !!ownVp
 
   return (
-    <Container>
+    <Container fluid>
       <ProfileBox
         title={t('page.profile.delegation.title')}
         info={t('page.profile.delegation.helper')}

diff --git a/src/components/Profile/VpDelegatorsBox.tsx b/src/components/Profile/VpDelegatorsBox.tsx
@@ -40,7 +40,7 @@ export default function VpDelegatorsBox({
     !isLoggedUserProfile && !isLoadingUserVpDistribution && profileAddress && accountHasDelegations
 
   return (
-    <Container>
+    <Container fluid>
       <ProfileBox
         className="VpDelegatorsBox"
         title={t('page.profile.delegators.title')}

diff --git a/src/components/User/UserStats.css b/src/components/User/UserStats.css
@@ -66,6 +66,9 @@
   .UserStats__StatBoxes {
     display: flex;
     justify-content: space-between;
+  }
+
+  .UserStats__StatBoxes:not(:last-child) {
     margin-bottom: 44px;
   }
 

diff --git a/src/components/User/UserStats.tsx b/src/components/User/UserStats.tsx
@@ -38,7 +38,7 @@ export default function UserStats({ address, vpDistribution, isLoadingVpDistribu
   const { total } = vpDistribution || { total: 0 }
 
   return (
-    <Container className="UserStats__Container">
+    <Container fluid className="UserStats__Container">
       <div className="UserStats__UserInfo">
         <div className="UserStats__UsernameContainer">
           <Username address={address} size={isMobile ? 'small' : 'medium'} className="UserStats__Username" />

diff --git a/src/pages/profile.css b/src/pages/profile.css
@@ -1,7 +1,11 @@
 .ProfilePage__Container {
   display: flex;
   flex-direction: column;
+  width: 100%;
+  max-width: 1410px !important;
+  padding: 0px 1rem !important;
   gap: 24px;
+  margin: auto;
 }
 
 @media (min-width: 768px) {

diff --git a/src/pages/profile.tsx b/src/pages/profile.tsx
@@ -67,8 +67,12 @@ export default function ProfilePage() {
         image="https://decentraland.org/images/decentraland.png"
       />
       <Navigation activeTab={NavigationTab.Profile} />
-      <UserStats address={address} vpDistribution={vpDistribution} isLoadingVpDistribution={isLoadingVpDistribution} />
       <div className="ProfilePage__Container">
+        <UserStats
+          address={address}
+          vpDistribution={vpDistribution}
+          isLoadingVpDistribution={isLoadingVpDistribution}
+        />
         <GrantBeneficiaryBox address={address} />
         <ActivityBox address={address} />
         <VpDelegationBox