refactor(avatar) use jss instead of scss (#11037)

css/_avatar.scss

@@ -1,50 +0,0 @@
-.avatar {
-    background-color: #AAA;
-    border-radius: 50%;
-    color: rgba(255, 255, 255, 1);
-    font-weight: 100;
-    object-fit: cover;
-
-    &.avatar-small {
-        height: 28px !important;
-        width: 28px !important;
-    }
-
-    &.avatar-xsmall {
-        height: 16px !important;
-        width: 16px !important;
-    }
-
-    .jitsi-icon {
-        transform: translateY(50%);
-    }
-}
-
-.avatar-svg {
-    height: 100%;
-    width: 100%;
-}
-
-.avatar-badge {
-    position: relative;
-
-    &-available::after {
-        @include avatarBadge;
-        background-color: $presence-available;
-    }
-
-    &-away::after {
-        @include avatarBadge;
-        background-color: $presence-away;
-    }
-
-    &-busy::after {
-        @include avatarBadge;
-        background-color: $presence-busy;
-    }
-
-    &-idle::after {
-        @include avatarBadge;
-        background-color: $presence-idle;
-    }
-}

css/_mixins.scss

@@ -193,16 +193,3 @@
 @mixin transparentBg($color, $alpha) {
     background-color: rgba(red($color), green($color), blue($color), $alpha);
 }
-
-/**
- * Avatar status badge mixin
- */
-@mixin avatarBadge {
-    border-radius: 50%;
-    content: '';
-    display: block;
-    height: 35%;
-    position: absolute;
-    bottom: 0;
-    width: 35%;
-}

css/_variables.scss

@@ -28,10 +28,6 @@ $defaultSemiDarkColor: #ACACAC;
 $defaultDarkColor: #2b3d5c;
 $defaultWarningColor: rgb(215, 121, 118);
 $participantsPaneBgColor: #141414;
-$presence-available: rgb(110, 176, 5);
-$presence-away: rgb(250, 201, 20);
-$presence-busy: rgb(233, 0, 27);
-$presence-idle: rgb(172, 172, 172);
 
 /**
  * Toolbar

css/main.scss

@@ -82,7 +82,6 @@ $flagsImagePath: "../images/";
 @import 'navigate_section_list';
 @import 'third-party-branding/google';
 @import 'third-party-branding/microsoft';
-@import 'avatar';
 @import 'promotional-footer';
 @import 'chrome-extension-banner';
 @import 'settings-button';

react/features/base/avatar/components/native/styles.js

@@ -3,6 +3,7 @@
 import { StyleSheet } from 'react-native';
 
 import { ColorPalette } from '../../../styles';
+import { PRESENCE_AVAILABLE_COLOR, PRESENCE_AWAY_COLOR, PRESENCE_BUSY_COLOR, PRESENCE_IDLE_COLOR } from '../styles';
 
 const DEFAULT_SIZE = 65;
 
@@ -34,16 +35,16 @@ export default {
 
         switch (status) {
         case 'available':
-            color = 'rgb(110, 176, 5)';
+            color = PRESENCE_AVAILABLE_COLOR;
             break;
         case 'away':
-            color = 'rgb(250, 201, 20)';
+            color = PRESENCE_AWAY_COLOR;
             break;
         case 'busy':
-            color = 'rgb(233, 0, 27)';
+            color = PRESENCE_BUSY_COLOR;
             break;
         case 'idle':
-            color = 'rgb(172, 172, 172)';
+            color = PRESENCE_IDLE_COLOR;
             break;
         }
 

react/features/base/avatar/components/styles.js

@@ -0,0 +1,5 @@
+// Colors for avatar status badge
+export const PRESENCE_AVAILABLE_COLOR = 'rgb(110, 176, 5)';
+export const PRESENCE_AWAY_COLOR = 'rgb(250, 201, 20)';
+export const PRESENCE_BUSY_COLOR = 'rgb(233, 0, 27)';
+export const PRESENCE_IDLE_COLOR = 'rgb(172, 172, 172)';

react/features/base/avatar/components/web/StatelessAvatar.js

@@ -1,12 +1,20 @@
 // @flow
 
+import { withStyles } from '@material-ui/core/styles';
+import clsx from 'clsx';
 import React from 'react';
 
 import { Icon } from '../../../icons';
 import AbstractStatelessAvatar, { type Props as AbstractProps } from '../AbstractStatelessAvatar';
+import { PRESENCE_AVAILABLE_COLOR, PRESENCE_AWAY_COLOR, PRESENCE_BUSY_COLOR, PRESENCE_IDLE_COLOR } from '../styles';
 
 type Props = AbstractProps & {
 
+    /**
+     * An object containing the CSS classes.
+     */
+    classes: Object,
+
     /**
      * External class name passed through props.
      */
@@ -38,11 +46,77 @@ type Props = AbstractProps & {
     useCORS?: ?boolean
 };
 
+/**
+ * Creates the styles for the component.
+ *
+ * @returns {Object}
+ */
+const styles = () => {
+    return {
+        avatar: {
+            backgroundColor: '#AAA',
+            borderRadius: '50%',
+            color: 'rgba(255, 255, 255, 1)',
+            fontWeight: '100',
+            objectFit: 'cover',
+
+            '&.avatar-small': {
+                height: '28px !important',
+                width: '28px !important'
+            },
+
+            '&.avatar-xsmall': {
+                height: '16px !important',
+                width: '16px !important'
+            },
+
+            '& .jitsi-icon': {
+                transform: 'translateY(50%)'
+            },
+
+            '& .avatar-svg': {
+                height: '100%',
+                width: '100%'
+            }
+        },
+
+        badge: {
+            position: 'relative',
+
+            '&.avatar-badge:after': {
+                borderRadius: '50%',
+                content: '""',
+                display: 'block',
+                height: '35%',
+                position: 'absolute',
+                bottom: 0,
+                width: '35%'
+            },
+
+            '&.avatar-badge-available:after': {
+                backgroundColor: PRESENCE_AVAILABLE_COLOR
+            },
+
+            '&.avatar-badge-away:after': {
+                backgroundColor: PRESENCE_AWAY_COLOR
+            },
+
+            '&.avatar-badge-busy:after': {
+                backgroundColor: PRESENCE_BUSY_COLOR
+            },
+
+            '&.avatar-badge-idle:after': {
+                backgroundColor: PRESENCE_IDLE_COLOR
+            }
+        }
+    };
+};
+
 /**
  * Implements a stateless avatar component that renders an avatar purely from what gets passed through
  * props.
  */
-export default class StatelessAvatar extends AbstractStatelessAvatar<Props> {
+class StatelessAvatar extends AbstractStatelessAvatar<Props> {
 
     /**
      * Instantiates a new {@code Component}.
@@ -66,7 +140,7 @@ export default class StatelessAvatar extends AbstractStatelessAvatar<Props> {
         if (this._isIcon(url)) {
             return (
                 <div
-                    className = { `${this._getAvatarClassName()} ${this._getBadgeClassName()}` }
+                    className = { clsx(this._getAvatarClassName(), this._getBadgeClassName()) }
                     data-testid = { this.props.testId }
                     id = { this.props.id }
                     style = { this._getAvatarStyle(this.props.color) }>
@@ -96,7 +170,7 @@ export default class StatelessAvatar extends AbstractStatelessAvatar<Props> {
         if (initials) {
             return (
                 <div
-                    className = { `${this._getAvatarClassName()} ${this._getBadgeClassName()}` }
+                    className = { clsx(this._getAvatarClassName(), this._getBadgeClassName()) }
                     data-testid = { this.props.testId }
                     id = { this.props.id }
                     style = { this._getAvatarStyle(this.props.color) }>
@@ -157,7 +231,7 @@ export default class StatelessAvatar extends AbstractStatelessAvatar<Props> {
      * @returns {string}
      */
     _getAvatarClassName(additional) {
-        return `avatar ${additional || ''} ${this.props.className || ''}`;
+        return clsx('avatar', additional, this.props.className, this.props.classes.avatar);
     }
 
     /**
@@ -169,7 +243,7 @@ export default class StatelessAvatar extends AbstractStatelessAvatar<Props> {
         const { status } = this.props;
 
         if (status) {
-            return `avatar-badge avatar-badge-${status}`;
+            return clsx('avatar-badge', `avatar-badge-${status}`, this.props.classes.badge);
         }
 
         return '';
@@ -192,3 +266,5 @@ export default class StatelessAvatar extends AbstractStatelessAvatar<Props> {
         }
     }
 }
+
+export default withStyles(styles)(StatelessAvatar);