Grant Finder front-end enhancements #1928

saboteurina · 2023-09-15T04:56:26Z

Why is this issue important?

I conducted a front-end audit of Grants Finder staging against the USDR design system and found inconsistencies.

Current State

See audit: https://docs.google.com/spreadsheets/d/1eMSpXwsBQvis9WdrM-fNbBi0IuuCq6kAfh7-dMYdUPg/edit?usp=sharing

This applies across pages/views in the Grant Finder tool.

Expected State

See audit: https://docs.google.com/spreadsheets/d/1eMSpXwsBQvis9WdrM-fNbBi0IuuCq6kAfh7-dMYdUPg/edit?usp=sharing

Implementation Plan

In scope for this issue:

Buttons

Update buttons with the appropriate color tokens added as part of
Feat(1670): Implement USDR style guide colors and fonts #1717
Update buttons to brand default blue
Agencies - swap 'Bulk Import' and 'Add', and update buttons to be the same as search/saved search buttons
Update 'Grants.gov' button to 'View on Grants.gov' and remove link icon
Update 'Export CSV' link to be a button
Update navy secondary buttons to be ghost buttons
Update button behavior for Admin Delete Agency button (cursor doesn't change to the pointer hand). Rename to 'Delete Agency' since it's already only visible to admins
Edit pencil button - update to brand blue and remove outline
Reduce gap between My Saved Searches and New Search buttons

Grant modal

Update based on discussed changes: white modal bg; remove black bar at the bottom; swap grant title and grant number treatments; some font size/family inconsistencies

Headings / Typography

Update app name + table title heading tags to follow semantic structure
Update 'Grants Identification Tool' to 'Federal Grant Finder' (+ add dropshadow to header)
Update current h6 so that it's smaller than h5
Update headings from Lora to Inter
Update caption font size from 12px to 13px (affects My Profile)

Table

Make selected tab more obvious
~~Related: make table more responsive~~ fixed in Results Table Horizontal Responsiveness Updates #2065

Login

Update language and styling based on design

Screenshots / Screen captures

Login etc. screen capture:
https://github.com/usdigitalresponse/usdr-gost/assets/6080693/b2b262bf-9a44-4c2c-9c7e-1d4bcd4eb3a1

Login:

Home - My Grants:

Browse Grants:

Grant Details modal:

Users:

Teams:

Organizations:

My Profile:

…) (#2249) * WIP updates to typography and button styles * final updates to typography, buttons, colors, login screen, styling.md doc * updating styles after pulling in latest versions with the new terminology * updating homepage unit test based on the updates * updating cypress test to reflect app name change * adding back the admin delete changes with the terminology change * minor cleanup items * minor updates on grant details styling * fix: remove unintended yarn.lock changes --------- Co-authored-by: adele-usdr <[email protected]>

ClaireValdivia · 2023-12-06T17:30:06Z

@adele-usdr can you confirm that this was merged to staging? I don't see the changes reflected there

adele-usdr · 2023-12-06T19:57:59Z

@ClaireValdivia it's there now! I think it was stuck in the deploy-to-staging workflow.

ClaireValdivia · 2023-12-06T20:12:26Z

These are looking great!! just a couple items that I wasn't sure matched the designs - @adele-usdr @caitlinwinner :

when I turn off the two feature flags (https://www.notion.so/usdr/Feature-flags-63d7131522d0446288e081b4b0493b6a) the header background changes to black - is this intentional?
is the size of "Federal Grant Finder" header correct? it seems a lot smaller than the current header and not sure that's intentional. it also is significantly smaller than the headers on the My Grants page

caitlinwinner · 2023-12-07T15:48:38Z

Looking great!

Agree header is too big on My Grants.
I don't see updated buttons or color on User tab but in Claire's screen shot above it looks right.
Header ribbon top and bottom padding can be reduced by 50%
On grants modal, the button in the bottom right should say "Close" not "OK"

adele-usdr · 2023-12-07T16:28:12Z

We have the header color change tied to the profile changes - we can remove that, if you'd like.

Opened a new branch for the padding change and button text change. Do you also want to change the text size of Federal Grant Finder?

Layout.vue: Make the nav bar padding smaller GrantDetails.vue: Change ok button text to "Close"

* fix: #1928 Additional Grant Finder front-end enhancements Layout.vue: Make the nav bar padding smaller GrantDetails.vue: Change ok button text to "Close"

* chore(deps): bump @aws-sdk/s3-request-presigner from 3.458.0 to 3.462.0 (#2286) Bumps [@aws-sdk/s3-request-presigner](https://github.com/aws/aws-sdk-js-v3/tree/HEAD/packages/s3-request-presigner) from 3.458.0 to 3.462.0. - [Release notes](https://github.com/aws/aws-sdk-js-v3/releases) - [Changelog](https://github.com/aws/aws-sdk-js-v3/blob/main/packages/s3-request-presigner/CHANGELOG.md) - [Commits](https://github.com/aws/aws-sdk-js-v3/commits/v3.462.0/packages/s3-request-presigner) --- updated-dependencies: - dependency-name: "@aws-sdk/s3-request-presigner" dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump @aws-sdk/client-sqs from 3.458.0 to 3.462.0 (#2287) Bumps [@aws-sdk/client-sqs](https://github.com/aws/aws-sdk-js-v3/tree/HEAD/clients/client-sqs) from 3.458.0 to 3.462.0. - [Release notes](https://github.com/aws/aws-sdk-js-v3/releases) - [Changelog](https://github.com/aws/aws-sdk-js-v3/blob/main/clients/client-sqs/CHANGELOG.md) - [Commits](https://github.com/aws/aws-sdk-js-v3/commits/v3.462.0/clients/client-sqs) --- updated-dependencies: - dependency-name: "@aws-sdk/client-sqs" dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump @aws-sdk/rds-signer from 3.458.0 to 3.462.0 (#2289) Bumps [@aws-sdk/rds-signer](https://github.com/aws/aws-sdk-js-v3/tree/HEAD/packages/rds-signer) from 3.458.0 to 3.462.0. - [Release notes](https://github.com/aws/aws-sdk-js-v3/releases) - [Changelog](https://github.com/aws/aws-sdk-js-v3/blob/main/packages/rds-signer/CHANGELOG.md) - [Commits](https://github.com/aws/aws-sdk-js-v3/commits/v3.462.0/packages/rds-signer) --- updated-dependencies: - dependency-name: "@aws-sdk/rds-signer" dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump @aws-sdk/client-s3 from 3.458.0 to 3.462.0 (#2288) Bumps [@aws-sdk/client-s3](https://github.com/aws/aws-sdk-js-v3/tree/HEAD/clients/client-s3) from 3.458.0 to 3.462.0. - [Release notes](https://github.com/aws/aws-sdk-js-v3/releases) - [Changelog](https://github.com/aws/aws-sdk-js-v3/blob/main/clients/client-s3/CHANGELOG.md) - [Commits](https://github.com/aws/aws-sdk-js-v3/commits/v3.462.0/clients/client-s3) --- updated-dependencies: - dependency-name: "@aws-sdk/client-s3" dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump @aws-sdk/client-ses from 3.458.0 to 3.462.0 (#2290) Bumps [@aws-sdk/client-ses](https://github.com/aws/aws-sdk-js-v3/tree/HEAD/clients/client-ses) from 3.458.0 to 3.462.0. - [Release notes](https://github.com/aws/aws-sdk-js-v3/releases) - [Changelog](https://github.com/aws/aws-sdk-js-v3/blob/main/clients/client-ses/CHANGELOG.md) - [Commits](https://github.com/aws/aws-sdk-js-v3/commits/v3.462.0/clients/client-ses) --- updated-dependencies: - dependency-name: "@aws-sdk/client-ses" dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Fix: Frontend enhancements - style, typography, app name updates (#1928) (#2249) * WIP updates to typography and button styles * final updates to typography, buttons, colors, login screen, styling.md doc * updating styles after pulling in latest versions with the new terminology * updating homepage unit test based on the updates * updating cypress test to reflect app name change * adding back the admin delete changes with the terminology change * minor cleanup items * minor updates on grant details styling * fix: remove unintended yarn.lock changes --------- Co-authored-by: adele-usdr <[email protected]> * feat: add breadcrumb back to home from my profile * feat: add breadcrumb back to home from my profile * fixed the home URL this was previously going to grants#/my-grants instead of #/grants --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: rowena <[email protected]> Co-authored-by: adele-usdr <[email protected]> Co-authored-by: Tyler Hendrickson <[email protected]>

ClaireValdivia · 2023-12-14T21:11:19Z

@adele-usdr thanks for these adjustments! I think the only remaining change we need is the button color/styles on the user page as it's still green. this should match what is on the agencies page

adele-usdr · 2023-12-15T16:46:40Z

The button update is now on staging!

saboteurina added Grant Finder Issues related to the Grant Finder ux goodness An issue focused on improving the UI and user experience labels Sep 15, 2023

saboteurina self-assigned this Sep 15, 2023

saboteurina changed the title ~~Grant Finder front-end audit enhancements~~ Grant Finder front-end enhancements Sep 15, 2023

ClaireValdivia added this to Grants Team Agile Planning Nov 21, 2023

github-project-automation bot moved this to 🆕 New in Grants Team Agile Planning Nov 21, 2023

ClaireValdivia mentioned this issue Nov 21, 2023

Frontend - Ribbon App Titles & Branding #1588

Closed

saboteurina mentioned this issue Nov 22, 2023

Fix: Frontend enhancements - style, typography, app name updates (#1928) #2249

Merged

7 tasks

saboteurina linked a pull request Nov 22, 2023 that will close this issue

Fix: Frontend enhancements - style, typography, app name updates (#1928) #2249

Merged

7 tasks

ClaireValdivia moved this from 🆕 New to 🏗 In progress in Grants Team Agile Planning Nov 28, 2023

adele-usdr closed this as completed in #2249 Nov 30, 2023

github-project-automation bot moved this from 🏗 In progress to ✅ Staging in Grants Team Agile Planning Nov 30, 2023

adele-usdr assigned adele-usdr and unassigned saboteurina Dec 7, 2023

adele-usdr added a commit that referenced this issue Dec 7, 2023

fix: #1928 Additional Grant Finder front-end enhancements

2277131

Layout.vue: Make the nav bar padding smaller GrantDetails.vue: Change ok button text to "Close"

adele-usdr added a commit that referenced this issue Dec 7, 2023

fix: #1928 less padding

75f62ff

adele-usdr mentioned this issue Dec 7, 2023

1928 reduce padding in nav bar, update details button text #2322

Merged

2 tasks

adele-usdr linked a pull request Dec 7, 2023 that will close this issue

1928 reduce padding in nav bar, update details button text #2322

Merged

2 tasks

ClaireValdivia mentioned this issue Dec 14, 2023

Design adjustments #2352

Open

3 tasks

adele-usdr added a commit that referenced this issue Dec 14, 2023

fix: #1928 update button variants on Users page

7434b06

adele-usdr mentioned this issue Dec 14, 2023

fix: #1928 update button variants on Users page #2359

Merged

2 tasks

adele-usdr linked a pull request Dec 14, 2023 that will close this issue

fix: #1928 update button variants on Users page #2359

Merged

2 tasks

adele-usdr added a commit that referenced this issue Dec 15, 2023

fix: #1928 update button variants on Users page (#2359)

2fefe6c

ClaireValdivia moved this from ✅ Staging to 🚢 Completed in Grants Team Agile Planning Dec 20, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Grant Finder front-end enhancements #1928

Grant Finder front-end enhancements #1928

saboteurina commented Sep 15, 2023 •

edited by caitlinwinner

Loading

ClaireValdivia commented Dec 6, 2023

adele-usdr commented Dec 6, 2023

ClaireValdivia commented Dec 6, 2023 •

edited

Loading

caitlinwinner commented Dec 7, 2023 •

edited

Loading

adele-usdr commented Dec 7, 2023

ClaireValdivia commented Dec 14, 2023

adele-usdr commented Dec 15, 2023

Grant Finder front-end enhancements #1928

Grant Finder front-end enhancements #1928

Comments

saboteurina commented Sep 15, 2023 • edited by caitlinwinner Loading

Why is this issue important?

Current State

Expected State

Implementation Plan

Buttons

Grant modal

Headings / Typography

Table

Login

Screenshots / Screen captures

ClaireValdivia commented Dec 6, 2023

adele-usdr commented Dec 6, 2023

ClaireValdivia commented Dec 6, 2023 • edited Loading

caitlinwinner commented Dec 7, 2023 • edited Loading

adele-usdr commented Dec 7, 2023

ClaireValdivia commented Dec 14, 2023

adele-usdr commented Dec 15, 2023

saboteurina commented Sep 15, 2023 •

edited by caitlinwinner

Loading

ClaireValdivia commented Dec 6, 2023 •

edited

Loading

caitlinwinner commented Dec 7, 2023 •

edited

Loading