fix(css): improve display of category colors (Calendar & Mail)

In the list view, we now use color dots instead of stripes.

Fixes #5337

UI/WebServerResources/scss/core/structure.scss

@@ -38,7 +38,22 @@ html * {
   top: 0;
   bottom: 0;
   width: 10%;
-  z-index: -1;
+}
+.sg-category-dot {
+  display: inline-block;
+  height: .9em;
+  width: .9em;
+  margin-bottom: -1px; // border width
+  margin-right: -.3em; // 1 third overlap
+  border-radius: 50%;
+  border-width: 1px;
+  border-style: solid;
+  &:last-child {
+    margin-right: .3em;
+  }
+}
+.sg-category-dot-container {
+  display: inline-block;
 }
 
 // Group fields of a form

UI/WebServerResources/scss/views/MailerUI.scss

@@ -18,6 +18,10 @@
     content: '';
     width: $mg;
   }
+
+  .sg-category-dot {
+    border-color: rgba(255, 255, 255, .9);
+  }
 }
 
 // Container for the linear progress bar of the quota

UI/WebServerResources/scss/views/SchedulerUI.scss

@@ -407,6 +407,7 @@ $quarter_height: 10px;
     }
 
     .sg-category {
+      z-index: -1;
       &:first-child {
         border-top-right-radius: $block_radius;
         border-bottom-right-radius: $block_radius;