feat(frontend): style textarea to match other inputs DEV-2007

[magicznyleszek]

🗒️ Checklist

1. run linter locally
2. update developer docs (API, README, inline, etc.), if any
3. for user-facing doc changes create a Zulip thread at #Support Docs Updates, if any
4. draft PR with a title <type>(<scope>)<!>: <title> DEV-1234
5. assign yourself, tag PR: at least Front end and/or Back end or workflow
6. fill in the template below and delete template comments
7. review thyself: read the diff and repro the preview as written
8. open PR & confirm that CI passes & request reviewers, if needed
9. act on any greptile review below a 5/5 score or leave comment explaining why you won't
10. delete this checklist section from the final squash commit before merging

📣 Summary

Kobo text inputs now look and behave consistently across TextInput, Textarea, NumberInput, and PasswordInput.

💭 Notes

This branch aligns the shared Kobo styling for the main Mantine input components so their borders, placeholder colors, disabled states, error states, and keyboard focus rings match. It also adds Storybook coverage to make it easy to compare the inputs side by side and catch any visual drift later.

Changes here:

• InputBase.module.css
  • Centralized the shared input border, disabled, error, and focus styling.
  • Added wrapper-level focus styling so components like PasswordInput show the same focus ring as the others.
• Textarea.ts and NumberInput.ts
  • Point both components at the shared Kobo input styles instead of separate CSS modules.
• PasswordInput.ts
  • Added a Kobo theme wrapper for PasswordInput so it uses the same shared input classes.
• InputBase.stories.tsx
  • Added a comparison story that renders all the themed inputs together.
• NumberInput.stories.tsx
  • Added a simple NumberInput story for visual checks.

👀 Preview steps

1. Go to Storybook → Design system → InputBase.
2. Compare the rendered inputs in the stacked story.
3. Click into each field and use Tab to move focus between them.
4. 🔴 Before this change, PasswordInput, TextArea could look different from the other inputs.
5. 🟢 After this change, the border, focus ring, disabled state, and error styling should match across all of them.

[greptile-apps]

Greptile Summary

This PR consolidates the visual styling of Textarea, NumberInput, and PasswordInput to share InputBase.module.css, replacing the now-deleted NumberInput.module.css and the previously empty Textarea.ts. New CSS rules for .control, .visibilityToggle, and :focus-within focus rings are added to the shared CSS module. A new PasswordInputThemeKobo component is registered in the Kobo theme.

• Textarea.ts and NumberInput.ts are updated to point to InputBase.module.css via classNames: classes, and a new PasswordInput.ts theme is introduced with explicit per-slot class mappings.
• InputBase.module.css is extended with .control state rules (disabled, error, hover) and a .visibilityToggle block to support the PasswordInput eye-icon button.
• focusRing.css adds .mantine-PasswordInput-innerInput:focus-visible to apply the Kobo focus ring to the actual <input> element inside PasswordInput.

Confidence Score: 5/5

Safe to merge — changes are scoped entirely to CSS module consolidation and Mantine theme wiring with no functional logic touched.

All changes are purely visual: CSS class mappings are consolidated into a shared module, a dead separate CSS file is deleted, and new Storybook stories verify the appearance side-by-side. No data logic, API calls, or authentication paths are modified. The one gap — PasswordInput labels not receiving the Kobo label class — was already the case before this PR and does not block merging.

jsapp/js/theme/kobo/PasswordInput.ts — the label slot is not wired to classes.label unlike the other input theme files.

_{Reviews (2): Last reviewed commit: "unify inputs looks" | Re-trigger Greptile}