improve readability of time lists

Author: why-Mia

src/components/MapDetails.vue

@@ -49,7 +49,8 @@
       label: 'Server',
       data: 'server',
       width: '30%',
-      alignmentClasses: 'text-left'
+      classes: 'text-sm text-gray-400',
+      alignmentClasses: 'text-left text-gray-300'
     },
     {
       label: 'Date',

src/components/PlayerDetails.vue

@@ -170,7 +170,8 @@
       label: 'Server',
       data: 'server',
       width: '30%',
-      alignmentClasses: 'text-left'
+      classes: 'text-sm text-gray-400',
+      alignmentClasses: 'text-left text-gray-300'
     },
     {
       label: 'Date',

src/components/RecentTimes.vue

@@ -43,20 +43,23 @@
       label: 'Player',
       data: 'name',
       width:'20%',
+      classes: 'font-semibold',
       alignmentClasses: 'text-left',
       link: timeLinks.playerLink
     }, 
     {
       label: 'Map',
       data: 'map',
       width: '20%',
+      classes: 'text-gray-200',
       alignmentClasses: 'text-right justify-end md:justify-start md:text-left',
       link: timeLinks.mapLink
     },
     {
       label: 'Server',
       data: 'server',
       width: '20%',
+      classes: 'text-sm text-gray-400',
       alignmentClasses: 'text-right justify-end md:justify-start md:text-left text-gray-300'
     },
     {

src/components/TimesListHeading.vue

@@ -12,7 +12,7 @@
 
 
 <template>
-  <div class="grid os-grid-cols-auto p-1 px-1 bg-main-900 fw-700 text-xs py-1.5 text-gray-200">
+  <div class="grid os-grid-cols-auto px-1 bg-main-900 fw-700 text-xs pt-1.5 pb-2 text-gray-200">
     <div v-for="(col,index) in props.cols" :key="index" class="grid-col px-1.5" :class="col.alignmentClasses">
       <div :class="col.alignmentClasses">{{ col.label }}</div>
     </div>

src/components/TimesListItem.vue

@@ -116,8 +116,8 @@
     'bg-main-500':
     'bg-main-600 odd:bg-main-700 hover:border-gray-400 border-transparent border-gray-400 hover:border-gray-200'
   ">
-    <div class="grid os-grid-cols-auto p-1 px-1
-       cursor-pointer transition-[padding border-color background-color] duration-200  hover:pb-2 relative"
+    <div class="grid os-grid-cols-auto p-1.5 px-1
+       cursor-pointer transition-[padding border-color background-color] duration-200  hover:pb-2.5 relative"
     :class="showDetails ?
       'pb-2' : ''" 
     @click="toggleDetails()"