fix: Add voted choice (#1324)

* added voted choice * fix: vote module alignment
decentraland · Oct 9, 2023 · dc07359 · dc07359
1 parent 482038d
commit dc07359
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 15 deletions.
diff --git a/src/components/Common/ProposalPreviewCard/ProposalPreviewCard.css b/src/components/Common/ProposalPreviewCard/ProposalPreviewCard.css
@@ -62,11 +62,9 @@
 }
 
 .ProposalPreviewCard__Details {
-  display: flex;
-  flex-direction: row;
+  display: block;
   color: var(--black-600);
   text-transform: uppercase;
-  align-items: center;
   font-weight: var(--weight-semi-bold);
   font-size: 11px;
   line-height: 26px;
@@ -78,20 +76,24 @@
 .ProposalPreviewCard__DetailsItem:after {
   content: '·';
   padding: 0 5px;
+  color: var(--black-600);
 }
 
 .ProposalPreviewCard__DetailsItem:last-child:after {
   content: '';
   padding: 0;
 }
 
+.ProposalPreviewCard__DetailsItem--highlight {
+  color: var(--red-800);
+}
+
 .ProposalPreviewCard__Pill {
   margin-right: 5px;
 }
 
 .ProposalPreviewCard__UsernameContainer {
-  display: flex;
-  flex-direction: row;
+  display: inline;
 }
 
 .ProposalPreviewCard__Username {

diff --git a/src/components/Common/ProposalPreviewCard/ProposalPreviewCard.tsx b/src/components/Common/ProposalPreviewCard/ProposalPreviewCard.tsx
@@ -7,6 +7,7 @@ import { ProposalAttributes } from '../../../entities/Proposal/types'
 import { Vote } from '../../../entities/Votes/types'
 import useFormatMessage from '../../../hooks/useFormatMessage'
 import useProposalComments from '../../../hooks/useProposalComments'
+import useWinningChoice from '../../../hooks/useWinningChoice'
 import Time from '../../../utils/date/Time'
 import locations from '../../../utils/locations'
 import CategoryPill from '../../Category/CategoryPill'
@@ -35,11 +36,16 @@ const ProposalPreviewCard = ({ proposal, votes, variant }: Props) => {
   const t = useFormatMessage()
   const { title, user, finish_at } = proposal
   const { comments } = useProposalComments(proposal.id)
-  const dateText = t(`page.home.open_proposals.${Time().isBefore(Time(finish_at)) ? 'ends_date' : 'ended_date'}`, {
+  const { userChoice } = useWinningChoice(proposal)
+  const isProposalActive = Time().isBefore(Time(finish_at))
+  const dateText = t(`page.home.open_proposals.${isProposalActive ? 'ends_date' : 'ended_date'}`, {
     value: Time(finish_at).fromNow(),
   })
   const [isHovered, setisHovered] = useState(false)
 
+  const isProposalAboutToEnd = isProposalActive && Time(finish_at).diff(Time(), 'hours') < 24
+  const showVotedChoice = variant !== Variant.Vote && !!userChoice
+
   return (
     <Link
       className={classNames('ProposalPreviewCard', `ProposalPreviewCard--${variant}`)}
@@ -57,10 +63,12 @@ const ProposalPreviewCard = ({ proposal, votes, variant }: Props) => {
             <TabletAndBelow>
               <CategoryPill className="ProposalPreviewCard__Pill" proposalType={proposal.type} size="sm" />
             </TabletAndBelow>
-            <span className="ProposalPreviewCard__DetailsItem ProposalPreviewCard__UsernameContainer">
-              {t('page.home.open_proposals.by_user')}
-              <Username className="ProposalPreviewCard__Username" address={user} variant="address" />
-            </span>
+            {!showVotedChoice && (
+              <span className="ProposalPreviewCard__DetailsItem ProposalPreviewCard__UsernameContainer">
+                {t('page.home.open_proposals.by_user')}
+                <Username className="ProposalPreviewCard__Username" address={user} variant="address" />
+              </span>
+            )}
             <Desktop>
               <span className="ProposalPreviewCard__DetailsItem">
                 {t('page.home.open_proposals.votes', { total: Object.keys(votes || {}).length })}
@@ -69,7 +77,20 @@ const ProposalPreviewCard = ({ proposal, votes, variant }: Props) => {
                 {t('page.home.open_proposals.comments', { total: comments?.totalComments || 0 })}
               </span>
             </Desktop>
-            <span className="ProposalPreviewCard__DetailsItem">{dateText}</span>
+            <span
+              className={classNames(
+                'ProposalPreviewCard__DetailsItem',
+                isProposalAboutToEnd && 'ProposalPreviewCard__DetailsItem--highlight'
+              )}
+            >
+              {dateText}
+            </span>
+            {showVotedChoice && (
+              <span className="ProposalPreviewCard__DetailsItem">
+                {t('page.proposal_detail.your_vote_label')}
+                <strong>{userChoice}</strong>
+              </span>
+            )}
           </span>
         </div>
       </ProposalPreviewCardSection>

diff --git a/src/components/Common/ProposalPreviewCard/VoteModule.css b/src/components/Common/ProposalPreviewCard/VoteModule.css
@@ -1,11 +1,12 @@
 .ProposalPreviewCard__Section.VoteModule {
   display: none;
+  min-width: 450px;
 }
 
 @media (min-width: 992px) {
   .ProposalPreviewCard__Section.VoteModule {
     display: flex;
-    justify-content: flex-end;
+    justify-content: space-between;
   }
 }
 
@@ -28,6 +29,10 @@
   white-space: nowrap;
 }
 
+.VoteModule__VotingContainer {
+  min-width: 155px;
+}
+
 .VoteModule__VotingVpNeeded {
   color: var(--black-800) !important;
 }
@@ -40,6 +45,8 @@
   display: flex;
   align-items: center;
   text-transform: uppercase;
+  justify-content: flex-end;
+  min-width: 59px;
 }
 
 .VoteModule__VoteText {

diff --git a/src/components/Common/ProposalPreviewCard/VoteModule.tsx b/src/components/Common/ProposalPreviewCard/VoteModule.tsx
@@ -45,7 +45,7 @@ function VoteModule({ proposal, votes }: Props) {
         <CategoryPill proposalType={proposal.type} />
       </div>
       <div className="VoteModule__VoteSection">
-        <div className={`VoteModule__VotingContainer${hasVote ? '--Voted' : ''}`}>
+        <div className="VoteModule__VotingContainer">
           {hasVote ? (
             <>
               <Text weight="semi-bold" size="xs" className="VoteModule__VotingConsensus">

diff --git a/src/components/Common/Username.css b/src/components/Common/Username.css
@@ -1,6 +1,5 @@
 .Username {
-  display: flex;
-  align-items: center;
+  display: inline;
 }
 
 .Username .dcl.blockie {