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.
kopia · Mar 30, 2023 · 7f43436 · 7f43436
1 parent 15cb257
commit 7f43436
Show file tree

Hide file tree

Showing 13 changed files with 577 additions and 131 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "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
@@ -4,6 +4,105 @@ html.loading {
 
 body {
   line-height: 1;
+  color: var(--text-color-body);
+  background-color: var(--background-color);
+}
+
+.options-select {
+  overflow: ellipsis
+}
+
+.navbar-light .navbar-nav .nav-link {
+  color: var(--text-color-nav);
+}
+
+.navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show>.nav-link {
+  color: var(--text-color-nav);
+}
+
+.btn {
+  color: var(--text-color);
+  margin-right: 5px;
+}
+
+.btn-primary {
+  background-color: var(--color-primary);
+  border-color: var(--color-primary);
+}
+
+.btn-secondary {
+  background-color: var(--color-secondary);
+  border-color: var(--color-secondary);
+}
+
+.btn-submit {
+  background-color: var(--color-submit);
+  border-color: var(--color-submit);
+}
+
+.btn-success {
+  background-color: var(--color-success);
+  border-color: var(--color-success);
+}
+
+.btn-warning {
+  background-color: var(--color-warning);
+  border-color: var(--color-primary);
+}
+
+.btn-danger {
+  background-color: var(--color-danger);
+  border-color: var(--color-danger);
+}
+
+.select {
+  color: black;
+}
+
+.table {
+  color: var(--text-color-body);
+}
+
+.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary {
+  background-color: var(--color-primary);
+  border-color: var(--color-primary);
+  color: var(--text-color);
+  filter: brightness(80%);
+}
+
+.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary.active, .open>.dropdown-toggle.btn-secondary {
+  background-color: var(--color-secondary);
+  border-color: var(--color-secondary);
+  color: var(--text-color);
+  filter: brightness(80%);
+}
+
+.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .open>.dropdown-toggle.btn-warning {
+  background-color: var(--color-warning);
+  border-color: var(--color-warning);
+  color: var(--text-color);
+  filter: brightness(80%);
+}
+
+.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open>.dropdown-toggle.btn-success {
+  background-color: var(--color-success);
+  border-color: var(--color-success);
+  color: var(--text-color);
+  filter: brightness(80%);
+}
+
+.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open>.dropdown-toggle.btn-danger {
+  background-color: var(--color-danger);
+  border-color: var(--color-danger);
+  color: var(--text-color);
+  filter: brightness(80%);
+}
+
+.btn-submit:hover, .btn-submit:focus, .btn-submit:active, .btn-submit.active, .open>.dropdown-toggle.btn-submit {
+  background-color: var(--color-submit);
+  border-color: var(--color-submit);
+  color: var(--text-color);
+  filter: brightness(80%);
 }
 
 .popover {
@@ -78,7 +177,7 @@ body {
 }
 
 .error {
-  color: red;
+  color: var(--color_red);
 }
 
 .normal {
@@ -146,7 +245,7 @@ div.tab-body {
 .loglevel-0 { } /* debug */
 .loglevel-1 { font-weight: bold;} /* info */
 .loglevel-2 { color: rgb(169, 112, 5); font-weight: bold;} /* warning */
-.loglevel-3 { color: red; font-weight: bold; } /* error */
+.loglevel-3 { color: var(--color-error); font-weight: bold; } /* error */
 
 .counter-badge {
   font-size: 90%;

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,10 +1,9 @@
 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 './Theme.css';
 import './App.css';
 import { BeginRestore } from './BeginRestore';
 import { DirectoryObject } from "./DirectoryObject";
@@ -16,8 +15,9 @@ import { TaskDetails } from './TaskDetails';
 import { TasksTable } from './TasksTable';
 import { NewSnapshot } from './NewSnapshot';
 import { PolicyEditorPage } from './PolicyEditorPage';
-import { ToggleDarkModeButton } from './ToggleDarkModeButton';
+import { ThemeSelector } from './ThemeSelector';
 import { AppContext } from './AppContext';
+
 import { UIPreferenceProvider } from './contexts/UIPreferencesContext';
 
 export default class App extends Component {
@@ -112,7 +112,7 @@ export default class App extends Component {
                   <NavLink data-testid="tab-repo" className="nav-link" activeClassName="active" to="/repo">Repository</NavLink>
                 </Nav>
                 <Nav>
-                  <ToggleDarkModeButton />
+                  <ThemeSelector/>
                 </Nav>
               </Navbar.Collapse>
             </Navbar>

diff --git a/src/NewSnapshot.jsx b/src/NewSnapshot.jsx
@@ -166,15 +166,15 @@ export class NewSnapshot extends Component {
                         size="sm"
                         disabled={!this.state.resolvedSource?.path}
                         title="Estimate"
-                        variant="primary"
+                        variant="secondary"
                         onClick={this.estimate}>Estimate</Button>
                     &nbsp;
                     <Button
                         data-testid='snapshot-now'
                         size="sm"
                         disabled={!this.state.resolvedSource?.path}
                         title="Snapshot Now"
-                        variant="success"
+                        variant="primary"
                         onClick={this.snapshotNow}>Snapshot Now</Button>
                 </Col>
             </Row>

diff --git a/src/SetupRepository.jsx b/src/SetupRepository.jsx
@@ -229,7 +229,7 @@ export class SetupRepository extends Component {
                     <Button key={x.provider}
                         data-testid={'provider-' + x.provider}
                         onClick={() => this.setState({ provider: x.provider, providerSettings: {} })}
-                        variant={x.provider.startsWith("_") ? "success" : "primary"}
+                        variant={x.provider.startsWith("_") ? "secondary" : "primary"}
                         className="providerIcon" >{x.description}</Button>
                 )}
             </Row>
@@ -313,7 +313,7 @@ export class SetupRepository extends Component {
             {this.connectionErrorInfo()}
             <hr />
 
-            <Button data-testid='back-button' variant="secondary" onClick={() => this.setState({ provider: null, providerSettings: null, connectError: null })}>Back</Button>
+            <Button data-testid='back-button' variant="warning" onClick={() => this.setState({ provider: null, providerSettings: null, connectError: null })}>Back</Button>
             &nbsp;
             <Button variant="primary" type="submit" data-testid="submit-button">Next</Button>
             {this.loadingSpinner()}
@@ -326,7 +326,7 @@ export class SetupRepository extends Component {
         const text = this.state.showAdvanced ? "Hide Advanced Options" : "Show Advanced Options";
 
         return <Button data-testid='advanced-options' onClick={this.toggleAdvanced}
-            variant="secondary"
+            variant="primary"
             aria-controls="advanced-options-div"
             aria-expanded={this.state.showAdvanced}
             size="sm"
@@ -440,9 +440,9 @@ export class SetupRepository extends Component {
             </Collapse>
             {this.connectionErrorInfo()}
             <hr />
-            <Button data-testid='back-button' variant="secondary" onClick={() => this.setState({ providerSettings: {}, storageVerified: false })}>Back</Button>
+            <Button data-testid='back-button' variant="warning" onClick={() => this.setState({ providerSettings: {}, storageVerified: false })}>Back</Button>
             &nbsp;
-            <Button variant="success" type="submit" data-testid="submit-button">Create Repository</Button>
+            <Button variant="primary" type="submit" data-testid="submit-button">Create Repository</Button>
             {this.loadingSpinner()}
         </Form>;
     }
@@ -493,9 +493,9 @@ export class SetupRepository extends Component {
             </Collapse>
             {this.connectionErrorInfo()}
             <hr />
-            <Button data-testid='back-button' variant="secondary" onClick={() => this.setState({ providerSettings: {}, storageVerified: false })}>Back</Button>
+            <Button data-testid='back-button' variant="warning" onClick={() => this.setState({ providerSettings: {}, storageVerified: false })}>Back</Button>
             &nbsp;
-            <Button variant="success" type="submit" data-testid="submit-button">Connect To Repository</Button>
+            <Button variant="primary" type="submit" data-testid="submit-button">Connect To Repository</Button>
             {this.loadingSpinner()}
         </Form>;
     }

diff --git a/src/SnapshotsTable.jsx b/src/SnapshotsTable.jsx
@@ -450,7 +450,7 @@ export class SnapshotsTable extends Component {
 
                 <Modal.Footer>
                     <Button size="sm" variant="danger" onClick={this.deleteSelectedSnapshots}>Delete</Button>
-                    <Button size="sm" variant="secondary" onClick={this.cancelDelete}>Cancel</Button>
+                    <Button size="sm" variant="warning" onClick={this.cancelDelete}>Cancel</Button>
                 </Modal.Footer>
             </Modal>
 
@@ -473,7 +473,7 @@ export class SnapshotsTable extends Component {
                     {this.state.savingSnapshot && <Spinner animation="border" size="sm" variant="primary" />}
                     <Button size="sm" variant="success" disabled={this.state.originalSnapshotDescription === this.state.updatedSnapshotDescription} onClick={this.saveSnapshotDescription}>Update Description</Button>
                     {this.state.originalSnapshotDescription && <Button size="sm" variant="danger" onClick={this.removeSnapshotDescription}>Remove Description</Button>}
-                    <Button size="sm" variant="secondary" onClick={this.cancelSnapshotDescription}>Cancel</Button>
+                    <Button size="sm" variant="warning" onClick={this.cancelSnapshotDescription}>Cancel</Button>
                 </Modal.Footer>
             </Modal>
 
@@ -496,7 +496,7 @@ export class SnapshotsTable extends Component {
                     {this.state.savingSnapshot && <Spinner animation="border" size="sm" variant="primary" />}
                     <Button size="sm" variant="success" onClick={this.savePin} disabled={this.state.newPinName === this.state.originalPinName || !this.state.newPinName}>{this.state.originalPinName ? "Update Pin" : "Add Pin"}</Button>
                     {this.state.originalPinName && <Button size="sm" variant="danger" onClick={() => this.removePin(this.state.originalPinName)}>Remove Pin</Button>}
-                    <Button size="sm" variant="secondary" onClick={this.cancelPin}>Cancel</Button>
+                    <Button size="sm" variant="warning" onClick={this.cancelPin}>Cancel</Button>
                 </Modal.Footer>
             </Modal>
         </>;

diff --git a/src/SourcesTable.jsx b/src/SourcesTable.jsx
@@ -93,10 +93,11 @@ export class SourcesTable extends Component {
             case "IDLE":
             case "PAUSED":
                 return <>
-                    <Button data-testid="snapshot-now" variant="primary" size="sm" onClick={() => {
+                    <Button data-testid="edit-policy" as={Link} to={policyEditorURL(x.row.original.source)} variant="primary" size="sm">Policy</Button>
+                    <Button data-testid="snapshot-now" variant="success" size="sm" onClick={() => {
                         parent.startSnapshot(x.row.original.source);
-                    }}>Snapshot Now</Button>
-                    &nbsp;<Link data-testid="edit-policy" to={policyEditorURL(x.row.original.source)}><Button size="sm" variant="info">Policy</Button></Link>
+                        }}>Snapshot Now
+                    </Button>
                 </>;
 
             case "PENDING":
@@ -272,7 +273,7 @@ export class SourcesTable extends Component {
                         </Dropdown>
                     </Col></>}
                     <Col xs="auto">
-                        <Button data-testid="new-snapshot" size="sm" variant="success" href="/snapshots/new">New Snapshot</Button>
+                        <Button data-testid="new-snapshot" size="sm" variant="primary" href="/snapshots/new">New Snapshot</Button>
                     </Col>
                     <Col>
                     </Col>

diff --git a/src/Theme.css b/src/Theme.css
@@ -0,0 +1,64 @@
+/*Supported themes */
+.light-theme {
+  --background-color: #ffffff;
+  --color-primary: #2A7FFF;
+  --color-secondary: #23a25a;
+  --color-warning: #e1704b;
+  --color-success: #5ea5cd;
+  --color-submit: #00B4D8;
+
+  --text-color: #ffffff;
+  --text-color-body: #000000;
+  --text-color-nav: #000000;
+
+  --color-error: #d2475a;
+  --color-danger: #d2475a;
+}
+
+.dark-theme {
+  --background-color: #000000;
+  --color-primary: #1162b1;
+  --color-secondary: #0d9aab;
+  --color-warning: #b30996;
+  --color-success: #030303;
+  --color-submit: #00B4D8;
+
+  --text-color: #ffffff;
+  --text-color-body: #ffffff;
+  --text-color-nav: #ffffff;
+
+  --color-error: #b31f04;
+  --color-danger: #b31f04;
+}
+
+.pastel-theme {
+  --background-color: #ffffff;
+  --color-primary: #9feae7;
+  --color-secondary: #d7a5e9;
+  --color-warning: #ffe070;
+  --color-success: #d7a5e9;
+  --color-submit: #00B4D8;
+
+  --text-color: #000000;
+  --text-color-body: #000000;
+  --text-color-nav: #d7a5e9;
+
+  --color-error: #b31f04;
+  --color-danger: #b31f04;
+}
+
+.ocean-theme {
+  --background-color: #ffffff;
+  --color-primary: #03045E;
+  --color-secondary: #0077B6;
+  --color-warning: #00B4D8;
+  --color-success: #48CAE4;
+  --color-submit: #00B4D8;
+
+  --text-color: #ffffff;
+  --text-color-body: #03045E;
+  --text-color-nav: #03045E;
+
+  --color-error: #d2475a;
+  --color-danger: #d2475a;
+}
diff --git a/src/ThemeSelector.tsx b/src/ThemeSelector.tsx
@@ -0,0 +1,30 @@
+import Select from 'react-select'
+import { useContext } from 'react';
+import { Theme, UIPreferencesContext } from './contexts/UIPreferencesContext';
+
+export function ThemeSelector() {
+    const { theme, setTheme } = useContext(UIPreferencesContext);
+
+    updateTheme(theme)
+
+    const themes = [
+        { value: 'light-theme', label: 'light' },
+        { value: 'dark-theme', label: 'dark' },
+        { value: 'pastel-theme', label: 'pastel' },
+        { value: 'ocean-theme', label: 'ocean' }
+    ]
+
+    const handleTheme = (event: any) => {
+        var selectedTheme = event.value;
+        // keep html class in sync with button state.
+        updateTheme(selectedTheme)
+        setTheme(selectedTheme)
+      };
+
+    return <Select defaultValue={themes[0]} options={themes} onChange={handleTheme} />
+}
+
+function updateTheme(theme: Theme) {
+    var doc = document.querySelector("html")!;
+    doc.className = theme
+}
diff --git a/src/ToggleDarkModeButton.tsx b/src/ToggleDarkModeButton.tsx
@@ -11,11 +11,11 @@ export function ToggleDarkModeButton() {
   const h = document.querySelector("html")!;
   h.className = theme;
 
-  return theme === "dark"
-    ? <Button data-testid="toggle-dark-mode" variant="outline-light" size="sm" title="Switch to Light Mode" onClick={() => setTheme("light")}>
+  return theme === "dark-theme"
+    ? <Button data-testid="toggle-dark-mode" variant="outline-light" size="sm" title="Switch to Light Mode" onClick={() => setTheme("light-theme")}>
       <FontAwesomeIcon icon={faSun} />
     </Button>
-    : <Button data-testid="toggle-dark-mode" variant="outline-dark" size="sm" title="Switch to Dark Mode" onClick={() => setTheme("dark")}>
+    : <Button data-testid="toggle-dark-mode" variant="outline-dark" size="sm" title="Switch to Dark Mode" onClick={() => setTheme("dark-theme")}>
       <FontAwesomeIcon icon={faMoon} />
     </Button>;
 }