From 0d88ec7dfab46c4eb02669ee8d69a921e6cac569 Mon Sep 17 00:00:00 2001
From: Aleksandr Shumilov <alexander.shumilov@toptal.com>
Date: Wed, 18 Sep 2024 11:35:01 +0100
Subject: [PATCH] [FX-5863] Fix avatar icon (#4561)

---
 .changeset/two-timers-compare.md              | 12 ++++
 .../Avatar/AvatarWrapper/AvatarWrapper.tsx    |  9 +--
 .../Avatar/src/Avatar/AvatarWrapper/styles.ts |  6 +-
 .../base/Icons/src/Icon/LogoNoTrademark.tsx   | 65 +++++++++++++++++++
 packages/base/Icons/src/Icon/index.ts         |  1 +
 .../Icons/src/Icon/svg/logoNoTrademark.svg    |  1 +
 6 files changed, 85 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/two-timers-compare.md
 create mode 100644 packages/base/Icons/src/Icon/LogoNoTrademark.tsx
 create mode 100644 packages/base/Icons/src/Icon/svg/logoNoTrademark.svg

diff --git a/.changeset/two-timers-compare.md b/.changeset/two-timers-compare.md
new file mode 100644
index 0000000000..4a0f109f37
--- /dev/null
+++ b/.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
diff --git a/packages/base/Avatar/src/Avatar/AvatarWrapper/AvatarWrapper.tsx b/packages/base/Avatar/src/Avatar/AvatarWrapper/AvatarWrapper.tsx
index 1c5bf68042..b8f6a6db9a 100644
--- a/packages/base/Avatar/src/Avatar/AvatarWrapper/AvatarWrapper.tsx
+++ b/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]}
     />
diff --git a/packages/base/Avatar/src/Avatar/AvatarWrapper/styles.ts b/packages/base/Avatar/src/Avatar/AvatarWrapper/styles.ts
index 18820eec05..15e71447eb 100644
--- a/packages/base/Avatar/src/Avatar/AvatarWrapper/styles.ts
+++ b/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]',
   },
 }
diff --git a/packages/base/Icons/src/Icon/LogoNoTrademark.tsx b/packages/base/Icons/src/Icon/LogoNoTrademark.tsx
new file mode 100644
index 0000000000..83133e0187
--- /dev/null
+++ b/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
diff --git a/packages/base/Icons/src/Icon/index.ts b/packages/base/Icons/src/Icon/index.ts
index 0a508dce32..b456dd40f5 100644
--- a/packages/base/Icons/src/Icon/index.ts
+++ b/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'
diff --git a/packages/base/Icons/src/Icon/svg/logoNoTrademark.svg b/packages/base/Icons/src/Icon/svg/logoNoTrademark.svg
new file mode 100644
index 0000000000..2b09eb5772
--- /dev/null
+++ b/packages/base/Icons/src/Icon/svg/logoNoTrademark.svg
@@ -0,0 +1 @@
+<svg width="9" height="13" fill="none" xmlns="http://www.w3.org/2000/svg"><path 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" fill="#204ECF" fill-rule="evenodd"/></svg>
\ No newline at end of file