diff --git a/web/src/assets/svgs/styled/three-pnks.svg b/web/src/assets/svgs/styled/three-pnks.svg
new file mode 100644
index 000000000..92c212b7d
--- /dev/null
+++ b/web/src/assets/svgs/styled/three-pnks.svg
@@ -0,0 +1,19 @@
+
diff --git a/web/src/components/Field.tsx b/web/src/components/Field.tsx
index 7fbe2f434..352c45bad 100644
--- a/web/src/components/Field.tsx
+++ b/web/src/components/Field.tsx
@@ -9,7 +9,6 @@ const FieldContainer = styled.div`
justify-content: flex-start;
white-space: nowrap;
width: 100%;
-
.value {
flex-grow: 1;
text-align: end;
@@ -28,7 +27,6 @@ const FieldContainer = styled.div`
cursor: pointer;
}
}
-
${({ isList }) =>
isList &&
css`
@@ -42,8 +40,8 @@ const FieldContainer = styled.div`
`
)}
`};
- ${({ isOverview }) =>
- isOverview &&
+ ${({ isOverview, isJurorBalance }) =>
+ (isOverview || isJurorBalance) &&
css`
${landscapeStyle(
() => css`
@@ -66,6 +64,7 @@ type FieldContainerProps = {
width?: string;
isList?: boolean;
isOverview?: boolean;
+ isJurorBalance?: boolean;
};
interface IField {
@@ -76,12 +75,22 @@ interface IField {
width?: string;
displayAsList?: boolean;
isOverview?: boolean;
+ isJurorBalance?: boolean;
}
-const Field: React.FC = ({ icon: Icon, name, value, link, width, displayAsList, isOverview }) => {
+const Field: React.FC = ({
+ icon: Icon,
+ name,
+ value,
+ link,
+ width,
+ displayAsList,
+ isOverview,
+ isJurorBalance,
+}) => {
return (
-
- {(!displayAsList || isOverview) && (
+
+ {(!displayAsList || isOverview || isJurorBalance) && (
<>
@@ -97,5 +106,4 @@ const Field: React.FC = ({ icon: Icon, name, value, link, width, display
);
};
-
export default Field;
diff --git a/web/src/components/NumberInputField.tsx b/web/src/components/NumberInputField.tsx
index 8cd4b627f..b2b427363 100644
--- a/web/src/components/NumberInputField.tsx
+++ b/web/src/components/NumberInputField.tsx
@@ -10,6 +10,21 @@ const Container = styled.div`
const StyledField = styled(Field)`
width: 100%;
height: fit-content;
+
+ input[type="number"]::-webkit-inner-spin-button,
+ input[type="number"]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+ appearance: none;
+ }
+ input[type="number"] {
+ -moz-appearance: textfield;
+ }
+ input {
+ border: 1px solid ${({ theme }) => theme.stroke};
+ border-right: none;
+ height: 45px;
+ font-size: 16px;
+ }
`;
interface INumberInputField {
diff --git a/web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx
index 1da445fcb..152612b9a 100644
--- a/web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx
+++ b/web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx
@@ -14,7 +14,6 @@ import { commify, uncommify } from "utils/commify";
import { EnsureChain } from "components/EnsureChain";
const StyledField = styled(NumberInputField)`
- width: 100%;
height: fit-content;
`;
@@ -33,6 +32,13 @@ const InputArea = styled.div`
flex-direction: column;
align-items: center;
gap: 12px;
+ width: 100%;
+`;
+
+const InputFieldAndButton = styled.div`
+ display: flex;
+ flex-direction: row;
+ width: 100%;
`;
interface IInputDisplay {
@@ -87,35 +93,37 @@ const InputDisplay: React.FC = ({
- {
- setAmount(e);
- }}
- placeholder={isStaking ? "Amount to stake" : "Amount to withdraw"}
- message={
- isStaking
- ? `You need to stake at least ${formatPNK(courtDetails?.court.minStake ?? 0n, 3)} PNK. ` +
- "You may need two transactions, one to increase allowance, the other to stake."
- : `You need to either withdraw all or keep at least ${formatPNK(
- courtDetails?.court.minStake ?? 0n,
- 3
- )} PNK.`
- }
- formatter={(number: string) => commify(roundNumberDown(Number(number)))}
- />
-
-
+ {
+ setAmount(e);
}}
+ placeholder={isStaking ? "Amount to stake" : "Amount to withdraw"}
+ // message={
+ // isStaking
+ // ? `You need to stake at least ${formatPNK(courtDetails?.court.minStake ?? 0n, 3)} PNK. ` +
+ // "You may need two transactions, one to increase allowance, the other to stake."
+ // : `You need to either withdraw all or keep at least ${formatPNK(
+ // courtDetails?.court.minStake ?? 0n,
+ // 3
+ // )} PNK.`
+ // }
+ formatter={(number: string) => commify(roundNumberDown(Number(number)))}
/>
-
+
+
+
+
);
diff --git a/web/src/pages/Courts/CourtDetails/StakePanel/JurorStakeDisplay.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/JurorStakeDisplay.tsx
index 02a9fbe10..900c965cf 100644
--- a/web/src/pages/Courts/CourtDetails/StakePanel/JurorStakeDisplay.tsx
+++ b/web/src/pages/Courts/CourtDetails/StakePanel/JurorStakeDisplay.tsx
@@ -1,5 +1,6 @@
import React, { useState, useEffect, useMemo } from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
+import { landscapeStyle } from "styles/landscapeStyle";
import { useParams } from "react-router-dom";
import { formatEther } from "viem";
import { useAccount } from "wagmi";
@@ -13,10 +14,21 @@ import { useKlerosCoreGetJurorBalance } from "hooks/contracts/generated";
const Container = styled.div`
display: flex;
+ width: 100%;
flex-direction: column;
justify-content: space-between;
gap: 8px;
margin-top: 12px;
+
+ ${landscapeStyle(
+ () => css`
+ margin-top: 32px;
+ gap: 32px;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+ `
+ )}
`;
const format = (value: bigint | undefined): string => (value !== undefined ? formatEther(value) : "0");
@@ -104,7 +116,7 @@ const JurorBalanceDisplay = () => {
return (
{data.map(({ icon, name, value }) => (
-
+
))}
);
diff --git a/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx
index 24394eb21..bf4a02cba 100644
--- a/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx
+++ b/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx
@@ -1,4 +1,5 @@
import React, { useMemo } from "react";
+import styled from "styled-components";
import { useParams } from "react-router-dom";
import { useAccount, usePublicClient } from "wagmi";
import { Button } from "@kleros/ui-components-library";
@@ -17,6 +18,11 @@ import { wrapWithToast } from "utils/wrapWithToast";
import { isUndefined } from "utils/index";
import { EnsureChain } from "components/EnsureChain";
+const StyledStakeWithdrawButton = styled(Button)`
+ border: 1px solid ${({ theme }) => theme.stroke};
+ height: 45px;
+`;
+
export enum ActionType {
allowance = "allowance",
stake = "stake",
@@ -129,7 +135,7 @@ const StakeWithdrawButton: React.FC = ({
const { text, checkDisabled, onClick } = buttonProps[isAllowance ? ActionType.allowance : action];
return (
-