Update color of source type, add shadow to dropdown, remove trunc for page,...

Update color of source type, add shadow to dropdown, remove trunc for page, and update labels actions to activity feed

hypha/apply/activity/templates/activity/notifications.html

 {% extends "base-apply.html" %}
-{% load i18n static activity_tags apply_tags %}
+{% load i18n static activity_tags apply_tags bleach_tags markdown_tags submission_tags %}
 
 {% block content %}
 <div class="admin-bar">
@@ -15,11 +15,11 @@
         <div class="tabs js-tabs">
             <div class="tabs__container">
                 <a class="tab__item" href="#comments" data-tab="tab-1">
-                    {% trans "Comments" %}
+                    {% trans "Communications" %}
                 </a>
 
                 <a class="tab__item" href="#actions" data-tab="tab-2">
-                    {% trans "Actions" %}
+                    {% trans "Activity Feed" %}
                 </a>
             </div>
         </div>
@@ -33,11 +33,11 @@
             {% if activity.type == 'comment' %}
                 <div class="feed__item feed__item--comment">
                     <div class="feed__pre-content">
-                        <p class="feed__label feed__label--comment">{{ activity.source_content_type.name|source_type }}</p>
+                        <p class="feed__label feed__label--{{ activity.source_content_type.name|source_type|lower }}">{{ activity.source_content_type.name|source_type }}</p>
                     </div>
                     <div class="feed__content js-feed-content">
                         <div class="feed__meta js-feed-meta">
-                            <p class="feed__meta-item"><a href="{{ activity.source.get_absolute_url }}">{{ activity.source.title|capfirst|truncatechars:15 }}</a>
+                            <p class="feed__meta-item"><a href="{{ activity.source.get_absolute_url }}">{{ activity.source.title|capfirst }}</a>
                                 : {{ activity.user }} made a comment – {{ activity.timestamp|date:"SHORT_DATETIME_FORMAT" }}</p>
                         </div>
                     </div>
@@ -51,12 +51,12 @@
             {% if activity.type == 'action' %}
                 <div class="feed__item feed__item--action">
                     <div class="feed__pre-content">
-                        <p class="feed__label feed__label--action">{{ activity.source_content_type.name|source_type }}</p>
+                        <p class="feed__label feed__label--{{ activity.source_content_type.name|source_type|lower }}">{{ activity.source_content_type.name|source_type }}</p>
                     </div>
                     <div class="feed__content js-feed-content">
                         <div class="feed__meta js-feed-meta">
-                            <p class="feed__meta-item"><a href="{{ activity.source.get_absolute_url }}">{{ activity.source.title|capfirst|truncatechars:15 }}</a>
-                                    : {{ activity.message }} {% if activity.related_object %}<a href="{{ activity.related_object.get_absolute_url }}">{{ activity.related_object|model_verbose_name }}</a>{% endif %}
+                            <p class="feed__meta-item"><a href="{{ activity.source.get_absolute_url }}">{{ activity.source.title|capfirst }}</a>
+                                : {{ activity|display_for:request.user }} {% if activity.related_object %}<a href="{{ activity.related_object.get_absolute_url }}">{{ activity.related_object|model_verbose_name }}</a>{% endif %}
                                  – {{ activity.timestamp|date:"SHORT_DATETIME_FORMAT" }}</p>
                         </div>
                     </div>

hypha/static_src/src/sass/apply/components/_activity-notifications.scss

@@ -15,8 +15,7 @@
     font-size: 15px;
     background-color: $color--light-grey;
     min-width: 400px;
-    box-shadow: 1px 1px 1px 1px $color--light-mid-grey;
-    z-index: 1;
+    box-shadow: 1px 1px 6px 4px $color--light-mid-grey;
 
     p {
         color: $color--black;

hypha/static_src/src/sass/apply/components/_feed.scss

@@ -52,6 +52,14 @@
             background-color: $color--mint;
         }
 
+        &--submission {
+            background-color: $color--green;
+        }
+
+        &--project {
+            background-color: $color--mint;
+        }
+
         &--mobile {
             display: block;
             margin-right: 10px;