actualbudget/actual

[Tech Enhancement] Implement standard sizes on `Button` component

Open

#3,770 创建于 2024年11月3日

在 GitHub 查看
 (1 评论) (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 button sizes across the app. This enhancement is to extend the Button2 component 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 buttons 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

贡献者指南

技术栈
javascriptreactcss
领域
frontend
议题类型
feature
难度面向新贡献者的预计实现难度，1 表示很小改动，5 表示专家级工作。
3
预计时间有经验贡献者完成调查、实现、测试并准备 pull request 的粗略时间范围。
1-3 hours
活动状态议题当前的可参与程度：新鲜、活跃、陈旧、阻塞或等待维护者输入。
fresh
清晰度议题是否清楚说明期望改动、验收标准和下一步。
clear
前置要求
React component knowledgeCSS responsive design
新手友好度1-100 的估计分数，表示该议题对首次贡献者的友好程度。
75
研究方向
Start by locating the Button2 component file in the repository. Understand how it currently accepts props and applies styles. Look for any existing size related patterns or theming in the codebase. Then, design a responsive approach using CSS media queries or the project's preferred styling method to handle different screen sizes for each size variant.