fix(web): modularization of components, mobilecard, desktopcard, style changes

Author: kemuru

web/src/components/Popup/MiniGuides/Template.tsx

@@ -76,6 +76,10 @@ const Close = styled.label`
   justify-content: flex-end;
   cursor: pointer;
 
+  &:hover {
+    text-decoration: underline;
+  }
+
   color: ${({ theme }) => theme.primaryBlue};
 
   ${landscapeStyle(

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

@@ -0,0 +1,31 @@
+import React from "react";
+import styled, { css } from "styled-components";
+import { landscapeStyle } from "styles/landscapeStyle";
+import { Breadcrumb } from "@kleros/ui-components-library";
+
+const CourtName = styled.div`
+  small {
+    height: 100%;
+  }
+
+  ${landscapeStyle(() => css``)}
+`;
+
+const StyledBreadcrumb = styled(Breadcrumb)`
+  display: flex;
+  align-items: center;
+  height: 100%;
+`;
+
+interface ICourtBranch {
+  name: string;
+}
+
+const CourtBranch: React.FC<ICourtBranch> = ({ name }) => {
+  return (
+    <CourtName>
+      <StyledBreadcrumb items={[{ text: name, value: 0 }]} />
+    </CourtName>
+  );
+};
+export default CourtBranch;

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

@@ -0,0 +1,59 @@
+import React from "react";
+import styled, { css } from "styled-components";
+import { landscapeStyle } from "styles/landscapeStyle";
+import { Card as _Card } from "@kleros/ui-components-library";
+import CourtBranch from "./CourtBranch";
+import Stake from "./Stake";
+import LockedStake from "./LockedStake";
+
+const Container = styled(_Card)`
+  display: none;
+
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  height: auto;
+  width: 100%;
+  padding: 21.5px 32px 21.5px 27px;
+  border-left: 5px solid ${({ theme }) => theme.secondaryPurple};
+  flex-wrap: wrap;
+  gap: 20px;
+
+  ${({ theme }) => (theme.name === "light" ? `box-shadow: 0px 2px 3px 0px ${theme.stroke};` : "")}
+
+  ${landscapeStyle(
+    () =>
+      css`
+        display: flex;
+      `
+  )}
+`;
+
+const StakesContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 220px;
+  gap: 32px;
+`;
+
+interface IDesktopCard {
+  name: string;
+  stake: bigint;
+  lockedStake: bigint;
+}
+
+const DesktopCard: React.FC<IDesktopCard> = ({ name, stake, lockedStake }) => {
+  return (
+    <Container>
+      <CourtBranch name={name} />
+      <StakesContainer>
+        <Stake stake={stake} />
+        <LockedStake lockedStake={lockedStake} />
+      </StakesContainer>
+    </Container>
+  );
+};
+
+export default DesktopCard;

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

@@ -0,0 +1,27 @@
+import React from "react";
+import styled, { css } from "styled-components";
+import { landscapeStyle } from "styles/landscapeStyle";
+import { formatUnits } from "viem";
+
+const StyledLockedStakeLabel = styled.label`
+  display: flex;
+  justify-content: flex-end;
+  color: ${({ theme }) => theme.primaryText};
+
+  ${landscapeStyle(
+    () => css`
+      min-width: 107px;
+    `
+  )}
+`;
+
+interface ILockedStake {
+  lockedStake: bigint;
+}
+
+const LockedStake: React.FC<ILockedStake> = ({ lockedStake }) => {
+  const formattedLockedStake = formatUnits(lockedStake, 18);
+
+  return <StyledLockedStakeLabel>{`${formattedLockedStake} PNK`}</StyledLockedStakeLabel>;
+};
+export default LockedStake;

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

@@ -0,0 +1,58 @@
+import React from "react";
+import styled, { css } from "styled-components";
+import { landscapeStyle } from "styles/landscapeStyle";
+import { Card as _Card } from "@kleros/ui-components-library";
+import CourtBranch from "./CourtBranch";
+import Stake from "./Stake";
+import LockedStake from "./LockedStake";
+
+const Container = styled(_Card)`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  height: auto;
+  width: 100%;
+  padding: 21.5px 32px 21.5px 27px;
+  border-left: 5px solid ${({ theme }) => theme.secondaryPurple};
+  flex-wrap: wrap;
+  gap: 20px;
+
+  ${({ theme }) => (theme.name === "light" ? `box-shadow: 0px 2px 3px 0px ${theme.stroke};` : "")}
+
+  ${landscapeStyle(
+    () =>
+      css`
+        display: none;
+      `
+  )}
+`;
+
+const StakesContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 220px;
+  gap: 32px;
+`;
+
+interface IMobileCard {
+  name: string;
+  stake: bigint;
+  lockedStake: bigint;
+}
+
+const MobileCard: React.FC<IMobileCard> = ({ name, stake, lockedStake }) => {
+  return (
+    <Container>
+      <CourtBranch name={name} />
+      <StakesContainer>
+        <Stake stake={stake} />
+        <LockedStake lockedStake={lockedStake} />
+      </StakesContainer>
+    </Container>
+  );
+};
+
+export default MobileCard;

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

@@ -0,0 +1,28 @@
+import React from "react";
+import styled, { css } from "styled-components";
+import { landscapeStyle } from "styles/landscapeStyle";
+import { formatUnits } from "viem";
+
+const StyledStakeLabel = styled.label`
+  display: flex;
+  font-weight: 600;
+  color: ${({ theme }) => theme.primaryText};
+  justify-content: flex-end;
+
+  ${landscapeStyle(
+    () => css`
+      width: 140px;
+    `
+  )}
+`;
+
+interface IStake {
+  stake: bigint;
+}
+
+const Stake: React.FC<IStake> = ({ stake }) => {
+  const formattedStake = formatUnits(stake, 18);
+
+  return <StyledStakeLabel>{`${formattedStake} PNK`}</StyledStakeLabel>;
+};
+export default Stake;

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

@@ -0,0 +1,22 @@
+import React from "react";
+import DesktopCard from "./DesktopCard";
+import MobileCard from "./MobileCard";
+
+interface ICourtCard {
+  name: string;
+  stake: bigint;
+  lockedStake: bigint;
+}
+
+const CourtCard: React.FC<ICourtCard> = ({ name, stake, lockedStake }) => {
+  const allProps = { name, stake, lockedStake };
+
+  return (
+    <>
+      <DesktopCard {...allProps} />
+      <MobileCard {...allProps} />
+    </>
+  );
+};
+
+export default CourtCard;