Skip to content

Commit bd68a9b

Browse files
tractorsstractorss
committed
refactor(web-devtools): revamp-ruler-ui
1 parent 61c07b9 commit bd68a9b

File tree

7 files changed

+254
-108
lines changed

7 files changed

+254
-108
lines changed

‎web-devtools/src/app/(main)/ruler/ChangeRuler.tsx

+21-32
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,39 @@
11
import React from "react";
22
import styled from "styled-components";
33

4-
import { Field } from "@kleros/ui-components-library";
4+
import { Button } from "@kleros/ui-components-library";
55

6-
import LightButton from "components/LightButton";
6+
import LabeledInput from "components/LabeledInput";
7+
8+
import Header from "./Header";
79

810
const Container = styled.div`
9-
border: ${({ theme }) => theme.klerosUIComponentsPrimaryBlue} 1px solid;
10-
border-radius: 4px;
11-
padding: 16px;
11+
width: 100%;
12+
display: flex;
13+
flex-direction: column;
14+
gap: 32px;
1215
`;
1316

14-
const RulingSettings = styled.div`
17+
const InputContainer = styled.div`
1518
display: flex;
1619
flex-direction: column;
17-
gap: 8px;
18-
margin: 16px 0;
20+
gap: 16px;
1921
`;
20-
const FieldContainer = styled.div`
21-
display: flex;
22-
align-items: center;
23-
width: fit-content;
24-
height: fit-content;
25-
padding-left: 8px;
26-
gap: 8px;
27-
font-size: 14px;
28-
border-radius: 4px;
29-
border: ${({ theme }) => theme.klerosUIComponentsStroke} 1px solid;
30-
color: ${({ theme }) => theme.klerosUIComponentsPrimaryText};
22+
23+
const StyledLabel = styled.label`
24+
word-wrap: break-word;
3125
`;
3226

3327
const ChangeRuler: React.FC = () => {
3428
return (
35-
<div>
36-
<h3>Change Ruler</h3>
37-
<Container>
38-
<label>Current Ruler</label>
39-
<Field value={"0xb78......09e441"}></Field>
40-
<RulingSettings>
41-
<LightButton text={"Change Ruler"} />
42-
<FieldContainer>
43-
address <Field placeholder={"0x00[dev address]"}></Field>
44-
</FieldContainer>
45-
</RulingSettings>
46-
</Container>
47-
</div>
29+
<Container>
30+
<Header text="Developer" />
31+
<InputContainer>
32+
<StyledLabel>Current Ruler : 0xbe8d95497E53aB41d5A45CC8def90d0e59b49f99</StyledLabel>
33+
<LabeledInput label="New Developer" />
34+
</InputContainer>
35+
<Button text="Update" />
36+
</Container>
4837
);
4938
};
5039

‎web-devtools/src/app/(main)/ruler/Header.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from "react";
2+
import styled from "styled-components";
3+
4+
const Container = styled.h2`
5+
border-bottom: 1px solid ${({ theme }) => theme.klerosUIComponentsStroke};
6+
padding: 8px 0px;
7+
`;
8+
9+
const Header: React.FC<{ text: string }> = ({ text }) => <Container>{text}</Container>;
10+
11+
export default Header;

‎web-devtools/src/app/(main)/ruler/ManualRuling.tsx

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React, { useState } from "react";
2+
import styled from "styled-components";
3+
4+
import { Button } from "@kleros/ui-components-library";
5+
6+
import LabeledInput from "components/LabeledInput";
7+
8+
import Header from "./Header";
9+
10+
const Container = styled.div`
11+
width: 100%;
12+
display: flex;
13+
flex-direction: column;
14+
gap: 32px;
15+
`;
16+
17+
const SelectContainer = styled.div`
18+
display: flex;
19+
gap: 16px;
20+
justify-content: space-around;
21+
flex-wrap: wrap;
22+
`;
23+
24+
const ManualRuling: React.FC = () => {
25+
const [tie, setTie] = useState<boolean>(false);
26+
const [overriden, setOverriden] = useState<boolean>(false);
27+
const [disputeId, setDisputeId] = useState<number>();
28+
const [ruling, setRuling] = useState<number>();
29+
30+
return (
31+
<Container>
32+
<Header text="Manual Ruling" />
33+
<SelectContainer>
34+
<LabeledInput
35+
label="Dispute ID"
36+
type="number"
37+
value={disputeId}
38+
onChange={(e) => setDisputeId(Number(e.target.value))}
39+
/>
40+
41+
<LabeledInput label="Ruling" type="number" value={ruling} onChange={(e) => setRuling(Number(e.target.value))} />
42+
<LabeledInput label="Tie" inputType="checkbox" checked={tie} onChange={() => setTie((prev) => !prev)} />
43+
<LabeledInput
44+
label="Overidden"
45+
inputType="checkbox"
46+
checked={overriden}
47+
onChange={() => setOverriden((prev) => !prev)}
48+
/>
49+
</SelectContainer>
50+
51+
<Button text="Rule" />
52+
</Container>
53+
);
54+
};
55+
56+
export default ManualRuling;

