refactor: remove font sizes from the app (#3341)

* refactor: remove font size from settings

* refactor: remove font size from themes

* refactor: remove font size from spotlight

* refactor: remove default font size

* chore: clean up

---------

Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>

packages/hoppscotch-common/src/components/realtime/LogEntry.vue

@@ -17,7 +17,7 @@
             <span
               v-tippy="{ theme: 'tooltip' }"
               :title="relativeTime"
-              class="mx-auto truncate ts-font text-secondaryLight hover:text-secondary hover:text-center"
+              class="mx-auto truncate text-tiny text-secondaryLight hover:text-secondary hover:text-center"
             >
               {{ shortDateTime(entry.ts) }}
             </span>
@@ -406,8 +406,4 @@ const icon = computed(() => markRaw(ICONS[props.entry.source].icon))
   @apply transition;
   @apply hover: text-secondary;
 }
-
-.ts-font {
-  font-size: 0.6rem;
-}
 </style>

packages/hoppscotch-common/src/components/smart/FontSizePicker.vue

@@ -1,71 +0,0 @@
-<template>
-  <span class="inline-flex">
-    <tippy
-      interactive
-      trigger="click"
-      theme="popover"
-      :on-shown="() => tippyActions.focus()"
-    >
-      <span class="select-wrapper">
-        <HoppButtonSecondary
-          v-tippy="{ theme: 'tooltip' }"
-          :title="t('settings.change_font_size')"
-          class="pr-8"
-          :icon="IconType"
-          outline
-          :label="`${getFontSizeName(
-            fontSizes.find((size) => size === active)
-          )}`"
-        />
-      </span>
-      <template #content="{ hide }">
-        <div
-          ref="tippyActions"
-          class="flex flex-col focus:outline-none"
-          tabindex="0"
-          @keyup.escape="hide()"
-        >
-          <HoppSmartItem
-            v-for="(size, index) in fontSizes"
-            :key="`size-${index}`"
-            :label="`${getFontSizeName(size)}`"
-            :icon="size === active ? IconCircleDot : IconCircle"
-            :active="size === active"
-            @click="
-              () => {
-                setActiveFont(size)
-                hide()
-              }
-            "
-          />
-        </div>
-      </template>
-    </tippy>
-  </span>
-</template>
-
-<script setup lang="ts">
-import IconCircleDot from "~icons/lucide/circle-dot"
-import IconCircle from "~icons/lucide/circle"
-import IconType from "~icons/lucide/type"
-import { HoppFontSizes, HoppFontSize, applySetting } from "~/newstore/settings"
-import { useSetting } from "@composables/settings"
-import { useI18n } from "@composables/i18n"
-import { ref } from "vue"
-
-const t = useI18n()
-
-const fontSizes = HoppFontSizes
-const active = useSetting("FONT_SIZE")
-
-const getFontSizeName = (size: HoppFontSize) => {
-  return t(`settings.font_size_${size}`)
-}
-
-const setActiveFont = (size: HoppFontSize) => {
-  applySetting("FONT_SIZE", size)
-}
-
-// Template refs
-const tippyActions = ref<any | null>(null)
-</script>

packages/hoppscotch-common/src/layouts/default.vue

@@ -79,7 +79,6 @@ const router = useRouter()
 const showSearch = ref(false)
 const showSupport = ref(false)
 
-const fontSize = useSetting("FONT_SIZE")
 const expandNavigation = useSetting("EXPAND_NAVIGATION")
 const rightSidebar = useSetting("SIDEBAR")
 const columnLayout = useSetting("COLUMN_LAYOUT")
@@ -132,24 +131,9 @@ watch(mdAndLarger, () => {
     columnLayout.value = true
   }
 })
-
-const spacerClass = computed(() => {
-  if (fontSize.value === "small" && expandNavigation.value)
-    return "spacer-small"
-  if (fontSize.value === "medium" && expandNavigation.value)
-    return "spacer-medium"
-  if (fontSize.value === "large" && expandNavigation.value)
-    return "spacer-large"
-  if (
-    (fontSize.value === "small" ||
-      fontSize.value === "medium" ||
-      fontSize.value === "large") &&
-    !expandNavigation.value
-  )
-    return "spacer-expand"
-
-  return ""
-})
+const spacerClass = computed(() =>
+  expandNavigation.value ? "spacer-small" : "spacer-expand"
+)
 
 defineActionHandler("modals.search.toggle", () => {
   showSearch.value = !showSearch.value

packages/hoppscotch-common/src/modules/theming.ts

@@ -68,23 +68,9 @@ const applyAccentColor = (_app: App) => {
   )
 }
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const applyFontSize = (_app: App) => {
-  const [pref] = useSettingStatic("FONT_SIZE")
-
-  watch(
-    pref,
-    (newPref) => {
-      document.documentElement.setAttribute("data-font-size", newPref)
-    },
-    { immediate: true }
-  )
-}
-
 export default <HoppModule>{
   onVueAppInit(app) {
     applyColorMode(app)
     applyAccentColor(app)
-    applyFontSize(app)
   },
 }

packages/hoppscotch-common/src/newstore/settings.ts

@@ -23,10 +23,6 @@ export const HoppAccentColors = [
 
 export type HoppAccentColor = (typeof HoppAccentColors)[number]
 
-export const HoppFontSizes = ["small", "medium", "large"] as const
-
-export type HoppFontSize = (typeof HoppFontSizes)[number]
-
 export type SettingsDef = {
   syncCollections: boolean
   syncHistory: boolean
@@ -49,7 +45,6 @@ export type SettingsDef = {
   EXPAND_NAVIGATION: boolean
   SIDEBAR: boolean
   SIDEBAR_ON_LEFT: boolean
-  FONT_SIZE: HoppFontSize
   COLUMN_LAYOUT: boolean
 }
 
@@ -75,7 +70,6 @@ export const getDefaultSettings = (): SettingsDef => ({
   EXPAND_NAVIGATION: true,
   SIDEBAR: true,
   SIDEBAR_ON_LEFT: true,
-  FONT_SIZE: "small",
   COLUMN_LAYOUT: true,
 })
 

packages/hoppscotch-common/src/pages/settings.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="container space-y-8 divide-y divide-dividerLight">
+    <div class="container divide-y divide-dividerLight">
       <div class="md:grid md:gap-4 md:grid-cols-3">
         <div class="p-8 md:col-span-1">
           <h3 class="heading">
@@ -36,14 +36,6 @@
               <SmartAccentModePicker />
             </div>
           </section>
-          <section>
-            <h4 class="font-semibold text-secondaryDark">
-              {{ t("settings.font_size") }}
-            </h4>
-            <div class="mt-4">
-              <SmartFontSizePicker />
-            </div>
-          </section>
           <section>
             <h4 class="font-semibold text-secondaryDark">
               {{ t("settings.language") }}

packages/hoppscotch-common/src/services/spotlight/searchers/settings.searcher.ts

@@ -14,7 +14,6 @@ import IconGlobe from "~icons/lucide/globe"
 import IconMonitor from "~icons/lucide/monitor"
 import IconMoon from "~icons/lucide/moon"
 import IconSun from "~icons/lucide/sun"
-import IconCircle from "~icons/lucide/circle"
 import IconCheckCircle from "~icons/lucide/check-circle"
 
 type Doc = {
@@ -34,7 +33,6 @@ export class SettingsSpotlightSearcherService extends StaticSpotlightSearcherSer
 
   private t = getI18n()
 
-  private activeFontSize = useSetting("FONT_SIZE")
   private activeTheme = useSetting("BG_COLOR")
 
   public readonly searcherID = "settings"
@@ -91,60 +89,7 @@ export class SettingsSpotlightSearcherService extends StaticSpotlightSearcherSer
           : markRaw(IconMoon)
       ),
     },
-    font_size_sm: {
-      text: [
-        this.t("settings.font_size"),
-        this.t("spotlight.settings.font.size_sm"),
-      ],
-      onClick: () => {
-        console.log("clicked")
-      },
-      alternates: [
-        "font size",
-        "change font size",
-        "change font",
-        "increase font",
-      ],
-      icon: computed(() =>
-        this.activeFontSize.value === "small"
-          ? markRaw(IconCheckCircle)
-          : markRaw(IconCircle)
-      ),
-    },
-    font_size_md: {
-      text: [
-        this.t("settings.font_size"),
-        this.t("spotlight.settings.font.size_md"),
-      ],
-      alternates: [
-        "font size",
-        "change font size",
-        "change font",
-        "increase font",
-      ],
-      icon: computed(() =>
-        this.activeFontSize.value === "medium"
-          ? markRaw(IconCheckCircle)
-          : markRaw(IconCircle)
-      ),
-    },
-    font_size_lg: {
-      text: [
-        this.t("settings.font_size"),
-        this.t("spotlight.settings.font.size_lg"),
-      ],
-      alternates: [
-        "font size",
-        "change font size",
-        "change font",
-        "increase font",
-      ],
-      icon: computed(() =>
-        this.activeFontSize.value === "large"
-          ? markRaw(IconCheckCircle)
-          : markRaw(IconCircle)
-      ),
-    },
+
     change_lang: {
       text: [
         this.t("spotlight.section.interface"),
@@ -202,17 +147,6 @@ export class SettingsSpotlightSearcherService extends StaticSpotlightSearcherSer
       case "theme_black":
         invokeAction("settings.theme.black")
         break
-
-      // font size actions
-      case "font_size_sm":
-        this.activeFontSize.value = "small"
-        break
-      case "font_size_md":
-        this.activeFontSize.value = "medium"
-        break
-      case "font_size_lg":
-        this.activeFontSize.value = "large"
-        break
     }
   }
 }