From 335109285912a4df16d4f0aea90c0ba054089762 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Fri, 5 Mar 2021 19:27:44 +0100
Subject: [PATCH] fix accessibility in Profile component

---
 src/components/Profile.vue | 43 +++++++++++++++++++-------------------
 1 file changed, 21 insertions(+), 22 deletions(-)

diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index ba9429c..0f883f1 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -3,10 +3,10 @@
     <section class="text-white body-font">
       <div class="container mx-auto flex items-center md:flex-row flex-col">
         <div
-          class="flex flex-col md:pr-10 md:mb-0 mb-6 pr-0 w-full md:w-auto md:text-left text-center"
+          class="flex flex-col md:pr-10 md:mb-0 mb-6 pr-0 w-full md:w-auto md:text-left text-center text-black dark:text-gray-200"
         >
           <p class="text-3xl font-bold whitespace-nowrap">Max Mustermann</p>
-          <p class="text-md text-gray-200 whitespace-nowrap">Musterfirma > PR</p>
+          <p class="text-md whitespace-nowrap">Musterfirma > PR</p>
         </div>
         <div class="inline-flex md:ml-auto md:mr-0 mx-auto items-center space-x-4">
           <button
@@ -125,39 +125,38 @@
           </div>
           <div v-if="(activetab === 'laptimes')" class="tab-content block">
             <div class="py-4 w-full">
-              <section class="text-gray-400 bg-gray-900 body-font">
+              <section class="text-gray-400 dark:bg-gray-900 body-font">
                 <div class="container mx-auto">
                   <div class="lg:w-2/3 w-full mx-auto overflow-auto">
                     <table class="table-auto w-full text-left whitespace-no-wrap">
-                      <thead>
+                      <thead
+                        class="text-black bg-gray-300 dark:text-white text-sm dark:bg-gray-800"
+                      >
                         <tr>
                           <th
-                            class="px-4 py-3 title-font tracking-wider font-medium text-white text-sm bg-gray-800 rounded-tl rounded-bl"
+                            class="px-4 py-3 title-font tracking-wider font-medium"
                           >{{ $t('distance') }}</th>
                           <th
-                            class="px-4 py-3 title-font tracking-wider font-medium text-white text-sm bg-gray-800"
+                            class="px-4 py-3 title-font tracking-wider font-medium"
                           >{{ $t('lap_time') }}</th>
-                          <th
-                            class="w-10 title-font tracking-wider font-medium text-white text-sm bg-gray-800 rounded-tr rounded-br"
-                          ></th>
                         </tr>
                       </thead>
-                      <tbody>
-                        <tr>
-                          <td class="border-t-2 border-gray-800 px-4 py-3">400m</td>
-                          <td class="border-t-2 border-gray-800 px-4 py-3">0min 57s</td>
+                      <tbody class="text-gray-900 dark:text-gray-50">
+                        <tr class="border-t-2 border-gray-800">
+                          <td class="px-4 py-3">400m</td>
+                          <td class="px-4 py-3">0min 57s</td>
                         </tr>
-                        <tr>
-                          <td class="border-t-2 border-gray-800 px-4 py-3">400m</td>
-                          <td class="border-t-2 border-gray-800 px-4 py-3">1min 15s</td>
+                        <tr class="border-t-2 border-gray-800">
+                          <td class="px-4 py-3">400m</td>
+                          <td class="px-4 py-3">1min 15s</td>
                         </tr>
-                        <tr>
-                          <td class="border-t-2 border-gray-800 px-4 py-3">1km</td>
-                          <td class="border-t-2 border-gray-800 px-4 py-3">2min 50s</td>
+                        <tr class="border-t-2 border-gray-800">
+                          <td class="px-4 py-3">1km</td>
+                          <td class="px-4 py-3">2min 50s</td>
                         </tr>
-                        <tr>
-                          <td class="border-t-2 border-gray-800 px-4 py-3">1km</td>
-                          <td class="border-t-2 border-gray-800 px-4 py-3">3min 00s</td>
+                        <tr class="border-t-2 border-gray-800">
+                          <td class="px-4 py-3">1km</td>
+                          <td class="px-4 py-3">3min 00s</td>
                         </tr>
                       </tbody>
                     </table>