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