feat: change colors in png

src/components/input/ToolFileInput.tsx

@@ -5,6 +5,7 @@ import InputHeader from '../InputHeader';
 import InputFooter from './InputFooter';
 import { CustomSnackBarContext } from '../../contexts/CustomSnackBarContext';
 import greyPattern from '@assets/grey-pattern.png';
+import { globalInputHeight } from '../../config/uiConfig';
 
 interface ToolFileInputProps {
   value: File | null;
@@ -57,7 +58,7 @@ export default function ToolFileInput({
       <Box
         sx={{
           width: '100%',
-          height: 250,
+          height: globalInputHeight,
           border: preview ? 0 : 1,
           borderRadius: 2,
           boxShadow: '5'
@@ -77,7 +78,7 @@ export default function ToolFileInput({
             <img
               src={preview}
               alt="Preview"
-              style={{ maxWidth: '100%', maxHeight: 250 }}
+              style={{ maxWidth: '100%', maxHeight: globalInputHeight }}
             />
           </Box>
         ) : (

src/components/options/ColorSelector.tsx

@@ -0,0 +1,48 @@
+import React, { useState, ChangeEvent, useRef } from 'react';
+import { Box, Stack, TextField } from '@mui/material';
+import PaletteIcon from '@mui/icons-material/Palette';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import { descriptionFontSize } from '../../config/uiConfig';
+
+interface ColorSelectorProps {
+  value: string;
+  onChange: (val: string) => void;
+  description: string;
+}
+
+const ColorSelector: React.FC<ColorSelectorProps> = ({
+  value = '#ffffff',
+  onChange,
+  description
+}) => {
+  const [color, setColor] = useState<string>(value);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleColorChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const val = event.target.value;
+    setColor(val);
+    onChange(val);
+  };
+
+  return (
+    <Box mb={1}>
+      <Stack direction={'row'}>
+        <TextField value={color} onChange={handleColorChange} />
+        <IconButton onClick={() => inputRef.current?.click()}>
+          <PaletteIcon />
+        </IconButton>
+        <TextField
+          style={{ display: 'none' }}
+          inputRef={inputRef}
+          type="color"
+          value={color}
+          onChange={handleColorChange}
+        />
+      </Stack>
+      <Typography fontSize={descriptionFontSize}>{description}</Typography>
+    </Box>
+  );
+};
+
+export default ColorSelector;

src/components/result/ToolFileResult.tsx

@@ -2,6 +2,7 @@ import { Box } from '@mui/material';
 import React from 'react';
 import InputHeader from '../InputHeader';
 import greyPattern from '@assets/grey-pattern.png';
+import { globalInputHeight } from '../../config/uiConfig';
 
 export default function ToolFileResult({
   title = 'Result',
@@ -29,7 +30,7 @@ export default function ToolFileResult({
       <Box
         sx={{
           width: '100%',
-          height: 250,
+          height: globalInputHeight,
           border: preview ? 0 : 1,
           borderRadius: 2,
           boxShadow: '5'
@@ -49,7 +50,7 @@ export default function ToolFileResult({
             <img
               src={preview}
               alt="Result"
-              style={{ maxWidth: '100%', maxHeight: 250 }}
+              style={{ maxWidth: '100%', maxHeight: globalInputHeight }}
             />
           </Box>
         )}