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

Feature/garrett

Author: garrettlchow

demo-app/src/client/Components/Home.tsx

@@ -12,9 +12,10 @@ function Home(): JSX.Element {
       style={{
         backgroundColor: theme.backgroundColor,
         color: theme.textColor,
+        boxShadow: `0 4px 6px ${theme.backgroundColor === '#1a202c' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'}`,
       }}
     >
-      <h2>REACTIME - DEMO APP</h2>
+      <h2 style={{ color: theme.textColor }}>REACTIME - DEMO APP</h2>
 
       {user ? (
         <div>
@@ -24,10 +25,6 @@ function Home(): JSX.Element {
             style={{
               backgroundColor: theme.primaryColor,
               color: theme.backgroundColor,
-              padding: '8px 16px',
-              border: 'none',
-              borderRadius: '4px',
-              cursor: 'pointer',
             }}
           >
             Logout
@@ -41,10 +38,6 @@ function Home(): JSX.Element {
             style={{
               backgroundColor: theme.primaryColor,
               color: theme.backgroundColor,
-              padding: '8px 16px',
-              border: 'none',
-              borderRadius: '4px',
-              cursor: 'pointer',
             }}
           >
             Login as Test User
@@ -54,24 +47,14 @@ function Home(): JSX.Element {
             style={{
               backgroundColor: theme.secondaryColor,
               color: theme.backgroundColor,
-              padding: '8px 16px',
-              border: 'none',
-              borderRadius: '4px',
               marginLeft: '8px',
-              cursor: 'pointer',
             }}
           >
             Login as Admin
           </button>
         </div>
       )}
-
-      <p>
-        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
-        ut labore et dolore magna aliqua..."
-      </p>
     </div>
   );
 }
-
 export default Home;

demo-app/src/client/Components/Nav.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import ThemeToggle from './ThemeToggle';
 
 function Nav(): JSX.Element {
   return (
@@ -16,6 +17,7 @@ function Nav(): JSX.Element {
       <Link className='link' to='/reducer'>
         Reducer Counter
       </Link>
+      <ThemeToggle />
     </div>
   );
 }

demo-app/src/client/Components/ThemeToggle.tsx

@@ -3,23 +3,19 @@ import { useTheme } from '../../contexts/ThemeContext';
 
 const ThemeToggle = (): JSX.Element => {
   const { theme, toggleTheme } = useTheme();
+  const isDark = theme.backgroundColor === '#1a202c';
 
   return (
     <button
       onClick={toggleTheme}
+      className='theme-toggle'
       style={{
-        backgroundColor: theme.primaryColor,
-        color: theme.backgroundColor,
-        padding: '8px 16px',
-        border: 'none',
-        borderRadius: '4px',
-        cursor: 'pointer',
-        position: 'fixed',
-        top: '10px',
-        right: '10px',
+        backgroundColor: theme.backgroundColor,
+        color: theme.textColor,
+        border: `2px solid ${theme.primaryColor}`,
       }}
     >
-      Toggle Theme
+      {isDark ? '☀️ Light Mode' : '🌙 Dark Mode'}
     </button>
   );
 };

demo-app/src/client/Router.tsx

@@ -1,6 +1,5 @@
 // src/client/Router.tsx
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { ThemeProvider } from '../contexts/ThemeContext';
@@ -12,7 +11,6 @@ import Buttons from './Components/Buttons';
 import ReducerCounter from './Components/ReducerCounter';
 import FunctionalReducerCounter from './Components/FunctionalReducerCounter';
 import FunctionalStateCounter from './Components/FunctionalStateCounter';
-import ThemeToggle from './Components/ThemeToggle';
 
 const domNode = document.getElementById('root');
 if (!domNode) throw new Error('Root element not found');
@@ -48,7 +46,6 @@ root.render(
   <AuthProvider>
     <ThemeProvider>
       <BrowserRouter>
-        <ThemeToggle />
         <Nav />
         <Routes>
           <Route path='/' element={<Home />} />