Skip to content

Commit f5f265e

Browse files
alcercualcercu
authored
Merge pull request #1685 from kleros/refactor/revamp-devtools-ruler-ui
refactor(web-devtools): revamp-ruler-ui
2 parents 61c07b9 + 57716ac commit f5f265e

File tree

8 files changed

+275
-127
lines changed

8 files changed

+275
-127
lines changed

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

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React 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 InputContainer = styled.div`
18+
display: flex;
19+
flex-direction: column;
20+
gap: 16px;
21+
`;
22+
23+
const StyledLabel = styled.label`
24+
word-wrap: break-word;
25+
`;
26+
27+
const ChangeDeveloper: React.FC = () => {
28+
return (
29+
<Container>
30+
<Header text="Developer" />
31+
<InputContainer>
32+
<StyledLabel>Current Developer : 0xbe8d95497E53aB41d5A45CC8def90d0e59b49f99</StyledLabel>
33+
<LabeledInput label="New Developer" />
34+
</InputContainer>
35+
<Button text="Update" />
36+
</Container>
37+
);
38+
};
39+
40+
export default ChangeDeveloper;

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

-51
This file was deleted.

‎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

+27-26
Original file line numberDiff line numberDiff line change
@@ -2,60 +2,61 @@
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 ChangeRuler from "./ChangeRuler";
9+
import { responsiveSize } from "styles/responsiveSize";
10+
11+
import ChangeDeveloper from "./ChangeDeveloper";
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;
35+
padding: 8px 16px;
36+
border-radius: 3px;
2437
`;
2538

26-
const SettingsPane = styled.div`
27-
display: flex;
28-
flex-wrap: wrap;
29-
gap: 16px;
30-
margin: 16px 0;
31-
`;
39+
const StyledLabel = styled.label``;
3240

3341
const Ruler: React.FC = () => {
3442
return (
3543
<Container>
3644
<h1>Ruler</h1>
3745

3846
<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>
47+
<StyledLabel>Arbitrable:</StyledLabel>
48+
<DropdownCascader
49+
placeholder={"Select Arbitrable"}
50+
onSelect={() => {
51+
//todo;
52+
}}
53+
items={SelectArbitrable}
54+
/>
5355
</Arbitrables>
5456

55-
<SettingsPane>
56-
<RulingModes />
57-
<ChangeRuler />
58-
</SettingsPane>
57+
<RulingModes />
58+
<ManualRuling />
59+
<ChangeDeveloper />
5960
</Container>
6061
);
6162
};

0 commit comments

Comments
 (0)