From a0679c31c352186f2fa6d98ef71dd313d200808b Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Sat, 19 Mar 2022 21:19:43 +0100
Subject: [PATCH] [Refactoring] Avatar: Get rid of tag selectors

---
 src/components/common/Avatar.scss             |  6 +++---
 src/components/common/Avatar.tsx              | 19 ++++++++++++++-----
 src/components/common/PickerSelectedItem.scss |  2 +-
 src/util/buildClassName.ts                    |  7 +++++--
 4 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/components/common/Avatar.scss b/src/components/common/Avatar.scss
index c9bb6c02f..0e69ba473 100644
--- a/src/components/common/Avatar.scss
+++ b/src/components/common/Avatar.scss
@@ -13,7 +13,7 @@
   white-space: nowrap;
   user-select: none;
 
-  img:not(.emoji) {
+  &__img {
     border-radius: 50%;
     width: 100%;
     height: 100%;
@@ -24,7 +24,7 @@
     height: 1rem;
   }
 
-  i {
+  &__icon {
     font-size: 2.5rem;
 
     &.icon-reply-filled {
@@ -94,7 +94,7 @@
     height: 7.5rem;
     font-size: 3.5rem;
 
-    i {
+    &__i {
       font-size: 6rem;
     }
 
diff --git a/src/components/common/Avatar.tsx b/src/components/common/Avatar.tsx
index 26e2699db..285cf37ac 100644
--- a/src/components/common/Avatar.tsx
+++ b/src/components/common/Avatar.tsx
@@ -17,7 +17,7 @@ import {
   isUserOnline,
 } from '../../global/helpers';
 import { getFirstLetters } from '../../util/textFormat';
-import buildClassName from '../../util/buildClassName';
+import buildClassName, { createClassNameBuilder } from '../../util/buildClassName';
 import renderText from './helpers/renderText';
 import useMedia from '../../hooks/useMedia';
 import useShowTransition from '../../hooks/useShowTransition';
@@ -25,6 +25,10 @@ import useLang from '../../hooks/useLang';
 
 import './Avatar.scss';
 
+const cn = createClassNameBuilder('Avatar');
+cn.img = cn('img');
+cn.icon = cn('icon');
+
 type OwnProps = {
   className?: string;
   size?: 'micro' | 'tiny' | 'small' | 'medium' | 'large' | 'jumbo';
@@ -73,14 +77,19 @@ const Avatar: FC<OwnProps> = ({
   let content: string | undefined = '';
 
   if (isSavedMessages) {
-    content = <i className="icon-avatar-saved-messages" />;
+    content = <i className={buildClassName(cn.icon, 'icon-avatar-saved-messages')} />;
   } else if (isDeleted) {
-    content = <i className="icon-avatar-deleted-account" />;
+    content = <i className={buildClassName(cn.icon, 'icon-avatar-deleted-account')} />;
   } else if (isReplies) {
-    content = <i className="icon-reply-filled" />;
+    content = <i className={buildClassName(cn.icon, 'icon-reply-filled')} />;
   } else if (blobUrl) {
     content = (
-      <img src={blobUrl} className={buildClassName('avatar-media', transitionClassNames)} alt="" decoding="async" />
+      <img
+        src={blobUrl}
+        className={buildClassName(cn.img, 'avatar-media', transitionClassNames)}
+        alt=""
+        decoding="async"
+      />
     );
   } else if (user) {
     const userFullName = getUserFullName(user);
diff --git a/src/components/common/PickerSelectedItem.scss b/src/components/common/PickerSelectedItem.scss
index 332fa9c34..8ce8e2631 100644
--- a/src/components/common/PickerSelectedItem.scss
+++ b/src/components/common/PickerSelectedItem.scss
@@ -68,7 +68,7 @@
     flex-shrink: 0;
     transition: opacity 0.15s ease;
 
-    i {
+    .Avatar__icon, i {
       font-size: 2rem;
     }
   }
diff --git a/src/util/buildClassName.ts b/src/util/buildClassName.ts
index 95eafe294..0aef1544f 100644
--- a/src/util/buildClassName.ts
+++ b/src/util/buildClassName.ts
@@ -1,12 +1,15 @@
 type Parts = (string | false | undefined)[];
 type PartsWithGlobals = (string | false | undefined | string[])[];
+type ClassNameBuilder =
+  ((elementName: string, ...modifiers: PartsWithGlobals) => string)
+  & Record<string, string>;
 
 export default function buildClassName(...parts: Parts) {
   return parts.filter(Boolean).join(' ');
 }
 
 export function createClassNameBuilder(componentName: string) {
-  return (elementName: string, ...modifiers: PartsWithGlobals) => {
+  return ((elementName: string, ...modifiers: PartsWithGlobals) => {
     const baseName = elementName === '&' ? componentName : `${componentName}__${elementName}`;
 
     return modifiers.reduce<string[]>((acc, modifier) => {
@@ -21,5 +24,5 @@ export function createClassNameBuilder(componentName: string) {
 
       return acc;
     }, [baseName]).join(' ');
-  };
+  }) as ClassNameBuilder;
 }