#1229-generic-themed-buttons #1253

Open

c22abdal wants to merge 3 commits from #1229-generic-themed-buttons into main

pull from: #1229-generic-themed-buttons

merge into: Andras:main

Andras:main

Andras:#1236-edit-mode-txt

Andras:Add-an-option-to-set-no-image-to-image-view-1227

Andras:#1242-prog-bar-colors-fix

Andras:#1239-Remove-Vertical-Scroll

Andras:Image-view-error-1230

Andras:Make-the-card-title-and-header-of-card-uniform-1233

Andras:both_teams_week_8

Andras:team_2_week_7

Andras:team_1_week_7

Andras:temp_branch_week_7

Andras:team_2_week_6

Andras:team_1_week_6

Andras:team_2_week_5

Andras:team_1_week_5

Andras:temp_branch_week_5

Andras:team_2_week_4

Andras:team_1_week_4

Andras:week_4_temp_branch

Andras:temp-branch-week-3

Andras:team_2_week_3

Andras:team_1_week_3

Andras:team_2_week_2

Andras:team_1_week_2

Andras:temp-week-2-merge-branch

Andras:team_2_week_1

Andras:team_1_week_1

Conversation 1 Commits 3 Files changed 31 +325 -257

c22abdal commented 2026-07-06 11:15:48 +00:00

Collaborator

Copy link

Summary

Updates dashboard card buttons to use the shared Button component so they follow the selected website theme and light/dark mode consistently.

Changes

• Improved the shared Button component and theme-aware styling
• Added primary, secondary, danger and ghost variants
• Added selected, focus and disabled states
• Applied shared buttons to:
  • Map
  • Parking
  • Västtrafik
  • History
  • Translator
  • Temperature views
  • Energy sensor
  • SMHI forecast
  • Add Card modal
• Added accessibility labels to arrow-only navigation buttons
• Preserved specialized controls with complex local styling

Testing

• Manually verify card button interactions
• Verify selected button states
• Verify light and dark modes
• Verify the available website color themes

Notes

Specialized controls such as To-do, Text editor, Sudoku and Login buttons were left unchanged to avoid affecting their existing layouts and behavior.

## Summary Updates dashboard card buttons to use the shared _Button_ component so they follow the selected website theme and light/dark mode consistently. ## Changes - Improved the shared Button component and theme-aware styling - Added primary, secondary, danger and ghost variants - Added selected, focus and disabled states - Applied shared buttons to: - Map - Parking - Västtrafik - History - Translator - Temperature views - Energy sensor - SMHI forecast - Add Card modal - Added accessibility labels to arrow-only navigation buttons - Preserved specialized controls with complex local styling ## Testing - Manually verify card button interactions - Verify selected button states - Verify light and dark modes - Verify the available website color themes ## Notes Specialized controls such as To-do, Text editor, Sudoku and Login buttons were left unchanged to avoid affecting their existing layouts and behavior.

c22abdal added 2 commits 2026-07-06 11:15:49 +00:00

Improved generic button a29fed293d

applied button to cards c237575a8b

c22abdal added 1 commit 2026-07-07 07:50:41 +00:00

Fixed formatting + added Button ... cd1b5ba540

Fixed prettier formatting, and added the Button on the missing classes and removed some overlapping borders and stylings

c22abdal commented 2026-07-07 07:59:05 +00:00

Author

Collaborator

Copy link

Review on #1229

Whats done

Tested on Windows via Firefox

• App starts

• Verified that themed buttons are applied to the intended cards.

• Checked selected, disabled, hover and keyboard-focus styling in the code.

• Interactive browser testing was unavailable.

• Automated Jest tests are blocked by the repository’s existing JSX transformation configuration.
  Inspected following files

• Button.js and Button.css

  • Indentation follows Prettier.
  • CSS uses isolated .themed-button classes to avoid conflicts with legacy Dashboard styles.
  • Primary, secondary, danger, ghost, selected, disabled and focus states are defined.
  • Naming is clear and consistent.
  • Standard button properties are forwarded correctly.
  • Duplicate CSS declarations were removed.

• Map, Parking, History and Västtrafik views

  • Shared themed buttons are applied correctly.
  • Selected states use the correct active value.
  • Existing behavior and localization were preserved.
  • Formatting follows Prettier.

• Temperature and Energy views

  • Navigation arrows use shared ghost buttons.
  • Accessible labels are localized in English and Swedish.
  • Local CSS contains only necessary sizing and spacing.
  • Navigation logic remains unchanged.

• Translator and SMHI views

  • Translator correctly disables lookup for empty input and while loading.
  • SMHI show/hide controls use themed buttons.
  • The unused SMHI import was removed.
  • Printed text follows localization standards.

• Add Card modal

  • Category and footer actions use the shared button.
  • Complex card-selector styling was intentionally preserved.
  • Existing modal behavior remains unchanged.

• package.json and package-lock.json

  • No dependencies were introduced by the button work.
  • No unapproved packages were found.

