fix avatar label sizes (#2548)

Author: lidord-wix

demo/src/screens/__tests__/__snapshots__/AvatarScreen.spec.js.snap

@@ -456,7 +456,10 @@ exports[`AvatarScreen renders screen 1`] = `
                 undefined,
                 [
                   {
-                    "fontSize": 16,
+                    "fontFamily": "System",
+                    "fontSize": 14,
+                    "fontWeight": "700",
+                    "lineHeight": 20,
                   },
                   {
                     "backgroundColor": "transparent",
@@ -678,7 +681,10 @@ exports[`AvatarScreen renders screen 1`] = `
                 undefined,
                 [
                   {
-                    "fontSize": 16,
+                    "fontFamily": "System",
+                    "fontSize": 14,
+                    "fontWeight": "700",
+                    "lineHeight": 20,
                   },
                   {
                     "backgroundColor": "transparent",
@@ -2344,7 +2350,10 @@ exports[`AvatarScreen renders screen 1`] = `
                 undefined,
                 [
                   {
-                    "fontSize": 16,
+                    "fontFamily": "System",
+                    "fontSize": 14,
+                    "fontWeight": "700",
+                    "lineHeight": 20,
                   },
                   {
                     "backgroundColor": "transparent",
@@ -2567,7 +2576,10 @@ exports[`AvatarScreen renders screen 1`] = `
                 undefined,
                 [
                   {
-                    "fontSize": 16,
+                    "fontFamily": "System",
+                    "fontSize": 14,
+                    "fontWeight": "700",
+                    "lineHeight": 20,
                   },
                   {
                     "backgroundColor": "transparent",
@@ -2969,7 +2981,10 @@ exports[`AvatarScreen renders screen 1`] = `
                 undefined,
                 [
                   {
-                    "fontSize": 16,
+                    "fontFamily": "System",
+                    "fontSize": 14,
+                    "fontWeight": "700",
+                    "lineHeight": 20,
                   },
                   {
                     "backgroundColor": "transparent",

src/components/avatar/index.tsx

@@ -262,9 +262,8 @@ const Avatar = forwardRef<any, AvatarProps>((props: AvatarProps, ref: React.Forw
   }, [_baseContainerStyle, containerStyle]);
 
   const textStyle = useMemo(() => {
-    const fontSizeToImageSizeRatio = 0.32;
-    const fontSize = size * fontSizeToImageSizeRatio;
-    return [{fontSize}, initialsStyle, {color: labelColor}];
+    const typography = AvatarHelper.getInitialsTypography(size);
+    return [typography, initialsStyle, {color: labelColor}];
   }, [size, initialsStyle, labelColor]);
 
   const textContainerStyle = useMemo(() => {

src/helpers/AvatarHelper.ts

@@ -1,6 +1,33 @@
 import _ from 'lodash';
 import URL from 'url-parse';
 import Colors from '../style/colors';
+import {Typography} from 'style';
+
+export function getInitialsTypography(size: number) {
+  let typography;
+  switch (true) {
+    case size < 24:
+      typography = {fontSize: 10};
+      break;
+    case size < 34:
+      typography = Typography.text90BO;
+      break;
+    case size < 54:
+      typography = Typography.text80BO;
+      break;
+    case size < 70:
+      typography = Typography.text60BO;
+      break;
+    case size < 100:
+      typography = Typography.text50H;
+      break;
+    default:
+    case size >= 100:
+      typography = Typography.text40H;
+      break;
+  }
+  return typography;
+}
 
 export function hashStringToNumber(str?: string) {
   let hash = 5381;

src/helpers/__tests__/AvatarHelper.spec.js

@@ -1,11 +1,24 @@
-import Colors from '../../../src/style/colors';
+import {Colors, Typography} from '../../../src/style';
 
 describe('services/AvatarService', () => {
   let uut;
   beforeEach(() => {
     uut = require('../../../src/helpers/AvatarHelper');
   });
 
+  it('should getInitialsTypography', () => {
+    expect(uut.getInitialsTypography(12)).toEqual({fontSize: 10});
+    expect(uut.getInitialsTypography(16)).toEqual({fontSize: 10});
+    expect(uut.getInitialsTypography(20)).toEqual({fontSize: 10});
+    expect(uut.getInitialsTypography(28)).toEqual(Typography.text90BO);
+    expect(uut.getInitialsTypography(40)).toEqual(Typography.text80BO);
+    expect(uut.getInitialsTypography(48)).toEqual(Typography.text80BO);
+    expect(uut.getInitialsTypography(60)).toEqual(Typography.text60BO);
+    expect(uut.getInitialsTypography(80)).toEqual(Typography.text50H);
+    expect(uut.getInitialsTypography(120)).toEqual(Typography.text40H);
+    expect(uut.getInitialsTypography(200)).toEqual(Typography.text40H);
+  });
+
   it('should getAvatarColors', () => {
     const avatarColors = uut.getAvatarColors();
     expect(avatarColors).toEqual([