fix: vote position and styles in proposal preview card (#1366)

* fix: vote position and styles in proposal preview card * refactor: use classnames
decentraland · Oct 26, 2023 · 06906e7 · 06906e7
1 parent 3768788
commit 06906e7
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 6 deletions.
diff --git a/src/components/Common/ProposalPreviewCard/ProposalPreviewCard.css b/src/components/Common/ProposalPreviewCard/ProposalPreviewCard.css
@@ -72,6 +72,11 @@
   white-space: initial;
 }
 
+.ProposalPreviewCard__DetailsItem {
+  display: inline-flex;
+  white-space: nowrap;
+}
+
 .ProposalPreviewCard__DetailsItem:after {
   content: '·';
   padding: 0 5px;
@@ -100,3 +105,15 @@
   color: var(--black-800) !important;
   margin-left: 2px !important;
 }
+
+.ProposalPreviewCard__DetailsItemVotedChoice {
+  max-width: 175px;
+}
+
+.ProposalPreviewCard__Vote {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  margin-left: 2px;
+  color: var(--black-800);
+}
diff --git a/src/components/Common/ProposalPreviewCard/ProposalPreviewCard.tsx b/src/components/Common/ProposalPreviewCard/ProposalPreviewCard.tsx
@@ -69,6 +69,18 @@ const ProposalPreviewCard = ({ proposal, votes, variant }: Props) => {
                 <Username className="ProposalPreviewCard__Username" address={user} variant="address" />
               </span>
             )}
+            {showVotedChoice && (
+              <span
+                title={userChoice.toUpperCase()}
+                className={classNames(
+                  'ProposalPreviewCard__DetailsItem',
+                  'ProposalPreviewCard__DetailsItemVotedChoice'
+                )}
+              >
+                {t('page.proposal_detail.your_vote_label')}
+                <span className="ProposalPreviewCard__Vote">{userChoice}</span>
+              </span>
+            )}
             <Desktop>
               <span className="ProposalPreviewCard__DetailsItem">
                 {t('page.home.open_proposals.votes', { total: Object.keys(votes || {}).length })}
@@ -85,12 +97,6 @@ const ProposalPreviewCard = ({ proposal, votes, variant }: Props) => {
             >
               {dateText}
             </span>
-            {showVotedChoice && (
-              <span className="ProposalPreviewCard__DetailsItem">
-                {t('page.proposal_detail.your_vote_label')}
-                <strong>{userChoice}</strong>
-              </span>
-            )}
           </span>
         </div>
       </ProposalPreviewCardSection>