Merge pull request #18 from Ritika8081/main

updated code for theme and navbar theme icon.

README.md

@@ -8,18 +8,7 @@ Chords is an application based on Web Serial connection, you can connect boards
 
 - **Connection**: Experience a smooth connection/disconnection with board in single click.
 - **Real-time Visualization**: Visualize incoming data without any jitter from the board in real-time on SmoothieCharts.
-- **Recording**: Record the signals data in csv files, multiple instances can be recorded and downloaded as zip of csv's.
-- **Bi Directional Communication**: We can also write data in the board, the table below shows what we recieve if sent data is:
-<div>
-
-| Sent Data | Data Received | Value                 |
-| :-------: | ------------- | --------------------- |
-|    'c'    | Channel Count | 6                     |
-|    'n'    | Board Name    | "Arduino"             |
-|    's'    | Sampling Rate | {125, 250, 500, 1000} |
-|    'r'    | Resolution    | 10                    |
-
-</div>
+- **Recording**: Record the signals data and downloaded data in csv files.
 
 ## Compatible Browsers
 

src/components/Canvas.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { Pause, Play, Grid, List } from "lucide-react";
 import React, {
   useEffect,
   useRef,
@@ -199,6 +200,13 @@ const Canvas: React.FC<CanvasProps> = ({
     }
   }, [data, isChartInitialized, handleDataUpdate]);
 
