From 255babfd90bd3345ef2af94096a563aec2af002e Mon Sep 17 00:00:00 2001
From: Dmytro Shukaliuk <mityaua@users.noreply.github.com>
Date: Mon, 27 Jan 2025 17:34:44 +0200
Subject: [PATCH] Some styles improvements

---
 src/components/TableCell.vue | 18 ++----------------
 src/components/TableHead.vue |  6 +++++-
 src/components/TableRow.vue  |  8 +++++++-
 3 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/src/components/TableCell.vue b/src/components/TableCell.vue
index e97acff..f74dce7 100644
--- a/src/components/TableCell.vue
+++ b/src/components/TableCell.vue
@@ -60,7 +60,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-	<td class="table-cell">
+	<td class="border border-gray-200 py-3 dark:border-gray-700">
 		<div class="flex flex-wrap justify-center">
 			<a
 				class="text-base text-gray-600 duration-300 ease-in dark:text-gray-400"
@@ -78,24 +78,10 @@ onUnmounted(() => {
 				alt="Pronunciation"
 				width="16"
 				height="16"
-				:class="['sound-icon', isSpeaking ? 'opacity-100' : 'opacity-50']"
+				:class="['ml-2 cursor-pointer duration-300 ease-in', isSpeaking ? 'opacity-100' : 'opacity-50']"
 				:src="isSpeaking ? unMutedIcon : mutedIcon"
 				@click.prevent="!isSpeaking && startSpeech()"
 			/>
 		</div>
 	</td>
 </template>
-
-<style lang="postcss" scoped>
-.table-cell {
-	@apply py-3 hover:bg-blue-100 dark:hover:bg-gray-600;
-}
-
-.table-cell:nth-child(even) {
-	@apply bg-gray-100 hover:bg-blue-100 dark:bg-gray-800 dark:hover:bg-gray-600;
-}
-
-.sound-icon {
-	@apply ml-2 cursor-pointer duration-300 ease-in;
-}
-</style>
diff --git a/src/components/TableHead.vue b/src/components/TableHead.vue
index 6c7314e..a867f2f 100644
--- a/src/components/TableHead.vue
+++ b/src/components/TableHead.vue
@@ -44,7 +44,11 @@ const onColumnClick = (): void => {
 </script>
 
 <template>
-	<th class="sticky z-10 bg-gray-50 p-2 dark:bg-gray-700" width="33%" scope="col">
+	<th
+		class="sticky z-10 border border-gray-200 bg-gray-50 p-2 dark:border-gray-700 dark:bg-gray-600"
+		width="33.3333%"
+		scope="col"
+	>
 		<div class="flex items-center justify-center">
 			<p>{{ visibleColumnName }}</p>
 
diff --git a/src/components/TableRow.vue b/src/components/TableRow.vue
index 58e60f6..7b91201 100644
--- a/src/components/TableRow.vue
+++ b/src/components/TableRow.vue
@@ -6,7 +6,7 @@ defineProps<{ rowData: IVerb; searchQuery: string }>();
 </script>
 
 <template>
-	<tr class="border-b border-gray-200 dark:border-gray-700">
+	<tr class="border border-gray-200 hover:bg-blue-100 dark:border-gray-700 dark:hover:bg-gray-600">
 		<TableCell
 			v-for="(value, time) in rowData"
 			:key="time"
@@ -16,3 +16,9 @@ defineProps<{ rowData: IVerb; searchQuery: string }>();
 		/>
 	</tr>
 </template>
+
+<style lang="postcss" scoped>
+tr:nth-child(even) {
+	@apply bg-gray-100 hover:bg-blue-100 dark:bg-gray-800 dark:hover:bg-gray-600;
+}
+</style>