Further refactoring of the css file

kopia · Sep 29, 2023 · c8a23e5 · c8a23e5
1 parent 2263cdc
commit c8a23e5
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 42 deletions.
diff --git 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
@@ -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
@@ -11,10 +11,6 @@ body {
   color: var(--color-text-body);
 }
 
-.select_theme {
-  font-size: 90%;
-}
-
 .options-select {
   overflow: ellipsis
 }
@@ -152,72 +148,85 @@ 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);
 }
 
 .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);
 }
 
 .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
@@ -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;