From 3e8967c147537afcbaae8038fee48c1f319528b7 Mon Sep 17 00:00:00 2001
From: Christoph Anderson <37236531+lupusA@users.noreply.github.com>
Date: Tue, 10 Oct 2023 19:19:19 +0200
Subject: [PATCH] fix(ui): Refactoring of themes (#193)

* - Fixed the badge colors
- Badge colors are now dependend on the theme

* 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>

* Started to refactor css

* Further refactoring of the css file

* Deleted obsolet css statements

* Adjusting colors and refactor css

* Dummy commit

* Further refactoring. Properly overriding bootstrap

* Minor refactoring

---------

Co-authored-by: Christoph Anderson <lupusapps@gmail.com>
---
 public/index.html            |   2 +-
 src/DirectoryBreadcrumbs.jsx |  14 +-
 src/DirectoryObject.jsx      |  17 +-
 src/PoliciesTable.jsx        |   2 +-
 src/PreferencesView.jsx      |   2 +-
 src/SnapshotsTable.jsx       |  28 ++--
 src/Table.jsx                |   7 +-
 src/css/App.css              | 304 ++++++++++++++++++++---------------
 src/css/Theme.css            |  74 ++++++---
 9 files changed, 257 insertions(+), 193 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/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/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/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/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 92bda9b..18e3184 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 ? "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
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 abe1f3a..86f57a9 100644
--- a/src/css/App.css
+++ b/src/css/App.css
@@ -8,171 +8,166 @@ body {
 }
 
 .container-fluid {
-  color: var(--text-color-body);
+  color: var(--color-text-body);
 }
 
-.select_theme {
-  font-size: 90%;
+#kopia .options-select {
+  overflow: ellipsis
 }
 
-.options-select {
-  overflow: ellipsis
+#kopia .btn-close {
+  background-color: var(--background-color);
 }
 
-.btn {
-  color: var(--text-color);
+#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 {
-  background-color: var(--color-primary);
-  border-color: var(--color-primary);
-  color: var(--text-color);
-  filter: brightness(80%);
+#kopia a,
+#kopia .breadcrumb-item,
+#kopia .breadcrumb-item.active {
+  color: var(--color-link);
 }
 
-.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
-  background-color: var(--color-secondary);
-  border-color: var(--color-secondary);
-  color: var(--text-color);
+#kopia a:hover,
+#kopia a:active {
+  color: var(--color-link);
   filter: brightness(80%);
 }
 
-.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%);
+#kopia .table,
+#kopia .table-hover>tbody>tr:hover>* {
+  color: var(--color-text-body);
 }
 
-.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%);
+#kopia .table-striped>tbody>tr:nth-of-type(odd)>* {
+  color: var(--color-text-body);
+  background-color: var(--color-select);
 }
 
-.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%);
+#kopia .table-striped>tbody>tr:nth-of-type(even)>* {
+  color: var(--color-text-body);
+  background-color: var(--background-color);
 }
 
-.btn-submit:hover, .btn-submit:focus, .btn-submit:active {
-  background-color: var(--color-submit);
-  border-color: var(--color-submit);
-  color: var(--text-color);
-  filter: brightness(80%);
+#kopia nav.navbar {
+  padding-left: 10px;
+  padding-right: 10px;
+  margin-bottom: 10px;
 }
 
-a {
-  color: var(--color-link);
+#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);
 }
 
-a:hover {
-  color: var(--color-link);
+#kopia .navbar-light .navbar-nav .nav-link:hover {
+  color: var(--color-text-nav);
   filter: brightness(80%);
 }
 
-.table {
-  color: var(--text-color-body);
-}
-
-.table-hover>tbody>tr:hover>* {
-  color: var(--text-color-body);
-}
-
-.table-striped>tbody>tr:nth-of-type(odd)>* {
-  color: var(--text-color-body);
-  background-color: var(--color-stripe);
-}
-
-.table-striped>tbody>tr:nth-of-type(even)>* {
-  color: var(--text-color-body);
+#kopia .form-control {
+  color: var(--color-text-body);
   background-color: var(--background-color);
 }
 
-.navbar-light .navbar-nav .nav-link {
-  color: var(--text-color-nav);
-}
-
-.nav-link:hover {
-  color: var(--text-color-nav) !important;
-  filter: brightness(80%);
-}
-
-.form-control, .form-control:focus, .form-control:active, .form-control:hover {
-  color: var(--text-color-body) !important;
-  background-color: var(--background-color) !important;
+#kopia .form-select {
+  color: var(--color-text-body);
+  background-color: var(--background-color);
 }
 
-.form-select, .form-select:focus, .form-select:active, form-select:hover {
-  color: var(--text-color-body);
+#kopia .form-control-sm {
+  color: var(--color-text-body);
   background-color: var(--background-color);
 }
 
-.form-control-sm, .form-control-sm:focus, .form-control-sm:active, .form-control-sm:hover {
-  color: var(--text-color-body);
+#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:focus, .form-check-input:active, .form-control-sm:hover {
-  color: var(--text-color-body);
+#kopia .form-check-input {
+  color: var(--color-text-body);
 }
 
-.navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show>.nav-link {
-  color: var(--text-color-nav);
+#kopia .form-text {
+  color: var(--color-text-form-help)
 }
 
