fix(settings): fix alignment issues in number input

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

@@ -3,6 +3,8 @@ import { SettingsBottomScreenNumberInput as NumberInput } from "#components";
 import { useIntervalFn } from "@vueuse/core";
 
 const store = useSettingsStore();
+const { assets } = useAssets();
+const { onRender } = useScreen();
 
 const now = ref(new Date());
 
@@ -18,6 +20,10 @@ const handleConfirm = () => {
   store.closeSubMenu();
 };
 
+onRender((ctx) => {
+  assets.images.home.topScreen.background.draw(ctx, 0, 0);
+});
+
 defineOptions({ render: () => null });
 </script>
 
@@ -25,20 +31,20 @@ defineOptions({ render: () => null });
   <NumberInput
     :model-value="now.getMonth() + 1"
     title="Month"
-    :x="1 * 16"
+    :x="1 * 16 - 1"
     :disabled="true"
   />
   <NumberInput
     :model-value="now.getDate()"
     title="Day"
-    :x="5 * 16"
+    :x="5 * 16 - 1"
     :disabled="true"
   />
   <NumberInput
     :model-value="now.getFullYear()"
     title="Year"
     :digits="4"
-    :x="9 * 16"
+    :x="9 * 16 - 1"
     :disabled="true"
   />
 

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

@@ -21,7 +21,9 @@ const handleConfirm = () => {
 };
 
 onRender((ctx) => {
-  assets.images.settings.bottomScreen.clock.timeColon.draw(ctx, 113, 62);
+  assets.images.home.topScreen.background.draw(ctx, 0, 0);
+
+  assets.images.settings.bottomScreen.clock.timeColon.draw(ctx, 112, 63);
 });
 
 defineOptions({ render: () => null });
@@ -31,13 +33,13 @@ defineOptions({ render: () => null });
   <NumberInput
     :model-value="now.getHours()"
     title="Hour"
-    :x="4 * 16"
+    :x="4 * 16 - 1"
     :disabled="true"
   />
   <NumberInput
     :model-value="now.getMinutes()"
     title="Minute"
-    :x="9 * 16"
+    :x="9 * 16 - 1"
     :disabled="true"
   />
 

app/components/Settings/BottomScreen/NumberInput.vue

@@ -47,7 +47,7 @@ const app = useAppStore();
 const { assets } = useAssets();
 const { onRender, onClick } = useScreen();
 
-const Y = 30;
+const Y = 31;
 const SQUARE_HEIGHT = 49;
 const ARROW_IMAGE_HEIGHT =
   assets.images.settings.bottomScreen.numberInputUp.rect.height;
@@ -112,15 +112,15 @@ onRender((ctx) => {
 
   // value
   ctx.font = "39px NDS39";
-  ctx.letterSpacing = "2px";
+  ctx.letterSpacing = props.digits === 2 ? "3px" : "2px";
   ctx.textBaseline = "top";
   ctx.fillStyle = props.selected
     ? APP_COLOR_TO_FONT_COLOR[app.color.hex]!
     : "#fbfbfb";
   ctx.fillText(
     value.value.toString().padStart(props.digits, "0"),
-    props.x + 3,
-    Y + ARROW_IMAGE_HEIGHT + Math.floor((SQUARE_HEIGHT - 39) / 2) + 1,
+    props.x + (props.digits === 2 ? 3 : 4),
+    Y + ARROW_IMAGE_HEIGHT + Math.floor((SQUARE_HEIGHT - 39) / 2),
   );
 
   // arrow down
@@ -139,7 +139,7 @@ onRender((ctx) => {
     Y + ARROW_IMAGE_HEIGHT * 2 + SQUARE_HEIGHT - 6,
     downImage.value.rect.width,
   );
-});
+}, 10);
 
 useKeyDown((key) => {
   if (!props.selected || props.disabled) return;