add opacity change on hovered clickable avatar

stylesheets/_avatar.scss

@@ -123,3 +123,10 @@
     bottom: 0px;
   }
 }
+
+.module-avatar-clickable {
+  transition: $session-transition-duration;
+  &:hover {
+    opacity: $session-subtle-factor;
+  }
+}

stylesheets/_session_constants.scss

@@ -153,8 +153,10 @@ $session-font-h4: 16px;
   color: subtle($color);
 }
 
+$session-subtle-factor: 0.6;
+
 @function subtle($color) {
-  @return rgba($color, 0.6);
+  @return rgba($color, $session-subtle-factor);
 }
 
 // //////////////////////////////////////////////

ts/components/Avatar.tsx

@@ -106,13 +106,15 @@ export class Avatar extends React.PureComponent<Props, State> {
     ) {
       throw new Error(`Size ${size} is not supported!`);
     }
+    const isClickable = !!this.props.onAvatarClick;
 
     return (
       <div
         className={classNames(
           'module-avatar',
           `module-avatar--${size}`,
-          hasImage ? 'module-avatar--with-image' : 'module-avatar--no-image'
+          hasImage ? 'module-avatar--with-image' : 'module-avatar--no-image',
+          isClickable && 'module-avatar-clickable'
         )}
         onClick={e => {
           this.onAvatarClickBound(e);