Implement new designs for "Legal resources" landing page

[jenniferthibault]

Discussion and history in https://github.com/18F/openFEC-web-app/issues/2185

---

Designs

Notes

Links

• Advanced searches
  • Advisory opinions (AOs): https://www.fec.gov/data/legal/search/advisory-opinions/?type=advisory_opinions&ao_category=F
  • Matters under review (MURs): https://www.fec.gov/data/legal/search/enforcement/?search_type=murs&search=&mur_no=&mur_respondents=
  • Audits: (link to come once search is finished)
  • Regulations: https://www.fec.gov/regulations
  • Statutes: https://www.fec.gov/data/legal/search/statutes
• All news: https://www.fec.gov/updates/
• Browse legal resources:
  • Advisory opinions: https://www.fec.gov/data/legal/advisory-opinions/
  • Enforcement of federal campaign finance law: https://www.fec.gov/legal-resources/enforcement/
  • Regulations: https://www.fec.gov/legal-resources/regulations/
  • Statutes: https://www.fec.gov/legal-resources/statutes
  • Legislation and Commission recommendations: https://www.fec.gov/legal-resources/legislation
  • Court cases: https://www.fec.gov/legal-resources/court-cases
  • Audits: https://www.fec.gov/legal-resources/enforcement/audit-reports/
  • Policy and other guidance: https://transition.fec.gov/law/policy.shtml
• Guides for candidates and committees: Link to the page created by the implementation of this issue: https://github.com/18F/openFEC-web-app/issues/2286
• Contribution limits: https://www.fec.gov/help-candidates-and-committees/candidate-taking-receipts/contribution-limits-candidates/

Tasks to completion:

• [x] @jenniferthibault / @JonellaCulmer finalizes and exports images, icons (should not block the rest of implementation)
• [x] Add images & icon assets to fec-cms
• [x] Match to design above
• [x] Check mobile-readiness

[AmyKort]

@dorothyyeager and @gsmaragdis -- just flagging this one for you.

[jenniferthibault]

Image above edited to include final icon designs.

Some of these icons have already been added:

• For AO's: the direction sign
• For enforcement: shield
• For court cases: mallet
  • Since this icon isn't used anywhere else right now, can we change the file name to gavel.svg instead as part of this work?

The rest of the icons are exported as SVG's and packaged in this zip file: 📁 legal-icons.zip

[johnnyporkchops]

@jonella, @jenniferthibault - Do you think the icon SVGs should al start at the same size for cards? We can, of course, set differing background size properties in the CSS to accommodate the different originals sizes. For example the ones on data landng inherit the card__icon background size of 50%. If I add the new ones, I have to add a specific rule for 75% for the ones that appear on legal resources landing. If these were the same size it would mean fewer lines of CSS , not big deal but thought it might be a smart coordination between design/front-end teams.

[johnnyporkchops]

Disregard the last comment regarding icons, I just checked and realized that the new icons made were the same size as most. Just a few older ones are smaller, which is not worth changing, given that they may have already been used throughout the SCSS with various bg-size properties,

[jenniferthibault]

@johnnyporkchops our working standard is to build each icon at a 20x20 px square so that the line weights and spacing are consistent when scaled. You're right that a few of the earlier ones are probably not consistent to that template.

Since the gavel is being replaced overall, here it is exported as 20x20, so we can make it match. gavel.svg.zip

Since not all icons have perfectly square proportions, when exporting we crop the artboard to the dimensions of the art. Perhaps what you're saying is that we shouldn't do this, and instead should export all icons at 20x20, including white space outside the artwork? @xtine what do you think?

Here are some examples from the working file, where you can see that the checklist, CFR and U.S.C. icons aren't full 20x20:

[johnnyporkchops]

The non-square seem to work fine in the card icons even though they have a different height, I was more concerned with the older, smaller sizes. I will replace mallet with gavel at the new size. Thanks!

[xtine]

@jenniferthibault: personally I'm not concerned with all icons being 20x20 because each icon needs a specific class defined for them, so the positioning is defined in the stylesheet.

[patphongs]

Had a question for @jenniferthibault regarding the card design on the legal resources landing page: https://github.com/18F/fec-cms/pull/1443.

[AmyKort]

Issue moved to 18F/fec-cms #1601 via ZenHub