Merge pull request #1324 from kleros/feat(web)/locked-pnk-redesigns-frontend

feat(web): new lockedstake design implementation

Author: alcercu

web/src/components/CasesDisplay/index.tsx

@@ -13,7 +13,7 @@ const Divider = styled.hr`
 `;
 
 const StyledTitle = styled.h1`
-  margin-bottom: calc(16px + (48 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+  margin-bottom: calc(32px + (48 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875) !important;
 `;
 
 interface ICasesDisplay extends ICasesGrid {

web/src/components/Field.tsx

@@ -18,7 +18,7 @@ const FieldContainer = styled.div<FieldContainerProps>`
   svg {
     fill: ${({ theme }) => theme.secondaryPurple};
     margin-right: 8px;
-    width: 15px;
+    width: 14px;
   }
 
   .link {

web/src/pages/Courts/CourtDetails/StakePanel/JurorStakeDisplay.tsx

@@ -7,7 +7,6 @@ import { useAccount } from "wagmi";
 import { isUndefined } from "utils/index";
 import Field from "components/Field";
 import DiceIcon from "svgs/icons/dice.svg";
-import LockerIcon from "svgs/icons/locker.svg";
 import PNKIcon from "svgs/icons/pnk.svg";
 import { useCourtDetails } from "queries/useCourtDetails";
 import { useKlerosCoreGetJurorBalance } from "hooks/contracts/generated";
@@ -101,14 +100,9 @@ const JurorBalanceDisplay = () => {
       name: "My Stake",
       value: `${format(jurorBalance?.[2])} PNK`,
     },
-    {
-      icon: LockerIcon,
-      name: "Locked Stake",
-      value: `${format(jurorBalance?.[1])} PNK`,
-    },
     {
       icon: DiceIcon,
-      name: "Juror odds",
+      name: "Juror Odds",
       value: jurorOdds,
     },
   ];

web/src/pages/Dashboard/Courts/CourtCard/CourtBranch.tsx renamed to web/src/pages/Dashboard/Courts/CourtCard/CourtName.tsx

@@ -9,6 +9,7 @@ const Container = styled.div`
 
   small {
     height: 100%;
+    font-weight: 600;
   }
 
   ${landscapeStyle(
@@ -25,15 +26,15 @@ const StyledBreadcrumb = styled(Breadcrumb)`
   height: 100%;
 `;
 
-interface ICourtBranch {
+interface ICourtName {
   name: string;
 }
 
-const CourtBranch: React.FC<ICourtBranch> = ({ name }) => {
+const CourtName: React.FC<ICourtName> = ({ name }) => {
   return (
     <Container>
       <StyledBreadcrumb items={[{ text: name, value: 0 }]} />
     </Container>
   );
 };
-export default CourtBranch;
+export default CourtName;

web/src/pages/Dashboard/Courts/CourtCard/DesktopCard.tsx

@@ -3,26 +3,42 @@ import styled, { css } from "styled-components";
 import { landscapeStyle } from "styles/landscapeStyle";
 import { formatUnits } from "viem";
 
-const StyledLabel = styled.label`
+const Container = styled.div`
   display: flex;
-  font-weight: 600;
-  color: ${({ theme }) => theme.primaryText};
-  font-size: 16px;
+  flex-direction: row;
+  gap: 16px;
+  justify-content: space-between;
+  width: 100%;
 
   ${landscapeStyle(
     () => css`
       justify-content: flex-end;
+      width: auto;
     `
   )}
 `;
 
+const StyledLabel = styled.label`
+  display: flex;
+  font-weight: 600;
+  color: ${({ theme }) => theme.primaryText};
+  font-size: 16px;
+  align-items: center;
+  gap: 32px;
+`;
+
 interface IStake {
-  stake: bigint;
+  stake: string;
 }
 
 const Stake: React.FC<IStake> = ({ stake }) => {
   const formattedStake = formatUnits(stake, 18);
 
-  return <StyledLabel>{`${formattedStake} PNK`}</StyledLabel>;
+  return (
+    <Container>
+      <label>Stake</label>
+      <StyledLabel>{`${formattedStake} PNK`}</StyledLabel>
+    </Container>
+  );
 };
 export default Stake;

web/src/pages/Dashboard/Courts/CourtCard/LockedStake.tsx

@@ -1,21 +1,43 @@
 import React from "react";
-import DesktopCard from "./DesktopCard";
-import MobileCard from "./MobileCard";
+import styled, { css } from "styled-components";
+import { landscapeStyle } from "styles/landscapeStyle";
+import { Card as _Card } from "@kleros/ui-components-library";
+import CourtName from "./CourtName";
+import Stake from "./Stake";
+
+const Container = styled(_Card)`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  height: auto;
+  width: 100%;
+  padding: 21px 24px 25px 19px;
+  border-left: 5px solid ${({ theme }) => theme.secondaryPurple};
+  flex-wrap: wrap;
+  gap: 12px;
+
+  ${({ theme }) => (theme.name === "light" ? `box-shadow: 0px 2px 3px 0px ${theme.stroke};` : "")}
+
+  ${landscapeStyle(
+    () =>
+      css`
+        padding: 21.5px 32px 21.5px 27px;
+      `
+  )}
+`;
 
 interface ICourtCard {
   name: string;
-  stake: bigint;
-  lockedStake: bigint;
+  stake: string;
 }
 
-const CourtCard: React.FC<ICourtCard> = ({ name, stake, lockedStake }) => {
-  const allProps = { name, stake, lockedStake };
-
+const CourtCard: React.FC<ICourtCard> = ({ name, stake }) => {
   return (
-    <>
-      <DesktopCard {...allProps} />
-      <MobileCard {...allProps} />
-    </>
+    <Container>
+      <CourtName name={name} />
+      <Stake stake={stake} />
+    </Container>
   );
 };