feat(ui): Added theming support

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": {

src/App.css

@@ -4,6 +4,120 @@ html.loading {
 
 body {
   line-height: 1;
+  background-color: var(--background-color);
+}
+
+.container-fluid {
+  color: var(--text-color-body);
+}
+
+.select {
+  color: var(--text-color-selector);
+}
+
+.select select:hover {
+  color: var(--text-color-selector);
+}
+
+.options-select {
+  overflow: ellipsis
+}
+
+.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);
+}
+
+.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%);
+}
+
+.table {
+  color: var(--text-color-body);
+}
+
+.table table-sm table-striped table-bordered table-hover {
+  color: var(--text-color-body);
+}
+
+.table-striped>tbody>tr:nth-of-type(odd)>* {
+  color: var(--text-color-body);
+}
+
+.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);
 }
 
 .popover {
@@ -78,7 +192,7 @@ body {
 }
 
 .error {
-  color: red;
+  color: var(--color_red);
 }
 
 .normal {
@@ -146,7 +260,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%;

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>

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>

src/PoliciesTable.jsx

@@ -174,7 +174,6 @@ export class PoliciesTable extends Component {
             return <p>Loading ...</p>;
         }
 
-
         let uniqueOwners = sources.reduce((a, d) => {
             const owner = ownerName(d.source);
 
@@ -245,7 +244,7 @@ export class PoliciesTable extends Component {
             id: 'edit',
             Header: '',
             width: 50,
-            Cell: x => <Link to={policyEditorURL(x.row.original.target)}><Button size="sm">Edit</Button></Link>,
+            Cell: x => <Button data-testid="edit-policy" as={Link} to={policyEditorURL(x.row.original.target)} variant="primary" size="sm">Edit</Button>
         }]
 
         return <>

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>;
     }

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>
         </>;

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>

src/Theme.css

@@ -0,0 +1,68 @@
+/*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-selector: #000000;
+  --text-color-body: #000000;
+  --text-color-nav: #000000;
+
+  --color-error: #d2475a;
+  --color-danger: #d2475a;
+}
+
+.dark-theme {
+  --background-color: #343c43;
+  --color-primary: #1162b1;
+  --color-secondary: #0d9aab;
+  --color-warning: #b30996;
+  --color-success: #00B4D8;
+  --color-submit: #00B4D8;
+
+  --text-color: #ffffff;
+  --text-color-selector: #000000;
+  --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-selector: #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-selector: #000000;
+  --text-color-body: #03045E;
+  --text-color-nav: #03045E;
+
+  --color-error: #d2475a;
+  --color-danger: #d2475a;
+}