kopia · jkowalski · Oct 10, 2023 · Sep 18, 2023 · Sep 25, 2023 · Sep 27, 2023
diff --git a/public/index.html b/public/index.html
@@ -12,7 +12,7 @@
   <title>KopiaUI</title>
 </head>
 
-<body>
+<body id="kopia">
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <div id="root"></div>
   <div id="appVersion" style="display: none">

diff --git a/src/DirectoryBreadcrumbs.jsx b/src/DirectoryBreadcrumbs.jsx
@@ -20,15 +20,15 @@ export function DirectoryBreadcrumbs() {
                 breadcrumbs.map((state, i) => {
                     const index = breadcrumbs.length - i - 1 // revert index
                     return <Breadcrumb.Item key={index} size="sm" variant="outline-secondary"
-                                            onClick={() => {
-                                                if (index) history.go(-index);
-                                            }}
-                                            active={!index}>
+                        onClick={() => {
+                            if (index) history.go(-index);
+                        }}
+                        active={!index}>
                         {state.label}
                         {state.oid && !index && <>&nbsp;<OverlayTrigger placement="top"
-                                               trigger="click"
-                                               overlay={<Tooltip
-                                                   className={"wide-tooltip"}>OID: {state.oid}</Tooltip>}
+                            trigger="click"
+                            overlay={<Tooltip
+                                className={"wide-tooltip"}>OID: {state.oid}</Tooltip>}
                         >
                             <FontAwesomeIcon icon={faInfoCircle} />
                         </OverlayTrigger></>}

diff --git a/src/DirectoryObject.jsx b/src/DirectoryObject.jsx
@@ -98,7 +98,7 @@ export class DirectoryObject extends Component {
     }
 
     copyPath() {
-        const el = document.querySelector("#mountedPath");
+        const el = document.querySelector(".mounted-path");
         if (!el) {
             return
         }
@@ -125,24 +125,21 @@ export class DirectoryObject extends Component {
                     {this.state.mountInfo.path ? <>
                         <Button size="sm" variant="secondary" onClick={this.unmount}>Unmount</Button>
                         {window.kopiaUI && <>
-                            &nbsp;
                             <Button size="sm" variant="secondary" onClick={this.browseMounted}>Browse</Button>
                         </>}
-                        &nbsp;<input id="mountedPath" value={this.state.mountInfo.path} />
-                        <Button size="sm" variant="primary" onClick={this.copyPath}><FontAwesomeIcon
-                            icon={faCopy} /></Button>
+                        <input readOnly={true} className='form-control form-control-sm mounted-path' value={this.state.mountInfo.path} />
+                        <Button size="sm" variant="success" onClick={this.copyPath}><FontAwesomeIcon icon={faCopy} /></Button>
                     </> : <>
-                        <Button size="sm" variant="primary" onClick={this.mount}>Mount as Local Filesystem</Button>
+                        <Button size="sm" variant="secondary" onClick={this.mount}>Mount as Local Filesystem</Button>
                     </>}
                     &nbsp;
-                    <Button size="sm" variant="secondary"
-                            href={"/snapshots/dir/" + this.props.match.params.oid + "/restore"}>Restore
+                    <Button size="sm" variant="primary"
+                        href={"/snapshots/dir/" + this.props.match.params.oid + "/restore"}>Restore
                         Files & Directories</Button>
                     &nbsp;
                 </Col>
                 <Col xs={12} md={6}>
-                    You can mount/restore all the files & directories that you see below or restore files
-                    individually.
+                    You can mount/restore all the files & directories that you see below or restore files individually.
                 </Col>
             </Row>
             <Row><Col>&nbsp;</Col>

diff --git a/src/PoliciesTable.jsx b/src/PoliciesTable.jsx
@@ -149,7 +149,7 @@ export class PoliciesTable extends Component {
         }
         for (let pol in policies.policy) {
             if (!isEmpty(policies.policy[pol])) {
-                bits.push(<Badge className="policy-badge" key={pol}>{pol}</Badge>);
+                bits.push(<Badge bg="policy-badge" key={pol}>{pol}</Badge>);
             }
         }
         return bits;

diff --git a/src/PreferencesView.jsx b/src/PreferencesView.jsx
@@ -8,7 +8,7 @@ export class PreferencesView extends Component {
             <form>
                 <div className='form-group'>
                     <label className='label-description' id='themeLabel'>Theme</label>
-                    <select className="select_theme, form-select form-select-sm" title='Select theme' value={theme} onChange={e => setTheme(e.target.value)}>
+                    <select className="form-select form-select-sm" title='Select theme' value={theme} onChange={e => setTheme(e.target.value)}>
                         <option value="light">light</option>
                         <option value="dark">dark</option>
                         <option value="pastel">pastel</option>

diff --git a/src/SnapshotsTable.jsx b/src/SnapshotsTable.jsx
@@ -249,8 +249,8 @@ export class SnapshotsTable extends Component {
                 originalSnapshotDescription: x.description,
             })
         }}
-                  title={x.description + " - Click to update snapshot description."}
-                  className={x.description ? "text-warning" : "text-muted"}><b><FontAwesomeIcon icon={faFileAlt} /></b></a>;
+            title={x.description + " - Click to update snapshot description."}
+            className={x.description ? "snapshot-description-set" : "snapshot-description"}><b><FontAwesomeIcon icon={faFileAlt} /></b></a>;
     }
 
     newPinFor(x) {
@@ -353,16 +353,16 @@ export class SnapshotsTable extends Component {
             Header: 'Root',
             width: "",
             accessor: x => x.rootID,
-            Cell: x => <><span className="hash-value">{x.cell.value}</span>
-            {x.row.original.description && <div className='text-muted'><small>{x.row.original.description}</small></div>}</>,
+            Cell: x => <><span className="snapshot-hash">{x.cell.value}</span>
+                {x.row.original.description && <div className='snapshot-description'><small>{x.row.original.description}</small></div>}</>,
         }, {
             Header: 'Retention',
             accessor: 'retention',
             width: "",
             Cell: x => <span>
-                {x.cell.value.map(l => <React.Fragment key={l}><Badge bg={pillVariant(l)}>{l}</Badge>{' '}</React.Fragment>)}
+                {x.cell.value.map(l => <React.Fragment key={l}><Badge bg={"retention-badge-"+pillVariant(l)}>{l}</Badge>{' '}</React.Fragment>)}
                 {x.row.original.pins.map(l => <React.Fragment key={l}>
-                    <Badge bg="dark" text="warning" onClick={() => this.editPin(x.row.original, l)}><FontAwesomeIcon icon={faThumbtack} /> {l}</Badge>{' '}
+                    <Badge bg="snapshot-pin" onClick={() => this.editPin(x.row.original, l)}><FontAwesomeIcon icon={faThumbtack} /> {l}</Badge>{' '}
                 </React.Fragment>)}
                 {this.newPinFor(x.row.original)}
             </span>
@@ -457,7 +457,7 @@ export class SnapshotsTable extends Component {
                 </Modal.Body>
 
                 <Modal.Footer>
-                    <Button size="sm" variant="danger" onClick={this.deleteSelectedSnapshots}>Delete</Button>
+                    <Button size="sm" variant="primary" onClick={this.deleteSelectedSnapshots}>Delete</Button>
                     <Button size="sm" variant="warning" onClick={this.cancelDelete}>Cancel</Button>
                 </Modal.Footer>
             </Modal>
@@ -471,16 +471,16 @@ export class SnapshotsTable extends Component {
                     <Form.Group>
                         <Form.Label>Enter new description</Form.Label>
                         <Form.Control as="textarea"
-                                      size="sm"
-                                      value={this.state.updatedSnapshotDescription}
-                                      onChange={e => this.setState({ updatedSnapshotDescription: e.target.value })} />
+                            size="sm"
+                            value={this.state.updatedSnapshotDescription}
+                            onChange={e => this.setState({ updatedSnapshotDescription: e.target.value })} />
                     </Form.Group>
                 </Modal.Body>
 
                 <Modal.Footer>
                     {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="primary" disabled={this.state.originalSnapshotDescription === this.state.updatedSnapshotDescription} onClick={this.saveSnapshotDescription}>Update Description</Button>
+                    {this.state.originalSnapshotDescription && <Button size="sm" variant="secondary" onClick={this.removeSnapshotDescription}>Remove Description</Button>}
                     <Button size="sm" variant="warning" onClick={this.cancelSnapshotDescription}>Cancel</Button>
                 </Modal.Footer>
             </Modal>
@@ -502,8 +502,8 @@ export class SnapshotsTable extends Component {
 
                 <Modal.Footer>
                     {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="primary" 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="secondary" onClick={() => this.removePin(this.state.originalPinName)}>Remove Pin</Button>}
                     <Button size="sm" variant="warning" onClick={this.cancelPin}>Cancel</Button>
                 </Modal.Footer>
             </Modal>

diff --git a/src/Table.jsx b/src/Table.jsx
@@ -128,14 +128,15 @@ export default function MyTable({ columns, data }) {
         </thead>
         <tbody {...getTableBodyProps()}>
           {page.map((row, i) => {
-              prepareRow(row);
-              return (
+            prepareRow(row);
+            return (
               <tr {...row.getRowProps()} key={i}>
                 {row.cells.map(cell => {
                   return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                 })}
               </tr>
-              )}
+            )
+          }
           )}
         </tbody>
       </Table>