Merge pull request #29 from oslabs-beta/feature/garrett

Feature/garrett

Author: garrettlchow

src/app/App.tsx

@@ -2,19 +2,16 @@ import React from 'react';
 import { MemoryRouter as Router } from 'react-router-dom';
 import MainContainer from './containers/MainContainer';
 import { Toaster } from 'react-hot-toast';
-
-/*
-  'currentTab' is the current active tab within Google Chrome.
-  This is used to decide what tab Reactime should be monitoring. This can be "locked" currentTabInApp is the current active tab within Reactime (Map, Performance, History, etc).
-  This is used to determine the proper tutorial to render when How To button is pressed.
-*/
+import { ThemeProvider } from './ThemeProvider';
 
 function App(): JSX.Element {
   return (
-    <Router>
-      <Toaster />
-      <MainContainer />
-    </Router>
+    <ThemeProvider>
+      <Router>
+        <Toaster />
+        <MainContainer />
+      </Router>
+    </ThemeProvider>
   );
 }
 

src/app/FrontendTypes.ts

@@ -44,7 +44,6 @@ export interface BarStackProp {
   currentTab?: string;
 }
 
-// On-hover data for BarGraph/BarGraphComparison.tsx
 export interface TooltipData {
   bar: SeriesPoint<snapshot>;
   key: string;
@@ -105,9 +104,6 @@ export interface BarGraphComparisonAction {
 }
 
 export interface ActionContainerProps {
-  actionView: boolean;
-  setActionView: React.Dispatch<React.SetStateAction<boolean>>;
-  toggleActionContainer: () => void;
   snapshots: any;
   currLocation: any;
 }
@@ -223,15 +219,13 @@ export interface ActionProps {
   last: boolean;
   index: number;
   sliderIndex: number;
-  // dispatch: (a: { type: string; payload: unknown }) => void;
   displayName: string;
   componentName: string;
   componentData: { actualDuration: number } | undefined;
   routePath: unknown;
   state?: Record<string, unknown>;
   viewIndex: number | undefined;
   isCurrIndex: boolean;
-  handleOnkeyDown: (e: KeyboardEvent, i: number) => void;
 }
 
 export interface DiffRouteProps {
@@ -315,7 +309,6 @@ export interface LinkControlProps {
 }
 
 export interface ControlStyles {
-  //fontSize: string;
   padding: string;
 }
 
@@ -333,7 +326,6 @@ export interface DropDownStyle {
 export interface Node {
   children?: Node[];
   name?: string;
-  // other properties here
 }
 
 export interface LinkComponent {

src/app/ThemeProvider.tsx

@@ -0,0 +1,39 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+
+const ThemeContext = createContext({
+  isDark: false,
+  toggleTheme: () => {},
+});
+
+export const ThemeProvider = ({ children }) => {
+  const [isDark, setIsDark] = useState(false);
+
+  // Check for system preference on mount
+  useEffect(() => {
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    setIsDark(prefersDark);
+  }, []);
+
+  // Update body class when theme changes
+  useEffect(() => {
+    if (isDark) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  }, [isDark]);
+
+  const toggleTheme = () => {
+    setIsDark((prev) => !prev);
+  };
+
+  return <ThemeContext.Provider value={{ isDark, toggleTheme }}>{children}</ThemeContext.Provider>;
+};
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+};

src/app/components/Actions/Action.tsx

@@ -7,17 +7,8 @@ import { useDispatch } from 'react-redux';
 const Action = (props: ActionProps): JSX.Element => {
   const dispatch = useDispatch();
 
-  const {
-    selected,
-    last,
-    index,
-    sliderIndex,
-    displayName,
-    componentData,
-    viewIndex,
-    isCurrIndex,
-    handleOnkeyDown,
-  } = props;
+  const { selected, last, index, sliderIndex, displayName, componentData, viewIndex, isCurrIndex } =
+    props;
 
   const cleanTime = (): string => {
     if (!componentData || !componentData.actualDuration) {
@@ -64,7 +55,6 @@ const Action = (props: ActionProps): JSX.Element => {
     <div className='individual-action'>
       <div
         // @ts-ignore
-        onKeyDown={(e): void => handleOnkeyDown(e, viewIndex)}
         className={selected || last ? 'action-component selected' : 'action-component'}
         onClick={() => {
           dispatch(changeView(index));

src/app/components/Actions/DropDown.tsx

@@ -21,6 +21,7 @@ const DropDown = ({
     <div className='dropdown-container'>
       <Select
         placeholder='Select Hook'
+        classNamePrefix='react-select'
         onChange={handleChange}
         options={options}
         value={options.find((option) => option.value === dropdownSelection)}

src/app/components/Actions/RecordButton.tsx

@@ -1,37 +1,41 @@
 import React from 'react';
 import { Switch } from '@mui/material';
+import ThemeToggle from './ThemeToggle';
 
 const RecordButton = ({ isRecording, onToggle }) => {
   return (
     <div className='record-button-container'>
-      <div className='record-label'>
-        <div
-          className={`record-icon ${isRecording ? 'recording' : ''}`}
-          style={{
-            backgroundColor: isRecording ? '#ef4444' : '#9ca3af',
-            transition: 'background-color 0.3s ease',
+      <div className='record-controls'>
+        <div className='record-label'>
+          <div
+            className={`record-icon ${isRecording ? 'recording' : ''}`}
+            style={{
+              backgroundColor: isRecording ? '#ef4444' : '#9ca3af',
+              transition: 'background-color 0.3s ease',
+            }}
+          />
+          <span>Record</span>
+        </div>
+        <Switch
+          checked={isRecording}
+          onChange={onToggle}
+          sx={{
+            '& .MuiSwitch-switchBase': {
+              color: '#9ca3af',
+            },
+            '& .MuiSwitch-track': {
+              backgroundColor: '#e5e7eb',
+            },
+            '& .MuiSwitch-switchBase.Mui-checked': {
+              color: '#374151',
+            },
+            '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
+              backgroundColor: '#0284c7',
+            },
           }}
         />
-        <span>Record</span>
       </div>
-      <Switch
-        checked={isRecording}
-        onChange={onToggle}
-        sx={{
-          '& .MuiSwitch-switchBase': {
-            color: '#9ca3af',
-          },
-          '& .MuiSwitch-track': {
-            backgroundColor: '#e5e7eb',
-          },
-          '& .MuiSwitch-switchBase.Mui-checked': {
-            color: '#374151',
-          },
-          '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
-            backgroundColor: '#0284c7',
-          },
-        }}
-      />
+      <ThemeToggle />
     </div>
   );
 };

src/app/components/Actions/ThemeToggle.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Moon, Sun } from 'lucide-react';
+import { useTheme } from '../../ThemeProvider';
+
+const ThemeToggle = () => {
+  const { isDark, toggleTheme } = useTheme();
+
+  return (
+    <button
+      className={`theme-toggle ${isDark ? 'dark' : ''}`}
+      onClick={toggleTheme}
+      aria-label={`Switch to ${isDark ? 'light' : 'dark'} mode`}
+    >
+      <div className='theme-toggle-icons'>
+        <Moon className='theme-toggle-icon moon' />
+        <Sun className='theme-toggle-icon sun' />
+      </div>
+      <div className='theme-toggle-slider' />
+    </button>
+  );
+};
+
+export default ThemeToggle;

src/app/components/StateRoute/AxMap/axLinkControls.tsx

@@ -40,8 +40,8 @@ const AxLinkControls = ({
           onChange={(e) => setOrientation(e.target.value)}
           value={orientation}
         >
-          <option value='vertical'>vertical</option>
-          <option value='horizontal'>horizontal</option>
+          <option value='vertical'>Vertical</option>
+          <option value='horizontal'>Horizontal</option>
         </select>
       </div>
 
@@ -53,10 +53,10 @@ const AxLinkControls = ({
           onChange={(e) => setLinkType(e.target.value)}
           value={linkType}
         >
-          <option value='diagonal'>diagonal</option>
-          <option value='step'>step</option>
-          <option value='curve'>curve</option>
-          <option value='line'>line</option>
+          <option value='diagonal'>Diagonal</option>
+          <option value='step'>Step</option>
+          <option value='curve'>Curve</option>
+          <option value='line'>Line</option>
         </select>
       </div>
 

src/app/components/StateRoute/ComponentMap/ToolTipDataDisplay.tsx

@@ -7,7 +7,7 @@ const ToolTipDataDisplay = ({ data }) => {
   const jsonTheme = {
     scheme: 'custom',
     base00: 'transparent',
-    base0B: '#1f2937', // dark navy for strings
+    base0B: '#14b8a6', // dark navy for strings
     base0D: '#60a5fa', // Keys
     base09: '#f59e0b', // Numbers
     base0C: '#EF4444', // Null values

src/app/components/StateRoute/History.tsx

@@ -98,7 +98,7 @@ function History(props: Record<string, unknown>): JSX.Element {
       return changedState;
     }
 
-    if (index === 0) return 'Initial State';
+    if (index === 0) return '<span class="initial-state">Initial State</span>';
 
     // Add null checks for snapshots
     if (!snapshots || !snapshots[index] || !snapshots[index - 1]) {
@@ -111,7 +111,7 @@ function History(props: Record<string, unknown>): JSX.Element {
         statelessCleaning(snapshots[index]),
       );
 
-      if (!delta) return 'No state changes';
+      if (!delta) return '<span class="no-changes">No State Changes</span>';
 
       const changedState = findStateChangeObj(delta);
       return changedState.length > 0 ? formatters.html.format(changedState[0]) : 'No state changes';