From 5eb553d6be93f72f92c410ef119ccfbddd1e1d5c Mon Sep 17 00:00:00 2001 From: rowena Date: Thu, 30 Nov 2023 17:03:21 -0500 Subject: [PATCH 1/5] 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 <146878468+adele-usdr@users.noreply.github.com> --- docs/styling.md | 13 +++-- packages/client/scss/colors-base-tokens.scss | 2 +- .../client/scss/colors-semantic-tokens.scss | 1 - packages/client/scss/custom.scss | 34 +++++++++++- packages/client/scss/fonts.scss | 51 +++++++++++------- packages/client/src/App.vue | 1 - .../client/src/components/GrantsTableNext.vue | 11 ++-- packages/client/src/components/Layout.vue | 8 +-- .../client/src/components/Modals/EditTeam.vue | 3 +- .../src/components/Modals/GrantDetails.vue | 37 +++++++------ .../client/src/components/SearchFilter.vue | 8 +-- packages/client/src/views/Dashboard.vue | 23 ++------ packages/client/src/views/Login.vue | 54 +++++++++---------- packages/client/src/views/Organizations.vue | 6 +-- packages/client/src/views/RecentActivity.vue | 14 +---- packages/client/src/views/Teams.vue | 8 +-- .../client/src/views/UpcomingClosingDates.vue | 15 ++---- packages/client/src/views/Users.vue | 11 ++-- .../tests/unit/components/Layout.spec.js | 4 +- packages/e2e/cypress/e2e/spec.cy.js | 2 +- 20 files changed, 155 insertions(+), 151 deletions(-) diff --git a/docs/styling.md b/docs/styling.md index 975ba45ec..ad6ac74e1 100644 --- a/docs/styling.md +++ b/docs/styling.md @@ -68,8 +68,15 @@ If you are required to use a base token for which there is no corresponding sema ### Fonts -The fonts used in the USDR design system are: -- [Lora](https://fonts.google.com/specimen/Lora): heading font -- [Inter](https://fonts.google.com/specimen/Inter): body font +The font used in the USDR design system is: +- [Inter](https://fonts.google.com/specimen/Inter): heading & body font These font styles are implemented in [fonts.scss](../packages/client/scss/fonts.scss). + +#### Accessibility note: Don't use heading elements for styling 💡 +Heading elements (`

` through `

`) represent page structure and should be logical: i.e., someone reading the headings or using a screen reader should be able to understand the general hierarchy of a page so they can quickly find the content they need. Headings should not be used for styling. If you need to use a text style that differs from the appropriate heading level within the page, use a class instead. + +Example: +``` html +

This text will render as an

in the HTML but will look like an h4!

