Merge pull request #1685 from kleros/refactor/revamp-devtools-ruler-ui

refactor(web-devtools): revamp-ruler-ui

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

@@ -0,0 +1,40 @@
+import React from "react";
+import styled from "styled-components";
+
+import { Button } from "@kleros/ui-components-library";
+
+import LabeledInput from "components/LabeledInput";
+
+import Header from "./Header";
+
+const Container = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+`;
+
+const InputContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`;
+
+const StyledLabel = styled.label`
+  word-wrap: break-word;
+`;
+
+const ChangeDeveloper: React.FC = () => {
+  return (
+    <Container>
+      <Header text="Developer" />
+      <InputContainer>
+        <StyledLabel>Current Developer : 0xbe8d95497E53aB41d5A45CC8def90d0e59b49f99</StyledLabel>
+        <LabeledInput label="New Developer" />
+      </InputContainer>
+      <Button text="Update" />
+    </Container>
+  );
+};
+
+export default ChangeDeveloper;

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

@@ -0,0 +1,11 @@
+import React from "react";
+import styled from "styled-components";
+
+const Container = styled.h2`
+  border-bottom: 1px solid ${({ theme }) => theme.klerosUIComponentsStroke};
+  padding: 8px 0px;
+`;
+
+const Header: React.FC<{ text: string }> = ({ text }) => <Container>{text}</Container>;
+
+export default Header;

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

@@ -0,0 +1,56 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+
+import { Button } from "@kleros/ui-components-library";
+
+import LabeledInput from "components/LabeledInput";
+
+import Header from "./Header";
+
+const Container = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+`;
+
+const SelectContainer = styled.div`
+  display: flex;
+  gap: 16px;
+  justify-content: space-around;
+  flex-wrap: wrap;
+`;
+
+const ManualRuling: React.FC = () => {
+  const [tie, setTie] = useState<boolean>(false);
+  const [overriden, setOverriden] = useState<boolean>(false);
+  const [disputeId, setDisputeId] = useState<number>();
+  const [ruling, setRuling] = useState<number>();
+
+  return (
+    <Container>
+      <Header text="Manual Ruling" />
+      <SelectContainer>
+        <LabeledInput
+          label="Dispute ID"
+          type="number"
+          value={disputeId}
+          onChange={(e) => setDisputeId(Number(e.target.value))}
+        />
+
+        <LabeledInput label="Ruling" type="number" value={ruling} onChange={(e) => setRuling(Number(e.target.value))} />
+        <LabeledInput label="Tie" inputType="checkbox" checked={tie} onChange={() => setTie((prev) => !prev)} />
+        <LabeledInput
+          label="Overidden"
+          inputType="checkbox"
+          checked={overriden}
+          onChange={() => setOverriden((prev) => !prev)}
+        />
+      </SelectContainer>
+
+      <Button text="Rule" />
+    </Container>
+  );
+};
+
+export default ManualRuling;

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

@@ -1,73 +1,89 @@
 import React, { useState } from "react";
 import styled from "styled-components";
 
-import { Checkbox, Field } from "@kleros/ui-components-library";
+import { RULING_MODE } from "consts";
 
-import LightButton from "components/LightButton";
+import { Button, Radio } from "@kleros/ui-components-library";
+
+import LabeledInput from "components/LabeledInput";
+
+import Header from "./Header";
 
 const Container = styled.div`
+  width: 100%;
   display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin: 16px 0;
-  border: ${({ theme }) => theme.klerosUIComponentsPrimaryBlue} 1px solid;
-  border-radius: 4px;
-  padding: 16px;
+  flex-direction: column;
+  gap: 32px;
 `;
-const RulingSettings = styled.div`
+
+const SelectContainer = styled.div`
+  width: 100%;
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  margin: 16px 0;
+  flex-wrap: wrap;
+  gap: 16px;
 `;
-const FieldContainer = styled.div`
+
+const AutomaticPresetInputsContainer = styled.div`
   display: flex;
