Merge pull request #1732 from kleros/feat(web)/impro-court-page

feat: tweak in court stake display in dashboard

Author: alcercu

web/src/hooks/useNavigateAndScrollTop.ts

@@ -0,0 +1,15 @@
+import { useContext } from "react";
+import { useNavigate } from "react-router-dom";
+import { OverlayScrollContext } from "context/OverlayScrollContext";
+
+export const useNavigateAndScrollTop = () => {
+  const navigate = useNavigate();
+  const osInstanceRef = useContext(OverlayScrollContext);
+
+  const navigateAndScrollTop = (path) => {
+    navigate(path);
+    osInstanceRef?.current?.osInstance().elements().viewport.scroll({ top: 0 });
+  };
+
+  return navigateAndScrollTop;
+};

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

@@ -1,13 +1,19 @@
 import React from "react";
 import styled, { css } from "styled-components";
 
-import { Breadcrumb } from "@kleros/ui-components-library";
-
 import { landscapeStyle } from "styles/landscapeStyle";
+import LightButton from "components/LightButton";
+
+import ArrowIcon from "svgs/icons/arrow.svg";
+import { useNavigateAndScrollTop } from "hooks/useNavigateAndScrollTop";
 
 const Container = styled.div`
+  display: flex;
   width: 100%;
-  justify-content: flex-start;
+  flex-direction: row;
+  gap: 16px;
+  align-items: center;
+  justify-content: space-between;
 
   small {
     height: 100%;
@@ -17,25 +23,46 @@ const Container = styled.div`
   ${landscapeStyle(
     () =>
       css`
+        justify-content: flex-start;
         width: auto;
       `
   )}
 `;
 
-const StyledBreadcrumb = styled(Breadcrumb)`
+const StyledButton = styled(LightButton)`
   display: flex;
-  align-items: center;
-  height: 100%;
+  flex-direction: row-reverse;
+  gap: 8px;
+  padding: 0px;
+  > .button-text {
+    color: ${({ theme }) => theme.primaryBlue};
+    font-size: 14px;
+  }
+  > .button-svg {
+    margin-right: 0;
+    path {
+      fill: ${({ theme }) => theme.primaryBlue};
+    }
+  }
 `;
 
 interface ICourtName {
   name: string;
+  id: string;
 }
 
-const CourtName: React.FC<ICourtName> = ({ name }) => {
+const CourtName: React.FC<ICourtName> = ({ name, id }) => {
+  const navigate = useNavigateAndScrollTop();
+
   return (
     <Container>
-      <StyledBreadcrumb items={[{ text: name, value: 0 }]} />
+      <small>{name}</small>
+      <StyledButton
+        onClick={() => navigate(`/courts/${id?.toString()}`)}
+        text="Open Court"
+        Icon={ArrowIcon}
+        className="reverse-button"
+      />
     </Container>
   );
 };

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

@@ -7,16 +7,18 @@ import { landscapeStyle } from "styles/landscapeStyle";
 
 import NumberDisplay from "components/NumberDisplay";
 
+import PnkIcon from "svgs/icons/pnk.svg";
+
 const Container = styled.div`
   display: flex;
   flex-direction: row;
   gap: 16px;
-  justify-content: space-between;
   width: 100%;
+  justify-content: flex-start;
+  align-items: center;
 
   ${landscapeStyle(
     () => css`
-      justify-content: flex-end;
       width: auto;
     `
   )}
@@ -31,6 +33,13 @@ const StyledLabel = styled.label`
   gap: 4px;
 `;
 
+const StyledPnkIcon = styled(PnkIcon)`
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  fill: ${({ theme }) => theme.secondaryPurple};
+`;
+
 interface IStake {
   stake: string;
 }
@@ -40,7 +49,7 @@ const Stake: React.FC<IStake> = ({ stake }) => {
 
   return (
     <Container>
-      <label>Stake</label>
+      <StyledPnkIcon />
       <StyledLabel>
         <NumberDisplay value={formattedStake} unit="PNK" />
       </StyledLabel>

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

@@ -15,31 +15,32 @@ const Container = styled(_Card)`
   justify-content: space-between;
   height: auto;
   width: 100%;
-  padding: 21px 24px 25px 19px;
+  padding: 21px 20px 25px 20px;
   border-left: 5px solid ${({ theme }) => theme.secondaryPurple};
   flex-wrap: wrap;
-  gap: 12px;
+  gap: 20px;
 
   ${({ theme }) => (theme.name === "light" ? `box-shadow: 0px 2px 3px 0px ${theme.stroke};` : "")}
 
   ${landscapeStyle(
     () =>
       css`
-        padding: 21.5px 32px 21.5px 27px;
+        padding: 21.5px 32px;
       `
   )}
 `;
 
 interface ICourtCard {
   name: string;
   stake: string;
+  id: string;
 }
 
-const CourtCard: React.FC<ICourtCard> = ({ name, stake }) => {
+const CourtCard: React.FC<ICourtCard> = ({ name, stake, id }) => {
   return (
     <Container>
-      <CourtName name={name} />
-      <Stake stake={stake} />
+      <CourtName {...{ name, id }} />
+      <Stake {...{ stake }} />
     </Container>
   );
 };

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

@@ -54,7 +54,7 @@ const Courts: React.FC = () => {
           {stakeData?.jurorTokensPerCourts
             ?.filter(({ staked }) => staked > 0)
             .map(({ court: { id, name }, staked }) => (
-              <CourtCard key={id} name={name ?? ""} stake={staked} />
+              <CourtCard key={id} name={name ?? ""} stake={staked} {...{ id }} />
             ))}
         </CourtCardsContainer>
       ) : null}