+``` \ No newline at end of file diff --git a/packages/client/scss/colors-base-tokens.scss b/packages/client/scss/colors-base-tokens.scss index 39f035548..8c9b09fdd 100644 --- a/packages/client/scss/colors-base-tokens.scss +++ b/packages/client/scss/colors-base-tokens.scss @@ -8,7 +8,7 @@ */ // USDR BRAND -$usdr-brand-primary: #0066FF; +$usdr-brand-primary: #305CE0; $usdr-brand-secondary: #071A51; // BLUE diff --git a/packages/client/scss/colors-semantic-tokens.scss b/packages/client/scss/colors-semantic-tokens.scss index abd6d880e..31f268aab 100644 --- a/packages/client/scss/colors-semantic-tokens.scss +++ b/packages/client/scss/colors-semantic-tokens.scss @@ -11,7 +11,6 @@ // USDR BRAND $brand-primary: $usdr-brand-primary; -$brand-default: $raw-blue-600; $brand-hover: $raw-blue-700; $brand-active: $raw-blue-800; $brand-content: $raw-white; diff --git a/packages/client/scss/custom.scss b/packages/client/scss/custom.scss index 3fe298ac1..d1d5a96ca 100644 --- a/packages/client/scss/custom.scss +++ b/packages/client/scss/custom.scss @@ -51,4 +51,36 @@ $theme-colors: map-merge( @import 'vue-select/src/scss/vue-select.scss'; // SET USDR FONTS -@import './fonts.scss'; \ No newline at end of file +@import './fonts.scss'; + +/* Dropshadow for the header */ +.header-dropshadow { + box-shadow: 0 1px 8px rgba(0,0,0,0.2); +} + +/* Card with dropshadow - used on login screen */ +.dropshadow-card { + box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1), +0px 4px 6px -2px rgba(0,0,0,0.05); + border-bottom: 1px solid #DFE1E6, 1px solid white; + border-radius: 16px; +} + +hr { + border-color: $border; +} + +/* Dashboard colors */ +.color-gray{ + color: $text-placeholder; +} +.color-yellow{ + color: $warning-default; +} +.color-red{ + color: $negative-default; +} + +.color-green { + color: $positive-default; +} \ No newline at end of file diff --git a/packages/client/scss/fonts.scss b/packages/client/scss/fonts.scss index 705e452f0..4b2664462 100644 --- a/packages/client/scss/fonts.scss +++ b/packages/client/scss/fonts.scss @@ -5,46 +5,57 @@ */ // IMPORT FONTS FROM GOOGLE FONTS: -// LORA BOLD 700 (HEADING FONT) // INTER MEDIUM 500 (BODY FONT) -@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&family=Lora:wght@700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;700&display=swap'); -// SET HEADING FONTS TO LORA -h1, h2, h3, h4, h5, h6 { - font-family: Lora, Helvetica, Arial, sans-serif; +// SET BODY FONTS TO INTER +body { + font-family: Inter, Helvetica, Arial, sans-serif; + font-size: 16px; + line-height: 150%; + font-weight: 500; + color: $text-primary; +} + +// Setting the same styles for heading elements and heading classes so there's flexibility in separating semantic headings from visual heading style +h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-weight: 700; line-height: 120%; } -h1 { - font-size: 38px; +h1, .h1 { // called 'headingXL' in USDR Design System + font-size: 2.375rem; // 38px } -h2 { - font-size: 30px; +h2, .h2 { // 'headingLarge' + font-size: 1.875rem; // 30px } -h3 { - font-size: 20px; +h3, .h3 { // 'headingMedium' + font-size: 1.25rem; } -h4 { - font-size: 16px; +h4, .h4 { // 'headingSmall' + font-size: 1rem; +} + +h5, .h5, p { // 'headingXS' and 'body' + font-size: 0.875rem; // 14px } -h5 { - font-size: 14px; +h6, .h6, .caption { // 'caption' + font-size: 0.8125rem; // 13px } // SET BODY FONTS TO INTER body { font-family: Inter, Helvetica, Arial, sans-serif; - font-size: 14px; + font-size: 16px; line-height: 150%; font-weight: 500; } -#app { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} +/* Bold text of active tabs and grant detail labels */ +.nav-tabs .nav-link.active, .data-label { + font-weight: 700; +} \ No newline at end of file diff --git a/packages/client/src/App.vue b/packages/client/src/App.vue index 76f9bada2..33936d937 100644 --- a/packages/client/src/App.vue +++ b/packages/client/src/App.vue @@ -19,7 +19,6 @@ export default { #app { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - color: #2c3e50; } body { diff --git a/packages/client/src/components/GrantsTableNext.vue b/packages/client/src/components/GrantsTableNext.vue index 49db99e92..4712b269d 100644 --- a/packages/client/src/components/GrantsTableNext.vue +++ b/packages/client/src/components/GrantsTableNext.vue @@ -4,7 +4,7 @@
-
+
@@ -13,10 +13,11 @@ -

{{ searchTitle }}

+

{{ searchTitle }}

 - -

Export CSV

+ + + @@ -302,7 +303,7 @@ export default { } }, notifyError() { - this.$bvToast.toast('We encountered an error while retriving grants data. For the most accurate results please refresh the page and try again.', { + this.$bvToast.toast('We encountered an error while retrieving grants data. For the most accurate results please refresh the page and try again.', { title: 'Something went wrong', variant: 'danger', solid: true, diff --git a/packages/client/src/components/Layout.vue b/packages/client/src/components/Layout.vue index 44c8438e7..d988fd887 100755 --- a/packages/client/src/components/Layout.vue +++ b/packages/client/src/components/Layout.vue @@ -1,10 +1,10 @@ diff --git a/packages/client/src/views/Organizations.vue b/packages/client/src/views/Organizations.vue index fd6a666ef..c385d9b0c 100644 --- a/packages/client/src/views/Organizations.vue +++ b/packages/client/src/views/Organizations.vue @@ -1,11 +1,11 @@ diff --git a/packages/client/src/views/RecentActivity.vue b/packages/client/src/views/RecentActivity.vue index c9dc2cbe2..2e5f3bea4 100644 --- a/packages/client/src/views/RecentActivity.vue +++ b/packages/client/src/views/RecentActivity.vue @@ -2,7 +2,7 @@
-

Recent Activity

+

Recent Activity