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