feat: make colorpicker use props for height/width

This commit is contained in:
Lewis Crichton 2023-09-25 18:32:16 +01:00
parent 4325dcf02e
commit 03bc5cde22
No known key found for this signature in database
2 changed files with 6 additions and 4 deletions

View file

@ -34,7 +34,7 @@ function EditPencil({ className, color }) {
);
}
function ColorPicker(props: ColorPickerProps) {
function ColorPicker(props: ColorPickerProps & { width: number; height: number; }) {
const [color, setColor] = useState(props.value);
const correctedColor = color ? `#${color.toString(16).padStart(6, "0")}` : "#000000";
@ -48,7 +48,9 @@ function ColorPicker(props: ColorPickerProps) {
{popoutProps => (
<div {...popoutProps} className={cl("swatch")} style={{
backgroundColor: correctedColor,
borderColor: correctedColor
borderColor: correctedColor,
width: props.width,
height: props.height
}}>
<EditPencil
className={cl("swatch-pencil")}
@ -84,6 +86,8 @@ export function SettingColorComponent({ label, name, themeSettings }: Props) {
<div className={cl("swatch-row")}>
<span>{label}</span>
<ColorPicker
width={40} /* same as a switch */
height={24}
key={name}
value={normalizedValue}
onChange={handleChange}

View file

@ -2,8 +2,6 @@
display: flex;
align-items: center;
justify-content: center;
width: 69px;
height: 50px;
box-sizing: border-box;
position: relative;
border: 1px solid;