feat: UI Tweaks to Card Design in Grant Detail (#3439)

* feat: Updated card design and alignment in Main Card (Grant Detail)

This commit updates the UI design of the Card Design and Main Card (Grant Detail) to align with the new specifications:

1. Card Design:
- Increased border radius of the card from 4px (.25rem) to 8px (.5rem).

2. Main Card (Grant Detail):
- Updated the margin for the primary (main content) card from 20px to 24px (1.5rem).
- Adjusted the top margin of the back button row to 0px, ensuring a total margin of 24px with the card margin, and set the bottom margin to 24px.
- Modified the Grant Title margins to have a top margin of 16px (1rem) and a bottom margin of 24px (1.5rem).
- Ensured consistent 24px (1.5rem) spacing between the button row (View on Grants, Copy, Print) by changing the button's right margin from 20px (mr-5) to 24px (mr-4).
- Left-aligned the button row to ensure it is 24px from the left edge of the card by setting the grant-details-main-action div's margin-left to 0 (ml-0), relying on the outer card's 24px margin.

* feat: Updated alignment in Secondary Card (Share, Status, Grant Activity, etc)

In this Commit, the Secondary Card (Share, Status, Grant Activity, etc.) is updated according to the requirements

1. Top/Bottom Margin:
- Changed the top and bottom margins to 24px (1.5rem) to ensure that the cards are visually aligned in both the main and side columns.

2. Left/Right Margin:
- Adjusted the left and right margins to 16px (1rem) to accommodate the narrower column sizing, providing more content space within the card.

3. Total Spacing Between Entries:
- Ensured a consistent spacing of 24px (1.5rem) between entries within the card to maintain a clean and organized layout.

4. Removed Padding on Email Address Line

* Fixed ESLint QA Failure issue

The issue was caused due to ESLint rule 'no-multiple-empty-lines'. This rule enforces not to use more than one consecutive empty blank line. Fixed it by remove those empty blank lines.

* eslint fix

* Removed comments

packages/client/src/views/GrantDetailsView.vue

@@ -13,7 +13,7 @@
       >
         <div class="grant-details-container">
           <div>
-            <b-card>
+            <b-card class="p-4">
               <div class="mb-5">
                 <div class="grant-details-back-link">
                   <router-link
@@ -29,16 +29,16 @@
                   >Back</a>
                 </div>
                 <!-- Left page column: headline -->
-                <h2 class="grant-details-headline m-0">
+                <h2 class="grant-details-headline mt-3 mb-4">
                   {{ currentGrant.title }}
                 </h2>
 
                 <!-- Left page column: main print/copy/grants.gov buttons -->
-                <div class="grant-details-main-actions print-d-none">
+                <div class="grant-details-main-actions print-d-none ml-0">
                   <div class="d-flex justify-content-between align-items-center">
                     <b-button
                       variant="primary"
-                      class="mr-5 text-nowrap"
+                      class="mr-4 text-nowrap"
                       :href="`https://www.grants.gov/search-results-detail/${currentGrant.grant_id}`"
                       target="_blank"
                       rel="noopener noreferrer"
@@ -155,7 +155,7 @@
                   <div
                     v-for="agency in assignedAgencies"
                     :key="agency.id"
-                    class="d-flex justify-content-between align-items-start my-3"
+                    class="d-flex justify-content-between align-items-start my-4"
                   >
                     <div class="mr-3">
                       <p class="m-0">
@@ -229,7 +229,7 @@
                 <div
                   v-for="agency in visibleInterestedAgencies"
                   :key="agency.id"
-                  class="d-flex justify-content-between align-items-start my-3"
+                  class="d-flex justify-content-between align-items-start my-4"
                 >
                   <UserAvatar
                     :user-name="agency.user_name"
@@ -242,7 +242,10 @@
                       <strong>{{ agency.agency_name }}</strong> team status to
                       <strong>{{ agency.interested_code_name }}</strong>
                     </p>
-                    <p v-if="agency.user_email">
+                    <p
+                      v-if="agency.user_email"
+                      class="email-paragraph"
+                    >
                       <small>
                         <CopyButton :copy-text="agency.user_email">
                           {{ agency.user_email }}
@@ -574,25 +577,25 @@ export default {
 
 <style lang="css">
 .grant-details-container {
-  padding-right: 18px;
-  padding-left: 18px;
-  padding-bottom: 80px;
-  padding-top: 15px;
+  padding-right: 1.125rem;
+  padding-left: 1.125rem;
+  padding-bottom: 5rem;
+  padding-top: 1rem;
   display: grid;
-  grid-template-columns: 1fr 437px;
+  grid-template-columns: 1fr 27.3125rem;
   grid-template-rows: 50px auto auto;
   grid-template-areas:
     "back-link secondary-actions"
     "headline  secondary-actions"
     "main-actions secondary-actions"
     "content  secondary-actions";
-  column-gap: 20px;
-  row-gap: 48px;
+  column-gap: 1.25rem;
+  row-gap: 3rem;
   .grant-details-back-link {
     grid-area: back-link;
-    margin-top: 28px;
-    margin-bottom: 5px;
-    font-size: 14px;
+    margin-top: 0rem;
+    margin-bottom: 1.5rem;
+    font-size: 0.875rem;
     font-weight: 700;
     color: #6d7278;
     a {
@@ -620,6 +623,10 @@ export default {
 
   .grant-details-secondary-actions {
     grid-area: secondary-actions;
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+    margin-left: 1rem;
+    margin-right: 1rem;
   }
 
   .grant-details-table tr:nth-of-type(odd) {
@@ -634,6 +641,14 @@ export default {
   }
 }
 
+.email-paragraph {
+  margin: 0rem;
+}
+
+.grant-details-container .card {
+  border-radius: 8px !important;
+}
+
 .background {
   z-index: -1000;
   top: 0;