actualbudget/actual

[Tech Enhancement] Implement standard sizes on `Text` and `Input` components

Open

#3,771 建立於 2024年11月3日

在 GitHub 查看
 (0 留言) (0 反應) (0 負責人)JavaScript (7,129 star) (603 fork)batch import
help wanteduser interface

描述

Verified issue does not already exist?

  • I have searched and found no existing issue
  • I will be providing steps how to reproduce the bug (in most cases this will also mean uploading a demo budget file)

What happened?

Currently, there is no standard sizes for texts and inputs across the app. This enhancement is to extend the Text and Input components to have a size prop which accepts some standard size values:

  • small
  • medium
  • large
  • extra-large

These standard sizes should vary between screen sizes e.g. different set of width and height for desktop, tablet, mobile

This change should help make all the texts and inputs more uniform in sizes throughout the app

Where are you hosting Actual?

None

What browsers are you seeing the problem on?

No response

Operating System

None

貢獻者指南

技術棧
javascriptreact
領域
frontend
議題類型
feature
難度面向新貢獻者的預計實作難度，1 表示很小改動，5 表示專家級工作。
3
預計時間有經驗貢獻者完成調查、實作、測試並準備 pull request 的粗略時間範圍。
1-2 days
活動狀態議題目前的可參與程度：新鮮、活躍、陳舊、阻塞或等待維護者輸入。
fresh
清晰度議題是否清楚說明預期改動、驗收標準和下一步。
mostly clear
前置要求
Knowledge of React componentsUnderstanding of responsive design
新手友善度1-100 的估計分數，表示該議題對首次貢獻者的友善程度。
70
研究方向
Examine the existing Text and Input component implementations in the actualbudget/actual repository, likely located in packages/desktop client/src/components/. Create a size prop that accepts 'small', 'medium', 'large', 'extra large'. Define CSS classes or styled components that vary width/height based on screen size using media queries. Ensure the changes are consistent across all instances of Text and Input. No linked PRs or comments yet; seek maintainer feedback on the desired responsive breakpoints.