feat: build vote cards and stylings

Author: kemuru

web/src/components/DisputeView/PeriodBanner.tsx

@@ -58,13 +58,14 @@ const StyledLabel = styled.label<{ frontColor: string; withDot?: boolean; isCard
         `
       : null}
 `;
+
 export interface IPeriodBanner {
   id: number;
   period: Periods;
   isCard?: boolean;
 }
 
-const getPeriodColors = (period: Periods, theme: Theme): [string, string] => {
+export const getPeriodColors = (period: Periods, theme: Theme): [string, string] => {
   switch (period) {
     case Periods.appeal:
       return [theme.tint, theme.tintMedium];

web/src/pages/Profile/Stakes/CurrentStakes/index.tsx

@@ -19,29 +19,33 @@ const Container = styled.div`
 
 const NoCurrentStakesLabel = styled.label`
   font-size: ${responsiveSize(14, 16)};
-  margin-bottom: 12px;
 `;
 
 interface ICurrentStakes {
   totalStake: string;
   lockedStake: string;
   currentStakeData: JurorStakeDetailsQuery | undefined;
-  isLoading: boolean;
+  isCurrentStakeLoading: boolean;
 }
 
-const CurrentStakes: React.FC<ICurrentStakes> = ({ totalStake, lockedStake, currentStakeData, isLoading }) => {
+const CurrentStakes: React.FC<ICurrentStakes> = ({
+  totalStake,
+  lockedStake,
+  currentStakeData,
+  isCurrentStakeLoading,
+}) => {
   const stakedCourts = currentStakeData?.jurorTokensPerCourts?.filter(({ staked }) => staked > 0);
   const isStaked = stakedCourts && stakedCourts.length > 0;
 
   return (
     <Container>
       <Header {...{ totalStake, lockedStake }} />
-      {!isStaked && !isLoading ? (
+      {!isStaked && !isCurrentStakeLoading ? (
         <NoCurrentStakesLabel>No stakes found</NoCurrentStakesLabel>
-      ) : isLoading ? (
+      ) : isCurrentStakeLoading ? (
         <Skeleton />
       ) : null}
-      {isStaked && !isLoading ? (
+      {isStaked && !isCurrentStakeLoading ? (
         <CourtCardsContainer>
           {currentStakeData?.jurorTokensPerCourts
             ?.filter(({ staked }) => staked > 0)

web/src/pages/Profile/Stakes/StakingHistory.tsx

@@ -27,6 +27,10 @@ const StyledTitle = styled.h1`
   margin-bottom: 20px;
 `;
 
+const NoHistoryLabel = styled.label`
+  font-size: ${responsiveSize(14, 16)};
+`;
+
 interface IStakingHistory {
   searchParamAddress: `0x${string}`;
   totalNumberStakingEvents: number;
@@ -38,7 +42,6 @@ const StakingHistory: React.FC<IStakingHistory> = ({ searchParamAddress, totalNu
   const eventsPerPage = 10;
   const currentPage = parseInt(page ?? "1");
   const skip = (currentPage - 1) * eventsPerPage;
-
   const { data: stakingHistoryData, isLoading: isLoadingStakingHistory } = useStakingHistory(eventsPerPage, skip);
   const { data: courtTreeData, isLoading: isLoadingCourtTree } = useCourtTree();
   const stakingEvents = stakingHistoryData?.data?.userStakingEvents?.edges ?? [];
@@ -52,7 +55,9 @@ const StakingHistory: React.FC<IStakingHistory> = ({ searchParamAddress, totalNu
     <Container>
       <StyledTitle>Staking History</StyledTitle>
       <CourtCardsContainer>
-        {isLoadingStakingHistory || isLoadingCourtTree ? (
+        {!isLoadingStakingHistory && totalNumberStakingEvents === 0 ? (
+          <NoHistoryLabel>No history found</NoHistoryLabel>
+        ) : isLoadingStakingHistory || isLoadingCourtTree ? (
           Array.from({ length: 10 }).map((_, index) => <Skeleton height={64} key={index} />)
         ) : (
           <>

web/src/pages/Profile/Stakes/index.tsx

@@ -36,15 +36,15 @@ interface IStakes {
 }
 
 const Stakes: React.FC<IStakes> = ({ searchParamAddress }) => {
-  const { data: currentStakeData, isLoading } = useJurorStakeDetailsQuery(searchParamAddress);
+  const { data: currentStakeData, isLoading: isCurrentStakeLoading } = useJurorStakeDetailsQuery(searchParamAddress);
   const { data: stakingHistoryData } = useStakingHistory(1, 0);
   const totalStake = currentStakeData?.jurorTokensPerCourts?.[0]?.effectiveStake ?? "0";
   const lockedStake = currentStakeData?.jurorTokensPerCourts?.[0]?.locked ?? "0";
   const totalNumberStakingEvents = stakingHistoryData?.data?.userStakingEvents?.count ?? 0;
 
   return (
     <Container>
-      <CurrentStakes {...{ totalStake, lockedStake, currentStakeData, isLoading }} />
+      <CurrentStakes {...{ totalStake, lockedStake, currentStakeData, isCurrentStakeLoading }} />
       <StakingHistory {...{ searchParamAddress, totalNumberStakingEvents }} />
     </Container>
   );

web/src/pages/Profile/Votes/StatsAndFilters/index.tsx

@@ -10,7 +10,7 @@ const Container = styled.div`
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
-  margin-bottom: ${responsiveSize(16, 32)};
+  margin-bottom: ${responsiveSize(4, 12)};
   justify-content: space-between;
 `;
 

web/src/pages/Profile/Votes/VoteCard/CaseNumber.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import styled, { css } from "styled-components";
+
+import { landscapeStyle } from "styles/landscapeStyle";
+
+import { InternalLink } from "components/InternalLink";
+
+const Container = styled.div`
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  gap: 8px 16px;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+
+  small {
+    height: 100%;
+    font-weight: 600;
+  }
+
+  ${landscapeStyle(
+    () => css`
+      justify-content: flex-start;
+      width: auto;
+    `
+  )}
+`;
+
+const StyledInternalLink = styled(InternalLink)`
+  font-weight: 600;
+`;
+
+interface ICaseNumber {
+  id: string;
+}
+
+const CaseNumber: React.FC<ICaseNumber> = ({ id }) => {
+  return (
+    <Container>
+      <StyledInternalLink to={`/cases/${id?.toString()}`}>Case {id}</StyledInternalLink>
+    </Container>
+  );
+};
+export default CaseNumber;

web/src/pages/Profile/Votes/VoteCard/CaseStatus.tsx

@@ -0,0 +1,62 @@
+import React, { useMemo } from "react";
+import styled, { css, useTheme } from "styled-components";
+
+import { Periods } from "consts/periods";
+
+import { getPeriodColors } from "components/DisputeView/PeriodBanner";
+
+interface ICaseStatus {}
+
+const StyledLabel = styled.label<{ frontColor: string; withDot?: boolean }>`
+  display: flex;
+  align-items: center;
+  width: auto;
+  color: ${({ frontColor }) => frontColor};
+  ${({ withDot, frontColor }) =>
+    withDot
+      ? css`
+          ::before {
+            content: "";
+            display: inline-block;
+            height: 8px;
+            width: 8px;
+            border-radius: 50%;
+            margin-right: 8px;
+            background-color: ${frontColor};
+            flex-shrink: 0;
+          }
+        `
+      : null}
+`;
+
+const getPeriodLabel = (period: Periods): string => {
+  switch (period) {
+    case Periods.evidence:
+      return "In Progress";
+    case Periods.commit:
+      return "In Progress";
+    case Periods.vote:
+      return "Voting";
+    case Periods.appeal:
+      return "Crowdfunding Appeal";
+    case Periods.execution:
+      return "Closed";
+    default:
+      return "In Progress";
+  }
+};
+
+const CaseStatus: React.FC<ICaseStatus> = ({}) => {
+  const theme = useTheme();
+  const [frontColor, backgroundColor] = useMemo(
+    () => getPeriodColors(Periods.evidence, theme),
+    [theme, Periods.evidence]
+  );
+
+  return (
+    <StyledLabel frontColor={frontColor} withDot>
+      {getPeriodLabel(Periods.evidence)}
+    </StyledLabel>
+  );
+};
+export default CaseStatus;

web/src/pages/Profile/Votes/VoteCard/CourtName.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import styled, { css } from "styled-components";
+
+import { landscapeStyle } from "styles/landscapeStyle";
+
+const Container = styled.div`
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  gap: 8px 16px;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+
+  small {
+    height: 100%;
+    font-weight: 400;
+  }
+
+  ${landscapeStyle(
+    () => css`
+      justify-content: flex-start;
+      width: auto;
+    `
+  )}
+`;
+
+interface ICourtName {
+  name: string;
+}
+
+const CourtName: React.FC<ICourtName> = ({ name }) => {
+  return (
+    <Container>
+      <small>{name}</small>
+    </Container>
+  );
+};
+export default CourtName;

web/src/pages/Profile/Votes/VoteCard/Round.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import styled from "styled-components";
+
+import RoundIcon from "svgs/icons/round.svg";
+
+const Container = styled.div`
+  display: flex;
+  gap: 8px;
+
+  small {
+    font-weight: 400;
+  }
+`;
+
+interface IRound {
+  number: string;
+}
+
+const Round: React.FC<IRound> = ({ number }) => {
+  return (
+    <Container>
+      <RoundIcon />
+      <small>Round {number}</small>
+    </Container>
+  );
+};
+export default Round;

web/src/pages/Profile/Votes/VoteCard/Vote.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import styled from "styled-components";
+
+import VotedIcon from "svgs/icons/voted-ballot.svg";
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+
+  small {
+    font-weight: 400;
+  }
+`;
+
+const StyledVotedIcon = styled(VotedIcon)`
+  path {
+    fill: ${({ theme }) => theme.primaryBlue};
+  }
+`;
+
+const BlueSmall = styled.small`
+  color: ${({ theme }) => theme.primaryBlue};
+`;
+
+interface IVote {
+  choice: string;
+}
+
+const Vote: React.FC<IVote> = ({ choice }) => {
+  return (
+    <Container>
+      <StyledVotedIcon />
+      <BlueSmall>Vote: </BlueSmall>
+      <small>{choice}</small>
+    </Container>
+  );
+};
+export default Vote;