-.accordion-body {
-  color: var(--text-color-body) !important;
-  background-color: var(--background-color) !important;
+#kopia .accordion-body,
+#kopia .accordion-button:not(.collapsed) {
+  color: var(--color-text-body);
+  background-color: var(--background-color);
 }
 
-.accordion-button  {
-  background-color: var(--background-color) !important;
-  color: var(--text-color-body) !important;
+#kopia .accordion-button {
+  padding: 10px;
+  font-weight: bold;
+  color: var(--color-text-body);
+  background-color: var(--background-color)
 }
 
-.accordion-button:not(.collapsed) {
-  color: var(--text-color-body);
-  background-color: var(--background-color);
+#kopia .accordion-button.collapsed {
+  font-weight: bold;
+  padding: 10px;
 }
 
-.accordion-button:link, .accordion-button:visited, .accordion-button:hover, .accordion-button:active  {
+#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);
-  color: var(--text-color-body);
+  filter: brightness(95%)
+}
+
+#kopia .accordion-item {
+  border: 1px solid rgba(0,0,0,.125);
 }
 
 .popover {
@@ -187,7 +182,7 @@ a:hover {
   height: 32px;
 }
 
-.active{
+.active {
   font-weight: bold;
 }
 
@@ -263,17 +258,6 @@ a: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;
@@ -294,19 +278,24 @@ div.tab-body {
   width: 400px;
 }
 
-.version-info {
+#kopia .version-info {
   padding-left: 10px;
-  color: #aaa;
+  color: var(--color-text-body);
   font-size: 80%;
 }
 
-#mountedPath {
-  color: #444;
+#kopia .modal-footer,
+#kopia .modal-header,
+#kopia .modal-body {
+  color: var(--color-text-body);
+  background-color: var(--background-color);
+}
+
+#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 {
@@ -317,21 +306,70 @@ 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(--color-text-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%;
   margin: 2px;
 }
 
-.policy-badge {
-  margin-block-start: 5px;
+#kopia .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);
+}
+
+#kopia .badge {
+  margin-block-start: 5px;
+}
+
+#kopia .badge.bg-retention-badge-warning {
+  background-color: var(--color-badge-warning);
+}
+
+#kopia .badge.bg-retention-badge-danger {
+  background-color: var(--color-badge-danger);
+}
+
+#kopia .badge.bg-retention-badge-info {
+  background-color: var(--color-badge-info);
+}
+
+#kopia .badge.bg-retention-badge-primary {
+  background-color: var(--color-badge-primary);
+}
+
+#kopia .badge.bg-retention-badge-secondary{
+  background-color: var(--color-badge-secondary);
+}
+
+#kopia .badge.bg-retention-badge-success {
+  background-color: var(--color-badge-success);
+}
+
+#kopia .badge.bg-snapshot-pin {
+  background-color: var(--color-primary);
+  color: var(--color-text);
 }
 
 .page-title {
@@ -359,18 +397,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;
@@ -379,18 +411,22 @@ nav.navbar {
   margin-bottom: 0px;
 }
 
-.hash-value {
+#kopia .select-theme {
+  font-size: 90%;
+}
+
+#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);
+}
+
+#kopia .snapshot-description-set {
+  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 c32125a..4d179b5 100644
--- a/src/css/Theme.css
+++ b/src/css/Theme.css
@@ -6,35 +6,49 @@
   --color-warning: #e1704b;
   --color-success: #5ea5cd;
   --color-submit: #00B4D8;
-  --color-select: #f2f9ff;
+  --color-select: #fefefe;
   --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-text-form-help :#6c757d;
 
   --color-error: #d2475a;
   --color-danger: #d2475a;
+
+  --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 {
   --background-color: #222222;
   --color-primary: #1162b1;
-  --color-secondary: #0d9aab;
+  --color-secondary: #0d8b99;
   --color-warning: #7e0d6b;
   --color-success: #0d9aab;
   --color-submit: #00B4D8;
-  --color-stripe: #323232;
-  --color-select: #323232;
-  --color-link: #6a8ec6;
+  --color-select: #2c2c2c;
+  --color-link: #799bd1;
 
-  --text-color: #cfcfcf;
-  --text-color-body: #cfcfcf;
-  --text-color-nav: #cfcfcf;
-  
+  --color-text: #cfcfcf;
+  --color-text-body: #cfcfcf;
+  --color-text-nav: #cfcfcf;
+  --color-text-form-help :#6c757d;
   
-  --color-error: #b31f04;
-  --color-danger: #b31f04;
+  --color-error: #891905;
+  --color-danger: #891905;
+
+  --color-badge-warning: #C49508;
+  --color-badge-primary: #47729A;
+  --color-badge-secondary: #6E7072;
+  --color-badge-info:#127D74;
+  --color-badge-danger:#C14B0B;
+  --color-badge-success:#498235;
 }
 
 .pastel {
@@ -44,15 +58,23 @@
   --color-warning: #ffd6a5;
   --color-success: #bdb2ff;
   --color-submit: #a0c4ff;
-  --color-select: #f2f9ff;
+  --color-select: #fefefe;
   --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-text-form-help :#6c757d;
 
   --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 {
@@ -62,13 +84,21 @@
   --color-warning: #e8cc2a;
   --color-success: #0077B6;
   --color-submit: #00B4D8;
-  --color-select: #f2f9ff;
+  --color-select: #fefefe;
   --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-text-form-help :#6c757d;
 
   --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
