From 7d5af1b56ce7b5bad75545c9ee6ab7ed63d68ee8 Mon Sep 17 00:00:00 2001
From: Dmytro Shukaliuk <mityaua@gmail.com>
Date: Tue, 28 Jan 2025 20:32:44 +0200
Subject: [PATCH] Styles updates

---
 src/components/EmptyTableData.vue | 2 +-
 src/components/SearchInput.vue    | 2 +-
 src/components/Table.vue          | 2 +-
 src/components/TableHead.vue      | 4 ++--
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/EmptyTableData.vue b/src/components/EmptyTableData.vue
index c1797d1..34f21b9 100644
--- a/src/components/EmptyTableData.vue
+++ b/src/components/EmptyTableData.vue
@@ -5,6 +5,6 @@ import EmptySearch from "@assets/empty-search.svg";
 <template>
 	<div class="flex items-center justify-center py-4 text-lg">
 		<span>Nothing found</span>
-		<EmptySearch class="ml-2" width="50" height="50" />
+		<EmptySearch class="ml-2" width="35" height="35" />
 	</div>
 </template>
diff --git a/src/components/SearchInput.vue b/src/components/SearchInput.vue
index 8d0ae97..75c65d9 100644
--- a/src/components/SearchInput.vue
+++ b/src/components/SearchInput.vue
@@ -71,7 +71,7 @@ const sendGoogleEvent = (searchValue: string): void => {
 
 		<!-- Clears search button -->
 		<button
-			class="me-2 ml-2 inline-flex items-center rounded-lg border border-gray-300 p-2.5 text-center text-sm font-medium text-blue-700 hover:bg-gray-300 hover:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-blue-500 dark:text-blue-500 dark:hover:bg-blue-500 dark:hover:text-white dark:focus:ring-blue-800"
+			class="ml-2 inline-flex items-center rounded-lg border border-gray-300 p-2.5 text-center text-sm font-medium text-blue-700 hover:bg-gray-300 hover:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-blue-500 dark:text-blue-500 dark:hover:bg-blue-500 dark:hover:text-white dark:focus:ring-blue-800"
 			v-show="query"
 			@click="handleClearSearch"
 			type="button"
diff --git a/src/components/Table.vue b/src/components/Table.vue
index 2fcd79c..a37a4db 100644
--- a/src/components/Table.vue
+++ b/src/components/Table.vue
@@ -48,7 +48,7 @@ const onSort = (columnName: string): void => {
 				class="sticky top-0 z-20 bg-blue-100 p-2 text-left text-lg font-semibold text-gray-900 md:rounded-t-md dark:border dark:border-gray-700 dark:bg-gray-800 dark:text-white"
 			>
 				<div class="flex flex-nowrap items-center">
-					<p class="mr-2 whitespace-nowrap text-sm uppercase">List of irregular verbs</p>
+					<p class="mr-2 whitespace-nowrap text-sm uppercase dark:text-gray-400">List of irregular verbs</p>
 					<!-- Search results -->
 					<search-results :results="searchResults.length" />
 				</div>
diff --git a/src/components/TableHead.vue b/src/components/TableHead.vue
index a867f2f..bde796a 100644
--- a/src/components/TableHead.vue
+++ b/src/components/TableHead.vue
@@ -45,9 +45,10 @@ const onColumnClick = (): void => {
 
 <template>
 	<th
-		class="sticky z-10 border border-gray-200 bg-gray-50 p-2 dark:border-gray-700 dark:bg-gray-600"
+		class="sticky z-10 cursor-pointer border border-gray-200 bg-gray-50 p-2 dark:border-gray-700 dark:bg-gray-600"
 		width="33.3333%"
 		scope="col"
+		@click="onColumnClick"
 	>
 		<div class="flex items-center justify-center">
 			<p>{{ visibleColumnName }}</p>
@@ -56,7 +57,6 @@ const onColumnClick = (): void => {
 				class="duration-300 ease-in"
 				:title="isActiveColumn ? (isDescending ? 'Descending' : 'Ascending') : ''"
 				:aria-label="`Sort by ${visibleColumnName}`"
-				@click="onColumnClick"
 			>
 				<component
 					class="ml-1 size-3"