Agency Modal: New design

[machikoyasuda]

closes #1634
closes #1601 - rem-ify all of the border-radiuses

What this PR does

• Implement new Agency Modal design. 3 fits in 1 row.
• Refactors modal and modal-info templates into 1 template.
• Modal close button SVG
• Modal close button focus ring padding
• Modal close button hover color

Note: When we get the 4th agency, we'll have to edit some CSS so that only 2 agencies show up in each row. That'll just have to happen when we get there.

Spec changes

Desktop

- Image dimension changes: 148x72
- Card dimension changes: Constant static width and height of 200x178. No longer dynamic.

- Card inner spacing changes: Padding is now 16px. Padding on Figma is wider, but 16px is the largest padding possible for SacRT name to fit.

- Card outer spacing changes: Gap between buttons is 44px

Mobile

• Image dimension changes: 52x36
• Card dimension changes: Height of 73, Width is 100% of the modal width minus 16px padding on left and right.
• Card inner spacing changes: Padding is 12px.
• Card outer spacing changes: Gap between buttons is 16px
• Space between the bottom of title and beginning of card row: 24px

Button Close X

• #323A45 on load
• #045B86 on hover

[thekaveman]

This definitely looks correct for 2 and 3 agencies.

And while this isn't something we'll have to worry about probably for a bit, the modal does not look correct for 4 agencies.

Since we're doing this update, what do you think about future-proofing to the design we have now?

Figma

This PR

[machikoyasuda]

@thekaveman I wrote this up in the PR note up top:

Note: When we get the 4th agency, we'll have to edit some CSS so that only 2 agencies show up in each row. That'll just have to happen when we get there.

There is no way to write CSS Grid or Flexbox code that can allow for logic like, "When there's 3 agencies, show them in 1 row. When there's 4 agencies, go with 2 rows of 2.", which is the design we have now:

Once we get to 4 agencies, we have to change a few CSS Flexbox Bootstrap classes, and then add this CSS Grid code to the .card-row at the Desktop level, and keep the code the same for the Mobile:

column-gap: 44px; /* and then assign gap figures for Mobile */
row-gap: 24px; /* and then assign gap figures for Mobile */
grid-template-columns: var(--card-width) var(--card-width);

and change 2 classes (add: d-lg-grid remove flex-lg-row) to make Desktop mode CSS Grid and Mobile mode Flexbox:

class="card-row row d-flex d-lg-grid flex-column text-start text-lg-center justify-content-center"

I have it saved in my coding notes for the future :)

So it's like a really small change.

[machikoyasuda]

Rebased dev

[thekaveman]

@machikoyasuda

I wrote this up in the PR note up top

Sorry! I didn't see that.