refactor: minor ui improvements

packages/hoppscotch-app/components/smart/AutoComplete.vue

@@ -18,7 +18,7 @@
     />
     <ul
       v-if="suggestions.length > 0 && suggestionsVisible"
-      class="suggestions"
+      class="suggestions hide-scrollbar"
       :style="{ transform: `translate(${suggestionsOffsetLeft}px, 0)` }"
     >
       <li
@@ -101,8 +101,8 @@ export default defineComponent({
           )
           // Cut off the part that's already been typed.
           .map((entry) => entry.substring(this.selectionStart))
-          // We only want the top 6 suggestions.
-          .slice(0, 6)
+          // We only want the top 10 suggestions.
+          .slice(0, 10)
       )
     },
   },
@@ -215,6 +215,8 @@ export default defineComponent({
     @apply left-0;
     @apply z-50;
     @apply shadow-lg;
+    @apply max-h-46;
+    @apply overflow-y-auto;
 
     top: calc(100% - 4px);
     border-radius: 0 0 8px 8px;

packages/hoppscotch-app/components/smart/FontSizePicker.vue

@@ -19,8 +19,9 @@
         v-for="(size, index) in fontSizes"
         :key="`size-${index}`"
         :label="`${getFontSizeName(size)}`"
-        :info-icon="size === active ? 'done' : ''"
-        :active-info-icon="size === active"
+        :icon="
+          size === active ? 'radio_button_checked' : 'radio_button_unchecked'
+        "
         @click.native="
           () => {
             setActiveFont(size)

packages/hoppscotch-app/components/smart/Modal.vue

@@ -48,7 +48,6 @@
                 <slot name="actions"></slot>
                 <ButtonSecondary
                   v-if="dimissible"
-                  class="rounded"
                   svg="x"
                   @click.native="close"
                 />

packages/hoppscotch-app/components/smart/Toggle.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="cursor-pointer flex-nowrap inline-flex items-center justify-center"
+    class="cursor-pointer flex-nowrap transition inline-flex items-center justify-center group hover:text-secondaryDark"
     @click="$emit('change')"
   >
     <label ref="toggle" class="toggle" :class="{ on: on }">
@@ -28,7 +28,7 @@ export default defineComponent({
 <style scoped lang="scss">
 $useBorder: true;
 $borderColor: var(--divider-color);
-$activeColor: var(--divider-color);
+$activeColor: var(--divider-dark-color);
 $inactiveColor: var(--divider-color);
 $inactiveHandleColor: var(--secondary-light-color);
 $activeHandleColor: var(--accent-color);
@@ -49,6 +49,8 @@ $transition: all 0.2s ease-in-out;
   @apply mr-4;
   @apply cursor-pointer;
   @apply flex-shrink-0;
+  @apply group-hover:border-accentDark;
+  @apply transition;
 
   width: $width;
   height: $height;