fix(devtools): fixed typings

Author: nikhilverma360

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

@@ -30,7 +30,7 @@ const FieldContainer = styled.div`
   color: ${({ theme }) => theme.klerosUIComponentsPrimaryText};
 `;
 
-const ChangeRuler = () => {
+const ChangeRuler: React.FC = () => {
   return (
     <div>
       <h3>Change Ruler</h3>

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

@@ -33,8 +33,9 @@ const FieldContainer = styled.div`
   color: ${({ theme }) => theme.klerosUIComponentsPrimaryText};
 `;
 
-const RulingModes: React.FC = (arbitrable) => {
-  const [checked, setChecked] = useState(false);
+const RulingModes: React.FC = () => {
+  const [tie, setTie] = useState<boolean>(false);
+  const [overriden, setOverriden] = useState<boolean>(false);
 
   return (
     <div>
@@ -53,12 +54,12 @@ const RulingModes: React.FC = (arbitrable) => {
             ruling <Field placeholder={"1"}></Field>
           </FieldContainer>
           <FieldContainer>
-            <Checkbox label="" small checked={checked} onChange={() => setChecked((old) => !old)} />
-            <Field placeholder={"0x00[dev address]"}></Field>
+            <Checkbox label="" small checked={tie} onChange={() => setTie((old) => !old)} />
+            <Field placeholder={"tie"}></Field>
           </FieldContainer>
           <FieldContainer>
-            <Checkbox label="" small checked={checked} onChange={() => setChecked((old) => !old)} />
-            <Field placeholder={"0x00[dev address]"}></Field>
+            <Checkbox label="" small checked={overriden} onChange={() => setOverriden((old) => !old)} />
+            <Field placeholder={"overriden"}></Field>
           </FieldContainer>
         </RulingSettings>
 

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

@@ -4,9 +4,7 @@ import styled from "styled-components";
 
 import { DropdownCascader, Field } from "@kleros/ui-components-library";
 
-import { SelectArbitrable } from "utils/dumyData";
-
-import LightButton from "components/LightButton";
+import { SelectArbitrable } from "utils/dummyData";
 
 import ChangeRuler from "./ChangeRuler";
 import RulingModes from "./RulingModes";
@@ -31,27 +29,8 @@ const SettingsPane = styled.div`
   gap: 16px;
   margin: 16px 0;
 `;
-const RulingSettings = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  margin: 16px 0;
-`;
-
-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};
-`;
 
-export default function Home() {
+const Home: React.FC = () => {
   const [selectedArbitrable, setSelectedArbitrable] = useState<string | number>("");
 
   return (
@@ -81,4 +60,5 @@ export default function Home() {
       </SettingsPane>
     </Container>
   );
-}
+};
+export default Home;

web-devtools/src/layout/Footer/index.tsx

@@ -1,4 +1,3 @@
-"use client";
 import React from "react";
 import styled, { css } from "styled-components";
 
@@ -42,7 +41,7 @@ const Container = styled.div`
       svg {
         height: 16px;
         width: 16px;
-        max-heigth: 16px;
+        max-height: 16px;
         max-width: 16px;
         fill: white;
       }