Feature: Create PSAT landing page and dashboard

[mohdsayed]

Description

Redesign the PSAT landing page and add a dashboard with pinned items and features for easy navigation.

Relevant Technical Choices

• Remove the iframe and add static content.
• Map internal links for each item in the dashboard.
• Add internal link in PSAT landing page for dashboard.
• Display the landing page when users first install the PSAT extension. On subsequent visits, show the dashboard.
• Add top-level icons in collapsed sidebar.

Testing Instructions

• Remove and install PSAT extension, you should be able to see the landing page.
• Open extension in a tab, you should now see dashboard.
• All links and buttons in the dashboard should navigate to the related pages.
• Top level icons should be visible in the collapsed sidebar.

Additional Information:

Screenshot/Screencast

Landing Page

Dashboard

---

Checklist

• I have thoroughly tested this code to the best of my abilities.
• I have reviewed the code myself before requesting a review.
• [ ] This code is covered by unit tests to verify that it works as intended. NA
• The QA of this PR is done by a member of the QA team (to be checked by QA).

Fixes #799

[mohdsayed]

@pavanpatil1 Ready for QA

[pavanpatil1]

• The button design should be consistent throughout.

---

• On the landing page, if CDP is enabled, the reload notice does not display correctly.

---

• The logo currently appears in both the header and navigation sections. Could we streamline this by showing the logo in the header only? Also, the logo becomes invisible when navigating to the private audience or site boundary pages.

---

• Could we move the dashboard section above the cookie section? The dashboard typically appears first, and from there, we can navigate to the other sections below.

---

• The color code on the dashboard does not match the one on the "Private Advertising" landing page. The landing page uses rgb(37, 99, 235), while the dashboard page uses rgb(26, 115, 232 )

---

• The 'Private Advertising' logo differs between the landing page and the dashboard.

[milindmore22]

• Disappearing logos
  The Privacy Sandbox logos on the PSAT landing page disappear when you toggle open the sidebar menus.

Screen.Recording.2024-09-06.at.1.55.50.PM.mov

[mohdsayed]

@pavanpatil1

The button design should be consistent throughout.

It's the same button used in dashboard. We wouldn't want to use the blue button.

On the landing page, if CDP is enabled, the reload notice does not display correctly.

Good catch! Fixed

The logo currently appears in both the header and navigation sections. Could we streamline this by showing the logo in the header only? Also, the logo becomes invisible when navigating to the private audience or site boundary pages.

That makes sense, updated to use the same design from landing pages.

Could we move the dashboard section above the cookie section? The dashboard typically appears first, and from there, we can navigate to the other sections below.

I had initially kept it in the beginning; however, it was later decided that we wanted to keep it after “Privacy Sandbox”.

The color code on the dashboard does not match the one on the "Private Advertising" landing page. The landing page uses rgb(37, 99, 235), while the dashboard page uses rgb(26, 115, 232 )

Fixed

The 'Private Advertising' logo differs between the landing page and the dashboard.

Fixed

@milindmore22

Disappearing logos
The Privacy Sandbox logos on the PSAT landing page disappear when you toggle open the sidebar menus.

Fixed.

[milindmore22]

- [ ] The border for dashboard boxes is different from other box borders.

[mohdsayed]

@milindmore22

The border for dashboard boxes is different from other box borders.

We are not matching these boxes design from the other landing pages, or else it should have been styled very differently.

[fellyph]

• The dashboard has two horizontal scroll
• The dashboard should adapt to small screens and break the layout into two and one-column layout

2024-09-09.12-21-45.mov

[fellyph]

When the user clicks on the cookie table on the dashboard before running an audit, the link goes to the cookie landing page. Should we redirect the user to the cookie table after the user presses "analyses page"?

2024-09-09.12-59-58.mov

[mayan-000]

The translation is available for most names or descriptions, I18n can be used.

[mohdsayed]

@fellyph

The dashboard should adapt to small screens and break the layout into two and one-column layout

Fixed

When the user clicks on the cookie table on the dashboard before running an audit, the link goes to the cookie landing page. Should we redirect the user to the cookie table after the user presses "analyses page"?

I think instead of that, if the table is not available, that button should not be displayed, pushed an update for it.