Updated tables to support light/dark themes

reelyactive · Jan 18, 2024 · 6102188 · 6102188
1 parent d34202d
commit 6102188
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 20 deletions.
diff --git a/ambient-context/index.html b/ambient-context/index.html
@@ -204,8 +204,9 @@
               <table id="discreteData">
                 <!-- Stats -->
                 <tfoot>
-                  <tr class="bg-ambient bg-gradient text-white">
-                    <td colspan="4">
+                  <tr>
+                    <td class="text-body-secondary bg-body-secondary"
+                        colspan="4">
                       <ul class="list-inline text-center mb-1">
                         <li class="list-inline-item">
                           <span id="deviceCount" class="display-5"> 0 </span>
@@ -229,7 +230,7 @@
               <!-- Continuous -->
               <table id="continuousData">
                 <thead>
-                  <tr class="border border-bottom border-0">
+                  <tr>
                     <th class="display-1 bg-primary bg-gradient text-white"
                         colspan="3">
                       <span class="display-4"> Ambient Context </span>

diff --git a/hello-beaver/index.html b/hello-beaver/index.html
@@ -177,25 +177,25 @@
                 <div class="card-body">
                   <span id="deviceCount" class="card-text display-4"> 0 </span>
                 </div>
-                <div class="card-footer bg-dark text-white"> devices </div>
+                <div class="card-footer text-body-secondary"> devices </div>
               </div>
               <div class="card">
                 <div class="card-body">
                   <span id="raddecRate" class="card-text display-4"> 0.0 </span>
                 </div>
-                <div class="card-footer bg-dark text-white"> raddec/s </div>
+                <div class="card-footer text-body-secondary"> raddec/s </div>
               </div>
               <div class="card">
                 <div class="card-body">
                   <span id="dynambRate" class="card-text display-4"> 0.0 </span>
                 </div>
-                <div class="card-footer bg-dark text-white"> dynamb/s </div>
+                <div class="card-footer text-body-secondary"> dynamb/s </div>
               </div>
               <div class="card">
                 <div class="card-body">
                   <span id="spatemRate" class="card-text display-4"> 0.0 </span>
                 </div>
-                <div class="card-footer bg-dark text-white"> spatem/s </div>
+                <div class="card-footer text-body-secondary"> spatem/s </div>
               </div>
             </div>
           </div>

diff --git a/hello-dynamb/index.html b/hello-dynamb/index.html
@@ -193,8 +193,9 @@
               <table id="devicestable">
                 <!-- Stats -->
                 <tfoot>
-                  <tr class="bg-ambient bg-gradient text-white">
-                    <td colspan="4">
+                  <tr>
+                    <td class="text-body-secondary bg-body-secondary"
+                        colspan="4">
                       <ul class="list-inline text-center mb-1">
                         <li class="list-inline-item">
                           <span id="deviceCount" class="display-5"> 0 </span>
@@ -213,7 +214,7 @@
             <div class="col-12 col-xxl-5">
               <table class="table table-hover text-center">
                 <thead>
-                  <tr class="border border-bottom border-0">
+                  <tr>
                     <th class="display-1 bg-primary bg-gradient text-white">
                       <span class="display-4"> Hello dynamb! </span>
                     </th>

diff --git a/hello-spatem/index.html b/hello-spatem/index.html
@@ -193,8 +193,9 @@
               <table id="devicestable">
                 <!-- Stats -->
                 <tfoot>
-                  <tr class="bg-ambient bg-gradient text-white">
-                    <td colspan="4">
+                  <tr>
+                    <td class="text-body-secondary bg-body-secondary"
+                        colspan="4">
                       <ul class="list-inline text-center mb-1">
                         <li class="list-inline-item">
                           <span id="deviceCount" class="display-5"> 0 </span>
@@ -213,7 +214,7 @@
             <div class="col-12 col-xxl-5">
               <table class="table table-hover text-center">
                 <thead>
-                  <tr class="border border-bottom border-0">
+                  <tr">
                     <th class="display-1 bg-primary bg-gradient text-white">
                       <span class="display-4"> Hello spatem! </span>
                     </th>

diff --git a/js/occupancy-observer.js b/js/occupancy-observer.js
@@ -1,5 +1,5 @@
 /**
- * Copyright reelyActive 2022-2023
+ * Copyright reelyActive 2022-2024
  * We believe in an open Internet of Things
  */
 
@@ -234,7 +234,7 @@ function updateOccupancyRow(status, deviceSignature) {
       createElement('td', null, status.title || deviceSignature),
       createElement('td', 'animate-breathing',
                     createOccupancyIcon(status.current)),
-      createElement('td', 'table-info',
+      createElement('td', 'bg-body-secondary',
                     createOccupancyIcon(status.previous[0])),
       createElement('td', null, createOccupancyIcon(status.previous[1])),
       createElement('td', null, createOccupancyIcon(status.previous[2]))
@@ -258,7 +258,7 @@ function createOccupancyIcon(isMotionDetected) {
       iconClass = 'fas fa-times-circle text-success';
       break;
     default:
-      iconClass = 'fas fa-question-circle text-light';
+      iconClass = 'fas fa-question-circle text-body-tertiary';
   }
 
   return createElement('i', iconClass);

diff --git a/live-directory/index.html b/live-directory/index.html
@@ -179,8 +179,9 @@
               <table id="discreteData">
                 <!-- Stats -->
                 <tfoot>
-                  <tr class="bg-ambient bg-gradient text-white">
-                    <td colspan="4">
+                  <tr>
+                    <td class="text-body-secondary bg-body-secondary"
+                        colspan="4">
                       <ul class="list-inline text-center mb-1">
                         <li class="list-inline-item">
                           <span id="deviceCount" class="display-5"> 0 </span>

diff --git a/occupancy-observer/index.html b/occupancy-observer/index.html
@@ -183,13 +183,14 @@
               <table class="table table-hover text-center">
                 <thead>
                   <tr>
-                    <td id="time" class="bg-dark bg-gradient text-white display-1"
+                    <td id="time"
+                        class="bg-dark bg-gradient text-white display-1"
                         colspan="5"> : </td>
                   </tr>
                   <tr class="text-muted">
                     <th> <i class="fas fa-barcode"></i> </th>
                     <th> <i class="fas fa-clock"></i> </th>
-                    <th class="table-info"> <small>-1m</small> </th>
+                    <th class="bg-body-secondary"> <small>-1m</small> </th>
                     <th> <small>-2m</small> </th>
                     <th> <small>-3m</small> </th>
                   </tr>