Finalizing feature: clean-up and added comments

src/components/start/index.jsx

@@ -201,20 +201,6 @@ export const SidePane = () => {
     setPnstate(tmp);
   }, [setting, sidepane]);
 
-  // useEffect(() => {
-  //   setAnimClick(false);
-  // }, [animClick]);
-
-  // const actionsettingsClick = () => {
-  //   setAnimClick(true);
-  //   setTimeout(() => {
-  //     setAnimClick(false);
-  //   }, 500);
-  // };
-  // const [panel, panelHide] = useState(true);
-  // if (panel) {
-  //   return <div>banhide</div>;
-  // }
   return (
     <div
       className="sidePane dpShad"
@@ -275,6 +261,7 @@ export const SidePane = () => {
           <Battery pct />
         </div>
         <>
+          {/* new settings icon return function created in general.jsx */}
           <SettingsSide click="SETTINGS" payload="togg" />
         </>
       </div>

src/components/start/sidepane.scss

@@ -188,7 +188,7 @@ body[data-theme="dark"] .bandpane {
       }
     }
   }
-
+  // also added new sass codes here -just flex-basis
   .bottomBar {
     box-sizing: border-box;
     border-top: 1px solid var(--bg4);
@@ -207,12 +207,14 @@ body[data-theme="dark"] .bandpane {
         background: var(--bg4);
       }
     }
-
+    // settings-icon animation when clicked
     .animator {
       animation: rotate 500ms ease-in-out;
     }
   }
 }
+
+// actual css animation code
 @keyframes rotate {
   0% {
     rotate: (0deg);

src/utils/general.jsx

@@ -3,6 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useSelector, useDispatch } from "react-redux";
 import "./general.scss";
 import { LazyLoadImage } from "react-lazy-load-image-component";
+// imported new react-icon gear-icon
 import { IoSettingsOutline } from "react-icons/io5";
 import * as FaIcons from "@fortawesome/free-solid-svg-icons";
 import * as FaRegIcons from "@fortawesome/free-regular-svg-icons";
@@ -22,14 +23,12 @@ String.prototype.count = function (c) {
   for (i; i < this.length; i++) if (this[i] == c) result++;
   return result;
 };
-
+//new function that returns setting icon at the sidepane with functionalities
 export const SettingsSide = (props) => {
   const [animClick, setAnimClick] = useState(false);
-  // const [panelHide, setPanelHide] = useState(false);
   const dispatch = useDispatch();
   const clickDisp = () => {
     setAnimClick(true);
-    // setPanelHide(true);
     setTimeout(() => {
       setAnimClick(false);
       dispatch({