From bd68a9b57aa5750958daa81f1a5c08e6ef7523fa Mon Sep 17 00:00:00 2001
From: Harman-singh-waraich <Waraichharman68@gmail.com>
Date: Wed, 11 Sep 2024 12:46:23 +0530
Subject: [PATCH] refactor(web-devtools): revamp-ruler-ui

---
 .../src/app/(main)/ruler/ChangeRuler.tsx      |  53 ++++----
 web-devtools/src/app/(main)/ruler/Header.tsx  |  11 ++
 .../src/app/(main)/ruler/ManualRuling.tsx     |  56 +++++++++
 .../src/app/(main)/ruler/RulingModes.tsx      | 116 ++++++++++--------
 web-devtools/src/app/(main)/ruler/page.tsx    |  51 ++++----
 web-devtools/src/components/LabeledInput.tsx  |  69 +++++++++++
 web-devtools/src/consts/index.ts              |   6 +
 7 files changed, 254 insertions(+), 108 deletions(-)
 create mode 100644 web-devtools/src/app/(main)/ruler/Header.tsx
 create mode 100644 web-devtools/src/app/(main)/ruler/ManualRuling.tsx
 create mode 100644 web-devtools/src/components/LabeledInput.tsx

diff --git a/web-devtools/src/app/(main)/ruler/ChangeRuler.tsx b/web-devtools/src/app/(main)/ruler/ChangeRuler.tsx
index a96f9da76..573f26b42 100644
--- a/web-devtools/src/app/(main)/ruler/ChangeRuler.tsx
+++ b/web-devtools/src/app/(main)/ruler/ChangeRuler.tsx
@@ -1,50 +1,39 @@
 import React from "react";
 import styled from "styled-components";
 
-import { Field } from "@kleros/ui-components-library";
+import { Button } from "@kleros/ui-components-library";
 
-import LightButton from "components/LightButton";
+import LabeledInput from "components/LabeledInput";
+
+import Header from "./Header";
 
 const Container = styled.div`
-  border: ${({ theme }) => theme.klerosUIComponentsPrimaryBlue} 1px solid;
-  border-radius: 4px;
-  padding: 16px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
 `;
 
-const RulingSettings = styled.div`
+const InputContainer = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  margin: 16px 0;
+  gap: 16px;
 `;
-const FieldContainer = 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};
+
+const StyledLabel = styled.label`
+  word-wrap: break-word;
 `;
 
 const ChangeRuler: React.FC = () => {
   return (
-    <div>
-      <h3>Change Ruler</h3>
-      <Container>
-        <label>Current Ruler</label>
-        <Field value={"0xb78......09e441"}></Field>
-        <RulingSettings>
-          <LightButton text={"Change Ruler"} />
-          <FieldContainer>
-            address <Field placeholder={"0x00[dev address]"}></Field>
-          </FieldContainer>
-        </RulingSettings>
-      </Container>
-    </div>
+    <Container>
+      <Header text="Developer" />
+      <InputContainer>
+        <StyledLabel>Current Ruler : 0xbe8d95497E53aB41d5A45CC8def90d0e59b49f99</StyledLabel>
+        <LabeledInput label="New Developer" />
+      </InputContainer>
+      <Button text="Update" />
+    </Container>
   );
 };
 
diff --git a/web-devtools/src/app/(main)/ruler/Header.tsx b/web-devtools/src/app/(main)/ruler/Header.tsx
new file mode 100644
index 000000000..bd462f1a1
--- /dev/null
+++ b/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;
diff --git a/web-devtools/src/app/(main)/ruler/ManualRuling.tsx b/web-devtools/src/app/(main)/ruler/ManualRuling.tsx
new file mode 100644
index 000000000..477b1476f
--- /dev/null
+++ b/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;
diff --git a/web-devtools/src/app/(main)/ruler/RulingModes.tsx b/web-devtools/src/app/(main)/ruler/RulingModes.tsx
index 27e4deb0e..8b9f1db4e 100644
--- a/web-devtools/src/app/(main)/ruler/RulingModes.tsx
+++ b/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>
   );
 };
 