‎web-devtools/src/app/(main)/ruler/RulingModes.tsx

+66-50
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,89 @@
11
import React, { useState } from "react";
22
import styled from "styled-components";
33

4-
import { Checkbox, Field } from "@kleros/ui-components-library";
4+
import { RULING_MODE } from "consts";
55

6-
import LightButton from "components/LightButton";
6+
import { Button, Radio } from "@kleros/ui-components-library";
7+
8+
import LabeledInput from "components/LabeledInput";
9+
10+
import Header from "./Header";
711

812
const Container = styled.div`
13+
width: 100%;
914
display: flex;
10-
flex-wrap: wrap;
11-
gap: 8px;
12-
margin: 16px 0;
13-
border: ${({ theme }) => theme.klerosUIComponentsPrimaryBlue} 1px solid;
14-
border-radius: 4px;
15-
padding: 16px;
15+
flex-direction: column;
16+
gap: 32px;
1617
`;
17-
const RulingSettings = styled.div`
18+
19+
const SelectContainer = styled.div`
20+
width: 100%;
1821
display: flex;
1922
flex-direction: column;
20-
gap: 8px;
21-
margin: 16px 0;
23+
flex-wrap: wrap;
24+
gap: 16px;
2225
`;
23-
const FieldContainer = styled.div`
26+
27+
const AutomaticPresetInputsContainer = styled.div`
2428
display: flex;
25-
align-items: center;
26-
width: fit-content;
27-
height: fit-content;
28-
padding-left: 8px;
29-
gap: 8px;
30-
font-size: 14px;
31-
border-radius: 4px;
32-
border: ${({ theme }) => theme.klerosUIComponentsStroke} 1px solid;
33-
color: ${({ theme }) => theme.klerosUIComponentsPrimaryText};
29+
gap: 16px;
30+
justify-content: space-around;
31+
flex-wrap: wrap;
3432
`;
3533

3634
const RulingModes: React.FC = () => {
3735
const [tie, setTie] = useState<boolean>(false);
3836
const [overriden, setOverriden] = useState<boolean>(false);
37+
const [ruling, setRuling] = useState<number>();
38+
const [rulingMode, setRulingMode] = useState<RULING_MODE | null>(null);
3939

4040
return (
41-
<div>
42-
<h3>Ruling Mode</h3>
43-
<Container>
44-
<RulingSettings>
45-
<LightButton text={"Rule Now Manually"} />
46-
<FieldContainer>
47-
ruling <Field placeholder={"1"}></Field>
48-
</FieldContainer>
49-
</RulingSettings>
50-
51-
<RulingSettings>
52-
<LightButton text={"Run Automatically with a Preset"} />
53-
<FieldContainer>
54-
ruling <Field placeholder={"1"}></Field>
55-
</FieldContainer>
56-
<FieldContainer>
57-
<Checkbox label="" small checked={tie} onChange={() => setTie((old) => !old)} />
58-
<Field placeholder={"tie"}></Field>
59-
</FieldContainer>
60-
<FieldContainer>
61-
<Checkbox label="" small checked={overriden} onChange={() => setOverriden((old) => !old)} />
62-
<Field placeholder={"overriden"}></Field>
63-
</FieldContainer>
64-
</RulingSettings>
41+
<Container>
42+
<Header text="Ruling Mode" />
43+
<SelectContainer>
44+
<Radio
45+
small
46+
label="Manual"
47+
checked={rulingMode === RULING_MODE.Manual}
48+
onChange={() => {
49+
setRulingMode(RULING_MODE.Manual);
50+
}}
51+
/>
52+
<Radio
53+
small
54+
label="Random Preset"
55+
checked={rulingMode === RULING_MODE.RandomPreset}
56+
onChange={() => {
57+
setRulingMode(RULING_MODE.RandomPreset);
58+
}}
59+
/>
60+
<Radio
61+
small
62+
label="Automatic Preset"
63+
checked={rulingMode === RULING_MODE.AutomaticPreset}
64+
onChange={() => {
65+
setRulingMode(RULING_MODE.AutomaticPreset);
66+
}}
67+
/>
68+
<AutomaticPresetInputsContainer>
69+
<LabeledInput
70+
label="Ruling"
71+
type="number"
72+
value={ruling}
73+
onChange={(e) => setRuling(Number(e.target.value))}
74+
/>
75+
<LabeledInput label="Tie" inputType="checkbox" checked={tie} onChange={() => setTie((prev) => !prev)} />
76+
<LabeledInput
77+
label="Overidden"
78+
inputType="checkbox"
79+
checked={overriden}
80+
onChange={() => setOverriden((prev) => !prev)}
81+
/>
82+
</AutomaticPresetInputsContainer>
83+
</SelectContainer>
6584

66-
<RulingSettings>
67-
<LightButton text={"Run Automatically Randomly"} />
68-
</RulingSettings>
69-
</Container>
70-
</div>
85+
<Button text="Update" />
86+
</Container>
7187
);
7288
};
7389