What needs to be done

• Manual browser testing

  • Verify every website theme in light and dark mode.
  • Test all changed card controls and selected states.
  • Confirm keyboard focus is clearly visible.

• Automated tests

  • The repository’s Jest configuration must eventually be updated to transform JSX correctly. This is an existing project-level issue, not introduced by #1229.

Conclusion

• The reviewed code follows the project’s formatting, CSS, naming and localization conventions.
• No blocking code issues were found in the button implementation.
• The branch is ready for merge after a final manual browser check.

# Review on #1229 ## Whats done Tested on Windows via Firefox - App starts - Verified that themed buttons are applied to the intended cards. - Checked selected, disabled, hover and keyboard-focus styling in the code. - Interactive browser testing was unavailable. - Automated Jest tests are blocked by the repository’s existing JSX transformation configuration. Inspected following files - Button.js and Button.css - Indentation follows Prettier. - CSS uses isolated .themed-button classes to avoid conflicts with legacy Dashboard styles. - Primary, secondary, danger, ghost, selected, disabled and focus states are defined. - Naming is clear and consistent. - Standard button properties are forwarded correctly. - Duplicate CSS declarations were removed. - Map, Parking, History and Västtrafik views - Shared themed buttons are applied correctly. - Selected states use the correct active value. - Existing behavior and localization were preserved. - Formatting follows Prettier. - Temperature and Energy views - Navigation arrows use shared ghost buttons. - Accessible labels are localized in English and Swedish. - Local CSS contains only necessary sizing and spacing. - Navigation logic remains unchanged. - Translator and SMHI views - Translator correctly disables lookup for empty input and while loading. - SMHI show/hide controls use themed buttons. - The unused SMHI import was removed. - Printed text follows localization standards. - Add Card modal - Category and footer actions use the shared button. - Complex card-selector styling was intentionally preserved. - Existing modal behavior remains unchanged. - package.json and package-lock.json - No dependencies were introduced by the button work. - No unapproved packages were found. ## What needs to be done - Manual browser testing - Verify every website theme in light and dark mode. - Test all changed card controls and selected states. - Confirm keyboard focus is clearly visible. - Automated tests - The repository’s Jest configuration must eventually be updated to transform JSX correctly. This is an existing project-level issue, not introduced by #1229. ## Conclusion - The reviewed code follows the project’s formatting, CSS, naming and localization conventions. - No blocking code issues were found in the button implementation. - The branch is ready for merge after a final manual browser check.

c22abdal self-assigned this 2026-07-09 08:45:26 +00:00

Some checks failed

Hide all checks

Playwright Tests / test (pull_request) Has been cancelled

Details

This pull request can be merged automatically.

You are not authorized to merge this pull request.

View command line instructions

Checkout

From your project repository, check out a new branch and test the changes.

git fetch -u origin #1229-generic-themed-buttons:#1229-generic-themed-buttons

git switch #1229-generic-themed-buttons

Merge

Merge the changes and update on Forgejo.

Warning: The "Autodetect manual merge" setting is not enabled for this repository, you will have to mark this pull request as manually merged afterwards.

git switch main

git merge --no-ff #1229-generic-themed-buttons

git switch #1229-generic-themed-buttons

git rebase main

git switch main

git merge --ff-only #1229-generic-themed-buttons

git switch #1229-generic-themed-buttons

git rebase main

git switch main

git merge --no-ff #1229-generic-themed-buttons

git switch main

git merge --squash #1229-generic-themed-buttons

git switch main

git merge --ff-only #1229-generic-themed-buttons

git switch main

git merge #1229-generic-themed-buttons

git push origin main

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels   

_CRITICAL_

Only use this label for critical tasks that are project-scope,and must be addressed ASAP.

  

API

  

app

  

backEnd

  

Blocked, waiting for further changes

  

bug

Something is not working

  

cleanup

Issues to cleanup the codebase (restructure folders, remove deprecated or smelly code)

  

close

Issue to close

  

design

  

duplicate

This issue or pull request already exists

  

enhancement

New feature

  

feature request

  

frontEnd

  

help wanted

Need some help

  

invalid

Something is wrong

  

low priority

  

needs input

Issue needs input from product owner or customer

  

needs review

issue is in need of review

  

project documentation

  

question

More information is needed

  

research

  

reviewed

This Issue has been reviewed

  

script

  

security

use this for security-related issues

  

SQL

  

style

  

testing

  

topLevel

Reserved for top-level, project-wide issues.

  

wontfix

This won't be fixed

No labels

_CRITICAL_

API

app

backEnd

Blocked, waiting for further changes

bug

cleanup

close

design

duplicate

enhancement

feature request

frontEnd

help wanted

invalid

low priority

needs input

needs review

project documentation

question

research

reviewed

script

security

SQL

style

testing

topLevel

wontfix

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

c22abdal

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

Andras/BoundlessFlowCampus2K!1253

No description provided.