Update theme to reflect the new logo and brand color changes (#13629)

* update theme

* fix alert box has no spacing

* fix couple issues with new theme

* improve contrast and make sure to use correct theme color

* fix notification colour

* fix wrong logo used

* fix theme color

* fix update title not readable

3 files changed, 16 insertions, 8 deletions

diff --git a/plugins/Annotations/javascripts/annotations.js b/plugins/Annotations/javascripts/annotations.js
index 0556b6027f..988690e9ea 100644
--- a/plugins/Annotations/javascripts/annotations.js
+++ b/plugins/Annotations/javascripts/annotations.js
@@ -459,7 +459,7 @@
                 date = date.split(',')[0];
             }
 
-            $('.evolution-annotations>span', domElem).each(function () {
+            $('.evolution-annotations>span[data-date]', domElem).each(function () {
                 if ($(this).attr('data-date') == date) {
                     // get counts from attributes (and convert them to ints)
                     var starredCount = +$(this).attr('data-starred'),
@@ -467,12 +467,11 @@
 
                     // modify the starred count & make sure the correct image is used
                     var newStarCount = starredCount + starAmt;
+                    var newAnno = 'icon-annotation';
                     if (newStarCount > 0) {
-                        var newImg = 'plugins/Morpheus/images/annotations_starred.png';
-                    } else {
-                        var newImg = 'plugins/Morpheus/images/annotations.png';
+                        newAnno += ' starred';
                     }
-                    $(this).attr('data-starred', newStarCount).find('img').attr('src', newImg);
+                    $(this).attr('data-starred', newStarCount).find('span').attr('class', newAnno);
 
                     // modify the annotation count & hide/show based on new count
                     var newCount = annotationCount + amt;
@@ -575,12 +574,12 @@
 
         // if no graph available, hide all icons
         if (!canvases || canvases.length == 0) {
-            $('span', annotations).hide();
+            $('span[data-date]', annotations).hide();
             return true;
         }
 
         // set position of each individual icon
-        $('span', annotations).each(function (i) {
+        $('span[data-date]', annotations).each(function (i) {
             var canvas = $(canvases[i]),
                 canvasCenterX = canvas.position().left + (canvas.width() / 2);
             $(this).css({
diff --git a/plugins/Annotations/stylesheets/annotations.less b/plugins/Annotations/stylesheets/annotations.less
index 6270ebbe05..74ede38ba3 100644
--- a/plugins/Annotations/stylesheets/annotations.less
+++ b/plugins/Annotations/stylesheets/annotations.less
@@ -3,6 +3,15 @@
     height: 18px;
     width: 100%;
     cursor: pointer;
+
+    .icon-annotation {
+        font-size: 16px;
+        color: #666666;
+    }
+
+    .icon-annotation.starred {
+        color: @theme-color-brand;
+    }
 }
 
 .evolution-annotations > span {
diff --git a/plugins/Annotations/templates/getEvolutionIcons.twig b/plugins/Annotations/templates/getEvolutionIcons.twig
index e024f3bef5..f4a26700c4 100644
--- a/plugins/Annotations/templates/getEvolutionIcons.twig
+++ b/plugins/Annotations/templates/getEvolutionIcons.twig
@@ -8,7 +8,7 @@
                   (counts.note|e('html_attr')))|raw }}
 {{ 'Annotations_ClickToEditOrAdd'|translate }}"
               {% else %}}title="{{ 'Annotations_ViewAndAddAnnotations'|translate(date) }}"{% endif %}>
-            <img src="plugins/Morpheus/images/{% if counts.starred > 0 %}annotations_starred.png{% else %}annotations.png{% endif %}" width="16" height="16"/>
+            <span class="icon-annotation {% if counts.starred > 0 %}starred{% endif %}"/>
         </span>
     {% endfor %}
 </div>