fizzy/app/views/notifications/settings/_system.html.erb

<div class="notifications-help hide-in-browser" data-notifications-target="details">
  <h2>Check your <%= platform.operating_system %> settings</h2>
  <% case
    when platform.firefox? && platform.android? %>
      <ol>
        <li>Tap the <em><%= icon_tag "menu-dots-vertical.svg", alt: "More options" %></em> menu button.</li>
        <li>Tap <em>Settings</em>.</li>
        <li>Tap <em>Notifications</em>.</li>
        <li>Tap <em><%= icon_tag "switch", alt: "the toggle button" %></em> to <em>Allow <%= platform.browser.capitalize %> notifications</em>.</li>
      </ol>
    <% when platform.edge? && platform.desktop? %>
      <ol>
        <li>Click <em>Start</em>, then <em>Settings</em>.</li>
        <li>Go to <em>System &gt; Notification</em>.</li>
        <li>Click <em><%= icon_tag "switch", alt: "the toggle button" %></em> <em>ON</em> for Fizzy.</li>
      </ol>
    <% when (platform.firefox? || platform.chrome?) && platform.desktop? %>
      <ol>
        <% if platform.windows? %>
          <li>Click <em>Start</em>, then <em>Settings</em>.</li>
          <li>Go to <em>System &gt; Notification</em>.</li>
          <li>Click <em><%= icon_tag "switch", alt: "the toggle button" %></em> <em>ON</em> for Fizzy.</li>
        <% else %>
          <li>Click <em aria-label="the Apple menu"></em> in the top left.</li>
          <li>Click <em>System Settings…</em>.</li>
          <li>Click <em>Notifications</em>.</li>
          <li>Click <em>Fizzy</em>.</li>
          <li>Click <em><%= icon_tag "switch", alt: "the allow notifications switch" %></em> to <em>Allow notifications</em>.</li>
        <% end %>
      </ol>
    <% when platform.safari? && platform.desktop? %>
      <ol>
        <li>Click <em aria-label="the Apple menu"></em> in the top left.</li>
        <li>Click <em>System Settings…</em>.</li>
        <li>Click <em>Notifications</em>.</li>
        <li>Click <em>Fizzy</em>.</li>
        <li>Click <em><%= icon_tag "switch", alt: "the allow notifications switch" %></em> to <em>Allow notifications</em>.</li>
      </ol>
    <% when (platform.safari? || platform.chrome?) && platform.ios? %>
      <ol>
        <li>Open the <em><%= icon_tag "gear", aria: { hidden: "true" } %></em> Settings app.</li>
        <li>Scroll to and tap <em>Fizzy</em>.</li>
        <li>Tap <em>Notifications</em>.</li>
        <li>Tap <em><%= icon_tag "switch", alt: "the allow notifications switch button" %></em> to <em>Allow Notifications</em>.</li>
      </ol>
    <% when platform.chrome? && platform.android? %>
      <ol>
        <li>Open the <em><%= icon_tag "gear", aria: { hidden: "true" } %></em> Settings app.</li>
        <li>Tap <em>Notifications</em>.</li>
        <li>Tap <em>App notifications</em>.</li>
        <li>Scroll to <em>Fizzy</em>.</li>
        <li>Tap <em><%= icon_tag "switch", alt: "the switch" %></em> to <em>Allow Notifications</em>.</li>
      </ol>
    <% else %>
      <p>Ensure notifications are allowed for <%= platform.browser.capitalize %> in your system settings.</p>
  <% end %>
</div>