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]>
usdigitalresponse · Nov 30, 2023 · 5eb553d · 5eb553d
1 parent 9e24c76
commit 5eb553d
Show file tree

Hide file tree

Showing 20 changed files with 155 additions and 151 deletions.
diff --git 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 (`<h1>` through `<h6>`) 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
+<h2 class="h4">This text will render as an <h2> in the HTML but will look like an h4!</h2>
+```
diff --git 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
@@ -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
@@ -51,4 +51,36 @@ $theme-colors: map-merge(
 @import 'vue-select/src/scss/vue-select.scss';
 
 // SET USDR FONTS
-@import './fonts.scss';
+@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;
+}
diff --git 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;
+}
diff --git 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
@@ -4,7 +4,7 @@
       <div class="ml-3">
         <SavedSearchPanel :isDisabled="loading" />
       </div>
-      <div class="ml-2">
+      <div class="ml-1">
         <SearchPanel :isDisabled="loading" ref="searchPanel" :search-id="Number(editingSearchId)" @filters-applied="paginateGrants" />
       </div>
     </b-row>
@@ -13,10 +13,11 @@
         <SearchFilter :isDisabled="loading" :filterKeys="searchFilters" @filter-removed="clearSearch" />
       </b-col>
       <b-col align-self="end" v-if="!showSearchControls">
-        <h4 class="mb-0">{{ searchTitle }}</h4>
+        <h2 class="mb-0">{{ searchTitle }}</h2>
       </b-col>
-      <b-col align-self="end">
-        <p class="mb-0 text-right text-nowrap"><a href="#" @click="exportCSV" :disabled="loading" variant="outline-primary border-0">Export CSV</a></p>
+      <b-col class="d-flex justify-content-end">
+        <b-button @click="exportCSV" :disabled="loading" variant="outline-primary" size="sm">
+          <b-icon icon="download" class="mr-2" aria-hidden="true" />Export to CSV</b-button>
       </b-col>
     </b-row>
     <b-row align-v="center">
@@ -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
@@ -1,10 +1,10 @@
 <template>
   <div>
-    <b-navbar :type="navBarType" :variant="navBarVariant">
+    <b-navbar :type="navBarType" :variant="navBarVariant" class="header-dropshadow py-3">
       <b-navbar-brand href="/#/grants" class="d-flex align-items-center">
-      <b-img v-if="myProfileEnabled" :src="require('../assets/usdr_logo_standard_wide.svg')" style="height: 1.625rem;" class="" alt="United States Digital Response logo" />
-      <b-img v-else :src="require('../assets/usdr_logo_white_wide.svg')" style="height: 1.625rem;" class="" alt="United States Digital Response logo in white" />
-      <h3 class="ml-3 mb-0">Grants Identification Tool</h3>
+      <b-img v-if="myProfileEnabled" :src="require('../assets/usdr_logo_standard_wide.svg')" style="height: 1.625rem;" class="" alt="United States Digital Response - Home" />
+      <b-img v-else :src="require('../assets/usdr_logo_white_wide.svg')" style="height: 1.625rem;" class="" alt="United States Digital Response - Home" />
+      <h1 class="ml-3 mb-0 h4">Federal Grant Finder</h1>
     </b-navbar-brand>
       <b-collapse id="nav-collapse" is-nav>
 

diff --git a/packages/client/src/components/Modals/EditTeam.vue b/packages/client/src/components/Modals/EditTeam.vue
@@ -100,8 +100,7 @@
         </b-form-group>
         <form ref="form" @click="handleDelete">
           <span id="disabled-wrapper" class="d-inline-block" tabindex="0">
-            <b-button v-bind:disabled="userRole !== 'admin'" style="pointer-events: none;" variant="danger">
-              Admin Delete {{newTerminologyEnabled ? 'Team' : 'Agency'}}
+            <b-button v-bind:disabled="userRole !== 'admin'" variant="outline-danger"> Delete {{newTerminologyEnabled ? 'Team' : 'Agency'}}
             </b-button>
           </span>
           <b-tooltip v-if="userRole !== 'admin'" target="disabled-wrapper" triggers="hover">

diff --git a/packages/client/src/components/Modals/GrantDetails.vue b/packages/client/src/components/Modals/GrantDetails.vue
@@ -1,35 +1,34 @@
 <!-- eslint-disable max-len -->
 <template>
-  <b-modal v-model="showDialog" ok-only :title="selectedGrant && selectedGrant.title" @hide="resetSelectedGrant"
-    scrollable size="lg" header-bg-variant="primary" header-text-variant="light" body-bg-variant="light"
-    body-text-variant="dark" footer-bg-variant="dark" footer-text-variant="light">
+  <b-modal v-model="showDialog" ok-only :title="selectedGrant && selectedGrant.grant_number" @hide="resetSelectedGrant"
+    scrollable size="xl">
     <div v-if="selectedGrant">
-      <b-row>
-        <b-col cols="9">
-          <h3>Grant Number: {{ selectedGrant.grant_number }}</h3>
+      <b-row class="mb-3 d-flex align-items-baseline">
+        <b-col cols="8">
+          <h1 class="mb-0 h2">{{ selectedGrant.title }}</h1>
         </b-col>
-        <b-col cols="3" class="text-right">
+        <b-col cols="4" class="text-right">
           <b-button :href="`https://www.grants.gov/web/grants/view-opportunity.html?oppId=${selectedGrant.grant_id}`"
             target="_blank" rel="noopener noreferrer" variant="primary">
