chore(ui): improve ui consistency

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

@@ -22,10 +22,11 @@
         :icon="
           size === active ? 'radio_button_checked' : 'radio_button_unchecked'
         "
+        :active="size === active"
         @click.native="
           () => {
             setActiveFont(size)
-            $refs.fontSize.tippy().hide()
+            fontSize.tippy().hide()
           }
         "
       />
@@ -34,6 +35,7 @@
 </template>
 
 <script setup lang="ts">
+import { ref } from "@nuxtjs/composition-api"
 import {
   HoppFontSizes,
   HoppFontSize,
@@ -46,6 +48,7 @@ const t = useI18n()
 
 const fontSizes = HoppFontSizes
 const active = useSetting("FONT_SIZE")
+const fontSize = ref<any | null>(null)
 
 const getFontSizeName = (size: HoppFontSize) => {
   return t(`settings.font_size_${size}`)