chore: remove console log + general bug fixes

components/ToolScreen/CategoryItem.js

@@ -139,7 +139,7 @@ const CategoryItem = ({ executeScroll, menuItem, setMenuItem }) => {
   });
 };
 
-const CategoryItemMobile = ({ executeScroll, setMenuItem }) => {
+const CategoryItemMobile = ({ executeScroll, setMenuItem, menuItem }) => {
   const scrollDirection = useScrollDirection("down");
   return (
     <StyledMobileCategory scrollDirection={scrollDirection}>
@@ -152,7 +152,7 @@ const CategoryItemMobile = ({ executeScroll, setMenuItem }) => {
       >
         {config.categoryList.map((obj) => {
           return (
-            <option value={obj.id} key={obj.key}>
+            <option value={obj.id} key={obj.key} selected={menuItem === obj.id}>
               {" "}
               {obj.name}
             </option>

components/Tools/ColorTools/RgbToHex/converterFunctions.js

@@ -761,19 +761,19 @@ export function CMYKToHex(cmyk) {
   // strip the slash if using space-separated syntax
   if (cmyk.indexOf("/") > -1) cmyk.splice(3, 1);
 
-  let c = cmyk[0] /100,
+  let c = cmyk[0] / 100,
     m = cmyk[1] / 100,
     y = cmyk[2] / 100,
     k = cmyk[3] / 100;
-  
+
   c = c * (1 - k) + k;
   m = m * (1 - k) + k;
   y = y * (1 - k) + k;
 
   let r = 1 - c,
     g = 1 - m,
     b = 1 - y;
-  
+
   r = Math.round(255 * r);
   g = Math.round(255 * g);
   b = Math.round(255 * b);
@@ -786,7 +786,6 @@ export function CMYKToHex(cmyk) {
   if (g.length == 1) g = "0" + g;
   if (b.length == 1) b = "0" + b;
 
-  console.log("#" + r + g + b);
+  // console.log("#" + r + g + b);
   return "#" + r + g + b;
-
 }

components/Tools/ColorTools/RgbToHex/rgbHexConverter.js

@@ -206,7 +206,7 @@ const rgbHexConverter = () => {
 
   const handleConvert = () => {
     const currentValue = userInput;
-    console.log(output);
+    // console.log(output);
     handleValidation(currentValue);
   };
 
@@ -236,7 +236,7 @@ const rgbHexConverter = () => {
       ];
       setOutput(conveterObj);
     } else {
-      console.log("Invalid input");
+      // console.log("Invalid input");
     }
   };
 
@@ -261,7 +261,7 @@ const rgbHexConverter = () => {
       ];
       setOutput(conveterObj);
     } else {
-      console.log("Invalid input");
+      // console.log("Invalid input");
     }
   };
 
@@ -274,7 +274,7 @@ const rgbHexConverter = () => {
     let hslRegex = regexColorCodeTypes("hsl");
     let hslaRegex = regexColorCodeTypes("hsla");
 
-    console.log(currentValue)
+    // console.log(currentValue)
 
     if (hexRegex.test(currentValue)) {
       hexConverter(currentValue);

components/Tools/DevTools/CSSTransitions/CssTransitions.js

@@ -22,7 +22,7 @@ const InputSection = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-  
+
   @media (min-width: 800px) {
     width: 40%;
     flex-direction: column;
@@ -41,7 +41,7 @@ const ResultSection = styled.div`
   flex-direction: column;
   font-size: var(--fz-md);
   height: 500px;
-  
+
   @media (min-width: 800px) {
     width: 55%;
     height: inherit;
@@ -50,8 +50,8 @@ const ResultSection = styled.div`
 `;
 
 const StyledSelectInput = styled.select`
-${({ theme }) => theme.mixins.selectInput}
-font-size: var(--fz-lg);
+  ${({ theme }) => theme.mixins.selectInput}
+  font-size: var(--fz-lg);
 `;
 
 const OutputBox = styled.div`
@@ -94,7 +94,7 @@ const ResultCodeSection = styled.div`
   margin: auto;
   flex-direction: column;
 
-  h2{
+  h2 {
     margin-bottom: 0;
   }
   .desc {
@@ -131,12 +131,12 @@ const CSSTransitionsGenerator = (props) => {
   }, [state.transitionType]);
 
   const onTypeSelect = (e) => {
-    console.log(e.target.value);
+    // console.log(e.target.value);
     dispatch({ type: "CHANGETYPE", transitionType: e.target.value });
   };
 
   const onTFSelect = (e) => {
-    console.log(e.target.value);
+    // console.log(e.target.value);
     dispatch({ type: "CHANGETFUNCTION", tfvalue: e.target.value });
   };
 
@@ -223,7 +223,6 @@ const CSSTransitionsGenerator = (props) => {
               <p>Hover me</p>
             </div>
           </OutputBox>
-
         </ResultSection>
       </TranstionParentWrapper>
       <ResultCodeSection>

components/Tools/DevTools/GlassMorphism/GlassMorphismGenerator.js

@@ -43,8 +43,6 @@ const SlidersSection = styled.div`
   }
   ${({ theme }) => theme.mixins.checkbox};
 
-
-
   @media (min-width: 800px) {
     flex: 1 0 fill;
     align-items: stretch;
@@ -145,7 +143,7 @@ const CSSProps = styled.div`
   border-radius: 5px;
   font-family: var(--font-mono);
   background-color: ${({ theme }) => theme.shadeBackcard};
-  font-size: var(--fz-sm);  
+  font-size: var(--fz-sm);
 
   @media (min-width: 800px) {
     font-size: var(--fz-lg);
@@ -154,8 +152,6 @@ const CSSProps = styled.div`
   }
 `;
 
-
-
 const GlassMorphismGenerator = () => {
   const HexToRGBobj = (hex) => {
     return {
@@ -176,7 +172,7 @@ const GlassMorphismGenerator = () => {
   const onSelectFile = useCallback((file) => {
     // generating ObjectURL for input image to preview
     const objectUrl = URL.createObjectURL(file);
-    console.log(objectUrl);
+    // console.log(objectUrl);
     setBgImage(objectUrl);
   }, []);
 
@@ -188,8 +184,6 @@ const GlassMorphismGenerator = () => {
     ];
   };
 
-
-
   const filter = [];
 
   const finalButtons = [
@@ -207,9 +201,9 @@ const GlassMorphismGenerator = () => {
 
   useEffect(() => {
     setRGBColor(() => HexToRGBobj(theme.contrast));
-    console.log(RGBColor)
-    console.log(theme.contrast)
-  }, [theme])
+    // console.log(RGBColor);
+    // console.log(theme.contrast);
+  }, [theme]);
 
   return (
     <StyledOuterDiv>
@@ -289,7 +283,7 @@ const GlassMorphismGenerator = () => {
                 <input
                   type="file"
                   onChange={(e) => {
-                    console.log(e.target.files);
+                    // console.log(e.target.files);
                     if (!e.target.files || e.target.files.length === 0) {
                       setBgImage(null);
                       return;