refactor(avatar): use jss instead of scss

jitsi · Feb 26, 2022 · ad02997 · ad02997
1 parent c8895b2
commit ad02997
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 78 deletions.
diff --git a/css/_avatar.scss b/css/_avatar.scss
diff --git a/css/_mixins.scss b/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%;
-}
diff --git a/css/_variables.scss b/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

diff --git a/css/main.scss b/css/main.scss
@@ -83,7 +83,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';

diff --git a/react/features/base/avatar/components/native/styles.js b/react/features/base/avatar/components/native/styles.js
@@ -2,6 +2,7 @@
 
 import { StyleSheet } from 'react-native';
 
+import BaseTheme from '../../../../base/ui/components/BaseTheme.native';
 import { ColorPalette } from '../../../styles';
 
 const DEFAULT_SIZE = 65;
@@ -34,16 +35,16 @@ export default {
 
         switch (status) {
         case 'available':
-            color = 'rgb(110, 176, 5)';
+            color = BaseTheme.palette.presenceAvailable;
             break;
         case 'away':
-            color = 'rgb(250, 201, 20)';
+            color = BaseTheme.palette.presenceAway;
             break;
         case 'busy':
-            color = 'rgb(233, 0, 27)';
+            color = BaseTheme.palette.presenceBusy;
             break;
         case 'idle':
-            color = 'rgb(172, 172, 172)';
+            color = BaseTheme.palette.presenceIdle;
             break;
         }
 

diff --git a/react/features/base/avatar/components/web/StatelessAvatar.js b/react/features/base/avatar/components/web/StatelessAvatar.js
@@ -1,12 +1,19 @@
 // @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';
 
 type Props = AbstractProps & {
 
+    /**
+     * An object containing the CSS classes.
+     */
+    classes: Object,
+
     /**
      * External class name passed through props.
      */
@@ -38,11 +45,79 @@ type Props = AbstractProps & {
     useCORS?: ?boolean
 };
 
+/**
+ * Creates the styles for the component.
+ *
+ * @param {Object} theme - The current UI theme.
+ *
+ * @returns {Object}
+ */
+const styles = theme => {
+    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%)'
+            },
+
+            '& 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: theme.palette.presenceAvailable
+            },
+
+            '&.avatar-badge-away:after': {
+                backgroundColor: theme.palette.presenceAway
+            },
+
+            '&.avatar-badge-busy:after': {
+                backgroundColor: theme.palette.presenceBusy
+            },
+
+            '&.avatar-badge-idle:after': {
+                backgroundColor: theme.palette.presenceIdle
+            }
+        }
+    };
+};
+
 /**
  * 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 +141,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 +171,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 +232,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 +244,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 +267,5 @@ export default class StatelessAvatar extends AbstractStatelessAvatar<Props> {
         }
     }
 }
+
+export default withStyles(styles)(StatelessAvatar);
diff --git a/react/features/base/ui/Tokens.js b/react/features/base/ui/Tokens.js
@@ -288,7 +288,13 @@ export const colorMap = {
     support09: 'support09',
 
     // Used for avatars and raise hand badge
-    support07: 'support07'
+    support07: 'support07',
+
+    // Colors for avatar status badge
+    presenceAvailable: 'rgb(110, 176, 5)',
+    presenceAway: 'rgb(250, 201, 20)',
+    presenceBusy: 'rgb(233, 0, 27)',
+    presenceIdle: 'rgb(172, 172, 172)'
 };