chore(ui): improve ui consistency

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

@@ -16,15 +16,23 @@
         </span>
       </template>
       <NuxtLink
-        v-for="(locale, index) in $i18n.locales.filter(
-          ({ code }) => code !== $i18n.locale
-        )"
-        :key="`locale-${String(index)}`"
+        v-for="(locale, index) in $i18n.locales"
+        :key="`locale-${index}`"
         :to="switchLocalePath(locale.code)"
-        @click="$refs.language.tippy().hide()"
+        @click="language.tippy().hide()"
       >
-        <SmartItem :label="locale.name" />
+        <SmartItem
+          :label="locale.name"
+          :active-info-icon="$i18n.locale === locale.code"
+          :info-icon="$i18n.locale === locale.code ? 'done' : null"
+        />
       </NuxtLink>
     </tippy>
   </span>
 </template>
+
+<script setup lang="ts">
+import { ref } from "@nuxtjs/composition-api"
+
+const language = ref<any | null>(null)
+</script>

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}`)

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

@@ -24,22 +24,22 @@
     >
       <i
         v-if="icon"
+        class="opacity-75 material-icons"
         :class="[
-          label ? (reverse ? 'ml-4 opacity-75' : 'mr-4 opacity-75') : '',
+          label ? (reverse ? 'ml-4' : 'mr-4') : '',
           { 'text-accent': active },
         ]"
-        class="material-icons"
       >
         {{ icon }}
       </i>
       <SmartIcon
         v-if="svg"
         :name="svg"
+        class="opacity-75 svg-icons"
         :class="[
-          label ? (reverse ? 'ml-4 opacity-75' : 'mr-4 opacity-75') : '',
+          label ? (reverse ? 'ml-4' : 'mr-4') : '',
           { 'text-accent': active },
         ]"
-        class="svg-icons"
       />
     </span>
     <SmartSpinner v-else class="mr-4 text-secondaryDark" />

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

@@ -1,16 +1,16 @@
 <template>
-  <label
-    class="cursor-pointer flex-nowrap transition inline-flex items-center justify-center group hover:text-secondaryDark"
+  <div
+    class="cursor-pointer flex flex-nowrap transition flex-1 items-center group hover:text-secondaryDark"
+    @click="$emit('change', value)"
   >
-    <input
-      type="radio"
-      :value="value"
-      :checked="value === selected"
-      class="appearance-none cursor-pointer mr-4 transition rounded-full h-4 w-4 border-2 border-divider group-hover:border-accentDark checked:border-4 checked:border-accent focus:outline-none"
-      @change="$emit('change', value)"
-    />
-    <span class="font-semibold transition">{{ label }}</span>
-  </label>
+    <span class="inline-flex mr-4">
+      <i v-if="value === selected" class="text-accent material-icons">
+        radio_button_checked
+      </i>
+      <i v-else class="material-icons">radio_button_unchecked</i>
+    </span>
+    <span class="font-semibold inline-flex">{{ label }}</span>
+  </div>
 </template>
 
 <script>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col space-y-4 items-start">
+  <div class="flex flex-col space-y-4">
     <SmartRadio
       v-for="(radio, index) in radios"
       :key="`radio-${index}`"

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

@@ -3,12 +3,12 @@
     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 }">
+    <span ref="toggle" class="toggle" :class="{ on: on }">
       <span class="handle"></span>
-    </label>
-    <label class="cursor-pointer font-semibold pl-0 align-middle">
+    </span>
+    <span class="cursor-pointer font-semibold pl-0 align-middle">
       <slot></slot>
-    </label>
+    </span>
   </div>
 </template>