[FX-5863] Fix avatar icon (#4561)

.changeset/two-timers-compare.md

@@ -0,0 +1,12 @@
+---
+'@toptal/picasso-icons': minor
+'@toptal/picasso-avatar': patch
+---
+
+### Icons
+
+- add `LogoNoTrademark` icon
+
+### Avatar
+
+- fix icon sizes to match Base design

packages/base/Avatar/src/Avatar/AvatarWrapper/AvatarWrapper.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react'
 import React from 'react'
 import type { BaseProps, SizeType } from '@toptal/picasso-shared'
 import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge'
-import { Logo } from '@toptal/picasso-logo'
+import { LogoNoTrademark } from '@toptal/picasso-icons'
 
 import { avatarLogoClassesBySize, classBySize, clipClassBySize } from './styles'
 
@@ -33,11 +33,8 @@ const AvatarLogo = ({ size }: Pick<Props, 'size'>) => (
     role='img'
     aria-label='photo placeholder'
   >
-    <Logo
-      emblem
-      variant='blue'
-      // Necessary to decrease the default minWeight and minHeight so that the new width and height could apply
-      // eslint-disable-next-line no-inline-styles/no-inline-styles
+    <LogoNoTrademark
+      color='blue'
       style={{ minWidth: '1px', minHeight: '1px' }}
       className={avatarLogoClassesBySize.logo[size]}
     />

packages/base/Avatar/src/Avatar/AvatarWrapper/styles.ts

@@ -26,14 +26,14 @@ export const avatarLogoClassesBySize: Record<string, Record<Size, string>> = {
     xxsmall: '',
     xsmall: '',
     small: 'pl-[1px] pb-[1px]',
-    medium: 'pl-[2px] pb-[2px]',
+    medium: 'pl-[1.5px] pb-[1.5px]',
     large: 'pl-[3px] pb-[3px]',
   },
   logo: {
     xxsmall: '',
     xsmall: '',
     small: 'w-[5.7px] h-[8px]',
-    medium: 'w-[8.54px] h-[12px]',
-    large: 'w-[7.12px] h-[10px]',
+    medium: 'w-[9px] h-[14px]',
+    large: 'w-[7.5px] h-[11px]',
   },
 }

packages/base/Icons/src/Icon/LogoNoTrademark.tsx

@@ -0,0 +1,65 @@
+import type { Ref } from 'react'
+import React, { forwardRef } from 'react'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+import type { StandardProps } from '@toptal/picasso-shared'
+import { kebabToCamelCase } from '@toptal/picasso-utils'
+
+import styles from './styles'
+const BASE_SIZE = 16
+
+type ScaleType = 1 | 2 | 3 | 4
+export interface Props extends StandardProps {
+  scale?: ScaleType
+  color?: string
+  base?: number
+}
+const useStyles = makeStyles(styles, {
+  name: 'PicassoSvgLogoNoTrademark',
+})
+const SvgLogoNoTrademark = forwardRef(function SvgLogoNoTrademark(
+  props: Props,
+  ref: Ref<SVGSVGElement>
+) {
+  const {
+    className,
+    style = {},
+    color,
+    scale,
+    base,
+    'data-testid': testId,
+  } = props
+  const classes: Record<string, string> = useStyles(props)
+  const classNames = [classes.root, className]
+  const scaledSize = base || BASE_SIZE * Math.ceil(scale || 1)
+  const colorClassName = kebabToCamelCase(`${color}`)
+
+  if (classes[colorClassName]) {
+    classNames.push(classes[colorClassName])
+  }
+
+  const svgStyle = {
+    minWidth: `${scaledSize}px`,
+    minHeight: `${scaledSize}px`,
+    ...style,
+  }
+
+  return (
+    <svg
+      fill='none'
+      viewBox='0 0 9 13'
+      className={cx(...classNames)}
+      style={svgStyle}
+      ref={ref}
+      data-testid={testId}
+    >
+      <path
+        fillRule='evenodd'
+        d='m3.125 1.2-.603.596.884.883.883.884-1.942 1.919A235.688 235.688 0 0 0 .408 7.409c.003.005 1.178 1.175 2.613 2.601l2.608 2.593.137-.133.598-.59.461-.457-.891-.893-.891-.893 1.95-1.927 1.951-1.927-1.836-1.827C6.099 2.952 4.925 1.786 4.5 1.367L3.728.604l-.603.596m2.359 3.697c.062.026.835.776.887.861.04.065.042.127.007.192-.014.026-.552.568-1.195 1.204-.839.829-1.183 1.16-1.22 1.172-.115.038-.127.03-.578-.419a8.41 8.41 0 0 1-.439-.455.23.23 0 0 1 0-.189c.012-.022.547-.562 1.191-1.198C5.41 4.804 5.362 4.846 5.484 4.897'
+      />
+    </svg>
+  )
+})
+
+SvgLogoNoTrademark.displayName = 'SvgLogoNoTrademark'
+export default SvgLogoNoTrademark

packages/base/Icons/src/Icon/index.ts

@@ -220,6 +220,7 @@ export { default as Lock16 } from './Lock16'
 export { default as Lock24 } from './Lock24'
 export { default as Logo } from './Logo'
 export { default as LogoEmblem } from './LogoEmblem'
+export { default as LogoNoTrademark } from './LogoNoTrademark'
 export { default as Message16 } from './Message16'
 export { default as Message24 } from './Message24'
 export { default as MicrophoneOff16 } from './MicrophoneOff16'