From 6dafeebfe679bc7e527ac93f3254586286d2c65c Mon Sep 17 00:00:00 2001
From: KDSBrowne <kert.browne85@gmail.com>
Date: Wed, 15 Feb 2023 20:23:36 +0000
Subject: [PATCH] fix elements with insufficient color contrast

---
 bbb-learning-dashboard/src/App.js                    | 4 ++--
 bbb-learning-dashboard/src/components/UsersTable.jsx | 4 ++--
 bbb-learning-dashboard/src/index.css                 | 6 ++++++
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/bbb-learning-dashboard/src/App.js b/bbb-learning-dashboard/src/App.js
index ec55c60387..5b049cf1a2 100644
--- a/bbb-learning-dashboard/src/App.js
+++ b/bbb-learning-dashboard/src/App.js
@@ -557,7 +557,7 @@ class App extends React.Component {
         <hr className="my-8" />
         <div className="flex justify-between pb-8 text-xs text-gray-800 dark:text-gray-400 whitespace-nowrap flex-col sm:flex-row">
           <div className="flex flex-col justify-center mb-4 sm:mb-0">
-            <p>
+            <p className="text-gray-700">
               {
                 lastUpdated && (
                   <>
@@ -583,7 +583,7 @@ class App extends React.Component {
           </div>
           <button
             type="button"
-            className="border-2 border-gray-200 rounded-md px-4 py-2 bg-white focus:outline-none focus:ring ring-offset-2 focus:ring-gray-500 focus:ring-opacity-50"
+            className="border-2 text-gray-700 border-gray-200 rounded-md px-4 py-2 bg-white focus:outline-none focus:ring ring-offset-2 focus:ring-gray-500 focus:ring-opacity-50"
             onClick={this.handleSaveSessionData.bind(this)}
           >
             <FormattedMessage
diff --git a/bbb-learning-dashboard/src/components/UsersTable.jsx b/bbb-learning-dashboard/src/components/UsersTable.jsx
index 67c4593eda..a9ba3ff1da 100644
--- a/bbb-learning-dashboard/src/components/UsersTable.jsx
+++ b/bbb-learning-dashboard/src/components/UsersTable.jsx
@@ -253,7 +253,7 @@ class UsersTable extends React.Component {
                         </button>
                         { Object.values(user.intIds || {}).map((intId, index) => (
                           <>
-                            <p className="text-xs text-gray-600 dark:text-gray-400">
+                            <p className="text-xs text-gray-700 dark:text-gray-400">
                               <svg
                                 xmlns="http://www.w3.org/2000/svg"
                                 className="h-4 w-4 inline"
@@ -279,7 +279,7 @@ class UsersTable extends React.Component {
                             </p>
                             { intId.leftOn > 0
                               ? (
-                                <p className="text-xs text-gray-600 dark:text-gray-400">
+                                <p className="text-xs text-gray-700 dark:text-gray-400">
                                   <svg
                                     xmlns="http://www.w3.org/2000/svg"
                                     className="h-4 w-4 inline"
diff --git a/bbb-learning-dashboard/src/index.css b/bbb-learning-dashboard/src/index.css
index 4949bc1fe1..5cab593849 100644
--- a/bbb-learning-dashboard/src/index.css
+++ b/bbb-learning-dashboard/src/index.css
@@ -3,6 +3,12 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+  .text-gray-700 {
+    color: #374151 !important;
+  }
+}
+
 @layer utilities {
   .bg-inherit {
     background-color: inherit;