feat(ui): Added theming support (#150)

* Commited first draft to theming in kopia. - Changed variants of buttons to unify the look and feel - Added support for themes specified in Theme.css - Added a new dependency "react-select" for selecting themes. * Minor changes. Select component now shows the correct color. * Updated bootstrap to 5.2.3. Removed bootstrap-dark from dependencies. The current theme is now synchronized with the react select component. * Added some minor code refactorings. This PR comes with the following fixes: - Pastel theme should now be darker - Added a preference tab - Font size of the selector has been reduced - Fixed css - Moved AppContext under src/contexts - Renamed themes to provide backwards compatibility * - Fixed byte representation - Added a darker background for the theme "dark" - Added stripes back to the tables - Moved css files in src/css - Removed the Themeselector as it now implemented in PreferencesView * - Fixed empty constructor in PreferencesView * Fixed some colors and the policy editor. The editor should now have the correct theme settings. Moved index.css to css folder. * Resolved merge conflict * Changed method redirect back to its original state * Minor fixes to the color settings. Tables should not be readable in dark mode --------- Co-authored-by: Christoph Anderson <[email protected]>
kopia · Jul 14, 2023 · ed223af · ed223af
1 parent f827689
commit ed223af
Show file tree

Hide file tree

Showing 25 changed files with 996 additions and 484 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,13 +6,14 @@
     "@fortawesome/free-regular-svg-icons": "^6.2.0",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "bootstrap-dark-5": "^1.1.3",
+    "bootstrap": "^5.2.3",
     "http-proxy-middleware": "^2.0.6",
     "moment": "^2.29.3",
     "react": "^18.2.0",
     "react-bootstrap": "^2.5.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^5.3.0",
+    "react-select": "^5.7.2",
     "react-table": "^7.8.0"
   },
   "scripts": {

diff --git a/src/App.css b/src/App.css
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,11 +1,10 @@
+import 'bootstrap/dist/css/bootstrap.min.css';
+import './css/Theme.css';
+import './css/App.css';
 import axios from 'axios';
-import 'bootstrap-dark-5/dist/css/bootstrap-nightshade.min.css';
-import React, { Component } from 'react';
-import Container from 'react-bootstrap/Container';
-import Nav from 'react-bootstrap/Nav';
-import Navbar from 'react-bootstrap/Navbar';
+import { React, Component } from 'react';
+import { Navbar, Nav, Container } from 'react-bootstrap';
 import { BrowserRouter as Router, NavLink, Redirect, Route, Switch } from 'react-router-dom';
-import './App.css';
 import { BeginRestore } from './BeginRestore';
 import { DirectoryObject } from "./DirectoryObject";
 import { PoliciesTable } from "./PoliciesTable";
@@ -16,8 +15,8 @@ import { TaskDetails } from './TaskDetails';
 import { TasksTable } from './TasksTable';
 import { NewSnapshot } from './NewSnapshot';
 import { PolicyEditorPage } from './PolicyEditorPage';
-import { ToggleDarkModeButton } from './ToggleDarkModeButton';
-import { AppContext } from './AppContext';
+import { PreferencesView } from './PreferencesView';
+import { AppContext } from './contexts/AppContext';
 import { UIPreferenceProvider } from './contexts/UIPreferencesContext';
 
 export default class App extends Component {
@@ -51,7 +50,6 @@ export default class App extends Component {
     }
 
     this.fetchInitialRepositoryDescription();
-
     this.taskSummaryInterval = window.setInterval(this.fetchTaskSummary, 5000);
   }
 
@@ -62,7 +60,7 @@ export default class App extends Component {
           repoDescription: result.data.description,
         });
       }
