feat: make colorpicker use props for height/width
This commit is contained in:
parent
4325dcf02e
commit
03bc5cde22
2 changed files with 6 additions and 4 deletions
|
@ -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}
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue