feat: /security/cis redesign

[mtruj013]

Done

• Applied redesign as per doc and design

QA

• View the site locally in your web browser at: https://ubuntu-com-14732.demos.haus/security/cis
  • Be sure to test on mobile, tablet and desktop screen sizes
• Check against doc and design

Issue / Card

Fixes https://warthogs.atlassian.net/browse/WD-12038

[webteam-app]

Demo

Jenkins

demos.haus

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 72.32%. Comparing base (a7e769a) to head (2a7a565).
Report is 80 commits behind head on feature-security-bubble.

Additional details and impacted files

@@                   Coverage Diff                    @@
##           feature-security-bubble   #14732   +/-   ##
========================================================
  Coverage                    72.32%   72.32%           
========================================================
  Files                          120      120           
  Lines                         3404     3404           
  Branches                      1174     1177    +3     
========================================================
  Hits                          2462     2462           
  Misses                         917      917           
  Partials                        25       25           

[eliman11]

Looks good to me, thank you! A couple quick comments but they're more visual- than UX-related, so I'll +1 for UX anyway.

• The Kubernetes logos looks really pixelated, maybe there's an alternative @kim-isaac can suggest?

• On smaller viewports when the link wraps to the next line, could we break the link onto a new line?

[kim-isaac]

Hi @mtruj013 Thanks for your work! I have a few comments including Elaine's suggestions. (Thanks @eliman11 !!)

For this section,

• Button should be a default style
• Could you change the logo section to this? Sorry I chose wrong one

Also for this section in the mobile view,

• Could you break the line between the btn and link? Elaine already pointed it out, but I just brought it up again!

That's all from my side. Thanks again!

[kim-isaac]

hi @mtruj013 this all looks great, thanks for making the adjustments! I'll add a design +1

[britneywwc]

Looks great overall, left a few questions and some minor suggestions :)

[britneywwc]

There is no shallow section wrapping on design for h2 and p, this can be removed

[mtruj013]

I see it on both, or do you mean a different section? nvm, I see what you're saying now. The spacing underneath the p on the design isn't native, I have to wrap both elements in an additional shallow section in order to replicate it

[mtruj013]

Thanks @britneywwc! Could you have another look?

[britneywwc]

Thanks for making the changes, looks great! 😄