feat(ui): Add dark/ligth themes and responsive design

pando85 · Jan 21, 2024 · 20a1419 · 20a1419
1 parent b97db66
commit 20a1419
Show file tree

Hide file tree

Showing 23 changed files with 3,593 additions and 1,534 deletions.
diff --git a/server/web/ui/package-lock.json b/server/web/ui/package-lock.json
diff --git a/server/web/ui/package.json b/server/web/ui/package.json
@@ -6,17 +6,24 @@
   "dependencies": {
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
+    "@forevolve/bootstrap-dark": "^4.0.0",
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@mui/icons-material": "^5.15.5",
     "@mui/material": "^5.15.5",
     "@mui/styles": "^5.15.5",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.6.5",
+    "bootstrap": "^4.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.21.3",
     "react-scripts": "5.0.1",
+    "reactstrap": "^9.2.2",
+    "sass": "^1.70.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -47,6 +54,7 @@
     "@types/node": "^20.11.5",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
+    "@types/sass": "^1.45.0",
     "typescript": "^5.3.3"
   }
 }
diff --git a/server/web/ui/public/index.html b/server/web/ui/public/index.html
@@ -27,7 +27,7 @@
     -->
     <title>Transcoder</title>
   </head>
-  <body>
+  <body class="bootstrap">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--

diff --git a/server/web/ui/public/robots.txt b/server/web/ui/public/robots.txt
diff --git a/server/web/ui/src/App.css b/server/web/ui/src/App.css
diff --git a/server/web/ui/src/App.tsx b/server/web/ui/src/App.tsx
@@ -1,10 +1,15 @@
 // App.tsx
 
 import React, { useState } from 'react';
-import { BrowserRouter as Router, Route, Routes, Navigate, Link } from 'react-router-dom';
-import { Visibility, VisibilityOff } from '@mui/icons-material';
 import JobTable from './JobTable';
-import './App.css';
+import useMedia from './hooks/useMedia';
+import Navigation from './Navbar';
+
+import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
+import { ThemeContext, themeName, themeSetting } from './contexts/ThemeContext';
+import { Visibility, VisibilityOff } from '@mui/icons-material';
+import { useLocalStorage } from './hooks/useLocalStorage';
+import { Theme, themeLocalStorageKey } from './Theme';
 
 const App: React.FC = () => {
   const [token, setToken] = useState<string>('');
@@ -32,60 +37,60 @@ const App: React.FC = () => {
     </div>
   );
 
+  const [userTheme, setUserTheme] = useLocalStorage<themeSetting>(themeLocalStorageKey, 'auto');
+  const browserHasThemes = useMedia('(prefers-color-scheme)');
+  const browserWantsDarkTheme = useMedia('(prefers-color-scheme: dark)');
+
+  let theme: themeName;
+  if (userTheme !== 'auto') {
+    theme = userTheme;
+  } else {
+    theme = browserHasThemes ? (browserWantsDarkTheme ? 'dark' : 'light') : 'light';
+  }
+
   return (
-    <Router>
-      <div className="tableContainer">
-        <header className="header">
-          <div className="logoContainer">
-            <div className="linkContainer">
-              <Link to="/" className="link">
-                <img src="/logo.svg" alt="Transcoder" className="logo" />
-                <div className="appNameContainer">
-                  <h1 className="appName">Transcoder</h1>
+    <ThemeContext.Provider
+      value={{ theme: theme, userPreference: userTheme, setTheme: (t: themeSetting) => setUserTheme(t) }}
+    >
+      <Theme />
+      <Router>
+        <div className="tableContainer">
+          <Navigation/>
+            {!showJobTable && (
+              <div className="centeredContainer">
+                <div className="auth-form">
+                  <form className="tokenInput" onSubmit={handleTokenSubmit}>
+                    <div className="field">
+                      <label className="is-label">Token</label>
+                      <div className="passwordInputContainer">
+                        <input
+                          className="passwordInput"
+                          type={showToken ? 'text' : 'password'}
+                          value={token}
+                          onChange={handleTokenInput}
+                        />
+                        <div className="passwordInputSuffix">
+                          {showToken ? (
+                            <VisibilityOff className="eyeIcon" onClick={handleToggleShowToken} />
+                          ) : (
+                            <Visibility className="eyeIcon" onClick={handleToggleShowToken} />
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                    <button className="btn btn-primary is-label" type="submit">Sign In</button>
+                  </form>
                 </div>
-              </Link>
-            </div>
-          </div>
-          <div className="navBar">
-            <nav className="navItems">
-              <Link to="/jobs" className="navItem">
-                Jobs
-              </Link>
-            </nav>
+              </div>
+            )}
+            <Routes>
+              <Route path="/" element={<Navigate to="/jobs" replace />} />
+              <Route path="/jobs" element={<Jobs />} />
+            </Routes>
           </div>
-        </header>
+      </Router>
+    </ThemeContext.Provider >
 
-        <div className="contentContainer">
-          {!showJobTable && (
-            <div className="centeredContainer">
-              <form className="modal" onSubmit={handleTokenSubmit}>
-                <p>Please enter your token:</p>
-                <div className="passwordInputContainer">
-                  <input
-                    className="passwordInput"
-                    type={showToken ? 'text' : 'password'}
-                    value={token}
-                    onChange={handleTokenInput}
-                  />
-                  <div className="passwordInputSuffix">
-                    {showToken ? (
-                      <VisibilityOff className="eyeIcon" onClick={handleToggleShowToken} />
-                    ) : (
-                      <Visibility className="eyeIcon" onClick={handleToggleShowToken} />
-                    )}
-                  </div>
-                </div>
-                <button type="submit">Submit</button>
-              </form>
-            </div>
-          )}
-          <Routes>
-            <Route path="/" element={<Navigate to="/jobs" replace />} />
-            <Route path="/jobs" element={<Jobs />} />
-          </Routes>
-        </div>
-      </div>
-    </Router>
   );
 };
 

diff --git a/server/web/ui/src/JobTable.css b/server/web/ui/src/JobTable.css
@@ -21,10 +21,6 @@
     margin-bottom: 20px;
 }
 
-.tableHeader {
-    padding: 12px;
-}
-
 .tableRow {
     cursor: pointer;
     transition: background-color 0.3s;