Complete some item forms

src/components/boardComponents/forms/DiceFormFields.js

@@ -16,6 +16,12 @@ const Form = ({ initialValues }) => {
           initialValue={initialValues.label}
         />
       </Label>
+      <Label>
+        {t("Side count")}
+        <Field name="side" component="input" initialValue={initialValues.side}>
+          {(props) => <input {...props.input} type="number" />}
+        </Field>
+      </Label>
     </>
   );
 };

src/components/boardComponents/forms/NoteFormFields.js

@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
 import { Field } from "react-final-form";
 
 import Label from "../../../ui/formUtils/Label";
+import ColorPicker from "../../../ui/formUtils/ColorPicker";
 
 const Form = ({ initialValues }) => {
   const { t } = useTranslation();
@@ -16,6 +17,38 @@ const Form = ({ initialValues }) => {
           initialValue={initialValues.label}
         />
       </Label>
+      <Label>
+        {t("Width")}
+        <Field
+          name="width"
+          component="input"
+          initialValue={initialValues.width}
+        >
+          {(props) => <input {...props.input} type="number" />}
+        </Field>
+      </Label>
+      <Label>
+        {t("Height")}
+        <Field
+          name="height"
+          component="input"
+          initialValue={initialValues.height}
+        >
+          {(props) => <input {...props.input} type="number" />}
+        </Field>
+      </Label>
+      <Label>
+        {t("Color")}
+        <Field
+          name="color"
+          component="input"
+          initialValue={initialValues.color}
+        >
+          {({ input: { onChange, value } }) => (
+            <ColorPicker value={value} onChange={onChange} />
+          )}
+        </Field>
+      </Label>
     </>
   );
 };

src/ui/formUtils/ColorPicker.js

@@ -5,10 +5,11 @@ import styled from "styled-components";
 
 const Color = styled.div`
   background-color: ${({ color }) => color};
+  border: 1px solid #00000022;
   width: 20px;
   height: 20px;
   margin: 5px;
-  cursor: "pointer";
+  cursor: pointer;
 `;
 
 const ColorPickerWrapper = styled.div`