Update ABP logo and use new red color

Background / User story

Logo font change

Replace the current logo with the right logo: The right one has two font-weight regular and bold.

New red color

Apply new red color #ED1E45 throughout the extension.

What to change

• Specs: https://gitlab.com/eyeo/specs/spec/-/merge_requests/356
  • Disclaimer: The specs only contain changes in terms of assets. Any changes strictly related to styles applied should be handled separately.

• Development:
  • Apply new red color #ED1E45 throughout the extension (see list below).
    • Update Adblock Plus logos.
    • Update toolbar icons.
    • Update other red icons (e.g. icons on first-run page).
    • Update any styles that use the old red color to use the new one.

List of red color uses

click to show/hide

• build/
  • icons-generation/
    • index.js
      • {type: "default", content: "abp", color: "C90000"},
• css/
  • desktop-options.scss
    • #all-filter-lists-table li.show-message .message.error {color}
    • #notification.error {color}
  • first-run.scss
    • #warnings > section {border}
    • #navbar-donate {background-color}
  • io-filter-table.scss
    • io-filter-table .footer .delete {border, color}
    • io-filter-table .footer .error {color}
  • issue-reporter.scss
    • #anonymousSubmissionWarning, #error {color}
    • input[type="email"]:invalid {border-color}
  • landing.scss
    • :root {--color-highlight}
  • light.scss
    • :root {--color-critical, --color-error}
  • popup-dummy.scss
    • #block-element, #block-element:hover, #block-element:focus {border}
  • web.scss
    • Various: assess after dropping dependency
• js/
  • drawing-handler.js
    • this.ctx.strokeStyle = "rgb(208, 1, 27)";
• skin/
  • backgrounds/
    • toolbar.svg
  • icons/
    • day1/
      • bug.svg
    • first-run/
      • checkmark.svg
      • lock.svg
      • rocket.svg
    • toolbar/
      • default-*.png
    • abp-128.png
    • abp-full-logo.svg
    • abp-logo.svg
    • attention.svg
    • critical.svg
    • error.svg
    • iconCritical.svg
    • iconOff.svg
    • trash.svg
  • devtools-panel.css
    • #items tr[data-state=blocked] {color}
  • mobile-options.css
    • [role="dialog"] .error {color}
    • #dialog-subscribe[data-error="url"] [name="url"]:placeholder-shown {border-color}

Hints for testers

The new logo and red color (#ED1E45) should appear in the following places:

• toolbar icon: fixed and animated (notifications)
• composer.html page (block element popup window)
  • footer logo and "block" button
• options.html page
  • sidebar logo
  • Advanced section
    • "Filter lists" > Error messages
    • "My filter List" > "delete" button (appears after selecting added elements in the list) and footer error messages
  • full page error notifications (like the one shown here)
• day1.html page
  • at the top, logo and text description (number of ads)
  • at the bottom, abp popup and toolbar icon screenshots
• first-run.html page
  • At the top, ABP logo and "donate" button
  • checkmark.svg, rocket.svg and lock.svg images.
  • text-links/anchors
  • warning messages border
• issue-reporter.html
  • header logo
  • "Mark issue" > screenshot highlighter border
  • [! Detected regression - see https://gitlab.com/eyeo/adblockplus/abpui/adblockplusui/-/issues/877] "Details" > invalid email box border and "anonymous submission" warning message.
• problem.html page
  • header logo
• devtools-panel
  • toolbar icon (only Firefox)
  • blocked filters (only light skin)
• mobile-options.html
  • header logo
• updates.html
  • header logo

Hints for translators

N/A

Integration Notes

Requires https://gitlab.com/eyeo/adblockplus/abpui/adblockpluschrome/-/merge_requests/75