more bin page themeing

src/bin/BinYards.tsx

@@ -112,6 +112,7 @@ const useStyles = makeStyles((theme: Theme) => {
     },
     tab: {
       ...parentTab,
+      color: theme.palette.text.primary
     },
     smallTab: {
       ...parentTab,

src/common/DraggableTabs.tsx

@@ -1,4 +1,4 @@
-import { Tab, Tabs, TabsProps } from "@mui/material";
+import { Tabs, TabsProps } from "@mui/material";
 import React, { useEffect, useState, useRef } from "react";
 
 interface DraggableTabsProps extends TabsProps {
@@ -17,7 +17,6 @@ export default function DraggableTabs(props: DraggableTabsProps) {
 
   useEffect(() => {
     const newOrder = initialChildren.map((_, index) => index);
-    console.log("Children updated. New tabOrder:", newOrder);
     setTabOrder(newOrder);
     tabRefs.current = new Array(newOrder.length).fill(null); // Initialize refs
   }, [initialChildren.length]);
@@ -40,7 +39,6 @@ export default function DraggableTabs(props: DraggableTabsProps) {
   const endTabs = flattenNodes(endNode, "end");
 
   const handleDragStart = (e: React.DragEvent<HTMLDivElement>, index: number) => {
-    console.log("Drag started at index:", index);
     e.dataTransfer.setData("text/plain", index.toString());
     e.dataTransfer.effectAllowed = "move";
   };
@@ -49,7 +47,6 @@ export default function DraggableTabs(props: DraggableTabsProps) {
     e.preventDefault();
     e.dataTransfer.dropEffect = "move";
     setHoveredIndex(index); // Update hovered index
-    console.log("Dragging over index:", index);
   };
 
   const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
@@ -57,10 +54,6 @@ export default function DraggableTabs(props: DraggableTabsProps) {
     const draggedIndex = Number(e.dataTransfer.getData("text/plain"));
     const dropIndex = hoveredIndex; // Use the last hovered index
 
-    console.log("Dragged from index:", draggedIndex);
-    console.log("Dropped at index:", dropIndex);
-    console.log("Current tabOrder before:", tabOrder);
-
     if (dropIndex === -1) {
       console.log("Drop skipped: no valid drop target");
       return;
@@ -70,7 +63,6 @@ export default function DraggableTabs(props: DraggableTabsProps) {
       const newOrder = [...tabOrder];
       const [draggedItem] = newOrder.splice(draggedIndex, 1);
       newOrder.splice(dropIndex, 0, draggedItem);
-      console.log("New tabOrder after:", newOrder);
       setTabOrder(newOrder);
     } else {
       console.log("Drop skipped: invalid indices or same position");
@@ -78,15 +70,9 @@ export default function DraggableTabs(props: DraggableTabsProps) {
     setHoveredIndex(-1); // Reset hovered index
   };
 
-  const handleDragEnd = (e: React.DragEvent<HTMLDivElement>) => {
-    console.log("Drag ended");
-    setHoveredIndex(-1); // Reset on drag end
-  };
-
   const enhancedChildren = React.Children.map(initialChildren, (child, originalIndex) => {
     if (React.isValidElement(child)) {
       const currentIndex = tabOrder.indexOf(originalIndex);
-      console.log("Original index:", originalIndex, "Current index:", currentIndex);
       return (
         <div
           ref={(el) => (tabRefs.current[currentIndex] = el)} // Assign ref to each tab
@@ -94,7 +80,6 @@ export default function DraggableTabs(props: DraggableTabsProps) {
           onDragStart={(e) => handleDragStart(e, currentIndex)}
           onDragOver={(e) => handleDragOver(e, currentIndex)}
           onDrop={handleDrop} // Handle drop on individual tabs
-          onDragEnd={handleDragEnd}
         >
           {React.cloneElement(child)}
         </div>
@@ -103,16 +88,8 @@ export default function DraggableTabs(props: DraggableTabsProps) {
     return child;
   }) || [];
 
-  useEffect(() => {
-    console.log(hoveredIndex)
-  }, [hoveredIndex])
-
   const orderedChildren = tabOrder.map((index) => enhancedChildren[index]);
   const allTabs = [...startTabs, ...orderedChildren, ...endTabs];
 
-  useEffect(() => {
-    console.log("Current tab order:", tabOrder);
-  }, [tabOrder]);
-
   return <Tabs {...tabsProps}>{allTabs}</Tabs>;
 }

src/pages/Bins.tsx

@@ -18,6 +18,7 @@ import {
   ImageList,
   ImageListItem,
   InputLabel,
+  lighten,
   ListItemIcon,
   ListItemText,
   Menu,
@@ -83,6 +84,8 @@ import BinYards from "bin/BinYards";
 // import { useHistory } from "react-router";
 
 const useStyles = makeStyles((theme: Theme) => {
+  const themeType = getThemeType();
+  const accordionBg = themeType === "light" ? theme.palette.background.paper : darken(theme.palette.background.paper, 0.2)
   return ({
     "@keyframes pulsate": {
       to: {
@@ -116,7 +119,7 @@ const useStyles = makeStyles((theme: Theme) => {
       }
     },
     accordion: {
-      background: darken(theme.palette.background.paper, 0.4)
+      background: accordionBg
     }
   });
 });

src/theme/theme.ts

@@ -28,7 +28,7 @@ function options(themeType: "light" | "dark"): ThemeOptions {
   const signature = getSignatureColour();
   const accent = getSignatureAccentColour();
   const highlight = themeType === "light" ? "black" : "white";
-  const bg = generateBackgroundShades(themeType)
+  const bg = generateBackgroundShades(themeType);
   return {
     cssVariables: true,
     zIndex: {
@@ -211,7 +211,7 @@ function options(themeType: "light" | "dark"): ThemeOptions {
         styleOverrides: {
           root: {
             '& .MuiTouchRipple-root': {
-              color: highlight, 
+              color: highlight,
             },
             '&:hover': {
               color: highlight
@@ -285,5 +285,5 @@ function options(themeType: "light" | "dark"): ThemeOptions {
       //   },
       // },
     }
-  } as ThemeOptions;
+  } as unknown as ThemeOptions;
 }