refactor(web-devtools): update-labeled-input-style

Author: tractorss

web-devtools/package.json

@@ -45,7 +45,7 @@
   },
   "dependencies": {
     "@kleros/kleros-sdk": "workspace:^",
-    "@kleros/ui-components-library": "^2.10.0",
+    "@kleros/ui-components-library": "^2.15.0",
     "graphql": "^16.9.0",
     "next": "14.2.4",
     "react": "^18.2.0",

web-devtools/src/components/LabeledInput.tsx

@@ -1,38 +1,72 @@
-import React from "react";
-import styled from "styled-components";
+import React, { useRef } from "react";
+import styled, { css } 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;
+  align-items: center;
+  width: 280px;
+  max-width: 280px;
+  height: 46px;
+  position: relative;
+  box-sizing: border-box;
 `;
 
-const LabelContainer = styled.div`
+const ContainerCss = css`
   flex: 1;
+  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid ${({ theme }) => theme.klerosUIComponentsStroke};
-  border-radius: 6px 0px 0px 6px;
+`;
+
+const LabelContainer = styled.div<{ isField?: boolean }>`
+  ${ContainerCss}
+  border-radius: 3px 0px 0px 3px;
+  background-color: ${({ theme }) => theme.klerosUIComponentsLightBackground};
+  ${({ isField }) =>
+    isField &&
+    css`
+      width: 50%;
+      height: 45px;
+      position: absolute;
+      top: 0.5px;
+      left: 0.5px;
+      z-index: 1;
+    `}
 `;
 
 const Label = styled.label`
   color: ${({ theme }) => theme.klerosUIComponentsPrimaryText};
 `;
 
-const InputContainer = styled(LabelContainer)`
+const InputContainer = styled.div<{ isField?: boolean }>`
+  ${ContainerCss}
   position: relative;
-  border-radius: 0px 6px 6px 0px;
+  border-radius: 0px 3px 3px 0px;
   border-left: none;
+  background-color: ${({ theme }) => theme.klerosUIComponentsWhiteBackground};
+  ${({ isField }) =>
+    isField &&
+    css`
+      width: 100%;
+      z-index: 0;
+      border-radius: 3px;
+    `}
 `;
 
-const StyledField = styled(Field)`
-  width: auto;
+const StyledField = styled(Field)<{ paddingLeft?: number }>`
+  width: 100%;
   > input {
     border: none;
+    box-sizing: border-box;
+    ${({ paddingLeft }) =>
+      paddingLeft &&
+      css`
+        padding-left: ${paddingLeft + 8}px;
+      `}
   }
 `;
 
@@ -53,13 +87,14 @@ type DefaultInputProps = FieldProps & { inputType?: "field" };
 type LabeledInputProps = BaseProps & (CheckboxInputProps | DefaultInputProps);
 
 const LabeledInput: React.FC<LabeledInputProps> = ({ inputType = "field", label, ...props }) => {
+  const labelRef = useRef<HTMLDivElement>(null);
   return (
     <Container>
-      <LabelContainer>
+      <LabelContainer ref={labelRef} isField={inputType === "field"}>
         <Label>{label}</Label>
       </LabelContainer>
-      <InputContainer>
-        {inputType === "field" && <StyledField {...props} />}
+      <InputContainer isField={inputType === "field"}>
+        {inputType === "field" && <StyledField {...props} paddingLeft={labelRef.current?.offsetWidth} />}
         {inputType === "checkbox" && <StyledCheckbox label="&nbsp;" {...props} />}
       </InputContainer>
     </Container>

yarn.lock

@@ -7989,7 +7989,7 @@ __metadata:
     "@graphql-codegen/cli": "npm:^5.0.2"
     "@graphql-codegen/client-preset": "npm:^4.3.2"
     "@kleros/kleros-sdk": "workspace:^"
-    "@kleros/ui-components-library": "npm:^2.10.0"
+    "@kleros/ui-components-library": "npm:^2.15.0"
     "@svgr/webpack": "npm:^8.1.0"
     "@types/node": "npm:^20"
     "@types/react": "npm:18.2.0"
@@ -8098,9 +8098,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@kleros/ui-components-library@npm:^2.10.0":
-  version: 2.13.1
-  resolution: "@kleros/ui-components-library@npm:2.13.1"
+"@kleros/ui-components-library@npm:^2.14.0":
+  version: 2.14.0
+  resolution: "@kleros/ui-components-library@npm:2.14.0"
   dependencies:
     "@datepicker-react/hooks": "npm:^2.8.4"
     "@swc/helpers": "npm:^0.3.2"
@@ -8117,13 +8117,13 @@ __metadata:
     react-dom: ^18.0.0
     react-is: ^18.0.0
     styled-components: ^5.3.3
-  checksum: db710e97b09a291ad5b6ff7a7a046cd3945e0403fda66ce6b33e501609ad2b712f924e84df2cba273d4ee936d274a6b7f210ff269d27d504bc81bcb712bc9da1
+  checksum: ea5d9689562a6aa963eda44ad94336d4152c5d0f46c81e70a0c271a09fb93e9c9fd7b4ee609b1f6e1eb6e18f557f1cc0b132c3ac10d9f5af6ffc911ecb71d9da
   languageName: node
   linkType: hard
 
-"@kleros/ui-components-library@npm:^2.14.0":
-  version: 2.14.0
-  resolution: "@kleros/ui-components-library@npm:2.14.0"
+"@kleros/ui-components-library@npm:^2.15.0":
+  version: 2.15.0
+  resolution: "@kleros/ui-components-library@npm:2.15.0"
   dependencies:
     "@datepicker-react/hooks": "npm:^2.8.4"
     "@swc/helpers": "npm:^0.3.2"
@@ -8140,7 +8140,7 @@ __metadata:
     react-dom: ^18.0.0
     react-is: ^18.0.0
     styled-components: ^5.3.3
-  checksum: ea5d9689562a6aa963eda44ad94336d4152c5d0f46c81e70a0c271a09fb93e9c9fd7b4ee609b1f6e1eb6e18f557f1cc0b132c3ac10d9f5af6ffc911ecb71d9da
+  checksum: 7c97e8fe45b1cd002a0aaf7fe4670b8c668a3abbbab82fac9261ef9a8382ccaf7d4a974ee54b8f299f1e8e7b68e58dab1f3f31d7c8b3b60c58a5af8abdf4a783
   languageName: node
   linkType: hard