Repository: napari/napari

Issue:
✨ Warnings appear more "alarming" than error messages
### Overview of design need
In napari's notification windows, error messages appear less dramatic than warnings. A user could easily miss that a problem exists.

When python raises an error, the notification looks rather un-dramatic in napari:
![image](https://user-images.githubusercontent.com/12660498/144304424-4bbfd3f8-e008-411b-9e5c-5873f414f1a8.png)

If a warning is shown, it looks more dramatic:
![image](https://user-images.githubusercontent.com/12660498/144304511-17ef79e5-7218-4a04-b249-a6da1dd6b7ff.png)

Would it be possible to replace the grey error icon with something red? E.g. a red stop sign is quite typical for error messages on windows:

![image](https://user-images.githubusercontent.com/12660498/144304631-c8219baa-e811-404f-ae76-a76c98d728f9.png)


### What level of design is needed? (Choose all that apply)
_This section may be updated by the designer / UX researcher working on this issue_

- [ ] **User experience research:**  high-level recommendation/exploration of user needs, design heuristics, and / or best practices to inform a design experience  
(Use this option when you feel there’s a challenge to be solved, but you’re curious about what the experience should be — may involve research studies to understand challenges/opportunities for design)
- [ ] **information flow / conceptual:** organizing and structuring of information flow and content, including layout on screen or across multiple steps
- [x] **Visual:** creating mockups, icons, etc
(If choosing this level alone, it means that the content to be mocked up and its organization is already known and specified)

### Is design a blocker?
- [x] **Yes:** engineering cannot proceed without a design first
- [ ] **No:** engineering can create a first version, and design can come in later to iterate and refine

If selecting **Yes**, how much design input is needed to unblock engineering? For example, is a full, final visual design needed, or just a recommendation of which conceptual direction to go?

We just need another icon


Discussion:
Agreed, thanks @haesleinhuepf!
Thanks for noticing this and creating an issue @haesleinhuepf ! 

@isabela-pf Just FYI about this issue; it could probably be one to look at before the other remaining / existing issues that were created a while ago. Here's where I had made initial mockups of the error messages:
https://www.figma.com/file/Aq1PhG2tVTodGZnSBe0nui/Error-handling?node-id=69%3A3
I like the idea of changing both the color and the shape (a11y as I'm sure you are aware!). Off the top of my head I think the octagon makes sense, too, but feel free to look into other shapes if you think ther might be a better fit.
@haesleinhuepf and @liaprins-czi I think you are both correct! Octagon for errors and triangle for warnings sounds like a solid pattern to follow. Here’s mockups based on the errors @haesleinhuepf originally posted.

<img width="459" alt="napari viewer error with a red octagon icon." src="https://user-images.githubusercontent.com/50221806/144524124-00540d1a-2448-4b1c-8e48-38b25d368cf7.png">
<img width="445" alt="napari viewer warning with a yellow triangle icon." src="https://user-images.githubusercontent.com/50221806/144524125-6588017f-1629-4840-a15c-70e6e6e24ce3.png">

And here they are as stand-alone icons. The colors are particularly up for critique since (as far as I know) there’s no napari viewer color palette to refer to. Right now the red of the error is `#D85E38` from the napari hub theming, and the yellow of the warning is an original color (`#E3B617`) to match. I’m not sure if these are colors we want in the napari viewer, though, since we’ve also had other proposed shades of red on other issues.

![Red octagon icon with an x.](https://user-images.githubusercontent.com/50221806/144524210-dc4a0128-bfaf-4548-9949-c0830fbbf0bd.png)
![Yellow triangle icon with an exclamation mark.](https://user-images.githubusercontent.com/50221806/144524213-4c2e5717-fe05-4751-9bc2-628f24946434.png)

It sounds to me like this is only a matter of icon replacement, but I’m not too familiar with various errors in napari. If there are any other types of warnings/errors where the level of concern isn't clear, let me know and I can work on them too.

If/when designs seem okay, let me know and I can make sure to export everything to match the specifications of existing napari icons.

Thoughts? Concerns? Exclamations? Feedback is welcome!
This all looks great to me! Thank you! One thing I'm noticing is that the image posted of just the octagon icon looks like a more pink color, which looks nice, but I think sticking with the more orange-red that the hub uses for errors would be good in that it can help to keep the viewer and hub a little more visually cohesive and make it easier to keep track of colors in general (like you have in the full error message mockup), if others agree? Curious what others think!
Thanks @isabela-pf for working on this. I love the new icon. I have no opinion regarding colors though - as long as the icons are not grey or green. ;-)
Have a great weekend everyone!
Awesome work everyone :), I think this is up for grabs then :) 
@liaprins-czi you are correct! I accidentally posted two different sets of colors. Thanks for catching that. Just so this issue is accurate, here's the colors I intended/that are shown in the above dialog images:
- Error is `#D85E38`
- Warning is an `#E3B617`

(for real this time 🙃 )

![Red octagon with an x.](https://user-images.githubusercontent.com/50221806/144939104-c3babe0c-1efa-49f7-af65-c9fef023c071.png)
![Yellow triangle with an exclamation point.](https://user-images.githubusercontent.com/50221806/144939105-9b748ae5-11e2-467d-b718-8fa0700a2930.png)

I think I've found where the source warning icon is before it gets pulled into Qt (`napari/resources/icons`, correct me if I'm wrong), but I haven't found the icon used for errors yet. Since it looks so different from the other icons in napari and doesn't look like Font Awesome, is there a chance we don't have a napari-specific error icon yet and have been using the OS ones?



I think we are using these icons, which is just normal text it seems.

https://github.com/napari/napari/blob/5f96d5d814aad697c367bdadbb1a57750e2114ad/napari/utils/notifications.py#L33
Should we change form text to actual images @tlambert03 ?, this would be much easier when using supertqt font handling :) 
yep, that is, they're _not_ using icons, they're just text.
sure might as well just use SVGs for now, keep it consistent with the rest of napari.  if/when we eventually use font icons we can change them all at once

Resolving patch:
diff --git a/napari/_qt/dialogs/qt_notification.py b/napari/_qt/dialogs/qt_notification.py
--- a/napari/_qt/dialogs/qt_notification.py
+++ b/napari/_qt/dialogs/qt_notification.py
@@ -27,6 +27,7 @@
 
 from ...utils.notifications import Notification, NotificationSeverity
 from ...utils.translations import trans
+from ..qt_resources import QColoredSVGIcon
 
 ActionSequence = Sequence[Tuple[str, Callable[[], None]]]
 
@@ -91,7 +92,7 @@ def __init__(
         self.setup_buttons(actions)
         self.setMouseTracking(True)
 
-        self.severity_icon.setText(NotificationSeverity(severity).as_icon())
+        self._update_icon(str(severity))
         self.message.setText(message)
         if source:
             self.source_label.setText(
@@ -108,6 +109,28 @@ def __init__(
         self.geom_anim = QPropertyAnimation(self, b"geometry", self)
         self.move_to_bottom_right()
 
+    def _update_icon(self, severity: str):
+        """Update the icon to match the severity level."""
+        from ...settings import get_settings
+        from ...utils.theme import get_theme
+
+        settings = get_settings()
+        theme = settings.appearance.theme
+        default_color = getattr(get_theme(theme, False), 'icon')
+
+        # FIXME: Should these be defined at the theme level?
+        # Currently there is a warning one
+        colors = {
+            'error': "#D85E38",
+            'warning': "#E3B617",
+            'info': default_color,
+            'debug': default_color,
+            'none': default_color,
+        }
+        color = colors.get(severity, default_color)
+        icon = QColoredSVGIcon.from_resources(severity)
+        self.severity_icon.setPixmap(icon.colored(color=color).pixmap(15, 15))
+
     def move_to_bottom_right(self, offset=(8, 8)):
         """Position widget at the bottom right edge of the parent."""
         if not self.parent():
diff --git a/napari/_qt/qt_event_loop.py b/napari/_qt/qt_event_loop.py
--- a/napari/_qt/qt_event_loop.py
+++ b/napari/_qt/qt_event_loop.py
@@ -137,6 +137,7 @@ def get_app(
         # Note: this MUST be set before the QApplication is instantiated
         if PYQT5:
             QApplication.setAttribute(Qt.AA_EnableHighDpiScaling)
+            QApplication.setAttribute(Qt.AA_UseHighDpiPixmaps)
 
         if perf_config and perf_config.trace_qt_events:
             from .perf.qt_event_tracing import QApplicationWithTracing


Test patch: