recolor icons via css, fixes #2629

Closes #2629

Merge request studip/studip!1780

lib/classes/ResponsiveHelper.php

@@ -230,14 +230,12 @@ class ResponsiveHelper
             }
 
             $avatar = $avatarClass::getAvatar($course->id);
-            if ($avatar->is_customized()) {
-                $icon = $avatar->getURL(Avatar::SMALL);
-            } else {
-                $icon = $standardIcon;
-            }
+            $hasAvatar = $avatar->is_customized();
+            $icon = $hasAvatar ? $avatar->getURL(Avatar::SMALL) : $standardIcon;
 
             $cnav = [
                 'icon'     => $icon,
+                'avatar'   => $hasAvatar,
                 'title'    => $course->getFullname(),
                 'url'      => URLHelper::getURL($url, ['cid' => $course->id]),
                 'parent'   => 'browse/my_courses',

resources/assets/stylesheets/scss/responsive.scss

@@ -242,8 +242,11 @@ $sidebarOut: -330px;
 
         img,
         svg {
-            vertical-align: text-bottom;
+            &:not(.avatar) {
+                filter: contrast(0) brightness(2);
+            }
             margin-right: 10px;
+            vertical-align: text-bottom;
         }
 
     }

resources/vue/components/responsive/NavigationItem.vue

@@ -10,7 +10,7 @@
                 >
                     <span class="navigation-icon">
                         <studip-icon v-if="isCourse" shape="seminar" role="info_alt" :size="24" alt=""></studip-icon>
-                        <img v-if="item.icon" :src="iconUrl" width="24" alt="" />
+                        <img v-if="item.icon" :src="iconUrl" width="24" alt="" :class="{avatar: item.avatar}"/>
                     </span>
                     <span class="navigation-text">
                         {{ item.title }}
@@ -36,7 +36,7 @@
                 :aria-label="navigateToText(item.title)"
             >
                 <studip-icon v-if="isCourse" shape="seminar" role="info_alt" :size="24" alt=""></studip-icon>
-                <img v-if="item.icon" :src="iconUrl" width="24" alt="" />
+                <img v-if="item.icon" :src="iconUrl" width="24" alt="" :class="{avatar: item.avatar}"/>
                 {{ item.title }}
             </a>
         </div>