[MM-42139] Background colour for +X profile pic is not themed corre…

…ctly (#11) * move Avatar to styled-components; fix theming; use size numbers * slight margin adjustment for avatars (still too wide when full, though) * Fix spacing * remove the border around the avatar when in full screen (theming issue) Co-authored-by: Claudio Costa <[email protected]>
mattermost · Mar 2, 2022 · 83a7ebe · 83a7ebe
1 parent 1b4aee4
commit 83a7ebe
Show file tree

Hide file tree

Showing 11 changed files with 338 additions and 3,361 deletions.
diff --git a/webapp/.eslintrc.json b/webapp/.eslintrc.json
@@ -133,7 +133,7 @@
     "global-require": 2,
     "guard-for-in": 2,
     "id-blacklist": 0,
-    "import/no-unresolved": 2,
+    "import/no-unresolved": 0, // ts handles this better
     "import/order": [
       "error",
       {

diff --git a/webapp/package-lock.json b/webapp/package-lock.json
diff --git a/webapp/package.json b/webapp/package.json
@@ -27,14 +27,15 @@
     "@types/react-bootstrap": "0.32.26",
     "@types/react-dom": "16.9.8",
     "@types/react-intl": "3.0.0",
-    "@types/react-redux": "7.1.16",
+    "@types/react-redux": "7.1.21",
     "@types/simple-peer": "9.11.3",
+    "@types/styled-components": "5.1.23",
     "@typescript-eslint/eslint-plugin": "4.33.0",
     "@typescript-eslint/parser": "4.33.0",
     "babel-eslint": "10.1.0",
     "babel-loader": "8.2.2",
     "babel-plugin-formatjs": "10.3.7",
-    "babel-plugin-styled-components": "1.13.2",
+    "babel-plugin-styled-components": "2.0.6",
     "babel-plugin-typescript-to-proptypes": "1.4.2",
     "css-loader": "5.2.6",
     "eslint": "7.31.0",
@@ -66,6 +67,7 @@
     "redux": "4.1.0",
     "semver-parser": "4.0.0",
     "simple-peer": "9.11.0",
+    "styled-components": "5.3.3",
     "typescript": "4.4.3"
   },
   "jest": {

diff --git a/webapp/src/components/avatar/avatar.scss b/webapp/src/components/avatar/avatar.scss
diff --git a/webapp/src/components/avatar/avatar.tsx b/webapp/src/components/avatar/avatar.tsx
@@ -2,63 +2,122 @@
 // See LICENSE.txt for license information.
 
 import React, {memo, HTMLAttributes} from 'react';
-import classNames from 'classnames';
+import styled, {css} from 'styled-components';
 
-import CompassIcon from '../../components/icons/compassIcon';
-
-import './avatar.scss';
-
-export type TAvatarSizeToken = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+import CompassIcon from 'src/components/icons/compassIcon';
 
 type Props = {
+    size?: number;
+    fontSize?: number;
     url?: string;
     username?: string;
-    size?: TAvatarSizeToken;
     text?: string;
     icon?: string;
+    border?: boolean;
 };
 
 type Attrs = HTMLAttributes<HTMLElement>;
 
+// Avatar's old size name: size (in px), font-size (in px)
+// xxs: 16, 8; xs: 20, 9.5; sm: 24, 10; md: 32, 12; lg: 36, 14; xl: 50, 18; xxl: 128, 44
 const Avatar = ({
+    size = 32,
+    fontSize = 12,
     url,
     username,
-    size = 'md',
     text,
     icon,
+    border = true,
     ...attrs
 }: Props & Attrs) => {
-    const classes = classNames(`Avatar Avatar-${size}`, attrs.className);
-
     if (text) {
         return (
-            <div
+            <ProfilePlain
                 {...attrs}
-                className={classes + ' Avatar-plain'}
                 data-content={text}
+                size={size}
+                fontSize={fontSize}
+                border={border}
             />
         );
     }
 
     if (icon) {
         return (
-
-            <div
+            <ProfilePlain
                 {...attrs}
-                className={classes + ' Avatar-plain'}
+                size={size}
+                fontSize={fontSize}
+                border={border}
             >
                 <CompassIcon icon={icon}/>
-            </div>
+            </ProfilePlain>
         );
     }
 
     return (
-        <img
+        <Img
             {...attrs}
-            className={classes}
             alt={`${username || 'user'} profile image`}
             src={url}
+            size={size}
+            fontSize={fontSize}
+            border={border}
         />
     );
 };
+
+interface ProfileProps {
+    size: number;
+    fontSize: number;
+    border?: boolean;
+}
+
+const Profile = styled.div<ProfileProps>`
+    &,
+    &:focus,
+    &.a11y--focused {
+        border-radius: 50%;
+    }
+
+    -webkit-user-select: none; /* Chrome all / Safari all */
+    -moz-user-select: none; /* Firefox all */
+    -ms-user-select: none; /* IE 10+ */
+    user-select: none;
+    vertical-align: sub;
+    background: var(--center-channel-bg);
+
+    ${(props) => (props.border && css`
+        border: 1px solid var(--center-channel-bg);
+    `)}
+
+    width: ${(props) => (props.size)}px;
+    min-width: ${(props) => (props.size)}px;
+    height: ${(props) => (props.size)}px;
+    font-size: ${(props) => (props.fontSize)}px;
+`;
+
+const ProfilePlain = styled(Profile)`
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 600;
+
+    &::before {
+        position: absolute;
+        display: inline-flex;
+        width: 100%;
+        height: 100%;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+        background: rgba(var(--center-channel-color-rgb), 0.08);
+        color: rgba(var(--center-channel-color-rgb), 0.72);
+        content: attr(data-content);
+    }
+`;
+
+const Img = Profile.withComponent('img');
+
 export default memo(Avatar);
diff --git a/webapp/src/components/call_widget/component.tsx b/webapp/src/components/call_widget/component.tsx
@@ -1,24 +1,19 @@
 import React, {CSSProperties} from 'react';
-import {Dispatch} from 'redux';
-import {GenericAction} from 'mattermost-redux/types/actions';
-
 import {OverlayTrigger, Tooltip} from 'react-bootstrap';
-
 import moment from 'moment-timezone';
 import {compareSemVer} from 'semver-parser';
 
 import {UserProfile} from 'mattermost-redux/types/users';
 import {Channel} from 'mattermost-redux/types/channels';
 import {Team} from 'mattermost-redux/types/teams';
 import {IDMappedObjects} from 'mattermost-redux/types/utilities';
-
 import {changeOpacity} from 'mattermost-redux/utils/theme_utils';
 
-import {UserState} from '../../types/types';
+import {UserState} from 'src/types/types';
+import {getUserDisplayName, isPublicChannel, isPrivateChannel, isDMChannel, isGMChannel} from 'src/utils';
 
 import Avatar from '../avatar/avatar';
 import {id as pluginID} from '../../manifest';
-
 import MutedIcon from '../../components/icons/muted_icon';
 import UnmutedIcon from '../../components/icons/unmuted_icon';
 import LeaveCallIcon from '../../components/icons/leave_call_icon';
@@ -32,8 +27,6 @@ import ExpandIcon from '../../components/icons/expand';
 import RaisedHandIcon from '../../components/icons/raised_hand';
 import UnraisedHandIcon from '../../components/icons/unraised_hand';
 
-import {handleFormattedTextClick} from '../../browser_routing';
-import {getUserDisplayName, isPublicChannel, isPrivateChannel, isDMChannel, isGMChannel} from '../../utils';
 import './component.scss';
 
 interface Props {
@@ -624,7 +617,8 @@ export default class CallWidget extends React.PureComponent<Props, State> {
                         style={{display: 'flex', padding: '1px 16px'}}
                     >
                         <Avatar
-                            size='sm'
+                            size={24}
+                            fontSize={10}
                             url={this.props.picturesMap[profile.id]}
                             style={{marginRight: '8px'}}
                         />
@@ -844,15 +838,17 @@ export default class CallWidget extends React.PureComponent<Props, State> {
 
                     speakingPictureURL &&
                     <Avatar
-                        size='sm'
+                        size={24}
+                        fontSize={10}
                         url={speakingPictureURL}
                     />
                 }
 
                 {
                     !speakingPictureURL &&
                     <Avatar
-                        size='sm'
+                        size={24}
+                        fontSize={10}
                         icon='account-outline'
                         style={{
                             background: changeOpacity(this.props.theme.centerChannelColor, 0.16),
@@ -904,7 +900,8 @@ export default class CallWidget extends React.PureComponent<Props, State> {
                     key={profile.id}
                 >
                     <Avatar
-                        size='xxs'
+                        size={16}
+                        fontSize={8}
                         url={picture}
                         style={{margin: '0 8px'}}
                     />

diff --git a/webapp/src/components/channel_call_toast/component.tsx b/webapp/src/components/channel_call_toast/component.tsx
@@ -1,12 +1,8 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
+import moment from 'moment-timezone';
 
-import {Channel} from 'mattermost-redux/types/channels';
 import {UserProfile} from 'mattermost-redux/types/users';
 
-import moment from 'moment-timezone';
-
 import ActiveCallIcon from '../../components/icons/active_call_icon';
 import ConnectedProfiles from '../../components/connected_profiles';
 
@@ -64,6 +60,7 @@ export default class ChannelCallToast extends React.PureComponent<Props, State>
         if (!this.props.hasCall || this.state.hidden) {
             return null;
         }
+
         return (
             <div
                 id='calls-channel-toast'
@@ -83,7 +80,6 @@ export default class ChannelCallToast extends React.PureComponent<Props, State>
                         <span style={{opacity: '0.80', margin: '0 4px'}}>{`Started ${moment(this.props.startAt).fromNow()}`}</span>
                         <div/>
                     </div>
-
                 </div>
 
                 <div
@@ -99,10 +95,10 @@ export default class ChannelCallToast extends React.PureComponent<Props, State>
                     <ConnectedProfiles
                         profiles={this.props.profiles}
                         pictures={this.props.pictures}
-                        size='sm'
+                        size={24}
+                        fontSize={10}
                         maxShowedProfiles={2}
                     />
-
                 </div>
 
                 <div
@@ -121,7 +117,6 @@ export default class ChannelCallToast extends React.PureComponent<Props, State>
                                 fillRule='nonzero'
                                 d='M18 7.209L16.791 6 12 10.791 7.209 6 6 7.209 10.791 12 6 16.791 7.209 18 12 13.209 16.791 18 18 16.791 13.209 12z'
                             />
-
                         </svg>
                     </span>
                 </div>