Sweet Alerts 2 Styling To Match Theme

Description

The following changes addressed the Sweet Alert 2 that we are using throughout the application. We chose to alter the colors used in the Sweet Alerts to more closely resemble the theme of the entire application. Text was updated for some of the Sweet Alerts as well, and a change to the button location and messaging for the Delete confirmation.

As a side note, I came across various Delete button scenarios and confirmations. @apdsrocha pointed us toward this article Primary & Secondary Button Actions which is how we based our order of confirm or cancel delete action buttons, as well as color options. We opted to not use a shade of red for any of the delete buttons at this time.

(Please forgive the look of my tables. I think I spent more time on the before and after and setting up the tables than the actual changes on the code 😆 )

Related Issue

closes #37

Acceptance Criteria

Type of Changes

	Type
	:bug: Bug fix
✓	:sparkles: New feature
	:hammer: Refactoring
	:100: Add tests
	:link: Update dependencies
	:scroll: Docs

Updates

Before And After

Before	After

| tokenNotFoundB | tokenNotFoundA |

| listSuccessB | listSuccessA |

| UHOHB | UHOHA |

| areYouSureDeleteB | areYouSureDeleteA |

| itemDeleteConfirmB | itemDeleteConfirmA |

| itemAlreadyInListB | itemAlreadyInListA

Testing Steps / QA Criteria

On main run git pull
Run git checkout swal-styling
Run npm install
Run npm start
Try making every mistake you can think of 😄 Use the images above to guide you. Do not forget to try with and without a token in local storage

the-collab-lab / tcl-23-smart-shopping-list