From bff2735adfda18d2739c1a6a2dced7a99b487b76 Mon Sep 17 00:00:00 2001
From: Christoph Anderson <lupusapps@gmail.com>
Date: Mon, 18 Sep 2023 20:35:27 +0200
Subject: [PATCH 1/9] - Fixed the badge colors - Badge colors are now dependend
 on the theme

---
 src/css/App.css   | 106 ++++++++++++++++++++++++++++++++++++++--------
 src/css/Theme.css |  29 ++++++++++++-
 2 files changed, 116 insertions(+), 19 deletions(-)

diff --git a/src/css/App.css b/src/css/App.css
index 221a26b..085978e 100644
--- a/src/css/App.css
+++ b/src/css/App.css
@@ -54,42 +54,54 @@ body {
   border-color: var(--color-danger);
 }
 
-.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
+.btn-primary:hover,
+.btn-primary:focus,
+.btn-primary:active {
   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:hover,
+.btn-secondary:focus,
+.btn-secondary:active {
   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:hover,
+.btn-warning:focus,
+.btn-warning:active {
   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:hover,
+.btn-success:focus,
+.btn-success:active {
   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:hover,
+.btn-danger:focus,
+.btn-danger:active {
   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:hover,
+.btn-submit:focus,
+.btn-submit:active {
   background-color: var(--color-submit);
   border-color: var(--color-submit);
   color: var(--text-color);
@@ -132,26 +144,39 @@ a:hover {
   filter: brightness(80%);
 }
 
-.form-control, .form-control:focus, .form-control:active, .form-control:hover {
+.form-control,
+.form-control:focus,
+.form-control:active,
+.form-control:hover {
   color: var(--text-color-body) !important;
   background-color: var(--background-color) !important;
 }
 
-.form-select, .form-select:focus, .form-select:active, form-select:hover {
+.form-select,
+.form-select:focus,
+.form-select:active,
+form-select:hover {
   color: var(--text-color-body);
   background-color: var(--background-color);
 }
 
-.form-control-sm, .form-control-sm:focus, .form-control-sm:active, .form-control-sm:hover {
+.form-control-sm,
+.form-control-sm:focus,
+.form-control-sm:active,
+.form-control-sm:hover {
   color: var(--text-color-body);
   background-color: var(--background-color);
 }
 
-.form-check-input, .form-check-input:focus, .form-check-input:active, .form-control-sm:hover {
+.form-check-input,
+.form-check-input:focus,
+.form-check-input:active,
+.form-control-sm:hover {
   color: var(--text-color-body);
 }
 
-.navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show>.nav-link {
+.navbar-light .navbar-nav .nav-link.active,
+.navbar-light .navbar-nav .show>.nav-link {
   color: var(--text-color-nav);
 }
 
@@ -160,7 +185,7 @@ a:hover {
   background-color: var(--background-color) !important;
 }
 
-.accordion-button  {
+.accordion-button {
   background-color: var(--background-color) !important;
   color: var(--text-color-body) !important;
 }
@@ -170,11 +195,38 @@ a:hover {
   background-color: var(--background-color);
 }
 
-.accordion-button:link, .accordion-button:visited, .accordion-button:hover, .accordion-button:active  {
+.accordion-button:link,
+.accordion-button:visited,
+.accordion-button:hover,
+.accordion-button:active {
   background-color: var(--color-select);
   color: var(--text-color-body);
 }
 
+.bg-warning {
+  background-color: var(--color-badge-warning) !important;
+}
+
+.bg-danger {
+  background-color: var(--color-badge-danger) !important;
+}
+
+.bg-info {
+  background-color: var(--color-badge-info) !important;
+}
+
+.bg-primary {
+  background-color: var(--color-badge-primary) !important;
+}
+
+.bg-secondary {
+  background-color: var(--color-badge-secondary) !important;
+}
+
+.bg-success {
+  background-color: var(--color-badge-success) !important;
+}
+
 .popover {
   max-width: 1000px;
 }
@@ -187,7 +239,7 @@ a:hover {
   height: 32px;
 }
 
-.active{
+.active {
   font-weight: bold;
 }
 
@@ -317,10 +369,28 @@ div.tab-body {
   border: 1px solid #aaa;
 }
 
-.loglevel-0 { color: var(--text-color-body)} /* debug */
-.loglevel-1 { font-weight: bold;} /* info */
-.loglevel-2 { color: var(--color-warning); font-weight: bold;} /* warning */
-.loglevel-3 { color: var(--color-error); font-weight: bold; } /* error */
+.loglevel-0 {
+  color: var(--text-color-body)
+}
+
+/* debug */
+.loglevel-1 {
+  font-weight: bold;
+}
+
+/* info */
+.loglevel-2 {
+  color: var(--color-warning);
+  font-weight: bold;
+}
+
+/* warning */
+.loglevel-3 {
+  color: var(--color-error);
+  font-weight: bold;
+}
+
+/* error */
 
 .counter-badge {
   font-size: 90%;
diff --git a/src/css/Theme.css b/src/css/Theme.css
index c32125a..e7102fb 100644
--- a/src/css/Theme.css
+++ b/src/css/Theme.css
@@ -15,6 +15,13 @@
 
   --color-error: #d2475a;
   --color-danger: #d2475a;
+
+  --color-badge-warning: #D8A509;
+  --color-badge-primary: #47729A;
+  --color-badge-secondary: #6E7072;
+  --color-badge-info:#127D74;
+  --color-badge-danger:#C14B0B;
+  --color-badge-success:#498235;
 }
 
 .dark {
@@ -32,9 +39,15 @@
   --text-color-body: #cfcfcf;
   --text-color-nav: #cfcfcf;
   
-  
   --color-error: #b31f04;
   --color-danger: #b31f04;
+
+  --color-badge-warning: #C49508;
+  --color-badge-primary: #5B89B4;
+  --color-badge-secondary: #787A7D;
+  --color-badge-info:#159489;
+  --color-badge-danger:#F3712B;
+  --color-badge-success:#5DA745;
 }
 
 .pastel {
@@ -53,6 +66,13 @@
 
   --color-error: #ffadad;
   --color-danger: #ffadad;
+
+  --color-badge-warning: #D8A509;
+  --color-badge-primary: #47729A;
+  --color-badge-secondary: #6E7072;
+  --color-badge-info:#127D74;
+  --color-badge-danger:#C14B0B;
+  --color-badge-success:#498235;
 }
 
 .ocean {
@@ -71,4 +91,11 @@
 
   --color-error: #d2475a;
   --color-danger: #d2475a;
+
+  --color-badge-warning: #D8A509;
+  --color-badge-primary: #47729A;
+  --color-badge-secondary: #6E7072;
+  --color-badge-info:#127D74;
+  --color-badge-danger:#C14B0B;
+  --color-badge-success:#498235;
 }
\ No newline at end of file

From 0e76bbafc0fc953806e3627dc8e75087cdfff5ae Mon Sep 17 00:00:00 2001
From: Christoph Anderson <37236531+lupusA@users.noreply.github.com>
Date: Mon, 25 Sep 2023 20:38:55 +0200
Subject: [PATCH 2/9] fix(ui): Fix missing badges in policy table (#194)

* Fix missing badges in policies

* Childs now have unique key in list

* Added isEmptyObject()

---------

Co-authored-by: Christoph Anderson <lupusapps@gmail.com>
---
 src/PoliciesTable.jsx | 60 ++++++++++++++++++++++---------------------
 src/css/App.css       |  7 +++++
 2 files changed, 38 insertions(+), 29 deletions(-)

diff --git a/src/PoliciesTable.jsx b/src/PoliciesTable.jsx
index bc5102b..6d0463a 100644
--- a/src/PoliciesTable.jsx
+++ b/src/PoliciesTable.jsx
@@ -120,36 +120,38 @@ export class PoliciesTable extends Component {
         });
     }
 
-    policySummary(p) {
+    policySummary(policies) {
+        let bits = [];
+        /**
+         * Check if the object is empty
+         * @param {*} obj 
+         * @returns true if the object is empty
+         */
+        function isEmptyObject(obj) {
+            return (
+                Object.getPrototypeOf(obj) === Object.prototype &&
+                Object.getOwnPropertyNames(obj).length === 0 &&
+                Object.getOwnPropertySymbols(obj).length === 0
+            );
+        }
+        /**
+         * Check if object has it's key as a property.
+         * However, if the object itself is a set of sets, it has to be checked by isEmptyObject()
+         * @param {*} obj 
+         * @returns 
+         */
         function isEmpty(obj) {
             for (var key in obj) {
                 if (obj.hasOwnProperty(key))
-                    return false;
+                    return isEmptyObject(obj[key]);
             }
-
             return true;
         }
-
-        let bits = [];
-        if (!isEmpty(p.policy.retention)) {
-            bits.push(<><Badge bg="success">retention</Badge>{' '}</>);
-        }
-        if (!isEmpty(p.policy.files)) {
-            bits.push(<><Badge bg="primary">files</Badge>{' '}</>);
-        }
-        if (!isEmpty(p.policy.errorHandling)) {
-            bits.push(<><Badge bg="danger">errors</Badge>{' '}</>);
-        }
-        if (!isEmpty(p.policy.compression)) {
-            bits.push(<><Badge bg="secondary">compression</Badge>{' '}</>);
-        }
-        if (!isEmpty(p.policy.scheduling)) {
-            bits.push(<><Badge bg="warning">scheduling</Badge>{' '}</>);
-        }
-        if (!isEmpty(p.policy.upload)) {
-            bits.push(<><Badge bg="info">upload</Badge>{' '}</>);
+        for (let pol in policies.policy) {
+            if (!isEmpty(policies.policy[pol])) {
+                bits.push(<Badge className="policy-badge" key={pol}>{pol}</Badge>);
+            }
         }
-
         return bits;
     }
 
@@ -213,16 +215,16 @@ export class PoliciesTable extends Component {
                 break;
         };
 
-        policies.sort((l,r) => {
-            const hc = compare(l.target.host,r.target.host);
+        policies.sort((l, r) => {
+            const hc = compare(l.target.host, r.target.host);
             if (hc) {
                 return hc;
             }
-            const uc = compare(l.target.userName,r.target.userName);
+            const uc = compare(l.target.userName, r.target.userName);
             if (uc) {
                 return uc;
             }
-            return compare(l.target.path,r.target.path);
+            return compare(l.target.path, r.target.path);
         });
 
 
@@ -273,8 +275,8 @@ export class PoliciesTable extends Component {
                         {(this.state.selectedOwner === localPolicies || this.state.selectedOwner === this.state.localSourceName || this.state.selectedOwner === applicablePolicies) ? <>
                             <Col>
                                 <DirectorySelector autoFocus onDirectorySelected={p => this.setState({ policyPath: p })}
-                                placeholder="enter directory to find or set policy"
-                                name="policyPath" value={this.state.policyPath} onChange={this.handleChange} />
+                                    placeholder="enter directory to find or set policy"
+                                    name="policyPath" value={this.state.policyPath} onChange={this.handleChange} />
                             </Col>
                             <Col xs="auto">
                                 <Button disabled={!this.state.policyPath} size="sm" type="submit" onClick={this.editPolicyForPath}>Set Policy</Button>
diff --git a/src/css/App.css b/src/css/App.css
index 085978e..f7054d7 100644
--- a/src/css/App.css
+++ b/src/css/App.css
@@ -397,6 +397,13 @@ div.tab-body {
   margin: 2px;
 }
 
+.policy-badge {
+  margin-block-start: 5px;
+  margin-right: 5px;
+  background-color: var(--color-primary) !important;
+  color: var(--text-color) !important;
+}
+
 .page-title {
   margin-left: 10px;
   font-weight: bold;

From 2263cdc2545adffa640cfb6c6277460b733c9a50 Mon Sep 17 00:00:00 2001
From: lupusA <lupusapps@gmail.com>
Date: Wed, 27 Sep 2023 21:22:56 +0200
Subject: [PATCH 3/9] Started to refactor css

---
 src/DirectoryBreadcrumbs.jsx |  14 ++--
 src/PoliciesTable.jsx        |   2 +-
 src/SnapshotsTable.jsx       |  18 ++--
 src/Table.jsx                |   7 +-
 src/css/App.css              | 154 +++++++++++++++++++++--------------
 src/css/Theme.css            |  48 +++++------
 6 files changed, 138 insertions(+), 105 deletions(-)

diff --git a/src/DirectoryBreadcrumbs.jsx b/src/DirectoryBreadcrumbs.jsx
index c839558..bb32f36 100644
--- 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/PoliciesTable.jsx b/src/PoliciesTable.jsx
index 6d0463a..970a124 100644
--- 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/SnapshotsTable.jsx b/src/SnapshotsTable.jsx
index 92bda9b..d566a12 100644
--- 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 ? "text-warning" : "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>
@@ -471,9 +471,9 @@ 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>
 
diff --git a/src/Table.jsx b/src/Table.jsx
index 2efeb88..93e6c2f 100644
--- 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>
diff --git a/src/css/App.css b/src/css/App.css
index f7054d7..6310b23 100644
--- a/src/css/App.css
+++ b/src/css/App.css
@@ -8,7 +8,7 @@ body {
 }
 
 .container-fluid {
-  color: var(--text-color-body);
+  color: var(--color-text-body);
 }
 
 .select_theme {
@@ -19,8 +19,12 @@ body {
   overflow: ellipsis
 }
 
+.btn-close {
+  background-color: var(--background-color);
+}
+
 .btn {
-  color: var(--text-color);
+  color: var(--color-text);
   margin-right: 5px;
 }
 
@@ -56,91 +60,104 @@ body {
 
 .btn-primary:hover,
 .btn-primary:focus,
-.btn-primary:active {
+.btn-primary:active,
+.btn-primary:disabled {
   background-color: var(--color-primary);
   border-color: var(--color-primary);
-  color: var(--text-color);
+  color: var(--color-text);
   filter: brightness(80%);
 }
 
 .btn-secondary:hover,
 .btn-secondary:focus,
-.btn-secondary:active {
+.btn-secondary:active,
+.btn-secondary:disabled {
   background-color: var(--color-secondary);
   border-color: var(--color-secondary);
-  color: var(--text-color);
+  color: var(--color-text);
   filter: brightness(80%);
 }
 
 .btn-warning:hover,
 .btn-warning:focus,
-.btn-warning:active {
+.btn-warning:active,
+.btn-warning:disabled {
   background-color: var(--color-warning);
   border-color: var(--color-warning);
-  color: var(--text-color);
+  color: var(--color-text);
   filter: brightness(80%);
 }
 
 .btn-success:hover,
 .btn-success:focus,
-.btn-success:active {
+.btn-success:active,
+.btn-success:disabled {
   background-color: var(--color-success);
   border-color: var(--color-success);
-  color: var(--text-color);
+  color: var(--color-text);
   filter: brightness(80%);
 }
 
 .btn-danger:hover,
 .btn-danger:focus,
-.btn-danger:active {
+.btn-danger:active,
+.btn-danger:disabled {
   background-color: var(--color-danger);
   border-color: var(--color-danger);
-  color: var(--text-color);
+  color: var(--color-text);
   filter: brightness(80%);
 }
 
 .btn-submit:hover,
 .btn-submit:focus,
-.btn-submit:active {
+.btn-submit:active,
+.btn-submit:disabled {
   background-color: var(--color-submit);
   border-color: var(--color-submit);
-  color: var(--text-color);
+  color: var(--color-text);
   filter: brightness(80%);
 }
 
-a {
+.breadcrumb {
+  color: var(--color-text-body);
+}
+
+a,
+.breadcrumb-item,
+.breadcrumb-item.active {
   color: var(--color-link);
 }
 
-a:hover {
+a:hover,
+a:active {
   color: var(--color-link);
   filter: brightness(80%);
 }
 
 .table {
-  color: var(--text-color-body);
+  color: var(--color-text-body);
 }
 
 .table-hover>tbody>tr:hover>* {
-  color: var(--text-color-body);
+  color: var(--color-text-body);
 }
 
 .table-striped>tbody>tr:nth-of-type(odd)>* {
-  color: var(--text-color-body);
+  color: var(--color-text-body);
   background-color: var(--color-stripe);
 }
 
 .table-striped>tbody>tr:nth-of-type(even)>* {
-  color: var(--text-color-body);
+  color: var(--color-text-body);
   background-color: var(--background-color);
 }
 
 .navbar-light .navbar-nav .nav-link {
-  color: var(--text-color-nav);
+  color: var(--color-text-nav);
 }
 
 .nav-link:hover {
-  color: var(--text-color-nav) !important;
+  color: var(--color-text-nav) !important;
   filter: brightness(80%);
 }
 
@@ -148,7 +165,7 @@ a:hover {
 .form-control:focus,
 .form-control:active,
 .form-control:hover {
-  color: var(--text-color-body) !important;
+  color: var(--color-text-body) !important;
   background-color: var(--background-color) !important;
 }
 
@@ -156,7 +173,7 @@ a:hover {
 .form-select:focus,
 .form-select:active,
 form-select:hover {
-  color: var(--text-color-body);
+  color: var(--color-text-body);
   background-color: var(--background-color);
 }
 
@@ -164,7 +181,7 @@ form-select:hover {
 .form-control-sm:focus,
 .form-control-sm:active,
 .form-control-sm:hover {
-  color: var(--text-color-body);
+  color: var(--color-text-body);
   background-color: var(--background-color);
 }
 
@@ -172,26 +189,26 @@ form-select:hover {
 .form-check-input:focus,
 .form-check-input:active,
 .form-control-sm:hover {
-  color: var(--text-color-body);
+  color: var(--color-text-body);
 }
 
 .navbar-light .navbar-nav .nav-link.active,
 .navbar-light .navbar-nav .show>.nav-link {
-  color: var(--text-color-nav);
+  color: var(--color-text-nav);
 }
 
 .accordion-body {
-  color: var(--text-color-body) !important;
+  color: var(--color-text-body) !important;
   background-color: var(--background-color) !important;
 }
 
 .accordion-button {
   background-color: var(--background-color) !important;
-  color: var(--text-color-body) !important;
+  color: var(--color-text-body) !important;
 }
 
 .accordion-button:not(.collapsed) {
-  color: var(--text-color-body);
+  color: var(--color-text-body);
   background-color: var(--background-color);
 }
 
@@ -200,31 +217,7 @@ form-select:hover {
 .accordion-button:hover,
 .accordion-button:active {
   background-color: var(--color-select);
-  color: var(--text-color-body);
-}
-
-.bg-warning {
-  background-color: var(--color-badge-warning) !important;
-}
-
-.bg-danger {
-  background-color: var(--color-badge-danger) !important;
-}
-
-.bg-info {
-  background-color: var(--color-badge-info) !important;
-}
-
-.bg-primary {
-  background-color: var(--color-badge-primary) !important;
-}
-
-.bg-secondary {
-  background-color: var(--color-badge-secondary) !important;
-}
-
-.bg-success {
-  background-color: var(--color-badge-success) !important;
+  color: var(--color-text-body);
 }
 
 .popover {
@@ -352,6 +345,13 @@ div.tab-body {
   font-size: 80%;
 }
 
+.modal-footer,
+.modal-header,
+.modal-body {
+  background-color: var(--background-color);
+  color: var(--color-text-body);
+}
+
 #mountedPath {
   color: #444;
   width: 30em;
@@ -370,7 +370,7 @@ div.tab-body {
 }
 
 .loglevel-0 {
-  color: var(--text-color-body)
+  color: var(--color-text-body)
 }
 
 /* debug */
@@ -391,17 +391,48 @@ div.tab-body {
 }
 
 /* error */
-
 .counter-badge {
   font-size: 90%;
   margin: 2px;
 }
 
-.policy-badge {
+.badge {
   margin-block-start: 5px;
+}
+
+.badge.bg-policy-badge {
   margin-right: 5px;
-  background-color: var(--color-primary) !important;
-  color: var(--text-color) !important;
+  background-color: var(--color-primary);
+  color: var(--color-text);
+}
+
+.badge.bg-retention-badge-warning {
+  background-color: var(--color-badge-warning);
+}
+
+.badge.bg-retention-badge-danger {
+  background-color: var(--color-badge-danger);
+}
+
+.badge.bg-retention-badge-info {
+  background-color: var(--color-badge-info);
+}
+
+.badge.bg-retention-badge-primary {
+  background-color: var(--color-badge-primary);
+}
+
+.badge.bg-retention-badge-secondary {
+  background-color: var(--color-badge-secondary);
+}
+
+.badge.bg-retention-badge-success {
+  background-color: var(--color-badge-success);
+}
+
+.badge.bg-snapshot-pin {
+  background-color: var(--color-primary);
+  color: var(--color-text);
 }
 
 .page-title {
@@ -449,7 +480,7 @@ nav.navbar {
   margin-bottom: 0px;
 }
 
-.hash-value {
+.snapshot-hash {
   font-family: 'Courier New', Courier, monospace;
   font-size: 80%;
   font-weight: bold;
@@ -457,6 +488,7 @@ nav.navbar {
 
 .snapshot-description {
   font-size: 80%;
+  color: var(--color-text-body);
 }
 
 .log-parameter {
diff --git a/src/css/Theme.css b/src/css/Theme.css
index e7102fb..32188eb 100644
--- a/src/css/Theme.css
+++ b/src/css/Theme.css
@@ -9,19 +9,19 @@
   --color-select: #f2f9ff;
   --color-link: #2A7FFF;
 
-  --text-color: #ffffff;
-  --text-color-body: #000000;
-  --text-color-nav: #000000;
+  --color-text: #ffffff;
+  --color-text-body: #000000;
+  --color-text-nav: #000000;
 
   --color-error: #d2475a;
   --color-danger: #d2475a;
 
-  --color-badge-warning: #D8A509;
-  --color-badge-primary: #47729A;
-  --color-badge-secondary: #6E7072;
-  --color-badge-info:#127D74;
-  --color-badge-danger:#C14B0B;
-  --color-badge-success:#498235;
+  --color-badge-warning: #C49508;
+  --color-badge-primary: #5B89B4;
+  --color-badge-secondary: #787A7D;
+  --color-badge-info:#159489;
+  --color-badge-danger:#F3712B;
+  --color-badge-success:#5DA745;
 }
 
 .dark {
@@ -35,19 +35,19 @@
   --color-select: #323232;
   --color-link: #6a8ec6;
 
-  --text-color: #cfcfcf;
-  --text-color-body: #cfcfcf;
-  --text-color-nav: #cfcfcf;
+  --color-text: #cfcfcf;
+  --color-text-body: #cfcfcf;
+  --color-text-nav: #cfcfcf;
   
   --color-error: #b31f04;
   --color-danger: #b31f04;
 
-  --color-badge-warning: #C49508;
-  --color-badge-primary: #5B89B4;
-  --color-badge-secondary: #787A7D;
-  --color-badge-info:#159489;
-  --color-badge-danger:#F3712B;
-  --color-badge-success:#5DA745;
+  --color-badge-warning: #D8A509;
+  --color-badge-primary: #47729A;
+  --color-badge-secondary: #6E7072;
+  --color-badge-info:#127D74;
+  --color-badge-danger:#C14B0B;
+  --color-badge-success:#498235;
 }
 
 .pastel {
@@ -60,9 +60,9 @@
   --color-select: #f2f9ff;
   --color-link: #2A7FFF;
   
-  --text-color: #000000;
-  --text-color-body: #000000;
-  --text-color-nav: #c095e4;
+  --color-text: #000000;
+  --color-text-body: #000000;
+  --color-text-nav: #c095e4;
 
   --color-error: #ffadad;
   --color-danger: #ffadad;
@@ -85,9 +85,9 @@
   --color-select: #f2f9ff;
   --color-link: #03045E;
   
-  --text-color: #ffffff;
-  --text-color-body: #03045E;
-  --text-color-nav: #03045E;
+  --color-text: #ffffff;
+  --color-text-body: #03045E;
+  --color-text-nav: #03045E;
 
   --color-error: #d2475a;
   --color-danger: #d2475a;

From c8a23e5f02a11859040aece18026c3b49ce41556 Mon Sep 17 00:00:00 2001
From: lupusA <lupusapps@gmail.com>
Date: Fri, 29 Sep 2023 20:36:43 +0200
Subject: [PATCH 4/9] Further refactoring of the css file

---
 src/PreferencesView.jsx |  2 +-
 src/SnapshotsTable.jsx  |  2 +-
 src/css/App.css         | 80 ++++++++++++++++++++++-------------------
 src/css/Theme.css       |  6 ++--
 4 files changed, 48 insertions(+), 42 deletions(-)

diff --git a/src/PreferencesView.jsx b/src/PreferencesView.jsx
index ea13d2a..6a05838 100644
--- 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
index d566a12..ed83749 100644
--- a/src/SnapshotsTable.jsx
+++ b/src/SnapshotsTable.jsx
@@ -250,7 +250,7 @@ export class SnapshotsTable extends Component {
             })
         }}
             title={x.description + " - Click to update snapshot description."}
-            className={x.description ? "text-warning" : "snapshot-description"}><b><FontAwesomeIcon icon={faFileAlt} /></b></a>;
+            className={x.description ? "snapshot-description-set" : "snapshot-description"}><b><FontAwesomeIcon icon={faFileAlt} /></b></a>;
     }
 
     newPinFor(x) {
diff --git a/src/css/App.css b/src/css/App.css
index 6310b23..00de6b6 100644
--- a/src/css/App.css
+++ b/src/css/App.css
@@ -11,10 +11,6 @@ body {
   color: var(--color-text-body);
 }
 
-.select_theme {
-  font-size: 90%;
-}
-
 .options-select {
   overflow: ellipsis
 }
@@ -152,27 +148,32 @@ a:active {
   background-color: var(--background-color);
 }
 
-.navbar-light .navbar-nav .nav-link {
+.navbar-light .navbar-nav .nav-link,
+.navbar-light .navbar-nav .nav-link.active,
+.navbar-light .navbar-nav .show>.nav-link {
   color: var(--color-text-nav);
 }
 
-.nav-link:hover {
-  color: var(--color-text-nav) !important;
+.navbar-light .navbar-nav .nav-link:hover {
+  color: var(--color-text-nav);
   filter: brightness(80%);
 }
 
 .form-control,
+.form-control[readonly],
 .form-control:focus,
 .form-control:active,
-.form-control:hover {
-  color: var(--color-text-body) !important;
-  background-color: var(--background-color) !important;
+.form-control:hover,
+.form-control:disabled {
+  color: var(--color-text-body);
+  background-color: var(--background-color);
 }
 
 .form-select,
 .form-select:focus,
 .form-select:active,
-form-select:hover {
+.form-select:hover,
+.form-select:disabled {
   color: var(--color-text-body);
   background-color: var(--background-color);
 }
@@ -180,7 +181,8 @@ form-select:hover {
 .form-control-sm,
 .form-control-sm:focus,
 .form-control-sm:active,
-.form-control-sm:hover {
+.form-control-sm:hover,
+.form-control-sm:disabled {
   color: var(--color-text-body);
   background-color: var(--background-color);
 }
@@ -188,36 +190,43 @@ form-select:hover {
 .form-check-input,
 .form-check-input:focus,
 .form-check-input:active,
-.form-control-sm:hover {
+.form-check-input:disabled {
   color: var(--color-text-body);
 }
 
-.navbar-light .navbar-nav .nav-link.active,
-.navbar-light .navbar-nav .show>.nav-link {
-  color: var(--color-text-nav);
+.accordion-body,
+.accordion-button:not(.collapsed) {
+  color: var(--color-text-body);
+  background-color: var(--background-color);
 }
 
-.accordion-body {
-  color: var(--color-text-body) !important;
-  background-color: var(--background-color) !important;
+.accordion-button {
+  padding: 10px;
+  font-weight: bold;
+  color: var(--color-text-body);
+  background-color: var(--background-color)
 }
 
-.accordion-button {
-  background-color: var(--background-color) !important;
-  color: var(--color-text-body) !important;
+.accordion-button.collapsed {
+  font-weight: bold;
+  padding: 10px;
 }
 
-.accordion-button:not(.collapsed) {
-  color: var(--color-text-body);
-  background-color: var(--background-color);
+.accordion-button:focus {
+  box-shadow: 0 0 0 0.10rem var(--color-badge-primary);
+}
+
+.accordion {
+  border-color: #aaa;
 }
 
 .accordion-button:link,
 .accordion-button:visited,
 .accordion-button:hover,
 .accordion-button:active {
-  background-color: var(--color-select);
   color: var(--color-text-body);
+  background-color: var(--background-color);
+  filter: brightness(85%)
 }
 
 .popover {
@@ -308,17 +317,6 @@ form-select:hover {
   display: none;
 }
 
-.accordion-button {
-  padding: 10px;
-  font-weight: bold;
-}
-
-.accordion-button.collapsed {
-  padding: 10px;
-  font-weight: bold;
-  background-color: #f8f8ff;
-}
-
 div.tab-body {
   padding: 10px;
   border-left: 1px solid #ccc;
@@ -491,6 +489,14 @@ nav.navbar {
   color: var(--color-text-body);
 }
 
+.snapshot-description-set {
+  color: var(--color-badge-warning);
+}
+
+.select-theme {
+  font-size: 90%;
+}
+
 .log-parameter {
   color: #000080;
   font-weight: bold;
diff --git a/src/css/Theme.css b/src/css/Theme.css
index 32188eb..7d00c77 100644
--- a/src/css/Theme.css
+++ b/src/css/Theme.css
@@ -39,10 +39,10 @@
   --color-text-body: #cfcfcf;
   --color-text-nav: #cfcfcf;
   
-  --color-error: #b31f04;
-  --color-danger: #b31f04;
+  --color-error: #891905;
+  --color-danger: #891905;
 
-  --color-badge-warning: #D8A509;
+  --color-badge-warning: #C49508;
   --color-badge-primary: #47729A;
   --color-badge-secondary: #6E7072;
   --color-badge-info:#127D74;

From 96115b3e2b96cc61fb9efbd807f6f0e99743d8b4 Mon Sep 17 00:00:00 2001
From: lupusA <lupusapps@gmail.com>
Date: Fri, 29 Sep 2023 21:36:27 +0200
Subject: [PATCH 5/9] Deleted obsolet css statements

---
 src/css/App.css | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/css/App.css b/src/css/App.css
index 00de6b6..5811880 100644
--- a/src/css/App.css
+++ b/src/css/App.css
@@ -216,10 +216,6 @@ a:active {
   box-shadow: 0 0 0 0.10rem var(--color-badge-primary);
 }
 
-.accordion {
-  border-color: #aaa;
-}
-
 .accordion-button:link,
 .accordion-button:visited,
 .accordion-button:hover,
@@ -478,6 +474,10 @@ nav.navbar {
   margin-bottom: 0px;
 }
 
+.select-theme {
+  font-size: 90%;
+}
+
 .snapshot-hash {
   font-family: 'Courier New', Courier, monospace;
   font-size: 80%;
@@ -493,10 +493,6 @@ nav.navbar {
   color: var(--color-badge-warning);
 }
 
-.select-theme {
-  font-size: 90%;
-}
-
 .log-parameter {
   color: #000080;
   font-weight: bold;

From 6a881e009f4ebba13bcdc2a9e93085b19a1963a6 Mon Sep 17 00:00:00 2001
From: lupusA <lupusapps@gmail.com>
Date: Sat, 30 Sep 2023 09:46:38 +0200
Subject: [PATCH 6/9] Adjusting colors and refactor css

---
 src/css/App.css   | 49 ++++++++++++++++++++++++++---------------------
 src/css/Theme.css |  9 ++++-----
 2 files changed, 31 insertions(+), 27 deletions(-)

diff --git a/src/css/App.css b/src/css/App.css
index 5811880..17332b7 100644
--- a/src/css/App.css
+++ b/src/css/App.css
@@ -130,17 +130,14 @@ a:active {
   filter: brightness(80%);
 }
 
-.table {
-  color: var(--color-text-body);
-}
-
+.table,
 .table-hover>tbody>tr:hover>* {
   color: var(--color-text-body);
 }
 
 .table-striped>tbody>tr:nth-of-type(odd)>* {
   color: var(--color-text-body);
-  background-color: var(--color-stripe);
+  background-color: var(--color-select);
 }
 
 .table-striped>tbody>tr:nth-of-type(even)>* {
@@ -161,7 +158,6 @@ a:active {
 
 .form-control,
 .form-control[readonly],
-.form-control:focus,
 .form-control:active,
 .form-control:hover,
 .form-control:disabled {
@@ -170,7 +166,6 @@ a:active {
 }
 
 .form-select,
-.form-select:focus,
 .form-select:active,
 .form-select:hover,
 .form-select:disabled {
@@ -179,7 +174,6 @@ a:active {
 }
 
 .form-control-sm,
-.form-control-sm:focus,
 .form-control-sm:active,
 .form-control-sm:hover,
 .form-control-sm:disabled {
@@ -187,8 +181,17 @@ a:active {
   background-color: var(--background-color);
 }
 
-.form-check-input,
+.form-select:focus,
+.form-control:focus,
+.form-control-sm:focus,
 .form-check-input:focus,
+.accordion-button:focus {
+  color: var(--color-text-body);
+  background-color: var(--background-color);
+  box-shadow: 0 0 0 0.10rem var(--color-primary);
+}
+
+.form-check-input,
 .form-check-input:active,
 .form-check-input:disabled {
   color: var(--color-text-body);
@@ -207,22 +210,24 @@ a:active {
   background-color: var(--background-color)
 }
 
-.accordion-button.collapsed {
-  font-weight: bold;
-  padding: 10px;
-}
-
-.accordion-button:focus {
-  box-shadow: 0 0 0 0.10rem var(--color-badge-primary);
-}
-
 .accordion-button:link,
 .accordion-button:visited,
 .accordion-button:hover,
-.accordion-button:active {
+.accordion-button:active,
+.accordion-button:focus-within,
+.accordion-button:focus-visible {
   color: var(--color-text-body);
-  background-color: var(--background-color);
-  filter: brightness(85%)
+  background-color: var(--color-select);
+  filter: brightness(95%)
+}
+
+.accordion-item {
+  border: 1px solid rgba(0,0,0,.125);
+}
+
+.accordion-button.collapsed {
+  font-weight: bold;
+  padding: 10px;
 }
 
 .popover {
@@ -342,8 +347,8 @@ div.tab-body {
 .modal-footer,
 .modal-header,
 .modal-body {
-  background-color: var(--background-color);
   color: var(--color-text-body);
+  background-color: var(--background-color);
 }
 
 #mountedPath {
diff --git a/src/css/Theme.css b/src/css/Theme.css
index 7d00c77..82fea08 100644
--- a/src/css/Theme.css
+++ b/src/css/Theme.css
@@ -6,7 +6,7 @@
   --color-warning: #e1704b;
   --color-success: #5ea5cd;
   --color-submit: #00B4D8;
-  --color-select: #f2f9ff;
+  --color-select: #f4f4f4;
   --color-link: #2A7FFF;
 
   --color-text: #ffffff;
@@ -31,8 +31,7 @@
   --color-warning: #7e0d6b;
   --color-success: #0d9aab;
   --color-submit: #00B4D8;
-  --color-stripe: #323232;
-  --color-select: #323232;
+  --color-select: #2c2c2c;
   --color-link: #6a8ec6;
 
   --color-text: #cfcfcf;
@@ -57,7 +56,7 @@
   --color-warning: #ffd6a5;
   --color-success: #bdb2ff;
   --color-submit: #a0c4ff;
-  --color-select: #f2f9ff;
+  --color-select: #f5f4f4;
   --color-link: #2A7FFF;
   
   --color-text: #000000;
@@ -82,7 +81,7 @@
   --color-warning: #e8cc2a;
   --color-success: #0077B6;
   --color-submit: #00B4D8;
-  --color-select: #f2f9ff;
+  --color-select: #f5f4f4;
   --color-link: #03045E;
   
   --color-text: #ffffff;

From 932c3cc48cc8c4c032236b460a6c810e2705f99c Mon Sep 17 00:00:00 2001
From: lupusA <lupusapps@gmail.com>
Date: Sat, 30 Sep 2023 12:14:38 +0200
Subject: [PATCH 7/9] Dummy commit

---
 src/css/App.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/css/App.css b/src/css/App.css
index 17332b7..4e1d38c 100644
--- a/src/css/App.css
+++ b/src/css/App.css
@@ -11,6 +11,7 @@ body {
   color: var(--color-text-body);
 }
 
+
 .options-select {
   overflow: ellipsis
 }

From 8ecd091beea8c6705642a9128b05bee95812e752 Mon Sep 17 00:00:00 2001
From: lupusA <lupusapps@gmail.com>
Date: Sun, 1 Oct 2023 09:26:37 +0200
Subject: [PATCH 8/9] Further refactoring. Properly overriding bootstrap

---
 public/index.html |   2 +-
 src/css/App.css   | 233 +++++++++++++++++-----------------------------
 src/css/Theme.css |  12 ++-
 3 files changed, 92 insertions(+), 155 deletions(-)

diff --git a/public/index.html b/public/index.html
index f22fed5..32f1d80 100644
--- 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/css/App.css b/src/css/App.css
index 4e1d38c..3a94164 100644
--- a/src/css/App.css
+++ b/src/css/App.css
@@ -11,226 +11,165 @@ body {
   color: var(--color-text-body);
 }
 
-
-.options-select {
+#kopia .options-select {
   overflow: ellipsis
 }
 
-.btn-close {
+#kopia .btn-close {
   background-color: var(--background-color);
 }
 
-.btn {
+#kopia .btn {
   color: var(--color-text);
   margin-right: 5px;
 }
 
-.btn-primary {
+#kopia .btn:hover,
+#kopia .btn:focus,
+#kopia .btn:active,
+#kopia .btn:disabled {
+  color: var(--color-text);
+  filter: brightness(80%);
+}
+
+#kopia .btn-primary {
   background-color: var(--color-primary);
   border-color: var(--color-primary);
 }
 
-.btn-secondary {
+#kopia .btn-secondary {
   background-color: var(--color-secondary);
   border-color: var(--color-secondary);
 }
 
-.btn-submit {
+#kopia .btn-submit {
   background-color: var(--color-submit);
   border-color: var(--color-submit);
 }
 
-.btn-success {
+#kopia .btn-success {
   background-color: var(--color-success);
   border-color: var(--color-success);
 }
 
-.btn-warning {
+#kopia .btn-warning {
   background-color: var(--color-warning);
   border-color: var(--color-warning);
 }
 
-.btn-danger {
+#kopia .btn-danger {
   background-color: var(--color-danger);
   border-color: var(--color-danger);
 }
 
-.btn-primary:hover,
-.btn-primary:focus,
-.btn-primary:active,
-.btn-primary:disabled {
-  background-color: var(--color-primary);
-  border-color: var(--color-primary);
-  color: var(--color-text);
-  filter: brightness(80%);
-}
-
-.btn-secondary:hover,
-.btn-secondary:focus,
-.btn-secondary:active,
-.btn-secondary:disabled {
-  background-color: var(--color-secondary);
-  border-color: var(--color-secondary);
-  color: var(--color-text);
-  filter: brightness(80%);
-}
-
-.btn-warning:hover,
-.btn-warning:focus,
-.btn-warning:active,
-.btn-warning:disabled {
-  background-color: var(--color-warning);
-  border-color: var(--color-warning);
-  color: var(--color-text);
-  filter: brightness(80%);
-}
-
-.btn-success:hover,
-.btn-success:focus,
-.btn-success:active,
-.btn-success:disabled {
-  background-color: var(--color-success);
-  border-color: var(--color-success);
-  color: var(--color-text);
-  filter: brightness(80%);
-}
-
-.btn-danger:hover,
-.btn-danger:focus,
-.btn-danger:active,
-.btn-danger:disabled {
-  background-color: var(--color-danger);
-  border-color: var(--color-danger);
-  color: var(--color-text);
-  filter: brightness(80%);
-}
-
-.btn-submit:hover,
-.btn-submit:focus,
-.btn-submit:active,
-.btn-submit:disabled {
-  background-color: var(--color-submit);
-  border-color: var(--color-submit);
-  color: var(--color-text);
-  filter: brightness(80%);
-}
-
-.breadcrumb {
-  color: var(--color-text-body);
-}
-
-a,
-.breadcrumb-item,
-.breadcrumb-item.active {
+#kopia a,
+#kopia .breadcrumb-item,
+#kopia .breadcrumb-item.active {
   color: var(--color-link);
 }
 
-a:hover,
-a:active {
+#kopia a:hover,
+#kopia a:active {
   color: var(--color-link);
   filter: brightness(80%);
 }
 
-.table,
-.table-hover>tbody>tr:hover>* {
+#kopia .table,
+#kopia .table-hover>tbody>tr:hover>* {
   color: var(--color-text-body);
 }
 
-.table-striped>tbody>tr:nth-of-type(odd)>* {
+#kopia .table-striped>tbody>tr:nth-of-type(odd)>* {
   color: var(--color-text-body);
   background-color: var(--color-select);
 }
 
-.table-striped>tbody>tr:nth-of-type(even)>* {
+#kopia .table-striped>tbody>tr:nth-of-type(even)>* {
   color: var(--color-text-body);
   background-color: var(--background-color);
 }
 
-.navbar-light .navbar-nav .nav-link,
-.navbar-light .navbar-nav .nav-link.active,
-.navbar-light .navbar-nav .show>.nav-link {
+#kopia nav.navbar {
+  padding-left: 10px;
+  padding-right: 10px;
+  margin-bottom: 10px;
+}
+
+#kopia .navbar-light .navbar-nav .nav-link,
+#kopia .navbar-light .navbar-nav .nav-link.active,
+#kopia .navbar-light .navbar-nav .show>.nav-link {
   color: var(--color-text-nav);
 }
 
-.navbar-light .navbar-nav .nav-link:hover {
+#kopia .navbar-light .navbar-nav .nav-link:hover {
   color: var(--color-text-nav);
   filter: brightness(80%);
 }
 
-.form-control,
-.form-control[readonly],
-.form-control:active,
-.form-control:hover,
-.form-control:disabled {
+#kopia .form-control {
   color: var(--color-text-body);
   background-color: var(--background-color);
 }
 
-.form-select,
-.form-select:active,
-.form-select:hover,
-.form-select:disabled {
+#kopia .form-select {
   color: var(--color-text-body);
   background-color: var(--background-color);
 }
 
-.form-control-sm,
-.form-control-sm:active,
-.form-control-sm:hover,
-.form-control-sm:disabled {
+#kopia .form-control-sm {
   color: var(--color-text-body);
   background-color: var(--background-color);
 }
 
-.form-select:focus,
-.form-control:focus,
-.form-control-sm:focus,
-.form-check-input:focus,
-.accordion-button:focus {
+#kopia .form-select:focus,
+#kopia .form-control:focus,
+#kopia .form-control-sm:focus,
+#kopia .form-check-input:focus,
+#kopia .accordion-button:focus {
   color: var(--color-text-body);
   background-color: var(--background-color);
   box-shadow: 0 0 0 0.10rem var(--color-primary);
 }
 
-.form-check-input,
-.form-check-input:active,
-.form-check-input:disabled {
+#kopia .form-check-input {
   color: var(--color-text-body);
 }
 
-.accordion-body,
-.accordion-button:not(.collapsed) {
+#kopia .form-text {
+  color: var(--color-text-form-help)
+}
+
+#kopia .accordion-body,
+#kopia .accordion-button:not(.collapsed) {
   color: var(--color-text-body);
   background-color: var(--background-color);
 }
 
-.accordion-button {
+#kopia .accordion-button {
   padding: 10px;
   font-weight: bold;
   color: var(--color-text-body);
   background-color: var(--background-color)
 }
 
-.accordion-button:link,
-.accordion-button:visited,
-.accordion-button:hover,
-.accordion-button:active,
-.accordion-button:focus-within,
-.accordion-button:focus-visible {
+#kopia .accordion-button.collapsed {
+  font-weight: bold;
+  padding: 10px;
+}
+
+#kopia .accordion-button:active,
+#kopia .accordion-button:visited,
+#kopia .accordion-button:hover,
+#kopia .accordion-button:focus {
   color: var(--color-text-body);
   background-color: var(--color-select);
   filter: brightness(95%)
 }
 
-.accordion-item {
+#kopia .accordion-item {
   border: 1px solid rgba(0,0,0,.125);
 }
 
-.accordion-button.collapsed {
-  font-weight: bold;
-  padding: 10px;
-}
-
 .popover {
   max-width: 1000px;
 }
@@ -339,15 +278,15 @@ div.tab-body {
   width: 400px;
 }
 
-.version-info {
+#kopia .version-info {
   padding-left: 10px;
   color: #aaa;
   font-size: 80%;
 }
 
-.modal-footer,
-.modal-header,
-.modal-body {
+#kopia .modal-footer,
+#kopia .modal-header,
+#kopia .modal-body {
   color: var(--color-text-body);
   background-color: var(--background-color);
 }
@@ -396,41 +335,41 @@ div.tab-body {
   margin: 2px;
 }
 
-.badge {
-  margin-block-start: 5px;
-}
-
-.badge.bg-policy-badge {
+#kopia .badge.bg-policy-badge {
   margin-right: 5px;
   background-color: var(--color-primary);
   color: var(--color-text);
 }
 
-.badge.bg-retention-badge-warning {
+#kopia .badge {
+  margin-block-start: 5px;
+}
+
+#kopia .badge.bg-retention-badge-warning {
   background-color: var(--color-badge-warning);
 }
 
-.badge.bg-retention-badge-danger {
+#kopia .badge.bg-retention-badge-danger {
   background-color: var(--color-badge-danger);
 }
 
-.badge.bg-retention-badge-info {
+#kopia .badge.bg-retention-badge-info {
   background-color: var(--color-badge-info);
 }
 
-.badge.bg-retention-badge-primary {
+#kopia .badge.bg-retention-badge-primary {
   background-color: var(--color-badge-primary);
 }
 
-.badge.bg-retention-badge-secondary {
+#kopia .badge.bg-retention-badge-secondary{
   background-color: var(--color-badge-secondary);
 }
 
-.badge.bg-retention-badge-success {
+#kopia .badge.bg-retention-badge-success {
   background-color: var(--color-badge-success);
 }
 
-.badge.bg-snapshot-pin {
+#kopia .badge.bg-snapshot-pin {
   background-color: var(--color-primary);
   color: var(--color-text);
 }
@@ -460,18 +399,12 @@ div.tab-body {
   font-family: monospace;
 }
 
-nav.navbar {
-  padding-left: 10px;
-  padding-right: 10px;
-  margin-bottom: 10px;
-}
-
 .vpadded {
   padding-top: 6px;
   padding-bottom: 6px;
 }
 
-.multiselect {
+#kopia .multiselect {
   width: 20px;
   padding-left: 35px;
   padding-top: 0x;
@@ -480,22 +413,22 @@ nav.navbar {
   margin-bottom: 0px;
 }
 
-.select-theme {
+#kopia .select-theme {
   font-size: 90%;
 }
 
-.snapshot-hash {
+#kopia .snapshot-hash {
   font-family: 'Courier New', Courier, monospace;
   font-size: 80%;
   font-weight: bold;
 }
 
-.snapshot-description {
+#kopia .snapshot-description {
   font-size: 80%;
   color: var(--color-text-body);
 }
 
-.snapshot-description-set {
+#kopia .snapshot-description-set {
   color: var(--color-badge-warning);
 }
 
diff --git a/src/css/Theme.css b/src/css/Theme.css
index 82fea08..330bf0e 100644
--- a/src/css/Theme.css
+++ b/src/css/Theme.css
@@ -6,12 +6,13 @@
   --color-warning: #e1704b;
   --color-success: #5ea5cd;
   --color-submit: #00B4D8;
-  --color-select: #f4f4f4;
+  --color-select: #fefefe;
   --color-link: #2A7FFF;
 
   --color-text: #ffffff;
   --color-text-body: #000000;
   --color-text-nav: #000000;
+  --color-text-form-help :#6c757d;
 
   --color-error: #d2475a;
   --color-danger: #d2475a;
@@ -27,7 +28,7 @@
 .dark {
   --background-color: #222222;
   --color-primary: #1162b1;
-  --color-secondary: #0d9aab;
+  --color-secondary: #0d8b99;
   --color-warning: #7e0d6b;
   --color-success: #0d9aab;
   --color-submit: #00B4D8;
@@ -37,6 +38,7 @@
   --color-text: #cfcfcf;
   --color-text-body: #cfcfcf;
   --color-text-nav: #cfcfcf;
+  --color-text-form-help :#6c757d;
   
   --color-error: #891905;
   --color-danger: #891905;
@@ -56,12 +58,13 @@
   --color-warning: #ffd6a5;
   --color-success: #bdb2ff;
   --color-submit: #a0c4ff;
-  --color-select: #f5f4f4;
+  --color-select: #fefefe;
   --color-link: #2A7FFF;
   
   --color-text: #000000;
   --color-text-body: #000000;
   --color-text-nav: #c095e4;
+  --color-text-form-help :#6c757d;
 
   --color-error: #ffadad;
   --color-danger: #ffadad;
@@ -81,12 +84,13 @@
   --color-warning: #e8cc2a;
   --color-success: #0077B6;
   --color-submit: #00B4D8;
-  --color-select: #f5f4f4;
+  --color-select: #fefefe;
   --color-link: #03045E;
   
   --color-text: #ffffff;
   --color-text-body: #03045E;
   --color-text-nav: #03045E;
+  --color-text-form-help :#6c757d;
 
   --color-error: #d2475a;
   --color-danger: #d2475a;

From b5cab29f47d68914179245e754e77c948db8964f Mon Sep 17 00:00:00 2001
From: lupusA <lupusapps@gmail.com>
Date: Tue, 3 Oct 2023 10:35:49 +0200
Subject: [PATCH 9/9] Minor refactoring

---
 src/DirectoryObject.jsx | 17 +++++++----------
 src/SnapshotsTable.jsx  | 10 +++++-----
 src/css/App.css         | 17 +++++------------
 src/css/Theme.css       |  2 +-
 4 files changed, 18 insertions(+), 28 deletions(-)

diff --git a/src/DirectoryObject.jsx b/src/DirectoryObject.jsx
index 958c849..96512e7 100644
--- 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
index ed83749..18e3184 100644
--- 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
index 3a94164..86f57a9 100644
--- 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;
-}
\ No newline at end of file
diff --git a/src/css/Theme.css b/src/css/Theme.css
index 330bf0e..4d179b5 100644
--- 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;