Minor refactoring

kopia · Oct 3, 2023 · b5cab29 · b5cab29
1 parent 8ecd091
commit b5cab29
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 28 deletions.
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/SnapshotsTable.jsx b/src/SnapshotsTable.jsx
@@ -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>
@@ -479,8 +479,8 @@ export class SnapshotsTable extends Component {
 
                 <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/css/App.css b/src/css/App.css
@@ -280,7 +280,7 @@ div.tab-body {
 
 #kopia .version-info {
   padding-left: 10px;
-  color: #aaa;
+  color: var(--color-text-body);
   font-size: 80%;
 }
 
@@ -291,13 +291,11 @@ div.tab-body {
   background-color: var(--background-color);
 }
 
-#mountedPath {
-  color: #444;
+#kopia .mounted-path {
   width: 30em;
-  background-color: #ccc;
-  font-size: 12pt;
-  padding: 4px;
-  border: 1px solid #aaa;
+  display: inline;
+  color: var(--color-text-body);
+  background-color: var(--background-color);
 }
 
 .logs-table {
@@ -432,8 +430,3 @@ div.tab-body {
   color: var(--color-badge-warning);
 }
 
-.log-parameter {
-  color: #000080;
-  font-weight: bold;
-  padding-right: 10px;
-}
diff --git a/src/css/Theme.css b/src/css/Theme.css
@@ -33,7 +33,7 @@
   --color-success: #0d9aab;
   --color-submit: #00B4D8;
   --color-select: #2c2c2c;
-  --color-link: #6a8ec6;
+  --color-link: #799bd1;
 
   --color-text: #cfcfcf;
   --color-text-body: #cfcfcf;