+  // Updated to ensure colors are correctly applied when the theme changes
+  useEffect(() => {
+    if (isChartInitialized) {
+      updateChartColors(); // Apply the updated theme colors to the chart
+    }
+  }, [theme, isChartInitialized, updateChartColors]);
+
   useEffect(() => {
     const intervalId = setInterval(() => {
       if (batchBuffer.length > 0 && isDisplay) {
@@ -275,6 +283,27 @@ const Canvas: React.FC<CanvasProps> = ({
     shouldAutoScale,
     getChannelColor,
   ]);
+  useEffect(() => {
+    const resizeCanvas = () => {
+      channels.forEach((channel, index) => {
+        const canvas = document.getElementById(
+          `smoothie-chart-${index + 1}`
+        ) as HTMLCanvasElement;
+
+        const parentDiv = canvas.parentElement;
+        if (parentDiv) {
+          canvas.height = parentDiv.offsetHeight - 2;
+          canvas.width = parentDiv.offsetWidth;
+        }
+      });
+    };
+
+    window.addEventListener("resize", resizeCanvas);
+
+    return () => {
+      window.removeEventListener("resize", resizeCanvas);
+    };
+  }, [channels]);
 
   useEffect(() => {
     if (isChartInitialized) {
@@ -338,18 +367,14 @@ const Canvas: React.FC<CanvasProps> = ({
             return (
               <div
                 key={index}
-                className={`flex flex-col w-full relative h-full`}
+                className={`border border-secondary-foreground w-full ${
+                  isGridView ? "h-[40vh]" : "h-[20vh]"
+                } relative`}
               >
-                <div
-                  className={`border border-secondary-foreground w-full ${
-                    isGridView ? "h-[40vh]" : "h-[20vh]"
-                  } relative`}
-                >
-                  <canvas
-                    id={`smoothie-chart-${index + 1}`}
-                    className="w-full h-full"
-                  />
-                </div>
+                <canvas
+                  id={`smoothie-chart-${index + 1}`}
+                  className="w-full h-full"
+                />
               </div>
             );
           }

src/components/Connection.tsx

@@ -776,7 +776,7 @@ const Connection: React.FC<ConnectionProps> = ({
                       onClick={saveData}
                       disabled={!hasData}
                     >
-                      <Download size={16} className="mr-2" />
+                      <Download size={16} className="mr-1" />
                     </Button>
                   </TooltipTrigger>
                 )}
@@ -796,7 +796,7 @@ const Connection: React.FC<ConnectionProps> = ({
                       onClick={saveData} // Adjust functionality for saving multiple datasets if needed
                       disabled={!hasData}
                     >
-                      <Download size={16} className="mr-2" />
+                      <Download size={16} className="mr-1" />
                       <p className="text-lg">{datasets}</p>
                     </Button>
                     <Button

src/components/LandingComp/HeadSection.tsx

@@ -1,4 +1,5 @@
 "use client";
+
 import React, { useState, useEffect } from "react";
 import Link from "next/link";
 import { Button } from "../../components/ui/button";
@@ -7,13 +8,30 @@ import Image from "next/image";
 import { useTheme } from "next-themes";
 import Chords from "./Chords";
 
-const HeadSection = () => {
-  const { theme } = useTheme();
+const HeadSection: React.FC = () => {
+  const { resolvedTheme } = useTheme();
   const [isImageLoaded, setIsImageLoaded] = useState(false);
+  const [mounted, setMounted] = useState(false); // Ensures the theme detection works after mounting
 
+  // Set mounted to true after the client has mounted
   useEffect(() => {
-    setIsImageLoaded(false); // Reset loading state on theme change
-  }, [theme]);
+    setMounted(true);
+  }, []);
+
+  // Preload dark and light images to avoid delay on theme switch
+  const preloadImage = (src: string) => {
+    const img = new window.Image();
+    img.src = src;
+  };
+
+  // Preload images on component mount
+  useEffect(() => {
+    preloadImage("./assets/dark/HeroSignalsClean.png");
+    preloadImage("./assets/light/HeroSignalsClean.png");
+  }, []);
+
+  // If the component is not mounted yet, avoid rendering to prevent flickering
+  if (!mounted) return null;
 
   return (
     <>
@@ -22,7 +40,7 @@ const HeadSection = () => {
           <div className="flex flex-col justify-center gap-8 items-center">
             <div>
               <h1 className="lg:leading-tighter text-[1.90rem] font-bold tracking-tighter sm:text-5xl md:text-6xl xl:text-[3.5rem] 2xl:text-[4rem] text-center">
-                <span className="text-7xl">Tune Into Your EXG Data </span>
+                <span className="text-7xl">Tune Into Your EXG Data</span>
                 <br /> With <Chords />
               </h1>
             </div>
@@ -32,7 +50,7 @@ const HeadSection = () => {
                   <Button>
                     <Image
                       src={
-                        theme === "dark"
+                        resolvedTheme === "dark"
                           ? "./assets/dark/favicon.ico"
                           : "./assets/light/favicon.ico"
                       }
@@ -71,13 +89,14 @@ const HeadSection = () => {
         {/* Image */}
         <Image
           src={
-            theme === "dark"
+            resolvedTheme === "dark"
               ? "./assets/dark/HeroSignalsClean.png"
               : "./assets/light/HeroSignalsClean.png"
           }
           alt="Plotter"
           width={1000}
           height={1000}
+          priority // Use priority to preload the image
           className={`mx-auto mt-20 rounded transition-opacity duration-300 ${
             isImageLoaded ? "opacity-100" : "opacity-0"
           }`}

src/components/Navbar.tsx

@@ -1,14 +1,30 @@
 "use client";
 
-import React from "react";
+import React, { useEffect, useState } from "react";
 import Link from "next/link";
 import { ModeToggle } from "./Theming/mode-toggle";
 import { GitHubLogoIcon } from "@radix-ui/react-icons";
 import { Button } from "./ui/button";
 import Contributors from "./Contributors";
 import { Badge } from "./ui/badge";
+import { useTheme } from "next-themes";
 
 const Navbar = () => {
+  const { theme, setTheme, systemTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  // To prevent hydration mismatch, we wait until the component is mounted
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return null; // Avoid rendering until the component is mounted
+  }
+
+  // Determine the current theme (dark/light)
+  const currentTheme = theme === "system" ? systemTheme : theme;
+
   return (
     <div>
       <div className="top-0 md:left-0 md:right-0 flex backdrop-blur-sm justify-center py-[10px] border-b items-center font-bold z-50">

src/components/Theming/mode-toggle.tsx

@@ -1,30 +1,21 @@
-"use client";
-
-import React, { useEffect } from "react";
-import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
 import { useTheme } from "next-themes";
-
+import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
 import { Button } from "@/components/ui/button";
 
 export function ModeToggle({
   className,
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) {
-  const { theme, setTheme } = useTheme();
-  const [mounted, setMounted] = React.useState(false);
+  const { theme, setTheme, systemTheme } = useTheme();
 
-  useEffect(() => {
-    setMounted(true);
-  }, []);
+  // Determine the current theme (dark/light)
+  const currentTheme = theme === "system" ? systemTheme : theme;
 
+  // Toggle between light and dark themes
   const toggleTheme = () => {
-    setTheme(theme === "dark" ? "light" : "dark");
+    setTheme(currentTheme === "dark" ? "light" : "dark");
   };
 
-  if (!mounted) {
-    return null;
-  }
-
   return (
     <div className={className} {...props}>
       <Button variant="ghost" size="sm" onClick={toggleTheme}>