actualbudget/actual

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

Open

#3.770 geöffnet am 3. Nov. 2024

Auf GitHub ansehen
 (1 Kommentar) (0 Reaktionen) (0 zugewiesene Personen)JavaScript (7.129 Stars) (603 Forks)batch import
help wanteduser interface

Beschreibung

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

Contributor Guide

Tech Stack
javascriptreactcss
Domain
frontend
Issue Type
feature
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
3
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
1-3 hours
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
fresh
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
clear
Voraussetzungen
React component knowledgeCSS responsive design
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
75
Research-Richtung
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.