ulysia/Vencord
1
0
Fork 0
Code Pull requests Activity

feat: make colorpicker use props for height/width

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

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

2
src/components/ThemeSettings/components/colorStyles.css
View file

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