feat(fonts): add more icons

app/components/Settings/BottomScreen/Menus/Clock/Achievements.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { SettingsBottomScreenNumberInput as NumberInput } from "#components";
+import { ICONS } from "~/utils/icons";
 
 const APP_COLOR_TO_FONT_COLOR: Record<string, string> = {
   "#61829a": "#fbfbfb", // cyan
@@ -82,28 +83,17 @@ onRender((ctx) => {
   achievementAssets.viewAllButton.draw(ctx, 127, 2);
   achievementAssets.smallTrophy.draw(ctx, 131, 6);
 
-  const GAP = 4;
-
   ctx.font = "10px NDS10";
   ctx.textBaseline = "top";
   ctx.fillStyle = "#010101";
-  const viewAllText = $t("settings.clock.achievements.viewAll");
-  const { actualBoundingBoxRight: textWidth } = ctx.measureText(viewAllText);
 
-  const totalWidth = achievementAssets.X.rect.width + GAP + textWidth;
-  const left = Math.ceil(
-    145 +
-      (achievementAssets.viewAllButton.rect.width - 18) / 2 -
-      totalWidth / 2,
-  );
-
-  achievementAssets.X.draw(ctx, left, 7);
+  const label = `${ICONS.X} ${$t("settings.clock.achievements.viewAll")}`;
   fillTextHCentered(
     ctx,
-    viewAllText,
-    left + achievementAssets.X.rect.width + GAP,
+    label,
+    145,
     7,
-    textWidth,
+    achievementAssets.viewAllButton.rect.width - 18,
   );
 }, 1000);
 </script>