From 14f402f1868de188656fcd458b6d78ea4206b081 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sun, 17 Oct 2021 11:37:06 +0530
Subject: [PATCH] feat: minor ui improvements to power search

---
 .../components/app/PowerSearchEntry.vue       | 27 +++++++++++++++++--
 .../components/smart/AutoComplete.vue         |  2 +-
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/packages/hoppscotch-app/components/app/PowerSearchEntry.vue b/packages/hoppscotch-app/components/app/PowerSearchEntry.vue
index 158761f1a..497e8b030 100644
--- a/packages/hoppscotch-app/components/app/PowerSearchEntry.vue
+++ b/packages/hoppscotch-app/components/app/PowerSearchEntry.vue
@@ -11,6 +11,7 @@
       hover:bg-primaryLight
       focus:outline-none
       focus-visible:bg-primaryLight
+      search-entry
     "
     tabindex="0"
     @click="$emit('action', shortcut.action)"
@@ -19,10 +20,10 @@
     <SmartIcon
       class="
         mr-4
-        opacity-75
+        opacity-50
         transition
         svg-icons
-        group-hover:opacity-100
+        group-hover:text-secondaryDark group-hover:opacity-100
         group-focus:opacity-100
       "
       :name="shortcut.icon"
@@ -55,6 +56,28 @@ defineProps<{
 </script>
 
 <style lang="scss" scoped>
+.search-entry {
+  @apply relative;
+
+  &::after {
+    @apply absolute;
+    @apply top-0;
+    @apply left-0;
+    @apply bottom-0;
+    @apply bg-transparent;
+    @apply z-2;
+    @apply w-0.5;
+    @apply transition;
+
+    content: "";
+  }
+
+  &:hover::after,
+  &:focus::after {
+    @apply bg-accentLight;
+  }
+}
+
 .shortcut-key {
   @apply bg-dividerLight;
   @apply rounded;
diff --git a/packages/hoppscotch-app/components/smart/AutoComplete.vue b/packages/hoppscotch-app/components/smart/AutoComplete.vue
index c495247ce..d8588ba68 100644
--- a/packages/hoppscotch-app/components/smart/AutoComplete.vue
+++ b/packages/hoppscotch-app/components/smart/AutoComplete.vue
@@ -231,7 +231,7 @@ export default defineComponent({
 
       &:hover,
       &.active {
-        @apply bg-accent;
+        @apply bg-accentDark;
         @apply text-accentContrast;
         @apply cursor-pointer;
       }