[Issue]: Apply new card container design

[ClaireValdivia]

Why is this issue important?

We want to visually distinguish the different parts of the grant details page; the goal is for the page organization to be more clear to users, especially as we plan to roll out more collaboration features on the page. We plan to use this design in the future as we design an improved dashboard, public profile, and my profile pages.

Current State

The grant details page has a solid white background

Expected State

Apply the new card container from the design library to the grant details page to show contrast between the page background and cards on the page

• Grant Detail page update figma
• Design Library - Card Container figma

the card design should be applied to following:

• the content in the left column (as shown in the designs)
• the Assign Grant Section
• the Team status section Right now, we don't need to apply the styling to the apply on grants.gov, print, and copy buttons, as they will become part of the left column container in #3153 . For now they can remain on the page as they are, with the three other sections showing as cards.

Implementation Plan

• Add a CardContainer component to generate the card appearance
  • Takes an optional title prop, which will generate the title section with the rule line underneath if provided
  • Uses a single main slot for the card contents
  • Implements the CSS for a white background and gray outline with rounded corners
• Add a CardLayout component to implement the background for the Card Containers
  • Uses a single main slot for the layout contents
  • Implements CSS for the gray page background
  • Unfortunately, achieving a full viewport background is a little awkward within a component in the hierarchy, but something like this should work:

    // add an empty div in the template to hold the background color
    <div class="background" />
    // style this so it always lines up as a full-screen background
    .background {
    position: fixed;
    z-index: -1000;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #F4F7F9;
    }

• Utilize the new CardLayout and CardContainer components to wrap the appropriate sections of the Grant Detail page

Relevant Code Snippets

No response

[jeffsmohan]

@ClaireValdivia I wrote up implementation details here per Ty's request, and I noticed this ticket is largely blocked by the rest of the updates to the Grant Details page design. (For example, until the link/print buttons are moved into the main section, it's unclear how they would fit into a card-based layout.) Can you make sure that dependency is properly captured, since I'm not sure where all the other tickets are? Thanks!

[ClaireValdivia]

Thanks @jeffsmohan ! I'll update the issue to clarify as well, but this should not be dependent on other issues as the card design should be applied to following:

• the content in the left column (as shown in the designs)
• the Assign Grant Section
• the Team status section

Right now, we don't need to apply the styling to the apply on grants.gov, print, and copy buttons, as they will become part of the left column container. For now they can remain on the page as they are, with the three other sections showing as cards. Let me know if that makes sense!

[jeffsmohan]

Yeah, that works! I hadn't seen any designs with the gray background and the buttons off on their own like that, so I wasn't sure we wanted to end up in that design state. But if we're ok with it temporarily, then I agree nothing's blocking this ticket.

Also, just to check, we're not planning to put this change behind any flag (e.g., the new follow/notes feature flag) and this can go live as soon as it's merged, correct?

[ClaireValdivia]

yeah appreciate the question as we hadn't done any specific designs for that.

and confirming that it does not need a feature flag and can go live as soon as it's merged!

[masimons]

Dropping this ticket to focus on forecasted grants per discussion in weekly grants meeting

[ClaireValdivia]

This looks good, thanks @mayabose! I know that @caitlinwinner has a few adjustment requests, so none blocking deployment so we'll make a new issue for adjustments.