feat: add recent past votes to vote page (#168)

* add recent past votes to votes page Signed-off-by: ryanwolhuter <[email protected]> * fix dom nesting error Signed-off-by: ryanwolhuter <[email protected]> * add display property to icon wrapper Signed-off-by: ryanwolhuter <[email protected]> Signed-off-by: ryanwolhuter <[email protected]>
UMAprotocol · Jan 16, 2023 · 3de82d4 · 3de82d4 · vercel · Jan 16, 2023
1 parent bd38805
commit 3de82d4
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 5 deletions.
diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx
@@ -292,7 +292,7 @@ const NotificationIconWrapper = styled.div`
   }
 `;
 
-const Dot = styled.div`
+const Dot = styled.span`
   height: 8px;
   width: 8px;
   background-color: ${green};

diff --git a/components/IconWrapper/IconWrapper.tsx b/components/IconWrapper/IconWrapper.tsx
@@ -1,13 +1,16 @@
 import { ReactNode } from "react";
+import { CSSProperties } from "styled-components";
 
 export function IconWrapper({
   width = 15,
   height = 15,
+  display = "block",
   children,
 }: {
   width?: number;
   height?: number;
+  display?: CSSProperties["display"];
   children: ReactNode;
 }) {
-  return <div style={{ width, height }}>{children}</div>;
+  return <span style={{ width, height, display }}>{children}</span>;
 }
diff --git a/components/Votes/Votes.tsx b/components/Votes/Votes.tsx
@@ -336,7 +336,7 @@ export function Votes() {
         />
       </VotesTableWrapper>
       {getActivityStatus() === "active" ? (
-        <CommitVotesButtonWrapper>
+        <ButtonWrapper>
           {isDirty() ? (
             <>
               <Button
@@ -378,7 +378,7 @@ export function Votes() {
               </InfoText>
             </Tooltip>
           ) : null}
-        </CommitVotesButtonWrapper>
+        </ButtonWrapper>
       ) : null}
       {determineVotesToShow().length > defaultResultsPerPage && (
         <PaginationWrapper>
@@ -388,6 +388,34 @@ export function Votes() {
           />
         </PaginationWrapper>
       )}
+      {getPastVotes().length > 0 && getActivityStatus() !== "past" && (
+        <>
+          <Divider />
+          <Title>Recent past votes:</Title>
+          <VotesTableWrapper>
+            <VotesList
+              headings={<VotesTableHeadings activityStatus="past" />}
+              rows={getPastVotes()
+                .slice(0, 3)
+                .map((vote) => (
+                  <VotesListItem
+                    vote={vote}
+                    phase={phase}
+                    selectedVote={undefined}
+                    selectVote={() => null}
+                    activityStatus="past"
+                    moreDetailsAction={() => openPanel("vote", vote)}
+                    key={vote.uniqueKey}
+                    isFetching={getUserDependentIsFetching()}
+                  />
+                ))}
+            />
+          </VotesTableWrapper>
+          <ButtonWrapper>
+            <Button label="See all" href="/past-votes" variant="primary" />
+          </ButtonWrapper>
+        </>
+      )}
     </>
   );
 }
@@ -401,7 +429,7 @@ const Title = styled.h1`
   margin-bottom: 20px;
 `;
 
-const CommitVotesButtonWrapper = styled.div`
+const ButtonWrapper = styled.div`
   display: flex;
   flex-direction: column;
   align-items: end;
@@ -434,3 +462,10 @@ const PaginationWrapper = styled.div`
 const ButtonSpacer = styled.div`
   width: 10px;
 `;
+
+const Divider = styled.div`
+  height: 1px;
+  margin-top: 45px;
+  margin-bottom: 45px;
+  background: var(--black-opacity-25);
+`;