-  align-items: center;
-  width: fit-content;
-  height: fit-content;
-  padding-left: 8px;
-  gap: 8px;
-  font-size: 14px;
-  border-radius: 4px;
-  border: ${({ theme }) => theme.klerosUIComponentsStroke} 1px solid;
-  color: ${({ theme }) => theme.klerosUIComponentsPrimaryText};
+  gap: 16px;
+  justify-content: space-around;
+  flex-wrap: wrap;
 `;
 
 const RulingModes: React.FC = () => {
   const [tie, setTie] = useState<boolean>(false);
   const [overriden, setOverriden] = useState<boolean>(false);
+  const [ruling, setRuling] = useState<number>();
+  const [rulingMode, setRulingMode] = useState<RULING_MODE | null>(null);
 
   return (
-    <div>
-      <h3>Ruling Mode</h3>
-      <Container>
-        <RulingSettings>
-          <LightButton text={"Rule Now Manually"} />
-          <FieldContainer>
-            ruling <Field placeholder={"1"}></Field>
-          </FieldContainer>
-        </RulingSettings>
-
-        <RulingSettings>
-          <LightButton text={"Run Automatically with a Preset"} />
-          <FieldContainer>
-            ruling <Field placeholder={"1"}></Field>
-          </FieldContainer>
-          <FieldContainer>
-            <Checkbox label="" small checked={tie} onChange={() => setTie((old) => !old)} />
-            <Field placeholder={"tie"}></Field>
-          </FieldContainer>
-          <FieldContainer>
-            <Checkbox label="" small checked={overriden} onChange={() => setOverriden((old) => !old)} />
-            <Field placeholder={"overriden"}></Field>
-          </FieldContainer>
-        </RulingSettings>
+    <Container>
+      <Header text="Ruling Mode" />
+      <SelectContainer>
+        <Radio
+          small
+          label="Manual"
+          checked={rulingMode === RULING_MODE.Manual}
+          onChange={() => {
+            setRulingMode(RULING_MODE.Manual);
+          }}
+        />
+        <Radio
+          small
+          label="Random Preset"
+          checked={rulingMode === RULING_MODE.RandomPreset}
+          onChange={() => {
+            setRulingMode(RULING_MODE.RandomPreset);
+          }}
+        />
+        <Radio
+          small
+          label="Automatic Preset"
+          checked={rulingMode === RULING_MODE.AutomaticPreset}
+          onChange={() => {
+            setRulingMode(RULING_MODE.AutomaticPreset);
+          }}
+        />
+        <AutomaticPresetInputsContainer>
+          <LabeledInput
+            label="Ruling"
+            type="number"
+            value={ruling}
+            onChange={(e) => setRuling(Number(e.target.value))}
+          />
+          <LabeledInput label="Tie" inputType="checkbox" checked={tie} onChange={() => setTie((prev) => !prev)} />
+          <LabeledInput
+            label="Overidden"
+            inputType="checkbox"
+            checked={overriden}
+            onChange={() => setOverriden((prev) => !prev)}
+          />
+        </AutomaticPresetInputsContainer>
+      </SelectContainer>
 
-        <RulingSettings>
-          <LightButton text={"Run Automatically Randomly"} />
-        </RulingSettings>
-      </Container>
-    </div>
+      <Button text="Update" />
+    </Container>
   );
 };
 

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

@@ -2,60 +2,61 @@
 import React from "react";
 import styled from "styled-components";
 
-import { DropdownCascader, Field } from "@kleros/ui-components-library";
+import { DropdownCascader } from "@kleros/ui-components-library";
 
 import { SelectArbitrable } from "utils/dummyData";
 
-import ChangeRuler from "./ChangeRuler";
+import { responsiveSize } from "styles/responsiveSize";
+
+import ChangeDeveloper from "./ChangeDeveloper";
+import ManualRuling from "./ManualRuling";
 import RulingModes from "./RulingModes";
 
 const Container = styled.div`
   min-height: calc(100vh - 160px);
   display: flex;
   flex-direction: column;
+  gap: 48px;
   margin: 16px 32px;
   align-items: center;
+  padding: ${responsiveSize(32, 72)} ${responsiveSize(16, 132)} ${responsiveSize(76, 96)};
 `;
+
 const Arbitrables = styled.div`
+  width: 100%;
+  background-color: ${({ theme }) => theme.klerosUIComponentsWhiteBackground};
   display: flex;
+  flex-direction: row;
   flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
   gap: 8px;
   margin: 16px 0;
+  padding: 8px 16px;
+  border-radius: 3px;
 `;
 
-const SettingsPane = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-  margin: 16px 0;
-`;
+const StyledLabel = styled.label``;
 
 const Ruler: React.FC = () => {
   return (
     <Container>
       <h1>Ruler</h1>
 
       <Arbitrables>
-        <div>
-          <label>Select Arbitrable</label>
-          <DropdownCascader
-            placeholder={"Select Arbitrable"}
-            onSelect={() => {
-              //todo;
-            }}
-            items={SelectArbitrable}
-          />
-        </div>
-        <div>
-          <label>Current Ruling Mode</label>
-          <Field value={"auto mode"}></Field>
-        </div>
+        <StyledLabel>Arbitrable:</StyledLabel>
+        <DropdownCascader
+          placeholder={"Select Arbitrable"}
+          onSelect={() => {
+            //todo;
+          }}
+          items={SelectArbitrable}
+        />
       </Arbitrables>
 
-      <SettingsPane>
-        <RulingModes />
-        <ChangeRuler />
-      </SettingsPane>
+      <RulingModes />
+      <ManualRuling />
+      <ChangeDeveloper />
     </Container>
   );
 };