Skip to content

Button Consistency #157

@aarav27

Description

@aarav27

Description
We want to fix the inconsistencies with our button styling throughout the website. We want to have a few consistent button "themes" similar to how we have a specific loading animation, error state, not found page, etc.

Instructions

  • Create five types of buttons
    • Standard button: This button should blue in color and have a lighter blue hover when hovering
      • This is used as for viewing, linking, saving, and for a default button
    • Create button: This button should be green in color and have a lighter green when hovering
      • This is used when a button is creating data (Ex: on the create event page, create event should be green because it populates an event in the DB but not create user or assign user because they link to a different page)
    • Cancel button: This button should be red in color and have a lighter blue when hovering
    • Delete button: This button should be the trash can icon seen on the admin dashboard and document tables
    • Back button: This button's color style should be similar to the standard button but include an arrow like "<- Back"
    • Home button:
  • Change all buttons throughout the website and make sure to check every page
  • Note: Create a new file inside src/components
  • Note: Use the button shape from the buttons in the the create event pages for the rest of the pages (it should be slightly rounded ones not the more rounded ones like those in the admin dashboard)

Metadata

Metadata

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions