From 2b467ddd5721f16be4aa11905a11edcbd1452e41 Mon Sep 17 00:00:00 2001
From: blam <ben@blam.sh>
Date: Tue, 12 Mar 2024 14:45:10 +0100
Subject: [PATCH] chore: refactor a little bit

Signed-off-by: blam <ben@blam.sh>
---
 .../core-components/src/components/Avatar/Avatar.tsx  | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/core-components/src/components/Avatar/Avatar.tsx b/packages/core-components/src/components/Avatar/Avatar.tsx
index 564fa951f0..d3b0a13602 100644
--- a/packages/core-components/src/components/Avatar/Avatar.tsx
+++ b/packages/core-components/src/components/Avatar/Avatar.tsx
@@ -19,6 +19,7 @@ import Typography from '@material-ui/core/Typography';
 import React, { CSSProperties } from 'react';
 
 import { extractInitials, stringToColor } from './utils';
+import classNames from 'classnames';
 
 /** @public */
 export type AvatarClassKey = 'avatar';
@@ -94,18 +95,24 @@ export function Avatar(props: AvatarProps) {
     !picture ? { backgroundColor: stringToColor(displayName || '') } : {},
   );
 
+  const avatarClassNames = classNames(props.classes?.avatar, classes.avatar);
+  const avatarTextClassNames = classNames(
+    props.classes?.avatarText,
+    classes.avatarText,
+  );
+
   return (
     <MaterialAvatar
       alt={displayName}
       src={picture}
-      className={`${props.classes?.avatarText} ${classes.avatar}`}
+      className={avatarClassNames}
       style={styles}
     >
       {displayName && (
         <Typography
           variant="h6"
           component="span"
-          className={`${props.classes?.avatarText} ${classes.avatarText}`}
+          className={avatarTextClassNames}
           style={fontStyles}
         >
           {extractInitials(displayName)}