Merge pull request #1477 from kleros/feat(web)/improve-voting-history-accordion-or-cards

feat(web): improve votinghistory styling, show cards instead of accordions

Author: alcercu

web/src/pages/Cases/CaseDetails/Voting/PendingVotesBox.tsx

@@ -5,9 +5,10 @@ import BalanceIcon from "svgs/icons/law-balance.svg";
 
 const StyledBox = styled(Box)`
   width: 100%;
+  background-color: ${({ theme }) => theme.lightBlue};
   height: auto;
   border-radius: 3px;
-  padding: 8px 16px;
+  padding: 16px;
   display: flex;
   gap: 8px;
   align-items: center;

web/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx

@@ -42,7 +42,7 @@ const VoteStatus: React.FC<{
   isActiveRound: boolean;
 }> = ({ choice, period, answers, isActiveRound }) => {
   if (isUndefined(choice) && (isActiveRound ? ["appeal", "execution"].includes(period) : true))
-    return <StyledLabel>Didn't cast a vote</StyledLabel>;
+    return <StyledLabel>Did not vote</StyledLabel>;
   return (
     <StyledLabel>
       {isUndefined(choice) ? "Pending Vote" : <StyledSmall>{getVoteChoice(parseInt(choice), answers)}</StyledSmall>}

web/src/pages/Cases/CaseDetails/Voting/VotesDetails/index.tsx

@@ -1,5 +1,5 @@
-import { CustomAccordion } from "@kleros/ui-components-library";
-import React from "react";
+import { Card, CustomAccordion } from "@kleros/ui-components-library";
+import React, { useMemo } from "react";
 import styled from "styled-components";
 import { Answer } from "context/NewDisputeContext";
 import { DrawnJuror } from "utils/getDrawnJurorsWithCount";
@@ -9,6 +9,12 @@ import { responsiveSize } from "styles/responsiveSize";
 import { getVoteChoice } from "utils/getVoteChoice";
 import { isUndefined } from "utils/index";
 
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-top: 8px;
+`;
+
 const StyledAccordion = styled(CustomAccordion)`
   width: 100%;
   > * > button {
@@ -22,10 +28,17 @@ const StyledAccordion = styled(CustomAccordion)`
   }
   //adds padding to body container
   > * > div > div {
-    padding: ${responsiveSize(8, 24)} ${responsiveSize(8, 16)};
+    padding: ${responsiveSize(16, 24)} ${responsiveSize(8, 16)};
   }
 `;
 
+const StyledCard = styled(Card)`
+  width: 100%;
+  height: auto;
+  padding: 11.5px ${responsiveSize(8, 18)};
+  margin: 8px 0;
+`;
+
 const AccordionContentContainer = styled.div`
   display: flex;
   flex-direction: column;
@@ -72,42 +85,67 @@ const AccordionContent: React.FC<{
   </AccordionContentContainer>
 );
 
-interface VotesAccordion {
+interface IVotesAccordion {
   drawnJurors: DrawnJuror[];
   period: string;
   answers: Answer[];
   isActiveRound: boolean;
 }
 
-const VotesAccordion: React.FC<VotesAccordion> = ({ drawnJurors, period, answers, isActiveRound }) => {
-  return drawnJurors.length ? (
-    <StyledAccordion
-      items={
-        drawnJurors?.map((drawnJuror) => ({
-          title: (
-            <AccordionTitle
-              juror={drawnJuror.juror.id}
-              voteCount={drawnJuror.voteCount}
-              choice={drawnJuror.vote?.justification?.choice}
-              period={period}
-              answers={answers}
-              isActiveRound={isActiveRound}
-            />
-          ),
-          body: drawnJuror.vote?.justification?.choice ? (
-            <AccordionContent
-              justification={drawnJuror?.vote?.justification.reference ?? ""}
-              choice={drawnJuror.vote?.justification?.choice}
-              answers={answers}
-            />
-          ) : null,
-        })) ?? []
-      }
-    />
-  ) : (
+const VotesAccordion: React.FC<IVotesAccordion> = ({ drawnJurors, period, answers, isActiveRound }) => {
+  const accordionItems = useMemo(() => {
+    return drawnJurors
+      .map((drawnJuror) =>
+        !isUndefined(drawnJuror.vote?.justification?.choice)
+          ? {
+              title: (
+                <AccordionTitle
+                  juror={drawnJuror.juror.id}
+                  voteCount={drawnJuror.voteCount}
+                  choice={drawnJuror.vote?.justification?.choice}
+                  period={period}
+                  answers={answers}
+                  isActiveRound={isActiveRound}
+                />
+              ),
+              body: (
+                <AccordionContent
+                  justification={drawnJuror?.vote?.justification.reference ?? ""}
+                  choice={drawnJuror.vote?.justification?.choice}
+                  answers={answers}
+                />
+              ),
+            }
+          : null
+      )
+      .filter((item) => item !== null);
+  }, [drawnJurors, period, answers, isActiveRound]);
+
+  return (
     <>
-      <br />
-      <InfoCard msg="Jurors have not been drawn yet." />
+      {drawnJurors.length === 0 ? (
+        <>
+          <br />
+          <InfoCard msg="Jurors have not been drawn yet." />
+        </>
+      ) : null}
+      <Container>
+        {accordionItems.length > 0 ? <StyledAccordion items={accordionItems} /> : null}
+        {drawnJurors.map(
+          (drawnJuror) =>
+            isUndefined(drawnJuror.vote?.justification?.choice) && (
+              <StyledCard key={drawnJuror.juror.id}>
+                <AccordionTitle
+                  juror={drawnJuror.juror.id}
+                  voteCount={drawnJuror.voteCount}
+                  period={period}
+                  answers={answers}
+                  isActiveRound={isActiveRound}
+                />
+              </StyledCard>
+            )
+        )}
+      </Container>
     </>
   );
 };

web/src/pages/Cases/CaseDetails/Voting/index.tsx

@@ -21,6 +21,7 @@ import { useVotingContext } from "hooks/useVotingContext";
 
 const Container = styled.div`
   padding: ${responsiveSize(16, 32)};
+  padding-bottom: ${responsiveSize(8, 16)};
 `;
 
 const useFinalDate = (lastPeriodChange: string, currentPeriodIndex?: number, timesPerPeriod?: string[]) =>