-    }).catch(error => { /* ignore */});
+    }).catch(error => { /* ignore */ });
   }
 
   fetchTaskSummary() {
@@ -115,9 +113,7 @@ export default class App extends Component {
                   </>
                   </NavLink>
                   <NavLink data-testid="tab-repo" className="nav-link" activeClassName="active" to="/repo">Repository</NavLink>
-                </Nav>
-                <Nav>
-                  <ToggleDarkModeButton />
+                  <NavLink data-testid="tab-preferences" className="nav-link" activeClassName="active" to="/preferences">Preferences</NavLink>
                 </Nav>
               </Navbar.Collapse>
             </Navbar>
@@ -138,8 +134,9 @@ export default class App extends Component {
                 <Route path="/tasks/:tid" component={TaskDetails} />
                 <Route path="/tasks" component={TasksTable} />
                 <Route path="/repo" component={RepoStatus} />
+                <Route path="/preferences" component={PreferencesView} />
                 <Route exact path="/">
-                  <Redirect to="/snapshots" />
+                  <Redirect to="/repo" />
                 </Route>
               </Switch>
             </Container>

diff --git a/src/DirectoryItems.jsx b/src/DirectoryItems.jsx
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { Link } from "react-router-dom";
 import MyTable from './Table';
 import { objectLink, rfc3339TimestampForDisplay, sizeWithFailures } from './uiutil';
+import { UIPreferencesContext } from './contexts/UIPreferencesContext';
 
 function objectName(name, typeID) {
     if (typeID === "d") {
@@ -33,6 +34,7 @@ function directoryLinkOrDownload(x) {
 
 export class DirectoryItems extends Component {
     render() {
+        const { bytesStringBase2 } = this.context;
         const columns = [{
             id: "name",
             Header: 'Name',
@@ -49,7 +51,7 @@ export class DirectoryItems extends Component {
             accessor: x => sizeInfo(x),
             Header: "Size",
             width: 100,
-            Cell: x => sizeWithFailures(x.cell.value, x.row.original.summ),
+            Cell: x => sizeWithFailures(x.cell.value, x.row.original.summ, bytesStringBase2),
         }, {
             id: "files",
             accessor: "summ.files",
@@ -65,3 +67,4 @@ export class DirectoryItems extends Component {
         return <MyTable data={this.props.items} columns={columns} />;
     }
 }
+DirectoryItems.contextType = UIPreferencesContext
diff --git a/src/EstimateResults.jsx b/src/EstimateResults.jsx
@@ -7,7 +7,8 @@ import Button from 'react-bootstrap/Button';
 import Spinner from 'react-bootstrap/esm/Spinner';
 import Form from 'react-bootstrap/Form';
 import { TaskLogs } from './TaskLogs';
-import { cancelTask, redirectIfNotConnected, sizeDisplayName } from './uiutil';
+import { cancelTask, redirect, sizeDisplayName } from './uiutil';
+import { UIPreferencesContext } from './contexts/UIPreferencesContext';
 
 export class EstimateResults extends Component {
     constructor() {
@@ -55,7 +56,7 @@ export class EstimateResults extends Component {
                 this.interval = null;
             }
         }).catch(error => {
-            redirectIfNotConnected(error);
+            redirect(error);
             this.setState({
                 error,
                 isLoading: false
@@ -87,6 +88,7 @@ export class EstimateResults extends Component {
 
     render() {
         const { task, isLoading, error } = this.state;
+        const { bytesStringBase2 } = this.context
         if (error) {
             return <p>{error.message}</p>;
         }
@@ -97,20 +99,21 @@ export class EstimateResults extends Component {
 
         return <>
             {task.counters && <Form.Text className="estimateResults">
-                {this.taskStatusDescription(task)} Bytes: <b>{sizeDisplayName(task.counters["Bytes"]?.value)}</b> (<b>{sizeDisplayName(task.counters["Excluded Bytes"]?.value)}</b> excluded)
+                {this.taskStatusDescription(task)} Bytes: <b>{sizeDisplayName(task.counters["Bytes"]?.value, bytesStringBase2)}</b> (<b>{sizeDisplayName(task.counters["Excluded Bytes"]?.value, bytesStringBase2)}</b> excluded)
                 Files: <b>{task.counters["Files"]?.value}</b> (<b>{task.counters["Excluded Files"]?.value}</b> excluded)
                 Directories: <b>{task.counters["Directories"]?.value}</b> (<b>{task.counters["Excluded Directories"]?.value}</b> excluded)
                 Errors: <b>{task.counters["Errors"]?.value}</b> (<b>{task.counters["Ignored Errors"]?.value}</b> ignored)
-                </Form.Text>
+            </Form.Text>
             }
-                    {task.status === "RUNNING" && <>
-                            &nbsp;<Button size="sm" variant="light" onClick={() => cancelTask(task.id)} ><FontAwesomeIcon icon={faStopCircle} color="red" /> Cancel </Button>
-                        </>}
-                    {this.state.showLog ? <>
-                        <Button size="sm" variant="light" onClick={() => this.setState({ showLog: false })}><FontAwesomeIcon icon={faChevronCircleUp} /> Hide Log</Button>
-                        <TaskLogs taskID={this.taskID(this.props)} />
-                    </> : <Button size="sm" variant="light" onClick={() => this.setState({ showLog: true })}><FontAwesomeIcon icon={faChevronCircleDown} /> Show Log</Button>}
+            {task.status === "RUNNING" && <>
+                &nbsp;<Button size="sm" variant="light" onClick={() => cancelTask(task.id)} ><FontAwesomeIcon icon={faStopCircle} color="red" /> Cancel </Button>
+            </>}
+            {this.state.showLog ? <>
+                <Button size="sm" variant="light" onClick={() => this.setState({ showLog: false })}><FontAwesomeIcon icon={faChevronCircleUp} /> Hide Log</Button>
+                <TaskLogs taskID={this.taskID(this.props)} />
+            </> : <Button size="sm" variant="light" onClick={() => this.setState({ showLog: true })}><FontAwesomeIcon icon={faChevronCircleDown} /> Show Log</Button>}
         </>
             ;
     }
 }
+EstimateResults.contextType = UIPreferencesContext