-            Grants.Gov <b-icon icon="link" aria-hidden="true"></b-icon>
+            <b-icon icon="box-arrow-up-right" aria-hidden="true" class="mr-2"></b-icon>View on Grants.gov
           </b-button>
         </b-col>
       </b-row>
-      <p><span style="font-weight:bold">Valid from:</span> {{ new
+      <p><span class="data-label">Valid from:</span> {{ new
           Date(selectedGrant.open_date).toLocaleDateString('en-US', { timeZone: 'UTC' })
       }}-{{ new
     Date(selectedGrant.close_date).toLocaleDateString('en-US', { timeZone: 'UTC' })
 }}</p>
       <div v-for="field in dialogFields" :key="field">
-        <p><span style="font-weight:bold">{{ titleize(field) }}:</span> {{ selectedGrant[field] }}</p>
+        <p><span class="data-label">{{ titleize(field) }}:</span> {{ selectedGrant[field] }}</p>
       </div>
-      <h6>Description</h6>
+      <p class="data-label">Description:</p>
       <div style="max-height: 170px; overflow-y: scroll">
         <div style="white-space: pre-line" v-html="selectedGrant.description"></div>
       </div>
       <br />
-      <b-row style="padding: 16px;">
-        <h4>{{newTerminologyEnabled ? 'Team': 'Agency'}} Status</h4>
+      <b-row class="ml-2 mb-2 d-flex align-items-baseline">
+        <h2 class="h4">{{newTerminologyEnabled ? 'Team': 'Agency'}} Status</h2>
         <b-col class="text-right">
           <b-row v-if="!interested">
             <b-col cols="9">
@@ -48,7 +47,7 @@
                 </b-form-select-option-group>
               </b-form-select>
             </b-col>
-            <b-button variant="outline-success" @click="markGrantAsInterested">Submit</b-button>
+            <b-button variant="outline-primary" @click="markGrantAsInterested">Submit</b-button>
           </b-row>
           <b-row v-if="interested && interested.interested_status_code !== 'Rejection'&& shouldShowSpocButton">
             <b-col>
@@ -62,25 +61,25 @@
         <template #cell(actions)="row">
           <b-row
             v-if="(String(row.item.agency_id) === selectedAgencyId) || isAbleToUnmark(row.item.agency_id)">
-            <b-button variant="danger" class="mr-1" size="sm" @click="unmarkGrantAsInterested(row)">
+            <b-button variant="outline-danger" class="mr-1 border-0" size="sm" @click="unmarkGrantAsInterested(row)">
               <b-icon icon="trash-fill" aria-hidden="true"></b-icon>
             </b-button>
           </b-row>
         </template>
       </b-table>
       <br />
-      <b-row style="padding: 16px;">
-        <h4>Assigned {{newTerminologyEnabled ? 'Teams': 'Agencies'}}</h4>
+      <b-row class="ml-2 mb-2 d-flex align-items-baseline">
+        <h2 class="h4">Assigned {{newTerminologyEnabled ? 'Teams': 'Agencies'}}</h2>
           <multiselect v-model="selectedAgencies" :options="agencies" :multiple="true" :close-on-select="false"
             :clear-on-select="false" :placeholder="`Select ${newTerminologyEnabled ? 'teams': 'agencies'}`" label="name" track-by="id"
             style="width: 300px; margin: 0 16px;" :show-labels="false"
           >
           </multiselect>
-          <b-button variant="outline-success" @click="assignAgenciesToGrant">Assign</b-button>
+          <b-button variant="outline-primary" @click="assignAgenciesToGrant">Assign</b-button>
       </b-row>
       <b-table :items="assignedAgencies" :fields="assignedAgenciesFields">
         <template #cell(actions)="row">
-          <b-button variant="danger" class="mr-1" size="sm" @click="unassignAgenciesToGrant(row)">
+          <b-button variant="outline-danger" class="mr-1 border-0" size="sm" @click="unassignAgenciesToGrant(row)">
             <b-icon icon="trash-fill" aria-hidden="true"></b-icon>
           </b-button>
         </template>

diff --git a/packages/client/src/components/SearchFilter.vue b/packages/client/src/components/SearchFilter.vue
@@ -2,7 +2,7 @@
   <div class="filter-container d-flex">
     <div class="align-self-end">
       <div class="align-self-end">
-        <h4 class="mb-0">{{ selectedSearch === null ? "All Grants" : searchName }} </h4>
+        <h2 class="mb-0 h4">{{ selectedSearch === null ? "All Grants" : searchName }} </h2>
         <span v-if="selectedSearch !== null">
           <a href="#" :class="{ inactiveLink: isDisabled }" v-on:click.prevent="editFilter">Edit</a> |
           <a href="#" :class="{ inactiveLink: isDisabled }" v-on:click.prevent="clearAll" >Clear</a>
@@ -71,9 +71,11 @@ export default {
 };
 
 </script>
-<style>
+<style lang="scss">
+@import '../../scss/colors-semantic-tokens.scss';
+
 .inactiveLink {
   pointer-events: none;
-  color: grey;
+  color: $text-placeholder;
 }
 </style>
diff --git a/packages/client/src/views/Dashboard.vue b/packages/client/src/views/Dashboard.vue
@@ -49,7 +49,7 @@
           <b-col>
             <b-card>
               <div class="card-block text-left">
-                <h4 class="card-title gutter-title2 row">Upcoming Closing Dates</h4>
+                <h2 class="card-title gutter-title2 row h4">Upcoming Closing Dates</h2>
                 <span id="noUpcomingCloseDates" class="gutter-title2 row" v-if="!grantsAndIntAgens?.length">Your {{newTerminologyEnabled ? 'team' : 'agency'}} has no upcoming close dates.</span>
               </div>
               <b-table sticky-header='350px' hover :items='grantsAndIntAgens' :fields='upcomingFields'
@@ -62,7 +62,7 @@
                   <div v-if="field.key === 'close_date' && yellowDate === true" :style="field.trStyle" v-text="value"></div>
                   <div v-if="field.key === 'close_date' && redDate === true" :style="field.tdStyle" v-text="value"></div>
                   <div v-if="field.key === 'close_date' && blackDate === true" :style="field.tlStyle" v-text="value"></div>
-                  <div v-if="(grantsAndIntAgens[index]) && (field.key === 'title') && (value === grantsAndIntAgens[index].title)" :style="{color:'#757575'}">{{grantsAndIntAgens[index].interested_agencies}}</div>
+                  <div v-if="(grantsAndIntAgens[index]) && (field.key === 'title') && (value === grantsAndIntAgens[index].title)" class="color-gray">{{grantsAndIntAgens[index].interested_agencies}}</div>
                 </template>
               </b-table>
               <div v-if="totalUpcomingGrants > 3">
@@ -117,19 +117,6 @@
 </template>
 
 <style scoped>
-.color-gray{
-  color: #757575;
-}
-.color-yellow{
-  color: #aa8866;
-}
-.color-red{
-  color: #ae1818;
-}
-
-.color-green {
-  color: green;
-}
 .gutter-icon.row {
     margin-right: -8px;
     margin-left: -8px;
@@ -203,14 +190,14 @@ export default {
           formatter: 'formatDate',
           thStyle: { width: '20%' },
           tdStyle: {
-            color: '#ae1818',
+            color: '#C22E31',
             fontWeight: 'bold',
           },
           tlStyle: {
             color: 'black',
           },
           trStyle: {
-            color: '#aa8866',
+            color: '#956F0D',
             fontWeight: 'bold',
           },
           fontWeight: 'bold',
@@ -247,7 +234,7 @@ export default {
           sortByFormatted: false,
           formatter: 'formatMoney',
           style: {
-            color: '#757575',
+            color: '#6D7278',
           },
           class: 'text-right',
         },
-Original file line number
+Diff line change
@@ Expand Up / @@ -19,7 +19,6 @@ export default { @@
     #app {
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
-      color: #2c3e50;
     }
     body {
@@ Expand Down @@