import React, { PureComponent } from 'react';
import theme from './theme.css';
import Box from '../box';
import Icon from '../icon';
import { IconEditSmallFilled } from '@teamleader/ui-icons';

class AvatarOverlay extends PureComponent {
  render() {
    return (
      <div {...this.props} className={theme['overlay']}>
        <Box className={theme['overlay-background']} display="flex" justifyContent="center">
          <Icon color="neutral" tint="lightest">
            <IconEditSmallFilled />
          </Icon>
        </Box>
      </div>
    );
  }
}

export default AvatarOverlay;

import React, { PureComponent } from 'react';
import theme from './theme.css';
import Box from '../box';
import Icon from '../icon';
import { IconEditSmallFilled } from '@teamleader/ui-icons';
import cx from 'classnames';

class AvatarOverlay extends PureComponent {
  render() {
    const { size } = this.props;
    const classNames = cx(
      theme['overlay-background'],
      size === 'medium' ? theme['full-height'] : theme['default-height'],
    );

    console.log(classNames);

    return (
      <div {...this.props} className={theme['overlay']}>
        <Box className={classNames} display="flex" justifyContent="center">
          <Icon color="neutral" tint="lightest">
            <IconEditSmallFilled />
          </Icon>
        </Box>
      </div>
    );
  }
}

export default AvatarOverlay;

Apply the correct css styles based on the avatar size, without breaking earlier versions
Apply the correct css styles based on the avatar size, without breaking earlier versions
