chore: changed colour of user avatar to brand colour (binary-com#12681)

henry-deriv · Jan 11, 2024 · 49fd9d7 · 49fd9d7
1 parent 762ec0f
commit 49fd9d7
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 45 deletions.
diff --git a/packages/p2p/src/components/online-status/online-status-avatar.tsx b/packages/p2p/src/components/online-status/online-status-avatar.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import { observer } from 'mobx-react-lite';
 import { Text } from '@deriv/components';
-import { generateHexColourFromNickname, getShortNickname } from 'Utils/string';
+import { observer } from '@deriv/stores';
+import { getShortNickname } from 'Utils/string';
 import OnlineStatusIcon from './online-status-icon';
 
 type TOnlineStatusAvatarProps = {
@@ -25,7 +25,7 @@ const OnlineStatusAvatar = ({ is_online, nickname, size, text_size }: TOnlineSta
                     <circle fill='black' cx='87%' cy='86%' r={size * 0.37} />
                 </mask>
                 <rect
-                    fill={generateHexColourFromNickname(nickname)}
+                    fill='#FF444F'
                     style={{
                         width: '100%',
                         height: '100%',

diff --git a/packages/p2p/src/components/user/user-avatar/user-avatar.scss b/packages/p2p/src/components/user/user-avatar/user-avatar.scss
@@ -1,5 +1,6 @@
 .user-avatar {
     align-items: center;
+    background-color: var(--brand-red-coral);
     border-radius: 50%;
     display: flex;
     justify-content: center;

diff --git a/packages/p2p/src/components/user/user-avatar/user-avatar.tsx b/packages/p2p/src/components/user/user-avatar/user-avatar.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
-import { generateHexColourFromNickname, getShortNickname } from 'Utils/string';
+import { getShortNickname } from 'Utils/string';
 import { Text } from '@deriv/components';
 
 type TUserAvatarProps = {
@@ -15,7 +15,6 @@ const UserAvatar = React.memo(({ className, nickname, size, text_size }: TUserAv
         <div
             className={classNames('user-avatar', className)}
             style={{
-                backgroundColor: generateHexColourFromNickname(nickname),
                 height: `${size}px`,
                 width: `${size}px`,
             }}

diff --git a/packages/p2p/src/utils/string.ts b/packages/p2p/src/utils/string.ts
@@ -5,46 +5,6 @@
  */
 export const countDecimalPlaces = (value: number | string): number => (value.toString().split('.')?.[1] ?? '').length;
 
-/**
- * A function that generates a colour from a nickname.
- *
- * @deprecated This will be removed once design has provided the correct colour for the user avatar.
- * @param {String} nickname - The nickname to generate a colour from.
- * @returns {String} A colour derived from nickname that is in our colours array.
- */
-export const generateHexColourFromNickname = (nickname: string): string => {
-    if (!nickname) {
-        return '??';
-    }
-
-    const colours = [
-        '#fc4400',
-        '#ff8c00',
-        '#092694',
-        '#527bb5',
-        '#3f6fe5',
-        '#6b4bb6',
-        '#db69e1',
-        '#ca0051',
-        '#3f6fe5',
-        '#f43f83',
-        '#6aba8d',
-        '#3fdce5',
-        '#1fb8bf',
-        '#9ed178',
-        '#71bd0e',
-        '#ff6444',
-    ];
-
-    const colour_hash = nickname.split().reduce((hash, char, idx) => {
-        // Below we get a random colour from the string which is explained here: https://gist.github.com/0x263b/2bdd90886c2036a1ad5bcf06d6e6fb37
-        const char_hash = nickname.charCodeAt(idx) + ((hash << 5) - hash); // eslint-disable-line no-bitwise
-        return char_hash & char_hash; // eslint-disable-line no-bitwise
-    }, 0);
-
-    return colours[((colour_hash % colours.length) + colours.length) % colours.length];
-};
-
 /**
  * A function that gets the short nickname from a nickname.
  *