‎web-devtools/src/app/(main)/ruler/page.tsx

+25-26
Original file line numberDiff line numberDiff line change
@@ -2,32 +2,38 @@
22
import React from "react";
33
import styled from "styled-components";
44

5-
import { DropdownCascader, Field } from "@kleros/ui-components-library";
5+
import { DropdownCascader } from "@kleros/ui-components-library";
66

77
import { SelectArbitrable } from "utils/dummyData";
88

9+
import { responsiveSize } from "styles/responsiveSize";
10+
911
import ChangeRuler from "./ChangeRuler";
12+
import ManualRuling from "./ManualRuling";
1013
import RulingModes from "./RulingModes";
1114

1215
const Container = styled.div`
1316
min-height: calc(100vh - 160px);
1417
display: flex;
1518
flex-direction: column;
19+
gap: 48px;
1620
margin: 16px 32px;
1721
align-items: center;
22+
padding: ${responsiveSize(32, 72)} ${responsiveSize(16, 132)} ${responsiveSize(76, 96)};
1823
`;
24+
1925
const Arbitrables = styled.div`
26+
width: 100%;
27+
background-color: ${({ theme }) => theme.klerosUIComponentsWhiteBackground};
2028
display: flex;
29+
flex-direction: row;
2130
flex-wrap: wrap;
31+
justify-content: center;
32+
align-items: center;
2233
gap: 8px;
2334
margin: 16px 0;
24-
`;
25-
26-
const SettingsPane = styled.div`
27-
display: flex;
28-
flex-wrap: wrap;
29-
gap: 16px;
30-
margin: 16px 0;
35+
padding: 8px 16px;
36+
border-radius: 3px;
3137
`;
3238

3339
const Ruler: React.FC = () => {
@@ -36,26 +42,19 @@ const Ruler: React.FC = () => {
3642
<h1>Ruler</h1>
3743

3844
<Arbitrables>
39-
<div>
40-
<label>Select Arbitrable</label>
41-
<DropdownCascader
42-
placeholder={"Select Arbitrable"}
43-
onSelect={() => {
44-
//todo;
45-
}}
46-
items={SelectArbitrable}
47-
/>
48-
</div>
49-
<div>
50-
<label>Current Ruling Mode</label>
51-
<Field value={"auto mode"}></Field>
52-
</div>
45+
<label>Arbitrable:</label>
46+
<DropdownCascader
47+
placeholder={"Select Arbitrable"}
48+
onSelect={() => {
49+
//todo;
50+
}}
51+
items={SelectArbitrable}
52+
/>
5353
</Arbitrables>
5454

55-
<SettingsPane>
56-
<RulingModes />
57-
<ChangeRuler />
58-
</SettingsPane>
55+
<RulingModes />
56+
<ManualRuling />
57+
<ChangeRuler />
5958
</Container>
6059
);
6160
};

0 commit comments

Comments
 (0)