Align Feedback Hub with VADS

[brea11y]

Using the VA Design System, create a ticket with recommendations for components that should replace existing elements on the Feedback Hub.

Recommended updates:

• Use the header component that is used on the VADS website to replace the header on the Feedback Hub. Note: We may have to reach out to the VADS team for the component since this is not the official header component shown in VADS.
  • The header should look like this when updated:

- Additional header updates: - [ ] Add sub-nav / dropdown navigation links below App Store and Play Store for a direct link to each store's "Rating History" - [ ] If it is decided that the analytics link should be featured in the header, it should have the external link icon after it (as seen in the screenshot above) - [ ] Remove the "VA Mobile Feedback Hub" heading on each page (since that will be moved to the header) and replace it with descriptive page titles for each page (i.e. Reddit Reviews, Apple App Store Reviews, etc.). Align all copy including headings [with VADS](https://design.va.gov/foundation/typography#headings) guidance. - [ ] All tables in the Feedback Hub site should be replaced with the [Responsive Stacked Table component](https://design.va.gov/components/table#examples---v1) from VADS. This will ensure that each table is accessible and wraps appropriates (without side-to-side / horizontal scrolling) - [ ] Use the simplified footer (vs. the official footer component) that is used on the [VADS](https://design.va.gov/) and [Platform](https://developer.va.gov/) websites. All of the possible links to include in the list below should have an external link icon to the right of the copy (like shown in the header example above). _Note: We may have to reach out to the VADS team about this component since it is not the **official** component shown in VADS._ - **Possible links to include in the footer:** - Analytics (if it is not included in the header) - [Monthly Review Summaries](https://github.com/department-of-veterans-affairs/va.gov-team/tree/master/products/va-mobile-app/reporting/App-Stores-Reviews) - [VA Mobile Documentation](https://department-of-veterans-affairs.github.io/va-mobile-app/docs/Intro) - The footer should look similar to the following screenshot (but with external link icon indicators added to each link):

- [ ] Replace all date range selectors with the [Date Input component](https://design.va.gov/components/form/date-input) - [ ] On the App and Play store pages, replace the select box with the [Select component](https://design.va.gov/components/form/select) - [ ] Replace the query input field(s) with the [Text input component](https://design.va.gov/components/form/text-input) - [ ] Replace the green "search" button with the [Default - Primary button component](https://design.va.gov/components/button/#default---primary) - [ ] Replace the blue "Download as .csv" button with the [Default - Primary button component](https://design.va.gov/components/button/#default---primary) - [ ] The "tabs" on the rating history pages, should be replaced with [Tabs component](https://design.va.gov/components/tabs) - [ ] Chat (I believe Chat GPT is going here) is cautioned against using unless it can be built with the VADS components (input fields, buttons, etc.) and can be built in a way that is fully accessible. - [ ] There are no components within VADS that can be used to replace the data within the "charts" tab and these will also not be accessible without additional content that is used to describe what is seen / displayed within the charts. At the minimum, the colors used within the charts should be updated to align with the[ VADS color palette](https://design.va.gov/foundation/color-palette) and the fonts should also be swapped out with [Source Sans Pro](https://design.va.gov/foundation/typography#fonts) (if they are not already). _If we choose to keep them, it is recommended that we have descriptive text and Brea can then identify colors to be used within them._ - [ ] The tables used within the "data" tab, should use the [Responsive Stacked Table component](https://design.va.gov/components/table#examples---v1) from VADS. This will ensure that each table is accessible and wraps appropriates (without side-to-side / horizontal scrolling).

[StacyB2023]

Thanks @brea11y Added to the Q3 Epic

[brea11y]

Reviewed changes with Stacy and Jason on 8/13. Creating new tickets to implement the updates.

[StacyB2023]

@brea11y I relinked this epic. Had it tagged to closed one. 9031 is the correct epic