[openstreetmap/openstreetmap-website] Safari-compatible auth provider images (PR #6385)

[mmd]

As discussed in #6360, Github and Apple icons don't render properly on Safari, because `filter="invert(100%)" ` and `filter="contrast(82%)"` are not supported. As a result, the icons are shown as black (or in dark mode: white) boxes.

<img width="428" height="110" alt="image" src="https://github.com/user-attachments/assets/c844b7d3-3d6e-4c90-9fbf-b4127d71d8ce" />

In this PR, I'm proposing a new approach, which renders both icons as expected on Safari. Also tested on Firefox, Chrome, Edge, Librewolf:

<img width="336" height="138" alt="image" src="https://github.com/user-attachments/assets/b9c74e54-f7a0-4b6e-bea1-555dd8e1af62" />


<img width="336" height="138" alt="image" src="https://github.com/user-attachments/assets/abc2b7ad-8f76-438c-90ea-cd4b3826f0cd" />

I added an inline style attribute to both svg files, which, due to CSP, requires a nonce to be passed along. The only purpose of the style is to define background and path colors for both color schemes.

```
  <style>
    .apple-logo rect { fill: black; }
    .apple-logo path { fill: white; }
    @media (prefers-color-scheme: dark) {
      .apple-logo rect { fill: white; }
      .apple-logo path { fill: black; }
    }
  </style>
```

I think moving the style definition to common.scss should also work, if inline styles are not the preferred approach.


You can view, comment on, or merge this pull request online at:

  https://github.com/openstreetmap/openstreetmap-website/pull/6385

-- Commit Summary --

  * Safari-compatible auth provider images

-- File Changes --

    M app/assets/images/auth_providers/apple.svg (12)
    M app/assets/images/auth_providers/github.svg (14)
    M app/views/application/_auth_button.html.erb (3)
    M config/initializers/inline_svg.rb (10)

-- Patch Links --

https://github.com/openstreetmap/openstreetmap-website/pull/6385.patch
https://github.com/openstreetmap/openstreetmap-website/pull/6385.diff

-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/6385
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/pull/6385 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20250907/3edfd77b/attachment-0001.htm>