- Fixed the badge colors

- Badge colors are now dependend on the theme
lupusA · Sep 18, 2023 · bff2735 · bff2735
1 parent 6c2a2d4
commit bff2735
Show file tree

Hide file tree

Showing 2 changed files with 116 additions and 19 deletions.
diff --git 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
@@ -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;
 }