💄 Avatar rhombus

frontend/src/components/UserCard.tsx

@@ -15,10 +15,16 @@ export const UserCard: React.FC<UserCardProps> = ({ user, onUser, active = false
   const classes = clsx(styles.user, { [styles.active]: active });
   return (
     <button className={classes} onClick={onUser} type="button">
-      {user?.profile?.image && (
-        <img src={user.profile?.image} alt={`Profile for ${user.firstName}`} className={styles.avatar} />
-      )}
-      {!user?.profile?.image && <span className={styles.avatar}>TODO: NO IMAGE</span>}
+      <div className={styles.avatarWrap}>
+        {user?.profile?.image && (
+          <img src={user.profile?.image} alt={`Profile for ${user.firstName}`} className={styles.avatar} />
+        )}
+        {!user?.profile?.image && (
+          <span className={styles.avatar}>
+            <span className={styles.noAvatar} />
+          </span>
+        )}
+      </div>
       <span className={styles.name}>{user?.firstName || "Ekstern"}</span>
       <span className={styles.balance}>{user?.profile?.balance || ""}</span>
     </button>