feat: change color in png finished

src/components/Navbar/index.tsx

@@ -6,6 +6,7 @@ import Button from '@mui/material/Button';
 import IconButton from '@mui/material/IconButton';
 import { Link, useNavigate } from 'react-router-dom';
 import githubIcon from '@assets/github-mark.png'; // Adjust the path to your GitHub icon
+import { Stack } from '@mui/material';
 
 const Navbar: React.FC = () => {
   const navigate = useNavigate();
@@ -14,46 +15,46 @@ const Navbar: React.FC = () => {
       position="static"
       style={{ backgroundColor: 'white', color: 'black' }}
     >
-      <Toolbar>
+      <Toolbar sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
         <Typography
           onClick={() => navigate('/')}
           fontSize={20}
-          sx={{ flexGrow: 1, cursor: 'pointer' }}
+          sx={{ cursor: 'pointer' }}
           color={'primary'}
         >
           OmniTools
         </Typography>
-
-        <Button color="inherit">
-          <Link
-            to="/features"
-            style={{ textDecoration: 'none', color: 'inherit' }}
+        <Stack direction={'row'}>
+          <Button color="inherit">
+            <Link
+              to="/features"
+              style={{ textDecoration: 'none', color: 'inherit' }}
+            >
+              Features
+            </Link>
+          </Button>
+          <Button color="inherit">
+            <Link
+              to="/about-us"
+              style={{ textDecoration: 'none', color: 'inherit' }}
+            >
+              About Us
+            </Link>
+          </Button>
+          <IconButton
+            color="primary"
+            href="https://github.com/iib0011/omni-tools"
+            target="_blank"
+            rel="noopener noreferrer"
           >
-            Features
-          </Link>
-        </Button>
-        <Button color="inherit">
-          <Link
-            to="/about-us"
-            style={{ textDecoration: 'none', color: 'inherit' }}
-          >
-            About Us
-          </Link>
-        </Button>
-
-        <IconButton
-          color="primary"
-          href="https://github.com/iib0011/omni-tools"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <img
-            src={githubIcon}
-            alt="GitHub"
-            style={{ height: '24px', marginRight: '8px' }}
-          />
-          <Typography variant="button">Star us</Typography>
-        </IconButton>
+            <img
+              src={githubIcon}
+              alt="GitHub"
+              style={{ height: '24px', marginRight: '8px' }}
+            />
+            <Typography variant="button">Star us</Typography>
+          </IconButton>
+        </Stack>
       </Toolbar>
     </AppBar>
   );

src/components/options/ColorSelector.tsx

@@ -28,7 +28,11 @@ const ColorSelector: React.FC<ColorSelectorProps> = ({
   return (
     <Box mb={1}>
       <Stack direction={'row'}>
-        <TextField value={color} onChange={handleColorChange} />
+        <TextField
+          sx={{ backgroundColor: 'white' }}
+          value={color}
+          onChange={handleColorChange}
+        />
         <IconButton onClick={() => inputRef.current?.click()}>
           <PaletteIcon />
         </IconButton>

src/pages/image/png/change-colors-in-png/index.tsx

@@ -9,10 +9,12 @@ import Typography from '@mui/material/Typography';
 import { Formik, useFormikContext } from 'formik';
 import ColorSelector from '../../../../components/options/ColorSelector';
 import Color from 'color';
+import TextFieldWithDesc from 'components/options/TextFieldWithDesc';
 
 const initialValues = {
   fromColor: 'white',
-  toColor: 'black'
+  toColor: 'black',
+  similarity: '10'
 };
 const validationSchema = Yup.object({
   // splitSeparator: Yup.string().required('The separator is required')
@@ -23,7 +25,7 @@ export default function ChangeColorsInPng() {
 
   const FormikListenerComponent = ({ input }: { input: File }) => {
     const { values } = useFormikContext<typeof initialValues>();
-    const { fromColor, toColor } = values;
+    const { fromColor, toColor, similarity } = values;
 
     useEffect(() => {
       let fromRgb: [number, number, number];
@@ -95,7 +97,7 @@ export default function ChangeColorsInPng() {
         }, 'image/png');
       };
 
-      processImage(input, fromRgb, toRgb, 10);
+      processImage(input, fromRgb, toRgb, Number(similarity));
     }, [input, fromColor, toColor]);
 
     return null;
@@ -141,6 +143,13 @@ export default function ChangeColorsInPng() {
                   onChange={(val) => setFieldValue('toColor', val)}
                   description={'With this color (to color)'}
                 />
+                <TextFieldWithDesc
+                  value={values.similarity}
+                  onChange={(val) => setFieldValue('similarity', val)}
+                  description={
+                    'Match this % of similar colors of the from color. For example, 10% white will match white and a little bit of gray.'
+                  }
+                />
               </Box>
               <Box></Box>
             </Stack>