Styles updates

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>

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"

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>

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"