diff --git a/web-devtools/src/app/(main)/ruler/page.tsx b/web-devtools/src/app/(main)/ruler/page.tsx
index 8bcd84419..ac2ced729 100644
--- a/web-devtools/src/app/(main)/ruler/page.tsx
+++ b/web-devtools/src/app/(main)/ruler/page.tsx
@@ -2,32 +2,38 @@
 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 { responsiveSize } from "styles/responsiveSize";
+
 import ChangeRuler from "./ChangeRuler";
+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;
-`;
-
-const SettingsPane = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-  margin: 16px 0;
+  padding: 8px 16px;
+  border-radius: 3px;
 `;
 
 const Ruler: React.FC = () => {
@@ -36,26 +42,19 @@ const Ruler: React.FC = () => {
       <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>
+        <label>Arbitrable:</label>
+        <DropdownCascader
+          placeholder={"Select Arbitrable"}
+          onSelect={() => {
+            //todo;
+          }}
+          items={SelectArbitrable}
+        />
       </Arbitrables>
 
-      <SettingsPane>
-        <RulingModes />
-        <ChangeRuler />
-      </SettingsPane>
+      <RulingModes />
+      <ManualRuling />
+      <ChangeRuler />
     </Container>
   );
 };
diff --git a/web-devtools/src/components/LabeledInput.tsx b/web-devtools/src/components/LabeledInput.tsx
new file mode 100644
index 000000000..353bea8d4
--- /dev/null
+++ b/web-devtools/src/components/LabeledInput.tsx
@@ -0,0 +1,69 @@
+import React from "react";
+import styled from "styled-components";
+
+import { Checkbox, Field, type CheckboxProps, type FieldProps } from "@kleros/ui-components-library";
+
+const Container = styled.div`
+  display: flex;
+  max-width: 300px;
+  min-width: 250px;
+  height: 50px;
+`;
+
+const LabelContainer = styled.div`
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid ${({ theme }) => theme.klerosUIComponentsStroke};
+  border-radius: 6px 0px 0px 6px;
+`;
+
+const Label = styled.label`
+  color: ${({ theme }) => theme.klerosUIComponentsPrimaryText};
+`;
+
+const InputContainer = styled(LabelContainer)`
+  position: relative;
+  border-radius: 0px 6px 6px 0px;
+  border-left: none;
+`;
+
+const StyledField = styled(Field)`
+  width: auto;
+  > input {
+    border: none;
+  }
+`;
+
+const StyledCheckbox = styled(Checkbox)`
+  height: 24px;
+  width: 24px;
+  padding: 0;
+`;
+
+type BaseProps = {
+  inputType?: "field" | "checkbox";
+  label: string;
+};
+
+type CheckboxInputProps = CheckboxProps & { inputType: "checkbox" };
+type DefaultInputProps = FieldProps & { inputType?: "field" };
+
+type LabeledInputProps = BaseProps & (CheckboxInputProps | DefaultInputProps);
+
+const LabeledInput: React.FC<LabeledInputProps> = ({ inputType = "field", label, ...props }) => {
+  return (
+    <Container>
+      <LabelContainer>
+        <Label>{label}</Label>
+      </LabelContainer>
+      <InputContainer>
+        {inputType === "field" && <StyledField {...props} />}
+        {inputType === "checkbox" && <StyledCheckbox label="&nbsp;" {...props} />}
+      </InputContainer>
+    </Container>
+  );
+};
+
+export default LabeledInput;
diff --git a/web-devtools/src/consts/index.ts b/web-devtools/src/consts/index.ts
index 9c0d9b51f..685df90de 100644
--- a/web-devtools/src/consts/index.ts
+++ b/web-devtools/src/consts/index.ts
@@ -4,3 +4,9 @@ export const IPFS_GATEWAY = process.env.NEXT_PUBLIC_IPFS_GATEWAY || "https://cdn
 
 export const INVALID_DISPUTE_DATA_ERROR = `The dispute data is not valid, please vote "Refuse to arbitrate"`;
 export const RPC_ERROR = `RPC Error: Unable to fetch dispute data. Please avoid voting.`;
+
+export enum RULING_MODE {
+  Manual,
+  AutomaticPreset,
+  RandomPreset,
+}